@agent-arc-status/dashboard 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joe Fisher
+
+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,34 @@
+# @agent-arc-status/dashboard — `arc-dashboard`
+
+A **zero-dependency** live web view of in-flight [Agent Arc Status
+Protocol](https://github.com/joethefisher/agent-arc-status) arcs. POST events to `/ingest`; watch
+them render as cards with progress bars, status, milestone counts, blockers, and a stall glow.
+
+```bash
+npx @agent-arc-status/dashboard          # http://127.0.0.1:8686
+# then POST arc.status events to http://127.0.0.1:8686/ingest
+```
+
+Pairs directly with `@agent-arc-status/emitter`'s `httpTransport` (point it at `/ingest`).
+
+## Design
+
+A deliberately thin server: it validates untrusted webhook events, folds them to arc **state**, and
+streams that state as JSON over Server-Sent Events. The browser renders cards from JSON using
+`textContent`/`createElement` — **never `innerHTML`** — so a hostile `title` or `body` can't execute.
+That trust boundary (spec §9.4) is the whole point.
+
+- `POST /ingest` — validate (400 on bad input), 64KB body cap (413), optional HMAC-SHA256 (401), then broadcast.
+- `GET /events` — SSE: an initial `snapshot` of every arc's `reduceArc` state, then live `event` frames.
+- `GET /` — a single static page (`default-src 'self'` CSP, no inline scripts).
+
+Binds `127.0.0.1` by default. The store is bounded (evicts oldest arcs). Programmatic use:
+
+```ts
+import { startDashboard } from "@agent-arc-status/dashboard";
+const dash = await startDashboard({ port: 8686, hmacSecret: process.env.ARC_STATUS_SECRET });
+console.log(dash.url);
+// ... await dash.close();
+```
+
+Environment: `PORT`, `HOST`, `ARC_STATUS_SECRET`.

package/dist/bin/arc-dashboard.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=arc-dashboard.d.ts.map

package/dist/bin/arc-dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc-dashboard.d.ts","sourceRoot":"","sources":["../../src/bin/arc-dashboard.ts"],"names":[],"mappings":""}

package/dist/bin/arc-dashboard.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import { startDashboard } from "../server.js";
+const port = process.env["PORT"] !== undefined ? Number(process.env["PORT"]) : 8686;
+const host = process.env["HOST"] ?? "127.0.0.1";
+const hmacSecret = process.env["ARC_STATUS_SECRET"];
+const dashboard = await startDashboard(hmacSecret !== undefined ? { port, host, hmacSecret } : { port, host });
+process.stderr.write(`arc-dashboard on ${dashboard.url}  (POST arc.status events to ${dashboard.url}/ingest)\n`);
+const stop = () => {
+    void dashboard.close().then(() => process.exit(0));
+};
+process.once("SIGINT", stop);
+process.once("SIGTERM", stop);
+//# sourceMappingURL=arc-dashboard.js.map

package/dist/bin/arc-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc-dashboard.js","sourceRoot":"","sources":["../../src/bin/arc-dashboard.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACpF,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC;AAChD,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAEpD,MAAM,SAAS,GAAG,MAAM,cAAc,CACpC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CACvE,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,oBAAoB,SAAS,CAAC,GAAG,gCAAgC,SAAS,CAAC,GAAG,YAAY,CAAC,CAAC;AAEjH,MAAM,IAAI,GAAG,GAAS,EAAE;IACtB,KAAK,SAAS,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC,CAAC;AACF,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC"}

package/dist/server.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A thin, zero-dependency dashboard server: validate untrusted webhook events,
+ * fold them to arc state, and stream that state (as DATA, never HTML) to
+ * browsers over SSE. The browser renders cards from JSON with textContent, so a
+ * hostile `title`/`body` can never execute (spec §9.4). Binds 127.0.0.1 by
+ * default; caps request bodies; optional HMAC-SHA256 on ingest.
+ */
+import { type Server } from "node:http";
+import { type CadenceConfig } from "@agent-arc-status/reference";
+export interface DashboardOptions {
+    host?: string;
+    port?: number;
+    /** If set, require a valid HMAC-SHA256 `X-Webhook-Signature` on /ingest. */
+    hmacSecret?: string;
+    maxBodyBytes?: number;
+    cadence?: CadenceConfig;
+}
+export declare function createServer(options?: DashboardOptions): Server;
+export interface RunningDashboard {
+    server: Server;
+    url: string;
+    close(): Promise<void>;
+}
+/** Create and start a dashboard, resolving with its URL and a close(). */
+export declare function startDashboard(options?: DashboardOptions): Promise<RunningDashboard>;
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAoC,KAAK,MAAM,EAAuB,MAAM,WAAW,CAAC;AAK/F,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAaxE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AA+CD,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,MAAM,CA0DnE;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACxB;AAED,0EAA0E;AAC1E,wBAAgB,cAAc,CAAC,OAAO,GAAE,gBAAqB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAexF"}

package/dist/server.js

@@ -0,0 +1,138 @@
+/**
+ * A thin, zero-dependency dashboard server: validate untrusted webhook events,
+ * fold them to arc state, and stream that state (as DATA, never HTML) to
+ * browsers over SSE. The browser renders cards from JSON with textContent, so a
+ * hostile `title`/`body` can never execute (spec §9.4). Binds 127.0.0.1 by
+ * default; caps request bodies; optional HMAC-SHA256 on ingest.
+ */
+import { createServer as httpCreateServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { createHmac, timingSafeEqual } from "node:crypto";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parse } from "@agent-arc-status/reference";
+import { ArcStore } from "./store.js";
+import { SseHub } from "./sse.js";
+const PUBLIC_DIR = join(dirname(fileURLToPath(import.meta.url)), "..", "public");
+const STATIC = {
+    "/": { file: "index.html", type: "text/html; charset=utf-8", csp: true },
+    "/index.html": { file: "index.html", type: "text/html; charset=utf-8", csp: true },
+    "/app.js": { file: "app.js", type: "text/javascript; charset=utf-8" },
+    "/style.css": { file: "style.css", type: "text/css; charset=utf-8" },
+};
+function readBody(req, maxBytes) {
+    return new Promise((resolve) => {
+        const chunks = [];
+        let size = 0;
+        let tooBig = false;
+        req.on("data", (chunk) => {
+            size += chunk.length;
+            if (size > maxBytes)
+                tooBig = true;
+            else
+                chunks.push(chunk);
+        });
+        req.on("end", () => resolve({ body: Buffer.concat(chunks).toString("utf8"), tooBig }));
+        req.on("error", () => resolve({ body: "", tooBig: false }));
+    });
+}
+function signatureValid(secret, body, header) {
+    if (header === undefined)
+        return false;
+    const expected = `sha256=${createHmac("sha256", secret).update(body).digest("hex")}`;
+    const a = Buffer.from(expected);
+    const b = Buffer.from(header);
+    return a.length === b.length && timingSafeEqual(a, b);
+}
+async function serveStatic(url, res) {
+    const entry = STATIC[url];
+    if (entry === undefined) {
+        res.writeHead(404);
+        res.end();
+        return;
+    }
+    try {
+        const content = await readFile(join(PUBLIC_DIR, entry.file));
+        const headers = { "content-type": entry.type };
+        if (entry.csp)
+            headers["content-security-policy"] = "default-src 'self'";
+        res.writeHead(200, headers);
+        res.end(content);
+    }
+    catch {
+        res.writeHead(500);
+        res.end();
+    }
+}
+export function createServer(options = {}) {
+    const maxBody = options.maxBodyBytes ?? 65536;
+    const store = new ArcStore();
+    const hub = new SseHub();
+    return httpCreateServer((req, res) => {
+        void (async () => {
+            const url = (req.url ?? "/").split("?")[0] ?? "/";
+            const method = req.method ?? "GET";
+            if (method === "POST" && url === "/ingest") {
+                const { body, tooBig } = await readBody(req, maxBody);
+                if (tooBig) {
+                    res.writeHead(413);
+                    res.end();
+                    return;
+                }
+                if (options.hmacSecret !== undefined) {
+                    const sig = req.headers["x-webhook-signature"];
+                    if (!signatureValid(options.hmacSecret, body, Array.isArray(sig) ? sig[0] : sig)) {
+                        res.writeHead(401);
+                        res.end();
+                        return;
+                    }
+                }
+                const result = parse(body);
+                if (!result.ok) {
+                    res.writeHead(400, { "content-type": "application/json" });
+                    res.end(JSON.stringify({ issues: result.issues }));
+                    return;
+                }
+                const state = store.append(result.event);
+                hub.broadcast("event", state);
+                res.writeHead(202);
+                res.end();
+                return;
+            }
+            if (method === "GET" && url === "/events") {
+                res.writeHead(200, {
+                    "content-type": "text/event-stream",
+                    "cache-control": "no-cache",
+                    connection: "keep-alive",
+                });
+                hub.add(res);
+                hub.send(res, "snapshot", store.snapshots());
+                return;
+            }
+            if (method === "GET") {
+                await serveStatic(url, res);
+                return;
+            }
+            res.writeHead(405);
+            res.end();
+        })();
+    });
+}
+/** Create and start a dashboard, resolving with its URL and a close(). */
+export function startDashboard(options = {}) {
+    const host = options.host ?? "127.0.0.1";
+    const port = options.port ?? 8686;
+    const server = createServer(options);
+    return new Promise((resolve) => {
+        server.listen(port, host, () => {
+            const address = server.address();
+            const boundPort = typeof address === "object" && address !== null ? address.port : port;
+            resolve({
+                server,
+                url: `http://${host}:${boundPort}`,
+                close: () => new Promise((done) => server.close(() => done())),
+            });
+        });
+    });
+}
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

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

package/dist/sse.d.ts

@@ -0,0 +1,10 @@
+import type { ServerResponse } from "node:http";
+/** A minimal Server-Sent-Events hub: named events broadcast to all clients. */
+export declare class SseHub {
+    #private;
+    add(res: ServerResponse): void;
+    send(res: ServerResponse, event: string, data: unknown): void;
+    broadcast(event: string, data: unknown): void;
+    get size(): number;
+}
+//# sourceMappingURL=sse.d.ts.map

package/dist/sse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sse.d.ts","sourceRoot":"","sources":["../src/sse.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,+EAA+E;AAC/E,qBAAa,MAAM;;IAGjB,GAAG,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAK9B,IAAI,CAAC,GAAG,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;IAI7D,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;IAK7C,IAAI,IAAI,IAAI,MAAM,CAEjB;CACF"}

package/dist/sse.js

@@ -0,0 +1,20 @@
+/** A minimal Server-Sent-Events hub: named events broadcast to all clients. */
+export class SseHub {
+    #clients = new Set();
+    add(res) {
+        this.#clients.add(res);
+        res.on("close", () => this.#clients.delete(res));
+    }
+    send(res, event, data) {
+        res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+    }
+    broadcast(event, data) {
+        const payload = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+        for (const res of this.#clients)
+            res.write(payload);
+    }
+    get size() {
+        return this.#clients.size;
+    }
+}
+//# sourceMappingURL=sse.js.map

package/dist/sse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sse.js","sourceRoot":"","sources":["../src/sse.ts"],"names":[],"mappings":"AAEA,+EAA+E;AAC/E,MAAM,OAAO,MAAM;IACR,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;IAE9C,GAAG,CAAC,GAAmB;QACrB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IACnD,CAAC;IAED,IAAI,CAAC,GAAmB,EAAE,KAAa,EAAE,IAAa;QACpD,GAAG,CAAC,KAAK,CAAC,UAAU,KAAK,WAAW,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClE,CAAC;IAED,SAAS,CAAC,KAAa,EAAE,IAAa;QACpC,MAAM,OAAO,GAAG,UAAU,KAAK,WAAW,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;QACrE,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ;YAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtD,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;CACF"}

package/dist/store.d.ts

@@ -0,0 +1,15 @@
+import { type ArcState, type ArcStatusEvent } from "@agent-arc-status/reference";
+/**
+ * In-memory arc store, bounded so a long-lived dashboard cannot grow without
+ * limit. Keeps the full event timeline per arc (cheap to fold) and evicts the
+ * oldest arcs once the cap is reached.
+ */
+export declare class ArcStore {
+    #private;
+    constructor(maxArcs?: number);
+    /** Append an event and return the arc's current reduced state. */
+    append(event: ArcStatusEvent): ArcState;
+    /** Current reduced state for every tracked arc, in first-seen order. */
+    snapshots(): ArcState[];
+}
+//# sourceMappingURL=store.d.ts.map

package/dist/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE5F;;;;GAIG;AACH,qBAAa,QAAQ;;gBAKP,OAAO,SAAM;IAIzB,kEAAkE;IAClE,MAAM,CAAC,KAAK,EAAE,cAAc,GAAG,QAAQ;IAYvC,wEAAwE;IACxE,SAAS,IAAI,QAAQ,EAAE;CAkBxB"}

package/dist/store.js

@@ -0,0 +1,47 @@
+import { reduceArc } from "@agent-arc-status/reference";
+/**
+ * In-memory arc store, bounded so a long-lived dashboard cannot grow without
+ * limit. Keeps the full event timeline per arc (cheap to fold) and evicts the
+ * oldest arcs once the cap is reached.
+ */
+export class ArcStore {
+    #events = new Map();
+    #order = [];
+    #maxArcs;
+    constructor(maxArcs = 200) {
+        this.#maxArcs = maxArcs;
+    }
+    /** Append an event and return the arc's current reduced state. */
+    append(event) {
+        let bucket = this.#events.get(event.arc_id);
+        if (bucket === undefined) {
+            bucket = [];
+            this.#events.set(event.arc_id, bucket);
+            this.#order.push(event.arc_id);
+            this.#evict();
+        }
+        bucket.push(event);
+        return reduceArc(bucket);
+    }
+    /** Current reduced state for every tracked arc, in first-seen order. */
+    snapshots() {
+        const out = [];
+        for (const arcId of this.#order) {
+            const bucket = this.#events.get(arcId);
+            if (bucket !== undefined) {
+                const state = reduceArc(bucket);
+                if (state !== null)
+                    out.push(state);
+            }
+        }
+        return out;
+    }
+    #evict() {
+        while (this.#order.length > this.#maxArcs) {
+            const evicted = this.#order.shift();
+            if (evicted !== undefined)
+                this.#events.delete(evicted);
+        }
+    }
+}
+//# sourceMappingURL=store.js.map

package/dist/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsC,MAAM,6BAA6B,CAAC;AAE5F;;;;GAIG;AACH,MAAM,OAAO,QAAQ;IACV,OAAO,GAAG,IAAI,GAAG,EAA4B,CAAC;IACvD,MAAM,GAAa,EAAE,CAAC;IACb,QAAQ,CAAS;IAE1B,YAAY,OAAO,GAAG,GAAG;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAED,kEAAkE;IAClE,MAAM,CAAC,KAAqB;QAC1B,IAAI,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,MAAM,GAAG,EAAE,CAAC;YACZ,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnB,OAAO,SAAS,CAAC,MAAM,CAAa,CAAC;IACvC,CAAC;IAED,wEAAwE;IACxE,SAAS;QACP,MAAM,GAAG,GAAe,EAAE,CAAC;QAC3B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;gBACzB,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;gBAChC,IAAI,KAAK,KAAK,IAAI;oBAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpC,IAAI,OAAO,KAAK,SAAS;gBAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;CACF"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@agent-arc-status/dashboard",
+  "version": "0.3.0",
+  "description": "arc-dashboard: a zero-dependency live web view of in-flight Agent Arc Status Protocol arcs.",
+  "license": "MIT",
+  "author": "Joe Fisher",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joethefisher/agent-arc-status.git",
+    "directory": "packages/dashboard"
+  },
+  "homepage": "https://github.com/joethefisher/agent-arc-status#readme",
+  "bugs": "https://github.com/joethefisher/agent-arc-status/issues",
+  "keywords": [
+    "agent",
+    "agents",
+    "ai",
+    "llm",
+    "observability",
+    "progress",
+    "arc-status",
+    "dashboard"
+  ],
+  "type": "module",
+  "bin": {
+    "arc-dashboard": "./dist/bin/arc-dashboard.js"
+  },
+  "main": "./dist/server.js",
+  "types": "./dist/server.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    }
+  },
+  "files": [
+    "dist",
+    "public",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "@agent-arc-status/reference": "^0.3.0"
+  }
+}

