tlc-claude-code 0.9.6 → 0.9.8

package/dashboard/dist/components/HealthPane.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function HealthPane({ data }) {
+    if (!data) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Project Health" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "No health data available." }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Run /tlc:security to audit." }) })] }));
+    }
+    const { security, outdated } = data;
+    // Determine security status color
+    const getSecurityColor = () => {
+        if (security.critical > 0)
+            return 'red';
+        if (security.high > 0)
+            return 'red';
+        if (security.moderate > 0)
+            return 'yellow';
+        if (security.low > 0)
+            return 'yellow';
+        return 'green';
+    };
+    // Determine outdated status color
+    const getOutdatedColor = () => {
+        if (outdated.major && outdated.major > 0)
+            return 'yellow';
+        if (outdated.total > 10)
+            return 'yellow';
+        if (outdated.total > 0)
+            return 'gray';
+        return 'green';
+    };
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Project Health" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Security:" }), security.total === 0 ? (_jsx(Box, { children: _jsx(Text, { color: "green", children: "  \u2713 No vulnerabilities" }) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsxs(Text, { color: getSecurityColor(), children: [security.total, " vulnerabilities"] }) }), security.critical > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["    \uD83D\uDD34 Critical: ", security.critical] }) })), security.high > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["    \uD83D\uDFE0 High: ", security.high] }) })), security.moderate > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "yellow", children: ["    \uD83D\uDFE1 Moderate: ", security.moderate] }) })), security.low > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["    \uD83D\uDFE2 Low: ", security.low] }) }))] }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Dependencies:" }), outdated.total === 0 ? (_jsx(Box, { children: _jsx(Text, { color: "green", children: "  \u2713 All up to date" }) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsxs(Text, { color: getOutdatedColor(), children: [outdated.total, " outdated"] }) }), outdated.major !== undefined && outdated.major > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "yellow", children: ["    \u26A0\uFE0F Major: ", outdated.major] }) })), outdated.minor !== undefined && outdated.minor > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["    \uD83D\uDCE6 Minor: ", outdated.minor] }) })), outdated.patch !== undefined && outdated.patch > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["    \uD83D\uDD27 Patch: ", outdated.patch] }) }))] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: security.total > 0 ? '/tlc:security to fix' :
+                        outdated.total > 0 ? '/tlc:outdated to update' :
+                            'Healthy!' }) })] }));
+}

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { HealthPane } from './HealthPane.js';
+describe('HealthPane', () => {
+    it('renders without error', () => {
+        const { lastFrame } = render(_jsx(HealthPane, {}));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('shows placeholder when no data', () => {
+        const { lastFrame } = render(_jsx(HealthPane, {}));
+        const output = lastFrame();
+        expect(output).toContain('Health');
+    });
+    it('shows security status when provided', () => {
+        const healthData = {
+            security: {
+                total: 3,
+                critical: 0,
+                high: 2,
+                moderate: 1,
+                low: 0,
+            },
+            outdated: { total: 5 },
+        };
+        const { lastFrame } = render(_jsx(HealthPane, { data: healthData }));
+        const output = lastFrame();
+        expect(output).toContain('3'); // vulnerability count
+    });
+    it('shows green checkmark when no vulnerabilities', () => {
+        const healthData = {
+            security: { total: 0, critical: 0, high: 0, moderate: 0, low: 0 },
+            outdated: { total: 0 },
+        };
+        const { lastFrame } = render(_jsx(HealthPane, { data: healthData }));
+        const output = lastFrame();
+        expect(output).toContain('✓');
+    });
+    it('shows warning for critical vulnerabilities', () => {
+        const healthData = {
+            security: { total: 1, critical: 1, high: 0, moderate: 0, low: 0 },
+            outdated: { total: 2 },
+        };
+        const { lastFrame } = render(_jsx(HealthPane, { data: healthData }));
+        const output = lastFrame();
+        expect(output).toContain('1');
+    });
+    it('shows outdated package count', () => {
+        const healthData = {
+            security: { total: 0, critical: 0, high: 0, moderate: 0, low: 0 },
+            outdated: { total: 8, major: 2, minor: 3, patch: 3 },
+        };
+        const { lastFrame } = render(_jsx(HealthPane, { data: healthData }));
+        const output = lastFrame();
+        expect(output).toContain('8');
+    });
+    it('uses colors based on severity', () => {
+        const healthData = {
+            security: { total: 5, critical: 2, high: 3, moderate: 0, low: 0 },
+            outdated: { total: 0 },
+        };
+        const { lastFrame } = render(_jsx(HealthPane, { data: healthData }));
+        const output = lastFrame();
+        // Just verify it renders
+        expect(output).toContain('5');
+    });
+});

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

@@ -0,0 +1,19 @@
+interface LogEntry {
+    timestamp?: string;
+    service?: string;
+    level?: 'error' | 'warn' | 'info' | 'debug';
+    message: string;
+}
+interface LogsPaneProps {
+    logs: LogEntry[];
+    services?: string[];
+    selectedService?: string;
+    onServiceChange?: (service: string | undefined) => void;
+    isActive: boolean;
+    maxLines?: number;
+}
+export declare function formatTimestamp(ts: string | undefined): string;
+export declare function filterLogsByService(logs: LogEntry[], service: string | undefined): LogEntry[];
+export declare function filterLogsByLevel(logs: LogEntry[], level: string | undefined): LogEntry[];
+export declare function LogsPane({ logs, services, selectedService, onServiceChange, isActive, maxLines, }: LogsPaneProps): import("react/jsx-runtime").JSX.Element;
+export default LogsPane;

package/dashboard/dist/components/LogsPane.js

@@ -0,0 +1,103 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+const levelColors = {
+    error: 'red',
+    warn: 'yellow',
+    info: 'cyan',
+    debug: 'gray',
+};
+const levelIcons = {
+    error: '✗',
+    warn: '⚠',
+    info: 'ℹ',
+    debug: '·',
+};
+export function formatTimestamp(ts) {
+    if (!ts)
+        return '';
+    try {
+        const date = new Date(ts);
+        if (isNaN(date.getTime()))
+            return '';
+        const hours = String(date.getUTCHours()).padStart(2, '0');
+        const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+        const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+        return `${hours}:${minutes}:${seconds}`;
+    }
+    catch {
+        return '';
+    }
+}
+export function filterLogsByService(logs, service) {
+    if (!service)
+        return logs;
+    return logs.filter((log) => log.service === service);
+}
+export function filterLogsByLevel(logs, level) {
+    if (!level)
+        return logs;
+    const levels = ['error', 'warn', 'info', 'debug'];
+    const levelIndex = levels.indexOf(level);
+    if (levelIndex === -1)
+        return logs;
+    return logs.filter((log) => {
+        const logLevel = log.level || 'info';
+        return levels.indexOf(logLevel) <= levelIndex;
+    });
+}
+function LogLine({ entry }) {
+    const timestamp = formatTimestamp(entry.timestamp);
+    const level = entry.level || 'info';
+    const color = levelColors[level] || 'white';
+    const icon = levelIcons[level] || ' ';
+    return (_jsxs(Box, { children: [timestamp && (_jsxs(Text, { dimColor: true, children: ["[", timestamp, "] "] })), entry.service && (_jsxs(Text, { color: "blue", children: ["[", entry.service, "] "] })), _jsxs(Text, { color: color, children: [icon, " "] }), _jsx(Text, { children: entry.message })] }));
+}
+function ServiceFilter({ services, selected, onSelect, }) {
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Filter: " }), _jsx(Text, { bold: !selected, color: !selected ? 'blue' : undefined, underline: !selected, children: "[All]" }), services.map((s) => (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { bold: selected === s, color: selected === s ? 'blue' : undefined, underline: selected === s, children: ["[", s, "]"] }) }, s)))] }));
+}
+export function LogsPane({ logs, services = [], selectedService, onServiceChange, isActive, maxLines = 20, }) {
+    const [autoScroll, setAutoScroll] = useState(true);
+    const [levelFilter, setLevelFilter] = useState(undefined);
+    // Filter logs
+    let filteredLogs = filterLogsByService(logs, selectedService);
+    filteredLogs = filterLogsByLevel(filteredLogs, levelFilter);
+    // Take last N lines
+    const displayLogs = filteredLogs.slice(-maxLines);
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Service filter shortcuts
+        if (input === '0' || input === 'a') {
+            onServiceChange?.(undefined);
+        }
+        else if (input >= '1' && input <= '9') {
+            const idx = parseInt(input, 10) - 1;
+            if (idx < services.length) {
+                onServiceChange?.(services[idx]);
+            }
+        }
+        // Level filter shortcuts
+        if (input === 'e') {
+            setLevelFilter(levelFilter === 'error' ? undefined : 'error');
+        }
+        else if (input === 'w') {
+            setLevelFilter(levelFilter === 'warn' ? undefined : 'warn');
+        }
+        else if (input === 'i') {
+            setLevelFilter(levelFilter === 'info' ? undefined : 'info');
+        }
+        else if (input === 'd') {
+            setLevelFilter(levelFilter === 'debug' ? undefined : 'debug');
+        }
+        // Toggle auto-scroll
+        if (input === 's') {
+            setAutoScroll(!autoScroll);
+        }
+    }, { isActive });
+    if (logs.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Logs" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "No logs yet" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Start services to see logs" }) })] }));
+    }
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Logs " }), _jsxs(Text, { dimColor: true, children: ["(", filteredLogs.length, " entries)"] }), autoScroll && _jsx(Text, { color: "green", children: " \u2193" })] }), services.length > 0 && (_jsx(ServiceFilter, { services: services, selected: selectedService, onSelect: onServiceChange || (() => { }) })), levelFilter && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Level: " }), _jsx(Text, { color: levelColors[levelFilter], children: levelFilter })] })), _jsx(Box, { flexDirection: "column", borderStyle: "single", paddingX: 1, children: displayLogs.length === 0 ? (_jsx(Text, { color: "gray", children: "No matching logs" })) : (displayLogs.map((log, i) => _jsx(LogLine, { entry: log }, i))) }), isActive && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[a] All  [1-9] Service  [e/w/i/d] Level  [s] Scroll" }) }))] }));
+}
+export default LogsPane;

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

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

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

