'use client' import { useState, useEffect, useCallback, useRef } from 'react' import { useTranslations } from 'next-intl' import { Button } from '@/components/ui/button' import { Loader } from '@/components/ui/loader' import { useSmartPoll } from '@/lib/use-smart-poll' import { createClientLogger } from '@/lib/client-logger' import { AgentAvatar } from '@/components/ui/agent-avatar' import { OverviewTab, SoulTab, MemoryTab, TasksTab, ActivityTab, ConfigTab, FilesTab, ToolsTab, ChannelsTab, CronTab, ModelsTab, CreateAgentModal } from './agent-detail-tabs' import { formatModelName, buildTaskStatParts } from '@/lib/agent-card-helpers' import { apiFetch, ApiError } from '@/lib/api-client' import { useMissionControl, type Agent } from '@/store' const log = createClientLogger('AgentSquadPhase3') interface WorkItem { type: string count: number items: any[] } interface HeartbeatResponse { status: 'HEARTBEAT_OK' | 'WORK_ITEMS_FOUND' agent: string checked_at: number work_items?: WorkItem[] total_items?: number message?: string } interface SoulTemplate { name: string description: string size: number } const statusColors: Record = { offline: 'bg-gray-500', idle: 'bg-green-500', busy: 'bg-yellow-500', error: 'bg-red-500', } const statusBadgeStyles: Record = { offline: 'bg-slate-500/15 text-slate-300 border-slate-500/30', idle: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30', busy: 'bg-amber-500/15 text-amber-300 border-amber-500/30', error: 'bg-rose-500/15 text-rose-300 border-rose-500/30', } const statusIcons: Record = { offline: '-', idle: 'o', busy: '~', error: '!', } const defaultCardStyle = { edge: 'from-slate-400/60 to-slate-600/30', glow: 'from-slate-500/10 via-transparent to-transparent', dot: 'bg-slate-400', } const statusCardStyles: Record = { offline: defaultCardStyle, idle: { edge: 'from-emerald-300/80 to-emerald-600/30', glow: 'from-emerald-400/15 via-transparent to-transparent', dot: 'bg-emerald-300', }, busy: { edge: 'from-amber-300/80 to-amber-600/30', glow: 'from-amber-400/15 via-transparent to-transparent', dot: 'bg-amber-300', }, error: { edge: 'from-rose-300/80 to-rose-600/30', glow: 'from-rose-400/15 via-transparent to-transparent', dot: 'bg-rose-300', }, } export function AgentSquadPanelPhase3() { const t = useTranslations('agentSquadPhase3') const { agents, setAgents } = useMissionControl() const [loading, setLoading] = useState(agents.length === 0) const [error, setError] = useState(null) const [selectedAgent, setSelectedAgent] = useState(null) const [showCreateModal, setShowCreateModal] = useState(false) const [showQuickSpawnModal, setShowQuickSpawnModal] = useState(false) const [autoRefresh, setAutoRefresh] = useState(true) const [syncing, setSyncing] = useState(false) const [syncToast, setSyncToast] = useState(null) const [showHidden, setShowHidden] = useState(false) // Sync agents from gateway config or local disk const syncFromConfig = async (source?: 'local') => { setSyncing(true) setSyncToast(null) try { const url = source === 'local' ? '/api/agents/sync?source=local' : '/api/agents/sync' // raw:true keeps the original Response-based branching (apiFetch only throws // on 401/403/404/5xx; a 400 with {error} must still surface as a thrown error // exactly as before). redirectOnUnauthenticated:false preserves this site's // custom /login?next= redirect on 401 instead of apiFetch's /login?from=. let response: Response try { response = await apiFetch(url, { method: 'POST', raw: true, redirectOnUnauthenticated: false, }) } catch (apiErr) { if (apiErr instanceof ApiError) { if (apiErr.code === 'UNAUTHENTICATED') { window.location.assign('/login?next=%2Fagents') return } if (apiErr.code === 'FORBIDDEN') { throw new Error('Admin access required for agent sync') } // SERVER_ERROR / NOT_FOUND / NETWORK_ERROR / PARSE_ERROR — surface the message const payload = apiErr.payload const payloadError = payload && typeof payload === 'object' && 'error' in payload ? (payload as { error?: string }).error : undefined throw new Error(payloadError || apiErr.message || 'Sync failed') } throw apiErr } const data = await response.json() if (!response.ok) throw new Error(data.error || 'Sync failed') if (source === 'local') { setSyncToast(data.message || 'Local agent sync complete') } else { setSyncToast(`Synced ${data.synced} agents (${data.created} new, ${data.updated} updated)`) } fetchAgents() setTimeout(() => setSyncToast(null), 5000) } catch (err: any) { setSyncToast(`Sync failed: ${err.message}`) setTimeout(() => setSyncToast(null), 5000) } finally { setSyncing(false) } } // Fetch agents const fetchAgents = useCallback(async () => { try { setError(null) if (agents.length === 0) setLoading(true) const url = showHidden ? '/api/agents?show_hidden=true' : '/api/agents' // raw:true preserves the original Response branching (apiFetch only throws on // 401/403/404/5xx; a 400 with {error} must still surface as before). // redirectOnUnauthenticated:false keeps this site's /login?next= redirect. let response: Response try { response = await apiFetch(url, { raw: true, redirectOnUnauthenticated: false, }) } catch (apiErr) { if (apiErr instanceof ApiError) { if (apiErr.code === 'UNAUTHENTICATED') { window.location.assign('/login?next=%2Fagents') return } if (apiErr.code === 'FORBIDDEN') { throw new Error('Access denied') } const payload = apiErr.payload const payloadError = payload && typeof payload === 'object' && 'error' in payload ? (payload as { error?: string }).error : undefined throw new Error(payloadError || apiErr.message || 'Failed to fetch agents') } throw apiErr } if (!response.ok) { const data = await response.json().catch(() => ({})) throw new Error(data.error || 'Failed to fetch agents') } const data = await response.json() setAgents(data.agents || []) } catch (err) { setError(err instanceof Error ? err.message : 'An error occurred') } finally { setLoading(false) } }, [agents.length, setAgents, showHidden]) // Smart polling with visibility pause useSmartPoll(fetchAgents, 30000, { enabled: autoRefresh, pauseWhenSseConnected: true }) // Update agent status const updateAgentStatus = async (agentName: string, status: Agent['status'], activity?: string) => { try { // apiFetch throws on any non-2xx, matching the original's single generic // failure path. redirectOnUnauthenticated:false preserves the original // behavior (a 401 here surfaced as a generic error, not a redirect). await apiFetch('/api/agents', { method: 'PUT', body: JSON.stringify({ name: agentName, status, last_activity: activity || `Status changed to ${status}` }), redirectOnUnauthenticated: false, }) // Update store state setAgents(agents.map(agent => agent.name === agentName ? { ...agent, status, last_activity: activity || `Status changed to ${status}`, last_seen: Math.floor(Date.now() / 1000), updated_at: Math.floor(Date.now() / 1000) } : agent )) } catch (error) { log.error('Failed to update agent status:', error) setError('Failed to update agent status') } } // Wake agent via session_send const wakeAgent = async (agentName: string, sessionKey: string) => { try { // apiFetch throws on any non-2xx; the existing catch below sets a fixed // error message (it never used data.error), so the throw is sufficient. // redirectOnUnauthenticated:false preserves the original no-redirect behavior. await apiFetch(`/api/agents/${agentName}/wake`, { method: 'POST', body: JSON.stringify({ message: `🤖 **Wake Up Call**\n\nAgent ${agentName}, you have been manually woken up.\nCheck Mission Control for any pending tasks or notifications.\n\n⏰ ${new Date().toLocaleString()}` }), redirectOnUnauthenticated: false, }) await updateAgentStatus(agentName, 'idle', 'Manually woken via session') } catch (error) { log.error('Failed to wake agent:', error) setError('Failed to wake agent') } } // Re-fetch when showHidden changes useEffect(() => { fetchAgents() // eslint-disable-next-line react-hooks/exhaustive-deps }, [showHidden]) const toggleAgentHidden = async (agentId: number, hide: boolean) => { try { // apiFetch throws on any non-2xx; the catch below sets a fixed error message. // redirectOnUnauthenticated:false preserves the original no-redirect behavior. await apiFetch(`/api/agents/${agentId}/hide`, { method: hide ? 'POST' : 'DELETE', redirectOnUnauthenticated: false, }) fetchAgents() } catch (error) { log.error('Failed to toggle agent visibility:', error) setError('Failed to update agent visibility') } } const deleteAgent = async (agentId: number, removeWorkspace: boolean) => { const previousAgents = agents setAgents(agents.filter((agent) => agent.id !== agentId)) // raw:true keeps the original Response branching so the error body (payload.error) // is read on any non-ok status, exactly as before. apiFetch throws on 401/403/404/5xx // before returning, so the catch reproduces the optimistic-update rollback + rethrow. // redirectOnUnauthenticated:false preserves the original no-redirect behavior. let response: Response try { response = await apiFetch(`/api/agents/${agentId}`, { method: 'DELETE', body: JSON.stringify({ remove_workspace: removeWorkspace }), raw: true, redirectOnUnauthenticated: false, }) } catch (apiErr) { setAgents(previousAgents) if (apiErr instanceof ApiError) { const payload = apiErr.payload const payloadError = payload && typeof payload === 'object' && 'error' in payload ? (payload as { error?: string }).error : undefined throw new Error(payloadError || 'Failed to delete agent') } throw apiErr } const payload = await response.json().catch(() => ({})) if (!response.ok) { setAgents(previousAgents) throw new Error(payload?.error || 'Failed to delete agent') } setSyncToast( removeWorkspace ? `Deleted agent and workspace: ${payload?.deleted || agentId}` : `Deleted agent: ${payload?.deleted || agentId}`, ) await fetchAgents() setTimeout(() => setSyncToast(null), 5000) } // Format last seen time const formatLastSeen = (timestamp?: number) => { if (!timestamp) return 'Never' const now = Date.now() const diffMs = now - (timestamp * 1000) const diffMinutes = Math.floor(diffMs / (1000 * 60)) const diffHours = Math.floor(diffMs / (1000 * 60 * 60)) const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)) if (diffMinutes < 1) return 'Just now' if (diffMinutes < 60) return `${diffMinutes}m ago` if (diffHours < 24) return `${diffHours}h ago` if (diffDays < 7) return `${diffDays}d ago` return new Date(timestamp * 1000).toLocaleDateString() } // Check if agent had recent heartbeat (within 30 minutes) const hasRecentHeartbeat = (agent: Agent) => { if (!agent.last_seen) return false const thirtyMinutesAgo = Math.floor(Date.now() / 1000) - (30 * 60) return agent.last_seen > thirtyMinutesAgo } // Get status distribution for summary const statusCounts = agents.reduce((acc, agent) => { acc[agent.status] = (acc[agent.status] || 0) + 1 return acc }, {} as Record) if (loading && agents.length === 0) { return } return (

{/* Header */}

{t('title')}

{/* Status Summary */}

{Object.entries(statusCounts).map(([status, count]) => (

{count}

))}

{/* Active Heartbeats Indicator */}

{t('activeHeartbeats', { count: agents.filter(hasRecentHeartbeat).length })}

{/* Sync Toast */} {syncToast && (

{syncToast}

)} {/* Error Display */} {error && (

{error}

)} {/* Agent Grid */}

{agents.length === 0 ? (

{t('noAgents')}

{t('noAgentsHint')}

) : (

{agents.map(agent => { const modelName = formatModelName(agent.config) const taskStatsLine = buildTaskStatParts(agent.taskStats) return (

setSelectedAgent(agent)} >

{agent.hidden ?

hidden

: null} {/* Header: avatar + name + status */}

{agent.name}

{(agent as any).source && (agent as any).source !== 'manual' && ( {(agent as any).source} )}

{agent.role}{modelName && <> · {modelName}}

{hasRecentHeartbeat(agent) && (

)} {agent.status}

{/* Task stats — inline */} {taskStatsLine && (

{taskStatsLine.map((part, i) => ( {i > 0 && ·} {part.count} {' '}{part.label} ))}

)} {/* Footer: last seen + actions */}

{formatLastSeen(agent.last_seen)}

{agent.session_key ? ( ) : ( )}

) })}

)}

