tlc-claude-code 1.2.27 → 1.2.29

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

@@ -0,0 +1,181 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { CommandPalette } from './CommandPalette.js';
+const sampleCommands = [
+    {
+        id: 'tlc:plan',
+        name: 'Plan Phase',
+        description: 'Create implementation plan for a phase',
+        shortcut: 'p',
+        category: 'workflow',
+    },
+    {
+        id: 'tlc:build',
+        name: 'Build Phase',
+        description: 'Implement phase with test-first approach',
+        shortcut: 'b',
+        category: 'workflow',
+    },
+    {
+        id: 'tlc:verify',
+        name: 'Verify Phase',
+        description: 'Run human acceptance testing',
+        shortcut: 'v',
+        category: 'workflow',
+    },
+    {
+        id: 'tlc:claim',
+        name: 'Claim Task',
+        description: 'Claim a task for yourself',
+        shortcut: 'c',
+        category: 'team',
+    },
+    {
+        id: 'tlc:who',
+        name: 'Team Status',
+        description: 'Show team member status',
+        shortcut: 'w',
+        category: 'team',
+    },
+    {
+        id: 'settings',
+        name: 'Open Settings',
+        description: 'View and edit configuration',
+        shortcut: ',',
+        category: 'general',
+    },
+];
+describe('CommandPalette', () => {
+    describe('Search Input', () => {
+        it('shows search input', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/search|>|type/i);
+        });
+        it('shows current query', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, query: "plan", onSelect: () => { } }));
+            expect(lastFrame()).toContain('plan');
+        });
+        it('shows cursor indicator', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/▏|│|_|\|/);
+        });
+    });
+    describe('Fuzzy Search', () => {
+        it('filters commands by name', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, query: "plan", onSelect: () => { } }));
+            expect(lastFrame()).toContain('Plan Phase');
+            expect(lastFrame()).not.toContain('Team Status');
+        });
+        it('filters commands by description', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, query: "test", onSelect: () => { } }));
+            expect(lastFrame()).toContain('Build Phase');
+        });
+        it('matches partial words', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, query: "ver", onSelect: () => { } }));
+            expect(lastFrame()).toContain('Verify');
+        });
+        it('is case insensitive', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, query: "PLAN", onSelect: () => { } }));
+            expect(lastFrame()).toContain('Plan Phase');
+        });
+    });
+    describe('Command Display', () => {
+        it('shows command name', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toContain('Plan Phase');
+            expect(lastFrame()).toContain('Build Phase');
+        });
+        it('shows command description', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toContain('Create implementation plan');
+        });
+        it('shows keyboard shortcut', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/\[p\]|p/);
+        });
+    });
+    describe('Category Grouping', () => {
+        it('groups commands by category', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/workflow/i);
+            expect(lastFrame()).toMatch(/team/i);
+        });
+        it('shows category headers', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/workflow|team|general/i);
+        });
+    });
+    describe('Recent Commands', () => {
+        it('shows recent commands section', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, recentIds: ['tlc:plan', 'tlc:build'], onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/recent/i);
+        });
+        it('lists recent commands first', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, recentIds: ['tlc:claim'], onSelect: () => { } }));
+            const output = lastFrame() || '';
+            const claimIndex = output.indexOf('Claim Task');
+            const planIndex = output.indexOf('Plan Phase');
+            // Claim should appear before Plan due to recent
+            expect(claimIndex).toBeLessThan(planIndex);
+        });
+    });
+    describe('Selection', () => {
+        it('first command is selected by default', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toContain('▶');
+        });
+        it('shows selection indicator', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/▶|→|>/);
+        });
+        it('calls onSelect on Enter', () => {
+            const onSelect = vi.fn();
+            render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: onSelect }));
+            // Selection happens on Enter key
+        });
+    });
+    describe('Navigation', () => {
+        it('shows navigation hints', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/↑|↓|j|k/);
+        });
+        it('shows execute hint', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/enter|execute|run/i);
+        });
+        it('shows close hint', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/esc|close/i);
+        });
+    });
+    describe('Empty State', () => {
+        it('shows message when no commands match', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, query: "xyznonexistent", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/no.*command|no.*match|not.*found/i);
+        });
+        it('shows message when no commands', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: [], onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/no.*command|empty/i);
+        });
+    });
+    describe('Callbacks', () => {
+        it('calls onQueryChange when typing', () => {
+            const onQueryChange = vi.fn();
+            render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { }, onQueryChange: onQueryChange }));
+            // Query change happens on input
+        });
+        it('calls onClose on Escape', () => {
+            const onClose = vi.fn();
+            render(_jsx(CommandPalette, { commands: sampleCommands, onSelect: () => { }, onClose: onClose }));
+            // Close happens on Esc key
+        });
+    });
+    describe('Result Count', () => {
+        it('shows number of matching commands', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: sampleCommands, query: "phase", onSelect: () => { } }));
+            // Should show count of matching commands
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+});

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