@@ -0,0 +1,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { LogsPane, formatTimestamp, filterLogsByService, filterLogsByLevel, } from './LogsPane.js';
+describe('LogsPane', () => {
+    describe('formatTimestamp', () => {
+        it('formats ISO timestamp to HH:MM:SS', () => {
+            expect(formatTimestamp('2024-01-15T10:30:45.000Z')).toBe('10:30:45');
+        });
+        it('returns empty string for undefined', () => {
+            expect(formatTimestamp(undefined)).toBe('');
+        });
+        it('handles invalid timestamp', () => {
+            expect(formatTimestamp('not-a-date')).toBe('');
+        });
+    });
+    describe('filterLogsByService', () => {
+        const logs = [
+            { service: 'api', message: 'API log 1' },
+            { service: 'web', message: 'Web log 1' },
+            { service: 'api', message: 'API log 2' },
+        ];
+        it('returns all logs when no service filter', () => {
+            expect(filterLogsByService(logs, undefined)).toHaveLength(3);
+        });
+        it('filters by service name', () => {
+            const filtered = filterLogsByService(logs, 'api');
+            expect(filtered).toHaveLength(2);
+            expect(filtered.every((l) => l.service === 'api')).toBe(true);
+        });
+    });
+    describe('filterLogsByLevel', () => {
+        const logs = [
+            { level: 'error', message: 'Error' },
+            { level: 'warn', message: 'Warning' },
+            { level: 'info', message: 'Info' },
+            { level: 'debug', message: 'Debug' },
+        ];
+        it('returns all logs when no level filter', () => {
+            expect(filterLogsByLevel(logs, undefined)).toHaveLength(4);
+        });
+        it('filters to error only', () => {
+            const filtered = filterLogsByLevel(logs, 'error');
+            expect(filtered).toHaveLength(1);
+            expect(filtered[0].message).toBe('Error');
+        });
+        it('filters to warn and above', () => {
+            const filtered = filterLogsByLevel(logs, 'warn');
+            expect(filtered).toHaveLength(2);
+        });
+        it('filters to info and above', () => {
+            const filtered = filterLogsByLevel(logs, 'info');
+            expect(filtered).toHaveLength(3);
+        });
+    });
+    describe('component rendering', () => {
+        it('renders empty state when no logs', () => {
+            const { lastFrame } = render(_jsx(LogsPane, { logs: [], isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('No logs yet');
+        });
+        it('renders log entries', () => {
+            const logs = [
+                { message: 'Server started', level: 'info' },
+                { message: 'Request received', level: 'debug' },
+            ];
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Server started');
+            expect(output).toContain('Request received');
+        });
+        it('shows entry count', () => {
+            const logs = [
+                { message: 'Log 1' },
+                { message: 'Log 2' },
+                { message: 'Log 3' },
+            ];
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('3 entries');
+        });
+        it('shows service name in log line', () => {
+            const logs = [{ service: 'api', message: 'Hello' }];
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('[api]');
+        });
+        it('shows timestamp in log line', () => {
+            const logs = [
+                { timestamp: '2024-01-15T10:30:00.000Z', message: 'Hello' },
+            ];
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('10:30:00');
+        });
+        it('shows service filter when services provided', () => {
+            const logs = [{ message: 'Hello' }];
+            const services = ['api', 'web'];
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, services: services, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('[api]');
+            expect(output).toContain('[web]');
+        });
+        it('shows controls when active', () => {
+            const logs = [{ message: 'Hello' }];
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, isActive: true }));
+            const output = lastFrame();
+            expect(output).toContain('[a] All');
+            expect(output).toContain('Level');
+        });
+        it('hides controls when inactive', () => {
+            const logs = [{ message: 'Hello' }];
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, isActive: false }));
+            const output = lastFrame();
+            expect(output).not.toContain('[a] All');
+        });
+        it('limits displayed lines to maxLines', () => {
+            const logs = Array.from({ length: 50 }, (_, i) => ({
+                message: `Log ${i + 1}`,
+            }));
+            const { lastFrame } = render(_jsx(LogsPane, { logs: logs, isActive: false, maxLines: 5 }));
+            const output = lastFrame();
+            expect(output).toContain('Log 50');
+            expect(output).toContain('Log 46');
+            expect(output).not.toContain('Log 1');
+        });
+    });
+});

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

