@clemrig/flow-ui 0.5.0 → 0.6.0

package/page/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>runs</title>
+  <script type="module" crossorigin src="./app.js"></script>
+  <link rel="stylesheet" crossorigin href="./app.css">
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>

package/dist/static/dashboard.js

@@ -1,207 +0,0 @@
-// @ts-check
-/**
- * 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 } from "./timeline.js";
-
-/** @typedef {import("@clemrig/flow").RunEvent} RunEvent */
-/** @typedef {import("./detail.js").Summary} Summary */
-/** @typedef {import("./detail.js").Detail} Detail */
-
-const LIST_EVERY_MS = 2000;
-const DETAIL_EVERY_MS = 1000;
-
-/**
- * @param {string} id
- * @returns {HTMLElement}
- */
-function byId(id) {
-  const found = document.getElementById(id);
-  if (!found) throw new Error(`Missing element #${id}`);
-  return found;
-}
-
-/**
- * @param {string} tag
- * @param {string} [text]
- * @param {string} [className]
- * @returns {HTMLElement}
- */
-function el(tag, text, className) {
-  const node = document.createElement(tag);
-  if (text !== undefined) node.textContent = text;
-  if (className) node.className = className;
-  return node;
-}
-
-/** @param {string} iso */
-function time(iso) {
-  const date = new Date(iso);
-  return Number.isNaN(date.getTime())
-    ? iso
-    : date.toLocaleString(undefined, {
-        dateStyle: "short",
-        timeStyle: "medium",
-      });
-}
-
-/**
- * @param {string} path
- * @returns {Promise<any>}
- */
-async function load(path) {
-  const response = await fetch(path, { cache: "no-store" });
-  if (!response.ok)
-    throw Object.assign(
-      new Error((await response.text()) || `HTTP ${response.status}`),
-      { status: response.status },
-    );
-  return response.json();
-}
-
-/** The run the address names, or none when it cannot be read. */
-function fromHash() {
-  try {
-    return decodeURIComponent(location.hash.slice(1));
-  } catch {
-    return "";
-  }
-}
-
-let selected = fromHash();
-
-/** @param {Summary[]} runs */
-function showRuns(runs) {
-  byId("none").hidden = runs.length > 0;
-  byId("runs").replaceChildren(
-    ...runs.map((run) => {
-      const row = el("tr");
-      row.title = run.id;
-      if (run.id === selected) row.className = "selected";
-      if (run.error !== undefined) {
-        const cause = el("td", run.error);
-        cause.setAttribute("colspan", "4");
-        row.append(el("td", run.id), el("td", "unreadable", "failed"), cause);
-      } else
-        row.append(
-          el("td", run.workflow),
-          el("td", run.status, run.status),
-          el("td", run.stage),
-          el("td", duration(run.durationMs ?? null)),
-          el("td", cost(run.costUsd ?? null, run.partial ?? false)),
-          el("td", time(run.updatedAt ?? "")),
-        );
-      row.addEventListener("click", () => select(run.id));
-      return row;
-    }),
-  );
-}
-
-/** 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 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)),
-  );
-  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) {
-    const again = container.querySelector(
-      `[data-key="${CSS.escape(focused)}"]`,
-    );
-    if (again instanceof HTMLElement) again.focus({ preventScroll: true });
-  }
-}
-
-/** @param {string} message */
-function updated(message) {
-  byId("updated").textContent = message;
-}
-
-async function refreshRuns() {
-  try {
-    /** @type {{ title: string; label: string; runs: Summary[] }} */
-    const { title, label, runs } = await load("api/runs");
-    byId("title").textContent = title;
-    document.title = title;
-    byId("label").textContent = label;
-    showRuns(runs);
-    // A resumed run goes on under the same ID, running or already ended again.
-    const listed = runs.find((run) => run.id === selected);
-    if (listed?.updatedAt) follow.listed(selected, listed.updatedAt);
-    updated(`Updated ${new Date().toLocaleTimeString()}`);
-  } catch (error) {
-    unavailable(error);
-  }
-  setTimeout(refreshRuns, LIST_EVERY_MS);
-}
-
-/** @param {unknown} error */
-const unavailable = (error) =>
-  updated(
-    `Unavailable: ${error instanceof Error ? error.message : String(error)}`,
-  );
-
-/** @param {string} text */
-const placeholder = (text) =>
-  byId("detail").replaceChildren(el("p", text, "empty"));
-
-const follow = follower({
-  load,
-  schedule: (work) => setTimeout(work, DETAIL_EVERY_MS),
-  cancel: (timer) => clearTimeout(timer),
-  show: (detail, events) => showDetail(detail, events),
-  fail: (error) => {
-    const { status } = /** @type {{ status?: number }} */ (error);
-    // The follower stops on a run that does not exist and retries the rest.
-    if (status === 404) placeholder("This run does not exist.");
-    else if (status)
-      placeholder(
-        `This run cannot be read: ${error instanceof Error ? error.message : String(error)}`,
-      );
-    else unavailable(error);
-  },
-});
-
-/** @param {string} id */
-function select(id) {
-  if (id === selected) return;
-  selected = id;
-  if (fromHash() !== id) location.hash = encodeURIComponent(id);
-  placeholder(id ? "Loading…" : "Select a run.");
-  for (const row of byId("runs").children)
-    row.className =
-      /** @type {HTMLElement} */ (row).title === id ? "selected" : "";
-  follow.select(id);
-}
-
-// A link or the history can change the selected run without reloading the page.
-window.addEventListener("hashchange", () => select(fromHash()));
-refreshRuns();
-if (selected) placeholder("Loading…");
-follow.select(selected);

