crewforth 3.1.1 → 3.2.0-rc.2

package/kit/studio/web/canvas.js

@@ -11,9 +11,10 @@
 //   A status is never colour alone: every dot has its word beside it.
 //   A poll that changed nothing writes nothing. Each element remembers what it last drew.
 import {
-  plan, sequence, crowdFolds, fitZoom, tallestFor, stateOf, ZOOM, GROUPINGS, DENSITIES, INFERRED_NOTE,
+  plan, sequence, crowdFolds, tallestFor, stateOf, GROUPINGS, DENSITIES, INFERRED_NOTE, AUTO,
 } from './graph-plan.js';
 import { clock } from './timeline-plan.js';
+import { Viewport, draggable, swallowClick } from './viewport.js';
 import { agentStatus } from './nav.js';
 import { roleName, shownType, hoverOf, originOf, orderTag, modelOf, modelMix, modelFamily, modelBadge } from './names.js';
 import { fmtCount, fmtCost, COST_NOTE } from './usage.js';
@@ -38,6 +39,11 @@ const MOTION_BUDGET = 60;
 // How long the pointer rests on a card before its details are shown.
 const TIP_MS = 400;
 
+// How long a pane has to stay one size before Auto decides again between cards and chips. While its edge is being
+// dragged the view follows at once, but the choice waits: measured 2026-10-14 with 43 agents, an edge moved to and
+// fro across Auto's limit for 60 frames turned every card into a chip and back 57 times, each a full redraw.
+export const RESIZE_SETTLE_MS = 150;
+
 // Marks, so a card says what kind of thing it is before it is read.
 //
 // Crewforth's own is the three chevrons, drawn here because the shape is three strokes and its colours are the
