@stratusagent/dashboard 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stratus Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @stratusagent/dashboard
+
+The Stratus web dashboard: the roster, live chat with your agents, pending
+approvals, and settings — served by `@stratusagent/control-api` at `/`.
+
+```bash
+npm install -g @stratusagent/control-api @stratusagent/dashboard
+stratus dashboard
+```
+
+`stratus dashboard` finds a running daemon (or starts one), mints a
+single-use sign-in link, and opens your browser at it.
+
+## Why it is a separate package
+
+The control API has three consumers and only one of them is a web page. The
+macOS app (roadmap step 07) is deliberately *not* a chat app, and a headless
+VM deployment wants the API with no UI at all. Keeping the UI here means both
+of those install the API alone, and this package can grow without weighting
+them.
+
+The API auto-loads it: if this package resolves, the dashboard is served. Pass
+`ui: false` to `createControlApi` to run the API bare on a machine that has it
+installed anyway.
+
+## No build step
+
+The `ui/` directory is what ships: hand-written HTML, CSS, and ES modules, no
+bundler and no framework. What a contributor edits is exactly what a user
+loads, and there is no build output to go stale against the source.
+
+That is a real constraint, not a preference — it is why the rendering layer is
+a hundred lines of `el()` in `ui/lib/dom.js` rather than a dependency, and why
+every string reaches the DOM as a text node. There is deliberately no
+`innerHTML` helper in this package.
+
+```
+ui/
+  index.html        the shell
+  styles.css        tokens, light and dark
+  app.js            store, router, live stream, sidebar
+  lib/              dom helpers, the API client, avatars
+  views/            dashboard, agent, settings, plugins
+```
+
+## What the screens do
+
+**Dashboard** — quick stats from `GET /health` (agents, running turns, stored
+sessions, waiting approvals, uptime, and what the daemon is serving with
+which credentials), the approvals panel when anything is parked, recent
+conversations, and a live activity feed.
+
+**Agent** — one agent, three tabs. *Chat* streams a conversation as it
+happens: text arrives token by token, tool calls appear as status lines, and
+the transcript is re-read from the daemon when the turn settles so the page
+never quietly disagrees with what is stored. *Activity* is the same event
+stream filtered to that agent. *Settings* edits the soul — name, persona,
+provider and model pins — through a validated round-trip.
+
+**Settings** — provider sign-ins (with a live key check before storing),
+the default model listed from what those sign-ins can actually reach, and
+Slack channel tokens.
+
+**Plugins** — an honest placeholder. Tool packs are roadmap step 06.
+
+## Two things the page will not do
+
+- **It never renders a secret.** `GET /credentials` reports that a sign-in
+  exists, its type, and its endpoint. There is nothing to show and nothing to
+  leak.
+- **It only talks to its own origin.** The page is served with a
+  `default-src 'self'` content security policy — no external scripts, styles,
+  images, or connections. A local dashboard holding a live session against
+  your daemon is not a place to be relaxed about that.
+
+## 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.

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import type { ServerResponse } from 'node:http';
+export interface DashboardAssetOptions {
+    /** Override the asset directory. Tests use it; nothing else should. */
+    root?: string;
+}
+/**
+ * Static assets for the control API to serve at `/`.
+ *
+ * Deliberately not a server: the API already owns a socket, an auth model, and
+ * an origin check, and a second server would need its own copy of all three.
+ * This is the smallest thing that can answer "is there a file for this path".
+ */
+export declare const createDashboardAssets: (options?: DashboardAssetOptions) => {
+    serve(pathname: string, response: ServerResponse): Promise<boolean>;
+};
+export type DashboardAssets = ReturnType<typeof createDashboardAssets>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAyBhD,MAAM,WAAW,qBAAqB;IACpC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,UAAS,qBAA0B;oBAI/C,MAAM,YAAY,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;CAuD5E,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/index.js

