tlc-claude-code 1.2.26 → 1.2.28

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { LogSearch } from './LogSearch.js';
+describe('LogSearch', () => {
+    describe('Input Display', () => {
+        it('shows search input', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "", onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toMatch(/search|\/|find/i);
+        });
+        it('shows current query', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "error", onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toContain('error');
+        });
+        it('shows cursor indicator', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "", onChange: () => { }, onClose: () => { } }));
+            // Should show some cursor indicator
+            expect(lastFrame()).toMatch(/_|▏|│|\|/);
+        });
+    });
+    describe('Match Count', () => {
+        it('shows match count', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "test", matchCount: 5, onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toContain('5');
+        });
+        it('shows zero matches', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "xyz", matchCount: 0, onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toContain('0');
+        });
+        it('shows current match index', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "test", matchCount: 10, currentMatch: 3, onChange: () => { }, onClose: () => { } }));
+            // Should show "3 of 10" or "3/10"
+            expect(lastFrame()).toMatch(/3.*of.*10|3\/10/i);
+        });
+    });
+    describe('Navigation Hints', () => {
+        it('shows next/prev match hints', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "test", matchCount: 5, onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toMatch(/n.*N|next.*prev/i);
+        });
+        it('shows close hint', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "", onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toMatch(/Esc|close|cancel/i);
+        });
+        it('shows enter hint', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "", onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toMatch(/Enter|submit|search/i);
+        });
+    });
+    describe('Case Sensitivity', () => {
+        it('shows case-insensitive by default', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "", onChange: () => { }, onClose: () => { } }));
+            // Should indicate case-insensitive or not show case indicator
+            expect(lastFrame()).toBeDefined();
+        });
+        it('shows case-sensitive indicator when enabled', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "", caseSensitive: true, onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toMatch(/Aa|case/i);
+        });
+    });
+    describe('Callbacks', () => {
+        it('accepts onChange callback', () => {
+            const onChange = vi.fn();
+            render(_jsx(LogSearch, { query: "", onChange: onChange, onClose: () => { } }));
+            // onChange called on input
+        });
+        it('accepts onClose callback', () => {
+            const onClose = vi.fn();
+            render(_jsx(LogSearch, { query: "", onChange: () => { }, onClose: onClose }));
+            // onClose called on Esc
+        });
+        it('accepts onNext callback', () => {
+            const onNext = vi.fn();
+            render(_jsx(LogSearch, { query: "test", matchCount: 5, onChange: () => { }, onClose: () => { }, onNext: onNext }));
+            // onNext called on 'n'
+        });
+        it('accepts onPrev callback', () => {
+            const onPrev = vi.fn();
+            render(_jsx(LogSearch, { query: "test", matchCount: 5, onChange: () => { }, onClose: () => { }, onPrev: onPrev }));
+            // onPrev called on 'N'
+        });
+    });
+    describe('Empty Query', () => {
+        it('shows placeholder when empty', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "", onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toMatch(/type|search|filter/i);
+        });
+    });
+    describe('Visual States', () => {
+        it('highlights no matches state', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "nonexistent", matchCount: 0, onChange: () => { }, onClose: () => { } }));
+            // Should show warning color or message
+            expect(lastFrame()).toBeDefined();
+        });
+        it('highlights has matches state', () => {
+            const { lastFrame } = render(_jsx(LogSearch, { query: "found", matchCount: 5, onChange: () => { }, onClose: () => { } }));
+            expect(lastFrame()).toContain('5');
+        });
+    });
+});

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

