@1agh/maude 0.58.2 → 0.59.0

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

@@ -80,7 +80,7 @@ function StatusIcon({ present }) {
   );
 }
 
-export function SetupChecklist({ report, loading, refresh, onStartTour, onBringBrand }) {
+export function SetupChecklist({ report, loading, refresh, onStartTour, onBringBrand, onImportFigma }) {
   return (
     <div className="setup-cl">
       <ul className="setup-cl-list">
@@ -131,6 +131,16 @@ export function SetupChecklist({ report, loading, refresh, onStartTour, onBringB
             Bring my existing brand
           </a>
         )}
+        {onImportFigma && (
+          <button
+            type="button"
+            data-testid="onboarding-import-figma"
+            className="btn btn--ghost btn--sm"
+            onClick={onImportFigma}
+          >
+            Import from Figma
+          </button>
+        )}
         {refresh && (
           <button
             type="button"
@@ -148,7 +158,13 @@ export function SetupChecklist({ report, loading, refresh, onStartTour, onBringB
 
 // Standalone modal, reachable from Help ▸ Quick setup… — reuses the shared
 // help-modal chrome (backdrop + header + body), same shape as ReadinessDialog.
-export default function SetupChecklistDialog({ open, onClose, onStartTour, onBringBrand }) {
+export default function SetupChecklistDialog({
+  open,
+  onClose,
+  onStartTour,
+  onBringBrand,
+  onImportFigma,
+}) {
   const { report, loading, refresh } = useSetupReadiness(open);
   useEffect(() => {
     if (!open) return undefined;
@@ -210,6 +226,14 @@ export default function SetupChecklistDialog({ open, onClose, onStartTour, onBri
                     }
                   : undefined
               }
+              onImportFigma={
+                onImportFigma
+                  ? () => {
+                      onClose();
+                      onImportFigma();
+                    }
+                  : undefined
+              }
             />
           ) : (
             <p className="setup-cl-note">

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>
+  );
+}

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

@@ -23,6 +23,7 @@ import { ImagePlus, MessageSquarePlus, Plus, Scissors, Sparkles, Type } from 'lu
 
 import ClipInspector from './ClipInspector.jsx';
 import { computeSnapTargets, snapFrame } from './timeline-snap.js';
+import { activeComp } from './timeline-comp-target.js';
 import { getFilmstrip, getPeaks, peaksToPath, stripBucket } from './timeline-media-cache.js';
 import {
   clampPxPerFrame,
@@ -44,7 +45,7 @@ import { ContextMenuView } from '../../context-menu.tsx';
 function rowKind(seq) {
   if (seq.placeholder) return 'placeholder';
   const t = seq.mediaTag;
-  if (t === 'Video' || t === 'OffthreadVideo') return 'video';
+  if (t === 'Video' || t === 'OffthreadVideo' || t === 'MaudeVideo') return 'video';
   if (t === 'Img') return 'image';
   if (t === 'Audio') return 'audio';
   return 'jsx';
@@ -143,6 +144,10 @@ const SCROLL_PAD_X = 24;
 
 export default function TimelinePanel({
   comps = [],
+  // issue #75 — the comp the shell's transport targets. The panel reads its
+  // meta (fps / duration) off the SAME comp, so the readout can never describe
+  // a different artboard than the one Play actually moves.
+  compId = null,
   sequences = [],
   audio = [],
   transitions = [],
@@ -204,7 +209,14 @@ export default function TimelinePanel({
   // storyline layout moves layer detail into the clip inspector).
   const [collapsed, setCollapsed] = useState(() => new Set());
   const [dropActive, setDropActive] = useState(false);
-  const comp = comps[0] ?? null;
+  const comp = activeComp(comps, compId);
+  // issue #75 — which artboard the rows + transport belong to. `null` means the
+  // shell genuinely could NOT tell (a comp mounted outside any artboard, a
+  // resolver fall-through). That case must render as an explicit unknown, not
+  // as no chip at all: "no chip" already means "single comp, nothing to
+  // disambiguate", and reusing it for "I don't know" would make the ambiguous
+  // case look like the safe one (security-review 2026-08-12).
+  const scopedArtboard = comp?.artboardLabel || comp?.artboardId || null;
   const totalFrames = Math.max(1, total || comp?.durationInFrames || 1);
   const fps = comp?.fps ?? 30;
   const clamped = clamp(Math.round(frame), 0, totalFrames - 1);
@@ -981,7 +993,7 @@ export default function TimelinePanel({
     // bare tag name as the clip's identity — "Clip N" beats "bca08b1e.mov";
     // the real src stays in the tooltip.
     const rawName =
-      ['Video', 'OffthreadVideo', 'Audio', 'Img'].includes(seq.label) && seq.mediaSrc
+      ['Video', 'OffthreadVideo', 'Audio', 'Img', 'MaudeVideo', 'MaudeAudio', 'MaudeImg'].includes(seq.label) && seq.mediaSrc
         ? String(seq.mediaSrc).split('/').pop()
         : seq.label;
     const isHashName = /^[a-f0-9]{6,16}\.\w+$/i.test(rawName || '');
@@ -1423,6 +1435,22 @@ export default function TimelinePanel({
                 onChange={(e) => onVolume?.(Number(e.target.value) / 100)}
               />
             ) : null}
+            {/* issue #75 — on a multi-comp canvas the rows + transport belong to
+                ONE artboard, and nothing said which. Show it (label, id as the
+                fallback) so the panel and the canvas agree out loud. */}
+            {comps.length > 1 ? (
+              <span
+                className={`tl-artboard${scopedArtboard ? '' : ' is-unknown'}`}
+                data-testid="timeline-artboard"
+                title={
+                  scopedArtboard
+                    ? `Timeline is scoped to artboard "${scopedArtboard}" — pan to another artboard to switch`
+                    : "This canvas has several video comps and the Timeline couldn't tell which artboard this one sits in — the transport may be moving a comp you're not looking at"
+                }
+              >
+                {scopedArtboard ?? 'artboard ?'}
+              </span>
+            ) : null}
             <span className="tl-readout" data-testid="timeline-readout">
               <b>{clamped}</b>
               <span className="tl-sep">/</span>

package/apps/studio/client/panels/timeline-comp-target.js

@@ -0,0 +1,101 @@
+/**
+ * @file       timeline-comp-target.js — which announced comp the Timeline drives.
+ * @scope      apps/studio/client/panels/
+ * @purpose    On a multi-comp canvas the Timeline shows ONE comp's rows (the
+ *             parser scopes to the viewport-active artboard) but the transport
+ *             (play / pause / scrub / mute / loop) is a targeted postMessage —
+ *             it needs the Player's own comp id.
+ *
+ *             This used to be resolved by matching the parsed row total against
+ *             each comp's `durationInFrames`. Two comps of the SAME length (the
+ *             common case — one composition duplicated across artboards) made
+ *             `find` return the FIRST one, so the panel drew artboard #2's rows
+ *             while Play moved artboard #1 (issue #75). Duration is not an
+ *             identity, so the primary key is now the artboard the comp is
+ *             mounted in (`artboardId`, resolved by DOM containment in
+ *             video-comp.tsx). Duration stays as a fallback, and is only trusted
+ *             when it identifies exactly ONE comp.
+ */
+
+// Bidi overrides + isolates, zero-width / format characters, and C0/C1
+// controls (newlines and tabs included). An artboard label is author-written
+// text from an untrusted origin (DDR-054) that the shell RENDERS as chrome, so
+// a trailing RLO or a label built entirely of zero-width joiners could make the
+// Timeline's chip read as an artboard other than the one the transport is
+// scoped to — defeating the exact signal the chip exists to give. Same class
+// `sanitizeDisplayText` (file-preview.jsx) and `figma/sanitize.ts` already
+// neutralize; widened here because a label, unlike a filename, has no shape
+// constraints at all. Written as escapes on purpose — a literal invisible
+// character in this class would be unreviewable.
+const DISPLAY_UNSAFE =
+  /[\u202a-\u202e\u2066-\u2069\u200b-\u200f\u2060\u00ad\ufeff\u0000-\u001f\u007f-\u009f]/g;
+
+/**
+ * Neutralize + cap one canvas-origin display string. Returns null for a value
+ * that is absent, or that is empty ONCE the unsafe characters are gone — an
+ * all-invisible label must read as "no label", not as a blank chip that looks
+ * like the panel failed to render.
+ *
+ * @param {unknown} s
+ * @param {number} [max]
+ * @returns {string|null}
+ */
+export function sanitizeArtboardText(s, max = 120) {
+  if (typeof s !== 'string') return null;
+  const clean = s.replace(DISPLAY_UNSAFE, '').trim().slice(0, max).trim();
+  return clean || null;
+}
+
+/**
+ * @param {Array<{id: string, artboardId?: string|null, durationInFrames?: number}>} comps
+ * @param {{ artboardId?: string|string[]|null, total?: number }} [opts] `artboardId`
+ *   may be a single id or a confidence-ordered list of candidates.
+ * @returns {string|null} the comp id the transport must target
+ */
+export function resolveCompTarget(comps, opts = {}) {
+  if (!Array.isArray(comps) || comps.length === 0) return null;
+  const { artboardId = null, total = 0 } = opts;
+  // Candidates in confidence order. The caller passes the artboard the ROW
+  // PARSER scoped to (derived lexically from the .tsx) followed by the viewport
+  // signal canvas-lib reports on pan (derived structurally). They usually agree;
+  // when the lexical one names an artboard no comp is actually mounted in — a
+  // `<DCArtboard id=…>` inside a comment or a string literal is enough — the
+  // pan signal is the better answer, and trying both is what keeps a source
+  // file's stale opinion from silently out-ranking the live DOM.
+  const candidates = (Array.isArray(artboardId) ? artboardId : [artboardId]).filter(Boolean);
+  // Pass 1 — the artboard each comp ANNOUNCED (DOM containment). Runs across
+  // every candidate before pass 2 starts, deliberately.
+  for (const cand of candidates) {
+    const hit = comps.find((c) => c.artboardId === cand);
+    if (hit) return hit.id;
+  }
+  // Pass 2 — an author-set comp id that equals an artboard id (the documented
+  // "match the enclosing DCArtboard id" convention). Strictly WEAKER than pass
+  // 1: comp ids and artboard ids are separate author-chosen namespaces, so a
+  // `<VideoComp id="outro">` mounted inside `intro` must never be able to claim
+  // outro's transport while a comp genuinely mounted in outro exists.
+  for (const cand of candidates) {
+    const hit = comps.find((c) => c.id === cand);
+    if (hit) return hit.id;
+  }
+  if (total > 0) {
+    const byTotal = comps.filter((c) => c.durationInFrames === total);
+    // Exactly one — unambiguous. Several — duration tells us nothing, so fall
+    // through rather than silently picking the first (that WAS the bug).
+    if (byTotal.length === 1) return byTotal[0].id;
+  }
+  return comps[0].id;
+}
+
+/**
+ * The comp record the panel should read meta (fps, duration) off — same target
+ * as the transport, so the readout can never describe a different comp than the
+ * one Play moves.
+ *
+ * @param {Array<{id: string}>} comps
+ * @param {string|null} compId
+ */
+export function activeComp(comps, compId) {
+  if (!Array.isArray(comps) || comps.length === 0) return null;
+  return comps.find((c) => c.id === compId) ?? comps[0];
+}

package/apps/studio/client/panels/timeline-parse.js

@@ -123,7 +123,7 @@ export function parseCompTimeline(source, totalFrames, selectedArtboardId) {
   if (usages.length) {
     const target =
       (selectedArtboardId && usages.find((u) => u.artboardId === selectedArtboardId)) ||
-      usages.find((u) => /<(?:Audio|OffthreadVideo|Video)\b/.test(u.body)) ||
+      usages.find((u) => /<(?:Maude)?(?:Audio|OffthreadVideo|Video)\b/.test(u.body)) ||
       usages.find((u) => u.duration != null && u.duration === totalFrames) ||
       usages[0];
     scope = target.body;
@@ -162,7 +162,7 @@ export function parseCompTimeline(source, totalFrames, selectedArtboardId) {
       const lm = after.match(/<([A-Z][A-Za-z0-9]*)\b/);
       // Media child sniff (badge + replace affordance): the first
       // <Video|OffthreadVideo|Audio|Img src="…"> DIRECTLY inside the clip body.
-      const mm = after.match(/<(Video|OffthreadVideo|Audio|Img)\b[^>]*src=["']([^"']+)["']/);
+      const mm = after.match(/<(?:Maude)?(Video|OffthreadVideo|Audio|Img)\b[^>]*src=["']([^"']+)["']/);
       const nameM = attrs.match(/name=["']([^"']+)["']/);
       items.push({
         type: 'seq',
@@ -241,7 +241,7 @@ export function parseCompTimeline(source, totalFrames, selectedArtboardId) {
   // every clip span. Remotion renders it from frame 0 for the whole comp, so
   // show it as a read-only overlay row (`loose: true` — no clip ops; it has no
   // enumerator identity). Dogfood 2026-07-30: these were invisible before.
-  for (const lm of scope.matchAll(/<(OffthreadVideo|Video|Img)\b([^>]*?)\/?>/g)) {
+  for (const lm of scope.matchAll(/<(?:Maude)?(OffthreadVideo|Video|Img)\b([^>]*?)\/?>/g)) {
     const at = lm.index ?? 0;
     if (clipSpans.some(([s2, e2]) => at >= s2 && at <= e2)) continue;
     const srcM = lm[2].match(/src=["']([^"']+)["']/);

package/apps/studio/client/styles/3-shell-maude.css

@@ -209,6 +209,10 @@
 .st-live-dot.is-connected { background: var(--presence-online); }
 .st-sb-sync-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
 .st-sb-sync-dot.is-online { background: var(--presence-online); }
+/* feature-sync-progress-modal — the chip doubles as the Sync-panel toggle. */
+.st-sb-sync--btn { appearance: none; border: 0; padding: 0; border-radius: 0; background: transparent; font: inherit; cursor: pointer; }
+.st-sb-sync--btn:hover .val, .st-sb-sync--btn.is-open .val { color: var(--accent); }
+.st-sb-sync--btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 
 /* Phase 28 — clickable "changes" slot (opens the Changes panel). Button reset; the
    .st-sb-slot + .st-sb-slot rule still supplies the divider + left padding. */
@@ -1984,6 +1988,10 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .tl-btn.is-on { background: var(--accent-tint); border-color: var(--accent-muted); color: var(--accent); }
 .tl-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
 .tl-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
+/* issue #75 — which artboard's comp this timeline is scoped to (multi-comp only). */
+.tl-artboard { margin-left: var(--space-2); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-2); color: var(--fg-1); font-size: var(--type-xs); line-height: 1.4; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The shell could not resolve the artboard — read as a warning, not as a name. */
+.tl-artboard.is-unknown { color: var(--fg-3); border-style: dashed; font-style: italic; }
 .tl-readout { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); display: inline-flex; align-items: baseline; gap: 4px; margin-left: var(--space-2); }
 .tl-readout b { color: var(--fg-0); font-weight: 600; }
 .tl-readout .tl-sep { color: var(--fg-3); }
@@ -2120,6 +2128,9 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gp-save { flex: 1; justify-content: center; }
 .gp-save:disabled, .gp-save[aria-disabled="true"], .gp-publish:disabled, .gp-publish[aria-disabled="true"] { background: var(--bg-3); color: var(--fg-3); border-color: var(--border-default); cursor: not-allowed; }
 .gp-hint { font-size: var(--type-xs); color: var(--fg-2); }
+/* cloud-managed posture (DDR-218) — the one save mechanism, named */
+.gp-cloud-note { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-1) 0; font-size: var(--type-xs); color: var(--fg-2); line-height: var(--lh-base); }
+.gp-cloud-note svg { color: var(--accent); flex: 0 0 auto; }
 
 /* publish / get-latest bar */
 .gp-publishbar { flex: none; border-top: 1px solid var(--border-default); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); background: var(--bg-1); }
@@ -2318,6 +2329,10 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gi-menu-item:hover { background: var(--bg-2); color: var(--fg-0); }
 .gi-menu-item:hover svg { color: var(--fg-1); }
 .gi-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+/* the already-linked project's row — a state, not an action (fix 7, sync RCA) */
+.gi-menu-item.is-connected { cursor: default; }
+.gi-menu-item.is-connected:hover { background: transparent; color: var(--fg-1); }
+.gi-menu-item.is-connected:hover svg { color: var(--fg-2); }
 .gi-menu-item--danger, .gi-menu-item--danger svg { color: var(--status-error); }
 .gi-menu-item--danger:hover { background: color-mix(in oklab, var(--status-error) 14%, transparent); color: var(--status-error); }
 .gi-menu-sep { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }
@@ -2655,6 +2670,28 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .rb-trigger-ver--ro .rb-trigger-ver-name { color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); }
 /* GitPanel read-only footer hint (web studio — actions live in the terminal). */
 .gp-ro-hint { padding: var(--space-3) var(--space-4); color: var(--fg-2); }
+
+/* feature-sync-progress-modal — the Sync panel (per-file sync rows). Reuses
+ * the gp- head chrome; sp- covers only the sync-specific rows/sections. */
+.sp-panel { display: flex; flex-direction: column; }
+.sp-body { flex: 1; overflow-y: auto; padding-bottom: var(--space-4); }
+.sp-note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-1) var(--space-2); font-size: var(--type-xs); color: var(--fg-2); line-height: var(--lh-base); }
+.sp-note-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
+.sp-note-dot.is-synced { background: var(--presence-online); }
+.sp-note-dot.is-refused, .sp-note-dot.is-stalled, .sp-note-dot.is-offline { background: var(--status-error); }
+.sp-sect-attention { color: var(--status-error); }
+.sp-list { list-style: none; margin: 0; padding: 0; }
+.sp-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); font-size: var(--type-sm); color: var(--fg-1); min-width: 0; }
+.sp-row-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
+.sp-row.is-connected .sp-row-dot { background: var(--presence-online); }
+.sp-row.is-auth-rejected .sp-row-dot { background: var(--status-error); }
+.sp-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--type-xs); }
+.sp-row-state { flex: none; font-size: var(--type-xs); color: var(--fg-2); }
+.sp-row.is-auth-rejected .sp-row-state { color: var(--status-error); }
+.sp-truncated { padding: var(--space-1) var(--space-4); font-size: var(--type-xs); color: var(--fg-2); }
+.sp-assets-line { padding: var(--space-1) var(--space-4); font-size: var(--type-sm); color: var(--fg-1); }
+.sp-assets-active { padding: 0 var(--space-4); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sp-assets-retry { padding: var(--space-1) var(--space-4); font-size: var(--type-xs); color: var(--fg-2); }
 /* The popup — opens UPWARD from the dock (gi-menu anatomy). SOLID opaque menu
  * surface + border here (NOT the canvas `.panel`, which isn't in the client bundle
  * — phase-28 lesson; the tree must never bleed through). */