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

src/components/AgentRunsList.tsx

@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
 import { formatISOTimestamp } from "@/lib/date-utils";
 import type { AgentRunWithMetrics } from "@/lib/api";
 import { AGENT_ICONS } from "./CCAgents";
-import { AgentRunOutputViewer } from "./AgentRunOutputViewer";
+import { useTabState } from "@/hooks/useTabState";
 
 interface AgentRunsListProps {
   /**
@@ -42,7 +42,7 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
   className,
 }) => {
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedRun, setSelectedRun] = useState<AgentRunWithMetrics | null>(null);
+  const { createAgentTab } = useTabState();
   
   // Calculate pagination
   const totalPages = Math.ceil(runs.length / ITEMS_PER_PAGE);
@@ -81,9 +81,9 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
     // If there's a callback, use it (for full-page navigation)
     if (onRunClick) {
       onRunClick(run);
-    } else {
-      // Otherwise, open in modal preview
-      setSelectedRun(run);
+    } else if (run.id) {
+      // Otherwise, open in new tab
+      createAgentTab(run.id.toString(), run.agent_name);
     }
   };
   
@@ -196,13 +196,6 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
         )}
       </div>
 
-      {/* Agent Run Output Viewer Modal */}
-      {selectedRun && (
-        <AgentRunOutputViewer
-          run={selectedRun}
-          onClose={() => setSelectedRun(null)}
-        />
-      )}
     </>
   );
 };