tlc-claude-code 1.4.4 → 1.4.5

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

@@ -0,0 +1,256 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink-testing-library';
+import { BugsPane } from './BugsPane.js';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+// Mock fetch for API calls
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+// Sample bug data
+const sampleBugs = [
+    {
+        id: 'BUG-001',
+        title: 'Login button not working',
+        description: 'Click does nothing',
+        status: 'open',
+        priority: 'high',
+        createdAt: '2024-01-15',
+    },
+    {
+        id: 'BUG-002',
+        title: 'Dashboard loads slowly',
+        description: 'Takes 5+ seconds',
+        status: 'in_progress',
+        priority: 'medium',
+        assignee: 'alice',
+    },
+    {
+        id: 'BUG-003',
+        title: 'Minor typo in footer',
+        description: 'Copyrght misspelled',
+        status: 'fixed',
+        priority: 'low',
+    },
+];
+describe('BugsPane', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        // Default successful response
+        mockFetch.mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve(sampleBugs),
+        });
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    describe('rendering', () => {
+        it('renders the bugs pane with form and list sections', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            // Wait for fetch to complete
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalled();
+            });
+            const frame = lastFrame();
+            expect(frame).toContain('Submit New Bug');
+            expect(frame).toContain('Bug List');
+            expect(frame).toContain('Filters');
+        });
+        it('shows loading state initially', () => {
+            // Don't resolve fetch immediately
+            mockFetch.mockImplementation(() => new Promise(() => { }));
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            const frame = lastFrame();
+            expect(frame).toContain('Loading');
+        });
+        it('displays bugs after loading', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('BUG-001');
+            });
+            const frame = lastFrame();
+            expect(frame).toContain('BUG-002');
+            expect(frame).toContain('BUG-003');
+        });
+        it('shows empty state when no bugs exist', async () => {
+            mockFetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve([]),
+            });
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('No bugs found');
+            });
+        });
+        it('shows error state on fetch failure', async () => {
+            mockFetch.mockResolvedValue({
+                ok: false,
+                status: 500,
+                statusText: 'Internal Server Error',
+            });
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('Error');
+            });
+        });
+    });
+    describe('form', () => {
+        it('renders form fields', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalled();
+            });
+            const frame = lastFrame();
+            expect(frame).toContain('Title');
+            expect(frame).toContain('Description');
+            expect(frame).toContain('Severity');
+        });
+        it('renders severity options', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalled();
+            });
+            const frame = lastFrame();
+            // Severity options are shown (selected one in uppercase brackets)
+            expect(frame).toContain('low');
+            expect(frame).toContain('MEDIUM'); // Selected by default, shown in uppercase
+            expect(frame).toContain('high');
+            expect(frame).toContain('critical');
+        });
+        it('defaults to medium severity', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalled();
+            });
+            const frame = lastFrame();
+            // Medium should be highlighted/selected (in uppercase)
+            expect(frame).toContain('MEDIUM');
+        });
+    });
+    describe('filters', () => {
+        it('renders filter buttons', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalled();
+            });
+            const frame = lastFrame();
+            expect(frame).toContain('All');
+            expect(frame).toContain('Open');
+            expect(frame).toContain('Closed');
+        });
+        it('shows bug count in filters', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('3 bugs');
+            });
+        });
+    });
+    describe('bug display', () => {
+        it('shows bug severity badges', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('HIGH');
+            });
+            const frame = lastFrame();
+            expect(frame).toContain('MEDIUM');
+            expect(frame).toContain('LOW');
+        });
+        it('shows bug status', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('[open]');
+            });
+            const frame = lastFrame();
+            // Status may wrap across lines in narrow terminals, check for key parts
+            expect(frame).toContain('in_progress');
+            expect(frame).toContain('[fixed]');
+        });
+        it('shows bug creation date when available', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('2024-01-15');
+            });
+        });
+    });
+    describe('API integration', () => {
+        it('fetches bugs on mount', async () => {
+            render(_jsx(BugsPane, { isActive: false, isTTY: false, apiBaseUrl: "http://test:5000" }));
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalledWith('http://test:5000/api/bugs');
+            });
+        });
+        it('uses default API URL', async () => {
+            render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalledWith('http://localhost:5001/api/bugs');
+            });
+        });
+    });
+    describe('navigation hints', () => {
+        it('shows keyboard navigation hints', async () => {
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                expect(mockFetch).toHaveBeenCalled();
+            });
+            const frame = lastFrame();
+            expect(frame).toContain('Tab');
+            expect(frame).toContain('refresh');
+        });
+    });
+    describe('severity colors', () => {
+        it('applies correct colors to severity badges', async () => {
+            // Just verify the component renders without errors with different severities
+            const bugsWithSeverities = [
+                { id: 'BUG-001', title: 'Critical bug', description: '', status: 'open', priority: 'critical' },
+                { id: 'BUG-002', title: 'High bug', description: '', status: 'open', priority: 'high' },
+                { id: 'BUG-003', title: 'Medium bug', description: '', status: 'open', priority: 'medium' },
+                { id: 'BUG-004', title: 'Low bug', description: '', status: 'open', priority: 'low' },
+            ];
+            mockFetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve(bugsWithSeverities),
+            });
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('CRITICAL');
+                expect(frame).toContain('HIGH');
+                expect(frame).toContain('MEDIUM');
+                expect(frame).toContain('LOW');
+            });
+        });
+    });
+    describe('status colors', () => {
+        it('shows all status types correctly', async () => {
+            const bugsWithStatuses = [
+                { id: 'BUG-001', title: 'Open', description: '', status: 'open', priority: 'medium' },
+                { id: 'BUG-002', title: 'In Progress', description: '', status: 'in_progress', priority: 'medium' },
+                { id: 'BUG-003', title: 'Fixed', description: '', status: 'fixed', priority: 'medium' },
+                { id: 'BUG-004', title: 'Verified', description: '', status: 'verified', priority: 'medium' },
+                { id: 'BUG-005', title: 'Closed', description: '', status: 'closed', priority: 'medium' },
+                { id: 'BUG-006', title: 'Wontfix', description: '', status: 'wontfix', priority: 'medium' },
+            ];
+            mockFetch.mockResolvedValue({
+                ok: true,
+                json: () => Promise.resolve(bugsWithStatuses),
+            });
+            const { lastFrame } = render(_jsx(BugsPane, { isActive: false, isTTY: false }));
+            await vi.waitFor(() => {
+                const frame = lastFrame();
+                expect(frame).toContain('[open]');
+                // Status strings may wrap across lines in terminal output
+                expect(frame).toContain('in_progress');
+                expect(frame).toContain('[fixed]');
+                expect(frame).toContain('[verified]');
+                expect(frame).toContain('[closed]');
+                expect(frame).toContain('[wontfix]');
+            });
+        });
+    });
+});

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