@@ -0,0 +1,21 @@
+export type LogLevel = 'error' | 'warn' | 'info' | 'debug';
+export interface LogEntry {
+    id: string;
+    timestamp?: string;
+    level?: LogLevel;
+    service?: string;
+    message: string;
+}
+export interface LogStreamProps {
+    logs: LogEntry[];
+    pageSize?: number;
+    autoScroll?: boolean;
+    searchQuery?: string;
+    levelFilter?: LogLevel;
+    serviceFilter?: string;
+    isActive?: boolean;
+    onPageChange?: (page: number) => void;
+    onSearch?: (query: string) => void;
+    onAutoScrollToggle?: (enabled: boolean) => void;
+}
+export declare function LogStream({ logs, pageSize, autoScroll, searchQuery, levelFilter, serviceFilter, isActive, onPageChange, onSearch, onAutoScrollToggle, }: LogStreamProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/LogStream.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+const levelColors = {
+    error: 'red',
+    warn: 'yellow',
+    info: 'cyan',
+    debug: 'gray',
+};
+const levelIcons = {
+    error: '✗',
+    warn: '⚠',
+    info: 'ℹ',
+    debug: '·',
+};
+function formatTimestamp(ts) {
+    if (!ts)
+        return '';
+    try {
+        const date = new Date(ts);
+        if (isNaN(date.getTime()))
+            return '';
+        const hours = String(date.getUTCHours()).padStart(2, '0');
+        const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+        const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+        return `${hours}:${minutes}:${seconds}`;
+    }
+    catch {
+        return '';
+    }
+}
+export function LogStream({ logs, pageSize = 20, autoScroll = true, searchQuery = '', levelFilter, serviceFilter, isActive = true, onPageChange, onSearch, onAutoScrollToggle, }) {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [internalAutoScroll, setInternalAutoScroll] = useState(autoScroll);
+    // Filter logs
+    const filteredLogs = useMemo(() => {
+        let result = logs;
+        // Level filter
+        if (levelFilter) {
+            const levels = ['error', 'warn', 'info', 'debug'];
+            const levelIndex = levels.indexOf(levelFilter);
+            result = result.filter((log) => {
+                const logLevel = log.level || 'info';
+                return levels.indexOf(logLevel) <= levelIndex;
+            });
+        }
+        // Service filter
+        if (serviceFilter) {
+            result = result.filter((log) => log.service === serviceFilter);
+        }
+        // Search filter
+        if (searchQuery) {
+            const query = searchQuery.toLowerCase();
+            result = result.filter((log) => log.message.toLowerCase().includes(query));
+        }
+        return result;
+    }, [logs, levelFilter, serviceFilter, searchQuery]);
+    // Match count for search
+    const matchCount = searchQuery ? filteredLogs.length : 0;
+    // Calculate pages
+    const totalPages = Math.max(1, Math.ceil(filteredLogs.length / pageSize));
+    const effectivePage = internalAutoScroll ? totalPages - 1 : currentPage;
+    const startIndex = effectivePage * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, filteredLogs.length);
+    const visibleLogs = filteredLogs.slice(startIndex, endIndex);
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Page navigation
+        if (key.pageDown || input === 'j' && key.ctrl) {
+            const newPage = Math.min(currentPage + 1, totalPages - 1);
+            setCurrentPage(newPage);
+            setInternalAutoScroll(false);
+            onPageChange?.(newPage);
+        }
+        else if (key.pageUp || input === 'k' && key.ctrl) {
+            const newPage = Math.max(currentPage - 1, 0);
+            setCurrentPage(newPage);
+            setInternalAutoScroll(false);
+            onPageChange?.(newPage);
+        }
+        // Jump to top/bottom
+        else if (input === 'g') {
+            setCurrentPage(0);
+            setInternalAutoScroll(false);
+            onPageChange?.(0);
+        }
+        else if (input === 'G') {
+            setCurrentPage(totalPages - 1);
+            setInternalAutoScroll(true);
+            onPageChange?.(totalPages - 1);
+        }
+        // Toggle auto-scroll
+        else if (input === 's') {
+            const newAutoScroll = !internalAutoScroll;
+            setInternalAutoScroll(newAutoScroll);
+            if (newAutoScroll) {
+                setCurrentPage(totalPages - 1);
+            }
+            onAutoScrollToggle?.(newAutoScroll);
+        }
+        // Search trigger
+        else if (input === '/') {
+            onSearch?.('');
+        }
+    }, { isActive });
+    // Empty state
+    if (logs.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Logs" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No logs available" }) })] }));
+    }
+    // No matches
+    if (searchQuery && filteredLogs.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Logs" }), _jsxs(Text, { dimColor: true, children: [" - searching: \"", searchQuery, "\""] })] }), _jsx(Box, { children: _jsx(Text, { color: "yellow", children: "0 matches found" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Esc to clear search" }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Logs " }), _jsxs(Text, { dimColor: true, children: ["(", startIndex + 1, "-", endIndex, " of ", filteredLogs.length, ")"] }), internalAutoScroll && _jsx(Text, { color: "green", children: " \u2193 auto" }), !internalAutoScroll && _jsx(Text, { dimColor: true, children: " \u23F8 paused" })] }), searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Search: " }), _jsxs(Text, { color: "yellow", children: ["\"", searchQuery, "\""] }), _jsxs(Text, { dimColor: true, children: [" (", matchCount, " matches)"] })] })), levelFilter && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Level: " }), _jsxs(Text, { color: levelColors[levelFilter], children: [levelFilter, "+"] })] })), serviceFilter && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Service: " }), _jsx(Text, { color: "blue", children: serviceFilter })] })), _jsx(Box, { flexDirection: "column", borderStyle: "single", paddingX: 1, children: visibleLogs.map((log) => {
+                    const timestamp = formatTimestamp(log.timestamp);
+                    const level = log.level || 'info';
+                    const color = levelColors[level];
+                    const icon = levelIcons[level];
+                    return (_jsxs(Box, { children: [timestamp && _jsxs(Text, { dimColor: true, children: ["[", timestamp, "] "] }), log.service && _jsxs(Text, { color: "blue", children: ["[", log.service, "] "] }), _jsxs(Text, { color: color, children: [icon, " "] }), _jsx(Text, { children: log.message })] }, log.id));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "PgUp/PgDn page \u2022 g top \u2022 G bottom \u2022 s scroll \u2022 / search" }) })] }));
+}

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

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

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { LogStream } from './LogStream.js';
+// Generate sample logs
+const generateLogs = (count) => Array.from({ length: count }, (_, i) => ({
+    id: `log-${i}`,
+    timestamp: `2024-01-15T10:${String(Math.floor(i / 60)).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}Z`,
+    level: i % 10 === 0 ? 'error' : i % 5 === 0 ? 'warn' : 'info',
+    service: i % 2 === 0 ? 'api' : 'web',
+    message: `Log message ${i + 1}`,
+}));
+const sampleLogs = generateLogs(100);
+describe('LogStream', () => {
+    describe('Windowed Display', () => {
+        it('shows configurable page size', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, pageSize: 10 }));
+            // Should show only 10 logs at a time
+            const output = lastFrame() || '';
+            const matches = output.match(/Log message \d+/g) || [];
+            expect(matches.length).toBeLessThanOrEqual(10);
+        });
+        it('defaults to 20 lines per page', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs }));
+            const output = lastFrame() || '';
+            const matches = output.match(/Log message \d+/g) || [];
+            expect(matches.length).toBeLessThanOrEqual(20);
+        });
+        it('shows all logs when less than page size', () => {
+            const smallLogs = generateLogs(5);
+            const { lastFrame } = render(_jsx(LogStream, { logs: smallLogs, pageSize: 20 }));
+            expect(lastFrame()).toContain('Log message 1');
+            expect(lastFrame()).toContain('Log message 5');
+        });
+    });
+    describe('Position Indicator', () => {
+        it('shows current position', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, pageSize: 10 }));
+            // Should show something like "1-10 of 100" or "Line 1 of 100"
+            expect(lastFrame()).toMatch(/\d+.*of.*100|\d+\/100/i);
+        });
+        it('shows total log count', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs }));
+            expect(lastFrame()).toContain('100');
+        });
+    });
+    describe('Navigation Hints', () => {
+        it('shows page navigation hints', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs }));
+            expect(lastFrame()).toMatch(/PgUp|PgDn|g|G/);
+        });
+        it('shows jump to top/bottom hints', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs }));
+            expect(lastFrame()).toMatch(/top|bottom|g|G/i);
+        });
+        it('shows search hint', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs }));
+            expect(lastFrame()).toMatch(/\/|search/i);
+        });
+    });
+    describe('Auto-scroll', () => {
+        it('shows auto-scroll indicator when enabled', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, autoScroll: true }));
+            expect(lastFrame()).toMatch(/↓|auto|scroll/i);
+        });
+        it('shows auto-scroll off indicator', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, autoScroll: false }));
+            // Should show paused or similar
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Log Display', () => {
+        it('shows timestamp', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, pageSize: 5 }));
+            expect(lastFrame()).toMatch(/\d{2}:\d{2}:\d{2}/);
+        });
+        it('shows log level', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, pageSize: 20 }));
+            // Should have level indicators
+            expect(lastFrame()).toMatch(/info|warn|error|ℹ|⚠|✗/i);
+        });
+        it('shows service name', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, pageSize: 5 }));
+            expect(lastFrame()).toMatch(/api|web/);
+        });
+        it('shows message', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, pageSize: 5 }));
+            expect(lastFrame()).toContain('Log message');
+        });
+    });
+    describe('Search', () => {
+        it('shows search query when active', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, searchQuery: "error" }));
+            expect(lastFrame()).toContain('error');
+        });
+        it('shows match count', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, searchQuery: "message 1" }));
+            // Should show number of matches
+            expect(lastFrame()).toMatch(/\d+.*match/i);
+        });
+        it('filters to matching logs', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, searchQuery: "message 10" }));
+            expect(lastFrame()).toContain('Log message 10');
+        });
+    });
+    describe('Empty State', () => {
+        it('shows empty message when no logs', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: [] }));
+            expect(lastFrame()).toMatch(/no logs|empty/i);
+        });
+        it('shows no results when search finds nothing', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, searchQuery: "xyznonexistent" }));
+            expect(lastFrame()).toMatch(/no.*match|0.*match/i);
+        });
+    });
+    describe('Level Filtering', () => {
+        it('filters by error level', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, levelFilter: "error" }));
+            // Should only show error logs
+            const output = lastFrame() || '';
+            expect(output).not.toContain('info');
+        });
+        it('shows level filter indicator', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, levelFilter: "warn" }));
+            expect(lastFrame()).toContain('warn');
+        });
+    });
+    describe('Service Filtering', () => {
+        it('filters by service', () => {
+            const { lastFrame } = render(_jsx(LogStream, { logs: sampleLogs, serviceFilter: "api" }));
+            expect(lastFrame()).toContain('api');
+        });
+    });
+    describe('Callbacks', () => {
+        it('calls onPageChange when page changes', () => {
+            const onPageChange = vi.fn();
+            render(_jsx(LogStream, { logs: sampleLogs, onPageChange: onPageChange }));
+            // Page change happens on key press
+        });
+        it('calls onSearch when search triggered', () => {
+            const onSearch = vi.fn();
+            render(_jsx(LogStream, { logs: sampleLogs, onSearch: onSearch }));
+            // Search happens on '/' key
+        });
+    });
+    describe('Large Log Sets', () => {
+        it('handles 10k logs', () => {
+            const largeLogs = generateLogs(10000);
+            const { lastFrame } = render(_jsx(LogStream, { logs: largeLogs, pageSize: 20 }));
+            expect(lastFrame()).toContain('10000');
+        });
+        it('shows correct page count for large sets', () => {
+            const largeLogs = generateLogs(1000);
+            const { lastFrame } = render(_jsx(LogStream, { logs: largeLogs, pageSize: 50 }));
+            // 1000 logs / 50 per page = 20 pages
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+});

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

@@ -6,6 +6,11 @@ export interface Task {
     criteriaDone: number;
     criteriaTotal: number;
 }
+export interface TableData {
+    headers: string[];
+    rows: string[][];
+    columnWidths: number[];
+}
 export interface Phase {
     number: number;
     name: string;
@@ -15,6 +20,7 @@ export interface Phase {
     tasksTotal: number;
     progress: number;
     tasks: Task[];
+    tables: TableData[];
 }
 export interface Milestone {
     name: string;
@@ -29,4 +35,5 @@ export interface PlanViewProps {
 export declare function PlanView({ expandedPhase, filter }?: PlanViewProps): import("react/jsx-runtime").JSX.Element;
 export declare function parseMilestones(content: string): Milestone[];
 export declare function parsePhases(roadmapContent: string, planContents: Record<number, string>): Phase[];
+export declare function parseTables(content: string): TableData[];
 export declare function parseTasks(content: string): Task[];

package/dashboard/dist/components/PlanView.js

@@ -84,7 +84,23 @@ function PhaseView({ phase, expanded }) {
     const displayName = phase.name.length > maxNameLength
         ? phase.name.slice(0, maxNameLength - 1) + '…'
         : phase.name;
-    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsxs(Text, { color: phase.status === 'in_progress' ? 'cyan' : 'white', children: [phase.number, ". ", displayName] }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: phase.progress === 100 ? 'green' : 'gray', children: progressBar }), _jsxs(Text, { color: "gray", children: [" ", taskInfo] }), phase.tasksInProgress > 0 && (_jsxs(Text, { color: "yellow", children: [" (", phase.tasksInProgress, " active)"] }))] }), expanded && phase.tasks.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0, children: phase.tasks.map(task => (_jsx(TaskView, { task: task }, task.number))) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsxs(Text, { color: phase.status === 'in_progress' ? 'cyan' : 'white', children: [phase.number, ". ", displayName] }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: phase.progress === 100 ? 'green' : 'gray', children: progressBar }), _jsxs(Text, { color: "gray", children: [" ", taskInfo] }), phase.tasksInProgress > 0 && (_jsxs(Text, { color: "yellow", children: [" (", phase.tasksInProgress, " active)"] }))] }), expanded && (phase.tasks.length > 0 || phase.tables.length > 0) && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0, children: [phase.tasks.map(task => (_jsx(TaskView, { task: task }, task.number))), phase.tables.map((table, idx) => (_jsx(TableView, { table: table }, idx)))] }))] }));
+}
+function TableView({ table }) {
+    const { headers, rows, columnWidths } = table;
+    // Render border line
+    const renderBorder = (type) => {
+        const chars = type === 'top' ? ['┌', '┬', '┐', '─'] :
+            type === 'mid' ? ['├', '┼', '┤', '─'] :
+                ['└', '┴', '┘', '─'];
+        const line = chars[0] + columnWidths.map(w => chars[3].repeat(w + 2)).join(chars[1]) + chars[2];
+        return _jsx(Text, { color: "gray", children: line });
+    };
+    // Render row
+    const renderRow = (cells, isHeader = false) => {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "\u2502" }), cells.map((cell, idx) => (_jsxs(Box, { children: [_jsxs(Text, { color: isHeader ? 'cyan' : 'white', bold: isHeader, children: [' ', cell.padEnd(columnWidths[idx]), ' '] }), _jsx(Text, { color: "gray", children: "\u2502" })] }, idx)))] }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [renderBorder('top'), renderRow(headers, true), renderBorder('mid'), rows.map((row, idx) => (_jsx(Box, { flexDirection: "column", children: renderRow(row) }, idx))), renderBorder('bottom')] }));
 }
 function TaskView({ task }) {
     const statusIcon = task.status === 'completed' ? '✓' :
@@ -217,6 +233,7 @@ export function parsePhases(roadmapContent, planContents) {
             // Parse tasks from PLAN file if available
             const planContent = planContents[phaseNum] || '';
             const tasks = parseTasks(planContent);
+            const tables = parseTables(planContent);
             const tasksDone = tasks.filter(t => t.status === 'completed').length;
             const tasksInProgress = tasks.filter(t => t.status === 'in_progress').length;
             const tasksTotal = tasks.length;
@@ -229,12 +246,67 @@ export function parsePhases(roadmapContent, planContents) {
                 tasksInProgress,
                 tasksTotal,
                 progress,
-                tasks
+                tasks,
+                tables
             });
         }
     }
     return phases;
 }
