@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -0,0 +1,17 @@
+/**
+ * Docs Overlay
+ *
+ * Document browser for project documents (PRD, architecture, design, notes).
+ * Uses TabbedListOverlay for consistent list/tab/search behavior.
+ *
+ * Features:
+ * - Tabbed filtering by document type
+ * - Search with / toggle
+ * - Paginated list
+ * - Full-screen document viewing with markdown rendering
+ * - Vim-style navigation in viewer (j/k, g/G, PgUp/PgDn)
+ */
+export interface DocsOverlayResult {
+    viewed: boolean;
+}
+export declare function showDocsOverlay(): Promise<DocsOverlayResult>;

package/dist/ui/docs-overlay.js

@@ -0,0 +1,303 @@
+/**
+ * Docs Overlay
+ *
+ * Document browser for project documents (PRD, architecture, design, notes).
+ * Uses TabbedListOverlay for consistent list/tab/search behavior.
+ *
+ * Features:
+ * - Tabbed filtering by document type
+ * - Search with / toggle
+ * - Paginated list
+ * - Full-screen document viewing with markdown rendering
+ * - Vim-style navigation in viewer (j/k, g/G, PgUp/PgDn)
+ */
+import chalk from 'chalk';
+import { marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import * as terminal from './terminal.js';
+import { getCurrentTheme } from '../themes/index.js';
+import { TabbedListOverlay, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isNavigateUp, isNavigateDown, isSpace, isClose, renderBorder, } from './base/index.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' },
+];
+// =============================================================================
+// Markdown Rendering
+// =============================================================================
+function getThemedMarkedOptions() {
+    const theme = getCurrentTheme();
+    const primaryColor = chalk.hex(theme.colors.primary);
+    const secondaryColor = chalk.hex(theme.colors.secondary || theme.colors.primary);
+    const mutedColor = chalk.hex(theme.colors.muted);
+    const borderColor = chalk.hex(theme.colors.border);
+    const fgColor = chalk.hex(theme.colors.foreground);
+    return {
+        showSectionPrefix: false,
+        reflowText: false,
+        width: Math.min(100, terminal.getTerminalWidth() - 4),
+        unescape: true,
+        tab: 2,
+        heading: primaryColor.bold,
+        firstHeading: primaryColor.bold,
+        strong: fgColor.bold,
+        em: fgColor.italic,
+        link: secondaryColor,
+        href: secondaryColor.underline,
+        blockquote: mutedColor.italic,
+        del: mutedColor.strikethrough,
+        hr: borderColor,
+        codespan: secondaryColor,
+        code: secondaryColor,
+        html: mutedColor,
+        table: fgColor,
+        listitem: fgColor,
+        paragraph: fgColor,
+        tableOptions: {
+            style: { head: ['bold'], border: [] },
+            chars: {
+                'top': '─', 'top-mid': '─', 'top-left': '─', 'top-right': '─',
+                'bottom': '─', 'bottom-mid': '─', 'bottom-left': '─', 'bottom-right': '─',
+                'left': ' ', 'left-mid': ' ', 'mid': '─', 'mid-mid': '─',
+                'right': ' ', 'right-mid': ' ', 'middle': ' ',
+            },
+        },
+    };
+}
+function preprocessMarkdown(content) {
+    const lines = content.split('\n');
+    return lines.map(line => /^(\s*)\* /.test(line) ? line.replace(/^(\s*)\* /, '$1- ') : line).join('\n');
+}
+function postProcessInlineFormatting(text) {
+    return text.replace(/\*\*([^*]+)\*\*/g, (_match, content) => chalk.bold(content));
+}
+function renderMarkdownSync(content) {
+    const preprocessed = preprocessMarkdown(content);
+    const options = getThemedMarkedOptions();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+    marked.use(markedTerminal(options));
+    // Use synchronous parsing to avoid async rendering issues
+    const rendered = marked.parse(preprocessed, { async: false });
+    const postProcessed = postProcessInlineFormatting(rendered);
+    return postProcessed.split('\n');
+}
+/**
+ * Full-screen document viewer with vim-style navigation.
+ */
+class DocumentViewScreen extends BaseScreen {
+    document;
+    styles;
+    viewState;
+    constructor(document, styles) {
+        super();
+        this.document = document;
+        this.styles = styles;
+        // Load content synchronously in constructor so it's ready for first render
+        this.viewState = {
+            contentLines: renderMarkdownSync(document.content),
+            scrollOffset: 0,
+        };
+    }
+    /**
+     * Called when entering this screen.
+     * Clear screen for full-screen view.
+     */
+    onEnter() {
+        terminal.clearScreen();
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const rows = process.stdout.rows || 30;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        const typeLabel = DOC_TYPE_LABELS[this.document.docType] || this.document.docType.toUpperCase();
+        lines.push(border);
+        lines.push(` ${s.primaryBold(typeLabel)}${s.muted(' │ ')}${chalk.bold(this.document.title)}`);
+        lines.push(border);
+        // Calculate content area
+        const headerLines = 3;
+        const footerLines = 3;
+        const contentHeight = rows - headerLines - footerLines;
+        // Get visible lines, accounting for wrapping
+        // We need to count physical lines (after wrapping) not logical lines
+        const totalLines = this.viewState.contentLines.length;
+        const visibleLines = [];
+        let physicalLinesUsed = 0;
+        for (let i = this.viewState.scrollOffset; i < totalLines && physicalLinesUsed < contentHeight; i++) {
+            const line = this.viewState.contentLines[i];
+            // Calculate how many physical lines this content line takes
+            // Strip ANSI codes for accurate width calculation
+            // eslint-disable-next-line no-control-regex
+            const visualLen = line.replace(/\x1b\[[0-9;]*m/g, '').length;
+            const linePhysicalHeight = Math.max(1, Math.ceil(visualLen / cols));
+            if (physicalLinesUsed + linePhysicalHeight <= contentHeight) {
+                visibleLines.push(line);
+                physicalLinesUsed += linePhysicalHeight;
+            }
+            else {
+                break; // No room for this line
+            }
+        }
+        // Content
+        for (const line of visibleLines) {
+            lines.push(line);
+        }
+        // Pad remaining physical space
+        for (let i = physicalLinesUsed; i < contentHeight; i++) {
+            lines.push('');
+        }
+        // Footer with position info
+        const canScrollUp = this.viewState.scrollOffset > 0;
+        const canScrollDown = this.viewState.scrollOffset + contentHeight < totalLines;
+        const arrows = (canScrollUp ? '▲' : ' ') + (canScrollDown ? '▼' : ' ');
+        const position = totalLines > 0
+            ? `Line ${String(this.viewState.scrollOffset + 1)}-${String(Math.min(this.viewState.scrollOffset + contentHeight, totalLines))} of ${String(totalLines)}`
+            : '';
+        const scrollPercent = totalLines > contentHeight
+            ? Math.round(((this.viewState.scrollOffset + contentHeight) / totalLines) * 100)
+            : 100;
+        lines.push(border);
+        lines.push(s.muted(` ${arrows} ${position} (${String(scrollPercent)}%)  ↑↓/jk Scroll · PgUp/PgDn Page · g/G Top/Bottom · q/Esc Back`));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        const char = data.length === 1 && data[0] >= 0x20 && data[0] < 0x7f
+            ? String.fromCharCode(data[0])
+            : null;
+        const keyStr = data.toString();
+        const rows = process.stdout.rows || 30;
+        const contentHeight = rows - 6;
+        const totalLines = this.viewState.contentLines.length;
+        const maxScroll = Math.max(0, totalLines - contentHeight);
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return closeOverlay({ viewed: true });
+        }
+        // Escape or q - back to list
+        if (isEscape(data) || isClose(data)) {
+            return popScreen();
+        }
+        // Up / k
+        if (isNavigateUp(data)) {
+            if (this.viewState.scrollOffset > 0) {
+                this.viewState.scrollOffset--;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Down / j
+        if (isNavigateDown(data)) {
+            if (this.viewState.scrollOffset < maxScroll) {
+                this.viewState.scrollOffset++;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Page Up
+        if (keyStr === '\x1b[5~') {
+            this.viewState.scrollOffset = Math.max(0, this.viewState.scrollOffset - contentHeight);
+            return stay();
+        }
+        // Page Down / Space
+        if (keyStr === '\x1b[6~' || isSpace(data)) {
+            this.viewState.scrollOffset = Math.min(maxScroll, this.viewState.scrollOffset + contentHeight);
+            return stay();
+        }
+        // g = top
+        if (char === 'g') {
+            this.viewState.scrollOffset = 0;
+            return stay();
+        }
+        // G = bottom
+        if (char === 'G') {
+            this.viewState.scrollOffset = maxScroll;
+            return stay();
+        }
+        // Home
+        if (keyStr === '\x1b[H') {
+            this.viewState.scrollOffset = 0;
+            return stay();
+        }
+        // End
+        if (keyStr === '\x1b[F') {
+            this.viewState.scrollOffset = maxScroll;
+            return stay();
+        }
+        return stay(false);
+    }
+}
+// =============================================================================
+// Docs Overlay
+// =============================================================================
+class DocsOverlay extends TabbedListOverlay {
+    // Stored for potential future use (e.g., subtitle display)
+    _projectName;
+    constructor() {
+        const activeProject = getActiveProject();
+        const projectId = activeProject?.id ?? null;
+        const projectName = activeProject?.name ?? null;
+        // Load documents
+        const documents = projectId !== null
+            ? documentRepository.listByProject(projectId)
+            : [];
+        const config = {
+            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: projectId === 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.',
+        };
+        super(config);
+        this._projectName = projectName;
+    }
+    /**
+     * Override to add project name subtitle in header.
+     * For now, we work with the default rendering.
+     * The TabbedListOverlay handles everything else.
+     */
+    createDetailScreen(doc) {
+        return new DocumentViewScreen(doc, this.styles);
+    }
+}
+// =============================================================================
+// Export Function (Backward Compatible)
+// =============================================================================
+export async function showDocsOverlay() {
+    return new DocsOverlay().show();
+}

package/dist/ui/ephemeral.d.ts

@@ -2,7 +2,7 @@
  * Ephemeral Zone
  *
  * @deprecated This module is superseded by the new Footer architecture.
- * Use todo-zone.ts, input-prompt-v2.ts, and footer.ts instead.
+ * Use todo-zone.ts, input-prompt.ts, and footer.ts instead.
  * This file is kept for reference and may be removed in a future cleanup.
  *
  * Manages the ephemeral area that is cleared and redrawn while agent works.

package/dist/ui/ephemeral.js

@@ -2,7 +2,7 @@
  * Ephemeral Zone
  *
  * @deprecated This module is superseded by the new Footer architecture.
- * Use todo-zone.ts, input-prompt-v2.ts, and footer.ts instead.
+ * Use todo-zone.ts, input-prompt.ts, and footer.ts instead.
  * This file is kept for reference and may be removed in a future cleanup.
  *
  * Manages the ephemeral area that is cleared and redrawn while agent works.

package/dist/ui/features/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Overlay Features
+ *
+ * Composable features for building overlays.
+ * Each feature handles a specific aspect of overlay behavior.
+ *
+ * Available features:
+ * - ListFeature: List selection and navigation
+ * - TabFeature: Tab/filter navigation
+ * - InputFeature: Text input with cursor movement
+ * - PaginationFeature: Paginated list navigation with scroll tracking
+ * - SearchFeature: Search/filter text input with type-to-search
+ *
+ * Usage:
+ * ```typescript
+ * import { ListFeature, TabFeature, InputFeature, PaginationFeature, SearchFeature } from './features/index.js';
+ *
+ * const listFeature = new ListFeature(() => items);
+ * const tabFeature = new TabFeature(TABS);
+ * const inputFeature = new InputFeature({ placeholder: 'Enter text...' });
+ * const pagination = new PaginationFeature({ pageSize: 12 });
+ * const search = new SearchFeature({ onSearch: (q) => filter(q) });
+ * ```
+ */
+export { ListFeature, createSimpleListRenderer, createLabelDescriptionRenderer, } from './list-feature.js';
+export type { ListFeatureConfig } from './list-feature.js';
+export { TabFeature, createTabsFromLabels, createFilterTabs, } from './tab-feature.js';
+export type { TabFeatureConfig } from './tab-feature.js';
+export { InputFeature } from './input-feature.js';
+export type { InputFeatureOptions, InputKeyResult } from './input-feature.js';
+export { PaginationFeature } from './pagination-feature.js';
+export type { PaginationState, PaginationConfig, PaginationKeyResult, } from './pagination-feature.js';
+export { SearchFeature } from './search-feature.js';
+export type { SearchState, SearchConfig, SearchKeyResult, SearchBoxOptions, } from './search-feature.js';

package/dist/ui/features/index.js

@@ -0,0 +1,34 @@
+/**
+ * Overlay Features
+ *
+ * Composable features for building overlays.
+ * Each feature handles a specific aspect of overlay behavior.
+ *
+ * Available features:
+ * - ListFeature: List selection and navigation
+ * - TabFeature: Tab/filter navigation
+ * - InputFeature: Text input with cursor movement
+ * - PaginationFeature: Paginated list navigation with scroll tracking
+ * - SearchFeature: Search/filter text input with type-to-search
+ *
+ * Usage:
+ * ```typescript
+ * import { ListFeature, TabFeature, InputFeature, PaginationFeature, SearchFeature } from './features/index.js';
+ *
+ * const listFeature = new ListFeature(() => items);
+ * const tabFeature = new TabFeature(TABS);
+ * const inputFeature = new InputFeature({ placeholder: 'Enter text...' });
+ * const pagination = new PaginationFeature({ pageSize: 12 });
+ * const search = new SearchFeature({ onSearch: (q) => filter(q) });
+ * ```
+ */
+// List selection and navigation
+export { ListFeature, createSimpleListRenderer, createLabelDescriptionRenderer, } from './list-feature.js';
+// Tab/filter navigation
+export { TabFeature, createTabsFromLabels, createFilterTabs, } from './tab-feature.js';
+// Text input with cursor movement
+export { InputFeature } from './input-feature.js';
+// Paginated list navigation
+export { PaginationFeature } from './pagination-feature.js';
+// Search/filter text input
+export { SearchFeature } from './search-feature.js';

package/dist/ui/features/input-feature.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Input Feature
+ *
+ * Composable text input handling for overlays.
+ * Provides cursor movement, text editing, and rendering.
+ *
+ * Usage:
+ * ```typescript
+ * class MyScreen extends BaseScreen {
+ *   private input = new InputFeature({ placeholder: 'Enter text...' });
+ *
+ *   render(): string[] {
+ *     return [
+ *       ' ' + this.input.render(styles),
+ *     ];
+ *   }
+ *
+ *   handleKey(data: Buffer): ScreenResult {
+ *     const result = this.input.handleKey(data);
+ *     if (result.handled) {
+ *       return stay();
+ *     }
+ *     // Handle other keys (Enter, Escape, etc.)
+ *   }
+ * }
+ * ```
+ */
+export interface InputFeatureOptions {
+    /** Initial value */
+    initialValue?: string;
+    /** Placeholder text when empty */
+    placeholder?: string;
+    /** Maximum length (0 = unlimited) */
+    maxLength?: number;
+}
+export interface InputKeyResult {
+    /** Whether the key was handled */
+    handled: boolean;
+    /** Whether to re-render */
+    render: boolean;
+}
+export declare class InputFeature {
+    /** Current text value */
+    private _value;
+    /** Cursor position (0 = before first char, value.length = after last char) */
+    private _cursor;
+    /** Placeholder text */
+    private readonly placeholder;
+    /** Maximum length */
+    private readonly maxLength;
+    constructor(options?: InputFeatureOptions);
+    /** Get current value */
+    get value(): string;
+    /** Set value (resets cursor to end) */
+    set value(v: string);
+    /** Get cursor position */
+    get cursor(): number;
+    /** Check if empty */
+    get isEmpty(): boolean;
+    /** Get trimmed value */
+    get trimmedValue(): string;
+    /**
+     * Handle a key press.
+     * Returns whether the key was handled and whether to re-render.
+     */
+    handleKey(data: Buffer): InputKeyResult;
+    /**
+     * Render the input field with cursor.
+     * Returns a string like: "> text with cursor_"
+     *
+     * @param styles - Theme styles for coloring
+     * @param prefix - Prefix before the input (default: "> ")
+     */
+    render(styles: ReturnType<typeof import('../../themes/index.js').getStyles>, prefix?: string): string;
+    /**
+     * Render input field without cursor (for non-focused state).
+     */
+    renderWithoutCursor(styles: ReturnType<typeof import('../../themes/index.js').getStyles>, prefix?: string): string;
+    /** Clear the input */
+    clear(): void;
+    /** Find word boundary to the left of cursor */
+    private findWordBoundaryLeft;
+    /** Find word boundary to the right of cursor */
+    private findWordBoundaryRight;
+}