wave-code 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -28,13 +28,14 @@
     "README.md"
   ],
   "dependencies": {
+    "@anthropic-ai/sandbox-runtime": "^0.0.81",
     "@vscode/ripgrep": "^1.18.0",
     "qrcode": "^1.5.4",
     "sharp": "^0.35.4"
   },
   "devDependencies": {
     "@types/qrcode": "^1.5.6",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.3.0",
     "@types/semver": "^7.7.1",
     "@types/yargs": "^17.0.0",
     "@vitest/coverage-v8": "^4.1.7",
@@ -45,12 +46,11 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "glob": "^13.0.0",
     "highlight.js": "^11.11.1",
-    "ink": "^7.1.1",
-    "ink-testing-library": "^4.0.0",
+    "ink": "^8.0.0",
     "marked": "^17.0.2",
     "node-html-parser": "^7.0.2",
-    "react": "^19.2.4",
-    "react-dom": "19.2.4",
+    "react": "^19.3.1",
+    "react-dom": "19.3.1",
     "rimraf": "^6.1.2",
     "semver": "^7.7.4",
     "string-width": "^8.2.2",
@@ -59,7 +59,7 @@
     "wrap-ansi": "^10.0.0",
     "yargs": "^17.7.2",
     "zod": "^3.23.8",
-    "wave-agent-sdk": "1.4.0"
+    "wave-agent-sdk": "1.5.0"
   },
   "engines": {
     "node": ">=22"

package/src/cli.tsx

@@ -41,24 +41,13 @@ export async function startCli(options: CliOptions): Promise<void> {
   // Continue with ink-based UI for normal mode
   let shouldRemoveWorktree = false;
 
-  // Enable bracketed paste (DECSET 2004) so terminals wrap pasted text in
-  // \x1b[200~ ... \x1b[201~ markers. The input pipeline uses these to insert
-  // pasted text without submitting (a pasted trailing \r is not an Enter).
-  // Terminals without bracketed-paste support ignore the sequence and paste
-  // without markers, falling back to legacy behavior. No-op when stdout is
-  // not a TTY (piped input, stdio mode).
-  const stdoutIsTTY = process.stdout.isTTY === true;
-  if (stdoutIsTTY) {
-    process.stdout.write("\x1b[?2004h");
-  }
-
   const handleExit = (shouldRemove: boolean) => {
     shouldRemoveWorktree = shouldRemove;
     unmount();
   };
 
   // Render the application
-  const { unmount, waitUntilExit } = render(
+  const { clear, unmount, waitUntilExit } = render(
     <App
       restoreSessionId={restoreSessionId}
       continueLastSession={continueLastSession}
@@ -75,21 +64,24 @@ export async function startCli(options: CliOptions): Promise<void> {
       version={version}
       model={model}
       mcpServers={mcpServers}
+      // Late-bound: the hook is created before `render()` returns the instance
+      // whose `clear()` it calls.
+      onClearOutput={() => clear()}
       onExit={handleExit}
     />,
-    { exitOnCtrlC: false },
+    {
+      exitOnCtrlC: false,
+      // Redraw only the lines that changed instead of rewriting the whole
+      // frame. Measured in a real terminal (tmux, 100x30) while a Bash command
+      // streamed 60 lines: 71 KB -> 20 KB written, 733 -> 78 cursor moves, same
+      // output on screen. ink falls back to whole-line updates for lines
+      // carrying controls it cannot diff around.
+      incrementalRendering: true,
+    },
   );
 
   // Wait for the app to finish unmounting
-  try {
-    await waitUntilExit();
-  } finally {
-    // Disable bracketed paste (DECSET 2004) so the terminal returns to its
-    // previous paste handling.
-    if (stdoutIsTTY) {
-      process.stdout.write("\x1b[?2004l");
-    }
-  }
+  await waitUntilExit();
 
   try {
     // Clean up old log files

package/src/components/AgentsManager.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useReducer } from "react";
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput, useWindowSize } from "ink";
 import type { SubagentConfiguration } from "wave-agent-sdk";
 import { Markdown } from "./Markdown.js";
 import {
@@ -47,7 +47,7 @@ export const AgentsManager: React.FC<AgentsManagerProps> = ({
   agentDefinitions,
 }) => {
   const [state, dispatch] = useReducer(agentsManagerReducer, initialState);
-  const { stdout } = useStdout();
+  const { rows } = useWindowSize();
 
   // Handle pending effects
   useEffect(() => {
@@ -107,7 +107,7 @@ export const AgentsManager: React.FC<AgentsManagerProps> = ({
   // Window slice: center the selected item within the visible area, clamping
   // to the terminal's available rows (reusable pattern from
   // BackgroundTaskManager).
-  const availableRows = stdout?.rows ?? 24;
+  const availableRows = rows || 24;
   const maxVisible = Math.max(3, Math.min(15, availableRows - 12));
   const selectedFlatIndex = entries.findIndex(
     (e) => e.selectableIndex === state.selectedIndex,

package/src/components/App.tsx

@@ -102,6 +102,7 @@ const AppWithProviders: React.FC<AppWithProvidersProps> = ({
   version,
   model,
   mcpServers,
+  onClearOutput,
   onExit,
 }) => {
   // Handle Ctrl-C for non-worktree sessions (immediate exit)
@@ -131,6 +132,7 @@ const AppWithProviders: React.FC<AppWithProvidersProps> = ({
         version={version}
         model={model}
         mcpServers={mcpServers}
+        onClearOutput={onClearOutput}
       >
         <ChatWithExitPrompt worktreeSession={worktreeSession} onExit={onExit} />
       </ChatProvider>
@@ -152,6 +154,7 @@ const AppWithProviders: React.FC<AppWithProvidersProps> = ({
       version={version}
       model={model}
       mcpServers={mcpServers}
+      onClearOutput={onClearOutput}
     >
       <ChatInterface />
     </ChatProvider>
@@ -174,6 +177,7 @@ export const App: React.FC<AppProps> = ({
   version,
   model,
   mcpServers,
+  onClearOutput,
   onExit,
 }) => {
   return (
@@ -195,6 +199,7 @@ export const App: React.FC<AppProps> = ({
         version={version}
         model={model}
         mcpServers={mcpServers}
+        onClearOutput={onClearOutput}
         onExit={onExit}
       />
     </AppProvider>

package/src/components/BtwDisplay.tsx

@@ -1,22 +1,75 @@
-import React from "react";
-import { Box, Text } from "ink";
+import React, { useState } from "react";
+import { Box, Text, useWindowSize } from "ink";
 import { Markdown } from "./Markdown.js";
+import { ScrolledContent } from "./ScrolledContent.js";
+import { useLineScroll } from "../hooks/useLineScroll.js";
 import { BtwState } from "../managers/inputReducer.js";
 import { streamingTail } from "../utils/streamingText.js";
 
+/** Rows moved by one ↑/↓ press (aligned with Claude Code's btw pager). */
+export const BTW_SCROLL_LINES = 3;
+/**
+ * Rows the overlay leaves free inside the terminal so the frame never outgrows
+ * it: its own chrome (top margin, question line, content margin, hint = 4) plus
+ * the rows around it that must stay on screen (the streaming tail above, and
+ * the input box + status line below = 4), plus slack for a wrapped question.
+ * Claude Code reserves the same 11 rows (CHROME_ROWS 5 + OUTER_CHROME_ROWS 6).
+ */
+export const BTW_CHROME_ROWS = 11;
+/** Smallest usable answer viewport, whatever the terminal size. */
+export const BTW_MIN_VIEWPORT_ROWS = 5;
+/** Footer hint with scrolling enabled — shown only while the answer overflows. */
+export const BTW_SCROLL_HINT = "↑/↓ to scroll · Esc to dismiss";
+/** Footer hint for an answer that fits — unchanged from before scrolling. */
+export const BTW_DISMISS_HINT = "Escape to dismiss";
+
 interface BtwDisplayProps {
   btwState: BtwState;
+  /** Terminal rows. Defaults to the live window size; tests pass it explicitly
+   *  so the viewport budget is deterministic. */
+  rows?: number;
 }
 
-export const BtwDisplay: React.FC<BtwDisplayProps> = ({ btwState }) => {
+/**
+ * `/btw` overlay: the question line, the answer (Markdown, or the loading
+ * indicator while it streams) and the dismiss hint.
+ *
+ * The answer is rendered inside a fixed-height viewport rather than in the
+ * frame's natural height, so a long answer cannot push the top of the terminal
+ * out of reach: it scrolls with ↑/↓ (and Ctrl+P/Ctrl+N) while it overflows,
+ * and the viewport is recomputed from the terminal size on resize. Esc — and
+ * only Esc — dismisses the overlay.
+ */
+export const BtwDisplay: React.FC<BtwDisplayProps> = ({ btwState, rows }) => {
+  const { rows: terminalRows } = useWindowSize();
+  const availableRows = rows ?? terminalRows;
+  const viewportRows = Math.max(
+    BTW_MIN_VIEWPORT_ROWS,
+    availableRows - BTW_CHROME_ROWS,
+  );
+
+  const answer = btwState.answer ?? "";
+
+  // Rows really occupied by the answer (wrapped rows included), measured after
+  // layout by <ScrolledContent> — see that component for why it is measured
+  // instead of counted from the Markdown source. Zero while the answer is still
+  // streaming: the loading line is a single row and has nothing to scroll.
+  const [measuredRows, setMeasuredRows] = useState(0);
+  const contentRows = btwState.isLoading ? 0 : measuredRows;
+
+  const { scrollOffset, canScroll } = useLineScroll({
+    totalLines: contentRows,
+    visibleCount: viewportRows,
+    lineStep: BTW_SCROLL_LINES,
+    resetKey: btwState.question,
+  });
+
   // Rendered for a real question (loading or answered) and for the bare
   // `/btw` usage message (question === "", answer set).
   if (!btwState.question && !btwState.answer) {
     return null;
   }
 
-  const answer = btwState.answer ?? "";
-
   // The SDK surfaces failure as the answer string; classify by prefix so it
   // renders in error color (aligned with Claude Code's error display).
   const isError =
@@ -46,20 +99,23 @@ export const BtwDisplay: React.FC<BtwDisplayProps> = ({ btwState }) => {
               </Text>
             )}
           </Box>
-        ) : isError ? (
-          <Text color="error">{answer}</Text>
         ) : (
-          <Markdown>{answer}</Markdown>
+          <ScrolledContent
+            visibleRows={viewportRows}
+            scrollOffset={scrollOffset}
+            onMeasuredRows={setMeasuredRows}
+          >
+            {isError ? (
+              <Text color="error">{answer}</Text>
+            ) : (
+              <Markdown>{answer}</Markdown>
+            )}
+          </ScrolledContent>
         )}
       </Box>
-      {btwState.question && btwState.answer && (
-        <Box marginTop={1}>
-          <Text dimColor>Escape to dismiss</Text>
-        </Box>
-      )}
-      {!btwState.question && btwState.answer && (
+      {btwState.answer && (
         <Box marginTop={1}>
-          <Text dimColor>Escape to dismiss</Text>
+          <Text dimColor>{canScroll ? BTW_SCROLL_HINT : BTW_DISMISS_HINT}</Text>
         </Box>
       )}
     </Box>

package/src/components/CompactDisplay.tsx

@@ -26,12 +26,7 @@ export const CompactDisplay: React.FC<CompactDisplayProps> = ({ block }) => {
 
       {content && (
         <Box marginTop={1} flexDirection="column">
-          <Box
-            paddingLeft={2}
-            borderLeft
-            borderColor="gray"
-            flexDirection="column"
-          >
+          <Box paddingLeft={2} flexDirection="column">
             <Text color="white">{displayContent}</Text>
           </Box>
         </Box>

package/src/components/ConfirmationDetails.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput, useWindowSize } from "ink";
 import {
   BASH_TOOL_NAME,
   EDIT_TOOL_NAME,
@@ -36,25 +36,37 @@ const getActionDescription = (
       return "Enter plan mode for complex task planning";
     case ASK_USER_QUESTION_TOOL_NAME:
       return "Answer questions to clarify intent";
-    case ARTIFACT_TOOL_NAME:
-      switch (toolInput.action) {
+    case ARTIFACT_TOOL_NAME: {
+      // `action` omitted means publish, so the publish wording must not be the
+      // switch's fallback: a comment or asset action added later would then be
+      // announced as "Publish file:".
+      const action = toolInput.action ?? "publish";
+      const target = toolInput.url || toolInput.file_path || "unknown artifact";
+      switch (action) {
         case "list":
           return `List artifacts (scope: ${toolInput.scope || "mine"})`;
         case "upload_asset":
           return `Upload asset: ${toolInput.file_path || "unknown file"}`;
         case "list_assets":
-          return `List assets of artifact: ${toolInput.url || "unknown artifact"}`;
+          return `List assets of artifact: ${target}`;
         case "read_asset":
           return `Read asset: ${toolInput.asset_id || "unknown asset"}`;
         case "delete_asset":
           return `Delete asset: ${toolInput.asset_id || "unknown asset"}`;
         case "copy_from":
-          return `Copy assets into artifact: ${toolInput.url || "unknown artifact"}`;
+          return `Copy assets into artifact: ${target}`;
         case "read":
-          return `Read artifact: ${toolInput.url || "unknown artifact"}`;
-        default:
+          return `Read artifact: ${target}`;
+        case "reply":
+          return `Reply to comment thread ${toolInput.thread_id || "unknown thread"} on: ${target}`;
+        case "resolve":
+          return `${toolInput.resolved === false ? "Reopen" : "Resolve"} comment thread ${toolInput.thread_id || "unknown thread"} on: ${target}`;
+        case "publish":
           return `Publish file: ${toolInput.file_path || "unknown file"}`;
+        default:
+          return `Artifact action "${String(action)}" on: ${target}`;
       }
+    }
     default:
       return "Execute operation";
   }
@@ -89,8 +101,8 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
 
   // Terminal width is needed to render the plan's Markdown (table column widths
   // are computed from it), matching <Markdown>'s own default.
-  const { stdout } = useStdout();
-  const columns = stdout?.columns ?? 80;
+  const { columns: terminalColumns } = useWindowSize();
+  const columns = terminalColumns || 80;
 
   const headerRows = 2 + (warning ? 1 : 0);
 
@@ -125,12 +137,7 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
     ? highlightToAnsi(JSON.stringify(toolInput, null, 2), "json")
         .split("\n")
         .map((line, index) => (
-          <Box
-            key={`json-${index}`}
-            paddingLeft={2}
-            borderLeft
-            borderColor="cyan"
-          >
+          <Box key={`json-${index}`} paddingLeft={2}>
             <Text>{line || " "}</Text>
           </Box>
         ))

package/src/components/ConfirmationSelector.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useReducer, useRef } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useEffect, useReducer } from "react";
+import { Box, Text, useInput, usePaste } from "ink";
+import type { Key } from "ink";
 import type {
   PermissionDecision,
   PermissionMode,
@@ -15,7 +16,6 @@ import {
 } from "wave-agent-sdk";
 import { confirmationReducer } from "../reducers/confirmationReducer.js";
 import { questionReducer } from "../reducers/questionReducer.js";
-import { createBracketedPasteDetector } from "../utils/bracketedPaste.js";
 
 const getHeaderColor = (header: string) => {
   const colors = ["red", "green", "blue", "magenta", "cyan"] as const;
@@ -124,46 +124,41 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     outsideSafeZoneDirectory ?? "",
   )}/ this session`;
 
-  const pasteDetectorRef = useRef(createBracketedPasteDetector());
-
-  useInput((input, key) => {
-    if (key.escape) {
-      onCancel();
-      return;
-    }
-
-    const result = pasteDetectorRef.current.process(input);
-    if (result.kind === "consume") {
-      // Content of an in-flight bracketed paste: hold it, never submit.
-      return;
-    }
-    let cleanInput: string;
-    if (result.kind === "paste") {
-      cleanInput = (result.leadingInput ?? "") + result.text;
-    } else {
-      cleanInput = result.input;
-    }
-
+  const dispatchInput = (input: string, key: Key) => {
     if (toolName === ASK_USER_QUESTION_TOOL_NAME) {
       questionDispatch({
         type: "HANDLE_KEY",
-        input: cleanInput,
+        input,
         key,
         questions,
       });
-    } else {
-      dispatch({
-        type: "HANDLE_KEY",
-        input: cleanInput,
-        key,
-        toolName,
-        toolInput,
-        suggestedPrefix,
-        hidePersistentOption,
-        outsideSafeZoneDirectory,
-        permissionMode,
-      });
+      return;
+    }
+    dispatch({
+      type: "HANDLE_KEY",
+      input,
+      key,
+      toolName,
+      toolInput,
+      suggestedPrefix,
+      hidePersistentOption,
+      outsideSafeZoneDirectory,
+      permissionMode,
+    });
+  };
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
     }
+    dispatchInput(input, key);
+  });
+
+  // A pasted string arrives here as one chunk with no key flags, so it can fill
+  // an answer/instruction field but never confirm the decision itself.
+  usePaste((text) => {
+    dispatchInput(text, {} as Key);
   });
 
   const placeholderText = "Type here to tell Wave what to change";

package/src/components/DiffDisplay.tsx

@@ -385,7 +385,7 @@ export const DiffDisplay = ({
 
   return (
     <Box flexDirection="column">
-      <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
+      <Box paddingLeft={2} flexDirection="column">
         <Box flexDirection="column">{diffLines}</Box>
       </Box>
     </Box>

package/src/components/HooksManager.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useReducer } from "react";
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput, useWindowSize } from "ink";
 import {
   HOOK_EVENT_SUMMARIES,
   type HookEvent,
@@ -60,7 +60,7 @@ export const HooksManager: React.FC<HooksManagerProps> = ({
   hooks,
 }) => {
   const [state, dispatch] = useReducer(hooksManagerReducer, initialState);
-  const { stdout } = useStdout();
+  const { rows } = useWindowSize();
 
   // Handle pending effects
   useEffect(() => {
@@ -125,7 +125,7 @@ export const HooksManager: React.FC<HooksManagerProps> = ({
   // Window slice: center the selected item within the visible area, clamping
   // to the terminal's available rows (reusable pattern from
   // AgentsManager/SkillsManager).
-  const availableRows = stdout?.rows ?? 24;
+  const availableRows = rows || 24;
   const maxVisible = Math.max(3, Math.min(15, availableRows - 12));
   const selectedFlatIndex = entries.findIndex(
     (e) => e.selectableIndex === state.selectedIndex,

package/src/components/InputBox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback } from "react";
 import { Box, Text } from "ink";
-import { useInput } from "ink";
+import { useInput, usePaste } from "ink";
 import { FileSelector } from "./FileSelector.js";
 import { CommandSelector } from "./CommandSelector.js";
 import { HistorySearch } from "./HistorySearch.js";
@@ -13,6 +13,7 @@ import { RewindCommand } from "./RewindCommand.js";
 import { ResumeCommand } from "./ResumeCommand.js";
 import { HelpView } from "./HelpView.js";
 import { StatusCommand } from "./StatusCommand.js";
+import { RemoteControlView } from "./RemoteControlView.js";
 import { LoginCommand } from "./LoginCommand.js";
 import { PluginManagerShell } from "./PluginManagerShell.js";
 import { ModelSelector } from "./ModelSelector.js";
@@ -98,7 +99,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
     compact,
     addDir,
     renameSession,
-    remoteControlCommand,
     currentModel,
     configuredModels,
     setModel,
@@ -162,6 +162,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showResumeSelector,
     showHelp,
     showStatusCommand,
+    showRemoteControl,
     showLoginCommand,
     showPluginManager,
     showModelSelector,
@@ -175,6 +176,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setShowResumeSelector,
     setShowHelp,
     setShowStatusCommand,
+    setShowRemoteControl,
     setShowLoginCommand,
     setShowPluginManager,
     setShowModelSelector,
@@ -190,6 +192,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     escClearPending,
     // Main handler
     handleInput,
+    insertPastedText,
     // Manager ready state
     isManagerReady,
     // Direct state setters
@@ -202,7 +205,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
     onReloadPlugins: reloadPlugins,
     onAddDir: addDir,
     onRenameSession: renameSession,
-    onRemoteControlCommand: remoteControlCommand,
     onHasSlashCommand: hasSlashCommand,
     onAbortMessage: abortMessage,
     onBackgroundCurrentTask: backgroundCurrentTask,
@@ -233,13 +235,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setPermissionMode(chatPermissionMode);
   }, [chatPermissionMode, setPermissionMode]);
 
-  // Use the InputManager's unified input handler
-  useInput(async (input, key) => {
-    // These views have their own useInput handlers that handle escape and navigation.
-    // If they are active, we should skip InputBox's global input handling to avoid
-    // duplicate dispatches or state update conflicts.
-    if (
-      planView ||
+  // These views have their own useInput handlers that handle escape and
+  // navigation. While one is open it owns the keyboard: InputBox must skip its
+  // own handling to avoid duplicate dispatches or state update conflicts.
+  const overlayOwnsKeyboard = Boolean(
+    planView ||
       showRewindManager ||
       showResumeSelector ||
       showHelp ||
@@ -252,13 +252,32 @@ export const InputBox: React.FC<InputBoxProps> = ({
       showAgentsManager ||
       showWorkflowManager ||
       showSkillsManager ||
-      showHooksManager
-    ) {
+      showHooksManager ||
+      showRemoteControl,
+  );
+
+  // Use the InputManager's unified input handler
+  useInput(async (input, key) => {
+    if (overlayOwnsKeyboard) {
       return;
     }
     await handleInput(input, key);
   });
 
+  // ink enables bracketed paste mode (DECSET 2004) while this hook is active and
+  // delivers the whole paste as one string here instead of through useInput, so
+  // its newlines are inserted rather than submitted. Deactivating it while an
+  // overlay owns the keyboard hands pasted text back to ink's `useInput`
+  // fallback, where the overlay's own handler sees it — text-entry overlays
+  // (login token, plugin source form, confirmation answer) additionally keep a
+  // `usePaste` of their own, which gets the empty-key chunk directly.
+  usePaste(
+    (text) => {
+      insertPastedText(text);
+    },
+    { isActive: !overlayOwnsKeyboard },
+  );
+
   const handleRewindCancel = () => {
     if (setShowRewindManager) {
       setShowRewindManager(false);
@@ -410,6 +429,10 @@ export const InputBox: React.FC<InputBoxProps> = ({
         <StatusCommand onCancel={() => setShowStatusCommand(false)} />
       )}
 
+      {showRemoteControl && (
+        <RemoteControlView onCancel={() => setShowRemoteControl(false)} />
+      )}
+
       {showLoginCommand && (
         <LoginCommand onCancel={() => setShowLoginCommand(false)} />
       )}
@@ -455,7 +478,8 @@ export const InputBox: React.FC<InputBoxProps> = ({
             showLoginCommand ||
             showPluginManager ||
             showModelSelector ||
-            showWorkflowManager || (
+            showWorkflowManager ||
+            showRemoteControl || (
               <Box flexDirection="column">
                 {escClearPending && (
                   <Text color="gray">Press Esc again to clear input</Text>