tlc-claude-code 1.4.4 → 1.4.5

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { EmptyState } from './EmptyState.js';
+describe('EmptyState', () => {
+    describe('Type-specific defaults', () => {
+        it('renders tasks empty state with default messages', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "tasks" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No tasks yet');
+            expect(output).toContain('/tlc:plan');
+        });
+        it('renders bugs empty state', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "bugs" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No bugs reported');
+            expect(output).toContain('/tlc:bug');
+        });
+        it('renders agents empty state', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "agents" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No agents running');
+            expect(output).toContain('spawned');
+        });
+        it('renders logs empty state', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "logs" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No logs yet');
+            expect(output).toContain('activity');
+        });
+        it('renders projects empty state', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "projects" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No projects');
+            expect(output).toContain('tlc init');
+        });
+        it('renders health empty state', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "health" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No health data');
+            expect(output).toContain('/tlc:security');
+        });
+        it('renders router empty state', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "router" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No router configured');
+            expect(output).toContain('.tlc.json');
+        });
+        it('renders generic empty state as default', () => {
+            const { lastFrame } = render(_jsx(EmptyState, {}));
+            const output = lastFrame() || '';
+            expect(output).toContain('Nothing here');
+            expect(output).toContain('No items');
+        });
+    });
+    describe('Custom messages', () => {
+        it('uses custom title when provided', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "tasks", title: "Custom Title" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Custom Title');
+            expect(output).not.toContain('No tasks yet');
+        });
+        it('uses custom subtitle when provided', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "tasks", subtitle: "Custom subtitle" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Custom subtitle');
+            expect(output).not.toContain('/tlc:plan');
+        });
+        it('shows action hint when provided', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "generic", action: "Press Enter to add" }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Press Enter to add');
+        });
+    });
+    describe('Compact mode', () => {
+        it('renders compact state with title only', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "tasks", compact: true }));
+            const output = lastFrame() || '';
+            expect(output).toContain('No tasks yet');
+            // Should be shorter than full version
+            expect(output.split('\n').length).toBeLessThan(5);
+        });
+        it('hides subtitle in compact mode', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "tasks", compact: true }));
+            const output = lastFrame() || '';
+            expect(output).not.toContain('/tlc:plan');
+        });
+    });
+    describe('Icons', () => {
+        it('shows an icon', () => {
+            const { lastFrame } = render(_jsx(EmptyState, { type: "tasks" }));
+            const output = lastFrame() || '';
+            // Should contain some icon character
+            expect(output.length).toBeGreaterThan(0);
+        });
+    });
+});

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

@@ -0,0 +1,17 @@
+import type { FetchError } from '../../api/safeFetch.js';
+export interface ErrorInfo {
+    title: string;
+    message: string;
+    hint?: string;
+}
+export interface ErrorStateProps {
+    error: FetchError;
+    onRetry?: () => void;
+    compact?: boolean;
+}
+/**
+ * Renders a user-friendly error state with optional retry button.
+ * Maps technical errors to helpful messages with actionable hints.
+ */
+export declare function ErrorState({ error, onRetry, compact }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export default ErrorState;

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * Maps error types to user-friendly messages with actionable hints
+ */
+const ERROR_MESSAGES = {
+    'http-404': {
+        title: 'Not Set Up',
+        message: 'This feature needs configuration.',
+        hint: 'Run tlc setup',
+    },
+    'http-401': {
+        title: 'Not Authorized',
+        message: 'Authentication required.',
+        hint: 'Check your credentials',
+    },
+    'http-403': {
+        title: 'Access Denied',
+        message: 'You do not have permission.',
+    },
+    'http-500': {
+        title: 'Server Error',
+        message: 'Something went wrong on the server.',
+    },
+    'http-502': {
+        title: 'Bad Gateway',
+        message: 'The server is unreachable.',
+        hint: 'Check if tlc server is running',
+    },
+    'http-503': {
+        title: 'Service Unavailable',
+        message: 'The server is temporarily unavailable.',
+    },
+    network: {
+        title: 'Connection Lost',
+        message: 'Cannot reach the server.',
+        hint: 'Check if tlc server is running',
+    },
+    timeout: {
+        title: 'Request Timeout',
+        message: 'The server took too long to respond.',
+        hint: 'Try again or check server health',
+    },
+    parse: {
+        title: 'Invalid Response',
+        message: 'The server returned unexpected data.',
+    },
+    unknown: {
+        title: 'Unknown Error',
+        message: 'An unexpected error occurred.',
+    },
+};
+function getErrorInfo(error) {
+    // Check for specific HTTP error codes
+    if (error.type === 'http' && error.code) {
+        const key = `http-${error.code}`;
+        if (key in ERROR_MESSAGES) {
+            return ERROR_MESSAGES[key];
+        }
+        // Default HTTP error
+        return {
+            title: `HTTP Error ${error.code}`,
+            message: error.message,
+        };
+    }
+    // Check for other error types
+    return ERROR_MESSAGES[error.type] || ERROR_MESSAGES.unknown;
+}
+/**
+ * Renders a user-friendly error state with optional retry button.
+ * Maps technical errors to helpful messages with actionable hints.
+ */
+export function ErrorState({ error, onRetry, compact = false }) {
+    const info = getErrorInfo(error);
+    if (compact) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "red", children: info.title }), onRetry && _jsx(Text, { dimColor: true, children: " [r] retry" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", paddingY: 2, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: "\u26A0" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "red", bold: true, children: info.title }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", children: info.message }) }), info.hint && (_jsx(Box, { marginBottom: 1, paddingX: 1, borderStyle: "single", borderColor: "gray", children: _jsx(Text, { dimColor: true, children: info.hint }) })), onRetry && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "cyan", children: "[r] Retry" }) }))] }));
+}
+export default ErrorState;

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

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

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

