wave-code 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -28,11 +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/react": "^19.1.8",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.3.0",
     "@types/semver": "^7.7.1",
     "@types/yargs": "^17.0.0",
     "@vitest/coverage-v8": "^4.1.7",
@@ -43,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",
@@ -57,7 +59,7 @@
     "wrap-ansi": "^10.0.0",
     "yargs": "^17.7.2",
     "zod": "^3.23.8",
-    "wave-agent-sdk": "1.3.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/commands/update.ts

@@ -1,32 +1,70 @@
 import { spawn, spawnSync } from "child_process";
-import https from "https";
 import chalk from "chalk";
 import { isUpdateAvailable } from "../utils/version.js";
 import { readNearestPackageJson } from "../utils/readPackageJson.js";
 
 const currentVersion = readNearestPackageJson().version;
 
-async function getLatestVersion(): Promise<string> {
-  return new Promise((resolve, reject) => {
-    https
-      .get("https://registry.npmjs.org/wave-code/latest", (res) => {
-        let data = "";
-        res.on("data", (chunk) => {
-          data += chunk;
-        });
-        res.on("end", () => {
-          try {
-            const json = JSON.parse(data);
-            resolve(json.version);
-          } catch {
-            reject(new Error("Failed to parse npm registry response"));
-          }
-        });
-      })
-      .on("error", (err) => {
-        reject(err);
-      });
+/** npm registry mirror for China users (the CLI downloads its runtime deps from the same one). */
+const REGISTRY_MIRROR = "https://registry.npmmirror.com";
+/** Official registry — the fallback when the mirror is unreachable. */
+const REGISTRY_OFFICIAL = "https://registry.npmjs.org";
+/** Cap each registry request so a hanging one cannot stall the fallback. */
+const REGISTRY_TIMEOUT_MS = 5000;
+
+interface LatestVersion {
+  version: string;
+  /** The registry that answered — the install reuses it (see getLatestVersion). */
+  registry: string;
+}
+
+async function fetchLatestVersion(registry: string): Promise<string> {
+  const response = await fetch(`${registry}/wave-code/latest`, {
+    signal: AbortSignal.timeout(REGISTRY_TIMEOUT_MS),
   });
+  if (!response.ok) {
+    throw new Error(
+      `HTTP ${response.status} fetching ${registry}/wave-code/latest`,
+    );
+  }
+  const json = (await response.json()) as { version?: string };
+  if (!json.version) {
+    throw new Error(`No version in the response from ${registry}`);
+  }
+  return json.version;
+}
+
+/**
+ * The mirror answers first so the check is fast in CN; the official registry is
+ * a silent fallback so an unreachable mirror never blocks the check.
+ *
+ * The install reuses whichever registry answered: a machine that can only reach
+ * the official registry would fail the install for the very reason the check
+ * fell back.
+ */
+async function getLatestVersion(): Promise<LatestVersion> {
+  try {
+    return {
+      version: await fetchLatestVersion(REGISTRY_MIRROR),
+      registry: REGISTRY_MIRROR,
+    };
+  } catch (mirrorError) {
+    try {
+      return {
+        version: await fetchLatestVersion(REGISTRY_OFFICIAL),
+        registry: REGISTRY_OFFICIAL,
+      };
+    } catch (officialError) {
+      throw new Error(
+        `Could not reach ${REGISTRY_MIRROR} (${errorText(mirrorError)}) ` +
+          `or ${REGISTRY_OFFICIAL} (${errorText(officialError)})`,
+      );
+    }
+  }
+}
+
+function errorText(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
 }
 
 function detectPackageManager(): "npm" | "pnpm" | "yarn" {
@@ -53,7 +91,7 @@ export async function updateCommand() {
   console.log(chalk.dim(`Current version: ${currentVersion}`));
 
   try {
-    const latestVersion = await getLatestVersion();
+    const { version: latestVersion, registry } = await getLatestVersion();
     console.log(chalk.dim(`Latest version: ${latestVersion}`));
 
     if (!isUpdateAvailable(currentVersion, latestVersion)) {
@@ -79,6 +117,8 @@ export async function updateCommand() {
       updateCmd = "npm";
       args = ["install", "-g", "wave-code@latest"];
     }
+    // Appended once so every package manager (including a future branch) gets it.
+    args.push(`--registry=${registry}`);
 
     console.log(chalk.blue(`Updating WAVE Code using ${packageManager}...`));
     console.log(chalk.dim(`Running: ${updateCmd} ${args.join(" ")}`));

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/BackgroundTaskManager.tsx

@@ -6,6 +6,10 @@ import {
   backgroundTaskManagerReducer,
   type BackgroundTaskManagerState,
 } from "../reducers/backgroundTaskManagerReducer.js";
+import WorkflowRunDetail, {
+  formatDuration,
+  formatTime,
+} from "./WorkflowRunDetail.js";
 
 export interface BackgroundTaskManagerProps {
   onCancel: () => void;
@@ -14,8 +18,12 @@ export interface BackgroundTaskManagerProps {
 export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
   onCancel,
 }) => {
-  const { backgroundTasks, getBackgroundTaskOutput, stopBackgroundTask } =
-    useChat();
+  const {
+    backgroundTasks,
+    workflowRuns,
+    getBackgroundTaskOutput,
+    stopBackgroundTask,
+  } = useChat();
   const MAX_VISIBLE_ITEMS = 3;
 
   const [state, dispatch] = useReducer(backgroundTaskManagerReducer, {
@@ -71,18 +79,6 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
     }
   }, [viewMode, detailTaskId, getBackgroundTaskOutput]);
 
-  const formatDuration = (ms: number): string => {
-    if (ms < 1000) return `${ms}ms`;
-    if (ms < 60000) return `${Math.round(ms / 1000)}s`;
-    const minutes = Math.floor(ms / 60000);
-    const seconds = Math.round((ms % 60000) / 1000);
-    return `${minutes}m ${seconds}s`;
-  };
-
-  const formatTime = (timestamp: number): string => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
-
   // Calculate visible window
   const startIndex = Math.max(
     0,
@@ -104,6 +100,15 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
       return null;
     }
 
+    // A workflow background task's id IS its run id, so a workflow task can show
+    // real progress instead of the (always empty) text output: the same run
+    // fields `/workflows` shows, via the same component. Absent run (e.g. the
+    // session was cleared) falls back to the plain task detail below.
+    const selectedRun =
+      task.type === "workflow"
+        ? (workflowRuns.find((r) => r.runId === task.id) ?? null)
+        : null;
+
     return (
       <Box
         flexDirection="column"
@@ -134,53 +139,70 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
               </Text>
             </Box>
           )}
-          <Box>
-            <Text>
-              <Text color="blue">Status:</Text> {task.status}
-              {task.exitCode !== undefined && ` (exit code: ${task.exitCode})`}
-            </Text>
-          </Box>
-          <Box>
-            <Text>
-              <Text color="blue">Started:</Text> {formatTime(task.startTime)}
-              {task.runtime !== undefined && (
+          {/* With the run block below, the task's own status and start time
+              would repeat it — the run is the authority on how far the
+              workflow got. The header keeps only what identifies the task. */}
+          {!selectedRun && (
+            <>
+              <Box>
                 <Text>
-                  {" "}
-                  | <Text color="blue">Runtime:</Text>{" "}
-                  {formatDuration(task.runtime)}
+                  <Text color="blue">Status:</Text> {task.status}
+                  {task.exitCode !== undefined &&
+                    ` (exit code: ${task.exitCode})`}
+                </Text>
+              </Box>
+              <Box>
+                <Text>
+                  <Text color="blue">Started:</Text>{" "}
+                  {formatTime(task.startTime)}
+                  {task.runtime !== undefined && (
+                    <Text>
+                      {" "}
+                      | <Text color="blue">Runtime:</Text>{" "}
+                      {formatDuration(task.runtime)}
+                    </Text>
+                  )}
                 </Text>
+              </Box>
+              {task.outputPath && (
+                <Box>
+                  <Text>
+                    <Text color="blue">Log File:</Text> {task.outputPath}
+                  </Text>
+                </Box>
               )}
-            </Text>
-          </Box>
-          {task.outputPath && (
-            <Box>
-              <Text>
-                <Text color="blue">Log File:</Text> {task.outputPath}
-              </Text>
-            </Box>
+            </>
           )}
         </Box>
 
-        {detailOutput.stdout && (
-          <Box flexDirection="column" marginTop={1}>
-            <Text color="green" bold>
-              OUTPUT (last 10 lines):
-            </Text>
-            <Box borderStyle="single" borderColor="green" padding={1}>
-              <Text>{getLastLines(detailOutput.stdout, 10)}</Text>
-            </Box>
-          </Box>
-        )}
+        {selectedRun ? (
+          <WorkflowRunDetail run={selectedRun} />
+        ) : (
+          <>
+            {detailOutput.stdout && (
+              <Box flexDirection="column" marginTop={1}>
+                <Text color="green" bold>
+                  OUTPUT (last 10 lines):
+                </Text>
+                <Box borderStyle="single" borderColor="green" padding={1}>
+                  <Text>{getLastLines(detailOutput.stdout, 10)}</Text>
+                </Box>
+              </Box>
+            )}
 
-        {detailOutput.stderr && (
-          <Box flexDirection="column" marginTop={1}>
-            <Text color="red" bold>
-              ERRORS:
-            </Text>
-            <Box borderStyle="single" borderColor="red" padding={1}>
-              <Text color="red">{getLastLines(detailOutput.stderr, 10)}</Text>
-            </Box>
-          </Box>
+            {detailOutput.stderr && (
+              <Box flexDirection="column" marginTop={1}>
+                <Text color="red" bold>
+                  ERRORS:
+                </Text>
+                <Box borderStyle="single" borderColor="red" padding={1}>
+                  <Text color="red">
+                    {getLastLines(detailOutput.stderr, 10)}
+                  </Text>
+                </Box>
+              </Box>
+            )}
+          </>
         )}
 
         <Box marginTop={1}>

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,11 +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:
-      if (toolInput.action === "read") {
-        return `Read artifact: ${toolInput.url || "unknown artifact"}`;
+    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: ${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: ${target}`;
+        case "read":
+          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}`;
       }
-      return `Publish file: ${toolInput.file_path || "unknown file"}`;
+    }
     default:
       return "Execute operation";
   }
@@ -75,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);
 
@@ -111,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>
         ))