@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/workflow-overlay.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Workflow Overlay
+ *
+ * Unified project dashboard with tabbed interface:
+ *   [Actions]   - Quick actions based on workflow state
+ *   [Details]   - Project metadata (read-only)
+ *   [Dashboard] - Overview of project status (placeholder)
+ *   [Manage]    - Project management actions
+ *
+ * Access paths:
+ *   /workflow         - Opens workflow for active project
+ *   /projects → Enter - Opens workflow for selected project
+ *
+ * Workflow phases:
+ *   /new → /design|/sketch → /backlog → /build → /scaffold → done
+ */
+export interface WorkflowOverlayResult {
+    command: string | null;
+    action?: 'set-active' | 'archive' | 'restore' | 'delete' | 'edit';
+    projectId?: number;
+}
+export declare function showWorkflowOverlay(projectId?: number): Promise<WorkflowOverlayResult>;

package/dist/ui/workflow-overlay.js

@@ -0,0 +1,636 @@
+/**
+ * Workflow Overlay
+ *
+ * Unified project dashboard with tabbed interface:
+ *   [Actions]   - Quick actions based on workflow state
+ *   [Details]   - Project metadata (read-only)
+ *   [Dashboard] - Overview of project status (placeholder)
+ *   [Manage]    - Project management actions
+ *
+ * Access paths:
+ *   /workflow         - Opens workflow for active project
+ *   /projects → Enter - Opens workflow for selected project
+ *
+ * Workflow phases:
+ *   /new → /design|/sketch → /backlog → /build → /scaffold → done
+ */
+import * as terminal from './terminal.js';
+import { getActiveProject, setActiveProject, clearActiveProject } from '../tools/project-db.js';
+import { BaseOverlay, isEscape, isTab, isShiftTab, isEnter, isCtrlC, isNavigateUp, isNavigateDown, isLeftArrow, isRightArrow, isClose, extractPrintable, renderBorder, } from './base/index.js';
+import { TabFeature } from './features/tab-feature.js';
+import { projectRepository, workItemRepository, documentRepository } from '../db/repositories/index.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PHASES = [
+    {
+        id: 'init',
+        name: 'Initialize',
+        command: '/new',
+        description: 'Create project structure',
+        isComplete: (project) => !!project,
+        isActive: (project) => !project,
+    },
+    {
+        id: 'design',
+        name: 'Design',
+        command: '/design',
+        description: 'Define requirements and PRD',
+        isComplete: (_project, stats) => stats.hasPrd,
+        isActive: (_project, stats) => !stats.hasPrd && stats.totalItems === 0,
+    },
+    {
+        id: 'backlog',
+        name: 'Backlog',
+        command: '/backlog',
+        description: 'Plan and prioritize work items',
+        isComplete: (_project, stats) => stats.totalItems >= 3,
+        isActive: (_project, stats) => stats.hasPrd && stats.totalItems < 3,
+    },
+    {
+        id: 'scaffold',
+        name: 'Scaffold',
+        command: '/scaffold',
+        description: 'Create project foundation',
+        isComplete: (_project, stats) => stats.hasScaffold,
+        isActive: (_project, stats) => stats.totalItems >= 3 && !stats.hasScaffold,
+    },
+    {
+        id: 'build',
+        name: 'Build',
+        command: '/build',
+        description: 'Implement backlog items',
+        isComplete: (_project, stats) => stats.completedItems >= stats.totalItems && stats.totalItems > 0,
+        isActive: (_project, stats) => stats.hasScaffold && stats.completedItems < stats.totalItems,
+    },
+];
+const TABS = [
+    { id: 'actions', label: 'Actions' },
+    { id: 'details', label: 'Details' },
+    { id: 'dashboard', label: 'Dashboard' },
+    { id: 'manage', label: 'Manage' },
+];
+const MAX_ACTIONS = 6;
+// =============================================================================
+// Helper Functions
+// =============================================================================
+function getProjectStats(project) {
+    const itemsResult = workItemRepository.query({
+        project_id: project.id,
+        limit: 1000,
+    });
+    const items = itemsResult.items;
+    const completedItems = items.filter(i => i.status === 'completed').length;
+    const inProgressItems = items.filter(i => i.status === 'in_progress').length;
+    const docs = documentRepository.listByProject(project.id);
+    const hasPrd = docs.some(d => d.docType === 'prd');
+    const hasArchDocs = docs.some(d => d.docType === 'architecture');
+    const hasScaffold = items.some(i => i.title.toLowerCase().includes('scaffold') && i.status === 'completed') || project.metadata?.scaffolded === true;
+    return {
+        totalItems: items.length,
+        completedItems,
+        inProgressItems,
+        hasPrd,
+        hasArchDocs,
+        hasScaffold,
+    };
+}
+function buildActionsItems(project, stats) {
+    const actions = [];
+    if (!project) {
+        actions.push({
+            label: 'Initialize Project',
+            command: '/new',
+            description: 'Create a new project',
+            enabled: true,
+        });
+        return actions;
+    }
+    if (!stats) {
+        return actions;
+    }
+    if (!stats.hasPrd) {
+        actions.push({
+            label: 'Design Project',
+            command: '/design',
+            description: 'Create PRD and requirements',
+            enabled: true,
+        });
+        actions.push({
+            label: 'Quick Sketch',
+            command: '/sketch',
+            description: 'Lightweight project outline',
+            enabled: true,
+        });
+    }
+    if (stats.hasPrd || stats.totalItems > 0) {
+        actions.push({
+            label: 'View Backlog',
+            command: '/backlog',
+            description: `${String(stats.totalItems)} items, ${String(stats.completedItems)} done`,
+            enabled: true,
+        });
+    }
+    if (stats.totalItems > 0 && !stats.hasScaffold) {
+        actions.push({
+            label: 'Scaffold Project',
+            command: '/scaffold',
+            description: 'Create project foundation',
+            enabled: true,
+        });
+    }
+    if (stats.hasScaffold && stats.totalItems > stats.completedItems) {
+        actions.push({
+            label: 'Build Next Item',
+            command: '/build',
+            description: `${String(stats.totalItems - stats.completedItems)} items remaining`,
+            enabled: true,
+        });
+    }
+    actions.push({
+        label: 'View Documents',
+        command: '/docs',
+        description: 'Browse project documents',
+        enabled: stats.hasPrd || stats.hasArchDocs,
+    });
+    actions.push({
+        label: 'View Anchors',
+        command: '/anchors',
+        description: 'Manage persistent context',
+        enabled: true,
+    });
+    return actions;
+}
+function buildManageActions(project) {
+    const actions = [];
+    if (!project) {
+        return actions;
+    }
+    actions.push({
+        id: 'edit',
+        label: 'Edit Project',
+        command: '',
+        description: 'Change name, description',
+        enabled: true,
+        style: 'normal',
+    });
+    const activeProject = getActiveProject();
+    if (!activeProject || activeProject.id !== project.id) {
+        actions.push({
+            id: 'set-active',
+            label: 'Set as Active',
+            command: '',
+            description: 'Make this the active project',
+            enabled: true,
+            style: 'normal',
+        });
+    }
+    if (project.status === 'archived') {
+        actions.push({
+            id: 'restore',
+            label: 'Restore Project',
+            command: '',
+            description: 'Restore from archive',
+            enabled: true,
+            style: 'normal',
+        });
+    }
+    else {
+        actions.push({
+            id: 'archive',
+            label: 'Archive Project',
+            command: '',
+            description: 'Hide from active list',
+            enabled: true,
+            style: 'warning',
+        });
+    }
+    actions.push({
+        id: 'delete',
+        label: 'Delete Project',
+        command: '',
+        description: 'Permanently remove',
+        enabled: true,
+        style: 'danger',
+    });
+    return actions;
+}
+function formatRelativeTime(date) {
+    if (!date)
+        return 'never';
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return 'just now';
+    if (diffMins < 60)
+        return `${String(diffMins)}m ago`;
+    if (diffHours < 24)
+        return `${String(diffHours)}h ago`;
+    if (diffDays < 7)
+        return `${String(diffDays)}d ago`;
+    return date.toLocaleDateString();
+}
+function formatStatus(status, s) {
+    switch (status) {
+        case 'active':
+            return s.success('active');
+        case 'paused':
+            return s.warning('paused');
+        case 'completed':
+            return s.info('completed');
+        case 'archived':
+            return s.muted('archived');
+        default:
+            return s.muted(status);
+    }
+}
+// =============================================================================
+// Workflow Overlay Class
+// =============================================================================
+class WorkflowOverlay extends BaseOverlay {
+    tabFeature;
+    constructor(projectId) {
+        // Load project data
+        let project = null;
+        let stats = null;
+        if (projectId) {
+            try {
+                project = projectRepository.getById(projectId);
+                if (project) {
+                    stats = getProjectStats(project);
+                }
+            }
+            catch {
+                // Project not found
+            }
+        }
+        else {
+            const activeProject = getActiveProject();
+            if (activeProject) {
+                try {
+                    project = projectRepository.getById(activeProject.id);
+                    if (project) {
+                        stats = getProjectStats(project);
+                    }
+                }
+                catch {
+                    // Project not found
+                }
+            }
+        }
+        const initialState = {
+            lineCount: 0,
+            maxLineCount: 0,
+            currentTab: 0,
+            project,
+            stats,
+            actionsIndex: 0,
+            manageActionIndex: 0,
+            actionsItems: buildActionsItems(project, stats),
+            manageActions: buildManageActions(project),
+        };
+        super(initialState, { minHeight: 18 });
+        this.tabFeature = new TabFeature(TABS, () => {
+            // Tab changed - no special handling needed
+        });
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header with project name
+        const projectName = this.state.project ? this.state.project.displayName : 'No Project';
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Workflow:')} ${s.primary(projectName)}`);
+        lines.push('');
+        // Tab bar
+        const tabBar = this.tabFeature.renderTabs(this.state, s);
+        const tabHint = s.muted(`(${this.tabFeature.renderHints()} · 1-4)`);
+        lines.push(`  ${tabBar}  ${tabHint}`);
+        lines.push('');
+        // Project info + Progress row
+        if (this.state.project && this.state.stats) {
+            const progress = this.state.stats.totalItems > 0
+                ? Math.round((this.state.stats.completedItems / this.state.stats.totalItems) * 100)
+                : 0;
+            const barWidth = 20;
+            const filledWidth = Math.round((progress / 100) * barWidth);
+            const bar = '█'.repeat(filledWidth) + '░'.repeat(barWidth - filledWidth);
+            lines.push(`  ${s.muted('Status:')} ${formatStatus(this.state.project.status, s)}  ${s.muted('Mode:')} ${this.state.project.workflowMode}`);
+            lines.push(`  ${s.muted('Progress:')} ${String(this.state.stats.completedItems)}/${String(this.state.stats.totalItems)} [${s.primary(bar)}] ${String(progress)}%`);
+        }
+        else {
+            lines.push(`  ${s.warning('No active project')}  ${s.muted('Run /new to create')}`);
+            lines.push('');
+        }
+        lines.push('');
+        // Workflow phases (horizontal)
+        if (this.state.project && this.state.stats) {
+            let phaseLine = '  ';
+            for (const phase of PHASES) {
+                const isComplete = phase.isComplete(this.state.project, this.state.stats);
+                const isActive = phase.isActive(this.state.project, this.state.stats);
+                let icon;
+                let label;
+                if (isComplete) {
+                    icon = s.success('✓');
+                    label = s.muted(phase.name);
+                }
+                else if (isActive) {
+                    icon = s.primary('►');
+                    label = s.primary(phase.name);
+                }
+                else {
+                    icon = s.muted('○');
+                    label = s.muted(phase.name);
+                }
+                phaseLine += `${icon} ${label}  `;
+            }
+            lines.push(phaseLine);
+        }
+        else {
+            lines.push(`  ${s.muted('○ Init  ○ Design  ○ Backlog  ○ Scaffold  ○ Build')}`);
+        }
+        lines.push('');
+        lines.push(border);
+        // Tab content
+        const tabId = TABS[this.state.currentTab]?.id ?? 'actions';
+        switch (tabId) {
+            case 'actions':
+                this.renderActionsTab(lines);
+                break;
+            case 'details':
+                this.renderDetailsTab(lines);
+                break;
+            case 'dashboard':
+                this.renderDashboardTab(lines);
+                break;
+            case 'manage':
+                this.renderManageTab(lines);
+                break;
+        }
+        // Footer
+        lines.push('');
+        lines.push(border);
+        lines.push(`  ${s.muted('↑↓/jk Navigate · ←→/hl Tabs · Enter Action · q/Esc Close')}`);
+        lines.push(border);
+        return lines;
+    }
+    renderActionsTab(lines) {
+        const s = this.styles;
+        lines.push(`  ${s.muted('Quick Actions:')}`);
+        lines.push('');
+        if (this.state.actionsItems.length > 0) {
+            const displayActions = this.state.actionsItems.slice(0, MAX_ACTIONS);
+            for (let i = 0; i < displayActions.length; i++) {
+                const action = displayActions[i];
+                const isSelected = i === this.state.actionsIndex;
+                const prefix = isSelected ? s.primary('❯ ') : '  ';
+                const labelWidth = 20;
+                const paddedLabel = action.label.padEnd(labelWidth);
+                if (action.enabled) {
+                    const label = isSelected ? s.primary(paddedLabel) : paddedLabel;
+                    const desc = s.muted(action.description);
+                    lines.push(`  ${prefix}${label}  ${desc}`);
+                }
+                else {
+                    lines.push(`  ${prefix}${s.muted(paddedLabel)}  ${s.muted(action.description)}`);
+                }
+            }
+        }
+        else {
+            lines.push(`  ${s.muted('  No actions available')}`);
+        }
+    }
+    renderDetailsTab(lines) {
+        const s = this.styles;
+        if (!this.state.project) {
+            lines.push(`  ${s.muted('No project selected')}`);
+            return;
+        }
+        const project = this.state.project;
+        lines.push(`  ${s.muted('Project Details:')}`);
+        lines.push('');
+        const infoRows = [
+            ['Name', project.name],
+            ['Display Name', project.displayName],
+            ['Type', project.type],
+            ['Path', project.path],
+            ['Created', project.createdAt.toLocaleDateString()],
+            ['Last Activity', formatRelativeTime(project.lastActivityAt)],
+            ['Lifecycle', project.lifecycleState],
+        ];
+        for (const [label, value] of infoRows) {
+            lines.push(`  ${s.muted(label.padEnd(15))} ${value}`);
+        }
+        if (project.description) {
+            lines.push('');
+            lines.push(`  ${s.muted('Description:')}`);
+            lines.push(`    ${project.description}`);
+        }
+    }
+    renderDashboardTab(lines) {
+        const s = this.styles;
+        if (!this.state.project) {
+            lines.push(`  ${s.muted('No project selected')}`);
+            return;
+        }
+        lines.push(`  ${s.muted('Dashboard:')}`);
+        lines.push('');
+        lines.push(`  ${s.warning('Coming soon...')}`);
+        lines.push('');
+        lines.push(`  ${s.muted('This tab will show:')}`);
+        lines.push(`  ${s.muted('• Current in-progress work item')}`);
+        lines.push(`  ${s.muted('• Recent activity')}`);
+        lines.push(`  ${s.muted('• Project health indicators')}`);
+    }
+    renderManageTab(lines) {
+        const s = this.styles;
+        if (!this.state.project) {
+            lines.push(`  ${s.muted('No project selected')}`);
+            return;
+        }
+        lines.push(`  ${s.muted('Management Actions:')}`);
+        lines.push('');
+        const actions = this.state.manageActions;
+        if (actions.length > 0) {
+            for (let i = 0; i < actions.length; i++) {
+                const action = actions[i];
+                const isSelected = i === this.state.manageActionIndex;
+                const prefix = isSelected ? s.primary('❯ ') : '  ';
+                const labelWidth = 20;
+                const paddedLabel = action.label.padEnd(labelWidth);
+                let labelStyle;
+                if (isSelected) {
+                    labelStyle = action.style === 'danger' ? s.error :
+                        action.style === 'warning' ? s.warning : s.primary;
+                }
+                else {
+                    labelStyle = action.style === 'danger' ? s.error :
+                        action.style === 'warning' ? s.warning : (text) => text;
+                }
+                lines.push(`  ${prefix}${labelStyle(paddedLabel)}  ${s.muted(action.description)}`);
+            }
+        }
+    }
+    handleKey(data) {
+        // Ctrl+C always closes
+        if (isCtrlC(data)) {
+            this.close({ command: null });
+            return;
+        }
+        // q or Esc closes
+        if (isEscape(data) || isClose(data)) {
+            this.close({ command: null });
+            return;
+        }
+        // Tab switching: Tab/→/l for next, Shift+Tab/←/h for previous
+        if (isTab(data) || isRightArrow(data)) {
+            this.state.currentTab = (this.state.currentTab + 1) % TABS.length;
+            this.update();
+            return;
+        }
+        if (isShiftTab(data) || isLeftArrow(data)) {
+            this.state.currentTab = (this.state.currentTab - 1 + TABS.length) % TABS.length;
+            this.update();
+            return;
+        }
+        // Vim-style tab navigation (h/l)
+        const char = extractPrintable(data);
+        if (char === 'l') {
+            this.state.currentTab = (this.state.currentTab + 1) % TABS.length;
+            this.update();
+            return;
+        }
+        if (char === 'h') {
+            this.state.currentTab = (this.state.currentTab - 1 + TABS.length) % TABS.length;
+            this.update();
+            return;
+        }
+        // Number keys to jump to tab (1-4)
+        if (char && char >= '1' && char <= '4') {
+            const tabNum = parseInt(char, 10) - 1;
+            if (tabNum < TABS.length) {
+                this.state.currentTab = tabNum;
+                this.update();
+            }
+            return;
+        }
+        // Tab-specific key handling
+        const tabId = TABS[this.state.currentTab]?.id ?? 'actions';
+        if (tabId === 'actions') {
+            this.handleActionsTabKey(data);
+        }
+        else if (tabId === 'manage') {
+            this.handleManageTabKey(data);
+        }
+        // Details and Dashboard tabs are read-only
+    }
+    handleActionsTabKey(data) {
+        if (isNavigateUp(data)) {
+            if (this.state.actionsItems.length > 0) {
+                this.state.actionsIndex = (this.state.actionsIndex - 1 + this.state.actionsItems.length) % this.state.actionsItems.length;
+                this.update();
+            }
+            return;
+        }
+        if (isNavigateDown(data)) {
+            if (this.state.actionsItems.length > 0) {
+                this.state.actionsIndex = (this.state.actionsIndex + 1) % this.state.actionsItems.length;
+                this.update();
+            }
+            return;
+        }
+        if (isEnter(data)) {
+            if (this.state.actionsItems.length > 0) {
+                const action = this.state.actionsItems[this.state.actionsIndex];
+                if (action.enabled) {
+                    this.close({ command: action.command });
+                }
+            }
+            return;
+        }
+    }
+    handleManageTabKey(data) {
+        if (isNavigateUp(data)) {
+            if (this.state.manageActions.length > 0) {
+                this.state.manageActionIndex = (this.state.manageActionIndex - 1 + this.state.manageActions.length) % this.state.manageActions.length;
+                this.update();
+            }
+            return;
+        }
+        if (isNavigateDown(data)) {
+            if (this.state.manageActions.length > 0) {
+                this.state.manageActionIndex = (this.state.manageActionIndex + 1) % this.state.manageActions.length;
+                this.update();
+            }
+            return;
+        }
+        if (isEnter(data)) {
+            if (this.state.manageActions.length > 0 && this.state.project) {
+                const action = this.state.manageActions[this.state.manageActionIndex];
+                this.executeManageAction(action);
+            }
+            return;
+        }
+    }
+    executeManageAction(action) {
+        if (!this.state.project)
+            return;
+        switch (action.id) {
+            case 'set-active':
+                setActiveProject({
+                    id: this.state.project.id,
+                    name: this.state.project.name,
+                    displayName: this.state.project.displayName,
+                    path: this.state.project.path,
+                });
+                projectRepository.touch(this.state.project.id);
+                this.state.manageActions = buildManageActions(this.state.project);
+                this.update();
+                break;
+            case 'archive': {
+                projectRepository.update(this.state.project.id, { status: 'archived' });
+                const activeProject = getActiveProject();
+                if (activeProject?.id === this.state.project.id) {
+                    clearActiveProject();
+                }
+                this.refreshProject();
+                break;
+            }
+            case 'restore':
+                projectRepository.update(this.state.project.id, { status: 'active' });
+                this.refreshProject();
+                break;
+            case 'edit':
+            case 'delete':
+                this.close({
+                    command: null,
+                    action: action.id,
+                    projectId: this.state.project.id,
+                });
+                break;
+        }
+    }
+    refreshProject() {
+        if (!this.state.project)
+            return;
+        this.state.project = projectRepository.getById(this.state.project.id);
+        if (this.state.project) {
+            this.state.stats = getProjectStats(this.state.project);
+            this.state.actionsItems = buildActionsItems(this.state.project, this.state.stats);
+            this.state.manageActions = buildManageActions(this.state.project);
+        }
+        this.update();
+    }
+}
+// =============================================================================
+// Export Function (Backward Compatible)
+// =============================================================================
+export function showWorkflowOverlay(projectId) {
+    return new WorkflowOverlay(projectId).show();
+}

package/dist/utils/debug-log.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Debug Logger
+ *
+ * Writes timestamped logs to a file for debugging timing issues.
+ * Usage: import { debugLog } from './utils/debug-log.js';
+ *        debugLog('event-name', 'description');
+ *
+ * For rendering debug: set DEBUG_RENDERING=1 environment variable
+ * Usage: DEBUG_RENDERING=1 compilr
+ *        Then: tail -f /tmp/compilr-debug.log
+ */
+export declare const DEBUG_RENDERING: boolean;
+/**
+ * Log a debug message with timestamp
+ */
+export declare function debugLog(event: string, details?: string): void;
+/**
+ * Clear the log file
+ */
+export declare function clearDebugLog(): void;
+/**
+ * Get the log file path
+ */
+export declare function getDebugLogPath(): string;
+/**
+ * Log rendering-specific debug info (only if DEBUG_RENDERING=1)
+ */
+export declare function debugRender(component: string, details: string): void;