tlc-claude-code 1.4.1 → 1.4.4

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

package/dashboard/dist/stores/projectStore.test.js

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createProjectStore } from './projectStore.js';
+const sampleProjects = [
+    {
+        id: '1',
+        name: 'TLC',
+        description: 'Test-Led Coding framework',
+        phase: { current: 33, total: 40, name: 'Multi-Model Router' },
+        tests: { passing: 1180, failing: 20, total: 1200 },
+        coverage: 87,
+        lastActivity: '2 min ago',
+    },
+    {
+        id: '2',
+        name: 'Other Project',
+        description: 'Another project',
+        phase: { current: 1, total: 5, name: 'Setup' },
+        tests: { passing: 10, failing: 0, total: 10 },
+        coverage: 100,
+        lastActivity: '1 hour ago',
+    },
+];
+describe('projectStore', () => {
+    let store;
+    beforeEach(() => {
+        store = createProjectStore();
+    });
+    describe('Projects List', () => {
+        it('starts with empty projects', () => {
+            expect(store.getState().projects).toEqual([]);
+        });
+        it('sets projects', () => {
+            store.getState().setProjects(sampleProjects);
+            expect(store.getState().projects).toEqual(sampleProjects);
+        });
+        it('adds a project', () => {
+            store.getState().addProject(sampleProjects[0]);
+            expect(store.getState().projects).toHaveLength(1);
+        });
+        it('removes a project', () => {
+            store.getState().setProjects(sampleProjects);
+            store.getState().removeProject('1');
+            expect(store.getState().projects).toHaveLength(1);
+            expect(store.getState().projects[0].id).toBe('2');
+        });
+        it('updates a project', () => {
+            store.getState().setProjects(sampleProjects);
+            store.getState().updateProject('1', { coverage: 95 });
+            expect(store.getState().projects[0].coverage).toBe(95);
+        });
+    });
+    describe('Selected Project', () => {
+        it('starts with no selected project', () => {
+            expect(store.getState().selectedProject).toBeNull();
+        });
+        it('selects project by ID', () => {
+            store.getState().setProjects(sampleProjects);
+            store.getState().selectProject('1');
+            expect(store.getState().selectedProject?.id).toBe('1');
+        });
+        it('clears selection', () => {
+            store.getState().setProjects(sampleProjects);
+            store.getState().selectProject('1');
+            store.getState().clearSelection();
+            expect(store.getState().selectedProject).toBeNull();
+        });
+        it('returns null for non-existent ID', () => {
+            store.getState().setProjects(sampleProjects);
+            store.getState().selectProject('nonexistent');
+            expect(store.getState().selectedProject).toBeNull();
+        });
+    });
+    describe('Loading State', () => {
+        it('starts not loading', () => {
+            expect(store.getState().loading).toBe(false);
+        });
+        it('sets loading state', () => {
+            store.getState().setLoading(true);
+            expect(store.getState().loading).toBe(true);
+        });
+    });
+    describe('Error State', () => {
+        it('starts with no error', () => {
+            expect(store.getState().error).toBeNull();
+        });
+        it('sets error', () => {
+            store.getState().setError('Failed to load');
+            expect(store.getState().error).toBe('Failed to load');
+        });
+        it('clears error', () => {
+            store.getState().setError('Error');
+            store.getState().clearError();
+            expect(store.getState().error).toBeNull();
+        });
+    });
+    describe('Filtering', () => {
+        it('filters by search query', () => {
+            store.getState().setProjects(sampleProjects);
+            const filtered = store.getState().getFilteredProjects('TLC');
+            expect(filtered).toHaveLength(1);
+            expect(filtered[0].name).toBe('TLC');
+        });
+        it('returns all when no filter', () => {
+            store.getState().setProjects(sampleProjects);
+            const filtered = store.getState().getFilteredProjects('');
+            expect(filtered).toHaveLength(2);
+        });
+        it('is case insensitive', () => {
+            store.getState().setProjects(sampleProjects);
+            const filtered = store.getState().getFilteredProjects('tlc');
+            expect(filtered).toHaveLength(1);
+        });
+    });
+});

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

