tlc-claude-code 1.4.4 → 1.4.5

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

@@ -2,175 +2,229 @@ 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.stubGlobal('fetch', vi.fn());
         vi.useFakeTimers();
-        vi.clearAllMocks();
     });
     afterEach(() => {
         vi.useRealTimers();
+        vi.unstubAllGlobals();
     });
+    const mockFetchSuccess = (data) => {
+        vi.mocked(fetch).mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve(data),
+        });
+    };
+    const waitForFetch = async () => {
+        // Flush all pending promises and timers
+        await vi.advanceTimersByTimeAsync(0);
+        await Promise.resolve();
+        await vi.advanceTimersByTimeAsync(0);
+    };
     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 },
-                }),
+            mockFetchSuccess({
+                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();
+            await waitForFetch();
             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 },
-                }),
+            mockFetchSuccess({
+                providers: {
+                    claude: { detected: true, type: 'cli', version: 'v4.0.0' },
+                },
+                devserver: { configured: false },
             });
             const { lastFrame } = render(_jsx(RouterPane, {}));
-            await vi.runAllTimersAsync();
+            await waitForFetch();
             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' },
-                }),
+            mockFetchSuccess({
+                providers: {
+                    claude: { detected: true, type: 'cli' },
+                },
+                devserver: { configured: true, connected: true, url: 'https://dev.example.com' },
             });
             const { lastFrame } = render(_jsx(RouterPane, {}));
-            await vi.runAllTimersAsync();
+            await waitForFetch();
             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 },
-                }),
+            mockFetchSuccess({
+                providers: {
+                    claude: { detected: true, type: 'cli' },
+                },
+                devserver: { configured: true, connected: false },
             });
             const { lastFrame } = render(_jsx(RouterPane, {}));
-            await vi.runAllTimersAsync();
+            await waitForFetch();
             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'] },
-                    },
-                }),
+            mockFetchSuccess({
+                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();
+            await waitForFetch();
             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 },
-                }),
+            mockFetchSuccess({
+                providers: {
+                    claude: { detected: true, type: 'cli' },
+                    deepseek: { detected: false, type: 'api' },
+                },
+                devserver: { configured: true },
+                capabilities: {
+                    review: { providers: ['claude', 'deepseek'] },
+                },
             });
             const { lastFrame } = render(_jsx(RouterPane, {}));
-            await vi.runAllTimersAsync();
+            await waitForFetch();
             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 },
-                    },
-                }),
+            mockFetchSuccess({
+                providers: {
+                    deepseek: { detected: true, type: 'api' },
+                },
+                devserver: { configured: true },
+                costEstimate: {
+                    review: { local: 0, devserver: 1.5 },
+                },
             });
             const { lastFrame } = render(_jsx(RouterPane, {}));
-            await vi.runAllTimersAsync();
+            await waitForFetch();
             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 },
-                }),
+            mockFetchSuccess({
+                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();
+            await waitForFetch();
             const output = lastFrame();
-            // Health indicators should be present (● or similar)
             expect(output).toBeDefined();
+            expect(output).toContain('claude');
         });
