Settings → API log: the calls agents make, as a list and as lanes

Two views over /api/operations, per the approved mock.

**List.** One call per LINE, not per row — a wrapped row halves how many calls
fit on a screen, so every cell clips and the path is the only column allowed to
take the slack; below ~640px the table scrolls sideways rather than crushing it
to two letters. No pills anywhere: status is coloured text in its own column.
Filters are origin, failures/prompts/files, and a path substring.

**Map.** One lane per agent, callers above the agents they call, and the calls
drawn between the lanes: a prompt is an arrow from caller to target, a resolved
wait is a dashed arrow back the other way. x is the call's RANK, not its clock
position — real traffic arrives in bursts, and spacing by time collapses a burst
into one unreadable column and leaves the quiet hours as whitespace. The axis
still names the period on screen.

**The part that was not free.** Only writes were logged, so of the last 193
calls, 173 were POST, 20 PUT and none were GET. `wait` is a GET, so every arrow
coming back was missing from the data and the lanes would have shown work going
out and nothing ever returning. Three changes, all in operations.js:

- one allowlist — `/api/agents/:id/wait` is logged, and deliberately nothing
else. Not `tail`: every open pane polls it, so logging it multiplies the log
by the polling rate and says nothing the resolved wait does not.
- one guard — a wait is a polling loop, so only the call that RESOLVED is an
event. Timeouts, abandoned waits and gone targets are dropped, which is what
keeps this from growing the log by however long a job ran.
- logged reads never require `?from=`. `wait` is documented read-only and every
watch loop running right now calls it without one; refusing those would break
them the moment this ships. An unattributed wait still records who was waited
ON, and draws as a mark on that agent's lane rather than an arrow.

Adding `?from=$AM_ID` to the skill's wait examples is what turns those marks
into arrows, so this also updates the environment skill's two wait snippets and
says why in one line.

**And a target field.** The entry shape gained `target: {id, name, cli}`,
resolved at write time from the session named in the path. The id was always in
the path, but a name read back later is the name that session has NOW —
renamed or deleted and the audit trail stops making sense. Older entries have no
target, so the view digs the id out of the path and matches it against the
roster; the map is useful on the existing backlog rather than only on new
traffic.

Prompt text stays unstored — {present, chars, sha256}, as before. So the view
says who prompted whom and how long the prompt was, never what it said, and
marks equal checksums as repeats, which is the only honest thing it can say
about a job that fires the same text on a schedule.

Verified against the running Space's real log and a local server: an attributed
wait, an unattributed one, a timeout, a tail and a roster poll — logged, logged,
dropped, dropped, dropped — and a resolved wait recorded with durationMs 9007.
Rendered both views at 1200 and 390: no pane overflow, and zero rows taller than
one line. New browser test pins that, the no-badge rule, and the arrow
directions; the server test covers the middleware.

server/src/index.js

@@ -232,8 +232,20 @@ const resolveOperationOrigin = (raw, req) => {
   const remoteSession = store.list().find((s) => s.remote?.name === name);
   return remoteSession ? { id: `remote:${name}`, type: 'remote', name, cli: remoteSession.remote?.peer?.harness || 'remote' } : null;
 };
