tlc-claude-code 1.4.2 → 1.4.4

package/dashboard/dist/hooks/useTheme.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export type Theme = 'dark' | 'light';
+export interface ThemeColors {
+    bg: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        muted: string;
+    };
+    accent: string;
+    border: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+}
+interface ThemeContextValue {
+    theme: Theme;
+    isDark: boolean;
+    isLight: boolean;
+    colors: ThemeColors;
+    toggleTheme: () => void;
+    setTheme: (theme: Theme) => void;
+    useSystemTheme: boolean;
+    setUseSystemTheme: (use: boolean) => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: Theme;
+}
+export declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export default useTheme;

package/dashboard/dist/hooks/useTheme.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+const darkColors = {
+    bg: {
+        primary: '#0a0a0b',
+        secondary: '#141416',
+        tertiary: '#1e1e21',
+    },
+    text: {
+        primary: '#fafafa',
+        secondary: '#a1a1aa',
+        muted: '#71717a',
+    },
+    accent: '#3b82f6',
+    border: '#27272a',
+    success: '#22c55e',
+    warning: '#eab308',
+    error: '#ef4444',
+    info: '#06b6d4',
+};
+const lightColors = {
+    bg: {
+        primary: '#ffffff',
+        secondary: '#f4f4f5',
+        tertiary: '#e4e4e7',
+    },
+    text: {
+        primary: '#09090b',
+        secondary: '#52525b',
+        muted: '#a1a1aa',
+    },
+    accent: '#2563eb',
+    border: '#e4e4e7',
+    success: '#16a34a',
+    warning: '#ca8a04',
+    error: '#dc2626',
+    info: '#0891b2',
+};
+const ThemeContext = createContext(null);
+export function ThemeProvider({ children, defaultTheme = 'dark' }) {
+    const [theme, setThemeState] = useState(defaultTheme);
+    const [useSystemTheme, setUseSystemTheme] = useState(false);
+    const isDark = theme === 'dark';
+    const isLight = theme === 'light';
+    const colors = isDark ? darkColors : lightColors;
+    const toggleTheme = useCallback(() => {
+        setThemeState(prev => (prev === 'dark' ? 'light' : 'dark'));
+    }, []);
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+    }, []);
+    // Persist to localStorage if available
+    useEffect(() => {
+        if (typeof localStorage !== 'undefined' && !useSystemTheme) {
+            localStorage.setItem('tlc-theme', theme);
+        }
+    }, [theme, useSystemTheme]);
+    // Load from localStorage on mount
+    useEffect(() => {
+        if (typeof localStorage !== 'undefined') {
+            const saved = localStorage.getItem('tlc-theme');
+            if (saved) {
+                setThemeState(saved);
+            }
+        }
+    }, []);
+    const value = {
+        theme,
+        isDark,
+        isLight,
+        colors,
+        toggleTheme,
+        setTheme,
+        useSystemTheme,
+        setUseSystemTheme,
+    };
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        // Return default values if used outside provider
+        return {
+            theme: 'dark',
+            isDark: true,
+            isLight: false,
+            colors: darkColors,
+            toggleTheme: () => { },
+            setTheme: () => { },
+            useSystemTheme: false,
+            setUseSystemTheme: () => { },
+        };
+    }
+    return context;
+}
+export default useTheme;

package/dashboard/dist/hooks/useTheme.test.d.ts

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

