feat: implement comprehensive tabbed interface system

- Add TabContext and useTabState for centralized tab management
- Create TabManager component with drag-and-drop reordering
- Implement TabContent component for dynamic content rendering
- Add AgentsModal for enhanced agent management interface
- Integrate tab system into main App component
- Update existing components to work with new tab architecture
- Support multiple tab types: chat, agent, projects, usage, mcp, settings
- Add tab status tracking and unsaved changes detection
- Implement smooth animations and modern UI interactions
This commit is contained in:
Vivek R
2025-07-15 14:08:48 +05:30
parent cee71343f5
commit 9887b9d14a
9 changed files with 1952 additions and 187 deletions

View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { Circle, FileText, Settings, ExternalLink, BarChart3, Network, Info } from "lucide-react";
import { Circle, FileText, Settings, ExternalLink, BarChart3, Network, Info, Bot } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover } from "@/components/ui/popover";
import { api, type ClaudeVersionStatus } from "@/lib/api";
@@ -27,6 +27,10 @@ interface TopbarProps {
* Callback when Info is clicked
*/
onInfoClick: () => void;
/**
* Callback when Agents is clicked
*/
onAgentsClick?: () => void;
/**
* Optional className for styling
*/
@@ -50,6 +54,7 @@ export const Topbar: React.FC<TopbarProps> = ({
onUsageClick,
onMCPClick,
onInfoClick,
onAgentsClick,
className,
}) => {
const [versionStatus, setVersionStatus] = useState<ClaudeVersionStatus | null>(null);
@@ -173,6 +178,18 @@ export const Topbar: React.FC<TopbarProps> = ({
{/* Action Buttons */}
<div className="flex items-center space-x-2">
{onAgentsClick && (
<Button
variant="ghost"
size="sm"
onClick={onAgentsClick}
className="text-xs"
>
<Bot className="mr-2 h-3 w-3" />
Agents
</Button>
)}
<Button
variant="ghost"
size="sm"