@clemrig/flow-ui 0.1.1 → 0.1.2

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 (agent tools and tokens, journal, decision), its correction counters and its result. It follows a running run as it goes. 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 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. 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

@@ -4,7 +4,7 @@
  * `follow.js` follows it. Text only, never HTML.
  */
 import { follower } from "./follow.js";
-import { cost, duration, timeline } from "./timeline.js";
+import { cost, duration, settingsLines, timeline } from "./timeline.js";
 
 /** @typedef {import("@clemrig/flow").RunEvent} RunEvent */
 /** @typedef {import("./timeline.js").Block} Block */
@@ -142,6 +142,8 @@ function showBlock(block) {
   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"
@@ -150,7 +152,7 @@ function showBlock(block) {
     );
   if (call?.usage)
     line(
-      `${call.scope === "session" ? "Session total" : "Call"}: ${tokenLine(call.usage)} · ${cost(call.usage.costUsd, false)}`,
+      `${call.scope === "session" ? "Session total" : "Call"}: ${tokenLine(call.usage)} · ${cost(call.usage.costUsd ?? null, false)}`,
     );
   else if (block.tokens)
     line(

package/dist/static/timeline.js

@@ -1,11 +1,13 @@
 // @ts-check
 /**
  * The dashboard's pure logic: a run's events grouped into one block per stage
- * execution, and the formats of durations and costs. Served as is to the browser.
+ * execution, and the formats of durations, costs and agent settings. Served as
+ * is to the browser.
  */
 
 /** @typedef {import("@clemrig/flow").RunEvent} RunEvent */
 /** @typedef {import("@clemrig/flow").AgentActivity} AgentActivity */
+/** @typedef {import("@clemrig/flow").AgentSettings} AgentSettings */
 /** @typedef {import("@clemrig/flow").TokenCounts} TokenCounts */
 /** @typedef {import("@clemrig/flow").AgentUsage} AgentUsage */
 
@@ -14,6 +16,7 @@
  * @property {string} [runtime]
  * @property {string} [model]
  * @property {string} [session]
+ * @property {AgentSettings} [settings] Absent from runs recorded before calls recorded their settings.
  * @property {"running" | "completed" | "failed"} status
  * @property {AgentUsage} [usage] As the runtime announced it at the end of the call.
  * @property {"call" | "session"} [scope] Whether `usage` is the call's own or its session's total.
@@ -72,8 +75,8 @@ function apply(target, activity) {
   switch (activity.kind) {
     case "call":
       if (activity.status === "started") {
-        const { runtime, model, session } = activity;
-        target.call = { runtime, model, session, status: "running" };
+        const { runtime, model, session, settings } = activity;
+        target.call = { runtime, model, session, settings, status: "running" };
       } else
         target.call = {
           ...target.call,
@@ -168,10 +171,61 @@ export function duration(ms) {
   return `${hours ? `${hours} h ` : ""}${minutes} min ${seconds % 60} s`;
 }
 
+/** Setting names that are not plain words. */
+const settingLabels = /** @type {Record<string, string>} */ ({
+  mcpServers: "MCP servers",
+});
+
+/**
+ * A setting's name as the operator reads it: `permissionMode` → `permission mode`.
+ * @param {string} key
+ * @returns {string}
+ */
+function settingLabel(key) {
+  return (
+    settingLabels[key] ??
+    key.replace(/[A-Z]/g, (letter) => ` ${letter.toLowerCase()}`)
+  );
+}
+
+/**
+ * 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.
+ * @param {AgentSettings} settings
+ * @returns {string[]}
+ */
+export function settingsLines(settings) {
+  const entries = Object.entries(settings);
+  const values = entries.flatMap(([key, value]) =>
+    key === "thinking" ||
+    key === "timeoutMs" ||
+    value === undefined ||
+    Array.isArray(value)
+      ? []
+      : [`${settingLabel(key)} ${String(value)}`],
+  );
+  const lists = entries.flatMap(([key, value]) => {
+    if (!Array.isArray(value) || (!value.length && key !== "tools")) return [];
+    const label = settingLabel(key);
+    return [
+      `${label[0]?.toUpperCase()}${label.slice(1)}: ${value.join(", ") || "none"}`,
+    ];
+  });
+  return [
+    [
+      `thinking ${settings.thinking}`,
+      ...values,
+      `timeout ${duration(settings.timeoutMs)}`,
+    ].join(" · "),
+    ...lists,
+  ];
+}
+
 /**
  * An estimated cost as the runtimes announced it; unknown without any measure.
  * @param {number | null} usd
- * @param {boolean} partial Some agent call announced no usage.
+ * @param {boolean} partial Some agent call announced no cost.
  * @returns {string}
  */
 export function cost(usd, partial) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clemrig/flow-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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.2.0"
+    "@clemrig/flow": "0.3.0"
   }
 }