diff --git a/AGENTS.md b/AGENTS.md
index 3b4734420..33b038182 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1489,7 +1489,7 @@ When a user denies a plan and Claude resubmits, the UI shows what changed betwee
 
 **State** (`packages/ui/hooks/usePlanDiff.ts`): Manages base version selection, diff computation, and version fetching. The server sends `previousPlan` with the initial `/api/plan` response; the hook auto-diffs against it. Users can select any prior version from the sidebar Version Browser.
 
-**Diff annotations:** The clean diff view supports block-level annotation — hover over added/removed/modified sections to annotate entire blocks. Annotations carry a `diffContext` field (`added`/`removed`/`modified`). Exported feedback includes `[In diff content]` labels.
+**Diff annotations:** The clean diff view supports block-level annotation — hover over added/removed/modified sections to annotate entire blocks. Annotations carry a `diffContext` field (`added`/`removed`/`modified`). Exported feedback includes `[In diff content]` labels. A diff annotation's `blockId` is `diff-block-N` (N indexes the diff against the selected base, not a document block), so the export cannot place it in the document: diff comments print together AFTER the document's other comments, in diff order (`sortAnnotationsInDocumentOrder` in `packages/ui/utils/parser.ts`); a document with no diff comments sorts exactly as before.
 
 **Annotation hook** (`packages/ui/hooks/useAnnotationHighlighter.ts`): Annotation infrastructure used by `Viewer.tsx`. Manages web-highlighter lifecycle, toolbar/popover state, annotation creation, text-based restoration, and scroll-to-selected. The diff view uses its own block-level hover system instead.
 
@@ -1629,7 +1629,7 @@ Share links carry the FENCED form in the payload's `p` (`shareableDocumentMarkdo
 
 **Raw-HTML annotate:** the sandboxed viewer never mutates the visited page's DOM. Committed annotations render as numbered placed comment markers plus overlay-projected highlight rectangles inside a shadow-rooted fixed overlay host: the durable anchor data (element selector, text snapshot, normalized selected point) is persisted, and the markers/highlights are disposable projections re-resolved from it on every reconcile. Shift-click multi-select joins additional elements to one comment (`htmlAdditionalTargets`).
 