+export function parseTables(content) {
+    const tables = [];
+    const lines = content.split('\n');
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Check if this line looks like a table header row (contains |)
+        if (line.includes('|') && line.trim().startsWith('|')) {
+            // Check if next line is a separator row (contains |---|)
+            const nextLine = lines[i + 1];
+            if (nextLine && nextLine.match(/^\|[\s-:|]+\|$/)) {
+                // This is a table - parse it
+                const headers = parseTableRow(line);
+                const rows = [];
+                // Skip header and separator
+                i += 2;
+                // Parse data rows
+                while (i < lines.length && lines[i].includes('|') && lines[i].trim().startsWith('|')) {
+                    const row = parseTableRow(lines[i]);
+                    if (row.length > 0) {
+                        rows.push(row);
+                    }
+                    i++;
+                }
+                // Calculate column widths
+                const columnWidths = headers.map((h, idx) => {
+                    const headerWidth = h.length;
+                    const maxRowWidth = rows.reduce((max, row) => {
+                        const cellWidth = (row[idx] || '').length;
+                        return Math.max(max, cellWidth);
+                    }, 0);
+                    return Math.max(headerWidth, maxRowWidth, 3);
+                });
+                tables.push({ headers, rows, columnWidths });
+                continue;
+            }
+        }
+        i++;
+    }
+    return tables;
+}
+function parseTableRow(line) {
+    // Remove leading/trailing pipes and split by |
+    const trimmed = line.trim();
+    if (!trimmed.startsWith('|') || !trimmed.endsWith('|')) {
+        return [];
+    }
+    // Split by | and clean up each cell
+    const cells = trimmed
+        .slice(1, -1) // Remove outer pipes
+        .split('|')
+        .map(cell => cell.trim());
+    return cells;
+}
 export function parseTasks(content) {
     const tasks = [];
     const lines = content.split('\n');

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render } from 'ink-testing-library';
-import { PlanView, parseMilestones, parsePhases, parseTasks } from './PlanView.js';
+import { PlanView, parseMilestones, parsePhases, parseTasks, parseTables } from './PlanView.js';
 import { vol } from 'memfs';
 // Mock fs modules
 vi.mock('fs', async () => {
@@ -171,6 +171,75 @@ Just a simple task`;
             expect(tasks[0].criteriaTotal).toBe(0);
         });
     });
+    describe('parseTables', () => {
+        it('parses markdown tables', () => {
+            const content = `# Phase Info
+
+| Feature | Status | Owner |
+|---------|--------|-------|
+| Auth    | Done   | Alice |
+| API     | WIP    | Bob   |
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(1);
+            expect(tables[0].headers).toEqual(['Feature', 'Status', 'Owner']);
+            expect(tables[0].rows).toHaveLength(2);
+            expect(tables[0].rows[0]).toEqual(['Auth', 'Done', 'Alice']);
+            expect(tables[0].rows[1]).toEqual(['API', 'WIP', 'Bob']);
+        });
+        it('calculates column widths', () => {
+            const content = `| Short | Very Long Header |
+|-------|------------------|
+| A     | B                |
+| Longer Cell | C        |
+`;
+            const tables = parseTables(content);
+            expect(tables[0].columnWidths[0]).toBeGreaterThanOrEqual(11); // "Longer Cell"
+            expect(tables[0].columnWidths[1]).toBeGreaterThanOrEqual(16); // "Very Long Header"
+        });
+        it('handles multiple tables', () => {
+            const content = `## Table 1
+
+| A | B |
+|---|---|
+| 1 | 2 |
+
+## Table 2
+
+| X | Y | Z |
+|---|---|---|
+| a | b | c |
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(2);
+            expect(tables[0].headers).toEqual(['A', 'B']);
+            expect(tables[1].headers).toEqual(['X', 'Y', 'Z']);
+        });
+        it('handles empty content', () => {
+            const tables = parseTables('');
+            expect(tables).toHaveLength(0);
+        });
+        it('handles content with no tables', () => {
+            const content = `# Just Text
+
+Some paragraph here.
+
+- List item 1
+- List item 2
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(0);
+        });
+        it('handles tables with alignment markers', () => {
+            const content = `| Left | Center | Right |
+|:-----|:------:|------:|
+| A    | B      | C     |
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(1);
+            expect(tables[0].headers).toEqual(['Left', 'Center', 'Right']);
+        });
+    });
     describe('component rendering', () => {
         it('shows loading state initially', () => {
             const { lastFrame } = render(_jsx(PlanView, {}));

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

@@ -0,0 +1,18 @@
+import { DeviceType } from './DeviceFrame.js';
+export type ServiceState = 'running' | 'stopped' | 'starting' | 'error';
+export interface Service {
+    name: string;
+    port: number;
+    state: ServiceState;
+}
+export interface PreviewPanelProps {
+    services: Service[];
+    dashboardPort?: number;
+    initialDevice?: DeviceType;
+    useProxy?: boolean;
+    isActive?: boolean;
+    onServiceSelect?: (name: string) => void;
+    onDeviceChange?: (device: DeviceType) => void;
+    onOpenBrowser?: (url: string) => void;
+}
+export declare function PreviewPanel({ services, dashboardPort, initialDevice, useProxy: initialUseProxy, isActive, onServiceSelect, onDeviceChange, onOpenBrowser, }: PreviewPanelProps): import("react/jsx-runtime").JSX.Element;