Adapt agent thread announcements to current thread UI

Render structured and legacy authorless agent announcements with the Agent identity in the Quill thread row, and keep message actions limited to human messages. Add regression coverage for the current component.

Generated-By: PostHog Code
Task-Id: 152cf34b-23c8-4e87-be9e-12d727e08edd

Author: k11kirky

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

@@ -1,7 +1,11 @@
 import type { ConversationItem } from "@posthog/ui/features/sessions/components/buildConversationItems";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { AgentStatusLine, UserPromptRow } from "./ThreadPanel";
+import {
+  AgentStatusLine,
+  ThreadMessageRow,
+  UserPromptRow,
+} from "./ThreadPanel";
 import { agentTurns } from "./threadAgentTurns";
 
 describe("agentTurns", () => {
@@ -45,6 +49,33 @@ describe("AgentStatusLine", () => {
   });
 });
 
+describe("ThreadMessageRow", () => {
+  it("renders backend-authored agent announcements as Agent", () => {
+    render(
+      <ThreadMessageRow
+        message={{
+          id: "announcement",
+          task: "task",
+          author_kind: "agent",
+          event: "canvas_created",
+          payload: {},
+          content: "Canvas created",
+          created_at: "2026-07-17T00:00:00Z",
+          author: null,
+        }}
+        isTaskAuthor={false}
+        isOwnMessage={false}
+        canForward={false}
+        onSendToAgent={() => {}}
+        onDelete={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Agent")).toBeInTheDocument();
+    expect(screen.queryByText("Unknown")).not.toBeInTheDocument();
+  });
+});
+
 describe("UserPromptRow", () => {
   it("prefixes direct task prompts with @agent", () => {
     render(

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

@@ -87,7 +87,7 @@ import { track } from "@posthog/ui/shell/analytics";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-function ThreadMessageRow({
+export function ThreadMessageRow({
   message,
   isTaskAuthor,
   isOwnMessage,
@@ -105,18 +105,29 @@ function ThreadMessageRow({
   onDelete: () => void;
 }) {
   const forwarded = !!message.forwarded_to_agent_at;
-  const showMenu = (isTaskAuthor && !forwarded) || isOwnMessage;
+  const isAgent =
+    message.author_kind === "agent" ||
+    (!message.author_kind && !message.author);
+  const showMenu = !isAgent && ((isTaskAuthor && !forwarded) || isOwnMessage);
 
   return (
     <ThreadItem>
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
-          <AvatarFallback>{getUserInitials(message.author)}</AvatarFallback>
+          <AvatarFallback>
+            {isAgent ? (
+              <RobotIcon size={14} />
+            ) : (
+              getUserInitials(message.author)
+            )}
+          </AvatarFallback>
         </Avatar>
       </ThreadItemGutter>
       <ThreadItemContent>
         <ThreadItemHeader>
-          <ThreadItemAuthor>{userDisplayName(message.author)}</ThreadItemAuthor>
+          <ThreadItemAuthor>
+            {isAgent ? "Agent" : userDisplayName(message.author)}
+          </ThreadItemAuthor>
           <ThreadTimestamp dateTime={message.created_at} />
         </ThreadItemHeader>
         <ThreadItemBody>