@1agh/maude 0.58.2 → 0.58.3

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

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

@@ -1399,6 +1399,27 @@
   background: color-mix(in oklab, var(--u-status-error) 18%, transparent);
   color: var(--u-status-error);
 }
+/* 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));
+}
+.st-export-degraded {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--u-status-warning, 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);
+}
+.st-export-degraded__fix {
+  margin-top: 4px;
+  color: var(--u-fg-2);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
 .st-export-progress {
   position: relative;
   height: 4px;
@@ -2023,3 +2044,116 @@
   color: var(--u-fg-0);
   background: var(--u-bg-2);
 }
+
+/* ── Figma import panel (DDR-216 / T11) ─────────────────────────────────────
+ * Rides the shared .st-scrim / .st-dialog shell (3-shell-maude.css). Tokens
+ * only — no hardcoded colour, and no inline `style=` in the JSX either, because
+ * the canvas CSP (`style-src 'self'`) drops inline styles SILENTLY. */
+.st-figma-dialog {
+  width: min(560px, 92vw);
+  padding-bottom: var(--space-4);
+}
+.st-figma-label {
+  display: block;
+  padding: var(--space-3) var(--space-5) 4px;
+  font-size: var(--type-xs, 12px);
+  color: var(--fg-2);
+}
+.st-figma-input {
+  display: block;
+  width: calc(100% - (2 * var(--space-5)));
+  margin: 0 var(--space-5);
+  padding: 8px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-1);
+  color: var(--fg-0);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm, 13px);
+}
+.st-figma-modes {
+  border: 0;
+  margin: 0;
+  padding: 0 var(--space-5);
+}
+.st-figma-mode {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: var(--type-sm, 13px);
+  color: var(--fg-1);
+}
+.st-figma-mode-hint {
+  color: var(--fg-3);
+  font-size: var(--type-xs, 12px);
+}
+.st-figma-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: var(--space-4) var(--space-5) 0;
+}
+.st-figma-notice {
+  margin: var(--space-3) var(--space-5) 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-2);
+  color: var(--fg-2);
+  font-size: var(--type-xs, 12px);
+}
+/* The third-party-content banner. Deliberately reads as a caution, not as a
+ * provenance badge — an "imported from Figma" stamp otherwise makes the most
+ * attacker-influenced artifact in the tree look like verified design work. */
+.st-figma-notice-warn {
+  border-color: var(--status-warn, var(--border-default));
+  color: var(--fg-1);
+}
+.st-figma-error {
+  margin: var(--space-3) var(--space-5) 0;
+  color: var(--status-danger, var(--fg-0));
+  font-size: var(--type-xs, 12px);
+}
+.st-figma-summary {
+  margin: var(--space-3) var(--space-5) 0;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-2);
+  font-size: var(--type-xs, 12px);
+  color: var(--fg-2);
+}
+.st-figma-summary-hd {
+  color: var(--fg-1);
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.st-figma-summary-row {
+  margin: var(--space-2) var(--space-5) 0;
+  font-size: var(--type-xs, 12px);
+  color: var(--fg-2);
+}
+.st-figma-summary .st-figma-summary-row {
+  margin: 4px 0 0;
+}
+.st-figma-summary-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+}
+.st-figma-summary-kind {
+  color: var(--fg-1);
+}
+.st-figma-summary-count {
+  font-family: var(--font-mono);
+  color: var(--fg-2);
+}
+.st-figma-summary-ids {
+  display: block;
+  font-family: var(--font-mono);
+  color: var(--fg-3);
+  overflow-wrap: anywhere;
+}

package/apps/studio/clip-ops.ts

@@ -341,16 +341,24 @@ export function applyInsertClipAt(
   }
   const dur = Math.max(1, Math.round(opts.durationInFrames));
   const srcTrim = (opts.src ?? '').trim();
-  const media =
+  const media: { tag: string; src: string; importName: string; specifier: string } | null =
     opts.mediaTag && INSERTABLE_MEDIA.has(opts.mediaTag) && srcTrim
