diff --git a/src/browser/components/Messages/ToolMessage.tsx b/src/browser/components/Messages/ToolMessage.tsx
index a7a4102729..77b0f61554 100644
--- a/src/browser/components/Messages/ToolMessage.tsx
+++ b/src/browser/components/Messages/ToolMessage.tsx
@@ -9,9 +9,15 @@ import { ProposePlanToolCall } from "../tools/ProposePlanToolCall";
 import { TodoToolCall } from "../tools/TodoToolCall";
 import { StatusSetToolCall } from "../tools/StatusSetToolCall";
 import { WebFetchToolCall } from "../tools/WebFetchToolCall";
+import { BashBackgroundListToolCall } from "../tools/BashBackgroundListToolCall";
+import { BashBackgroundTerminateToolCall } from "../tools/BashBackgroundTerminateToolCall";
 import type {
   BashToolArgs,
   BashToolResult,
+  BashBackgroundListArgs,
+  BashBackgroundListResult,
+  BashBackgroundTerminateArgs,
+  BashBackgroundTerminateResult,
   FileReadToolArgs,
   FileReadToolResult,
   FileEditReplaceStringToolArgs,
@@ -89,6 +95,19 @@ function isWebFetchTool(toolName: string, args: unknown): args is WebFetchToolAr
   return TOOL_DEFINITIONS.web_fetch.schema.safeParse(args).success;
 }
 
+function isBashBackgroundListTool(toolName: string, args: unknown): args is BashBackgroundListArgs {
+  if (toolName !== "bash_background_list") return false;
+  return TOOL_DEFINITIONS.bash_background_list.schema.safeParse(args).success;
+}
+
+function isBashBackgroundTerminateTool(
+  toolName: string,
+  args: unknown
+): args is BashBackgroundTerminateArgs {
+  if (toolName !== "bash_background_terminate") return false;
+  return TOOL_DEFINITIONS.bash_background_terminate.schema.safeParse(args).success;
+}
+
 export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, workspaceId }) => {
   // Route to specialized components based on tool name
   if (isBashTool(message.toolName, message.args)) {
@@ -204,6 +223,30 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, wo
     );
   }
 
