@compilr-dev/cli 0.4.0 → 0.5.1

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

@@ -0,0 +1,45 @@
+/**
+ * Tutorial Overlay V2
+ *
+ * Interactive tutorial with guided walkthroughs.
+ * Extends TabbedListOverlayV2 for consistent UI with other overlays.
+ *
+ * Features:
+ * - 5 tabs: Basics, Projects, Planning, Teams, Config
+ * - Searchable tutorial list
+ * - Multi-page detail view for each tutorial
+ */
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+import { type TutorialItem } from '../data/tutorial-content.js';
+export interface TutorialOverlayV2Result {
+    completed: boolean;
+}
+/**
+ * Extended tutorial item with tab association for filtering.
+ */
+interface TutorialListItem extends TutorialItem {
+    tabId: string;
+}
+/**
+ * Tutorial overlay with tabbed topics and multi-page walkthroughs.
+ * Extends TabbedListOverlayV2 for consistent look with other overlays.
+ */
+export declare class TutorialOverlayV2 extends TabbedListOverlayV2<TutorialListItem, TutorialOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "tutorial-overlay-v2";
+    constructor();
+    /**
+     * Build items on first render when styles are available.
+     * This is a workaround since we need styles to build styled content.
+     */
+    private buildItemsIfNeeded;
+    /**
+     * Override render to build items on first call.
+     */
+    render(context: import('../index.js').RenderContext): {
+        lines: string[];
+        minHeight?: number;
+    };
+    protected createDetailScreen(item: TutorialListItem): BaseScreen | null;
+}
+export {};

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

@@ -0,0 +1,212 @@
+/**
+ * Tutorial Overlay V2
+ *
+ * Interactive tutorial with guided walkthroughs.
+ * Extends TabbedListOverlayV2 for consistent UI with other overlays.
+ *
+ * Features:
+ * - 5 tabs: Basics, Projects, Planning, Teams, Config
+ * - Searchable tutorial list
+ * - Multi-page detail view for each tutorial
+ */
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isEnter, isCtrlC, isQuit, isLeftArrow, isRightArrow, isVimLeft, isVimRight, isBackspace, renderBorder, } from '../../base/index.js';
+import { buildTutorialContent, } from '../data/tutorial-content.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 8;
+// =============================================================================
+// Helper
+// =============================================================================
+function stripAnsi(str) {
+    // eslint-disable-next-line no-control-regex
+    return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, '');
+}
+// =============================================================================
+// Viewing Screen (Multi-page Tutorial Content)
+// =============================================================================
+/**
+ * Shows a page from a tutorial with navigation.
+ * Allows navigating through multiple pages with ←/→.
+ */
+class ViewingScreen extends BaseScreen {
+    item;
+    styles;
+    getWidth;
+    currentPageIndex = 0;
+    constructor(item, styles, getWidth) {
+        super();
+        this.item = item;
+        this.styles = styles;
+        this.getWidth = getWidth;
+    }
+    getMinHeight() {
+        return 24;
+    }
+    render() {
+        const s = this.styles;
+        const cols = this.getWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const page = this.item.pages[this.currentPageIndex];
+        const totalPages = this.item.pages.length;
+        // Progress text
+        const progressText = `[${String(this.currentPageIndex + 1)}/${String(totalPages)}]`;
+        // Header with progress
+        const titleStyled = s.primaryBold(page.title);
+        const progressStyled = s.muted(progressText);
+        const titleLen = stripAnsi(titleStyled).length + 1;
+        const progressLen = stripAnsi(progressStyled).length;
+        const padding = Math.max(1, cols - titleLen - progressLen - 2);
+        lines.push(border);
+        lines.push(` ${titleStyled}${' '.repeat(padding)}${progressStyled}`);
+        lines.push('');
+        // Content
+        for (const line of page.lines) {
+            lines.push(line);
+        }
+        // Pad to consistent height
+        while (lines.length < 20) {
+            lines.push('');
+        }
+        // Navigation footer
+        lines.push(border);
+        // Show appropriate hints based on position
+        const hints = [];
+        if (this.currentPageIndex > 0 || totalPages > 1) {
+            hints.push('←/→ navigate');
+        }
+        hints.push('q/Esc back');
+        lines.push(s.muted(`  ${hints.join(' · ')}`));
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes overlay completely
+        if (isCtrlC(data)) {
+            return closeOverlay({ completed: false });
+        }
+        const totalPages = this.item.pages.length;
+        // Back to topic list
+        if (isEscape(data) || isQuit(data)) {
+            return popScreen();
+        }
+        // Previous page
+        if (isLeftArrow(data) || isVimLeft(data) || isBackspace(data)) {
+            if (this.currentPageIndex > 0) {
+                this.currentPageIndex--;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Next page
+        if (isRightArrow(data) || isVimRight(data) || isEnter(data)) {
+            if (this.currentPageIndex < totalPages - 1) {
+                this.currentPageIndex++;
+                return stay();
+            }
+            // At last page, Enter goes back to list
+            if (isEnter(data)) {
+                return popScreen();
+            }
+            return stay(false);
+        }
+        return stay(false);
+    }
+}
+// =============================================================================
+// Tutorial Overlay V2 Class
+// =============================================================================
+/**
+ * Tutorial overlay with tabbed topics and multi-page walkthroughs.
+ * Extends TabbedListOverlayV2 for consistent look with other overlays.
+ */
+export class TutorialOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'tutorial-overlay-v2';
+    constructor() {
+        // We need styles to build content, but we don't have them yet.
+        // Build with a placeholder and rebuild on first render.
+        // For now, use empty items - they'll be populated on first render.
+        const tabs = [
+            { id: 'basics', label: 'Basics' },
+            { id: 'projects', label: 'Projects' },
+            { id: 'plan-build', label: 'Plan & Build' },
+            { id: 'teams', label: 'Teams' },
+            { id: 'config', label: 'Config' },
+        ];
+        super({
+            title: 'Tutorial',
+            tabs,
+            items: [], // Will be populated on first render
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'all')
+                    return true;
+                return item.tabId === tabId;
+            },
+            getSearchText: (item) => `${item.title} ${item.description}`,
+            renderItem: (item, isSelected, styles) => {
+                const prefix = isSelected ? styles.primary(' ► ') : '   ';
+                // Pad raw text BEFORE applying styles to ensure consistent column widths
+                const titlePadded = item.title.padEnd(28);
+                const descPadded = item.description.padEnd(36);
+                const pagesText = `(${String(item.pages.length)} ${item.pages.length === 1 ? 'page' : 'pages'})`;
+                const pagesPadded = pagesText.padStart(10);
+                // Apply styles after padding
+                const title = isSelected ? styles.primary(titlePadded) : titlePadded;
+                const desc = styles.muted(descPadded);
+                const pages = styles.muted(pagesPadded);
+                return `${prefix}${title} ${desc} ${pages}`;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter View · Esc Exit search';
+                }
+                return 'Tab Filter · ↑↓/jk · ←→/hl Pages · / Search · Enter View · q/Esc Close';
+            },
+            emptyMessage: 'No tutorials available.',
+            noResultsMessage: 'No tutorials match the search.',
+            showCount: false,
+        });
+        // Override minHeight for tutorial content
+        this.minHeight = 22;
+    }
+    /**
+     * Build items on first render when styles are available.
+     * This is a workaround since we need styles to build styled content.
+     */
+    buildItemsIfNeeded() {
+        if (this.state.items.length > 0)
+            return;
+        const styles = this.getStyles();
+        const tabs = buildTutorialContent(styles);
+        // Flatten tutorials into a single array with tabId
+        const items = [];
+        for (const tab of tabs) {
+            for (const item of tab.items) {
+                items.push({
+                    ...item,
+                    tabId: tab.id,
+                });
+            }
+        }
+        this.state.items = items;
+        this.state.filteredItems = items.filter((item) => this.listConfig.filterByTab(item, this.listConfig.tabs[0]?.id ?? 'basics'));
+    }
+    /**
+     * Override render to build items on first call.
+     */
+    render(context) {
+        // Cache styles first so buildItemsIfNeeded can use them
+        this.styles = context.styles;
+        this.termWidth = context.width;
+        // Build items if not yet built
+        this.buildItemsIfNeeded();
+        // Render using parent
+        return super.render(context);
+    }
+    createDetailScreen(item) {
+        const styles = this.getStyles();
+        return new ViewingScreen(item, styles, () => this.termWidth);
+    }
+}

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

