synabun 2.0.10 → 2.2.0

package/neural-interface/public/shared/ui-tutorial-layout.js

@@ -1,8 +1,6 @@
-// Pure viewport geometry; no storage, DOM or product state.
-const MARGIN = 16;   // the note keeps this far from the viewport edges
-const GAP = 56;      // room for the arrow between the note and its target
-const CLEAR = 32;    // how far the note stays from chrome it steps aside for (the arrow still fits)
+// Pure viewport geometry the Workspace tour asks of a control's rect; no storage, DOM or product state.
 
+/** The rect is on screen, whole: a control the tour may ring and point at. */
 export function visibleRect(rect, width, height) {
   return !!rect && rect.width > 0 && rect.height > 0 && rect.left >= 0 && rect.top >= 0
     && rect.right <= width && rect.bottom <= height;
@@ -13,23 +11,7 @@ export function overlaps(a, b, gap = 0) {
     && a.top < b.bottom + gap && a.bottom > b.top - gap;
 }
 
-export function overlapArea(a, b) {
-  return Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left))
-    * Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
-}
-
-// How much of the straight line from a to b runs inside rect (Liang–Barsky clipping).
-export function lengthInside(a, b, rect) {
-  const dx = b.x - a.x, dy = b.y - a.y;
-  let t0 = 0, t1 = 1;
-  for (const [p, q] of [[-dx, a.x - rect.left], [dx, rect.right - a.x], [-dy, a.y - rect.top], [dy, rect.bottom - a.y]]) {
-    if (p === 0) { if (q < 0) return 0; continue; }
-    const t = q / p;
-    if (p < 0) t0 = Math.max(t0, t); else t1 = Math.min(t1, t);
-  }
-  return t1 > t0 ? (t1 - t0) * Math.hypot(dx, dy) : 0;
-}
-
+/** One rect around several (a run of controls: the effort and permission pills). */
 export function unionRect(rects) {
   const list = rects.filter(Boolean);
   if (!list.length) return null;
@@ -37,99 +19,3 @@ export function unionRect(rects) {
   const right = Math.max(...list.map(r => r.right)), bottom = Math.max(...list.map(r => r.bottom));
   return { left, top, right, bottom, width: right - left, height: bottom - top };
 }
-
-// A compact, squarish target gets a ring; anything long or tall gets a box that hugs it.
-export function outlineShape(rect) {
-  const long = Math.max(rect.width, rect.height), short = Math.min(rect.width, rect.height);
-  return long <= 72 && long / Math.max(short, 1) <= 1.6 ? 'ring' : 'box';
-}
-
-// The rect the outline is drawn on: the target plus its padding, kept inside the viewport.
-// A ring has to clear the corners of the rect it circles (√2 of each half side).
-export function outlineRect(rect, width, height, shape = outlineShape(rect)) {
-  const padX = shape === 'ring' ? rect.width * 0.21 + 3 : 5;
-  const padY = shape === 'ring' ? rect.height * 0.21 + 3 : 5;
-  const left = Math.max(3, rect.left - padX), top = Math.max(3, rect.top - padY);
-  const right = Math.min(width - 3, rect.right + padX), bottom = Math.min(height - 3, rect.bottom + padY);
-  return { left, top, right, bottom, width: right - left, height: bottom - top };
-}
-
-/**
- * Where the note goes. `avoid` rects are never covered (the open dropdown that
- * holds the target); `keep` rects are chrome the note leaves visible when there
- * is free space (title bar, toolbars, session pills). Candidates sit on each
- * side of the target, and of an `avoid` rect that contains it, at three alignments.
- * `near` is where the note is now: between two close calls, the shorter move wins.
- */
-export function placeNote(target, width, height, noteWidth, noteHeight, { avoid = [], keep = [], near = null } = {}) {
-  const w = Math.min(noteWidth, width - MARGIN * 2);
-  const h = Math.min(noteHeight, height - MARGIN * 2);
-  const clamp = (v, min, max) => Math.max(min, Math.min(v, max));
-  const box = (x, y, bw = w, bh = h) => {
-    const left = clamp(x, MARGIN, Math.max(MARGIN, width - bw - MARGIN));
-    const top = clamp(y, MARGIN, Math.max(MARGIN, height - bh - MARGIN));
-    return { left, top, right: left + bw, bottom: top + bh, width: bw, height: bh };
-  };
-  if (!target) return box((width - w) / 2, (height - h) / 2);
-
-  const boxes = [];
-  const anchors = [target, ...avoid.filter(r => overlaps(r, target))];
-  for (const a of anchors) {
-    for (const align of [0.5, 0, 1]) {
-      const y = target.top + (target.height - h) * align, x = target.left + (target.width - w) * align;
-      boxes.push(box(a.right + GAP, y), box(a.left - w - GAP, y), box(x, a.bottom + GAP), box(x, a.top - h - GAP));
-    }
-  }
-  // A candidate that covers chrome is also tried just clear of it, on each side: with room
-  // for the arrow, and tight for a narrow gap. Twice, for a spot wedged between two pieces.
-  const clearOf = (list) => list.flatMap(b => keep.filter(r => overlaps(b, r)).flatMap(r => [CLEAR, 12].flatMap(c => [
-    box(b.left, r.bottom + c), box(b.left, r.top - h - c), box(r.left - w - c, b.top), box(r.right + c, b.top)])));
-  const cleared = clearOf(boxes);
-  const unique = new Map([...boxes, ...cleared, ...clearOf(cleared)].map(b => [`${Math.round(b.left)},${Math.round(b.top)}`, b]));
-  const tc = { x: target.left + target.width / 2, y: target.top + target.height / 2 };
-  // The arrow should not run across the menu the target sits in, over its other entries,
-  // and would rather not cross other chrome on its way.
-  const arrow = (b) => {
-    const { from, to } = arrowPoints(b, target);
-    const across = (rects) => rects.reduce((sum, r) => sum + lengthInside(from, to, r), 0);
-    const length = Math.hypot(to.x - from.x, to.y - from.y);
-    // Short is good, but an arrow needs room to read as one.
-    return length + Math.max(0, 28 - length) * 6 + across(avoid) * 4 + across(keep) * 2;
-  };
-  // Lowest wins: covering nothing, then a short arrow that crosses nothing, then nearness.
-  const score = (b) => (overlaps(b, target, 20) ? 1e9 : 0)
-    + avoid.filter(r => overlaps(b, r, 12)).length * 1e8
-    + keep.reduce((sum, r) => sum + overlapArea(b, r), 0) * 10
-    + arrow(b)
-    + Math.hypot(b.left + b.width / 2 - tc.x, b.top + b.height / 2 - tc.y) * 0.1
-    + (near ? Math.hypot(b.left - near.left, b.top - near.top) * 0.1 : 0);
-  let best = [...unique.values()].map(b => ({ ...b, score: score(b) })).sort((a, b) => a.score - b.score)[0];
-  // Too narrow to sit beside the target: keep it exposed and let the note
-  // scroll in whichever space above or below is taller.
-  if (best.score >= 1e9) {
-    const below = height - target.bottom - 16 - MARGIN, above = target.top - 16 - MARGIN;
-    const room = Math.max(below, above);
-    if (room >= 96) {
-      const bh = Math.min(h, room);
-      best = box((width - w) / 2, below >= above ? target.bottom + 16 : target.top - 16 - bh, w, bh);
-    }
-  }
-  return best;
-}
-
-// From the note's facing edge to the target's, stopping outside its outline.
-export function arrowPoints(note, target, pad = 10) {
-  const clamp = (v, min, max) => Math.max(min, Math.min(v, Math.max(min, max)));
-  const tc = { x: target.left + target.width / 2, y: target.top + target.height / 2 };
-  const inset = 28;
-  if (note.left >= target.right || note.right <= target.left) {
-    const right = note.left >= target.right;
-    const y = clamp(tc.y, note.top + inset, note.bottom - inset);
-    return { from: { x: right ? note.left - 6 : note.right + 6, y },
-      to: { x: right ? target.right + pad : target.left - pad, y: clamp(y, target.top, target.bottom) } };
-  }
-  const below = note.top >= target.bottom;
-  const x = clamp(tc.x, note.left + inset, note.right - inset);
-  return { from: { x, y: below ? note.top - 6 : note.bottom + 6 },
-    to: { x: clamp(x, target.left, target.right), y: below ? target.bottom + pad : target.top - pad } };
-}

package/neural-interface/public/shared/ui-tutorial-preview.js

@@ -0,0 +1,103 @@
+// A session-free Assistant for the Workspace tour, when the panel has no session
+// to present on (no tab, or the tab is mid-conversation). These are the production
+// controls and the production empty state (the renderer, its hero rig, the
+// composer, the brain picker, the route chip, the computer switch, the mascot
+// director), with local state and no socket, run, preference or settings call.
+// Only one thing leaves it: a message the user sends from its composer, which the
+// sidepanel hands to the real Assistant (onSend) after the tour has closed.
+import { t } from './i18n.js';
+import { storage } from './storage.js';
+import { readStoredBrain } from './assistant/asst-state.js';
+import { injectAssistantStyles } from './assistant/asst-styles.js';
+import { createRenderer } from './assistant/asst-render.js';
+import { createMascotDirector } from './assistant/asst-mascot.js';
+import { createBrainPicker } from './assistant/asst-brain-picker.js';
+import { createComposer } from './assistant/asst-composer.js';
+import { createComputerToggle } from './assistant/asst-computer.js';
+import { createRouteModeControl } from './assistant/asst-route.js';
+
+const macLike = () => /Mac/i.test(navigator.platform || navigator.userAgent || '');
+
+export function createTutorialPreview(panel, { onSend = () => {} } = {}) {
+  injectAssistantStyles();
+  const viewport = document.createElement('div');
+  viewport.className = 'asp-viewport active tour-preview';
+  viewport.innerHTML = `<div class="asst-root" data-status="idle"><div class="asst-transcript" role="log" aria-live="off" tabindex="0"></div><div class="asst-announce" role="status" aria-live="polite" aria-atomic="true"></div><div class="asst-bottom"><div class="asst-composer-host"></div></div></div>`;
+  const bar = document.createElement('div');
+  bar.className = 'asp-tab-bar active tour-preview';
+  bar.innerHTML = '<div class="asst-bar"><div class="asst-bar-left"><div class="asst-bar-group" data-group="route"></div><div class="asst-bar-group" data-group="context"></div><div class="asst-bar-group" data-group="computer"></div></div><div class="asst-bar-right"></div></div>';
+  panel.querySelector('.asp-body').append(viewport);
+  panel.querySelector('.asp-bar-slot').append(bar);
+  const root = viewport.querySelector('.asst-root');
+  const transcript = root.querySelector('.asst-transcript');
+  transcript.setAttribute('aria-label', t('assistant.transcript'));
+  let brain = readStoredBrain(storage);
+  let director = null;
+  let picker = null;
+  let composer = null;
+  const computerShown = macLike();
+  const renderer = createRenderer(transcript, {
+    t,
+    emptySuggestions: () => [
+      ...(computerShown ? [{ id: 'computer', label: t('assistant.empty.suggestComputer'), template: t('assistant.empty.templateComputer') }] : []),
+      { id: 'web', label: t('assistant.empty.suggestWeb'), template: t('assistant.empty.templateWeb') },
+      { id: 'schedule', label: t('assistant.empty.suggestSchedule'), template: t('assistant.empty.templateSchedule') },
+      { id: 'remember', label: t('assistant.empty.suggestRemember'), template: t('assistant.empty.templateRemember') },
+    ],
+    onSuggestion: (template) => composer?.fillTemplate(template),
+    mountEmptyProject: (slot) => picker?.mountEmptyProject(slot),
+    unmountEmptyControls: () => picker?.mountEmptyProject(null),
+    onMascotChange: () => director?.retarget(),
+  });
+  composer = createComposer(root.querySelector('.asst-composer-host'), {
+    t,
+    onDraftChange: (text) => renderer.setDrafting?.(!!String(text || '').trim()),
+    onFocusChange: (focused) => { if (focused) director?.touch(); },
+    onSubmit: (payload) => {
+      const text = String(payload?.text || '').trim();
+      if (text) onSend(text);
+    },
+    onToast: () => {},
+  });
+  picker = createBrainPicker({ brain: composer.el.querySelector('.asst-composer-brain'), context: bar.querySelector('[data-group="context"]') }, {
+    t,
+    mascot: () => director,
+    getBrain: () => brain,
+    getRunning: () => false,
+    // Only catalog defaults can change this isolated brain; nothing is saved.
+    onChange: (next, meta) => { if (meta?.silent) brain = next; },
+    menuPlacement: 'auto',
+  });
+  const route = createRouteModeControl(bar.querySelector('[data-group="route"]'), { t });
+  route.setVisible(true);
+  const computer = createComputerToggle(bar.querySelector('[data-group="computer"]'), { t });
+  computer.set({ visible: computerShown, enabled: false, supported: computerShown, setupState: 'ready' });
+  director = createMascotDirector({ getTarget: () => renderer.mascot(), caret: () => composer?.caretPoint?.() || null });
+  try { picker.render(); } catch { /* the pills fill in when the catalog arrives */ }
+  picker.refresh?.().then(() => picker.render()).catch(() => {});
+  renderer.showEmpty();
+  return {
+    host: {
+      root,
+      transcript,
+      announcer: root.querySelector('.asst-announce'),
+      bar,
+      renderer,
+      director,
+      composer,
+      live: false,
+      computer: computerShown,
+      focusComposer: () => composer.focus(),
+    },
+    destroy() {
+      director.destroy();
+      picker.destroy();
+      composer.destroy();
+      route.destroy();
+      computer.destroy();
+      renderer.destroy?.();
+      viewport.remove();
+      bar.remove();
+    },
+  };
+}

package/neural-interface/public/shared/ui-tutorial-steps.js

@@ -1,5 +1,6 @@
-// The storyboard is shared by 2D and 3D. Copy lives in the `tutorial` namespace
-// of i18n/<locale>.json; this file only says what each step points at.
+// The project-exploration setup (ui-tutorial.js openSetup) and the exploration
+// prompt Settings → Projects shares. The Workspace tour's storyboard is
+// public/shared/tour/tour-beats.js.
 export function buildExplorePrompt(projectSlug) {
   const cat = projectSlug || 'project';
   const catProject = `${cat}-project`;
@@ -69,66 +70,3 @@ export const ONBOARDING_STEPS = [
   { id: 'onboarding-project-picker', kind: 'project' },
   { id: 'onboarding-memory-explain', kind: 'launch' },
 ];
-
-// A feature step:
-//   targets  ordered alternatives, [selector, copyKey = 'body', lastSelector?]. The first one on
-//            screen is annotated and its copy shown; `lastSelector` widens the outline to a run
-//            of controls. None on screen: the note stays, with the navigation.
-//   menu     a menubar dropdown opened while the step shows (closed again after); an object
-//            names it per variant ({ '3d': 'apps' }: none in the other).
-//   submenu  a submenu of that dropdown opened too, by its data-submenu name, same forms as `menu`.
-//   panel    'assistant' shows the Assistant panel for the step when that starts nothing
-//            (see assistantPanelPeekable); otherwise the last target, its button, is used.
-//   copy     per-variant copy key for the first target ({ '2d': 'body2d' }).
-const ASSISTANT_BUTTON = ['#topright-assistant-panel-btn', 'closed'];
-const ACTIVE_TAB = '#assistant-panel.open .asp-viewport.active';
-const ACTIVE_BAR = '#assistant-panel.open .asp-tab-bar.active';
-
-// With the workspace tools hidden (the toolbar's toggle) their controls are off screen, and the step outlines the
-// toggle that shows them.
-const TOOLS_TOGGLE = ['#topright-tools-btn'];
-
-export const FEATURE_STEPS = [
-  { id: 'explain-memory-explorer', chapter: 'memory', targets: [['#topright-memory-explorer-btn'], TOOLS_TOGGLE] },
-  // 3D: the Map submenu of Apps. 2D: the Graph menu.
-  { id: 'explain-graph', chapter: 'memory', menu: { '3d': 'apps' }, submenu: { '3d': 'map' }, copy: { '2d': 'body2d' },
-    targets: [['#menu-map-label', 'body', '#menu-map-rebuild'], ['[data-menu="graph"] > .menubar-label', 'body2d']] },
-  { id: 'explain-focus', chapter: 'workspace', targets: [['#wb-toolbar'], ['#titlebar-viz-toggle', 'graph']] },
-  { id: 'explain-workspaces', chapter: 'workspace', targets: [['#ws-indicator'], TOOLS_TOGGLE] },
-  { id: 'explain-terminals', chapter: 'tools', menu: 'apps', targets: [['#menu-terminal-claude', 'body', '#menu-terminal-opencode']] },
-  { id: 'explain-browser', chapter: 'tools', menu: 'apps', targets: [['#menu-terminal-browser']] },
-  { id: 'explain-side-panel', chapter: 'tools', targets: [['#topright-claude-panel-btn', 'body', '#topright-opencode-panel-btn']] },
-  { id: 'explain-automations', chapter: 'automation', menu: 'automations', targets: [['#menu-open-automation-studio']] },
-  { id: 'explain-schedules', chapter: 'automation', targets: [['#menubar-schedules-btn']] },
-  { id: 'assistant-start', chapter: 'assistant', panel: 'assistant', targets: [[`${ACTIVE_TAB} .asst-input`], ASSISTANT_BUTTON] },
-  { id: 'assistant-tools', chapter: 'assistant', panel: 'assistant', targets: [[`${ACTIVE_BAR} .asst-computer-toggle`], ASSISTANT_BUTTON] },
-  { id: 'assistant-route', chapter: 'assistant', panel: 'assistant', targets: [[`${ACTIVE_BAR} .asst-route-chip`], ASSISTANT_BUTTON] },
-  { id: 'assistant-track', chapter: 'assistant', panel: 'assistant',
-    targets: [[`${ACTIVE_TAB} .asst-usage-strip`], [`${ACTIVE_BAR} .asst-act-more`, 'more'], ASSISTANT_BUTTON] },
-  { id: 'explain-help', chapter: 'help', targets: [['#titlebar-tutorial-btn']] },
-];
-
-export const SKIP_HINT = { id: 'skip-hint', chapter: 'help', targets: [['#titlebar-tutorial-btn']] };
-
-export const CHAPTERS = [...new Set(FEATURE_STEPS.map(s => s.chapter))];
-
-export const TUTORIAL_STEPS = [...ONBOARDING_STEPS, { id: 'welcome', kind: 'welcome' }, ...FEATURE_STEPS];
-
-const WELCOME = TUTORIAL_STEPS.findIndex(s => s.id === 'welcome');
-
-// Existing numeric cursors migrate to retained step ids. The old onboarding
-// indices never make a returning user repeat CLI/model/project choices.
-export function resumeIndex(value, includeOnboarding = false) {
-  const direct = TUTORIAL_STEPS.findIndex(s => s.id === value);
-  if (direct >= 0) return includeOnboarding ? direct : Math.max(WELCOME, direct);
-  const legacy = ['onboarding-explore', 'onboarding-token-warning', 'onboarding-cli-picker', 'onboarding-model-picker',
-    'onboarding-project-picker', 'onboarding-memory-explain', 'welcome', 'explain-sessions', 'explain-gallery',
-    'explain-cost', 'explain-help', 'explain-focus', 'explain-fullscreen', 'explain-clock', 'explain-trash', 'explain-grid',
-    'explain-tile', 'explain-keybinds', 'explain-memory-explorer', 'explain-file-explorer', 'explain-bookmarks',
-    'explain-share', 'explain-workspaces', 'explain-side-panel', 'explain-menubar', 'explain-whiteboard-toolbar', 'feedback'];
-  if (value != null && /^\d+$/.test(value)) {
-    const mapped = TUTORIAL_STEPS.findIndex(s => s.id === legacy[Number(value)]);
-    return mapped >= WELCOME ? mapped : WELCOME;
-  }
-  return includeOnboarding ? 0 : WELCOME;
-}

package/neural-interface/public/shared/ui-tutorial.css

@@ -1,102 +1,49 @@
-/* The workspace tour: handwriting on the board. The strokes (outlines, arrow,
-   underline) are SVG drawn by ui-tutorial-draw.js; this file styles the note.
-   Colours are the Style Guide's dark semantic roles. */
-#wb-tutorial-dom {
-  --tour-paper: var(--color-dark-background, #0e141c);   /* opaque: the handwriting stays AA over the graph, a menu or a panel */
-  --tour-text: var(--color-dark-text, #f0f3f7);
-  --tour-muted: var(--color-dark-text-muted, #8897ac);
-  --tour-accent: var(--color-dark-primary, #6da4ff);
-  --tour-on-accent: var(--color-dark-on-primary, #0e141c);
-  --tour-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
-  --tour-ease: cubic-bezier(0.2, 0, 0, 1);
-  position: fixed; inset: 0; z-index: 500001; pointer-events: none;
-  font: 14px/1.5 Inter, system-ui, sans-serif; color: var(--tour-text);
-}
-#wb-tutorial {
-  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 500002;
-  pointer-events: none; overflow: hidden;
-}
-#wb-tutorial path { filter: drop-shadow(0 1px 2px rgba(14, 20, 28, 0.9)); }
-#wb-tutorial g { transition: opacity 120ms linear; }
-#wb-tutorial g.tour-leaving { opacity: 0; }
-
-/* No border: the outline is sketched around the note by the drawing engine. */
-.tour-note {
-  position: absolute; left: 0; top: 0; box-sizing: border-box;
-  width: 480px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
-  overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
-  padding: 20px 26px 16px; border-radius: 18px 22px 16px 24px / 22px 16px 24px 18px;
-  background: var(--tour-paper); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
-  pointer-events: auto; opacity: 0; visibility: hidden;
-  transition: transform 250ms var(--tour-ease), opacity 200ms linear;
-}
-.tour-note.tour-placed { opacity: 1; visibility: visible; }
-.tour-note.tour-snap { transition: opacity 200ms linear; }
-.tour-note:focus { outline: none; }
-#wb-tutorial-dom [hidden] { display: none !important; }
-
-.tour-progress { display: flex; align-items: center; gap: 12px; color: var(--tour-muted); font-size: 12px; letter-spacing: 0.01em; }
-.tour-dots { display: flex; gap: 4px; margin-left: auto; }
-.tour-dots span { width: 16px; height: 3px; border-radius: 3px 2px 3px 2px; background: currentColor; opacity: 0.45; }
-.tour-dots span.current { background: var(--tour-accent); opacity: 1; }
-.tour-note h2 {
-  margin: 8px 0 14px; color: var(--tour-text);
-  font: 700 34px/1.1 var(--tour-hand); overflow-wrap: anywhere;
-}
-.tour-copy { margin: 0; font: 400 26px/1.3 var(--tour-hand); overflow-wrap: anywhere; }
-.tour-word { display: inline-block; animation: tour-write 180ms var(--tour-ease) both; }
-@keyframes tour-write { from { opacity: 0; transform: translateY(3px); } }
-.tour-status { margin: 12px 0 0; color: var(--tour-muted); font-size: 14px; }
-.tour-status:empty { display: none; }
-.tour-extra:empty { display: none; }
-.tour-extra { margin-top: 16px; animation: tour-fade 200ms linear 500ms both; }
-@keyframes tour-fade { from { opacity: 0; } }
-
-/* Controls: chalk-drawn buttons, native semantics. */
-.tour-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
-#wb-tutorial-dom button {
-  min-height: 44px; padding: 4px 18px; cursor: pointer;
-  font: 700 22px/1.1 var(--tour-hand); color: var(--tour-text);
-  background: transparent; border: 1.5px solid rgba(240, 243, 247, 0.62);
-  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
-  transition: border-color 150ms linear, background-color 150ms linear, color 150ms linear;
-}
-#wb-tutorial-dom button:hover:not(:disabled) { border-color: var(--tour-accent); color: var(--tour-accent); }
-#wb-tutorial-dom button.primary { color: var(--tour-on-accent); background: var(--tour-accent); border-color: var(--tour-accent); }
-#wb-tutorial-dom button.primary:hover:not(:disabled) { color: var(--tour-on-accent); background: #9dc3ff; border-color: #9dc3ff; }
-#wb-tutorial-dom button:disabled { opacity: 0.5; cursor: default; }
-#wb-tutorial-dom button:focus-visible, #wb-tutorial-dom select:focus-visible {
-  outline: 2px solid var(--tour-accent); outline-offset: 3px;
-}
-#wb-tutorial-dom button.primary:focus-visible { outline-color: var(--tour-text); }
-#wb-tutorial-dom button.tour-link {
-  min-height: 44px; padding: 4px 6px; border-color: transparent; color: var(--tour-muted);
-  text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 1px; text-underline-offset: 4px;
-}
-#wb-tutorial-dom button.tour-link:hover { color: var(--tour-text); border-color: transparent; }
-.tour-progress button.tour-link { min-height: 24px; padding: 0 4px; font-size: 18px; }
-.tour-nav .tour-skip { margin-left: auto; }
-.tour-key-hint { margin: 10px 0 0; color: var(--tour-muted); font-size: 12px; }
-
-/* First-run setup. */
-.tour-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
-#wb-tutorial-dom .tour-choice { text-align: start; overflow-wrap: anywhere; }
-#wb-tutorial-dom .tour-choice[aria-pressed="true"] { border-color: var(--tour-accent); color: var(--tour-accent); }
-.tour-field { display: grid; gap: 6px; color: var(--tour-muted); font-size: 12px; }
-.tour-field + button, .tour-status + button { margin-top: 12px; }
-#wb-tutorial-dom select {
-  width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; cursor: pointer;
-  font: 400 14px/1.5 Inter, system-ui, sans-serif; color: var(--tour-text);
-  background: #1b232e; border: 1px solid #64748b; border-radius: 4px;
-}
-#wb-tutorial-dom select:disabled { opacity: 0.5; cursor: default; }
-
-@media (max-width: 600px) {
-  .tour-note { padding: 16px 18px 12px; }
-  .tour-note h2 { font-size: 30px; }
-  .tour-copy { font-size: 24px; }
-  .tour-options { grid-template-columns: 1fr; }
-}
+/* The project-exploration setup (ui-tutorial.js openSetup): a small dialog in the
+   Assistant's own tokens. The tour itself is public/shared/tour/tour.css. */
+.tour-setup-overlay {
+  position: fixed; inset: 0; z-index: 500001; display: grid; place-items: center; padding: 16px;
+  background: color-mix(in srgb, var(--asst-scrim, #000) 45%, transparent);
+  font: calc(13px * var(--font-scale, 1))/1.5 var(--ff-body, Inter, system-ui, sans-serif);
+  color: var(--asst-text);
+  animation: tour-setup-in var(--asst-dur-moderate) var(--asst-ease-enter) both;
+}
+@keyframes tour-setup-in { from { opacity: 0; } }
+.tour-setup {
+  box-sizing: border-box; width: 420px; max-width: 100%; max-height: calc(100dvh - 32px); overflow: auto;
+  display: grid; gap: 10px; padding: 18px 20px 14px;
+  border-radius: var(--asst-r-card); border: 1px solid var(--asst-line-2);
+  background: var(--asst-card); box-shadow: var(--asst-popover-shadow, 0 18px 48px rgba(0, 0, 0, .5));
+  animation: tour-setup-rise var(--asst-dur-slow) var(--asst-ease-emphasized) both;
+}
+@keyframes tour-setup-rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
+.tour-setup:focus { outline: none; }
+.tour-setup [hidden] { display: none !important; }
+.tour-setup-progress { color: var(--asst-text-3); font-size: 11px; }
+.tour-setup-title { margin: 0; font: 600 20px/1.25 var(--ff-heading, 'Space Grotesk', sans-serif); color: var(--asst-text); overflow-wrap: anywhere; }
+.tour-setup-copy { margin: 0; color: var(--asst-text-2); line-height: 1.6; overflow-wrap: anywhere; }
+.tour-setup-extra { display: grid; gap: 10px; }
+.tour-setup-extra:empty { display: none; }
+.tour-setup-field { display: grid; gap: 6px; }
+.tour-setup-label { color: var(--asst-text-3); font-size: 12px; }
+.tour-setup-status { margin: 0; color: var(--asst-text-3); font-size: 12px; }
+.tour-setup-status:empty { display: none; }
+.tour-setup-options { display: flex; flex-wrap: wrap; gap: 6px; }
+.tour-setup-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
+.tour-setup-btn, .tour-setup-choice {
+  display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px;
+  border: 0; border-radius: var(--asst-pill-r-md); background: var(--asst-fill-1); box-shadow: inset 0 0 0 1px var(--asst-line);
+  color: var(--asst-text-2); font: 500 12px/1 var(--ff-body, Inter, system-ui, sans-serif); cursor: pointer;
+  transition: background-color var(--asst-dur-fast) var(--asst-ease-standard), color var(--asst-dur-fast) var(--asst-ease-standard), transform var(--asst-dur-instant) var(--asst-ease-standard);
+}
+.tour-setup-btn:hover:not(:disabled), .tour-setup-choice:hover { background: var(--asst-fill-2); color: var(--asst-text); }
+.tour-setup-btn:active:not(:disabled), .tour-setup-choice:active { transform: scale(.97); }
+.tour-setup-btn:disabled { opacity: .45; cursor: default; }
+.tour-setup-btn:focus-visible, .tour-setup-choice:focus-visible { outline: 2px solid var(--asst-brand); outline-offset: 2px; }
+.tour-setup-primary { background: var(--asst-pill-on-fill); box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring); color: var(--asst-text); }
+.tour-setup-link { background: transparent; box-shadow: none; color: var(--asst-text-3); }
+.tour-setup-nav .tour-setup-btn:first-child { margin-right: auto; }
+.tour-setup-choice[aria-pressed="true"] { background: var(--asst-pill-on-fill); box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring); color: var(--asst-text); }
 @media (prefers-reduced-motion: reduce) {
-  #wb-tutorial *, #wb-tutorial-dom, #wb-tutorial-dom * { animation: none !important; transition: none !important; }
+  .tour-setup-overlay, .tour-setup { animation: none; }
+  .tour-setup-btn, .tour-setup-choice { transition: none; }
 }