From 30e2a9d0efa0d2413e054b27414f83f0025ad544 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 05:47:31 +0100
Subject: [PATCH 1/7] feat(activity): open mention thread in side panel, scroll
 to & pulse the message

Clicking an Activity notification now opens the task thread in a right-hand
ThreadSidebar instead of navigating away. The thread scrolls to the mentioned
message (centered) and pulses it once, rather than jumping to the bottom.

- ThreadPanel/ThreadSidebar take a focusMessageId; rows tag their ThreadItem
  with data-thread-message-id for targeting.
- Bottom auto-scroll is suppressed while deep-linked; the mention is re-centered
  on timeline changes during the pulse so late-loading agent turns can't drift
  it off-screen.
- Re-clicking the same settled message is a no-op (focusedRef guard).
- Adds a thread-mention-highlight keyframe for the pulse.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 .../canvas/components/ActivityView.tsx        | 135 ++++++++++++------
 .../canvas/components/ThreadPanel.tsx         |  77 +++++++++-
 .../canvas/components/ThreadSidebar.tsx       |   5 +
 packages/ui/src/styles/globals.css            |  23 +++
 4 files changed, 188 insertions(+), 52 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ActivityView.tsx b/packages/ui/src/features/canvas/components/ActivityView.tsx
index 17fe071e67..ce179eecdc 100644
--- a/packages/ui/src/features/canvas/components/ActivityView.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityView.tsx
@@ -17,6 +17,7 @@ import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authCl
 import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
 import { getUserInitials } from "@posthog/ui/features/auth/userInitials";
 import { MentionText } from "@posthog/ui/features/canvas/components/MentionText";
+import { ThreadSidebar } from "@posthog/ui/features/canvas/components/ThreadSidebar";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useMentionActivity } from "@posthog/ui/features/canvas/hooks/useMentionActivity";
 import { normalizeChannelName } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
