@1agh/maude 1.3.0 → 1.3.1

package/apps/studio/api.ts

@@ -141,7 +141,7 @@ const HIDDEN_OK = new Set(['.ai', '.claude', '.design']);
 // an explicit enumerated list rather than a broad pattern so it can never
 // accidentally widen to swallow runtime JSON — findFiles already excludes
 // `_`-prefixed entries before this list is even consulted.
-const PREVIEW_ASSET_EXTS = [
+export const PREVIEW_ASSET_EXTS = [
   '.svg',
   '.png',
   '.jpg',
@@ -171,6 +171,30 @@ const PREVIEW_ASSET_EXTS = [
  * (`system/<ds>/preview/*.html`) intentionally stay `.html` and travel via
  * the DS-aware `findFiles()` path below.
  */
+/**
+ * True when `abs` is a directory tree holding nothing but folder placeholders
+ * (`.gitkeep`, `.DS_Store`) — what a folder projection leaves before any
+ * content arrives. False when it is absent, is not a directory, or holds
+ * anything real (a symlink counts as real: never followed, never removed).
+ */
+async function onlyFolderPlaceholders(abs: string, depth = 0): Promise<boolean> {
+  if (depth > 16) return false;
+  let entries: Dirent[];
+  try {
+    entries = await readdir(abs, { withFileTypes: true });
+  } catch {
+    return false;
+  }
+  for (const e of entries) {
+    if (e.isDirectory()) {
+      if (!(await onlyFolderPlaceholders(path.join(abs, e.name), depth + 1))) return false;
+    } else if (!(e.isFile() && (e.name === '.gitkeep' || e.name === '.DS_Store'))) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export async function findHtmlFiles(absRoot: string, prefixUnderRepo: string): Promise<string[]> {
   const out: string[] = [];
   let entries: Dirent[];
@@ -203,7 +227,7 @@ export async function findHtmlFiles(absRoot: string, prefixUnderRepo: string): P
  * traversal instead of adding a second full walk of `system/` (the largest
  * group) just to enumerate directories.
  */
-async function findFiles(
+export async function findFiles(
   absRoot: string,
   prefix: string,
   exts: string[],
@@ -3214,6 +3238,11 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       };
     }
     await rename(g.abs, toAbs);
+    // A hub's own studio has no watcher to see this rename: announce both
+    // ends, or the journal learns of it only from the walk-import belt and a
+    // teammate waits minutes for a rename that took a second here.
+    announceWritten(rel);
+    announceWritten(toRel);
     ctx.bus.emit('canvas-list-update', {
       action: 'moved',
       rel: toRel,
@@ -3248,6 +3277,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     await mkdir(trashDir, { recursive: true });
     const trashed = path.join(trashDir, path.posix.basename(rel));
     await rename(g.abs, trashed);
+    announceWritten(rel);
     ctx.bus.emit('canvas-list-update', { action: 'removed', rel, slug });
     return {
       ok: true,
@@ -3903,6 +3933,17 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     }
 
     await mkdir(toDirAbs, { recursive: true });
+    // OUR OWN ACTION MAY ALREADY BE ON THIS DISK. The destination did not exist
+    // when this move was checked; the project accepted the move since, and its
+    // announcement can reach this machine's sync before the answer reaches this
+    // request — which materializes the destination folders (each with its
+    // `.gitkeep`). Renaming onto that non-empty placeholder failed (ENOTEMPTY),
+    // leaving the old folder in this person's tree while every teammate had
+    // the move (plan T31/L02). A destination holding nothing but placeholders
+    // is that projection; it is replaced, never merged into.
+    if (await onlyFolderPlaceholders(toDirFinalAbs)) {
+      await rm(toDirFinalAbs, { recursive: true, force: true });
+    }
     try {
       await rename(dirAbs, toDirFinalAbs);
     } catch (err) {

package/apps/studio/canvas-build.ts

@@ -22,7 +22,7 @@
 // serves the resulting JS at /<designRel>/ui/<slug>.tsx with Content-Type
 // `application/javascript`.
 
-import { existsSync } from 'node:fs';
+import { existsSync, realpathSync } from 'node:fs';
 import path from 'node:path';
 
 import { canvasLibPath, canvasLibResolver } from './canvas-lib-resolver.ts';
@@ -129,6 +129,10 @@ export async function buildCanvasModule(
   // needed; RUNTIME_PACKAGES already lists every specifier the importmap covers.
   const externalSpecifiers = new Set<string>(RUNTIME_PACKAGES);
   const denials: Array<{ specifier: string; reason: string }> = [];
+  // Every stylesheet the canvas pulls in by relative import — they are inlined
+  // (below), so the open canvas has no <link> to swap when one changes; the
+  // injector records them for the iframe's HMR client (see buildCssInjector).
+  const cssSources = new Set<string>();
 
   const built = await Bun.build({
     entrypoints: [canvasAbsPath],
@@ -151,6 +155,17 @@ export async function buildCanvasModule(
       'process.env.NODE_ENV': '"production"',
     },
     plugins: [
+      {
+        name: 'css-sources',
+        setup(builder) {
+          builder.onResolve({ filter: /\.css$/ }, (args: { path: string; importer: string }) => {
+            if (args.path.startsWith('.') && args.importer) {
+              cssSources.add(path.resolve(path.dirname(args.importer), args.path));
+            }
+            return null; // record only — resolution continues as before
+          });
+        },
+      },
       // Resolve `@maude/canvas-lib` BEFORE exact-externals — we want the bare
       // specifier to map to the dev-server-bundled lib, not get marked external.
       canvasLibResolver(),
@@ -217,7 +232,26 @@ export async function buildCanvasModule(
     for (const a of cssAssets) css += await a.text();
     if (css.trim().length > 0) {
       const slug = canvasAbsPath.split('/').pop() ?? 'canvas';
-      js = buildCssInjector(slug, css) + js;
+      const root = options.designRoot ?? options.restrictImportsTo;
+      // Real paths on both sides: the bundler reports importers by their REAL
+      // path, and a design root reached through a symlink (macOS `/var` →
+      // `/private/var`, where every temp dir lives) made each source look like
+      // `../../private/…` — filtered out, so nothing was ever named and the
+      // open canvas never restyled.
+      const real = (p: string) => {
+        try {
+          return realpathSync(p);
+        } catch {
+          return p;
+        }
+      };
+      const realRoot = root ? real(root) : null;
+      const sources = realRoot
+        ? [...cssSources]
+            .map((abs) => path.relative(realRoot, real(abs)).split(path.sep).join('/'))
+            .filter((rel) => rel && !rel.startsWith('..'))
+        : [];
+      js = buildCssInjector(slug, css, sources) + js;
     }
   }
 
@@ -227,16 +261,23 @@ export async function buildCanvasModule(
 
 /**
  * Synthesize a module-init prologue that creates a `<style data-canvas-css>`
- * tag with the bundled CSS text. Idempotent per-slug — duplicate mounts of
- * the same canvas don't re-inject. Run at top-level so it executes before
- * the React component does its first render.
+ * tag with the bundled CSS text. One tag per slug — a duplicate mount reuses
+ * it, and a RE-IMPORT (the iframe's soft reload after a stylesheet changed)
+ * replaces its text, so a changed import actually reaches the page. Run at
+ * top-level so it executes before the React component does its first render.
+ *
+ * `sources` — the design-root-relative stylesheets inlined here — lands on the
+ * tag as `data-canvas-css-sources` (`|`-separated): the iframe's HMR client
+ * reloads when one of them changes, since there is no <link> to swap (plan
+ * T31/L16: a canvas importing `../system/<ds>/tokens.css` never restyled).
  */
-function buildCssInjector(slug: string, css: string): string {
+function buildCssInjector(slug: string, css: string, sources: readonly string[] = []): string {
   // JSON-encode the CSS text so we don't need to worry about backticks,
   // backslashes, or embedded `</style>` (which would break a raw template).
   const enc = JSON.stringify(css);
-  const id = `canvas-css-${slug.replace(/[^a-zA-Z0-9-]/g, '_')}`;
-  return `// canvas-build: inject bundled sibling CSS so the canvas is self-contained.\n(function(){if(typeof document==="undefined")return;if(document.getElementById(${JSON.stringify(id)}))return;var s=document.createElement("style");s.id=${JSON.stringify(id)};s.dataset.canvasCss="bundled";s.textContent=${enc};document.head.appendChild(s);})();\n`;
+  const id = JSON.stringify(`canvas-css-${slug.replace(/[^a-zA-Z0-9-]/g, '_')}`);
+  const src = JSON.stringify(sources.join('|'));
+  return `// canvas-build: inject bundled sibling CSS so the canvas is self-contained.\n(function(){if(typeof document==="undefined")return;var s=document.getElementById(${id});if(!s){s=document.createElement("style");s.id=${id};s.dataset.canvasCss="bundled";document.head.appendChild(s);}s.dataset.canvasCssSources=${src};if(s.textContent!==${enc})s.textContent=${enc};})();\n`;
 }
 
 /**

package/apps/studio/canvas-edit.ts

@@ -696,6 +696,7 @@ export function applyTextEdit(
     const expr = (only as AnyNode).expression;
     // A single `{'string literal'}` — rewrite the literal in place (DDR-150 P1).
     if (isStringLit(expr)) {
+      if (expr.value === text) return { source, delta: 0 };
       const s = new MagicString(source);
       s.overwrite(expr.start as number, expr.end as number, JSON.stringify(text));
       const out = s.toString();
@@ -727,6 +728,10 @@ export function applyTextEdit(
   const start = only.start as number;
   const end = only.end as number;
   const raw = source.slice(start, end);
+  // The text it already shows is not an edit (plan T23): a multi-line JSX text
+  // renders as its lines joined by one space, and rewriting it with that same
+  // text used to fold the author's line breaks into one line.
+  if (jsxRenderedText(raw) === escapeJsxText(text)) return { source, delta: 0 };
   // Preserve the original indentation/newline framing; swap only the visible text.
   const lead = /^\s*/.exec(raw)?.[0] ?? '';
   const trail = /\s*$/.exec(raw)?.[0] ?? '';
@@ -746,6 +751,26 @@ export function applyTextEdit(
 // the index drifts (`.filter().map()`, reorders). Anything we can't target
 // unambiguously returns null → the caller throws → routes to /design:edit.
 
+/**
+ * JSX's own whitespace rule for a text child, on the raw source: each line is
+ * trimmed (inner lines on both sides), empty lines drop, and the rest join with
+ * one space. Entities stay encoded — the caller compares against escaped text.
+ */
+function jsxRenderedText(raw: string): string {
+  const lines = raw.split(/\r\n|\n|\r/);
+  if (lines.length === 1) return raw.trim();
+  return lines
+    .map((line, i) => {
+      let l = line;
+      if (i !== 0) l = l.replace(/^[ \t]+/, '');
+      if (i !== lines.length - 1) l = l.replace(/[ \t]+$/, '');
+      return l;
+    })
+    .filter((l) => l.length > 0)
+    .join(' ')
+    .trim();
+}
+
 function isStringLit(n: AnyNode): boolean {
   return !!(
     n &&
@@ -4871,6 +4896,28 @@ export function assembleCompSource(
 // ---------------------------------------------------------------------------
 // Edit shapes.
 
+/**
+ * The literal an attribute expression IS — a string, number or boolean (a
+ * negative number arrives as a unary minus) — or null for anything computed.
+ */
+function literalOfExpression(expr: AnyNode): string | number | boolean | null {
+  if (!expr) return null;
+  if (expr.type === 'Literal' || expr.type === 'StringLiteral') {
+    const v = expr.value;
+    return typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' ? v : null;
+  }
+  if (expr.type === 'NumericLiteral') return typeof expr.value === 'number' ? expr.value : null;
+  if (expr.type === 'BooleanLiteral') return typeof expr.value === 'boolean' ? expr.value : null;
+  if (
+    expr.type === 'UnaryExpression' &&
+    expr.operator === '-' &&
+    (expr.argument?.type === 'Literal' || expr.argument?.type === 'NumericLiteral') &&
+    typeof expr.argument.value === 'number'
+  )
+    return -expr.argument.value;
+  return null;
+}
+
 function editStringAttr(
   s: MagicString,
   opening: AnyNode,
@@ -4897,6 +4944,9 @@ function editStringAttr(
       return;
     }
     if (v.type === 'Literal' || v.type === 'StringLiteral') {
+      // Setting the value it already has is not an edit (plan T23): keep the
+      // author's bytes, quote style included.
+      if (typeof v.value === 'string' && v.value === value) return;
       // Replace the whole `"value"` (quotes included) so we control the escaping.
       // The value lands in a JSX *attribute*, where `"` must become `"` and
       // `<`/`>` their entities — NOT JS backslash escaping. `JSON.stringify` would
@@ -4921,6 +4971,25 @@ function editStringAttr(
           { canvas: canvasAbsPath, id }
         );
       }
+      // A NUMBER OR BOOLEAN STAYS ONE (plan T23). `height={400}`,
+      // `durationInFrames={30}`, `aria-pressed={false}` used to come back as
+      // `"400"` / `"30"` / `"false"` — a different type, which a component that
+      // does arithmetic on its prop (every Remotion timing prop) silently
+      // mis-reads — and even an edit to the value it already had rewrote the
+      // bytes. The same value is now no edit; a new number or boolean is
+      // written into the braces it came in.
+      const lit = literalOfExpression(inner);
+      if (lit !== null) {
+        if (String(lit) === value) return;
+        if (typeof lit === 'number' && /^-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(value)) {
+          s.overwrite(inner.start, inner.end, value);
+          return;
+        }
+        if (typeof lit === 'boolean' && (value === 'true' || value === 'false')) {
+          s.overwrite(inner.start, inner.end, value);
+          return;
+        }
+      }
       // Replace the whole `{...}` with a plain quoted literal — keeps the
       // resulting JSX readable. Same JSX-attribute escaping as above (NOT
       // `JSON.stringify`, which would JS-escape a `"` and corrupt the source).
@@ -5726,6 +5795,14 @@ export function relocateElement(
   return matches.length === 1 ? (matches[0] as { id: string }).id : null;
 }
 
+/** T23 — every JSX element of `source` with its id and print (corpus checks). */
+export function listElements(
+  canvasAbsPath: string,
+  source: string
+): Array<{ id: string; print: ElementPrint }> {
+  return printAll(canvasAbsPath, source, null);
+}
+
 /** T23 — how many elements of `source` carry a print no other element shares. */
 export function printUniqueness(
   canvasAbsPath: string,

package/apps/studio/canvas-list-watch.ts

@@ -25,9 +25,28 @@
 
 import path from 'node:path';
 
-import { canvasSlugFromRel, findHtmlFiles, SKIP_DIRS } from './api.ts';
+import {
+  canvasSlugFromRel,
+  findFiles,
+  findHtmlFiles,
+  PREVIEW_ASSET_EXTS,
+  SKIP_DIRS,
+} from './api.ts';
 import type { Context } from './context.ts';
 
+/**
+ * Supporting files the tree lists beside the canvases (images, fonts, media —
+ * the same `PREVIEW_ASSET_EXTS` `/_index-data` walks). A new one written from
+ * outside the app — an agent's export, a teammate's image arriving through
+ * sync — is a tree change too; without it the row stayed missing until
+ * something else reloaded the tree (plan T17/L03). Sidecars and stylesheets are
+ * deliberately NOT here: they are rewritten on every edit, and the tree nests
+ * them under their canvas anyway.
+ */
+function isListedFile(low: string): boolean {
+  return PREVIEW_ASSET_EXTS.some((x) => low.endsWith(x));
+}
+
 /** Burst-collapse window. A new canvas writes both `.tsx` and `.meta.json`; a
  * git checkout touches many files at once — one snapshot per quiet window. */
 export const CANVAS_LIST_DEBOUNCE_MS = 150;
@@ -59,7 +78,8 @@ export function isCanvasCandidate(rel: string, groupPaths: string[]): boolean {
   // canvases costs one recompute and emits nothing.
   const last = p.slice(p.lastIndexOf('/') + 1);
   const looksLikeDir = !last.includes('.');
-  if (!looksLikeDir && !low.endsWith('.tsx') && !low.endsWith('.html')) return false;
+  if (!looksLikeDir && !low.endsWith('.tsx') && !low.endsWith('.html') && !isListedFile(low))
+    return false;
   const segs = p.split('/');
   for (const s of segs) {
     if (!s) return false;
@@ -123,6 +143,11 @@ export function createCanvasListWatch(
         continue; // group dir missing / unreadable — treat as empty
       }
       for (const f of files) out.add(f);
+      try {
+        for (const f of await findFiles(groupAbs, groupRel, PREVIEW_ASSET_EXTS)) out.add(f);
+      } catch {
+        /* unreadable — the canvases above still diff */
+      }
     }
     return out;
   }
@@ -137,6 +162,12 @@ export function createCanvasListWatch(
     // render/open/build sink without re-validating against /_index-data.
     const prefix = `${ctx.paths.designRel.replace(/^\/+|\/+$/g, '')}/`;
     const relOut = rel.startsWith(prefix) ? rel.slice(prefix.length) : rel;
+    if (isListedFile(rel.toLowerCase())) {
+      // Not a canvas: its own action and no slug, so no consumer mistakes an
+      // image for a canvas to close, retarget or adopt.
+      ctx.bus.emit('canvas-list-update', { action: `file-${action}`, rel: relOut });
+      return;
+    }
     ctx.bus.emit('canvas-list-update', {
       action,
       rel: relOut,

package/apps/studio/client/app.jsx

@@ -32,7 +32,7 @@ import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 // same "pull only pure logic into the client bundle" shape as the imports
 // above (a type-only SyncStatusSnapshot import that Bun erases).
 import { syncPresentation } from '../sync/presentation.ts';
-import { canvasUrl } from './canvas-url.js';
+import { canvasTokenRefreshDelay, canvasUrl, setLiveCanvasToken } from './canvas-url.js';
 import { applyEditRequest } from './apply-edit-request.ts';
 import { createIndexLoader } from './index-loader.ts';
 import {
@@ -4684,6 +4684,28 @@ function Viewport({
   useEffect(() => {
     if (previewPath) previewRef.current?.focus();
   }, [previewPath]);
+  // An open canvas keeps the URL it was opened with. The capability in it is
+  // re-minted on a timer (canvas-url.js); letting that change the `src` of a
+  // live iframe would reload every open canvas every few minutes. The fresh
+  // capability reaches an open canvas by message instead, and a frame that is
+  // (re)created — a new tab, a Retry, a config change — is built with it.
+  // Only while the frame is open: a closed tab reopened later is a new frame
+  // and must not inherit a capability that may have expired meanwhile.
+  const srcCache = useRef(new Map());
+  const openPaths = new Set(tabs.map((t) => t.path));
+  for (const [key, entry] of srcCache.current) {
+    if (!openPaths.has(entry.path)) srcCache.current.delete(key);
+  }
+  const stableSrc = (path) => {
+    const bare = canvasUrl(path, { ...cfg, canvasToken: undefined });
+    const key = `${path}#${canvasReloadNonce}|${bare}`;
+    let entry = srcCache.current.get(key);
+    if (!entry) {
+      entry = { path, src: canvasUrl(path, cfg) };
+      srcCache.current.set(key, entry);
+    }
+    return entry.src;
+  };
   // One observable word for "what is the canvas pane actually doing" — the
   // top-frame signal the #115 E2E scenario waits on, and the only place these
   // three states are named together. `ready` is `dgn:'loaded'`-backed, so it
@@ -4776,7 +4798,7 @@ function Viewport({
             // path exactly as before.
             key={`${t.path}#${canvasReloadNonce}`}
             ref={(el) => registerIframe(t.path, el)}
-            src={canvasUrl(t.path, cfg)}
+            src={stableSrc(t.path)}
             className={t.path === activePath ? 'active' : ''}
             data-path={t.path}
             data-testid={t.path === activePath ? 'canvas-frame' : undefined}
@@ -5353,6 +5375,7 @@ function CommentsPanel({
             type="button"
             className={'st-cm-filter' + (filter === 'all' ? ' is-active' : '')}
             role="tab"
+            data-testid="comment-filter-all"
             aria-selected={filter === 'all'}
             onClick={() => setFilter('all')}
           >
@@ -5362,6 +5385,7 @@ function CommentsPanel({
             type="button"
             className={'st-cm-filter' + (filter === 'open' ? ' is-active' : '')}
             role="tab"
+            data-testid="comment-filter-open"
             aria-selected={filter === 'open'}
             onClick={() => setFilter('open')}
           >
@@ -5371,6 +5395,7 @@ function CommentsPanel({
             type="button"
             className={'st-cm-filter' + (filter === 'resolved' ? ' is-active' : '')}
             role="tab"
+            data-testid="comment-filter-resolved"
             aria-selected={filter === 'resolved'}
             onClick={() => setFilter('resolved')}
           >
@@ -5402,6 +5427,7 @@ function CommentsPanel({
               {g.comments.map((c) => (
                 <div
                   key={c.id}
+                  data-testid={`comment-item-${c.id}`}
                   className={
                     'st-comment' +
                     (c.status === 'resolved' ? ' is-resolved' : '') +
@@ -9578,8 +9604,10 @@ function InspectorPanel({
   };
   // An annotation-image has no element tabs; force Photo. Otherwise honor the
   // requested tab, but drop off a stale 'photo' tab when the new selection isn't
-  // photo-eligible (so switching from a photo to a normal element lands sanely).
-  const effTab = photoOnly ? 'photo' : tab === 'photo' && !photoTarget ? 'inspect' : tab;
+  // photo-eligible — onto CSS, the editing tab a fresh selection opens on (Stage
+  // C). Landing on read-only Inspect meant that after touching a sticker, the
+  // next element you clicked showed facts instead of the controls to change it.
+  const effTab = photoOnly ? 'photo' : tab === 'photo' && !photoTarget ? 'css' : tab;
   const tabBtn = (id, label, icon) => (
     <button
       type="button"
@@ -10806,6 +10834,71 @@ function App() {
   const wsRef = useRef(null);
   const iframesRef = useRef(new Map());
 
+  // THE CANVAS CAPABILITY OUTLIVES NO TAB (cloud only). It expires 15 minutes
+  // after the proxy minted it (render-token.mjs) and cannot be revoked, so it
+  // stays short — which left every cloud tab open longer than that with
+  // canvases that stopped updating: a teammate's edit re-imports the canvas
+  // module, and the canvas origin answered 401. Re-mint it well inside the
+  // lifetime (every `/_config` answer carries a fresh one), hand it to each
+  // open canvas, and let new frames be built with it. On waking a tab that
+  // slept past the cadence, do it at once. Desktops have no capability and
+  // never start the timer.
+  useEffect(() => {
+    if (!cfg?.canvasToken) return undefined;
+    let stopped = false;
+    let timer = null;
+    let dueAt = 0;
+    const schedule = (token) => {
+      clearTimeout(timer);
+      const delay = canvasTokenRefreshDelay(token);
+      dueAt = Date.now() + delay;
+      timer = setTimeout(refresh, delay);
+    };
+    async function refresh() {
+      let token = null;
+      try {
+        const res = await fetch('/_config', { cache: 'no-store', credentials: 'same-origin' });
+        if (res.ok) token = (await res.json())?.canvasToken;
+      } catch {
+        /* retried below; the current capability may still be valid */
+      }
+      if (stopped) return;
+      if (typeof token !== 'string' || !token) {
+        clearTimeout(timer);
+        dueAt = Date.now() + 30_000;
+        timer = setTimeout(refresh, 30_000);
+        return;
+      }
+      setLiveCanvasToken(token);
+      // To the canvas origin only, never '*': a frame the canvas content
+      // navigated elsewhere must not be handed the capability.
+      let target = null;
+      try {
+        target = new URL(cfg.canvasOrigin, location.href).origin;
+      } catch {}
+      if (target) {
+        for (const el of iframesRef.current.values()) {
+          try {
+            el.contentWindow?.postMessage({ dgn: 'canvas-cap', t: token }, target);
+          } catch {}
+        }
+      }
+      schedule(token);
+    }
+    schedule(cfg.canvasToken);
+    // A background tab's timers are throttled; one woken past its due time
+    // re-mints at once rather than on the throttled tick.
+    const onVisible = () => {
+      if (document.visibilityState === 'visible' && Date.now() >= dueAt) refresh();
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  }, [cfg?.canvasToken, cfg?.canvasOrigin]);
+
   // Phase 5.1 — postMessage bridge from menubar dropdowns to the canvas iframe.
   // The canvas-shell listens for these `dgn:*` messages and dispatches into the
   // matching local provider (annotations visibility / both selection stores /

package/apps/studio/client/canvas-url.js

@@ -9,6 +9,43 @@
 // default DS's tokens — whose ladder is scoped to a different `.<rootClass>`
 // subtree — so every `var(--*)` went undefined and the canvas rendered white.
 
+// THE CANVAS CAPABILITY EXPIRES (render-token.mjs: 15 minutes) and cannot be
+// revoked, so it is short on purpose. A tab open longer than that must carry a
+// fresh one or its canvases stop loading and stop updating — every module
+// re-import after a teammate's edit answers 401. The shell re-mints it on a
+// timer (`refreshCanvasToken` in app.jsx) and records it here; a URL built
+// after that carries the fresh capability. `null` until the first refresh:
+// the one in `/_config` is then current.
+let liveCanvasToken = null;
+export function setLiveCanvasToken(token) {
+  liveCanvasToken = typeof token === 'string' && token ? token : null;
+}
+export function currentCanvasToken(cfg) {
+  return cfg?.canvasToken ? (liveCanvasToken ?? cfg.canvasToken) : null;
+}
+
+/**
+ * When to re-mint a capability: at 60% of what is left of it, read off the
+ * token's own expiry claim (`e`, ms — render-token.mjs), so the cadence
+ * follows the hub's lifetime instead of a copy of it. Never sooner than 30 s
+ * (a skewed clock cannot turn this into a busy loop) and never later than
+ * 10 minutes; an unreadable token gets the ceiling.
+ */
+export function canvasTokenRefreshDelay(token, now = Date.now()) {
+  const MIN = 30_000;
+  const MAX = 10 * 60_000;
+  try {
+    const body = String(token).slice(0, String(token).lastIndexOf('.'));
+    const b64 = body.replace(/-/g, '+').replace(/_/g, '/');
+    const claims = JSON.parse(atob(b64 + '==='.slice((b64.length + 3) % 4)));
+    const left = Number(claims?.e) - now;
+    if (!Number.isFinite(left)) return MAX;
+    return Math.min(MAX, Math.max(MIN, Math.floor(left * 0.6)));
+  } catch {
+    return MAX;
+  }
+}
+
 export function urlOf(p) {
   return '/' + p.split('/').map(encodeURIComponent).join('/');
 }
@@ -47,7 +84,8 @@ export function canvasUrl(p, cfg, opts) {
   // origin: a cookie scoped widely enough to cover it would be readable by the
   // untrusted canvas content itself, which is the one thing the DDR-054 split
   // exists to prevent — so the capability lives in the URL instead.
-  if (cfg?.canvasToken) params.set('t', cfg.canvasToken);
+  const token = currentCanvasToken(cfg);
+  if (token) params.set('t', token);
   const ds0 = cfg?.designSystems?.[0];
   // Specimen detection: anything under `system/<ds>/preview/` belongs to that
   // specific DS, so it must render with *that* DS's tokens — not always the

package/apps/studio/client/styles/3-shell-maude.css

@@ -2734,6 +2734,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .sp-note-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
 .sp-note-dot.is-synced { background: var(--presence-online); }
 .sp-note-dot.is-refused, .sp-note-dot.is-stalled, .sp-note-dot.is-offline { background: var(--status-error); }
+.sp-note > .btn { flex: none; white-space: nowrap; }
 .sp-sect-attention { color: var(--status-error); }
 .sp-list { list-style: none; margin: 0; padding: 0; }
 .sp-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); font-size: var(--type-sm); color: var(--fg-1); min-width: 0; }