-        it('shows configure hint', async () => {
-            global.fetch.mockResolvedValue({
-                ok: true,
-                json: () => Promise.resolve({
-                    providers: {},
-                    devserver: { configured: false },
-                }),
+        it('shows Model Router title', async () => {
+            mockFetchSuccess({
+                providers: {
+                    claude: { detected: true, type: 'cli' },
+                },
+                devserver: { configured: false },
             });
             const { lastFrame } = render(_jsx(RouterPane, {}));
-            await vi.runAllTimersAsync();
+            await waitForFetch();
             const output = lastFrame();
-            expect(output).toContain('Router');
+            expect(output).toContain('Model Router');
         });
     });
     describe('loading state', () => {
         it('handles loading state', () => {
-            global.fetch.mockImplementation(() => new Promise(() => { }) // Never resolves
-            );
+            // Mock that never resolves
+            vi.mocked(fetch).mockImplementation(() => new Promise(() => { }));
             const { lastFrame } = render(_jsx(RouterPane, {}));
             const output = lastFrame();
             expect(output).toContain('Loading');
         });
+        it('shows skeleton while loading', () => {
+            vi.mocked(fetch).mockImplementation(() => new Promise(() => { }));
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            const output = lastFrame() || '';
+            // Skeleton uses these characters
+            expect(output).toMatch(/[░▒]/);
+        });
     });
     describe('error state', () => {
         it('handles error state', async () => {
-            global.fetch.mockRejectedValue(new Error('Network error'));
+            vi.mocked(fetch).mockRejectedValue(new TypeError('Failed to fetch'));
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await waitForFetch();
+            const output = lastFrame();
+            expect(output).toContain('Connection Lost');
+        });
+        it('shows retry option on error', async () => {
+            vi.mocked(fetch).mockRejectedValue(new Error('Network error'));
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await waitForFetch();
+            const output = lastFrame();
+            expect(output).toContain('Retry');
+        });
+        it('handles HTTP 500 error', async () => {
+            vi.mocked(fetch).mockResolvedValue({
+                ok: false,
+                status: 500,
+                statusText: 'Internal Server Error',
+            });
+            const { lastFrame } = render(_jsx(RouterPane, {}));
+            await waitForFetch();
+            const output = lastFrame();
+            expect(output).toContain('Server Error');
+        });
+    });
+    describe('empty state', () => {
+        it('shows empty state when no providers', async () => {
+            mockFetchSuccess({
+                providers: {},
+                devserver: { configured: false },
+            });
             const { lastFrame } = render(_jsx(RouterPane, {}));
-            await vi.runAllTimersAsync();
+            await waitForFetch();
             const output = lastFrame();
-            expect(output).toContain('Error');
+            expect(output).toContain('No router configured');
+        });
+    });
+    describe('refresh behavior', () => {
+        it('fetches data on mount', async () => {
+            mockFetchSuccess({ providers: {}, devserver: {} });
+            render(_jsx(RouterPane, {}));
+            await waitForFetch();
+            expect(fetch).toHaveBeenCalledTimes(1);
+        });
+        it('refreshes data periodically', async () => {
+            mockFetchSuccess({
+                providers: { claude: { detected: true, type: 'cli' } },
+                devserver: {},
+            });
+            render(_jsx(RouterPane, { refreshInterval: 5000 }));
+            await waitForFetch();
+            // Initial fetch
+            expect(fetch).toHaveBeenCalledTimes(1);
+            // Advance time past refresh interval
+            await vi.advanceTimersByTimeAsync(5000);
+            expect(fetch).toHaveBeenCalledTimes(2);
+            // Another refresh
+            await vi.advanceTimersByTimeAsync(5000);
+            expect(fetch).toHaveBeenCalledTimes(3);
         });
     });
 });

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

