tlc-claude-code 1.2.26 → 1.2.28

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

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { StatusBar } from './StatusBar.js';
+describe('StatusBar', () => {
+    describe('Branch Display', () => {
+        it('shows current branch', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { branch: "main" }));
+            expect(lastFrame()).toContain('main');
+        });
+        it('shows feature branch', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { branch: "feature/auth" }));
+            expect(lastFrame()).toContain('feature/auth');
+        });
+        it('shows branch icon', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { branch: "main" }));
+            expect(lastFrame()).toMatch(/⎇|branch|git/i);
+        });
+    });
+    describe('Environment Display', () => {
+        it('shows local environment', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { environment: "local" }));
+            expect(lastFrame()).toContain('local');
+        });
+        it('shows VPS environment', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { environment: "vps" }));
+            expect(lastFrame()).toContain('vps');
+        });
+        it('shows staging environment', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { environment: "staging" }));
+            expect(lastFrame()).toContain('staging');
+        });
+        it('shows production with warning', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { environment: "production" }));
+            expect(lastFrame()).toMatch(/prod|⚠/i);
+        });
+    });
+    describe('Connection Status', () => {
+        it('shows connected status', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { connectionState: "connected" }));
+            expect(lastFrame()).toMatch(/●|connected/i);
+        });
+        it('shows disconnected status', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { connectionState: "disconnected" }));
+            expect(lastFrame()).toMatch(/○|disconnected/i);
+        });
+        it('shows connecting status', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { connectionState: "connecting" }));
+            expect(lastFrame()).toMatch(/◐|connecting/i);
+        });
+    });
+    describe('Keyboard Help Hint', () => {
+        it('shows help hint', () => {
+            const { lastFrame } = render(_jsx(StatusBar, {}));
+            expect(lastFrame()).toMatch(/\?|help/i);
+        });
+    });
+    describe('Compact Single-Line', () => {
+        it('fits on single line', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { branch: "main", environment: "local", connectionState: "connected" }));
+            const output = lastFrame() || '';
+            const lines = output.split('\n').filter((l) => l.trim());
+            expect(lines.length).toBe(1);
+        });
+        it('uses separators between sections', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { branch: "main", environment: "vps", connectionState: "connected" }));
+            expect(lastFrame()).toMatch(/│|•|\|/);
+        });
+    });
+    describe('Project Info', () => {
+        it('shows project name', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { projectName: "my-app" }));
+            expect(lastFrame()).toContain('my-app');
+        });
+        it('shows version', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { projectName: "app", version: "1.2.3" }));
+            expect(lastFrame()).toContain('1.2.3');
+        });
+    });
+    describe('Phase Info', () => {
+        it('shows current phase', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { currentPhase: 3, totalPhases: 5 }));
+            expect(lastFrame()).toMatch(/3.*5|phase.*3/i);
+        });
+    });
+    describe('Test Status', () => {
+        it('shows passing tests', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { testsPassing: 45, testsTotal: 50 }));
+            expect(lastFrame()).toMatch(/45.*50|tests/i);
+        });
+        it('shows failing tests indicator', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { testsPassing: 40, testsTotal: 50, testsFailing: 10 }));
+            expect(lastFrame()).toMatch(/10|fail/i);
+        });
+    });
+    describe('Empty/Default State', () => {
+        it('renders with no props', () => {
+            const { lastFrame } = render(_jsx(StatusBar, {}));
+            expect(lastFrame()).toMatch(/\?|help/i);
+        });
+        it('handles missing branch gracefully', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { environment: "local" }));
+            expect(lastFrame()).toContain('local');
+        });
+        it('handles missing environment gracefully', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { branch: "main" }));
+            expect(lastFrame()).toContain('main');
+        });
+    });
+    describe('Colors', () => {
+        it('uses appropriate colors for connection states', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { connectionState: "connected" }));
+            // Visual verification - renders without error
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Width', () => {
+        it('respects width prop', () => {
+            const { lastFrame } = render(_jsx(StatusBar, { width: 80, branch: "main" }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+});

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

@@ -0,0 +1,22 @@
+import { TaskStatus, TaskPriority } from './TaskCard.js';
+export interface Task {
+    id: string;
+    title: string;
+    status: TaskStatus;
+    priority?: TaskPriority;
+    assignee?: string;
+    description?: string;
+    tests?: {
+        passing: number;
+        failing: number;
+    };
+}
+export interface TaskBoardProps {
+    tasks: Task[];
+    initialColumn?: number;
+    initialRow?: number;
+    compact?: boolean;
+    onSelect?: (task: Task) => void;
+    onMove?: (task: Task, newStatus: TaskStatus) => void;
+}
+export declare function TaskBoard({ tasks, initialColumn, initialRow, compact, onSelect, onMove, }: TaskBoardProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/TaskBoard.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { TaskCard } from './TaskCard.js';
+const columns = [
+    { key: 'pending', label: 'Pending' },
+    { key: 'in_progress', label: 'In Progress' },
+    { key: 'completed', label: 'Completed' },
+];
+const priorityOrder = {
+    high: 0,
+    medium: 1,
+    low: 2,
+};
+export function TaskBoard({ tasks, initialColumn = 0, initialRow = 0, compact = false, onSelect, onMove, }) {
+    const [activeColumn, setActiveColumn] = useState(initialColumn);
+    const [activeRow, setActiveRow] = useState(initialRow);
+    const [moveMode, setMoveMode] = useState(false);
+    // Group and sort tasks by status
+    const tasksByColumn = useMemo(() => {
+        const grouped = {
+            pending: [],
+            in_progress: [],
+            completed: [],
+        };
+        for (const task of tasks) {
+            grouped[task.status].push(task);
+        }
+        // Sort by priority within each column
+        for (const status of Object.keys(grouped)) {
+            grouped[status].sort((a, b) => {
+                const aPriority = a.priority ? priorityOrder[a.priority] : 999;
+                const bPriority = b.priority ? priorityOrder[b.priority] : 999;
+                return aPriority - bPriority;
+            });
+        }
+        return grouped;
+    }, [tasks]);
+    // Get current column tasks
+    const currentColumnTasks = tasksByColumn[columns[activeColumn].key];
+    const currentTask = currentColumnTasks[activeRow];
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (tasks.length === 0)
+            return;
+        // Move mode: select target column
+        if (moveMode) {
+            if (input === '1') {
+                handleMove('pending');
+            }
+            else if (input === '2') {
+                handleMove('in_progress');
+            }
+            else if (input === '3') {
+                handleMove('completed');
+            }
+            else if (key.escape) {
+                setMoveMode(false);
+            }
+            return;
+        }
+        // Horizontal navigation (columns)
+        if (key.rightArrow || input === 'l') {
+            setActiveColumn((prev) => Math.min(prev + 1, columns.length - 1));
+            setActiveRow(0); // Reset row when changing column
+        }
+        else if (key.leftArrow || input === 'h') {
+            setActiveColumn((prev) => Math.max(prev - 1, 0));
+            setActiveRow(0);
+        }
+        // Vertical navigation (tasks within column)
+        else if (key.downArrow || input === 'j') {
+            setActiveRow((prev) => Math.min(prev + 1, currentColumnTasks.length - 1));
+        }
+        else if (key.upArrow || input === 'k') {
+            setActiveRow((prev) => Math.max(prev - 1, 0));
+        }
+        // Select task
+        else if (key.return && currentTask && onSelect) {
+            onSelect(currentTask);
+        }
+        // Enter move mode
+        else if (input === 'm' && currentTask) {
+            setMoveMode(true);
+        }
+    });
+    const handleMove = (newStatus) => {
+        if (currentTask && onMove) {
+            onMove(currentTask, newStatus);
+        }
+        setMoveMode(false);
+    };
+    // Empty state
+    if (tasks.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { dimColor: true, children: "No tasks found" }), _jsx(Text, { dimColor: true, children: "Run /tlc:plan to create tasks" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [moveMode && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "yellow", children: ["Move \"", currentTask?.title, "\" to: [1] Pending [2] In Progress [3] Completed"] }) })), _jsx(Box, { children: columns.map((column, colIndex) => {
+                    const columnTasks = tasksByColumn[column.key];
+                    const isActiveColumn = colIndex === activeColumn;
+                    return (_jsxs(Box, { flexDirection: "column", width: "33%", marginRight: 1, borderStyle: isActiveColumn ? 'double' : 'single', borderColor: isActiveColumn ? 'cyan' : 'gray', children: [_jsxs(Box, { marginBottom: 1, paddingX: 1, children: [_jsx(Text, { bold: true, color: isActiveColumn ? 'cyan' : 'white', children: column.label }), _jsxs(Text, { dimColor: true, children: [" (", columnTasks.length, ")"] })] }), _jsx(Box, { flexDirection: "column", paddingX: 1, children: columnTasks.length === 0 ? (_jsx(Text, { dimColor: true, children: "- empty -" })) : (columnTasks.map((task, rowIndex) => (_jsx(Box, { marginBottom: compact ? 0 : 1, children: _jsx(TaskCard, { ...task, isSelected: isActiveColumn && rowIndex === activeRow, compact: compact }) }, task.id)))) })] }, column.key));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "h/l \u2190/\u2192 columns \u2022 j/k \u2191/\u2193 tasks \u2022 Enter select \u2022 m move" }) })] }));
+}

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

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

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { TaskBoard } from './TaskBoard.js';
+const sampleTasks = [
+    { id: 't1', title: 'Create schema', status: 'completed', priority: 'high' },
+    { id: 't2', title: 'Add validation', status: 'in_progress', assignee: 'alice' },
+    { id: 't3', title: 'Write tests', status: 'pending', priority: 'medium' },
+    { id: 't4', title: 'Add docs', status: 'pending', priority: 'low' },
+    { id: 't5', title: 'Review code', status: 'in_progress', assignee: 'bob' },
+];
+describe('TaskBoard', () => {
+    describe('Columns', () => {
+        it('shows three columns', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            expect(lastFrame()).toContain('Pending');
+            expect(lastFrame()).toContain('In Progress');
+            expect(lastFrame()).toContain('Completed');
+        });
+        it('shows task count in column headers', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            // 2 pending, 2 in progress, 1 completed
+            expect(lastFrame()).toContain('2');
+            expect(lastFrame()).toContain('1');
+        });
+        it('shows tasks in correct columns', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            expect(lastFrame()).toContain('Create schema');
+            expect(lastFrame()).toContain('Add validation');
+            expect(lastFrame()).toContain('Write tests');
+        });
+    });
+    describe('Empty State', () => {
+        it('shows empty message when no tasks', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: [] }));
+            expect(lastFrame()).toContain('No tasks');
+        });
+        it('shows empty column indicator', () => {
+            const oneTask = [
+                { id: 't1', title: 'Test', status: 'pending' },
+            ];
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: oneTask }));
+            // In Progress and Completed should be empty
+            expect(lastFrame()).toMatch(/empty|none|-/i);
+        });
+    });
+    describe('Selection', () => {
+        it('first task is selected by default', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            expect(lastFrame()).toContain('▶');
+        });
+        it('accepts initialColumn prop', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks, initialColumn: 1 }));
+            // Column 1 is "In Progress"
+            expect(lastFrame()).toContain('▶');
+        });
+        it('accepts initialRow prop', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks, initialRow: 1 }));
+            expect(lastFrame()).toContain('▶');
+        });
+    });
+    describe('Navigation Hints', () => {
+        it('shows horizontal navigation hint', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            expect(lastFrame()).toMatch(/h\/l|←\/→/);
+        });
+        it('shows vertical navigation hint', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            expect(lastFrame()).toMatch(/j\/k|↑\/↓/);
+        });
+        it('shows move task hint', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            expect(lastFrame()).toMatch(/m|move/i);
+        });
+    });
+    describe('Callbacks', () => {
+        it('calls onSelect when task selected', () => {
+            const onSelect = vi.fn();
+            render(_jsx(TaskBoard, { tasks: sampleTasks, onSelect: onSelect }));
+            // Selection happens on Enter - verified by callback presence
+            expect(onSelect).not.toHaveBeenCalled();
+        });
+        it('calls onMove when task moved', () => {
+            const onMove = vi.fn();
+            render(_jsx(TaskBoard, { tasks: sampleTasks, onMove: onMove }));
+            // Move happens on 'm' key - verified by callback presence
+            expect(onMove).not.toHaveBeenCalled();
+        });
+    });
+    describe('Compact Mode', () => {
+        it('supports compact display', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks, compact: true }));
+            expect(lastFrame()).toContain('Pending');
+        });
+    });
+    describe('Column Highlighting', () => {
+        it('highlights active column', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            // Active column should have visual distinction
+            expect(lastFrame()).toContain('Pending');
+        });
+    });
+    describe('Priority Sorting', () => {
+        it('sorts tasks by priority within column', () => {
+            const { lastFrame } = render(_jsx(TaskBoard, { tasks: sampleTasks }));
+            const output = lastFrame() || '';
+            // High priority 'Write tests' should appear before low priority 'Add docs'
+            const writeIndex = output.indexOf('Write tests');
+            const addIndex = output.indexOf('Add docs');
+            expect(writeIndex).toBeLessThan(addIndex);
+        });
+    });
+});

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

