Tighten command transcript rows and dashboard card

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/ActiveAgentsPanel.tsx

@@ -91,7 +91,7 @@ function AgentRunCard({
 }) {
   return (
     <div className={cn(
-      "flex min-h-[280px] flex-col overflow-hidden rounded-2xl border shadow-sm",
+      "flex h-[320px] flex-col overflow-hidden rounded-xl border shadow-sm",
       isActive
         ? "border-cyan-500/25 bg-cyan-500/[0.04] shadow-[0_16px_40px_rgba(6,182,212,0.08)]"
         : "border-border bg-background/70",
@@ -124,7 +124,7 @@ function AgentRunCard({
         </div>
 
         {run.issueId && (
-          <div className="mt-3 rounded-xl border border-border/60 bg-background/60 px-2.5 py-2 text-xs">
+          <div className="mt-3 rounded-lg border border-border/60 bg-background/60 px-2.5 py-2 text-xs">
             <Link
               to={`/issues/${issue?.identifier ?? run.issueId}`}
               className={cn(
@@ -140,7 +140,7 @@ function AgentRunCard({
         )}
       </div>
 
-      <div className="flex-1 overflow-y-auto p-3">
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
         <RunTranscriptView
           entries={transcript}
           density="compact"

ui/src/components/transcript/RunTranscriptView.tsx

@@ -57,6 +57,19 @@ type TranscriptBlock =
       name: string;
       status: "running" | "completed";
     }
+  | {
+      type: "command_group";
+      ts: string;
+      endTs?: string;
+      items: Array<{
+        ts: string;
+        endTs?: string;
+        input: unknown;
+        result?: string;
+        isError?: boolean;
+        status: "running" | "completed" | "error";
+      }>;
+    }
   | {
       type: "event";
       ts: string;
@@ -266,6 +279,50 @@ function parseSystemActivity(text: string): { activityId?: string; name: string;
   };
 }
 
+function groupCommandBlocks(blocks: TranscriptBlock[]): TranscriptBlock[] {
+  const grouped: TranscriptBlock[] = [];
+  let pending: Array<Extract<TranscriptBlock, { type: "command_group" }>["items"][number]> = [];
+  let groupTs: string | null = null;
+  let groupEndTs: string | undefined;
+
+  const flush = () => {
+    if (pending.length === 0 || !groupTs) return;
+    grouped.push({
+      type: "command_group",
+      ts: groupTs,
+      endTs: groupEndTs,
+      items: pending,
+    });
+    pending = [];
+    groupTs = null;
+    groupEndTs = undefined;
+  };
+
+  for (const block of blocks) {
+    if (block.type === "tool" && isCommandTool(block.name, block.input)) {
+      if (!groupTs) {
+        groupTs = block.ts;
+      }
+      groupEndTs = block.endTs ?? block.ts;
+      pending.push({
+        ts: block.ts,
+        endTs: block.endTs,
+        input: block.input,
+        result: block.result,
+        isError: block.isError,
+        status: block.status,
+      });
+      continue;
+    }
+
+    flush();
+    grouped.push(block);
+  }
+
+  flush();
+  return grouped;
+}
+
 function normalizeTranscript(entries: TranscriptEntry[], streaming: boolean): TranscriptBlock[] {
   const blocks: TranscriptBlock[] = [];
   const pendingToolBlocks = new Map<string, Extract<TranscriptBlock, { type: "tool" }>>();
@@ -432,7 +489,7 @@ function normalizeTranscript(entries: TranscriptEntry[], streaming: boolean): Tr
     });
   }
 
-  return blocks;
+  return groupCommandBlocks(blocks);
 }
 
 function TranscriptMessageBlock({
@@ -503,9 +560,7 @@ function TranscriptToolCard({
 }) {
   const [open, setOpen] = useState(block.status === "error");
   const compact = density === "compact";
-  const commandTool = isCommandTool(block.name, block.input);
   const parsedResult = parseStructuredToolResult(block.result);
-  const commandPreview = summarizeToolInput(block.name, block.input, density);
   const statusLabel =
     block.status === "running"
       ? "Running"
@@ -531,9 +586,7 @@ function TranscriptToolCard({
         : "text-cyan-600 dark:text-cyan-300",
   );
   const summary = block.status === "running"
-    ? commandTool
-      ? commandPreview
-      : summarizeToolInput(block.name, block.input, density)
+    ? summarizeToolInput(block.name, block.input, density)
     : block.status === "completed" && parsedResult?.body
       ? truncate(parsedResult.body.split("\n")[0] ?? parsedResult.body, compact ? 84 : 140)
       : summarizeToolResult(block.result, block.isError, density);
@@ -543,10 +596,8 @@ function TranscriptToolCard({
       <div className="flex items-start gap-2">
         {block.status === "error" ? (
           <CircleAlert className={iconClass} />
-        ) : block.status === "completed" && !commandTool ? (
+        ) : block.status === "completed" ? (
           <Check className={iconClass} />
-        ) : commandTool ? (
-          <TerminalSquare className={cn(iconClass, block.status === "running" && "animate-pulse")} />
         ) : (
           <Wrench className={iconClass} />
         )}
@@ -555,32 +606,13 @@ function TranscriptToolCard({
             <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
               {block.name}
             </span>
-            {!commandTool && (
-              <span className={cn("text-[10px] font-semibold uppercase tracking-[0.14em]", statusTone)}>
-                {statusLabel}
-              </span>
-            )}
+            <span className={cn("text-[10px] font-semibold uppercase tracking-[0.14em]", statusTone)}>
+              {statusLabel}
+            </span>
           </div>
-          <div className={cn("mt-1 break-words", compact ? "text-xs" : "text-sm")}>
-            {commandTool ? (
-              <span className="font-mono text-foreground/85">
-                {summary}
-              </span>
-            ) : (
-              <span className="text-foreground/80">
-                {summary}
-              </span>
-            )}
+          <div className={cn("mt-1 break-words text-foreground/80", compact ? "text-xs" : "text-sm")}>
+            {summary}
           </div>
-          {commandTool && block.status !== "running" && (
-            <div className={cn("mt-1", compact ? "text-[11px]" : "text-xs", statusTone)}>
-              {block.status === "error"
-                ? "Command failed"
-                : parsedResult?.status === "completed"
-                  ? "Command completed"
-                  : statusLabel}
-            </div>
-          )}
         </div>
         <button
           type="button"
@@ -622,6 +654,132 @@ function TranscriptToolCard({
   );
 }
 
+function hasSelectedText() {
+  if (typeof window === "undefined") return false;
+  return (window.getSelection()?.toString().length ?? 0) > 0;
+}
+
+function TranscriptCommandGroup({
+  block,
+  density,
+}: {
+  block: Extract<TranscriptBlock, { type: "command_group" }>;
+  density: TranscriptDensity;
+}) {
+  const [open, setOpen] = useState(block.items.some((item) => item.status === "error"));
+  const compact = density === "compact";
+  const runningItem = [...block.items].reverse().find((item) => item.status === "running");
+  const latestItem = block.items[block.items.length - 1] ?? null;
+  const hasError = block.items.some((item) => item.status === "error");
+  const isRunning = Boolean(runningItem);
+  const title = isRunning
+    ? "Executing command"
+    : block.items.length === 1
+      ? "Executed command"
+      : `Executed ${block.items.length} commands`;
+  const subtitle = runningItem
+    ? summarizeToolInput("command_execution", runningItem.input, density)
+    : null;
+  const statusTone = hasError
+    ? "text-red-700 dark:text-red-300"
+    : isRunning
+      ? "text-cyan-700 dark:text-cyan-300"
+      : "text-foreground/70";
+
+  return (
+    <div className={cn(hasError && "rounded-xl border border-red-500/20 bg-red-500/[0.04] p-3")}>
+      <div
+        role="button"
+        tabIndex={0}
+        className="flex cursor-pointer items-start gap-2"
+        onClick={() => {
+          if (hasSelectedText()) return;
+          setOpen((value) => !value);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setOpen((value) => !value);
+          }
+        }}
+      >
+        <div className="mt-0.5 flex shrink-0 items-center">
+          {block.items.slice(0, Math.min(block.items.length, 3)).map((_, index) => (
+            <TerminalSquare
+              key={index}
+              className={cn(
+                "h-3.5 w-3.5",
+                index > 0 && "-ml-1.5",
+                hasError
+                  ? "text-red-600 dark:text-red-300"
+                  : isRunning
+                    ? "text-cyan-600 dark:text-cyan-300"
+                    : "text-foreground/55",
+                isRunning && "animate-pulse",
+              )}
+            />
+          ))}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+            {title}
+          </div>
+          {subtitle && (
+            <div className={cn("mt-1 break-words font-mono text-foreground/85", compact ? "text-xs" : "text-sm")}>
+              {subtitle}
+            </div>
+          )}
+          {!subtitle && latestItem?.status === "error" && (
+            <div className={cn("mt-1", compact ? "text-xs" : "text-sm", statusTone)}>
+              Command failed
+            </div>
+          )}
+        </div>
+        <button
+          type="button"
+          className="mt-0.5 inline-flex h-5 w-5 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+          onClick={(event) => {
+            event.stopPropagation();
+            setOpen((value) => !value);
+          }}
+          aria-label={open ? "Collapse command details" : "Expand command details"}
+        >
+          {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        </button>
+      </div>
+      {open && (
+        <div className={cn("mt-3 space-y-3", hasError && "rounded-xl border border-red-500/20 bg-red-500/[0.06] p-3")}>
+          {block.items.map((item, index) => (
+            <div key={`${item.ts}-${index}`} className="space-y-2">
+              <div className="flex items-center gap-2">
+                <TerminalSquare className={cn(
+                  "h-3.5 w-3.5",
+                  item.status === "error"
+                    ? "text-red-600 dark:text-red-300"
+                    : item.status === "running"
+                      ? "text-cyan-600 dark:text-cyan-300"
+                      : "text-foreground/55",
+                )} />
+                <span className={cn("font-mono break-all", compact ? "text-[11px]" : "text-xs")}>
+                  {summarizeToolInput("command_execution", item.input, density)}
+                </span>
+              </div>
+              {item.result && (
+                <pre className={cn(
+                  "overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px]",
+                  item.status === "error" ? "text-red-700 dark:text-red-300" : "text-foreground/80",
+                )}>
+                  {formatToolPayload(item.result)}
+                </pre>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function TranscriptActivityRow({
   block,
   density,
@@ -777,6 +935,7 @@ export function RunTranscriptView({
           {block.type === "message" && <TranscriptMessageBlock block={block} density={density} />}
           {block.type === "thinking" && <TranscriptThinkingBlock block={block} density={density} />}
           {block.type === "tool" && <TranscriptToolCard block={block} density={density} />}
+          {block.type === "command_group" && <TranscriptCommandGroup block={block} density={density} />}
           {block.type === "activity" && <TranscriptActivityRow block={block} density={density} />}
           {block.type === "event" && <TranscriptEventRow block={block} density={density} />}
         </div>

ui/src/pages/RunTranscriptUxLab.tsx

@@ -60,7 +60,7 @@ function RunDetailPreview({
   density: TranscriptDensity;
 }) {
   return (
-    <div className="overflow-hidden rounded-[28px] border border-border/70 bg-background/80 shadow-[0_24px_60px_rgba(15,23,42,0.08)]">
+    <div className="overflow-hidden rounded-xl border border-border/70 bg-background/80 shadow-[0_24px_60px_rgba(15,23,42,0.08)]">
       <div className="border-b border-border/60 bg-background/90 px-5 py-4">
         <div className="flex flex-wrap items-center gap-2">
           <Badge variant="outline" className="uppercase tracking-[0.18em] text-[10px]">
@@ -97,7 +97,7 @@ function LiveWidgetPreview({
   density: TranscriptDensity;
 }) {
   return (
-    <div className="overflow-hidden rounded-[28px] border border-cyan-500/25 bg-background/85 shadow-[0_20px_50px_rgba(6,182,212,0.10)]">
+    <div className="overflow-hidden rounded-xl border border-cyan-500/25 bg-background/85 shadow-[0_20px_50px_rgba(6,182,212,0.10)]">
       <div className="border-b border-border/60 bg-cyan-500/[0.05] px-5 py-4">
         <div className="text-xs font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
           Live Runs
@@ -149,7 +149,7 @@ function DashboardPreview({
   return (
     <div className="max-w-md">
       <div className={cn(
-        "flex min-h-[420px] flex-col overflow-hidden rounded-[28px] border shadow-[0_20px_40px_rgba(15,23,42,0.10)]",
+        "flex h-[320px] flex-col overflow-hidden rounded-xl border shadow-[0_20px_40px_rgba(15,23,42,0.10)]",
         streaming
           ? "border-cyan-500/25 bg-cyan-500/[0.04]"
           : "border-border bg-background/75",
@@ -172,11 +172,11 @@ function DashboardPreview({
               <ExternalLink className="h-2.5 w-2.5" />
             </span>
           </div>
-          <div className="mt-3 rounded-2xl border border-border/60 bg-background/60 px-3 py-2 text-xs text-cyan-700 dark:text-cyan-300">
+          <div className="mt-3 rounded-lg border border-border/60 bg-background/60 px-3 py-2 text-xs text-cyan-700 dark:text-cyan-300">
             {runTranscriptFixtureMeta.issueIdentifier} - {runTranscriptFixtureMeta.issueTitle}
           </div>
         </div>
-        <div className="flex-1 overflow-y-auto p-4">
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">
           <RunTranscriptView
             entries={previewEntries("dashboard")}
             mode={mode}
@@ -200,7 +200,7 @@ export function RunTranscriptUxLab() {
 
   return (
     <div className="space-y-6">
-      <div className="overflow-hidden rounded-[32px] border border-border/70 bg-[linear-gradient(135deg,rgba(8,145,178,0.08),transparent_28%),linear-gradient(180deg,rgba(245,158,11,0.08),transparent_40%),var(--background)] shadow-[0_28px_70px_rgba(15,23,42,0.10)]">
+      <div className="overflow-hidden rounded-2xl border border-border/70 bg-[linear-gradient(135deg,rgba(8,145,178,0.08),transparent_28%),linear-gradient(180deg,rgba(245,158,11,0.08),transparent_40%),var(--background)] shadow-[0_28px_70px_rgba(15,23,42,0.10)]">
         <div className="grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)]">
           <aside className="border-b border-border/60 bg-background/75 p-5 lg:border-b-0 lg:border-r">
             <div className="mb-5">
@@ -223,14 +223,14 @@ export function RunTranscriptUxLab() {
                     type="button"
                     onClick={() => setSelectedSurface(option.id)}
                     className={cn(
-                      "w-full rounded-2xl border px-4 py-3 text-left transition-all",
+                      "w-full rounded-xl border px-4 py-3 text-left transition-all",
                       selectedSurface === option.id
                         ? "border-cyan-500/35 bg-cyan-500/[0.10] shadow-[0_12px_24px_rgba(6,182,212,0.12)]"
                         : "border-border/70 bg-background/70 hover:border-cyan-500/20 hover:bg-cyan-500/[0.04]",
                     )}
                   >
                     <div className="flex items-start gap-3">
-                      <span className="rounded-xl border border-current/15 p-2 text-cyan-700 dark:text-cyan-300">
+                      <span className="rounded-lg border border-current/15 p-2 text-cyan-700 dark:text-cyan-300">
                         <Icon className="h-4 w-4" />
                       </span>
                       <span className="min-w-0">