@@ -0,0 +1,26 @@
+export interface UpdateBannerProps {
+    /** Current installed version */
+    current: string;
+    /** Latest available version */
+    latest: string;
+    /** Whether an update is available */
+    updateAvailable: boolean;
+    /** Changelog items for the new version */
+    changelog?: string[];
+    /** Whether the banner can be dismissed */
+    dismissable?: boolean;
+    /** Callback when banner is dismissed */
+    onDismiss?: () => void;
+    /** Show compact single-line version */
+    compact?: boolean;
+    /** Whether this component is active for keyboard input */
+    isActive?: boolean;
+}
+/**
+ * UpdateBanner - Shows when a new TLC version is available
+ *
+ * Displays the latest version number and optional changelog.
+ * Can be dismissed by pressing 'x'.
+ */
+export declare function UpdateBanner({ current, latest, updateAvailable, changelog, dismissable, onDismiss, compact, isActive, }: UpdateBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export default UpdateBanner;

package/dashboard/dist/components/UpdateBanner.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+/**
+ * UpdateBanner - Shows when a new TLC version is available
+ *
+ * Displays the latest version number and optional changelog.
+ * Can be dismissed by pressing 'x'.
+ */
+export function UpdateBanner({ current, latest, updateAvailable, changelog = [], dismissable = true, onDismiss, compact = false, isActive = true, }) {
+    // Handle keyboard input
+    useInput((input) => {
+        if (!isActive || !dismissable)
+            return;
+        // Dismiss on 'x' key
+        if (input === 'x' && onDismiss) {
+            onDismiss();
+        }
+    }, { isActive: isActive && dismissable });
+    // Don't render if no update available
+    if (!updateAvailable) {
+        return null;
+    }
+    // Compact mode - single line
+    if (compact) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: "NEW" }), _jsxs(Text, { color: "green", children: [" v", latest, " available"] }), dismissable && (_jsx(Text, { dimColor: true, children: " (x dismiss)" }))] }));
+    }
+    // Full mode with changelog
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "green", paddingX: 1, paddingY: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: "Update Available" }), _jsxs(Text, { color: "white", children: [" v", latest] }), _jsxs(Text, { dimColor: true, children: [" (current: v", current, ")"] }), dismissable && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: "x dismiss" }) }))] }), changelog.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "What's new:" }), changelog.map((item, index) => (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "  - " }), _jsx(Text, { children: item })] }, index)))] })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Run " }), _jsx(Text, { color: "cyan", children: "npm update tlc-server" }), _jsx(Text, { dimColor: true, children: " to update" })] })] }));
+}
+export default UpdateBanner;

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

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

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { UpdateBanner } from './UpdateBanner.js';
+describe('UpdateBanner', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    describe('rendering', () => {
+        it('renders when updateAvailable is true', () => {
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.4.2", latest: "1.5.0", updateAvailable: true }));
+            expect(lastFrame()).toContain('1.5.0');
+            // Component shows "Update Available" with capital A
+            expect(lastFrame()).toContain('Available');
+        });
+        it('renders nothing when updateAvailable is false', () => {
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.4.2", latest: "1.4.2", updateAvailable: false }));
+            // Should render empty or minimal content
+            expect(lastFrame()).not.toContain('available');
+        });
+        it('displays the latest version number', () => {
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true }));
+            expect(lastFrame()).toContain('v2.0.0');
+        });
+        it('shows changelog items when provided', () => {
+            const changelog = [
+                'Self-healing dashboard',
+                'Real-time WebSocket sync',
+            ];
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, changelog: changelog }));
+            expect(lastFrame()).toContain('Self-healing dashboard');
+            expect(lastFrame()).toContain('Real-time WebSocket sync');
+        });
+    });
+    describe('dismiss functionality', () => {
+        it('renders dismiss hint when dismissable', () => {
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, dismissable: true }));
+            // Should show dismiss hint (x or Esc)
+            expect(lastFrame()).toMatch(/dismiss|Esc|x/i);
+        });
+        it('provides onDismiss callback prop', () => {
+            const onDismiss = vi.fn();
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, dismissable: true, onDismiss: onDismiss }));
+            // Component should render with dismiss hint when callback provided
+            expect(lastFrame()).toContain('dismiss');
+            // onDismiss is passed and ready to be called by useInput
+            expect(typeof onDismiss).toBe('function');
+        });
+        it('does not render dismiss hint when not dismissable', () => {
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, dismissable: false }));
+            // Should not show dismiss-specific hints
+            const frame = lastFrame() || '';
+            expect(frame).not.toContain('x dismiss');
+        });
+    });
+    describe('compact mode', () => {
+        it('renders compactly when compact is true', () => {
+            const { lastFrame: compactFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, compact: true }));
+            const { lastFrame: fullFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, compact: false, changelog: ['Feature 1', 'Feature 2'] }));
+            // Compact should not show changelog details
+            expect(compactFrame()).not.toContain('Feature 1');
+            expect(fullFrame()).toContain('Feature 1');
+        });
+    });
+    describe('isActive prop', () => {
+        it('accepts isActive prop for keyboard input control', () => {
+            const onDismiss = vi.fn();
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, dismissable: true, isActive: true, onDismiss: onDismiss }));
+            // Component should render properly with isActive=true
+            expect(lastFrame()).toContain('Available');
+        });
+        it('renders same content when inactive', () => {
+            const onDismiss = vi.fn();
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true, dismissable: true, isActive: false, onDismiss: onDismiss }));
+            // Component should render same visual content regardless of isActive
+            expect(lastFrame()).toContain('Available');
+        });
+    });
+    describe('styling', () => {
+        it('uses green color for update banner', () => {
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true }));
+            // The component should be visible (not empty)
+            expect(lastFrame()).toBeTruthy();
+        });
+        it('displays celebration indicator', () => {
+            const { lastFrame } = render(_jsx(UpdateBanner, { current: "1.0.0", latest: "2.0.0", updateAvailable: true }));
+            // Should contain a celebration indicator
+            const frame = lastFrame() || '';
+            // Could be text like "NEW" or "Update" or similar
+            expect(frame.toLowerCase()).toMatch(/update|new|available/);
+        });
+    });
+});