-**Element context (agent-facing).** A pinpoint also captures a bounded description of the element at click time, `elementContext` on the annotation (`HtmlElementContext` in `packages/ui/types.ts`; extra targets carry a smaller one as `context`), built by `buildElementContext` in the bridge and re-validated at the parent trust boundary by `parseHtmlElementContext`, which lives in `packages/core/html-anchor.ts` beside `parseHtmlElementAnchor` (#1549); `useHtmlAnnotation.ts` imports and re-exports it rather than mirroring it, and the host persistence helpers in that same core module (`buildPersistedHtmlAnchor`, `projectHostThreads`) run it too, so a host that persists and projects through core keeps the field instead of dropping it on save. It is purely descriptive, never read by restore. Fields: tag, id, author classes, an ancestor `path`, explicit-or-implicit `role`, accessible `name`, an ALLOWLISTED attribute set (href/src scrubbed of query and fragment, `data:` truncated to its media type), rendered `text` (300), a collapsed HTML `outline` (600 chars; two child levels, then one, then a per-tag count, whichever first fits), child count, viewport `rect`, nearest `landmark` and `heading`, a `component` hint from `data-component`/`data-testid` ancestry (deliberately no React fiber reads), and in live-app sessions the `page` route and title. Never captured: form values, `on*` handlers, `style`, script/style/template contents, full innerHTML. Hard cap 2 KiB serialized per primary (1 KiB per extra target), shedding outline → text → attrs → classes → path → heading → landmark → component. Under the persisted anchor's own 16 KiB budget `buildPersistedHtmlAnchor` sheds contexts — per-target first, from the end, then the primary — BEFORE it drops any target, since a context is descriptive and re-derivable on the next click while a dropped target loses a marker the reviewer placed; `DEFAULT_HTML_ANCHOR_MAX_BYTES` is unchanged and the dropped-target counts still count targets only. The export (`elementContextExportBlock` in `packages/ui/utils/parser.ts`) prints a 4-backtick `html` fence of the outline plus `selector` / `path` / `role` · `name` · `component` / `attrs` / `text` / `box` / `near` lines under the comment; a text-less pinpoint's placeholder quote names WHICH element it is, not just its kind: the hover label plus the accessible name (`ctxName`: aria-label, alt, title, …) plus, for media (`img`, `video`/`audio` and their `<source>`, `iframe`, `embed`, `object`, `input type=image`, svg `<image>`), the source FILE name through the same `ctxScrubUrl` scrub (`[element: Image "Team photo" (team.jpg)]`, `[element: Image (data:image/png)]`; brackets and double quotes are swapped so it stays one token; `describeTextlessElement` in the bridge, used for the primary and every shift-click extra target). Restore never reads that quote (the anchor binds a text-less element), so pins saved with the older bare `[element: Image]` keep restoring. The export rewrites the placeholder to `Feedback on the <nav> element — "Primary"` in the heading, plus the `src` file name for media (`Feedback on the <img> element (jane.png)`), while a pinpoint with real quoted text keeps its quote line and gains the block. In srcdoc sessions `ctxScrubUrl` also drops the session's `/api/html-assets/<token>/` prefix, so a `src` reads as the author's own document-relative path, percent-decoded (`jane doe.png`). **Ask AI** carries the same identity: a question asked from a pinpoint composer sends `elementIdentityForAskAI(draftTargets)` (`packages/ui/utils/parser.ts`, the identity lines of `elementContextExportBlock` with `includeOutline: false`, numbered per element) as the scope's `detail`, which `buildDefaultPrompt` appends under "Selected element:" and the chat never displays; SDK providers, "Ask this session" and the agent terminal all send that prompt. It carries no query strings: the live route and an `href`/`src` selector rung are scrubbed to `?…` there (the persisted annotation keeps them). Annotations without the field export byte-identically. The grouped live-app export omits the `route` line (the `## Page:` heading carries it); `exportAnnotationEntry` (one annotation, no number) includes it; it is a pure helper for hosts and tests, and the annotation panel's card chrome is unchanged. Both helpers also take `includeOutline` (default `true`): `false` prints the identity lines without the fenced outline, for model turns where the 600-char outline is the expensive part per annotation. Share links drop `elementContext` exactly like anchors. The feedback archive records identity only (`elementTag`, `elementSelector`, `elementPath`, `elementRole`, `elementName`, `pageUrl`), never the outline. No `BRIDGE_PROTOCOL_VERSION` bump: the field is additive in both directions.
+**Element context (agent-facing).** A pinpoint also captures a bounded description of the element at click time, `elementContext` on the annotation (`HtmlElementContext` in `packages/ui/types.ts`; extra targets carry a smaller one as `context`), built by `buildElementContext` in the bridge and re-validated at the parent trust boundary by `parseHtmlElementContext`, which lives in `packages/core/html-anchor.ts` beside `parseHtmlElementAnchor` (#1549); `useHtmlAnnotation.ts` imports and re-exports it rather than mirroring it, and the host persistence helpers in that same core module (`buildPersistedHtmlAnchor`, `projectHostThreads`) run it too, so a host that persists and projects through core keeps the field instead of dropping it on save. It is purely descriptive, never read by restore. Fields: tag, id, author classes, an ancestor `path`, explicit-or-implicit `role`, accessible `name`, an ALLOWLISTED attribute set (href/src scrubbed of query and fragment, `data:` truncated to its media type), rendered `text` (300), a collapsed HTML `outline` (600 chars; two child levels, then one, then a per-tag count, whichever first fits), child count, viewport `rect`, nearest `landmark` and `heading`, a `component` hint from `data-component`/`data-testid` ancestry (deliberately no React fiber reads), and in live-app sessions the `page` route and title. Never captured: form values, `on*` handlers, `style`, script/style/template contents, full innerHTML. Hard cap 2 KiB serialized per primary (1 KiB per extra target), shedding outline → text → attrs → classes → path → heading → landmark → component → sourceName (one order, `ELEMENT_CONTEXT_SHED_ORDER` in core, mirrored by the bridge's `CTX_SHED_ORDER`; a test keeps them equal). Under the persisted anchor's own 16 KiB budget `buildPersistedHtmlAnchor` sheds contexts — per-target first, from the end, then the primary — BEFORE it drops any target, since a context is descriptive and re-derivable on the next click while a dropped target loses a marker the reviewer placed; `DEFAULT_HTML_ANCHOR_MAX_BYTES` is unchanged and the dropped-target counts still count targets only. The export (`elementContextExportBlock` in `packages/ui/utils/parser.ts`) prints a 4-backtick `html` fence of the outline plus `selector` / `path` / `role` · `name` · `component` / `attrs` / `text` / `box` / `near` lines under the comment; a text-less pinpoint's placeholder quote names WHICH element it is, not just its kind: the hover label plus the accessible name (`ctxName`: aria-label, alt, title, …) plus, for media (`img`, `video`/`audio` and their `<source>`, `iframe`, `embed`, `object`, `input type=image`, svg `<image>`), the source FILE name through the same `ctxScrubUrl` scrub (`[element: Image "Team photo" (team.jpg)]`, `[element: Image (data:image/png)]`; brackets and double quotes are swapped so it stays one token; `describeTextlessElement` in the bridge, used for the primary and every shift-click extra target). Restore never reads that quote (the anchor binds a text-less element), so pins saved with the older bare `[element: Image]` keep restoring. The export rewrites the placeholder to `Feedback on the <nav> element — "Primary"` in the heading, plus the media file name (`Feedback on the <img> element (jane.png)`), read from the context's `sourceName`: the bridge records the file `describeTextlessElement` names (src, a lazy `data-src` over a `data:` placeholder, `srcset`, `<picture><source srcset>`, a video's `<source>` or `poster`, scrubbed the same way), so the heading and the composer quote always name the same file; contexts saved without `sourceName` fall back to the scrubbed `src` attribute, while a pinpoint with real quoted text keeps its quote line and gains the block. In srcdoc sessions `ctxScrubUrl` also drops the session's `/api/html-assets/<token>/` prefix, so a `src` reads as the author's own document-relative path, percent-decoded (`jane doe.png`). **Ask AI** carries the same identity: a question asked from a pinpoint composer sends `elementIdentityForAskAI(draftTargets)` (`packages/ui/utils/parser.ts`, the identity lines of `elementContextExportBlock` with `includeOutline: false`, numbered per element) as the scope's `detail`, which `buildDefaultPrompt` appends under "Selected element:" and the chat never displays; SDK providers, "Ask this session" and the agent terminal all send that prompt. It carries no query strings: the live route and an `href`/`src` selector rung are scrubbed to `?…` there (the persisted annotation keeps them). Annotations without the field export byte-identically. The grouped live-app export omits the `route` line (the `## Page:` heading carries it); `exportAnnotationEntry` (one annotation, no number) includes it; it is a pure helper for hosts and tests, and the annotation panel's card chrome is unchanged. Both helpers also take `includeOutline` (default `true`): `false` prints the identity lines without the fenced outline, for model turns where the 600-char outline is the expensive part per annotation. Share links drop `elementContext` exactly like anchors. The feedback archive records identity only (`elementTag`, `elementSelector`, `elementPath`, `elementRole`, `elementName`, `pageUrl`), never the outline. No `BRIDGE_PROTOCOL_VERSION` bump: the field is additive in both directions.
 
 **HTML and live-app interaction model:** raw-HTML sessions and live app sessions (`mode: "annotate-app"`) share one contract. Both open with pinpoint **armed** (`htmlAnnotateArmed` defaults to `true`, `packages/editor/App.tsx:493`; live sessions open armed like every other HTML surface, `App.tsx:2871`). `Esc` walks a ladder instead of exiting outright: a pending draft closes first, then the pinpoint hover outline clears, and only then does `Esc` drop the surface to **Interact**, where the bridge goes passive so clicks, forms, text selection, and SPA navigation reach the page natively (`packages/ui/components/html-viewer/bridge-script.ts:3066-3080`; committed markers stay visible and a marker click still opens its comment, and in Interact an open drag-comment draft still closes before `Esc` is handed back to the page). Vim owns its own ladder and is skipped here. The header **pen** button toggles Annotate/Interact (`packages/editor/components/AppHeader.tsx:386-404`, `aria-pressed`), as does `Mod+Shift+A` (`packages/ui/shortcuts/plan-review/htmlAnnotate.shortcuts.ts`) — a real toggle in BOTH directions, which is what makes it the answer to "Esc dropped me to Interact, how do I get back?". Disarming through either path tears down any pending draft, because the bridge's `set-annotate-mode(false)` handler clears every pending affordance (`bridge-script.ts:719-739`), exactly as the Esc ladder does. The bridge mirrors the chord inside the iframe on the capture phase and forwards it to the parent, so it works whichever document owns focus. Text drag-selection commenting is **always live**, on both surfaces and in both states, ungated from the armed flag and from the input method (`bridge-script.ts:384-386`, `:1420-1436`): while armed, a click pins an element and a drag selects text at the same time, and the one-shot `dragEndedClick` guard stops a completed drag's trailing click from re-pinning (`bridge-script.ts:1381-1390`).
 
diff --git a/packages/core/html-anchor.test.ts b/packages/core/html-anchor.test.ts
index 0cb15c3a5..4045aa0b7 100644
--- a/packages/core/html-anchor.test.ts
+++ b/packages/core/html-anchor.test.ts
@@ -449,4 +449,28 @@ describe("parseHtmlElementContext", () => {
     expect(oversized).toBeDefined();
     expect(bytes(oversized)).toBeLessThanOrEqual(MAX_ELEMENT_CONTEXT_BYTES);
   });
+
+  // Failure to catch: an image pin on a long live-app route whose context
+  // only fits WITHOUT `sourceName` being dropped whole (undefined) because
+  // `sourceName` was not in the shed order.
+  test("an oversized context sheds sourceName before it drops the whole context", () => {
+    const base = { tag: "img", role: "img", name: "Hero" };
+    const sourceName = "hero-banner-with-a-long-name.webp";
+    // A route sized so the context fits with a few bytes to spare, then
+    // overflows once sourceName rides along.
+    const slack = 8;
+    const urlLength = MAX_ELEMENT_CONTEXT_BYTES - bytes({ ...base, page: { url: "" } }) - slack;
+    const page = { url: `/${"r".repeat(urlLength - 1)}` };
+    expect(bytes({ ...base, page })).toBeLessThanOrEqual(MAX_ELEMENT_CONTEXT_BYTES);
+    expect(bytes({ ...base, sourceName, page })).toBeGreaterThan(MAX_ELEMENT_CONTEXT_BYTES);
+
+    const shed = parseHtmlElementContext({ ...base, sourceName, page });
+    expect(shed).toBeDefined();
+    expect(shed?.sourceName).toBeUndefined();
+    expect(shed?.page?.url).toBe(page.url);
+    expect(shed?.name).toBe("Hero");
+
+    // With room to spare it is kept.
+    expect(parseHtmlElementContext({ ...base, sourceName, page: { url: "/home" } })?.sourceName).toBe(sourceName);
+  });
 });