package/public/app.js

@@ -0,0 +1,94 @@
+// Client for the Agent Arc Status dashboard. Renders arc cards from JSON state
+// streamed over SSE. All event text is inserted with textContent / createElement
+// (never innerHTML), so a hostile title or body can never execute — the trust
+// boundary from spec §9.4 is enforced here in the DOM layer.
+
+const PHASE_SYMBOL = { started: "▶", milestone: "✓", heartbeat: "·", done: "■", blocked: "⛔" };
+const STALL_MS = 20 * 60 * 1000;
+
+const arcsEl = document.getElementById("arcs");
+const emptyEl = document.getElementById("empty");
+const connEl = document.getElementById("conn");
+
+const cards = new Map();
+const receipt = new Map();
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function upsert(state) {
+  receipt.set(state.arc_id, Date.now());
+
+  let card = cards.get(state.arc_id);
+  if (!card) {
+    card = el("section", "card");
+    cards.set(state.arc_id, card);
+    arcsEl.appendChild(card);
+  }
+  card.dataset.status = state.status;
+  card.textContent = "";
+
+  const head = el("div", "head");
+  head.appendChild(el("span", "sym", PHASE_SYMBOL[state.phase] || "•"));
+  head.appendChild(el("span", "title", state.title));
+  head.appendChild(el("span", "badge " + state.status, state.status));
+  card.appendChild(head);
+
+  if (typeof state.step === "number" && typeof state.total === "number") {
+    const bar = el("div", "bar");
+    const fill = el("div", "fill");
+    fill.style.width = Math.round((state.step / state.total) * 100) + "%";
+    bar.appendChild(fill);
+    card.appendChild(bar);
+    let meta = "step " + state.step + "/" + state.total;
+    if (typeof state.eta_minutes === "number") meta += " · ETA " + state.eta_minutes + "m";
+    card.appendChild(el("div", "meta", meta));
+  } else if (typeof state.eta_minutes === "number") {
+    card.appendChild(el("div", "meta", "ETA " + state.eta_minutes + "m"));
+  }
+
+  card.appendChild(
+    el("div", "meta dim", state.eventCount + " events · " + state.milestones.length + " milestones"),
+  );
+
+  if (state.blocked) {
+    const blocker = el("div", "blocker");
+    blocker.appendChild(el("strong", null, "blocked: "));
+    blocker.appendChild(document.createTextNode(state.blocked.title));
+    card.appendChild(blocker);
+  }
+
+  emptyEl.style.display = cards.size ? "none" : "";
+}
+
+function connect() {
+  const source = new EventSource("/events");
+  source.addEventListener("open", () => {
+    connEl.textContent = "live";
+    connEl.className = "conn live";
+  });
+  source.addEventListener("error", () => {
+    connEl.textContent = "reconnecting…";
+    connEl.className = "conn";
+  });
+  source.addEventListener("snapshot", (e) => {
+    JSON.parse(e.data).forEach(upsert);
+  });
+  source.addEventListener("event", (e) => {
+    upsert(JSON.parse(e.data));
+  });
+}
+
+connect();
+
+setInterval(() => {
+  const now = Date.now();
+  for (const [id, card] of cards) {
+    const stalled = card.dataset.status === "active" && now - (receipt.get(id) || now) > STALL_MS;
+    card.classList.toggle("stalled", stalled);
+  }
+}, 15000);

