🤖 feat: live peek bash stdout/stderr

Change-Id: I9cd53599a249a4d0acf49808e870788c159d55dd
Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/browser/components/Messages/ToolMessage.tsx

@@ -164,6 +164,8 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
     return (
       <div className={className}>
         <BashToolCall
+          workspaceId={workspaceId}
+          toolCallId={message.toolCallId}
           args={message.args}
           result={message.result as BashToolResult | undefined}
           status={message.status}

src/browser/components/tools/BashToolCall.tsx

@@ -23,9 +23,12 @@ import {
   type ToolStatus,
 } from "./shared/toolUtils";
 import { cn } from "@/common/lib/utils";
+import { useBashToolLiveOutput } from "@/browser/stores/WorkspaceStore";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
 
 interface BashToolCallProps {
+  workspaceId?: string;
+  toolCallId?: string;
   args: BashToolArgs;
   result?: BashToolResult;
   status?: ToolStatus;
@@ -37,6 +40,8 @@ interface BashToolCallProps {
 }
 
 export const BashToolCall: React.FC<BashToolCallProps> = ({
+  workspaceId,
+  toolCallId,
   args,
   result,
   status = "pending",
@@ -46,6 +51,34 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
 }) => {
   const { expanded, toggleExpanded } = useToolExpansion();
   const [elapsedTime, setElapsedTime] = useState(0);
+
+  const liveOutput = useBashToolLiveOutput(workspaceId, toolCallId);
+
+  const stdoutRef = useRef<HTMLPreElement>(null);
+  const stderrRef = useRef<HTMLPreElement>(null);
+  const stdoutPinnedRef = useRef(true);
+  const stderrPinnedRef = useRef(true);
+
+  const updatePinned = (el: HTMLPreElement, pinnedRef: React.MutableRefObject<boolean>) => {
+    const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    pinnedRef.current = distanceToBottom < 40;
+  };
+
+  useEffect(() => {
+    const el = stdoutRef.current;
+    if (!el) return;
+    if (stdoutPinnedRef.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [liveOutput?.stdout]);
+
+  useEffect(() => {
+    const el = stderrRef.current;
+    if (!el) return;
+    if (stderrPinnedRef.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [liveOutput?.stderr]);
   const startTimeRef = useRef<number>(startedAt ?? Date.now());
 
   // Track elapsed time for pending/executing status
@@ -74,6 +107,12 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
   const effectiveStatus: ToolStatus =
     status === "completed" && result && "backgroundProcessId" in result ? "backgrounded" : status;
 
+  const resultHasOutput = typeof (result as { output?: unknown } | undefined)?.output === "string";
+  const showLiveOutput = Boolean(
+    liveOutput && !isBackground && (status === "executing" || !resultHasOutput)
+  );
+  const liveLabelSuffix = status === "executing" ? " (live)" : " (tail)";
+
   return (
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
@@ -137,6 +176,43 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
 
       {expanded && (
         <ToolDetails>
+          {showLiveOutput && liveOutput && (
+            <>
+              {liveOutput.truncated && (
+                <div className="text-muted px-2 text-[10px] italic">
+                  Live output truncated (showing last ~1MB)
+                </div>
+              )}
+
+              <DetailSection>
+                <DetailLabel>{`Stdout${liveLabelSuffix}`}</DetailLabel>
+                <DetailContent
+                  ref={stdoutRef}
+                  onScroll={(e) => updatePinned(e.currentTarget, stdoutPinnedRef)}
+                  className={cn(
+                    "px-2 py-1.5",
+                    liveOutput.stdout.length === 0 && "text-muted italic"
+                  )}
+                >
+                  {liveOutput.stdout.length > 0 ? liveOutput.stdout : "No output yet"}
+                </DetailContent>
+              </DetailSection>
+
+              <DetailSection>
+                <DetailLabel>{`Stderr${liveLabelSuffix}`}</DetailLabel>
+                <DetailContent
+                  ref={stderrRef}
+                  onScroll={(e) => updatePinned(e.currentTarget, stderrPinnedRef)}
+                  className={cn(
+                    "px-2 py-1.5",
+                    liveOutput.stderr.length === 0 && "text-muted italic"
+                  )}
+                >
+                  {liveOutput.stderr.length > 0 ? liveOutput.stderr : "No output yet"}
+                </DetailContent>
+              </DetailSection>
+            </>
+          )}
           <DetailSection>
             <DetailLabel>Script</DetailLabel>
             <DetailContent className="px-2 py-1.5">{args.script}</DetailContent>

src/browser/components/tools/shared/ToolPrimitives.tsx

@@ -118,19 +118,21 @@ export const DetailLabel: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   />
 );
 
-export const DetailContent: React.FC<React.HTMLAttributes<HTMLPreElement>> = ({
-  className,
-  ...props
-}) => (
-  <pre
-    className={cn(
-      "m-0 bg-code-bg rounded-sm text-[11px] leading-relaxed whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto",
-      className
-    )}
-    {...props}
-  />
+export const DetailContent = React.forwardRef<HTMLPreElement, React.HTMLAttributes<HTMLPreElement>>(
+  ({ className, ...props }, ref) => (
+    <pre
+      ref={ref}
+      className={cn(
+        "m-0 bg-code-bg rounded-sm text-[11px] leading-relaxed whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
 );
 
+DetailContent.displayName = "DetailContent";
+
 export const LoadingDots: React.FC<React.HTMLAttributes<HTMLSpanElement>> = ({
   className,
   ...props

src/browser/stores/WorkspaceStore.test.ts

@@ -626,4 +626,89 @@ describe("WorkspaceStore", () => {
       expect(state2.loading).toBe(true); // Fresh workspace, not caught up
     });
   });
+
+  describe("bash-output events", () => {
+    it("retains live output when bash tool result has no output", async () => {
+      const workspaceId = "bash-output-workspace-1";
+
+      mockOnChat.mockImplementation(async function* (): AsyncGenerator<
+        WorkspaceChatMessage,
+        void,
+        unknown
+      > {
+        yield { type: "caught-up" };
+        await Promise.resolve();
+        yield {
+          type: "bash-output",
+          workspaceId,
+          toolCallId: "call-1",
+          text: "out\n",
+          isError: false,
+          timestamp: 1,
+        };
+        yield {
+          type: "bash-output",
+          workspaceId,
+          toolCallId: "call-1",
+          text: "err\n",
+          isError: true,
+          timestamp: 2,
+        };
+        // Simulate tmpfile overflow: tool result has no output field.
+        yield {
+          type: "tool-call-end",
+          workspaceId,
+          messageId: "m1",
+          toolCallId: "call-1",
+          toolName: "bash",
+          result: { success: false, error: "overflow", exitCode: -1, wall_duration_ms: 1 },
+          timestamp: 3,
+        };
+      });
+
+      createAndAddWorkspace(store, workspaceId);
+      await new Promise((resolve) => setTimeout(resolve, 10));
+
+      const live = store.getBashToolLiveOutput(workspaceId, "call-1");
+      expect(live).not.toBeNull();
+      expect(live?.stdout).toContain("out");
+      expect(live?.stderr).toContain("err");
+    });
+
+    it("clears live output when bash tool result includes output", async () => {
+      const workspaceId = "bash-output-workspace-2";
+
+      mockOnChat.mockImplementation(async function* (): AsyncGenerator<
+        WorkspaceChatMessage,
+        void,
+        unknown
+      > {
+        yield { type: "caught-up" };
+        await Promise.resolve();
+        yield {
+          type: "bash-output",
+          workspaceId,
+          toolCallId: "call-2",
+          text: "out\n",
+          isError: false,
+          timestamp: 1,
+        };
+        yield {
+          type: "tool-call-end",
+          workspaceId,
+          messageId: "m2",
+          toolCallId: "call-2",
+          toolName: "bash",
+          result: { success: true, output: "done", exitCode: 0, wall_duration_ms: 1 },
+          timestamp: 2,
+        };
+      });
+
+      createAndAddWorkspace(store, workspaceId);
+      await new Promise((resolve) => setTimeout(resolve, 10));
+
+      const live = store.getBashToolLiveOutput(workspaceId, "call-2");
+      expect(live).toBeNull();
+    });
+  });
 });