fix(canvas): align thread mention rendering

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

Author: k11kirky

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

@@ -104,7 +104,7 @@ function ActivityRow({
           <MentionText
             content={item.content}
             currentUserEmail={currentUserEmail}
-            className="mt-1 block whitespace-pre-wrap break-words"
+            className="mt-1 block whitespace-pre-wrap break-words text-xs"
           />
         </span>
       </button>

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

@@ -18,4 +18,22 @@ describe("MentionText", () => {
       "mention-chip--self",
     );
   });
+
+  it("highlights a literal agent mention", () => {
+    render(<MentionText content="@agent investigate this" />);
+
+    expect(screen.getByText("@agent")).toHaveClass("mention-chip");
+  });
+
+  it("does not highlight agent text inside another token", () => {
+    render(<MentionText content="person@agent.com" />);
+
+    expect(screen.queryByText("@agent")).not.toBeInTheDocument();
+  });
+
+  it("inherits the surrounding message text size", () => {
+    render(<MentionText content="A thread reply" />);
+
+    expect(screen.getByText("A thread reply")).not.toHaveClass("text-xs");
+  });
 });

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

@@ -6,6 +6,7 @@ import "./mention-chip.css";
 type RenderSegment =
   | { type: "text"; text: string }
   | { type: "link"; text: string; href: string }
+  | { type: "agent"; text: string }
   | { type: "mention"; name: string; email: string };
 
 // The plain (not-the-viewer) mention chip look, also used by surfaces that
@@ -35,24 +36,45 @@ export function MentionText({
       entries.push({ segment, key: `${offset}` });
       offset += length;
     };
+    const pushText = (text: string) => {
+      let cursor = 0;
+      for (const match of text.matchAll(/(^|\s)(@agent)\b/gi)) {
+        const mentionStart = (match.index ?? 0) + match[1].length;
+        for (const part of splitLinkSegments(
+          text.slice(cursor, mentionStart),
+        )) {
+          push(part, part.text.length);
+        }
+        push({ type: "agent", text: match[2] }, match[2].length);
+        cursor = mentionStart + match[2].length;
+      }
+      for (const part of splitLinkSegments(text.slice(cursor))) {
+        push(part, part.text.length);
+      }
+    };
     for (const segment of splitMentionSegments(content)) {
       if (segment.type === "mention") {
         push(
           { type: "mention", name: segment.name, email: segment.email },
           segment.text.length,
         );
       } else {
-        for (const part of splitLinkSegments(segment.text)) {
-          push(part, part.text.length);
-        }
+        pushText(segment.text);
       }
     }
     return entries;
   }, [content]);
   const selfEmail = currentUserEmail?.toLowerCase();
   return (
-    <span className={`text-xs ${className ?? ""}`}>
+    <span className={className}>
       {segments.map(({ segment, key }) => {
+        if (segment.type === "agent") {
+          return (
+            <span key={key} className={mentionChipClass}>
+              {segment.text}
+            </span>
+          );
+        }
         if (segment.type === "mention") {
           return (
             <span