catherd-cli 1.0.0 → 1.1.0

package/src/entry/tui/views/runs.tsx

@@ -1,47 +1,30 @@
+import { type MutableRefObject, useEffect, useRef, useState } from "react";
 import { useApp, useBack, useNow } from "../providers/app.tsx";
-import { usePoll, useData } from "../providers/data.tsx";
+import { useData, usePoll } from "../providers/data.tsx";
 import { useCommandLayer } from "../providers/keymap.tsx";
 import { errorToast } from "../providers/toast.tsx";
 import { useUi } from "../providers/theme.tsx";
 import { isArmed } from "../state.ts";
-import { ago, clock, shortRung } from "../text.ts";
+import { ago, clock, plural, shortRung, wrap, wrapHanging } from "../text.ts";
 import { glyph, mascot, type Token } from "../theme.ts";
+import type { RoleRow, SessionRow, SessionRun } from "../effects.ts";
 import { Line, type Part } from "../widgets/line.tsx";
 import { List, type ListItem, useSelected } from "../widgets/list.tsx";
-import type { RunDetail } from "../effects.ts";
-import { runParts } from "./status.tsx";
 
-/** How often an open run is read again, unless paused. */
+/** How often an open screen is read again when its run folders cannot be watched, unless paused (spec §4). */
 export const RUN_EVERY_MS = 1_000;
-
-/** `[██████░░░░] 52% · 31/60 min`, green below 80 %, amber below 100 %, red at 100 % (spec §4.6). */
-function budgetParts(d: RunDetail, width: number, plain: boolean): Part[] {
-  const b = d.summary.budget;
-  if (!b) return [{ text: "no budget cap", tone: "muted" }];
-  const cells = Math.max(10, Math.min(30, width - 40));
-  const full = Math.min(cells, Math.round(b.fraction * cells));
-  const tone: Token = b.fraction >= 1 ? "error" : b.fraction >= 0.8 ? "warning" : "success";
-  const caps = [
-    b.minutes ? `${Math.round(b.minutes.spent)}/${b.minutes.cap} min` : "",
-    b.tokens ? `${b.tokens.spent}/${b.tokens.cap} tokens` : "",
-    b.usd ? `$${b.usd.spent.toFixed(2)}/$${b.usd.cap.toFixed(2)}` : "",
-  ].filter(Boolean);
-  return [
-    { text: "[" },
-    { text: glyph("full", plain).repeat(full), tone },
-    { text: glyph("empty", plain).repeat(cells - full), tone: "muted" },
-    { text: `] ${Math.round(b.fraction * 100)}%`, tone },
-    { text: ` · ${caps.join(" · ")}`, tone: "muted" },
-  ];
-}
+/** How often a watched screen is read again all the same: a run that joins the session has no watch yet. */
+export const WATCHED_EVERY_MS = 5_000;
 
 /**
  * The selected row, where moving the cursor takes back a first ctrl+d (Ruling 3: moving or esc disarms),
  * as the dialog list does.
  */
