fix(app): keep HTML preview fragment links inside the preview

A file previewed through `srcDoc` resolves `<a href="#section">` against the
app's URL, so the link loaded Paseo inside the iframe and the preview became
the Welcome screen. Handle same-document fragment clicks from a small script
in the preview document, and let the page's own handlers go first.

Closes #7465

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/app/e2e/browser/file-editing.spec.ts

@@ -826,6 +826,147 @@ test.describe("CodeMirror workspace file editing", () => {
     await expect(preview.host).toBeVisible();
   });
 
+  test("keeps HTML fragment links in the preview and scrolls to the target", async ({
+    page,
+    withWorkspace,
+  }) => {
+    const workspace = await withWorkspace({ prefix: "html-fragments-" });
+    await writeFile(
+      path.join(workspace.repoPath, "fragments.html"),
+      `<!doctype html><html><body>
+<a href="#section">Jump to section</a>
+<div style="height: 1200px"></div>
+<h2 id="section">Target section</h2>
+</body></html>`,
+      "utf8",
+    );
+    await workspace.navigateTo();
+    await openWorkspaceFile(page, "fragments.html");
+
+    const preview = htmlPreview(page);
+    await expect(preview.document.getByRole("link", { name: "Jump to section" })).toBeVisible();
+    await page.screenshot({ path: test.info().outputPath("fragment-before-click.png") });
+    await preview.document.getByRole("link", { name: "Jump to section" }).click();
+
+    await expect(
+      preview.document.getByRole("heading", { name: "Target section" }),
+    ).toBeInViewport();
+    expect(await preview.document.locator("body").evaluate(() => location.href)).toBe(
+      "about:srcdoc#section",
+    );
+    expect(await preview.document.locator("body").evaluate(() => window.scrollY)).toBeGreaterThan(
+      0,
+    );
+    await page.screenshot({ path: test.info().outputPath("fragment-after-click.png") });
+  });
+
+  test("lets an HTML page prevent fragment navigation", async ({ page, withWorkspace }) => {
+    const workspace = await withWorkspace({ prefix: "html-fragment-handler-" });
+    await writeFile(
+      path.join(workspace.repoPath, "handled.html"),
+      `<!doctype html><html><body>
+<a href="#section" onclick="event.preventDefault(); document.querySelector('output').textContent = 'Page handled click'">Handled jump</a>
+<output>Waiting for click</output>
+<div style="height: 1200px"></div><h2 id="section">Target section</h2>
+</body></html>`,
+      "utf8",
+    );
+    await workspace.navigateTo();
+    await openWorkspaceFile(page, "handled.html");
+
+    const preview = htmlPreview(page);
+    await preview.document.getByRole("link", { name: "Handled jump" }).click();
+    await expect(preview.document.locator("output")).toHaveText("Page handled click");
+    await expect(
+      preview.document.getByRole("heading", { name: "Target section" }),
+    ).not.toBeInViewport();
+    expect(await preview.document.locator("body").evaluate(() => location.href)).toBe(
+      "about:srcdoc",
+    );
+    expect(await preview.document.locator("body").evaluate(() => window.scrollY)).toBe(0);
+  });
+
+  test("handles HTML fragment targets, empty and missing fragments, and modified clicks", async ({
+    page,
+    withWorkspace,
+  }) => {
+    const workspace = await withWorkspace({ prefix: "html-fragment-targets-" });
+    await writeFile(
+      path.join(workspace.repoPath, "targets.html"),
+      `<!doctype html><html><head><style>:target { color: rgb(255, 0, 0); }</style></head><body>
+<nav style="position: fixed; top: 0; background: white">
+<a href="#section"><span>Nested jump</span></a>
+<a href="#legacy">Named jump</a>
+<a href="#encoded%20section">Encoded jump</a>
+<a href="#missing">Missing jump</a>
+<a href="#">Empty jump</a>
+<output>Waiting for hashchange</output><output id="modified">Waiting for modified click</output>
+</nav>
+<div style="height: 1200px"></div><h2 id="section">Target section</h2>
+<div style="height: 1200px"></div><a name="legacy">Named target</a>
+<div style="height: 1200px"></div><h2 id="encoded section">Encoded target</h2>
+<div style="height: 1200px"></div>
+<script>
+window.addEventListener('hashchange', function () { document.querySelector('output').textContent = location.hash || '(empty)'; });
+function modifiedClick(event) {
+  if (event.button === 1 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+    document.getElementById('modified').textContent = String(event.defaultPrevented);
+    event.preventDefault();
+  }
+}
+window.addEventListener('click', modifiedClick);
+window.addEventListener('auxclick', modifiedClick);
+window.addEventListener('contextmenu', modifiedClick);
+</script></body></html>`,
+      "utf8",
+    );
+    await workspace.navigateTo();
+    await openWorkspaceFile(page, "targets.html");
+
+    const preview = htmlPreview(page);
+    const body = preview.document.locator("body");
+    const nested = preview.document.getByText("Nested jump", { exact: true });
+    await nested.click();
+    await expect(preview.document.locator("output").first()).toHaveText("#section");
+    await expect(
+      preview.document.getByRole("heading", { name: "Target section" }),
+    ).toBeInViewport();
+    await expect(preview.document.locator("#section")).toHaveCSS("color", "rgb(255, 0, 0)");
+
+    await body.evaluate(() => window.scrollTo(0, 0));
+    await nested.click();
+    await expect(
+      preview.document.getByRole("heading", { name: "Target section" }),
+    ).toBeInViewport();
+
+    await preview.document.getByRole("link", { name: "Named jump" }).click();
+    await expect(preview.document.getByText("Named target", { exact: true })).toBeInViewport();
+    await expect(preview.document.locator("output").first()).toHaveText("#legacy");
+
+    await preview.document.getByRole("link", { name: "Encoded jump" }).click();
+    await expect(
+      preview.document.getByRole("heading", { name: "Encoded target" }),
+    ).toBeInViewport();
+    await expect(preview.document.locator("output").first()).toHaveText("#encoded%20section");
+    const scrollY = await body.evaluate(() => window.scrollY);
+    await preview.document.getByRole("link", { name: "Missing jump" }).click();
+    expect(await body.evaluate(() => location.href)).toBe("about:srcdoc#encoded%20section");
+    expect(await body.evaluate(() => window.scrollY)).toBe(scrollY);
+
+    await preview.document.getByRole("link", { name: "Empty jump" }).click();
+    await expect(preview.document.locator("output").first()).toHaveText("(empty)");
+    expect(await body.evaluate(() => window.scrollY)).toBe(0);
+
+    for (const modifier of ["Control", "Meta", "Shift", "Alt"] as const) {
+      await nested.click({ modifiers: [modifier] });
+      await expect(preview.document.locator("#modified")).toHaveText("false");
+    }
+    await nested.click({ button: "middle" });
+    await expect(preview.document.locator("#modified")).toHaveText("false");
+    expect(await body.evaluate(() => location.href)).toBe("about:srcdoc#");
+    expect(await body.evaluate(() => window.scrollY)).toBe(0);
+  });
+
   test("runs inline scripts without allowing fetch egress", async ({ page, withWorkspace }) => {
     test.setTimeout(90_000);
     const workspace = await withWorkspace({ prefix: "file-editing-html-csp-" });

packages/app/src/file-panels/html-preview-csp.ts

@@ -28,6 +28,29 @@ const POLICY = [
 
 const META = `<meta http-equiv="Content-Security-Policy" content="${POLICY}">`;
 
+// Native WebViews already handle fragments; only srcdoc inherits the app's base URL.
+const FRAGMENT_NAVIGATION = `<script>
+if (location.href === "about:srcdoc") {
+  document.addEventListener("click", function (event) {
+    if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+    const anchor = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    const fragment = anchor && anchor.getAttribute("href");
+    if (!fragment || !fragment.startsWith("#")) return;
+    event.preventDefault();
+    let id = fragment.slice(1);
+    try { id = decodeURIComponent(id); } catch { return; }
+    const target = document.getElementById(id) || Array.from(document.getElementsByName(id)).find(function (element) { return element.tagName === "A"; });
+    if (id && !target) return;
+    const previousHash = location.hash;
+    location.hash = fragment;
+    if (location.hash === previousHash) {
+      if (target) target.scrollIntoView();
+      else window.scrollTo(0, 0);
+    }
+  });
+}
+</script>`;
+
 // The policy must reach the parser before any markup the document declares, and it
 // only counts if it lands in `<head>` — once the parser has moved on to `<body>`, a
 // meta http-equiv CSP is ignored outright.
@@ -45,7 +68,7 @@ const META = `<meta http-equiv="Content-Security-Policy" content="${POLICY}">`;
 // the parser ignores wherever it appears. Standards mode is guaranteed, the policy
 // is always the first element and therefore always in the head, and no part of the
 // document has to be parsed to place it.
-const PROLOGUE = `<!doctype html>${META}`;
+const PROLOGUE = `<!doctype html>${META}${FRAGMENT_NAVIGATION}`;
 
 // Left where it is, a BOM would sit mid-document and render as a zero-width space.
 const BOM = "\uFEFF";