tlc-claude-code 1.4.0 → 1.4.2

package/dashboard/dist/App.js

@@ -1,51 +1,245 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text, useApp, useInput } from 'ink';
 import { useState, useCallback } from 'react';
+// Layout components
+import { Shell } from './components/layout/Shell.js';
+import { Sidebar, SidebarItem } from './components/layout/Sidebar.js';
+import { Header } from './components/layout/Header.js';
+// Main pane components
 import { ChatPane } from './components/ChatPane.js';
-import { PlanView } from './components/PlanView.js';
 import { PreviewPane } from './components/PreviewPane.js';
 import { AgentsPane } from './components/AgentsPane.js';
 import { GitHubPane } from './components/GitHubPane.js';
-import { markIssueComplete, markIssueInProgress } from './components/PlanSync.js';
+import { ProjectList } from './components/ProjectList.js';
+import { ProjectDetail } from './components/ProjectDetail.js';
+import { TaskBoard } from './components/TaskBoard.js';
+import { LogsPane } from './components/LogsPane.js';
+import { HealthPane } from './components/HealthPane.js';
+import { ServicesPane } from './components/ServicesPane.js';
+import RouterPane from './components/RouterPane.js';
+import { UsagePane } from './components/UsagePane.js';
+import { SettingsPanel } from './components/SettingsPanel.js';
+import { AgentRegistryPane } from './components/AgentRegistryPane.js';
+// Utility components
+import { CommandPalette } from './components/CommandPalette.js';
+import { KeyboardHelp } from './components/KeyboardHelp.js';
+import { StatusBar } from './components/StatusBar.js';
+import { ConnectionStatus } from './components/ConnectionStatus.js';
+// Sidebar navigation items
+const navItems = [
+    { key: 'projects', label: 'Projects', icon: '📁', shortcut: '1' },
+    { key: 'tasks', label: 'Tasks', icon: '📋', shortcut: '2' },
+    { key: 'chat', label: 'Chat', icon: '💬', shortcut: '3' },
+    { key: 'agents', label: 'Agents', icon: '🤖', shortcut: '4' },
+    { key: 'preview', label: 'Preview', icon: '👁', shortcut: '5' },
+    { key: 'logs', label: 'Logs', icon: '📜', shortcut: '6' },
+    { key: 'github', label: 'GitHub', icon: '🐙', shortcut: '7' },
+    { key: 'health', label: 'Health', icon: '💚', shortcut: '8' },
+    { key: 'router', label: 'Router', icon: '🔀', shortcut: '9' },
+    { key: 'settings', label: 'Settings', icon: '⚙️', shortcut: '0' },
+];
+// Sample data for development
+const sampleProjects = [
+    {
+        id: '1',
+        name: 'TLC',
+        description: 'Test-Led Coding framework',
+        phase: { current: 33, total: 40, name: 'Multi-Model Router' },
+        tests: { passing: 1180, failing: 20, total: 1200 },
+        coverage: 87,
+        lastActivity: '2 min ago',
+    },
+];
+const sampleProjectDetail = {
+    id: '1',
+    name: 'TLC',
+    description: 'Test-Led Coding framework',
+    phases: [
+        { number: 33, name: 'Multi-Model Router', status: 'completed' },
+        { number: 34, name: 'API Gateway', status: 'in_progress' },
+    ],
+    tasks: [
+        { id: '1', title: 'Build Router API', status: 'completed' },
+        { id: '2', title: 'Dashboard Integration', status: 'in_progress' },
+    ],
+    tests: {
+        passing: 1180,
+        failing: 20,
+        total: 1200,
+        recentRuns: [
+            { id: '1', timestamp: '2 min ago', passed: 1180, failed: 20, duration: '45s' },
+            { id: '2', timestamp: '1 hour ago', passed: 1175, failed: 25, duration: '48s' },
+        ],
+    },
+    logs: [
+        { id: '1', timestamp: new Date().toISOString(), level: 'info', message: 'Server started' },
+        { id: '2', timestamp: new Date().toISOString(), level: 'info', message: 'Dashboard ready' },
+    ],
+};
+const sampleTasks = [
+    { id: '1', title: 'Build Router API', status: 'completed' },
+    { id: '2', title: 'Dashboard Integration', status: 'in_progress' },
+    { id: '3', title: 'Add E2E tests', status: 'pending' },
+];
+const sampleLogs = [
+    { id: '1', timestamp: new Date().toISOString(), level: 'info', message: 'Server started on port 5001' },
+    { id: '2', timestamp: new Date().toISOString(), level: 'info', message: 'Database connected' },
+    { id: '3', timestamp: new Date().toISOString(), level: 'warn', message: 'High memory usage detected' },
+];
+const sampleServices = [
+    { name: 'api', type: 'server', port: 5001, state: 'running' },
+    { name: 'dashboard', type: 'server', port: 3147, state: 'running' },
+    { name: 'worker', type: 'worker', port: 0, state: 'stopped' },
+];
+const sampleConfig = {
+    project: 'TLC',
+    testFrameworks: { primary: 'vitest' },
+    router: {
+        providers: {
+            claude: { type: 'cli', command: 'claude' },
+        },
+    },
+};
+const commands = [
+    { id: 'view:projects', name: 'Go to Projects', description: 'View all projects', shortcut: '1', category: 'Navigation' },
+    { id: 'view:tasks', name: 'Go to Tasks', description: 'View task board', shortcut: '2', category: 'Navigation' },
+    { id: 'view:chat', name: 'Go to Chat', description: 'Open chat', shortcut: '3', category: 'Navigation' },
+    { id: 'view:agents', name: 'Go to Agents', description: 'View agents', shortcut: '4', category: 'Navigation' },
+    { id: 'view:logs', name: 'Go to Logs', description: 'View logs', shortcut: '6', category: 'Navigation' },
+    { id: 'view:router', name: 'Go to Router', description: 'View model router', shortcut: '9', category: 'Navigation' },
+    { id: 'cmd:run-tests', name: 'Run Tests', description: 'Run test suite', category: 'Commands' },
+    { id: 'cmd:build', name: 'Build Phase', description: 'Build current phase', category: 'Commands' },
+];
+const shortcuts = [
+    { key: '1-0', description: 'Jump to view', context: 'global' },
+    { key: 'Tab', description: 'Cycle views', context: 'global' },
+    { key: 'Ctrl+K', description: 'Command palette', context: 'global' },
+    { key: 'Ctrl+B', description: 'Toggle sidebar', context: 'global' },
+    { key: '?', description: 'Show help', context: 'global' },
+    { key: 'Ctrl+Q', description: 'Quit', context: 'global' },
+    { key: 'j/k', description: 'Navigate list', context: 'lists' },
+    { key: 'Enter', description: 'Select item', context: 'lists' },
+    { key: 'Esc', description: 'Go back / Close', context: 'global' },
+];
 export function App({ isTTY = true }) {
     const { exit } = useApp();
-    const [activePane, setActivePane] = useState('chat');
-    const [pendingTasks, setPendingTasks] = useState(new Map());
+    // Navigation state
+    const [activeView, setActiveView] = useState('projects');
+    const [showCommandPalette, setShowCommandPalette] = useState(false);
+    const [showHelp, setShowHelp] = useState(false);
+    const [showSidebar, setShowSidebar] = useState(true);
+    // Data state
+    const [selectedProject, setSelectedProject] = useState(null);
+    const [connectionState] = useState('connected');
+    // Keyboard handling
     useInput((input, key) => {
+        // Global shortcuts
         if (input === 'q' && key.ctrl) {
             exit();
+            return;
+        }
+        if (input === 'k' && key.ctrl) {
+            setShowCommandPalette(prev => !prev);
+            return;
+        }
+        if (input === '?') {
+            setShowHelp(prev => !prev);
+            return;
+        }
+        if (input === 'b' && key.ctrl) {
+            setShowSidebar(prev => !prev);
+            return;
+        }
+        // Close overlays on Escape
+        if (key.escape) {
+            if (showCommandPalette)
+                setShowCommandPalette(false);
+            else if (showHelp)
+                setShowHelp(false);
+            else if (selectedProject)
+                setSelectedProject(null);
+            return;
+        }
+        // Number keys for main navigation (when no overlay)
+        if (!showCommandPalette && !showHelp) {
+            if (input === '1')
+                setActiveView('projects');
+            if (input === '2')
+                setActiveView('tasks');
+            if (input === '3')
+                setActiveView('chat');
+            if (input === '4')
+                setActiveView('agents');
+            if (input === '5')
+                setActiveView('preview');
+            if (input === '6')
+                setActiveView('logs');
+            if (input === '7')
+                setActiveView('github');
+            if (input === '8')
+                setActiveView('health');
+            if (input === '9')
+                setActiveView('router');
+            if (input === '0')
+                setActiveView('settings');
+            // Tab cycles through views
+            if (key.tab) {
+                const currentIndex = navItems.findIndex(item => item.key === activeView);
+                const nextIndex = (currentIndex + 1) % navItems.length;
+                setActiveView(navItems[nextIndex].key);
+            }
         }
-        if (key.tab) {
-            setActivePane(prev => {
-                const panes = ['chat', 'plan', 'github', 'agents', 'preview'];
-                const idx = panes.indexOf(prev);
-                return panes[(idx + 1) % panes.length];
-            });
-        }
-        // Number keys to quick-switch panes
-        if (input === '1')
-            setActivePane('chat');
-        if (input === '2')
-            setActivePane('plan');
-        if (input === '3')
-            setActivePane('github');
-        if (input === '4')
-            setActivePane('agents');
-        if (input === '5')
-            setActivePane('preview');
     }, { isActive: isTTY });
-    const handleAssignToAgent = useCallback(async (issue) => {
-        await markIssueInProgress(issue.number);
-        setPendingTasks(prev => new Map(prev).set(issue.number, issue.title));
-        // Agent assignment happens in AgentsPane
+    // Handlers
+    const handleProjectSelect = useCallback((_project) => {
+        setSelectedProject(sampleProjectDetail);
     }, []);
-    const handleTaskComplete = useCallback(async (issueNumber) => {
-        await markIssueComplete(issueNumber);
-        setPendingTasks(prev => {
-            const next = new Map(prev);
-            next.delete(issueNumber);
-            return next;
-        });
+    const handleCommandSelect = useCallback((command) => {
+        setShowCommandPalette(false);
+        if (command.id.startsWith('view:')) {
+            const view = command.id.replace('view:', '');
+            setActiveView(view);
+        }
     }, []);
-    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsxs(Box, { borderStyle: "single", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "TLC Dashboard" }), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: activePane === 'chat' ? 'cyan' : 'gray', children: "[1]Chat " }), _jsx(Text, { color: activePane === 'plan' ? 'cyan' : 'gray', children: "[2]Plan " }), _jsx(Text, { color: activePane === 'github' ? 'cyan' : 'gray', children: "[3]GitHub " }), _jsx(Text, { color: activePane === 'agents' ? 'cyan' : 'gray', children: "[4]Agents " }), _jsx(Text, { color: activePane === 'preview' ? 'cyan' : 'gray', children: "[5]Preview" })] }), _jsx(Box, { children: _jsx(Text, { color: "cyan", bold: true, children: "| TLC |" }) })] }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", width: "60%", borderStyle: "single", borderColor: activePane === 'chat' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'chat' ? 'cyan' : 'white', children: "Chat" }) }), _jsx(ChatPane, { isActive: activePane === 'chat', isTTY: isTTY })] }), _jsxs(Box, { flexDirection: "column", width: "40%", children: [_jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'github' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'github' ? 'cyan' : 'white', children: "GitHub Issues" }) }), _jsx(GitHubPane, { isActive: activePane === 'github', isTTY: isTTY, onAssignToAgent: handleAssignToAgent })] }), _jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'agents' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'agents' ? 'cyan' : 'white', children: "Agents" }) }), _jsx(AgentsPane, { isActive: activePane === 'agents', isTTY: isTTY, onTaskComplete: handleTaskComplete })] }), _jsxs(Box, { flexDirection: "column", height: "20%", borderStyle: "single", borderColor: activePane === 'plan' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'plan' ? 'cyan' : 'white', children: "Plan" }) }), _jsx(PlanView, {})] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: activePane === 'preview' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'preview' ? 'cyan' : 'white', children: "Preview" }) }), _jsx(PreviewPane, { isActive: activePane === 'preview', isTTY: isTTY })] })] })] }), _jsx(Box, { borderStyle: "single", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Tab: cycle panes | 1-5: jump to pane | Ctrl+Q: quit" }) })] }));
+    // Get current view title
+    const currentNav = navItems.find(item => item.key === activeView);
+    const viewTitle = currentNav ? `${currentNav.icon} ${currentNav.label}` : 'TLC';
+    // Render main content based on active view
+    const renderMainContent = () => {
+        // Project detail view
+        if (selectedProject && activeView === 'projects') {
+            return (_jsx(ProjectDetail, { project: selectedProject, onBack: () => setSelectedProject(null) }));
+        }
+        switch (activeView) {
+            case 'projects':
+                return (_jsx(ProjectList, { projects: sampleProjects, onSelect: handleProjectSelect }));
+            case 'tasks':
+                return _jsx(TaskBoard, { tasks: sampleTasks });
+            case 'chat':
+                return _jsx(ChatPane, { isActive: true, isTTY: isTTY });
+            case 'agents':
+                return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { flexGrow: 1, children: _jsx(AgentsPane, { isActive: true, isTTY: isTTY }) }), _jsx(Box, { height: 10, borderStyle: "single", borderColor: "gray", marginTop: 1, children: _jsx(AgentRegistryPane, { isActive: false }) })] }));
+            case 'preview':
+                return _jsx(PreviewPane, { isActive: true, isTTY: isTTY });
+            case 'logs':
+                return _jsx(LogsPane, { logs: sampleLogs, isActive: true });
+            case 'github':
+                return _jsx(GitHubPane, { isActive: true, isTTY: isTTY });
+            case 'health':
+                return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: _jsx(HealthPane, {}) }), _jsx(Box, { width: "50%", flexDirection: "column", marginLeft: 1, children: _jsx(ServicesPane, { services: sampleServices, isActive: true }) })] }));
+            case 'router':
+                return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Box, { width: "60%", flexDirection: "column", children: _jsx(RouterPane, {}) }), _jsx(Box, { width: "40%", flexDirection: "column", marginLeft: 1, children: _jsx(UsagePane, {}) })] }));
+            case 'settings':
+                return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(SettingsPanel, { config: sampleConfig }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", padding: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: "Quick Links" }), _jsx(Text, { color: "gray", children: "[U] Usage   [Q] Quality   [D] Docs   [W] Workspace   [A] Audit" })] }) })] }));
+            default:
+                return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "gray", children: "Select a view from the sidebar" }) }));
+        }
+    };
+    // Render sidebar
+    const renderSidebar = () => (_jsxs(Sidebar, { title: "TLC", children: [navItems.map(item => (_jsx(SidebarItem, { label: item.label, icon: item.icon, shortcut: item.shortcut, active: activeView === item.key }, item.key))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Ctrl+K: Commands" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "?: Help" }) })] }));
+    // Render header
+    const renderHeader = () => (_jsx(Header, { title: "TLC Dashboard", subtitle: viewTitle, status: connectionState === 'connected' ? 'online' : 'offline', actions: _jsxs(Box, { children: [_jsx(ConnectionStatus, { state: connectionState }), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { dimColor: true, children: "v1.2.24" })] }) }));
+    // Render footer/status bar
+    const renderFooter = () => (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: "Tab: cycle | 1-0: jump | Ctrl+B: sidebar | Ctrl+K: commands | ?: help | Ctrl+Q: quit" }), _jsx(StatusBar, {})] }));
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(Shell, { header: renderHeader(), footer: renderFooter(), sidebar: showSidebar ? renderSidebar() : undefined, showSidebar: showSidebar, sidebarWidth: 20, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { borderStyle: "single", borderColor: "cyan", borderBottom: true, borderTop: false, borderLeft: false, borderRight: false, paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: viewTitle }), selectedProject && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: " \u203A " }), _jsx(Text, { children: selectedProject.name })] }))] }), _jsx(Box, { flexGrow: 1, children: renderMainContent() })] }) }), showCommandPalette && (_jsx(Box, { position: "absolute", width: "60%", height: "50%", marginLeft: 10, marginTop: 5, borderStyle: "double", borderColor: "cyan", flexDirection: "column", children: _jsx(CommandPalette, { commands: commands, onSelect: handleCommandSelect, onClose: () => setShowCommandPalette(false) }) })), showHelp && (_jsx(Box, { position: "absolute", width: "70%", height: "80%", marginLeft: 8, marginTop: 3, borderStyle: "double", borderColor: "yellow", flexDirection: "column", children: _jsx(KeyboardHelp, { shortcuts: shortcuts, onClose: () => setShowHelp(false) }) }))] }));
 }

