diff --git a/src/components/CCAgents.tsx b/src/components/CCAgents.tsx index 9262bae..3f272fa 100644 --- a/src/components/CCAgents.tsx +++ b/src/components/CCAgents.tsx @@ -38,7 +38,6 @@ import { Toast, ToastContainer } from "@/components/ui/toast"; import { CreateAgent } from "./CreateAgent"; import { AgentExecution } from "./AgentExecution"; import { AgentRunsList } from "./AgentRunsList"; -import { RunningSessionsView } from "./RunningSessionsView"; import { GitHubAgentBrowser } from "./GitHubAgentBrowser"; import { ICON_MAP } from "./IconPicker"; @@ -73,7 +72,6 @@ export const CCAgents: React.FC = ({ onBack, className }) => { const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null); const [currentPage, setCurrentPage] = useState(1); const [view, setView] = useState<"list" | "create" | "edit" | "execute">("list"); - const [activeTab, setActiveTab] = useState<"agents" | "running">("agents"); const [selectedAgent, setSelectedAgent] = useState(null); // const [selectedRunId, setSelectedRunId] = useState(null); const [showGitHubBrowser, setShowGitHubBrowser] = useState(false); @@ -363,203 +361,154 @@ export const CCAgents: React.FC = ({ onBack, className }) => { )} - {/* Tab Navigation */} -
- -
- - {/* Tab Content */} + {/* Main Content */}
- {activeTab === "agents" && ( - - {/* Agents Grid */} -
- {loading ? ( -
-
+ + {/* Agents Grid */} +
+ {loading ? ( +
+
+
+ ) : agents.length === 0 ? ( +
+ +

No agents yet

+

+ Create your first CC Agent to get started +

+ +
+ ) : ( + <> +
+ + {paginatedAgents.map((agent, index) => ( + + + +
+ {renderIcon(agent.icon)} +
+

+ {agent.name} +

+

+ Created: {new Date(agent.created_at).toLocaleDateString()} +

+ + + + + + + + + + ))} +
- ) : agents.length === 0 ? ( -
- -

No agents yet

-

- Create your first CC Agent to get started -

- + + {/* Pagination */} + {totalPages > 1 && ( +
+ + + Page {currentPage} of {totalPages} + + +
+ )} + + )} +
+ + {/* Execution History */} + {!loading && agents.length > 0 && ( +
+
+ +

Recent Executions

+
+ {runsLoading ? ( +
+
) : ( - <> -
- - {paginatedAgents.map((agent, index) => ( - - - -
- {renderIcon(agent.icon)} -
-

- {agent.name} -

-

- Created: {new Date(agent.created_at).toLocaleDateString()} -

- - - - - - - - - - ))} - -
- - {/* Pagination */} - {totalPages > 1 && ( -
- - - Page {currentPage} of {totalPages} - - -
- )} - + )}
- - {/* Execution History */} - {!loading && agents.length > 0 && ( -
-
- -

Recent Executions

-
- {runsLoading ? ( -
-
-
- ) : ( - - )} -
- )} - - )} - - {activeTab === "running" && ( - - - - )} + )} +
diff --git a/src/components/RunningSessionsView.tsx b/src/components/RunningSessionsView.tsx deleted file mode 100644 index 0061fd6..0000000 --- a/src/components/RunningSessionsView.tsx +++ /dev/null @@ -1,281 +0,0 @@ -import { useState, useEffect } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { Play, Square, Clock, Cpu, RefreshCw, Eye, ArrowLeft, Bot } from 'lucide-react'; -import { Button } from '@/components/ui/button'; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; -import { Badge } from '@/components/ui/badge'; -import { Toast, ToastContainer } from '@/components/ui/toast'; -import { SessionOutputViewer } from './SessionOutputViewer'; -import { api } from '@/lib/api'; -import type { AgentRun } from '@/lib/api'; - -interface RunningSessionsViewProps { - className?: string; - showBackButton?: boolean; - onBack?: () => void; -} - -export function RunningSessionsView({ className, showBackButton = false, onBack }: RunningSessionsViewProps) { - const [runningSessions, setRunningSessions] = useState([]); - const [loading, setLoading] = useState(true); - const [refreshing, setRefreshing] = useState(false); - const [selectedSession, setSelectedSession] = useState(null); - const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null); - - const loadRunningSessions = async () => { - try { - const sessions = await api.listRunningAgentSessions(); - setRunningSessions(sessions); - } catch (error) { - console.error('Failed to load running sessions:', error); - setToast({ message: 'Failed to load running sessions', type: 'error' }); - } finally { - setLoading(false); - } - }; - - const refreshSessions = async () => { - setRefreshing(true); - try { - // First cleanup finished processes - await api.cleanupFinishedProcesses(); - // Then reload the list - await loadRunningSessions(); - setToast({ message: 'Running sessions list has been updated', type: 'success' }); - } catch (error) { - console.error('Failed to refresh sessions:', error); - setToast({ message: 'Failed to refresh sessions', type: 'error' }); - } finally { - setRefreshing(false); - } - }; - - const killSession = async (runId: number, agentName: string) => { - try { - const success = await api.killAgentSession(runId); - if (success) { - setToast({ message: `${agentName} session has been stopped`, type: 'success' }); - // Refresh the list after killing - await loadRunningSessions(); - } else { - setToast({ message: 'Session may have already finished', type: 'error' }); - } - } catch (error) { - console.error('Failed to kill session:', error); - setToast({ message: 'Failed to terminate session', type: 'error' }); - } - }; - - const formatDuration = (startTime: string) => { - const start = new Date(startTime); - const now = new Date(); - const durationMs = now.getTime() - start.getTime(); - const minutes = Math.floor(durationMs / (1000 * 60)); - const seconds = Math.floor((durationMs % (1000 * 60)) / 1000); - return `${minutes}m ${seconds}s`; - }; - - const getStatusBadge = (status: string) => { - switch (status) { - case 'running': - return Running; - case 'pending': - return Pending; - default: - return {status}; - } - }; - - useEffect(() => { - loadRunningSessions(); - - // Set up auto-refresh every 5 seconds - const interval = setInterval(() => { - if (!refreshing) { - loadRunningSessions(); - } - }, 5000); - - return () => clearInterval(interval); - }, [refreshing]); - - if (loading) { - return ( -
-
- - Loading running sessions... -
-
- ); - } - - return ( -
-
-
- {showBackButton && onBack && ( - - )} - -

Running Agent Sessions

- {runningSessions.length} -
- -
- - {runningSessions.length === 0 ? ( - - -
- -

No agent sessions are currently running

-
- - - ) : ( -
- {runningSessions.map((session) => ( - - - -
-
-
- -
-
- {session.agent_name} -
- {getStatusBadge(session.status)} - {session.pid && ( - - - PID {session.pid} - - )} -
-
-
-
- - -
-
- - -
-
-

Task

-

{session.task}

-
- -
-
-

Model

-

{session.model}

-
-
-

Duration

-

- {session.process_started_at - ? formatDuration(session.process_started_at) - : 'Unknown' - } -

-
-
- -
-

Project Path

-

- {session.project_path} -

-
- - {session.session_id && ( -
-

Session ID

-

- {session.session_id} -

-
- )} -
- - - - ))} -
- )} - - {/* Session Output Viewer */} - - {selectedSession && ( - -
- setSelectedSession(null)} - /> -
- - )} - - - {/* Toast Notification */} - - {toast && ( - setToast(null)} - /> - )} - -
- ); -} \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 2c9604b..578c7ba 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -27,5 +27,5 @@ export * from "./ui/tooltip"; export * from "./ui/popover"; export * from "./ui/pagination"; export * from "./ui/split-pane"; -export * from "./ui/scroll-area"; -export * from "./RunningClaudeSessions"; \ No newline at end of file +export * from "./ui/scroll-area"; +export * from "./RunningClaudeSessions";