@1agh/maude 0.23.0 → 0.24.0

package/plugins/design/dev-server/dist/styles.css

@@ -1210,6 +1210,22 @@
     color: var(--u-fg-1);
   }
 
+  .sb-sync {
+    cursor: help;
+  }
+
+  .sb-sync-dot {
+    background: var(--u-status-warn);
+    border-radius: 50%;
+    flex: none;
+    width: 7px;
+    height: 7px;
+  }
+
+  .sb-sync .sb-key {
+    color: var(--u-fg-2);
+  }
+
   .sb-spacer {
     border-right: 1px solid var(--u-border-subtle);
     flex: 1 0 auto;

package/plugins/design/dev-server/equal-spacing-handles.tsx

@@ -48,7 +48,7 @@ const STYLES = `
 .dc-cv-eq-pill {
   position: absolute;
   transform: translate(-50%, calc(-100% - 8px));
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, monospace);
   font-size: 10px;
   padding: 2px 5px;
   background: #FF24BD;

package/plugins/design/dev-server/export-dialog.tsx

@@ -113,35 +113,35 @@ const ExportDialogContext = createContext<ExportDialogValue | null>(null);
 
 const DIALOG_CSS = `
 .dc-export-dialog {
-  border: 1px solid var(--u-fg-0, #1c1917);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   padding: 0;
   border-radius: 8px;
-  background: var(--u-bg-0, var(--bg-0, #fff));
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  color: var(--u-fg-0, var(--fg-0, #1a1a1a));
+  background: var(--maude-chrome-bg-0, #fff);
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  color: var(--maude-chrome-fg-0, #1a1a1a);
   width: min(640px, 100vw - 48px);
   max-height: min(560px, 100vh - 48px);
   overflow: hidden;
 }
 .dc-export-dialog::backdrop { background: rgba(20, 20, 30, 0.32); }
-.dc-export-dialog header { padding: 16px 20px; border-bottom: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); display: flex; justify-content: space-between; align-items: center; }
+.dc-export-dialog header { padding: 16px 20px; border-bottom: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); display: flex; justify-content: space-between; align-items: center; }
 .dc-export-dialog header h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
-.dc-export-dialog header .dc-ed-close { background: transparent; border: 0; cursor: pointer; padding: 4px 8px; color: var(--fg-1, rgba(40,30,20,0.6)); font: inherit; font-size: 12px; }
+.dc-export-dialog header .dc-ed-close { background: transparent; border: 0; cursor: pointer; padding: 4px 8px; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.6)); font: inherit; font-size: 12px; }
 .dc-export-dialog .dc-ed-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; }
-.dc-export-dialog label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2, rgba(40,30,20,0.5)); margin-bottom: 6px; }
-.dc-export-dialog select { width: 100%; padding: 8px 10px; border-radius: 0; border: 1px solid var(--u-fg-0, rgba(0,0,0,0.12)); background: var(--u-bg-1, var(--bg-0, #fafafa)); font: inherit; font-size: 13px; color: inherit; }
-.dc-export-dialog .dc-ed-desc { font-size: 12px; color: var(--fg-1, rgba(40,30,20,0.65)); margin-top: 6px; line-height: 1.4; }
-.dc-export-dialog .dc-ed-recent { padding: 12px 20px; border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); background: var(--bg-2, rgba(0,0,0,0.02)); }
-.dc-export-dialog .dc-ed-recent h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2, rgba(40,30,20,0.5)); margin: 0 0 8px; }
+.dc-export-dialog label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.5)); margin-bottom: 6px; }
+.dc-export-dialog select { width: 100%; padding: 8px 10px; border-radius: 0; border: 1px solid var(--maude-chrome-fg-0, rgba(0,0,0,0.12)); background: var(--maude-chrome-bg-1, #fafafa); font: inherit; font-size: 13px; color: inherit; }
+.dc-export-dialog .dc-ed-desc { font-size: 12px; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.65)); margin-top: 6px; line-height: 1.4; }
+.dc-export-dialog .dc-ed-recent { padding: 12px 20px; border-top: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); background: var(--maude-chrome-bg-2, rgba(0,0,0,0.02)); }
+.dc-export-dialog .dc-ed-recent h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.5)); margin: 0 0 8px; }
 .dc-export-dialog .dc-ed-recent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
 .dc-export-dialog .dc-ed-recent button { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; background: transparent; border: 1px solid transparent; border-radius: 0; cursor: pointer; font: inherit; font-size: 12px; color: inherit; width: 100%; text-align: left; }
