@1agh/maude 0.58.3 → 0.59.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}

package/apps/studio/client/panels/SyncPanel.jsx

@@ -0,0 +1,229 @@
+// feature-sync-progress-modal — the per-file Sync panel (right dock).
+//
+// Pure surfacing of the `sync:status` payload: the DDR-102 per-document
+// `items` list plus the DDR-217 asset lane's live progress. No new sync
+// semantics and NO new sync words — the header sentence comes from
+// `syncPresentation` (the one rule the status-bar chip and the cloud rail
+// already share), and rows map DocSyncState onto that same vocabulary:
+// pending → syncing, connected → synced, auth-rejected → refused.
+//
+// DDR-054 — slugs are local canvas identifiers and asset keys are local
+// paths, but everything renders through safeName anyway: this payload is
+// read back off disk (`_sync.json`), and a bounded text-only row is free.
+
+import { useMemo } from 'react';
+
+import { safeName, syncPresentation } from '../../sync/presentation.ts';
+
+/** DocSyncState → the presentation vocabulary (never invent a new word). */
+const STATE_WORD = {
+  pending: 'syncing',
+  connected: 'synced',
+  'auth-rejected': 'refused',
+};
+
+/** AuthFailureClass → plain words for the refused-row detail. */
+const REASON_WORD = {
+  'rate-limit': 'rate limited',
+  'not-authorized': 'not authorized',
+  'invalid-token': 'sign-in expired',
+  generic: 'refused by the hub',
+};
+
+function Row({ item }) {
+  const name = safeName(item.slug, '(unnamed)');
+  const state = STATE_WORD[item.state] || 'syncing';
+  const reason = item.state === 'auth-rejected' ? REASON_WORD[item.reason] || REASON_WORD.generic : null;
+  return (
+    <li className={'sp-row is-' + item.state} data-testid={'sync-row-' + item.slug}>
+      <span className="sp-row-dot" aria-hidden="true" />
+      <span className="sp-row-name" title={name}>
+        {name}
+      </span>
+      <span className="sp-row-state">{reason ? `refused — ${reason}` : state}</span>
+    </li>
+  );
+}
+
+/** Which declared canvas group a slug belongs to (slugs collapse '/' → '-'). */
+function groupOf(slug, groupPaths) {
+  for (const p of groupPaths) {
+    const g = p.replace(/\//g, '-');
+    if (slug === g || slug.startsWith(g + '-')) return p;
+  }
+  return null;
+}
+
+// FAIL CLOSED, like presentation.ts `readCounts`: this payload is JSON.parse
+// of `_sync.json` with no schema, so a partial write / older producer must
+// degrade to "nothing to show", never crash the render or print NaN.
+
+const isCount = (n) => typeof n === 'number' && Number.isInteger(n) && n >= 0;
+
+/** The per-doc rows, or [] when the shape can't be trusted. */
+function readItems(raw) {
+  if (!Array.isArray(raw)) return [];
+  return raw.filter((i) => i && typeof i.slug === 'string' && typeof i.state === 'string');
+}
+
+/** The asset lane, or null when any count is unreadable. */
+function readAssets(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  if (![raw.total, raw.done, raw.pushed, raw.skipped, raw.failedCount].every(isCount)) return null;
+  const failures = Array.isArray(raw.failures)
+    ? raw.failures.filter((f) => f && typeof f.key === 'string')
+    : [];
+  return { ...raw, failures };
+}
+
+export default function SyncPanel({
+  status, // the live `sync:status` payload (never null while mounted)
+  project, // display name for the header sentence (hub-supplied → safeName'd)
+  groupPaths = [], // declared canvas-group paths, for row grouping
+  resizing,
+  onClose,
+}) {
+  const p = syncPresentation(status, { project });
+  const items = readItems(status?.items);
+  const truncated = isCount(status?.itemsTruncated) ? status.itemsTruncated : 0;
+  const assets = readAssets(status?.assets);
+  const assetFailures = assets?.failures || [];
+
+  const { attention, byGroup } = useMemo(() => {
+    const attention = items.filter((i) => i.state === 'auth-rejected');
+    const rest = items.filter((i) => i.state !== 'auth-rejected');
+    const byGroup = new Map();
+    for (const item of rest) {
+      const g = groupOf(item.slug, groupPaths) ?? 'canvases';
+      if (!byGroup.has(g)) byGroup.set(g, []);
+      byGroup.get(g).push(item);
+    }
+    return { attention, byGroup };
+  }, [items, groupPaths]);
+
+  // Same fail-closed rule for the header chip — readCounts-shaped, so the
+  // chip can never say "NaN synced" while the note below fails closed.
+  const rawDocs = status?.docs;
+  const docs =
+    rawDocs && [rawDocs.synced, rawDocs.pending, rawDocs.rejected].every(isCount)
+      ? rawDocs
+      : null;
+  const counts =
+    docs &&
+    [
+      `${docs.synced} synced`,
+      docs.pending > 0 ? `${docs.pending} syncing` : null,
+      docs.rejected > 0 ? `${docs.rejected} refused` : null,
+    ]
+      .filter(Boolean)
+      .join(' · ');
+
+  return (
+    <aside
+      className={'st-rpanel sp-panel' + (resizing ? ' is-resizing' : '')}
+      aria-label="Sync"
+      data-testid="sync-panel"
+    >
+      <div className="gp-head">
+        <div className="gp-panel-hd">
+          <span className="gp-panel-title">Sync</span>
+          {counts && <span className="gp-count">{counts}</span>}
+          <span className="gp-spacer" />
+          <button type="button" className="gp-x" aria-label="Close" onClick={onClose}>
+            ×
+          </button>
+        </div>
+        {/* The one-rule sentence, live — same aria pattern as the rail note:
+            a polite announcement when the phase changes, never a focus steal. */}
+        {p && (
+          <div className="sp-note" role="status" aria-live="polite">
+            <span className={'sp-note-dot is-' + p.phase} aria-hidden="true" />
+            <span>
+              {p.title}
+              {p.next ? ` ${p.next}` : ''}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <div className="sp-body">
+        {items.length === 0 && !assets && (
+          <div className="gp-empty">
+            <p>No per-file detail yet — it arrives with the first sync report after this panel shipped. If this persists, restart Maude.</p>
+          </div>
+        )}
+
+        {attention.length > 0 && (
+          <section aria-label="Needs attention">
+            <div className="gp-sect-label sp-sect-attention">Needs attention</div>
+            <ul className="sp-list">
+              {attention.map((item) => (
+                <Row key={item.slug} item={item} />
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {[...byGroup.entries()].map(([group, rows]) => (
+          <section key={group} aria-label={group}>
+            <div className="gp-sect-label">
+              {group} <span className="gp-group-count">{rows.length}</span>
+            </div>
+            <ul className="sp-list">
+              {rows.map((item) => (
+                <Row key={item.slug} item={item} />
+              ))}
+            </ul>
+          </section>
+        ))}
+
+        {truncated > 0 && (
+          <div className="sp-truncated">
+            +{truncated} more synced canvas{truncated === 1 ? '' : 'es'} not listed.
+          </div>
+        )}
+
+        {assets && (
+          <section aria-label="Assets" data-testid="sync-assets">
+            <div className="gp-sect-label">
+              assets <span className="gp-group-count">{assets.total}</span>
+            </div>
+            <div className="sp-assets-line">
+              {assets.finished
+                ? `${assets.pushed} pushed · ${assets.skipped} already there` +
+                  (assets.failedCount > 0 ? ` · ${assets.failedCount} failed` : '')
+                : `Pushing assets — ${assets.done} of ${assets.total}…`}
+            </div>
+            {!assets.finished && assets.active && (
+              <div className="sp-assets-active" title={safeName(assets.active, '')}>
+                ↑ {safeName(assets.active, '')}
+              </div>
+            )}
+            {assets.failedCount > 0 && (
+              <ul className="sp-list">
+                {assetFailures.map((f) => (
+                  <li className="sp-row is-auth-rejected" key={f.key}>
+                    <span className="sp-row-dot" aria-hidden="true" />
+                    <span className="sp-row-name" title={safeName(f.key, '(unnamed)')}>
+                      {safeName(f.key, '(unnamed)')}
+                    </span>
+                    <span className="sp-row-state">{safeName(f.reason, 'failed')}</span>
+                  </li>
+                ))}
+                {assets.failedCount > assetFailures.length && (
+                  <li className="sp-truncated">
+                    +{assets.failedCount - assetFailures.length} more failed. All retry on the next
+                    launch.
+                  </li>
+                )}
+              </ul>
+            )}
+            {assets.failedCount > 0 && assets.finished && (
+              <div className="sp-assets-retry">Failed assets retry on the next launch.</div>
+            )}
+          </section>
+        )}
+      </div>
+    </aside>
+  );
+}