@kinqs/brainrouter-cli 0.3.6 → 0.3.8

package/dist/cli/ink/Picker.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { Frame } from './Frame.js';
+const OTHER_ID = '__other__';
+function themeToAccent(mode) {
+    if (mode === 'light')
+        return '#A24E1F';
+    if (mode === 'mono')
+        return 'white';
+    if (mode === 'dark')
+        return '#CC9166';
+    return undefined;
+}
+export function Picker(props) {
+    const augmentedRows = useMemo(() => {
+        if (!props.allowOther)
+            return props.rows;
+        return [
+            ...props.rows,
+            {
+                id: OTHER_ID,
+                label: props.otherLabel ?? 'Other',
+                description: props.otherDescription ?? 'Type a free-form answer',
+            },
+        ];
+    }, [props.rows, props.allowOther, props.otherLabel, props.otherDescription]);
+    const [cursor, setCursor] = useState(() => Math.max(0, Math.min(props.initialCursor ?? 0, augmentedRows.length - 1)));
+    const [selected, setSelected] = useState(() => new Set());
+    const [phase, setPhase] = useState(props.prefilledOther !== undefined ? 'other' : 'pick');
+    const [otherText, setOtherText] = useState(props.prefilledOther ?? '');
+    const [preview, setPreview] = useState(undefined);
+    // Picker is intentionally "exit-agnostic" — it just calls
+    // `props.onResolve(result)` and trusts the caller (runPicker or the
+    // chat overlay slot) to decide whether to unmount Ink. This matters
+    // because when Picker renders as an overlay INSIDE the chat Ink, an
+    // internal `useApp().exit()` would unmount the WHOLE chat instead of
+    // just hiding the picker. runPicker.tsx wraps Picker in a small
+    // `ExitWrapper` for the standalone mount that owns the exit.
+    const finish = (result) => {
+        props.onResolve(result);
+    };
+    // Recompute preview when cursor moves OR on first mount.
+    //
+    // CRITICAL: store onCursorChange in a ref instead of including it in
+    // the deps array. Callers pass an inline lambda; React would see a
+    // new function reference every render, fire this effect, which calls
+    // setPreview(), which re-renders, which makes a new lambda, which
+    // fires the effect again — infinite loop that swallows every
+    // keystroke. The latest-callback ref pattern is the canonical fix.
+    const onCursorChangeRef = useRef(props.onCursorChange);
+    useEffect(() => { onCursorChangeRef.current = props.onCursorChange; });
+    useEffect(() => {
+        if (phase !== 'pick') {
+            setPreview(undefined);
+            return;
+        }
+        const cb = onCursorChangeRef.current;
+        if (!cb) {
+            setPreview(undefined);
+            return;
+        }
+        const row = augmentedRows[cursor];
+        if (!row || row.id === OTHER_ID) {
+            setPreview(undefined);
+            return;
+        }
+        try {
+            setPreview(cb(row.id, cursor));
+        }
+        catch {
+            setPreview(undefined);
+        }
+        // Intentionally omit augmentedRows + onCursorChangeRef from deps:
+        // augmentedRows is derived from props and stable across renders
+        // for a given mount; the callback is read through the ref.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cursor, phase]);
+    useInput((input, key) => {
+        if (key.ctrl && input === 'c') {
+            finish({ kind: 'cancelled' });
+            return;
+        }
+        if (phase === 'other') {
+            // TextInput owns Enter/Backspace/character handling via onChange.
+            // We only handle Esc here to bail back to pick phase.
+            if (key.escape) {
+                setPhase('pick');
+                setOtherText('');
+            }
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((c) => (c - 1 + augmentedRows.length) % augmentedRows.length);
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((c) => (c + 1) % augmentedRows.length);
+            return;
+        }
+        if (key.return) {
+            const row = augmentedRows[cursor];
+            if (props.multiSelect) {
+                if (selected.size === 0)
+                    return;
+                if (selected.has(OTHER_ID)) {
+                    setPhase('other');
+                    return;
+                }
+                const ids = augmentedRows.filter((r) => selected.has(r.id)).map((r) => r.id);
+                finish({ kind: 'multi', id: ids[0] ?? '', ids });
+                return;
+            }
+            if (row.id === OTHER_ID) {
+                setPhase('other');
+                return;
+            }
+            finish({ kind: 'pick', id: row.id });
+            return;
+        }
+        if (input === ' ' && props.multiSelect) {
+            const row = augmentedRows[cursor];
+            setSelected((prev) => {
+                const next = new Set(prev);
+                if (next.has(row.id))
+                    next.delete(row.id);
+                else
+                    next.add(row.id);
+                return next;
+            });
+            return;
+        }
+        if (key.escape || input === 'q') {
+            finish({ kind: 'cancelled' });
+            return;
+        }
+    });
+    const footer = props.footer ?? (phase === 'other'
+        ? '↵ accept  ·  esc back  ·  ⌫ erase'
+        : props.multiSelect
+            ? '↑/↓ navigate  ·  space toggle  ·  ↵ confirm  ·  esc / q cancel'
+            : '↑/↓ navigate  ·  ↵ confirm  ·  esc / q cancel');
+    const accent = props.accentColor ?? themeToAccent(props.theme?.mode) ?? '#CC9166';
+    return (_jsxs(Frame, { title: props.title, subtitle: props.subtitle, badge: props.badge, footer: footer, accentColor: accent, children: [phase === 'pick' ? (_jsx(PickerRows, { rows: augmentedRows, cursor: cursor, accentColor: accent, multiSelect: !!props.multiSelect, selected: selected })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: accent, children: "\u203A Type your answer" }), _jsx(Text, { color: "gray", dimColor: true, children: props.otherDescription ?? 'Press ENTER to accept' }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: "\u203A " }), _jsx(TextInput, { value: otherText, onChange: setOtherText, onSubmit: (value) => {
+                                    const trimmed = value.trim();
+                                    if (!trimmed)
+                                        return;
+                                    if (props.multiSelect) {
+                                        finish({
+                                            kind: 'multi',
+                                            id: augmentedRows.find((r) => selected.has(r.id) && r.id !== OTHER_ID)?.id ?? '',
+                                            ids: augmentedRows.filter((r) => selected.has(r.id) && r.id !== OTHER_ID).map((r) => r.id),
+                                            otherText: trimmed,
+                                        });
+                                        return;
+                                    }
+                                    finish({ kind: 'other', text: trimmed });
+                                } })] })] })), preview && preview.length > 0 ? (_jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", borderTop: true, borderLeft: false, borderRight: false, borderBottom: false, children: preview.map((line, i) => _jsx(Text, { children: line }, i)) })) : null] }));
+}
+function PickerRows({ rows, cursor, accentColor, multiSelect, selected }) {
+    return (_jsx(Box, { flexDirection: "column", children: rows.map((row, i) => (_jsx(PickerRowView, { row: row, selected: i === cursor, accentColor: accentColor, multiSelect: multiSelect, checked: selected.has(row.id) }, row.id))) }));
+}
+function PickerRowView({ row, selected, accentColor, multiSelect, checked }) {
+    // Selected glyph + bold label + right-aligned value, lifted from
+    // openSrc/grok-cli/src/ui/components/SuggestionOverlay.tsx
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: accentColor, children: selected ? ' › ' : '   ' }), multiSelect ? _jsx(Text, { color: checked ? accentColor : 'gray', children: checked ? '[x] ' : '[ ] ' }) : null, _jsx(Box, { flexGrow: 1, children: _jsx(Text, { bold: selected, color: selected ? accentColor : undefined, children: row.label }) }), row.value ? _jsx(Text, { color: "gray", children: row.value }) : null] }), row.description ? (_jsx(Box, { paddingLeft: 5, children: _jsx(Text, { color: "gray", dimColor: true, children: row.description }) })) : null] }));
+}

