diff --git a/packages/ui/src/features/canvas/components/ActivityPanel.tsx b/packages/ui/src/features/canvas/components/ActivityPanel.tsx
index 67216759df..a0a36a23dd 100644
--- a/packages/ui/src/features/canvas/components/ActivityPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityPanel.tsx
@@ -3,7 +3,7 @@ import {
   CaretRightIcon,
   XIcon,
 } from "@phosphor-icons/react";
-import { Button, cn, Tabs, TabsList, TabsTrigger } from "@posthog/quill";
+import { Button, Tabs, TabsList, TabsTrigger } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import type { Task } from "@posthog/shared/domain-types";
 import { ActivityTimeline } from "@posthog/ui/features/canvas/components/ActivityTimeline";
@@ -35,9 +35,6 @@ const TABS_WITH_COMPOSER: ReadonlySet<ActivityTab> = new Set([
   "comments",
 ]);
 
-const TIMESTAMP_END_CLASS =
-  "[&_[data-slot=thread-item-timestamp]]:ml-auto [&_[data-slot=thread-item-timestamp]]:shrink-0 [&_[data-slot=thread-item-timestamp]]:pl-2";
-
 /** The 32px row this panel leads with: the tabs are the header, so the strip
  *  lines up with the tab bar of the pane on its left (TabbedPanel) and the
  *  review toolbar, which are the same fixed height and border. */