@@ -1,3 +1,4 @@
+import type { DiagnosticsResult } from '../api/health-diagnostics.js';
 interface SecurityData {
     total: number;
     critical: number;
@@ -17,6 +18,7 @@ interface HealthData {
 }
 interface HealthPaneProps {
     data?: HealthData;
+    diagnostics?: DiagnosticsResult;
 }
-export declare function HealthPane({ data }: HealthPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function HealthPane({ data, diagnostics }: HealthPaneProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dashboard/dist/components/HealthPane.js

@@ -1,12 +1,46 @@
 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) {
+/**
+ * Returns the appropriate icon for a diagnostic check status
+ */
+function getStatusIcon(status) {
+    switch (status) {
+        case 'ok': return '[ok]';
+        case 'warning': return '[!]';
+        case 'error': return '[X]';
+        case 'unknown': return '[?]';
+        default: return '[?]';
+    }
+}
+/**
+ * Returns the color for a diagnostic check status
+ */
+function getStatusColor(status) {
+    switch (status) {
+        case 'ok': return 'green';
+        case 'warning': return 'yellow';
+        case 'error': return 'red';
+        case 'unknown': return 'gray';
+        default: return 'gray';
+    }
+}
+/**
+ * Renders the diagnostics section with health checks
+ */
+function DiagnosticsSection({ diagnostics }) {
+    const overallColor = diagnostics.overall === 'healthy' ? 'green' :
+        diagnostics.overall === 'degraded' ? 'yellow' : 'red';
+    return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "System Diagnostics:" }), _jsx(Box, { children: _jsxs(Text, { color: overallColor, children: ["  Status: ", diagnostics.overall] }) }), diagnostics.checks.map((check, index) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { color: getStatusColor(check.status), children: ['  ', getStatusIcon(check.status), " ", check.name, ": ", check.message] }) }), check.fix && (_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["      Fix: ", check.fix] }) }))] }, index)))] }));
+}
+export function HealthPane({ data, diagnostics }) {
+    if (!data && !diagnostics) {
         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 (!data)
+            return 'gray';
+        const { security } = data;
         if (security.critical > 0)
             return 'red';
         if (security.high > 0)
@@ -19,6 +53,9 @@ export function HealthPane({ data }) {
     };
     // Determine outdated status color
     const getOutdatedColor = () => {
+        if (!data)
+            return 'gray';
+        const { outdated } = data;
         if (outdated.major && outdated.major > 0)
             return 'yellow';
         if (outdated.total > 10)
@@ -27,7 +64,8 @@ export function HealthPane({ data }) {
             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!' }) })] }));
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Project Health" }), diagnostics && _jsx(DiagnosticsSection, { diagnostics: diagnostics }), data && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Security:" }), data.security.total === 0 ? (_jsx(Box, { children: _jsx(Text, { color: "green", children: "  [ok] No vulnerabilities" }) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsxs(Text, { color: getSecurityColor(), children: [data.security.total, " vulnerabilities"] }) }), data.security.critical > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["    [!!] Critical: ", data.security.critical] }) })), data.security.high > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["    [!] High: ", data.security.high] }) })), data.security.moderate > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "yellow", children: ["    [~] Moderate: ", data.security.moderate] }) })), data.security.low > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["    [-] Low: ", data.security.low] }) }))] }))] })), data && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Dependencies:" }), data.outdated.total === 0 ? (_jsx(Box, { children: _jsx(Text, { color: "green", children: "  [ok] All up to date" }) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsxs(Text, { color: getOutdatedColor(), children: [data.outdated.total, " outdated"] }) }), data.outdated.major !== undefined && data.outdated.major > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "yellow", children: ["    [!] Major: ", data.outdated.major] }) })), data.outdated.minor !== undefined && data.outdated.minor > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["    [~] Minor: ", data.outdated.minor] }) })), data.outdated.patch !== undefined && data.outdated.patch > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["    [-] Patch: ", data.outdated.patch] }) }))] }))] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: data && data.security.total > 0 ? '/tlc:security to fix' :
+                        data && data.outdated.total > 0 ? '/tlc:outdated to update' :
+                            diagnostics && diagnostics.overall !== 'healthy' ? 'Fix issues above' :
+                                'Healthy!' }) })] }));
 }

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