@@ -0,0 +1,16 @@
+export type ConnectionState = 'connected' | 'connecting' | 'disconnected';
+export interface ConnectionStatusProps {
+    state: ConnectionState;
+    serverUrl?: string;
+    lastConnected?: string;
+    latencyMs?: number;
+    errorMessage?: string;
+    autoReconnect?: boolean;
+    reconnectIn?: number;
+    attemptCount?: number;
+    compact?: boolean;
+    isActive?: boolean;
+    onReconnect?: () => void;
+    onCancel?: () => void;
+}
+export declare function ConnectionStatus({ state, serverUrl, lastConnected, latencyMs, errorMessage, autoReconnect, reconnectIn, attemptCount, compact, isActive, onReconnect, onCancel, }: ConnectionStatusProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/ConnectionStatus.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+const stateConfig = {
+    connected: { icon: '●', color: 'green', label: 'connected' },
+    connecting: { icon: '◐', color: 'yellow', label: 'connecting' },
+    disconnected: { icon: '○', color: 'red', label: 'disconnected' },
+};
+export function ConnectionStatus({ state, serverUrl, lastConnected, latencyMs, errorMessage, autoReconnect = false, reconnectIn, attemptCount, compact = false, isActive = true, onReconnect, onCancel, }) {
+    const config = stateConfig[state];
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Manual reconnect
+        if (input === 'r' && state === 'disconnected' && onReconnect) {
+            onReconnect();
+        }
+        // Cancel reconnect
+        if (key.escape && autoReconnect && state === 'disconnected' && onCancel) {
+            onCancel();
+        }
+    }, { isActive });
+    // Compact mode
+    if (compact) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: config.color, children: config.icon }), _jsxs(Text, { color: config.color, children: [" ", config.label] }), state === 'connected' && latencyMs !== undefined && (_jsxs(Text, { dimColor: true, children: [" (", latencyMs, "ms)"] }))] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: config.color, bold: true, children: [config.icon, " ", config.label] }), state === 'connected' && latencyMs !== undefined && (_jsxs(Text, { dimColor: true, children: [" (", latencyMs, "ms)"] })), state === 'connecting' && attemptCount !== undefined && (_jsxs(Text, { dimColor: true, children: [" (attempt ", attemptCount, ")"] }))] }), serverUrl && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Server: " }), _jsx(Text, { color: "cyan", children: serverUrl })] })), state !== 'connected' && lastConnected && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Last connected: " }), _jsx(Text, { children: lastConnected })] })), state === 'connected' && lastConnected && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Connected: " }), _jsx(Text, { children: lastConnected })] })), state === 'disconnected' && errorMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", errorMessage] }) })), state === 'disconnected' && autoReconnect && reconnectIn !== undefined && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: ["Reconnecting in ", reconnectIn, "s..."] }) })), state === 'disconnected' && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["r reconnect", autoReconnect && ' • Esc cancel'] }) }))] }));
+}

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

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

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ConnectionStatus } from './ConnectionStatus.js';
+describe('ConnectionStatus', () => {
+    describe('Connected State', () => {
+        it('shows connected indicator', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected" }));
+            expect(lastFrame()).toMatch(/●|connected|online/i);
+        });
+        it('uses green color for connected', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected" }));
+            expect(lastFrame()).toContain('connected');
+        });
+        it('shows last connected time', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected", lastConnected: "2 min ago" }));
+            expect(lastFrame()).toContain('2 min ago');
+        });
+    });
+    describe('Connecting State', () => {
+        it('shows connecting indicator', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connecting" }));
+            expect(lastFrame()).toMatch(/◐|connecting|…/i);
+        });
+        it('uses yellow color for connecting', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connecting" }));
+            expect(lastFrame()).toContain('connecting');
+        });
+        it('shows attempt count', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connecting", attemptCount: 3 }));
+            expect(lastFrame()).toMatch(/3|attempt/i);
+        });
+    });
+    describe('Disconnected State', () => {
+        it('shows disconnected indicator', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected" }));
+            expect(lastFrame()).toMatch(/○|disconnected|offline/i);
+        });
+        it('uses red color for disconnected', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected" }));
+            expect(lastFrame()).toContain('disconnected');
+        });
+        it('shows last connected time', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected", lastConnected: "5 min ago" }));
+            expect(lastFrame()).toContain('5 min ago');
+        });
+    });
+    describe('Auto-Reconnect', () => {
+        it('shows countdown when auto-reconnect enabled', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected", autoReconnect: true, reconnectIn: 10 }));
+            expect(lastFrame()).toMatch(/10|sec|reconnect/i);
+        });
+        it('hides countdown when auto-reconnect disabled', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected", autoReconnect: false }));
+            const output = lastFrame() || '';
+            expect(output).not.toMatch(/\d+s/);
+        });
+        it('shows reconnecting message during countdown', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected", autoReconnect: true, reconnectIn: 5 }));
+            expect(lastFrame()).toMatch(/reconnect.*5|5.*reconnect/i);
+        });
+    });
+    describe('Manual Reconnect', () => {
+        it('shows manual reconnect hint', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected" }));
+            expect(lastFrame()).toMatch(/r|reconnect|retry/i);
+        });
+        it('calls onReconnect when triggered', () => {
+            const onReconnect = vi.fn();
+            render(_jsx(ConnectionStatus, { state: "disconnected", onReconnect: onReconnect }));
+            // Reconnect happens on 'r' key
+        });
+    });
+    describe('Error Message', () => {
+        it('shows error message when provided', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected", errorMessage: "Connection refused" }));
+            expect(lastFrame()).toContain('Connection refused');
+        });
+        it('hides error when connected', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected", errorMessage: "Old error" }));
+            const output = lastFrame() || '';
+            expect(output).not.toContain('Old error');
+        });
+    });
+    describe('Server URL', () => {
+        it('shows server URL', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected", serverUrl: "wss://api.example.com" }));
+            expect(lastFrame()).toContain('api.example.com');
+        });
+    });
+    describe('Compact Mode', () => {
+        it('shows compact indicator', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected", compact: true }));
+            expect(lastFrame()).toMatch(/●|connected/i);
+        });
+        it('hides details in compact mode', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected", compact: true, lastConnected: "2 min ago" }));
+            const output = lastFrame() || '';
+            // Should be shorter than expanded mode
+            expect(output.length).toBeLessThan(100);
+        });
+    });
+    describe('Latency', () => {
+        it('shows latency when connected', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "connected", latencyMs: 45 }));
+            expect(lastFrame()).toMatch(/45|ms|latency/i);
+        });
+        it('hides latency when disconnected', () => {
+            const { lastFrame } = render(_jsx(ConnectionStatus, { state: "disconnected", latencyMs: 45 }));
+            const output = lastFrame() || '';
+            expect(output).not.toMatch(/45ms/);
+        });
+    });
+    describe('Callbacks', () => {
+        it('calls onCancel to cancel reconnect', () => {
+            const onCancel = vi.fn();
+            render(_jsx(ConnectionStatus, { state: "disconnected", autoReconnect: true, reconnectIn: 10, onCancel: onCancel }));
+            // Cancel happens on Esc key
+        });
+    });
+});

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

