whale-code 6.4.0 → 6.5.0

package/dist/cli/chat/ChatInput.js

@@ -16,35 +16,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Multi-line input with ⎸ continuation markers
  */
 import { useState, useEffect, useRef } from "react";
-import { Box, Text, useInput, useStdin } from "ink";
-import SelectInput from "ink-select-input";
+import { Box, Text, useStdin } from "ink";
 import { readFileSync, existsSync, statSync } from "fs";
 import { basename, extname } from "path";
 import { colors } from "../shared/Theme.js";
 import { loadKeybindings, bindingToControlChar } from "../services/keybinding-manager.js";
-export const SLASH_COMMANDS = [
-    { name: "/help", description: "Show available commands" },
-    { name: "/tools", description: "List all tools" },
-    { name: "/model", description: "Switch model (Anthropic/Bedrock/Gemini)" },
-    { name: "/compact", description: "Compress conversation context" },
-    { name: "/save", description: "Save session to disk" },
-    { name: "/sessions", description: "List saved sessions" },
-    { name: "/resume", description: "Resume a saved session" },
-    { name: "/mcp", description: "Server connection status" },
-    { name: "/store", description: "Switch active store" },
-    { name: "/status", description: "Show session info" },
-    { name: "/agents", description: "List available agent types" },
-    { name: "/remember", description: "Remember a fact across sessions" },
-    { name: "/forget", description: "Forget a remembered fact" },
-    { name: "/memory", description: "List all remembered facts" },
-    { name: "/mode", description: "Permission mode (default/plan/yolo)" },
-    { name: "/thinking", description: "Toggle extended thinking" },
-    { name: "/rewind", description: "Rewind conversation to earlier point" },
-    { name: "/init", description: "Generate project config (.whale/CLAUDE.md)" },
-    { name: "/update", description: "Check for updates & install" },
-    { name: "/clear", description: "Clear conversation" },
-    { name: "/exit", description: "Exit" },
-];
+import { SlashMenu, SLASH_COMMANDS as _SLASH_COMMANDS, getFilteredSelectableCount, getCommandAtIndex, getCategoryCount, getCategoryCommandCount, getCategoryCommand, getCategoryLabel, getCategoryColor } from "./SlashMenu.js";
+export const SLASH_COMMANDS = _SLASH_COMMANDS;
 // ── Constants ──
 const IMAGE_EXTENSIONS = {
     ".png": "image/png",
@@ -56,9 +34,41 @@ const IMAGE_EXTENSIONS = {
 const MAX_IMAGE_SIZE = 20 * 1024 * 1024; // 20MB
 const MAX_DISPLAY_LINES = 8;
 // ── Helpers ──
-function dividerLine() {
-    const w = (process.stdout.columns || 80) - 2;
-    return "─".repeat(Math.max(20, w));
+const CONTEXT_TYPES = ["product", "customer", "order", "inventory", "media", "document", "location"];
+const CONTEXT_COLORS = {
+    product: "blue", customer: "#a855f7", order: "green",
+    inventory: "#f97316", media: "#ec4899", document: "cyan", location: "yellow",
+};
+/** Detect if pasted text is a valid WhaleContextItem JSON object */
+function parseWhaleContext(text) {
+    const trimmed = text.trim();
+    if (!trimmed.startsWith("{") || !trimmed.endsWith("}"))
+        return null;
+    try {
+        const obj = JSON.parse(trimmed);
+        if (obj && typeof obj.id === "string" && typeof obj.type === "string" &&
+            CONTEXT_TYPES.includes(obj.type) && typeof obj.title === "string" &&
+            typeof obj.sourceApp === "string") {
+            return obj;
+        }
+    }
+    catch { /* not JSON */ }
+    return null;
+}
+/** Format a context attachment into an XML context block for AI prompt */
+function contextToBlock(ctx) {
+    const lines = [];
+    lines.push(`<context type="${ctx.type}" source="${ctx.sourceApp}">`);
+    lines.push(`  ${ctx.title}`);
+    if (ctx.subtitle)
+        lines.push(`  ${ctx.subtitle}`);
+    if (ctx.data) {
+        for (const [key, value] of Object.entries(ctx.data).sort(([a], [b]) => a.localeCompare(b))) {
+            lines.push(`  ${key}: ${value}`);
+        }
+    }
+    lines.push("</context>");
+    return lines.join("\n");
 }
 function isImagePath(text) {
     const p = normalizePath(text);
@@ -124,19 +134,55 @@ function getCursorLineCol(text, cursor) {
     return { line: lines.length - 1, col: lines[lines.length - 1].length };
 }
 // ── Component ──
-export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
+export function ChatInput({ onSubmit, onCommand, disabled, agentName, onInterrupt }) {
     const { stdin } = useStdin();
     // Input state — ref for synchronous handler access, state for render
     const inputRef = useRef({ value: "", cursor: 0 });
     const [displayValue, setDisplayValue] = useState("");
     const [displayCursor, setDisplayCursor] = useState(0);
+    // Stable refs for callbacks — prevents stale closures in stdin handler
+    const onSubmitRef = useRef(onSubmit);
+    const onCommandRef = useRef(onCommand);
+    const onInterruptRef = useRef(onInterrupt);
+    const disabledRef = useRef(disabled);
+    useEffect(() => { onSubmitRef.current = onSubmit; }, [onSubmit]);
+    useEffect(() => { onCommandRef.current = onCommand; }, [onCommand]);
+    useEffect(() => { onInterruptRef.current = onInterrupt; }, [onInterrupt]);
+    useEffect(() => { disabledRef.current = disabled; }, [disabled]);
+    // Queued message — typed during streaming, auto-submitted when streaming ends
+    const [queued, setQueued] = useState(false);
+    const queuedRef = useRef(false);
+    // Auto-submit queued input when streaming ends (disabled goes from true → false)
+    const prevDisabledRef = useRef(disabled);
+    useEffect(() => {
+        if (prevDisabledRef.current && !disabled && queuedRef.current) {
+            // Streaming just ended and we have queued input — submit it
+            queuedRef.current = false;
+            setQueued(false);
+            handleSubmit();
+        }
+        prevDisabledRef.current = disabled;
+    }, [disabled]);
     // Mode & attachments
     const [menuMode, setMenuMode] = useState(false);
+    const menuModeRef = useRef(false);
     const [menuFilter, setMenuFilter] = useState("");
+    const menuFilterRef = useRef("");
+    const [menuIndex, setMenuIndex] = useState(0);
+    const menuIndexRef = useRef(0);
     const [images, setImages] = useState([]);
     const imagesRef = useRef([]);
     const [files, setFiles] = useState([]);
     const filesRef = useRef([]);
+    const [contextItems, setContextItems] = useState([]);
+    const contextItemsRef = useRef([]);
+    // Two-level menu: null = Level 1 (categories), number = Level 2 (drilled into that category)
+    const [selectedCategory, setSelectedCategory] = useState(null);
+    const selectedCategoryRef = useRef(null);
+    function setSelectedCategorySync(val) {
+        selectedCategoryRef.current = val;
+        setSelectedCategory(val);
+    }
     // Input history (up/down arrow recall)
     const historyRef = useRef([]);
     const historyIndexRef = useRef(-1);
@@ -151,7 +197,21 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
     // Sync refs
     useEffect(() => { imagesRef.current = images; }, [images]);
     useEffect(() => { filesRef.current = files; }, [files]);
+    useEffect(() => { contextItemsRef.current = contextItems; }, [contextItems]);
     useEffect(() => { pastedTextRef.current = pastedText; }, [pastedText]);
+    // ── Sync helpers: update ref THEN state (fixes race conditions) ──
+    function setMenuModeSync(val) {
+        menuModeRef.current = val;
+        setMenuMode(val);
+    }
+    function setMenuFilterSync(val) {
+        menuFilterRef.current = val;
+        setMenuFilter(val);
+    }
+    function setMenuIndexSync(val) {
+        menuIndexRef.current = val;
+        setMenuIndex(val);
+    }
     // ── Enable bracketed paste mode ──
     useEffect(() => {
         process.stdout.write("\x1b[?2004h");
@@ -166,6 +226,15 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
     // ── Process paste content ──
     function processPaste(text) {
         const clean = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+        // Check for WhaleContext JSON → attach as context chip
+        const ctx = parseWhaleContext(clean);
+        if (ctx) {
+            // Avoid duplicates
+            if (!contextItemsRef.current.some(c => c.id === ctx.id)) {
+                setContextItems(prev => [...prev, ctx]);
+            }
+            return;
+        }
         // Check if ALL non-empty lines are image paths → attach them
         const lines = clean.split("\n").map(l => l.trim()).filter(Boolean);
         if (lines.length > 0 && lines.every(l => isImagePath(l))) {
@@ -191,7 +260,7 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
         }
         // Slash command pasted directly (must look like /word, not an absolute path)
         if (clean.startsWith("/") && !clean.includes("\n") && !clean.includes("/", 1) && inputRef.current.value === "") {
-            onCommand(clean.trim());
+            onCommandRef.current(clean.trim());
             update("", 0);
             return;
         }
@@ -212,22 +281,29 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
         const paste = pastedTextRef.current;
         const imgs = imagesRef.current;
         const fls = filesRef.current;
-        if (!typed && !paste && imgs.length === 0 && fls.length === 0)
+        const ctxs = contextItemsRef.current;
+        if (!typed && !paste && imgs.length === 0 && fls.length === 0 && ctxs.length === 0)
             return;
-        if (typed.startsWith("/") && !paste && imgs.length === 0 && fls.length === 0) {
+        // Slash command — must start with / and NOT contain a second /
+        // (prevents file paths like /Users/whale/file.txt from being misidentified)
+        if (typed.startsWith("/") && !typed.includes("/", 1) && !paste && imgs.length === 0 && fls.length === 0 && ctxs.length === 0) {
             update("", 0);
-            onCommand(typed);
+            onCommandRef.current(typed);
             return;
         }
+        // Build context blocks prefix
+        const contextPrefix = ctxs.length > 0
+            ? ctxs.map(c => contextToBlock(c)).join("\n\n") + "\n\n"
+            : "";
         // Build file context prefix
         const filePrefix = fls.length > 0
             ? fls.map(f => f.path).join("\n") + "\n\n"
             : "";
-        // Combine file prefix + typed text + pasted content
+        // Combine context + file prefix + typed text + pasted content
         const body = paste
             ? (typed ? `${typed}\n\n${paste}` : paste)
-            : typed;
-        const fullText = filePrefix + body;
+            : (typed || (ctxs.length > 0 ? "Tell me about this" : ""));
+        const fullText = contextPrefix + filePrefix + body;
         // Record in history
         if (fullText.trim()) {
             historyRef.current.push(fullText.trim());
@@ -235,18 +311,294 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
                 historyRef.current.shift();
         }
         historyIndexRef.current = -1;
-        onSubmit(fullText, imgs.length > 0 ? imgs : undefined);
+        onSubmitRef.current(fullText, imgs.length > 0 ? imgs : undefined);
         update("", 0);
         setImages([]);
         setFiles([]);
+        setContextItems([]);
         setPastedText(null);
     }
-    // ── Raw stdin handler ──
+    // ── Raw stdin handler (handles both normal input and menu mode) ──
     useEffect(() => {
-        if (!stdin || disabled || menuMode)
+        if (!stdin)
             return;
         const onData = (data) => {
             const str = data.toString("utf-8");
+            // ══════════════════════════════════════════════
+            // DISABLED MODE — accept typing, block commands, handle Esc
+            // ══════════════════════════════════════════════
+            if (disabledRef.current) {
+                // Escape → interrupt streaming
+                if (str === "\x1b") {
+                    onInterruptRef.current?.();
+                    return;
+                }
+                // Control chars handled by ChatApp (exit, expand, thinking toggle)
+                const _kb = loadKeybindings();
+                const exitChar = bindingToControlChar(_kb.exit);
+                const expandChar = bindingToControlChar(_kb.toggle_expand);
+                const thinkingChar = bindingToControlChar(_kb.toggle_thinking);
+                if (str === exitChar || str === expandChar || str === thinkingChar)
+                    return;
+                // Arrow keys — cursor movement within buffer while disabled
+                if (str.startsWith("\x1b[")) {
+                    const { value: val, cursor: cur } = inputRef.current;
+                    if (str === "\x1b[C") { // Right
+                        update(val, Math.min(cur + 1, val.length));
+                    }
+                    else if (str === "\x1b[D") { // Left
+                        update(val, Math.max(cur - 1, 0));
+                    }
+                    else if (str === "\x1b[A" || str === "\x1b[B") { // Up/Down
+                        const lines = val.split("\n");
+                        if (lines.length > 1) {
+                            const { line: curLine, col: curCol } = getCursorLineCol(val, cur);
+                            const targetLine = str === "\x1b[A"
+                                ? Math.max(0, curLine - 1)
+                                : Math.min(lines.length - 1, curLine + 1);
+                            if (targetLine !== curLine) {
+                                const targetCol = Math.min(curCol, lines[targetLine].length);
+                                let newCursor = 0;
+                                for (let i = 0; i < targetLine; i++)
+                                    newCursor += lines[i].length + 1;
+                                newCursor += targetCol;
+                                update(val, newCursor);
+                            }
+                        }
+                    }
+                    else if (str === "\x1b[H" || str === "\x1b[1~") { // Home
+                        update(val, 0);
+                    }
+                    else if (str === "\x1b[F" || str === "\x1b[4~") { // End
+                        update(val, val.length);
+                    }
+                    return;
+                }
+                // Bracketed paste while disabled — accept into buffer
+                if (str.includes("\x1b[200~")) {
+                    isPasting.current = true;
+                    let text = str.replace(/\x1b\[200~/g, "").replace(/\x1b\[201~/g, "");
+                    pasteBuffer.current += text;
+                    if (str.includes("\x1b[201~")) {
+                        isPasting.current = false;
+                        const paste = pasteBuffer.current;
+                        pasteBuffer.current = "";
+                        processPaste(paste);
+                    }
+                    return;
+                }
+                if (isPasting.current) {
+                    if (str.includes("\x1b[201~")) {
+                        isPasting.current = false;
+                        pasteBuffer.current += str.replace(/\x1b\[201~/g, "");
+                        const paste = pasteBuffer.current;
+                        pasteBuffer.current = "";
+                        processPaste(paste);
+                    }
+                    else {
+                        pasteBuffer.current += str;
+                    }
+                    return;
+                }
+                // Enter → queue the current input for auto-submit
+                if (str === "\r" || str === "\n") {
+                    const typed = inputRef.current.value.trim();
+                    if (typed) {
+                        queuedRef.current = true;
+                        setQueued(true);
+                    }
+                    return;
+                }
+                // Backspace
+                if (str === "\x7f" || str === "\b") {
+                    const { value: val, cursor: cur } = inputRef.current;
+                    if (cur > 0) {
+                        update(val.slice(0, cur - 1) + val.slice(cur), cur - 1);
+                        // Un-queue if editing
+                        if (queuedRef.current) {
+                            queuedRef.current = false;
+                            setQueued(false);
+                        }
+                    }
+                    return;
+                }
+                // Slash — block menu mode while streaming
+                if (str === "/" && inputRef.current.value === "")
+                    return;
+                // Printable char — type into buffer
+                if (str.length === 1 && str.charCodeAt(0) >= 0x20) {
+                    const { value: val, cursor: cur } = inputRef.current;
+                    update(val.slice(0, cur) + str + val.slice(cur), cur + 1);
+                    // Un-queue if editing after queuing
+                    if (queuedRef.current) {
+                        queuedRef.current = false;
+                        setQueued(false);
+                    }
+                    return;
+                }
+                // Multi-character non-escape (unbracketted paste)
+                if (str.length > 1 && !str.startsWith("\x1b")) {
+                    const codePoints = [...str];
+                    if (codePoints.length === 1) {
+                        const { value: val, cursor: cur } = inputRef.current;
+                        update(val.slice(0, cur) + str + val.slice(cur), cur + str.length);
+                    }
+                    else {
+                        processPaste(str);
+                    }
+                    if (queuedRef.current) {
+                        queuedRef.current = false;
+                        setQueued(false);
+                    }
+                    return;
+                }
+                return;
+            }
+            // ══════════════════════════════════════════════
+            // MENU MODE — two-level navigation
+            // ══════════════════════════════════════════════
+            if (menuModeRef.current) {
+                const hasFilter = menuFilterRef.current.length > 0;
+                const inCategory = selectedCategoryRef.current !== null;
+                // Escape or Ctrl+C → dismiss menu entirely
+                if (str === "\x1b" || str === "\x03") {
+                    setMenuModeSync(false);
+                    setMenuFilterSync("");
+                    setMenuIndexSync(0);
+                    setSelectedCategorySync(null);
+                    update("", 0);
+                    return;
+                }
+                // Tab → no-op
+                if (str === "\t")
+                    return;
+                // ── Filter mode (has filter text) ──
+                if (hasFilter) {
+                    if (str === "\r" || str === "\n") {
+                        const cmd = getCommandAtIndex(menuFilterRef.current, menuIndexRef.current);
+                        if (cmd) {
+                            setMenuModeSync(false);
+                            setMenuFilterSync("");
+                            setMenuIndexSync(0);
+                            setSelectedCategorySync(null);
+                            update("", 0);
+                            onCommandRef.current(cmd.name);
+                        }
+                        return;
+                    }
+                    if (str === "\x1b[A") {
+                        setMenuIndexSync(Math.max(0, menuIndexRef.current - 1));
+                        return;
+                    }
+                    if (str === "\x1b[B") {
+                        const count = getFilteredSelectableCount(menuFilterRef.current);
+                        setMenuIndexSync(Math.min(count - 1, menuIndexRef.current + 1));
+                        return;
+                    }
+                    if (str === "\x7f" || str === "\b") {
+                        const f = menuFilterRef.current;
+                        if (f.length > 1) {
+                            setMenuFilterSync(f.slice(0, -1));
+                            setMenuIndexSync(0);
+                        }
+                        else {
+                            // Clearing filter → back to Level 1
+                            setMenuFilterSync("");
+                            setMenuIndexSync(0);
+                            setSelectedCategorySync(null);
+                        }
+                        return;
+                    }
+                    if (str.startsWith("\x1b"))
+                        return;
+                    if (str.length === 1 && str.charCodeAt(0) >= 0x20) {
+                        setMenuFilterSync(menuFilterRef.current + str);
+                        setMenuIndexSync(0);
+                        return;
+                    }
+                    return;
+                }
+                // ── Level 2: inside a category ──
+                if (inCategory) {
+                    const catIdx = selectedCategoryRef.current;
+                    if (str === "\r" || str === "\n") {
+                        const cmd = getCategoryCommand(catIdx, menuIndexRef.current);
+                        if (cmd) {
+                            setMenuModeSync(false);
+                            setMenuFilterSync("");
+                            setMenuIndexSync(0);
+                            setSelectedCategorySync(null);
+                            update("", 0);
+                            onCommandRef.current(cmd.name);
+                        }
+                        return;
+                    }
+                    if (str === "\x1b[A") {
+                        setMenuIndexSync(Math.max(0, menuIndexRef.current - 1));
+                        return;
+                    }
+                    if (str === "\x1b[B") {
+                        const count = getCategoryCommandCount(catIdx);
+                        setMenuIndexSync(Math.min(count - 1, menuIndexRef.current + 1));
+                        return;
+                    }
+                    // Left arrow or Backspace → back to Level 1
+                    if (str === "\x1b[D" || str === "\x7f" || str === "\b") {
+                        setMenuIndexSync(catIdx); // restore highlight to the category we were in
+                        setSelectedCategorySync(null);
+                        return;
+                    }
+                    if (str.startsWith("\x1b"))
+                        return;
+                    // Printable → switch to filter mode
+                    if (str.length === 1 && str.charCodeAt(0) >= 0x20) {
+                        setSelectedCategorySync(null);
+                        setMenuFilterSync(str);
+                        setMenuIndexSync(0);
+                        return;
+                    }
+                    return;
+                }
+                // ── Level 1: category list ──
+                if (str === "\r" || str === "\n" || str === "\x1b[C") {
+                    // Enter or Right → drill into selected category
+                    const catIdx = menuIndexRef.current;
+                    if (catIdx >= 0 && catIdx < getCategoryCount()) {
+                        setSelectedCategorySync(catIdx);
+                        setMenuIndexSync(0);
+                    }
+                    return;
+                }
+                if (str === "\x1b[A") {
+                    setMenuIndexSync(Math.max(0, menuIndexRef.current - 1));
+                    return;
+                }
+                if (str === "\x1b[B") {
+                    setMenuIndexSync(Math.min(getCategoryCount() - 1, menuIndexRef.current + 1));
+                    return;
+                }
+                if (str === "\x7f" || str === "\b") {
+                    // Backspace on Level 1 → dismiss menu
+                    setMenuModeSync(false);
+                    setMenuFilterSync("");
+                    setMenuIndexSync(0);
+                    setSelectedCategorySync(null);
+                    update("", 0);
+                    return;
+                }
+                if (str.startsWith("\x1b"))
+                    return;
+                // Printable → switch to filter mode
+                if (str.length === 1 && str.charCodeAt(0) >= 0x20) {
+                    setMenuFilterSync(str);
+                    setMenuIndexSync(0);
+                    return;
+                }
+                return;
+            }
+            // ══════════════════════════════════════════════
+            // NORMAL INPUT MODE
+            // ══════════════════════════════════════════════
             // ── Bracketed paste detection ──
             if (str.includes("\x1b[200~")) {
                 isPasting.current = true;
@@ -295,10 +647,13 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
                     update(val.slice(0, cur - 1) + val.slice(cur), cur - 1);
                 }
                 else if (val === "") {
-                    // Empty input + backspace → remove paste chip, then files, then images
+                    // Empty input + backspace → remove paste chip, then context, then files, then images
                     if (pastedTextRef.current) {
                         setPastedText(null);
                     }
+                    else if (contextItemsRef.current.length > 0) {
+                        setContextItems(prev => prev.slice(0, -1));
+                    }
                     else if (filesRef.current.length > 0) {
                         setFiles(prev => prev.slice(0, -1));
                     }
@@ -429,8 +784,9 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
                 const { value: val, cursor: cur } = inputRef.current;
                 // Slash menu trigger
                 if (str === "/" && val === "") {
-                    setMenuMode(true);
-                    setMenuFilter("");
+                    setMenuModeSync(true);
+                    setMenuFilterSync("");
+                    setMenuIndexSync(0);
                     return;
                 }
                 update(val.slice(0, cur) + str + val.slice(cur), cur + 1);
@@ -438,56 +794,44 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
         };
         stdin.on("data", onData);
         return () => { stdin.off("data", onData); };
-    }, [stdin, disabled, menuMode]); // eslint-disable-line react-hooks/exhaustive-deps
-    // ── Menu input — filter + dismiss (uses Ink's useInput for SelectInput compatibility) ──
-    useInput((input, key) => {
-        if (!menuMode || disabled)
-            return;
-        if (key.escape) {
-            setMenuMode(false);
-            setMenuFilter("");
-            return;
-        }
-        if (key.backspace || key.delete) {
-            setMenuFilter(prev => {
-                if (prev.length > 0)
-                    return prev.slice(0, -1);
-                setMenuMode(false);
-                return "";
-            });
-            return;
-        }
-        // Printable character → append to filter
-        if (input && !key.ctrl && !key.meta && !key.return && !key.tab) {
-            setMenuFilter(prev => prev + input);
-        }
-    }, { isActive: menuMode });
-    const handleMenuSelect = (item) => {
-        setMenuMode(false);
-        setMenuFilter("");
-        update("", 0);
-        onCommand(item.value);
-    };
+    }, [stdin]); // eslint-disable-line react-hooks/exhaustive-deps
     // ── Render ──
-    const divider = dividerLine();
-    // Disabled — minimal divider
+    // Disabled — dimmed but visible input (accept typing to queue)
     if (disabled) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: " " }), _jsx(Text, { color: colors.separator, children: divider })] }));
+        const disabledLines = displayValue.split("\n");
+        const { line: dCursorLine, col: dCursorCol } = displayValue
+            ? getCursorLineCol(displayValue, displayCursor)
+            : { line: 0, col: 0 };
+        return (_jsx(Box, { flexDirection: "column", children: disabledLines.length <= 1 ? (_jsxs(Box, { children: [_jsx(Text, { color: colors.quaternary, bold: true, children: "❯ " }), !displayValue ? (_jsx(Text, { color: colors.quaternary, wrap: "truncate", children: queued ? "queued — will send when done" : "type to queue a message..." })) : (_jsxs(Box, { children: [_jsxs(Text, { color: colors.dim, children: [displayValue.slice(0, displayCursor), _jsx(Text, { inverse: true, children: displayCursor < displayValue.length ? displayValue[displayCursor] : " " }), displayCursor < displayValue.length ? displayValue.slice(displayCursor + 1) : ""] }), queued && _jsx(Text, { color: colors.warning, children: " [queued]" })] }))] })) : (
+            /* Multi-line disabled */
+            _jsxs(Box, { flexDirection: "column", children: [disabledLines.map((line, i) => {
+                        const isCursorOnLine = i === dCursorLine;
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: colors.quaternary, bold: true, children: i === 0 ? "❯ " : "⎸ " }), isCursorOnLine ? (_jsxs(Text, { color: colors.dim, children: [line.slice(0, dCursorCol), _jsx(Text, { inverse: true, children: dCursorCol < line.length ? line[dCursorCol] : " " }), dCursorCol < line.length ? line.slice(dCursorCol + 1) : ""] })) : (_jsx(Text, { color: colors.dim, children: line }))] }, i));
+                    }), queued && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: colors.warning, children: "[queued]" }) }))] })) }));
     }
