@build-astron-co/nimbus 0.2.0 → 0.4.0

package/dist/src/ui/DeployPreview.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+/** Map change action to a prefix character and colour. */
+const ACTION_DISPLAY = {
+    create: { prefix: '+', color: 'green' },
+    modify: { prefix: '~', color: 'yellow' },
+    destroy: { prefix: '-', color: 'red' },
+    replace: { prefix: '-/+', color: 'magenta' },
+};
+/**
+ * Compute summary counts for the banner line.
+ */
+function summaryCounts(changes) {
+    let add = 0;
+    let change = 0;
+    let destroy = 0;
+    for (const c of changes) {
+        switch (c.action) {
+            case 'create':
+                add++;
+                break;
+            case 'modify':
+            case 'replace':
+                change++;
+                break;
+            case 'destroy':
+                destroy++;
+                break;
+        }
+    }
+    return { add, change, destroy };
+}
+/**
+ * A single row in the change table.
+ */
+function ChangeRow({ change }) {
+    const display = ACTION_DISPLAY[change.action];
+    return (_jsxs(Box, { children: [_jsx(Text, { color: display.color, bold: true, children: display.prefix.padEnd(4) }), _jsx(Text, { children: change.resourceType }), _jsx(Text, { dimColor: true, children: "." }), _jsx(Text, { bold: true, children: change.resourceName }), change.details && _jsxs(Text, { dimColor: true, children: [" (", change.details, ")"] })] }));
+}
+/**
+ * DeployPreview renders the full preview modal with a change table and
+ * action key legend.
+ */
+export function DeployPreview({ preview, onDecide }) {
+    useInput(input => {
+        switch (input) {
+            case 'a':
+                onDecide('approve');
+                break;
+            case 'r':
+                onDecide('reject');
+                break;
+            case 'p':
+                onDecide('show_plan');
+                break;
+        }
+    });
+    const counts = summaryCounts(preview.changes);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Tip: Run /plan to review changes in detail before applying." }), _jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "yellow", paddingX: 1, paddingY: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "Deploy Preview" }), _jsxs(Text, { dimColor: true, children: [" (", preview.tool, ")"] })] }), _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "green", children: ["+", counts.add, " to add"] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "yellow", children: ["~", counts.change, " to change"] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "red", children: ["-", counts.destroy, " to destroy"] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [preview.changes.map((change, idx) => (_jsx(ChangeRow, { change: change }, idx))), preview.changes.length === 0 && _jsx(Text, { dimColor: true, children: "No resource changes detected." })] }), preview.costImpact && (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Cost impact: " }), _jsx(Text, { children: preview.costImpact })] })), preview.blastRadius && (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Blast radius: " }), _jsx(Text, { color: "yellow", children: preview.blastRadius })] })), preview.affectedServices && preview.affectedServices.length > 0 && (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Affected services: " }), _jsx(Text, { children: preview.affectedServices.join(', ') })] })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "green", bold: true, children: "[a]" }), _jsx(Text, { children: " Approve " }), _jsx(Text, { color: "red", bold: true, children: "[r]" }), _jsx(Text, { children: " Reject " }), _jsx(Text, { color: "cyan", bold: true, children: "[p]" }), _jsx(Text, { children: " Show full plan" })] })] })] }));
+}

package/dist/src/ui/FileDiffModal.js