@@ -0,0 +1,19 @@
+export type DeviceType = 'phone' | 'tablet' | 'desktop' | 'custom';
+export interface DeviceDimensions {
+    width: number;
+    height: number;
+    label: string;
+}
+export declare function getDeviceDimensions(device: DeviceType, customWidth?: number, customHeight?: number): DeviceDimensions;
+export declare function generateViewportUrl(baseUrl: string, device: DeviceType, customWidth?: number, customHeight?: number): string;
+export interface DeviceFrameProps {
+    selectedDevice: DeviceType;
+    baseUrl?: string;
+    customWidth?: number;
+    customHeight?: number;
+    showCustom?: boolean;
+    isActive?: boolean;
+    onSelect: (device: DeviceType) => void;
+    onCustomDimensions?: (width: number, height: number) => void;
+}
+export declare function DeviceFrame({ selectedDevice, baseUrl, customWidth, customHeight, showCustom, isActive, onSelect, onCustomDimensions, }: DeviceFrameProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/DeviceFrame.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+const devicePresets = {
+    phone: { width: 390, height: 844, label: 'Phone (iPhone 14)' },
+    tablet: { width: 820, height: 1180, label: 'Tablet (iPad Air)' },
+    desktop: { width: 1440, height: 900, label: 'Desktop (MacBook)' },
+};
+export function getDeviceDimensions(device, customWidth, customHeight) {
+    if (device === 'custom') {
+        return {
+            width: customWidth || 800,
+            height: customHeight || 600,
+            label: 'Custom',
+        };
+    }
+    return devicePresets[device];
+}
+export function generateViewportUrl(baseUrl, device, customWidth, customHeight) {
+    const dims = getDeviceDimensions(device, customWidth, customHeight);
+    const url = new URL(baseUrl);
+    url.searchParams.set('viewport', `${dims.width}x${dims.height}`);
+    return url.toString();
+}
+const devices = [
+    { key: 'phone', num: '1' },
+    { key: 'tablet', num: '2' },
+    { key: 'desktop', num: '3' },
+];
+export function DeviceFrame({ selectedDevice, baseUrl, customWidth = 800, customHeight = 600, showCustom = false, isActive = true, onSelect, onCustomDimensions, }) {
+    const allDevices = showCustom
+        ? [...devices, { key: 'custom', num: '4' }]
+        : devices;
+    useInput((input) => {
+        if (!isActive)
+            return;
+        if (input === '1')
+            onSelect('phone');
+        else if (input === '2')
+            onSelect('tablet');
+        else if (input === '3')
+            onSelect('desktop');
+        else if (input === '4' && showCustom)
+            onSelect('custom');
+    }, { isActive });
+    const currentDims = getDeviceDimensions(selectedDevice, customWidth, customHeight);
+    const viewportUrl = baseUrl ? generateViewportUrl(baseUrl, selectedDevice, customWidth, customHeight) : null;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Device Size" }) }), allDevices.map((device) => {
+                const isSelected = device.key === selectedDevice;
+                const dims = getDeviceDimensions(device.key, customWidth, customHeight);
+                return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), _jsxs(Text, { color: isSelected ? 'cyan' : 'gray', children: ["[", device.num, "]"] }), _jsxs(Text, { bold: isSelected, color: isSelected ? 'cyan' : 'white', children: [' ', device.key.charAt(0).toUpperCase() + device.key.slice(1)] }), _jsxs(Text, { dimColor: true, children: [' ', dims.width, " \u00D7 ", dims.height] })] }, device.key));
+            }), _jsxs(Box, { marginTop: 1, borderStyle: "single", paddingX: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Selected: " }), _jsx(Text, { color: "cyan", children: currentDims.label })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Viewport: " }), _jsxs(Text, { children: [currentDims.width, " \u00D7 ", currentDims.height] })] }), viewportUrl && (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "URL: " }), _jsx(Text, { color: "blue", children: viewportUrl })] }))] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["1 phone \u2022 2 tablet \u2022 3 desktop", showCustom && ' • 4 custom'] }) })] }));
+}

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

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

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

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { DeviceFrame, getDeviceDimensions, generateViewportUrl } from './DeviceFrame.js';
+describe('DeviceFrame', () => {
+    describe('Device Presets', () => {
+        it('shows phone option', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/phone|mobile/i);
+        });
+        it('shows tablet option', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/tablet|ipad/i);
+        });
+        it('shows desktop option', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/desktop|laptop/i);
+        });
+    });
+    describe('Dimensions Display', () => {
+        it('shows phone dimensions', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/375|390|414/); // Common phone widths
+        });
+        it('shows tablet dimensions', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "tablet", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/768|820|1024/); // Common tablet widths
+        });
+        it('shows desktop dimensions', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "desktop", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/1280|1440|1920/); // Common desktop widths
+        });
+        it('shows width x height format', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/\d+\s*[x×]\s*\d+/i);
+        });
+    });
+    describe('Selection', () => {
+        it('highlights selected device', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "tablet", onSelect: () => { } }));
+            // Tablet should be highlighted
+            expect(lastFrame()).toContain('tablet');
+        });
+        it('shows selection indicator', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/▶|●|\[x\]|selected/i);
+        });
+    });
+    describe('Keyboard Selection', () => {
+        it('shows number hints', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toContain('1');
+            expect(lastFrame()).toContain('2');
+            expect(lastFrame()).toContain('3');
+        });
+        it('calls onSelect with device type', () => {
+            const onSelect = vi.fn();
+            render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: onSelect }));
+            // Selection happens on number key press
+        });
+    });
+    describe('URL Generation', () => {
+        it('shows URL with viewport params', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", baseUrl: "http://localhost:3000", onSelect: () => { } }));
+            // Should show URL with dimensions
+            expect(lastFrame()).toContain('localhost');
+        });
+    });
+    describe('Custom Dimensions', () => {
+        it('shows custom option', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { }, showCustom: true }));
+            expect(lastFrame()).toMatch(/custom|\d+.*×.*\d+/i);
+        });
+        it('shows custom dimensions when selected', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "custom", customWidth: 800, customHeight: 600, onSelect: () => { }, showCustom: true }));
+            expect(lastFrame()).toContain('800');
+            expect(lastFrame()).toContain('600');
+        });
+    });
+    describe('Navigation Hints', () => {
+        it('shows keyboard navigation hints', () => {
+            const { lastFrame } = render(_jsx(DeviceFrame, { selectedDevice: "phone", onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/1.*2.*3|phone.*tablet.*desktop/i);
+        });
+    });
+});
+describe('getDeviceDimensions', () => {
+    it('returns phone dimensions', () => {
+        const dims = getDeviceDimensions('phone');
+        expect(dims.width).toBe(390);
+        expect(dims.height).toBe(844);
+    });
+    it('returns tablet dimensions', () => {
+        const dims = getDeviceDimensions('tablet');
+        expect(dims.width).toBe(820);
+        expect(dims.height).toBe(1180);
+    });
+    it('returns desktop dimensions', () => {
+        const dims = getDeviceDimensions('desktop');
+        expect(dims.width).toBe(1440);
+        expect(dims.height).toBe(900);
+    });
+});
+describe('generateViewportUrl', () => {
+    it('adds viewport params to URL', () => {
+        const url = generateViewportUrl('http://localhost:3000', 'phone');
+        expect(url).toContain('viewport=');
+    });
+    it('preserves existing URL params', () => {
+        const url = generateViewportUrl('http://localhost:3000?foo=bar', 'tablet');
+        expect(url).toContain('foo=bar');
+        expect(url).toContain('viewport=');
+    });
+    it('includes width in viewport', () => {
+        const url = generateViewportUrl('http://localhost:3000', 'desktop');
+        expect(url).toContain('1440');
+    });
+});

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

