@compilr-dev/cli 0.7.3 → 0.7.5

package/dist/ui/overlay/impl/interactive-flow-overlay-v2.js

@@ -0,0 +1,580 @@
+/**
+ * Interactive Flow Overlay V2
+ *
+ * Multi-screen wizard for the `build_interactive_flow` DSL. Walks the
+ * user through a tree of nodes (question / info / branch / summary)
+ * defined by the agent. Branches are pure routing — never rendered.
+ *
+ * The state-machine logic (next-resolution, branch evaluation,
+ * backtrack) lives in `@compilr-dev/sdk/flow-runner` as pure helpers
+ * shared with Desktop. This overlay only handles per-node rendering +
+ * keyboard input + the renderer-specific transient state (cursor
+ * position, multi-selections, text buffer).
+ *
+ * Renderer collapses: the SDK has many `render` variants (tile-row,
+ * card-grid, segmented, …) that target GUIs. The terminal collapses
+ * them all to one rendering per input mode — `render` is ignored, as
+ * are `tone`, `density`, `icon`.
+ *
+ * Phase coverage (per spec):
+ *   - Phase A: single + text(single-line) + info + summary + branch ✓
+ *   - Phase B: multi + text(multiline) ✓
+ *   - Phase C: proposal mode — rendered inline as a numbered list with
+ *     pros + cons under each option. Same selection UX as 'single' mode
+ *     (arrows / 1-9 / Enter). Result is the chosen Proposal's id, which
+ *     `lookupLabel` resolves to the option's label for the summary table.
+ *
+ * Spec: project-docs/00-requirements/compilr-dev-cli/interactive-flow-cli-spec.md
+ */
+import { resolveNext, walkPastBranches, applyBacktrack, lookupLabel, } from '@compilr-dev/sdk';
+import { BaseOverlayV2, renderBorder, wrapText } from '../../base/index.js';
+import { renderMarkdown } from '../../conversation.js';
+// =============================================================================
+// Overlay
+// =============================================================================
+export class InteractiveFlowOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'interactive-flow-overlay-v2';
+    flow;
+    constructor(options) {
+        const initialPath = walkPastBranches(options.flow, [options.flow.startNode], {});
+        super({
+            path: initialPath,
+            answers: {},
+            answerLabels: {},
+            startedAt: Date.now(),
+            selectedIndex: 0,
+            multiSelections: new Set(),
+            inputBuffer: '',
+            warning: '',
+        });
+        this.flow = options.flow;
+        this.minHeight = 22;
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Public API
+    // ───────────────────────────────────────────────────────────────────────────
+    renderContent(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const node = this.currentNode();
+        // Header
+        lines.push(border);
+        for (const line of wrapText(this.flow.title, cols - 2)) {
+            lines.push(' ' + s.primaryBold(line));
+        }
+        if (this.flow.description) {
+            for (const line of wrapText(this.flow.description, cols - 4)) {
+                lines.push('   ' + s.muted(line));
+            }
+        }
+        lines.push('');
+        // Body — dispatch on node type
+        if (node === undefined) {
+            lines.push(' ' + s.error('Malformed flow: current node is missing'));
+        }
+        else if (node.type === 'question') {
+            lines.push(...this.renderQuestion(node, s, cols));
+        }
+        else if (node.type === 'info') {
+            lines.push(...this.renderInfo(node, s, cols));
+        }
+        else if (node.type === 'summary') {
+            lines.push(...this.renderSummary(node, s, cols));
+        }
+        // Footer / warnings
+        lines.push('');
+        if (this.state.warning) {
+            lines.push(' ' + s.warning(`! ${this.state.warning}`));
+            lines.push('');
+        }
+        lines.push(' ' + s.muted(this.footerHints(node)));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(key) {
+        // Ctrl+C — hard cancel
+        if (key.ctrl && key.name === 'c') {
+            return this.close(this.makeAborted('escape'));
+        }
+        const node = this.currentNode();
+        if (node === undefined) {
+            // Malformed flow — close as aborted
+            return this.close(this.makeAborted('unknown'));
+        }
+        // 'q' — soft cancel from any node
+        if (key.char === 'q' && !key.ctrl && !key.meta) {
+            return this.close(this.makeAborted('escape'));
+        }
+        // Esc — back one user-visible step, or cancel if no prior visible node
+        if (key.name === 'escape') {
+            return this.handleBackOrCancel();
+        }
+        if (node.type === 'question') {
+            return this.handleQuestionKey(node, key);
+        }
+        if (node.type === 'info') {
+            return this.handleInfoKey(node, key);
+        }
+        if (node.type === 'summary') {
+            return this.handleSummaryKey(key);
+        }
+        return this.noAction();
+    }
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        if (!result.completed) {
+            const stepCount = result.path.length;
+            return s.muted('Flow: ') + s.warning(`cancelled at step ${String(stepCount)}`);
+        }
+        const stepCount = result.path.length;
+        return s.muted('Flow: ') + s.success(`completed — ${String(stepCount)} steps`);
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Current node helpers
+    // ───────────────────────────────────────────────────────────────────────────
+    currentNodeId() {
+        return this.state.path[this.state.path.length - 1];
+    }
+    currentNode() {
+        const id = this.currentNodeId();
+        if (id === undefined)
+            return undefined;
+        return this.flow.nodes[id];
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // QuestionNode rendering & input
+    // ───────────────────────────────────────────────────────────────────────────
+    renderQuestion(node, s, cols) {
+        const out = [];
+        for (const line of wrapText(node.prompt, cols - 2)) {
+            out.push(' ' + s.primaryBold(line));
+        }
+        if (node.description) {
+            for (const line of wrapText(node.description, cols - 4)) {
+                out.push('   ' + s.muted(line));
+            }
+        }
+        out.push('');
+        const mode = node.input.mode;
+        if (mode === 'single') {
+            for (let i = 0; i < node.input.choices.length; i++) {
+                const choice = node.input.choices[i];
+                const isCursor = i === this.state.selectedIndex;
+                const cursor = isCursor ? ' ▶' : '  ';
+                const num = i + 1 <= 9 ? ` ${String(i + 1)} ` : '   ';
+                const label = this.tinted(choice.label, choice.tint, s);
+                out.push(`${cursor}${num}${label}`);
+                if (choice.description) {
+                    for (const line of wrapText(choice.description, cols - 8)) {
+                        out.push('      ' + s.muted(line));
+                    }
+                }
+            }
+            return out;
+        }
+        if (mode === 'multi') {
+            for (let i = 0; i < node.input.choices.length; i++) {
+                const choice = node.input.choices[i];
+                const isCursor = i === this.state.selectedIndex;
+                const isSelected = this.state.multiSelections.has(i);
+                const cursor = isCursor ? ' ▶' : '  ';
+                const box = isSelected ? '[x]' : '[ ]';
+                const num = i + 1 <= 9 ? ` ${String(i + 1)} ` : '   ';
+                const label = this.tinted(choice.label, choice.tint, s);
+                out.push(`${cursor} ${box}${num}${label}`);
+                if (choice.description) {
+                    for (const line of wrapText(choice.description, cols - 10)) {
+                        out.push('        ' + s.muted(line));
+                    }
+                }
+            }
+            out.push('');
+            const min = node.input.min;
+            const max = node.input.max;
+            const constraintParts = [];
+            if (min !== undefined)
+                constraintParts.push(`min ${String(min)}`);
+            if (max !== undefined)
+                constraintParts.push(`max ${String(max)}`);
+            const constraints = constraintParts.length > 0 ? ` (${constraintParts.join(', ')})` : '';
+            out.push(' ' + s.muted(`Selected: ${String(this.state.multiSelections.size)}${constraints}`));
+            return out;
+        }
+        if (mode === 'text') {
+            const isMultiline = node.input.multiline === true;
+            const placeholder = node.input.placeholder ?? '';
+            if (isMultiline) {
+                // Multi-line: show buffer in a box. Up to 8 lines visible.
+                const bufLines = this.state.inputBuffer.split('\n');
+                const display = bufLines.length === 1 && bufLines[0].length === 0
+                    ? [placeholder ? s.muted(placeholder) : '']
+                    : bufLines;
+                const visible = display.slice(-8);
+                for (const line of visible) {
+                    out.push(' ▶ ' + line);
+                }
+                out.push(' ' + s.muted('  (Ctrl+D submits, Enter adds a line)'));
+                return out;
+            }
+            const display = this.state.inputBuffer.length === 0 && placeholder
+                ? s.muted(placeholder)
+                : this.state.inputBuffer;
+            out.push(' ▶ ' + display + '_');
+            return out;
+        }
+        // mode === 'proposal' — numbered list with pros/cons inline.
+        // Same selection UX as 'single' mode (arrows / 1-9 / Enter) but each
+        // option also surfaces its pros + cons below the label so the user can
+        // compare without leaving the flow modal.
+        for (let i = 0; i < node.input.options.length; i++) {
+            const opt = node.input.options[i];
+            const isCursor = i === this.state.selectedIndex;
+            const cursor = isCursor ? ' ▶' : '  ';
+            const num = i + 1 <= 9 ? ` ${String(i + 1)} ` : '   ';
+            const label = this.tinted(opt.label, opt.tint, s);
+            out.push(`${cursor}${num}${label}`);
+            if (opt.pros && opt.pros.length > 0) {
+                for (const pro of opt.pros) {
+                    for (const w of wrapText(pro, cols - 10)) {
+                        out.push('      ' + s.success('+ ' + w));
+                    }
+                }
+            }
+            if (opt.cons && opt.cons.length > 0) {
+                for (const con of opt.cons) {
+                    for (const w of wrapText(con, cols - 10)) {
+                        out.push('      ' + s.warning('− ' + w));
+                    }
+                }
+            }
+            // Spacer between options (skip after last to keep footer tight)
+            if (i < node.input.options.length - 1)
+                out.push('');
+        }
+        return out;
+    }
+    handleQuestionKey(node, key) {
+        const mode = node.input.mode;
+        if (mode === 'proposal') {
+            // node.input is the proposal variant (TS narrows via the mode check)
+            const input = node.input;
+            const count = input.options.length;
+            if (key.name === 'up') {
+                this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+                return this.rerender();
+            }
+            if (key.name === 'down') {
+                this.state.selectedIndex = Math.min(count - 1, this.state.selectedIndex + 1);
+                return this.rerender();
+            }
+            if (key.char && /^[1-9]$/.test(key.char)) {
+                const idx = parseInt(key.char, 10) - 1;
+                if (idx < count) {
+                    this.state.selectedIndex = idx;
+                    return this.rerender();
+                }
+            }
+            if (key.name === 'return' || key.name === 'enter') {
+                const opt = input.options[this.state.selectedIndex];
+                return this.advance(opt.id, lookupLabel(node, opt.id));
+            }
+            return this.noAction();
+        }
+        if (mode === 'single') {
+            const count = node.input.choices.length;
+            if (key.name === 'up') {
+                this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+                return this.rerender();
+            }
+            if (key.name === 'down') {
+                this.state.selectedIndex = Math.min(count - 1, this.state.selectedIndex + 1);
+                return this.rerender();
+            }
+            if (key.char && /^[1-9]$/.test(key.char)) {
+                const idx = parseInt(key.char, 10) - 1;
+                if (idx < count) {
+                    this.state.selectedIndex = idx;
+                    return this.rerender();
+                }
+            }
+            if (key.name === 'return' || key.name === 'enter') {
+                const choice = node.input.choices[this.state.selectedIndex];
+                return this.advance(choice.id, lookupLabel(node, choice.id));
+            }
+            return this.noAction();
+        }
+        if (mode === 'multi') {
+            // node.input is the multi variant here (TS narrows via mode check)
+            const input = node.input;
+            const count = input.choices.length;
+            if (key.name === 'up') {
+                this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+                return this.rerender();
+            }
+            if (key.name === 'down') {
+                this.state.selectedIndex = Math.min(count - 1, this.state.selectedIndex + 1);
+                return this.rerender();
+            }
+            if (key.char === ' ' || key.name === 'space') {
+                if (this.state.multiSelections.has(this.state.selectedIndex)) {
+                    this.state.multiSelections.delete(this.state.selectedIndex);
+                }
+                else {
+                    this.state.multiSelections.add(this.state.selectedIndex);
+                }
+                return this.rerender();
+            }
+            if (key.char && /^[1-9]$/.test(key.char)) {
+                const idx = parseInt(key.char, 10) - 1;
+                if (idx < count) {
+                    this.state.selectedIndex = idx;
+                    return this.rerender();
+                }
+            }
+            if (key.name === 'return' || key.name === 'enter') {
+                const selected = [...this.state.multiSelections].sort((a, b) => a - b);
+                const min = input.min ?? 0;
+                const max = input.max ?? Infinity;
+                if (selected.length < min) {
+                    this.state.warning = `Pick at least ${String(min)}`;
+                    return this.rerender();
+                }
+                if (selected.length > max) {
+                    this.state.warning = `Pick at most ${String(max)}`;
+                    return this.rerender();
+                }
+                const answerIds = selected.map((i) => input.choices[i].id);
+                return this.advance(answerIds, lookupLabel(node, answerIds));
+            }
+            return this.noAction();
+        }
+        // mode === 'text' (after eliminating single/multi/proposal above).
+        // node.input is the text variant; access `multiline` directly.
+        const isMultiline = 'multiline' in node.input && node.input.multiline === true;
+        if (key.name === 'backspace') {
+            this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
+            return this.rerender();
+        }
+        if (isMultiline) {
+            // Ctrl+D submits, Enter adds a newline
+            if (key.ctrl && (key.name === 'd' || key.char === 'd')) {
+                return this.advance(this.state.inputBuffer, lookupLabel(node, this.state.inputBuffer));
+            }
+            if (key.name === 'return' || key.name === 'enter') {
+                this.state.inputBuffer += '\n';
+                return this.rerender();
+            }
+        }
+        else {
+            // Single-line: Enter submits
+            if (key.name === 'return' || key.name === 'enter') {
+                return this.advance(this.state.inputBuffer, lookupLabel(node, this.state.inputBuffer));
+            }
+        }
+        if (key.char && key.char.length === 1 && !key.ctrl && !key.meta) {
+            this.state.inputBuffer += key.char;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // InfoNode
+    // ───────────────────────────────────────────────────────────────────────────
+    renderInfo(node, s, cols) {
+        const out = [];
+        out.push(' ' + s.primaryBold(node.title));
+        out.push('');
+        let body;
+        try {
+            body = renderMarkdown(node.body);
+        }
+        catch {
+            body = node.body;
+        }
+        for (const line of body.split('\n')) {
+            // Wrap each rendered line within terminal width
+            for (const w of wrapText(line.trimEnd(), cols - 4)) {
+                out.push('   ' + w);
+            }
+        }
+        return out;
+    }
+    handleInfoKey(node, key) {
+        if (key.name === 'return' || key.name === 'enter') {
+            return this.advanceInfo(node);
+        }
+        return this.noAction();
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // SummaryNode
+    // ───────────────────────────────────────────────────────────────────────────
+    renderSummary(node, s, cols) {
+        const out = [];
+        out.push(' ' + s.primaryBold(node.title));
+        if (node.recap) {
+            out.push('');
+            let recap;
+            try {
+                recap = renderMarkdown(node.recap);
+            }
+            catch {
+                recap = node.recap;
+            }
+            for (const line of recap.split('\n')) {
+                for (const w of wrapText(line.trimEnd(), cols - 4)) {
+                    out.push('   ' + w);
+                }
+            }
+        }
+        out.push('');
+        // Answer table — iterate path entries that are question nodes
+        const rows = [];
+        for (const id of this.state.path) {
+            const n = this.flow.nodes[id];
+            // Defensive against missing-node references in path (shouldn't happen
+            // but path entries come from runtime, not the type system)
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (n && n.type === 'question' && id in this.state.answerLabels) {
+                const label = n.prompt.slice(0, 30);
+                const raw = this.state.answerLabels[id];
+                const value = Array.isArray(raw) ? raw.join(', ') : raw;
+                rows.push({ label, value });
+            }
+        }
+        if (rows.length === 0) {
+            out.push(' ' + s.muted('(no answers collected)'));
+            return out;
+        }
+        const maxLabelWidth = Math.max(...rows.map((r) => r.label.length));
+        for (const row of rows) {
+            const padded = row.label.padEnd(maxLabelWidth);
+            out.push(`   ${s.muted(padded)}  ${row.value}`);
+        }
+        return out;
+    }
+    handleSummaryKey(key) {
+        if (key.name === 'return' || key.name === 'enter') {
+            return this.close(this.makeCompleted());
+        }
+        return this.noAction();
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Transitions — delegate to SDK helpers
+    // ───────────────────────────────────────────────────────────────────────────
+    advance(answer, label) {
+        const node = this.currentNode();
+        if (node === undefined || node.type !== 'question')
+            return this.noAction();
+        const updatedAnswers = { ...this.state.answers, [node.id]: answer };
+        const updatedLabels = { ...this.state.answerLabels, [node.id]: label };
+        const nextId = resolveNext(node.next, answer);
+        if (!nextId || !(nextId in this.flow.nodes)) {
+            // Malformed — abort with warning
+            return this.close(this.makeAborted('unknown'));
+        }
+        const newPath = walkPastBranches(this.flow, [...this.state.path, nextId], updatedAnswers);
+        this.state.answers = updatedAnswers;
+        this.state.answerLabels = updatedLabels;
+        this.state.path = newPath;
+        this.resetTransientState();
+        return this.rerender();
+    }
+    advanceInfo(node) {
+        const nextId = resolveNext(node.next);
+        if (!nextId || !(nextId in this.flow.nodes)) {
+            return this.close(this.makeAborted('unknown'));
+        }
+        const newPath = walkPastBranches(this.flow, [...this.state.path, nextId], this.state.answers);
+        this.state.path = newPath;
+        this.resetTransientState();
+        return this.rerender();
+    }
+    handleBackOrCancel() {
+        const result = applyBacktrack(this.flow, this.state.path, this.state.answers, this.state.answerLabels);
+        if (result === null) {
+            // No prior visible node — treat Esc as cancel
+            return this.close(this.makeAborted('escape'));
+        }
+        this.state.path = result.path;
+        this.state.answers = result.answers;
+        this.state.answerLabels = result.answerLabels;
+        this.resetTransientState();
+        return this.rerender();
+    }
+    resetTransientState() {
+        this.state.selectedIndex = 0;
+        this.state.multiSelections = new Set();
+        this.state.inputBuffer = '';
+        this.state.warning = '';
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Result builders
+    // ───────────────────────────────────────────────────────────────────────────
+    makeCompleted() {
+        return {
+            completed: true,
+            path: [...this.state.path],
+            answers: { ...this.state.answers },
+            answerLabels: { ...this.state.answerLabels },
+            durationMs: Date.now() - this.state.startedAt,
+        };
+    }
+    makeAborted(reason) {
+        return {
+            completed: false,
+            path: [...this.state.path],
+            answers: { ...this.state.answers },
+            answerLabels: { ...this.state.answerLabels },
+            abortedAt: this.currentNodeId(),
+            abortReason: reason,
+            durationMs: Date.now() - this.state.startedAt,
+        };
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Footer + tints
+    // ───────────────────────────────────────────────────────────────────────────
+    footerHints(node) {
+        if (node === undefined)
+            return '[q] cancel';
+        if (node.type === 'question') {
+            const mode = node.input.mode;
+            if (mode === 'single') {
+                return '[↑↓/1-9] navigate · [Enter] confirm · [Esc] back · [q] cancel';
+            }
+            if (mode === 'multi') {
+                return '[↑↓/1-9] navigate · [Space] toggle · [Enter] confirm · [Esc] back · [q] cancel';
+            }
+            if (mode === 'text') {
+                const isMultiline = 'multiline' in node.input && node.input.multiline === true;
+                return isMultiline
+                    ? '[Ctrl+D] submit · [Enter] new line · [Esc] back · [q] cancel'
+                    : '[Enter] submit · [Esc] back · [q] cancel';
+            }
+            // mode === 'proposal'
+            return '[↑↓/1-9] navigate · [Enter] pick · [Esc] back · [q] cancel';
+        }
+        if (node.type === 'info') {
+            return '[Enter] continue · [Esc] back · [q] cancel';
+        }
+        if (node.type === 'summary') {
+            return '[Enter] confirm · [Esc] back · [q] cancel';
+        }
+        return '[q] cancel';
+    }
+    tinted(label, tint, s) {
+        if (tint === 'success')
+            return s.success(label);
+        if (tint === 'warning')
+            return s.warning(label);
+        if (tint === 'danger')
+            return s.error(label);
+        if (tint === 'accent')
+            return s.primary(label);
+        if (tint === 'muted')
+            return s.muted(label);
+        return label;
+    }
+}

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

@@ -26,6 +26,10 @@ type WorkflowMode = 'flexible' | 'guided';
 interface NewProjectState {
     step: WizardStep;
     projectType: 'new' | 'existing' | null;
+    /** SDK project type id picked at step 3 ('web', 'general', 'research', 'business-plan',
+     *  'content', 'tech-docs', 'course', 'book'). Drives whether steps 4+5 are shown and
+     *  populates the roster step. */
+    projectTypeId: string;
     projectName: string;
     description: string;
     repoPattern: RepoPattern | null;
@@ -39,6 +43,13 @@ interface NewProjectState {
     gitUserName: string | null;
     gitUserEmail: string | null;
     gitRemoteInputMode: boolean;
+    rosterMode: 'auto' | 'custom' | 'skip';
+    /** Per-role include flag, pre-filled from the picked type's suggestedAgents.
+     *  Only used when rosterMode === 'custom'. */
+    rosterToggles: Record<string, boolean>;
+    /** Sub-mode of step 7 — when true, render the toggle grid instead of the
+     *  three-option selector. Same pattern as gitRemoteInputMode on step 6. */
+    rosterCustomizeMode: boolean;
     importPath: string;
     detectedProject: DetectedProject | null;
     importGitChoice: 'detected' | 'custom' | 'skip' | 'init' | 'init-skip' | null;
@@ -59,6 +70,13 @@ export interface NewProjectResultV2 {
     projectName?: string;
     description?: string;
     gitRemote?: string;
+    /** SDK project type id chosen at step 3. Used by the close handler to register the
+     *  project with the correct `type` instead of the hardcoded 'general' fallback. */
+    projectTypeId?: string;
+    /** SDK-canonical short role keys to add to the team after generation. Resolved at
+     *  close based on rosterMode ('auto' → all suggestedAgents, 'custom' → toggled ones,
+     *  'skip' → empty). */
+    rosterRolesToAdd?: string[];
     imported?: boolean;
     detectedProject?: DetectedProject;
 }
@@ -78,7 +96,17 @@ export declare class NewProjectOverlayV2 extends BaseOverlayV2<NewProjectState,
     private renderStep5;
     private renderStep6;
     private renderStep7;
+    /** Step 7 sub-mode: toggle each suggested agent on/off via Space. */
+    private renderStep7Customize;
     private renderStep8;
+    /** After the git step ends, advance to step 7 (roster) — but auto-skip to
+     *  step 8 (final confirm) when the picked type has no suggested agents
+     *  (e.g. 'general'). Centralised so both Enter-confirm and Esc-skip on the
+     *  gitRemoteInputMode sub-mode take the same path. */
+    private advancePastGitStep;
+    /** Resolve the roles to add based on the chosen rosterMode + toggles. Used by
+     *  both the step 8 summary render and the result builder at close time. */
+    private resolveRosterRolesToAdd;
     private renderImportStep1;
     private renderImportStep2;
     private renderImportStep3;
@@ -87,6 +115,10 @@ export declare class NewProjectOverlayV2 extends BaseOverlayV2<NewProjectState,
     private renderImportStepFooter;
     handleKey(key: KeyEvent): OverlayAction<NewProjectResultV2> | Promise<OverlayAction<NewProjectResultV2>>;
     private handleSelectionKey;
+    /** Keys for the step 7 customize sub-mode: ↑/↓ moves between agents, Space
+     *  toggles the highlighted agent's include flag, Enter confirms the current
+     *  selection and advances to step 8 (or back to mode picker if nothing left). */
+    private handleRosterCustomizeKey;
     private handleSelectionEnter;
     private handleInputKey;
     private handleGitRemoteInput;