@agent-native/toolkit 0.23.1 → 0.198.2

package/src/app/observability/ObservabilityDashboard.review.spec.tsx

@@ -0,0 +1,2649 @@
+// @vitest-environment happy-dom
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter, useLocation } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const {
+  mockOutputReviews,
+  mockOutputReviewDetail,
+  mockSubmitFeedback,
+  mockSaveInstructionUpdate,
+  mockSendToAgentChat,
+  mockTraces,
+  mockTraceDetail,
+  mockOpenThread,
+  mockUseActionQuery,
+  mockConfirmAgentChat,
+  mockPromoteTraceEval,
+} = vi.hoisted(() => ({
+  mockOutputReviews: vi.fn(),
+  mockOutputReviewDetail: vi.fn(),
+  mockSubmitFeedback: vi.fn(),
+  mockSaveInstructionUpdate: vi.fn(),
+  mockSendToAgentChat: vi.fn(),
+  mockTraces: vi.fn(),
+  mockTraceDetail: vi.fn(),
+  mockOpenThread: vi.fn(),
+  mockUseActionQuery: vi.fn(),
+  mockConfirmAgentChat: vi.fn(),
+  mockPromoteTraceEval: vi.fn(),
+}));
+
+function activateTab(tab: HTMLButtonElement | undefined) {
+  tab?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+}
+
+function CurrentPath() {
+  const location = useLocation();
+  return <output data-current-path>{location.pathname}</output>;
+}
+
+vi.mock("@agent-native/core/client/agent-chat", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@agent-native/core/client/agent-chat")
+  >()),
+  sendToAgentChat: mockSendToAgentChat,
+  sendToAgentChatAndConfirm: mockConfirmAgentChat,
+  requestAgentChatThreadOpen: mockOpenThread,
+}));
+
+vi.mock("@agent-native/core/client/org", () => ({
+  useOrg: () => ({
+    data: { orgId: "org-a" },
+    isLoading: false,
+    isError: false,
+  }),
+}));
+
+vi.mock("@agent-native/core/client/hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@agent-native/core/client/hooks")>()),
+  useActionQuery: mockUseActionQuery,
+}));
+
+vi.mock("./useObservability.js", () => ({
+  usePromoteTraceEval: () => ({ mutate: vi.fn(), isPending: false }),
+  useObservabilityOverview: () => ({
+    data: {
+      totalRuns: 1,
+      totalCostCents: 0,
+      avgDurationMs: 0,
+      toolSuccessRate: 1,
+      thumbsUpRate: 0,
+      avgEvalScore: 1,
+    },
+    isLoading: false,
+  }),
+  useTraces: (...args: unknown[]) => mockTraces(...args),
+  useTraceDetail: (...args: unknown[]) => mockTraceDetail(...args),
+  usePromoteTraceEval: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+    isSuccess: false,
+    data: undefined,
+    isError: false,
+    error: null,
+  }),
+  useFeedbackList: () => ({ data: [], isLoading: false }),
+  useFeedbackStats: () => ({
+    data: { total: 0, thumbsUp: 0, thumbsDown: 0, categories: {} },
+    isLoading: false,
+  }),
+  useEvalStats: () => ({
+    data: { totalEvals: 0, avgScore: 0, byCriteria: [] },
+    isLoading: false,
+  }),
+  useExperiments: () => ({ data: [], isLoading: false }),
+  useExperimentDetail: vi.fn(),
+  useExperimentResults: vi.fn(),
+  useOutputReviews: () => mockOutputReviews(),
+  useOutputReviewDetail: (runId: string | null) =>
+    mockOutputReviewDetail(runId),
+  usePromoteTraceEval: () => ({
+    mutate: mockPromoteTraceEval,
+    isPending: false,
+    isSuccess: false,
+    data: undefined,
+  }),
+  useSaveInstructionUpdate: () => ({
+    mutate: mockSaveInstructionUpdate,
+    isPending: false,
+  }),
+  useSubmitFeedback: () => ({ mutate: mockSubmitFeedback, isPending: false }),
+  useSaveReviewFeedback: () => ({
+    mutate: mockSubmitFeedback,
+    mutateAsync: mockSubmitFeedback,
+    isPending: false,
+  }),
+  usePromoteTraceEval: () => ({
+    mutate: mockPromoteTraceEval,
+    isPending: false,
+  }),
+}));
+
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
+
+import {
+  ObservabilityDashboard,
+  resolveReviewArtifactHref,
+  resolveReviewArtifactOpenHref,
+} from "./ObservabilityDashboard.js";
+
+describe("human review artifact links", () => {
+  it("keeps artifact links on the matching first-party app and environment", () => {
+    expect(
+      resolveReviewArtifactHref(
+        "analytics",
+        "dashboard-1",
+        "/dashboards/dashboard-1",
+        "beta.design.agent-native.com",
+      ),
+    ).toBe("https://beta.analytics.agent-native.com/dashboards/dashboard-1");
+    expect(
+      resolveReviewArtifactHref(
+        "slides",
+        "deck-1",
+        "/deck/deck-1/present",
+        "localhost",
+      ),
+    ).toBe("http://localhost:8086/deck/deck-1/present?reviewEmbed=1");
+    expect(
+      resolveReviewArtifactHref(
+        "design",
+        "design-1",
+        "/present/design-1",
+        "127.0.0.1",
+      ),
+    ).toBe("http://127.0.0.1:8099/present/design-1?reviewEmbed=1");
+  });
+
+  it("opens same-org designs in review mode with chat alongside", () => {
+    expect(
+      resolveReviewArtifactOpenHref("design", "design-1", "/present/design-1", {
+        threadId: "thread-1",
+        hostname: "beta.design.agent-native.com",
+      }),
+    ).toBe(
+      "https://beta.design.agent-native.com/design/design-1?editorView=overview&reviewPreview=1&thread=thread-1&agentSidebar=open",
+    );
+
+    expect(
+      resolveReviewArtifactOpenHref("design", "design-1", "/present/design-1", {
+        threadId: "thread-1",
+        readOnly: true,
+        hostname: "beta.design.agent-native.com",
+      }),
+    ).toBe(
+      "https://beta.design.agent-native.com/design/design-1?editorView=overview&reviewPreview=1&agentSidebar=closed",
+    );
+  });
+
+  it("rejects invalid artifact paths and unknown app origins", () => {
+    expect(
+      resolveReviewArtifactHref(
+        "design",
+        "design-1",
+        "https://evil.example/design/design-1",
+        "design.agent-native.com",
+      ),
+    ).toBeUndefined();
+    expect(
+      resolveReviewArtifactHref(
+        "analytics",
+        "dashboard-1",
+        "/dashboards/dashboard-1",
+        "custom.example.com",
+      ),
+    ).toBeUndefined();
+  });
+});
+
+function reviewDetail(runId: string) {
+  return document.body.querySelector<HTMLElement>(
+    `[data-review-detail-for="${runId}"]:not([hidden])`,
+  );
+}
+
+function lightboxDialog() {
+  return document.body.querySelector<HTMLElement>("[data-review-lightbox]");
+}
+
+function closeLightboxButton(dialog: HTMLElement) {
+  return Array.from(dialog.querySelectorAll<HTMLButtonElement>("button")).find(
+    (button) => button.textContent?.trim() === "Close",
+  );
+}
+
+function popoverTextarea(placeholder: string) {
+  return Array.from(
+    document.body.querySelectorAll<HTMLTextAreaElement>(
+      `textarea[placeholder="${placeholder}"]`,
+    ),
+  ).at(-1);
+}
+
+function popoverButton(input: HTMLTextAreaElement, text: string) {
+  const content =
+    input.closest<HTMLElement>('[role="dialog"]') ??
+    input.closest<HTMLElement>("[data-radix-popper-content-wrapper]");
+  return Array.from(
+    content?.querySelectorAll<HTMLButtonElement>("button") ?? [],
+  ).find((button) => button.textContent?.includes(text));
+}
+
+async function openInstructionDraft(detail: HTMLElement) {
+  await act(async () => {
+    const trigger = detail.querySelector<HTMLButtonElement>(
+      '[aria-label="Draft instruction"]',
+    );
+    trigger?.dispatchEvent(
+      new PointerEvent("pointerdown", { bubbles: true, button: 0 }),
+    );
+  });
+  const menuItem = await vi.waitFor(() => {
+    const item = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((candidate) => candidate.textContent?.includes("Draft instruction"));
+    expect(item).toBeTruthy();
+    return item!;
+  });
+  await act(async () => menuItem.click());
+  await act(
+    async () => new Promise((resolve) => window.setTimeout(resolve, 0)),
+  );
+  return vi.waitFor(() => {
+    const input = popoverTextarea(
+      "Write the instruction change for a human to review.",
+    );
+    expect(input).toBeTruthy();
+    return input!;
+  });
+}
+
+describe("ObservabilityDashboard human review", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let queryClient: QueryClient;
+  let originalLocation: Location;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("IntersectionObserver", undefined);
+    originalLocation = window.location;
+    mockUseActionQuery.mockImplementation((actionName, params) =>
+      actionName === "get-design" && params.id === "design-2"
+        ? {
+            data: {
+              files: [
+                {
+                  filename: "index.html",
+                  fileType: "text/html",
+                  content: "<main>Actual campaign design</main>",
+                },
+              ],
+            },
+            isError: false,
+            isSuccess: true,
+          }
+        : { data: undefined, isError: false, isSuccess: false },
+    );
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    mockConfirmAgentChat.mockImplementation(async (request) => {
+      mockSendToAgentChat(request);
+      return { tabId: "review-test", delivered: true };
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: [
+        {
+          runId: "run-1",
+          orgId: "org-a",
+          readOnly: false,
+          threadId: "thread-1",
+          authorEmail: "alice@example.test",
+          ask: "Design a compact analytics view",
+          answer: "Sessions grew 18% this week.",
+          threadTitle: "Weekly analytics dashboard",
+          summary: null,
+          hasInlineApp: true,
+          inlineAppTitle: "Analytics preview",
+          model: "test-model",
+          createdAt: Date.now(),
+          runCount: 1,
+          feedback: [
+            {
+              id: "vote-1",
+              feedbackType: "thumbs_down",
+              value: "",
+              createdAt: 2,
+            },
+            {
+              id: "note-1",
+              feedbackType: "text",
+              value: "Keep the chart inline.",
+              createdAt: 1,
+            },
+          ],
+          artifacts: [],
+          instructionUpdate: null,
+        },
+        {
+          runId: "run-2",
+          orgId: "org-a",
+          readOnly: false,
+          threadId: "thread-2",
+          authorEmail: "bob@example.test",
+          ask: "Make a slide from the campaign results",
+          answer: "Campaign response increased 24%.",
+          threadTitle: "Campaign results slides",
+          summary: null,
+          model: "test-model",
+          createdAt: Date.now() - 1,
+          runCount: 1,
+          feedback: [],
+          artifacts: [],
+          instructionUpdate: null,
+          hasInlineApp: true,
+          inlineAppTitle: "render",
+        },
+        {
+          runId: "run-no-preview",
+          orgId: "org-a",
+          readOnly: false,
+          threadId: "thread-no-preview",
+          ask: "",
+          answer: "-",
+          threadTitle: "Thread title while preview is missing",
+          summary: null,
+          hasInlineApp: true,
+          model: "test-model",
+          createdAt: Date.now() - 2,
+          runCount: 1,
+          feedback: [],
+          artifacts: [],
+          instructionUpdate: null,
+        },
+        {
+          runId: "run-no-thread",
+          orgId: "org-a",
+          readOnly: false,
+          threadId: null,
+          ask: "Background task output",
+          answer: "No reviewable conversation.",
+          threadTitle: "",
+          summary: null,
+          hasInlineApp: false,
+          model: "test-model",
+          createdAt: Date.now() - 2,
+          runCount: 1,
+          feedback: [],
+          artifacts: [],
+          instructionUpdate: null,
+        },
+      ],
+    });
+    mockOutputReviewDetail.mockImplementation((runId: string | null) => ({
+      isLoading: false,
+      isError: false,
+      data:
+        runId === "run-1"
+          ? {
+              runId: "run-1",
+              app: {
+                serverId: "analytics",
+                toolName: "render",
+                originalToolName: "render",
+                resourceUri: "ui://analytics/render",
+                toolInput: {},
+                toolResult: {},
+                resource: {
+                  uri: "ui://analytics/render",
+                  mimeType: "text/html;profile=mcp-app",
+                  text: "<html><body>Saved analytics preview</body></html>",
+                },
+              },
+              messages: [
+                { role: "user", text: "Design a compact analytics view" },
+                { role: "assistant", text: "Sessions grew 18% this week." },
+                { role: "user", text: "Keep the chart inline." },
+              ],
+              artifacts: [],
+              summary: null,
+              ask: "Design a compact analytics view",
+              answer: "Sessions grew 18% this week.",
+            }
+          : { app: null, messages: [] },
+    }));
+    mockSubmitFeedback.mockImplementation((_input, callbacks) =>
+      callbacks?.onSuccess?.(),
+    );
+    mockSaveInstructionUpdate.mockImplementation((_input, callbacks) =>
+      callbacks?.onSuccess?.(),
+    );
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    vi.useRealTimers();
+    queryClient.clear();
+    container.remove();
+    Object.defineProperty(window, "location", {
+      configurable: true,
+      value: originalLocation,
+    });
+    vi.clearAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("opens span details, the full conversation, and tab documentation", async () => {
+    mockTraces.mockReturnValue({
+      isLoading: false,
+      data: [
+        {
+          runId: "run-1",
+          threadId: "thread-1",
+          totalSpans: 2,
+          llmCalls: 1,
+          toolCalls: 1,
+          successfulTools: 1,
+          failedTools: 0,
+          totalDurationMs: 100,
+          totalCostCentsX100: 0,
+          totalInputTokens: 2,
+          totalOutputTokens: 3,
+          model: "test-model",
+          createdAt: Date.now(),
+        },
+      ],
+    });
+    mockTraceDetail.mockReturnValue({
+      isLoading: false,
+      data: {
+        summary: {
+          runId: "run-1",
+          threadId: "thread-1",
+          totalSpans: 2,
+          llmCalls: 1,
+          toolCalls: 1,
+          successfulTools: 1,
+          failedTools: 0,
+          totalDurationMs: 100,
+          totalCostCentsX100: 0,
+          totalInputTokens: 2,
+          totalOutputTokens: 3,
+          model: "test-model",
+          createdAt: Date.now(),
+        },
+        spans: [
+          {
+            id: "span-success",
+            runId: "run-1",
+            orgId: "org-a",
+            threadId: "thread-1",
+            parentSpanId: null,
+            spanType: "tool_call",
+            name: "search",
+            inputTokens: 0,
+            outputTokens: 0,
+            cacheReadTokens: 0,
+            cacheWriteTokens: 0,
+            costCentsX100: 0,
+            durationMs: 20,
+            status: "success",
+            errorMessage: null,
+            metadata: {
+              input: { query: "latest releases" },
+              output: "Found 3 results",
+            },
+            createdAt: Date.now(),
+          },
+          {
+            id: "span-error",
+            runId: "run-1",
+            threadId: "thread-1",
+            parentSpanId: null,
+            spanType: "tool_call",
+            name: "broken-search",
+            inputTokens: 0,
+            outputTokens: 0,
+            cacheReadTokens: 0,
+            cacheWriteTokens: 0,
+            costCentsX100: 0,
+            durationMs: 10,
+            status: "error",
+            errorMessage: "Search provider returned 503",
+            metadata: { input: { query: "missing results" } },
+            createdAt: Date.now(),
+          },
+        ],
+      },
+    });
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const experimentsTab = Array.from(
+      container.querySelectorAll<HTMLButtonElement>("button"),
+    ).find((button) => button.textContent?.includes("Experiments"));
+    await act(async () => activateTab(experimentsTab));
+    expect(
+      container.querySelector<HTMLAnchorElement>('a[href*="#experiments"]'),
+    ).toBeTruthy();
+
+    const conversationsTab = Array.from(
+      container.querySelectorAll<HTMLButtonElement>("button"),
+    ).find((button) => button.textContent?.includes("Conversations"));
+    await act(async () => activateTab(conversationsTab));
+    expect(
+      container.querySelector<HTMLAnchorElement>('a[href*="#conversations"]'),
+    ).toBeTruthy();
+
+    const runRow = Array.from(container.querySelectorAll("tr")).find((row) =>
+      row.textContent?.includes("run-1"),
+    );
+    await act(async () => (runRow as HTMLTableRowElement | undefined)?.click());
+
+    const detailsButton = (spanName: string) =>
+      Array.from(
+        container.querySelectorAll<HTMLButtonElement>(
+          'button[aria-label="View details"]',
+        ),
+      ).find((button) => button.closest("tr")?.textContent?.includes(spanName));
+
+    await act(async () => detailsButton("search")?.click());
+    expect(container.textContent).toContain('"latest releases"');
+    expect(container.textContent).toContain("Found 3 results");
+
+    await act(async () => detailsButton("broken-search")?.click());
+    expect(container.textContent).toContain("Search provider returned 503");
+
+    await act(async () =>
+      Array.from(container.querySelectorAll<HTMLButtonElement>("button"))
+        .find((button) =>
+          button.textContent?.includes("Open full conversation"),
+        )
+        ?.click(),
+    );
+    expect(mockOpenThread).toHaveBeenCalledWith({ threadId: "thread-1" });
+  });
+
+  it("hides organization human review outside the admin settings surface", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    expect(
+      Array.from(container.querySelectorAll("a, button")).some((tab) =>
+        tab.textContent?.includes("Human review"),
+      ),
+    ).toBe(false);
+  });
+
+  it("routes each tab and keeps Human review second", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter
+            initialEntries={["/settings/observability/human-review"]}
+          >
+            <AgentNativeI18nProvider persistPreference={false}>
+              <ObservabilityDashboard
+                routeBasePath="/settings/observability"
+                showHumanReview
+              />
+              <CurrentPath />
+            </AgentNativeI18nProvider>
+          </MemoryRouter>
+        </QueryClientProvider>,
+      );
+    });
+
+    const tabs = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('[role="tab"]'),
+    );
+    expect(tabs.map((tab) => tab.textContent?.trim())).toEqual([
+      "Overview",
+      "Human review",
+      "Conversations",
+      "Evals",
+      "Experiments",
+      "Feedback",
+    ]);
+    expect(tabs[1]?.getAttribute("aria-selected")).toBe("true");
+    const paths = [
+      "/settings/observability/overview",
+      "/settings/observability/human-review",
+      "/settings/observability/conversations",
+      "/settings/observability/evals",
+      "/settings/observability/experiments",
+      "/settings/observability/feedback",
+    ];
+    for (const [index, path] of paths.entries()) {
+      await act(async () => activateTab(tabs[index]));
+      expect(container.querySelector("[data-current-path]")?.textContent).toBe(
+        path,
+      );
+    }
+  });
+
+  it("scopes the bulk summary request to visible review runs", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("[data-review-bulk-summary]")
+        ?.click(),
+    );
+    expect(mockSendToAgentChat).toHaveBeenCalledTimes(1);
+    expect(mockSendToAgentChat.mock.calls[0]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary-batch",
+      runIds: ["run-1", "run-2", "run-no-preview"],
+    });
+    expect(mockSendToAgentChat.mock.calls[0]?.[0].message).toContain(
+      'runId="run-1" orgId="org-a"',
+    );
+  });
+
+  it("coordinates summaries per run without blocking other runs in a thread", async () => {
+    const primary = mockOutputReviews().data[0];
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: [
+        {
+          ...primary,
+          runCount: 2,
+          runs: [
+            {
+              runId: "run-1",
+              threadId: "thread-1",
+              model: "test-model",
+              createdAt: 20,
+            },
+            {
+              runId: "run-1-older",
+              threadId: "thread-older",
+              model: "test-model",
+              createdAt: 10,
+            },
+          ],
+        },
+      ],
+    });
+    const finishSummaries: ((result: {
+      tabId: string;
+      delivered: boolean;
+    }) => void)[] = [];
+    mockConfirmAgentChat.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finishSummaries.push(resolve);
+        }),
+    );
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    await act(async () =>
+      row.querySelector<HTMLButtonElement>("[data-review-chevron]")?.click(),
+    );
+
+    const runPicker = reviewDetail("run-1")?.querySelector<HTMLSelectElement>(
+      '[aria-label="Total runs"]',
+    );
+    await act(async () => {
+      if (!runPicker) return;
+      runPicker.value = "run-1-older";
+      runPicker.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    expect(
+      reviewDetail("run-1")?.querySelector('a[href*="thread=thread-older"]'),
+    ).toBeTruthy();
+    const summaryButtons = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        'button[aria-label="Summarize with agent"]',
+      ),
+    );
+    expect(summaryButtons).toHaveLength(2);
+
+    await act(async () => summaryButtons[1]?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(1);
+    expect(mockConfirmAgentChat.mock.calls[0]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary",
+      runId: "run-1-older",
+    });
+    expect(
+      summaryButtons.map((button) => button.getAttribute("aria-busy")),
+    ).toEqual(["false", "true"]);
+    await act(async () => summaryButtons[0]?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(2);
+    expect(mockConfirmAgentChat.mock.calls[1]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary",
+      runId: "run-1",
+    });
+    expect(
+      summaryButtons.map((button) => button.getAttribute("aria-busy")),
+    ).toEqual(["true", "true"]);
+    await act(async () => summaryButtons[1]?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(2);
+
+    await act(async () =>
+      finishSummaries[0]?.({ tabId: "review-test", delivered: true }),
+    );
+    expect(
+      summaryButtons.map((button) => button.getAttribute("aria-busy")),
+    ).toEqual(["true", "false"]);
+    await act(async () =>
+      finishSummaries[1]?.({ tabId: "review-test", delivered: true }),
+    );
+    expect(
+      summaryButtons.map((button) => button.getAttribute("aria-busy")),
+    ).toEqual(["false", "false"]);
+  });
+
+  it("settles each bulk summary batch as soon as that batch finishes", async () => {
+    const template = mockOutputReviews().data[0];
+    const reviews = Array.from({ length: 26 }, (_, index) => ({
+      ...template,
+      runId: `bulk-run-${index}`,
+      threadId: `bulk-thread-${index}`,
+      threadTitle: `Bulk review ${index}`,
+      createdAt: Date.now() - index,
+      runCount: index === 0 ? 2 : 1,
+      runs:
+        index === 0
+          ? [
+              {
+                runId: "bulk-run-0",
+                model: "test-model",
+                createdAt: Date.now(),
+              },
+              {
+                runId: "bulk-run-0-older",
+                model: "test-model",
+                createdAt: Date.now() - 1,
+              },
+            ]
+          : undefined,
+      feedback: [],
+    }));
+    mockOutputReviews.mockReturnValue({ isLoading: false, data: reviews });
+    const finishBatch = new Map<
+      string,
+      (result: { tabId: string; delivered: boolean }) => void
+    >();
+    mockConfirmAgentChat.mockImplementation(
+      (request: { actionScope: { runId?: string; runIds?: string[] } }) =>
+        new Promise((resolve) => {
+          const runId =
+            request.actionScope.runId ?? request.actionScope.runIds?.[0];
+          if (runId) finishBatch.set(runId, resolve);
+        }),
+    );
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("[data-review-bulk-summary]")
+        ?.click(),
+    );
+    await vi.waitFor(() => expect(finishBatch.size).toBe(2));
+    expect(mockConfirmAgentChat.mock.calls[0]?.[0].actionScope.runIds).toEqual(
+      reviews.slice(0, 25).map((review) => review.runId),
+    );
+    expect(
+      mockConfirmAgentChat.mock.calls[0]?.[0].actionScope.runIds,
+    ).not.toContain("bulk-run-0-older");
+
+    const firstBatchRow = container.querySelector<HTMLElement>(
+      '[data-review-row="bulk-run-0"]',
+    )!;
+    await act(async () =>
+      firstBatchRow
+        .querySelector<HTMLButtonElement>("[data-review-chevron]")
+        ?.click(),
+    );
+    const detail = reviewDetail("bulk-run-0")!;
+    const runPicker = detail.querySelector<HTMLSelectElement>(
+      '[aria-label="Total runs"]',
+    )!;
+    await act(async () => {
+      runPicker.value = "bulk-run-0-older";
+      runPicker.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    const groupedSummaryButtons = Array.from(
+      firstBatchRow.querySelectorAll<HTMLButtonElement>(
+        'button[aria-label="Summarize with agent"]',
+      ),
+    );
+    expect(groupedSummaryButtons).toHaveLength(2);
+    expect(groupedSummaryButtons[0]?.getAttribute("aria-busy")).toBe("true");
+    expect(groupedSummaryButtons[1]?.getAttribute("aria-busy")).toBe("false");
+    await act(async () => groupedSummaryButtons[1]?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(3);
+    expect(mockConfirmAgentChat.mock.calls[2]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary",
+      runId: "bulk-run-0-older",
+    });
+
+    await act(async () =>
+      finishBatch.get("bulk-run-0")?.({
+        tabId: "review-test",
+        delivered: true,
+      }),
+    );
+    const secondBatchRow = container.querySelector<HTMLElement>(
+      '[data-review-row="bulk-run-25"]',
+    )!;
+    expect(
+      firstBatchRow
+        .querySelector('button[aria-label="Summarize with agent"]')
+        ?.getAttribute("aria-busy"),
+    ).toBe("false");
+    expect(
+      firstBatchRow
+        .querySelectorAll('button[aria-label="Summarize with agent"]')[1]
+        ?.getAttribute("aria-busy"),
+    ).toBe("true");
+    expect(
+      secondBatchRow
+        .querySelector('button[aria-label="Summarize with agent"]')
+        ?.getAttribute("aria-busy"),
+    ).toBe("true");
+
+    await act(async () =>
+      finishBatch.get("bulk-run-25")?.({
+        tabId: "review-test",
+        delivered: true,
+      }),
+    );
+    await act(async () =>
+      finishBatch.get("bulk-run-0-older")?.({
+        tabId: "review-test",
+        delivered: true,
+      }),
+    );
+  });
+
+  it("uses the optimistic downvote to reveal instruction improvement immediately", async () => {
+    const review = mockOutputReviews().data[0];
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: [
+        {
+          ...review,
+          feedback: [
+            {
+              id: "vote-1",
+              feedbackType: "thumbs_up",
+              value: "",
+              runId: "run-1",
+              createdAt: 2,
+            },
+            {
+              id: "note-1",
+              feedbackType: "text",
+              value: "Keep the chart inline.",
+              runId: "run-1",
+              createdAt: 1,
+            },
+          ],
+        },
+      ],
+    });
+    let finishVote: (() => void) | undefined;
+    mockSubmitFeedback.mockImplementationOnce(
+      () =>
+        new Promise<void>((resolve) => {
+          finishVote = resolve;
+        }),
+    );
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+
+    await act(async () =>
+      row
+        .querySelector<HTMLButtonElement>('[data-review-vote="down"]')
+        ?.click(),
+    );
+
+    expect(
+      Array.from(container.querySelectorAll("button")).some((button) =>
+        button.textContent?.includes("Update instructions"),
+      ),
+    ).toBe(true);
+    await act(async () => finishVote?.());
+  });
+
+  it("updates votes optimistically, expands from the chevron, and filters rows", async () => {
+    const current = mockOutputReviews().data;
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: current.map((review) =>
+        review.runId === "run-2"
+          ? {
+              ...review,
+              artifacts: [
+                {
+                  appId: "design",
+                  artifactId: "design-2",
+                  title: "Campaign design",
+                  path: "/present/design-2",
+                },
+              ],
+            }
+          : review,
+      ),
+    });
+    const finishVote = new Map<string, () => void>();
+    mockSubmitFeedback.mockImplementation(
+      (input: { runId: string }) =>
+        new Promise<void>((resolve) => finishVote.set(input.runId, resolve)),
+    );
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    expect(
+      [
+        ...container.querySelectorAll<HTMLButtonElement>(
+          "[data-review-list] button",
+        ),
+      ].every(
+        (button) =>
+          button.title.trim().length > 0 ||
+          Boolean(button.getAttribute("aria-label")?.trim()),
+      ),
+    ).toBe(true);
+
+    const search = container.querySelector<HTMLInputElement>(
+      "[data-review-search]",
+    )!;
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(search, "Design a compact analytics view");
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(container.querySelectorAll("[data-review-run-id]")).toHaveLength(1);
+    expect(
+      container.querySelector('[data-review-run-id="run-1"]'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(search, "alice@example.test");
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(container.querySelectorAll("[data-review-run-id]")).toHaveLength(1);
+    expect(
+      container.querySelector('[data-review-run-id="run-1"]'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(search, "Keep the chart inline");
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(container.querySelectorAll("[data-review-run-id]")).toHaveLength(1);
+    expect(
+      container.querySelector('[data-review-run-id="run-1"]'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(search, "Sessions grew 18% this week");
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(container.querySelectorAll("[data-review-run-id]")).toHaveLength(1);
+    expect(
+      container.querySelector('[data-review-run-id="run-1"]'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(search, "");
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    const typeFilter = container.querySelector<HTMLSelectElement>(
+      "[data-review-type-filter]",
+    )!;
+    await act(async () => {
+      typeFilter.value = "design";
+      typeFilter.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    expect(container.querySelectorAll("[data-review-run-id]")).toHaveLength(1);
+    expect(
+      container.querySelector('[data-review-run-id="run-2"]'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      typeFilter.value = "all";
+      typeFilter.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    const firstRow = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    await act(async () =>
+      firstRow
+        .querySelector<HTMLButtonElement>('[data-review-vote="up"]')
+        ?.click(),
+    );
+    expect(
+      firstRow
+        .querySelector('[data-review-vote="up"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+    expect(
+      firstRow
+        .querySelector('[data-review-vote="down"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("false");
+    expect(firstRow.querySelector('[role="status"]')?.textContent).toBeTruthy();
+    expect(
+      container
+        .querySelector<HTMLElement>('[data-review-row="run-2"]')
+        ?.querySelector<HTMLButtonElement>('[data-review-vote="up"]')?.disabled,
+    ).toBe(false);
+    const secondVote = container
+      .querySelector<HTMLElement>('[data-review-row="run-2"]')
+      ?.querySelector<HTMLButtonElement>('[data-review-vote="up"]');
+    await act(async () => secondVote?.click());
+    expect(secondVote?.getAttribute("aria-pressed")).toBe("true");
+    expect(
+      container
+        .querySelector<HTMLElement>('[data-review-row="run-2"]')
+        ?.querySelector('[role="status"]')?.textContent,
+    ).toBeTruthy();
+    await act(async () => {
+      finishVote.get("run-1")?.();
+      await Promise.resolve();
+    });
+    expect(firstRow.querySelector('[role="status"]')).toBeNull();
+    expect(
+      container
+        .querySelector<HTMLElement>('[data-review-row="run-2"]')
+        ?.querySelector('[role="status"]')?.textContent,
+    ).toBeTruthy();
+    await act(async () => {
+      finishVote.get("run-2")?.();
+      await Promise.resolve();
+    });
+
+    const secondRow = container.querySelector<HTMLElement>(
+      '[data-review-row="run-no-preview"]',
+    )!;
+    const chevron = secondRow.querySelector<HTMLButtonElement>(
+      "[data-review-chevron]",
+    )!;
+    await act(async () => chevron.click());
+    const detail = reviewDetail("run-no-preview");
+    expect(detail).not.toBeNull();
+    expect(
+      [...detail!.querySelectorAll<HTMLButtonElement>("button")].every(
+        (button) =>
+          button.title.trim().length > 0 ||
+          Boolean(button.getAttribute("aria-label")?.trim()) ||
+          Boolean(button.textContent?.trim()),
+      ),
+    ).toBe(true);
+    await act(async () =>
+      secondRow
+        .querySelector<HTMLButtonElement>("[data-review-chevron]")
+        ?.click(),
+    );
+    expect(reviewDetail("run-no-preview")).toBeNull();
+  });
+
+  it("rolls back a failed optimistic vote and reports the failure", async () => {
+    let finishSecondVote: (() => void) | undefined;
+    mockSubmitFeedback
+      .mockRejectedValueOnce(new Error("offline"))
+      .mockImplementationOnce(
+        () =>
+          new Promise<void>((resolve) => {
+            finishSecondVote = resolve;
+          }),
+      );
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+
+    await act(async () =>
+      row.querySelector<HTMLButtonElement>('[data-review-vote="up"]')?.click(),
+    );
+
+    expect(
+      row
+        .querySelector('[data-review-vote="up"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("false");
+    expect(row.querySelector('[role="status"]')?.textContent).toBeTruthy();
+
+    const secondRow = container.querySelector<HTMLElement>(
+      '[data-review-row="run-2"]',
+    )!;
+    await act(async () =>
+      secondRow
+        .querySelector<HTMLButtonElement>('[data-review-vote="up"]')
+        ?.click(),
+    );
+    expect(row.querySelector('[role="status"]')?.textContent).toBeTruthy();
+    expect(
+      secondRow.querySelector('[role="status"]')?.textContent,
+    ).toBeTruthy();
+    await act(async () => finishSecondVote?.());
+  });
+
+  it("reconciles the latest vote for a historical run in a grouped thread", async () => {
+    const primary = mockOutputReviews().data.find(
+      (review) => review.runId === "run-1",
+    )!;
+    const makeReviews = (feedback: typeof primary.feedback) => [
+      {
+        ...primary,
+        runCount: 2,
+        runs: [
+          { runId: "run-1", model: "model-a", createdAt: 30 },
+          { runId: "run-2", model: "model-b", createdAt: 20 },
+        ],
+        feedback,
+      },
+    ];
+    const latestDown = {
+      id: "vote-run-2-latest-down",
+      runId: "run-2",
+      feedbackType: "thumbs_down" as const,
+      value: "",
+      createdAt: 20,
+    };
+    const oldUp = {
+      id: "vote-run-2-old-up",
+      runId: "run-2",
+      feedbackType: "thumbs_up" as const,
+      value: "",
+      createdAt: 10,
+    };
+    let finishVote:
+      | ((entry: { id: string; createdAt: number }) => void)
+      | undefined;
+    mockSubmitFeedback.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finishVote = resolve;
+        }),
+    );
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: makeReviews([latestDown, oldUp]),
+    });
+
+    const renderDashboard = async () =>
+      act(async () =>
+        root.render(
+          <QueryClientProvider client={queryClient}>
+            <AgentNativeI18nProvider persistPreference={false}>
+              <ObservabilityDashboard showHumanReview />
+            </AgentNativeI18nProvider>
+          </QueryClientProvider>,
+        ),
+      );
+    await renderDashboard();
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+    const detail = reviewDetail("run-1")!;
+    const runPicker = detail.querySelector<HTMLSelectElement>(
+      '[aria-label="Total runs"]',
+    )!;
+    await act(async () => {
+      runPicker.value = "run-2";
+      runPicker.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    expect(
+      detail
+        .querySelector('[aria-label="Thumbs down"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+
+    await act(async () =>
+      detail
+        .querySelector<HTMLButtonElement>('[aria-label="Thumbs up"]')
+        ?.click(),
+    );
+    expect(
+      detail
+        .querySelector('[aria-label="Thumbs up"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: makeReviews([latestDown, oldUp]),
+    });
+    await renderDashboard();
+    expect(
+      reviewDetail("run-1")
+        ?.querySelector('[aria-label="Thumbs up"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+
+    await act(async () =>
+      finishVote?.({ id: "vote-run-2-optimistic-up", createdAt: 30 }),
+    );
+    expect(
+      reviewDetail("run-1")
+        ?.querySelector('[aria-label="Thumbs up"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: makeReviews([
+        {
+          id: "vote-run-2-optimistic-up",
+          runId: "run-2",
+          feedbackType: "thumbs_up",
+          value: "",
+          createdAt: 30,
+        },
+        latestDown,
+        oldUp,
+      ]),
+    });
+    await renderDashboard();
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: makeReviews([
+        {
+          ...latestDown,
+          id: "vote-run-2-newer-down",
+          createdAt: 40,
+        },
+        {
+          id: "vote-run-2-optimistic-up",
+          runId: "run-2",
+          feedbackType: "thumbs_up",
+          value: "",
+          createdAt: 30,
+        },
+        latestDown,
+        oldUp,
+      ]),
+    });
+    await renderDashboard();
+    expect(
+      reviewDetail("run-1")
+        ?.querySelector('[aria-label="Thumbs down"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+
+  it("uses the row's latest run vote for sentiment and filtering", async () => {
+    const primary = mockOutputReviews().data.find(
+      (review) => review.runId === "run-1",
+    )!;
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: [
+        {
+          ...primary,
+          runCount: 2,
+          runs: [
+            { runId: "run-1", model: "model-a", createdAt: 30 },
+            { runId: "run-2", model: "model-b", createdAt: 20 },
+          ],
+          feedback: [
+            {
+              id: "vote-run-2-down",
+              runId: "run-2",
+              feedbackType: "thumbs_down",
+              value: "",
+              createdAt: 40,
+            },
+            {
+              id: "note-run-2",
+              runId: "run-2",
+              feedbackType: "text",
+              value: "The earlier version used the wrong artifact.",
+              createdAt: 35,
+            },
+            {
+              id: "vote-run-1-up",
+              runId: "run-1",
+              feedbackType: "thumbs_up",
+              value: "",
+              createdAt: 30,
+            },
+          ],
+        },
+      ],
+    });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+
+    const improveButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>("button"),
+    ).find((button) => button.textContent?.includes("Update instructions"));
+    expect(improveButton).toBeTruthy();
+    await act(async () => improveButton?.click());
+    expect(mockSendToAgentChat.mock.calls[0]?.[0].actionScope).toEqual({
+      kind: "observability-feedback-improvement",
+      runId: "run-2",
+    });
+    expect(mockSendToAgentChat.mock.calls[0]?.[0].message).toContain(
+      "The earlier version used the wrong artifact.",
+    );
+
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    expect(
+      row
+        .querySelector('[data-review-vote="up"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+    await act(async () =>
+      Array.from(container.querySelectorAll<HTMLButtonElement>("button"))
+        .find((button) => button.textContent === "Thumbs up")
+        ?.click(),
+    );
+    expect(container.querySelector('[data-review-row="run-1"]')).toBeTruthy();
+    expect(container.querySelector('[data-review-row="run-2"]')).toBeNull();
+  });
+
+  it("shows note-save failures beside the note save action", async () => {
+    mockSubmitFeedback.mockRejectedValue(new Error("offline"));
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+    const detail = reviewDetail("run-1")!;
+    await act(async () =>
+      detail
+        .querySelector<HTMLButtonElement>('[aria-label="Add feedback"]')
+        ?.click(),
+    );
+    const input = popoverTextarea("What should change or stay the same?")!;
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(input, "Please improve the chart labels.");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    const save = popoverButton(input, "Save feedback")!;
+    await act(async () => save.click());
+    await vi.waitFor(() =>
+      expect(
+        save.parentElement?.querySelector('[role="status"]')?.textContent,
+      ).toBeTruthy(),
+    );
+    expect(
+      detail.querySelector(
+        '[role="group"][aria-label="Review feedback"] [role="status"]',
+      ),
+    ).toBeNull();
+  });
+
+  it("keeps cross-organization review rows read-only", async () => {
+    const current = mockOutputReviews().data;
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: current.map((review) =>
+        review.runId === "run-2"
+          ? { ...review, orgId: "org-b", readOnly: true }
+          : review,
+      ),
+    });
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-2"]',
+    )!;
+    expect(row.querySelectorAll("[data-review-vote]")).toHaveLength(0);
+    expect(row.querySelector('[aria-label="Summarize with agent"]')).toBeNull();
+    await act(async () =>
+      row.querySelector<HTMLButtonElement>("[data-review-chevron]")?.click(),
+    );
+    expect(reviewDetail("run-2")?.textContent).toContain(
+      "Cross-organization review is read-only.",
+    );
+    expect(
+      reviewDetail("run-2")?.querySelector('[aria-label="Thumbs up"]'),
+    ).toBeNull();
+    expect(
+      reviewDetail("run-2")?.querySelector("[data-review-author-email]")
+        ?.textContent,
+    ).toBe("bob@example.test");
+    expect(
+      reviewDetail("run-2")?.querySelector('a[href*="thread=thread-2"]'),
+    ).toBeNull();
+  });
+
+  it("shares summary progress between the row and its expanded detail", async () => {
+    let finishSummary: ((result: { delivered: boolean }) => void) | undefined;
+    mockConfirmAgentChat.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finishSummary = resolve;
+        }),
+    );
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    const summaryButtons = () =>
+      Array.from(
+        row.querySelectorAll<HTMLButtonElement>(
+          '[aria-label="Summarize with agent"]',
+        ),
+      );
+    expect(summaryButtons()).toHaveLength(2);
+    await act(async () => summaryButtons()[0]?.click());
+    expect(
+      summaryButtons().every(
+        (button) => button.getAttribute("aria-busy") === "true",
+      ),
+    ).toBe(true);
+    await act(async () => summaryButtons()[1]?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(1);
+
+    await act(async () => finishSummary?.({ delivered: true }));
+    expect(
+      summaryButtons().every(
+        (button) => button.getAttribute("aria-busy") === "false",
+      ),
+    ).toBe(true);
+  });
+
+  it("clears row and bulk queued states when refreshed reviews contain summaries", async () => {
+    mockConfirmAgentChat.mockResolvedValue({
+      tabId: "review-test",
+      delivered: true,
+    });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("[data-review-bulk-summary]")
+        ?.click(),
+    );
+
+    await vi.waitFor(() => {
+      expect(container.textContent).toContain(
+        "Request queued. The summary will appear here after the agent saves it.",
+      );
+    });
+    const queuedRows = Array.from(
+      container.querySelectorAll<HTMLElement>("[data-review-row]"),
+    );
+    expect(
+      queuedRows.every((row) => row.querySelector('[role="status"]')),
+    ).toBe(true);
+
+    const savedSummary = {
+      ask: "Summarize the request",
+      outcome: "The work is complete",
+      artifacts: [],
+    };
+    const summaryUpdatedAt = Date.now();
+    const currentReviews = mockOutputReviews().data;
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: currentReviews.map((review: Record<string, unknown>) =>
+        review.threadId
+          ? { ...review, summary: savedSummary, summaryUpdatedAt }
+          : review,
+      ),
+    });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    await vi.waitFor(() => {
+      expect(container.querySelector('[role="status"]')).toBeNull();
+    });
+  });
+
+  it("keeps a run queued until that run's summary is newer", async () => {
+    mockConfirmAgentChat.mockResolvedValue({
+      tabId: "review-test",
+      delivered: true,
+    });
+    const summaryUpdatedAt = 100;
+    const savedSummary = {
+      ask: "Summarize the request",
+      outcome: "The work is complete",
+      artifacts: [],
+    };
+    const reviews = mockOutputReviews().data.map(
+      (review: Record<string, unknown>) =>
+        review.runId === "run-1"
+          ? {
+              ...review,
+              summary: savedSummary,
+              runs: [
+                { runId: "run-1", model: "test-model", createdAt: 30 },
+                {
+                  runId: "run-2",
+                  model: "older-model",
+                  createdAt: 20,
+                  summaryUpdatedAt,
+                },
+              ],
+            }
+          : review,
+    );
+    mockOutputReviews.mockReturnValue({ isLoading: false, data: reviews });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    await act(async () =>
+      row.querySelector<HTMLButtonElement>("[data-review-chevron]")?.click(),
+    );
+    const regenerateButton = reviewDetail(
+      "run-1",
+    )?.querySelector<HTMLButtonElement>('[aria-label="Regenerate summary"]');
+    expect(regenerateButton).toBeTruthy();
+    await act(async () => regenerateButton?.click());
+    await vi.waitFor(() => {
+      expect(container.textContent).toContain(
+        "Request queued. The summary will appear here after the agent saves it.",
+      );
+    });
+
+    mockOutputReviews.mockReturnValue({ isLoading: false, data: reviews });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    expect(container.textContent).toContain(
+      "Request queued. The summary will appear here after the agent saves it.",
+    );
+
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: reviews.map((review: Record<string, unknown>) =>
+        review.runId === "run-1"
+          ? {
+              ...review,
+              runs: [
+                {
+                  runId: "run-1",
+                  model: "test-model",
+                  createdAt: 30,
+                  summaryUpdatedAt: summaryUpdatedAt + 1,
+                },
+                {
+                  runId: "run-2",
+                  model: "older-model",
+                  createdAt: 20,
+                  summaryUpdatedAt,
+                },
+              ],
+            }
+          : review,
+      ),
+    });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    await vi.waitFor(() => {
+      expect(container.querySelector('[role="status"]')).toBeNull();
+    });
+  });
+
+  it("clears expired bulk status when the requested summaries arrive late", async () => {
+    vi.useFakeTimers();
+    mockConfirmAgentChat.mockResolvedValue({
+      tabId: "review-test",
+      delivered: true,
+    });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    const bulkButton = container.querySelector<HTMLButtonElement>(
+      "[data-review-bulk-summary]",
+    );
+    expect(bulkButton).toBeTruthy();
+    await act(async () => {
+      bulkButton?.click();
+      for (let index = 0; index < 10; index += 1) await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toContain(
+      "Request queued.",
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10 * 60 * 1000);
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toContain(
+      "No summary has appeared yet.",
+    );
+
+    const savedSummary = {
+      ask: "Summarize the request",
+      outcome: "The work is complete",
+      artifacts: [],
+    };
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: mockOutputReviews().data.map((review: Record<string, unknown>) =>
+        review.threadId
+          ? { ...review, summary: savedSummary, summaryUpdatedAt: Date.now() }
+          : review,
+      ),
+    });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+
+  it("makes a queued summary retryable with an explicit expiry state", async () => {
+    vi.useFakeTimers();
+    mockConfirmAgentChat.mockResolvedValue({
+      tabId: "review-test",
+      delivered: true,
+    });
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    const summarizeButton = row.querySelector<HTMLButtonElement>(
+      '[aria-label="Summarize with agent"]',
+    )!;
+    await act(async () => summarizeButton.click());
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(summarizeButton.getAttribute("aria-disabled")).toBe("true");
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10 * 60 * 1000);
+    });
+
+    expect(summarizeButton.getAttribute("aria-disabled")).toBe("false");
+    expect(row.textContent).toContain(
+      "No summary has appeared yet. You can retry, but the agent may still be working.",
+    );
+  });
+
+  it("coordinates bulk and per-run summary requests", async () => {
+    const finishSummaries: ((result: {
+      tabId: string;
+      delivered: boolean;
+    }) => void)[] = [];
+    mockConfirmAgentChat.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finishSummaries.push(resolve);
+        }),
+    );
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    await act(async () =>
+      row
+        .querySelector<HTMLButtonElement>('[aria-label="Summarize with agent"]')
+        ?.click(),
+    );
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("[data-review-bulk-summary]")
+        ?.click(),
+    );
+
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(2);
+    expect(mockConfirmAgentChat.mock.calls[1]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary-batch",
+      runIds: ["run-2", "run-no-preview"],
+    });
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+    const summaryButtons = Array.from(
+      row.querySelectorAll<HTMLButtonElement>(
+        '[aria-label="Summarize with agent"]',
+      ),
+    );
+    expect(summaryButtons).toHaveLength(2);
+    expect(
+      summaryButtons.every(
+        (button) => button.getAttribute("aria-busy") === "true",
+      ),
+    ).toBe(true);
+    await act(async () => summaryButtons[1]?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(2);
+
+    await act(async () => {
+      for (const finish of finishSummaries)
+        finish({ tabId: "review-test", delivered: true });
+    });
+    expect(
+      summaryButtons.every(
+        (button) => button.getAttribute("aria-busy") === "false",
+      ),
+    ).toBe(true);
+  });
+
+  it("keeps primary bulk summaries independent of historical run requests", async () => {
+    const primary = mockOutputReviews().data.find(
+      (review) => review.runId === "run-1",
+    )!;
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: [
+        {
+          ...primary,
+          runCount: 2,
+          runs: [
+            { runId: "run-1", model: "model-a", createdAt: 30 },
+            { runId: "run-2", model: "model-b", createdAt: 20 },
+          ],
+        },
+      ],
+    });
+    const finishSummaries = new Map<
+      string,
+      (result: { tabId: string; delivered: boolean }) => void
+    >();
+    mockConfirmAgentChat.mockImplementation(
+      (request: { actionScope: { runId?: string; runIds?: string[] } }) =>
+        new Promise((resolve) => {
+          const runId =
+            request.actionScope.runId ?? request.actionScope.runIds?.[0];
+          if (runId) finishSummaries.set(runId, resolve);
+        }),
+    );
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    await act(async () =>
+      Array.from(container.querySelectorAll("button"))
+        .find((button) => button.textContent?.includes("Human review"))
+        ?.dispatchEvent(
+          new MouseEvent("mousedown", { bubbles: true, button: 0 }),
+        ),
+    );
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+    const runSelector =
+      reviewDetail("run-1")?.querySelector<HTMLSelectElement>("select");
+    expect(runSelector).toBeTruthy();
+    await act(async () => {
+      if (!runSelector) return;
+      runSelector.value = "run-2";
+      runSelector.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    await act(async () =>
+      reviewDetail("run-1")
+        ?.querySelector<HTMLButtonElement>(
+          '[aria-label="Summarize with agent"]',
+        )
+        ?.click(),
+    );
+
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(1);
+    expect(mockConfirmAgentChat.mock.calls[0]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary",
+      runId: "run-2",
+    });
+    const bulkSummary = container.querySelector<HTMLButtonElement>(
+      "[data-review-bulk-summary]",
+    );
+    expect(bulkSummary).not.toBeNull();
+    await act(async () => bulkSummary?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(2);
+    expect(mockConfirmAgentChat.mock.calls[1]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary-batch",
+      runIds: ["run-1"],
+    });
+    await act(async () =>
+      finishSummaries.get("run-2")?.({
+        tabId: "review-test",
+        delivered: true,
+      }),
+    );
+    await act(async () =>
+      finishSummaries.get("run-1")?.({
+        tabId: "review-test",
+        delivered: true,
+      }),
+    );
+  });
+
+  it("blocks duplicate summaries after delivery and excludes them from bulk", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    await act(async () =>
+      Array.from(container.querySelectorAll("button"))
+        .find((button) => button.textContent?.includes("Human review"))
+        ?.dispatchEvent(
+          new MouseEvent("mousedown", { bubbles: true, button: 0 }),
+        ),
+    );
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    const summarizeButton = row.querySelector<HTMLButtonElement>(
+      '[aria-label="Summarize with agent"]',
+    )!;
+    await act(async () => summarizeButton.click());
+
+    expect(summarizeButton.disabled).toBe(false);
+    expect(summarizeButton.getAttribute("aria-disabled")).toBe("true");
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(1);
+    await act(async () => summarizeButton.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(1);
+    const bulkSummary = container.querySelector<HTMLButtonElement>(
+      "[data-review-bulk-summary]",
+    );
+    expect(bulkSummary?.textContent).toContain("2");
+    await act(async () => bulkSummary?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(2);
+    expect(mockConfirmAgentChat.mock.calls[1]?.[0].actionScope).toEqual({
+      kind: "observability-review-summary-batch",
+      runIds: ["run-2", "run-no-preview"],
+    });
+  });
+
+  it("marks per-run buttons busy while a bulk summary is in flight", async () => {
+    let finishSummary:
+      | ((result: { tabId: string; delivered: boolean }) => void)
+      | undefined;
+    mockConfirmAgentChat.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finishSummary = resolve;
+        }),
+    );
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("[data-review-bulk-summary]")
+        ?.click(),
+    );
+
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(1);
+    const row = container.querySelector<HTMLElement>(
+      '[data-review-row="run-1"]',
+    )!;
+    const summaryButtons = Array.from(
+      row.querySelectorAll<HTMLButtonElement>(
+        '[aria-label="Summarize with agent"]',
+      ),
+    );
+    expect(summaryButtons).toHaveLength(2);
+    expect(
+      summaryButtons.every(
+        (button) => button.getAttribute("aria-busy") === "true",
+      ),
+    ).toBe(true);
+    await act(async () => summaryButtons[1]?.click());
+    expect(mockConfirmAgentChat).toHaveBeenCalledTimes(1);
+
+    await act(async () =>
+      finishSummary?.({ tabId: "review-test", delivered: true }),
+    );
+  });
+
+  it("expands one inline row with its preview, transcript, thread link, and actions", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    expect(reviewTab).toBeTruthy();
+    await act(async () => activateTab(reviewTab));
+
+    expect(container.querySelectorAll("[data-review-run-id]")).toHaveLength(3);
+    expect(
+      container.querySelector('[data-review-run-id="run-no-thread"]'),
+    ).toBeNull();
+    const noPreviewRow = container.querySelector<HTMLButtonElement>(
+      '[data-review-run-id="run-no-preview"]',
+    );
+    expect(noPreviewRow?.textContent).toContain(
+      "Thread title while preview is missing",
+    );
+    expect(noPreviewRow?.querySelector("[data-preview-kind]")).toBeNull();
+    expect(
+      container.querySelector('[data-preview-kind="app-thumbnail"]'),
+    ).toBeNull();
+    expect(
+      container.querySelector("[data-review-detail-for]:not([hidden])"),
+    ).toBeNull();
+    expect(document.body.querySelector('[role="dialog"]')).toBeNull();
+    const reviewRow = container.querySelector<HTMLButtonElement>(
+      '[data-review-run-id="run-1"]',
+    );
+    expect(reviewRow?.textContent).toContain("Weekly analytics dashboard");
+    expect(reviewRow?.textContent).not.toContain(
+      "Design a compact analytics view",
+    );
+    expect(reviewRow?.textContent).not.toContain("Keep the chart inline.");
+
+    await act(async () => reviewRow?.click());
+
+    const detail = await vi.waitFor(() => {
+      const current = reviewDetail("run-1");
+      expect(current).toBeTruthy();
+      return current!;
+    });
+    expect(reviewRow?.getAttribute("aria-expanded")).toBe("true");
+    await vi.waitFor(async () => {
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 20));
+      });
+      expect(
+        detail.querySelector("[data-review-preview] iframe"),
+      ).not.toBeNull();
+    });
+    expect(
+      detail.querySelector("[data-review-transcript]")?.textContent,
+    ).toContain("Keep the chart inline.");
+    const email = detail.querySelector<HTMLElement>(
+      "[data-review-author-email]",
+    );
+    expect(email?.textContent).toBe("alice@example.test");
+    expect(email?.parentElement?.lastElementChild).toBe(email);
+    const threadLink = detail.querySelector<HTMLAnchorElement>(
+      'a[href*="thread=thread-1"]',
+    );
+    expect(threadLink?.getAttribute("aria-label")).toBeTruthy();
+    const threadUrl = new URL(threadLink!.href);
+    expect(threadUrl.searchParams.get("thread")).toBe("thread-1");
+    expect(threadUrl.searchParams.get("agentSidebar")).toBe("open");
+    const summarizeButton = detail.querySelector<HTMLButtonElement>(
+      '[aria-label="Summarize with agent"]',
+    );
+    expect(summarizeButton).toBeTruthy();
+    expect(summarizeButton?.textContent).toContain("Summarize with agent");
+    await act(async () => summarizeButton?.click());
+    expect(mockSendToAgentChat).toHaveBeenCalledWith(
+      expect.objectContaining({
+        submit: true,
+        openSidebar: true,
+        usageLabel: "observability:human-review-summary",
+        message: expect.stringContaining('runId "run-1" and orgId "org-a"'),
+      }),
+    );
+    expect(document.body.querySelector('[role="dialog"]')).toBeNull();
+    expect(
+      detail
+        .querySelector('[aria-label="Thumbs down"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+    expect(
+      detail
+        .querySelector('[aria-label="Thumbs up"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("false");
+    await act(async () =>
+      detail.querySelector('[aria-label="Thumbs up"]')?.click(),
+    );
+    expect(mockSubmitFeedback).toHaveBeenCalledWith(
+      expect.objectContaining({ runId: "run-1", feedbackType: "thumbs_up" }),
+    );
+
+    await act(async () =>
+      detail
+        .querySelector<HTMLButtonElement>("[data-review-lightbox-trigger]")
+        ?.click(),
+    );
+    const lightbox = await vi.waitFor(() => {
+      const current = lightboxDialog();
+      expect(current).toBeTruthy();
+      return current!;
+    });
+    expect(lightbox.querySelector('[aria-label="Thumbs up"]')).toBeNull();
+    await act(async () => closeLightboxButton(lightbox)?.click());
+    await vi.waitFor(() => expect(lightboxDialog()).toBeNull());
+    expect(reviewDetail("run-1")).not.toBeNull();
+
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-2"]')
+        ?.click(),
+    );
+    expect(reviewDetail("run-1")).toBeNull();
+    expect(reviewDetail("run-2")).not.toBeNull();
+    expect(
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-2"]')
+        ?.getAttribute("aria-expanded"),
+    ).toBe("true");
+  });
+
+  it("shows a saved summary and previews the latest real artifact only", async () => {
+    Object.defineProperty(window, "location", {
+      configurable: true,
+      value: new URL(
+        "https://beta.design.agent-native.com/settings/observability/human-review",
+      ),
+    });
+    mockOutputReviews.mockReturnValue({
+      isLoading: false,
+      data: [
+        {
+          runId: "run-summary",
+          orgId: "org-a",
+          readOnly: false,
+          threadId: "thread-summary",
+          authorEmail: "reviewer@example.test",
+          ask: "Legacy raw ask",
+          answer: "Legacy raw outcome",
+          threadTitle: "Thread title before summary",
+          summary: {
+            ask: "Compare the campaign charts",
+            outcome: "The updated analytics dashboard shows a clear lift.",
+            artifacts: [
+              {
+                appId: "analytics",
+                artifactId: "dashboard-1",
+                title: "Campaign dashboard",
+                path: "/dashboards/dashboard-1",
+              },
+              {
+                appId: "design",
+                artifactId: "design-2",
+                title: "Campaign design",
+                path: "/present/design-2",
+              },
+              {
+                appId: "design",
+                artifactId: "design-evil",
+                title: "Untrusted external path",
+                path: "https://example.com/design-evil",
+              },
+            ],
+          },
+          artifacts: [
+            {
+              appId: "analytics",
+              artifactId: "dashboard-1",
+              title: "Campaign dashboard",
+              path: "/dashboards/dashboard-1",
+            },
+            {
+              appId: "design",
+              artifactId: "design-2",
+              title: "Campaign design",
+              path: "/present/design-2",
+            },
+            {
+              appId: "design",
+              artifactId: "design-evil",
+              title: "Untrusted external path",
+              path: "https://example.com/design-evil",
+            },
+          ],
+          hasInlineApp: false,
+          model: "test-model",
+          createdAt: Date.now(),
+          runCount: 1,
+          feedback: [],
+          instructionUpdate: null,
+        },
+      ],
+    });
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+
+    const row = container.querySelector<HTMLButtonElement>(
+      '[data-review-run-id="run-summary"]',
+    );
+    expect(row?.textContent).toContain("Compare the campaign charts");
+    expect(row?.textContent).not.toContain("Thread title before summary");
+    await vi.waitFor(() =>
+      expect(
+        container.querySelector(
+          '[data-preview-kind="design-iframe-thumbnail"] iframe[srcdoc]',
+        ),
+      ).not.toBeNull(),
+    );
+    await act(async () => row?.click());
+
+    const detail = await vi.waitFor(() => {
+      const current = reviewDetail("run-summary");
+      expect(current).toBeTruthy();
+      return current!;
+    });
+    expect(
+      detail.querySelector("[data-review-summary]")?.textContent,
+    ).toContain("The updated analytics dashboard shows a clear lift.");
+    expect(detail.querySelector("iframe[srcdoc]")).not.toBeNull();
+    expect(
+      detail.querySelector("iframe[srcdoc]")?.getAttribute("srcdoc"),
+    ).toContain("Actual campaign design");
+    expect(detail.querySelector('iframe[src*="example.com"]')).toBeNull();
+    const designLink = Array.from(
+      detail.querySelectorAll<HTMLAnchorElement>("a[href]"),
+    ).find((link) => new URL(link.href).pathname === "/design/design-2");
+    expect(designLink).toBeTruthy();
+    const designUrl = new URL(designLink!.href);
+    expect(designUrl.searchParams.get("reviewPreview")).toBe("1");
+    expect(designUrl.searchParams.get("thread")).toBe("thread-summary");
+    expect(designUrl.searchParams.get("agentSidebar")).toBe("open");
+    expect(
+      detail.querySelector("[data-review-author-email]")?.textContent,
+    ).toBe("reviewer@example.test");
+    expect(
+      Array.from(detail.querySelectorAll("button")).some((button) =>
+        button.textContent?.includes("Summarize with agent"),
+      ),
+    ).toBe(false);
+  });
+
+  it("keeps notes scoped to their review and allows instruction drafts", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+
+    let detail = await vi.waitFor(() => {
+      const current = reviewDetail("run-1");
+      expect(current).toBeTruthy();
+      return current!;
+    });
+    await act(async () =>
+      detail.querySelector('[aria-label="Add feedback"]')?.click(),
+    );
+    const feedbackInput = await vi.waitFor(() => {
+      const input = popoverTextarea("What should change or stay the same?");
+      expect(input).toBeTruthy();
+      return input!;
+    });
+    expect(feedbackInput).toBeTruthy();
+    await act(async () => {
+      if (!feedbackInput) return;
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(feedbackInput, "Only for the first review");
+      feedbackInput.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-2"]')
+        ?.click(),
+    );
+
+    detail = await vi.waitFor(() => {
+      const current = reviewDetail("run-2");
+      expect(current).toBeTruthy();
+      return current!;
+    });
+    await act(async () =>
+      detail.querySelector('[aria-label="Add feedback"]')?.click(),
+    );
+    const secondFeedbackInput = await vi.waitFor(() => {
+      const input = popoverTextarea("What should change or stay the same?");
+      expect(input).toBeTruthy();
+      return input!;
+    });
+    expect(secondFeedbackInput?.value).toBe("");
+    await act(async () =>
+      detail.querySelector('[aria-label="Add feedback"]')?.click(),
+    );
+    await vi.waitFor(() =>
+      expect(
+        popoverTextarea("What should change or stay the same?"),
+      ).toBeUndefined(),
+    );
+
+    const secondRow = container.querySelector<HTMLButtonElement>(
+      '[data-review-run-id="run-2"]',
+    );
+    await act(async () => secondRow?.click());
+    await vi.waitFor(() => expect(reviewDetail("run-2")).toBeNull());
+    await act(async () => secondRow?.click());
+    detail = await vi.waitFor(() => {
+      const current = reviewDetail("run-2");
+      expect(current).toBeTruthy();
+      return current!;
+    });
+
+    const instructionInput = await openInstructionDraft(detail);
+    expect(instructionInput).toBeTruthy();
+    await act(async () => {
+      if (!instructionInput) return;
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(instructionInput, "Keep the slide title concise");
+      instructionInput.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    const saveButton = popoverButton(instructionInput, "Save draft update");
+    await act(async () => saveButton?.click());
+    expect(mockSaveInstructionUpdate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        runId: "run-2",
+        threadId: "thread-2",
+        instruction: "Keep the slide title concise",
+      }),
+      expect.any(Object),
+    );
+  });
+
+  it("keeps a newer row's drafts open when an earlier save completes", async () => {
+    let finishFeedbackA: (() => void) | undefined;
+    let finishInstructionA: (() => void) | undefined;
+    mockSubmitFeedback.mockImplementation(
+      (input: { runId: string }) =>
+        new Promise<void>((resolve) => {
+          if (input.runId === "run-1") finishFeedbackA = resolve;
+          else resolve();
+        }),
+    );
+    mockSaveInstructionUpdate.mockImplementation((_input, callbacks) => {
+      finishInstructionA = () => callbacks?.onSuccess?.();
+    });
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <AgentNativeI18nProvider persistPreference={false}>
+            <ObservabilityDashboard showHumanReview />
+          </AgentNativeI18nProvider>
+        </QueryClientProvider>,
+      );
+    });
+    const reviewTab = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Human review"),
+    );
+    await act(async () => activateTab(reviewTab));
+
+    const openRun = async (runId: string) => {
+      await act(async () => {
+        container
+          .querySelector<HTMLButtonElement>(`[data-review-run-id="${runId}"]`)
+          ?.click();
+      });
+      await vi.waitFor(() => expect(reviewDetail(runId)).toBeTruthy());
+    };
+    const setText = async (input: HTMLTextAreaElement, value: string) => {
+      await act(async () => {
+        const setter = Object.getOwnPropertyDescriptor(
+          window.HTMLTextAreaElement.prototype,
+          "value",
+        )?.set;
+        setter?.call(input, value);
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+    };
+
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>('[data-review-run-id="run-1"]')
+        ?.click(),
+    );
+    await act(async () =>
+      reviewDetail("run-1")
+        ?.querySelector<HTMLButtonElement>('[aria-label="Add feedback"]')
+        ?.click(),
+    );
+    let input = popoverTextarea("What should change or stay the same?");
+    expect(input).toBeTruthy();
+    await setText(input!, "Feedback for A");
+    await act(async () => popoverButton(input!, "Save feedback")?.click());
+
+    await openRun("run-2");
+    await act(async () =>
+      reviewDetail("run-2")
+        ?.querySelector<HTMLButtonElement>('[aria-label="Add feedback"]')
+        ?.click(),
+    );
+    input = document.body.querySelector<HTMLTextAreaElement>(
+      'textarea[placeholder="What should change or stay the same?"]',
+    );
+    expect(input).toBeTruthy();
+    await setText(input!, "Feedback for B");
+    await act(async () => {
+      finishFeedbackA?.();
+      await Promise.resolve();
+    });
+    expect(input?.value).toBe("Feedback for B");
+
+    await openRun("run-1");
+    input = await openInstructionDraft(reviewDetail("run-1")!);
+    await setText(input, "Instruction for A");
+    await act(async () => popoverButton(input, "Save draft update")?.click());
+
+    await openRun("run-2");
+    input = await openInstructionDraft(reviewDetail("run-2")!);
+    await setText(input, "Instruction for B");
+    await act(async () => finishInstructionA?.());
+    expect(input?.value).toBe("Instruction for B");
+  });
+});