@@ -0,0 +1,80 @@
+/**
+ * Workflow Overlay V2
+ *
+ * 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 { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import type { Project } from '../../../db/repositories/index.js';
+interface ProjectStats {
+    totalItems: number;
+    completedItems: number;
+    inProgressItems: number;
+    hasPrd: boolean;
+    hasArchDocs: boolean;
+    hasScaffold: boolean;
+}
+interface ActionItem {
+    label: string;
+    command: string;
+    description: string;
+    enabled: boolean;
+}
+interface ManageActionItem extends ActionItem {
+    id: string;
+    style: 'normal' | 'warning' | 'danger';
+}
+export interface WorkflowOverlayV2Result {
+    command: string | null;
+    action?: 'set-active' | 'archive' | 'restore' | 'delete' | 'edit';
+    projectId?: number;
+}
+interface WorkflowState {
+    /** Current tab index */
+    currentTab: number;
+    /** Project data */
+    project: Project | null;
+    stats: ProjectStats | null;
+    /** Per-tab selection */
+    actionsIndex: number;
+    manageActionIndex: number;
+    /** Actions */
+    actionsItems: ActionItem[];
+    manageActions: ManageActionItem[];
+}
+export declare class WorkflowOverlayV2 extends BaseOverlayV2<WorkflowState, WorkflowOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "workflow-overlay-v2";
+    constructor(projectId?: number);
+    protected renderContent(_context: RenderContext): string[];
+    private renderTabs;
+    private renderPhases;
+    private renderActionsTab;
+    private renderDetailsTab;
+    private renderDashboardTab;
+    private renderManageTab;
+    handleKey(key: KeyEvent): OverlayAction<WorkflowOverlayV2Result>;
+    private handleActionsTabKey;
+    /**
+     * Create an overlay instance for a command.
+     * Returns null for commands that don't have V2 overlay implementations.
+     * Passes the current project ID to child overlays so they show data for this project,
+     * not the globally active project.
+     */
+    private createOverlayForCommand;
+    private handleManageTabKey;
+    private executeManageAction;
+    private refreshProject;
+}
+export {};