tlc-claude-code 1.4.1 → 1.4.2

package/dashboard/dist/components/RouterPane.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState, useEffect } from 'react';
+export default function RouterPane({ apiUrl = '/api/router/status' }) {
+    const [status, setStatus] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const fetchStatus = async () => {
+            try {
+                const response = await fetch(apiUrl);
+                if (!response.ok) {
+                    throw new Error('Failed to fetch');
+                }
+                const data = await response.json();
+                setStatus(data);
+                setError(null);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Unknown error');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchStatus();
+    }, [apiUrl]);
+    if (loading) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Model Router" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Loading router status..." }) })] }));
+    }
+    if (error) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Model Router" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })] }));
+    }
+    if (!status) {
+        return null;
+    }
+    const providers = Object.entries(status.providers);
+    const capabilities = Object.entries(status.capabilities || {});
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Model Router" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: "Providers" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [providers.map(([name, provider]) => (_jsx(ProviderRow, { name: name, provider: provider }, name))), providers.length === 0 && (_jsx(Text, { color: "gray", children: "No providers configured" }))] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: "Devserver" }), _jsx(DevserverRow, { devserver: status.devserver })] }), capabilities.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: "Routing" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: capabilities.map(([name, cap]) => (_jsx(CapabilityRow, { name: name, providers: cap.providers, allProviders: status.providers }, name))) })] })), status.costEstimate && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: "cyan", children: "Cost Estimates (Monthly)" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: Object.entries(status.costEstimate).map(([name, costs]) => (_jsxs(Box, { children: [_jsx(Text, { children: name.padEnd(12) }), _jsx(Text, { color: "green", children: "local: $0.00" }), _jsx(Text, { children: "  " }), _jsxs(Text, { color: "yellow", children: ["devserver: $", costs.devserver.toFixed(2)] })] }, name))) })] }))] }));
+}
+function ProviderRow({ name, provider }) {
+    const isLocal = provider.type === 'cli' && provider.detected;
+    const healthIndicator = provider.healthy !== false ? '●' : '○';
+    const healthColor = provider.healthy !== false ? 'green' : 'red';
+    const routingBadge = isLocal ? 'local' : 'devserver';
+    const badgeColor = isLocal ? 'green' : 'yellow';
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: healthColor, children: [healthIndicator, " "] }), _jsx(Text, { bold: true, children: name.padEnd(10) }), provider.version && _jsxs(Text, { color: "gray", children: [" ", provider.version.padEnd(10)] }), _jsxs(Text, { color: badgeColor, children: ["[", routingBadge, "]"] }), provider.capabilities && provider.capabilities.length > 0 && (_jsxs(Text, { color: "gray", children: [" (", provider.capabilities.join(', '), ")"] }))] }));
+}
+function DevserverRow({ devserver }) {
+    if (!devserver.configured) {
+        return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Not configured - run " }), _jsx(Text, { color: "cyan", children: "tlc router setup" })] }));
+    }
+    const statusText = devserver.connected ? 'Connected' : 'Disconnected';
+    const statusColor = devserver.connected ? 'green' : 'red';
+    const indicator = devserver.connected ? '●' : '○';
+    return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { color: statusColor, children: [indicator, " ", statusText] }) }), devserver.url && (_jsx(Box, { children: _jsx(Text, { color: "gray", children: devserver.url }) }))] }));
+}
+function CapabilityRow({ name, providers, allProviders, }) {
+    return (_jsxs(Box, { children: [_jsx(Text, { color: "white", children: name.padEnd(12) }), _jsx(Text, { children: "\u2192 " }), providers.map((p, idx) => {
+                const provider = allProviders[p];
+                const isLocal = provider?.type === 'cli' && provider?.detected;
+                const color = isLocal ? 'green' : 'yellow';
+                return (_jsxs(Text, { children: [_jsx(Text, { color: color, children: p }), idx < providers.length - 1 && _jsx(Text, { children: ", " })] }, p));
+            })] }));
+}

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

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

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

