@stratusagent/dashboard 0.12.2 → 0.12.4

package/package.json

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

package/ui/lib/grants.d.ts

@@ -1,6 +1,6 @@
 // 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 type AlwaysMeans = 'scope' | 'origin' | 'tool' | 'session';
+export type AlwaysMeans = 'scope' | 'origin' | 'tool' | 'destination' | 'session';
 /** The line shown beside **Always allow**, or undefined when the lifetime is unknown. */
 export const alwaysOffer: (always: AlwaysMeans | undefined, agentName: string) => string | undefined;

package/ui/lib/grants.js

@@ -17,6 +17,8 @@ export const alwaysOffer = (always, agentName) => {
   switch (always) {
     case 'tool':
       return `Always allow grants this tool to ${agentName} until an operator revokes it.`;
+    case 'destination':
+      return `Always allow lets ${agentName} use this tool on this conversation without asking, until revoked.`;
     case 'session':
       return 'Always allow stops this tool asking again for the rest of this session.';
     case 'scope':

package/ui/lib/serving.d.ts

@@ -0,0 +1,15 @@
+// Types for a UI module a test imports (see latest.d.ts).
+export interface ServedRuntime {
+  provider: string;
+  model?: string;
+  credentials: string;
+  /** Why no run can start on this runtime, when one can't. */
+  problem?: string;
+}
+export interface ServingRow {
+  title: string;
+  detail: string;
+  /** True when `detail` is the reason runs fail, not the credential source. */
+  problem: boolean;
+}
+export const servingRow: (runtime: ServedRuntime) => ServingRow;

package/ui/lib/serving.js

@@ -0,0 +1,19 @@
+/**
+ * One row of the Serving card from a `/health` runtime.
+ *
+ * When no agent's run can resolve a provider, `/health` lists a runtime
+ * with `provider: 'none'` and a `problem` saying why and what to do. Shown
+ * like any other runtime it read "none · credentials: none", which looks
+ * like a setting rather than the reason every turn will fail. A runtime
+ * with a problem shows the problem instead.
+ */
+export const servingRow = (runtime) => {
+  if (typeof runtime.problem === 'string' && runtime.problem.length > 0) {
+    return { title: 'No provider', detail: runtime.problem, problem: true };
+  }
+  return {
+    title: runtime.model ? `${runtime.provider} · ${runtime.model}` : runtime.provider,
+    detail: `credentials: ${runtime.credentials}`,
+    problem: false,
+  };
+};

package/ui/styles.css

@@ -130,6 +130,9 @@ body {
 .row .grow { flex: 1; min-width: 0; }
 .row .title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .row .sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row .title.problem { white-space: normal; }
+.row .sub.problem { color: var(--danger); white-space: normal; overflow-wrap: break-word; }
+.row .title .pill { margin-left: 4px; vertical-align: 1px; }
 
 .pill {
   font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600;

package/ui/views/dashboard.js

@@ -2,6 +2,7 @@ import { ago, duration, el, until } from '../lib/dom.js';
 import { api } from '../lib/api.js';
 import { avatar } from '../lib/avatar.js';
 import { alwaysOffer } from '../lib/grants.js';
+import { servingRow } from '../lib/serving.js';
 import { isActive, navigate, refreshCore, store } from '../app.js';
 
 export const activityPanel = (filter) => {
@@ -121,11 +122,15 @@ const quickStats = () => {
     health?.runtimes?.length
       ? el('div', {},
           el('h3', {}, 'Serving'),
-          el('div', { class: 'rows' }, ...health.runtimes.map((runtime) => el('div', { class: 'row' },
-            el('div', { class: 'grow' },
-              el('div', { class: 'title' }, runtime.model ? `${runtime.provider} · ${runtime.model}` : runtime.provider),
-              el('div', { class: 'sub' }, `credentials: ${runtime.credentials}`)),
-          ))))
+          el('div', { class: 'rows' }, ...health.runtimes.map((runtime) => {
+            const row = servingRow(runtime);
+            return el('div', { class: 'row' },
+              el('div', { class: 'grow' },
+                el('div', { class: row.problem ? 'title problem' : 'title' }, row.title, row.problem ? ' ' : null,
+                  row.problem ? el('span', { class: 'pill failed' }, 'not serving') : null),
+                el('div', { class: row.problem ? 'sub problem' : 'sub' }, row.detail)),
+            );
+          })))
       : null,
   );
 };