crewforth 3.1.1 → 3.2.0-rc.1

package/kit/studio/web/app.js

@@ -24,7 +24,8 @@ import { Timeline } from './timeline.js';
 import { List } from './list.js';
 import { defaultView, narrowWarning } from './list-plan.js';
 import { Models } from './models.js';
-import { cardOf, cardLines, workSteps } from './models-plan.js';
+import { MapView } from './map.js';
+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';
@@ -79,6 +80,8 @@ const el = {
   viewList: document.getElementById('view-list'),
   viewModels: document.getElementById('view-models'),
   models: document.getElementById('models'),
+  viewMap: document.getElementById('view-map'),
+  map: document.getElementById('map'),
   list: document.getElementById('list'),
   firstRun: document.getElementById('first-run'),
   stageNote: document.getElementById('stage-note'),
@@ -608,16 +611,27 @@ el.tbOptions.addEventListener('click', (e) => {
 });
 el.tbExpand.addEventListener('click', () => { (foldTarget() ?? canvas).expandAll(); paintFoldButtons(); });
 el.tbFold.addEventListener('click', () => { (foldTarget() ?? canvas).foldAll(); paintFoldButtons(); });
-el.tbZoomOut.addEventListener('click', () => canvas.zoomBy(1 / 1.2));
-el.tbZoomIn.addEventListener('click', () => canvas.zoomBy(1.2));
-el.tbZoom.addEventListener('click', () => canvas.zoomTo(1));
-el.tbFit.addEventListener('click', () => canvas.fit());
+// The zoom, Fit and Reset controls are the graph's and the map's: they act on whichever of the two is open.
+const zoomed = () => (view === 'map' ? mapView : canvas);
+el.tbZoomOut.addEventListener('click', () => zoomed().zoomBy(1 / 1.2));
+el.tbZoomIn.addEventListener('click', () => zoomed().zoomBy(1.2));
+el.tbZoom.addEventListener('click', () => zoomed().zoomTo(1));
+el.tbFit.addEventListener('click', () => zoomed().fit());
 
 /* Reset layout: the cards moved by hand go back where the layout puts them, and for a moment that can be undone. */
 function resetLayout() {
-  const was = canvas.resetLayout();
+  const target = zoomed();
+  const was = target.resetLayout();
   if (!was) return;
-  toast('Layout reset', { label: 'Undo', run: () => { if (canvas.restoreLayout(was)) toast('Layout restored'); } });
+  toast('Layout reset', { label: 'Undo', run: () => { if (target.restoreLayout(was)) toast('Layout restored'); } });
+  if (target === mapView) paintZoom(mapView.zoom, mapView.moved);
+}
+/** The zoom and Reset as the map has them: the graph's go through paintToolbar. */
+function paintZoom(k, moved) {
+  const pct = `${Math.round(k * 100)}%`;
+  el.tbZoom.textContent = pct;
+  el.tbZoom.setAttribute('aria-label', `Zoom ${pct}. Back to 100%`);
+  if (el.tbReset) el.tbReset.disabled = !(moved > 0);
 }
 el.tbReset.addEventListener('click', resetLayout);
 
@@ -679,6 +693,36 @@ async function loadCosts(force = false) {
 const COSTS_POLL_MS = 60000;
 const MODELS_POLL_MS = 5000;
 
+/* The project's crew map, as Crewforth's scanner wrote it. Read when the view opens, when the comparison changes, and every
+   half minute while it stays open; nothing is scanned from here. */
+let mapFor = null;
+let mapAt = 0;
+let mapBusy = false;
+let mapCompare = null;
+const mapView = new MapView(el.map, {
+  onCopy: (text, what) => navigator.clipboard.writeText(text).then(
+    () => toast(what === 'path' ? `Copied ${text}` : 'Copied — paste it into a session as a task'),
+    () => toast(`Not copied — select it: ${text}`)),
+  onCompare: (cwd) => { mapCompare = cwd; loadMap(true); },
+  onZoom: (k) => { if (view === 'map') paintZoom(k, mapView.moved); },
+});
+async function loadMap(force = false) {
+  if (!current || mapBusy) return;
+  if (!force && mapFor === current && Date.now() - mapAt < MAP_POLL_MS) return;
+  const asked = current;
+  if (mapFor !== asked) mapCompare = null;
+  mapAt = Date.now();
+  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: [] }; }
+  finally { mapBusy = false; }
+  if (asked !== current) return;
+  mapFor = asked;
+  mapView.setData(data);
+}
+const MAP_POLL_MS = 30000;
+
 const list = new List(el.list, {
   tileOf: (n) => canvas.tileFor(n),
   dimmed: (n) => canvas.dimmed(n),
@@ -713,7 +757,7 @@ function paintTimelineBar(st) {
  */
 function setView(next, select = null, remember = true) {
   const was = view;
-  view = ['graph', 'timeline', 'list', 'models'].includes(next) ? next : 'graph';
+  view = ['graph', 'timeline', 'list', 'models', 'map'].includes(next) ? next : 'graph';
   // A view the window opened on by default is not a choice, and is not remembered as one.
   if (remember) store.set('crewforth-studio-view', view);
   const carried = select ?? (was === 'timeline' ? timeline.selected : was === 'list' ? list.selected : canvas.selected) ?? null;
@@ -722,6 +766,8 @@ function setView(next, select = null, remember = true) {
   el.list.hidden = view !== 'list';
   el.models.hidden = view !== 'models';
   el.viewModels.setAttribute('aria-selected', String(view === 'models'));
+  el.map.hidden = view !== 'map';
+  el.viewMap.setAttribute('aria-selected', String(view === 'map'));
   el.viewGraph.setAttribute('aria-selected', String(view === 'graph'));
   el.viewTimeline.setAttribute('aria-selected', String(view === 'timeline'));
   el.viewList.setAttribute('aria-selected', String(view === 'list'));
@@ -751,7 +797,14 @@ function setView(next, select = null, remember = true) {
     if (costsFor !== current) models.setCosts(null);
     loadModels(true);
     loadCosts(costsFor !== current);
+  } else if (view === 'map') {
+    // The map is the project's: read when the view opens, drawn with what was last read until the answer comes.
+    mapView.render();
+    paintZoom(mapView.zoom, mapView.moved);
+    loadMap(true);
   } else {
+    // Back on the graph: the zoom and Reset say the graph's again.
+    paintToolbar(canvas.state());
     canvas.fitIfUntouched();
     if (carried && canvas.nodes.has(carried)) canvas.focus(carried);
   }
@@ -768,13 +821,14 @@ el.viewGraph.addEventListener('click', () => setView('graph'));
 el.viewTimeline.addEventListener('click', () => setView('timeline'));
 el.viewList.addEventListener('click', () => setView('list'));
 el.viewModels.addEventListener('click', () => setView('models'));
+el.viewMap.addEventListener('click', () => setView('map'));
 el.tbFollow.addEventListener('click', () => timeline.setFollow(el.tbFollow.getAttribute('aria-checked') !== 'true'));
 // "Out" is more time on screen, "in" is less: the same way round as the graph's zoom.
 el.tbRangeOut.addEventListener('click', () => timeline.zoom(1));
 el.tbRangeIn.addEventListener('click', () => timeline.zoom(-1));
 if (typeof ResizeObserver !== 'undefined') new ResizeObserver(() => requestAnimationFrame(() => timeline.render())).observe(el.timeline);
 // The canvas's pane changing size changes what fits in it, and with that what Auto density draws.
-if (typeof ResizeObserver !== 'undefined') new ResizeObserver(() => requestAnimationFrame(() => canvas.fitIfUntouched())).observe(el.canvasEl);
+if (typeof ResizeObserver !== 'undefined') new ResizeObserver(() => requestAnimationFrame(() => canvas.paneResized())).observe(el.canvasEl);
 
 getJson('/api/palette')
   .then((p) => {
@@ -980,11 +1034,15 @@ function paintAgentOverview(body, n, detail) {
     if (lines.length) {
       const dl = node('dl', 'icard');
       for (const l of lines) dl.append(node('dt', null, l.label), node('dd', null, l.text));
+      // Why the gate called it critical, in its own words (`files ... is on a critical path: ...` or `change: ...`).
+      if (work.riskWhy) dl.append(node('dt', null, 'why critical'), node('dd', null, work.riskWhy));
       const sec = isection('Task card', dl);
       if (work.risk) { const tag = node('span', 'mv-tag', work.risk); tag.dataset.risk = work.risk; sec.children[0].append(tag); }
       body.append(sec);
     }
-    // No card and no line: an agent that is not a crew agent, and nothing is said about it here.
+    // Not a crew agent: no card and no line, and that is said, so the empty space is not read as a record lost.
+    const outside = !row && !lines.length ? outsideRouting(n.agentType) : null;
+    if (outside) body.append(isection('Model routing', node('p', 'istep-note', outside)));
     if (row || lines.length) {
       const ol = node('ol', 'isteps');
       work.steps.forEach((st, i) => {
@@ -1381,6 +1439,8 @@ const ICON = {
   copy: 'M5.5 5.5v-2A1.5 1.5 0 0 1 7 2h5.5A1.5 1.5 0 0 1 14 3.5V9a1.5 1.5 0 0 1-1.5 1.5h-2M3.5 5.5H9A1.5 1.5 0 0 1 10.5 7v5.5A1.5 1.5 0 0 1 9 14H3.5A1.5 1.5 0 0 1 2 12.5V7a1.5 1.5 0 0 1 1.5-1.5z',
   chevron: 'M6 4l4 4-4 4',
   more: 'M3.5 8h.01M8 8h.01M12.5 8h.01',
+  // The Map view's tab mark: three cards and the lines between them.
+  map: 'M2 2.5h5v3.5H2zM9 2.5h5v3.5H9zM5.5 10h5v3.5h-5zM4.5 6v2h7V6M8 8v2',
   machine: 'M3.5 3h9A1.5 1.5 0 0 1 14 4.5v5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 9.5v-5A1.5 1.5 0 0 1 3.5 3zM6 14h4M8 11v3',
 };
 
@@ -1611,6 +1671,23 @@ function versionBadge(kit) {
   return tag;
 }
 
+/** The Map entry under a project: opens the project's map, through its latest session. */
+function mapRow(p, latest) {
+  const row = node('div', 'srow map-row');
+  row.tabIndex = 0;
+  row.setAttribute('role', 'treeitem');
+  row.dataset.map = p.key;
+  const words = node('span', 'map-word', 'Map');
+  row.append(icon(ICON.map), words, node('span', 'row-fill'));
+  if (p.map?.findings) { const n = node('span', 'map-count', String(p.map.findings)); n.title = `${p.map.findings} finding(s) on the map`; row.append(n); }
+  else if (!p.map) row.append(node('span', 'sub', 'no map'));
+  row.title = p.map ? 'Open the project map' : 'This project has no .crewforth/crew-map.json yet';
+  const go = () => { selectSession(latest.sessionId); setView('map'); };
+  row.addEventListener('click', go);
+  row.addEventListener('keydown', (e) => { if (e.target === row && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); go(); } });
+  return row;
+}
+
 function sessionRow(project, sn) {
   const status = sessionStatus(sn.sessionId, fleetData);
   const name = sessionName(sn, labels.all());
@@ -1775,6 +1852,8 @@ function paintProjects() {
     group.append(head);
 
     if (open) {
+      // Under the project, its map (spec §11): the orange number is how many findings it shows unasked.
+      if (p.local !== false && p.exists && sessions.length) group.append(mapRow(p, sessions[0]));
       for (const sn of sessions) group.append(sessionRow(p, sn));
       if (p.total > p.sessions.length) {
         group.append(node('div', 'nav-line', `${p.total - p.sessions.length} older session(s) not listed`));
@@ -1960,10 +2039,121 @@ function paintMachines() {
     });
     frag.append(note);
   }
+  if (role === 'owner') frag.append(remoteSection());
   el.reach.replaceChildren(frag);
   paintOtherMachines();
 }
 
+/* ------------------------------------------------------- remote viewers
+   A viewer is a second token that reads and changes nothing: the way to watch
+   this panel from another device without handing that device the panel. The
+   server refuses a viewer's writes itself; what is hidden here for a viewer is
+   only what would be refused anyway. */
+
+let role = null;              // 'owner' or 'viewer', once the server has said which
+let remote = null;            // the server's list of viewers, or null before it has answered
+let handed = null;            // the link of the viewer just added: the server says a token once
+
+async function pollRemote() {
+  if (role !== 'owner') return;
+  try { remote = await getJson('/api/remote'); } catch { return; }
+  paintMachines();
+}
+
+async function remoteWrite(method, path, body) {
+  try {
+    const r = await fetch(api(path), {
+      method,
+      headers: { ...writeHeaders, ...(body ? { 'content-type': 'application/json' } : {}) },
+      ...(body ? { body: JSON.stringify(body) } : {}),
+    });
+    return await r.json();
+  } catch (e) {
+    return { ok: false, reason: e.message };
+  }
+}
+
+async function addViewer(button) {
+  button.disabled = true;
+  const res = await remoteWrite('POST', '/api/remote', {});
+  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)}` };
+  paintMachines();
+}
+
+async function revokeViewer(v, button) {
+  button.disabled = true;
+  const res = await remoteWrite('DELETE', `/api/remote/${encodeURIComponent(v.id)}`);
+  if (!res.ok) {
+    toast(`Not revoked — ${res.reason ?? 'no reason given'}`);
+    button.disabled = false;
+    return;
+  }
+  remote = { ...(remote ?? {}), viewers: res.viewers ?? [] };
+  if (handed?.id === v.id) handed = null;
+  toast(res.revoked ? `${v.label} can no longer read this panel` : `${v.label} was already revoked`);
+  paintMachines();
+}
+
+function viewerRow(v) {
+  const row = node('div', 'srow remote');
+  const top = node('span', 'srow-top');
+  const revoke = node('button', 'btn sm ghost', 'Revoke');
+  revoke.type = 'button';
+  revoke.setAttribute('aria-label', `Revoke ${v.label}`);
+  revoke.addEventListener('click', () => revokeViewer(v, revoke));
+  top.append(icon(ICON.machine), node('span', 'mname', v.label), node('span', 'row-fill'), revoke);
+  row.append(top);
+  const seen = v.lastSeenAt
+    ? `${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));
+  return row;
+}
+
+function remoteSection() {
+  const box = node('div', 'nav-foot rv');
+  const head = node('div', 'rv-head');
+  const add = node('button', 'btn sm', 'Add viewer');
+  add.type = 'button';
+  const list = remote?.viewers ?? [];
+  if (remote?.max != null && list.length >= remote.max) {
+    add.disabled = true;
+    add.title = `${remote.max} viewers already; revoke one first`;
+  }
+  add.addEventListener('click', () => addViewer(add));
+  head.append(node('span', 'rv-title', 'Remote viewers'), node('span', 'row-fill'), add);
+  box.append(head);
+
+  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.`));
+    const url = node('code', 'rv-url', handed.url);
+    const copy = node('button', 'btn sm', 'Copy link');
+    copy.type = 'button';
+    copy.addEventListener('click', () => copyText(handed.url, 'Link copied'));
+    const done = node('button', 'btn sm ghost', 'Done');
+    done.type = 'button';
+    done.addEventListener('click', () => { handed = null; paintMachines(); });
+    const acts = node('div', 'rv-acts');
+    acts.append(copy, done);
+    give.append(url, acts);
+    box.append(give);
+  }
+
+  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.'));
+  }
+  return box;
+}
+
 /** The short form under the project list: the first two, and the way to the rest. */
 function paintOtherMachines() {
   const m = machines(fleetData);
@@ -2226,7 +2416,7 @@ function paintPulse() {
   pulse.detail.textContent = l.detail ? `· ${l.detail}` : '';
 }
 paintPulse();
-setInterval(() => { paintPulse(); dock.tick(); timeline.tick(); list.tick(); paintStageNote(); if (view === 'models') { loadModels(); loadCosts(); } }, 1000);
+setInterval(() => { paintPulse(); dock.tick(); timeline.tick(); list.tick(); paintStageNote(); if (view === 'models') { loadModels(); loadCosts(); } if (view === 'map') loadMap(); }, 1000);
 
 /* -------------------------------------------------------------- home, keys */
 
@@ -2254,6 +2444,7 @@ document.addEventListener('keydown', (e) => {
     if (shell.classList.contains('side-open')) { setDrawer(false); return; }
     if (newPanel.isOpen) { newPanel.close(); return; }
     if (view === 'timeline' && timeline.selected) { timeline.select(null); return; }
+    if (view === 'map' && mapView.escape()) return;
     // Close the inspector and let go of the selection.
     if (!el.inspector.hidden) { canvas.clearSelection(); showInspector(null); }
     return;
@@ -2277,9 +2468,11 @@ document.addEventListener('keydown', (e) => {
   } else if (key === 'l') {
     setView('list');
   } else if (key === 'r') {
-    if (view === 'graph') resetLayout();
+    if (view === 'graph' || view === 'map') resetLayout();
   } else if (key === 'm') {
     setView('models');
+  } else if (key === 'p') {
+    setView('map');
   } else if (key === 'j') {
     stepAttention(1);
   } else if (key === 'k') {
@@ -2619,7 +2812,16 @@ applyPhoneBand(true);
   setView(defaultView(stored, phoneBand.matches), null, Boolean(stored));
 }
 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) => {
+  role = h.role === 'viewer' ? 'viewer' : 'owner';
+  document.body.dataset.role = role;
+  document.getElementById('role').hidden = role !== 'viewer';
+  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);
+setInterval(pollRemote, FLEET_POLL_MS);
 nextPollAt = Date.now() + FLEET_POLL_MS;
 setInterval(pollOwned, FLEET_POLL_MS);
 setInterval(pollSessions, SESSION_POLL_MS);

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();
     });