@@ -0,0 +1,29 @@
+export type Theme = 'dark' | 'light';
+export type ViewName = 'projects' | 'tasks' | 'chat' | 'agents' | 'preview' | 'logs' | 'github' | 'health' | 'router' | 'settings';
+export interface UIState {
+    theme: Theme;
+    sidebarOpen: boolean;
+    activeView: ViewName;
+    commandPaletteOpen: boolean;
+    helpOpen: boolean;
+    isMobile: boolean;
+}
+export interface UIActions {
+    toggleTheme: () => void;
+    setTheme: (theme: Theme) => void;
+    toggleSidebar: () => void;
+    setSidebarOpen: (open: boolean) => void;
+    setActiveView: (view: ViewName | string) => void;
+    openCommandPalette: () => void;
+    closeCommandPalette: () => void;
+    toggleCommandPalette: () => void;
+    toggleHelp: () => void;
+    setMobile: (isMobile: boolean) => void;
+}
+export interface UIStore {
+    getState: () => UIState & UIActions;
+    setState: (partial: Partial<UIState>) => void;
+    subscribe: (listener: (state: UIState & UIActions) => void) => () => void;
+}
+export declare function createUIStore(): UIStore;
+export declare const uiStore: UIStore;

package/dashboard/dist/stores/uiStore.js

