@1agh/maude 0.23.0 → 0.24.0

package/plugins/design/dev-server/test/annotations-roundtrip.test.ts

@@ -0,0 +1,276 @@
+// annotations round-trip — Phase 21. The PARSE side of the schema (svgToStrokes)
+// needs a DOMParser, which bun:test does not expose natively. We register
+// happy-dom for THIS file only (beforeAll/afterAll) so the rest of the suite
+// keeps running DOM-free; the existing annotations-layer.test.ts covers the
+// write side (strokesToSvg) without a DOM.
+//
+// The load-bearing test here is the back-compat canary (Task 10): a hand-frozen
+// pre-Phase-21 fixture must survive parse → re-serialize BYTE-IDENTICAL. Any
+// "phantom default" (e.g. always emitting data-end-head="triangle") would bloat
+// every legacy SVG on the first load→save cycle and this test would catch it.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+import {
+  type ArrowStroke,
+  type RectStroke,
+  type StickyStroke,
+  type Stroke,
+  type TextStroke,
+  strokesToSvg,
+  svgToStrokes,
+} from '../annotations-layer.tsx';
+import { sanitizeAnnotationSvg } from '../api.ts';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(async () => {
+  await GlobalRegistrator.unregister();
+});
+
+/** Re-serialize a freshly-parsed SVG. Round-trip helper. */
+function reparse(svg: string): string {
+  return strokesToSvg(svgToStrokes(svg));
+}
+
+describe('annotations round-trip / back-compat canary (Task 10)', () => {
+  test('a frozen pre-Phase-21 SVG round-trips BYTE-IDENTICAL', async () => {
+    const fixture = await Bun.file(
+      new URL('./fixtures/phase-20-annotations.svg', import.meta.url)
+    ).text();
+    // No trailing newline in the fixture; svgToStrokes trims its input but the
+    // serializer never emits trailing whitespace, so raw === raw must hold.
+    expect(fixture.endsWith('</svg>')).toBe(true);
+    const roundTripped = reparse(fixture);
+    expect(roundTripped).toBe(fixture);
+  });
+
+  test('parsing the fixture yields exactly the five legacy strokes', async () => {
+    const fixture = await Bun.file(
+      new URL('./fixtures/phase-20-annotations.svg', import.meta.url)
+    ).text();
+    const strokes = svgToStrokes(fixture);
+    expect(strokes.map((s) => s.tool)).toEqual(['pen', 'rect', 'ellipse', 'arrow', 'text']);
+    // The legacy rect must NOT pick up a phantom non-zero radius.
+    const rect = strokes.find((s) => s.tool === 'rect') as RectStroke;
+    expect(rect.cornerRadius ?? 0).toBe(0);
+    // The legacy arrow must NOT pick up phantom head/dash overrides.
+    const arrow = strokes.find((s) => s.tool === 'arrow') as ArrowStroke;
+    expect(arrow.startHead).toBeUndefined();
+    expect(arrow.endHead).toBeUndefined();
+    expect(arrow.dashed).toBeUndefined();
+    // The legacy text keeps its anchor.
+    const text = strokes.find((s) => s.tool === 'text') as TextStroke;
+    expect(text.anchorId).toBe('r1');
+  });
+});
+
+describe('annotations round-trip / sticky', () => {
+  const sticky: StickyStroke = {
+    id: 'st1',
+    tool: 'sticky',
+    color: '#ffe27a',
+    x: 40,
+    y: 50,
+    w: 200,
+    h: 160,
+    text: 'approve copy?',
+    fontSize: 14,
+    cornerRadius: 8,
+  };
+
+  test('sticky survives serialize → parse with all fields intact', () => {
+    const [parsed] = svgToStrokes(strokesToSvg([sticky])) as StickyStroke[];
+    expect(parsed).toEqual(sticky);
+  });
+
+  test('sticky with multi-line text round-trips the newline', () => {
+    const multi: StickyStroke = { ...sticky, text: 'line one\nline two' };
+    const [parsed] = svgToStrokes(strokesToSvg([multi])) as StickyStroke[];
+    expect(parsed?.text).toBe('line one\nline two');
+  });
+
+  test('sticky serialize→parse is idempotent', () => {
+    const once = strokesToSvg([sticky]);
+    expect(reparse(once)).toBe(once);
+  });
+
+  test('sticky never persists a foreignObject (sanitizer would strip it)', () => {
+    expect(strokesToSvg([sticky])).not.toContain('foreignObject');
+  });
+
+  test('sticky SVG survives sanitizeAnnotationSvg byte-intact (PUT-path)', () => {
+    // The persisted form passes through the DDR-060 F1 sanitizer on every PUT.
+    // It uses only allowlisted elements (g/rect/text) and no denied attrs, so
+    // it must come back unchanged — otherwise sticky text wouldn't persist.
+    const svg = strokesToSvg([sticky]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+  });
+
+  test('sticky body text still parses after a sanitize pass', () => {
+    const svg = strokesToSvg([{ ...sticky, text: 'survive me' }]);
+    const cleaned = sanitizeAnnotationSvg(svg);
+    const [parsed] = svgToStrokes(cleaned) as StickyStroke[];
+    expect(parsed?.text).toBe('survive me');
+  });
+});
+
+describe('annotations round-trip / rect corner radius', () => {
+  const base: RectStroke = {
+    id: 'r',
+    tool: 'rect',
+    color: '#1d6cf0',
+    width: 2,
+    x: 0,
+    y: 0,
+    w: 50,
+    h: 50,
+    fill: null,
+  };
+
+  for (const r of [0, 8, 999]) {
+    test(`cornerRadius ${r} round-trips`, () => {
+      const [parsed] = svgToStrokes(strokesToSvg([{ ...base, cornerRadius: r }])) as RectStroke[];
+      expect(parsed?.cornerRadius ?? 0).toBe(r);
+    });
+  }
+});
+
+describe('annotations round-trip / arrow heads + dash (4 dirs × 2 dash)', () => {
+  const base: ArrowStroke = {
+    id: 'a',
+    tool: 'arrow',
+    color: '#1a8f3e',
+    width: 2,
+    x1: 0,
+    y1: 0,
+    x2: 100,
+    y2: 0,
+  };
+
+  // The four FigJam direction presets, expressed as (startHead, endHead) pairs.
+  const dirs: Array<{
+    name: string;
+    startHead: 'none' | 'triangle';
+    endHead: 'none' | 'triangle';
+  }> = [
+    { name: 'none (line)', startHead: 'none', endHead: 'none' },
+    { name: 'start', startHead: 'triangle', endHead: 'none' },
+    { name: 'end (default)', startHead: 'none', endHead: 'triangle' },
+    { name: 'both', startHead: 'triangle', endHead: 'triangle' },
+  ];
+
+  for (const d of dirs) {
+    for (const dashed of [false, true]) {
+      test(`${d.name} + ${dashed ? 'dashed' : 'solid'} round-trips`, () => {
+        const arrow: ArrowStroke = {
+          ...base,
+          startHead: d.startHead,
+          endHead: d.endHead,
+          dashed,
+        };
+        const svg = strokesToSvg([arrow]);
+        const [parsed] = svgToStrokes(svg) as ArrowStroke[];
+        // Normalize defaults: the parser leaves default values undefined.
+        expect(parsed?.startHead ?? 'none').toBe(d.startHead);
+        expect(parsed?.endHead ?? 'triangle').toBe(d.endHead);
+        expect(parsed?.dashed ?? false).toBe(dashed);
+        // And it is idempotent at the byte level.
+        expect(reparse(svg)).toBe(svg);
+      });
+    }
+  }
+});
+
+describe('annotations round-trip / standalone vs anchored text', () => {
+  test('standalone text round-trips its world (x, y) and stays unanchored', () => {
+    const t: TextStroke = {
+      id: 't-std',
+      tool: 'text',
+      color: '#1a1a1a',
+      fontSize: 20,
+      text: 'side note',
+      x: 120,
+      y: 80,
+    };
+    const [parsed] = svgToStrokes(strokesToSvg([t])) as TextStroke[];
+    expect(parsed?.anchorId).toBeUndefined();
+    expect(parsed?.x).toBe(120);
+    expect(parsed?.y).toBe(80);
+    expect(parsed?.text).toBe('side note');
+    expect(parsed?.fontSize).toBe(20);
+  });
+
+  test('anchored text round-trips its host id (back-compat)', () => {
+    const t: TextStroke = {
+      id: 't-anc',
+      tool: 'text',
+      color: '#1a1a1a',
+      fontSize: 14,
+      text: 'label',
+      anchorId: 'r-host',
+    };
+    const [parsed] = svgToStrokes(strokesToSvg([t])) as TextStroke[];
+    expect(parsed?.anchorId).toBe('r-host');
+    expect(parsed?.x).toBeUndefined();
+  });
+});
+
+describe('annotations round-trip / mixed scene idempotency', () => {
+  test('a scene mixing every Phase 21 shape re-serializes identically', () => {
+    const scene: Stroke[] = [
+      {
+        id: 'p',
+        tool: 'pen',
+        color: '#000',
+        width: 3,
+        points: [
+          [0, 0],
+          [5, 5],
+        ],
+      },
+      {
+        id: 'r',
+        tool: 'rect',
+        color: '#222',
+        width: 2,
+        x: 0,
+        y: 0,
+        w: 40,
+        h: 40,
+        fill: null,
+        cornerRadius: 999,
+      },
+      {
+        id: 'a',
+        tool: 'arrow',
+        color: '#111',
+        width: 2,
+        x1: 0,
+        y1: 0,
+        x2: 50,
+        y2: 50,
+        startHead: 'triangle',
+        endHead: 'triangle',
+        dashed: true,
+      },
+      {
+        id: 'st',
+        tool: 'sticky',
+        color: '#ffd6e7',
+        x: 10,
+        y: 10,
+        w: 200,
+        h: 160,
+        text: 'hi',
+        fontSize: 14,
+        cornerRadius: 8,
+      },
+      { id: 'tx', tool: 'text', color: '#000', fontSize: 14, text: 'free', x: 5, y: 6 },
+    ];
+    const svg = strokesToSvg(scene);
+    expect(reparse(svg)).toBe(svg);
+  });
+});

package/plugins/design/dev-server/test/canvas-cursors.test.ts

@@ -0,0 +1,73 @@
+// canvas-cursors — Phase 21 custom tool cursors. Validates the data-URI CSS
+// cursor shape so a malformed string (which silently disables the cursor in the
+// browser) can't ship undetected.
+
+import { describe, expect, test } from 'bun:test';
+
+import { TOOL_CURSORS } from '../canvas-cursors.ts';
+
+const ALL_TOOLS = [
+  'move',
+  'hand',
+  'comment',
+  'pen',
+  'rect',
+  'ellipse',
+  'sticky',
+  'arrow',
+  'text',
+  'eraser',
+] as const;
+
+describe('canvas-cursors / TOOL_CURSORS', () => {
+  test('covers every tool', () => {
+    for (const t of ALL_TOOLS) {
+      expect(typeof TOOL_CURSORS[t]).toBe('string');
+      expect(TOOL_CURSORS[t].length).toBeGreaterThan(0);
+    }
+  });
+
+  test('move keeps the system arrow', () => {
+    expect(TOOL_CURSORS.move).toBe('default');
+  });
+
+  test('custom cursors are well-formed data-URI CSS values with hotspot + fallback', () => {
+    const fallback: Record<string, string> = {
+      hand: 'grab',
+      comment: 'crosshair',
+      pen: 'crosshair',
+      rect: 'crosshair',
+      ellipse: 'crosshair',
+      sticky: 'crosshair',
+      arrow: 'crosshair',
+      text: 'text',
+      eraser: 'cell',
+    };
+    for (const [tool, fb] of Object.entries(fallback)) {
+      const v = TOOL_CURSORS[tool as keyof typeof TOOL_CURSORS];
+      // url("data:image/svg+xml,<encoded>") <hx> <hy>, <fallback>
+      expect(v).toMatch(
+        new RegExp(`^url\\("data:image/svg\\+xml,%3Csvg[^"]+"\\) \\d+ \\d+, ${fb}$`)
+      );
+      // The SVG must declare a 32×32 box and be valid encoded markup.
+      const decoded = decodeURIComponent(v.slice(v.indexOf(',') + 1, v.indexOf('")')));
+      expect(decoded).toContain("width='32'");
+      expect(decoded).toContain("height='32'");
+      expect(decoded).toContain('</svg>');
+    }
+  });
+
+  test('hotspots are within the 0..31 image bounds', () => {
+    for (const t of ALL_TOOLS) {
+      if (TOOL_CURSORS[t] === 'default') continue;
+      const m = TOOL_CURSORS[t].match(/"\) (\d+) (\d+),/);
+      expect(m).not.toBeNull();
+      const hx = Number(m?.[1]);
+      const hy = Number(m?.[2]);
+      expect(hx).toBeGreaterThanOrEqual(0);
+      expect(hx).toBeLessThanOrEqual(31);
+      expect(hy).toBeGreaterThanOrEqual(0);
+      expect(hy).toBeLessThanOrEqual(31);
+    }
+  });
+});

package/plugins/design/dev-server/test/canvas-origin-gate.test.ts

@@ -0,0 +1,76 @@
+// Canvas-origin route gate — A1/A2 (DDR-060 F1 re-audit). Boots a real server
+// with MAUDE_CANVAS_ORIGIN_SPLIT=1 and probes the segregated canvas origin to
+// prove: (1) the %2f-encoded path-traversal that previously leaked repo files
+// outside designRoot is now 403'd; (2) privileged routes stay 403; (3) legit
+// designRoot assets + the shell still serve; (4) the shell carries the hardened
+// CSP. See .ai/logs/security-reviews/phase-9.1-t2-f1-cross-origin-reaudit.md.
+
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+async function readCanvasOrigin(designRoot: string): Promise<string> {
+  // server.ts writes _server.json under the designRoot once both listeners bind.
+  for (let i = 0; i < 40; i++) {
+    try {
+      const info = JSON.parse(readFileSync(join(designRoot, '_server.json'), 'utf8'));
+      if (info.canvasOrigin) return info.canvasOrigin as string;
+    } catch {
+      /* not written yet */
+    }
+    await Bun.sleep(50);
+  }
+  throw new Error('canvasOrigin never appeared in _server.json');
+}
+
+describe('canvas-origin gate — A1/A2 traversal + privilege containment', () => {
+  test('%2f traversal out of designRoot is 403; privileged 403; legit 200; CSP hardened', async () => {
+    const { root, designRoot } = makeSandbox();
+    // A real asset OUTSIDE .design/ but INSIDE repoRoot — the traversal target.
+    writeFileSync(join(root, 'secret-outside.css'), '.leak{content:"SECRET"}');
+    // A legit canvas asset under designRoot (the allowed case).
+    mkdirSync(join(designRoot, 'ui'), { recursive: true });
+    writeFileSync(
+      join(designRoot, 'ui', 'Gate.tsx'),
+      'export default function G(){return <main/>}\n'
+    );
+
+    const port = nextPort();
+    const proc = await bootServer(root, port, { MAUDE_CANVAS_ORIGIN_SPLIT: '1' });
+    try {
+      const canvas = await readCanvasOrigin(designRoot);
+      const code = async (p: string) =>
+        (await fetch(canvas + p, { signal: AbortSignal.timeout(2000) })).status;
+
+      // (1) The confirmed bypass — must now be 403, not 200.
+      expect(await code('/.design/..%2fsecret-outside.css')).toBe(403);
+      expect(await code('/.design/ui/..%2f..%2fsecret-outside.css')).toBe(403);
+      // Double-encoded + mixed-case variants stay closed.
+      expect(await code('/.design/%2e%2e%2fsecret-outside.css')).toBe(403);
+
+      // (2) Privileged / out-of-scope routes stay 403 on the canvas origin.
+      for (const p of ['/_config', '/_sync-status', '/_api/export', '/package.json']) {
+        expect(await code(p)).toBe(403);
+      }
+
+      // (3) Legit surfaces still serve.
+      expect(await code('/_health')).toBe(200);
+      expect(await code('/_canvas-shell.html')).toBe(200);
+      // A real .tsx canvas under designRoot transpiles + serves (200).
+      expect(await code('/.design/ui/Gate.tsx')).toBe(200);
+
+      // (4) The shell carries the hardened CSP (A6).
+      const shell = await fetch(`${canvas}/_canvas-shell.html`);
+      const csp = shell.headers.get('content-security-policy') ?? '';
+      expect(csp).toContain("connect-src 'self'");
+      expect(csp).toContain("webrtc 'block'");
+      expect(csp).toContain('frame-ancestors');
+      expect(csp).toContain(`http://localhost:${port}`);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});

package/plugins/design/dev-server/test/collab-reseed-guard.test.ts

@@ -0,0 +1,78 @@
+// Gap 1 (file-sync clobber fix) — the syncRoomFrom* no-op guards.
+//
+// createCollab now re-seeds a live room from disk whenever a synced file
+// changes externally (sync-agent hub-push or `design:edit` write), so the
+// room stops clobbering the external change back. That re-seed reuses
+// syncRoomFromComments/syncRoomFromAnnotations, which ALSO run on the room's
+// own persist → file → fs-event path. Without an equality short-circuit that
+// would spin an 800ms persist storm. These tests pin the guard: an identical
+// re-seed emits NO doc update (→ no persist → no loop); a real change emits one.
+
+import { describe, expect, test } from 'bun:test';
+
+import { Y_TYPES } from '../collab/persistence.ts';
+import { createRegistry } from '../collab/registry.ts';
+import type { RoomCallbacks } from '../collab/room.ts';
+
+function noopCallbacks(): RoomCallbacks {
+  return {
+    async seed() {},
+    async persistJson() {},
+    async persistBinary() {},
+  };
+}
+
+describe('Gap 1 — syncRoomFromComments no-op guard', () => {
+  test('re-seeding identical comments emits NO doc update (loop-safe)', () => {
+    const r = createRegistry(noopCallbacks());
+    const room = r.get('s');
+    const list = [{ id: 'c1', text: 'hi' }];
+    r.syncRoomFromComments('s', list);
+
+    let updates = 0;
+    room.doc.on('update', () => {
+      updates++;
+    });
+    // Identical content (the room's-own-persist echo, or a redundant hub push)
+    // → must not emit, or the reseed↔persist loop never settles.
+    r.syncRoomFromComments('s', [{ id: 'c1', text: 'hi' }]);
+    expect(updates).toBe(0);
+
+    // A genuine change still propagates — exactly one update.
+    r.syncRoomFromComments('s', [
+      { id: 'c1', text: 'hi' },
+      { id: 'c2', text: 'yo' },
+    ]);
+    expect(updates).toBe(1);
+  });
+
+  test('re-seed brings a STALE room up to the on-disk list (the clobber fix)', () => {
+    const r = createRegistry(noopCallbacks());
+    const room = r.get('s');
+    const arr = room.doc.getArray(Y_TYPES.comments);
+    expect(arr.length).toBe(0); // room opened empty (the "B shows []" state)
+
+    // Sync agent wrote a hub-pushed comment to disk → createCollab re-seeds:
+    r.syncRoomFromComments('s', [{ id: 'c1', text: 'from peer A' }]);
+    expect(arr.toArray()).toEqual([{ id: 'c1', text: 'from peer A' }]);
+  });
+});
+
+describe('Gap 1 — syncRoomFromAnnotations no-op guard', () => {
+  test('re-seeding the identical svg emits NO doc update', () => {
+    const r = createRegistry(noopCallbacks());
+    const room = r.get('s');
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg"><g/></svg>';
+    r.syncRoomFromAnnotations('s', svg);
+
+    let updates = 0;
+    room.doc.on('update', () => {
+      updates++;
+    });
+    r.syncRoomFromAnnotations('s', svg); // identical → no-op
+    expect(updates).toBe(0);
+
+    r.syncRoomFromAnnotations('s', '<svg xmlns="http://www.w3.org/2000/svg"><rect/></svg>');
+    expect(updates).toBe(1);
+  });
+});

package/plugins/design/dev-server/test/collab-room.test.ts

@@ -3,9 +3,15 @@
 
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 
+import { Awareness } from 'y-protocols/awareness';
 import * as Y from 'yjs';
 
-import { encodeHandshake, encodeSyncUpdate, handleMessage } from '../collab/protocol.ts';
+import {
+  encodeAwarenessFrame,
+  encodeHandshake,
+  encodeSyncUpdate,
+  handleMessage,
+} from '../collab/protocol.ts';
 import { type RoomCallbacks, type RoomConn, createRoom } from '../collab/room.ts';
 
 function makeConn(id: string): RoomConn & { recv: Uint8Array[] } {
@@ -140,24 +146,29 @@ describe('Room', () => {
     await room.destroy();
   });
 
-  test('disconnect cleans up awareness states tagged with __connId', async () => {
+  test('disconnect removes the awareness states a conn published', async () => {
     const cb = makeCallbacks();
     const room = createRoom('aw-cleanup-slug', cb);
     const A = makeConn('a');
     await room.connect(A);
 
-    // Simulate Alice publishing her awareness state with the matching __connId.
-    room.awareness.setLocalState({ name: 'Alice', __connId: 'a' });
-    expect(room.awareness.getStates().size).toBe(1);
+    // Alice (conn A) publishes her awareness over the wire — the server learns
+    // her clientID belongs to conn 'a' from the update origin (server-authoritative;
+    // it does NOT trust a client-supplied __connId). Mirrors the real receive path.
+    const clientDoc = new Y.Doc();
+    const clientAw = new Awareness(clientDoc);
+    clientAw.setLocalState({ name: 'Alice' });
+    room.receive(A, encodeAwarenessFrame(clientAw, [clientAw.clientID]));
+    expect(room.awareness.getStates().has(clientAw.clientID)).toBe(true);
 
     room.disconnect(A);
     expect(room.size()).toBe(0);
-    // Awareness state owned by the disconnected conn is gone.
-    const states = room.awareness.getStates();
-    for (const s of states.values()) {
-      expect((s as { __connId?: string }).__connId).not.toBe('a');
-    }
+    // The disconnected conn's awareness state is dropped immediately — no waiting
+    // out the ~30s awareness timeout (the phantom-accumulation bug).
+    expect(room.awareness.getStates().has(clientAw.clientID)).toBe(false);
 
+    clientAw.destroy();
+    clientDoc.destroy();
     await room.destroy();
   });
 

package/plugins/design/dev-server/test/csp-canvas-shell.test.ts

@@ -0,0 +1,46 @@
+// cspForCanvasShell — A6 (DDR-060 F1 re-audit) CSP hardening for the segregated
+// canvas origin. Asserts the exfil-relevant directives are present and that
+// `frame-ancestors` is only emitted when the main origin is known (so the legit
+// cross-origin embed is never accidentally blocked).
+
+import { describe, expect, test } from 'bun:test';
+
+import { cspForCanvasShell } from '../http.ts';
+
+const SHELL = '<!doctype html><html><head><script>const x=1;</script></head><body></body></html>';
+
+describe('cspForCanvasShell — A6 hardening', () => {
+  test('locks down the dangerous lanes', () => {
+    const csp = cspForCanvasShell(SHELL);
+    expect(csp).toContain("default-src 'none'");
+    expect(csp).toContain("connect-src 'self'");
+    expect(csp).toContain("object-src 'none'");
+    expect(csp).toContain("base-uri 'none'");
+    // No eval / no inline-script escape hatch.
+    expect(csp).not.toContain('unsafe-eval');
+    expect(csp).not.toMatch(/script-src[^;]*unsafe-inline/);
+  });
+
+  test("adds webrtc 'block' (connect-src does not cover WebRTC exfil)", () => {
+    expect(cspForCanvasShell(SHELL)).toContain("webrtc 'block'");
+  });
+
+  test("adds form-action 'none'", () => {
+    expect(cspForCanvasShell(SHELL)).toContain("form-action 'none'");
+  });
+
+  test('hashes inline scripts (no unsafe-inline for script-src)', () => {
+    const csp = cspForCanvasShell(SHELL);
+    expect(csp).toMatch(/script-src 'self' 'sha256-[A-Za-z0-9+/=]+'/);
+  });
+
+  test('frame-ancestors allowlists the main origin when known', () => {
+    const csp = cspForCanvasShell(SHELL, 'http://localhost:4399');
+    expect(csp).toContain("frame-ancestors 'self' http://localhost:4399");
+  });
+
+  test('frame-ancestors is OMITTED when the main origin is unknown (would block the legit embed)', () => {
+    const csp = cspForCanvasShell(SHELL);
+    expect(csp).not.toContain('frame-ancestors');
+  });
+});

package/plugins/design/dev-server/test/fixtures/phase-20-annotations.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1"><path data-id="p1" data-tool="pen" stroke="#d63b1f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" fill="none" d="M0 0 L10 10 L20 5" pointer-events="stroke"/><rect data-id="r1" data-tool="rect" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" fill="#fff4d6" x="10" y="20" width="30" height="40"/><ellipse data-id="e1" data-tool="ellipse" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" fill="#e6f4ea" cx="100" cy="100" rx="40" ry="25"/><g data-id="a1" data-tool="arrow" stroke="#1a8f3e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" fill="none"><line x1="0" y1="0" x2="100" y2="0"/><polyline points="85.5844981135613,6.94213982588093 100,0 85.5844981135613,-6.94213982588093" fill="#1a8f3e"/></g><text data-id="t1" data-tool="text" data-anchor-id="r1" data-font-size="14" fill="#1a1a1a" text-anchor="middle" dominant-baseline="middle">needs work</text></svg>

package/plugins/design/dev-server/test/input-router.test.ts

@@ -229,6 +229,20 @@ describe('input-router / keydown — Phase 5 draw tools', () => {
     });
   });
 
+  test('N → tool sticky (Phase 21)', () => {
+    expect(classify(base({ type: 'keydown', key: 'n' }))).toEqual({
+      kind: 'tool',
+      tool: 'sticky',
+    });
+  });
+
+  test('T → tool text (Phase 21)', () => {
+    expect(classify(base({ type: 'keydown', key: 't' }))).toEqual({
+      kind: 'tool',
+      tool: 'text',
+    });
+  });
+
   test('uppercase B (shift held) — still maps to pen (lowercased)', () => {
     expect(classify(base({ type: 'keydown', key: 'B', shiftKey: true }))).toEqual({
       kind: 'tool',
@@ -268,6 +282,13 @@ describe('input-router / pointer events — Phase 5 annotation tools', () => {
     expect(classify(base({ type: 'pointermove', activeTool: 'ellipse' })).kind).toBe('no-op');
   });
 
+  test('sticky + text tools own bare pointer events (Phase 21 — SVG overlay claims)', () => {
+    for (const activeTool of ['sticky', 'text'] as const) {
+      expect(classify(base({ type: 'pointerdown', activeTool, button: 0 })).kind).toBe('no-op');
+      expect(classify(base({ type: 'pointermove', activeTool })).kind).toBe('no-op');
+    }
+  });
+
   test('cmd+left-click in arrow tool → select replace (escape hatch to move)', () => {
     expect(
       classify(