@tangle-network/ui 11.15.3 → 11.16.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tangle-network/ui
 
+## 11.16.1
+
+### Patch Changes
+
+- c59ed11: `CommandPreview` prints a failed command's text once when the producer persisted it as both the output and the error.
+  
+  It also reads a JSON string as a `{ stdout, stderr, exitCode }` envelope only when every key is an envelope key, so a command whose own output is JSON with a `stdout` field is shown as printed, and an `error` status turns the exit badge red even when the retained exit code is 0.
+
+## 11.16.0
+
+### Minor Changes
+
+- 14c9406: `CommandPreview` renders a shell command as a terminal block: a `$ command` prompt line with its exit status, and stdout and stderr in separate regions on a dark inset that keeps its contrast in both themes. It reads the plain-string output a workflow persists as well as `{ stdout, stderr, exitCode }`, shows an exit-code badge only when a code is known, and is collapsed until opened (`defaultExpanded` opts out; the expanded tool row passes it).
+
 ## 11.15.3
 
 ### Patch Changes

package/dist/run/expanded-tool-detail.js

@@ -60,7 +60,10 @@ function formatOutput(value) {
 const ExpandedToolDetail = memo(({ part }) => {
 	const meta = getToolDisplayMetadata(part);
 	const { status, input, output, error } = part.state;
-	if (meta.displayVariant === "command") return /* @__PURE__ */ jsx(CommandPreview, { part });
+	if (meta.displayVariant === "command") return /* @__PURE__ */ jsx(CommandPreview, {
+		part,
+		defaultExpanded: true
+	});
 	if (meta.displayVariant === "write-file") return /* @__PURE__ */ jsx(WriteFilePreview, { part });
 	if (meta.displayVariant === "grep") return /* @__PURE__ */ jsx(GrepResultsPreview, { part });
 	if (meta.displayVariant === "glob") return /* @__PURE__ */ jsx(GlobResultsPreview, { part });

package/dist/tool-previews/command-preview.d.ts

@@ -2,10 +2,21 @@ import { ToolPart } from "../types/parts.js";
 //#region src/tool-previews/command-preview.d.ts
 export interface CommandPreviewProps {
   part: ToolPart;
+  /**
+   * Show the output without a click. Off by default: a run is read as a list of
+   * commands, and the output of the one that matters is a click away. A surface
+   * that is itself an expansion (an opened tool row) turns it on.
+   */
+  defaultExpanded?: boolean;
+  className?: string;
 }
 /**
- * Terminal-style command output preview.
- * Shows the command, exit code, and stdout/stderr with expand/collapse.
+ * One shell command as a terminal block: a `$ command` prompt line with its
+ * exit status, and stdout and stderr in separate regions below it.
+ *
+ * The block is always dark. It scopes the dark token set onto itself with
+ * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
+ * contrast they were designed with on a dark ground, in a light console too.
  */
-export declare const CommandPreview: import("react").MemoExoticComponent<({ part }: CommandPreviewProps) => import("react").JSX.Element>;
+export declare const CommandPreview: import("react").MemoExoticComponent<({ part, defaultExpanded, className }: CommandPreviewProps) => import("react").JSX.Element>;
 //#endregion

package/dist/tool-previews/command-preview.js

@@ -1,91 +1,192 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives.js";
-import { memo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronRight, Terminal } from "lucide-react";
+import { memo, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
 //#region src/tool-previews/command-preview.tsx
-/** Extract stdout/stderr/exitCode from tool output. */
+/** The input keys a shell tool names its command under. */
+const COMMAND_KEYS = [
+	"command",
+	"cmd",
+	"script",
+	"commandLine"
+];
+/** The command a shell tool ran, from a structured input or a raw string. */
+function commandOf(input) {
+	if (typeof input === "string") return input;
+	if (input && typeof input === "object") {
+		const obj = input;
+		for (const key of COMMAND_KEYS) {
+			const value = obj[key];
+			if (typeof value === "string" && value.length > 0) return value;
+		}
+	}
+	return "";
+}
+function finiteNumber(value) {
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+	if (typeof value === "string" && value.trim() !== "") {
+		const parsed = Number(value);
+		return Number.isFinite(parsed) ? parsed : void 0;
+	}
+}
+/**
+* Split a tool's output into stdout, stderr and an exit code.
+*
+* Accepts both shapes producers persist: a structured `{ stdout, stderr,
+* exitCode }` (or `output` / `exit_code` / `code`), and the plain string a
+* workflow stores. A string carries no exit code, so none is invented.
+*/
 function extractCommandOutput(output) {
-	if (!output) return {
+	if (output === void 0 || output === null) return {
 		stdout: "",
 		stderr: "",
-		exitCode: 0
-	};
-	if (typeof output === "string") return {
-		stdout: output,
-		stderr: "",
-		exitCode: 0
+		exitCode: void 0
 	};
-	if (typeof output === "object" && output !== null) {
-		const obj = output;
+	if (typeof output === "string") {
+		const parsed = parseStructured(output);
+		if (parsed) return parsed;
 		return {
-			stdout: String(obj.stdout ?? obj.output ?? ""),
-			stderr: String(obj.stderr ?? ""),
-			exitCode: Number(obj.exitCode ?? obj.exit_code ?? obj.code ?? 0)
+			stdout: output,
+			stderr: "",
+			exitCode: void 0
 		};
 	}
+	if (typeof output === "object") return fromObject(output);
 	return {
 		stdout: String(output),
 		stderr: "",
-		exitCode: 0
+		exitCode: void 0
 	};
 }
+function fromObject(obj) {
+	const text = (value) => value === void 0 || value === null ? "" : String(value);
+	return {
+		stdout: text(obj.stdout ?? obj.output),
+		stderr: text(obj.stderr),
+		exitCode: finiteNumber(obj.exitCode ?? obj.exit_code ?? obj.code)
+	};
+}
+/** The keys a serialized command result carries, and nothing else. */
+const ENVELOPE_KEYS = /* @__PURE__ */ new Set([
+	"stdout",
+	"stderr",
+	"output",
+	"exitCode",
+	"exit_code",
+	"code",
+	"signal",
+	"durationMs",
+	"duration_ms",
+	"timedOut",
+	"timed_out"
+]);
+/** A string that is a serialized `{ stdout, stderr, exitCode }` record. */
+function parseStructured(text) {
+	const trimmed = text.trimStart();
+	if (!trimmed.startsWith("{")) return void 0;
+	try {
+		const parsed = JSON.parse(trimmed);
+		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return;
+		const obj = parsed;
+		if (!("stdout" in obj) && !("stderr" in obj)) return void 0;
+		if (!Object.keys(obj).every((key) => ENVELOPE_KEYS.has(key))) return;
+		return fromObject(obj);
+	} catch {
+		return;
+	}
+}
+/** Exit status as a badge: the code when one is known, else the tool's status.
+*  Red only for a nonzero exit or an error; a clean run stays quiet green. */
+function ExitBadge({ exitCode, status }) {
+	if (status === "running" || status === "pending") return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Loader2, {
+			className: "h-3 w-3 animate-spin",
+			"aria-hidden": "true"
+		}), "running"]
+	});
+	const failed = status === "error" || exitCode !== void 0 && exitCode !== 0;
+	const label = exitCode !== void 0 ? `exit ${exitCode}` : failed ? "error" : null;
+	if (label === null) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex shrink-0 items-center rounded-full px-1.5 py-px text-[11px] font-medium tabular-nums", failed ? "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]" : "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"),
+		children: label
+	});
+}
 /**
-* Terminal-style command output preview.
-* Shows the command, exit code, and stdout/stderr with expand/collapse.
+* One shell command as a terminal block: a `$ command` prompt line with its
+* exit status, and stdout and stderr in separate regions below it.
+*
+* The block is always dark. It scopes the dark token set onto itself with
+* `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
+* contrast they were designed with on a dark ground, in a light console too.
 */