@@ -0,0 +1,72 @@
+// UI Store - manages UI state like theme, sidebar, active view
+// Using a simple store pattern (compatible with Zustand interface)
+export function createUIStore() {
+    let state = {
+        theme: 'dark',
+        sidebarOpen: true,
+        activeView: 'projects',
+        commandPaletteOpen: false,
+        helpOpen: false,
+        isMobile: false,
+    };
+    const listeners = new Set();
+    const notify = () => {
+        const fullState = { ...state, ...actions };
+        listeners.forEach(listener => listener(fullState));
+    };
+    const actions = {
+        toggleTheme: () => {
+            state = { ...state, theme: state.theme === 'dark' ? 'light' : 'dark' };
+            notify();
+        },
+        setTheme: (theme) => {
+            state = { ...state, theme };
+            notify();
+        },
+        toggleSidebar: () => {
+            state = { ...state, sidebarOpen: !state.sidebarOpen };
+            notify();
+        },
+        setSidebarOpen: (open) => {
+            state = { ...state, sidebarOpen: open };
+            notify();
+        },
+        setActiveView: (view) => {
+            state = { ...state, activeView: view };
+            notify();
+        },
+        openCommandPalette: () => {
+            state = { ...state, commandPaletteOpen: true };
+            notify();
+        },
+        closeCommandPalette: () => {
+            state = { ...state, commandPaletteOpen: false };
+            notify();
+        },
+        toggleCommandPalette: () => {
+            state = { ...state, commandPaletteOpen: !state.commandPaletteOpen };
+            notify();
+        },
+        toggleHelp: () => {
+            state = { ...state, helpOpen: !state.helpOpen };
+            notify();
+        },
+        setMobile: (isMobile) => {
+            state = { ...state, isMobile };
+            notify();
+        },
+    };
+    return {
+        getState: () => ({ ...state, ...actions }),
+        setState: (partial) => {
+            state = { ...state, ...partial };
+            notify();
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+// Default singleton instance
+export const uiStore = createUIStore();

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

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

package/dashboard/dist/stores/uiStore.test.js

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createUIStore } from './uiStore.js';
+describe('uiStore', () => {
+    let store;
+    beforeEach(() => {
+        store = createUIStore();
+    });
+    describe('Theme', () => {
+        it('defaults to dark theme', () => {
+            expect(store.getState().theme).toBe('dark');
+        });
+        it('toggles theme from dark to light', () => {
+            store.getState().toggleTheme();
+            expect(store.getState().theme).toBe('light');
+        });
+        it('toggles theme from light to dark', () => {
+            store.getState().setTheme('light');
+            store.getState().toggleTheme();
+            expect(store.getState().theme).toBe('dark');
+        });
+        it('sets theme directly', () => {
+            store.getState().setTheme('light');
+            expect(store.getState().theme).toBe('light');
+        });
+    });
+    describe('Sidebar', () => {
+        it('defaults to sidebar open', () => {
+            expect(store.getState().sidebarOpen).toBe(true);
+        });
+        it('toggles sidebar', () => {
+            store.getState().toggleSidebar();
+            expect(store.getState().sidebarOpen).toBe(false);
+        });
+        it('sets sidebar state directly', () => {
+            store.getState().setSidebarOpen(false);
+            expect(store.getState().sidebarOpen).toBe(false);
+        });
+    });
+    describe('Active View', () => {
+        it('defaults to projects view', () => {
+            expect(store.getState().activeView).toBe('projects');
+        });
+        it('sets active view', () => {
+            store.getState().setActiveView('tasks');
+            expect(store.getState().activeView).toBe('tasks');
+        });
+        it('accepts valid view names', () => {
+            const views = ['projects', 'tasks', 'chat', 'agents', 'logs', 'settings'];
+            views.forEach(view => {
+                store.getState().setActiveView(view);
+                expect(store.getState().activeView).toBe(view);
+            });
+        });
+    });
+    describe('Command Palette', () => {
+        it('defaults to command palette closed', () => {
+            expect(store.getState().commandPaletteOpen).toBe(false);
+        });
+        it('opens command palette', () => {
+            store.getState().openCommandPalette();
+            expect(store.getState().commandPaletteOpen).toBe(true);
+        });
+        it('closes command palette', () => {
+            store.getState().openCommandPalette();
+            store.getState().closeCommandPalette();
+            expect(store.getState().commandPaletteOpen).toBe(false);
+        });
+        it('toggles command palette', () => {
+            store.getState().toggleCommandPalette();
+            expect(store.getState().commandPaletteOpen).toBe(true);
+            store.getState().toggleCommandPalette();
+            expect(store.getState().commandPaletteOpen).toBe(false);
+        });
+    });
+    describe('Help Modal', () => {
+        it('defaults to help modal closed', () => {
+            expect(store.getState().helpOpen).toBe(false);
+        });
+        it('toggles help modal', () => {
+            store.getState().toggleHelp();
+            expect(store.getState().helpOpen).toBe(true);
+        });
+    });
+    describe('Mobile Mode', () => {
+        it('defaults to desktop mode', () => {
+            expect(store.getState().isMobile).toBe(false);
+        });
+        it('sets mobile mode', () => {
+            store.getState().setMobile(true);
+            expect(store.getState().isMobile).toBe(true);
+        });
+    });
+});

package/dashboard/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "tdd-dashboard",
+  "name": "tlc-dashboard",
   "version": "0.1.0",
-  "description": "TUI dashboard for TDD workflow",
+  "description": "TUI dashboard for TLC (Test-Led Coding) workflow",
   "type": "module",
   "bin": {
-    "tdd-dashboard": "./dist/index.js"
+    "tlc-dashboard": "./dist/index.js"
   },
   "scripts": {
     "dev": "tsx src/index.tsx",

package/docker-compose.dev.yml

@@ -99,7 +99,12 @@ services:
     image: node:20-alpine
     container_name: tlc-${COMPOSE_PROJECT_NAME:-dev}-dashboard
     working_dir: /project
-    command: sh -c "cd /tlc/server && npm install && cd /project && node /tlc/server/index.js --proxy-only"
+    command: >
+      sh -c "
+        cd /tlc/dashboard && npm install && npm run build &&
+        cd /tlc/server && npm install &&
+        cd /project && node /tlc/server/index.js --proxy-only
+      "
     environment:
       - TLC_PORT=3147
       - TLC_PROXY_ONLY=true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlc-claude-code",
-  "version": "1.4.1",
+  "version": "1.4.4",
   "description": "TLC - Test Led Coding for Claude Code",
   "bin": {
     "tlc": "./bin/tlc.js",
@@ -33,7 +33,9 @@
     "docs": "node scripts/docs-update.js",
     "docs:check": "node scripts/docs-update.js --check",
     "docs:screenshots": "node scripts/generate-screenshots.js",
-    "docs:capture": "node scripts/capture-screenshots.js"
+    "docs:capture": "node scripts/capture-screenshots.js",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui"
   },
   "repository": {
     "type": "git",
@@ -50,6 +52,7 @@
   "author": "Jurgen Calleja",
   "license": "MIT",
   "devDependencies": {
+    "@playwright/test": "^1.58.1",
     "playwright": "^1.58.1",
     "text-to-image": "^8.0.1"
   }