@@ -0,0 +1,17 @@
+export type TaskStatus = 'pending' | 'in_progress' | 'completed';
+export type TaskPriority = 'high' | 'medium' | 'low';
+export interface TaskCardProps {
+    id: string;
+    title: string;
+    status: TaskStatus;
+    priority?: TaskPriority;
+    assignee?: string;
+    description?: string;
+    tests?: {
+        passing: number;
+        failing: number;
+    };
+    isSelected?: boolean;
+    compact?: boolean;
+}
+export declare function TaskCard({ title, status, priority, assignee, description, tests, isSelected, compact, }: TaskCardProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/TaskCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Badge } from './ui/Badge.js';
+const priorityColors = {
+    high: 'red',
+    medium: 'yellow',
+    low: 'green',
+};
+const priorityLabels = {
+    high: '! high',
+    medium: 'medium',
+    low: 'low',
+};
+const statusIndicators = {
+    pending: { symbol: '○', color: 'gray' },
+    in_progress: { symbol: '◐', color: 'yellow' },
+    completed: { symbol: '✓', color: 'green' },
+};
+const statusLabels = {
+    pending: 'pending',
+    in_progress: 'in progress',
+    completed: 'completed',
+};
+export function TaskCard({ title, status, priority, assignee, description, tests, isSelected = false, compact = false, }) {
+    const statusInfo = statusIndicators[status];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), _jsxs(Text, { color: statusInfo.color, children: [statusInfo.symbol, " "] }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : 'white', children: title }), priority && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: priorityColors[priority], children: ["[", priorityLabels[priority], "]"] }) })), assignee && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: ["@", assignee] }) }))] }), description && !compact && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: description }) })), description && compact && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { dimColor: true, children: description.length > 40
+                        ? description.substring(0, 40) + '...'
+                        : description }) })), _jsxs(Box, { marginLeft: 4, children: [_jsx(Text, { dimColor: true, children: statusLabels[status] }), tests && (_jsx(Box, { marginLeft: 1, children: tests.failing > 0 ? (_jsxs(Badge, { variant: "error", size: "sm", children: [tests.failing, " fail"] })) : (_jsxs(Badge, { variant: "success", size: "sm", children: [tests.passing, " \u2713"] })) }))] })] }));
+}

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

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

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { TaskCard } from './TaskCard.js';
+const sampleTask = {
+    id: 't1',
+    title: 'Create user schema',
+    status: 'pending',
+    priority: 'high',
+};
+describe('TaskCard', () => {
+    describe('Basic Display', () => {
+        it('renders task title', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask }));
+            expect(lastFrame()).toContain('Create user schema');
+        });
+        it('renders task status', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask }));
+            expect(lastFrame()).toContain('pending');
+        });
+        it('renders in progress status', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, status: "in_progress" }));
+            expect(lastFrame()).toMatch(/in.progress|working/i);
+        });
+        it('renders completed status', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, status: "completed" }));
+            expect(lastFrame()).toMatch(/completed|done|✓/i);
+        });
+    });
+    describe('Priority', () => {
+        it('shows high priority indicator', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, priority: "high" }));
+            expect(lastFrame()).toMatch(/high|🔴|!/i);
+        });
+        it('shows medium priority indicator', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, priority: "medium" }));
+            expect(lastFrame()).toMatch(/medium|🟡/i);
+        });
+        it('shows low priority indicator', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, priority: "low" }));
+            expect(lastFrame()).toMatch(/low|🟢/i);
+        });
+        it('handles no priority', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { id: "t1", title: "Test", status: "pending" }));
+            expect(lastFrame()).toContain('Test');
+        });
+    });
+    describe('Assignee', () => {
+        it('shows assignee when present', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, assignee: "alice" }));
+            expect(lastFrame()).toContain('alice');
+        });
+        it('shows @ prefix for assignee', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, assignee: "bob" }));
+            expect(lastFrame()).toContain('@bob');
+        });
+        it('handles no assignee', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask }));
+            expect(lastFrame()).not.toContain('@');
+        });
+    });
+    describe('Test Status', () => {
+        it('shows passing tests badge', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, tests: { passing: 10, failing: 0 } }));
+            expect(lastFrame()).toMatch(/10.*(pass|✓)/i);
+        });
+        it('shows failing tests badge', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, tests: { passing: 8, failing: 2 } }));
+            expect(lastFrame()).toMatch(/2.*(fail|✗)/i);
+        });
+        it('handles no tests', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask }));
+            expect(lastFrame()).toContain('Create user schema');
+        });
+    });
+    describe('Selection', () => {
+        it('shows selection indicator when selected', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, isSelected: true }));
+            expect(lastFrame()).toContain('▶');
+        });
+        it('hides selection indicator when not selected', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, isSelected: false }));
+            expect(lastFrame()).not.toContain('▶');
+        });
+    });
+    describe('Display Modes', () => {
+        it('renders compact mode', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, compact: true }));
+            expect(lastFrame()).toContain('Create user schema');
+        });
+        it('renders full mode by default', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask }));
+            expect(lastFrame()).toContain('Create user schema');
+        });
+    });
+    describe('Description', () => {
+        it('shows description when present', () => {
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, description: "Define the database schema" }));
+            expect(lastFrame()).toContain('Define the database schema');
+        });
+        it('truncates long description in compact mode', () => {
+            const longDesc = 'A'.repeat(100);
+            const { lastFrame } = render(_jsx(TaskCard, { ...sampleTask, description: longDesc, compact: true }));
+            // Should not show full description in compact mode
+            const output = lastFrame() || '';
+            expect(output.length).toBeLessThan(150);
+        });
+    });
+});

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