@@ -0,0 +1,87 @@
+import { createReadStream } from 'node:fs';
+import { stat } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { pipeline } from 'node:stream/promises';
+/**
+ * Where the built UI lives, relative to this module.
+ *
+ * `ui/` is a sibling of `dist/`, and both ship in the package. The assets are
+ * hand-written ES modules with no build step, so what is published is exactly
+ * what a contributor edits — there is no bundle to go stale against the source.
+ */
+const UI_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', 'ui');
+const CONTENT_TYPES = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.woff2': 'font/woff2',
+    '.json': 'application/json; charset=utf-8',
+    '.ico': 'image/x-icon',
+};
+/**
+ * Static assets for the control API to serve at `/`.
+ *
+ * Deliberately not a server: the API already owns a socket, an auth model, and
+ * an origin check, and a second server would need its own copy of all three.
+ * This is the smallest thing that can answer "is there a file for this path".
+ */
+export const createDashboardAssets = (options = {}) => {
+    const root = options.root ?? UI_ROOT;
+    return {
+        async serve(pathname, response) {
+            // A single-page app: every unknown path is a route the client renders,
+            // so the shell answers for all of them. Real assets are matched first.
+            const requested = pathname === '/' ? '/index.html' : pathname;
+            let decoded;
+            try {
+                decoded = decodeURIComponent(requested);
+            }
+            catch {
+                return false;
+            }
+            // Resolved and then checked, not sanitised. Stripping `..` by hand is a
+            // game of encodings nobody wins; asking whether the resolved path is
+            // still inside the asset directory is a question with one answer.
+            const candidate = path.resolve(root, `.${path.posix.normalize(decoded)}`);
+            const inside = candidate === root || candidate.startsWith(`${root}${path.sep}`);
+            const target = inside && path.extname(candidate) !== ''
+                ? candidate
+                : path.join(root, 'index.html');
+            let stats;
+            try {
+                stats = await stat(target);
+            }
+            catch {
+                return false;
+            }
+            if (!stats.isFile()) {
+                return false;
+            }
+            response.statusCode = 200;
+            response.setHeader('content-type', CONTENT_TYPES[path.extname(target)] ?? 'application/octet-stream');
+            response.setHeader('content-length', stats.size);
+            // The shell and its modules are versioned with the daemon, and a
+            // dashboard that keeps showing last release's UI after an upgrade is a
+            // bug report nobody can reproduce. Loopback makes revalidation free.
+            response.setHeader('cache-control', 'no-cache');
+            // A page that only ever talks to its own origin, with no inline script
+            // and nothing embeddable: say so, so a mistake later has to be
+            // deliberate rather than accidental.
+            response.setHeader('content-security-policy', [
+                "default-src 'self'",
+                "img-src 'self' data:",
+                "connect-src 'self'",
+                "frame-ancestors 'none'",
+                "base-uri 'none'",
+                "form-action 'none'",
+            ].join('; '));
+            response.setHeader('x-content-type-options', 'nosniff');
+            await pipeline(createReadStream(target), response);
+            return true;
+        },
+    };
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@stratusagent/dashboard",
+  "version": "0.6.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "ui"
+  ],
+  "engines": {
+    "node": ">=22.13 <23 || >=23.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "typescript": "^5.9.3"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stratuslabs/agent.git",
+    "directory": "packages/dashboard"
+  },
+  "description": "The Stratus web dashboard: a static, build-step-free UI served by @stratusagent/control-api — roster, live chat, approvals, and settings",
+  "keywords": [
+    "stratus",
+    "agent",
+    "ai",
+    "llm",
+    "dashboard"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "tsc --noEmit --project tsconfig.test.json",
+    "test": "node --test --experimental-strip-types ./test/**/*.test.ts"
+  }
+}

package/ui/app.js