-function useSelection(): [string | null, (key: string) => void, () => string | null] {
+function useSelection(
+  initial: string | null = null,
+): [string | null, (key: string) => void, () => string | null] {
   const app = useApp();
-  const sel = useSelected();
+  const sel = useSelected(initial);
   const select = (key: string) => {
     if (key !== sel.current() && app.getState().armed) app.dispatch({ type: "disarm" });
     sel.select(key);
@@ -49,41 +32,76 @@ function useSelection(): [string | null, (key: string) => void, () => string | n
   return [sel.selected, select, sel.current];
 }
 
-function RunList(props: { width: number; height: number }) {
+/** One session of the top level: `● live  <name>  2 runs · 3 live roles · 1 landed  4m ago` (spec §4). */
+export function sessionParts(s: SessionRow, now: number, plain: boolean): Part[] {
+  return [
+    s.live
+      ? { text: `${glyph("live", plain)} live  `, tone: "info" }
+      : { text: `${glyph("dot", plain)} idle  `, tone: "muted" },
+    { text: `${s.name}  `, bold: true },
+    {
+      text: `${plural(s.runs, "run")} · ${plural(s.liveRoles, "live role")} · ${s.landed} landed  `,
+      tone: "muted",
+    },
+    { text: ago(now - Date.parse(s.lastActivity)), tone: "muted" },
+  ];
+}
+
+const keyOf = (k: string | null) => (k === null ? "earlier" : `s:${k}`);
+const fromKey = (k: string) => (k === "earlier" ? null : k.slice("s:".length));
+const roleKey = (run: string, dispatchId: string) => `role:${run}:${dispatchId}`;
+const milestoneKey = (run: string, name: string) => `ms:${run}:${name}`;
+
+/** What `r` re-reads: the open screen registers its read here (the command lives on the tab). */
+type Refresher = MutableRefObject<(() => void) | null>;
+
+/** Registers `refresh` as the open screen's while it is mounted. */
+function useRefresher(refresher: Refresher, refresh: () => void) {
+  // after every commit, and cleared only while still its own: the screen that replaces this one registers
+  // after this one's cleanup has run
+  useEffect(() => {
+    refresher.current = refresh;
+    return () => {
+      if (refresher.current === refresh) refresher.current = null;
+    };
+  });
+}
+
+function SessionList(props: { width: number; height: number; initial: string | null }) {
   const app = useApp();
   const data = useData();
   const ui = useUi();
   const now = useNow(1_000);
-  const [selected, setSelected, selectedNow] = useSelection();
-  const rows = data.runs.value?.rows ?? [];
+  const [selected, setSelected, selectedNow] = useSelection(props.initial);
+  const rows = data.sessions.value?.rows ?? [];
   useCommandLayer("row.runs", {
     "runs.open": () => {
-      const id = selectedNow();
-      if (id) app.dispatch({ type: "run", id });
+      const k = selectedNow();
+      if (k) app.dispatch({ type: "session", key: fromKey(k) });
     },
   });
   const updated = app.state.paused
     ? "paused"
-    : data.runs.at !== null
-      ? `updated ${ago(now - data.runs.at)}`
+    : data.sessions.at !== null
+      ? `updated ${ago(now - data.sessions.at)}`
       : "";
-  const items: ListItem[] = rows.map((r) => ({
-    key: r.id,
+  const items: ListItem[] = rows.map((s) => ({
+    key: keyOf(s.key),
     selectable: true,
     render: (sel, w) => (
-      <Line width={w} selected={sel} parts={[{ text: " " }, ...runParts(r, now, ui.plain)]} />
+      <Line width={w} selected={sel} parts={[{ text: " " }, ...sessionParts(s, now, ui.plain)]} />
     ),
   }));
-  const warnings = data.runs.value?.warnings ?? [];
+  const warnings = data.sessions.value?.warnings ?? [];
   // a failed read says so, whether rows from an earlier good read are shown, none were, or none exist
-  const failed = data.runs.error;
+  const failed = data.sessions.error;
   const failure = failed ? (
     <Line
       width={props.width}
       parts={[{ text: ` ${glyph("fail", ui.plain)} could not read the runs: ${failed}`, tone: "error" }]}
     />
   ) : null;
-  if (rows.length === 0 && data.runs.value) {
+  if (rows.length === 0 && data.sessions.value) {
     const art = mascot("waiting");
     return (
       <box flexDirection="column" width={props.width} height={props.height} paddingTop={failed ? 1 : 2}>
@@ -105,7 +123,7 @@ function RunList(props: { width: number; height: number }) {
       <Line
         width={props.width}
         parts={[
-          { text: " RUNS", bold: true },
+          { text: " SESSIONS", bold: true },
           { text: `  ${updated}`, tone: app.state.paused ? "warning" : "muted" },
         ]}
       />
@@ -130,27 +148,92 @@ function RunList(props: { width: number; height: number }) {
   );
 }
 
-function RunView(props: { id: string; width: number; height: number }) {
+/** A finished role's glyph and colour by its record's status; a live one's by running or starting. */
+function roleMark(r: RoleRow, plain: boolean): Part {
+  if (r.live) return { text: glyph(r.status === "running" ? "live" : "waiting", plain), tone: "info" };
+  const tone: Token =
+    r.status === "ok"
+      ? "success"
+      : r.status === "cancelled"
+        ? "muted"
+        : r.status === "limit"
+          ? "warning"
+          : "error";
+  return { text: glyph(r.status === "ok" ? "ok" : r.status === "cancelled" ? "skip" : "fail", plain), tone };
+}
+
+/** A run's heading on its session's screen: title, repo, when it started, its budget, where it moved. */
+function runHeading(r: SessionRun, now: number, plain: boolean): Part[] {
+  const bits = [r.repo, `started ${ago(now - Date.parse(r.createdAt))}`];
+  if (r.budget !== null) bits.push(`budget ${Math.round(r.budget * 100)}%`);
+  const moved =
+    r.continued === "here" ? "continued here" : r.continuedIn ? `continued in ${r.continuedIn}` : null;
+  return [
+    { text: ` ${glyph("shut", plain)} ` },
+    { text: r.title, bold: true },
+    { text: `  ${bits.join(" · ")}`, tone: "muted" },
+    ...(moved ? [{ text: ` · ${moved}`, tone: "info" as Token }] : []),
+  ];
+}
+
+/** Spec §4: the open screen redraws when a run file changes, else every second; `p` stops both. */
+function useLiveRead<T extends { dirs: string[] }>(read: () => T, key: string) {
+  const app = useApp();
+  const [watching, setWatching] = useState(false);
+  const polled = usePoll(read, watching ? WATCHED_EVERY_MS : RUN_EVERY_MS, { paused: app.state.paused, key });
+  const refresh = useRef(polled.refresh);
+  refresh.current = polled.refresh;
+  const dirs = polled.value?.dirs.join("\n") ?? "";
+  useEffect(() => {
+    if (app.state.paused || dirs === "") {
+      setWatching(false);
+      return;
+    }
+    const stop = app.effects.watch(dirs.split("\n"), () => refresh.current());
+    setWatching(stop !== null);
+    return () => stop?.();
+  }, [dirs, app.state.paused, app.effects]);
+  return { ...polled, watching };
+}
+
+function SessionView(props: {
+  sessionKey: string | null;
+  width: number;
+  height: number;
+  initial: string | null;
+  refresher: Refresher;
+}) {
   const app = useApp();
   const ui = useUi();
   const now = useNow(1_000);
-  const [selected, setSelected, selectedNow] = useSelection();
-  const polled = usePoll(() => app.effects.run(props.id), RUN_EVERY_MS, {
-    paused: app.state.paused,
-    key: props.id,
-  });
-  useBack(true, "view", () => app.dispatch({ type: "run", id: null }));
+  const [selected, setSelected, selectedNow] = useSelection(props.initial);
+  const polled = useLiveRead(() => app.effects.session(props.sessionKey), String(props.sessionKey));
+  useRefresher(props.refresher, polled.refresh);
+  useBack(true, "view", () => app.dispatch({ type: "up" }));
   const d = polled.value;
-  const laneOf = (key: string | null) => (key?.startsWith("lane:") ? key.slice("lane:".length) : null);
+  const roleAt = (key: string | null) =>
+    d?.runs.flatMap((r) => r.roles).find((x) => key === roleKey(x.run, x.dispatchId)) ?? null;
+  const milestoneAt = (key: string | null) =>
+    d?.runs
+      .flatMap((r) => r.milestones.map((m) => ({ run: r.id, name: m.name })))
+      .find((x) => key === milestoneKey(x.run, x.name)) ?? null;
   useCommandLayer("row.runs", {
+    "runs.open": () => {
+      const k = selectedNow();
+      const m = milestoneAt(k);
+      if (m) return app.dispatch({ type: "milestone", run: m.run, name: m.name });
+      const r = roleAt(k);
+      if (r) app.dispatch({ type: "role", run: r.run, dispatchId: r.dispatchId });
+    },
     "runs.cancel": () => {
-      const lane = laneOf(selectedNow());
-      if (!lane) return;
+      const r = roleAt(selectedNow());
+      if (!r?.live) return;
+      const target = `${r.run}/${r.name}`;
       const t = app.clock.now();
-      if (!isArmed(app.getState(), "cancel", lane, t))
-        return app.dispatch({ type: "arm", what: "cancel", target: lane, at: t });
+      if (!isArmed(app.getState(), "cancel", target, t))
+        return app.dispatch({ type: "arm", what: "cancel", target, at: t });
       app.dispatch({ type: "disarm" });
-      void app.effects.cancel(props.id, lane).then(
+      void app.effects.cancel(r.run, r.name).then(
         (msg) => {
           app.toast({ variant: "success", message: msg });
           polled.refresh();
@@ -165,88 +248,259 @@ function RunView(props: { id: string; width: number; height: number }) {
         width={props.width}
         parts={[
           {
-            text: polled.error ? ` ${polled.error}` : " reading the run…",
+            text: polled.error ? ` ${polled.error}` : " reading the session…",
             tone: polled.error ? "error" : "muted",
           },
         ]}
       />
     );
-  const s = d.summary;
   const items: ListItem[] = [];
   const text = (key: string, parts: Part[]) =>
     items.push({ key, selectable: false, render: (_sel, w) => <Line width={w} parts={parts} /> });
-  const heading = (key: string, label: string) => text(key, [{ text: ` ${label}`, bold: true }]);
-  heading("h:live", "LIVE");
-  if (s.live.length === 0) text("live:none", [{ text: "   no role is running", tone: "muted" }]);
-  for (const l of s.live) {
-    const armed = isArmed(app.state, "cancel", l.name, app.clock.now());
+  for (const r of d.runs) {
+    text(`run:${r.id}`, runHeading(r, now, ui.plain));
+    // spec 1.1 §10: each milestone is a row; enter opens it on its digest
+    for (const m of r.milestones)
+      items.push({
+        key: milestoneKey(r.id, m.name),
+        selectable: true,
+        render: (sel, w) => (
+          <Line
+            width={w}
+            selected={sel}
+            parts={[
+              { text: "   " },
+              m.landed
+                ? { text: `${glyph("ok", ui.plain)} ${m.name}`, tone: "success" }
+                : { text: `${glyph("waiting", ui.plain)} ${m.name}`, tone: "muted" },
+              m.landed
+                ? { text: m.what ? `  ${m.what}` : "", tone: "muted" }
+                : { text: "  not landed", tone: "muted" },
+            ]}
+          />
+        ),
+      });
+    if (r.roles.length === 0) text(`none:${r.id}`, [{ text: "   no role has run yet", tone: "muted" }]);
+    for (const x of r.roles) {
+      const secs = x.live ? (now - Date.parse(x.since)) / 1000 : (x.secs ?? 0);
+      const armed = isArmed(app.state, "cancel", `${x.run}/${x.name}`, app.clock.now());
+      items.push({
+        key: roleKey(x.run, x.dispatchId),
+        selectable: true,
+        render: (sel, w) => (
+          <Line
+            width={w}
+            selected={sel}
+            parts={[
+              { text: "   " },
+              roleMark(x, ui.plain),
+              { text: ` ${x.name.padEnd(15)} `, bold: true },
+              { text: shortRung(x.rung).padEnd(19) },
+              { text: x.status.padEnd(9), tone: x.live ? "info" : "muted" },
+              { text: clock(secs).padEnd(7) },
+              armed
+                ? { text: "press ctrl+d again to cancel", tone: "warning" }
+                : { text: x.lastEvent ?? "", tone: "muted" },
+            ]}
+          />
+        ),
+      });
+    }
+  }
+  const s = d.session;
+  const updated = app.state.paused ? "paused" : polled.at !== null ? `updated ${ago(now - polled.at)}` : "";
+  return (
+    <box flexDirection="column" width={props.width} height={props.height}>
+      <Line
+        width={props.width}
+        parts={[
+          { text: ` ${s.name}  `, bold: true },
+          s.live
+            ? { text: `${glyph("live", ui.plain)} live`, tone: "info" }
+            : { text: `${glyph("dot", ui.plain)} idle`, tone: "muted" },
+          { text: ` · ${plural(s.runs, "run")} · ${plural(s.liveRoles, "live role")} · `, tone: "muted" },
+          { text: updated, tone: app.state.paused ? "warning" : "muted" },
+          {
+            text: polled.error ? ` · ${glyph("fail", ui.plain)} could not read it: ${polled.error}` : "",
+            tone: "error",
+          },
+        ]}
+      />
+      <List
+        items={items}
+        selected={selected}
+        onSelect={setSelected}
+        width={props.width}
+        height={props.height - 1}
+        filter={null}
+        empty=""
+      />
+    </box>
+  );
+}
+
+function RoleView(props: {
+  run: string;
+  dispatchId: string;
+  width: number;
+  height: number;
+  refresher: Refresher;
+}) {
+  const app = useApp();
+  const ui = useUi();
+  const [selected, setSelected] = useSelection();
+  const polled = usePoll(() => app.effects.role(props.run, props.dispatchId), RUN_EVERY_MS, {
+    paused: app.state.paused,
+    key: `${props.run}/${props.dispatchId}`,
+  });
+  useRefresher(props.refresher, polled.refresh);
+  useBack(true, "view", () => app.dispatch({ type: "up" }));
+  const d = polled.value;
+  if (!d)
+    return (
+      <Line
+        width={props.width}
+        parts={[
+          {
+            text: polled.error ? ` ${polled.error}` : " reading the role…",
+            tone: polled.error ? "error" : "muted",
+          },
+        ]}
+      />
+    );
+  const items: ListItem[] = [];
+  const room = Math.max(10, props.width - 4);
+  let n = 0;
+  const line = (parts: Part[]) =>
     items.push({
-      key: `lane:${l.name}`,
+      key: `l${n++}`,
       selectable: true,
-      render: (sel, w) => (
-        <Line
-          width={w}
-          selected={sel}
-          parts={[
-            { text: `   ${glyph(l.state === "running" ? "live" : "waiting", ui.plain)} `, tone: "info" },
-            { text: l.name.padEnd(16), bold: true },
-            { text: shortRung(l.rung).padEnd(20) },
-            { text: clock(l.secs).padEnd(8) },
-            armed
-              ? { text: "press ctrl+d again to cancel", tone: "warning" }
-              : { text: l.state, tone: "muted" },
-          ]}
-        />
-      ),
+      render: (sel, w) => <Line width={w} selected={sel} parts={parts} />,
     });
+  const section = (title: string, body: string, none: string) => {
+    line([{ text: ` ${title}`, bold: true }]);
+    const lines = body.trimEnd() ? body.trimEnd().split("\n") : [];
+    if (lines.length === 0) line([{ text: `   ${none}`, tone: "muted" }]);
+    for (const l of lines) for (const w of wrap(l, room)) line([{ text: `   ${w}` }]);
+  };
+  section("BRIEF", d.brief, "no brief");
+  section("REPLY", d.reply, d.state === "finished" ? "no reply" : "no reply yet: the role is running");
+  line([{ text: " RECORD", bold: true }]);
+  const r = d.record;
+  if (!r) line([{ text: "   none yet: the role is running", tone: "muted" }]);
+  else {
+    const k = (x: number) => `${Math.round(x / 1000)}k`;
+    line([
+      { text: `   ${r.status}`, tone: r.status === "ok" ? "success" : "error" },
+      {
+        text: r.replyStatus
+          ? ` · STATUS ${r.replyStatus}${r.replyWhy ? ` — ${r.replyWhy}` : ""}`
+          : " · no STATUS",
+      },
+    ]);
+    line([
+      {
+        text: `   ${clock(r.secs)} · ${k(r.tokens.input)} in (${k(r.tokens.cached)} cached) · ${k(r.tokens.output)} out`,
+        tone: "muted",
+      },
+    ]);
+    line([{ text: `   changed ${r.changedOwned.join(", ") || "nothing it owns"}`, tone: "muted" }]);
+    if (r.violations.length)
+      line([{ text: `   outside its lane: ${r.violations.join(", ")}`, tone: "warning" }]);
+    if (r.thread) line([{ text: `   thread ${r.thread}`, tone: "muted" }]);
   }
-  if (d.climbs.length) heading("h:climbs", "CLIMBS");
-  d.climbs.forEach((c, i) =>
-    text(`climb:${i}`, [
-      { text: `   ${c.lane.padEnd(8)} ` },
-      { text: `${shortRung(c.from)} ${glyph("arrow", ui.plain)} ${shortRung(c.to)}` },
-      { text: `  ${c.reason}${c.env ? " (environment)" : ""}`, tone: "muted" },
-    ]),
-  );
-  if (d.decisions.length) heading("h:routes", "ROUTES");
-  d.decisions.forEach((r, i) =>
-    text(`route:${i}`, [
-      { text: `   ${r.lane.padEnd(8)} ${r.role.padEnd(10)}` },
-      { text: `${r.source.padEnd(8)}`, tone: r.source === "jev" ? "info" : "muted" },
-      { text: `${r.kind ?? "-"}/${r.difficulty ?? "-"}  `, tone: "muted" },
-      { text: shortRung(r.rung) },
-    ]),
-  );
-  if (s.milestones.length) heading("h:landed", "LANDED");
-  s.milestones.forEach((m, i) =>
-    text(`landed:${i}`, [{ text: `   ${glyph("ok", ui.plain)} `, tone: "success" }, { text: m }]),
-  );
-  if (s.stateTail.length) heading("h:next", "STATE");
-  s.stateTail.forEach((l, i) => text(`state:${i}`, [{ text: `   ${l}`, tone: "muted" }]));
-  const updated = app.state.paused ? "paused" : polled.at !== null ? `updated ${ago(now - polled.at)}` : "";
-  const t = s.totals;
   return (
     <box flexDirection="column" width={props.width} height={props.height}>
       <Line
         width={props.width}
         parts={[
-          { text: ` ${s.title}`, bold: true },
-          { text: `  ${s.repo} · started ${ago(now - Date.parse(s.createdAt))} · `, tone: "muted" },
-          { text: updated, tone: app.state.paused ? "warning" : "muted" },
+          { text: ` ${d.name}`, bold: true },
+          {
+            text: ` ${d.role} · ${shortRung(d.rung)} · ${r?.status ?? d.state} · ${d.runTitle}`,
+            tone: "muted",
+          },
           {
-            text: polled.error ? ` · ${glyph("fail", ui.plain)} could not read the run: ${polled.error}` : "",
+            text: polled.error ? ` · ${glyph("fail", ui.plain)} could not read it: ${polled.error}` : "",
             tone: "error",
           },
         ]}
       />
-      <Line width={props.width} parts={[{ text: " budget " }, ...budgetParts(d, props.width, ui.plain)]} />
+      <List
+        items={items}
+        selected={selected}
+        onSelect={setSelected}
+        width={props.width}
+        height={props.height - 1}
+        filter={null}
+        empty=""
+      />
+    </box>
+  );
+}
+
+/** Spec 1.1 §10: a milestone's screen, the digest `land` wrote for it. */
+function MilestoneView(props: {
+  run: string;
+  name: string;
+  width: number;
+  height: number;
+  refresher: Refresher;
+}) {
+  const app = useApp();
+  const ui = useUi();
+  const [selected, setSelected] = useSelection();
+  const polled = usePoll(() => app.effects.milestone(props.run, props.name), RUN_EVERY_MS, {
+    paused: app.state.paused,
+    key: `${props.run}/${props.name}`,
+  });
+  useRefresher(props.refresher, polled.refresh);
+  useBack(true, "view", () => app.dispatch({ type: "up" }));
+  const d = polled.value;
+  if (!d)
+    return (
       <Line
         width={props.width}
         parts={[
           {
-            text: ` ${t.runs} role runs, ${t.ok} ok · ${(t.tokens.input / 1000).toFixed(0)}k in · ${(t.tokens.output / 1000).toFixed(0)}k out · $${t.costUsd.toFixed(2)}`,
+            text: polled.error ? ` ${polled.error}` : " reading the milestone…",
+            tone: polled.error ? "error" : "muted",
+          },
+        ]}
+      />
+    );
+  const items: ListItem[] = [];
+  const room = Math.max(10, props.width - 4);
+  let n = 0;
+  const line = (parts: Part[]) =>
+    items.push({
+      key: `l${n++}`,
+      selectable: true,
+      render: (sel, w) => <Line width={w} selected={sel} parts={parts} />,
+    });
+  line([{ text: " DIGEST", bold: true }]);
+  const body = d.digest?.trimEnd() ?? "";
+  if (!body)
+    line([
+      {
+        text: `   no digest yet${d.landed ? "" : ": the milestone has not landed"}`,
+        tone: "muted",
+      },
+    ]);
+  else for (const l of body.split("\n")) for (const w of wrapHanging(l, room)) line([{ text: `   ${w}` }]);
+  return (
+    <box flexDirection="column" width={props.width} height={props.height}>
+      <Line
+        width={props.width}
+        parts={[
+          { text: ` ${d.name}`, bold: true },
+          {
+            text: ` ${d.what ? `${d.what} · ` : ""}${d.landed ? "landed" : "not landed"} · ${d.runTitle}`,
             tone: "muted",
           },
+          {
+            text: polled.error ? ` · ${glyph("fail", ui.plain)} could not read it: ${polled.error}` : "",
+            tone: "error",
+          },
         ]}
       />
       <List
@@ -254,7 +508,7 @@ function RunView(props: { id: string; width: number; height: number }) {
         selected={selected}
         onSelect={setSelected}
         width={props.width}
-        height={props.height - 3}
+        height={props.height - 1}
         filter={null}
         empty=""
       />
@@ -262,20 +516,58 @@ function RunView(props: { id: string; width: number; height: number }) {
   );
 }
 
-/** Spec §9.1 tab 3: the run list; enter opens a run (live lanes, climbs, routes, budget, landed); p pauses. */
+/**
+ * Spec §4 (tab 3): the sessions, newest activity first; enter opens a session (its runs, milestones and roles,
+ * live ones first), enter on a milestone opens its digest (spec 1.1 §10), enter on a role opens it (brief,
+ * reply, record); esc goes back one level; p pauses.
+ */
 export function RunsView(props: { width: number; height: number }) {
   const app = useApp();
   const data = useData();
+  const refresher: Refresher = useRef(null);
   useCommandLayer("tab.runs", {
-    "runs.refresh": () => data.runs.refresh(),
+    "runs.refresh": () => (refresher.current ?? data.sessions.refresh)(),
     "runs.pause": () => {
       app.dispatch({ type: "pause" });
       app.toast({ variant: "info", message: app.getState().paused ? "Updates paused" : "Updates resumed" });
     },
   });
-  return app.state.run ? (
-    <RunView id={app.state.run} width={props.width} height={props.height} />
-  ) : (
-    <RunList width={props.width} height={props.height} />
-  );
+  const { milestone, role, session } = app.state;
+  // esc lands on the row it came from: the last session opened, and the last milestone or role opened in it
+  const back = useRef<{ session: string | null; row: string | null }>({ session: null, row: null });
+  if (session && back.current.session !== keyOf(session.key))
+    back.current = { session: keyOf(session.key), row: null };
+  if (milestone) back.current.row = milestoneKey(milestone.run, milestone.name);
+  if (role) back.current.row = roleKey(role.run, role.dispatchId);
+  if (milestone)
+    return (
+      <MilestoneView
+        run={milestone.run}
+        name={milestone.name}
+        width={props.width}
+        height={props.height}
+        refresher={refresher}
+      />
+    );
+  if (role)
+    return (
+      <RoleView
+        run={role.run}
+        dispatchId={role.dispatchId}
+        width={props.width}
+        height={props.height}
+        refresher={refresher}
+      />
+    );
+  if (session)
+    return (
+      <SessionView
+        sessionKey={session.key}
+        width={props.width}
+        height={props.height}
+        initial={back.current.row}
+        refresher={refresher}
+      />
+    );
+  return <SessionList width={props.width} height={props.height} initial={back.current.session} />;
 }

package/src/entry/tui/views/status.tsx

@@ -127,7 +127,8 @@ export function StatusView(props: { width: number; height: number }) {
         parts={[
           { text: `   ${profiles.here}`, bold: true },
           {
-            text: `  ${hereWord(profiles)} · ${plural(profiles.names.length, "profile")}`,
+            // "…" until the first read: never "0 profiles" on the first frame (spec 1.1 §13)
+            text: `  ${hereWord(profiles)} · ${data.profiles.value ? plural(profiles.names.length, "profile") : "…"}`,
             tone: "muted",
           },
         ]}
@@ -188,8 +189,10 @@ export function StatusView(props: { width: number; height: number }) {
       if (name !== null) {
         showProfile(app, name);
       } else if (selected?.startsWith("run:")) {
+        // spec §4: a run opens in its session's screen, which shows it with the session's other runs
+        const row = runs.find((r) => `run:${r.id}` === selected);
         app.dispatch({ type: "tab", tab: "runs" });
-        app.dispatch({ type: "run", id: selected.slice("run:".length) });
+        if (row) app.dispatch({ type: "session", key: row.session });
       }
     },
   });