tlc-claude-code 1.4.1 → 1.4.4

package/dashboard/dist/components/RouterPane.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+// Import components to test accessibility
+import { Button } from './ui/Button.js';
+import { Modal } from './ui/Modal.js';
+import { Dropdown } from './ui/Dropdown.js';
+import { Toast } from './ui/Toast.js';
+import { Input } from './ui/Input.js';
+import { CommandPalette } from './CommandPalette.js';
+describe('Accessibility', () => {
+    describe('Keyboard Navigation', () => {
+        it('Button is keyboard accessible', () => {
+            const { lastFrame } = render(_jsx(Button, { children: "Click me" }));
+            expect(lastFrame()).toContain('Click me');
+            // Buttons should render and be focusable
+        });
+        it('Modal shows keyboard hints', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, closeable: true, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toMatch(/esc/i);
+        });
+        it('Dropdown shows navigation hints', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: [{ value: '1', label: 'Option 1' }], onSelect: () => { }, isOpen: true }));
+            expect(lastFrame()).toMatch(/↑|↓|enter|esc/i);
+        });
+        it('CommandPalette shows navigation hints', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: [{ id: '1', name: 'Test', description: 'Test command' }], onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/↑|↓|j|k|enter|esc/i);
+        });
+    });
+    describe('Focus Indicators', () => {
+        it('Button shows focus state', () => {
+            const { lastFrame: focused } = render(_jsx(Button, { isFocused: true, children: "Focused" }));
+            const { lastFrame: unfocused } = render(_jsx(Button, { isFocused: false, children: "Unfocused" }));
+            // Both should render, focused may have different styling
+            expect(focused()).toContain('Focused');
+            expect(unfocused()).toContain('Unfocused');
+        });
+        it('Input shows focus state', () => {
+            const { lastFrame } = render(_jsx(Input, { placeholder: "Type here", focus: true }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Screen Reader Support', () => {
+        it('Modal has title for identification', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, title: "Important Dialog", children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Important Dialog');
+        });
+        it('Toast shows variant type', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "error", message: "Something went wrong" }));
+            expect(lastFrame()).toMatch(/error|✕|✖/i);
+        });
+        it('Toast shows message content', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "success", message: "Operation completed" }));
+            expect(lastFrame()).toContain('Operation completed');
+        });
+    });
+    describe('Color Contrast', () => {
+        it('Primary text is visible (not dimmed by default)', () => {
+            const { lastFrame } = render(_jsx(Text, { children: "Primary text" }));
+            expect(lastFrame()).toContain('Primary text');
+        });
+        it('Muted text uses dimColor', () => {
+            const { lastFrame } = render(_jsx(Text, { dimColor: true, children: "Muted text" }));
+            expect(lastFrame()).toContain('Muted text');
+        });
+        it('Error state uses red color', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "error", message: "Error" }));
+            // Should contain error indicator
+            expect(lastFrame()).toMatch(/✕|error/i);
+        });
+        it('Success state uses green color', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "success", message: "Success" }));
+            expect(lastFrame()).toMatch(/✓|success/i);
+        });
+    });
+    describe('Logical Tab Order', () => {
+        it('Modal content is contained', () => {
+            const { lastFrame } = render(_jsxs(Modal, { isOpen: true, onClose: () => { }, title: "Dialog", children: [_jsx(Text, { children: "First element" }), _jsx(Text, { children: "Second element" })] }));
+            const output = lastFrame() || '';
+            const firstIdx = output.indexOf('First element');
+            const secondIdx = output.indexOf('Second element');
+            // First should appear before second
+            expect(firstIdx).toBeLessThan(secondIdx);
+        });
+        it('Dropdown options in logical order', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: [
+                    { value: '1', label: 'First' },
+                    { value: '2', label: 'Second' },
+                    { value: '3', label: 'Third' },
+                ], onSelect: () => { }, isOpen: true }));
+            const output = lastFrame() || '';
+            const firstIdx = output.indexOf('First');
+            const secondIdx = output.indexOf('Second');
+            const thirdIdx = output.indexOf('Third');
+            expect(firstIdx).toBeLessThan(secondIdx);
+            expect(secondIdx).toBeLessThan(thirdIdx);
+        });
+    });
+    describe('Reduced Motion Support', () => {
+        it('Skeleton uses static characters (no animation in terminal)', () => {
+            // In terminal, we use static shimmer characters
+            // Animation is simulated through character choice, not actual motion
+            const { lastFrame } = render(_jsx(Box, { children: _jsx(Text, { color: "gray", children: "\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591" }) }));
+            expect(lastFrame()).toContain('░');
+        });
+    });
+    describe('Icon-Only Buttons', () => {
+        it('Button with icon still has text for context', () => {
+            const { lastFrame } = render(_jsx(Button, { leftIcon: "+", children: "Add Item" }));
+            expect(lastFrame()).toContain('Add Item');
+            expect(lastFrame()).toContain('+');
+        });
+    });
+});