package/dashboard/dist/components/AgentRegistryPane.d.ts

@@ -0,0 +1,35 @@
+interface AgentState {
+    current: string;
+    history?: Array<{
+        state: string;
+        timestamp: string;
+    }>;
+}
+interface AgentMetadata {
+    model: string;
+    tokens?: {
+        input: number;
+        output: number;
+    };
+    cost?: number;
+}
+interface Agent {
+    id: string;
+    name: string;
+    state: AgentState;
+    metadata: AgentMetadata;
+    createdAt?: string;
+}
+type LoadAgentsFn = () => Agent[];
+interface AgentRegistryPaneProps {
+    isActive: boolean;
+    isTTY?: boolean;
+    statusFilter?: string;
+    modelFilter?: string;
+    selectedAgentId?: string;
+    refreshInterval?: number;
+    onCancelAgent?: (agentId: string) => void;
+    loadAgentsFn?: LoadAgentsFn;
+}
+export declare function AgentRegistryPane({ isActive, isTTY, statusFilter, modelFilter, selectedAgentId, refreshInterval, onCancelAgent, loadAgentsFn, }: AgentRegistryPaneProps): import("react/jsx-runtime").JSX.Element;
+export default AgentRegistryPane;

package/dashboard/dist/components/AgentRegistryPane.js

