@clemrig/flow-ui 0.3.0 → 0.4.0

package/README.md

@@ -11,7 +11,7 @@ npm install -g @clemrig/flow-ui
 flow-ui [RUNS_DIR] [--port PORT]
 ```
 
-`flow-ui` serves the runs kept in `RUNS_DIR` (default: `.flow/runs`, where `@clemrig/flow` keeps them; a `RUNS_DIR` given must be an existing directory) on `127.0.0.1`, on `PORT` or a port the system chooses, prints its URL and stops on Ctrl-C. The page lists the runs with their workflow, status, current stage, duration, estimated cost and last update, and for a run its runtimes, a timeline with one block per stage (the agent call's model and settings, its tools and tokens, journal, decision), its correction counters and its result. It follows a running run as it goes, and follows the selected run again when it is resumed. A result shows the run's validated data as JSON.
+`flow-ui` serves the runs kept in `RUNS_DIR` (default: `.flow/runs`, where `@clemrig/flow` keeps them; a `RUNS_DIR` given must be an existing directory) on `127.0.0.1`, on `PORT` or a port the system chooses, prints its URL and stops on Ctrl-C. The page lists the runs with their workflow, status, current stage, duration, estimated cost and last update, and for a run a card with its start, end, active time and cost, then each launch (the first one, then each resumption) with its status, the cause of a failure and a strip of its stages sized by duration; the list of its stages beside the selected one's panel (start, duration, outcome, the agent call's model, settings, tools and tokens, the tools used, then the journal and the tool calls); its correction counters, its result and its runtimes. It follows a running run as it goes, and follows the selected run again when it is resumed. A result shows the run's validated data as JSON.
 
 To watch a run on another machine, forward the same port through SSH: `ssh -L 4321:127.0.0.1:4321 machine`, run `flow-ui --port 4321` there, and open `http://localhost:4321/`.
 

package/dist/server.js

@@ -33,6 +33,7 @@ const pageFiles = {
     "/dashboard.js": ["dashboard.js", "text/javascript; charset=utf-8"],
     "/timeline.js": ["timeline.js", "text/javascript; charset=utf-8"],
     "/follow.js": ["follow.js", "text/javascript; charset=utf-8"],
+    "/detail.js": ["detail.js", "text/javascript; charset=utf-8"],
 };
 async function loadPage() {
     const page = new Map();

package/dist/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"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"}

package/dist/static/dashboard.js

@@ -3,35 +3,13 @@
  * The dashboard: the run list every 2 seconds, and the selected run as
  * `follow.js` follows it. Text only, never HTML.
  */
+import { detailSections } from "./detail.js";
 import { follower } from "./follow.js";
-import { cost, duration, settingsLines, timeline } from "./timeline.js";
+import { cost, duration } from "./timeline.js";
 
 /** @typedef {import("@clemrig/flow").RunEvent} RunEvent */
-/** @typedef {import("./timeline.js").Block} Block */
-
-/**
- * @typedef {object} Summary
- * @property {string} id
- * @property {string} [workflow]
- * @property {string} [status]
- * @property {string} [stage]
- * @property {number | null} [durationMs]
- * @property {number | null} [costUsd]
- * @property {boolean} [partial]
- * @property {string} [updatedAt]
- * @property {string} [error] Why the run cannot be read.
- */
-
-/**
- * @typedef {object} Detail
- * @property {Required<Omit<Summary, "error">>} run
- * @property {Record<string, string>} runtimes
- * @property {string | null} error
- * @property {RunEvent[]} events
- * @property {number} next
- * @property {import("@clemrig/flow").Correction[]} corrections
- * @property {string[]} result
- */
+/** @typedef {import("./detail.js").Summary} Summary */
+/** @typedef {import("./detail.js").Detail} Detail */
 
 const LIST_EVERY_MS = 2000;
 const DETAIL_EVERY_MS = 1000;
@@ -70,11 +48,6 @@ function time(iso) {
       });
 }
 
