@1agh/maude 0.39.1 → 0.40.0

package/apps/studio/client/app.jsx

@@ -19,8 +19,16 @@ import GitPanel from './panels/GitPanel.jsx';
 import IdentityBar from './panels/IdentityBar.jsx';
 import OnboardingWizard from './panels/OnboardingWizard.jsx';
 import { ReadinessDialog } from './panels/ReadinessList.jsx';
+import TimelinePanel from './panels/TimelinePanel.jsx';
+import { parseCompTimeline } from './panels/timeline-parse.js';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
-import { appIsFirstRun, isNativeApp, onUpdateReady, restartToUpdate } from './github.js';
+import {
+  appIsFirstRun,
+  isNativeApp,
+  onUpdateReady,
+  restartToUpdate,
+  saveExport,
+} from './github.js';
 import { COLLAB_TOUR } from './tour/collab-tour.js';
 import { TourOverlay } from './tour/overlay.jsx';
 import { USAGE_TOUR } from './tour/usage-tour.js';
@@ -92,6 +100,33 @@ function basename(p) {
   return p.split('/').pop();
 }
 
+// DDR-150 dogfood — a transient shell toast for timeline/inline-edit op results.
+// The clip ops used to console.warn their failures (a 422 "series clip can't
+// move" looked like "the button does nothing"). Self-contained DOM (no React
+// state), mirrors the canvas-side showCanvasToast.
+function shellToast(message, ok = false) {
+  if (typeof document === 'undefined') return;
+  let el = document.getElementById('st-op-toast');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'st-op-toast';
+    el.setAttribute('role', 'status');
+    el.style.cssText =
+      'position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:80;' +
+      'max-width:440px;padding:8px 14px;border-radius:8px;font:12px/1.45 var(--font-mono,monospace);' +
+      'box-shadow:0 8px 28px rgba(0,0,0,.34);pointer-events:none;opacity:0;transition:opacity 140ms ease;';
+    document.body.appendChild(el);
+  }
+  el.style.background = ok ? '#1d3524' : '#3a1d1d';
+  el.style.color = ok ? '#b7e4c0' : '#f1b8b8';
+  el.textContent = message;
+  el.style.opacity = '1';
+  clearTimeout(shellToast._t);
+  shellToast._t = setTimeout(() => {
+    el.style.opacity = '0';
+  }, 3200);
+}
+
 // Strip canvas extensions for display. `Canvas Viewport.tsx` → `Canvas Viewport`.
 // Sidecars (`.meta.json`, `.css`, `.registry.json`) keep their extensions so
 // the file type stays unambiguous.