package/dist/static/detail.js

@@ -1,489 +0,0 @@
-// @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,
-  outputText,
-  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>; outputs: Set<number> }}
- */
-const view = {
-  run: "",
-  selected: null,
-  chosen: false,
-  allTools: new Set(),
-  outputs: 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})`
-      : "";
-    // A correction past its maximum is not taken: the run stopped there.
-    const refused = verdict === "correction" && pastMaximum(block);
-    fact(
-      "Outcome",
-      refused
-        ? `✕ not sent back to ${destination}${retry}`
-        : verdict === "correction"
-          ? `↻ back to ${destination}${retry}`
-          : `accepted → ${destination ?? "end"}`,
-      refused ? "bad" : 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"));
-  const output = outputSection(block, index);
-  if (output) panel.append(output);
-  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;
-}
-
-/**
- * Whether the stage's correction went past its maximum.
- * @param {Block} block
- */
-function pastMaximum(block) {
-  return block.retry !== undefined && block.retry.count > block.retry.max;
-}
-
-/**
- * What the stage produced, folded until the operator opens it: its agent's
- * answer, and the correction it sent back or could not send.
- * @param {Block} block
- * @param {number} index
- * @returns {HTMLElement | undefined}
- */
-function outputSection(block, index) {
-  /** @type {[string, unknown][]} */
-  const parts = [];
-  if (Object.hasOwn(block, "output")) parts.push(["Answer", block.output]);
-  if (block.feedback !== undefined)
-    parts.push([
-      pastMaximum(block)
-        ? "Correction not sent, past its maximum"
-        : "Correction sent",
-      block.feedback,
-    ]);
-  if (parts.length === 0) return undefined;
-  const head = el("summary", "Output");
-  head.dataset.key = `output-${index}`;
-  const section = el(
-    "details",
-    [
-      head,
-      ...parts.flatMap(([title, value], part) => {
-        const text = el("pre", outputText(value));
-        text.dataset.scroll = `output-${index}-${part}`;
-        return [el("h4", title), text];
-      }),
-    ],
-    "output",
-  );
-  // Opened by the operator, it stays open, and focused, as the page follows the run.
-  /** @type {HTMLDetailsElement} */ (section).open = view.outputs.has(index);
-  section.addEventListener("toggle", () => {
-    if (/** @type {HTMLDetailsElement} */ (section).open)
-      view.outputs.add(index);
-    else view.outputs.delete(index);
-  });
-  return section;
-}
-
-/**
- * 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();
-    view.outputs.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;
-}