package/dashboard/dist/components/ui/EmptyState.d.ts

@@ -0,0 +1,14 @@
+export type EmptyStateType = 'tasks' | 'bugs' | 'agents' | 'logs' | 'projects' | 'health' | 'router' | 'generic';
+export interface EmptyStateProps {
+    type?: EmptyStateType;
+    title?: string;
+    subtitle?: string;
+    action?: string;
+    compact?: boolean;
+}
+/**
+ * Renders a friendly empty state with contextual messaging.
+ * Uses sensible defaults based on the type prop.
+ */
+export declare function EmptyState({ type, title, subtitle, action, compact, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/dashboard/dist/components/ui/EmptyState.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const EMPTY_STATE_INFO = {
+    tasks: {
+        icon: '[]',
+        defaultTitle: 'No tasks yet',
+        defaultSubtitle: 'Run /tlc:plan to create tasks',
+    },
+    bugs: {
+        icon: '[]',
+        defaultTitle: 'No bugs reported',
+        defaultSubtitle: 'Run /tlc:bug to report an issue',
+    },
+    agents: {
+        icon: '[]',
+        defaultTitle: 'No agents running',
+        defaultSubtitle: 'Agents will appear when spawned',
+    },
+    logs: {
+        icon: '[]',
+        defaultTitle: 'No logs yet',
+        defaultSubtitle: 'Logs will appear when activity starts',
+    },
+    projects: {
+        icon: '[]',
+        defaultTitle: 'No projects',
+        defaultSubtitle: 'Run tlc init to create a project',
+    },
+    health: {
+        icon: '[]',
+        defaultTitle: 'No health data',
+        defaultSubtitle: 'Run /tlc:security to audit',
+    },
+    router: {
+        icon: '[]',
+        defaultTitle: 'No router configured',
+        defaultSubtitle: 'Configure providers in .tlc.json',
+    },
+    generic: {
+        icon: '[]',
+        defaultTitle: 'Nothing here',
+        defaultSubtitle: 'No items to display',
+    },
+};
+/**
+ * Renders a friendly empty state with contextual messaging.
+ * Uses sensible defaults based on the type prop.
+ */
+export function EmptyState({ type = 'generic', title, subtitle, action, compact = false, }) {
+    const info = EMPTY_STATE_INFO[type];
+    const displayTitle = title || info.defaultTitle;
+    const displaySubtitle = subtitle || info.defaultSubtitle;
+    if (compact) {
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: displayTitle }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", paddingY: 2, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: info.icon }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: displayTitle }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", children: displaySubtitle }) }), action && (_jsx(Box, { marginTop: 1, paddingX: 1, borderStyle: "single", borderColor: "gray", children: _jsx(Text, { color: "cyan", children: action }) }))] }));
+}
+export default EmptyState;

package/dashboard/dist/components/ui/EmptyState.test.d.ts

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