diff --git a/packages/ui/src/features/canvas/components/ActivityView.tsx b/packages/ui/src/features/canvas/components/ActivityView.tsx
index 17fe071e67..b0b7cacb8a 100644
--- a/packages/ui/src/features/canvas/components/ActivityView.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityView.tsx
@@ -16,7 +16,9 @@ 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";
 import { useMentionActivity } from "@posthog/ui/features/canvas/hooks/useMentionActivity";
 import { normalizeChannelName } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
@@ -35,14 +37,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 +58,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 +68,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 +160,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, {
@@ -169,48 +181,92 @@ 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="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>
+      <AnimatedThreadDock open={!!selected}>
+        {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)
+            }
+          />
+        )}
+      </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 fba801b8f1..1b00dce5f0 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,
@@ -22,6 +23,7 @@ import {
   AvatarFallback,
   Badge,
   Button,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -93,6 +95,7 @@ export function ThreadMessageRow({
   isOwnMessage,
   currentUserEmail,
   canForward,
+  highlighted,
   onSendToAgent,
   onDelete,
 }: {
@@ -101,6 +104,7 @@ export function ThreadMessageRow({
   isOwnMessage: boolean;
   currentUserEmail?: string | null;
   canForward: boolean;
+  highlighted?: boolean;
   onSendToAgent: () => void;
   onDelete: () => void;
 }) {
@@ -112,7 +116,10 @@ export function ThreadMessageRow({
     authorKind === "human" && ((isTaskAuthor && !forwarded) || isOwnMessage);
 
   return (
-    <ThreadItem>
+    <ThreadItem
+      data-thread-message-id={message.id}
+      className={cn("rounded-none", highlighted && "thread-mention-highlight")}
+    >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
           <AvatarFallback>
@@ -216,12 +223,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={cn("rounded-none", highlighted && "thread-mention-highlight")}
+    >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
           <AvatarFallback>
@@ -257,14 +269,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={cn("rounded-none", highlighted && "thread-mention-highlight")}
+    >
       <ThreadItemGutter>
         <Avatar size="lg" className="sticky top-2">
           <AvatarFallback>{getUserInitials(author)}</AvatarFallback>
@@ -358,6 +375,7 @@ function ThreadTimeline({
   canForward,
   lastAgentId,
   agentActive,
+  highlightId,
   onSendToAgent,
   onDelete,
 }: {
@@ -370,6 +388,7 @@ function ThreadTimeline({
   canForward: boolean;
   lastAgentId?: string;
   agentActive: boolean;
+  highlightId?: string;
   onSendToAgent: (messageId: string) => void;
   onDelete: (messageId: string) => void;
 }) {
@@ -400,6 +419,7 @@ function ThreadTimeline({
             key={row.message.id}
             message={row.message}
             author={taskAuthor}
+            highlighted={row.message.id === highlightId}
           />
         ) : row.kind === "human" ? (
           <ThreadMessageRow
@@ -412,6 +432,7 @@ function ThreadTimeline({
             }
             currentUserEmail={currentUserEmail}
             canForward={canForward}
+            highlighted={row.message.id === highlightId}
             onSendToAgent={() => onSendToAgent(row.message.id)}
             onDelete={() => onDelete(row.message.id)}
           />
@@ -420,6 +441,7 @@ function ThreadTimeline({
             key={row.message.id}
             message={row.message}
             streaming={row.message.id === lastAgentId && agentActive}
+            highlighted={row.message.id === highlightId}
           />
         ),
       )}
@@ -482,6 +504,7 @@ function ThreadConversation({
   onToggleCollapsed,
   onOpenFull,
   showTaskSummary,
+  focusMessageId,
 }: {
   task: Task;
   channelId: string;
@@ -489,6 +512,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 +599,20 @@ 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;
+
+  // 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) => {
@@ -587,11 +626,54 @@ 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]);
+
+  // 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 =
@@ -649,8 +731,6 @@ function ThreadConversation({
     });
   };
 
-  const isReady = !isInitializing && !isLoading;
-
   return (
     <div className="flex h-full min-w-0 flex-col bg-gray-1">
       <ThreadHeader
@@ -664,20 +744,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"}
-          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"
+          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 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"
+          }`}
+        >
+          <ArrowDownIcon size={14} />
+        </Button>
       </div>
 
       {agentStatus && <AgentStatusLine status={agentStatus} />}
@@ -704,6 +807,7 @@ export function ThreadPanel({
   onToggleCollapsed,
   onOpenFull,
   showTaskSummary = true,
+  focusMessageId,
 }: {
   taskId: string;
   channelId: string;
@@ -713,6 +817,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 +853,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/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
index 16a29e7fbf..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,7 @@ 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 { 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
@@ -125,6 +126,19 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
   const openThread = useThreadPanelStore((s) => s.openThread);
   const closeThread = useThreadPanelStore((s) => s.closeThread);
 
+  // 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) => {
       composerRef.current?.applySuggestion(prompt, mode);
@@ -296,15 +310,18 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
         </div>
       </div>
 
-      {threadTaskId && (
-        <ThreadSidebar
-          taskId={threadTaskId}
-          channelId={channelId}
-          task={threadTask}
-          onClose={() => closeThread(channelId)}
-          onOpenFull={() => handleOpenFull(threadTaskId)}
-        />
-      )}
+      <AnimatedThreadDock open={!!threadTaskId}>
+        {threadTaskId && (
+          <ThreadSidebar
+            key={threadTaskId}
+            taskId={threadTaskId}
+            channelId={channelId}
+            task={threadTask}
+            onClose={() => closeThread(channelId)}
+            onOpenFull={() => handleOpenFull(threadTaskId)}
+          />
+        )}
+      </AnimatedThreadDock>
 
       {channelName && (
         <CreateChannelModal
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>
   );
 }
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index b9e19787dc..47fb88fd8e 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -435,6 +435,34 @@ 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;
+}
+
+@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,