From f593e116c1d272dc71b6f743cc3d900b87c1237a Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Mon, 6 Apr 2026 11:00:12 -0500
Subject: [PATCH] Refine issue chat activity and message chrome

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueChatThread.test.tsx  |  84 ++++-
 ui/src/components/IssueChatThread.tsx       | 391 +++++++++++++-------
 ui/src/components/OutputFeedbackButtons.tsx |   7 +-
 ui/src/lib/issue-chat-messages.test.ts      |  44 +++
 ui/src/lib/issue-chat-messages.ts           |  82 ++--
 ui/src/pages/IssueChatUxLab.tsx             |   1 +
 ui/src/pages/IssueDetail.tsx                |   4 +
 7 files changed, 446 insertions(+), 167 deletions(-)

diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
index b0cb86ce..bcc6b8bd 100644
--- a/ui/src/components/IssueChatThread.test.tsx
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -22,6 +22,7 @@ vi.mock("@assistant-ui/react", () => ({
   MessagePrimitive: {
     Root: ({ children }: { children: ReactNode }) => <div>{children}</div>,
     Content: () => null,
+    Parts: () => null,
   },
   useAui: () => ({ thread: () => ({ append: vi.fn() }) }),
   useAuiState: () => false,
@@ -47,7 +48,19 @@ vi.mock("./MarkdownBody", () => ({
 }));
 
 vi.mock("./MarkdownEditor", () => ({
-  MarkdownEditor: () => <textarea aria-label="Issue chat editor" />,
+  MarkdownEditor: ({
+    value = "",
+    onChange,
+  }: {
+    value?: string;
+    onChange?: (value: string) => void;
+  }) => (
+    <textarea
+      aria-label="Issue chat editor"
+      value={value}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
 }));
 
 vi.mock("./InlineEntitySelector", () => ({
@@ -83,10 +96,12 @@ describe("IssueChatThread", () => {
   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", () => {
@@ -120,4 +135,71 @@ describe("IssueChatThread", () => {
       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();
+
+    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();
+    });
+  });
 });
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index 754fb1f9..5f5bf349 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -1,9 +1,10 @@
 import {
   AssistantRuntimeProvider,
+  ActionBarPrimitive,
+  ChainOfThoughtPrimitive,
   MessagePrimitive,
   ThreadPrimitive,
   useAui,
-  useAuiState,
   useMessage,
 } from "@assistant-ui/react";
 import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
@@ -23,18 +24,20 @@ import {
   type IssueChatLinkedRun,
   type IssueChatTranscriptEntry,
 } from "../lib/issue-chat-messages";
-import type { IssueTimelineEvent } from "../lib/issue-timeline-events";
+import type { IssueTimelineAssignee, IssueTimelineEvent } from "../lib/issue-timeline-events";
 import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { MarkdownBody } from "./MarkdownBody";
 import { MarkdownEditor, type MentionOption, type MarkdownEditorRef } from "./MarkdownEditor";
 import { Identity } from "./Identity";
 import { OutputFeedbackButtons } from "./OutputFeedbackButtons";
 import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
 import { AgentIcon } from "./AgentIconPicker";
-import { StatusBadge } from "./StatusBadge";
 import { restoreSubmittedCommentDraft } from "../lib/comment-submit-draft";
+import { formatAssigneeUserLabel } from "../lib/assignees";
+import { timeAgo } from "../lib/timeAgo";
 import { cn, formatDateTime } from "../lib/utils";
-import { Check, Copy, Loader2, Paperclip, Square } from "lucide-react";
+import { ChevronDown, Loader2, Paperclip } from "lucide-react";
 
 interface CommentReassignment {
   assigneeAgentId: string | null;
@@ -75,6 +78,8 @@ interface IssueChatThreadProps {
   enableLiveTranscriptPolling?: boolean;
   transcriptsByRunId?: ReadonlyMap<string, readonly IssueChatTranscriptEntry[]>;
   hasOutputForRun?: (runId: string) => boolean;
+  onInterruptQueued?: (runId: string) => Promise<void>;
+  interruptingQueuedRunId?: string | null;
 }
 
 const DRAFT_DEBOUNCE_MS = 800;
@@ -127,39 +132,103 @@ function parseReassignment(target: string): PaperclipIssueRuntimeReassignment |
   return null;
 }
 
-function CopyMarkdownButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-  return (
-    <button
-      type="button"
-      className="text-muted-foreground hover:text-foreground transition-colors"
-      title="Copy as markdown"
-      onClick={() => {
-        navigator.clipboard.writeText(text).then(() => {
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2000);
-        });
-      }}
-    >
-      {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-    </button>
-  );
-}
-
 function IssueChatTextPart({ text }: { text: string }) {
   return <MarkdownBody className="text-sm leading-6">{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 IssueChatChainOfThought() {
+  return (
+    <ChainOfThoughtPrimitive.Root className="rounded-md bg-background/70">
+      <ChainOfThoughtPrimitive.AccordionTrigger className="group flex w-full items-center justify-between gap-3 rounded-sm px-3 py-2 text-left text-xs font-medium text-muted-foreground transition-colors hover:bg-accent/20 hover:text-foreground">
+        <span className="inline-flex items-center gap-2 uppercase tracking-[0.14em]">
+          Thinking
+        </span>
+        <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+      </ChainOfThoughtPrimitive.AccordionTrigger>
+      <div className="mr-2 border-r border-border/70 pr-3">
+        <ChainOfThoughtPrimitive.Parts
+          components={{
+            Reasoning: ({ text }) => <IssueChatReasoningPart text={text} />,
+            tools: {
+              Fallback: ({ toolName, argsText, result, isError }) => (
+                <IssueChatToolPart
+                  toolName={toolName}
+                  argsText={argsText}
+                  result={result}
+                  isError={isError}
+                />
+              ),
+            },
+            Layout: ({ children }) => <div className="space-y-2 pb-1 pl-1">{children}</div>,
+          }}
+        />
+      </div>
+    </ChainOfThoughtPrimitive.Root>
+  );
+}
+
 function IssueChatReasoningPart({ text }: { text: string }) {
   return (
-    <details className="rounded-lg border border-border/70 bg-background/70 px-3 py-2">
-      <summary className="cursor-pointer text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
-        Thinking
-      </summary>
-      <div className="mt-2">
-        <MarkdownBody className="text-sm leading-6">{text}</MarkdownBody>
-      </div>
-    </details>
+    <div className="rounded-sm bg-accent/20 px-3 py-2">
+      <MarkdownBody className="text-sm leading-6">{text}</MarkdownBody>
+    </div>
   );
 }
 
@@ -185,7 +254,7 @@ function IssueChatToolPart({
   return (
     <div
       className={cn(
-        "rounded-lg border px-3 py-2",
+        "rounded-sm border px-3 py-2",
         isError
           ? "border-red-300/70 bg-red-50/70 dark:border-red-500/40 dark:bg-red-500/10"
           : "border-border/70 bg-background/70",
@@ -243,34 +312,28 @@ function IssueChatToolPart({
 }
 
 function IssueChatUserMessage({
-  companyId,
-  projectId,
+  onInterruptQueued,
+  interruptingQueuedRunId,
 }: {
-  companyId?: string | null;
-  projectId?: string | null;
+  onInterruptQueued?: (runId: string) => Promise<void>;
+  interruptingQueuedRunId?: string | null;
 }) {
   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 : "You";
-  const body = message.content
-    .filter((part): part is Extract<(typeof message.content)[number], { type: "text" }> => part.type === "text")
-    .map((part) => part.text)
-    .join("\n");
   const queued = custom.queueState === "queued" || custom.clientStatus === "queued";
   const pending = custom.clientStatus === "pending";
+  const queueTargetRunId = typeof custom.queueTargetRunId === "string" ? custom.queueTargetRunId : null;
 
   return (
-    <MessagePrimitive.Root
-      id={anchorId}
-      className="flex justify-end"
-    >
+    <MessagePrimitive.Root id={anchorId}>
       <div
         className={cn(
-          "max-w-[min(680px,92%)] rounded-2xl border px-4 py-3 shadow-sm",
+          "min-w-0 overflow-hidden rounded-sm border p-3",
           queued
             ? "border-amber-300/70 bg-amber-50/80 dark:border-amber-500/40 dark:bg-amber-500/10"
-            : "border-primary/20 bg-primary/8",
+            : "border-border",
           pending && "opacity-80",
         )}
       >
@@ -285,23 +348,30 @@ function IssueChatUserMessage({
             {pending ? <span className="text-xs text-muted-foreground">Sending...</span> : null}
           </div>
           <span className="flex items-center gap-2 text-xs text-muted-foreground">
+            {queued && queueTargetRunId && onInterruptQueued ? (
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 border-red-300 px-2 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}
             <a href={anchorId ? `#${anchorId}` : undefined} className="hover:text-foreground hover:underline">
               {formatDateTime(message.createdAt)}
             </a>
-            <CopyMarkdownButton text={body} />
           </span>
         </div>
 
         <div className="space-y-3">
-          <MessagePrimitive.Content
+          <MessagePrimitive.Parts
             components={{
               Text: ({ text }) => <IssueChatTextPart text={text} />,
             }}
           />
         </div>
-
-        {companyId && typeof custom.commentId === "string" ? null : null}
-        {projectId ? null : null}
       </div>
     </MessagePrimitive.Root>
   );
@@ -312,10 +382,14 @@ function IssueChatAssistantMessage({
   feedbackDataSharingPreference,
   feedbackTermsUrl,
   onVote,
+  agentMap,
+  currentUserId,
 }: {
   feedbackVoteByTargetId: Map<string, FeedbackVoteValue>;
   feedbackDataSharingPreference?: FeedbackDataSharingPreference;
   feedbackTermsUrl?: string | null;
+  agentMap?: Map<string, Agent>;
+  currentUserId?: string | null;
   onVote?: (
     commentId: string,
     vote: FeedbackVoteValue,
@@ -348,8 +422,8 @@ function IssueChatAssistantMessage({
   };
 
   return (
-    <MessagePrimitive.Root id={anchorId} className="flex justify-start">
-      <div className="max-w-[min(760px,96%)] rounded-2xl border border-border bg-card px-4 py-3 shadow-sm">
+    <MessagePrimitive.Root id={anchorId}>
+      <div className="min-w-0 overflow-hidden rounded-sm border border-border p-3">
         <div className="mb-2 flex items-center justify-between gap-3">
           <div className="flex items-center gap-2">
             <Identity name={authorName} size="sm" />
@@ -368,24 +442,14 @@ function IssueChatAssistantMessage({
         </div>
 
         <div className="space-y-3">
-          <MessagePrimitive.Content
+          <MessagePrimitive.Parts
             components={{
               Text: ({ text }) => <IssueChatTextPart text={text} />,
-              Reasoning: ({ text }) => <IssueChatReasoningPart text={text} />,
-              tools: {
-                Override: ({ toolName, argsText, result, isError }) => (
-                  <IssueChatToolPart
-                    toolName={toolName}
-                    argsText={argsText}
-                    result={result}
-                    isError={isError}
-                  />
-                ),
-              },
+              ChainOfThought: IssueChatChainOfThought,
             }}
           />
           {message.content.length === 0 && waitingText ? (
-            <div className="rounded-lg border border-border/70 bg-background/70 px-3 py-2 text-sm text-muted-foreground">
+            <div className="rounded-sm bg-accent/20 px-3 py-2 text-sm text-muted-foreground">
               {waitingText}
             </div>
           ) : null}
@@ -394,7 +458,7 @@ function IssueChatAssistantMessage({
               {notices.map((notice, index) => (
                 <div
                   key={`${message.id}:notice:${index}`}
-                  className="rounded-lg border border-border/60 bg-accent/30 px-3 py-2 text-sm text-muted-foreground"
+                  className="rounded-sm border border-border/60 bg-accent/20 px-3 py-2 text-sm text-muted-foreground"
                 >
                   {notice}
                 </div>
@@ -403,7 +467,7 @@ function IssueChatAssistantMessage({
           ) : null}
         </div>
 
-        <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-border/60 pt-3">
+        <ActionBarPrimitive.Root className="mt-3 flex flex-wrap items-center justify-end gap-2 text-xs text-muted-foreground">
           {runId ? (
             runAgentId ? (
               <Link
@@ -418,50 +482,141 @@ function IssueChatAssistantMessage({
               </span>
             )
           ) : null}
+          <ActionBarPrimitive.Copy
+            copiedDuration={2000}
+            className="inline-flex h-8 items-center rounded-md border border-border bg-background px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent/30 hover:text-foreground"
+          >
+            Copy
+          </ActionBarPrimitive.Copy>
           {commentId && onVote ? (
             <OutputFeedbackButtons
               activeVote={feedbackVoteByTargetId.get(commentId) ?? null}
               sharingPreference={feedbackDataSharingPreference ?? "prompt"}
               termsUrl={feedbackTermsUrl ?? null}
               onVote={handleVote}
+              inline
             />
           ) : null}
-        </div>
+        </ActionBarPrimitive.Root>
       </div>
     </MessagePrimitive.Root>
   );
 }
 
-function IssueChatSystemMessage() {
+function IssueChatSystemMessage({
+  agentMap,
+  currentUserId,
+}: {
+  agentMap?: Map<string, Agent>;
+  currentUserId?: string | null;
+}) {
   const message = useMessage();
   const custom = message.metadata.custom as Record<string, unknown>;
-  const text = message.content
-    .filter((part): part is Extract<(typeof message.content)[number], { type: "text" }> => part.type === "text")
-    .map((part) => part.text)
-    .join("\n");
   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 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;
 
-  return (
-    <MessagePrimitive.Root id={anchorId} className="flex justify-center">
-      <div className="max-w-[min(760px,96%)] rounded-xl border border-border/70 bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
-        <div className="flex flex-wrap items-center justify-center gap-2">
-          <span className="whitespace-pre-wrap text-center">{text}</span>
-          {runStatus ? <StatusBadge status={runStatus} /> : null}
-          {runId && runAgentId ? (
-            <Link
-              to={`/agents/${runAgentId}/runs/${runId}`}
-              className="inline-flex items-center rounded-md border border-border bg-background/70 px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-foreground"
-            >
-              {runId.slice(0, 8)}
-            </Link>
-          ) : null}
+  if (custom.kind === "event" && actorName) {
+    return (
+      <MessagePrimitive.Root id={anchorId}>
+        <div className="flex items-start gap-2.5 py-1.5">
+          <Avatar size="sm" className="mt-0.5">
+            <AvatarFallback>{initialsForName(actorName)}</AvatarFallback>
+          </Avatar>
+
+          <div className="min-w-0 flex-1 space-y-1.5">
+            <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-1 text-sm">
+              <span className="font-medium text-foreground">{actorName}</span>
+              <span className="text-muted-foreground">updated this task</span>
+              <a
+                href={anchorId ? `#${anchorId}` : undefined}
+                className="text-sm text-muted-foreground transition-colors hover:text-foreground hover:underline"
+              >
+                {timeAgo(message.createdAt)}
+              </a>
+            </div>
+
+            {statusChange ? (
+              <div className="flex flex-wrap items-center gap-2 text-sm">
+                <span className="w-14 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                  Status
+                </span>
+                <span className="text-muted-foreground">{humanizeValue(statusChange.from)}</span>
+                <span className="text-muted-foreground">{"->"}</span>
+                <span className="font-medium text-foreground">{humanizeValue(statusChange.to)}</span>
+              </div>
+            ) : null}
+
+            {assigneeChange ? (
+              <div className="flex flex-wrap items-center gap-2 text-sm">
+                <span className="w-14 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                  Assignee
+                </span>
+                <span className="text-muted-foreground">
+                  {formatTimelineAssigneeLabel(assigneeChange.from, agentMap, currentUserId)}
+                </span>
+                <span className="text-muted-foreground">{"->"}</span>
+                <span className="font-medium text-foreground">
+                  {formatTimelineAssigneeLabel(assigneeChange.to, agentMap, currentUserId)}
+                </span>
+              </div>
+            ) : null}
+          </div>
         </div>
-      </div>
-    </MessagePrimitive.Root>
-  );
+      </MessagePrimitive.Root>
+    );
+  }
+
+  const displayedRunAgentName = runAgentName ?? (runAgentId ? agentMap?.get(runAgentId)?.name ?? runAgentId.slice(0, 8) : null);
+  if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) {
+    return (
+      <MessagePrimitive.Root id={anchorId}>
+        <div className="flex items-center gap-2.5 py-1.5">
+          <Avatar size="sm">
+            <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-1 text-sm">
+              <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-2 py-1 font-mono text-xs 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-sm text-muted-foreground transition-colors hover:text-foreground hover:underline"
+              >
+                {timeAgo(message.createdAt)}
+              </a>
+            </div>
+          </div>
+        </div>
+      </MessagePrimitive.Root>
+    );
+  }
+
+  return null;
 }
 
 function IssueChatComposer({
@@ -476,7 +631,6 @@ function IssueChatComposer({
   agentMap,
   composerDisabledReason = null,
   issueStatus,
-  onCancelRun,
 }: {
   onImageUpload?: (file: File) => Promise<string>;
   onAttachImage?: (file: File) => Promise<void>;
@@ -489,15 +643,12 @@ function IssueChatComposer({
   agentMap?: Map<string, Agent>;
   composerDisabledReason?: string | null;
   issueStatus?: string;
-  onCancelRun?: (() => Promise<void>) | undefined;
 }) {
   const api = useAui();
-  const isRunning = useAuiState((state) => state.thread.isRunning);
   const [body, setBody] = useState("");
   const [reopen, setReopen] = useState(issueStatus === "done" || issueStatus === "cancelled");
   const [submitting, setSubmitting] = useState(false);
   const [attaching, setAttaching] = useState(false);
-  const [cancelling, setCancelling] = useState(false);
   const effectiveSuggestedAssigneeValue = suggestedAssigneeValue ?? currentAssigneeValue;
   const [reassignTarget, setReassignTarget] = useState(effectiveSuggestedAssigneeValue);
   const attachInputRef = useRef<HTMLInputElement | null>(null);
@@ -584,16 +735,6 @@ function IssueChatComposer({
     }
   }
 
-  async function handleCancelRun() {
-    if (!onCancelRun || cancelling) return;
-    setCancelling(true);
-    try {
-      await onCancelRun();
-    } finally {
-      setCancelling(false);
-    }
-  }
-
   const canSubmit = !submitting && !!body.trim();
 
   if (composerDisabledReason) {
@@ -605,25 +746,7 @@ function IssueChatComposer({
   }
 
   return (
-    <div className="rounded-2xl border border-border bg-card px-4 py-4 shadow-sm">
-      {isRunning ? (
-        <div className="mb-3 flex flex-wrap items-center justify-between gap-2 rounded-xl border border-cyan-400/30 bg-cyan-500/10 px-3 py-2 text-sm text-cyan-900 dark:text-cyan-100">
-          <span>Messages sent now queue behind the active run.</span>
-          {onCancelRun ? (
-            <Button
-              size="sm"
-              variant="outline"
-              className="border-red-300 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={cancelling}
-              onClick={() => void handleCancelRun()}
-            >
-              <Square className="mr-1 h-3.5 w-3.5" fill="currentColor" />
-              {cancelling ? "Stopping..." : "Interrupt"}
-            </Button>
-          ) : null}
-        </div>
-      ) : null}
-
+    <div className="space-y-2">
       <MarkdownEditor
         ref={editorRef}
         value={body}
@@ -744,6 +867,8 @@ export function IssueChatThread({
   enableLiveTranscriptPolling = true,
   transcriptsByRunId,
   hasOutputForRun: hasOutputForRunOverride,
+  onInterruptQueued,
+  interruptingQueuedRunId = null,
 }: IssueChatThreadProps) {
   const location = useLocation();
   const hasScrolledRef = useRef(false);
@@ -840,24 +965,33 @@ export function IssueChatThread({
 
   const components = useMemo(
     () => ({
-      UserMessage: () => <IssueChatUserMessage companyId={companyId} projectId={projectId} />,
+      UserMessage: () => (
+        <IssueChatUserMessage
+          onInterruptQueued={onInterruptQueued}
+          interruptingQueuedRunId={interruptingQueuedRunId}
+        />
+      ),
       AssistantMessage: () => (
         <IssueChatAssistantMessage
           feedbackVoteByTargetId={feedbackVoteByTargetId}
           feedbackDataSharingPreference={feedbackDataSharingPreference}
           feedbackTermsUrl={feedbackTermsUrl}
+          agentMap={agentMap}
+          currentUserId={currentUserId}
           onVote={onVote}
         />
       ),
-      SystemMessage: () => <IssueChatSystemMessage />,
+      SystemMessage: () => <IssueChatSystemMessage agentMap={agentMap} currentUserId={currentUserId} />,
     }),
     [
-      companyId,
-      projectId,
+      agentMap,
+      currentUserId,
       feedbackVoteByTargetId,
       feedbackDataSharingPreference,
       feedbackTermsUrl,
       onVote,
+      onInterruptQueued,
+      interruptingQueuedRunId,
     ],
   );
 
@@ -899,7 +1033,6 @@ export function IssueChatThread({
             agentMap={agentMap}
             composerDisabledReason={composerDisabledReason}
             issueStatus={issueStatus}
-            onCancelRun={onCancelRun}
           />
         ) : null}
       </div>
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/lib/issue-chat-messages.test.ts b/ui/src/lib/issue-chat-messages.test.ts
index 17ddcbaf..b1b0bb55 100644
--- a/ui/src/lib/issue-chat-messages.test.ts
+++ b/ui/src/lib/issue-chat-messages.test.ts
@@ -85,6 +85,50 @@ describe("buildAssistantPartsFromTranscript", () => {
     });
     expect(result.notices).toEqual(["warn: noisy setup output"]);
   });
+
+  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" },
+    ]);
+  });
 });
 
 describe("buildIssueChatMessages", () => {
diff --git a/ui/src/lib/issue-chat-messages.ts b/ui/src/lib/issue-chat-messages.ts
index 7bb2c818..aebba354 100644
--- a/ui/src/lib/issue-chat-messages.ts
+++ b/ui/src/lib/issue-chat-messages.ts
@@ -268,58 +268,46 @@ function createHistoricalRunMessage(run: IssueChatLinkedRun, agentMap?: Map<stri
   return message;
 }
 
-function mergeAdjacentTextParts(parts: Array<TextMessagePart | ReasoningMessagePart>) {
-  const merged: Array<TextMessagePart | ReasoningMessagePart> = [];
-  for (const part of parts) {
-    const previous = merged.at(-1);
-    if (previous && previous.type === part.type && previous.parentId === part.parentId) {
-      merged[merged.length - 1] = {
-        ...previous,
-        text: `${previous.text}${part.text}`,
-      };
-      continue;
-    }
-    merged.push(part);
-  }
-  return merged;
-}
-
 export function buildAssistantPartsFromTranscript(entries: readonly IssueChatTranscriptEntry[]) {
-  const textLikeParts: Array<TextMessagePart | ReasoningMessagePart> = [];
+  const orderedParts: Array<TextMessagePart | ReasoningMessagePart | ToolCallMessagePart<JsonObject, unknown>> = [];
   const toolParts = new Map<string, ToolCallMessagePart<JsonObject, unknown>>();
-  const toolOrder: string[] = [];
+  const toolIndices = new Map<string, number>();
   const notices: string[] = [];
 
   for (const [index, entry] of entries.entries()) {
     if (entry.kind === "assistant" && entry.text) {
-      textLikeParts.push({ type: "text", text: entry.text });
+      orderedParts.push({ type: "text", text: entry.text });
       continue;
     }
     if (entry.kind === "thinking" && entry.text) {
-      textLikeParts.push({ type: "reasoning", text: entry.text });
+      orderedParts.push({ type: "reasoning", text: entry.text });
       continue;
     }
     if (entry.kind === "tool_call") {
       const toolCallId = entry.toolUseId || `tool-${index}`;
-      if (!toolParts.has(toolCallId)) {
-        toolOrder.push(toolCallId);
-      }
-      toolParts.set(toolCallId, {
+      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);
-      if (!existing) {
-        toolOrder.push(toolCallId);
-      }
-      toolParts.set(toolCallId, {
+      const nextPart: ToolCallMessagePart<JsonObject, unknown> = {
         type: "tool-call",
         toolCallId,
         toolName: existing?.toolName || entry.toolName || "tool",
@@ -327,7 +315,17 @@ export function buildAssistantPartsFromTranscript(entries: readonly IssueChatTra
         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 === "stderr" && entry.text) {
@@ -347,13 +345,25 @@ export function buildAssistantPartsFromTranscript(entries: readonly IssueChatTra
     }
   }
 
+  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: `${previous.text}${part.text}`,
+      };
+      continue;
+    }
+    mergedParts.push(part);
+  }
+
   return {
-    parts: [
-      ...mergeAdjacentTextParts(textLikeParts),
-      ...toolOrder
-        .map((toolCallId) => toolParts.get(toolCallId))
-        .filter((part): part is ToolCallMessagePart<JsonObject, unknown> => Boolean(part)),
-    ],
+    parts: mergedParts,
     notices,
   };
 }
diff --git a/ui/src/pages/IssueChatUxLab.tsx b/ui/src/pages/IssueChatUxLab.tsx
index 357943fe..a83eaa95 100644
--- a/ui/src/pages/IssueChatUxLab.tsx
+++ b/ui/src/pages/IssueChatUxLab.tsx
@@ -147,6 +147,7 @@ export function IssueChatUxLab() {
           onAdd={noop}
           onVote={noop}
           onCancelRun={noop}
+          onInterruptQueued={noop}
           draftKey="issue-chat-ux-lab-primary"
           enableReassign
           reassignOptions={issueChatUxReassignOptions}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 55b89994..658c818b 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -1771,6 +1771,10 @@ export function IssueDetail() {
             onAttachImage={async (file) => {
               await uploadAttachment.mutateAsync(file);
             }}
+            onInterruptQueued={async (runId) => {
+              await interruptQueuedComment.mutateAsync(runId);
+            }}
+            interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
             onCancelRun={runningIssueRun
               ? async () => {
                   await interruptQueuedComment.mutateAsync(runningIssueRun.id);