@@ -0,0 +1,370 @@
+import { api, connectEvents, ApiError } from './lib/api.js';
+import { clear, el } from './lib/dom.js';
+import { avatar } from './lib/avatar.js';
+import { renderDashboard } from './views/dashboard.js';
+import { renderAgent } from './views/agent.js';
+import { renderSettings } from './views/settings.js';
+import { renderPlugins } from './views/plugins.js';
+
+/**
+ * Everything the page knows, in one object.
+ *
+ * A store and a full re-render rather than fine-grained bindings: the whole
+ * document is a few hundred nodes, and correctness-by-rerender beats a
+ * diffing scheme nobody will maintain. The chat transcript is the one
+ * exception — it appends, because re-rendering a streaming reply per token
+ * would fight the scroll position.
+ */
+export const store = {
+  route: { name: 'dashboard' },
+  health: undefined,
+  agents: [],
+  sessions: [],
+  approvals: [],
+  activity: [],
+  stream: 'connecting',
+  /** Set when the daemon stops answering, so the page says so instead of going stale. */
+  offlineSince: undefined,
+};
+
+const listeners = new Set();
+export const subscribe = (fn) => {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+};
+
+let renderQueued = false;
+export const render = () => {
+  // Coalesced: a burst of events during a streaming turn would otherwise
+  // re-render the shell per token.
+  if (renderQueued) {
+    return;
+  }
+  renderQueued = true;
+  queueMicrotask(() => {
+    renderQueued = false;
+    paint();
+  });
+};
+
+export const navigate = (route) => {
+  // A different session on the same agent is the same view, told to switch —
+  // not a new one, or opening a conversation from the dashboard would
+  // discard whatever the composer already had in it.
+  if (route.name === 'agent' && store.route.name === 'agent'
+      && route.agentId === store.route.agentId && route.sessionId) {
+    current.view?.openSession?.(route.sessionId);
+  }
+  store.route = route;
+  const hash = route.name === 'agent'
+    ? `#/agents/${encodeURIComponent(route.agentId)}`
+    : route.name === 'settings'
+      ? `#/settings/${route.section}`
+      : `#/${route.name}`;
+  if (location.hash !== hash) {
+    history.pushState(null, '', hash);
+  }
+  render();
+  void refreshForRoute();
+};
+
+const routeFromHash = () => {
+  const parts = location.hash.replace(/^#\/?/, '').split('/').filter(Boolean);
+  if (parts[0] === 'agents' && parts[1]) {
+    return { name: 'agent', agentId: decodeURIComponent(parts[1]) };
+  }
+  if (parts[0] === 'settings') {
+    return { name: 'settings', section: parts[1] ?? 'providers' };
+  }
+  if (parts[0] === 'plugins') {
+    return { name: 'plugins' };
+  }
+  return { name: 'dashboard' };
+};
+
+// ---- data ----------------------------------------------------------------
+
+/**
+ * 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.
+ */
+export const refreshCore = async () => {
+  try {
+    const [health, agents, approvals] = await Promise.all([
+      api.health(),
+      api.agents(),
+      api.approvals(),
+    ]);
+    store.health = health;
+    store.agents = agents.agents ?? [];
+    store.approvals = approvals.approvals ?? [];
+    store.offlineSince = undefined;
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) {
+      store.route = { name: 'signed-out' };
+    } else {
+      store.offlineSince = store.offlineSince ?? Date.now();
+    }
+  }
+  render();
+};
+
+const refreshForRoute = async () => {
+  if (store.route.name === 'dashboard') {
+    const listed = await api.sessions(undefined, 12).catch(() => ({ sessions: [] }));
+    store.sessions = listed.sessions ?? [];
+    render();
+  }
+};
+
+// ---- live stream ---------------------------------------------------------
+
+const ACTIVITY_LIMIT = 200;
+
+/**
+ * Which session belongs to which agent.
+ *
+ * Only `session.created` carries the agent, so it seeds this and everything
+ * later in that conversation reads from it — the same trick the daemon's own
+ * log writer uses, and for the same reason.
+ */
+const agentBySession = new Map();
+
+/**
+ * One line of the activity feed, or null for events that are not news.
+ *
+ * `session.updated` and `provider.response` are the loop talking to itself:
+ * a status of "running" the instant after "started a conversation", and a
+ * response that the tool lines below already describe. Rendering them fills
+ * the feed with restatements and pushes the things a person actually wants
+ * to see off the top of it.
+ */
+const describe = (envelope) => {
+  const event = envelope.event;
+  switch (event.type) {
+    case 'session.created': return 'started a conversation';
+    case 'session.completed': return 'finished a turn';
+    case 'session.failed': return `turn failed — ${event.error}`;
+    case 'tool.called': return `ran ${event.call.toolName}`;
+    case 'tool.completed': return `${event.result.toolName} ${event.result.ok ? 'succeeded' : 'failed'}`;
+    case 'tool.denied': return `${event.call.toolName} was denied`;
+    case 'tool.approval-requested': return `${event.call.toolName} needs approval`;
+    case 'tool.approval-resolved': return `approval ${event.answer} (${event.reason})`;
+    default: return null;
+  }
+};
+
+/** Handlers a screen installs to watch its own conversation live. */
+const envelopeHandlers = new Set();
+export const onEnvelope = (fn) => {
+  envelopeHandlers.add(fn);
+  return () => envelopeHandlers.delete(fn);
+};
+
+/**
+ * How many screens are listening. Exposed so a leak is observable: a view
+ * that is replaced without being torn down keeps updating detached DOM and
+ * re-fetching on every completed turn, and the only symptom is a page that
+ * gets slower the more of it you have used.
+ */
+export const envelopeHandlerCount = () => envelopeHandlers.size;
+
+const handleEnvelope = (envelope) => {
+  for (const handler of envelopeHandlers) {
+    handler(envelope);
+  }
+
+  if (envelope.event.type === 'session.created') {
+    agentBySession.set(envelope.sessionId, envelope.event.agentId);
+  }
+
+  // Deltas are a per-token firehose. They drive the transcript through the
+  // handlers above; putting each one in an activity feed would render nothing
+  // but noise and pin the CPU.
+  const text = describe(envelope);
+  if (text) {
+    const agentId = agentBySession.get(envelope.sessionId)
+      ?? store.sessions.find((session) => session.id === envelope.sessionId)?.agentId;
+    store.activity.unshift({
+      at: Date.now(),
+      sessionId: envelope.sessionId,
+      agent: store.agents.find((candidate) => candidate.id === agentId)?.name ?? agentId,
+      text,
+    });
+    store.activity.length = Math.min(store.activity.length, ACTIVITY_LIMIT);
+  }
+
+  // Approvals and roster activity are shared state, so they refresh for
+  // everyone rather than only for whoever is looking at the right screen.
+  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(() => {});
+  }
+  if (type === 'session.completed' || type === 'session.failed' || type === 'session.created') {
+    void refreshCore();
+    void refreshForRoute();
+  }
+  render();
+};
+
+// ---- shell ---------------------------------------------------------------
+
+const logo = () => {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('width', '22');
+  svg.setAttribute('height', '22');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('fill', 'none');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', 'M3 15a4 4 0 0 1 3.2-3.9A5.5 5.5 0 0 1 17 10.3 3.6 3.6 0 0 1 20.5 15 3.5 3.5 0 0 1 17 18H6.5A3.5 3.5 0 0 1 3 15Z');
+  path.setAttribute('stroke', 'currentColor');
+  path.setAttribute('stroke-width', '1.6');
+  path.setAttribute('stroke-linejoin', 'round');
+  svg.append(path);
+  return svg;
+};
+
+/**
+ * Whether an agent counts as active right now.
+ *
+ * The API reports a timestamp and a count, deliberately not a verdict — the
+ * window is a rendering decision, and it lives here so changing it does not
+ * mean upgrading a daemon. Both inputs matter: a turn parked on a human has
+ * not saved since it parked, so the timestamp alone would call it idle at
+ * exactly the moment it most needs attention.
+ */
+const ACTIVE_WINDOW_MS = 10 * 60_000;
+export const isActive = (agent) =>
+  (agent.activeSessions ?? 0) > 0
+  || (agent.lastActiveAt !== undefined && Date.now() - Date.parse(agent.lastActiveAt) < ACTIVE_WINDOW_MS);
+
+const sidebar = () => {
+  const route = store.route;
+  const item = (label, target, extra = {}) => el('button', {
+    class: `nav-item${extra.sub ? ' sub' : ''}${extra.active ? ' active' : ''}`,
+    onClick: () => navigate(target),
+  }, extra.children ?? label);
+
+  return el('nav', { class: 'sidebar' },
+    el('div', { class: 'brand' }, logo(), 'Stratus Agent'),
+    item('Dashboard', { name: 'dashboard' }, { active: route.name === 'dashboard' }),
+    item('Plugins', { name: 'plugins' }, { active: route.name === 'plugins' }),
+    el('div', { class: 'nav-section' }, 'Settings'),
+    ...['providers', 'models', 'channels'].map((section) => item(
+      section.charAt(0).toUpperCase() + section.slice(1),
+      { name: 'settings', section },
+      { sub: true, active: route.name === 'settings' && route.section === section },
+    )),
+    el('div', { class: 'nav-section' }, 'Agents'),
+    ...store.agents.map((agent) => item(agent.name, { name: 'agent', agentId: agent.id }, {
+      active: route.name === 'agent' && route.agentId === agent.id,
+      children: el('span', { class: 'agent-row' },
+        avatar(agent),
+        el('span', { class: 'grow' }, agent.name),
+        el('span', { class: `dot${isActive(agent) ? '' : ' idle'}`, title: isActive(agent) ? 'active recently' : 'idle' }),
+      ),
+    })),
+    el('div', { class: 'sidebar-foot' },
+      el('span', {}, 'Stratus Agent'),
+      el('span', {}, `v${store.health?.version ?? '—'}`),
+    ),
+  );
+};
+
+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', { class: 'field-note' }, 'Run stratus dashboard in a terminal to open a fresh one.'),
+  ),
+);
+
+/**
+ * A view is `{ node, update? }`, and the difference matters.
+ *
+ * Rebuilding the whole document on every store change is fine for the shell,
+ * which holds no state a person can lose. It is wrong for a screen with a
+ * text box and a streaming transcript: a repaint per token would take the
+ * caret out of the composer mid-sentence and rebuild a reply as it arrives.
+ * So a view is constructed once per route and told to update itself, and it
+ * decides what is safe to touch.
+ */
+let current = { key: undefined, view: undefined };
+
+const routeKey = (route) => route.name === 'agent'
+  ? `agent:${route.agentId}`
+  : route.name === 'settings'
+    ? `settings:${route.section}`
+    : route.name;
+
+const buildView = (route) => {
+  switch (route.name) {
+    case 'agent': return renderAgent(route.agentId, route.sessionId);
+    case 'settings': return renderSettings(route.section);
+    case 'plugins': return renderPlugins();
+    default: return renderDashboard();
+  }
+};
+
+const paint = () => {
+  const root = document.getElementById('app');
+
+  if (store.route.name === 'signed-out') {
+    current.view?.destroy?.();
+    current = { key: undefined, view: undefined };
+    root.replaceChildren(signedOut());
+    return;
+  }
+
+  const key = routeKey(store.route);
+  if (key !== current.key || !current.view) {
+    // Torn down before it is dropped. The agent view subscribes to the event
+    // stream; without this, every agent ever visited keeps a live handler
+    // updating detached DOM and re-fetching transcripts on every completed
+    // turn — work that multiplies with each screen someone opens.
+    current.view?.destroy?.();
+    current = { key, view: buildView(store.route) };
+  } else {
+    current.view.update?.();
+  }
+  root.replaceChildren(sidebar(), current.view.node);
+};
+
+// ---- boot ----------------------------------------------------------------
+
+window.addEventListener('popstate', () => {
+  store.route = routeFromHash();
+  render();
+  void refreshForRoute();
+});
+
+store.route = routeFromHash();
+await refreshCore();
+await refreshForRoute();
+
+connectEvents({
+  onEnvelope: handleEnvelope,
+  onStatus: (status) => {
+    store.stream = status;
+    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.
+      void refreshCore();
+      void refreshForRoute();
+      // Shared data is not enough for a view holding a turn of its own. A
+      // completion that arrived during the outage is never replayed, so a
+      // chat view would sit disabled on "Working…" for a turn that finished
+      // minutes ago.
+      void current.view?.reconcile?.();
+    }
+    render();
+  },
+});
+
+render();

package/ui/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <rect width="24" height="24" rx="5" fill="#101828"/>
+  <path d="M4 15.2a3.6 3.6 0 0 1 2.9-3.5 5 5 0 0 1 9.7-1.6 3.3 3.3 0 0 1 3.2 4.3A3.2 3.2 0 0 1 16.8 17H7.2A3.2 3.2 0 0 1 4 15.2Z" stroke="#6294f8" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

package/ui/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Stratus Agent</title>
+<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+<link rel="stylesheet" href="/styles.css" />
+<div id="app" class="app">
+  <div class="booting">Connecting to stratusd…</div>
+</div>
+<script type="module" src="/app.js"></script>