From 0855de336ea43cf21968ec5c925ea71d32b5f9a3 Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Wed, 29 Jul 2026 14:30:18 +0200
Subject: [PATCH 1/5] fix(ui): render structured thread references natively

Generated-By: PostHog Code
Task-Id: 6b917101-5b31-4195-81cf-f258a46a56a2
---
 .../canvas/components/MentionText.test.tsx    | 34 +++++++++
 .../canvas/components/MentionText.tsx         | 74 +++++++++++++++++--
 2 files changed, 102 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/MentionText.test.tsx b/packages/ui/src/features/canvas/components/MentionText.test.tsx
index e924736b4e..f2cb18e513 100644
--- a/packages/ui/src/features/canvas/components/MentionText.test.tsx
+++ b/packages/ui/src/features/canvas/components/MentionText.test.tsx
@@ -82,4 +82,38 @@ describe("MentionText", () => {
 
     expect(screen.getByText("A thread reply")).not.toHaveClass("text-xs");
   });
+
+  it("renders structured references as inline native chips", () => {
+    const { container } = render(
+      <MentionText
+        content={
+          'Review <github_pr number="73874" title="Loading…" url="https://github.com/PostHog/posthog/pull/73874" /> with <file path="src/loading.tsx" /> using <skill name="review" source="user" path="/skills/review/SKILL.md" />'
+        }
+      />,
+    );
+
+    expect(screen.getByText("#73874 - Loading…")).toBeInTheDocument();
+    expect(screen.getByText("@src/loading.tsx")).toBeInTheDocument();
+    expect(screen.getByText("/review")).toBeInTheDocument();
+    expect(container.querySelector("p")).toBeNull();
+    expect(screen.getByText("@src/loading.tsx").parentElement).toHaveClass(
+      "inline-flex",
+      "whitespace-nowrap",
+    );
+  });
+
+  it("leaves malformed and unsafe structured references as readable text", () => {
+    render(
+      <MentionText
+        content={
+          '<github_pr number="12" title="Unsafe" url="javascript:alert(1)" /> and <github_pr title="Incomplete" />'
+        }
+      />,
+    );
+
+    expect(screen.getByText(/#12 - Unsafe/).parentElement).toHaveTextContent(
+      '@#12 - Unsafe and <github_pr title="Incomplete" />',
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
 });
diff --git a/packages/ui/src/features/canvas/components/MentionText.tsx b/packages/ui/src/features/canvas/components/MentionText.tsx
index 8fbe4bea7f..ffe4a4554f 100644
--- a/packages/ui/src/features/canvas/components/MentionText.tsx
+++ b/packages/ui/src/features/canvas/components/MentionText.tsx
@@ -1,5 +1,19 @@
+import {
+  ChartLineIcon,
+  FileTextIcon,
+  FlagIcon,
+  FlaskIcon,
+  FolderIcon,
+  TerminalIcon,
+  WarningIcon,
+} from "@phosphor-icons/react";
+import type { MentionChip } from "@posthog/core/message-editor/content";
+import { xmlToContent } from "@posthog/core/message-editor/content";
+import { Chip } from "@posthog/quill";
 import { splitMentionSegments } from "@posthog/shared";
 import { splitLinkSegments } from "@posthog/ui/features/canvas/utils/linkify";
+import { GithubRefChip } from "@posthog/ui/features/editor/components/GithubRefChip";
+import { parseGithubIssueUrl } from "@posthog/ui/features/message-editor/githubIssueUrl";
 import { handleShareLinkClick } from "@posthog/ui/utils/shareLinks";
 import { Fragment, useMemo } from "react";
 import "./mention-chip.css";
@@ -8,7 +22,46 @@ type RenderSegment =
   | { type: "text"; text: string }
   | { type: "link"; text: string; href: string }
   | { type: "agent"; text: string }
-  | { type: "mention"; name: string; email: string };
+  | { type: "mention"; name: string; email: string }
+  | { type: "chip"; chip: MentionChip };
+
+const chipIcons = {
+  file: FileTextIcon,
+  folder: FolderIcon,
+  command: TerminalIcon,
+  error: WarningIcon,
+  experiment: FlaskIcon,
+  insight: ChartLineIcon,
+  feature_flag: FlagIcon,
+} as const;
+
+function StructuredChip({ chip }: { chip: MentionChip }) {
+  if (chip.type === "github_issue" || chip.type === "github_pr") {
+    const githubRef = parseGithubIssueUrl(chip.id);
+    if (githubRef) {
+      return (
+        <GithubRefChip href={githubRef.normalizedUrl} kind={githubRef.kind}>
+          {chip.label}
+        </GithubRefChip>
+      );
+    }
+  }
+
+  const Icon = chipIcons[chip.type as keyof typeof chipIcons];
+  if (!Icon) return <>@{chip.label}</>;
+  return (
+    <Chip
+      size="xs"
+      className="mx-0.5 inline-flex max-w-full whitespace-nowrap align-middle"
+    >
+      <Icon size={10} />
+      <span className="min-w-0 truncate">
+        {chip.type === "command" ? "/" : "@"}
+        {chip.label}
+      </span>
+    </Chip>
+  );
+}
 
 // The plain (not-the-viewer) mention chip look, also used by surfaces that
 // render a mention-styled name without real mention semantics (e.g. the
@@ -66,11 +119,17 @@ export function MentionText({
         }
       }
     };
-    for (const segment of splitLinkSegments(content)) {
-      if (segment.type === "link") {
-        push(segment, segment.text.length);
-      } else {
-        pushMentions(segment.text);
+    for (const contentSegment of xmlToContent(content).segments) {
+      if (contentSegment.type === "chip") {
+        push({ type: "chip", chip: contentSegment.chip }, 1);
+        continue;
+      }
+      for (const segment of splitLinkSegments(contentSegment.text)) {
+        if (segment.type === "link") {
+          push(segment, segment.text.length);
+        } else {
+          pushMentions(segment.text);
+        }
       }
     }
     return entries;
@@ -79,6 +138,9 @@ export function MentionText({
   return (
     <span className={className}>
       {segments.map(({ segment, key }) => {
+        if (segment.type === "chip") {
+          return <StructuredChip key={key} chip={segment.chip} />;
+        }
         if (segment.type === "agent") {
           return (
             <span key={key} className={mentionChipClass}>

From 714b8620b7e3a155507beff6307b4be7c7f1c9e7 Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Wed, 29 Jul 2026 14:44:47 +0200
Subject: [PATCH 2/5] fix(ui): render references in timeline previews

Generated-By: PostHog Code
Task-Id: 6b917101-5b31-4195-81cf-f258a46a56a2
---
 .../components/ActivityTimeline.test.tsx      | 19 +++++++++++++++++--
 .../canvas/components/ActivityTimeline.tsx    |  3 ++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
index c1f625b0fe..81a58e1ec4 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
@@ -36,13 +36,13 @@ const conversationItems = [
   },
 ];
 
-function renderTimeline(canOpenInPlace?: boolean) {
+function renderTimeline(canOpenInPlace?: boolean, items = conversationItems) {
   return render(
     <ActivityTimeline
       task={task}
       timeline={[]}
       // biome-ignore lint/suspicious/noExplicitAny: narrow fixture for the rows under test
-      conversationItems={conversationItems as any}
+      conversationItems={items as any}
       isTaskAuthor
       canForward={false}
       canOpenInPlace={canOpenInPlace}
@@ -90,4 +90,19 @@ describe("ActivityTimeline", () => {
     expect(screen.queryAllByRole("button")).toHaveLength(0);
     expect(screen.getByText(/first thing/)).toBeInTheDocument();
   });
+
+  it("renders structured references natively in conversation previews", () => {
+    renderTimeline(false, [
+      {
+        type: "user_message",
+        id: "pr-message",
+        content:
+          '<github_pr number="73874" title="Loading…" url="https://github.com/PostHog/posthog/pull/73874" />',
+        timestamp: Date.parse("2026-07-17T09:05:00Z"),
+      },
+    ]);
+
+    expect(screen.getByText("#73874 - Loading…")).toBeInTheDocument();
+    expect(screen.queryByText(/<github_pr/)).toBeNull();
+  });
 });
diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
index aaf59e4acc..81ce72432f 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
@@ -21,6 +21,7 @@ import type {
 } from "@posthog/shared/domain-types";
 import { isTerminalStatus } from "@posthog/shared/domain-types";
 import { UserAvatar } from "@posthog/ui/features/auth/UserAvatar";
+import { MentionText } from "@posthog/ui/features/canvas/components/MentionText";
 import {
   ThreadArtifactRow,
   ThreadMessageRow,
@@ -111,7 +112,7 @@ function UserMessageRow({
         {/* `whitespace-pre-wrap` makes the clamp land on the first *written*
             line rather than the first wrapped one. */}
         <ThreadItemBody className="mt-1.5 line-clamp-1 whitespace-pre-wrap text-[13px]">
-          {content}
+          <MentionText content={content} />
         </ThreadItemBody>
       </ThreadItemContent>
     </ThreadItem>

From 58be39a6ddf171f14bc8397ca4de735c68a7e47d Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Wed, 29 Jul 2026 14:53:23 +0200
Subject: [PATCH 3/5] fix(ui): collapse newlines in timeline previews

Generated-By: PostHog Code
Task-Id: 6b917101-5b31-4195-81cf-f258a46a56a2
---
 .../components/ActivityTimeline.test.tsx      |  4 +++-
 .../canvas/components/ActivityTimeline.tsx    |  4 +---
 .../canvas/components/ThreadPanel.test.tsx    | 24 +++++++++++++++++++
 .../canvas/components/ThreadPanel.tsx         |  4 +---
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
index 81a58e1ec4..1eb23f29d8 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
@@ -88,7 +88,9 @@ describe("ActivityTimeline", () => {
     renderTimeline();
 
     expect(screen.queryAllByRole("button")).toHaveLength(0);
-    expect(screen.getByText(/first thing/)).toBeInTheDocument();
+    expect(screen.getByText(/first thing/).closest("[data-slot]")).toHaveClass(
+      "whitespace-normal",
+    );
   });
 
   it("renders structured references natively in conversation previews", () => {
diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
index 81ce72432f..4333456eb3 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
@@ -109,9 +109,7 @@ function UserMessageRow({
           <ThreadItemAuthor className="text-[13px]">{name}</ThreadItemAuthor>
           <ThreadTimestamp dateTime={timestamp} />
         </ThreadItemHeader>
-        {/* `whitespace-pre-wrap` makes the clamp land on the first *written*
-            line rather than the first wrapped one. */}
-        <ThreadItemBody className="mt-1.5 line-clamp-1 whitespace-pre-wrap text-[13px]">
+        <ThreadItemBody className="mt-1.5 line-clamp-1 whitespace-normal text-[13px]">
           <MentionText content={content} />
         </ThreadItemBody>
       </ThreadItemContent>
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
index 35b16ac5cd..8116cfe5e3 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
@@ -96,6 +96,30 @@ describe("ThreadMessageRow", () => {
       screen.getByText(/Second line with more detail/),
     ).toBeInTheDocument();
   });
+
+  it("collapses authored newlines in one-line timeline previews", () => {
+    render(
+      <ThreadMessageRow
+        message={{
+          id: "m1",
+          task: "task",
+          content: multiline,
+          created_at: "2026-07-17T00:00:00Z",
+          author: null,
+        }}
+        isTaskAuthor
+        isOwnMessage={false}
+        canForward
+        preview
+        onSendToAgent={() => {}}
+        onDelete={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByText(/Second line with more detail/).parentElement,
+    ).toHaveClass("line-clamp-1", "whitespace-normal");
+  });
 });
 
 describe("ThreadArtifactRow", () => {
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index 807f3fbd01..5243dda59b 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -101,9 +101,7 @@ export function ThreadMessageRow({
         <ThreadItemBody
           className={cn(
             "mt-1.5 text-[13px]",
-            // `whitespace-pre-wrap` makes the clamp land on the first *written*
-            // line rather than the first wrapped one.
-            preview && "line-clamp-1 whitespace-pre-wrap",
+            preview && "line-clamp-1 whitespace-normal",
           )}
         >
           <MentionText

From ab5d1231b9c25982eff8a05244cbb81a9677be8e Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Wed, 29 Jul 2026 15:41:03 +0200
Subject: [PATCH 4/5] fix(ui): show full messages in activity timeline

Generated-By: PostHog Code
Task-Id: 6b917101-5b31-4195-81cf-f258a46a56a2
---
 .../canvas/components/ActivityTimeline.test.tsx        |  6 +++---
 .../features/canvas/components/ActivityTimeline.tsx    |  2 +-
 .../features/canvas/components/ThreadPanel.test.tsx    | 10 ++++------
 .../ui/src/features/canvas/components/ThreadPanel.tsx  |  4 ++--
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
index 1eb23f29d8..f04a6a57c9 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
@@ -88,9 +88,9 @@ describe("ActivityTimeline", () => {
     renderTimeline();
 
     expect(screen.queryAllByRole("button")).toHaveLength(0);
-    expect(screen.getByText(/first thing/).closest("[data-slot]")).toHaveClass(
-      "whitespace-normal",
-    );
+    const body = screen.getByText(/first thing/).closest("[data-slot]");
+    expect(body).toHaveClass("whitespace-pre-wrap", "break-words");
+    expect(body).not.toHaveClass("line-clamp-1");
   });
 
   it("renders structured references natively in conversation previews", () => {
diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
index 4333456eb3..dfff740247 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
@@ -109,7 +109,7 @@ function UserMessageRow({
           <ThreadItemAuthor className="text-[13px]">{name}</ThreadItemAuthor>
           <ThreadTimestamp dateTime={timestamp} />
         </ThreadItemHeader>
-        <ThreadItemBody className="mt-1.5 line-clamp-1 whitespace-normal text-[13px]">
+        <ThreadItemBody className="mt-1.5 whitespace-pre-wrap break-words text-[13px]">
           <MentionText content={content} />
         </ThreadItemBody>
       </ThreadItemContent>
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
index 8116cfe5e3..e964599ba6 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
@@ -72,8 +72,6 @@ describe("ThreadMessageRow", () => {
 
   const multiline = "First line\n\nSecond line with more detail";
 
-  // `preview` only adds a CSS clamp, so the full message is in the DOM either
-  // way. What's worth pinning is that no code path slices the text away.
   it("renders the whole message, so a comment is never cut short", () => {
     render(
       <ThreadMessageRow
@@ -97,7 +95,7 @@ describe("ThreadMessageRow", () => {
     ).toBeInTheDocument();
   });
 
-  it("collapses authored newlines in one-line timeline previews", () => {
+  it("shows the full message in timeline previews", () => {
     render(
       <ThreadMessageRow
         message={{
@@ -116,9 +114,9 @@ describe("ThreadMessageRow", () => {
       />,
     );
 
-    expect(
-      screen.getByText(/Second line with more detail/).parentElement,
-    ).toHaveClass("line-clamp-1", "whitespace-normal");
+    const body = screen.getByText(/Second line with more detail/).parentElement;
+    expect(body).toHaveClass("whitespace-pre-wrap", "break-words");
+    expect(body).not.toHaveClass("line-clamp-1");
   });
 });
 
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index 5243dda59b..bb12bec4d8 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -78,7 +78,7 @@ export function ThreadMessageRow({
   isOwnMessage: boolean;
   currentUserEmail?: string | null;
   canForward: boolean;
-  /** Timeline rows show one truncated line; the Comments tab shows it all. */
+  /** Timeline rows preserve authored whitespace while showing the full message. */
   preview?: boolean;
   onSendToAgent: () => void;
   onDelete: () => void;
@@ -101,7 +101,7 @@ export function ThreadMessageRow({
         <ThreadItemBody
           className={cn(
             "mt-1.5 text-[13px]",
-            preview && "line-clamp-1 whitespace-normal",
+            preview && "whitespace-pre-wrap break-words",
           )}
         >
           <MentionText

From 458f1cec38feec5574aeab0ca30edb2a04be3c5c Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Wed, 29 Jul 2026 15:54:45 +0200
Subject: [PATCH 5/5] fix(canvas): fold channel context in activity timeline

Generated-By: PostHog Code
Task-Id: 6b917101-5b31-4195-81cf-f258a46a56a2
---
 .../components/ActivityTimeline.test.tsx      | 21 ++++++++++++
 .../canvas/components/ActivityTimeline.tsx    | 32 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
index f04a6a57c9..b6ea0cb52d 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
@@ -107,4 +107,25 @@ describe("ActivityTimeline", () => {
     expect(screen.getByText("#73874 - Loading…")).toBeInTheDocument();
     expect(screen.queryByText(/<github_pr/)).toBeNull();
   });
+
+  it("folds injected channel context by default", () => {
+    renderTimeline(true, [
+      {
+        type: "user_message",
+        id: "context-message",
+        content:
+          'Review this\n\n<channel_context channel="code">Saved workspace context</channel_context>',
+        timestamp: Date.parse("2026-07-17T09:05:00Z"),
+      },
+    ]);
+
+    expect(screen.getByText("Review this")).toBeInTheDocument();
+    expect(screen.queryByText(/<channel_context/)).toBeNull();
+    expect(screen.queryByText("Saved workspace context")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "#code CONTEXT.md" }));
+
+    expect(screen.getByText("Saved workspace context")).toBeVisible();
+    expect(useThreadNavigationStore.getState().scrollRequests).toEqual({});
+  });
 });
diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
index dfff740247..94915cc36b 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
@@ -1,10 +1,14 @@
 import {
   CheckCircleIcon,
+  FileTextIcon,
   PlusCircleIcon,
   XCircleIcon,
 } from "@phosphor-icons/react";
 import type { ThreadTimelineRow } from "@posthog/core/canvas/threadTimeline";
 import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
   cn,
   ThreadItem,
   ThreadItemAuthor,
@@ -29,6 +33,7 @@ import {
 import { ThreadTimestamp } from "@posthog/ui/features/canvas/components/ThreadTimestamp";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
 import type { buildConversationItems } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import { extractChannelContext } from "@posthog/ui/features/sessions/components/session-update/channelContext";
 import { useThreadNavigationStore } from "@posthog/ui/features/sessions/threadNavigationStore";
 import { Fragment, type KeyboardEvent, type ReactNode, useMemo } from "react";
 
@@ -74,6 +79,11 @@ function UserMessageRow({
   onSelect?: () => void;
 }) {
   const name = author ? userDisplayName(author) : "You";
+  const channelContext = useMemo(
+    () => extractChannelContext(content),
+    [content],
+  );
+  const displayContent = channelContext?.stripped ?? content;
   // The row itself is the hit target. `ThreadItem` renders an <article>, which a
   // <button> may not wrap and which can't become one (quill's primitive takes no
   // `render`), so it carries the button role and its own key handling.
@@ -110,7 +120,27 @@ function UserMessageRow({
           <ThreadTimestamp dateTime={timestamp} />
         </ThreadItemHeader>
         <ThreadItemBody className="mt-1.5 whitespace-pre-wrap break-words text-[13px]">
-          <MentionText content={content} />
+          <MentionText content={displayContent} />
+          {channelContext && (
+            <Collapsible className="mt-2 min-w-0 bg-transparent hover:bg-transparent data-open:bg-transparent">
+              <CollapsibleTrigger
+                className="min-h-0 w-full bg-transparent px-0 py-1 text-left hover:bg-transparent aria-expanded:bg-transparent"
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              >
+                <FileTextIcon size={12} />
+                <span className="truncate text-xs">
+                  {channelContext.mention.name
+                    ? `#${channelContext.mention.name} `
+                    : ""}
+                  CONTEXT.md
+                </span>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-1 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted p-2 text-muted-foreground text-xs">
+                {channelContext.mention.body}
+              </CollapsibleContent>
+            </Collapsible>
+          )}
         </ThreadItemBody>
       </ThreadItemContent>
     </ThreadItem>