@@ -0,0 +1,166 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ErrorState } from './ErrorState.js';
+describe('ErrorState', () => {
+    describe('HTTP Errors', () => {
+        it('renders 404 not found with setup hint', () => {
+            const error = {
+                type: 'http',
+                code: 404,
+                message: 'HTTP 404: Not Found',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Not Set Up');
+            expect(output).toContain('needs configuration');
+            expect(output).toContain('tlc setup');
+        });
+        it('renders 500 server error', () => {
+            const error = {
+                type: 'http',
+                code: 500,
+                message: 'HTTP 500: Internal Server Error',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Server Error');
+            expect(output).toContain('wrong on the server');
+        });
+        it('renders 401 unauthorized', () => {
+            const error = {
+                type: 'http',
+                code: 401,
+                message: 'HTTP 401: Unauthorized',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Not Authorized');
+            expect(output).toContain('Authentication');
+        });
+        it('renders 403 forbidden', () => {
+            const error = {
+                type: 'http',
+                code: 403,
+                message: 'HTTP 403: Forbidden',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Access Denied');
+        });
+        it('renders unknown HTTP error with code', () => {
+            const error = {
+                type: 'http',
+                code: 418,
+                message: "HTTP 418: I'm a teapot",
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('HTTP Error 418');
+        });
+    });
+    describe('Network Errors', () => {
+        it('renders network error with server hint', () => {
+            const error = {
+                type: 'network',
+                message: 'Cannot reach the server',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Connection Lost');
+            expect(output).toContain('Cannot reach');
+            expect(output).toContain('tlc server');
+        });
+    });
+    describe('Timeout Errors', () => {
+        it('renders timeout error', () => {
+            const error = {
+                type: 'timeout',
+                message: 'Request timed out',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Request Timeout');
+            expect(output).toContain('too long');
+        });
+    });
+    describe('Parse Errors', () => {
+        it('renders parse error', () => {
+            const error = {
+                type: 'parse',
+                message: 'Invalid response from server',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Invalid Response');
+            expect(output).toContain('unexpected data');
+        });
+    });
+    describe('Unknown Errors', () => {
+        it('renders unknown error', () => {
+            const error = {
+                type: 'unknown',
+                message: 'Something went wrong',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Unknown Error');
+            expect(output).toContain('unexpected error');
+        });
+    });
+    describe('Retry Button', () => {
+        it('shows retry button when onRetry provided', () => {
+            const error = {
+                type: 'network',
+                message: 'Network error',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error, onRetry: () => { } }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Retry');
+        });
+        it('hides retry button when no onRetry', () => {
+            const error = {
+                type: 'network',
+                message: 'Network error',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            expect(output).not.toContain('[r] Retry');
+        });
+    });
+    describe('Compact Mode', () => {
+        it('renders compact error with title only', () => {
+            const error = {
+                type: 'http',
+                code: 500,
+                message: 'HTTP 500: Internal Server Error',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error, compact: true }));
+            const output = lastFrame() || '';
+            expect(output).toContain('Server Error');
+            // Should be shorter than full version
+            expect(output.split('\n').length).toBeLessThan(5);
+        });
+        it('shows compact retry hint', () => {
+            const error = {
+                type: 'network',
+                message: 'Network error',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error, onRetry: () => { }, compact: true }));
+            const output = lastFrame() || '';
+            expect(output).toContain('[r] retry');
+        });
+    });
+    describe('Error Icon', () => {
+        it('shows warning icon', () => {
+            const error = {
+                type: 'unknown',
+                message: 'Error',
+            };
+            const { lastFrame } = render(_jsx(ErrorState, { error: error }));
+            const output = lastFrame() || '';
+            // Warning triangle unicode or similar
+            expect(output.length).toBeGreaterThan(0);
+        });
+    });
+});

package/dashboard/package.json

@@ -10,6 +10,7 @@
     "dev": "tsx src/index.tsx",
     "build": "tsc",
     "start": "node dist/index.js",
+    "server": "node server/index.js",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"
@@ -17,6 +18,7 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "dockerode": "^4.0.2",
+    "express": "^4.22.1",
     "ink": "^5.0.1",
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",
@@ -32,6 +34,7 @@
     "ink-testing-library": "^4.0.0",
     "jsdom": "^27.4.0",
     "memfs": "^4.56.10",
+    "supertest": "^7.2.2",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",
     "vitest": "^4.0.18"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlc-claude-code",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "TLC - Test Led Coding for Claude Code",
   "bin": {
     "tlc": "./bin/tlc.js",

package/server/dashboard/index.html

@@ -68,6 +68,19 @@
     }
     .status-dot.connected { background: #3fb950; }
     .status-dot.disconnected { background: #f85149; }
+
+    /* Connection Banner */
+    .connection-banner {
+      background: #f85149;
+      color: white;
+      padding: 8px 16px;
+      text-align: center;
+      font-size: 13px;
+      display: none;
+    }
+    .connection-banner.visible {
+      display: block;
+    }
     .version {
       font-size: 12px;
       color: #6e7681;
@@ -909,6 +922,18 @@
     .split-view > div {
       flex: 1;
     }
+
+    /* Toast Animation */
+    @keyframes slideIn {
+      from {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
   </style>
 </head>
 <body>
@@ -930,6 +955,11 @@
       </div>
     </header>
 
+    <!-- Connection Banner -->
+    <div id="connection-banner" class="connection-banner">
+      Connection lost. Reconnecting...
+    </div>
+
     <div class="container">
       <!-- Sidebar -->
       <nav class="sidebar" id="sidebar">
@@ -1532,36 +1562,203 @@
           Object.assign(logs, msg.data.logs || {});
           if (msg.data.appPort) updateAppPort(msg.data.appPort);
           renderLogs();
+          refreshAll(); // Refresh all panels on connect
           break;
-        case 'app-start':
-          if (msg.data.port) {
-            updateAppPort(msg.data.port);
-            reloadPreview();
+
+        case 'task-created':
+          // Add task to pending column
+          addTaskToPanel(msg.data, 'pending');
+          showToast('New task created', 'info');
+          break;
+
+        case 'task-updated':
+        case 'task-update':
+          // Update task board
+          if (currentView === 'tasks') {
+            refreshTasks();
           }
           break;
-        case 'app-log':
-          addLog('app', msg.data.data, msg.data.level || detectLogLevel(msg.data.data));
+
+        case 'bug-created':
+          showToast(`Bug ${msg.data.bugId || ''} reported`, 'info');
+          break;
+
+        case 'bug-update':
+          // Refresh bugs if needed
+          break;
+
+        case 'test-start':
+          addLog('test', '--- Test run started ---', 'info');
           break;
+
         case 'test-output':
           addLog('test', msg.data.data, msg.data.stream === 'stderr' ? 'error' : '');
           break;
+
         case 'test-complete':
           const result = msg.data.exitCode === 0 ? 'passed' : 'failed';
           addLog('test', `Tests ${result}`, msg.data.exitCode === 0 ? 'success' : 'error');
-          refreshStats();
+          refreshStats(); // Update test counts
+          break;
+
+        case 'health-update':
+          updateHealthPanel(msg.data);
+          break;
+
+        case 'agent-created':
+        case 'agent-updated':
+          if (currentView === 'agents') {
+            refreshAgents();
+          }
+          break;
+
+        case 'app-start':
+          if (msg.data.port) {
+            updateAppPort(msg.data.port);
+            reloadPreview();
+          }
+          addLog('app', `App started on port ${msg.data.port}`, 'success');
+          break;
+
+        case 'app-log':
+          addLog('app', msg.data.data, msg.data.level || detectLogLevel(msg.data.data));
           break;
+
         case 'git-activity':
           addLog('git', msg.data.entry, 'info');
-          refreshGitHub();
+          if (currentView === 'github') {
+            refreshGitHub();
+          }
+          break;
+
+        case 'file-change':
+          addLog('app', `File changed: ${msg.data.path}`, 'info');
           break;
       }
     }
 
+    // Helper: Add task to panel (real-time)
+    function addTaskToPanel(task, status) {
+      const containerId = `tasks-${status.replace('_', '-')}`;
+      const container = document.getElementById(containerId);
+      if (!container) return;
+
+      // Remove empty state if present
+      const emptyState = container.querySelector('.empty-state');
+      if (emptyState) emptyState.remove();
+
+      const taskEl = document.createElement('div');
+      taskEl.className = 'task-item';
+      taskEl.id = `task-${task.id}`;
+      taskEl.innerHTML = `
+        <div class="task-title">${escapeHtml(task.title)}</div>
+        <div class="task-meta">${task.owner ? '@' + escapeHtml(task.owner) : 'Unassigned'}</div>
+      `;
+      container.insertBefore(taskEl, container.firstChild);
+    }
+
+    // Helper: Update health panel (real-time)
+    function updateHealthPanel(data) {
+      if (data.memory) {
+        const memEl = document.getElementById('health-memory');
+        if (memEl) memEl.textContent = Math.round(data.memory / 1024 / 1024) + ' MB';
+      }
+      if (data.cpu !== undefined) {
+        const cpuEl = document.getElementById('health-cpu');
+        if (cpuEl) cpuEl.textContent = data.cpu + '%';
+      }
+      if (data.status) {
+        const statusEl = document.getElementById('health-status');
+        if (statusEl) {
+          statusEl.textContent = data.status.charAt(0).toUpperCase() + data.status.slice(1);
+          statusEl.className = 'health-metric ' + (data.status === 'healthy' ? 'good' : 'warning');
+        }
+      }
+    }
+
+    // Helper: Show toast notification
+    function showToast(message, type = 'info') {
+      // Check if we have a toast container already
+      let container = document.querySelector('.toast-container');
+      if (!container) {
+        container = document.createElement('div');
+        container.className = 'toast-container';
+        container.style.cssText = 'position: fixed; bottom: 20px; right: 20px; z-index: 1000;';
+        document.body.appendChild(container);
+      }
+
+      const toast = document.createElement('div');
+      toast.style.cssText = `
+        background: #161b22;
+        border: 1px solid #30363d;
+        border-left: 3px solid ${type === 'success' ? '#3fb950' : type === 'error' ? '#f85149' : '#58a6ff'};
+        border-radius: 6px;
+        padding: 12px 16px;
+        margin-top: 8px;
+        color: #e6edf3;
+        font-size: 14px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+        animation: slideIn 0.3s ease;
+      `;
+      toast.textContent = message;
+      container.appendChild(toast);
+
+      // Remove after 3 seconds
+      setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transition = 'opacity 0.3s ease';
+        setTimeout(() => toast.remove(), 300);
+      }, 3000);
+    }
+
+    // Helper: Refresh agents panel
+    async function refreshAgents() {
+      try {
+        const res = await fetch('/api/agents');
+        const data = await res.json();
+
+        if (data.success && data.agents?.length) {
+          document.getElementById('agents-grid').innerHTML = data.agents.map(a => `
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">${escapeHtml(a.name)}</span>
+                <span class="agent-status ${a.state?.current === 'running' ? 'running' : 'idle'}">${a.state?.current || 'pending'}</span>
+              </div>
+              <div class="agent-task">${a.metadata?.taskType || 'default'}</div>
+              <div class="agent-progress">
+                <div class="agent-progress-fill" style="width: ${a.state?.current === 'completed' ? '100' : a.state?.current === 'running' ? '50' : '0'}%"></div>
+              </div>
+            </div>
+          `).join('');
+        } else {
+          document.getElementById('agents-grid').innerHTML = `
+            <div class="empty-state">
+              <div class="icon">&#129302;</div>
+              <p>No active agents</p>
+            </div>
+          `;
+        }
+      } catch (e) {
+        console.error('Failed to load agents:', e);
+      }
+    }
+
     function updateConnectionStatus(connected) {
       const dot = document.getElementById('status-dot');
       const text = document.getElementById('status-text');
+      const banner = document.getElementById('connection-banner');
+
       dot.className = 'status-dot ' + (connected ? 'connected' : 'disconnected');
       text.textContent = connected ? 'Connected' : 'Disconnected';
+
+      if (banner) {
+        banner.classList.toggle('visible', !connected);
+      }
+
+      if (connected) {
+        // Refresh all data on reconnect
+        refreshAll();
+      }
     }
 
     // Logs