@compilr-dev/cli 0.4.0 → 0.5.1

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

@@ -0,0 +1,41 @@
+/**
+ * Filter Overlay V2
+ *
+ * Modal overlay for selecting which agents to show in conversation.
+ * The filter is display-only - full history is preserved.
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../index.js';
+export interface FilterOverlayV2Config {
+    /** All agents available for filtering */
+    agents: Array<{
+        id: string;
+        displayName: string;
+        mascot: string;
+        selected: boolean;
+    }>;
+    /** Currently filtered agent IDs (empty = show all) */
+    currentFilter: string[];
+}
+export type FilterOverlayV2Result = {
+    type: 'apply';
+    agentIds: string[];
+} | {
+    type: 'cancelled';
+};
+interface FilterOverlayState {
+    /** Currently selected agent index */
+    selectedIndex: number;
+    /** Selection state for each agent */
+    selections: Map<string, boolean>;
+    /** Agent list */
+    agents: FilterOverlayV2Config['agents'];
+}
+export declare class FilterOverlayV2 extends BaseOverlayV2<FilterOverlayState, FilterOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "filter-overlay-v2";
+    constructor(config: FilterOverlayV2Config);
+    protected renderContent(context: RenderContext): string[];
+    handleKey(event: KeyEvent): OverlayAction<FilterOverlayV2Result>;
+}
+export {};

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

@@ -0,0 +1,110 @@
+/**
+ * Filter Overlay V2
+ *
+ * Modal overlay for selecting which agents to show in conversation.
+ * The filter is display-only - full history is preserved.
+ */
+import chalk from 'chalk';
+import { BaseOverlayV2 } from '../../base/index.js';
+import * as terminal from '../../terminal.js';
+// =============================================================================
+// Filter Overlay V2 Class
+// =============================================================================
+export class FilterOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'filter-overlay-v2';
+    constructor(config) {
+        // Initialize selections from config
+        const selections = new Map();
+        for (const agent of config.agents) {
+            selections.set(agent.id, agent.selected);
+        }
+        super({
+            selectedIndex: 0,
+            selections,
+            agents: config.agents,
+        });
+        this.minHeight = 8 + config.agents.length;
+    }
+    renderContent(context) {
+        const s = context.styles;
+        const lines = [];
+        const cols = terminal.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        // Header
+        lines.push(border);
+        lines.push(' ' + chalk.bold('Conversation Filter'));
+        lines.push(border);
+        lines.push('');
+        // Instructions
+        lines.push(s.muted('  Show messages from:'));
+        lines.push('');
+        // Agent list with checkboxes
+        for (let i = 0; i < this.state.agents.length; i++) {
+            const agent = this.state.agents[i];
+            const isSelected = i === this.state.selectedIndex;
+            const isChecked = this.state.selections.get(agent.id) ?? true;
+            const checkbox = isChecked ? s.success('[x]') : s.muted('[ ]');
+            const mascot = agent.mascot;
+            const id = `$${agent.id}`;
+            const name = `(${agent.displayName})`;
+            const line = `  ${checkbox} ${mascot} ${id} ${s.muted(name)}`;
+            if (isSelected) {
+                lines.push(s.primary(line));
+            }
+            else {
+                lines.push(line);
+            }
+        }
+        lines.push('');
+        // Footer with shortcuts
+        lines.push(border);
+        lines.push(s.muted(' ↑↓ Navigate · Space Toggle · a All · n None · Enter Apply · Esc Cancel'));
+        return lines;
+    }
+    handleKey(event) {
+        const { name, raw } = event;
+        // Navigation
+        if (name === 'up' || (raw.length === 3 && raw[0] === 0x1b && raw[1] === 0x5b && raw[2] === 0x41)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return { type: 'render' };
+        }
+        if (name === 'down' || (raw.length === 3 && raw[0] === 0x1b && raw[1] === 0x5b && raw[2] === 0x42)) {
+            this.state.selectedIndex = Math.min(this.state.agents.length - 1, this.state.selectedIndex + 1);
+            return { type: 'render' };
+        }
+        // Toggle selection
+        if (name === 'space') {
+            const agent = this.state.agents[this.state.selectedIndex];
+            const current = this.state.selections.get(agent.id) ?? true;
+            this.state.selections.set(agent.id, !current);
+            return { type: 'render' };
+        }
+        // Select all
+        if (name === 'a') {
+            for (const agent of this.state.agents) {
+                this.state.selections.set(agent.id, true);
+            }
+            return { type: 'render' };
+        }
+        // Select none
+        if (name === 'n') {
+            for (const agent of this.state.agents) {
+                this.state.selections.set(agent.id, false);
+            }
+            return { type: 'render' };
+        }
+        // Apply
+        if (name === 'return' || name === 'enter') {
+            const selectedIds = this.state.agents
+                .filter(agent => this.state.selections.get(agent.id))
+                .map(agent => agent.id);
+            return { type: 'close', result: { type: 'apply', agentIds: selectedIds } };
+        }
+        // Cancel
+        if (name === 'escape') {
+            return { type: 'close', cancelled: true };
+        }
+        return { type: 'none' };
+    }
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Games Overlay V2
+ *
+ * Arcade menu for the games easter egg.
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import { type GameInfo } from '../../../games/index.js';
+export interface GamesOverlayV2Result {
+    action: 'close' | 'play';
+    game?: GameInfo;
+}
+interface GamesState {
+    selectedIndex: number;
+    showInsertCoin: boolean;
+    gameToPlay: GameInfo | null;
+    gotDailyBonus: boolean;
+}
+export interface GamesOverlayV2Options {
+    gotDailyBonus?: boolean;
+}
+export declare class GamesOverlayV2 extends BaseOverlayV2<GamesState, GamesOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "games";
+    constructor(options?: GamesOverlayV2Options);
+    protected renderContent(ctx: RenderContext): string[];
+    private renderGamesList;
+    private renderInsertCoinScreen;
+    handleKey(event: KeyEvent): OverlayAction<GamesOverlayV2Result>;
+}
+export {};

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

