tlc-claude-code 1.4.1 → 1.4.4

package/dashboard/dist/components/ui/Skeleton.test.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Skeleton } from './Skeleton.js';
+describe('Skeleton', () => {
+    describe('Basic Rendering', () => {
+        it('renders placeholder content', () => {
+            const { lastFrame } = render(_jsx(Skeleton, {}));
+            expect(lastFrame()).toBeDefined();
+            // Should render some placeholder characters
+            expect(lastFrame()?.length).toBeGreaterThan(0);
+        });
+        it('renders with custom width', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { width: 20 }));
+            expect(lastFrame()).toBeDefined();
+        });
+        it('renders with custom height', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { height: 3 }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Variants', () => {
+        it('renders text variant', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "text" }));
+            expect(lastFrame()).toBeDefined();
+        });
+        it('renders text variant with multiple lines', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "text", lines: 3 }));
+            const output = lastFrame() || '';
+            // Should have multiple lines
+            const lineCount = output.split('\n').filter(l => l.trim()).length;
+            expect(lineCount).toBeGreaterThanOrEqual(1);
+        });
+        it('renders avatar variant (circle)', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "avatar" }));
+            expect(lastFrame()).toBeDefined();
+        });
+        it('renders avatar with size', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "avatar", size: 4 }));
+            expect(lastFrame()).toBeDefined();
+        });
+        it('renders card variant', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "card" }));
+            const output = lastFrame() || '';
+            // Card should have border
+            expect(output).toMatch(/[─│┌┐└┘╭╮╰╯┬┴┤├]/);
+        });
+        it('renders button variant', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "button" }));
+            const output = lastFrame() || '';
+            // Button should have brackets or border
+            expect(output).toMatch(/[\[\]│─]/);
+        });
+        it('renders table-row variant', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "table-row", columns: 3 }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Animation', () => {
+        it('uses shimmer/pulse characters', () => {
+            const { lastFrame } = render(_jsx(Skeleton, {}));
+            const output = lastFrame() || '';
+            // Should use placeholder characters like ░, ▒, ▓, ▀, ▄, █, ▌, ▐, or spaces
+            expect(output).toMatch(/[░▒▓▀▄█▌▐ ]/);
+        });
+    });
+    describe('Rounded', () => {
+        it('accepts rounded prop', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { rounded: true }));
+            expect(lastFrame()).toBeDefined();
+        });
+        it('uses rounded corners when rounded', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { variant: "card", rounded: true }));
+            const output = lastFrame() || '';
+            // Should use rounded corner characters
+            expect(output).toMatch(/[╭╮╰╯┌┐└┘]/);
+        });
+    });
+    describe('Custom Styling', () => {
+        it('accepts className/style props', () => {
+            const { lastFrame } = render(_jsx(Skeleton, { width: 10, height: 2 }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+});
+describe('Skeleton.Text', () => {
+    it('renders text skeleton shorthand', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Text, {}));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('renders multiple lines', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Text, { lines: 2 }));
+        expect(lastFrame()).toBeDefined();
+    });
+});
+describe('Skeleton.Avatar', () => {
+    it('renders avatar skeleton shorthand', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Avatar, {}));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('accepts size prop', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Avatar, { size: 3 }));
+        expect(lastFrame()).toBeDefined();
+    });
+});
+describe('Skeleton.Card', () => {
+    it('renders card skeleton shorthand', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Card, {}));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('accepts dimensions', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Card, { width: 30, height: 5 }));
+        expect(lastFrame()).toBeDefined();
+    });
+});
+describe('Skeleton.Button', () => {
+    it('renders button skeleton shorthand', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Button, {}));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('accepts width prop', () => {
+        const { lastFrame } = render(_jsx(Skeleton.Button, { width: 15 }));
+        expect(lastFrame()).toBeDefined();
+    });
+});

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

@@ -0,0 +1,32 @@
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastProps {
+    variant: ToastVariant;
+    message: string;
+    title?: string;
+    dismissable?: boolean;
+    onDismiss?: () => void;
+    actions?: ToastAction[];
+}
+export interface ToastData {
+    id: string;
+    variant: ToastVariant;
+    message: string;
+    title?: string;
+    dismissable?: boolean;
+    duration?: number;
+    actions?: ToastAction[];
+}
+export interface ToastContainerProps {
+    toasts: ToastData[];
+    onDismiss?: (id: string) => void;
+    position?: ToastPosition;
+    maxVisible?: number;
+}
+export declare function Toast({ variant, message, title, dismissable, onDismiss, actions, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastContainer({ toasts, onDismiss, position, maxVisible, }: ToastContainerProps): import("react/jsx-runtime").JSX.Element | null;
+export default Toast;

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

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const variantConfig = {
+    success: { icon: '✓', color: 'green' },
+    error: { icon: '✕', color: 'red' },
+    warning: { icon: '⚠', color: 'yellow' },
+    info: { icon: 'ℹ', color: 'blue' },
+};
+export function Toast({ variant, message, title, dismissable = true, onDismiss, actions, }) {
+    const config = variantConfig[variant];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: config.color, paddingX: 1, marginBottom: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsxs(Text, { color: config.color, children: [config.icon, " "] }), title ? (_jsx(Text, { bold: true, color: config.color, children: title })) : (_jsx(Text, { bold: true, color: config.color, children: variant }))] }), dismissable && (_jsx(Text, { color: "gray", children: "\u00D7" }))] }), _jsx(Box, { marginTop: title ? 1 : 0, children: _jsx(Text, { children: message }) }), actions && actions.length > 0 && (_jsx(Box, { marginTop: 1, children: actions.map((action, idx) => (_jsx(Box, { marginRight: 2, children: _jsxs(Text, { color: "cyan", children: ["[", action.label, "]"] }) }, idx))) }))] }));
+}
+export function ToastContainer({ toasts, onDismiss, position = 'top-right', maxVisible = 5, }) {
+    if (toasts.length === 0) {
+        return null;
+    }
+    const visibleToasts = toasts.slice(0, maxVisible);
+    const hiddenCount = toasts.length - maxVisible;
+    return (_jsxs(Box, { flexDirection: "column", children: [visibleToasts.map(toast => (_jsx(Toast, { variant: toast.variant, message: toast.message, title: toast.title, dismissable: toast.dismissable ?? true, onDismiss: () => onDismiss?.(toast.id), actions: toast.actions }, toast.id))), hiddenCount > 0 && (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["+", hiddenCount, " more..."] }) }))] }));
+}
+export default Toast;

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

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

