@compilr-dev/cli 0.7.3 → 0.7.5

package/dist/ui/overlay/impl/propose-alternatives-overlay-v2.js

@@ -0,0 +1,326 @@
+/**
+ * Propose Alternatives Overlay V2
+ *
+ * Modal overlay for picking one of 2-3 agent-proposed alternatives.
+ * One tab per alternative (vs ask_user's one tab per question) — tabs
+ * are for COMPARING different answers to the SAME single question, not
+ * for moving between distinct questions.
+ *
+ * Spec: project-docs/00-requirements/compilr-dev-cli/propose-alternatives-spec.md
+ */
+import chalk from 'chalk';
+import { highlight } from 'cli-highlight';
+import { BaseOverlayV2, renderBorder, wrapText } from '../../base/index.js';
+import { renderMarkdown } from '../../conversation.js';
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+export class ProposeAlternativesOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'propose-alternatives-overlay-v2';
+    question;
+    context;
+    alternatives;
+    constructor(options) {
+        super({
+            currentTab: 0,
+            isAddingNotes: false,
+            notesBuffer: '',
+        });
+        this.question = options.question;
+        this.context = options.context;
+        this.alternatives = options.alternatives;
+        this.minHeight = 20;
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Public API (BaseOverlayV2)
+    // ───────────────────────────────────────────────────────────────────────────
+    renderContent(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        // Header — single question, persistent
+        const headerText = `Decide: ${this.question}`;
+        for (const line of wrapText(headerText, cols - 2)) {
+            lines.push(' ' + s.primaryBold(line));
+        }
+        lines.push('');
+        // Context block (optional)
+        if (this.context && this.context.trim().length > 0) {
+            lines.push(' ' + s.muted('Context'));
+            for (const line of wrapText(this.context, cols - 4)) {
+                lines.push('   ' + s.muted(line));
+            }
+            lines.push('');
+        }
+        // Tab bar (alternatives)
+        lines.push(...this.renderTabBar(s, cols));
+        lines.push('');
+        // Body for the active tab
+        lines.push(...this.renderActiveAlternative(s, cols));
+        // Notes-input row or footer
+        lines.push('');
+        if (this.state.isAddingNotes) {
+            lines.push(...this.renderNotesInput(s, cols));
+        }
+        else {
+            lines.push(...this.renderInstructions(s));
+        }
+        lines.push(border);
+        return lines;
+    }
+    handleKey(key) {
+        // Ctrl+C → hard cancel (reject, even mid-notes)
+        if (key.ctrl && key.name === 'c') {
+            return this.close(this.makeRejected());
+        }
+        if (this.state.isAddingNotes) {
+            return this.handleNotesKey(key);
+        }
+        return this.handleNavigationKey(key);
+    }
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        if (result.rejected) {
+            return s.muted('Alternative: ') + s.warning('rejected');
+        }
+        const suffix = result.notes !== undefined && result.notes.trim().length > 0 ? ' (with notes)' : '';
+        return s.muted('Alternative: ') + s.success(result.chosenTitle + suffix);
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Key handlers
+    // ───────────────────────────────────────────────────────────────────────────
+    handleNavigationKey(key) {
+        const n = this.alternatives.length;
+        // Tab navigation
+        if (key.name === 'tab' && !key.shift) {
+            this.state.currentTab = (this.state.currentTab + 1) % n;
+            return this.rerender();
+        }
+        if ((key.name === 'tab' && key.shift) || key.name === 'left') {
+            this.state.currentTab = (this.state.currentTab - 1 + n) % n;
+            return this.rerender();
+        }
+        if (key.name === 'right') {
+            this.state.currentTab = (this.state.currentTab + 1) % n;
+            return this.rerender();
+        }
+        // Number-key jumps (1..N)
+        if (key.char && /^[1-9]$/.test(key.char)) {
+            const idx = parseInt(key.char, 10) - 1;
+            if (idx >= 0 && idx < n) {
+                this.state.currentTab = idx;
+                return this.rerender();
+            }
+        }
+        // Enter → pick the current tab
+        if (key.name === 'return' || key.name === 'enter') {
+            return this.close(this.makePicked(undefined));
+        }
+        // 'n' → enter notes-input mode
+        if (key.char === 'n' && !key.ctrl && !key.meta) {
+            this.state.isAddingNotes = true;
+            return this.rerender();
+        }
+        // 'r' / 'q' / Esc → reject all
+        if ((key.char === 'r' || key.char === 'q') &&
+            !key.ctrl &&
+            !key.meta) {
+            return this.close(this.makeRejected());
+        }
+        if (key.name === 'escape') {
+            return this.close(this.makeRejected());
+        }
+        return this.noAction();
+    }
+    handleNotesKey(key) {
+        // Esc → cancel notes, return to navigation (don't commit a pick)
+        if (key.name === 'escape') {
+            this.state.isAddingNotes = false;
+            this.state.notesBuffer = '';
+            return this.rerender();
+        }
+        // Enter → commit pick with notes
+        if (key.name === 'return' || key.name === 'enter') {
+            return this.close(this.makePicked(this.state.notesBuffer));
+        }
+        // Backspace → delete last char
+        if (key.name === 'backspace') {
+            this.state.notesBuffer = this.state.notesBuffer.slice(0, -1);
+            return this.rerender();
+        }
+        // Printable → append to buffer
+        if (key.char && key.char.length === 1 && !key.ctrl && !key.meta) {
+            this.state.notesBuffer += key.char;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Rendering helpers
+    // ───────────────────────────────────────────────────────────────────────────
+    renderTabBar(s, cols) {
+        let line = ' ';
+        for (let i = 0; i < this.alternatives.length; i++) {
+            const alt = this.alternatives[i];
+            const isCurrent = i === this.state.currentTab;
+            // Truncate per-tab title to keep the row at one line for 2-3 alts
+            const maxTitle = 25;
+            const title = alt.title.length > maxTitle ? alt.title.slice(0, maxTitle - 1) + '…' : alt.title;
+            const tabContent = ` ${String(i + 1)} · ${title} `;
+            if (isCurrent) {
+                line += s.selected(tabContent) + '  ';
+            }
+            else {
+                line += s.muted(tabContent) + '  ';
+            }
+        }
+        // If too wide for terminal, just truncate — the user can still see the active tab
+        if (visibleLength(line) > cols) {
+            // Crude fallback: keep the active tab visible by truncating leading tabs
+            // (a fancier renderer would scroll; keep it simple for v1)
+            line = line.slice(0, cols - 1) + '…';
+        }
+        return [line];
+    }
+    renderActiveAlternative(s, cols) {
+        const out = [];
+        const alt = this.alternatives[this.state.currentTab];
+        // Title (re-stated in body)
+        out.push(' ' + s.primaryBold(alt.title));
+        out.push('');
+        // Description
+        for (const line of wrapText(alt.description, cols - 4)) {
+            out.push('   ' + line);
+        }
+        out.push('');
+        // Content (markdown / code / mermaid)
+        if (alt.content && alt.content.trim().length > 0) {
+            out.push(...this.renderContentBlock(alt, s, cols));
+            out.push('');
+        }
+        // Pros
+        if (alt.pros && alt.pros.length > 0) {
+            out.push(' ' + s.muted('Pros'));
+            for (const pro of alt.pros) {
+                for (let i = 0; i < wrapText(pro, cols - 6).length; i++) {
+                    const wrapped = wrapText(pro, cols - 6)[i];
+                    const prefix = i === 0 ? '   + ' : '     ';
+                    out.push(prefix + s.success(wrapped));
+                }
+            }
+            out.push('');
+        }
+        // Cons
+        if (alt.cons && alt.cons.length > 0) {
+            out.push(' ' + s.muted('Cons'));
+            for (const con of alt.cons) {
+                for (let i = 0; i < wrapText(con, cols - 6).length; i++) {
+                    const wrapped = wrapText(con, cols - 6)[i];
+                    const prefix = i === 0 ? '   − ' : '     ';
+                    out.push(prefix + s.warning(wrapped));
+                }
+            }
+        }
+        return out;
+    }
+    renderContentBlock(alt, s, _cols) {
+        const out = [];
+        const content = alt.content ?? '';
+        const contentType = alt.contentType ?? 'markdown';
+        if (contentType === 'mermaid') {
+            out.push(' ' + s.muted('Diagram (mermaid)'));
+            for (const raw of content.split('\n')) {
+                out.push('   ' + s.muted(raw));
+            }
+            out.push('   ' + s.muted('(diagram preview unavailable in terminal — open Desktop to view rendered)'));
+            return out;
+        }
+        if (contentType === 'code') {
+            out.push(' ' + s.muted('Code' + (alt.language ? ` · ${alt.language}` : '')));
+            let rendered;
+            try {
+                rendered = highlight(content, {
+                    language: alt.language,
+                    ignoreIllegals: true,
+                });
+            }
+            catch {
+                rendered = content;
+            }
+            for (const raw of rendered.split('\n')) {
+                // Don't re-wrap code — preserve original alignment
+                out.push('   ' + raw);
+            }
+            return out;
+        }
+        // markdown (default)
+        let rendered;
+        try {
+            rendered = renderMarkdown(content);
+        }
+        catch {
+            rendered = content;
+        }
+        for (const raw of rendered.split('\n')) {
+            // Trim trailing whitespace but preserve the rendered indentation
+            out.push('   ' + raw.replace(/\s+$/, ''));
+        }
+        return out;
+    }
+    renderNotesInput(s, cols) {
+        const prefix = ' Notes: ';
+        const available = Math.max(20, cols - prefix.length - 3);
+        const buffer = this.state.notesBuffer;
+        const visible = buffer.length > available ? '…' + buffer.slice(-(available - 1)) : buffer;
+        return [
+            prefix + visible + chalk.inverse(' '),
+            ' ' + s.muted('[Enter] confirm · [Esc] cancel notes (no selection)'),
+        ];
+    }
+    renderInstructions(s) {
+        const parts = [
+            '[Tab/←→] navigate',
+            '[1-' + String(this.alternatives.length) + '] jump',
+            '[Enter] pick',
+            '[n] notes',
+            '[r] reject',
+            '[q] cancel',
+        ];
+        return [' ' + s.muted(parts.join(' · '))];
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Result builders
+    // ───────────────────────────────────────────────────────────────────────────
+    makePicked(notes) {
+        const idx = this.state.currentTab;
+        const alt = this.alternatives[idx];
+        const trimmed = notes?.trim();
+        return {
+            chosenIndex: idx,
+            chosenTitle: alt.title,
+            notes: trimmed && trimmed.length > 0 ? trimmed : undefined,
+            rejected: false,
+        };
+    }
+    makeRejected() {
+        // SDK contract: chosenIndex + chosenTitle must be populated even on
+        // rejection. The agent's prompt explicitly says these fields are
+        // ignored when rejected=true, but the schema requires them.
+        return {
+            chosenIndex: 0,
+            chosenTitle: this.alternatives[0]?.title ?? '',
+            rejected: true,
+        };
+    }
+}
+// =============================================================================
+// Helpers (module-private)
+// =============================================================================
+/** Approximate visible length of an ANSI-coloured string. */
+function visibleLength(s) {
+    // eslint-disable-next-line no-control-regex
+    return s.replace(/\x1b\[[0-9;]*m/g, '').length;
+}

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

@@ -26,6 +26,8 @@ export { ConfigOverlayV2, type ConfigOverlayV2Options, type ConfigOverlayV2Resul
 export { AskUserSimpleOverlayV2, type AskUserSimpleOptionsV2, type AskUserSimpleResultV2 } from './impl/ask-user-simple-overlay-v2.js';
 export { GuardrailOverlayV2, type GuardrailConfirmOptionsV2, type GuardrailConfirmResultV2 } from './impl/guardrail-overlay-v2.js';
 export { AskUserOverlayV2, type AskUserOptionsV2, type AskUserResultV2 } from './impl/ask-user-overlay-v2.js';
+export { ProposeAlternativesOverlayV2, type ProposeAlternativesOptionsV2, type ProposeAlternativesResultV2, } from './impl/propose-alternatives-overlay-v2.js';
+export { InteractiveFlowOverlayV2, type InteractiveFlowOptionsV2, type InteractiveFlowResultV2, } from './impl/interactive-flow-overlay-v2.js';
 export { IterationLimitOverlayV2, type IterationLimitOptionsV2, type IterationLimitResultV2 } from './impl/iteration-limit-overlay-v2.js';
 export { AppModelOverlayV2, type AppModelOverlayV2Options, type AppModelOverlayV2Result } from './impl/app-model-overlay-v2.js';
 export { ModelWarningOverlayV2, type ModelWarningOptionsV2, type ModelWarningChoiceV2 } from './impl/model-warning-overlay-v2.js';

package/dist/ui/overlay/index.js

@@ -28,6 +28,8 @@ export { ConfigOverlayV2 } from './impl/config-overlay-v2.js';
 export { AskUserSimpleOverlayV2 } from './impl/ask-user-simple-overlay-v2.js';
 export { GuardrailOverlayV2 } from './impl/guardrail-overlay-v2.js';
 export { AskUserOverlayV2 } from './impl/ask-user-overlay-v2.js';
+export { ProposeAlternativesOverlayV2, } from './impl/propose-alternatives-overlay-v2.js';
+export { InteractiveFlowOverlayV2, } from './impl/interactive-flow-overlay-v2.js';
 export { IterationLimitOverlayV2 } from './impl/iteration-limit-overlay-v2.js';
 export { AppModelOverlayV2 } from './impl/app-model-overlay-v2.js';
 export { ModelWarningOverlayV2 } from './impl/model-warning-overlay-v2.js';

package/dist/ui/tool-formatters.js

@@ -202,6 +202,12 @@ export function formatToolResult(toolName, result) {
         else if (toolLower === 'ask_user' || toolLower === 'ask_user_simple') {
             ({ content, summary } = formatAskUser(innerResult));
         }
+        else if (toolLower === 'propose_alternatives') {
+            ({ content, summary } = formatProposeAlternatives(innerResult));
+        }
+        else if (toolLower === 'build_interactive_flow') {
+            ({ content, summary } = formatInteractiveFlow(innerResult));
+        }
         else if (toolLower === 'compilr_guide') {
             ({ content, summary } = formatCompilrGuide(innerResult));
         }
@@ -1268,22 +1274,74 @@ function formatWebFetch(result) {
     return { content, summary: `${urlShort}${statusInfo}${truncInfo}` };
 }
 function formatAskUser(result) {
-    // ask_user returns { answers: Record<string, string|string[]> }
+    // ask_user_simple returns { answer: string, skipped: boolean }
+    // ask_user returns { answers: Record<string, string|string[]>, skipped: string[] }
     const answers = result.answers;
     const answer = result.answer;
-    if (answer) {
+    const skipped = result.skipped;
+    // ask_user_simple
+    if (answer !== undefined) {
+        if (skipped === true)
+            return { content: '', summary: 'Skipped' };
         return { content: '', summary: `Answer: ${answer.slice(0, 60)}` };
     }
+    // ask_user
     if (answers) {
         const entries = Object.entries(answers);
+        // Single-question case — show the value inline as before.
         if (entries.length === 1) {
             const val = Array.isArray(entries[0][1]) ? entries[0][1].join(', ') : entries[0][1];
             return { content: '', summary: `Answer: ${val.slice(0, 60)}` };
         }
-        return { content: '', summary: `${String(entries.length)} answer(s)` };
+        // Multi-question case — list each "id: value" pair in the expanded
+        // body so the user can see what they answered without the agent
+        // having to echo it back. The summary keeps the count.
+        const lines = entries.map(([id, value]) => {
+            const val = Array.isArray(value) ? value.join(', ') : value;
+            return `${id}: ${val}`;
+        });
+        // Tack on a skipped line if anything was skipped.
+        if (Array.isArray(skipped) && skipped.length > 0) {
+            lines.push(`(skipped: ${skipped.join(', ')})`);
+        }
+        return {
+            content: lines.join('\n'),
+            summary: `${String(entries.length)} answer${entries.length === 1 ? '' : 's'}`,
+        };
     }
     return { content: '', summary: 'User responded' };
 }
+function formatProposeAlternatives(result) {
+    // The SDK reshapes the handler's ProposeAlternativesResult before
+    // wrapping it (see compilr-dev-sdk/src/tools/propose-alternatives-tool.ts:175).
+    // The result we see here is:
+    //   pick:    { chosen: <title>, chosenIndex: N, notes?: string, rejected: false }
+    //   reject:  { chosen: null,    rejected: true, feedback: string }
+    const rejected = result.rejected === true;
+    const chosen = typeof result.chosen === 'string' ? result.chosen : '';
+    const notes = typeof result.notes === 'string' ? result.notes.trim() : '';
+    if (rejected) {
+        return { content: '', summary: 'Rejected' };
+    }
+    if (notes.length > 0) {
+        return {
+            content: `notes: ${notes}`,
+            summary: `Picked: ${chosen.slice(0, 50)} (with notes)`,
+        };
+    }
+    return { content: '', summary: `Picked: ${chosen.slice(0, 60)}` };
+}
+function formatInteractiveFlow(result) {
+    // The SDK passes the handler's InteractiveFlowResult through verbatim.
+    // The tool is marked silent:true in the SDK so this only runs if that
+    // flag changes in the future. Keep it in sync with the spec's close-summary.
+    const completed = result.completed === true;
+    const path = Array.isArray(result.path) ? result.path : [];
+    if (!completed) {
+        return { content: '', summary: `Cancelled at step ${String(path.length)}` };
+    }
+    return { content: '', summary: `Completed — ${String(path.length)} steps` };
+}
 function formatCompilrGuide(result) {
     const output = result.output;
     const content = output || '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/cli",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "description": "AI-powered coding assistant CLI using @compilr-dev/agents",
   "type": "module",
   "main": "dist/index.js",
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.74.0",
-    "@compilr-dev/agents": "^0.5.8",
+    "@compilr-dev/agents": "^0.5.9",
     "@compilr-dev/agents-coding": "^1.0.4",
     "@compilr-dev/editor-core": "^0.0.2",
     "@compilr-dev/factory": "^0.1.30",
     "@compilr-dev/logger": "^0.1.0",
-    "@compilr-dev/sdk": "^0.10.9",
+    "@compilr-dev/sdk": "^0.10.39",
     "@compilr-dev/ui-core": "^0.0.1",
     "@modelcontextprotocol/sdk": "^1.23.0",
     "ansi-escapes": "^7.3.0",