@@ -768,6 +803,11 @@ const EXPORT_CARDS = [
   { id: 'svg', label: 'SVG', sub: 'per artboard', icon: 'vector', format: 'svg' },
   { id: 'html', label: 'HTML', sub: 'self-contained', icon: 'code', format: 'html' },
   { id: 'pptx', label: 'PPTX', sub: 'slides', icon: 'presentation', format: 'pptx' },
+  // DDR-148 — temporal formats. Shown only when the active canvas has a
+  // video-comp (`temporal: true` + the hasComps gate in ExportDialog); the
+  // capture engine renders the artboard frame-by-frame.
+  { id: 'mp4', label: 'MP4', sub: 'video · H.264', icon: 'presentation', format: 'mp4', temporal: true },
+  { id: 'gif', label: 'GIF', sub: 'animated', icon: 'image', format: 'gif', temporal: true },
   { id: 'canva', label: 'Canva', sub: 'handoff bundle', icon: 'external', format: 'canva' },
   { id: 'zip', label: 'ZIP', sub: 'project bundle', icon: 'archive', format: 'zip' },
   { id: 'shadcn', label: 'AI handoff', sub: 'production drop', icon: 'sparkle', handoff: true },
@@ -787,6 +827,9 @@ const EXPORT_VALID_SCOPES = {
   svg: ['selection', 'artboard', 'canvas-as-separate'],
   html: ['artboard', 'canvas-as-separate'],
   pptx: ['canvas-as-separate'],
+  mp4: ['artboard'],
+  gif: ['artboard'],
+  webm: ['artboard'],
   canva: ['canvas-as-separate'],
   zip: ['project-raw'],
 };
@@ -796,12 +839,25 @@ const PNG_SCALES = [
   { value: 3, label: '3× (max)' },
 ];
 
-function ExportDialog({ mode, initialScope, activePath, onClose }) {
+function ExportDialog({
+  mode,
+  initialScope,
+  activePath,
+  hasComps = false,
+  activeArtboardId = null,
+  selection = null,
+  onClose,
+}) {
   const [sel, setSel] = useState(mode === 'handoff' ? 'shadcn' : 'png');
   const [scope, setScope] = useState(
     initialScope && EXPORT_SCOPE_LABELS[initialScope] ? initialScope : 'artboard'
   );
   const [scale, setScale] = useState(2);
+  // DDR-148 addendum — mp4/webm of a registered video-comp render through
+  // renderMediaOnWeb, which produces real audio (Remotion owns the
+  // TransitionSeries/volume-closure timeline). gif has no audio track at all
+  // (format limitation, not a toggle), so this only applies to mp4/webm.
+  const [audio, setAudio] = useState(true);
   const [busy, setBusy] = useState(false);
   const [status, setStatus] = useState(null); // { ok, msg }
   const [recent, setRecent] = useState([]);
@@ -847,7 +903,18 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
     }
     setBusy(true);
     setStatus(null);
-    const options = card.format === 'png' ? { scale } : {};
+    // `scale` drives PNG size AND video resolution (deviceScaleFactor → encoder
+    // dims); temporal formats were previously fixed at the tiny native size.
+    const options = card.format === 'png' || card.temporal ? { scale } : {};
+    // 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;
+    // Scope targeting hints (resolveScope reads these): `artboardId` makes
+    // "Active artboard" export the right screen instead of `:first-of-type`;
+    // `selection` makes "Current selection" export the selected element. Mirrors
+    // the in-canvas dialog's captureScopeHints.
+    if (activeArtboardId) options.artboardId = activeArtboardId;
+    if (selection?.selector) options.selection = selection;
     try {
       const r = await fetch('/_api/export', {
         method: 'POST',
@@ -863,16 +930,30 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
       const fn = /filename="([^"]+)"/.exec(disp);
       const filename = (fn && fn[1]) || `export.${card.format}`;
       const blob = await r.blob();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-      setStatus({ ok: true, msg: `Exported ${filename}` });
-      loadRecent();
+      if (isNativeApp()) {
+        // Native: WKWebView swallows the `<a download>` blob (the file lands in
+        // an unknown default with no prompt). Route through a real OS save dialog
+        // so the export OFFERS a location. Cancel → soft no-op.
+        const bytes = Array.from(new Uint8Array(await blob.arrayBuffer()));
+        const savedPath = await saveExport(filename, bytes);
+        if (savedPath) {
+          setStatus({ ok: true, msg: `Saved to ${savedPath}` });
+          loadRecent();
+        } else {
+          setStatus({ ok: true, msg: 'Save cancelled' });
+        }
+      } else {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+        setStatus({ ok: true, msg: `Exported ${filename}` });
+        loadRecent();
+      }
     } catch (err) {
       setStatus({ ok: false, msg: err && err.message ? err.message : String(err) });
     }
@@ -901,7 +982,7 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
               : 'Format'}
           </div>
           <div className="st-fmt-grid">
-            {EXPORT_CARDS.map((c) => (
+            {EXPORT_CARDS.filter((c) => !c.temporal || hasComps).map((c) => (
               <button
                 type="button"
                 key={c.id}
@@ -936,10 +1017,10 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
               </select>
             </div>
           )}
-          {!card.handoff && card.format === 'png' && (
+          {!card.handoff && (card.format === 'png' || card.temporal) && (
             <div className="st-dialog-row">
               <label className="st-dialog-lbl" htmlFor="st-export-size">
-                Size
+                {card.temporal ? 'Resolution' : 'Size'}
               </label>
               <select
                 id="st-export-size"
@@ -960,6 +1041,28 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
               Resolution multiplier — {scale}× ≈ {1440 * scale}×{900 * scale} for a 1440×900 artboard.
             </div>
           )}
+          {!card.handoff && card.temporal && (
+            <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+              {scale}× the artboard's native resolution (e.g. 960×540 → {960 * scale}×{540 * scale}).
+            </div>
+          )}
+          {!card.handoff && (card.format === 'mp4' || card.format === 'webm') && (
+            <div className="st-dialog-row">
+              <label
+                className="st-dialog-lbl"
+                htmlFor="st-export-audio"
+                style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}
+              >
+                <input
+                  id="st-export-audio"
+                  type="checkbox"
+                  checked={audio}
+                  onChange={(e) => setAudio(e.target.checked)}
+                />
+                Export with audio
+              </label>
+            </div>
+          )}
           {card.handoff && (
             <div className="callout callout--info" style={{ fontSize: 12 }}>
               Hands the active canvas off to production. Copies{' '}
@@ -2340,6 +2443,9 @@ function FileDropdown({ onAction, onClose, hasCanvas }) {
       items={[
         // Bare N — the browser reserves ⌘N (New Window) and never delivers it.
         { id: 'new', label: 'New canvas…', shortcut: 'N' },
+        // DDR-150 P4 Task 12 — one-click "udělej z toho video" from the clips
+        // dropped as reference chips on the active canvas.
+        { id: 'assemble', label: 'Assemble dropped clips → video', disabled: !hasCanvas },
         { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
         { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
         { sep: true },
@@ -2406,11 +2512,15 @@ function Menubar({
   inspectorTab,
   onToggleInspector,
   onOpenLayers,
+  timelineOpen,
+  onToggleTimeline,
+  hasComps = false,
   assistantOpen,
   onToggleAssistant,
   assistantBusy,
   assistantUnseen,
   onNewCanvas,
+  onAssembleVideo,
   onOpenExport,
   onReload,
   onCloseCanvas,
@@ -2464,6 +2574,15 @@ function Menubar({
       checked: inspectorOpen,
       disabled: false,
     },
+    // DDR-148 — Timeline (video-comp scrub). Phase-tag hints when the active
+    // canvas actually has a comp; the panel itself shows an empty state otherwise.
+    {
+      id: 'timeline',
+      label: 'Timeline',
+      phase: hasComps ? 'video' : undefined,
+      checked: timelineOpen,
+      disabled: false,
+    },
     // Phase 31 (DDR-123) — native-only ACP chat sidepanel.
     ...(isNativeApp()
       ? [
@@ -2598,6 +2717,7 @@ function Menubar({
           hasCanvas={!!activePath}
           onAction={(id) => {
             if (id === 'new') onNewCanvas?.();
+            else if (id === 'assemble') onAssembleVideo?.();
             else if (id === 'export') onOpenExport?.('export');
             else if (id === 'handoff') onOpenExport?.('handoff');
             else if (id === 'reload') onReload?.();
@@ -2628,6 +2748,7 @@ function Menubar({
             else if (id === 'hidden') onToggleShowHidden();
             else if (id === 'annotate') onToggleAnnotations();
             else if (id === 'inspector') onToggleInspector();
+            else if (id === 'timeline') onToggleTimeline?.();
             else if (id === 'assistant') onToggleAssistant?.();
             else if (id === 'layers') onOpenLayers?.();
             else if (id === 'minimap') onToggleMinimap?.();
@@ -5993,15 +6114,15 @@ function App() {
     const cap = setTimeout(() => setLoadingPath(null), 15000);
     return () => clearTimeout(cap);
   }, [loadingPath]);
-  // Loaded once at boot from /_config — informs canvasUrl() so TSX iframes
-  // can pass the right ?designRel + ?tokens query to the canvas mount shell.
+  // Loaded at boot from /_config and re-fetched on the server's
+  // `config-updated` push (config.json hot-reload — /design:setup-ds rewrites
+  // it mid-session) — informs canvasUrl() so TSX iframes can pass the right
+  // ?designRel + ?tokens query to the canvas mount shell.
   const [cfg, setCfg] = useState({ designRel: '.design' });
-  useEffect(() => {
-    let cancelled = false;
+  const loadServerConfig = useCallback(() => {
     fetch('/_config')
       .then((r) => r.json())
       .then((data) => {
-        if (cancelled) return;
         const designRel = (data.designRoot || '.design').replace(/^\/+|\/+$/g, '');
         // Functional merge — the `/_config` and `/_index-data` fetches race, and
         // the latter contributes `canvasDesignSystems` (DDR-093). A full-replace
@@ -6023,10 +6144,10 @@ function App() {
         }));
       })
       .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
   }, []);
+  useEffect(() => {
+    loadServerConfig();
+  }, [loadServerConfig]);
   // Backfill the sync banner on mount from /_sync-status. The 'sync:status' WS
   // broadcast is one-shot for the zero-syncable case (DDR-060 / 9.1-D), so a
   // tab that connects after boot would otherwise miss it. {linked:false} (solo)
@@ -6079,6 +6200,46 @@ function App() {
   // The palette (T4) drives them; the dialog (T5) + panel (T6) consume them.
   const [exportDialog, setExportDialog] = useState(null); // null | { mode: 'export'|'handoff', scope? }
   const [inspectorOpen, setInspectorOpen] = useState(false);
+  // DDR-148 — Timeline panel (right dock) for scrubbing a video-comp. `activeComps`
+  // is populated from the iframe's `timeline-comps` announce; `timelineFrame` from
+  // its live `timeline-frame`. Empty comps ⇒ the panel shows its empty state.
+  const [timelineOpen, setTimelineOpen] = useState(false);
+  const [activeComps, setActiveComps] = useState([]);
+  const [timelineFrame, setTimelineFrame] = useState(0);
+  const [timelinePlaying, setTimelinePlaying] = useState(false);
+  const [timelineLoop, setTimelineLoop] = useState(true);
+  const [timelineMuted, setTimelineMuted] = useState(false);
+  const [timelineVolume, setTimelineVolume] = useState(1);
+  const [timelineHeight, setTimelineHeight] = useState(216);
+  // The artboard nearest the viewport centre (reported by canvas-lib on pan) —
+  // the Timeline follows THIS, so it redraws as you move across the canvas.
+  const [canvasActiveArtboard, setCanvasActiveArtboard] = useState(null);
+  // DDR-148 — parsed sequence/keyframe rows for the Timeline (from raw .tsx).
+  const [timelineSequences, setTimelineSequences] = useState([]);
+  const [timelineAudio, setTimelineAudio] = 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
+  // transport/scrub targets ONLY that comp — not every artboard on the canvas.
+  const timelineCompId = useMemo(() => {
+    if (!activeComps.length) return null;
+    const match = activeComps.find((c) => c.durationInFrames === timelineTotal);
+    return (match ?? activeComps[0]).id;
+  }, [activeComps, timelineTotal]);
+  const timelineCompIdRef = useRef(null);
+  useEffect(() => {
+    timelineCompIdRef.current = timelineCompId;
+  }, [timelineCompId]);
+  // The DCArtboard id the timeline scoped to (from parseCompTimeline). Used for
+  // /_api/comp-clips + every clip op so the enumerator targets the SAME comp the
+  // rows came from — `timelineCompId` is the Player's `videocomp-N` id, which
+  // never matches a DCArtboard id and made the enumerator fall back to the wrong
+  // comp on a multi-comp canvas (the showreel badge/replace/op mis-scope).
+  const [timelineArtboardId, setTimelineArtboardId] = useState(null);
+  const timelineArtboardIdRef = useRef(null);
+  useEffect(() => {
+    timelineArtboardIdRef.current = timelineArtboardId;
+  }, [timelineArtboardId]);
   // Phase 31 (DDR-123) — the native ACP chat sidepanel (right dock, native-only).
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [assistantBusy, setAssistantBusy] = useState(false);
@@ -6128,6 +6289,8 @@ function App() {
     setInspectorOpen(which === 'inspector');
     setCommentsPanelOpen(which === 'comments');
     setAssistantOpen(which === 'assistant');
+    // NOTE: the Timeline is a BOTTOM dock (DDR-148), NOT part of the right-rail
+    // mutual-exclusion — it stays open when a right panel opens.
   }, []);
   // Functional updates so this is stale-closure-safe inside the keydown /
   // postMessage listeners; opening always clears the sibling panels.
@@ -6170,6 +6333,9 @@ function App() {
       });
     }
   }, []);
+  // DDR-148 — the Timeline is a BOTTOM dock, independent of the right rail: it
+  // toggles on its own and coexists with Inspector/Changes/Comments/Chat.
+  const toggleTimeline = useCallback(() => setTimelineOpen((v) => !v), []);
   const whatsNew = useWhatsNew(MDCC_VERSION);
   // Phase 29 (E4) — first-run onboarding wizard. The native shell boots a minimal
   // "welcome" project on first launch; we ask it whether this is a first run and, if
@@ -6288,6 +6454,269 @@ function App() {
     [activePath]
   );
 
+  // DDR-150 dogfood #7 — a file dragged from Finder and dropped on a shell area
+  // with no drop target used to make the browser NAVIGATE AWAY to the file
+  // (file:// replaces the app). Document-level guard: always cancel the default
+  // for file drags; the TimelinePanel's own onDrop (bubbling before this) still
+  // receives the drop first — this only blocks the browser fallback.
+  useEffect(() => {
+    const isFileDrag = (e) => Array.from(e.dataTransfer?.types ?? []).includes('Files');
+    const onDocDragOver = (e) => {
+      if (isFileDrag(e)) e.preventDefault();
+    };
+    const onDocDrop = (e) => {
+      if (isFileDrag(e)) e.preventDefault();
+    };
+    document.addEventListener('dragover', onDocDragOver);
+    document.addEventListener('drop', onDocDrop);
+    return () => {
+      document.removeEventListener('dragover', onDocDragOver);
+      document.removeEventListener('drop', onDocDrop);
+    };
+  }, []);
+
+  // DDR-150 P3 Task 9 — timeline keyboard shortcuts. Read live state through a
+  // ref so the listener attaches once. Gated on: timeline open + a comp active +
+  // focus NOT in a text field. Space doesn't steal the canvas PAN chord because
+  // that keydown fires inside the focused canvas iframe, never reaching this
+  // top-document listener. Space = play/pause · ←/→ = ±1 frame (Shift = ±1s) ·
+  // Home/End = start/end · ,/. = prev/next keyframe boundary.
+  const tlKeyRef = useRef({});
+  tlKeyRef.current = {
+    open: timelineOpen,
+    comps: activeComps,
+    frame: timelineFrame,
+    total: timelineTotal,
+    playing: timelinePlaying,
+    compId: timelineCompId,
+    muted: timelineMuted,
+    loop: timelineLoop,
+    sequences: timelineSequences,
+    post: postToActiveCanvas,
+    canvas: activePath,
+  };
+
+  // DDR-150 dogfood #1 — Timeline undo/redo. Every successful clip op (move /
+  // trim / remove / insert / z-reorder / replace-src) returns a server `seq`
+  // registered in the whole-file undo log; Cmd+Z / Shift+Cmd+Z replay it via
+  // /_api/reorder-revert (guarded swap — 409s honestly if the canvas diverged).
+  const tlUndoRef = useRef({ undo: [], redo: [] });
+  const pushTlUndo = useCallback((canvas, seq, label) => {
+    if (typeof seq !== 'number') return;
+    tlUndoRef.current.undo.push({ canvas, seq, label });
+    tlUndoRef.current.redo = []; // a new edit invalidates the redo branch
+    if (tlUndoRef.current.undo.length > 50) tlUndoRef.current.undo.shift();
+  }, []);
+  const tlUndoRedo = useCallback((dir) => {
+    const s = tlUndoRef.current;
+    const src = dir === 'undo' ? s.undo : s.redo;
+    const dst = dir === 'undo' ? s.redo : s.undo;
+    const canvas = tlKeyRef.current.canvas;
+    // Last entry for THIS canvas (stacks are global; ops are per-canvas).
+    let idx = -1;
+    for (let i = src.length - 1; i >= 0; i--) {
+      if (src[i].canvas === canvas) {
+        idx = i;
+        break;
+      }
+    }
+    if (idx < 0) {
+      shellToast(dir === 'undo' ? 'Nothing to undo on this timeline.' : 'Nothing to redo.');
+      return;
+    }
+    const entry = src[idx];
+    fetch('/_api/reorder-revert', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ canvas: entry.canvas, seq: entry.seq, dir }),
+    })
+      .then((r) => r.json().catch(() => ({})))
+      .then((j) => {
+        src.splice(idx, 1);
+        if (j?.ok) {
+          dst.push(entry);
+          shellToast(`${dir === 'undo' ? 'Undid' : 'Redid'}: ${entry.label}`, true);
+        } else {
+          // 409 canvas diverged / 404 server restarted — entry is dead, drop it.
+          shellToast(`${dir === 'undo' ? 'Undo' : 'Redo'} skipped: ${j?.error || 'failed'}`);
+        }
+      })
+      .catch(() => shellToast(`${dir === 'undo' ? 'Undo' : 'Redo'} failed: network error`));
+  }, []);
+  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;
+      const fps = s.comps[0]?.fps || 30;
+      const total = Math.max(1, s.total);
+      const doSeek = (f) => {
+        const nf = Math.max(0, Math.min(total - 1, Math.round(f)));
+        setTimelineFrame(nf);
+        setTimelinePlaying(false);
+        s.post({ dgn: 'timeline-seek', frame: nf, id: s.compId });
+      };
+      const snapFrames = () => {
+        const pts = new Set([0, total - 1]);
+        for (const seq of s.sequences || []) {
+          pts.add(seq.from);
+          for (const kf of seq.keyframes || []) {
+            pts.add(kf.from);
+            pts.add(kf.to);
+          }
+        }
+        return [...pts].filter((n) => n >= 0 && n < total).sort((a, b) => a - b);
+      };
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'z' || e.key === 'Z')) {
+        // Cmd+Z / Shift+Cmd+Z — undo/redo the last timeline clip op. Only when
+        // the shell (not the canvas iframe) has focus + the timeline is active,
+        // so the canvas's own annotation undo is untouched.
+        e.preventDefault();
+        tlUndoRedo(e.shiftKey ? 'redo' : 'undo');
+        return;
+      }
+      if (e.key === ' ' || e.code === 'Space') {
+        e.preventDefault();
+        if (s.playing) {
+          setTimelinePlaying(false);
+          s.post({ dgn: 'timeline-pause', id: s.compId });
+        } else {
+          setTimelinePlaying(true);
+          s.post({ dgn: 'timeline-mute', muted: s.muted, id: s.compId });
+          s.post({ dgn: 'timeline-loop', loop: s.loop, id: s.compId });
+          s.post({ dgn: 'timeline-play', id: s.compId });
+        }
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        doSeek(s.frame + (e.shiftKey ? fps : 1));
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        doSeek(s.frame - (e.shiftKey ? fps : 1));
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        doSeek(0);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        doSeek(total - 1);
+      } else if (e.key === '.') {
+        e.preventDefault();
+        const next = snapFrames().find((n) => n > s.frame);
+        if (next != null) doSeek(next);
+      } else if (e.key === ',') {
+        e.preventDefault();
+        const prev = snapFrames()
+          .reverse()
+          .find((n) => n < s.frame);
+        if (prev != null) doSeek(prev);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // DDR-148 — reset the Timeline's comp meta when the active canvas changes (a
+  // non-comp canvas fires no announce, so stale comps would linger), then ask
+  // the (possibly already-mounted) active canvas to re-announce. video-comp.tsx
+  // answers `timeline-request-comps` with a fresh `timeline-comps`.
+  useEffect(() => {
+    setActiveComps([]);
+    setTimelineFrame(0);
+    setTimelinePlaying(false);
+    const t = setTimeout(() => postToActiveCanvas({ dgn: 'timeline-request-comps' }), 60);
+    return () => clearTimeout(t);
+  }, [activePath, postToActiveCanvas]);
+
+  // DDR-148 — fetch the active canvas's raw source when the Timeline is open.
+  // Re-runs when a comp is (re)announced, so it refreshes after a canvas edit.
+  const [timelineSource, setTimelineSource] = useState('');
+  // DDR-150 dogfood — authoritative per-clip media from the enumerator (handles
+  // 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([]);
+  useEffect(() => {
+    if (!timelineOpen || activeComps.length === 0 || !activePath || activePath === SYSTEM_TAB) {
+      setTimelineSource('');
+      setTimelineClipMedia([]);
+      return undefined;
+    }
+    let alive = true;
+    fetch(`/_api/canvas-source?file=${encodeURIComponent(activePath)}`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((j) => {
+        if (alive && j?.ok && typeof j.source === 'string') setTimelineSource(j.source);
+      })
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [timelineOpen, activeComps, activePath]);
+
+  // Authoritative per-clip media (comp-clips) — a SEPARATE effect keyed on the
+  // RESOLVED artboard id, which the parser only knows AFTER timelineSource
+  // arrives. Fetching it here (not in the source effect) means it re-runs once
+  // the parser scopes to the right comp — so a multi-comp canvas (the showreel:
+  // Movie + Reel) overlays the CORRECT comp's media, not the enumerator's own
+  // fallback pick.
+  useEffect(() => {
+    if (!timelineOpen || !activePath || activePath === SYSTEM_TAB || !timelineSource) {
+      setTimelineClipMedia([]);
+      return undefined;
+    }
+    let alive = true;
+    const artboardId = timelineArtboardId || undefined;
+    const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+    fetch(ccUrl)
+      .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);
+      })
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [timelineOpen, activePath, timelineSource, timelineArtboardId]);
+
+  // Parse (cheap) — re-runs on source change AND on selection change, so the
+  // Timeline REDRAWS to whichever artboard the user just selected/moved to.
+  useEffect(() => {
+    if (!timelineSource) {
+      setTimelineSequences([]);
+      setTimelineAudio([]);
+      setTimelineTotal(0);
+      return;
+    }
+    const total = activeComps[0]?.durationInFrames || 0;
+    const artboard = canvasActiveArtboard ?? selected?.artboardId ?? null;
+    const parsed = parseCompTimeline(timelineSource, total, artboard);
+    setTimelineArtboardId(parsed.artboardId ?? artboard ?? null);
+    // Overlay the enumerator's authoritative media (kind badge + replace target)
+    // onto each row by sequence index — it sees wrapper-component + array-fed
+    // media the row parser can't (the showreel <ClipShot clip={CLIPS[i]}/> case).
+    const merged = parsed.sequences.map((s, i) => {
+      const cm = timelineClipMedia[i];
+      if (!cm) return s;
+      return {
+        ...s,
+        mediaTag: cm.mediaTag ?? s.mediaTag,
+        mediaSrc: cm.mediaSrc ?? s.mediaSrc,
+        // Replaceable when the enumerator found an addressable media target:
+        // a literal-src element (mediaCdId) or an array-fed src (mediaArrayRef).
+        replaceable: !!(cm.mediaCdId || cm.mediaArrayRef),
+        // The clip's stacked layers (mp4 background + title/…) for expandable rows.
+        layers: Array.isArray(cm.layers) ? cm.layers : [],
+        hidden: !!cm.hidden,
+      };
+    });
+    setTimelineSequences(merged);
+    setTimelineAudio(parsed.audio || []);
+    setTimelineTotal(parsed.total);
+  }, [timelineSource, timelineClipMedia, selected, activeComps, canvasActiveArtboard]);
+
   const toggleAnnotations = useCallback(() => {
     setAnnotationsVisible((v) => {
       const next = !v;
@@ -6563,6 +6992,11 @@ function App() {
             // the branch-scoped tree so other open tabs reflect it without a
             // reload. Cross-machine peers get a new canvas via git "Get latest".
             loadTree();
+          } else if (m.type === 'config-updated') {
+            // Server hot-reloaded .design/config.json (/design:setup-ds rewrote
+            // it) — refetch /_config so designSystems / tokensCssRel / groups
+            // match. The tree refresh arrives separately via canvas-list-update.
+            loadServerConfig();
           } else if (m.type === 'acp-focus') {
             // Phase 31 (DDR-123) — `/design:chat` from the terminal asked us to
             // surface the native ACP chat sidepanel. Native-only (the panel
@@ -6590,9 +7024,9 @@ function App() {
     }
     connect();
     return () => wsRef.current && wsRef.current.close();
-    // loadTree is a stable useCallback([]); listed so the canvas-list-update
-    // handler always calls the live reference.
-  }, [loadTree]);
+    // loadTree + loadServerConfig are stable useCallback([])s; listed so the
+    // canvas-list-update / config-updated handlers always call the live refs.
+  }, [loadTree, loadServerConfig]);
 
   function wsSend(obj) {
     const ws = wsRef.current;
@@ -6878,6 +7312,139 @@ function App() {
     [loadTree, openTab]
   );
 
+  // 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
+  // an assembled video-comp (kind: 'video-comp') → opens the new, immediately
+  // hand-editable comp. Durations default server-side to fps*3 (the user trims on
+  // the Timeline); client-side <video>.duration probing is a documented tightening.
+  const assembleVideo = useCallback(async () => {
+    if (!activePath || activePath === SYSTEM_TAB) return;
+    try {
+      const ar = await fetch(`/_api/annotations?file=${encodeURIComponent(activePath)}`);
+      const svg = ar.ok ? await ar.text() : '';
+      const clips = [];
+      if (svg) {
+        const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
+        for (const g of doc.querySelectorAll('[data-tool="mediaref"]')) {
+          const src = g.getAttribute('data-src');
+          if (!src) continue;
+          clips.push({ src, mediaKind: g.getAttribute('data-media-kind') === 'audio' ? 'audio' : 'video' });
+        }
+      }
+      if (clips.length === 0) {
+        window.alert('Drop video/audio clips on the canvas first, then assemble them into a video.');
+        return;
+      }
+      const baseName = displayName(basename(activePath)).replace(/\.tsx$/i, '');
+      const name = `${baseName} Video`;
+      const r = await fetch('/_api/canvas', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, kind: 'video-comp', clips }),
+      });
+      const j = await r.json().catch(() => ({}));
+      if (!r.ok || !j.ok) {
+        window.alert(`Assemble failed: ${j.error || `error ${r.status}`}`);
+        return;
+      }
+      await loadTree();
+      openTab(j.file);
+    } catch (e) {
+      window.alert(`Assemble failed: ${e instanceof Error ? e.message : 'network error'}`);
+    }
+  }, [activePath, loadTree, openTab]);
+
+  // DDR-150 dogfood #5 — shared replace-media flow, PICKER-FIRST. The <input
+  // type=file> is created + clicked SYNCHRONOUSLY inside the caller's click
+  // gesture (browsers revoke transient user-activation after any await, which is
+  // why the old fetch-then-click never opened the dialog). The comp-clips lookup
+  // + upload + src patch all happen in the change handler, where no activation
+  // is needed. `resolveCdId(cc)` maps the fresh enumerator payload to the target
+  // media target (sequence clip via cd-id, audio bed via cd-id, or a showreel
+  // array-fed src via mediaArrayRef → /_api/edit-array-src). `resolveTarget(cc)`
+  // returns { cdId } | { arrayRef } | null.
+  const replaceMediaViaPicker = useCallback(
+    ({ accept, resolveTarget }) => {
+      const canvas = activePath;
+      const artboardId = timelineArtboardId || undefined;
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = accept;
+      // OFF-SCREEN, not display:none — the native desktop app (Tauri WKWebView)
+      // will NOT present the file panel for a `display:none` input (it must be
+      // laid out). Off-screen + transparent works in both WKWebView and browsers
+      // (dogfood: "replace ... nefunguje ale v desktop app"). Guard against a
+      // cancelled dialog leaking the node with a one-shot focus cleanup.
+      input.style.cssText =
+        'position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none';
+      document.body.appendChild(input);
+      const cleanup = () => {
+        if (input.isConnected) input.remove();
+      };
+      // If the user cancels the panel, `change` never fires — reclaim the node
+      // when focus returns to the window (fires on both pick and cancel).
+      window.addEventListener('focus', () => setTimeout(cleanup, 300), { once: true });
+      input.addEventListener('change', () => {
+        const file = input.files?.[0];
+        cleanup();
+        if (!file) return;
+        const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(canvas)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+        fetch(ccUrl)
+          .then((r) => r.json().catch(() => ({})))
+          .then((cc) => {
+            const target = resolveTarget(cc);
+            if (!target) {
+              shellToast('No replaceable media here (its src is computed) — edit via chat.');
+              return null;
+            }
+            return fetch('/_api/asset', {
+              method: 'POST',
+              headers: { 'Content-Type': file.type || 'application/octet-stream' },
+              body: file,
+            })
+              .then((r) => r.json().catch(() => ({})))
+              .then((up) => {
+                if (!up?.path) {
+                  shellToast(`Upload failed: ${up?.error || 'unknown error'}`);
+                  return null;
+                }
+                if (target.arrayRef) {
+                  // Showreel pattern: the src lives in an array literal.
+                  return fetch('/_api/edit-array-src', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({
+                      canvas,
+                      arrayName: target.arrayRef.arrayName,
+                      index: target.arrayRef.index,
+                      field: target.arrayRef.field,
+                      value: up.path,
+                    }),
+                  });
+                }
+                return fetch('/_api/edit-attr', {
+                  method: 'POST',
+                  headers: { 'content-type': 'application/json' },
+                  body: JSON.stringify({ canvas, id: target.cdId, attr: 'src', value: up.path }),
+                });
+              });
+          })
+          .then((r) => (r ? r.json() : null))
+          .then((j) => {
+            if (j && !j.ok) shellToast(`Replace refused: ${j.error || 'failed'}`);
+            else if (j && j.ok) {
+              shellToast('Media replaced.', true);
+              if (j.seq != null) pushTlUndo(canvas, j.seq, 'replace media');
+            }
+          })
+          .catch(() => shellToast('Replace failed: network error'));
+      });
+      input.click();
+    },
+    [activePath, timelineArtboardId, pushTlUndo]
+  );
+
   // Phase 22 — soft-delete a canvas from the file tree. Confirms (destructive),
   // DELETEs to the main-origin-only endpoint, refreshes the tree, and resets the
   // active tab if the deleted canvas was open. The server moves the whole sidecar
@@ -7020,7 +7587,18 @@ function App() {
         // Phase 12 (DDR-103) — inline text edit committed in the canvas. POST to
         // the main-origin-only /_api/edit-text → editText writes the escaped
         // JSXText to source; the file-watcher HMR reload then shows the new text.
-        // A refusal (mixed/expression content) is logged, not fatal.
+        // DDR-150 P1: a refusal is NO LONGER silent — post `edit-reverted` back
+        // to the canvas, which reverts the optimistic contenteditable text AND
+        // toasts the reason, so a failed edit can't silently vanish on the next
+        // reload ("my text edit didn't stick"). The user-facing toast lives
+        // canvas-side (showCanvasToast) because App has no in-scope status
+        // surface — `setStatus` belongs to ExportDialog, not App.
+        const editSource = e.source;
+        const revert = (reason) => {
+          try {
+            editSource?.postMessage({ dgn: 'edit-reverted', op: 'text', id: m.id, reason }, '*');
+          } catch {}
+        };
         fetch('/_api/edit-text', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
@@ -7028,9 +7606,9 @@ function App() {
         })
           .then((r) => r.json().catch(() => ({})))
           .then((j) => {
-            if (!j.ok) console.warn('[edit-text]', j.error || 'failed');
+            if (!j.ok) revert(j.error || "this element can't be edited inline");
           })
-          .catch(() => {});
+          .catch(() => revert('network error'));
       } else if (m.dgn === 'apply-edit' && m.id && (m.op === 'css' || m.op === 'text' || m.op === 'attr')) {
         // Inline-edit undo/redo (DDR-103/104 follow-up). The canvas iframe's
         // `edit-source` command can't call the main-origin-only `/_api/edit-*`
@@ -7068,6 +7646,10 @@ function App() {
             })
               .then((r) => r.json().catch(() => ({})))
               .then((j) => {
+                // Undo/redo lane (Cmd+Z/Cmd+Shift+Z re-application). The primary
+                // edit-text lane above owns the user-facing revert + toast; a
+                // refusal here is logged. (DDR-150 P1 kept this a warn after the
+                // setStatus-scope fix — setStatus is not in App's scope.)
                 if (!j.ok) console.warn('[apply-edit]', op, j.error || 'failed');
               })
               .catch(() => {})
@@ -7221,6 +7803,49 @@ function App() {
         // meta.json-derived seed when the canvas knows better. Clamp.
         const n = Math.round(m.count);
         if (Number.isFinite(n) && n >= 0 && n <= 999) setActiveArtboards(n);
+      } else if (m.dgn === 'active-artboard') {
+        // DDR-148 — canvas-lib reports the viewport-active artboard on pan. Gate
+        // to the ACTIVE canvas window (a background canvas must not hijack the
+        // Timeline's target). The Timeline re-parses to this artboard's comp.
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+        // Cap the id like the sibling timeline-comps handler (defensive; inert).
+        setCanvasActiveArtboard(typeof m.id === 'string' ? m.id.slice(0, 120) : null);
+      } else if (m.dgn === 'timeline-comps' && Array.isArray(m.comps)) {
+        // DDR-148 — a video-comp announces its comp meta (from video-comp.tsx).
+        // Gate to the ACTIVE canvas window (phase-28 F-2 pattern): a background
+        // canvas must not plant comps into the Timeline panel, which shows the
+        // active canvas's comps. Inert display, but keep the seam closed.
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+        const safe = m.comps
+          .filter((c) => c && typeof c.id === 'string')
+          .slice(0, 32)
+          .map((c) => ({
+            id: String(c.id).slice(0, 120),
+            fps: Math.max(1, Math.min(120, Math.round(Number(c.fps) || 30))),
+            durationInFrames: Math.max(1, Math.min(1_000_000, Math.round(Number(c.durationInFrames) || 1))),
+            width: Math.max(1, Math.round(Number(c.width) || 0)),
+            height: Math.max(1, Math.round(Number(c.height) || 0)),
+          }));
+        setActiveComps(safe);
+      } else if (m.dgn === 'timeline-frame' && typeof m.frame === 'number') {
+        // Live playhead mirror from the Player (preview scrub/playback).
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+        // Only the Timeline's target comp drives the playhead — a sibling
+        // artboard's Player must not fight it for the readout (multi-comp canvas).
+        if (m.id && timelineCompIdRef.current && m.id !== timelineCompIdRef.current) return;
+        if (Number.isFinite(m.frame)) setTimelineFrame(Math.max(0, Math.round(m.frame)));
       } else if (m.dgn === 'toggle-palette') {
         // ⌘K pressed while focus was inside the canvas iframe — the injected
         // inspector forwards the chord here since the iframe's keydown never
@@ -7357,6 +7982,15 @@ function App() {
         const fn = /filename="([^"]+)"/.exec(disp);
         const filename = (fn && fn[1]) || 'export';
         const blob = await r.blob();
+        if (isNativeApp()) {
+          // Native: route the bridged in-canvas export through the OS save dialog
+          // too (WKWebView swallows the `<a download>` blob). Mirror the shell
+          // ExportDialog's doExport native branch.
+          const bytes = Array.from(new Uint8Array(await blob.arrayBuffer()));
+          const savedPath = await saveExport(filename, bytes);
+          reply(savedPath ? { ok: true, filename } : { ok: false, error: 'Save cancelled' });
+          return;
+        }
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
@@ -7625,6 +8259,18 @@ function App() {
       // makes inspector CSS / inline text / attr edits undoable from anywhere.
       if (meta && !e.altKey && (e.key === 'z' || e.key === 'Z' || e.key === 'y' || e.key === 'Y')) {
         if (!inEditable && !inCanvasIframe && activePath && activePath !== SYSTEM_TAB) {
+          // DDR-150 dogfood #1 (team finding) — SINGLE OWNER per keypress. With
+          // the Timeline open on a video-comp canvas, the timeline undo stack
+          // owns Cmd+Z/Shift+Cmd+Z (the timeline keydown effect performs it).
+          // Without this skip, BOTH handlers fired on one keypress — undoing a
+          // clip op AND popping the canvas's annotation undo simultaneously.
+          if (
+            (e.key === 'z' || e.key === 'Z') &&
+            tlKeyRef.current.open &&
+            tlKeyRef.current.comps?.length
+          ) {
+            return; // the timeline shortcuts effect claims it
+          }
           e.preventDefault();
           const redo = e.key === 'y' || e.key === 'Y' || e.shiftKey;
           postToActiveCanvas({ dgn: redo ? 'redo' : 'undo' });
@@ -8007,6 +8653,9 @@ function App() {
           inspectorOpen={inspectorOpen}
           inspectorTab={inspectorTab}
           onToggleInspector={() => toggleRightPanel('inspector')}
+          timelineOpen={timelineOpen}
+          onToggleTimeline={toggleTimeline}
+          hasComps={activeComps.length > 0}
           assistantOpen={assistantOpen}
           onToggleAssistant={() => toggleRightPanel('assistant')}
           assistantBusy={assistantBusy}
@@ -8028,6 +8677,7 @@ function App() {
               60
             );
           }}
+          onAssembleVideo={assembleVideo}
           onOpenExport={(mode) => setExportDialog({ mode })}
           onReload={reloadActive}
           onCloseCanvas={() => activePath && closeTab(activePath)}
@@ -8219,6 +8869,347 @@ function App() {
             />
           )}
         </div>
+        {/* DDR-148 — Timeline is a BOTTOM dock (full-width strip below the stage,
+            above the status bar) — video timelines are horizontal. */}
+        {timelineOpen && (
+          <TimelinePanel
+            comps={activeComps}
+            sequences={timelineSequences}
+            audio={timelineAudio}
+            total={timelineTotal}
+            frame={timelineFrame}
+            playing={timelinePlaying}
+            loop={timelineLoop}
+            onSeek={(f) => {
+              setTimelineFrame(f);
+              setTimelinePlaying(false);
+              postToActiveCanvas({ dgn: 'timeline-seek', frame: f, id: timelineCompId });
+            }}
+            onPlay={() => {
+              setTimelinePlaying(true);
+              // Sync mute + loop to the Player, then play (the artboard has no
+              // chrome — the Timeline owns transport/sound/loop now).
+              postToActiveCanvas({ dgn: 'timeline-mute', muted: timelineMuted, id: timelineCompId });
+              postToActiveCanvas({ dgn: 'timeline-loop', loop: timelineLoop, id: timelineCompId });
+              postToActiveCanvas({ dgn: 'timeline-play', id: timelineCompId });
+            }}
+            onPause={() => {
+              setTimelinePlaying(false);
+              postToActiveCanvas({ dgn: 'timeline-pause', id: timelineCompId });
+            }}
+            onToggleLoop={() =>
+              setTimelineLoop((v) => {
+                const next = !v;
+                postToActiveCanvas({ dgn: 'timeline-loop', loop: next, id: timelineCompId });
+                return next;
+              })
+            }
+            muted={timelineMuted}
+            onToggleMute={() => {
+              setTimelineMuted((v) => {
+                const next = !v;
+                postToActiveCanvas({ dgn: 'timeline-mute', muted: next, id: timelineCompId });
+                return next;
+              });
+            }}
+            volume={timelineVolume}
+            onVolume={(v) => {
+              setTimelineVolume(v);
+              // Dragging volume implies "I want to hear it" — unmute.
+              if (v > 0 && timelineMuted) {
+                setTimelineMuted(false);
+                postToActiveCanvas({ dgn: 'timeline-mute', muted: false, id: timelineCompId });
+              }
+              postToActiveCanvas({ dgn: 'timeline-volume', volume: v, id: timelineCompId });
+            }}
+            onRetime={(index, 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.
+              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 body = clip?.stableId
+                    ? {
+                        canvas: activePath,
+                        artboardId,
+                        stableId: clip.stableId,
+                        contentHash: clip.contentHash,
+                        ...patch,
+                      }
+                    : { canvas: activePath, index, ...patch };
+                  return fetch('/_api/retime-sequence', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify(body),
+                  });
+                })
+                .then((r) => r.json())
+                .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');
+                  }
+                  // 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) => {
+              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
+              // the transient user-activation after an await/fetch round-trip, so
+              // the old fetch-then-click() silently no-oped ("replace neotevře
+              // žádné okno"). Picker first; resolve the target + upload in the
+              // change handler.
+              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];
+                  if (clip?.mediaArrayRef) return { arrayRef: clip.mediaArrayRef };
+                  if (clip?.mediaCdId) return { cdId: clip.mediaCdId };
+                  return null;
+                },
+              });
+            }}
+            onReplaceAudio={(index) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 dogfood #5 — audio beds are addressable too: the
+              // enumerator lists loose media (an <Audio> under the reel) with a
+              // cd-id; ⇄ on the audio row swaps its src.
+              replaceMediaViaPicker({
+                accept: 'audio/*',
+                resolveTarget: (cc) => {
+                  const beds =
+                    cc?.ok && Array.isArray(cc.media)
+                      ? cc.media.filter((m) => m.tag === 'Audio')
+                      : [];
+                  return beds[index]?.cdId ? { cdId: beds[index].cdId } : null;
+                },
+              });
+            }}
+            onReplaceLayer={(clipIndex, 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 kind =
+                timelineSequences[clipIndex]?.layers?.[layerIndex]?.kind === 'audio'
+                  ? 'audio/*'
+                  : timelineSequences[clipIndex]?.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];
+                  if (ly?.mediaArrayRef) return { arrayRef: ly.mediaArrayRef };
+                  if (ly?.mediaCdId) return { cdId: ly.mediaCdId };
+                  return null;
+                },
+              });
+            }}
+            onReorder={(index, 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).
+              // ▲ forward = move AFTER the next sibling; ▼ backward = move BEFORE
+              // the previous sibling. Both clips addressed by comp-scoped stableId +
+              // fingerprint (via /_api/comp-clips); the engine refuses a TransitionSeries
+              // clip + a stale/raced target, then reloads via the file watcher.
+              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 moved = seqs[index] || null;
+                  const refIdx = direction === 'forward' ? index + 1 : index - 1;
+                  const ref = seqs[refIdx] || null;
+                  const position = direction === 'forward' ? 'after' : 'before';
+                  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,
+                      stableId: moved.stableId,
+                      contentHash: moved.contentHash,
+                      refStableId: ref.stableId,
+                      refContentHash: ref.contentHash,
+                      position,
+                    }),
+                  });
+                })
+                .then((r) => (r ? r.json() : null))
+                .then((j) => {
+                  if (j && !j.ok) {
+                    console.warn('[reorder-clip]', j.error || 'failed');
+                    shellToast(`Reorder refused: ${j.error || 'failed'}`);
+                  } else if (j?.seq != null) {
+                    pushTlUndo(activePath, j.seq, 'reorder clip');
+                  }
+                })
+                .catch(() => {});
+            }}
+            onToggleHide={(index) => {
+              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
+              // stableId + fingerprint.
+              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/toggle-hide', {
+                    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) shellToast(`Hide refused: ${j.error || 'failed'}`);
+                  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');
+                  }
+                })
+                .catch(() => shellToast('Hide failed: network error'));
+            }}
+            onDropMedia={(file) => {
+              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.
+              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,
+              })
+                .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', {
+                    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,
+                    }),
+                  });
+                })
+                .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');
+                  }
+                })
+                .catch(() => {});
+            }}
+            height={timelineHeight}
+            onResize={setTimelineHeight}
+            onClose={() => setTimelineOpen(false)}
+          />
+        )}
         <StatusBar
           activePath={activePath}
           selected={selected}
@@ -8264,6 +9255,14 @@ function App() {
           mode={exportDialog.mode}
           initialScope={exportDialog.scope}
           activePath={activePath}
+          hasComps={activeComps.length > 0}
+          // 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
+          // viewport-active artboard canvas-lib reports on pan. Without this,
+          // scope=artboard fell back to `:first-of-type` (always the first).
+          activeArtboardId={selected?.artboardId ?? canvasActiveArtboard ?? null}
+          selection={selected?.selector ? { selector: selected.selector, file: selected.file } : null}
           onClose={() => setExportDialog(null)}
         />
       )}