@1agh/maude 0.58.2 → 0.59.0

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

@@ -189,6 +189,34 @@ function projectFromHubUrl(hubUrl, cloudHost) {
   return norm(host.slice(0, -(cloudHost.length + 1)).replace(/^view-/, ''));
 }
 
+/**
+ * Is this project row the one THIS folder is already linked to?
+ *
+ * Fix 7 of the 2026-08-10 sync RCA: every row used to render the same
+ * `Connect <name>` button, including the project this folder was already
+ * syncing with — the UI lying about an established link. Only a CREDENTIALED
+ * link counts (the `linkedHub` half alone comes from a committed config.json —
+ * attacker-authorable, B2), so a linked-but-uncredentialed row still offers
+ * Connect: it genuinely needs the sign-in.
+ *
+ * Addresses inside the configured cloud zone compare by the project label they
+ * carry (`projectFromHubUrl`, NFKD-folded like the platform); addresses that
+ * carry none (self-hosts, e2e stubs at `http://127.0.0.1:<port>`) fall back to
+ * an exact origin match, so two stubs on different ports never collapse.
+ */
+export function isLinkedProjectRow({ projectUrl, linkedHubUrl, linkedHubCredentialed, cloudUrl }) {
+  if (!linkedHubUrl || !linkedHubCredentialed) return false;
+  const cloudHost = hostOf(cloudUrl);
+  const linked = projectFromHubUrl(linkedHubUrl, cloudHost);
+  const row = projectFromHubUrl(projectUrl, cloudHost);
+  if (linked && row) return linked === row;
+  try {
+    return new URL(String(projectUrl)).origin === new URL(String(linkedHubUrl)).origin;
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Does this folder look like the cloud project a link is naming?
  *
@@ -326,6 +354,7 @@ function Spark({ size = 15 }) {
 function Icon({ name, size = 15 }) {
   const p = {
     'chevron-up': <polyline points="3.5 10 8 5.5 12.5 10" />,
+    check: <polyline points="3 8.5 6.5 12 13 4.5" />,
     external: (
       <>
         <path d="M6 3.5H3.2A.7.7 0 0 0 2.5 4.2v8.6a.7.7 0 0 0 .7.7h8.6a.7.7 0 0 0 .7-.7V10" />
@@ -369,7 +398,11 @@ function Icon({ name, size = 15 }) {
   );
 }
 
-export default function CloudBar({ syncStatus }) {
+// `onLinkedHub` lifts the resolved link state to the app shell (DDR-218): the
+// GitPanel's cloud-managed posture turns on the same `linkedHub.credentialed`
+// fact this panel's Connected row does, and CloudBar owns every action that
+// changes it (status resolve, attach, detach) — so it reports, the app decides.
+export default function CloudBar({ syncStatus, onLinkedHub }) {
   const [state, setState] = useState('loading'); // loading | out | in
   const [email, setEmail] = useState(null);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -417,6 +450,7 @@ export default function CloudBar({ syncStatus }) {
           linkedHub: r.json?.linkedHub ?? null,
           resolved: true,
         });
+        onLinkedHub?.(r.json?.linkedHub ?? null);
         if (r.ok && r.json?.connected) {
           setEmail(r.json.email);
           setState('in');
@@ -476,11 +510,22 @@ export default function CloudBar({ syncStatus }) {
     setPending(null);
     if (r.ok && r.json?.ok) {
       setConnected({ project: r.json.project ?? pending.project, sync: r.json.sync });
+      adoptLink(r.json.url);
     } else {
       setError(r.json?.error || 'The workspace could not be connected.');
     }
   }
 
+  // A successful attach IS a credentialed link — mirror it into `local` so the
+  // project list flips to Connected without a second status fetch (the server
+  // just wrote both halves: linkedHub in config.json + the hub credential).
+  function adoptLink(url) {
+    if (typeof url === 'string' && url) {
+      setLocal((l) => ({ ...l, linkedHub: { url, credentialed: true } }));
+      onLinkedHub?.({ url, credentialed: true });
+    }
+  }
+
   // Escape answers the decision modal the same way the scrim does: Not now.
   // Declining must always be the cheap move — the dashboard re-mints a code on
   // the next "Open in Maude".
@@ -562,12 +607,29 @@ export default function CloudBar({ syncStatus }) {
     setBusy('');
     if (r.ok && r.json?.ok) {
       setConnected({ project: r.json.project ?? projectId, sync: r.json.sync });
+      adoptLink(r.json.url);
     } else {
       setError(r.json?.error || 'The workspace could not be connected.');
     }
     setMenuOpen(false);
   }
 
+  /** The in-app `maude design unlink` — drops the link AND stops syncing now. */
+  async function disconnect() {
+    setBusy('disconnect');
+    setError('');
+    const r = await api('/_api/cloud/detach', { method: 'POST' });
+    setBusy('');
+    setMenuOpen(false);
+    if (r.ok && r.json?.ok) {
+      setLocal((l) => ({ ...l, linkedHub: null }));
+      setConnected(null);
+      onLinkedHub?.(null);
+    } else {
+      setError(r.json?.error || 'The workspace could not be disconnected.');
+    }
+  }
+
   async function signOut() {
     setMenuOpen(false);
     await api('/_api/cloud/signout', { method: 'POST' });
@@ -801,6 +863,35 @@ export default function CloudBar({ syncStatus }) {
                       <Icon name="external" size={15} /> View {p.name || p.id} in the browser
                       <span className="gi-menu-login" style={{ marginLeft: 'auto' }}>viewer</span>
                     </button>
+                  ) : isLinkedProjectRow({
+                      projectUrl: p.url,
+                      linkedHubUrl: local.linkedHub?.url,
+                      linkedHubCredentialed: local.linkedHub?.credentialed,
+                      cloudUrl,
+                    }) ? (
+                    // The project this folder is ALREADY linked to. Connected is
+                    // a state, not an action — the one action left is leaving.
+                    // (Same wrapper shape as the "Loading projects…" row; the
+                    // button is the focusable menu entry.)
+                    <div
+                      key={p.id}
+                      className="gi-menu-item is-connected"
+                      data-testid={`cloud-project-${p.id}`}
+                    >
+                      <Icon name="check" size={15} /> {p.name || p.id}
+                      <span className="gi-menu-login" style={{ marginLeft: 'auto' }}>Connected</span>
+                      <button
+                        type="button"
+                        className="btn btn--ghost btn--sm"
+                        role="menuitem"
+                        disabled={busy === 'disconnect'}
+                        onClick={disconnect}
+                        aria-label={`Disconnect this folder from ${p.name || p.id}`}
+                        data-testid={`cloud-disconnect-${p.id}`}
+                      >
+                        {busy === 'disconnect' ? 'Disconnecting…' : 'Disconnect'}
+                      </button>
+                    </div>
                   ) : (
                     <button
                       key={p.id}

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