@1agh/maude 0.39.0 → 0.40.0

package/apps/studio/input-router.tsx

@@ -345,7 +345,13 @@ export function isEditableTarget(t: EventTarget | null): boolean {
  */
 export function isOverlayTarget(t: EventTarget | null): boolean {
   if (!t || !(t as Element).closest) return false;
-  return !!(t as Element).closest('.cm-composer, .cm-thread, .cm-mention-popup, .cm-pin');
+  // [data-mediaref-player] — the inline <video>/<audio controls> on a media
+  // reference chip (DDR-150 dogfood #8). The router must never claim (and
+  // preventDefault) pointerdowns over the player, or its native controls
+  // (play button, scrubber drag, volume) die under the move tool.
+  return !!(t as Element).closest(
+    '.cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, [data-mediaref-player]'
+  );
 }
 
 export function useInputRouter(opts: UseInputRouterOptions): void {

package/apps/studio/runtime-bundle.ts

@@ -79,6 +79,36 @@ export const RUNTIME_PACKAGES = [
   // every real canvas) returned HTTP 500 "Bundle failed".
   'lib0/decoding',
   'lib0/encoding',
+  // DDR-148 — Remotion video-comp authoring. `remotion` carries the React
+  // context stack (RemotionEnvironment / Sequence / Timeline) that a video-comp
+  // canvas AND the `<Player>` preview BOTH consume — so it MUST be a single
+  // externalised bundle (importmap-shared), exactly like React itself, or the
+  // Player's provider and the composition's `useCurrentFrame()` bind to
+  // different context instances and the comp renders frozen at frame 0 (the
+  // dual-package hazard). `@remotion/player` + `@remotion/transitions` each
+  // externalise `remotion` (→ the one bundle) and INLINE their own stateless
+  // helpers — `remotion/no-react` (interpolate/random/validators/NoReactInternals,
+  // all pure), plus `@remotion/paths`/`@remotion/shapes` for transitions — which
+  // hold no cross-package state, so a per-bundle copy is harmless. NOT shipping
+  // `@remotion/renderer`/`@remotion/web-renderer` (export goes through the
+  // capture spine). Pre-built into dist/runtime + floored in .min-sizes.json.
+  'remotion',
+  '@remotion/player',
+  '@remotion/media',
+  '@remotion/transitions',
+  // Transition presentations are separate subpath modules by design (Remotion
+  // tree-shakes to what you import). But a canvas import specifier that isn't
+  // in RUNTIME_PACKAGES tries to resolve against the USER's node_modules at
+  // request-time Bun.build — which doesn't exist on an npm/marketplace install
+  // — so EVERY presentation the skill teaches must be pre-bundled + importmap-
+  // routed. v1 ships the six core wipes ("join 4 clips + crossfade" vocabulary);
+  // exotic presentations (dreamy-zoom, film-burn, …) are a documented follow-up.
+  '@remotion/transitions/fade',
+  '@remotion/transitions/slide',
+  '@remotion/transitions/wipe',
+  '@remotion/transitions/flip',
+  '@remotion/transitions/clock-wipe',
+  '@remotion/transitions/none',
 ] as const;
 
 export type RuntimePackage = (typeof RUNTIME_PACKAGES)[number];

package/apps/studio/server.ts

@@ -18,13 +18,13 @@ import { spawn } from 'node:child_process';
 
 import { createAcp } from './acp/index.ts';
 import { createActivity } from './activity.ts';
-import { createApi } from './api.ts';
+import { ASSET_MAX_VIDEO_BYTES, createApi } from './api.ts';
 import { bootSelfHeal } from './boot-self-heal.ts';
 import { createCanvasListWatch } from './canvas-list-watch.ts';
 import { type AiActivityEntry, createAiActivity } from './collab/ai-activity.ts';
 import { createGitLifecycle } from './collab/git-lifecycle.ts';
 import { createCollab } from './collab/index.ts';
-import { createContext } from './context.ts';
+import { createContext, reloadConfig } from './context.ts';
 import { createFsWatch } from './fs-watch.ts';
 import { createGitWatch } from './git/watch.ts';
 import { createHttp } from './http.ts';
@@ -124,13 +124,16 @@ const { port: BASE_PORT, explicit: PORT_EXPLICIT } = resolvePort();
 
 type BunServer = ReturnType<typeof Bun.serve<WsData, never>>;
 
-// Phase 23 security review (DDR-088 follow-up) — hard ceiling on a buffered
-// request body. Without it Bun's 128 MB default applies, so `POST /_api/asset`
-// would buffer up to 128 MB into RAM BEFORE api.saveAsset's 10 MB check runs
-// (memory amplification from the untrusted canvas origin). 16 MB covers every
-// legit body (10 MB asset + 1 MB annotation SVG + small JSON) with headroom and
-// bounds the pre-handler buffer; the authoritative per-route caps still apply.
-const MAX_REQUEST_BODY = 16 * 1024 * 1024;
+// Phase 23 security review (DDR-088) + DDR-148 — hard ceiling on a request
+// body. Bun's 128 MB default would let the untrusted canvas origin send huge
+// bodies to any route. DDR-088 pinned this at 16 MB. DDR-148 raises it to the
+// video cap + 8 MB headroom so `POST /_api/asset` can accept a 100 MB clip —
+// but that route now STREAMS the body to disk (saveAssetFromStream), so a big
+// upload never lands as one ArrayBuffer in RAM. Other routes keep their small
+// LOGICAL caps (annotation 1 MB, JSON) — a body over those still rejects; the
+// only change is Bun accepts more bytes pre-handler (a bandwidth-bounded
+// transient-buffer tradeoff on the buffering routes, noted in DDR-148).
+const MAX_REQUEST_BODY = ASSET_MAX_VIDEO_BYTES + 8 * 1024 * 1024;
 
 function startServer(port: number): BunServer {
   return Bun.serve<WsData, never>({
@@ -401,6 +404,28 @@ const gitWatch = createGitWatch(ctx);
 // `.ai/logs/rca/issue-acp-new-canvas-not-in-filetree.md`.
 const canvasListWatch = createCanvasListWatch(ctx);
 
+// Config hot-reload — `/design:setup-ds` (or a hand edit) rewrites
+// `.design/config.json` mid-session; without a re-read the server keeps
+// serving the boot snapshot and a newly added canvas group (`system`) never
+// reaches /_index-data, so scaffolded DS files stay invisible even on a
+// manual tree reload. On change: swap ctx.cfg in place (reloadConfig), let
+// canvasListWatch's set-diff emit `canvas-list-update` for canvases the new
+// groups uncover, and tell shells to refetch /_config.
+// RCA: .ai/logs/rca/issue-ds-scaffold-files-not-in-filetree-stale-config.md
+const CONFIG_RELOAD_DEBOUNCE_MS = 150;
+let configReloadTimer: ReturnType<typeof setTimeout> | null = null;
+ctx.bus.on('fs:json', (rel: string) => {
+  if (rel.replace(/\\/g, '/').replace(/^\/+/, '') !== 'config.json') return;
+  if (configReloadTimer) clearTimeout(configReloadTimer);
+  configReloadTimer = setTimeout(() => {
+    configReloadTimer = null;
+    if (!reloadConfig(ctx)) return;
+    console.log('  config.json changed — reloaded live.');
+    void canvasListWatch.refresh();
+    ctx.bus.emit('config-updated');
+  }, CONFIG_RELOAD_DEBOUNCE_MS);
+});
+
 // Phase 9 Task 4 — bidirectional sync agent. No-op when the project isn't
 // linked to a hub (`.design/config.json` has no `linkedHub` field). Kicked
 // off after fsWatch so the agent's bus subscription receives every fs event.

package/apps/studio/test/acp-bridge.test.ts

@@ -4,6 +4,8 @@
 // (DDR-123 guardrail #1, verified end-to-end — the mock echoes its own env).
 
 import { afterEach, describe, expect, test } from 'bun:test';
+import { mkdtemp, readFile, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
 import { AcpBridge } from '../acp/bridge.ts';
@@ -112,6 +114,136 @@ describe('AcpBridge — round-trip + subscription guardrail', () => {
   }, 15000);
 });
 
+describe('AcpBridge — cross-restart session resume (DDR-125 gap)', () => {
+  let dir: string;
+
+  afterEach(async () => {
+    if (dir) await rm(dir, { recursive: true, force: true });
+  });
+
+  test('a persisted sessionId resumes via loadSession instead of spawning a new session', async () => {
+    process.env.MAUDE_ACP_ADAPTER_ENTRY = FIXTURE;
+    process.env.MAUDE_ACP_RUNTIME = process.execPath;
+    process.env.MAUDE_CLAUDE_BIN = process.execPath;
+    dir = await mkdtemp(join(tmpdir(), 'acp-bridge-test-'));
+    const storePath = join(dir, 'c1.session.json');
+    await Bun.write(storePath, JSON.stringify({ sessionId: 'persisted-session-abc' }));
+
+    const updates: unknown[] = [];
+    const bridge = new AcpBridge({ repoRoot: process.cwd(), onUpdate: (u) => updates.push(u) });
+    try {
+      bridge.setSessionStorePath(storePath);
+      await bridge.prompt('pokracuj', 'c1');
+      // Resumed the persisted id verbatim — never fell through to session/new
+      // (which would have minted a fresh `mock-session-N`).
+      expect(bridge.sessionId).toBe('persisted-session-abc');
+      // The mock's replay notification must NOT reach the UI sink.
+      expect(JSON.stringify(updates)).not.toContain('REPLAYED-HISTORY-SHOULD-NOT-SURFACE');
+    } finally {
+      await bridge.stop();
+    }
+  }, 15000);
+
+  test('a resume that fails (pruned session) falls back to newSession and re-persists the new id', async () => {
+    process.env.MAUDE_ACP_ADAPTER_ENTRY = FIXTURE;
+    process.env.MAUDE_ACP_RUNTIME = process.execPath;
+    process.env.MAUDE_CLAUDE_BIN = process.execPath;
+    dir = await mkdtemp(join(tmpdir(), 'acp-bridge-test-'));
+    const storePath = join(dir, 'c1.session.json');
+    await Bun.write(storePath, JSON.stringify({ sessionId: 'not-found' }));
+
+    const bridge = new AcpBridge({ repoRoot: process.cwd(), onUpdate: () => {} });
+    try {
+      bridge.setSessionStorePath(storePath);
+      await bridge.prompt('pokracuj', 'c1');
+      expect(bridge.sessionId).toBe('mock-session-1'); // fresh session, not the stale id
+      const stored = JSON.parse(await readFile(storePath, 'utf8'));
+      expect(stored.sessionId).toBe('mock-session-1'); // re-persisted so the NEXT restart resumes it
+    } finally {
+      await bridge.stop();
+    }
+  }, 15000);
+
+  test('no prior chat for this sidecar behaves exactly as before — a brand new session is created and persisted', async () => {
+    process.env.MAUDE_ACP_ADAPTER_ENTRY = FIXTURE;
+    process.env.MAUDE_ACP_RUNTIME = process.execPath;
+    process.env.MAUDE_CLAUDE_BIN = process.execPath;
+    dir = await mkdtemp(join(tmpdir(), 'acp-bridge-test-'));
+    const storePath = join(dir, 'brand-new.session.json');
+
+    const bridge = new AcpBridge({ repoRoot: process.cwd(), onUpdate: () => {} });
+    try {
+      bridge.setSessionStorePath(storePath);
+      await bridge.prompt('hi', 'c1');
+      expect(bridge.sessionId).toBe('mock-session-1');
+      const stored = JSON.parse(await readFile(storePath, 'utf8'));
+      expect(stored.sessionId).toBe('mock-session-1');
+    } finally {
+      await bridge.stop();
+    }
+  }, 15000);
+
+  test('no sidecar wired at all (e.g. a warm-up before any prompt) never touches disk and behaves exactly as before', async () => {
+    process.env.MAUDE_ACP_ADAPTER_ENTRY = FIXTURE;
+    process.env.MAUDE_ACP_RUNTIME = process.execPath;
+    process.env.MAUDE_CLAUDE_BIN = process.execPath;
+
+    const bridge = new AcpBridge({ repoRoot: process.cwd(), onUpdate: () => {} });
+    try {
+      // setSessionStorePath is never called — sessionStorePath stays null.
+      await bridge.prompt('hi', 'c1');
+      expect(bridge.sessionId).toBe('mock-session-1');
+    } finally {
+      await bridge.stop();
+    }
+  }, 15000);
+
+  test('a malformed persisted sessionId (not a plausible shape) is rejected — falls back to newSession', async () => {
+    process.env.MAUDE_ACP_ADAPTER_ENTRY = FIXTURE;
+    process.env.MAUDE_ACP_RUNTIME = process.execPath;
+    process.env.MAUDE_CLAUDE_BIN = process.execPath;
+    dir = await mkdtemp(join(tmpdir(), 'acp-bridge-test-'));
+    const storePath = join(dir, 'c1.session.json');
+    // Not a plausible sessionId shape (embedded newline + non-UUID charset) —
+    // must never reach the wire as a `loadSession` sessionId.
+    await Bun.write(storePath, JSON.stringify({ sessionId: 'evil\nsessionId; rm -rf /' }));
+
+    const bridge = new AcpBridge({ repoRoot: process.cwd(), onUpdate: () => {} });
+    try {
+      bridge.setSessionStorePath(storePath);
+      await bridge.prompt('hi', 'c1');
+      expect(bridge.sessionId).toBe('mock-session-1'); // rejected — fresh session instead
+    } finally {
+      await bridge.stop();
+    }
+  }, 15000);
+
+  test('warm and prompt racing for the same chat share one resume attempt (no replaying race)', async () => {
+    process.env.MAUDE_ACP_ADAPTER_ENTRY = FIXTURE;
+    process.env.MAUDE_ACP_RUNTIME = process.execPath;
+    process.env.MAUDE_CLAUDE_BIN = process.execPath;
+    dir = await mkdtemp(join(tmpdir(), 'acp-bridge-test-'));
+    const storePath = join(dir, 'c1.session.json');
+    await Bun.write(storePath, JSON.stringify({ sessionId: 'persisted-race-session' }));
+
+    const updates: unknown[] = [];
+    const bridge = new AcpBridge({ repoRoot: process.cwd(), onUpdate: (u) => updates.push(u) });
+    try {
+      bridge.setSessionStorePath(storePath);
+      // Fire warmUp and prompt concurrently for the same chatId — both call
+      // sessionFor('c1') before either has resolved.
+      const [, result] = await Promise.all([bridge.warmUp('c1'), bridge.prompt('pokracuj', 'c1')]);
+      expect(bridge.sessionId).toBe('persisted-race-session');
+      expect(result.stopReason).toBe('end_turn');
+      // Only ONE resume attempt happened — the mock's replay text never leaked,
+      // and the prompt's own turn still streamed normally.
+      expect(JSON.stringify(updates)).not.toContain('REPLAYED-HISTORY-SHOULD-NOT-SURFACE');
+    } finally {
+      await bridge.stop();
+    }
+  }, 15000);
+});
+
 describe('probeAcpAvailability — not-connected detection', () => {
   test('reports not-available with a Claude-Code reason when the CLI is absent', () => {
     process.env.MAUDE_ACP_ADAPTER_ENTRY = FIXTURE;

package/apps/studio/test/acp-commands.test.ts

@@ -6,6 +6,8 @@
 //     the cached list to a freshly-opened socket.
 
 import { afterEach, describe, expect, test } from 'bun:test';
+import { mkdtemp, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
 import type { ServerWebSocket } from 'bun';
@@ -73,9 +75,11 @@ describe('AcpBridge.warmUp — publishes the command catalogue without a prompt'
 describe('Acp manager — warm frame broadcasts + open replays commands', () => {
   test('a {t:warm} frame yields a {t:commands} frame, replayed to a new socket', async () => {
     useMockAgent();
-    const ctx = {
-      paths: { repoRoot: process.cwd(), designRoot: join(process.cwd(), '.design') },
-    } as unknown as Context;
+    // Isolated tmp designRoot — `warm` now also writes a session-store sidecar
+    // (bridge.ts sessionFor's resume path), so this must not land in a real
+    // repo path.
+    const designRoot = await mkdtemp(join(tmpdir(), 'acp-commands-test-'));
+    const ctx = { paths: { repoRoot: process.cwd(), designRoot } } as unknown as Context;
     const acp = createAcp(ctx);
 
     const a = fakeWs('ws-a');
@@ -103,6 +107,7 @@ describe('Acp manager — warm frame broadcasts + open replays commands', () =>
       acp.onClose(a.ws);
       // give teardown a tick to kill the subprocess
       await new Promise((r) => setTimeout(r, 50));
+      await rm(designRoot, { recursive: true, force: true });
     }
   }, 20000);
 });

package/apps/studio/test/annotations-roundtrip.test.ts

@@ -16,6 +16,7 @@ import {
   type ArrowStroke,
   type ImageStroke,
   type LinkStroke,
+  type MediaRefStroke,
   type RectStroke,
   type StickyStroke,
   type Stroke,
@@ -314,6 +315,52 @@ describe('annotations round-trip / link chip (Phase 23)', () => {
   });
 });
 
+describe('annotations round-trip / media-reference chip (DDR-150 P4)', () => {
+  const ref: MediaRefStroke = {
+    id: 'mr1',
+    tool: 'mediaref',
+    x: 120,
+    y: 90,
+    w: 240,
+    h: 72,
+    src: 'assets/9f8e7d6c.mp4',
+    mediaKind: 'video',
+    title: 'b-roll-sunset.mp4',
+  };
+
+  test('mediaref survives serialize → parse with all fields intact', () => {
+    const [parsed] = svgToStrokes(strokesToSvg([ref])) as MediaRefStroke[];
+    expect(parsed).toEqual(ref);
+  });
+
+  test('mediaref persists data-src (the agent enumerates refs off it), never a <Video>', () => {
+    const svg = strokesToSvg([ref]);
+    expect(svg).toContain('data-src="assets/9f8e7d6c.mp4"');
+    expect(svg).toContain('data-media-kind="video"');
+    expect(svg).not.toContain('<Video');
+    expect(svg).not.toContain('<video');
+  });
+
+  test('mediaref serialize → parse is idempotent', () => {
+    const once = strokesToSvg([{ ...ref, mediaKind: 'audio', src: 'assets/track.mp3' }]);
+    expect(reparse(once)).toBe(once);
+  });
+
+  test('mediaref SVG survives sanitizeAnnotationSvg byte-intact (PUT-path)', () => {
+    const svg = strokesToSvg([ref]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+  });
+
+  test('a data-src with a traversal/scheme is dropped to an inert empty ref', () => {
+    const svg =
+      '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1">' +
+      '<g data-id="mr2" data-tool="mediaref" data-src="../../etc/passwd" data-media-kind="video" data-title="x">' +
+      '<rect x="0" y="0" width="240" height="72" rx="8" ry="8"/></g></svg>';
+    const [parsed] = svgToStrokes(svg) as MediaRefStroke[];
+    expect(parsed?.src).toBe('');
+  });
+});
+
 describe('annotations round-trip / standalone vs anchored text', () => {
   test('standalone text round-trips its world (x, y) and stays unanchored', () => {
     const t: TextStroke = {

package/apps/studio/test/canvas-create-api.test.ts

@@ -122,6 +122,82 @@ describe('/_api/canvas — POST round-trip', () => {
     }
   });
 
+  test('assembles a video-comp (kind: video-comp) from dropped clips (DDR-150 P4 Task 12)', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: 'My Reel',
+          kind: 'video-comp',
+          fps: 30,
+          clips: [
+            { src: 'assets/a.mp4', mediaKind: 'video', durationInFrames: 60 },
+            { src: 'assets/b.mp4', mediaKind: 'video' },
+            { src: 'assets/music.mp3', mediaKind: 'audio' },
+          ],
+        }),
+      });
+      expect(r.status).toBe(201);
+      const j = (await r.json()) as { ok: boolean; rel: string };
+      expect(j.ok).toBe(true);
+      const tsx = readFileSync(join(designRoot, 'ui', 'My Reel.tsx'), 'utf8');
+      expect(tsx).toContain('<VideoComp component={Comp}');
+      expect(tsx).toContain('<OffthreadVideo src="assets/a.mp4" />');
+      expect(tsx).toContain('<Audio src="assets/music.mp3" />');
+      expect(tsx).toContain('name="clip-1"');
+      const m = JSON.parse(readFileSync(join(designRoot, 'ui', 'My Reel.meta.json'), 'utf8'));
+      expect(m.kind).toBe('video-comp');
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('rejects a video-comp with an empty clips[] (400) and a traversal src (400)', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const empty = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Empty', kind: 'video-comp', clips: [] }),
+      });
+      expect(empty.status).toBe(400);
+      const bad = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: 'Bad',
+          kind: 'video-comp',
+          clips: [{ src: '../../etc/passwd', mediaKind: 'video' }],
+        }),
+      });
+      expect(bad.status).toBe(400);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('rejects a cross-origin create (CSRF guard on /_api/canvas — DDR-150 P4)', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Origin: 'http://evil.example' },
+        body: JSON.stringify({ name: 'Forged', kind: 'brief-board' }),
+      });
+      expect(r.status).toBe(403);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
   test('create + delete emit canvas-list-update over the inspector WS (Phase 30)', async () => {
     const { root } = makeSandbox();
     const port = nextPort();

package/apps/studio/test/canvas-edit.test.ts

@@ -123,6 +123,59 @@ describe('canvas-edit / applyEdit', () => {
     expect(out.source).toContain('<div style={{ padding: 14 }}>x</div>');
   });
 
+  test('retime: bumps a referenced const so a derived total moves in lock-step (DDR-148)', async () => {
+    const { applyRetimeSequence } = await import('../canvas-edit.ts');
+    const src = [
+      'const A = 66;',
+      'const B = 62;',
+      'const XF = 16;',
+      'const TOTAL = A + B - XF;',
+      'function Movie(){ return (<TransitionSeries>',
+      '  <TransitionSeries.Sequence durationInFrames={A}><Intro/></TransitionSeries.Sequence>',
+      '  <TransitionSeries.Transition timing={linearTiming({ durationInFrames: XF })} />',
+      '  <TransitionSeries.Sequence durationInFrames={B}><Payoff/></TransitionSeries.Sequence>',
+      '</TransitionSeries>); }',
+    ].join('\n');
+    const r0 = applyRetimeSequence(CANVAS, src, 0, { durationInFrames: 80 });
+    expect(r0.source).toContain('const A = 80'); // const edited, not the literal
+    expect(r0.source).toContain('const TOTAL = A + B - XF'); // derived total intact → auto-updates
+    const r1 = applyRetimeSequence(CANVAS, r0.source, 1, { durationInFrames: 90 });
+    expect(r1.source).toContain('const B = 90');
+  });
+
+  test('retime: edits a literal in place + supports from', async () => {
+    const { applyRetimeSequence } = await import('../canvas-edit.ts');
+    const src =
+      'function C(){ return <Sequence from={10} durationInFrames={40}><Foo/></Sequence>; }';
+    const r = applyRetimeSequence(CANVAS, src, 0, { from: 20, durationInFrames: 55 });
+    expect(r.source).toContain('from={20}');
+    expect(r.source).toContain('durationInFrames={55}');
+  });
+
+  test('retime: an out-of-range sequence index throws', async () => {
+    const { applyRetimeSequence, CanvasEditError } = await import('../canvas-edit.ts');
+    const src = 'function C(){ return <Sequence durationInFrames={40}><Foo/></Sequence>; }';
+    expect(() => applyRetimeSequence(CANVAS, src, 5, { durationInFrames: 10 })).toThrow(
+      CanvasEditError
+    );
+  });
+
+  test('inserts into a style object with a TRAILING comma without a double comma (DDR-148 #4)', () => {
+    // A frame-driven inline style commonly ends the last property with a
+    // trailing comma. Appending must NOT produce `opacity: o, , color: …`
+    // (a syntax error that made the canvas render the OLD source on replay).
+    const src =
+      'function Demo() {\n  const o = 1;\n  return <div style={{ fontSize: 12, opacity: o, }}>x</div>;\n}';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', "'#d48917'");
+    expect(out.source).toContain("color: '#d48917'");
+    expect(out.source).not.toMatch(/,\s*,/); // no double comma
+    // And it must still parse.
+    const reparse = applyEdit(CANVAS, out.source, id, 'style.fontSize', '13');
+    expect(reparse.source).toContain('fontSize: 13');
+  });
+
   test('throws CanvasEditError when id is not found', () => {
     const src = 'function Demo() { return <div>x</div>; }';
     expect(() => applyEdit(CANVAS, src, 'deadbeef', 'className', 'x')).toThrow(CanvasEditError);
@@ -290,6 +343,30 @@ describe('canvas-edit / applyTextEdit', () => {
     const src = `function Demo() { return <button>Save</button>; }`;
     expect(() => applyTextEdit(CANVAS, src, 'deadbeef', 'x')).toThrow(CanvasEditError);
   });
+
+  // DDR-150 P1 — widen the editable set to a single `{'string literal'}` child.
+  test('edits a single string-literal expression child', () => {
+    const src = `function Demo() { return <h1>{'Old Title'}</h1>; }`;
+    const id = idsOf(src).h1 as string;
+    const out = applyTextEdit(CANVAS, src, id, 'New Title');
+    expect(out.source).toBe(`function Demo() { return <h1>{"New Title"}</h1>; }`);
+  });
+
+  test('string-literal rewrite is inert — quotes / braces / markup cannot escape the JS string', () => {
+    const src = `function Demo() { return <h1>{"x"}</h1>; }`;
+    const id = idsOf(src).h1 as string;
+    const out = applyTextEdit(CANVAS, src, id, 'say "hi" {expr} <b>');
+    // JSON.stringify escapes the double-quotes; {expr} / <b> stay INSIDE the JS
+    // string literal, so they never become a JSX expression or markup.
+    expect(out.source).toContain('say \\"hi\\"');
+    expect(() => transpileCanvasSource(CANVAS, out.source)).not.toThrow();
+  });
+
+  test('still refuses a dynamic {identifier} child (routes to /design:edit)', () => {
+    const src = 'function Demo() { const title = "x"; return <h1>{title}</h1>; }';
+    const id = idsOf(src).h1 as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
 });
 
 // Phase 12 (DDR-103) — the `style.<prop>` write path the CSS knobs ride
@@ -316,4 +393,17 @@ describe('canvas-edit / applyEdit style.<prop> (CSS-knob path)', () => {
     const out = applyEdit(CANVAS, src, id, 'style.padding', '"var(--space-3)"');
     expect(out.source).toContain('style={{ padding: "var(--space-3)" }}');
   });
+
+  // DDR-150 P1 — the exact video-comp shape: a var-valued prop ending in a
+  // trailing comma. Unconditionally prepending ", " produced `opacity: o, ,
+  // color` — a syntax error that left the Player rendering stale source (the
+  // "my CSS edit resets on replay" bug). Guarded by editStyleProp's between-scan.
+  test('appends onto a frame-driven inline style ending in a trailing comma (no double comma)', () => {
+    const src = `function Demo() { const o = 1; return <div style={{ opacity: o, }}>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', '"var(--fg-0)"');
+    expect(out.source).not.toContain(', ,');
+    expect(out.source).toContain('color: "var(--fg-0)"');
+    expect(() => transpileCanvasSource(CANVAS, out.source)).not.toThrow();
+  });
 });

package/apps/studio/test/canvas-list-watch.test.ts

@@ -320,3 +320,52 @@ describe('canvas-list-watch / real fs-watch end-to-end', () => {
     }
   }, 10_000);
 });
+
+describe('canvas-list-watch / config hot-reload (stale-config RCA)', () => {
+  // /design:setup-ds adds the `system` group to config.json mid-session;
+  // reloadConfig (context.ts) swaps ctx.cfg in place. The watcher must read
+  // groups at USE time — a boot-captured groupPaths list would keep gating
+  // the new group's files out forever.
+  // RCA: .ai/logs/rca/issue-ds-scaffold-files-not-in-filetree-stale-config.md
+  test('a group added by an in-place cfg swap uncovers its canvases', async () => {
+    const { root, designRoot } = sandbox();
+    mkdirSync(join(designRoot, 'system', 'kanban-glass', 'preview'), { recursive: true });
+    const ctx = mkCtx(designRoot);
+    // Pre-scaffold fixture shape: UI-only group.
+    ctx.cfg.canvasGroups = [{ label: 'UI', path: 'ui' }];
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      // Scaffold writes specimens while the group is still absent — no emit.
+      writeFileSync(join(designRoot, 'system', 'kanban-glass', 'preview', 'colors.tsx'), TSX);
+      ctx.bus.emit('fs:any', 'system/kanban-glass/preview/colors.tsx');
+      await new Promise((r) => setTimeout(r, 10 + 40));
+      await w.refresh();
+      expect(got).toHaveLength(0);
+
+      // Hot reload: new array on the SAME cfg object (what reloadConfig does),
+      // then the server.ts subscriber calls refresh() — the diff must surface
+      // the pre-existing specimen.
+      ctx.cfg.canvasGroups = [
+        { label: 'Design system', path: 'system' },
+        { label: 'UI', path: 'ui' },
+      ];
+      await w.refresh();
+      expect(got).toHaveLength(1);
+      expect(got[0]?.action).toBe('added');
+      expect(got[0]?.rel).toBe('system/kanban-glass/preview/colors.tsx');
+
+      // And FUTURE writes under the new group pass the live fs:any gate.
+      got.length = 0;
+      writeFileSync(join(designRoot, 'system', 'kanban-glass', 'preview', 'type.tsx'), TSX);
+      ctx.bus.emit('fs:any', 'system/kanban-glass/preview/type.tsx');
+      await new Promise((r) => setTimeout(r, 10 + 40));
+      await w.refresh();
+      expect(got.some((m) => m.action === 'added' && m.rel?.endsWith('type.tsx'))).toBe(true);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+});

package/apps/studio/test/canvas-media-drop.test.ts

@@ -13,6 +13,7 @@ import {
   isHttpUrl,
   linkDomain,
   type MediaPayload,
+  mediaSnippet,
   normalizeUrl,
   prettifyUrl,
 } from '../use-canvas-media-drop.tsx';
@@ -116,10 +117,38 @@ describe('use-canvas-media-drop / classifyMediaPayload (dispatch matrix)', () =>
     expect(intent?.kind).toBe('image');
   });
 
-  test('a non-image file is ignored', () => {
+  test('a non-image, non-media file is ignored', () => {
     expect(classifyMediaPayload({ ...empty, files: [fakeFile('application/pdf')] })).toBeNull();
   });
 
+  test('a video file → a media intent (DDR-148)', () => {
+    const intent = classifyMediaPayload({ ...empty, files: [fakeFile('video/mp4')] });
+    expect(intent).toEqual({ kind: 'media', file: expect.anything(), mediaKind: 'video' });
+  });
+
+  test('an audio file → a media intent', () => {
+    const intent = classifyMediaPayload({ ...empty, files: [fakeFile('audio/mpeg')] });
+    expect(intent?.kind).toBe('media');
+    expect(intent && intent.kind === 'media' && intent.mediaKind).toBe('audio');
+  });
+
+  test('an image still wins over a co-dropped video', () => {
+    const intent = classifyMediaPayload({
+      ...empty,
+      files: [fakeFile('image/png'), fakeFile('video/mp4')],
+    });
+    expect(intent?.kind).toBe('image');
+  });
+
+  test('mediaSnippet emits the right Remotion element', () => {
+    expect(mediaSnippet('video', 'assets/ab12cd34.mp4')).toBe(
+      '<Video src="assets/ab12cd34.mp4" />'
+    );
+    expect(mediaSnippet('audio', 'assets/ff00aa11.mp3')).toBe(
+      '<Audio src="assets/ff00aa11.mp3" />'
+    );
+  });
+
   test('a URL drop becomes a link with the anchor text as the title', () => {
     const intent = classifyMediaPayload({
       ...empty,