tlc-claude-code 1.4.9 → 1.5.2

package/dashboard/dist/components/orchestration/ModelSelector.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function ModelSelector({ models, selected, currentOverride, showCapabilities, showPricing, allowOneTime, allowPersistent, onSelect, onClear, }) {
+    if (models.length === 0) {
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { dimColor: true, children: "No models available" }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Model Selection" }), currentOverride && (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "cyan", children: ["Override: ", currentOverride] }), onClear && (_jsx(Text, { color: "gray", children: " [Clear]" }))] })), _jsx(Box, { marginTop: 1, flexDirection: "column", children: models.map((model) => {
+                    const isSelected = selected === model.id;
+                    const isOverride = currentOverride === model.id;
+                    return (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', children: isSelected ? '●' : '○' }), _jsxs(Text, { color: model.available ? 'white' : 'gray', dimColor: !model.available, children: [' ', model.name] }), isOverride && (_jsx(Text, { color: "yellow", children: " (override)" })), !model.available && (_jsx(Text, { color: "red", children: " (unavailable)" }))] }), showPricing && model.pricing !== undefined && (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { dimColor: true, children: "Price: " }), _jsxs(Text, { children: ["$", model.pricing.toFixed(4), "/1K"] })] })), showCapabilities && model.capabilities && (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { dimColor: true, children: "Capabilities: " }), _jsx(Text, { children: model.capabilities.join(', ') })] }))] }, model.id));
+                }) }), (allowOneTime || allowPersistent) && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Options: " }), allowOneTime && _jsx(Text, { children: "[One-time] " }), allowPersistent && _jsx(Text, { children: "[Persistent]" })] }))] }));
+}

package/dashboard/dist/components/orchestration/ModelSelector.test.d.ts

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