@@ -0,0 +1,108 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * FileDiffModal Component
+ *
+ * Shows a proposed file change as a unified diff and waits for the user
+ * to approve or reject before the agent applies the change.
+ */
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+/**
+ * G9: Process a FileDiffBatch sequentially, presenting each diff via the
+ * provided `showDiff` callback (which renders a `FileDiffRequest`).
+ *
+ * The caller supplies `showDiff` which wires into App state.  Each file is
+ * presented in order; 'apply-all' or 'reject-all' short-circuits the rest.
+ */
+export function queueFileDiffBatch(batch, showDiff) {
+    const decisions = [];
+    function processNext(index) {
+        if (index >= batch.files.length) {
+            batch.onComplete(decisions);
+            return;
+        }
+        const file = batch.files[index];
+        showDiff({
+            toolName: file.toolName,
+            filePath: file.filePath,
+            diff: file.diff,
+            currentIndex: index + 1,
+            totalCount: batch.files.length,
+            onDecide: (decision) => {
+                decisions.push(decision);
+                if (decision === 'apply-all') {
+                    // Fill remaining with 'apply'
+                    for (let i = index + 1; i < batch.files.length; i++) {
+                        decisions.push('apply');
+                    }
+                    batch.onComplete(decisions);
+                }
+                else if (decision === 'reject-all') {
+                    // Fill remaining with 'reject'
+                    for (let i = index + 1; i < batch.files.length; i++) {
+                        decisions.push('reject');
+                    }
+                    batch.onComplete(decisions);
+                }
+                else {
+                    processNext(index + 1);
+                }
+            },
+        });
+    }
+    processNext(0);
+}
+const VISIBLE_LINES = 30;
+/**
+ * Modal overlay that displays a proposed file diff and collects user approval.
+ *
+ * Keyboard bindings:
+ *   a — Apply this change
+ *   r — Reject this change
+ *   A — Apply this and all remaining changes (skip future prompts)
+ *   R — Reject this and all remaining changes
+ *   ↑/↓ — Scroll up/down one line
+ *   PgUp/PgDn — Scroll up/down one page
+ */
+export function FileDiffModal({ request }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const diffLines = request.diff.split('\n');
+    const total = diffLines.length;
+    const maxOffset = Math.max(0, total - VISIBLE_LINES);
+    useInput((input, key) => {
+        if (input === 'a')
+            request.onDecide('apply');
+        if (input === 'r')
+            request.onDecide('reject');
+        if (input === 'A')
+            request.onDecide('apply-all');
+        if (input === 'R')
+            request.onDecide('reject-all');
+        if (key.upArrow)
+            setScrollOffset(o => Math.max(0, o - 1));
+        if (key.downArrow)
+            setScrollOffset(o => Math.min(maxOffset, o + 1));
+        if (key.pageUp)
+            setScrollOffset(o => Math.max(0, o - VISIBLE_LINES));
+        if (key.pageDown)
+            setScrollOffset(o => Math.min(maxOffset, o + VISIBLE_LINES));
+    });
+    const endLine = Math.min(scrollOffset + VISIBLE_LINES, total);
+    const displayLines = diffLines.slice(scrollOffset, endLine);
+    const progress = request.totalCount && request.currentIndex
+        ? ` (${request.currentIndex}/${request.totalCount})`
+        : '';
+    const scrollIndicator = total > VISIBLE_LINES
+        ? ` [${scrollOffset + 1}–${endLine} of ${total} lines]`
+        : '';
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "yellow", children: [request.toolName, progress, ": ", request.filePath, scrollIndicator] }), _jsx(Box, { flexDirection: "column", marginY: 1, children: displayLines.map((line, i) => {
+                    let color;
+                    if (line.startsWith('+') && !line.startsWith('+++'))
+                        color = 'green';
+                    else if (line.startsWith('-') && !line.startsWith('---'))
+                        color = 'red';
+                    else if (line.startsWith('@@'))
+                        color = 'cyan';
+                    return (_jsx(Text, { color: color, dimColor: !color, children: line }, i));
+                }) }), _jsx(Text, { dimColor: true, children: "  [a] Apply   [r] Reject   [A] Apply all   [R] Reject all   [\u2191/\u2193] Scroll   [PgUp/PgDn] Page" })] }));
+}

