@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/overlay/impl/dashboard-overlay-v2.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Dashboard Overlay V2
+ *
+ * Main entry point for the CLI when startup mode is 'dashboard'.
+ * Shows current project info, recent projects, and quick actions.
+ *
+ * Two tabs:
+ * - Dashboard: Current project, recent projects, actions
+ * - More: Help links, about information
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import { type Project } from '../../../db/repositories/index.js';
+type DashboardTab = 'dashboard' | 'more';
+type DashboardAction = 'continue' | 'new' | 'projects' | 'chat' | 'workflow' | 'exit' | 'help' | 'config' | 'about';
+interface DashboardState {
+    currentTab: DashboardTab;
+    selectedIndex: number;
+    currentProject: {
+        id: number;
+        name: string;
+        displayName: string;
+        path: string;
+    } | null;
+    recentProjects: Project[];
+    progress: {
+        completed: number;
+        total: number;
+    } | null;
+}
+export interface DashboardOverlayV2Result {
+    /** The action to take after closing the overlay */
+    action: DashboardAction;
+    /** The selected project ID (for 'continue' action) */
+    projectId?: number;
+}
+export declare class DashboardOverlayV2 extends BaseOverlayV2<DashboardState, DashboardOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "dashboard-overlay-v2";
+    protected minHeight: number;
+    constructor();
+    private getDashboardItems;
+    private getMoreItems;
+    private getItems;
+    private formatProjectStatus;
+    private formatTimeAgo;
+    protected renderContent(context: RenderContext): string[];
+    private renderTabBar;
+    private renderDashboardTab;
+    private renderMoreTab;
+    private renderDashboardFooter;
+    private shortenPath;
+    handleKey(key: KeyEvent): OverlayAction<DashboardOverlayV2Result>;
+}
+export {};

package/dist/ui/overlay/impl/dashboard-overlay-v2.js

