@1agh/maude 0.58.3 → 0.60.0

package/apps/studio/client/app.jsx

@@ -33,6 +33,7 @@ import { useTreeDrag } from './use-tree-drag.js';
 import ChatPanel from './panels/ChatPanel.jsx';
 import DiffView from './panels/DiffView.jsx';
 import GitPanel from './panels/GitPanel.jsx';
+import SyncPanel from './panels/SyncPanel.jsx';
 import CloudBar from './panels/CloudBar.jsx';
 import IdentityBar from './panels/IdentityBar.jsx';
 import OnboardingWizard from './panels/OnboardingWizard.jsx';
@@ -44,6 +45,11 @@ import { FilePreview, sanitizeDisplayText } from './panels/file-preview.jsx';
 import SetupChecklistDialog, { useSetupReadiness } from './panels/SetupChecklist.jsx';
 import TimelinePanel from './panels/TimelinePanel.jsx';
 import { parseCompTimeline } from './panels/timeline-parse.js';
+import {
+  activeComp,
+  resolveCompTarget,
+  sanitizeArtboardText,
+} from './panels/timeline-comp-target.js';
 import { durationFramesForDrop, probeMediaDuration } from './panels/timeline-media-cache.js';
 import GenerateDialog from './generate-dialog.jsx';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