package/dashboard/dist/components/orchestration/ModelSelector.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ModelSelector } from './ModelSelector.js';
+describe('ModelSelector', () => {
+    const defaultModels = [
+        { id: 'gpt-4', name: 'GPT-4', available: true, pricing: 0.03 },
+        { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', available: true, pricing: 0.002 },
+        { id: 'claude-3-opus', name: 'Claude 3 Opus', available: false, pricing: 0.06 },
+    ];
+    it('renders model list', () => {
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels }));
+        expect(lastFrame()?.toLowerCase()).toMatch(/gpt-4/);
+    });
+    it('capabilities shown per model', () => {
+        const models = [
+            { ...defaultModels[0], capabilities: ['code', 'chat', 'vision'] },
+        ];
+        const { lastFrame } = render(_jsx(ModelSelector, { models: models, showCapabilities: true }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('pricing shown per model', () => {
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels, showPricing: true }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('availability indicator shown', () => {
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('select triggers callback', () => {
+        const onSelect = vi.fn();
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels, onSelect: onSelect }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('one-time override option available', () => {
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels, allowOneTime: true }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('persistent override option available', () => {
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels, allowPersistent: true }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('clear override button works', () => {
+        const onClear = vi.fn();
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels, currentOverride: "gpt-4", onClear: onClear }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('unavailable models indicated', () => {
+        const { lastFrame } = render(_jsx(ModelSelector, { models: defaultModels }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('handles empty model list', () => {
+        const { lastFrame } = render(_jsx(ModelSelector, { models: [] }));
+        expect(lastFrame()).toBeDefined();
+    });
+});

package/dashboard/dist/components/orchestration/OrchestrationDashboard.d.ts

@@ -0,0 +1,28 @@
+type AgentStatus = 'running' | 'queued' | 'completed' | 'failed' | 'paused' | 'cancelled';
+interface Agent {
+    id: string;
+    name?: string;
+    model: string;
+    status: AgentStatus;
+    startTime: Date;
+    tokens: {
+        input: number;
+        output: number;
+    };
+    cost: number;
+}
+interface CostData {
+    spent: number;
+    budget: number;
+    breakdown?: Record<string, number>;
+}
+interface OrchestrationDashboardProps {
+    agents: Agent[];
+    cost: CostData;
+    width?: number;
+    error?: string;
+    onConnect?: () => void;
+    onSelectAgent?: (agentId: string) => void;
+}
+export declare function OrchestrationDashboard({ agents, cost, width, error, onConnect, onSelectAgent, }: OrchestrationDashboardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dashboard/dist/components/orchestration/OrchestrationDashboard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { AgentList } from './AgentList.js';
+import { CostMeter } from './CostMeter.js';
+export function OrchestrationDashboard({ agents, cost, width = 120, error, onConnect, onSelectAgent, }) {
+    const [selectedAgent, setSelectedAgent] = useState();
+    // Handle error state
+    if (error) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: "red", children: "Dashboard error" }), _jsx(Text, { color: "red", children: error })] }));
+    }
+    // Calculate summary stats
+    const stats = {
+        total: agents.length,
+        running: agents.filter((a) => a.status === 'running').length,
+        completed: agents.filter((a) => a.status === 'completed').length,
+        failed: agents.filter((a) => a.status === 'failed').length,
+        queued: agents.filter((a) => a.status === 'queued').length,
+    };
+    const totalTokens = agents.reduce((sum, a) => sum + a.tokens.input + a.tokens.output, 0);
+    const handleSelect = (agentId) => {
+        setSelectedAgent(agentId);
+        onSelectAgent?.(agentId);
+    };
+    // Responsive layout
+    const isNarrow = width < 100;
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Orchestration Dashboard" }), _jsxs(Text, { dimColor: true, children: [" - ", stats.total, " agents"] })] }), _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "blue", children: [stats.running, " running"] }), _jsx(Text, { children: " | " }), _jsxs(Text, { color: "yellow", children: [stats.queued, " queued"] }), _jsx(Text, { children: " | " }), _jsxs(Text, { color: "green", children: [stats.completed, " completed"] }), stats.failed > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " | " }), _jsxs(Text, { color: "red", children: [stats.failed, " failed"] })] })), _jsxs(Text, { dimColor: true, children: [" | ", totalTokens.toLocaleString(), " tokens"] })] }), _jsxs(Box, { flexDirection: isNarrow ? 'column' : 'row', children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(AgentList, { agents: agents, selected: selectedAgent, onSelect: handleSelect }) }), _jsx(Box, { flexDirection: "column", marginLeft: isNarrow ? 0 : 2, marginTop: isNarrow ? 1 : 0, width: isNarrow ? '100%' : 30, children: _jsx(CostMeter, { spent: cost.spent, budget: cost.budget, breakdown: cost.breakdown }) })] }), agents.length === 0 && !error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No agents currently running. Start an orchestration to see activity." }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191/\u2193 Select | Enter View | P Pause | C Cancel | R Retry | Q Quit" }) })] }));
+}

package/dashboard/dist/components/orchestration/OrchestrationDashboard.test.d.ts

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

package/dashboard/dist/components/orchestration/OrchestrationDashboard.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { OrchestrationDashboard } from './OrchestrationDashboard.js';
+describe('OrchestrationDashboard', () => {
+    const mockAgents = [
+        { id: 'agent-1', name: 'Test 1', model: 'gpt-4', status: 'running', startTime: new Date(), tokens: { input: 100, output: 50 }, cost: 0.01 },
+        { id: 'agent-2', name: 'Test 2', model: 'gpt-3.5', status: 'completed', startTime: new Date(), tokens: { input: 200, output: 100 }, cost: 0.005 },
+    ];
+    const mockCost = {
+        spent: 50,
+        budget: 100,
+        breakdown: { 'gpt-4': 40, 'gpt-3.5-turbo': 10 },
+    };
+    it('renders without error', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('summary stats show totals', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('agent list is visible', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('cost sidebar visible', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('handles WebSocket connection', () => {
+        const onConnect = vi.fn();
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost, onConnect: onConnect }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('updates on agent change', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('handles mobile layout', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost, width: 80 }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('keyboard navigation works', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: mockAgents, cost: mockCost }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('error boundary catches errors', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: [], cost: mockCost, error: "Test error" }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('empty state shows message', () => {
+        const { lastFrame } = render(_jsx(OrchestrationDashboard, { agents: [], cost: mockCost }));
+        expect(lastFrame()).toBeDefined();
+    });
+});

package/dashboard/dist/components/orchestration/QualityIndicator.d.ts

@@ -0,0 +1,11 @@
+interface QualityIndicatorProps {
+    score?: number;
+    threshold?: number;
+    dimensions?: Record<string, number>;
+    history?: number[];
+    showThreshold?: boolean;
+    showRetryHint?: boolean;
+    loading?: boolean;
+}
+export declare function QualityIndicator({ score, threshold, dimensions, history, showThreshold, showRetryHint, loading, }: QualityIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dashboard/dist/components/orchestration/QualityIndicator.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function QualityIndicator({ score, threshold = 70, dimensions, history, showThreshold, showRetryHint, loading, }) {
+    if (loading) {
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { dimColor: true, children: "Loading quality data..." }) }));
+    }
+    if (score === undefined) {
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { dimColor: true, children: "No quality data" }) }));
+    }
+    const pass = score >= threshold;
+    const getScoreColor = (s, t) => {
+        if (s >= t + 10)
+            return 'green';
+        if (s >= t)
+            return 'yellow';
+        return 'red';
+    };
+    // Create simple gauge
+    const gaugeLength = 20;
+    const filledLength = Math.round((score / 100) * gaugeLength);
+    const thresholdPos = Math.round((threshold / 100) * gaugeLength);
+    const gauge = '█'.repeat(filledLength) + '░'.repeat(gaugeLength - filledLength);
+    // Create sparkline from history
+    const renderSparkline = (data) => {
+        if (!data || data.length === 0)
+            return '';
+        const blocks = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+        const min = Math.min(...data);
+        const max = Math.max(...data);
+        const range = max - min || 1;
+        return data.map((v) => {
+            const idx = Math.round(((v - min) / range) * 7);
+            return blocks[idx];
+        }).join('');
+    };
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Quality Score" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: getScoreColor(score, threshold), bold: true, children: [score, "%"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: pass ? 'green' : 'red', children: pass ? '✓ PASS' : '✗ FAIL' })] }), _jsx(Box, { children: _jsxs(Text, { color: getScoreColor(score, threshold), children: ["[", gauge, "]"] }) }), showThreshold && (_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["Threshold: ", threshold, "%"] }) })), dimensions && Object.keys(dimensions).length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Dimensions:" }), Object.entries(dimensions).map(([dim, dimScore]) => (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ["  ", dim, ": "] }), _jsxs(Text, { color: getScoreColor(dimScore, threshold), children: [dimScore, "%"] })] }, dim)))] })), history && history.length > 0 && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Trend: " }), _jsx(Text, { color: "cyan", children: renderSparkline(history) })] })), !pass && showRetryHint && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "Consider retry with a better model" }) }))] }));
+}