@@ -119,6 +116,7 @@ function ActivityConversation({
   onToggleCollapsed,
   onOpenFull,
   showTaskSummary,
+  canOpenInPlace,
 }: {
   task: Task;
   channelId: string;
@@ -126,6 +124,7 @@ function ActivityConversation({
   onToggleCollapsed?: () => void;
   onOpenFull?: () => void;
   showTaskSummary: boolean;
+  canOpenInPlace?: boolean;
 }) {
   const taskId = task.id;
   const {
@@ -183,7 +182,13 @@ function ActivityConversation({
 
   const body = () => {
     if (tab === "artifacts") {
-      return <TaskArtifactsList task={task} timeline={timeline} />;
+      return (
+        <TaskArtifactsList
+          task={task}
+          timeline={timeline}
+          canOpenInPlace={canOpenInPlace}
+        />
+      );
     }
     if (tab === "comments") {
       return (
@@ -209,6 +214,7 @@ function ActivityConversation({
         currentUserEmail={currentUser?.email}
         isTaskAuthor={isTaskAuthor}
         canForward={canForward}
+        canOpenInPlace={canOpenInPlace}
         onSendToAgent={sendMessageToAgent}
         onDelete={deleteMessage}
       />
@@ -216,12 +222,7 @@ function ActivityConversation({
   };
 
   return (
-    <div
-      className={cn(
-        "flex h-full min-w-0 flex-col bg-gray-1",
-        TIMESTAMP_END_CLASS,
-      )}
-    >
+    <div className="flex h-full min-w-0 flex-col bg-gray-1">
       <ActivityHeader
         tab={tab}
         onTabChange={handleTabChange}
@@ -269,6 +270,7 @@ export function ActivityPanel({
   onToggleCollapsed,
   onOpenFull,
   showTaskSummary = true,
+  canOpenInPlace,
 }: {
   taskId: string;
   channelId: string;
@@ -278,6 +280,7 @@ export function ActivityPanel({
   onToggleCollapsed?: () => void;
   onOpenFull?: () => void;
   showTaskSummary?: boolean;
+  canOpenInPlace?: boolean;
 }) {
   const { data: fetchedTask } = useQuery({
     ...taskDetailQuery(taskId),
@@ -315,6 +318,7 @@ export function ActivityPanel({
       onToggleCollapsed={onToggleCollapsed}
       onOpenFull={onOpenFull}
       showTaskSummary={showTaskSummary}
+      canOpenInPlace={canOpenInPlace}
     />
   );
 }
diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
new file mode 100644
index 0000000000..c1f625b0fe
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.test.tsx
@@ -0,0 +1,93 @@
+import type { Task } from "@posthog/shared/domain-types";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@posthog/ui/features/git-interaction/usePrDetails", () => ({
+  usePrDetails: () => ({
+    meta: { state: "open", merged: false, draft: false },
+  }),
+}));
+
+import { useThreadNavigationStore } from "@posthog/ui/features/sessions/threadNavigationStore";
+import { ActivityTimeline } from "./ActivityTimeline";
+
+const task = {
+  id: "task-1",
+  created_at: "2026-07-17T09:00:00Z",
+  updated_at: "2026-07-17T09:00:00Z",
+  created_by: { uuid: "u1", first_name: "Shy", last_name: "Alter" },
+  latest_run: null,
+} as unknown as Task;
+
+// Every conversation row is attributed to the task's creator, which is exactly why
+// an author-derived accessible name would be identical on all of them.
+const conversationItems = [
+  {
+    type: "user_message" as const,
+    id: "turn-1-1-user",
+    content: "first thing\nand more detail",
+    timestamp: Date.parse("2026-07-17T09:05:00Z"),
+  },
+  {
+    type: "user_message" as const,
+    id: "turn-2-2-user",
+    content: "second thing",
+    timestamp: Date.parse("2026-07-17T09:10:00Z"),
+  },
+];
+
+function renderTimeline(canOpenInPlace?: boolean) {
+  return render(
+    <ActivityTimeline
+      task={task}
+      timeline={[]}
+      // biome-ignore lint/suspicious/noExplicitAny: narrow fixture for the rows under test
+      conversationItems={conversationItems as any}
+      isTaskAuthor
+      canForward={false}
+      canOpenInPlace={canOpenInPlace}
+      onSendToAgent={() => {}}
+      onDelete={() => {}}
+    />,
+  );
+}
+
+beforeEach(() => {
+  useThreadNavigationStore.setState({ scrollRequests: {} });
+});
+
+describe("ActivityTimeline", () => {
+  it("names each message row by its own content, not a shared template", () => {
+    renderTimeline(true);
+
+    expect(screen.getAllByRole("button")).toHaveLength(2);
+    // `name` here is the computed accessible name, so this is what a screen reader
+    // announces: each row carries the content a sighted user sees, which is what
+    // makes the two distinguishable — the author is the same on every row.
+    expect(
+      screen.getByRole("button", { name: /Shy Alter.*first thing/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Shy Alter.*second thing/ }),
+    ).toBeInTheDocument();
+    // The avatar is decorative, so its initials stay out of the name.
+    expect(screen.queryByRole("button", { name: /SA/ })).toBeNull();
+  });
+
+  it("asks the transcript to scroll to the clicked message", () => {
+    renderTimeline(true);
+
+    fireEvent.click(screen.getAllByRole("button")[1]);
+
+    expect(useThreadNavigationStore.getState().scrollRequests["task-1"]).toBe(
+      "turn-2-2-user",
+    );
+  });
+
+  it("leaves rows inert with no transcript alongside to drive", () => {
+    renderTimeline();
+
+    expect(screen.queryAllByRole("button")).toHaveLength(0);
+    expect(screen.getByText(/first thing/)).toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
index c8846bd6ed..aaf59e4acc 100644
--- a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
@@ -1,6 +1,11 @@
-import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
+import {
+  CheckCircleIcon,
+  PlusCircleIcon,
+  XCircleIcon,
+} from "@phosphor-icons/react";
 import type { ThreadTimelineRow } from "@posthog/core/canvas/threadTimeline";
 import {
+  cn,
   ThreadItem,
   ThreadItemAuthor,
   ThreadItemBody,
@@ -23,70 +28,90 @@ 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 { Fragment, type ReactNode, useMemo } from "react";
+import { useThreadNavigationStore } from "@posthog/ui/features/sessions/threadNavigationStore";
+import { Fragment, type KeyboardEvent, type ReactNode, useMemo } from "react";
 
 type ConversationItem = ReturnType<
   typeof buildConversationItems
 >["items"][number];
 
+/** A lifecycle marker (task created, run finished): an icon bubble and a single
+ *  line, in the same size and colour as every other row's copy. Only the icon
+ *  distinguishes it, so the pane reads as one typographic system. */
 function ActivityEventRow({
-  node,
-  title,
-  action,
+  icon,
+  label,
   timestamp,
 }: {
-  node: ReactNode;
-  title: string;
-  action?: string;
+  icon: ReactNode;
+  label: string;
   timestamp: string;
 }) {
   return (
     <div className="flex items-center gap-2 py-1.5 pr-2 pl-2">
-      <div className="flex w-10 shrink-0 justify-end">
-        <div className="flex w-[2.35rem] justify-center">{node}</div>
+      <div className="flex w-10 shrink-0 justify-center">
+        <span className="relative z-10 flex size-6 items-center justify-center rounded-full bg-gray-3">
+          {icon}
+        </span>
       </div>
-      <span className="min-w-0 truncate text-[13px]">
-        <span className="font-medium text-gray-12">{title}</span>
-        {action && <span className="text-muted-foreground"> {action}</span>}
-      </span>
+      <span className="min-w-0 truncate text-[13px]">{label}</span>
       <ThreadTimestamp dateTime={timestamp} />
     </div>
   );
 }
 
-function EventNode({ icon }: { icon: ReactNode }) {
-  return (
-    <span className="relative z-10 flex size-6 items-center justify-center rounded-full bg-gray-3">
-      {icon}
-    </span>
-  );
-}
-
 function UserMessageRow({
   author,
   content,
   timestamp,
+  onSelect,
 }: {
   author?: UserBasic | null;
   content: string;
   timestamp: string;
+  /** Jumps the transcript to this message. Absent once the run is unavailable. */
+  onSelect?: () => void;
 }) {
+  const name = author ? userDisplayName(author) : "You";
+  // 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.
+  //
+  // Deliberately no `aria-label`: the button takes its name from its contents, so
+  // it announces the author, time and preview a sighted user sees. A label would
+  // replace all three — and since every row here is authored by the task creator,
+  // one built from the name alone would be identical on every row.
+  const activation = onSelect
+    ? ({
+        role: "button",
+        tabIndex: 0,
+        onClick: onSelect,
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => {
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          onSelect();
+        },
+      } as const)
+    : {};
   return (
-    <ThreadItem className="rounded-none">
-      <ThreadItemGutter>
-        <UserAvatar user={author} size="lg" className="sticky top-2" />
+    <ThreadItem
+      className={cn("rounded-none", onSelect && "cursor-pointer")}
+      {...activation}
+    >
+      {/* Decorative: the author's name is written beside it, so keep the avatar's
+          initials out of the row's accessible name. */}
+      <ThreadItemGutter className="justify-center" aria-hidden>
+        <UserAvatar user={author} size="sm" className="sticky top-2" />
       </ThreadItemGutter>
       <ThreadItemContent>
         <ThreadItemHeader>
-          <ThreadItemAuthor>
-            {author ? userDisplayName(author) : "You"}
-          </ThreadItemAuthor>
+          <ThreadItemAuthor className="text-[13px]">{name}</ThreadItemAuthor>
           <ThreadTimestamp dateTime={timestamp} />
         </ThreadItemHeader>
-        <ThreadItemBody>
-          <span className="line-clamp-4 whitespace-pre-wrap break-words text-[13px]">
-            {content}
-          </span>
+        {/* `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}
         </ThreadItemBody>
       </ThreadItemContent>
     </ThreadItem>
@@ -101,6 +126,7 @@ export function ActivityTimeline({
   currentUserEmail,
   isTaskAuthor,
   canForward,
+  canOpenInPlace,
   onSendToAgent,
   onDelete,
 }: {
@@ -111,9 +137,17 @@ export function ActivityTimeline({
   currentUserEmail?: string | null;
   isTaskAuthor: boolean;
   canForward: boolean;
+  /** True when the task's transcript and review pane are mounted beside this
+   *  pane. False in the channel-home sidebar, where there is nothing to drive —
+   *  rows there stay inert and PRs open externally instead of dead-clicking. */
+  canOpenInPlace?: boolean;
   onSendToAgent: (messageId: string) => void;
   onDelete: (messageId: string) => void;
 }) {
+  const requestScrollToMessage = useThreadNavigationStore(
+    (state) => state.requestScrollToMessage,
+  );
+
   const nodes = useMemo(() => {
     const entries: { key: string; ts: number; node: ReactNode }[] = [];
     const createdTs = Date.parse(task.created_at) || 0;
@@ -122,15 +156,10 @@ export function ActivityTimeline({
       ts: createdTs,
       node: (
         <ActivityEventRow
-          node={
-            <UserAvatar
-              user={task.created_by}
-              size="sm"
-              className="relative z-10"
-            />
+          icon={
+            <PlusCircleIcon size={14} weight="fill" className="text-gray-11" />
           }
-          title={task.created_by ? userDisplayName(task.created_by) : "Someone"}
-          action="created this task"
+          label={`${task.created_by ? userDisplayName(task.created_by) : "Someone"} created this task`}
           timestamp={task.created_at}
         />
       ),
@@ -146,6 +175,11 @@ export function ActivityTimeline({
             author={task.created_by}
             content={item.content}
             timestamp={new Date(item.timestamp).toISOString()}
+            onSelect={
+              canOpenInPlace
+                ? () => requestScrollToMessage(task.id, item.id)
+                : undefined
+            }
           />
         ),
       });
@@ -170,6 +204,7 @@ export function ActivityTimeline({
               }
               currentUserEmail={currentUserEmail}
               canForward={canForward}
+              preview
               onSendToAgent={() => onSendToAgent(row.message.id)}
               onDelete={() => onDelete(row.message.id)}
             />
@@ -177,6 +212,7 @@ export function ActivityTimeline({
             <ThreadArtifactRow
               artifact={row.artifact}
               createdAt={row.message.created_at}
+              openInPlaceTaskId={canOpenInPlace ? task.id : undefined}
             />
           ),
       });
@@ -192,6 +228,7 @@ export function ActivityTimeline({
           <ThreadArtifactRow
             artifact={{ kind: "pr", url: outputPr }}
             createdAt={task.updated_at}
+            openInPlaceTaskId={canOpenInPlace ? task.id : undefined}
           />
         ),
       });
@@ -205,26 +242,18 @@ export function ActivityTimeline({
         ts: updatedTs + 1,
         node: (
           <ActivityEventRow
-            node={
-              <EventNode
-                icon={
-                  succeeded ? (
-                    <CheckCircleIcon
-                      size={14}
-                      weight="fill"
-                      className="text-green-9"
-                    />
-                  ) : (
-                    <XCircleIcon
-                      size={14}
-                      weight="fill"
-                      className="text-red-9"
-                    />
-                  )
-                }
-              />
+            icon={
+              succeeded ? (
+                <CheckCircleIcon
+                  size={14}
+                  weight="fill"
+                  className="text-green-9"
+                />
+              ) : (
+                <XCircleIcon size={14} weight="fill" className="text-red-9" />
+              )
             }
-            title={`Task ${runStatus.replace(/_/g, " ")}`}
+            label={`Task ${runStatus.replace(/_/g, " ")}`}
             timestamp={task.updated_at}
           />
         ),
@@ -242,13 +271,17 @@ export function ActivityTimeline({
     currentUserEmail,
     onSendToAgent,
     onDelete,
+    canOpenInPlace,
+    requestScrollToMessage,
   ]);
 
   return (
     <div className="relative">
+      {/* Every row centers its node in a 2.5rem gutter inset by the row's
+          0.5rem padding, so the line runs through 0.5 + 2.5/2 = 1.75rem. */}
       <div
         aria-hidden
-        className="pointer-events-none absolute top-4 bottom-4 left-[1.825rem] w-px bg-border"
+        className="pointer-events-none absolute top-4 bottom-4 left-[1.75rem] w-px bg-border"
       />
       <div className="relative z-10">
         <ThreadItemGroup>
diff --git a/packages/ui/src/features/canvas/components/ChannelSidebar.test.tsx b/packages/ui/src/features/canvas/components/ChannelSidebar.test.tsx
new file mode 100644
index 0000000000..53fb6a5c3d
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelSidebar.test.tsx
@@ -0,0 +1,164 @@
+import type { ChannelItemModel } from "@posthog/core/canvas/channelItems";
+import { Theme } from "@radix-ui/themes";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  items: [] as ChannelItemModel[],
+  isLoading: false,
+  channelMissing: false,
+}));
+
+vi.mock("@posthog/ui/features/canvas/hooks/useChannelItems", () => ({
+  useChannelItems: () => ({
+    items: mocks.items,
+    actions: { open: vi.fn(), togglePin: vi.fn(), archive: vi.fn() },
+    me: { uuid: "me-uuid" },
+    isLoading: mocks.isLoading,
+    channelMissing: mocks.channelMissing,
+  }),
+}));
+vi.mock("@posthog/ui/features/feature-flags/useFeatureFlag", () => ({
+  useFeatureFlag: () => false,
+}));
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => vi.fn(),
+  useRouterState: () => "/website/channel-1",
+}));
+
+// Both mount their own query stacks; this suite is about the list's own
+// loading-vs-empty decisions.
+vi.mock("@posthog/ui/features/canvas/components/ChannelBackRow", () => ({
+  ChannelBackRow: () => null,
+}));
+vi.mock("@posthog/ui/features/canvas/components/ChannelsFab", () => ({
+  ChannelsFab: () => null,
+}));
+
+// The row context menu's hooks reach for a QueryClient and the DI container,
+// neither of which a unit test has. Stubbed at the module boundary, as
+// WebsiteLayout.test.tsx does for the same reason.
+vi.mock("@posthog/ui/features/tasks/useTaskContextMenu", () => ({
+  useTaskContextMenu: () => ({
+    showContextMenu: vi.fn(),
+    editingTaskId: null,
+    setEditingTaskId: vi.fn(),
+  }),
+}));
+vi.mock("@posthog/ui/features/tasks/useTaskMutations", () => ({
+  useRenameTask: () => ({ renameTask: vi.fn() }),
+}));
+vi.mock("@posthog/ui/features/tasks/useTasks", () => ({
+  useTasks: () => ({ data: [] }),
+}));
+
+import { ChannelSidebar } from "./ChannelSidebar";
+
+function item(overrides: Partial<ChannelItemModel> = {}): ChannelItemModel {
+  return {
+    key: "task:task-1",
+    kind: "task",
+    id: "task-1",
+    title: "Investigate signup drop-off",
+    ts: Date.parse("2026-07-17T12:00:00.000Z"),
+    pinned: false,
+    rawStatus: null,
+    authorUser: null,
+    authorName: "Someone else",
+    // Not the viewer, so filtering to "Me" leaves nothing.
+    authorUuid: "someone-else-uuid",
+    templateId: null,
+    ...overrides,
+  };
+}
+
+// A fresh element per render: React bails out of re-rendering an element it has
+// already seen by reference, and these tests change the hook's answer between
+// renders rather than the props.
+const sidebar = () => (
+  <Theme>
+    <ChannelSidebar channelId="channel-1" />
+  </Theme>
+);
+
+function renderSidebar() {
+  return render(sidebar());
+}
+
+describe("ChannelSidebar", () => {
+  beforeEach(() => {
+    mocks.items = [];
+    mocks.isLoading = false;
+    mocks.channelMissing = false;
+  });
+
+  it.each([
+    {
+      what: "nothing has arrived yet",
+      state: { items: [], isLoading: true },
+      shown: [] as string[],
+      hidden: ["Recent", "No matches", "Nothing here yet"],
+    },
+    {
+      what: "the space is settled and genuinely empty",
+      state: { items: [], isLoading: false },
+      shown: ["Nothing here yet"],
+      hidden: ["Recent", "No matches"],
+    },
+    {
+      what: "the space is settled with items",
+      state: { items: [item()], isLoading: false },
+      shown: ["Recent", "Investigate signup drop-off"],
+      hidden: ["No matches", "Nothing here yet"],
+    },
+  ])("shows one state when $what", ({ state, shown, hidden }) => {
+    mocks.items = state.items;
+    mocks.isLoading = state.isLoading;
+
+    const { container } = renderSidebar();
+
+    for (const text of shown) {
+      expect(screen.getByText(text)).toBeInTheDocument();
+    }
+    for (const text of hidden) {
+      expect(screen.queryByText(text)).not.toBeInTheDocument();
+    }
+    expect(
+      container.querySelector("[aria-busy]")?.getAttribute("aria-busy"),
+    ).toBe(String(state.isLoading));
+  });
+
+  it("doesn't call a cold load 'no matches' while a filter is active", async () => {
+    const user = userEvent.setup();
+    mocks.items = [item()];
+    const { rerender } = renderSidebar();
+
+    // Filter down to the viewer's own items; this one is someone else's, so the
+    // settled list really has no matches.
+    await user.click(screen.getByRole("button", { name: "Filter" }));
+    await user.click(await screen.findByRole("menuitemradio", { name: "Me" }));
+    expect(screen.getByText("No matches")).toBeInTheDocument();
+
+    // Reloading the space empties the list again — that isn't a verdict.
+    mocks.items = [];
+    mocks.isLoading = true;
+    rerender(sidebar());
+
+    expect(screen.queryByText("No matches")).not.toBeInTheDocument();
+    expect(screen.queryByText("Nothing here yet")).not.toBeInTheDocument();
+  });
+
+  it("shows a single empty state when the last item goes away under a search", async () => {
+    const user = userEvent.setup();
+    mocks.items = [item()];
+    const { rerender } = renderSidebar();
+
+    await user.click(screen.getByRole("button", { name: "Search" }));
+    mocks.items = [];
+    rerender(sidebar());
+
+    expect(screen.getByText("No matches")).toBeInTheDocument();
+    expect(screen.queryByText("Nothing here yet")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/ChannelSidebar.tsx b/packages/ui/src/features/canvas/components/ChannelSidebar.tsx
index ac5bd8ebd8..e1589e2a1f 100644
--- a/packages/ui/src/features/canvas/components/ChannelSidebar.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelSidebar.tsx
@@ -195,6 +195,34 @@ function ChannelItemsSkeleton() {
   );
 }
 
+/** `ready` is the list itself, whether or not the filters leave any rows in it. */
+type ListState = "unavailable" | "loading" | "empty" | "ready";
+
+/**
+ * What the list shows, decided in one place. These were four conditions spread
+ * across the render tree, which let a cold load draw the skeleton and the "No
+ * matches" empty state at the same time.
+ *
+ * `narrowed` — a filter, or an open search box — is what makes no items mean
+ * "nothing matches" rather than "nothing here".
+ */
+function listStateOf({
+  channelMissing,
+  isLoading,
+  itemCount,
+  narrowed,
+}: {
+  channelMissing: boolean;
+  isLoading: boolean;
+  itemCount: number;
+  narrowed: boolean;
+}): ListState {
+  if (channelMissing) return "unavailable";
+  if (isLoading && itemCount === 0) return "loading";
+  if (itemCount === 0 && !narrowed) return "empty";
+  return "ready";
+}
+
 /**
  * The channel pane of the sidebar slider: the way back to the channel list,
  * the channel's sections, then its pinned and recent tasks & canvases.
@@ -246,6 +274,20 @@ export function ChannelSidebar({ channelId }: { channelId: string }) {
     [items, query, createdByFilter, statusFilter, me],
   );
 
+  const narrowed = filtersActive || searchOpen;
+  const listState = listStateOf({
+    channelMissing,
+    isLoading,
+    itemCount: items.length,
+    narrowed,
+  });
+  // The list's two sections, which only exist once there are items. With
+  // everything pinned there's nothing left to list — but keep the header while
+  // it's narrowed, so you can undo whatever emptied it.
+  const showPinned = listState === "ready" && pinnedItems.length > 0;
+  const showRecent =
+    listState === "ready" && (items.some((i) => !i.pinned) || narrowed);
+
   const taskRow = (item: (typeof items)[number]) => (
     <ChannelItemRow
       key={item.key}
@@ -362,9 +404,9 @@ export function ChannelSidebar({ channelId }: { channelId: string }) {
           aria-busy={isLoading}
           className="scroll-mask-4 h-full overflow-y-auto px-2 pb-2"
         >
-          {isLoading && items.length === 0 && <ChannelItemsSkeleton />}
+          {listState === "loading" && <ChannelItemsSkeleton />}
 
-          {channelMissing && (
+          {listState === "unavailable" && (
             <Empty className="border-0 py-6">
               <EmptyHeader>
                 <EmptyMedia variant="icon">
@@ -378,7 +420,7 @@ export function ChannelSidebar({ channelId }: { channelId: string }) {
             </Empty>
           )}
 
-          {pinnedItems.length > 0 && (
+          {showPinned && (
             <>
               <MenuLabel>Pinned</MenuLabel>
               <div className="flex flex-col gap-px">
@@ -387,7 +429,7 @@ export function ChannelSidebar({ channelId }: { channelId: string }) {
             </>
           )}
 
-          {(items.some((i) => !i.pinned) || filtersActive || searchOpen) && (
+          {showRecent && (
             <>
               <RecentSectionHeader
                 searchOpen={searchOpen}
@@ -423,7 +465,7 @@ export function ChannelSidebar({ channelId }: { channelId: string }) {
             </>
           )}
 
-          {!isLoading && !channelMissing && items.length === 0 && (
+          {listState === "empty" && (
             <Empty className="border-0 py-6">
               <EmptyHeader>
                 <EmptyMedia variant="icon">
diff --git a/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx b/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
index 79c6863312..cb0a58dc56 100644
--- a/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
+++ b/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
@@ -5,6 +5,11 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 const mocks = vi.hoisted(() => ({
   runs: [] as TaskRun[],
   openArtifactTab: vi.fn(),
+  openExternalUrl: vi.fn(),
+}));
+
+vi.mock("@posthog/ui/shell/openExternal", () => ({
+  openExternalUrl: (url: string) => mocks.openExternalUrl(url),
 }));
 
 vi.mock("@posthog/ui/features/canvas/hooks/useTaskRuns", () => ({
@@ -65,6 +70,7 @@ describe("TaskArtifactsList", () => {
   beforeEach(() => {
     mocks.runs = [run("run-1", { prNumber: 1 }), run("run-2", { prNumber: 2 })];
     mocks.openArtifactTab.mockReset();
+    mocks.openExternalUrl.mockReset();
     useReviewNavigationStore.setState({
       reviewModes: {},
       selectedPrUrls: {},
@@ -72,7 +78,7 @@ describe("TaskArtifactsList", () => {
   });
 
   it("opens the PR represented by the selected historical row", () => {
-    render(<TaskArtifactsList task={task} timeline={[]} />);
+    render(<TaskArtifactsList task={task} timeline={[]} canOpenInPlace />);
 
     fireEvent.click(screen.getByText("Pull request #2"));
 
@@ -81,6 +87,20 @@ describe("TaskArtifactsList", () => {
       "https://github.com/acme/repo/pull/2",
     );
     expect(state.reviewModes[task.id]).toBe("split");
+    expect(mocks.openExternalUrl).not.toHaveBeenCalled();
+  });
+
+  it("opens a PR externally with no review pane alongside to open into", () => {
+    render(<TaskArtifactsList task={task} timeline={[]} />);
+
+    fireEvent.click(screen.getByText("Pull request #2"));
+
+    expect(mocks.openExternalUrl).toHaveBeenCalledWith(
+      "https://github.com/acme/repo/pull/2",
+    );
+    expect(useReviewNavigationStore.getState().reviewModes[task.id]).toBe(
+      undefined,
+    );
   });
 
   it("lists every PR produced by the same run", () => {
diff --git a/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx b/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
index 905f9e0d28..e24ded715d 100644
--- a/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
+++ b/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
@@ -24,7 +24,7 @@ import type {
 } from "@posthog/shared/domain-types";
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
 import { useTaskRuns } from "@posthog/ui/features/canvas/hooks/useTaskRuns";
-import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
+import { openPrInReview } from "@posthog/ui/features/code-review/openPrInReview";
 import { usePrArtifact } from "@posthog/ui/features/git-interaction/usePrArtifact";
 import { usePanelLayoutStore } from "@posthog/ui/features/panels/panelLayoutStore";
 import { usePrComments } from "@posthog/ui/features/pr-review/usePrComments";
@@ -130,6 +130,7 @@ function ArtifactListRow({
   detail,
   external,
   onOpen,
+  onOpenExternal,
   onHoverStart,
 }: {
   icon: ReactNode;
@@ -137,33 +138,53 @@ function ArtifactListRow({
   detail?: string | null;
   external?: boolean;
   onOpen?: () => void;
+  /** Renders a trailing button that leaves the app instead of opening the
+   *  artifact in place. Absent when there is nowhere safe to send the user. */
+  onOpenExternal?: () => void;
   onHoverStart?: () => void;
 }) {
   return (
-    <button
-      type="button"
-      onClick={onOpen}
-      disabled={!onOpen}
-      onPointerEnter={onHoverStart}
-      onFocus={onHoverStart}
-      className="flex w-full items-center gap-2 rounded-md border border-border bg-muted px-2.5 py-2 text-left text-[13px] transition-colors enabled:hover:bg-gray-3"
-    >
-      {icon}
-      <span className="min-w-0 flex-1 truncate font-medium">{title}</span>
-      {detail && (
-        <span className="shrink-0 text-muted-foreground text-xs">{detail}</span>
+    // overflow-hidden so each half's hover fill is clipped to the row's radius.
+    <div className="flex w-full items-center overflow-hidden rounded-md border border-border bg-muted text-[13px]">
+      <button
+        type="button"
+        onClick={onOpen}
+        disabled={!onOpen}
+        onPointerEnter={onHoverStart}
+        onFocus={onHoverStart}
+        className="flex min-w-0 flex-1 items-center gap-2 px-2.5 py-2 text-left transition-colors enabled:hover:bg-gray-3"
+      >
+        {icon}
+        <span className="min-w-0 flex-1 truncate font-medium">{title}</span>
+        {detail && (
+          <span className="shrink-0 text-muted-foreground">{detail}</span>
+        )}
+        {external && (
+          <ArrowSquareOutIcon size={12} className="shrink-0 text-gray-9" />
+        )}
+      </button>
+      {onOpenExternal && (
+        <button
+          type="button"
+          onClick={onOpenExternal}
+          aria-label={`Open ${title} externally`}
+          className="flex shrink-0 items-center self-stretch border-border border-l px-2 text-muted-foreground transition-colors hover:bg-gray-3 hover:text-foreground"
+        >
+          <ArrowSquareOutIcon size={12} />
+        </button>
       )}
-      {external && (
-        <ArrowSquareOutIcon size={12} className="shrink-0 text-gray-9" />
-      )}
-    </button>
+    </div>
   );
 }
 
-function PrRow({ url, taskId }: { url: string; taskId: string }) {
+function PrRow({
+  url,
+  openInPlaceTaskId,
+}: {
+  url: string;
+  openInPlaceTaskId?: string;
+}) {
   const { safeUrl, title, stateLabel, Icon, iconColor } = usePrArtifact(url);
-  const setReviewMode = useReviewNavigationStore((s) => s.setReviewMode);
-  const setSelectedPrUrl = useReviewNavigationStore((s) => s.setSelectedPrUrl);
 
   const [countsWanted, setCountsWanted] = useState(false);
   const comments = usePrComments(countsWanted ? safeUrl : null);
@@ -197,12 +218,13 @@ function PrRow({ url, taskId }: { url: string; taskId: string }) {
       onHoverStart={() => setCountsWanted(true)}
       onOpen={
         safeUrl
-          ? () => {
-              setSelectedPrUrl(taskId, safeUrl);
-              setReviewMode(taskId, "split");
-            }
+          ? () =>
+              openInPlaceTaskId
+                ? openPrInReview(openInPlaceTaskId, safeUrl)
+                : openExternalUrl(safeUrl)
           : undefined
       }
+      onOpenExternal={safeUrl ? () => openExternalUrl(safeUrl) : undefined}
     />
   );
 }
@@ -271,9 +293,13 @@ function FileRow({
 export function TaskArtifactsList({
   task,
   timeline,
+  canOpenInPlace,
 }: {
   task: Task;
   timeline: ThreadTimelineRow<TaskThreadMessage>[];
+  /** See `ActivityTimeline` — without the task's own view alongside, a PR has to
+   *  open externally rather than into a review pane nobody is showing. */
+  canOpenInPlace?: boolean;
 }) {
   const { runs } = useTaskRuns(task.id);
   const rows = useMemo(
@@ -302,7 +328,11 @@ export function TaskArtifactsList({
     <div className="flex flex-col gap-1.5 p-2">
       {rows.map((row) =>
         row.kind === "pr" ? (
-          <PrRow key={row.key} url={row.url} taskId={task.id} />
+          <PrRow
+            key={row.key}
+            url={row.url}
+            openInPlaceTaskId={canOpenInPlace ? task.id : undefined}
+          />
         ) : row.kind === "canvas" ? (
           <CanvasRow key={row.key} name={row.name} url={row.url} />
         ) : row.kind === "file" ? (
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
index eb3d49c5e1..35b16ac5cd 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.test.tsx
@@ -1,3 +1,4 @@
+import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -68,6 +69,33 @@ describe("ThreadMessageRow", () => {
       screen.getByRole("button", { name: "Message actions" }),
     ).toBeInTheDocument();
   });
+
+  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
+        message={{
+          id: "m1",
+          task: "task",
+          content: multiline,
+          created_at: "2026-07-17T00:00:00Z",
+          author: null,
+        }}
+        isTaskAuthor
+        isOwnMessage={false}
+        canForward
+        onSendToAgent={() => {}}
+        onDelete={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByText(/Second line with more detail/),
+    ).toBeInTheDocument();
+  });
 });
 
 describe("ThreadArtifactRow", () => {
@@ -80,6 +108,7 @@ describe("ThreadArtifactRow", () => {
           url: "https://us.posthog.com/code/canvas/channel-1/dash-1",
         }}
         createdAt="2026-07-17T00:00:00Z"
+        openInPlaceTaskId="task-1"
       />,
     );
 
@@ -101,6 +130,7 @@ describe("ThreadArtifactRow", () => {
       <ThreadArtifactRow
         artifact={{ kind: "canvas", name: "Signups overview", url: null }}
         createdAt="2026-07-17T00:00:00Z"
+        openInPlaceTaskId="task-1"
       />,
     );
 
@@ -117,6 +147,7 @@ describe("ThreadArtifactRow", () => {
       <ThreadArtifactRow
         artifact={{ kind: "canvas", name: "Signups overview", url }}
         createdAt="2026-07-17T00:00:00Z"
+        openInPlaceTaskId="task-1"
       />,
     );
 
@@ -126,21 +157,32 @@ describe("ThreadArtifactRow", () => {
     expect(navigateToShareTarget).not.toHaveBeenCalled();
   });
 
-  it("renders a pull request artifact and opens it externally", () => {
+  it("opens a pull request in the review pane, and on GitHub from its own button", () => {
+    const url = "https://github.com/org/repo/pull/123";
+
     render(
       <ThreadArtifactRow
-        artifact={{ kind: "pr", url: "https://github.com/org/repo/pull/123" }}
+        artifact={{ kind: "pr", url }}
         createdAt="2026-07-17T00:00:00Z"
+        openInPlaceTaskId="task-1"
       />,
     );
 
     expect(screen.getByText("Pull request #123")).toBeInTheDocument();
 
-    fireEvent.click(screen.getByRole("button", { name: /Pull request #123/ }));
+    // The card's own name leads with the title; the GitHub button's trails it.
+    fireEvent.click(screen.getByRole("button", { name: /^Pull request #123/ }));
+
+    const review = useReviewNavigationStore.getState();
+    expect(review.selectedPrUrls["task-1"]).toBe(url);
+    expect(review.reviewModes["task-1"]).toBe("split");
+    expect(openExternalUrl).not.toHaveBeenCalled();
 
-    expect(openExternalUrl).toHaveBeenCalledWith(
-      "https://github.com/org/repo/pull/123",
+    fireEvent.click(
+      screen.getByRole("button", { name: "Open Pull request #123 externally" }),
     );
+
+    expect(openExternalUrl).toHaveBeenCalledWith(url);
     expect(navigateToShareTarget).not.toHaveBeenCalled();
   });
 
@@ -162,6 +204,7 @@ describe("ThreadArtifactRow", () => {
         <ThreadArtifactRow
           artifact={artifact}
           createdAt="2026-07-17T00:00:00Z"
+          openInPlaceTaskId="task-1"
         />,
       );
 
@@ -197,6 +240,7 @@ describe("ThreadArtifactRow", () => {
         <ThreadArtifactRow
           artifact={artifact}
           createdAt="2026-07-17T00:00:00Z"
+          openInPlaceTaskId="task-1"
         />,
       );
 
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index 1070a6ae0b..807f3fbd01 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -17,6 +17,7 @@ import {
   AvatarFallback,
   Badge,
   Button,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -52,6 +53,7 @@ import { MentionText } from "@posthog/ui/features/canvas/components/MentionText"
 import { ThreadTimestamp } from "@posthog/ui/features/canvas/components/ThreadTimestamp";
 import { useThreadConversation } from "@posthog/ui/features/canvas/hooks/useThreadConversation";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
+import { openPrInReview } from "@posthog/ui/features/code-review/openPrInReview";
 import { usePrArtifact } from "@posthog/ui/features/git-interaction/usePrArtifact";
 import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
 import { openExternalUrl } from "@posthog/ui/shell/openExternal";
@@ -67,6 +69,7 @@ export function ThreadMessageRow({
   isOwnMessage,
   currentUserEmail,
   canForward,
+  preview,
   onSendToAgent,
   onDelete,
 }: {
@@ -75,6 +78,8 @@ export function ThreadMessageRow({
   isOwnMessage: boolean;
   currentUserEmail?: string | null;
   canForward: boolean;
+  /** Timeline rows show one truncated line; the Comments tab shows it all. */
+  preview?: boolean;
   onSendToAgent: () => void;
   onDelete: () => void;
 }) {
@@ -83,15 +88,24 @@ export function ThreadMessageRow({
 
   return (
     <ThreadItem>
-      <ThreadItemGutter>
-        <UserAvatar user={message.author} size="lg" className="sticky top-2" />
+      <ThreadItemGutter className="justify-center">
+        <UserAvatar user={message.author} size="sm" className="sticky top-2" />
       </ThreadItemGutter>
       <ThreadItemContent>
         <ThreadItemHeader>
-          <ThreadItemAuthor>{userDisplayName(message.author)}</ThreadItemAuthor>
+          <ThreadItemAuthor className="text-[13px]">
+            {userDisplayName(message.author)}
+          </ThreadItemAuthor>
           <ThreadTimestamp dateTime={message.created_at} />
         </ThreadItemHeader>
-        <ThreadItemBody>
+        <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",
+          )}
+        >
           <MentionText
             content={message.content}
             currentUserEmail={currentUserEmail}
@@ -159,11 +173,15 @@ function ArtifactCardButton({
   title,
   detail,
   onOpen,
+  onOpenExternal,
 }: {
   icon: React.ReactNode;
   title: string;
   detail?: string | null;
   onOpen?: () => void;
+  /** Renders a trailing button that leaves the app instead of opening the
+   *  artifact in place. Absent when there is nowhere safe to send the user. */
+  onOpenExternal?: () => void;
 }) {
   const body = (
     <>
@@ -174,19 +192,35 @@ function ArtifactCardButton({
       )}
     </>
   );
-  const cardClass =
-    "flex w-fit max-w-full items-center gap-2 rounded-md border border-border bg-muted px-2 py-1.5 text-[13px]";
-  if (!onOpen) {
-    return <span className={cardClass}>{body}</span>;
-  }
+  const innerClass = "flex min-w-0 items-center gap-2 px-2 py-1.5";
   return (
-    <button
-      type="button"
-      onClick={onOpen}
-      className={`${cardClass} text-left transition-colors hover:bg-gray-3`}
-    >
-      {body}
-    </button>
+    // overflow-hidden so each half's hover fill is clipped to the card's radius.
+    <div className="flex w-fit max-w-full items-center overflow-hidden rounded-md border border-border bg-muted text-[13px]">
+      {onOpen ? (
+        <button
+          type="button"
+          onClick={onOpen}
+          className={cn(
+            innerClass,
+            "text-left transition-colors hover:bg-gray-3",
+          )}
+        >
+          {body}
+        </button>
+      ) : (
+        <span className={innerClass}>{body}</span>
+      )}
+      {onOpenExternal && (
+        <button
+          type="button"
+          onClick={onOpenExternal}
+          aria-label={`Open ${title} externally`}
+          className="flex shrink-0 items-center self-stretch border-border border-l px-1.5 text-muted-foreground transition-colors hover:bg-gray-3 hover:text-foreground"
+        >
+          <ArrowSquareOutIcon size={12} />
+        </button>
+      )}
+    </div>
   );
 }
 
@@ -222,7 +256,13 @@ function CanvasArtifactCard({
   );
 }
 
-function PrArtifactCard({ url }: { url: string }) {
+function PrArtifactCard({
+  url,
+  openInPlaceTaskId,
+}: {
+  url: string;
+  openInPlaceTaskId?: string;
+}) {
   const { safeUrl, title, stateLabel, Icon, iconColor } = usePrArtifact(url);
   return (
     <ArtifactCardButton
@@ -236,7 +276,15 @@ function PrArtifactCard({ url }: { url: string }) {
       }
       title={title}
       detail={stateLabel}
-      onOpen={safeUrl ? () => openExternalUrl(safeUrl) : undefined}
+      onOpen={
+        safeUrl
+          ? () =>
+              openInPlaceTaskId
+                ? openPrInReview(openInPlaceTaskId, safeUrl)
+                : openExternalUrl(safeUrl)
+          : undefined
+      }
+      onOpenExternal={safeUrl ? () => openExternalUrl(safeUrl) : undefined}
     />
   );
 }
@@ -244,31 +292,37 @@ function PrArtifactCard({ url }: { url: string }) {
 export function ThreadArtifactRow({
   artifact,
   createdAt,
+  openInPlaceTaskId,
 }: {
   artifact: ThreadArtifact;
   createdAt: string;
+  /** Task whose review pane is mounted alongside; absent means open externally. */
+  openInPlaceTaskId?: string;
 }) {
   return (
     <ThreadItem>
-      <ThreadItemGutter>
-        <Avatar size="lg" className="sticky top-2">
+      <ThreadItemGutter className="justify-center">
+        <Avatar size="sm" className="sticky top-2">
           <AvatarFallback>
-            <RobotIcon size={14} />
+            <RobotIcon size={12} />
           </AvatarFallback>
         </Avatar>
       </ThreadItemGutter>
       <ThreadItemContent>
         <ThreadItemHeader>
-          <ThreadItemAuthor>
+          <ThreadItemAuthor className="text-[13px]">
             {artifact.kind === "canvas" ? "Canvas" : "Pull request"}
           </ThreadItemAuthor>
           <ThreadTimestamp dateTime={createdAt} />
         </ThreadItemHeader>
-        <ThreadItemBody>
+        <ThreadItemBody className="mt-1.5 text-[13px]">
           {artifact.kind === "canvas" ? (
             <CanvasArtifactCard name={artifact.name} url={artifact.url} />
           ) : (
-            <PrArtifactCard url={artifact.url} />
+            <PrArtifactCard
+              url={artifact.url}
+              openInPlaceTaskId={openInPlaceTaskId}
+            />
           )}
         </ThreadItemBody>
       </ThreadItemContent>
diff --git a/packages/ui/src/features/canvas/components/ThreadSidebar.tsx b/packages/ui/src/features/canvas/components/ThreadSidebar.tsx
index 1dfa13cb29..03255bffc0 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,
+  canOpenInPlace,
 }: {
   taskId: string;
   channelId: string;
@@ -25,6 +26,9 @@ export function ThreadSidebar({
   onClose?: () => void;
   onOpenFull?: () => void;
   showTaskSummary?: boolean;
+  /** Set where the task's own view (transcript, review pane) is mounted beside
+   *  this dock, so activity rows can drive it instead of going nowhere. */
+  canOpenInPlace?: boolean;
 }) {
   const collapsed = useThreadPanelStore((s) => s.collapsed);
   const width = useThreadPanelStore((s) => s.width);
@@ -42,6 +46,15 @@ export function ThreadSidebar({
       task_id: taskId,
     });
   };
+  const panelProps = {
+    taskId,
+    channelId,
+    task,
+    onClose,
+    onToggleCollapsed: () => toggleCollapsed(true),
+    onOpenFull,
+    showTaskSummary,
+  };
 
   if (collapsed) {
     return (
@@ -64,15 +77,11 @@ export function ThreadSidebar({
       setIsResizing={setIsResizing}
       side="right"
     >
-      <Panel
-        taskId={taskId}
-        channelId={channelId}
-        task={task}
-        onClose={onClose}
-        onToggleCollapsed={() => toggleCollapsed(true)}
-        onOpenFull={onOpenFull}
-        showTaskSummary={showTaskSummary}
-      />
+      {channelsLayout ? (
+        <ActivityPanel {...panelProps} canOpenInPlace={canOpenInPlace} />
+      ) : (
+        <ThreadPanel {...panelProps} />
+      )}
     </ResizableSidebar>
   );
 }
diff --git a/packages/ui/src/features/canvas/components/ThreadTimestamp.tsx b/packages/ui/src/features/canvas/components/ThreadTimestamp.tsx
index ef754f19e8..6d4a9483ed 100644
--- a/packages/ui/src/features/canvas/components/ThreadTimestamp.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadTimestamp.tsx
@@ -24,6 +24,10 @@ function formatTooltip(date: Date): string {
   return `${month} ${ordinal(date.getDate())} at ${formatClock(date)}`;
 }
 
+// Sits next to the actor rather than out at the row's right edge, a step below the
+// 13px row copy. Sized here rather than by an ancestor
+// `[data-slot=thread-item-timestamp]` rule: `TooltipTrigger` replaces the wrapped
+// element's `data-slot` with its own, so such a rule never matches.
 export function ThreadTimestamp({ dateTime }: { dateTime: string }) {
   const date = new Date(dateTime);
   if (Number.isNaN(date.getTime())) return null;
@@ -33,7 +37,10 @@ export function ThreadTimestamp({ dateTime }: { dateTime: string }) {
       <Tooltip>
         <TooltipTrigger
           render={
-            <ThreadItemTimestamp dateTime={dateTime}>
+            <ThreadItemTimestamp
+              dateTime={dateTime}
+              className="shrink-0 text-[11px]"
+            >
               {formatClock(date)}
             </ThreadItemTimestamp>
           }
diff --git a/packages/ui/src/features/code-review/openPrInReview.ts b/packages/ui/src/features/code-review/openPrInReview.ts
new file mode 100644
index 0000000000..88c425e698
--- /dev/null
+++ b/packages/ui/src/features/code-review/openPrInReview.ts
@@ -0,0 +1,10 @@
+import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
+
+/** Open a PR in the task's in-app review pane. Callers that also offer an
+ *  "open on GitHub" affordance pair this with `openExternalUrl`. */
+export function openPrInReview(taskId: string, safeUrl: string): void {
+  const { setSelectedPrUrl, setReviewMode } =
+    useReviewNavigationStore.getState();
+  setSelectedPrUrl(taskId, safeUrl);
+  setReviewMode(taskId, "split");
+}
diff --git a/packages/ui/src/features/sessions/components/ConversationView.tsx b/packages/ui/src/features/sessions/components/ConversationView.tsx
index b19331cfa0..6adcfcf522 100644
--- a/packages/ui/src/features/sessions/components/ConversationView.tsx
+++ b/packages/ui/src/features/sessions/components/ConversationView.tsx
@@ -64,6 +64,7 @@ import {
   useGroupOverrides,
   useSessionViewActions,
 } from "@posthog/ui/features/sessions/sessionViewStore";
+import { useThreadScrollRequest } from "@posthog/ui/features/sessions/threadNavigationStore";
 import { SessionTaskIdProvider } from "@posthog/ui/features/sessions/useSessionTaskId";
 import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { SkillButtonActionMessage } from "@posthog/ui/features/skill-buttons/components/SkillButtonActionMessage";
@@ -353,6 +354,10 @@ export function ConversationView({
     [userMessages, scrollToUserMessage],
   );
 
+  // The Activity timeline lives in a sibling pane, so it asks for the jump
+  // through the store rather than reaching in here.
+  useThreadScrollRequest(taskId, handleJumpToMessage);
+
   const handleScrollStateChange = useCallback((isAtBottom: boolean) => {
     isAtBottomRef.current = isAtBottom;
     setShowScrollButton(!isAtBottom);
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 15c7019086..6a80be72ab 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -90,6 +90,7 @@ import {
   useOptimisticItemsForTask,
   useSessionIsCloud,
 } from "@posthog/ui/features/sessions/sessionStore";
+import { useThreadScrollRequest } from "@posthog/ui/features/sessions/threadNavigationStore";
 import type { UserMessageAttachment } from "@posthog/ui/features/sessions/userMessageTypes";
 import {
   SessionTaskIdProvider,
@@ -965,6 +966,21 @@ export interface ChatThreadProps extends SharedChatThreadProps {
   events: AgentConversationEvent[];
 }
 
+/** Serves scroll-to-message requests from panes outside this tree (the Activity
+ *  timeline). Sits inside `ChatMessageScrollerProvider` so it can fall back to the
+ *  engine's `scrollToMessage`, which the windowed body's own jump replaces. */
+function ThreadScrollRequestBridge({
+  taskId,
+  jumpToMessage,
+}: {
+  taskId?: string;
+  jumpToMessage?: (id: string) => void;
+}) {
+  const { scrollToMessage } = useChatMessageScroller();
+  useThreadScrollRequest(taskId, jumpToMessage ?? scrollToMessage);
+  return null;
+}
+
 export interface AcpChatThreadProps extends SharedChatThreadProps {
   events: AcpMessage[];
 }
@@ -1154,15 +1170,21 @@ function ChatThreadRenderer({
   // The nav layer sits beside the scroll body so it can be handed the windowed body's jump
   // implementation — the engine's `scrollToMessage` only reaches mounted rows.
   const renderNav = (jumpToMessage?: (id: string) => void) => (
-    <ThreadKeyboardNav
-      items={items}
-      jumpPickerOpen={jumpPickerOpen}
-      setJumpPickerOpen={setJumpPickerOpen}
-      keyboardFocusedMessageId={keyboardFocusedMessageId}
-      setKeyboardFocusedMessageId={setKeyboardFocusedMessageId}
-      promptRecallRef={promptRecallRef}
-      jumpToMessage={jumpToMessage}
-    />
+    <>
+      <ThreadKeyboardNav
+        items={items}
+        jumpPickerOpen={jumpPickerOpen}
+        setJumpPickerOpen={setJumpPickerOpen}
+        keyboardFocusedMessageId={keyboardFocusedMessageId}
+        setKeyboardFocusedMessageId={setKeyboardFocusedMessageId}
+        promptRecallRef={promptRecallRef}
+        jumpToMessage={jumpToMessage}
+      />
+      <ThreadScrollRequestBridge
+        taskId={taskId}
+        jumpToMessage={jumpToMessage}
+      />
+    </>
   );
 
   return (
diff --git a/packages/ui/src/features/sessions/threadNavigationStore.test.ts b/packages/ui/src/features/sessions/threadNavigationStore.test.ts
new file mode 100644
index 0000000000..22ccbc91b6
--- /dev/null
+++ b/packages/ui/src/features/sessions/threadNavigationStore.test.ts
@@ -0,0 +1,46 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  useThreadNavigationStore,
+  useThreadScrollRequest,
+} from "./threadNavigationStore";
+
+beforeEach(() => {
+  useThreadNavigationStore.setState({ scrollRequests: {} });
+});
+
+describe("useThreadScrollRequest", () => {
+  it("serves a request from another pane and consumes it", () => {
+    const jump = vi.fn();
+    renderHook(() => useThreadScrollRequest("task-1", jump));
+
+    act(() => {
+      useThreadNavigationStore
+        .getState()
+        .requestScrollToMessage("task-1", "turn-10-1-user");
+    });
+
+    expect(jump).toHaveBeenCalledWith("turn-10-1-user");
+    // Cleared, so re-rendering for any other reason can't re-fire the jump and
+    // yank the transcript back.
+    expect(useThreadNavigationStore.getState().scrollRequests["task-1"]).toBe(
+      null,
+    );
+  });
+
+  it("re-fires when the same message is requested again", () => {
+    const jump = vi.fn();
+    renderHook(() => useThreadScrollRequest("task-1", jump));
+    const request = () =>
+      act(() => {
+        useThreadNavigationStore
+          .getState()
+          .requestScrollToMessage("task-1", "turn-10-1-user");
+      });
+
+    request();
+    request();
+
+    expect(jump).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/packages/ui/src/features/sessions/threadNavigationStore.ts b/packages/ui/src/features/sessions/threadNavigationStore.ts
new file mode 100644
index 0000000000..3e8fb3681f
--- /dev/null
+++ b/packages/ui/src/features/sessions/threadNavigationStore.ts
@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { create } from "zustand";
+
+interface ThreadNavigationStoreState {
+  /** taskId → conversation item id the transcript should scroll to, if any. */
+  scrollRequests: Record<string, string | null>;
+}
+
+interface ThreadNavigationStoreActions {
+  requestScrollToMessage: (taskId: string, messageId: string) => void;
+  clearScrollRequest: (taskId: string) => void;
+}
+
+type ThreadNavigationStore = ThreadNavigationStoreState &
+  ThreadNavigationStoreActions;
+
+/**
+ * Lets a pane outside the transcript ask it to scroll to a message — the
+ * Activity timeline sits in a sibling tree, so it can't reach the scroller's
+ * context or the windowed body's jump callback directly. Mirrors
+ * `reviewNavigationStore`'s scroll-request shape: the writer sets a request, the
+ * transcript consumes it and clears it.
+ */
+export const useThreadNavigationStore = create<ThreadNavigationStore>()(
+  (set) => ({
+    scrollRequests: {},
+
+    requestScrollToMessage: (taskId, messageId) =>
+      set((state) => ({
+        scrollRequests: { ...state.scrollRequests, [taskId]: messageId },
+      })),
+
+    clearScrollRequest: (taskId) =>
+      set((state) => ({
+        scrollRequests: { ...state.scrollRequests, [taskId]: null },
+      })),
+  }),
+);
+
+/**
+ * Consumes a pending request for this task, handing it to the transcript's own
+ * jump and clearing it. Each transcript jumps differently (DOM registry,
+ * virtualizer index, grouped-row index), so the store carries only the target.
+ */
+export function useThreadScrollRequest(
+  taskId: string | undefined,
+  jumpToMessage: (messageId: string) => void,
+): void {
+  const requestedMessageId = useThreadNavigationStore((state) =>
+    taskId ? state.scrollRequests[taskId] : null,
+  );
+
+  useEffect(() => {
+    if (!taskId || !requestedMessageId) return;
+    jumpToMessage(requestedMessageId);
+    // Clear via getState so the action isn't an effect dependency.
+    useThreadNavigationStore.getState().clearScrollRequest(taskId);
+  }, [taskId, requestedMessageId, jumpToMessage]);
+}
diff --git a/packages/ui/src/router/routes/website/$channelId/tasks/$taskId.tsx b/packages/ui/src/router/routes/website/$channelId/tasks/$taskId.tsx
index 6491430682..b3c8bfb174 100644
--- a/packages/ui/src/router/routes/website/$channelId/tasks/$taskId.tsx
+++ b/packages/ui/src/router/routes/website/$channelId/tasks/$taskId.tsx
@@ -119,6 +119,7 @@ function ChannelTaskDetailRoute() {
         channelId={channelId}
         task={task}
         showTaskSummary={false}
+        canOpenInPlace
       />
     </div>
   );