package/dashboard/dist/components/layout/MobileNav.d.ts

@@ -0,0 +1,16 @@
+export interface NavItem {
+    key: string;
+    label: string;
+    icon: string;
+    badge?: number;
+}
+export interface MobileNavProps {
+    items: NavItem[];
+    activeKey: string;
+    onNavigate: (key: string) => void;
+    compact?: boolean;
+    maxItems?: number;
+    isTTY?: boolean;
+}
+export declare function MobileNav({ items, activeKey, onNavigate, compact, maxItems, isTTY, }: MobileNavProps): import("react/jsx-runtime").JSX.Element;
+export default MobileNav;

package/dashboard/dist/components/layout/MobileNav.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+export function MobileNav({ items, activeKey, onNavigate, compact = false, maxItems = 5, isTTY = true, }) {
+    const [focusIndex, setFocusIndex] = useState(items.findIndex(i => i.key === activeKey));
+    // Handle keyboard navigation
+    useInput((input, key) => {
+        if (!isTTY)
+            return;
+        if (key.leftArrow || input === 'h') {
+            setFocusIndex(prev => Math.max(0, prev - 1));
+        }
+        if (key.rightArrow || input === 'l') {
+            setFocusIndex(prev => Math.min(items.length - 1, prev + 1));
+        }
+        if (key.return) {
+            const item = items[focusIndex];
+            if (item) {
+                onNavigate(item.key);
+            }
+        }
+    }, { isActive: isTTY });
+    const visibleItems = items.slice(0, maxItems);
+    const hasMore = items.length > maxItems;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, justifyContent: "space-around", children: [visibleItems.map((item, idx) => {
+                const isActive = item.key === activeKey;
+                const isFocused = idx === focusIndex;
+                return (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginX: 1, children: [isActive && _jsx(Text, { color: "cyan", children: "\u25CF" }), !isActive && _jsx(Text, { children: " " }), _jsx(Text, { color: isActive ? 'cyan' : isFocused ? 'white' : 'gray', children: item.icon }), item.badge !== undefined && item.badge > 0 && (_jsx(Text, { color: "red", bold: true, children: item.badge })), !compact && (_jsx(Text, { color: isActive ? 'cyan' : isFocused ? 'white' : 'gray', dimColor: !isActive && !isFocused, children: item.label.length > 8 ? item.label.slice(0, 6) + '..' : item.label }))] }, item.key));
+            }), hasMore && (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginX: 1, children: [_jsx(Text, { color: "gray", children: "\u22EF" }), !compact && _jsx(Text, { color: "gray", children: "more" })] }))] }));
+}
+export default MobileNav;

package/dashboard/dist/components/layout/MobileNav.test.d.ts

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

