@clemrig/factory 0.0.0-stage → 0.1.0

package/dist/ui/server.js.map

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

package/dist/ui/static/dashboard.js

@@ -0,0 +1,266 @@
+// @ts-check
+/**
+ * The dashboard: the run list every 2 seconds, and the selected run as
+ * `follow.js` follows it. Text only, never HTML.
+ */
+import { follower } from "./follow.js";
+import { cost, duration, timeline } from "./timeline.js";
+
+/** @typedef {import("../../engine/types.js").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 {{ key: string; count: number; max: number | null }[]} corrections
+ * @property {string[]} result
+ */
+
+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 {import("../../engine/metrics.js").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>}
+ */
+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;
+    }),
+  );
+}
+
+/** @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}`);
+  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, 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;
+}
+
+/**
+ * @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)}`,
+  );
+  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);
+}
+
+/** @param {string} message */
+function updated(message) {
+  byId("updated").textContent = message;
+}
+
+async function refreshRuns() {
+  try {
+    const { repository, runs } = await load("/api/runs");
+    byId("repository").textContent = repository;
+    showRuns(runs);
+    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/ui/static/follow.js

@@ -0,0 +1,67 @@
+// @ts-check
+/**
+ * Follows the selected run: asks only for the events not received yet, one
+ * request after the answer to the previous one, drops an answer for a selection
+ * that has changed since, and stops once the run has ended or does not exist.
+ * Requests and timers are given, so that this logic is tested without a browser.
+ */
+
+/** @typedef {import("../../engine/types.js").RunEvent} RunEvent */
+
+/**
+ * @typedef {object} Answer
+ * @property {{ status: string }} run
+ * @property {RunEvent[]} events Events from the index the request asked for.
+ * @property {number} next The index to ask for next.
+ */
+
+/**
+ * @template Timer
+ * @param {object} options
+ * @param {(path: string) => Promise<any>} options.load Rejects with `status` set on an HTTP error.
+ * @param {(work: () => void) => Timer} options.schedule Runs `work` after the polling interval.
+ * @param {(timer: Timer | undefined) => void} options.cancel
+ * @param {(answer: any, events: RunEvent[]) => void} options.show The latest answer and every event received.
+ * @param {(error: unknown) => void} options.fail
+ */
+export function follower({ load, schedule, cancel, show, fail }) {
+  /** One selection: a new object each time, so that an old answer never matches. */
+  let current = { id: "", events: /** @type {RunEvent[]} */ ([]), next: 0 };
+  /** @type {Timer | undefined} */
+  let timer;
+
+  /** @param {typeof current} target */
+  async function refresh(target) {
+    if (!target.id) return;
+    /** @type {Answer} */
+    let answer;
+    try {
+      answer = await load(
+        `/api/runs/${encodeURIComponent(target.id)}?after=${target.next}`,
+      );
+    } catch (error) {
+      if (target !== current) return;
+      fail(error);
+      // A run that does not exist will not appear later.
+      const status = /** @type {{ status?: number }} */ (error).status;
+      if (status !== 404) timer = schedule(() => refresh(target));
+      return;
+    }
+    if (target !== current) return;
+    target.events.push(...answer.events);
+    target.next = answer.next;
+    show(answer, target.events);
+    if (answer.run.status === "running")
+      timer = schedule(() => refresh(target));
+  }
+
+  return {
+    /** @param {string} id */
+    select(id) {
+      if (id === current.id) return;
+      cancel(timer);
+      current = { id, events: [], next: 0 };
+      refresh(current);
+    },
+  };
+}

package/dist/ui/static/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>factory</title>
+<link rel="stylesheet" href="/style.css">
+<script type="module" src="/dashboard.js"></script>
+</head>
+<body>
+<header><h1>factory</h1><span id="repository"></span><span id="updated"></span></header>
+<main>
+<div>
+<div class="table"><table><thead><tr><th>Workflow</th><th>Status</th><th>Stage</th><th>Duration</th><th>Cost</th><th>Updated</th></tr></thead><tbody id="runs"></tbody></table></div>
+<p id="none" class="empty" hidden>No run yet.</p>
+</div>
+<div id="detail"><p class="empty">Select a run.</p></div>
+</main>
+</body>
+</html>

package/dist/ui/static/style.css

@@ -0,0 +1,166 @@
+:root {
+  color-scheme: light dark;
+  --bg: #f7f7f5;
+  --panel: #fff;
+  --fg: #1d1d1b;
+  --muted: #6f6e69;
+  --line: #e4e3df;
+  --accent: #2557d6;
+  --ok: #19773a;
+  --bad: #b42318;
+  --run: #a15c07;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111110;
+    --panel: #1b1b19;
+    --fg: #e8e7e3;
+    --muted: #9b9a94;
+    --line: #2c2c29;
+    --accent: #7aa2ff;
+    --ok: #5bd28a;
+    --bad: #ff7a6b;
+    --run: #f2b14c;
+  }
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font:
+    14px / 1.45 ui-sans-serif,
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  align-items: baseline;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--line);
+}
+header h1 {
+  margin: 0;
+  font-size: 16px;
+}
+header span {
+  color: var(--muted);
+  font-size: 13px;
+}
+#updated {
+  margin-left: auto;
+}
+main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+  gap: 16px;
+  padding: 16px;
+}
+@media (max-width: 900px) {
+  main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.table {
+  overflow-x: auto;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+th,
+td {
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  white-space: nowrap;
+}
+th {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+tbody tr {
+  cursor: pointer;
+}
+tbody tr:hover,
+tbody tr.selected {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+.completed,
+.passed {
+  color: var(--ok);
+}
+.failed {
+  color: var(--bad);
+}
+.running {
+  color: var(--run);
+}
+section {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+h2 {
+  margin: 0 0 8px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+h3 {
+  margin: 0 0 4px;
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.block {
+  padding: 6px 0;
+  border-bottom: 1px dotted var(--line);
+}
+.block:last-child {
+  border-bottom: 0;
+}
+.block > p {
+  margin: 0;
+}
+.line,
+pre {
+  font:
+    12px / 1.45 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  overflow-wrap: anywhere;
+}
+.line {
+  margin: 2px 0 0 16px;
+  color: var(--muted);
+}
+.warning {
+  color: var(--run);
+}
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.empty {
+  margin: 0;
+  color: var(--muted);
+}