merge

codex-cli/src/components/chat/terminal-chat-new-input.tsx

@@ -17,7 +17,6 @@ import {
   addToHistory,
 } from "../../utils/storage/command-history.js";
 import { clearTerminal, onExit } from "../../utils/terminal.js";
-import Spinner from "../vendor/ink-spinner.js";
 import { Box, Text, useApp, useInput, useStdin } from "ink";
 import { fileURLToPath } from "node:url";
 import React, { useCallback, useState, Fragment, useEffect } from "react";
@@ -37,39 +36,7 @@ const typeHelpText = `ctrl+c to exit | "/clear" to reset context | "/help" for c
 const DEBUG_HIST =
   process.env["DEBUG_TCI"] === "1" || process.env["DEBUG_TCI"] === "true";
 
-const thinkingTexts = ["Thinking"]; /* [
-  "Consulting the rubber duck",
-  "Maximizing paperclips",
-  "Reticulating splines",
-  "Immanentizing the Eschaton",
-  "Thinking",
-  "Thinking about thinking",
-  "Spinning in circles",
-  "Counting dust specks",
-  "Updating priors",
-  "Feeding the utility monster",
-  "Taking off",
-  "Wireheading",
-  "Counting to infinity",
-  "Staring into the Basilisk",
-  "Running acausal tariff negotiations",
-  "Searching the library of babel",
-  "Multiplying matrices",
-  "Solving the halting problem",
-  "Counting grains of sand",
-  "Simulating a simulation",
-  "Asking the oracle",
-  "Detangling qubits",
-  "Reading tea leaves",
-  "Pondering universal love and transcendent joy",
-  "Feeling the AGI",
-  "Shaving the yak",
-  "Escaping local minima",
-  "Pruning the search tree",
-  "Descending the gradient",
-  "Painting the bikeshed",
-  "Securing funding",
-]; */
+// Placeholder for potential dynamic prompts – currently not used.
 
 export default function TerminalChatInput({
   isNew: _isNew,
@@ -85,8 +52,10 @@ export default function TerminalChatInput({
   openModelOverlay,
   openApprovalOverlay,
   openHelpOverlay,
+  openDiffOverlay,
   interruptAgent,
   active,
+  thinkingSeconds,
 }: {
   isNew: boolean;
   loading: boolean;
@@ -104,8 +73,10 @@ export default function TerminalChatInput({
   openModelOverlay: () => void;
   openApprovalOverlay: () => void;
   openHelpOverlay: () => void;
+  openDiffOverlay: () => void;
   interruptAgent: () => void;
   active: boolean;
+  thinkingSeconds: number;
 }): React.ReactElement {
   const app = useApp();
   const [selectedSuggestion, setSelectedSuggestion] = useState<number>(0);
@@ -261,6 +232,12 @@ export default function TerminalChatInput({
         return;
       }
 
+      if (inputValue === "/diff") {
+        setInput("");
+        openDiffOverlay();
+        return;
+      }
+
       if (inputValue.startsWith("/model")) {
         setInput("");
         openModelOverlay();
@@ -368,6 +345,7 @@ export default function TerminalChatInput({
       openApprovalOverlay,
       openModelOverlay,
       openHelpOverlay,
+      openDiffOverlay,
       history, // Add history to the dependency array
     ],
   );
@@ -377,7 +355,11 @@ export default function TerminalChatInput({
       <TerminalChatCommandReview
         confirmationPrompt={confirmationPrompt}
         onReviewCommand={submitConfirmation}
+        // allow switching approval mode via 'v'
+        onSwitchApprovalMode={openApprovalOverlay}
         explanation={explanation}
+        // disable when input is inactive (e.g., overlay open)
+        isActive={active}
       />
     );
   }
@@ -389,6 +371,7 @@ export default function TerminalChatInput({
           <TerminalChatInputThinking
             onInterrupt={interruptAgent}
             active={active}
+            thinkingSeconds={thinkingSeconds}
           />
         </Box>
       ) : (
@@ -454,15 +437,43 @@ export default function TerminalChatInput({
 function TerminalChatInputThinking({
   onInterrupt,
   active,
+  thinkingSeconds,
 }: {
   onInterrupt: () => void;
   active: boolean;
+  thinkingSeconds: number;
 }) {
-  const [dots, setDots] = useState("");
   const [awaitingConfirm, setAwaitingConfirm] = useState(false);
+  const [dots, setDots] = useState("");
 
-  const [thinkingText] = useState(
-    () => thinkingTexts[Math.floor(Math.random() * thinkingTexts.length)],
+  // Animate ellipsis
+  useInterval(() => {
+    setDots((prev) => (prev.length < 3 ? prev + "." : ""));
+  }, 500);
+
+  // Spinner frames with seconds embedded
+  const ballFrames = [
+    "( ●    )",
+    "(  ●   )",
+    "(   ●  )",
+    "(    ● )",
+    "(     ●)",
+    "(    ● )",
+    "(   ●  )",
+    "(  ●   )",
+    "( ●    )",
+    "(●     )",
+  ];
+  const [frame, setFrame] = useState(0);
+
+  useInterval(() => {
+    setFrame((idx) => (idx + 1) % ballFrames.length);
+  }, 80);
+
+  const frameTemplate = ballFrames[frame] ?? ballFrames[0];
+  const frameWithSeconds = (frameTemplate as string).replace(
+    "●",
+    `●${thinkingSeconds}s`,
   );
 
   // ---------------------------------------------------------------------
@@ -511,9 +522,7 @@ function TerminalChatInputThinking({
     };
   }, [stdin, awaitingConfirm, onInterrupt, active, setRawMode]);
 
-  useInterval(() => {
-    setDots((prev) => (prev.length < 3 ? prev + "." : ""));
-  }, 500);
+  // Elapsed time provided via props – no local interval needed.
 
   useInput(
     (_input, key) => {
@@ -541,9 +550,9 @@ function TerminalChatInputThinking({
   return (
     <Box flexDirection="column" gap={1}>
       <Box gap={2}>
-        <Spinner type="ball" />
+        <Text>{frameWithSeconds}</Text>
         <Text>
-          {thinkingText}
+          Thinking
           {dots}
         </Text>
       </Box>