diff --git a/packages/core/html-anchor.ts b/packages/core/html-anchor.ts
index 94c699d30..be6ff9078 100644
--- a/packages/core/html-anchor.ts
+++ b/packages/core/html-anchor.ts
@@ -67,6 +67,13 @@ export interface HtmlElementContext {
   component?: string;
   /** Live-app sessions only: the route the element was seen on and the page title. */
   page?: { url: string; title?: string };
+  /**
+   * Media elements only: the file the element shows (`team.jpg`,
+   * `data:image/png`), resolved by the bridge the same way the composer quote
+   * names it — `src`, a lazy `data-src`, `srcset`, `<picture><source>`, a
+   * `<video>`'s `<source>` or `poster` — after the query/fragment scrub.
+   */
+  sourceName?: string;
 }
 
 /** Mirrors `MAX_ANCHOR_SELECTOR_LENGTH` in `@plannotator/ui`. */
@@ -112,6 +119,8 @@ const MAX_CONTEXT_LANDMARK_LENGTH = 80;
 const MAX_CONTEXT_HEADING_LENGTH = 130;
 const MAX_CONTEXT_COMPONENT_LENGTH = 100;
 const MAX_CONTEXT_PAGE_TITLE_LENGTH = 200;
+/** The bridge caps the name at 60; headroom for the parent's own collapse. */
+const MAX_CONTEXT_SOURCE_NAME_LENGTH = 80;
 
 /** Attribute names the context may carry (mirrors CONTEXT_ATTRS in the bridge). */
 export const CONTEXT_ATTR_ALLOWLIST = new Set([
@@ -202,6 +211,16 @@ function contextBytes(value: unknown): number {
   return new TextEncoder().encode(JSON.stringify(value)).length;
 }
 
+/**
+ * Fields an over-budget context sheds, first to last; mirrors `CTX_SHED_ORDER`
+ * in the bridge (a test keeps the two in step). `sourceName` goes last: the
+ * export heading falls back to the `src` attribute without it, and shedding it
+ * is still better than losing the whole context.
+ */
+export const ELEMENT_CONTEXT_SHED_ORDER: ReadonlyArray<keyof HtmlElementContext> = [
+  "outline", "text", "attrs", "classes", "path", "heading", "landmark", "component", "sourceName",
+];
+
 /**
  * Validate a bridge-posted element context. Pure and fail-closed: returns
  * `undefined` if `value` is not a valid element context or tag is missing/empty.
@@ -268,6 +287,8 @@ export function parseHtmlElementContext(value: unknown): HtmlElementContext | un
   if (heading) context.heading = heading;
   const component = collapseContextScalar(value.component, MAX_CONTEXT_COMPONENT_LENGTH);
   if (component) context.component = component;
+  const sourceName = collapseContextScalar(value.sourceName, MAX_CONTEXT_SOURCE_NAME_LENGTH);
+  if (sourceName) context.sourceName = sourceName;
   if (isRecord(value.page)) {
     const url = collapseContextScalar(value.page.url, MAX_PAGE_URL_LENGTH);
     if (url) {
@@ -277,8 +298,7 @@ export function parseHtmlElementContext(value: unknown): HtmlElementContext | un
     }
   }
   // Serialized bound: shed the expendable fields in the bridge's order until the whole fits.
-  const shedOrder: Array<keyof HtmlElementContext> = ["outline", "text", "attrs", "classes", "path", "heading", "landmark", "component"];
-  for (const field of shedOrder) {
+  for (const field of ELEMENT_CONTEXT_SHED_ORDER) {
     if (contextBytes(context) <= MAX_ELEMENT_CONTEXT_BYTES) break;
     delete context[field];
   }
diff --git a/packages/ui/components/html-viewer/bridge-script.ts b/packages/ui/components/html-viewer/bridge-script.ts
index 6e753648e..14c74d1a3 100644
--- a/packages/ui/components/html-viewer/bridge-script.ts
+++ b/packages/ui/components/html-viewer/bridge-script.ts
@@ -3250,7 +3250,8 @@ export const BRIDGE_SCRIPT = `(function() {
   }
 
   // Shed order when over budget: the fields an agent can live without first.
-  var CTX_SHED_ORDER = ['outline', 'text', 'attrs', 'classes', 'path', 'heading', 'landmark', 'component'];
+  // Mirrors ELEMENT_CONTEXT_SHED_ORDER in @plannotator/core/html-anchor.
+  var CTX_SHED_ORDER = ['outline', 'text', 'attrs', 'classes', 'path', 'heading', 'landmark', 'component', 'sourceName'];
 
   function buildElementContext(el, maxBytes) {
     if (!el || el.nodeType !== 1) return null;
@@ -3277,6 +3278,12 @@ export const BRIDGE_SCRIPT = `(function() {
       if (heading) context.heading = heading;
       var component = ctxComponent(el);
       if (component) context.component = component;
+      // The media file this element shows, resolved exactly as the composer
+      // quote resolves it (src, a lazy data-src, srcset, <picture>/<source>,
+      // poster; see descRawSource), so the exported heading can name the file
+      // even when the element has no usable src attribute.
+      var sourceName = descSourceName(el);
+      if (sourceName) context.sourceName = sourceName;
       if (LIVE) {
         context.page = { url: currentPageUrl() };
         var title = ctxCollapse(document.title, 200);
@@ -3406,6 +3413,15 @@ export const BRIDGE_SCRIPT = `(function() {
     return ctxCollapse(String(value).replace(/\\[/g, '(').replace(/\\]/g, ')').replace(/"/g, "'"), max);
   }
 
+  // Candidates are comma-separated ("a.png, b.png 2x"); the URL is the
+  // first candidate's first word. A data: URL carries its own comma, so it is
+  // taken up to whitespace instead.
+  function descFirstSrcsetUrl(value) {
+    var srcset = String(value || '').trim();
+    if (!srcset) return '';
+    return (/^data:/i.test(srcset) ? srcset : srcset.split(',')[0]).trim().split(/\\s+/)[0] || '';
+  }
+
   function descRawSource(el) {
     var tag = el.tagName;
     if (tag === 'INPUT' && String(el.getAttribute('type') || '').toLowerCase() !== 'image') return '';
@@ -3418,11 +3434,14 @@ export const BRIDGE_SCRIPT = `(function() {
     var lazy = (el.getAttribute('data-src') || '').trim();
     if (lazy && (!src || /^data:/i.test(src))) src = lazy;
     if (!src && tag === 'IMG') {
-      var srcset = (el.getAttribute('srcset') || '').trim();
-      // Candidates are comma-separated ("a.png, b.png 2x"); the URL is the
-      // first candidate's first word. A data: URL carries its own comma, so
-      // it is taken up to whitespace instead.
-      if (srcset) src = (/^data:/i.test(srcset) ? srcset : srcset.split(',')[0]).trim().split(/\\s+/)[0] || '';
+      src = descFirstSrcsetUrl(el.getAttribute('srcset'));
+      // <picture><source srcset="…"><img></picture>: the img itself may carry
+      // no source at all; the first <source> candidate names the file.
+      var picture = el.parentElement;
+      if (!src && picture && picture.tagName === 'PICTURE' && picture.querySelector) {
+        var pictureSource = picture.querySelector('source[srcset]');
+        if (pictureSource) src = descFirstSrcsetUrl(pictureSource.getAttribute('srcset'));
+      }
     }
     if (!src && (tag === 'VIDEO' || tag === 'AUDIO')) {
       var child = el.querySelector && el.querySelector('source[src]');
diff --git a/packages/ui/components/html-viewer/bridgeElementContext.test.ts b/packages/ui/components/html-viewer/bridgeElementContext.test.ts
index df582ed6e..d2d848bdd 100644
--- a/packages/ui/components/html-viewer/bridgeElementContext.test.ts
+++ b/packages/ui/components/html-viewer/bridgeElementContext.test.ts
@@ -15,8 +15,22 @@
  * the SHIPPED source rather than a copy.
  */
 import { describe, expect, test } from 'bun:test';
+import { ELEMENT_CONTEXT_SHED_ORDER } from '@plannotator/core/html-anchor';
 import { BRIDGE_SCRIPT } from './bridge-script';
 
+// Failure to catch: the bridge and the parent's validator shedding different
+// fields (or one of them never shedding a new field such as sourceName), so a
+// context the bridge trimmed to fit is dropped whole at the trust boundary.
+describe('element context shed order', () => {
+  test("the bridge's CTX_SHED_ORDER equals core's ELEMENT_CONTEXT_SHED_ORDER", () => {
+    const match = /var CTX_SHED_ORDER = (\[[^\]]*\]);/.exec(BRIDGE_SCRIPT);
+    if (!match) throw new Error('bridge no longer defines CTX_SHED_ORDER');
+    const bridgeOrder = JSON.parse(match[1]!.replace(/'/g, '"')) as string[];
+    expect(bridgeOrder).toEqual([...ELEMENT_CONTEXT_SHED_ORDER]);
+    expect(bridgeOrder).toContain('sourceName');
+  });
+});
+
 /** Pull one `function name(...) { ... }` out of the bridge source by brace
  *  balance, so the test never diverges from what ships. */
 function extractFunction(source: string, name: string): string {
diff --git a/packages/ui/components/html-viewer/srcdoc.test.ts b/packages/ui/components/html-viewer/srcdoc.test.ts
index 5ea1a6895..67b173bef 100644
--- a/packages/ui/components/html-viewer/srcdoc.test.ts
+++ b/packages/ui/components/html-viewer/srcdoc.test.ts
@@ -12,6 +12,8 @@
  * for non-opted-in documents must go red here.
  */
 import { afterEach, beforeAll, describe, expect, test } from "bun:test";
+import { parseHtmlElementContext } from "@plannotator/core/html-anchor";
+import { exportAnnotations } from "../../utils/parser";
 import { ANNOTATION_HIGHLIGHT_CSS, BRIDGE_SCRIPT } from "./bridge-script";
 import {
   DIFF_HIGHLIGHT_CSS,
@@ -1554,6 +1556,54 @@ describe.if(hasDom)("bridge theme handler (DOM)", () => {
     document.body.replaceChildren();
   });
 
+  // Failure to catch (0.28.1 smoke): the composer quote naming the real file
+  // while the exported heading said only "<img> element" or "(data:image/gif)",
+  // because the export read the src attribute alone. The context now carries
+  // the bridge's own resolution, so quote and heading name the same file.
+  test("the exported heading names the same file the composer quote does, whatever attribute carries it", async () => {
+    document.body.innerHTML = [
+      "<div>",
+      '<img id="p-srcset" srcset="hero-480.jpg 480w, hero-960.jpg 960w">',
+      '<img id="p-lazy" src="data:image/gif;base64,R0lGOD" data-src="/img/real.png?v=2">',
+      '<picture><source srcset="/img/pic.avif 1x, /img/pic@2x.avif 2x"><img id="p-picture"></picture>',
+      '<video id="p-poster" poster="/media/cover.jpg?sig=x"></video>',
+      '<video id="p-source"><source src="/media/clip.mp4"></video>',
+      '<img id="p-src" alt="Team" src="https://cdn.test/team.jpg?sig=SECRET">',
+      "</div>",
+    ].join("");
+    postBridge({ type: "plannotator-bridge-set-vim-mode", enabled: false });
+    postBridge({ type: "plannotator-bridge-set-input-method", method: "pinpoint" });
+
+    const cases: Array<[string, string, string]> = [
+      ["#p-srcset", "[element: Image (hero-480.jpg)]", "Feedback on the <img> element (hero-480.jpg)"],
+      ["#p-lazy", "[element: Image (real.png)]", "Feedback on the <img> element (real.png)"],
+      ["#p-picture", "[element: Image (pic.avif)]", "Feedback on the <img> element (pic.avif)"],
+      ["#p-poster", "[element: Video (cover.jpg)]", "Feedback on the <video> element (cover.jpg)"],
+      ["#p-source", "[element: Video (clip.mp4)]", "Feedback on the <video> element (clip.mp4)"],
+      ["#p-src", '[element: Image "Team" (team.jpg)]', 'Feedback on the <img> element — "Team" (team.jpg)'],
+    ];
+    let x = 10;
+    for (const [selector, quote, heading] of cases) {
+      const el = document.querySelector<HTMLElement>(selector)!;
+      hoverAt(el, (x += 40), 40);
+      const { messages } = await clickAndCollectSelection(el, x, 40);
+      expect(messages.length).toBe(1);
+      expect(messages[0]!.text).toBe(quote);
+      // Through the parent's trust boundary, then the export.
+      const elementContext = parseHtmlElementContext(messages[0]!.context);
+      expect(JSON.stringify(elementContext)).not.toContain("SECRET");
+      const out = exportAnnotations([], [{
+        id: "a", blockId: "", startOffset: 0, endOffset: 0, type: "COMMENT", text: "note",
+        originalText: quote, createdA: 1, elementContext,
+      }]);
+      expect(out).toContain(`## 1. ${heading}\n`);
+      postBridge({ type: "plannotator-bridge-cancel-selection" });
+    }
+
+    postBridge({ type: "plannotator-bridge-set-input-method", method: "drag" });
+    document.body.replaceChildren();
+  });
+
   test("an image pin saved with the old bare placeholder still restores through its anchor", async () => {
     // Restore never reads the quote for a text-less element: the anchor binds
     // it. Drafts saved before the description grew must keep their marker.
diff --git a/packages/ui/types.ts b/packages/ui/types.ts
index a4b509871..95426f299 100644
--- a/packages/ui/types.ts
+++ b/packages/ui/types.ts
@@ -188,6 +188,10 @@ export interface HtmlElementContext {
   component?: string;
   /** Live-app sessions only: the route the element was seen on and the page title. */
   page?: { url: string; title?: string };
+  /** Media elements only: the file the element shows, resolved by the bridge
+   *  exactly as the composer quote names it (src, data-src, srcset,
+   *  <picture>/<source>, poster), query and fragment scrubbed. */
+  sourceName?: string;
 }
 
 export type AlertKind = 'note' | 'tip' | 'warning' | 'caution' | 'important';
diff --git a/packages/ui/utils/parser.diffOrder.test.ts b/packages/ui/utils/parser.diffOrder.test.ts
new file mode 100644
index 000000000..12cbd1b86
--- /dev/null
+++ b/packages/ui/utils/parser.diffOrder.test.ts
@@ -0,0 +1,119 @@
+/**
+ * Where version-diff comments land in exported feedback.
+ *
+ * A comment made in the plan/version diff view carries `blockId`
+ * `diff-block-N`: N indexes the diff against the selected base, and nothing on
+ * the annotation maps it back to a document block. They used to rank -1 and
+ * print FIRST in a document's feedback, ahead of comments that come before the
+ * changed text.
+ *
+ * Failures to catch:
+ *  - Diff comments sorting ahead of the document's own comments again.
+ *  - Diff comments out of diff order (diff-block-10 before diff-block-2).
+ *  - The `[In diff content]` label disappearing.
+ *  - Any change to the order of a document with NO diff comments (the root
+ *    export must stay byte-identical; fuzzed against the pre-fix comparator).
+ */
+import { describe, expect, test } from 'bun:test';
+import { AnnotationType, type Annotation, type Block } from '../types';
+import { exportAnnotations, exportLinkedDocAnnotations, parseMarkdownToBlocks } from './parser';
+
+const MARKDOWN = Array.from({ length: 12 }, (_, i) => `Paragraph number ${i + 1} text.`).join('\n\n');
+const BLOCKS = parseMarkdownToBlocks(MARKDOWN);
+
+function ann(id: string, blockId: string, text: string, extra: Partial<Annotation> = {}): Annotation {
+  return {
+    id,
+    blockId,
+    startOffset: 0,
+    endOffset: 9,
+    type: AnnotationType.COMMENT,
+    text,
+    originalText: 'Paragraph',
+    createdA: 1,
+    ...extra,
+  };
+}
+
+const MIXED: Annotation[] = [
+  ann('d10', 'diff-block-10', 'DIFF-TEN', { diffContext: 'added', originalText: 'New paragraph' }),
+  ann('late', 'block-11', 'AFTER-THE-CHANGE'),
+  ann('d2', 'diff-block-2', 'DIFF-TWO', { diffContext: 'modified', originalText: '- old\n+ new' }),
+  ann('early', 'block-1', 'BEFORE-THE-CHANGE'),
+];
+
+function positions(out: string, markers: string[]): number[] {
+  return markers.map((m) => {
+    const at = out.indexOf(m);
+    expect(at).toBeGreaterThanOrEqual(0);
+    return at;
+  });
+}
+
+describe('version-diff comments in exported feedback', () => {
+  test('root export: document comments first, then diff comments in diff order', () => {
+    const out = exportAnnotations(BLOCKS, MIXED);
+    const order = positions(out, ['BEFORE-THE-CHANGE', 'AFTER-THE-CHANGE', 'DIFF-TWO', 'DIFF-TEN']);
+    expect([...order].sort((a, b) => a - b)).toEqual(order);
+    expect(out).toContain('## 3. [In diff content] Feedback on:');
+    expect(out).toContain('## 4. [In diff content] Feedback on: "New paragraph"');
+  });
+
+  test('linked document export puts them in the same place, with and without blocks', () => {
+    for (const withBlocks of [true, false]) {
+      const out = exportLinkedDocAnnotations(new Map([['/repo/doc.md', {
+        annotations: MIXED,
+        globalAttachments: [],
+        markdown: MARKDOWN,
+        ...(withBlocks ? { blocks: BLOCKS } : {}),
+      }]]));
+      const order = positions(out, ['BEFORE-THE-CHANGE', 'AFTER-THE-CHANGE', 'DIFF-TWO', 'DIFF-TEN']);
+      expect([...order].sort((a, b) => a - b)).toEqual(order);
+    }
+  });
+
+  test('a global comment keeps its place ahead of the document', () => {
+    const global = ann('g', '', 'GLOBAL-NOTE', { type: AnnotationType.GLOBAL_COMMENT, originalText: '' });
+    const out = exportAnnotations(BLOCKS, [...MIXED, global]);
+    const order = positions(out, ['GLOBAL-NOTE', 'BEFORE-THE-CHANGE', 'DIFF-TWO']);
+    expect([...order].sort((a, b) => a - b)).toEqual(order);
+  });
+
+  // The pre-fix comparator, verbatim: with no diff comments the export must
+  // not move a single entry.
+  const preFixSort = (annotations: Annotation[], blocks: Block[]) => {
+    const order = new Map<string, number>();
+    blocks.forEach((blk, index) => order.set(blk.id, index));
+    return [...annotations].sort((a, b) => {
+      if (a.blockId !== b.blockId) {
+        const byBlock = (order.get(a.blockId) ?? -1) - (order.get(b.blockId) ?? -1);
+        if (byBlock) return byBlock;
+      }
+      return a.startOffset - b.startOffset;
+    });
+  };
+
+  test('without diff comments the root export is byte-identical to the pre-fix order (fuzzed)', () => {
+    let seed = 1696;
+    const rand = (n: number) => {
+      seed = (seed * 1103515245 + 12345) % 2147483648;
+      return seed % n;
+    };
+    const ids = [...BLOCKS.map((b) => b.id), '', 'external', 'global', 'block-99'];
+    for (let round = 0; round < 200; round += 1) {
+      const count = 1 + rand(8);
+      const annotations = Array.from({ length: count }, (_, i) => ann(
+        `a${round}-${i}`,
+        ids[rand(ids.length)]!,
+        `TEXT-${round}-${i}`,
+        { startOffset: rand(5) },
+      ));
+      // Every entry's text is unique, so its position in the output is its rank.
+      const out = exportAnnotations(BLOCKS, annotations);
+      const expected = preFixSort(annotations, BLOCKS).map((a) => a.text!);
+      for (const text of expected) expect(out).toContain(text);
+      const emitted = [...expected].sort((x, y) => out.indexOf(x) - out.indexOf(y));
+      expect(emitted).toEqual(expected);
+    }
+  });
+});
diff --git a/packages/ui/utils/parser.test.ts b/packages/ui/utils/parser.test.ts
index f9acfc142..1af670ee7 100644
--- a/packages/ui/utils/parser.test.ts
+++ b/packages/ui/utils/parser.test.ts
@@ -2213,6 +2213,30 @@ describe("exportAnnotations — element context (raw-HTML / live-app pinpoints)"
     expect(inline).toContain("## 1. Feedback on the <img> element (data:image/png)\n");
   });
 
+  // Failure to catch (0.28.1 smoke): an image with no usable `src` (srcset
+  // only, a lazy data: placeholder with the file in data-src, <picture>, a
+  // video poster) exported as a bare "<img> element" or "(data:image/png)"
+  // while the composer quote named the real file.
+  test("an image heading names the file the bridge resolved, not the src attribute alone", () => {
+    const img = (context: object, originalText: string) => ({
+      blockId: "", startOffset: 0, endOffset: 0, type: "COMMENT", text: "swap this",
+      originalText, htmlAnchor: { selector: "#hero", tagName: "img", text: "" },
+      elementContext: { tag: "img", role: "img", ...context },
+    });
+    const srcsetOnly = exportAnnotations([], [img({ sourceName: "hero-480.jpg" }, "[element: Image (hero-480.jpg)]")]);
+    expect(srcsetOnly).toContain("## 1. Feedback on the <img> element (hero-480.jpg)\n");
+    // The data: placeholder in src loses to the resolved lazy file.
+    const lazy = exportAnnotations([], [img(
+      { sourceName: "hero-banner.webp", attrs: [["src", "data:image/gif;base64,…"]] },
+      "[element: Image (hero-banner.webp)]",
+    )]);
+    expect(lazy).toContain("## 1. Feedback on the <img> element (hero-banner.webp)\n");
+    expect(lazy).not.toContain("(data:image/gif)");
+    // A file that equals the accessible name is not repeated.
+    const same = exportAnnotations([], [img({ name: "logo.svg", sourceName: "logo.svg" }, '[element: Image "logo.svg"]')]);
+    expect(same).toContain('## 1. Feedback on the <img> element — "logo.svg"\n');
+  });
+
   test("a pinpoint with real quoted text keeps its quote line and gains the block", () => {
     const output = exportAnnotations([], [navAnn({ originalText: "Home About Pricing Docs", elementContext: { ...NAV_CONTEXT, text: "Home About Pricing Docs" } })]);
     expect(output).toContain('## 1. Feedback on: "Home About Pricing Docs"\n> this\n');
diff --git a/packages/ui/utils/parser.ts b/packages/ui/utils/parser.ts
index 10c31e769..3764ecf2c 100644
--- a/packages/ui/utils/parser.ts
+++ b/packages/ui/utils/parser.ts
@@ -784,10 +784,18 @@ const commentHeadingLine = (ann: any): string => {
   return `Feedback on: "${ann.originalText}"`;
 };
 
-/** The file a media element's (already scrubbed) `src` attribute names, so two nameless images read differently in a heading:
+/** The file a media element shows, so two nameless images read differently in a heading:
  *  `team.jpg` for `https://cdn.test/img/team.jpg?…`, `data:image/png` for an
- *  inline image. Empty when the context carries no source. */
+ *  inline image. Empty when the context carries no source.
+ *
+ *  `sourceName` is the bridge's own resolution (the one the composer quote
+ *  uses: src, a lazy data-src, srcset, <picture>/<source>, poster), so the
+ *  heading and the quote can never name different files. Contexts captured
+ *  before that field existed fall back to the scrubbed `src` attribute. */
 const elementSourceFileName = (context: any): string => {
+  if (typeof context?.sourceName === 'string' && context.sourceName.trim()) {
+    return safeInline(context.sourceName, 60);
+  }
   const attrs = Array.isArray(context?.attrs) ? context.attrs : [];
   const pair = attrs.find((p: unknown) => Array.isArray(p) && p[0] === 'src' && typeof p[1] === 'string');
   if (!pair) return '';
@@ -1049,15 +1057,37 @@ const questionItemsFromAnswers = (answers: QuestionAnswer[]): QuestionExportItem
     settled: false,
   }));
 
+/** The diff-block index of a comment made in the plan/version diff view
+ *  (`blockId` `diff-block-N`), or null for every other annotation. */
+const diffBlockIndex = (ann: any): number | null => {
+  const match = typeof ann?.blockId === 'string' ? /^diff-block-(\d+)$/.exec(ann.blockId) : null;
+  return match ? Number(match[1]) : null;
+};
+
 /**
  * Sort annotations in DOCUMENT order: by the block's position in `blocks`,
  * then by offset. Without blocks (a linked document whose text is unknown)
  * block ids compare numerically, so block-10 never precedes block-2.
+ *
+ * Comments made in the version diff view (`diff-block-N`) cannot be placed in
+ * the document: N indexes the diff against whichever base was selected, and
+ * nothing in the annotation maps it back to a block. They go together AFTER
+ * every other comment, in diff order (which is itself document order, since
+ * the diff walks the document). A list with no diff comments sorts exactly as
+ * before.
  */
 const sortAnnotationsInDocumentOrder = (annotations: any[], blocks: Block[] | undefined): any[] => {
   const order = new Map<string, number>();
   blocks?.forEach((blk, index) => order.set(blk.id, index));
   return [...annotations].sort((a, b) => {
+    const diffA = diffBlockIndex(a);
+    const diffB = diffBlockIndex(b);
+    if (diffA !== null || diffB !== null) {
+      if (diffA === null) return -1;
+      if (diffB === null) return 1;
+      if (diffA !== diffB) return diffA - diffB;
+      return a.startOffset - b.startOffset;
+    }
     if (a.blockId !== b.blockId) {
       // Two ids missing from `blocks` share position -1; fall through to the
       // offset so the main document keeps its pre-#1696 order.