@@ -0,0 +1,176 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import RouterPane from './RouterPane.js';
+// Mock fetch
+global.fetch = vi.fn();
+describe('RouterPane', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.clearAllMocks();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    describe('rendering', () => {
+        it('renders detected CLIs', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {
+                        claude: { detected: true, type: 'cli', version: 'v4.0.0' },
+                        codex: { detected: true, type: 'cli', version: 'v1.0.0' },
+                    },
+                    devserver: { configured: true, connected: true },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('claude');
+            expect(output).toContain('codex');
+        });
+        it('shows CLI versions', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {
+                        claude: { detected: true, type: 'cli', version: 'v4.0.0' },
+                    },
+                    devserver: { configured: false },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('v4.0.0');
+        });
+        it('shows devserver connected status', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {},
+                    devserver: { configured: true, connected: true, url: 'https://dev.example.com' },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('Connected');
+        });
+        it('shows devserver disconnected status', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {},
+                    devserver: { configured: true, connected: false },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('Disconnected');
+        });
+        it('renders routing table', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {
+                        claude: { detected: true, type: 'cli', capabilities: ['review'] },
+                        deepseek: { detected: false, type: 'api', capabilities: ['review'] },
+                    },
+                    devserver: { configured: true },
+                    capabilities: {
+                        review: { providers: ['claude', 'deepseek'] },
+                    },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('review');
+        });
+        it('shows local vs devserver badges', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {
+                        claude: { detected: true, type: 'cli' },
+                        deepseek: { detected: false, type: 'api' },
+                    },
+                    devserver: { configured: true },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('local');
+        });
+        it('shows cost estimates', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {
+                        deepseek: { detected: false, type: 'api' },
+                    },
+                    devserver: { configured: true },
+                    costEstimate: {
+                        review: { local: 0, devserver: 1.5 },
+                    },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('$1.50');
+        });
+        it('health indicators show status', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {
+                        claude: { detected: true, type: 'cli', healthy: true },
+                        codex: { detected: false, type: 'cli', healthy: false },
+                    },
+                    devserver: { configured: true },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            // Health indicators should be present (● or similar)
+            expect(output).toBeDefined();
+        });
+        it('shows configure hint', async () => {
+            global.fetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve({
+                    providers: {},
+                    devserver: { configured: false },
+                }),
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('Router');
+        });
+    });
+    describe('loading state', () => {
+        it('handles loading state', () => {
+            global.fetch.mockImplementation(() => new Promise(() => { }) // Never resolves
+            );
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            const output = lastFrame();
+            expect(output).toContain('Loading');
+        });
+    });
+    describe('error state', () => {
+        it('handles error state', async () => {
+            global.fetch.mockRejectedValue(new Error('Network error'));
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await vi.runAllTimersAsync();
+            const output = lastFrame();
+            expect(output).toContain('Error');
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlc-claude-code",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "TLC - Test Led Coding for Claude Code",
   "bin": {
     "tlc": "./bin/tlc.js",
@@ -33,7 +33,9 @@
     "docs": "node scripts/docs-update.js",
     "docs:check": "node scripts/docs-update.js --check",
     "docs:screenshots": "node scripts/generate-screenshots.js",
-    "docs:capture": "node scripts/capture-screenshots.js"
+    "docs:capture": "node scripts/capture-screenshots.js",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui"
   },
   "repository": {
     "type": "git",
@@ -50,6 +52,7 @@
   "author": "Jurgen Calleja",
   "license": "MIT",
   "devDependencies": {
+    "@playwright/test": "^1.58.1",
     "playwright": "^1.58.1",
     "text-to-image": "^8.0.1"
   }

package/server/index.js

@@ -471,6 +471,184 @@ app.post('/api/test', (req, res) => {
   res.json({ success: true });
 });
 
+// ============================================
+// Agent Registry API (Phase 32)
+// ============================================
+const { getAgentRegistry } = require('./lib/agent-registry');
+const { createAgentState } = require('./lib/agent-state');
+const { createMetadata } = require('./lib/agent-metadata');
+
+// Helper to format agent for API response
+function formatAgent(agent) {
+  return {
+    id: agent.id,
+    name: agent.name,
+    state: {
+      current: agent.stateMachine ? agent.stateMachine.getState() : 'pending',
+      history: agent.stateMachine ? agent.stateMachine.getHistory() : [],
+    },
+    metadata: {
+      model: agent.model,
+      taskType: agent.taskType || 'unknown',
+      tokens: agent.metadataObj ? {
+        input: agent.metadataObj.inputTokens,
+        output: agent.metadataObj.outputTokens,
+        total: agent.metadataObj.totalTokens,
+      } : { input: 0, output: 0, total: 0 },
+    },
+    createdAt: agent.createdAt || agent.registeredAt,
+  };
+}
+
+// List agents
+app.get('/api/agents', (req, res) => {
+  try {
+    const registry = getAgentRegistry();
+    let agents = registry.listAgents();
+
+    // Filter by status (state.current)
+    if (req.query.status) {
+      agents = agents.filter(a =>
+        a.stateMachine ? a.stateMachine.getState() === req.query.status : false
+      );
+    }
+    // Filter by model
+    if (req.query.model) {
+      agents = agents.filter(a => a.model === req.query.model);
+    }
+    // Filter by type
+    if (req.query.type) {
+      agents = agents.filter(a => a.taskType === req.query.type);
+    }
+
+    res.json({ success: true, agents: agents.map(formatAgent) });
+  } catch (err) {
+    res.status(500).json({ success: false, error: err.message });
+  }
+});
+
+// Get single agent
+app.get('/api/agents/:id', (req, res) => {
+  try {
+    const registry = getAgentRegistry();
+    const agent = registry.getAgent(req.params.id);
+    if (!agent) {
+      return res.status(404).json({ success: false, error: 'Agent not found' });
+    }
+    res.json({ success: true, agent: formatAgent(agent) });
+  } catch (err) {
+    res.status(500).json({ success: false, error: err.message });
+  }
+});
+
+// Register new agent
+app.post('/api/agents', (req, res) => {
+  try {
+    const registry = getAgentRegistry();
+    const { id, name, model, taskType } = req.body;
+
+    if (!name) {
+      return res.status(400).json({ success: false, error: 'name is required' });
+    }
+
+    // Create state machine and metadata
+    const stateMachine = createAgentState({ agentId: id });
+    const metadataObj = createMetadata({
+      model: model || 'unknown',
+      taskType: taskType || 'default',
+    });
+
+    // Register with all components
+    const agentId = registry.registerAgent({
+      id,
+      name,
+      model: model || 'unknown',
+      taskType: taskType || 'default',
+      stateMachine,
+      metadataObj,
+      createdAt: Date.now(),
+    });
+
+    const agent = registry.getAgent(agentId);
+    res.status(201).json({ success: true, agent: formatAgent(agent) });
+  } catch (err) {
+    res.status(500).json({ success: false, error: err.message });
+  }
+});
+
+// Update agent (state transitions, token updates)
+app.patch('/api/agents/:id', (req, res) => {
+  try {
+    const registry = getAgentRegistry();
+    const agent = registry.getAgent(req.params.id);
+    if (!agent) {
+      return res.status(404).json({ success: false, error: 'Agent not found' });
+    }
+
+    // Handle state transition
+    if (req.body.state) {
+      if (!agent.stateMachine) {
+        return res.status(400).json({ success: false, error: 'Agent has no state machine' });
+      }
+      const result = agent.stateMachine.transition(req.body.state, { reason: req.body.reason });
+      if (!result.success) {
+        return res.status(400).json({ success: false, error: result.error });
+      }
+    }
+
+    // Handle token updates
+    if (req.body.tokens && agent.metadataObj) {
+      agent.metadataObj.updateTokens({
+        input: req.body.tokens.input || 0,
+        output: req.body.tokens.output || 0,
+      });
+    }
+
+    res.json({ success: true, agent: formatAgent(agent) });
+  } catch (err) {
+    res.status(500).json({ success: false, error: err.message });
+  }
+});
+
+// Delete agent
+app.delete('/api/agents/:id', (req, res) => {
+  try {
+    const registry = getAgentRegistry();
+    const removed = registry.removeAgent(req.params.id);
+    if (!removed) {
+      return res.status(404).json({ success: false, error: 'Agent not found' });
+    }
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ success: false, error: err.message });
+  }
+});
+
+// Get registry stats
+app.get('/api/agents-stats', (req, res) => {
+  try {
+    const registry = getAgentRegistry();
+    const agents = registry.listAgents();
+
+    const stats = {
+      total: agents.length,
+      byStatus: {},
+      byModel: {}
+    };
+
+    agents.forEach(agent => {
+      const status = agent.stateMachine ? agent.stateMachine.getState() : 'pending';
+      const model = agent.model || 'unknown';
+      stats.byStatus[status] = (stats.byStatus[status] || 0) + 1;
+      stats.byModel[model] = (stats.byModel[model] || 0) + 1;
+    });
+
+    res.json({ success: true, stats });
+  } catch (err) {
+    res.status(500).json({ success: false, error: err.message });
+  }
+});
+
 app.post('/api/restart', (req, res) => {
   addLog('app', '--- Restarting app ---', 'warn');
   broadcast('app-restart', {});

package/server/lib/agent-cleanup.js

@@ -0,0 +1,177 @@
+/**
+ * Agent Cleanup - Handles timeouts and orphaned agents
+ *
+ * Detects stuck agents (running state but no activity for timeout period)
+ * and transitions them to cancelled state.
+ * Supports periodic cleanup via setInterval with configurable interval.
+ */
+
+import { getAgentRegistry } from './agent-registry.js';
+import { getAgentHooks } from './agent-hooks.js';
+import { STATES } from './agent-state.js';
+
+/**
+ * Default timeout for detecting orphaned agents (30 minutes)
+ */
+const DEFAULT_TIMEOUT = 30 * 60 * 1000;
+
+/**
+ * Default interval for periodic cleanup (5 minutes)
+ */
+const DEFAULT_INTERVAL = 5 * 60 * 1000;
+
+/**
+ * Internal state for cleanup scheduling and stats
+ */
+let cleanupIntervalId = null;
+let cleanupStats = {
+  totalCleaned: 0,
+  cleanupRuns: 0,
+  lastCleanupAt: null,
+};
+
+/**
+ * Find agents that are orphaned (stuck in running state without activity)
+ * @param {Object} [options] - Options
+ * @param {number} [options.timeout] - Timeout in ms (default: 30 minutes)
+ * @returns {Array} Array of orphaned agent objects
+ */
+function findOrphanedAgents(options = {}) {
+  const timeout = options.timeout || DEFAULT_TIMEOUT;
+  const registry = getAgentRegistry();
+  const now = Date.now();
+
+  // Get all running agents
+  const runningAgents = registry.listAgents({ status: STATES.RUNNING });
+
+  // Filter to those with no activity for longer than timeout
+  const orphans = runningAgents.filter(agent => {
+    const lastActivity = agent.lastActivity || agent.registeredAt;
+    const inactiveTime = now - lastActivity;
+
+    // Check if agent has a custom grace period
+    if (agent.gracePeriod) {
+      return inactiveTime > agent.gracePeriod;
+    }
+
+    return inactiveTime > timeout;
+  });
+
+  return orphans;
+}
+
+/**
+ * Clean up orphaned agents by transitioning them to cancelled state
+ * @param {Object} [options] - Options
+ * @param {number} [options.timeout] - Timeout for finding orphans (default: 30 minutes)
+ * @returns {Promise<Object>} Result with cleaned agents and any errors
+ */
+async function cleanupOrphans(options = {}) {
+  const orphans = findOrphanedAgents(options);
+  const registry = getAgentRegistry();
+  const hooks = getAgentHooks();
+
+  const cleaned = [];
+  const errors = [];
+
+  for (const agent of orphans) {
+    try {
+      // Update agent status to cancelled
+      registry.updateAgent(agent.id, {
+        status: STATES.CANCELLED,
+        cancelledAt: Date.now(),
+        cancelReason: 'orphaned',
+      });
+
+      // Trigger onCancel hook
+      try {
+        await hooks.triggerHook('onCancel', {
+          agentId: agent.id,
+          agent: agent,
+          reason: 'orphaned',
+          timeout: options.timeout || DEFAULT_TIMEOUT,
+        });
+      } catch (hookError) {
+        // Hook errors are logged but don't stop cleanup
+        errors.push({ agentId: agent.id, error: hookError.message, type: 'hook' });
+      }
+
+      cleaned.push(agent);
+
+      // Log cleanup action
+      console.log(`[agent-cleanup] Cleaned orphaned agent: ${agent.id} (${agent.name})`);
+    } catch (err) {
+      errors.push({ agentId: agent.id, error: err.message, type: 'cleanup' });
+    }
+  }
+
+  // Update stats
+  cleanupStats.totalCleaned += cleaned.length;
+  cleanupStats.cleanupRuns += 1;
+  cleanupStats.lastCleanupAt = Date.now();
+
+  return { cleaned, errors };
+}
+
+/**
+ * Schedule periodic cleanup
+ * @param {Object} [options] - Options
+ * @param {number} [options.interval] - Interval in ms (default: 5 minutes)
+ * @param {number} [options.timeout] - Timeout for finding orphans (default: 30 minutes)
+ */
+function scheduleCleanup(options = {}) {
+  const interval = options.interval || DEFAULT_INTERVAL;
+
+  // Stop any existing schedule
+  stopCleanup();
+
+  // Schedule periodic cleanup
+  cleanupIntervalId = setInterval(async () => {
+    try {
+      await cleanupOrphans(options);
+    } catch (err) {
+      console.error('[agent-cleanup] Error during scheduled cleanup:', err);
+    }
+  }, interval);
+}
+
+/**
+ * Stop the scheduled cleanup
+ */
+function stopCleanup() {
+  if (cleanupIntervalId) {
+    clearInterval(cleanupIntervalId);
+    cleanupIntervalId = null;
+  }
+}
+
+/**
+ * Get cleanup statistics
+ * @returns {Object} Stats including totalCleaned, cleanupRuns, lastCleanupAt
+ */
+function getCleanupStats() {
+  return { ...cleanupStats };
+}
+
+/**
+ * Reset cleanup state (for testing)
+ */
+function resetCleanup() {
+  stopCleanup();
+  cleanupStats = {
+    totalCleaned: 0,
+    cleanupRuns: 0,
+    lastCleanupAt: null,
+  };
+}
+
+export {
+  findOrphanedAgents,
+  cleanupOrphans,
+  scheduleCleanup,
+  stopCleanup,
+  getCleanupStats,
+  resetCleanup,
+  DEFAULT_TIMEOUT,
+  DEFAULT_INTERVAL,
+};