+  if (isBashBackgroundListTool(message.toolName, message.args)) {
+    return (
+      <div className={className}>
+        <BashBackgroundListToolCall
+          args={message.args}
+          result={message.result as BashBackgroundListResult | undefined}
+          status={message.status}
+        />
+      </div>
+    );
+  }
+
+  if (isBashBackgroundTerminateTool(message.toolName, message.args)) {
+    return (
+      <div className={className}>
+        <BashBackgroundTerminateToolCall
+          args={message.args}
+          result={message.result as BashBackgroundTerminateResult | undefined}
+          status={message.status}
+        />
+      </div>
+    );
+  }
+
   // Fallback to generic tool call
   return (
     <div className={className}>
diff --git a/src/browser/components/tools/BashBackgroundListToolCall.tsx b/src/browser/components/tools/BashBackgroundListToolCall.tsx
new file mode 100644
index 0000000000..7e9faefafb
--- /dev/null
+++ b/src/browser/components/tools/BashBackgroundListToolCall.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import type {
+  BashBackgroundListArgs,
+  BashBackgroundListResult,
+  BashBackgroundListProcess,
+} from "@/common/types/tools";
+import {
+  ToolContainer,
+  ToolHeader,
+  ExpandIcon,
+  StatusIndicator,
+  ToolDetails,
+  DetailSection,
+  LoadingDots,
+  ToolIcon,
+  ErrorBox,
+  OutputPaths,
+} from "./shared/ToolPrimitives";
+import {
+  useToolExpansion,
+  getStatusDisplay,
+  formatDuration,
+  type ToolStatus,
+} from "./shared/toolUtils";
+import { cn } from "@/common/lib/utils";
+
+interface BashBackgroundListToolCallProps {
+  args: BashBackgroundListArgs;
+  result?: BashBackgroundListResult;
+  status?: ToolStatus;
+}
+
+function getProcessStatusStyle(status: BashBackgroundListProcess["status"]) {
+  switch (status) {
+    case "running":
+      return "bg-success text-on-success";
+    case "exited":
+      return "bg-[hsl(0,0%,40%)] text-white";
+    case "killed":
+    case "failed":
+      return "bg-danger text-on-danger";
+  }
+}
+
+export const BashBackgroundListToolCall: React.FC<BashBackgroundListToolCallProps> = ({
+  args: _args,
+  result,
+  status = "pending",
+}) => {
+  const { expanded, toggleExpanded } = useToolExpansion(false);
+
+  const processes = result?.success ? result.processes : [];
+  const runningCount = processes.filter((p) => p.status === "running").length;
+
+  return (
+    <ToolContainer expanded={expanded}>
+      <ToolHeader onClick={toggleExpanded}>
+        <ExpandIcon expanded={expanded}>▶</ExpandIcon>
+        <ToolIcon emoji="📋" toolName="bash_background_list" />
+        <span className="text-text-secondary">
+          {result?.success
+            ? runningCount === 0
+              ? "No background processes"
+              : `${runningCount} background process${runningCount !== 1 ? "es" : ""}`
+            : "Listing background processes"}
+        </span>
+        <StatusIndicator status={status}>{getStatusDisplay(status)}</StatusIndicator>
+      </ToolHeader>
+
+      {expanded && (
+        <ToolDetails>
+          {result?.success === false && (
+            <DetailSection>
+              <ErrorBox>{result.error}</ErrorBox>
+            </DetailSection>
+          )}
+
+          {result?.success && processes.length > 0 && (
+            <DetailSection>
+              <div className="space-y-2">
+                {processes.map((proc) => (
+                  <div key={proc.process_id} className="bg-code-bg rounded px-2 py-1.5 text-[11px]">
+                    <div className="mb-1 flex items-center gap-2">
+                      <span className="text-text font-mono">
+                        {proc.display_name ?? proc.process_id}
+                      </span>
+                      <span
+                        className={cn(
+                          "inline-block rounded px-1.5 py-0.5 text-[9px] font-medium uppercase",
+                          getProcessStatusStyle(proc.status)
+                        )}
+                      >
+                        {proc.status}
+                        {proc.exitCode !== undefined && ` (${proc.exitCode})`}
+                      </span>
+                      <span className="text-text-secondary ml-auto">
+                        {formatDuration(proc.uptime_ms)}
+                      </span>
+                    </div>
+                    <div className="text-text-secondary truncate font-mono" title={proc.script}>
+                      {proc.script}
+                    </div>
+                    <OutputPaths stdout={proc.stdout_path} stderr={proc.stderr_path} compact />
+                  </div>
+                ))}
+              </div>
+            </DetailSection>
+          )}
+
+          {status === "executing" && !result && (
+            <DetailSection>
+              <div className="text-[11px]">
+                Listing processes
+                <LoadingDots />
+              </div>
+            </DetailSection>
+          )}
+        </ToolDetails>
+      )}
+    </ToolContainer>
+  );
+};
diff --git a/src/browser/components/tools/BashBackgroundTerminateToolCall.tsx b/src/browser/components/tools/BashBackgroundTerminateToolCall.tsx
new file mode 100644
index 0000000000..86358cf6a5
--- /dev/null
+++ b/src/browser/components/tools/BashBackgroundTerminateToolCall.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import type {
+  BashBackgroundTerminateArgs,
+  BashBackgroundTerminateResult,
+} from "@/common/types/tools";
+import { ToolContainer, ToolHeader, StatusIndicator, ToolIcon } from "./shared/ToolPrimitives";
+import { getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
+
+interface BashBackgroundTerminateToolCallProps {
+  args: BashBackgroundTerminateArgs;
+  result?: BashBackgroundTerminateResult;
+  status?: ToolStatus;
+}
+
+export const BashBackgroundTerminateToolCall: React.FC<BashBackgroundTerminateToolCallProps> = ({
+  args,
+  result,
+  status = "pending",
+}) => {
+  const statusDisplay = getStatusDisplay(status);
+
+  return (
+    <ToolContainer expanded={false}>
+      <ToolHeader>
+        <ToolIcon emoji="⏹️" toolName="bash_background_terminate" />
+        <span className="text-text font-mono">
+          {result?.success === true ? (result.display_name ?? args.process_id) : args.process_id}
+        </span>
+        {result?.success === true && (
+          <span className="text-text-secondary text-[10px]">terminated</span>
+        )}
+        {result?.success === false && (
+          <span className="text-danger text-[10px]">{result.error}</span>
+        )}
+        <StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
+      </ToolHeader>
+    </ToolContainer>
+  );
+};
diff --git a/src/browser/components/tools/BashToolCall.tsx b/src/browser/components/tools/BashToolCall.tsx
index 36e4fcfa88..aad33a363e 100644
--- a/src/browser/components/tools/BashToolCall.tsx
+++ b/src/browser/components/tools/BashToolCall.tsx
@@ -11,10 +11,17 @@ import {
   DetailLabel,
   DetailContent,
   LoadingDots,
+  ToolIcon,
+  ErrorBox,
+  OutputPaths,
 } from "./shared/ToolPrimitives";
-import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
+import {
+  useToolExpansion,
+  getStatusDisplay,
+  formatDuration,
+  type ToolStatus,
+} from "./shared/toolUtils";
 import { cn } from "@/common/lib/utils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 
 interface BashToolCallProps {
   args: BashToolArgs;
@@ -23,13 +30,6 @@ interface BashToolCallProps {
   startedAt?: number;
 }
 
-function formatDuration(ms: number): string {
-  if (ms < 1000) {
-    return `${Math.round(ms)}ms`;
-  }
-  return `${Math.round(ms / 1000)}s`;
-}
-
 export const BashToolCall: React.FC<BashToolCallProps> = ({
   args,
   result,
@@ -59,35 +59,43 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
   }, [status, startedAt]);
 
   const isPending = status === "executing" || status === "pending";
+  const isBackground = args.run_in_background ?? (result && "backgroundProcessId" in result);
 
   return (
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>🔧</span>
-          <Tooltip>bash</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="🔧" toolName="bash" />
         <span className="text-text font-monospace max-w-96 truncate">{args.script}</span>
-        <span
-          className={cn(
-            "ml-2 text-[10px] whitespace-nowrap [@container(max-width:500px)]:hidden",
-            isPending ? "text-pending" : "text-text-secondary"
-          )}
-        >
-          timeout: {args.timeout_secs ?? BASH_DEFAULT_TIMEOUT_SECS}s
-          {result && ` • took ${formatDuration(result.wall_duration_ms)}`}
-          {!result && isPending && elapsedTime > 0 && ` • ${formatDuration(elapsedTime)}`}
-        </span>
-        {result && (
-          <span
-            className={cn(
-              "ml-2 inline-block shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap",
-              result.exitCode === 0 ? "bg-success text-on-success" : "bg-danger text-on-danger"
-            )}
-          >
-            {result.exitCode}
+        {isBackground ? (
+          // Background mode: show background badge and optional display name
+          <span className="text-text-secondary ml-2 text-[10px] whitespace-nowrap">
+            ⚡ background{args.display_name && ` • ${args.display_name}`}
           </span>
+        ) : (
+          // Normal mode: show timeout and duration
+          <>
+            <span
+              className={cn(
+                "ml-2 text-[10px] whitespace-nowrap [@container(max-width:500px)]:hidden",
+                isPending ? "text-pending" : "text-text-secondary"
+              )}
+            >
+              timeout: {args.timeout_secs ?? BASH_DEFAULT_TIMEOUT_SECS}s
+              {result && ` • took ${formatDuration(result.wall_duration_ms)}`}
+              {!result && isPending && elapsedTime > 0 && ` • ${formatDuration(elapsedTime)}`}
+            </span>
+            {result && (
+              <span
+                className={cn(
+                  "ml-2 inline-block shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap",
+                  result.exitCode === 0 ? "bg-success text-on-success" : "bg-danger text-on-danger"
+                )}
+              >
+                {result.exitCode}
+              </span>
+            )}
+          </>
         )}
         <StatusIndicator status={status}>{getStatusDisplay(status)}</StatusIndicator>
       </ToolHeader>
@@ -104,19 +112,26 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-                    {result.error}
-                  </div>
+                  <ErrorBox>{result.error}</ErrorBox>
                 </DetailSection>
               )}
 
-              {result.output && (
+              {"backgroundProcessId" in result ? (
+                // Background process: show file paths
                 <DetailSection>
-                  <DetailLabel>Output</DetailLabel>
-                  <pre className="bg-code-bg border-success m-0 max-h-[200px] overflow-y-auto rounded border-l-2 px-2 py-1.5 text-[11px] leading-[1.4] break-words whitespace-pre-wrap">
-                    {result.output}
-                  </pre>
+                  <DetailLabel>Output Files</DetailLabel>
+                  <OutputPaths stdout={result.stdout_path} stderr={result.stderr_path} />
                 </DetailSection>
+              ) : (
+                // Normal process: show output
+                result.output && (
+                  <DetailSection>
+                    <DetailLabel>Output</DetailLabel>
+                    <pre className="bg-code-bg border-success m-0 max-h-[200px] overflow-y-auto rounded border-l-2 px-2 py-1.5 text-[11px] leading-[1.4] break-words whitespace-pre-wrap">
+                      {result.output}
+                    </pre>
+                  </DetailSection>
+                )
               )}
             </>
           )}
diff --git a/src/browser/components/tools/FileEditToolCall.tsx b/src/browser/components/tools/FileEditToolCall.tsx
index e5ee77edc2..ff2c52d518 100644
--- a/src/browser/components/tools/FileEditToolCall.tsx
+++ b/src/browser/components/tools/FileEditToolCall.tsx
@@ -18,10 +18,11 @@ import {
   DetailSection,
   DetailLabel,
   LoadingDots,
+  ToolIcon,
+  ErrorBox,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
 import { useCopyToClipboard } from "@/browser/hooks/useCopyToClipboard";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { DiffContainer, DiffRenderer, SelectableDiffRenderer } from "../shared/DiffRenderer";
 import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
 
@@ -84,11 +85,7 @@ function renderDiff(
       </React.Fragment>
     ));
   } catch (error) {
-    return (
-      <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-        Failed to parse diff: {String(error)}
-      </div>
-    );
+    return <ErrorBox>Failed to parse diff: {String(error)}</ErrorBox>;
   }
 }
 
@@ -135,10 +132,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
           className="hover:text-text flex flex-1 cursor-pointer items-center gap-2"
         >
           <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-          <TooltipWrapper inline>
-            <span>✏️</span>
-            <Tooltip>{toolName}</Tooltip>
-          </TooltipWrapper>
+          <ToolIcon emoji="✏️" toolName={toolName} />
           <div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
             <FileIcon filePath={filePath} className="text-[15px] leading-none" />
             <span className="font-monospace truncate">{filePath}</span>
@@ -161,9 +155,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-                    {result.error}
-                  </div>
+                  <ErrorBox>{result.error}</ErrorBox>
                 </DetailSection>
               )}
 
