centaurus-cli 3.1.2 → 3.1.4

package/dist/ui/components/InputBox.js

@@ -6,6 +6,8 @@ import { useConnectivity } from "../../hooks/useConnectivity.js";
 import { Breadcrumbs } from "./Breadcrumbs.js";
 import { GitDiffBreadcrumb } from "./GitDiffBreadcrumb.js";
 import { ContextWindowIndicator } from "./ContextWindowIndicator.js";
+import { LoadingIndicator } from "./LoadingIndicator.js";
+import { AgentTimer } from "./AgentTimer.js";
 import { logDebug } from "../../utils/logger.js";
 import { detectIntent } from "../../utils/input-classifier.js";
 import { CommandHistoryManager } from "../../utils/command-history.js";
@@ -17,6 +19,8 @@ import { useTerminalDimensions, TERMINAL_HEIGHT_CONSTANTS } from "../../hooks/us
 import { AIAutocompleteAgent, AI_AUTOCOMPLETE_DEBOUNCE_MS } from "../../services/ai-autocomplete-agent.js";
 import { workflowStorage } from "../../services/workflow-storage.js";
 import { rulesStorage } from "../../services/rules-storage.js";
+import { skillStorage } from "../../services/skill-storage.js";
+import { useTheme } from "../theme.js";
 const getVisualLines = (text, width) => {
   const logicalLines = text.split("\n");
   const visualLines = [];
@@ -65,6 +69,7 @@ const InputBox = React.memo(({
   commandHistory = [],
   onToggleAutoAccept,
   onToggleCommandMode,
+  onTogglePlanMode,
   onToggleBackgroundMode,
   isActive = true,
   subshellContext,
@@ -73,6 +78,8 @@ const InputBox = React.memo(({
   maxTokens = 1e6,
   contextLimitReached = false,
   isShellRunning = false,
+  allowSubmitWhileShellRunning = false,
+  customTunnelCommand,
   backgroundTaskCount = 0,
   initialValue = "",
   onValueChange,
@@ -84,8 +91,11 @@ const InputBox = React.memo(({
   sessionCommands = [],
   getCheckpoints,
   onSetInputSetup,
-  gitDiffStats
+  gitDiffStats,
+  isAiWorking = false,
+  lastFileChangeSummary
 }) => {
+  const theme = useTheme();
   const [value, setValueInternal] = useState(initialValue);
   const [cursorOffset, setCursorOffset] = useState(0);
   const [completions, setCompletions] = useState([]);
@@ -115,6 +125,7 @@ const InputBox = React.memo(({
   const isConnected = useConnectivity();
   const dimensions = useTerminalDimensions();
   const slashMaxVisibleItems = dimensions.rows < TERMINAL_HEIGHT_CONSTANTS.MIN_ROWS_FOR_STREAMING ? 0 : Math.min(5, Math.max(1, Math.floor((dimensions.rows - 20) / 3)));
+  const isCompactMode = !dimensions.shouldEnableStreaming;
   const showBottomHints = dimensions.columns >= 90;
   const showModeIndicator = dimensions.columns >= 70;
   const [fileTagAutocompleteVisible, setFileTagAutocompleteVisible] = useState(false);
@@ -123,6 +134,7 @@ const InputBox = React.memo(({
   const [activeFileTagStart, setActiveFileTagStart] = useState(null);
   const [confirmedFileTags, setConfirmedFileTags] = useState([]);
   const [confirmedClipboardFiles, setConfirmedClipboardFiles] = useState([]);
+  const [fileSelectionIndex, setFileSelectionIndex] = useState(-1);
   const [visualLineCount, setVisualLineCount] = useState(1);
   const MAX_VISIBLE_LINES = 9;
   const setValue = React.useCallback((newValue) => {
@@ -386,6 +398,21 @@ const InputBox = React.memo(({
     return matches;
   }, []);
   const updateSlashAutocomplete = React.useCallback((nextValue) => {
+    if (nextValue.startsWith("#")) {
+      const query = nextValue.slice(1).split(/\s+/)[0].toLowerCase();
+      if (!nextValue.includes(" ")) {
+        const skills = skillStorage.list();
+        const matches = skills.filter((s) => s.name.toLowerCase().startsWith(query) || s.name.toLowerCase().includes(query)).map((s) => ({ name: s.name, description: `${s.accessLevel} \u2014 ${s.promptPreview}` }));
+        if (matches.length > 0 || query.length === 0) {
+          showSlashAutocomplete(matches.length > 0 ? matches : [{ name: "(no skills)", description: "Use /skill new to create one" }]);
+        } else {
+          setSlashAutocompleteVisible(false);
+        }
+      } else {
+        setSlashAutocompleteVisible(false);
+      }
+      return;
+    }
     if (!nextValue.startsWith("/")) {
       setSlashAutocompleteVisible(false);
       return;
@@ -422,6 +449,10 @@ const InputBox = React.memo(({
       showSlashAutocomplete(filterCommands(nextValue.slice(1)));
       return;
     }
+    if (nextValue.startsWith("/settings limit-chat-history ")) {
+      showSlashAutocomplete(filterCommands(nextValue.slice(1)));
+      return;
+    }
     if (nextValue.startsWith("/settings ")) {
       showSlashAutocomplete(filterCommands(nextValue.slice(1)));
       return;
@@ -449,6 +480,18 @@ const InputBox = React.memo(({
       showSlashAutocomplete(getRuleNameAutocompleteEntries(partialName));
       return;
     }
+    if (nextValue.match(/^\/skill\s+(edit|delete|rm)\s+/)) {
+      const match = nextValue.match(/^\/skill\s+(?:edit|delete|rm)\s+(.*)$/);
+      const partialName = (match ? match[1] : "").toLowerCase();
+      const skills = skillStorage.list();
+      const matchingSkills = skills.filter((s) => s.name.toLowerCase().includes(partialName)).slice(0, 10).map((s) => ({ name: s.name, description: `${s.accessLevel} \u2014 ${s.promptPreview}` }));
+      showSlashAutocomplete(matchingSkills.length > 0 ? matchingSkills : [{ name: "(no skills)", description: "Use /skill new to create one" }]);
+      return;
+    }
+    if (nextValue.startsWith("/skill ")) {
+      showSlashAutocomplete(filterCommands(nextValue.slice(1)));
+      return;
+    }
     if (nextValue.startsWith("/rules ")) {
       showSlashAutocomplete(filterCommands(nextValue.slice(1)));
       return;
@@ -594,20 +637,36 @@ const InputBox = React.memo(({
       return;
     }
     let atPosition = -1;
+    let isQuoted = false;
     for (let i = cursorOffset - 1; i >= 0; i--) {
       const char = value[i];
-      if (/[\s\n]/.test(char)) break;
+      if (char === '"' && i > 0 && value[i - 1] === "@") {
+        atPosition = i - 1;
+        isQuoted = true;
+        break;
+      }
       if (char === "@") {
-        atPosition = i;
+        if (i + 1 < value.length && value[i + 1] === '"') {
+          atPosition = i;
+          isQuoted = true;
+        } else {
+          atPosition = i;
+        }
         break;
       }
+      if (!isQuoted && /[\s\n]/.test(char)) break;
     }
     if (atPosition === -1 || atPosition > 0 && !/[\s\n]/.test(value[atPosition - 1])) {
       setFileTagAutocompleteVisible(false);
       setActiveFileTagStart(null);
       return;
     }
-    const query = value.slice(atPosition + 1, cursorOffset);
+    let query;
+    if (isQuoted) {
+      query = value.slice(atPosition + 2, cursorOffset).replace(/^"/, "");
+    } else {
+      query = value.slice(atPosition + 1, cursorOffset);
+    }
     const matches = getMatchingMentionSuggestions(query);
     if (matches.length > 0) {
       setFileTagSuggestions(matches);
@@ -639,24 +698,27 @@ const InputBox = React.memo(({
     pushToUndoStack();
     const beforeTag = value.slice(0, activeFileTagStart);
     const afterCursor = value.slice(cursorOffset);
-    const baseValue = beforeTag + "@" + selected.insertText;
+    const needsQuotes = /\s/.test(selected.insertText);
+    const insertStr = needsQuotes ? `"${selected.insertText}"` : selected.insertText;
+    const baseValue = beforeTag + "@" + insertStr;
+    const insertLen = 1 + insertStr.length;
     if (selected.kind === "rule-namespace") {
       const newValue2 = baseValue + afterCursor;
-      const newCursorPos2 = activeFileTagStart + 1 + selected.insertText.length;
+      const newCursorPos2 = activeFileTagStart + insertLen;
       setValue(newValue2);
       setCursorOffset(newCursorPos2);
       return;
     }
     if (viaTab && selected.kind === "directory") {
       const newValue2 = baseValue + afterCursor;
-      const newCursorPos2 = activeFileTagStart + 1 + selected.insertText.length;
+      const newCursorPos2 = activeFileTagStart + insertLen;
       setValue(newValue2);
       setCursorOffset(newCursorPos2);
       return;
     }
     const trailingSuffix = viaTab ? "" : " ";
     const newValue = baseValue + trailingSuffix + afterCursor;
-    const newCursorPos = activeFileTagStart + 1 + selected.insertText.length + trailingSuffix.length;
+    const newCursorPos = activeFileTagStart + insertLen + trailingSuffix.length;
     setValue(newValue);
     setCursorOffset(newCursorPos);
     setConfirmedFileTags((prev) => [
@@ -665,7 +727,7 @@ const InputBox = React.memo(({
       ),
       {
         start: activeFileTagStart,
-        end: activeFileTagStart + 1 + selected.insertText.length,
+        end: activeFileTagStart + insertLen,
         fileName: selected.name
       }
     ]);
@@ -704,6 +766,13 @@ const InputBox = React.memo(({
           setSlashAutocompleteVisible(false);
           return;
         }
+        if (value.startsWith("#")) {
+          const newValue = `#${selected.name} `;
+          setValue(newValue);
+          setCursorOffset(newValue.length);
+          setSlashAutocompleteVisible(false);
+          return;
+        }
         if (value.startsWith("/mcp ")) {
           const newValue = `/mcp ${selected.name} `;
           setValue(newValue);
@@ -812,11 +881,53 @@ const InputBox = React.memo(({
               setSlashAutocompleteVisible(false);
             }
           }
+        } else if (value.startsWith("/sub-agent ") || value.startsWith("/subagent ")) {
+          const prefix = value.startsWith("/sub-agent ") ? "/sub-agent " : "/subagent ";
+          const newValue = `${prefix}${selected.name}`;
+          setValue(newValue);
+          setCursorOffset(newValue.length);
+          setSlashAutocompleteVisible(false);
+        } else if (value.startsWith("/skill edit ") || value.startsWith("/skill delete ") || value.startsWith("/skill rm ")) {
+          const prefix = value.match(/^\/skill\s+(?:edit|delete|rm)\s+/)?.[0] || "/skill edit ";
+          const newValue = `${prefix}${selected.name}`;
+          setValue(newValue);
+          setCursorOffset(newValue.length);
+          setSlashAutocompleteVisible(false);
+        } else if (value.startsWith("/skill ")) {
+          const newValue = `/skill ${selected.name} `;
+          setValue(newValue);
+          setCursorOffset(newValue.length);
+          if (selected.name === "edit" || selected.name === "delete") {
+            const skills = skillStorage.list();
+            const skillMatches = skills.map((s) => ({
+              name: s.name,
+              description: `${s.accessLevel} \u2014 ${s.promptPreview}`
+            }));
+            if (skillMatches.length > 0) {
+              setSlashAutocompleteCommands(skillMatches);
+              setSlashAutocompleteSelectedIndex(0);
+              setSlashAutocompleteScrollOffset(0);
+            } else {
+              setSlashAutocompleteVisible(false);
+            }
+          } else {
+            setSlashAutocompleteVisible(false);
+          }
+        } else if (value.startsWith("/settings theme ")) {
+          const newValue = `/settings theme ${selected.name}`;
+          setValue(newValue);
+          setCursorOffset(newValue.length);
+          setSlashAutocompleteVisible(false);
         } else if (value.startsWith("/settings auto-suggest ")) {
           const newValue = `/settings auto-suggest ${selected.name}`;
           setValue(newValue);
           setCursorOffset(newValue.length);
           setSlashAutocompleteVisible(false);
+        } else if (value.startsWith("/settings limit-chat-history ")) {
+          const newValue = `/settings limit-chat-history ${selected.name}`;
+          setValue(newValue);
+          setCursorOffset(newValue.length);
+          setSlashAutocompleteVisible(false);
         } else if (value.startsWith("/settings ")) {
           const newValue = `/settings ${selected.name} `;
           setValue(newValue);
@@ -830,6 +941,24 @@ const InputBox = React.memo(({
             } else {
               setSlashAutocompleteVisible(false);
             }
+          } else if (selected.name === "limit-chat-history") {
+            const optionMatches = filterCommands("settings limit-chat-history ");
+            if (optionMatches.length > 0) {
+              setSlashAutocompleteCommands(optionMatches);
+              setSlashAutocompleteSelectedIndex(0);
+              setSlashAutocompleteScrollOffset(0);
+            } else {
+              setSlashAutocompleteVisible(false);
+            }
+          } else if (selected.name === "theme") {
+            const themeMatches = filterCommands("settings theme ");
+            if (themeMatches.length > 0) {
+              setSlashAutocompleteCommands(themeMatches);
+              setSlashAutocompleteSelectedIndex(0);
+              setSlashAutocompleteScrollOffset(0);
+            } else {
+              setSlashAutocompleteVisible(false);
+            }
           } else {
             setSlashAutocompleteVisible(false);
           }
@@ -918,6 +1047,24 @@ const InputBox = React.memo(({
             } else {
               setSlashAutocompleteVisible(false);
             }
+          } else if (selected.name === "sub-agent" || selected.name === "subagent") {
+            const subcommandMatches = filterCommands("sub-agent ");
+            if (subcommandMatches.length > 0) {
+              setSlashAutocompleteCommands(subcommandMatches);
+              setSlashAutocompleteSelectedIndex(0);
+              setSlashAutocompleteScrollOffset(0);
+            } else {
+              setSlashAutocompleteVisible(false);
+            }
+          } else if (selected.name === "skill") {
+            const subcommandMatches = filterCommands("skill ");
+            if (subcommandMatches.length > 0) {
+              setSlashAutocompleteCommands(subcommandMatches);
+              setSlashAutocompleteSelectedIndex(0);
+              setSlashAutocompleteScrollOffset(0);
+            } else {
+              setSlashAutocompleteVisible(false);
+            }
           } else if (selected.name === "revert") {
             const checkpoints = getCheckpoints ? getCheckpoints() : [];
             if (checkpoints.length === 0) {
@@ -981,8 +1128,8 @@ const InputBox = React.memo(({
         return;
       }
     }
-    const isAltV = key.meta && input === "v" || input === "\u221A";
-    if (isAltV && !commandMode) {
+    const isPasteFile = key.ctrl && input === "v" || input === "\u221A";
+    if (isPasteFile && !commandMode) {
       (async () => {
         try {
           const files = await getClipboardFiles();
@@ -990,35 +1137,54 @@ const InputBox = React.memo(({
             const currentCount = confirmedClipboardFiles.length;
             const newCount = files.length;
             if (currentCount + newCount > 5) {
-              logDebug(`Alt+V: Rejected file paste, limit exceeded (${currentCount} + ${newCount} > 5)`);
+              logDebug(`Ctrl+V: Rejected file paste, limit exceeded (${currentCount} + ${newCount} > 5)`);
               setRejectFlash(true);
               setTimeout(() => setRejectFlash(false), 1e3);
               return;
             }
-            logDebug(`Alt+V: Found ${files.length} file(s) in clipboard, adding to input`);
+            logDebug(`Ctrl+V: Found ${files.length} file(s) in clipboard, adding to input`);
             const newFilesWithIds = files.map((file) => ({
               ...file,
               id: `${file.id}_${Date.now()}_${Math.random().toString(36).substring(7)}`
             }));
             setConfirmedClipboardFiles((prev) => [...prev, ...newFilesWithIds]);
           } else {
-            logDebug("Alt+V: No file in clipboard");
+            logDebug("Ctrl+V: No file in clipboard");
           }
         } catch (error) {
-          logDebug(`Alt+V: Failed to check clipboard: ${error instanceof Error ? error.message : "Unknown error"}`);
+          logDebug(`Ctrl+V: Failed to check clipboard: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
       })();
       return;
     }
-    const isAltX = key.meta && input === "x" || input === "\u2248";
-    if (isAltX && !commandMode) {
-      if (confirmedClipboardFiles.length > 0) {
-        logDebug(`Alt+X: Removing last attached file`);
-        setConfirmedClipboardFiles((prev) => prev.slice(0, -1));
-      } else {
-        logDebug(`Alt+X: No files to remove`);
+    if (fileSelectionIndex >= 0) {
+      if (key.leftArrow) {
+        setFileSelectionIndex((prev) => Math.max(prev - 1, 0));
+        return;
       }
-      return;
+      if (key.rightArrow) {
+        setFileSelectionIndex((prev) => Math.min(prev + 1, confirmedClipboardFiles.length - 1));
+        return;
+      }
+      if (key.backspace || key.delete) {
+        const idxToRemove = fileSelectionIndex;
+        setConfirmedClipboardFiles((prev) => prev.filter((_, i) => i !== idxToRemove));
+        const newLen = confirmedClipboardFiles.length - 1;
+        if (newLen <= 0) {
+          setFileSelectionIndex(-1);
+        } else {
+          setFileSelectionIndex(Math.min(idxToRemove, newLen - 1));
+        }
+        return;
+      }
+      if (key.downArrow || key.escape) {
+        setFileSelectionIndex(-1);
+        return;
+      }
+      if (key.upArrow) {
+        return;
+      }
+      setFileSelectionIndex(-1);
     }
     if (isMacOptionWordBackwardSequence) {
       if (cursorOffset > 0) {
@@ -1077,6 +1243,16 @@ const InputBox = React.memo(({
       }, 100);
       return;
     }
+    if (key.ctrl && input.toLowerCase() === "p") {
+      if (onTogglePlanMode) {
+        ignoreNextChangeRef.current = true;
+        onTogglePlanMode();
+        setTimeout(() => {
+          ignoreNextChangeRef.current = false;
+        }, 100);
+      }
+      return;
+    }
     if (key.ctrl && input.toLowerCase() === "d") {
       if (onToggleCommandMode) {
         ignoreNextChangeRef.current = true;
@@ -1224,6 +1400,13 @@ const InputBox = React.memo(({
         currentVisualLineIndex = visualLines.length - 1;
       }
       if (currentVisualLineIndex <= 0) {
+        if (confirmedClipboardFiles.length > 0 && (historyIndex <= 0 || commandHistory.length === 0)) {
+          if (historyIndex === -1 && commandHistory.length > 0) {
+            setTempValue(value);
+          }
+          setFileSelectionIndex(confirmedClipboardFiles.length - 1);
+          return;
+        }
         if (commandHistory.length > 0) {
           if (historyIndex === -1) {
             setTempValue(value);
@@ -1475,7 +1658,7 @@ const InputBox = React.memo(({
   };
   const handleSubmit = () => {
     if (!isActive) return;
-    if (isShellRunning) {
+    if (isShellRunning && !allowSubmitWhileShellRunning) {
       setRejectFlash(true);
       setTimeout(() => setRejectFlash(false), 1e3);
       return;
@@ -1498,6 +1681,7 @@ const InputBox = React.memo(({
       setAutocompleteSuggestion(null);
       setConfirmedFileTags([]);
       setConfirmedClipboardFiles([]);
+      setFileSelectionIndex(-1);
     }
   };
   const renderInput = () => {
@@ -1574,7 +1758,7 @@ const InputBox = React.memo(({
         const isInActiveFileTag = activeFileTagStart !== null && absPos >= activeFileTagStart && absPos < activeFileTagEnd;
         let isInConfirmedFileTag = false;
         if (!commandMode) {
-          const fileTagRegex = /(?:^|[\s\n])(@[^\s@]+)/g;
+          const fileTagRegex = /(?:^|[\s\n])(@"[^"]*"|@[^\s@]+)/g;
           let match;
           while ((match = fileTagRegex.exec(value)) !== null) {
             const fullMatch = match[0];
@@ -1598,7 +1782,7 @@ const InputBox = React.memo(({
           return /* @__PURE__ */ React.createElement(Text, { key: charIdx, backgroundColor: "white", color: "black" }, char);
         }
         if (isInConfirmedFileTag || isInActiveFileTag) {
-          return /* @__PURE__ */ React.createElement(Text, { key: charIdx, color: "#00ccff", bold: true }, char);
+          return /* @__PURE__ */ React.createElement(Text, { key: charIdx, color: theme.accent, bold: true }, char);
         }
         return /* @__PURE__ */ React.createElement(Text, { key: charIdx }, char);
       });
@@ -1619,6 +1803,35 @@ const InputBox = React.memo(({
       return /* @__PURE__ */ React.createElement(Text, { key: idx }, renderedChars);
     }), endLine < totalVisualLines && /* @__PURE__ */ React.createElement(Text, { color: "gray" }, "\u2193 ..."));
   };
+  if (isCompactMode) {
+    const compactBorderColor = rejectFlash ? "#ff3366" : sessionQuotaExhausted ? "#ff3366" : backgroundMode ? "#9966ff" : commandMode ? "#00cc66" : theme.border;
+    const ruleWidth = Math.max(10, dimensions.columns - 4);
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: "100%" }, /* @__PURE__ */ React.createElement(Box, { justifyContent: "space-between", width: "100%", flexDirection: "row" }, isAiWorking ? /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(LoadingIndicator, null), /* @__PURE__ */ React.createElement(AgentTimer, null)) : /* @__PURE__ */ React.createElement(Box, { flexShrink: 1, minWidth: 0, flexDirection: "row" }, subshellContext && subshellContext.type !== "local" && /* @__PURE__ */ React.createElement(Breadcrumbs, { context: subshellContext, stack: subshellContextStack }), customTunnelCommand && /* @__PURE__ */ React.createElement(Box, { marginRight: 1 }, subshellContext && subshellContext.type !== "local" && /* @__PURE__ */ React.createElement(Text, { color: "gray" }, " \u203A "), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, "[tunnel: ", customTunnelCommand, "]")), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "CWD: "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true, wrap: "truncate-start" }, currentDir), gitDiffStats && (gitDiffStats.additions > 0 || gitDiffStats.deletions > 0) && /* @__PURE__ */ React.createElement(
+      GitDiffBreadcrumb,
+      {
+        additions: gitDiffStats.additions,
+        deletions: gitDiffStats.deletions
+      }
+    ), confirmedClipboardFiles.length > 0 && confirmedClipboardFiles.map((_, i) => /* @__PURE__ */ React.createElement(Text, { key: i, color: fileSelectionIndex === i ? "#000000" : "#ff69b4", backgroundColor: fileSelectionIndex === i ? "#ff69b4" : void 0, bold: fileSelectionIndex === i }, " [file_", i + 1, "]"))), lastFileChangeSummary && lastFileChangeSummary.filesChanged > 0 && /* @__PURE__ */ React.createElement(Box, { paddingRight: 1, flexDirection: "row", flexShrink: 0 }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, lastFileChangeSummary.filesChanged, " file", lastFileChangeSummary.filesChanged !== 1 ? "s" : "", " changed "), lastFileChangeSummary.insertions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "green" }, "+", lastFileChangeSummary.insertions), lastFileChangeSummary.insertions > 0 && lastFileChangeSummary.deletions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " "), lastFileChangeSummary.deletions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "red" }, "-", lastFileChangeSummary.deletions))), /* @__PURE__ */ React.createElement(Text, { color: compactBorderColor }, "\u2500".repeat(ruleWidth)), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", width: "100%" }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "> "), renderInput()), /* @__PURE__ */ React.createElement(Text, { color: compactBorderColor }, "\u2500".repeat(ruleWidth)), slashAutocompleteVisible && slashAutocompleteCommands.length > 0 ? /* @__PURE__ */ React.createElement(Box, { width: "100%" }, (() => {
+      const selected = slashAutocompleteCommands[slashAutocompleteSelectedIndex];
+      if (!selected) return null;
+      return /* @__PURE__ */ React.createElement(Box, { gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true, inverse: true }, " ", selected.name, " "), selected.swatchColor ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: selected.swatchColor }, "\u2588\u2588\u2588\u2588"), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, selected.description)) : /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, selected.description), slashAutocompleteCommands.length > 1 && /* @__PURE__ */ React.createElement(Text, { color: "#555555", dimColor: true }, " (", slashAutocompleteSelectedIndex + 1, "/", slashAutocompleteCommands.length, ") \u2191\u2193"));
+    })()) : fileTagAutocompleteVisible && fileTagSuggestions.length > 0 ? /* @__PURE__ */ React.createElement(Box, { width: "100%" }, (() => {
+      const selected = fileTagSuggestions[fileTagSelectedIndex];
+      if (!selected) return null;
+      const icon = selected.kind === "directory" ? "\u{1F4C1}" : selected.kind === "rule" ? "\u{1F4DC}" : "\u{1F4C4}";
+      return /* @__PURE__ */ React.createElement(Box, { gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true, inverse: true }, " ", icon, " ", selected.name, " "), selected.description && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, selected.description), fileTagSuggestions.length > 1 && /* @__PURE__ */ React.createElement(Text, { color: "#555555", dimColor: true }, " (", fileTagSelectedIndex + 1, "/", fileTagSuggestions.length, ") \u2191\u2193"));
+    })()) : (
+      /* ── Normal status line ── */
+      /* @__PURE__ */ React.createElement(Box, { justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Mode: "), isAutoMode ? /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, "Auto ["), detectedIntent === "command" ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal") : /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, "Agent"), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, "]")) : backgroundMode ? /* @__PURE__ */ React.createElement(Text, { color: "#9966ff", bold: true }, "Background") : commandMode ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal") : planMode ? /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "Plan") : /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, "Agent"), model && !commandMode && !backgroundMode && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, null, "  "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Model: "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, model))), /* @__PURE__ */ React.createElement(Box, { gap: 1 }, subAgentCount > 0 && /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, "[sub-agent: ", subAgentCount, "]"), backgroundTaskCount > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#9966ff", bold: true }, "[bkg tasks: ", backgroundTaskCount, "]"), !commandMode && !backgroundMode && planMode && /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "[PLANNING]"), !commandMode && !backgroundMode && autoAcceptMode && /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "[AUTO-ACCEPT: ON]"), !commandMode && !backgroundMode && currentTokens > 0 ? /* @__PURE__ */ React.createElement(
+        ContextWindowIndicator,
+        {
+          currentTokens,
+          maxTokens
+        }
+      ) : /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, isAutoMode ? showBottomHints ? autoAcceptMode ? "Ctrl+D to switch modes" : "Ctrl+D to switch modes \u2022 Ctrl+T to auto-approve" : "Ctrl+D to switch modes" : backgroundMode ? "Ctrl+D to switch modes \u2022 Commands run in background" : commandMode ? "Ctrl+D to switch modes \u2022 Tab for autocomplete" : showBottomHints ? autoAcceptMode ? "Ctrl+D to switch modes" : "Ctrl+D to switch modes \u2022 Ctrl+T to auto-approve" : "Ctrl+D to switch modes")))
+    ));
+  }
   return /* @__PURE__ */ React.createElement(
     Box,
     {
@@ -1626,32 +1839,22 @@ const InputBox = React.memo(({
       borderStyle: "round",
       borderColor: rejectFlash ? "#ff3366" : sessionQuotaExhausted ? "#ff3366" : (
         // Red when quota exhausted
-        backgroundMode ? "#9966ff" : commandMode ? "#00cc66" : "#257aa5ff"
+        backgroundMode ? "#9966ff" : commandMode ? "#00cc66" : theme.border
       ),
       paddingX: 1,
       paddingY: 0,
       width: "100%"
     },
-    /* @__PURE__ */ React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Box, { flexShrink: 1, minWidth: 0, flexDirection: "row" }, subshellContext && subshellContext.type !== "local" && /* @__PURE__ */ React.createElement(Breadcrumbs, { context: subshellContext, stack: subshellContextStack }), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "CWD: "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true, wrap: "truncate-start" }, currentDir), gitDiffStats && (gitDiffStats.additions > 0 || gitDiffStats.deletions > 0) && /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Box, { flexShrink: 1, minWidth: 0, flexDirection: "row" }, subshellContext && subshellContext.type !== "local" && /* @__PURE__ */ React.createElement(Breadcrumbs, { context: subshellContext, stack: subshellContextStack }), customTunnelCommand && /* @__PURE__ */ React.createElement(Box, { marginRight: 1 }, subshellContext && subshellContext.type !== "local" && /* @__PURE__ */ React.createElement(Text, { color: "gray" }, " \u203A "), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, "[tunnel: ", customTunnelCommand, "]")), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "CWD: "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true, wrap: "truncate-start" }, currentDir), gitDiffStats && (gitDiffStats.additions > 0 || gitDiffStats.deletions > 0) && /* @__PURE__ */ React.createElement(
       GitDiffBreadcrumb,
       {
         additions: gitDiffStats.additions,
         deletions: gitDiffStats.deletions
       }
-    )), /* @__PURE__ */ React.createElement(Box, { flexShrink: 0 }, model && !commandMode && !backgroundMode && /* @__PURE__ */ React.createElement(Box, { marginRight: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Model: "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, model)), /* @__PURE__ */ React.createElement(Box, null, showModeIndicator && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Mode: "), isAutoMode ? /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "Auto ["), detectedIntent === "command" ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal") : /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, "Agent"), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "]")) : backgroundMode ? /* @__PURE__ */ React.createElement(Text, { color: "#9966ff", bold: true }, "Background") : commandMode ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal") : planMode ? /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "Plan") : /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, "Agent"))))),
-    confirmedClipboardFiles.length > 0 && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1, flexDirection: "row", flexWrap: "wrap", gap: 1 }, confirmedClipboardFiles.map((file, index) => /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        key: file.id,
-        borderStyle: "round",
-        borderColor: "#ff69b4",
-        paddingX: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { color: "#ff69b4", bold: true }, "file_", index + 1)
-    ))),
+    ), confirmedClipboardFiles.length > 0 && confirmedClipboardFiles.map((_, i) => /* @__PURE__ */ React.createElement(Text, { key: i, color: fileSelectionIndex === i ? "#000000" : "#ff69b4", backgroundColor: fileSelectionIndex === i ? "#ff69b4" : void 0, bold: fileSelectionIndex === i }, " [file_", i + 1, "]"))), /* @__PURE__ */ React.createElement(Box, { flexShrink: 0 }, model && !commandMode && !backgroundMode && /* @__PURE__ */ React.createElement(Box, { marginRight: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Model: "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, model)), /* @__PURE__ */ React.createElement(Box, null, showModeIndicator && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Mode: "), isAutoMode ? /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, "Auto ["), detectedIntent === "command" ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal") : /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, "Agent"), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, "]")) : backgroundMode ? /* @__PURE__ */ React.createElement(Text, { color: "#9966ff", bold: true }, "Background") : commandMode ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal") : planMode ? /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "Plan") : /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, "Agent"))))),
     showQuotaMessage && /* @__PURE__ */ React.createElement(Box, { justifyContent: "flex-end", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366", bold: true }, "Session quota reached. Try again in ", sessionQuotaTimeRemaining)),
     /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", width: "100%" }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "> "), renderInput()),
-    /* @__PURE__ */ React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, isAutoMode ? showBottomHints ? "Ctrl+D to switch modes \u2022 Ctrl+T to auto-approve" : "Ctrl+D to switch modes" : backgroundMode ? "Ctrl+D to switch modes \u2022 Commands run in background" : commandMode ? "Ctrl+D to switch modes \u2022 Tab for autocomplete" : showBottomHints ? "Ctrl+D to switch modes \u2022 Ctrl+T to auto-approve" : "Ctrl+D to switch modes"), /* @__PURE__ */ React.createElement(Box, { gap: 1 }, subAgentCount > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "[sub-agent: ", subAgentCount, "]"), backgroundTaskCount > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#9966ff", bold: true }, "[bkg tasks: ", backgroundTaskCount, "]"), !commandMode && !backgroundMode && planMode && /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "[PLANNING]"), !commandMode && !backgroundMode && autoAcceptMode ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "[AUTO-ACCEPT: ON]") : !commandMode && !backgroundMode ? /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[AUTO-ACCEPT: OFF]") : null, !commandMode && !backgroundMode && /* @__PURE__ */ React.createElement(Box, { marginLeft: 1 }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, isAutoMode ? showBottomHints ? "Ctrl+D to switch modes \u2022 Ctrl+T to auto-approve" : "Ctrl+D to switch modes" : backgroundMode ? "Ctrl+D to switch modes \u2022 Commands run in background" : commandMode ? "Ctrl+D to switch modes \u2022 Tab for autocomplete" : showBottomHints ? "Ctrl+D to switch modes \u2022 Ctrl+T to auto-approve" : "Ctrl+D to switch modes"), /* @__PURE__ */ React.createElement(Box, { gap: 1 }, subAgentCount > 0 && /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, "[sub-agent: ", subAgentCount, "]"), backgroundTaskCount > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#9966ff", bold: true }, "[bkg tasks: ", backgroundTaskCount, "]"), !commandMode && !backgroundMode && planMode && /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "[PLANNING]"), !commandMode && !backgroundMode && autoAcceptMode ? /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "[AUTO-ACCEPT: ON]") : !commandMode && !backgroundMode ? /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[AUTO-ACCEPT: OFF]") : null, !commandMode && !backgroundMode && /* @__PURE__ */ React.createElement(Box, { marginLeft: 1 }, /* @__PURE__ */ React.createElement(
       ContextWindowIndicator,
       {
         currentTokens,