-const CommandPreview = memo(({ part }) => {
-	const [expanded, setExpanded] = useState(true);
-	const input = part.state.input;
-	const command = typeof input?.command === "string" ? input.command : String(input ?? "");
-	const output = part.state.status === "completed" ? extractCommandOutput(part.state.output) : null;
-	const isError = output ? output.exitCode !== 0 : part.state.status === "error";
-	const errorText = part.state.error;
-	const lineCount = output?.stdout ? output.stdout.split("\n").length : 0;
-	return /* @__PURE__ */ jsxs(PreviewCard, {
-		icon: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" }),
-		title: "Command",
-		description: command,
-		meta: output ? /* @__PURE__ */ jsxs("span", {
-			className: cn("inline-flex items-center rounded-full border px-2 py-0.5 font-mono", isError ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]" : "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"),
-			children: ["exit ", output.exitCode]
-		}) : null,
-		children: [
-			/* @__PURE__ */ jsxs("button", {
-				onClick: () => setExpanded((value) => !value),
-				className: cn("flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-2 text-left transition-colors hover:border-[var(--border-strong)] hover:bg-accent/45", focusRing),
-				children: [
-					/* @__PURE__ */ jsx("code", {
-						className: "min-w-0 flex-1 truncate text-xs font-mono text-foreground",
-						children: command
-					}),
-					lineCount > 0 ? /* @__PURE__ */ jsxs("span", {
-						className: "shrink-0 text-xs text-muted-foreground",
-						children: [
-							lineCount,
-							" line",
-							lineCount === 1 ? "" : "s"
-						]
-					}) : null,
-					expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
-				]
-			}),
-			part.state.status === "running" ? /* @__PURE__ */ jsx(PreviewLoading, {}) : null,
-			errorText ? /* @__PURE__ */ jsx(PreviewError, { error: errorText }) : null,
-			expanded && output ? /* @__PURE__ */ jsxs("div", {
-				className: "overflow-hidden rounded-[var(--radius-md)] border border-border bg-muted",
-				children: [output.stdout ? /* @__PURE__ */ jsx("pre", {
-					className: "max-h-80 overflow-auto px-3 py-3 text-xs font-mono whitespace-pre-wrap break-all text-foreground",
+const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	const bodyId = useId();
+	const command = commandOf(part.state.input);
+	const { status } = part.state;
+	const output = extractCommandOutput(part.state.output);
+	const normalize = (text) => text.replace(/\s+/g, " ").trim();
+	const errorText = part.state.error !== void 0 && output.stdout.length > 0 && normalize(part.state.error) === normalize(output.stdout) ? void 0 : part.state.error;
+	const hasBody = output.stdout.length > 0 || output.stderr.length > 0 || errorText !== void 0 && errorText.length > 0;
+	const promptLine = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "shrink-0 select-none text-muted-foreground",
+			children: "$"
+		}),
+		/* @__PURE__ */ jsx("code", {
+			className: cn("min-w-0 flex-1 whitespace-pre-wrap break-all", expanded ? "" : "line-clamp-2"),
+			children: command
+		}),
+		/* @__PURE__ */ jsx(ExitBadge, {
+			exitCode: output.exitCode,
+			status
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": "dark",
+		"data-testid": "command-preview",
+		className: cn("overflow-hidden rounded-[var(--radius-md)] bg-[var(--md3-surface-container-lowest)] font-mono text-xs text-foreground", className),
+		children: [hasBody ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setExpanded((value) => !value),
+			"aria-expanded": expanded,
+			"aria-controls": bodyId,
+			className: cn("flex w-full items-start gap-2 px-3 py-2 text-left transition-colors hover:bg-white/5", focusRing),
+			children: [promptLine, expanded ? /* @__PURE__ */ jsx(ChevronDown, {
+				className: "mt-px h-3.5 w-3.5 shrink-0 text-muted-foreground",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(ChevronRight, {
+				className: "mt-px h-3.5 w-3.5 shrink-0 text-muted-foreground",
+				"aria-hidden": "true"
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex w-full items-start gap-2 px-3 py-2",
+			children: promptLine
+		}), expanded && hasBody ? /* @__PURE__ */ jsxs("div", {
+			id: bodyId,
+			className: "border-t border-white/10",
+			children: [
+				output.stdout ? /* @__PURE__ */ jsx("pre", {
+					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed",
 					children: output.stdout
-				}) : null, output.stderr ? /* @__PURE__ */ jsx("pre", {
-					className: "max-h-80 overflow-auto border-t border-border px-3 py-3 text-xs font-mono whitespace-pre-wrap break-all text-red-200",
+				}) : null,
+				output.stderr ? /* @__PURE__ */ jsx("pre", {
+					"aria-label": "stderr",
+					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
 					children: output.stderr
-				}) : null]
-			}) : null
-		]
+				}) : null,
+				errorText ? /* @__PURE__ */ jsx("pre", {
+					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+					children: errorText
+				}) : null
+			]
+		}) : null]
 	});
 });
 CommandPreview.displayName = "CommandPreview";
 //#endregion
-export { CommandPreview };
+export { CommandPreview, commandOf, extractCommandOutput };

package/dist/tool-previews/write-file-preview.js

@@ -1,6 +1,6 @@
 import { CodeBlock, CopyButton } from "../markdown/code-block.js";
-import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives.js";
 import { getSyntaxLanguage } from "../files/file-format.js";
+import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FileEdit } from "lucide-react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.15.3",
+  "version": "11.16.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/run/expanded-tool-detail.tsx

@@ -60,7 +60,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
 
   // Specialised previews
   if (meta.displayVariant === "command") {
-    return <CommandPreview part={part} />;
+    return <CommandPreview part={part} defaultExpanded />;
   }
 
   if (meta.displayVariant === "write-file") {

package/src/tool-previews/command-preview.tsx

@@ -1,120 +1,261 @@
-import { memo, useState } from "react";
-import {
-  Terminal,
-  ChevronDown,
-  ChevronRight,
-  Loader2,
-} from "lucide-react";
+import { memo, useId, useState } from "react";
+import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import type { ToolPart } from "../types/parts";
-import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives";
 
 export interface CommandPreviewProps {
   part: ToolPart;
+  /**
+   * Show the output without a click. Off by default: a run is read as a list of
+   * commands, and the output of the one that matters is a click away. A surface
+   * that is itself an expansion (an opened tool row) turns it on.
+   */
+  defaultExpanded?: boolean;
+  className?: string;
 }
 
-/** Extract stdout/stderr/exitCode from tool output. */
-function extractCommandOutput(output: unknown): {
+/** The input keys a shell tool names its command under. */
+const COMMAND_KEYS = ["command", "cmd", "script", "commandLine"] as const;
+
+/** The command a shell tool ran, from a structured input or a raw string. */
+export function commandOf(input: unknown): string {
+  if (typeof input === "string") return input;
+  if (input && typeof input === "object") {
+    const obj = input as Record<string, unknown>;
+    for (const key of COMMAND_KEYS) {
+      const value = obj[key];
+      if (typeof value === "string" && value.length > 0) return value;
+    }
+  }
+  return "";
+}
+
+export interface CommandOutput {
   stdout: string;
   stderr: string;
-  exitCode: number;
-} {
-  if (!output) return { stdout: "", stderr: "", exitCode: 0 };
-
-  if (typeof output === "string") return { stdout: output, stderr: "", exitCode: 0 };
+  /** Undefined when the producer persisted plain text and never reported one. */
+  exitCode: number | undefined;
+}
 
-  if (typeof output === "object" && output !== null) {
-    const obj = output as Record<string, unknown>;
-    return {
-      stdout: String(obj.stdout ?? obj.output ?? ""),
-      stderr: String(obj.stderr ?? ""),
-      exitCode: Number(obj.exitCode ?? obj.exit_code ?? obj.code ?? 0),
-    };
+function finiteNumber(value: unknown): number | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
   }
-
-  return { stdout: String(output), stderr: "", exitCode: 0 };
+  return undefined;
 }
 
 /**
- * Terminal-style command output preview.
- * Shows the command, exit code, and stdout/stderr with expand/collapse.
+ * Split a tool's output into stdout, stderr and an exit code.
+ *
+ * Accepts both shapes producers persist: a structured `{ stdout, stderr,
+ * exitCode }` (or `output` / `exit_code` / `code`), and the plain string a
+ * workflow stores. A string carries no exit code, so none is invented.
  */
-export const CommandPreview = memo(({ part }: CommandPreviewProps) => {
-  const [expanded, setExpanded] = useState(true);
-  const input = part.state.input as Record<string, unknown> | undefined;
-  const command =
-    typeof input?.command === "string" ? input.command : String(input ?? "");
+export function extractCommandOutput(output: unknown): CommandOutput {
+  if (output === undefined || output === null) {
+    return { stdout: "", stderr: "", exitCode: undefined };
+  }
+  if (typeof output === "string") {
+    const parsed = parseStructured(output);
+    if (parsed) return parsed;
+    return { stdout: output, stderr: "", exitCode: undefined };
+  }
+  if (typeof output === "object") {
+    return fromObject(output as Record<string, unknown>);
+  }
+  return { stdout: String(output), stderr: "", exitCode: undefined };
+}
+
+function fromObject(obj: Record<string, unknown>): CommandOutput {
+  const text = (value: unknown) =>
+    value === undefined || value === null ? "" : String(value);
+  return {
+    stdout: text(obj.stdout ?? obj.output),
+    stderr: text(obj.stderr),
+    exitCode: finiteNumber(obj.exitCode ?? obj.exit_code ?? obj.code),
+  };
+}
 
-  const output =
-    part.state.status === "completed"
-      ? extractCommandOutput(part.state.output)
-      : null;
+/** The keys a serialized command result carries, and nothing else. */
+const ENVELOPE_KEYS = new Set([
+  "stdout",
+  "stderr",
+  "output",
+  "exitCode",
+  "exit_code",
+  "code",
+  "signal",
+  "durationMs",
+  "duration_ms",
+  "timedOut",
+  "timed_out",
+]);
 
-  const isError = output ? output.exitCode !== 0 : part.state.status === "error";
-  const errorText = part.state.error;
-  const lineCount = output?.stdout ? output.stdout.split("\n").length : 0;
+/** A string that is a serialized `{ stdout, stderr, exitCode }` record. */
+function parseStructured(text: string): CommandOutput | undefined {
+  const trimmed = text.trimStart();
+  if (!trimmed.startsWith("{")) return undefined;
+  try {
+    const parsed: unknown = JSON.parse(trimmed);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return undefined;
+    }
+    const obj = parsed as Record<string, unknown>;
+    // Only an unambiguous envelope: a stream key, and nothing but envelope keys.
+    // A command whose own stdout is JSON that happens to have a `stdout` field
+    // (`{"stdout":"v","result":"ok"}`) is shown as the text it printed.
+    if (!("stdout" in obj) && !("stderr" in obj)) return undefined;
+    if (!Object.keys(obj).every((key) => ENVELOPE_KEYS.has(key))) {
+      return undefined;
+    }
+    return fromObject(obj);
+  } catch {
+    return undefined;
+  }
+}
 
+/** Exit status as a badge: the code when one is known, else the tool's status.
+ *  Red only for a nonzero exit or an error; a clean run stays quiet green. */
+function ExitBadge({
+  exitCode,
+  status,
+}: {
+  exitCode: number | undefined;
+  status: ToolPart["state"]["status"];
+}) {
+  if (status === "running" || status === "pending") {
+    return (
+      <span className="inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground">
+        <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
+        running
+      </span>
+    );
+  }
+  // The tool's own error status wins: a runner can fail after the shell exited
+  // 0, and a green "exit 0" beside that error would contradict it.
+  const failed = status === "error" || (exitCode !== undefined && exitCode !== 0);
+  const label =
+    exitCode !== undefined ? `exit ${exitCode}` : failed ? "error" : null;
+  if (label === null) return null;
   return (
-    <PreviewCard
-      icon={<Terminal className="h-4 w-4" />}
-      title="Command"
-      description={command}
-      meta={
-        output ? (
-          <span
-            className={cn(
-              "inline-flex items-center rounded-full border px-2 py-0.5 font-mono",
-              isError
-                ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
-                : "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-            )}
-          >
-            exit {output.exitCode}
-          </span>
-        ) : null
-      }
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center rounded-full px-1.5 py-px text-[11px] font-medium tabular-nums",
+        failed
+          ? "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
+          : "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+      )}
     >
-      <button
-        onClick={() => setExpanded((value) => !value)}
+      {label}
+    </span>
+  );
+}
+
+/**
+ * One shell command as a terminal block: a `$ command` prompt line with its
+ * exit status, and stdout and stderr in separate regions below it.
+ *
+ * The block is always dark. It scopes the dark token set onto itself with
+ * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
+ * contrast they were designed with on a dark ground, in a light console too.
+ */
+export const CommandPreview = memo(
+  ({ part, defaultExpanded = false, className }: CommandPreviewProps) => {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const bodyId = useId();
+    const command = commandOf(part.state.input);
+    const { status } = part.state;
+    const output = extractCommandOutput(part.state.output);
+    // A failed call often persists the same text twice — as its output and as
+    // its error. Print it once. Only an exact repeat (ignoring whitespace) is
+    // folded: an error that merely CONTAINS the output, or the reverse, is a
+    // distinct message and keeps its own region.
+    const normalize = (text: string) => text.replace(/\s+/g, " ").trim();
+    const errorRepeats =
+      part.state.error !== undefined &&
+      output.stdout.length > 0 &&
+      normalize(part.state.error) === normalize(output.stdout);
+    const errorText = errorRepeats ? undefined : part.state.error;
+    const hasBody =
+      output.stdout.length > 0 ||
+      output.stderr.length > 0 ||
+      (errorText !== undefined && errorText.length > 0);
+
+    const promptLine = (
+      <>
+        <span aria-hidden="true" className="shrink-0 select-none text-muted-foreground">
+          $
+        </span>
+        <code
+          className={cn(
+            "min-w-0 flex-1 whitespace-pre-wrap break-all",
+            expanded ? "" : "line-clamp-2",
+          )}
+        >
+          {command}
+        </code>
+        <ExitBadge exitCode={output.exitCode} status={status} />
+      </>
+    );
+
+    return (
+      <div
+        data-theme="dark"
+        data-testid="command-preview"
         className={cn(
-          "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-2 text-left transition-colors hover:border-[var(--border-strong)] hover:bg-accent/45",
-          focusRing,
+          "overflow-hidden rounded-[var(--radius-md)] bg-[var(--md3-surface-container-lowest)] font-mono text-xs text-foreground",
+          className,
         )}
       >
-        <code className="min-w-0 flex-1 truncate text-xs font-mono text-foreground">
-          {command}
-        </code>
-        {lineCount > 0 ? (
-          <span className="shrink-0 text-xs text-muted-foreground">
-            {lineCount} line{lineCount === 1 ? "" : "s"}
-          </span>
-        ) : null}
-        {expanded ? (
-          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        {hasBody ? (
+          <button
+            type="button"
+            onClick={() => setExpanded((value) => !value)}
+            aria-expanded={expanded}
+            aria-controls={bodyId}
+            className={cn(
+              "flex w-full items-start gap-2 px-3 py-2 text-left transition-colors hover:bg-white/5",
+              focusRing,
+            )}
+          >
+            {promptLine}
+            {expanded ? (
+              <ChevronDown className="mt-px h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+            ) : (
+              <ChevronRight className="mt-px h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+            )}
+          </button>
         ) : (
-          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+          <div className="flex w-full items-start gap-2 px-3 py-2">{promptLine}</div>
         )}
-      </button>
-
-      {part.state.status === "running" ? <PreviewLoading /> : null}
-      {errorText ? <PreviewError error={errorText} /> : null}
 
-      {expanded && output ? (
-        <div className="overflow-hidden rounded-[var(--radius-md)] border border-border bg-muted">
-          {output.stdout ? (
-            <pre className="max-h-80 overflow-auto px-3 py-3 text-xs font-mono whitespace-pre-wrap break-all text-foreground">
-              {output.stdout}
-            </pre>
-          ) : null}
-          {output.stderr ? (
-            <pre className="max-h-80 overflow-auto border-t border-border px-3 py-3 text-xs font-mono whitespace-pre-wrap break-all text-red-200">
-              {output.stderr}
-            </pre>
-          ) : null}
-        </div>
-      ) : null}
-    </PreviewCard>
-  );
-});
+        {expanded && hasBody ? (
+          <div id={bodyId} className="border-t border-white/10">
+            {output.stdout ? (
+              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed">
+                {output.stdout}
+              </pre>
+            ) : null}
+            {output.stderr ? (
+              <pre
+                aria-label="stderr"
+                className="max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]"
+              >
+                {output.stderr}
+              </pre>
+            ) : null}
+            {errorText ? (
+              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]">
+                {errorText}
+              </pre>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
 CommandPreview.displayName = "CommandPreview";