diff --git a/cli/src/__tests__/worktree.test.ts b/cli/src/__tests__/worktree.test.ts
index 6f6af963..1c8ed5e1 100644
--- a/cli/src/__tests__/worktree.test.ts
+++ b/cli/src/__tests__/worktree.test.ts
@@ -13,6 +13,7 @@ import {
   resolveWorktreeMakeTargetPath,
   worktreeInitCommand,
   worktreeMakeCommand,
+  worktreeReseedCommand,
 } from "../commands/worktree.js";
 import {
   buildWorktreeConfig,
@@ -481,6 +482,191 @@ describe("worktree helpers", () => {
     }
   });
 
+  it("requires an explicit source for worktree reseed", async () => {
+    const tempRoot = fs.mkdtempSync(path.join(os.tmpdir(), "paperclip-worktree-reseed-source-"));
+    const repoRoot = path.join(tempRoot, "repo");
+    const originalCwd = process.cwd();
+    const originalPaperclipConfig = process.env.PAPERCLIP_CONFIG;
+
+    try {
+      fs.mkdirSync(repoRoot, { recursive: true });
+      delete process.env.PAPERCLIP_CONFIG;
+      process.chdir(repoRoot);
+
+      await expect(worktreeReseedCommand({ seed: false, yes: true })).rejects.toThrow(
+        "Reseed requires an explicit source.",
+      );
+    } finally {
+      process.chdir(originalCwd);
+      if (originalPaperclipConfig === undefined) {
+        delete process.env.PAPERCLIP_CONFIG;
+      } else {
+        process.env.PAPERCLIP_CONFIG = originalPaperclipConfig;
+      }
+      fs.rmSync(tempRoot, { recursive: true, force: true });
+    }
+  });
+
+  it("reseed preserves the current worktree ports, instance id, and branding", async () => {
+    const tempRoot = fs.mkdtempSync(path.join(os.tmpdir(), "paperclip-worktree-reseed-"));
+    const repoRoot = path.join(tempRoot, "repo");
+    const sourceRoot = path.join(tempRoot, "source");
+    const homeDir = path.join(tempRoot, ".paperclip-worktrees");
+    const currentInstanceId = "existing-worktree";
+    const currentPaths = resolveWorktreeLocalPaths({
+      cwd: repoRoot,
+      homeDir,
+      instanceId: currentInstanceId,
+    });
+    const sourcePaths = resolveWorktreeLocalPaths({
+      cwd: sourceRoot,
+      homeDir: path.join(tempRoot, ".paperclip-source"),
+      instanceId: "default",
+    });
+    const originalCwd = process.cwd();
+    const originalPaperclipConfig = process.env.PAPERCLIP_CONFIG;
+
+    try {
+      fs.mkdirSync(path.dirname(currentPaths.configPath), { recursive: true });
+      fs.mkdirSync(path.dirname(sourcePaths.configPath), { recursive: true });
+      fs.mkdirSync(repoRoot, { recursive: true });
+      fs.mkdirSync(sourceRoot, { recursive: true });
+
+      const currentConfig = buildWorktreeConfig({
+        sourceConfig: buildSourceConfig(),
+        paths: currentPaths,
+        serverPort: 3114,
+        databasePort: 54341,
+      });
+      const sourceConfig = buildWorktreeConfig({
+        sourceConfig: buildSourceConfig(),
+        paths: sourcePaths,
+        serverPort: 3200,
+        databasePort: 54400,
+      });
+      fs.writeFileSync(currentPaths.configPath, JSON.stringify(currentConfig, null, 2), "utf8");
+      fs.writeFileSync(sourcePaths.configPath, JSON.stringify(sourceConfig, null, 2), "utf8");
+      fs.writeFileSync(
+        currentPaths.envPath,
+        [
+          `PAPERCLIP_HOME=${homeDir}`,
+          `PAPERCLIP_INSTANCE_ID=${currentInstanceId}`,
+          "PAPERCLIP_WORKTREE_NAME=existing-name",
+          "PAPERCLIP_WORKTREE_COLOR=\"#112233\"",
+        ].join("\n"),
+        "utf8",
+      );
+
+      delete process.env.PAPERCLIP_CONFIG;
+      process.chdir(repoRoot);
+
+      await worktreeReseedCommand({
+        fromConfig: sourcePaths.configPath,
+        seed: false,
+        yes: true,
+      });
+
+      const rewrittenConfig = JSON.parse(fs.readFileSync(currentPaths.configPath, "utf8"));
+      const rewrittenEnv = fs.readFileSync(currentPaths.envPath, "utf8");
+
+      expect(rewrittenConfig.server.port).toBe(3114);
+      expect(rewrittenConfig.database.embeddedPostgresPort).toBe(54341);
+      expect(rewrittenConfig.database.embeddedPostgresDataDir).toBe(currentPaths.embeddedPostgresDataDir);
+      expect(rewrittenEnv).toContain(`PAPERCLIP_INSTANCE_ID=${currentInstanceId}`);
+      expect(rewrittenEnv).toContain("PAPERCLIP_WORKTREE_NAME=existing-name");
+      expect(rewrittenEnv).toContain("PAPERCLIP_WORKTREE_COLOR=\"#112233\"");
+    } finally {
+      process.chdir(originalCwd);
+      if (originalPaperclipConfig === undefined) {
+        delete process.env.PAPERCLIP_CONFIG;
+      } else {
+        process.env.PAPERCLIP_CONFIG = originalPaperclipConfig;
+      }
+      fs.rmSync(tempRoot, { recursive: true, force: true });
+    }
+  });
+
+  it("restores the current worktree config and instance data if reseed fails", async () => {
+    const tempRoot = fs.mkdtempSync(path.join(os.tmpdir(), "paperclip-worktree-reseed-rollback-"));
+    const repoRoot = path.join(tempRoot, "repo");
+    const sourceRoot = path.join(tempRoot, "source");
+    const homeDir = path.join(tempRoot, ".paperclip-worktrees");
+    const currentInstanceId = "rollback-worktree";
+    const currentPaths = resolveWorktreeLocalPaths({
+      cwd: repoRoot,
+      homeDir,
+      instanceId: currentInstanceId,
+    });
+    const sourcePaths = resolveWorktreeLocalPaths({
+      cwd: sourceRoot,
+      homeDir: path.join(tempRoot, ".paperclip-source"),
+      instanceId: "default",
+    });
+    const originalCwd = process.cwd();
+    const originalPaperclipConfig = process.env.PAPERCLIP_CONFIG;
+
+    try {
+      fs.mkdirSync(path.dirname(currentPaths.configPath), { recursive: true });
+      fs.mkdirSync(path.dirname(sourcePaths.configPath), { recursive: true });
+      fs.mkdirSync(currentPaths.instanceRoot, { recursive: true });
+      fs.mkdirSync(path.dirname(sourcePaths.secretsKeyFilePath), { recursive: true });
+      fs.mkdirSync(repoRoot, { recursive: true });
+      fs.mkdirSync(sourceRoot, { recursive: true });
+
+      const currentConfig = buildWorktreeConfig({
+        sourceConfig: buildSourceConfig(),
+        paths: currentPaths,
+        serverPort: 3114,
+        databasePort: 54341,
+      });
+      const sourceConfig = {
+        ...buildSourceConfig(),
+        database: {
+          mode: "postgres",
+          connectionString: "",
+        },
+        secrets: {
+          provider: "local_encrypted",
+          strictMode: false,
+          localEncrypted: {
+            keyFilePath: sourcePaths.secretsKeyFilePath,
+          },
+        },
+      } as PaperclipConfig;
+
+      fs.writeFileSync(currentPaths.configPath, JSON.stringify(currentConfig, null, 2), "utf8");
+      fs.writeFileSync(currentPaths.envPath, `PAPERCLIP_HOME=${homeDir}\nPAPERCLIP_INSTANCE_ID=${currentInstanceId}\n`, "utf8");
+      fs.writeFileSync(path.join(currentPaths.instanceRoot, "marker.txt"), "keep me", "utf8");
+      fs.writeFileSync(sourcePaths.configPath, JSON.stringify(sourceConfig, null, 2), "utf8");
+      fs.writeFileSync(sourcePaths.secretsKeyFilePath, "source-secret", "utf8");
+
+      delete process.env.PAPERCLIP_CONFIG;
+      process.chdir(repoRoot);
+
+      await expect(worktreeReseedCommand({
+        fromConfig: sourcePaths.configPath,
+        yes: true,
+      })).rejects.toThrow("Source instance uses postgres mode but has no connection string");
+
+      const restoredConfig = JSON.parse(fs.readFileSync(currentPaths.configPath, "utf8"));
+      const restoredEnv = fs.readFileSync(currentPaths.envPath, "utf8");
+      const restoredMarker = fs.readFileSync(path.join(currentPaths.instanceRoot, "marker.txt"), "utf8");
+
+      expect(restoredConfig.server.port).toBe(3114);
+      expect(restoredConfig.database.embeddedPostgresPort).toBe(54341);
+      expect(restoredEnv).toContain(`PAPERCLIP_INSTANCE_ID=${currentInstanceId}`);
+      expect(restoredMarker).toBe("keep me");
+    } finally {
+      process.chdir(originalCwd);
+      if (originalPaperclipConfig === undefined) {
+        delete process.env.PAPERCLIP_CONFIG;
+      } else {
+        process.env.PAPERCLIP_CONFIG = originalPaperclipConfig;
+      }
+      fs.rmSync(tempRoot, { recursive: true, force: true });
+    }
+  });
+
   it("rebinds same-repo workspace paths onto the current worktree root", () => {
     expect(
       rebindWorkspaceCwd({
diff --git a/cli/src/commands/worktree.ts b/cli/src/commands/worktree.ts
index 65e74849..3025e955 100644
--- a/cli/src/commands/worktree.ts
+++ b/cli/src/commands/worktree.ts
@@ -80,6 +80,7 @@ import {
 
 type WorktreeInitOptions = {
   name?: string;
+  color?: string;
   instance?: string;
   home?: string;
   fromConfig?: string;
@@ -97,6 +98,22 @@ type WorktreeMakeOptions = WorktreeInitOptions & {
   startPoint?: string;
 };
 
+type WorktreeReseedOptions = {
+  fromConfig?: string;
+  fromDataDir?: string;
+  fromInstance?: string;
+  home?: string;
+  seedMode?: string;
+  yes?: boolean;
+  seed?: boolean;
+};
+
+type WorktreeReseedBackup = {
+  tempRoot: string;
+  repoConfigDirBackup: string | null;
+  instanceRootBackup: string | null;
+};
+
 type WorktreeEnvOptions = {
   config?: string;
   json?: boolean;
@@ -942,8 +959,8 @@ async function runWorktreeInit(opts: WorktreeInitOptions): Promise<void> {
     instanceId,
   });
   const branding = {
-    name: worktreeName,
-    color: generateWorktreeColor(),
+    name: opts.name ?? worktreeName,
+    color: opts.color ?? generateWorktreeColor(),
   };
   const sourceConfigPath = resolveSourceConfigPath(opts);
   const sourceConfig = existsSync(sourceConfigPath) ? readConfig(sourceConfigPath) : null;
@@ -1051,6 +1068,160 @@ export async function worktreeInitCommand(opts: WorktreeInitOptions): Promise<vo
   await runWorktreeInit(opts);
 }
 
+function hasExplicitSourceSelection(opts: {
+  fromConfig?: string;
+  fromDataDir?: string;
+  fromInstance?: string;
+  sourceConfigPathOverride?: string;
+}): boolean {
+  return Boolean(
+    nonEmpty(opts.fromConfig)
+    || nonEmpty(opts.fromDataDir)
+    || nonEmpty(opts.fromInstance)
+    || nonEmpty(opts.sourceConfigPathOverride),
+  );
+}
+
+function resolveCurrentWorktreeReseedState(opts: { home?: string } = {}) {
+  const currentConfigPath = resolveConfigPath();
+  if (!existsSync(currentConfigPath)) {
+    throw new Error(
+      "Current directory does not have a Paperclip worktree config. Run `paperclipai worktree init` here first.",
+    );
+  }
+  const currentConfig = readConfig(currentConfigPath);
+  if (!currentConfig) {
+    throw new Error(`Could not read current worktree config at ${currentConfigPath}.`);
+  }
+  if (currentConfig.database.mode !== "embedded-postgres") {
+    throw new Error("Worktree reseed only supports embedded-postgres worktree instances.");
+  }
+
+  const currentEnvEntries = readPaperclipEnvEntries(resolvePaperclipEnvFile(currentConfigPath));
+  const instanceRoot = path.dirname(currentConfig.database.embeddedPostgresDataDir);
+  const derivedHomeDir = path.dirname(path.dirname(instanceRoot));
+
+  return {
+    currentConfigPath: path.resolve(currentConfigPath),
+    instanceId:
+      nonEmpty(currentEnvEntries.PAPERCLIP_INSTANCE_ID)
+      ?? nonEmpty(path.basename(instanceRoot))
+      ?? sanitizeWorktreeInstanceId(path.basename(process.cwd())),
+    homeDir: path.resolve(expandHomePrefix(opts.home ?? currentEnvEntries.PAPERCLIP_HOME ?? derivedHomeDir)),
+    serverPort: currentConfig.server.port,
+    dbPort: currentConfig.database.embeddedPostgresPort,
+    worktreeName: nonEmpty(currentEnvEntries.PAPERCLIP_WORKTREE_NAME) ?? undefined,
+    worktreeColor: nonEmpty(currentEnvEntries.PAPERCLIP_WORKTREE_COLOR) ?? undefined,
+  };
+}
+
+async function snapshotDirectory(sourcePath: string, targetPath: string): Promise<string | null> {
+  if (!existsSync(sourcePath)) {
+    return null;
+  }
+  await fsPromises.cp(sourcePath, targetPath, { recursive: true });
+  return targetPath;
+}
+
+async function snapshotWorktreeReseedState(target: {
+  repoConfigDir: string;
+  instanceRoot: string;
+}): Promise<WorktreeReseedBackup> {
+  const tempRoot = await fsPromises.mkdtemp(path.join(os.tmpdir(), "paperclip-worktree-reseed-backup-"));
+  return {
+    tempRoot,
+    repoConfigDirBackup: await snapshotDirectory(
+      target.repoConfigDir,
+      path.resolve(tempRoot, "repo-config"),
+    ),
+    instanceRootBackup: await snapshotDirectory(
+      target.instanceRoot,
+      path.resolve(tempRoot, "instance-root"),
+    ),
+  };
+}
+
+async function restoreDirectoryBackup(backupPath: string | null, targetPath: string): Promise<void> {
+  rmSync(targetPath, { recursive: true, force: true });
+  if (!backupPath) {
+    return;
+  }
+  await fsPromises.cp(backupPath, targetPath, { recursive: true });
+}
+
+async function restoreWorktreeReseedState(
+  backup: WorktreeReseedBackup,
+  target: { repoConfigDir: string; instanceRoot: string },
+): Promise<void> {
+  await restoreDirectoryBackup(backup.repoConfigDirBackup, target.repoConfigDir);
+  await restoreDirectoryBackup(backup.instanceRootBackup, target.instanceRoot);
+}
+
+export async function worktreeReseedCommand(opts: WorktreeReseedOptions): Promise<void> {
+  printPaperclipCliBanner();
+  p.intro(pc.bgCyan(pc.black(" paperclipai worktree reseed ")));
+
+  if (!hasExplicitSourceSelection(opts)) {
+    throw new Error(
+      "Reseed requires an explicit source. Pass --from-config or --from-instance (optionally with --from-data-dir).",
+    );
+  }
+
+  const target = resolveCurrentWorktreeReseedState({ home: opts.home });
+  const sourceConfigPath = resolveSourceConfigPath(opts);
+  if (path.resolve(sourceConfigPath) === target.currentConfigPath) {
+    throw new Error(
+      "Source and target Paperclip configs are the same. Pass a different source instance/config when reseeding.",
+    );
+  }
+
+  const seedMode = opts.seedMode ?? "minimal";
+  if (!isWorktreeSeedMode(seedMode)) {
+    throw new Error(`Unsupported seed mode "${seedMode}". Expected one of: minimal, full.`);
+  }
+
+  const confirmed = opts.yes
+    ? true
+    : await p.confirm({
+      message: `Reseed the current worktree instance (${target.instanceId}) from ${sourceConfigPath}? This overwrites only the current worktree Paperclip instance data.`,
+      initialValue: false,
+    });
+  if (p.isCancel(confirmed) || !confirmed) {
+    p.log.warn("Reseed cancelled.");
+    return;
+  }
+
+  const targetPaths = resolveWorktreeLocalPaths({
+    cwd: process.cwd(),
+    homeDir: target.homeDir,
+    instanceId: target.instanceId,
+  });
+  const backup = await snapshotWorktreeReseedState(targetPaths);
+
+  try {
+    await runWorktreeInit({
+      name: target.worktreeName,
+      color: target.worktreeColor,
+      instance: target.instanceId,
+      home: target.homeDir,
+      fromConfig: opts.fromConfig,
+      fromDataDir: opts.fromDataDir,
+      fromInstance: opts.fromInstance,
+      sourceConfigPathOverride: sourceConfigPath,
+      serverPort: target.serverPort,
+      dbPort: target.dbPort,
+      seed: opts.seed ?? true,
+      seedMode,
+      force: true,
+    });
+  } catch (error) {
+    await restoreWorktreeReseedState(backup, targetPaths);
+    throw error;
+  } finally {
+    rmSync(backup.tempRoot, { recursive: true, force: true });
+  }
+}
+
 export async function worktreeMakeCommand(nameArg: string, opts: WorktreeMakeOptions): Promise<void> {
   printPaperclipCliBanner();
   p.intro(pc.bgCyan(pc.black(" paperclipai worktree:make ")));
@@ -2632,6 +2803,17 @@ export function registerWorktreeCommands(program: Command): void {
     .option("--json", "Print JSON instead of shell exports")
     .action(worktreeEnvCommand);
 
+  worktree
+    .command("reseed")
+    .description("Replace the current worktree instance with a fresh seed while preserving this worktree's ports and instance id")
+    .option("--from-config <path>", "Source config.json to seed from")
+    .option("--from-data-dir <path>", "Source PAPERCLIP_HOME used when deriving the source config")
+    .option("--from-instance <id>", "Source instance id when deriving the source config")
+    .option("--home <path>", `Home root for worktree instances (env: PAPERCLIP_WORKTREES_DIR, default: ${DEFAULT_WORKTREE_HOME})`)
+    .option("--seed-mode <mode>", "Seed profile: minimal or full (default: minimal)", "minimal")
+    .option("--yes", "Skip the destructive confirmation prompt", false)
+    .action(worktreeReseedCommand);
+
   program
     .command("worktree:list")
     .description("List git worktrees visible from this repo and whether they look like Paperclip worktrees")
diff --git a/doc/DEVELOPING.md b/doc/DEVELOPING.md
index 7aa171f5..6aa30237 100644
--- a/doc/DEVELOPING.md
+++ b/doc/DEVELOPING.md
@@ -232,6 +232,15 @@ pnpm paperclipai worktree init --force --seed-mode minimal \
 
 That rewrites the worktree-local `.paperclip/config.json` + `.paperclip/.env`, recreates the isolated instance under `~/.paperclip-worktrees/instances/<worktree-id>/`, and preserves the git worktree contents themselves.
 
+For existing worktrees, prefer the dedicated reseed command instead of rebuilding the `worktree init --force` flags manually:
+
+```sh
+cd /path/to/existing/worktree
+pnpm paperclipai worktree reseed --from-config /path/to/source/.paperclip/config.json --seed-mode full
+```
+
+`worktree reseed` preserves the current worktree's instance id, ports, and branding while replacing only that worktree's isolated Paperclip instance data from the chosen source.
+
 **`pnpm paperclipai worktree:make <name> [options]`** — Create `~/NAME` as a git worktree, then initialize an isolated Paperclip instance inside it. This combines `git worktree add` with `worktree init` in a single step.
 
 | Option | Description |
@@ -258,6 +267,17 @@ pnpm paperclipai worktree:make experiment --no-seed
 
 **`pnpm paperclipai worktree env [options]`** — Print shell exports for the current worktree-local Paperclip instance.
 
+**`pnpm paperclipai worktree reseed [options]`** — Replace the current worktree instance with a fresh seed from another Paperclip source while preserving the current worktree's ports and instance id.
+
+| Option | Description |
+|---|---|
+| `--from-config <path>` | Source config.json to seed from |
+| `--from-data-dir <path>` | Source `PAPERCLIP_HOME` used when deriving the source config |
+| `--from-instance <id>` | Source instance id when deriving the source config |
+| `--home <path>` | Home root for worktree instances (default: `~/.paperclip-worktrees`) |
+| `--seed-mode <mode>` | Seed profile: `minimal` or `full` (default: `minimal`) |
+| `--yes` | Skip the destructive confirmation prompt |
+
 | Option | Description |
 |---|---|
 | `-c, --config <path>` | Path to config file |
diff --git a/ui/package.json b/ui/package.json
index 7a798f7d..020e2ec2 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -26,6 +26,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@assistant-ui/react": "0.12.23",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 0bc4721b..804e8d48 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -36,6 +36,7 @@ import { PluginManager } from "./pages/PluginManager";
 import { PluginSettings } from "./pages/PluginSettings";
 import { AdapterManager } from "./pages/AdapterManager";
 import { PluginPage } from "./pages/PluginPage";
+import { IssueChatUxLab } from "./pages/IssueChatUxLab";
 import { RunTranscriptUxLab } from "./pages/RunTranscriptUxLab";
 import { OrgChart } from "./pages/OrgChart";
 import { NewAgent } from "./pages/NewAgent";
@@ -175,6 +176,7 @@ function boardRoutes() {
       <Route path="inbox/all" element={<Inbox />} />
       <Route path="inbox/new" element={<Navigate to="/inbox/mine" replace />} />
       <Route path="design-guide" element={<DesignGuide />} />
+      <Route path="tests/ux/chat" element={<IssueChatUxLab />} />
       <Route path="tests/ux/runs" element={<RunTranscriptUxLab />} />
       <Route path="instance/settings/adapters" element={<AdapterManager />} />
       <Route path=":pluginRoutePath" element={<PluginPage />} />
@@ -347,6 +349,7 @@ export function App() {
           <Route path="projects/:projectId/workspaces/:workspaceId" element={<UnprefixedBoardRedirect />} />
           <Route path="projects/:projectId/configuration" element={<UnprefixedBoardRedirect />} />
           <Route path="execution-workspaces/:workspaceId" element={<UnprefixedBoardRedirect />} />
+          <Route path="tests/ux/chat" element={<UnprefixedBoardRedirect />} />
           <Route path="tests/ux/runs" element={<UnprefixedBoardRedirect />} />
           <Route path=":companyPrefix" element={<Layout />}>
             {boardRoutes()}
diff --git a/ui/src/components/ActiveAgentsPanel.tsx b/ui/src/components/ActiveAgentsPanel.tsx
index c0883192..26c969e3 100644
--- a/ui/src/components/ActiveAgentsPanel.tsx
+++ b/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>
diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
new file mode 100644
index 00000000..f292646a
--- /dev/null
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -0,0 +1,262 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { IssueChatThread, resolveAssistantMessageFoldedState } from "./IssueChatThread";
+
+vi.mock("@assistant-ui/react", () => ({
+  AssistantRuntimeProvider: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  ThreadPrimitive: {
+    Root: ({ children, className }: { children: ReactNode; className?: string }) => (
+      <div data-testid="thread-root" className={className}>{children}</div>
+    ),
+    Viewport: ({ children, className }: { children: ReactNode; className?: string }) => (
+      <div data-testid="thread-viewport" className={className}>{children}</div>
+    ),
+    Empty: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    Messages: () => <div data-testid="thread-messages" />,
+  },
+  MessagePrimitive: {
+    Root: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    Content: () => null,
+    Parts: () => null,
+  },
+  useAui: () => ({ thread: () => ({ append: vi.fn() }) }),
+  useAuiState: () => false,
+  useMessage: () => ({
+    id: "message",
+    role: "assistant",
+    createdAt: new Date("2026-04-06T12:00:00.000Z"),
+    content: [],
+    metadata: { custom: {} },
+    status: { type: "complete" },
+  }),
+}));
+
+vi.mock("./transcript/useLiveRunTranscripts", () => ({
+  useLiveRunTranscripts: () => ({
+    transcriptByRun: new Map(),
+    hasOutputForRun: () => false,
+  }),
+}));
+
+vi.mock("./MarkdownBody", () => ({
+  MarkdownBody: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock("./MarkdownEditor", () => ({
+  MarkdownEditor: ({
+    value = "",
+    onChange,
+    placeholder,
+  }: {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+  }) => (
+    <textarea
+      aria-label="Issue chat editor"
+      placeholder={placeholder}
+      value={value}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+}));
+
+vi.mock("./InlineEntitySelector", () => ({
+  InlineEntitySelector: () => null,
+}));
+
+vi.mock("./Identity", () => ({
+  Identity: ({ name }: { name: string }) => <span>{name}</span>,
+}));
+
+vi.mock("./OutputFeedbackButtons", () => ({
+  OutputFeedbackButtons: () => null,
+}));
+
+vi.mock("./AgentIconPicker", () => ({
+  AgentIcon: () => null,
+}));
+
+vi.mock("./StatusBadge", () => ({
+  StatusBadge: ({ status }: { status: string }) => <span>{status}</span>,
+}));
+
+vi.mock("../hooks/usePaperclipIssueRuntime", () => ({
+  usePaperclipIssueRuntime: () => ({}),
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("IssueChatThread", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    container.remove();
+    vi.useRealTimers();
+  });
+
+  it("drops the count heading and does not use an internal scrollbox", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <IssueChatThread
+            comments={[]}
+            linkedRuns={[]}
+            timelineEvents={[]}
+            liveRuns={[]}
+            onAdd={async () => {}}
+            showComposer={false}
+            enableLiveTranscriptPolling={false}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Jump to latest");
+    expect(container.textContent).not.toContain("Chat (");
+
+    const viewport = container.querySelector('[data-testid="thread-viewport"]') as HTMLDivElement | null;
+    expect(viewport).not.toBeNull();
+    expect(viewport?.className).not.toContain("overflow-y-auto");
+    expect(viewport?.className).not.toContain("max-h-[70vh]");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  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);
+
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <IssueChatThread
+            comments={[]}
+            linkedRuns={[]}
+            timelineEvents={[]}
+            liveRuns={[]}
+            onAdd={async () => {}}
+            draftKey="issue-chat-draft:test-1"
+            enableLiveTranscriptPolling={false}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    const editor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
+    expect(editor).not.toBeNull();
+    expect(editor?.placeholder).toBe("Reply");
+
+    act(() => {
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        "value",
+      )?.set;
+      valueSetter?.call(editor, "Draft survives refresh");
+      editor?.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(900);
+    });
+
+    expect(localStorage.getItem("issue-chat-draft:test-1")).toBe("Draft survives refresh");
+
+    act(() => {
+      root.unmount();
+    });
+
+    const remount = createRoot(container);
+    act(() => {
+      remount.render(
+        <MemoryRouter>
+          <IssueChatThread
+            comments={[]}
+            linkedRuns={[]}
+            timelineEvents={[]}
+            liveRuns={[]}
+            onAdd={async () => {}}
+            draftKey="issue-chat-draft:test-1"
+            enableLiveTranscriptPolling={false}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    const restoredEditor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
+    expect(restoredEditor?.value).toBe("Draft survives refresh");
+
+    act(() => {
+      remount.unmount();
+    });
+  });
+
+  it("folds chain-of-thought when the same message transitions from running to complete", () => {
+    expect(resolveAssistantMessageFoldedState({
+      messageId: "message-1",
+      currentFolded: false,
+      isFoldable: true,
+      previousMessageId: "message-1",
+      previousIsFoldable: false,
+    })).toBe(true);
+  });
+
+  it("preserves a manually opened completed message across rerenders", () => {
+    expect(resolveAssistantMessageFoldedState({
+      messageId: "message-1",
+      currentFolded: false,
+      isFoldable: true,
+      previousMessageId: "message-1",
+      previousIsFoldable: true,
+    })).toBe(false);
+  });
+});
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
new file mode 100644
index 00000000..3650aa81
--- /dev/null
+++ b/ui/src/components/IssueChatThread.tsx
@@ -0,0 +1,1814 @@
+import {
+  AssistantRuntimeProvider,
+  ActionBarPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useAui,
+  useAuiState,
+  useMessage,
+} from "@assistant-ui/react";
+import type { ToolCallMessagePart } from "@assistant-ui/react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
+import { Link, useLocation } from "@/lib/router";
+import type {
+  Agent,
+  FeedbackDataSharingPreference,
+  FeedbackVote,
+  FeedbackVoteValue,
+} from "@paperclipai/shared";
+import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
+import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
+import { usePaperclipIssueRuntime, type PaperclipIssueRuntimeReassignment } from "../hooks/usePaperclipIssueRuntime";
+import {
+  buildIssueChatMessages,
+  formatDurationWords,
+  type IssueChatComment,
+  type IssueChatLinkedRun,
+  type IssueChatTranscriptEntry,
+  type SegmentTiming,
+} from "../lib/issue-chat-messages";
+import type { IssueTimelineAssignee, IssueTimelineEvent } from "../lib/issue-timeline-events";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MarkdownBody } from "./MarkdownBody";
+import { MarkdownEditor, type MentionOption, type MarkdownEditorRef } from "./MarkdownEditor";
+import { Identity } from "./Identity";
+import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
+import { AgentIcon } from "./AgentIconPicker";
+import { restoreSubmittedCommentDraft } from "../lib/comment-submit-draft";
+import { formatAssigneeUserLabel } from "../lib/assignees";
+import { timeAgo } from "../lib/timeAgo";
+import {
+  describeToolInput,
+  displayToolName,
+  formatToolPayload,
+  isCommandTool,
+  parseToolPayload,
+  summarizeToolInput,
+  summarizeToolResult,
+} from "../lib/transcriptPresentation";
+import { cn, formatDateTime, formatShortDate } from "../lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+import { ArrowRight, Brain, Check, ChevronDown, Copy, Hammer, Loader2, MoreHorizontal, Paperclip, Search, ThumbsDown, ThumbsUp } from "lucide-react";
+
+interface IssueChatMessageContext {
+  feedbackVoteByTargetId: Map<string, FeedbackVoteValue>;
+  feedbackDataSharingPreference: FeedbackDataSharingPreference;
+  feedbackTermsUrl: string | null;
+  agentMap?: Map<string, Agent>;
+  currentUserId?: string | null;
+  onVote?: (
+    commentId: string,
+    vote: FeedbackVoteValue,
+    options?: { allowSharing?: boolean; reason?: string },
+  ) => Promise<void>;
+  onInterruptQueued?: (runId: string) => Promise<void>;
+  interruptingQueuedRunId?: string | null;
+}
+
+const IssueChatCtx = createContext<IssueChatMessageContext>({
+  feedbackVoteByTargetId: new Map(),
+  feedbackDataSharingPreference: "prompt",
+  feedbackTermsUrl: null,
+});
+
+export function resolveAssistantMessageFoldedState(args: {
+  messageId: string;
+  currentFolded: boolean;
+  isFoldable: boolean;
+  previousMessageId: string | null;
+  previousIsFoldable: boolean;
+}) {
+  const {
+    messageId,
+    currentFolded,
+    isFoldable,
+    previousMessageId,
+    previousIsFoldable,
+  } = args;
+
+  if (messageId !== previousMessageId) return isFoldable;
+  if (!isFoldable) return false;
+  if (!previousIsFoldable) return true;
+  return currentFolded;
+}
+
+function findCoTSegmentIndex(
+  messageParts: ReadonlyArray<{ type: string }>,
+  cotParts: ReadonlyArray<{ type: string }>,
+): number {
+  if (cotParts.length === 0) return -1;
+  const firstPart = cotParts[0];
+  let segIdx = -1;
+  let inCoT = false;
+  for (const part of messageParts) {
+    if (part.type === "reasoning" || part.type === "tool-call") {
+      if (!inCoT) { segIdx++; inCoT = true; }
+      if (part === firstPart) return segIdx;
+    } else {
+      inCoT = false;
+    }
+  }
+  return -1;
+}
+
+function useLiveElapsed(startMs: number | null | undefined, active: boolean): string | null {
+  const [, rerender] = useState(0);
+  useEffect(() => {
+    if (!active || !startMs) return;
+    const interval = setInterval(() => rerender((n) => n + 1), 1000);
+    return () => clearInterval(interval);
+  }, [active, startMs]);
+  if (!active || !startMs) return null;
+  return formatDurationWords(Date.now() - startMs);
+}
+
+interface CommentReassignment {
+  assigneeAgentId: string | null;
+  assigneeUserId: string | null;
+}
+
+interface IssueChatThreadProps {
+  comments: IssueChatComment[];
+  feedbackVotes?: FeedbackVote[];
+  feedbackDataSharingPreference?: FeedbackDataSharingPreference;
+  feedbackTermsUrl?: string | null;
+  linkedRuns?: IssueChatLinkedRun[];
+  timelineEvents?: IssueTimelineEvent[];
+  liveRuns?: LiveRunForIssue[];
+  activeRun?: ActiveRunForIssue | null;
+  companyId?: string | null;
+  projectId?: string | null;
+  issueStatus?: string;
+  agentMap?: Map<string, Agent>;
+  currentUserId?: string | null;
+  onVote?: (
+    commentId: string,
+    vote: FeedbackVoteValue,
+    options?: { allowSharing?: boolean; reason?: string },
+  ) => Promise<void>;
+  onAdd: (body: string, reopen?: boolean, reassignment?: CommentReassignment) => Promise<void>;
+  onCancelRun?: () => Promise<void>;
+  imageUploadHandler?: (file: File) => Promise<string>;
+  onAttachImage?: (file: File) => Promise<void>;
+  draftKey?: string;
+  enableReassign?: boolean;
+  reassignOptions?: InlineEntityOption[];
+  currentAssigneeValue?: string;
+  suggestedAssigneeValue?: string;
+  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;
+}
+
+const DRAFT_DEBOUNCE_MS = 800;
+
+function toIsoString(value: string | Date | null | undefined): string | null {
+  if (!value) return null;
+  return typeof value === "string" ? value : value.toISOString();
+}
+
+function loadDraft(draftKey: string): string {
+  try {
+    return localStorage.getItem(draftKey) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function saveDraft(draftKey: string, value: string) {
+  try {
+    if (value.trim()) {
+      localStorage.setItem(draftKey, value);
+    } else {
+      localStorage.removeItem(draftKey);
+    }
+  } catch {
+    // Ignore localStorage failures.
+  }
+}
+
+function clearDraft(draftKey: string) {
+  try {
+    localStorage.removeItem(draftKey);
+  } catch {
+    // Ignore localStorage failures.
+  }
+}
+
+function parseReassignment(target: string): PaperclipIssueRuntimeReassignment | null {
+  if (!target || target === "__none__") {
+    return { assigneeAgentId: null, assigneeUserId: null };
+  }
+  if (target.startsWith("agent:")) {
+    const assigneeAgentId = target.slice("agent:".length);
+    return assigneeAgentId ? { assigneeAgentId, assigneeUserId: null } : null;
+  }
+  if (target.startsWith("user:")) {
+    const assigneeUserId = target.slice("user:".length);
+    return assigneeUserId ? { assigneeAgentId: null, assigneeUserId } : null;
+  }
+  return null;
+}
+
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
+
+function commentDateLabel(date: Date | string | undefined): string {
+  if (!date) return "";
+  const then = new Date(date).getTime();
+  if (Date.now() - then < WEEK_MS) return timeAgo(date);
+  return formatShortDate(date);
+}
+
+function IssueChatTextPart({ text, recessed }: { text: string; recessed?: boolean }) {
+  return (
+    <MarkdownBody className="text-sm leading-6" style={recessed ? { opacity: 0.55 } : undefined}>
+      {text}
+    </MarkdownBody>
+  );
+}
+
+function humanizeValue(value: string | null) {
+  if (!value) return "None";
+  return value.replace(/_/g, " ");
+}
+
+function formatTimelineAssigneeLabel(
+  assignee: IssueTimelineAssignee,
+  agentMap?: Map<string, Agent>,
+  currentUserId?: string | null,
+) {
+  if (assignee.agentId) {
+    return agentMap?.get(assignee.agentId)?.name ?? assignee.agentId.slice(0, 8);
+  }
+  if (assignee.userId) {
+    return formatAssigneeUserLabel(assignee.userId, currentUserId) ?? "Board";
+  }
+  return "Unassigned";
+}
+
+function initialsForName(name: string) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+}
+
+function formatRunStatusLabel(status: string) {
+  switch (status) {
+    case "timed_out":
+      return "timed out";
+    default:
+      return status.replace(/_/g, " ");
+  }
+}
+
+function runStatusClass(status: string) {
+  switch (status) {
+    case "succeeded":
+      return "text-green-700 dark:text-green-300";
+    case "failed":
+    case "error":
+      return "text-red-700 dark:text-red-300";
+    case "timed_out":
+      return "text-orange-700 dark:text-orange-300";
+    case "running":
+      return "text-cyan-700 dark:text-cyan-300";
+    case "queued":
+    case "pending":
+      return "text-amber-700 dark:text-amber-300";
+    case "cancelled":
+      return "text-muted-foreground";
+    default:
+      return "text-foreground";
+  }
+}
+
+function toolCountSummary(toolParts: ToolCallMessagePart[]): string | null {
+  if (toolParts.length === 0) return null;
+  let commands = 0;
+  let other = 0;
+  for (const tool of toolParts) {
+    if (isCommandTool(tool.toolName, tool.args)) commands++;
+    else other++;
+  }
+  const parts: string[] = [];
+  if (commands > 0) parts.push(`ran ${commands} command${commands === 1 ? "" : "s"}`);
+  if (other > 0) parts.push(`called ${other} tool${other === 1 ? "" : "s"}`);
+  return parts.join(", ");
+}
+
+function cleanToolDisplayText(tool: ToolCallMessagePart): string {
+  const name = displayToolName(tool.toolName, tool.args);
+  if (isCommandTool(tool.toolName, tool.args)) return name;
+  const summary = tool.result === undefined
+    ? summarizeToolInput(tool.toolName, tool.args)
+    : null;
+  return summary ? `${name} ${summary}` : name;
+}
+
+function IssueChatChainOfThought() {
+  const { agentMap } = useContext(IssueChatCtx);
+  const message = useMessage();
+  const custom = message.metadata.custom as Record<string, unknown>;
+  const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
+  const authorAgentId = typeof custom.authorAgentId === "string" ? custom.authorAgentId : null;
+  const agentId = authorAgentId ?? runAgentId;
+  const agentIcon = agentId ? agentMap?.get(agentId)?.icon : undefined;
+  const isMessageRunning = message.role === "assistant" && message.status?.type === "running";
+
+  const cotParts = useAuiState((s) => s.chainOfThought?.parts ?? []) as ReadonlyArray<{ type: string; text?: string; toolName?: string; toolCallId?: string; args?: unknown; argsText?: string; result?: unknown; isError?: boolean }>;
+
+  const myIndex = useMemo(
+    () => findCoTSegmentIndex(message.content, cotParts),
+    [message.content, cotParts],
+  );
+
+  const allReasoningText = cotParts
+    .filter((p): p is { type: "reasoning"; text: string } => p.type === "reasoning" && !!p.text)
+    .map((p) => p.text)
+    .join("\n");
+  const toolParts = cotParts.filter(
+    (p): p is ToolCallMessagePart => p.type === "tool-call",
+  );
+
+  const hasActiveTool = toolParts.some((t) => t.result === undefined);
+  const isActive = isMessageRunning && hasActiveTool;
+  const [expanded, setExpanded] = useState(isActive);
+
+  const rawSegments = Array.isArray(custom.chainOfThoughtSegments)
+    ? (custom.chainOfThoughtSegments as SegmentTiming[])
+    : [];
+  const segmentTiming = myIndex >= 0 ? rawSegments[myIndex] ?? null : null;
+  const liveElapsed = useLiveElapsed(segmentTiming?.startMs, isActive);
+
+  useEffect(() => {
+    if (isActive) setExpanded(true);
+  }, [isActive]);
+
+  let headerVerb: string;
+  let headerSuffix: string | null = null;
+  if (isActive) {
+    headerVerb = "Working";
+    if (liveElapsed) headerSuffix = `for ${liveElapsed}`;
+  } else if (segmentTiming) {
+    const durationMs = segmentTiming.endMs - segmentTiming.startMs;
+    const durationText = formatDurationWords(durationMs);
+    headerVerb = "Worked";
+    if (durationText) headerSuffix = `for ${durationText}`;
+  } else {
+    headerVerb = "Worked";
+  }
+
+  const toolSummary = toolCountSummary(toolParts);
+  const hasContent = allReasoningText.trim().length > 0 || toolParts.length > 0;
+
+  return (
+    <div>
+      <button
+        type="button"
+        className="group flex w-full items-center gap-2.5 rounded-lg px-1 py-2 text-left transition-colors hover:bg-accent/5"
+        onClick={() => hasContent && setExpanded((v) => !v)}
+      >
+        <span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
+          {agentIcon ? (
+            <AgentIcon icon={agentIcon} className="h-4 w-4 shrink-0" />
+          ) : isActive ? (
+            <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+          ) : (
+            <span className="flex h-4 w-4 shrink-0 items-center justify-center">
+              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500/70" />
+            </span>
+          )}
+          {isActive ? (
+            <span className="shimmer-text">{headerVerb}</span>
+          ) : (
+            headerVerb
+          )}
+        </span>
+        {headerSuffix ? (
+          <span className="text-xs text-muted-foreground/60">{headerSuffix}</span>
+        ) : null}
+        {toolSummary ? (
+          <span className="text-xs text-muted-foreground/40">· {toolSummary}</span>
+        ) : null}
+        {hasContent ? (
+          <ChevronDown className={cn("ml-auto h-4 w-4 shrink-0 text-muted-foreground/50 transition-transform", expanded && "rotate-180")} />
+        ) : null}
+      </button>
+      {expanded && hasContent ? (
+        <div className="space-y-1 py-1">
+          {isActive ? (
+            <>
+              {allReasoningText ? <IssueChatReasoningPart text={allReasoningText} /> : null}
+              {toolParts.length > 0 ? <IssueChatRollingToolPart toolParts={toolParts} /> : null}
+            </>
+          ) : (
+            <>
+              {allReasoningText ? <IssueChatReasoningPart text={allReasoningText} /> : null}
+              {toolParts.map((tool) => (
+                <IssueChatToolPart
+                  key={tool.toolCallId}
+                  toolName={tool.toolName}
+                  args={tool.args}
+                  argsText={tool.argsText}
+                  result={tool.result}
+                  isError={false}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function IssueChatReasoningPart({ text }: { text: string }) {
+  const lines = text.split("\n").filter((l) => l.trim());
+  const lastLine = lines[lines.length - 1] ?? text.slice(-200);
+  const prevRef = useRef(lastLine);
+  const [ticker, setTicker] = useState<{
+    key: number;
+    current: string;
+    exiting: string | null;
+  }>({ key: 0, current: lastLine, exiting: null });
+
+  useEffect(() => {
+    if (lastLine !== prevRef.current) {
+      const prev = prevRef.current;
+      prevRef.current = lastLine;
+      setTicker((t) => ({ key: t.key + 1, current: lastLine, exiting: prev }));
+    }
+  }, [lastLine]);
+
+  return (
+    <div className="flex gap-2 px-1">
+      <div className="flex flex-col items-center pt-0.5">
+        <Brain className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
+      </div>
+      <div className="relative h-5 min-w-0 flex-1 overflow-hidden">
+        {ticker.exiting !== null && (
+          <span
+            key={`out-${ticker.key}`}
+            className="cot-line-exit absolute inset-x-0 truncate text-[13px] italic leading-5 text-muted-foreground/70"
+            onAnimationEnd={() => setTicker((t) => ({ ...t, exiting: null }))}
+          >
+            {ticker.exiting}
+          </span>
+        )}
+        <span
+          key={`in-${ticker.key}`}
+          className={cn(
+            "absolute inset-x-0 truncate text-[13px] italic leading-5 text-muted-foreground/70",
+            ticker.key > 0 && "cot-line-enter",
+          )}
+        >
+          {ticker.current}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function IssueChatRollingToolPart({ toolParts }: { toolParts: ToolCallMessagePart[] }) {
+  const latest = toolParts[toolParts.length - 1];
+  if (!latest) return null;
+
+  const fullText = cleanToolDisplayText(latest);
+
+  const prevRef = useRef(fullText);
+  const [ticker, setTicker] = useState<{
+    key: number;
+    current: string;
+    exiting: string | null;
+  }>({ key: 0, current: fullText, exiting: null });
+
+  useEffect(() => {
+    if (fullText !== prevRef.current) {
+      const prev = prevRef.current;
+      prevRef.current = fullText;
+      setTicker((t) => ({ key: t.key + 1, current: fullText, exiting: prev }));
+    }
+  }, [fullText]);
+
+  const ToolIcon = getToolIcon(latest.toolName);
+  const isRunning = latest.result === undefined;
+
+  return (
+    <div className="flex gap-2 px-1">
+      <div className="flex flex-col items-center pt-0.5">
+        {isRunning ? (
+          <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground/50" />
+        ) : (
+          <ToolIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
+        )}
+      </div>
+      <div className="relative h-5 min-w-0 flex-1 overflow-hidden">
+        {ticker.exiting !== null && (
+          <span
+            key={`out-${ticker.key}`}
+            className="cot-line-exit absolute inset-x-0 truncate text-[13px] leading-5 text-muted-foreground/70"
+            onAnimationEnd={() => setTicker((t) => ({ ...t, exiting: null }))}
+          >
+            {ticker.exiting}
+          </span>
+        )}
+        <span
+          key={`in-${ticker.key}`}
+          className={cn(
+            "absolute inset-x-0 truncate text-[13px] leading-5 text-muted-foreground/70",
+            ticker.key > 0 && "cot-line-enter",
+          )}
+        >
+          {ticker.current}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function CopyablePreBlock({ children, className }: { children: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <div className="group/pre relative">
+      <pre className={className}>{children}</pre>
+      <button
+        type="button"
+        className={cn(
+          "absolute right-1.5 top-1.5 inline-flex h-6 w-6 items-center justify-center rounded-md bg-background/80 text-muted-foreground opacity-0 backdrop-blur-sm transition-opacity hover:text-foreground group-hover/pre:opacity-100",
+          copied && "opacity-100",
+        )}
+        title="Copy"
+        aria-label="Copy"
+        onClick={() => {
+          void navigator.clipboard.writeText(children).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          });
+        }}
+      >
+        {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+      </button>
+    </div>
+  );
+}
+
+const TOOL_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  // Extend with specific tool icons as they become known
+};
+
+function getToolIcon(toolName: string): React.ComponentType<{ className?: string }> {
+  return TOOL_ICON_MAP[toolName] ?? Hammer;
+}
+
+function IssueChatToolPart({
+  toolName,
+  args,
+  argsText,
+  result,
+  isError,
+}: {
+  toolName: string;
+  args?: unknown;
+  argsText?: string;
+  result?: unknown;
+  isError?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const rawArgsText = argsText ?? "";
+  const parsedArgs = args ?? parseToolPayload(rawArgsText);
+  const resultText =
+    typeof result === "string"
+      ? result
+      : result === undefined
+        ? ""
+        : formatToolPayload(result);
+  const inputDetails = describeToolInput(toolName, parsedArgs);
+  const displayName = displayToolName(toolName, parsedArgs);
+  const isCommand = isCommandTool(toolName, parsedArgs);
+  const summary = isCommand
+    ? null
+    : result === undefined
+      ? summarizeToolInput(toolName, parsedArgs)
+      : summarizeToolResult(resultText, false);
+  const ToolIcon = getToolIcon(toolName);
+
+  const intentDetail = inputDetails.find((d) => d.label === "Intent");
+  const title = intentDetail?.value ?? displayName;
+  const nonIntentDetails = inputDetails.filter((d) => d.label !== "Intent");
+
+  return (
+    <div className="flex gap-2 px-1">
+      <div className="flex flex-col items-center pt-1">
+        <ToolIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
+        {open ? <div className="mt-1 w-px flex-1 bg-border/40" /> : null}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <button
+          type="button"
+          className="flex w-full items-center gap-2 rounded-md py-0.5 text-left transition-colors hover:bg-accent/5"
+          onClick={() => setOpen((current) => !current)}
+        >
+          <span className="min-w-0 flex-1 truncate text-[13px] text-muted-foreground/80">
+            {title}
+            {!intentDetail && summary ? <span className="ml-1.5 text-muted-foreground/50">{summary}</span> : null}
+          </span>
+          {result === undefined ? (
+            <Loader2 className="h-3 w-3 shrink-0 animate-spin text-muted-foreground/50" />
+          ) : null}
+          <ChevronDown className={cn("h-3.5 w-3.5 shrink-0 text-muted-foreground/40 transition-transform", open && "rotate-180")} />
+        </button>
+
+        {open ? (
+          <div className="mt-1 space-y-2 pb-1">
+            {nonIntentDetails.length > 0 ? (
+              <div>
+                <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/60">
+                  Input
+                </div>
+                <dl className="space-y-1.5">
+                  {nonIntentDetails.map((detail) => (
+                    <div key={`${detail.label}:${detail.value}`}>
+                      <dt className="text-[10px] font-medium text-muted-foreground/60">
+                        {detail.label}
+                      </dt>
+                      <dd className={cn("text-xs leading-5 text-foreground/70", detail.tone === "code" && "font-mono text-[11px]")}>
+                        {detail.value}
+                      </dd>
+                    </div>
+                  ))}
+                </dl>
+              </div>
+            ) : rawArgsText ? (
+              <div>
+                <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/60">
+                  Input
+                </div>
+                <CopyablePreBlock className="overflow-x-auto rounded-md bg-accent/30 p-2 text-[11px] leading-4 text-foreground/70">{rawArgsText}</CopyablePreBlock>
+              </div>
+            ) : null}
+            {result !== undefined ? (
+              <div>
+                <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/60">
+                  Result
+                </div>
+                <CopyablePreBlock className="overflow-x-auto rounded-md bg-accent/30 p-2 text-[11px] leading-4 text-foreground/70">{resultText}</CopyablePreBlock>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function IssueChatUserMessage() {
+  const { onInterruptQueued, interruptingQueuedRunId } = useContext(IssueChatCtx);
+  const message = useMessage();
+  const custom = message.metadata.custom as Record<string, unknown>;
+  const anchorId = typeof custom.anchorId === "string" ? custom.anchorId : undefined;
+  const queued = custom.queueState === "queued" || custom.clientStatus === "queued";
+  const pending = custom.clientStatus === "pending";
+  const queueTargetRunId = typeof custom.queueTargetRunId === "string" ? custom.queueTargetRunId : null;
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <MessagePrimitive.Root id={anchorId}>
+      <div className="group flex items-start justify-end gap-2.5">
+        <div className="flex min-w-0 max-w-[85%] flex-col items-end">
+          <div
+            className={cn(
+              "min-w-0 break-all rounded-2xl px-4 py-2.5",
+              queued
+                ? "bg-amber-50/80 dark:bg-amber-500/10"
+                : "bg-muted",
+              pending && "opacity-80",
+            )}
+          >
+            {queued ? (
+              <div className="mb-1.5 flex items-center gap-2">
+                <span className="inline-flex items-center rounded-full border border-amber-400/60 bg-amber-100/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-amber-800 dark:border-amber-400/40 dark:bg-amber-500/20 dark:text-amber-200">
+                  Queued
+                </span>
+                {queueTargetRunId && onInterruptQueued ? (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-6 border-red-300 px-2 text-[11px] text-red-700 hover:bg-red-50 hover:text-red-800 dark:border-red-500/40 dark:text-red-300 dark:hover:bg-red-500/10"
+                    disabled={interruptingQueuedRunId === queueTargetRunId}
+                    onClick={() => void onInterruptQueued(queueTargetRunId)}
+                  >
+                    {interruptingQueuedRunId === queueTargetRunId ? "Interrupting..." : "Interrupt"}
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+            {pending ? <div className="mb-1 text-xs text-muted-foreground">Sending...</div> : null}
+
+            <div className="space-y-3">
+              <MessagePrimitive.Parts
+                components={{
+                  Text: ({ text }) => <IssueChatTextPart text={text} />,
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="mt-1 flex items-center justify-end gap-1.5 px-1 opacity-0 transition-opacity group-hover:opacity-100">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a
+                  href={anchorId ? `#${anchorId}` : undefined}
+                  className="text-[11px] text-muted-foreground hover:text-foreground hover:underline"
+                >
+                  {message.createdAt ? commentDateLabel(message.createdAt) : ""}
+                </a>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs">
+                {message.createdAt ? formatDateTime(message.createdAt) : ""}
+              </TooltipContent>
+            </Tooltip>
+            <button
+              type="button"
+              className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+              title="Copy message"
+              aria-label="Copy message"
+              onClick={() => {
+                const text = message.content
+                  .filter((p): p is { type: "text"; text: string } => p.type === "text")
+                  .map((p) => p.text)
+                  .join("\n\n");
+                void navigator.clipboard.writeText(text).then(() => {
+                  setCopied(true);
+                  setTimeout(() => setCopied(false), 2000);
+                });
+              }}
+            >
+              {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+            </button>
+          </div>
+        </div>
+
+        <Avatar size="sm" className="mt-1 shrink-0">
+          <AvatarFallback>You</AvatarFallback>
+        </Avatar>
+      </div>
+    </MessagePrimitive.Root>
+  );
+}
+
+function IssueChatAssistantMessage() {
+  const {
+    feedbackVoteByTargetId,
+    feedbackDataSharingPreference,
+    feedbackTermsUrl,
+    onVote,
+    agentMap,
+  } = useContext(IssueChatCtx);
+  const message = useMessage();
+  const custom = message.metadata.custom as Record<string, unknown>;
+  const anchorId = typeof custom.anchorId === "string" ? custom.anchorId : undefined;
+  const authorName = typeof custom.authorName === "string"
+    ? custom.authorName
+    : typeof custom.runAgentName === "string"
+      ? custom.runAgentName
+      : "Agent";
+  const authorAgentId = typeof custom.authorAgentId === "string" ? custom.authorAgentId : null;
+  const runId = typeof custom.runId === "string" ? custom.runId : null;
+  const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
+  const agentId = authorAgentId ?? runAgentId;
+  const agentIcon = agentId ? agentMap?.get(agentId)?.icon : undefined;
+  const commentId = typeof custom.commentId === "string" ? custom.commentId : null;
+  const notices = Array.isArray(custom.notices)
+    ? custom.notices.filter((notice): notice is string => typeof notice === "string" && notice.length > 0)
+    : [];
+  const waitingText = typeof custom.waitingText === "string" ? custom.waitingText : "";
+  const isRunning = message.role === "assistant" && message.status?.type === "running";
+  const runHref = runId && runAgentId ? `/agents/${runAgentId}/runs/${runId}` : null;
+  const chainOfThoughtLabel = typeof custom.chainOfThoughtLabel === "string" ? custom.chainOfThoughtLabel : null;
+  const hasCoT = message.content.some((p) => p.type === "reasoning" || p.type === "tool-call");
+  const isFoldable = !isRunning && hasCoT && !!chainOfThoughtLabel;
+  const [folded, setFolded] = useState(isFoldable);
+  const previousMessageIdRef = useRef<string | null>(message.id);
+  const previousIsFoldableRef = useRef(isFoldable);
+
+  useEffect(() => {
+    const nextFolded = resolveAssistantMessageFoldedState({
+      messageId: message.id,
+      currentFolded: folded,
+      isFoldable,
+      previousMessageId: previousMessageIdRef.current,
+      previousIsFoldable: previousIsFoldableRef.current,
+    });
+    previousMessageIdRef.current = message.id;
+    previousIsFoldableRef.current = isFoldable;
+    if (nextFolded !== folded) {
+      setFolded(nextFolded);
+    }
+  }, [folded, isFoldable, message.id]);
+
+  const handleVote = async (
+    vote: FeedbackVoteValue,
+    options?: { allowSharing?: boolean; reason?: string },
+  ) => {
+    if (!commentId || !onVote) return;
+    await onVote(commentId, vote, options);
+  };
+
+  const activeVote = commentId ? feedbackVoteByTargetId.get(commentId) ?? null : null;
+
+  return (
+    <MessagePrimitive.Root id={anchorId}>
+      <div className="flex items-start gap-2.5 py-1.5">
+        <Avatar size="sm" className="mt-0.5 shrink-0">
+          {agentIcon ? (
+            <AvatarFallback><AgentIcon icon={agentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
+          ) : (
+            <AvatarFallback>{initialsForName(authorName)}</AvatarFallback>
+          )}
+        </Avatar>
+
+        <div className="min-w-0 flex-1">
+          {isFoldable ? (
+            <button
+              type="button"
+              className="group flex w-full items-center gap-2 py-0.5 text-left"
+              onClick={() => setFolded((v) => !v)}
+            >
+              <span className="text-sm font-medium text-foreground">{authorName}</span>
+              <span className="text-xs text-muted-foreground/60">{chainOfThoughtLabel?.toLowerCase()}</span>
+              <span className="ml-auto flex items-center gap-1.5">
+                {message.createdAt ? (
+                  <span className="text-[11px] text-muted-foreground/50">
+                    {commentDateLabel(message.createdAt)}
+                  </span>
+                ) : null}
+                <ChevronDown className={cn("h-3.5 w-3.5 text-muted-foreground/40 transition-transform", !folded && "rotate-180")} />
+              </span>
+            </button>
+          ) : (
+            <div className="mb-1.5 flex items-center gap-2">
+              <span className="text-sm font-medium text-foreground">{authorName}</span>
+              {isRunning ? (
+                <span className="inline-flex items-center gap-1 rounded-full border border-cyan-400/40 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-700 dark:text-cyan-200">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  Running
+                </span>
+              ) : null}
+            </div>
+          )}
+
+          {!folded ? (
+            <>
+              <div className="space-y-3">
+                <MessagePrimitive.Parts
+                  components={{
+                    Text: ({ text }) => <IssueChatTextPart text={text} recessed={hasCoT} />,
+                    ChainOfThought: IssueChatChainOfThought,
+                  }}
+                />
+                {message.content.length === 0 && waitingText ? (
+                  <div className="rounded-sm bg-accent/20 px-3 py-2 text-sm text-muted-foreground">
+                    {waitingText}
+                  </div>
+                ) : null}
+                {notices.length > 0 ? (
+                  <div className="space-y-2">
+                    {notices.map((notice, index) => (
+                      <div
+                        key={`${message.id}:notice:${index}`}
+                        className="rounded-sm border border-border/60 bg-accent/20 px-3 py-2 text-sm text-muted-foreground"
+                      >
+                        {notice}
+                      </div>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+
+              <div className="mt-2 flex items-center gap-1">
+                <ActionBarPrimitive.Copy
+                  copiedDuration={2000}
+                  className="group inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground data-[copied=true]:text-foreground"
+                  title="Copy message"
+                  aria-label="Copy message"
+                >
+                  <Copy className="h-3.5 w-3.5 group-data-[copied=true]:hidden" />
+                  <Check className="hidden h-3.5 w-3.5 group-data-[copied=true]:block" />
+                </ActionBarPrimitive.Copy>
+                {commentId && onVote ? (
+                  <IssueChatFeedbackButtons
+                    activeVote={activeVote}
+                    sharingPreference={feedbackDataSharingPreference}
+                    termsUrl={feedbackTermsUrl ?? null}
+                    onVote={handleVote}
+                  />
+                ) : null}
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <a
+                      href={anchorId ? `#${anchorId}` : undefined}
+                      className="text-[11px] text-muted-foreground hover:text-foreground hover:underline"
+                    >
+                      {message.createdAt ? commentDateLabel(message.createdAt) : ""}
+                    </a>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="text-xs">
+                    {message.createdAt ? formatDateTime(message.createdAt) : ""}
+                  </TooltipContent>
+                </Tooltip>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      className="text-muted-foreground hover:text-foreground"
+                      title="More actions"
+                      aria-label="More actions"
+                    >
+                      <MoreHorizontal className="h-3.5 w-3.5" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      onClick={() => {
+                        const text = message.content
+                          .filter((p): p is { type: "text"; text: string } => p.type === "text")
+                          .map((p) => p.text)
+                          .join("\n\n");
+                        void navigator.clipboard.writeText(text);
+                      }}
+                    >
+                      <Copy className="mr-2 h-3.5 w-3.5" />
+                      Copy message
+                    </DropdownMenuItem>
+                    {runHref ? (
+                      <DropdownMenuItem asChild>
+                        <Link to={runHref} target="_blank" rel="noreferrer noopener">
+                          <Search className="mr-2 h-3.5 w-3.5" />
+                          View run
+                        </Link>
+                      </DropdownMenuItem>
+                    ) : null}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </>
+          ) : null}
+        </div>
+      </div>
+    </MessagePrimitive.Root>
+  );
+}
+
+function IssueChatFeedbackButtons({
+  activeVote,
+  sharingPreference = "prompt",
+  termsUrl,
+  onVote,
+}: {
+  activeVote: FeedbackVoteValue | null;
+  sharingPreference: FeedbackDataSharingPreference;
+  termsUrl: string | null;
+  onVote: (vote: FeedbackVoteValue, options?: { allowSharing?: boolean; reason?: string }) => Promise<void>;
+}) {
+  const [isSaving, setIsSaving] = useState(false);
+  const [optimisticVote, setOptimisticVote] = useState<FeedbackVoteValue | null>(null);
+  const [reasonOpen, setReasonOpen] = useState(false);
+  const [downvoteReason, setDownvoteReason] = useState("");
+  const [pendingSharingDialog, setPendingSharingDialog] = useState<{
+    vote: FeedbackVoteValue;
+    reason?: string;
+  } | null>(null);
+  const visibleVote = optimisticVote ?? activeVote ?? null;
+
+  useEffect(() => {
+    if (optimisticVote && activeVote === optimisticVote) setOptimisticVote(null);
+  }, [activeVote, optimisticVote]);
+
+  async function doVote(
+    vote: FeedbackVoteValue,
+    options?: { allowSharing?: boolean; reason?: string },
+  ) {
+    setIsSaving(true);
+    try {
+      await onVote(vote, options);
+    } catch {
+      setOptimisticVote(null);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  function handleVote(vote: FeedbackVoteValue, reason?: string) {
+    setOptimisticVote(vote);
+    if (sharingPreference === "prompt") {
+      setPendingSharingDialog({ vote, ...(reason ? { reason } : {}) });
+      return;
+    }
+    const allowSharing = sharingPreference === "allowed";
+    void doVote(vote, {
+      ...(allowSharing ? { allowSharing: true } : {}),
+      ...(reason ? { reason } : {}),
+    });
+  }
+
+  function handleThumbsUp() {
+    handleVote("up");
+  }
+
+  function handleThumbsDown() {
+    setOptimisticVote("down");
+    setReasonOpen(true);
+    // Submit the initial down vote right away
+    handleVote("down");
+  }
+
+  function handleSubmitReason() {
+    if (!downvoteReason.trim()) return;
+    // Re-submit with reason attached
+    if (sharingPreference === "prompt") {
+      setPendingSharingDialog({ vote: "down", reason: downvoteReason });
+    } else {
+      const allowSharing = sharingPreference === "allowed";
+      void doVote("down", {
+        ...(allowSharing ? { allowSharing: true } : {}),
+        reason: downvoteReason,
+      });
+    }
+    setReasonOpen(false);
+    setDownvoteReason("");
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={isSaving}
+        className={cn(
+          "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors",
+          visibleVote === "up"
+            ? "text-green-600 dark:text-green-400"
+            : "text-muted-foreground hover:bg-accent hover:text-foreground",
+        )}
+        title="Helpful"
+        aria-label="Helpful"
+        onClick={handleThumbsUp}
+      >
+        <ThumbsUp className="h-3.5 w-3.5" />
+      </button>
+      <Popover open={reasonOpen} onOpenChange={setReasonOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            disabled={isSaving}
+            className={cn(
+              "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors",
+              visibleVote === "down"
+                ? "text-amber-600 dark:text-amber-400"
+                : "text-muted-foreground hover:bg-accent hover:text-foreground",
+            )}
+            title="Needs work"
+            aria-label="Needs work"
+            onClick={handleThumbsDown}
+          >
+            <ThumbsDown className="h-3.5 w-3.5" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent side="top" align="start" className="w-80 p-3">
+          <div className="mb-2 text-sm font-medium">What could have been better?</div>
+          <Textarea
+            value={downvoteReason}
+            onChange={(event) => setDownvoteReason(event.target.value)}
+            placeholder="Add a short note"
+            className="min-h-20 resize-y bg-background text-sm"
+            disabled={isSaving}
+          />
+          <div className="mt-2 flex items-center justify-end gap-2">
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              disabled={isSaving}
+              onClick={() => {
+                setReasonOpen(false);
+                setDownvoteReason("");
+              }}
+            >
+              Dismiss
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              disabled={isSaving || !downvoteReason.trim()}
+              onClick={handleSubmitReason}
+            >
+              {isSaving ? "Saving..." : "Save note"}
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <Dialog
+        open={Boolean(pendingSharingDialog)}
+        onOpenChange={(open) => {
+          if (!open && !isSaving) {
+            setPendingSharingDialog(null);
+            setOptimisticVote(null);
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Save your feedback sharing preference</DialogTitle>
+            <DialogDescription>
+              Choose whether voted AI outputs can be shared with Paperclip Labs. This
+              answer becomes the default for future thumbs up and thumbs down votes.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 text-sm text-muted-foreground">
+            <p>This vote is always saved locally.</p>
+            <p>
+              Choose <span className="font-medium text-foreground">Always allow</span> to share
+              this vote and future voted AI outputs. Choose{" "}
+              <span className="font-medium text-foreground">Don't allow</span> to keep this vote
+              and future votes local.
+            </p>
+            <p>You can change this later in Instance Settings &gt; General.</p>
+            {termsUrl ? (
+              <a
+                href={termsUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex text-sm text-foreground underline underline-offset-4"
+              >
+                Read our terms of service
+              </a>
+            ) : null}
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={!pendingSharingDialog || isSaving}
+              onClick={() => {
+                if (!pendingSharingDialog) return;
+                void doVote(
+                  pendingSharingDialog.vote,
+                  pendingSharingDialog.reason ? { reason: pendingSharingDialog.reason } : undefined,
+                ).then(() => setPendingSharingDialog(null));
+              }}
+            >
+              {isSaving ? "Saving..." : "Don't allow"}
+            </Button>
+            <Button
+              type="button"
+              disabled={!pendingSharingDialog || isSaving}
+              onClick={() => {
+                if (!pendingSharingDialog) return;
+                void doVote(pendingSharingDialog.vote, {
+                  allowSharing: true,
+                  ...(pendingSharingDialog.reason ? { reason: pendingSharingDialog.reason } : {}),
+                }).then(() => setPendingSharingDialog(null));
+              }}
+            >
+              {isSaving ? "Saving..." : "Always allow"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+function IssueChatSystemMessage() {
+  const { agentMap, currentUserId } = useContext(IssueChatCtx);
+  const message = useMessage();
+  const custom = message.metadata.custom as Record<string, unknown>;
+  const anchorId = typeof custom.anchorId === "string" ? custom.anchorId : undefined;
+  const runId = typeof custom.runId === "string" ? custom.runId : null;
+  const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
+  const runAgentName = typeof custom.runAgentName === "string" ? custom.runAgentName : null;
+  const runStatus = typeof custom.runStatus === "string" ? custom.runStatus : null;
+  const actorName = typeof custom.actorName === "string" ? custom.actorName : null;
+  const actorType = typeof custom.actorType === "string" ? custom.actorType : null;
+  const actorId = typeof custom.actorId === "string" ? custom.actorId : null;
+  const statusChange = typeof custom.statusChange === "object" && custom.statusChange
+    ? custom.statusChange as { from: string | null; to: string | null }
+    : null;
+  const assigneeChange = typeof custom.assigneeChange === "object" && custom.assigneeChange
+    ? custom.assigneeChange as {
+        from: IssueTimelineAssignee;
+        to: IssueTimelineAssignee;
+      }
+    : null;
+
+  if (custom.kind === "event" && actorName) {
+    const isCurrentUser = actorType === "user" && !!currentUserId && actorId === currentUserId;
+    const isAgent = actorType === "agent";
+    const agentIcon = isAgent && actorId ? agentMap?.get(actorId)?.icon : undefined;
+
+    const eventContent = (
+      <div className="min-w-0 space-y-1">
+        <div className={cn("flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5 text-xs", isCurrentUser && "justify-end")}>
+          <span className="font-medium text-foreground">{actorName}</span>
+          <span className="text-muted-foreground">updated this task</span>
+          <a
+            href={anchorId ? `#${anchorId}` : undefined}
+            className="text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
+          >
+            {timeAgo(message.createdAt)}
+          </a>
+        </div>
+
+        {statusChange ? (
+          <div className={cn("flex flex-wrap items-center gap-1.5 text-xs", isCurrentUser && "justify-end")}>
+            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Status
+            </span>
+            <span className="text-muted-foreground">{humanizeValue(statusChange.from)}</span>
+            <ArrowRight className="h-3 w-3 text-muted-foreground" />
+            <span className="font-medium text-foreground">{humanizeValue(statusChange.to)}</span>
+          </div>
+        ) : null}
+
+        {assigneeChange ? (
+          <div className={cn("flex flex-wrap items-center gap-1.5 text-xs", isCurrentUser && "justify-end")}>
+            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Assignee
+            </span>
+            <span className="text-muted-foreground">
+              {formatTimelineAssigneeLabel(assigneeChange.from, agentMap, currentUserId)}
+            </span>
+            <ArrowRight className="h-3 w-3 text-muted-foreground" />
+            <span className="font-medium text-foreground">
+              {formatTimelineAssigneeLabel(assigneeChange.to, agentMap, currentUserId)}
+            </span>
+          </div>
+        ) : null}
+      </div>
+    );
+
+    if (isCurrentUser) {
+      return (
+        <MessagePrimitive.Root id={anchorId}>
+          <div className="flex items-start justify-end gap-2 py-1">
+            {eventContent}
+          </div>
+        </MessagePrimitive.Root>
+      );
+    }
+
+    return (
+      <MessagePrimitive.Root id={anchorId}>
+        <div className="flex items-start gap-2.5 py-1">
+          <Avatar size="sm" className="mt-0.5">
+            {agentIcon ? (
+              <AvatarFallback><AgentIcon icon={agentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
+            ) : (
+              <AvatarFallback>{initialsForName(actorName)}</AvatarFallback>
+            )}
+          </Avatar>
+          <div className="flex-1">
+            {eventContent}
+          </div>
+        </div>
+      </MessagePrimitive.Root>
+    );
+  }
+
+  const displayedRunAgentName = runAgentName ?? (runAgentId ? agentMap?.get(runAgentId)?.name ?? runAgentId.slice(0, 8) : null);
+  const runAgentIcon = runAgentId ? agentMap?.get(runAgentId)?.icon : undefined;
+  if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) {
+    return (
+      <MessagePrimitive.Root id={anchorId}>
+        <div className="flex items-center gap-2.5 py-1">
+          <Avatar size="sm">
+            {runAgentIcon ? (
+              <AvatarFallback><AgentIcon icon={runAgentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
+            ) : (
+              <AvatarFallback>{initialsForName(displayedRunAgentName)}</AvatarFallback>
+            )}
+          </Avatar>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs">
+              <Link to={`/agents/${runAgentId}`} className="font-medium text-foreground transition-colors hover:underline">
+                {displayedRunAgentName}
+              </Link>
+              <span className="text-muted-foreground">run</span>
+              <Link
+                to={`/agents/${runAgentId}/runs/${runId}`}
+                className="inline-flex items-center rounded-md border border-border bg-accent/40 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
+              >
+                {runId.slice(0, 8)}
+              </Link>
+              <span className={cn("font-medium", runStatusClass(runStatus))}>
+                {formatRunStatusLabel(runStatus)}
+              </span>
+              <a
+                href={anchorId ? `#${anchorId}` : undefined}
+                className="text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
+              >
+                {timeAgo(message.createdAt)}
+              </a>
+            </div>
+          </div>
+        </div>
+      </MessagePrimitive.Root>
+    );
+  }
+
+  return null;
+}
+
+function IssueChatComposer({
+  onImageUpload,
+  onAttachImage,
+  draftKey,
+  enableReassign = false,
+  reassignOptions = [],
+  currentAssigneeValue = "",
+  suggestedAssigneeValue,
+  mentions = [],
+  agentMap,
+  composerDisabledReason = null,
+  issueStatus,
+}: {
+  onImageUpload?: (file: File) => Promise<string>;
+  onAttachImage?: (file: File) => Promise<void>;
+  draftKey?: string;
+  enableReassign?: boolean;
+  reassignOptions?: InlineEntityOption[];
+  currentAssigneeValue?: string;
+  suggestedAssigneeValue?: string;
+  mentions?: MentionOption[];
+  agentMap?: Map<string, Agent>;
+  composerDisabledReason?: string | null;
+  issueStatus?: string;
+}) {
+  const api = useAui();
+  const [body, setBody] = useState("");
+  const [reopen, setReopen] = useState(issueStatus === "done" || issueStatus === "cancelled");
+  const [submitting, setSubmitting] = useState(false);
+  const [attaching, setAttaching] = useState(false);
+  const effectiveSuggestedAssigneeValue = suggestedAssigneeValue ?? currentAssigneeValue;
+  const [reassignTarget, setReassignTarget] = useState(effectiveSuggestedAssigneeValue);
+  const attachInputRef = useRef<HTMLInputElement | null>(null);
+  const editorRef = useRef<MarkdownEditorRef>(null);
+  const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!draftKey) return;
+    setBody(loadDraft(draftKey));
+  }, [draftKey]);
+
+  useEffect(() => {
+    if (!draftKey) return;
+    if (draftTimer.current) clearTimeout(draftTimer.current);
+    draftTimer.current = setTimeout(() => {
+      saveDraft(draftKey, body);
+    }, DRAFT_DEBOUNCE_MS);
+  }, [body, draftKey]);
+
+  useEffect(() => {
+    return () => {
+      if (draftTimer.current) clearTimeout(draftTimer.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    setReassignTarget(effectiveSuggestedAssigneeValue);
+  }, [effectiveSuggestedAssigneeValue]);
+
+  async function handleSubmit() {
+    const trimmed = body.trim();
+    if (!trimmed || submitting) return;
+
+    const hasReassignment = enableReassign && reassignTarget !== currentAssigneeValue;
+    const reassignment = hasReassignment ? parseReassignment(reassignTarget) : undefined;
+    const submittedBody = trimmed;
+
+    setSubmitting(true);
+    setBody("");
+    try {
+      await api.thread().append({
+        role: "user",
+        content: [{ type: "text", text: submittedBody }],
+        metadata: { custom: {} },
+        attachments: [],
+        runConfig: {
+          custom: {
+            ...(reopen ? { reopen: true } : {}),
+            ...(reassignment ? { reassignment } : {}),
+          },
+        },
+      });
+      if (draftKey) clearDraft(draftKey);
+      setReopen(issueStatus === "done" || issueStatus === "cancelled");
+      setReassignTarget(effectiveSuggestedAssigneeValue);
+    } catch {
+      setBody((current) =>
+        restoreSubmittedCommentDraft({
+          currentBody: current,
+          submittedBody,
+        }),
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleAttachFile(evt: ChangeEvent<HTMLInputElement>) {
+    const file = evt.target.files?.[0];
+    if (!file) return;
+    setAttaching(true);
+    try {
+      if (onImageUpload) {
+        const url = await onImageUpload(file);
+        const safeName = file.name.replace(/[[\]]/g, "\\$&");
+        const markdown = `![${safeName}](${url})`;
+        setBody((prev) => prev ? `${prev}\n\n${markdown}` : markdown);
+      } else if (onAttachImage) {
+        await onAttachImage(file);
+      }
+    } finally {
+      setAttaching(false);
+      if (attachInputRef.current) attachInputRef.current.value = "";
+    }
+  }
+
+  const canSubmit = !submitting && !!body.trim();
+
+  if (composerDisabledReason) {
+    return (
+      <div className="rounded-md border border-amber-300/70 bg-amber-50/80 px-3 py-2 text-sm text-amber-900 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-100">
+        {composerDisabledReason}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <MarkdownEditor
+        ref={editorRef}
+        value={body}
+        onChange={setBody}
+        placeholder="Reply"
+        mentions={mentions}
+        onSubmit={handleSubmit}
+        imageUploadHandler={onImageUpload}
+        contentClassName="min-h-[72px] text-sm"
+      />
+
+      <div className="mt-3 flex items-center justify-end gap-3">
+        {(onImageUpload || onAttachImage) ? (
+          <div className="mr-auto flex items-center gap-3">
+            <input
+              ref={attachInputRef}
+              type="file"
+              accept="image/png,image/jpeg,image/webp,image/gif"
+              className="hidden"
+              onChange={handleAttachFile}
+            />
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => attachInputRef.current?.click()}
+              disabled={attaching}
+              title="Attach image"
+            >
+              <Paperclip className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : null}
+
+        <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={reopen}
+            onChange={(event) => setReopen(event.target.checked)}
+            className="rounded border-border"
+          />
+          Re-open
+        </label>
+
+        {enableReassign && reassignOptions.length > 0 ? (
+          <InlineEntitySelector
+            value={reassignTarget}
+            options={reassignOptions}
+            placeholder="Assignee"
+            noneLabel="No assignee"
+            searchPlaceholder="Search assignees..."
+            emptyMessage="No assignees found."
+            onChange={setReassignTarget}
+            className="h-8 text-xs"
+            renderTriggerValue={(option) => {
+              if (!option) return <span className="text-muted-foreground">Assignee</span>;
+              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+              const agent = agentId ? agentMap?.get(agentId) : null;
+              return (
+                <>
+                  {agent ? (
+                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  ) : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+            renderOption={(option) => {
+              if (!option.id) return <span className="truncate">{option.label}</span>;
+              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+              const agent = agentId ? agentMap?.get(agentId) : null;
+              return (
+                <>
+                  {agent ? (
+                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  ) : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+          />
+        ) : null}
+
+        <Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
+          {submitting ? "Posting..." : "Send"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function IssueChatThread({
+  comments,
+  feedbackVotes = [],
+  feedbackDataSharingPreference = "prompt",
+  feedbackTermsUrl = null,
+  linkedRuns = [],
+  timelineEvents = [],
+  liveRuns = [],
+  activeRun = null,
+  companyId,
+  projectId,
+  issueStatus,
+  agentMap,
+  currentUserId,
+  onVote,
+  onAdd,
+  onCancelRun,
+  imageUploadHandler,
+  onAttachImage,
+  draftKey,
+  enableReassign = false,
+  reassignOptions = [],
+  currentAssigneeValue = "",
+  suggestedAssigneeValue,
+  mentions = [],
+  composerDisabledReason = null,
+  showComposer = true,
+  showJumpToLatest,
+  emptyMessage,
+  variant = "full",
+  enableLiveTranscriptPolling = true,
+  transcriptsByRunId,
+  hasOutputForRun: hasOutputForRunOverride,
+  includeSucceededRunsWithoutOutput = false,
+  onInterruptQueued,
+  interruptingQueuedRunId = null,
+}: IssueChatThreadProps) {
+  const location = useLocation();
+  const hasScrolledRef = useRef(false);
+  const bottomAnchorRef = useRef<HTMLDivElement | null>(null);
+  const displayLiveRuns = useMemo(() => {
+    const deduped = new Map<string, LiveRunForIssue>();
+    for (const run of liveRuns) {
+      deduped.set(run.id, run);
+    }
+    if (activeRun) {
+      deduped.set(activeRun.id, {
+        id: activeRun.id,
+        status: activeRun.status,
+        invocationSource: activeRun.invocationSource,
+        triggerDetail: activeRun.triggerDetail,
+        startedAt: toIsoString(activeRun.startedAt),
+        finishedAt: toIsoString(activeRun.finishedAt),
+        createdAt: toIsoString(activeRun.createdAt) ?? new Date().toISOString(),
+        agentId: activeRun.agentId,
+        agentName: activeRun.agentName,
+        adapterType: activeRun.adapterType,
+      });
+    }
+    return [...deduped.values()].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+  }, [activeRun, liveRuns]);
+  const transcriptRuns = useMemo(() => {
+    const combined = new Map<string, { id: string; status: string; adapterType: string }>();
+    for (const run of displayLiveRuns) {
+      combined.set(run.id, {
+        id: run.id,
+        status: run.status,
+        adapterType: run.adapterType,
+      });
+    }
+    for (const run of linkedRuns) {
+      if (combined.has(run.runId)) continue;
+      const adapterType = agentMap?.get(run.agentId)?.adapterType;
+      if (!adapterType) continue;
+      combined.set(run.runId, {
+        id: run.runId,
+        status: run.status,
+        adapterType,
+      });
+    }
+    return [...combined.values()];
+  }, [agentMap, displayLiveRuns, linkedRuns]);
+  const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({
+    runs: enableLiveTranscriptPolling ? transcriptRuns : [],
+    companyId,
+  });
+  const resolvedTranscriptByRun = transcriptsByRunId ?? transcriptByRun;
+  const resolvedHasOutputForRun = hasOutputForRunOverride ?? hasOutputForRun;
+
+  const messages = useMemo(
+    () =>
+      buildIssueChatMessages({
+        comments,
+        timelineEvents,
+        linkedRuns,
+        liveRuns,
+        activeRun,
+        transcriptsByRunId: resolvedTranscriptByRun,
+        hasOutputForRun: resolvedHasOutputForRun,
+        includeSucceededRunsWithoutOutput,
+        companyId,
+        projectId,
+        agentMap,
+        currentUserId,
+      }),
+    [
+      comments,
+      timelineEvents,
+      linkedRuns,
+      liveRuns,
+      activeRun,
+      resolvedTranscriptByRun,
+      resolvedHasOutputForRun,
+      includeSucceededRunsWithoutOutput,
+      companyId,
+      projectId,
+      agentMap,
+      currentUserId,
+    ],
+  );
+
+  const isRunning = displayLiveRuns.some((run) => run.status === "queued" || run.status === "running");
+  const feedbackVoteByTargetId = useMemo(() => {
+    const map = new Map<string, FeedbackVoteValue>();
+    for (const feedbackVote of feedbackVotes) {
+      if (feedbackVote.targetType !== "issue_comment") continue;
+      map.set(feedbackVote.targetId, feedbackVote.vote);
+    }
+    return map;
+  }, [feedbackVotes]);
+
+  const runtime = usePaperclipIssueRuntime({
+    messages,
+    isRunning,
+    onSend: ({ body, reopen, reassignment }) => onAdd(body, reopen, reassignment),
+    onCancel: onCancelRun,
+  });
+
+  useEffect(() => {
+    const hash = location.hash;
+    if (!(hash.startsWith("#comment-") || hash.startsWith("#activity-") || hash.startsWith("#run-"))) return;
+    if (messages.length === 0 || hasScrolledRef.current) return;
+    const targetId = hash.slice(1);
+    const element = document.getElementById(targetId);
+    if (!element) return;
+    hasScrolledRef.current = true;
+    element.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [location.hash, messages]);
+
+  function handleJumpToLatest() {
+    bottomAnchorRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }
+
+  const chatCtx = useMemo<IssueChatMessageContext>(
+    () => ({
+      feedbackVoteByTargetId,
+      feedbackDataSharingPreference,
+      feedbackTermsUrl,
+      agentMap,
+      currentUserId,
+      onVote,
+      onInterruptQueued,
+      interruptingQueuedRunId,
+    }),
+    [
+      feedbackVoteByTargetId,
+      feedbackDataSharingPreference,
+      feedbackTermsUrl,
+      agentMap,
+      currentUserId,
+      onVote,
+      onInterruptQueued,
+      interruptingQueuedRunId,
+    ],
+  );
+
+  const components = useMemo(
+    () => ({
+      UserMessage: IssueChatUserMessage,
+      AssistantMessage: IssueChatAssistantMessage,
+      SystemMessage: IssueChatSystemMessage,
+    }),
+    [],
+  );
+
+  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={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={variant === "embedded" ? "space-y-3" : "space-y-4"}>
+            <ThreadPrimitive.Empty>
+              <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} />
+            <div ref={bottomAnchorRef} />
+          </ThreadPrimitive.Viewport>
+        </ThreadPrimitive.Root>
+
+        {showComposer ? (
+          <IssueChatComposer
+            onImageUpload={imageUploadHandler}
+            onAttachImage={onAttachImage}
+            draftKey={draftKey}
+            enableReassign={enableReassign}
+            reassignOptions={reassignOptions}
+            currentAssigneeValue={currentAssigneeValue}
+            suggestedAssigneeValue={suggestedAssigneeValue}
+            mentions={mentions}
+            agentMap={agentMap}
+            composerDisabledReason={composerDisabledReason}
+            issueStatus={issueStatus}
+          />
+        ) : null}
+      </div>
+      </IssueChatCtx.Provider>
+    </AssistantRuntimeProvider>
+  );
+}
diff --git a/ui/src/components/LiveRunWidget.tsx b/ui/src/components/LiveRunWidget.tsx
index 2c0f702e..e9c2fe7b 100644
--- a/ui/src/components/LiveRunWidget.tsx
+++ b/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>
diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index 0a933c66..b5cc12d7 100644
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@@ -8,6 +8,7 @@ import { mentionChipInlineStyle, parseMentionChipHref } from "../lib/mention-chi
 interface MarkdownBodyProps {
   children: string;
   className?: string;
+  style?: React.CSSProperties;
   /** Optional resolver for relative image paths (e.g. within export packages) */
   resolveImageSrc?: (src: string) => string | null;
 }
@@ -91,7 +92,7 @@ function MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: b
   );
 }
 
-export function MarkdownBody({ children, className, resolveImageSrc }: MarkdownBodyProps) {
+export function MarkdownBody({ children, className, style, resolveImageSrc }: MarkdownBodyProps) {
   const { theme } = useTheme();
   const components: Components = {
     pre: ({ node: _node, children: preChildren, ...preProps }) => {
@@ -145,6 +146,7 @@ export function MarkdownBody({ children, className, resolveImageSrc }: MarkdownB
         theme === "dark" && "prose-invert",
         className,
       )}
+      style={style}
     >
       <Markdown remarkPlugins={[remarkGfm]} components={components} urlTransform={(url) => url}>
         {children}
diff --git a/ui/src/components/OutputFeedbackButtons.tsx b/ui/src/components/OutputFeedbackButtons.tsx
index efcf62eb..e1591b27 100644
--- a/ui/src/components/OutputFeedbackButtons.tsx
+++ b/ui/src/components/OutputFeedbackButtons.tsx
@@ -20,6 +20,7 @@ export function OutputFeedbackButtons({
   termsUrl = null,
   onVote,
   rightSlot,
+  inline = false,
 }: {
   activeVote?: FeedbackVoteValue | null;
   disabled?: boolean;
@@ -27,6 +28,7 @@ export function OutputFeedbackButtons({
   termsUrl?: string | null;
   onVote: (vote: FeedbackVoteValue, options?: { allowSharing?: boolean; reason?: string }) => Promise<void>;
   rightSlot?: React.ReactNode;
+  inline?: boolean;
 }) {
   const [pendingVote, setPendingVote] = useState<{
     vote: FeedbackVoteValue;
@@ -109,7 +111,10 @@ export function OutputFeedbackButtons({
 
   return (
     <>
-      <div className="mt-3 flex items-center gap-2 border-t border-border/60 pt-3">
+      <div className={cn(
+        "flex items-center gap-2",
+        inline ? "justify-end" : "mt-3 border-t border-border/60 pt-3",
+      )}>
         <Button
           type="button"
           size="sm"
diff --git a/ui/src/components/RunChatSurface.tsx b/ui/src/components/RunChatSurface.tsx
new file mode 100644
index 00000000..71f6b2c1
--- /dev/null
+++ b/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
+    />
+  );
+}
diff --git a/ui/src/components/transcript/useLiveRunTranscripts.ts b/ui/src/components/transcript/useLiveRunTranscripts.ts
index a34fedae..868645d6 100644
--- a/ui/src/components/transcript/useLiveRunTranscripts.ts
+++ b/ui/src/components/transcript/useLiveRunTranscripts.ts
@@ -2,15 +2,21 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { LiveEvent } from "@paperclipai/shared";
 import { instanceSettingsApi } from "../../api/instanceSettings";
-import { heartbeatsApi, type LiveRunForIssue } from "../../api/heartbeats";
+import { heartbeatsApi } from "../../api/heartbeats";
 import { buildTranscript, getUIAdapter, onAdapterChange, type RunLogChunk, type TranscriptEntry } from "../../adapters";
 import { queryKeys } from "../../lib/queryKeys";
 
 const LOG_POLL_INTERVAL_MS = 2000;
 const LOG_READ_LIMIT_BYTES = 256_000;
 
+export interface RunTranscriptSource {
+  id: string;
+  status: string;
+  adapterType: string;
+}
+
 interface UseLiveRunTranscriptsOptions {
-  runs: LiveRunForIssue[];
+  runs: RunTranscriptSource[];
   companyId?: string | null;
   maxChunksPerRun?: number;
 }
@@ -141,7 +147,7 @@ export function useLiveRunTranscripts({
 
     let cancelled = false;
 
-    const readRunLog = async (run: LiveRunForIssue) => {
+    const readRunLog = async (run: RunTranscriptSource) => {
       const offset = logOffsetByRunRef.current.get(run.id) ?? 0;
       try {
         const result = await heartbeatsApi.log(run.id, offset, LOG_READ_LIMIT_BYTES);
@@ -166,13 +172,16 @@ export function useLiveRunTranscripts({
     };
 
     void readAll();
-    const interval = window.setInterval(() => {
-      void readAll();
-    }, LOG_POLL_INTERVAL_MS);
+    const activeRuns = runs.filter((run) => !isTerminalStatus(run.status));
+    const interval = activeRuns.length > 0
+      ? window.setInterval(() => {
+          void Promise.all(activeRuns.map((run) => readRunLog(run)));
+        }, LOG_POLL_INTERVAL_MS)
+      : null;
 
     return () => {
       cancelled = true;
-      window.clearInterval(interval);
+      if (interval !== null) window.clearInterval(interval);
     };
   }, [runIdsKey, runs]);
 
diff --git a/ui/src/fixtures/issueChatUxFixtures.ts b/ui/src/fixtures/issueChatUxFixtures.ts
new file mode 100644
index 00000000..978e7df3
--- /dev/null
+++ b/ui/src/fixtures/issueChatUxFixtures.ts
@@ -0,0 +1,337 @@
+import type { Agent, FeedbackVote } from "@paperclipai/shared";
+import type { LiveRunForIssue } from "../api/heartbeats";
+import type { InlineEntityOption } from "../components/InlineEntitySelector";
+import type { MentionOption } from "../components/MarkdownEditor";
+import type {
+  IssueChatComment,
+  IssueChatLinkedRun,
+  IssueChatTranscriptEntry,
+} from "../lib/issue-chat-messages";
+import type { IssueTimelineEvent } from "../lib/issue-timeline-events";
+
+function createAgent(
+  id: string,
+  name: string,
+  icon: string,
+  urlKey: string,
+): Agent {
+  const now = new Date("2026-04-06T12:00:00.000Z");
+  return {
+    id,
+    companyId: "company-ux",
+    name,
+    urlKey,
+    role: "engineer",
+    title: null,
+    icon,
+    status: "active",
+    reportsTo: null,
+    capabilities: null,
+    adapterType: "codex_local",
+    adapterConfig: {},
+    runtimeConfig: {},
+    budgetMonthlyCents: 0,
+    spentMonthlyCents: 0,
+    lastHeartbeatAt: null,
+    metadata: null,
+    createdAt: now,
+    updatedAt: now,
+    pauseReason: null,
+    pausedAt: null,
+    permissions: { canCreateAgents: false },
+  };
+}
+
+function createComment(overrides: Partial<IssueChatComment>): IssueChatComment {
+  return {
+    id: "comment-default",
+    companyId: "company-ux",
+    issueId: "issue-ux",
+    authorAgentId: null,
+    authorUserId: "user-1",
+    body: "",
+    createdAt: new Date("2026-04-06T12:00:00.000Z"),
+    updatedAt: new Date("2026-04-06T12:00:00.000Z"),
+    ...overrides,
+  };
+}
+
+const primaryAgent = createAgent("agent-1", "CodexCoder", "code", "codexcoder");
+const reviewAgent = createAgent("agent-2", "ClaudeFixer", "sparkles", "claudefixer");
+
+export const issueChatUxAgentMap = new Map<string, Agent>([
+  [primaryAgent.id, primaryAgent],
+  [reviewAgent.id, reviewAgent],
+]);
+
+export const issueChatUxMentions: MentionOption[] = [
+  {
+    id: "mention-agent-1",
+    name: primaryAgent.name,
+    kind: "agent",
+    agentId: primaryAgent.id,
+    agentIcon: primaryAgent.icon,
+  },
+  {
+    id: "mention-agent-2",
+    name: reviewAgent.name,
+    kind: "agent",
+    agentId: reviewAgent.id,
+    agentIcon: reviewAgent.icon,
+  },
+  {
+    id: "mention-project-1",
+    name: "Paperclip Board UI",
+    kind: "project",
+    projectId: "project-1",
+    projectColor: "#0f766e",
+  },
+];
+
+export const issueChatUxReassignOptions: InlineEntityOption[] = [
+  {
+    id: `agent:${primaryAgent.id}`,
+    label: primaryAgent.name,
+    searchText: `${primaryAgent.name} codex engineer`,
+  },
+  {
+    id: `agent:${reviewAgent.id}`,
+    label: reviewAgent.name,
+    searchText: `${reviewAgent.name} claude reviewer`,
+  },
+  {
+    id: "user:user-1",
+    label: "Board",
+    searchText: "board user",
+  },
+];
+
+export const issueChatUxLiveComments: IssueChatComment[] = [
+  createComment({
+    id: "comment-live-user",
+    body: "Ship the issue page as a real chat. Keep the activity feed, but make the assistant flow feel conversational.",
+    createdAt: new Date("2026-04-06T11:55:00.000Z"),
+    updatedAt: new Date("2026-04-06T11:55:00.000Z"),
+  }),
+  createComment({
+    id: "comment-live-agent",
+    authorAgentId: primaryAgent.id,
+    authorUserId: null,
+    body: "I swapped the old comment stack for the new assistant-ui thread and kept the existing issue mutations intact.",
+    createdAt: new Date("2026-04-06T12:01:00.000Z"),
+    updatedAt: new Date("2026-04-06T12:01:00.000Z"),
+    runId: "run-history-1",
+    runAgentId: primaryAgent.id,
+  }),
+  createComment({
+    id: "comment-live-queued",
+    body: "Can you also make a dedicated review page that shows every chat state side by side?",
+    createdAt: new Date("2026-04-06T12:05:30.000Z"),
+    updatedAt: new Date("2026-04-06T12:05:30.000Z"),
+    clientId: "client-queued-1",
+    clientStatus: "queued",
+    queueState: "queued",
+    queueTargetRunId: "run-live-1",
+  }),
+];
+
+export const issueChatUxLiveEvents: IssueTimelineEvent[] = [
+  {
+    id: "event-live-1",
+    createdAt: new Date("2026-04-06T11:54:00.000Z"),
+    actorType: "user",
+    actorId: "user-1",
+    statusChange: {
+      from: "done",
+      to: "todo",
+    },
+  },
+  {
+    id: "event-live-2",
+    createdAt: new Date("2026-04-06T11:54:30.000Z"),
+    actorType: "user",
+    actorId: "user-1",
+    assigneeChange: {
+      from: { agentId: null, userId: null },
+      to: { agentId: primaryAgent.id, userId: null },
+    },
+  },
+];
+
+export const issueChatUxLiveRuns: LiveRunForIssue[] = [
+  {
+    id: "run-live-1",
+    status: "running",
+    invocationSource: "manual",
+    triggerDetail: null,
+    startedAt: "2026-04-06T12:04:00.000Z",
+    finishedAt: null,
+    createdAt: "2026-04-06T12:04:00.000Z",
+    agentId: primaryAgent.id,
+    agentName: primaryAgent.name,
+    adapterType: "codex_local",
+    issueId: "issue-ux",
+  },
+];
+
+export const issueChatUxLinkedRuns: IssueChatLinkedRun[] = [
+  {
+    runId: "run-history-1",
+    status: "succeeded",
+    agentId: primaryAgent.id,
+    createdAt: new Date("2026-04-06T11:58:00.000Z"),
+    startedAt: new Date("2026-04-06T11:58:00.000Z"),
+    finishedAt: new Date("2026-04-06T12:00:00.000Z"),
+  },
+  {
+    runId: "run-review-1",
+    status: "failed",
+    agentId: reviewAgent.id,
+    createdAt: new Date("2026-04-06T12:31:00.000Z"),
+    startedAt: new Date("2026-04-06T12:31:00.000Z"),
+    finishedAt: new Date("2026-04-06T12:33:00.000Z"),
+  },
+];
+
+export const issueChatUxTranscriptsByRunId = new Map<string, readonly IssueChatTranscriptEntry[]>([
+  [
+    "run-history-1",
+    [
+      {
+        kind: "thinking",
+        ts: "2026-04-06T11:58:03.000Z",
+        text: "Reviewing the issue thread to see where transcript noise still leaks into the conversation.",
+      },
+      {
+        kind: "tool_call",
+        ts: "2026-04-06T11:58:07.000Z",
+        name: "read_file",
+        toolUseId: "tool-history-1",
+        input: { path: "ui/src/lib/issue-chat-messages.ts" },
+      },
+      {
+        kind: "tool_result",
+        ts: "2026-04-06T11:58:11.000Z",
+        toolUseId: "tool-history-1",
+        content: "Found the run projection path that decides whether transcript output survives after completion.",
+        isError: false,
+      },
+      {
+        kind: "assistant",
+        ts: "2026-04-06T11:59:24.000Z",
+        text: "Kept the completed run context attached to the chat timeline so the reasoning can stay folded instead of disappearing.",
+      },
+    ],
+  ],
+  [
+    "run-live-1",
+    [
+      {
+        kind: "assistant",
+        ts: "2026-04-06T12:04:02.000Z",
+        text: "I am reshaping the issue page so the thread reads like a conversation instead of a run log.",
+      },
+      {
+        kind: "thinking",
+        ts: "2026-04-06T12:04:05.000Z",
+        text: "Need to remove the internal scrollbox first, otherwise the page still feels like a nested console.",
+      },
+      {
+        kind: "tool_call",
+        ts: "2026-04-06T12:04:08.000Z",
+        name: "read_file",
+        toolUseId: "tool-read-1",
+        input: { path: "ui/src/components/IssueChatThread.tsx" },
+      },
+      {
+        kind: "tool_result",
+        ts: "2026-04-06T12:04:11.000Z",
+        toolUseId: "tool-read-1",
+        content: "Loaded the current chat surface and found the max-h viewport constraint.",
+        isError: false,
+      },
+      {
+        kind: "tool_call",
+        ts: "2026-04-06T12:04:14.000Z",
+        name: "apply_patch",
+        toolUseId: "tool-edit-1",
+        input: { file: "ui/src/components/IssueChatThread.tsx", action: "remove scroll pane" },
+      },
+      {
+        kind: "tool_result",
+        ts: "2026-04-06T12:04:22.000Z",
+        toolUseId: "tool-edit-1",
+        content: "Updated layout classes and swapped Jump to latest to page-level scrolling.",
+        isError: false,
+      },
+      {
+        kind: "stderr",
+        ts: "2026-04-06T12:04:24.000Z",
+        text: "vite warm-up: rebuilding route chunks",
+      },
+    ],
+  ],
+]);
+
+export const issueChatUxReviewComments: IssueChatComment[] = [
+  createComment({
+    id: "comment-review-user",
+    body: "This looks close. Tighten the spacing and keep the composer grounded to the chat surface.",
+    createdAt: new Date("2026-04-06T12:28:00.000Z"),
+    updatedAt: new Date("2026-04-06T12:28:00.000Z"),
+  }),
+  createComment({
+    id: "comment-review-agent",
+    authorAgentId: reviewAgent.id,
+    authorUserId: null,
+    body: [
+      "Adjusted the treatment to feel more like a product conversation.",
+      "",
+      "- Removed the count from the heading",
+      "- Let the page own scrolling",
+      "- Added a dedicated `/tests/ux/chat` review page",
+    ].join("\n"),
+    createdAt: new Date("2026-04-06T12:34:00.000Z"),
+    updatedAt: new Date("2026-04-06T12:34:00.000Z"),
+    runId: "run-review-1",
+    runAgentId: reviewAgent.id,
+  }),
+  createComment({
+    id: "comment-review-user-followup",
+    body: "Perfect. I also want to see an empty state and a blocked composer state before we merge.",
+    createdAt: new Date("2026-04-06T12:36:00.000Z"),
+    updatedAt: new Date("2026-04-06T12:36:00.000Z"),
+  }),
+];
+
+export const issueChatUxReviewEvents: IssueTimelineEvent[] = [
+  {
+    id: "event-review-1",
+    createdAt: new Date("2026-04-06T12:27:00.000Z"),
+    actorType: "user",
+    actorId: "user-1",
+    assigneeChange: {
+      from: { agentId: primaryAgent.id, userId: null },
+      to: { agentId: reviewAgent.id, userId: null },
+    },
+  },
+];
+
+export const issueChatUxFeedbackVotes: FeedbackVote[] = [
+  {
+    id: "feedback-1",
+    companyId: "company-ux",
+    issueId: "issue-ux",
+    targetType: "issue_comment",
+    targetId: "comment-review-agent",
+    authorUserId: "user-1",
+    vote: "up",
+    reason: null,
+    sharedWithLabs: false,
+    sharedAt: null,
+    consentVersion: null,
+    redactionSummary: null,
+    createdAt: new Date("2026-04-06T12:35:00.000Z"),
+    updatedAt: new Date("2026-04-06T12:35:00.000Z"),
+  },
+];
diff --git a/ui/src/hooks/usePaperclipIssueRuntime.ts b/ui/src/hooks/usePaperclipIssueRuntime.ts
new file mode 100644
index 00000000..328a5544
--- /dev/null
+++ b/ui/src/hooks/usePaperclipIssueRuntime.ts
@@ -0,0 +1,68 @@
+import { useExternalStoreRuntime, type ThreadMessage, type AppendMessage } from "@assistant-ui/react";
+
+export interface PaperclipIssueRuntimeReassignment {
+  assigneeAgentId: string | null;
+  assigneeUserId: string | null;
+}
+
+export interface PaperclipIssueRuntimeSendOptions {
+  body: string;
+  reopen?: boolean;
+  reassignment?: PaperclipIssueRuntimeReassignment;
+}
+
+interface UsePaperclipIssueRuntimeOptions {
+  messages: readonly ThreadMessage[];
+  isRunning: boolean;
+  onSend: (options: PaperclipIssueRuntimeSendOptions) => Promise<void>;
+  onCancel?: (() => Promise<void>) | undefined;
+}
+
+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 readTextContent(message: AppendMessage) {
+  return message.content
+    .filter((part): part is Extract<(typeof message.content)[number], { type: "text" }> => part.type === "text")
+    .map((part) => part.text)
+    .join("")
+    .trim();
+}
+
+export function usePaperclipIssueRuntime({
+  messages,
+  isRunning,
+  onSend,
+  onCancel,
+}: UsePaperclipIssueRuntimeOptions) {
+  return useExternalStoreRuntime({
+    messages,
+    isRunning,
+    onNew: async (message) => {
+      const body = readTextContent(message);
+      if (!body) return;
+
+      const custom = asRecord(message.runConfig?.custom);
+      const reassignmentRecord = asRecord(custom?.reassignment);
+      const reassignment =
+        reassignmentRecord &&
+        ("assigneeAgentId" in reassignmentRecord || "assigneeUserId" in reassignmentRecord)
+          ? {
+              assigneeAgentId:
+                typeof reassignmentRecord.assigneeAgentId === "string" ? reassignmentRecord.assigneeAgentId : null,
+              assigneeUserId:
+                typeof reassignmentRecord.assigneeUserId === "string" ? reassignmentRecord.assigneeUserId : null,
+            }
+          : undefined;
+
+      await onSend({
+        body,
+        reopen: custom?.reopen === true ? true : undefined,
+        reassignment,
+      });
+    },
+    ...(onCancel ? { onCancel } : {}),
+  });
+}
diff --git a/ui/src/index.css b/ui/src/index.css
index f9452a9f..807a1100 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -266,6 +266,64 @@
   }
 }
 
+/* Chain-of-thought reasoning line ticker animations.
+   Pure translate, no opacity — the overflow-hidden container clips.
+   Both keyframes share the same easing so the two spans move in lockstep. */
+@keyframes cot-line-slide-in {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes cot-line-slide-out {
+  from { transform: translateY(0); }
+  to   { transform: translateY(-100%); }
+}
+
+.cot-line-enter {
+  animation: cot-line-slide-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.cot-line-exit {
+  animation: cot-line-slide-out 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cot-line-enter,
+  .cot-line-exit {
+    animation: none;
+  }
+}
+
+/* Shimmer text effect for active "Working" state */
+@keyframes shimmer-text-slide {
+  0% { background-position: 200% center; }
+  100% { background-position: -200% center; }
+}
+
+.shimmer-text {
+  --shimmer-base: hsl(var(--foreground) / 0.75);
+  --shimmer-highlight: hsl(var(--foreground) / 0.3);
+  background: linear-gradient(
+    110deg,
+    var(--shimmer-base) 35%,
+    var(--shimmer-highlight) 50%,
+    var(--shimmer-base) 65%
+  );
+  background-size: 250% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer-text-slide 2.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-text {
+    animation: none;
+    -webkit-text-fill-color: unset;
+    background: none;
+  }
+}
+
 /* MDXEditor theme integration */
 .paperclip-mdxeditor-scope,
 .paperclip-mdxeditor {
diff --git a/ui/src/lib/assignees.test.ts b/ui/src/lib/assignees.test.ts
index 225f7133..fbe57758 100644
--- a/ui/src/lib/assignees.test.ts
+++ b/ui/src/lib/assignees.test.ts
@@ -47,7 +47,7 @@ describe("assignee selection helpers", () => {
   });
 
   it("formats current and board user labels consistently", () => {
-    expect(formatAssigneeUserLabel("user-1", "user-1")).toBe("Me");
+    expect(formatAssigneeUserLabel("user-1", "user-1")).toBe("You");
     expect(formatAssigneeUserLabel("local-board", "someone-else")).toBe("Board");
     expect(formatAssigneeUserLabel("user-abcdef", "someone-else")).toBe("user-");
   });
diff --git a/ui/src/lib/assignees.ts b/ui/src/lib/assignees.ts
index 0dc57e96..87a278ce 100644
--- a/ui/src/lib/assignees.ts
+++ b/ui/src/lib/assignees.ts
@@ -76,7 +76,7 @@ export function formatAssigneeUserLabel(
   currentUserId: string | null | undefined,
 ): string | null {
   if (!userId) return null;
-  if (currentUserId && userId === currentUserId) return "Me";
+  if (currentUserId && userId === currentUserId) return "You";
   if (userId === "local-board") return "Board";
   return userId.slice(0, 5);
 }
diff --git a/ui/src/lib/issue-chat-messages.test.ts b/ui/src/lib/issue-chat-messages.test.ts
new file mode 100644
index 00000000..f3ae87d7
--- /dev/null
+++ b/ui/src/lib/issue-chat-messages.test.ts
@@ -0,0 +1,370 @@
+import { describe, expect, it } from "vitest";
+import type { Agent } from "@paperclipai/shared";
+import {
+  buildAssistantPartsFromTranscript,
+  buildIssueChatMessages,
+  type IssueChatComment,
+  type IssueChatLinkedRun,
+} from "./issue-chat-messages";
+import type { IssueTimelineEvent } from "./issue-timeline-events";
+import type { LiveRunForIssue } from "../api/heartbeats";
+
+function createAgent(id: string, name: string): Agent {
+  return {
+    id,
+    companyId: "company-1",
+    name,
+    role: "engineer",
+    title: null,
+    icon: "code",
+    status: "active",
+    reportsTo: null,
+    capabilities: null,
+    adapterType: "codex_local",
+    adapterConfig: {},
+    runtimeConfig: {},
+    budgetMonthlyCents: 0,
+    spentMonthlyCents: 0,
+    lastHeartbeatAt: null,
+    metadata: {},
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    pauseReason: null,
+    pausedAt: null,
+    urlKey: "codexcoder",
+    permissions: { canCreateAgents: false },
+  } as Agent;
+}
+
+function createComment(overrides: Partial<IssueChatComment> = {}): IssueChatComment {
+  return {
+    id: "comment-1",
+    companyId: "company-1",
+    issueId: "issue-1",
+    authorAgentId: null,
+    authorUserId: "user-1",
+    body: "Hello",
+    createdAt: new Date("2026-04-06T12:00:00.000Z"),
+    updatedAt: new Date("2026-04-06T12:00:00.000Z"),
+    ...overrides,
+  };
+}
+
+describe("buildAssistantPartsFromTranscript", () => {
+  it("maps assistant text, reasoning, and tool activity while omitting noisy stderr", () => {
+    const result = buildAssistantPartsFromTranscript([
+      { kind: "assistant", ts: "2026-04-06T12:00:00.000Z", text: "Working on it. " },
+      { kind: "assistant", ts: "2026-04-06T12:00:01.000Z", text: "Done." },
+      { kind: "thinking", ts: "2026-04-06T12:00:02.000Z", text: "Need to inspect files." },
+      {
+        kind: "tool_call",
+        ts: "2026-04-06T12:00:03.000Z",
+        name: "read_file",
+        toolUseId: "tool-1",
+        input: { path: "ui/src/pages/IssueDetail.tsx" },
+      },
+      {
+        kind: "tool_result",
+        ts: "2026-04-06T12:00:04.000Z",
+        toolUseId: "tool-1",
+        content: "file contents",
+        isError: false,
+      },
+      { kind: "stderr", ts: "2026-04-06T12:00:05.000Z", text: "warn: noisy setup output" },
+    ]);
+
+    expect(result.parts).toHaveLength(3);
+    expect(result.parts[0]).toMatchObject({ type: "text", text: "Working on it. Done." });
+    expect(result.parts[1]).toMatchObject({ type: "reasoning", text: "Need to inspect files." });
+    expect(result.parts[2]).toMatchObject({
+      type: "tool-call",
+      toolCallId: "tool-1",
+      toolName: "read_file",
+      result: "file contents",
+      isError: false,
+    });
+    expect(result.notices).toEqual([]);
+  });
+
+  it("preserves transcript ordering when text and tool activity are interleaved", () => {
+    const result = buildAssistantPartsFromTranscript([
+      { kind: "assistant", ts: "2026-04-06T12:00:00.000Z", text: "First." },
+      {
+        kind: "tool_call",
+        ts: "2026-04-06T12:00:01.000Z",
+        name: "read_file",
+        toolUseId: "tool-1",
+        input: { path: "ui/src/components/IssueChatThread.tsx" },
+      },
+      { kind: "assistant", ts: "2026-04-06T12:00:02.000Z", text: "Second." },
+      {
+        kind: "tool_result",
+        ts: "2026-04-06T12:00:03.000Z",
+        toolUseId: "tool-1",
+        content: "ok",
+        isError: false,
+      },
+      { kind: "thinking", ts: "2026-04-06T12:00:04.000Z", text: "Need one more check." },
+      {
+        kind: "tool_call",
+        ts: "2026-04-06T12:00:05.000Z",
+        name: "write_file",
+        toolUseId: "tool-2",
+        input: { path: "ui/src/lib/issue-chat-messages.ts" },
+      },
+      {
+        kind: "tool_result",
+        ts: "2026-04-06T12:00:06.000Z",
+        toolUseId: "tool-2",
+        content: "saved",
+        isError: false,
+      },
+    ]);
+
+    expect(result.parts).toMatchObject([
+      { type: "text", text: "First." },
+      { type: "tool-call", toolCallId: "tool-1", toolName: "read_file", result: "ok" },
+      { type: "text", text: "Second." },
+      { type: "reasoning", text: "Need one more check." },
+      { type: "tool-call", toolCallId: "tool-2", toolName: "write_file", result: "saved" },
+    ]);
+  });
+
+  it("keeps run errors while suppressing init and system transcript noise", () => {
+    const result = buildAssistantPartsFromTranscript([
+      {
+        kind: "init",
+        ts: "2026-04-06T12:00:00.000Z",
+        model: "gpt-5.4",
+        sessionId: "session-123",
+      },
+      {
+        kind: "system",
+        ts: "2026-04-06T12:00:01.000Z",
+        text: "item started: planning_step (id=step-1)",
+      },
+      {
+        kind: "system",
+        ts: "2026-04-06T12:00:02.000Z",
+        text: "item completed: planning_step (id=step-1)",
+      },
+      {
+        kind: "result",
+        ts: "2026-04-06T12:00:03.000Z",
+        text: "Tool crashed during execution",
+        inputTokens: 0,
+        outputTokens: 0,
+        cachedTokens: 0,
+        costUsd: 0,
+        subtype: "error",
+        isError: true,
+        errors: ["ENOENT: missing file"],
+      },
+    ]);
+
+    expect(result.parts).toMatchObject([
+      {
+        type: "reasoning",
+        text: "Run error: ENOENT: missing file",
+      },
+    ]);
+    expect(result.notices).toEqual([]);
+  });
+
+  it("preserves diff transcript output as a fenced diff block", () => {
+    const result = buildAssistantPartsFromTranscript([
+      { kind: "assistant", ts: "2026-04-06T12:00:00.000Z", text: "Applied the patch." },
+      { kind: "diff", ts: "2026-04-06T12:00:01.000Z", changeType: "file_header", text: "ui/src/lib/issue-chat-messages.ts" },
+      { kind: "diff", ts: "2026-04-06T12:00:02.000Z", changeType: "add", text: "+function formatDiffBlock(lines: string[]) {" },
+      { kind: "diff", ts: "2026-04-06T12:00:03.000Z", changeType: "add", text: "+  return ````diff`;" },
+    ]);
+
+    expect(result.parts).toMatchObject([
+      { type: "text", text: "Applied the patch." },
+      {
+        type: "text",
+        text: [
+          "```diff",
+          "ui/src/lib/issue-chat-messages.ts",
+          "+function formatDiffBlock(lines: string[]) {",
+          "+  return ````diff`;",
+          "```",
+        ].join("\n"),
+      },
+    ]);
+  });
+});
+
+describe("buildIssueChatMessages", () => {
+  it("orders events before comments and appends active live runs as running assistant messages", () => {
+    const agentMap = new Map<string, Agent>([["agent-1", createAgent("agent-1", "CodexCoder")]]);
+    const comments = [
+      createComment(),
+      createComment({
+        id: "comment-2",
+        authorAgentId: "agent-1",
+        authorUserId: null,
+        body: "I made the change.",
+        createdAt: new Date("2026-04-06T12:03:00.000Z"),
+        updatedAt: new Date("2026-04-06T12:03:00.000Z"),
+        runId: "run-1",
+        runAgentId: "agent-1",
+      }),
+    ];
+    const timelineEvents: IssueTimelineEvent[] = [
+      {
+        id: "event-1",
+        createdAt: new Date("2026-04-06T11:59:00.000Z"),
+        actorType: "user",
+        actorId: "user-1",
+        statusChange: {
+          from: "done",
+          to: "todo",
+        },
+      },
+    ];
+    const linkedRuns: IssueChatLinkedRun[] = [
+      {
+        runId: "run-history-1",
+        status: "succeeded",
+        agentId: "agent-1",
+        createdAt: new Date("2026-04-06T12:01:00.000Z"),
+        startedAt: new Date("2026-04-06T12:01:00.000Z"),
+        finishedAt: new Date("2026-04-06T12:02:00.000Z"),
+      },
+    ];
+    const liveRuns: LiveRunForIssue[] = [
+      {
+        id: "run-live-1",
+        status: "running",
+        invocationSource: "manual",
+        triggerDetail: null,
+        startedAt: "2026-04-06T12:04:00.000Z",
+        finishedAt: null,
+        createdAt: "2026-04-06T12:04:00.000Z",
+        agentId: "agent-1",
+        agentName: "CodexCoder",
+        adapterType: "codex_local",
+      },
+    ];
+
+    const messages = buildIssueChatMessages({
+      comments,
+      timelineEvents,
+      linkedRuns,
+      liveRuns,
+      transcriptsByRunId: new Map([
+        [
+          "run-live-1",
+          [{ kind: "assistant", ts: "2026-04-06T12:04:01.000Z", text: "Streaming reply" }],
+        ],
+      ]),
+      hasOutputForRun: (runId) => runId === "run-live-1",
+      companyId: "company-1",
+      projectId: "project-1",
+      agentMap,
+      currentUserId: "user-1",
+    });
+
+    expect(messages.map((message) => `${message.role}:${message.id}`)).toEqual([
+      "system:activity:event-1",
+      "user:comment-1",
+      "assistant:comment-2",
+      "assistant:live-run:run-live-1",
+    ]);
+
+    const liveRunMessage = messages.at(-1);
+    expect(liveRunMessage).toMatchObject({
+      role: "assistant",
+      status: { type: "running" },
+    });
+    expect(liveRunMessage?.content[0]).toMatchObject({
+      type: "text",
+      text: "Streaming reply",
+    });
+  });
+
+  it("keeps succeeded runs as assistant messages when transcript output exists", () => {
+    const agentMap = new Map<string, Agent>([["agent-1", createAgent("agent-1", "CodexCoder")]]);
+    const messages = buildIssueChatMessages({
+      comments: [],
+      timelineEvents: [],
+      linkedRuns: [
+        {
+          runId: "run-history-1",
+          status: "succeeded",
+          agentId: "agent-1",
+          createdAt: new Date("2026-04-06T12:01:00.000Z"),
+          startedAt: new Date("2026-04-06T12:01:00.000Z"),
+          finishedAt: new Date("2026-04-06T12:03:00.000Z"),
+        },
+      ],
+      liveRuns: [],
+      transcriptsByRunId: new Map([
+        [
+          "run-history-1",
+          [
+            { kind: "thinking", ts: "2026-04-06T12:01:10.000Z", text: "Checking the current issue thread." },
+            { kind: "assistant", ts: "2026-04-06T12:02:30.000Z", text: "Updated the thread renderer." },
+          ],
+        ],
+      ]),
+      hasOutputForRun: (runId) => runId === "run-history-1",
+      agentMap,
+      currentUserId: "user-1",
+    });
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0]).toMatchObject({
+      id: "historical-run:run-history-1",
+      role: "assistant",
+      status: { type: "complete", reason: "stop" },
+      metadata: {
+        custom: {
+          kind: "historical-run",
+          runId: "run-history-1",
+          chainOfThoughtLabel: "Worked for 2 minutes",
+        },
+      },
+    });
+    expect(messages[0]?.content).toMatchObject([
+      { type: "reasoning", text: "Checking the current issue thread." },
+      { type: "text", text: "Updated the thread renderer." },
+    ]);
+  });
+
+  it("can keep succeeded runs without transcript output for embedded run feeds", () => {
+    const messages = buildIssueChatMessages({
+      comments: [],
+      timelineEvents: [],
+      linkedRuns: [
+        {
+          runId: "run-history-2",
+          status: "succeeded",
+          agentId: "agent-1",
+          agentName: "CodexCoder",
+          createdAt: new Date("2026-04-06T12:01:00.000Z"),
+          startedAt: new Date("2026-04-06T12:01:00.000Z"),
+          finishedAt: new Date("2026-04-06T12:03:00.000Z"),
+        },
+      ],
+      liveRuns: [],
+      includeSucceededRunsWithoutOutput: true,
+      currentUserId: "user-1",
+    });
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0]).toMatchObject({
+      id: "run:run-history-2",
+      role: "system",
+      metadata: {
+        custom: {
+          kind: "run",
+          runId: "run-history-2",
+          runAgentName: "CodexCoder",
+          runStatus: "succeeded",
+        },
+      },
+    });
+  });
+});
diff --git a/ui/src/lib/issue-chat-messages.ts b/ui/src/lib/issue-chat-messages.ts
new file mode 100644
index 00000000..09c615f6
--- /dev/null
+++ b/ui/src/lib/issue-chat-messages.ts
@@ -0,0 +1,727 @@
+import type {
+  ReasoningMessagePart,
+  TextMessagePart,
+  ThreadAssistantMessage,
+  ThreadMessage,
+  ToolCallMessagePart,
+  ThreadSystemMessage,
+  ThreadUserMessage,
+} from "@assistant-ui/react";
+import type { Agent, IssueComment } from "@paperclipai/shared";
+import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
+import { formatAssigneeUserLabel } from "./assignees";
+import type { IssueTimelineEvent } from "./issue-timeline-events";
+import {
+  summarizeNotice,
+} from "./transcriptPresentation";
+
+type JsonValue = null | string | number | boolean | JsonValue[] | { [key: string]: JsonValue };
+type JsonObject = { [key: string]: JsonValue };
+
+export interface IssueChatComment extends IssueComment {
+  runId?: string | null;
+  runAgentId?: string | null;
+  interruptedRunId?: string | null;
+  clientId?: string;
+  clientStatus?: "pending" | "queued";
+  queueState?: "queued";
+  queueTargetRunId?: string | null;
+}
+
+export interface IssueChatLinkedRun {
+  runId: string;
+  status: string;
+  agentId: string;
+  agentName?: string;
+  createdAt: Date | string;
+  startedAt: Date | string | null;
+  finishedAt?: Date | string | null;
+}
+
+export interface IssueChatTranscriptEntry {
+  kind:
+    | "assistant"
+    | "thinking"
+    | "user"
+    | "tool_call"
+    | "tool_result"
+    | "init"
+    | "result"
+    | "stderr"
+    | "system"
+    | "stdout"
+    | "diff";
+  ts: string;
+  text?: string;
+  delta?: boolean;
+  name?: string;
+  input?: unknown;
+  toolUseId?: string;
+  toolName?: string;
+  content?: string;
+  isError?: boolean;
+  subtype?: string;
+  errors?: string[];
+  model?: string;
+  sessionId?: string;
+  inputTokens?: number;
+  outputTokens?: number;
+  cachedTokens?: number;
+  costUsd?: number;
+  changeType?: "add" | "remove" | "context" | "hunk" | "file_header" | "truncation";
+}
+
+type MessageWithOrder = {
+  createdAtMs: number;
+  order: number;
+  message: ThreadMessage;
+};
+
+function toDate(value: Date | string | null | undefined) {
+  return value instanceof Date ? value : new Date(value ?? Date.now());
+}
+
+function toTimestamp(value: Date | string | null | undefined) {
+  return toDate(value).getTime();
+}
+
+function sortByCreated<T extends { createdAt: Date | string; id: string }>(items: readonly T[]) {
+  return [...items].sort((a, b) => {
+    const diff = toTimestamp(a.createdAt) - toTimestamp(b.createdAt);
+    if (diff !== 0) return diff;
+    return a.id.localeCompare(b.id);
+  });
+}
+
+function normalizeJsonValue(input: unknown): JsonValue {
+  if (
+    input === null ||
+    typeof input === "string" ||
+    typeof input === "number" ||
+    typeof input === "boolean"
+  ) {
+    return input;
+  }
+  if (Array.isArray(input)) {
+    return input.map((entry) => normalizeJsonValue(entry));
+  }
+  if (typeof input === "object" && input) {
+    const entries = Object.entries(input as Record<string, unknown>).map(([key, value]) => [
+      key,
+      normalizeJsonValue(value),
+    ]);
+    return Object.fromEntries(entries) as JsonObject;
+  }
+  return String(input);
+}
+
+function normalizeToolArgs(input: unknown): JsonObject {
+  if (typeof input === "object" && input && !Array.isArray(input)) {
+    return normalizeJsonValue(input) as JsonObject;
+  }
+  if (input === undefined) return {};
+  return { value: normalizeJsonValue(input) };
+}
+
+function stringifyUnknown(value: unknown) {
+  if (typeof value === "string") return value;
+  if (value === null || value === undefined) return "";
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function mergePartText(
+  previous: TextMessagePart | ReasoningMessagePart,
+  next: TextMessagePart | ReasoningMessagePart,
+) {
+  if (!previous.text) return next.text;
+  if (!next.text) return previous.text;
+  if (
+    previous.text.endsWith("\n")
+    || next.text.startsWith("\n")
+    || previous.text.endsWith(" ")
+    || next.text.startsWith(" ")
+  ) {
+    return `${previous.text}${next.text}`;
+  }
+  return previous.type === "text"
+    ? `${previous.text} ${next.text}`
+    : `${previous.text}\n${next.text}`;
+}
+
+function formatDiffBlock(lines: string[]) {
+  return `\`\`\`diff\n${lines.join("\n")}\n\`\`\``;
+}
+
+function createAssistantMetadata(custom: Record<string, unknown>) {
+  return {
+    unstable_state: null,
+    unstable_annotations: [],
+    unstable_data: [],
+    steps: [],
+    custom,
+  } as const;
+}
+
+function authorNameForComment(
+  comment: IssueChatComment,
+  agentMap?: Map<string, Agent>,
+  currentUserId?: string | null,
+) {
+  if (comment.authorAgentId) {
+    return agentMap?.get(comment.authorAgentId)?.name ?? comment.authorAgentId.slice(0, 8);
+  }
+  return formatAssigneeUserLabel(comment.authorUserId ?? null, currentUserId) ?? "You";
+}
+
+function formatStatusLabel(status: string) {
+  return status.replace(/_/g, " ");
+}
+
+function createCommentMessage(args: {
+  comment: IssueChatComment;
+  agentMap?: Map<string, Agent>;
+  currentUserId?: string | null;
+  companyId?: string | null;
+  projectId?: string | null;
+}): ThreadMessage {
+  const { comment, agentMap, currentUserId, companyId, projectId } = args;
+  const createdAt = toDate(comment.createdAt);
+  const authorName = authorNameForComment(comment, agentMap, currentUserId);
+  const custom = {
+    kind: "comment",
+    commentId: comment.id,
+    anchorId: `comment-${comment.id}`,
+    authorName,
+    authorAgentId: comment.authorAgentId,
+    authorUserId: comment.authorUserId,
+    companyId: companyId ?? comment.companyId,
+    projectId: projectId ?? null,
+    runId: comment.runId ?? null,
+    runAgentId: comment.runAgentId ?? null,
+    clientStatus: comment.clientStatus ?? null,
+    queueState: comment.queueState ?? null,
+    queueTargetRunId: comment.queueTargetRunId ?? null,
+    interruptedRunId: comment.interruptedRunId ?? null,
+  };
+
+  if (comment.authorAgentId) {
+    const message: ThreadAssistantMessage = {
+      id: comment.id,
+      role: "assistant",
+      createdAt,
+      content: [{ type: "text", text: comment.body }],
+      status: { type: "complete", reason: "stop" },
+      metadata: createAssistantMetadata(custom),
+    };
+    return message;
+  }
+
+  const message: ThreadUserMessage = {
+    id: comment.id,
+    role: "user",
+    createdAt,
+    content: [{ type: "text", text: comment.body }],
+    attachments: [],
+    metadata: { custom },
+  };
+  return message;
+}
+
+function createTimelineEventMessage(args: {
+  event: IssueTimelineEvent;
+  agentMap?: Map<string, Agent>;
+  currentUserId?: string | null;
+}) {
+  const { event, agentMap, currentUserId } = args;
+  const actorName = event.actorType === "agent"
+    ? (agentMap?.get(event.actorId)?.name ?? event.actorId.slice(0, 8))
+    : event.actorType === "system"
+      ? "System"
+      : (formatAssigneeUserLabel(event.actorId, currentUserId) ?? "Board");
+
+  const lines: string[] = [`${actorName} updated this issue`];
+  if (event.statusChange) {
+    lines.push(
+      `Status: ${event.statusChange.from ?? "none"} -> ${event.statusChange.to ?? "none"}`,
+    );
+  }
+  if (event.assigneeChange) {
+    const from = event.assigneeChange.from.agentId
+      ? (agentMap?.get(event.assigneeChange.from.agentId)?.name ?? event.assigneeChange.from.agentId.slice(0, 8))
+      : (formatAssigneeUserLabel(event.assigneeChange.from.userId, currentUserId) ?? "Unassigned");
+    const to = event.assigneeChange.to.agentId
+      ? (agentMap?.get(event.assigneeChange.to.agentId)?.name ?? event.assigneeChange.to.agentId.slice(0, 8))
+      : (formatAssigneeUserLabel(event.assigneeChange.to.userId, currentUserId) ?? "Unassigned");
+    lines.push(`Assignee: ${from} -> ${to}`);
+  }
+
+  const message: ThreadSystemMessage = {
+    id: `activity:${event.id}`,
+    role: "system",
+    createdAt: toDate(event.createdAt),
+    content: [{ type: "text", text: lines.join("\n") }],
+    metadata: {
+      custom: {
+        kind: "event",
+        anchorId: `activity-${event.id}`,
+        eventId: event.id,
+        actorName,
+        actorType: event.actorType,
+        actorId: event.actorId,
+        statusChange: event.statusChange ?? null,
+        assigneeChange: event.assigneeChange ?? null,
+      },
+    },
+  };
+  return message;
+}
+
+function runTimestamp(run: IssueChatLinkedRun) {
+  return run.finishedAt ?? run.startedAt ?? run.createdAt;
+}
+
+export interface SegmentTiming {
+  startMs: number;
+  endMs: number;
+}
+
+function computeSegmentTimings(entries: readonly IssueChatTranscriptEntry[]): SegmentTiming[] {
+  const timings: SegmentTiming[] = [];
+  let inSegment = false;
+  let segStart = 0;
+  let segEnd = 0;
+
+  for (const entry of entries) {
+    const ts = new Date(entry.ts).getTime();
+
+    const isCoT =
+      entry.kind === "thinking" ||
+      entry.kind === "tool_call" ||
+      entry.kind === "tool_result" ||
+      entry.kind === "diff" ||
+      (entry.kind === "result" && ((entry.isError && !!entry.errors?.length) || !!entry.text));
+    const isText = entry.kind === "assistant" && !!entry.text;
+
+    if (isCoT) {
+      if (!inSegment) {
+        inSegment = true;
+        segStart = ts;
+      }
+      segEnd = ts;
+    } else if (isText && inSegment) {
+      timings.push({ startMs: segStart, endMs: segEnd });
+      inSegment = false;
+    }
+  }
+
+  if (inSegment) {
+    timings.push({ startMs: segStart, endMs: segEnd });
+  }
+
+  return timings;
+}
+
+export function formatDurationWords(ms: number | null) {
+  if (ms === null || !Number.isFinite(ms) || ms <= 0) return null;
+  const totalSeconds = Math.max(1, Math.round(ms / 1000));
+  if (totalSeconds < 60) {
+    return `${totalSeconds} second${totalSeconds === 1 ? "" : "s"}`;
+  }
+  const totalMinutes = Math.round(totalSeconds / 60);
+  if (totalMinutes < 60) {
+    return `${totalMinutes} minute${totalMinutes === 1 ? "" : "s"}`;
+  }
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (minutes === 0) {
+    return `${hours} hour${hours === 1 ? "" : "s"}`;
+  }
+  return `${hours} hour${hours === 1 ? "" : "s"} ${minutes} minute${minutes === 1 ? "" : "s"}`;
+}
+
+function runDurationLabel(run: {
+  status: string;
+  createdAt: Date | string;
+  startedAt: Date | string | null;
+  finishedAt?: Date | string | null;
+}) {
+  const start = run.startedAt ?? run.createdAt;
+  const end = run.finishedAt ?? null;
+  const durationMs = end ? Math.max(0, toTimestamp(end) - toTimestamp(start)) : null;
+  const durationText = formatDurationWords(durationMs);
+  switch (run.status) {
+    case "succeeded":
+      return durationText ? `Worked for ${durationText}` : "Finished work";
+    case "failed":
+    case "error":
+      return durationText ? `Failed after ${durationText}` : "Run failed";
+    case "timed_out":
+      return durationText ? `Timed out after ${durationText}` : "Run timed out";
+    case "cancelled":
+      return durationText ? `Cancelled after ${durationText}` : "Run cancelled";
+    case "queued":
+      return "Queued";
+    case "running":
+      return "Working...";
+    default:
+      return formatStatusLabel(run.status);
+  }
+}
+
+function createHistoricalRunMessage(run: IssueChatLinkedRun, agentMap?: Map<string, Agent>) {
+  const agentName = run.agentName ?? agentMap?.get(run.agentId)?.name ?? run.agentId.slice(0, 8);
+  const message: ThreadSystemMessage = {
+    id: `run:${run.runId}`,
+    role: "system",
+    createdAt: toDate(runTimestamp(run)),
+    content: [{ type: "text", text: `${agentName} run ${run.runId.slice(0, 8)} ${formatStatusLabel(run.status)}` }],
+    metadata: {
+      custom: {
+        kind: "run",
+        anchorId: `run-${run.runId}`,
+        runId: run.runId,
+        runAgentId: run.agentId,
+        runAgentName: agentName,
+        runStatus: run.status,
+      },
+    },
+  };
+  return message;
+}
+
+function createHistoricalTranscriptMessage(args: {
+  run: IssueChatLinkedRun;
+  transcript: readonly IssueChatTranscriptEntry[];
+  hasOutput: boolean;
+  agentMap?: Map<string, Agent>;
+}) {
+  const { run, transcript, hasOutput, agentMap } = args;
+  const agentName = run.agentName ?? agentMap?.get(run.agentId)?.name ?? run.agentId.slice(0, 8);
+  const { parts, notices, segments } = buildAssistantPartsFromTranscript(transcript);
+  const waitingText = hasOutput ? "" : "Run finished";
+  const content = parts.length > 0
+    ? parts
+    : waitingText
+      ? [{ type: "text", text: waitingText } satisfies TextMessagePart]
+      : [];
+
+  const message: ThreadAssistantMessage = {
+    id: `historical-run:${run.runId}`,
+    role: "assistant",
+    createdAt: toDate(run.startedAt ?? run.createdAt),
+    content,
+    status: { type: "complete", reason: "stop" },
+    metadata: createAssistantMetadata({
+      kind: "historical-run",
+      anchorId: `run-${run.runId}`,
+      runId: run.runId,
+      runAgentId: run.agentId,
+      runAgentName: agentName,
+      runStatus: run.status,
+      notices,
+      waitingText,
+      chainOfThoughtLabel: runDurationLabel(run),
+      chainOfThoughtSegments: segments,
+    }),
+  };
+  return message;
+}
+
+export function buildAssistantPartsFromTranscript(entries: readonly IssueChatTranscriptEntry[]): {
+  parts: Array<TextMessagePart | ReasoningMessagePart | ToolCallMessagePart<JsonObject, unknown>>;
+  notices: string[];
+  segments: SegmentTiming[];
+} {
+  const orderedParts: Array<TextMessagePart | ReasoningMessagePart | ToolCallMessagePart<JsonObject, unknown>> = [];
+  const toolParts = new Map<string, ToolCallMessagePart<JsonObject, unknown>>();
+  const toolIndices = new Map<string, number>();
+  const notices: string[] = [];
+  let pendingDiffLines: string[] = [];
+  let pendingDiffParentId: string | undefined;
+
+  const flushPendingDiff = () => {
+    if (pendingDiffLines.length === 0) return;
+    orderedParts.push({
+      type: "text",
+      text: formatDiffBlock(pendingDiffLines),
+      parentId: pendingDiffParentId,
+    });
+    pendingDiffLines = [];
+    pendingDiffParentId = undefined;
+  };
+
+  for (const [index, entry] of entries.entries()) {
+    if (entry.kind === "diff") {
+      pendingDiffParentId ??= `diff-group:${index}`;
+      pendingDiffLines.push(entry.text ?? "");
+      continue;
+    }
+
+    flushPendingDiff();
+
+    if (entry.kind === "assistant" && entry.text) {
+      orderedParts.push({ type: "text", text: entry.text });
+      continue;
+    }
+    if (entry.kind === "thinking" && entry.text) {
+      orderedParts.push({ type: "reasoning", text: entry.text });
+      continue;
+    }
+    if (entry.kind === "tool_call") {
+      const toolCallId = entry.toolUseId || `tool-${index}`;
+      const nextPart: ToolCallMessagePart<JsonObject, unknown> = {
+        type: "tool-call",
+        toolCallId,
+        toolName: entry.name || "tool",
+        args: normalizeToolArgs(entry.input),
+        argsText: stringifyUnknown(entry.input),
+      };
+      if (!toolParts.has(toolCallId)) {
+        toolIndices.set(toolCallId, orderedParts.length);
+        orderedParts.push(nextPart);
+      } else {
+        const existingIndex = toolIndices.get(toolCallId);
+        if (existingIndex !== undefined) {
+          orderedParts[existingIndex] = nextPart;
+        }
+      }
+      toolParts.set(toolCallId, nextPart);
+      continue;
+    }
+    if (entry.kind === "tool_result") {
+      const toolCallId = entry.toolUseId || `tool-result-${index}`;
+      const existing = toolParts.get(toolCallId);
+      const nextPart: ToolCallMessagePart<JsonObject, unknown> = {
+        type: "tool-call",
+        toolCallId,
+        toolName: existing?.toolName || entry.toolName || "tool",
+        args: existing?.args ?? {},
+        argsText: existing?.argsText ?? "",
+        result: entry.content ?? "",
+        isError: entry.isError === true,
+      };
+      if (existing) {
+        const existingIndex = toolIndices.get(toolCallId);
+        if (existingIndex !== undefined) {
+          orderedParts[existingIndex] = nextPart;
+        }
+      } else {
+        toolIndices.set(toolCallId, orderedParts.length);
+        orderedParts.push(nextPart);
+      }
+      toolParts.set(toolCallId, nextPart);
+      continue;
+    }
+    if (entry.kind === "init") continue;
+    if (entry.kind === "stderr") continue;
+    if (entry.kind === "stdout") continue;
+    if (entry.kind === "system") continue;
+    if (entry.kind === "result") {
+      if (entry.isError && entry.errors?.length) {
+        for (const error of entry.errors) {
+          orderedParts.push({ type: "reasoning", text: `Run error: ${summarizeNotice(error)}` });
+        }
+      } else if (entry.text) {
+        orderedParts.push({
+          type: "reasoning",
+          text: entry.isError
+            ? `Run error: ${summarizeNotice(entry.text)}`
+            : summarizeNotice(entry.text),
+        });
+      }
+      continue;
+    }
+  }
+
+  flushPendingDiff();
+
+  const mergedParts: Array<TextMessagePart | ReasoningMessagePart | ToolCallMessagePart<JsonObject, unknown>> = [];
+  for (const part of orderedParts) {
+    if (part.type === "tool-call") {
+      mergedParts.push(part);
+      continue;
+    }
+    const previous = mergedParts.at(-1);
+    if (previous && previous.type === part.type && previous.parentId === part.parentId) {
+      mergedParts[mergedParts.length - 1] = {
+        ...previous,
+        text: mergePartText(previous, part),
+      };
+      continue;
+    }
+    mergedParts.push(part);
+  }
+
+  return {
+    parts: mergedParts,
+    notices,
+    segments: computeSegmentTimings(entries),
+  };
+}
+
+function normalizeLiveRuns(
+  liveRuns: readonly LiveRunForIssue[],
+  activeRun: ActiveRunForIssue | null | undefined,
+  issueId?: string,
+) {
+  const deduped = new Map<string, LiveRunForIssue>();
+  for (const run of liveRuns) {
+    deduped.set(run.id, run);
+  }
+  if (activeRun) {
+    deduped.set(activeRun.id, {
+      id: activeRun.id,
+      status: activeRun.status,
+      invocationSource: activeRun.invocationSource,
+      triggerDetail: activeRun.triggerDetail,
+      startedAt: activeRun.startedAt ? toDate(activeRun.startedAt).toISOString() : null,
+      finishedAt: activeRun.finishedAt ? toDate(activeRun.finishedAt).toISOString() : null,
+      createdAt: toDate(activeRun.createdAt).toISOString(),
+      agentId: activeRun.agentId,
+      agentName: activeRun.agentName,
+      adapterType: activeRun.adapterType,
+      issueId,
+    });
+  }
+  return [...deduped.values()].sort((a, b) => toTimestamp(a.createdAt) - toTimestamp(b.createdAt));
+}
+
+function createLiveRunMessage(args: {
+  run: LiveRunForIssue;
+  transcript: readonly IssueChatTranscriptEntry[];
+  hasOutput: boolean;
+}) {
+  const { run, transcript, hasOutput } = args;
+  const { parts, notices, segments } = buildAssistantPartsFromTranscript(transcript);
+  const waitingText =
+    run.status === "queued"
+      ? "Queued..."
+      : hasOutput
+        ? ""
+        : "Working...";
+
+  const content = parts.length > 0
+    ? parts
+    : waitingText
+      ? [{ type: "text", text: waitingText } satisfies TextMessagePart]
+      : [];
+
+  const message: ThreadAssistantMessage = {
+    id: `live-run:${run.id}`,
+    role: "assistant",
+    createdAt: toDate(run.startedAt ?? run.createdAt),
+    content,
+    status: { type: "running" },
+    metadata: createAssistantMetadata({
+      kind: "live-run",
+      runId: run.id,
+      runAgentId: run.agentId,
+      runAgentName: run.agentName,
+      runStatus: run.status,
+      adapterType: run.adapterType,
+      notices,
+      waitingText,
+      chainOfThoughtLabel: runDurationLabel(run),
+      chainOfThoughtSegments: segments,
+    }),
+  };
+  return message;
+}
+
+export function buildIssueChatMessages(args: {
+  comments: readonly IssueChatComment[];
+  timelineEvents: readonly IssueTimelineEvent[];
+  linkedRuns: readonly IssueChatLinkedRun[];
+  liveRuns: readonly LiveRunForIssue[];
+  activeRun?: ActiveRunForIssue | null;
+  transcriptsByRunId?: ReadonlyMap<string, readonly IssueChatTranscriptEntry[]>;
+  hasOutputForRun?: (runId: string) => boolean;
+  includeSucceededRunsWithoutOutput?: boolean;
+  issueId?: string;
+  companyId?: string | null;
+  projectId?: string | null;
+  agentMap?: Map<string, Agent>;
+  currentUserId?: string | null;
+}) {
+  const {
+    comments,
+    timelineEvents,
+    linkedRuns,
+    liveRuns,
+    activeRun,
+    transcriptsByRunId,
+    hasOutputForRun,
+    includeSucceededRunsWithoutOutput = false,
+    issueId,
+    companyId,
+    projectId,
+    agentMap,
+    currentUserId,
+  } = args;
+
+  const orderedMessages: MessageWithOrder[] = [];
+
+  for (const comment of sortByCreated(comments)) {
+    orderedMessages.push({
+      createdAtMs: toTimestamp(comment.createdAt),
+      order: 1,
+      message: createCommentMessage({ comment, agentMap, currentUserId, companyId, projectId }),
+    });
+  }
+
+  for (const event of sortByCreated(timelineEvents)) {
+    orderedMessages.push({
+      createdAtMs: toTimestamp(event.createdAt),
+      order: 0,
+      message: createTimelineEventMessage({ event, agentMap, currentUserId }),
+    });
+  }
+
+  for (const run of [...linkedRuns].sort((a, b) => toTimestamp(runTimestamp(a)) - toTimestamp(runTimestamp(b)))) {
+    const transcript = transcriptsByRunId?.get(run.runId) ?? [];
+    const hasRunOutput = transcript.length > 0 || (hasOutputForRun?.(run.runId) ?? false);
+    if (hasRunOutput) {
+      orderedMessages.push({
+        createdAtMs: toTimestamp(run.startedAt ?? run.createdAt),
+        order: 2,
+        message: createHistoricalTranscriptMessage({
+          run,
+          transcript,
+          hasOutput: hasRunOutput,
+          agentMap,
+        }),
+      });
+      continue;
+    }
+    if (run.status === "succeeded" && !includeSucceededRunsWithoutOutput) continue;
+    orderedMessages.push({
+      createdAtMs: toTimestamp(runTimestamp(run)),
+      order: 2,
+      message: createHistoricalRunMessage(run, agentMap),
+    });
+  }
+
+  for (const run of normalizeLiveRuns(liveRuns, activeRun, issueId)) {
+    orderedMessages.push({
+      createdAtMs: toTimestamp(run.startedAt ?? run.createdAt),
+      order: 3,
+      message: createLiveRunMessage({
+        run,
+        transcript: transcriptsByRunId?.get(run.id) ?? [],
+        hasOutput: hasOutputForRun?.(run.id) ?? false,
+      }),
+    });
+  }
+
+  return orderedMessages
+    .sort((a, b) => {
+      if (a.createdAtMs !== b.createdAtMs) return a.createdAtMs - b.createdAtMs;
+      if (a.order !== b.order) return a.order - b.order;
+      return a.message.id.localeCompare(b.message.id);
+    })
+    .map((entry) => entry.message);
+}
diff --git a/ui/src/lib/transcriptPresentation.test.ts b/ui/src/lib/transcriptPresentation.test.ts
new file mode 100644
index 00000000..fba04729
--- /dev/null
+++ b/ui/src/lib/transcriptPresentation.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { describeToolInput, summarizeToolInput } from "./transcriptPresentation";
+
+describe("summarizeToolInput", () => {
+  it("prefers human descriptions over raw commands when both exist", () => {
+    expect(
+      summarizeToolInput("command_execution", {
+        description: "Inspect the issue chat thread layout classes",
+        command: "zsh -lc 'sed -n \"1,220p\" ui/src/components/IssueChatThread.tsx'",
+      }),
+    ).toBe("Inspect the issue chat thread layout classes");
+  });
+});
+
+describe("describeToolInput", () => {
+  it("keeps command tools description-first in the detail view", () => {
+    expect(
+      describeToolInput("command_execution", {
+        description: "Inspect the issue chat thread layout classes",
+        command: "zsh -lc 'sed -n \"1,220p\" ui/src/components/IssueChatThread.tsx'",
+        cwd: "/workspace/paperclip",
+      }),
+    ).toEqual([
+      { label: "Intent", value: "Inspect the issue chat thread layout classes", tone: "default" },
+      { label: "Directory", value: "/workspace/paperclip", tone: "default" },
+    ]);
+  });
+
+  it("surfaces concise structured details for file tools", () => {
+    expect(
+      describeToolInput("read_file", {
+        path: "ui/src/lib/issue-chat-messages.ts",
+      }),
+    ).toEqual([
+      { label: "Path", value: "ui/src/lib/issue-chat-messages.ts", tone: "default" },
+    ]);
+  });
+});
diff --git a/ui/src/lib/transcriptPresentation.ts b/ui/src/lib/transcriptPresentation.ts
new file mode 100644
index 00000000..32442a90
--- /dev/null
+++ b/ui/src/lib/transcriptPresentation.ts
@@ -0,0 +1,281 @@
+type TranscriptDensity = "comfortable" | "compact";
+
+type TranscriptActivity = {
+  activityId?: string;
+  name: string;
+  status: "running" | "completed";
+};
+
+export interface ToolInputDetail {
+  label: string;
+  value: string;
+  tone?: "default" | "code";
+}
+
+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 humanizeLabel(value: string): string {
+  return value
+    .replace(/[_-]+/g, " ")
+    .trim()
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function stripWrappedShell(command: string): string {
+  const trimmed = compactWhitespace(command);
+  const shellWrapped = trimmed.match(/^(?:(?:\/bin\/)?(?:zsh|bash|sh)|cmd(?:\.exe)?(?:\s+\/d)?(?:\s+\/s)?(?:\s+\/c)?)\s+(?:-lc|\/c)\s+(.+)$/i);
+  const inner = shellWrapped?.[1] ?? trimmed;
+  const quoted = inner.match(/^(['"])([\s\S]*)\1$/);
+  return compactWhitespace(quoted?.[2] ?? inner);
+}
+
+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 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 parseStructuredToolResult(result: string | undefined) {
+  if (!result) return null;
+  const lines = result.split(/\r?\n/);
+  const metadata = new Map<string, string>();
+  let bodyStartIndex = lines.findIndex((line) => line.trim() === "");
+  if (bodyStartIndex === -1) bodyStartIndex = lines.length;
+
+  for (let index = 0; index < bodyStartIndex; index += 1) {
+    const match = lines[index]?.match(/^([a-z_]+):\s*(.+)$/i);
+    if (match) {
+      metadata.set(match[1].toLowerCase(), compactWhitespace(match[2]));
+    }
+  }
+
+  const body = lines.slice(Math.min(bodyStartIndex + 1, lines.length))
+    .map((line) => compactWhitespace(line))
+    .filter(Boolean)
+    .join("\n");
+
+  return {
+    command: metadata.get("command") ?? null,
+    status: metadata.get("status") ?? null,
+    exitCode: metadata.get("exit_code") ?? null,
+    body,
+  };
+}
+
+export function formatToolPayload(value: unknown): string {
+  if (typeof value === "string") {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    } catch {
+      return value;
+    }
+  }
+  return formatUnknown(value);
+}
+
+export function parseToolPayload(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+export function isCommandTool(name: string, input: unknown): boolean {
+  if (name === "command_execution" || name === "shell" || name === "shellToolCall" || name === "bash") {
+    return true;
+  }
+  if (typeof input === "string") {
+    return /\b(?:bash|zsh|sh|cmd|powershell)\b/i.test(input);
+  }
+  const record = asRecord(input);
+  return Boolean(record && (typeof record.command === "string" || typeof record.cmd === "string"));
+}
+
+export function displayToolName(name: string, input: unknown): string {
+  if (isCommandTool(name, input)) return "Executing command";
+  return humanizeLabel(name);
+}
+
+export function summarizeToolInput(
+  name: string,
+  input: unknown,
+  density: TranscriptDensity = "comfortable",
+): string {
+  const compactMax = density === "compact" ? 72 : 120;
+  if (typeof input === "string") {
+    const normalized = isCommandTool(name, input) ? stripWrappedShell(input) : compactWhitespace(input);
+    return truncate(normalized, compactMax);
+  }
+  const record = asRecord(input);
+  if (!record) {
+    const serialized = compactWhitespace(formatUnknown(input));
+    return serialized ? truncate(serialized, compactMax) : `Inspect ${name} input`;
+  }
+
+  const command = typeof record.command === "string"
+    ? record.command
+    : typeof record.cmd === "string"
+      ? record.cmd
+      : null;
+  const humanDescription =
+    summarizeRecord(record, ["description", "summary", "reason", "goal", "intent", "action", "task"])
+    ?? null;
+  if (humanDescription) {
+    return truncate(humanDescription, compactMax);
+  }
+  if (command && isCommandTool(name, record)) {
+    return truncate(stripWrappedShell(command), compactMax);
+  }
+
+  const direct =
+    summarizeRecord(record, ["path", "filePath", "file_path", "query", "url", "prompt", "message"])
+    ?? summarizeRecord(record, ["pattern", "name", "title", "target", "tool", "command", "cmd"])
+    ?? 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 readToolDetailValue(value: unknown, max = 200): string | null {
+  if (typeof value === "string") {
+    const normalized = compactWhitespace(value);
+    return normalized ? truncate(normalized, max) : null;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return null;
+}
+
+export function describeToolInput(name: string, input: unknown): ToolInputDetail[] {
+  if (typeof input === "string") {
+    const summary = compactWhitespace(isCommandTool(name, input) ? stripWrappedShell(input) : input);
+    return summary ? [{ label: isCommandTool(name, input) ? "Command" : "Input", value: truncate(summary, 200), tone: "code" }] : [];
+  }
+
+  const record = asRecord(input);
+  if (!record) return [];
+
+  const details: ToolInputDetail[] = [];
+  const seen = new Set<string>();
+  const pushDetail = (label: string, value: string | null, tone: ToolInputDetail["tone"] = "default") => {
+    if (!value) return;
+    const key = `${label}:${value}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    details.push({ label, value, tone });
+  };
+
+  pushDetail(
+    "Intent",
+    summarizeRecord(record, ["description", "summary", "reason", "goal", "intent", "action", "task"]) ?? null,
+  );
+  pushDetail("Path", readToolDetailValue(record.path) ?? readToolDetailValue(record.filePath) ?? readToolDetailValue(record.file_path));
+  pushDetail("Directory", readToolDetailValue(record.cwd));
+  pushDetail("Query", readToolDetailValue(record.query));
+  pushDetail("Target", readToolDetailValue(record.url) ?? readToolDetailValue(record.target));
+  pushDetail("Prompt", readToolDetailValue(record.prompt) ?? readToolDetailValue(record.message));
+  pushDetail("Pattern", readToolDetailValue(record.pattern));
+  pushDetail("Name", readToolDetailValue(record.name) ?? readToolDetailValue(record.title));
+
+  if (Array.isArray(record.paths) && record.paths.length > 0) {
+    const paths = record.paths
+      .filter((value): value is string => typeof value === "string" && value.trim().length > 0)
+      .slice(0, 3)
+      .join(", ");
+    if (paths) {
+      const suffix = record.paths.length > 3 ? `, +${record.paths.length - 3} more` : "";
+      pushDetail("Paths", `${paths}${suffix}`);
+    }
+  }
+
+  const command = typeof record.command === "string"
+    ? record.command
+    : typeof record.cmd === "string"
+      ? record.cmd
+      : null;
+  if (command && isCommandTool(name, record) && !details.some((detail) => detail.label === "Intent")) {
+    pushDetail("Command", truncate(stripWrappedShell(command), 200), "code");
+  }
+
+  return details;
+}
+
+export function summarizeToolResult(
+  result: string | undefined,
+  isError: boolean | undefined,
+  density: TranscriptDensity = "comfortable",
+): string {
+  if (!result) return isError ? "Tool failed" : "Waiting for result";
+  const structured = parseStructuredToolResult(result);
+  if (structured) {
+    if (structured.body) {
+      return truncate(structured.body.split("\n")[0] ?? structured.body, density === "compact" ? 84 : 140);
+    }
+    if (structured.status === "completed") return "Completed";
+    if (structured.status === "failed" || structured.status === "error") {
+      return structured.exitCode ? `Failed with exit code ${structured.exitCode}` : "Failed";
+    }
+  }
+  const lines = result
+    .split(/\r?\n/)
+    .map((line) => compactWhitespace(line))
+    .filter(Boolean);
+  const firstLine = lines[0] ?? result;
+  return truncate(firstLine, density === "compact" ? 84 : 140);
+}
+
+export function parseSystemActivity(text: string): TranscriptActivity | null {
+  const match = text.match(/^item (started|completed):\s*([a-z0-9_-]+)(?:\s+\(id=([^)]+)\))?$/i);
+  if (!match) return null;
+  return {
+    status: match[1].toLowerCase() === "started" ? "running" : "completed",
+    name: humanizeLabel(match[2] ?? "Activity"),
+    activityId: match[3] || undefined,
+  };
+}
+
+export function shouldHideNiceModeStderr(text: string): boolean {
+  const normalized = compactWhitespace(text).toLowerCase();
+  return normalized.startsWith("[paperclip] skipping saved session resume");
+}
+
+export function summarizeNotice(text: string, max = 160): string {
+  return truncate(compactWhitespace(text), max);
+}
diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts
index 6fc61585..1e6b015e 100644
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -29,6 +29,13 @@ export function formatDateTime(date: Date | string): string {
   });
 }
 
+export function formatShortDate(date: Date | string): string {
+  return new Date(date).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+}
+
 export function relativeTime(date: Date | string): string {
   const now = Date.now();
   const then = new Date(date).getTime();
diff --git a/ui/src/pages/IssueChatUxLab.tsx b/ui/src/pages/IssueChatUxLab.tsx
new file mode 100644
index 00000000..f752fa90
--- /dev/null
+++ b/ui/src/pages/IssueChatUxLab.tsx
@@ -0,0 +1,328 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { IssueChatThread } from "../components/IssueChatThread";
+import {
+  issueChatUxAgentMap,
+  issueChatUxFeedbackVotes,
+  issueChatUxLinkedRuns,
+  issueChatUxLiveComments,
+  issueChatUxLiveEvents,
+  issueChatUxLiveRuns,
+  issueChatUxMentions,
+  issueChatUxReassignOptions,
+  issueChatUxReviewComments,
+  issueChatUxReviewEvents,
+  issueChatUxTranscriptsByRunId,
+} from "../fixtures/issueChatUxFixtures";
+import { cn } from "../lib/utils";
+import { Bot, Brain, FlaskConical, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
+
+const noop = async () => {};
+
+const highlights = [
+  "Running assistant replies with streamed text, reasoning, tool cards, and background status notes",
+  "Historical issue events and linked runs rendered inline with the chat timeline",
+  "Queued user messages, settled assistant comments, and feedback controls",
+  "Empty and disabled-composer states without relying on live backend data",
+];
+
+function LabSection({
+  id,
+  eyebrow,
+  title,
+  description,
+  accentClassName,
+  children,
+}: {
+  id?: string;
+  eyebrow: string;
+  title: string;
+  description: string;
+  accentClassName?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section
+      id={id}
+      className={cn(
+        "rounded-[28px] border border-border/70 bg-background/80 p-4 shadow-[0_24px_60px_rgba(15,23,42,0.08)] sm:p-5",
+        accentClassName,
+      )}
+    >
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+            {eyebrow}
+          </div>
+          <h2 className="mt-1 text-xl font-semibold tracking-tight">{title}</h2>
+          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">{description}</p>
+        </div>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+const DEMO_REASONING_LINES = [
+  "Analyzing the user's request about the animation smoothness...",
+  "The current implementation unmounts the old span instantly, causing a flash...",
+  "Looking at the CSS keyframes for cot-line-slide-up...",
+  "We need a paired exit animation so the old line slides out while the new one slides in...",
+  "Implementing a two-span ticker: exiting line goes up and out, entering line comes up from below...",
+  "Testing the 280ms cubic-bezier transition timing...",
+];
+
+function RotatingReasoningDemo({ intervalMs = 2200 }: { intervalMs?: number }) {
+  const [index, setIndex] = useState(0);
+  const prevRef = useRef(DEMO_REASONING_LINES[0]);
+  const [ticker, setTicker] = useState<{
+    key: number;
+    current: string;
+    exiting: string | null;
+  }>({ key: 0, current: DEMO_REASONING_LINES[0], exiting: null });
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIndex((i) => (i + 1) % DEMO_REASONING_LINES.length);
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [intervalMs]);
+
+  const currentLine = DEMO_REASONING_LINES[index];
+
+  useEffect(() => {
+    if (currentLine !== prevRef.current) {
+      const prev = prevRef.current;
+      prevRef.current = currentLine;
+      setTicker((t) => ({ key: t.key + 1, current: currentLine, exiting: prev }));
+    }
+  }, [currentLine]);
+
+  return (
+    <div className="flex gap-2 px-1">
+      <div className="flex flex-col items-center pt-0.5">
+        <Brain className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
+      </div>
+      <div className="relative h-5 min-w-0 flex-1 overflow-hidden">
+        {ticker.exiting !== null && (
+          <span
+            key={`out-${ticker.key}`}
+            className="cot-line-exit absolute inset-x-0 truncate text-[13px] italic leading-5 text-muted-foreground/70"
+            onAnimationEnd={() => setTicker((t) => ({ ...t, exiting: null }))}
+          >
+            {ticker.exiting}
+          </span>
+        )}
+        <span
+          key={`in-${ticker.key}`}
+          className={cn(
+            "absolute inset-x-0 truncate text-[13px] italic leading-5 text-muted-foreground/70",
+            ticker.key > 0 && "cot-line-enter",
+          )}
+        >
+          {ticker.current}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function IssueChatUxLab() {
+  const [showComposer, setShowComposer] = useState(true);
+
+  return (
+    <div className="space-y-6">
+      <div className="overflow-hidden rounded-[32px] border border-border/70 bg-[linear-gradient(135deg,rgba(8,145,178,0.10),transparent_28%),linear-gradient(180deg,rgba(245,158,11,0.10),transparent_44%),var(--background)] shadow-[0_30px_80px_rgba(15,23,42,0.10)]">
+        <div className="grid gap-6 lg:grid-cols-[minmax(0,1.2fr)_320px]">
+          <div className="p-6 sm:p-7">
+            <div className="inline-flex items-center gap-2 rounded-full border border-cyan-500/25 bg-cyan-500/[0.08] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.24em] text-cyan-700 dark:text-cyan-300">
+              <FlaskConical className="h-3.5 w-3.5" />
+              Chat UX Lab
+            </div>
+            <h1 className="mt-4 text-3xl font-semibold tracking-tight">Issue chat review surface</h1>
+            <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
+              This page exercises the real assistant-ui issue chat with fixture-backed messages. Use it to review
+              spacing, chronology, running states, tool rendering, activity rows, queueing, and composer behavior
+              without needing a live issue in progress.
+            </p>
+
+            <div className="mt-5 flex flex-wrap items-center gap-2">
+              <Badge variant="outline" className="rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.18em]">
+                /tests/ux/chat
+              </Badge>
+              <Badge variant="outline" className="rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.18em]">
+                assistant-ui thread
+              </Badge>
+              <Badge variant="outline" className="rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.18em]">
+                fixture-backed live run
+              </Badge>
+            </div>
+
+            <div className="mt-6 flex flex-wrap items-center gap-3">
+              <Button variant="outline" size="sm" className="rounded-full" onClick={() => setShowComposer((value) => !value)}>
+                {showComposer ? "Hide composer in primary preview" : "Show composer in primary preview"}
+              </Button>
+              <a
+                href="#live-execution"
+                className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/80 px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <Route className="h-3.5 w-3.5" />
+                Jump to live execution preview
+              </a>
+            </div>
+          </div>
+
+          <aside className="border-t border-border/60 bg-background/70 p-6 lg:border-l lg:border-t-0">
+            <div className="mb-4 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+              <WandSparkles className="h-4 w-4 text-cyan-700 dark:text-cyan-300" />
+              Covered states
+            </div>
+            <div className="space-y-3">
+              {highlights.map((highlight) => (
+                <div
+                  key={highlight}
+                  className="rounded-2xl border border-border/70 bg-background/85 px-4 py-3 text-sm text-muted-foreground"
+                >
+                  {highlight}
+                </div>
+              ))}
+            </div>
+          </aside>
+        </div>
+      </div>
+
+      <LabSection
+        id="rotating-text"
+        eyebrow="Animation demo"
+        title="Rotating reasoning text"
+        description="Isolated ticker that cycles sample reasoning lines on a timer. The outgoing line slides up and fades out while the incoming line slides up from below. Runs in a loop so you can tune timing and easing without needing a live stream."
+        accentClassName="bg-[linear-gradient(180deg,rgba(168,85,247,0.06),transparent_28%),var(--background)]"
+      >
+        <div className="space-y-4">
+          <div className="rounded-xl border border-border/60 bg-accent/10 p-4">
+            <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Default interval (2.2s)
+            </div>
+            <RotatingReasoningDemo />
+          </div>
+          <div className="rounded-xl border border-border/60 bg-accent/10 p-4">
+            <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Fast interval (1s) — stress test
+            </div>
+            <RotatingReasoningDemo intervalMs={1000} />
+          </div>
+        </div>
+      </LabSection>
+
+      <LabSection
+        id="live-execution"
+        eyebrow="Primary preview"
+        title="Live execution thread"
+        description="Shows the fully active state: timeline events, historical run marker, a running assistant reply with reasoning and tools, and a queued follow-up from the user."
+        accentClassName="bg-[linear-gradient(180deg,rgba(6,182,212,0.05),transparent_28%),var(--background)]"
+      >
+        <IssueChatThread
+          comments={issueChatUxLiveComments}
+          linkedRuns={issueChatUxLinkedRuns.slice(0, 1)}
+          timelineEvents={issueChatUxLiveEvents}
+          liveRuns={issueChatUxLiveRuns}
+          issueStatus="todo"
+          agentMap={issueChatUxAgentMap}
+          currentUserId="user-1"
+          onAdd={noop}
+          onVote={noop}
+          onCancelRun={noop}
+          onInterruptQueued={noop}
+          draftKey="issue-chat-ux-lab-primary"
+          enableReassign
+          reassignOptions={issueChatUxReassignOptions}
+          currentAssigneeValue="agent:agent-1"
+          suggestedAssigneeValue="agent:agent-2"
+          mentions={issueChatUxMentions}
+          showComposer={showComposer}
+          enableLiveTranscriptPolling={false}
+          transcriptsByRunId={issueChatUxTranscriptsByRunId}
+          hasOutputForRun={(runId) => issueChatUxTranscriptsByRunId.has(runId)}
+        />
+      </LabSection>
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <LabSection
+          eyebrow="Settled review"
+          title="Durable comments and feedback"
+          description="Shows the post-run state: assistant comment feedback controls, historical run context, and timeline reassignment without any active stream."
+          accentClassName="bg-[linear-gradient(180deg,rgba(168,85,247,0.05),transparent_26%),var(--background)]"
+        >
+          <IssueChatThread
+            comments={issueChatUxReviewComments}
+            linkedRuns={issueChatUxLinkedRuns.slice(1)}
+            timelineEvents={issueChatUxReviewEvents}
+            feedbackVotes={issueChatUxFeedbackVotes}
+            feedbackTermsUrl="/feedback-terms"
+            issueStatus="in_review"
+            agentMap={issueChatUxAgentMap}
+            currentUserId="user-1"
+            onAdd={noop}
+            onVote={noop}
+            draftKey="issue-chat-ux-lab-review"
+            showComposer={false}
+            enableLiveTranscriptPolling={false}
+          />
+        </LabSection>
+
+        <div className="space-y-6">
+          <LabSection
+            eyebrow="Empty thread"
+            title="Empty state and disabled composer"
+            description="Keeps the message area visible even when there is no thread yet, and replaces the composer with an explicit warning when replies are blocked."
+            accentClassName="bg-[linear-gradient(180deg,rgba(245,158,11,0.08),transparent_26%),var(--background)]"
+          >
+            <IssueChatThread
+              comments={[]}
+              linkedRuns={[]}
+              timelineEvents={[]}
+              issueStatus="done"
+              agentMap={issueChatUxAgentMap}
+              currentUserId="user-1"
+              onAdd={noop}
+              composerDisabledReason="This workspace is closed, so new chat replies are disabled until the issue is reopened."
+              draftKey="issue-chat-ux-lab-empty"
+              enableLiveTranscriptPolling={false}
+            />
+          </LabSection>
+
+          <Card className="gap-4 border-border/70 bg-background/85 py-0">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                <MessagesSquare className="h-4 w-4 text-cyan-700 dark:text-cyan-300" />
+                Review checklist
+              </div>
+              <CardTitle className="text-lg">What to evaluate on this page</CardTitle>
+              <CardDescription>
+                This route should be the fastest way to inspect the chat system before or after tweaks.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3 px-5 pb-5 pt-0 text-sm text-muted-foreground">
+              <div className="rounded-2xl border border-border/70 bg-background/80 px-4 py-3">
+                <div className="mb-1 flex items-center gap-2 font-medium text-foreground">
+                  <Bot className="h-4 w-4 text-cyan-700 dark:text-cyan-300" />
+                  Message hierarchy
+                </div>
+                Check that user, assistant, and system rows scan differently without feeling like separate products.
+              </div>
+              <div className="rounded-2xl border border-border/70 bg-background/80 px-4 py-3">
+                <div className="mb-1 flex items-center gap-2 font-medium text-foreground">
+                  <Sparkles className="h-4 w-4 text-cyan-700 dark:text-cyan-300" />
+                  Stream polish
+                </div>
+                Watch the live preview for reasoning density, tool expansion behavior, and queued follow-up readability.
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 05fb5af8..7aa3187d 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -40,11 +40,10 @@ import { useProjectOrder } from "../hooks/useProjectOrder";
 import { relativeTime, cn, formatTokens, visibleRunCostUsd } from "../lib/utils";
 import { ApprovalCard } from "../components/ApprovalCard";
 import { InlineEditor } from "../components/InlineEditor";
-import { CommentThread } from "../components/CommentThread";
+import { IssueChatThread } from "../components/IssueChatThread";
 import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
 import { IssueProperties } from "../components/IssueProperties";
 import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard";
-import { LiveRunWidget } from "../components/LiveRunWidget";
 import type { MentionOption } from "../components/MarkdownEditor";
 import { ImageGalleryModal } from "../components/ImageGalleryModal";
 import { ScrollToBottom } from "../components/ScrollToBottom";
@@ -300,7 +299,7 @@ export function IssueDetail() {
   const [moreOpen, setMoreOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [mobilePropsOpen, setMobilePropsOpen] = useState(false);
-  const [detailTab, setDetailTab] = useState("comments");
+  const [detailTab, setDetailTab] = useState("chat");
   const [pendingApprovalAction, setPendingApprovalAction] = useState<{
     approvalId: string;
     action: "approve" | "reject";
@@ -610,15 +609,6 @@ export function IssueDetail() {
     });
   }, [activity, threadComments, linkedRuns, runningIssueRun]);
 
-  const queuedComments = useMemo(
-    () => commentsWithRunMeta.filter((comment) => comment.queueState === "queued"),
-    [commentsWithRunMeta],
-  );
-
-  const timelineComments = useMemo(
-    () => commentsWithRunMeta.filter((comment) => comment.queueState !== "queued"),
-    [commentsWithRunMeta],
-  );
   const timelineEvents = useMemo(
     () => extractIssueTimelineEvents(activity),
     [activity],
@@ -1713,9 +1703,9 @@ export function IssueDetail() {
 
       <Tabs value={detailTab} onValueChange={setDetailTab} className="space-y-3">
         <TabsList variant="line" className="w-full justify-start gap-1">
-          <TabsTrigger value="comments" className="gap-1.5">
+          <TabsTrigger value="chat" className="gap-1.5">
             <MessageSquare className="h-3.5 w-3.5" />
-            Comments
+            Chat
           </TabsTrigger>
           <TabsTrigger value="activity" className="gap-1.5">
             <ActivityIcon className="h-3.5 w-3.5" />
@@ -1728,25 +1718,18 @@ export function IssueDetail() {
           ))}
         </TabsList>
 
-        <TabsContent value="comments">
-          <CommentThread
-            comments={timelineComments}
-            queuedComments={queuedComments}
-            linkedApprovals={linkedApprovals}
+        <TabsContent value="chat">
+          <IssueChatThread
+            comments={commentsWithRunMeta}
             feedbackVotes={feedbackVotes}
             feedbackDataSharingPreference={feedbackDataSharingPreference}
             feedbackTermsUrl={FEEDBACK_TERMS_URL}
             linkedRuns={timelineRuns}
             timelineEvents={timelineEvents}
+            liveRuns={liveRuns}
+            activeRun={activeRun}
             companyId={issue.companyId}
             projectId={issue.projectId}
-            onApproveApproval={async (approvalId) => {
-              await approvalDecision.mutateAsync({ approvalId, action: "approve" });
-            }}
-            onRejectApproval={async (approvalId) => {
-              await approvalDecision.mutateAsync({ approvalId, action: "reject" });
-            }}
-            pendingApprovalAction={pendingApprovalAction}
             issueStatus={issue.status}
             agentMap={agentMap}
             currentUserId={currentUserId}
@@ -1756,10 +1739,6 @@ export function IssueDetail() {
             currentAssigneeValue={actualAssigneeValue}
             suggestedAssigneeValue={suggestedAssigneeValue}
             mentions={mentionOptions}
-            onInterruptQueued={async (runId) => {
-              await interruptQueuedComment.mutateAsync(runId);
-            }}
-            interruptingQueuedRunId={interruptQueuedComment.isPending ? runningIssueRun?.id ?? null : null}
             composerDisabledReason={commentComposerDisabledReason}
             onVote={async (commentId, vote, options) => {
               await feedbackVoteMutation.mutateAsync({
@@ -1785,7 +1764,15 @@ export function IssueDetail() {
             onAttachImage={async (file) => {
               await uploadAttachment.mutateAsync(file);
             }}
-            liveRunSlot={<LiveRunWidget issueId={issueId!} companyId={issue.companyId} />}
+            onInterruptQueued={async (runId) => {
+              await interruptQueuedComment.mutateAsync(runId);
+            }}
+            interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
+            onCancelRun={runningIssueRun
+              ? async () => {
+                  await interruptQueuedComment.mutateAsync(runningIssueRun.id);
+                }
+              : undefined}
           />
         </TabsContent>