-    // Slash command menu
+    // Slash command menu — two-level categorized via SlashMenu component
     if (menuMode) {
-        const q = menuFilter.toLowerCase();
-        const filtered = q
-            ? SLASH_COMMANDS.filter(c => c.name.includes(q) || c.description.toLowerCase().includes(q))
-            : SLASH_COMMANDS;
-        const items = filtered.map((c) => ({
-            label: c.name,
-            value: c.name,
-        }));
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: " " }), _jsx(Text, { color: colors.separator, children: divider }), _jsxs(Box, { children: [_jsx(Text, { color: colors.brand, bold: true, children: "/ " }), menuFilter ? (_jsxs(Text, { children: [menuFilter, _jsx(Text, { inverse: true, children: " " })] })) : (_jsxs(Text, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { color: colors.dim, children: " type to filter" })] }))] }), items.length > 0 ? (_jsx(SelectInput, { items: items, onSelect: handleMenuSelect, indicatorComponent: ({ isSelected = false }) => (_jsxs(Text, { color: isSelected ? colors.brand : colors.quaternary, children: [isSelected ? "›" : " ", " "] })), itemComponent: ({ isSelected = false, label = "" }) => {
-                        const cmd = SLASH_COMMANDS.find((c) => c.name === label);
-                        return (_jsxs(Text, { children: [_jsx(Text, { color: isSelected ? colors.brand : colors.secondary, bold: isSelected, children: label }), _jsxs(Text, { color: colors.tertiary, children: ["  ", cmd?.description] })] }));
-                    } })) : (_jsx(Text, { color: colors.tertiary, children: "  no matching commands" })), _jsx(Text, { color: colors.quaternary, children: "  esc to dismiss" })] }));
+        // Prompt line varies by level
+        let promptLine;
+        if (menuFilter) {
+            // Filter mode
+            promptLine = (_jsxs(Box, { children: [_jsx(Text, { color: colors.brand, bold: true, children: "/ " }), _jsxs(Text, { children: [menuFilter, _jsx(Text, { inverse: true, children: " " })] })] }));
+        }
+        else if (selectedCategory !== null) {
+            // Level 2: show category name
+            const catLabel = getCategoryLabel(selectedCategory);
+            const catColor = getCategoryColor(selectedCategory);
+            promptLine = (_jsxs(Box, { children: [_jsx(Text, { color: colors.brand, bold: true, children: "/ " }), _jsx(Text, { color: catColor, bold: true, children: catLabel }), _jsx(Text, { color: colors.tertiary, children: " > " }), _jsx(Text, { inverse: true, children: " " })] }));
+        }
+        else {
+            // Level 1
+            promptLine = (_jsxs(Box, { children: [_jsx(Text, { color: colors.brand, bold: true, children: "/ " }), _jsxs(Text, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { color: colors.dim, children: " type to filter" })] })] }));
+        }
+        // Hint line varies by level
+        const hint = selectedCategory !== null && !menuFilter
+            ? "  \u2190 back  esc dismiss"
+            : "  esc to dismiss";
+        return (_jsxs(Box, { flexDirection: "column", children: [promptLine, _jsx(SlashMenu, { filter: menuFilter, selectedIndex: menuIndex, selectedCategory: selectedCategory }), _jsx(Text, { color: colors.quaternary, children: hint })] }));
     }
     // ── Normal input rendering ──
     const lines = displayValue.split("\n");
