Humanize run transcripts across run detail and live surfaces

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

packages/adapter-utils/src/types.ts

@@ -189,7 +189,7 @@ export type TranscriptEntry =
   | { kind: "assistant"; ts: string; text: string; delta?: boolean }
   | { kind: "thinking"; ts: string; text: string; delta?: boolean }
   | { kind: "user"; ts: string; text: string }
-  | { kind: "tool_call"; ts: string; name: string; input: unknown }
+  | { kind: "tool_call"; ts: string; name: string; input: unknown; toolUseId?: string }
   | { kind: "tool_result"; ts: string; toolUseId: string; content: string; isError: boolean }
   | { kind: "init"; ts: string; model: string; sessionId: string }
   | { kind: "result"; ts: string; text: string; inputTokens: number; outputTokens: number; cachedTokens: number; costUsd: number; subtype: string; isError: boolean; errors: string[] }

packages/adapters/claude-local/src/ui/parse-stdout.ts

@@ -71,6 +71,12 @@ export function parseClaudeStdoutLine(line: string, ts: string): TranscriptEntry
           kind: "tool_call",
           ts,
           name: typeof block.name === "string" ? block.name : "unknown",
+          toolUseId:
+            typeof block.id === "string"
+              ? block.id
+              : typeof block.tool_use_id === "string"
+                ? block.tool_use_id
+                : undefined,
           input: block.input ?? {},
         });
       }

packages/adapters/codex-local/src/ui/parse-stdout.ts

@@ -64,6 +64,7 @@ function parseCommandExecutionItem(
       kind: "tool_call",
       ts,
       name: "command_execution",
+      toolUseId: id || command || "command_execution",
       input: {
         id,
         command,
@@ -148,6 +149,7 @@ function parseCodexItem(
       kind: "tool_call",
       ts,
       name: asString(item.name, "unknown"),
+      toolUseId: asString(item.id),
       input: item.input ?? {},
     }];
   }

packages/adapters/cursor-local/src/ui/parse-stdout.ts

@@ -142,6 +142,12 @@ function parseAssistantMessage(messageRaw: unknown, ts: string): TranscriptEntry
         kind: "tool_call",
         ts,
         name,
+        toolUseId:
+          asString(part.tool_use_id) ||
+          asString(part.toolUseId) ||
+          asString(part.call_id) ||
+          asString(part.id) ||
+          undefined,
         input,
       });
       continue;
@@ -199,6 +205,7 @@ function parseCursorToolCallEvent(event: Record<string, unknown>, ts: string): T
       kind: "tool_call",
       ts,
       name: toolName,
+      toolUseId: callId,
       input,
     }];
   }

packages/adapters/opencode-local/src/ui/parse-stdout.ts

@@ -50,6 +50,7 @@ function parseToolUse(parsed: Record<string, unknown>, ts: string): TranscriptEn
     kind: "tool_call",
     ts,
     name: toolName,
+    toolUseId: asString(part.callID) || asString(part.id) || undefined,
     input,
   };
 

server/src/__tests__/codex-local-adapter.test.ts

@@ -70,6 +70,7 @@ describe("codex_local ui stdout parser", () => {
         kind: "tool_call",
         ts,
         name: "command_execution",
+        toolUseId: "item_2",
         input: { id: "item_2", command: "/bin/zsh -lc ls" },
       },
     ]);

server/src/__tests__/cursor-local-adapter.test.ts

@@ -165,6 +165,7 @@ describe("cursor ui stdout parser", () => {
         kind: "tool_call",
         ts,
         name: "shellToolCall",
+        toolUseId: "call_shell_1",
         input: { command: longCommand },
       },
     ]);
@@ -254,7 +255,7 @@ describe("cursor ui stdout parser", () => {
         }),
         ts,
       ),