diff --git a/src/browser/components/tools/FileReadToolCall.tsx b/src/browser/components/tools/FileReadToolCall.tsx
index 32886db515..074cb7457e 100644
--- a/src/browser/components/tools/FileReadToolCall.tsx
+++ b/src/browser/components/tools/FileReadToolCall.tsx
@@ -11,9 +11,10 @@ import {
   DetailLabel,
   DetailContent,
   LoadingDots,
+  ToolIcon,
+  ErrorBox,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 
 interface FileReadToolCallProps {
   args: FileReadToolArgs;
@@ -79,10 +80,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
     <ToolContainer expanded={expanded} className="@container">
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>📖</span>
-          <Tooltip>file_read</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="📖" toolName="file_read" />
         <div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
           <FileIcon filePath={filePath} className="text-[15px] leading-none" />
           <span className="font-monospace truncate">{filePath}</span>
@@ -125,9 +123,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-                    {result.error}
-                  </div>
+                  <ErrorBox>{result.error}</ErrorBox>
                 </DetailSection>
               )}
 
diff --git a/src/browser/components/tools/StatusSetToolCall.tsx b/src/browser/components/tools/StatusSetToolCall.tsx
index 46717b7997..4643b64ea2 100644
--- a/src/browser/components/tools/StatusSetToolCall.tsx
+++ b/src/browser/components/tools/StatusSetToolCall.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import type { StatusSetToolArgs, StatusSetToolResult } from "@/common/types/tools";
-import { ToolContainer, ToolHeader, StatusIndicator } from "./shared/ToolPrimitives";
+import { ToolContainer, ToolHeader, StatusIndicator, ToolIcon } from "./shared/ToolPrimitives";
 import { getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 
 interface StatusSetToolCallProps {
   args: StatusSetToolArgs;
@@ -26,10 +25,7 @@ export const StatusSetToolCall: React.FC<StatusSetToolCallProps> = ({
   return (
     <ToolContainer expanded={false}>
       <ToolHeader>
-        <TooltipWrapper inline>
-          <span>{args.emoji}</span>
-          <Tooltip>status_set</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji={args.emoji} toolName="status_set" />
         <span className="text-muted-foreground italic">{args.message}</span>
         {errorMessage && <span className="text-error-foreground">({errorMessage})</span>}
         <StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
diff --git a/src/browser/components/tools/TodoToolCall.tsx b/src/browser/components/tools/TodoToolCall.tsx
index b8238b5d8e..a1664eb6d0 100644
--- a/src/browser/components/tools/TodoToolCall.tsx
+++ b/src/browser/components/tools/TodoToolCall.tsx
@@ -6,9 +6,9 @@ import {
   ExpandIcon,
   StatusIndicator,
   ToolDetails,
+  ToolIcon,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { TodoList } from "../TodoList";
 
 interface TodoToolCallProps {
@@ -29,10 +29,7 @@ export const TodoToolCall: React.FC<TodoToolCallProps> = ({
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>📋</span>
-          <Tooltip>todo_write</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="📋" toolName="todo_write" />
         <StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
       </ToolHeader>
 
diff --git a/src/browser/components/tools/WebFetchToolCall.tsx b/src/browser/components/tools/WebFetchToolCall.tsx
index 2d4f17eda7..b81924e857 100644
--- a/src/browser/components/tools/WebFetchToolCall.tsx
+++ b/src/browser/components/tools/WebFetchToolCall.tsx
@@ -9,9 +9,10 @@ import {
   DetailSection,
   DetailLabel,
   LoadingDots,
+  ToolIcon,
+  ErrorBox,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { MarkdownRenderer } from "../Messages/MarkdownRenderer";
 
 interface WebFetchToolCallProps {
@@ -51,10 +52,7 @@ export const WebFetchToolCall: React.FC<WebFetchToolCallProps> = ({
     <ToolContainer expanded={expanded} className="@container">
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
-        <TooltipWrapper inline>
-          <span>🌐</span>
-          <Tooltip>web_fetch</Tooltip>
-        </TooltipWrapper>
+        <ToolIcon emoji="🌐" toolName="web_fetch" />
         <div className="text-text flex max-w-96 min-w-0 items-center gap-1.5">
           <span className="font-monospace truncate">{domain}</span>
         </div>
@@ -96,9 +94,7 @@ export const WebFetchToolCall: React.FC<WebFetchToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
-                    {result.error}
-                  </div>
+                  <ErrorBox>{result.error}</ErrorBox>
                 </DetailSection>
               )}
 
diff --git a/src/browser/components/tools/shared/ToolPrimitives.tsx b/src/browser/components/tools/shared/ToolPrimitives.tsx
index 7fccb39520..22368bd00e 100644
--- a/src/browser/components/tools/shared/ToolPrimitives.tsx
+++ b/src/browser/components/tools/shared/ToolPrimitives.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { cn } from "@/common/lib/utils";
+import { TooltipWrapper, Tooltip } from "../../Tooltip";
 
 /**
  * Shared styled components for tool UI
@@ -157,3 +158,67 @@ export const HeaderButton: React.FC<HeaderButtonProps> = ({ active, className, .
     {...props}
   />
 );
+
+/**
+ * Tool icon with tooltip showing tool name
+ */
+interface ToolIconProps {
+  emoji: string;
+  toolName: string;
+}
+
+export const ToolIcon: React.FC<ToolIconProps> = ({ emoji, toolName }) => (
+  <TooltipWrapper inline>
+    <span>{emoji}</span>
+    <Tooltip>{toolName}</Tooltip>
+  </TooltipWrapper>
+);
+
+/**
+ * Error display box with danger styling
+ */
+export const ErrorBox: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn(
+      "text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]",
+      className
+    )}
+    {...props}
+  />
+);
+
+/**
+ * Output file paths display (stdout/stderr)
+ * @param compact - Use smaller text without background (for inline use in cards)
+ */
+interface OutputPathsProps {
+  stdout: string;
+  stderr: string;
+  compact?: boolean;
+}
+
+export const OutputPaths: React.FC<OutputPathsProps> = ({ stdout, stderr, compact }) =>
+  compact ? (
+    <div className="text-text-secondary mt-1 space-y-0.5 text-[10px]">
+      <div>
+        <span className="opacity-60">stdout:</span> {stdout}
+      </div>
+      <div>
+        <span className="opacity-60">stderr:</span> {stderr}
+      </div>
+    </div>
+  ) : (
+    <div className="bg-code-bg space-y-1 rounded px-2 py-1.5 font-mono text-[11px]">
+      <div>
+        <span className="text-text-secondary">stdout:</span>{" "}
+        <span className="text-text">{stdout}</span>
+      </div>
+      <div>
+        <span className="text-text-secondary">stderr:</span>{" "}
+        <span className="text-text">{stderr}</span>
+      </div>
+    </div>
+  );
diff --git a/src/browser/components/tools/shared/toolUtils.tsx b/src/browser/components/tools/shared/toolUtils.tsx
index 966b0f17cf..1bcf262ea2 100644
--- a/src/browser/components/tools/shared/toolUtils.tsx
+++ b/src/browser/components/tools/shared/toolUtils.tsx
@@ -64,3 +64,13 @@ export function formatValue(value: unknown): string {
     return "[Complex Object - Cannot Stringify]";
   }
 }
+
+/**
+ * Format duration in human-readable form (ms, s, m, h)
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
+  if (ms < 3600000) return `${Math.round(ms / 60000)}m`;
+  return `${Math.round(ms / 3600000)}h`;
+}