@1agh/maude 0.58.2 → 0.59.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-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-warn, var(--u-accent));
+  padding: 6px 8px;
+  border-radius: var(--radius-sm, 6px);
+  background: color-mix(in oklab, var(--u-status-warn, 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');

package/apps/studio/cloud/renew.ts

@@ -0,0 +1,183 @@
+// Silent hub-credential renewal — the missing half of the cell-token model.
+//
+// The cell session token dies with the 12 h project token that minted it
+// (Phase 23 B2 — deliberate: that cap IS the revocation window, and it stays).
+// The account/device token next to it never expires. Nothing connected the
+// two: the desktop held a forever credential and a 12 h credential side by
+// side, and when the short one died the user was told to press Connect again —
+// or, worse, told nothing (the alligators incident: 73 canvases permanently
+// `connecting…`).
+//
+// This module replays the attach lane's credential tail WITHOUT the ceremony:
+//   GET  /api/projects            (account token)  → which project owns this hub
+//   POST /projects/open           (account token)  → fresh 12 h project token
+//   POST <cell>/auth/login        (project token)  → fresh cell session
+//   saveHubCredential(…)                           → hubs.json, role preserved
+//
+// It deliberately does NOT touch `.design/config.json` (the link is already
+// recorded; renewal is not a re-link) and does NOT cycle the sync runtime (the
+// caller swaps the token in place). A renewal fails only on a REAL event —
+// signed out, token revoked on the Account page, removed from the project —
+// and that failure, not a clock, is what should reach the user.
+//
+// Trust posture: every hop talks only to the CONFIGURED cloud address or to
+// the workspace URL the cloud's own /api/projects listing names for the
+// matched project — never to an address read from repo-committed state.
+
+import { existsSync, readFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+import { saveHubCredential } from '../sync/hub-link.ts';
+import { getHubRecord, normalizeUrl } from '../sync/hubs-config.ts';
+
+export interface RenewedCredential {
+  token: string;
+  expiresAt: number | null;
+}
+
+export type RenewFailureReason =
+  | 'not-signed-in'
+  | 'account-revoked'
+  | 'no-matching-project'
+  | 'open-refused'
+  | 'cell-refused'
+  | 'save-failed'
+  | 'unreachable';
+
+export type RenewResult =
+  | ({ ok: true } & RenewedCredential)
+  | { ok: false; reason: RenewFailureReason };
+
+/** Mirrors cloud/endpoints.ts — resolved per call so tests/desktop can set it late. */
+function cloudUrl(): string {
+  return (process.env.MAUDE_CLOUD_URL ?? 'https://cloud.maude.sh').replace(/\/+$/, '');
+}
+
+function cloudConfigPath(): string {
+  return process.env.MAUDE_CLOUD_CONFIG ?? join(homedir(), '.config', 'maude', 'cloud.json');
+}
+
+/** The account credential, or null when this machine is signed out. */
+function readAccountToken(): string | null {
+  const p = cloudConfigPath();
+  if (!existsSync(p)) return null;
+  try {
+    const parsed = JSON.parse(readFileSync(p, 'utf8'));
+    return parsed && typeof parsed.token === 'string' && parsed.token ? parsed.token : null;
+  } catch {
+    return null;
+  }
+}
+
+const FETCH_TIMEOUT_MS = 15_000;
+
+async function jsonFetch(
+  doFetch: typeof fetch,
+  url: string,
+  init: RequestInit = {}
+): Promise<{ status: number; body: Record<string, unknown> }> {
+  const ctl = new AbortController();
+  const timer = setTimeout(() => ctl.abort(), FETCH_TIMEOUT_MS);
+  try {
+    const res = await doFetch(url, { ...init, signal: ctl.signal });
+    const body = (await res.json().catch(() => ({}))) as Record<string, unknown>;
+    return { status: res.status, body };
+  } catch {
+    return { status: 0, body: {} };
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/**
+ * Mint a fresh cell session for `hubUrl` from the signed-in Maude account.
+ *
+ * Single network path, no interaction. Callers treat any `ok:false` as "keep
+ * the old behaviour" — the stored (possibly dead) credential stays in place so
+ * a failed renewal never makes things worse than before it ran.
+ */
+export async function renewHubCredential(
+  hubUrl: string,
+  doFetch: typeof fetch = fetch
+): Promise<RenewResult> {
+  const account = readAccountToken();
+  if (!account) return { ok: false, reason: 'not-signed-in' };
+
+  let norm: string;
+  try {
+    norm = normalizeUrl(hubUrl);
+  } catch {
+    return { ok: false, reason: 'no-matching-project' };
+  }
+
+  // Which cloud project opens onto this hub? The listing is the only mapping
+  // that exists (the hub URL is derived from the project id at open time), and
+  // asking it fresh means a renamed/removed project fails here — the right
+  // place — instead of minting for a project this account no longer has.
+  const listed = await jsonFetch(doFetch, `${cloudUrl()}/api/projects`, {
+    headers: { authorization: `Bearer ${account}` },
+  });
+  if (listed.status === 401) return { ok: false, reason: 'account-revoked' };
+  if (listed.status !== 200) return { ok: false, reason: 'unreachable' };
+  const projects = Array.isArray(listed.body.projects) ? listed.body.projects : [];
+  const match = projects.find((p) => {
+    const url = (p as { url?: unknown })?.url;
+    if (typeof url !== 'string' || !url) return false;
+    try {
+      return normalizeUrl(url) === norm;
+    } catch {
+      return false;
+    }
+  }) as { id?: unknown; role?: unknown } | undefined;
+  // A viewer's Connect is a different lane (share-view); renewing an editor
+  // credential for one would mint capability the panel never offered.
+  if (!match || typeof match.id !== 'string' || match.role === 'viewer') {
+    return { ok: false, reason: 'no-matching-project' };
+  }
+
+  const opened = await jsonFetch(doFetch, `${cloudUrl()}/projects/open`, {
+    method: 'POST',
+    headers: { authorization: `Bearer ${account}`, 'content-type': 'application/json' },
+    body: JSON.stringify({ project: match.id }),
+  });
+  if (opened.status === 0) return { ok: false, reason: 'unreachable' };
+  if (opened.status !== 200 || typeof opened.body.token !== 'string' || !opened.body.token) {
+    // This is where a removed member's renewal dies — exactly where it should.
+    return { ok: false, reason: 'open-refused' };
+  }
+
+  const cellLogin = await jsonFetch(doFetch, `${norm}/auth/login`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ token: opened.body.token }),
+  });
+  if (cellLogin.status === 0) return { ok: false, reason: 'unreachable' };
+  if (
+    cellLogin.status !== 200 ||
+    typeof cellLogin.body.token !== 'string' ||
+    !cellLogin.body.token
+  ) {
+    return { ok: false, reason: 'cell-refused' };
+  }
+  const expiresAt =
+    typeof cellLogin.body.expiresAt === 'number' && Number.isFinite(cellLogin.body.expiresAt)
+      ? cellLogin.body.expiresAt
+      : null;
+
+  // The upsert replaces the whole record, so the role must be re-supplied. F5:
+  // prefer the role the cell JUST vouched (its /auth/login echoes `user.role`)
+  // over the stored one — this is the one moment the code learns the current
+  // role, and carrying the stale value forward would discard exactly that.
+  // Fall back to the prior role only when the cell didn't say (older cell).
+  const freshRoleRaw = (cellLogin.body.user as { role?: unknown } | undefined)?.role;
+  const freshRole = typeof freshRoleRaw === 'string' && freshRoleRaw ? freshRoleRaw : undefined;
+  const role = freshRole ?? getHubRecord(norm)?.role;
+  try {
+    saveHubCredential(norm, cellLogin.body.token, role, expiresAt ?? undefined);
+  } catch {
+    return { ok: false, reason: 'save-failed' };
+  }
+
+  return { ok: true, token: cellLogin.body.token, expiresAt };
+}

package/apps/studio/context.ts

@@ -191,7 +191,8 @@ export interface Context {
    * non-serving entry points construct a Context without one.
    */
   syncControl?: {
-    restart(linkedHub?: LinkedHub): Promise<{
+    /** `null` means UNLINK: clear the in-memory link and cycle back to solo. */
+    restart(linkedHub?: LinkedHub | null): Promise<{
       syncing: boolean;
       canvases: number;
       reason?: string;