diff --git a/packages/api-client/src/posthog-client.ts b/packages/api-client/src/posthog-client.ts
index 5007ffc495..d60e422a70 100644
--- a/packages/api-client/src/posthog-client.ts
+++ b/packages/api-client/src/posthog-client.ts
@@ -199,6 +199,44 @@ export interface TaskSessionStorageAccess {
   content_sha256: string | null;
 }
 
+export interface ResourceCommentUser {
+  id: number;
+  uuid: string;
+  first_name?: string;
+  last_name?: string;
+  email: string;
+}
+
+/**
+ * The commentable resources this client knows how to address. `scope` is a
+ * free-form column on the backend `Comment` model, so adding a resource is a
+ * new member here plus a caller — no migration and no endpoint.
+ */
+export type CommentScope = "task_artifact" | "desktop_canvas" | "task";
+
+/** A row from the generic comments API. Named `Resource*` so it never collides
+ *  with the DOM's global `Comment` type. */
+export interface ResourceComment {
+  id: string;
+  created_by: ResourceCommentUser | null;
+  content: string | null;
+  created_at: string;
+  item_id: string | null;
+  item_context: unknown;
+  scope: string;
+  source_comment: string | null;
+  completed_at?: string | null;
+}
+
+export interface CreateResourceCommentRequest {
+  scope: CommentScope;
+  itemId: string;
+  content: string;
+  context: unknown;
+  sourceCommentId?: string;
+  mentions?: number[];
+}
+
 /** Thrown when the backend rejects a cloud run with a 429 usage-limit error. */
 export class CloudUsageLimitError extends Error {
   limitType: UsageLimitType;
@@ -3329,6 +3367,47 @@ export class PostHogAPIClient {
     return data.url;
   }
 
+  async getResourceComments(
+    scope: CommentScope,
+    itemId: string,
+  ): Promise<ResourceComment[]> {
+    const teamId = await this.getTeamId();
+    const comments: ResourceComment[] = [];
+    let cursor: string | undefined;
+    do {
+      const page = await this.api.get("/api/projects/{project_id}/comments/", {
+        path: { project_id: String(teamId) },
+        query: { scope, item_id: itemId, cursor },
+      });
+      comments.push(...(page.results as unknown as ResourceComment[]));
+      cursor = page.next
+        ? (new URL(page.next).searchParams.get("cursor") ?? undefined)
+        : undefined;
+    } while (cursor);
+    return comments;
+  }
+
+  async createResourceComment(
+    request: CreateResourceCommentRequest,
+  ): Promise<ResourceComment> {
+    const teamId = await this.getTeamId();
+    const payload = {
+      content: request.content,
+      scope: request.scope,
+      item_id: request.itemId,
+      item_context: request.context,
+      source_comment: request.sourceCommentId ?? null,
+      mentions: request.mentions ?? [],
+      // Resolution is represented by a thread-state reply so this stays on the
+      // same PAT-compatible write path as ordinary comments.
+      is_task: false,
+    };
+    return (await this.api.post("/api/projects/{project_id}/comments/", {
+      path: { project_id: String(teamId) },
+      body: payload as unknown as Schemas.Comment,
+    })) as unknown as ResourceComment;
+  }
+
   async getTaskSessionStorageAccess(
     taskId: string,
     runId: string,
diff --git a/packages/core/src/comments/anchors.test.ts b/packages/core/src/comments/anchors.test.ts
new file mode 100644
index 0000000000..fb72a8ee45
--- /dev/null
+++ b/packages/core/src/comments/anchors.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import {
+  createTextCommentAnchor,
+  isThreadResolved,
+  resolveTextCommentAnchor,
+} from "./anchors";
+
+describe("artifact text anchors", () => {
+  it("creates and resolves a verified positional anchor", () => {
+    const text = "Before selected words after";
+    const anchor = createTextCommentAnchor(text, 7, 21);
+
+    if (!anchor) throw new Error("Expected an anchor");
+    expect(resolveTextCommentAnchor(text, anchor)).toEqual({
+      start: 7,
+      end: 21,
+      status: "exact",
+    });
+  });
+
+  it("reanchors a quote after surrounding content changes", () => {
+    const original = "Before selected words after";
+    const anchor = createTextCommentAnchor(original, 7, 21);
+    if (!anchor) throw new Error("Expected an anchor");
+    const changed = `New introduction. ${original}`;
+
+    expect(resolveTextCommentAnchor(changed, anchor)).toEqual({
+      start: 25,
+      end: 39,
+      status: "reanchored",
+    });
+  });
+
+  it("uses context to disambiguate repeated quotes", () => {
+    const original = "first repeated phrase then second repeated phrase end";
+    const start = original.lastIndexOf("repeated phrase");
+    const anchor = createTextCommentAnchor(
+      original,
+      start,
+      start + "repeated phrase".length,
+    );
+    if (!anchor) throw new Error("Expected an anchor");
+    const changed = `prefix ${original}`;
+
+    expect(resolveTextCommentAnchor(changed, anchor)?.start).toBe(
+      changed.lastIndexOf("repeated phrase"),
+    );
+  });
+
+  it("orphans deleted and ambiguous text instead of guessing", () => {
+    const deleted = createTextCommentAnchor("unique text", 0, 6);
+    if (!deleted) throw new Error("Expected an anchor");
+    expect(resolveTextCommentAnchor("replacement", deleted)).toBeNull();
+
+    const ambiguous = {
+      kind: "text" as const,
+      quote: "same",
+      prefix: "",
+      suffix: "",
+      start: 100,
+      end: 104,
+    };
+    expect(resolveTextCommentAnchor("same x same", ambiguous)).toBeNull();
+  });
+
+  it("rejects whitespace-only selections", () => {
+    expect(createTextCommentAnchor("a   b", 1, 4)).toBeNull();
+  });
+
+  it("uses the latest thread-state event for resolution", () => {
+    const root = { completed_at: null };
+    const event = (state: "resolved" | "open", created_at: string) => ({
+      created_at,
+      item_context: {
+        anchor: { kind: "document" as const },
+        threadState: state,
+      },
+    });
+
+    expect(
+      isThreadResolved(root, [
+        event("resolved", "2026-01-01T00:00:00Z"),
+        event("open", "2026-01-01T00:01:00Z"),
+      ]),
+    ).toBe(false);
+    expect(
+      isThreadResolved(root, [
+        event("open", "2026-01-01T00:00:00Z"),
+        event("resolved", "2026-01-01T00:01:00Z"),
+      ]),
+    ).toBe(true);
+  });
+});
diff --git a/packages/core/src/comments/anchors.ts b/packages/core/src/comments/anchors.ts
new file mode 100644
index 0000000000..6dfc25b8c6
--- /dev/null
+++ b/packages/core/src/comments/anchors.ts
@@ -0,0 +1,182 @@
+import type { CommentScope } from "@posthog/api-client/posthog-client";
+import { z } from "zod";
+
+const CONTEXT_LENGTH = 32;
+
+/**
+ * Addresses one commentable thing. `itemId` must be the resource's STABLE id
+ * (an artifact id, a canvas row id) — never a name or a version, so comments
+ * survive renames and reverts.
+ */
+export type CommentTarget = {
+  scope: CommentScope;
+  itemId: string;
+};
+
+/** The target as one string, for map keys and cache-key membership tests. */
+export function commentTargetKey(target: CommentTarget): string {
+  return `${target.scope}:${target.itemId}`;
+}
+
+export function isSameCommentTarget(
+  a: CommentTarget | null,
+  b: CommentTarget | null,
+): boolean {
+  return a?.scope === b?.scope && a?.itemId === b?.itemId;
+}
+
+export const textCommentAnchorSchema = z.object({
+  kind: z.literal("text"),
+  quote: z.string().min(1),
+  prefix: z.string(),
+  suffix: z.string(),
+  start: z.number().int().nonnegative(),
+  end: z.number().int().positive(),
+});
+
+export const regionCommentAnchorSchema = z.object({
+  kind: z.literal("region"),
+  x: z.number().min(0).max(1),
+  y: z.number().min(0).max(1),
+  width: z.number().min(0).max(1),
+  height: z.number().min(0).max(1),
+});
+
+const documentCommentAnchorSchema = z.object({
+  kind: z.literal("document"),
+});
+
+export const commentAnchorSchema = z.discriminatedUnion("kind", [
+  textCommentAnchorSchema,
+  regionCommentAnchorSchema,
+  documentCommentAnchorSchema,
+]);
+
+export type TextCommentAnchor = z.infer<typeof textCommentAnchorSchema>;
+export type RegionCommentAnchor = z.infer<typeof regionCommentAnchorSchema>;
+export type CommentAnchor = z.infer<typeof commentAnchorSchema>;
+
+export const commentContextSchema = z.object({
+  anchor: commentAnchorSchema,
+  threadState: z.enum(["resolved", "open"]).optional(),
+  // The task the commented resource belongs to. Artifact and canvas ids live in a run's
+  // JSON rather than a table, so the server can't get back to the task without being told.
+  taskId: z.string().optional(),
+});
+
+export type CommentContext = z.infer<typeof commentContextSchema>;
+
+export function parseCommentContext(value: unknown): CommentContext | null {
+  const parsed = commentContextSchema.safeParse(value);
+  return parsed.success ? parsed.data : null;
+}
+
+export type ThreadStateComment = {
+  created_at: string;
+  item_context: unknown;
+};
+
+export function isThreadResolved(
+  root: { completed_at?: string | null },
+  replies: ThreadStateComment[],
+): boolean {
+  const latestState = replies
+    .map((comment) => ({
+      createdAt: comment.created_at,
+      state: parseCommentContext(comment.item_context)?.threadState,
+    }))
+    .filter(
+      (
+        entry,
+      ): entry is {
+        createdAt: string;
+        state: "resolved" | "open";
+      } => !!entry.state,
+    )
+    .sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+    .at(-1)?.state;
+  return latestState ? latestState === "resolved" : !!root.completed_at;
+}
+
+export type ResolvedTextAnchor = {
+  start: number;
+  end: number;
+  status: "exact" | "reanchored";
+};
+
+export function createTextCommentAnchor(
+  text: string,
+  start: number,
+  end: number,
+): TextCommentAnchor | null {
+  const safeStart = Math.max(0, Math.min(start, text.length));
+  const safeEnd = Math.max(safeStart, Math.min(end, text.length));
+  const quote = text.slice(safeStart, safeEnd);
+  if (!quote.trim()) return null;
+
+  return {
+    kind: "text",
+    quote,
+    prefix: text.slice(Math.max(0, safeStart - CONTEXT_LENGTH), safeStart),
+    suffix: text.slice(safeEnd, safeEnd + CONTEXT_LENGTH),
+    start: safeStart,
+    end: safeEnd,
+  };
+}
+
+function candidateScore(
+  text: string,
+  start: number,
+  anchor: TextCommentAnchor,
+): number {
+  const prefix = text.slice(Math.max(0, start - anchor.prefix.length), start);
+  const end = start + anchor.quote.length;
+  const suffix = text.slice(end, end + anchor.suffix.length);
+  let score = 0;
+  if (anchor.prefix && prefix === anchor.prefix) score += 2;
+  if (anchor.suffix && suffix === anchor.suffix) score += 2;
+  return score;
+}
+
+/**
+ * Resolve a persisted text quote without ever guessing. The stored position is
+ * verified first. If content moved, prefix/suffix disambiguate quote matches;
+ * ties are deliberately treated as orphaned.
+ */
+export function resolveTextCommentAnchor(
+  text: string,
+  anchor: TextCommentAnchor,
+): ResolvedTextAnchor | null {
+  if (text.slice(anchor.start, anchor.end) === anchor.quote) {
+    return { start: anchor.start, end: anchor.end, status: "exact" };
+  }
+
+  const candidates: number[] = [];
+  let from = 0;
+  while (from <= text.length - anchor.quote.length) {
+    const match = text.indexOf(anchor.quote, from);
+    if (match < 0) break;
+    candidates.push(match);
+    from = match + Math.max(anchor.quote.length, 1);
+  }
+  if (candidates.length === 0) return null;
+  if (candidates.length === 1) {
+    const start = candidates[0];
+    return {
+      start,
+      end: start + anchor.quote.length,
+      status: "reanchored",
+    };
+  }
+
+  const ranked = candidates
+    .map((start) => ({ start, score: candidateScore(text, start, anchor) }))
+    .sort((a, b) => b.score - a.score);
+  if (ranked[0].score === 0 || ranked[0].score === ranked[1].score) return null;
+
+  return {
+    start: ranked[0].start,
+    end: ranked[0].start + anchor.quote.length,
+    status: "reanchored",
+  };
+}
diff --git a/packages/core/src/panels/panelStoreHelpers.ts b/packages/core/src/panels/panelStoreHelpers.ts
index 2b41453240..aaff4ad4b2 100644
--- a/packages/core/src/panels/panelStoreHelpers.ts
+++ b/packages/core/src/panels/panelStoreHelpers.ts
@@ -62,6 +62,35 @@ export function getLeafPanel(
   return panel?.type === "leaf" ? panel : null;
 }
 
+/**
+ * The artifact the user is looking at, if any: the focused panel's active tab
+ * when that is an artifact, else any other panel's. Lets a pane elsewhere (the
+ * task's comment list) narrow itself to whatever is on screen.
+ */
+export function activeArtifactId(layout: TaskLayout): string | null {
+  const activeArtifact = (node: PanelNode): string | null => {
+    if (node.type !== "leaf") {
+      for (const child of node.children) {
+        const found = activeArtifact(child);
+        if (found) return found;
+      }
+      return null;
+    }
+    const active = node.content.tabs.find(
+      (tab) => tab.id === node.content.activeTabId,
+    );
+    return active?.data.type === "artifact" ? active.data.artifactId : null;
+  };
+
+  const focused = layout.focusedPanelId
+    ? getLeafPanel(layout.panelTree, layout.focusedPanelId)
+    : null;
+  return (
+    (focused ? activeArtifact(focused) : null) ??
+    activeArtifact(layout.panelTree)
+  );
+}
+
 export function getGroupPanel(
   tree: PanelNode,
   panelId: string,
diff --git a/packages/core/src/sessions/sessionService.ts b/packages/core/src/sessions/sessionService.ts
index cf2da4368c..bec00dc566 100644
--- a/packages/core/src/sessions/sessionService.ts
+++ b/packages/core/src/sessions/sessionService.ts
@@ -9,6 +9,10 @@ import type {
   SessionConfigSelectOption,
   SessionUpdate,
 } from "@agentclientprotocol/sdk";
+import type {
+  CreateResourceCommentRequest,
+  ResourceComment,
+} from "@posthog/api-client/posthog-client";
 import {
   type AcpMessage,
   type Adapter,
@@ -49,6 +53,7 @@ import {
   isTerminalStatus,
   type Task,
 } from "@posthog/shared/domain-types";
+import type { CommentTarget } from "../comments/anchors";
 import type { SpeechKind, SpeechSource } from "../speech/identifiers";
 import {
   CONTEXT_WINDOW_OPTION_CATEGORY,
@@ -7489,6 +7494,49 @@ export class SessionService {
     }
   }
 
+  async getResourceComments(target: CommentTarget): Promise<ResourceComment[]> {
+    const authStatus = await this.getAuthCredentialsStatus();
+    if (authStatus.kind !== "ready") return [];
+    return authStatus.auth.client.getResourceComments(
+      target.scope,
+      target.itemId,
+    );
+  }
+
+  /**
+   * Comments for several resources at once, for surfaces that centralize threads
+   * across a task's artifacts and canvases. Returns one flat list — every row
+   * already carries `scope` and `item_id`, so callers group without bookkeeping.
+   * Fanning out here (rather than in a hook) keeps the multi-source read in a
+   * service and lets the caller hold a single query.
+   */
+  async getResourceCommentsForTargets(
+    targets: CommentTarget[],
+  ): Promise<ResourceComment[]> {
+    const authStatus = await this.getAuthCredentialsStatus();
+    if (authStatus.kind !== "ready" || targets.length === 0) return [];
+    const client = authStatus.auth.client;
+    const pages = await Promise.all(
+      targets.map((target) =>
+        client
+          .getResourceComments(target.scope, target.itemId)
+          // One unreadable resource must not blank the whole pane.
+          .catch(() => [] as ResourceComment[]),
+      ),
+    );
+    return pages.flat();
+  }
+
+  async createResourceComment(
+    request: CreateResourceCommentRequest,
+  ): Promise<ResourceComment> {
+    const authStatus = await this.getAuthCredentialsStatus();
+    if (authStatus.kind !== "ready") {
+      throw new Error("Sign in to comment");
+    }
+    return authStatus.auth.client.createResourceComment(request);
+  }
+
   async getCloudRunArtifacts(
     taskId: string,
     runId: string,
diff --git a/packages/ui/src/features/canvas/components/ActivityPanel.test.tsx b/packages/ui/src/features/canvas/components/ActivityPanel.test.tsx
new file mode 100644
index 0000000000..202ba3bca5
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ActivityPanel.test.tsx
@@ -0,0 +1,170 @@
+import type { Task } from "@posthog/shared/domain-types";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type MockInstance,
+  vi,
+} from "vitest";
+
+vi.mock("@posthog/ui/features/canvas/hooks/useThreadConversation", () => ({
+  useThreadConversation: () => ({
+    timeline: [],
+    agentStatus: null,
+    events: [],
+    isPromptPending: false,
+    isReady: true,
+    members: [],
+    currentUser: null,
+    isTaskAuthor: true,
+    canForward: true,
+    draft: "",
+    setDraft: vi.fn(),
+    isSubmitDisabled: false,
+    submit: vi.fn(),
+    sendMessageToAgent: vi.fn(),
+    deleteMessage: vi.fn(),
+    onMentionInsert: vi.fn(),
+  }),
+}));
+vi.mock("@posthog/ui/features/canvas/components/ActivityTimeline", () => ({
+  ActivityTimeline: () => <div>timeline body</div>,
+}));
+vi.mock("@posthog/ui/features/canvas/components/TaskArtifactsList", () => ({
+  TaskArtifactsList: () => <div>artifacts body</div>,
+}));
+vi.mock("@posthog/ui/features/canvas/components/TaskCommentsList", () => ({
+  TaskCommentsList: () => <div>comments body</div>,
+}));
+vi.mock("@posthog/ui/features/canvas/components/ChannelFeedView", () => ({
+  TaskCard: () => <div>task card</div>,
+}));
+vi.mock("@posthog/ui/features/canvas/components/ThreadPanel", () => ({
+  AgentStatusLine: () => <div>agent status</div>,
+  ThreadLoadingState: () => <div>loading</div>,
+  ThreadReplyComposer: () => <div>composer</div>,
+}));
+vi.mock("@posthog/ui/features/tasks/queries", () => ({
+  taskDetailQuery: () => ({ queryKey: ["task"], queryFn: vi.fn() }),
+}));
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: () => ({ data: undefined }),
+}));
+vi.mock("@posthog/ui/shell/analytics", () => ({ track: vi.fn() }));
+
+import { useCommentNavigationStore } from "@posthog/ui/features/sessions/commentNavigationStore";
+import { ActivityPanel } from "./ActivityPanel";
+
+const task = { id: "task-1", title: "Ship it" } as unknown as Task;
+
+function renderPanel(taskId = "task-1") {
+  return render(
+    <ActivityPanel
+      taskId={taskId}
+      channelId="channel-1"
+      task={{ ...task, id: taskId }}
+      showTaskSummary={false}
+    />,
+  );
+}
+
+describe("ActivityPanel", () => {
+  let scrollTo: MockInstance;
+
+  beforeEach(() => {
+    scrollTo = vi.spyOn(Element.prototype, "scrollTo");
+    useCommentNavigationStore.setState({
+      focusByTask: {},
+      resolutionsByTarget: {},
+    });
+  });
+
+  afterEach(() => {
+    scrollTo.mockRestore();
+  });
+
+  it("offers comments as a third tab beside the timeline and artifacts", () => {
+    renderPanel();
+
+    expect(screen.getByRole("tab", { name: "Timeline" })).toBeTruthy();
+    expect(screen.getByRole("tab", { name: "Artifacts" })).toBeTruthy();
+    fireEvent.click(screen.getByRole("tab", { name: "Comments" }));
+
+    expect(screen.getByText("comments body")).toBeTruthy();
+    // The composer belongs to the conversation, not to a list of threads.
+    expect(screen.queryByText("composer")).toBeNull();
+  });
+
+  // A thread picked on the artifact itself lands in this tab, so the pick has
+  // to bring the tab with it.
+  it("switches to comments when a thread is picked elsewhere", () => {
+    renderPanel();
+    expect(screen.getByText("timeline body")).toBeTruthy();
+
+    act(() =>
+      useCommentNavigationStore
+        .getState()
+        .requestCommentFocus(
+          "task-1",
+          { scope: "task_artifact", itemId: "artifact-1" },
+          "comment-1",
+        ),
+    );
+
+    expect(screen.getByText("comments body")).toBeTruthy();
+  });
+
+  it("leaves a focus request for another task alone", () => {
+    renderPanel();
+
+    act(() =>
+      useCommentNavigationStore
+        .getState()
+        .requestCommentFocus(
+          "task-2",
+          { scope: "task_artifact", itemId: "artifact-1" },
+          "comment-1",
+        ),
+    );
+
+    expect(screen.getByText("timeline body")).toBeTruthy();
+  });
+
+  // A focus left over from an earlier visit must not hijack the panel, and the
+  // panel is reused across tasks without remounting.
+  it("does not open comments for a focus that predates the task", () => {
+    useCommentNavigationStore
+      .getState()
+      .requestCommentFocus(
+        "task-2",
+        { scope: "task_artifact", itemId: "artifact-1" },
+        "comment-1",
+      );
+    const { rerender } = renderPanel("task-1");
+
+    rerender(
+      <ActivityPanel
+        taskId="task-2"
+        channelId="channel-1"
+        task={{ ...task, id: "task-2" }}
+        showTaskSummary={false}
+      />,
+    );
+
+    expect(screen.getByText("timeline body")).toBeTruthy();
+  });
+
+  // Only the timeline reads bottom-up; the thread lists put what matters on top.
+  it("keeps the comments list where it was scrolled to", () => {
+    renderPanel();
+    expect(scrollTo).toHaveBeenCalled();
+    const timelineScrolls = scrollTo.mock.calls.length;
+
+    fireEvent.click(screen.getByRole("tab", { name: "Comments" }));
+
+    expect(scrollTo.mock.calls.length).toBe(timelineScrolls);
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/ActivityPanel.tsx b/packages/ui/src/features/canvas/components/ActivityPanel.tsx
index c59a26979b..cda7bc4dfa 100644
--- a/packages/ui/src/features/canvas/components/ActivityPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityPanel.tsx
@@ -9,23 +9,26 @@ import type { Task } from "@posthog/shared/domain-types";
 import { ActivityTimeline } from "@posthog/ui/features/canvas/components/ActivityTimeline";
 import { TaskCard } from "@posthog/ui/features/canvas/components/ChannelFeedView";
 import { TaskArtifactsList } from "@posthog/ui/features/canvas/components/TaskArtifactsList";
+import { TaskCommentsList } from "@posthog/ui/features/canvas/components/TaskCommentsList";
 import {
   AgentStatusLine,
   ThreadLoadingState,
   ThreadReplyComposer,
 } from "@posthog/ui/features/canvas/components/ThreadPanel";
 import { useThreadConversation } from "@posthog/ui/features/canvas/hooks/useThreadConversation";
+import { useCommentNavigationStore } from "@posthog/ui/features/sessions/commentNavigationStore";
 import { buildConversationItems } from "@posthog/ui/features/sessions/components/buildConversationItems";
 import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
 import { track } from "@posthog/ui/shell/analytics";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-type ActivityTab = "timeline" | "artifacts";
+type ActivityTab = "timeline" | "artifacts" | "comments";
 
 const ACTIVITY_TABS: readonly { key: ActivityTab; label: string }[] = [
   { key: "timeline", label: "Timeline" },
   { key: "artifacts", label: "Artifacts" },
+  { key: "comments", label: "Comments" },
 ] as const;
 
 /** The 32px row this panel leads with: the tabs are the header, so the strip
@@ -161,15 +164,41 @@ function ActivityConversation({
     [tab, events, isPromptPending],
   );
 
+  // A thread picked on the artifact itself lives in the Comments tab, so the
+  // pick has to bring the tab with it. Only a fresh request switches tabs: a
+  // focus left over from an earlier visit must not hijack the panel on mount.
+  const commentFocus = useCommentNavigationStore(
+    (state) => state.focusByTask[taskId],
+  );
+  // Tracks the task too: this panel is reused across tasks without remounting,
+  // so a nonce seen for the previous task says nothing about this one.
+  const seenFocus = useRef({ taskId, nonce: commentFocus?.nonce });
+  // Adjust during render rather than in an effect, so the panel never commits a
+  // stale tab before switching. A new task resets the baseline (an old focus
+  // must not hijack it); a fresh focus nonce for this task brings the Comments
+  // tab with the pick.
+  if (seenFocus.current.taskId !== taskId) {
+    seenFocus.current = { taskId, nonce: commentFocus?.nonce };
+  } else if (commentFocus && commentFocus.nonce !== seenFocus.current.nonce) {
+    seenFocus.current = { taskId, nonce: commentFocus.nonce };
+    // Not handleTabChange: a programmatic switch isn't a user tab change.
+    setTab("comments");
+  }
+
   const scrollRef = useRef<HTMLDivElement>(null);
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when rendered thread content changes
   useEffect(() => {
+    // Only the timeline reads bottom-up; the other tabs put what matters on top.
+    if (tab !== "timeline") return;
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
   }, [timeline, events.length, agentStatus?.phase, tab]);
 
   const showComposer = tab === "timeline";
 
   const body = () => {
+    if (tab === "comments") {
+      return <TaskCommentsList task={task} timeline={timeline} />;
+    }
     if (tab === "artifacts") {
       return (
         <TaskArtifactsList
diff --git a/packages/ui/src/features/canvas/components/MentionComposer.tsx b/packages/ui/src/features/canvas/components/MentionComposer.tsx
index df0826b994..71b1b95dfd 100644
--- a/packages/ui/src/features/canvas/components/MentionComposer.tsx
+++ b/packages/ui/src/features/canvas/components/MentionComposer.tsx
@@ -29,6 +29,8 @@ interface MentionComposerProps {
   placeholder?: string;
   rows?: number;
   inputClassName?: string;
+  /** Put the caret in the editor on mount, for a composer the user just opened. */
+  autoFocus?: boolean;
   /** Rendered inside the input group after the editor (send button etc.). */
   children?: ReactNode;
 }
@@ -57,6 +59,7 @@ export function MentionComposer({
   onValueChange,
   onSubmit,
   members,
+  autoFocus = false,
   allowAgentMention = false,
   onMentionInsert,
   placeholder,
@@ -99,6 +102,7 @@ export function MentionComposer({
 
   const editor = useEditor(
     {
+      autofocus: autoFocus ? "end" : false,
       extensions: [
         StarterKit.configure({
           heading: false,
diff --git a/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx b/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
index cb0a58dc56..c91f8062e5 100644
--- a/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
+++ b/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
@@ -1,5 +1,5 @@
 import type { Task, TaskRun, TaskRunArtifact } from "@posthog/shared";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
@@ -33,6 +33,36 @@ vi.mock("@posthog/ui/features/pr-review/usePrComments", () => ({
 vi.mock("@posthog/ui/features/pr-review/usePrReviewThreads", () => ({
   usePrReviewThreads: () => ({ data: undefined }),
 }));
+vi.mock("@posthog/ui/features/sessions/components/useComments", () => ({
+  useCommentsForTargetsQuery: () => ({
+    data: [
+      {
+        id: "comment-1",
+        source_comment: null,
+        item_id: "a",
+        content: "Tighten this summary",
+        created_at: "2024-01-01T00:00:00Z",
+        item_context: { anchor: { kind: "document" } },
+      },
+      {
+        id: "reply-1",
+        source_comment: "comment-1",
+        item_id: "a",
+        content: "Agreed",
+        created_at: "2024-01-01T00:01:00Z",
+        item_context: { anchor: { kind: "document" } },
+      },
+      {
+        id: "comment-2",
+        source_comment: null,
+        item_id: "a",
+        content: "Second thread",
+        created_at: "2024-01-01T00:02:00Z",
+        item_context: { anchor: { kind: "document" } },
+      },
+    ],
+  }),
+}));
 
 import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
 import { TaskArtifactsList } from "./TaskArtifactsList";
@@ -123,15 +153,29 @@ describe("TaskArtifactsList", () => {
     expect(screen.getByText("Pull request #2")).toBeTruthy();
   });
 
-  it("lists the files the agent uploaded, with their size", () => {
+  it("lists uploaded files with their comment count", () => {
+    mocks.runs = [
+      run("run-1", { artifacts: [outputFile({ id: "a", size: 16861 })] }),
+    ];
+
+    render(<TaskArtifactsList task={task} timeline={[]} />);
+
+    const row = screen.getByText("report.md").closest("button");
+    expect(row).not.toBeNull();
+    expect(within(row as HTMLElement).getByText("2")).toBeTruthy();
+    expect(within(row as HTMLElement).queryByText(/File|KB/)).toBeNull();
+  });
+
+  // The threads themselves live in the Comments tab now, so the pane must not
+  // grow a second list of them.
+  it("leaves the thread list to the Comments tab", () => {
     mocks.runs = [
       run("run-1", { artifacts: [outputFile({ id: "a", size: 16861 })] }),
     ];
 
     render(<TaskArtifactsList task={task} timeline={[]} />);
 
-    expect(screen.getByText("report.md")).toBeTruthy();
-    expect(screen.getByText("File · 17 KB")).toBeTruthy();
+    expect(screen.queryByText("Tighten this summary")).toBeNull();
   });
 
   // The row should read like the chat's file list: markdown looks like
@@ -196,7 +240,7 @@ describe("TaskArtifactsList", () => {
     render(<TaskArtifactsList task={task} timeline={[]} />);
 
     expect(screen.getAllByText("report.md")).toHaveLength(1);
-    expect(screen.getByText("File · 2 KB")).toBeTruthy();
+    expect(screen.queryByText(/File ·|KB/)).toBeNull();
   });
 
   it.each([
diff --git a/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx b/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
index e24ded715d..6a75fd0728 100644
--- a/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
+++ b/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
@@ -1,128 +1,39 @@
 import {
   ArrowSquareOutIcon,
+  ChatCircleIcon,
   PackageIcon,
   SlackLogoIcon,
 } from "@phosphor-icons/react";
-import {
-  OUTPUT_ARTIFACT_TYPES,
-  parseRunArtifacts,
-  type RunArtifact,
-} from "@posthog/core/canvas/runArtifactSchemas";
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
 import type { ThreadTimelineRow } from "@posthog/core/canvas/threadTimeline";
 import {
+  Badge,
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
 } from "@posthog/quill";
-import { readPrUrls } from "@posthog/shared";
-import type {
-  Task,
-  TaskRun,
-  TaskThreadMessage,
-} from "@posthog/shared/domain-types";
+import type { Task, TaskThreadMessage } from "@posthog/shared/domain-types";
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
+import {
+  buildRows,
+  commentTargets,
+  openCanvasFromUrl,
+} from "@posthog/ui/features/canvas/components/taskArtifactRows";
 import { useTaskRuns } from "@posthog/ui/features/canvas/hooks/useTaskRuns";
 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";
 import { usePrReviewThreads } from "@posthog/ui/features/pr-review/usePrReviewThreads";
+import { buildCommentThreads } from "@posthog/ui/features/sessions/components/commentViewTypes";
+import { useCommentsForTargetsQuery } from "@posthog/ui/features/sessions/components/useComments";
 import { FileIcon } from "@posthog/ui/primitives/FileIcon";
 import { openExternalUrl } from "@posthog/ui/shell/openExternal";
-import { formatFileSize } from "@posthog/ui/utils/formatFileSize";
-import { parseHttpsUrl, parseShareLink } from "@posthog/ui/utils/posthogLinks";
-import { navigateToShareTarget } from "@posthog/ui/utils/shareLinks";
-import { getPostHogUrl } from "@posthog/ui/utils/urls";
 import { type ReactNode, useMemo, useState } from "react";
 
-type ArtifactRow =
-  | { kind: "pr"; key: string; url: string }
-  | { kind: "canvas"; key: string; name: string; url: string | null }
-  | {
-      kind: "file";
-      key: string;
-      artifactId: string | null;
-      name: string;
-      runId: string | null;
-      size: number | undefined;
-    }
-  | { kind: "slack"; key: string; url: string };
-
-function readRunOutputs(run: TaskRun): RunArtifact[] {
-  return parseRunArtifacts(
-    (run as { artifacts?: unknown }).artifacts,
-    OUTPUT_ARTIFACT_TYPES,
-  );
-}
-
-function buildRows(
-  task: Task,
-  timeline: ThreadTimelineRow<TaskThreadMessage>[],
-  runs: TaskRun[],
-): ArtifactRow[] {
-  const rows: ArtifactRow[] = [];
-  const seenPrUrls = new Set<string>();
-
-  const addPr = (url: string, key: string) => {
-    if (seenPrUrls.has(url)) return;
-    seenPrUrls.add(url);
-    rows.push({ kind: "pr", key, url });
-  };
-
-  for (const row of timeline) {
-    if (row.kind !== "artifact") continue;
-    if (row.artifact.kind === "pr") {
-      addPr(row.artifact.url, row.message.id);
-    } else {
-      rows.push({
-        kind: "canvas",
-        key: row.message.id,
-        name: row.artifact.name,
-        url: row.artifact.url,
-      });
-    }
-  }
-
-  const allRuns =
-    runs.length > 0 ? runs : task.latest_run ? [task.latest_run] : [];
-
-  // Re-uploading a file replaces it rather than adding a second one: agents
-  // revise a deliverable and upload it again under the same name, so keeping
-  // every copy would bury the current one under its own drafts.
-  const newestByName = new Map<string, { file: RunArtifact; runId: string }>();
-  for (const run of allRuns) {
-    for (const outputPr of readPrUrls(run.output)) {
-      addPr(outputPr, `output-pr:${outputPr}`);
-    }
-    for (const file of readRunOutputs(run)) {
-      if (!file.name) continue;
-      const previous = newestByName.get(file.name);
-      const isNewer =
-        !previous ||
-        (file.uploaded_at ?? "") >= (previous.file.uploaded_at ?? "");
-      if (isNewer) newestByName.set(file.name, { file, runId: run.id });
-    }
-  }
-  for (const [name, { file, runId }] of newestByName) {
-    rows.push({
-      kind: "file",
-      key: `file:${file.id ?? file.storage_path ?? name}`,
-      artifactId: file.id ?? null,
-      name,
-      runId,
-      size: file.size,
-    });
-  }
-
-  const slackUrl = task.latest_run?.state?.slack_thread_url;
-  if (typeof slackUrl === "string" && slackUrl) {
-    rows.push({ kind: "slack", key: "slack-thread", url: slackUrl });
-  }
-
-  return rows;
-}
+const EMPTY_COMMENTS: ResourceComment[] = [];
 
 function ArtifactListRow({
   icon,
@@ -135,7 +46,7 @@ function ArtifactListRow({
 }: {
   icon: ReactNode;
   title: string;
-  detail?: string | null;
+  detail?: ReactNode;
   external?: boolean;
   onOpen?: () => void;
   /** Renders a trailing button that leaves the app instead of opening the
@@ -229,29 +140,30 @@ function PrRow({
   );
 }
 
-function CanvasRow({ name, url }: { name: string; url: string | null }) {
-  const parsed = url ? parseHttpsUrl(url) : null;
-  const target = parsed ? parseShareLink(parsed.href) : null;
-  const open =
-    parsed && target
-      ? () => {
-          const currentPostHogUrl = getPostHogUrl("/");
-          const currentPostHogOrigin = currentPostHogUrl
-            ? parseHttpsUrl(currentPostHogUrl)?.origin
-            : null;
-          if (parsed.origin === currentPostHogOrigin) {
-            navigateToShareTarget(target);
-          } else {
-            openExternalUrl(parsed.href);
-          }
-        }
-      : undefined;
+function CanvasRow({
+  name,
+  url,
+  commentCount,
+}: {
+  name: string;
+  url: string | null;
+  commentCount: number;
+}) {
   return (
     <ArtifactListRow
       icon={iconForTemplate("", { size: 14, className: "text-violet-9" })}
       title={name}
-      detail="Canvas"
-      onOpen={open}
+      detail={
+        commentCount > 0 ? (
+          <Badge>
+            <ChatCircleIcon />
+            {commentCount}
+          </Badge>
+        ) : (
+          "Canvas"
+        )
+      }
+      onOpen={openCanvasFromUrl(url)}
     />
   );
 }
@@ -261,13 +173,14 @@ function FileRow({
   runId,
   artifactId,
   name,
-  size,
+  commentCount,
 }: {
   taskId: string;
   runId: string | null;
   artifactId: string | null;
   name: string;
-  size: number | undefined;
+  /** Supplied by the pane's single comments query so each row doesn't fetch. */
+  commentCount: number;
 }) {
   const openArtifactTab = usePanelLayoutStore((state) => state.openArtifactTab);
   const canOpen = !!runId && !!artifactId;
@@ -284,7 +197,12 @@ function FileRow({
     <ArtifactListRow
       icon={<FileIcon filename={name} size={14} />}
       title={name}
-      detail={["File", formatFileSize(size)].filter(Boolean).join(" · ")}
+      detail={
+        <Badge>
+          <ChatCircleIcon />
+          {commentCount}
+        </Badge>
+      }
       onOpen={onOpen}
     />
   );
@@ -306,6 +224,22 @@ export function TaskArtifactsList({
     () => buildRows(task, timeline, runs),
     [task, timeline, runs],
   );
+  // One query for every row's badge, so N resources cost one request rather
+  // than one per row. The threads themselves live in the Comments tab.
+  const targets = useMemo(() => commentTargets(rows), [rows]);
+  const commentsQuery = useCommentsForTargetsQuery(targets);
+  const comments = commentsQuery.data ?? EMPTY_COMMENTS;
+  // Open threads only, so a row's badge agrees with what the Comments tab
+  // shows on the same resource.
+  const openCountByItem = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const thread of buildCommentThreads(comments)) {
+      const itemId = thread.root.item_id;
+      if (thread.resolved || !itemId) continue;
+      counts.set(itemId, (counts.get(itemId) ?? 0) + 1);
+    }
+    return counts;
+  }, [comments]);
 
   if (rows.length === 0) {
     return (
@@ -334,7 +268,14 @@ export function TaskArtifactsList({
             openInPlaceTaskId={canOpenInPlace ? task.id : undefined}
           />
         ) : row.kind === "canvas" ? (
-          <CanvasRow key={row.key} name={row.name} url={row.url} />
+          <CanvasRow
+            key={row.key}
+            name={row.name}
+            url={row.url}
+            commentCount={
+              row.dashboardId ? (openCountByItem.get(row.dashboardId) ?? 0) : 0
+            }
+          />
         ) : row.kind === "file" ? (
           <FileRow
             key={row.key}
@@ -342,7 +283,9 @@ export function TaskArtifactsList({
             runId={row.runId}
             artifactId={row.artifactId}
             name={row.name}
-            size={row.size}
+            commentCount={
+              row.artifactId ? (openCountByItem.get(row.artifactId) ?? 0) : 0
+            }
           />
         ) : (
           <ArtifactListRow
diff --git a/packages/ui/src/features/canvas/components/TaskCommentsList.test.tsx b/packages/ui/src/features/canvas/components/TaskCommentsList.test.tsx
new file mode 100644
index 0000000000..3f267d7e53
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/TaskCommentsList.test.tsx
@@ -0,0 +1,459 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import type { Task, TaskRun, TaskRunArtifact } from "@posthog/shared";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  runs: [] as TaskRun[],
+  comments: [] as unknown[],
+  activeArtifactId: null as string | null,
+  prConversation: [] as unknown[],
+  prReviewThreads: [] as unknown[],
+  openArtifactTab: vi.fn(),
+  openPrInReview: vi.fn(),
+  openExternalUrl: vi.fn(),
+  requestScrollToFile: vi.fn(),
+  prReply: vi.fn(async () => true),
+  prResolve: vi.fn(async () => true),
+  createComment: vi.fn(),
+  setResolved: vi.fn(),
+  createdFor: [] as unknown[],
+  resolvedFor: [] as unknown[],
+}));
+
+vi.mock("@posthog/ui/features/canvas/hooks/useTaskRuns", () => ({
+  useTaskRuns: () => ({ runs: mocks.runs, isLoading: false }),
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useOrgMembers", () => ({
+  useOrgMembers: () => ({ members: [] }),
+}));
+vi.mock("@posthog/ui/features/panels/panelLayoutStore", () => ({
+  usePanelLayoutStore: () => mocks.openArtifactTab,
+  useActiveArtifactId: () => mocks.activeArtifactId,
+}));
+vi.mock("@posthog/ui/features/pr-review/usePrCommentsForUrls", () => ({
+  usePrCommentsForUrls: (urls: string[]) => ({
+    byUrl: new Map(urls.map((url) => [url, mocks.prConversation])),
+    isLoading: false,
+  }),
+}));
+vi.mock("@posthog/ui/features/pr-review/usePrReviewThreadsForUrls", () => ({
+  usePrReviewThreadsForUrls: (urls: string[]) => ({
+    byUrl: new Map(urls.map((url) => [url, mocks.prReviewThreads])),
+    isLoading: false,
+  }),
+}));
+vi.mock("@posthog/ui/features/git-interaction/usePrDetails", () => ({
+  usePrTitles: () => ({}),
+}));
+vi.mock("@posthog/ui/shell/openExternal", () => ({
+  openExternalUrl: (url: string) => mocks.openExternalUrl(url),
+}));
+// GitHub bodies render through MarkdownRenderer; the wiring under test is the
+// list, not the markdown pipeline, so keep it to plain text here.
+vi.mock("@posthog/ui/features/editor/components/MarkdownRenderer", () => ({
+  MarkdownRenderer: ({ content }: { content: string }) => (
+    <span>{content}</span>
+  ),
+}));
+vi.mock("@posthog/ui/features/code-review/openPrInReview", () => ({
+  openPrInReview: (taskId: string, url: string) =>
+    mocks.openPrInReview(taskId, url),
+}));
+vi.mock("@posthog/ui/features/code-review/reviewNavigationStore", () => ({
+  useReviewNavigationStore: {
+    getState: () => ({ requestScrollToFile: mocks.requestScrollToFile }),
+  },
+}));
+// Tiptap's editor renders no placeholder attribute and drags a lot of DOM into
+// jsdom; the wiring under test is which target a composed comment posts to.
+vi.mock("@posthog/ui/features/sessions/components/CommentComposer", () => ({
+  CommentComposer: ({
+    placeholder,
+    onSubmit,
+  }: {
+    placeholder: string;
+    onSubmit: (content: string, mentions: number[]) => void;
+  }) => (
+    <button type="button" onClick={() => onSubmit("Composed comment", [])}>
+      {placeholder}
+    </button>
+  ),
+}));
+vi.mock("@posthog/ui/features/code-review/hooks/usePrCommentActions", () => ({
+  usePrCommentActions: () => ({
+    reply: mocks.prReply,
+    resolve: mocks.prResolve,
+  }),
+}));
+vi.mock("@posthog/ui/features/sessions/components/useComments", () => ({
+  useCommentsForTargetsQuery: () => ({
+    data: mocks.comments,
+    isLoading: false,
+  }),
+  useCreateComment: (target: unknown) => {
+    mocks.createdFor.push(target);
+    return { mutate: mocks.createComment, isPending: false };
+  },
+  useSetCommentResolved: (target: unknown) => {
+    mocks.resolvedFor.push(target);
+    return { mutate: mocks.setResolved, isPending: false };
+  },
+}));
+
+import { useCommentNavigationStore } from "@posthog/ui/features/sessions/commentNavigationStore";
+import { TaskCommentsList } from "./TaskCommentsList";
+
+const task = { id: "task-1", latest_run: null } as unknown as Task;
+
+function run(artifacts: Partial<TaskRunArtifact>[], id = "run-1"): TaskRun {
+  return { id, output: null, artifacts } as unknown as TaskRun;
+}
+
+function outputFile(
+  overrides: Partial<TaskRunArtifact>,
+): Partial<TaskRunArtifact> {
+  return {
+    type: "output",
+    name: "report.md",
+    storage_path: "runs/1/report.md",
+    ...overrides,
+  };
+}
+
+function prRun(url: string): TaskRun {
+  return {
+    id: "run-pr",
+    output: { pr_url: url },
+    artifacts: [],
+  } as unknown as TaskRun;
+}
+
+function reviewThread(overrides: Record<string, unknown> = {}) {
+  return {
+    nodeId: "node-1",
+    isResolved: false,
+    rootId: 501,
+    filePath: "packages/ui/src/App.tsx",
+    comments: [
+      {
+        id: 501,
+        body: "This needs a guard",
+        path: "packages/ui/src/App.tsx",
+        line: 12,
+        user: { login: "octocat", avatar_url: "" },
+        created_at: "2024-01-02T00:00:00Z",
+      },
+    ],
+    ...overrides,
+  };
+}
+
+function comment(overrides: Partial<ResourceComment>): ResourceComment {
+  return {
+    id: "comment-1",
+    created_by: null,
+    content: "Tighten this summary",
+    created_at: "2024-01-01T00:00:00Z",
+    item_id: "a",
+    item_context: { anchor: { kind: "document" } },
+    scope: "task_artifact",
+    source_comment: null,
+    ...overrides,
+  } as ResourceComment;
+}
+
+describe("TaskCommentsList", () => {
+  beforeEach(() => {
+    mocks.runs = [
+      run([
+        outputFile({ id: "a", name: "report.md" }),
+        outputFile({
+          id: "b",
+          name: "summary.md",
+          storage_path: "runs/1/summary.md",
+        }),
+      ]),
+    ];
+    mocks.comments = [
+      comment({}),
+      comment({
+        id: "reply-1",
+        source_comment: "comment-1",
+        content: "Agreed",
+        created_at: "2024-01-01T00:01:00Z",
+      }),
+      comment({
+        id: "comment-2",
+        item_id: "b",
+        content: "Second thread",
+        created_at: "2024-01-01T00:02:00Z",
+      }),
+    ];
+    mocks.activeArtifactId = null;
+    mocks.prConversation = [];
+    mocks.prReviewThreads = [];
+    mocks.openArtifactTab.mockReset();
+    mocks.openPrInReview.mockReset();
+    mocks.openExternalUrl.mockReset();
+    mocks.requestScrollToFile.mockReset();
+    mocks.prReply.mockClear();
+    mocks.prResolve.mockClear();
+    mocks.createComment.mockReset();
+    mocks.setResolved.mockReset();
+    mocks.createdFor = [];
+    mocks.resolvedFor = [];
+    useCommentNavigationStore.setState({
+      focusByTask: {},
+      resolutionsByTarget: {},
+    });
+  });
+
+  // The tab is the one place to see every thread the task produced, so each row
+  // has to say which artifact it came from.
+  it("lists open threads from every artifact, newest first", () => {
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    const newest = screen.getByText("Second thread");
+    const oldest = screen.getByText("Tighten this summary");
+    expect(
+      newest.compareDocumentPosition(oldest) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(screen.getByText("summary.md")).toBeTruthy();
+    expect(screen.getByText("report.md")).toBeTruthy();
+    expect(screen.getByText(/1 reply/)).toBeTruthy();
+    // The resolve/reopen reply is thread state, not a comment of its own.
+    expect(screen.queryByText("Agreed")).toBeTruthy();
+  });
+
+  it("opens the artifact a thread belongs to and focuses that thread", () => {
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    fireEvent.click(screen.getByText("Tighten this summary"));
+
+    expect(mocks.openArtifactTab).toHaveBeenCalledWith("task-1", {
+      runId: "run-1",
+      artifactId: "a",
+      name: "report.md",
+    });
+    expect(useCommentNavigationStore.getState().focusByTask["task-1"]).toEqual({
+      target: { scope: "task_artifact", itemId: "a" },
+      threadId: "comment-1",
+      nonce: expect.any(Number),
+    });
+  });
+
+  // Clicking the same thread twice has to scroll twice, so every request is a
+  // new nonce rather than a no-op set.
+  it("re-requests focus for a thread already focused", () => {
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    fireEvent.click(screen.getByText("Tighten this summary"));
+    const first = useCommentNavigationStore.getState().focusByTask["task-1"];
+    fireEvent.click(screen.getByText("Tighten this summary"));
+    const second = useCommentNavigationStore.getState().focusByTask["task-1"];
+
+    expect(second?.nonce).toBeGreaterThan(first?.nonce ?? 0);
+  });
+
+  it("filters between open and resolved threads", () => {
+    mocks.comments = [
+      comment({}),
+      comment({
+        id: "state-1",
+        source_comment: "comment-1",
+        content: "Resolved this thread",
+        created_at: "2024-01-01T00:03:00Z",
+        item_context: {
+          anchor: { kind: "document" },
+          threadState: "resolved",
+        },
+      }),
+      comment({
+        id: "comment-2",
+        item_id: "b",
+        content: "Second thread",
+        created_at: "2024-01-01T00:02:00Z",
+      }),
+    ];
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    expect(screen.getByText("Second thread")).toBeTruthy();
+    expect(screen.queryByText("Tighten this summary")).toBeNull();
+
+    fireEvent.click(screen.getByLabelText("Filter comments"));
+    fireEvent.click(screen.getByText("Resolved (1)"));
+
+    expect(screen.getByText("Tighten this summary")).toBeTruthy();
+    expect(screen.queryByText("Second thread")).toBeNull();
+  });
+
+  it("warns when the anchored text the thread points at has changed", () => {
+    useCommentNavigationStore.setState({
+      resolutionsByTarget: {
+        "task_artifact:a": new Map([["comment-1", "orphaned" as const]]),
+      },
+    });
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    expect(screen.getByText("The highlighted text changed")).toBeTruthy();
+  });
+
+  it("replies and resolves against the thread's own resource", () => {
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    // Each row builds its mutations from its own target, since the list spans
+    // several resources.
+    expect(mocks.createdFor).toContainEqual({
+      scope: "task_artifact",
+      itemId: "a",
+    });
+    expect(mocks.resolvedFor).toContainEqual({
+      scope: "task_artifact",
+      itemId: "b",
+    });
+
+    const thread = screen
+      .getByText("Tighten this summary")
+      .closest("[data-comment-thread-id]") as HTMLElement;
+    fireEvent.click(within(thread).getByText("Resolve"));
+
+    expect(mocks.setResolved).toHaveBeenCalledWith({
+      root: expect.objectContaining({ id: "comment-1" }),
+      resolved: true,
+    });
+  });
+
+  // The pane follows what's on screen, but a reader who picks a source owns the
+  // filter from then on.
+  it("narrows to the artifact open in the main pane", () => {
+    mocks.activeArtifactId = "b";
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    expect(screen.getByText("Second thread")).toBeTruthy();
+    expect(screen.queryByText("Tighten this summary")).toBeNull();
+  });
+
+  it("stops following the main pane once a source is picked by hand", () => {
+    mocks.activeArtifactId = "b";
+    const { rerender } = render(<TaskCommentsList task={task} timeline={[]} />);
+
+    fireEvent.click(screen.getByLabelText("Filter by source"));
+    fireEvent.click(screen.getByText(/^All sources/));
+    mocks.activeArtifactId = "a";
+    rerender(<TaskCommentsList task={task} timeline={[]} />);
+
+    expect(screen.getByText("Second thread")).toBeTruthy();
+    expect(screen.getByText("Tighten this summary")).toBeTruthy();
+  });
+
+  it("lists a PR's review threads and conversation comments", () => {
+    mocks.runs = [prRun("https://github.com/acme/repo/pull/7")];
+    mocks.comments = [];
+    mocks.prReviewThreads = [reviewThread()];
+    mocks.prConversation = [
+      {
+        id: 900,
+        author: "octocat",
+        avatarUrl: null,
+        body: "Shipping this",
+        createdAt: "2024-01-03T00:00:00Z",
+        url: "https://github.com/acme/repo/pull/7#issuecomment-900",
+      },
+    ];
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    expect(screen.getByText("This needs a guard")).toBeTruthy();
+    expect(screen.getByText("Shipping this")).toBeTruthy();
+    expect(screen.getAllByText("PR #7").length).toBe(2);
+    // Only the file-anchored thread can be resolved on GitHub.
+    expect(screen.getAllByText("Resolve")).toHaveLength(1);
+    // The conversation comment can't be handled here, so it links out instead.
+    expect(screen.getByText("View on GitHub")).toBeTruthy();
+  });
+
+  it("links a conversation comment out to GitHub", () => {
+    mocks.runs = [prRun("https://github.com/acme/repo/pull/7")];
+    mocks.comments = [];
+    mocks.prConversation = [
+      {
+        id: 900,
+        author: "octocat",
+        avatarUrl: null,
+        body: "Shipping this",
+        createdAt: "2024-01-03T00:00:00Z",
+        url: "https://github.com/acme/repo/pull/7#issuecomment-900",
+      },
+    ];
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+    fireEvent.click(screen.getByText("View on GitHub"));
+
+    expect(mocks.openExternalUrl).toHaveBeenCalledWith(
+      "https://github.com/acme/repo/pull/7#issuecomment-900",
+    );
+  });
+
+  it("opens a PR thread in the review pane at its file", () => {
+    mocks.runs = [prRun("https://github.com/acme/repo/pull/7")];
+    mocks.comments = [];
+    mocks.prReviewThreads = [reviewThread()];
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+    fireEvent.click(screen.getByText("This needs a guard"));
+
+    expect(mocks.openPrInReview).toHaveBeenCalledWith(
+      "task-1",
+      "https://github.com/acme/repo/pull/7",
+    );
+    expect(mocks.requestScrollToFile).toHaveBeenCalledWith(
+      "task-1",
+      "packages/ui/src/App.tsx",
+    );
+  });
+
+  it("replies and resolves a PR thread on GitHub", () => {
+    mocks.runs = [prRun("https://github.com/acme/repo/pull/7")];
+    mocks.comments = [];
+    mocks.prReviewThreads = [reviewThread()];
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+    const thread = screen
+      .getByText("This needs a guard")
+      .closest("[data-comment-thread-id]") as HTMLElement;
+    fireEvent.click(within(thread).getByText("Resolve"));
+
+    expect(mocks.prResolve).toHaveBeenCalledWith("node-1", true);
+    expect(mocks.setResolved).not.toHaveBeenCalled();
+  });
+
+  // Not every comment belongs to a deliverable; some are about the work.
+  it("posts a comment on the task itself", () => {
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    fireEvent.click(screen.getByText(/Comment on this task/));
+
+    expect(mocks.createdFor).toContainEqual({
+      scope: "task",
+      itemId: "task-1",
+    });
+    expect(mocks.createComment).toHaveBeenCalledWith(
+      expect.objectContaining({
+        content: "Composed comment",
+        context: { anchor: { kind: "document" } },
+      }),
+    );
+  });
+
+  it("shows an empty state pointing at the artifact surfaces", () => {
+    mocks.comments = [];
+
+    render(<TaskCommentsList task={task} timeline={[]} />);
+
+    expect(screen.getByText("No open comments")).toBeTruthy();
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/TaskCommentsList.tsx b/packages/ui/src/features/canvas/components/TaskCommentsList.tsx
new file mode 100644
index 0000000000..dad875e90c
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/TaskCommentsList.tsx
@@ -0,0 +1,583 @@
+import {
+  CaretDownIcon,
+  ChatCircleIcon,
+  FunnelSimpleIcon,
+  GitPullRequestIcon,
+} from "@phosphor-icons/react";
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import type { ThreadTimelineRow } from "@posthog/core/canvas/threadTimeline";
+import { commentTargetKey } from "@posthog/core/comments/anchors";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Spinner,
+} from "@posthog/quill";
+import type {
+  Task,
+  TaskThreadMessage,
+  UserBasic,
+} from "@posthog/shared/domain-types";
+import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
+import {
+  buildRows,
+  type CommentSource,
+  commentSources,
+  openCanvasFromUrl,
+  taskCommentTarget,
+} from "@posthog/ui/features/canvas/components/taskArtifactRows";
+import {
+  byNewestActivity,
+  prCommentThreads,
+  resourceCommentThreads,
+  type SourceKind,
+  type TaskCommentThread,
+  threadSourceOptions,
+} from "@posthog/ui/features/canvas/components/taskCommentThreads";
+import { useOrgMembers } from "@posthog/ui/features/canvas/hooks/useOrgMembers";
+import { useTaskRuns } from "@posthog/ui/features/canvas/hooks/useTaskRuns";
+import { usePrCommentActions } from "@posthog/ui/features/code-review/hooks/usePrCommentActions";
+import { openPrInReview } from "@posthog/ui/features/code-review/openPrInReview";
+import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
+import { usePrTitles } from "@posthog/ui/features/git-interaction/usePrDetails";
+import {
+  useActiveArtifactId,
+  usePanelLayoutStore,
+} from "@posthog/ui/features/panels/panelLayoutStore";
+import { usePrCommentsForUrls } from "@posthog/ui/features/pr-review/usePrCommentsForUrls";
+import { usePrReviewThreadsForUrls } from "@posthog/ui/features/pr-review/usePrReviewThreadsForUrls";
+import { useCommentNavigationStore } from "@posthog/ui/features/sessions/commentNavigationStore";
+import { CommentComposer } from "@posthog/ui/features/sessions/components/CommentComposer";
+import { CommentThreadCard } from "@posthog/ui/features/sessions/components/CommentThreadCard";
+import type { HighlightResolution } from "@posthog/ui/features/sessions/components/commentViewTypes";
+import { readCommentContext } from "@posthog/ui/features/sessions/components/commentViewTypes";
+import {
+  useCommentsForTargetsQuery,
+  useCreateComment,
+  useSetCommentResolved,
+} from "@posthog/ui/features/sessions/components/useComments";
+import { FileIcon } from "@posthog/ui/primitives/FileIcon";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+const EMPTY_COMMENTS: ResourceComment[] = [];
+/** The whole task's threads in one request; slower than a single artifact's own
+ *  poll because this one fans out across every resource. */
+const POLL_INTERVAL_MS = 15_000;
+const PULSE_MS = 1_200;
+const ALL_SOURCES = "all";
+
+type StateFilter = "open" | "resolved";
+
+/** The icon a source shows wherever it's named — the card label and the
+ *  filter menu — so the two always agree. */
+function sourceIcon(kind: SourceKind, label: string, size = 12) {
+  switch (kind) {
+    case "pr":
+      return (
+        <GitPullRequestIcon size={size} className="shrink-0 text-gray-11" />
+      );
+    case "canvas":
+      return iconForTemplate("", { size, className: "text-violet-9" });
+    case "task":
+      return <ChatCircleIcon size={size} className="shrink-0 text-gray-11" />;
+    default:
+      return <FileIcon filename={label} size={size} />;
+  }
+}
+
+function SourceLabel({ thread }: { thread: TaskCommentThread }) {
+  const replies = thread.entries.length - 1;
+  return (
+    <span className="mb-1 flex min-w-0 items-center gap-1.5 text-muted-foreground text-xs">
+      {sourceIcon(thread.sourceKind, thread.sourceLabel)}
+      <span className="min-w-0 truncate" title={thread.sourceLabel}>
+        {thread.sourceLabel}
+      </span>
+      {thread.origin.kind === "pr-review" && (
+        <span className="min-w-0 truncate">
+          · {thread.origin.filePath.split("/").at(-1)}
+        </span>
+      )}
+      {replies > 0 && (
+        <span className="shrink-0">
+          · {replies} {replies === 1 ? "reply" : "replies"}
+        </span>
+      )}
+    </span>
+  );
+}
+
+/**
+ * A PostHog comment thread. Its own component so it can hold the mutations for
+ * its thread's resource — the list spans several, each with its own target.
+ */
+function ResourceThreadRow({
+  thread,
+  source,
+  root,
+  taskId,
+  members,
+  selected,
+  pulsing,
+  resolution,
+  onOpen,
+}: {
+  thread: TaskCommentThread;
+  source: CommentSource;
+  root: ResourceComment;
+  taskId: string;
+  members: UserBasic[];
+  selected: boolean;
+  pulsing: boolean;
+  resolution?: HighlightResolution;
+  onOpen: () => void;
+}) {
+  const createComment = useCreateComment(source.target, taskId);
+  const setResolved = useSetCommentResolved(source.target);
+
+  return (
+    <CommentThreadCard
+      threadId={thread.id}
+      entries={thread.entries}
+      selected={selected}
+      pulsing={pulsing}
+      resolved={thread.resolved}
+      members={members}
+      resolution={resolution}
+      busy={createComment.isPending || setResolved.isPending}
+      source={<SourceLabel thread={thread} />}
+      onSelect={onOpen}
+      onReply={(content, mentions) =>
+        createComment.mutate({
+          content,
+          sourceCommentId: root.id,
+          context: readCommentContext(root) ?? { anchor: { kind: "document" } },
+          mentions,
+        })
+      }
+      onResolve={(resolved) => setResolved.mutate({ root, resolved })}
+    />
+  );
+}
+
+/** A GitHub thread. Reply and resolve go to GitHub, not to PostHog. */
+function PrThreadRow({
+  thread,
+  selected,
+  pulsing,
+  onOpen,
+}: {
+  thread: TaskCommentThread;
+  selected: boolean;
+  pulsing: boolean;
+  onOpen: () => void;
+}) {
+  const origin = thread.origin;
+  const prUrl = origin.kind === "resource" ? null : origin.prUrl;
+  const { reply, resolve } = usePrCommentActions(prUrl);
+  const [busy, setBusy] = useState(false);
+
+  const run = async (action: () => Promise<boolean>) => {
+    setBusy(true);
+    await action();
+    setBusy(false);
+  };
+
+  return (
+    <CommentThreadCard
+      threadId={thread.id}
+      entries={thread.entries}
+      selected={selected}
+      pulsing={pulsing}
+      resolved={thread.resolved}
+      // GitHub bodies mention GitHub logins, so the org member picker would
+      // insert markup nobody on that side understands.
+      members={[]}
+      busy={busy}
+      source={<SourceLabel thread={thread} />}
+      // Only inline review threads accept replies and resolution; conversation
+      // comments are read here and linked out to GitHub to act on.
+      canReply={origin.kind === "pr-review"}
+      canResolve={origin.kind === "pr-review"}
+      viewHref={origin.kind === "pr-conversation" ? origin.url : undefined}
+      onSelect={onOpen}
+      onReply={(content) =>
+        run(() =>
+          origin.kind === "pr-review"
+            ? reply(origin.rootCommentId, content)
+            : Promise.resolve(false),
+        )
+      }
+      onResolve={(resolved) =>
+        run(() =>
+          origin.kind === "pr-review"
+            ? resolve(origin.threadNodeId, resolved)
+            : Promise.resolve(false),
+        )
+      }
+    />
+  );
+}
+
+/**
+ * Every comment thread on the task: its artifacts, its canvases, its pull
+ * requests, and the task itself. Selecting one opens where it lives and locates
+ * it there, which is why no surface carries a thread list of its own.
+ */
+export function TaskCommentsList({
+  task,
+  timeline,
+}: {
+  task: Task;
+  timeline: ThreadTimelineRow<TaskThreadMessage>[];
+}) {
+  const { runs } = useTaskRuns(task.id);
+  const { members } = useOrgMembers();
+  const openArtifactTab = usePanelLayoutStore((state) => state.openArtifactTab);
+  const activeArtifactId = useActiveArtifactId(task.id);
+  const requestCommentFocus = useCommentNavigationStore(
+    (state) => state.requestCommentFocus,
+  );
+  const focus = useCommentNavigationStore(
+    (state) => state.focusByTask[task.id],
+  );
+  const resolutionsByTarget = useCommentNavigationStore(
+    (state) => state.resolutionsByTarget,
+  );
+  const [stateFilter, setStateFilter] = useState<StateFilter>("open");
+  const [sourceFilter, setSourceFilter] = useState<string>(ALL_SOURCES);
+  const [pulseThreadId, setPulseThreadId] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+
+  const rows = useMemo(
+    () => buildRows(task, timeline, runs),
+    [task, timeline, runs],
+  );
+  const sources = useMemo(() => commentSources(task.id, rows), [task.id, rows]);
+  const targets = useMemo(
+    () => sources.map((source) => source.target),
+    [sources],
+  );
+  const commentsQuery = useCommentsForTargetsQuery(targets, {
+    live: true,
+    intervalMs: POLL_INTERVAL_MS,
+  });
+  const prUrls = useMemo(
+    () => rows.flatMap((row) => (row.kind === "pr" ? [row.url] : [])),
+    [rows],
+  );
+  const prConversation = usePrCommentsForUrls(prUrls);
+  const prReviews = usePrReviewThreadsForUrls(prUrls);
+  const prTitles = usePrTitles(prUrls);
+
+  const taskTarget = useMemo(() => taskCommentTarget(task.id), [task.id]);
+  const taskSourceKey = commentTargetKey(taskTarget);
+  const createTaskComment = useCreateComment(taskTarget, task.id);
+
+  const threads = useMemo(() => {
+    const reviewByUrl = new Map(prReviews.byUrl);
+    const conversationByUrl = new Map(prConversation.byUrl);
+    const resourceThreads = resourceCommentThreads(
+      commentsQuery.data ?? EMPTY_COMMENTS,
+      sources,
+    );
+    const prThreads = prUrls.flatMap((prUrl) =>
+      prCommentThreads(
+        prUrl,
+        prTitles[prUrl] ?? `PR #${prUrl.split("/").at(-1)}`,
+        reviewByUrl.get(prUrl) ?? [],
+        conversationByUrl.get(prUrl) ?? [],
+      ),
+    );
+    return [...resourceThreads, ...prThreads].sort(byNewestActivity);
+  }, [
+    commentsQuery.data,
+    sources,
+    prUrls,
+    prTitles,
+    prReviews.byUrl,
+    prConversation.byUrl,
+  ]);
+
+  const sourceOptions = useMemo(() => threadSourceOptions(threads), [threads]);
+  const sourceLabel =
+    sourceFilter === ALL_SOURCES
+      ? "All sources"
+      : (sourceOptions.find((option) => option.key === sourceFilter)?.label ??
+        "All sources");
+  // Every source that could ever hold a thread, whether or not it has one yet.
+  // Validating against this rather than the loaded threads lets the filter
+  // follow an artifact whose comments haven't arrived, and lets the task and
+  // PR sources stay selectable while empty.
+  const knownSourceKeys = useMemo(() => {
+    const keys = new Set(
+      sources.map((source) => commentTargetKey(source.target)),
+    );
+    for (const prUrl of prUrls) keys.add(prUrl);
+    return keys;
+  }, [sources, prUrls]);
+
+  // A source that can't exist any more (its artifact left the task) can't stay
+  // selected, or the pane reads as empty with no hint why. Adjust during render
+  // rather than in an effect, so the stale filter never commits first.
+  if (sourceFilter !== ALL_SOURCES && !knownSourceKeys.has(sourceFilter)) {
+    setSourceFilter(ALL_SOURCES);
+  }
+
+  // Follow the artifact on screen until the reader picks a source themselves;
+  // after that the filter is theirs, not the pane's.
+  const sourceFilterTouched = useRef(false);
+  useEffect(() => {
+    if (sourceFilterTouched.current) return;
+    setSourceFilter(
+      activeArtifactId
+        ? commentTargetKey({ scope: "task_artifact", itemId: activeArtifactId })
+        : ALL_SOURCES,
+    );
+  }, [activeArtifactId]);
+
+  const inSource = (thread: TaskCommentThread) =>
+    sourceFilter === ALL_SOURCES || thread.sourceKey === sourceFilter;
+  const scoped = threads.filter(inSource);
+  const openCount = scoped.filter((thread) => !thread.resolved).length;
+  const resolvedCount = scoped.length - openCount;
+  const visibleThreads = scoped.filter(
+    (thread) => thread.resolved === (stateFilter === "resolved"),
+  );
+
+  // A thread picked on the artifact itself has to surface here, even when a
+  // filter is hiding it. Each request is honoured once, by nonce: resolving the
+  // focused thread later must not drag the filters along with it.
+  const focusedThreadId = focus?.threadId ?? null;
+  const handledNonceRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!focus || handledNonceRef.current === focus.nonce) return;
+    const focused = threads.find((thread) => thread.id === focus.threadId);
+    // The thread may still be loading, so wait rather than guess its filters.
+    if (!focused) return;
+    handledNonceRef.current = focus.nonce;
+    setStateFilter(focused.resolved ? "resolved" : "open");
+    setSourceFilter((current) =>
+      current === ALL_SOURCES || current === focused.sourceKey
+        ? current
+        : ALL_SOURCES,
+    );
+    setPulseThreadId(focus.threadId);
+    requestAnimationFrame(() => {
+      document
+        .querySelector(
+          `[data-comment-thread-id="${CSS.escape(focus.threadId)}"]`,
+        )
+        ?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    });
+  }, [focus, threads]);
+  // The pulse fades on its own; owning the timer in its own effect keeps it
+  // cleaned up on the next pulse or on unmount, without a stray ref.
+  useEffect(() => {
+    if (!pulseThreadId) return;
+    const timer = setTimeout(() => setPulseThreadId(null), PULSE_MS);
+    return () => clearTimeout(timer);
+  }, [pulseThreadId]);
+
+  const openThread = (thread: TaskCommentThread) => {
+    const origin = thread.origin;
+    if (origin.kind === "pr-review" || origin.kind === "pr-conversation") {
+      openPrInReview(task.id, origin.prUrl);
+      if (origin.kind === "pr-review") {
+        // The review pane scrolls by file; a specific comment is as close as it
+        // gets until it grows a per-thread target.
+        useReviewNavigationStore
+          .getState()
+          .requestScrollToFile(task.id, origin.filePath);
+      }
+      return;
+    }
+    const { source, root } = origin;
+    if (source.kind === "canvas") {
+      // Canvas comment surfaces land with the canvas work; until then this
+      // opens the canvas itself rather than a dead deep link.
+      openCanvasFromUrl(source.url)?.();
+      return;
+    }
+    // A thread on the task itself has nowhere else to open — it lives here.
+    if (source.kind === "task" || !source.runId) return;
+    openArtifactTab(task.id, {
+      runId: source.runId,
+      artifactId: source.target.itemId,
+      name: source.name,
+    });
+    requestCommentFocus(task.id, source.target, root.id);
+  };
+
+  const loading =
+    commentsQuery.isLoading || prConversation.isLoading || prReviews.isLoading;
+
+  return (
+    // The parent scrolls the middle; the filters and the composer are pinned so
+    // they stay reachable however long the thread list grows.
+    <div className="flex min-h-full flex-col">
+      <header className="sticky top-0 z-10 flex shrink-0 items-center justify-end gap-1 bg-gray-1 px-2 py-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                size="sm"
+                aria-label="Filter by source"
+                title={sourceLabel}
+              >
+                <span className="max-w-40 truncate">{sourceLabel}</span>
+                <CaretDownIcon />
+              </Button>
+            }
+          />
+          {/* Wide, single-line rows: the label truncates at the end (with the
+              full name on hover) and the count is pinned right with the shared
+              ml-auto idiom, so a long PR title stays legible and aligned. */}
+          <DropdownMenuContent align="end" sideOffset={6} className="w-80">
+            <DropdownMenuRadioGroup
+              value={sourceFilter}
+              onValueChange={(value) => {
+                sourceFilterTouched.current = true;
+                setSourceFilter(value);
+              }}
+            >
+              <DropdownMenuRadioItem value={ALL_SOURCES} className="gap-2">
+                <FunnelSimpleIcon size={12} className="shrink-0 text-gray-11" />
+                <span className="min-w-0 truncate">All sources</span>
+                <span className="ml-auto shrink-0 pl-3 text-muted-foreground tabular-nums">
+                  {threads.length}
+                </span>
+              </DropdownMenuRadioItem>
+              {sourceOptions.map((option) => (
+                <DropdownMenuRadioItem
+                  key={option.key}
+                  value={option.key}
+                  title={option.label}
+                  className="gap-2"
+                >
+                  {sourceIcon(option.kind, option.label)}
+                  <span className="min-w-0 truncate">{option.label}</span>
+                  <span className="ml-auto shrink-0 pl-3 text-muted-foreground tabular-nums">
+                    {
+                      threads.filter(
+                        (thread) => thread.sourceKey === option.key,
+                      ).length
+                    }
+                  </span>
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button size="sm" aria-label="Filter comments">
+                {stateFilter === "open" ? "Open" : "Resolved"}
+                <CaretDownIcon />
+              </Button>
+            }
+          />
+          <DropdownMenuContent align="end" sideOffset={6}>
+            <DropdownMenuRadioGroup
+              value={stateFilter}
+              onValueChange={(value) => setStateFilter(value as StateFilter)}
+            >
+              <DropdownMenuRadioItem value="open">
+                Open ({openCount})
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="resolved">
+                Resolved ({resolvedCount})
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+      <div className="flex-1 space-y-2 px-2 pt-3 pb-2">
+        {loading && threads.length === 0 ? (
+          <div className="flex justify-center py-8">
+            <Spinner />
+          </div>
+        ) : visibleThreads.length === 0 ? (
+          <Empty className="py-8">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <ChatCircleIcon />
+              </EmptyMedia>
+              <EmptyTitle>
+                No {stateFilter === "open" ? "open" : "resolved"} comments
+              </EmptyTitle>
+              <EmptyDescription>
+                {stateFilter === "open"
+                  ? "Comment on the task below, or open an artifact and select text to start a thread there."
+                  : "Resolved threads will appear here."}
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          visibleThreads.map((thread) =>
+            thread.origin.kind === "resource" ? (
+              <ResourceThreadRow
+                key={thread.id}
+                thread={thread}
+                source={thread.origin.source}
+                root={thread.origin.root}
+                taskId={task.id}
+                members={members}
+                selected={thread.id === focusedThreadId}
+                pulsing={thread.id === pulseThreadId}
+                resolution={resolutionsByTarget[thread.sourceKey]?.get(
+                  thread.id,
+                )}
+                onOpen={() => openThread(thread)}
+              />
+            ) : (
+              <PrThreadRow
+                key={thread.id}
+                thread={thread}
+                selected={thread.id === focusedThreadId}
+                pulsing={thread.id === pulseThreadId}
+                onOpen={() => openThread(thread)}
+              />
+            ),
+          )
+        )}
+      </div>
+      <footer className="sticky bottom-0 shrink-0 border-border border-t bg-background p-2">
+        <CommentComposer
+          value={draft}
+          onValueChange={setDraft}
+          onSubmit={(content, mentions) => {
+            createTaskComment.mutate({
+              content,
+              context: { anchor: { kind: "document" } },
+              mentions,
+            });
+            setDraft("");
+            // Show the thread that was just opened: open state, and a source
+            // filter that isn't hiding the task's own comments.
+            setStateFilter("open");
+            if (
+              sourceFilter !== ALL_SOURCES &&
+              sourceFilter !== taskSourceKey
+            ) {
+              setSourceFilter(ALL_SOURCES);
+            }
+          }}
+          members={members}
+          placeholder="Comment on this task… Type @ to mention someone"
+          rows={2}
+          disabled={createTaskComment.isPending}
+        />
+      </footer>
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/taskArtifactRows.ts b/packages/ui/src/features/canvas/components/taskArtifactRows.ts
new file mode 100644
index 0000000000..cd2301410b
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/taskArtifactRows.ts
@@ -0,0 +1,202 @@
+import {
+  OUTPUT_ARTIFACT_TYPES,
+  parseRunArtifacts,
+  type RunArtifact,
+} from "@posthog/core/canvas/runArtifactSchemas";
+import type { ThreadTimelineRow } from "@posthog/core/canvas/threadTimeline";
+import {
+  type CommentTarget,
+  commentTargetKey,
+} from "@posthog/core/comments/anchors";
+import { readPrUrls } from "@posthog/shared";
+import type {
+  Task,
+  TaskRun,
+  TaskThreadMessage,
+} from "@posthog/shared/domain-types";
+import { openExternalUrl } from "@posthog/ui/shell/openExternal";
+import { parseHttpsUrl, parseShareLink } from "@posthog/ui/utils/posthogLinks";
+import { navigateToShareTarget } from "@posthog/ui/utils/shareLinks";
+import { getPostHogUrl } from "@posthog/ui/utils/urls";
+
+export type ArtifactRow =
+  | { kind: "pr"; key: string; url: string }
+  | {
+      kind: "canvas";
+      key: string;
+      name: string;
+      url: string | null;
+      /** The canvas row id, the stable comment target (never the name). */
+      dashboardId: string | null;
+    }
+  | {
+      kind: "file";
+      key: string;
+      artifactId: string | null;
+      name: string;
+      runId: string | null;
+    }
+  | { kind: "slack"; key: string; url: string };
+
+/**
+ * Somewhere a task's comment threads live. Artifacts and canvases come from the
+ * task's rows; the task itself is always one, holding the threads that belong
+ * to the work rather than to any single deliverable.
+ */
+export type CommentSource =
+  | { kind: "file"; target: CommentTarget; name: string; runId: string | null }
+  | { kind: "canvas"; target: CommentTarget; name: string; url: string | null }
+  | { kind: "task"; target: CommentTarget; name: string };
+
+export function taskCommentTarget(taskId: string): CommentTarget {
+  return { scope: "task", itemId: taskId };
+}
+
+export function commentSources(
+  taskId: string,
+  rows: ArtifactRow[],
+): CommentSource[] {
+  const sources: CommentSource[] = [
+    { kind: "task", target: taskCommentTarget(taskId), name: "This task" },
+  ];
+  const seen = new Set<string>();
+  for (const row of rows) {
+    const target = targetForRow(row);
+    if (!target || seen.has(commentTargetKey(target))) continue;
+    seen.add(commentTargetKey(target));
+    if (row.kind === "file") {
+      sources.push({ kind: "file", target, name: row.name, runId: row.runId });
+    } else if (row.kind === "canvas") {
+      sources.push({ kind: "canvas", target, name: row.name, url: row.url });
+    }
+  }
+  return sources;
+}
+
+/** The canvas's stable row id, recovered from its share link. */
+function canvasDashboardId(url: string | null): string | null {
+  if (!url) return null;
+  const parsed = parseHttpsUrl(url);
+  const target = parsed ? parseShareLink(parsed.href) : null;
+  return target?.kind === "canvas" ? target.dashboardId : null;
+}
+
+export function openCanvasFromUrl(
+  url: string | null,
+): (() => void) | undefined {
+  const parsed = url ? parseHttpsUrl(url) : null;
+  const target = parsed ? parseShareLink(parsed.href) : null;
+  if (!parsed || !target) return undefined;
+  return () => {
+    const currentPostHogUrl = getPostHogUrl("/");
+    const currentPostHogOrigin = currentPostHogUrl
+      ? parseHttpsUrl(currentPostHogUrl)?.origin
+      : null;
+    if (parsed.origin === currentPostHogOrigin) {
+      navigateToShareTarget(target);
+    } else {
+      openExternalUrl(parsed.href);
+    }
+  };
+}
+
+/** Where a row's comments live, or null when the row can't carry any. */
+function targetForRow(row: ArtifactRow): CommentTarget | null {
+  if (row.kind === "file" && row.artifactId) {
+    return { scope: "task_artifact", itemId: row.artifactId };
+  }
+  if (row.kind === "canvas" && row.dashboardId) {
+    return { scope: "desktop_canvas", itemId: row.dashboardId };
+  }
+  return null;
+}
+
+/**
+ * Every commentable resource this task produced, once each. Artifacts and
+ * canvases share the generic comments API, differing only by scope, so a pane
+ * can hold one query over all of them — and two timeline messages naming the
+ * same canvas must not fetch it twice.
+ */
+export function commentTargets(rows: ArtifactRow[]): CommentTarget[] {
+  const byKey = new Map<string, CommentTarget>();
+  for (const row of rows) {
+    const target = targetForRow(row);
+    if (target) byKey.set(commentTargetKey(target), target);
+  }
+  return [...byKey.values()];
+}
+
+function readRunOutputs(run: TaskRun): RunArtifact[] {
+  return parseRunArtifacts(
+    (run as { artifacts?: unknown }).artifacts,
+    OUTPUT_ARTIFACT_TYPES,
+  );
+}
+
+export function buildRows(
+  task: Task,
+  timeline: ThreadTimelineRow<TaskThreadMessage>[],
+  runs: TaskRun[],
+): ArtifactRow[] {
+  const rows: ArtifactRow[] = [];
+  const seenPrUrls = new Set<string>();
+
+  const addPr = (url: string, key: string) => {
+    if (seenPrUrls.has(url)) return;
+    seenPrUrls.add(url);
+    rows.push({ kind: "pr", key, url });
+  };
+
+  for (const row of timeline) {
+    if (row.kind !== "artifact") continue;
+    if (row.artifact.kind === "pr") {
+      addPr(row.artifact.url, row.message.id);
+    } else {
+      const url = row.artifact.url;
+      rows.push({
+        kind: "canvas",
+        key: row.message.id,
+        name: row.artifact.name,
+        url,
+        dashboardId: canvasDashboardId(url),
+      });
+    }
+  }
+
+  const allRuns =
+    runs.length > 0 ? runs : task.latest_run ? [task.latest_run] : [];
+
+  // Re-uploading a file replaces it rather than adding a second one: agents
+  // revise a deliverable and upload it again under the same name, so keeping
+  // every copy would bury the current one under its own drafts.
+  const newestByName = new Map<string, { file: RunArtifact; runId: string }>();
+  for (const run of allRuns) {
+    for (const outputPr of readPrUrls(run.output)) {
+      addPr(outputPr, `output-pr:${outputPr}`);
+    }
+    for (const file of readRunOutputs(run)) {
+      if (!file.name) continue;
+      const previous = newestByName.get(file.name);
+      const isNewer =
+        !previous ||
+        (file.uploaded_at ?? "") >= (previous.file.uploaded_at ?? "");
+      if (isNewer) newestByName.set(file.name, { file, runId: run.id });
+    }
+  }
+  for (const [name, { file, runId }] of newestByName) {
+    rows.push({
+      kind: "file",
+      key: `file:${file.id ?? file.storage_path ?? name}`,
+      artifactId: file.id ?? null,
+      name,
+      runId,
+    });
+  }
+
+  const slackUrl = task.latest_run?.state?.slack_thread_url;
+  if (typeof slackUrl === "string" && slackUrl) {
+    rows.push({ kind: "slack", key: "slack-thread", url: slackUrl });
+  }
+
+  return rows;
+}
diff --git a/packages/ui/src/features/canvas/components/taskCommentThreads.test.ts b/packages/ui/src/features/canvas/components/taskCommentThreads.test.ts
new file mode 100644
index 0000000000..12d6a4035d
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/taskCommentThreads.test.ts
@@ -0,0 +1,226 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import type { PrConversationComment, PrReviewThread } from "@posthog/shared";
+import { describe, expect, it } from "vitest";
+import type { CommentSource } from "./taskArtifactRows";
+import {
+  byNewestActivity,
+  prCommentThreads,
+  resourceCommentThreads,
+  threadSourceOptions,
+} from "./taskCommentThreads";
+
+const fileSource: CommentSource = {
+  kind: "file",
+  target: { scope: "task_artifact", itemId: "a" },
+  name: "report.md",
+  runId: "run-1",
+};
+const taskSource: CommentSource = {
+  kind: "task",
+  target: { scope: "task", itemId: "task-1" },
+  name: "This task",
+};
+
+function comment(overrides: Partial<ResourceComment>): ResourceComment {
+  return {
+    id: "c1",
+    created_by: null,
+    content: "hi",
+    created_at: "2024-01-01T00:00:00Z",
+    item_id: "a",
+    item_context: { anchor: { kind: "document" } },
+    scope: "task_artifact",
+    source_comment: null,
+    ...overrides,
+  } as ResourceComment;
+}
+
+describe("resourceCommentThreads", () => {
+  it("keeps only threads whose resource is present, tagged with it", () => {
+    const threads = resourceCommentThreads(
+      [
+        comment({ id: "c1", item_id: "a", content: "root" }),
+        comment({
+          id: "r1",
+          item_id: "a",
+          source_comment: "c1",
+          content: "reply",
+          created_at: "2024-01-01T00:01:00Z",
+        }),
+        comment({ id: "orphan", item_id: "gone", content: "no source" }),
+      ],
+      [fileSource, taskSource],
+    );
+
+    expect(threads).toHaveLength(1);
+    expect(threads[0].sourceKind).toBe("file");
+    expect(threads[0].sourceLabel).toBe("report.md");
+    expect(threads[0].entries.map((entry) => entry.body)).toEqual([
+      "root",
+      "reply",
+    ]);
+  });
+
+  // A resolve/reopen reply is thread state, not something anyone said.
+  it("drops thread-state replies from the visible entries", () => {
+    const threads = resourceCommentThreads(
+      [
+        comment({ id: "c1", content: "root" }),
+        comment({
+          id: "state",
+          source_comment: "c1",
+          content: "Resolved this thread",
+          created_at: "2024-01-01T00:02:00Z",
+          item_context: {
+            anchor: { kind: "document" },
+            threadState: "resolved",
+          },
+        }),
+      ],
+      [fileSource],
+    );
+
+    expect(threads[0].resolved).toBe(true);
+    expect(threads[0].entries).toHaveLength(1);
+  });
+});
+
+describe("prCommentThreads", () => {
+  const reviewThread: PrReviewThread = {
+    nodeId: "node-1",
+    isResolved: true,
+    rootId: 501,
+    filePath: "src/App.tsx",
+    comments: [
+      {
+        id: 501,
+        body: "root",
+        path: "src/App.tsx",
+        line: 3,
+        original_line: null,
+        side: "RIGHT",
+        start_line: null,
+        start_side: null,
+        diff_hunk: "",
+        user: { login: "octo", avatar_url: "http://x/a.png" },
+        created_at: "2024-01-01T00:00:00Z",
+        updated_at: "2024-01-01T00:00:00Z",
+        subject_type: "line",
+      },
+      {
+        id: 502,
+        body: "reply",
+        path: "src/App.tsx",
+        line: 3,
+        original_line: null,
+        side: "RIGHT",
+        start_line: null,
+        start_side: null,
+        diff_hunk: "",
+        user: { login: "octo", avatar_url: "" },
+        created_at: "2024-01-01T00:05:00Z",
+        updated_at: "2024-01-01T00:05:00Z",
+        subject_type: "line",
+      },
+    ],
+  };
+  const conversation: PrConversationComment = {
+    id: 900,
+    author: "octo",
+    avatarUrl: null,
+    body: "lgtm",
+    createdAt: "2024-01-02T00:00:00Z",
+    url: "https://github.com/a/b/pull/7#c",
+  };
+
+  it("carries review-thread replies, resolution and the reply/resolve ids", () => {
+    const [thread] = prCommentThreads("url", "PR #7", [reviewThread], []);
+
+    expect(thread.entries.map((entry) => entry.body)).toEqual([
+      "root",
+      "reply",
+    ]);
+    expect(thread.resolved).toBe(true);
+    expect(thread.origin).toMatchObject({
+      kind: "pr-review",
+      rootCommentId: 501,
+      threadNodeId: "node-1",
+      filePath: "src/App.tsx",
+    });
+    expect(thread.lastActivityAt).toBe("2024-01-01T00:05:00Z");
+  });
+
+  it("makes each conversation comment its own unresolvable thread", () => {
+    const [thread] = prCommentThreads("url", "PR #7", [], [conversation]);
+
+    expect(thread.entries).toHaveLength(1);
+    expect(thread.resolved).toBe(false);
+    expect(thread.origin.kind).toBe("pr-conversation");
+  });
+});
+
+describe("threadSourceOptions / byNewestActivity", () => {
+  it("lists each source once and sorts newest first", () => {
+    const threads = [
+      ...resourceCommentThreads(
+        [comment({ id: "c1", content: "old" })],
+        [fileSource],
+      ),
+      ...prCommentThreads(
+        "url",
+        "PR #7",
+        [],
+        [
+          {
+            id: 1,
+            author: "octo",
+            avatarUrl: null,
+            body: "new",
+            createdAt: "2025-01-01T00:00:00Z",
+            url: null,
+          },
+        ],
+      ),
+    ].sort(byNewestActivity);
+
+    expect(threads[0].entries[0].body).toBe("new");
+    // Options follow list order, which is newest-first, and carry the kind so
+    // the filter can show a matching icon.
+    expect(
+      threadSourceOptions(threads).map((option) => [option.label, option.kind]),
+    ).toEqual([
+      ["PR #7", "pr"],
+      ["report.md", "file"],
+    ]);
+  });
+
+  // The task is the one source every task has, so it sits at the top of the
+  // filter regardless of when it was last touched.
+  it("pins the task source first, keeping the rest newest-first", () => {
+    const threads = [
+      ...resourceCommentThreads(
+        [
+          comment({
+            id: "f1",
+            item_id: "a",
+            content: "file",
+            created_at: "2025-01-01T00:00:00Z",
+          }),
+          comment({
+            id: "t1",
+            item_id: "task-1",
+            scope: "task",
+            content: "task",
+            created_at: "2024-01-01T00:00:00Z",
+          }),
+        ],
+        [fileSource, taskSource],
+      ),
+    ].sort(byNewestActivity);
+
+    expect(threadSourceOptions(threads).map((option) => option.kind)).toEqual([
+      "task",
+      "file",
+    ]);
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/taskCommentThreads.ts b/packages/ui/src/features/canvas/components/taskCommentThreads.ts
new file mode 100644
index 0000000000..17b11b49c3
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/taskCommentThreads.ts
@@ -0,0 +1,219 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import { commentTargetKey } from "@posthog/core/comments/anchors";
+import type { PrConversationComment, PrReviewThread } from "@posthog/shared";
+import type { UserBasic } from "@posthog/shared/domain-types";
+import type { CommentSource } from "@posthog/ui/features/canvas/components/taskArtifactRows";
+import {
+  buildCommentThreads,
+  readCommentContext,
+} from "@posthog/ui/features/sessions/components/commentViewTypes";
+
+export type CommentEntry = {
+  id: string;
+  authorName: string;
+  /** A PostHog author, whose avatar and hue are the ones they have app-wide. */
+  user: UserBasic | null;
+  /** A GitHub author, who only comes with an avatar url. */
+  avatarUrl: string | null;
+  createdAt: string;
+  body: string;
+  /** PostHog comments carry @mention markup; GitHub bodies are markdown. */
+  format: "mentions" | "markdown";
+};
+
+/** How a thread is opened, replied to and resolved — one case per backend. */
+export type ThreadOrigin =
+  | {
+      kind: "resource";
+      source: CommentSource;
+      /** The root comment, needed to reply to and resolve the thread. */
+      root: ResourceComment;
+    }
+  | {
+      kind: "pr-review";
+      prUrl: string;
+      filePath: string;
+      /** GitHub replies target a comment id, resolution a thread node id. */
+      rootCommentId: number;
+      threadNodeId: string;
+    }
+  | { kind: "pr-conversation"; prUrl: string; url: string | null };
+
+/**
+ * One thread in the task's comment list, whichever system it came from. The
+ * list renders and sorts these; only replying, resolving and opening still care
+ * where a thread lives, which is what `origin` carries.
+ */
+export type TaskCommentThread = {
+  /** Stable across refetches: the scroll target and React key. */
+  id: string;
+  /** Groups threads for the source filter. */
+  sourceKey: string;
+  sourceLabel: string;
+  sourceKind: "file" | "canvas" | "task" | "pr";
+  entries: CommentEntry[];
+  resolved: boolean;
+  /** Newest comment in the thread, for ordering the list. */
+  lastActivityAt: string;
+  origin: ThreadOrigin;
+};
+
+function resourceAuthorName(comment: ResourceComment): string {
+  const user = comment.created_by;
+  if (!user) return "You";
+  return (
+    [user.first_name, user.last_name].filter(Boolean).join(" ") || user.email
+  );
+}
+
+function resourceEntry(comment: ResourceComment): CommentEntry {
+  return {
+    id: comment.id,
+    authorName: resourceAuthorName(comment),
+    user: comment.created_by,
+    avatarUrl: null,
+    createdAt: comment.created_at,
+    body: comment.content ?? "",
+    format: "mentions",
+  };
+}
+
+/** The task's own comment threads, tagged with the resource they belong to. */
+export function resourceCommentThreads(
+  comments: ResourceComment[],
+  sources: CommentSource[],
+): TaskCommentThread[] {
+  const byItemId = new Map<string, CommentSource>();
+  for (const source of sources) byItemId.set(source.target.itemId, source);
+
+  return buildCommentThreads(comments).flatMap((thread) => {
+    const source = thread.root.item_id
+      ? byItemId.get(thread.root.item_id)
+      : undefined;
+    if (!source) return [];
+    // A resolve/reopen reply is thread state, not something anyone said.
+    const visibleReplies = thread.replies.filter(
+      (reply) => !readCommentContext(reply)?.threadState,
+    );
+    return [
+      {
+        id: thread.root.id,
+        sourceKey: commentTargetKey(source.target),
+        sourceLabel: source.name,
+        sourceKind: source.kind,
+        entries: [thread.root, ...visibleReplies].map(resourceEntry),
+        resolved: thread.resolved,
+        lastActivityAt:
+          thread.replies.at(-1)?.created_at ?? thread.root.created_at,
+        origin: { kind: "resource", source, root: thread.root },
+      },
+    ];
+  });
+}
+
+/**
+ * A PR's comments as threads. Inline review threads keep their replies and can
+ * be resolved; conversation comments (issue chatter, review summaries) are each
+ * a thread of one, since GitHub gives them neither replies nor resolution.
+ */
+export function prCommentThreads(
+  prUrl: string,
+  prLabel: string,
+  reviewThreads: PrReviewThread[],
+  conversation: PrConversationComment[],
+): TaskCommentThread[] {
+  const threads: TaskCommentThread[] = reviewThreads.flatMap((thread) => {
+    const root = thread.comments[0];
+    if (!root) return [];
+    return [
+      {
+        id: `pr-review-${thread.rootId}`,
+        sourceKey: prUrl,
+        sourceLabel: prLabel,
+        sourceKind: "pr" as const,
+        entries: thread.comments.map((comment) => ({
+          id: `pr-comment-${comment.id}`,
+          authorName: comment.user.login,
+          user: null,
+          avatarUrl: comment.user.avatar_url || null,
+          createdAt: comment.created_at,
+          body: comment.body,
+          format: "markdown" as const,
+        })),
+        resolved: thread.isResolved,
+        lastActivityAt: thread.comments.at(-1)?.created_at ?? root.created_at,
+        origin: {
+          kind: "pr-review" as const,
+          prUrl,
+          filePath: thread.filePath,
+          rootCommentId: thread.rootId,
+          threadNodeId: thread.nodeId,
+        },
+      },
+    ];
+  });
+
+  for (const comment of conversation) {
+    threads.push({
+      // Conversation items mix issue comments and review summaries, whose ids
+      // come from different GitHub id spaces — key on the timestamp too.
+      id: `pr-conversation-${comment.id}-${comment.createdAt}`,
+      sourceKey: prUrl,
+      sourceLabel: prLabel,
+      sourceKind: "pr",
+      entries: [
+        {
+          id: `pr-conversation-${comment.id}`,
+          authorName: comment.author,
+          user: null,
+          avatarUrl: comment.avatarUrl,
+          createdAt: comment.createdAt,
+          body: comment.body,
+          format: "markdown",
+        },
+      ],
+      resolved: false,
+      lastActivityAt: comment.createdAt,
+      origin: { kind: "pr-conversation", prUrl, url: comment.url },
+    });
+  }
+
+  return threads;
+}
+
+export function byNewestActivity(
+  a: TaskCommentThread,
+  b: TaskCommentThread,
+): number {
+  return b.lastActivityAt.localeCompare(a.lastActivityAt);
+}
+
+export type SourceKind = TaskCommentThread["sourceKind"];
+export type ThreadSourceOption = {
+  key: string;
+  label: string;
+  kind: SourceKind;
+};
+
+/**
+ * The sources present in a set of threads, for the source filter. Newest-first
+ * like the list, except the task itself sits at the top (just under "All
+ * sources") since it's the one source every task has.
+ */
+export function threadSourceOptions(
+  threads: TaskCommentThread[],
+): ThreadSourceOption[] {
+  const byKey = new Map<string, ThreadSourceOption>();
+  for (const thread of threads) {
+    if (!byKey.has(thread.sourceKey)) {
+      byKey.set(thread.sourceKey, {
+        key: thread.sourceKey,
+        label: thread.sourceLabel,
+        kind: thread.sourceKind,
+      });
+    }
+  }
+  return [...byKey.values()].sort(
+    (a, b) => Number(b.kind === "task") - Number(a.kind === "task"),
+  );
+}
diff --git a/packages/ui/src/features/code-editor/components/DocumentPreviewHeader.tsx b/packages/ui/src/features/code-editor/components/DocumentPreviewHeader.tsx
index 8a336f8914..2948dada95 100644
--- a/packages/ui/src/features/code-editor/components/DocumentPreviewHeader.tsx
+++ b/packages/ui/src/features/code-editor/components/DocumentPreviewHeader.tsx
@@ -1,6 +1,6 @@
 import { Check, Code, Copy, Eye } from "@phosphor-icons/react";
 import { Flex, IconButton, Text } from "@radix-ui/themes";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Tooltip } from "../../../primitives/Tooltip";
 
 export function DocumentPreviewHeader({
@@ -8,11 +8,13 @@ export function DocumentPreviewHeader({
   content,
   showRendered,
   onToggleRendered,
+  actions,
 }: {
   label: string;
   content: string;
   showRendered: boolean;
   onToggleRendered: () => void;
+  actions?: ReactNode;
 }) {
   const [copied, setCopied] = useState(false);
 
@@ -34,6 +36,7 @@ export function DocumentPreviewHeader({
         {label}
       </Text>
       <Flex align="center" gap="1">
+        {actions}
         <Tooltip content={showRendered ? "View source" : "View preview"}>
           <IconButton
             size="1"
diff --git a/packages/ui/src/features/code-editor/components/SelectionCommentOverlay.tsx b/packages/ui/src/features/code-editor/components/SelectionCommentOverlay.tsx
index 755daa1ddf..9cce3829aa 100644
--- a/packages/ui/src/features/code-editor/components/SelectionCommentOverlay.tsx
+++ b/packages/ui/src/features/code-editor/components/SelectionCommentOverlay.tsx
@@ -1,7 +1,9 @@
-import { Plus } from "@phosphor-icons/react";
+import { ChatCircle, Plus } from "@phosphor-icons/react";
 import { Button } from "@posthog/quill";
+import type { UserBasic } from "@posthog/shared/domain-types";
 import type { EditorSelection } from "@posthog/ui/features/code-editor/components/CodeMirrorEditor";
 import { CommentAnnotation } from "@posthog/ui/features/code-review/components/CommentAnnotation";
+import { CommentComposer } from "@posthog/ui/features/sessions/components/CommentComposer";
 import { Tooltip } from "@radix-ui/themes";
 import { useCallback, useState } from "react";
 import { createPortal } from "react-dom";
@@ -22,8 +24,18 @@ interface SelectionCommentOverlayProps {
   selection: EditorSelection | null;
   open: boolean;
   filePath: string;
-  onSubmit: (startLine: number, endLine: number, text: string) => void;
+  onSubmit: (
+    startLine: number,
+    endLine: number,
+    text: string,
+    mentions?: number[],
+  ) => void;
   onDismiss: () => void;
+  actionLabel?: string;
+  placeholder?: string;
+  showActionText?: boolean;
+  initiallyExpanded?: boolean;
+  members?: UserBasic[];
 }
 
 /**
@@ -37,6 +49,11 @@ export function SelectionCommentOverlay({
   filePath,
   onSubmit,
   onDismiss,
+  actionLabel = "Add to chat",
+  placeholder,
+  showActionText = false,
+  initiallyExpanded = false,
+  members,
 }: SelectionCommentOverlayProps) {
   if (!open || !selection?.anchor) return null;
   // Key by the range so a fresh selection remounts the card back to the "+".
@@ -49,6 +66,11 @@ export function SelectionCommentOverlay({
       filePath={filePath}
       onSubmit={onSubmit}
       onDismiss={onDismiss}
+      actionLabel={actionLabel}
+      placeholder={placeholder}
+      showActionText={showActionText}
+      initiallyExpanded={initiallyExpanded}
+      members={members}
     />
   );
 }
@@ -60,30 +82,54 @@ function SelectionComposerCard({
   filePath,
   onSubmit,
   onDismiss,
+  actionLabel,
+  placeholder,
+  showActionText,
+  initiallyExpanded,
+  members,
 }: {
   anchor: { top: number; left: number };
   fromLine: number;
   toLine: number;
   filePath: string;
-  onSubmit: (startLine: number, endLine: number, text: string) => void;
+  onSubmit: (
+    startLine: number,
+    endLine: number,
+    text: string,
+    mentions?: number[],
+  ) => void;
   onDismiss: () => void;
+  actionLabel: string;
+  placeholder?: string;
+  showActionText: boolean;
+  initiallyExpanded: boolean;
+  members?: UserBasic[];
 }) {
-  const [expanded, setExpanded] = useState(false);
+  const [userExpanded, setUserExpanded] = useState(false);
+  const expanded = initiallyExpanded || userExpanded;
+  const [draft, setDraft] = useState("");
   const style = { top: anchor.top + 4, left: anchor.left };
 
   if (!expanded) {
     return createPortal(
-      <Tooltip content="Add to chat">
+      <Tooltip content={actionLabel}>
         <Button
           type="button"
           variant="primary"
-          size="icon-sm"
-          aria-label="Add selection to chat"
+          size={showActionText ? "sm" : "icon-sm"}
+          aria-label={actionLabel}
           className="fixed z-50 shadow-sm"
           style={style}
-          onClick={() => setExpanded(true)}
+          onClick={() => setUserExpanded(true)}
         >
-          <Plus size={14} weight="bold" />
+          {showActionText ? (
+            <>
+              <ChatCircle size={14} weight="bold" />
+              Comment
+            </>
+          ) : (
+            <Plus size={14} weight="bold" />
+          )}
         </Button>
       </Tooltip>,
       document.body,
@@ -95,13 +141,31 @@ function SelectionComposerCard({
       className="fixed z-50 w-[420px] max-w-[80vw] rounded-md border border-gray-5 bg-gray-2 shadow-lg"
       style={style}
     >
-      <CommentAnnotation
-        filePath={filePath}
-        startLine={fromLine}
-        endLine={toLine}
-        onDismiss={onDismiss}
-        onSubmitText={(text) => onSubmit(fromLine, toLine, text)}
-      />
+      {members ? (
+        <div className="p-2">
+          <CommentComposer
+            value={draft}
+            onValueChange={setDraft}
+            onSubmit={(content, mentions) => {
+              onSubmit(fromLine, toLine, content, mentions);
+              onDismiss();
+            }}
+            onCancel={onDismiss}
+            members={members}
+            placeholder={placeholder ?? "Add a comment…"}
+            rows={2}
+            autoFocus
+          />
+        </div>
+      ) : (
+        <CommentAnnotation
+          filePath={filePath}
+          startLine={fromLine}
+          endLine={toLine}
+          onDismiss={onDismiss}
+          onSubmitText={(text) => onSubmit(fromLine, toLine, text)}
+        />
+      )}
     </div>,
     document.body,
   );
diff --git a/packages/ui/src/features/code-review/components/PrCommentThread.tsx b/packages/ui/src/features/code-review/components/PrCommentThread.tsx
index 3addfc943c..d7eecbf662 100644
--- a/packages/ui/src/features/code-review/components/PrCommentThread.tsx
+++ b/packages/ui/src/features/code-review/components/PrCommentThread.tsx
@@ -26,20 +26,13 @@ import {
   useRef,
   useState,
 } from "react";
-import rehypeRaw from "rehype-raw";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
-import type { PluggableList } from "unified";
 import { isSendMessageSubmitKey } from "../../../utils/sendMessageKey";
+import { githubRehypePlugins } from "../../editor/components/githubMarkdownPlugins";
 import { MarkdownRenderer } from "../../editor/components/MarkdownRenderer";
 import { sendPromptToAgent } from "../../sessions/sendPromptToAgent";
 import { usePrCommentActions } from "../hooks/usePrCommentActions";
 import type { PrCommentMetadata } from "../types";
 
-const ghRehypePlugins: PluggableList = [
-  rehypeRaw,
-  [rehypeSanitize, defaultSchema],
-];
-
 const MAX_COMMENT_HEIGHT = 120;
 type ComposerMode = "reply" | "chat";
 
@@ -261,7 +254,7 @@ function CommentBody({
         >
           <MarkdownRenderer
             content={comment.body}
-            rehypePlugins={ghRehypePlugins}
+            rehypePlugins={githubRehypePlugins}
           />
           {!isExpanded && isOverflowing && (
             <Box
@@ -524,7 +517,7 @@ export function PrCommentThread({
                       <div className="text-[13px] text-[var(--gray-11)] leading-relaxed">
                         <MarkdownRenderer
                           content={pendingReply}
-                          rehypePlugins={ghRehypePlugins}
+                          rehypePlugins={githubRehypePlugins}
                         />
                       </div>
                     </div>
diff --git a/packages/ui/src/features/editor/components/githubMarkdownPlugins.ts b/packages/ui/src/features/editor/components/githubMarkdownPlugins.ts
new file mode 100644
index 0000000000..400a9acf06
--- /dev/null
+++ b/packages/ui/src/features/editor/components/githubMarkdownPlugins.ts
@@ -0,0 +1,14 @@
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import type { PluggableList } from "unified";
+
+/**
+ * GitHub comment bodies are GitHub-flavored markdown with raw HTML baked in
+ * (suggestion blocks, `<details>`, `<img>`, `<sub>`…). react-markdown drops raw
+ * HTML by default, which leaves stray `</a>` fragments in the text — so parse
+ * it with rehype-raw and sanitize what comes out.
+ */
+export const githubRehypePlugins: PluggableList = [
+  rehypeRaw,
+  [rehypeSanitize, defaultSchema],
+];
diff --git a/packages/ui/src/features/git-interaction/usePrDetails.ts b/packages/ui/src/features/git-interaction/usePrDetails.ts
index 03cc9512e9..c049bb5c8f 100644
--- a/packages/ui/src/features/git-interaction/usePrDetails.ts
+++ b/packages/ui/src/features/git-interaction/usePrDetails.ts
@@ -47,6 +47,24 @@ export function usePrDetailsMap(
   });
 }
 
+/** PR titles for a set of PRs, off the same cache `usePrDetailsMap` warms. */
+export function usePrTitles(prUrls: string[]): Record<string, string> {
+  const trpc = useHostTRPC();
+  return useQueries({
+    queries: prUrls.map((prUrl) => ({
+      ...trpc.git.getPrDetailsByUrl.queryOptions({ prUrl }),
+      staleTime: 60_000,
+      retry: 1,
+    })),
+    combine: (results) =>
+      Object.fromEntries(
+        results.flatMap((result, index) =>
+          result.data?.title ? [[prUrls[index], result.data.title]] : [],
+        ),
+      ),
+  });
+}
+
 export function usePrDetails(
   prUrl: string | null,
   options?: UsePrDetailsOptions,
diff --git a/packages/ui/src/features/panels/panelLayoutStore.ts b/packages/ui/src/features/panels/panelLayoutStore.ts
index 4e30b343f9..9f163ec58a 100644
--- a/packages/ui/src/features/panels/panelLayoutStore.ts
+++ b/packages/ui/src/features/panels/panelLayoutStore.ts
@@ -18,7 +18,10 @@ import {
   createInitialTaskLayout,
   splitPanelTree,
 } from "@posthog/core/panels/panelLayoutTransforms";
-import { createFileTabId } from "@posthog/core/panels/panelStoreHelpers";
+import {
+  activeArtifactId,
+  createFileTabId,
+} from "@posthog/core/panels/panelStoreHelpers";
 import { findTabInTree } from "@posthog/core/panels/panelTree";
 import { ANALYTICS_EVENTS, getFileExtension } from "@posthog/shared";
 import {
@@ -528,3 +531,14 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
     },
   ),
 );
+
+/**
+ * The artifact the reader is looking at, so a pane elsewhere (the task's
+ * comment list) can narrow itself to whatever is on screen.
+ */
+export function useActiveArtifactId(taskId: string): string | null {
+  return usePanelLayoutStore((state) => {
+    const layout = state.taskLayouts[taskId];
+    return layout ? activeArtifactId(layout) : null;
+  });
+}
diff --git a/packages/ui/src/features/pr-review/usePrCommentsForUrls.ts b/packages/ui/src/features/pr-review/usePrCommentsForUrls.ts
new file mode 100644
index 0000000000..aec5517aef
--- /dev/null
+++ b/packages/ui/src/features/pr-review/usePrCommentsForUrls.ts
@@ -0,0 +1,38 @@
+import { useHostTRPC } from "@posthog/host-router/react";
+import type { PrConversationComment } from "@posthog/shared";
+import { useQueries } from "@tanstack/react-query";
+
+/**
+ * Conversation comments for several PRs at once. GitHub has no batch endpoint
+ * for these, so this is one request per PR — fine for the handful a task
+ * produces, and cached long enough that revisiting the pane is free.
+ *
+ * `byUrl` is a plain array of [url, comments] pairs rather than a Map so
+ * react-query's structural sharing keeps its identity stable while the data is
+ * unchanged; a Map would be a fresh object every render and defeat the memos
+ * that read it.
+ */
+export function usePrCommentsForUrls(prUrls: string[]) {
+  const trpc = useHostTRPC();
+  return useQueries({
+    queries: prUrls.map((prUrl) => ({
+      ...trpc.git.getPrComments.queryOptions({ prUrl }),
+      staleTime: 30_000,
+      placeholderData: (prev: PrConversationComment[] | null | undefined) =>
+        prev,
+      retry: 1,
+    })),
+    combine: (results) => ({
+      // Null from the server means "couldn't fetch", which reads the same as
+      // "nothing to show" in a list that isn't only about one PR.
+      byUrl: prUrls.map(
+        (prUrl, index) =>
+          [prUrl, results[index]?.data ?? []] as [
+            string,
+            PrConversationComment[],
+          ],
+      ),
+      isLoading: results.some((result) => result.isLoading),
+    }),
+  });
+}
diff --git a/packages/ui/src/features/pr-review/usePrReviewThreadsForUrls.ts b/packages/ui/src/features/pr-review/usePrReviewThreadsForUrls.ts
new file mode 100644
index 0000000000..fc9eb4f203
--- /dev/null
+++ b/packages/ui/src/features/pr-review/usePrReviewThreadsForUrls.ts
@@ -0,0 +1,23 @@
+import { useHostTRPC } from "@posthog/host-router/react";
+import type { PrReviewThread } from "@posthog/shared";
+import { useQueries } from "@tanstack/react-query";
+
+/** Inline review threads for several PRs at once. See `usePrCommentsForUrls`. */
+export function usePrReviewThreadsForUrls(prUrls: string[]) {
+  const trpc = useHostTRPC();
+  return useQueries({
+    queries: prUrls.map((prUrl) => ({
+      ...trpc.git.getPrReviewComments.queryOptions({ prUrl }),
+      staleTime: 30_000,
+      placeholderData: (prev: PrReviewThread[] | undefined) => prev,
+      retry: 1,
+    })),
+    combine: (results) => ({
+      byUrl: prUrls.map(
+        (prUrl, index) =>
+          [prUrl, results[index]?.data ?? []] as [string, PrReviewThread[]],
+      ),
+      isLoading: results.some((result) => result.isLoading),
+    }),
+  });
+}
diff --git a/packages/ui/src/features/sessions/commentNavigationStore.test.ts b/packages/ui/src/features/sessions/commentNavigationStore.test.ts
new file mode 100644
index 0000000000..fa0e2f3a29
--- /dev/null
+++ b/packages/ui/src/features/sessions/commentNavigationStore.test.ts
@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useCommentNavigationStore } from "./commentNavigationStore";
+
+const artifact = { scope: "task_artifact", itemId: "a" } as const;
+const canvas = { scope: "desktop_canvas", itemId: "c" } as const;
+
+describe("commentNavigationStore", () => {
+  beforeEach(() => {
+    useCommentNavigationStore.setState({
+      focusByTask: {},
+      resolutionsByTarget: {},
+    });
+  });
+
+  // Picking the same thread again has to scroll again, so the request is the
+  // nonce rather than the thread id.
+  it("bumps the nonce for a repeated request", () => {
+    const { requestCommentFocus } = useCommentNavigationStore.getState();
+
+    requestCommentFocus("task-1", artifact, "comment-1");
+    const first = useCommentNavigationStore.getState().focusByTask["task-1"];
+    requestCommentFocus("task-1", artifact, "comment-1");
+    const second = useCommentNavigationStore.getState().focusByTask["task-1"];
+
+    expect(first?.threadId).toBe("comment-1");
+    expect(second?.nonce).toBe((first?.nonce ?? 0) + 1);
+  });
+
+  it("keeps each task's focus to itself", () => {
+    const { requestCommentFocus } = useCommentNavigationStore.getState();
+
+    requestCommentFocus("task-1", artifact, "comment-1");
+    requestCommentFocus("task-2", canvas, "comment-2");
+
+    const { focusByTask } = useCommentNavigationStore.getState();
+    expect(focusByTask["task-1"]?.threadId).toBe("comment-1");
+    expect(focusByTask["task-1"]?.target).toEqual(artifact);
+    expect(focusByTask["task-2"]?.threadId).toBe("comment-2");
+  });
+
+  // The surfaces recompute anchors on every scroll and resize; an unchanged
+  // result must not re-render the list that reads them.
+  it("ignores a resolution update that changes nothing", () => {
+    const { setCommentResolutions } = useCommentNavigationStore.getState();
+
+    setCommentResolutions(artifact, new Map([["comment-1", "exact"]]));
+    const first = useCommentNavigationStore.getState().resolutionsByTarget;
+    setCommentResolutions(artifact, new Map([["comment-1", "exact"]]));
+    const second = useCommentNavigationStore.getState().resolutionsByTarget;
+    setCommentResolutions(artifact, new Map([["comment-1", "orphaned"]]));
+    const third = useCommentNavigationStore.getState().resolutionsByTarget;
+
+    expect(second).toBe(first);
+    expect(third).not.toBe(second);
+    expect(third["task_artifact:a"]?.get("comment-1")).toBe("orphaned");
+  });
+});
diff --git a/packages/ui/src/features/sessions/commentNavigationStore.ts b/packages/ui/src/features/sessions/commentNavigationStore.ts
new file mode 100644
index 0000000000..956db37d69
--- /dev/null
+++ b/packages/ui/src/features/sessions/commentNavigationStore.ts
@@ -0,0 +1,91 @@
+import {
+  type CommentTarget,
+  commentTargetKey,
+} from "@posthog/core/comments/anchors";
+import type { HighlightResolution } from "@posthog/ui/features/sessions/components/commentViewTypes";
+import { create } from "zustand";
+
+/** Which thread the task's comment surfaces are pointed at right now. */
+type CommentFocus = {
+  target: CommentTarget;
+  threadId: string;
+  /** Bumped on every request so re-picking the same thread scrolls again. */
+  nonce: number;
+};
+
+interface CommentNavigationStoreState {
+  focusByTask: Record<string, CommentFocus | null>;
+  /** targetKey → threadId → resolution. Only a surface that has rendered can
+   *  know this, so a missing entry means unknown, not "exact". */
+  resolutionsByTarget: Record<string, Map<string, HighlightResolution>>;
+}
+
+interface CommentNavigationStoreActions {
+  requestCommentFocus: (
+    taskId: string,
+    target: CommentTarget,
+    threadId: string,
+  ) => void;
+  setCommentResolutions: (
+    target: CommentTarget,
+    resolutions: Map<string, HighlightResolution>,
+  ) => void;
+}
+
+type CommentNavigationStore = CommentNavigationStoreState &
+  CommentNavigationStoreActions;
+
+let nonce = 0;
+
+function sameResolutions(
+  current: Map<string, HighlightResolution> | undefined,
+  next: Map<string, HighlightResolution>,
+): boolean {
+  if (!current || current.size !== next.size) return false;
+  for (const [id, resolution] of next) {
+    if (current.get(id) !== resolution) return false;
+  }
+  return true;
+}
+
+/**
+ * The comment list (a tab in the activity sidebar) and the artifact surfaces (a
+ * tab in the panel layout) live in sibling React trees, so neither can reach
+ * the other's scroller. This store is the channel between them: the list writes
+ * a focus request and the surface locates the anchor, and vice versa.
+ *
+ * Focus is durable state rather than a consumed event, because an artifact tab
+ * may mount after the request is made and its comments arrive later still.
+ */
+export const useCommentNavigationStore = create<CommentNavigationStore>()(
+  (set) => ({
+    focusByTask: {},
+    resolutionsByTarget: {},
+
+    requestCommentFocus: (taskId, target, threadId) => {
+      nonce += 1;
+      set((state) => ({
+        focusByTask: {
+          ...state.focusByTask,
+          [taskId]: { target, threadId, nonce },
+        },
+      }));
+    },
+
+    // The surfaces recompute anchors on every scroll and resize, so an
+    // unchanged result must not become a store write the whole list re-renders on.
+    setCommentResolutions: (target, resolutions) =>
+      set((state) => {
+        const key = commentTargetKey(target);
+        if (sameResolutions(state.resolutionsByTarget[key], resolutions)) {
+          return state;
+        }
+        return {
+          resolutionsByTarget: {
+            ...state.resolutionsByTarget,
+            [key]: resolutions,
+          },
+        };
+      }),
+  }),
+);
diff --git a/packages/ui/src/features/sessions/components/AnnotatedArtifactHtml.tsx b/packages/ui/src/features/sessions/components/AnnotatedArtifactHtml.tsx
new file mode 100644
index 0000000000..f694f8e38b
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/AnnotatedArtifactHtml.tsx
@@ -0,0 +1,227 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import {
+  commentAnchorSchema,
+  type TextCommentAnchor,
+} from "@posthog/core/comments/anchors";
+import type { UserBasic } from "@posthog/shared/domain-types";
+import type { EditorSelection } from "@posthog/ui/features/code-editor/components/CodeMirrorEditor";
+import { SelectionCommentOverlay } from "@posthog/ui/features/code-editor/components/SelectionCommentOverlay";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { artifactHtmlDocument } from "./artifactPreviewDocument";
+import {
+  type CommentLocateRequest,
+  type HighlightResolution,
+  readCommentContext,
+} from "./commentViewTypes";
+
+const BRIDGE_MARKER = "__POSTHOG_ARTIFACT_COMMENT_BRIDGE__";
+
+type FrameRect = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+
+function isFrameRect(value: unknown): value is FrameRect {
+  if (!value || typeof value !== "object") return false;
+  return ["top", "left", "right", "bottom", "width", "height"].every((key) => {
+    const field = (value as Record<string, unknown>)[key];
+    return typeof field === "number" && Number.isFinite(field);
+  });
+}
+
+export function AnnotatedArtifactHtml({
+  html,
+  name,
+  comments,
+  activeThreadId,
+  locateRequest,
+  members,
+  onActivateThread,
+  onCreate,
+  onResolutionsChange,
+}: {
+  html: string;
+  name: string;
+  comments: ResourceComment[];
+  activeThreadId: string | null;
+  locateRequest: CommentLocateRequest | null;
+  members: UserBasic[];
+  onActivateThread: (id: string) => void;
+  onCreate: (
+    anchor: TextCommentAnchor,
+    content: string,
+    mentions?: number[],
+  ) => void;
+  onResolutionsChange: (resolutions: Map<string, HighlightResolution>) => void;
+}) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const channelRef = useRef(`artifact-comments-${crypto.randomUUID()}`);
+  const [pendingAnchor, setPendingAnchor] = useState<TextCommentAnchor | null>(
+    null,
+  );
+  const [selection, setSelection] = useState<EditorSelection | null>(null);
+  const documentUrl = useMemo(() => {
+    const document = artifactHtmlDocument(html, channelRef.current);
+    return URL.createObjectURL(new Blob([document], { type: "text/html" }));
+  }, [html]);
+
+  useEffect(() => () => URL.revokeObjectURL(documentUrl), [documentUrl]);
+
+  const bridgeItems = useMemo(
+    () =>
+      comments.flatMap((comment) => {
+        if (comment.source_comment) return [];
+        const context = readCommentContext(comment);
+        return context?.anchor.kind === "text"
+          ? [
+              {
+                id: comment.id,
+                anchor: context.anchor,
+                active: comment.id === activeThreadId,
+              },
+            ]
+          : [];
+      }),
+    [activeThreadId, comments],
+  );
+
+  const sendComments = useCallback(() => {
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        marker: BRIDGE_MARKER,
+        channel: channelRef.current,
+        type: "comments",
+        items: bridgeItems,
+      },
+      "*",
+    );
+  }, [bridgeItems]);
+
+  useEffect(() => {
+    sendComments();
+  }, [sendComments]);
+
+  const sendLocate = useCallback(() => {
+    if (!locateRequest) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        marker: BRIDGE_MARKER,
+        channel: channelRef.current,
+        type: "locate",
+        id: locateRequest.id,
+      },
+      "*",
+    );
+  }, [locateRequest]);
+
+  useEffect(() => {
+    sendLocate();
+  }, [sendLocate]);
+
+  const activateThreadRef = useRef(onActivateThread);
+  activateThreadRef.current = onActivateThread;
+  const resolutionsChangeRef = useRef(onResolutionsChange);
+  resolutionsChangeRef.current = onResolutionsChange;
+  const sendCommentsRef = useRef(sendComments);
+  sendCommentsRef.current = sendComments;
+  const sendLocateRef = useRef(sendLocate);
+  sendLocateRef.current = sendLocate;
+
+  useEffect(() => {
+    const receive = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      const data = event.data as Record<string, unknown> | null;
+      if (
+        !data ||
+        data.marker !== BRIDGE_MARKER ||
+        data.channel !== channelRef.current
+      ) {
+        return;
+      }
+      if (data.type === "ready") {
+        sendCommentsRef.current();
+        sendLocateRef.current();
+        return;
+      }
+      if (data.type === "activate" && typeof data.id === "string") {
+        activateThreadRef.current(data.id);
+        return;
+      }
+      if (data.type === "resolutions" && Array.isArray(data.items)) {
+        const resolutions = new Map<string, HighlightResolution>();
+        for (const item of data.items) {
+          if (!item || typeof item !== "object") continue;
+          const { id, status } = item as Record<string, unknown>;
+          if (
+            typeof id === "string" &&
+            (status === "exact" ||
+              status === "reanchored" ||
+              status === "orphaned")
+          ) {
+            resolutions.set(id, status);
+          }
+        }
+        resolutionsChangeRef.current(resolutions);
+        return;
+      }
+      if (data.type !== "selection" || !isFrameRect(data.triggerRect)) return;
+      const parsed = commentAnchorSchema.safeParse(data.anchor);
+      if (!parsed.success || parsed.data.kind !== "text") return;
+      const frameBox = iframeRef.current?.getBoundingClientRect();
+      if (!frameBox) return;
+      setPendingAnchor(parsed.data);
+      setSelection({
+        text: parsed.data.quote,
+        fromLine: parsed.data.start + 1,
+        toLine: parsed.data.end + 1,
+        anchor: {
+          top: frameBox.top + data.triggerRect.bottom,
+          left: Math.min(
+            frameBox.left + data.triggerRect.right + 6,
+            window.innerWidth - 440,
+          ),
+        },
+      });
+    };
+    window.addEventListener("message", receive);
+    return () => window.removeEventListener("message", receive);
+  }, []);
+
+  const dismiss = () => {
+    setPendingAnchor(null);
+    setSelection(null);
+  };
+
+  return (
+    <div className="relative size-full">
+      <iframe
+        ref={iframeRef}
+        className="size-full border-0 bg-white"
+        sandbox="allow-scripts"
+        referrerPolicy="no-referrer"
+        src={documentUrl}
+        title={`Preview of ${name}`}
+        onLoad={sendComments}
+      />
+      <SelectionCommentOverlay
+        selection={selection}
+        open={!!selection && !!pendingAnchor}
+        filePath={name}
+        actionLabel="Add comment"
+        placeholder="Add a comment about this selection..."
+        showActionText
+        initiallyExpanded
+        members={members}
+        onDismiss={dismiss}
+        onSubmit={(_start, _end, content, mentions) => {
+          if (pendingAnchor) onCreate(pendingAnchor, content, mentions);
+          dismiss();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/AnnotatedArtifactImage.tsx b/packages/ui/src/features/sessions/components/AnnotatedArtifactImage.tsx
new file mode 100644
index 0000000000..e1cafbeace
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/AnnotatedArtifactImage.tsx
@@ -0,0 +1,212 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import type { RegionCommentAnchor } from "@posthog/core/comments/anchors";
+import type { UserBasic } from "@posthog/shared/domain-types";
+import { UserAvatar } from "@posthog/ui/features/auth/UserAvatar";
+import type { EditorSelection } from "@posthog/ui/features/code-editor/components/CodeMirrorEditor";
+import { SelectionCommentOverlay } from "@posthog/ui/features/code-editor/components/SelectionCommentOverlay";
+import { ZoomableImage } from "@posthog/ui/primitives/SafeImagePreview";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  type CommentLocateRequest,
+  readCommentContext,
+} from "./commentViewTypes";
+
+/** Whose pin it is, for the marker's label. */
+function authorName(comment: ResourceComment): string {
+  const user = comment.created_by;
+  if (!user) return "you";
+  return (
+    [user.first_name, user.last_name].filter(Boolean).join(" ") || user.email
+  );
+}
+
+function ImageCommentCreationLayer({
+  name,
+  members,
+  onCreate,
+  onCancel,
+}: {
+  name: string;
+  members: UserBasic[];
+  onCreate: (
+    anchor: RegionCommentAnchor,
+    content: string,
+    mentions?: number[],
+  ) => void;
+  onCancel: () => void;
+}) {
+  const [pendingAnchor, setPendingAnchor] =
+    useState<RegionCommentAnchor | null>(null);
+  const [selection, setSelection] = useState<EditorSelection | null>(null);
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Place image comment"
+        className="absolute inset-0 z-20 cursor-crosshair"
+        onClick={(event) => {
+          const box = event.currentTarget.getBoundingClientRect();
+          const keyboard = event.detail === 0;
+          const clientX = keyboard ? box.left + box.width / 2 : event.clientX;
+          const clientY = keyboard ? box.top + box.height / 2 : event.clientY;
+          const x = (clientX - box.left) / box.width;
+          const y = (clientY - box.top) / box.height;
+          const size = 0.035;
+          setPendingAnchor({
+            kind: "region",
+            x: Math.max(0, x - size / 2),
+            y: Math.max(0, y - size / 2),
+            width: size,
+            height: size,
+          });
+          setSelection({
+            text: "Image region",
+            fromLine: 1,
+            toLine: 1,
+            anchor: {
+              top: clientY + 4,
+              left: Math.min(clientX + 4, window.innerWidth - 440),
+            },
+          });
+        }}
+      />
+      <SelectionCommentOverlay
+        selection={selection}
+        open={!!selection && !!pendingAnchor}
+        filePath={name}
+        actionLabel="Add image comment"
+        placeholder="Add a comment about this part of the image..."
+        initiallyExpanded
+        members={members}
+        onDismiss={onCancel}
+        onSubmit={(_start, _end, content, mentions) => {
+          if (pendingAnchor) onCreate(pendingAnchor, content, mentions);
+          onCancel();
+        }}
+      />
+    </>
+  );
+}
+
+export function AnnotatedArtifactImage({
+  src,
+  name,
+  comments,
+  activeThreadId,
+  locateRequest,
+  commenting,
+  members,
+  onCommentingChange,
+  onActivateThread,
+  onCreate,
+  onError,
+}: {
+  src: string;
+  name: string;
+  comments: ResourceComment[];
+  activeThreadId: string | null;
+  locateRequest: CommentLocateRequest | null;
+  commenting: boolean;
+  members: UserBasic[];
+  onCommentingChange: (commenting: boolean) => void;
+  onActivateThread: (id: string) => void;
+  onCreate: (
+    anchor: RegionCommentAnchor,
+    content: string,
+    mentions?: number[],
+  ) => void;
+  onError: () => void;
+}) {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!locateRequest) return;
+    rootRef.current
+      ?.querySelector<HTMLElement>(
+        `[data-image-comment-id="${CSS.escape(locateRequest.id)}"]`,
+      )
+      ?.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [locateRequest]);
+
+  const regionComments = useMemo(
+    () =>
+      comments.flatMap((comment) => {
+        const context = readCommentContext(comment);
+        return context?.anchor.kind === "region"
+          ? [{ comment, anchor: context.anchor }]
+          : [];
+      }),
+    [comments],
+  );
+
+  // Takes the zoom scale so a pin keeps its on-screen size: the overlay is
+  // inside the transformed content, so it would otherwise grow with the image.
+  const overlay = (scale: number) => (
+    <>
+      {commenting && (
+        <ImageCommentCreationLayer
+          name={name}
+          members={members}
+          onCreate={onCreate}
+          onCancel={() => onCommentingChange(false)}
+        />
+      )}
+      <div className="pointer-events-none absolute inset-0 z-30">
+        {regionComments.map(({ comment, anchor }) => (
+          // A marker, not a quill Button: that one nudges itself down on press
+          // and keeps a dark focus ring afterwards, both of which read as a
+          // glitch on something pinned to a picture. Squaring one corner of a
+          // circle makes the teardrop, and that corner is the anchor point, so
+          // the pin hangs off the spot rather than covering it.
+          //
+          // Shell and ring are opposite ends of the grey scale, so the pin
+          // carries its own contrast onto artwork of any colour, and both steps
+          // are opaque — an avatar with transparency in it (plenty of Gravatars
+          // have) must not let the picture bleed through.
+          <button
+            key={comment.id}
+            type="button"
+            aria-label={`Open comment from ${authorName(comment)}`}
+            title={comment.content ?? "Comment"}
+            data-image-comment-id={comment.id}
+            className={`pointer-events-auto absolute flex size-8 items-center justify-center rounded-full rounded-bl-none p-1 ring-1 transition-all focus-visible:outline-(--gray-1) focus-visible:outline-2 focus-visible:outline-offset-1 ${
+              comment.id === activeThreadId
+                ? "bg-(--blue-12) ring-(--blue-10)"
+                : "bg-(--gray-12) ring-(--gray-10)"
+            }`}
+            style={{
+              left: `${anchor.x * 100}%`,
+              top: `${(anchor.y + anchor.height) * 100}%`,
+              transform: `translate(0, -100%) scale(${1 / scale})`,
+              transformOrigin: "bottom left",
+            }}
+            onClick={() => onActivateThread(comment.id)}
+          >
+            <UserAvatar
+              user={comment.created_by}
+              size="sm"
+              className="rounded-full bg-(--gray-1)"
+            />
+          </button>
+        ))}
+      </div>
+    </>
+  );
+
+  return (
+    <div
+      ref={rootRef}
+      className="relative size-full overflow-hidden bg-(--gray-2) p-4"
+    >
+      <ZoomableImage
+        src={src}
+        alt={name}
+        controls
+        overlay={overlay}
+        className="size-full"
+        onError={onError}
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
index 8f2056faee..0ef65ab716 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
@@ -1,11 +1,15 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import { useCommentNavigationStore } from "@posthog/ui/features/sessions/commentNavigationStore";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type MockInstance,
+  vi,
+} from "vitest";
 import { ArtifactPreview } from "./ArtifactPreview";
 import {
   artifactHtmlDocument,
@@ -16,6 +20,9 @@ const previewBlob = new Blob(["<h1>Artifact content</h1>"], {
   type: "text/html",
 });
 const auth = vi.hoisted(() => ({ identity: "auth-1" as string | null }));
+const artifactComments = vi.hoisted(() => ({
+  data: [] as ResourceComment[],
+}));
 const useQuery = vi.hoisted(() => vi.fn());
 
 vi.mock("@posthog/core/sessions/sessionService", () => ({
@@ -35,19 +42,59 @@ vi.mock("@posthog/ui/features/auth/useCurrentUser", () => ({
   AUTH_SCOPED_QUERY_META: { authScoped: true },
 }));
 
+vi.mock("@posthog/ui/features/canvas/hooks/useOrgMembers", () => ({
+  useOrgMembers: () => ({ members: [] }),
+}));
+
 vi.mock("@tanstack/react-query", () => ({
   useQuery,
 }));
 
+vi.mock("./useComments", () => ({
+  useCommentsQuery: () => ({
+    data: artifactComments.data,
+    isLoading: false,
+  }),
+  useCreateComment: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
 vi.mock("../../code-editor/components/CodeMirrorEditor", () => ({
   CodeMirrorEditor: ({ content }: { content: string }) => (
     <div data-testid="source-view">{content}</div>
   ),
 }));
 
+function textComment(): ResourceComment {
+  return {
+    id: "comment-1",
+    created_by: null,
+    content: "Tighten this summary",
+    created_at: "2026-01-01T00:00:00Z",
+    item_id: "artifact-1",
+    item_context: {
+      anchor: {
+        kind: "text",
+        quote: "Report",
+        prefix: "# ",
+        suffix: "",
+        start: 2,
+        end: 8,
+      },
+    },
+    scope: "task_artifact",
+    source_comment: null,
+    completed_at: null,
+  };
+}
+
 describe("ArtifactPreview", () => {
   beforeEach(() => {
     auth.identity = "auth-1";
+    useCommentNavigationStore.setState({
+      focusByTask: {},
+      resolutionsByTarget: {},
+    });
+    artifactComments.data = [];
     useQuery.mockReset();
     useQuery.mockReturnValue({
       data: previewBlob,
@@ -99,7 +146,15 @@ describe("ArtifactPreview", () => {
     );
   });
 
-  it("shows artifact content in a fully sandboxed iframe", () => {
+  it("renders authored HTML in an opaque-origin annotation iframe", () => {
+    useQuery.mockReturnValue({
+      data: {
+        kind: "html",
+        html: "<style>h1{color:red}</style><h1>Artifact content</h1>",
+      },
+      isLoading: false,
+      isError: false,
+    });
     render(
       <ArtifactPreview
         taskId="task-1"
@@ -111,6 +166,46 @@ describe("ArtifactPreview", () => {
 
     const frame = screen.getByTitle("Preview of report.html");
     expect(frame).toHaveAttribute("src", "blob:preview");
+    expect(frame).toHaveAttribute("sandbox", "allow-scripts");
+    expect(frame).toHaveAttribute("referrerpolicy", "no-referrer");
+  });
+
+  // Same zoom-and-annotate surface as a raster image: an <img> renders SVG in a
+  // secure static mode, so it doesn't need the sandboxed-iframe fallback.
+  it("gives SVG the image controls rather than an iframe", () => {
+    useQuery.mockReturnValue({
+      data: new Blob(["<svg/>"], { type: "image/svg+xml" }),
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="diagram.svg"
+      />,
+    );
+
+    expect(screen.getByRole("img", { name: "diagram.svg" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Zoom in" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add comment" })).toBeTruthy();
+    expect(screen.queryByTitle("Preview of diagram.svg")).toBeNull();
+  });
+
+  it("keeps opaque formats in a fully sandboxed iframe", () => {
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="report.pdf"
+      />,
+    );
+
+    const frame = screen.getByTitle("Preview of report.pdf");
+    expect(frame).toHaveAttribute("src", "blob:preview");
     expect(frame).toHaveAttribute("sandbox", "");
   });
 
@@ -132,6 +227,17 @@ describe("ArtifactPreview", () => {
     expect(blob.type).toBe(mimeType);
   });
 
+  // A download often arrives untyped, and the preview picks its surface off the
+  // blob's type, so the extension has to supply it.
+  it("types an SVG blob from its filename", async () => {
+    const blob = await artifactPreviewBlob(
+      new Blob(["<svg/>"], { type: "" }),
+      "diagram.svg",
+    );
+
+    expect(blob.type).toBe("image/svg+xml");
+  });
+
   it("shows working image controls instead of an iframe", () => {
     useQuery.mockReturnValue({
       data: new Blob(["image"], { type: "image/png" }),
@@ -202,13 +308,6 @@ describe("ArtifactPreview", () => {
       );
       expect(percentage).toBeGreaterThan(100);
     });
-
-    // react-zoom-pan-pinch never clears its ~180ms wheel-stop alignment timer
-    // on unmount; fired after jsdom teardown its requestAnimationFrame call
-    // crashes the run, so wait it out here.
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 250));
-    });
   });
 
   it("shows the preview error when an image cannot be decoded", () => {
@@ -264,9 +363,198 @@ describe("ArtifactPreview", () => {
     ).toBeInTheDocument();
   });
 
-  it("blocks network subresources in HTML artifacts", () => {
+  it("does not render resolved comment highlights", () => {
+    const root: ResourceComment = {
+      id: "comment-1",
+      created_by: null,
+      content: "Review this",
+      created_at: "2026-01-01T00:00:00Z",
+      item_id: "artifact-1",
+      item_context: {
+        anchor: {
+          kind: "text",
+          quote: "Report",
+          prefix: "# ",
+          suffix: "",
+          start: 2,
+          end: 8,
+        },
+      },
+      scope: "task_artifact",
+      source_comment: null,
+      completed_at: null,
+    };
+    artifactComments.data = [
+      root,
+      {
+        ...root,
+        id: "state-1",
+        content: "Resolved this thread",
+        created_at: "2026-01-01T00:01:00Z",
+        source_comment: root.id,
+        item_context: {
+          anchor: { kind: "document" },
+          threadState: "resolved",
+        },
+      },
+    ];
+    useQuery.mockReturnValue({
+      data: "# Report",
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="report.md"
+      />,
+    );
+
+    expect(screen.queryByLabelText("Open comment thread")).toBeNull();
+  });
+
+  // Both directions of the cross-pane bridge, since the list and the artifact
+  // sit in sibling React trees and can only talk through the store. jsdom has
+  // no layout, so the highlight geometry and the scroll are stubbed.
+  describe("with the comment list in the sidebar", () => {
+    const rect = { left: 0, top: 0, width: 40, height: 12 } as DOMRect;
+    let scrollIntoView: MockInstance;
+
+    beforeEach(() => {
+      scrollIntoView = vi.spyOn(Element.prototype, "scrollIntoView");
+      // jsdom has no range geometry at all, so unlike the scroll (stubbed in
+      // the shared setup) the highlight rectangles have to be supplied.
+      Range.prototype.getClientRects = () => [rect] as unknown as DOMRectList;
+      artifactComments.data = [textComment()];
+      useQuery.mockReturnValue({
+        data: "# Report",
+        isLoading: false,
+        isError: false,
+      });
+    });
+
+    afterEach(() => {
+      Reflect.deleteProperty(Range.prototype, "getClientRects");
+      scrollIntoView.mockRestore();
+    });
+
+    it("hands a thread picked on the artifact over to the list", async () => {
+      render(
+        <ArtifactPreview
+          taskId="task-1"
+          runId="run-1"
+          artifactId="artifact-1"
+          name="report.md"
+        />,
+      );
+
+      fireEvent.click(await screen.findByLabelText("Open comment thread"));
+
+      expect(
+        useCommentNavigationStore.getState().focusByTask["task-1"],
+      ).toEqual({
+        target: { scope: "task_artifact", itemId: "artifact-1" },
+        threadId: "comment-1",
+        nonce: expect.any(Number),
+      });
+    });
+
+    it("scrolls to the anchor the list asks for", async () => {
+      useCommentNavigationStore
+        .getState()
+        .requestCommentFocus(
+          "task-1",
+          { scope: "task_artifact", itemId: "artifact-1" },
+          "comment-1",
+        );
+
+      render(
+        <ArtifactPreview
+          taskId="task-1"
+          runId="run-1"
+          artifactId="artifact-1"
+          name="report.md"
+        />,
+      );
+
+      await waitFor(() => expect(scrollIntoView).toHaveBeenCalled());
+      // And the thread reads as the active one on the surface.
+      const highlight = await screen.findByLabelText("Open comment thread");
+      expect(highlight.className).toContain("ring-yellow-500");
+    });
+
+    // A thread from another artifact must not drag this one around.
+    it("ignores a focus request aimed at a different artifact", async () => {
+      useCommentNavigationStore
+        .getState()
+        .requestCommentFocus(
+          "task-1",
+          { scope: "task_artifact", itemId: "artifact-2" },
+          "comment-1",
+        );
+
+      render(
+        <ArtifactPreview
+          taskId="task-1"
+          runId="run-1"
+          artifactId="artifact-1"
+          name="report.md"
+        />,
+      );
+
+      await screen.findByLabelText("Open comment thread");
+      expect(scrollIntoView).not.toHaveBeenCalled();
+    });
+  });
+
+  // The pane is the artifact: its threads are listed in the task's Comments
+  // tab, so nothing here may render or toggle a second list of them.
+  it("keeps the pane free of a thread list", () => {
+    // Document-anchored, so this asserts the missing list rather than tripping
+    // over jsdom's lack of range geometry for highlights.
+    artifactComments.data = [
+      { ...textComment(), item_context: { anchor: { kind: "document" } } },
+    ];
+    useQuery.mockReturnValue({
+      data: "# Report",
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="report.md"
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: /comments/i })).toBeNull();
+    expect(screen.queryByText("Tighten this summary")).toBeNull();
+  });
+
+  it("preserves authored styles and injects the inline-comment bridge", () => {
+    const document = artifactHtmlDocument(
+      '<!doctype html><html><head><style>.card{color:red}</style></head><body><div class="card" style="font-size:20px">Report</div></body></html>',
+      "test-channel",
+    );
+
+    expect(document).toContain("<style>.card{color:red}</style>");
+    expect(document).toContain('style="font-size:20px"');
+    expect(document).toContain("__POSTHOG_ARTIFACT_COMMENT_BRIDGE__");
+    expect(document).toContain("💬 Comment");
+    expect(document).toContain('var CHANNEL="test-channel"');
+    expect(document).toContain('d.type==="locate"');
+    expect(document).toContain("scrollIntoView");
+  });
+
+  it("keeps sensitive capabilities blocked in HTML artifacts", () => {
     const document = artifactHtmlDocument(
-      '<!doctype html><img src="https://internal.example/secret">',
+      '<!doctype html><img src="https://images.example/report.png">',
     );
 
     expect(document.indexOf("Content-Security-Policy")).toBeLessThan(
@@ -274,5 +562,7 @@ describe("ArtifactPreview", () => {
     );
     expect(document).toContain("connect-src &#39;none&#39;");
     expect(document).toContain("frame-src &#39;none&#39;");
+    expect(document).toContain("form-action &#39;none&#39;");
+    expect(document).toContain("https:");
   });
 });
diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
index 36e07c4103..96c9c43394 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
@@ -1,25 +1,57 @@
+import { CrosshairSimpleIcon, XIcon } from "@phosphor-icons/react";
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import {
+  type CommentAnchor,
+  type CommentTarget,
+  isSameCommentTarget,
+} from "@posthog/core/comments/anchors";
 import {
   SESSION_SERVICE,
   type SessionService,
 } from "@posthog/core/sessions/sessionService";
 import { useService } from "@posthog/di/react";
-import { Spinner } from "@posthog/quill";
+import { Button, Spinner } from "@posthog/quill";
 import { isAllowedImageMimeType } from "@posthog/shared";
 import {
   getAuthIdentity,
   useAuthStateValue,
 } from "@posthog/ui/features/auth/store";
 import { AUTH_SCOPED_QUERY_META } from "@posthog/ui/features/auth/useCurrentUser";
-import { Flex } from "@radix-ui/themes";
+import { useOrgMembers } from "@posthog/ui/features/canvas/hooks/useOrgMembers";
+import { useCommentNavigationStore } from "@posthog/ui/features/sessions/commentNavigationStore";
 import { useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
-import { ZoomableImage } from "../../../primitives/SafeImagePreview";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { CodeMirrorEditor } from "../../code-editor/components/CodeMirrorEditor";
 import { DocumentPreviewHeader } from "../../code-editor/components/DocumentPreviewHeader";
 import { MarkdownDocumentPreview } from "../../code-editor/components/MarkdownDocumentPreview";
+import { AnnotatedArtifactHtml } from "./AnnotatedArtifactHtml";
+import { AnnotatedArtifactImage } from "./AnnotatedArtifactImage";
+import { ArtifactTextAnnotations } from "./ArtifactTextAnnotations";
 import { artifactPreviewBlob } from "./artifactPreviewDocument";
+import {
+  buildCommentThreads,
+  type CommentLocateRequest,
+  type HighlightResolution,
+} from "./commentViewTypes";
+import { useCommentsQuery, useCreateComment } from "./useComments";
 
 const MARKDOWN_EXTENSIONS = new Set(["md", "mdx", "markdown"]);
+const HTML_EXTENSIONS = new Set(["html", "htm"]);
+/** SVG is excluded from the shared image allowlist because its scripts can run
+ *  when it comes from a data URL. An <img> renders SVG in a secure static mode
+ *  that never runs scripts, so the zoom-and-annotate surface is safe for it. */
+const SVG_MIME_TYPE = "image/svg+xml";
+const EMPTY_COMMENTS: ResourceComment[] = [];
+
+type HtmlPreview = { kind: "html"; html: string };
+type PreviewData = string | Blob | HtmlPreview;
 
 function extension(filename: string): string {
   return filename.split(".").pop()?.toLowerCase() ?? "";
@@ -33,21 +65,25 @@ function ArtifactPreviewError() {
   );
 }
 
-function ArtifactImagePreview({ src, name }: { src: string; name: string }) {
-  const [hasError, setHasError] = useState(false);
-
-  if (hasError) return <ArtifactPreviewError />;
+function GenericArtifactHeader({
+  name,
+  actions,
+}: {
+  name: string;
+  actions?: ReactNode;
+}) {
   return (
-    <ZoomableImage
-      src={src}
-      alt={name}
-      controls
-      className="size-full bg-(--gray-2) p-4"
-      onError={() => setHasError(true)}
-    />
+    <header className="flex h-11 shrink-0 items-center justify-between border-border border-b px-3">
+      <span className="truncate font-[var(--code-font-family)] text-[13px] text-muted-foreground">
+        {name}
+      </span>
+      {actions}
+    </header>
   );
 }
 
+/** The artifact is the whole pane: its threads are listed in the task's
+ *  Comments tab, and this only renders and locates their anchors. */
 export function ArtifactPreview({
   taskId,
   runId,
@@ -61,8 +97,26 @@ export function ArtifactPreview({
 }) {
   const sessionService = useService<SessionService>(SESSION_SERVICE);
   const [showRendered, setShowRendered] = useState(true);
+  const markdownRootRef = useRef<HTMLDivElement>(null);
+  const markdownContainerRef = useRef<HTMLDivElement>(null);
+  const [imageError, setImageError] = useState(false);
+  const [imageCommenting, setImageCommenting] = useState(false);
   const authIdentity = useAuthStateValue(getAuthIdentity);
-  const { data, isLoading, isError } = useQuery({
+  const commentTarget = useMemo<CommentTarget>(
+    () => ({ scope: "task_artifact", itemId: artifactId }),
+    [artifactId],
+  );
+  const commentsQuery = useCommentsQuery(commentTarget);
+  const { members } = useOrgMembers();
+  const createComment = useCreateComment(commentTarget, taskId);
+  const requestCommentFocus = useCommentNavigationStore(
+    (state) => state.requestCommentFocus,
+  );
+  const setCommentResolutions = useCommentNavigationStore(
+    (state) => state.setCommentResolutions,
+  );
+  const focus = useCommentNavigationStore((state) => state.focusByTask[taskId]);
+  const { data, isLoading, isError } = useQuery<PreviewData>({
     queryKey: ["artifactPreview", authIdentity, taskId, runId, artifactId],
     queryFn: async () => {
       const url = await sessionService.getCloudAttachmentPreviewUrl(
@@ -74,8 +128,10 @@ export function ArtifactPreview({
       const response = await fetch(url);
       if (!response.ok) throw new Error("Artifact preview failed");
       const blob = await response.blob();
-      if (MARKDOWN_EXTENSIONS.has(extension(name))) {
-        return blob.text();
+      const fileExtension = extension(name);
+      if (MARKDOWN_EXTENSIONS.has(fileExtension)) return blob.text();
+      if (HTML_EXTENSIONS.has(fileExtension)) {
+        return { kind: "html", html: await blob.text() };
       }
       return artifactPreviewBlob(blob, name);
     },
@@ -88,6 +144,12 @@ export function ArtifactPreview({
     () => (data instanceof Blob ? URL.createObjectURL(data) : null),
     [data],
   );
+  const comments = commentsQuery.data ?? EMPTY_COMMENTS;
+  const threads = useMemo(() => buildCommentThreads(comments), [comments]);
+  const openRootComments = useMemo(
+    () => threads.flatMap((thread) => (thread.resolved ? [] : [thread.root])),
+    [threads],
+  );
 
   useEffect(() => {
     return () => {
@@ -95,6 +157,49 @@ export function ArtifactPreview({
     };
   }, [previewUrl]);
 
+  /** This artifact's share of the task's focus, if the focus is on it at all. */
+  const focusedThreadId =
+    focus && isSameCommentTarget(focus.target, commentTarget)
+      ? focus.threadId
+      : null;
+  // The locate request only fires once the thread exists, so it survives the
+  // comments arriving after the request — and re-fires when the nonce moves,
+  // which is how picking the same thread twice scrolls twice.
+  const [locateRequest, setLocateRequest] =
+    useState<CommentLocateRequest | null>(null);
+  useEffect(() => {
+    if (!focus || !focusedThreadId) return;
+    if (!threads.some((thread) => thread.root.id === focusedThreadId)) return;
+    setLocateRequest((current) =>
+      current?.nonce === focus.nonce
+        ? current
+        : { id: focusedThreadId, nonce: focus.nonce },
+    );
+  }, [focus, focusedThreadId, threads]);
+
+  const activateThread = useCallback(
+    (id: string) => requestCommentFocus(taskId, commentTarget, id),
+    [requestCommentFocus, taskId, commentTarget],
+  );
+
+  const onResolutionsChange = useCallback(
+    (resolutions: Map<string, HighlightResolution>) =>
+      setCommentResolutions(commentTarget, resolutions),
+    [setCommentResolutions, commentTarget],
+  );
+
+  const createAnchoredComment = useCallback(
+    (anchor: CommentAnchor, content: string, mentions: number[] = []) => {
+      createComment.mutate(
+        { content, context: { anchor }, mentions },
+        // With no thread list in this pane, focusing the new thread is what
+        // tells the user it landed — and brings the Comments tab forward.
+        { onSuccess: (created) => activateThread(created.id) },
+      );
+    },
+    [createComment, activateThread],
+  );
+
   if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -102,9 +207,11 @@ export function ArtifactPreview({
       </div>
     );
   }
+  if (isError || imageError) return <ArtifactPreviewError />;
+
   if (typeof data === "string") {
     return (
-      <Flex direction="column" height="100%" className="overflow-hidden">
+      <div className="flex h-full flex-col overflow-hidden">
         <DocumentPreviewHeader
           label={name}
           content={data}
@@ -112,32 +219,108 @@ export function ArtifactPreview({
           onToggleRendered={() => setShowRendered((rendered) => !rendered)}
         />
         {showRendered ? (
-          <div className="flex-1 overflow-auto">
-            <MarkdownDocumentPreview
-              content={data}
-              components={{ img: () => null }}
+          <div
+            ref={markdownContainerRef}
+            className="relative min-h-0 min-w-0 flex-1 overflow-auto"
+          >
+            <div ref={markdownRootRef}>
+              <MarkdownDocumentPreview
+                content={data}
+                components={{ img: () => null }}
+              />
+            </div>
+            <ArtifactTextAnnotations
+              artifactName={name}
+              rootRef={markdownRootRef}
+              containerRef={markdownContainerRef}
+              comments={openRootComments}
+              activeThreadId={focusedThreadId}
+              locateRequest={locateRequest}
+              members={members}
+              onActivateThread={activateThread}
+              onCreate={createAnchoredComment}
+              onResolutionsChange={onResolutionsChange}
             />
           </div>
         ) : (
-          <div className="flex-1 overflow-hidden">
+          <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
             <CodeMirrorEditor content={data} filePath={name} readOnly />
           </div>
         )}
-      </Flex>
+      </div>
     );
   }
-  if (isError || !previewUrl) {
-    return <ArtifactPreviewError />;
+
+  if (data && !(data instanceof Blob) && data.kind === "html") {
+    return (
+      <div className="flex h-full flex-col overflow-hidden">
+        <GenericArtifactHeader name={name} />
+        <div className="min-h-0 min-w-0 flex-1">
+          <AnnotatedArtifactHtml
+            html={data.html}
+            name={name}
+            comments={openRootComments}
+            activeThreadId={focusedThreadId}
+            locateRequest={locateRequest}
+            members={members}
+            onActivateThread={activateThread}
+            onCreate={createAnchoredComment}
+            onResolutionsChange={onResolutionsChange}
+          />
+        </div>
+      </div>
+    );
   }
-  if (data && isAllowedImageMimeType(data.type)) {
-    return <ArtifactImagePreview src={previewUrl} name={name} />;
+
+  if (!previewUrl || !data) return <ArtifactPreviewError />;
+
+  if (
+    data instanceof Blob &&
+    (isAllowedImageMimeType(data.type) || data.type === SVG_MIME_TYPE)
+  ) {
+    const imageActions = (
+      <Button
+        size="sm"
+        variant={imageCommenting ? "primary" : "outline"}
+        onClick={() => setImageCommenting((commenting) => !commenting)}
+      >
+        {imageCommenting ? <XIcon /> : <CrosshairSimpleIcon />}
+        {imageCommenting ? "Cancel" : "Add comment"}
+      </Button>
+    );
+    return (
+      <div className="flex h-full flex-col overflow-hidden">
+        <GenericArtifactHeader name={name} actions={imageActions} />
+        <div className="min-h-0 min-w-0 flex-1">
+          <AnnotatedArtifactImage
+            src={previewUrl}
+            name={name}
+            comments={openRootComments}
+            activeThreadId={focusedThreadId}
+            locateRequest={locateRequest}
+            commenting={imageCommenting}
+            members={members}
+            onCommentingChange={setImageCommenting}
+            onActivateThread={activateThread}
+            onCreate={createAnchoredComment}
+            onError={() => setImageError(true)}
+          />
+        </div>
+      </div>
+    );
   }
+
   return (
-    <iframe
-      className="h-full w-full border-0 bg-white"
-      sandbox=""
-      src={previewUrl}
-      title={`Preview of ${name}`}
-    />
+    <div className="flex h-full flex-col overflow-hidden">
+      <GenericArtifactHeader name={name} />
+      <div className="min-h-0 min-w-0 flex-1">
+        <iframe
+          className="h-full w-full border-0 bg-white"
+          sandbox=""
+          src={previewUrl}
+          title={`Preview of ${name}`}
+        />
+      </div>
+    </div>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/ArtifactTextAnnotations.tsx b/packages/ui/src/features/sessions/components/ArtifactTextAnnotations.tsx
new file mode 100644
index 0000000000..d14b954c8e
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/ArtifactTextAnnotations.tsx
@@ -0,0 +1,282 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import {
+  createTextCommentAnchor,
+  resolveTextCommentAnchor,
+  type TextCommentAnchor,
+} from "@posthog/core/comments/anchors";
+import type { UserBasic } from "@posthog/shared/domain-types";
+import type { EditorSelection } from "@posthog/ui/features/code-editor/components/CodeMirrorEditor";
+import { SelectionCommentOverlay } from "@posthog/ui/features/code-editor/components/SelectionCommentOverlay";
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  type CommentLocateRequest,
+  type HighlightResolution,
+  readCommentContext,
+} from "./commentViewTypes";
+
+type HighlightRect = {
+  id: string;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  active: boolean;
+};
+
+function rangeFromOffsets(
+  root: HTMLElement,
+  start: number,
+  end: number,
+): Range | null {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let offset = 0;
+  let startNode: Text | null = null;
+  let endNode: Text | null = null;
+  let startOffset = 0;
+  let endOffset = 0;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const text = node as Text;
+    const next = offset + text.data.length;
+    if (!startNode && start >= offset && start <= next) {
+      startNode = text;
+      startOffset = start - offset;
+    }
+    if (end >= offset && end <= next) {
+      endNode = text;
+      endOffset = end - offset;
+      break;
+    }
+    offset = next;
+  }
+  if (!startNode || !endNode) return null;
+  const range = document.createRange();
+  range.setStart(startNode, startOffset);
+  range.setEnd(endNode, endOffset);
+  return range;
+}
+
+function selectionOffsets(root: HTMLElement, range: Range) {
+  const before = document.createRange();
+  before.selectNodeContents(root);
+  before.setEnd(range.startContainer, range.startOffset);
+  const through = document.createRange();
+  through.selectNodeContents(root);
+  through.setEnd(range.endContainer, range.endOffset);
+  return { start: before.toString().length, end: through.toString().length };
+}
+
+interface ArtifactTextAnnotationsProps {
+  artifactName: string;
+  rootRef: RefObject<HTMLElement | null>;
+  containerRef: RefObject<HTMLElement | null>;
+  comments: ResourceComment[];
+  activeThreadId: string | null;
+  locateRequest: CommentLocateRequest | null;
+  members: UserBasic[];
+  onActivateThread: (id: string) => void;
+  onCreate: (
+    anchor: TextCommentAnchor,
+    content: string,
+    mentions?: number[],
+  ) => void;
+  onResolutionsChange: (resolutions: Map<string, HighlightResolution>) => void;
+}
+
+export function ArtifactTextAnnotations({
+  artifactName,
+  rootRef,
+  containerRef,
+  comments,
+  activeThreadId,
+  locateRequest,
+  members,
+  onActivateThread,
+  onCreate,
+  onResolutionsChange,
+}: ArtifactTextAnnotationsProps) {
+  const [selection, setSelection] = useState<EditorSelection | null>(null);
+  const [pendingAnchor, setPendingAnchor] = useState<TextCommentAnchor | null>(
+    null,
+  );
+  const [rects, setRects] = useState<HighlightRect[]>([]);
+
+  const rootComments = useMemo(
+    () => comments.filter((comment) => !comment.source_comment),
+    [comments],
+  );
+
+  const recalculate = useCallback(() => {
+    const root = rootRef.current;
+    const container = containerRef.current;
+    if (!root || !container) return;
+    const text = root.textContent ?? "";
+    const containerBox = container.getBoundingClientRect();
+    const nextRects: HighlightRect[] = [];
+    const resolutions = new Map<string, HighlightResolution>();
+
+    for (const comment of rootComments) {
+      const context = readCommentContext(comment);
+      if (!context || context.anchor.kind !== "text") continue;
+      const resolved = resolveTextCommentAnchor(text, context.anchor);
+      if (!resolved) {
+        resolutions.set(comment.id, "orphaned");
+        continue;
+      }
+      resolutions.set(comment.id, resolved.status);
+      const range = rangeFromOffsets(root, resolved.start, resolved.end);
+      if (!range) continue;
+      for (const box of range.getClientRects()) {
+        nextRects.push({
+          id: comment.id,
+          left: box.left - containerBox.left + container.scrollLeft,
+          top: box.top - containerBox.top + container.scrollTop,
+          width: box.width,
+          height: box.height,
+          active: comment.id === activeThreadId,
+        });
+      }
+    }
+    setRects(nextRects);
+    onResolutionsChange(resolutions);
+  }, [
+    activeThreadId,
+    containerRef,
+    onResolutionsChange,
+    rootComments,
+    rootRef,
+  ]);
+
+  const recalculateRef = useRef(recalculate);
+  recalculateRef.current = recalculate;
+
+  useEffect(() => {
+    recalculateRef.current();
+    const container = containerRef.current;
+    const root = rootRef.current;
+    if (!container || !root) return;
+    const update = () => recalculateRef.current();
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    window.addEventListener("resize", update);
+    container.addEventListener("scroll", update, { passive: true });
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+      container.removeEventListener("scroll", update);
+    };
+  }, [containerRef, rootRef]);
+
+  useEffect(() => {
+    if (!locateRequest) return;
+    const root = rootRef.current;
+    const comment = rootComments.find(({ id }) => id === locateRequest.id);
+    const context = comment ? readCommentContext(comment) : null;
+    if (!root || context?.anchor.kind !== "text") return;
+    const resolved = resolveTextCommentAnchor(
+      root.textContent ?? "",
+      context.anchor,
+    );
+    if (!resolved) return;
+    const range = rangeFromOffsets(root, resolved.start, resolved.end);
+    const target = range?.startContainer.parentElement;
+    target?.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [locateRequest, rootComments, rootRef]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const root = rootRef.current;
+    if (!container || !root) return;
+    const handleMouseUp = () => {
+      const domSelection = window.getSelection();
+      if (
+        !domSelection ||
+        domSelection.isCollapsed ||
+        domSelection.rangeCount === 0
+      ) {
+        return;
+      }
+      const range = domSelection.getRangeAt(0);
+      if (
+        !root.contains(range.startContainer) ||
+        !root.contains(range.endContainer)
+      ) {
+        return;
+      }
+      const offsets = selectionOffsets(root, range);
+      const anchor = createTextCommentAnchor(
+        root.textContent ?? "",
+        offsets.start,
+        offsets.end,
+      );
+      if (!anchor) return;
+      const box = range.getBoundingClientRect();
+      setPendingAnchor(anchor);
+      setSelection({
+        text: anchor.quote,
+        fromLine: offsets.start + 1,
+        toLine: offsets.end + 1,
+        anchor: {
+          top: box.bottom,
+          left: Math.min(box.right, window.innerWidth - 440),
+        },
+      });
+    };
+    container.addEventListener("mouseup", handleMouseUp);
+    return () => container.removeEventListener("mouseup", handleMouseUp);
+  }, [containerRef, rootRef]);
+
+  const dismiss = useCallback(() => {
+    setSelection(null);
+    setPendingAnchor(null);
+    window.getSelection()?.removeAllRanges();
+  }, []);
+
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-0 z-10" aria-hidden>
+        {rects.map((rect, index) => (
+          <button
+            // A selection can span several DOM rectangles, hence the index.
+            key={`${rect.id}-${index}`}
+            type="button"
+            tabIndex={-1}
+            className={`pointer-events-auto absolute rounded-[2px] ${
+              rect.active
+                ? "bg-yellow-400/55 ring-2 ring-yellow-500"
+                : "bg-yellow-300/35 hover:bg-yellow-300/55"
+            }`}
+            style={{
+              left: rect.left,
+              top: rect.top,
+              width: rect.width,
+              height: rect.height,
+            }}
+            onClick={() => onActivateThread(rect.id)}
+            aria-label="Open comment thread"
+          />
+        ))}
+      </div>
+      <SelectionCommentOverlay
+        selection={selection}
+        open={!!selection && !!pendingAnchor}
+        filePath={artifactName}
+        actionLabel="Add comment"
+        placeholder="Add a comment about this selection..."
+        showActionText
+        members={members}
+        onDismiss={dismiss}
+        onSubmit={(_start, _end, content, mentions) => {
+          if (pendingAnchor) onCreate(pendingAnchor, content, mentions);
+          dismiss();
+        }}
+      />
+    </>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/CommentComposer.test.ts b/packages/ui/src/features/sessions/components/CommentComposer.test.ts
new file mode 100644
index 0000000000..d8e52029ed
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/CommentComposer.test.ts
@@ -0,0 +1,20 @@
+import { formatMention } from "@posthog/shared";
+import type { UserBasic } from "@posthog/shared/domain-types";
+import { describe, expect, it } from "vitest";
+import { mentionIdsFromContent } from "./commentMentions";
+
+const members = [
+  { id: 1, uuid: "user-1", email: "abe@posthog.com", first_name: "Abe" },
+  { id: 2, uuid: "user-2", email: "max@posthog.com", first_name: "Max" },
+] as UserBasic[];
+
+describe("mentionIdsFromContent", () => {
+  it("returns the user IDs represented by Thread mention tokens", () => {
+    const content = `Please review ${formatMention("Abe", "abe@posthog.com")}`;
+    expect(mentionIdsFromContent(content, members)).toEqual([1]);
+  });
+
+  it("does not notify plain-text email addresses", () => {
+    expect(mentionIdsFromContent("Email max@posthog.com", members)).toEqual([]);
+  });
+});
diff --git a/packages/ui/src/features/sessions/components/CommentComposer.tsx b/packages/ui/src/features/sessions/components/CommentComposer.tsx
new file mode 100644
index 0000000000..d32c9d9e05
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/CommentComposer.tsx
@@ -0,0 +1,72 @@
+import { PaperPlaneRightIcon, XIcon } from "@phosphor-icons/react";
+import { InputGroupAddon, InputGroupButton } from "@posthog/quill";
+import type { UserBasic } from "@posthog/shared/domain-types";
+import { MentionComposer } from "@posthog/ui/features/canvas/components/MentionComposer";
+import { mentionIdsFromContent } from "./commentMentions";
+
+export function CommentComposer({
+  value,
+  onValueChange,
+  onSubmit,
+  onCancel,
+  members,
+  placeholder,
+  rows = 3,
+  disabled = false,
+  submitLabel = "Comment",
+  autoFocus = false,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  onSubmit: (content: string, mentions: number[]) => void;
+  onCancel?: () => void;
+  members: UserBasic[];
+  placeholder: string;
+  rows?: number;
+  disabled?: boolean;
+  submitLabel?: string;
+  /** For a composer the user just opened, so they can type straight away. */
+  autoFocus?: boolean;
+}) {
+  const submit = () => {
+    const content = value.trim();
+    if (!content || disabled) return;
+    onSubmit(content, mentionIdsFromContent(content, members));
+  };
+
+  return (
+    <MentionComposer
+      value={value}
+      onValueChange={onValueChange}
+      onSubmit={submit}
+      members={members}
+      autoFocus={autoFocus}
+      placeholder={placeholder}
+      rows={rows}
+      inputClassName="max-h-40 text-[13px]"
+    >
+      <InputGroupAddon align="block-end" className="p-1">
+        {onCancel && (
+          <InputGroupButton
+            size="icon-sm"
+            aria-label="Cancel"
+            onClick={onCancel}
+          >
+            <XIcon />
+          </InputGroupButton>
+        )}
+        <span className="ml-auto">
+          <InputGroupButton
+            variant="primary"
+            size="icon-sm"
+            aria-label={submitLabel}
+            disabled={!value.trim() || disabled}
+            onClick={submit}
+          >
+            <PaperPlaneRightIcon />
+          </InputGroupButton>
+        </span>
+      </InputGroupAddon>
+    </MentionComposer>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/CommentThreadCard.tsx b/packages/ui/src/features/sessions/components/CommentThreadCard.tsx
new file mode 100644
index 0000000000..b0bbe827d0
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/CommentThreadCard.tsx
@@ -0,0 +1,199 @@
+import {
+  ArrowCounterClockwise,
+  ArrowSquareOutIcon,
+  ChatCircle,
+  CheckCircle,
+  WarningCircle,
+} from "@phosphor-icons/react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Card,
+  CardContent,
+  Separator,
+} from "@posthog/quill";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import type { UserBasic } from "@posthog/shared/domain-types";
+import { UserAvatar } from "@posthog/ui/features/auth/UserAvatar";
+import { MentionText } from "@posthog/ui/features/canvas/components/MentionText";
+import type { CommentEntry } from "@posthog/ui/features/canvas/components/taskCommentThreads";
+import { githubRehypePlugins } from "@posthog/ui/features/editor/components/githubMarkdownPlugins";
+import { MarkdownRenderer } from "@posthog/ui/features/editor/components/MarkdownRenderer";
+import { openExternalUrl } from "@posthog/ui/shell/openExternal";
+import { type ReactNode, useState } from "react";
+import { CommentComposer } from "./CommentComposer";
+import type { HighlightResolution } from "./commentViewTypes";
+
+function CommentBody({ entry }: { entry: CommentEntry }) {
+  return (
+    <div className="flex gap-2 py-2">
+      {/* A PostHog author keeps the avatar and hue they have everywhere else;
+          a GitHub author only ever comes with a url. */}
+      {entry.user || !entry.avatarUrl ? (
+        <UserAvatar user={entry.user} size="sm" />
+      ) : (
+        <Avatar size="sm">
+          <AvatarImage src={entry.avatarUrl} alt="" />
+          <AvatarFallback>{entry.authorName.slice(0, 2)}</AvatarFallback>
+        </Avatar>
+      )}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-baseline gap-2">
+          <span className="truncate font-medium text-xs">
+            {entry.authorName}
+          </span>
+          <span className="shrink-0 text-muted-foreground text-xs">
+            {formatRelativeTimeShort(entry.createdAt)}
+          </span>
+        </div>
+        {entry.format === "markdown" ? (
+          <div className="mt-1 break-words text-[13px] leading-relaxed [&_img]:max-w-full [&_p]:m-0 [&_pre]:max-w-full [&_pre]:overflow-x-auto">
+            <MarkdownRenderer
+              content={entry.body}
+              rehypePlugins={githubRehypePlugins}
+            />
+          </div>
+        ) : (
+          <MentionText
+            content={entry.body}
+            className="mt-1 block whitespace-pre-wrap break-words text-[13px] leading-relaxed"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * One thread, with its replies and the reply/resolve controls. Selecting it is
+ * the caller's business: in a list spanning several resources that means
+ * opening the resource and locating the anchor.
+ */
+export function CommentThreadCard({
+  threadId,
+  entries,
+  selected,
+  pulsing,
+  resolved,
+  members,
+  resolution,
+  busy,
+  source,
+  canReply = true,
+  canResolve = true,
+  viewHref,
+  onSelect,
+  onReply,
+  onResolve,
+}: {
+  threadId: string;
+  /** Root first, then replies. */
+  entries: CommentEntry[];
+  selected: boolean;
+  pulsing: boolean;
+  resolved: boolean;
+  members: UserBasic[];
+  resolution?: HighlightResolution;
+  busy: boolean;
+  /** Names the resource the thread lives on, for cross-resource lists. */
+  source?: ReactNode;
+  /** GitHub conversation comments take neither replies nor resolution. */
+  canReply?: boolean;
+  canResolve?: boolean;
+  /** Where to read/act on a thread that can't be handled in place. */
+  viewHref?: string | null;
+  onSelect: () => void;
+  onReply: (content: string, mentions: number[]) => void;
+  onResolve: (resolved: boolean) => void;
+}) {
+  const [replying, setReplying] = useState(false);
+  const [reply, setReply] = useState("");
+  const [root, ...replies] = entries;
+  if (!root) return null;
+
+  return (
+    <Card
+      className={`gap-0 p-0 transition-all duration-300 ${
+        selected ? "border-accent bg-accent/5" : ""
+      } ${
+        // Inset, so a pane that clips its overflow can't shave the highlight.
+        pulsing ? "ring-2 ring-accent ring-inset" : ""
+      } ${resolved ? "opacity-70" : ""}`}
+      data-comment-thread-id={threadId}
+    >
+      <CardContent className="p-3">
+        <button type="button" className="w-full text-left" onClick={onSelect}>
+          {source}
+          {resolution === "orphaned" && (
+            <div className="mb-1.5 flex items-center gap-1 text-amber-700 text-xs dark:text-amber-300">
+              <WarningCircle />
+              The highlighted text changed
+            </div>
+          )}
+          <CommentBody entry={root} />
+        </button>
+        {/* Replies sit at the root's indentation: a thread this narrow reads as
+            one conversation, and nesting only stole width from the text. */}
+        {replies.map((entry) => (
+          <CommentBody key={entry.id} entry={entry} />
+        ))}
+        {/* A conversation comment can only be read here and acted on in GitHub;
+            dead Reply/Resolve buttons would just discard whatever was typed, so
+            it gets a link out instead. */}
+        {(canReply || canResolve || viewHref) && <Separator className="my-2" />}
+        {!canReply && !canResolve && viewHref ? (
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => openExternalUrl(viewHref)}
+          >
+            <ArrowSquareOutIcon />
+            View on GitHub
+          </Button>
+        ) : replying ? (
+          <CommentComposer
+            value={reply}
+            onValueChange={setReply}
+            onSubmit={(content, mentions) => {
+              onReply(content, mentions);
+              setReply("");
+              setReplying(false);
+            }}
+            onCancel={() => setReplying(false)}
+            members={members}
+            placeholder={
+              members.length > 0 ? "Reply… Type @ to mention someone" : "Reply…"
+            }
+            rows={2}
+            disabled={busy}
+            submitLabel="Reply"
+            autoFocus
+          />
+        ) : (
+          (canReply || canResolve) && (
+            <div className="flex gap-1">
+              {canReply && (
+                <Button size="sm" onClick={() => setReplying(true)}>
+                  <ChatCircle />
+                  Reply
+                </Button>
+              )}
+              {canResolve && (
+                <Button
+                  size="sm"
+                  disabled={busy}
+                  onClick={() => onResolve(!resolved)}
+                >
+                  {resolved ? <ArrowCounterClockwise /> : <CheckCircle />}
+                  {resolved ? "Reopen" : "Resolve"}
+                </Button>
+              )}
+            </div>
+          )
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/artifactHtmlCommentBridge.ts b/packages/ui/src/features/sessions/components/artifactHtmlCommentBridge.ts
new file mode 100644
index 0000000000..1edc1012f9
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/artifactHtmlCommentBridge.ts
@@ -0,0 +1,51 @@
+const BRIDGE_MARKER = "__POSTHOG_ARTIFACT_COMMENT_BRIDGE__";
+
+/**
+ * Runs inside an opaque-origin sandboxed artifact iframe. It never receives
+ * credentials or writes to the API: selection and highlight traffic goes
+ * through the trusted parent with a per-view channel.
+ */
+function artifactHtmlCommentBridge(channel: string): string {
+  const safeChannel = JSON.stringify(channel);
+  return `<script data-posthog-artifact-comments>(function(){
+"use strict";
+var CHANNEL=${safeChannel};
+var MARKER=${JSON.stringify(BRIDGE_MARKER)};
+var state={button:null,timer:0,entries:[]};
+var supportsHighlights=!!(window.Highlight&&window.CSS&&CSS.highlights);
+var current=document.currentScript;if(current)current.remove();
+function send(type,payload){parent.postMessage(Object.assign({marker:MARKER,channel:CHANNEL,type:type},payload||{}),"*");}
+function text(){return (document.body&&document.body.textContent)||"";}
+function offsets(range){var a=document.createRange(),b=document.createRange();a.selectNodeContents(document.body);a.setEnd(range.startContainer,range.startOffset);b.selectNodeContents(document.body);b.setEnd(range.endContainer,range.endOffset);return{start:a.toString().length,end:b.toString().length};}
+function makeAnchor(range){var all=text(),o=offsets(range),quote=all.slice(o.start,o.end);if(!quote.trim())return null;return{kind:"text",quote:quote,prefix:all.slice(Math.max(0,o.start-32),o.start),suffix:all.slice(o.end,o.end+32),start:o.start,end:o.end};}
+function rangeAt(start,end){var w=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT),n,pos=0,sn=null,en=null,so=0,eo=0;while((n=w.nextNode())){var next=pos+n.data.length;if(!sn&&start>=pos&&start<=next){sn=n;so=start-pos}if(end>=pos&&end<=next){en=n;eo=end-pos;break}pos=next}if(!sn||!en)return null;try{var r=document.createRange();r.setStart(sn,so);r.setEnd(en,eo);return r}catch(e){return null}}
+function resolve(a){var all=text();if(all.slice(a.start,a.end)===a.quote)return{start:a.start,end:a.end,status:"exact"};var matches=[],at=0;while(at<=all.length-a.quote.length){var found=all.indexOf(a.quote,at);if(found<0)break;matches.push(found);at=found+Math.max(1,a.quote.length)}if(matches.length===1)return{start:matches[0],end:matches[0]+a.quote.length,status:"reanchored"};var best=null,bestScore=0,tied=false;matches.forEach(function(start){var pre=all.slice(Math.max(0,start-a.prefix.length),start),end=start+a.quote.length,suf=all.slice(end,end+a.suffix.length),score=(a.prefix&&pre===a.prefix?2:0)+(a.suffix&&suf===a.suffix?2:0);if(score>bestScore){best={start:start,end:end,status:"reanchored"};bestScore=score;tied=false}else if(score===bestScore){tied=true}});return bestScore&&!tied?best:null;}
+function style(){var s=document.createElement("style");s.setAttribute("data-posthog-artifact-comments","");s.textContent="::highlight(posthog-artifact-comment){background:rgba(250,204,21,.32);color:inherit}::highlight(posthog-artifact-comment-active){background:rgba(250,204,21,.58);color:inherit}.ph-artifact-comment-button{position:fixed;z-index:2147483647;display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid #ca8a04;border-radius:9px;background:#facc15;color:#1c1917;font:600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-shadow:0 3px 12px rgba(0,0,0,.3);cursor:pointer}.ph-artifact-comment-button:hover{background:#fde047}";(document.head||document.documentElement).appendChild(s)}
+function hide(){if(state.button)state.button.style.display="none"}
+function button(){if(state.button&&state.button.isConnected)return state.button;var b=document.createElement("button");b.type="button";b.className="ph-artifact-comment-button";b.textContent="💬 Comment";b.style.display="none";b.addEventListener("mousedown",function(e){e.preventDefault();e.stopPropagation();var sel=window.getSelection();if(!sel||sel.isCollapsed||!sel.rangeCount)return hide();var range=sel.getRangeAt(0),anchor=makeAnchor(range);if(!anchor)return hide();var r=range.getBoundingClientRect(),br=b.getBoundingClientRect();send("selection",{anchor:anchor,rect:{top:r.top,left:r.left,right:r.right,bottom:r.bottom,width:r.width,height:r.height},triggerRect:{top:br.top,left:br.left,right:br.right,bottom:br.bottom,width:br.width,height:br.height}});hide();sel.removeAllRanges()});document.documentElement.appendChild(b);state.button=b;return b;}
+function selectionChanged(){clearTimeout(state.timer);state.timer=setTimeout(function(){var sel=window.getSelection();if(!sel||sel.isCollapsed||!sel.rangeCount)return hide();var value=sel.toString().trim();if(value.length<2)return hide();var r=sel.getRangeAt(0).getBoundingClientRect();if(!r||(r.width===0&&r.height===0))return hide();var b=button();b.style.left=Math.max(8,Math.min(innerWidth-110,r.left+r.width/2-50))+"px";b.style.top=Math.max(8,r.top-42)+"px";b.style.display="flex"},80)}
+function render(items){state.entries=[];var normal=supportsHighlights?new Highlight():null,active=supportsHighlights?new Highlight():null,resolutions=[];(items||[]).forEach(function(item){var hit=resolve(item.anchor);if(!hit){resolutions.push({id:item.id,status:"orphaned"});return}var range=rangeAt(hit.start,hit.end);if(!range){resolutions.push({id:item.id,status:"orphaned"});return}state.entries.push({id:item.id,range:range});resolutions.push({id:item.id,status:hit.status});if(item.active)active.add(range);else normal.add(range)});if(supportsHighlights){CSS.highlights.set("posthog-artifact-comment",normal);CSS.highlights.set("posthog-artifact-comment-active",active)}send("resolutions",{items:resolutions})}
+function locate(id){for(var i=0;i<state.entries.length;i++){if(state.entries[i].id!==id)continue;var node=state.entries[i].range.startContainer,parentNode=node.nodeType===1?node:node.parentElement;if(parentNode&&parentNode.scrollIntoView)parentNode.scrollIntoView({behavior:"smooth",block:"center"});return}}
+document.addEventListener("selectionchange",selectionChanged);
+document.addEventListener("scroll",hide,true);
+document.addEventListener("click",function(e){for(var i=0;i<state.entries.length;i++){var rects=state.entries[i].range.getClientRects();for(var j=0;j<rects.length;j++){var r=rects[j];if(e.clientX>=r.left&&e.clientX<=r.right&&e.clientY>=r.top&&e.clientY<=r.bottom){e.preventDefault();e.stopPropagation();send("activate",{id:state.entries[i].id});return}}}},true);
+window.addEventListener("message",function(e){if(e.source!==parent)return;var d=e.data;if(!d||d.marker!==MARKER||d.channel!==CHANNEL)return;if(d.type==="comments")render(d.items);else if(d.type==="locate"&&typeof d.id==="string")locate(d.id)});
+style();send("ready");
+})();</script>`;
+}
+
+export function injectArtifactHtmlCommentBridge(
+  html: string,
+  channel: string,
+): string {
+  const bridge = artifactHtmlCommentBridge(channel);
+  const bodyEnd = html.toLowerCase().lastIndexOf("</body>");
+  if (bodyEnd >= 0) {
+    return `${html.slice(0, bodyEnd)}${bridge}${html.slice(bodyEnd)}`;
+  }
+  const htmlEnd = html.toLowerCase().lastIndexOf("</html>");
+  if (htmlEnd >= 0) {
+    return `${html.slice(0, htmlEnd)}${bridge}${html.slice(htmlEnd)}`;
+  }
+  return `${html}${bridge}`;
+}
diff --git a/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts b/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
index 05d0f18c17..fa4da97bc1 100644
--- a/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
+++ b/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
@@ -1,12 +1,18 @@
 import { getImageMimeType, isAllowedImageMimeType } from "@posthog/shared";
 import { applyCspToHtml } from "../../mcp-apps/utils/mcp-app-csp";
+import { injectArtifactHtmlCommentBridge } from "./artifactHtmlCommentBridge";
 
-function extension(filename: string): string {
-  return filename.split(".").pop()?.toLowerCase() ?? "";
-}
-
-export function artifactHtmlDocument(html: string): string {
-  return applyCspToHtml(html);
+export function artifactHtmlDocument(
+  html: string,
+  commentBridgeChannel?: string,
+): string {
+  const document = commentBridgeChannel
+    ? injectArtifactHtmlCommentBridge(html, commentBridgeChannel)
+    : html;
+  // HTML artifacts stay in an opaque-origin sandbox. Allow authored HTTPS
+  // resources so generated reports retain their CSS, fonts, images and static
+  // scripts, while denying API connections, forms, nested frames and objects.
+  return applyCspToHtml(document, { resourceDomains: ["https:"] });
 }
 export async function artifactPreviewBlob(
   blob: Blob,
@@ -20,10 +26,12 @@ export async function artifactPreviewBlob(
   if (isAllowedImageMimeType(imageMimeType)) {
     return new Blob([blob], { type: imageMimeType });
   }
-  if (["html", "htm"].includes(extension(filename))) {
-    return new Blob([artifactHtmlDocument(await blob.text())], {
-      type: "text/html",
-    });
+  // SVG is kept out of the shared <img> allowlist because its scripts can run
+  // when it comes from a data URL, but the artifact preview renders it from a
+  // blob in an <img>, which never runs scripts. Type it so that surface picks
+  // it up instead of the browser offering a download.
+  if (filenameMimeType === "image/svg+xml") {
+    return new Blob([blob], { type: "image/svg+xml" });
   }
   return blob;
 }
diff --git a/packages/ui/src/features/sessions/components/commentMentions.ts b/packages/ui/src/features/sessions/components/commentMentions.ts
new file mode 100644
index 0000000000..cc871281e8
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/commentMentions.ts
@@ -0,0 +1,15 @@
+import { splitMentionSegments } from "@posthog/shared";
+import type { UserBasic } from "@posthog/shared/domain-types";
+
+export function mentionIdsFromContent(
+  content: string,
+  members: UserBasic[],
+): number[] {
+  const emails = new Set<string>();
+  for (const segment of splitMentionSegments(content)) {
+    if (segment.type === "mention") emails.add(segment.email.toLowerCase());
+  }
+  return members
+    .filter((member) => emails.has(member.email.toLowerCase()))
+    .map((member) => member.id);
+}
diff --git a/packages/ui/src/features/sessions/components/commentViewTypes.ts b/packages/ui/src/features/sessions/components/commentViewTypes.ts
new file mode 100644
index 0000000000..e83f709487
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/commentViewTypes.ts
@@ -0,0 +1,47 @@
+import type { ResourceComment } from "@posthog/api-client/posthog-client";
+import {
+  type CommentContext,
+  isThreadResolved,
+  parseCommentContext,
+} from "@posthog/core/comments/anchors";
+
+export type HighlightResolution = "exact" | "reanchored" | "orphaned";
+export type CommentLocateRequest = { id: string; nonce: number };
+
+export function readCommentContext(
+  comment: ResourceComment,
+): CommentContext | null {
+  return parseCommentContext(comment.item_context);
+}
+
+export type CommentThread = {
+  root: ResourceComment;
+  replies: ResourceComment[];
+  resolved: boolean;
+};
+
+export function buildCommentThreads(
+  comments: ResourceComment[],
+): CommentThread[] {
+  const roots: ResourceComment[] = [];
+  const repliesByRoot = new Map<string, ResourceComment[]>();
+  for (const comment of comments) {
+    if (!comment.source_comment) {
+      roots.push(comment);
+      continue;
+    }
+    const replies = repliesByRoot.get(comment.source_comment) ?? [];
+    replies.push(comment);
+    repliesByRoot.set(comment.source_comment, replies);
+  }
+  return roots
+    .sort((a, b) => a.created_at.localeCompare(b.created_at))
+    .map((root) => {
+      const replies = repliesByRoot.get(root.id) ?? [];
+      return {
+        root,
+        replies,
+        resolved: isThreadResolved(root, replies),
+      };
+    });
+}
diff --git a/packages/ui/src/features/sessions/components/useComments.test.ts b/packages/ui/src/features/sessions/components/useComments.test.ts
new file mode 100644
index 0000000000..2e14b615ca
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/useComments.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { commentCacheCoversTarget } from "./useComments";
+
+const target = { scope: "task_artifact", itemId: "a" } as const;
+
+describe("commentCacheCoversTarget", () => {
+  // An optimistic reply has to land in every list showing that resource — the
+  // artifact's own query and the task-wide fan-out — and in no other.
+  it.each([
+    {
+      what: "the target's own query",
+      key: ["comments", "identity", "task_artifact", "a"],
+      covers: true,
+    },
+    {
+      what: "a sibling resource's query",
+      key: ["comments", "identity", "task_artifact", "b"],
+      covers: false,
+    },
+    {
+      what: "the same id under another scope",
+      key: ["comments", "identity", "desktop_canvas", "a"],
+      covers: false,
+    },
+    {
+      what: "a fan-out including the target",
+      key: [
+        "comments",
+        "targets",
+        "identity",
+        "desktop_canvas:c,task_artifact:a",
+      ],
+      covers: true,
+    },
+    {
+      what: "a fan-out without the target",
+      key: ["comments", "targets", "identity", "task_artifact:b"],
+      covers: false,
+    },
+    {
+      what: "a fan-out whose target only shares a prefix",
+      key: ["comments", "targets", "identity", "task_artifact:ab"],
+      covers: false,
+    },
+    {
+      what: "an unrelated query",
+      key: ["artifactPreview", "identity", "task_artifact", "a"],
+      covers: false,
+    },
+  ])("$what", ({ key, covers }) => {
+    expect(commentCacheCoversTarget(key, target)).toBe(covers);
+  });
+});
diff --git a/packages/ui/src/features/sessions/components/useComments.ts b/packages/ui/src/features/sessions/components/useComments.ts
new file mode 100644
index 0000000000..897a9fd72f
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/useComments.ts
@@ -0,0 +1,236 @@
+import type {
+  CreateResourceCommentRequest,
+  ResourceComment,
+} from "@posthog/api-client/posthog-client";
+import {
+  type CommentTarget,
+  commentTargetKey,
+} from "@posthog/core/comments/anchors";
+import {
+  SESSION_SERVICE,
+  type SessionService,
+} from "@posthog/core/sessions/sessionService";
+import { useService } from "@posthog/di/react";
+import {
+  getAuthIdentity,
+  useAuthStateValue,
+} from "@posthog/ui/features/auth/store";
+import { AUTH_SCOPED_QUERY_META } from "@posthog/ui/features/auth/useCurrentUser";
+import {
+  type QueryClient,
+  type QueryKey,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+
+function commentsQueryKey(
+  authIdentity: string | null,
+  target: CommentTarget | null,
+) {
+  return [
+    "comments",
+    authIdentity,
+    target?.scope ?? "",
+    target?.itemId ?? "",
+  ] as const;
+}
+
+/**
+ * Whether a cached comment list contains the target's comments — true for the
+ * target's own single-resource query and for any fan-out query whose set
+ * includes it. Both key shapes spell the target out, so this needs no cache
+ * contents. Matching per target rather than on the `["comments"]` prefix keeps
+ * an optimistic write out of other resources' caches.
+ */
+export function commentCacheCoversTarget(
+  queryKey: readonly unknown[],
+  target: CommentTarget,
+): boolean {
+  if (queryKey[0] !== "comments") return false;
+  if (queryKey[1] === "targets") {
+    return String(queryKey[3] ?? "")
+      .split(",")
+      .includes(commentTargetKey(target));
+  }
+  return queryKey[2] === target.scope && queryKey[3] === target.itemId;
+}
+
+/** Filter for every cached comment list an optimistic write has to patch. */
+function commentCachesCoveringTarget(target: CommentTarget) {
+  return {
+    queryKey: ["comments"] as const,
+    predicate: (query: { queryKey: readonly unknown[] }) =>
+      commentCacheCoversTarget(query.queryKey, target),
+  };
+}
+
+type CommentCacheFilter = ReturnType<typeof commentCachesCoveringTarget>;
+type CommentCacheSnapshot = [QueryKey, ResourceComment[] | undefined][];
+
+/** Only patches lists that have already loaded: appending to a pending query
+ *  would fabricate a result its own fetch is about to replace. */
+function appendOptimisticComment(
+  queryClient: QueryClient,
+  caches: CommentCacheFilter,
+  optimistic: ResourceComment,
+) {
+  queryClient.setQueriesData<ResourceComment[]>(caches, (current) =>
+    current ? [...current, optimistic] : current,
+  );
+}
+
+function restoreCommentCaches(
+  queryClient: QueryClient,
+  snapshot: CommentCacheSnapshot | undefined,
+) {
+  for (const [queryKey, comments] of snapshot ?? []) {
+    queryClient.setQueryData(queryKey, comments);
+  }
+}
+
+export function useCommentsQuery(
+  target: CommentTarget | null,
+  options: { live?: boolean } = {},
+) {
+  const service = useService<SessionService>(SESSION_SERVICE);
+  const authIdentity = useAuthStateValue(getAuthIdentity);
+  return useQuery({
+    queryKey: commentsQueryKey(authIdentity, target),
+    queryFn: () =>
+      target ? service.getResourceComments(target) : Promise.resolve([]),
+    enabled: authIdentity !== null && !!target,
+    staleTime: 3_000,
+    refetchInterval: options.live === false ? false : 5_000,
+    refetchIntervalInBackground: false,
+    meta: AUTH_SCOPED_QUERY_META,
+  });
+}
+
+/**
+ * One query for every comment across a set of resources. The service does the
+ * fan-out, so this stays a single-query hook and the pane makes one request
+ * instead of one per row. `live: false` by default — a list of N resources must
+ * never turn into N polling loops, and `intervalMs` lets a live caller pick a
+ * cadence that accounts for the fan-out rather than inheriting a per-row one.
+ */
+export function useCommentsForTargetsQuery(
+  targets: CommentTarget[],
+  options: { live?: boolean; intervalMs?: number } = {},
+) {
+  const service = useService<SessionService>(SESSION_SERVICE);
+  const authIdentity = useAuthStateValue(getAuthIdentity);
+  // Sorted so key identity tracks the set, not row order.
+  const key = targets.map(commentTargetKey).sort().join(",");
+  return useQuery({
+    queryKey: ["comments", "targets", authIdentity, key] as const,
+    queryFn: () => service.getResourceCommentsForTargets(targets),
+    enabled: authIdentity !== null && targets.length > 0,
+    staleTime: 3_000,
+    refetchInterval: options.live ? (options.intervalMs ?? 5_000) : false,
+    refetchIntervalInBackground: false,
+    meta: AUTH_SCOPED_QUERY_META,
+  });
+}
+
+/**
+ * @param taskId Names the task the resource belongs to, so a mention on it reaches that
+ * task's activity feed — the server can't resolve an artifact or canvas id back to a task.
+ */
+export function useCreateComment(target: CommentTarget, taskId?: string) {
+  const service = useService<SessionService>(SESSION_SERVICE);
+  const queryClient = useQueryClient();
+  const caches = commentCachesCoveringTarget(target);
+  const contextWithTask = (context: unknown) =>
+    taskId ? { ...(context as Record<string, unknown>), taskId } : context;
+
+  return useMutation({
+    mutationFn: (
+      request: Omit<CreateResourceCommentRequest, "scope" | "itemId">,
+    ) =>
+      service.createResourceComment({
+        ...request,
+        ...target,
+        context: contextWithTask(request.context),
+      }),
+    onMutate: async (request) => {
+      await queryClient.cancelQueries(caches);
+      const previous = queryClient.getQueriesData<ResourceComment[]>(caches);
+      const optimistic: ResourceComment = {
+        id: `optimistic-${crypto.randomUUID()}`,
+        created_by: null,
+        content: request.content,
+        created_at: new Date().toISOString(),
+        item_id: target.itemId,
+        item_context: contextWithTask(request.context),
+        scope: target.scope,
+        source_comment: request.sourceCommentId ?? null,
+        completed_at: null,
+      };
+      appendOptimisticComment(queryClient, caches, optimistic);
+      return { previous };
+    },
+    onError: (_error, _request, context) => {
+      restoreCommentCaches(queryClient, context?.previous);
+    },
+    onSettled: () => queryClient.invalidateQueries(caches),
+  });
+}
+
+export function useSetCommentResolved(target: CommentTarget) {
+  const service = useService<SessionService>(SESSION_SERVICE);
+  const queryClient = useQueryClient();
+  const caches = commentCachesCoveringTarget(target);
+
+  return useMutation({
+    mutationFn: ({
+      root,
+      resolved,
+    }: {
+      root: ResourceComment;
+      resolved: boolean;
+    }) => {
+      const rootContext =
+        root.item_context && typeof root.item_context === "object"
+          ? root.item_context
+          : {};
+      return service.createResourceComment({
+        ...target,
+        content: resolved ? "Resolved this thread" : "Reopened this thread",
+        sourceCommentId: root.id,
+        context: {
+          ...rootContext,
+          threadState: resolved ? "resolved" : "open",
+        },
+      });
+    },
+    onMutate: async ({ root, resolved }) => {
+      await queryClient.cancelQueries(caches);
+      const previous = queryClient.getQueriesData<ResourceComment[]>(caches);
+      const rootContext =
+        root.item_context && typeof root.item_context === "object"
+          ? root.item_context
+          : {};
+      const optimistic: ResourceComment = {
+        id: `optimistic-state-${crypto.randomUUID()}`,
+        created_by: null,
+        content: resolved ? "Resolved this thread" : "Reopened this thread",
+        created_at: new Date().toISOString(),
+        item_id: target.itemId,
+        item_context: {
+          ...rootContext,
+          threadState: resolved ? "resolved" : "open",
+        },
+        scope: target.scope,
+        source_comment: root.id,
+        completed_at: null,
+      };
+      appendOptimisticComment(queryClient, caches, optimistic);
+      return { previous };
+    },
+    onError: (_error, _variables, context) => {
+      restoreCommentCaches(queryClient, context?.previous);
+    },
+    onSettled: () => queryClient.invalidateQueries(caches),
+  });
+}
diff --git a/packages/ui/src/primitives/SafeImagePreview.tsx b/packages/ui/src/primitives/SafeImagePreview.tsx
index 9c73fbe9f7..ccd1c30cab 100644
--- a/packages/ui/src/primitives/SafeImagePreview.tsx
+++ b/packages/ui/src/primitives/SafeImagePreview.tsx
@@ -35,6 +35,9 @@ interface ZoomableImageProps {
   style?: React.CSSProperties;
   controls?: boolean;
   onError?: () => void;
+  /** Content positioned over the image and transformed with zoom/pan. Given the
+   *  current scale so markers can hold their on-screen size. */
+  overlay?: React.ReactNode | ((scale: number) => React.ReactNode);
 }
 
 export function ZoomableImage({
@@ -44,6 +47,7 @@ export function ZoomableImage({
   style,
   controls = false,
   onError,
+  overlay,
 }: ZoomableImageProps) {
   const [scale, setScale] = useState(1);
 
@@ -75,13 +79,20 @@ export function ZoomableImage({
                 justifyContent: "center",
               }}
             >
-              <img
-                src={src}
-                alt={alt}
-                draggable={false}
-                className="max-h-full max-w-full object-contain"
-                onError={onError}
-              />
+              <div className="relative flex max-h-full max-w-full">
+                <img
+                  src={src}
+                  alt={alt}
+                  draggable={false}
+                  className="max-h-full max-w-full object-contain"
+                  onError={onError}
+                />
+                {overlay && (
+                  <div className="absolute inset-0">
+                    {typeof overlay === "function" ? overlay(scale) : overlay}
+                  </div>
+                )}
+              </div>
             </TransformComponent>
             {controls && (
               <div className="-translate-x-1/2 absolute bottom-3 left-1/2 flex items-center gap-1 rounded-md border border-(--gray-a5) bg-(--color-panel-solid) p-1 shadow-sm">
diff --git a/packages/ui/src/test/setup.ts b/packages/ui/src/test/setup.ts
index 2e27ecf82e..ca0b839d6f 100644
--- a/packages/ui/src/test/setup.ts
+++ b/packages/ui/src/test/setup.ts
@@ -95,6 +95,18 @@ if (typeof Element.prototype.getAnimations !== "function") {
   Element.prototype.getAnimations = () => [];
 }
 
+// jsdom implements no scrolling at all. Panes that reveal a row — a comment
+// thread, a timeline's newest message — usually do it from an animation frame
+// or a timer, so the missing method surfaces as an uncaught exception *after*
+// the test that scheduled it has passed, failing the whole run on an unrelated
+// file. No-ops here; a test that cares about the scroll spies on these.
+if (typeof Element.prototype.scrollIntoView !== "function") {
+  Element.prototype.scrollIntoView = () => {};
+}
+if (typeof Element.prototype.scrollTo !== "function") {
+  Element.prototype.scrollTo = () => {};
+}
+
 // jsdom does not implement matchMedia; UI stores (e.g. themeStore) read it at
 // module load to resolve the system color scheme.
 Object.defineProperty(window, "matchMedia", {