diff --git a/frontend/src/v1/components/patterns/document-viewer/HighlightLayer.test.tsx b/frontend/src/v1/components/patterns/document-viewer/HighlightLayer.test.tsx
new file mode 100644
index 0000000000..80fe212fc5
--- /dev/null
+++ b/frontend/src/v1/components/patterns/document-viewer/HighlightLayer.test.tsx
@@ -0,0 +1,110 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { Highlight } from "@v1/lib/pdf/highlights";
+import { expect, it, vi } from "vitest";
+import { HighlightLayer } from "./HighlightLayer";
+
+const line: Highlight = {
+  id: "line-0",
+  page: 0,
+  x: 0,
+  y: 0.25,
+  w: 1,
+  h: 0.02,
+  variant: "line",
+  tone: "default",
+  confidence: 0.97,
+};
+const word: Highlight = {
+  id: "word-0",
+  page: 0,
+  x: 0.5,
+  y: 0.25,
+  w: 0.1,
+  h: 0.02,
+  variant: "box",
+  tone: "low-confidence",
+  confidence: 0.62,
+};
+
+function box(container: HTMLElement, id: string): HTMLElement {
+  const element = container.querySelector<HTMLElement>(
+    `[data-highlight-id="${id}"]`,
+  );
+  if (!element) {
+    throw new Error(`no highlight ${id}`);
+  }
+  return element;
+}
+
+it("places highlights as percentages of the page", () => {
+  const { container } = render(<HighlightLayer highlights={[line, word]} />);
+  const element = box(container, "word-0");
+  expect(element.style.getPropertyValue("--hl-x")).toBe("50%");
+  expect(element.style.getPropertyValue("--hl-y")).toBe("25%");
+  expect(element.style.getPropertyValue("--hl-w")).toBe("10%");
+  expect(element.style.getPropertyValue("--hl-h")).toBe("2%");
+  expect(element.getAttribute("data-variant")).toBe("box");
+  expect(box(container, "line-0").getAttribute("data-variant")).toBe("line");
+});
+
+it("shows each highlight's tone, and the active one as active", () => {
+  const { container } = render(
+    <HighlightLayer highlights={[line, word]} activeId="line-0" />,
+  );
+  expect(box(container, "line-0").getAttribute("data-tone")).toBe("active");
+  expect(box(container, "word-0").getAttribute("data-tone")).toBe(
+    "low-confidence",
+  );
+});
+
+it("is not interactive without a click handler", () => {
+  render(<HighlightLayer highlights={[line]} />);
+  expect(screen.queryByRole("button")).toBeNull();
+});
+
+it("reports clicks with the highlight, and labels each button", async () => {
+  const onHighlightClick = vi.fn();
+  render(
+    <HighlightLayer
+      highlights={[line, word]}
+      activeId="word-0"
+      onHighlightClick={onHighlightClick}
+    />,
+  );
+  const button = screen.getByRole("button", {
+    name: "Highlight on page 1, 62% confidence",
+  });
+  expect(button.getAttribute("aria-current")).toBe("true");
+  await userEvent.click(button);
+  expect(onHighlightClick).toHaveBeenCalledWith(word);
+});
+
+it("renders nothing for a page without highlights", () => {
+  const { container } = render(<HighlightLayer highlights={[]} />);
+  expect(container.firstChild).toBeNull();
+});
+
+it("blends into the page only once the page has painted", () => {
+  const { container, rerender } = render(
+    <HighlightLayer highlights={[line]} painted={false} />,
+  );
+  // On the placeholder (dark in dark themes) multiply would hide the box.
+  expect(box(container, "line-0").className).not.toContain(
+    "mix-blend-multiply",
+  );
+  rerender(<HighlightLayer highlights={[line]} painted />);
+  expect(box(container, "line-0").className).toContain("mix-blend-multiply");
+});
+
+it("gives the clickable highlight the same geometry and data as the plain one", () => {
+  const plain = render(<HighlightLayer highlights={[word]} />);
+  const button = render(
+    <HighlightLayer highlights={[word]} onHighlightClick={vi.fn()} />,
+  );
+  const a = box(plain.container, "word-0");
+  const b = box(button.container, "word-0");
+  expect(b.tagName).toBe("BUTTON");
+  expect(b.getAttribute("style")).toBe(a.getAttribute("style"));
+  expect(b.dataset).toEqual(a.dataset);
+});
diff --git a/frontend/src/v1/components/patterns/document-viewer/HighlightLayer.tsx b/frontend/src/v1/components/patterns/document-viewer/HighlightLayer.tsx
new file mode 100644
index 0000000000..647335fdfb
--- /dev/null
+++ b/frontend/src/v1/components/patterns/document-viewer/HighlightLayer.tsx
@@ -0,0 +1,108 @@
+import { cn } from "@v1/lib/cn";
+import type { Highlight, HighlightTone } from "@v1/lib/pdf/highlights";
+
+export interface HighlightLayerProps {
+  /** This page's highlights. */
+  highlights: readonly Highlight[];
+  /** Shown in the active tone, whatever its own tone. */
+  activeId?: string | null;
+  /** When given, highlights are buttons that report clicks. */
+  onHighlightClick?: (highlight: Highlight) => void;
+  /**
+   * Whether the page's canvas has painted. Until then the boxes sit on the
+   * page placeholder, which is dark in dark themes, so they skip the multiply
+   * blend (it would hide them) and show as plain translucent fills.
+   */
+  painted?: boolean;
+}
+
+const TONES: Record<HighlightTone, string> = {
+  default: "ui:bg-primary/25",
+  active: "ui:bg-primary/40 ui:ring-2 ui:ring-primary",
+  "low-confidence": "ui:bg-destructive/25",
+};
+
+function percent(fraction: number): string {
+  return `${fraction * 100}%`;
+}
+
+function label(highlight: Highlight, pageNumber: number): string {
+  const confidence =
+    highlight.confidence === undefined
+      ? ""
+      : `, ${Math.round(highlight.confidence * 100)}% confidence`;
+  return `Highlight on page ${pageNumber}${confidence}`;
+}
+
+function HighlightBox({
+  highlight,
+  active,
+  painted,
+  onClick,
+}: {
+  highlight: Highlight;
+  active: boolean;
+  painted: boolean;
+  onClick?: (highlight: Highlight) => void;
+}) {
+  // Page fractions as percentages of the page box, so the box needs no update
+  // when the zoom changes. Runtime geometry: custom properties the classes read.
+  const tone: HighlightTone = active ? "active" : highlight.tone;
+  const shared = {
+    style: {
+      "--hl-x": percent(highlight.x),
+      "--hl-y": percent(highlight.y),
+      "--hl-w": percent(highlight.w),
+      "--hl-h": percent(highlight.h),
+    },
+    "data-highlight-id": highlight.id,
+    "data-variant": highlight.variant,
+    "data-tone": tone,
+  };
+  const className = cn(
+    "ui:absolute ui:top-(--hl-y) ui:left-(--hl-x) ui:h-(--hl-h) ui:w-(--hl-w) ui:rounded-sm",
+    painted && "ui:mix-blend-multiply",
+    TONES[tone],
+  );
+  if (onClick === undefined) {
+    return <div className={className} {...shared} />;
+  }
+  return (
+    <button
+      type="button"
+      {...shared}
+      aria-label={label(highlight, highlight.page + 1)}
+      aria-current={active ? "true" : undefined}
+      onClick={() => onClick(highlight)}
+      className={cn(
+        className,
+        "ui:pointer-events-auto ui:cursor-pointer ui:focus-visible:focus-ring",
+      )}
+    />
+  );
+}
+
+/** The highlights of one page, laid over it. Sized by its page, not by itself. */
+export function HighlightLayer({
+  highlights,
+  activeId,
+  onHighlightClick,
+  painted = true,
+}: HighlightLayerProps) {
+  if (highlights.length === 0) {
+    return null;
+  }
+  return (
+    <div className="ui:pointer-events-none ui:absolute ui:inset-0">
+      {highlights.map((highlight) => (
+        <HighlightBox
+          key={highlight.id}
+          highlight={highlight}
+          active={highlight.id === activeId}
+          painted={painted}
+          onClick={onHighlightClick}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/v1/components/patterns/document-viewer/PdfPage.tsx b/frontend/src/v1/components/patterns/document-viewer/PdfPage.tsx
index fc68d781cc..33f7b2da43 100644
--- a/frontend/src/v1/components/patterns/document-viewer/PdfPage.tsx
+++ b/frontend/src/v1/components/patterns/document-viewer/PdfPage.tsx
@@ -1,3 +1,4 @@
+import type { Highlight } from "@v1/lib/pdf/highlights";
 import { isRenderCancelled } from "@v1/lib/pdf/pdfjs";
 import type { PageSize } from "@v1/lib/pdf/types";
 import {
@@ -7,6 +8,7 @@ import {
 } from "@v1/lib/pdf/windowing";
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from "pdfjs-dist";
 import { memo, type ReactNode, useEffect, useRef, useState } from "react";
+import { HighlightLayer } from "./HighlightLayer";
 
 export interface PdfPageProps {
   document: PDFDocumentProxy;
@@ -22,10 +24,16 @@ export interface PdfPageProps {
   /** The screen's device pixel ratio; a change redraws the page. */
   pixelRatio: number;
   observe: (element: HTMLElement | null) => (() => void) | undefined;
+  /** This page's highlights. Keep the array stable: the page is memoised. */
+  highlights: readonly Highlight[];
+  /** The active highlight's id; the list gives it only to the page holding it. */
+  activeHighlightId?: string | null;
+  /** Keep it stable (useCallback): a new function re-renders every page. */
+  onHighlightClick?: (highlight: Highlight) => void;
   /**
-   * Drawn over the page, in a box the same size as the page; receives the
-   * page's index. Called inside the page, so keep it stable (useCallback):
-   * a new function re-renders every page.
+   * Drawn over the page, above its highlights, in a box the page's size;
+   * receives the page's index. Called inside the page, so keep it stable
+   * (useCallback): a new function re-renders every page.
    */
   renderOverlay?: (index: number) => ReactNode;
 }
@@ -47,12 +55,18 @@ export const PdfPage = memo(function PdfPage({
   rendered,
   pixelRatio,
   observe,
+  highlights,
+  activeHighlightId,
+  onHighlightClick,
   renderOverlay,
 }: PdfPageProps) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [state, setState] = useState<RenderState>("idle");
   // Bumped by Retry, to run the render again.
   const [attempt, setAttempt] = useState(0);
+  // Whether the canvas holds a picture. It outlives a redraw (zoom keeps the
+  // old picture until the new one lands) and ends when the canvas is freed.
+  const [painted, setPainted] = useState(false);
   const css = pageCssSize(size, zoom);
 
   // Free the canvas when the page leaves the window or unmounts: zero its
@@ -66,6 +80,7 @@ export const PdfPage = memo(function PdfPage({
     return () => {
       canvas.width = 0;
       canvas.height = 0;
+      setPainted(false);
     };
   }, [rendered]);
 
@@ -124,6 +139,7 @@ export const PdfPage = memo(function PdfPage({
             throw new Error("No 2D canvas context");
           }
           shown.drawImage(scratch, 0, 0);
+          setPainted(true);
           setState("rendered");
         } catch (error) {
           if (!cancelled && !isRenderCancelled(error)) {
@@ -169,6 +185,12 @@ export const PdfPage = memo(function PdfPage({
           className="ui:absolute ui:inset-0 ui:block ui:size-full"
         />
       )}
+      <HighlightLayer
+        highlights={highlights}
+        activeId={activeHighlightId}
+        onHighlightClick={onHighlightClick}
+        painted={painted}
+      />
       {renderOverlay?.(index)}
       {state === "error" && (
         <figcaption className="ui:absolute ui:inset-0 ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-2 ui:bg-card ui:text-body ui:text-muted-foreground">
diff --git a/frontend/src/v1/components/patterns/document-viewer/PdfPageList.test.tsx b/frontend/src/v1/components/patterns/document-viewer/PdfPageList.test.tsx
index d2085672ee..0338f19477 100644
--- a/frontend/src/v1/components/patterns/document-viewer/PdfPageList.test.tsx
+++ b/frontend/src/v1/components/patterns/document-viewer/PdfPageList.test.tsx
@@ -336,6 +336,48 @@ it("draws nothing for a page that leaves before its frame comes", async () => {
   expect(renderPage.mock.calls.length).toBeLessThanOrEqual(3);
 });
 
+it("draws each highlight on its own page", () => {
+  const { document } = fakeDocument(3);
+  const { container } = render(
+    <PdfPageList
+      document={document}
+      pageSizes={sizes(3)}
+      zoom={1}
+      highlights={[
+        {
+          id: "a",
+          page: 2,
+          x: 0,
+          y: 0.1,
+          w: 1,
+          h: 0.02,
+          variant: "line",
+          tone: "default",
+        },
+        {
+          id: "b",
+          page: 0,
+          x: 0,
+          y: 0.5,
+          w: 1,
+          h: 0.02,
+          variant: "line",
+          tone: "default",
+        },
+      ]}
+    />,
+  );
+  expect(
+    container.querySelector('[data-page-index="2"] [data-highlight-id="a"]'),
+  ).not.toBeNull();
+  expect(
+    container.querySelector('[data-page-index="0"] [data-highlight-id="b"]'),
+  ).not.toBeNull();
+  expect(
+    container.querySelector('[data-page-index="1"] [data-highlight-id]'),
+  ).toBeNull();
+});
+
 it("cleans up a page that arrives after it has left the window", async () => {
   const { document } = fakeDocument(10);
   const late = { getViewport: vi.fn(), render: vi.fn(), cleanup: vi.fn() };
@@ -354,3 +396,93 @@ it("cleans up a page that arrives after it has left the window", async () => {
   expect(late.cleanup).toHaveBeenCalled();
   expect(late.render).not.toHaveBeenCalled();
 });
+
+const pageHighlights = [
+  {
+    id: "a",
+    page: 2,
+    x: 0,
+    y: 0.1,
+    w: 1,
+    h: 0.02,
+    variant: "line" as const,
+    tone: "default" as const,
+  },
+  {
+    id: "b",
+    page: 0,
+    x: 0,
+    y: 0.5,
+    w: 1,
+    h: 0.02,
+    variant: "line" as const,
+    tone: "default" as const,
+  },
+];
+
+it("re-renders only the pages that lose and gain the active highlight", () => {
+  const { document } = fakeDocument(3);
+  const overlay = vi.fn((_index: number) => null);
+  // Stable inputs, as a real caller holds them: only the active id changes.
+  const pageSizes = sizes(3);
+  const { rerender } = render(
+    <PdfPageList
+      document={document}
+      pageSizes={pageSizes}
+      zoom={1}
+      highlights={pageHighlights}
+      activeHighlightId="b"
+      renderPageOverlay={overlay}
+    />,
+  );
+  overlay.mockClear();
+  rerender(
+    <PdfPageList
+      document={document}
+      pageSizes={pageSizes}
+      zoom={1}
+      highlights={pageHighlights}
+      activeHighlightId="a"
+      renderPageOverlay={overlay}
+    />,
+  );
+  expect(overlay.mock.calls.map(([index]) => index).sort()).toEqual([0, 2]);
+});
+
+it("blends highlights into a page once it has painted, and keeps it through a zoom", async () => {
+  const { document, tasks } = fakeDocument(1);
+  const highlights = [
+    { ...pageHighlights[1], page: 0 },
+  ] as typeof pageHighlights;
+  const { container, rerender } = render(
+    <PdfPageList
+      document={document}
+      pageSizes={sizes(1)}
+      zoom={1}
+      highlights={highlights}
+    />,
+  );
+  const blended = () =>
+    container
+      .querySelector('[data-highlight-id="b"]')
+      ?.className.includes("mix-blend-multiply");
+  expect(blended()).toBe(false);
+  show([0]);
+  await flush();
+  expect(blended()).toBe(false);
+  await act(async () => tasks[0]?.finish());
+  expect(blended()).toBe(true);
+  rerender(
+    <PdfPageList
+      document={document}
+      pageSizes={sizes(1)}
+      zoom={2}
+      highlights={highlights}
+    />,
+  );
+  await flush();
+  expect(blended()).toBe(true);
+  show([]);
+  await flush();
+  expect(blended()).toBe(false);
+});
diff --git a/frontend/src/v1/components/patterns/document-viewer/PdfPageList.tsx b/frontend/src/v1/components/patterns/document-viewer/PdfPageList.tsx
index 957a97e77d..13e12aef57 100644
--- a/frontend/src/v1/components/patterns/document-viewer/PdfPageList.tsx
+++ b/frontend/src/v1/components/patterns/document-viewer/PdfPageList.tsx
@@ -1,19 +1,27 @@
 import { useDevicePixelRatio } from "@v1/hooks/useDevicePixelRatio";
 import { usePageWindow } from "@v1/hooks/usePageWindow";
 import { cn } from "@v1/lib/cn";
+import { type Highlight, highlightsByPage } from "@v1/lib/pdf/highlights";
 import type { PageSize } from "@v1/lib/pdf/types";
 import type { PDFDocumentProxy } from "pdfjs-dist";
-import type { ReactNode } from "react";
+import { type ReactNode, useMemo } from "react";
 import { PdfPage } from "./PdfPage";
 
+const NO_HIGHLIGHTS: readonly Highlight[] = [];
+
 export interface PdfPageListProps {
   document: PDFDocumentProxy;
   pageSizes: readonly PageSize[];
   /** 1 is 100%. */
   zoom: number;
+  /** Highlights on any page, from the normalisers in `@v1/lib/pdf/highlights`. */
+  highlights?: readonly Highlight[];
+  activeHighlightId?: string | null;
+  /** Keep it stable (useCallback): a new function re-renders every page. */
+  onHighlightClick?: (highlight: Highlight) => void;
   /**
-   * Drawn over a page, for highlights; receives the 0-based page index. Keep
-   * it stable (useCallback): a new function re-renders every page.
+   * Drawn over a page, above its highlights; receives the 0-based page index.
+   * Keep it stable (useCallback): a new function re-renders every page.
    */
   renderPageOverlay?: (index: number) => ReactNode;
   className?: string;
@@ -28,10 +36,24 @@ export function PdfPageList({
   document,
   pageSizes,
   zoom,
+  highlights = NO_HIGHLIGHTS,
+  activeHighlightId,
+  onHighlightClick,
   renderPageOverlay,
   className,
 }: PdfPageListProps) {
   const { scrollRef, observePage, rendered } = usePageWindow(pageSizes.length);
+  const byPage = useMemo(() => highlightsByPage(highlights), [highlights]);
+  // Only the page holding the active highlight hears its id, so moving the
+  // active highlight re-renders the page it left and the page it reached.
+  const activePage = useMemo(
+    () =>
+      activeHighlightId == null
+        ? null
+        : (highlights.find((highlight) => highlight.id === activeHighlightId)
+            ?.page ?? null),
+    [highlights, activeHighlightId],
+  );
   const pixelRatio = useDevicePixelRatio();
   return (
     <div
@@ -54,6 +76,9 @@ export function PdfPageList({
             rendered={rendered.has(index)}
             pixelRatio={pixelRatio}
             observe={observePage}
+            highlights={byPage.get(index) ?? NO_HIGHLIGHTS}
+            activeHighlightId={index === activePage ? activeHighlightId : null}
+            onHighlightClick={onHighlightClick}
             renderOverlay={renderPageOverlay}
           />
         ))}
diff --git a/frontend/src/v1/lib/pdf/highlights.test.ts b/frontend/src/v1/lib/pdf/highlights.test.ts
new file mode 100644
index 0000000000..2fafd32eb3
--- /dev/null
+++ b/frontend/src/v1/lib/pdf/highlights.test.ts
@@ -0,0 +1,229 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  highlightsByPage,
+  normaliseAgentic,
+  normaliseLine,
+  normaliseLines,
+  normaliseWords,
+} from "./highlights";
+
+// US Letter. LLMWhisperer renders page images at 300 dpi: 2550 × 3300.
+const LETTER = { width: 612, height: 792 };
+const pageSizes = [LETTER, LETTER, { width: 792, height: 612 }];
+
+describe("Prompt Studio: LLMWhisperer line_metadata", () => {
+  // Shaped like a prompt's highlight_data: one entry per line it cites, with
+  // line_confidence as the 5th element and [0, 0, 0, 0] padding.
+  const payload = [
+    [0, 412, 34, 3300, 0.98],
+    [0, 0, 0, 0],
+    [1, 980, 30, 3300, 0.71],
+    [2, 120, 20, 2550],
+  ];
+
+  it("maps each line to a full-width band ending at its baseline", () => {
+    const [first] = normaliseLines(payload);
+    expect(first).toMatchObject({
+      id: "line-0",
+      page: 0,
+      x: 0,
+      w: 1,
+      variant: "line",
+      tone: "default",
+      confidence: 0.98,
+    });
+    expect(first?.y).toBeCloseTo((412 - 34) / 3300);
+    expect(first?.h).toBeCloseTo(34 / 3300);
+  });
+
+  it("drops padding, keeps ids tied to the entry's position", () => {
+    expect(normaliseLines(payload).map((h) => h.id)).toEqual([
+      "line-0",
+      "line-2",
+      "line-3",
+    ]);
+  });
+
+  it("keeps a line's confidence for its label but never tones the line, as v0 did not", () => {
+    const [, low, none] = normaliseLines(payload);
+    expect(low?.confidence).toBeLessThan(0.9);
+    expect(low?.tone).toBe("default");
+    expect(none?.tone).toBe("default");
+    expect(none?.confidence).toBeUndefined();
+  });
+});
+
+describe("HITL: word boxes from confidence_metadata", () => {
+  const line = [0, 412, 34, 3300, 0.81];
+  const words = [
+    { text: "Invoice", confidence: 0.62, offset: 1275, width: 255 },
+    { text: "No.", confidence: 0.88, offset: 1550, width: 90 },
+  ];
+
+  it("places words on their line, with x from the PDF page's aspect ratio", () => {
+    const [invoice] = normaliseWords(line, words, { pageSizes });
+    // 3300 × 612/792 = 2550 units across the page.
+    expect(invoice?.x).toBeCloseTo(1275 / 2550);
+    expect(invoice?.w).toBeCloseTo(255 / 2550);
+    expect(invoice?.y).toBeCloseTo((412 - 34) / 3300);
+    expect(invoice).toMatchObject({
+      variant: "box",
+      tone: "low-confidence",
+      confidence: 0.62,
+    });
+  });
+
+  it("does not divide x by the page height, as v0 did", () => {
+    const [invoice] = normaliseWords(line, words, { pageSizes });
+    expect(invoice?.x).not.toBeCloseTo(1275 / 3300);
+  });
+
+  it("reads the legacy shape with the word appended to the line", () => {
+    const legacy = [0, 412, 34, 3300, words[0]];
+    expect(normaliseLine(legacy, "hitl-0", { pageSizes })).toMatchObject({
+      variant: "box",
+      x: expect.closeTo(0.5),
+    });
+  });
+
+  it("skips words when the page width cannot be known, and says so", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+    expect(normaliseWords([3, 412, 34, 3300], words, { pageSizes })).toEqual(
+      [],
+    );
+    expect(warn).toHaveBeenCalledOnce();
+    expect(warn.mock.calls[0]?.[0]).toContain("2 word box(es) on page index 3");
+    warn.mockClear();
+    expect(
+      normaliseLine([3, 412, 34, 3300, words[0]], "w", { pageSizes }),
+    ).toBeNull();
+    expect(warn).toHaveBeenCalledOnce();
+    warn.mockRestore();
+  });
+
+  it("gives words on different lines different ids", () => {
+    const first = normaliseWords(line, words, { pageSizes });
+    const second = normaliseWords([0, 480, 34, 3300], words, { pageSizes });
+    const ids = [...first, ...second].map((h) => h.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  it("tones words below 0.9 confidence as low", () => {
+    const [invoice, no] = normaliseWords(line, words, {
+      pageSizes,
+      lowConfidenceBelow: 0.7,
+    });
+    expect(invoice?.tone).toBe("low-confidence");
+    expect(no?.tone).toBe("default");
+  });
+});
+
+describe("Agentic table: [page, y, height, 792, {offset, width, page_width}]", () => {
+  // EXPECTED_COORDS in workers/plugins/agentic_table/tests/test_highlight_data.py
+  const meta = { offset: 0, width: 612, page_width: 612 };
+  const payload = [
+    [
+      0,
+      Math.trunc((100 / 3168) * 792),
+      Math.trunc((20 / 3168) * 792),
+      792,
+      meta,
+    ],
+    [
+      1,
+      Math.trunc((200 / 3168) * 792),
+      Math.trunc((20 / 3168) * 792),
+      792,
+      meta,
+    ],
+  ];
+
+  it("uses the sent page width and reads a full-width word as a line", () => {
+    const [first, second] = normaliseLines(payload);
+    expect(first).toMatchObject({ page: 0, x: 0, w: 1, variant: "line" });
+    expect(first?.y).toBeCloseTo((25 - 5) / 792);
+    expect(second?.page).toBe(1);
+  });
+
+  it("uses page_width over the aspect ratio when both are known", () => {
+    const narrow = [
+      0,
+      100,
+      20,
+      792,
+      { offset: 306, width: 153, page_width: 612 },
+    ];
+    expect(
+      normaliseLine(narrow, "t", { pageSizes: [{ width: 1000, height: 792 }] }),
+    ).toMatchObject({ x: 0.5, w: 0.25 });
+  });
+});
+
+describe("Agentic Prompt Studio: [page, left%, top%, width%, height%, hasMetadata]", () => {
+  // transformHighlightData output in the cloud agentic-prompt-studio plugin.
+  const payload = [
+    [0, 0, 12.5, 100, 2.5, false],
+    [1, 10, 20, 30, 4, true],
+    [0, 0, 0, 0, 0, false],
+  ];
+
+  it("turns percentages into fractions", () => {
+    const [line, word] = normaliseAgentic(payload);
+    expect(line).toMatchObject({
+      page: 0,
+      x: 0,
+      y: 0.125,
+      w: 1,
+      h: expect.closeTo(0.025),
+    });
+    expect(line?.variant).toBe("line");
+    expect(word).toMatchObject({
+      page: 1,
+      x: 0.1,
+      y: 0.2,
+      w: expect.closeTo(0.3),
+      h: expect.closeTo(0.04),
+    });
+    expect(word?.variant).toBe("box");
+  });
+
+  it("does not read hasMetadata as confidence: v0 used it for colour only", () => {
+    expect(normaliseAgentic(payload).map((h) => h.tone)).toEqual([
+      "default",
+      "default",
+    ]);
+  });
+
+  it("drops empty boxes", () => {
+    expect(normaliseAgentic(payload)).toHaveLength(2);
+  });
+});
+
+describe("robustness", () => {
+  it("clamps boxes that run off the page", () => {
+    const [box] = normaliseAgentic([[0, 90, -5, 20, 10]]);
+    expect(box).toMatchObject({
+      x: 0.9,
+      y: 0,
+      w: expect.closeTo(0.1),
+      h: 0.05,
+    });
+  });
+
+  it("ignores junk entries", () => {
+    expect(
+      normaliseLines([null, "x", [0, 1, 2], [-1, 10, 10, 100], [0, 10, 10, 0]]),
+    ).toEqual([]);
+  });
+});
+
+it("groups highlights by page in their original order", () => {
+  const highlights = normaliseAgentic([
+    [1, 0, 0, 10, 10],
+    [0, 0, 0, 10, 10],
+    [1, 0, 50, 10, 10],
+  ]);
+  const byPage = highlightsByPage(highlights);
+  expect(byPage.get(1)?.map((h) => h.id)).toEqual(["agentic-0", "agentic-2"]);
+  expect(byPage.get(0)?.map((h) => h.id)).toEqual(["agentic-1"]);
+});
diff --git a/frontend/src/v1/lib/pdf/highlights.ts b/frontend/src/v1/lib/pdf/highlights.ts
new file mode 100644
index 0000000000..82ec494f53
--- /dev/null
+++ b/frontend/src/v1/lib/pdf/highlights.ts
@@ -0,0 +1,350 @@
+/*
+ * Highlights in one shape, whatever produced them. Every position is a fraction
+ * of the page box (0 to 1, from the top-left), so a highlight stays on its text
+ * at any zoom without being recomputed.
+ *
+ * Input shapes:
+ *
+ * - Line entry, LLMWhisperer `line_metadata[*].raw` (Prompt Studio, HITL):
+ *   `[page, base_y, height, page_height, line_confidence?]`. `base_y` is the
+ *   line's baseline, so the box runs from `base_y - height` down to `base_y`,
+ *   across the full width. `line_confidence` is a number when sent; it is kept
+ *   for the label but does not tone the line, as v0 never toned lines.
+ * - Line entry with a word box in place of the confidence:
+ *   `[page, y, height, page_height, {offset, width, page_width?}]`. The agentic
+ *   table worker sends this today, with `page_width`; v0 HITL used to build it
+ *   from `confidence_metadata`, without one.
+ * - Word boxes, LLMWhisperer `confidence_metadata`: `{text, confidence, offset,
+ *   width}`, only for words below 0.9 confidence. They carry no y: they sit on
+ *   their line, so they are passed with it (`normaliseWords`).
+ * - Agentic Prompt Studio: `[page, left%, top%, width%, height%, hasMetadata]`,
+ *   already in percentages of the page.
+ *
+ * Pages are 0-based everywhere, as the producers send them.
+ */
+import type { PageSize } from "./types";
+
+export type HighlightVariant = "line" | "box";
+export type HighlightTone = "default" | "active" | "low-confidence";
+
+export interface Highlight {
+  id: string;
+  /** 0-based page index. */
+  page: number;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  variant: HighlightVariant;
+  tone: HighlightTone;
+  /** 0 to 1, when the producer sent one. */
+  confidence?: number;
+}
+
+/** A word's horizontal extent, in the same page-image units as its line. */
+export interface WordBox {
+  offset: number;
+  width: number;
+  /** The page width in those units. Absent from LLMWhisperer's own output. */
+  page_width?: number;
+  text?: string;
+  confidence?: number;
+}
+
+export interface NormaliseOptions {
+  /** PDF page sizes, used to find a page's width when a word box lacks one. */
+  pageSizes?: readonly PageSize[];
+  /** Prefix for generated ids; the entry's position is appended. */
+  idPrefix?: string;
+  /** A word box with confidence below this is shown as low. LLMWhisperer reports words below 0.9. */
+  lowConfidenceBelow?: number;
+}
+
+export const LOW_CONFIDENCE_BELOW = 0.9;
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, value));
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function isWordBox(value: unknown): value is WordBox {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    isFiniteNumber((value as WordBox).offset) &&
+    isFiniteNumber((value as WordBox).width)
+  );
+}
+
+function toneFor(
+  confidence: number | undefined,
+  options: NormaliseOptions,
+): HighlightTone {
+  const threshold = options.lowConfidenceBelow ?? LOW_CONFIDENCE_BELOW;
+  return confidence !== undefined && confidence < threshold
+    ? "low-confidence"
+    : "default";
+}
+
+/** A box with its edges clamped to the page; null when nothing is left of it. */
+function boxOnPage(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+): { x: number; y: number; w: number; h: number } | null {
+  const left = clamp01(x);
+  const top = clamp01(y);
+  const right = clamp01(x + w);
+  const bottom = clamp01(y + h);
+  if (right <= left || bottom <= top) {
+    return null;
+  }
+  return { x: left, y: top, w: right - left, h: bottom - top };
+}
+
+/** A box spanning the page's width reads as a line, whatever produced it. */
+function variantOf(box: { x: number; w: number }): HighlightVariant {
+  return box.x <= 0.001 && box.w >= 0.999 ? "line" : "box";
+}
+
+interface LineGeometry {
+  page: number;
+  baseY: number;
+  height: number;
+  pageHeight: number;
+  extra: unknown;
+}
+
+/** The four leading numbers of a line entry; null for padding and junk. */
+function readLine(entry: unknown): LineGeometry | null {
+  if (!Array.isArray(entry) || entry.length < 4) {
+    return null;
+  }
+  const [page, baseY, height, pageHeight, extra] = entry as unknown[];
+  if (
+    !isFiniteNumber(page) ||
+    !isFiniteNumber(baseY) ||
+    !isFiniteNumber(height) ||
+    !isFiniteNumber(pageHeight) ||
+    page < 0 ||
+    pageHeight <= 0 ||
+    height <= 0
+  ) {
+    // Producers pad with [0, 0, 0, 0] (and zero-height separators) for lines
+    // that have no place on the page.
+    return null;
+  }
+  return { page: Math.trunc(page), baseY, height, pageHeight, extra };
+}
+
+/**
+ * The page's width in the line's units: the producer's when sent, otherwise
+ * from the PDF page's aspect ratio. Dividing by the page height instead, as v0
+ * did, puts every word box too far left on a portrait page.
+ */
+function pageWidthUnits(
+  line: LineGeometry,
+  word: WordBox,
+  options: NormaliseOptions,
+): number | null {
+  if (isFiniteNumber(word.page_width) && word.page_width > 0) {
+    return word.page_width;
+  }
+  const size = options.pageSizes?.[line.page];
+  if (!size || size.height <= 0) {
+    return null;
+  }
+  return line.pageHeight * (size.width / size.height);
+}
+
+/** Says why word boxes were dropped, so a page-index mismatch is visible. */
+function warnNoPageWidth(
+  page: number,
+  count: number,
+  options: NormaliseOptions,
+) {
+  const known = options.pageSizes?.length ?? 0;
+  console.warn(
+    `Dropped ${count} word box(es) on page index ${page}: no page_width, and the document has ${known} page size(s).`,
+  );
+}
+
+function wordHighlight(
+  line: LineGeometry,
+  word: WordBox,
+  id: string,
+  options: NormaliseOptions,
+): Highlight | null {
+  const pageWidth = pageWidthUnits(line, word, options);
+  if (pageWidth === null) {
+    return null;
+  }
+  const box = boxOnPage(
+    word.offset / pageWidth,
+    (line.baseY - line.height) / line.pageHeight,
+    word.width / pageWidth,
+    line.height / line.pageHeight,
+  );
+  if (box === null) {
+    return null;
+  }
+  const confidence = isFiniteNumber(word.confidence)
+    ? word.confidence
+    : undefined;
+  return {
+    id,
+    page: line.page,
+    ...box,
+    variant: variantOf(box),
+    tone: toneFor(confidence, options),
+    confidence,
+  };
+}
+
+/** One line entry, as a full-width line or, with a word box, as that box. */
+export function normaliseLine(
+  entry: unknown,
+  id: string,
+  options: NormaliseOptions = {},
+): Highlight | null {
+  const line = readLine(entry);
+  if (line === null) {
+    return null;
+  }
+  if (isWordBox(line.extra)) {
+    if (pageWidthUnits(line, line.extra, options) === null) {
+      warnNoPageWidth(line.page, 1, options);
+      return null;
+    }
+    return wordHighlight(line, line.extra, id, options);
+  }
+  const box = boxOnPage(
+    0,
+    (line.baseY - line.height) / line.pageHeight,
+    1,
+    line.height / line.pageHeight,
+  );
+  if (box === null) {
+    return null;
+  }
+  const confidence = isFiniteNumber(line.extra) ? line.extra : undefined;
+  return {
+    id,
+    page: line.page,
+    ...box,
+    variant: "line",
+    tone: "default",
+    confidence,
+  };
+}
+
+/** Line entries, as sent for one field or prompt. Padding entries are dropped. */
+export function normaliseLines(
+  entries: readonly unknown[],
+  options: NormaliseOptions = {},
+): Highlight[] {
+  const prefix = options.idPrefix ?? "line-";
+  const highlights: Highlight[] = [];
+  entries.forEach((entry, index) => {
+    const highlight = normaliseLine(entry, `${prefix}${index}`, options);
+    if (highlight !== null) {
+      highlights.push(highlight);
+    }
+  });
+  return highlights;
+}
+
+/** LLMWhisperer word boxes on one line, as boxes. Needs page sizes or `page_width`. */
+export function normaliseWords(
+  lineEntry: unknown,
+  words: readonly unknown[],
+  options: NormaliseOptions = {},
+): Highlight[] {
+  const line = readLine(lineEntry);
+  if (line === null) {
+    return [];
+  }
+  // Called once per line, so the line's place is in the id: `word-0` on every
+  // line would collide as React keys and as the active id.
+  const prefix =
+    options.idPrefix ?? `word-${line.page}-${line.baseY}-${line.height}-`;
+  const highlights: Highlight[] = [];
+  let unplaced = 0;
+  words.forEach((word, index) => {
+    if (!isWordBox(word)) {
+      return;
+    }
+    if (pageWidthUnits(line, word, options) === null) {
+      unplaced += 1;
+      return;
+    }
+    const highlight = wordHighlight(line, word, `${prefix}${index}`, options);
+    if (highlight !== null) {
+      highlights.push(highlight);
+    }
+  });
+  if (unplaced > 0) {
+    warnNoPageWidth(line.page, unplaced, options);
+  }
+  return highlights;
+}
+
+/** Agentic Prompt Studio entries, `[page, left%, top%, width%, height%, hasMetadata]`. */
+export function normaliseAgentic(
+  entries: readonly unknown[],
+  options: Pick<NormaliseOptions, "idPrefix"> = {},
+): Highlight[] {
+  const prefix = options.idPrefix ?? "agentic-";
+  const highlights: Highlight[] = [];
+  entries.forEach((entry, index) => {
+    if (!Array.isArray(entry) || entry.length < 5) {
+      return;
+    }
+    // The 6th element, hasMetadata, says only that a word box was sent (v0
+    // drew those red and line boxes pink). It is not a confidence signal, and
+    // the geometry already shows whether the box spans the line.
+    const [page, left, top, width, height] = entry as unknown[];
+    if (
+      !isFiniteNumber(page) ||
+      page < 0 ||
+      !isFiniteNumber(left) ||
+      !isFiniteNumber(top) ||
+      !isFiniteNumber(width) ||
+      !isFiniteNumber(height)
+    ) {
+      return;
+    }
+    const box = boxOnPage(left / 100, top / 100, width / 100, height / 100);
+    if (box === null) {
+      return;
+    }
+    highlights.push({
+      id: `${prefix}${index}`,
+      page: Math.trunc(page),
+      ...box,
+      variant: variantOf(box),
+      tone: "default",
+    });
+  });
+  return highlights;
+}
+
+/** Highlights grouped by 0-based page, in their original order. */
+export function highlightsByPage(
+  highlights: readonly Highlight[],
+): Map<number, Highlight[]> {
+  const pages = new Map<number, Highlight[]>();
+  for (const highlight of highlights) {
+    const list = pages.get(highlight.page);
+    if (list) {
+      list.push(highlight);
+    } else {
+      pages.set(highlight.page, [highlight]);
+    }
+  }
+  return pages;
+}