fix(canvas): keep agent status out of thread history

Generated-By: PostHog Code
Task-Id: 87a79e23-20c4-440b-818b-28154924ffbc

Author: k11kirky

packages/core/src/canvas/threadTimeline.test.ts

@@ -139,14 +139,9 @@ describe("deriveThreadAgentStatus", () => {
       expected: { phase: "active", label: "Working…" },
     },
     {
-      name: "reports shipped work",
-      input: { hasActivity: true, hasPullRequest: true },
-      expected: { phase: "complete", label: "Shipped" },
-    },
-    {
-      name: "reports settled work without a pull request as done",
+      name: "returns no status after work settles",
       input: { hasActivity: true },
-      expected: { phase: "complete", label: "Done" },
+      expected: null,
     },
   ])("$name", ({ input, expected }) => {
     expect(deriveThreadAgentStatus(input)).toEqual(expected);

packages/core/src/canvas/threadTimeline.ts

@@ -73,7 +73,7 @@ export function buildThreadTimeline<T>({
   ].sort((left, right) => left.timestamp - right.timestamp);
 }
 
-export type ThreadAgentPhase = "active" | "needs_input" | "complete" | "error";
+export type ThreadAgentPhase = "active" | "needs_input" | "error";
 
 export interface ThreadAgentStatus {
   phase: ThreadAgentPhase;
@@ -109,7 +109,6 @@ export function deriveThreadAgentStatus({
   pendingPermissionCount = 0,
   isPromptPending = false,
   isInitializing = false,
-  hasPullRequest = false,
 }: {
   hasActivity?: boolean;
   hasError?: boolean;
@@ -118,7 +117,6 @@ export function deriveThreadAgentStatus({
   pendingPermissionCount?: number;
   isPromptPending?: boolean;
   isInitializing?: boolean;
-  hasPullRequest?: boolean;
 }): ThreadAgentStatus | null {
   if (!hasActivity) return null;
   if (hasError || cloudStatus === "failed") {
@@ -130,10 +128,7 @@ export function deriveThreadAgentStatus({
   if (isPromptPending || isInitializing) {
     return { phase: "active", label: "Working…" };
   }
-  return {
-    phase: "complete",
-    label: hasPullRequest ? "Shipped" : "Done",
-  };
+  return null;
 }
 
 export function shouldSuspendThreadSession({

packages/ui/src/features/canvas/components/ThreadPanel.test.tsx

@@ -1,20 +1,16 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { AgentTurnRow, UserPromptRow } from "./ThreadPanel";
+import { AgentStatusLine, UserPromptRow } from "./ThreadPanel";
 
-describe("AgentTurnRow", () => {
-  it.each([
-    { phase: "active" as const, label: "Working…" },
-    { phase: "complete" as const, label: "Done" },
-  ])("renders $label in the message area", (statusValue) => {
-    render(<AgentTurnRow status={statusValue} streaming={false} />);
+describe("AgentStatusLine", () => {
+  it("renders working status outside the conversation timeline", () => {
+    render(<AgentStatusLine status={{ phase: "active", label: "Working…" }} />);
 
-    const author = screen.getByText("Agent");
-    const status = screen.getByText(statusValue.label);
+    const status = screen.getByText("Working…");
 
-    expect(author.parentElement).not.toContainElement(status);
-    expect(author.closest("article")).toContainElement(status);
-    expect(status.closest('[data-slot="thread-item-body"]')).not.toBeNull();
+    expect(status.closest("article")).toBeNull();
+    expect(status.closest('[data-slot="thread-item-body"]')).toBeNull();
+    expect(status.closest("output")).not.toBeNull();
   });
 });
 

packages/ui/src/features/canvas/components/ThreadPanel.tsx

@@ -204,31 +204,27 @@ function agentPrompts(items: ConversationItem[]): ThreadAgentMessage[] {
   return prompts;
 }
 
-function AgentStatusChip({ status }: { status: ThreadAgentStatus }) {
-  switch (status.phase) {
-    case "active":
-      return (
-        <Badge variant="info">
-          <Spinner className="size-3" />
-          {status.label}
-        </Badge>
-      );
-    case "needs_input":
-      return <Badge variant="warning">{status.label}</Badge>;
-    case "error":
-      return <Badge variant="destructive">{status.label}</Badge>;
-    default:
-      return <Badge variant="success">{status.label}</Badge>;
-  }
+export function AgentStatusLine({ status }: { status: ThreadAgentStatus }) {
+  return (
+    <output
+      aria-live="polite"
+      className="flex items-center gap-1.5 px-3 py-1.5 text-muted-foreground text-xs"
+    >
+      {status.phase === "active" ? (
+        <Spinner className="size-3" />
+      ) : (
+        <RobotIcon size={12} />
+      )}
+      <span>{status.label}</span>
+    </output>
+  );
 }
 
 export function AgentTurnRow({
   message,
-  status,
   streaming,
 }: {
-  message?: ThreadAgentMessage;
-  status?: ThreadAgentStatus;
+  message: ThreadAgentMessage;
   streaming: boolean;
 }) {
   return (
@@ -243,25 +239,19 @@ export function AgentTurnRow({
       <ThreadItemContent>
         <ThreadItemHeader>
           <ThreadItemAuthor>Agent</ThreadItemAuthor>
-          {message?.timestamp !== undefined && (
+          {message.timestamp !== undefined && (
             <ThreadTimestamp
               dateTime={new Date(message.timestamp).toISOString()}
             />
           )}
         </ThreadItemHeader>
-        {(message?.text || status) && (
+        {message.text && (
           <ThreadItemBody>
             <div className="rounded-md border border-border bg-muted px-2 py-1.5">
-              {message?.text &&
-                (streaming ? (
-                  <ChatStreamingMarkdown content={message.text} />
-                ) : (
-                  <ChatMarkdown content={message.text} />
-                ))}
-              {status && (
-                <div className={message?.text ? "mt-2" : undefined}>
-                  <AgentStatusChip status={status} />
-                </div>
+              {streaming ? (
+                <ChatStreamingMarkdown content={message.text} />
+              ) : (
+                <ChatMarkdown content={message.text} />
               )}
             </div>
           </ThreadItemBody>
@@ -370,11 +360,6 @@ function ThreadConversation({
   });
   const { items } = useConversationItems(events, isPromptPending);
   const pendingPermissions = usePendingPermissionsForTask(taskId);
-  const prUrl =
-    typeof task.latest_run?.output?.pr_url === "string"
-      ? task.latest_run.output.pr_url
-      : undefined;
-
   const agentMsgs = useMemo(() => agentTurns(items), [items]);
   const promptMsgs = useMemo(() => agentPrompts(items), [items]);
 
@@ -388,7 +373,6 @@ function ThreadConversation({
         pendingPermissionCount: pendingPermissions.size,
         isPromptPending,
         isInitializing,
-        hasPullRequest: !!prUrl,
       }),
     [
       events.length,
@@ -399,7 +383,6 @@ function ThreadConversation({
       pendingPermissions.size,
       isPromptPending,
       isInitializing,
-      prUrl,
     ],
   );
 
@@ -498,7 +481,7 @@ function ThreadConversation({
     });
   };
 
-  const isEmpty = timeline.length === 0 && !agentStatus;
+  const isEmpty = timeline.length === 0;
   const isReady = !isInitializing && !isLoading;
 
   return (
@@ -595,13 +578,12 @@ function ThreadConversation({
                 />
               ),
             )}
-            {agentStatus && !(agentStatus.phase === "complete" && !!prUrl) && (
-              <AgentTurnRow status={agentStatus} streaming={false} />
-            )}
           </ThreadItemGroup>
         )}
       </div>
 
+      {agentStatus && <AgentStatusLine status={agentStatus} />}
+
       <div className="border-border border-t p-2">
         <MentionComposer
           value={draft}