@@ -0,0 +1,359 @@
+/**
+ * Dashboard Overlay V2
+ *
+ * Main entry point for the CLI when startup mode is 'dashboard'.
+ * Shows current project info, recent projects, and quick actions.
+ *
+ * Two tabs:
+ * - Dashboard: Current project, recent projects, actions
+ * - More: Help links, about information
+ */
+import { BaseOverlayV2, isEscape, isEnter, isNavigateUp, isNavigateDown, isNavigateLeft, isNavigateRight, isTab, isShiftTab, isCtrlC, renderBorder, } from '../../base/index.js';
+import { getCurrentProject } from '../../../tools/project-db.js';
+import { projectRepository } from '../../../db/repositories/index.js';
+import { workItemRepository } from '../../../db/repositories/work-item-repository.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const VERSION = '0.4.0';
+const TARGET_HEIGHT = 20; // Without logo (logo is printed to scrolling area)
+const MAX_RECENT_PROJECTS = 3;
+// =============================================================================
+// Dashboard Overlay V2
+// =============================================================================
+export class DashboardOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'dashboard-overlay-v2';
+    minHeight = TARGET_HEIGHT;
+    constructor() {
+        // Load current project and recent projects
+        const current = getCurrentProject();
+        const { projects: recentProjects } = projectRepository.list({
+            status: 'all',
+            limit: MAX_RECENT_PROJECTS + 1, // Get one extra to exclude current
+        });
+        // Filter out current project from recent list
+        const filteredRecent = current
+            ? recentProjects.filter(p => p.id !== current.id).slice(0, MAX_RECENT_PROJECTS)
+            : recentProjects.slice(0, MAX_RECENT_PROJECTS);
+        // Get progress for current project
+        let progress = null;
+        if (current) {
+            const allItems = workItemRepository.query({ project_id: current.id });
+            const completedItems = workItemRepository.query({ project_id: current.id, status: 'completed' });
+            progress = {
+                completed: completedItems.total,
+                total: allItems.total,
+            };
+        }
+        super({
+            currentTab: 'dashboard',
+            selectedIndex: 0,
+            currentProject: current,
+            recentProjects: filteredRecent,
+            progress,
+        });
+    }
+    // ===========================================================================
+    // Get Items for Current Tab
+    // ===========================================================================
+    getDashboardItems() {
+        const items = [];
+        if (this.state.currentProject) {
+            // First item: Continue with current project
+            items.push({
+                key: '',
+                label: `Continue with ${this.state.currentProject.displayName}`,
+                description: 'Resume working on current project',
+                action: 'continue',
+            });
+        }
+        // Show recent projects as switch options (always, if any exist)
+        for (const project of this.state.recentProjects) {
+            items.push({
+                key: '',
+                label: `Switch to ${project.displayName}`,
+                description: this.formatProjectStatus(project),
+                action: 'continue',
+            });
+        }
+        // If no projects at all, show create/chat options
+        if (items.length === 0) {
+            items.push({
+                key: 'n',
+                label: '/new Project',
+                description: 'Create new or import existing project',
+                action: 'new',
+            });
+            items.push({
+                key: 'c',
+                label: 'Quick Chat',
+                description: 'Chat without project context',
+                action: 'chat',
+            });
+        }
+        return items;
+    }
+    getMoreItems() {
+        return [
+            { key: '?', label: 'Help', description: 'Show help and available commands', action: 'help' },
+            { key: '', label: 'Settings', description: 'Open configuration panel', action: 'config' },
+            { key: '', label: 'About', description: `compilr-dev-cli v${VERSION}`, action: 'about' },
+        ];
+    }
+    getItems() {
+        return this.state.currentTab === 'dashboard' ? this.getDashboardItems() : this.getMoreItems();
+    }
+    formatProjectStatus(project) {
+        const status = project.status.charAt(0).toUpperCase() + project.status.slice(1);
+        const ago = this.formatTimeAgo(project.lastActivityAt ?? project.updatedAt);
+        return `${status} • ${ago}`;
+    }
+    formatTimeAgo(date) {
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMins / 60);
+        const diffDays = Math.floor(diffHours / 24);
+        const diffWeeks = Math.floor(diffDays / 7);
+        if (diffMins < 1)
+            return 'just now';
+        if (diffMins < 60)
+            return `${String(diffMins)}m ago`;
+        if (diffHours < 24)
+            return `${String(diffHours)}h ago`;
+        if (diffDays === 1)
+            return 'yesterday';
+        if (diffDays < 7)
+            return `${String(diffDays)} days ago`;
+        if (diffWeeks === 1)
+            return '1 week ago';
+        return `${String(diffWeeks)} weeks ago`;
+    }
+    // ===========================================================================
+    // Rendering
+    // ===========================================================================
+    renderContent(context) {
+        const lines = [];
+        const s = context.styles;
+        const cols = context.width;
+        // 1. Tab bar (logo is printed to scrolling area by menuCommand)
+        lines.push(renderBorder(cols, s));
+        lines.push(this.renderTabBar(s));
+        lines.push(renderBorder(cols, s));
+        lines.push('');
+        // 3. Content based on current tab
+        if (this.state.currentTab === 'dashboard') {
+            lines.push(...this.renderDashboardTab(context));
+        }
+        else {
+            lines.push(...this.renderMoreTab(context));
+        }
+        // 4. Footer with keyboard hints
+        lines.push('');
+        lines.push(...this.renderDashboardFooter(context));
+        // Pad to target height
+        while (lines.length < TARGET_HEIGHT) {
+            lines.push('');
+        }
+        return lines;
+    }
+    renderTabBar(s) {
+        const dashLabel = this.state.currentTab === 'dashboard' ? s.selected(' Dashboard ') : s.muted(' Dashboard ');
+        const moreLabel = this.state.currentTab === 'more' ? s.selected(' More ') : s.muted(' More ');
+        const hint = s.muted('(Tab Switch · 1-2 Jump)');
+        return `  ${dashLabel} │ ${moreLabel}   ${hint}`;
+    }
+    renderDashboardTab(context) {
+        const lines = [];
+        const s = context.styles;
+        const items = this.getDashboardItems();
+        const hasProjects = this.state.currentProject || this.state.recentProjects.length > 0;
+        if (this.state.currentProject) {
+            // Current project section (display info)
+            lines.push(`  ${s.primaryBold('CURRENT PROJECT')}`);
+            lines.push(`  ${s.primary('★')} ${s.primaryBold(this.state.currentProject.displayName)}`);
+            // Path, status, mode
+            const project = projectRepository.getById(this.state.currentProject.id);
+            if (project) {
+                const pathShort = this.shortenPath(project.path);
+                lines.push(`    ${s.muted(pathShort)} │ ${s.muted(project.status)} │ ${s.muted(project.workflowMode)}`);
+            }
+            // Progress bar
+            if (this.state.progress && this.state.progress.total > 0) {
+                const pct = Math.round((this.state.progress.completed / this.state.progress.total) * 100);
+                const barWidth = 20;
+                const filled = Math.round((pct / 100) * barWidth);
+                const empty = barWidth - filled;
+                const bar = s.success('█'.repeat(filled)) + s.muted('░'.repeat(empty));
+                lines.push(`    Progress: ${bar} ${String(pct)}% (${String(this.state.progress.completed)}/${String(this.state.progress.total)} items)`);
+            }
+            lines.push('');
+        }
+        else if (hasProjects) {
+            // No current project but have recent projects - show select prompt
+            lines.push(`  ${s.primaryBold('SELECT A PROJECT')}`);
+            lines.push(`  ${s.muted('No project currently selected. Choose a project to continue.')}`);
+            lines.push('');
+        }
+        else {
+            // No projects at all - welcome screen
+            lines.push(`  ${s.primaryBold('WELCOME TO COMPILR DEV CLI')}`);
+            lines.push('');
+            lines.push(`  ${s.muted('Get started by creating a new project or importing an existing')}`);
+            lines.push(`  ${s.muted('repository. Or use Quick Chat for general assistance.')}`);
+            lines.push('');
+        }
+        // Actions list
+        lines.push(`  ${s.secondary('ACTIONS')}`);
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            const isSelected = i === this.state.selectedIndex;
+            const prefix = isSelected ? s.primary('  ❯ ') : '    ';
+            const label = isSelected ? s.primary(item.label.padEnd(35)) : item.label.padEnd(35);
+            lines.push(`${prefix}${label}${s.muted(item.description)}`);
+        }
+        // Shortcut hints (only if we have projects)
+        if (hasProjects) {
+            lines.push('');
+            lines.push(`  ${s.muted('[n] /new   [p] Projects   [c] Chat   [w] Workflow')}`);
+        }
+        return lines;
+    }
+    renderMoreTab(context) {
+        const lines = [];
+        const s = context.styles;
+        lines.push(`  ${s.primaryBold('HELP & DOCUMENTATION')}`);
+        lines.push('');
+        const items = this.getMoreItems();
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            const isSelected = i === this.state.selectedIndex;
+            const prefix = isSelected ? s.primary('  ❯ ') : '    ';
+            const label = isSelected ? s.primary(item.label.padEnd(25)) : item.label.padEnd(25);
+            lines.push(`${prefix}${label}${s.muted(item.description)}`);
+        }
+        lines.push('');
+        lines.push(`  ${s.muted('For more options, use /config to open settings.')}`);
+        return lines;
+    }
+    renderDashboardFooter(context) {
+        const s = context.styles;
+        return [
+            s.muted('  ↑↓/jk Navigate   Enter Select   q Quit'),
+        ];
+    }
+    shortenPath(fullPath) {
+        const home = process.env.HOME || process.env.USERPROFILE || '';
+        if (home && fullPath.startsWith(home)) {
+            return '~' + fullPath.slice(home.length);
+        }
+        return fullPath;
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    handleKey(key) {
+        const data = key.raw;
+        const char = data.toString();
+        const items = this.getItems();
+        // Only q exits - Escape does nothing on dashboard (it's the home screen)
+        if (char === 'q') {
+            return this.close({ action: 'exit' });
+        }
+        // Escape and Ctrl+C just do nothing on dashboard
+        if (isEscape(data) || isCtrlC(data)) {
+            return this.noAction();
+        }
+        // Tab switching
+        if (isTab(data) || isNavigateRight(data) || char === 'l') {
+            this.state.currentTab = this.state.currentTab === 'dashboard' ? 'more' : 'dashboard';
+            this.state.selectedIndex = 0;
+            return this.rerender();
+        }
+        if (isShiftTab(data) || isNavigateLeft(data) || char === 'h') {
+            this.state.currentTab = this.state.currentTab === 'dashboard' ? 'more' : 'dashboard';
+            this.state.selectedIndex = 0;
+            return this.rerender();
+        }
+        // Number keys for tab jump (1 = Dashboard, 2 = More)
+        if (char === '1') {
+            this.state.currentTab = 'dashboard';
+            this.state.selectedIndex = 0;
+            return this.rerender();
+        }
+        if (char === '2') {
+            this.state.currentTab = 'more';
+            this.state.selectedIndex = 0;
+            return this.rerender();
+        }
+        // Navigation
+        if (isNavigateUp(data) || char === 'k') {
+            if (this.state.selectedIndex > 0) {
+                this.state.selectedIndex--;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        if (isNavigateDown(data) || char === 'j') {
+            if (this.state.selectedIndex < items.length - 1) {
+                this.state.selectedIndex++;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Enter selects current item
+        if (isEnter(data)) {
+            const selectedItem = items[this.state.selectedIndex];
+            if (selectedItem) {
+                if (selectedItem.action === 'continue') {
+                    // For continue action, determine which project
+                    if (this.state.currentProject && this.state.selectedIndex === 0) {
+                        // First item = current project (only if we have a current project)
+                        return this.close({
+                            action: 'continue',
+                            projectId: this.state.currentProject.id,
+                        });
+                    }
+                    else {
+                        // Recent projects - offset by 1 if we have a current project
+                        const recentIndex = this.state.currentProject
+                            ? this.state.selectedIndex - 1
+                            : this.state.selectedIndex;
+                        const recentProject = this.state.recentProjects[recentIndex];
+                        if (recentProject) {
+                            return this.close({
+                                action: 'continue',
+                                projectId: recentProject.id,
+                            });
+                        }
+                    }
+                }
+                // For other actions (new, chat, help, config, about)
+                return this.close({ action: selectedItem.action });
+            }
+            return this.noAction();
+        }
+        // Quick action shortcuts (Dashboard tab only)
+        if (this.state.currentTab === 'dashboard') {
+            switch (char) {
+                case 'n':
+                    return this.close({ action: 'new' });
+                case 'p':
+                    return this.close({ action: 'projects' });
+                case 'c':
+                    return this.close({ action: 'chat' });
+                case 'w':
+                    if (this.state.currentProject) {
+                        return this.close({ action: 'workflow' });
+                    }
+                    return this.noAction();
+            }
+        }
+        // More tab shortcuts
+        if (this.state.currentTab === 'more' && char === '?') {
+            return this.close({ action: 'help' });
+        }
+        return this.noAction();
+    }
+}

package/dist/ui/overlay/impl/docs-overlay-v2.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Docs Overlay V2
+ *
+ * Document browser for project documents (PRD, architecture, design, notes).
+ * Uses TabbedListOverlayV2 for consistent list/tab/search behavior.
+ *
+ * Features:
+ * - Tabbed filtering by document type
+ * - Search with / toggle
+ * - Paginated list
+ * - Returns selected document for viewing in separate fullscreen overlay
+ */
+import { TabbedListOverlayV2 } from '../../base/tabbed-list-overlay-v2.js';
+import type { OverlayAction, KeyEvent } from '../types.js';
+import { type ProjectDocument } from '../../../db/repositories/document-repository.js';
+export interface DocsOverlayV2Result {
+    /** Selected document to view (if any) */
+    selectedDocument?: ProjectDocument;
+    /** Whether user cancelled (Ctrl+C or Esc) */
+    cancelled: boolean;
+}
+export declare class DocsOverlayV2 extends TabbedListOverlayV2<ProjectDocument, DocsOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "docs-overlay-v2";
+    private readonly projectName;
+    /**
+     * @param projectId - Optional project ID to view documents for.
+     *                    If not provided, uses the active project.
+     *                    Pass this when opening from workflow overlay for a specific project.
+     */
+    constructor(projectId?: number);
+    /**
+     * Override to render project name in header
+     */
+    protected renderHeader(title: string, subtitle?: string): string[];
+    /**
+     * Override to handle item selection.
+     * Returns the selected document so the command handler can show it in a fullscreen overlay.
+     */
+    protected onItemSelected(doc: ProjectDocument): DocsOverlayV2Result | undefined;
+    /**
+     * Override to return result on close
+     */
+    handleKey(key: KeyEvent): OverlayAction<DocsOverlayV2Result>;
+}

package/dist/ui/overlay/impl/docs-overlay-v2.js

@@ -0,0 +1,114 @@
+/**
+ * Docs Overlay V2
+ *
+ * Document browser for project documents (PRD, architecture, design, notes).
+ * Uses TabbedListOverlayV2 for consistent list/tab/search behavior.
+ *
+ * Features:
+ * - Tabbed filtering by document type
+ * - Search with / toggle
+ * - Paginated list
+ * - Returns selected document for viewing in separate fullscreen overlay
+ */
+import { TabbedListOverlayV2 } from '../../base/tabbed-list-overlay-v2.js';
+import { documentRepository } from '../../../db/repositories/document-repository.js';
+import { getActiveProject } from '../../../tools/project-db.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 10;
+const DOC_TYPE_LABELS = {
+    'prd': 'PRD',
+    'architecture': 'ARCH',
+    'design': 'DESIGN',
+    'notes': 'NOTES',
+};
+const TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'prd', label: 'PRD' },
+    { id: 'architecture', label: 'ARCH' },
+    { id: 'design', label: 'DESIGN' },
+    { id: 'notes', label: 'NOTES' },
+];
+// =============================================================================
+// Docs Overlay V2
+// =============================================================================
+export class DocsOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'docs-overlay-v2';
+    projectName;
+    /**
+     * @param projectId - Optional project ID to view documents for.
+     *                    If not provided, uses the active project.
+     *                    Pass this when opening from workflow overlay for a specific project.
+     */
+    constructor(projectId) {
+        // Use provided projectId, or fall back to active project
+        const activeProject = getActiveProject();
+        const resolvedProjectId = projectId ?? activeProject?.id ?? null;
+        const projectName = projectId
+            ? null // Will be loaded if needed, but we don't have it here
+            : activeProject?.displayName ?? null;
+        // Load documents
+        const documents = resolvedProjectId !== null
+            ? documentRepository.listByProject(resolvedProjectId)
+            : [];
+        super({
+            title: 'Documents',
+            tabs: TABS,
+            items: documents,
+            pageSize: PAGE_SIZE,
+            filterByTab: (doc, tabId) => {
+                if (tabId === 'all')
+                    return true;
+                return doc.docType === tabId;
+            },
+            getSearchText: (doc) => `${doc.title} ${doc.docType}`,
+            renderItem: (doc, isSelected, styles) => {
+                const prefix = isSelected ? styles.primary('❯ ') : '  ';
+                const typeLabel = (DOC_TYPE_LABELS[doc.docType] || doc.docType).padEnd(8);
+                const title = doc.title.slice(0, 50);
+                if (isSelected) {
+                    return `${prefix}${styles.primaryBold(typeLabel)}  ${styles.primary(title)}`;
+                }
+                return `${prefix}${styles.muted(typeLabel)}  ${styles.secondary(title)}`;
+            },
+            showCount: true,
+            emptyMessage: resolvedProjectId === null
+                ? 'No active project. Use /projects to select one.'
+                : 'No documents found. Use /design or /arch to create documents.',
+            noResultsMessage: 'No documents match the search.',
+        });
+        this.projectName = projectName;
+        this.minHeight = 20;
+    }
+    /**
+     * Override to render project name in header
+     */
+    renderHeader(title, subtitle) {
+        const displaySubtitle = this.projectName || subtitle;
+        return super.renderHeader(title, displaySubtitle);
+    }
+    /**
+     * Override to handle item selection.
+     * Returns the selected document so the command handler can show it in a fullscreen overlay.
+     */
+    onItemSelected(doc) {
+        return { selectedDocument: doc, cancelled: false };
+    }
+    /**
+     * Override to return result on close
+     */
+    handleKey(key) {
+        // Check for close keys first
+        if (this.isInterruptKey(key)) {
+            return this.close({ cancelled: true });
+        }
+        if (this.isCloseKey(key) && !this.state.searchMode) {
+            return this.close({ cancelled: true });
+        }
+        // Let parent handle everything else (including Enter → onItemSelected)
+        // Parent will return the result from onItemSelected, so pass it through
+        return super.handleKey(key);
+    }
+}