@@ -0,0 +1,135 @@
+/**
+ * Games Overlay V2
+ *
+ * Arcade menu for the games easter egg.
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import { getAvailableGames, getCoins, hasCoins, formatCoinsDisplay, getBestScore, formatScore, COIN_COST_START_GAME, } from '../../../games/index.js';
+export class GamesOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'games';
+    constructor(options) {
+        super({
+            selectedIndex: 0,
+            showInsertCoin: false,
+            gameToPlay: null,
+            gotDailyBonus: options?.gotDailyBonus ?? false,
+        });
+        this.minHeight = 20;
+    }
+    renderContent(ctx) {
+        const s = ctx.styles;
+        const games = getAvailableGames();
+        const coins = getCoins();
+        if (this.state.showInsertCoin) {
+            return this.renderInsertCoinScreen(s, coins);
+        }
+        return this.renderGamesList(s, games, coins);
+    }
+    renderGamesList(s, games, coins) {
+        const lines = [];
+        // Title
+        lines.push('');
+        lines.push(s.primaryBold('  ╔═══════════════════════════════════════════════════╗'));
+        lines.push(s.primaryBold('  ║              A   R   C   A   D   E                ║'));
+        lines.push(s.primaryBold('  ╚═══════════════════════════════════════════════════╝'));
+        // Daily bonus notification
+        if (this.state.gotDailyBonus) {
+            lines.push(s.success('                   🎁 Daily bonus: +1 coin!'));
+        }
+        else {
+            lines.push('');
+        }
+        // Games list
+        lines.push(s.muted('  ┌─────────────────────────────────────────────────┐'));
+        for (let i = 0; i < games.length; i++) {
+            const game = games[i];
+            const isSelected = i === this.state.selectedIndex;
+            const cursor = isSelected ? s.primary('❯') : ' ';
+            if (game.available) {
+                const bestScore = getBestScore(game.id);
+                const scoreText = bestScore ? `Best: ${formatScore(bestScore.score)}` : '';
+                if (isSelected) {
+                    lines.push(`  │ ${cursor} ${s.primaryBold(game.name.padEnd(18))} ${s.muted(scoreText.padStart(20))} │`);
+                }
+                else {
+                    lines.push(`  │ ${cursor} ${s.primary(game.name.padEnd(18))} ${s.muted(scoreText.padStart(20))} │`);
+                }
+            }
+            else {
+                // Coming soon
+                lines.push(`  │ ${cursor} ${s.muted(game.name.padEnd(18))} ${s.muted('Coming Soon...'.padStart(20))} │`);
+            }
+        }
+        lines.push(s.muted('  └─────────────────────────────────────────────────┘'));
+        lines.push('');
+        // Coins display
+        const coinsDisplay = formatCoinsDisplay(coins, 10);
+        lines.push(`  ${s.warning('COINS:')} ${s.primary(coinsDisplay)} (${String(coins)})`);
+        lines.push('');
+        // Controls
+        lines.push(s.muted('  ↑↓ Select   Enter Play   Q Exit'));
+        lines.push('');
+        return lines;
+    }
+    renderInsertCoinScreen(s, coins) {
+        const lines = [];
+        lines.push('');
+        lines.push('');
+        lines.push('');
+        lines.push(s.warning('       ╔═════════════════════════════╗'));
+        lines.push(s.warning('       ║                             ║'));
+        lines.push(s.warning('       ║   I N S E R T   C O I N     ║'));
+        lines.push(s.warning('       ║                             ║'));
+        lines.push(s.warning('       ╚═════════════════════════════╝'));
+        lines.push('');
+        lines.push(`       ${s.muted(`You have ${String(coins)} coin${coins !== 1 ? 's' : ''}.`)}`);
+        lines.push('');
+        lines.push(s.muted('       Earn coins by:'));
+        lines.push(s.muted('       • Completing work items'));
+        lines.push(s.muted('       • Creating projects'));
+        lines.push(s.muted('       • Daily usage'));
+        lines.push('');
+        lines.push(s.muted('       [Press any key to go back]'));
+        lines.push('');
+        return lines;
+    }
+    handleKey(event) {
+        const games = getAvailableGames();
+        // Handle insert coin screen
+        if (this.state.showInsertCoin) {
+            this.state.showInsertCoin = false;
+            return this.rerender();
+        }
+        // Navigation
+        if (this.isUpKey(event)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return this.rerender();
+        }
+        if (this.isDownKey(event)) {
+            this.state.selectedIndex = Math.min(games.length - 1, this.state.selectedIndex + 1);
+            return this.rerender();
+        }
+        // Play game
+        if (this.isEnterKey(event)) {
+            const game = games[this.state.selectedIndex];
+            if (!game.available) {
+                // Game not available yet
+                return this.rerender();
+            }
+            // Check coins (but don't spend yet - game will spend when actually starting)
+            if (!hasCoins(COIN_COST_START_GAME)) {
+                this.state.showInsertCoin = true;
+                return this.rerender();
+            }
+            // Launch game (coin will be spent after pre-game screen)
+            this.state.gameToPlay = game;
+            return this.close({ action: 'play', game: game });
+        }
+        // Close
+        if (this.isCloseKey(event)) {
+            return this.close({ action: 'close' });
+        }
+        return this.noAction();
+    }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Guardrail Confirmation Overlay V2
+ *
+ * Shows when a guardrail with action='confirm' is triggered.
+ * User must approve or deny the risky operation.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+interface GuardrailState {
+    selectedIndex: number;
+}
+export interface GuardrailConfirmOptionsV2 {
+    /** Guardrail name */
+    name: string;
+    /** Guardrail description/message */
+    message: string;
+    /** Action type (for display) */
+    action: 'warn' | 'confirm' | 'block';
+    /** Tool that triggered the guardrail */
+    toolName: string;
+    /** The input that matched the pattern */
+    matchedInput: string;
+    /** Category (e.g., 'git', 'filesystem', 'database') */
+    category?: string;
+}
+export interface GuardrailConfirmResultV2 {
+    /** Whether to proceed with the operation */
+    approved: boolean;
+}
+export declare class GuardrailOverlayV2 extends BaseOverlayV2<GuardrailState, GuardrailConfirmResultV2> {
+    readonly type: "inline";
+    readonly id = "guardrail-overlay-v2";
+    private readonly options;
+    constructor(options: GuardrailConfirmOptionsV2);
+    protected renderContent(context: RenderContext): string[];
+    handleKey(key: KeyEvent): OverlayAction<GuardrailConfirmResultV2>;
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result: GuardrailConfirmResultV2): string | null;
+}
+export {};

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