{/* Agent Detail Modal */} {selectedAgent && ( setSelectedAgent(null)} onUpdate={fetchAgents} onStatusUpdate={updateAgentStatus} onWakeAgent={wakeAgent} onDelete={deleteAgent} /> )} {/* Create Agent Modal */} {showCreateModal && ( setShowCreateModal(false)} onCreated={fetchAgents} /> )} {/* Quick Spawn Modal */} {showQuickSpawnModal && selectedAgent && ( { setShowQuickSpawnModal(false) setSelectedAgent(null) }} onSpawned={fetchAgents} /> )}

) } // Enhanced Agent Detail Modal with Tabs function AgentDetailModalPhase3({ agent, onClose, onUpdate, onStatusUpdate, onWakeAgent, onDelete }: { agent: Agent onClose: () => void onUpdate: () => void onStatusUpdate: (name: string, status: Agent['status'], activity?: string) => Promise onWakeAgent: (name: string, sessionKey: string) => Promise onDelete: (agentId: number, removeWorkspace: boolean) => Promise }) { const [agentState, setAgentState] = useState(agent as Agent & { config?: any; working_memory?: string }) const [activeTab, setActiveTab] = useState<'overview' | 'soul' | 'memory' | 'config' | 'tasks' | 'activity' | 'files' | 'tools' | 'channels' | 'cron' | 'models'>('overview') const [editing, setEditing] = useState(false) const [formData, setFormData] = useState({ role: agent.role, session_key: agent.session_key || '', soul_content: agent.soul_content || '', working_memory: agent.working_memory || '', model: (() => { const p = (agent as any).config?.model?.primary; return (typeof p === 'string' ? p : p?.primary) || '' })(), }) const [workspaceFiles, setWorkspaceFiles] = useState<{ identityMd: string; agentMd: string }>({ identityMd: '', agentMd: '', }) const [soulTemplates, setSoulTemplates] = useState([]) const [heartbeatData, setHeartbeatData] = useState(null) const [loadingHeartbeat, setLoadingHeartbeat] = useState(false) const [deleteBusy, setDeleteBusy] = useState(false) const [deleteError, setDeleteError] = useState(null) const [showDeleteMenu, setShowDeleteMenu] = useState(false) const [saveBusy, setSaveBusy] = useState(false) const deleteMenuRef = useRef(null) useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (deleteBusy) return if (deleteMenuRef.current && !deleteMenuRef.current.contains(e.target as Node)) { setShowDeleteMenu(false) } } if (showDeleteMenu) { document.addEventListener('mousedown', handleClickOutside) } return () => document.removeEventListener('mousedown', handleClickOutside) }, [showDeleteMenu, deleteBusy]) useEffect(() => { setAgentState(agent as Agent & { config?: any; working_memory?: string }) setFormData({ role: agent.role, session_key: agent.session_key || '', soul_content: agent.soul_content || '', working_memory: (agent as any).working_memory || '', model: (() => { const p = (agent as any).config?.model?.primary; return (typeof p === 'string' ? p : p?.primary) || '' })(), }) }, [agent]) useEffect(() => { const loadCanonicalAgentData = async () => { // This loader degrades gracefully: each response is checked with .ok and only // applied on success; partial failures are silently tolerated. apiFetch throws // on 401/403/404/5xx, which would reject Promise.all and break that partial- // success contract — so each request uses raw:true and swallows the ApiError, // yielding null (treated as "not ok"). redirectOnUnauthenticated:false preserves // the original no-redirect behavior on auth failure. const rawGet = (path: string): Promise => apiFetch(path, { raw: true, redirectOnUnauthenticated: false }).catch(() => null) try { const [agentRes, soulRes, memoryRes, filesRes] = await Promise.all([ rawGet(`/api/agents/${agent.id}`), rawGet(`/api/agents/${agent.id}/soul`), rawGet(`/api/agents/${agent.id}/memory`), rawGet(`/api/agents/${agent.id}/files`), ]) if (agentRes?.ok) { const payload = await agentRes.json() if (payload?.agent) { const freshAgent = payload.agent as Agent & { config?: any; working_memory?: string } setAgentState((prev) => ({ ...prev, ...freshAgent })) setFormData((prev) => ({ ...prev, role: freshAgent.role || prev.role, session_key: freshAgent.session_key || '', model: (freshAgent as any).config?.model?.primary || prev.model, })) } } if (soulRes?.ok) { const payload = await soulRes.json() setFormData((prev) => ({ ...prev, soul_content: String(payload?.soul_content || '') })) } if (memoryRes?.ok) { const payload = await memoryRes.json() setFormData((prev) => ({ ...prev, working_memory: String(payload?.working_memory || '') })) } if (filesRes?.ok) { const payload = await filesRes.json() setWorkspaceFiles({ identityMd: String(payload?.files?.['identity.md']?.content || ''), agentMd: String(payload?.files?.['agent.md']?.content || ''), }) } } catch (error) { log.error('Failed to load canonical agent data:', error) } } loadCanonicalAgentData() }, [agent.id]) const formatLastSeen = (timestamp?: number) => { if (!timestamp) return 'Never' const diffMs = Date.now() - (timestamp * 1000) const diffMinutes = Math.floor(diffMs / (1000 * 60)) const diffHours = Math.floor(diffMs / (1000 * 60 * 60)) if (diffMinutes < 1) return 'Just now' if (diffMinutes < 60) return `${diffMinutes}m ago` if (diffHours < 24) return `${diffHours}h ago` return new Date(timestamp * 1000).toLocaleDateString() } // Load SOUL templates useEffect(() => { const loadTemplates = async () => { try { // Graceful: only applied when response.ok; non-ok is silently ignored. // raw:true keeps the .ok check; redirectOnUnauthenticated:false preserves // the original no-redirect behavior on auth failure. const response = await apiFetch(`/api/agents/${agent.name}/soul`, { method: 'PATCH', raw: true, redirectOnUnauthenticated: false, }) if (response.ok) { const data = await response.json() setSoulTemplates(data.templates || []) } } catch (error) { log.error('Failed to load SOUL templates:', error) } } if (activeTab === 'soul') { loadTemplates() } }, [activeTab, agent.name]) // Perform heartbeat check const performHeartbeat = async () => { setLoadingHeartbeat(true) try { // Graceful: only applied when response.ok. raw:true keeps the .ok check; // redirectOnUnauthenticated:false preserves the original no-redirect behavior. const response = await apiFetch(`/api/agents/${agent.name}/heartbeat`, { raw: true, redirectOnUnauthenticated: false, }) if (response.ok) { const data = await response.json() setHeartbeatData(data) } } catch (error) { log.error('Failed to perform heartbeat:', error) } finally { setLoadingHeartbeat(false) } } const handleSave = async () => { setSaveBusy(true) try { // apiFetch throws on any non-2xx, matching the original throw-on-not-ok. // The catch below only logs. redirectOnUnauthenticated:false preserves the // original no-redirect behavior on auth failure. await apiFetch('/api/agents', { method: 'PUT', body: JSON.stringify({ name: agentState.name, ...formData }), redirectOnUnauthenticated: false, }) setEditing(false) onUpdate() } catch (error) { log.error('Failed to update agent:', error) } finally { setSaveBusy(false) } } const handleSoulSave = async (content: string, templateName?: string) => { try { // apiFetch throws on any non-2xx, matching the original throw-on-not-ok. // The catch below only logs. redirectOnUnauthenticated:false preserves the // original no-redirect behavior on auth failure. await apiFetch(`/api/agents/${agentState.id}/soul`, { method: 'PUT', body: JSON.stringify({ soul_content: content, template_name: templateName }), redirectOnUnauthenticated: false, }) setFormData(prev => ({ ...prev, soul_content: content })) setAgentState(prev => ({ ...prev, soul_content: content })) onUpdate() } catch (error) { log.error('Failed to update SOUL:', error) } } const handleMemorySave = async (content: string, append: boolean = false) => { try { // apiFetch throws on any non-2xx (matching throw-on-not-ok) and returns the // parsed JSON body directly on success. The catch below only logs. // redirectOnUnauthenticated:false preserves the original no-redirect behavior. const data = await apiFetch<{ working_memory: string }>(`/api/agents/${agentState.id}/memory`, { method: 'PUT', body: JSON.stringify({ working_memory: content, append }), redirectOnUnauthenticated: false, }) setFormData(prev => ({ ...prev, working_memory: data.working_memory })) setAgentState(prev => ({ ...prev, working_memory: data.working_memory })) onUpdate() } catch (error) { log.error('Failed to update memory:', error) } } const handleWorkspaceFileSave = async (file: 'identity.md' | 'agent.md', content: string) => { // raw:true keeps the original Response branching so the error body (payload.error) // is read on any non-ok status, exactly as before. apiFetch throws on 401/403/404/5xx // before returning, so the catch rethrows with the same payload-derived message. // redirectOnUnauthenticated:false preserves the original no-redirect behavior. let response: Response try { response = await apiFetch(`/api/agents/${agentState.id}/files`, { method: 'PUT', body: JSON.stringify({ file, content }), raw: true, redirectOnUnauthenticated: false, }) } catch (apiErr) { if (apiErr instanceof ApiError) { const payload = apiErr.payload const payloadError = payload && typeof payload === 'object' && 'error' in payload ? (payload as { error?: string }).error : undefined throw new Error(payloadError || `Failed to save ${file}`) } throw apiErr } const payload = await response.json().catch(() => ({})) if (!response.ok) { throw new Error(payload?.error || `Failed to save ${file}`) } setWorkspaceFiles((prev) => ({ ...prev, ...(file === 'identity.md' ? { identityMd: content } : { agentMd: content }), })) } const tabs = [ { id: 'overview', label: 'Overview', icon: 'O' }, { id: 'files', label: 'Files', icon: 'F' }, { id: 'tools', label: 'Tools', icon: 'W' }, { id: 'models', label: 'Models', icon: 'P' }, { id: 'channels', label: 'Channels', icon: 'H' }, { id: 'cron', label: 'Cron', icon: 'R' }, { id: 'soul', label: 'SOUL', icon: 'S' }, { id: 'memory', label: 'Memory', icon: 'M' }, { id: 'tasks', label: 'Tasks', icon: 'T' }, { id: 'config', label: 'Config', icon: 'C' }, { id: 'activity', label: 'Activity', icon: 'A' } ] const handleDelete = async (removeWorkspace: boolean) => { const scope = removeWorkspace ? 'agent and workspace' : 'agent' const confirmed = window.confirm(`Delete ${scope} for "${agentState.name}"? This cannot be undone.`) if (!confirmed) return setDeleteBusy(true) setDeleteError(null) try { await onDelete(agentState.id, removeWorkspace) onClose() } catch (error: any) { setDeleteError(error?.message || `Failed to delete ${scope}`) } finally { setDeleteBusy(false) } } return (