-    ).toEqual([{ kind: "tool_call", ts, name: "readToolCall", input: { path: "README.md" } }]);
+    ).toEqual([{ kind: "tool_call", ts, name: "readToolCall", toolUseId: "call_1", input: { path: "README.md" } }]);
 
     expect(
       parseCursorStdoutLine(

server/src/__tests__/opencode-local-adapter.test.ts

@@ -103,6 +103,7 @@ describe("opencode_local ui stdout parser", () => {
         kind: "tool_call",
         ts,
         name: "bash",
+        toolUseId: "call_1",
         input: { command: "ls -1" },
       },
       {

ui/src/adapters/index.ts

@@ -6,3 +6,4 @@ export type {
   UIAdapterModule,
   AdapterConfigFieldsProps,
 } from "./types";
+export type { RunLogChunk } from "./transcript";

ui/src/adapters/transcript.ts

@@ -1,8 +1,8 @@
 import type { TranscriptEntry, StdoutLineParser } from "./types";
 
-type RunLogChunk = { ts: string; stream: "stdout" | "stderr" | "system"; chunk: string };
+export type RunLogChunk = { ts: string; stream: "stdout" | "stderr" | "system"; chunk: string };
 
-function appendTranscriptEntry(entries: TranscriptEntry[], entry: TranscriptEntry) {
+export function appendTranscriptEntry(entries: TranscriptEntry[], entry: TranscriptEntry) {
   if ((entry.kind === "thinking" || entry.kind === "assistant") && entry.delta) {
     const last = entries[entries.length - 1];
     if (last && last.kind === entry.kind && last.delta) {
@@ -14,6 +14,12 @@ function appendTranscriptEntry(entries: TranscriptEntry[], entry: TranscriptEntr
   entries.push(entry);
 }
 
+export function appendTranscriptEntries(entries: TranscriptEntry[], incoming: TranscriptEntry[]) {
+  for (const entry of incoming) {
+    appendTranscriptEntry(entries, entry);
+  }
+}
+
 export function buildTranscript(chunks: RunLogChunk[], parser: StdoutLineParser): TranscriptEntry[] {
   const entries: TranscriptEntry[] = [];
   let stdoutBuffer = "";
@@ -34,18 +40,14 @@ export function buildTranscript(chunks: RunLogChunk[], parser: StdoutLineParser)
     for (const line of lines) {
       const trimmed = line.trim();
       if (!trimmed) continue;
-      for (const entry of parser(trimmed, chunk.ts)) {
+      appendTranscriptEntries(entries, parser(trimmed, chunk.ts));
-        appendTranscriptEntry(entries, entry);
-      }
     }
   }
 
   const trailing = stdoutBuffer.trim();
   if (trailing) {
     const ts = chunks.length > 0 ? chunks[chunks.length - 1]!.ts : new Date().toISOString();
-    for (const entry of parser(trailing, ts)) {
+    appendTranscriptEntries(entries, parser(trailing, ts));
-      appendTranscriptEntry(entries, entry);
-    }
   }
 
   return entries;

ui/src/components/ActiveAgentsPanel.tsx

@@ -1,191 +1,19 @@
-import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
+import { useMemo } from "react";
 import { Link } from "@/lib/router";
 import { useQuery } from "@tanstack/react-query";
-import type { Issue, LiveEvent } from "@paperclipai/shared";
+import type { Issue } from "@paperclipai/shared";
 import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
 import { issuesApi } from "../api/issues";
-import { getUIAdapter } from "../adapters";
 import type { TranscriptEntry } from "../adapters";
 import { queryKeys } from "../lib/queryKeys";
 import { cn, relativeTime } from "../lib/utils";
 import { ExternalLink } from "lucide-react";
 import { Identity } from "./Identity";
+import { RunTranscriptView } from "./transcript/RunTranscriptView";
+import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
 
-type FeedTone = "info" | "warn" | "error" | "assistant" | "tool";
-
-interface FeedItem {
-  id: string;
-  ts: string;
-  runId: string;
-  agentId: string;
-  agentName: string;
-  text: string;
-  tone: FeedTone;
-  dedupeKey: string;
-  streamingKind?: "assistant" | "thinking";
-}
-
-const MAX_FEED_ITEMS = 40;
-const MAX_FEED_TEXT_LENGTH = 220;
-const MAX_STREAMING_TEXT_LENGTH = 4000;
 const MIN_DASHBOARD_RUNS = 4;
 
-function readString(value: unknown): string | null {
-  return typeof value === "string" && value.trim().length > 0 ? value : null;
-}
-
-function summarizeEntry(entry: TranscriptEntry): { text: string; tone: FeedTone } | null {
-  if (entry.kind === "assistant") {
-    const text = entry.text.trim();
-    return text ? { text, tone: "assistant" } : null;
-  }
-  if (entry.kind === "thinking") {
-    const text = entry.text.trim();
-    return text ? { text: `[thinking] ${text}`, tone: "info" } : null;
-  }
-  if (entry.kind === "tool_call") {
-    return { text: `tool ${entry.name}`, tone: "tool" };
-  }
-  if (entry.kind === "tool_result") {
-    const base = entry.content.trim();
-    return {
-      text: entry.isError ? `tool error: ${base}` : `tool result: ${base}`,
-      tone: entry.isError ? "error" : "tool",
-    };
-  }
-  if (entry.kind === "stderr") {
-    const text = entry.text.trim();
-    return text ? { text, tone: "error" } : null;
-  }
-  if (entry.kind === "system") {
-    const text = entry.text.trim();
-    return text ? { text, tone: "warn" } : null;
-  }
-  if (entry.kind === "stdout") {
-    const text = entry.text.trim();
-    return text ? { text, tone: "info" } : null;
-  }
-  return null;
-}
-
-function createFeedItem(
-  run: LiveRunForIssue,
-  ts: string,
-  text: string,
-  tone: FeedTone,
-  nextId: number,
-  options?: {
-    streamingKind?: "assistant" | "thinking";
-    preserveWhitespace?: boolean;
-  },
-): FeedItem | null {
-  if (!text.trim()) return null;
-  const base = options?.preserveWhitespace ? text : text.trim();
-  const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
-  const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
-  return {
-    id: `${run.id}:${nextId}`,
-    ts,
-    runId: run.id,
-    agentId: run.agentId,
-    agentName: run.agentName,
-    text: normalized,
-    tone,
-    dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
-    streamingKind: options?.streamingKind,
-  };
-}
-
-function parseStdoutChunk(
-  run: LiveRunForIssue,
-  chunk: string,
-  ts: string,
-  pendingByRun: Map<string, string>,
-  nextIdRef: MutableRefObject<number>,
-): FeedItem[] {
-  const pendingKey = `${run.id}:stdout`;
-  const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
-  const split = combined.split(/\r?\n/);
-  pendingByRun.set(pendingKey, split.pop() ?? "");
-  const adapter = getUIAdapter(run.adapterType);
-
-  const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
-  const appendSummary = (entry: TranscriptEntry) => {
-    if (entry.kind === "assistant" && entry.delta) {
-      const text = entry.text;
-      if (!text.trim()) return;
-      const last = summarized[summarized.length - 1];
-      if (last && last.streamingKind === "assistant") {
-        last.text += text;
-      } else {
-        summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
-      }
-      return;
-    }
-
-    if (entry.kind === "thinking" && entry.delta) {
-      const text = entry.text;
-      if (!text.trim()) return;
-      const last = summarized[summarized.length - 1];
-      if (last && last.streamingKind === "thinking") {
-        last.text += text;
-      } else {
-        summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
-      }
-      return;
-    }
-
-    const summary = summarizeEntry(entry);
-    if (!summary) return;
-    summarized.push({ text: summary.text, tone: summary.tone });
-  };
-
-  const items: FeedItem[] = [];
-  for (const line of split.slice(-8)) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    const parsed = adapter.parseStdoutLine(trimmed, ts);
-    if (parsed.length === 0) {
-      const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
-      if (fallback) items.push(fallback);
-      continue;
-    }
-    for (const entry of parsed) {
-      appendSummary(entry);
-    }
-  }
-
-  for (const summary of summarized) {
-    const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
-      streamingKind: summary.streamingKind,
-      preserveWhitespace: !!summary.streamingKind,
-    });
-    if (item) items.push(item);
-  }
-
-  return items;
-}
-
-function parseStderrChunk(
-  run: LiveRunForIssue,
-  chunk: string,
-  ts: string,
-  pendingByRun: Map<string, string>,
-  nextIdRef: MutableRefObject<number>,
-): FeedItem[] {
-  const pendingKey = `${run.id}:stderr`;
-  const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
-  const split = combined.split(/\r?\n/);
-  pendingByRun.set(pendingKey, split.pop() ?? "");
-
-  const items: FeedItem[] = [];
-  for (const line of split.slice(-8)) {
-    const item = createFeedItem(run, ts, line, "error", nextIdRef.current++);
-    if (item) items.push(item);
-  }
-  return items;
-}
-
 function isRunActive(run: LiveRunForIssue): boolean {
   return run.status === "queued" || run.status === "running";
 }
@@ -195,11 +23,6 @@ interface ActiveAgentsPanelProps {
 }
 
 export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
-  const [feedByRun, setFeedByRun] = useState<Map<string, FeedItem[]>>(new Map());
-  const seenKeysRef = useRef(new Set<string>());
-  const pendingByRunRef = useRef(new Map<string, string>());
-  const nextIdRef = useRef(1);
-
   const { data: liveRuns } = useQuery({
     queryKey: [...queryKeys.liveRuns(companyId), "dashboard"],
     queryFn: () => heartbeatsApi.liveRunsForCompany(companyId, MIN_DASHBOARD_RUNS),
@@ -220,179 +43,30 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
     return map;
   }, [issues]);
 
-  const runById = useMemo(() => new Map(runs.map((r) => [r.id, r])), [runs]);
+  const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({
-  const activeRunIds = useMemo(() => new Set(runs.filter(isRunActive).map((r) => r.id)), [runs]);
+    runs,
-
+    companyId,
-  // Clean up pending buffers for runs that ended
+    maxChunksPerRun: 120,
-  useEffect(() => {
+  });
-    const stillActive = new Set<string>();
-    for (const runId of activeRunIds) {
-      stillActive.add(`${runId}:stdout`);
-      stillActive.add(`${runId}:stderr`);
-    }
-    for (const key of pendingByRunRef.current.keys()) {
-      if (!stillActive.has(key)) {
-        pendingByRunRef.current.delete(key);
-      }
-    }
-  }, [activeRunIds]);
-
-  // WebSocket connection for streaming
-  useEffect(() => {
-    if (activeRunIds.size === 0) return;
-
-    let closed = false;
-    let reconnectTimer: number | null = null;
-    let socket: WebSocket | null = null;
-
-    const appendItems = (runId: string, items: FeedItem[]) => {
-      if (items.length === 0) return;
-      setFeedByRun((prev) => {
-        const next = new Map(prev);
-        const existing = [...(next.get(runId) ?? [])];
-        for (const item of items) {
-          if (seenKeysRef.current.has(item.dedupeKey)) continue;
-          seenKeysRef.current.add(item.dedupeKey);
-
-          const last = existing[existing.length - 1];
-          if (
-            item.streamingKind &&
-            last &&
-            last.runId === item.runId &&
-            last.streamingKind === item.streamingKind
-          ) {
-            const mergedText = `${last.text}${item.text}`;
-            const nextText =
-              mergedText.length > MAX_STREAMING_TEXT_LENGTH
-                ? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
-                : mergedText;
-            existing[existing.length - 1] = {
-              ...last,
-              ts: item.ts,
-              text: nextText,
-              dedupeKey: last.dedupeKey,
-            };
-            continue;
-          }
-
-          existing.push(item);
-        }
-        if (seenKeysRef.current.size > 6000) {
-          seenKeysRef.current.clear();
-        }
-        next.set(runId, existing.slice(-MAX_FEED_ITEMS));
-        return next;
-      });
-    };
-
-    const scheduleReconnect = () => {
-      if (closed) return;
-      reconnectTimer = window.setTimeout(connect, 1500);
-    };
-
-    const connect = () => {
-      if (closed) return;
-      const protocol = window.location.protocol === "https:" ? "wss" : "ws";
-      const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
-      socket = new WebSocket(url);
-
-      socket.onmessage = (message) => {
-        const raw = typeof message.data === "string" ? message.data : "";
-        if (!raw) return;
-
-        let event: LiveEvent;
-        try {
-          event = JSON.parse(raw) as LiveEvent;
-        } catch {
-          return;
-        }
-
-        if (event.companyId !== companyId) return;
-        const payload = event.payload ?? {};
-        const runId = readString(payload["runId"]);
-        if (!runId || !activeRunIds.has(runId)) return;
-
-        const run = runById.get(runId);
-        if (!run) return;
-
-        if (event.type === "heartbeat.run.event") {
-          const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
-          const eventType = readString(payload["eventType"]) ?? "event";
-          const messageText = readString(payload["message"]) ?? eventType;
-          const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
-          if (seenKeysRef.current.has(dedupeKey)) return;
-          seenKeysRef.current.add(dedupeKey);
-          if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
-          const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
-          const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
-          if (item) appendItems(run.id, [item]);
-          return;
-        }
-
-        if (event.type === "heartbeat.run.status") {
-          const status = readString(payload["status"]) ?? "updated";
-          const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
-          if (seenKeysRef.current.has(dedupeKey)) return;
-          seenKeysRef.current.add(dedupeKey);
-          if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
-          const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
-          const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
-          if (item) appendItems(run.id, [item]);
-          return;
-        }
-
-        if (event.type === "heartbeat.run.log") {
-          const chunk = readString(payload["chunk"]);
-          if (!chunk) return;
-          const stream = readString(payload["stream"]) === "stderr" ? "stderr" : "stdout";
-          if (stream === "stderr") {
-            appendItems(run.id, parseStderrChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
-            return;
-          }
-          appendItems(run.id, parseStdoutChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
-        }
-      };
-
-      socket.onerror = () => {
-        socket?.close();
-      };
-
-      socket.onclose = () => {
-        scheduleReconnect();
-      };
-    };
-
-    connect();
-
-    return () => {
-      closed = true;
-      if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
-      if (socket) {
-        socket.onmessage = null;
-        socket.onerror = null;
-        socket.onclose = null;
-        socket.close(1000, "active_agents_panel_unmount");
-      }
-    };
-  }, [activeRunIds, companyId, runById]);
 
   return (
     <div>
-      <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
+      <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
         Agents
       </h3>
       {runs.length === 0 ? (
-        <div className="border border-border rounded-lg p-4">
+        <div className="rounded-xl border border-border p-4">
           <p className="text-sm text-muted-foreground">No recent agent runs.</p>
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-2 sm:gap-4">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-4">
           {runs.map((run) => (
             <AgentRunCard
               key={run.id}
               run={run}
               issue={run.issueId ? issueById.get(run.issueId) : undefined}
-              feed={feedByRun.get(run.id) ?? []}
+              transcript={transcriptByRun.get(run.id) ?? []}
+              hasOutput={hasOutputForRun(run.id)}
               isActive={isRunActive(run)}
             />
           ))}
@@ -405,104 +79,75 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
 function AgentRunCard({
   run,
   issue,
-  feed,
+  transcript,
+  hasOutput,
   isActive,
 }: {
   run: LiveRunForIssue;
   issue?: Issue;
-  feed: FeedItem[];
+  transcript: TranscriptEntry[];
+  hasOutput: boolean;
   isActive: boolean;
 }) {
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const recent = feed.slice(-20);
-
-  useEffect(() => {
-    const body = bodyRef.current;
-    if (!body) return;
-    body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
-  }, [feed.length]);
-
   return (
     <div className={cn(
-      "flex flex-col rounded-lg border overflow-hidden min-h-[200px]",
+      "flex min-h-[280px] flex-col overflow-hidden rounded-2xl border shadow-sm",
       isActive
-        ? "border-blue-500/30 bg-background/80 shadow-[0_0_12px_rgba(59,130,246,0.08)]"
+        ? "border-cyan-500/25 bg-cyan-500/[0.04] shadow-[0_16px_40px_rgba(6,182,212,0.08)]"
-        : "border-border bg-background/50",
+        : "border-border bg-background/70",
     )}>
-      {/* Header */}
+      <div className="border-b border-border/60 px-3 py-3">
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
+        <div className="flex items-start justify-between gap-2">
-        <div className="flex items-center gap-2 min-w-0">
+          <div className="min-w-0">
-          {isActive ? (
+            <div className="flex items-center gap-2">
-            <span className="relative flex h-2 w-2 shrink-0">
+              {isActive ? (
-              <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
+                <span className="relative flex h-2.5 w-2.5 shrink-0">
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-cyan-400 opacity-70" />
-            </span>
+                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-cyan-500" />
-          ) : (
+                </span>
-            <span className="flex h-2 w-2 shrink-0">
+              ) : (
-              <span className="inline-flex rounded-full h-2 w-2 bg-muted-foreground/40" />
+                <span className="inline-flex h-2.5 w-2.5 rounded-full bg-muted-foreground/35" />
-            </span>
+              )}
-          )}
+              <Identity name={run.agentName} size="sm" />
-          <Identity name={run.agentName} size="sm" />
+            </div>
-          {isActive && (
+            <div className="mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
-            <span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">Live</span>
+              <span>{isActive ? "Live now" : run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}</span>
-          )}
+            </div>
-        </div>
+          </div>
-        <Link
-          to={`/agents/${run.agentId}/runs/${run.id}`}
-          className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground shrink-0"
-        >
-          <ExternalLink className="h-2.5 w-2.5" />
-        </Link>
-      </div>
 
-      {/* Issue context */}
-      {run.issueId && (
-        <div className="px-3 py-1.5 border-b border-border/40 text-xs flex items-center gap-1 min-w-0">
           <Link
-            to={`/issues/${issue?.identifier ?? run.issueId}`}
+            to={`/agents/${run.agentId}/runs/${run.id}`}
-            className={cn(
+            className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
-              "hover:underline min-w-0 line-clamp-2 min-h-[2rem]",
-              isActive ? "text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300" : "text-muted-foreground hover:text-foreground",
-            )}
-            title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
           >
-            {issue?.identifier ?? run.issueId.slice(0, 8)}
+            <ExternalLink className="h-2.5 w-2.5" />
-            {issue?.title ? ` - ${issue.title}` : ""}
           </Link>
         </div>
-      )}
 
-      {/* Feed body */}
+        {run.issueId && (
-      <div ref={bodyRef} className="flex-1 max-h-[140px] overflow-y-auto p-2 font-mono text-[11px] space-y-1">
+          <div className="mt-3 rounded-xl border border-border/60 bg-background/60 px-2.5 py-2 text-xs">
-        {isActive && recent.length === 0 && (
+            <Link
-          <div className="text-xs text-muted-foreground">Waiting for output...</div>
+              to={`/issues/${issue?.identifier ?? run.issueId}`}
-        )}
+              className={cn(
-        {!isActive && recent.length === 0 && (
+                "line-clamp-2 hover:underline",
-          <div className="text-xs text-muted-foreground">
+                isActive ? "text-cyan-700 dark:text-cyan-300" : "text-muted-foreground hover:text-foreground",
-            {run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}
+              )}
+              title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
+            >
+              {issue?.identifier ?? run.issueId.slice(0, 8)}
+              {issue?.title ? ` - ${issue.title}` : ""}
+            </Link>
           </div>
         )}
-        {recent.map((item, index) => (
+      </div>
-          <div
+
-            key={item.id}
+      <div className="flex-1 overflow-y-auto p-3">
-            className={cn(
+        <RunTranscriptView
-              "flex gap-2 items-start",
+          entries={transcript}
-              index === recent.length - 1 && isActive && "animate-in fade-in slide-in-from-bottom-1 duration-300",
+          density="compact"
-            )}
+          limit={5}
-          >
+          streaming={isActive}
-            <span className="text-[10px] text-muted-foreground shrink-0">{relativeTime(item.ts)}</span>
+          emptyMessage={hasOutput ? "Waiting for transcript parsing..." : isActive ? "Waiting for output..." : "No transcript captured."}
-            <span className={cn(
+        />
-              "min-w-0 break-words",
-              item.tone === "error" && "text-red-600 dark:text-red-300",
-              item.tone === "warn" && "text-amber-600 dark:text-amber-300",
-              item.tone === "assistant" && "text-emerald-700 dark:text-emerald-200",
-              item.tone === "tool" && "text-cyan-600 dark:text-cyan-300",
-              item.tone === "info" && "text-foreground/80",
-            )}>
-              {item.text}
-            </span>
-          </div>
-        ))}
       </div>
     </div>
   );

ui/src/components/LiveRunWidget.tsx

@@ -1,262 +1,32 @@
-import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
+import { useMemo, useState } from "react";
 import { Link } from "@/lib/router";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import type { LiveEvent } from "@paperclipai/shared";
 import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
-import { getUIAdapter } from "../adapters";
-import type { TranscriptEntry } from "../adapters";
 import { queryKeys } from "../lib/queryKeys";
-import { cn, relativeTime, formatDateTime } from "../lib/utils";
+import { formatDateTime } from "../lib/utils";
 import { ExternalLink, Square } from "lucide-react";
 import { Identity } from "./Identity";
 import { StatusBadge } from "./StatusBadge";
+import { RunTranscriptView } from "./transcript/RunTranscriptView";
+import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
 
 interface LiveRunWidgetProps {
   issueId: string;
   companyId?: string | null;
 }
 
-type FeedTone = "info" | "warn" | "error" | "assistant" | "tool";
-
-interface FeedItem {
-  id: string;
-  ts: string;
-  runId: string;
-  agentId: string;
-  agentName: string;
-  text: string;
-  tone: FeedTone;
-  dedupeKey: string;
-  streamingKind?: "assistant" | "thinking";
-}
-
-const MAX_FEED_ITEMS = 80;
-const MAX_FEED_TEXT_LENGTH = 220;
-const MAX_STREAMING_TEXT_LENGTH = 4000;
-const LOG_POLL_INTERVAL_MS = 2000;
-const LOG_READ_LIMIT_BYTES = 256_000;
-
-function readString(value: unknown): string | null {
-  return typeof value === "string" && value.trim().length > 0 ? value : null;
-}
-
 function toIsoString(value: string | Date | null | undefined): string | null {
   if (!value) return null;
   return typeof value === "string" ? value : value.toISOString();
 }
 
-function summarizeEntry(entry: TranscriptEntry): { text: string; tone: FeedTone } | null {
+function isRunActive(status: string): boolean {
-  if (entry.kind === "assistant") {
+  return status === "queued" || status === "running";
-    const text = entry.text.trim();
-    return text ? { text, tone: "assistant" } : null;
-  }
-  if (entry.kind === "thinking") {
-    const text = entry.text.trim();
-    return text ? { text: `[thinking] ${text}`, tone: "info" } : null;
-  }
-  if (entry.kind === "tool_call") {
-    return { text: `tool ${entry.name}`, tone: "tool" };
-  }
-  if (entry.kind === "tool_result") {
-    const base = entry.content.trim();
-    return {
-      text: entry.isError ? `tool error: ${base}` : `tool result: ${base}`,
-      tone: entry.isError ? "error" : "tool",
-    };
-  }
-  if (entry.kind === "stderr") {
-    const text = entry.text.trim();
-    return text ? { text, tone: "error" } : null;
-  }
-  if (entry.kind === "system") {
-    const text = entry.text.trim();
-    return text ? { text, tone: "warn" } : null;
-  }
-  if (entry.kind === "stdout") {
-    const text = entry.text.trim();
-    return text ? { text, tone: "info" } : null;
-  }
-  return null;
-}
-
-function createFeedItem(
-  run: LiveRunForIssue,
-  ts: string,
-  text: string,
-  tone: FeedTone,
-  nextId: number,
-  options?: {
-    streamingKind?: "assistant" | "thinking";
-    preserveWhitespace?: boolean;
-  },
-): FeedItem | null {
-  if (!text.trim()) return null;
-  const base = options?.preserveWhitespace ? text : text.trim();
-  const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
-  const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
-  return {
-    id: `${run.id}:${nextId}`,
-    ts,
-    runId: run.id,
-    agentId: run.agentId,
-    agentName: run.agentName,
-    text: normalized,
-    tone,
-    dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
-    streamingKind: options?.streamingKind,
-  };
-}
-
-function parseStdoutChunk(
-  run: LiveRunForIssue,
-  chunk: string,
-  ts: string,
-  pendingByRun: Map<string, string>,
-  nextIdRef: MutableRefObject<number>,
-): FeedItem[] {
-  const pendingKey = `${run.id}:stdout`;
-  const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
-  const split = combined.split(/\r?\n/);
-  pendingByRun.set(pendingKey, split.pop() ?? "");
-  const adapter = getUIAdapter(run.adapterType);
-
-  const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
-  const appendSummary = (entry: TranscriptEntry) => {
-    if (entry.kind === "assistant" && entry.delta) {
-      const text = entry.text;
-      if (!text.trim()) return;
-      const last = summarized[summarized.length - 1];
-      if (last && last.streamingKind === "assistant") {
-        last.text += text;
-      } else {
-        summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
-      }
-      return;
-    }
-
-    if (entry.kind === "thinking" && entry.delta) {
-      const text = entry.text;
-      if (!text.trim()) return;
-      const last = summarized[summarized.length - 1];
-      if (last && last.streamingKind === "thinking") {
-        last.text += text;
-      } else {
-        summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
-      }
-      return;
-    }
-
-    const summary = summarizeEntry(entry);
-    if (!summary) return;
-    summarized.push({ text: summary.text, tone: summary.tone });
-  };
-
-  const items: FeedItem[] = [];
-  for (const line of split.slice(-8)) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    const parsed = adapter.parseStdoutLine(trimmed, ts);
-    if (parsed.length === 0) {
-      if (run.adapterType === "openclaw_gateway") {
-        continue;
-      }
-      const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
-      if (fallback) items.push(fallback);
-      continue;
-    }
-    for (const entry of parsed) {
-      appendSummary(entry);
-    }
-  }
-
-  for (const summary of summarized) {
-    const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
-      streamingKind: summary.streamingKind,
-      preserveWhitespace: !!summary.streamingKind,
-    });
-    if (item) items.push(item);
-  }
-
-  return items;
-}
-
-function parseStderrChunk(
-  run: LiveRunForIssue,
-  chunk: string,
-  ts: string,
-  pendingByRun: Map<string, string>,
-  nextIdRef: MutableRefObject<number>,
-): FeedItem[] {
-  const pendingKey = `${run.id}:stderr`;
-  const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
-  const split = combined.split(/\r?\n/);
-  pendingByRun.set(pendingKey, split.pop() ?? "");
-
-  const items: FeedItem[] = [];
-  for (const line of split.slice(-8)) {
-    const item = createFeedItem(run, ts, line, "error", nextIdRef.current++);
-    if (item) items.push(item);
-  }
-  return items;
-}
-
-function parsePersistedLogContent(
-  runId: string,
-  content: string,
-  pendingByRun: Map<string, string>,
-): Array<{ ts: string; stream: "stdout" | "stderr" | "system"; chunk: string }> {
-  if (!content) return [];
-
-  const pendingKey = `${runId}:records`;
-  const combined = `${pendingByRun.get(pendingKey) ?? ""}${content}`;
-  const split = combined.split("\n");
-  pendingByRun.set(pendingKey, split.pop() ?? "");
-
-  const parsed: Array<{ ts: string; stream: "stdout" | "stderr" | "system"; chunk: string }> = [];
-  for (const line of split) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    try {
-      const raw = JSON.parse(trimmed) as { ts?: unknown; stream?: unknown; chunk?: unknown };
-      const stream = raw.stream === "stderr" || raw.stream === "system" ? raw.stream : "stdout";
-      const chunk = typeof raw.chunk === "string" ? raw.chunk : "";
-      const ts = typeof raw.ts === "string" ? raw.ts : new Date().toISOString();
-      if (!chunk) continue;
-      parsed.push({ ts, stream, chunk });
-    } catch {
-      // Ignore malformed log rows.
-    }
-  }
-
-  return parsed;
 }
 
 export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
   const queryClient = useQueryClient();
-  const [feed, setFeed] = useState<FeedItem[]>([]);
   const [cancellingRunIds, setCancellingRunIds] = useState(new Set<string>());
-  const seenKeysRef = useRef(new Set<string>());
-  const pendingByRunRef = useRef(new Map<string, string>());
-  const pendingLogRowsByRunRef = useRef(new Map<string, string>());
-  const logOffsetByRunRef = useRef(new Map<string, number>());
-  const runMetaByIdRef = useRef(new Map<string, { agentId: string; agentName: string }>());
-  const nextIdRef = useRef(1);
-  const bodyRef = useRef<HTMLDivElement>(null);
-
-  const handleCancelRun = async (runId: string) => {
-    setCancellingRunIds((prev) => new Set(prev).add(runId));
-    try {
-      await heartbeatsApi.cancel(runId);
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId) });
-    } finally {
-      setCancellingRunIds((prev) => {
-        const next = new Set(prev);
-        next.delete(runId);
-        return next;
-      });
-    }
-  };
 
   const { data: liveRuns } = useQuery({
     queryKey: queryKeys.issues.liveRuns(issueId),
@@ -297,329 +67,93 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
     );
   }, [activeRun, issueId, liveRuns]);
 
-  const runById = useMemo(() => new Map(runs.map((run) => [run.id, run])), [runs]);
+  const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({ runs, companyId });
-  const activeRunIds = useMemo(() => new Set(runs.map((run) => run.id)), [runs]);
-  const runIdsKey = useMemo(
-    () => runs.map((run) => run.id).sort((a, b) => a.localeCompare(b)).join(","),
-    [runs],
-  );
-  const appendItems = (items: FeedItem[]) => {
-    if (items.length === 0) return;
-    setFeed((prev) => {
-      const next = [...prev];
-      for (const item of items) {
-        if (seenKeysRef.current.has(item.dedupeKey)) continue;
-        seenKeysRef.current.add(item.dedupeKey);
 
-        const last = next[next.length - 1];
+  const handleCancelRun = async (runId: string) => {
-        if (
+    setCancellingRunIds((prev) => new Set(prev).add(runId));
-          item.streamingKind &&
+    try {
-          last &&
+      await heartbeatsApi.cancel(runId);
-          last.runId === item.runId &&
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId) });
-          last.streamingKind === item.streamingKind
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId) });
-        ) {
+    } finally {
-          const mergedText = `${last.text}${item.text}`;
+      setCancellingRunIds((prev) => {
-          const nextText =
+        const next = new Set(prev);
-            mergedText.length > MAX_STREAMING_TEXT_LENGTH
+        next.delete(runId);
-              ? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
+        return next;
-              : mergedText;
+      });
-          next[next.length - 1] = {
+    }
-            ...last,
-            ts: item.ts,
-            text: nextText,
-            dedupeKey: last.dedupeKey,
-          };
-          continue;
-        }
-
-        next.push(item);
-      }
-      if (seenKeysRef.current.size > 6000) {
-        seenKeysRef.current.clear();
-      }
-      if (next.length === prev.length) return prev;
-      return next.slice(-MAX_FEED_ITEMS);
-    });
   };
 
-  useEffect(() => {
+  if (runs.length === 0) return null;
-    const body = bodyRef.current;
-    if (!body) return;
-    body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
-  }, [feed.length]);
-
-  useEffect(() => {
-    for (const run of runs) {
-      runMetaByIdRef.current.set(run.id, { agentId: run.agentId, agentName: run.agentName });
-    }
-  }, [runs]);
-
-  useEffect(() => {
-    const stillActive = new Set<string>();
-    for (const runId of activeRunIds) {
-      stillActive.add(`${runId}:stdout`);
-      stillActive.add(`${runId}:stderr`);
-    }
-    for (const key of pendingByRunRef.current.keys()) {
-      if (!stillActive.has(key)) {
-        pendingByRunRef.current.delete(key);
-      }
-    }
-    const liveRunIds = new Set(activeRunIds);
-    for (const key of pendingLogRowsByRunRef.current.keys()) {
-      const runId = key.replace(/:records$/, "");
-      if (!liveRunIds.has(runId)) {
-        pendingLogRowsByRunRef.current.delete(key);
-      }
-    }
-    for (const runId of logOffsetByRunRef.current.keys()) {
-      if (!liveRunIds.has(runId)) {
-        logOffsetByRunRef.current.delete(runId);
-      }
-    }
-  }, [activeRunIds]);
-
-  useEffect(() => {
-    if (runs.length === 0) return;
-
-    let cancelled = false;
-
-    const readRunLog = async (run: LiveRunForIssue) => {
-      const offset = logOffsetByRunRef.current.get(run.id) ?? 0;
-      try {
-        const result = await heartbeatsApi.log(run.id, offset, LOG_READ_LIMIT_BYTES);
-        if (cancelled) return;
-
-        const rows = parsePersistedLogContent(run.id, result.content, pendingLogRowsByRunRef.current);
-        const items: FeedItem[] = [];
-        for (const row of rows) {
-          if (row.stream === "stderr") {
-            items.push(
-              ...parseStderrChunk(run, row.chunk, row.ts, pendingByRunRef.current, nextIdRef),
-            );
-            continue;
-          }
-          if (row.stream === "system") {
-            const item = createFeedItem(run, row.ts, row.chunk, "warn", nextIdRef.current++);
-            if (item) items.push(item);
-            continue;
-          }
-          items.push(
-            ...parseStdoutChunk(run, row.chunk, row.ts, pendingByRunRef.current, nextIdRef),
-          );
-        }
-        appendItems(items);
-
-        if (result.nextOffset !== undefined) {
-          logOffsetByRunRef.current.set(run.id, result.nextOffset);
-          return;
-        }
-        if (result.content.length > 0) {
-          logOffsetByRunRef.current.set(run.id, offset + result.content.length);
-        }
-      } catch {
-        // Ignore log read errors while run output is initializing.
-      }
-    };
-
-    const readAll = async () => {
-      await Promise.all(runs.map((run) => readRunLog(run)));
-    };
-
-    void readAll();
-    const interval = window.setInterval(() => {
-      void readAll();
-    }, LOG_POLL_INTERVAL_MS);
-
-    return () => {
-      cancelled = true;
-      window.clearInterval(interval);
-    };
-  }, [runIdsKey, runs]);
-
-  useEffect(() => {
-    if (!companyId || activeRunIds.size === 0) return;
-
-    let closed = false;
-    let reconnectTimer: number | null = null;
-    let socket: WebSocket | null = null;
-
-    const scheduleReconnect = () => {
-      if (closed) return;
-      reconnectTimer = window.setTimeout(connect, 1500);
-    };
-
-    const connect = () => {
-      if (closed) return;
-      const protocol = window.location.protocol === "https:" ? "wss" : "ws";
-      const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
-      socket = new WebSocket(url);
-
-      socket.onmessage = (message) => {
-        const raw = typeof message.data === "string" ? message.data : "";
-        if (!raw) return;
-
-        let event: LiveEvent;
-        try {
-          event = JSON.parse(raw) as LiveEvent;
-        } catch {
-          return;
-        }
-
-        if (event.companyId !== companyId) return;
-        const payload = event.payload ?? {};
-        const runId = readString(payload["runId"]);
-        if (!runId || !activeRunIds.has(runId)) return;
-
-        const run = runById.get(runId);
-        if (!run) return;
-
-        if (event.type === "heartbeat.run.event") {
-          const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
-          const eventType = readString(payload["eventType"]) ?? "event";
-          const messageText = readString(payload["message"]) ?? eventType;
-          const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
-          if (seenKeysRef.current.has(dedupeKey)) return;
-          seenKeysRef.current.add(dedupeKey);
-          if (seenKeysRef.current.size > 2000) {
-            seenKeysRef.current.clear();
-          }
-          const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
-          const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
-          if (item) appendItems([item]);
-          return;
-        }
-
-        if (event.type === "heartbeat.run.status") {
-          const status = readString(payload["status"]) ?? "updated";
-          const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
-          if (seenKeysRef.current.has(dedupeKey)) return;
-          seenKeysRef.current.add(dedupeKey);
-          if (seenKeysRef.current.size > 2000) {
-            seenKeysRef.current.clear();
-          }
-          const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
-          const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
-          if (item) appendItems([item]);
-          return;
-        }
-
-        if (event.type === "heartbeat.run.log") {
-          const chunk = readString(payload["chunk"]);
-          if (!chunk) return;
-          const stream = readString(payload["stream"]) === "stderr" ? "stderr" : "stdout";
-          if (stream === "stderr") {
-            appendItems(parseStderrChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
-            return;
-          }
-          appendItems(parseStdoutChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
-        }
-      };
-
-      socket.onerror = () => {
-        socket?.close();
-      };
-
-      socket.onclose = () => {
-        scheduleReconnect();
-      };
-    };
-
-    connect();
-
-    return () => {
-      closed = true;
-      if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
-      if (socket) {
-        socket.onmessage = null;
-        socket.onerror = null;
-        socket.onclose = null;
-        socket.close(1000, "issue_live_widget_unmount");
-      }
-    };
-  }, [activeRunIds, companyId, runById]);
-
-  if (runs.length === 0 && feed.length === 0) return null;
-
-  const recent = feed.slice(-25);
 
   return (
-    <div className="rounded-lg border border-cyan-500/30 bg-background/80 overflow-hidden shadow-[0_0_12px_rgba(6,182,212,0.08)]">
+    <div className="overflow-hidden rounded-2xl border border-cyan-500/25 bg-background/80 shadow-[0_18px_50px_rgba(6,182,212,0.08)]">
-      {runs.length > 0 ? (
+      <div className="border-b border-border/60 bg-cyan-500/[0.04] px-4 py-3">
-        runs.map((run) => (
+        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-700 dark:text-cyan-300">
-          <div key={run.id} className="px-3 py-2 border-b border-border/50">
+          Live Runs
-            <div className="flex items-center justify-between mb-2">
+        </div>
-              <Link to={`/agents/${run.agentId}`} className="hover:underline">
+        <div className="mt-1 text-xs text-muted-foreground">
-                <Identity name={run.agentName} size="sm" />
+          Streamed with the same transcript UI used on the full run detail page.
-              </Link>
-              <span className="text-xs text-muted-foreground">
-                {formatDateTime(run.startedAt ?? run.createdAt)}
-              </span>
-            </div>
-            <div className="flex items-center gap-2 text-xs">
-              <span className="text-muted-foreground">Run</span>
-              <Link
-                to={`/agents/${run.agentId}/runs/${run.id}`}
-                className="inline-flex items-center rounded-md border border-border bg-accent/40 px-2 py-1 font-mono text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
-              >
-                {run.id.slice(0, 8)}
-              </Link>
-              <StatusBadge status={run.status} />
-              <div className="ml-auto flex items-center gap-2">
-                <button
-                  onClick={() => handleCancelRun(run.id)}
-                  disabled={cancellingRunIds.has(run.id)}
-                  className="inline-flex items-center gap-1 text-[10px] text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50"
-                >
-                  <Square className="h-2 w-2" fill="currentColor" />
-                  {cancellingRunIds.has(run.id) ? "Stopping…" : "Stop"}
-                </button>
-                <Link
-                  to={`/agents/${run.agentId}/runs/${run.id}`}
-                  className="inline-flex items-center gap-1 text-[10px] text-cyan-600 hover:text-cyan-500 dark:text-cyan-300 dark:hover:text-cyan-200"
-                >
-                  Open run
-                  <ExternalLink className="h-2.5 w-2.5" />
-                </Link>
-              </div>
-            </div>
-          </div>
-        ))
-      ) : (
-        <div className="flex items-center px-3 py-2 border-b border-border/50">
-          <span className="text-xs font-medium text-muted-foreground">Recent run updates</span>
         </div>
-      )}
-
-      <div ref={bodyRef} className="max-h-[220px] overflow-y-auto p-2 font-mono text-[11px] space-y-1">
-        {recent.length === 0 && (
-          <div className="text-xs text-muted-foreground">Waiting for run output...</div>
-        )}
-        {recent.map((item, index) => (
-          <div
-            key={item.id}
-            className={cn(
-              "grid grid-cols-[auto_1fr] gap-2 items-start",
-              index === recent.length - 1 && "animate-in fade-in slide-in-from-bottom-1 duration-300",
-            )}
-          >
-            <span className="text-[10px] text-muted-foreground">{relativeTime(item.ts)}</span>
-            <div className={cn(
-              "min-w-0",
-              item.tone === "error" && "text-red-600 dark:text-red-300",
-              item.tone === "warn" && "text-amber-600 dark:text-amber-300",
-              item.tone === "assistant" && "text-emerald-700 dark:text-emerald-200",
-              item.tone === "tool" && "text-cyan-600 dark:text-cyan-300",
-              item.tone === "info" && "text-foreground/80",
-            )}>
-              <Identity name={item.agentName} size="sm" className="text-cyan-600 dark:text-cyan-400" />
-              <span className="text-muted-foreground"> [{item.runId.slice(0, 8)}] </span>
-              <span className="break-words">{item.text}</span>
-            </div>
-          </div>
-        ))}
       </div>
 
+      <div className="divide-y divide-border/60">
+        {runs.map((run) => {
+          const isActive = isRunActive(run.status);
+          const transcript = transcriptByRun.get(run.id) ?? [];
+          return (
+            <section key={run.id} className="px-4 py-4">
+              <div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div className="min-w-0">
+                  <Link to={`/agents/${run.agentId}`} className="inline-flex hover:underline">
+                    <Identity name={run.agentName} size="sm" />
+                  </Link>
+                  <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                    <Link
+                      to={`/agents/${run.agentId}/runs/${run.id}`}
+                      className="inline-flex items-center rounded-full border border-border/70 bg-background/70 px-2 py-1 font-mono hover:border-cyan-500/30 hover:text-foreground"
+                    >
+                      {run.id.slice(0, 8)}
+                    </Link>
+                    <StatusBadge status={run.status} />
+                    <span>{formatDateTime(run.startedAt ?? run.createdAt)}</span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  {isActive && (
+                    <button
+                      onClick={() => handleCancelRun(run.id)}
+                      disabled={cancellingRunIds.has(run.id)}
+                      className="inline-flex items-center gap-1 rounded-full border border-red-500/20 bg-red-500/[0.06] px-2.5 py-1 text-[11px] font-medium text-red-700 transition-colors hover:bg-red-500/[0.12] dark:text-red-300 disabled:opacity-50"
+                    >
+                      <Square className="h-2.5 w-2.5" fill="currentColor" />
+                      {cancellingRunIds.has(run.id) ? "Stopping…" : "Stop"}
+                    </button>
+                  )}
+                  <Link
+                    to={`/agents/${run.agentId}/runs/${run.id}`}
+                    className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/70 px-2.5 py-1 text-[11px] font-medium text-cyan-700 transition-colors hover:border-cyan-500/30 hover:text-cyan-600 dark:text-cyan-300"
+                  >
+                    Open run
+                    <ExternalLink className="h-3 w-3" />
+                  </Link>
+                </div>
+              </div>
+
+              <div className="max-h-[320px] overflow-y-auto pr-1">
+                <RunTranscriptView
+                  entries={transcript}
+                  density="compact"
+                  limit={8}
+                  streaming={isActive}
+                  emptyMessage={hasOutputForRun(run.id) ? "Waiting for transcript parsing..." : "Waiting for run output..."}
+                />
+              </div>
+            </section>
+          );
+        })}
+      </div>
     </div>
   );
 }

ui/src/components/transcript/RunTranscriptView.tsx

@@ -0,0 +1,681 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import type { TranscriptEntry } from "../../adapters";
+import { MarkdownBody } from "../MarkdownBody";
+import { cn, formatTokens, relativeTime } from "../../lib/utils";
+import {
+  Bot,
+  BrainCircuit,
+  ChevronDown,
+  ChevronRight,
+  CircleAlert,
+  Info,
+  TerminalSquare,
+  User,
+  Wrench,
+} from "lucide-react";
+
+export type TranscriptMode = "nice" | "raw";
+export type TranscriptDensity = "comfortable" | "compact";
+
+interface RunTranscriptViewProps {
+  entries: TranscriptEntry[];
+  mode?: TranscriptMode;
+  density?: TranscriptDensity;
+  limit?: number;
+  streaming?: boolean;
+  emptyMessage?: string;
+  className?: string;
+}
+
+type TranscriptBlock =
+  | {
+      type: "message";
+      role: "assistant" | "user";
+      ts: string;
+      text: string;
+      streaming: boolean;
+    }
+  | {
+      type: "thinking";
+      ts: string;
+      text: string;
+      streaming: boolean;
+    }
+  | {
+      type: "tool";
+      ts: string;
+      endTs?: string;
+      name: string;
+      toolUseId?: string;
+      input: unknown;
+      result?: string;
+      isError?: boolean;
+      status: "running" | "completed" | "error";
+    }
+  | {
+      type: "event";
+      ts: string;
+      label: string;
+      tone: "info" | "warn" | "error" | "neutral";
+      text: string;
+      detail?: string;
+    };
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
+  return value as Record<string, unknown>;
+}
+
+function compactWhitespace(value: string): string {
+  return value.replace(/\s+/g, " ").trim();
+}
+
+function truncate(value: string, max: number): string {
+  return value.length > max ? `${value.slice(0, Math.max(0, max - 1))}…` : value;
+}
+
+function stripMarkdown(value: string): string {
+  return compactWhitespace(
+    value
+      .replace(/```[\s\S]*?```/g, " code ")
+      .replace(/`([^`]+)`/g, "$1")
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+      .replace(/[*_#>-]/g, " "),
+  );
+}
+
+function formatTimestamp(ts: string): string {
+  const date = new Date(ts);
+  if (Number.isNaN(date.getTime())) return ts;
+  return date.toLocaleTimeString("en-US", { hour12: false });
+}
+
+function formatUnknown(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value === null || value === undefined) return "";
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function formatToolPayload(value: unknown): string {
+  if (typeof value === "string") {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    } catch {
+      return value;
+    }
+  }
+  return formatUnknown(value);
+}
+
+function extractToolUseId(input: unknown): string | undefined {
+  const record = asRecord(input);
+  if (!record) return undefined;
+  const candidates = [
+    record.toolUseId,
+    record.tool_use_id,
+    record.callId,
+    record.call_id,
+    record.id,
+  ];
+  for (const candidate of candidates) {
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate;
+    }
+  }
+  return undefined;
+}
+
+function summarizeRecord(record: Record<string, unknown>, keys: string[]): string | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) {
+      return truncate(compactWhitespace(value), 120);
+    }
+  }
+  return null;
+}
+
+function summarizeToolInput(name: string, input: unknown, density: TranscriptDensity): string {
+  const compactMax = density === "compact" ? 72 : 120;
+  if (typeof input === "string") return truncate(compactWhitespace(input), compactMax);
+  const record = asRecord(input);
+  if (!record) {
+    const serialized = compactWhitespace(formatUnknown(input));
+    return serialized ? truncate(serialized, compactMax) : `Inspect ${name} input`;
+  }
+
+  const direct =
+    summarizeRecord(record, ["command", "cmd", "path", "filePath", "file_path", "query", "url", "prompt", "message"])
+    ?? summarizeRecord(record, ["pattern", "name", "title", "target", "tool"])
+    ?? null;
+  if (direct) return truncate(direct, compactMax);
+
+  if (Array.isArray(record.paths) && record.paths.length > 0) {
+    const first = record.paths.find((value): value is string => typeof value === "string" && value.trim().length > 0);
+    if (first) {
+      return truncate(`${record.paths.length} paths, starting with ${first}`, compactMax);
+    }
+  }
+
+  const keys = Object.keys(record);
+  if (keys.length === 0) return `No ${name} input`;
+  if (keys.length === 1) return truncate(`${keys[0]} payload`, compactMax);
+  return truncate(`${keys.length} fields: ${keys.slice(0, 3).join(", ")}`, compactMax);
+}
+
+function summarizeToolResult(result: string | undefined, isError: boolean | undefined, density: TranscriptDensity): string {
+  if (!result) return isError ? "Tool failed" : "Waiting for result";
+  const lines = result
+    .split(/\r?\n/)
+    .map((line) => compactWhitespace(line))
+    .filter(Boolean);
+  const firstLine = lines[0] ?? result;
+  return truncate(firstLine, density === "compact" ? 84 : 140);
+}
+
+function normalizeTranscript(entries: TranscriptEntry[], streaming: boolean): TranscriptBlock[] {
+  const blocks: TranscriptBlock[] = [];
+  const pendingToolBlocks = new Map<string, Extract<TranscriptBlock, { type: "tool" }>>();
+
+  for (const entry of entries) {
+    const previous = blocks[blocks.length - 1];
+
+    if (entry.kind === "assistant" || entry.kind === "user") {
+      const isStreaming = streaming && entry.kind === "assistant" && entry.delta === true;
+      if (previous?.type === "message" && previous.role === entry.kind) {
+        previous.text += previous.text.endsWith("\n") || entry.text.startsWith("\n") ? entry.text : `\n${entry.text}`;
+        previous.ts = entry.ts;
+        previous.streaming = previous.streaming || isStreaming;
+      } else {
+        blocks.push({
+          type: "message",
+          role: entry.kind,
+          ts: entry.ts,
+          text: entry.text,
+          streaming: isStreaming,
+        });
+      }
+      continue;
+    }
+
+    if (entry.kind === "thinking") {
+      const isStreaming = streaming && entry.delta === true;
+      if (previous?.type === "thinking") {
+        previous.text += previous.text.endsWith("\n") || entry.text.startsWith("\n") ? entry.text : `\n${entry.text}`;
+        previous.ts = entry.ts;
+        previous.streaming = previous.streaming || isStreaming;
+      } else {
+        blocks.push({
+          type: "thinking",
+          ts: entry.ts,
+          text: entry.text,
+          streaming: isStreaming,
+        });
+      }
+      continue;
+    }
+
+    if (entry.kind === "tool_call") {
+      const toolBlock: Extract<TranscriptBlock, { type: "tool" }> = {
+        type: "tool",
+        ts: entry.ts,
+        name: entry.name,
+        toolUseId: entry.toolUseId ?? extractToolUseId(entry.input),
+        input: entry.input,
+        status: "running",
+      };
+      blocks.push(toolBlock);
+      if (toolBlock.toolUseId) {
+        pendingToolBlocks.set(toolBlock.toolUseId, toolBlock);
+      }
+      continue;
+    }
+
+    if (entry.kind === "tool_result") {
+      const matched =
+        pendingToolBlocks.get(entry.toolUseId)
+        ?? [...blocks].reverse().find((block): block is Extract<TranscriptBlock, { type: "tool" }> => block.type === "tool" && block.status === "running");
+
+      if (matched) {
+        matched.result = entry.content;
+        matched.isError = entry.isError;
+        matched.status = entry.isError ? "error" : "completed";
+        matched.endTs = entry.ts;
+        pendingToolBlocks.delete(entry.toolUseId);
+      } else {
+        blocks.push({
+          type: "tool",
+          ts: entry.ts,
+          endTs: entry.ts,
+          name: "tool",
+          toolUseId: entry.toolUseId,
+          input: null,
+          result: entry.content,
+          isError: entry.isError,
+          status: entry.isError ? "error" : "completed",
+        });
+      }
+      continue;
+    }
+
+    if (entry.kind === "init") {
+      blocks.push({
+        type: "event",
+        ts: entry.ts,
+        label: "init",
+        tone: "info",
+        text: `Model ${entry.model}${entry.sessionId ? ` • session ${entry.sessionId}` : ""}`,
+      });
+      continue;
+    }
+
+    if (entry.kind === "result") {
+      const summary = `tokens in ${formatTokens(entry.inputTokens)} • out ${formatTokens(entry.outputTokens)} • cached ${formatTokens(entry.cachedTokens)} • $${entry.costUsd.toFixed(6)}`;
+      const detailParts = [
+        entry.text.trim(),
+        entry.subtype ? `subtype=${entry.subtype}` : "",
+        entry.errors.length > 0 ? `errors=${entry.errors.join(" | ")}` : "",
+      ].filter(Boolean);
+      blocks.push({
+        type: "event",
+        ts: entry.ts,
+        label: "result",
+        tone: entry.isError ? "error" : "info",
+        text: summary,
+        detail: detailParts.join("\n\n") || undefined,
+      });
+      continue;
+    }
+
+    if (entry.kind === "stderr") {
+      blocks.push({
+        type: "event",
+        ts: entry.ts,
+        label: "stderr",
+        tone: "error",
+        text: entry.text,
+      });
+      continue;
+    }
+
+    if (entry.kind === "system") {
+      blocks.push({
+        type: "event",
+        ts: entry.ts,
+        label: "system",
+        tone: "warn",
+        text: entry.text,
+      });
+      continue;
+    }
+
+    blocks.push({
+      type: "event",
+      ts: entry.ts,
+      label: "stdout",
+      tone: "neutral",
+      text: entry.text,
+    });
+  }
+
+  return blocks;
+}
+
+function TranscriptDisclosure({
+  icon,
+  label,
+  tone,
+  summary,
+  timestamp,
+  defaultOpen,
+  compact,
+  children,
+}: {
+  icon: typeof BrainCircuit;
+  label: string;
+  tone: "thinking" | "tool";
+  summary: string;
+  timestamp: string;
+  defaultOpen: boolean;
+  compact: boolean;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [touched, setTouched] = useState(false);
+
+  useEffect(() => {
+    if (!touched) {
+      setOpen(defaultOpen);
+    }
+  }, [defaultOpen, touched]);
+
+  const Icon = icon;
+  const borderTone =
+    tone === "thinking"
+      ? "border-amber-500/25 bg-amber-500/[0.07]"
+      : "border-cyan-500/25 bg-cyan-500/[0.07]";
+  const iconTone =
+    tone === "thinking"
+      ? "text-amber-700 dark:text-amber-300"
+      : "text-cyan-700 dark:text-cyan-300";
+
+  return (
+    <div className={cn("rounded-2xl border shadow-sm", borderTone, compact ? "p-2.5" : "p-3.5")}>
+      <button
+        type="button"
+        className="flex w-full items-start gap-3 text-left"
+        onClick={() => {
+          setTouched(true);
+          setOpen((current) => !current);
+        }}
+      >
+        <span className={cn("mt-0.5 inline-flex rounded-full border border-current/15 p-1", iconTone)}>
+          <Icon className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="flex items-center gap-2">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              {label}
+            </span>
+            <span className="text-[10px] text-muted-foreground">{timestamp}</span>
+          </span>
+          <span className={cn("mt-1 block min-w-0 break-words text-foreground/80", compact ? "text-xs" : "text-sm")}>
+            {summary}
+          </span>
+        </span>
+        {open ? <ChevronDown className="mt-1 h-4 w-4 text-muted-foreground" /> : <ChevronRight className="mt-1 h-4 w-4 text-muted-foreground" />}
+      </button>
+      {open && <div className={compact ? "mt-2.5" : "mt-3"}>{children}</div>}
+    </div>
+  );
+}
+
+function TranscriptMessageBlock({
+  block,
+  density,
+}: {
+  block: Extract<TranscriptBlock, { type: "message" }>;
+  density: TranscriptDensity;
+}) {
+  const isAssistant = block.role === "assistant";
+  const Icon = isAssistant ? Bot : User;
+  const panelTone = isAssistant
+    ? "border-emerald-500/25 bg-emerald-500/[0.08]"
+    : "border-violet-500/20 bg-violet-500/[0.07]";
+  const iconTone = isAssistant
+    ? "text-emerald-700 dark:text-emerald-300"
+    : "text-violet-700 dark:text-violet-300";
+  const compact = density === "compact";
+
+  return (
+    <div className={cn("rounded-2xl border shadow-sm", panelTone, compact ? "p-2.5" : "p-4")}>
+      <div className="mb-2 flex items-center gap-2">
+        <span className={cn("inline-flex rounded-full border border-current/15 p-1", iconTone)}>
+          <Icon className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
+        </span>
+        <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+          {isAssistant ? "Assistant" : "User"}
+        </span>
+        <span className="text-[10px] text-muted-foreground">{formatTimestamp(block.ts)}</span>
+        {block.streaming && (
+          <span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-700 dark:text-emerald-300">
+            <span className="relative flex h-1.5 w-1.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-70" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
+            </span>
+            Streaming
+          </span>
+        )}
+      </div>
+      {compact ? (
+        <div className="text-xs leading-5 text-foreground/85 whitespace-pre-wrap break-words">
+          {truncate(stripMarkdown(block.text), 360)}
+        </div>
+      ) : (
+        <MarkdownBody className="text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+          {block.text}
+        </MarkdownBody>
+      )}
+    </div>
+  );
+}
+
+function TranscriptThinkingBlock({
+  block,
+  density,
+}: {
+  block: Extract<TranscriptBlock, { type: "thinking" }>;
+  density: TranscriptDensity;
+}) {
+  const compact = density === "compact";
+  return (
+    <TranscriptDisclosure
+      icon={BrainCircuit}
+      label="Thinking"
+      tone="thinking"
+      summary={truncate(stripMarkdown(block.text), compact ? 120 : 220)}
+      timestamp={formatTimestamp(block.ts)}
+      defaultOpen={block.streaming}
+      compact={compact}
+    >
+      <div className={cn("rounded-xl border border-amber-500/15 bg-background/70 text-foreground/75 whitespace-pre-wrap break-words", compact ? "p-2 text-[11px]" : "p-3 text-sm")}>
+        {block.text}
+      </div>
+    </TranscriptDisclosure>
+  );
+}
+
+function TranscriptToolCard({
+  block,
+  density,
+}: {
+  block: Extract<TranscriptBlock, { type: "tool" }>;
+  density: TranscriptDensity;
+}) {
+  const compact = density === "compact";
+  const statusLabel =
+    block.status === "running"
+      ? "Running"
+      : block.status === "error"
+        ? "Errored"
+        : "Completed";
+  const statusTone =
+    block.status === "running"
+      ? "border-cyan-500/25 bg-cyan-500/10 text-cyan-700 dark:text-cyan-300"
+      : block.status === "error"
+        ? "border-red-500/25 bg-red-500/10 text-red-700 dark:text-red-300"
+        : "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+
+  return (
+    <TranscriptDisclosure
+      icon={Wrench}
+      label={block.name}
+      tone="tool"
+      summary={block.status === "running"
+        ? summarizeToolInput(block.name, block.input, density)
+        : summarizeToolResult(block.result, block.isError, density)}
+      timestamp={formatTimestamp(block.endTs ?? block.ts)}
+      defaultOpen={block.status === "error"}
+      compact={compact}
+    >
+      <div className="space-y-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className={cn("inline-flex rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em]", statusTone)}>
+            {statusLabel}
+          </span>
+          {block.toolUseId && (
+            <span className="rounded-full border border-border/70 bg-background/70 px-2 py-0.5 font-mono text-[10px] text-muted-foreground">
+              {truncate(block.toolUseId, compact ? 24 : 40)}
+            </span>
+          )}
+        </div>
+        <div className={cn("grid gap-2", compact ? "grid-cols-1" : "lg:grid-cols-2")}>
+          <div className="rounded-xl border border-border/70 bg-background/80 p-2.5">
+            <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Input
+            </div>
+            <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] text-foreground/80">
+              {formatToolPayload(block.input) || "<empty>"}
+            </pre>
+          </div>
+          <div className="rounded-xl border border-border/70 bg-background/80 p-2.5">
+            <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Result
+            </div>
+            <pre className={cn(
+              "overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px]",
+              block.status === "error" ? "text-red-700 dark:text-red-300" : "text-foreground/80",
+            )}>
+              {block.result ? formatToolPayload(block.result) : "Waiting for result..."}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </TranscriptDisclosure>
+  );
+}
+
+function TranscriptEventRow({
+  block,
+  density,
+}: {
+  block: Extract<TranscriptBlock, { type: "event" }>;
+  density: TranscriptDensity;
+}) {
+  const compact = density === "compact";
+  const toneClasses =
+    block.tone === "error"
+      ? "border-red-500/20 bg-red-500/[0.06] text-red-700 dark:text-red-300"
+      : block.tone === "warn"
+        ? "border-amber-500/20 bg-amber-500/[0.06] text-amber-700 dark:text-amber-300"
+        : block.tone === "info"
+          ? "border-sky-500/20 bg-sky-500/[0.06] text-sky-700 dark:text-sky-300"
+          : "border-border/70 bg-background/70 text-foreground/75";
+
+  return (
+    <div className={cn("rounded-xl border", toneClasses, compact ? "p-2" : "p-2.5")}>
+      <div className="flex items-start gap-2">
+        {block.tone === "error" ? (
+          <CircleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+        ) : block.tone === "warn" ? (
+          <TerminalSquare className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+        ) : (
+          <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+            <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              {block.label}
+            </span>
+            <span className="text-[10px] text-muted-foreground">
+              {compact ? relativeTime(block.ts) : formatTimestamp(block.ts)}
+            </span>
+          </div>
+          <div className={cn("mt-1 whitespace-pre-wrap break-words", compact ? "text-[11px]" : "text-xs")}>
+            {block.text}
+          </div>
+          {block.detail && (
+            <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg border border-border/60 bg-background/70 p-2 font-mono text-[11px] text-foreground/75">
+              {block.detail}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RawTranscriptView({
+  entries,
+  density,
+}: {
+  entries: TranscriptEntry[];
+  density: TranscriptDensity;
+}) {
+  const compact = density === "compact";
+  return (
+    <div className={cn(
+      "rounded-2xl border border-border/70 bg-neutral-100/70 p-3 font-mono shadow-inner dark:bg-neutral-950/60",
+      compact ? "space-y-1 text-[11px]" : "space-y-1.5 text-xs",
+    )}>
+      {entries.map((entry, idx) => (
+        <div
+          key={`${entry.kind}-${entry.ts}-${idx}`}
+          className={cn(
+            "grid gap-x-3",
+            compact ? "grid-cols-[auto_1fr]" : "grid-cols-[auto_auto_1fr]",
+          )}
+        >
+          <span className="text-[10px] text-muted-foreground">{formatTimestamp(entry.ts)}</span>
+          <span className={cn(
+            "text-[10px] uppercase tracking-[0.18em] text-muted-foreground",
+            compact && "hidden",
+          )}>
+            {entry.kind}
+          </span>
+          <pre className="min-w-0 whitespace-pre-wrap break-words text-foreground/80">
+            {entry.kind === "tool_call"
+              ? `${entry.name}\n${formatToolPayload(entry.input)}`
+              : entry.kind === "tool_result"
+                ? formatToolPayload(entry.content)
+                : entry.kind === "result"
+                  ? `${entry.text}\n${formatTokens(entry.inputTokens)} / ${formatTokens(entry.outputTokens)} / $${entry.costUsd.toFixed(6)}`
+                  : entry.kind === "init"
+                    ? `model=${entry.model}${entry.sessionId ? ` session=${entry.sessionId}` : ""}`
+                    : entry.text}
+          </pre>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function RunTranscriptView({
+  entries,
+  mode = "nice",
+  density = "comfortable",
+  limit,
+  streaming = false,
+  emptyMessage = "No transcript yet.",
+  className,
+}: RunTranscriptViewProps) {
+  const blocks = useMemo(() => normalizeTranscript(entries, streaming), [entries, streaming]);
+  const visibleBlocks = limit ? blocks.slice(-limit) : blocks;
+  const visibleEntries = limit ? entries.slice(-limit) : entries;
+
+  if (entries.length === 0) {
+    return (
+      <div className={cn("rounded-2xl border border-dashed border-border/70 bg-background/40 p-4 text-sm text-muted-foreground", className)}>
+        {emptyMessage}
+      </div>
+    );
+  }
+
+  if (mode === "raw") {
+    return (
+      <div className={className}>
+        <RawTranscriptView entries={visibleEntries} density={density} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {visibleBlocks.map((block, index) => (
+        <div
+          key={`${block.type}-${block.ts}-${index}`}
+          className={cn(index === visibleBlocks.length - 1 && streaming && "animate-in fade-in slide-in-from-bottom-1 duration-300")}
+        >
+          {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 === "event" && <TranscriptEventRow block={block} density={density} />}
+        </div>
+      ))}
+    </div>
+  );
+}

ui/src/components/transcript/useLiveRunTranscripts.ts

@@ -0,0 +1,282 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { LiveEvent } from "@paperclipai/shared";
+import { heartbeatsApi, type LiveRunForIssue } from "../../api/heartbeats";
+import { buildTranscript, getUIAdapter, type RunLogChunk, type TranscriptEntry } from "../../adapters";
+
+const LOG_POLL_INTERVAL_MS = 2000;
+const LOG_READ_LIMIT_BYTES = 256_000;
+
+interface UseLiveRunTranscriptsOptions {
+  runs: LiveRunForIssue[];
+  companyId?: string | null;
+  maxChunksPerRun?: number;
+}
+
+function readString(value: unknown): string | null {
+  return typeof value === "string" && value.trim().length > 0 ? value : null;
+}
+
+function isTerminalStatus(status: string): boolean {
+  return status === "failed" || status === "timed_out" || status === "cancelled" || status === "succeeded";
+}
+
+function parsePersistedLogContent(
+  runId: string,
+  content: string,
+  pendingByRun: Map<string, string>,
+): Array<RunLogChunk & { dedupeKey: string }> {
+  if (!content) return [];
+
+  const pendingKey = `${runId}:records`;
+  const combined = `${pendingByRun.get(pendingKey) ?? ""}${content}`;
+  const split = combined.split("\n");
+  pendingByRun.set(pendingKey, split.pop() ?? "");
+
+  const parsed: Array<RunLogChunk & { dedupeKey: string }> = [];
+  for (const line of split) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    try {
+      const raw = JSON.parse(trimmed) as { ts?: unknown; stream?: unknown; chunk?: unknown };
+      const stream = raw.stream === "stderr" || raw.stream === "system" ? raw.stream : "stdout";
+      const chunk = typeof raw.chunk === "string" ? raw.chunk : "";
+      const ts = typeof raw.ts === "string" ? raw.ts : new Date().toISOString();
+      if (!chunk) continue;
+      parsed.push({
+        ts,
+        stream,
+        chunk,
+        dedupeKey: `persisted:${runId}:${ts}:${stream}:${chunk}`,
+      });
+    } catch {
+      // Ignore malformed log rows.
+    }
+  }
+
+  return parsed;
+}
+
+export function useLiveRunTranscripts({
+  runs,
+  companyId,
+  maxChunksPerRun = 200,
+}: UseLiveRunTranscriptsOptions) {
+  const [chunksByRun, setChunksByRun] = useState<Map<string, RunLogChunk[]>>(new Map());
+  const seenChunkKeysRef = useRef(new Set<string>());
+  const pendingLogRowsByRunRef = useRef(new Map<string, string>());
+  const logOffsetByRunRef = useRef(new Map<string, number>());
+
+  const runById = useMemo(() => new Map(runs.map((run) => [run.id, run])), [runs]);
+  const activeRunIds = useMemo(
+    () => new Set(runs.filter((run) => !isTerminalStatus(run.status)).map((run) => run.id)),
+    [runs],
+  );
+  const runIdsKey = useMemo(
+    () => runs.map((run) => run.id).sort((a, b) => a.localeCompare(b)).join(","),
+    [runs],
+  );
+
+  const appendChunks = (runId: string, chunks: Array<RunLogChunk & { dedupeKey: string }>) => {
+    if (chunks.length === 0) return;
+    setChunksByRun((prev) => {
+      const next = new Map(prev);
+      const existing = [...(next.get(runId) ?? [])];
+      let changed = false;
+
+      for (const chunk of chunks) {
+        if (seenChunkKeysRef.current.has(chunk.dedupeKey)) continue;
+        seenChunkKeysRef.current.add(chunk.dedupeKey);
+        existing.push({ ts: chunk.ts, stream: chunk.stream, chunk: chunk.chunk });
+        changed = true;
+      }
+
+      if (!changed) return prev;
+      if (seenChunkKeysRef.current.size > 12000) {
+        seenChunkKeysRef.current.clear();
+      }
+      next.set(runId, existing.slice(-maxChunksPerRun));
+      return next;
+    });
+  };
+
+  useEffect(() => {
+    const knownRunIds = new Set(runs.map((run) => run.id));
+    setChunksByRun((prev) => {
+      const next = new Map<string, RunLogChunk[]>();
+      for (const [runId, chunks] of prev) {
+        if (knownRunIds.has(runId)) {
+          next.set(runId, chunks);
+        }
+      }
+      return next.size === prev.size ? prev : next;
+    });
+
+    for (const key of pendingLogRowsByRunRef.current.keys()) {
+      const runId = key.replace(/:records$/, "");
+      if (!knownRunIds.has(runId)) {
+        pendingLogRowsByRunRef.current.delete(key);
+      }
+    }
+    for (const runId of logOffsetByRunRef.current.keys()) {
+      if (!knownRunIds.has(runId)) {
+        logOffsetByRunRef.current.delete(runId);
+      }
+    }
+  }, [runs]);
+
+  useEffect(() => {
+    if (runs.length === 0) return;
+
+    let cancelled = false;
+
+    const readRunLog = async (run: LiveRunForIssue) => {
+      const offset = logOffsetByRunRef.current.get(run.id) ?? 0;
+      try {
+        const result = await heartbeatsApi.log(run.id, offset, LOG_READ_LIMIT_BYTES);
+        if (cancelled) return;
+
+        appendChunks(run.id, parsePersistedLogContent(run.id, result.content, pendingLogRowsByRunRef.current));
+
+        if (result.nextOffset !== undefined) {
+          logOffsetByRunRef.current.set(run.id, result.nextOffset);
+          return;
+        }
+        if (result.content.length > 0) {
+          logOffsetByRunRef.current.set(run.id, offset + result.content.length);
+        }
+      } catch {
+        // Ignore log read errors while output is initializing.
+      }
+    };
+
+    const readAll = async () => {
+      await Promise.all(runs.map((run) => readRunLog(run)));
+    };
+
+    void readAll();
+    const interval = window.setInterval(() => {
+      void readAll();
+    }, LOG_POLL_INTERVAL_MS);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [runIdsKey, runs]);
+
+  useEffect(() => {
+    if (!companyId || activeRunIds.size === 0) return;
+
+    let closed = false;
+    let reconnectTimer: number | null = null;
+    let socket: WebSocket | null = null;
+
+    const scheduleReconnect = () => {
+      if (closed) return;
+      reconnectTimer = window.setTimeout(connect, 1500);
+    };
+
+    const connect = () => {
+      if (closed) return;
+      const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+      const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
+      socket = new WebSocket(url);
+
+      socket.onmessage = (message) => {
+        const raw = typeof message.data === "string" ? message.data : "";
+        if (!raw) return;
+
+        let event: LiveEvent;
+        try {
+          event = JSON.parse(raw) as LiveEvent;
+        } catch {
+          return;
+        }
+
+        if (event.companyId !== companyId) return;
+        const payload = event.payload ?? {};
+        const runId = readString(payload["runId"]);
+        if (!runId || !activeRunIds.has(runId)) return;
+        if (!runById.has(runId)) return;
+
+        if (event.type === "heartbeat.run.log") {
+          const chunk = readString(payload["chunk"]);
+          if (!chunk) return;
+          const stream =
+            readString(payload["stream"]) === "stderr"
+              ? "stderr"
+              : readString(payload["stream"]) === "system"
+                ? "system"
+                : "stdout";
+          appendChunks(runId, [{
+            ts: event.createdAt,
+            stream,
+            chunk,
+            dedupeKey: `socket:log:${runId}:${event.createdAt}:${stream}:${chunk}`,
+          }]);
+          return;
+        }
+
+        if (event.type === "heartbeat.run.event") {
+          const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
+          const eventType = readString(payload["eventType"]) ?? "event";
+          const messageText = readString(payload["message"]) ?? eventType;
+          appendChunks(runId, [{
+            ts: event.createdAt,
+            stream: eventType === "error" ? "stderr" : "system",
+            chunk: messageText,
+            dedupeKey: `socket:event:${runId}:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`,
+          }]);
+          return;
+        }
+
+        if (event.type === "heartbeat.run.status") {
+          const status = readString(payload["status"]) ?? "updated";
+          appendChunks(runId, [{
+            ts: event.createdAt,
+            stream: isTerminalStatus(status) && status !== "succeeded" ? "stderr" : "system",
+            chunk: `run ${status}`,
+            dedupeKey: `socket:status:${runId}:${status}:${readString(payload["finishedAt"]) ?? ""}`,
+          }]);
+        }
+      };
+
+      socket.onerror = () => {
+        socket?.close();
+      };
+
+      socket.onclose = () => {
+        scheduleReconnect();
+      };
+    };
+
+    connect();
+
+    return () => {
+      closed = true;
+      if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
+      if (socket) {
+        socket.onmessage = null;
+        socket.onerror = null;
+        socket.onclose = null;
+        socket.close(1000, "live_run_transcripts_unmount");
+      }
+    };
+  }, [activeRunIds, companyId, runById]);
+
+  const transcriptByRun = useMemo(() => {
+    const next = new Map<string, TranscriptEntry[]>();
+    for (const run of runs) {
+      const adapter = getUIAdapter(run.adapterType);
+      next.set(run.id, buildTranscript(chunksByRun.get(run.id) ?? [], adapter.parseStdoutLine));
+    }
+    return next;
+  }, [chunksByRun, runs]);
+
+  return {
+    transcriptByRun,
+    hasOutputForRun(runId: string) {
+      return (chunksByRun.get(runId)?.length ?? 0) > 0;
+    },
+  };
+}

ui/src/pages/AgentDetail.tsx

@@ -17,7 +17,6 @@ import { AgentConfigForm } from "../components/AgentConfigForm";
 import { PageTabBar } from "../components/PageTabBar";
 import { adapterLabels, roleLabels } from "../components/agent-config-primitives";
 import { getUIAdapter, buildTranscript } from "../adapters";
-import type { TranscriptEntry } from "../adapters";
 import { StatusBadge } from "../components/StatusBadge";
 import { agentStatusDot, agentStatusDotDefault } from "../lib/status-colors";
 import { MarkdownBody } from "../components/MarkdownBody";
@@ -58,6 +57,7 @@ import {
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { AgentIcon, AgentIconPicker } from "../components/AgentIconPicker";
+import { RunTranscriptView, type TranscriptMode } from "../components/transcript/RunTranscriptView";
 import { isUuidLike, type Agent, type HeartbeatRun, type HeartbeatRunEvent, type AgentRuntimeState, type LiveEvent } from "@paperclipai/shared";
 import { agentRouteRef } from "../lib/utils";
 
@@ -1675,6 +1675,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
   const [logOffset, setLogOffset] = useState(0);
   const [isFollowing, setIsFollowing] = useState(false);
   const [isStreamingConnected, setIsStreamingConnected] = useState(false);
+  const [transcriptMode, setTranscriptMode] = useState<TranscriptMode>("nice");
   const logEndRef = useRef<HTMLDivElement>(null);
   const pendingLogLineRef = useRef("");
   const scrollContainerRef = useRef<ScrollContainer | null>(null);
@@ -2028,6 +2029,10 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
   const adapter = useMemo(() => getUIAdapter(adapterType), [adapterType]);
   const transcript = useMemo(() => buildTranscript(logLines, adapter.parseStdoutLine), [logLines, adapter]);
 
+  useEffect(() => {
+    setTranscriptMode("nice");
+  }, [run.id]);
+
   if (loading && logLoading) {
     return <p className="text-xs text-muted-foreground">Loading run logs...</p>;
   }
@@ -2120,6 +2125,23 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
           Transcript ({transcript.length})
         </span>
         <div className="flex items-center gap-2">
+          <div className="inline-flex rounded-lg border border-border/70 bg-background/70 p-0.5">
+            {(["nice", "raw"] as const).map((mode) => (
+              <button
+                key={mode}
+                type="button"
+                className={cn(
+                  "rounded-md px-2.5 py-1 text-[11px] font-medium capitalize transition-colors",
+                  transcriptMode === mode
+                    ? "bg-accent text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                onClick={() => setTranscriptMode(mode)}
+              >
+                {mode}
+              </button>
+            ))}
+          </div>
           {isLive && !isFollowing && (
             <Button
               variant="ghost"
@@ -2146,123 +2168,18 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
           )}
         </div>
       </div>
-      <div className="bg-neutral-100 dark:bg-neutral-950 rounded-lg p-3 font-mono text-xs space-y-0.5 overflow-x-hidden">
+      <div className="max-h-[38rem] overflow-y-auto rounded-2xl border border-border/70 bg-background/40 p-3 sm:p-4">
-        {transcript.length === 0 && !run.logRef && (
+        <RunTranscriptView
-          <div className="text-neutral-500">No persisted transcript for this run.</div>
+          entries={transcript}
+          mode={transcriptMode}
+          streaming={isLive}
+          emptyMessage={run.logRef ? "Waiting for transcript..." : "No persisted transcript for this run."}
+        />
+        {logError && (
+          <div className="mt-3 rounded-xl border border-red-500/20 bg-red-500/[0.06] px-3 py-2 text-xs text-red-700 dark:text-red-300">
+            {logError}
+          </div>
         )}
-        {transcript.map((entry, idx) => {
-          const time = new Date(entry.ts).toLocaleTimeString("en-US", { hour12: false });
-          const grid = "grid grid-cols-[auto_auto_1fr] gap-x-2 sm:gap-x-3 items-baseline";
-          const tsCell = "text-neutral-400 dark:text-neutral-600 select-none w-12 sm:w-16 text-[10px] sm:text-xs";
-          const lblCell = "w-14 sm:w-20 text-[10px] sm:text-xs";
-          const contentCell = "min-w-0 whitespace-pre-wrap break-words overflow-hidden";
-          const expandCell = "col-span-full md:col-start-3 md:col-span-1";
-
-          if (entry.kind === "assistant") {
-            return (
-              <div key={`${entry.ts}-assistant-${idx}`} className={cn(grid, "py-0.5")}>
-                <span className={tsCell}>{time}</span>
-                <span className={cn(lblCell, "text-green-700 dark:text-green-300")}>assistant</span>
-                <span className={cn(contentCell, "text-green-900 dark:text-green-100")}>{entry.text}</span>
-              </div>
-            );
-          }
-
-          if (entry.kind === "thinking") {
-            return (
-              <div key={`${entry.ts}-thinking-${idx}`} className={cn(grid, "py-0.5")}>
-                <span className={tsCell}>{time}</span>
-                <span className={cn(lblCell, "text-green-600/60 dark:text-green-300/60")}>thinking</span>
-                <span className={cn(contentCell, "text-green-800/60 dark:text-green-100/60 italic")}>{entry.text}</span>
-              </div>
-            );
-          }
-
-          if (entry.kind === "user") {
-            return (
-              <div key={`${entry.ts}-user-${idx}`} className={cn(grid, "py-0.5")}>
-                <span className={tsCell}>{time}</span>
-                <span className={cn(lblCell, "text-neutral-500 dark:text-neutral-400")}>user</span>
-                <span className={cn(contentCell, "text-neutral-700 dark:text-neutral-300")}>{entry.text}</span>
-              </div>
-            );
-          }
-
-          if (entry.kind === "tool_call") {
-            return (
-              <div key={`${entry.ts}-tool-${idx}`} className={cn(grid, "gap-y-1 py-0.5")}>
-                <span className={tsCell}>{time}</span>
-                <span className={cn(lblCell, "text-yellow-700 dark:text-yellow-300")}>tool_call</span>
-                <span className="text-yellow-900 dark:text-yellow-100 min-w-0">{entry.name}</span>
-                <pre className={cn(expandCell, "bg-neutral-200 dark:bg-neutral-900 rounded p-2 text-[11px] overflow-x-auto whitespace-pre-wrap text-neutral-800 dark:text-neutral-200")}>
-                  {JSON.stringify(entry.input, null, 2)}
-                </pre>
-              </div>
-            );
-          }
-
-          if (entry.kind === "tool_result") {
-            return (
-              <div key={`${entry.ts}-toolres-${idx}`} className={cn(grid, "gap-y-1 py-0.5")}>
-                <span className={tsCell}>{time}</span>
-                <span className={cn(lblCell, entry.isError ? "text-red-600 dark:text-red-300" : "text-purple-600 dark:text-purple-300")}>tool_result</span>
-                {entry.isError ? <span className="text-red-600 dark:text-red-400 min-w-0">error</span> : <span />}
-                <pre className={cn(expandCell, "bg-neutral-100 dark:bg-neutral-900 rounded p-2 text-[11px] overflow-x-auto whitespace-pre-wrap text-neutral-700 dark:text-neutral-300 max-h-60 overflow-y-auto")}>
-                  {(() => { try { return JSON.stringify(JSON.parse(entry.content), null, 2); } catch { return entry.content; } })()}
-                </pre>
-              </div>
-            );
-          }
-
-          if (entry.kind === "init") {
-            return (
-              <div key={`${entry.ts}-init-${idx}`} className={grid}>
-                <span className={tsCell}>{time}</span>
-                <span className={cn(lblCell, "text-blue-700 dark:text-blue-300")}>init</span>
-                <span className={cn(contentCell, "text-blue-900 dark:text-blue-100")}>model: {entry.model}{entry.sessionId ? `, session: ${entry.sessionId}` : ""}</span>
-              </div>
-            );
-          }
-
-          if (entry.kind === "result") {
-            return (
-              <div key={`${entry.ts}-result-${idx}`} className={cn(grid, "gap-y-1 py-0.5")}>
-                <span className={tsCell}>{time}</span>
-                <span className={cn(lblCell, "text-cyan-700 dark:text-cyan-300")}>result</span>
-                <span className={cn(contentCell, "text-cyan-900 dark:text-cyan-100")}>
-                  tokens in={formatTokens(entry.inputTokens)} out={formatTokens(entry.outputTokens)} cached={formatTokens(entry.cachedTokens)} cost=${entry.costUsd.toFixed(6)}
-                </span>
-                {(entry.subtype || entry.isError || entry.errors.length > 0) && (
-                  <div className={cn(expandCell, "text-red-600 dark:text-red-300 whitespace-pre-wrap break-words")}>
-                    subtype={entry.subtype || "unknown"} is_error={entry.isError ? "true" : "false"}
-                    {entry.errors.length > 0 ? ` errors=${entry.errors.join(" | ")}` : ""}
-                  </div>
-                )}
-                {entry.text && (
-                  <div className={cn(expandCell, "whitespace-pre-wrap break-words text-neutral-800 dark:text-neutral-100")}>{entry.text}</div>
-                )}
-              </div>
-            );
-          }
-
-          const rawText = entry.text;
-          const label =
-            entry.kind === "stderr" ? "stderr" :
-            entry.kind === "system" ? "system" :
-            "stdout";
-          const color =
-            entry.kind === "stderr" ? "text-red-600 dark:text-red-300" :
-            entry.kind === "system" ? "text-blue-600 dark:text-blue-300" :
-            "text-neutral-500";
-          return (
-            <div key={`${entry.ts}-raw-${idx}`} className={grid}>
-              <span className={tsCell}>{time}</span>
-              <span className={cn(lblCell, color)}>{label}</span>
-              <span className={cn(contentCell, color)}>{rawText}</span>
-            </div>
-          )
-        })}
-        {logError && <div className="text-red-600 dark:text-red-300">{logError}</div>}
         <div ref={logEndRef} />
       </div>