@@ -0,0 +1,114 @@
+/**
+ * Guardrail Confirmation Overlay V2
+ *
+ * Shows when a guardrail with action='confirm' is triggered.
+ * User must approve or deny the risky operation.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ */
+import chalk from 'chalk';
+import { BaseOverlayV2, renderBorder, wrapText } from '../../base/index.js';
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+export class GuardrailOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'guardrail-overlay-v2';
+    options;
+    constructor(options) {
+        super({
+            selectedIndex: 0, // Default to Deny (safer)
+        });
+        this.options = options;
+        this.minHeight = 15; // Prevent jitter
+    }
+    renderContent(context) {
+        const s = context.styles;
+        const lines = [];
+        const cols = context.width;
+        const border = renderBorder(cols, s);
+        // Header with warning icon
+        lines.push(border);
+        lines.push(' ' + s.warning('! Risky Operation Detected'));
+        lines.push('');
+        // Guardrail info
+        const category = this.options.category ? `[${this.options.category}]` : '';
+        lines.push(s.muted(` ${category} `) + chalk.bold(this.options.name));
+        lines.push('');
+        // Message
+        const msgLines = wrapText(this.options.message, cols - 4);
+        for (const line of msgLines) {
+            lines.push('   ' + s.muted(line));
+        }
+        lines.push('');
+        // Tool and matched input
+        lines.push(s.muted(' Tool: ') + s.primary(this.options.toolName));
+        // Show truncated matched input
+        const maxInputLen = cols - 12;
+        let displayInput = this.options.matchedInput;
+        if (displayInput.length > maxInputLen) {
+            displayInput = displayInput.substring(0, maxInputLen - 3) + '...';
+        }
+        // Replace newlines with visible markers
+        displayInput = displayInput.replace(/\n/g, '↵');
+        lines.push(s.muted(' Match: ') + s.warning(displayInput));
+        lines.push('');
+        // Action buttons
+        const denyLabel = this.state.selectedIndex === 0
+            ? s.error(' > Deny ')
+            : s.muted('   Deny ');
+        const allowLabel = this.state.selectedIndex === 1
+            ? s.warning(' > Allow ')
+            : s.muted('   Allow ');
+        lines.push(' ' + denyLabel + '  ' + allowLabel);
+        lines.push('');
+        // Footer
+        lines.push(s.muted(' Left/Right Select | Enter Confirm | Esc Deny'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(key) {
+        // Ctrl+C or Escape = Deny
+        if ((key.ctrl && key.name === 'c') || key.name === 'escape') {
+            return this.close({ approved: false });
+        }
+        // Left arrow or h for Deny
+        if (key.name === 'left' || key.char === 'h') {
+            this.state.selectedIndex = 0;
+            return this.rerender();
+        }
+        // Right arrow or l for Allow
+        if (key.name === 'right' || key.char === 'l') {
+            this.state.selectedIndex = 1;
+            return this.rerender();
+        }
+        // Tab to toggle
+        if (key.name === 'tab') {
+            this.state.selectedIndex = this.state.selectedIndex === 0 ? 1 : 0;
+            return this.rerender();
+        }
+        // Enter to confirm selection
+        if (key.name === 'return') {
+            return this.close({ approved: this.state.selectedIndex === 1 });
+        }
+        // 'd' or 'n' for Deny
+        const keyChar = key.char?.toLowerCase() ?? '';
+        if (keyChar === 'd' || keyChar === 'n') {
+            return this.close({ approved: false });
+        }
+        // 'a' or 'y' for Allow
+        if (keyChar === 'a' || keyChar === 'y') {
+            return this.close({ approved: true });
+        }
+        return this.noAction();
+    }
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        if (result.approved) {
+            return s.muted('Guardrail: ') + s.warning('Allowed ') + s.muted(this.options.name);
+        }
+        return s.muted('Guardrail: ') + s.error('Denied ') + s.muted(this.options.name);
+    }
+}

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

@@ -0,0 +1,57 @@
+/**
+ * Help Overlay V2
+ *
+ * Displays available commands in a searchable, categorized list.
+ * Uses TabbedListOverlayV2 for the new Overlay interface.
+ *
+ * Features:
+ * - Tabs: All, Built-in, Custom
+ * - Search with / toggle
+ * - Detail view for full command information
+ * - Works with TerminalUI's overlay management
+ */
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+/** Command detail info returned by getCommand(). */
+interface CommandDetail {
+    name: string;
+    description: string;
+    details?: string;
+    aliases?: string[];
+    examples?: {
+        code: string;
+        description?: string;
+    }[];
+    interactions?: string[];
+}
+/** Options for creating HelpOverlayV2. */
+export interface HelpOverlayV2Options {
+    /** Get all commands for the help list. */
+    getHelpCommands: () => {
+        name: string;
+        description: string;
+    }[];
+    /** Get detailed info for a single command. */
+    getCommand: (name: string) => CommandDetail | undefined;
+}
+interface HelpItem {
+    name: string;
+    description: string;
+    type: 'builtin' | 'custom';
+    /** For custom commands */
+    prompt?: string;
+    location?: 'project' | 'personal';
+    /** Command name for built-in commands (without leading /) */
+    commandName?: string;
+}
+/**
+ * Help overlay using the new Overlay interface.
+ * Displays available commands in a searchable, tabbed list.
+ */
+export declare class HelpOverlayV2 extends TabbedListOverlayV2<HelpItem> {
+    readonly type: "inline";
+    readonly id = "help-overlay-v2";
+    private readonly getCommandDetail;
+    constructor(options: HelpOverlayV2Options);
+    protected createDetailScreen(item: HelpItem): BaseScreen | null;
+}
+export {};