package/dashboard/dist/components/ui/Toast.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 { Toast, ToastContainer } from './Toast.js';
+describe('Toast', () => {
+    describe('Variants', () => {
+        it('renders success variant', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "success", message: "Success message" }));
+            expect(lastFrame()).toContain('Success message');
+            expect(lastFrame()).toMatch(/✓|✔|success/i);
+        });
+        it('renders error variant', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "error", message: "Error message" }));
+            expect(lastFrame()).toContain('Error message');
+            expect(lastFrame()).toMatch(/✕|✖|×|error/i);
+        });
+        it('renders warning variant', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "warning", message: "Warning message" }));
+            expect(lastFrame()).toContain('Warning message');
+            expect(lastFrame()).toMatch(/⚠|warning/i);
+        });
+        it('renders info variant', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "info", message: "Info message" }));
+            expect(lastFrame()).toContain('Info message');
+            expect(lastFrame()).toMatch(/ℹ|info/i);
+        });
+    });
+    describe('Dismiss', () => {
+        it('shows dismiss button when dismissable', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "info", message: "Test", dismissable: true }));
+            expect(lastFrame()).toMatch(/×|X|close|esc/i);
+        });
+        it('calls onDismiss when dismissed', () => {
+            const onDismiss = vi.fn();
+            render(_jsx(Toast, { variant: "info", message: "Test", dismissable: true, onDismiss: onDismiss }));
+            expect(onDismiss).toBeDefined();
+        });
+        it('hides dismiss button when not dismissable', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "info", message: "Test", dismissable: false }));
+            expect(lastFrame()).toContain('Test');
+        });
+    });
+    describe('Title', () => {
+        it('renders title when provided', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "success", message: "Body text", title: "My Title" }));
+            expect(lastFrame()).toContain('My Title');
+            expect(lastFrame()).toContain('Body text');
+        });
+    });
+    describe('Actions', () => {
+        it('renders action buttons', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "info", message: "Test", actions: [{ label: 'Undo', onClick: () => { } }] }));
+            expect(lastFrame()).toContain('Undo');
+        });
+    });
+});
+describe('ToastContainer', () => {
+    describe('Rendering', () => {
+        it('renders multiple toasts', () => {
+            const toasts = [
+                { id: '1', variant: 'success', message: 'Toast 1' },
+                { id: '2', variant: 'error', message: 'Toast 2' },
+            ];
+            const { lastFrame } = render(_jsx(ToastContainer, { toasts: toasts }));
+            expect(lastFrame()).toContain('Toast 1');
+            expect(lastFrame()).toContain('Toast 2');
+        });
+        it('renders empty when no toasts', () => {
+            const { lastFrame } = render(_jsx(ToastContainer, { toasts: [] }));
+            // Should render but be empty or minimal
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Position', () => {
+        it('renders in top-right by default', () => {
+            const toasts = [{ id: '1', variant: 'info', message: 'Test' }];
+            const { lastFrame } = render(_jsx(ToastContainer, { toasts: toasts }));
+            expect(lastFrame()).toContain('Test');
+        });
+        it('accepts position prop', () => {
+            const toasts = [{ id: '1', variant: 'info', message: 'Test' }];
+            const { lastFrame } = render(_jsx(ToastContainer, { toasts: toasts, position: "bottom-left" }));
+            expect(lastFrame()).toContain('Test');
+        });
+    });
+    describe('Stacking', () => {
+        it('stacks toasts vertically', () => {
+            const toasts = [
+                { id: '1', variant: 'success', message: 'First' },
+                { id: '2', variant: 'info', message: 'Second' },
+                { id: '3', variant: 'warning', message: 'Third' },
+            ];
+            const { lastFrame } = render(_jsx(ToastContainer, { toasts: toasts }));
+            const output = lastFrame() || '';
+            expect(output).toContain('First');
+            expect(output).toContain('Second');
+            expect(output).toContain('Third');
+        });
+        it('limits visible toasts', () => {
+            const toasts = Array.from({ length: 10 }, (_, i) => ({
+                id: String(i),
+                variant: 'info',
+                message: `Toast ${i}`,
+            }));
+            const { lastFrame } = render(_jsx(ToastContainer, { toasts: toasts, maxVisible: 3 }));
+            // Should show max toasts or "+N more" indicator
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Callbacks', () => {
+        it('calls onDismiss with toast id', () => {
+            const onDismiss = vi.fn();
+            const toasts = [{ id: '1', variant: 'info', message: 'Test' }];
+            render(_jsx(ToastContainer, { toasts: toasts, onDismiss: onDismiss }));
+            expect(onDismiss).toBeDefined();
+        });
+    });
+});

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 {};