+// Who the call was aimed at. Every route that acts on one session names it in
+// the path; resolving the NAME here, at write time, is the difference between an
+// audit trail that still reads in a month and one full of ids whose sessions
+// have since been renamed or deleted.
+const TARGET_ROUTES = /^\/api\/(?:agents|sessions|trace|files)\/([^/]+)/;
+const resolveOperationTarget = (req) => {
+  const id = (req.path.match(TARGET_ROUTES) || [])[1];
+  if (!id) return null;
+  const s = store.get(id);
+  return s ? { id: s.id, name: s.name, cli: s.cli } : { id };
+};
 app.use(operationMiddleware({
   resolveOrigin: resolveOperationOrigin,
+  resolveTarget: resolveOperationTarget,
   // Test servers explicitly opt out so old endpoint-focused fixtures do not
   // have to pretend to be the operator. Production never sets this switch.
   allowMissing: process.env.AM_ALLOW_MISSING_ORIGIN === '1',
@@ -1360,7 +1372,7 @@ digest for one agent. Read \`state\` before you do anything:
 ### Watch instead of asking
 \`\`\`sh
 curl -s "http://localhost:\${AM_PORT:-${PORT}}/api/agents/$ID/tail?lines=120" | jq -r .text
-curl -s "http://localhost:\${AM_PORT:-${PORT}}/api/agents/$ID/wait?timeout=300&settle=15"
+curl -s "http://localhost:\${AM_PORT:-${PORT}}/api/agents/$ID/wait?timeout=300&settle=15&from=$AM_ID"
 \`\`\`
 \`tail\` returns that agent's screen and scrollback — exactly what a human would
 see in its pane. \`wait\` BLOCKS until the agent has held one of \`state\`
@@ -1374,13 +1386,17 @@ see in its pane. \`wait\` BLOCKS until the agent has held one of \`state\`
   covers a whole job; on expiry it answers \`{matched:false,timedOut:true}\` and
   you reissue. That is the shape of the API, not a failure.
 
+\`wait\` is read-only, so \`from=$AM_ID\` is optional on it — pass it anyway. It
+is what lets Settings → API log draw the arrow back from the agent you waited on
+to you; without it the log knows the wait finished but not who was watching.
+
 Because of both, the correct form is a background loop rather than a call:
 reissue until it matches, started the way your harness runs a command in the
 background (Claude Code: \`run_in_background\`), so you stay free meanwhile and
 are woken once, when the peer is genuinely finished.
 
 \`\`\`sh
-( until curl -s "http://localhost:\${AM_PORT:-${PORT}}/api/agents/$ID/wait?timeout=300&settle=15" \\
+( until curl -s "http://localhost:\${AM_PORT:-${PORT}}/api/agents/$ID/wait?timeout=300&settle=15&from=$AM_ID" \\
         > /tmp/wait-$ID.json \\
      && jq -e '.matched or .state == "gone" or has("error")' /tmp/wait-$ID.json >/dev/null
   do sleep 2; done ) >/dev/null 2>&1 &

server/src/operations.js

@@ -6,6 +6,15 @@ import { DATA_DIR } from './config.js';
 export const OPERATIONS_FILE = path.join(DATA_DIR, 'operations.jsonl');
 
 const MUTATING = new Set(['POST', 'PUT', 'PATCH', 'DELETE']);
+// Reads worth auditing. A GET is normally none of this log's business — it
+// changes nothing — but `wait` is the one read that IS an event between two
+// agents: A blocked on B until B stopped working. Without it the log records
+// work being handed out and nothing ever coming back, which is exactly half of
+// "who called whom". Deliberately NOT here: `tail`, which every open pane polls
+// constantly and which says nothing a resolved wait does not already say.
+const LOGGED_READS = [/^\/api\/agents\/[^/]+\/wait$/];
+const shouldLog = (req) => MUTATING.has(req.method)
+  || (req.method === 'GET' && LOGGED_READS.some((re) => re.test(req.path)));
 const MAX_TEXT = 500;
 const MAX_DEPTH = 5;
 const SENSITIVE_KEY = /(authorization|credential|password|secret|subscription|token|endpoint|private.?key)/i;
@@ -73,14 +82,18 @@ const cleanQuery = (query) => {
  * unknown. It may derive an identity from a protocol route (remote agents do
  * this for backwards compatibility with already-running polling loops).
  */
-export function operationMiddleware({ resolveOrigin, allowMissing = false } = {}) {
+export function operationMiddleware({ resolveOrigin, resolveTarget, allowMissing = false } = {}) {
   return (req, res, next) => {
-    if (!req.path.startsWith('/api/') || !MUTATING.has(req.method)) return next();
+    if (!req.path.startsWith('/api/') || !shouldLog(req)) return next();
 
     const raw = requestOrigin(req);
     let origin = resolveOrigin ? resolveOrigin(raw, req) : (raw ? { id: raw, type: 'unknown' } : null);
     if (!origin && allowMissing) origin = { id: 'test', type: 'test' };
-    if (!origin) {
+    // A logged READ is never refused for want of an origin. `wait` is documented
+    // as read-only and every watch loop running right now calls it without
+    // `?from=`; rejecting those would break them the moment this ships. An
+    // unattributed wait still records that someone finished waiting on B.
+    if (!origin && MUTATING.has(req.method)) {
       return res.status(400).json({
         error: raw
           ? `unknown origin '${raw}'`
@@ -88,7 +101,7 @@ export function operationMiddleware({ resolveOrigin, allowMissing = false } = {}
       });
     }
 
-    req.operationOrigin = origin;
+    if (origin) req.operationOrigin = origin;
     const started = Date.now();
     const operationId = crypto.randomUUID();
     let responseBody;
@@ -101,11 +114,21 @@ export function operationMiddleware({ resolveOrigin, allowMissing = false } = {}
     const record = () => {
       if (recorded) return;
       recorded = true;
+      // A wait is a polling loop: only the call that RESOLVED is an event. The
+      // ones that timed out say "still working", which the log already implies,
+      // and logging them would multiply the entries by however long the job ran.
+      // Same for a wait the caller abandoned (no body) or one whose target had
+      // already gone: nothing came back, so there is nothing to draw.
+      if (!MUTATING.has(req.method) && !(responseBody && responseBody.matched === true)) return;
       append({
         version: 1,
         id: operationId,
         at: new Date(started).toISOString(),
         origin,
+        // Who it was done TO, resolved at write time. The id is in the path
+        // already, but a name read back later is the name the session has
+        // NOW — renamed or deleted, and the audit trail stops making sense.
+        ...(resolveTarget ? (() => { const t = resolveTarget(req); return t ? { target: t } : {}; })() : {}),
         method: req.method,
         path: req.path,
         query: cleanQuery(req.query),

server/test/operations.test.mjs

@@ -20,6 +20,13 @@ const middleware = operationMiddleware({
   resolveOrigin: (raw) => raw === 'operator'
     ? { id: 'operator', type: 'operator', name: 'test operator' }
     : raw === 'agent-1' ? { id: raw, type: 'agent', name: 'agent one', cli: 'codex' } : null,
+  // The manager resolves the session named in the path; here, anything called
+  // s-* exists and everything else does not.
+  resolveTarget: (req) => {
+    const id = (req.path.match(/^\/api\/(?:agents|sessions)\/([^/]+)/) || [])[1];
+    if (!id) return null;
+    return id.startsWith('s-') ? { id, name: `name of ${id}`, cli: 'claude' } : { id };
+  },
 });
 
 class Response extends EventEmitter {
@@ -69,6 +76,50 @@ try {
   check('plain-text agent prompts are summarized too', rows[3]?.request?.present === true && rows[3]?.request?.chars === 26);
   check('origin is separate from the recorded query', rows[3]?.origin?.id === 'agent-1' && !('from' in (rows[3]?.query || {})));
   check('query parameters needed to replay the operation remain', rows[3]?.query?.cli === 'codex');
+
+  // The one read this log cares about. A `wait` is how one agent watches
+  // another, so it is the only GET recorded — and only when it RESOLVED, since
+  // a wait that timed out is a polling artefact, not an event.
+  console.log('\nthe wait that came back');
+  const before = readOperations(50).length;
+  invoke({ method: 'GET', path: '/api/agents/s-target/wait', query: { from: 'agent-1' } },
+    (_req, res) => res.json({ id: 's-target', state: 'waiting', matched: true, waited: 143 }));
+  invoke({ method: 'GET', path: '/api/agents/s-target/wait', query: { from: 'agent-1' } },
+    (_req, res) => res.json({ id: 's-target', state: 'working', matched: false, timedOut: true }));
+  invoke({ method: 'GET', path: '/api/agents/s-target/wait' },
+    (_req, res) => res.json({ id: 's-target', state: 'idle', matched: true, waited: 4 }));
+  let tailed = false;
+  invoke({ method: 'GET', path: '/api/agents/s-target/tail' }, (_req, res) => { tailed = true; res.json({ text: '' }); });
+  let rostered = false;
+  invoke({ method: 'GET', path: '/api/agents' }, (_req, res) => { rostered = true; res.json({ agents: [] }); });
+
+  const waits = readOperations(50).filter((r) => r.method === 'GET');
+  check('a resolved wait is recorded', waits.length === 2, `${waits.length} GET rows`);
+  check('a wait that only timed out is not', !waits.some((r) => r.result?.matched === false));
+  check('tail is never logged — every open pane polls it', tailed && !waits.some((r) => r.path.endsWith('/tail')));
+  check('nor is the roster, or any other read', rostered && readOperations(50).length === before + 2);
+
+  // `wait` is documented read-only and every watch loop running today calls it
+  // without ?from=. Refusing those would break them the moment this ships.
+  const anonymous = waits.find((r) => !r.origin);
+  check('an unattributed wait is accepted, not 400ed', !!anonymous);
+  check('and still records who it was waiting ON', anonymous?.target?.id === 's-target');
+  const attributed = waits.find((r) => r.origin?.id === 'agent-1');
+  check('an attributed wait keeps both ends', attributed?.origin?.id === 'agent-1' && attributed?.target?.name === 'name of s-target');
+  check('a wait is worth its duration, not just its timestamp', typeof attributed?.durationMs === 'number');
+
+  console.log('\nwho it was done to');
+  invoke({ path: '/api/sessions/s-42/input', query: { from: 'agent-1' }, body: { text: 'go' } },
+    (_req, res) => res.json({ ok: true }));
+  invoke({ path: '/api/sessions/ghost-9/input', query: { from: 'agent-1' }, body: { text: 'go' } },
+    (_req, res) => res.status(404).json({ error: 'not found' }));
+  const [ghost, named] = readOperations(2);
+  check('the target name is resolved at write time, not read time', named?.target?.name === 'name of s-42');
+  check('a target that no longer exists still records its id', ghost?.target?.id === 'ghost-9' && !ghost?.target?.name);
+
+  console.log('\nand the guard that has to keep holding');
+  const stillRefused = invoke({ path: '/api/groups', body: { name: 'nope' } }, () => {});
+  check('a mutating call with no origin is still refused', stillRefused.statusCode === 400);
 } finally {
   fs.rmSync(TMP, { recursive: true, force: true });
 }

web/src/App.tsx

@@ -50,7 +50,7 @@ function autoGrid(n: number): GridSpec {
   return { cols: 3, rows: 3 };
 }
 
-type SettingsPage = 'general' | 'usage' | 'skills' | 'cron';
+type SettingsPage = 'general' | 'usage' | 'skills' | 'cron' | 'apilog';
 const ROOT_PATH = '.';
 const WARM_TERMINAL_LIMIT = 12;
 const normalizePath = (p?: string | null) => (p && p.trim() ? p : ROOT_PATH);

web/src/api.ts

@@ -674,3 +674,27 @@ export const saveSkill = (name: string, content: string) =>
   fetch(`/api/skills/${encodeURIComponent(name)}`, { method: 'PUT', headers: { 'content-type': 'text/plain' }, body: content }).then(json);
 export const deleteSkill = (name: string) =>
   fetch(`/api/skills/${encodeURIComponent(name)}`, { method: 'DELETE' }).then(json);
+
+// ---- the API log (Settings → API log) ----
+// Written by operationMiddleware: every mutating call, plus the one read that is
+// an event between two agents — a `wait` that resolved. Payloads are summarised
+// at write time, never stored: a prompt is {present, chars, sha256} and nothing
+// else, so this view can say who asked whom and how long the ask was, never what
+// it said.
+export interface OperationSummary { present?: boolean; chars?: number; sha256?: string; bytes?: number; }
+export interface Operation {
+  id: string;
+  at: string;
+  origin: { id: string; type: string; name?: string; cli?: string } | null;
+  target?: { id: string; name?: string; cli?: string };
+  method: string;
+  path: string;
+  query?: Record<string, unknown>;
+  request?: unknown;
+  status: number;
+  ok: boolean;
+  durationMs: number;
+  result?: unknown;
+}
+export const getOperations = (limit = 500): Promise<{ operations: Operation[]; generatedAt: string }> =>
+  fetch(`/api/operations?limit=${limit}`).then(json);

web/src/components/ApiLog.tsx

@@ -0,0 +1,342 @@
+// Settings → API log: what the agents actually did to each other.
+//
+// Two views over /api/operations, which the manager already writes for every
+// call that changes something (plus, since this feature, the one read that is an
+// event between two agents — a `wait` that resolved).
+//
+//   list — one call per LINE. Not per row: per line. A wrapped row halves how
+//          many calls fit on a screen, so every cell is nowrap/ellipsis and the
+//          path is the one column allowed to take the remaining width.
+//   map  — one lane per agent, time left to right, and the calls drawn BETWEEN
+//          the lanes: a prompt is an arrow from caller to target, a resolved
+//          wait is an arrow back the other way. That return arrow is the whole
+//          reason reads are logged at all; without it the picture shows work
+//          going out and nothing ever coming back.
+//
+// What this cannot show, by design: the log stores {present, chars, sha256} for
+// prompt text and never the text. So this answers who asked whom to do
+// something, when, and how big the ask was — never what it said. Equal
+// checksums mean identical prompts, which is what a repeating job produces, so
+// repeats are marked rather than hidden.
+import { useEffect, useMemo, useState } from 'react';
+import * as api from '../api';
+
+type View = 'list' | 'map';
+type Kind = 'fail' | 'prompt' | 'file';
+
+const HHMMSS = (iso: string) => new Date(iso).toLocaleTimeString([], { hour12: false });
+const DAY = (iso: string) => new Date(iso).toLocaleDateString([], { day: 'numeric', month: 'short' });
+
+/** 6ms · 576ms · 18.4s · 4m 18s — always three glyphs of information, never more. */
+export function took(ms: number): string {
+  if (!Number.isFinite(ms)) return '—';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const m = Math.floor(ms / 60_000);
+  return `${m}m ${String(Math.round((ms % 60_000) / 1000)).padStart(2, '0')}s`;
+}
+
+const KB = (chars: number) => (chars < 1024 ? `${chars} B` : `${(chars / 1024).toFixed(1)} KB`);
+
+/** The summariser stores text as {present, chars, sha256} — sometimes as the
+ *  whole body (a prompt), sometimes one field inside it (`input` wraps it in
+ *  `text`). Find it either way; anything else has no payload worth a column. */
+function textSummary(value: unknown): api.OperationSummary | null {
+  if (!value || typeof value !== 'object') return null;
+  const v = value as Record<string, unknown>;
+  if (typeof v.chars === 'number') return v as api.OperationSummary;
+  for (const inner of Object.values(v)) {
+    if (inner && typeof inner === 'object' && typeof (inner as api.OperationSummary).chars === 'number') {
+      return inner as api.OperationSummary;
+    }
+  }
+  return null;
+}
+
+const isFileRoute = (p: string) => p.startsWith('/api/files') || p.startsWith('/api/skills');
+export const isWait = (op: api.Operation) => op.method === 'GET' && /\/wait$/.test(op.path);
+const isPrompt = (op: api.Operation) => /\/(prompt|input)$/.test(op.path);
+
+/** What the Payload column says. Text length, never text. */
+function payloadOf(op: api.Operation): { text: string; sha?: string } {
+  if (isWait(op)) {
+    const state = (op.result as { state?: string } | undefined)?.state;
+    return { text: `resolved · ${state || 'finished'}` };
+  }
+  const bytes = (op.result as { bytes?: number } | undefined)?.bytes;
+  if (typeof bytes === 'number') return { text: `upload · ${KB(bytes)}` };
+  const sum = textSummary(op.request);
+  if (!sum || !sum.chars) return { text: '—' };
+  const what = isFileRoute(op.path) ? 'file' : isPrompt(op) ? 'prompt' : 'body';
+  return {
+    text: isFileRoute(op.path) ? `${what} · ${KB(sum.chars)}` : `${what} · ${sum.chars.toLocaleString()} chars`,
+    sha: sum.sha256,
+  };
+}
+
+const statusClass = (op: api.Operation) =>
+  (op.ok ? 'ok' : op.status >= 500 ? 'bad' : 'warn');
+
+const who = (op: api.Operation) => op.origin?.name || op.origin?.id || '—';
+/** The id of whoever the call acted on. `target` is written into the log from
+ *  this version on; entries recorded before it have the id in the path, which is
+ *  worth digging out so the map is not empty on the day this ships. */
+const TARGET_IN_PATH = /^\/api\/(?:agents|sessions|trace|files)\/([^/]+)/;
+const targetId = (op: api.Operation) => op.target?.id || (op.path.match(TARGET_IN_PATH) || [])[1] || '';
+const whom = (op: api.Operation, names?: Map<string, string>) => {
+  const id = targetId(op);
+  return op.target?.name || (id && names?.get(id)) || id;
+};
+
+export default function ApiLog() {
+  const [ops, setOps] = useState<api.Operation[] | null>(null);
+  // id → name for sessions that still exist, so an older entry whose target was
+  // never recorded still draws with a name rather than an id.
+  const [names, setNames] = useState<Map<string, string>>(new Map());
+  const [error, setError] = useState('');
+  const [view, setView] = useState<View>('list');
+  const [origin, setOrigin] = useState('');            // '' = everyone
+  const [kinds, setKinds] = useState<Kind[]>([]);
+  const [q, setQ] = useState('');
+
+  const load = () => api.getOperations(500)
+    .then((d) => { setOps(d.operations); setError(''); })
+    .catch(() => setError('could not read the log'));
+  useEffect(() => { load(); }, []);
+  useEffect(() => {
+    api.getTree()
+      .then((t) => setNames(new Map(t.sessions.map((s) => [s.id, s.name]))))
+      .catch(() => {});
+  }, []);
+
+  const origins = useMemo(() => {
+    const seen = new Map<string, string>();
+    for (const op of ops || []) if (op.origin) seen.set(op.origin.id, op.origin.name || op.origin.id);
+    return [...seen].sort((a, b) => a[1].localeCompare(b[1]));
+  }, [ops]);
+
+  const failures = (ops || []).filter((op) => !op.ok).length;
+  const toggle = (k: Kind) => setKinds((ks) => (ks.includes(k) ? ks.filter((x) => x !== k) : [...ks, k]));
+
+  const rows = useMemo(() => (ops || []).filter((op) => {
+    if (origin && op.origin?.id !== origin) return false;
+    if (q && !op.path.toLowerCase().includes(q.toLowerCase())) return false;
+    if (!kinds.length) return true;
+    return kinds.some((k) => (k === 'fail' ? !op.ok : k === 'prompt' ? isPrompt(op) : isFileRoute(op.path)));
+  }), [ops, origin, q, kinds]);
+
+  // Identical prompts have identical checksums. Counting them is the only thing
+  // the log can honestly say about repetition, and it is enough to spot a job
+  // that fires the same text on a schedule.
+  const repeats = useMemo(() => {
+    const n = new Map<string, number>();
+    for (const op of rows) {
+      const sha = payloadOf(op).sha;
+      if (sha) n.set(sha, (n.get(sha) || 0) + 1);
+    }
+    return n;
+  }, [rows]);
+
+  const span = ops && ops.length
+    ? `${DAY(ops[ops.length - 1].at)}–${DAY(ops[0].at)}`
+    : '';
+
+  return (
+    <div className="al">
+      <div className="al-head">
+        <span className="al-count">{ops ? `${ops.length} calls` : 'loading…'}{span ? ` · ${span}` : ''}</span>
+        <div className="seg al-view">
+          <button className={view === 'list' ? 'on' : ''} onClick={() => setView('list')}>List</button>
+          <button className={view === 'map' ? 'on' : ''} onClick={() => setView('map')}>Map</button>
+        </div>
+        <button className="btn-ghost al-refresh" onClick={load}>Refresh</button>
+      </div>
+
+      <div className="al-filters">
+        <button className={`al-chip${origin ? '' : ' on'}`} onClick={() => setOrigin('')}>Everyone</button>
+        {origins.map(([id, name]) => (
+          <button key={id} className={`al-chip${origin === id ? ' on' : ''}`} onClick={() => setOrigin(id)}>{name}</button>
+        ))}
+        <span className="al-gap" />
+        <button className={`al-chip${kinds.includes('fail') ? ' on' : ''}`} onClick={() => toggle('fail')}>
+          Only failures ({failures})
+        </button>
+        <button className={`al-chip${kinds.includes('prompt') ? ' on' : ''}`} onClick={() => toggle('prompt')}>Prompts</button>
+        <button className={`al-chip${kinds.includes('file') ? ' on' : ''}`} onClick={() => toggle('file')}>Files</button>
+        <input className="al-find mono" placeholder="path contains…" value={q} onChange={(e) => setQ(e.target.value)} />
+      </div>
+
+      {error && <div className="s-warn">{error}</div>}
+      {view === 'list'
+        ? <LogTable rows={rows} repeats={repeats} names={names} />
+        : <LogMap rows={rows} names={names} />}
+      {ops && !rows.length && !error && <div className="s-muted al-empty">No calls match.</div>}
+    </div>
+  );
+}
+
+function LogTable({ rows, repeats, names }: {
+  rows: api.Operation[]; repeats: Map<string, number>; names: Map<string, string>;
+}) {
+  return (
+    <div className="al-tblwrap">
+      <table className="al-tbl">
+        <thead>
+          <tr>
+            <th>Time</th><th>Who</th><th className="grow">Call</th>
+            <th>Status</th><th className="num">Took</th><th>Payload</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((op) => {
+            const pay = payloadOf(op);
+            const n = pay.sha ? repeats.get(pay.sha) || 0 : 0;
+            return (
+              <tr key={op.id} title={`${op.at}${whom(op, names) ? ` → ${whom(op, names)}` : ''}`}>
+                <td className="al-time">{HHMMSS(op.at)}</td>
+                <td className="al-who">{who(op)}</td>
+                <td className="grow">
+                  <span className={`al-meth${isWait(op) ? ' back' : ''}`}>{op.method}</span>{' '}
+                  <span className="al-path">{op.path}</span>
+                </td>
+                <td className={`al-st ${statusClass(op)}`}>{op.status}</td>
+                <td className="num">{took(op.durationMs)}</td>
+                <td className="al-pay">
+                  {pay.text}
+                  {n > 1 && <span className="al-rep" title={`${n} calls with this exact payload — ${pay.sha}`}> ×{n}</span>}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ---- the map ----------------------------------------------------------------
+// Geometry follows the approved mock: a labelled hairline per lane, arrows
+// drawn between lanes, a dot on the lane the call was made from.
+const LANE_H = 46;
+const TOP = 26;
+const LEFT = 108;      // room for the longest lane label
+const RIGHT = 26;
+const MAX_LANES = 12;
+const MAX_MARKS = 48;
+
+function LogMap({ rows, names }: { rows: api.Operation[]; names: Map<string, string> }) {
+  const [hover, setHover] = useState<api.Operation | null>(null);
+
+  const { lanes, marks, from, to, dropped } = useMemo(() => {
+    const recent = rows.slice(0, MAX_MARKS).slice().reverse();  // oldest first, left to right
+    // Lanes: everything that CALLS above everything that is only called. Then a
+    // prompt points down the picture and a resolved wait points back up it,
+    // which is the whole claim the legend makes. Sorting by traffic alone put
+    // targets above their callers and the two directions stopped meaning
+    // anything.
+    const made = new Map<string, number>();
+    const got = new Map<string, number>();
+    const bump = (m: Map<string, number>, name: string) => name && m.set(name, (m.get(name) || 0) + 1);
+    for (const op of recent) { bump(made, who(op)); bump(got, whom(op, names)); }
+    const byCount = (m: Map<string, number>) => [...m].sort((a, b) => b[1] - a[1]).map(([n]) => n);
+    const callers = byCount(made);
+    const lanes = [...callers, ...byCount(got).filter((n) => !made.has(n))].slice(0, MAX_LANES);
+    const t0 = recent.length ? new Date(recent[0].at).getTime() : 0;
+    const t1 = recent.length ? new Date(recent[recent.length - 1].at).getTime() : 1;
+    // x is the call's RANK, not its clock position: real traffic arrives in
+    // bursts, and spacing by time collapses a burst into one unreadable column
+    // while leaving the quiet hours as empty space. The axis still says what
+    // period is on screen.
+    const marks = recent.map((op, i) => ({
+      op,
+      x: recent.length < 2 ? 0.5 : i / (recent.length - 1),
+      a: lanes.indexOf(who(op)),
+      b: lanes.indexOf(whom(op, names)),
+    })).filter((m) => m.a >= 0 || m.b >= 0);
+    void t0; void t1;
+    return {
+      lanes,
+      marks,
+      from: recent.length ? recent[0].at : '',
+      to: recent.length ? recent[recent.length - 1].at : '',
+      dropped: Math.max(0, rows.length - MAX_MARKS),
+    };
+  }, [rows, names]);
+
+  if (!lanes.length) return <div className="s-muted al-empty">Nothing to draw yet.</div>;
+
+  const width = 760;
+  const height = TOP + lanes.length * LANE_H + 34;
+  const laneY = (i: number) => TOP + i * LANE_H + 8;
+  const xOf = (t: number) => LEFT + t * (width - LEFT - RIGHT);
+
+  return (
+    <div className="al-map">
+      <div className="al-mapwrap">
+        <svg viewBox={`0 0 ${width} ${height}`} role="img"
+          aria-label="Swimlanes: one lane per agent, prompts drawn from caller to target and resolved waits back the other way.">
+          <defs>
+            <marker id="al-ar" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
+              <path d="M0 0 L8 4 L0 8 z" fill="var(--accent)" />
+            </marker>
+            <marker id="al-arb" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
+              <path d="M0 0 L8 4 L0 8 z" fill="var(--muted)" />
+            </marker>
+          </defs>
+          {lanes.map((name, i) => (
+            <g key={name}>
+              <text x="2" y={laneY(i) - 6} className="al-lane-lbl">{name}</text>
+              <line x1="2" y1={laneY(i)} x2={width - 4} y2={laneY(i)} className="al-lane" />
+            </g>
+          ))}
+          {marks.map(({ op, x, a, b }) => {
+            const back = isWait(op);
+            // A wait is attention coming BACK: it is drawn from the agent that
+            // was waited on to the one that waited.
+            const src = back ? (b >= 0 ? b : a) : a;
+            const dst = back ? a : b;
+            const px = xOf(x);
+            const on = hover?.id === op.id;
+            if (src < 0 || dst < 0 || src === dst) {
+              const lane = src >= 0 ? src : dst;
+              return (
+                <circle key={op.id} cx={px} cy={laneY(lane)} r={on ? 4 : 2.6}
+                  className={`al-dot${back ? ' back' : ''}${op.ok ? '' : ' bad'}${on ? ' on' : ''}`}
+                  onMouseEnter={() => setHover(op)} onMouseLeave={() => setHover(null)}>
+                  <title>{`${HHMMSS(op.at)} ${op.method} ${op.path}`}</title>
+                </circle>
+              );
+            }
+            const y1 = laneY(src) + (dst > src ? 5 : -5);
+            const y2 = laneY(dst) + (dst > src ? -7 : 7);
+            return (
+              <g key={op.id} onMouseEnter={() => setHover(op)} onMouseLeave={() => setHover(null)}
+                className={`al-arrowg${on ? ' on' : ''}`}>
+                <title>{`${HHMMSS(op.at)} ${op.method} ${op.path}`}</title>
+                <line x1={px} y1={y1} x2={px} y2={y2}
+                  className={`al-arrow${back ? ' back' : ''}${op.ok ? '' : ' bad'}`}
+                  markerEnd={`url(#${back ? 'al-arb' : 'al-ar'})`} />
+                <circle cx={px} cy={laneY(src)} r="2.6" className={`al-dot${back ? ' back' : ''}${op.ok ? '' : ' bad'}`} />
+                {/* a hit area wider than a 1.6px line, or nothing is hoverable */}
+                <line x1={px} y1={y1} x2={px} y2={y2} className="al-hit" />
+              </g>
+            );
+          })}
+          {from && <text x="2" y={height - 8} className="al-axis">{`${DAY(from)} ${HHMMSS(from).slice(0, 5)} →`}</text>}
+          {to && <text x={width - 4} y={height - 8} textAnchor="end" className="al-axis">{HHMMSS(to).slice(0, 5)}</text>}
+        </svg>
+      </div>
+      <div className="al-readout mono">
+        {hover
+          ? `${HHMMSS(hover.at)}  ${who(hover)}${whom(hover, names) ? ` → ${whom(hover, names)}` : ''}  ${hover.method} ${hover.path}  ${hover.status}  ${took(hover.durationMs)}  ${payloadOf(hover).text}`
+          : 'Hover a line for its time, status and payload.'}
+      </div>
+      <div className="al-legend">
+        <span><i className="al-key" /> prompt (caller → target)</span>
+        <span><i className="al-key back" /> wait resolved (target → caller)</span>
+        <span><i className="al-key dot" /> the call&apos;s own lane</span>
+        {dropped > 0 && <span className="s-muted">newest {MAX_MARKS} of {rows.length} drawn</span>}
+      </div>
+    </div>
+  );
+}