package/dist/ui/overlay/impl/document-detail-overlay-v2.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Document Detail Overlay V2
+ *
+ * Fullscreen markdown document viewer AND editor with vim-style navigation.
+ * Separate from DocsOverlayV2 (inline list) to allow proper fullscreen rendering.
+ *
+ * Features:
+ * - Full-screen document viewing with markdown rendering
+ * - Vim-style navigation (j/k, g/G, PgUp/PgDn)
+ * - Edit mode with raw markdown editing
+ * - Save to database (Ctrl+S)
+ * - Dirty check with save prompt on exit
+ */
+import { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import { type ProjectDocument } from '../../../db/repositories/document-repository.js';
+export interface DocumentDetailResult {
+    /** Whether to go back to the document list */
+    goBack: boolean;
+}
+interface DocumentDetailState {
+    contentLines: string[];
+    scrollOffset: number;
+    isEditMode: boolean;
+    rawLines: string[];
+    cursorLine: number;
+    cursorColumn: number;
+    editScrollOffset: number;
+    isDirty: boolean;
+    originalContent: string;
+    showSavePrompt: boolean;
+    saveMessage: string | null;
+}
+/**
+ * Fullscreen document viewer and editor overlay.
+ * Shows a single document with vim-style scrolling navigation.
+ * Supports edit mode for modifying raw markdown content.
+ */
+export declare class DocumentDetailOverlayV2 extends BaseOverlayV2<DocumentDetailState, DocumentDetailResult> {
+    private readonly document;
+    readonly type: "inline";
+    readonly id = "document-detail-overlay-v2";
+    readonly usesAlternateScreen = true;
+    constructor(document: ProjectDocument);
+    /**
+     * Enter alternate screen buffer when overlay mounts.
+     * This preserves the main screen content.
+     */
+    onMount(): void;
+    /**
+     * Exit alternate screen buffer when overlay unmounts.
+     * This restores the main screen content.
+     */
+    onUnmount(): void;
+    protected renderContent(context: RenderContext): string[];
+    private renderViewMode;
+    private renderEditMode;
+    private renderLineWithCursor;
+    private ensureCursorVisible;
+    handleKey(key: KeyEvent): OverlayAction<DocumentDetailResult>;
+    private handleViewModeKey;
+    private handleEditModeKey;
+    private handleSavePromptKey;
+    private moveCursorUp;
+    private moveCursorDown;
+    private moveCursorLeft;
+    private moveCursorRight;
+    private clampCursorColumn;
+    private getCurrentLine;
+    private insertText;
+    private handleBackspace;
+    private handleDelete;
+    private handleEnter;
+    private saveDocument;
+    private exitEditMode;
+}
+export {};