@1agh/maude 0.28.1 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/client/app.jsx

@@ -11,6 +11,12 @@ import { createRoot } from 'react-dom/client';
 // import that Bun erases), so this pulls only string constants into the client
 // bundle — no React, no input-router. See the tool-cursor handler below.
 import { resolveToolCursor } from '../canvas-cursors.ts';
+import { canvasUrl } from './canvas-url.js';
+import { TourOverlay } from './tour/overlay.jsx';
+import { USAGE_TOUR } from './tour/usage-tour.js';
+import { useWhatsNew, WhatsNewPanel, WhatsNewToast } from './whats-new.jsx';
+
+const USAGE_TOUR_STORE = 'mdcc-usage-tour-seen';
 
 const SYSTEM_TAB = '__system__';
 const THEME_STORE = 'mdcc-theme';
@@ -63,73 +69,12 @@ function sectionDefaultOpen(g) {
 
 // ---------- Utility ----------
 
-function urlOf(p) {
-  return '/' + p.split('/').map(encodeURIComponent).join('/');
-}
-
 // Iframe src for a canvas path. TSX canvases go through _canvas-shell.html so
 // the bundled React 19 runtime + importmap can mount the default export. HTML
 // canvases keep the legacy "serve the file with inspector + Babel injected"
 // path. Phase 3.6 contract; the path argument is repo-root-relative
-// (e.g. ".design/ui/Foo.tsx").
-function canvasUrl(p, cfg, opts) {
-  if (!p.endsWith('.tsx')) return urlOf(p);
-  const designRel = (cfg?.designRel || '.design').replace(/^\/+|\/+$/g, '');
-  // Path under designRoot.
-  let rel = p;
-  if (rel.startsWith(designRel + '/')) rel = rel.slice(designRel.length + 1);
-  // Pass `rel` to URLSearchParams RAW — it does encoding once. Pre-encoding
-  // with encodeURIComponent then handing to URLSearchParams produced
-  // `Docs%2520Site.tsx` (the `%` of `%20` got re-encoded as `%25`) and broke
-  // every UI canvas with a space in its filename.
-  const params = new URLSearchParams();
-  params.set('canvas', rel);
-  params.set('designRel', designRel);
-  // Gallery thumbnails suppress the shell-owned comment layer (`?comments=0`)
-  // so previews stay non-interactive; opening the same canvas as a real tab
-  // omits the flag and gets comments. See canvas-comment-mount.tsx.
-  if (opts?.thumbnail) params.set('comments', '0');
-  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
-  // first one. In a multi-DS project this is what keeps each design system's
-  // preview distinct (beta previews use beta tokens, not alpha's).
-  const specMatch = rel.match(/^system\/([^/]+)\/preview\//);
-  const specDsEntry = specMatch
-    ? cfg?.designSystems?.find(
-        (d) => d.path === `system/${specMatch[1]}` || d.path.endsWith(`/${specMatch[1]}`)
-      )
-    : null;
-  // Resolve tokens path. For a specimen, prefer the matching DS's tokensCssRel
-  // (fall back to the `system/<ds>/colors_and_type.css` convention). Otherwise
-  // prefer the first designSystem's tokensCssRel — the project's authoritative
-  // tokens file. The top-level cfg.tokensCssRel is the legacy default
-  // (`system/colors_and_type.css`) and usually doesn't exist post-bootstrap.
-  const tokens = specMatch
-    ? specDsEntry?.tokensCssRel || `system/${specMatch[1]}/colors_and_type.css`
-    : ds0?.tokensCssRel || cfg?.tokensCssRel;
-  if (tokens) params.set('tokens', tokens);
-  if (cfg?.componentsCssRel) params.set('components', cfg.componentsCssRel);
-  if (specMatch) {
-    const dsName = specMatch[1];
-    params.set('layout', `system/${dsName}/preview/_layout.css`);
-    if (!cfg?.componentsCssRel) {
-      params.set('components', `system/${dsName}/preview/_components.css`);
-    }
-  } else if (ds0?.path) {
-    // UI canvas — load the project DS's `_components.css` so the dc-canvas /
-    // dc-section / dc-artboard chrome (and any DS classes the canvas reuses)
-    // renders correctly.
-    if (!cfg?.componentsCssRel) {
-      params.set('components', `${ds0.path}/preview/_components.css`);
-    }
-  }
-  // T2 (9.1-A) — load the iframe from the segregated canvas origin when the
-  // server advertises one; fall back to a same-origin relative URL otherwise
-  // (older server, tests). The trailing path + query are identical either way.
-  const origin = cfg?.canvasOrigin || '';
-  return `${origin}/_canvas-shell.html?${params.toString()}`;
-}
+// (e.g. ".design/ui/Foo.tsx"). Pure resolver extracted to ./canvas-url.js so
+// the token-resolution branches are unit-testable without a DOM (DDR-093).
 
 function basename(p) {
   return p.split('/').pop();
@@ -298,6 +243,556 @@ function Icon({ d, size = 14, color }) {
   );
 }
 
+// ───── maude DS icon set (Plan B) ─────
+// Thin-stroke (1.4) 16×16 geometric glyphs lifted from .design/ui/Studio.tsx —
+// the icon vocabulary the ported `.st-*` chrome composes with. Distinct from the
+// legacy 24×24 single-path `Icon` above (kept for not-yet-ported chrome). Grown
+// per slice; this slice (menubar/statusbar) needs sparkle/check/sun/moon plus a
+// few the sidebar + panels reuse later.
+const STICONS = {
+  'chevron-down': <polyline points="3.5 6 8 10.5 12.5 6" />,
+  'chevron-right': <polyline points="6 3.5 10.5 8 6 12.5" />,
+  file: (
+    <>
+      <path d="M4 2h5l3 3v9H4z" />
+      <polyline points="9 2 9 5 12 5" />
+    </>
+  ),
+  folder: <path d="M2 4.5h4l1.3 1.5H14V13H2z" />,
+  search: (
+    <>
+      <circle cx="7" cy="7" r="4" />
+      <line x1="10" y1="10" x2="13.5" y2="13.5" />
+    </>
+  ),
+  plus: (
+    <>
+      <line x1="8" y1="3" x2="8" y2="13" />
+      <line x1="3" y1="8" x2="13" y2="8" />
+    </>
+  ),
+  check: <polyline points="3 8.2 6.4 11.5 13 4.2" />,
+  x: (
+    <>
+      <line x1="4.3" y1="4.3" x2="11.7" y2="11.7" />
+      <line x1="11.7" y1="4.3" x2="4.3" y2="11.7" />
+    </>
+  ),
+  sun: (
+    <>
+      <circle cx="8" cy="8" r="2.6" />
+      <line x1="8" y1="1.5" x2="8" y2="3" />
+      <line x1="8" y1="13" x2="8" y2="14.5" />
+      <line x1="1.5" y1="8" x2="3" y2="8" />
+      <line x1="13" y1="8" x2="14.5" y2="8" />
+      <line x1="3.4" y1="3.4" x2="4.4" y2="4.4" />
+      <line x1="11.6" y1="11.6" x2="12.6" y2="12.6" />
+      <line x1="12.6" y1="3.4" x2="11.6" y2="4.4" />
+      <line x1="4.4" y1="11.6" x2="3.4" y2="12.6" />
+    </>
+  ),
+  moon: <path d="M12.5 9.6A5 5 0 1 1 7 3a4 4 0 0 0 5.5 6.6z" />,
+  sparkle: (
+    <path d="M8 1.8l1.4 4.8L14 8l-4.6 1.4L8 14.2l-1.4-4.8L2 8l4.6-1.4z" fill="currentColor" stroke="none" />
+  ),
+  'panel-left': (
+    <>
+      <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
+      <line x1="6.4" y1="3" x2="6.4" y2="13" />
+    </>
+  ),
+  resolve: (
+    <>
+      <circle cx="8" cy="8" r="5.6" />
+      <polyline points="5.4 8 7.2 9.9 10.6 6" />
+    </>
+  ),
+  reopen: (
+    <>
+      <path d="M3.2 8a5 5 0 1 1 1.4 3.5" />
+      <polyline points="3.2 11.4 3.2 8 6.6 8" />
+    </>
+  ),
+  layers: (
+    <>
+      <polygon points="8 2.2 13.8 5.5 8 8.8 2.2 5.5" />
+      <polyline points="2.2 9 8 12.3 13.8 9" />
+    </>
+  ),
+  sliders: (
+    <>
+      <line x1="3" y1="5" x2="13" y2="5" />
+      <circle cx="6" cy="5" r="1.7" fill="currentColor" />
+      <line x1="3" y1="11" x2="13" y2="11" />
+      <circle cx="10" cy="11" r="1.7" fill="currentColor" />
+    </>
+  ),
+  code: (
+    <>
+      <polyline points="6 5 3 8 6 11" />
+      <polyline points="10 5 13 8 10 11" />
+    </>
+  ),
+  download: (
+    <>
+      <line x1="8" y1="2.5" x2="8" y2="10" />
+      <polyline points="4.5 7 8 10.5 11.5 7" />
+      <polyline points="3 12.8 3 13.6 13 13.6 13 12.8" />
+    </>
+  ),
+  reload: (
+    <>
+      <path d="M3.2 8a5 5 0 1 1 1.4 3.5" />
+      <polyline points="3.2 11.4 3.2 8 6.6 8" />
+    </>
+  ),
+  help: (
+    <>
+      <circle cx="8" cy="8" r="6" />
+      <path d="M6.3 6.2a1.8 1.8 0 1 1 2.3 1.9c-.5.2-.6.5-.6 1v.3" />
+      <line x1="8" y1="11.4" x2="8" y2="11.5" />
+    </>
+  ),
+  // Export-format glyphs (Plan C) — one distinct mark per format card.
+  image: (
+    <>
+      <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
+      <circle cx="6" cy="6.3" r="1.1" />
+      <path d="M3 12l3-2.8 2.2 1.8 2.4-3L13.5 12" />
+    </>
+  ),
+  vector: (
+    <>
+      <path d="M3.6 11.2C6 5 10 5 12.4 11.2" />
+      <rect x="1.7" y="9.8" width="2.6" height="2.6" rx="0.4" />
+      <rect x="11.7" y="9.8" width="2.6" height="2.6" rx="0.4" />
+      <rect x="6.7" y="2.6" width="2.6" height="2.6" rx="0.4" />
+    </>
+  ),
+  presentation: (
+    <>
+      <rect x="2.5" y="3" width="11" height="7.4" rx="1" />
+      <line x1="8" y1="10.4" x2="8" y2="13" />
+      <line x1="5.6" y1="13.4" x2="10.4" y2="13.4" />
+    </>
+  ),
+  archive: (
+    <>
+      <rect x="2.5" y="3" width="11" height="3" rx="0.8" />
+      <path d="M3.6 6v6.2a1 1 0 0 0 1 1h6.8a1 1 0 0 0 1-1V6" />
+      <line x1="6.6" y1="8.8" x2="9.4" y2="8.8" />
+    </>
+  ),
+  external: (
+    <>
+      <path d="M11 8.5V12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3.5" />
+      <polyline points="9.5 3 13 3 13 6.5" />
+      <line x1="13" y1="3" x2="7.6" y2="8.4" />
+    </>
+  ),
+};
+
+// ⌘K command palette — the mockup's signature surface, wired to real shell
+// actions (theme, system view, comments, reload, help, what's new, new board).
+// Scoped to shell-doable actions only — in-canvas export lives in the iframe.
+function CommandPalette({ open, onClose, actions }) {
+  const [q, setQ] = useState('');
+  const [active, setActive] = useState(0);
+  useEffect(() => {
+    if (open) {
+      setQ('');
+      setActive(0);
+    }
+  }, [open]);
+  const filtered = useMemo(() => {
+    const needle = q.trim().toLowerCase();
+    if (!needle) return actions;
+    return actions.filter(
+      (a) =>
+        a.label.toLowerCase().includes(needle) ||
+        (a.group && a.group.toLowerCase().includes(needle))
+    );
+  }, [q, actions]);
+  useEffect(() => {
+    if (active >= filtered.length) setActive(0);
+  }, [filtered.length, active]);
+  if (!open) return null;
+  const run = (a) => {
+    onClose();
+    a.run();
+  };
+  return (
+    <div
+      className="st-scrim"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="st-palette" role="dialog" aria-modal="true" aria-label="Command palette">
+        <div className="st-pal-search">
+          <StIcon name="search" size={18} />
+          <input
+            // biome-ignore lint/a11y/noAutofocus: command palette opens on an explicit ⌘K.
+            autoFocus
+            placeholder="Type a command or search…"
+            value={q}
+            aria-label="Command search"
+            onChange={(e) => setQ(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                e.preventDefault();
+                onClose();
+              } else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setActive((i) => Math.min(filtered.length - 1, i + 1));
+              } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setActive((i) => Math.max(0, i - 1));
+              } else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (filtered[active]) run(filtered[active]);
+              }
+            }}
+          />
+          <Kbd>⌘K</Kbd>
+        </div>
+        <div className="st-pal-list">
+          {filtered.length === 0 ? (
+            <div className="st-pal-empty">No matching command.</div>
+          ) : (
+            filtered.map((a, i) => {
+              // Emit a group header when the group changes (flat list → grouped
+              // display; keyboard nav still indexes across the whole array).
+              const header =
+                a.group && (i === 0 || filtered[i - 1].group !== a.group) ? (
+                  <div className="st-pal-group" key={'g-' + a.group}>
+                    {a.group}
+                  </div>
+                ) : null;
+              return (
+                <Fragment key={a.id}>
+                  {header}
+                  <button
+                    type="button"
+                    className={'st-pal-item' + (i === active ? ' is-active' : '')}
+                    onMouseEnter={() => setActive(i)}
+                    onClick={() => run(a)}
+                  >
+                    <span className="st-pal-icon">
+                      <StIcon name={a.icon} size={15} />
+                    </span>
+                    <span className="st-pal-label">{a.label}</span>
+                    {a.kbd ? (
+                      <span className="st-pal-kbd">
+                        <Kbd>{a.kbd}</Kbd>
+                      </span>
+                    ) : null}
+                  </button>
+                </Fragment>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StIcon({ name, size = 16, className }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={{ flex: 'none' }}
+    >
+      {STICONS[name]}
+    </svg>
+  );
+}
+
+// P3 (Plan C) — menubar presence avatar (matches `.design/ui/Studio.tsx` Avatar).
+// Up to two uppercase glyphs from a name; falls back to "?" for empties.
+function initialsOf(name) {
+  if (!name || typeof name !== 'string') return '?';
+  const parts = name.trim().split(/[\s._-]+/).filter(Boolean);
+  if (!parts.length) return '?';
+  // Single-token names (e.g. a git username "1aGh") → first two chars, so the
+  // avatar reads as initials rather than a lone count badge.
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return ((parts[0][0] || '') + (parts[parts.length - 1][0] || '')).toUpperCase() || '?';
+}
+function StAvatar({ initials, hue, title }) {
+  return (
+    <span className="st-avatar" style={{ background: hue }} title={title} aria-label={title}>
+      {initials}
+    </span>
+  );
+}
+
+function Kbd({ children }) {
+  return <span className="kbd">{children}</span>;
+}
+
+// T5 (Plan C) — shell-level Export & Handoff dialog (maude `.st-dialog`), per
+// `.design/ui/Studio.tsx` HandoffBoard. Wired to the privileged main-origin
+// `POST /_api/export` (7 real formats × scopes). The shadcn card is HANDOFF —
+// a privileged disk-write kept off HTTP routes (DDR-054), so it surfaces the
+// `/design:handoff` command instead. PPTX/Canva kept reachable (no silent cap).
+const EXPORT_CARDS = [
+  { id: 'png', label: 'PNG', sub: 'raster · 2×', icon: 'image', format: 'png', options: { scale: 2 } },
+  { id: 'pdf', label: 'PDF', sub: 'vector · print', icon: 'file', format: 'pdf' },
+  { id: 'svg', label: 'SVG', sub: 'per artboard', icon: 'vector', format: 'svg' },
+  { id: 'html', label: 'HTML', sub: 'self-contained', icon: 'code', format: 'html' },
+  { id: 'pptx', label: 'PPTX', sub: 'slides', icon: 'presentation', format: 'pptx' },
+  { id: 'canva', label: 'Canva', sub: 'handoff bundle', icon: 'external', format: 'canva' },
+  { id: 'zip', label: 'ZIP', sub: 'project bundle', icon: 'archive', format: 'zip' },
+  { id: 'shadcn', label: 'AI handoff', sub: 'production drop', icon: 'sparkle', handoff: true },
+];
+
+// Mirrors export-dialog.tsx (the in-canvas dialog) so both entry points offer
+// the same settings. Scope validity + PNG scale presets are ported verbatim.
+const EXPORT_SCOPE_LABELS = {
+  selection: 'Current selection',
+  artboard: 'Active artboard',
+  'canvas-as-separate': 'Canvas · artboards separate',
+  'project-raw': 'Whole project (raw)',
+};
+const EXPORT_VALID_SCOPES = {
+  png: ['selection', 'artboard', 'canvas-as-separate'],
+  pdf: ['selection', 'artboard', 'canvas-as-separate'],
+  svg: ['selection', 'artboard', 'canvas-as-separate'],
+  html: ['artboard', 'canvas-as-separate'],
+  pptx: ['canvas-as-separate'],
+  canva: ['canvas-as-separate'],
+  zip: ['project-raw'],
+};
+const PNG_SCALES = [
+  { value: 1, label: '1× (native)' },
+  { value: 2, label: '2× (retina)' },
+  { value: 3, label: '3× (max)' },
+];
+
+function ExportDialog({ mode, initialScope, activePath, onClose }) {
+  const [sel, setSel] = useState(mode === 'handoff' ? 'shadcn' : 'png');
+  const [scope, setScope] = useState(
+    initialScope && EXPORT_SCOPE_LABELS[initialScope] ? initialScope : 'artboard'
+  );
+  const [scale, setScale] = useState(2);
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState(null); // { ok, msg }
+  const [recent, setRecent] = useState([]);
+  const card = EXPORT_CARDS.find((c) => c.id === sel) || EXPORT_CARDS[0];
+  const validScopes = card.handoff ? [] : EXPORT_VALID_SCOPES[card.format] || ['artboard'];
+
+  // Keep the scope valid for the chosen format (pptx/zip etc. only allow a
+  // subset) — mirrors VALID_SCOPES_PER_FORMAT in the in-canvas dialog.
+  useEffect(() => {
+    if (validScopes.length && !validScopes.includes(scope)) setScope(validScopes[0]);
+  }, [validScopes, scope]);
+
+  const loadRecent = useCallback(() => {
+    fetch('/_api/export-history')
+      .then((r) => r.json())
+      .then((d) => setRecent(Array.isArray(d?.history) ? d.history.slice(0, 6) : []))
+      .catch(() => {});
+  }, []);
+  useEffect(() => {
+    loadRecent();
+  }, [loadRecent]);
+
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  async function doExport() {
+    if (card.handoff) {
+      const p = activePath && activePath !== SYSTEM_TAB ? activePath : '<canvas>.tsx';
+      const cmd = `/design:handoff ${p}`;
+      try {
+        await navigator.clipboard?.writeText(cmd);
+      } catch {}
+      setStatus({ ok: true, msg: `Copied: ${cmd} — run it in Claude Code.` });
+      return;
+    }
+    setBusy(true);
+    setStatus(null);
+    const options = card.format === 'png' ? { scale } : {};
+    try {
+      const r = await fetch('/_api/export', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ format: card.format, scope, options }),
+      });
+      if (!r.ok) {
+        setStatus({ ok: false, msg: (await r.text()) || `Export failed (${r.status})` });
+        setBusy(false);
+        return;
+      }
+      const disp = r.headers.get('Content-Disposition') || '';
+      const fn = /filename="([^"]+)"/.exec(disp);
+      const filename = (fn && fn[1]) || `export.${card.format}`;
+      const blob = await r.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+      setStatus({ ok: true, msg: `Exported ${filename}` });
+      loadRecent();
+    } catch (err) {
+      setStatus({ ok: false, msg: err && err.message ? err.message : String(err) });
+    }
+    setBusy(false);
+  }
+
+  return (
+    <div
+      className="st-scrim"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="st-dialog" role="dialog" aria-modal="true" aria-label="Export and handoff">
+        <div className="st-dialog-hd">
+          <span className="st-dialog-title">Export &amp; handoff</span>
+          <button type="button" className="st-iconbtn" aria-label="Close" onClick={onClose}>
+            <StIcon name="x" size={15} />
+          </button>
+        </div>
+        <div className="st-dialog-bd">
+          <div className="st-rp-hd">
+            {activePath && activePath !== SYSTEM_TAB
+              ? `Format · ${displayName(basename(activePath))}`
+              : 'Format'}
+          </div>
+          <div className="st-fmt-grid">
+            {EXPORT_CARDS.map((c) => (
+              <button
+                type="button"
+                key={c.id}
+                className={'st-fmt' + (c.id === sel ? ' is-on' : '')}
+                onClick={() => {
+                  setSel(c.id);
+                  setStatus(null);
+                }}
+              >
+                <StIcon name={c.icon} size={16} />
+                <span className="st-fmt-name">{c.label}</span>
+                <span className="st-fmt-sub">{c.sub}</span>
+              </button>
+            ))}
+          </div>
+          {!card.handoff && (
+            <div className="st-dialog-row">
+              <label className="st-dialog-lbl" htmlFor="st-export-scope">
+                Scope
+              </label>
+              <select
+                id="st-export-scope"
+                className="st-select"
+                value={scope}
+                onChange={(e) => setScope(e.target.value)}
+              >
+                {validScopes.map((s) => (
+                  <option key={s} value={s}>
+                    {EXPORT_SCOPE_LABELS[s]}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          {!card.handoff && card.format === 'png' && (
+            <div className="st-dialog-row">
+              <label className="st-dialog-lbl" htmlFor="st-export-size">
+                Size
+              </label>
+              <select
+                id="st-export-size"
+                className="st-select"
+                value={scale}
+                onChange={(e) => setScale(Number(e.target.value))}
+              >
+                {PNG_SCALES.map((s) => (
+                  <option key={s.value} value={s.value}>
+                    {s.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          {!card.handoff && card.format === 'png' && (
+            <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+              Resolution multiplier — {scale}× ≈ {1440 * scale}×{900 * scale} for a 1440×900 artboard.
+            </div>
+          )}
+          {card.handoff && (
+            <div className="callout callout--info" style={{ fontSize: 12 }}>
+              Hands the active canvas off to production. Copies{' '}
+              <span className="st-mono">/design:handoff &lt;path&gt;</span> — run it in Claude Code to
+              emit a ready-to-drop production component next to the canvas.
+            </div>
+          )}
+          {status && (
+            <div
+              className={'callout ' + (status.ok ? 'callout--success' : 'callout--error')}
+              style={{ fontSize: 12 }}
+            >
+              {status.msg}
+            </div>
+          )}
+          {recent.length > 0 && (
+            <div className="st-export-recent">
+              <div className="st-rp-hd">Recent</div>
+              {recent.map((h, i) => (
+                <div className="st-export-recent-row" key={i}>
+                  <span>
+                    {String(h.format || '').toUpperCase()} ·{' '}
+                    {EXPORT_SCOPE_LABELS[h.scope] || h.scope}
+                  </span>
+                  <span className="st-mono">{h.filename}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="st-dialog-ft">
+          <button type="button" className="btn btn--ghost" onClick={onClose}>
+            Cancel
+          </button>
+          <button type="button" className="btn btn--primary" disabled={busy} onClick={doExport}>
+            <StIcon name="download" size={14} />
+            {card.handoff
+              ? 'Copy handoff command'
+              : busy
+                ? 'Exporting…'
+                : `Export ${card.label}`}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ───── Tree (CV-08 spec) ─────
 // File rows use `.tp-row` with optional .dir / .sel / .star / .modified
 // modifiers + a leading `.glyph` (▾ open dir, ▸ closed dir / selected file,
@@ -317,14 +812,14 @@ function DirRow({ name, depth, defaultOpen, children }) {
         role="treeitem"
         aria-expanded={open}
         tabIndex={-1}
-        className="tp-row dir"
+        className="st-row"
         style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
         onClick={() => setOpen((v) => !v)}
       >
-        <span className="glyph" aria-hidden="true">
-          {open ? '▾' : '▸'}
+        <span className="st-row-glyph">
+          <StIcon name={open ? 'chevron-down' : 'chevron-right'} size={13} />
         </span>
-        <span className="name">{name}</span>
+        <span className="st-row-name">{name}</span>
       </button>
       {open && children}
     </Fragment>
@@ -340,30 +835,31 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
   return (
     <Fragment>
       <div
-        className={'tp-row ds-folder' + (active ? ' sel' : '')}
+        className={'st-row st-ds-folder' + (active ? ' is-sel' : '')}
         style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
         role="treeitem"
         aria-expanded={open}
       >
         <button
           type="button"
-          className="ds-folder-chev"
+          className="st-ds-chev"
           onClick={() => setOpen((v) => !v)}
           aria-label={open ? 'Collapse design system' : 'Expand design system'}
           title={open ? 'Collapse' : 'Expand'}
         >
-          <span className="glyph" aria-hidden="true">
-            {open ? '▾' : '▸'}
-          </span>
+          <StIcon name={open ? 'chevron-down' : 'chevron-right'} size={13} />
         </button>
         <button
           type="button"
-          className="ds-folder-open"
+          className="st-ds-open"
           onClick={() => onOpenSystem(dsName)}
           aria-label={`Open ${dsName} design system view`}
           title="Open the design system view"
         >
-          <span className="name">{name}</span>
+          <span className="st-row-glyph">
+            <StIcon name="folder" size={13} />
+          </span>
+          <span className="st-row-name">{name}</span>
         </button>
       </div>
       {open && children}
@@ -371,7 +867,7 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
   );
 }
 
-function FileRow({ file, activePath, onOpen, openCount: oc, depth, kind, sidecar }) {
+function FileRow({ file, activePath, onOpen, onDelete, openCount: oc, depth, kind, sidecar }) {
   const isSel = file.path === activePath;
   const isCanvas = CANVAS_EXT_RE.test(file.name);
   // Non-canvas rows (PROJECT *.md, RUNTIME _active.json, ...) are display-only —
@@ -379,7 +875,10 @@ function FileRow({ file, activePath, onOpen, openCount: oc, depth, kind, sidecar
   // hint via `aria-disabled`.
   const inert = !isCanvas;
   const label = isCanvas ? displayName(file.name) : file.name;
-  return (
+  // Delete only real canvases in a deletable group (onDelete is undefined for the
+  // DS group + runtime files); the server enforces the rest.
+  const canDelete = isCanvas && typeof onDelete === 'function' && kind !== 'runtime';
+  const row = (
     <button
       type="button"
       role="treeitem"
@@ -387,10 +886,7 @@ function FileRow({ file, activePath, onOpen, openCount: oc, depth, kind, sidecar
       aria-disabled={inert ? 'true' : undefined}
       tabIndex={isSel ? 0 : -1}
       className={
-        'tp-row' +
-        (isSel ? ' sel' : '') +
-        (kind === 'runtime' ? ' muted' : '') +
-        (sidecar ? ' sidecar' : '')
+        'st-row' + (isSel ? ' is-sel' : '') + (kind === 'runtime' ? ' is-muted' : '')
       }
       style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
       title={file.path + (oc ? ` — ${oc} open` : inert ? ' (file index only)' : '')}
@@ -398,13 +894,33 @@ function FileRow({ file, activePath, onOpen, openCount: oc, depth, kind, sidecar
         if (!inert) onOpen(file.path);
       }}
     >
-      <span className="glyph" aria-hidden="true">
-        {isSel ? '▸' : '·'}
+      <span className="st-row-glyph">
+        <StIcon name="file" size={13} />
       </span>
-      <span className="name">{label}</span>
-      {oc > 0 && <span className="badge">{oc}</span>}
+      <span className="st-row-name">{label}</span>
+      {oc > 0 && <span className="st-row-badge">{oc}</span>}
     </button>
   );
+  if (!canDelete) return row;
+  // A sibling delete button (can't nest a button in the row button). The wrapper
+  // is presentational so the treeitem stays the tree's child for a11y.
+  return (
+    <div className="st-row-wrap" role="none">
+      {row}
+      <button
+        type="button"
+        className="st-row-del"
+        title={`Delete ${label}`}
+        aria-label={`Delete canvas ${label}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete(file.path, label);
+        }}
+      >
+        <Icon d="M3 6h18 M8 6V4h8v2 M6 6l1 14h10l1-14 M10 11v6 M14 11v6" size={12} />
+      </button>
+    </div>
+  );
 }
 
 function CanvasRow({
@@ -414,6 +930,7 @@ function CanvasRow({
   kind,
   activePath,
   onOpen,
+  onDelete,
   openCount: oc,
   showHidden,
   forceOpen,
@@ -432,6 +949,7 @@ function CanvasRow({
         file={primary}
         activePath={activePath}
         onOpen={onOpen}
+        onDelete={onDelete}
         openCount={oc}
         depth={depth}
         kind={kind}
@@ -446,12 +964,12 @@ function CanvasRow({
         aria-selected={isSel}
         aria-expanded={open}
         tabIndex={isSel ? 0 : -1}
-        className={'tp-row canvas-row' + (isSel ? ' sel' : '')}
+        className={'st-row st-canvas-row' + (isSel ? ' is-sel' : '')}
         style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
         title={primary.path}
         onClick={(e) => {
           // Click the chevron region → toggle disclosure. Click anywhere else → open canvas.
-          if (e.target.closest('.canvas-chev')) {
+          if (e.target.closest('.st-canvas-chev')) {
             setOpenState((v) => !v);
             return;
           }
@@ -459,17 +977,16 @@ function CanvasRow({
         }}
       >
         <span
-          className="glyph canvas-chev"
-          aria-hidden="true"
+          className="st-row-glyph st-canvas-chev"
           onClick={(e) => {
             e.stopPropagation();
             setOpenState((v) => !v);
           }}
         >
-          {open ? '▾' : '▸'}
+          <StIcon name={open ? 'chevron-down' : 'chevron-right'} size={13} />
         </span>
-        <span className="name">{displayName(primary.name)}</span>
-        {oc > 0 && <span className="badge">{oc}</span>}
+        <span className="st-row-name">{displayName(primary.name)}</span>
+        {oc > 0 && <span className="st-row-badge">{oc}</span>}
       </button>
       {open &&
         sidecars.map((sc) => (
@@ -500,6 +1017,7 @@ function Tree({
   dsFolders,
   activeDsName,
   onOpenSystem,
+  onDelete,
 }) {
   const dirs = Object.keys(node)
     .filter((k) => k !== '_files')
@@ -535,6 +1053,7 @@ function Tree({
             sidecars={entry.sidecars}
             activePath={activePath}
             onOpen={onOpen}
+            onDelete={onDelete}
             openCount={openCount(commentsByFile[entry.primary.path])}
             depth={depth}
             kind={kind}
@@ -555,6 +1074,7 @@ function Tree({
             kind={kind}
           />
         ))}
+      {/* orphans are sidecars/loose files — no canvas to delete, so no onDelete */}
       {dirs.map((d) => {
         const dsMatch = dsFolderByName?.get(d);
         const childTree = (
@@ -569,6 +1089,7 @@ function Tree({
             search={search}
             activeDsName={activeDsName}
             onOpenSystem={onOpenSystem}
+            onDelete={onDelete}
           />
         );
         if (dsMatch && onOpenSystem) {
@@ -630,12 +1151,39 @@ function Sidebar({
   showHidden,
   sectionsExpanded,
   onToggleSection,
+  onNewBoard,
+  onDeleteBoard,
+  collapsed,
+  onCollapse,
 }) {
   const filteredGroups = useMemo(() => {
     if (!search) return groups;
     return groups.map((g) => ({ ...g, tree: filterTree(g.tree, search), filtered: !!search }));
   }, [groups, search]);
 
+  // Phase 22 — inline "new brief board" composer in the tree header. Click +,
+  // type a name, Enter to create (Esc cancels). The board opens active so it's
+  // ready to annotate; generation (ingest) still goes through /design:new.
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newErr, setNewErr] = useState('');
+  const [newBusy, setNewBusy] = useState(false);
+
+  const submitNewBoard = useCallback(async () => {
+    const name = newName.trim();
+    if (!name || newBusy) return;
+    setNewBusy(true);
+    setNewErr('');
+    const res = await onNewBoard(name);
+    setNewBusy(false);
+    if (res?.ok) {
+      setCreating(false);
+      setNewName('');
+    } else {
+      setNewErr(res?.error || 'could not create board');
+    }
+  }, [newName, newBusy, onNewBoard]);
+
   // Mock uses `42 / 42` — total openable canvases, not every listed file.
   // We count canvas files (TSX Phase 3.6+ default, HTML legacy) so the counter
   // matches "canvases you can mount".
@@ -652,41 +1200,109 @@ function Sidebar({
   }, [filteredGroups]);
 
   return (
-    <nav className="sidebar">
-      <div className="tree-panel-hd">
-        <span>FILES</span>
-        <span className="ct" title={wsConnected ? 'live · file index synced' : 'reconnecting…'}>
-          <span className={'live-dot' + (wsConnected ? ' connected' : '')} aria-hidden="true" />
-          {htmlShown} / {htmlCount}
-        </span>
+    <nav className={'st-sidebar' + (collapsed ? ' is-collapsed' : '')} aria-label="Files">
+      <div className="st-sb-hd">
+        <span className="st-sb-title">Files</span>
+        <div className="st-sb-hd-actions">
+          <button
+            type="button"
+            className="st-iconbtn"
+            title="New blank brief board"
+            aria-label="New blank brief board"
+            aria-expanded={creating}
+            onClick={() => {
+              setNewErr('');
+              setCreating((v) => !v);
+            }}
+          >
+            <StIcon name="plus" size={15} />
+          </button>
+          <span className="st-live" title={wsConnected ? 'live · file index synced' : 'reconnecting…'}>
+            <span className={'st-live-dot' + (wsConnected ? ' is-connected' : '')} aria-hidden="true" />
+            {htmlShown} / {htmlCount}
+          </span>
+          {onCollapse && (
+            <button
+              type="button"
+              className="st-iconbtn"
+              aria-label="Collapse sidebar"
+              title="Collapse sidebar (T)"
+              onClick={onCollapse}
+            >
+              <StIcon name="panel-left" size={15} />
+            </button>
+          )}
+        </div>
       </div>
 
-      <div className="tree-panel-search">
-        <Icon d="M21 21l-4.35-4.35 M11 19a8 8 0 100-16 8 8 0 000 16z" size={12} />
-        <input
-          type="search"
-          placeholder="filter (⌘F)"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          aria-label="Filter files"
-        />
-        {search ? (
+      {creating ? (
+        <div className="st-newboard">
+          <input
+            type="text"
+            // biome-ignore lint/a11y/noAutofocus: deliberate — the composer opens on an explicit click.
+            autoFocus
+            placeholder="brief board name…"
+            value={newName}
+            maxLength={60}
+            disabled={newBusy}
+            aria-label="New brief board name"
+            onChange={(e) => setNewName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                submitNewBoard();
+              } else if (e.key === 'Escape') {
+                e.preventDefault();
+                setCreating(false);
+                setNewName('');
+                setNewErr('');
+              }
+            }}
+          />
           <button
-            className="search-clear"
-            onClick={() => setSearch('')}
-            title="Clear (Esc)"
-            aria-label="Clear search"
+            type="button"
+            className="st-newboard-go"
+            disabled={newBusy || !newName.trim()}
+            title="Create (Enter)"
+            aria-label="Create brief board"
+            onClick={submitNewBoard}
           >
-            ×
+            {newBusy ? '…' : '↵'}
           </button>
-        ) : (
-          <span className="search-kbd" aria-hidden="true">
-            /
-          </span>
-        )}
+        </div>
+      ) : null}
+      {newErr ? (
+        <div className="st-newboard-err" role="alert">
+          {newErr}
+        </div>
+      ) : null}
+
+      <div className="st-search">
+        <div className="st-search-box">
+          <StIcon name="search" size={13} />
+          <input
+            type="search"
+            placeholder="Search canvases…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            aria-label="Filter files"
+          />
+          {search ? (
+            <button
+              className="st-search-clear"
+              onClick={() => setSearch('')}
+              title="Clear (Esc)"
+              aria-label="Clear search"
+            >
+              ×
+            </button>
+          ) : (
+            <Kbd>/</Kbd>
+          )}
+        </div>
       </div>
 
-      <div className="tree-panel-body" role="tree" aria-label="Project file tree">
+      <div className="st-tree" role="tree" aria-label="Project file tree">
         {filteredGroups.map((g) => {
           // Hide gitignored runtime / orphan-only project sections by default.
           // Active search overrides — if the user typed a query, they want hits
@@ -711,21 +1327,18 @@ function Sidebar({
           const explicit = sectionsExpanded[g.label];
           // Active search forces every section open so hits aren't hidden.
           const sectionOpen = !!search || (explicit === undefined ? defaultOpen : explicit);
-          const chev = sectionOpen ? '▾' : '▸';
           return (
-            <Fragment key={g.label}>
+            <div className="st-tree-section" key={g.label}>
               <button
                 type="button"
-                className="tp-section-hd clickable section-toggle"
+                className="st-tree-sec-hd"
                 onClick={() => onToggleSection(g.label, defaultOpen)}
                 aria-expanded={sectionOpen}
                 title={sectionOpen ? 'Collapse section' : 'Expand section'}
               >
-                <span className="chev" aria-hidden="true">
-                  {chev}
-                </span>
-                <span className="section-label">{meta.title}</span>
-                {pill && <span className="pill">{pill}</span>}
+                <StIcon name={sectionOpen ? 'chevron-down' : 'chevron-right'} size={13} />
+                <span className="st-sec-name">{meta.title}</span>
+                {pill && <span className="st-pill">{pill}</span>}
               </button>
               {sectionOpen &&
                 (hasItems ? (
@@ -741,11 +1354,12 @@ function Sidebar({
                     dsFolders={g.dsFolders}
                     activeDsName={activeDsName}
                     onOpenSystem={isDs ? onOpenSystem : undefined}
+                    onDelete={isDs ? undefined : onDeleteBoard}
                   />
                 ) : (
-                  <div className="tp-empty">{search ? 'No matches.' : 'Empty.'}</div>
+                  <div className="st-tree-empty">{search ? 'No matches.' : 'Empty.'}</div>
                 ))}
-            </Fragment>
+            </div>
           );
         })}
       </div>
@@ -753,9 +1367,29 @@ function Sidebar({
   );
 }
 
+// Collapsed rail — a thin strip shown when the sidebar is collapsed, with a
+// re-open affordance + quick search/files shortcuts (mockup CollapsedRail).
+function CollapsedRail({ shown, onExpand, onSearch }) {
+  return (
+    <div className={'st-rail' + (shown ? ' is-shown' : '')}>
+      <div className="st-rail-inner">
+        <button type="button" className="st-iconbtn" aria-label="Expand sidebar" title="Expand sidebar (T)" onClick={onExpand}>
+          <StIcon name="panel-left" size={15} />
+        </button>
+        <button type="button" className="st-iconbtn" aria-label="Search" title="Search (/)" onClick={onSearch}>
+          <StIcon name="search" size={15} />
+        </button>
+        <button type="button" className="st-iconbtn" aria-label="Files" title="Files" onClick={onExpand}>
+          <StIcon name="folder" size={15} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
 // Help modal — hosts the cheatsheet that used to live in the left sidebar.
 // Triggered from the menubar's Help item. Esc + backdrop click close it.
-function HelpModal({ open, onClose }) {
+function HelpModal({ open, onClose, onStartTour }) {
   useEffect(() => {
     if (!open) return;
     function onKey(e) {
@@ -784,6 +1418,16 @@ function HelpModal({ open, onClose }) {
             Help · shortcuts &amp; commands
           </span>
           <span className="sku">MDCC-DEV-SRV / v{MDCC_VERSION}</span>
+          {onStartTour && (
+            <button
+              type="button"
+              className="mdcc-tour__back"
+              style={{ marginLeft: 'auto' }}
+              onClick={onStartTour}
+            >
+              ▶ Take the tour
+            </button>
+          )}
           <button
             type="button"
             className="help-modal-close"
@@ -1067,13 +1711,14 @@ function HelpModal({ open, onClose }) {
 
 const MENU_NAMES = ['File', 'Edit', 'View', 'Selection', 'Tools', 'Help'];
 
-function ViewDropdown({ panels, onToggle, onClose }) {
+// Shared close-on-Esc / outside-click effect for the menubar dropdowns.
+function useDropdownClose(onClose) {
   useEffect(() => {
     function onKey(e) {
       if (e.key === 'Escape') onClose();
     }
     function onDocClick(e) {
-      if (!e.target.closest('.mb-dropdown, .mb-menu')) onClose();
+      if (!e.target.closest('.st-dropdown, .st-menu')) onClose();
     }
     window.addEventListener('keydown', onKey);
     window.addEventListener('mousedown', onDocClick);
@@ -1082,16 +1727,19 @@ function ViewDropdown({ panels, onToggle, onClose }) {
       window.removeEventListener('mousedown', onDocClick);
     };
   }, [onClose]);
+}
 
+function ViewDropdown({ panels, onToggle, onClose }) {
+  useDropdownClose(onClose);
   return (
-    <div className="mb-dropdown" role="menu" aria-label="View" style={{ left: '146px' }}>
-      <div className="mb-dd-hd">Panels</div>
+    <div className="st-dropdown" role="menu" aria-label="View" style={{ left: 152 }}>
+      <div className="st-dd-hd">Panels</div>
       {panels.map((p) => (
         <button
           key={p.id}
           type="button"
           role="menuitem"
-          className={'mb-dd-item' + (p.checked ? ' active' : '')}
+          className={'st-dd-item' + (p.checked ? ' is-on' : '')}
           aria-disabled={p.disabled ? 'true' : undefined}
           onClick={() => {
             if (!p.disabled) {
@@ -1100,37 +1748,27 @@ function ViewDropdown({ panels, onToggle, onClose }) {
             }
           }}
         >
-          <span className="lbl">
-            <span className="check">{p.checked ? '✓' : ''}</span>
+          <span className="st-dd-lead">
+            <span className="st-dd-check">{p.checked ? <StIcon name="check" size={13} /> : null}</span>
             <span>{p.label}</span>
           </span>
-          {p.phase ? (
-            <span className="phase-tag">{p.phase}</span>
-          ) : (
-            <span className="shortcut">{p.shortcut || ''}</span>
-          )}
+          {p.phase ? <span className="st-dd-phase">{p.phase}</span> : <Kbd>{p.shortcut || ''}</Kbd>}
         </button>
       ))}
-      <div className="mb-dd-sep" />
-      <div className="mb-dd-hd">Zoom</div>
+      <div className="st-dd-sep" />
+      <div className="st-dd-hd">Zoom</div>
       {[
         { label: 'Zoom In', shortcut: '⌘ +' },
         { label: 'Zoom Out', shortcut: '⌘ −' },
         { label: 'Fit to Screen', shortcut: '⌘ 0' },
         { label: 'Actual Size · 100 %', shortcut: '⌥ ⌘ 0' },
       ].map((z) => (
-        <button
-          key={z.label}
-          type="button"
-          role="menuitem"
-          className="mb-dd-item"
-          aria-disabled="true"
-        >
-          <span className="lbl">
-            <span className="check" />
+        <button key={z.label} type="button" role="menuitem" className="st-dd-item" aria-disabled="true">
+          <span className="st-dd-lead">
+            <span className="st-dd-check" />
             <span>{z.label}</span>
           </span>
-          <span className="phase-tag">Phase 4</span>
+          <span className="st-dd-phase">Phase 4</span>
         </button>
       ))}
     </div>
@@ -1141,42 +1779,29 @@ function ViewDropdown({ panels, onToggle, onClose }) {
 // Phase 5.1 — Selection + Tools dropdowns (mirror ViewDropdown shape).
 
 function SelectionDropdown({ onAction, onClose }) {
-  useEffect(() => {
-    function onKey(e) {
-      if (e.key === 'Escape') onClose();
-    }
-    function onDocClick(e) {
-      if (!e.target.closest('.mb-dropdown, .mb-menu')) onClose();
-    }
-    window.addEventListener('keydown', onKey);
-    window.addEventListener('mousedown', onDocClick);
-    return () => {
-      window.removeEventListener('keydown', onKey);
-      window.removeEventListener('mousedown', onDocClick);
-    };
-  }, [onClose]);
+  useDropdownClose(onClose);
   const items = [
     { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
     { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⌘ ⇧ A' },
   ];
   return (
-    <div className="mb-dropdown" role="menu" aria-label="Selection" style={{ left: '195px' }}>
+    <div className="st-dropdown" role="menu" aria-label="Selection" style={{ left: 214 }}>
       {items.map((it) => (
         <button
           key={it.id}
           type="button"
           role="menuitem"
-          className="mb-dd-item"
+          className="st-dd-item"
           onClick={() => {
             onAction(it.id);
             onClose();
           }}
         >
-          <span className="lbl">
-            <span className="check" />
+          <span className="st-dd-lead">
+            <span className="st-dd-check" />
             <span>{it.label}</span>
           </span>
-          <span className="shortcut">{it.shortcut}</span>
+          <Kbd>{it.shortcut}</Kbd>
         </button>
       ))}
     </div>
@@ -1184,21 +1809,8 @@ function SelectionDropdown({ onAction, onClose }) {
 }
 
 function ToolsDropdown({ onAction, onClose }) {
-  useEffect(() => {
-    function onKey(e) {
-      if (e.key === 'Escape') onClose();
-    }
-    function onDocClick(e) {
-      if (!e.target.closest('.mb-dropdown, .mb-menu')) onClose();
-    }
-    window.addEventListener('keydown', onKey);
-    window.addEventListener('mousedown', onDocClick);
-    return () => {
-      window.removeEventListener('keydown', onKey);
-      window.removeEventListener('mousedown', onDocClick);
-    };
-  }, [onClose]);
-  // Mirrors DEFAULT_TOOLS in plugins/design/dev-server/use-tool-mode.tsx —
+  useDropdownClose(onClose);
+  // Mirrors DEFAULT_TOOLS in apps/studio/use-tool-mode.tsx —
   // kept in sync by hand because the menubar lives in the dev-server shell
   // (no shared bundle with the canvas iframes).
   const tools = [
@@ -1214,25 +1826,102 @@ function ToolsDropdown({ onAction, onClose }) {
     { id: 'eraser', label: 'Eraser', shortcut: 'E' },
   ];
   return (
-    <div className="mb-dropdown" role="menu" aria-label="Tools" style={{ left: '253px' }}>
-      {tools.map((t) => (
-        <button
-          key={t.id}
-          type="button"
-          role="menuitem"
-          className="mb-dd-item"
-          onClick={() => {
-            onAction(t.id);
-            onClose();
-          }}
-        >
-          <span className="lbl">
-            <span className="check" />
-            <span>{t.label}</span>
-          </span>
-          <span className="shortcut">{t.shortcut}</span>
-        </button>
-      ))}
+    <div className="st-dropdown" role="menu" aria-label="Tools" style={{ left: 290 }}>
+      <div className="st-dd-hd">Tool palette</div>
+      {tools.map((t) => (
+        <button
+          key={t.id}
+          type="button"
+          role="menuitem"
+          className="st-dd-item"
+          onClick={() => {
+            onAction(t.id);
+            onClose();
+          }}
+        >
+          <span className="st-dd-lead">
+            <span className="st-dd-check" />
+            <span>{t.label}</span>
+          </span>
+          <Kbd>{t.shortcut}</Kbd>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Plan C follow-up — File + Edit menus, previously inert. Both dispatch to real
+// shell flows (File) or the in-canvas undo stack / selection bridges (Edit).
+function FileDropdown({ onAction, onClose }) {
+  useDropdownClose(onClose);
+  const items = [
+    { id: 'new', label: 'New canvas…', shortcut: '⌘N' },
+    { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
+    { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
+    { sep: true },
+    { id: 'reload', label: 'Reload canvas', shortcut: '⌘R' },
+  ];
+  return (
+    <div className="st-dropdown" role="menu" aria-label="File" style={{ left: 40 }}>
+      {items.map((it, i) =>
+        it.sep ? (
+          <div key={'s' + i} className="st-dd-sep" />
+        ) : (
+          <button
+            key={it.id}
+            type="button"
+            role="menuitem"
+            className="st-dd-item"
+            onClick={() => {
+              onAction(it.id);
+              onClose();
+            }}
+          >
+            <span className="st-dd-lead">
+              <span className="st-dd-check" />
+              <span>{it.label}</span>
+            </span>
+            <Kbd>{it.shortcut}</Kbd>
+          </button>
+        )
+      )}
+    </div>
+  );
+}
+
+function EditDropdown({ onAction, onClose }) {
+  useDropdownClose(onClose);
+  const items = [
+    { id: 'undo', label: 'Undo', shortcut: '⌘Z' },
+    { id: 'redo', label: 'Redo', shortcut: '⇧⌘Z' },
+    { sep: true },
+    { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
+    { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⇧⌘A' },
+  ];
+  return (
+    <div className="st-dropdown" role="menu" aria-label="Edit" style={{ left: 90 }}>
+      {items.map((it, i) =>
+        it.sep ? (
+          <div key={'s' + i} className="st-dd-sep" />
+        ) : (
+          <button
+            key={it.id}
+            type="button"
+            role="menuitem"
+            className="st-dd-item"
+            onClick={() => {
+              onAction(it.id);
+              onClose();
+            }}
+          >
+            <span className="st-dd-lead">
+              <span className="st-dd-check" />
+              <span>{it.label}</span>
+            </span>
+            <Kbd>{it.shortcut}</Kbd>
+          </button>
+        )
+      )}
     </div>
   );
 }
@@ -1254,6 +1943,15 @@ function Menubar({
   annotationsVisible,
   onToggleAnnotations,
   postToActiveCanvas,
+  onOpenWhatsNew,
+  whatsNewCount,
+  artboardCount = 0,
+  presence = null,
+  inspectorOpen,
+  onToggleInspector,
+  onNewCanvas,
+  onOpenExport,
+  onReload,
 }) {
   const isSystem = activePath === SYSTEM_TAB;
   const stamp = isSystem ? 'SYSTEM' : activePath ? 'CANVAS' : 'IDLE';
@@ -1284,7 +1982,7 @@ function Menubar({
       disabled: false,
     },
     { id: 'layers', label: 'Layers Panel', phase: 'Phase 12', disabled: true },
-    { id: 'inspector', label: 'Inspector', phase: 'Phase 12', disabled: true },
+    { id: 'inspector', label: 'Inspector', shortcut: 'I', checked: inspectorOpen, disabled: false },
     {
       id: 'annotate',
       label: 'Annotations',
@@ -1295,8 +1993,9 @@ function Menubar({
     { id: 'present', label: 'Presentation Mode', phase: 'Phase 6', disabled: true },
   ];
 
+  const DROPDOWN_MENUS = ['file', 'edit', 'view', 'selection', 'tools'];
   function onMenuClick(key) {
-    if (key === 'view' || key === 'selection' || key === 'tools') {
+    if (DROPDOWN_MENUS.includes(key)) {
       setOpenMenu(openMenu === key ? null : key);
     } else if (key === 'help') {
       setOpenMenu(null);
@@ -1305,34 +2004,63 @@ function Menubar({
   }
 
   return (
-    <header className="mb" role="menubar" aria-label="Application menubar">
-      <span className="mb-brand">
-        <span className="dot" aria-hidden="true" />
-        <span>maude</span>
+    <header className="st-menubar" role="menubar" aria-label="Application menubar">
+      <span className="st-brand">
+        <span className="st-brand-mark">
+          <svg viewBox="0 0 32 32" width="100%" height="100%" fill="none" aria-hidden="true"><path d="M16 5l2.8 8.2L27 16l-8.2 2.8L16 27l-2.8-8.2L5 16l8.2-2.8z" fill="currentColor" /></svg>
+        </span>
+        <span className="st-brand-name">maude</span>
       </span>
-      <nav className="mb-menus" aria-label="Application menus">
+      <nav className="st-menus" aria-label="Application menus">
         {MENU_NAMES.map((name) => {
           const key = name.toLowerCase();
-          const hasDropdown = key === 'view' || key === 'selection' || key === 'tools';
+          const hasDropdown = DROPDOWN_MENUS.includes(key);
           const interactive = hasDropdown || key === 'help';
           const open = openMenu === key;
           return (
             <button
               key={key}
               type="button"
-              className="mb-menu"
+              className="st-menu"
               role="menuitem"
+              data-tour={key === 'help' ? 'help' : undefined}
               aria-haspopup={hasDropdown ? 'menu' : undefined}
               aria-expanded={hasDropdown ? open : undefined}
-              aria-disabled={interactive ? undefined : 'true'}
-              title={interactive ? '' : 'Coming in a later phase'}
               onClick={() => onMenuClick(key)}
+              // F4 — once any menu is open, hovering another trigger switches to
+              // it (base-ui menubar behavior). Only among dropdown menus.
+              onMouseEnter={() => {
+                if (openMenu !== null && hasDropdown) setOpenMenu(key);
+              }}
             >
               {name}
             </button>
           );
         })}
       </nav>
+      {openMenu === 'file' && (
+        <FileDropdown
+          onAction={(id) => {
+            if (id === 'new') onNewCanvas?.();
+            else if (id === 'export') onOpenExport?.('export');
+            else if (id === 'handoff') onOpenExport?.('handoff');
+            else if (id === 'reload') onReload?.();
+          }}
+          onClose={() => setOpenMenu(null)}
+        />
+      )}
+      {openMenu === 'edit' && (
+        <EditDropdown
+          onAction={(id) => {
+            if (id === 'undo') postToActiveCanvas({ dgn: 'undo' });
+            else if (id === 'redo') postToActiveCanvas({ dgn: 'redo' });
+            else if (id === 'deselect-all') postToActiveCanvas({ dgn: 'selection-clear' });
+            else if (id === 'select-all-annotations')
+              postToActiveCanvas({ dgn: 'annotation-select-all' });
+          }}
+          onClose={() => setOpenMenu(null)}
+        />
+      )}
       {openMenu === 'view' && (
         <ViewDropdown
           panels={panels}
@@ -1341,6 +2069,7 @@ function Menubar({
             else if (id === 'comments') onToggleComments();
             else if (id === 'hidden') onToggleShowHidden();
             else if (id === 'annotate') onToggleAnnotations();
+            else if (id === 'inspector') onToggleInspector();
           }}
           onClose={() => setOpenMenu(null)}
         />
@@ -1361,65 +2090,34 @@ function Menubar({
           onClose={() => setOpenMenu(null)}
         />
       )}
-      <div className="mb-spacer" />
-      <div className="mb-status">
-        <span className="cv-stamp">{stamp}</span>
-        <span className="file" title={activePath || ''}>
+      <div className="st-mb-right">
+        {presence ? <div className="st-presence">{presence}</div> : null}
+        <button
+          type="button"
+          className="st-whatsnew"
+          data-unseen={whatsNewCount > 0 ? 'true' : 'false'}
+          aria-label={`What's new${whatsNewCount > 0 ? ` — ${whatsNewCount} unseen` : ''}`}
+          title="What's new"
+          onClick={onOpenWhatsNew}
+        >
+          <StIcon name="sparkle" size={15} />
+        </button>
+        <span className="st-stamp">{stamp}</span>
+        <span className="st-mb-file" title={activePath || ''}>
           {fileLabel}
         </span>
-        <span className="sep" />
-        <span>
-          <span className="accent-dot">●</span> <b>{tabsCount}</b> ARTBOARDS
-        </span>
-        <span className="sep" />
-        <span title="Pan/zoom in Phase 4">
-          ZOOM <b>100%</b>
-        </span>
-        <span className="sep" />
-        <span className="ok">
-          <b>{project || 'MDCC'}</b>
+        <span className="st-mb-sep" />
+        <span className="st-mb-count" title="Artboards in the open canvas">
+          <span className="st-dot" style={{ background: 'var(--accent)' }} />
+          {artboardCount} ARTBOARDS
         </span>
+        <span className="st-mb-sep" />
+        <span className="st-mb-proj">{project || 'maude'}</span>
       </div>
     </header>
   );
 }
 
-function ThemeToggle({ theme, onToggle }) {
-  // Show the icon of the theme you'll switch TO — clearer affordance than current state.
-  // Sun + Moon paths are condensed Lucide-style (single-path so the existing <Icon> works).
-  const sun =
-    'M12 7a5 5 0 100 10 5 5 0 000-10z M12 3v1 M12 20v1 M21 12h-1 M4 12H3 M16.95 7.05l-.71.71 M7.05 16.95l-.71.71 M16.95 16.95l-.71-.71 M7.05 7.05l-.71-.71';
-  const moon = 'M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z';
-  const next = theme === 'dark' ? 'light' : 'dark';
-  return (
-    <button
-      type="button"
-      className="theme-toggle"
-      onClick={onToggle}
-      title={`Switch to ${next} theme`}
-      aria-label={`Switch to ${next} theme`}
-    >
-      <Icon d={theme === 'dark' ? sun : moon} size={14} />
-      <span className="theme-toggle-label">{next}</span>
-    </button>
-  );
-}
-
-function Wordmark({ project, port, version }) {
-  return (
-    <div className="wm" aria-label="maude design server">
-      <span className="wm-glyph">maude-design-server</span>
-      <span className="wm-sub">
-        <span>CANVAS · {(project || 'MAUDE').toUpperCase()}</span>
-        <span className="wm-sep">/</span>
-        <b>v{version}</b>
-        <span className="wm-sep">/</span>
-        <span>localhost:{port || '4399'}</span>
-      </span>
-    </div>
-  );
-}
-
 function Viewport({
   tabs,
   activePath,
@@ -1431,35 +2129,38 @@ function Viewport({
   cfg,
 }) {
   return (
-    <div className="viewport">
+    <div className="viewport st-stage">
       {tabs.length === 0 && (
-        <>
-          <Wordmark
-            project={project}
-            port={typeof window !== 'undefined' ? window.location.port : ''}
-            version={MDCC_VERSION}
-          />
-          <div className="empty-state">
-            <div className="big">No mock open</div>
-            <div className="small">
-              ← Click a <code>.tsx</code> (or legacy <code>.html</code>) file in the tree, or open
-              the <strong>Design system</strong> view above it.
-              <br />
-              <br />
-              Tabs work like in an editor — close with the × on each tab. <kbd>⌘R</kbd> reloads the
-              active iframe.
-              <br />
-              <br />
-              <strong>Element selection:</strong> hold <kbd>⌘</kbd> inside the canvas and hover for
-              a preview, click to select. <kbd>⌘⇧</kbd>+click adds to a multi-selection.{' '}
-              <kbd>V</kbd>/<kbd>H</kbd>/<kbd>C</kbd> swap tool; right-click opens the context menu.
-              <br />
-              <br />
-              Active file, selection, and comments are tracked in <code>_active.json</code> +{' '}
-              <code>_comments/</code> — Claude reads them when you run <code>/design</code>.
-            </div>
+        <div className="st-empty">
+          <div className="st-empty-brand">
+            <span className="st-brand-mark">
+              <svg viewBox="0 0 32 32" width="100%" height="100%" fill="none" aria-hidden="true"><path d="M16 5l2.8 8.2L27 16l-8.2 2.8L16 27l-2.8-8.2L5 16l8.2-2.8z" fill="currentColor" /></svg>
+            </span>
+            <span className="st-empty-wm">maude</span>
+            <span className="st-empty-sub st-mono">
+              CANVAS · {(project || 'MAUDE').toUpperCase()} / v{MDCC_VERSION} /
+              localhost:{typeof window !== 'undefined' ? window.location.port : '4399'}
+            </span>
           </div>
-        </>
+          <div className="st-empty-title">No canvas open</div>
+          <div className="st-empty-body">
+            ← Click a <code>.tsx</code> (or legacy <code>.html</code>) file in the tree, or open the{' '}
+            <strong>Design system</strong> view above it.
+            <br />
+            <br />
+            Tabs work like in an editor — close with the × on each tab. <Kbd>⌘R</Kbd> reloads the
+            active iframe.
+            <br />
+            <br />
+            <strong>Element selection:</strong> hold <Kbd>⌘</Kbd> inside the canvas and hover for a
+            preview, click to select. <Kbd>⌘⇧</Kbd>+click adds to a multi-selection. <Kbd>V</Kbd>
+            /<Kbd>H</Kbd>/<Kbd>C</Kbd> swap tool; right-click opens the context menu.
+            <br />
+            <br />
+            Active file, selection, and comments are tracked in <code>_active.json</code> +{' '}
+            <code>_comments/</code> — Claude reads them when you run <code>/design</code>.
+          </div>
+        </div>
       )}
       {tabs.map((t) => {
         if (t.path === SYSTEM_TAB) {
@@ -1749,33 +2450,6 @@ function Gallery({ title, items, onOpen, kind, cfg }) {
 
 // ---------- Comment composer / viewer ----------
 
-function CommentBar({ activePath, comments }) {
-  // Phase 6 — the shell-side composer + chip strip + focused-row chrome were
-  // removed. The iframe overlay (comments-overlay.tsx) owns composer + pin
-  // bubbles + thread popover. BottomBar shrinks to a live open-count summary
-  // so the shell still surfaces total review activity at a glance.
-  if (!activePath) return null;
-  const openComments = (comments || []).filter((c) => c.status !== 'resolved');
-  if (openComments.length === 0) return null;
-  return (
-    <div className="comment-bar">
-      <div className="cb-row strip">
-        <span className="cb-label">
-          {openComments.length} open comment{openComments.length === 1 ? '' : 's'}
-        </span>
-      </div>
-    </div>
-  );
-}
-
-function StatusBarSlot({ label, children, className = '' }) {
-  return (
-    <span className={'sb-slot ' + className} role="group" aria-label={label}>
-      {children}
-    </span>
-  );
-}
-
 function StatusBar({
   activePath,
   selected,
@@ -1797,66 +2471,108 @@ function StatusBar({
       : selected
         ? selected.selector
         : '';
+  const nextTheme = theme === 'dark' ? 'light' : 'dark';
+
+  // P5 (Plan C) — always-on hub-sync slot. `/_sync-status` returns one of three
+  // shapes: solo `{linked:false}` (hide), DDR-060 `{notSyncable,tsxCount,reason}`
+  // (linked but 0 syncable), or the connection-state machine `{state,queuedOps,
+  // flash,…}` (the common linked case the old notSyncable-only guard never
+  // showed — the "hub sync se neukazuje" bug). Map each to a label + dot tone.
+  const syncSlot = (() => {
+    if (!syncStatus || syncStatus.linked === false) return null;
+    if (syncStatus.notSyncable) {
+      return {
+        online: false,
+        label: `0 syncable${syncStatus.tsxCount > 0 ? ` · ${syncStatus.tsxCount} tsx` : ''}`,
+        title: syncStatus.reason || 'Linked to a hub, but no canvases are syncable.',
+      };
+    }
+    const q = syncStatus.queuedOps ?? 0;
+    const synced = syncStatus.state === 'online' || syncStatus.flash === 'synced';
+    if (synced) {
+      return {
+        online: true,
+        label: q > 0 ? `${q} ↑` : 'synced',
+        title: q > 0 ? `${q} edit(s) queued to push` : 'All changes synced to the hub',
+      };
+    }
+    return {
+      online: false,
+      label: `${q} ↑`,
+      title:
+        syncStatus.state === 'connecting'
+          ? 'Connecting to the hub…'
+          : 'Offline — edits queued, will sync when the hub reconnects',
+    };
+  })();
+
   return (
-    <div className="statusbar" role="contentinfo">
-      <StatusBarSlot label="Active file" className="sb-active">
-        <span className="sb-key">active</span>
-        <span className="sb-file" title={activePath || ''}>
+    <footer className="st-statusbar" role="contentinfo">
+      <span className="st-sb-slot st-sb-active" role="group" aria-label="Active file">
+        <span className="lead" aria-hidden="true" />
+        <span className="lbl">active</span>
+        <span className="val" title={activePath || ''}>
           {isSystem ? '▦ design system' : activePath || '—'}
         </span>
-      </StatusBarSlot>
+      </span>
 
       {selected && selected.selector && !isSystem && (
-        <StatusBarSlot label="Selected element" className="sb-selected">
-          <span className="sb-dot" aria-hidden="true">
-            ●
-          </span>
-          <span className="sb-sel-text" title={title}>
+        <span className="st-sb-slot st-sb-sel" role="group" aria-label="Selected element">
+          <span className="lbl">selected</span>
+          <span className="val" title={title}>
             {text}
           </span>
           <button
             type="button"
-            className="sb-clear-sel"
+            className="st-sb-sel-clear"
             onClick={onClearSelected}
             title="Clear (Esc inside iframe)"
             aria-label="Clear selection"
           >
             ×
           </button>
-        </StatusBarSlot>
+        </span>
       )}
 
-      <StatusBarSlot label="Open comments" className="sb-unread">
-        <span className="sb-key">comments</span>
-        <span className="sb-count">{openCount}</span>
-      </StatusBarSlot>
-
-      <StatusBarSlot label="Connection" className="sb-live">
-        <span className={'sb-live-dot' + (wsConnected ? ' connected' : '')} aria-hidden="true" />
-        <span className="sb-key">{wsConnected ? 'live' : 'reconnecting'}</span>
-      </StatusBarSlot>
-
-      {/* DDR-060 / 9.1-D — linked-to-hub-but-nothing-syncs state lives here in the
-          status bar (DS-styled, hover for detail) instead of a floating off-brand
-          pill. Only shown when the project is linked + has 0 syncable canvases. */}
-      {syncStatus?.notSyncable && (
-        <StatusBarSlot label="Hub sync" className="sb-sync">
-          <span className="sb-sync-dot" aria-hidden="true" />
+      <span className="st-sb-slot" role="group" aria-label="Open comments">
+        <span className="lbl">comments</span>
+        <span className="val">{openCount} open</span>
+      </span>
+
+      <span className="st-sb-spacer" />
+
+      <span className="st-sb-slot" role="group" aria-label="Connection">
+        <span className={'st-live-dot' + (wsConnected ? ' is-connected' : '')} aria-hidden="true" />
+        <span className="lbl">{wsConnected ? 'live' : 'reconnecting'}</span>
+      </span>
+
+      {/* P5 (Plan C) — always-on hub-sync slot (was notSyncable-only per DDR-060
+          / 9.1-D). Now also surfaces the connection-state machine's queued/synced
+          counter for the common linked case. Solo projects render nothing. */}
+      {syncSlot && (
+        <span className="st-sb-slot st-sb-sync" role="group" aria-label="Hub sync">
           <span
-            className="sb-key"
-            title={syncStatus.reason || 'Linked to a hub, but no canvases are syncable.'}
-          >
-            0 syncable{syncStatus.tsxCount > 0 ? ` · ${syncStatus.tsxCount} tsx` : ''}
+            className={'st-sb-sync-dot' + (syncSlot.online ? ' is-online' : '')}
+            aria-hidden="true"
+          />
+          <span className="lbl">hub sync</span>
+          <span className="val" title={syncSlot.title}>
+            {syncSlot.label}
           </span>
-        </StatusBarSlot>
+        </span>
       )}
 
-      <span className="sb-spacer" />
-
-      <StatusBarSlot label="Theme" className="sb-theme">
-        <ThemeToggle theme={theme} onToggle={onToggleTheme} />
-      </StatusBarSlot>
-    </div>
+      <button
+        type="button"
+        className="st-sb-theme"
+        onClick={onToggleTheme}
+        title={`Switch to ${nextTheme} theme`}
+        aria-label={`Switch to ${nextTheme} theme`}
+      >
+        <StIcon name={theme === 'dark' ? 'sun' : 'moon'} size={13} />
+        {nextTheme}
+      </button>
+    </footer>
   );
 }
 
@@ -1897,108 +2613,120 @@ function CommentsPanel({
   }
 
   return (
-    <aside className="rsidebar">
-      <div className="rsidebar-header">
-        <h2>
-          <span>Comments</span>
-          <span className="total">{counts.all}</span>
-        </h2>
-        <div className="rsidebar-filters" role="tablist">
+    <aside className="st-rpanel" aria-label="Comments">
+      <div className="st-rp-tabs st-rp-tabs--filters">
+        <div className="st-cm-filters" role="tablist">
           <button
-            className={'rsidebar-filter' + (filter === 'all' ? ' active' : '')}
+            type="button"
+            className={'st-cm-filter' + (filter === 'all' ? ' is-active' : '')}
             role="tab"
             aria-selected={filter === 'all'}
             onClick={() => setFilter('all')}
           >
-            All <span className="fc">{counts.all}</span>
+            All · {counts.all}
           </button>
           <button
-            className={'rsidebar-filter' + (filter === 'open' ? ' active' : '')}
+            type="button"
+            className={'st-cm-filter' + (filter === 'open' ? ' is-active' : '')}
             role="tab"
             aria-selected={filter === 'open'}
             onClick={() => setFilter('open')}
           >
-            Open <span className="fc">{counts.open}</span>
+            Open · {counts.open}
           </button>
           <button
-            className={'rsidebar-filter' + (filter === 'resolved' ? ' active' : '')}
+            type="button"
+            className={'st-cm-filter' + (filter === 'resolved' ? ' is-active' : '')}
             role="tab"
             aria-selected={filter === 'resolved'}
             onClick={() => setFilter('resolved')}
           >
-            Resolved <span className="fc">{counts.resolved}</span>
+            Resolved · {counts.resolved}
           </button>
         </div>
       </div>
-      <div className="rsidebar-body">
+      <div className="st-rp-body" style={{ gap: 'var(--space-4)' }}>
         {groups.length === 0 ? (
-          <div className="rsidebar-empty">
+          <div className="st-rp-empty">
             <p>No comments {filter !== 'all' ? `with status “${filter}”` : 'yet'}.</p>
-            <p style={{ marginTop: 12 }}>
-              Open a canvas, hold <kbd>⌘</kbd> and click an element, then press <kbd>C</kbd> — or
-              hold <kbd>⌘⇧</kbd> and click directly.
+            <p>
+              Open a canvas, hold <Kbd>⌘</Kbd> and click an element, then press <Kbd>C</Kbd> — or
+              hold <Kbd>⌘⇧</Kbd> and click directly.
             </p>
           </div>
         ) : (
           groups.map((g) => (
-            <div key={g.file} className="rs-group">
-              <button className="rs-group-h" onClick={() => onJump(g.file, null)} title={g.file}>
-                <span className="rs-group-name">{displayName(basename(g.file))}</span>
-                <span className="rs-group-count">{g.comments.length}</span>
+            <Fragment key={g.file}>
+              <button
+                type="button"
+                className="st-cm-group-hd"
+                onClick={() => onJump(g.file, null)}
+                title={g.file}
+              >
+                <span>{displayName(basename(g.file))}</span>
+                <span className="st-mono">{g.comments.length}</span>
               </button>
               {g.comments.map((c) => (
                 <div
                   key={c.id}
                   className={
-                    'rs-comment' +
-                    (c.status === 'resolved' ? ' resolved' : '') +
-                    (c.id === focusedId ? ' active-pin' : '')
+                    'st-comment' +
+                    (c.status === 'resolved' ? ' is-resolved' : '') +
+                    (c.id === focusedId ? ' is-active' : '')
                   }
                   onClick={() => onJump(g.file, c.id)}
                 >
-                  <div className="rs-comment-head">
-                    <span className="rs-num">{c.n || '·'}</span>
-                    <span className="rs-time">{timeAgo(c.created)}</span>
+                  <div className="st-comment-hd">
+                    <span className="st-pin st-pin--inline">{c.n || '·'}</span>
+                    <span className="st-comment-time">{timeAgo(c.created)}</span>
                   </div>
-                  <div className="rs-comment-text">{c.text}</div>
-                  <div className="rs-comment-foot">
-                    <code title={(c.dom_path || []).join(' > ')}>{c.selector || '—'}</code>
-                    <div className="rs-comment-actions">
+                  <div className="st-comment-txt">{c.text}</div>
+                  <div className="st-comment-foot">
+                    <span className="st-comment-sel" title={(c.dom_path || []).join(' > ')}>
+                      {c.selector || '—'}
+                    </span>
+                    <span className="st-mini-act">
                       {c.status === 'resolved' ? (
                         <button
-                          className="rs-act"
+                          type="button"
+                          className="st-iconbtn"
+                          aria-label="Reopen"
                           onClick={(e) => {
                             e.stopPropagation();
                             onReopen(c.id);
                           }}
                         >
-                          ↺
+                          <StIcon name="reopen" size={14} />
                         </button>
                       ) : (
                         <button
-                          className="rs-act"
+                          type="button"
+                          className="st-iconbtn"
+                          aria-label="Resolve"
                           onClick={(e) => {
                             e.stopPropagation();
                             onResolve(c.id);
                           }}
                         >
-                          ✓
+                          <StIcon name="resolve" size={14} />
                         </button>
                       )}
                       <button
-                        className="rs-act danger"
+                        type="button"
+                        className="st-iconbtn"
+                        aria-label="Delete"
                         onClick={(e) => {
                           e.stopPropagation();
                           onDelete(c.id);
                         }}
                       >
-                        ×
+                        <StIcon name="x" size={14} />
                       </button>
-                    </div>
+                    </span>
                   </div>
                 </div>
               ))}
-            </div>
+            </Fragment>
           ))
         )}
       </div>
@@ -2013,6 +2741,10 @@ function CommentsPanel({
 // for 3s right after a reconnect. Driven entirely by the 'sync:status' payload
 // the dev-server's linked-mode sync runtime broadcasts.
 function SyncBanner({ status }) {
+  // Plan C follow-up — the banner overlapped the menubar and wasn't dismissable.
+  // Dismissal is keyed on the connection state, so a transition (reconnect flash,
+  // escalation to offline-long) re-surfaces it; a stable state stays hidden.
+  const [dismissedKey, setDismissedKey] = useState(null);
   if (!status || status.linked === false) return null;
   // DDR-060 / 9.1-D — the "linked but 0 syncable" state is surfaced in the
   // status bar (sb-sync slot), NOT as a floating banner. This component owns
@@ -2022,61 +2754,179 @@ function SyncBanner({ status }) {
   const showFlash = flash === 'synced';
   const offline = state === 'offline' || state === 'offline-long';
   if (!offline && !showFlash) return null;
+  const dismissKey = `${state}:${showFlash ? 'flash' : 'offline'}`;
+  if (dismissedKey === dismissKey) return null;
 
-  let bg;
-  let fg;
-  let border;
+  let variant;
   let text;
   if (showFlash) {
-    bg = '#dcfce7';
-    fg = '#166534';
-    border = '#86efac';
+    variant = 'success';
     text = 'Synced with hub';
   } else if (state === 'offline-long') {
-    bg = '#fee2e2';
-    fg = '#991b1b';
-    border = '#fca5a5';
+    variant = 'error';
     text = `Long offline — ${queuedOps} edit(s) queued. Consider \`git commit && git push\` as backup.`;
   } else {
-    bg = '#fef9c3';
-    fg = '#854d0e';
-    border = '#fde047';
+    variant = 'warn';
     text = `Working offline · ${queuedOps} edit(s) queued · will sync when the hub reconnects.`;
   }
   const conflictNote =
     conflicts && conflicts.length > 0 ? ` (${conflicts.length} conflict notice(s))` : '';
 
   return (
-    <div
-      role="status"
-      aria-live="polite"
-      style={{
-        position: 'fixed',
-        top: 12,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        zIndex: 10003,
-        display: 'flex',
-        alignItems: 'center',
-        gap: 10,
-        padding: '8px 14px',
-        background: bg,
-        color: fg,
-        border: `1px solid ${border}`,
-        borderRadius: 999,
-        boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
-        font: '500 13px/1.2 system-ui, -apple-system, sans-serif',
-        maxWidth: '80vw',
-      }}
-    >
+    <div role="status" aria-live="polite" className={`st-banner st-banner--${variant}`}>
+      <span className="st-banner-dot" aria-hidden="true" />
       <span>
         {text}
         {conflictNote}
       </span>
+      <button
+        type="button"
+        className="st-banner-close"
+        aria-label="Dismiss"
+        title="Dismiss"
+        onClick={() => setDismissedKey(dismissKey)}
+      >
+        ×
+      </button>
     </div>
   );
 }
 
+// ---------- Inspector panel (display-only) ----------
+//
+// T6 (Plan C) — right-dock Inspect / Layers / CSS tabs per `.design/ui/Studio.tsx`
+// InspectorPanel. DISPLAY-ONLY: reads the live `selected` payload from the
+// inspector bridge (`bounds`, `tag`, `classes`, `dom_path`, `html`). The
+// mockup's live-CSS-knob WRITEBACK is Phase 12 (needs a canvas-origin write
+// bridge, DDR-054) — the CSS tab shows markup read-only + keeps that callout, so
+// it never implies functionality it lacks (the exact reason DDR-096 deferred it).
+function InspectorPanel({ selected, onClose }) {
+  const [tab, setTab] = useState('inspect');
+  // `selected` may be a single element, an array (multi-select), or null.
+  const el = Array.isArray(selected) ? selected[0] : selected;
+  const tabBtn = (id, label, icon) => (
+    <button
+      type="button"
+      className={'st-rp-tab' + (tab === id ? ' is-active' : '')}
+      onClick={() => setTab(id)}
+    >
+      <StIcon name={icon} size={14} />
+      {label}
+    </button>
+  );
+  const b = el?.bounds || null;
+  return (
+    <aside className="st-rpanel" aria-label="Inspector">
+      <div className="st-rp-tabs">
+        {tabBtn('inspect', 'Inspect', 'sliders')}
+        {tabBtn('layers', 'Layers', 'layers')}
+        {tabBtn('css', 'CSS', 'code')}
+        <button
+          type="button"
+          className="st-iconbtn"
+          aria-label="Close inspector"
+          style={{ marginLeft: 'auto' }}
+          onClick={onClose}
+        >
+          <StIcon name="x" size={14} />
+        </button>
+      </div>
+      <div className="st-rp-body">
+        {!el ? (
+          <div className="st-rp-empty">
+            Hold <Kbd>⌘</Kbd> inside the canvas and click an element to inspect it.
+          </div>
+        ) : tab === 'inspect' ? (
+          <>
+            <div className="st-rp-hd">{el.selector || el.tag || 'element'}</div>
+            <div className="st-insp-row">
+              <span className="st-insp-label">Pos</span>
+              <div className="st-insp-fields">
+                <span className="st-field-lead">
+                  <span className="k">X</span>
+                  <input className="st-field" value={b ? Math.round(b.x) : '—'} readOnly />
+                </span>
+                <span className="st-field-lead">
+                  <span className="k">Y</span>
+                  <input className="st-field" value={b ? Math.round(b.y) : '—'} readOnly />
+                </span>
+              </div>
+            </div>
+            <div className="st-insp-row">
+              <span className="st-insp-label">Size</span>
+              <div className="st-insp-fields">
+                <span className="st-field-lead">
+                  <span className="k">W</span>
+                  <input className="st-field" value={b ? Math.round(b.w) : '—'} readOnly />
+                </span>
+                <span className="st-field-lead">
+                  <span className="k">H</span>
+                  <input className="st-field" value={b ? Math.round(b.h) : '—'} readOnly />
+                </span>
+              </div>
+            </div>
+            <div className="st-insp-row">
+              <span className="st-insp-label">Tag</span>
+              <div className="st-insp-fields">
+                <span className="st-mono" style={{ fontSize: 11, color: 'var(--fg-0)' }}>
+                  {el.tag || '—'}
+                </span>
+              </div>
+            </div>
+            {el.classes ? (
+              <div className="st-insp-row">
+                <span className="st-insp-label">Class</span>
+                <div className="st-insp-fields">
+                  <span className="st-mono" style={{ fontSize: 11, color: 'var(--fg-1)' }}>
+                    {el.classes}
+                  </span>
+                </div>
+              </div>
+            ) : null}
+            <div className="callout callout--info" style={{ fontSize: 12 }}>
+              Computed fill / radius / type readout lands with the live CSS bridge (Phase 12).
+            </div>
+          </>
+        ) : tab === 'layers' ? (
+          <>
+            <div className="st-rp-hd">Layers · ancestry</div>
+            {Array.isArray(el.dom_path) && el.dom_path.length ? (
+              el.dom_path.map((node, i) => (
+                <div
+                  key={i}
+                  className={'st-layer' + (i === el.dom_path.length - 1 ? ' is-sel' : '')}
+                  style={{ paddingLeft: 8 + i * 12 }}
+                >
+                  <StIcon name="square" size={13} />
+                  {node}
+                </div>
+              ))
+            ) : (
+              <div className="st-rp-empty">No ancestry path for this selection.</div>
+            )}
+          </>
+        ) : (
+          <>
+            <div className="st-rp-hd">Markup · {el.selector || el.tag}</div>
+            <div className="st-css">
+              <div>
+                <span className="comment">/* read-only — outerHTML snapshot */</span>
+              </div>
+              <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                {(el.html || '').slice(0, 600) || '(no markup captured)'}
+              </div>
+            </div>
+            <div className="callout callout--info" style={{ fontSize: 12 }}>
+              Phase 12 — knob edits will write back to the artboard live and stage a diff for
+              handoff. Today the inspector is read-only.
+            </div>
+          </>
+        )}
+      </div>
+    </aside>
+  );
+}
+
 // ---------- App ----------
 
 function App() {
@@ -2105,7 +2955,11 @@ function App() {
       .then((data) => {
         if (cancelled) return;
         const designRel = (data.designRoot || '.design').replace(/^\/+|\/+$/g, '');
-        setCfg({
+        // Functional merge — the `/_config` and `/_index-data` fetches race, and
+        // the latter contributes `canvasDesignSystems` (DDR-093). A full-replace
+        // here would clobber that map if it resolved second.
+        setCfg((prev) => ({
+          ...prev,
           designRel,
           tokensCssRel: data.tokensCssRel,
           // Pass through designSystems so canvasUrl can resolve the right
@@ -2118,7 +2972,7 @@ function App() {
           // from the main origin's /_api). Absent on older servers → relative
           // URL fallback keeps same-origin behavior.
           canvasOrigin: data.canvasOrigin,
-        });
+        }));
       })
       .catch(() => {});
     return () => {
@@ -2154,7 +3008,35 @@ function App() {
   const [showHidden, setShowHidden] = useState(() => readBoolStore(SHOW_HIDDEN_STORE, false));
   const [sectionsExpanded, setSectionsExpanded] = useState(() => readJsonStore(SECTIONS_STORE, {}));
   const [helpOpen, setHelpOpen] = useState(false);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  // T5/T6 (Plan C) — shell-level export/handoff dialog + inspector panel state.
+  // The palette (T4) drives them; the dialog (T5) + panel (T6) consume them.
+  const [exportDialog, setExportDialog] = useState(null); // null | { mode: 'export'|'handoff', scope? }
+  const [inspectorOpen, setInspectorOpen] = useState(false);
+  const whatsNew = useWhatsNew(MDCC_VERSION);
+  const [tourSteps, setTourSteps] = useState(null);
+  const [usageNudge, setUsageNudge] = useState(() => !readBoolStore(USAGE_TOUR_STORE, false));
+  const startTour = useCallback((steps) => {
+    setTourSteps(Array.isArray(steps) && steps.length ? steps : null);
+  }, []);
+  const markUsageSeen = useCallback(() => {
+    setUsageNudge(false);
+    try {
+      localStorage.setItem(USAGE_TOUR_STORE, '1');
+    } catch {}
+  }, []);
   const [annotationsVisible, setAnnotationsVisible] = useState(true);
+  // P2/P3 (Plan C) — top-bar live state. (Zoom lives in the canvas toolbar pill,
+  // so the top bar no longer mirrors it.)
+  //   activeArtboards — real artboard count of the open canvas, read from its
+  //                   `<canvas>.meta.json` sidecar (shell-side, no iframe dep).
+  //   gitUser       — local user (name/initials) for the menubar presence avatar.
+  //   agentActive   — transient flag set on `ai-activity`, cleared after idle, so
+  //                   the menubar shows a live agent avatar while Claude edits.
+  const [activeArtboards, setActiveArtboards] = useState(0);
+  const [gitUser, setGitUser] = useState(null);
+  const [agentActive, setAgentActive] = useState(false);
+  const agentIdleRef = useRef(null);
   const wsRef = useRef(null);
   const iframesRef = useRef(new Map());
 
@@ -2186,6 +3068,45 @@ function App() {
     });
   }, [activePath]);
 
+  // P3 (Plan C) — local git user for the menubar presence avatar. One-shot.
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/_api/git-user')
+      .then((r) => r.json())
+      .then((d) => {
+        if (cancelled) return;
+        const n = d && typeof d.name === 'string' ? d.name.trim() : '';
+        if (n) setGitUser(n);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // P2 (Plan C) — when the active canvas changes, read its real artboard count
+  // from the `<canvas>.meta.json` sidecar (shell-side, no iframe dep).
+  useEffect(() => {
+    if (!activePath || activePath === SYSTEM_TAB) {
+      setActiveArtboards(0);
+      return;
+    }
+    let cancelled = false;
+    fetch('/_api/canvas-meta?file=' + encodeURIComponent(activePath))
+      .then((r) => r.json())
+      .then((meta) => {
+        if (cancelled) return;
+        const n = Array.isArray(meta?.artboards) ? meta.artboards.length : 0;
+        setActiveArtboards(n);
+      })
+      .catch(() => {
+        if (!cancelled) setActiveArtboards(0);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [activePath]);
+
   // Sync theme to <html data-theme> + localStorage on every change.
   useEffect(() => {
     try {
@@ -2247,6 +3168,13 @@ function App() {
         tree: buildTree(g.paths, g.stripPrefix),
       }));
       setGroups(built);
+      // DDR-093 — fold the server-resolved per-canvas DS map into cfg so
+      // canvasUrl() injects each UI canvas's OWN design-system tokens instead of
+      // always designSystems[0]. Functional merge to coexist with the /_config
+      // fetch (either may land first). `?? {}` keeps older servers (no map) on
+      // the ds0 fallback. Re-runs on every tree reload, so adding/retargeting a
+      // canvas refreshes the map.
+      setCfg((prev) => ({ ...prev, canvasDesignSystems: data.canvasDesignSystems ?? {} }));
     } catch (e) {
       console.error('failed to load tree', e);
     }
@@ -2323,6 +3251,12 @@ function App() {
           } else if (m.type === 'comments' && typeof m.file === 'string') {
             setCommentsByFile((prev) => ({ ...prev, [m.file]: m.comments || [] }));
           } else if (m.type === 'ai-activity' && typeof m.file === 'string') {
+            // P3 (Plan C) — surface live agent activity as a menubar presence
+            // avatar. Set the flag and (re)arm an idle timer so the avatar
+            // fades once Claude stops editing.
+            setAgentActive(true);
+            if (agentIdleRef.current) clearTimeout(agentIdleRef.current);
+            agentIdleRef.current = setTimeout(() => setAgentActive(false), 8000);
             // Phase 8 Task 4 — relay to every open iframe; each canvas's
             // AiBanner filters by its own file path. Lightweight broadcast
             // (one envelope per change, not per iframe count).
@@ -2430,6 +3364,63 @@ function App() {
 
   const reloadTree = useCallback(() => loadTree(), [loadTree]);
 
+  // Phase 22 — create a blank brief board from the tree header. POSTs to the
+  // main-origin-only /_api/canvas (the untrusted canvas iframe can't reach it),
+  // then refreshes the tree and opens the new board so it's immediately the
+  // active canvas to annotate. Returns {ok} | {ok:false,error} so the Sidebar
+  // can surface a validation/duplicate message inline.
+  const createBoard = useCallback(
+    async (name) => {
+      try {
+        const r = await fetch('/_api/canvas', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, kind: 'brief-board' }),
+        });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok || !j.ok) return { ok: false, error: j.error || `create failed (${r.status})` };
+        await loadTree();
+        openTab(j.file);
+        return { ok: true, file: j.file };
+      } catch (e) {
+        return { ok: false, error: e instanceof Error ? e.message : 'network error' };
+      }
+    },
+    [loadTree, openTab]
+  );
+
+  // Phase 22 — soft-delete a canvas from the file tree. Confirms (destructive),
+  // DELETEs to the main-origin-only endpoint, refreshes the tree, and resets the
+  // active tab if the deleted canvas was open. The server moves the whole sidecar
+  // set to .design/_trash/ — recoverable locally.
+  const deleteBoard = useCallback(
+    async (filePath, label) => {
+      const ok = window.confirm(
+        `Move “${label}” to trash?\n\nIts annotations, history and comments move with it. ` +
+          `You can restore it from .design/_trash/.`
+      );
+      if (!ok) return;
+      try {
+        const r = await fetch(`/_api/canvas?file=${encodeURIComponent(filePath)}`, {
+          method: 'DELETE',
+        });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok || !j.ok) {
+          window.alert(`Could not delete: ${j.error || `error ${r.status}`}`);
+          return;
+        }
+        await loadTree();
+        if (activePath === filePath) {
+          setTabs([]);
+          setActivePath(null);
+        }
+      } catch (e) {
+        window.alert(`Delete failed: ${e instanceof Error ? e.message : 'network error'}`);
+      }
+    },
+    [loadTree, activePath]
+  );
+
   const clearSelected = useCallback(() => {
     wsSend({ type: 'clear-select' });
     setSelected(null);
@@ -2536,6 +3527,7 @@ function App() {
             payload: {
               file: p.file,
               selector: p.selector,
+              index: p.index,
               dom_path: p.dom_path,
               tag: p.tag,
               classes: p.classes,
@@ -2553,6 +3545,24 @@ function App() {
         setFocusedCommentId((prev) => (prev === m.id ? null : prev));
       } else if (m.dgn === 'comment-click' && m.id) {
         setFocusedCommentId(m.id);
+      } else if (m.dgn === 'artboards' && typeof m.count === 'number') {
+        // P2 (Plan C) — optional iframe-reported artboard count; overrides the
+        // meta.json-derived seed when the canvas knows better. Clamp.
+        const n = Math.round(m.count);
+        if (Number.isFinite(n) && n >= 0 && n <= 999) setActiveArtboards(n);
+      } else if (m.dgn === 'toggle-palette') {
+        // ⌘K pressed while focus was inside the canvas iframe — the injected
+        // inspector forwards the chord here since the iframe's keydown never
+        // reaches the shell's window listener. Mirror that handler's toggle.
+        setPaletteOpen((v) => !v);
+      } else if (m.dgn === 'open-export') {
+        // Plan C — the in-canvas toolbar / context menu route here so they open
+        // the SAME shell Export dialog as the menubar (one look, all settings).
+        // Carry the context-menu's scope hint (e.g. "Export selection").
+        setExportDialog({
+          mode: 'export',
+          scope: m.detail && typeof m.detail.scope === 'string' ? m.detail.scope : undefined,
+        });
       } else if (m.dgn === 'loaded' && m.file) {
         // iframe finished loading — push current comments + carry over focused pin if any
         const list = commentsByFile[m.file] || [];
@@ -2709,6 +3719,12 @@ function App() {
       // ⌘F) still fire regardless of focus, mirroring browser convention.
       const inCanvasIframe = document.activeElement?.tagName === 'IFRAME';
 
+      // Cmd+K / Ctrl+K — toggle the command palette (works even in inputs).
+      if (meta && (e.key === 'k' || e.key === 'K')) {
+        e.preventDefault();
+        setPaletteOpen((v) => !v);
+        return;
+      }
       // Cmd+R — reload active iframe (override browser reload)
       if (meta && (e.key === 'r' || e.key === 'R')) {
         e.preventDefault();
@@ -2745,7 +3761,7 @@ function App() {
       // / — focus search (or ⌘F per CV-08 placeholder hint)
       if (e.key === '/') {
         e.preventDefault();
-        const inp = document.querySelector('.tree-panel-search input');
+        const inp = document.querySelector('.st-search input');
         if (inp) inp.focus();
         return;
       }
@@ -2753,7 +3769,7 @@ function App() {
         e.preventDefault();
         if (!sidebarOpen) setSidebarOpen(true);
         setTimeout(() => {
-          const inp = document.querySelector('.tree-panel-search input');
+          const inp = document.querySelector('.st-search input');
           if (inp) inp.focus();
         }, 0);
         return;
@@ -2790,6 +3806,12 @@ function App() {
         }
         return;
       }
+      // I — toggle Inspector panel (T6, Plan C)
+      if ((e.key === 'i' || e.key === 'I') && !meta && !e.shiftKey) {
+        e.preventDefault();
+        setInspectorOpen((v) => !v);
+        return;
+      }
       // ? or F1 — open Help modal
       if (e.key === '?' || e.key === 'F1') {
         e.preventDefault();
@@ -2822,8 +3844,6 @@ function App() {
     if (el) iframesRef.current.set(path, el);
   }, []);
 
-  const activeFileComments =
-    activePath && activePath !== SYSTEM_TAB ? commentsByFile[activePath] || [] : [];
   const totalOpen = totalCounts(commentsByFile).open;
 
   // Suppress the native browser context menu across the shell — the canvas
@@ -2840,88 +3860,142 @@ function App() {
     e.preventDefault();
   }, []);
 
+  // ⌘K palette actions — shell-doable only (in-canvas export lives in the iframe).
+  // T4 (Plan C) — grouped command set per `.design/ui/Studio.tsx` AB-D.
+  // `group` drives the section headers; the list stays a flat array so keyboard
+  // nav indexes straight across groups.
+  const paletteActions = useMemo(
+    () => [
+      // ── Canvas ──────────────────────────────────────────────────────────
+      {
+        id: 'new',
+        group: 'Canvas',
+        label: 'New canvas…',
+        icon: 'plus',
+        kbd: '⌘N',
+        run: () => {
+          setSidebarOpen(true);
+          setTimeout(
+            () => document.querySelector('[aria-label="New blank brief board"]')?.click(),
+            60
+          );
+        },
+      },
+      {
+        id: 'export',
+        group: 'Canvas',
+        label: 'Export…',
+        icon: 'download',
+        kbd: '⇧⌘E',
+        run: () => setExportDialog({ mode: 'export' }),
+      },
+      {
+        id: 'handoff',
+        group: 'Canvas',
+        label: 'Handoff to production',
+        icon: 'share',
+        kbd: '⇧⌘H',
+        run: () => setExportDialog({ mode: 'handoff' }),
+      },
+      // ── View ────────────────────────────────────────────────────────────
+      {
+        id: 'system',
+        group: 'View',
+        label: 'Open design system view',
+        icon: 'sliders',
+        kbd: 'S',
+        run: () => openSystem(),
+      },
+      {
+        id: 'comments',
+        group: 'View',
+        label: 'Toggle comments panel',
+        icon: 'resolve',
+        kbd: '⌘⇧M',
+        run: () => setCommentsPanelOpen((v) => !v),
+      },
+      {
+        id: 'inspector',
+        group: 'View',
+        label: 'Open inspector',
+        icon: 'sliders',
+        kbd: 'I',
+        run: () => setInspectorOpen(true),
+      },
+      {
+        id: 'reload',
+        group: 'View',
+        label: 'Reload active canvas',
+        icon: 'reload',
+        kbd: '⌘R',
+        run: () => reloadActive(),
+      },
+      // ── Tools ───────────────────────────────────────────────────────────
+      {
+        id: 'draw',
+        group: 'Tools',
+        label: 'Draw a mark with the SVG agent',
+        icon: 'pen',
+        run: () => {
+          // The shell can't invoke Claude — surface the command for the user to
+          // paste into Claude Code (clipboard is the honest, useful affordance).
+          try {
+            navigator.clipboard?.writeText('/design:draw ');
+          } catch {}
+        },
+      },
+      {
+        id: 'theme',
+        group: 'Tools',
+        label: 'Toggle light / dark theme',
+        icon: 'sun',
+        run: () => toggleTheme(),
+      },
+      // ── Help ────────────────────────────────────────────────────────────
+      {
+        id: 'whatsnew',
+        group: 'Help',
+        label: "What's new in maude",
+        icon: 'sparkle',
+        run: () => whatsNew.openPanel(),
+      },
+      {
+        id: 'help',
+        group: 'Help',
+        label: 'Help · shortcuts & commands',
+        icon: 'help',
+        kbd: '?',
+        run: () => setHelpOpen(true),
+      },
+    ],
+    [openSystem, toggleTheme, reloadActive, whatsNew]
+  );
+
   return (
-    <div
-      className={
-        'app' + (commentsPanelOpen ? ' with-rsidebar' : '') + (sidebarOpen ? '' : ' no-sidebar')
-      }
-      onContextMenu={onShellContextMenu}
-    >
+    <div className="maude" data-theme={theme} onContextMenu={onShellContextMenu}>
       <SyncBanner status={syncStatus} />
+      {!usageNudge && !tourSteps && <WhatsNewToast wn={whatsNew} />}
       {gitLifecycle && (
-        <div
-          role="status"
-          aria-live="polite"
-          style={{
-            position: 'fixed',
-            top: 12,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            zIndex: 10002,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 12,
-            padding: '8px 14px',
-            background: '#dbeafe',
-            color: '#1e40af',
-            border: '1px solid #93c5fd',
-            borderRadius: 999,
-            boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
-            font: '500 13px/1.2 system-ui, -apple-system, sans-serif',
-          }}
-        >
+        <div role="status" aria-live="polite" className="st-banner st-banner--info">
+          <span className="st-banner-dot" aria-hidden="true" />
           <span>Repo state changed — reload to sync?</span>
           <button
             type="button"
+            className="btn btn--primary btn--sm"
             onClick={() => {
               try {
                 window.location.reload();
               } catch {}
             }}
-            style={{
-              padding: '3px 10px',
-              background: '#2563eb',
-              color: '#fff',
-              border: 'none',
-              borderRadius: 4,
-              font: '500 11px/1.2 system-ui',
-              cursor: 'pointer',
-            }}
           >
             Reload
           </button>
-          <button
-            type="button"
-            onClick={() => setGitLifecycle(null)}
-            style={{
-              padding: '3px 10px',
-              background: 'transparent',
-              color: '#1e40af',
-              border: '1px solid #93c5fd',
-              borderRadius: 4,
-              font: '500 11px/1.2 system-ui',
-              cursor: 'pointer',
-            }}
-          >
+          <button type="button" className="btn btn--ghost btn--sm" onClick={() => setGitLifecycle(null)}>
             Dismiss
           </button>
         </div>
       )}
-      <Sidebar
-        groups={groups}
-        activePath={activePath}
-        activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
-        onOpen={openTab}
-        onOpenSystem={openSystem}
-        wsConnected={wsConnected}
-        search={search}
-        setSearch={setSearch}
-        commentsByFile={commentsByFile}
-        showHidden={showHidden}
-        sectionsExpanded={sectionsExpanded}
-        onToggleSection={toggleSection}
-      />
-      <div className="main">
+      <div className="st-shell">
         <Menubar
           activePath={activePath}
           project={project}
@@ -2939,20 +4013,90 @@ function App() {
           annotationsVisible={annotationsVisible}
           onToggleAnnotations={toggleAnnotations}
           postToActiveCanvas={postToActiveCanvas}
+          onOpenWhatsNew={whatsNew.openPanel}
+          whatsNewCount={whatsNew.unseen.length}
+          artboardCount={activeArtboards}
+          inspectorOpen={inspectorOpen}
+          onToggleInspector={() => setInspectorOpen((v) => !v)}
+          onNewCanvas={() => {
+            setSidebarOpen(true);
+            setTimeout(
+              () => document.querySelector('[aria-label="New blank brief board"]')?.click(),
+              60
+            );
+          }}
+          onOpenExport={(mode) => setExportDialog({ mode })}
+          onReload={reloadActive}
+          presence={
+            <>
+              <StAvatar
+                initials={initialsOf(gitUser || 'you')}
+                hue="var(--accent)"
+                title={gitUser ? `${gitUser} (you)` : 'You'}
+              />
+              {agentActive && (
+                <StAvatar initials="C" hue="var(--presence-agent)" title="Claude · editing" />
+              )}
+            </>
+          }
         />
-        <Viewport
-          tabs={tabs}
-          activePath={activePath}
-          registerIframe={registerIframe}
-          systemData={systemData}
-          onOpenFromSystem={openTab}
-          onSelectDs={loadSystemData}
-          project={project}
-          cfg={cfg}
-        />
-        {activePath && activePath !== SYSTEM_TAB && (
-          <CommentBar activePath={activePath} comments={activeFileComments} />
-        )}
+        <div className="st-body">
+          <CollapsedRail
+            shown={!sidebarOpen}
+            onExpand={() => setSidebarOpen(true)}
+            onSearch={() => {
+              setSidebarOpen(true);
+              setTimeout(() => document.querySelector('.st-search input')?.focus(), 60);
+            }}
+          />
+          <Sidebar
+            groups={groups}
+            activePath={activePath}
+            activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
+            onOpen={openTab}
+            onOpenSystem={openSystem}
+            wsConnected={wsConnected}
+            search={search}
+            setSearch={setSearch}
+            commentsByFile={commentsByFile}
+            showHidden={showHidden}
+            sectionsExpanded={sectionsExpanded}
+            onToggleSection={toggleSection}
+            onNewBoard={createBoard}
+            onDeleteBoard={deleteBoard}
+            collapsed={!sidebarOpen}
+            onCollapse={() => setSidebarOpen(false)}
+          />
+          <div className="main">
+            <Viewport
+              tabs={tabs}
+              activePath={activePath}
+              registerIframe={registerIframe}
+              systemData={systemData}
+              onOpenFromSystem={openTab}
+              onSelectDs={loadSystemData}
+              project={project}
+              cfg={cfg}
+            />
+          </div>
+          {/* Right dock — one panel at a time. Inspector takes precedence when
+              open (T6); else the comments panel. */}
+          {inspectorOpen ? (
+            <InspectorPanel selected={selected} onClose={() => setInspectorOpen(false)} />
+          ) : commentsPanelOpen ? (
+            <CommentsPanel
+              commentsByFile={commentsByFile}
+              filter={commentsFilter}
+              setFilter={setCommentsFilter}
+              activePath={activePath}
+              focusedId={focusedCommentId}
+              onJump={jumpToComment}
+              onResolve={resolveComment}
+              onReopen={reopenComment}
+              onDelete={deleteComment}
+            />
+          ) : null}
+        </div>
         <StatusBar
           activePath={activePath}
           selected={selected}
@@ -2964,20 +4108,59 @@ function App() {
           syncStatus={syncStatus}
         />
       </div>
-      {commentsPanelOpen && (
-        <CommentsPanel
-          commentsByFile={commentsByFile}
-          filter={commentsFilter}
-          setFilter={setCommentsFilter}
+      <CommandPalette
+        open={paletteOpen}
+        onClose={() => setPaletteOpen(false)}
+        actions={paletteActions}
+      />
+      {exportDialog && (
+        <ExportDialog
+          mode={exportDialog.mode}
+          initialScope={exportDialog.scope}
           activePath={activePath}
-          focusedId={focusedCommentId}
-          onJump={jumpToComment}
-          onResolve={resolveComment}
-          onReopen={reopenComment}
-          onDelete={deleteComment}
+          onClose={() => setExportDialog(null)}
         />
       )}
-      <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
+      <HelpModal
+        open={helpOpen}
+        onClose={() => setHelpOpen(false)}
+        onStartTour={() => {
+          setHelpOpen(false);
+          startTour(USAGE_TOUR);
+        }}
+      />
+      <WhatsNewPanel wn={whatsNew} onStartTour={startTour} />
+      {usageNudge && !tourSteps && (
+        <div className="mdcc-tour-nudge" role="status" aria-live="polite">
+          <div className="mdcc-tour-nudge__body">
+            New here? Take a 60-second tour of the canvas browser.
+          </div>
+          <button
+            type="button"
+            className="mdcc-tour-nudge__cta"
+            onClick={() => {
+              markUsageSeen();
+              startTour(USAGE_TOUR);
+            }}
+          >
+            Start
+          </button>
+          <button
+            type="button"
+            className="mdcc-tour-nudge__skip"
+            aria-label="Dismiss"
+            onClick={markUsageSeen}
+          >
+            ×
+          </button>
+        </div>
+      )}
+      <TourOverlay
+        steps={tourSteps ?? []}
+        open={!!tourSteps}
+        onClose={() => setTourSteps(null)}
+        onComplete={markUsageSeen}
+      />
     </div>
   );
 }