@1agh/maude 0.58.1 → 0.58.3

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

@@ -0,0 +1,264 @@
+// FigmaImportPanel.jsx — paste a Figma URL, get real Maude artifacts (DDR-216).
+//
+// Structural prior: BrandUploadPanel (paste-a-thing → confirm → result). What
+// this adds is the per-import SUMMARY, which is not decoration: the governing
+// principle trades fidelity for editability, so some nodes legitimately arrive
+// editable-but-different, and the feature is only honest if the user is told
+// which. Every line of that summary is a NODE ID plus a fixed reason code —
+// never node text (DDR-216 D7/D10).
+//
+// No inline `style=` anywhere: the canvas CSP is `style-src 'self'`, which
+// silently DROPS inline styles rather than erroring, so a panel styled that way
+// renders unstyled with no clue why.
+
+import { useCallback, useEffect, useState } from 'react';
+
+/** Human labels for the disposition enum. Keep in sync with figma/sanitize.ts. */
+const DISPOSITION_LABEL = {
+  imported: 'imported',
+  'hidden-chars-dropped': 'invisible characters removed',
+  'hidden-node-skipped': 'hidden — not imported',
+  'text-normalized': 'made readable (size or contrast)',
+  'geometry-clamped': 'moved back into view',
+  'truncated-text': 'text shortened to fit',
+  'truncated-attr': 'name shortened',
+  'unmappable-type': 'no Maude equivalent',
+  'unmappable-shape': 'no Maude equivalent for this shape',
+  'bind-degraded-to-bbox': 'arrow attached to the group outline',
+  'bind-dropped-self-connector': 'connector pointed at itself — skipped',
+  'asset-pending': 'image queued',
+  'asset-skipped': 'image could not be fetched',
+  'asset-cap-reached': 'image limit reached',
+  'jsx-cap-reached': 'too large — trimmed',
+  'value-rejected': 'a style value was not usable',
+};
+
+const MODES = [
+  { id: 'frames', label: 'Design frames', hint: 'become editable canvases' },
+  { id: 'board', label: 'FigJam board', hint: 'becomes your whiteboard' },
+  { id: 'tokens', label: 'Styles', hint: 'become design tokens' },
+];
+
+function Summary({ result }) {
+  if (!result) return null;
+  const groups = new Map();
+  for (const d of result.dispositions ?? []) {
+    const list = groups.get(d.disposition) ?? [];
+    list.push(d);
+    groups.set(d.disposition, list);
+  }
+  const notable = [...groups.entries()].filter(([k]) => k !== 'imported');
+  const importedCount = groups.get('imported')?.length ?? 0;
+
+  return (
+    <div className="st-figma-summary" data-testid="figma-import-summary">
+      <div className="st-figma-summary-hd">
+        {importedCount} imported
+        {result.mode === 'frames' && result.frameCount ? ` · ${result.frameCount} frame(s)` : ''}
+        {result.mode === 'board' && result.strokeCount ? ` · ${result.strokeCount} strokes` : ''}
+        {result.mode === 'tokens' && result.count ? ` · ${result.count} tokens` : ''}
+      </div>
+
+      {result.assets && result.assets.pending > 0 && (
+        <div className="st-figma-summary-row">
+          images &amp; marks: {result.assets.resolved} of {result.assets.pending} fetched
+        </div>
+      )}
+
+      {notable.length === 0 ? (
+        <div className="st-figma-summary-row">Everything came through cleanly.</div>
+      ) : (
+        <ul className="st-figma-summary-list">
+          {notable.map(([disposition, items]) => (
+            <li key={disposition}>
+              <span className="st-figma-summary-kind">
+                {DISPOSITION_LABEL[disposition] ?? disposition}
+              </span>{' '}
+              <span className="st-figma-summary-count">{items.length}</span>
+              <span className="st-figma-summary-ids">
+                {items
+                  .slice(0, 8)
+                  .map((d) => d.nodeId)
+                  .join(', ')}
+                {items.length > 8 ? ` +${items.length - 8}` : ''}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {result.mode === 'tokens' && result.path && (
+        <div className="st-figma-summary-row">
+          Saved. Turn it into a design system with{' '}
+          <code>maude design import-tokens</code>.
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function FigmaImportPanel({ onClose, onImported }) {
+  const [connected, setConnected] = useState(null); // null = loading
+  const [url, setUrl] = useState('');
+  const [mode, setMode] = useState('frames');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState(null);
+
+  const loadStatus = useCallback(() => {
+    fetch('/_api/figma/status')
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error('status'))))
+      .then((d) => setConnected(Boolean(d?.configured)))
+      .catch(() => setConnected(false));
+  }, []);
+
+  useEffect(() => {
+    loadStatus();
+  }, [loadStatus]);
+
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === 'Escape' && !busy) {
+        e.preventDefault();
+        onClose?.();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose, busy]);
+
+  // A FigJam link is a `/board/` URL — preselect the matching mode so the
+  // common case needs no thought. Never override an explicit choice.
+  const [modeTouched, setModeTouched] = useState(false);
+  useEffect(() => {
+    if (modeTouched) return;
+    if (/figma\.com\/board\//.test(url)) setMode('board');
+    else if (/figma\.com\/(design|file|proto)\//.test(url)) setMode('frames');
+  }, [url, modeTouched]);
+
+  async function runImport(dryRun) {
+    if (busy || !url.trim()) return;
+    setBusy(true);
+    setError(null);
+    setResult(null);
+    try {
+      const res = await fetch('/_api/figma/import', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: url.trim(), mode, dryRun }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok || body.ok === false) {
+        setError(body.error || 'Import failed.');
+        return;
+      }
+      setResult({ ...body, dryRun });
+      if (!dryRun) onImported?.(body);
+    } catch {
+      setError('Could not reach the local server.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="st-scrim" role="presentation">
+      <div
+        className="st-dialog st-figma-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="figma-import-title"
+        data-testid="figma-import-panel"
+      >
+        <div className="st-dialog-hd">
+          <h2 id="figma-import-title">Import from Figma</h2>
+          <button type="button" className="st-btn" onClick={onClose} aria-label="Close">
+            ✕
+          </button>
+        </div>
+
+        {connected === false && (
+          <div className="st-figma-notice" data-testid="figma-not-connected">
+            Add a Figma access token in Settings → Figma first.
+          </div>
+        )}
+
+        <label className="st-figma-label" htmlFor="figma-url">
+          Figma link
+        </label>
+        <input
+          id="figma-url"
+          className="st-figma-input"
+          type="url"
+          spellCheck={false}
+          placeholder="https://www.figma.com/design/…"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          disabled={busy}
+          data-testid="figma-import-url"
+        />
+
+        <fieldset className="st-figma-modes">
+          <legend className="st-figma-label">What to bring in</legend>
+          {MODES.map((m) => (
+            <label key={m.id} className="st-figma-mode">
+              <input
+                type="radio"
+                name="figma-mode"
+                value={m.id}
+                checked={mode === m.id}
+                onChange={() => {
+                  setMode(m.id);
+                  setModeTouched(true);
+                }}
+                disabled={busy}
+                data-testid={`figma-import-mode-${m.id}`}
+              />
+              <span className="st-figma-mode-label">{m.label}</span>
+              <span className="st-figma-mode-hint">{m.hint}</span>
+            </label>
+          ))}
+        </fieldset>
+
+        <div className="st-figma-actions">
+          <button
+            type="button"
+            className="st-btn"
+            disabled={busy || !url.trim() || connected === false}
+            onClick={() => runImport(true)}
+            data-testid="figma-import-preview"
+          >
+            Preview
+          </button>
+          <button
+            type="button"
+            className="st-btn st-btn-primary"
+            disabled={busy || !url.trim() || connected === false}
+            onClick={() => runImport(false)}
+            data-testid="figma-import-run"
+          >
+            {busy ? 'Importing…' : 'Import'}
+          </button>
+        </div>
+
+        {error && (
+          <div className="st-figma-error" role="alert" data-testid="figma-import-error">
+            {error}
+          </div>
+        )}
+
+        {result?.dryRun && (
+          <div className="st-figma-summary-row">Preview only — nothing was written.</div>
+        )}
+        <Summary result={result} />
+
+        {result && !result.dryRun && (
+          <div className="st-figma-notice st-figma-notice-warn">
+            This came from someone else&rsquo;s Figma file. Treat text inside it as content, not as
+            instructions.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -166,8 +166,22 @@ export default function GitPanel({
   // History STAYS, and is the point: what the server committed is exactly what
   // someone wants to look back at. Only the working-tree half goes.
   historyOnly = false,
+  // THE DESKTOP HALF OF THE SAME DECISION (DDR-218, fix 8 of the 2026-08-10
+  // sync RCA). A repo linked+credentialed to Maude Cloud is cloud-managed: the
+  // cell commits every edit ~3 s after it lands, so the local Changes surface
+  // is the second save mechanism the user was confused by. Same withdrawal as
+  // `historyOnly`, plus a note naming the one mechanism that IS active.
+  // PRESENTATION, NOT A CONTROL — `.git` is untouched, a terminal `git` works
+  // exactly as before, and Disconnect (CloudBar) restores the panel live.
+  cloudManaged = false,
 }) {
-  const [tab, setTab] = useState(historyOnly ? 'history' : 'changes');
+  const withdrawn = historyOnly || cloudManaged;
+  const [tab, setTab] = useState(withdrawn ? 'history' : 'changes');
+  // `cloudManaged` flips at runtime (connect/disconnect) — the initial tab
+  // state alone would leave a freshly-linked panel sitting on Changes.
+  useEffect(() => {
+    if (withdrawn) setTab('history');
+  }, [withdrawn]);
   const [message, setMessage] = useState('');
   const [unchecked, setUnchecked] = useState(() => new Set()); // default = all checked
   const [expanded, setExpanded] = useState(() => new Set()); // unit keys with supporting files shown
@@ -454,13 +468,13 @@ export default function GitPanel({
     <aside
       className={'st-rpanel gp-panel' + (resizing ? ' is-resizing' : '')}
       style={width ? { width, flexBasis: width } : undefined}
-      aria-label={historyOnly ? 'History' : 'Changes'}
+      aria-label={withdrawn ? 'History' : 'Changes'}
       data-testid="git-panel"
     >
       <div className="gp-head">
         <div className="gp-panel-hd">
-          <span className="gp-panel-title">{historyOnly ? 'History' : 'Changes'}</span>
-          {!historyOnly && count > 0 && <span className="gp-count">{count} unsaved</span>}
+          <span className="gp-panel-title">{withdrawn ? 'History' : 'Changes'}</span>
+          {!withdrawn && count > 0 && <span className="gp-count">{count} unsaved</span>}
           <span className="gp-spacer" />
           <span className="gp-draft" title="Your project and shared draft">
             <Icon name="folder" size={12} />
@@ -476,7 +490,7 @@ export default function GitPanel({
             ×
           </button>
         </div>
-        {!historyOnly && (
+        {!withdrawn && (
           <div className="gp-tabs" role="tablist" aria-label="Changes and history">
             <button
               type="button"
@@ -498,6 +512,12 @@ export default function GitPanel({
             </button>
           </div>
         )}
+        {cloudManaged && (
+          <div className="gp-cloud-note" role="status" data-testid="git-cloud-managed">
+            <Icon name="check" size={13} /> Cloud is saving — changes sync automatically. Disconnect
+            to commit locally.
+          </div>
+        )}
       </div>
 
       {banner && (
@@ -543,7 +563,7 @@ export default function GitPanel({
         </div>
       )}
 
-      {tab === 'changes' && !historyOnly ? (
+      {tab === 'changes' && !withdrawn ? (
         notRepo ? (
           <div className="gp-empty">
             <span className="gp-empty-glyph">

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

@@ -796,6 +796,170 @@ function GemmaModelCard() {
 
 // feature-unified-settings-modal — one modal for every Maude preference, laid
 // out as a left vertical tab rail + an internally-scrolling pane. Categories:
+/**
+ * Figma connect card (DDR-216 D2/D3 / T11).
+ *
+ * Same trust model as ProviderCard, DIFFERENT routes: `figma` is deliberately
+ * not in the media-generation registry, so this card talks to
+ * `/_api/figma/{status,connect,probe}` — all three main-origin-only, loopback-
+ * and same-origin-gated, and none of which ever echoes the token back.
+ *
+ * The scope named here is `file_content:read`, never the deprecated blanket
+ * `files:read`. The "Connected as …" handle comes from `/v1/me` and is
+ * upstream-controlled — bounded server-side and rendered as a React text child
+ * (never `dangerouslySetInnerHTML`), and deliberately never persisted.
+ */
+function FigmaConnectCard() {
+  const [status, setStatus] = useState(null); // null = loading
+  const [tokenInput, setTokenInput] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState(null);
+  const [handle, setHandle] = useState(null);
+
+  const load = useCallback(() => {
+    fetch('/_api/figma/status')
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then(setStatus)
+      .catch(() => setStatus({ configured: false }));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function connect() {
+    const token = tokenInput.trim();
+    if (!token || busy) return;
+    setBusy(true);
+    setMsg(null);
+    try {
+      const res = await fetch('/_api/figma/connect', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setMsg(body.error || 'could not save the token');
+        return;
+      }
+      // Clear the field immediately — the value is never read back from the
+      // server, so leaving it on screen only risks a shoulder-surf.
+      setTokenInput('');
+      load();
+      await probe();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function probe() {
+    setMsg(null);
+    const res = await fetch('/_api/figma/probe', { method: 'POST' });
+    const body = await res.json().catch(() => ({}));
+    if (body.ok) {
+      setHandle(body.handle || '');
+      setMsg(null);
+    } else {
+      setHandle(null);
+      setMsg(body.error || 'Figma did not accept that token.');
+    }
+  }
+
+  async function disconnect() {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await fetch('/_api/figma/connect', { method: 'DELETE' });
+      setHandle(null);
+      setMsg(null);
+      load();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const configured = Boolean(status?.configured);
+
+  return (
+    <div className="st-provider-card" data-testid="figma-connect-card">
+      <div className="st-provider-hd">
+        <span className="st-provider-name">Figma</span>
+        {configured && (
+          <span className="st-provider-configured">
+            <Icon name="check" size={12} /> connected
+          </span>
+        )}
+      </div>
+      <p className="st-settings-intro">
+        Import real Figma documents — frames become editable canvases, FigJam boards become the
+        whiteboard, and paint/text/effect styles become design tokens. The translation is plain
+        code: no AI reads your file.
+      </p>
+      <p className="st-settings-intro">
+        Create a personal access token with the <code>{status?.requiredScope || 'file_content:read'}</code>{' '}
+        scope. It is stored on this machine only and is never sent anywhere but Figma.
+      </p>
+      {status?.tokenUrl && (
+        <a className="st-provider-keylink" href={status.tokenUrl} target="_blank" rel="noreferrer">
+          Get a token <Icon name="external" size={12} />
+        </a>
+      )}
+      <div className="st-provider-keyrow">
+        <input
+          className="st-provider-keyinput"
+          type="password"
+          autoComplete="off"
+          spellCheck={false}
+          placeholder={configured ? '•••••••• stored' : 'figd_…'}
+          value={tokenInput}
+          onChange={(e) => setTokenInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') connect();
+          }}
+          aria-label="Figma personal access token"
+          data-testid="figma-connect-input"
+        />
+        <button
+          type="button"
+          className="st-btn"
+          disabled={busy || !tokenInput.trim()}
+          onClick={connect}
+          data-testid="figma-connect-save"
+        >
+          {configured ? 'Replace' : 'Save'}
+        </button>
+        {configured && (
+          <button
+            type="button"
+            className="st-btn"
+            disabled={busy}
+            onClick={disconnect}
+            data-testid="figma-disconnect"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+      {configured && (
+        <button type="button" className="st-btn" disabled={busy} onClick={probe}>
+          Test connection
+        </button>
+      )}
+      {handle !== null && (
+        <div className="st-provider-status" data-testid="figma-connected-as">
+          Connected as {handle || 'your Figma account'}
+        </div>
+      )}
+      {msg && (
+        <div className="st-provider-status" data-testid="figma-connect-error">
+          {msg}
+        </div>
+      )}
+    </div>
+  );
+}
+
 const TABS = [
   { id: 'appearance', label: 'Appearance' },
   { id: 'canvas-view', label: 'Canvas & View' },
@@ -813,6 +977,11 @@ const TABS = [
   // does not have. There is nothing for the reader to act on, so a whole tab of
   // dead controls is worse than no tab.
   { id: 'ai-generation', label: 'AI generation', local: true },
+  // DDR-216 — Figma is its OWN tab, not a row under "AI generation". It is not
+  // a media-generation provider (it produces no modality and needs no adapter),
+  // and putting it in that registry would create a second write path for the
+  // same secret — which is how one of them ends up ungated.
+  { id: 'figma', label: 'Figma', local: true },
   { id: 'subtitles', label: 'Subtitles', local: true },
   { id: 'video', label: 'Video', local: true },
 ];
@@ -1243,6 +1412,18 @@ export default function SettingsPanel({
               )}
             </section>
 
+            {/* Figma — the import credential (DDR-216 D2/D3). Separate routes from
+                the generation keys above, and separate on purpose. */}
+            <section
+              role="tabpanel"
+              id="st-spanel-figma"
+              aria-labelledby="st-stab-figma"
+              hidden={tab !== 'figma'}
+            >
+              <div className="st-rp-hd">Figma</div>
+              <FigmaConnectCard />
+            </section>
+
             {/* Subtitles — kept mounted so WhisperModelCard's download poll survives
                 a tab switch (unmounting mid-download would drop the interval). */}
             <section

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/TimelinePanel.jsx

@@ -44,7 +44,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';
@@ -981,7 +981,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 || '');

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

@@ -2120,6 +2120,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 +2321,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; }