tlc-claude-code 1.2.24 → 1.2.26

package/README.md

@@ -164,7 +164,7 @@ tlc init
 |-----|---------|
 | http://localhost:3147 | Dashboard — Live preview, logs, tasks |
 | http://localhost:5001 | App — Your running application |
-| http://localhost:8080 | DB Admin — Database GUI (Adminer) |
+| http://localhost:8081 | DB Studio — pgweb (or Drizzle/Prisma Studio) |
 | localhost:5433 | Database — PostgreSQL |
 
 **Features:**

package/dashboard/dist/App.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useApp, useInput } from 'ink';
 import { useState, useCallback } from 'react';
 import { ChatPane } from './components/ChatPane.js';
-import { StatusPane } from './components/StatusPane.js';
+import { PlanView } from './components/PlanView.js';
 import { PreviewPane } from './components/PreviewPane.js';
 import { AgentsPane } from './components/AgentsPane.js';
 import { GitHubPane } from './components/GitHubPane.js';
@@ -17,7 +17,7 @@ export function App({ isTTY = true }) {
         }
         if (key.tab) {
             setActivePane(prev => {
-                const panes = ['chat', 'github', 'agents', 'preview'];
+                const panes = ['chat', 'plan', 'github', 'agents', 'preview'];
                 const idx = panes.indexOf(prev);
                 return panes[(idx + 1) % panes.length];
             });
@@ -26,10 +26,12 @@ export function App({ isTTY = true }) {
         if (input === '1')
             setActivePane('chat');
         if (input === '2')
-            setActivePane('github');
+            setActivePane('plan');
         if (input === '3')
-            setActivePane('agents');
+            setActivePane('github');
         if (input === '4')
+            setActivePane('agents');
+        if (input === '5')
             setActivePane('preview');
     }, { isActive: isTTY });
     const handleAssignToAgent = useCallback(async (issue) => {
@@ -45,5 +47,5 @@ export function App({ isTTY = true }) {
             return next;
         });
     }, []);
-    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsxs(Box, { borderStyle: "single", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "TDD Dashboard" }), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: activePane === 'chat' ? 'cyan' : 'gray', children: "[1]Chat " }), _jsx(Text, { color: activePane === 'github' ? 'cyan' : 'gray', children: "[2]GitHub " }), _jsx(Text, { color: activePane === 'agents' ? 'cyan' : 'gray', children: "[3]Agents " }), _jsx(Text, { color: activePane === 'preview' ? 'cyan' : 'gray', children: "[4]Preview" })] }), _jsx(Box, { children: _jsx(Text, { color: "cyan", bold: true, children: "| TDD |" }) })] }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", width: "60%", borderStyle: "single", borderColor: activePane === 'chat' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'chat' ? 'cyan' : 'white', children: "Chat" }) }), _jsx(ChatPane, { isActive: activePane === 'chat', isTTY: isTTY })] }), _jsxs(Box, { flexDirection: "column", width: "40%", children: [_jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'github' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'github' ? 'cyan' : 'white', children: "GitHub Issues" }) }), _jsx(GitHubPane, { isActive: activePane === 'github', isTTY: isTTY, onAssignToAgent: handleAssignToAgent })] }), _jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'agents' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'agents' ? 'cyan' : 'white', children: "Agents" }) }), _jsx(AgentsPane, { isActive: activePane === 'agents', isTTY: isTTY, onTaskComplete: handleTaskComplete })] }), _jsxs(Box, { flexDirection: "column", height: "20%", borderStyle: "single", borderColor: "gray", children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, children: "Status" }) }), _jsx(StatusPane, {})] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: activePane === 'preview' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'preview' ? 'cyan' : 'white', children: "Preview" }) }), _jsx(PreviewPane, { isActive: activePane === 'preview', isTTY: isTTY })] })] })] }), _jsx(Box, { borderStyle: "single", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Tab: cycle panes | 1-4: jump to pane | Ctrl+Q: quit" }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsxs(Box, { borderStyle: "single", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "TLC Dashboard" }), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: activePane === 'chat' ? 'cyan' : 'gray', children: "[1]Chat " }), _jsx(Text, { color: activePane === 'plan' ? 'cyan' : 'gray', children: "[2]Plan " }), _jsx(Text, { color: activePane === 'github' ? 'cyan' : 'gray', children: "[3]GitHub " }), _jsx(Text, { color: activePane === 'agents' ? 'cyan' : 'gray', children: "[4]Agents " }), _jsx(Text, { color: activePane === 'preview' ? 'cyan' : 'gray', children: "[5]Preview" })] }), _jsx(Box, { children: _jsx(Text, { color: "cyan", bold: true, children: "| TLC |" }) })] }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", width: "60%", borderStyle: "single", borderColor: activePane === 'chat' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'chat' ? 'cyan' : 'white', children: "Chat" }) }), _jsx(ChatPane, { isActive: activePane === 'chat', isTTY: isTTY })] }), _jsxs(Box, { flexDirection: "column", width: "40%", children: [_jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'github' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'github' ? 'cyan' : 'white', children: "GitHub Issues" }) }), _jsx(GitHubPane, { isActive: activePane === 'github', isTTY: isTTY, onAssignToAgent: handleAssignToAgent })] }), _jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'agents' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'agents' ? 'cyan' : 'white', children: "Agents" }) }), _jsx(AgentsPane, { isActive: activePane === 'agents', isTTY: isTTY, onTaskComplete: handleTaskComplete })] }), _jsxs(Box, { flexDirection: "column", height: "20%", borderStyle: "single", borderColor: activePane === 'plan' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'plan' ? 'cyan' : 'white', children: "Plan" }) }), _jsx(PlanView, {})] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: activePane === 'preview' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'preview' ? 'cyan' : 'white', children: "Preview" }) }), _jsx(PreviewPane, { isActive: activePane === 'preview', isTTY: isTTY })] })] })] }), _jsx(Box, { borderStyle: "single", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Tab: cycle panes | 1-5: jump to pane | Ctrl+Q: quit" }) })] }));
 }

