@1agh/maude 1.2.0 → 1.3.1

package/apps/studio/client/share-dialog.jsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from 'react';
+import { notify } from '../notifications.tsx';
+
+/** Modal keyboard handling shared by the share and file-link decisions. */
+export function useLinkDialogFocus(onClose) {
+  const ref = useRef(null);
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  useEffect(() => {
+    const previous = document.activeElement;
+    const el = ref.current;
+    const controls = () => [...el.querySelectorAll('button:not(:disabled), a[href], input:not(:disabled)')];
+    controls()[0]?.focus();
+    const key = (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        closeRef.current();
+      } else if (event.key === 'Tab') {
+        const items = controls();
+        const first = items[0];
+        const last = items.at(-1);
+        if (event.shiftKey && (document.activeElement === first || !el.contains(document.activeElement))) {
+          event.preventDefault(); last?.focus();
+        } else if (!event.shiftKey && (document.activeElement === last || !el.contains(document.activeElement))) {
+          event.preventDefault(); first?.focus();
+        }
+      }
+    };
+    document.addEventListener('keydown', key, true);
+    return () => { document.removeEventListener('keydown', key, true); previous?.focus?.(); };
+  }, []);
+  return ref;
+}
+
+export async function copyShareLink(value) {
+  try {
+    await navigator.clipboard.writeText(value);
+    notify({ title: 'Link copied', kind: 'success' });
+    return true;
+  } catch {
+    notify({ title: 'Could not copy link', description: 'Select the address and copy it manually.', kind: 'error' });
+    return false;
+  }
+}
+
+export function ShareDialog({ target, links, shell, onClose, Icon }) {
+  const ref = useLinkDialogFocus(onClose);
+  const [copied, setCopied] = useState(null);
+  const timer = useRef(null);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const copy = async (kind, value) => {
+    if (await copyShareLink(value)) {
+      setCopied(kind);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(null), 1500);
+    }
+  };
+  return (
+    <div className="st-scrim" role="presentation" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div ref={ref} className="st-dialog st-share-dialog" role="dialog" aria-modal="true" aria-label={`Share ${target.label}`} data-testid="share-dialog">
+        <div className="st-dialog-hd">
+          <span className="st-dialog-title">Share {target.label}</span>
+          <button type="button" className="st-iconbtn" aria-label="Close share dialog" onClick={onClose}><Icon name="x" size={15} /></button>
+        </div>
+        <div className="st-dialog-bd">
+          <p className="st-share-path">{target.rel}</p>
+          {!links.web && <p className="st-dialog-note">Connect this project to Maude Cloud to get a web link.</p>}
+          {[
+            ['web', 'Web link', links.web],
+            ['app', 'Open in Maude app', links.app],
+            ['local', 'Local link (this Mac only)', links.local],
+          ].filter(([, , value]) => value).map(([kind, label, value]) => (
+            <div key={kind} className="st-share-link">
+              <label className="st-dialog-lbl" htmlFor={`share-${kind}-url`}>{label}</label>
+              <div className="st-dialog-row">
+                <input id={`share-${kind}-url`} data-testid={`share-${kind}-url`} readOnly value={value} onFocus={(e) => e.target.select()} />
+                <button type="button" className="btn btn--ghost" aria-label={`Copy ${label}`} data-testid={`share-copy-${kind}`} onClick={() => copy(kind, value)}>
+                  <Icon name={copied === kind ? 'check' : 'link'} size={14} />{copied === kind ? 'Copied' : 'Copy'}
+                </button>
+              </div>
+              {kind === 'app' && links.appIsLocalOnly && <p className="st-share-hint">Opens the folder on this Mac only.</p>}
+              {kind === 'app' && shell !== 'native' && <a href={value} data-testid="share-open-app">Open in app</a>}
+            </div>
+          ))}
+          {links.web && <p className="st-share-hint">People need access to this project to open the link.</p>}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/share-link.js

@@ -0,0 +1,94 @@
+// Shell addresses use the same design-root-relative file identity as canvas URLs.
+// RETURN_RULES twin: apps/hub/src/return-to.mjs; native: project_resolve.rs.
+const PROJECT_RE = /^[a-z0-9](?:[a-z0-9-]{0,38}[a-z0-9])?$/;
+
+/** Validate an already decoded file identity. Never decode a filesystem path. */
+export function normalizeOpenPath(raw, designRel = '.design') {
+  if (typeof raw !== 'string' || !raw || raw.length > 512) return null;
+  if (/^[a-z]:/i.test(raw) || raw.includes('\\')) return null;
+  if ([...raw].some((c) => c.charCodeAt(0) < 32 || c.charCodeAt(0) === 127)) return null;
+  const prefix = `${designRel.replace(/^\.\//, '').replace(/\/$/, '')}/`;
+  const rel = raw.startsWith(prefix) ? raw.slice(prefix.length) : raw;
+  return rel.split('/').some((s) => s === '' || s === '.' || s === '..') ? null : rel;
+}
+
+/** Decode a URL value exactly once, then validate. */
+export function normalizeOpenParam(raw, designRel = '.design') {
+  if (typeof raw !== 'string') return null;
+  try {
+    return normalizeOpenPath(decodeURIComponent(raw), designRel);
+  } catch {
+    return null;
+  }
+}
+
+export function readOpenParam(location, designRel = '.design') {
+  const values = new URLSearchParams(location.search).getAll('open');
+  // URLSearchParams already decoded the value; a second decode changes filenames.
+  return values.length === 1 ? normalizeOpenPath(values[0], designRel) : null;
+}
+
+export const encodeOpenPath = (rel) => rel.split('/').map(encodeURIComponent).join('/');
+
+export function withOpenParam(location, rel) {
+  const path = normalizeOpenPath(rel);
+  return path ? `?open=${encodeOpenPath(path)}` : location.pathname;
+}
+
+function httpUrl(raw) {
+  try {
+    const u = new URL(raw);
+    return /^https?:$/.test(u.protocol) && !u.username && !u.password ? u : null;
+  } catch {
+    return null;
+  }
+}
+
+export function projectIdFromHubUrl(raw) {
+  const host = httpUrl(raw)?.hostname;
+  if (!host || host.includes(':') || /^[\d.]+$/.test(host) || host.endsWith('.localhost')) return null;
+  const labels = host.split('.');
+  return labels.length >= 3 && PROJECT_RE.test(labels[0]) ? labels[0] : null;
+}
+
+export function projectSlug(name) {
+  const slug = String(name ?? '').split('/').pop().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40).replace(/-$/, '');
+  return PROJECT_RE.test(slug) ? slug : null;
+}
+
+/** A configured hub identity takes precedence over the folder's fallback name. */
+export function localIdentityMatches(local, project) {
+  const linked = projectIdFromHubUrl(local.linkedHub?.url);
+  return linked ? linked === project : projectSlug(local.project) === project;
+}
+
+export function buildShareLinks({ rel, shell, location, linkedHubUrl, project, localUrl }) {
+  const path = normalizeOpenPath(rel);
+  const result = { web: null, app: null, local: null, projectLabel: project ?? '', appIsLocalOnly: false };
+  if (!path) return result;
+  const query = `?open=${encodeOpenPath(path)}`;
+  const publicUrl = (value) => {
+    const url = httpUrl(value);
+    return url && !/^(localhost|127\.[\d.]+|\[::1\])$/.test(url.hostname) && !url.hostname.endsWith('.localhost') ? url : null;
+  };
+  const hub = publicUrl(linkedHubUrl);
+  const cloud = shell === 'cloud' ? publicUrl(location?.origin) : null;
+  const publicId = projectIdFromHubUrl(cloud?.origin ?? hub?.origin);
+  const id = publicId ?? projectSlug(project);
+  result.projectLabel = id ?? project ?? '';
+  result.web = cloud ? `${cloud.origin}${location.pathname}${query}` : hub ? `${hub.origin}/${query}` : null;
+  result.app = id ? `maude://open/${id}${query}` : null;
+  result.appIsLocalOnly = !!id && !publicId;
+  const local = shell !== 'cloud' && httpUrl(localUrl);
+  result.local = local ? `${local.origin}/${query}` : null;
+  return result;
+}
+
+export function parseFileDeepLink(raw) {
+  const m = /^maude:\/\/open\/([a-z0-9](?:[a-z0-9-]{0,38}[a-z0-9])?)\/?\?([^#]*)$/.exec(String(raw ?? ''));
+  if (!m) return null;
+  const params = new URLSearchParams(m[2]);
+  if ([...params.keys()].some((key) => key !== 'open')) return null;
+  const rel = readOpenParam({ search: m[2] });
+  return rel ? { project: m[1], rel } : null;
+}

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

@@ -584,25 +584,7 @@
 .st-pal-icon { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--bg-4); display: grid; place-items: center; color: var(--fg-1); flex: none; }
 .st-pal-item.is-active .st-pal-icon { background: var(--accent); color: var(--accent-fg); }
 
-/* ─── What's-new toast (Plan C P6) ─────────────────────────────────────────
- * Lifted from Studio.css `.st-toast*`; repositioned fixed bottom-left for the
- * real shell (the mockup floated it inside the stage). Mirrors ai-banner. */
-.st-toast {
-  /* bottom raised above the in-canvas zoom pill (`.dc-zoom-tb`, bottom-left). */
-  position: fixed; left: 16px; bottom: 84px; width: 320px; z-index: 8000;
-  background: var(--bg-2); border: 1px solid var(--border-default); border-left: 3px solid var(--accent);
-  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-4);
-  display: flex; flex-direction: column; gap: var(--space-2);
-  animation: st-toast-in var(--dur-route) var(--ease-out);
-}
-@keyframes st-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
-@media (prefers-reduced-motion: reduce) { .st-toast { animation-duration: 1ms; } }
-.st-toast-hd { display: flex; align-items: center; gap: var(--space-2); color: var(--accent); font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
-.st-toast-title { font-size: var(--type-md); font-weight: 600; color: var(--fg-0); }
-.st-toast-txt { font-size: var(--type-sm); color: var(--fg-1); line-height: 1.5; }
 .st-toast-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
-.st-toast-close { position: absolute; top: var(--space-2); right: var(--space-2); appearance: none; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-xs); }
-.st-toast-close:hover { background: var(--bg-3); color: var(--fg-0); }
 
 /* ─── Export & handoff dialog (Plan C P9/P10) ──────────────────────────────
  * Lifted from Studio.css `.st-dialog*` / `.st-fmt*`. Rendered inside `.st-scrim`. */
