feat(site): add specialized renderer for process_output tool in agent chats (#22628)

Adds a `ProcessOutputTool` component that renders `process_output` tool
calls with a clean terminal-style output block instead of falling
through to the generic JSON renderer.

## Changes

**New file:** `ProcessOutputTool.tsx`
- Output shown directly with no header
- Copy button and status indicators float top-right on hover
- Collapsible output with the same expand/collapse chevron bar used by
`ExecuteTool`
- Exit code badge shown only for non-zero exits
- Spinner shown while process is still running

**Modified files:**
- `Tool.tsx` — `ProcessOutputRenderer` + registered in `toolRenderers`
map
- `ToolIcon.tsx` — `process_output` falls through to `TerminalIcon`
- `ToolLabel.tsx` — shows "Reading process output" label

site/src/components/ai-elements/tool/ProcessOutputTool.tsx

@@ -0,0 +1,112 @@
+import { CopyButton } from "components/CopyButton/CopyButton";
+import { ScrollArea } from "components/ScrollArea/ScrollArea";
+import { ChevronDownIcon, LoaderIcon } from "lucide-react";
+import type React from "react";
+import { useRef, useState } from "react";
+import { cn } from "utils/cn";
+import { COLLAPSED_OUTPUT_HEIGHT } from "./utils";
+
+/**
+ * Specialized rendering for `process_output` tool calls. Shows
+ * process output directly in a terminal-style block with a
+ * collapsible preview and an expand chevron at the bottom.
+ */
+export const ProcessOutputTool: React.FC<{
+	output: string;
+	isRunning: boolean;
+	exitCode: number | null;
+	isError: boolean;
+}> = ({ output, isRunning, exitCode, isError }) => {
+	const [expanded, setExpanded] = useState(false);
+	const outputRef = useRef<HTMLPreElement | null>(null);
+	const hasOutput = output.length > 0;
+
+	const [overflows, setOverflows] = useState(false);
+	const measureRef = (node: HTMLPreElement | null) => {
+		outputRef.current = node;
+		if (node) {
+			setOverflows(node.scrollHeight > COLLAPSED_OUTPUT_HEIGHT);
+		}
+	};
+
+	const showExitCode = exitCode !== null && exitCode !== 0;
+
+	return (
+		<div className="group/proc w-full overflow-hidden rounded-md border border-solid border-border-default bg-surface-primary">
+			{hasOutput ? (
+				<>
+					<div className="relative">
+						<ScrollArea
+							className="text-2xs"
+							viewportClassName={expanded ? "max-h-96" : ""}
+							scrollBarClassName="w-1.5"
+						>
+							<pre
+								ref={measureRef}
+								style={
+									expanded
+										? undefined
+										: { maxHeight: COLLAPSED_OUTPUT_HEIGHT, overflow: "hidden" }
+								}
+								className={cn(
+									"m-0 border-0 whitespace-pre-wrap break-all bg-transparent px-2.5 py-2 font-mono text-xs",
+									isError
+										? "text-content-destructive"
+										: "text-content-secondary",
+								)}
+							>
+								{output}
+							</pre>
+						</ScrollArea>
+						<div className="absolute right-1 top-0.5 flex items-center gap-1 opacity-0 transition-opacity group-hover/proc:opacity-100">
+							{isRunning && (
+								<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
+							)}
+							{showExitCode && (
+								<span className="rounded px-1.5 py-0.5 font-mono text-2xs leading-none bg-surface-red text-content-destructive">
+									exit {exitCode}
+								</span>
+							)}
+							<CopyButton text={output} label="Copy output" />
+						</div>
+					</div>
+
+					{/* Expand / collapse toggle at the bottom */}
+					{overflows && (
+						<div
+							role="button"
+							tabIndex={0}
+							aria-expanded={expanded}
+							onClick={() => setExpanded((v) => !v)}
+							onKeyDown={(e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									setExpanded((v) => !v);
+								}
+							}}
+							className="flex w-full cursor-pointer items-center justify-center py-0.5 text-content-secondary transition-colors hover:bg-surface-secondary hover:text-content-primary"
+							aria-label={expanded ? "Collapse output" : "Expand output"}
+						>
+							<ChevronDownIcon
+								className={cn(
+									"h-3 w-3 transition-transform",
+									expanded && "rotate-180",
+								)}
+							/>
+						</div>
+					)}
+				</>
+			) : (
+				<div className="flex items-center gap-1 px-2.5 py-1.5">
+					{isRunning && (
+						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
+					)}
+					{showExitCode && (
+						<span className="rounded px-1.5 py-0.5 font-mono text-2xs leading-none bg-surface-red text-content-destructive">
+							exit {exitCode}
+						</span>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};

site/src/components/ai-elements/tool/Tool.tsx

@@ -13,6 +13,7 @@ import {
 	WaitForExternalAuthTool,
 } from "./ExecuteTool";
 import { ListTemplatesTool } from "./ListTemplatesTool";
+import { ProcessOutputTool } from "./ProcessOutputTool";
 import { ReadFileTool } from "./ReadFileTool";
 import { ReadTemplateTool } from "./ReadTemplateTool";
 import { SubagentTool } from "./SubagentTool";
@@ -105,6 +106,29 @@ const ExecuteRenderer: FC<ToolRendererProps> = ({
 	);
 };
 
+const ProcessOutputRenderer: FC<ToolRendererProps> = ({
+	status,
+	result,
+	isError,
+}) => {
+	const rec = asRecord(result);
+	const output = rec ? asString(rec.output).trim() : "";
+	const exitCode = rec
+		? rec.exit_code !== undefined && rec.exit_code !== null
+			? Number(rec.exit_code)
+			: null
+		: null;
+
+	return (
+		<ProcessOutputTool
+			output={output}
+			isRunning={status === "running"}
+			exitCode={exitCode}
+			isError={isError}
+		/>
+	);
+};
+
 const WaitForExternalAuthRenderer: FC<ToolRendererProps> = ({
 	status,
 	result,
@@ -424,6 +448,7 @@ const GenericToolRenderer: FC<ToolRendererProps> = ({
 
 const toolRenderers: Record<string, FC<ToolRendererProps>> = {
 	execute: ExecuteRenderer,
+	process_output: ProcessOutputRenderer,
 	wait_for_external_auth: WaitForExternalAuthRenderer,
 	read_file: ReadFileRenderer,
 	write_file: WriteFileRenderer,
@@ -461,7 +486,9 @@ export const Tool = memo(
 			<div
 				ref={ref}
 				className={cn(
-					name === "execute" ? "w-full py-0.5" : "py-0.5",
+					name === "execute" || name === "process_output"
+						? "w-full py-0.5"
+						: "py-0.5",
 					className,
 				)}
 				{...props}

site/src/components/ai-elements/tool/ToolIcon.tsx

@@ -17,6 +17,7 @@ export const ToolIcon: React.FC<{ name: string; isError: boolean }> = ({
 	const base = cn("h-4 w-4 shrink-0", color);
 	switch (name) {
 		case "execute":
+		case "process_output":
 			return <TerminalIcon className={base} />;
 		case "read_file":
 		case "list_templates":

site/src/components/ai-elements/tool/ToolLabel.tsx

@@ -25,6 +25,12 @@ export const ToolLabel: React.FC<{
 				</span>
 			);
 		}
+		case "process_output":
+			return (
+				<span className="truncate text-sm text-content-secondary">
+					Reading process output
+				</span>
+			);
 		case "read_file":
 			return (
 				<span className="truncate text-sm text-content-secondary">