web/src/components/SettingsView.tsx

@@ -2,17 +2,19 @@ import { useEffect, useState } from 'react';
 import { isPassive, isRemote, type Cli } from '../types';
 import * as api from '../api';
 import SkillsEditor from './SkillsEditor';
+import ApiLog from './ApiLog';
 import UsagePanel from './UsagePanel';
 import CronSettings from './CronSettings';
 import { SunGlyph, MoonGlyph, RefreshGlyph, InfoGlyph } from './icons';
 import Logo from './Logo';
 
-type Page = 'general' | 'usage' | 'skills' | 'cron';
+type Page = 'general' | 'usage' | 'skills' | 'cron' | 'apilog';
 const PAGES: { id: Page; label: string }[] = [
   { id: 'general', label: 'General' },
   { id: 'usage', label: 'Usage' },
   { id: 'skills', label: 'Skills' },
   { id: 'cron', label: 'Cron' },
+  { id: 'apilog', label: 'API log' },
 ];
 
 interface Info { dataDir?: string; home?: string; spaceId?: string | null; spaceHost?: string | null; engine?: string; ghostty?: boolean; canRelaunch?: boolean; secrets?: string[]; bucketUnverified?: boolean; }
@@ -777,6 +779,18 @@ export default function SettingsView({
           </div>
         )}
 