-      ? { tag: opts.mediaTag, src: srcTrim }
+      ? { tag: opts.mediaTag, src: srcTrim, importName: opts.mediaTag, specifier: 'remotion' }
       : null;
   if (media) {
     assertContainedSrc(canvasAbsPath, media.src, artboardId ?? '');
-    // House spelling: <OffthreadVideo> for video (frame-accurate export, and it
-    // can never collide with a canvas component named `Video` — the brief-board
-    // upgrade bug where the emitted tag resolved to the canvas itself).
-    if (media.tag === 'Video') media.tag = 'OffthreadVideo';
+    // This used to rewrite <Video> → <OffthreadVideo> as "house spelling", to
+    // dodge a collision with a canvas component named `Video`. That trade was
+    // wrong in one direction nobody noticed: <OffthreadVideo> is rejected by
+    // @remotion/web-renderer, so the editor was silently converting the
+    // audio-capable element into the audio-killing one behind the author's
+    // back — every inserted clip exported muted (RCA
+    // issue-mp4-audio-export-html5audio-silent-degrade). The collision is real,
+    // so it is now solved where it belongs: in the import (see resolveMediaTag).
+    const resolved = resolveMediaTag(source, media.tag);
+    media.tag = resolved.emitTag;
+    media.importName = resolved.importName;
+    media.specifier = resolved.specifier;
   }
 
   const seqs = cc.clips.filter((c) => c.kind === 'sequence');
@@ -403,7 +411,7 @@ export function applyInsertClipAt(
       );
       ensureImportPublic(s2, source, 'TransitionSeries', '@remotion/transitions');
       if (opts.placeholder) ensureNamedImport(s2, source, 'AIPlaceholder', '@maude/canvas-lib');
-      if (media) ensureNamedImport(s2, source, media.tag, 'remotion');
+      if (media) ensureNamedImport(s2, source, media.importName, media.specifier);
       const out2 = s2.toString();
       assertParses(canvasAbsPath, out2, artboardId ?? '');
       assertCompSemantics(canvasAbsPath, out2);