package/dist/cli/ink/SlashPalette.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Claude-code-style slash command palette.
+ *
+ * Opens when the user types `/` at an empty prompt. Renders:
+ *
+ *   ─────────────────────────────────────────────────────────
+ *    ❯ /loop
+ *   ─────────────────────────────────────────────────────────
+ *    › /loop         Run a prompt or slash command on a cadence
+ *      /login        In-REPL MCP profile editor
+ *      /logout       Clear API keys from the active profile
+ *      ↑/↓ select  ·  ↵ confirm  ·  tab autocomplete  ·  esc cancel
+ *
+ * Filter ranking (lifted from openSrc/grok-cli/src/ui/slash-menu.ts +
+ * openSrc/codex/codex-rs/tui/src/bottom_pane/command_popup.rs:143):
+ *
+ *   0  command body starts with query  (best — same-prefix match)
+ *   1  command body contains query
+ *   2  description contains query
+ *   3  no match — filtered out
+ *
+ * Stable secondary sort by original index so commands with the same
+ * score render in their canonical order each keystroke. Max visible
+ * rows capped at 8 (claude-code CHANGELOG line 378 — popup should
+ * NOT scale with terminal height; it stays compact).
+ */
+export interface SlashCommandDef {
+    /** "/help", "/config", etc. — the literal token. */
+    cmd: string;
+    /** One-line description shown after the command. */
+    description: string;
+}
+export interface SlashPaletteProps {
+    /** Initial input buffer (typically just "/" — the keystroke that opened the palette). */
+    initialQuery: string;
+    /** All registered slash commands. */
+    commands: SlashCommandDef[];
+    /** Theme accent for highlights / borders. Defaults to brand orange. */
+    accentColor?: string;
+    /** Called when the user accepts a line (Enter) — text is the full submitted line. */
+    onResolve: (result: SlashPaletteResult) => void;
+}
+export type SlashPaletteResult = {
+    kind: 'submit';
+    text: string;
+} | {
+    kind: 'cancelled';
+};
+export declare function scoreSlashCommand(cmd: SlashCommandDef, query: string): number;
+export declare function filterCommands(commands: SlashCommandDef[], query: string): SlashCommandDef[];
+export declare function SlashPalette({ initialQuery, commands, accentColor, onResolve }: SlashPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/cli/ink/SlashPalette.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useTerminalSize } from './useTerminalSize.js';
+const MAX_VISIBLE = 8;
+export function scoreSlashCommand(cmd, query) {
+    if (!query)
+        return 0;
+    const q = query.toLowerCase();
+    const body = cmd.cmd.slice(1).toLowerCase();
+    if (body.startsWith(q))
+        return 0;
+    if (body.includes(q))
+        return 1;
+    if (cmd.description.toLowerCase().includes(q))
+        return 2;
+    return 3;
+}
+export function filterCommands(commands, query) {
+    if (!query)
+        return commands.slice(0, MAX_VISIBLE);
+    const scored = commands
+        .map((c, i) => ({ c, i, s: scoreSlashCommand(c, query) }))
+        .filter((x) => x.s < 3);
+    scored.sort((a, b) => (a.s - b.s) || (a.i - b.i));
+    return scored.slice(0, MAX_VISIBLE).map((x) => x.c);
+}
+export function SlashPalette({ initialQuery, commands, accentColor = '#CC9166', onResolve }) {
+    const [value, setValue] = useState(initialQuery);
+    const [cursor, setCursor] = useState(0);
+    const { exit } = useApp();
+    // Compute the query portion (everything after the leading `/`, up to
+    // the first space — so `/spawn researcher` filters by `spawn`).
+    const query = useMemo(() => {
+        if (!value.startsWith('/'))
+            return '';
+        const tail = value.slice(1);
+        const space = tail.indexOf(' ');
+        return space < 0 ? tail : tail.slice(0, space);
+    }, [value]);
+    const matches = useMemo(() => filterCommands(commands, query), [commands, query]);
+    // Clamp cursor when matches shrink.
+    useEffect(() => {
+        if (cursor >= matches.length)
+            setCursor(Math.max(0, matches.length - 1));
+    }, [matches.length, cursor]);
+    const onResolveRef = useRef(onResolve);
+    useEffect(() => { onResolveRef.current = onResolve; });
+    useInput((input, key) => {
+        if (key.ctrl && input === 'c') {
+            onResolveRef.current({ kind: 'cancelled' });
+            exit();
+            return;
+        }
+        if (key.escape) {
+            onResolveRef.current({ kind: 'cancelled' });
+            exit();
+            return;
+        }
+        if (key.upArrow) {
+            if (matches.length > 0) {
+                setCursor((c) => (c - 1 + matches.length) % matches.length);
+            }
+            return;
+        }
+        if (key.downArrow) {
+            if (matches.length > 0) {
+                setCursor((c) => (c + 1) % matches.length);
+            }
+            return;
+        }
+        if (key.tab) {
+            // Tab autocompletes to the currently-highlighted command + space.
+            // User can continue typing args, then hit Enter to submit.
+            if (matches.length > 0) {
+                const picked = matches[cursor] ?? matches[0];
+                setValue(picked.cmd + ' ');
+                setCursor(0);
+            }
+            return;
+        }
+    });
+    // When user presses Enter — TextInput's onSubmit fires. Resolve with
+    // the highlighted match IF the buffer is JUST `/<query>` (no args
+    // typed yet); otherwise submit the buffer as-is so /spawn role prompt
+    // works without forcing the user to tab-complete first.
+    const onSubmit = (text) => {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            onResolveRef.current({ kind: 'cancelled' });
+            exit();
+            return;
+        }
+        // If the user typed JUST the slash + query (no args yet), AND the
+        // highlighted match is different from what they typed, expand to
+        // the match. Otherwise submit verbatim.
+        const tail = trimmed.slice(1);
+        const hasSpace = tail.includes(' ');
+        if (!hasSpace && matches.length > 0) {
+            const picked = matches[cursor] ?? matches[0];
+            if (picked.cmd !== trimmed) {
+                onResolveRef.current({ kind: 'submit', text: picked.cmd });
+                exit();
+                return;
+            }
+        }
+        onResolveRef.current({ kind: 'submit', text: trimmed });
+        exit();
+    };
+    // If the user types more than just `/`, AND it no longer starts with
+    // `/` (e.g. backspaced past the slash), cancel the palette so the
+    // user returns to the normal readline prompt.
+    useEffect(() => {
+        if (value.length > 0 && !value.startsWith('/')) {
+            onResolveRef.current({ kind: 'cancelled' });
+            exit();
+        }
+    }, [value, exit]);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Divider, { color: accentColor }), _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: accentColor, children: "\u276F " }), _jsx(TextInput, { value: value, onChange: setValue, onSubmit: onSubmit })] }), _jsx(Divider, { color: accentColor }), matches.length === 0 ? (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "(no matching commands)" }) })) : (_jsx(_Fragment, { children: matches.map((cmd, i) => (_jsx(SlashRow, { cmd: cmd, selected: i === cursor, accentColor: accentColor }, cmd.cmd))) })), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "\u2191/\u2193 select  \u00B7  \u21B5 confirm  \u00B7  tab autocomplete  \u00B7  esc cancel" }) })] }));
+}
+function SlashRow({ cmd, selected, accentColor }) {
+    // Width hint: pad the cmd column so descriptions align across rows.
+    // The widest known slash command is around 28 chars (e.g. `/implement-plan`
+    // is 15; longest help cmd lines are longer); 24 is a sensible target.
+    const cmdCol = 26;
+    const padded = cmd.cmd.length >= cmdCol ? cmd.cmd : cmd.cmd + ' '.repeat(cmdCol - cmd.cmd.length);
+    return (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: accentColor, children: selected ? '› ' : '  ' }), _jsx(Text, { bold: selected, color: selected ? accentColor : undefined, children: padded }), _jsx(Text, { color: "gray", children: cmd.description })] }));
+}
+function Divider({ color }) {
+    // Full-width horizontal rule — matches claude-code's chrome. Uses
+    // useTerminalSize so the divider auto-reflows on terminal resize
+    // instead of being frozen at its initial width.
+    const { columns } = useTerminalSize();
+    return (_jsx(Box, { children: _jsx(Text, { color: color, dimColor: true, children: '─'.repeat(Math.max(20, columns - 1)) }) }));
+}

