crewforth 3.2.0-rc.1 → 3.2.0-rc.10

package/kit/studio/web/app.js

@@ -14,7 +14,7 @@ import {
   summaryChips, sessionStatus, sessionName, sessionSub, ago, matchesSession, highlight, badgeFor,
   liveSessions, machines, seenAgo, isFirstRun,
 } from './nav.js';
-import { liveness, offlineNote } from './liveness.js';
+import { liveness, offlineNote, staleServerNote } from './liveness.js';
 import { attention, settle, AUTO } from './graph-plan.js';
 import { summaryRows, usageLine, costNote } from './usage.js';
 import { ServerClock, queue, settled, terminalWait, OUTCOME_WORD } from './approvals.js';
@@ -29,6 +29,7 @@ import { cardOf, cardLines, workSteps, outsideRouting } from './models-plan.js';
 import { fitLevel, runsOver } from './toolbar-fit.js';
 import { roleName, shownType, modelFamily } from './names.js';
 import { shortcutOf } from './keys.js';
+import { qrSvg } from './qr.js';
 import { SESSION_MODES } from './convo.js';
 import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, backgroundLines, modelLines, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
 
@@ -113,12 +114,37 @@ const getJson = async (p) => {
     heard.failed = true;
     throw e;
   }
-  if (!r.ok) throw new Error(`HTTP ${r.status}`);
+  if (!r.ok) throw await statusError(r);
   const body = await r.json();
   heardNow();
   return body;
 };
 
+// What the server said about this page's link: a viewer whose link hides transcripts is sent no transcript text.
+let transcriptsHidden = false;
+
+/** The error for an answer with an error status. A viewer link whose eight hours are up covers the page, once. */
+async function statusError(r) {
+  if (r.status === 401) {
+    let b = null; try { b = await r.json(); } catch { /* not JSON */ }
+    if (b?.expired) showExpired();
+  }
+  if (r.status === 403 && transcriptsHidden) return new Error('Transcripts are hidden on this link');
+  return new Error(`HTTP ${r.status}`);
+}
+
+function showExpired() {
+  if (document.getElementById('expired')) return;
+  const box = document.createElement('div');
+  box.id = 'expired';
+  box.className = 'expired';
+  box.setAttribute('role', 'alert');
+  const h = document.createElement('h1'); h.textContent = 'Session expired';
+  const p = document.createElement('p'); p.textContent = 'Viewer links last eight hours. Ask for a new one on the machine running Studio.';
+  box.append(h, p);
+  document.body.append(box);
+}
+
 /* ---------------------------------------------------------------- theme */
 
 try { migrateStorage(localStorage); } catch { /* blocked storage */ }
@@ -715,7 +741,8 @@ async function loadMap(force = false) {
   mapBusy = true;
   let data;
   const q = `session=${encodeURIComponent(asked)}${mapCompare ? `&compare=${encodeURIComponent(mapCompare)}` : ''}`;
-  try { data = await getJson(`/api/map?${q}`); } catch (e) { data = { measured: false, reason: e.message, others: [] }; }
+  // A server older than this page has no Map route: say that, not its 404.
+  try { data = await getJson(`/api/map?${q}`); } catch (e) { data = { measured: false, reason: restartNote ?? e.message, others: [] }; }
   finally { mapBusy = false; }
   if (asked !== current) return;
   mapFor = asked;
@@ -2057,6 +2084,9 @@ let handed = null;            // the link of the viewer just added: the server s
 async function pollRemote() {
   if (role !== 'owner') return;
   try { remote = await getJson('/api/remote'); } catch { return; }
+  // The link shown once leaves with its viewer: revoked from elsewhere (the API, another tab) or past its eight
+  // hours, it no longer opens anything, and a QR code left on screen would say it does.
+  if (handed && !(remote.viewers ?? []).some((v) => v.id === handed.id)) handed = null;
   paintMachines();
 }
 
@@ -2073,16 +2103,25 @@ async function remoteWrite(method, path, body) {
   }
 }
 