e.stopPropagation()} > {/* Modal Header */}

{agentState.name}

{agentState.status} {agentState.session_key && ( Session )}

{agentState.role} · seen {formatLastSeen(agentState.last_seen)}

{showDeleteMenu && (

)}

{deleteError && (

{deleteError}

)} {/* Tab Navigation */}

{tabs.map(tab => ( ))}

{/* Tab Content */}

{activeTab === 'overview' && ( setEditing(true)} onCancel={() => setEditing(false)} heartbeatData={heartbeatData} loadingHeartbeat={loadingHeartbeat} onPerformHeartbeat={performHeartbeat} /> )} {activeTab === 'soul' && ( )} {activeTab === 'memory' && ( )} {activeTab === 'tasks' && ( )} {activeTab === 'config' && ( )} {activeTab === 'files' && ( )} {activeTab === 'tools' && ( )} {activeTab === 'channels' && ( )} {activeTab === 'cron' && ( )} {activeTab === 'models' && ( )} {activeTab === 'activity' && ( )}

) } // Quick Spawn Modal Component function QuickSpawnModal({ agent, onClose, onSpawned }: { agent: Agent onClose: () => void onSpawned: () => void }) { const [spawnData, setSpawnData] = useState({ task: '', model: 'sonnet', label: `${agent.name}-subtask-${Date.now()}`, timeoutSeconds: 300 }) const [isSpawning, setIsSpawning] = useState(false) const [spawnResult, setSpawnResult] = useState(null) const models = [ { id: 'haiku', name: 'Claude Haiku', cost: '$0.25/1K', speed: 'Ultra Fast' }, { id: 'sonnet', name: 'Claude Sonnet', cost: '$3.00/1K', speed: 'Fast' }, { id: 'opus', name: 'Claude Opus', cost: '$15.00/1K', speed: 'Slow' }, { id: 'groq-fast', name: 'Groq Llama 8B', cost: '$0.05/1K', speed: '840 tok/s' }, { id: 'groq', name: 'Groq Llama 70B', cost: '$0.59/1K', speed: '150 tok/s' }, { id: 'deepseek', name: 'DeepSeek R1', cost: 'FREE', speed: 'Local' }, ] const handleSpawn = async () => { if (!spawnData.task.trim()) { alert('Please enter a task description') return } setIsSpawning(true) try { // Graceful: a non-ok response is surfaced via alert(result.error), NOT thrown, // and must not fall into the "Network error occurred" catch. raw:true keeps the // original Response branching; the inner catch reproduces the else-branch alert // for the statuses apiFetch throws on (401/403/404/5xx) using the error payload. // redirectOnUnauthenticated:false preserves the original no-redirect behavior. let response: Response try { response = await apiFetch('/api/spawn', { method: 'POST', body: JSON.stringify({ ...spawnData, parentAgent: agent.name, sessionKey: agent.session_key }), raw: true, redirectOnUnauthenticated: false, }) } catch (apiErr) { if (apiErr instanceof ApiError && apiErr.code !== 'NETWORK_ERROR') { const payload = apiErr.payload const payloadError = payload && typeof payload === 'object' && 'error' in payload ? (payload as { error?: string }).error : undefined alert(payloadError || 'Failed to spawn agent') return } throw apiErr } const result = await response.json() if (response.ok) { setSpawnResult(result) onSpawned() // Auto-close after 2 seconds if successful setTimeout(() => { onClose() }, 2000) } else { alert(result.error || 'Failed to spawn agent') } } catch (error) { log.error('Spawn failed:', error) alert('Network error occurred') } finally { setIsSpawning(false) } } return (

