@staix/agent-hub 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.0
+
+- `ahub ui`: a local dashboard for live messages, peer queues, tasks, budgets and approvals, with console messages, task proposal/assignment and peer pause/resume.
+- Browser access uses a short-lived single-use link and an HttpOnly, SameSite=Strict session on a separate, lazily started loopback listener. Strict Host/Origin checks, a closed action list and a hash-based content security policy preserve the control link boundary.
+- PII task paths/branches are now redacted from public task lists and private-envelope streams as well as task text. Local-worker permission details and allow decisions stay in the terminal; the dashboard can deny them.
+- Control protocol 6: update the plugin with `ahub setup` and restart the daemon and connected agents together when upgrading from 0.2.0.
+
 ## 0.2.0
 
 - npm distribution: `@staix/agent-hub`, public publishing with provenance from the tag workflow, tarball content checks, and an actionable Bun requirement when the CLI is invoked with Node or an unsupported Bun version.

package/README.md

@@ -4,7 +4,7 @@ Native multi-agent hub for one developer's machine: Claude Code, Codex, Kimi Cod
 hub-owned local-LLM worker collaborate as peers in one project directory, with
 task-aware model routing (Switchyard) in front of a self-hosted gateway (OmniRoute).
 
-Status: 0.2.0. All six milestones of the design spec are implemented; the [smoke checklist](docs/smoke.md)
+Status: 0.3.0. All six milestones of the design spec are implemented; the [smoke checklist](docs/smoke.md)
 says what has and has not been verified against real agents.
 
 ## Start here
@@ -22,7 +22,7 @@ cd <your project> && ahub init && ahub up && ahub tail
 Or install the same version from GitHub:
 
 ```bash
-bun add -g github:STAIxBWLB/agent-hub#v0.2.0 && ahub setup
+bun add -g github:STAIxBWLB/agent-hub#v0.3.0 && ahub setup
 ```
 
 The installed commands remain `ahub` and `agent-hub`.
@@ -52,3 +52,16 @@ an N-peer message bus and attaches each agent through its native control surface
 ## Runtime
 
 Bun + TypeScript. Single daemon per project directory, loopback only.
