@1agh/maude 0.51.0 → 0.52.0

package/apps/studio/client/app.jsx

@@ -78,6 +78,7 @@ import { PhotoKnobs } from './photo-knobs.jsx';
 import {
   appIsFirstRun,
   isNativeApp,
+  onMenuReportBug,
   onUpdateReady,
   pickMediaFile,
   pickMediaFiles,
@@ -88,6 +89,7 @@ import { TourOverlay } from './tour/overlay.jsx';
 import { QUICK_SETUP_TOUR } from './tour/quick-setup-tour.js';
 import { USAGE_TOUR } from './tour/usage-tour.js';
 import { ExportBadge, ExportPanel, ExportToast, useExportCenter } from './export-center.jsx';
+import { ReportBugDialog } from './report-bug.jsx';
 import { useWhatsNew, WhatsNewPanel, WhatsNewToast } from './whats-new.jsx';
 
 const USAGE_TOUR_STORE = 'mdcc-usage-tour-seen';
@@ -1464,6 +1466,7 @@ function ExportDialog({
   initialScope,
   activePath,
   hasComps = false,
+  comps = [],
   activeArtboardId = null,
   selection = null,
   onClose,
@@ -1495,6 +1498,19 @@ function ExportDialog({
   const [recent, setRecent] = useState([]);
   const card = EXPORT_CARDS.find((c) => c.id === sel) || EXPORT_CARDS[0];
   const validScopes = card.handoff ? [] : EXPORT_VALID_SCOPES[card.format] || ['artboard'];
+  // Long-comp tiers (feature-enhanced-video-editing Task 1). 900 frames is the
+  // safe tier (the frame-step fallback runs ~2.5 s/frame and 1080p captures
+  // have died from memory pressure above it); 3600 is the server's default cap
+  // (exporters/video.ts DEFAULT_MAX_FRAMES). Above the cap the dialog raises it
+  // EXPLICITLY for this export, with the notice below as the informed consent —
+  // never a silent truncation, never a surprise refusal.
+  const EXPORT_SAFE_FRAMES = 900;
+  const EXPORT_DEFAULT_CAP = 3600;
+  const exportComp = comps[0] || null;
+  const exportCompFrames = exportComp?.durationInFrames || 0;
+  const exportCompFps = exportComp?.fps || 30;
+  const exportIsHeavy = card.temporal && exportCompFrames > EXPORT_SAFE_FRAMES;
+  const exportOverCap = card.temporal && exportCompFrames > EXPORT_DEFAULT_CAP;
 
   // Keep the scope valid for the chosen format (pptx/zip etc. only allow a
   // subset) — mirrors VALID_SCOPES_PER_FORMAT in the in-canvas dialog.
@@ -1547,6 +1563,8 @@ function ExportDialog({
     // Export-with-audio (DDR-148 addendum) — mp4/webm only; gif is silent by
     // format, so the checkbox never renders for it (see hasAudioToggle below).
     if (card.format === 'mp4' || card.format === 'webm') options.audio = audio;
+    // Long-comp cap raise — the visible notice above the button is the consent.
+    if (exportOverCap) options.maxFrames = exportCompFrames;
     // feature-2-print-artboards T5/T6 — always sent on a PDF export; the
     // adapter no-ops includeBleed/marks for a non-print artboard (T5).
     if (card.format === 'pdf') {
@@ -1696,6 +1714,21 @@ function ExportDialog({
               {scale}× the artboard's native resolution (e.g. 960×540 → {960 * scale}×{540 * scale}).
             </div>
           )}
+          {exportIsHeavy && (
+            <div
+              className="st-mono st-export-long-notice"
+              data-testid="export-long-comp-notice"
+              style={{ fontSize: 11, color: 'var(--accent)', lineHeight: 1.5 }}
+            >
+              ⚠ Long comp: {exportCompFrames} frames (≈
+              {Math.round(exportCompFrames / exportCompFps)}s).
+              {exportOverCap
+                ? ` Exceeds the default ${EXPORT_DEFAULT_CAP}-frame export cap — exporting raises the cap to the full length for this run.`
+                : ''}{' '}
+              If the fast renderer falls back to frame-by-frame capture this can take several
+              minutes; 2× resolution (≈720–1080p) is recommended for memory headroom.
+            </div>
+          )}
           {!card.handoff && card.format === 'pdf' && (
             <>
               <div className="st-dialog-row">
@@ -3408,6 +3441,7 @@ function HelpDropdown({ onAction, onClose }) {
       items={[
         { id: 'shortcuts', label: 'Keyboard shortcuts', shortcut: '?' },
         { id: 'help', label: 'Help · commands & flows', shortcut: 'F1' },
+        { id: 'report-bug', label: 'Report a bug…' },
         { sep: true },
         { id: 'tour', label: 'Take the tour' },
         { id: 'watch-intro', label: 'Watch the intro' },
@@ -3552,6 +3586,7 @@ function Menubar({
   onToggleShowHidden,
   onOpenHelp,
   onOpenShortcuts,
+  onReportBug,
   onStartTour,
   onStartCollabTour,
   annotationsVisible,
@@ -3878,6 +3913,7 @@ function Menubar({
           onAction={(id) => {
             if (id === 'shortcuts') onOpenShortcuts?.();
             else if (id === 'help') onOpenHelp?.();
+            else if (id === 'report-bug') onReportBug?.();
             else if (id === 'tour') onStartTour?.();
             else if (id === 'collab-tour') onStartCollabTour?.();
             else if (id === 'quick-setup') onOpenQuickSetup?.();
@@ -9158,6 +9194,17 @@ function App() {
   const [showHidden, setShowHidden] = useState(() => readBoolStore(SHOW_HIDDEN_STORE, false));
   const [sectionsExpanded, setSectionsExpanded] = useState(() => readJsonStore(SECTIONS_STORE, {}));
   const [helpOpen, setHelpOpen] = useState(false);
+  const [reportBugOpen, setReportBugOpen] = useState(false);
+
+  // Native Help ▸ Report a Bug… (menu.rs emits `menu://report-bug`) — same
+  // lane as IdentityBar's File ▸ New Project… subscription.
+  useEffect(() => {
+    if (!isNativeApp()) return;
+    const p = onMenuReportBug(() => setReportBugOpen(true));
+    return () => {
+      p.then((un) => un()).catch(() => {});
+    };
+  }, []);
   const [readinessOpen, setReadinessOpen] = useState(false);
   const [introOpen, setIntroOpen] = useState(false);
   const [quickSetupOpen, setQuickSetupOpen] = useState(false);
@@ -9212,6 +9259,8 @@ function App() {
   // DDR-148 — parsed sequence/keyframe rows for the Timeline (from raw .tsx).
   const [timelineSequences, setTimelineSequences] = useState([]);
   const [timelineAudio, setTimelineAudio] = useState([]);
+  // Task 5 — seam transitions between series beats ({ afterIndex, dur }).
+  const [timelineTransitions, setTimelineTransitions] = useState([]);
   const [timelineTotal, setTimelineTotal] = useState(0);
   // On a multi-comp canvas the Timeline drives ONE comp (the parser scopes to it
   // + reports its total). Match that total back to the announced comp id so the
@@ -9244,6 +9293,21 @@ function App() {
   useEffect(() => {
     timelineArtboardIdRef.current = timelineArtboardId;
   }, [timelineArtboardId]);
+  // feature-enhanced-video-editing (Task 3) — the timeline's single-select model.
+  // Holds the selected clip's stableId (NOT a row index — DDR-150), so the
+  // selection survives comp-clips refetches, reorders, and external file edits.
+  const [timelineSelectedClip, setTimelineSelectedClip] = useState(null);
+  // Task 8 — bumped after a concurrent-edit refusal so the source + comp-clips
+  // effects refetch ("Timeline changed — reloaded, try again").
+  const [timelineRefresh, setTimelineRefresh] = useState(0);
+  const timelineOpFailed = useCallback((prefix, msg) => {
+    if (/concurrent edit|changed since it was read/i.test(msg || '')) {
+      shellToast('Timeline changed — reloaded, try again.');
+      setTimelineRefresh((n) => n + 1);
+    } else {
+      shellToast(`${prefix}: ${msg || 'failed'}`);
+    }
+  }, []);
   // Phase 31 (DDR-123) — the native ACP chat sidepanel (right dock, native-only).
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [assistantBusy, setAssistantBusy] = useState(false);
@@ -9724,13 +9788,181 @@ function App() {
       })
       .catch(() => shellToast(`${dir === 'undo' ? 'Undo' : 'Redo'} failed: network error`));
   }, []);
+  // Task 3 — resolve a `{ stableId, index }` clipRef against a fresh comp-clips
+  // response. stableId wins (multi-comp-safe, survives reorder); the row index
+  // stays as the legacy fallback for rows the enumerator couldn't identify.
+  const resolveClipRef = useCallback((cc, clipRef) => {
+    const seqs =
+      cc?.ok && Array.isArray(cc.clips) ? cc.clips.filter((c) => c.kind === 'sequence') : [];
+    if (clipRef == null) return null;
+    if (typeof clipRef === 'object') {
+      return (
+        (clipRef.stableId ? seqs.find((c) => c.stableId === clipRef.stableId) : null) ||
+        (Number.isInteger(clipRef.index) ? seqs[clipRef.index] : null) ||
+        null
+      );
+    }
+    if (typeof clipRef === 'string') return seqs.find((c) => c.stableId === clipRef) || null;
+    return seqs[clipRef] || null;
+  }, []);
+
+  // Task 3 — remove a clip (with server-side ripple for series beats). Shared by
+  // the panel's ×/context-menu and the Delete/Backspace key on the selection.
+  const timelineRemoveClip = useCallback(
+    (clipRef) => {
+      const canvas = tlKeyRef.current.canvas;
+      if (!canvas || canvas === SYSTEM_TAB) return;
+      const artboardId = timelineArtboardIdRef.current || undefined;
+      const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(canvas)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+      fetch(ccUrl)
+        .then((r) => r.json().catch(() => ({})))
+        .then((cc) => {
+          const clip = resolveClipRef(cc, clipRef);
+          if (!clip?.stableId) return null;
+          return fetch('/_api/remove-sequence', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({
+              canvas,
+              artboardId,
+              stableId: clip.stableId,
+              contentHash: clip.contentHash,
+            }),
+          });
+        })
+        .then((r) => (r ? r.json() : null))
+        .then((j) => {
+          if (j && !j.ok) {
+            console.warn('[remove-clip]', j.error || 'failed');
+            timelineOpFailed('Remove refused', j.error);
+          } else if (j?.ok) {
+            shellToast('Clip removed.', true);
+            if (j.seq != null) pushTlUndo(canvas, j.seq, 'remove clip');
+            setTimelineSelectedClip(null);
+          }
+        })
+        .catch(() => shellToast('Remove failed: network error'));
+    },
+    [resolveClipRef, pushTlUndo]
+  );
+  // Phase 2/3 — the parametric verb pipe (speed/trim-in/audio/detach-audio/
+  // framing/grade/transition/split/insert-transition/remove-transition), shared
+  // by the inspector popover, context menu, seam chips, and keyboard (⌘B).
+  const timelineClipVerb = useCallback(
+    (clipRef, verb, params) => {
+      const canvas = tlKeyRef.current.canvas;
+      if (!canvas || canvas === SYSTEM_TAB) return;
+      const artboardId = timelineArtboardIdRef.current || undefined;
+      const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(canvas)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+      fetch(ccUrl)
+        .then((r) => r.json().catch(() => ({})))
+        .then((cc) => {
+          const all = cc?.ok && Array.isArray(cc.clips) ? cc.clips : [];
+          const clip = clipRef?.transition
+            ? all.find((c) => c.kind === 'transition' && c.stableId === clipRef.stableId) || null
+            : resolveClipRef(cc, clipRef);
+          if (!clip?.stableId) return null;
+          return fetch('/_api/clip-edit', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({
+              canvas,
+              artboardId,
+              stableId: clip.stableId,
+              contentHash: clip.contentHash,
+              verb,
+              ...params,
+            }),
+          });
+        })
+        .then((r) => (r ? r.json() : null))
+        .then((j) => {
+          if (j && !j.ok) {
+            console.warn('[clip-edit]', verb, j.error || 'failed');
+            timelineOpFailed(`${verb} refused`, j.error);
+          } else if (j?.ok) {
+            const labels = {
+              speed: 'set speed',
+              'trim-in': 'trim in-point',
+              audio: 'clip audio',
+              'detach-audio': 'detach audio',
+              framing: 'crop clip',
+              grade: 'grade clip',
+              transition: 'edit transition',
+              split: 'split clip',
+              'insert-transition': 'add transition',
+              'remove-transition': 'remove transition',
+              'set-text': 'edit text',
+              'to-overlay': 'move to overlay layer',
+              'to-storyline': 'move to storyline',
+              'layer-order': 'reorder layers',
+            };
+            shellToast(`Applied: ${labels[verb] || verb}.`, true);
+            if (j.seq != null) pushTlUndo(canvas, j.seq, labels[verb] || verb);
+          }
+        })
+        .catch(() => shellToast(`${verb} failed: network error`));
+    },
+    [resolveClipRef, pushTlUndo, timelineOpFailed]
+  );
+  // Tauri's WKWebView does NOT implement window.prompt() (returns null
+  // synchronously — the "click does nothing" desktop bug), so every text ask
+  // goes through this promise-based shell modal instead.
+  const [shellPromptState, setShellPromptState] = useState(null); // { title, value, resolve }
+  const askText = useCallback(
+    (title, initial = '') =>
+      new Promise((resolve) => {
+        setShellPromptState({ title, value: initial, resolve });
+      }),
+    []
+  );
+  const settleShellPrompt = useCallback((value) => {
+    setShellPromptState((s) => {
+      s?.resolve?.(value);
+      return null;
+    });
+  }, []);
+
+  // Task 23 — timeline comments ride the EXISTING comment system (same WS
+  // channel + `_comments/` store), with a `timeline` anchor:
+  // { clipStableId, frameOffset } (survives reorder/ripple) or { frame }.
+  const timelineAddComment = useCallback((anchor, text) => {
+    const canvas = tlKeyRef.current.canvas;
+    if (!canvas || canvas === SYSTEM_TAB || !text || !String(text).trim()) return;
+    wsSend({
+      type: 'comments-add',
+      payload: {
+        file: canvas,
+        text: String(text).trim(),
+        selector: '',
+        dom_path: [],
+        tag: '',
+        classes: '',
+        bounds: null,
+        html_excerpt: '',
+        timeline: anchor,
+      },
+    });
+    shellToast('Comment added.', true);
+  }, []);
+  tlKeyRef.current.selected = timelineSelectedClip;
+  tlKeyRef.current.setSelected = setTimelineSelectedClip;
+  tlKeyRef.current.removeClip = timelineRemoveClip;
+  tlKeyRef.current.clipVerb = timelineClipVerb;
+  tlKeyRef.current.addComment = timelineAddComment;
+  tlKeyRef.current.askText = askText;
+
   useEffect(() => {
     const onKey = (e) => {
       const s = tlKeyRef.current;
       if (!s.open || !s.comps?.length) return;
       const t = e.target;
       const tag = t?.tagName;
-      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || t?.isContentEditable) return;
+      // Range sliders (zoom / volume) keep focus after a drag — Space must
+      // still play/pause (the "spacebar stopped working" dogfood bug). Text
+      // inputs stay exempt.
+      if (tag === 'INPUT' && t?.type !== 'range') return;
+      if (tag === 'TEXTAREA' || tag === 'SELECT' || t?.isContentEditable) return;
       const fps = s.comps[0]?.fps || 30;
       const total = Math.max(1, s.total);
       const doSeek = (f) => {
@@ -9758,6 +9990,39 @@ function App() {
         tlUndoRedo(e.shiftKey ? 'redo' : 'undo');
         return;
       }
+      // Task 3 — the select → act grammar: Esc deselects, Delete/Backspace
+      // removes the selection (with ripple on the server for series beats).
+      if (e.key === 'Escape') {
+        if (s.selected != null) {
+          e.preventDefault();
+          s.setSelected?.(null);
+        }
+        return;
+      }
+      if ((e.key === 'Delete' || e.key === 'Backspace') && s.selected != null) {
+        e.preventDefault();
+        s.removeClip?.({ stableId: s.selected });
+        return;
+      }
+      // Task 23 + dogfood 2026-07-30 — `C` ARMS the panel's comment tool
+      // (click-to-place, like the artboard's C); the panel's own window
+      // keydown owns the toggle, so the shell must NOT double-handle it.
+      // Task 16 — ⌘B splits the selection at the playhead; with nothing
+      // selected, the clip under the playhead (iMovie behavior).
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'b' || e.key === 'B')) {
+        e.preventDefault();
+        let ref = s.selected != null ? { stableId: s.selected } : null;
+        if (!ref) {
+          const rows = s.sequences || [];
+          const under =
+            rows.find((r2) => r2.series && s.frame >= r2.from && s.frame < r2.from + r2.duration) ||
+            rows.find((r2) => s.frame >= r2.from && s.frame < r2.from + r2.duration);
+          if (under?.stableId) ref = { stableId: under.stableId };
+        }
+        if (ref) s.clipVerb?.(ref, 'split', { atFrame: s.frame });
+        else shellToast('Nothing under the playhead to split.');
+        return;
+      }
       if (e.key === ' ' || e.code === 'Space') {
         e.preventDefault();
         if (s.playing) {
@@ -9805,6 +10070,10 @@ function App() {
     setActiveComps([]);
     setTimelineFrame(0);
     setTimelinePlaying(false);
+    setTimelineSelectedClip(null);
+    // A stale artboard id from the PREVIOUS canvas would mis-scope the first
+    // ops on the next one until its parse lands — clear it with the rest.
+    setTimelineArtboardId(null);
     const t = setTimeout(() => postToActiveCanvas({ dgn: 'timeline-request-comps' }), 60);
     return () => clearTimeout(t);
   }, [activePath, postToActiveCanvas]);
@@ -9816,6 +10085,9 @@ function App() {
   // wrapper components + array-fed src the regex parser can't see), merged into
   // the rows for the kind badge + replace addressing.
   const [timelineClipMedia, setTimelineClipMedia] = useState([]);
+  // Phase 2 — the enumerator's transitions (stableId + contentHash), in seam
+  // order, for the ⧓ chip → Transition tab flow.
+  const [timelineTransClips, setTimelineTransClips] = useState([]);
   useEffect(() => {
     if (!timelineOpen || activeComps.length === 0 || !activePath || activePath === SYSTEM_TAB) {
       setTimelineSource('');
@@ -9832,7 +10104,7 @@ function App() {
     return () => {
       alive = false;
     };
-  }, [timelineOpen, activeComps, activePath]);
+  }, [timelineOpen, activeComps, activePath, timelineRefresh]);
 
   // Authoritative per-clip media (comp-clips) — a SEPARATE effect keyed on the
   // RESOLVED artboard id, which the parser only knows AFTER timelineSource
@@ -9843,6 +10115,7 @@ function App() {
   useEffect(() => {
     if (!timelineOpen || !activePath || activePath === SYSTEM_TAB || !timelineSource) {
       setTimelineClipMedia([]);
+      setTimelineTransClips([]);
       return undefined;
     }
     let alive = true;
@@ -9852,15 +10125,15 @@ function App() {
       .then((r) => (r.ok ? r.json() : null))
       .then((cc) => {
         if (!alive) return;
-        const seqs =
-          cc?.ok && Array.isArray(cc.clips) ? cc.clips.filter((c) => c.kind === 'sequence') : [];
-        setTimelineClipMedia(seqs);
+        const all = cc?.ok && Array.isArray(cc.clips) ? cc.clips : [];
+        setTimelineClipMedia(all.filter((c) => c.kind === 'sequence'));
+        setTimelineTransClips(all.filter((c) => c.kind === 'transition'));
       })
       .catch(() => {});
     return () => {
       alive = false;
     };
-  }, [timelineOpen, activePath, timelineSource, timelineArtboardId]);
+  }, [timelineOpen, activePath, timelineSource, timelineArtboardId, timelineRefresh]);
 
   // Parse (cheap) — re-runs on source change AND on selection change, so the
   // Timeline REDRAWS to whichever artboard the user just selected/moved to.
@@ -9868,6 +10141,7 @@ function App() {
     if (!timelineSource) {
       setTimelineSequences([]);
       setTimelineAudio([]);
+      setTimelineTransitions([]);
       setTimelineTotal(0);
       return;
     }
@@ -9883,6 +10157,14 @@ function App() {
       if (!cm) return s;
       return {
         ...s,
+        // Task 3 — the enumerator's durable identity rides on every row so the
+        // panel can select + address ops by stableId, never by row index.
+        stableId: cm.stableId,
+        contentHash: cm.contentHash,
+        // Phase 2 — authoritative parametric props for the clip inspector.
+        mediaProps: cm.mediaProps ?? null,
+        // Task 21 — AI placeholder slate (✨ row + Generate flow).
+        placeholder: cm.placeholder ?? null,
         mediaTag: cm.mediaTag ?? s.mediaTag,
         mediaSrc: cm.mediaSrc ?? s.mediaSrc,
         // Replaceable when the enumerator found an addressable media target:
@@ -9895,6 +10177,7 @@ function App() {
     });
     setTimelineSequences(merged);
     setTimelineAudio(parsed.audio || []);
+    setTimelineTransitions(parsed.transitions || []);
     setTimelineTotal(parsed.total);
   }, [timelineSource, timelineClipMedia, selected, activeComps, canvasActiveArtboard]);
 
@@ -10690,6 +10973,41 @@ function App() {
     [loadTree, openTab]
   );
 
+  // Task 20 (enhanced-video-editing) — greenfield "New video": an EMPTY
+  // video-comp canvas (drop-first cut building). Dimensions/fps are
+  // user-settable (presets 1920×1080 / 1080×1920 / 1080×1080 or custom WxH).
+  const createVideo = useCallback(async () => {
+    const name = await askText('New video name');
+    if (!name) return;
+    const dims =
+      (await askText(
+        'Size — 1920x1080 (landscape), 1080x1920 (portrait), 1080x1080 (square), or custom WxH',
+        '1920x1080'
+      )) || '1920x1080';
+    const m = dims.toLowerCase().match(/(\d{2,5})\s*[x×]\s*(\d{2,5})/);
+    const width = m ? Number(m[1]) : 1920;
+    const height = m ? Number(m[2]) : 1080;
+    const fps = Math.max(1, Math.min(60, Number(await askText('Frames per second', '30')) || 30));
+    try {
+      const r = await fetch('/_api/canvas', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, kind: 'video-comp', clips: [], fps, width, height }),
+      });
+      const j = await r.json().catch(() => ({}));
+      if (!r.ok || !j.ok) {
+        shellToast(`New video failed: ${j.error || `error ${r.status}`}`);
+        return;
+      }
+      await loadTree();
+      openTab(j.file);
+      setTimelineOpen(true);
+      shellToast('New video created — drop clips on the timeline to start the cut.', true);
+    } catch (e) {
+      shellToast(`New video failed: ${e instanceof Error ? e.message : 'network error'}`);
+    }
+  }, [loadTree, openTab, askText]);
+
   // DDR-150 P4 Task 12 — one-click "udělej z toho video". Reads the ACTIVE
   // canvas's annotation sidecar (main-origin — no cross-origin round-trip),
   // gathers every dropped media-reference chip's src in document order, and POSTs
@@ -13200,6 +13518,13 @@ function App() {
           );
         },
       },
+      {
+        id: 'new-video',
+        group: 'Canvas',
+        label: 'New video…',
+        icon: 'plus',
+        run: () => createVideo(),
+      },
       {
         id: 'export',
         group: 'Canvas',
@@ -13309,8 +13634,15 @@ function App() {
         kbd: 'F1',
         run: () => setHelpOpen(true),
       },
+      {
+        id: 'report-bug',
+        group: 'Help',
+        label: 'Report a bug…',
+        icon: 'help',
+        run: () => setReportBugOpen(true),
+      },
     ],
-    [openSystem, toggleTheme, reloadActive, whatsNew]
+    [openSystem, toggleTheme, reloadActive, whatsNew, createVideo]
   );
 
   // feature-configurable-panel-docking — resolve, for each slot, the panels
@@ -13522,6 +13854,7 @@ function App() {
           onToggleShowHidden={() => setShowHidden((v) => !v)}
           onOpenHelp={() => setHelpOpen(true)}
           onOpenShortcuts={() => setShortcutsOpen(true)}
+          onReportBug={() => setReportBugOpen(true)}
           onStartTour={() => startTour(USAGE_TOUR)}
           onStartCollabTour={() => startTour(COLLAB_TOUR)}
           annotationsVisible={annotationsVisible}
@@ -13715,6 +14048,7 @@ function App() {
             comps={activeComps}
             sequences={timelineSequences}
             audio={timelineAudio}
+            transitions={timelineTransitions}
             total={timelineTotal}
             frame={timelineFrame}
             playing={timelinePlaying}
@@ -13761,24 +14095,20 @@ function App() {
               }
               postToActiveCanvas({ dgn: 'timeline-volume', volume: v, id: timelineCompId });
             }}
-            onRetime={(index, patch) => {
+            onRetime={(clipRef, patch) => {
               if (!activePath || activePath === SYSTEM_TAB) return;
-              // DDR-150 P2 — address the clip by its comp-scoped stableId (from
-              // /_api/comp-clips), NOT the raw row index, so a retime on a
-              // multi-comp canvas can never mis-hit a clip in another comp. The
-              // row index counts sequence rows only, so map it to the index-th
-              // sequence clip (transitions filtered). Fall back to the legacy
-              // index if the enumerator is unavailable.
+              // DDR-150 P2 / Task 3 — the panel hands a { stableId, index }
+              // clipRef; stableId addressing wins (multi-comp-safe), the row
+              // index stays as the legacy fallback when the enumerator is
+              // unavailable.
               const artboardId = timelineArtboardId || undefined;
               const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
               fetch(ccUrl)
                 .then((r) => r.json().catch(() => ({})))
                 .then((cc) => {
-                  const seqs =
-                    cc?.ok && Array.isArray(cc.clips)
-                      ? cc.clips.filter((c) => c.kind === 'sequence')
-                      : [];
-                  const clip = seqs[index] || null;
+                  const clip = resolveClipRef(cc, clipRef);
+                  const legacyIndex =
+                    clipRef && typeof clipRef === 'object' ? clipRef.index : clipRef;
                   const body = clip?.stableId
                     ? {
                         canvas: activePath,
@@ -13787,7 +14117,7 @@ function App() {
                         contentHash: clip.contentHash,
                         ...patch,
                       }
-                    : { canvas: activePath, index, ...patch };
+                    : { canvas: activePath, index: legacyIndex, ...patch };
                   return fetch('/_api/retime-sequence', {
                     method: 'POST',
                     headers: { 'content-type': 'application/json' },
@@ -13798,55 +14128,19 @@ function App() {
                 .then((j) => {
                   if (!j?.ok) {
                     console.warn('[retime]', j?.error || 'failed');
-                    shellToast(`Retime refused: ${j?.error || 'failed'}`);
-                  } else if (j?.seq != null) {
-                    pushTlUndo(activePath, j.seq, patch.from != null ? 'move clip' : 'trim clip');
+                    timelineOpFailed('Retime refused', j?.error);
+                  } else {
+                    shellToast(patch.from != null ? 'Clip moved.' : 'Clip trimmed.', true);
+                    if (j?.seq != null)
+                      pushTlUndo(activePath, j.seq, patch.from != null ? 'move clip' : 'trim clip');
                   }
                   // The file watcher reloads the canvas → re-announce → the
                   // source-fetch effect re-parses the new timing.
                 })
                 .catch(() => {});
             }}
-            onRemove={(index) => {
-              if (!activePath || activePath === SYSTEM_TAB) return;
-              // DDR-150 P3 — remove the clip addressed by its comp-scoped stableId
-              // (the sequence-row index → the index-th sequence clip). The engine
-              // fingerprint + semantic gate refuse a stale/raced or series-breaking
-              // removal; the file watcher reloads the canvas after.
-              const artboardId = timelineArtboardId || undefined;
-              const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
-              fetch(ccUrl)
-                .then((r) => r.json().catch(() => ({})))
-                .then((cc) => {
-                  const seqs =
-                    cc?.ok && Array.isArray(cc.clips)
-                      ? cc.clips.filter((c) => c.kind === 'sequence')
-                      : [];
-                  const clip = seqs[index] || null;
-                  if (!clip?.stableId) return null;
-                  return fetch('/_api/remove-sequence', {
-                    method: 'POST',
-                    headers: { 'content-type': 'application/json' },
-                    body: JSON.stringify({
-                      canvas: activePath,
-                      artboardId,
-                      stableId: clip.stableId,
-                      contentHash: clip.contentHash,
-                    }),
-                  });
-                })
-                .then((r) => (r ? r.json() : null))
-                .then((j) => {
-                  if (j && !j.ok) {
-                    console.warn('[remove-clip]', j.error || 'failed');
-                    shellToast(`Remove refused: ${j.error || 'failed'}`);
-                  } else if (j?.seq != null) {
-                    pushTlUndo(activePath, j.seq, 'remove clip');
-                  }
-                })
-                .catch(() => {});
-            }}
-            onReplace={(index) => {
+            onRemove={timelineRemoveClip}
+            onReplace={(clipRef) => {
               if (!activePath || activePath === SYSTEM_TAB) return;
               // DDR-150 P3 + dogfood #5 — replace a clip's media. The file picker
               // MUST open synchronously inside the click gesture: browsers revoke
@@ -13857,11 +14151,7 @@ function App() {
               replaceMediaViaPicker({
                 accept: 'video/*,image/*',
                 resolveTarget: (cc) => {
-                  const seqs =
-                    cc?.ok && Array.isArray(cc.clips)
-                      ? cc.clips.filter((c) => c.kind === 'sequence')
-                      : [];
-                  const clip = seqs[index];
+                  const clip = resolveClipRef(cc, clipRef);
                   if (clip?.mediaArrayRef) return { arrayRef: clip.mediaArrayRef };
                   if (clip?.mediaCdId) return { cdId: clip.mediaCdId };
                   return null;
@@ -13884,32 +14174,29 @@ function App() {
                 },
               });
             }}
-            onReplaceLayer={(clipIndex, layerIndex) => {
+            onReplaceLayer={(clipRef, layerIndex) => {
               if (!activePath || activePath === SYSTEM_TAB) return;
               // DDR-150 dogfood — replace a SPECIFIC layer inside an expanded clip
               // (the mp4 background separately from the title layer). Targets the
               // layer's own media (array-fed or literal-src) from the enumerator.
+              const rowIndex = clipRef && typeof clipRef === 'object' ? clipRef.index : clipRef;
               const kind =
-                timelineSequences[clipIndex]?.layers?.[layerIndex]?.kind === 'audio'
+                timelineSequences[rowIndex]?.layers?.[layerIndex]?.kind === 'audio'
                   ? 'audio/*'
-                  : timelineSequences[clipIndex]?.layers?.[layerIndex]?.kind === 'image'
+                  : timelineSequences[rowIndex]?.layers?.[layerIndex]?.kind === 'image'
                     ? 'image/*'
                     : 'video/*';
               replaceMediaViaPicker({
                 accept: kind,
                 resolveTarget: (cc) => {
-                  const seqs =
-                    cc?.ok && Array.isArray(cc.clips)
-                      ? cc.clips.filter((c) => c.kind === 'sequence')
-                      : [];
-                  const ly = seqs[clipIndex]?.layers?.[layerIndex];
+                  const ly = resolveClipRef(cc, clipRef)?.layers?.[layerIndex];
                   if (ly?.mediaArrayRef) return { arrayRef: ly.mediaArrayRef };
                   if (ly?.mediaCdId) return { cdId: ly.mediaCdId };
                   return null;
                 },
               });
             }}
-            onReorder={(index, direction) => {
+            onReorder={(clipRef, direction) => {
               if (!activePath || activePath === SYSTEM_TAB) return;
               // DDR-150 P5 — z-order reorder: move a standalone <Sequence> before/
               // after a sibling (render stacking; later sibling paints on top).
@@ -13926,9 +14213,10 @@ function App() {
                     cc?.ok && Array.isArray(cc.clips)
                       ? cc.clips.filter((c) => c.kind === 'sequence')
                       : [];
-                  const moved = seqs[index] || null;
+                  const moved = resolveClipRef(cc, clipRef);
+                  const index = moved ? seqs.indexOf(moved) : -1;
                   const refIdx = direction === 'forward' ? index + 1 : index - 1;
-                  const ref = seqs[refIdx] || null;
+                  const ref = index >= 0 ? seqs[refIdx] || null : null;
                   const position = direction === 'forward' ? 'after' : 'before';
                   if (!moved?.stableId || !ref?.stableId) return null;
                   return fetch('/_api/reorder-sequence', {
@@ -13949,14 +14237,14 @@ function App() {
                 .then((j) => {
                   if (j && !j.ok) {
                     console.warn('[reorder-clip]', j.error || 'failed');
-                    shellToast(`Reorder refused: ${j.error || 'failed'}`);
+                    timelineOpFailed('Reorder refused', j.error);
                   } else if (j?.seq != null) {
                     pushTlUndo(activePath, j.seq, 'reorder clip');
                   }
                 })
                 .catch(() => {});
             }}
-            onToggleHide={(index) => {
+            onToggleHide={(clipRef) => {
               if (!activePath || activePath === SYSTEM_TAB) return;
               // DDR-150 dogfood — hide/show a clip (gates its body behind
               // {false && …}; the tag + time slot stay). Addressed by comp-scoped
@@ -13966,11 +14254,7 @@ function App() {
               fetch(ccUrl)
                 .then((r) => r.json().catch(() => ({})))
                 .then((cc) => {
-                  const seqs =
-                    cc?.ok && Array.isArray(cc.clips)
-                      ? cc.clips.filter((c) => c.kind === 'sequence')
-                      : [];
-                  const clip = seqs[index] || null;
+                  const clip = resolveClipRef(cc, clipRef);
                   if (!clip?.stableId) return null;
                   return fetch('/_api/toggle-hide', {
                     method: 'POST',
@@ -13985,7 +14269,7 @@ function App() {
                 })
                 .then((r) => (r ? r.json() : null))
                 .then((j) => {
-                  if (j && !j.ok) shellToast(`Hide refused: ${j.error || 'failed'}`);
+                  if (j && !j.ok) timelineOpFailed('Hide refused', j.error);
                   else if (j && j.ok) {
                     shellToast(j.hidden ? 'Clip hidden.' : 'Clip shown.', true);
                     if (j.seq != null) pushTlUndo(activePath, j.seq, j.hidden ? 'hide clip' : 'show clip');
@@ -13993,60 +14277,457 @@ function App() {
                 })
                 .catch(() => shellToast('Hide failed: network error'));
             }}
-            onDropMedia={(file) => {
+            onReorderMove={(movedRef2, targetRef, position) => {
               if (!activePath || activePath === SYSTEM_TAB) return;
-              // DDR-150 P4 Task 11 — drop a media file onto the timeline to
-              // insert a clip: upload to assets/, then append a <Sequence> with
-              // the media (playing after existing content). fps*3 default length.
+              // Task 6 — the magnetic drag commit: a real series MOVE (any
+              // distance), addressed by stableId pair + fingerprints.
               const artboardId = timelineArtboardId || undefined;
-              const mediaTag = file.type.startsWith('video/')
-                ? 'Video'
-                : file.type.startsWith('audio/')
-                  ? 'Audio'
-                  : file.type.startsWith('image/')
-                    ? 'Img'
-                    : null;
-              const fps = activeComps[0]?.fps || 30;
-              fetch('/_api/asset', {
-                method: 'POST',
-                headers: { 'Content-Type': file.type || 'application/octet-stream' },
-                body: file,
-              })
+              const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+              fetch(ccUrl)
                 .then((r) => r.json().catch(() => ({})))
-                .then((up) => {
-                  if (!up?.path) {
-                    console.warn('[insert] upload failed', up?.error);
-                    shellToast(`Upload failed: ${up?.error || 'unknown error'}`);
-                    return null;
-                  }
-                  return fetch('/_api/insert-sequence', {
+                .then((cc) => {
+                  const moved = resolveClipRef(cc, movedRef2);
+                  const ref = resolveClipRef(cc, targetRef);
+                  if (!moved?.stableId || !ref?.stableId) return null;
+                  return fetch('/_api/reorder-sequence', {
                     method: 'POST',
                     headers: { 'content-type': 'application/json' },
                     body: JSON.stringify({
                       canvas: activePath,
                       artboardId,
-                      from: Math.max(0, timelineTotal),
-                      durationInFrames: Math.round(fps * 3),
-                      mediaTag,
-                      src: up.path,
+                      stableId: moved.stableId,
+                      contentHash: moved.contentHash,
+                      refStableId: ref.stableId,
+                      refContentHash: ref.contentHash,
+                      position,
+                      mode: 'move',
                     }),
                   });
                 })
                 .then((r) => (r ? r.json() : null))
                 .then((j) => {
                   if (j && !j.ok) {
-                    console.warn('[insert-clip]', j.error || 'failed');
-                    shellToast(`Insert refused: ${j.error || 'failed'}`);
-                  } else if (j && j.ok) {
-                    shellToast('Clip added to the timeline.', true);
-                    if (j.seq != null) pushTlUndo(activePath, j.seq, 'add clip');
+                    console.warn('[reorder-move]', j.error || 'failed');
+                    timelineOpFailed('Reorder refused', j.error);
+                  } else if (j?.ok) {
+                    shellToast('Clip moved.', true);
+                    if (j.seq != null) pushTlUndo(activePath, j.seq, 'move clip');
                   }
                 })
-                .catch(() => {});
+                .catch(() => shellToast('Reorder failed: network error'));
+            }}
+            onDropMedia={(files, pos) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 P4 + Task 6 — drop media onto the timeline. With a caret
+              // position: index-aware storyline insert / frame-anchored
+              // overlay-audio insert; multiple files insert in order. Audio
+              // files always land in the audio band. Without a position, the
+              // legacy append path.
+              const artboardId = timelineArtboardId || undefined;
+              const fps = activeComps[0]?.fps || 30;
+              const canvas = activePath;
+              const list = (Array.isArray(files) ? files : [files]).filter(Boolean);
+              (async () => {
+                // Dogfood fix — dropping media on the timeline of a canvas with
+                // NO video-comp used to dead-end in "Insert refused: no
+                // video-comp for this artboard". Drop-first means drop-first:
+                // upload the files and spin up a NEW video-comp canvas cut from
+                // them (same engine as File → Assemble), then open it.
+                if (!activeComps.length) {
+                  const clips = [];
+                  for (const file of list) {
+                    const mediaKind = file.type.startsWith('audio/')
+                      ? 'audio'
+                      : file.type.startsWith('video/')
+                        ? 'video'
+                        : null;
+                    if (!mediaKind) continue;
+                    try {
+                      const r = await fetch('/_api/asset', {
+                        method: 'POST',
+                        headers: { 'Content-Type': file.type || 'application/octet-stream' },
+                        body: file,
+                      });
+                      const up = await r.json().catch(() => ({}));
+                      if (up?.path) clips.push({ src: up.path, mediaKind });
+                      else shellToast(`Upload failed: ${up?.error || `HTTP ${r.status}`}`);
+                    } catch {
+                      shellToast('Upload failed: network error');
+                    }
+                  }
+                  if (!clips.length) {
+                    shellToast('No video/audio files in the drop — nothing to cut.');
+                    return;
+                  }
+                  // 1) In-place upgrade: a `kind="video"` artboard on THIS
+                  // canvas gets a VideoComp injected and takes the clips as
+                  // storyline beats (server-side ensure). Falls through to a
+                  // fresh "New Cut" canvas only when no artboard opted in.
+                  let upgraded = false;
+                  for (const c of clips) {
+                    const body = {
+                      canvas,
+                      lane: c.mediaKind === 'audio' && upgraded ? 'audio' : 'storyline',
+                      durationInFrames: Math.round(fps * 3),
+                      mediaTag: c.mediaKind === 'audio' ? 'Audio' : 'Video',
+                      src: c.src,
+                    };
+                    if (body.lane === 'audio') body.from = 0;
+                    const r = await fetch('/_api/insert-sequence', {
+                      method: 'POST',
+                      headers: { 'content-type': 'application/json' },
+                      body: JSON.stringify(body),
+                    }).catch(() => null);
+                    const j = r ? await r.json().catch(() => null) : null;
+                    if (j?.ok) {
+                      upgraded = true;
+                      if (j.seq != null) pushTlUndo(canvas, j.seq, 'add clip');
+                    } else if (!upgraded) {
+                      break; // no eligible artboard — New Cut fallback below
+                    } else {
+                      timelineOpFailed('Insert refused', j?.error);
+                    }
+                  }
+                  if (upgraded) {
+                    shellToast('Artboard upgraded to a video comp — clips added to the storyline.', true);
+                    return;
+                  }
+                  for (let n = 0; n < 8; n += 1) {
+                    const name = n === 0 ? 'New Cut' : `New Cut ${n + 1}`;
+                    const r = await fetch('/_api/canvas', {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify({ name, kind: 'video-comp', clips }),
+                    }).catch(() => null);
+                    const j = r ? await r.json().catch(() => ({})) : {};
+                    if (r?.status === 409) continue; // name taken — try the next
+                    if (!r?.ok || !j.ok) {
+                      shellToast(`New cut failed: ${j.error || 'create refused'}`);
+                      return;
+                    }
+                    await loadTree();
+                    openTab(j.file);
+                    shellToast(`Started a new cut from ${clips.length} clip${clips.length > 1 ? 's' : ''}.`, true);
+                    return;
+                  }
+                  shellToast('New cut failed: too many "New Cut" canvases — rename some.');
+                  return;
+                }
+                let slot = pos?.lane === 'storyline' ? pos.index : undefined;
+                for (const file of list) {
+                  const mediaTag = file.type.startsWith('video/')
+                    ? 'Video'
+                    : file.type.startsWith('audio/')
+                      ? 'Audio'
+                      : file.type.startsWith('image/')
+                        ? 'Img'
+                        : null;
+                  if (!mediaTag) continue;
+                  let up;
+                  try {
+                    const r = await fetch('/_api/asset', {
+                      method: 'POST',
+                      headers: { 'Content-Type': file.type || 'application/octet-stream' },
+                      body: file,
+                    });
+                    up = await r.json().catch(() => ({}));
+                  } catch {
+                    up = null;
+                  }
+                  if (!up?.path) {
+                    shellToast(`Upload failed: ${up?.error || 'server unreachable — retry in a moment'}`);
+                    continue;
+                  }
+                  const isAudio = mediaTag === 'Audio';
+                  const body = { canvas, artboardId, mediaTag, src: up.path };
+                  if (pos && (isAudio || pos.lane === 'audio')) {
+                    body.lane = 'audio';
+                    body.from = Math.max(0, pos.frame ?? 0);
+                    // Default: stretch toward the end of the cut.
+                    body.durationInFrames = Math.max(fps, timelineTotal - body.from);
+                  } else if (pos?.lane === 'storyline' && !isAudio) {
+                    body.lane = 'storyline';
+                    if (slot != null) {
+                      body.index = slot;
+                      slot += 1; // multiple files insert in order
+                    }
+                    body.durationInFrames = Math.round(fps * 3);
+                  } else if (pos?.lane === 'overlay' && !isAudio) {
+                    if ((timelineSequences || []).length === 0) {
+                      // First clip of a greenfield comp = the BASE layer →
+                      // storyline, wherever it was dropped.
+                      body.lane = 'storyline';
+                    } else {
+                      body.lane = 'overlay';
+                      body.from = Math.max(0, pos.frame ?? 0);
+                    }
+                    body.durationInFrames = Math.round(fps * 3);
+                  } else if (!isAudio) {
+                    // Default container rule: a video/image drop ANYWHERE on the
+                    // timeline lands in the storyline (append = hard cut at the
+                    // end; the caret gives it an index). The old lane-less
+                    // append refused hard-cut series ("no transition to clone").
+                    body.lane = 'storyline';
+                    body.durationInFrames = Math.round(fps * 3);
+                  } else {
+                    // Audio without a caret → audio band, from the start.
+                    body.lane = 'audio';
+                    body.from = 0;
+                    body.durationInFrames = Math.max(fps, timelineTotal);
+                  }
+                  try {
+                    const r = await fetch('/_api/insert-sequence', {
+                      method: 'POST',
+                      headers: { 'content-type': 'application/json' },
+                      body: JSON.stringify(body),
+                    });
+                    const j = await r.json().catch(() => null);
+                    if (j && !j.ok) {
+                      console.warn('[insert-clip]', j.error || 'failed');
+                      timelineOpFailed('Insert refused', j.error);
+                    } else if (j?.ok) {
+                      shellToast('Clip added to the timeline.', true);
+                      if (j.seq != null) pushTlUndo(canvas, j.seq, 'add clip');
+                    }
+                  } catch {
+                    shellToast('Insert failed: network error');
+                  }
+                }
+              })();
             }}
             height={timelineHeight}
             onResize={setTimelineHeight}
             onClose={() => setTimelineOpen(false)}
+            selectedClipId={timelineSelectedClip}
+            onSelect={setTimelineSelectedClip}
+            transitionClips={timelineTransClips}
+            onClipVerb={timelineClipVerb}
+            comments={(commentsByFile[activePath] || []).filter((c) => c && c.timeline)}
+            promptText={askText}
+            onAddComment={timelineAddComment}
+            onResolveComment={(id) =>
+              wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } })
+            }
+            onDeleteComment={(id) => wsSend({ type: 'comments-delete', id })}
+            onSplitAtPlayhead={() => {
+              const s = tlKeyRef.current;
+              let ref = s.selected != null ? { stableId: s.selected } : null;
+              if (!ref) {
+                const rows = s.sequences || [];
+                const under =
+                  rows.find(
+                    (r2) => r2.series && s.frame >= r2.from && s.frame < r2.from + r2.duration
+                  ) || rows.find((r2) => s.frame >= r2.from && s.frame < r2.from + r2.duration);
+                if (under?.stableId) ref = { stableId: under.stableId };
+              }
+              if (ref) timelineClipVerb(ref, 'split', { atFrame: s.frame });
+              else shellToast('Nothing under the playhead to split.');
+            }}
+            onAddTitle={(frame) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // Task 19 — "+ Title": inserts immediately with a default text —
+              // edit it via double-click → inspector → Text (the artboard's
+              // Player DOM isn't the canvas edit surface, so inline editing
+              // happens in the timeline inspector).
+              Promise.resolve('Title').then((text) => {
+              if (!text) return;
+              const fps = activeComps[0]?.fps || 30;
+              fetch('/_api/insert-sequence', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                  canvas: activePath,
+                  artboardId: timelineArtboardId || undefined,
+                  lane: 'overlay',
+                  from: frame,
+                  durationInFrames: Math.round(fps * 3),
+                  mediaTag: 'Title',
+                  src: text,
+                }),
+              })
+                .then((r) => r.json().catch(() => null))
+                .then((j) => {
+                  if (j && !j.ok) timelineOpFailed('Title refused', j.error);
+                  else if (j?.ok) {
+                    shellToast('Title added.', true);
+                    if (j.seq != null) pushTlUndo(activePath, j.seq, 'add title');
+                  }
+                })
+                .catch(() => shellToast('Title failed: network error'));
+              });
+            }}
+            onAddAiClip={() => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // Task 22 — "+ AI clip": a prompt-carrying slate beat at the end
+              // of the storyline. NO modal (user steer 2026-07-30) — the slate
+              // lands with a starter prompt the user rewrites IN PLACE
+              // (double-click the slate text in the artboard, or Text tab).
+              (async () => {
+              const prompt = 'Describe this shot — double-click to edit';
+              const kind = 'veo';
+              const fps = activeComps[0]?.fps || 30;
+              fetch('/_api/insert-sequence', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                  canvas: activePath,
+                  artboardId: timelineArtboardId || undefined,
+                  lane: 'storyline',
+                  durationInFrames: Math.round(fps * 5),
+                  placeholder: { prompt, kind },
+                }),
+              })
+                .then((r) => r.json().catch(() => null))
+                .then((j) => {
+                  if (j && !j.ok) timelineOpFailed('AI clip refused', j.error);
+                  else if (j?.ok) {
+                    shellToast('AI placeholder added — double-click its text to write the prompt, then right-click → Generate ✨.', true);
+                    if (j.seq != null) pushTlUndo(activePath, j.seq, 'add AI placeholder');
+                  }
+                })
+                .catch(() => shellToast('AI clip failed: network error'));
+              })();
+            }}
+            onGeneratePlaceholder={(clipRef) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // Task 22 — hand the prompt to the existing generation spine
+              // (DDR-164), then poll the job and swap the slate in place. The
+              // placeholder stays fully editable while the job runs; the final
+              // swap re-resolves by stableId with a FRESH fingerprint.
+              const canvas = activePath;
+              const artboardId = timelineArtboardId || undefined;
+              const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(canvas)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+              fetch(ccUrl)
+                .then((r) => r.json().catch(() => ({})))
+                .then((cc) => {
+                  const clip = resolveClipRef(cc, clipRef);
+                  const ph = clip?.placeholder;
+                  if (!clip?.stableId || !ph?.prompt) {
+                    shellToast('No AI placeholder prompt on this clip.');
+                    return;
+                  }
+                  const modality = ph.kind === 'image' ? 'image' : 'video';
+                  const prompt =
+                    ph.kind === 'motion'
+                      ? `Clean, minimal motion-graphics animation (flat shapes, smooth easing): ${ph.prompt}`
+                      : ph.prompt;
+                  fetch('/_api/generate-jobs', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({ provider: 'gemini', modality, prompt }),
+                  })
+                    .then(async (r) => (r.ok ? r.json() : Promise.reject(new Error(await r.text()))))
+                    .then((job) => {
+                      const jobId = job?.id;
+                      if (!jobId) throw new Error('no job id');
+                      shellToast(`Generating ${ph.kind}… (runs in the background)`, true);
+                      const stableId = clip.stableId;
+                      const poll = () => {
+                        fetch('/_api/generate-jobs')
+                          .then((r) => r.json().catch(() => ({})))
+                          .then((d) => {
+                            const j2 = (d?.jobs || []).find((x) => x.id === jobId);
+                            if (!j2 || j2.status === 'failed') {
+                              shellToast(`Generation failed: ${j2?.error || 'job lost'}`);
+                              return;
+                            }
+                            if (j2.status !== 'done') {
+                              setTimeout(poll, 4000);
+                              return;
+                            }
+                            const asset = j2.assets?.[0];
+                            if (!asset) {
+                              shellToast('Generation finished but produced no asset.');
+                              return;
+                            }
+                            // Fresh fingerprint at swap time (the clip may have
+                            // been retimed/moved meanwhile — that's fine).
+                            fetch(ccUrl)
+                              .then((r) => r.json().catch(() => ({})))
+                              .then((cc2) => {
+                                const live = resolveClipRef(cc2, { stableId });
+                                if (!live?.stableId) {
+                                  shellToast('Placeholder clip is gone — generated asset kept in assets/.');
+                                  return;
+                                }
+                                timelineClipVerb({ stableId: live.stableId }, 'resolve-placeholder', {
+                                  src: asset,
+                                  mediaKind: modality === 'image' ? 'image' : 'video',
+                                });
+                              });
+                          })
+                          .catch(() => setTimeout(poll, 6000));
+                      };
+                      setTimeout(poll, 3000);
+                    })
+                    .catch((e) =>
+                      shellToast(`Generate failed: ${e?.message || 'provider error'} — is a Gemini key set in Settings?`)
+                    );
+                })
+                .catch(() => shellToast('Generate failed: network error'));
+            }}
+            onAddImage={(frame) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // Task 19 — "+ Image": picker → content-addressed upload →
+              // overlay-lane <Img> at the playhead. WKWebView can't open an
+              // HTML file input, so native goes through the Rust pick dialog.
+              const uploadPicked = (blob, type) => {
+                const fps = activeComps[0]?.fps || 30;
+                fetch('/_api/asset', {
+                  method: 'POST',
+                  headers: { 'Content-Type': type || 'application/octet-stream' },
+                  body: blob,
+                })
+                  .then((r) => r.json().catch(() => ({})))
+                  .then((up) => {
+                    if (!up?.path) {
+                      shellToast(`Upload failed: ${up?.error || 'unknown error'}`);
+                      return null;
+                    }
+                    return fetch('/_api/insert-sequence', {
+                      method: 'POST',
+                      headers: { 'content-type': 'application/json' },
+                      body: JSON.stringify({
+                        canvas: activePath,
+                        artboardId: timelineArtboardId || undefined,
+                        lane: 'overlay',
+                        from: frame,
+                        durationInFrames: Math.round(fps * 3),
+                        mediaTag: 'Img',
+                        src: up.path,
+                      }),
+                    });
+                  })
+                  .then((r) => (r ? r.json() : null))
+                  .then((j) => {
+                    if (j && !j.ok) timelineOpFailed('Image refused', j.error);
+                    else if (j?.ok) {
+                      shellToast('Image overlay added.', true);
+                      if (j.seq != null) pushTlUndo(activePath, j.seq, 'add image overlay');
+                    }
+                  })
+                  .catch(() => shellToast('Image failed: network error'));
+              };
+              if (isNativeApp()) {
+                pickMediaFile()
+                  .then((picked) => {
+                    if (picked?.bytes) uploadPicked(new Blob([new Uint8Array(picked.bytes)]), '');
+                  })
+                  .catch((e2) => shellToast(`Image pick failed: ${e2?.message || 'dialog error'}`));
+                return;
+              }
+              const input = document.createElement('input');
+              input.type = 'file';
+              input.accept = 'image/*';
+              input.addEventListener('change', () => {
+                const file = input.files?.[0];
+                if (file) uploadPicked(file, file.type);
+              });
+              input.click();
+            }}
+            resolveMediaUrl={(p) =>
+              `/${(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}/${p}`
+            }
           />
         )}
         <StatusBar
@@ -14089,12 +14770,58 @@ function App() {
         onClose={() => setPaletteOpen(false)}
         actions={paletteActions}
       />
+      {shellPromptState && (
+        <div
+          className="st-scrim"
+          role="presentation"
+          onMouseDown={(e) => {
+            if (e.target === e.currentTarget) settleShellPrompt(null);
+          }}
+        >
+          <div className="st-dialog st-prompt" role="dialog" aria-modal="true" aria-label={shellPromptState.title}>
+            <div className="st-dialog-hd">
+              <span className="st-dialog-title">{shellPromptState.title}</span>
+            </div>
+            <div className="st-dialog-bd">
+              <input
+                className="st-input"
+                data-testid="shell-prompt-input"
+                autoFocus
+                defaultValue={shellPromptState.value}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                  if (e.key === 'Enter') settleShellPrompt(e.currentTarget.value);
+                  else if (e.key === 'Escape') settleShellPrompt(null);
+                }}
+              />
+              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 10 }}>
+                <button type="button" className="tlci-btn" onClick={() => settleShellPrompt(null)}>
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className="tlci-btn"
+                  data-testid="shell-prompt-ok"
+                  onClick={(e) =>
+                    settleShellPrompt(
+                      e.currentTarget.closest('.st-dialog')?.querySelector('input')?.value ?? ''
+                    )
+                  }
+                >
+                  OK
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       {exportDialog && (
         <ExportDialog
           mode={exportDialog.mode}
           initialScope={exportDialog.scope}
           activePath={activePath}
           hasComps={activeComps.length > 0}
+          comps={activeComps}
           // Which artboard "Active artboard" scope targets. The shell can't query
           // the cross-origin canvas DOM (the in-canvas dialog's activeArtboardId),
           // so use the tracked signals: an explicit selection wins, else the
@@ -14182,6 +14909,7 @@ function App() {
           startTour(USAGE_TOUR);
         }}
       />
+      <ReportBugDialog open={reportBugOpen} onClose={() => setReportBugOpen(false)} />
       <WhatsNewPanel wn={whatsNew} onStartTour={startTour} />
       <ExportPanel center={exportCenter} />
       <ReadinessDialog open={readinessOpen} onClose={() => setReadinessOpen(false)} />