@@ -0,0 +1,89 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import Spinner from 'ink-spinner';
+// Status colors
+const STATUS_COLORS = {
+    pending: 'yellow',
+    running: 'cyan',
+    completed: 'green',
+    failed: 'red',
+    cancelled: 'gray',
+};
+// Default loader that uses the registry
+const defaultLoadAgents = () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const registry = require('../../../server/lib/agent-registry.js').default;
+    return registry.listAgents() || [];
+};
+export function AgentRegistryPane({ isActive, isTTY = true, statusFilter, modelFilter, selectedAgentId, refreshInterval = 2000, onCancelAgent, loadAgentsFn = defaultLoadAgents, }) {
+    const [agents, setAgents] = useState([]);
+    const [error, setError] = useState(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Load agents from registry
+    const loadAgents = useCallback(() => {
+        try {
+            const allAgents = loadAgentsFn();
+            setAgents(allAgents);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Error loading agents');
+            setAgents([]);
+        }
+    }, [loadAgentsFn]);
+    // Initial load and refresh interval
+    useEffect(() => {
+        loadAgents();
+        const interval = setInterval(loadAgents, refreshInterval);
+        return () => clearInterval(interval);
+    }, [loadAgents, refreshInterval]);
+    // Filter agents
+    const filteredAgents = useMemo(() => {
+        return agents.filter(agent => {
+            if (statusFilter && agent.state.current !== statusFilter) {
+                return false;
+            }
+            if (modelFilter && agent.metadata.model !== modelFilter) {
+                return false;
+            }
+            return true;
+        });
+    }, [agents, statusFilter, modelFilter]);
+    // Calculate stats
+    const stats = useMemo(() => ({
+        running: agents.filter(a => a.state.current === 'running').length,
+        completed: agents.filter(a => a.state.current === 'completed').length,
+        failed: agents.filter(a => a.state.current === 'failed').length,
+        pending: agents.filter(a => a.state.current === 'pending').length,
+    }), [agents]);
+    const hasRunningAgents = stats.running > 0;
+    // Get selected agent details
+    const selectedAgent = selectedAgentId
+        ? agents.find(a => a.id === selectedAgentId)
+        : filteredAgents[selectedIndex];
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        if (key.upArrow) {
+            setSelectedIndex(prev => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex(prev => Math.min(filteredAgents.length - 1, prev + 1));
+        }
+        else if (input === 'c' && selectedAgent && selectedAgent.state.current === 'running') {
+            onCancelAgent?.(selectedAgent.id);
+        }
+    }, { isActive: isTTY });
+    // Error state
+    if (error) {
+        return (_jsx(Box, { padding: 1, flexDirection: "column", children: _jsxs(Text, { bold: true, color: "red", children: ["Error: ", error] }) }));
+    }
+    // Empty state
+    if (agents.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Agent Registry" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "No agents registered" }) })] }));
+    }
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Agent Registry " }), _jsx(Text, { color: "gray", children: "(" }), stats.running > 0 && _jsxs(Text, { color: "cyan", children: [stats.running, " running"] }), stats.running > 0 && (stats.completed > 0 || stats.failed > 0) && _jsx(Text, { color: "gray", children: ", " }), stats.completed > 0 && _jsxs(Text, { color: "green", children: [stats.completed, " completed"] }), stats.completed > 0 && stats.failed > 0 && _jsx(Text, { color: "gray", children: ", " }), stats.failed > 0 && _jsxs(Text, { color: "red", children: [stats.failed, " failed"] }), _jsx(Text, { color: "gray", children: ")" })] }), _jsx(Box, { flexDirection: "column", children: filteredAgents.map((agent, index) => (_jsxs(Box, { marginBottom: 0, children: [_jsx(Text, { color: index === selectedIndex && isActive ? 'white' : 'gray', children: index === selectedIndex && isActive ? '→ ' : '  ' }), agent.state.current === 'running' && (_jsxs(Text, { color: "cyan", children: [_jsx(Spinner, { type: "dots" }), ' '] })), _jsxs(Text, { color: STATUS_COLORS[agent.state.current] || 'white', children: ["[", agent.state.current, "]"] }), _jsx(Text, { children: " " }), _jsx(Text, { children: agent.id.slice(0, 12) }), _jsxs(Text, { color: "gray", children: [" - ", agent.name || 'unnamed'] }), _jsxs(Text, { color: "gray", children: [" (", agent.metadata.model, ")"] })] }, agent.id))) }), selectedAgent && selectedAgentId && (_jsxs(Box, { marginTop: 1, flexDirection: "column", borderStyle: "single", paddingX: 1, children: [_jsxs(Text, { bold: true, children: ["Details: ", selectedAgent.id] }), _jsxs(Text, { children: ["Name: ", selectedAgent.name] }), _jsxs(Text, { children: ["Model: ", selectedAgent.metadata.model] }), _jsxs(Text, { children: ["Status: ", selectedAgent.state.current] }), selectedAgent.metadata.tokens && (_jsxs(Text, { children: ["Tokens: ", selectedAgent.metadata.tokens.input, " in / ", selectedAgent.metadata.tokens.output, " out"] }))] })), isActive && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["[\u2191\u2193] Navigate", hasRunningAgents && ' [c] cancel'] }) }))] }));
+}
+export default AgentRegistryPane;

