@within-7/minto 0.1.6 → 0.2.0

package/dist/components/PromptInput.js

@@ -7,14 +7,22 @@ import { useHistorySearch } from "../hooks/useHistorySearch.js";
 import { addToHistory, getHistory } from "../history.js";
 import TextInput from "./TextInput.js";
 import { HistorySearchOverlay } from "./HistorySearchOverlay.js";
-import { memo, useCallback, useMemo, useState } from "react";
+import {
+  HotkeyHelpPanel,
+  ContextAwareHints
+} from "./HotkeyHelpPanel.js";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { countTokens } from "../utils/tokens.js";
 import { SentryErrorBoundary } from "./SentryErrorBoundary.js";
 import { TokenWarning, WARNING_THRESHOLD } from "./TokenWarning.js";
 import { useTerminalSize } from "../hooks/useTerminalSize.js";
 import { getTheme } from "../utils/theme.js";
 import { getModelManager } from "../utils/model.js";
-import { getGlobalConfig, saveGlobalConfig } from "../utils/config.js";
+import {
+  getGlobalConfig,
+  saveGlobalConfig,
+  getVerboseLabel
+} from "../utils/config.js";
 import { setTerminalTitle, clearScreen } from "../utils/terminal.js";
 import terminalSetup, {
   isShiftEnterKeyBindingInstalled,
@@ -65,6 +73,7 @@ function PromptInput({
   onQuery,
   debug,
   verbose,
+  verboseToggleMessage,
   messages,
   setToolJSX,
   tools,
@@ -87,7 +96,11 @@ function PromptInput({
   onRollbackConversation,
   onToggleBackgroundPanel,
   backgroundShellCount = 0,
-  isBackgroundPanelOpen = false
+  isBackgroundPanelOpen = false,
+  queuedPrompts = [],
+  onQueuePrompt,
+  onPopQueuedPrompt,
+  onInterrupt
 }) {
   const [exitMessage, setExitMessage] = useState({ show: false });
   const [message, setMessage] = useState({
@@ -105,9 +118,17 @@ function PromptInput({
   const [escCount, setEscCount] = useState(0);
   const [escTimer, setEscTimer] = useState(null);
   const [hotkeyMessage, setHotkeyMessage] = useState({ show: false });
+  useEffect(() => {
+    if (verboseToggleMessage) {
+      setHotkeyMessage({ show: true, text: verboseToggleMessage });
+    }
+  }, [verboseToggleMessage]);
+  const [showHotkeyHelp, setShowHotkeyHelp] = useState(false);
   const [backgroundIndicatorFocused, setBackgroundIndicatorFocused] = useState(false);
   const { cycleMode, currentMode } = usePermissionContext();
-  const { columns } = useTerminalSize();
+  const terminalSize = useTerminalSize();
+  const { columns } = terminalSize;
+  const textInputColumns = columns - 6;
   const commandWidth = useMemo(
     () => Math.max(...commands.map((cmd) => cmd.userFacingName().length)) + 5,
     [commands]
@@ -128,6 +149,14 @@ function PromptInput({
   const history = useMemo(() => getHistory(), [submitCount]);
   const historySearch = useHistorySearch(history);
   const theme = getTheme();
+  const inputContext = useMemo(() => {
+    if (isLoading) return "loading";
+    if (historySearch.isActive) return "history_search";
+    if (completionActive) return "completion";
+    if (input.startsWith("/")) return "slash_command";
+    if (input.trim().length > 0) return "typing";
+    return "idle";
+  }, [isLoading, historySearch.isActive, completionActive, input]);
   const MAX_VISIBLE_SUGGESTIONS = 8;
   const visibleSuggestions = useMemo(() => {
     if (suggestions.length === 0) return [];
@@ -231,6 +260,14 @@ function PromptInput({
   );
   const handleHistoryUp = () => {
     if (!completionActive) {
+      if (input.trim() === "" && queuedPrompts.length > 0 && onPopQueuedPrompt) {
+        const poppedPrompt = onPopQueuedPrompt();
+        if (poppedPrompt) {
+          onInputChange(poppedPrompt);
+          setCursorOffset(poppedPrompt.length);
+          return;
+        }
+      }
       onHistoryUp();
     }
   };
@@ -330,12 +367,32 @@ function PromptInput({
       return;
     }
     if (isLoading) {
+      if (onQueuePrompt && input2.trim()) {
+        onQueuePrompt(input2.trim());
+        onInputChange("");
+        setMessage({
+          show: true,
+          text: `Queued: "${input2.slice(0, 30)}${input2.length > 30 ? "..." : ""}" (${queuedPrompts.length + 1} in queue)`
+        });
+        setTimeout(() => setMessage({ show: false }), 2e3);
+      }
       return;
     }
     if (suggestions.length > 0 && completionActive) {
       return;
     }
-    if (["exit", "quit", ":q", ":q!", ":wq", ":wq!"].includes(input2.trim())) {
+    const exitCommands = [
+      "exit",
+      "quit",
+      ":q",
+      ":q!",
+      ":wq",
+      ":wq!",
+      "/exit",
+      "/quit",
+      "/q"
+    ];
+    if (exitCommands.includes(input2.trim())) {
       exit();
     }
     let finalInput = input2;
@@ -454,19 +511,19 @@ function PromptInput({
         return true;
       }
       if (key.ctrl && inputChar === "o") {
-        const config = getGlobalConfig();
         const newVerbose = !verbose;
+        const config = getGlobalConfig();
         saveGlobalConfig({
           ...config,
           verbose: newVerbose
         });
         setHotkeyMessage({
           show: true,
-          text: `Verbose mode ${newVerbose ? "enabled" : "disabled"} (Ctrl-O)`
+          text: `${getVerboseLabel(newVerbose)} (Ctrl+O)`
         });
         setTimeout(() => setHotkeyMessage({ show: false }), 2e3);
         if (onToggleVerbose) {
-          onToggleVerbose();
+          onToggleVerbose(newVerbose);
         }
         return true;
       }
@@ -508,6 +565,10 @@ function PromptInput({
         onSubmit(bashCommand);
         return true;
       }
+      if (key.ctrl && (inputChar === "?" || inputChar === "/")) {
+        setShowHotkeyHelp((prev) => !prev);
+        return true;
+      }
       if (key.ctrl && inputChar === "r") {
         if (!historySearch.isActive) {
           historySearch.activate();
@@ -647,11 +708,32 @@ function PromptInput({
         handleQuickModelSwitch();
         return true;
       }
+      if (key.escape) {
+        if (input.length > 0) {
+          onInputChange("");
+          setHotkeyMessage({ show: true, text: "Input cleared (Esc)" });
+          setTimeout(() => setHotkeyMessage({ show: false }), 1e3);
+          return true;
+        } else if (isLoading && onInterrupt) {
+          onInterrupt();
+          setHotkeyMessage({
+            show: true,
+            text: "Interrupted by user (Esc)"
+          });
+          setTimeout(() => setHotkeyMessage({ show: false }), 2e3);
+          return true;
+        }
+      }
       return false;
     },
-    [handleQuickModelSwitch]
+    [
+      handleQuickModelSwitch,
+      isLoading,
+      input.length,
+      onInputChange,
+      onInterrupt
+    ]
   );
-  const textInputColumns = useTerminalSize().columns - 6;
   const tokenUsage = useMemo(() => countTokens(messages), [messages]);
   const modelManager = getModelManager();
   const currentModelId = modelManager.getModel("main")?.id || null;
@@ -672,22 +754,32 @@ function PromptInput({
       currentTokens: tokenUsage
     };
   }, [tokenUsage, modelSwitchMessage.show, submitCount, currentModelId]);
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, fallbackMode && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "yellow" }, "\u26A0\uFE0F Limited input mode"), /* @__PURE__ */ React.createElement(Text, { dimColor: true }, " ", "(Advanced keyboard shortcuts unavailable - raw mode not supported)")), historySearch.isActive && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, fallbackMode && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "yellow" }, "\u26A0\uFE0F Limited input mode"), /* @__PURE__ */ React.createElement(Text, { dimColor: true }, " ", "(Advanced keyboard shortcuts unavailable - raw mode not supported)")), showHotkeyHelp && /* @__PURE__ */ React.createElement(
+    HotkeyHelpPanel,
+    {
+      isVisible: showHotkeyHelp,
+      onClose: () => setShowHotkeyHelp(false)
+    }
+  ), historySearch.isActive && /* @__PURE__ */ React.createElement(
     HistorySearchOverlay,
     {
       searchTerm: historySearch.searchTerm,
       results: historySearch.filteredResults,
       selectedIndex: historySearch.selectedIndex
     }
-  ), modelInfo && /* @__PURE__ */ React.createElement(Box, { justifyContent: "flex-end", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "[", modelInfo.provider, "] ", modelInfo.name, ":", " ", Math.round(modelInfo.currentTokens / 1e3), "k /", " ", Math.round(modelInfo.contextLength / 1e3), "k")), /* @__PURE__ */ React.createElement(
+  ), modelInfo && /* @__PURE__ */ React.createElement(Box, { justifyContent: "flex-end", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "[", modelInfo.provider, "] ", modelInfo.name, ":", " ", Math.round(modelInfo.currentTokens / 1e3), "k /", " ", Math.round(modelInfo.contextLength / 1e3), "k")), queuedPrompts.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { paddingLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\u2500\u2500 Queued (", queuedPrompts.length, ") \xB7 will run after current task \xB7 \u2191 to edit last \u2500\u2500")), queuedPrompts.map((prompt, index) => /* @__PURE__ */ React.createElement(Box, { key: index, paddingLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\u276F "), /* @__PURE__ */ React.createElement(Text, { dimColor: true }, prompt.length > 60 ? prompt.slice(0, 60) + "..." : prompt)))), /* @__PURE__ */ React.createElement(
     Box,
     {
       alignItems: "flex-start",
       justifyContent: "flex-start",
+      borderTop: true,
+      borderBottom: true,
+      borderLeft: false,
+      borderRight: false,
       borderColor: mode === "bash" ? theme.bashBorder : mode === "koding" ? theme.noting : theme.secondaryBorder,
-      borderDimColor: true,
-      borderStyle: "round",
-      marginTop: 1,
+      borderDimColor: false,
+      borderStyle: "single",
+      marginTop: queuedPrompts.length > 0 ? 0 : 1,
       width: "100%"
     },
     /* @__PURE__ */ React.createElement(
@@ -699,13 +791,13 @@ function PromptInput({
         justifyContent: "flex-start",
         width: 3
       },
-      mode === "bash" ? /* @__PURE__ */ React.createElement(Text, { color: theme.bashBorder }, "\xA0!\xA0") : mode === "koding" ? /* @__PURE__ */ React.createElement(Text, { color: theme.noting }, "\xA0#\xA0") : /* @__PURE__ */ React.createElement(Text, { color: isLoading ? theme.secondaryText : void 0 }, "\xA0>\xA0")
+      mode === "bash" ? /* @__PURE__ */ React.createElement(Text, { color: theme.bashBorder }, "\xA0!\xA0") : mode === "koding" ? /* @__PURE__ */ React.createElement(Text, { color: theme.noting }, "\xA0#\xA0") : /* @__PURE__ */ React.createElement(Text, { color: isLoading ? theme.secondaryText : void 0, bold: true }, "\xA0\u276F\xA0")
     ),
     /* @__PURE__ */ React.createElement(Box, { paddingRight: 1 }, /* @__PURE__ */ React.createElement(
       TextInput,
       {
         multiline: true,
-        focus: !isBackgroundPanelOpen,
+        focus: !isBackgroundPanelOpen && (!isLoading || !!onQueuePrompt),
         onSubmit,
         onChange,
         value: input,
@@ -718,7 +810,7 @@ function PromptInput({
         onMessage: (show, text) => setMessage({ show, text }),
         onImagePaste,
         columns: textInputColumns,
-        isDimmed: isDisabled || isLoading,
+        isDimmed: isDisabled || isLoading && !onQueuePrompt,
         disableCursorMovementForUpDownKeys: completionActive,
         cursorOffset,
         onChangeCursorOffset: setCursorOffset,
@@ -734,34 +826,52 @@ function PromptInput({
       paddingX: 2,
       paddingY: 0
     },
-    /* @__PURE__ */ React.createElement(Box, { justifyContent: "flex-start", gap: 1 }, exitMessage.show ? /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ", exitMessage.key, " again to exit") : message.show ? /* @__PURE__ */ React.createElement(Text, { dimColor: true }, message.text) : hotkeyMessage.show ? /* @__PURE__ */ React.createElement(Text, { color: theme.success }, hotkeyMessage.text) : modelSwitchMessage.show ? /* @__PURE__ */ React.createElement(Text, { color: theme.success }, modelSwitchMessage.text) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        color: mode === "bash" ? theme.bashBorder : void 0,
-        dimColor: mode !== "bash"
-      },
-      "! for bash mode"
-    ), /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        color: mode === "koding" ? theme.noting : void 0,
-        dimColor: mode !== "koding"
-      },
-      "\xB7 # for ",
-      PROJECT_FILE
-    ), /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\xB7 / for commands \xB7 ctrl+c cancel \xB7 ctrl+l clear"), backgroundShellCount > 0 && /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        color: backgroundIndicatorFocused ? theme.primary : theme.success,
-        backgroundColor: backgroundIndicatorFocused ? theme.success : void 0,
-        dimColor: !backgroundIndicatorFocused
-      },
-      "\xB7 ",
-      backgroundIndicatorFocused ? "\u25BA " : "",
-      backgroundShellCount,
-      " background task",
-      backgroundShellCount > 1 ? "s" : ""
-    ))),
+    /* @__PURE__ */ React.createElement(Box, { justifyContent: "flex-start", gap: 1 }, exitMessage.show ? /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ", exitMessage.key, " again to exit") : message.show ? /* @__PURE__ */ React.createElement(Text, { dimColor: true }, message.text) : hotkeyMessage.show ? /* @__PURE__ */ React.createElement(Text, { color: theme.success }, hotkeyMessage.text) : modelSwitchMessage.show ? /* @__PURE__ */ React.createElement(Text, { color: theme.success }, modelSwitchMessage.text) : verbose ? (
+      // Verbose mode: full static hints
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          color: mode === "bash" ? theme.bashBorder : void 0,
+          dimColor: mode !== "bash"
+        },
+        "! for bash mode"
+      ), /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          color: mode === "koding" ? theme.noting : void 0,
+          dimColor: mode !== "koding"
+        },
+        "\xB7 # for ",
+        PROJECT_FILE
+      ), /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\xB7 / for commands \xB7 ctrl+? help"), backgroundShellCount > 0 && /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          color: backgroundIndicatorFocused ? theme.primary : theme.success,
+          backgroundColor: backgroundIndicatorFocused ? theme.success : void 0,
+          dimColor: !backgroundIndicatorFocused
+        },
+        "\xB7 ",
+        backgroundIndicatorFocused ? "\u25BA " : "",
+        backgroundShellCount,
+        " background task",
+        backgroundShellCount > 1 ? "s" : ""
+      ), queuedPrompts.length > 0 && /* @__PURE__ */ React.createElement(Text, { color: "yellow" }, "\xB7 \u{1F4CB} ", queuedPrompts.length, " queued"))
+    ) : (
+      // Normal mode: context-aware hints with 0.1.7 style
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContextAwareHints, { context: inputContext, compact: true }), backgroundShellCount > 0 && /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          color: backgroundIndicatorFocused ? theme.primary : theme.success,
+          backgroundColor: backgroundIndicatorFocused ? theme.success : void 0,
+          dimColor: !backgroundIndicatorFocused
+        },
+        "\u2502 ",
+        backgroundIndicatorFocused ? "\u25BA " : "",
+        backgroundShellCount,
+        " task",
+        backgroundShellCount > 1 ? "s" : ""
+      ), queuedPrompts.length > 0 && /* @__PURE__ */ React.createElement(Text, { color: "yellow" }, "\u2502 \u{1F4CB} ", queuedPrompts.length, " queued"), isLoading && onQueuePrompt && queuedPrompts.length === 0 && /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\u2502 Type to queue next prompt"))
+    )),
     /* @__PURE__ */ React.createElement(
       SentryErrorBoundary,
       {