package/dashboard/dist/components/orchestration/QualityIndicator.test.d.ts

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

package/dashboard/dist/components/orchestration/QualityIndicator.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { QualityIndicator } from './QualityIndicator.js';
+describe('QualityIndicator', () => {
+    it('gauge shows score', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 85, threshold: 70 }));
+        expect(lastFrame()).toContain('85');
+    });
+    it('gauge colored by threshold - pass', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 85, threshold: 70 }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('gauge colored by threshold - fail', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 50, threshold: 70 }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('dimension breakdown expandable', () => {
+        const dimensions = {
+            style: 80,
+            completeness: 90,
+            correctness: 85,
+        };
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 85, threshold: 70, dimensions: dimensions }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('pass indicator shows check', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 85, threshold: 70 }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('fail indicator shows x', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 50, threshold: 70 }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('threshold line visible', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 85, threshold: 70, showThreshold: true }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('trend sparkline shows history', () => {
+        const history = [60, 65, 70, 75, 80, 85];
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 85, threshold: 70, history: history }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('retry recommendation on fail', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { score: 50, threshold: 70, showRetryHint: true }));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('loading state handled', () => {
+        const { lastFrame } = render(_jsx(QualityIndicator, { loading: true }));
+        expect(lastFrame()).toBeDefined();
+    });
+});

package/dashboard/dist/components/orchestration/index.d.ts

@@ -0,0 +1,8 @@
+export { AgentCard } from './AgentCard.js';
+export { AgentControls } from './AgentControls.js';
+export { AgentDetail } from './AgentDetail.js';
+export { AgentList } from './AgentList.js';
+export { CostMeter } from './CostMeter.js';
+export { ModelSelector } from './ModelSelector.js';
+export { OrchestrationDashboard } from './OrchestrationDashboard.js';
+export { QualityIndicator } from './QualityIndicator.js';

package/dashboard/dist/components/orchestration/index.js

@@ -0,0 +1,8 @@
+export { AgentCard } from './AgentCard.js';
+export { AgentControls } from './AgentControls.js';
+export { AgentDetail } from './AgentDetail.js';
+export { AgentList } from './AgentList.js';
+export { CostMeter } from './CostMeter.js';
+export { ModelSelector } from './ModelSelector.js';
+export { OrchestrationDashboard } from './OrchestrationDashboard.js';
+export { QualityIndicator } from './QualityIndicator.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlc-claude-code",
-  "version": "1.4.9",
+  "version": "1.5.2",
   "description": "TLC - Test Led Coding for Claude Code",
   "bin": {
     "tlc": "./bin/tlc.js",