package/dashboard/dist/hooks/useTheme.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Text } from 'ink';
+import { ThemeProvider, useTheme } from './useTheme.js';
+// Test component that uses the hook
+function ThemeConsumer() {
+    const { theme, isDark, isLight, colors, useSystemTheme } = useTheme();
+    return (_jsx(Text, { children: `theme:${theme}|isDark:${String(isDark)}|isLight:${String(isLight)}|accent:${colors.accent}|useSystem:${String(useSystemTheme)}` }));
+}
+function LightThemeConsumer() {
+    const { theme, isDark, isLight } = useTheme();
+    return (_jsx(Text, { children: `theme:${theme}|isDark:${String(isDark)}|isLight:${String(isLight)}` }));
+}
+describe('useTheme', () => {
+    describe('Initial State', () => {
+        it('returns theme object', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('theme:');
+        });
+        it('defaults to dark theme', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('theme:dark');
+        });
+        it('returns isDark helper', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('isDark:true');
+        });
+        it('returns isLight helper', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('isLight:false');
+        });
+    });
+    describe('Default Theme Override', () => {
+        it('accepts light as default theme', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { defaultTheme: "light", children: _jsx(LightThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('theme:light');
+        });
+        it('sets isDark false when light theme', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { defaultTheme: "light", children: _jsx(LightThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('isDark:false');
+        });
+        it('sets isLight true when light theme', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { defaultTheme: "light", children: _jsx(LightThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('isLight:true');
+        });
+    });
+    describe('Theme Colors', () => {
+        it('provides color tokens', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('accent:');
+        });
+        it('provides accent color for dark theme', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('accent:#3b82f6');
+        });
+    });
+    describe('System Preference', () => {
+        it('provides useSystemTheme option', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('useSystem:');
+        });
+        it('defaults useSystemTheme to false', () => {
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(ThemeConsumer, {}) }));
+            expect(lastFrame()).toContain('useSystem:false');
+        });
+    });
+    describe('Hook Functions', () => {
+        it('provides toggleTheme function', () => {
+            const TestFunctions = () => {
+                const { toggleTheme } = useTheme();
+                return _jsx(Text, { children: `hasToggle:${typeof toggleTheme === 'function'}` });
+            };
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(TestFunctions, {}) }));
+            expect(lastFrame()).toContain('hasToggle:true');
+        });
+        it('provides setTheme function', () => {
+            const TestFunctions = () => {
+                const { setTheme } = useTheme();
+                return _jsx(Text, { children: `hasSetTheme:${typeof setTheme === 'function'}` });
+            };
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(TestFunctions, {}) }));
+            expect(lastFrame()).toContain('hasSetTheme:true');
+        });
+        it('provides setUseSystemTheme function', () => {
+            const TestFunctions = () => {
+                const { setUseSystemTheme } = useTheme();
+                return _jsx(Text, { children: `hasSetSystem:${typeof setUseSystemTheme === 'function'}` });
+            };
+            const { lastFrame } = render(_jsx(ThemeProvider, { children: _jsx(TestFunctions, {}) }));
+            expect(lastFrame()).toContain('hasSetSystem:true');
+        });
+    });
+});

package/dashboard/dist/hooks/useWebSocket.d.ts

@@ -0,0 +1,17 @@
+export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
+export interface WebSocketMessage {
+    type: string;
+    channel?: string;
+    data?: unknown;
+}
+export interface UseWebSocketReturn {
+    status: ConnectionStatus;
+    isConnected: boolean;
+    error: Error | null;
+    send: (message: WebSocketMessage) => void;
+    subscribe: (channel: string, handler: (data: unknown) => void) => () => void;
+    reconnect: () => void;
+    disconnect: () => void;
+}
+export declare function useWebSocket(url: string): UseWebSocketReturn;
+export default useWebSocket;

package/dashboard/dist/hooks/useWebSocket.js

@@ -0,0 +1,100 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+export function useWebSocket(url) {
+    const [status, setStatus] = useState('connecting');
+    const [error, setError] = useState(null);
+    const wsRef = useRef(null);
+    const handlersRef = useRef(new Map());
+    const reconnectTimeoutRef = useRef();
+    const connect = useCallback(() => {
+        try {
+            setStatus('connecting');
+            setError(null);
+            const ws = new WebSocket(url);
+            wsRef.current = ws;
+            ws.onopen = () => {
+                setStatus('connected');
+                setError(null);
+            };
+            ws.onclose = () => {
+                setStatus('disconnected');
+                wsRef.current = null;
+            };
+            ws.onerror = (event) => {
+                setStatus('error');
+                setError(new Error('WebSocket error'));
+            };
+            ws.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data);
+                    const channel = message.channel || message.type;
+                    const handlers = handlersRef.current.get(channel);
+                    if (handlers) {
+                        handlers.forEach(handler => handler(message.data));
+                    }
+                }
+                catch (e) {
+                    // Ignore parse errors
+                }
+            };
+        }
+        catch (e) {
+            setStatus('error');
+            setError(e instanceof Error ? e : new Error('Failed to connect'));
+        }
+    }, [url]);
+    const disconnect = useCallback(() => {
+        if (reconnectTimeoutRef.current) {
+            clearTimeout(reconnectTimeoutRef.current);
+        }
+        if (wsRef.current) {
+            wsRef.current.close();
+            wsRef.current = null;
+        }
+        setStatus('disconnected');
+    }, []);
+    const reconnect = useCallback(() => {
+        disconnect();
+        connect();
+    }, [connect, disconnect]);
+    const send = useCallback((message) => {
+        if (wsRef.current?.readyState === WebSocket.OPEN) {
+            wsRef.current.send(JSON.stringify(message));
+        }
+    }, []);
+    const subscribe = useCallback((channel, handler) => {
+        if (!handlersRef.current.has(channel)) {
+            handlersRef.current.set(channel, new Set());
+        }
+        handlersRef.current.get(channel).add(handler);
+        // Send subscribe message
+        send({ type: 'subscribe', channel });
+        // Return unsubscribe function
+        return () => {
+            const handlers = handlersRef.current.get(channel);
+            if (handlers) {
+                handlers.delete(handler);
+                if (handlers.size === 0) {
+                    handlersRef.current.delete(channel);
+                    send({ type: 'unsubscribe', channel });
+                }
+            }
+        };
+    }, [send]);
+    // Connect on mount
+    useEffect(() => {
+        connect();
+        return () => {
+            disconnect();
+        };
+    }, [connect, disconnect]);
+    return {
+        status,
+        isConnected: status === 'connected',
+        error,
+        send,
+        subscribe,
+        reconnect,
+        disconnect,
+    };
+}
+export default useWebSocket;

