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/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
new file mode 100644
index 00000000..b0cb86ce
--- /dev/null
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -0,0 +1,123 @@
+// @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 } 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,
+  },
+  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: () => <textarea aria-label="Issue chat editor" />,
+}));
+
+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);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  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();
+    });
+  });
+});
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index b7a1271a..754fb1f9 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -21,6 +21,7 @@ import {
   buildIssueChatMessages,
   type IssueChatComment,
   type IssueChatLinkedRun,
+  type IssueChatTranscriptEntry,
 } from "../lib/issue-chat-messages";
 import type { IssueTimelineEvent } from "../lib/issue-timeline-events";
 import { Button } from "@/components/ui/button";
@@ -70,6 +71,10 @@ interface IssueChatThreadProps {
   suggestedAssigneeValue?: string;
   mentions?: MentionOption[];
   composerDisabledReason?: string | null;
+  showComposer?: boolean;
+  enableLiveTranscriptPolling?: boolean;
+  transcriptsByRunId?: ReadonlyMap<string, readonly IssueChatTranscriptEntry[]>;
+  hasOutputForRun?: (runId: string) => boolean;
 }
 
 const DRAFT_DEBOUNCE_MS = 800;
@@ -735,9 +740,14 @@ export function IssueChatThread({
   suggestedAssigneeValue,
   mentions = [],
   composerDisabledReason = null,
+  showComposer = true,
+  enableLiveTranscriptPolling = true,
+  transcriptsByRunId,
+  hasOutputForRun: hasOutputForRunOverride,
 }: 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) {
@@ -759,7 +769,12 @@ export function IssueChatThread({
     }
     return [...deduped.values()].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
   }, [activeRun, liveRuns]);
-  const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({ runs: displayLiveRuns, companyId });
+  const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({
+    runs: enableLiveTranscriptPolling ? displayLiveRuns : [],
+    companyId,
+  });
+  const resolvedTranscriptByRun = transcriptsByRunId ?? transcriptByRun;
+  const resolvedHasOutputForRun = hasOutputForRunOverride ?? hasOutputForRun;
 
   const messages = useMemo(
     () =>
@@ -769,8 +784,8 @@ export function IssueChatThread({
         linkedRuns,
         liveRuns,
         activeRun,
-        transcriptsByRunId: transcriptByRun,
-        hasOutputForRun,
+        transcriptsByRunId: resolvedTranscriptByRun,
+        hasOutputForRun: resolvedHasOutputForRun,
         companyId,
         projectId,
         agentMap,
@@ -782,8 +797,8 @@ export function IssueChatThread({
       linkedRuns,
       liveRuns,
       activeRun,
-      transcriptByRun,
-      hasOutputForRun,
+      resolvedTranscriptByRun,
+      resolvedHasOutputForRun,
       companyId,
       projectId,
       agentMap,
@@ -819,6 +834,10 @@ export function IssueChatThread({
     element.scrollIntoView({ behavior: "smooth", block: "center" });
   }, [location.hash, messages]);
 
+  function handleJumpToLatest() {
+    bottomAnchorRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }
+
   const components = useMemo(
     () => ({
       UserMessage: () => <IssueChatUserMessage companyId={companyId} projectId={projectId} />,
@@ -845,38 +864,44 @@ export function IssueChatThread({
   return (
     <AssistantRuntimeProvider runtime={runtime}>
       <div className="space-y-4">
-        <div className="flex items-center justify-between gap-3">
-          <h3 className="text-sm font-semibold">Chat ({messages.length})</h3>
-          <ThreadPrimitive.ScrollToBottom className="text-xs text-muted-foreground hover:text-foreground">
+        <div className="flex justify-end">
+          <button
+            type="button"
+            onClick={handleJumpToLatest}
+            className="text-xs text-muted-foreground transition-colors hover:text-foreground"
+          >
             Jump to latest
-          </ThreadPrimitive.ScrollToBottom>
+          </button>
         </div>
 
-        <ThreadPrimitive.Root className="rounded-2xl border border-border bg-background shadow-sm">
-          <ThreadPrimitive.Viewport className="max-h-[70vh] space-y-4 overflow-y-auto px-4 py-4">
+        <ThreadPrimitive.Root className="rounded-[28px] border border-border/70 bg-[linear-gradient(180deg,rgba(15,23,42,0.02),transparent_22%),var(--background)] px-4 py-4 shadow-sm">
+          <ThreadPrimitive.Viewport className="space-y-4">
             <ThreadPrimitive.Empty>
               <div className="rounded-2xl border border-dashed border-border bg-card px-6 py-10 text-center text-sm text-muted-foreground">
                 This issue conversation is empty. Start with a message below.
               </div>
             </ThreadPrimitive.Empty>
             <ThreadPrimitive.Messages components={components} />
+            <div ref={bottomAnchorRef} />
           </ThreadPrimitive.Viewport>
         </ThreadPrimitive.Root>
 
-        <IssueChatComposer
-          onImageUpload={imageUploadHandler}
-          onAttachImage={onAttachImage}
-          draftKey={draftKey}
-          enableReassign={enableReassign}
-          reassignOptions={reassignOptions}
-          currentAssigneeValue={currentAssigneeValue}
-          suggestedAssigneeValue={suggestedAssigneeValue}
-          mentions={mentions}
-          agentMap={agentMap}
-          composerDisabledReason={composerDisabledReason}
-          issueStatus={issueStatus}
-          onCancelRun={onCancelRun}
-        />
+        {showComposer ? (
+          <IssueChatComposer
+            onImageUpload={imageUploadHandler}
+            onAttachImage={onAttachImage}
+            draftKey={draftKey}
+            enableReassign={enableReassign}
+            reassignOptions={reassignOptions}
+            currentAssigneeValue={currentAssigneeValue}
+            suggestedAssigneeValue={suggestedAssigneeValue}
+            mentions={mentions}
+            agentMap={agentMap}
+            composerDisabledReason={composerDisabledReason}
+            issueStatus={issueStatus}
+            onCancelRun={onCancelRun}
+          />
+        ) : null}
       </div>
     </AssistantRuntimeProvider>
   );
diff --git a/ui/src/fixtures/issueChatUxFixtures.ts b/ui/src/fixtures/issueChatUxFixtures.ts
new file mode 100644
index 00000000..17925c00
--- /dev/null
+++ b/ui/src/fixtures/issueChatUxFixtures.ts
@@ -0,0 +1,308 @@
+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-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/pages/IssueChatUxLab.tsx b/ui/src/pages/IssueChatUxLab.tsx
new file mode 100644
index 00000000..357943fe
--- /dev/null
+++ b/ui/src/pages/IssueChatUxLab.tsx
@@ -0,0 +1,240 @@
+import { 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, FlaskConical, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
+
+const noop = async () => {};
+
+const highlights = [
+  "Running assistant replies with streamed text, reasoning, tool cards, and noisy notices",
+  "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>
+  );
+}
+
+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="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}
+          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>
+  );
+}