@@ -35,14 +36,19 @@ function ActivityRow({
   item,
   folderChannelId,
   isNew,
+  isSelected,
   currentUserEmail,
+  onOpen,
 }: {
   item: MentionActivityItem;
   /** Desktop folder channel id (the /website route param); null when unmapped. */
   folderChannelId: string | null;
   /** Arrived since the viewer last opened this page. */
   isNew: boolean;
+  /** This row's thread is the one currently open in the side panel. */
+  isSelected: boolean;
   currentUserEmail?: string | null;
+  onOpen: () => void;
 }) {
   const openThread = () => {
     track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
@@ -51,13 +57,9 @@ function ActivityRow({
       channel_id: folderChannelId ?? undefined,
       task_id: item.taskId,
     });
-    // The channel thread route is the deep-link target; tasks whose channel
-    // folder is gone fall back to the plain task view.
-    if (folderChannelId) {
-      navigateToChannelTask(folderChannelId, item.taskId);
-    } else {
-      navigateToTaskDetail(item.taskId);
-    }
+    // Open the thread in the right-hand panel, scrolled to the mention — no
+    // navigation away from Activity.
+    onOpen();
   };
 
   return (
@@ -65,7 +67,9 @@ function ActivityRow({
       <button
         type="button"
         onClick={openThread}
-        className="flex w-full gap-2 rounded-md px-2 py-2 text-left hover:bg-fill-secondary"
+        className={`flex w-full gap-2 rounded-md px-2 py-2 text-left hover:bg-fill-secondary ${
+          isSelected ? "bg-fill-secondary" : ""
+        }`}
       >
         <span className="relative mt-0.5 shrink-0">
           <Avatar size="xs">
@@ -155,6 +159,13 @@ export function ActivityView() {
   const [seenAtOpen] = useState(
     () => useActivitySeenStore.getState().lastSeenAt,
   );
+  // The mention whose thread is open in the right-hand panel. `messageId`
+  // deep-links the ThreadPanel to scroll to and pulse that message.
+  const [selected, setSelected] = useState<{
+    taskId: string;
+    channelId: string;
+    messageId: string;
+  } | null>(null);
 
   useEffect(() => {
     track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
@@ -170,47 +181,77 @@ export function ActivityView() {
   }, [markSeen, items.length]);
 
   return (
-    <div className="h-full overflow-y-auto bg-gray-1">
-      <div className="mx-auto w-full max-w-[680px] px-4 py-6">
-        <Text size="5" weight="bold" className="block">
-          Activity
-        </Text>
-        <Text size="2" className="block text-muted-foreground">
-          Mentions of you across channels.
-        </Text>
-        <div className="mt-4">
-          {isLoading && items.length === 0 ? (
-            <div className="flex justify-center py-16">
-              <Spinner />
-            </div>
-          ) : items.length === 0 ? (
-            <Empty>
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <AtIcon size={20} />
-                </EmptyMedia>
-                <EmptyTitle>No mentions yet</EmptyTitle>
-                <EmptyDescription>
-                  When a teammate tags you with @ in a channel thread, it lands
-                  here.
-                </EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          ) : (
-            <div className="flex flex-col gap-0.5">
-              {items.map((item) => (
-                <ActivityRow
-                  key={item.messageId}
-                  item={item}
-                  folderChannelId={folderChannelIdFor(item.channelName)}
-                  isNew={!seenAtOpen || item.createdAt > seenAtOpen}
-                  currentUserEmail={currentUser?.email}
-                />
-              ))}
-            </div>
-          )}
+    <div className="flex h-full min-h-0 bg-gray-1">
+      <div className="h-full min-w-0 flex-1 overflow-y-auto">
+        <div className="mx-auto w-full max-w-[680px] px-4 py-6">
+          <Text size="5" weight="bold" className="block">
+            Activity
+          </Text>
+          <Text size="2" className="block text-muted-foreground">
+            Mentions of you across channels.
+          </Text>
+          <div className="mt-4">
+            {isLoading && items.length === 0 ? (
+              <div className="flex justify-center py-16">
+                <Spinner />
+              </div>
+            ) : items.length === 0 ? (
+              <Empty>
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <AtIcon size={20} />
+                  </EmptyMedia>
+                  <EmptyTitle>No mentions yet</EmptyTitle>
+                  <EmptyDescription>
+                    When a teammate tags you with @ in a channel thread, it
+                    lands here.
+                  </EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="flex flex-col gap-0.5">
+                {items.map((item) => {
+                  const folderChannelId = folderChannelIdFor(item.channelName);
+                  return (
+                    <ActivityRow
+                      key={item.messageId}
+                      item={item}
+                      folderChannelId={folderChannelId}
+                      isNew={!seenAtOpen || item.createdAt > seenAtOpen}
+                      isSelected={selected?.messageId === item.messageId}
+                      currentUserEmail={currentUser?.email}
+                      onOpen={() =>
+                        setSelected({
+                          taskId: item.taskId,
+                          channelId: folderChannelId ?? "",
+                          messageId: item.messageId,
+                        })
+                      }
+                    />
+                  );
+                })}
+              </div>
+            )}
+          </div>
         </div>
       </div>
+      {selected && (
+        <ThreadSidebar
+          // Remount per task so the mention-scroll starts fresh; switching
+          // messages within the same task updates focusMessageId in place.
+          key={selected.taskId}
+          taskId={selected.taskId}
+          channelId={selected.channelId}
+          focusMessageId={selected.messageId}
+          showTaskSummary={!!selected.channelId}
+          onClose={() => setSelected(null)}
+          onOpenFull={() =>
+            selected.channelId
+              ? navigateToChannelTask(selected.channelId, selected.taskId)
+              : navigateToTaskDetail(selected.taskId)
+          }
+        />
+      )}
     </div>
   );
 }
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index fba801b8f1..75f2606104 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -93,6 +93,7 @@ export function ThreadMessageRow({
   isOwnMessage,
   currentUserEmail,
   canForward,
+  highlighted,
   onSendToAgent,
   onDelete,
 }: {
@@ -101,6 +102,7 @@ export function ThreadMessageRow({
   isOwnMessage: boolean;
   currentUserEmail?: string | null;
   canForward: boolean;
+  highlighted?: boolean;
   onSendToAgent: () => void;
   onDelete: () => void;
 }) {
@@ -112,7 +114,10 @@ export function ThreadMessageRow({
     authorKind === "human" && ((isTaskAuthor && !forwarded) || isOwnMessage);
 
   return (
-    <ThreadItem>
+    <ThreadItem
+      data-thread-message-id={message.id}
+      className={highlighted ? "thread-mention-highlight" : undefined}
+    >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
           <AvatarFallback>
@@ -216,12 +221,17 @@ export function AgentStatusLine({ status }: { status: ThreadAgentStatus }) {
 export function AgentTurnRow({
   message,
   streaming,
+  highlighted,
 }: {
   message: ThreadAgentMessage;
   streaming: boolean;
+  highlighted?: boolean;
 }) {
   return (
-    <ThreadItem>
+    <ThreadItem
+      data-thread-message-id={message.id}
+      className={highlighted ? "thread-mention-highlight" : undefined}
+    >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
           <AvatarFallback>
@@ -257,14 +267,19 @@ export function AgentTurnRow({
 export function UserPromptRow({
   message,
   author,
+  highlighted,
 }: {
   message: ThreadAgentMessage;
   author: TaskThreadMessage["author"];
+  highlighted?: boolean;
 }) {
   const promptText = normalizeAgentPromptText(message.text);
 
   return (
-    <ThreadItem>
+    <ThreadItem
+      data-thread-message-id={message.id}
+      className={highlighted ? "thread-mention-highlight" : undefined}
+    >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
           <AvatarFallback>{getUserInitials(author)}</AvatarFallback>
@@ -358,6 +373,7 @@ function ThreadTimeline({
   canForward,
   lastAgentId,
   agentActive,
+  highlightId,
   onSendToAgent,
   onDelete,
 }: {
@@ -370,6 +386,7 @@ function ThreadTimeline({
   canForward: boolean;
   lastAgentId?: string;
   agentActive: boolean;
+  highlightId?: string;
   onSendToAgent: (messageId: string) => void;
   onDelete: (messageId: string) => void;
 }) {
@@ -400,6 +417,7 @@ function ThreadTimeline({
             key={row.message.id}
             message={row.message}
             author={taskAuthor}
+            highlighted={row.message.id === highlightId}
           />
         ) : row.kind === "human" ? (
           <ThreadMessageRow
@@ -412,6 +430,7 @@ function ThreadTimeline({
             }
             currentUserEmail={currentUserEmail}
             canForward={canForward}
+            highlighted={row.message.id === highlightId}
             onSendToAgent={() => onSendToAgent(row.message.id)}
             onDelete={() => onDelete(row.message.id)}
           />
@@ -420,6 +439,7 @@ function ThreadTimeline({
             key={row.message.id}
             message={row.message}
             streaming={row.message.id === lastAgentId && agentActive}
+            highlighted={row.message.id === highlightId}
           />
         ),
       )}
@@ -482,6 +502,7 @@ function ThreadConversation({
   onToggleCollapsed,
   onOpenFull,
   showTaskSummary,
+  focusMessageId,
 }: {
   task: Task;
   channelId: string;
@@ -489,6 +510,8 @@ function ThreadConversation({
   onToggleCollapsed?: () => void;
   onOpenFull?: () => void;
   showTaskSummary: boolean;
+  /** Thread message to scroll to and pulse once (e.g. an Activity mention). */
+  focusMessageId?: string;
 }) {
   const taskId = task.id;
   const client = useOptionalAuthenticatedClient();
@@ -574,6 +597,11 @@ function ThreadConversation({
 
   const [draft, setDraft] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
+  const [highlightId, setHighlightId] = useState<string | undefined>(undefined);
+  // The mention we've already scrolled to; guards against re-scrolling/pulsing
+  // when the same notification is clicked again (the id doesn't change).
+  const focusedRef = useRef<string | undefined>(undefined);
+  const isReady = !isInitializing && !isLoading;
 
   const handleMentionInsert = useCallback(
     (member: UserBasic) => {
@@ -587,11 +615,47 @@ function ThreadConversation({
     [taskId],
   );
 
+  // Auto-scroll to the newest message. Suppressed entirely for a deep-linked
+  // view: a long thread keeps growing (agent turns, streaming) after the
+  // mention is focused, and any bottom-snap here would yank the view off it.
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when rendered thread content changes
   useEffect(() => {
+    if (focusMessageId) return;
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
   }, [timeline, agentStatus?.phase]);
 
+  // Scroll to a deep-linked mention and pulse it. Keeps re-centering on later
+  // timeline changes while the pulse is active, so content loading in above the
+  // target (agent turns arrive after the thread's human messages) can't drift
+  // it off-screen. Once the pulse clears we stop touching the scroll, and a
+  // re-click of the same already-settled message is a no-op (focusedRef).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-check as the timeline renders/reflows the target
+  useEffect(() => {
+    if (!focusMessageId || !isReady) return;
+    const alreadyFocused = focusedRef.current === focusMessageId;
+    // Settled (pulse finished): leave the user's scroll position alone.
+    if (alreadyFocused && highlightId !== focusMessageId) return;
+    const el = scrollRef.current?.querySelector<HTMLElement>(
+      `[data-thread-message-id="${CSS.escape(focusMessageId)}"]`,
+    );
+    if (!el) return; // not rendered yet; the timeline dep re-runs us when it is
+    focusedRef.current = focusMessageId;
+    // Scroll after paint so the row's real geometry is measured.
+    const raf = requestAnimationFrame(() =>
+      el.scrollIntoView({ block: "center" }),
+    );
+    if (!alreadyFocused) setHighlightId(focusMessageId);
+    return () => cancelAnimationFrame(raf);
+  }, [focusMessageId, isReady, timeline, highlightId]);
+
+  // Clear the pulse after it plays. Keyed on highlightId (not the scroll
+  // effect) so a message arriving mid-pulse can't strand the highlight on.
+  useEffect(() => {
+    if (!highlightId) return;
+    const timer = setTimeout(() => setHighlightId(undefined), 1600);
+    return () => clearTimeout(timer);
+  }, [highlightId]);
+
   const isTaskAuthor =
     !!currentUser?.uuid && currentUser.uuid === task.created_by?.uuid;
   const canForward =
@@ -649,8 +713,6 @@ function ThreadConversation({
     });
   };
 
-  const isReady = !isInitializing && !isLoading;
-
   return (
     <div className="flex h-full min-w-0 flex-col bg-gray-1">
       <ThreadHeader
@@ -675,6 +737,7 @@ function ThreadConversation({
           canForward={canForward}
           lastAgentId={lastAgentId}
           agentActive={agentStatus?.phase === "active"}
+          highlightId={highlightId}
           onSendToAgent={handleSendToAgent}
           onDelete={handleDelete}
         />
@@ -704,6 +767,7 @@ export function ThreadPanel({
   onToggleCollapsed,
   onOpenFull,
   showTaskSummary = true,
+  focusMessageId,
 }: {
   taskId: string;
   channelId: string;
@@ -713,6 +777,8 @@ export function ThreadPanel({
   onToggleCollapsed?: () => void;
   onOpenFull?: () => void;
   showTaskSummary?: boolean;
+  /** Thread message to scroll to and pulse once (e.g. an Activity mention). */
+  focusMessageId?: string;
 }) {
   const { data: fetchedTask } = useQuery({
     ...taskDetailQuery(taskId),
@@ -747,6 +813,7 @@ export function ThreadPanel({
       onToggleCollapsed={onToggleCollapsed}
       onOpenFull={onOpenFull}
       showTaskSummary={showTaskSummary}
+      focusMessageId={focusMessageId}
     />
   );
 }
diff --git a/packages/ui/src/features/canvas/components/ThreadSidebar.tsx b/packages/ui/src/features/canvas/components/ThreadSidebar.tsx
index 4a81cf8700..5b4ed23383 100644
--- a/packages/ui/src/features/canvas/components/ThreadSidebar.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadSidebar.tsx
@@ -17,6 +17,7 @@ export function ThreadSidebar({
   onClose,
   onOpenFull,
   showTaskSummary,
+  focusMessageId,
 }: {
   taskId: string;
   channelId: string;
@@ -25,6 +26,8 @@ export function ThreadSidebar({
   onClose?: () => void;
   onOpenFull?: () => void;
   showTaskSummary?: boolean;
+  /** Thread message to scroll to and pulse once (e.g. an Activity mention). */
+  focusMessageId?: string;
 }) {
   const collapsed = useThreadPanelStore((s) => s.collapsed);
   const width = useThreadPanelStore((s) => s.width);
@@ -49,6 +52,7 @@ export function ThreadSidebar({
         task={task}
         collapsed
         onToggleCollapsed={() => toggleCollapsed(false)}
+        focusMessageId={focusMessageId}
       />
     );
   }
@@ -70,6 +74,7 @@ export function ThreadSidebar({
         onToggleCollapsed={() => toggleCollapsed(true)}
         onOpenFull={onOpenFull}
         showTaskSummary={showTaskSummary}
+        focusMessageId={focusMessageId}
       />
     </ResizableSidebar>
   );
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index b9e19787dc..323f299e0f 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -435,6 +435,29 @@ body:has(.rt-DialogOverlay[data-state="open"]) [data-quill-portal] {
   animation: ph-pulse 1s ease-in-out infinite;
 }
 
+/* One-shot attention flash for a thread message deep-linked from Activity.
+   Fades a tinted background + ring back to transparent so the mentioned row
+   pulses once when scrolled into view. */
+@keyframes thread-mention-highlight {
+  0% {
+    background-color: var(--accent-a5);
+    box-shadow: 0 0 0 2px var(--accent-a7);
+  }
+  60% {
+    background-color: var(--accent-a4);
+    box-shadow: 0 0 0 2px var(--accent-a6);
+  }
+  100% {
+    background-color: transparent;
+    box-shadow: 0 0 0 2px transparent;
+  }
+}
+
+.thread-mention-highlight {
+  animation: thread-mention-highlight 1.6s ease-out;
+  border-radius: var(--radius-3);
+}
+
 /* Freeze CSS keyframe animations while the app window is unfocused or hidden.
    Perpetual indicators (spinners, pulses, floats) otherwise keep the compositor
    and GPU busy in the background for animations nobody is looking at — and some,

From d7f98189ee87c4435482ec52adc20acf07dddd20 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 05:52:38 +0100
Subject: [PATCH 2/7] feat(canvas): add jump-to-latest pill to ThreadPanel

Floating scroll-to-bottom button matching the experimental ChatThread scroller:
appears when the viewport is scrolled up off the bottom (gap below the fold >
100px), fades/scales in, and smooth-scrolls to the newest message on click.
Especially useful for the deep-linked mention view, which lands mid-thread.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 .../canvas/components/ThreadPanel.tsx         | 69 +++++++++++++++----
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index 75f2606104..82fe68f439 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -1,4 +1,5 @@
 import {
+  ArrowDownIcon,
   ArrowSquareOutIcon,
   CaretRightIcon,
   DotsThreeIcon,
@@ -603,6 +604,15 @@ function ThreadConversation({
   const focusedRef = useRef<string | undefined>(undefined);
   const isReady = !isInitializing && !isLoading;
 
+  // Show a jump-to-latest pill when the viewport is scrolled up off the bottom
+  // (same geometry the quill scroller uses: gap below the fold > threshold).
+  const [showJump, setShowJump] = useState(false);
+  const syncAtBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setShowJump(el.scrollHeight - el.scrollTop - el.clientHeight > 100);
+  }, []);
+
   const handleMentionInsert = useCallback(
     (member: UserBasic) => {
       track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
@@ -656,6 +666,13 @@ function ThreadConversation({
     return () => clearTimeout(timer);
   }, [highlightId]);
 
+  // Recompute the jump pill after content grows or an effect above moves the
+  // scroll. Declared last so it reads the settled scrollTop.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-sync as rendered content changes
+  useEffect(() => {
+    syncAtBottom();
+  }, [timeline, agentStatus?.phase, isReady, syncAtBottom]);
+
   const isTaskAuthor =
     !!currentUser?.uuid && currentUser.uuid === task.created_by?.uuid;
   const canForward =
@@ -726,21 +743,43 @@ function ThreadConversation({
           <TaskCard task={task} channelId={channelId} inThread />
         </div>
       )}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto">
-        <ThreadTimeline
-          timeline={timeline}
-          isReady={isReady}
-          taskAuthor={task.created_by}
-          currentUserUuid={currentUser?.uuid}
-          currentUserEmail={currentUser?.email}
-          isTaskAuthor={isTaskAuthor}
-          canForward={canForward}
-          lastAgentId={lastAgentId}
-          agentActive={agentStatus?.phase === "active"}
-          highlightId={highlightId}
-          onSendToAgent={handleSendToAgent}
-          onDelete={handleDelete}
-        />
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        <div
+          ref={scrollRef}
+          onScroll={syncAtBottom}
+          className="h-full overflow-y-auto"
+        >
+          <ThreadTimeline
+            timeline={timeline}
+            isReady={isReady}
+            taskAuthor={task.created_by}
+            currentUserUuid={currentUser?.uuid}
+            currentUserEmail={currentUser?.email}
+            isTaskAuthor={isTaskAuthor}
+            canForward={canForward}
+            lastAgentId={lastAgentId}
+            agentActive={agentStatus?.phase === "active"}
+            highlightId={highlightId}
+            onSendToAgent={handleSendToAgent}
+            onDelete={handleDelete}
+          />
+        </div>
+        <Button
+          variant="outline"
+          size="icon-sm"
+          aria-label="Scroll to latest"
+          onClick={() => {
+            const el = scrollRef.current;
+            el?.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+          }}
+          className={`-translate-x-1/2 absolute bottom-3 left-1/2 z-10 rounded-full shadow-md transition-[opacity,scale] duration-200 ${
+            showJump
+              ? "scale-100 opacity-100"
+              : "pointer-events-none scale-95 opacity-0"
+          }`}
+        >
+          <ArrowDownIcon size={14} />
+        </Button>
       </div>
 
       {agentStatus && <AgentStatusLine status={agentStatus} />}

From 037d1e151fc1fa80ddde0b6ce57e51e8c09c1b50 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:08:05 +0100
Subject: [PATCH 3/7] feat(activity): close open thread on Escape from anywhere
 in Activity

A window keydown listener (active only while a thread is open) clears the
selection on Esc, so focus needn't be inside the panel. Skips when the event
was already handled (e.g. an open dropdown consuming Esc).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 .../src/features/canvas/components/ActivityView.tsx  | 12 ++++++++++++
 .../src/features/canvas/components/ThreadPanel.tsx   |  4 ++--
 .../sessions/components/chat-thread/ChatThread.tsx   |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ActivityView.tsx b/packages/ui/src/features/canvas/components/ActivityView.tsx
index ce179eecdc..84faeb2307 100644
--- a/packages/ui/src/features/canvas/components/ActivityView.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityView.tsx
@@ -180,6 +180,18 @@ export function ActivityView() {
     markSeen();
   }, [markSeen, items.length]);
 
+  // Esc closes the open thread from anywhere in Activity — no need to have
+  // focus inside the panel.
+  useEffect(() => {
+    if (!selected) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Let an open menu/popover consume Esc first (it preventDefaults).
+      if (event.key === "Escape" && !event.defaultPrevented) setSelected(null);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [selected]);
+
   return (
     <div className="flex h-full min-h-0 bg-gray-1">
       <div className="h-full min-w-0 flex-1 overflow-y-auto">
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index 82fe68f439..2e5a857f46 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -766,13 +766,13 @@ function ThreadConversation({
         </div>
         <Button
           variant="outline"
-          size="icon-sm"
+          size="icon"
           aria-label="Scroll to latest"
           onClick={() => {
             const el = scrollRef.current;
             el?.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
           }}
-          className={`-translate-x-1/2 absolute bottom-3 left-1/2 z-10 rounded-full shadow-md transition-[opacity,scale] duration-200 ${
+          className={`-translate-x-1/2 absolute bottom-3 left-1/2 z-10 rounded-full bg-background shadow-md transition-[opacity,scale] duration-200 hover:bg-background! ${
             showJump
               ? "scale-100 opacity-100"
               : "pointer-events-none scale-95 opacity-0"
diff --git a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
index 0a18973537..2c7d0ba3fe 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -976,7 +976,7 @@ function ThreadScrollBody({
           )}
         </ChatMessageScrollerContent>
       </ChatMessageScrollerViewport>
-      <ChatMessageScrollerButton />
+      <ChatMessageScrollerButton className="bg-background hover:bg-fill-hover!" />
     </ChatMessageScroller>
   );
 }

From fac577b306c4427fc794b419f6eca334844623da Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:13:57 +0100
Subject: [PATCH 4/7] style(canvas): make mention highlight span the full
 thread row

Apply the pulse to a square (rounded-none) ThreadItem so the flash covers the
whole row rather than an inset rounded box.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 packages/ui/src/features/canvas/components/ThreadPanel.tsx | 3 ++-
 packages/ui/src/styles/globals.css                         | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index 2e5a857f46..aed0d651df 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -23,6 +23,7 @@ import {
   AvatarFallback,
   Badge,
   Button,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -117,7 +118,7 @@ export function ThreadMessageRow({
   return (
     <ThreadItem
       data-thread-message-id={message.id}
-      className={highlighted ? "thread-mention-highlight" : undefined}
+      className={cn("rounded-none", highlighted && "thread-mention-highlight")}
     >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 323f299e0f..c77e0de0db 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -455,7 +455,6 @@ body:has(.rt-DialogOverlay[data-state="open"]) [data-quill-portal] {
 
 .thread-mention-highlight {
   animation: thread-mention-highlight 1.6s ease-out;
-  border-radius: var(--radius-3);
 }
 
 /* Freeze CSS keyframe animations while the app window is unfocused or hidden.

From ea9a5655823ea0bc88e13d8133586035e9d74b64 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:36:12 +0100
Subject: [PATCH 5/7] feat(activity): animate the thread panel sliding in/out

Wrap the Activity thread mount in AnimatePresence and animate the wrapper width
(auto <-> 0) plus opacity, so the mention list reflows in lockstep with the
panel. Matches the docked sidebar's slide contract exactly: 200ms /
cubic-bezier(0,0,0.2,1). width:auto once open keeps ThreadSidebar's resizable
width intact; the wrapper is keyed stable so switching mentions swaps the inner
panel without a close/reopen. Honors prefers-reduced-motion (opacity-only,
instant).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 .../canvas/components/ActivityView.tsx        | 55 +++++++++++++------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/ActivityView.tsx b/packages/ui/src/features/canvas/components/ActivityView.tsx
index 84faeb2307..d0ec30280b 100644
--- a/packages/ui/src/features/canvas/components/ActivityView.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityView.tsx
@@ -30,6 +30,7 @@ import {
 } from "@posthog/ui/router/navigationBridge";
 import { track } from "@posthog/ui/shell/analytics";
 import { Text } from "@radix-ui/themes";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useEffect, useMemo, useState } from "react";
 
 function ActivityRow({
@@ -166,6 +167,7 @@ export function ActivityView() {
     channelId: string;
     messageId: string;
   } | null>(null);
+  const reduceMotion = useReducedMotion();
 
   useEffect(() => {
     track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
@@ -247,23 +249,42 @@ export function ActivityView() {
           </div>
         </div>
       </div>
-      {selected && (
-        <ThreadSidebar
-          // Remount per task so the mention-scroll starts fresh; switching
-          // messages within the same task updates focusMessageId in place.
-          key={selected.taskId}
-          taskId={selected.taskId}
-          channelId={selected.channelId}
-          focusMessageId={selected.messageId}
-          showTaskSummary={!!selected.channelId}
-          onClose={() => setSelected(null)}
-          onOpenFull={() =>
-            selected.channelId
-              ? navigateToChannelTask(selected.channelId, selected.taskId)
-              : navigateToTaskDetail(selected.taskId)
-          }
-        />
-      )}
+      {/* Slide the thread in/out by animating the wrapper width, so the list
+          reflows in lockstep — same 200ms / cubic-bezier(0,0,0.2,1) the docked
+          sidebar uses. `width: auto` (not a fixed px) once open so ThreadSidebar
+          keeps owning its resizable width. Keyed "thread" so switching between
+          mentions swaps the inner panel without a close/reopen. */}
+      <AnimatePresence>
+        {selected && (
+          <motion.div
+            key="thread"
+            className="h-full shrink-0 overflow-hidden"
+            initial={reduceMotion ? false : { width: 0, opacity: 0 }}
+            animate={{ width: "auto", opacity: 1 }}
+            exit={reduceMotion ? { opacity: 0 } : { width: 0, opacity: 0 }}
+            transition={{
+              duration: reduceMotion ? 0 : 0.2,
+              ease: [0, 0, 0.2, 1],
+            }}
+          >
+            <ThreadSidebar
+              // Remount per task so the mention-scroll starts fresh; switching
+              // messages within the same task updates focusMessageId in place.
+              key={selected.taskId}
+              taskId={selected.taskId}
+              channelId={selected.channelId}
+              focusMessageId={selected.messageId}
+              showTaskSummary={!!selected.channelId}
+              onClose={() => setSelected(null)}
+              onOpenFull={() =>
+                selected.channelId
+                  ? navigateToChannelTask(selected.channelId, selected.taskId)
+                  : navigateToTaskDetail(selected.taskId)
+              }
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }

From 407f2ee8f8182de8f8d7c083b20387e1abe003c9 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:39:10 +0100
Subject: [PATCH 6/7] feat(channels): animate channel thread panel + close it
 on Escape

Apply the Activity thread's slide to the channel view's ThreadSidebar: wrap the
mount in AnimatePresence, animate wrapper width (auto <-> 0) + opacity at
200ms / cubic-bezier(0,0,0.2,1) so the feed reflows in lockstep. Also add a
window Esc listener (active while a thread is open) that closes it from anywhere
in the channel, matching Activity.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 .../canvas/components/WebsiteChannelHome.tsx  | 54 +++++++++++++++----
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
index 16a29e7fbf..36c203e049 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
@@ -43,7 +43,8 @@ import { track } from "@posthog/ui/shell/analytics";
 import { Heading, Text } from "@radix-ui/themes";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // A channel: a Slack-style multiplayer feed. Each member message kicks off a
 // task rendered as a card everyone in the channel sees; the composer stays
@@ -124,6 +125,20 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
   );
   const openThread = useThreadPanelStore((s) => s.openThread);
   const closeThread = useThreadPanelStore((s) => s.closeThread);
+  const reduceMotion = useReducedMotion();
+
+  // Esc closes the open thread from anywhere in the channel — no need to have
+  // focus inside the panel.
+  useEffect(() => {
+    if (!threadTaskId) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Let an open menu/popover consume Esc first (it preventDefaults).
+      if (event.key === "Escape" && !event.defaultPrevented)
+        closeThread(channelId);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [threadTaskId, channelId, closeThread]);
 
   const handleSuggestionSelect = useCallback(
     (prompt: string, mode?: string) => {
@@ -296,15 +311,34 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
         </div>
       </div>
 
-      {threadTaskId && (
-        <ThreadSidebar
-          taskId={threadTaskId}
-          channelId={channelId}
-          task={threadTask}
-          onClose={() => closeThread(channelId)}
-          onOpenFull={() => handleOpenFull(threadTaskId)}
-        />
-      )}
+      {/* Slide the thread in/out by animating the wrapper width so the feed
+          reflows in lockstep — same 200ms / cubic-bezier(0,0,0.2,1) as the
+          docked sidebar. Keyed "thread" so opening a different task swaps the
+          inner panel in place instead of a close/reopen. */}
+      <AnimatePresence>
+        {threadTaskId && (
+          <motion.div
+            key="thread"
+            className="h-full shrink-0 overflow-hidden"
+            initial={reduceMotion ? false : { width: 0, opacity: 0 }}
+            animate={{ width: "auto", opacity: 1 }}
+            exit={reduceMotion ? { opacity: 0 } : { width: 0, opacity: 0 }}
+            transition={{
+              duration: reduceMotion ? 0 : 0.2,
+              ease: [0, 0, 0.2, 1],
+            }}
+          >
+            <ThreadSidebar
+              key={threadTaskId}
+              taskId={threadTaskId}
+              channelId={channelId}
+              task={threadTask}
+              onClose={() => closeThread(channelId)}
+              onOpenFull={() => handleOpenFull(threadTaskId)}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       {channelName && (
         <CreateChannelModal

From 790c5af3760d7603d50198cb2d21304b7c282d2c Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 07:12:03 +0100
Subject: [PATCH 7/7] refactor(canvas): extract AnimatedThreadDock; fix
 resize-handle clip + a11y

Address review findings on the thread slide-in:
- Extract the duplicated AnimatePresence/width-slide wrapper (Activity + channel)
  into a shared AnimatedThreadDock.
- Apply overflow-hidden only while animating, so the settled panel no longer
  clips the ResizableSidebar resize handle (it overhangs the inner edge).
- Guard the mention-pulse and jump-pill transition with prefers-reduced-motion.
- Give all highlighted thread rows rounded-none for a consistent full-bleed pulse.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 .../canvas/components/ActivityView.tsx        | 54 +++++++------------
 .../canvas/components/AnimatedThreadDock.tsx  | 49 +++++++++++++++++
 .../canvas/components/ThreadPanel.tsx         |  6 +--
 .../canvas/components/WebsiteChannelHome.tsx  | 39 ++++----------
 packages/ui/src/styles/globals.css            |  6 +++
 5 files changed, 87 insertions(+), 67 deletions(-)
 create mode 100644 packages/ui/src/features/canvas/components/AnimatedThreadDock.tsx

diff --git a/packages/ui/src/features/canvas/components/ActivityView.tsx b/packages/ui/src/features/canvas/components/ActivityView.tsx
index d0ec30280b..b0b7cacb8a 100644
--- a/packages/ui/src/features/canvas/components/ActivityView.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityView.tsx
@@ -16,6 +16,7 @@ import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
 import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
 import { getUserInitials } from "@posthog/ui/features/auth/userInitials";
+import { AnimatedThreadDock } from "@posthog/ui/features/canvas/components/AnimatedThreadDock";
 import { MentionText } from "@posthog/ui/features/canvas/components/MentionText";
 import { ThreadSidebar } from "@posthog/ui/features/canvas/components/ThreadSidebar";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
@@ -30,7 +31,6 @@ import {
 } from "@posthog/ui/router/navigationBridge";
 import { track } from "@posthog/ui/shell/analytics";
 import { Text } from "@radix-ui/themes";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useEffect, useMemo, useState } from "react";
 
 function ActivityRow({
@@ -167,7 +167,6 @@ export function ActivityView() {
     channelId: string;
     messageId: string;
   } | null>(null);
-  const reduceMotion = useReducedMotion();
 
   useEffect(() => {
     track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
@@ -249,42 +248,25 @@ export function ActivityView() {
           </div>
         </div>
       </div>
-      {/* Slide the thread in/out by animating the wrapper width, so the list
-          reflows in lockstep — same 200ms / cubic-bezier(0,0,0.2,1) the docked
-          sidebar uses. `width: auto` (not a fixed px) once open so ThreadSidebar
-          keeps owning its resizable width. Keyed "thread" so switching between
-          mentions swaps the inner panel without a close/reopen. */}
-      <AnimatePresence>
+      <AnimatedThreadDock open={!!selected}>
         {selected && (
-          <motion.div
-            key="thread"
-            className="h-full shrink-0 overflow-hidden"
-            initial={reduceMotion ? false : { width: 0, opacity: 0 }}
-            animate={{ width: "auto", opacity: 1 }}
-            exit={reduceMotion ? { opacity: 0 } : { width: 0, opacity: 0 }}
-            transition={{
-              duration: reduceMotion ? 0 : 0.2,
-              ease: [0, 0, 0.2, 1],
-            }}
-          >
-            <ThreadSidebar
-              // Remount per task so the mention-scroll starts fresh; switching
-              // messages within the same task updates focusMessageId in place.
-              key={selected.taskId}
-              taskId={selected.taskId}
-              channelId={selected.channelId}
-              focusMessageId={selected.messageId}
-              showTaskSummary={!!selected.channelId}
-              onClose={() => setSelected(null)}
-              onOpenFull={() =>
-                selected.channelId
-                  ? navigateToChannelTask(selected.channelId, selected.taskId)
-                  : navigateToTaskDetail(selected.taskId)
-              }
-            />
-          </motion.div>
+          <ThreadSidebar
+            // Remount per task so the mention-scroll starts fresh; switching
+            // messages within the same task updates focusMessageId in place.
+            key={selected.taskId}
+            taskId={selected.taskId}
+            channelId={selected.channelId}
+            focusMessageId={selected.messageId}
+            showTaskSummary={!!selected.channelId}
+            onClose={() => setSelected(null)}
+            onOpenFull={() =>
+              selected.channelId
+                ? navigateToChannelTask(selected.channelId, selected.taskId)
+                : navigateToTaskDetail(selected.taskId)
+            }
+          />
         )}
-      </AnimatePresence>
+      </AnimatedThreadDock>
     </div>
   );
 }
diff --git a/packages/ui/src/features/canvas/components/AnimatedThreadDock.tsx b/packages/ui/src/features/canvas/components/AnimatedThreadDock.tsx
new file mode 100644
index 0000000000..f6092f0457
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/AnimatedThreadDock.tsx
@@ -0,0 +1,49 @@
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+// The right-hand thread dock, shared by Activity and the channel feed. Slides
+// in/out by animating the wrapper width so the list/feed reflows in lockstep —
+// the same 200ms / cubic-bezier(0,0,0.2,1) the docked ResizableSidebar uses.
+//
+// `width: auto` once open so the inner ThreadSidebar keeps owning its resizable
+// width. overflow-hidden is applied ONLY while animating: a permanent clip
+// would swallow the ResizableSidebar's resize handle (it overhangs the panel's
+// inner edge), so it must be gone once the panel is settled open.
+//
+// Caller guards the child with the same condition it passes as `open` (e.g.
+// `{selected && <ThreadSidebar .../>}`) so nothing is evaluated while closed;
+// AnimatePresence retains the previous child through the exit animation.
+export function AnimatedThreadDock({
+  open,
+  children,
+}: {
+  open: boolean;
+  children: ReactNode;
+}) {
+  const reduceMotion = useReducedMotion();
+  // Start clipped so the first frame (width: 0, full-width child) can't spill.
+  const [animating, setAnimating] = useState(true);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          key="thread"
+          className={`h-full shrink-0 ${animating ? "overflow-hidden" : ""}`}
+          initial={reduceMotion ? false : { width: 0, opacity: 0 }}
+          animate={{ width: "auto", opacity: 1 }}
+          exit={reduceMotion ? { opacity: 0 } : { width: 0, opacity: 0 }}
+          transition={{
+            duration: reduceMotion ? 0 : 0.2,
+            ease: [0, 0, 0.2, 1],
+          }}
+          onAnimationStart={() => setAnimating(true)}
+          onAnimationComplete={() => setAnimating(false)}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index aed0d651df..1b00dce5f0 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -232,7 +232,7 @@ export function AgentTurnRow({
   return (
     <ThreadItem
       data-thread-message-id={message.id}
-      className={highlighted ? "thread-mention-highlight" : undefined}
+      className={cn("rounded-none", highlighted && "thread-mention-highlight")}
     >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
@@ -280,7 +280,7 @@ export function UserPromptRow({
   return (
     <ThreadItem
       data-thread-message-id={message.id}
-      className={highlighted ? "thread-mention-highlight" : undefined}
+      className={cn("rounded-none", highlighted && "thread-mention-highlight")}
     >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
@@ -773,7 +773,7 @@ function ThreadConversation({
             const el = scrollRef.current;
             el?.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
           }}
-          className={`-translate-x-1/2 absolute bottom-3 left-1/2 z-10 rounded-full bg-background shadow-md transition-[opacity,scale] duration-200 hover:bg-background! ${
+          className={`-translate-x-1/2 absolute bottom-3 left-1/2 z-10 rounded-full bg-background shadow-md transition-[opacity,scale] duration-200 hover:bg-background! motion-reduce:transition-none ${
             showJump
               ? "scale-100 opacity-100"
               : "pointer-events-none scale-95 opacity-0"
diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
index 36c203e049..444ed76d8f 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
@@ -3,6 +3,7 @@ import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import type { Task } from "@posthog/shared/domain-types";
 import { isTerminalStatus } from "@posthog/shared/domain-types";
 import { CHANNEL_TASK_SUGGESTIONS } from "@posthog/ui/features/canvas/channelTaskSuggestions";
+import { AnimatedThreadDock } from "@posthog/ui/features/canvas/components/AnimatedThreadDock";
 import {
   ChannelFeedView,
   type PendingKickoff,
@@ -43,7 +44,6 @@ import { track } from "@posthog/ui/shell/analytics";
 import { Heading, Text } from "@radix-ui/themes";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // A channel: a Slack-style multiplayer feed. Each member message kicks off a
@@ -125,7 +125,6 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
   );
   const openThread = useThreadPanelStore((s) => s.openThread);
   const closeThread = useThreadPanelStore((s) => s.closeThread);
-  const reduceMotion = useReducedMotion();
 
   // Esc closes the open thread from anywhere in the channel — no need to have
   // focus inside the panel.
@@ -311,34 +310,18 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
         </div>
       </div>
 
-      {/* Slide the thread in/out by animating the wrapper width so the feed
-          reflows in lockstep — same 200ms / cubic-bezier(0,0,0.2,1) as the
-          docked sidebar. Keyed "thread" so opening a different task swaps the
-          inner panel in place instead of a close/reopen. */}
-      <AnimatePresence>
+      <AnimatedThreadDock open={!!threadTaskId}>
         {threadTaskId && (
-          <motion.div
-            key="thread"
-            className="h-full shrink-0 overflow-hidden"
-            initial={reduceMotion ? false : { width: 0, opacity: 0 }}
-            animate={{ width: "auto", opacity: 1 }}
-            exit={reduceMotion ? { opacity: 0 } : { width: 0, opacity: 0 }}
-            transition={{
-              duration: reduceMotion ? 0 : 0.2,
-              ease: [0, 0, 0.2, 1],
-            }}
-          >
-            <ThreadSidebar
-              key={threadTaskId}
-              taskId={threadTaskId}
-              channelId={channelId}
-              task={threadTask}
-              onClose={() => closeThread(channelId)}
-              onOpenFull={() => handleOpenFull(threadTaskId)}
-            />
-          </motion.div>
+          <ThreadSidebar
+            key={threadTaskId}
+            taskId={threadTaskId}
+            channelId={channelId}
+            task={threadTask}
+            onClose={() => closeThread(channelId)}
+            onOpenFull={() => handleOpenFull(threadTaskId)}
+          />
         )}
-      </AnimatePresence>
+      </AnimatedThreadDock>
 
       {channelName && (
         <CreateChannelModal
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index c77e0de0db..47fb88fd8e 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -457,6 +457,12 @@ body:has(.rt-DialogOverlay[data-state="open"]) [data-quill-portal] {
   animation: thread-mention-highlight 1.6s ease-out;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .thread-mention-highlight {
+    animation: none;
+  }
+}
+
 /* Freeze CSS keyframe animations while the app window is unfocused or hidden.
    Perpetual indicators (spinners, pulses, floats) otherwise keep the compositor
    and GPU busy in the background for animations nobody is looking at — and some,