package/dashboard/dist/App.test.js

@@ -44,18 +44,19 @@ describe('App', () => {
             const { lastFrame } = render(_jsx(App, {}));
             expect(lastFrame()).toBeDefined();
         });
-        it('shows TDD Dashboard header', () => {
+        it('shows TLC Dashboard header', () => {
             const { lastFrame } = render(_jsx(App, {}));
             const output = lastFrame();
-            expect(output).toContain('TDD Dashboard');
+            expect(output).toContain('TLC Dashboard');
         });
         it('shows all pane labels in header', () => {
             const { lastFrame } = render(_jsx(App, {}));
             const output = lastFrame();
             expect(output).toContain('[1]Chat');
-            expect(output).toContain('[2]GitHub');
-            expect(output).toContain('[3]Agents');
-            expect(output).toContain('[4]Preview');
+            expect(output).toContain('[2]Plan');
+            expect(output).toContain('[3]GitHub');
+            expect(output).toContain('[4]Agents');
+            expect(output).toContain('[5]Preview');
         });
         it('shows footer with keyboard hints', () => {
             const { lastFrame } = render(_jsx(App, {}));
@@ -80,10 +81,10 @@ describe('App', () => {
             const output = lastFrame();
             expect(output).toContain('Agents');
         });
-        it('shows Status pane', () => {
+        it('shows Plan pane', () => {
             const { lastFrame } = render(_jsx(App, {}));
             const output = lastFrame();
-            expect(output).toContain('Status');
+            expect(output).toContain('Plan');
         });
         it('shows Preview pane', () => {
             const { lastFrame } = render(_jsx(App, {}));
@@ -92,23 +93,29 @@ describe('App', () => {
         });
     });
     describe('keyboard navigation', () => {
-        it('switches to github pane when pressing 2', () => {
+        it('switches to plan pane when pressing 2', () => {
             const { lastFrame, stdin } = render(_jsx(App, {}));
             stdin.write('2');
             const output = lastFrame();
-            // GitHub pane should now be active (shown by highlighting)
-            expect(output).toContain('GitHub');
+            // Plan pane should now be active (shown by highlighting)
+            expect(output).toContain('Plan');
         });
-        it('switches to agents pane when pressing 3', () => {
+        it('switches to github pane when pressing 3', () => {
             const { lastFrame, stdin } = render(_jsx(App, {}));
             stdin.write('3');
             const output = lastFrame();
-            expect(output).toContain('Agents');
+            expect(output).toContain('GitHub');
         });
-        it('switches to preview pane when pressing 4', () => {
+        it('switches to agents pane when pressing 4', () => {
             const { lastFrame, stdin } = render(_jsx(App, {}));
             stdin.write('4');
             const output = lastFrame();
+            expect(output).toContain('Agents');
+        });
+        it('switches to preview pane when pressing 5', () => {
+            const { lastFrame, stdin } = render(_jsx(App, {}));
+            stdin.write('5');
+            const output = lastFrame();
             expect(output).toContain('Preview');
         });
         it('switches back to chat pane when pressing 1', () => {
@@ -127,11 +134,11 @@ describe('App', () => {
             expect(output).toBeDefined();
         });
     });
-    describe('TDD branding', () => {
-        it('shows TDD indicator in header', () => {
+    describe('TLC branding', () => {
+        it('shows TLC indicator in header', () => {
             const { lastFrame } = render(_jsx(App, {}));
             const output = lastFrame();
-            expect(output).toContain('TDD');
+            expect(output).toContain('TLC');
         });
     });
 });

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

@@ -0,0 +1,32 @@
+export interface Task {
+    number: number;
+    name: string;
+    status: 'completed' | 'in_progress' | 'pending';
+    owner?: string;
+    criteriaDone: number;
+    criteriaTotal: number;
+}
+export interface Phase {
+    number: number;
+    name: string;
+    status: 'completed' | 'in_progress' | 'pending';
+    tasksDone: number;
+    tasksInProgress: number;
+    tasksTotal: number;
+    progress: number;
+    tasks: Task[];
+}
+export interface Milestone {
+    name: string;
+    status: 'completed' | 'in_progress' | 'pending';
+    phaseNumbers: number[];
+    phases: Phase[];
+}
+export interface PlanViewProps {
+    expandedPhase?: number;
+    filter?: 'all' | 'in_progress' | 'pending' | 'completed';
+}
+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 parseTasks(content: string): Task[];

package/dashboard/dist/components/PlanView.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState, useEffect } from 'react';
+import { readFile, readdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'path';
+export function PlanView({ expandedPhase, filter = 'all' } = {}) {
+    const [milestones, setMilestones] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [collapsedMilestones, setCollapsedMilestones] = useState(new Set());
+    useEffect(() => {
+        async function loadPlan() {
+            const roadmapPath = join(process.cwd(), '.planning', 'ROADMAP.md');
+            if (!existsSync(roadmapPath)) {
+                setMilestones([]);
+                setLoading(false);
+                return;
+            }
+            try {
+                const content = await readFile(roadmapPath, 'utf-8');
+                const planContents = await loadPlanFiles();
+                const parsedMilestones = parseMilestones(content);
+                const phases = parsePhases(content, planContents);
+                // Attach phases to milestones
+                const milestonesWithPhases = parsedMilestones.map(m => ({
+                    ...m,
+                    phases: phases.filter(p => m.phaseNumbers.includes(p.number))
+                }));
+                // Auto-collapse completed milestones (but not if there's only one milestone)
+                const completed = new Set();
+                if (milestonesWithPhases.length > 1) {
+                    milestonesWithPhases.forEach(m => {
+                        if (m.status === 'completed') {
+                            completed.add(m.name);
+                        }
+                    });
+                }
+                setCollapsedMilestones(completed);
+                setMilestones(milestonesWithPhases);
+            }
+            catch (e) {
+                setMilestones([]);
+            }
+            setLoading(false);
+        }
+        loadPlan();
+        const interval = setInterval(loadPlan, 5000);
+        return () => clearInterval(interval);
+    }, []);
+    if (loading) {
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "gray", children: "Loading..." }) }));
+    }
+    if (milestones.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "No roadmap found." }), _jsx(Text, { color: "gray", dimColor: true, children: "Run /tlc:new-project or /tlc:init" })] }));
+    }
+    return (_jsx(Box, { padding: 1, flexDirection: "column", children: milestones.map((milestone, idx) => (_jsx(MilestoneView, { milestone: milestone, collapsed: collapsedMilestones.has(milestone.name), expandedPhase: expandedPhase, filter: filter }, milestone.name))) }));
+}
+function MilestoneView({ milestone, collapsed, expandedPhase, filter }) {
+    const statusIcon = milestone.status === 'completed' ? '✓' :
+        milestone.status === 'in_progress' ? '▶' : '○';
+    const statusColor = milestone.status === 'completed' ? 'green' :
+        milestone.status === 'in_progress' ? 'yellow' : 'gray';
+    const completedPhases = milestone.phases.filter(p => p.status === 'completed').length;
+    const totalPhases = milestone.phases.length;
+    const progress = totalPhases > 0 ? Math.round((completedPhases / totalPhases) * 100) : 0;
+    const filteredPhases = milestone.phases.filter(p => {
+        if (filter === 'all')
+            return true;
+        return p.status === filter;
+    });
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsx(Text, { bold: true, color: milestone.status === 'in_progress' ? 'cyan' : 'white', children: milestone.name }), _jsxs(Text, { color: "gray", children: [" (", completedPhases, "/", totalPhases, " phases"] }), progress > 0 && _jsxs(Text, { color: "gray", children: [" \u00B7 ", progress, "%"] }), _jsx(Text, { color: "gray", children: ")" }), collapsed && _jsx(Text, { color: "gray", dimColor: true, children: " [collapsed]" })] }), !collapsed && filteredPhases.map(phase => (_jsx(PhaseView, { phase: phase, expanded: expandedPhase === phase.number }, phase.number)))] }));
+}
+function PhaseView({ phase, expanded }) {
+    const statusIcon = phase.status === 'completed' ? '[x]' :
+        phase.status === 'in_progress' ? '[>]' : '[ ]';
+    const statusColor = phase.status === 'completed' ? 'green' :
+        phase.status === 'in_progress' ? 'yellow' : 'gray';
+    const progressBar = renderProgressBar(phase.progress, 10);
+    const taskInfo = phase.tasksTotal > 0
+        ? `${phase.tasksDone}/${phase.tasksTotal}`
+        : '0/0';
+    // Truncate long phase names
+    const maxNameLength = 30;
+    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))) }))] }));
+}
+function TaskView({ task }) {
+    const statusIcon = task.status === 'completed' ? '✓' :
+        task.status === 'in_progress' ? '▶' : '○';
+    const statusColor = task.status === 'completed' ? 'green' :
+        task.status === 'in_progress' ? 'yellow' : 'gray';
+    const criteriaInfo = task.criteriaTotal > 0
+        ? ` (${task.criteriaDone}/${task.criteriaTotal} criteria)`
+        : '';
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsx(Text, { color: task.status === 'in_progress' ? 'cyan' : 'white', children: task.name }), task.owner && _jsxs(Text, { color: "magenta", children: [" @", task.owner] }), criteriaInfo && _jsx(Text, { color: "gray", children: criteriaInfo })] }));
+}
+function renderProgressBar(percent, width) {
+    const filled = Math.round((percent / 100) * width);
+    const empty = width - filled;
+    return '█'.repeat(filled) + '░'.repeat(empty);
+}
+async function loadPlanFiles() {
+    const phasesDir = join(process.cwd(), '.planning', 'phases');
+    const planContents = {};
+    if (!existsSync(phasesDir)) {
+        return planContents;
+    }
+    try {
+        const entries = await readdir(phasesDir, { withFileTypes: true });
+        for (const entry of entries) {
+            if (entry.isDirectory()) {
+                // Extract phase number from directory name (e.g., "01-core" -> 1)
+                const match = entry.name.match(/^(\d+)/);
+                if (match) {
+                    const phaseNum = parseInt(match[1], 10);
+                    const planPath = join(phasesDir, entry.name, `${match[1]}-PLAN.md`);
+                    if (existsSync(planPath)) {
+                        try {
+                            planContents[phaseNum] = await readFile(planPath, 'utf-8');
+                        }
+                        catch (e) {
+                            // Skip unreadable files
+                        }
+                    }
+                }
+            }
+        }
+    }
+    catch (e) {
+        // Return empty if can't read directory
+    }
+    return planContents;
+}
+export function parseMilestones(content) {
+    const milestones = [];
+    const lines = content.split('\n');
+    let currentMilestone = null;
+    let hasExplicitMilestones = false;
+    // Track phase statuses per milestone for status calculation
+    const milestonePhaseStatuses = new Map();
+    let milestoneIndex = -1;
+    for (const line of lines) {
+        // Match milestone headers like "## Milestone: v1.0 - Release" or "## Milestone: v1.0 [x]"
+        const milestoneMatch = line.match(/^##\s*Milestone:\s*(.+?)(?:\s*\[([x>]?)\])?\s*$/i);
+        if (milestoneMatch) {
+            hasExplicitMilestones = true;
+            if (currentMilestone) {
+                milestones.push(currentMilestone);
+            }
+            milestoneIndex++;
+            milestonePhaseStatuses.set(milestoneIndex, []);
+            currentMilestone = {
+                name: milestoneMatch[1].trim(),
+                status: milestoneMatch[2] === 'x' ? 'completed' : 'pending',
+                phaseNumbers: [],
+                phases: []
+            };
+            continue;
+        }
+        // Match phase headers like "### Phase 1: Setup [x]"
+        const phaseMatch = line.match(/^###\s*(?:Phase\s+)?(\d+)[.:]?\s*(.+?)(?:\s*\[([x>]?)\])?\s*$/i);
+        if (phaseMatch) {
+            const phaseNum = parseInt(phaseMatch[1], 10);
+            const phaseStatus = phaseMatch[3] === 'x' ? 'completed' :
+                phaseMatch[3] === '>' ? 'in_progress' : 'pending';
+            if (currentMilestone) {
+                currentMilestone.phaseNumbers.push(phaseNum);
+                milestonePhaseStatuses.get(milestoneIndex)?.push(phaseStatus);
+            }
+            else if (!hasExplicitMilestones) {
+                // Create implicit "Current" milestone for roadmaps without explicit milestones
+                milestoneIndex = 0;
+                milestonePhaseStatuses.set(milestoneIndex, [phaseStatus]);
+                currentMilestone = {
+                    name: 'Current',
+                    status: 'pending',
+                    phaseNumbers: [phaseNum],
+                    phases: []
+                };
+            }
+        }
+    }
+    // Add the last milestone
+    if (currentMilestone) {
+        milestones.push(currentMilestone);
+    }
+    // Determine milestone statuses from their phases
+    milestones.forEach((milestone, idx) => {
+        const statuses = milestonePhaseStatuses.get(idx) || [];
+        if (statuses.length === 0) {
+            milestone.status = 'pending';
+        }
+        else if (statuses.every(s => s === 'completed')) {
+            milestone.status = 'completed';
+        }
+        else if (statuses.some(s => s === 'in_progress')) {
+            milestone.status = 'in_progress';
+        }
+        else {
+            milestone.status = 'pending';
+        }
+    });
+    return milestones;
+}
+export function parsePhases(roadmapContent, planContents) {
+    const phases = [];
+    const lines = roadmapContent.split('\n');
+    for (const line of lines) {
+        const match = line.match(/^###\s*(?:Phase\s+)?(\d+)[.:]?\s*(.+?)(?:\s*\[([x>]?)\])?\s*$/i);
+        if (match) {
+            const phaseNum = parseInt(match[1], 10);
+            const phaseName = match[2].replace(/\s*\[.*?\]\s*$/, '').trim();
+            const status = match[3] === 'x' ? 'completed' :
+                match[3] === '>' ? 'in_progress' : 'pending';
+            // Parse tasks from PLAN file if available
+            const planContent = planContents[phaseNum] || '';
+            const tasks = parseTasks(planContent);
+            const tasksDone = tasks.filter(t => t.status === 'completed').length;
+            const tasksInProgress = tasks.filter(t => t.status === 'in_progress').length;
+            const tasksTotal = tasks.length;
+            const progress = tasksTotal > 0 ? Math.round((tasksDone / tasksTotal) * 100) : 0;
+            phases.push({
+                number: phaseNum,
+                name: phaseName,
+                status,
+                tasksDone,
+                tasksInProgress,
+                tasksTotal,
+                progress,
+                tasks
+            });
+        }
+    }
+    return phases;
+}
+export function parseTasks(content) {
+    const tasks = [];
+    const lines = content.split('\n');
+    let currentTask = null;
+    let inAcceptanceCriteria = false;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Match task headers like "### Task 1: Setup Project [x@alice]" or "### Task 1: Name [ ]"
+        // Also match without brackets for incomplete lines
+        const taskMatch = line.match(/^###\s*Task\s+(\d+)[.:]?\s*(.+?)\s*\[([x> ]?)(?:@(\w+))?\]\s*$/i);
+        if (taskMatch) {
+            // Save previous task
+            if (currentTask) {
+                tasks.push(currentTask);
+            }
+            const statusChar = taskMatch[3].trim();
+            const status = statusChar === 'x' ? 'completed' :
+                statusChar === '>' ? 'in_progress' : 'pending';
+            currentTask = {
+                number: parseInt(taskMatch[1], 10),
+                name: taskMatch[2].trim(),
+                status,
+                owner: taskMatch[4] || undefined,
+                criteriaDone: 0,
+                criteriaTotal: 0
+            };
+            inAcceptanceCriteria = false;
+            continue;
+        }
+        // Track when we enter acceptance criteria section
+        if (line.match(/\*\*Acceptance Criteria\*\*|Acceptance Criteria:/i)) {
+            inAcceptanceCriteria = true;
+            continue;
+        }
+        // Count acceptance criteria checkboxes
+        if (currentTask && (inAcceptanceCriteria || line.match(/^-\s*\[[ x]\]/))) {
+            const checkboxMatch = line.match(/^-\s*\[([ x])\]/);
+            if (checkboxMatch) {
+                currentTask.criteriaTotal++;
+                if (checkboxMatch[1] === 'x') {
+                    currentTask.criteriaDone++;
+                }
+            }
+        }
+        // Reset criteria tracking on new section
+        if (line.match(/^###\s/) && !line.match(/^###\s*Task/i)) {
+            inAcceptanceCriteria = false;
+        }
+    }
+    // Don't forget the last task
+    if (currentTask) {
+        tasks.push(currentTask);
+    }
+    return tasks;
+}

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

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

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

@@ -0,0 +1,335 @@
+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 { vol } from 'memfs';
+// Mock fs modules
+vi.mock('fs', async () => {
+    const memfs = await import('memfs');
+    return memfs.fs;
+});
+vi.mock('fs/promises', async () => {
+    const memfs = await import('memfs');
+    return memfs.fs.promises;
+});
+describe('PlanView', () => {
+    beforeEach(() => {
+        vol.reset();
+    });
+    describe('parseMilestones', () => {
+        it('extracts milestones from roadmap', () => {
+            const content = `# Roadmap
+
+## Milestone: v1.0 - Initial Release
+
+### Phase 1: Setup [x]
+### Phase 2: Core [>]
+
+## Milestone: v1.1 - Improvements
+
+### Phase 3: Polish
+### Phase 4: Docs`;
+            const milestones = parseMilestones(content);
+            expect(milestones).toHaveLength(2);
+            expect(milestones[0].name).toBe('v1.0 - Initial Release');
+            expect(milestones[0].phaseNumbers).toEqual([1, 2]);
+            expect(milestones[1].name).toBe('v1.1 - Improvements');
+            expect(milestones[1].phaseNumbers).toEqual([3, 4]);
+        });
+        it('handles roadmap with no explicit milestones', () => {
+            const content = `# Roadmap
+
+### Phase 1: Setup [x]
+### Phase 2: Core`;
+            const milestones = parseMilestones(content);
+            expect(milestones).toHaveLength(1);
+            expect(milestones[0].name).toBe('Current');
+            expect(milestones[0].phaseNumbers).toEqual([1, 2]);
+        });
+        it('detects milestone status from phase statuses', () => {
+            const content = `## Milestone: v1.0
+
+### Phase 1: Setup [x]
+### Phase 2: Core [x]
+
+## Milestone: v1.1
+
+### Phase 3: Polish [>]
+### Phase 4: Docs`;
+            const milestones = parseMilestones(content);
+            expect(milestones[0].status).toBe('completed');
+            expect(milestones[1].status).toBe('in_progress');
+        });
+        it('marks milestone as pending if no phases started', () => {
+            const content = `## Milestone: v1.0
+
+### Phase 1: Setup [x]
+
+## Milestone: v1.1
+
+### Phase 2: Core
+### Phase 3: Docs`;
+            const milestones = parseMilestones(content);
+            expect(milestones[0].status).toBe('completed');
+            expect(milestones[1].status).toBe('pending');
+        });
+    });
+    describe('parsePhases', () => {
+        it('parses phases with task counts from PLAN files', () => {
+            const roadmapContent = `### Phase 1: Setup [x]
+### Phase 2: Core [>]`;
+            const planContents = {
+                1: `# Phase 1
+### Task 1: Init [x@alice]
+### Task 2: Config [x@bob]`,
+                2: `# Phase 2
+### Task 1: API [>@alice]
+### Task 2: DB [ ]
+### Task 3: Auth [ ]`
+            };
+            const phases = parsePhases(roadmapContent, planContents);
+            expect(phases).toHaveLength(2);
+            expect(phases[0].tasksDone).toBe(2);
+            expect(phases[0].tasksTotal).toBe(2);
+            expect(phases[1].tasksDone).toBe(0);
+            expect(phases[1].tasksTotal).toBe(3);
+            expect(phases[1].tasksInProgress).toBe(1);
+        });
+        it('calculates progress percentage', () => {
+            const roadmapContent = `### Phase 1: Core`;
+            const planContents = {
+                1: `### Task 1: A [x@u]
+### Task 2: B [x@u]
+### Task 3: C [ ]
+### Task 4: D [ ]`
+            };
+            const phases = parsePhases(roadmapContent, planContents);
+            expect(phases[0].progress).toBe(50);
+        });
+        it('handles phases with no PLAN file', () => {
+            const roadmapContent = `### Phase 1: Setup [x]
+### Phase 2: Planned`;
+            const planContents = {
+                1: `### Task 1: Done [x@u]`
+            };
+            const phases = parsePhases(roadmapContent, planContents);
+            expect(phases).toHaveLength(2);
+            expect(phases[1].tasksTotal).toBe(0);
+            expect(phases[1].progress).toBe(0);
+        });
+    });
+    describe('parseTasks', () => {
+        it('extracts tasks from PLAN content', () => {
+            const content = `# Phase 1
+
+### Task 1: Setup Project [x@alice]
+Some description
+
+### Task 2: Add Config [>@bob]
+Working on it
+
+### Task 3: Write Tests [ ]
+Not started`;
+            const tasks = parseTasks(content);
+            expect(tasks).toHaveLength(3);
+            expect(tasks[0]).toMatchObject({
+                number: 1,
+                name: 'Setup Project',
+                status: 'completed',
+                owner: 'alice'
+            });
+            expect(tasks[1]).toMatchObject({
+                number: 2,
+                name: 'Add Config',
+                status: 'in_progress',
+                owner: 'bob'
+            });
+            expect(tasks[2]).toMatchObject({
+                number: 3,
+                name: 'Write Tests',
+                status: 'pending',
+                owner: undefined
+            });
+        });
+        it('parses acceptance criteria counts', () => {
+            const content = `### Task 1: Feature [>@dev]
+
+**Acceptance Criteria:**
+- [x] First item done
+- [x] Second item done
+- [ ] Third item pending
+- [ ] Fourth item pending`;
+            const tasks = parseTasks(content);
+            expect(tasks[0].criteriaDone).toBe(2);
+            expect(tasks[0].criteriaTotal).toBe(4);
+        });
+        it('handles tasks without acceptance criteria', () => {
+            const content = `### Task 1: Simple [x@dev]
+Just a simple task`;
+            const tasks = parseTasks(content);
+            expect(tasks[0].criteriaDone).toBe(0);
+            expect(tasks[0].criteriaTotal).toBe(0);
+        });
+    });
+    describe('component rendering', () => {
+        it('shows loading state initially', () => {
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            expect(lastFrame()).toContain('Loading');
+        });
+        it('shows empty state when no roadmap', async () => {
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            expect(lastFrame()).toContain('No roadmap found');
+        });
+        it('renders milestones with phases', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `# Roadmap
+
+## Milestone: v1.0 - Release
+
+### Phase 1: Setup [x]
+### Phase 2: Core [>]
+### Phase 3: Polish`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('v1.0');
+            expect(output).toContain('Setup');
+            expect(output).toContain('Core');
+            expect(output).toContain('Polish');
+        });
+        it('shows progress bar for phases', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `### Phase 1: Core [>]`,
+                [process.cwd() + '/.planning/phases/01-core/01-PLAN.md']: `
+### Task 1: A [x@u]
+### Task 2: B [x@u]
+### Task 3: C [ ]
+### Task 4: D [ ]`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            // Should show 2/4 or 50% progress indicator
+            expect(output).toMatch(/2\/4|50%|████/);
+        });
+        it('shows task counts per phase', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `### Phase 1: Auth [x]`,
+                [process.cwd() + '/.planning/phases/01-auth/01-PLAN.md']: `
+### Task 1: Login [x@a]
+### Task 2: Logout [x@b]
+### Task 3: Session [x@a]`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('3/3');
+        });
+        it('collapses completed milestones by default', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `
+## Milestone: v0.9 [x]
+
+### Phase 1: Old [x]
+
+## Milestone: v1.0
+
+### Phase 2: Current [>]`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            // v0.9 should be collapsed (not showing "Old")
+            expect(output).toContain('v0.9');
+            expect(output).toContain('Current');
+            // Old phase should not be visible (collapsed)
+            expect(output).not.toMatch(/Old\s+\[/);
+        });
+        it('expands phase to show tasks when selected', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `### Phase 1: Core [>]`,
+                [process.cwd() + '/.planning/phases/01-core/01-PLAN.md']: `
+### Task 1: API [x@alice]
+### Task 2: DB [>@bob]`
+            });
+            const { lastFrame } = render(_jsx(PlanView, { expandedPhase: 1 }));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('API');
+            expect(output).toContain('alice');
+            expect(output).toContain('DB');
+            expect(output).toContain('bob');
+        });
+        it('shows filter options', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `
+### Phase 1: Done [x]
+### Phase 2: Active [>]
+### Phase 3: Pending`
+            });
+            const { lastFrame } = render(_jsx(PlanView, { filter: "in_progress" }));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('Active');
+            expect(output).not.toContain('Done');
+            expect(output).not.toContain('Pending');
+        });
+        it('shows overall milestone progress', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `
+## Milestone: v1.0
+
+### Phase 1: A [x]
+### Phase 2: B [x]
+### Phase 3: C [>]
+### Phase 4: D`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            // Should show 2/4 phases or 50% for milestone
+            expect(output).toMatch(/2\/4|50%/);
+        });
+    });
+    describe('edge cases', () => {
+        it('handles malformed PLAN files gracefully', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `### Phase 1: Test`,
+                [process.cwd() + '/.planning/phases/01-test/01-PLAN.md']: `
+This is not a proper plan file
+No tasks here
+Just random text`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('Test');
+            expect(output).toContain('0/0');
+        });
+        it('handles very long phase names', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `### Phase 1: This Is A Very Long Phase Name That Should Be Truncated [>]`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            // Should not crash, should render something
+            expect(lastFrame()).toBeTruthy();
+        });
+        it('handles phases numbered non-sequentially', async () => {
+            vol.fromJSON({
+                [process.cwd() + '/.planning/ROADMAP.md']: `
+### Phase 1: First [x]
+### Phase 3: Third [>]
+### Phase 5: Fifth`
+            });
+            const { lastFrame } = render(_jsx(PlanView, {}));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('First');
+            expect(output).toContain('Third');
+            expect(output).toContain('Fifth');
+        });
+    });
+});

package/docker-compose.dev.yml

@@ -58,17 +58,20 @@ services:
         condition: service_healthy
     restart: on-failure
 
-  # Database GUI (Adminer)
+  # Database GUI (pgweb - clean, modern)
+  # Note: If using Drizzle/Prisma, run their studios instead:
+  #   npx drizzle-kit studio  (port 4983)
+  #   npx prisma studio       (port 5555)
   dbadmin:
-    image: adminer:latest
+    image: sosedoff/pgweb:latest
     container_name: tlc-${COMPOSE_PROJECT_NAME:-dev}-dbadmin
     ports:
-      - "${DBADMIN_PORT:-8080}:8080"
+      - "${DBADMIN_PORT:-8081}:8081"
     environment:
-      - ADMINER_DEFAULT_SERVER=db
-      - ADMINER_DESIGN=nette
+      - PGWEB_DATABASE_URL=postgres://postgres:postgres@db:5432/app?sslmode=disable
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     restart: on-failure
 
   # MinIO S3-Compatible Storage

package/package.json

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