package/dashboard/dist/components/AgentRegistryPane.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dashboard/dist/components/AgentRegistryPane.test.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { AgentRegistryPane } from './AgentRegistryPane.js';
+describe('AgentRegistryPane', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    // Helper to create mock loader
+    const createMockLoader = (agents) => vi.fn(() => agents);
+    describe('renders agent list correctly', () => {
+        it('displays agents from registry', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'running' }, metadata: { model: 'claude' }, createdAt: '2025-01-01T00:00:00Z' },
+                { id: 'agent-2', name: 'task-2', state: { current: 'completed' }, metadata: { model: 'gpt-4' }, createdAt: '2025-01-01T00:01:00Z' },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            // Wait for useEffect to run
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('agent-1');
+            expect(output).toContain('agent-2');
+        });
+        it('shows agent names', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'build-feature', state: { current: 'running' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('build-feature');
+        });
+    });
+    describe('shows status badges with colors', () => {
+        it('shows running status', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task', state: { current: 'running' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('running');
+        });
+        it('shows completed status', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task', state: { current: 'completed' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('completed');
+        });
+        it('shows failed status', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task', state: { current: 'failed' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('failed');
+        });
+    });
+    describe('filters by status', () => {
+        it('can filter to show only running agents', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'running' }, metadata: { model: 'claude' } },
+                { id: 'agent-2', name: 'task-2', state: { current: 'completed' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, statusFilter: "running", loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('agent-1');
+            expect(output).not.toContain('agent-2');
+        });
+    });
+    describe('filters by model', () => {
+        it('can filter to show only claude agents', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'running' }, metadata: { model: 'claude' } },
+                { id: 'agent-2', name: 'task-2', state: { current: 'running' }, metadata: { model: 'gpt-4' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, modelFilter: "claude", loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('agent-1');
+            expect(output).not.toContain('agent-2');
+        });
+    });
+    describe('shows agent details panel', () => {
+        it('shows details when agent is selected', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'running', history: [] }, metadata: { model: 'claude', tokens: { input: 100, output: 50 } } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, selectedAgentId: "agent-1", loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('Details');
+            expect(output).toContain('claude');
+        });
+    });
+    describe('cancel button', () => {
+        it('is visible for running agents', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'running' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: true, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('cancel');
+        });
+        it('is not shown for completed agents', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'completed' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: true, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            // Cancel hint should not appear when no running agents
+            expect(output).not.toContain('[c] cancel');
+        });
+    });
+    describe('auto-refresh', () => {
+        it('refreshes agent list periodically', async () => {
+            vi.useFakeTimers();
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'running' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = vi.fn(() => agents);
+            render(_jsx(AgentRegistryPane, { isActive: false, refreshInterval: 2000, loadAgentsFn: mockLoader }));
+            // Initial call happens in useEffect
+            await vi.advanceTimersByTimeAsync(0);
+            expect(mockLoader).toHaveBeenCalledTimes(1);
+            // Advance time by refresh interval
+            await vi.advanceTimersByTimeAsync(2000);
+            expect(mockLoader).toHaveBeenCalledTimes(2);
+            await vi.advanceTimersByTimeAsync(2000);
+            expect(mockLoader).toHaveBeenCalledTimes(3);
+            vi.useRealTimers();
+        });
+    });
+    describe('shows aggregate stats header', () => {
+        it('displays count of agents by status', async () => {
+            const agents = [
+                { id: 'agent-1', name: 'task-1', state: { current: 'running' }, metadata: { model: 'claude' } },
+                { id: 'agent-2', name: 'task-2', state: { current: 'running' }, metadata: { model: 'claude' } },
+                { id: 'agent-3', name: 'task-3', state: { current: 'completed' }, metadata: { model: 'claude' } },
+                { id: 'agent-4', name: 'task-4', state: { current: 'failed' }, metadata: { model: 'claude' } },
+            ];
+            const mockLoader = createMockLoader(agents);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('2 running');
+            expect(output).toContain('1 completed');
+            expect(output).toContain('1 failed');
+        });
+    });
+    describe('handles empty state', () => {
+        it('shows message when no agents', async () => {
+            const mockLoader = createMockLoader([]);
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('No agents');
+        });
+    });
+    describe('handles loading state', () => {
+        it('shows loading indicator initially', async () => {
+            const mockLoader = vi.fn(() => {
+                throw new Error('Loading...');
+            });
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            // Should handle error gracefully
+            expect(output).toBeDefined();
+        });
+    });
+    describe('handles error state', () => {
+        it('shows error message on registry failure', async () => {
+            const mockLoader = vi.fn(() => {
+                throw new Error('Registry unavailable');
+            });
+            const { lastFrame } = render(_jsx(AgentRegistryPane, { isActive: false, loadAgentsFn: mockLoader }));
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const output = lastFrame();
+            expect(output).toContain('Error');
+        });
+    });
+});

package/dashboard/dist/components/RouterPane.d.ts

@@ -0,0 +1,5 @@
+interface RouterPaneProps {
+    apiUrl?: string;
+}
+export default function RouterPane({ apiUrl }: RouterPaneProps): import("react/jsx-runtime").JSX.Element | null;
+export {};