Quick Spawn for {agent.name}

{spawnResult ? (

Agent spawned successfully!

Agent ID: {spawnResult.agentId}

Session: {spawnResult.sessionId}

Model: {spawnResult.model}

) : (

{/* Task Description */}

Task Description *

setSpawnData(prev => ({ ...prev, task: e.target.value }))}
                placeholder={`Delegate a subtask to ${agent.name}...`}
                className="w-full h-24 px-3 py-2 bg-surface-1 border border-border rounded text-foreground placeholder-muted-foreground focus:border-primary/50 focus:ring-1 focus:ring-primary/50 resize-none"
              />
            </div>

{/* Model Selection */}
            <div>
              <label className="block text-sm font-medium text-foreground/80 mb-2">
                Model
              </label>
              <select
                value={spawnData.model}
                onChange={(e) => setSpawnData(prev => ({ ...prev, model: e.target.value }))}
                className="w-full px-3 py-2 bg-surface-1 border border-border rounded text-foreground focus:border-primary/50 focus:ring-1 focus:ring-primary/50"
              >
                {models.map(model => (
                  <option key={model.id} value={model.id}>
                    {model.name} - {model.cost} ({model.speed})
                  </option>
                ))}
              </select>
            </div>

{/* Agent Label */}
            <div>
              <label className="block text-sm font-medium text-foreground/80 mb-2">
                Agent Label
              </label>
              <input
                type="text"
                value={spawnData.label}
                onChange={(e) => setSpawnData(prev => ({ ...prev, label: e.target.value }))}
                className="w-full px-3 py-2 bg-surface-1 border border-border rounded text-foreground focus:border-primary/50 focus:ring-1 focus:ring-primary/50"
              />
            </div>

{/* Timeout */}
            <div>
              <label className="block text-sm font-medium text-foreground/80 mb-2">
                Timeout (seconds)
              </label>
              <input
                type="number"
                value={spawnData.timeoutSeconds}
                onChange={(e) => setSpawnData(prev => ({ ...prev, timeoutSeconds: parseInt(e.target.value) }))}
                min={30}
                max={3600}
                className="w-full px-3 py-2 bg-surface-1 border border-border rounded text-foreground focus:border-primary/50 focus:ring-1 focus:ring-primary/50"
              />
            </div>

{/* Action Buttons */}
            <div className="flex gap-3 pt-4">
              <Button
                onClick={handleSpawn}
                disabled={isSpawning || !spawnData.task.trim()}
                className="flex-1"
              >
                {isSpawning ? 'Spawning...' : 'Spawn Agent'}
              </Button>
              <Button
                onClick={onClose}
                variant="secondary"
              >
                Cancel
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default AgentSquadPanelPhase3
</article></body></html>