package/dist/src/ui/Header.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { VERSION } from '../version';
+/** Map each mode to its display colour. */
+const MODE_COLORS = {
+    plan: 'blue',
+    build: 'yellow',
+    deploy: 'red',
+};
+/** Prominent mode labels for visual distinction (Gap 11). */
+const MODE_LABELS = {
+    plan: '[P] PLAN',
+    build: '[B] BUILD',
+    deploy: '[D] DEPLOY',
+};
+/**
+ * Truncate a session ID to a short prefix for display purposes.
+ */
+function shortId(id) {
+    return id.length > 8 ? id.slice(0, 8) : id;
+}
+/**
+ * Determine if an environment name is production-like.
+ */
+function isProdEnvironment(name) {
+    return /prod|production|live/i.test(name);
+}
+/**
+ * Header renders a single-line banner containing the CLI version, the model
+ * name, the abbreviated session ID, and a colour-coded mode badge.
+ */
+export function Header({ session }) {
+    const modeColor = MODE_COLORS[session.mode];
+    const modeLabel = MODE_LABELS[session.mode];
+    // Gap 11: deploy mode gets a red border on the entire header for visual urgency
+    const borderColor = session.mode === 'deploy' ? 'red' : 'cyan';
+    const tfColor = session.terraformWorkspace && isProdEnvironment(session.terraformWorkspace)
+        ? 'yellow'
+        : 'green';
+    const k8sColor = session.kubectlContext && isProdEnvironment(session.kubectlContext)
+        ? 'yellow'
+        : 'green';
+    const isProd = isProdEnvironment(session.terraformWorkspace ?? '') || isProdEnvironment(session.kubectlContext ?? '');
+    const showProdWarning = session.mode === 'deploy' && isProd;
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsxs(Box, { borderStyle: "round", borderColor: borderColor, paddingX: 1, justifyContent: "space-between", width: "100%", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "nimbus" }), _jsxs(Text, { dimColor: true, children: [" v", VERSION] }), _jsxs(Text, { dimColor: true, children: [" ", ' -- '] }), _jsx(Text, { children: session.model }), _jsxs(Text, { dimColor: true, children: [" ", ' -- '] }), _jsxs(Text, { dimColor: true, children: ["session: ", shortId(session.id)] })] }), _jsxs(Box, { children: [session.llmHealth === 'checking' && _jsx(Text, { color: "yellow", dimColor: true, children: " [~] " }), session.llmHealth === 'ok' && _jsx(Text, { color: "green", children: " [+] " }), session.llmHealth === 'error' && _jsx(Text, { color: "red", children: " [-] no LLM" }), session.terraformWorkspace && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: tfColor, bold: true, children: ["tf:", session.terraformWorkspace] }), isProdEnvironment(session.terraformWorkspace) && (_jsx(Text, { color: "red", bold: true, children: " [PROD]" }))] })), session.kubectlContext && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: k8sColor, bold: true, children: ["k8s:", session.kubectlContext] }), isProdEnvironment(session.kubectlContext) && (_jsx(Text, { color: "red", bold: true, children: " [PROD]" }))] })), (session.terraformWorkspace || session.kubectlContext) && (_jsx(Text, { dimColor: true, children: " [/k8s-ctx | /tf-ws to switch]" }))] }), _jsx(Box, { children: _jsxs(Text, { color: modeColor, bold: true, inverse: true, children: [' ', modeLabel, ' '] }) })] }), showProdWarning && (_jsx(Box, { paddingX: 2, children: _jsx(Text, { color: "red", bold: true, children: "!! DEPLOY MODE \u2014 targeting production environment !!" }) }))] }));
+}

package/dist/src/ui/HelpModal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+export function HelpModal({ onClose }) {
+    useInput((input, key) => {
+        if (key.escape || input === 'q' || input === '?')
+            onClose();
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", padding: 1, marginY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: " Nimbus DevOps Agent \u2014 Help " }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Slash Commands:" }), _jsx(Text, { children: "  /help           Show this help" }), _jsx(Text, { children: "  /mode plan      Switch to plan mode (read-only tools)" }), _jsx(Text, { children: "  /mode build     Switch to build mode (file + infra tools)" }), _jsx(Text, { children: "  /mode deploy    Switch to deploy mode (all tools + previews)" }), _jsx(Text, { children: "  /clear          Clear conversation history" }), _jsx(Text, { children: "  /compact        Compress context to free tokens" }), _jsx(Text, { children: "  /context        Show context window usage" }), _jsx(Text, { children: "  /cost           Show token usage and cost" }), _jsx(Text, { children: "  /diff           Show unstaged git diff" }), _jsx(Text, { children: "  /init           Regenerate NIMBUS.md project context" }), _jsx(Text, { children: "  /model [name]   Show or switch the active model" }), _jsx(Text, { children: "  /models         List all available provider models" }), _jsx(Text, { children: "  /undo           Undo last file change (snapshot)" }), _jsx(Text, { children: "  /redo           Redo last undone change" }), _jsx(Text, { children: "  /sessions       List active sessions" }), _jsx(Text, { children: "  /new [name]     Create a new session" }), _jsxs(Text, { children: ["  /switch ", '<id>', "   Switch to a different session"] }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "DevOps Tools Available:" }), _jsx(Text, { children: "  terraform, kubectl, helm, cloud_discover, cost_estimate," }), _jsx(Text, { children: "  drift_detect, deploy_preview, git, task (subagent)" }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Keyboard Shortcuts:" }), _jsx(Text, { children: "  ?               Open this help panel" }), _jsx(Text, { children: "  Tab             Cycle mode (plan \u2192 build \u2192 deploy)" }), _jsx(Text, { children: "  Ctrl+R          Search input history" }), _jsx(Text, { children: "  Ctrl+C          Interrupt or exit" }), _jsx(Text, { children: "  Esc / q / ?     Close this help" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Press Esc, q, or ? to close" })] }));
+}

