🤖 feat: background bash with event-based API and blocking output

.storybook/mocks/orpc.ts

@@ -27,6 +27,19 @@ export interface MockORPCClientOptions {
   providersList?: string[];
   /** Mock for projects.remove - return error string to simulate failure */
   onProjectRemove?: (projectPath: string) => { success: true } | { success: false; error: string };
+  /** Background processes per workspace */
+  backgroundProcesses?: Map<
+    string,
+    Array<{
+      id: string;
+      pid: number;
+      script: string;
+      displayName?: string;
+      startTime: number;
+      status: "running" | "exited" | "killed" | "failed";
+      exitCode?: number;
+    }>
+  >;
 }
 
 /**
@@ -55,6 +68,7 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
     providersConfig = {},
     providersList = [],
     onProjectRemove,
+    backgroundProcesses = new Map(),
   } = options;
 
   const workspaceMap = new Map(workspaces.map((w) => [w.id, w]));
@@ -178,6 +192,19 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
           await new Promise(() => {}); // Never resolves
         },
       },
+      backgroundBashes: {
+        subscribe: async function* (input: { workspaceId: string }) {
+          // Yield initial state
+          yield {
+            processes: backgroundProcesses.get(input.workspaceId) ?? [],
+            foregroundToolCallIds: [],
+          };
+          // Then hang forever (like a real subscription)
+          await new Promise(() => {});
+        },
+        terminate: async () => ({ success: true, data: undefined }),
+        sendToBackground: async () => ({ success: true, data: undefined }),
+      },
     },
     window: {
       setTitle: async () => undefined,

src/browser/components/AIView.tsx

@@ -51,6 +51,8 @@ import { evictModelFromLRU } from "@/browser/hooks/useModelLRU";
 import { QueuedMessage } from "./Messages/QueuedMessage";
 import { CompactionWarning } from "./CompactionWarning";
 import { ConcurrentLocalWarning } from "./ConcurrentLocalWarning";
+import { BackgroundProcessesBanner } from "./BackgroundProcessesBanner";
+import { useBackgroundBashHandlers } from "@/browser/hooks/useBackgroundBashHandlers";
 import { checkAutoCompaction } from "@/browser/utils/compaction/autoCompactionCheck";
 import { executeCompaction } from "@/browser/utils/chatCommands";
 import { useProviderOptions } from "@/browser/hooks/useProviderOptions";
@@ -61,6 +63,7 @@ import { useAPI } from "@/browser/contexts/API";
 import { useReviews } from "@/browser/hooks/useReviews";
 import { ReviewsBanner } from "./ReviewsBanner";
 import type { ReviewNoteData } from "@/common/types/review";
+import { PopoverError } from "./PopoverError";
 
 interface AIViewProps {
   workspaceId: string;
@@ -119,6 +122,15 @@ const AIViewInner: React.FC<AIViewProps> = ({
 
   // Reviews state
   const reviews = useReviews(workspaceId);
+
+  const {
+    processes: backgroundBashes,
+    handleTerminate: handleTerminateBackgroundBash,
+    foregroundToolCallIds,
+    handleSendToBackground: handleSendBashToBackground,
+    handleMessageSentBackground,
+    error: backgroundBashError,
+  } = useBackgroundBashHandlers(api, workspaceId);
   const { options } = useProviderOptions();
   const use1M = options.anthropic?.use1MContext ?? false;
   // Get pending model for auto-compaction settings (threshold is per-model)
@@ -312,13 +324,17 @@ const AIViewInner: React.FC<AIViewProps> = ({
   }, []);
 
   const handleMessageSent = useCallback(() => {
+    // Auto-background any running foreground bash when user sends a new message
+    // This prevents the user from waiting for the bash to complete before their message is processed
+    handleMessageSentBackground();
+
     // Enable auto-scroll when user sends a message
     setAutoScroll(true);
 
     // Reset autoRetry when user sends a message
     // User action = clear intent: "I'm actively using this workspace"
     setAutoRetry(true);
-  }, [setAutoScroll, setAutoRetry]);
+  }, [setAutoScroll, setAutoRetry, handleMessageSentBackground]);
 
   const handleClearHistory = useCallback(
     async (percentage = 1.0) => {
@@ -573,6 +589,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
                               msg.toolName === "propose_plan" &&
                               msg.id === latestProposePlanId
                             }
+                            foregroundBashToolCallIds={foregroundToolCallIds}
+                            onSendBashToBackground={handleSendBashToBackground}
                           />
                         </div>
                         {isAtCutoff && (
@@ -647,6 +665,10 @@ const AIViewInner: React.FC<AIViewProps> = ({
             onCompactClick={handleCompactClick}
           />
         )}
+        <BackgroundProcessesBanner
+          processes={backgroundBashes}
+          onTerminate={handleTerminateBackgroundBash}
+        />
         <ReviewsBanner workspaceId={workspaceId} />
         <ChatInput
           variant="workspace"
@@ -683,6 +705,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
         onReviewNote={handleReviewNote} // Pass review note handler to append to chat
         isCreating={status === "creating"} // Workspace still being set up
       />
+
+      <PopoverError
+        error={backgroundBashError.error}
+        prefix="Failed to terminate:"
+        onDismiss={backgroundBashError.clearError}
+      />
     </div>
   );
 };

src/browser/components/BackgroundProcessesBanner.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { Terminal, X, ChevronDown, ChevronRight } from "lucide-react";
+import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
+import type { BackgroundProcessInfo } from "@/common/orpc/schemas/api";
+import { cn } from "@/common/lib/utils";
+import { formatDuration } from "./tools/shared/toolUtils";
+
+/**
+ * Truncate script to reasonable display length.
+ */
+function truncateScript(script: string, maxLength = 60): string {
+  // First line only, truncated
+  const firstLine = script.split("\n")[0] ?? script;
+  if (firstLine.length <= maxLength) {
+    return firstLine;
+  }
+  return firstLine.slice(0, maxLength - 3) + "...";
+}
+
+interface BackgroundProcessesBannerProps {
+  processes: BackgroundProcessInfo[];
+  onTerminate: (processId: string) => void;
+}
+
+/**
+ * Banner showing running background processes.
+ * Displays "N running bashes" which expands on click to show details.
+ */
+export const BackgroundProcessesBanner: React.FC<BackgroundProcessesBannerProps> = (props) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [, setTick] = useState(0);
+
+  // Filter to only running processes
+  const runningProcesses = props.processes.filter((p) => p.status === "running");
+  const count = runningProcesses.length;
+
+  // Update duration display every second when expanded
+  useEffect(() => {
+    if (!isExpanded || count === 0) return;
+    const interval = setInterval(() => setTick((t) => t + 1), 1000);
+    return () => clearInterval(interval);
+  }, [isExpanded, count]);
+
+  const { onTerminate } = props;
+  const handleTerminate = useCallback(
+    (processId: string, event: React.MouseEvent) => {
+      event.stopPropagation();
+      onTerminate(processId);
+    },
+    [onTerminate]
+  );
+
+  const handleToggle = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  // Don't render if no running processes
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-border bg-dark border-t px-[15px]">
+      {/* Collapsed banner - thin stripe, content aligned with chat */}
+      <button
+        type="button"
+        onClick={handleToggle}
+        className="group mx-auto flex w-full max-w-4xl items-center gap-2 px-2 py-1 text-xs transition-colors"
+      >
+        <Terminal className="text-muted group-hover:text-secondary size-3.5 transition-colors" />
+        <span className="text-muted group-hover:text-secondary transition-colors">
+          <span className="font-medium">{count}</span>
+          {" background bash"}
+          {count !== 1 && "es"}
+        </span>
+        <div className="ml-auto">
+          {isExpanded ? (
+            <ChevronDown className="text-muted group-hover:text-secondary size-3.5 transition-colors" />
+          ) : (
+            <ChevronRight className="text-muted group-hover:text-secondary size-3.5 transition-colors" />
+          )}
+        </div>
+      </button>
+
+      {/* Expanded view - content aligned with chat */}
+      {isExpanded && (
+        <div className="border-border mx-auto max-h-48 max-w-4xl space-y-1.5 overflow-y-auto border-t py-2">
+          {runningProcesses.map((proc) => (
+            <div
+              key={proc.id}
+              className={cn(
+                "hover:bg-hover flex items-center justify-between gap-3 rounded px-2 py-1.5",
+                "transition-colors"
+              )}
+            >
+              <div className="min-w-0 flex-1">
+                <div className="text-foreground truncate font-mono text-xs" title={proc.script}>
+                  {proc.displayName ?? truncateScript(proc.script)}
+                </div>
+                <div className="text-muted font-mono text-[10px]">pid {proc.pid}</div>
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                <span className="text-muted text-[10px]">
+                  {formatDuration(Date.now() - proc.startTime)}
+                </span>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={(e) => handleTerminate(proc.id, e)}
+                      className="text-muted hover:text-error rounded p-1 transition-colors"
+                    >
+                      <X size={14} />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Terminate process</TooltipContent>
+                </Tooltip>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/browser/components/Messages/MessageRenderer.tsx

@@ -22,6 +22,10 @@ interface MessageRendererProps {
   onReviewNote?: (data: ReviewNoteData) => void;
   /** Whether this message is the latest propose_plan tool call (for external edit detection) */
   isLatestProposePlan?: boolean;
+  /** Set of tool call IDs of foreground bashes */
+  foregroundBashToolCallIds?: Set<string>;
+  /** Callback to send a foreground bash to background */
+  onSendBashToBackground?: (toolCallId: string) => void;
 }
 
 // Memoized to prevent unnecessary re-renders when parent (AIView) updates
@@ -34,6 +38,8 @@ export const MessageRenderer = React.memo<MessageRendererProps>(
     isCompacting,
     onReviewNote,
     isLatestProposePlan,
+    foregroundBashToolCallIds,
+    onSendBashToBackground,
   }) => {
     // Route based on message type
     switch (message.type) {
@@ -63,6 +69,8 @@ export const MessageRenderer = React.memo<MessageRendererProps>(
             workspaceId={workspaceId}
             onReviewNote={onReviewNote}
             isLatestProposePlan={isLatestProposePlan}
+            foregroundBashToolCallIds={foregroundBashToolCallIds}
+            onSendBashToBackground={onSendBashToBackground}
           />
         );
       case "reasoning":

src/browser/components/Messages/ToolMessage.tsx

@@ -11,13 +11,16 @@ import { StatusSetToolCall } from "../tools/StatusSetToolCall";
 import { WebFetchToolCall } from "../tools/WebFetchToolCall";
 import { BashBackgroundListToolCall } from "../tools/BashBackgroundListToolCall";
 import { BashBackgroundTerminateToolCall } from "../tools/BashBackgroundTerminateToolCall";
+import { BashOutputToolCall } from "../tools/BashOutputToolCall";
 import type {
   BashToolArgs,
   BashToolResult,
   BashBackgroundListArgs,
   BashBackgroundListResult,
   BashBackgroundTerminateArgs,
   BashBackgroundTerminateResult,
+  BashOutputToolArgs,
+  BashOutputToolResult,
   FileReadToolArgs,
   FileReadToolResult,
   FileEditReplaceStringToolArgs,
@@ -45,6 +48,10 @@ interface ToolMessageProps {
   onReviewNote?: (data: ReviewNoteData) => void;
   /** Whether this is the latest propose_plan in the conversation */
   isLatestProposePlan?: boolean;
+  /** Set of tool call IDs of foreground bashes */
+  foregroundBashToolCallIds?: Set<string>;
+  /** Callback to send a foreground bash to background */
+  onSendBashToBackground?: (toolCallId: string) => void;
 }
 
 // Type guards using Zod schemas for single source of truth
@@ -113,22 +120,36 @@ function isBashBackgroundTerminateTool(
   return TOOL_DEFINITIONS.bash_background_terminate.schema.safeParse(args).success;
 }
 
+function isBashOutputTool(toolName: string, args: unknown): args is BashOutputToolArgs {
+  if (toolName !== "bash_output") return false;
+  return TOOL_DEFINITIONS.bash_output.schema.safeParse(args).success;
+}
+
 export const ToolMessage: React.FC<ToolMessageProps> = ({
   message,
   className,
   workspaceId,
   onReviewNote,
   isLatestProposePlan,
+  foregroundBashToolCallIds,
+  onSendBashToBackground,
 }) => {
   // Route to specialized components based on tool name
   if (isBashTool(message.toolName, message.args)) {
+    // Only show "Background" button if this specific tool call is a foreground process
+    const canSendToBackground = foregroundBashToolCallIds?.has(message.toolCallId) ?? false;
+    const toolCallId = message.toolCallId;
     return (
       <div className={className}>
         <BashToolCall
           args={message.args}
           result={message.result as BashToolResult | undefined}
           status={message.status}
           startedAt={message.timestamp}
+          canSendToBackground={canSendToBackground}
+          onSendToBackground={
+            onSendBashToBackground ? () => onSendBashToBackground(toolCallId) : undefined
+          }
         />
       </div>
     );
@@ -262,6 +283,18 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
     );
   }
 
+  if (isBashOutputTool(message.toolName, message.args)) {
+    return (
+      <div className={className}>
+        <BashOutputToolCall
+          args={message.args}
+          result={message.result as BashOutputToolResult | undefined}
+          status={message.status}
+        />
+      </div>
+    );
+  }
+
   // Fallback to generic tool call
   return (
     <div className={className}>