@@ -2197,6 +2179,8 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gp-version-msg { color: var(--fg-0); font-size: var(--type-sm); overflow: hidden; text-overflow: ellipsis; }
 .gp-version-meta { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); margin-top: 2px; }
 .gp-version-when { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); white-space: nowrap; transition: opacity var(--dur-soft) ease; }
+/* accepted revisions (T27/T28) — a row carries its own actions, so it is not a button */
+.gp-version-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(-1 * var(--space-1)); }
 
 /* phase-27.1 — per-file History rows are click-to-preview when a canvas is open */
 .gp-history-scope { color: var(--fg-1); font-size: var(--type-xs); padding: var(--space-1) var(--space-2) var(--space-2); margin: 0; }
@@ -2648,6 +2632,39 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
   .ob-spin { animation-duration: 1ms; }
 }
 
+/* ── Team projects (plan T22) — the designer's way in: recent managed copies,
+   Maude Cloud projects, a team server sign-in. Composes the ob-* door parts; the
+   dialog frame reuses gi-modal/gi-dialog from the project switcher. ── */
+.gi-dl-open { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); }
+.sp-ai-held { display: flex; flex-direction: column; gap: var(--space-2); }
+.sp-ai-actions { display: flex; gap: var(--space-2); }
+/* ── SourceConflictPanel (plan T28) — two versions, line by line. ── */
+.gi-dialog.scp-dialog { width: min(760px, 94vw); max-height: min(820px, 90vh); overflow: hidden; display: flex; flex-direction: column; padding: var(--space-6); gap: var(--space-4); }
+.scp-legend { display: flex; gap: var(--space-4); font-size: var(--type-xs); color: var(--fg-2); }
+.scp-key::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--space-2); vertical-align: -1px; }
+.scp-key--mine::before { background: color-mix(in oklch, var(--status-warn) 45%, transparent); }
+.scp-key--theirs::before { background: color-mix(in oklch, var(--status-info) 45%, transparent); }
+.scp-diff { flex: 1; min-height: 120px; overflow: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-1); font-family: var(--font-mono); font-size: var(--type-xs); line-height: 1.55; }
+.scp-diff:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.scp-line { display: flex; gap: var(--space-2); padding: 0 var(--space-3); white-space: pre; }
+.scp-line code { font: inherit; color: var(--fg-1); }
+.scp-mark { width: 1ch; color: var(--fg-3); flex: none; }
+.scp-line--mine { background: color-mix(in oklch, var(--status-warn) 14%, transparent); }
+.scp-line--theirs { background: color-mix(in oklch, var(--status-info) 14%, transparent); }
+.scp-line--skip { color: var(--fg-3); font-style: italic; }
+.scp-line--skip code { color: var(--fg-3); }
+.scp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
+.scp-hint { font-size: var(--type-xs); color: var(--fg-2); }
+.scp-error { margin: 0; color: var(--status-error); font-size: var(--type-sm); }
+.tp { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }
+.tp-section { display: flex; flex-direction: column; gap: var(--space-3); }
+.tp-device { display: flex; flex-direction: column; gap: var(--space-3); max-width: 560px; }
+.tp-device .ob-form-actions { align-items: center; justify-content: space-between; }
+.gi-dialog.tp-dialog { width: min(620px, 94vw); max-height: min(760px, 90vh); overflow: auto; padding: var(--space-6); gap: var(--space-4); }
+.tp-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
+.tp-dialog-head h2 { margin: 0; font-size: var(--type-lg); color: var(--fg-0); }
+.tp-dialog-head p { margin: var(--space-1) 0 0; color: var(--fg-2); font-size: var(--type-sm); }
+
 /* ── Phase 29 (E4) — RepoBranchSwitcher. REDESIGNED to the approved mockup
    (.design/ui/RepoBranchSwitcher.tsx): a compact ONE-LINE dock at the BOTTOM of the
    sidebar (above the IdentityBar avatar) that opens ONE popup UPWARD. Mirrors the
@@ -2717,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; }

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

@@ -1454,7 +1454,7 @@
     animation-duration: 1ms;
   }
 }
-.st-toast .st-export-progress {
+.maude-notice .st-export-progress {
   margin-top: var(--space-1, 4px);
 }
 /* Busy state for the Save…/Download button — the bytes fetch + (native) the
@@ -2183,3 +2183,20 @@
   opacity: 0.6;
   font-size: 0.9em;
 }
+
+/* Issue #103: full export diagnostics are opt-in and stay inside the panel. */
+.st-export-item__error { min-width: 0; width: 100%; }
+.st-export-item__error summary { cursor: pointer; }
+.st-export-item__error pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; font: inherit; }
+.st-export-item:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+/* Share links reuse the shell dialog material. */
+.st-share-dialog { max-height: 90vh; overflow-y: auto; }
+.st-share-path, .st-share-hint { margin: 0; color: var(--fg-2); font-size: var(--type-xs); overflow-wrap: anywhere; }
+.st-share-link { display: flex; flex-direction: column; gap: var(--space-2); }
+.st-share-link input { flex: 1; min-width: 0; padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-2); color: var(--fg-0); font: inherit; }
+.st-share-link a { color: var(--fg-1); font-size: var(--type-xs); }
+.st-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-2); cursor: pointer; }
+.st-share-btn:hover { background: var(--bg-2); color: var(--fg-0); }
+.st-share-btn:disabled { opacity: .4; cursor: default; }
+.st-share-btn:focus-visible, .st-share-link input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