+
+## Local dashboard
+
+With a running daemon, `ahub ui` opens a local dashboard for messages, peer states
+and queues, the task board, budget windows and pending approvals. Use
+`ahub ui --no-open` to print a single-use link when the browser cannot be opened.
+Open the link within 60 seconds; the browser session lasts one hour.
+
+The dashboard can send console messages, propose and assign tasks, pause or resume
+peers, and answer approvals. Budget pauses still require the terminal override.
+Private envelopes and PII tasks stay redacted. Local-worker tool details and
+allow decisions stay in `ahub tail` / `ahub permit`; the page can deny them.
+No dashboard port is opened until requested. See [the session security model](docs/security.md#local-dashboard-sessions-issue-6).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@staix/agent-hub",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Native multi-agent hub: Claude Code, Codex, Kimi Code and a local worker as peers in one project",
   "license": "MIT",
   "type": "module",

package/plugins/agent-hub/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-hub",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Channel between Claude Code and the agent-hub daemon: peer messages from Codex, Kimi and the local worker arrive as channel events; hub_send replies.",
   "author": {
     "name": "Young Joon Lee",

package/plugins/agent-hub/server.js

@@ -15538,7 +15538,7 @@ import { join } from "path";
 function stateDirFor(cwd) {
   return process.env.AGENTHUB_STATE_DIR ?? join(cwd, ".agenthub", "state");
 }
-var PROTOCOL = 5;
+var PROTOCOL = 6;
 function readControl(stateDir) {
   try {
     const status = JSON.parse(readFileSync(join(stateDir, "status.json"), "utf8"));
@@ -15602,7 +15602,7 @@ class ControlClient {
 // package.json
 var package_default = {
   name: "@staix/agent-hub",
-  version: "0.2.0",
+  version: "0.3.0",
   description: "Native multi-agent hub: Claude Code, Codex, Kimi Code and a local worker as peers in one project",
   license: "MIT",
   type: "module",

package/src/adapters/codex-appserver.ts

@@ -72,7 +72,7 @@ export class CodexPeer extends BasePeer {
       port: this.opts.proxyPort,
       fetch: (req, server) => {
         // Browsers always send Origin on WebSocket upgrades; the TUI never does.
-        if (req.headers.get("origin")) return new Response("forbidden", { status: 403 });
+        if (req.headers.has("origin")) return new Response("forbidden", { status: 403 });
         if (server.upgrade(req, { data: {} as Link })) return undefined;
         return new Response("agent-hub codex proxy");
       },

package/src/cli/main.ts

@@ -40,6 +40,7 @@ const USAGE = `agent-hub ${VERSION}: Claude Code, Codex and Kimi as peers in one
   ahub ask [--remember] <question...>   answer from the task board, shared memory and this run's log, with the ids it rests on
   ahub route explain <id>       why a task went where it went
   ahub route explain --class <c> <title...>   what would happen to such a task now
+  ahub ui [--no-open]           open the local dashboard (or print its one-time link)
   ahub tail                     live stream of messages, states and permission requests
   ahub permit <id> <option>     answer a permission request shown by tail ("deny" cancels)
   ahub status | logs [-f] | doctor | kill`;
@@ -117,6 +118,19 @@ const commands: Record<string, () => Promise<void> | void> = {
   "--version": () => console.log(VERSION),
   version: () => console.log(VERSION),
 
+  ui: async () => {
+    if (args.some((arg) => arg !== "--no-open")) fail("usage: ahub ui [--no-open]");
+    const hub = await connect();
+    const res = await hub.request({ t: "ui" }, 10_000);
+    hub.close();
+    if (!res.ok) fail(res.error);
+    if (args.includes("--no-open")) return console.log(res.url);
+    const opener = process.platform === "darwin" ? "open" : "xdg-open";
+    const opened = spawnSync(opener, [res.url], { stdio: "ignore", timeout: 10_000 });
+    if (opened.error || opened.status !== 0) console.log(`Open this one-time link within 60 seconds:\n${res.url}`);
+    else console.log("Dashboard opened. The session expires in one hour; run ahub ui to reopen it.");
+  },
+
   setup: async () => {
     const root = join(import.meta.dir, "..", "..");
     const state = () => {

package/src/hub/control-client.ts

@@ -5,8 +5,8 @@ export function stateDirFor(cwd: string): string {
   return process.env.AGENTHUB_STATE_DIR ?? join(cwd, ".agenthub", "state");
 }
 
-/** Control WS wire version. 2 = `deliver` carries `envs` (digests); 3 = `tools` role and task messages; 4 = budget messages and `hub_checkpoint`; 5 = `ask`. The plugin is installed apart from the daemon, so they can drift. */
-export const PROTOCOL = 5;
+/** Control WS wire version. 2 = `deliver` carries `envs` (digests); 3 = `tools` role and task messages; 4 = budget messages and `hub_checkpoint`; 5 = `ask`; 6 = console-only `ui` session bootstrap. The plugin is installed apart from the daemon, so they can drift. */
+export const PROTOCOL = 6;
 
 export interface Hello {
   /** `tools`: acts for `peer` (task tools, hub_send) without being a delivery target: the MCP server Kimi and Codex run. */

package/src/hub/daemon.ts

@@ -21,6 +21,7 @@ import { DEFAULT_INFERENCE, DIGEST, Inference, type InferenceConfig } from "./in
 import { ask, ASK_NOTE_TITLE, RUN_START } from "./ask.ts";
 import { currentRouting, detectSignals } from "./routing.ts";
 import { Bus } from "./bus.ts";
+import { startDashboard } from "./ui.ts";
 import { PROTOCOL, stateDirFor } from "./control-client.ts";
 import { newEnvelope, parseMarker, USER, type Envelope, type PeerId } from "./envelope.ts";
 import { BasePeer, DEFAULT_WATCHDOG_MS } from "./peers.ts";
@@ -163,6 +164,9 @@ export async function startDaemon(opts: DaemonOptions) {
   let sidecarRouting = "";
   inference = new Inference(config.inference, { omni, sidecar: () => sidecar, route: "sy/fast", fixedModel: () => currentRouting(opts.cwd, log).local.fixed_model, log });
 
+  let dashboard: ReturnType<typeof startDashboard> | undefined;
+  const uiEvents: { seq: number; event: BusEvent }[] = [];
+  let uiSequence = 0;
   const consoles = new Set<Sock>();
   /** A line for the human: hub.log and every open `ahub tail`. */
   const notify = (line: string) => {
@@ -259,7 +263,13 @@ export async function startDaemon(opts: DaemonOptions) {
   for (const i of intervals) i.unref?.();
 
   /** What the console stream and the log may show: a private envelope (PII task) keeps its body to its recipients. */
-  const redact = (e: BusEvent): BusEvent => ("env" in e && e.env.private ? { ...e, env: { ...e.env, body: `[private${e.env.refs?.task ? `: task #${e.env.refs.task}, see ahub task show ${e.env.refs.task}` : ""}]` } } : e);
+  const redact = (e: BusEvent): BusEvent => {
+    if (!("env" in e) || !e.env.private) return e;
+    const { refs, ...env } = e.env;
+    // Private task refs can quote names in paths/branches too. Only the numeric task link is public.
+    const task = refs?.task && /^[0-9]+$/.test(refs.task) ? refs.task : undefined;
+    return { ...e, env: { ...env, ...(task ? { refs: { task } } : {}), body: `[private${task ? `: task #${task}, see ahub task show ${task}` : ""}]` } };
+  };
   const SERVER_JS = join(import.meta.dir, "..", "..", "plugins", "agent-hub", "server.js");
   const toolEnv = (peer: PeerId) => ({ AGENTHUB_MODE: "tools", AGENTHUB_PEER_ID: peer, AGENTHUB_STATE_DIR: opts.stateDir });
 
@@ -320,6 +330,7 @@ export async function startDaemon(opts: DaemonOptions) {
     pid: process.pid,
     cwd: opts.cwd,
     controlPort: server.port,
+    ...(dashboard ? { uiOrigin: dashboard.origin } : {}),
     codexProxyPort: opts.codexProxyPort,
     peers: Object.fromEntries(
       [...bus.peers].map(([id, p]) => [id, { state: bus.stateOf(id), queued: bus.queued(id), ...pausedNote(id), ...(p instanceof LocalPeer && p.lastServedBy ? { servedBy: p.lastServedBy } : {}) }]),
@@ -335,6 +346,10 @@ export async function startDaemon(opts: DaemonOptions) {
 
   bus.tap((e) => {
     e = redact(e);
+    if (dashboard) {
+      uiEvents.push({ seq: ++uiSequence, event: e });
+      if (uiEvents.length > 200) uiEvents.shift();
+    }
     if (e.t === "state") log(`state ${e.peer} -> ${e.state}`);
     else if (e.t === "undeliverable") log(`UNDELIVERABLE to ${e.peer} after retries: ${e.env.id} from ${e.env.from}`);
     else if (e.t === "overflow") log(`OVERFLOW ${e.peer}: dropped ${e.env.id} from ${e.env.from}`);
@@ -470,6 +485,81 @@ export async function startDaemon(opts: DaemonOptions) {
     return { ok: false, error: `unknown peer "${peer}"` };
   }
 
+  function holdPeer(action: "pause" | "resume", id: string) {
+    if (!bus.peers.has(id)) return { ok: false, error: `unknown peer: ${id}` };
+    if (action === "pause") {
+      manualPaused.add(id);
+      bus.pause(id);
+    } else {
+      if (budget.record(id)) return { ok: false, error: `${id} is paused by the budget coordinator until its window resets (ahub budget); to override: ahub budget resume ${id}` };
+      manualPaused.delete(id);
+      bus.resume(id);
+    }
+    return { ok: true, state: bus.stateOf(id) };
+  }
+
+  function uiSnapshot(after: number) {
+    return {
+      ok: true,
+      status: { peers: status().peers },
+      tasks: board.list().map((task) => {
+        const view = tasks.publicView(task);
+        // Refs and history can themselves quote private text. The dashboard needs neither.
+        return { id: task.id, title: view.title, detail: view.detail, class: task.class, state: task.state, owner: task.owner, reviewer: task.reviewer };
+      }),
+      budget: budget.status(),
+      permissions: [...permissions.values()].map(({ push }) => {
+        const req = JSON.parse(push);
+        // Local tool titles quote file contents and commands, including those of PII turns.
+        return req.peer === "local"
+          ? { id: req.id, peer: req.peer, title: "Private tool details: review with ahub tail and answer with ahub permit", terminalOnly: true,
+              options: req.options.filter((o: { kind: string }) => o.kind === "reject_once").map((o: { optionId: string; kind: string }) => ({ ...o, name: "Deny" })) }
+          : req;
+      }),
+      events: uiEvents.filter((e) => e.seq > after),
+      cursor: uiSequence,
+    };
+  }
+
+  async function uiAction(a: Record<string, unknown>): Promise<unknown> {
+    const bad = { ok: false, error: "invalid or unavailable dashboard action" };
+    const text = (key: string, max: number) => typeof a[key] === "string" && (a[key] as string).length <= max;
+    const peer = () => text("peer", 32) && PEER_ID.test(a.peer as string);
+    const taskId = () => typeof a.id === "number" && Number.isSafeInteger(a.id) && a.id > 0;
+    switch (a.action) {
+      case "pause":
+      case "resume":
+        return peer() ? holdPeer(a.action, a.peer as string) : bad;
+      case "permit": {
+        if (!text("id", 64) || !text("option", 128)) return bad;
+        const pending = permissions.get(a.id as string);
+        if (!pending) return { ok: false, error: "permission expired or already answered" };
+        const req = JSON.parse(pending.push);
+        const option = req.options.find((o: { optionId: string }) => o.optionId === a.option);
+        if (!option || (req.peer === "local" && option.kind !== "reject_once")) return bad;
+        pending.done(option.optionId);
+        return { ok: true };
+      }
+      case "send": {
+        if (!text("body", 8000)) return bad;
+        if (a.to !== undefined && (!Array.isArray(a.to) || a.to.length > 32 || a.to.some((id) => typeof id !== "string" || !PEER_ID.test(id) || !bus.peers.has(id)))) return bad;
+        const { body, priority } = parseMarker(a.body as string, "important");
+        if (!body) return bad;
+        bus.publish(newEnvelope(USER, body, { priority, ...(Array.isArray(a.to) && a.to.length ? { to: a.to as string[] } : {}) }));
+        return { ok: true };
+      }
+      case "propose": {
+        if (!text("title", 300) || (a.detail !== undefined && !text("detail", 8000)) || (a.class !== undefined && !text("class", 32)) || (a.owner !== undefined && !(typeof a.owner === "string" && PEER_ID.test(a.owner)))) return bad;
+        const result = await taskOp(USER, "hub_task_propose", { title: a.title, detail: a.detail, class: a.class, owner: a.owner });
+        return { ok: true, text: result };
+      }
+      case "assign":
+        return taskId() && peer() ? { ok: true, text: await taskOp(USER, "task_assign", { id: a.id, peer: a.peer }) } : bad;
+      default:
+        return bad;
+    }
+  }
+
   function onMessage(sock: Sock, msg: any): void {
     const c = sock.data;
     const reply = (body: Record<string, unknown>) => sock.send(JSON.stringify({ rid: msg.rid, ...body }));
@@ -517,6 +607,15 @@ export async function startDaemon(opts: DaemonOptions) {
         c.tail = bus.tap((e) => sock.send(JSON.stringify({ t: "event", e: redact(e) })));
         for (const p of permissions.values()) sock.send(p.push);
         return;
+      case "ui":
+        if (c.role !== "console") return void reply({ t: "ui", ok: false, error: "ui is a console command" });
+        try {
+          dashboard ??= startDashboard({ snapshot: uiSnapshot, action: uiAction });
+          writeStatus();
+          return void reply({ t: "ui", ok: true, url: dashboard.issue() });
+        } catch {
+          return void reply({ t: "ui", ok: false, error: "could not start the dashboard" });
+        }
       case "status":
         return void reply({ t: "status", status: status() });
       case "start":
@@ -537,17 +636,7 @@ export async function startDaemon(opts: DaemonOptions) {
       case "pause":
       case "resume": {
         if (c.role !== "console") return;
-        const id = String(msg.peer);
-        if (!bus.peers.has(id)) return void reply({ t: msg.t, ok: false, error: `unknown peer: ${id}` });
-        if (msg.t === "pause") {
-          manualPaused.add(id);
-          bus.pause(id);
-        } else {
-          if (budget.record(id)) return void reply({ t: msg.t, ok: false, error: `${id} is paused by the budget coordinator until its window resets (ahub budget); to override: ahub budget resume ${id}` });
-          manualPaused.delete(id);
-          bus.resume(id);
-        }
-        return void reply({ t: msg.t, ok: true, state: bus.stateOf(id) });
+        return void reply({ t: msg.t, ...holdPeer(msg.t, String(msg.peer)) });
       }
       case "ask":
         // Console only: the evidence may hold PII task text (on campus), and the answer is for the person at the terminal.
@@ -610,7 +699,7 @@ export async function startDaemon(opts: DaemonOptions) {
     hostname: "127.0.0.1",
     port: opts.controlPort,
     fetch(req, srv) {
-      if (req.headers.get("origin")) return new Response("forbidden", { status: 403 });
+      if (req.headers.has("origin")) return new Response("forbidden", { status: 403 });
       if (new URL(req.url).pathname === "/healthz") return new Response("ok");
       return srv.upgrade(req, { data: { authed: false } }) ? undefined : new Response("agent-hub control");
     },
@@ -635,6 +724,8 @@ export async function startDaemon(opts: DaemonOptions) {
     if (stopping) return;
     stopping = true;
     log("hub stopping");
+    dashboard?.stop();
+    for (const p of permissions.values()) p.done(undefined);
     await Promise.allSettled([...bus.peers.values()].map((p) => p.stop()));
     sidecar?.stop();
     for (const i of intervals) clearInterval(i);

package/src/hub/tasks.ts

@@ -59,7 +59,7 @@ export class Tasks {
   /** A task as a cloud peer may see it. */
   publicView(task: Task): Record<string, unknown> {
     const { title, detail, history, ...rest } = task;
-    return this.isPii(task) ? { ...rest, title: "[pii]", detail: "[pii]" } : { ...rest, title, detail, history: history.slice(-5) };
+    return this.isPii(task) ? { ...rest, refs: {}, title: "[pii]", detail: "[pii]" } : { ...rest, title, detail, history: history.slice(-5) };
   }
 
   private states(): Record<PeerId, PeerState> {

package/src/hub/ui.ts

@@ -0,0 +1,113 @@
+import { createHash, randomBytes } from "node:crypto";
+import { readFileSync } from "node:fs";
+
+export interface DashboardOptions {
+  snapshot: (after: number) => unknown;
+  action: (input: Record<string, unknown>) => Promise<unknown>;
+  /** Injectable clock for expiry tests; production uses wall time. */
+  now?: () => number;
+}
+
+const TICKET_MS = 60_000;
+const SESSION_MS = 60 * 60_000;
+const LIMIT = 64;
+const secret = () => randomBytes(32).toString("hex");
+
+/** Separate browser surface. Only the authenticated control console may construct it and issue tickets. */
+export function startDashboard(options: DashboardOptions) {
+  const now = options.now ?? Date.now;
+  const tickets = new Map<string, number>();
+  const sessions = new Map<string, number>();
+  const html = readFileSync(new URL("../ui/index.html", import.meta.url), "utf8");
+  const hashes = (tag: string) => [...html.matchAll(new RegExp(`<${tag}>([\\s\\S]*?)</${tag}>`, "g"))]
+    .map((m) => `'sha256-${createHash("sha256").update(m[1]!).digest("base64")}'`).join(" ");
+  const headers = {
+    "Cache-Control": "no-store",
+    "Referrer-Policy": "no-referrer",
+    "X-Content-Type-Options": "nosniff",
+    "X-Frame-Options": "DENY",
+    "Content-Security-Policy": `default-src 'none'; script-src ${hashes("script")}; style-src ${hashes("style")}; connect-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'`,
+  };
+  const json = (body: unknown, status = 200, extra: Record<string, string> = {}) =>
+    new Response(JSON.stringify(body), { status, headers: { ...headers, "Content-Type": "application/json", ...extra } });
+  const reject = (status: number, error: string) => json({ ok: false, error }, status);
+  function prune(map: Map<string, number>) {
+    for (const [key, expires] of map) if (expires <= now()) map.delete(key);
+  }
+  const server = Bun.serve({
+    hostname: "127.0.0.1",
+    port: 0,
+    maxRequestBodySize: 32 * 1024,
+    async fetch(req): Promise<Response> {
+      if (req.headers.get("host") !== host) return reject(403, "forbidden host");
+      const requestOrigin = req.headers.get("origin");
+      if (requestOrigin !== null && requestOrigin !== origin) return reject(403, "forbidden origin");
+      const path = new URL(req.url).pathname;
+      if (req.method === "GET" && path === "/") {
+        return new Response(html, { headers: { ...headers, "Content-Type": "text/html; charset=utf-8" } });
+      }
+      if (req.method !== "POST") return reject(405, "POST required");
+      if (requestOrigin !== origin) return reject(403, "origin required");
+      if (req.headers.get("content-type")?.split(";")[0]?.trim() !== "application/json") return reject(415, "JSON required");
+      if (!["/session", "/snapshot", "/action"].includes(path)) return reject(404, "not found");
+      prune(tickets);
+      prune(sessions);
+      let cookie: string | undefined;
+      if (path !== "/session") {
+        cookie = req.headers.get("cookie")?.split(";").map((v) => v.trim()).find((v) => v.startsWith(`${cookieName}=`))?.slice(cookieName.length + 1);
+        if (!cookie || !sessions.has(cookie)) return reject(401, "session expired or missing; run ahub ui");
+      }
+      let input: Record<string, unknown>;
+      try {
+        const value = await req.json();
+        if (!value || typeof value !== "object" || Array.isArray(value)) return reject(400, "JSON object required");
+        input = value as Record<string, unknown>;
+      } catch {
+        return reject(400, "invalid JSON");
+      }
+      prune(tickets);
+      prune(sessions);
+      if (path !== "/session" && (!cookie || !sessions.has(cookie))) return reject(401, "session expired; run ahub ui");
+      if (path === "/session") {
+        const ticket = typeof input.ticket === "string" ? input.ticket : "";
+        if (!tickets.delete(ticket)) return reject(401, "ticket expired or used; run ahub ui");
+        if (sessions.size >= LIMIT) return reject(429, "too many sessions; try later");
+        const session = secret();
+        sessions.set(session, now() + SESSION_MS);
+        return json({ ok: true }, 200, { "Set-Cookie": `${cookieName}=${session}; HttpOnly; SameSite=Strict; Path=/; Max-Age=${SESSION_MS / 1000}` });
+      }
+      if (path === "/snapshot") {
+        const after = input.after ?? 0;
+        if (typeof after !== "number" || !Number.isSafeInteger(after) || after < 0) return reject(400, "invalid cursor");
+        return json(options.snapshot(after));
+      }
+      try {
+        return json(await options.action(input));
+      } catch {
+        // Exceptions may quote private task text or backend details. Never echo them to the page.
+        return reject(400, "action failed; check its inputs and the terminal");
+      }
+    },
+    error() {
+      return reject(500, "dashboard request failed");
+    },
+  });
+  const host = `127.0.0.1:${server.port}`;
+  const origin = `http://${host}`;
+  const cookieName = `ahub_ui_${server.port}`;
+  return {
+    origin,
+    issue(): string {
+      prune(tickets);
+      if (tickets.size >= LIMIT) tickets.delete(tickets.keys().next().value!);
+      const ticket = secret();
+      tickets.set(ticket, now() + TICKET_MS);
+      return `${origin}/#${ticket}`;
+    },
+    stop() {
+      tickets.clear();
+      sessions.clear();
+      server.stop(true);
+    },
+  };
+}

package/src/ui/index.html

@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>agent-hub | Local dashboard</title>
+<style>
+:root{color-scheme:light;--paper:#f5f4ef;--ink:#252b29;--muted:#68716c;--line:#d9ddd5;--green:#245f45;--red:#a2392f}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,sans-serif}header,main{max-width:1440px;margin:auto;padding:24px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}h1{font-size:24px;letter-spacing:-1px;margin:0}h1 span{font-weight:400;color:var(--muted)}h2{font-size:15px;margin:0}p{margin:6px 0}.eyebrow,.meta{font-size:12px;color:var(--muted)}.eyebrow{letter-spacing:1.5px;text-transform:uppercase}.connection{font-size:12px;color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px}.stack{display:flex;flex-direction:column;gap:24px;min-width:0}section{border:1px solid var(--line);background:#fff;border-radius:8px;overflow:hidden}.section-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);gap:12px}.content{padding:16px 18px}.empty{color:var(--muted);padding:20px 18px}.row{padding:14px 18px;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.label{font-weight:600;overflow-wrap:anywhere}.badge{display:inline-block;font:11px ui-monospace,monospace;padding:3px 7px;background:#edf2ee;color:var(--green);border-radius:4px}.badge.warn{color:#855417;background:#f9f0dc}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}button,input,select,textarea{font:inherit}button{background:#fff;color:var(--ink);border:1px solid #bbc4bb;border-radius:5px;padding:6px 10px;cursor:pointer}button:hover{background:#f0f4ef}button.primary{background:var(--green);color:#fff;border-color:var(--green)}button.danger{color:var(--red)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--green);outline-offset:3px}input,select,textarea{width:100%;border:1px solid #bbc4bb;border-radius:5px;padding:8px;background:#fff;color:var(--ink)}input[type="checkbox"]{width:auto;margin-right:6px}textarea{resize:vertical;min-height:78px}label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}form .field{margin-bottom:12px}.actions select{width:auto;max-width:220px}.body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:7px}.stream{height:360px;overflow:auto}.event{padding:12px 18px;border-bottom:1px solid var(--line)}.event .body{font:13px/1.55 ui-monospace,monospace}.notice{grid-column:1/-1;margin:0;border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:#fff;overflow-wrap:anywhere}.notice.error{color:var(--red);border-color:#dfb8b3}.notice:empty{display:none}progress{width:100%;height:8px;accent-color:var(--green);display:block;margin:8px 0}.budget-window+.budget-window{margin-top:14px}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}details summary{cursor:pointer;padding:14px 18px;color:var(--green);font-weight:600}details form{padding:0 18px 18px}.task-list{max-height:460px;overflow:auto}footer{max-width:1440px;margin:auto;padding:0 32px 24px;color:var(--muted);font-size:12px}@media(max-width:900px){main{grid-template-columns:1fr}.stack{gap:18px}header,main{padding:18px}.stream{height:300px}footer{padding:0 18px 18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
+</style>
+</head>
+<body>
+<header><div><div class="eyebrow">Local control room</div><h1>agent-hub <span>/ dashboard</span></h1></div><div id="connection" class="connection" role="status">Connecting...</div></header>
+<main>
+<p id="notice" class="notice" role="status" aria-live="polite"></p>
+<div class="stack">
+<section aria-labelledby="stream-title"><div class="section-head"><h2 id="stream-title">Live stream</h2><label><input id="follow" type="checkbox" checked> Follow latest</label></div><div id="stream" class="stream" tabindex="0" aria-label="Recent hub events"><p class="empty">Waiting for hub activity...</p></div></section>
+<section aria-labelledby="tasks-title"><div class="section-head"><h2 id="tasks-title">Task board</h2><span id="task-count" class="meta"></span></div><div id="tasks" class="task-list"></div><details><summary>Propose a task</summary><form id="propose"><div class="field"><label for="title">Title</label><input id="title" name="title" required maxlength="300" placeholder="What should the team do?"></div><div class="field"><label for="detail">Details (optional)</label><textarea id="detail" name="detail" maxlength="8000"></textarea></div><div class="split"><div class="field"><label for="class">Class</label><select id="class" name="class"><option>implement</option><option>plan</option><option>bulk_edit</option><option>test</option><option>review</option><option>summarize</option><option>triage</option></select></div><div class="field"><label for="owner">Owner</label><select id="owner" name="owner"><option value="">Automatic</option></select></div></div><button class="primary" type="submit">Propose task</button></form></details></section>
+<section aria-labelledby="compose-title"><div class="section-head"><h2 id="compose-title">Console message</h2></div><form id="send" class="content"><div class="field"><label for="recipient">Recipient</label><select id="recipient" name="recipient"><option value="">All peers</option></select></div><div class="field"><label for="message">Message</label><textarea id="message" name="body" required maxlength="8000" placeholder="Send an instruction to the team..."></textarea></div><button class="primary" type="submit">Send message</button></form></section>
+</div>
+<div class="stack">
+<section aria-labelledby="peers-title"><div class="section-head"><h2 id="peers-title">Peers &amp; queues</h2><span id="peer-count" class="meta"></span></div><div id="peers"></div></section>
+<section aria-labelledby="permissions-title"><div class="section-head"><h2 id="permissions-title">Pending approvals</h2><span id="permission-count" class="meta"></span></div><div id="permissions"></div></section>
+<section aria-labelledby="budget-title"><div class="section-head"><h2 id="budget-title">Usage budgets</h2></div><div id="budget"></div></section>
+</div>
+</main>
+<footer>Loopback session. Private task content stays in the terminal. Reopen with <code>ahub ui</code> when your session expires.</footer>
+<script>
+'use strict';
+let ticket = location.hash.slice(1);
+history.replaceState(null, '', location.pathname);
+const $ = (id) => document.getElementById(id);
+const el = (tag, text, cls) => { const node = document.createElement(tag); if (text !== undefined) node.textContent = String(text); if (cls) node.className = cls; return node; };
+let stopped = false, cursor = 0, timer, eventCount = 0;
+const signatures = new Map();
+const time = (value) => value ? new Date(value).toLocaleString() : 'unknown';
+function notice(text, error = false) { $('notice').textContent = text; $('notice').classList.toggle('error', error); }
+function expire() { stopped = true; clearTimeout(timer); $('connection').textContent = 'Session closed'; notice('Session missing or expired. Run ahub ui in your terminal to reopen the dashboard.', true); document.querySelectorAll('button').forEach((button) => { button.disabled = true; }); }
+async function post(path, body) {
+  const response = await fetch(path, {method:'POST', credentials:'same-origin', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)});
+  if (response.status === 401) { expire(); throw new Error('Run ahub ui to start a new session.'); }
+  const result = await response.json();
+  if (!response.ok || result.ok === false) throw new Error(result.error || 'Request failed (' + response.status + ').');
+  return result;
+}
+async function action(payload, button) {
+  if (stopped) return false;
+  if (button) button.disabled = true;
+  try { const result = await post('/action', payload); notice(result.text || 'Action accepted.'); return true; }
+  catch (error) { if (!stopped) notice(error.message, true); return false; }
+  finally { if (button && !stopped) button.disabled = false; }
+}
+function button(text, payload, cls) { const node = el('button', text, cls); node.type = 'button'; node.addEventListener('click', () => void action(payload, node)); return node; }
+function update(id, data, render) { const signature = JSON.stringify(data); if (signatures.get(id) === signature) return; signatures.set(id, signature); const target = $(id); target.replaceChildren(); render(target); }
+function empty(target, text) { target.append(el('p', text, 'empty')); }
+function peerOptions(select, ids, first) { const selected = select.value; select.replaceChildren(); const initial = el('option', first); initial.value = ''; select.append(initial); for (const id of ids) { const option = el('option', id); option.value = id; select.append(option); } if (ids.includes(selected)) select.value = selected; }
+function render(snapshot) {
+  const peers = snapshot.status.peers || {}, ids = Object.keys(peers);
+  $('peer-count').textContent = ids.length + ' peers';
+  update('peers', peers, (target) => {
+    if (!ids.length) return empty(target, 'No peers connected. Start an agent from your terminal.');
+    for (const [id, peer] of Object.entries(peers)) {
+      const row = el('div', undefined, 'row'), head = el('div', undefined, 'row-head');
+      head.append(el('span', id, 'label'), el('span', peer.state, 'badge' + (peer.state === 'paused' ? ' warn' : '')));
+      row.append(head, el('p', peer.queued + ' queued', 'meta'));
+      if (peer.paused) row.append(el('p', peer.paused, 'meta'));
+      const paused = peer.state === 'paused' || peer.paused;
+      row.append(button(paused ? 'Resume' : 'Pause', {action:paused ? 'resume' : 'pause', peer:id})); target.append(row);
+    }
+  });
+  const peerSignature = JSON.stringify(ids);
+  if (signatures.get('peer-options') !== peerSignature) { signatures.set('peer-options', peerSignature); peerOptions($('owner'), ids, 'Automatic'); peerOptions($('recipient'), ids, 'All peers'); }
+  $('task-count').textContent = snapshot.tasks.length + ' tasks';
+  update('tasks', [snapshot.tasks, ids], (target) => {
+    if (!snapshot.tasks.length) return empty(target, 'No public tasks yet. Propose a task below to get started.');
+    for (const task of snapshot.tasks) {
+      const row = el('div', undefined, 'row'), head = el('div', undefined, 'row-head');
+      head.append(el('span', '#' + task.id + ' ' + task.title, 'label'), el('span', task.state.replaceAll('_', ' '), 'badge'));
+      row.append(head, el('p', task.class + ' / ' + (task.owner || 'unassigned') + (task.reviewer ? ' / review: ' + task.reviewer : ''), 'meta'));
+      if (task.detail) row.append(el('p', task.detail, 'body'));
+      if (task.state !== 'approved' && ids.length) {
+        const actions = el('div', undefined, 'actions'), select = el('select'); select.setAttribute('aria-label', 'Assign task ' + task.id); peerOptions(select, ids, 'Select peer'); if (ids.includes(task.owner)) select.value = task.owner;
+        const assign = el('button', 'Assign'); assign.type = 'button'; assign.addEventListener('click', () => { if (select.value) void action({action:'assign', id:task.id, peer:select.value}, assign); else notice('Select a peer before assigning this task.', true); });
+        actions.append(select, assign); row.append(actions);
+      }
+      target.append(row);
+    }
+  });
+  $('permission-count').textContent = String(snapshot.permissions.length);
+  update('permissions', snapshot.permissions, (target) => {
+    if (!snapshot.permissions.length) return empty(target, 'No approvals waiting.');
+    for (const permission of snapshot.permissions) {
+      const row = el('div', undefined, 'row'); row.append(el('div', permission.peer, 'label'), el('p', permission.title, 'body'));
+      if (permission.terminalOnly) row.append(el('p', 'Review details and allow in the terminal with ahub tail. You can deny here.', 'meta'));
+      const actions = el('div', undefined, 'actions');
+      for (const option of permission.options) { const deny = option.kind === 'reject_once' || option.kind === 'reject_always'; if (permission.terminalOnly && !deny) continue; actions.append(button(option.name, {action:'permit', id:permission.id, option:option.optionId}, deny ? 'danger' : 'primary')); }
+      row.append(actions); target.append(row);
+    }
+  });
+  update('budget', snapshot.budget, (target) => {
+    if (!Object.keys(snapshot.budget).length) return empty(target, 'No usage readings yet. Usage appears when a peer reports it.');
+    for (const [peer, budget] of Object.entries(snapshot.budget)) {
+      const row = el('div', undefined, 'row'); row.append(el('div', peer, 'label'));
+      if (budget.paused) row.append(el('p', 'Paused: ' + budget.paused.reason + ' / resets ' + time(budget.paused.resetsAt), 'meta'));
+      if (!budget.windows.length) row.append(el('p', 'No usage windows reported.', 'meta'));
+      for (const window of budget.windows) { const item = el('div', undefined, 'budget-window'), percent = Math.round(window.used * 100); item.append(el('p', window.id + ': ' + percent + '% used' + (window.stale ? ' (stale)' : ''), 'meta')); const bar = el('progress'); bar.max = 1; bar.value = window.used; bar.setAttribute('aria-label', peer + ' ' + window.id + ' usage'); item.append(bar, el('p', window.source + (window.resetsAt ? ' / resets ' + time(window.resetsAt) : ''), 'meta')); row.append(item); }
+      target.append(row);
+    }
+  });
+  const stream = $('stream');
+  for (const entry of snapshot.events || []) {
+    if (entry.seq <= cursor) continue;
+    if (!eventCount) stream.replaceChildren();
+    const event = entry.event, node = el('div', undefined, 'event');
+    if (event.env) { const env = event.env; node.append(el('div', new Date(env.ts).toLocaleTimeString() + ' / ' + env.from + ' → ' + (env.to ? env.to.join(', ') : 'all') + ' / ' + env.kind + (event.t !== 'envelope' ? ' / ' + event.t : '') + (event.dropped ? ' / ' + event.dropped : ''), 'meta'), el('div', env.body, 'body')); }
+    else node.append(el('div', event.peer + ' / ' + event.state, 'meta'));
+    stream.append(node); eventCount++; while (stream.children.length > 200) stream.firstElementChild.remove();
+  }
+  cursor = Math.max(cursor, snapshot.cursor || 0);
+  if ($('follow').checked) stream.scrollTop = stream.scrollHeight;
+}
+async function poll() {
+  if (stopped) return;
+  try { render(await post('/snapshot', {after:cursor})); $('connection').textContent = 'Live / updated ' + new Date().toLocaleTimeString(); }
+  catch (error) { if (!stopped) $('connection').textContent = 'Disconnected / retrying: ' + error.message; }
+  if (!stopped) timer = setTimeout(poll, 1000);
+}
+$('send').addEventListener('submit', async (event) => { event.preventDefault(); const body = $('message').value.trim(); if (!body) return; const to = $('recipient').value, payload = {action:'send', body}; if (to) payload.to = [to]; if (await action(payload, event.submitter)) $('message').value = ''; });
+$('propose').addEventListener('submit', async (event) => { event.preventDefault(); const title = $('title').value.trim(); if (!title) return; const payload = {action:'propose', title, class:$('class').value}; if ($('detail').value.trim()) payload.detail = $('detail').value.trim(); if ($('owner').value) payload.owner = $('owner').value; if (await action(payload, event.submitter)) { $('title').value = ''; $('detail').value = ''; } });
+(async () => { try { if (ticket) await post('/session', {ticket}); ticket = ''; await poll(); } catch (error) { ticket = ''; if (!stopped) { stopped = true; notice('Could not start session: ' + error.message + ' Run ahub ui to reopen.', true); $('connection').textContent = 'Session unavailable'; } } })();
+</script>
+</body>
+</html>