@@ -426,7 +434,7 @@ export function applyInsertClipAt(
         ? `\n${indent}  <${media.tag} src="${escapeAttr(media.src)}" />\n${indent}`
         : '';
     if (opts.placeholder) ensureNamedImport(s, source, 'AIPlaceholder', '@maude/canvas-lib');
-    if (media) ensureNamedImport(s, source, media.tag, 'remotion');
+    if (media) ensureNamedImport(s, source, media.importName, media.specifier);
     const beatText = `<${seriesPrefix}.Sequence durationInFrames={${dur}}>${mediaText}</${seriesPrefix}.Sequence>`;
     if (index === 0) {
       // Head insert: B (T) before the first beat.
@@ -514,7 +522,7 @@ export function applyInsertClipAt(
         ? `\n${indent}  <${media.tag} src="${escapeAttr(media.src)}" />\n${indent}`
         : '';
   if (opts.placeholder) ensureNamedImport(s, source, 'AIPlaceholder', '@maude/canvas-lib');
-  if (media) ensureNamedImport(s, source, media.tag, 'remotion');
+  if (media) ensureNamedImport(s, source, media.importName, media.specifier);
   if (titleText) ensureNamedImport(s, source, 'AbsoluteFill', 'remotion');
   ensureNamedImport(s, source, 'Sequence', 'remotion');
   const clipText = `\n${indent}<Sequence from={${from}} durationInFrames={${dur}}>${mediaText}</Sequence>`;
@@ -549,7 +557,7 @@ export function applyInsertClipAt(
     s2.appendLeft(openStart, '<>');
     s2.appendRight(insertAt, `${clipText}\n${indent}</>`);
     if (opts.placeholder) ensureNamedImport(s2, source, 'AIPlaceholder', '@maude/canvas-lib');
-    if (media) ensureNamedImport(s2, source, media.tag, 'remotion');
+    if (media) ensureNamedImport(s2, source, media.importName, media.specifier);
     if (titleText) ensureNamedImport(s2, source, 'AbsoluteFill', 'remotion');
     ensureNamedImport(s2, source, 'Sequence', 'remotion');
     out = s2.toString();
@@ -675,7 +683,7 @@ function setTagAttr(
 function directMediaTagStart(
   source: string,
   clip: ClipInfo,
-  tags = ['Video', 'OffthreadVideo', 'Audio', 'Img']
+  tags = ['Video', 'OffthreadVideo', 'Audio', 'Img', 'MaudeVideo', 'MaudeAudio', 'MaudeImg']
 ): number | null {
   const span = source.slice(clip.start, clip.end);
   const m = span.match(new RegExp(`<(${tags.join('|')})\\b`));
@@ -737,7 +745,13 @@ export function applySetPlaybackRate(
   }
   const { clips } = enumerateClips(canvasAbsPath, source, artboardId);
   const { clip } = mustResolve(canvasAbsPath, clips, stableId, expectedHash);
-  const mediaStart = directMediaTagStart(source, clip, ['Video', 'OffthreadVideo', 'Audio']);
+  const mediaStart = directMediaTagStart(source, clip, [
+    'Video',
+    'OffthreadVideo',
+    'Audio',
+    'MaudeVideo',
+    'MaudeAudio',
+  ]);
   if (mediaStart == null) {
     throw new CanvasEditError(
       `clip "${stableId}" has no direct media element — speed applies to <Video>/<Audio> clips (shared/wrapper media would change every user)`,
@@ -780,7 +794,13 @@ export function applyTrimIn(
   const delta = Math.round(deltaFrames);
   const { clips } = enumerateClips(canvasAbsPath, source, artboardId);
   const { clip } = mustResolve(canvasAbsPath, clips, stableId, expectedHash);
-  const mediaStart = directMediaTagStart(source, clip, ['Video', 'OffthreadVideo', 'Audio']);
+  const mediaStart = directMediaTagStart(source, clip, [
+    'Video',
+    'OffthreadVideo',
+    'Audio',
+    'MaudeVideo',
+    'MaudeAudio',
+  ]);
   if (mediaStart == null) {
     throw new CanvasEditError(
       `clip "${stableId}" has no direct media element — in-point trim applies to media clips`,
@@ -843,7 +863,13 @@ export function applyClipAudio(
 ): { source: string } {
   const { clips } = enumerateClips(canvasAbsPath, source, artboardId);
   const { clip } = mustResolve(canvasAbsPath, clips, stableId, expectedHash);
-  const mediaStart = directMediaTagStart(source, clip, ['Video', 'OffthreadVideo', 'Audio']);
+  const mediaStart = directMediaTagStart(source, clip, [
+    'Video',
+    'OffthreadVideo',
+    'Audio',
+    'MaudeVideo',
+    'MaudeAudio',
+  ]);
   if (mediaStart == null) {
     throw new CanvasEditError(`clip "${stableId}" has no direct media element to set audio on`, {
       canvas: canvasAbsPath,
@@ -882,7 +908,7 @@ export function applyDetachAudio(
 ): { source: string; audioStableId: string | null } {
   const cc = enumerateClips(canvasAbsPath, source, artboardId);
   const { clip } = mustResolve(canvasAbsPath, cc.clips, stableId, expectedHash);
-  const mediaStart = directMediaTagStart(source, clip, ['Video', 'OffthreadVideo']);
+  const mediaStart = directMediaTagStart(source, clip, ['Video', 'OffthreadVideo', 'MaudeVideo']);
   if (mediaStart == null || !clip.mediaSrc) {
     throw new CanvasEditError(
       `clip "${stableId}" has no direct video media with a literal src to detach`,
@@ -1038,7 +1064,13 @@ export function applyClipGrade(
 ): { source: string; filter: string } {
   const { clips } = enumerateClips(canvasAbsPath, source, artboardId);
   const { clip } = mustResolve(canvasAbsPath, clips, stableId, expectedHash);
-  const mediaStart = directMediaTagStart(source, clip, ['Video', 'OffthreadVideo', 'Img']);
+  const mediaStart = directMediaTagStart(source, clip, [
+    'Video',
+    'OffthreadVideo',
+    'Img',
+    'MaudeVideo',
+    'MaudeImg',
+  ]);
   if (mediaStart == null) {
     throw new CanvasEditError(`clip "${stableId}" has no direct media element to grade`, {
       canvas: canvasAbsPath,
@@ -1096,7 +1128,13 @@ export function applyClipFraming(
 ): { source: string } {
   const { clips } = enumerateClips(canvasAbsPath, source, artboardId);
   const { clip } = mustResolve(canvasAbsPath, clips, stableId, expectedHash);
-  const mediaStart = directMediaTagStart(source, clip, ['Video', 'OffthreadVideo', 'Img']);
+  const mediaStart = directMediaTagStart(source, clip, [
+    'Video',
+    'OffthreadVideo',
+    'Img',
+    'MaudeVideo',
+    'MaudeImg',
+  ]);
   if (mediaStart == null) {
     throw new CanvasEditError(`clip "${stableId}" has no direct media element to frame`, {
       canvas: canvasAbsPath,
@@ -1410,6 +1448,44 @@ export function applySplitClip(
 
 /** Ensure `name` is among the named imports from `specifier` (extends an
  *  existing import line, else adds one after the last import). */
+/**
+ * Where an inserted media element must come from.
+ *
+ * `Video` and `Audio` MUST resolve to `@remotion/media` — those are the only
+ * media elements `@remotion/web-renderer` can render, and importing them from
+ * `remotion` (where `Audio` IS `Html5Audio`) makes the export drop its audio
+ * track and fall back to a ~40× slower capture. RCA
+ * `issue-mp4-audio-export-html5audio-silent-degrade`.
+ */
+const MEDIA_SPECIFIER: Record<string, string> = {
+  Video: '@remotion/media',
+  Audio: '@remotion/media',
+  Img: 'remotion',
+  OffthreadVideo: 'remotion',
+};
+
+/**
+ * Import an inserted media element from the right package, aliasing it when the
+ * canvas already declares a component of that name.
+ *
+ * The collision is real — a canvas with its own `const Video = …` would have the
+ * emitted `<Video>` resolve to itself. The old fix was to emit
+ * `<OffthreadVideo>` instead, which silently cost the audio track. Aliasing
+ * keeps the collision solved AND the audio intact. Returns the tag to emit.
+ */
+function resolveMediaTag(
+  source: string,
+  tag: string
+): { emitTag: string; importName: string; specifier: string } {
+  const specifier = MEDIA_SPECIFIER[tag] ?? 'remotion';
+  const declaresLocally = new RegExp(
+    `(?:const|let|var|function|class)\\s+${tag}\\b|\\b${tag}\\s*[:=]\\s*\\(`
+  ).test(source);
+  if (!declaresLocally) return { emitTag: tag, importName: tag, specifier };
+  const alias = `Maude${tag}`;
+  return { emitTag: alias, importName: `${tag} as ${alias}`, specifier };
+}
+
 function ensureNamedImport(s: MagicString, source: string, name: string, specifier: string): void {
   const esc = specifier.replace(/[/]/g, '\\/');
   const line = source.match(new RegExp(`import \\{([^}]*)\\} from ['"]${esc}['"]`));

package/apps/studio/cloud/endpoints.ts

@@ -15,11 +15,19 @@
 //             user token → saveHubCredential() + linkedHub in config.json —
 //             the exact state `maude design link` would have written by hand.
 
-import { chmodSync, existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from 'node:fs';
+import {
+  chmodSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  renameSync,
+  unlinkSync,
+  writeFileSync,
+} from 'node:fs';
 import { homedir } from 'node:os';
 import { basename, dirname, join } from 'node:path';
 
-import { saveHubCredential } from '../sync/hub-link.ts';
+import { deleteHubCredential, saveHubCredential } from '../sync/hub-link.ts';
 import { getHubToken, normalizeUrl } from '../sync/hubs-config.ts';
 
 /**
@@ -116,11 +124,14 @@ interface Ctx {
    * syncing after the next start.
    */
   syncControl?: {
-    restart(linkedHub?: {
-      url: string;
-      linkedAt: number;
-      syncTsx?: boolean;
-    }): Promise<{ syncing: boolean; canvases: number; reason?: string; detail?: string }>;
+    /** `null` = unlink: clear the runtime's in-memory link, cycle to solo. */
+    restart(
+      linkedHub?: {
+        url: string;
+        linkedAt: number;
+        syncTsx?: boolean;
+      } | null
+    ): Promise<{ syncing: boolean; canvases: number; reason?: string; detail?: string }>;
   };
 }
 
@@ -319,6 +330,50 @@ export function createCloudEndpoints(ctx: Ctx) {
         project: exchanged.body.project,
       });
     },
+
+    /**
+     * Detach THIS project from its workspace — the in-app `maude design
+     * unlink` (fix 7's Disconnect, sync RCA 2026-08-10). Drops the committed
+     * `linkedHub` AND the stored hub credential for that address (the CLI
+     * default), then cycles the runtime back to solo so syncing stops NOW
+     * rather than at the next restart. Idempotent: disconnecting an unlinked
+     * project answers ok, not an error.
+     */
+    async detach(): Promise<CloudEndpointResult> {
+      const cfgPath = join(ctx.paths.designRoot, 'config.json');
+      let cfg: Record<string, unknown> = {};
+      try {
+        cfg = JSON.parse(readFileSync(cfgPath, 'utf8'));
+      } catch {
+        /* absent/malformed → nothing linked */
+      }
+      const linked = (cfg as { linkedHub?: { url?: unknown } }).linkedHub;
+      const url = typeof linked?.url === 'string' ? linked.url : null;
+      if (linked) {
+        delete cfg.linkedHub;
+        // Temp + rename (security review 2026-08-10, F5) — config.json is the
+        // SERVED project config (tokensCssRel, canvasGroups); a crash mid-write
+        // would corrupt it. Same atomic posture as `hub-link.ts`, but WITHOUT
+        // the credential store's 0o600 (this file is committed + world-readable
+        // by design), so it inherits the umask like the plain write it replaces.
+        const tmp = `${cfgPath}.${process.pid}.tmp`;
+        writeFileSync(tmp, `${JSON.stringify(cfg, null, 2)}\n`, 'utf8');
+        renameSync(tmp, cfgPath);
+      }
+      if (url) {
+        try {
+          deleteHubCredential(normalizeUrl(url));
+        } catch {
+          /* an unparseable stored URL has no credential entry to drop */
+        }
+      }
+      try {
+        await ctx.syncControl?.restart(null);
+      } catch {
+        /* best-effort — the link is gone on disk either way */
+      }
+      return { status: 200, json: { ok: true, detached: !!linked } };
+    },
   };
 
   /**
@@ -363,14 +418,27 @@ export function createCloudEndpoints(ctx: Ctx) {
   }): Promise<CloudEndpointResult> {
     // The cell is a different host than the control plane — one direct call.
     let hubToken: string | null = null;
+    let hubTokenExpiresAt: number | undefined;
+    let vouchedRole: string | undefined;
     try {
       const res = await fetch(`${workspaceUrl}/auth/login`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({ token: projectToken }),
       });
-      const body = (await res.json().catch(() => ({}))) as CloudBody;
-      if (res.ok && body?.token) hubToken = body.token;
+      const body = (await res.json().catch(() => ({}))) as CloudBody & {
+        expiresAt?: unknown;
+        user?: { role?: unknown };
+      };
+      if (res.ok && body?.token) {
+        hubToken = body.token;
+        // The cell reports when this session dies (≤ the 12 h project-token
+        // cap). Persisted so the sync runtime can renew BEFORE the deadline —
+        // discarding it here is what made every link silently expire.
+        if (typeof body.expiresAt === 'number' && Number.isFinite(body.expiresAt))
+          hubTokenExpiresAt = body.expiresAt;
+        if (typeof body.user?.role === 'string' && body.user.role) vouchedRole = body.user.role;
+      }
     } catch {
       /* handled below */
     }
@@ -385,7 +453,7 @@ export function createCloudEndpoints(ctx: Ctx) {
     }
 
     const norm = normalizeUrl(workspaceUrl);
-    saveHubCredential(norm, hubToken);
+    saveHubCredential(norm, hubToken, vouchedRole, hubTokenExpiresAt);
 
     // Project side — linkedHub in .design/config.json (committed; no token).
     const cfgPath = join(ctx.paths.designRoot, 'config.json');