+        {page === 'apilog' && (
+          <div className="settings-page wide">
+            <h2>API log</h2>
+            <p className="s-help">
+              Every call that changed something, plus the waits that resolved — who asked whom to do
+              what, and when. Prompt text is never stored, only its length and a checksum, so this
+              says who prompted whom and how long the prompt was, never what it said.
+            </p>
+            <ApiLog />
+          </div>
+        )}
+
         {page === 'skills' && (
           <div className="settings-page wide">
             <h2>Skills</h2>

web/src/styles.css

@@ -1398,6 +1398,76 @@ a.btn-ghost { text-decoration: none; }
   .skiprestore { align-self: flex-start; }
 }
 
+/* ---- settings: API log (docs: the approved cron-and-api-log mock) ---- */
+.al { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
+.al-head { display: flex; align-items: center; gap: 10px; }
+.al-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
+.al-view { margin-left: auto; }
+.al-refresh { padding: 4px 9px; font-size: 11.5px; }
+.al-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.al-gap { flex: 1 0 12px; }
+/* A filter is a chip: bordered, quiet until it is on, and never a coloured pill
+   sitting in a data row — the rows themselves carry no badges at all. */
+.al-chip { padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
+.al-chip:hover { border-color: var(--border-strong); color: var(--text); }
+.al-chip.on { border-color: var(--accent); color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.al-find { flex: 1; min-width: 130px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); font-size: 11.5px; }
+.al-find:focus { outline: none; border-color: var(--accent); }
+.al-empty { padding: 14px 2px; }
+
+/* ONE CALL PER LINE. Every cell is nowrap and clips; the path is the only
+   column that may take the slack (max-width:0 + width:100% is what makes a
+   table cell shrink-to-fit-the-rest rather than push the row wide). Wrapping
+   would halve how many calls a screen holds, which is the whole point of it. */
+.al-tblwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
+.al-tbl { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
+/* A floor, so a narrow pane scrolls the table sideways instead of crushing the
+   Call column — which is the one column worth reading — down to two letters.
+   The row stays one line either way; that is the rule this is protecting. */
+.al-tbl { min-width: 640px; }
+.al-tbl th { text-align: left; padding: 7px 10px; background: var(--panel-2); border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
+.al-tbl td { padding: 5px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.al-tbl tr:last-child td { border-bottom: none; }
+.al-tbl td.grow, .al-tbl th.grow { max-width: 0; width: 100%; }
+.al-tbl td.num, .al-tbl th.num { text-align: right; }
+.al-tbl tbody tr:hover { background: var(--panel-2); }
+.al-time { color: var(--muted); }
+.al-who { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
+.al-meth { font-weight: 700; color: var(--accent); }
+/* the one logged read: attention coming back, not work going out */
+.al-meth.back { color: var(--muted); }
+.al-path { color: var(--text); }
+/* colour the text in the column, never a badge around it */
+.al-st { font-weight: 600; }
+.al-st.ok { color: var(--go); }
+.al-st.warn { color: #9a6212; }
+.al-st.bad { color: var(--danger); }
+.al-pay { color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
+.al-rep { color: var(--accent); font-weight: 600; }
+
+/* the map */
+.al-map { display: flex; flex-direction: column; gap: 8px; }
+.al-mapwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); padding: 8px; }
+.al-map svg { display: block; width: 100%; min-width: 620px; height: auto; }
+.al-lane { stroke: var(--border); stroke-width: 1; }
+.al-lane-lbl { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); }
+.al-axis { font-family: var(--font-mono); font-size: 8px; fill: var(--muted); }
+.al-arrow { stroke: var(--accent); stroke-width: 1.6; }
+.al-arrow.back { stroke: var(--muted); stroke-dasharray: 3 3; }
+/* a call that failed is worth seeing in the shape, not only in the list */
+.al-arrow.bad { stroke: var(--danger); }
+.al-dot.bad { fill: var(--danger); }
+.al-dot { fill: var(--accent); }
+.al-dot.back { fill: var(--muted); }
+.al-hit { stroke: transparent; stroke-width: 11; }
+.al-arrowg { cursor: default; }
+.al-arrowg.on .al-arrow { stroke-width: 2.6; }
+.al-readout { font-size: 11px; color: var(--muted); min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.al-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--muted); }
+.al-legend i.al-key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--accent); vertical-align: middle; margin-right: 5px; }
+.al-legend i.al-key.back { border-top-style: dashed; border-color: var(--muted); }
+.al-legend i.al-key.dot { width: 6px; height: 6px; border: none; border-radius: 50%; background: var(--accent); }
+
 /* settings: skills editor */
 .settings-page.wide { max-width: 980px; }
 

web/test/apiLog.test.mjs

@@ -0,0 +1,201 @@
+// Settings → API log, in a real browser.
+//
+// Two rules here came from the operator and are the kind that decay silently,
+// so they are pinned rather than trusted:
+//
+//   1. ONE CALL PER LINE. A wrapped row halves how many calls fit on a screen.
+//      Every cell clips; the path is the only column allowed to take the slack,
+//      and below a certain width the table scrolls sideways instead of crushing
+//      it. Measured as row height, not as CSS.
+//   2. NO PILLS OR BADGES in a row. Status is coloured TEXT in its column — no
+//      border, no background, no chip.
+//
+// And one rule the map's legend claims, which is only true if the lanes are
+// ordered caller-above-target: a prompt goes from caller to target, a resolved
+// wait comes back the other way.
+//
+// Run with:  node test/apiLog.test.mjs
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { build } from 'esbuild';
+import { chromium } from 'playwright';
+import { chromiumLaunchOptions } from '../../scripts/test-chromium.mjs';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const WEB = path.join(HERE, '..');
+const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'api-log-'));
+const bundle = path.join(tmp, 'app.js');
+
+const at = (s) => new Date(Date.UTC(2026, 7, 19, 21, 0, s)).toISOString();
+const prompt = (i, from, to, chars, ok = true) => ({
+  id: `p${i}`, at: at(i), method: 'POST', path: `/api/agents/${to}/prompt`,
+  origin: { id: from, type: 'agent', name: from },
+  target: { id: to, name: to, cli: 'claude' },
+  request: { present: true, chars, sha256: `sha-${chars}` },
+  status: ok ? 200 : 404, ok, durationMs: 303, result: { ok },
+});
+const wait = (i, watcher, watched, ms) => ({
+  id: `w${i}`, at: at(i), method: 'GET', path: `/api/agents/${watched}/wait`,
+  origin: { id: watcher, type: 'agent', name: watcher },
+  target: { id: watched, name: watched, cli: 'claude' },
+  status: 200, ok: true, durationMs: ms,
+  result: { id: watched, state: 'waiting', matched: true, waited: Math.round(ms / 1000) },
+});
+// Two identical prompts (same checksum) — what a repeating job looks like.
+const operations = [
+  wait(9, 'manager', 'builder', 258000),
+  prompt(8, 'manager', 'builder', 1204),
+  prompt(7, 'manager', 'ghost-1', 12, false),
+  wait(6, 'operator', 'manager', 61000),
+  prompt(5, 'operator', 'manager', 4096),
+  prompt(4, 'manager', 'builder', 1204),
+  { id: 'f1', at: at(3), method: 'PUT', path: '/api/files/files-5/write',
+    origin: { id: 'operator', type: 'operator', name: 'operator' },
+    target: { id: 'files-5', name: 'files-5' },
+    request: { present: true, chars: 8400, sha256: 'sha-file' },
+    status: 200, ok: true, durationMs: 41, result: { ok: true } },
+];
+
+const stub = path.join(tmp, 'api-stub.ts');
+fs.writeFileSync(stub, `
+export * from ${JSON.stringify(path.join(WEB, 'src/api.ts'))};
+export const getOperations = () => Promise.resolve(${JSON.stringify({ operations, generatedAt: at(9) })});
+export const getTree = () => Promise.resolve({ sessions: [], groups: [], order: [], hidden: [] });
+`);
+
+await build({
+  stdin: {
+    resolveDir: WEB,
+    loader: 'tsx',
+    contents: `
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+      import ApiLog from './src/components/ApiLog.tsx';
+      createRoot(document.getElementById('root')).render(
+        <div className="app settings"><div className="main settings-main">
+          <div className="settings-page wide"><ApiLog /></div>
+        </div></div>);
+    `,
+  },
+  outfile: bundle,
+  bundle: true,
+  format: 'iife',
+  platform: 'browser',
+  logLevel: 'error',
+  plugins: [{ name: 'stub-api', setup(b) { b.onResolve({ filter: /(^|\/)\.\.?\/api$/ }, () => ({ path: stub })); } }],
+});
+
+const css = fs.readFileSync(path.join(WEB, 'src/styles.css'), 'utf8');
+let failed = 0;
+const check = (what, fn) => {
+  try { fn(); console.log(`  ok  ${what}`); } catch (e) {
+    failed++;
+    console.log(`  FAIL ${what}\n       ${e.message.split('\n')[0]}`);
+  }
+};
+
+const browser = await chromium.launch(chromiumLaunchOptions());
+const open = async (width) => {
+  const page = await browser.newPage({ viewport: { width, height: 900 } });
+  await page.setContent(`<style>${css}</style><div id="root"></div>`);
+  await page.addScriptTag({ path: bundle });
+  await page.waitForFunction(() => !!document.querySelector('.al-tbl tbody tr'));
+  return page;
+};
+
+try {
+  for (const width of [1200, 390]) {
+    const page = await open(width);
+    const m = await page.evaluate(() => {
+      const rows = [...document.querySelectorAll('.al-tbl tbody tr')];
+      const line = parseFloat(getComputedStyle(document.querySelector('.al-tbl')).fontSize) * 2.4;
+      const st = document.querySelector('.al-st');
+      const stStyle = getComputedStyle(st);
+      const main = document.querySelector('.settings-main');
+      return {
+        rows: rows.length,
+        tallest: Math.max(...rows.map((r) => r.getBoundingClientRect().height)),
+        line,
+        clipped: rows.every((r) => [...r.children].every((c) => getComputedStyle(c).whiteSpace === 'nowrap')),
+        badge: {
+          border: stStyle.borderTopWidth,
+          background: stStyle.backgroundColor,
+          radius: stStyle.borderTopLeftRadius,
+          colour: stStyle.color,
+        },
+        paneOverflow: main.scrollWidth > main.clientWidth,
+      };
+    });
+    console.log(`the list at ${width}px`);
+    check(`every one of the ${m.rows} rows is a single line`, () => assert.ok(m.tallest < m.line, `tallest ${m.tallest}px`));
+    check('and every cell clips rather than wraps', () => assert.ok(m.clipped));
+    check('status is coloured text, not a badge', () => assert.deepEqual(
+      { border: m.badge.border, background: m.badge.background, radius: m.badge.radius },
+      { border: '0px', background: 'rgba(0, 0, 0, 0)', radius: '0px' },
+    ));
+    check('…and it does carry a colour', () => assert.ok(!/rgba?\(0, 0, 0/.test(m.badge.colour), m.badge.colour));
+    check('the page itself never scrolls sideways', () => assert.ok(!m.paneOverflow));
+    await page.close();
+    console.log('');
+  }
+
+  const page = await open(1200);
+  const list = await page.evaluate(() => {
+    const cells = [...document.querySelectorAll('.al-tbl tbody tr')].map((r) => [...r.children].map((c) => c.textContent.trim()));
+    return { first: cells[0], repeats: [...document.querySelectorAll('.al-rep')].map((e) => e.textContent.trim()) };
+  });
+  console.log('what a row says');
+  check('a resolved wait reads as one, with the time it blocked for',
+    () => assert.deepEqual(list.first.slice(2), ['GET /api/agents/builder/wait', '200', '4m 18s', 'resolved · waiting']));
+  check('identical prompts are marked as repeats, since the text itself is never stored',
+    () => assert.deepEqual(list.repeats, ['×2', '×2']));
+
+  await page.click('.al-view button:nth-child(2)');
+  await page.waitForSelector('.al-map svg');
+  const map = await page.evaluate(() => {
+    const labels = [...document.querySelectorAll('.al-lane-lbl')];
+    const lanes = labels.map((t) => t.textContent);
+    // Which lane an endpoint sits on: the arrow stops a few px short of the
+    // hairline, so snap to the nearest lane label.
+    const laneYs = labels.map((t) => Number(t.getAttribute('y')));
+    const laneAt = (y) => laneYs.reduce((best, ly, i) => (Math.abs(ly - y) < Math.abs(laneYs[best] - y) ? i : best), 0);
+    const arrows = [...document.querySelectorAll('.al-arrow')].map((l) => ({
+      back: l.classList.contains('back'),
+      bad: l.classList.contains('bad'),
+      down: Number(l.getAttribute('y2')) > Number(l.getAttribute('y1')),
+      src: lanes[laneAt(Number(l.getAttribute('y1')))],
+      dst: lanes[laneAt(Number(l.getAttribute('y2')))],
+      dashed: !!getComputedStyle(l).strokeDasharray && getComputedStyle(l).strokeDasharray !== 'none',
+    }));
+    return { lanes, arrows };
+  });
+  console.log('\nthe map');
+  check('callers are laid out above the agents they call',
+    () => assert.ok(map.lanes.indexOf('manager') < map.lanes.indexOf('builder'), map.lanes.join(' < ')));
+  check('a prompt is an arrow from caller down to target',
+    () => assert.ok(map.arrows.some((a) => !a.back && a.down)));
+  check('a resolved wait is an arrow back the other way, dashed',
+    () => assert.ok(map.arrows.some((a) => a.back && !a.down && a.dashed)));
+  // The claim is about direction between the two agents, not about up and down
+  // on the screen: if A calls B and B also calls A, one of the pairs has to run
+  // the other way. What must hold is that the wait reverses its own prompt.
+  check('the wait reverses the prompt it answers — manager → builder, builder → manager',
+    () => {
+      const out = map.arrows.find((a) => !a.back && a.src === 'manager' && a.dst === 'builder');
+      const back = map.arrows.find((a) => a.back && a.src === 'builder' && a.dst === 'manager');
+      assert.ok(out && back, JSON.stringify(map.arrows));
+      assert.ok(out.down && !back.down, 'and with callers on top that reads as out and back');
+    });
+  check('a failed call is visible in the shape too',
+    () => assert.ok(map.arrows.some((a) => a.bad)));
+  await page.close();
+} finally {
+  await browser.close();
+  fs.rmSync(tmp, { recursive: true, force: true });
+}
+
+console.log(failed ? `\n${failed} failed` : '\napi-log: ok');
+process.exit(failed ? 1 : 0);