@scp-dev/dashboard 0.0.0 → 0.2.0

package/README.md

@@ -0,0 +1,57 @@
+# @scp-dev/dashboard
+
+Optional dashboard server for the SCP relay. Requires Node 18 or later and has no runtime dependencies.
+The browser UI uses the hosted relay's renderers. Build from the repository root with `bun install`
+and `bun run --filter @scp-dev/dashboard build`.
+
+```sh
+npx @scp-dev/dashboard --relay https://relay.example.com
+```
+
+Open `http://127.0.0.1:8788` and sign in with a relay token or device code. Approve device codes with
+`scp-relay device approve <code> --account <handle> --member <name>` on the relay host.
+Members and tokens are managed with the relay admin CLI.
+
+| Option | Environment | Default |
+| --- | --- | --- |
+| `--relay <url>` | `SCP_DASHBOARD_RELAY` | Required relay origin |
+| `--listen <host:port>` | `SCP_DASHBOARD_LISTEN` | `127.0.0.1:8788` |
+| `--public-url <url>` | `SCP_DASHBOARD_PUBLIC_URL` | Request origin |
+| `--forward-header <name>` (repeatable) | `SCP_DASHBOARD_FORWARD_HEADERS` (comma separated) | None |
+
+`--help` shows usage, `--version` prints the relay release version, and `--health` checks the local
+listener's `/health` route without contacting the relay.
+
+Credentials stay server side in memory. The browser receives an opaque HttpOnly, SameSite=Strict cookie
+and a session-bound CSRF token. Every authenticated request checks the relay session; a relay 401 signs
+the browser out. Event WebSockets use the session's bearer and revalidate every 30 seconds. A dashboard
+restart signs everyone out. POST requests require JSON, a matching Origin and a valid CSRF token.
+
+Use an HTTPS reverse proxy and set `--public-url https://dashboard.example.com` for Secure host cookies
+and external Origin checks. The proxy must support WebSocket upgrades.
+
+## Container
+
+```sh
+docker run --rm -p 8788:8788 \
+  -e SCP_DASHBOARD_RELAY=https://relay.example.com \
+  -e SCP_DASHBOARD_PUBLIC_URL=https://dashboard.example.com \
+  ghcr.io/scphq/scp-dashboard:latest
+```
+
+The image runs as uid 65532, listens on `0.0.0.0:8788`, and health checks the dashboard independently
+of relay availability. See the [self-hosting guide](https://scp.dev/docs/self-host) for Compose with
+Postgres, relay and dashboard. Build locally from the repository root with
+`docker build -f packages/dashboard/Dockerfile -t scp-dashboard:local .`.
+
+## SSO
+
+Put the dashboard itself behind an authenticating SSO proxy. Set `--forward-header` for each identity
+header expected by the relay. The proxy must overwrite these headers and block direct dashboard access.
+Run the relay with `--auth trusted-header` and include the dashboard host's IP in `--trusted-proxy`.
+Only explicitly named identity headers are forwarded on every request, including event upgrades.
+The relay accepts or rejects that identity; no bearer is stored or sent by the browser in this mode.
+Signing out clears the cookie, but the SSO proxy may authenticate the next request again.
+
+To build a separate UI, see [docs/openapi/relay-dashboard.yaml](https://github.com/scphq/scp/blob/main/docs/openapi/relay-dashboard.yaml).
+The relay's `--cors-origin` lets a UI on another origin call that API directly with a bearer.

package/dist/public/app.css

@@ -0,0 +1,187 @@
+
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+:root{--bg:#fff;--surface:#f7f7f6;--fg:#0b0b0b;--ink:#555;--dim:#6b6b6b;--faint:#a8a8a8;--line:rgb(0 0 0/.12);--line-soft:rgb(0 0 0/.065);--acc:#4746d4;--acc-soft:rgb(71 70 212/.09);--warn:#b4321f;--head:rgb(255 255 255/.82);
+--sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--gutter:clamp(1rem,4vw,3rem);--headh:4rem}
+@media (prefers-color-scheme:dark){:root{--bg:#090909;--surface:#111;--fg:#f2f2f0;--ink:#a6a6a6;--dim:#8c8c8c;--faint:#575757;--line:rgb(255 255 255/.13);--line-soft:rgb(255 255 255/.07);--acc:#9d9cff;--acc-soft:rgb(157 156 255/.1);--warn:#ff8a78;--head:rgb(9 9 9/.78)}}
+html{color-scheme:light dark;-webkit-text-size-adjust:100%}
+body{display:flex;flex-direction:column;min-height:100dvh;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:.9375rem;line-height:1.6;-webkit-font-smoothing:antialiased}
+main{flex:1}
+a{color:inherit}
+::selection{background:var(--fg);color:var(--bg)}
+:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
+code,pre,kbd{font-family:var(--mono)}
+.wrap{position:relative;width:100%;max-width:56rem;margin-inline:auto;padding-inline:var(--gutter);border-inline:1px solid var(--line-soft)}
+.rule{border-top:1px solid var(--line-soft)}
+@media (max-width:48rem){.wrap{border-inline:0}}
+.wide .wrap{max-width:100rem}
+.head{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line-soft);background:var(--head);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
+.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--headh)}
+.brand{display:inline-flex;align-items:center;gap:.625rem;font-weight:600;letter-spacing:.02em;text-decoration:none}
+.brand-dim{color:var(--dim);font-weight:500}
+.mark{width:16px;height:16px;flex:none;color:var(--fg)}
+.nav{display:flex;align-items:center;gap:1.5rem}
+.nav a,.linkish{font-family:var(--mono);font-size:.75rem;color:var(--ink);padding-block:.25rem;border:0;border-bottom:1px solid transparent;background:none;text-decoration:none;cursor:pointer}
+.nav a:hover,.linkish:hover,.nav a[aria-current]{color:var(--fg)}
+.nav a[aria-current]{border-bottom-color:var(--fg)}
+.nav form{display:inline}
+.page{padding-block:clamp(2.5rem,6vw,4.5rem) 5rem;min-height:calc(100dvh - var(--headh) - 7rem)}
+.label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
+h1{margin-top:1rem;font-size:clamp(2rem,4.6vw,3rem);line-height:1;font-weight:580;letter-spacing:-.045em;text-wrap:balance}
+h2{font-size:1.125rem;font-weight:560;letter-spacing:-.015em}
+.lead{margin-top:1rem;max-width:36rem;color:var(--ink);font-size:1rem}
+.small{font-size:.875rem;color:var(--ink)}
+.mini{font-family:var(--mono);font-size:.6875rem;color:var(--dim)}
+.mini-link{font-family:var(--mono);font-size:.6875rem;color:var(--dim);text-decoration:none}
+.mini-link:hover{color:var(--fg)}
+.block{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--line-soft)}
+.block>h2+*{margin-top:1rem}
+.form{display:grid;gap:1rem;max-width:26rem;margin-top:2rem}
+.form.inline{display:flex;flex-wrap:wrap;align-items:end;max-width:none}
+.field{display:grid;gap:.375rem}
+.field span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
+input[type=email],input[type=text],select{height:2.75rem;padding-inline:.875rem;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--fg);font:inherit;font-size:.9375rem}
+input:focus,select:focus{outline:none;border-color:var(--fg)}
+input.code{font-family:var(--mono);font-size:1.25rem;letter-spacing:.2em;text-transform:uppercase}
+.btn{display:inline-flex;align-items:center;justify-content:center;height:2.75rem;padding-inline:1.25rem;border:1px solid;font-family:var(--mono);font-size:.75rem;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
+.btn-primary{border-color:var(--fg);background:var(--fg);color:var(--bg)}
+.btn-primary:hover{background:transparent;color:var(--fg)}
+.btn-ghost{border-color:var(--line);background:transparent;color:var(--fg)}
+.btn-ghost:hover{border-color:var(--fg)}
+.btn-small{height:2rem;padding-inline:.75rem;font-size:.6875rem}
+.acts{display:flex;flex-wrap:wrap;gap:.75rem}
+.table{margin-top:1rem;overflow-x:auto;border:1px solid var(--line-soft)}
+table{width:100%;border-collapse:collapse;font-size:.875rem}
+th,td{padding:.75rem 1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-soft)}
+tr:last-child td{border-bottom:0}
+th{background:var(--surface);font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
+td.mono,.mono{font-family:var(--mono);font-size:.75rem}
+td.end,th.end{text-align:right}
+td form{display:inline}
+.empty{margin-top:1rem;padding:1.25rem;border:1px dashed var(--line);color:var(--dim);font-size:.875rem}
+.notice{margin-top:1.5rem;padding:.875rem 1rem;border:1px solid var(--line-soft);border-left:1px solid var(--acc);background:var(--acc-soft);font-size:.875rem}
+.notice.err{border-left-color:var(--warn);background:transparent;color:var(--warn)}
+.secret{margin-top:1rem;padding:1rem 1.125rem;border:1px solid var(--line);background:var(--surface);font-family:var(--mono);font-size:.8125rem;overflow-wrap:anywhere;user-select:all}
+.usercode{margin-top:1.5rem;font-family:var(--mono);font-size:clamp(2rem,6vw,3rem);letter-spacing:.12em}
+.role{font-family:var(--mono);font-size:.6875rem;padding:.125rem .375rem;border:1px solid var(--line);color:var(--ink)}
+h3{font-size:.9375rem;font-weight:560;letter-spacing:-.01em}
+.nowrap{white-space:nowrap}
+.push{margin-left:auto}
+.block-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}
+.dot{display:inline-block;width:6px;height:6px;margin-right:.5rem;vertical-align:middle;border:1px solid var(--faint);background:transparent}
+.dot.online{border-color:var(--acc);background:var(--acc)}
+.dot.idle{border-color:var(--dim);background:var(--dim)}
+.pulse{animation:pulse 2.4s ease-in-out infinite}
+@keyframes pulse{50%{opacity:.25}}
+.tag{display:inline-block;font-family:var(--mono);font-size:.6875rem;padding:.0625rem .375rem;background:var(--surface);border:1px solid var(--line-soft);color:var(--ink);white-space:nowrap}
+.machine{margin-top:1.5rem}
+table.agents,table.activity{table-layout:fixed;min-width:56rem}
+table.agents th,table.agents td,table.activity th,table.activity td{height:2.125rem;padding:.25rem .75rem;line-height:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+table.agents .end,table.activity .end{text-align:right}
+table.agents .tag+.tag{margin-left:.25rem}
+.c-agent{width:30%}.c-title{width:18%}.c-presence{width:8.5rem}.c-status{width:20%}.c-labels{width:16%}.c-seen{width:6.5rem}
+.c-when{width:7rem}.c-who{width:30%}
+tr.sub td.agent{padding-left:1.75rem}
+tr.sub.d2 td.agent{padding-left:2.75rem}
+tr.sub.d3 td.agent{padding-left:3.75rem}
+tr.sub.d4 td.agent{padding-left:4.75rem}
+.caret{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-right:.125rem;padding:0;border:0;background:none;color:var(--dim);vertical-align:-2px;cursor:pointer}
+.caret svg{transition:transform .15s}
+.caret[aria-expanded=true] svg{transform:rotate(90deg)}
+.caret:hover{color:var(--fg)}
+:root{--h-claude:#c15f3c;--h-codex:#0f8a6c;--h-opencode:#b56a00;--h-gemini:#1a73e8;--h-agy:#4285f4;--h-grok:#3a3a3a;--h-muse:#0866ff;--h-pi:#c03d86;--h-t3code:#4f46e5}
+@media (prefers-color-scheme:dark){:root{--h-claude:#e08b6b;--h-codex:#3fc6a0;--h-opencode:#e6a43f;--h-gemini:#7aa9ff;--h-agy:#8ab4f8;--h-grok:#e6e6e6;--h-muse:#3d8bff;--h-pi:#ec7bb8;--h-t3code:#a5a1ff}}
+.hicon{display:inline-block;overflow:visible;width:12px;height:12px;margin-right:.375rem;vertical-align:-1px;color:var(--dim)}
+.h-claude{color:var(--h-claude)}.h-codex{color:var(--h-codex)}.h-opencode{color:var(--h-opencode)}.h-gemini{color:var(--h-gemini)}.h-agy{color:var(--h-agy)}.h-grok{color:var(--h-grok)}.h-muse{color:var(--h-muse)}.h-pi{color:var(--h-pi)}.h-t3code{color:var(--h-t3code)}
+.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+.wake-badge{display:inline-flex;vertical-align:middle;margin-left:.25rem;color:var(--acc)}
+.bolt{width:11px;height:11px}
+.dot.idle.wake,.dot.hibernated{border-color:var(--acc);background:var(--acc-soft)}
+details.offline{margin-top:.5rem}
+details.offline>summary{display:inline-block;padding:.125rem 0;cursor:pointer;list-style:none}
+details.offline>summary::-webkit-details-marker{display:none}
+details.offline>summary::before{content:"+ ";color:var(--faint)}
+details.offline[open]>summary::before{content:"- "}
+details.offline .when-open,details.offline[open] .when-shut{display:none}
+details.offline[open] .when-open{display:inline}
+details.offline>summary:hover{color:var(--fg)}
+.machine .table{margin-top:.625rem}
+.machine-head{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem}
+.machine-head .dot{margin-right:0}
+.machine-head h3{font-family:var(--mono);font-size:.875rem;font-weight:500}
+.steps{list-style:none;display:grid;gap:1.25rem;margin-top:1.5rem;counter-reset:step}
+.steps li{counter-increment:step}
+.steps .label::before{content:counter(step,decimal-leading-zero) "  ";color:var(--faint)}
+.cmd{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.5rem;padding:.5rem .5rem .5rem 1rem;border:1px solid var(--line);background:var(--surface)}
+.cmd code{font-size:.8125rem;overflow-wrap:anywhere;user-select:all}
+.cmd .prompt{color:var(--faint);user-select:none}
+.sub-block{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
+.sub-block>*+*{margin-top:.75rem}
+.org-head h1{margin-top:.75rem;font-size:clamp(1.75rem,3.4vw,2.25rem)}
+.org-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}
+.tabs{display:flex;gap:1.75rem;margin-top:1.75rem;border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
+.tabs::-webkit-scrollbar{display:none}
+.tabs a{flex:none;margin-bottom:-1px;padding:.75rem 0 .6875rem;border-bottom:1px solid transparent;font-family:var(--mono);font-size:.75rem;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .15s,border-color .15s}
+.tabs a:hover{color:var(--fg)}
+.tabs a[aria-current]{color:var(--fg);border-bottom-color:var(--fg)}
+@media (max-width:40rem){.tabs{gap:1.25rem;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
+table.activity{min-width:0}table.activity colgroup,table.activity thead{display:none}
+table.activity tr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--line-soft)}
+table.activity tr:last-child{border-bottom:0}
+table.activity td{height:auto!important;padding:0!important;border:0}
+table.activity td:last-child{grid-column:1/-1;white-space:normal!important}}
+.tab-body>.block:first-child,.tab-body>.notice+.block,.tab-body>[role=alert]+.block{margin-top:2rem;padding-top:0;border-top:0}
+.tab-body>.block~.block{margin-top:2.5rem}
+.live-stamp .dot{animation:none;border-color:var(--faint);background:transparent}
+[data-feed-state=open] .live-stamp .dot{border-color:var(--acc);background:var(--acc);animation:pulse 2.4s ease-in-out infinite}
+.summary-head{margin-top:2rem}
+.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:1rem;border:1px solid var(--line-soft);background:var(--line-soft)}
+.tile{padding:1rem 1.25rem 1.125rem;background:var(--bg)}
+.tile-label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
+.tile-value{margin-top:.375rem;font-family:var(--mono);font-size:2rem;line-height:1.1;font-weight:500;letter-spacing:-.03em;color:var(--fg)}
+.tile.on .tile-value{color:var(--acc)}
+.tile .mini{margin-top:.25rem}
+@media (max-width:56rem){.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}.tile{grid-column:span 2}.tile:nth-child(n+4){grid-column:span 3}}
+@media (max-width:30rem){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile,.tile:nth-child(n+4){grid-column:auto}.tile:last-child{grid-column:span 2}.tile{padding:.875rem 1rem}.tile-value{font-size:1.625rem}}
+.panels{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;gap:1.25rem;margin-top:1.25rem}
+@media (max-width:56rem){.panels{grid-template-columns:minmax(0,1fr)}}
+.panel{display:flex;flex-direction:column;padding:1.125rem 1.25rem 1.25rem;border:1px solid var(--line-soft)}
+.panel-head{display:flex;align-items:baseline;gap:1rem}
+.panel h2{font-size:.9375rem}
+.now-list{list-style:none;margin-top:.75rem}
+.now-list li{padding:.625rem 0;border-top:1px solid var(--line-soft)}
+.now-list li:first-child{border-top:0}
+.now-who{display:flex;align-items:center;gap:.5rem;min-width:0}
+.now-who .hicon{margin-right:0}
+.now-who .mono{font-weight:500;color:var(--fg)}
+.now-who .dot{margin-right:.375rem}
+.now-what{margin-top:.125rem;padding-left:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.now-what .role{margin-right:.125rem}
+.more-line,.last-line{margin-top:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.last-line{display:flex;gap:.375rem;padding-top:.75rem;border-top:1px solid var(--line-soft)}
+.last-line .what{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.last-line .mini-link{flex:none;margin-left:auto;padding-left:1rem}
+.panel .empty{margin-top:.75rem}
+.strip{display:grid;gap:.5rem;margin-top:1rem}
+.strip-row{display:flex;align-items:center;gap:.625rem;min-width:0}
+.strip-who{display:flex;flex:none;align-items:baseline;gap:.375rem;width:11rem;min-width:0;overflow:hidden;white-space:nowrap}
+.strip-who .hicon{flex:none;margin-right:0}
+.strip-who .mini{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
+.strip-name{flex:0 0 auto;max-width:7.5rem;overflow:hidden;text-overflow:ellipsis}
+.cells{display:flex;flex-wrap:wrap;gap:3px;min-width:0}
+.cell{display:inline-block;width:10px;height:10px;border:1px solid var(--faint);background:transparent}
+.cell.online{border-color:var(--acc);background:var(--acc)}
+.cell.idle{border-color:var(--dim);background:var(--dim)}
+.cell.idle.wake,.cell.hibernated{border-color:var(--acc);background:var(--acc-soft)}
+.strip-key{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin:1rem 0 1.25rem}
+.strip-key .cell{width:8px;height:8px;margin-left:.375rem}
+.strip-key .cell:first-child{margin-left:0}
+.fleet-line{margin-top:auto;padding-top:.875rem;border-top:1px solid var(--line-soft)}
+.notice.held{margin-top:1rem}
+.notice a{color:var(--fg)}
+table.orgs td.end,table.orgs th.end{text-align:right}
+.agents-cell{white-space:nowrap}
+.harnesses{display:inline-flex;align-items:center;gap:.25rem;margin-right:.5rem;vertical-align:-1px}
+.harnesses .hicon{margin-right:0}
+.harnesses .more{line-height:1}
+.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:2rem}
+@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

package/dist/public/app.js

@@ -0,0 +1,80 @@
+
+const chosen = new Map();
+const fold = (root) => {
+  for (const b of root.querySelectorAll("[data-tree]")) {
+    const v = chosen.get(b.getAttribute("data-tree"));
+    if (v) b.setAttribute("aria-expanded", v);
+  }
+  const shut = new Set([...root.querySelectorAll('[data-tree][aria-expanded="false"]')].map((b) => b.getAttribute("data-tree")));
+  for (const r of root.querySelectorAll("tr[data-anc]")) r.hidden = r.getAttribute("data-anc").split(" ").some((a) => shut.has(a));
+};
+document.addEventListener("click", (e) => {
+  const t = e.target instanceof Element ? e.target.closest("[data-tree]") : null;
+  if (!t) return;
+  chosen.set(t.getAttribute("data-tree"), t.getAttribute("aria-expanded") === "true" ? "false" : "true");
+  fold(document);
+});
+document.addEventListener("click", async (e) => {
+  const b = e.target instanceof Element ? e.target.closest("[data-copy]") : null;
+  if (!b) return;
+  try {
+    await navigator.clipboard.writeText(b.getAttribute("data-copy"));
+    b.textContent = "Copied";
+    setTimeout(() => { b.textContent = "Copy"; }, 1500);
+  } catch {}
+});
+const live = document.querySelector("[data-live]");
+if (live) {
+  const every = Number(live.getAttribute("data-live")) || 8000;
+  let timer = 0;
+  const later = (ms) => { clearTimeout(timer); timer = setTimeout(tick, ms); };
+  let soon = false;
+  const tick = async () => {
+    soon = false;
+    const selecting = String(window.getSelection() || "").length > 0;
+    if (!document.hidden && !selecting) {
+      try {
+        let next;
+        if (typeof window.scpRegion === "function") next = await window.scpRegion();
+        else {
+          const res = await fetch(location.href, { credentials: "same-origin", headers: { accept: "text/html" } });
+          next = res.ok ? new DOMParser().parseFromString(await res.text(), "text/html").querySelector("[data-live]") : null;
+        }
+        if (next) {
+          const open = new Set([...live.querySelectorAll("details[open][data-key]")].map((d) => d.getAttribute("data-key")));
+          for (const d of next.querySelectorAll("details[data-key]")) if (open.has(d.getAttribute("data-key"))) d.open = true;
+          fold(next);
+          live.replaceChildren(...next.childNodes);
+        }
+      } catch {}
+    }
+    later(document.documentElement.getAttribute("data-stream") === "open" ? every * 4 : every);
+  };
+  document.addEventListener("scp:refresh", () => { if (!soon) { soon = true; later(250); } });
+  later(every);
+  const path = live.getAttribute("data-events");
+  if (path && !document.querySelector("[data-graph]") && typeof WebSocket === "function") {
+    const state = (open) => {
+      document.documentElement.setAttribute("data-feed-state", open ? "open" : "poll");
+      for (const s of document.querySelectorAll("[data-feed]")) s.textContent = open ? "live" : "polling";
+    };
+    let backoff = 1000;
+    const connect = () => {
+      let ws, ping = 0;
+      try { ws = new WebSocket((location.protocol === "https:" ? "wss://" : "ws://") + location.host + path); } catch { return; }
+      ws.onopen = () => { backoff = 1000; state(true); ping = setInterval(() => { try { ws.send("ping"); } catch {} }, 30000); };
+      ws.onmessage = (m) => { if (typeof m.data === "string" && m.data !== "pong" && !m.data.includes('"hello"')) document.dispatchEvent(new CustomEvent("scp:refresh")); };
+      ws.onclose = (c) => {
+        clearInterval(ping);
+        state(false);
+        if (c.code === 4003) return;
+        setTimeout(connect, backoff);
+        backoff = Math.min(backoff * 2, 30000);
+      };
+    };
+    new MutationObserver(() => state(document.documentElement.getAttribute("data-feed-state") === "open")).observe(live, { childList: true });
+    connect();
+  }
+}
+const tab = document.querySelector('.tabs [aria-current="page"]');
+if (tab) tab.scrollIntoView({ block: "nearest", inline: "nearest" });

package/dist/public/graph.css

@@ -0,0 +1,85 @@
+
+:root{--id-0:#2f6fdb;--id-1:#c2410c;--id-2:#0f8a6c;--id-3:#a3369e;--id-4:#a16207;--id-5:#6d4fd6;--id-6:#be123c;--id-7:#3f7d20}
+@media (prefers-color-scheme:dark){:root{--id-0:#7aa9ff;--id-1:#f59a63;--id-2:#3fc6a0;--id-3:#e27ad9;--id-4:#e3b341;--id-5:#a991ff;--id-6:#fb7185;--id-7:#8fd16a}}
+.g-over label{display:inline-flex;align-items:center;gap:.375rem;cursor:pointer}
+.trails{display:inline-flex;align-items:center;gap:.375rem}
+.trails .seg{display:inline-flex;border:1px solid var(--line)}
+.trails .seg button{height:1.375rem;padding-inline:.4375rem;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:.625rem;cursor:pointer}
+.trails .seg button+button{border-left:1px solid var(--line)}
+.trails .seg button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
+.graph{margin-top:1.25rem}
+.graph-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem}
+.graph-legend .key{display:inline-block;width:1.25rem;height:0;margin-left:.5rem;border-top:1.5px solid var(--faint)}
+.graph-legend .key:first-child{margin-left:0}
+.graph-legend .key.msg{border-top-color:var(--acc)}
+[data-graph-stream]:empty{display:none}
+[data-graph-stream]::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.375rem;vertical-align:1px;border:1px solid var(--faint)}
+[data-stream=open] [data-graph-stream]::before{border-color:var(--acc);background:var(--acc);animation:pulse 2.4s ease-in-out infinite}
+.graph-canvas{position:relative;margin-top:.75rem;overflow:hidden;border:1px solid var(--line-soft);background:var(--bg)}
+.graph-svg{display:block;width:100%;height:420px;font-family:var(--mono);user-select:none;-webkit-user-select:none}
+.graph-svg .hull{fill:var(--surface);stroke:var(--surface);stroke-linejoin:round;stroke-linecap:round}
+.graph-svg .hull-rim{fill:none;stroke:var(--line-soft);stroke-linejoin:round;stroke-linecap:round}
+.graph-svg .region.ided .hull-rim{stroke:color-mix(in srgb,var(--id) 30%,var(--line-soft))}
+.graph-svg .region.offline,.graph-svg .region-head.offline{opacity:.55}
+.graph-svg .mlabel{font-size:11px;font-weight:500;fill:var(--fg);paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
+.graph-svg .mlabel .n{fill:var(--dim);font-weight:400}
+.graph-svg .mid{font-size:10px;fill:color-mix(in srgb,var(--id) 40%,var(--dim));paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
+.graph-svg .mdot{fill:var(--bg);stroke:var(--faint)}
+.graph-svg .mdot.online{fill:var(--acc);stroke:var(--acc)}
+.graph-svg .empty-note{font-size:10.5px;fill:var(--faint)}
+.graph-svg .hub circle{fill:var(--bg);stroke:var(--line)}
+.graph-svg .hub svg{color:var(--dim)}
+.graph-svg .hub text{font-size:10.5px;fill:var(--dim);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
+.graph-svg .edge{fill:none;stroke-linecap:round;transition:opacity calc(.25s / var(--trail,1))}
+.graph-svg .edge.spawn{stroke:var(--faint);stroke-width:1.25}
+.graph-svg .edge.msg{stroke:var(--acc)}
+.graph-svg .edge.msg.live{opacity:1!important}
+.graph-svg .arrow{fill:var(--acc)}
+.graph-svg .pulse{fill:var(--acc)}
+.graph-svg .pulse-halo{fill:var(--acc);opacity:.25}
+.graph-svg .pulse.reply,.graph-svg .pulse-halo.reply{fill:var(--fg)}
+.graph-svg .node{cursor:pointer;outline:none;transition:opacity .3s}
+.graph-svg .node .disc{fill:var(--bg);stroke:var(--line);stroke-width:1;transition:stroke .2s}
+.graph-svg .node.online .disc{stroke:color-mix(in srgb,var(--fg) 34%,transparent)}
+.graph-svg .node.human .disc{stroke-dasharray:2.5 2}
+.graph-svg .node.offline{opacity:.5}
+.graph-svg .node.historic{opacity:.3}
+.graph-svg .node.offline .disc{stroke-dasharray:2 2}
+.graph-svg .node.enter{opacity:0}
+.graph-svg .node:hover .disc,.graph-svg .node:focus-visible .disc,.graph-svg .node.on .disc{stroke:var(--fg);stroke-width:1.5}
+.graph-svg .ring{fill:none;stroke:var(--acc);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
+.graph-svg .node.hit .ring{animation:graph-hit .7s ease-out}
+@keyframes graph-hit{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
+.graph-svg .glyph{color:var(--ink);overflow:visible}
+.graph-svg .pdot{stroke:var(--bg);stroke-width:2;fill:var(--faint)}
+.graph-svg .pdot.online{fill:var(--acc)}
+.graph-svg .pdot.idle{fill:var(--dim)}
+.graph-svg .bolt-g{color:var(--acc)}
+.graph-svg .bolt-g circle{fill:var(--bg)}
+.graph-svg .nlabel{font-size:11px;fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
+.graph-svg .node.offline .nlabel{fill:var(--dim)}
+.graph-svg.focus .edge:not(.hl),.graph-svg.focus .node:not(.hl){opacity:.12!important}
+.graph-svg.focus .edge.hl.spawn{stroke:var(--ink)}
+.graph-tip{position:absolute;z-index:3;width:max-content;max-width:20rem;padding:.625rem .75rem;border:1px solid var(--line);background:var(--bg);font-size:.75rem;line-height:1.45;pointer-events:none;box-shadow:0 6px 24px rgb(0 0 0/.1)}
+.graph-tip .t-head{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--fg)}
+.graph-tip .t-head svg{width:13px;height:13px;flex:none;overflow:visible;color:var(--ink)}
+.graph-tip .t-addr{margin-top:.125rem;font-family:var(--mono);font-size:.6875rem;color:var(--dim);overflow-wrap:anywhere}
+.graph-tip .t-row{margin-top:.375rem;color:var(--ink)}
+.graph-tip .t-kv{display:grid;grid-template-columns:auto 1fr;gap:.125rem .75rem;margin-top:.5rem;font-family:var(--mono);font-size:.6875rem}
+.graph-tip .t-kv dt{color:var(--dim)}
+.graph-tip .t-kv dd{color:var(--fg);overflow-wrap:anywhere}
+body.bare{overflow:hidden;height:100dvh;min-height:0}
+.gfull{position:fixed;inset:0;margin:0}
+.gfull.gtab{position:relative;inset:auto;height:max(26rem,calc(100dvh - 19rem));margin-top:1.5rem;border:1px solid var(--line-soft)}
+.gtab .g-left{top:.75rem;left:.75rem}
+.gtab .g-right{top:.75rem;right:.75rem}
+.g-acts{display:inline-flex;align-items:center;gap:1rem}
+@media (max-width:40rem){.gtab .g-right{top:auto;bottom:.75rem;left:.75rem;justify-items:start}.gtab{height:max(26rem,calc(100dvh - 16rem))}}
+.gfull .graph-canvas{position:absolute;inset:0;margin:0;border:0}
+.gfull .graph-svg{height:100%}
+.g-over{position:absolute;z-index:2;display:grid;gap:.25rem;padding:.875rem 1rem;border:1px solid var(--line-soft);background:var(--head);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
+.g-left{top:1rem;left:1rem;max-width:min(24rem,calc(100vw - 2rem))}
+.g-left h1{font-size:1.25rem;line-height:1.25;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.g-right{top:1rem;right:1rem;justify-items:end}
+.g-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
+@media (max-width:40rem){.g-right{top:auto;bottom:1rem}}