@clemrig/flow-ui 0.2.0 → 0.3.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. 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, 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

@@ -212,11 +212,15 @@ function updated(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);

package/dist/static/follow.js

@@ -2,7 +2,8 @@
 /**
  * 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.
+ * that has changed since, and stops once the run has ended or does not exist,
+ * until the run list shows it updated since, as a resumed run is.
  * Requests and timers are given, so that this logic is tested without a browser.
  */
 
@@ -10,7 +11,7 @@
 
 /**
  * @typedef {object} Answer
- * @property {{ status: string }} run
+ * @property {{ status: string; updatedAt?: string }} run
  * @property {RunEvent[]} events Events from the index the request asked for.
  * @property {number} next The index to ask for next.
  */
@@ -26,7 +27,15 @@
  */
 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 };
+  let current = {
+    id: "",
+    events: /** @type {RunEvent[]} */ ([]),
+    next: 0,
+    /** Whether following stopped, on the run's end or absence. */
+    stopped: false,
+    /** The run's last update, as the last answer showed it. */
+    updatedAt: /** @type {string | undefined} */ (undefined),
+  };
   /** @type {Timer | undefined} */
   let timer;
 
@@ -45,14 +54,17 @@ export function follower({ load, schedule, cancel, show, fail }) {
       // A run that does not exist will not appear later.
       const status = /** @type {{ status?: number }} */ (error).status;
       if (status !== 404) timer = schedule(() => refresh(target));
+      else target.stopped = true;
       return;
     }
     if (target !== current) return;
     target.events.push(...answer.events);
     target.next = answer.next;
+    target.updatedAt = answer.run.updatedAt;
     show(answer, target.events);
     if (answer.run.status === "running")
       timer = schedule(() => refresh(target));
+    else target.stopped = true;
   }
 
   return {
@@ -60,7 +72,31 @@ export function follower({ load, schedule, cancel, show, fail }) {
     select(id) {
       if (id === current.id) return;
       cancel(timer);
-      current = { id, events: [], next: 0 };
+      current = {
+        id,
+        events: [],
+        next: 0,
+        stopped: false,
+        updatedAt: undefined,
+      };
+      refresh(current);
+    },
+    /**
+     * The run list shows `id` last updated at `updatedAt`: following starts
+     * again, from the events already received, if it had stopped on an earlier
+     * state of the selected run, as when it was resumed since, even if the
+     * resumed run already ended again.
+     * @param {string} id
+     * @param {string} updatedAt
+     */
+    listed(id, updatedAt) {
+      if (
+        id !== current.id ||
+        !current.stopped ||
+        updatedAt === current.updatedAt
+      )
+        return;
+      current.stopped = false;
       refresh(current);
     },
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clemrig/flow-ui",
-  "version": "0.2.0",
+  "version": "0.3.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.4.0"
+    "@clemrig/flow": "0.5.0"
   }
 }