package/public/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Agent Arc Status</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Agent Arc Status</h1>
+      <span id="conn" class="conn">connecting…</span>
+    </header>
+    <main id="arcs" aria-live="polite"></main>
+    <p id="empty" class="empty">
+      No arcs yet. POST <code>arc.status</code> events to <code>/ingest</code> to watch them here.
+    </p>
+    <script src="/app.js"></script>
+  </body>
+</html>

package/public/style.css

@@ -0,0 +1,147 @@
+:root {
+  --bg: #0e1116;
+  --panel: #171b22;
+  --border: #262c36;
+  --text: #d6dde6;
+  --dim: #8b99a8;
+  --cyan: #34c3d6;
+  --green: #3fb950;
+  --red: #f85149;
+  --amber: #d29922;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  background: var(--bg);
+  color: var(--text);
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border);
+}
+
+h1 {
+  font-size: 16px;
+  margin: 0;
+  letter-spacing: 0.02em;
+}
+
+.conn {
+  font-size: 12px;
+  color: var(--dim);
+}
+.conn.live {
+  color: var(--green);
+}
+
+main {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 14px;
+  padding: 24px;
+}
+
+.empty {
+  padding: 0 24px;
+  color: var(--dim);
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--dim);
+  border-radius: 8px;
+  padding: 14px 16px;
+}
+.card[data-status="active"] {
+  border-left-color: var(--cyan);
+}
+.card[data-status="done"] {
+  border-left-color: var(--green);
+}
+.card[data-status="blocked"] {
+  border-left-color: var(--red);
+}
+
+.head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.sym {
+  font-size: 16px;
+}
+.title {
+  flex: 1;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.badge {
+  font-size: 11px;
+  text-transform: uppercase;
+  padding: 1px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--dim);
+}
+.badge.active {
+  color: var(--cyan);
+}
+.badge.done {
+  color: var(--green);
+}
+.badge.blocked {
+  color: var(--red);
+}
+
+.bar {
+  height: 6px;
+  margin: 10px 0 6px;
+  background: #0b0e13;
+  border-radius: 999px;
+  overflow: hidden;
+}
+.fill {
+  height: 100%;
+  background: var(--cyan);
+  transition: width 0.4s ease;
+}
+
+.meta {
+  font-size: 12px;
+  color: var(--text);
+}
+.meta.dim {
+  color: var(--dim);
+}
+
+.blocker {
+  margin-top: 8px;
+  padding: 8px 10px;
+  background: rgba(248, 81, 73, 0.1);
+  border-radius: 6px;
+  color: var(--red);
+  font-size: 12px;
+}
+
+.card.stalled {
+  animation: glow 1.6s ease-in-out infinite;
+}
+@keyframes glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(210, 153, 34, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 3px rgba(210, 153, 34, 0.35);
+  }
+}