Reuse chat-style run feed on dashboard

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

ui/src/components/ActiveAgentsPanel.tsx

@@ -3,13 +3,13 @@ import { Link } from "@/lib/router";
 import { useQuery } from "@tanstack/react-query";
 import type { Issue } from "@paperclipai/shared";
 import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
-import { issuesApi } from "../api/issues";
 import type { TranscriptEntry } from "../adapters";
+import { issuesApi } from "../api/issues";
 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 { RunChatSurface } from "./RunChatSurface";
 import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
 
 const MIN_DASHBOARD_RUNS = 4;
@@ -63,6 +63,7 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
           {runs.map((run) => (
             <AgentRunCard
               key={run.id}
+              companyId={companyId}
               run={run}
               issue={run.issueId ? issueById.get(run.issueId) : undefined}
               transcript={transcriptByRun.get(run.id) ?? []}
@@ -77,12 +78,14 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
 }
 
 function AgentRunCard({
+  companyId,
   run,
   issue,
   transcript,
   hasOutput,
   isActive,
 }: {
+  companyId: string;
   run: LiveRunForIssue;
   issue?: Issue;
   transcript: TranscriptEntry[];
@@ -141,14 +144,11 @@ function AgentRunCard({
       </div>
 
       <div className="min-h-0 flex-1 overflow-y-auto p-3">
-        <RunTranscriptView
-          entries={transcript}
-          density="compact"
-          limit={5}
-          streaming={isActive}
-          collapseStdout
-          thinkingClassName="!text-[10px] !leading-4"
-          emptyMessage={hasOutput ? "Waiting for transcript parsing..." : isActive ? "Waiting for output..." : "No transcript captured."}
+        <RunChatSurface
+          run={run}
+          transcript={transcript}
+          hasOutput={hasOutput}
+          companyId={companyId}
         />
       </div>
     </div>

ui/src/components/IssueChatThread.test.tsx

@@ -139,6 +139,39 @@ describe("IssueChatThread", () => {
     });
   });
 
+  it("supports the embedded read-only variant without the jump control", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <IssueChatThread
+            comments={[]}
+            linkedRuns={[]}
+            timelineEvents={[]}
+            liveRuns={[]}
+            onAdd={async () => {}}
+            showComposer={false}
+            showJumpToLatest={false}
+            variant="embedded"
+            emptyMessage="No run output captured."
+            enableLiveTranscriptPolling={false}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("No run output captured.");
+    expect(container.textContent).not.toContain("Jump to latest");
+
+    const viewport = container.querySelector('[data-testid="thread-viewport"]') as HTMLDivElement | null;
+    expect(viewport?.className).toContain("space-y-3");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("stores and restores the composer draft per issue key", () => {
     vi.useFakeTimers();
     const root = createRoot(container);

ui/src/components/IssueChatThread.tsx

@@ -175,9 +175,13 @@ interface IssueChatThreadProps {
   mentions?: MentionOption[];
   composerDisabledReason?: string | null;
   showComposer?: boolean;
+  showJumpToLatest?: boolean;
+  emptyMessage?: string;
+  variant?: "full" | "embedded";
   enableLiveTranscriptPolling?: boolean;
   transcriptsByRunId?: ReadonlyMap<string, readonly IssueChatTranscriptEntry[]>;
   hasOutputForRun?: (runId: string) => boolean;
+  includeSucceededRunsWithoutOutput?: boolean;
   onInterruptQueued?: (runId: string) => Promise<void>;
   interruptingQueuedRunId?: string | null;
 }
@@ -1591,9 +1595,13 @@ export function IssueChatThread({
   mentions = [],
   composerDisabledReason = null,
   showComposer = true,
+  showJumpToLatest,
+  emptyMessage,
+  variant = "full",
   enableLiveTranscriptPolling = true,
   transcriptsByRunId,
   hasOutputForRun: hasOutputForRunOverride,
+  includeSucceededRunsWithoutOutput = false,
   onInterruptQueued,
   interruptingQueuedRunId = null,
 }: IssueChatThreadProps) {
@@ -1659,6 +1667,7 @@ export function IssueChatThread({
         activeRun,
         transcriptsByRunId: resolvedTranscriptByRun,
         hasOutputForRun: resolvedHasOutputForRun,
+        includeSucceededRunsWithoutOutput,
         companyId,
         projectId,
         agentMap,
@@ -1672,6 +1681,7 @@ export function IssueChatThread({
       activeRun,
       resolvedTranscriptByRun,
       resolvedHasOutputForRun,
+      includeSucceededRunsWithoutOutput,
       companyId,
       projectId,
       agentMap,
@@ -1743,25 +1753,38 @@ export function IssueChatThread({
     [],
   );
 
+  const resolvedShowJumpToLatest = showJumpToLatest ?? variant === "full";
+  const resolvedEmptyMessage = emptyMessage
+    ?? (variant === "embedded"
+      ? "No run output yet."
+      : "This issue conversation is empty. Start with a message below.");
+
   return (
     <AssistantRuntimeProvider runtime={runtime}>
       <IssueChatCtx.Provider value={chatCtx}>
-      <div className="space-y-4">
-        <div className="flex justify-end">
-          <button
-            type="button"
-            onClick={handleJumpToLatest}
-            className="text-xs text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Jump to latest
-          </button>
-        </div>
+      <div className={cn(variant === "embedded" ? "space-y-3" : "space-y-4")}>
+        {resolvedShowJumpToLatest ? (
+          <div className="flex justify-end">
+            <button
+              type="button"
+              onClick={handleJumpToLatest}
+              className="text-xs text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Jump to latest
+            </button>
+          </div>
+        ) : null}
 
         <ThreadPrimitive.Root className="">
-          <ThreadPrimitive.Viewport className="space-y-4">
+          <ThreadPrimitive.Viewport className={variant === "embedded" ? "space-y-3" : "space-y-4"}>
             <ThreadPrimitive.Empty>
-              <div className="rounded-2xl border border-dashed border-border bg-card px-6 py-10 text-center text-sm text-muted-foreground">
-                This issue conversation is empty. Start with a message below.
+              <div className={cn(
+                "text-center text-sm text-muted-foreground",
+                variant === "embedded"
+                  ? "rounded-xl border border-dashed border-border/70 bg-background/60 px-4 py-6"
+                  : "rounded-2xl border border-dashed border-border bg-card px-6 py-10",
+              )}>
+                {resolvedEmptyMessage}
               </div>
             </ThreadPrimitive.Empty>
             <ThreadPrimitive.Messages components={components} />

ui/src/components/LiveRunWidget.tsx

@@ -6,8 +6,8 @@ import { queryKeys } from "../lib/queryKeys";
 import { formatDateTime } from "../lib/utils";
 import { ExternalLink, Square } from "lucide-react";
 import { Identity } from "./Identity";
+import { RunChatSurface } from "./RunChatSurface";
 import { StatusBadge } from "./StatusBadge";
-import { RunTranscriptView } from "./transcript/RunTranscriptView";
 import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
 
 interface LiveRunWidgetProps {
@@ -93,7 +93,7 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
           Live Runs
         </div>
         <div className="mt-1 text-xs text-muted-foreground">
-          Streamed with the same transcript UI used on the full run detail page.
+          Uses the shared chat-style run surface from issue activity.
         </div>
       </div>
 
@@ -142,13 +142,11 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
               </div>
 
               <div className="max-h-[320px] overflow-y-auto pr-1">
-                <RunTranscriptView
-                  entries={transcript}
-                  density="compact"
-                  limit={8}
-                  streaming={isActive}
-                  collapseStdout
-                  emptyMessage={hasOutputForRun(run.id) ? "Waiting for transcript parsing..." : "Waiting for run output..."}
+                <RunChatSurface
+                  run={run}
+                  transcript={transcript}
+                  hasOutput={hasOutputForRun(run.id)}
+                  companyId={companyId}
                 />
               </div>
             </section>

ui/src/components/RunChatSurface.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from "react";
+import type { TranscriptEntry } from "../adapters";
+import type { LiveRunForIssue } from "../api/heartbeats";
+import { IssueChatThread } from "./IssueChatThread";
+import type { IssueChatLinkedRun } from "../lib/issue-chat-messages";
+
+function isRunActive(run: LiveRunForIssue) {
+  return run.status === "queued" || run.status === "running";
+}
+
+interface RunChatSurfaceProps {
+  run: LiveRunForIssue;
+  transcript: TranscriptEntry[];
+  hasOutput: boolean;
+  companyId?: string | null;
+}
+
+export function RunChatSurface({
+  run,
+  transcript,
+  hasOutput,
+  companyId,
+}: RunChatSurfaceProps) {
+  const active = isRunActive(run);
+  const liveRuns = active ? [run] : [];
+  const linkedRuns = useMemo<IssueChatLinkedRun[]>(
+    () =>
+      active
+        ? []
+        : [{
+            runId: run.id,
+            status: run.status,
+            agentId: run.agentId,
+            agentName: run.agentName,
+            createdAt: run.createdAt,
+            startedAt: run.startedAt,
+            finishedAt: run.finishedAt,
+          }],
+    [active, run],
+  );
+  const transcriptsByRunId = useMemo(
+    () => new Map([[run.id, transcript as readonly TranscriptEntry[]]]),
+    [run.id, transcript],
+  );
+
+  return (
+    <IssueChatThread
+      comments={[]}
+      linkedRuns={linkedRuns}
+      timelineEvents={[]}
+      liveRuns={liveRuns}
+      companyId={companyId}
+      onAdd={async () => {}}
+      showComposer={false}
+      showJumpToLatest={false}
+      variant="embedded"
+      emptyMessage={active ? "Waiting for run output..." : "No run output captured."}
+      enableLiveTranscriptPolling={false}
+      transcriptsByRunId={transcriptsByRunId}
+      hasOutputForRun={(runId) => runId === run.id && hasOutput}
+      includeSucceededRunsWithoutOutput
+    />
+  );
+}