@@ -0,0 +1,11 @@
+export type Environment = 'local' | 'vps' | 'staging' | 'production';
+export interface EnvironmentBadgeProps {
+    environment: Environment;
+    branch?: string;
+    version?: string;
+    commit?: string;
+    url?: string;
+    connected?: boolean;
+    compact?: boolean;
+}
+export declare function EnvironmentBadge({ environment, branch, version, commit, url, connected, compact, }: EnvironmentBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/EnvironmentBadge.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const envConfig = {
+    local: { label: 'local', color: 'green', icon: '◆' },
+    vps: { label: 'vps', color: 'cyan', icon: '◈' },
+    staging: { label: 'staging', color: 'yellow', icon: '◇' },
+    production: { label: 'PROD', color: 'red', icon: '⚠' },
+};
+export function EnvironmentBadge({ environment, branch, version, commit, url, connected, compact = false, }) {
+    const config = envConfig[environment];
+    const isProduction = environment === 'production';
+    if (compact) {
+        return (_jsxs(Box, { children: [_jsxs(Text, { color: config.color, bold: true, children: ["[", config.label, "]"] }), connected !== undefined && (_jsx(Text, { color: connected ? 'green' : 'red', children: connected ? ' ●' : ' ○' }))] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: config.color, bold: true, children: [config.icon, " ", config.label] }), isProduction && (_jsx(Text, { color: "red", bold: true, children: " \u26A0 CAUTION" })), connected !== undefined && (_jsx(Text, { color: connected ? 'green' : 'red', children: connected ? ' ● connected' : ' ○ disconnected' }))] }), _jsxs(Box, { marginTop: 1, children: [branch && (_jsxs(Box, { marginRight: 2, children: [_jsx(Text, { dimColor: true, children: "branch: " }), _jsx(Text, { color: "cyan", children: branch })] })), version && (_jsxs(Box, { marginRight: 2, children: [_jsx(Text, { dimColor: true, children: "v" }), _jsx(Text, { children: version })] })), commit && (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "@" }), _jsx(Text, { color: "yellow", children: commit.slice(0, 7) })] }))] }), url && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "url: " }), _jsx(Text, { color: "blue", children: url })] }))] }));
+}

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

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