-/** @param {import("@clemrig/flow").TokenCounts} tokens */
-function tokenLine(tokens) {
-  return `${tokens.input} input · ${tokens.output} output · ${tokens.cacheRead} cache read · ${tokens.cacheWrite} cache write tokens`;
-}
-
 /**
  * @param {string} path
  * @returns {Promise<any>}
@@ -127,82 +100,41 @@ function showRuns(runs) {
   );
 }
 
-/** @param {Block} block */
-function showBlock(block) {
-  const item = el("li", undefined, "block");
-  const head = el("p");
-  head.append(
-    `${block.kind} ${block.stage} · `,
-    el("span", block.status, block.status),
-    block.durationMs === null ? "" : ` · ${duration(block.durationMs)}`,
-  );
-  item.append(head);
-  const line = (/** @type {string} */ text, className = "line") =>
-    item.append(el("p", text, className));
-  const { call } = block;
-  if (call?.model)
-    line(`${call.runtime} ${call.model} · session ${call.session}`);
-  if (call?.settings)
-    for (const setting of settingsLines(call.settings)) line(setting);
-  for (const tool of block.tools)
-    line(
-      tool.status === "running"
-        ? `${tool.name} …`
-        : `${tool.name}${tool.status === "failed" ? " failed" : ""} ${((tool.durationMs ?? 0) / 1000).toFixed(1)} s`,
-    );
-  if (call?.usage)
-    line(
-      `${call.scope === "session" ? "Session total" : "Call"}: ${tokenLine(call.usage)} · ${cost(call.usage.costUsd ?? null, false)}`,
-    );
-  else if (block.tokens)
-    line(
-      `So far: ${tokenLine(block.tokens)}${block.provisional ? " (provisional)" : ""}`,
-    );
-  for (const warning of block.warnings) line(warning, "line warning");
-  for (const entry of block.journal) line(`${time(entry.at)} ${entry.message}`);
-  if (block.decision) {
-    const { verdict, reason, destination } = block.decision;
-    const retry = block.retry
-      ? ` [${block.retry.key} ${block.retry.count}/${block.retry.max}]`
-      : "";
-    line(`${verdict} — ${reason} → ${destination ?? "end"}${retry}`);
-  }
-  if (block.detail) line(block.detail, "line failed");
-  return item;
-}
+/** The detail on screen, to render it again when the operator changes the view. */
+let shown = /** @type {[Detail, RunEvent[]] | null} */ (null);
 
 /**
+ * Renders the selected run's detail, keeping where the operator scrolled and
+ * what has the focus, as the page renders it again each time the run changes.
  * @param {Detail} detail
  * @param {RunEvent[]} events Every event received for the run.
  */
 function showDetail(detail, events) {
-  const { run } = detail;
-  const summary = el("section");
-  const line = el("p", undefined, "empty");
-  line.append(
-    el("span", run.status, run.status),
-    ` · ${run.stage} · ${duration(run.durationMs)} · ${cost(run.costUsd, run.partial)}`,
+  const container = byId("detail");
+  const same = shown?.[0].run.id === detail.run.id;
+  shown = [detail, events];
+  /** @type {Map<string, number>} */
+  const scrolled = new Map();
+  if (same)
+    for (const node of container.querySelectorAll("[data-scroll]"))
+      if (node instanceof HTMLElement && node.dataset.scroll)
+        scrolled.set(node.dataset.scroll, node.scrollTop);
+  const active = document.activeElement;
+  const focused =
+    same && active instanceof HTMLElement && container.contains(active)
+      ? active.dataset.key
+      : undefined;
+  container.replaceChildren(
+    ...detailSections(detail, events, () => shown && showDetail(...shown)),
   );
-  summary.append(el("h3", `${run.workflow} · ${run.id}`), line);
-  for (const runtime of Object.values(detail.runtimes))
-    summary.append(el("p", runtime, "line"));
-  if (detail.error) summary.append(el("pre", detail.error, "failed"));
-  const stages = el("section");
-  const blocks = el("ol");
-  blocks.append(...timeline(events).map(showBlock));
-  stages.append(el("h2", "Timeline"), blocks);
-  const sections = [summary, stages];
-  if (detail.corrections.length) {
-    const corrections = el("section");
-    corrections.append(el("h2", "Corrections"));
-    for (const { key, count, max } of detail.corrections)
-      corrections.append(el("p", `${key} ${count}/${max ?? "?"}`, "line"));
-    sections.push(corrections);
-  }
-  const result = el("section");
-  result.append(el("h2", "Result"), el("pre", detail.result.join("\n")));
-  sections.push(result);
-  byId("detail").replaceChildren(...sections);
+  for (const node of container.querySelectorAll("[data-scroll]"))
+    if (node instanceof HTMLElement && node.dataset.scroll)
+      node.scrollTop = scrolled.get(node.dataset.scroll) ?? 0;
+  if (focused)
+    container
+      .querySelector(`[data-key="${CSS.escape(focused)}"]`)
+      ?.closest("button")
+      ?.focus({ preventScroll: true });
 }
 
 /** @param {string} message */

package/dist/static/detail.js

@@ -0,0 +1,424 @@
+// @ts-check
+/**
+ * A run's detail: one card with its facts and launches, each launch's stages as
+ * a strip sized by duration; then the list of its stages beside the selected
+ * one. Text only, never HTML.
+ */
+import {
+  brief,
+  cost,
+  dollars,
+  duration,
+  launches,
+  settingRows,
+  shownStage,
+  spent,
+  stateOf,
+  summary,
+  timeline,
+  tokenLine,
+  toolUse,
+} from "./timeline.js";
+
+/** @typedef {import("@clemrig/flow").RunEvent} RunEvent */
+/** @typedef {import("./timeline.js").Block} Block */
+/** @typedef {import("./timeline.js").Launch} Launch */
+
+/**
+ * @typedef {object} Summary
+ * @property {string} id
+ * @property {string} [workflow]
+ * @property {string} [status]
+ * @property {string} [stage]
+ * @property {number | null} [durationMs]
+ * @property {number | null} [costUsd]
+ * @property {boolean} [partial]
+ * @property {string} [updatedAt]
+ * @property {string} [error] Why the run cannot be read.
+ */
+
+/**
+ * @typedef {object} Detail
+ * @property {Required<Omit<Summary, "error">>} run
+ * @property {Record<string, string>} runtimes
+ * @property {string | null} error
+ * @property {RunEvent[]} events
+ * @property {number} next
+ * @property {import("@clemrig/flow").Correction[]} corrections
+ * @property {string[]} result
+ */
+
+/** Tool calls a stage shows until the operator asks for all of them. */
+const LATEST_TOOLS = 5;
+
+const icons = /** @type {const} */ ({
+  passed: "✓",
+  correction: "↻",
+  failed: "✕",
+  running: "●",
+  completed: "✓",
+});
+
+/**
+ * What the page keeps from one rendering of a run to the next, as it follows it.
+ * @type {{ run: string; selected: number | null; chosen: boolean; allTools: Set<number> }}
+ */
+const view = { run: "", selected: null, chosen: false, allTools: new Set() };
+
+/**
+ * @param {string} tag
+ * @param {string | (string | Node)[]} [content]
+ * @param {string} [className]
+ * @returns {HTMLElement}
+ */
+function el(tag, content, className) {
+  const node = document.createElement(tag);
+  if (typeof content === "string") node.textContent = content;
+  else if (content) node.append(...content);
+  if (className) node.className = className;
+  return node;
+}
+
+/**
+ * A state as data, so that it never meets the page's status classes.
+ * @param {HTMLElement} node
+ * @param {string} state
+ * @returns {HTMLElement}
+ */
+function stated(node, state) {
+  node.dataset.state = state;
+  return node;
+}
+
+const timeFormat = /** @type {const} */ ({
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hourCycle: "h23",
+});
+
+/** @param {string} iso A clock time, without its date. */
+const hour = (iso) => new Date(iso).toLocaleTimeString(undefined, timeFormat);
+
+/** @param {string} iso A day, unless it is today. */
+function day(iso) {
+  const date = new Date(iso);
+  return new Date().toDateString() === date.toDateString()
+    ? "today"
+    : date.toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+/** @param {string | null} iso A clock time, with its day unless it is today. */
+function clock(iso) {
+  if (!iso) return "—";
+  const today = day(iso) === "today";
+  return today ? hour(iso) : `${day(iso)} ${hour(iso)}`;
+}
+
+/**
+ * The run's card: its status and facts, then each launch with its strip of
+ * stages sized by duration, why a failed one stopped, and the pause before the
+ * next.
+ * @param {Detail} detail
+ * @param {Launch[]} found
+ * @param {(index: number) => void} select
+ * @param {number} now
+ */
+function overview(detail, found, select, now) {
+  const { run } = detail;
+  const section = el("section", undefined, "overview");
+  const title = el("div", undefined, "overview-title");
+  title.append(
+    el("h3", `${run.workflow} · ${run.id}`),
+    stated(el("span", run.status, "pill"), run.status),
+  );
+  const facts = el("dl", undefined, "facts");
+  const fact = (/** @type {string} */ name, /** @type {string} */ value) =>
+    facts.append(el("div", [el("dt", name), el("dd", value)]));
+  fact("Started", clock(found[0]?.startedAt ?? null));
+  if (run.status !== "running")
+    fact("Ended", clock(found.at(-1)?.endedAt ?? null));
+  fact("Active time", duration(run.durationMs));
+  fact("Cost", dollars(run.costUsd, run.partial));
+  section.append(title, facts);
+  // A failure no stage recorded, such as a journal that could not be written.
+  if (detail.error && !found.at(-1)?.cause)
+    section.append(el("pre", detail.error, "callout bad"));
+  found.forEach((launch, position) => {
+    const end = launch.endedAt ? Date.parse(launch.endedAt) : now;
+    const length = end - Date.parse(launch.startedAt);
+    const head = el("div", undefined, "launch-head");
+    head.append(
+      el("span", [
+        el("strong", `#${launch.number}`),
+        ` ${position ? "resumed " : ""}${clock(launch.startedAt)} → ${launch.endedAt ? clock(launch.endedAt) : "now"}`,
+        el("span", ` · ${brief(length)}`, "muted"),
+      ]),
+      stated(
+        el("span", `${icons[launch.status]} ${launch.status}`, "state"),
+        launch.status,
+      ),
+    );
+    const track = el("div", undefined, "track");
+    for (const { block, index } of launch.stages) {
+      const segment = stated(
+        el("button", undefined, "segment"),
+        stateOf(block),
+      );
+      segment.dataset.kind = block.kind;
+      segment.dataset.key = `segment-${index}`;
+      segment.title = `${block.stage} · ${block.kind} · ${clock(block.startedAt)} · ${brief(spent(block, now))}`;
+      if (view.selected === index) segment.setAttribute("aria-current", "true");
+      // A width relative to the launch, set through CSSOM: the page allows no inline style.
+      segment.style.flexGrow = String(Math.max(spent(block, now), 1));
+      if (spent(block, now) > length / 12) segment.textContent = block.stage;
+      segment.addEventListener("click", () => select(index));
+      track.append(segment);
+    }
+    const item = el("div", [head, track], "launch");
+    if (launch.status === "failed" && launch.cause)
+      item.append(el("p", launch.cause, "launch-cause"));
+    section.append(item);
+    const next = found[position + 1];
+    if (next && launch.endedAt)
+      section.append(
+        el(
+          "p",
+          `paused ${brief(Date.parse(next.startedAt) - Date.parse(launch.endedAt))}`,
+          "pause",
+        ),
+      );
+  });
+  return section;
+}
+
+/**
+ * The run's stages, grouped by launch and day: state, name, kind and duration.
+ * @param {Launch[]} found
+ * @param {(index: number) => void} select
+ * @param {number} now
+ */
+function stageList(found, select, now) {
+  const list = el("div", undefined, "stage-list");
+  list.dataset.scroll = "stages";
+  const count = found.reduce((sum, launch) => sum + launch.stages.length, 0);
+  list.append(el("h2", `Stages (${count})`));
+  for (const launch of found) {
+    list.append(
+      el(
+        "p",
+        `${found.length > 1 ? `Launch #${launch.number} · ` : ""}${day(launch.startedAt)}`,
+        "group",
+      ),
+    );
+    const rows = el("ol", undefined, "stages");
+    for (const { block, index } of launch.stages) {
+      const state = stateOf(block);
+      const row = stated(el("button", undefined, "stage"), state);
+      row.dataset.kind = block.kind;
+      row.dataset.key = `stage-${index}`;
+      row.title = summary(block);
+      if (view.selected === index) row.setAttribute("aria-current", "true");
+      row.append(
+        el("span", icons[state], "icon"),
+        el("span", block.stage, "name"),
+        el("span", block.kind, "kind"),
+        el("span", brief(spent(block, now)), "took"),
+      );
+      row.addEventListener("click", () => select(index));
+      rows.append(el("li", [row]));
+    }
+    list.append(rows);
+  }
+  return list;
+}
+
+/**
+ * What a stage execution did: a sheet of its facts, why it failed or was sent
+ * back, the tools it used, then its journal and its tool calls.
+ * @param {Block} block
+ * @param {number} index
+ * @param {() => void} rerender
+ * @param {number} now
+ */
+function stagePanel(block, index, rerender, now) {
+  const state = stateOf(block);
+  const panel = el("div", undefined, "stage-panel");
+  panel.append(
+    el(
+      "div",
+      [
+        stated(el("span", state, "pill"), state),
+        el("h3", block.stage),
+        el("span", block.kind, "kind tag"),
+      ],
+      "panel-title",
+    ),
+  );
+  const sheet = el("dl", undefined, "sheet");
+  const fact = (
+    /** @type {string} */ name,
+    /** @type {string} */ value,
+    /** @type {string} */ className = "",
+  ) => sheet.append(el("dt", name), el("dd", value, className));
+  fact("Started", clock(block.startedAt));
+  fact(
+    block.durationMs === null ? "Running for" : "Duration",
+    brief(spent(block, now)),
+  );
+  if (block.decision) {
+    const { verdict, destination } = block.decision;
+    const retry = block.retry
+      ? ` (${block.retry.key} ${block.retry.count}/${block.retry.max})`
+      : "";
+    fact(
+      "Outcome",
+      verdict === "correction"
+        ? `↻ back to ${destination}${retry}`
+        : `accepted → ${destination ?? "end"}`,
+      verdict === "correction" ? "warn" : "",
+    );
+  } else fact("Outcome", block.status, block.status === "failed" ? "bad" : "");
+  const { call } = block;
+  if (call?.model) {
+    fact("Agent", `${call.runtime} · ${call.model}`);
+    if (call.session) fact("Session", call.session);
+    if (call.settings)
+      for (const { label, value } of settingRows(call.settings))
+        fact(label, value);
+  }
+  if (call?.usage) {
+    fact(
+      call.scope === "session" ? "Tokens (session)" : "Tokens",
+      tokenLine(call.usage, false),
+    );
+    fact("Cost", cost(call.usage.costUsd ?? null, false));
+  } else if (block.tokens)
+    fact("Tokens so far", tokenLine(block.tokens, block.provisional));
+  panel.append(sheet);
+  if (block.detail) panel.append(el("pre", block.detail, "callout bad"));
+  else if (block.decision?.verdict === "correction")
+    panel.append(el("pre", block.decision.reason, "callout warn"));
+  for (const warning of block.warnings)
+    panel.append(el("p", warning, "callout warn"));
+  if (block.tools.length) {
+    const chips = el("div", undefined, "chips");
+    for (const { name, count, durationMs, failed } of toolUse(block.tools))
+      chips.append(
+        el(
+          "span",
+          `${name} ×${count} · ${brief(durationMs)}${failed ? ` · ${failed} failed` : ""}`,
+          failed ? "chip warn" : "chip",
+        ),
+      );
+    panel.append(el("h4", `Tools used (${block.tools.length})`), chips);
+  }
+  if (block.journal.length) {
+    const journal = el("ol", undefined, "log");
+    journal.dataset.scroll = `journal-${index}`;
+    for (const entry of block.journal)
+      journal.append(
+        el("li", [el("span", hour(entry.at), "at"), el("span", entry.message)]),
+      );
+    panel.append(el("h4", "Journal"), journal);
+  }
+  if (block.tools.length) {
+    const all = view.allTools.has(index);
+    const shown = all ? block.tools : block.tools.slice(-LATEST_TOOLS);
+    const head = el(
+      "div",
+      [
+        el(
+          "h4",
+          all
+            ? `Tool calls (${block.tools.length})`
+            : `Tool calls · latest ${shown.length} of ${block.tools.length}`,
+        ),
+      ],
+      "log-head",
+    );
+    if (block.tools.length > LATEST_TOOLS) {
+      const toggle = el("button", all ? "Latest only" : "Show all", "link");
+      toggle.dataset.key = `tools-${index}`;
+      toggle.addEventListener("click", () => {
+        if (all) view.allTools.delete(index);
+        else view.allTools.add(index);
+        rerender();
+      });
+      head.append(toggle);
+    }
+    const calls = el("ol", undefined, "log");
+    calls.dataset.scroll = `tools-${index}`;
+    for (const tool of shown)
+      calls.append(
+        el(
+          "li",
+          [
+            el(
+              "span",
+              tool.status === "running"
+                ? "…"
+                : `${((tool.durationMs ?? 0) / 1000).toFixed(1)} s`,
+              "at",
+            ),
+            el(
+              "span",
+              `${tool.name}${tool.status === "failed" ? " — failed" : ""}`,
+            ),
+          ],
+          tool.status === "failed" ? "bad" : "",
+        ),
+      );
+    panel.append(head, calls);
+  }
+  return panel;
+}
+
+/**
+ * The detail's sections. The selected stage follows the running or failed one
+ * until the operator chooses one, and stays chosen as the run goes on.
+ * @param {Detail} detail
+ * @param {RunEvent[]} events Every event received for the run.
+ * @param {() => void} rerender Renders the detail again, as the operator changes the view.
+ * @returns {HTMLElement[]}
+ */
+export function detailSections(detail, events, rerender) {
+  const now = Date.now();
+  const blocks = timeline(events);
+  const found = launches(blocks);
+  if (view.run !== detail.run.id) {
+    view.run = detail.run.id;
+    view.chosen = false;
+    view.allTools.clear();
+  }
+  if (!view.chosen || view.selected === null || !blocks[view.selected])
+    view.selected = shownStage(blocks);
+  const select = (/** @type {number} */ index) => {
+    view.selected = index;
+    view.chosen = true;
+    rerender();
+  };
+  const sections = [overview(detail, found, select, now)];
+  const stages = el("section", undefined, "stages-section");
+  const chosen = view.selected === null ? undefined : blocks[view.selected];
+  stages.append(
+    stageList(found, select, now),
+    chosen && view.selected !== null
+      ? stagePanel(chosen, view.selected, rerender, now)
+      : el("p", "No stage yet.", "empty"),
+  );
+  sections.push(stages);
+  if (detail.corrections.length) {
+    const corrections = el("section");
+    corrections.append(el("h2", "Corrections"));
+    for (const { key, count, max } of detail.corrections)
+      corrections.append(el("p", `${key} ${count}/${max ?? "?"}`, "mono"));
+    sections.push(corrections);
+  }
+  const result = el("section");
+  result.append(el("h2", "Result"), el("pre", detail.result.join("\n")));
+  for (const runtime of Object.values(detail.runtimes))
+    result.append(el("p", `Runtime: ${runtime}`, "runtime"));
+  sections.push(result);
+  return sections;
+}

package/dist/static/style.css

@@ -121,46 +121,325 @@ h2 {
   text-transform: uppercase;
 }
 h3 {
-  margin: 0 0 4px;
+  margin: 0;
   font-size: 14px;
   overflow-wrap: anywhere;
 }
+h4 {
+  margin: 14px 0 6px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
 ol {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.block {
-  padding: 6px 0;
-  border-bottom: 1px dotted var(--line);
+pre,
+.mono,
+.log {
+  font:
+    12px / 1.45 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  overflow-wrap: anywhere;
 }
-.block:last-child {
-  border-bottom: 0;
+pre {
+  margin: 0;
+  white-space: pre-wrap;
 }
-.block > p {
+.empty {
   margin: 0;
+  color: var(--muted);
 }
-.line,
-pre {
+.muted {
+  color: var(--muted);
+}
+
+/* States, carried as data so that they never meet the list's status classes. */
+[data-state="passed"],
+[data-state="completed"] {
+  --state: var(--ok);
+}
+[data-state="correction"] {
+  --state: var(--run);
+}
+[data-state="failed"] {
+  --state: var(--bad);
+}
+[data-state="running"] {
+  --state: var(--accent);
+}
+.pill {
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--state) 16%, transparent);
+  color: var(--state);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* The run's card: facts on one line, then each launch with its strip. */
+.overview-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 28px;
+  margin: 10px 0 14px;
+}
+.facts dt {
+  color: var(--muted);
+  font-size: 12px;
+}
+.facts dd {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.launch {
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+.launch-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+.launch-head .state {
+  color: var(--state);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.launch-cause {
+  margin: 6px 0 0;
+  color: var(--bad);
+  font-size: 12px;
+}
+.pause {
+  margin: 10px 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+.track {
+  display: flex;
+  gap: 2px;
+  height: 22px;
+}
+.segment {
+  min-width: 4px;
+  flex-basis: 0;
+  padding: 0 6px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 3px;
+  background: var(--state);
+  color: var(--panel);
+  font:
+    600 11px / 22px ui-sans-serif,
+    system-ui,
+    sans-serif;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.segment[data-state="passed"]:not([data-kind="AGENT"]) {
+  background: color-mix(in srgb, var(--ok) 65%, var(--panel));
+}
+.segment[aria-current="true"] {
+  outline: 2px solid var(--fg);
+  outline-offset: 1px;
+}
+
+/* The stages: the list beside the selected stage's panel. */
+.stages-section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+}
+@media (min-width: 1300px) {
+  .stages-section {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+    align-items: start;
+  }
+  .stage-list {
+    max-height: 75vh;
+    overflow: auto;
+  }
+  .stage-panel {
+    position: sticky;
+    top: 12px;
+  }
+}
+.group {
+  margin: 10px 0 4px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+.stages > li {
+  border-bottom: 1px solid var(--line);
+}
+.stages > li:last-child {
+  border-bottom: 0;
+}
+.stage {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 56px 84px;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  padding: 4px;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.stage:hover,
+.stage[aria-current="true"] {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+.stage .icon {
+  color: var(--state);
+  font-weight: 700;
+  text-align: center;
+}
+.stage .name {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stage[data-kind="GATE"][data-state="passed"] {
+  font-size: 13px;
+}
+.stage[data-kind="GATE"][data-state="passed"] .name,
+.stage[data-kind="GATE"][data-state="passed"] .icon {
+  color: var(--muted);
+  font-weight: 400;
+}
+.kind {
+  color: var(--muted);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+.kind.tag {
+  padding: 1px 6px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+}
+.took {
   font:
     12px / 1.45 ui-monospace,
     SFMono-Regular,
     Menlo,
     monospace;
-  overflow-wrap: anywhere;
+  text-align: right;
+  white-space: nowrap;
+}
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sheet {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 5px 14px;
+  margin: 12px 0 0;
+  font-size: 13px;
 }
-.line {
-  margin: 2px 0 0 16px;
+.sheet dt {
   color: var(--muted);
 }
-.warning {
+.sheet dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+.warn {
   color: var(--run);
 }
-pre {
-  margin: 0;
+.bad {
+  color: var(--bad);
+}
+.callout {
+  margin: 12px 0 0;
+  padding: 8px 10px;
+  border-left: 3px solid currentColor;
+  border-radius: 4px;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  font-size: 12px;
   white-space: pre-wrap;
 }
-.empty {
-  margin: 0;
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.chip {
+  padding: 1px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.chip.warn {
+  border-color: color-mix(in srgb, var(--run) 50%, transparent);
+}
+.log {
+  max-height: 260px;
+  padding: 6px 8px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+.log li {
+  display: grid;
+  grid-template-columns: 70px minmax(0, 1fr);
+  gap: 8px;
+  padding: 1px 0;
+}
+.log .at {
   color: var(--muted);
 }
+.log-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+button.link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.runtime {
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+:is(.stage, .segment, button.link):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}

package/dist/static/timeline.js

@@ -1,8 +1,8 @@
 // @ts-check
 /**
  * The dashboard's pure logic: a run's events grouped into one block per stage
- * execution, and the formats of durations, costs and agent settings. Served as
- * is to the browser.
+ * execution, those blocks grouped into launches, and the formats of durations,
+ * costs, tokens and agent settings. Served as is to the browser.
  */
 
 /** @typedef {import("@clemrig/flow").RunEvent} RunEvent */
@@ -171,6 +171,47 @@ export function duration(ms) {
   return `${hours ? `${hours} h ` : ""}${minutes} min ${seconds % 60} s`;
 }
 
+/**
+ * A duration in its two largest units: `1 h 07 min`, `7 min 02 s`, `12 s`,
+ * `< 1 s`.
+ * @param {number | null} ms
+ * @returns {string}
+ */
+export function brief(ms) {
+  if (ms === null) return "—";
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 1) return "< 1 s";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const pad = (/** @type {number} */ n) => String(n).padStart(2, "0");
+  if (hours) return `${hours} h ${pad(minutes)} min`;
+  if (minutes) return `${minutes} min ${pad(seconds % 60)} s`;
+  return `${seconds} s`;
+}
+
+/**
+ * A token count: exact below ten thousand, then in thousands or millions.
+ * @param {number} count
+ * @returns {string}
+ */
+export function tokenCount(count) {
+  if (count >= 1e6) return `${(count / 1e6).toFixed(1)} M`;
+  if (count >= 1e4) return `${Math.round(count / 1e3)} k`;
+  return count.toLocaleString("en-US");
+}
+
+/**
+ * A call's tokens: read without the cache, written, read from and written to
+ * the cache; provisional figures, which the call's end replaces, say so.
+ * @param {TokenCounts} tokens
+ * @param {boolean} provisional
+ * @returns {string}
+ */
+export function tokenLine(tokens, provisional) {
+  const { input, output, cacheRead, cacheWrite } = tokens;
+  return `${tokenCount(input)} in · ${tokenCount(output)} out · ${tokenCount(cacheRead)} cache read · ${tokenCount(cacheWrite)} cache write${provisional ? " (provisional)" : ""}`;
+}
+
 /** Setting names that are not plain words. */
 const settingLabels = /** @type {Record<string, string>} */ ({
   mcpServers: "MCP servers",
@@ -189,13 +230,13 @@ function settingLabel(key) {
 }
 
 /**
- * An agent call's settings as its runtime recorded them, whatever the runtime:
- * its thinking, its other single values and its timeout, then each list, its
- * tools even when empty, the others only with items.
+ * An agent call's settings as its runtime recorded them, whatever the runtime,
+ * as labelled rows: its thinking, other single values and timeout in one, then
+ * one per list, its tools even when empty, the others only with items.
  * @param {AgentSettings} settings
- * @returns {string[]}
+ * @returns {{ label: string; value: string }[]}
  */
-export function settingsLines(settings) {
+export function settingRows(settings) {
   const entries = Object.entries(settings);
   const values = entries.flatMap(([key, value]) =>
     key === "thinking" ||
@@ -207,17 +248,23 @@ export function settingsLines(settings) {
   );
   const lists = entries.flatMap(([key, value]) => {
     if (!Array.isArray(value) || (!value.length && key !== "tools")) return [];
-    const label = settingLabel(key);
+    const label = key === "tools" ? "allowed tools" : settingLabel(key);
     return [
-      `${label[0]?.toUpperCase()}${label.slice(1)}: ${value.join(", ") || "none"}`,
+      {
+        label: `${label[0]?.toUpperCase()}${label.slice(1)}`,
+        value: value.join(", ") || "none",
+      },
     ];
   });
   return [
-    [
-      `thinking ${settings.thinking}`,
-      ...values,
-      `timeout ${duration(settings.timeoutMs)}`,
-    ].join(" · "),
+    {
+      label: "Settings",
+      value: [
+        `thinking ${settings.thinking}`,
+        ...values,
+        `timeout ${brief(settings.timeoutMs)}`,
+      ].join(" · "),
+    },
     ...lists,
   ];
 }
@@ -232,3 +279,151 @@ export function cost(usd, partial) {
   const value = usd === null ? "—" : `${usd.toFixed(4)} USD`;
   return partial ? `${value} (partial)` : value;
 }
+
+/**
+ * An estimated cost as the Kanban shows it: in dollars, `≥` while some call
+ * announced none, a dash while none announced any.
+ * @param {number | null} usd
+ * @param {boolean} partial
+ * @returns {string}
+ */
+export function dollars(usd, partial) {
+  if (usd === null) return "—";
+  return `${partial ? "≥ " : ""}$${usd.toFixed(2)}`;
+}
+
+/** @typedef {"passed" | "correction" | "failed" | "running"} State */
+
+/**
+ * How a stage execution went: running, failed, sent back for a correction, or
+ * passed (the run's last stage included).
+ * @param {Block} block
+ * @returns {State}
+ */
+export function stateOf(block) {
+  if (block.status === "running" || block.status === "failed")
+    return block.status;
+  return block.decision?.verdict === "correction" ? "correction" : "passed";
+}
+
+/**
+ * A stage execution's time so far: its duration once ended.
+ * @param {Block} block
+ * @param {number} now
+ * @returns {number}
+ */
+export function spent(block, now) {
+  return block.durationMs ?? Math.max(0, now - Date.parse(block.startedAt));
+}
+
+/**
+ * @typedef {object} Launch
+ * @property {number} number From 1: the run's first execution, then each resumption.
+ * @property {string} startedAt
+ * @property {string | null} endedAt Null while it runs.
+ * @property {"running" | "failed" | "completed"} status
+ * @property {string} [cause] Why a failed launch stopped.
+ * @property {{ block: Block; index: number }[]} stages Its stage executions, with their index in the run.
+ */
+
+/**
+ * The stage execution to show until the operator chooses one: the last, which
+ * is the one running or the one where the run stopped, never an earlier
+ * launch's failure once the run was resumed.
+ * @param {Block[]} blocks
+ * @returns {number | null}
+ */
+export function shownStage(blocks) {
+  return blocks.length ? blocks.length - 1 : null;
+}
+
+/**
+ * The run's launches: its first execution, then one per resumption. A failed
+ * stage ends a launch, since it ends the run, and only a failed run is
+ * resumed: the next stage starts the following launch. A failure reported
+ * once the run completed, when its completed state could not be saved,
+ * ends the same launch.
+ * @param {Block[]} blocks
+ * @returns {Launch[]}
+ */
+export function launches(blocks) {
+  /** @type {Launch[]} */
+  const found = [];
+  blocks.forEach((block, index) => {
+    let current = found.at(-1);
+    if (!current || current.status === "failed") {
+      current = {
+        number: found.length + 1,
+        startedAt: block.startedAt,
+        endedAt: null,
+        status: "running",
+        stages: [],
+      };
+      found.push(current);
+    }
+    current.stages.push({ block, index });
+    if (block.status === "failed" || block.status === "completed") {
+      current.status = block.status;
+      current.endedAt =
+        block.durationMs === null
+          ? block.startedAt
+          : new Date(
+              Date.parse(block.startedAt) + block.durationMs,
+            ).toISOString();
+      if (block.detail) current.cause = block.detail;
+    }
+  });
+  return found;
+}
+
+/**
+ * What a stage execution did, in one line: its failure, its agent's model,
+ * tools and cost, its decision, or its last journal message.
+ * @param {Block} block
+ * @returns {string}
+ */
+export function summary(block) {
+  if (block.status === "failed" && block.detail) return block.detail;
+  if (block.call?.model) {
+    const tools = `${block.tools.length} tool${block.tools.length === 1 ? "" : "s"}`;
+    const usd = block.call.usage?.costUsd;
+    return [
+      block.call.model,
+      tools,
+      ...(usd === undefined ? [] : [dollars(usd, false)]),
+    ].join(" · ");
+  }
+  if (block.decision) {
+    const { verdict, reason, destination } = block.decision;
+    return verdict === "correction"
+      ? `back to ${destination}: ${reason.split("\n")[0]}`
+      : `accepted → ${destination ?? "end"}`;
+  }
+  return block.journal.at(-1)?.message ?? "";
+}
+
+/**
+ * The tools a stage execution used, by name, the most used first: how many
+ * calls, how long in all and how many failed.
+ * @param {Tool[]} tools
+ * @returns {{ name: string; count: number; durationMs: number; failed: number }[]}
+ */
+export function toolUse(tools) {
+  /** @type {Map<string, { name: string; count: number; durationMs: number; failed: number }>} */
+  const byName = new Map();
+  for (const tool of tools) {
+    const entry = byName.get(tool.name) ?? {
+      name: tool.name,
+      count: 0,
+      durationMs: 0,
+      failed: 0,
+    };
+    entry.count++;
+    entry.durationMs += tool.durationMs ?? 0;
+    if (tool.status === "failed") entry.failed++;
+    byName.set(tool.name, entry);
+  }
+  return [...byName.values()].sort(
+    (a, b) => b.count - a.count || a.name.localeCompare(b.name),
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clemrig/flow-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A local read-only dashboard of the runs of @clemrig/flow workflows",
   "license": "MIT",
   "repository": {
@@ -34,6 +34,6 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@clemrig/flow": "0.5.0"
+    "@clemrig/flow": "0.5.1"
   }
 }