@@ -0,0 +1,36 @@
+import { TaskStatus, TaskPriority } from './TaskCard.js';
+export interface Activity {
+    id: string;
+    type: 'status_change' | 'comment' | 'test_run' | 'file_change';
+    timestamp: string;
+    user?: string;
+    detail: string;
+}
+export interface AcceptanceCriterion {
+    id: string;
+    text: string;
+    done: boolean;
+}
+export interface TaskDetailData {
+    id: string;
+    title: string;
+    status: TaskStatus;
+    priority?: TaskPriority;
+    assignee?: string;
+    description?: string;
+    tests?: {
+        passing: number;
+        failing: number;
+    };
+    activity: Activity[];
+    files: string[];
+    acceptanceCriteria: AcceptanceCriterion[];
+}
+export interface TaskDetailProps {
+    task: TaskDetailData;
+    onBack?: () => void;
+    onClaim?: () => void;
+    onRelease?: () => void;
+    onStatusChange?: (newStatus: TaskStatus) => void;
+}
+export declare function TaskDetail({ task, onBack, onClaim, onRelease, onStatusChange, }: TaskDetailProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/TaskDetail.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { Card } from './ui/Card.js';
+import { Badge } from './ui/Badge.js';
+const statusLabels = {
+    pending: 'pending',
+    in_progress: 'in progress',
+    completed: 'completed',
+};
+const priorityColors = {
+    high: 'red',
+    medium: 'yellow',
+    low: 'green',
+};
+export function TaskDetail({ task, onBack, onClaim, onRelease, onStatusChange, }) {
+    useInput((input, key) => {
+        if (key.escape && onBack) {
+            onBack();
+        }
+        else if (input === 'c' && onClaim && !task.assignee) {
+            onClaim();
+        }
+        else if (input === 'r' && onRelease && task.assignee) {
+            onRelease();
+        }
+        else if (input === 'd' && onStatusChange && task.status !== 'completed') {
+            onStatusChange('completed');
+        }
+        else if (input === 's' && onStatusChange && task.status === 'pending') {
+            onStatusChange('in_progress');
+        }
+    });
+    const completedCriteria = task.acceptanceCriteria.filter((c) => c.done).length;
+    const totalCriteria = task.acceptanceCriteria.length;
+    const totalTests = task.tests ? task.tests.passing + task.tests.failing : 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: task.title }) }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Badge, { variant: task.status === 'completed'
+                            ? 'success'
+                            : task.status === 'in_progress'
+                                ? 'warning'
+                                : 'neutral', children: statusLabels[task.status] }), task.priority && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: priorityColors[task.priority], children: ["[", task.priority, "]"] }) })), task.assignee && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: ["@", task.assignee] }) }))] }), task.description && (_jsx(Card, { variant: "outlined", children: _jsx(Text, { children: task.description }) })), task.acceptanceCriteria.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Acceptance Criteria " }), _jsxs(Text, { dimColor: true, children: ["(", completedCriteria, "/", totalCriteria, ")"] })] }), task.acceptanceCriteria.map((criterion) => (_jsxs(Box, { children: [_jsx(Text, { color: criterion.done ? 'green' : 'gray', children: criterion.done ? '[x] ' : '[ ] ' }), _jsx(Text, { color: criterion.done ? 'green' : undefined, children: criterion.text })] }, criterion.id)))] })), task.tests && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, children: "Tests: " }), _jsxs(Badge, { variant: task.tests.failing > 0 ? 'error' : 'success', children: [task.tests.passing, "/", totalTests] }), task.tests.failing > 0 && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: "red", children: [task.tests.failing, " \u2717 failing"] }) }))] })), task.files.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Files" }) }), task.files.map((file, i) => (_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["\u2022 ", file] }) }, i)))] })), task.activity.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Activity" }) }), task.activity.map((entry) => (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: entry.timestamp }), entry.user && _jsxs(Text, { color: "cyan", children: [" @", entry.user] }), _jsxs(Text, { children: [": ", entry.detail] })] }, entry.id)))] })), _jsxs(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { dimColor: true, children: "Actions: " }), !task.assignee ? (_jsx(Text, { color: "green", children: "[c]laim " })) : (_jsx(Text, { color: "yellow", children: "[r]elease " })), task.status === 'pending' && _jsx(Text, { children: "[s]tart " }), task.status !== 'completed' && _jsx(Text, { children: "[d]one " }), _jsx(Text, { dimColor: true, children: "| Esc back" })] })] }));
+}

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

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