@@ -77,7 +83,6 @@ export class Canvas {
     this.onSelect = onSelect ?? (() => {});
     this.onMenu = onMenu ?? (() => {});
     this.onChange = onChange ?? (() => {});
-    this.view = { x: 0, y: 0, k: 1 };
     this.nodes = new Map();      // id -> the server's node
     this.pos = new Map();        // drawn item id -> {x, y}
     this.pinned = new Map();     // item id -> {x, y} the viewer set by hand
@@ -108,7 +113,6 @@ export class Canvas {
     this.sessionY = null;
     this.selected = null;
     this.firstRender = true;
-    this.touched = false;        // the viewer moved the view themselves
     this.drawn = 0;
 
     this.#build();
@@ -286,51 +290,13 @@ export class Canvas {
   /* ------------------------------------------------------------ input */
 
   #wire() {
-    let panning = null;
-
-    this.root.addEventListener('pointerdown', (e) => {
-      if (e.button !== 0) return;                 // right/middle must not pan
-      const t = e.target;
-      if (t.closest?.('.cv-node') || t.closest?.('.cv-minimap') || t.closest?.('.cv-legend')) return;   // the summary box is a .cv-legend too
-      panning = { px: e.clientX, py: e.clientY, x: this.view.x, y: this.view.y };
-      this.root.setPointerCapture(e.pointerId);
-      this.root.classList.add('cv-panning');
-    });
-
-    this.root.addEventListener('pointermove', (e) => {
-      if (!panning) return;
-      this.view.x = panning.x + (e.clientX - panning.px);
-      this.view.y = panning.y + (e.clientY - panning.py);
-      this.touched = true;
-      this.applyView();
+    // Pan, zoom and Fit are the shared viewport's: the same on the graph and on the project map.
+    this.vp = new Viewport(this.root, this.viewport, {
+      // the summary box is a .cv-legend too
+      skip: (t) => Boolean(t.closest?.('.cv-node') || t.closest?.('.cv-minimap') || t.closest?.('.cv-legend')),
+      onApply: () => { this.#mapView(); this.onChange(this.state()); },
     });
 
-    const endPan = () => { panning = null; this.root.classList.remove('cv-panning'); };
-    this.root.addEventListener('pointerup', endPan);
-    this.root.addEventListener('pointercancel', endPan);
-
-    this.root.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      const r = this.root.getBoundingClientRect();
-      const mx = e.clientX - r.left;
-      const my = e.clientY - r.top;
-
-      // deltaMode 1 is lines and 2 is pages; Firefox reports ~3 where Chrome reports ~100, which made zoom
-      // imperceptible and pan crawl.
-      const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? r.height : 1;
-      const dY = e.deltaY * unit;
-      const dX = e.deltaX * unit;
-
-      if (e.ctrlKey || e.metaKey || Math.abs(dY) > Math.abs(dX)) {
-        this.#zoomAbout(this.view.k * Math.exp(-dY * 0.0016), mx, my);
-      } else {
-        this.view.x -= dX;
-        this.view.y -= dY;
-      }
-      this.touched = true;
-      this.applyView();
-    }, { passive: false });
-
     // The minimap's frame is the pane: put the pointer somewhere on the map and the pane goes there.
     let mapping = false;
     const mapTo = (e) => {
@@ -352,28 +318,14 @@ export class Canvas {
     this.mapEl.addEventListener('pointercancel', () => { mapping = false; });
   }
 
-  /** Zoom to `k`, keeping the world point under (mx, my) where it is. */
-  #zoomAbout(k, mx, my) {
-    const next = clamp(k, ZOOM.min, ZOOM.max);
-    this.view.x = mx - (mx - this.view.x) * (next / this.view.k);
-    this.view.y = my - (my - this.view.y) * (next / this.view.k);
-    this.view.k = next;
-  }
+  /** Where the pane looks: the viewport's, kept under these names because the page and the claims use them. */
+  get view() { return this.vp.view; }
+  get touched() { return this.vp.touched; }
+  set touched(v) { this.vp.touched = v; }
 
   /** Step the zoom from the toolbar: about the middle of the pane. */
-  zoomBy(factor) {
-    const r = this.root.getBoundingClientRect();
-    this.#zoomAbout(this.view.k * factor, r.width / 2, r.height / 2);
-    this.touched = true;
-    this.applyView();
-  }
-
-  zoomTo(k) {
-    const r = this.root.getBoundingClientRect();
-    this.#zoomAbout(k, r.width / 2, r.height / 2);
-    this.touched = true;
-    this.applyView();
-  }
+  zoomBy(factor) { this.vp.zoomBy(factor); }
+  zoomTo(k) { this.vp.zoomTo(k); }
 
   /**
    * Turn `view` into pixels. Public because it is the single place that does so — the wheel, the pan, fit() and
@@ -382,12 +334,7 @@ export class Canvas {
    * It writes one transform. Nothing a card draws depends on the zoom, so a zoom restyles nothing: that was the
    * cost of the old counter-scaled labels, 454 ms of style work per second at 250 nodes.
    */
-  applyView() {
-    const { x, y, k } = this.view;
-    this.viewport.style.transform = `translate(${x}px, ${y}px) scale(${k})`;
-    this.#mapView();
-    this.onChange(this.state());
-  }
+  applyView() { this.vp.apply(); }
 
   /** What the toolbar shows. */
   state() {
@@ -587,25 +534,31 @@ export class Canvas {
     return tallestFor(this.paneHeight);
   }
 
+  /** The pane is changing size. The view follows it now; whether it is cards or chips is asked once it stops. */
+  paneResized() {
+    if (!this.touched && !this.pinned.size) this.fit({ readable: true });
+    clearTimeout(this.settleTimer);
+    this.settleTimer = setTimeout(() => { this.settleTimer = null; this.fitIfUntouched(); }, RESIZE_SETTLE_MS);
+  }
+
   /** Re-fit only while the view is still the canvas's own. Once the viewer has panned, zoomed or placed a card,
    *  moving the view under them is not helpful. */
   fitIfUntouched() {
     // The pane changed size: what fits in it may have changed with it, and so may Auto's answer.
     const h = this.root.getBoundingClientRect?.().height ?? 0;
     if (this.lastPlan && this.density === 'auto' && tallestFor(h) !== tallestFor(this.paneHeight ?? 0)) this.#redraw();
-    if (!this.touched && !this.pinned.size) this.fit();
+    if (!this.touched && !this.pinned.size) this.fit({ readable: true });
   }
 
-  fit() {
+  /**
+   * Fit the picture to the pane. On its own (`readable`), the view does not go under the zoom a card is read at
+   * when Auto kept cards for a picture taller than the pane: that is the overflow Auto allows, panned to, not
+   * shrunk away. The toolbar's Fit asks for the whole picture.
+   */
+  fit({ readable = false } = {}) {
     const p = this.lastPlan;
     if (!p || !p.items.length) return;
-    const r = this.root.getBoundingClientRect();
-    const k = fitZoom(p.width, p.height, r.width, r.height);
-    this.view.k = k;
-    this.view.x = Math.max(ZOOM.pad, (r.width - p.width * k) / 2);
-    this.view.y = Math.max(ZOOM.pad, (r.height - p.height * k) / 2);
-    this.touched = false;
-    this.applyView();
+    this.vp.fit(p.width, p.height, readable && this.density === 'auto' && p.density === 'comfortable' ? AUTO.readable : 0);
   }
 
   /* -------------------------------------------------------- rendering */
@@ -699,7 +652,7 @@ export class Canvas {
 
     this.#drawEdges(p);
     this.#drawMap(p);
-    if (fit) this.fit(); else this.applyView();
+    if (fit) this.fit({ readable: true }); else this.applyView();
   }
 
   /** The card's position and size, and whatever only changes with them. */
@@ -983,7 +936,7 @@ export class Canvas {
       // Beside the bar: how the members went — or, at compact density where the card has no line for it, the
       // models they ran on, with how they went left to the bar and its tooltip.
       const mix = modelMix(it.members).replace(/, /g, ' \u00b7 ');
-      if (!it.boxed) { p.count.textContent = it.compact && mix ? mix : says; p.count.title = it.compact && mix ? `${says}\nThe models its agents ran on` : ''; }
+      if (!it.boxed) { p.count.textContent = it.compact && mix ? `${says} \u00b7 ${mix}` : says; p.count.title = it.compact && mix ? `${says}\nThe models its agents ran on: ${mix}` : ''; }
       if (!it.boxed) this.#fillTotals(p, it);
       el.title = it.boxed ? '' : (it.open ? 'Click to fold' : `Click to show ${it.members.length} agents`);
       el.setAttribute('aria-label', `${said}, ${says}, ${it.open ? 'open' : 'folded'}`);
@@ -1302,13 +1255,8 @@ export class Canvas {
       const cell = item ? null : host.cells?.find((c) => c.id === id);
       const cx = host.x + (cell ? cell.x + cell.w / 2 : host.w / 2);
       const cy = host.y + (cell ? cell.y + cell.h / 2 : host.h / 2);
-      const r = this.root.getBoundingClientRect();
       // Close enough to read, and no closer than the viewer already was.
-      this.view.k = clamp(Math.max(this.view.k, 1), ZOOM.min, ZOOM.max);
-      this.view.x = r.width / 2 - cx * this.view.k;
-      this.view.y = r.height / 2 - cy * this.view.k;
-      this.touched = true;
-      this.applyView();
+      this.vp.centerOn(cx, cy, 1);
     }
     this.#persist();
     this.onSelect(this.nodes.get(id) ?? null);
@@ -1327,38 +1275,14 @@ export class Canvas {
   /* ------------------------------------------------------ interaction */
 
   #interact(el, id) {
-    let drag = null;
-
-    el.addEventListener('pointerdown', (e) => {
-      if (e.button !== 0) return;
-      e.stopPropagation();                       // do not pan the canvas too
-      if (e.target.closest?.('.cv-fold')) return;
-      const p = this.pos.get(id) ?? { x: 0, y: 0 };
-      drag = { px: e.clientX, py: e.clientY, x: p.x, y: p.y, moved: false };
-      el.setPointerCapture(e.pointerId);
+    draggable(el, {
+      scale: () => this.view.k,
+      at: () => this.pos.get(id),
+      move: (x, y) => { this.pinned.set(id, { x, y }); this.#redraw(); },
+      end: () => this.#persist(),
+      ignore: (t) => Boolean(t.closest?.('.cv-fold')),
     });
 
-    el.addEventListener('pointermove', (e) => {
-      if (!drag) return;
-      const dx = (e.clientX - drag.px) / this.view.k;
-      const dy = (e.clientY - drag.py) / this.view.k;
-      if (!drag.moved && Math.abs(dx) <= 3 && Math.abs(dy) <= 3) return;
-      drag.moved = true;
-      el.classList.add('cv-dragging');
-      this.pinned.set(id, { x: Math.round(drag.x + dx), y: Math.round(drag.y + dy) });
-      this.#redraw();
-    });
-
-    const stop = () => {
-      if (!drag) return;
-      // A drag ends with a click on the same element. Without this guard every reposition also toggled selection.
-      if (drag.moved) { this.#persist(); el.dataset.suppressClick = '1'; }
-      drag = null;
-      el.classList.remove('cv-dragging');
-    };
-    el.addEventListener('pointerup', stop);
-    el.addEventListener('pointercancel', stop);
-
     const act = () => {
       const it = this.lastPlan?.items.find((x) => x.id === id);
       if (!it) return;
@@ -1368,7 +1292,7 @@ export class Canvas {
       this.#select(id);
     };
     el.addEventListener('click', (e) => {
-      if (el.dataset.suppressClick === '1') { el.dataset.suppressClick = '0'; return; }
+      if (swallowClick(el)) return;
       if (e.target.closest?.('.cv-member')) return;   // the member answers for itself
       act();
     });

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 = [];
@@ -163,25 +230,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) {
@@ -591,6 +655,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 +719,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

@@ -52,7 +52,13 @@ export const AUTO = {
   readable: 0.75,
   // Same-type siblings fold into one card from this many, once the picture is too tall.
   stackAt: 3,
+  // How far past what fits a picture may run and still be drawn as cards: the rest is a pan away, at a zoom the
+  // cards are read at (the canvas's own fit does not go under `readable` then). A long column of agent types beside
+  // an empty half of the pane turned to chips at 1.0; 1.5 is a starting point, not a measured one.
+  overflow: 1.5,
 };
+/** The height past which Auto gives cards up: what fits, and the overflow it allows on top. */
+const overLimit = (h, tallest) => h > tallest * AUTO.overflow;
 
 export const GROUPINGS = ['run', 'type', 'parent', 'order', 'none'];
 export const DENSITIES = ['auto', 'comfortable', 'compact'];
@@ -422,12 +428,12 @@ export function plan(nodes, opts = {}) {
   let compact = asked === 'compact';
   let stacked = false;
   let box = lay(pass.shown, compact);
-  if (asked === 'auto' && box.height > tallest) {
+  if (asked === 'auto' && overLimit(box.height, tallest)) {
     if (group !== 'none' && group !== 'type') {
       const folded = drawFrom(itemsOf(nodes, { group, density: asked, seq, stack: true, aside }));
       if (folded.shown.some((it) => it.kind === 'group' && it.type === 'type')) { pass = folded; stacked = true; box = lay(pass.shown, false); }
     }
-    if (box.height > tallest) { compact = true; box = lay(pass.shown, true); }
+    if (overLimit(box.height, tallest)) { compact = true; box = lay(pass.shown, true); }
   }
   const drawnItems = pass.shown;
   const drawn = pass.count;
@@ -523,7 +529,7 @@ function planOrder(nodes, asked, opts, tallest = AUTO.tallest) {
   };
   let compact = asked === 'compact';
   let box = lay(compact);
-  if (asked === 'auto' && box.height > tallest) { compact = true; box = lay(true); }
+  if (asked === 'auto' && overLimit(box.height, tallest)) { compact = true; box = lay(true); }
   const { items } = box;
   let { height } = box;
 
@@ -586,7 +592,7 @@ export function crowdFolds(nodes, opts = {}) {
   const folds = [];
   for (let guard = 0; guard < 64; guard += 1) {
     const p = plan(nodes, { ...opts, open, pinned: new Map(), sessionY: null });
-    if (p.height <= Math.max(AUTO.tallest, opts.tallest ?? 0)) break;
+    if (!overLimit(p.height, Math.max(AUTO.tallest, opts.tallest ?? 0))) break;
     const next = p.items.filter((it) => it.kind === 'group' && it.open && it.members.length > 1)
       .sort((a, b) => b.members.length - a.members.length || String(a.id).localeCompare(String(b.id)))[0];
     if (!next) break;

package/kit/studio/web/index.html

@@ -25,6 +25,7 @@
   <span class="bar-fill"></span>
   <div id="graph-summary" class="chips" role="group" aria-label="Session summary"></div>
   <span class="bar-sep" aria-hidden="true"></span>
+  <span id="role" class="badge" title="This link reads the panel and changes nothing" hidden>Read-only</span>
   <span id="pulse" class="live" role="status" data-state="connecting"><span class="dot"></span><strong>Connecting</strong><span class="live-detail"></span></span>
   <button id="theme" class="btn icon ghost" type="button" aria-label="Switch theme">
     <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 9.5A5.5 5.5 0 0 1 6.5 3a5.5 5.5 0 1 0 6.5 6.5z"/></svg>
@@ -95,6 +96,9 @@
         <button id="view-models" class="seg-btn" type="button" role="tab" aria-label="Models view" aria-selected="false" aria-controls="models">
           <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 13V8M8 13V3M13 13V6"/></svg><span class="tb-words">Models</span>
         </button>
+        <button id="view-map" class="seg-btn" type="button" role="tab" aria-label="Map view" aria-selected="false" aria-controls="map">
+          <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="2.5" width="5" height="3.5" rx="1"/><rect x="9" y="2.5" width="5" height="3.5" rx="1"/><rect x="5.5" y="10" width="5" height="3.5" rx="1"/><path d="M4.5 6v2h7V6M8 8v2"/></svg><span class="tb-words">Map</span>
+        </button>
       </div>
       <button id="tb-group" data-view="graph timeline" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Group <span>Workflow run</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
       <button id="tb-density" data-view="graph" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Density <span>Auto</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
@@ -119,17 +123,17 @@
       <button id="tb-fold" data-view="graph timeline list" class="btn sm" type="button" aria-label="Fold all groups">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg><span class="tb-words">Fold all</span>
       </button>
-      <button id="tb-zoom-out" data-view="graph" class="btn icon sm ghost" type="button" aria-label="Zoom out">
+      <button id="tb-zoom-out" data-view="graph map" class="btn icon sm ghost" type="button" aria-label="Zoom out">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10"/></svg>
       </button>
-      <button id="tb-zoom" data-view="graph" class="tb-zoom" type="button" title="Back to 100%" aria-label="Zoom 100%. Back to 100%">100%</button>
-      <button id="tb-zoom-in" data-view="graph" class="btn icon sm ghost" type="button" aria-label="Zoom in">
+      <button id="tb-zoom" data-view="graph map" class="tb-zoom" type="button" title="Back to 100%" aria-label="Zoom 100%. Back to 100%">100%</button>
+      <button id="tb-zoom-in" data-view="graph map" class="btn icon sm ghost" type="button" aria-label="Zoom in">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>
       </button>
-      <button id="tb-reset" data-view="graph" class="btn sm" type="button" title="Reset layout (r)" aria-label="Reset layout: put the cards moved by hand back where they belong" disabled>
+      <button id="tb-reset" data-view="graph map" class="btn sm" type="button" title="Reset layout (r)" aria-label="Reset layout: put the cards moved by hand back where they belong" disabled>
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8a5 5 0 1 0 1.6-3.7M3 3v3h3"/></svg><span class="tb-words">Reset layout</span>
       </button>
-      <button id="tb-fit" data-view="graph" class="btn sm" type="button" aria-label="Fit the graph to the view">
+      <button id="tb-fit" data-view="graph map" class="btn sm" type="button" aria-label="Fit the graph to the view">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 5.5v-3h3M10.5 2.5h3v3M13.5 10.5v3h-3M5.5 13.5h-3v-3"/></svg><span class="tb-words">Fit</span>
       </button>
     </div>
@@ -139,6 +143,7 @@
     <div id="timeline" role="tabpanel" aria-labelledby="view-timeline" hidden></div>
     <div id="list" role="tabpanel" aria-labelledby="view-list" hidden></div>
     <div id="models" role="tabpanel" aria-labelledby="view-models" hidden></div>
+    <div id="map" role="tabpanel" aria-labelledby="view-map" hidden></div>
     <div id="first-run" class="first-run" hidden></div>
     <div id="terminal-wait" class="terminal-wait" role="status" hidden></div>
     <div id="dock" role="region" aria-label="Waiting for approval" hidden></div>

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;
+}