+/** A time today or tomorrow as the clock on the wall says it, e.g. 23:40. */
+const clockTime = (ms) => (Number.isFinite(ms) ? new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '—');
+
+let showTranscripts = false;   // the owner's choice for the next viewer: transcripts stay hidden unless ticked
+
 async function addViewer(button) {
   button.disabled = true;
-  const res = await remoteWrite('POST', '/api/remote', {});
+  const res = await remoteWrite('POST', '/api/remote', { transcripts: showTranscripts });
   if (!res.ok) {
     toast(`No viewer added — ${res.reason ?? 'no reason given'}`);
     button.disabled = false;
     return;
   }
   remote = { ...(remote ?? {}), viewers: res.viewers ?? [] };
-  handed = { id: res.viewer.id, label: res.viewer.label, url: `${location.origin}/?token=${encodeURIComponent(res.viewer.token)}` };
+  // The Wi-Fi link when the server listens on one; this machine's own address only when it found no Wi-Fi address.
+  const wifi = res.lanUrls?.[0] ?? null;
+  handed = { id: res.viewer.id, label: res.viewer.label, wifi, expiresAt: res.viewer.expiresAt, transcripts: res.viewer.transcripts,
+    url: wifi ?? `${location.origin}/?token=${encodeURIComponent(res.viewer.token)}`, lanErrors: res.lan?.errors ?? [] };
+  showTranscripts = false;
   paintMachines();
 }
 
@@ -2113,6 +2152,7 @@ function viewerRow(v) {
     ? `${seenAgo(v.lastSeenAt, Date.now())} · ${v.requests} request${v.requests === 1 ? '' : 's'}${v.open ? ' · watching now' : ''}`
     : 'link not opened yet';
   row.append(node('div', 'sub srow-sub', seen));
+  row.append(node('div', 'sub srow-sub', `until ${clockTime(v.expiresAt)} · transcripts ${v.transcripts ? 'shown' : 'hidden'}${v.addresses?.length ? ` · from ${v.addresses.join(', ')}` : ''}`));
   return row;
 }
 
@@ -2130,9 +2170,24 @@ function remoteSection() {
   head.append(node('span', 'rv-title', 'Remote viewers'), node('span', 'row-fill'), add);
   box.append(head);
 
+  // Transcripts stay hidden on a new link unless this is ticked before Add viewer.
+  const opt = node('label', 'rv-opt');
+  const tick = document.createElement('input');
+  tick.type = 'checkbox'; tick.checked = showTranscripts;
+  tick.addEventListener('change', () => { showTranscripts = tick.checked; });
+  opt.append(tick, document.createTextNode(' Show transcripts on the next link'));
+  box.append(opt);
+
   if (handed) {
     const give = node('div', 'rv-give');
-    give.append(node('div', 'sub rv-say', `Link for ${handed.label}. Shown once; open it on the other device, through your tunnel.`));
+    give.append(node('div', 'sub rv-say', handed.wifi
+      ? `Link for ${handed.label}, shown once. Scan it with a phone on the same Wi-Fi. It lasts until ${clockTime(handed.expiresAt)}; transcripts ${handed.transcripts ? 'shown' : 'hidden'}.`
+      : `Link for ${handed.label}, shown once. No Wi-Fi address was found${handed.lanErrors.length ? ` (${handed.lanErrors.join('; ')})` : ''}, so it opens on this machine only.`));
+    if (handed.wifi) {
+      const code = node('div', 'rv-qr');
+      code.innerHTML = qrSvg(handed.wifi, { px: 3 });
+      give.append(code);
+    }
     const url = node('code', 'rv-url', handed.url);
     const copy = node('button', 'btn sm', 'Copy link');
     copy.type = 'button';
@@ -2149,7 +2204,7 @@ function remoteSection() {
   for (const v of list) box.append(viewerRow(v));
   if (!list.length) {
     box.append(node('div', 'sub rv-say',
-      'A viewer reads this panel from another device and changes nothing. The server stays on 127.0.0.1; the link opens through a tunnel you run.'));
+      'A viewer watches this panel from a phone on the same Wi-Fi and changes nothing. Its link lasts eight hours. With no viewer, the server listens on 127.0.0.1 only.'));
   }
   return box;
 }