-.dc-export-dialog .dc-ed-recent button:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
-.dc-export-dialog footer { padding: 12px 20px; border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); display: flex; justify-content: flex-end; gap: 8px; }
-.dc-export-dialog footer button { padding: 8px 14px; border-radius: 0; border: 1px solid var(--u-fg-0, rgba(0,0,0,0.12)); background: var(--u-bg-1, var(--bg-0, #fafafa)); font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
+.dc-export-dialog .dc-ed-recent button:hover { background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 5%, transparent); border-color: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 8%, transparent); }
+.dc-export-dialog footer { padding: 12px 20px; border-top: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); display: flex; justify-content: flex-end; gap: 8px; }
+.dc-export-dialog footer button { padding: 8px 14px; border-radius: 0; border: 1px solid var(--maude-chrome-fg-0, rgba(0,0,0,0.12)); background: var(--maude-chrome-bg-1, #fafafa); font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
 .dc-export-dialog footer button.dc-ed-primary { background: var(--maude-hud-accent, #1a1a1a); color: var(--maude-hud-accent-fg, #fff); border-color: transparent; }
 .dc-export-dialog footer button:disabled { opacity: 0.4; cursor: not-allowed; }
-.dc-export-dialog .dc-ed-status { padding: 8px 20px; font-size: 12px; color: var(--fg-1, rgba(40,30,20,0.65)); border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); }
+.dc-export-dialog .dc-ed-status { padding: 8px 20px; font-size: 12px; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.65)); border-top: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); }
 .dc-export-dialog .dc-ed-status.is-error { color: var(--status-error, #c0392b); }
 `;
 
@@ -371,7 +371,9 @@ const DialogShell = (() => {
                     <span>
                       {FORMAT_META[h.format].label} · {SCOPE_META[h.scope].label}
                     </span>
-                    <span style={{ color: 'var(--fg-2, rgba(40,30,20,0.5))' }}>{h.filename}</span>
+                    <span style={{ color: 'var(--maude-chrome-fg-1, rgba(40,30,20,0.5))' }}>
+                      {h.filename}
+                    </span>
                   </button>
                 </li>
               ))}

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,60 @@ 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>();
 
+/** 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 +196,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 +224,14 @@ 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),
+      etag: result.etag,
+      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 +273,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 {
@@ -241,7 +374,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 +735,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 +768,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 };
 }

package/plugins/design/dev-server/input-router.tsx

@@ -63,9 +63,27 @@ export function crossedDragThreshold(
  * returns `no-op` for the corresponding pointer events so the SVG overlay
  * can grab them natively.
  */
-export type Tool = 'move' | 'hand' | 'comment' | 'pen' | 'rect' | 'ellipse' | 'arrow' | 'eraser';
-
-const ANNOTATION_TOOLS = new Set<Tool>(['pen', 'rect', 'ellipse', 'arrow', 'eraser']);
+export type Tool =
+  | 'move'
+  | 'hand'
+  | 'comment'
+  | 'pen'
+  | 'rect'
+  | 'ellipse'
+  | 'arrow'
+  | 'sticky'
+  | 'text'
+  | 'eraser';
+
+const ANNOTATION_TOOLS = new Set<Tool>([
+  'pen',
+  'rect',
+  'ellipse',
+  'arrow',
+  'sticky',
+  'text',
+  'eraser',
+]);
 
 export function isAnnotationTool(t: Tool): boolean {
   return ANNOTATION_TOOLS.has(t);
@@ -146,6 +164,11 @@ export function classify(input: ClassifyInput): RouterAction {
     if (k === 'r') return { kind: 'tool', tool: 'rect' };
     if (k === 'o') return { kind: 'tool', tool: 'ellipse' };
     if (k === 'a') return { kind: 'tool', tool: 'arrow' };
+    // Phase 21 — N = sticky Note ('S' is taken by the shell Design-system view
+    // + Shift-marquee); T = standalone Text. Both are bare letters the shell
+    // yields when focus is inside the canvas iframe (app.jsx onKey bail).
+    if (k === 'n') return { kind: 'tool', tool: 'sticky' };
+    if (k === 't') return { kind: 'tool', tool: 'text' };
     if (k === 'e') return { kind: 'tool', tool: 'eraser' };
     if (input.key === 'Escape') return { kind: 'escape' };
     return { kind: 'no-op' };

package/plugins/design/dev-server/participants-chrome.tsx

@@ -42,7 +42,7 @@ const CHROME_CSS = `
   line-height: 1;
   letter-spacing: 0.02em;
   color: var(--maude-hud-accent-fg, #fff);
-  border: 1.5px solid var(--bg-0, #fff);
+  border: 1.5px solid var(--maude-chrome-bg-0, #fff);
   margin-left: -6px;
   cursor: pointer;
   position: relative;
@@ -70,20 +70,20 @@ const CHROME_CSS = `
   right: 0;
   min-width: 168px;
   padding: 10px 12px;
-  background: var(--bg-1, #fff);
-  color: var(--fg-0, #111);
-  border: 1px solid var(--border-default, rgba(0,0,0,0.16));
+  background: var(--maude-chrome-bg-1, #fff);
+  color: var(--maude-chrome-fg-0, #111);
+  border: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.16));
   border-radius: var(--radius-md, 4px);
   font-size: 12px;
   line-height: 1.35;
   white-space: nowrap;
-  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
+  box-shadow: 0 6px 18px var(--maude-chrome-shadow, rgba(0,0,0,0.10));
   z-index: 11;
 }
 .dc-participant-popover__name {
   font-weight: 600;
   margin-bottom: 8px;
-  color: var(--fg-0, #111);
+  color: var(--maude-chrome-fg-0, #111);
   letter-spacing: 0.01em;
 }
 .dc-participant-popover__btn {
@@ -102,11 +102,11 @@ const CHROME_CSS = `
 }
 .dc-participant-popover__btn:hover { background: var(--maude-hud-accent-hover, var(--maude-hud-accent, oklch(50% 0.170 50))); }
 .dc-participant-popover__btn--stop {
-  background: var(--bg-3, #e5e5e5);
-  color: var(--fg-0, #111);
-  border: 1px solid var(--border-subtle, rgba(0,0,0,0.12));
+  background: color-mix(in oklab, var(--maude-chrome-fg-0, #111) 10%, transparent);
+  color: var(--maude-chrome-fg-0, #111);
+  border: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.12));
 }
-.dc-participant-popover__btn--stop:hover { background: var(--bg-4, #d8d8d8); }
+.dc-participant-popover__btn--stop:hover { background: color-mix(in oklab, var(--maude-chrome-fg-0, #111) 16%, transparent); }
 @media (prefers-reduced-motion: reduce) {
   .dc-participant { transition: none; }
 }