diff --git a/frontend/src/components/AskEvidenceLayerPopup.stories.tsx b/frontend/src/components/AskEvidenceLayerPopup.stories.tsx
new file mode 100644
index 000000000..070ba40f5
--- /dev/null
+++ b/frontend/src/components/AskEvidenceLayerPopup.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AskEvidenceLayerPopup } from "./AskEvidenceLayerPopup";
+
+const meta = {
+ title: "Evidence/AskEvidenceLayerPopup",
+ component: AskEvidenceLayerPopup,
+ args: {
+ postId: "post-demo-public",
+ postTitle: "Checkout error follow-up",
+ facts: [
+ { kind: "semantic_project", text: "project: Checkout revamp | evidence: Body evidence" },
+ { kind: "semantic_keyman", text: "Keyman mention: Ada West | context: account lead" },
+ ],
+ images: [
+ {
+ unit_index: 1,
+ caption: "Screenshot of the checkout error",
+ extracted_text: "Error code 500 on checkout",
+ },
+ ],
+ onClose: () => undefined,
+ onOpenPost: () => undefined,
+ },
+} satisfies Meta
;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const TextEvidenceOnly: Story = {
+ args: {
+ images: [],
+ },
+};
+
+export const ImageEvidenceOnly: Story = {
+ args: {
+ facts: [],
+ },
+};
+
+// Edge case: a citation with no persisted evidence facts or images at all --
+// must show an explicit placeholder, never a blank panel.
+export const NoEvidence: Story = {
+ args: {
+ facts: [],
+ images: [],
+ },
+};
+
+// Edge case: an image evidence entry whose OCR text was never extracted.
+export const ImageWithoutExtractedText: Story = {
+ args: {
+ facts: [],
+ images: [
+ {
+ unit_index: 0,
+ caption: "Architecture diagram",
+ extracted_text: null,
+ },
+ ],
+ },
+};
+
+// Edge case: an untitled/uncaptioned image.
+export const UntitledImage: Story = {
+ args: {
+ facts: [],
+ images: [
+ {
+ unit_index: 0,
+ caption: null,
+ extracted_text: null,
+ },
+ ],
+ },
+};
+
+// Edge case: some sources persist an empty caption rather than null. The buyer
+// still needs a visible label that explains what to do with the evidence row.
+export const BlankImageCaption: Story = {
+ args: {
+ facts: [],
+ images: [
+ {
+ unit_index: 0,
+ caption: "",
+ extracted_text: "Diagram OCR text remains available",
+ },
+ ],
+ },
+};
diff --git a/frontend/src/components/AskEvidenceLayerPopup.test.tsx b/frontend/src/components/AskEvidenceLayerPopup.test.tsx
new file mode 100644
index 000000000..7bed0b01b
--- /dev/null
+++ b/frontend/src/components/AskEvidenceLayerPopup.test.tsx
@@ -0,0 +1,136 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { AskEvidenceLayerPopup } from "./AskEvidenceLayerPopup";
+
+const baseProps = {
+ postId: "post-demo-public",
+ postTitle: "Checkout error follow-up",
+};
+
+describe("AskEvidenceLayerPopup", () => {
+ it("renders text and image evidence for the cited post", () => {
+ render(
+ ,
+ );
+
+ expect(screen.getByRole("dialog", { name: "Checkout error follow-up" })).toBeInTheDocument();
+ expect(screen.getByText(/project: Checkout revamp/)).toBeInTheDocument();
+ expect(screen.getByText("Screenshot of the checkout error")).toBeInTheDocument();
+ expect(screen.getByText("Error code 500 on checkout")).toBeInTheDocument();
+ expect(
+ screen.getByRole("list", { name: "Checkout error follow-up Evidence facts" }),
+ ).toBeInTheDocument();
+ });
+
+ it("shows an explicit placeholder when the citation has no persisted evidence", () => {
+ render(
+ ,
+ );
+ expect(
+ screen.getByText("No persisted evidence is available for this citation."),
+ ).toBeInTheDocument();
+ });
+
+ it("uses the untitled fallback when an image caption is blank", () => {
+ render(
+ ,
+ );
+ expect(screen.getByText("Untitled image")).toBeInTheDocument();
+ });
+
+ it("closes on backdrop click, close button click, and Escape, but not on panel click", async () => {
+ const onClose = vi.fn();
+ const { container } = render(
+ ,
+ );
+
+ await userEvent.click(screen.getByRole("dialog"));
+ expect(onClose).not.toHaveBeenCalled();
+
+ const backdrop = container.querySelector(".popup-backdrop") as HTMLElement;
+ await userEvent.click(backdrop);
+ expect(onClose).toHaveBeenCalledTimes(1);
+
+ await userEvent.click(screen.getByRole("button", { name: "Close evidence panel" }));
+ expect(onClose).toHaveBeenCalledTimes(2);
+
+ await userEvent.keyboard("{Escape}");
+ expect(onClose).toHaveBeenCalledTimes(3);
+ });
+
+ it("closes the evidence layer before opening the cited post", async () => {
+ const onClose = vi.fn();
+ const onOpenPost = vi.fn();
+ render(
+ ,
+ );
+ await userEvent.click(screen.getByRole("button", { name: "Open post: Checkout error follow-up" }));
+ expect(onClose).toHaveBeenCalledTimes(1);
+ expect(onOpenPost).toHaveBeenCalledWith("post-demo-public");
+ expect(onClose.mock.invocationCallOrder[0]).toBeLessThan(onOpenPost.mock.invocationCallOrder[0]);
+ });
+
+ it("moves initial focus onto the dialog panel", () => {
+ render(
+ ,
+ );
+ expect(screen.getByRole("dialog")).toHaveFocus();
+ });
+
+ it("contains Tab and Shift+Tab focus within the modal layer", async () => {
+ render(
+ ,
+ );
+ const closeButton = screen.getByRole("button", { name: "Close evidence panel" });
+ const openPostButton = screen.getByRole("button", { name: "Open post: Checkout error follow-up" });
+
+ openPostButton.focus();
+ await userEvent.tab();
+ expect(closeButton).toHaveFocus();
+
+ closeButton.focus();
+ await userEvent.tab({ shift: true });
+ expect(openPostButton).toHaveFocus();
+ });
+
+ it("returns focus to the element that invoked the modal when the layer unmounts", () => {
+ const opener = document.createElement("button");
+ opener.textContent = "View evidence";
+ document.body.append(opener);
+ opener.focus();
+
+ const { unmount } = render(
+ ,
+ );
+ expect(screen.getByRole("dialog")).toHaveFocus();
+
+ unmount();
+ expect(opener).toHaveFocus();
+ opener.remove();
+ });
+});
diff --git a/frontend/src/components/AskEvidenceLayerPopup.tsx b/frontend/src/components/AskEvidenceLayerPopup.tsx
new file mode 100644
index 000000000..4aff6e88e
--- /dev/null
+++ b/frontend/src/components/AskEvidenceLayerPopup.tsx
@@ -0,0 +1,163 @@
+import { useEffect, useId, useRef } from "react";
+import { chatEvidenceKindLabel } from "../evidenceKindLabels";
+import { t, tf } from "../i18n";
+import { PopupCloseButton } from "./PopupCloseButton";
+
+const FOCUSABLE_SELECTOR = [
+ "a[href]",
+ "button:not([disabled])",
+ "input:not([disabled])",
+ "select:not([disabled])",
+ "textarea:not([disabled])",
+ '[tabindex]:not([tabindex="-1"])',
+].join(",");
+
+export type AskEvidenceLayerFact = {
+ kind: string;
+ text: string;
+};
+
+export type AskEvidenceLayerImage = {
+ unit_index: number;
+ caption: string | null;
+ extracted_text: string | null;
+};
+
+export type AskEvidenceLayerPopupProps = {
+ postId: string;
+ postTitle: string;
+ facts: AskEvidenceLayerFact[];
+ images: AskEvidenceLayerImage[];
+ onClose: () => void;
+ onOpenPost: (postId: string) => void;
+};
+
+/**
+ * A focused evidence layer for one Ask Agent citation -- opened from the
+ * answer without leaving it, unlike the full post detail popup.
+ *
+ * Next action: open the source post for the complete record, or close to
+ * return to the answer.
+ */
+export function AskEvidenceLayerPopup({
+ postId,
+ postTitle,
+ facts,
+ images,
+ onClose,
+ onOpenPost,
+}: AskEvidenceLayerPopupProps) {
+ const headingId = useId();
+ const factsHeadingId = useId();
+ const imagesHeadingId = useId();
+ const panelRef = useRef(null);
+ const restoreFocusOnUnmountRef = useRef(true);
+
+ useEffect(() => {
+ const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+ panelRef.current?.focus();
+ return () => {
+ if (restoreFocusOnUnmountRef.current && previouslyFocused?.isConnected) {
+ previouslyFocused.focus();
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ function handleKeyDown(event: KeyboardEvent) {
+ if (event.key === "Escape") {
+ event.preventDefault();
+ onClose();
+ return;
+ }
+ if (event.key !== "Tab") return;
+
+ const panel = panelRef.current;
+ if (!panel) return;
+ const focusable = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+ (element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true",
+ );
+ if (focusable.length === 0) {
+ event.preventDefault();
+ panel.focus();
+ return;
+ }
+
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+ const active = document.activeElement;
+ if (active === panel || !panel.contains(active)) {
+ event.preventDefault();
+ (event.shiftKey ? last : first).focus();
+ return;
+ }
+ if (event.shiftKey && active === first) {
+ event.preventDefault();
+ last.focus();
+ } else if (!event.shiftKey && active === last) {
+ event.preventDefault();
+ first.focus();
+ }
+ }
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [onClose]);
+
+ function handleOpenPost() {
+ // Opening the full post is a workflow transition rather than returning to
+ // the invoking citation, so do not restore focus to the old trigger while
+ // the destination surface is being mounted.
+ restoreFocusOnUnmountRef.current = false;
+ onClose();
+ onOpenPost(postId);
+ }
+
+ return (
+
+
event.stopPropagation()}
+ >
+
+
{postTitle}
+ {facts.length === 0 && images.length === 0 ? (
+
{t("No persisted evidence is available for this citation.")}
+ ) : null}
+ {facts.length > 0 ? (
+
+ {t("Evidence facts")}
+
+ {facts.map((fact, index) => (
+ -
+ {chatEvidenceKindLabel(fact.kind)}
+ {fact.text}
+
+ ))}
+
+
+ ) : null}
+ {images.length > 0 ? (
+
+ {t("Image evidence")}
+
+ {images.map((image) => (
+ -
+ {image.caption?.trim() ? image.caption : t("Untitled image")}
+ {image.extracted_text ? {image.extracted_text} : null}
+
+ ))}
+
+
+ ) : null}
+
+
+