@@ -2635,7 +2690,9 @@ if (typeof ResizeObserver !== 'undefined') new ResizeObserver(() => requestAnima
 // They survive a page reload as long as the server does.
 let ownedBusy = false;
 async function pollOwned() {
-  if (ownedBusy) return;
+  // A link that hides transcripts is refused the sessions the panel runs (their conversation is all transcript):
+  // asking every few seconds would only fill the machine's log with the same refusal.
+  if (ownedBusy || transcriptsHidden) return;
   ownedBusy = true;
   try {
     const r = await getJson('/api/owned');
@@ -2658,6 +2715,7 @@ chat.onPermissions = () => pollOwned();
    view is being shown in a window too narrow for it. Offline is said first. */
 
 let nextPollAt = null;
+let restartNote = null;          // staleServerNote(/api/health): the server runs older code than the page
 const stageNote = { text: node('span', 'stage-note-text'), retry: node('span', 'sub'), button: node('button', 'btn sm', 'Retry now') };
 stageNote.button.type = 'button';
 stageNote.button.addEventListener('click', () => retryNow());
@@ -2666,11 +2724,12 @@ el.stageNote.append(stageNote.text, stageNote.retry, node('span', 'row-fill'), s
 function paintStageNote() {
   const l = liveness(Date.now(), heard.okAt, heard.failed);
   const off = offlineNote(l.state, heard.okAt, nextPollAt, Date.now());
-  const warn = narrowWarning(view, phoneBand.matches);
+  // Offline first, then a server older than this page, then a window too narrow for the view.
+  const warn = restartNote ?? narrowWarning(view, phoneBand.matches);
   // The last picture stays on screen while the server is away, and is drawn as old.
   el.stage.dataset.offline = String(Boolean(off));
   el.stageNote.hidden = !off && !warn;
-  el.stageNote.dataset.kind = off ? 'offline' : 'narrow';
+  el.stageNote.dataset.kind = off ? 'offline' : restartNote ? 'restart' : 'narrow';
   stageNote.text.textContent = off ? off.text : (warn ?? '');
   stageNote.retry.textContent = off ? off.retry : '';
   stageNote.retry.hidden = !off;
@@ -2815,9 +2874,18 @@ pollFleet(); pollSessions(); pollOwned();
 // Who this page is to the server. A viewer's page says so and offers no way to start a session; the server
 // would refuse it either way.
 getJson('/api/health').then((h) => {
+  restartNote = staleServerNote(h);
+  // A Map read before this answer showed the old server's 404; read it again so it says why.
+  if (restartNote) { paintStageNote(); if (view === 'map') loadMap(true); }
   role = h.role === 'viewer' ? 'viewer' : 'owner';
+  transcriptsHidden = role === 'viewer' && h.transcripts === false;
   document.body.dataset.role = role;
-  document.getElementById('role').hidden = role !== 'viewer';
+  const badge = document.getElementById('role');
+  badge.hidden = role !== 'viewer';
+  if (transcriptsHidden) {
+    badge.textContent = 'Read-only · transcripts hidden';
+    badge.title = 'This link reads the panel and changes nothing; no transcript text is sent to it';
+  }
   if (role === 'owner') pollRemote(); else paintMachines();
 }).catch(() => { /* the Live indicator says the server is unreachable */ });
 setInterval(() => { nextPollAt = Date.now() + FLEET_POLL_MS; pollFleet(); }, FLEET_POLL_MS);

package/kit/studio/web/canvas.js

@@ -717,7 +717,10 @@ export class Canvas {
       // ran out of the card.
       p.bg = mk('div', 'cv-sub cv-indent cv-bg');
       p.bg.hidden = true;
-      el.append(row, p.name, p.sub, p.bg);
+      // Agent calls the model gate refused, which started no agent: a line of their own, the gate's words on hover.
+      p.refused = mk('div', 'cv-sub cv-indent cv-refused');
+      p.refused.hidden = true;
+      el.append(row, p.name, p.sub, p.bg, p.refused);
     } else if (it.kind === 'group') {
       el.classList.add('cv-group');
       p.tile = mk('span', 'cv-tile');
@@ -837,12 +840,21 @@ export class Canvas {
     p.name.title = p.name.textContent;
     const bits = [`${n.turns ?? 0} ${n.turns === 1 ? 'turn' : 'turns'}`];
     if (n.tokens != null) bits.push(`${fmtTokens(n.tokens)} ctx`);
+    if (n.context?.toolShare != null) bits.push(`${n.context.toolShare}% tool output`);
     p.sub.textContent = bits.join(' · ');
-    p.sub.title = p.sub.textContent;
+    // The share is of the text since the last compaction, in characters; the compactions are the transcript's own.
+    const lc = n.context?.lastCompact;
+    p.sub.title = [p.sub.textContent,
+      n.context?.toolShare != null ? `${n.context.toolShare}% of the text in context since the last compaction is tool output (characters, not tokens)` : null,
+      n.context?.compactions ? `compacted ${n.context.compactions}×${lc?.before != null ? `, last ${lc.trigger ?? ''} ${fmtTokens(lc.before)} → ${fmtTokens(lc.after)}` : ''}` : null].filter(Boolean).join('\n');
     // What the session has running that is not an agent: commands sent to the background.
     p.bg.hidden = !bg;
     p.bg.textContent = bg ? `${bg} in background` : '';
     p.bg.title = bg ? n.backgroundNow.map((c) => `In the background: ${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
+    const refused = n.refusedCalls ?? [];
+    p.refused.hidden = !refused.length;
+    p.refused.textContent = refused.length ? `${refused.length} refused by the model gate` : '';
+    p.refused.title = refused.map((r) => `${r.agent ?? 'an agent'}${r.model ? ` (${r.model})` : ''}: ${r.text}`).join('\n');
     el.title = 'Click to inspect this session';
     el.setAttribute('aria-label', `Session, ${st?.word ?? 'state not measured'}, ${p.name.textContent}, ${p.sub.textContent}`);
   }

package/kit/studio/web/chat.js

@@ -48,10 +48,76 @@ export function quickReplies(text) {
   return (opts.length >= 2 && opts.length <= 5 && /\?/.test(text)) ? opts : [];
 }
 
+/* ============================================== every open conversation === */
+
+/**
+ * One connection for every open conversation. A pane per EventSource reached the browser's six connections to a
+ * host at five panes beside the page's own stream, and from there a message sent and every request the page made
+ * waited for a pane to close (measured on Windows). The panes register here; the stream is opened again, with
+ * each session's last event number, whenever the set changes or the connection drops, so nothing is replayed
+ * twice and nothing is missed.
+ */
+export class OwnedStream {
+  constructor(api, { EventSourceImpl = globalThis.EventSource, retryMs = 1500 } = {}) {
+    this.api = api;
+    this.ES = EventSourceImpl;
+    this.retryMs = retryMs;
+    this.panes = new Map();     // session id -> pane
+    this.seq = new Map();       // session id -> the last event number taken
+    this.source = null;
+    this.timer = null;
+  }
+
+  attach(pane) { this.panes.set(pane.id, pane); this.#soon(0); }
+
+  detach(pane) {
+    if (this.panes.get(pane.id) !== pane) return;
+    this.panes.delete(pane.id); this.seq.delete(pane.id); this.#soon(0);
+  }
+
+  /** The URL the stream is opened at now: what a reconnect resumes from. */
+  url() {
+    const ids = [...this.panes.keys()];
+    const after = ids.map((id) => `${id}:${this.seq.get(id) ?? 0}`).join(',');
+    return this.api(`/api/owned-events?ids=${encodeURIComponent(ids.join(','))}&after=${encodeURIComponent(after)}`);
+  }
+
+  // Panes opened together (a page restoring its tabs) cost one reconnect, not one each.
+  #soon(ms) { clearTimeout(this.timer); this.timer = setTimeout(() => this.#open(), ms); }
+
+  #open() {
+    if (this.source) { this.source.close(); this.source = null; }
+    if (!this.panes.size) return;
+    const src = new this.ES(this.url());
+    const data = (e) => { try { return JSON.parse(e.data); } catch { return null; } };
+    src.addEventListener('state', (e) => { const d = data(e); if (d) this.panes.get(d.id)?.takeState(d.session); });
+    src.addEventListener('event', (e) => {
+      const d = data(e); const pane = d && this.panes.get(d.id);
+      if (!pane || !d.ev) return;
+      if (Number.isFinite(d.ev.seq)) {
+        if (d.ev.seq <= (this.seq.get(d.id) ?? 0)) return;    // already taken before a reconnect
+        this.seq.set(d.id, d.ev.seq);
+      }
+      pane.takeEvent(d.ev);
+    });
+    src.addEventListener('gone', (e) => { const d = data(e); if (d) this.panes.get(d.id)?.streamLost(); });
+    // The browser would reconnect at the same URL, from the same event numbers, and replay what was taken since.
+    // So the stream is closed and opened again here, from where each session is now.
+    src.onerror = () => {
+      if (this.source !== src) return;
+      for (const pane of this.panes.values()) pane.streamLost();
+      this.#soon(this.retryMs);
+    };
+    this.source = src;
+  }
+
+  close() { clearTimeout(this.timer); if (this.source) { this.source.close(); this.source = null; } this.panes.clear(); this.seq.clear(); }
+}
+
 /* ========================================================== one session === */
 
 class Pane {
-  constructor(session, { api, headers, onChange, onPermissions, hooks = {}, readOnly = false }) {
+  constructor(session, { api, headers, onChange, onPermissions, hub = null, hooks = {}, readOnly = false }) {
     this.api = api;
     this.headers = headers;
     this.onChange = onChange;
@@ -62,7 +128,8 @@ class Pane {
     this.readOnly = readOnly;
     this.session = session;
     this.id = session.sessionId;
-    this.source = null;
+    this.hub = hub;
+    this.connected = false;
     this.messages = [];
     this.streaming = null;
     this.permissions = [];
@@ -141,6 +208,7 @@ class Pane {
       this.note(`History not read: ${e.message}`, 'bad');
       return;
     }
+    if (conv?.transcriptsHidden) { this.note('Transcripts are hidden on this link', 'muted'); return; }
     if (conv?.measured === false) { this.note(`History not measured — ${conv.reason}`, 'bad'); return; }
 
     const frag = document.createDocumentFragment();
@@ -163,25 +231,22 @@ class Pane {
   }
 
   connect() {
-    if (this.source) return;
-    this.source = new EventSource(this.api(`/api/owned/${encodeURIComponent(this.id)}/events`));
-    this.source.addEventListener('state', (e) => {
-      try { this.session = JSON.parse(e.data); } catch { return; }
-      this.paintState();
-      this.onChange(this);
-    });
-    this.source.addEventListener('event', (e) => {
-      let ev;
-      try { ev = JSON.parse(e.data); } catch { return; }
-      this.absorb(ev.rec);
-    });
-    this.source.onerror = () => { this.streamBroken = true; this.onChange(this); };
+    if (this.connected || !this.hub) return;
+    this.connected = true;
+    this.hub.attach(this);
   }
 
   disconnect() {
-    if (this.source) { this.source.close(); this.source = null; }
+    if (!this.connected) return;
+    this.connected = false;
+    this.hub.detach(this);
   }
 
+  // What the shared stream hands this pane.
+  takeState(session) { if (!session) return; this.session = session; this.streamBroken = false; this.paintState(); this.onChange(this); }
+  takeEvent(ev) { this.streamBroken = false; this.absorb(ev.rec); }
+  streamLost() { this.streamBroken = true; this.onChange(this); }
+
   /* --------------------------------------------------------- ingestion */
 
   absorb(rec) {
@@ -495,9 +560,12 @@ class Pane {
     cont.type = 'button';
     cont.addEventListener('click', () => this.hooks.onContinue?.(this, cont));
     const contRow = el('div', 'chat-ro-row');
-    contRow.append(cont, el('span', 'sub',
-      'Continues it in Studio. If it is still open somewhere else, Studio starts a copy instead: '
-      + 'the original does not see this, and messages here never reach your terminal.'));
+    // Said before the press, from the server's own check (the one Continue here acts on): the same session, or a copy.
+    // Until the server answers, and if it cannot: the sentence true of both outcomes.
+    const FALLBACK = 'Continues it in Studio. If it is still open somewhere else, Studio starts a copy instead: '
+      + 'the original does not see this, and messages here never reach your terminal.';
+    const contText = el('span', 'sub', FALLBACK);
+    contRow.append(cont, contText);
 
     const term = el('button', 'btn sm', 'Open in terminal');
     term.type = 'button';
@@ -508,13 +576,34 @@ class Pane {
     const termRow = el('div', 'chat-ro-row');
     termRow.append(term, termText);
 
-    this.roEl.replaceChildren(lead, contRow, termRow);
+    // Back to the desktop app: the command, to copy and run where the app is.
+    const deskLine = el('code', 'chat-ro-cmd');
+    const deskCopy = el('button', 'btn sm', 'Copy');
+    deskCopy.type = 'button';
+    deskCopy.addEventListener('click', () => { if (deskLine.dataset.cmd) navigator.clipboard?.writeText(deskLine.dataset.cmd).then(() => { deskCopy.textContent = 'Copied'; }, () => {}); });
+    const deskText = el('span', 'sub');
+    deskText.append('Open it in the desktop app again: ', deskLine);
+    const deskRow = el('div', 'chat-ro-row');
+    deskRow.append(deskCopy, deskText);
+
+    this.roEl.replaceChildren(lead, contRow, termRow, deskRow);
 
-    // The command is the server's, read before anything runs. One that could not be worked out is said so.
+    // The commands are the server's, read before anything runs. One that could not be worked out is said so.
     fetch(this.api(`/api/session/${encodeURIComponent(this.id)}/terminal`), { cache: 'no-store' })
       .then((r) => r.json())
-      .then((r) => { line.textContent = r?.plan?.line ?? 'not measured — no working directory recorded'; })
-      .catch((e) => { line.textContent = `not read — ${e.message}`; });
+      .then((r) => {
+        line.textContent = r?.plan?.line ?? 'not measured — no working directory or session id recorded';
+        // On Windows the command is a PowerShell line (no one line works in cmd and PowerShell 5.1 both): say so.
+        deskLine.textContent = r?.desktop?.line ?? 'not measured — no working directory or session id recorded';
+        if (r?.desktop?.line) deskLine.dataset.cmd = r.desktop.line; else deskCopy.disabled = true;
+        if (r?.desktop?.shell === 'PowerShell') deskText.append(' (in PowerShell)');
+        contText.textContent = r?.continueAs === 'same'
+          ? 'Continues this same session in Studio: its id and history stay, and the desktop app or a terminal that opens it later sees what you add here. Nothing else has it open now.'
+          : r?.continueAs === 'copy'
+            ? 'It is open somewhere else right now, so Studio starts a copy: the original does not see this, and messages here never reach your terminal or the desktop app.'
+            : FALLBACK;
+      })
+      .catch((e) => { line.textContent = `not read — ${e.message}`; deskLine.textContent = `not read — ${e.message}`; deskCopy.disabled = true; });
   }
 
   paintState() {
@@ -591,6 +680,7 @@ export class Chat {
     this.headers = headers;
     this.hooks = hooks;
     this.panes = new Map();
+    this.hub = new OwnedStream(api);
     this.activeId = null;
     this.onActivate = () => {};
     // (pane, { pending }) — a session's waiting requests changed.
@@ -654,7 +744,7 @@ export class Chat {
     }
     if (!pane) {
       pane = new Pane(session, {
-        api: this.api, headers: this.headers, hooks: this.hooks, onChange: () => this.paintTabs(),
+        api: this.api, headers: this.headers, hooks: this.hooks, onChange: () => this.paintTabs(), hub: this.hub,
         onPermissions: (p, rec) => this.onPermissions(p, rec),
       });
       this.panesEl.append(pane.root);

package/kit/studio/web/graph-plan.js

@@ -276,8 +276,9 @@ export function tallestFor(paneHeight) {
   return Math.max(AUTO.tallest, fits);
 }
 
-/** A session's card: one line taller while it has commands running in the background, and never wider. */
-export const sessionHeight = (n) => SIZE.session.h + (n?.backgroundNow?.length ? SIZE.session.line : 0);
+/** A session's card: one line taller for commands running in the background, one for refused agent calls. */
+export const sessionHeight = (n) => SIZE.session.h + (n?.backgroundNow?.length ? SIZE.session.line : 0)
+  + (n?.refusedCalls?.length ? SIZE.session.line : 0);
 
 /* ----------------------------------------------------------------- plan --- */
 

package/kit/studio/web/liveness.js

@@ -64,3 +64,17 @@ function clock(ms) {
   const two = (n) => String(n).padStart(2, '0');
   return `${two(d.getHours())}:${two(d.getMinutes())}`;
 }
+
+/**
+ * Is the server older than the files it serves? The page is read from disk on every load; the server keeps the
+ * code it started with. After an update the two disagree, and a view the old server has no route for answered
+ * 404 (seen as "Not read — HTTP 404" on the Map view). /api/health says `code.changed` when the server's files
+ * changed since it started; a server with no `code` at all predates the field, and is older than this page.
+ * Returns the sentence to show, or null.
+ */
+export const RESTART_NOTE = 'Studio was updated after this server started, so it is running the old code. Restart it: stop it where it runs (Ctrl-C), then /crew-studio.';
+export function staleServerNote(health) {
+  if (!health || typeof health !== 'object') return null;
+  if (!health.code || typeof health.code !== 'object') return RESTART_NOTE;
+  return health.code.changed === true ? RESTART_NOTE : null;
+}

package/kit/studio/web/map-plan.js

@@ -1,14 +1,24 @@
 // What the Map view draws, worked out from a crew map. No page in it.
 //
 // The map is Crewforth's (server/lib/crew-map.js reads it). This file puts each node in a band, says which lines
-// a selection lights, orders the findings and words them. It invents no layer: a module whose place the map does
-// not show goes to "Unplaced", and a finding the scanner hides by default stays hidden until asked for.
+// a selection lights, orders the findings and words them. It invents no layer: a module's layer is the one /crew-map
+// wrote for it (citing the lines it rests on); without one, its band is what the scan shows of it, and a module whose
+// place the scan does not show goes to "Unplaced". A finding the scanner hides by default stays hidden until asked.
 
+// The layers /crew-map may write (eval/lib/crew-map/narrative.mjs LAYERS), set between the bands the scan alone
+// gives, so a map with no layer is drawn in the same order as before.
+export const LAYER_KEYS = ['ui', 'api', 'service', 'data', 'infra', 'tool', 'library'];
 export const BANDS = [
+  ['ui', 'UI'],
   ['clients', 'Clients'],
+  ['api', 'API'],
   ['entry', 'Entry points'],
+  ['service', 'Service'],
   ['core', 'Core'],
+  ['data', 'Data'],
   ['infra', 'Infrastructure'],
+  ['library', 'Library'],
+  ['tool', 'Tools'],
   ['external', 'External'],
   ['unplaced', 'Unplaced'],
 ];
@@ -37,8 +47,10 @@ export function findingModules(f, modules) {
  *   one that only calls endpoints → Clients
  *   one another module of this project references → Core · one with an entry point and nothing above → Entry points
  *   anything else → Unplaced, so a guess is never drawn as a fact.
+ * A module /crew-map gave a layer goes to that layer's band first.
  */
 export function bandOf(node, doc) {
+  if (node.kind === 'module' && LAYER_KEYS.includes(node.narrative?.layer)) return node.narrative.layer;
   if (node.kind === 'external') return 'external';
   if (node.kind === 'service') return 'infra';
   if (node.kind === 'client') return 'clients';
@@ -201,6 +213,52 @@ export function cardSub(node, doc) {
   return [tech || node.stack, provided ? `${provided} ${provided === 1 ? 'endpoint' : 'endpoints'}` : null].filter(Boolean).join(' · ');
 }
 
+/**
+ * What a module's card says, as the Map draws it: a kind line (its domain, else its stack, and how many endpoints it
+ * provides), up to three of what it is built with, and the outside services it calls, folded into one line under it.
+ */
+export const CARD_CHIPS = 3;
+export function cardOf(node, doc) {
+  const provided = (doc.provides?.endpoints ?? []).filter((e) => e.module === node.id).length;
+  const kind = [node.narrative?.domain ?? node.stack ?? null, provided ? `${provided} ${provided === 1 ? 'endpoint' : 'endpoints'}` : null].filter(Boolean).join(' · ');
+  const tech = (node.tech ?? []).map((t) => t.replace(/@.*$/, ''));
+  return { kind, chips: tech.slice(0, CARD_CHIPS), more: Math.max(0, tech.length - CARD_CHIPS), outside: outsideOf(node, doc) };
+}
+
+/** The outside services a module calls, by name, in the order they are named: what its card folds under it. */
+export function outsideOf(node, doc) {
+  const byId = new Map((doc.nodes ?? []).map((n) => [n.id, n]));
+  const names = [];
+  for (const e of doc.edges ?? []) {
+    if (e.from !== node.id) continue;
+    const to = byId.get(e.to);
+    if (to?.kind !== 'external') continue;
+    const name = to.label && to.label !== 'unknown' ? to.label : (to.hosts ?? [])[0] ?? to.id.replace(/^ext:[^:]+:/, '');
+    if (!names.includes(name)) names.push(name);
+  }
+  return names.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+}
+
+/** The tour /crew-map wrote, the stops whose node is on this map, each with the node's name. */
+export function tourOf(doc) {
+  const byId = new Map((doc.nodes ?? []).map((n) => [n.id, n]));
+  return (Array.isArray(doc.tour) ? doc.tour : []).filter((s) => s && byId.has(s.node) && typeof s.text === 'string')
+    .map((s) => ({ node: s.node, name: byId.get(s.node).name ?? byId.get(s.node).label ?? s.node, text: s.text, cites: (s.cites ?? []).filter((c) => typeof c === 'string') }));
+}
+
+/**
+ * The nodes a search names: by name, folder, what they are built with, their domain, the folders inside them and
+ * what their README says. Case does not matter; an empty search names none.
+ */
+export function searchOf(query, nodes) {
+  const q = String(query ?? '').trim().toLowerCase();
+  if (!q) return new Set();
+  const hay = (n) => [n.name, n.label, n.path, n.stack, ...(n.tech ?? []), ...(n.hosts ?? []), n.narrative?.domain, n.narrative?.layer,
+    ...(n.structure?.folders ?? []).map((f) => f.folder), ...(n.about?.evidence ?? []).map((e) => e.text)]
+    .filter((x) => typeof x === 'string').join('\n').toLowerCase();
+  return new Set(nodes.filter((n) => hay(n).includes(q)).map((n) => n.id));
+}
+
 /** The summary pills: what the map holds, and how many findings the list shows. */
 export function summaryOf(doc, findings) {
   const n = (k) => (doc.nodes ?? []).filter((x) => x.kind === k).length;
@@ -247,6 +305,16 @@ export function inspectOf(node, doc, edges, findings) {
     narrative: typeof node.narrative?.text === 'string' ? node.narrative.text : null,
     narrativeCites: Array.isArray(node.narrative?.cites) ? node.narrative.cites.filter((c) => typeof c === 'string') : [],
     narrativeNote: 'Not written yet: this map holds no description of the module, only what its files show.',
+    // /crew-map's layer and domain, when it wrote them; the band is the layer's (bandOf).
+    layer: LAYER_KEYS.includes(node.narrative?.layer) ? (BANDS.find(([k]) => k === node.narrative.layer)?.[1] ?? null) : null,
+    domain: typeof node.narrative?.domain === 'string' ? node.narrative.domain : null,
+    // What is inside it: the entry point the scan found, its folders with how many source files each holds, tests apart.
+    inside: node.kind === 'module' ? {
+      entry: node.entryPoint?.evidence?.[0] ? `${node.entryPoint.evidence[0].file}:${node.entryPoint.evidence[0].line}` : (node.entryPoint?.file ?? null),
+      folders: (node.structure?.folders ?? []).map((f) => ({ folder: f.folder, files: f.files })),
+      other: node.structure?.otherFiles ?? 0,
+      tests: node.structure?.testFiles ?? 0,
+    } : null,
     connectsTo: out,
     connections: { out, in: into },
     byKind: Object.entries(byKind).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0)),
@@ -274,7 +342,8 @@ export function emptyNote(data) {
   return null;
 }
 
-export const CARD = { module: [200, 64], service: [200, 64], client: [200, 64], external: [104, 52] };
+// A module card holds its name and kind, a row of what it is built with, and the line of outside services under it.
+export const CARD = { module: [280, 104], service: [280, 104], client: [280, 104], group: [280, 104], external: [104, 52] };
 const GAP_X = 24;
 const GAP_Y = 20;
 const LEFT = 140;      // the band's label sits in this column