@@ -27,14 +27,14 @@ describe('HealthPane', () => {
         const output = lastFrame();
         expect(output).toContain('3'); // vulnerability count
     });
-    it('shows green checkmark when no vulnerabilities', () => {
+    it('shows ok indicator 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('✓');
+        expect(output).toContain('[ok]');
     });
     it('shows warning for critical vulnerabilities', () => {
         const healthData = {
@@ -64,4 +64,107 @@ describe('HealthPane', () => {
         // Just verify it renders
         expect(output).toContain('5');
     });
+    describe('diagnostics', () => {
+        it('shows diagnostics section when provided', () => {
+            const diagnostics = {
+                overall: 'healthy',
+                checks: [
+                    { name: 'TLC Configuration', status: 'ok', message: 'Config found', fix: null },
+                    { name: 'Required Files', status: 'ok', message: 'All present', fix: null },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('System Diagnostics');
+            expect(output).toContain('healthy');
+        });
+        it('shows check names and statuses', () => {
+            const diagnostics = {
+                overall: 'healthy',
+                checks: [
+                    { name: 'TLC Configuration', status: 'ok', message: 'Config found', fix: null },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('TLC Configuration');
+            expect(output).toContain('[ok]');
+            expect(output).toContain('Config found');
+        });
+        it('shows fix suggestions for warnings', () => {
+            const diagnostics = {
+                overall: 'degraded',
+                checks: [
+                    { name: 'TLC Configuration', status: 'warning', message: 'No .tlc.json found', fix: 'Run: tlc init' },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('[!]');
+            expect(output).toContain('No .tlc.json found');
+            expect(output).toContain('Run: tlc init');
+        });
+        it('shows degraded status with warning color', () => {
+            const diagnostics = {
+                overall: 'degraded',
+                checks: [
+                    { name: 'Test Check', status: 'warning', message: 'Issue found', fix: 'Fix it' },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('degraded');
+        });
+        it('shows unhealthy status with error color', () => {
+            const diagnostics = {
+                overall: 'unhealthy',
+                checks: [
+                    { name: 'Critical Check', status: 'error', message: 'Critical error', fix: 'Fix now' },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('unhealthy');
+            expect(output).toContain('[X]');
+        });
+        it('shows unknown status with question mark', () => {
+            const diagnostics = {
+                overall: 'degraded',
+                checks: [
+                    { name: 'Unknown Check', status: 'unknown', message: 'Cannot determine', fix: null },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('[?]');
+        });
+        it('renders with both data and diagnostics', () => {
+            const healthData = {
+                security: { total: 0, critical: 0, high: 0, moderate: 0, low: 0 },
+                outdated: { total: 0 },
+            };
+            const diagnostics = {
+                overall: 'healthy',
+                checks: [
+                    { name: 'TLC Configuration', status: 'ok', message: 'Config found', fix: null },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { data: healthData, diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('System Diagnostics');
+            expect(output).toContain('Security');
+            expect(output).toContain('Dependencies');
+        });
+        it('shows fix issues hint when diagnostics not healthy', () => {
+            const diagnostics = {
+                overall: 'degraded',
+                checks: [
+                    { name: 'TLC Configuration', status: 'warning', message: 'No .tlc.json found', fix: 'Run: tlc init' },
+                ],
+            };
+            const { lastFrame } = render(_jsx(HealthPane, { diagnostics: diagnostics }));
+            const output = lastFrame();
+            expect(output).toContain('Fix issues above');
+        });
+    });
 });

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

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

package/dashboard/dist/components/RouterPane.js

@@ -1,65 +1,68 @@
-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 { useState, useEffect, useCallback } from 'react';
 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);
+import Spinner from 'ink-spinner';
+import { safeFetch } from '../api/safeFetch.js';
+import { ErrorState } from './ui/ErrorState.js';
+import { EmptyState } from './ui/EmptyState.js';
+import { Skeleton } from './ui/Skeleton.js';
+export function RouterPane({ apiBaseUrl = 'http://localhost:5001', refreshInterval = 30000, }) {
+    const [data, setData] = useState(null);
     const [error, setError] = useState(null);
+    const [loadingState, setLoadingState] = useState('loading');
+    const fetchRouterData = useCallback(async () => {
+        const result = await safeFetch(`${apiBaseUrl}/api/router`);
+        if (result.error) {
+            setError(result.error);
+            setLoadingState('error');
+            return;
+        }
+        if (!result.data || Object.keys(result.data.providers || {}).length === 0) {
+            setData(result.data);
+            setLoadingState('empty');
+            return;
+        }
+        setData(result.data);
+        setError(null);
+        setLoadingState('success');
+    }, [apiBaseUrl]);
     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..." }) })] }));
+        fetchRouterData();
+        const interval = setInterval(fetchRouterData, refreshInterval);
+        return () => clearInterval(interval);
+    }, [fetchRouterData, refreshInterval]);
+    // Loading state with skeleton
+    if (loadingState === 'loading') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Model Router" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading..." })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Skeleton.Text, { lines: 3, width: 30 }) })] }));
     }
-    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] }) })] }));
+    // Error state
+    if (loadingState === 'error' && error) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Model Router" }), _jsx(Box, { marginTop: 1, children: _jsx(ErrorState, { error: error, onRetry: fetchRouterData }) })] }));
     }