package/dashboard/dist/hooks/useWebSocket.test.d.ts

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

package/dashboard/dist/hooks/useWebSocket.test.js

@@ -0,0 +1,115 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Text } from 'ink';
+import { useWebSocket } from './useWebSocket.js';
+// Mock WebSocket
+class MockWebSocket {
+    url;
+    static CONNECTING = 0;
+    static OPEN = 1;
+    static CLOSING = 2;
+    static CLOSED = 3;
+    readyState = MockWebSocket.CONNECTING;
+    onopen = null;
+    onclose = null;
+    onmessage = null;
+    onerror = null;
+    constructor(url) {
+        this.url = url;
+        setTimeout(() => {
+            this.readyState = MockWebSocket.OPEN;
+            this.onopen?.(new Event('open'));
+        }, 10);
+    }
+    send = vi.fn();
+    close = vi.fn(() => {
+        this.readyState = MockWebSocket.CLOSED;
+        this.onclose?.(new CloseEvent('close'));
+    });
+}
+// Test component that uses the hook
+function WebSocketConsumer({ url }) {
+    const { status, isConnected, error, send, subscribe, reconnect, disconnect } = useWebSocket(url);
+    return (_jsxs(Text, { children: ["status:", status, "|connected:", String(isConnected), "|error:", error ? error.message : 'null'] }));
+}
+describe('useWebSocket', () => {
+    let originalWebSocket;
+    beforeEach(() => {
+        originalWebSocket = global.WebSocket;
+        global.WebSocket = MockWebSocket;
+    });
+    afterEach(() => {
+        global.WebSocket = originalWebSocket;
+        vi.clearAllMocks();
+    });
+    describe('Connection', () => {
+        it('connects on mount', () => {
+            const { lastFrame } = render(_jsx(WebSocketConsumer, { url: "ws://localhost:3147" }));
+            // Initially connecting
+            expect(lastFrame()).toContain('status:');
+        });
+        it('provides connection status', () => {
+            const { lastFrame } = render(_jsx(WebSocketConsumer, { url: "ws://localhost:3147" }));
+            expect(lastFrame()).toContain('status:');
+        });
+        it('starts in connecting state', () => {
+            const { lastFrame } = render(_jsx(WebSocketConsumer, { url: "ws://localhost:3147" }));
+            expect(lastFrame()).toContain('status:connecting');
+        });
+        it('shows isConnected false initially', () => {
+            const { lastFrame } = render(_jsx(WebSocketConsumer, { url: "ws://localhost:3147" }));
+            expect(lastFrame()).toContain('connected:false');
+        });
+    });
+    describe('Send Messages', () => {
+        it('provides send function via hook', () => {
+            const TestSend = () => {
+                const { send } = useWebSocket('ws://localhost:3147');
+                return _jsxs(Text, { children: ["hasSend:", String(typeof send === 'function')] });
+            };
+            const { lastFrame } = render(_jsx(TestSend, {}));
+            expect(lastFrame()).toContain('hasSend:true');
+        });
+    });
+    describe('Subscribe', () => {
+        it('provides subscribe function', () => {
+            const TestSubscribe = () => {
+                const { subscribe } = useWebSocket('ws://localhost:3147');
+                return _jsxs(Text, { children: ["hasSubscribe:", String(typeof subscribe === 'function')] });
+            };
+            const { lastFrame } = render(_jsx(TestSubscribe, {}));
+            expect(lastFrame()).toContain('hasSubscribe:true');
+        });
+    });
+    describe('Reconnection', () => {
+        it('provides reconnect function', () => {
+            const TestReconnect = () => {
+                const { reconnect } = useWebSocket('ws://localhost:3147');
+                return _jsxs(Text, { children: ["hasReconnect:", String(typeof reconnect === 'function')] });
+            };
+            const { lastFrame } = render(_jsx(TestReconnect, {}));
+            expect(lastFrame()).toContain('hasReconnect:true');
+        });
+    });
+    describe('Disconnect', () => {
+        it('provides disconnect function', () => {
+            const TestDisconnect = () => {
+                const { disconnect } = useWebSocket('ws://localhost:3147');
+                return _jsxs(Text, { children: ["hasDisconnect:", String(typeof disconnect === 'function')] });
+            };
+            const { lastFrame } = render(_jsx(TestDisconnect, {}));
+            expect(lastFrame()).toContain('hasDisconnect:true');
+        });
+    });
+    describe('Error Handling', () => {
+        it('provides error state', () => {
+            const { lastFrame } = render(_jsx(WebSocketConsumer, { url: "ws://localhost:3147" }));
+            expect(lastFrame()).toContain('error:');
+        });
+        it('starts with no error', () => {
+            const { lastFrame } = render(_jsx(WebSocketConsumer, { url: "ws://localhost:3147" }));
+            expect(lastFrame()).toContain('error:null');
+        });
+    });
+});

