@1agh/maude 0.58.3 → 0.60.0

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

@@ -0,0 +1,320 @@
+// 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { safeDetail, safeName, syncPresentation } from '../../sync/presentation.ts';
+
+/**
+ * How long Resync stays disabled after a cycle finishes.
+ *
+ * A resync is `syncControl.restart()`: it tears every provider down and
+ * re-authenticates EVERY document — 76 WS auths on the project this was built
+ * for, since auth fires once per document. The valid-token bucket is 600/min
+ * per label (DDR-102), so roughly eight presses inside a minute would pin the
+ * very bucket the incident behind this feature was about. Ten seconds caps an
+ * impatient person at six presses a minute and keeps them well under it. The
+ * hub's own 429 remains the real backstop — this is politeness, not security.
+ */
+const RESYNC_COOLDOWN_MS = 10_000;
+
+/** 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 [resyncing, setResyncing] = useState(false);
+  const [cooling, setCooling] = useState(false);
+  const [note, setNote] = useState('');
+  const timers = useRef([]);
+
+  // Timers outlive an unmount otherwise — closing the panel mid-cooldown would
+  // set state on a gone component.
+  useEffect(
+    () => () => {
+      for (const t of timers.current) clearTimeout(t);
+      timers.current = [];
+    },
+    []
+  );
+
+  const resync = useCallback(async () => {
+    if (resyncing || cooling) return;
+    setResyncing(true);
+    setNote('');
+    let res = null;
+    let json = {};
+    try {
+      res = await fetch('/_api/sync/resync', { method: 'POST' });
+      json = await res.json().catch(() => ({}));
+    } catch {
+      /* the server went away — say so below rather than throwing into render */
+    }
+    setResyncing(false);
+    if (!res) setNote('Maude could not reach the sync service.');
+    else if (res.status === 409) setNote('Already restarting — give it a moment.');
+    else if (!res.ok || !json.ok) setNote(json.detail || 'Resync could not start.');
+    // A restart that declined is not an error, but it IS the only thing worth
+    // saying — the panel's own header keeps reporting the live state.
+    else if (json.sync && !json.sync.syncing) setNote(json.sync.detail || '');
+    setCooling(true);
+    timers.current.push(setTimeout(() => setCooling(false), RESYNC_COOLDOWN_MS));
+  }, [resyncing, cooling]);
+
+  const cancelAssets = useCallback(async () => {
+    try {
+      await fetch('/_api/sync/cancel-assets', { method: 'POST' });
+    } catch {
+      /* the sweep ends with the server either way */
+    }
+  }, []);
+
+  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" />
+          {/* Resync re-runs the WHOLE sync — every canvas and every asset — so
+              it lives in the header, not inside the assets section. It is
+              `syncControl.restart()`, the same cycle Connect performs. */}
+          <button
+            type="button"
+            className="sp-resync"
+            data-testid="sync-resync"
+            onClick={resync}
+            disabled={resyncing || cooling}
+            title="Re-check every canvas and asset against the workspace"
+          >
+            {resyncing ? 'Resyncing…' : 'Resync'}
+          </button>
+          <button type="button" className="gp-x" aria-label="Close" onClick={onClose}>
+            ×
+          </button>
+        </div>
+        {note && (
+          <div className="sp-resync-note" role="status" aria-live="polite">
+            {safeDetail(note, '')}
+          </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}…`}
+              {/* Cancel is scoped to the SWEEP — interrupting an upload is a
+                  real gesture; interrupting a reconnect mid-handshake is not.
+                  Safe to press: uploads are idempotent and the hub writes
+                  temp-then-rename, so nothing half-written can survive. */}
+              {!assets.finished && (
+                <button
+                  type="button"
+                  className="sp-assets-cancel"
+                  data-testid="sync-assets-cancel"
+                  onClick={cancelAssets}
+                >
+                  Cancel
+                </button>
+              )}
+            </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,
@@ -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);
@@ -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/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); }
@@ -2662,6 +2670,38 @@ 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); }
+/* feature-sync-resync-and-out-of-process-sweep — Resync (header) re-runs the
+ * whole sync; Cancel (assets line) stops only the upload sweep. */
+.sp-resync { appearance: none; flex: none; font-family: var(--font-body); font-size: var(--type-xs); color: var(--fg-1); background: var(--bg-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 2px var(--space-2); cursor: pointer; transition: color var(--dur-soft) var(--ease-out), border-color var(--dur-soft) var(--ease-out); }
+.sp-resync:hover:not(:disabled) { color: var(--fg-0); border-color: var(--border-strong); }
+.sp-resync:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.sp-resync:disabled { color: var(--fg-3); cursor: default; }
+.sp-resync-note { padding: 0 var(--space-4) var(--space-2); font-size: var(--type-xs); color: var(--fg-2); line-height: var(--lh-base); }
+.sp-assets-cancel { appearance: none; margin-left: var(--space-2); font-family: var(--font-body); font-size: var(--type-xs); color: var(--fg-2); background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
+.sp-assets-cancel:hover { color: var(--status-error); }
+.sp-assets-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 /* 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). */

package/apps/studio/client/styles/4-components.css

@@ -1402,16 +1402,16 @@
 /* A degraded export is `done` but not clean — it must never read as success.
    Overrides --done, so declaration order matters. */
 .st-export-pill--degraded {
-  background: color-mix(in oklab, var(--u-status-warning, var(--u-accent)) 18%, transparent);
-  color: var(--u-status-warning, var(--u-accent));
+  background: color-mix(in oklab, var(--u-status-warn, var(--u-accent)) 18%, transparent);
+  color: var(--u-status-warn, var(--u-accent));
 }
 .st-export-degraded {
   font-size: 12px;
   line-height: 1.45;
-  color: var(--u-status-warning, var(--u-accent));
+  color: var(--u-status-warn, var(--u-accent));
   padding: 6px 8px;
   border-radius: var(--radius-sm, 6px);
-  background: color-mix(in oklab, var(--u-status-warning, var(--u-accent)) 10%, transparent);
+  background: color-mix(in oklab, var(--u-status-warn, var(--u-accent)) 10%, transparent);
 }
 .st-export-degraded__fix {
   margin-top: 4px;

package/apps/studio/context.ts

@@ -198,6 +198,10 @@ export interface Context {
       reason?: string;
       detail?: string;
     }>;
+    /** A cycle is in flight — Resync refuses early rather than queueing. */
+    busy?(): boolean;
+    /** The live runtime, for the sweep-scoped cancel. Null in solo mode. */
+    current?(): { cancelAssetSweep(): boolean } | null;
   };
 }