package/dist/cli/ink/TextField.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Framed free-text input. Used by the wizard's API-key step, the
+ * remote-URL prompt, and the /config / /login sub-prompts.
+ *
+ * The `validate` callback runs on submit. Return undefined to accept;
+ * return a string to render it as an inline error and keep the field
+ * open for the user to fix.
+ */
+export interface TextFieldProps {
+    title: string;
+    subtitle?: string;
+    badge?: string;
+    prefilled?: string;
+    placeholder?: string;
+    mask?: boolean;
+    validate?: (value: string) => string | undefined;
+    accentColor?: string;
+    /** Back-compat: pulls accentColor from theme.mode if accentColor not set. */
+    theme?: {
+        mode: string;
+    };
+    /** Ignored — kept for back-compat with old picker shape. */
+    eraseOnClose?: boolean;
+    /** Ignored — kept for back-compat. */
+    footer?: string;
+    onResolve: (result: TextFieldResult) => void;
+}
+export type TextFieldResult = {
+    kind: 'accept';
+    text: string;
+} | {
+    kind: 'cancelled';
+};
+export declare function TextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/cli/ink/TextField.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { Frame } from './Frame.js';
+function themeToAccent(mode) {
+    if (mode === 'light')
+        return '#A24E1F';
+    if (mode === 'mono')
+        return 'white';
+    if (mode === 'dark')
+        return '#CC9166';
+    return undefined;
+}
+export function TextField(props) {
+    const [value, setValue] = useState(props.prefilled ?? '');
+    const [error, setError] = useState(undefined);
+    // Exit-agnostic: just resolves. The caller (runTextField for the
+    // standalone mount, or the chat overlay slot when invoked from inside
+    // the Ink chat REPL) decides what to do. See Picker.tsx comment for
+    // why a built-in `useApp().exit()` here would break the overlay path.
+    const finish = (result) => {
+        props.onResolve(result);
+    };
+    useInput((input, key) => {
+        if (key.escape || (key.ctrl && input === 'c')) {
+            finish({ kind: 'cancelled' });
+        }
+    });
+    const onSubmit = (next) => {
+        if (props.validate) {
+            const verdict = props.validate(next);
+            if (verdict !== undefined) {
+                setError(verdict);
+                return;
+            }
+        }
+        finish({ kind: 'accept', text: next });
+    };
+    const onChange = (next) => {
+        setValue(next);
+        if (error)
+            setError(undefined);
+    };
+    const accent = props.accentColor ?? themeToAccent(props.theme?.mode) ?? '#CC9166';
+    return (_jsxs(Frame, { title: props.title, subtitle: props.subtitle, badge: props.badge, footer: props.footer ?? '↵ accept  ·  esc cancel  ·  ⌫ erase', accentColor: accent, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "\u203A " }), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: props.placeholder, mask: props.mask ? '·' : undefined })] }), error ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["\u2717 ", error] }) })) : null] }));
+}

package/dist/cli/ink/WizardApp.d.ts

@@ -0,0 +1,7 @@
+import { type WizardState } from '../wizard/types.js';
+export interface WizardAppProps {
+    workspaceRoot: string;
+    /** Fires once the wizard reaches a terminal state. */
+    onFinish: (state: WizardState) => void;
+}
+export declare function WizardApp({ workspaceRoot, onFinish }: WizardAppProps): import("react/jsx-runtime").JSX.Element;