@@ -0,0 +1,18 @@
+interface QualityData {
+    score: number;
+    coverage: {
+        lines: number;
+        branches: number;
+        functions: number;
+        statements: number;
+    };
+    edgeCases: {
+        covered: number;
+        total: number;
+    };
+}
+interface QualityPaneProps {
+    data?: QualityData;
+}
+export declare function QualityPane({ data }: QualityPaneProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dashboard/dist/components/QualityPane.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function QualityPane({ data }) {
+    if (!data) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Quality Score" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "No quality data available." }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Run /tlc:quality to analyze." }) })] }));
+    }
+    const { score, coverage, edgeCases } = data;
+    // Determine color based on score
+    const getScoreColor = (s) => {
+        if (s >= 80)
+            return 'green';
+        if (s >= 60)
+            return 'yellow';
+        return 'red';
+    };
+    // Create visual progress bar
+    const barLength = 20;
+    const filledLength = Math.round((score / 100) * barLength);
+    const bar = '█'.repeat(filledLength) + '░'.repeat(barLength - filledLength);
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Quality Score" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: getScoreColor(score), children: [score, "/100"] }) }), _jsx(Box, { children: _jsxs(Text, { color: getScoreColor(score), children: ["[", bar, "]"] }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Coverage:" }), _jsxs(Box, { children: [_jsx(Text, { children: "  Lines: " }), _jsxs(Text, { color: coverage.lines >= 80 ? 'green' : coverage.lines >= 60 ? 'yellow' : 'red', children: [coverage.lines, "%"] })] }), _jsxs(Box, { children: [_jsx(Text, { children: "  Branches: " }), _jsxs(Text, { color: coverage.branches >= 80 ? 'green' : coverage.branches >= 60 ? 'yellow' : 'red', children: [coverage.branches, "%"] })] }), _jsxs(Box, { children: [_jsx(Text, { children: "  Functions: " }), _jsxs(Text, { color: coverage.functions >= 80 ? 'green' : coverage.functions >= 60 ? 'yellow' : 'red', children: [coverage.functions, "%"] })] }), _jsxs(Box, { children: [_jsx(Text, { children: "  Statements: " }), _jsxs(Text, { color: coverage.statements >= 80 ? 'green' : coverage.statements >= 60 ? 'yellow' : 'red', children: [coverage.statements, "%"] })] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Edge Cases:" }), _jsxs(Box, { children: [_jsx(Text, { children: "  Covered: " }), _jsxs(Text, { color: edgeCases.covered === edgeCases.total ? 'green' : 'yellow', children: [edgeCases.covered, "/", edgeCases.total] })] })] })] }));
+}

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

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

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { QualityPane } from './QualityPane.js';
+describe('QualityPane', () => {
+    it('renders without error', () => {
+        const { lastFrame } = render(_jsx(QualityPane, {}));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('shows placeholder when no quality data', () => {
+        const { lastFrame } = render(_jsx(QualityPane, {}));
+        const output = lastFrame();
+        expect(output).toContain('Quality');
+    });
+    it('shows score when data provided', () => {
+        const qualityData = {
+            score: 72,
+            coverage: { lines: 80, branches: 70, functions: 85, statements: 78 },
+            edgeCases: { covered: 3, total: 5 },
+        };
+        const { lastFrame } = render(_jsx(QualityPane, { data: qualityData }));
+        const output = lastFrame();
+        expect(output).toContain('72');
+    });
+    it('shows coverage breakdown', () => {
+        const qualityData = {
+            score: 80,
+            coverage: { lines: 80, branches: 70, functions: 85, statements: 78 },
+            edgeCases: { covered: 4, total: 5 },
+        };
+        const { lastFrame } = render(_jsx(QualityPane, { data: qualityData }));
+        const output = lastFrame();
+        expect(output).toContain('80'); // lines coverage
+    });
+    it('shows visual progress bar', () => {
+        const qualityData = {
+            score: 50,
+            coverage: { lines: 50, branches: 50, functions: 50, statements: 50 },
+            edgeCases: { covered: 2, total: 5 },
+        };
+        const { lastFrame } = render(_jsx(QualityPane, { data: qualityData }));
+        const output = lastFrame();
+        // Should contain some visual representation (bar or percentage)
+        expect(output).toBeTruthy();
+    });
+    it('shows edge case status', () => {
+        const qualityData = {
+            score: 60,
+            coverage: { lines: 60, branches: 60, functions: 60, statements: 60 },
+            edgeCases: { covered: 3, total: 5 },
+        };
+        const { lastFrame } = render(_jsx(QualityPane, { data: qualityData }));
+        const output = lastFrame();
+        expect(output).toContain('3'); // covered
+        expect(output).toContain('5'); // total
+    });
+    it('uses green color for high score', () => {
+        const qualityData = {
+            score: 90,
+            coverage: { lines: 90, branches: 90, functions: 90, statements: 90 },
+            edgeCases: { covered: 5, total: 5 },
+        };
+        const { lastFrame } = render(_jsx(QualityPane, { data: qualityData }));
+        const output = lastFrame();
+        // Just verify it renders with the score
+        expect(output).toContain('90');
+    });
+    it('uses yellow color for medium score', () => {
+        const qualityData = {
+            score: 65,
+            coverage: { lines: 65, branches: 65, functions: 65, statements: 65 },
+            edgeCases: { covered: 3, total: 5 },
+        };
+        const { lastFrame } = render(_jsx(QualityPane, { data: qualityData }));
+        const output = lastFrame();
+        expect(output).toContain('65');
+    });
+    it('uses red color for low score', () => {
+        const qualityData = {
+            score: 30,
+            coverage: { lines: 30, branches: 30, functions: 30, statements: 30 },
+            edgeCases: { covered: 1, total: 5 },
+        };
+        const { lastFrame } = render(_jsx(QualityPane, { data: qualityData }));
+        const output = lastFrame();
+        expect(output).toContain('30');
+    });
+});

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

@@ -0,0 +1,26 @@
+interface Service {
+    name: string;
+    type: string;
+    port: number;
+    state: 'running' | 'stopped' | 'starting' | 'error';
+    health?: 'healthy' | 'unhealthy' | 'starting';
+    uptime?: number;
+}
+interface ServicesPaneProps {
+    services: Service[];
+    selectedService?: string;
+    isActive: boolean;
+}
+export declare function formatUptime(ms: number | undefined): string;
+interface StatusInfo {
+    text: string;
+    color: string;
+    running: number;
+    total: number;
+}
+export declare function getStatusInfo(services: Array<{
+    state: string;
+    health?: string;
+}>): StatusInfo;
+export declare function ServicesPane({ services, selectedService, isActive }: ServicesPaneProps): import("react/jsx-runtime").JSX.Element;
+export default ServicesPane;

package/dashboard/dist/components/ServicesPane.js

@@ -0,0 +1,61 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const stateIcons = {
+    running: '🟢',
+    stopped: '⚪',
+    starting: '🟡',
+    error: '🔴',
+};
+const healthIcons = {
+    healthy: '✓',
+    unhealthy: '✗',
+    starting: '...',
+};
+export function formatUptime(ms) {
+    if (!ms)
+        return '-';
+    const seconds = Math.floor(ms / 1000);
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ${seconds % 60}s`;
+    const hours = Math.floor(minutes / 60);
+    return `${hours}h ${minutes % 60}m`;
+}
+export function getStatusInfo(services) {
+    const total = services.length;
+    const running = services.filter((s) => s.state === 'running').length;
+    const allHealthy = services.every((s) => s.state === 'running' && s.health !== 'unhealthy');
+    let text = 'Stopped';
+    let color = 'gray';
+    if (running === total && allHealthy && total > 0) {
+        text = 'All healthy';
+        color = 'green';
+    }
+    else if (running > 0 && running < total) {
+        text = `${running}/${total} running`;
+        color = 'yellow';
+    }
+    else if (running === total && total > 0) {
+        text = 'Some unhealthy';
+        color = 'yellow';
+    }
+    return { text, color, running, total };
+}
+function ServiceCard({ service, isSelected }) {
+    const stateIcon = stateIcons[service.state] || '❓';
+    const healthIcon = service.health ? healthIcons[service.health] : '-';
+    return (_jsxs(Box, { borderStyle: isSelected ? 'double' : 'single', borderColor: isSelected ? 'blue' : undefined, paddingX: 1, flexDirection: "column", width: 24, children: [_jsxs(Box, { children: [_jsxs(Text, { children: [stateIcon, " "] }), _jsx(Text, { bold: true, children: service.name })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Type: " }), _jsx(Text, { children: service.type })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Port: " }), _jsx(Text, { children: service.port })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Health: " }), _jsx(Text, { color: service.health === 'healthy' ? 'green' : service.health === 'unhealthy' ? 'red' : undefined, children: healthIcon })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Uptime: " }), _jsx(Text, { children: formatUptime(service.uptime) })] })] }));
+}
+function StackSummary({ services }) {
+    const { text, color, running, total } = getStatusInfo(services);
+    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Services " }), _jsxs(Text, { color: color, children: ["(", text, ")"] })] }), _jsxs(Box, { children: [_jsxs(Text, { bold: true, children: [running, "/", total] }), _jsx(Text, { dimColor: true, children: " running" })] })] }));
+}
+export function ServicesPane({ services, selectedService, isActive }) {
+    if (services.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Services" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "\uD83D\uDCE6 No services detected" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Add docker-compose.yml or package.json" }) })] }));
+    }
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(StackSummary, { services: services }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", gap: 1, children: services.map((service) => (_jsx(ServiceCard, { service: service, isSelected: selectedService === service.name }, service.name))) }), isActive && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[r] Restart  [l] Logs  [p] Preview  [\u2191\u2193] Select" }) }))] }));
+}
+export default ServicesPane;

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

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