@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/http.ts

@@ -10,7 +10,7 @@ import { dirname, join, posix, relative, resolve, sep } from 'node:path';
 
 import { probeAcpAvailability } from './acp/probe.ts';
 import { deleteChat, listChats, readChatMessages } from './acp/transcript.ts';
-import type { Api } from './api.ts';
+import { type Api, ASSET_MAX_VIDEO_BYTES } from './api.ts';
 import { buildCanvasModule } from './canvas-build.ts';
 import { canvasLibPath } from './canvas-lib-resolver.ts';
 import { TranspileError } from './canvas-pipeline.ts';
@@ -55,6 +55,15 @@ export const MIME: Record<string, string> = {
   '.woff2': 'font/woff2',
   '.ttf': 'font/ttf',
   '.otf': 'font/otf',
+  // DDR-148 — video/audio media referenced by a video-comp `<Video>`/`<Audio>`.
+  '.mp4': 'video/mp4',
+  '.m4v': 'video/mp4',
+  '.mov': 'video/quicktime',
+  '.webm': 'video/webm',
+  '.mp3': 'audio/mpeg',
+  '.wav': 'audio/wav',
+  '.m4a': 'audio/mp4',
+  '.ogg': 'audio/ogg',
 };
 
 function ext(p: string): string {
@@ -112,6 +121,11 @@ export function cspForCanvasShell(html: string, mainOrigin?: string): string {
     `script-src ${scriptSrc}`,
     "connect-src 'self'",
     "img-src 'self' data: blob:",
+    // DDR-148 — a video-comp's <Video>/<Audio> loads media from the canvas
+    // origin's own designRoot (assets/). Same inert-bytes trust as img-src
+    // 'self'; without it default-src 'none' blocks all media (black video, no
+    // sound). `blob:` covers Remotion's processed-media URLs.
+    "media-src 'self' blob:",
     "style-src 'self' 'unsafe-inline'",
     "font-src 'self' data:",
     "frame-src 'self'",
@@ -124,6 +138,39 @@ export function cspForCanvasShell(html: string, mainOrigin?: string): string {
   return directives.join('; ');
 }
 
+/**
+ * CSP for the EXPORT/CAPTURE render (DDR-148 security, attacker F1). The export
+ * renders the (untrusted, DDR-054) canvas on the MAIN origin — where the normal
+ * shell CSP is env-gated off — and the capture shim ACTIVELY primes+seeks every
+ * `<video>`, so a canvas with `<Video src="http://169.254.169.254/…">` or comp
+ * JS doing `fetch(internal)` would turn ⌘E into read-SSRF + exfil-via-artifact.
+ *
+ * The comp is arbitrary JS by design and the in-page encoder is injected via
+ * `addScriptTag`, so restricting SCRIPT execution is neither possible nor the
+ * threat — the threat is NETWORK EGRESS. This CSP therefore locks every network
+ * sink to `'self'` (media/img/connect/font, no frames/objects/form posts) while
+ * leaving script permissive. Legit designRoot media is same-origin → still
+ * loads; every off-origin fetch/media/beacon is refused.
+ */
+export function cspForCapture(): string {
+  return [
+    "default-src 'self'",
+    "script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:",
+    "style-src 'self' 'unsafe-inline'",
+    "img-src 'self' data: blob:",
+    "media-src 'self' blob:",
+    "font-src 'self' data:",
+    "connect-src 'self'",
+    "worker-src 'self' blob:",
+    "child-src 'self' blob:",
+    "frame-src 'none'",
+    "object-src 'none'",
+    "base-uri 'none'",
+    "form-action 'none'",
+    "webrtc 'block'",
+  ].join('; ');
+}
+
 /**
  * CSRF guard for the main-origin source-write routes (edit-css / edit-text /
  * edit-attr / reorder). Those routes are reachable only from the shell, which is
@@ -475,6 +522,57 @@ async function serveFile(absPath: string, headers: Record<string, string> = {}):
   });
 }
 
+/** Media (video/audio) extensions that get HTTP Range support when served. */
+const RANGE_MEDIA_EXTS = new Set(['.mp4', '.m4v', '.mov', '.webm', '.mp3', '.wav', '.m4a', '.ogg']);
+
+/**
+ * DDR-150 dogfood (team finding) — serve a media file with HTTP Range support.
+ * The plain `new Response(Bun.file(..))` lane answered `Range:` requests with a
+ * 200 + full body: Chrome copes for small clips (buffers everything) but large
+ * MP4s scrub terribly, and WKWebView (the native desktop app) can refuse to
+ * play media from servers without Range support at all. Single-range only
+ * (`bytes=a-b`, suffix `bytes=-n`, open `bytes=a-`); malformed ranges fall back
+ * to a full 200; an unsatisfiable one gets an honest 416.
+ */
+async function serveMediaFile(
+  absPath: string,
+  req: Request,
+  headers: Record<string, string> = {}
+): Promise<Response> {
+  const file = Bun.file(absPath);
+  if (!(await file.exists())) return new Response('Not found', { status: 404 });
+  const size = file.size;
+  const base = {
+    'Content-Type': MIME[ext(absPath)] || 'application/octet-stream',
+    'Cache-Control': 'no-store',
+    'Accept-Ranges': 'bytes',
+    ...headers,
+  };
+  const range = req.headers.get('range');
+  const m = range ? /^bytes=(\d*)-(\d*)$/.exec(range.trim()) : null;
+  if (m && (m[1] || m[2]) && size > 0) {
+    const start = m[1]
+      ? Number.parseInt(m[1], 10)
+      : Math.max(0, size - Number.parseInt(m[2] as string, 10));
+    const end = m[1] && m[2] ? Math.min(Number.parseInt(m[2], 10), size - 1) : size - 1;
+    if (Number.isFinite(start) && start >= 0 && start <= end && start < size) {
+      return new Response(file.slice(start, end + 1), {
+        status: 206,
+        headers: {
+          ...base,
+          'Content-Range': `bytes ${start}-${end}/${size}`,
+          'Content-Length': String(end - start + 1),
+        },
+      });
+    }
+    return new Response(null, {
+      status: 416,
+      headers: { ...base, 'Content-Range': `bytes */${size}` },
+    });
+  }
+  return new Response(file, { headers: base });
+}
+
 export interface Http {
   routes: Record<string, (req: Request) => Response | Promise<Response>>;
   fetch(req: Request): Promise<Response>;
@@ -484,7 +582,7 @@ export interface Http {
    * origin keeps it env-gated for the POC). Shared so both listeners produce
    * byte-identical HTML.
    */
-  serveCanvasShell(applyCsp: boolean): Promise<Response>;
+  serveCanvasShell(applyCsp: boolean, capture?: 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
@@ -568,8 +666,43 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
 
   async function readJson<T = unknown>(req: Request, max = 256 * 1024): Promise<T | null> {
     try {
-      const text = await req.text();
-      if (text.length > max) throw new Error('body too large');
+      // DDR-148 security (attacker F2): the global maxRequestBodySize is raised
+      // to ~108 MB so the STREAMING /_api/asset route can accept large videos —
+      // but a JSON route must never buffer that. `req.text()` would materialize
+      // the whole body BEFORE the length check (a 107 MB body from the untrusted
+      // canvas origin = memory-amplification DoS, reverting DDR-088). So: honest
+      // content-length fast-reject, then read the stream and ABORT past `max`,
+      // buffering at most ~max + one chunk.
+      const cl = Number(req.headers.get('content-length'));
+      if (Number.isFinite(cl) && cl > max) return null;
+      const body = req.body;
+      if (!body) return null;
+      const reader = body.getReader();
+      const chunks: Uint8Array[] = [];
+      let size = 0;
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        if (!value) continue;
+        size += value.byteLength;
+        if (size > max) {
+          try {
+            await reader.cancel();
+          } catch {
+            /* stream already closing */
+          }
+          return null;
+        }
+        chunks.push(value);
+      }
+      if (size === 0) return null;
+      const buf = new Uint8Array(size);
+      let off = 0;
+      for (const c of chunks) {
+        buf.set(c, off);
+        off += c.byteLength;
+      }
+      const text = new TextDecoder().decode(buf);
       return text ? (JSON.parse(text) as T) : null;
     } catch {
       return null;
@@ -619,6 +752,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     // ChatPanel not-connected explainer + the Help-menu modal read this.
     '/_api/preflight': async (req: Request) => {
       if (!sameOriginWrite(req)) return new Response('cross-origin rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       return Response.json(await probeReadiness(), { headers: { 'Cache-Control': 'no-store' } });
     },
 
@@ -631,6 +766,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       // chat-open` driver omits Origin (allowed); a browser drive-by can't forge it.
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       ctx.bus.emit('acp-focus', {});
       return Response.json({ ok: true }, { headers: { 'Cache-Control': 'no-store' } });
     },
@@ -685,6 +822,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const declared = Number(req.headers.get('content-length') || '0');
       if (Number.isFinite(declared) && declared > 10 * 1024 * 1024) {
         return Response.json(
@@ -791,6 +930,34 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       return new Response('Method not allowed', { status: 405 });
     },
 
+    '/_api/canvas-source': async (req: Request) => {
+      // DDR-148 — read-only raw .tsx source for the Timeline panel's sequence/
+      // keyframe parser. GET ?file=<canvas rel or slug> → { source }.
+      // MAIN-ORIGIN ONLY: intentionally absent from CANVAS_SAFE_API +
+      // startCanvasServer's routes (dual-allowlist, DDR-054) — the untrusted
+      // canvas iframe must never read arbitrary project source. Containment via
+      // api.loadCanvasSource → resolveCanvasAbs (stays under designRoot).
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      // DNS-rebinding guard — a GET read of project source is CORS-readable once
+      // a rebound page shares this origin; the dev-server always binds 127.0.0.1,
+      // so a real browser (Host: localhost:<port>) passes and only a rebound
+      // foreign hostname 403s. (No sameOriginWrite here — GET.)
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const file = new URL(req.url).searchParams.get('file');
+      const r = await api.loadCanvasSource(file);
+      if (!r.ok) {
+        return Response.json(
+          { ok: false, error: r.error },
+          { status: r.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, source: r.source },
+        { headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/git-committers': async (req: Request) => {
       // Phase 6 — feed for the @mention autocomplete in composer + reply box.
       // GET → top-20 committers on HEAD (`git shortlog -sne | head -20`)
@@ -829,6 +996,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       // slash-command driver omits Origin (→ allowed); a browser drive-by can't.
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{ file?: string; author?: string }>(req);
       if (!body || typeof body.file !== 'string' || !body.file.trim()) {
         return new Response('body.file required', { status: 400 });
@@ -847,6 +1016,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{ file?: string }>(req);
       if (!body || typeof body.file !== 'string' || !body.file.trim()) {
         return new Response('body.file required', { status: 400 });
@@ -861,6 +1032,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{ file?: string }>(req);
       if (!body || typeof body.file !== 'string' || !body.file.trim()) {
         return new Response('body.file required', { status: 400 });
@@ -912,6 +1085,17 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       // startCanvasServer's allowlist (DDR-054) — the untrusted canvas iframe
       // origin must never reach a file-write/-delete endpoint. Validation lives in
       // api.createCanvas / api.deleteCanvas (containment + group allowlist).
+      // DDR-150 P4 Task 12 — this route creates/deletes source `.tsx` (the
+      // video-comp assemble writes real comp source), so it's CSRF-gated like the
+      // other source-write routes: a cross-origin top-level page is rejected (the
+      // DDR-054 split only blocks the canvas iframe). No-Origin (curl/tests) + the
+      // same-origin shell pass. Closes a pre-existing gap on create/delete.
+      if (req.method === 'DELETE' || req.method === 'POST') {
+        if (!sameOriginWrite(req))
+          return new Response('cross-origin write rejected', { status: 403 });
+        if (!isLoopbackHost(req.headers.get('host')))
+          return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      }
       if (req.method === 'DELETE') {
         const file = new URL(req.url).searchParams.get('file');
         const result = await api.deleteCanvas({ file });
@@ -933,9 +1117,19 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
         );
       }
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
-      const body = await readJson<{ name?: unknown; kind?: unknown; group?: unknown }>(
+      const body = await readJson<{
+        name?: unknown;
+        kind?: unknown;
+        group?: unknown;
+        clips?: unknown;
+        fps?: unknown;
+        width?: unknown;
+        height?: unknown;
+      }>(
         req,
-        8 * 1024
+        // DDR-150 P4 Task 12 — a video-comp assemble carries a clips[] array;
+        // widen the read cap accordingly (still bounded well under abuse).
+        64 * 1024
       );
       if (!body) return new Response('body required', { status: 400 });
       const result = await api.createCanvas(body);
@@ -994,6 +1188,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<unknown>(req, 8 * 1024);
       return gitJson(await gitApi.createBranch(body));
     },
@@ -1002,6 +1198,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<unknown>(req, 8 * 1024);
       return gitJson(await gitApi.checkout(body));
     },
@@ -1034,6 +1232,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<unknown>(req, 256 * 1024);
       return gitJson(await gitApi.commit(body));
     },
@@ -1042,6 +1242,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<unknown>(req, 256 * 1024);
       return gitJson(await gitApi.discard(body));
     },
@@ -1050,6 +1252,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       // Token-bearing: refuse anything not from a loopback Host (the server binds
       // 127.0.0.1, so this is belt-and-suspenders against a forwarded/rebound Host).
       if (!isLoopbackHost(req.headers.get('host')))
@@ -1197,12 +1401,15 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{
         canvas?: unknown;
         id?: unknown;
         property?: unknown;
         value?: unknown;
         reset?: unknown;
+        idIndex?: unknown;
       }>(req, 8 * 1024);
       if (!body) return new Response('body required', { status: 400 });
       const result = await api.editCss(body);
@@ -1227,6 +1434,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{ canvas?: unknown; id?: unknown; text?: unknown }>(
         req,
         16 * 1024
@@ -1255,6 +1464,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{
         canvas?: unknown;
         id?: unknown;
@@ -1271,7 +1482,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
         );
       }
       return Response.json(
-        { ok: true, delta: result.delta },
+        { ok: true, delta: result.delta, seq: result.seq },
         { status: 200, headers: { 'Cache-Control': 'no-store' } }
       );
     },
@@ -1289,6 +1500,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{
         canvas?: unknown;
         id?: unknown;
@@ -1317,6 +1530,227 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       );
     },
 
+    '/_api/retime-sequence': async (req: Request) => {
+      // DDR-148 — Timeline drag-to-retime. POST { canvas, index, durationInFrames?,
+      // from? } → rewrites the index-th sequence's timing (const-preferring so a
+      // derived total updates too). Same MAIN-ORIGIN-ONLY trust boundary as
+      // /_api/reorder + /_api/edit-css (absent from CANVAS_SAFE_API +
+      // startCanvasServer routes, DDR-054) — the source write is privileged; the
+      // untrusted canvas iframe can only request it over the dgn:* bus.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        stableId?: unknown;
+        artboardId?: unknown;
+        contentHash?: unknown;
+        index?: unknown;
+        durationInFrames?: unknown;
+        from?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.retimeSequenceOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/remove-sequence': async (req: Request) => {
+      // DDR-150 P3 — remove a clip. POST { canvas, stableId, artboardId?,
+      // contentHash? } → removeClip (fingerprint + semantic gate; refuses the
+      // only clip; drops an adjacent transition in a series). Snapshots pre-remove
+      // for /design:rollback. Same MAIN-ORIGIN-ONLY trust boundary as the other
+      // source-writes (absent from CANVAS_SAFE_API + startCanvasServer routes).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        stableId?: unknown;
+        artboardId?: unknown;
+        contentHash?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.removeSequenceOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/insert-sequence': async (req: Request) => {
+      // DDR-150 P4 — insert a clip. POST { canvas, artboardId, from,
+      // durationInFrames, mediaTag?, src? } → insertClip (appends after the
+      // comp's last clip; refuses TransitionSeries + empty comps; src contained).
+      // MAIN-ORIGIN-ONLY (absent from CANVAS_SAFE_API + startCanvasServer routes).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        artboardId?: unknown;
+        from?: unknown;
+        durationInFrames?: unknown;
+        mediaTag?: unknown;
+        src?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.insertSequenceOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, stableId: result.stableId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/reorder-sequence': async (req: Request) => {
+      // DDR-150 P5 — z-order reorder. POST { canvas, artboardId, stableId,
+      // contentHash, refStableId, refContentHash, position } → reorderClip
+      // (moves a standalone <Sequence> before/after a sibling via moveElement +
+      // semantic gate; both clips fingerprint-checked; refuses TransitionSeries
+      // clips + self-move). MAIN-ORIGIN-ONLY (absent from CANVAS_SAFE_API +
+      // startCanvasServer routes — same dual-allowlist as the other clip writes).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        artboardId?: unknown;
+        stableId?: unknown;
+        contentHash?: unknown;
+        refStableId?: unknown;
+        refContentHash?: unknown;
+        position?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.reorderSequenceOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, stableId: result.stableId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/toggle-hide': async (req: Request) => {
+      // DDR-150 dogfood — hide/show a clip (gates its body behind {false && …};
+      // the tag + time slot + TransitionSeries alternation stay). MAIN-ORIGIN-ONLY
+      // + CSRF-gated like the other source writes.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        stableId?: unknown;
+        artboardId?: unknown;
+        contentHash?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.toggleHideOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, hidden: result.hidden, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-array-src': async (req: Request) => {
+      // DDR-150 dogfood — replace a media src stored in an array literal (the
+      // showreel `const CLIPS = [{ src }, …]` fed via `<ClipShot clip={CLIPS[i]}>`),
+      // addressed by the enumerator's mediaArrayRef. MAIN-ORIGIN-ONLY + CSRF-gated
+      // (same dual-allowlist as the other source writes); value contained under
+      // assets/ in the engine.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        arrayName?: unknown;
+        index?: unknown;
+        field?: unknown;
+        value?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.editArraySrcOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/comp-clips': async (req: Request) => {
+      // DDR-150 P2 — the single authoritative clip enumerator for a video-comp.
+      // GET ?canvas=<rel>&artboardId=<id> → { ok, compName, clips:[{ stableId,
+      // from, durationInFrames, mediaTag, mediaSrc, mediaCdId, contentHash }] }.
+      // The Timeline addresses every clip op by the returned stableId (never a
+      // regex document-order index — the multi-comp mis-hit defect). Read-only +
+      // MAIN-ORIGIN-ONLY: absent from CANVAS_SAFE_API + the startCanvasServer
+      // route map, so the untrusted canvas iframe can never reach it (DDR-054).
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      // DNS-rebinding guard — this GET echoes project source structure; loopback-
+      // only Host (real browser passes, rebound hostname 403s). No sameOriginWrite (GET).
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const u = new URL(req.url);
+      const result = await api.compClips({
+        canvas: u.searchParams.get('canvas'),
+        artboardId: u.searchParams.get('artboardId') ?? undefined,
+      });
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(result, { status: 200, headers: { 'Cache-Control': 'no-store' } });
+    },
+
     '/_api/reorder-revert': async (req: Request) => {
       // Phase 12.1 follow-up — Cmd+Z / Cmd+Shift+Z for a reorder. POST body
       // { canvas, seq, dir:'undo'|'redo' } → api.reorderRevert swaps the whole
@@ -1327,6 +1761,8 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
       if (!sameOriginWrite(req))
         return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const body = await readJson<{ canvas?: unknown; seq?: unknown; dir?: unknown }>(
         req,
         8 * 1024
@@ -1345,32 +1781,252 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       );
     },
 
+    '/_api/delete-element': async (req: Request) => {
+      // Stage I (feature-element-editing-robustness) — delete an element by
+      // data-cd-id. POST { canvas, id, idIndex? } → api.deleteElementOp (reparse
+      // gate; reused-component instance via idIndex). Logs a whole-file undo seq
+      // (Cmd+Z via /_api/reorder-revert — a structural edit churns positional
+      // ids so an inverse descriptor goes stale). Same MAIN-ORIGIN-ONLY trust
+      // boundary as /_api/reorder: absent from CANVAS_SAFE_API + startCanvasServer
+      // routes (DDR-054); sameOriginWrite CSRF + loopback-Host (DNS-rebinding) gated.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; id?: unknown; idIndex?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.deleteElementOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, deletedId: result.deletedId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/insert-element': async (req: Request) => {
+      // Stage I — insert a synthesized div/text/image relative to `refId`. POST
+      // { canvas, refId, position, kind, src?, refIndex? } → api.insertElementOp.
+      // Returns the new element's post-transpile id so the shell can select it.
+      // Whole-file undo seq. MAIN-ORIGIN ONLY (absent from both allowlists);
+      // sameOriginWrite + loopback-Host gated. An `image` src is contained to
+      // assets/ in the engine (no remote hotlink / ../ / scheme).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        refId?: unknown;
+        position?: unknown;
+        kind?: unknown;
+        src?: unknown;
+        refIndex?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.insertElementOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, newId: result.newId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/duplicate-element': async (req: Request) => {
+      // Cmd+D (Task L3) — duplicate an element (a copy as the next sibling). POST
+      // { canvas, id, idIndex? } → api.duplicateElementOp. Whole-file undo seq.
+      // MAIN-ORIGIN ONLY; sameOriginWrite + loopback-Host gated (dual-allowlist).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; id?: unknown; idIndex?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.duplicateElementOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, newId: result.newId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/insert-artboard': async (req: Request) => {
+      // Stage I4 — insert a new EMPTY artboard from a screen-size preset. POST
+      // { canvas, id, label, width, height } → api.insertArtboardOp (appends a
+      // <DCArtboard id label width height></DCArtboard> after the last artboard;
+      // size JSX-authoritative per DDR-027). Whole-file undo seq. MAIN-ORIGIN
+      // ONLY (absent from both allowlists); sameOriginWrite + loopback-Host gated.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        id?: unknown;
+        label?: unknown;
+        width?: unknown;
+        height?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.insertArtboardOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, artboardId: result.artboardId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/assets': async (req: Request) => {
+      // Stage F1 (feature-element-editing-robustness) — list content-addressed
+      // image/video assets under <designRoot>/assets/ for the AssetPicker (Replace
+      // image / insert image). GET → { assets:[{path,name,ext,kind,size,mtimeMs}] }.
+      // MAIN-ORIGIN ONLY: the picker is a shell dialog; absent from CANVAS_SAFE_API
+      // + startCanvasServer routes (dual-allowlist, DDR-054). Loopback-Host gated
+      // (DNS-rebinding); read-only, so no sameOriginWrite (GET).
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const r = await api.listAssets();
+      return Response.json(
+        { ok: true, assets: r.assets },
+        { headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-scope': async (req: Request) => {
+      // Stage H (feature-element-editing-robustness) — the INV-3 predictability
+      // verdict. GET ?canvas&id&rendered → { ok, scope:'local'|'shared',
+      // componentName, affects, reason }. READ-only (a parse the shell runs on
+      // selection to render the Local/Shared badge). MAIN-ORIGIN ONLY: absent
+      // from CANVAS_SAFE_API + startCanvasServer routes (dual-allowlist, DDR-054);
+      // loopback-Host gated (DNS-rebinding); no sameOriginWrite (GET).
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const url = new URL(req.url);
+      const result = await api.editScopeOp({
+        canvas: url.searchParams.get('canvas') ?? undefined,
+        id: url.searchParams.get('id') ?? undefined,
+        rendered: url.searchParams.get('rendered') ?? undefined,
+      });
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(result, { headers: { 'Cache-Control': 'no-store' } });
+    },
+
+    '/_api/resize-artboard': async (req: Request) => {
+      // Stage D4 — free-hand artboard resize. POST { canvas, artboardId, width?,
+      // height? } → api.resizeArtboardOp (writes the NUMERIC width/height props on
+      // the <DCArtboard id="…">, addressed by its `id` prop since the rendered
+      // <article data-dc-screen> carries no data-cd-id; DDR-027). Whole-file undo
+      // seq. MAIN-ORIGIN ONLY; sameOriginWrite + loopback-Host gated.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        artboardId?: unknown;
+        width?: unknown;
+        height?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.resizeArtboardOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/delete-artboard': async (req: Request) => {
+      // Delete an artboard by its `id` prop (Backspace / context-menu on a frame).
+      // POST { canvas, artboardId } → api.deleteArtboardOp (removes the
+      // <DCArtboard id="…"> span; refuses the last one). Whole-file undo seq.
+      // MAIN-ORIGIN ONLY; sameOriginWrite + loopback-Host gated (dual-allowlist).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; artboardId?: unknown }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.deleteArtboardOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/asset': async (req: Request) => {
-      // Phase 23 — binary image upload from the canvas (drag-drop / paste / the
-      // a11y file picker). POST raw image bytes → content-addressed write under
+      // Phase 23 / DDR-148 — binary media upload from the canvas (drag-drop /
+      // paste). POST raw bytes → content-addressed write under
       // <designRoot>/assets/<sha8>.<ext>, returns 201 { path }. This route is on
       // the canvas-origin allowlist (CANVAS_SAFE_API below) — a bigger grant than
       // the inert annotation-SVG write (binary, disk) — so the caps in
-      // api.saveAsset (magic-byte sniff, 10 MB ceiling, content-addressed name,
-      // traversal guard, no-SVG, dedupe) are the load-bearing trust mitigation,
-      // NOT optional. See DDR (Task 9).
+      // api.saveAssetFromStream (magic-byte sniff, per-category ceiling, content-
+      // addressed name, traversal guard, no-SVG/script, dedupe, session budget)
+      // are the load-bearing trust mitigation, NOT optional. DDR-088 + DDR-148:
+      // the body is STREAMED to disk (no full-buffer of a 100 MB clip in RAM).
       if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
-      // Early reject on a declared oversize body (the post-read length check in
-      // saveAsset is the authoritative gate — Content-Length can be omitted/lied).
+      // Early reject on a declared oversize body (the streamed per-category cap in
+      // saveAssetFromStream is the authoritative gate — Content-Length can be
+      // omitted/lied; this only trims an obvious oversize before we open a temp).
       const declared = Number(req.headers.get('content-length') || '0');
-      if (Number.isFinite(declared) && declared > 10 * 1024 * 1024) {
+      if (Number.isFinite(declared) && declared > ASSET_MAX_VIDEO_BYTES) {
+        const mb = Math.round(ASSET_MAX_VIDEO_BYTES / (1024 * 1024));
         return Response.json(
-          { ok: false, error: 'asset exceeds the 10 MB cap' },
+          { ok: false, error: `media exceeds the ${mb} MB cap` },
           { status: 413, headers: { 'Cache-Control': 'no-store' } }
         );
       }
-      let bytes: Uint8Array;
-      try {
-        bytes = new Uint8Array(await req.arrayBuffer());
-      } catch {
-        return new Response('could not read request body', { status: 400 });
-      }
-      const result = await api.saveAsset(bytes);
+      if (!req.body) return new Response('empty body', { status: 400 });
+      const result = await api.saveAssetFromStream(req.body as ReadableStream<Uint8Array>);
       if (!result.ok) {
         return Response.json(
           { ok: false, error: result.error },
@@ -1569,8 +2225,51 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (pathname === '/_canvas-shell.html' || pathname === '/_canvas-shell') {
         // 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');
+        // env-gated (MAUDE_CSP_POC) for the POC / backwards-compat. A capture
+        // render (?hide-chrome=1 — ⌘E export / screenshot shim) ALWAYS gets the
+        // network-locked capture CSP so it can't SSRF/exfil (attacker F1).
+        const capture = url.searchParams.get('hide-chrome') === '1';
+        return serveCanvasShell(process.env.MAUDE_CSP_POC === '1', capture);
+      }
+
+      // DDR-150 dogfood — canvas-relative assets alias. A comp's
+      // `<Video src="assets/x.mp4">` resolves against the iframe root →
+      // `/assets/x.mp4`; serve `designRoot/assets/x.mp4` (flat sha8-named
+      // uploads, media extensions only — mirrors isCanvasSafeRoute's gate on
+      // the canvas origin). Without this, every src the timeline insert /
+      // replace / assemble writers emit 404'd in the Player.
+      if (pathname.startsWith('/assets/')) {
+        let name = '';
+        try {
+          name = decodeURIComponent(pathname.slice('/assets/'.length));
+        } catch {
+          return new Response('Bad request', { status: 400 });
+        }
+        if (
+          name &&
+          !name.includes('/') &&
+          !name.includes('\\') &&
+          !name.includes('..') &&
+          !name.startsWith('_') &&
+          CANVAS_ASSET_EXTS.has(ext(name))
+        ) {
+          const abs = join(ctx.paths.designRoot, 'assets', name);
+          // Range-aware for video/audio (scrubbing + WKWebView compat).
+          if (RANGE_MEDIA_EXTS.has(ext(name))) {
+            return serveMediaFile(abs, req, { 'X-Content-Type-Options': 'nosniff' });
+          }
+          const f = Bun.file(abs);
+          if (await f.exists()) {
+            return new Response(f, {
+              headers: {
+                'Content-Type': MIME[ext(name)] || 'application/octet-stream',
+                'Cache-Control': 'no-store',
+                'X-Content-Type-Options': 'nosniff',
+              },
+            });
+          }
+          return new Response('Not found', { status: 404 });
+        }
       }
 
       // Fall-through: serve user repo files (designRoot + everything under repoRoot).
@@ -1587,6 +2286,11 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (e === '.tsx' && underDesignRoot) {
         return serveCanvasTsx(fp, req, ctx, join(ctx.paths.designRoot, '_locator.json'));
       }
+      // Video/audio get Range support (scrubbing + WKWebView compat) — the
+      // `/.design/assets/…` form comps reference goes through here.
+      if (RANGE_MEDIA_EXTS.has(e)) {
+        return serveMediaFile(fp, req, { 'X-Content-Type-Options': 'nosniff' });
+      }
       // Bun.file streams transparently for binary content.
       return new Response(file, {
         headers: {
@@ -1605,7 +2309,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     }
   }
 
-  async function serveCanvasShell(applyCsp: boolean): Promise<Response> {
+  async function serveCanvasShell(applyCsp: boolean, capture = false): 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);
@@ -1613,7 +2317,12 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       'Content-Type': 'text/html; charset=utf-8',
       'Cache-Control': 'no-store',
     };
-    if (applyCsp) headers['Content-Security-Policy'] = cspForCanvasShell(injected, ctx.mainOrigin);
+    // A capture render (⌘E export / screenshot) ALWAYS carries the network-locked
+    // capture CSP, even on the main origin where the normal shell CSP is off —
+    // this is the SSRF/exfil boundary the export otherwise lacked (attacker F1).
+    if (capture) headers['Content-Security-Policy'] = cspForCapture();
+    else if (applyCsp)
+      headers['Content-Security-Policy'] = cspForCanvasShell(injected, ctx.mainOrigin);
     return new Response(injected, { headers });
   }
 
@@ -1634,6 +2343,17 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     '.woff2',
     '.ttf',
     '.otf',
+    // DDR-148 — video/audio media a video-comp `<Video>`/`<Audio>` loads from
+    // assets/. Served like images (inert static bytes, `nosniff`, no script
+    // execution under the canvas CSP) — the same read grant, widened for media.
+    '.mp4',
+    '.m4v',
+    '.mov',
+    '.webm',
+    '.mp3',
+    '.wav',
+    '.m4a',
+    '.ogg',
   ]);
 
   // Exact API paths the canvas iframe needs (collab + display data). See
@@ -1697,6 +2417,17 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       if (rest.split('/').some((seg) => seg.startsWith('_'))) return false;
       return CANVAS_ASSET_EXTS.has(ext(safe));
     }
+    // DDR-150 dogfood — `/assets/<file>`: the canvas-RELATIVE form every writer
+    // emits (`<Video src="assets/x.mp4">` from timeline insert / replace /
+    // assemble, and what the video-comp skill teaches). It aliases to
+    // `designRoot/assets/<file>` — flat single segment (uploads are sha8-named),
+    // media/image extensions only, no `_` names. Same read-only trust class as
+    // the designRel static lane above (DDR-088 widened media grant).
+    if (safe.startsWith('/assets/')) {
+      const rest = safe.slice('/assets/'.length);
+      if (!rest || rest.includes('/') || rest.startsWith('_')) return false;
+      return CANVAS_ASSET_EXTS.has(ext(safe));
+    }
     return false;
   }