@@ -499,7 +843,7 @@ export function ChatInput({ onSubmit, onCommand, disabled, agentName }) {
     const visibleLines = isTruncated
         ? [...lines.slice(0, MAX_DISPLAY_LINES - 1), `… ${lines.length - MAX_DISPLAY_LINES + 1} more lines`]
         : lines;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: " " }), (images.length > 0 || files.length > 0 || pastedText) && (_jsxs(Box, { children: [_jsx(Text, { children: "  " }), images.map((img, i) => (_jsxs(Text, { children: [_jsx(Text, { color: colors.indigo, children: "[" }), _jsx(Text, { color: colors.secondary, children: img.name }), _jsx(Text, { color: colors.indigo, children: "]" }), _jsx(Text, { children: " " })] }, `img-${i}`))), files.map((f, i) => (_jsxs(Text, { children: [_jsx(Text, { color: colors.purple, children: "[" }), _jsx(Text, { color: colors.secondary, children: f.name }), _jsx(Text, { color: colors.purple, children: "]" }), _jsx(Text, { children: " " })] }, `file-${i}`))), pastedText && (_jsxs(Text, { children: [_jsx(Text, { color: colors.indigo, children: "[" }), _jsxs(Text, { color: colors.secondary, children: ["pasted ", pastedText.split("\n").length, " lines"] }), _jsx(Text, { color: colors.indigo, children: "]" })] }))] })), _jsx(Text, { color: colors.separator, children: divider }), _jsx(Text, { children: " " }), lines.length <= 1 ? (_jsxs(Box, { children: [_jsx(Text, { color: colors.brand, bold: true, children: "❯ " }), !displayValue ? (_jsxs(Text, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { color: colors.dim, children: `Message ${agentName || "whale"}, or type / for commands` })] })) : (_jsxs(Text, { children: [displayValue.slice(0, displayCursor), _jsx(Text, { inverse: true, children: displayCursor < displayValue.length ? displayValue[displayCursor] : " " }), displayCursor < displayValue.length ? displayValue.slice(displayCursor + 1) : ""] }))] })) : (
+    return (_jsxs(Box, { flexDirection: "column", children: [(images.length > 0 || files.length > 0 || contextItems.length > 0 || pastedText) && (_jsxs(Box, { children: [_jsx(Text, { children: "  " }), contextItems.map((ctx, i) => (_jsxs(Text, { children: [_jsx(Text, { color: CONTEXT_COLORS[ctx.type] || "cyan", children: "[" }), _jsxs(Text, { color: colors.secondary, children: [ctx.type, ": ", ctx.title] }), _jsx(Text, { color: CONTEXT_COLORS[ctx.type] || "cyan", children: "]" }), _jsx(Text, { children: " " })] }, `ctx-${i}`))), images.map((img, i) => (_jsxs(Text, { children: [_jsx(Text, { color: colors.indigo, children: "[" }), _jsx(Text, { color: colors.secondary, children: img.name }), _jsx(Text, { color: colors.indigo, children: "]" }), _jsx(Text, { children: " " })] }, `img-${i}`))), files.map((f, i) => (_jsxs(Text, { children: [_jsx(Text, { color: colors.purple, children: "[" }), _jsx(Text, { color: colors.secondary, children: f.name }), _jsx(Text, { color: colors.purple, children: "]" }), _jsx(Text, { children: " " })] }, `file-${i}`))), pastedText && (_jsxs(Text, { children: [_jsx(Text, { color: colors.indigo, children: "[" }), _jsxs(Text, { color: colors.secondary, children: ["pasted ", pastedText.split("\n").length, " lines"] }), _jsx(Text, { color: colors.indigo, children: "]" })] }))] })), lines.length <= 1 ? (_jsxs(Box, { children: [_jsx(Text, { color: colors.brand, bold: true, children: "❯ " }), !displayValue ? (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { color: colors.dim, children: `Message ${agentName || "whale"}, or type / for commands` })] })) : (_jsxs(Text, { children: [displayValue.slice(0, displayCursor), _jsx(Text, { inverse: true, children: displayCursor < displayValue.length ? displayValue[displayCursor] : " " }), displayCursor < displayValue.length ? displayValue.slice(displayCursor + 1) : ""] }))] })) : (
             /* Multi-line input */
             _jsx(Box, { flexDirection: "column", children: visibleLines.map((line, i) => {
                     const isRealLine = !isTruncated || i < MAX_DISPLAY_LINES - 1;