@@ -149,6 +155,7 @@ const DOCK_PANELS = [
   { id: 'inspector', label: 'Inspector' },
   { id: 'comments', label: 'Comments' },
   { id: 'changes', label: 'Changes' },
+  { id: 'sync', label: 'Sync' }, // feature-sync-progress-modal — linked projects only
   { id: 'assistant', label: 'Assistant' },
 ];
 const PANEL_SIDES_DEFAULTS = {
@@ -157,6 +164,7 @@ const PANEL_SIDES_DEFAULTS = {
   inspector: 'right',
   comments: 'right',
   changes: 'right',
+  sync: 'right',
   assistant: 'right',
 };
 const PANEL_SIDES_STORE = 'mdcc-panel-sides';
@@ -1559,7 +1567,12 @@ function ExportDialog({
   // never a silent truncation, never a surprise refusal.
   const EXPORT_SAFE_FRAMES = 900;
   const EXPORT_DEFAULT_CAP = 3600;
-  const exportComp = comps[0] || null;
+  // The comp being exported — resolved to the artboard this dialog targets, not
+  // to whichever comp mounted first (#75). It drives the long-comp consent
+  // notice AND `options.maxFrames`, so a wrong pick both misstates the frame
+  // count to the user and raises the server-side cap on behalf of a comp that
+  // isn't the one leaving the machine.
+  const exportComp = activeComp(comps, resolveCompTarget(comps, { artboardId: activeArtboardId }));
   const exportCompFrames = exportComp?.durationInFrames || 0;
   const exportCompFps = exportComp?.fps || 30;
   const exportIsHeavy = card.temporal && exportCompFrames > EXPORT_SAFE_FRAMES;
@@ -4687,6 +4700,8 @@ function StatusBar({
   onClearSelected,
   syncStatus,
   syncProject,
+  syncOpen = false,
+  onOpenSync,
   changesCount = 0,
   unpushed = 0,
   changesOpen = false,
@@ -4727,6 +4742,19 @@ function StatusBar({
       title: `${p.title}${detail}${p.next ? ` — ${p.next}` : ''}`,
     };
   })();
+  // One body for both chip forms (button vs plain span) below.
+  const syncSlotBody = syncSlot && (
+    <>
+      <span
+        className={'st-sb-sync-dot' + (syncSlot.online ? ' is-online' : '')}
+        aria-hidden="true"
+      />
+      <span className="lbl">hub sync</span>
+      <span className="val" title={syncSlot.title}>
+        {syncSlot.label}
+      </span>
+    </>
+  );
 
   return (
     <footer className="st-statusbar" role="contentinfo" data-testid="statusbar">
@@ -4801,19 +4829,29 @@ function StatusBar({
 
       {/* P5 (Plan C) — always-on hub-sync slot (was notSyncable-only per DDR-060
           / 9.1-D). Now also surfaces the connection-state machine's queued/synced
-          counter for the common linked case. Solo projects render nothing. */}
-      {syncSlot && (
-        <span className="st-sb-slot st-sb-sync" role="group" aria-label="Hub sync">
-          <span
-            className={'st-sb-sync-dot' + (syncSlot.online ? ' is-online' : '')}
-            aria-hidden="true"
-          />
-          <span className="lbl">hub sync</span>
-          <span className="val" title={syncSlot.title}>
-            {syncSlot.label}
+          counter for the common linked case. Solo projects render nothing.
+          feature-sync-progress-modal — a BUTTON that toggles the per-file Sync
+          panel (like the Changes chip toggles GitPanel); the plain-span form
+          stays for servers/sessions that pass no handler. */}
+      {syncSlot &&
+        (onOpenSync ? (
+          <button
+            type="button"
+            className={'st-sb-slot st-sb-sync st-sb-sync--btn' + (syncOpen ? ' is-open' : '')}
+            onClick={onOpenSync}
+            data-testid="open-sync"
+            data-tip="Open Sync panel"
+            data-tip-pos="top"
+            aria-label="Open Sync panel"
+            aria-pressed={syncOpen}
+          >
+            {syncSlotBody}
+          </button>
+        ) : (
+          <span className="st-sb-slot st-sb-sync" role="group" aria-label="Hub sync">
+            {syncSlotBody}
           </span>
-        </span>
-      )}
+        ))}
 
       {/* Which release this is. Reading it used to mean probing production by
           hand — and the desktop, the browser and a cloud tab all serve the same
@@ -9495,6 +9533,10 @@ function App() {
   // tick, and after each git action — never on the per-edit WS path.
   const [remoteSync, setRemoteSync] = useState(null); // { remoteAhead, behind } | null
   const [changesOpen, setChangesOpen] = useState(false);
+  // feature-sync-progress-modal — the per-file Sync panel; toggled from the
+  // status-bar HUB SYNC chip. Only available while `syncStatus` is non-null
+  // (a linked project), mirroring how `changes` gates on `gitStatus.repo`.
+  const [syncPanelOpen, setSyncPanelOpen] = useState(false);
   const [diffTarget, setDiffTarget] = useState(null);
   const [search, setSearch] = useState('');
   const [systemData, setSystemData] = useState(null);
@@ -9738,18 +9780,6 @@ function App() {
   // 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
-  // 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]);
   // rca/issue-video-artboard-frame-reset-on-edit — last known playhead, read
   // from the `timeline-comps` handler below (which fires on every comp
   // (re)mount, incl. a ⌘R hard iframe reload) to re-seed the fresh Player
@@ -9769,6 +9799,34 @@ function App() {
   useEffect(() => {
     timelineArtboardIdRef.current = timelineArtboardId;
   }, [timelineArtboardId]);
+  // On a multi-comp canvas the Timeline drives ONE comp: the one mounted in the
+  // artboard whose rows the panel is drawing. Resolved by artboard identity
+  // (announced by video-comp.tsx), NOT by duration — two comps of equal length
+  // made the old duration match return the first artboard's Player, so scrub +
+  // playback moved a comp the user wasn't even looking at (issue #75).
+  const timelineCompId = useMemo(
+    () =>
+      resolveCompTarget(activeComps, {
+        // Both signals, in confidence order: the artboard the ROW PARSER scoped
+        // to (lexical, from the .tsx) then the viewport-active one canvas-lib
+        // reports on pan (structural). See resolveCompTarget — when the two
+        // disagree, the one that names a comp actually mounted there wins.
+        artboardId: [timelineArtboardId, canvasActiveArtboard],
+        total: timelineTotal,
+      }),
+    [activeComps, timelineArtboardId, canvasActiveArtboard, timelineTotal]
+  );
+  const timelineCompIdRef = useRef(null);
+  useEffect(() => {
+    timelineCompIdRef.current = timelineCompId;
+  }, [timelineCompId]);
+  // Frame math (drop position, split, overlay insert) must use the timebase of
+  // the comp the Timeline is actually on — `activeComps[0].fps` silently used
+  // the first artboard's (issue #75).
+  const timelineFps = useMemo(
+    () => activeComp(activeComps, timelineCompId)?.fps || 30,
+    [activeComps, timelineCompId]
+  );
   // 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.
@@ -9876,8 +9934,8 @@ function App() {
   const anyRightPanelOpenRef = useRef(false);
   useEffect(() => {
     anyRightPanelOpenRef.current =
-      inspectorOpen || commentsPanelOpen || changesOpen || assistantOpen;
-  }, [inspectorOpen, commentsPanelOpen, changesOpen, assistantOpen]);
+      inspectorOpen || commentsPanelOpen || changesOpen || syncPanelOpen || assistantOpen;
+  }, [inspectorOpen, commentsPanelOpen, changesOpen, syncPanelOpen, assistantOpen]);
   // The right dock holds exactly ONE panel (Changes / Inspector / Comments) at
   // a time — opening any panel REPLACES whatever was there. These two helpers
   // are the single source of that invariant; every open/toggle path routes
@@ -9899,6 +9957,7 @@ function App() {
       inspector: inspectorOpen,
       comments: commentsPanelOpen,
       changes: changesOpen,
+      sync: syncPanelOpen,
       assistant: assistantOpen,
     },
     side: panelSide,
@@ -9909,6 +9968,7 @@ function App() {
     else if (id === 'inspector') setInspectorOpen(val);
     else if (id === 'comments') setCommentsPanelOpen(val);
     else if (id === 'changes') setChangesOpen(val);
+    else if (id === 'sync') setSyncPanelOpen(val);
     else if (id === 'assistant') setAssistantOpen(val);
   }, []);
   const sideOf = useCallback(
@@ -10443,7 +10503,9 @@ function App() {
       // 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;
+      // The timebase of the comp the transport is on, not of whichever comp
+      // announced first — Shift+arrow is "±1 second" on THIS artboard (#75).
+      const fps = activeComp(s.comps, s.compId)?.fps || 30;
       const total = Math.max(1, s.total);
       const doSeek = (f) => {
         const nf = Math.max(0, Math.min(total - 1, Math.round(f)));
@@ -10625,8 +10687,13 @@ function App() {
       setTimelineTotal(0);
       return;
     }
-    const total = activeComps[0]?.durationInFrames || 0;
     const artboard = canvasActiveArtboard ?? selected?.artboardId ?? null;
+    // Seed the parser's fallback total from the comp mounted in THIS artboard,
+    // not from whichever comp announced first (issue #75).
+    const seedComp =
+      (artboard && activeComps.find((c) => c.artboardId === artboard || c.id === artboard)) ||
+      activeComps[0];
+    const total = seedComp?.durationInFrames || 0;
     const parsed = parseCompTimeline(timelineSource, total, artboard);
     setTimelineArtboardId(parsed.artboardId ?? artboard ?? null);
     // Overlay the enumerator's authoritative media (kind badge + replace target)
@@ -11035,13 +11102,30 @@ function App() {
 
   // ----- WebSocket -----
   useEffect(() => {
+    // KEEPALIVE. The inspector feed only pushes on events (a comment, a
+    // selection, sync:status), so an idle designer's socket exchanges nothing
+    // for minutes — and Bun.serve closes a WebSocket after `idleTimeout` (120s
+    // default) with no message in EITHER direction. The client then reconnected
+    // in a 1 s loop, so the status bar read `reconnecting` every couple of
+    // minutes on a perfectly healthy link ("porad reconnecting" while HUB SYNC
+    // said synced — the two are different sockets). A cheap app-level ping every
+    // 25 s keeps the socket active (Bun resets the idle timer on any frame,
+    // inbound OR outbound); the server ignores an unknown message type.
+    let pingTimer = null;
     function connect() {
       const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
       const ws = new WebSocket(proto + '//' + location.host + '/_ws');
       wsRef.current = ws;
-      ws.addEventListener('open', () => setWsConnected(true));
+      ws.addEventListener('open', () => {
+        setWsConnected(true);
+        clearInterval(pingTimer);
+        pingTimer = setInterval(() => {
+          if (ws.readyState === WebSocket.OPEN) ws.send('{"type":"ping"}');
+        }, 25000);
+      });
       ws.addEventListener('close', () => {
         setWsConnected(false);
+        clearInterval(pingTimer);
         setTimeout(connect, 1000);
       });
       ws.addEventListener('error', () => {});
@@ -11161,7 +11245,10 @@ function App() {
       });
     }
     connect();
-    return () => wsRef.current && wsRef.current.close();
+    return () => {
+      clearInterval(pingTimer);
+      if (wsRef.current) wsRef.current.close();
+    };
     // loadTree + loadServerConfig are stable useCallback([])s; listed so the
     // canvas-list-update / config-updated handlers always call the live refs.
   }, [loadTree, loadServerConfig]);
@@ -12509,8 +12596,10 @@ function App() {
             ? 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);
+        // Neutralize + cap exactly like the sibling timeline-comps handler —
+        // this id is matched AGAINST that one, so both sides must go through
+        // the same normalization or an odd-but-legal id would never match.
+        setCanvasActiveArtboard(sanitizeArtboardText(m.id));
       } 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
@@ -12530,6 +12619,13 @@ function App() {
             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)),
+            // The enclosing artboard (issue #75) — the key the transport target
+            // is resolved on, and (the label) shell chrome the user reads. This
+            // is untrusted canvas-origin text, so neutralize the bidi/zero-width
+            // class HERE, at the boundary, and every downstream consumer
+            // inherits a clean value (security-review 2026-08-12).
+            artboardId: sanitizeArtboardText(c.artboardId),
+            artboardLabel: sanitizeArtboardText(c.artboardLabel),
           }));
         setActiveComps(safe);
         // rca/issue-video-artboard-frame-reset-on-edit — the SAME comp
@@ -14240,6 +14336,9 @@ function App() {
     // CHANGE, not cannot SEE: a reviewer needs structure and measured values,
     // which is the whole reason C1 exists.
     if (viewerMode && id === 'assistant') return false;
+    // feature-sync-progress-modal — the Sync panel only exists for a linked
+    // project (solo has no hub, so the tab would open onto nothing).
+    if (id === 'sync') return !!syncStatus;
     return id === 'assistant' ? isNativeApp() : id === 'layers' ? layersMode === 'separate' : true;
   };
   const idsForSide = (side) =>
@@ -14252,6 +14351,7 @@ function App() {
     inspector: inspectorOpen,
     comments: commentsPanelOpen,
     changes: changesOpen,
+    sync: syncPanelOpen,
     assistant: assistantOpen,
   };
   // Per-shell overrides for the dock tab strip. In a cell the `changes` panel
@@ -14369,6 +14469,16 @@ function App() {
           designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
         />
       );
+    if (id === 'sync')
+      return (
+        <SyncPanel
+          status={syncStatus}
+          project={cfg?.cloud?.projectName || project}
+          groupPaths={(groups || []).map((g) => g.path).filter(Boolean)}
+          resizing={resizingFor('sync')}
+          onClose={() => setSyncPanelOpen(false)}
+        />
+      );
     if (id === 'inspector' || id === 'layers')
       return (
         <InspectorPanel
@@ -14703,6 +14813,7 @@ function App() {
         {timelineOpen && (
           <TimelinePanel
             comps={activeComps}
+            compId={timelineCompId}
             sequences={timelineSequences}
             audio={timelineAudio}
             transitions={timelineTransitions}
@@ -14981,7 +15092,7 @@ function App() {
               // 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 fps = timelineFps;
               const canvas = activePath;
               const list = (Array.isArray(files) ? files : [files]).filter(Boolean);
               (async () => {
@@ -15195,7 +15306,7 @@ function App() {
               // happens in the timeline inspector).
               Promise.resolve('Title').then((text) => {
               if (!text) return;
-              const fps = activeComps[0]?.fps || 30;
+              const fps = timelineFps;
               fetch('/_api/insert-sequence', {
                 method: 'POST',
                 headers: { 'content-type': 'application/json' },
@@ -15229,7 +15340,7 @@ function App() {
               (async () => {
               const prompt = 'Describe this shot — double-click to edit';
               const kind = 'veo';
-              const fps = activeComps[0]?.fps || 30;
+              const fps = timelineFps;
               fetch('/_api/insert-sequence', {
                 method: 'POST',
                 headers: { 'content-type': 'application/json' },
@@ -15336,7 +15447,7 @@ function App() {
               // 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;
+                const fps = timelineFps;
                 fetch('/_api/asset', {
                   method: 'POST',
                   headers: { 'Content-Type': type || 'application/octet-stream' },
@@ -15404,6 +15515,10 @@ function App() {
           onClearSelected={clearSelected}
           syncStatus={syncStatus}
           syncProject={cfg?.cloud?.projectName || project}
+          syncOpen={syncPanelOpen}
+          // Toggle through the dock helpers so the one-panel-per-side invariant
+          // holds (opening Sync closes whatever else the right slot shows).
+          onOpenSync={syncStatus ? () => toggleRightPanel('sync') : undefined}
           changesCount={unsavedCount}
           unpushed={gitStatus?.unpushed || 0}
           changesOpen={changesOpen}