package/apps/studio/client/tree-row-menu.jsx

@@ -9,7 +9,24 @@
 // only `position` is overridden inline since this menu anchors to an
 // arbitrary row, not the menubar's fixed offset.
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+const EDGE = 8;
+
+/**
+ * Where a menu of `size` goes so it stays on screen: below the anchor when it
+ * fits, else above it, else pinned to the viewport edge (scrolling inside).
+ * A row near the bottom of a long tree used to open its menu off-screen.
+ */
+export function placeMenu(anchor, size, viewport) {
+  let top = anchor.bottom + 4;
+  if (top + size.height > viewport.height - EDGE) {
+    const above = anchor.top - 4 - size.height;
+    top = above >= EDGE ? above : Math.max(EDGE, viewport.height - EDGE - size.height);
+  }
+  const left = Math.max(EDGE, Math.min(anchor.left, viewport.width - EDGE - size.width));
+  return { top, left, maxHeight: viewport.height - 2 * EDGE };
+}
 
 /**
  * One shared menu instance per tree (mirrors useTreeDrag — only one row's
@@ -26,7 +43,14 @@ export function useRowMenu() {
     e.stopPropagation();
     const anchorEl = e.currentTarget;
     const r = anchorEl.getBoundingClientRect();
-    setState({ x: r.left, y: r.bottom + 4, anchorEl, view: 'root', extra });
+    setState({
+      x: r.left,
+      y: r.bottom + 4,
+      anchor: { top: r.top, bottom: r.bottom, left: r.left },
+      anchorEl,
+      view: 'root',
+      extra,
+    });
   };
   const close = () => {
     setState((s) => {
@@ -46,6 +70,25 @@ export function useRowMenu() {
  */
 export function TreeRowMenu({ state, onClose, rootItems, destinations, onPickDestination }) {
   const ref = useRef(null);
+  const [placed, setPlaced] = useState(null);
+  const view = state?.view;
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!state || !el) {
+      setPlaced(null);
+      return;
+    }
+    const anchor = state.anchor ?? { top: state.y - 4, bottom: state.y - 4, left: state.x };
+    setPlaced(
+      placeMenu(
+        anchor,
+        { width: el.offsetWidth, height: el.scrollHeight },
+        { width: window.innerWidth, height: window.innerHeight }
+      )
+    );
+    // Re-place when the view switches (Move to… is a different height).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state?.anchorEl, view]);
   useEffect(() => {
     if (!state) return;
     const el = ref.current;
@@ -79,7 +122,9 @@ export function TreeRowMenu({ state, onClose, rootItems, destinations, onPickDes
   }, [state, onClose]);
 
   if (!state) return null;
-  const style = { position: 'fixed', left: state.x, top: state.y };
+  const style = placed
+    ? { position: 'fixed', left: placed.left, top: placed.top, maxHeight: placed.maxHeight, overflowY: 'auto' }
+    : { position: 'fixed', left: state.x, top: state.y };
 
   if (state.view === 'move-to') {
     return (

package/apps/studio/client/whats-new.jsx

@@ -9,6 +9,7 @@
 // (entry.tour[]) land in Phase 3 — the panel/toast leave a hook for them.
 
 import { useCallback, useEffect, useState } from 'react';
+import { dismissNotice, notify } from '../notifications.tsx';
 import { bestSeenVersion, computeUnseen } from './whats-new-seen.js';
 
 const WN_SEEN = 'mdcc-whatsnew-seen';
@@ -143,37 +144,28 @@ export function WhatsNewBadge({ count = 0, onOpen }) {
 }
 
 export function WhatsNewToast({ wn }) {
-  if (!wn.showToast || !wn.toastEntry) return null;
-  const e = wn.toastEntry;
-  const total = wn.unseen.length;
-  // Plan C P6 — restyled to the maude `.st-toast` family (was `mdcc-wn-toast`),
-  // matching `.design/ui/Studio.tsx` AB-D. Behavior unchanged.
-  return (
-    <div className="st-toast" role="status" aria-live="polite">
-      <button
-        type="button"
-        className="st-toast-close"
-        aria-label="Dismiss"
-        onClick={wn.dismissToast}
-      >
-        ×
-      </button>
-      <div className="st-toast-hd">
-        <span aria-hidden="true">✦</span>
-        What's new{e.version ? ` · v${e.version}` : ''}
-      </div>
-      <div className="st-toast-title">{e.title}</div>
-      <div className="st-toast-txt">{e.summary}</div>
-      <div className="st-toast-actions">
-        <button type="button" className="btn btn--primary btn--sm" onClick={wn.openPanel}>
-          {total > 1 ? `See all (${total})` : 'Details'}
-        </button>
-        <button type="button" className="btn btn--ghost btn--sm" onClick={wn.dismissToast}>
-          Dismiss
-        </button>
-      </div>
-    </div>
-  );
+  const id = `whats-new-${wn.feedVersion}`;
+  useEffect(() => {
+    if (!wn.showToast || !wn.toastEntry) {
+      dismissNotice(id);
+      return;
+    }
+    notify({
+      id,
+      group: 'whats-new',
+      kind: 'info',
+      duration: 10_000,
+      title: `What's new${wn.toastEntry.version ? ` · v${wn.toastEntry.version}` : ''} — ${wn.toastEntry.title}`,
+      description: wn.toastEntry.summary,
+      action: {
+        label: wn.unseen.length > 1 ? `See all (${wn.unseen.length})` : 'Details',
+        onClick: wn.openPanel,
+      },
+      onDismiss: wn.dismissToast,
+    });
+  }, [id, wn.showToast, wn.toastEntry, wn.unseen.length, wn.openPanel, wn.dismissToast]);
+  useEffect(() => () => dismissNotice(id), [id]);
+  return null;
 }
 
 export function WhatsNewPanel({ wn, onStartTour }) {
@@ -229,7 +221,9 @@ export function WhatsNewPanel({ wn, onStartTour }) {
                   <div className="mdcc-wn-item__hd">
                     <span className={'mdcc-wn-kind mdcc-wn-kind--' + e.kind}>{e.kind}</span>
                     <span className="mdcc-wn-item__title">{e.title}</span>
-                    <span className="mdcc-wn-item__ver">{e.version ? `v${e.version}` : 'next'}</span>
+                    <span className="mdcc-wn-item__ver">
+                      {e.version ? `v${e.version}` : 'next'}
+                    </span>
                   </div>
                   <p className="mdcc-wn-item__summary">{e.summary}</p>
                   {isSafeHref(e.learnMore) && (

package/apps/studio/cloud/endpoints.ts

@@ -309,6 +309,75 @@ export function createCloudEndpoints(ctx: Ctx) {
       });
     },
 
+    /**
+     * Open a project as a MANAGED local copy (T21): the same open → cell
+     * exchange → stored credential as `attach`, but nothing is written into
+     * the folder this studio happens to serve — the desktop creates the
+     * project's own copy and switches to it.
+     */
+    async openManaged(projectId: string): Promise<CloudEndpointResult> {
+      const file = readCloudFile();
+      if (!file)
+        return { status: 401, json: { ok: false, error: 'Sign in to Maude Cloud first.' } };
+      if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(String(projectId ?? ''))) {
+        return { status: 400, json: { ok: false, error: 'unknown project' } };
+      }
+      const opened = await cloudFetch('/projects/open', {
+        method: 'POST',
+        headers: { authorization: `Bearer ${file.token}`, 'content-type': 'application/json' },
+        body: JSON.stringify({ project: projectId }),
+      });
+      if (opened.status !== 200 || !opened.body?.token || !opened.body.url) {
+        return {
+          status: 502,
+          json: { ok: false, error: 'The project could not be opened with this account.' },
+        };
+      }
+      return exchangeAtCell({
+        workspaceUrl: opened.body.url,
+        projectToken: opened.body.token,
+        role: opened.body.role,
+        project: projectId,
+      });
+    },
+
+    /** The maude:// handoff lane, as a managed copy (see `attachCode`). */
+    async openManagedCode(code: string, claimedProject?: string): Promise<CloudEndpointResult> {
+      if (typeof code !== 'string' || !/^mhc_[0-9a-f]{16,128}$/.test(code)) {
+        return { status: 400, json: { ok: false, error: 'That link is not valid.' } };
+      }
+      const exchanged = await cloudFetch('/auth/handoff/exchange', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ code }),
+      });
+      if (exchanged.status !== 200 || !exchanged.body?.token || !exchanged.body.url) {
+        return {
+          status: 410,
+          json: {
+            ok: false,
+            error:
+              'That link expired — it works once, for two minutes. Press “Open in Maude” on the project page again.',
+          },
+        };
+      }
+      if (claimedProject && exchanged.body.project && claimedProject !== exchanged.body.project) {
+        return {
+          status: 409,
+          json: {
+            ok: false,
+            error: `That link said ${claimedProject} but it opens ${exchanged.body.project}. Nothing was opened — open the project from its own page instead.`,
+          },
+        };
+      }
+      return exchangeAtCell({
+        workspaceUrl: exchanged.body.url,
+        projectToken: exchanged.body.token,
+        role: exchanged.body.role,
+        project: exchanged.body.project,
+      });
+    },
+
     /**
      * Attach via a one-time handoff code — the maude:// lane (Phase 17). The
      * code came from an untrusted URL, so it is exchanged ONLY against the
@@ -664,6 +733,69 @@ export function createCloudEndpoints(ctx: Ctx) {
     }
   }
 
+  /**
+   * The cell exchange alone: project token → hub session → stored credential.
+   * Writes nothing into any project folder (a managed open creates its own).
+   */
+  async function exchangeAtCell({
+    workspaceUrl,
+    projectToken,
+    role,
+    project,
+  }: {
+    workspaceUrl: string;
+    projectToken: string;
+    role?: string;
+    project?: string;
+  }): Promise<CloudEndpointResult> {
+    const r = await exchangeCredential(workspaceUrl, projectToken);
+    if (!r) {
+      return {
+        status: 502,
+        json: {
+          ok: false,
+          error: 'The workspace did not accept the sign-in. Try again in a minute.',
+        },
+      };
+    }
+    return {
+      status: 200,
+      json: { ok: true, url: r.url, role: r.role ?? role ?? null, project: project ?? null },
+    };
+  }
+
+  async function exchangeCredential(
+    workspaceUrl: string,
+    projectToken: string
+  ): Promise<{ url: string; role?: string } | null> {
+    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 & {
+        expiresAt?: unknown;
+        user?: { role?: unknown };
+      };
+      if (res.ok && body?.token) {
+        hubToken = body.token;
+        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 by the caller */
+    }
+    if (!hubToken) return null;
+    const norm = normalizeUrl(workspaceUrl);
+    saveHubCredential(norm, hubToken, vouchedRole, hubTokenExpiresAt);
+    return { url: norm, role: vouchedRole };
+  }
+
   /** The shared tail of every attach: cell exchange → credential + linkedHub. */
   async function linkToWorkspace({
     workspaceUrl,