@clemrig/flow-ui 0.4.0 → 0.5.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 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.
+`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 a folded Output section with its agent's answer and the correction it sent back or could not send, 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/static/dashboard.js

@@ -130,11 +130,12 @@ function showDetail(detail, events) {
   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 });
+  if (focused) {
+    const again = container.querySelector(
+      `[data-key="${CSS.escape(focused)}"]`,
+    );
+    if (again instanceof HTMLElement) again.focus({ preventScroll: true });
+  }
 }
 
 /** @param {string} message */

package/dist/static/detail.js

@@ -10,6 +10,7 @@ import {
   dollars,
   duration,
   launches,
+  outputText,
   settingRows,
   shownStage,
   spent,
@@ -61,9 +62,15 @@ const icons = /** @type {const} */ ({
 
 /**
  * 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> }}
+ * @type {{ run: string; selected: number | null; chosen: boolean; allTools: Set<number>; outputs: Set<number> }}
  */
-const view = { run: "", selected: null, chosen: false, allTools: new Set() };
+const view = {
+  run: "",
+  selected: null,
+  chosen: false,
+  allTools: new Set(),
+  outputs: new Set(),
+};
 
 /**
  * @param {string} tag
@@ -271,12 +278,16 @@ function stagePanel(block, index, rerender, now) {
     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",
-      verdict === "correction"
-        ? `↻ back to ${destination}${retry}`
-        : `accepted → ${destination ?? "end"}`,
-      verdict === "correction" ? "warn" : "",
+      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;
@@ -301,6 +312,8 @@ function stagePanel(block, index, rerender, now) {
     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))
@@ -374,6 +387,57 @@ function stagePanel(block, index, rerender, now) {
   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.
@@ -390,6 +454,7 @@ export function detailSections(detail, events, rerender) {
     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);

package/dist/static/style.css

@@ -419,6 +419,21 @@ pre {
 .log .at {
   color: var(--muted);
 }
+details.output {
+  margin: 12px 0 0;
+}
+details.output summary {
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+details.output pre {
+  max-height: 360px;
+  padding: 6px 8px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
 .log-head {
   display: flex;
   align-items: baseline;

package/dist/static/timeline.js

@@ -40,6 +40,8 @@
  * @property {{ verdict: string; reason: string; destination: string | null }} [decision]
  * @property {{ key: string; count: number; max: number }} [retry]
  * @property {string} [detail]
+ * @property {unknown} [output] What the stage's agent answered.
+ * @property {unknown} [feedback] The correction the stage sent back, or could not send past its maximum.
  * @property {Call} [call]
  * @property {Tool[]} tools
  * @property {TokenCounts | null} tokens The call's responses so far.
@@ -152,6 +154,8 @@ export function timeline(events) {
       if (event.decision) target.decision = event.decision;
       if (event.retry) target.retry = event.retry;
       if (event.detail) target.detail = event.detail;
+      if (Object.hasOwn(event, "output")) target.output = event.output;
+      if (event.feedback !== undefined) target.feedback = event.feedback;
     } else if (event.type === "log")
       target.journal.push({ at: event.at, message: event.message });
     else apply(target, event.activity);
@@ -159,6 +163,16 @@ export function timeline(events) {
   return blocks;
 }
 
+/**
+ * A stage's answer or correction as text: a string as it is, anything else as
+ * indented JSON.
+ * @param {unknown} value
+ * @returns {string}
+ */
+export function outputText(value) {
+  return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+
 /**
  * @param {number | null} ms
  * @returns {string}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clemrig/flow-ui",
-  "version": "0.4.0",
+  "version": "0.5.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.1"
+    "@clemrig/flow": "0.7.0"
   }
 }