package/dashboard/dist/stores/projectStore.d.ts

@@ -0,0 +1,44 @@
+export interface ProjectPhase {
+    current: number;
+    total: number;
+    name: string;
+}
+export interface ProjectTests {
+    passing: number;
+    failing: number;
+    total: number;
+}
+export interface Project {
+    id: string;
+    name: string;
+    description: string;
+    phase: ProjectPhase;
+    tests: ProjectTests;
+    coverage: number;
+    lastActivity: string;
+}
+export interface ProjectState {
+    projects: Project[];
+    selectedProject: Project | null;
+    loading: boolean;
+    error: string | null;
+}
+export interface ProjectActions {
+    setProjects: (projects: Project[]) => void;
+    addProject: (project: Project) => void;
+    removeProject: (id: string) => void;
+    updateProject: (id: string, updates: Partial<Project>) => void;
+    selectProject: (id: string) => void;
+    clearSelection: () => void;
+    setLoading: (loading: boolean) => void;
+    setError: (error: string | null) => void;
+    clearError: () => void;
+    getFilteredProjects: (query: string) => Project[];
+}
+export interface ProjectStore {
+    getState: () => ProjectState & ProjectActions;
+    setState: (partial: Partial<ProjectState>) => void;
+    subscribe: (listener: (state: ProjectState & ProjectActions) => void) => () => void;
+}
+export declare function createProjectStore(): ProjectStore;
+export declare const projectStore: ProjectStore;

package/dashboard/dist/stores/projectStore.js

@@ -0,0 +1,76 @@
+// Project Store - manages project list and selection
+export function createProjectStore() {
+    let state = {
+        projects: [],
+        selectedProject: null,
+        loading: false,
+        error: null,
+    };
+    const listeners = new Set();
+    const notify = () => {
+        const fullState = { ...state, ...actions };
+        listeners.forEach(listener => listener(fullState));
+    };
+    const actions = {
+        setProjects: (projects) => {
+            state = { ...state, projects };
+            notify();
+        },
+        addProject: (project) => {
+            state = { ...state, projects: [...state.projects, project] };
+            notify();
+        },
+        removeProject: (id) => {
+            state = { ...state, projects: state.projects.filter(p => p.id !== id) };
+            notify();
+        },
+        updateProject: (id, updates) => {
+            state = {
+                ...state,
+                projects: state.projects.map(p => p.id === id ? { ...p, ...updates } : p),
+            };
+            notify();
+        },
+        selectProject: (id) => {
+            const project = state.projects.find(p => p.id === id) || null;
+            state = { ...state, selectedProject: project };
+            notify();
+        },
+        clearSelection: () => {
+            state = { ...state, selectedProject: null };
+            notify();
+        },
+        setLoading: (loading) => {
+            state = { ...state, loading };
+            notify();
+        },
+        setError: (error) => {
+            state = { ...state, error };
+            notify();
+        },
+        clearError: () => {
+            state = { ...state, error: null };
+            notify();
+        },
+        getFilteredProjects: (query) => {
+            if (!query)
+                return state.projects;
+            const lowerQuery = query.toLowerCase();
+            return state.projects.filter(p => p.name.toLowerCase().includes(lowerQuery) ||
+                p.description.toLowerCase().includes(lowerQuery));
+        },
+    };
+    return {
+        getState: () => ({ ...state, ...actions }),
+        setState: (partial) => {
+            state = { ...state, ...partial };
+            notify();
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+// Default singleton instance
+export const projectStore = createProjectStore();

package/dashboard/dist/stores/projectStore.test.d.ts

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