package/dist/src/ui/InputBox.js

@@ -0,0 +1,408 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InputBox Component
+ *
+ * A text input area with a "> " prompt character. Uses ink-text-input for
+ * editing and submits on Enter. The parent component receives the submitted
+ * text via the `onSubmit` callback.
+ *
+ * Features:
+ *   - Input history (Up/Down arrows)
+ *   - Multi-line paste detection with line count indicator
+ *   - Slash command autocomplete (Tab to cycle)
+ *   - @file mention with Tab completion (type @ then Tab to cycle files)
+ *   - Reverse search (Ctrl+R) through history
+ */
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { spawnSync } from 'node:child_process';
+import { writeFileSync, readFileSync, unlinkSync, existsSync, mkdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { homedir } from 'node:os';
+/** Maximum number of history entries to keep. */
+const MAX_HISTORY = 100;
+/** Path to the persistent input history file. */
+const HISTORY_FILE = join(homedir(), '.nimbus', 'input-history.json');
+/** Load persisted input history from disk (returns [] on any error). */
+function loadHistory() {
+    try {
+        if (!existsSync(HISTORY_FILE))
+            return [];
+        const raw = readFileSync(HISTORY_FILE, 'utf-8');
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed))
+            return parsed.slice(-MAX_HISTORY);
+    }
+    catch { /* ignore */ }
+    return [];
+}
+/** Save input history to disk (fire-and-forget, ignores errors). */
+function saveHistory(entries) {
+    try {
+        const dir = join(homedir(), '.nimbus');
+        if (!existsSync(dir))
+            mkdirSync(dir, { recursive: true });
+        writeFileSync(HISTORY_FILE, JSON.stringify(entries.slice(-MAX_HISTORY)), 'utf-8');
+    }
+    catch { /* non-critical */ }
+}
+/** All recognized slash commands for autocomplete. */
+const SLASH_COMMANDS = [
+    '/alias',
+    '/apply',
+    '/branch',
+    '/auth-refresh',
+    '/clear',
+    '/compact',
+    '/context',
+    '/cost',
+    '/diff',
+    '/drift',
+    '/explain',
+    '/export',
+    '/help',
+    '/init',
+    '/k8s-ctx',
+    '/model',
+    '/models',
+    '/mode',
+    '/new',
+    '/plan',
+    '/profile',
+    '/redo',
+    '/rollback',
+    '/search',
+    '/sessions',
+    '/switch',
+    '/terminal',
+    '/tf-ws',
+    '/theme',
+    '/tools',
+    '/tree',
+    '/undo',
+    '/watch',
+    '/workspace',
+];
+/** L1: Known subagent names for @agent completions. */
+const AGENT_NAMES = ['explore', 'infra', 'security', 'cost', 'general'];
+/**
+ * InputBox renders a ">" prompt followed by an editable text field.
+ * Pressing Enter submits the value and clears the field. Pressing Escape
+ * fires the optional onAbort callback. Up/Down arrows navigate history.
+ * Tab autocompletes slash commands. Ctrl+R opens reverse search.
+ */
+export function InputBox({ onSubmit, onAbort, placeholder, disabled = false, mode = 'build', onLineCountChange, prefill, onFetchCompletions }) {
+    const [value, setValue] = useState(prefill ?? '');
+    // GAP-21: When prefill changes externally, update the input value
+    const prevPrefill = useRef(prefill);
+    if (prefill !== prevPrefill.current) {
+        prevPrefill.current = prefill;
+        if (prefill !== undefined) {
+            setValue(prefill);
+        }
+    }
+    // History: most recent entry is at the end (C1: loaded from disk)
+    const history = useRef(loadHistory());
+    // -1 means "not browsing history" (showing current draft)
+    const historyIndex = useRef(-1);
+    // Stores the in-progress text before the user started browsing history
+    const draft = useRef('');
+    // C1: Persist history to disk on unmount
+    useEffect(() => {
+        return () => {
+            saveHistory(history.current);
+        };
+    }, []);
+    // Slash command autocomplete state
+    const [slashHint, setSlashHint] = useState('');
+    const suggestionIndex = useRef(0);
+    const lastSuggestions = useRef([]);
+    // @file completion state
+    const [fileSuggestions, setFileSuggestions] = useState([]);
+    const [fileHint, setFileHint] = useState('');
+    const fileSuggestionIndex = useRef(0);
+    // H3: Dynamic completions for slash command arguments
+    const [dynamicSuggestions, setDynamicSuggestions] = useState([]);
+    const [dynamicHint, setDynamicHint] = useState('');
+    const dynamicSuggestionIndex = useRef(0);
+    // Cache: prefix → {items, ts}
+    const dynamicCache = useRef(new Map());
+    // Ctrl+R search mode
+    const [searchMode, setSearchMode] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const handleSubmit = useCallback((submitted) => {
+        const trimmed = submitted.trim();
+        if (trimmed.length === 0) {
+            return;
+        }
+        onSubmit(trimmed);
+        // Add to history (avoid consecutive duplicates)
+        const h = history.current;
+        if (h.length === 0 || h[h.length - 1] !== trimmed) {
+            h.push(trimmed);
+            if (h.length > MAX_HISTORY) {
+                h.shift();
+            }
+            // C1: Persist to disk on every new entry
+            saveHistory(h);
+        }
+        // Reset history navigation
+        historyIndex.current = -1;
+        draft.current = '';
+        setValue('');
+        setSlashHint('');
+    }, [onSubmit]);
+    // Handle Escape, Up/Down arrows, Tab autocomplete, Ctrl+R
+    useInput((input, key) => {
+        // --- Ctrl+E: open $EDITOR for multi-line input composition (Gap 3) ---
+        if (input === 'e' && key.ctrl) {
+            const editor = process.env.EDITOR ?? process.env.VISUAL ?? 'nano';
+            const tmpFile = `/tmp/nimbus-input-${Date.now()}.md`;
+            try {
+                writeFileSync(tmpFile, value, 'utf-8');
+                spawnSync(editor, [tmpFile], { stdio: 'inherit' });
+                const edited = readFileSync(tmpFile, 'utf-8');
+                try {
+                    unlinkSync(tmpFile);
+                }
+                catch { /* ignore */ }
+                setValue(edited);
+            }
+            catch {
+                /* editor not available — ignore */
+            }
+            return;
+        }
+        // --- Ctrl+R: toggle search mode ---
+        if (input === 'r' && key.ctrl) {
+            if (!searchMode) {
+                setSearchMode(true);
+                setSearchQuery('');
+                setSearchResults([]);
+            }
+            else {
+                setSearchMode(false);
+            }
+            return;
+        }
+        // --- Search mode key handling ---
+        if (searchMode) {
+            if (key.escape) {
+                setSearchMode(false);
+                return;
+            }
+            if (key.return) {
+                // Select top result
+                if (searchResults.length > 0) {
+                    setValue(searchResults[0]);
+                }
+                setSearchMode(false);
+                return;
+            }
+            // Let the search TextInput handle other keys
+            return;
+        }
+        if (key.escape && onAbort) {
+            onAbort();
+            return;
+        }
+        // --- Tab: autocomplete ---
+        if (key.tab) {
+            // @file completion
+            const atMatch = value.match(/@(\S*)$/);
+            if (atMatch && fileSuggestions.length > 0) {
+                const idx = fileSuggestionIndex.current % fileSuggestions.length;
+                const replacement = `${value.slice(0, value.length - atMatch[0].length)}@${fileSuggestions[idx]}`;
+                setValue(replacement);
+                fileSuggestionIndex.current = idx + 1;
+                setFileHint(`[${fileSuggestions.length} files, Tab to cycle]`);
+                return;
+            }
+            // Slash command completion
+            if (value.startsWith('/')) {
+                // H3: Dynamic argument completions for /k8s-ctx, /tf-ws, /model, /profile
+                const dynamicPrefixes = ['/k8s-ctx ', '/tf-ws ', '/model ', '/profile '];
+                const dynMatch = dynamicPrefixes.find(p => value.startsWith(p));
+                if (dynMatch && onFetchCompletions) {
+                    const partial = value.slice(dynMatch.length);
+                    // Cycle through already-fetched suggestions
+                    if (dynamicSuggestions.length > 0) {
+                        const filtered = partial ? dynamicSuggestions.filter(s => s.startsWith(partial)) : dynamicSuggestions;
+                        if (filtered.length > 0) {
+                            const idx = dynamicSuggestionIndex.current % filtered.length;
+                            setValue(`${dynMatch}${filtered[idx]}`);
+                            dynamicSuggestionIndex.current = idx + 1;
+                            setDynamicHint(`[${filtered.length} options, Tab to cycle]`);
+                            return;
+                        }
+                    }
+                    // Fetch completions (non-blocking, cache 30s)
+                    const cacheKey = dynMatch;
+                    const cached = dynamicCache.current.get(cacheKey);
+                    const CACHE_TTL = 30_000;
+                    if (!cached || Date.now() - cached.ts > CACHE_TTL) {
+                        onFetchCompletions(value).then(items => {
+                            dynamicCache.current.set(cacheKey, { items, ts: Date.now() });
+                            setDynamicSuggestions(items);
+                            dynamicSuggestionIndex.current = 0;
+                            if (items.length > 0) {
+                                setValue(`${dynMatch}${items[0]}`);
+                                setDynamicHint(`[${items.length} options, Tab to cycle]`);
+                            }
+                        }).catch(() => { });
+                    }
+                    else {
+                        setDynamicSuggestions(cached.items);
+                        dynamicSuggestionIndex.current = 0;
+                    }
+                    return;
+                }
+                const prefix = value.toLowerCase();
+                const matches = SLASH_COMMANDS.filter(cmd => cmd.startsWith(prefix));
+                if (matches.length === 0) {
+                    setSlashHint('');
+                    return;
+                }
+                if (matches.length === 1) {
+                    setValue(`${matches[0]} `);
+                    setSlashHint('');
+                    lastSuggestions.current = [];
+                    return;
+                }
+                // Multiple matches: cycle through them
+                if (lastSuggestions.current.length === matches.length &&
+                    lastSuggestions.current.every((s, i) => s === matches[i])) {
+                    suggestionIndex.current = (suggestionIndex.current + 1) % matches.length;
+                }
+                else {
+                    lastSuggestions.current = matches;
+                    suggestionIndex.current = 0;
+                }
+                setValue(matches[suggestionIndex.current]);
+                setSlashHint(`[${matches.length} matches, Tab to cycle]`);
+            }
+            return;
+        }
+        const h = history.current;
+        if (h.length === 0) {
+            return;
+        }
+        if (key.upArrow) {
+            if (historyIndex.current === -1) {
+                // Starting to browse: save current draft
+                draft.current = value;
+                historyIndex.current = h.length - 1;
+            }
+            else if (historyIndex.current > 0) {
+                historyIndex.current--;
+            }
+            setValue(h[historyIndex.current]);
+            return;
+        }
+        if (key.downArrow) {
+            if (historyIndex.current === -1) {
+                return;
+            } // not browsing
+            if (historyIndex.current < h.length - 1) {
+                historyIndex.current++;
+                setValue(h[historyIndex.current]);
+            }
+            else {
+                // Past the end of history: restore draft
+                historyIndex.current = -1;
+                setValue(draft.current);
+            }
+            return;
+        }
+    }, { isActive: !disabled });
+    // Count lines for multi-line paste indicator
+    const lineCount = value.split('\n').length;
+    const isMultiLine = lineCount > 1;
+    if (disabled) {
+        return (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { dimColor: true, children: '> ' }), _jsx(Text, { dimColor: true, italic: true, children: placeholder ?? 'waiting...' })] }));
+    }
+    // --- Search mode UI ---
+    if (searchMode) {
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: '(reverse-search): ' }), _jsx(TextInput, { value: searchQuery, onChange: q => {
+                                setSearchQuery(q);
+                                if (q.length > 0) {
+                                    const results = history.current
+                                        .filter(entry => entry.toLowerCase().includes(q.toLowerCase()))
+                                        .reverse()
+                                        .slice(0, 10);
+                                    setSearchResults(results);
+                                }
+                                else {
+                                    setSearchResults([]);
+                                }
+                            }, onSubmit: () => {
+                                if (searchResults.length > 0) {
+                                    setValue(searchResults[0]);
+                                }
+                                setSearchMode(false);
+                            }, placeholder: "type to search history..." })] }), searchResults.length > 0 && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [searchResults.slice(0, 5).map((result, i) => (_jsxs(Text, { dimColor: i > 0, children: [i === 0 ? '> ' : '  ', result.length > 80 ? `${result.slice(0, 77)}...` : result] }, i))), searchResults.length > 5 && (_jsxs(Text, { dimColor: true, italic: true, children: [' ', "... ", searchResults.length - 5, " more"] }))] }))] }));
+    }
+    // Gap 11: mode-specific prompt character and color
+    const promptLabel = mode === 'plan' ? '[plan]> ' : mode === 'deploy' ? '[DEPLOY]> ' : '[build]> ';
+    const promptColor = mode === 'plan' ? 'blue' : mode === 'deploy' ? 'red' : 'green';
+    // --- Normal input UI ---
+    return (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: promptColor, children: promptLabel }), _jsx(TextInput, { value: value, onChange: v => {
+                    // L2: Guard against large paste (>10KB) which would freeze the Ink UI
+                    const safeV = v.length > 10_000 ? v.slice(0, 10_000) : v;
+                    setValue(safeV);
+                    onLineCountChange?.(safeV.split('\n').length);
+                    // If user types while browsing history, exit history mode
+                    if (historyIndex.current !== -1) {
+                        historyIndex.current = -1;
+                    }
+                    // Reset slash autocomplete on any change
+                    if (!v.startsWith('/')) {
+                        setSlashHint('');
+                        lastSuggestions.current = [];
+                    }
+                    // @file / @agent mention detection
+                    const atMatch = v.match(/@(\S*)$/);
+                    if (atMatch) {
+                        const partial = atMatch[1];
+                        // L1: Try agent names first
+                        const agentMatches = AGENT_NAMES.filter(a => a.startsWith(partial.toLowerCase()));
+                        if (agentMatches.length > 0 && partial.length > 0) {
+                            setFileSuggestions(agentMatches.map(a => `@${a} `));
+                            fileSuggestionIndex.current = 0;
+                            setFileHint(`[${agentMatches.length} agent${agentMatches.length > 1 ? 's' : ''}, Tab to complete]`);
+                        }
+                        else {
+                            try {
+                                // eslint-disable-next-line @typescript-eslint/no-var-requires
+                                const fs = require('node:fs');
+                                const cwd = process.cwd();
+                                const entries = fs.readdirSync(cwd, { withFileTypes: true });
+                                const matches = entries
+                                    .filter(e => !e.name.startsWith('.') && e.name.toLowerCase().includes(partial.toLowerCase()))
+                                    .map(e => (e.isDirectory() ? `${e.name}/` : e.name))
+                                    .slice(0, 10);
+                                setFileSuggestions(matches);
+                                fileSuggestionIndex.current = 0;
+                                if (matches.length > 0) {
+                                    setFileHint(`[${matches.length} files, Tab to complete]`);
+                                }
+                                else {
+                                    setFileHint('');
+                                }
+                            }
+                            catch {
+                                setFileSuggestions([]);
+                                setFileHint('');
+                            }
+                        }
+                    }
+                    else {
+                        if (fileSuggestions.length > 0) {
+                            setFileSuggestions([]);
+                            setFileHint('');
+                        }
+                    }
+                }, onSubmit: handleSubmit, placeholder: placeholder ?? 'Type a DevOps command... (e.g. "terraform plan", "check pods", "list releases")' }), isMultiLine && _jsx(Text, { color: "cyan", children: ` [${lineCount} lines]` }), slashHint && _jsx(Text, { dimColor: true, children: ` ${slashHint}` }), fileHint && _jsx(Text, { dimColor: true, children: ` ${fileHint}` }), dynamicHint && _jsx(Text, { dimColor: true, children: ` ${dynamicHint}` })] }));
+}