@stratusagent/dashboard 0.10.0 → 0.11.1

package/README.md

@@ -74,8 +74,18 @@ Slack channel tokens.
 
 ## When the daemon restarts
 
-Sessions live in the daemon's memory, so restarting it signs the browser out
-and the page says so rather than rendering an empty roster that looks like a
-fleet that vanished. Run `stratus dashboard` again. If the socket drops
-without the daemon dying, the page reconnects on its own with a backoff and
-re-reads everything it missed.
+Sessions live in the daemon's memory. An announced restart (`stratus
+restart`) hands them to the replacement, so the page reconnects and stays
+signed in; a crash or a plain stop-and-start signs the browser out, and the
+page says so rather than rendering an empty roster that looks like a fleet
+that vanished. Run `stratus dashboard` again. If the socket drops without
+the daemon dying, the page reconnects on its own with a backoff and re-reads
+everything it missed — and it re-reads the moment the socket drops too, so
+an outage shows as the banner rather than as last-known numbers under a
+"reconnecting" dot.
+
+Refreshes that overlap settle latest-wins: one already in flight when a
+newer one starts is discarded when it lands, so a burst of events cannot
+leave the page holding an older answer. That is how an approval request
+went missing once — the refresh a `session.created` started was sent before
+the call was parked, and landed after the approval event's own refresh.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stratusagent/dashboard",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/ui/app.js

@@ -1,6 +1,7 @@
 import { api, connectEvents, ApiError } from './lib/api.js';
 import { clear, el } from './lib/dom.js';
 import { avatar } from './lib/avatar.js';
+import { createLatest } from './lib/latest.js';
 import { renderDashboard } from './views/dashboard.js';
 import { renderAgent } from './views/agent.js';
 import { renderSettings } from './views/settings.js';
@@ -87,22 +88,35 @@ const routeFromHash = () => {
 /**
  * Refresh the shared data every screen leans on.
  *
- * A 401 here means the daemon restarted — its cookie sessions live in memory —
- * so the page says exactly that instead of rendering an empty roster that
- * looks like a fleet that vanished.
+ * A 401 here means the session is gone — the daemon crashed or was stopped
+ * and started again (an announced `stratus restart` hands its cookie
+ * sessions to the replacement; nothing else does, because they live in
+ * memory) — so the page says exactly that instead of rendering an empty
+ * roster that looks like a fleet that vanished.
  */
+// Overlapping refreshes settle latest-wins — see lib/latest.js for the
+// approval this lost.
+const coreRefresh = createLatest();
+
 export const refreshCore = async () => {
+  const ticket = coreRefresh.begin();
   try {
     const [health, agents, approvals] = await Promise.all([
       api.health(),
       api.agents(),
       api.approvals(),
     ]);
+    if (!coreRefresh.isCurrent(ticket)) {
+      return;
+    }
     store.health = health;
     store.agents = agents.agents ?? [];
     store.approvals = approvals.approvals ?? [];
     store.offlineSince = undefined;
   } catch (error) {
+    if (!coreRefresh.isCurrent(ticket)) {
+      return;
+    }
     if (error instanceof ApiError && error.status === 401) {
       store.route = { name: 'signed-out' };
     } else {
@@ -199,12 +213,12 @@ const handleEnvelope = (envelope) => {
 
   // Approvals and roster activity are shared state, so they refresh for
   // everyone rather than only for whoever is looking at the right screen.
+  // The whole core, not the approvals list alone: the "awaiting approval"
+  // count comes from /health, and a list refreshed on its own left the
+  // counter at zero next to a card that said one was waiting.
   const type = envelope.event.type;
   if (type === 'tool.approval-requested' || type === 'tool.approval-resolved') {
-    void api.approvals().then((listed) => {
-      store.approvals = listed.approvals ?? [];
-      render();
-    }).catch(() => {});
+    void refreshCore();
   }
   if (type === 'session.completed' || type === 'session.failed' || type === 'session.created') {
     void refreshCore();
@@ -280,7 +294,7 @@ const sidebar = () => {
 const signedOut = () => el('div', { class: 'main solo' },
   el('div', { class: 'card' },
     el('h2', {}, 'Not signed in'),
-    el('p', {}, 'This browser has no session with stratusd. Sessions live in the daemon’s memory, so restarting it signs you out.'),
+    el('p', {}, 'This browser has no session with stratusd. Sessions live in the daemon’s memory: stratus restart hands them to the new daemon, but a crash or a stop and start signs you out.'),
     el('p', { class: 'field-note' }, 'Run stratus dashboard in a terminal to open a fresh one.'),
   ),
 );
@@ -352,6 +366,14 @@ connectEvents({
   onEnvelope: handleEnvelope,
   onStatus: (status) => {
     store.stream = status;
+    if (status === 'offline') {
+      // Ask now rather than wait for an event that will not come: with the
+      // daemon gone there are no events, so nothing else would notice, and
+      // the page kept its last numbers under a "reconnecting" dot through a
+      // whole outage. A failed refresh raises the offline banner; a 401
+      // after a restart signs the page out.
+      void refreshCore();
+    }
     if (status === 'live') {
       // Reconnected: whatever happened while the socket was down is only in
       // the store, so re-read rather than leaving a stale page behind.

package/ui/lib/latest.d.ts

@@ -0,0 +1,10 @@
+// Types for the one UI module a test imports. The UI itself is plain ES
+// modules with no build step; this declaration is what lets `pnpm typecheck`
+// cover the test without pretending the module is TypeScript.
+export interface Latest {
+  /** Issue a ticket for a refresh that is starting now. */
+  begin(): number;
+  /** Whether no newer ticket has been issued since this one. */
+  isCurrent(ticket: number): boolean;
+}
+export const createLatest: () => Latest;

package/ui/lib/latest.js

@@ -0,0 +1,27 @@
+/**
+ * Latest-wins for refreshes that overlap.
+ *
+ * Two refreshes of the same state in flight at once settle in whatever
+ * order the network chooses, and the one that started earlier can land
+ * last — carrying what was true before the later one was even sent. The
+ * dashboard lost an approval this way: `session.created` started a full
+ * refresh, `tool.approval-requested` arrived a moment later and fetched the
+ * approvals list (one entry), and then the first refresh's fetch — sent
+ * before the call was parked — landed with an empty list and overwrote it.
+ * The card never rendered and the counter said zero until someone clicked
+ * Refresh.
+ *
+ * `begin()` hands out a ticket; `isCurrent(ticket)` is false once a newer
+ * one has been issued, and a refresh whose ticket is stale discards what it
+ * fetched instead of writing it.
+ */
+export const createLatest = () => {
+  let issued = 0;
+  return {
+    begin: () => {
+      issued += 1;
+      return issued;
+    },
+    isCurrent: (ticket) => ticket === issued,
+  };
+};

package/ui/views/dashboard.js

@@ -50,7 +50,11 @@ const approvalCard = () => {
         el('div', { class: 'row' },
           agent ? avatar(agent, 24) : null,
           el('div', { class: 'grow' },
-            el('div', { class: 'title' }, `${agent?.name ?? request.agentId} wants to run ${request.call.toolName}`),
+            // The site, for a call judged by one. The input below is a CSS
+            // selector for `browser.act` and says nothing about where the
+            // click lands — which is exactly what **Always allow** widens.
+            el('div', { class: 'title' }, `${agent?.name ?? request.agentId} wants to run ${request.call.toolName}`
+              + `${request.origin ? ` on ${request.origin}` : ''}`),
             el('div', { class: 'sub' },
               request.expiresAt ? `expires ${until(request.expiresAt)}` : 'no expiry',
               ` · parked ${ago(request.parkedAt)}`),
@@ -58,9 +62,18 @@ const approvalCard = () => {
           el('span', { class: `pill risk-${request.risk}` }, request.risk),
         ),
         el('div', { class: 'cmd' }, JSON.stringify(request.call.input)),
+        // No **Always allow** where the engine would not remember the
+        // answer — a `dangerous` tool, or a browser action with no page to
+        // grant. There it does exactly what **Allow once** does, under a
+        // label promising a standing grant nobody gets.
+        request.oneShot
+          ? el('div', { class: 'sub' }, 'An approval covers this call only — nothing about it is remembered.')
+          : null,
         el('div', { class: 'actions' },
           el('button', { class: 'primary small', onClick: () => decide(request.requestId, 'once') }, 'Allow once'),
-          el('button', { class: 'small', onClick: () => decide(request.requestId, 'always') }, 'Always allow'),
+          request.oneShot
+            ? null
+            : el('button', { class: 'small', onClick: () => decide(request.requestId, 'always') }, 'Always allow'),
           el('button', { class: 'small danger', onClick: () => decide(request.requestId, 'deny') }, 'Deny'),
         ),
       );