@1agh/maude 0.23.0 → 0.25.0

package/plugins/design/dev-server/exporters/scope.ts

@@ -33,6 +33,17 @@ export type Target =
       file: string;
       /** True when `cssPath` is expected to match many elements; the adapter iterates. */
       multi?: boolean;
+      /**
+       * True when the adapter should widen `cssPath` to its closest
+       * `[data-dc-screen]` ancestor before capture — i.e. "export the artboard
+       * containing this element". `selection` scope sets this `false` so the
+       * raster/vector captures the element EXACTLY (the item-3 bug was every
+       * single-target export hard-widening). `artboard` scope sets it `true`
+       * only in the fallback where we have a descendant selector but no
+       * artboard id; when the id IS known we target `[data-dc-screen="<id>"]`
+       * directly and leave this `false`.
+       */
+      widen?: boolean;
     }
   | {
       kind: 'file-tree';
@@ -49,6 +60,21 @@ export interface ActiveJsonShape {
     | null;
 }
 
+/**
+ * Submit-time hints captured from the LIVE iframe (the export dialog snapshots
+ * the canvas selection + the artboard under the viewport centre and rides them
+ * on the export `options` bag). The resolver prefers these over `activeJson`
+ * because opening the dialog / clicking Export can drop the persisted
+ * `_active.json.selected`, and they survive the cross-origin bridge unchanged.
+ * See the export-pipeline-fixes plan Task 1 + the selection-passthrough DDR.
+ */
+export interface ExportScopeHints {
+  /** Live selection at submit time. `selector` wins over `activeJson.selected`. */
+  selection?: { selector?: string; file?: string } | null;
+  /** `data-dc-screen` id of the artboard to export for `scope=artboard`. */
+  artboardId?: string | null;
+}
+
 export interface ResolveScopeArgs {
   scope: Scope;
   activeJson: ActiveJsonShape;
@@ -56,6 +82,33 @@ export interface ResolveScopeArgs {
   designRoot: string;
   /** Absolute path to repo root. Required for `project-raw` to bound the walk. */
   repoRoot?: string;
+  /**
+   * The export `options` bag, threaded from `runExport`. Read additively so
+   * existing callers (and the pure unit tests) that omit it stay green.
+   */
+  options?: Record<string, unknown>;
+}
+
+/** Narrow the free-form options bag to the selection/artboard hints we read. */
+function readHints(options: Record<string, unknown> | undefined): ExportScopeHints {
+  if (!options || typeof options !== 'object') return {};
+  const sel = options.selection;
+  const selection =
+    sel && typeof sel === 'object'
+      ? {
+          selector:
+            typeof (sel as Record<string, unknown>).selector === 'string'
+              ? ((sel as Record<string, unknown>).selector as string)
+              : undefined,
+          file:
+            typeof (sel as Record<string, unknown>).file === 'string'
+              ? ((sel as Record<string, unknown>).file as string)
+              : undefined,
+        }
+      : null;
+  const artboardId =
+    typeof options.artboardId === 'string' && options.artboardId ? options.artboardId : null;
+  return { selection, artboardId };
 }
 
 const RAW_EXCLUDES = new Set([
@@ -88,6 +141,16 @@ function slugify(file: string, designRel: string): string {
     .toLowerCase();
 }
 
+/**
+ * Escape a value for use inside a double-quoted CSS attribute selector
+ * (`[data-dc-screen="<here>"]`). Artboard ids are normally plain slugs, but a
+ * stray `"` or `\` would break out of the selector — escape defensively so the
+ * id is matched literally.
+ */
+function cssAttrEscape(value: string): string {
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
 interface SelectionShape {
   file?: string;
   selector?: string;
@@ -147,37 +210,70 @@ export async function resolveScope(args: ResolveScopeArgs): Promise<Target[]> {
   if (!activeFile) return [];
   const slug = slugify(activeFile, designRel);
   const sel = firstSelection(activeJson.selected);
+  const hints = readHints(args.options);
 
   if (scope === 'selection') {
-    const selector = sel?.selector ?? sel?.cssPath;
-    if (!sel || !selector) {
-      // Plan: "Falls back to artboard if no selection." Recurse with the
-      // artboard scope so the fallback semantics live in one place.
+    // Prefer the live submit-time snapshot over the persisted `_active.json`
+    // selection — the dialog can clear the canvas selection before the bridged
+    // export runs, leaving `activeJson.selected` null (item 3 root cause #1).
+    const selector = hints.selection?.selector ?? sel?.selector ?? sel?.cssPath;
+    if (!selector) {
+      // No selection anywhere → fall back to artboard scope so the export
+      // still produces something useful. Single fallback site.
       return resolveScope({ ...args, scope: 'artboard' });
     }
-    const file = sel.file ?? activeFile;
+    const file = hints.selection?.file ?? sel?.file ?? activeFile;
     return [
       {
         kind: 'element',
         cssPath: selector,
         canvasSlug: slugify(file, designRel),
         file,
+        // Capture the element EXACTLY — do NOT widen to the enclosing artboard
+        // (item 3 root cause #2: every single-target export hard-widened).
+        widen: false,
       },
     ];
   }
 
   if (scope === 'artboard') {
-    // The adapter handles "closest [data-dc-screen] ancestor" at render time
-    // via Playwright. Server-side we only know the selection's selector — we
-    // pass it through with a marker and the adapter widens to the artboard.
-    // If no selection, fall back to "first artboard on the active canvas".
-    const baseSelector = sel?.selector ?? sel?.cssPath ?? '[data-dc-screen]:first-of-type';
+    // Preferred path: the dialog captured which artboard is active (the
+    // selection's host, or the artboard under the viewport centre). Target it
+    // by id so EVERY format (PDF included — its shim doesn't widen) renders
+    // the right artboard, not `:first-of-type` (item 5 root cause).
+    if (hints.artboardId) {
+      return [
+        {
+          kind: 'element',
+          cssPath: `[data-dc-screen="${cssAttrEscape(hints.artboardId)}"]`,
+          canvasSlug: slug,
+          file: activeFile,
+          widen: false,
+        },
+      ];
+    }
+    // Fallback: we only have a descendant selector → pass it through and let
+    // the adapter widen to the closest `[data-dc-screen]` ancestor.
+    const descendant = hints.selection?.selector ?? sel?.selector ?? sel?.cssPath;
+    if (descendant) {
+      return [
+        {
+          kind: 'element',
+          cssPath: descendant,
+          canvasSlug: slug,
+          file: activeFile,
+          widen: true,
+        },
+      ];
+    }
+    // Last resort — first artboard on the active canvas.
     return [
       {
         kind: 'element',
-        cssPath: baseSelector,
+        cssPath: '[data-dc-screen]:first-of-type',
         canvasSlug: slug,
         file: activeFile,
+        widen: false,
       },
     ];
   }

package/plugins/design/dev-server/exporters/svg.ts

@@ -44,7 +44,10 @@ async function captureSvg(
   if (target.multi) {
     args.push('--multi', '1', '--out-dir', outDir);
   } else {
-    args.push('--widen-to-artboard', '1', '--out', path.join(outDir, `${target.canvasSlug}.svg`));
+    // Widen to the enclosing artboard only when scope.ts requested it; a
+    // `selection` target captures the element exactly.
+    if (target.widen) args.push('--widen-to-artboard', '1');
+    args.push('--out', path.join(outDir, `${target.canvasSlug}.svg`));
   }
 
   // Run via `node` so the shim's `import 'playwright'` resolves against

package/plugins/design/dev-server/fs-watch.ts

@@ -40,6 +40,7 @@ export function createFsWatch(ctx: Context): FsWatch {
         // Skip our own runtime artifacts.
         if (filename.startsWith('_server.json')) return;
         if (filename.startsWith('_active.json')) return;
+        if (filename.startsWith('_sync.json')) return;
         if (filename.startsWith(`_history${path.sep}`) || filename.startsWith('_history/')) return;
         emit(filename);
       });

package/plugins/design/dev-server/http.ts

@@ -4,8 +4,9 @@
 // the route table without rewriting this module. The `fetch` export is the
 // top-level fall-through for paths Bun's `routes` field doesn't cover.
 
-import { watch } from 'node:fs';
-import { join, posix } from 'node:path';
+import { createHash } from 'node:crypto';
+import { existsSync, readFileSync, watch } from 'node:fs';
+import { dirname, join, posix, resolve, sep } from 'node:path';
 
 import type { Api } from './api.ts';
 import { buildCanvasModule } from './canvas-build.ts';
@@ -52,6 +53,67 @@ function ext(p: string): string {
   return i === -1 ? '' : p.slice(i).toLowerCase();
 }
 
+/**
+ * T2 (9.1-A) — build the strict CSP for the canvas-content shell. Every inline
+ * `<script>` (importmap, module bootstrap, inspector) is allowlisted by sha256
+ * hash so we never resort to `'unsafe-inline'`. `connect-src 'self'` is locked
+ * to the document's own origin so hub-pushed JSX can't beacon out / hit IMDS /
+ * LAN — and `'self'` covers same-origin `ws:`/`wss:` (CSP3), so the HMR + collab
+ * sockets (which connect to the canvas origin the iframe loads from) still work
+ * while `ws://attacker` / `wss://attacker` exfil is refused. `style-src
+ * 'unsafe-inline'` is intentional —
+ * specimens use `style={{…}}` attributes + injected `<style>`; style injection
+ * is not the F1 RCE vector (script + connect are). No `'unsafe-eval'` — the
+ * POC verifies the runtime (motion/pixi/Bun.build output) doesn't need it.
+ *
+ * `webrtc 'block'` (A6, DDR-060 F1 re-audit) — `connect-src` governs only
+ * fetch/XHR/WebSocket/sendBeacon; WebRTC does NOT flow through Fetch, so an
+ * `RTCPeerConnection` with an attacker STUN/TURN hostname smuggles bytes out via
+ * ICE DNS/STUN even under `connect-src 'self'`. ⚠️ This directive is specified
+ * (CSP3) but UNIMPLEMENTED in shipping Chrome/Firefox as of 2026 (Chromium
+ * #40188662, Firefox bug 1783489) — currently a NO-OP. The enforceable control
+ * today is the RTC-constructor lockout in `templates/_shell.html`; this directive
+ * is kept for when browsers honor it. WebRTC + self-navigation exfil remain
+ * DOCUMENTED residuals of opt-in linked mode (the reachable data is collab
+ * metadata, not repo files — traversal is closed). Do NOT treat this as a closed
+ * exfil lane. The canvas runtime itself uses zero WebRTC.
+ *
+ * `frame-ancestors` (A6) — restricts who may embed the canvas document. The
+ * legit embedder is the main dev-server origin, so we allowlist exactly that
+ * (`mainOrigin`) plus `'self'`; an arbitrary external page can no longer reframe
+ * the canvas. When `mainOrigin` is unknown (tests / pre-boot) the directive is
+ * OMITTED rather than set to `'self'` — `'self'` alone would forbid the legit
+ * cross-origin embed and blank the canvas.
+ */
+export function cspForCanvasShell(html: string, mainOrigin?: string): string {
+  const hashes: string[] = [];
+  // Match inline <script> blocks only (no src=). `[^>]*` excludes any with src.
+  const re = /<script(?![^>]*\bsrc=)[^>]*>([\s\S]*?)<\/script>/gi;
+  let m: RegExpExecArray | null;
+  // biome-ignore lint/suspicious/noAssignInExpressions: standard regex-exec loop.
+  while ((m = re.exec(html)) !== null) {
+    const body = m[1] ?? '';
+    const digest = createHash('sha256').update(body, 'utf8').digest('base64');
+    hashes.push(`'sha256-${digest}'`);
+  }
+  const scriptSrc = ["'self'", ...hashes].join(' ');
+  const directives = [
+    "default-src 'none'",
+    `script-src ${scriptSrc}`,
+    "connect-src 'self'",
+    "img-src 'self' data: blob:",
+    "style-src 'self' 'unsafe-inline'",
+    "font-src 'self' data:",
+    "frame-src 'self'",
+    "base-uri 'none'",
+    "object-src 'none'",
+    "form-action 'none'",
+    "webrtc 'block'",
+  ];
+  if (mainOrigin) directives.push(`frame-ancestors 'self' ${mainOrigin}`);
+  return directives.join('; ');
+}
+
 function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
   let pathname: string;
   try {
@@ -71,16 +133,80 @@ const DIST_DIR = join(HERE, 'dist');
 const CLIENT_DIR = join(HERE, 'client');
 const TEMPLATES_DIR = join(HERE, '..', 'templates');
 
-// In-memory transpile cache. Key = absolute canvas path; value = the last
-// transpile keyed by mtime. Repeat GETs against an unchanged source skip the
-// parse + ID-injection + Bun.Transpiler entirely.
+// In-memory transpile cache. Key = absolute canvas path. Repeat GETs against an
+// unchanged source skip the parse + ID-injection + Bun.Transpiler + Bun.build
+// entirely.
 interface CanvasCacheEntry {
-  mtimeMs: number;
+  /** Freshness signature over the .tsx AND every directly-imported sibling/
+   *  relative `.css` it inlines (Bun.build extracts `import "./x.css"` into a
+   *  `<style>` tag — there is no `<link>`). Rebuild when ANY of them changes.
+   *  A prior version keyed only on the .tsx mtime, so editing a sibling
+   *  `<canvas>.css` was a cache HIT: the HMR reload (mode:'module') re-served the
+   *  stale inlined CSS and the edit only showed once the .tsx itself changed.
+   *  (DDR-064 collab dogfooding finding, 2026-05-29.) */
+  sig: string;
   etag: string;
   js: string;
+  /** Absolute paths of the relative `.css` imports inlined into this build —
+   *  re-statted each request to recompute `sig` without re-reading the source. */
+  cssDeps: string[];
 }
 const canvasCache = new Map<string, CanvasCacheEntry>();
 
+// Per-process boot id, folded into every canvas ETag. The canvas transpile
+// BUNDLES the shared chrome (canvas-lib → tool-palette / annotations-layer /
+// use-tool-mode / canvas-cursors / …), but the freshness sig + base etag only
+// track the canvas file + its inlined CSS — NOT those chrome sources. So a
+// chrome edit left the etag unchanged → the browser's `If-None-Match` matched →
+// 304 → the user kept getting the STALE transpile even after a server restart
+// (the recurring "my cursor / chrome change didn't show up" bug). Folding the
+// boot id in means a restart — the expected workflow after a dev-server source
+// edit (see CLAUDE.md) — changes every canvas etag, so a normal reload re-fetches
+// fresh chrome. (DDR-067.)
+const RUNTIME_BOOT_ID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
+
+// Bumped by the chrome source watchers (below) on every canvas-lib / dev-server
+// `.tsx`/`.ts` edit. Folded into the canvas ETag so a LIVE chrome edit (no
+// restart) also changes the etag — otherwise clearing `canvasCache` re-transpiles
+// fresh on the server, but the unchanged canvas SOURCE yields the same
+// `result.etag`, the browser's `If-None-Match` matches → 304 → the user still
+// gets the stale bundle even after the HMR hard-reload. (DDR-067.)
+let CHROME_EPOCH = 0;
+
+/** Relative `.css` import specifiers in a canvas source → absolute paths (the
+ *  files Bun.build inlines). Bare / virtual specifiers (`@maude/…`, npm) are
+ *  skipped — only on-disk relative CSS affects the inlined output. Resolved
+ *  paths are clamped to `designRoot`: a canvas source is attacker-influenced
+ *  under linked mode (DDR-054), and these paths are `stat`-ed for mtime, so a
+ *  `../../../etc/…` specifier must not let the freshness probe reach outside the
+ *  design tree. Legit DS imports (`../../system/<ds>/…`) stay inside designRoot. */
+function cssDepsFromSource(source: string, canvasAbsPath: string, designRoot: string): string[] {
+  const dir = dirname(canvasAbsPath);
+  const root = resolve(designRoot);
+  const deps: string[] = [];
+  const re = /import\s+["']([^"']+\.css)["']/g;
+  let m: RegExpExecArray | null = re.exec(source);
+  while (m !== null) {
+    if (m[1].startsWith('.')) {
+      const abs = resolve(dir, m[1]);
+      if (abs === root || abs.startsWith(root + sep)) deps.push(abs);
+    }
+    m = re.exec(source);
+  }
+  return deps;
+}
+
+/** mtime signature over the .tsx + its inlined CSS deps. A missing/unreadable
+ *  file contributes 0 — a delete is itself a change, so the signature differs. */
+function canvasFreshnessSig(tsxAbsPath: string, cssDeps: string[]): string {
+  const parts: string[] = [];
+  for (const p of [tsxAbsPath, ...cssDeps]) {
+    const mt = Bun.file(p).lastModified;
+    parts.push(`${p}@${Number.isFinite(mt) ? mt : 0}`);
+  }
+  return parts.join('|');
+}
+
 async function serveCanvasTsx(
   absPath: string,
   req: Request,
@@ -90,12 +216,16 @@ async function serveCanvasTsx(
   const file = Bun.file(absPath);
   if (!(await file.exists())) return new Response('Not found', { status: 404 });
 
-  // `stat` via Bun.file().lastModified — falls back to 0 if unavailable.
-  const mtimeMs = typeof file.lastModified === 'number' ? file.lastModified : 0;
+  // Freshness = the .tsx mtime AND every inlined sibling `.css` mtime. Keying on
+  // the .tsx alone meant a direct edit to `<canvas>.css` was a cache HIT, so the
+  // HMR reload (mode:'module') re-served the stale inlined CSS — the edit only
+  // surfaced once the .tsx itself changed (DDR-064 dogfooding finding).
   let cached = canvasCache.get(absPath);
+  const sig = canvasFreshnessSig(absPath, cached?.cssDeps ?? []);
 
-  if (!cached || cached.mtimeMs !== mtimeMs) {
+  if (!cached || cached.sig !== sig) {
     const source = await file.text();
+    const cssDeps = cssDepsFromSource(source, absPath, ctx.paths.designRoot);
     let result: Awaited<ReturnType<typeof buildCanvasModule>>;
     try {
       result = await buildCanvasModule(absPath, source, {
@@ -114,7 +244,17 @@ async function serveCanvasTsx(
         headers: { 'Content-Type': 'text/plain; charset=utf-8' },
       });
     }
-    cached = { mtimeMs, etag: result.etag, js: result.js };
+    // Recompute the signature against the freshly-parsed deps — this very edit
+    // may have added or removed a `.css` import.
+    cached = {
+      sig: canvasFreshnessSig(absPath, cssDeps),
+      // Fold in the boot id (restart) + chrome epoch (live edit) so a chrome
+      // change busts the browser's cached transpile even when the canvas source
+      // (hence result.etag) is unchanged. See RUNTIME_BOOT_ID / CHROME_EPOCH.
+      etag: `${result.etag}-${RUNTIME_BOOT_ID}-${CHROME_EPOCH}`,
+      js: result.js,
+      cssDeps,
+    };
     canvasCache.set(absPath, cached);
     // Persist the locator map. Awaited so the inspector / Phase-12 layers
     // panel sees a consistent (cdId -> source) view by the time the canvas
@@ -156,6 +296,22 @@ async function serveFile(absPath: string, headers: Record<string, string> = {}):
 export interface Http {
   routes: Record<string, (req: Request) => Response | Promise<Response>>;
   fetch(req: Request): Promise<Response>;
+  /**
+   * T2 (9.1-A) — build the canvas mount-harness response. `applyCsp` adds the
+   * strict CSP (always on for the segregated canvas origin; the legacy main
+   * origin keeps it env-gated for the POC). Shared so both listeners produce
+   * byte-identical HTML.
+   */
+  serveCanvasShell(applyCsp: boolean): Promise<Response>;
+  /**
+   * T2 (9.1-A) — allowlist gate for the segregated canvas origin. Returns true
+   * only for the routes the canvas runtime legitimately needs (shell, runtime
+   * bundles, comment-mount, transpiled .tsx + CSS/assets under designRoot,
+   * git-user, canvas-meta, health). Everything else is 403'd at the door so
+   * hub-pushed JSX can't reach /_api/export, /_config, /_sync-status, comments,
+   * the app shell, or arbitrary repo files. WS upgrades are gated in server.ts.
+   */
+  isCanvasSafeRoute(pathname: string): boolean;
 }
 
 export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActivity): Http {
@@ -176,6 +332,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
   ctx.bus.on('fs:any', (rel: string) => {
     if (rel.startsWith('_lib/')) {
       canvasCache.clear();
+      CHROME_EPOCH++;
     }
   });
 
@@ -183,6 +340,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
   try {
     libWatcher = watch(canvasLibPath(), () => {
       canvasCache.clear();
+      CHROME_EPOCH++;
       ctx.bus.emit('fs:any', '_lib/canvas-lib.tsx');
     });
   } catch (err) {
@@ -194,21 +352,27 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
   void libWatcher;
 
   // G7v2 — canvas-lib.tsx transitively imports many dev-server siblings
-  // (canvas-shell, contextual-toolbar, equal-spacing-handles, ...). Editing
-  // any of them invalidates the bundled canvas output. Without watching them
-  // the mtime-keyed `canvasCache` keeps serving the stale bundle and the
-  // user sees pre-edit behaviour even after a hard iframe reload.
+  // (canvas-shell, contextual-toolbar, equal-spacing-handles, tool-palette,
+  // use-tool-mode, ...). Editing any of them invalidates the bundled canvas
+  // output. Without watching them the mtime-keyed `canvasCache` keeps serving
+  // the stale bundle and the user sees pre-edit behaviour even after a hard
+  // iframe reload.
   //
-  // Recursive watch over DEV_SERVER_ROOT, filtered to .tsx — server-only .ts
-  // (api / http / context / etc.) doesn't reach the canvas. Test files
-  // (`test/`) and built output (`dist/`, `client/`) also skipped.
+  // Recursive watch over DEV_SERVER_ROOT, filtered to .tsx AND .ts: the chrome
+  // graph includes plain `.ts` modules that DO reach the canvas
+  // (`canvas-cursors.ts`, `canvas-arrowheads.ts`) — the prior `.tsx`-only filter
+  // skipped them, so cursor edits never busted the cache (the recurring stale-
+  // cursor bug, DDR-067). Server-only `.ts` (api / http / context) also clears
+  // here, which is harmless (a needless rebuild, not a stale serve). Test files
+  // (`test/`), built output (`dist/`, `client/`), and node_modules are skipped.
   let devSrcWatcher: ReturnType<typeof watch> | null = null;
   try {
     devSrcWatcher = watch(DEV_SERVER_ROOT, { recursive: true }, (_evt, filename) => {
       if (!filename) return;
-      if (!filename.endsWith('.tsx')) return;
+      if (!filename.endsWith('.tsx') && !filename.endsWith('.ts')) return;
       if (filename.startsWith('test/') || filename.startsWith('test\\')) return;
       if (filename.startsWith('dist/') || filename.startsWith('client/')) return;
+      if (filename.includes('node_modules')) return;
       canvasCache.clear();
       ctx.bus.emit('fs:any', `_lib/${filename}`);
     });
@@ -241,7 +405,24 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
 
     '/_active': () => Response.json(inspect.state),
 
-    '/_config': () => Response.json(ctx.cfg),
+    // Phase 9 Task 8 — offline-mode banner poll fallback. The linked-mode sync
+    // runtime writes `_sync.json`; browser tabs also get live pushes over the
+    // WS ('sync:status'). Returns `{ linked: false }` in solo mode.
+    '/_sync-status': () => {
+      const file = join(ctx.paths.designRoot, '_sync.json');
+      if (!existsSync(file)) {
+        return Response.json({ linked: false }, { headers: { 'Cache-Control': 'no-store' } });
+      }
+      try {
+        return Response.json(JSON.parse(readFileSync(file, 'utf8')), {
+          headers: { 'Cache-Control': 'no-store' },
+        });
+      } catch {
+        return Response.json({ linked: false }, { headers: { 'Cache-Control': 'no-store' } });
+      }
+    },
+
+    '/_config': () => Response.json({ ...ctx.cfg, canvasOrigin: ctx.canvasOrigin }),
 
     '/_index-data': async () =>
       Response.json(await api.buildIndexData(), { headers: { 'Cache-Control': 'no-store' } }),
@@ -585,14 +766,10 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       // Query parameter ?canvas=<path-relative-to-designRoot> tells the shell
       // which canvas to import + mount. See plugins/design/templates/_shell.html.
       if (pathname === '/_canvas-shell.html' || pathname === '/_canvas-shell') {
-        const shellHtml = await Bun.file(join(TEMPLATES_DIR, '_shell.html')).text();
-        // Inject inspector overlay — Cmd+Click selection + Shift/C+Click
-        // add-comment flow. Without this, TSX canvases mount fine but lose
-        // every interactive devtool.
-        const injected = inspect.injectInspector(shellHtml);
-        return new Response(injected, {
-          headers: { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' },
-        });
+        // The segregated canvas origin (server.ts) calls serveCanvasShell(true)
+        // directly with CSP always on; on the legacy main origin the CSP stays
+        // env-gated (MAUDE_CSP_POC) for the POC / backwards-compat.
+        return serveCanvasShell(process.env.MAUDE_CSP_POC === '1');
       }
 
       // Fall-through: serve user repo files (designRoot + everything under repoRoot).
@@ -622,5 +799,99 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     }
   }
 
-  return { routes, fetch };
+  async function serveCanvasShell(applyCsp: boolean): Promise<Response> {
+    const shellHtml = await Bun.file(join(TEMPLATES_DIR, '_shell.html')).text();
+    // Inject inspector overlay — Cmd+Click selection + add-comment flow.
+    const injected = inspect.injectInspector(shellHtml);
+    const headers: Record<string, string> = {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+    };
+    if (applyCsp) headers['Content-Security-Policy'] = cspForCanvasShell(injected, ctx.mainOrigin);
+    return new Response(injected, { headers });
+  }
+
+  // Canvas assets the segregated origin may serve out of designRoot. Excludes
+  // `.json` so no `*.meta.json` / `config.json` / `_comments/*.json` leaks via
+  // the static lane (canvas-meta goes through the gated /_api route instead).
+  const CANVAS_ASSET_EXTS = new Set([
+    '.tsx',
+    '.css',
+    '.svg',
+    '.png',
+    '.jpg',
+    '.jpeg',
+    '.gif',
+    '.webp',
+    '.ico',
+    '.woff',
+    '.woff2',
+    '.ttf',
+    '.otf',
+  ]);
+
+  // Exact API paths the canvas iframe needs (collab + display data). See
+  // isCanvasSafeRoute for the trust rationale. Mutations are limited to inert
+  // collab data (annotations SVG, comment replies via the dynamic route).
+  const CANVAS_SAFE_API = new Set([
+    '/_api/git-user', // presence display name
+    '/_api/canvas-meta', // layout/viewport sidecar (GET + PATCH)
+    '/_api/annotations', // annotation SVG (GET + PUT) — drives the collab bridge
+    '/_api/git-committers', // @mention autocomplete
+    '/_api/ai', // AI-activity banner
+    '/_comments', // per-file comment list (renders pins)
+  ]);
+
+  function isCanvasSafeRoute(pathname: string): boolean {
+    // A1/A2 (DDR-060 F1 re-audit, phase-9.1-t2-f1-cross-origin-reaudit.md) —
+    // DECODE + NORMALIZE before gating. `URL.pathname` preserves `%2f` (it does
+    // NOT decode it to `/`), so a raw allowlist check on the encoded path is
+    // fooled: `/.design/..%2fsite%2fx.css` reads as ONE opaque segment under the
+    // designRoot with an asset ext (the `_`-segment + ext checks see no literal
+    // slash to split on), yet `safePathUnderRoot` later DECODES the same `%2f`,
+    // turns `..%2f` into a real `../`, and climbs out of the designRoot — re-
+    // confined only to repoRoot. That decode mismatch let a hub-pushed canvas
+    // read any repo `.tsx`/`.css`/`.svg`/font + `_history` snapshots. Decoding
+    // here makes the gate agree with the resolver: `..%2f` → `../`, normalize
+    // collapses it, and the path no longer matches designPrefix → 403. A
+    // malformed escape (`%ZZ`) throws → reject. This gate runs ONLY on the
+    // segregated canvas origin (server.ts), so the main origin is untouched.
+    let safe: string;
+    try {
+      safe = posix.normalize(decodeURIComponent(pathname));
+    } catch {
+      return false;
+    }
+    if (safe === '/_canvas-shell.html' || safe === '/_canvas-shell') return true;
+    if (safe === '/_health') return true;
+    if (safe === '/_client/comment-mount.js') return true;
+    // Canvas-chrome stylesheets (composer / thread / pin / cursor CSS). Inert
+    // static assets from the dev-server distribution — no secrets, no code
+    // exec, no repo content. Without this the cross-origin canvas 403s e.g.
+    // `/_client/comments-overlay.css`, so the in-iframe comment composer renders
+    // unstyled and, missing `position: fixed`, collapses to the top-left (0,0).
+    // Allowed by pattern (not per-file) so future chrome CSS can't silently
+    // regress the same way.
+    if (safe.startsWith('/_client/') && ext(safe) === '.css') return true;
+    if (safe.startsWith('/_canvas-runtime/')) return true;
+    // Collab + display-data endpoints the canvas runtime legitimately calls from
+    // inside the iframe. All are reads or inert collab writes (annotations SVG,
+    // comment replies) — the "safe to sync" set per DDR-054. None expose code
+    // execution, secrets, export, /_config, /_sync-status, or files outside
+    // designRoot/annotations; the canvas origin's CSP `connect-src 'self'` still
+    // confines the iframe so hub-pushed JSX can't reach IMDS/LAN/main-origin.
+    if (CANVAS_SAFE_API.has(safe)) return true;
+    // POST /_api/comments/<id>/reply — dynamic path (fetch-handled).
+    if (/^\/_api\/comments\/[A-Za-z0-9_]+\/reply$/.test(safe)) return true;
+    const designPrefix = `/${ctx.paths.designRel.replace(/^\/+|\/+$/g, '')}/`;
+    if (safe.startsWith(designPrefix)) {
+      const rest = safe.slice(designPrefix.length);
+      // Reject runtime/state dirs+files (_comments, _sync.json, _history, …).
+      if (rest.split('/').some((seg) => seg.startsWith('_'))) return false;
+      return CANVAS_ASSET_EXTS.has(ext(safe));
+    }
+    return false;
+  }
+
+  return { routes, fetch, serveCanvasShell, isCanvasSafeRoute };
 }