-    if (!status) {
-        return null;
+    // Empty state
+    if (loadingState === 'empty' || !data) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Model Router" }), _jsx(Box, { marginTop: 1, children: _jsx(EmptyState, { type: "router" }) })] }));
     }
-    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" })] }));
+    // Calculate total estimated cost
+    let totalCost = 0;
+    if (data.costEstimate) {
+        for (const cap of Object.values(data.costEstimate)) {
+            totalCost += cap.devserver || 0;
+        }
     }
-    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));
-            })] }));
+    const costStr = totalCost > 0 ? `$${totalCost.toFixed(2)}` : '$0.00';
+    // Build routing display from capabilities
+    const routingEntries = [];
+    if (data.capabilities) {
+        for (const [capability, info] of Object.entries(data.capabilities)) {
+            const providers = info.providers.map((name) => {
+                const providerInfo = data.providers[name];
+                const location = providerInfo?.type === 'cli' && providerInfo?.detected ? 'local' : 'devserver';
+                return { name, location };
+            });
+            routingEntries.push({ capability, providers });
+        }
+    }
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Model Router" }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Local CLIs" }), Object.entries(data.providers).map(([name, info]) => (_jsxs(Box, { children: [_jsxs(Text, { color: info.detected ? 'green' : 'gray', children: [info.detected ? '\u2713' : '\u25CB', " ", name] }), info.version && _jsxs(Text, { dimColor: true, children: [" v", info.version] }), _jsxs(Text, { dimColor: true, children: [" - ", info.detected ? 'available' : 'not found'] })] }, name))), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Devserver" }), _jsx(Text, { color: data.devserver.connected ? 'green' : 'red', children: data.devserver.connected ? '\u25CF Connected' : '\u25CF Disconnected' }), routingEntries.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Routing" }), routingEntries.map(({ capability, providers }) => (_jsxs(Box, { children: [_jsxs(Text, { children: [capability, ": "] }), providers.map((p, i) => (_jsxs(Text, { color: p.location === 'local' ? 'cyan' : 'yellow', children: [i > 0 ? ' \u2192 ' : '', p.name, " (", p.location, ")"] }, p.name)))] }, capability)))] })), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Estimated Cost" }), _jsxs(Text, { color: "yellow", children: [costStr, "/day"] })] }));
 }
+export default RouterPane;