package/dashboard/dist/components/layout/MobileNav.test.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { MobileNav } from './MobileNav.js';
+const sampleItems = [
+    { key: 'projects', label: 'Projects', icon: '📁' },
+    { key: 'tasks', label: 'Tasks', icon: '📋' },
+    { key: 'chat', label: 'Chat', icon: '💬' },
+    { key: 'logs', label: 'Logs', icon: '📜' },
+    { key: 'settings', label: 'Settings', icon: '⚙️' },
+];
+describe('MobileNav', () => {
+    describe('Rendering', () => {
+        it('renders navigation items', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('Projects');
+            expect(lastFrame()).toContain('Tasks');
+        });
+        it('renders item icons', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('📁');
+            expect(lastFrame()).toContain('📋');
+        });
+        it('renders item labels', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('Projects');
+            expect(lastFrame()).toContain('Logs');
+        });
+    });
+    describe('Active State', () => {
+        it('shows active indicator on current item', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "tasks", onNavigate: () => { } }));
+            // Active item should have some visual indicator
+            expect(lastFrame()).toContain('Tasks');
+        });
+        it('highlights active item differently', () => {
+            const { lastFrame: activeProjects } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            const { lastFrame: activeTasks } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "tasks", onNavigate: () => { } }));
+            // Both should render but with different active states
+            expect(activeProjects()).toContain('Projects');
+            expect(activeTasks()).toContain('Tasks');
+        });
+    });
+    describe('Navigation', () => {
+        it('calls onNavigate when item selected', () => {
+            const onNavigate = vi.fn();
+            render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: onNavigate }));
+            expect(onNavigate).toBeDefined();
+        });
+    });
+    describe('Compact Mode', () => {
+        it('can hide labels in compact mode', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { }, compact: true }));
+            // Icons should still show
+            expect(lastFrame()).toContain('📁');
+        });
+        it('shows only icons when compact', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { }, compact: true }));
+            // Should render icons
+            expect(lastFrame()).toMatch(/📁|📋|💬|📜|⚙️/);
+        });
+    });
+    describe('Max Items', () => {
+        it('limits visible items', () => {
+            const manyItems = Array.from({ length: 10 }, (_, i) => ({
+                key: `item${i}`,
+                label: `Item ${i}`,
+                icon: '●',
+            }));
+            const { lastFrame } = render(_jsx(MobileNav, { items: manyItems, activeKey: "item0", onNavigate: () => { }, maxItems: 5 }));
+            // Should show limited items or "more" indicator
+            expect(lastFrame()).toBeDefined();
+        });
+        it('shows overflow menu when items exceed max', () => {
+            const manyItems = Array.from({ length: 8 }, (_, i) => ({
+                key: `item${i}`,
+                label: `Item ${i}`,
+                icon: '●',
+            }));
+            const { lastFrame } = render(_jsx(MobileNav, { items: manyItems, activeKey: "item0", onNavigate: () => { }, maxItems: 4 }));
+            // Should show "more" or overflow indicator
+            expect(lastFrame()).toMatch(/more|\.{3}|»|⋯/i);
+        });
+    });
+    describe('Badge Support', () => {
+        it('shows badge on item', () => {
+            const itemsWithBadge = [
+                { key: 'tasks', label: 'Tasks', icon: '📋', badge: 3 },
+                ...sampleItems.slice(1),
+            ];
+            const { lastFrame } = render(_jsx(MobileNav, { items: itemsWithBadge, activeKey: "tasks", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('3');
+        });
+    });
+    describe('Layout', () => {
+        it('renders in horizontal layout', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            // All items should be on roughly same line (horizontal)
+            const output = lastFrame() || '';
+            // Check that items appear to be side by side
+            expect(output).toContain('Projects');
+            expect(output).toContain('Tasks');
+        });
+    });
+    describe('Keyboard Navigation', () => {
+        it('accepts isTTY prop for keyboard support', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { }, isTTY: true }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, lazy } from 'react';
+import { Text, Box } from 'ink';
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+describe('Performance', () => {
+    describe('Code Splitting', () => {
+        it('App renders without full component tree', () => {
+            // In terminal UI, we test that minimal components render quickly
+            const { lastFrame } = render(_jsx(Text, { children: "App Shell" }));
+            expect(lastFrame()).toContain('App Shell');
+        });
+        it('Skeleton placeholder renders immediately', () => {
+            // Skeleton should render fast as loading state
+            const { lastFrame } = render(_jsx(Box, { children: _jsx(Text, { color: "gray", children: "\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591" }) }));
+            expect(lastFrame()).toContain('░');
+        });
+    });
+    describe('Lazy Loading', () => {
+        it('Suspense fallback renders while loading', () => {
+            const LazyComponent = lazy(() => Promise.resolve({
+                default: () => _jsx(Text, { children: "Loaded" }),
+            }));
+            const { lastFrame } = render(_jsx(Suspense, { fallback: _jsx(Text, { children: "Loading..." }), children: _jsx(LazyComponent, {}) }));
+            // Should show either loading or loaded
+            const output = lastFrame() || '';
+            expect(output.length).toBeGreaterThan(0);
+        });
+        it('Non-critical content can be deferred', () => {
+            // Pattern: render critical content first
+            const CriticalContent = () => _jsx(Text, { children: "Critical: Dashboard" });
+            const DeferredContent = () => _jsx(Text, { children: "Deferred: Analytics" });
+            const { lastFrame } = render(_jsxs(Box, { flexDirection: "column", children: [_jsx(CriticalContent, {}), _jsx(Suspense, { fallback: _jsx(Text, { children: "Loading analytics..." }), children: _jsx(DeferredContent, {}) })] }));
+            expect(lastFrame()).toContain('Critical: Dashboard');
+        });
+    });
+    describe('Bundle Size Indicators', () => {
+        it('Components use minimal dependencies', () => {
+            // Verify components render with basic ink primitives
+            const { lastFrame } = render(_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Header" }), _jsx(Text, { children: "Content" }), _jsx(Text, { dimColor: true, children: "Footer" })] }));
+            expect(lastFrame()).toContain('Header');
+            expect(lastFrame()).toContain('Content');
+            expect(lastFrame()).toContain('Footer');
+        });
+        it('No heavy external libraries required for basic render', () => {
+            // Basic components should render with just ink
+            const { lastFrame } = render(_jsx(Box, { borderStyle: "single", padding: 1, children: _jsx(Text, { children: "Bordered box" }) }));
+            expect(lastFrame()).toContain('Bordered box');
+        });
+    });
+    describe('Render Performance', () => {
+        it('Simple component renders quickly', () => {
+            const start = performance.now();
+            const { lastFrame } = render(_jsx(Text, { children: "Simple text" }));
+            const duration = performance.now() - start;
+            expect(lastFrame()).toContain('Simple text');
+            // Should render in reasonable time (< 100ms for simple component)
+            expect(duration).toBeLessThan(100);
+        });
+        it('List renders without blocking', () => {
+            const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
+            const start = performance.now();
+            const { lastFrame } = render(_jsx(Box, { flexDirection: "column", children: items.slice(0, 10).map((item, i) => (_jsx(Text, { children: item }, i))) }));
+            const duration = performance.now() - start;
+            expect(lastFrame()).toContain('Item 0');
+            // Even with 10 items, should be fast
+            expect(duration).toBeLessThan(200);
+        });
+        it('Memoized components do not re-render unnecessarily', () => {
+            const renderCount = { count: 0 };
+            const MemoizedComponent = React.memo(function MemoizedComponent({ text }) {
+                renderCount.count++;
+                return _jsx(Text, { children: text });
+            });
+            const { rerender, lastFrame } = render(_jsx(MemoizedComponent, { text: "Hello" }));
+            expect(renderCount.count).toBe(1);
+            // Re-render with same props
+            rerender(_jsx(MemoizedComponent, { text: "Hello" }));
+            // Should not increase render count significantly
+            expect(renderCount.count).toBeLessThanOrEqual(2);
+        });
+    });
+    describe('Memory Efficiency', () => {
+        it('Components render and can be unmounted', () => {
+            // In ink-testing-library, unmount doesn't trigger useEffect cleanup
+            // the same way as react-dom. We verify the component lifecycle works.
+            const CleanupComponent = () => {
+                return _jsx(Text, { children: "Cleanup test" });
+            };
+            const { unmount, lastFrame } = render(_jsx(CleanupComponent, {}));
+            expect(lastFrame()).toContain('Cleanup test');
+            // Verify unmount completes without error
+            expect(() => unmount()).not.toThrow();
+        });
+        it('Event handlers are properly attached', () => {
+            // For terminal apps, we use useInput hook
+            // This test ensures the pattern is followed
+            const { lastFrame } = render(_jsxs(Box, { children: [_jsx(Text, { children: "Press any key" }), _jsx(Text, { dimColor: true, children: "(keyboard input enabled)" })] }));
+            expect(lastFrame()).toContain('Press any key');
+        });
+    });
+    describe('No Render-Blocking', () => {
+        it('Progressive content display', () => {
+            // Content should render top-to-bottom
+            const { lastFrame } = render(_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "Line 1" }), _jsx(Text, { children: "Line 2" }), _jsx(Text, { children: "Line 3" })] }));
+            const output = lastFrame() || '';
+            const line1Idx = output.indexOf('Line 1');
+            const line2Idx = output.indexOf('Line 2');
+            const line3Idx = output.indexOf('Line 3');
+            expect(line1Idx).toBeLessThan(line2Idx);
+            expect(line2Idx).toBeLessThan(line3Idx);
+        });
+    });
+});

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

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