mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

feat: rename matrix-accounts page to credentials, add github PAT tab

Browse source 
Part 2 of hyperhive#1970 (backend/CLI landed in PR #2378). Renames
/matrix-accounts.html -> /credentials.html and restructures it with a
sub-tab strip (MATRIX / GITHUB), reusing the shared @hive/shared/tabs.js
tab strip already used by /logs.html.

MATRIX tab carries over the existing account list + login form
unchanged. GITHUB tab adds a single-PAT provisioning form: status line
(present/absent, read from GET /api/github-account), a security-warning
banner (dedicated bot account + minimally-scoped token), a link to
generate a PAT at github.com/settings/tokens, and a paste-token form
posting to POST /api/github-account. Both tabs share one agent picker.

Updated docs/web-ui.md + docs/web-ui/dashboard.md to describe the new
page shape, and the H0M3 hub tile (index.html) to point at the renamed
page.
This commit is contained in:
iris 2026-07-11 12:38:47 +02:00
commit 5c2cae41a2
6 changed files with 376 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/packages/dashboard/build.mjs
View file

@ -10,6 +10,8 @@
// state / container load)
// dist/builds.html served at GET /builds.html (BU1LDS:
// rebuild queue / meta inputs / build logs)
// dist/credentials.html served at GET /credentials.html
// (CR3D3NTIALS: matrix + github accounts)
// dist/static/home.js index.html (H0M3) entry — menu tiles +
// matrix-tile gating + identity line
// dist/static/tabs.js dashboard.html entry — tab renderers +
@ -20,7 +22,10 @@
// log viewer sub-tabs
// dist/static/builds.js /builds.html entry — rebuild queue,
// meta inputs, build log history
// dist/static/{home,tabs,flow,logs,builds}.js.map source map siblings
// dist/static/credentials.js /credentials.html entry — matrix +
// github account sub-tabs
// dist/static/{home,tabs,flow,logs,builds,credentials}.js.map source map
// siblings
// dist/static/common.css loaded by every page (@hive/shared
// imports + shared typography/badges/
// buttons/inbox/side-panel)
@ -29,6 +34,8 @@
// dist/static/logs.css /logs.html only (log viewer sub-tabs)
// dist/static/builds.css /builds.html only (build lifecycle hub)
// dist/static/home.css index.html (H0M3) only (tile grid)
// dist/static/credentials.css /credentials.html only (matrix + github
// account forms)
//
// Each JS entry bundles `./common.js` (DOM helpers, Panel singleton,
// NOTIF, path linkification) independently — esbuild inlines the shared
@ -59,7 +66,7 @@ mkdirSync(staticDir(''), { recursive: true });
// follow-up once asset sizes warrant it). esbuild writes each entry
// to `static/<name>.js` based on the entryPoint basename.
await build({
entryPoints: [src('tabs.js'), src('flow.js'), src('logs.js'), src('home.js'), src('settings.js'), src('stats.js'), src('core.js'), src('builds.js'), src('matrix-accounts.js')],
entryPoints: [src('tabs.js'), src('flow.js'), src('logs.js'), src('home.js'), src('settings.js'), src('stats.js'), src('core.js'), src('builds.js'), src('credentials.js')],
outdir: staticDir(''),
bundle: true,
format: 'esm',
@ -98,7 +105,7 @@ await build({
// so a swap replaces only it) + theme.css (the semantic derivation
// layer) + common.css (shared typography, badges, buttons, inbox, side
// panel) plus its own page-specific bundle.
for (const entry of ['colors.css', 'theme.css', 'common.css', 'dashboard.css', 'flow.css', 'logs.css', 'home.css', 'settings.css', 'stats.css', 'core.css', 'builds.css', 'matrix-accounts.css']) {
for (const entry of ['colors.css', 'theme.css', 'common.css', 'dashboard.css', 'flow.css', 'logs.css', 'home.css', 'settings.css', 'stats.css', 'core.css', 'builds.css', 'credentials.css']) {
await build({
entryPoints: [src(entry)],
outfile: staticDir(entry),
@ -108,7 +115,7 @@ for (const entry of ['colors.css', 'theme.css', 'common.css', 'dashboard.css', '
});
}
for (const html of ['index.html', 'dashboard.html', 'flow.html', 'logs.html', 'settings.html', 'stats.html', 'core.html', 'builds.html', 'matrix-accounts.html']) {
for (const html of ['index.html', 'dashboard.html', 'flow.html', 'logs.html', 'settings.html', 'stats.html', 'core.html', 'builds.html', 'credentials.html']) {
copyFileSync(src(html), dist(html));
}

140
frontend/packages/dashboard/src/credentials.css Normal file
View file

@ -0,0 +1,140 @@
/* CR3D3NTIALS page (/credentials.html) only. Page chrome
(.page-header / .page-back / .page-title) comes from the shared
chrome.css imported by common.css; base tab styling lives in
@hive/shared/tabs.css (.hive-tab*) same as /logs.html. This file holds
the account-list + provision-form styling specific to this surface,
carried over from the old /matrix-accounts.html (`.ma-*` classes) plus
the tab-strip layout delta + github-tab additions (`.cred-*`). */
body.cred-shell {
margin: 0;
padding: 0;
}
/* Same layout delta as .logs-tabbar: fill the header row next to the
← home back-link, and let the flex:1 nav shrink below its intrinsic
width instead of wrapping onto its own row. */
.cred-tabbar {
flex: 1;
min-width: 0;
}
.cred-main {
max-width: 720px;
margin: 0 auto;
padding: 1.2em 1.25rem 3rem;
}
.cred-pane[hidden] { display: none; }
.cred-warning {
border: 1px solid var(--amber);
border-radius: 4px;
padding: 0.7rem 0.9rem;
margin: 0.6rem 0 1.1rem;
font-size: 0.9rem;
background: color-mix(in srgb, var(--amber) 10%, transparent);
}
.gh-status { margin: 0.5rem 0 1.2rem; }
.gh-status-line {
display: flex;
align-items: center;
gap: 0.6rem;
}
.gh-dot {
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
flex: none;
}
.gh-dot.present { background: var(--green); }
.gh-dot.absent { background: var(--muted); }
.gh-status-text.present { color: var(--green); }
.gh-status-text.absent { color: var(--muted); }
.ma-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0.55rem 0;
}
.ma-field > span { font-size: 0.8rem; color: var(--muted); }
.ma-field input,
.ma-field select {
padding: 0.4rem 0.5rem;
background: var(--bg-elev);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 4px;
font: inherit;
}
.ma-field input:focus,
.ma-field select:focus {
outline: none;
border-color: var(--purple);
}
.ma-mode {
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.45rem 0.75rem 0.6rem;
margin: 0.85rem 0;
}
.ma-mode legend { font-size: 0.8rem; color: var(--muted); padding: 0 0.3rem; }
.ma-mode label { margin-right: 1.3rem; cursor: pointer; }
.ma-modefields { margin: 0.4rem 0; }
.ma-list { margin: 0.5rem 0 1.2rem; }
.ma-accounts { list-style: none; padding: 0; margin: 0; }
.ma-account {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.2rem;
border-bottom: 1px solid var(--border);
}
.ma-dot {
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
flex: none;
}
/* `ok` is the v1 (pre BE-4) token-present green; `live` is the v2 online green.
`offline`/`stale` are the amber states (provisioned-not-live / container-down
⟹ daemon-down). `absent` = no token. */
.ma-dot.ok,
.ma-dot.live { background: var(--green); }
.ma-dot.offline,
.ma-dot.stale { background: var(--amber); }
.ma-dot.absent { background: var(--muted); }
/* `live stale-age`: snapshot still says live but the daemon heartbeat stalled
(> ~90s). Keep the green hue but dim + desaturate so it reads "was online,
now uncertain" — visually distinct from the solid amber container-down
`stale`. More-specific (3 classes) so it overrides `.ma-dot.live`. */
.ma-dot.live.stale-age {
background: var(--green);
opacity: 0.4;
filter: saturate(0.45);
}
.ma-name { font-weight: 600; color: var(--fg); }
.ma-uid { color: var(--muted); font-size: 0.8rem; margin-left: 0.4em; }
.ma-hs { color: var(--muted); font-size: 0.85rem; }
.ma-status { margin-left: auto; font-size: 0.8rem; }
.ma-status.ok,
.ma-status.live { color: var(--green); }
.ma-status.offline,
.ma-status.stale { color: var(--amber); }
.ma-status.absent { color: var(--muted); }
.ma-status.live.stale-age { color: var(--green); opacity: 0.6; }
.ma-result {
margin-top: 0.7rem;
font-size: 0.9rem;
min-height: 1.2em;
}
.ma-result.ok { color: var(--green); }
.ma-result.err { color: var(--red); }
.ma-list .err { color: var(--red); font-size: 0.9rem; }

132
frontend/packages/dashboard/src/credentials.html Normal file
View file

@ -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>hyperhive // CR3D3NTIALS</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/static/colors.css">
<link rel="stylesheet" href="/static/theme.css">
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/credentials.css">
</head>
<body class="cred-shell">
<!-- Minimal chrome: back link + sub-tab strip, same pattern as
logs.html (MATRIX / GITHUB instead of AGENT/SYSTEM/AUDIT). Back
link points to the H0M3 hub (served at /). -->
<header class="page-header">
<a class="page-back" href="/">← home</a>
<nav class="hive-tabbar cred-tabbar" id="cred-tabbar" role="tablist">
<a class="hive-tab" id="cred-tab-matrix" href="#matrix" role="tab"
aria-controls="cred-pane-matrix" data-tab="matrix">
<span class="cred-tab-label">MATRIX</span>
</a>
<a class="hive-tab" id="cred-tab-github" href="#github" role="tab"
aria-controls="cred-pane-github" data-tab="github">
<span class="cred-tab-label">GITHUB</span>
</a>
</nav>
</header>
<main class="cred-main">
<!-- Agent picker: shared across both tabs (one agent selected at a
time drives both the matrix account list and the github status). -->
<h3>◇ agent</h3>
<label class="ma-field">
<span>agent</span>
<select id="ma-agent"></select>
</label>
<!-- MATRIX tab: unchanged from the old /matrix-accounts.html, just
moved under a tab pane. -->
<section class="cred-pane" id="cred-pane-matrix" data-tab-pane="matrix"
role="tabpanel" aria-labelledby="cred-tab-matrix">
<p class="meta">provision or log in an <strong>external</strong> matrix account for an agent and store its access token. the token is written to the agent's <code>matrixAccounts.&lt;account&gt;.tokenFile</code> by the host coordinator &mdash; it is never displayed back on this page.</p>
<h3>◇ provisioned accounts</h3>
<p class="meta">accounts that have a stored token (provision one below to add it here); a config-declared account that hasn't been provisioned yet won't appear until it has a token. status reflects whether a <em>token is stored</em>, not a live session &mdash; a true online/offline indicator is a follow-up that needs the daemon's account registry.</p>
<div id="ma-list" class="ma-list"><p class="meta">select an agent to see its matrix accounts.</p></div>
<h3>◇ provision / log in</h3>
<form id="ma-form" class="ma-form" autocomplete="off">
<label class="ma-field">
<span>account name</span>
<input type="text" name="account" placeholder="e.g. public" required>
</label>
<label class="ma-field">
<span>homeserver</span>
<input type="text" name="homeserver" placeholder="https://matrix.org" required>
</label>
<fieldset class="ma-mode">
<legend>login method</legend>
<label><input type="radio" name="mode" value="password" checked> password</label>
<label><input type="radio" name="mode" value="token"> existing token</label>
</fieldset>
<div id="ma-pw-fields" class="ma-modefields">
<label class="ma-field">
<span>user id</span>
<input type="text" name="user_id" placeholder="@user:matrix.org" autocomplete="username">
</label>
<label class="ma-field">
<span>password</span>
<input type="password" name="password" autocomplete="new-password">
</label>
</div>
<div id="ma-token-fields" class="ma-modefields" hidden>
<label class="ma-field">
<span>access token</span>
<input type="password" name="token" autocomplete="off">
</label>
<label class="ma-field">
<span>user id <span class="meta">(optional &mdash; derived via whoami)</span></span>
<input type="text" name="user_id" placeholder="@user:matrix.org">
</label>
</div>
<button type="submit" class="btn btn-spawn">log in &amp; store token</button>
<p id="ma-result" class="ma-result" aria-live="polite"></p>
</form>
</section>
<!-- GITHUB tab: single-account PAT paste. No login flow — the
operator pastes an existing PAT for a dedicated bot account.
Security-warning banner + a link to generate a PAT. -->
<section class="cred-pane" id="cred-pane-github" data-tab-pane="github"
role="tabpanel" aria-labelledby="cred-tab-github" hidden>
<div class="cred-warning">
⚠ use a <strong>dedicated bot account</strong>, not a human's &mdash;
and a <strong>minimally-scoped</strong> personal access token (only
the repos/scopes the agent actually needs, e.g. <code>repo</code> +
<code>workflow</code>). the container boundary is the enforcement:
anything within the token's scopes is reachable if the agent is
ever compromised. the token is injected into the agent's state dir
and is <strong>never displayed back</strong> on this page.
</div>
<h3>◇ status</h3>
<div id="gh-status" class="gh-status"><p class="meta">select an agent to see its github credential status.</p></div>
<h3>◇ provision</h3>
<p class="meta">generate a token at
<a href="https://github.com/settings/tokens" target="_blank" rel="noopener">github.com/settings/tokens</a>
and paste it below. one account per agent &mdash; pasting a new token replaces the stored one.</p>
<form id="gh-form" class="ma-form" autocomplete="off">
<label class="ma-field">
<span>personal access token</span>
<input type="password" name="token" autocomplete="off" required>
</label>
<button type="submit" class="btn btn-spawn">store token</button>
<p id="gh-result" class="ma-result" aria-live="polite"></p>
</form>
</section>
</main>
<script type="module" src="/static/credentials.js" defer></script>
</body>
</html>

369
frontend/packages/dashboard/src/credentials.js Normal file
View file

@ -0,0 +1,369 @@
// CR3D3NTIALS page entry (/credentials.html).
//
// Operator surface to provision per-agent credentials without editing the
// agent's config repo. Two sub-tabs, sharing one agent picker:
// MATRIX — external matrix account login (carried over verbatim from the
// old /matrix-accounts.html — see matrix_accounts.rs backend doc
// comments for the account/status contract + endpoint shapes).
// GITHUB — single-account PAT paste against /api/github-account
// (GET -> {present}, POST form-encoded {agent, token} ->
// {ok:true}; same error_response shape as matrix-account-login).
// No account name / homeserver / login mode, and no
// live/heartbeat concept for a static PAT — just present/absent.
// Per-tab detail comments live next to their section below.
import { $, el, esc, fmtAgeSecs, renderServerWarnings } from './common.js';
import { createTabStrip } from '@hive/shared/tabs.js';
let agents = [];
// agent name → container running (bool), from /api/state. Cross-referenced by
// the live dot: a `live: true` account whose container is DOWN is definitively
// stale (the daemon can't be up if the container isn't), so we flag it rather
// than show a lying green. `undefined` (agent not in the map) = unknown → we
// don't flag stale.
const containerRunning = new Map();
async function loadState() {
try {
const resp = await fetch('/api/state');
if (!resp.ok) return;
const s = await resp.json();
renderServerWarnings(s.server_warnings);
// `/api/state` exposes the live roster under `containers` (each entry an
// object carrying `.name` + `.running`); there is no top-level `agents`
// field, so the picker stays compatible with both string + object shapes.
const containers = (s.containers || [])
.map((a) => (typeof a === 'string' ? { name: a } : a))
.filter((c) => c && c.name);
agents = containers.map((c) => c.name).sort();
containerRunning.clear();
for (const c of containers) containerRunning.set(c.name, !!c.running);
} catch {
// best-effort: on a failed state read the picker renders empty
// ("— no agents —") and the submit guard blocks until an agent is
// selected, rather than guessing a roster.
}
}
function renderAgentPicker() {
const sel = $('ma-agent');
sel.replaceChildren();
if (!agents.length) {
sel.append(el('option', { value: '' }, '— no agents —'));
return;
}
sel.append(el('option', { value: '' }, '— select agent —'));
for (const a of agents) sel.append(el('option', { value: a }, a));
}
// ─── shape-agnostic error-body parsing (shared by both tabs' submit
// handlers) ───────────────────────────────────────────────────────────────
// The BE error-body shape is in transition: today hive-c0re's
// error_response sends a bare plain-text body; the RFC 9457 rework moves it
// to application/problem+json ({ type, title, detail, … }). Read shape-
// agnostically: pull the body once as text, and if it parses as JSON
// surface `detail` (problem+json) → `error`/`title` fallback, else use the
// raw text. A bare HTTP code is the last resort.
async function readErrorBody(resp) {
try {
const raw = (await resp.text()).trim();
if (raw && (raw[0] === '{' || raw[0] === '[')) {
try {
const body = JSON.parse(raw);
return body.detail || body.error || body.title || raw;
} catch { /* not JSON after all — keep the raw text */ }
}
return raw;
} catch {
return '';
}
}
// ─── MATRIX tab ────────────────────────────────────────────────────────────
// Live status dot — the daemon heartbeats every ~30s (advances as_of_unix),
// so a stalled as_of = daemon dead, not just stale snapshot:
// green live + running + fresh = online
// dim green live but as_of stale > ~90s = heartbeat stopped
// amber live + container DOWN = definitively stale
// amber token_present + !live = provisioned but offline
// grey no token = not provisioned
// Container state takes precedence; as_of_unix is tooltipped for freshness.
// v1 backend (no `live` field) falls back to token-present rendering.
async function loadAccounts(agent) {
const list = $('ma-list');
if (!agent) {
list.replaceChildren(el('p', { class: 'meta' }, 'select an agent to see its matrix accounts.'));
return;
}
list.replaceChildren(el('p', { class: 'meta' }, 'loading…'));
let data;
try {
const resp = await fetch('/api/matrix-accounts?agent=' + encodeURIComponent(agent));
if (!resp.ok) throw new Error('HTTP ' + resp.status);
data = await resp.json();
} catch (err) {
list.replaceChildren(el('p', { class: 'err' },
'could not load accounts: ' + esc(String(err)) + ' (the backend endpoint may not be deployed yet).'));
return;
}
const accounts = data.accounts || [];
const asOf = typeof data.as_of_unix === 'number' ? data.as_of_unix : null;
// `false` only when the container is explicitly down; `undefined` (unknown,
// e.g. a failed /api/state read) is treated as not-down so we never flag a
// false stale.
const running = containerRunning.get(agent);
// The daemon force-rewrites its snapshot every ~30s, so `as_of_unix` advances
// while it's alive — this is a heartbeat, and a stalled value is meaningful.
const ageSecs = asOf != null
? Math.max(0, Math.floor(Date.now() / 1000) - asOf)
: null;
const asOfText = asOf != null
? 'matrix snapshot · live as of ' + fmtAgeSecs(ageSecs) + ' ago'
: 'no daemon snapshot yet';
// 3 missed ~30s heartbeats. Past this a `live` snapshot whose container is
// NOT down means the daemon stopped publishing (dead/wedged) — dim its dot.
const STALE_AGE_SECS = 90;
const staleByAge = ageSecs != null && ageSecs > STALE_AGE_SECS;
list.replaceChildren();
if (!accounts.length) {
list.append(el('p', { class: 'meta' }, 'no matrix accounts configured for this agent.'));
return;
}
const ul = el('ul', { class: 'ma-accounts' });
for (const acc of accounts) {
const present = !!acc.token_present;
// 3-state dot. `live` is absent on the v1 backend (pre BE-4); when
// undefined, fall back to the v1 token-present rendering so the page
// degrades cleanly before the snapshot backend deploys.
let cls; let statusText; let dotTitle;
if (acc.live === undefined) {
cls = present ? 'ok' : 'absent';
statusText = present ? 'token stored ✓' : 'no token';
dotTitle = present ? 'token stored' : 'no token yet';
} else if (acc.live && running === false) {
// container down ⟹ daemon down ⟹ a "live" snapshot is stale.
cls = 'stale';
statusText = 'container stopped';
dotTitle = 'container is stopped — live status is stale. ' + asOfText;
} else if (acc.live && staleByAge) {
// Snapshot says live, but the heartbeat (snapshot mtime = as_of) hasn't
// advanced in > ~90s while the container is NOT down — the daemon stopped
// publishing, so the "live" is no longer trustworthy. Keep the green
// family but dim it (distinct from the amber container-down 'stale').
cls = 'live stale-age';
statusText = 'online · no heartbeat';
dotTitle = 'snapshot says live but the daemon heartbeat stalled '
+ fmtAgeSecs(ageSecs) + ' ago (publishes every ~30s) — likely dead or wedged. '
+ asOfText;
} else if (acc.live) {
cls = 'live';
statusText = 'online ✓';
dotTitle = asOfText;
} else if (present) {
cls = 'offline';
statusText = 'token stored · offline';
dotTitle = 'provisioned but not live. ' + asOfText;
} else {
cls = 'absent';
statusText = 'no token';
dotTitle = 'no token yet';
}
ul.append(el('li', { class: 'ma-account' },
el('span', { class: 'ma-dot ' + cls, title: dotTitle }),
el('span', { class: 'ma-name' }, acc.name || '(unnamed)'),
acc.user_id ? el('span', { class: 'ma-uid' }, acc.user_id) : null,
el('span', { class: 'ma-hs' }, acc.homeserver || '—'),
el('span', { class: 'ma-status ' + cls, title: asOfText }, statusText),
));
}
list.append(ul);
}
// Show only the fields for the selected login method, and DISABLE the
// hidden section's inputs so they don't ride along in the FormData (both
// sections carry a `user_id` field, so without this the wrong one — or
// both — would be submitted).
function toggleModeFields() {
const mode = document.querySelector('input[name="mode"]:checked');
const value = mode ? mode.value : 'password';
const pw = $('ma-pw-fields');
const tok = $('ma-token-fields');
pw.hidden = value !== 'password';
tok.hidden = value !== 'token';
pw.querySelectorAll('input').forEach((i) => { i.disabled = pw.hidden; });
tok.querySelectorAll('input').forEach((i) => { i.disabled = tok.hidden; });
}
function clearSecrets(formEl) {
formEl.querySelectorAll('input[type="password"], input[name="token"]')
.forEach((i) => { i.value = ''; });
}
async function submitLogin(e) {
e.preventDefault();
const formEl = e.target;
const out = $('ma-result');
out.className = 'ma-result';
out.textContent = '';
const agent = $('ma-agent').value;
if (!agent) {
out.className = 'ma-result err';
out.textContent = 'select an agent first.';
return;
}
const fd = new FormData(formEl);
fd.set('agent', agent);
const btn = formEl.querySelector('button[type="submit"]');
const orig = btn.textContent;
btn.disabled = true;
btn.textContent = 'logging in…';
try {
const resp = await fetch('/api/matrix-account-login', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams(fd),
});
if (resp.ok) {
// Success is 200 + JSON { ok, user_id }.
let body = {};
try { body = await resp.json(); } catch { /* tolerate odd 2xx body */ }
if (body.ok) {
out.className = 'ma-result ok';
out.textContent = '✓ logged in as ' + (body.user_id || '(unknown)') + ' — token stored.';
clearSecrets(formEl);
loadAccounts(agent);
} else {
out.className = 'ma-result err';
out.textContent = '✗ login failed (unexpected response).';
clearSecrets(formEl);
}
} else {
const msg = await readErrorBody(resp);
out.className = 'ma-result err';
out.textContent = '✗ ' + (msg || ('login failed (HTTP ' + resp.status + ')'));
clearSecrets(formEl);
}
} catch (err) {
out.className = 'ma-result err';
out.textContent = '✗ request failed: ' + String(err) + ' (the backend endpoint may not be deployed yet).';
} finally {
btn.disabled = false;
btn.textContent = orig;
}
}
// ─── GITHUB tab ─────────────────────────────────────────────────────────
async function loadGithubStatus(agent) {
const status = $('gh-status');
if (!agent) {
status.replaceChildren(el('p', { class: 'meta' }, 'select an agent to see its github credential status.'));
return;
}
status.replaceChildren(el('p', { class: 'meta' }, 'loading…'));
let data;
try {
const resp = await fetch('/api/github-account?agent=' + encodeURIComponent(agent));
if (!resp.ok) throw new Error('HTTP ' + resp.status);
data = await resp.json();
} catch (err) {
status.replaceChildren(el('p', { class: 'err' },
'could not load status: ' + esc(String(err)) + ' (the backend endpoint may not be deployed yet).'));
return;
}
const present = !!data.present;
status.replaceChildren(el('div', { class: 'gh-status-line' },
el('span', { class: 'gh-dot ' + (present ? 'present' : 'absent') }),
el('span', { class: 'gh-status-text ' + (present ? 'present' : 'absent') },
present ? 'token stored ✓' : 'not set'),
));
}
async function submitGithub(e) {
e.preventDefault();
const formEl = e.target;
const out = $('gh-result');
out.className = 'ma-result';
out.textContent = '';
const agent = $('ma-agent').value;
if (!agent) {
out.className = 'ma-result err';
out.textContent = 'select an agent first.';
return;
}
const fd = new FormData(formEl);
fd.set('agent', agent);
const btn = formEl.querySelector('button[type="submit"]');
const orig = btn.textContent;
btn.disabled = true;
btn.textContent = 'storing…';
try {
const resp = await fetch('/api/github-account', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams(fd),
});
if (resp.ok) {
let body = {};
try { body = await resp.json(); } catch { /* tolerate odd 2xx body */ }
if (body.ok) {
out.className = 'ma-result ok';
out.textContent = '✓ token stored.';
clearSecrets(formEl);
loadGithubStatus(agent);
} else {
out.className = 'ma-result err';
out.textContent = '✗ store failed (unexpected response).';
clearSecrets(formEl);
}
} else {
const msg = await readErrorBody(resp);
out.className = 'ma-result err';
out.textContent = '✗ ' + (msg || ('store failed (HTTP ' + resp.status + ')'));
clearSecrets(formEl);
}
} catch (err) {
out.className = 'ma-result err';
out.textContent = '✗ request failed: ' + String(err) + ' (the backend endpoint may not be deployed yet).';
} finally {
btn.disabled = false;
btn.textContent = orig;
}
}
// ─── init ─────────────────────────────────────────────────────────────
async function onAgentChange(agent) {
loadAccounts(agent);
loadGithubStatus(agent);
}
async function init() {
await loadState();
renderAgentPicker();
$('ma-agent').addEventListener('change', (e) => onAgentChange(e.target.value));
document.querySelectorAll('input[name="mode"]')
.forEach((r) => r.addEventListener('change', toggleModeFields));
toggleModeFields();
$('ma-form').addEventListener('submit', submitLogin);
$('gh-form').addEventListener('submit', submitGithub);
createTabStrip(document.getElementById('cred-tabbar'), {
defaultId: 'matrix',
});
onAgentChange('');
}
init();

6
frontend/packages/dashboard/src/index.html
View file

@ -91,12 +91,12 @@
<span class="home-tile-desc">kept state · container load</span>
</a>
<a class="home-tile" href="/matrix-accounts.html">
<a class="home-tile" href="/credentials.html">
<span class="home-tile-head">
<span class="home-tile-icon" aria-hidden="true">🔑</span>
<span class="home-tile-label">Matrix accounts</span>
<span class="home-tile-label">Credentials</span>
</span>
<span class="home-tile-desc">provision · log in · store per-agent matrix tokens</span>
<span class="home-tile-desc">provision per-agent matrix + github accounts</span>
</a>
<!-- Forge tile: hidden until home.js confirms the hive-forge

81
frontend/packages/dashboard/src/matrix-accounts.html
View file

@ -1,81 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hyperhive // M4TR1X ACC0UNTS</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/static/colors.css">
<link rel="stylesheet" href="/static/theme.css">
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/matrix-accounts.css">
</head>
<body class="ma-shell">
<!-- Minimal chrome: back link + title, same pattern as settings.html /
core.html. Back link points to the H0M3 hub (served at /). -->
<header class="page-header">
<a class="page-back" href="/">← home</a>
<span class="page-title">M4TR1X ACC0UNTS</span>
</header>
<main class="ma-main">
<p class="meta">provision or log in an <strong>external</strong> matrix account for an agent and store its access token. the token is written to the agent's <code>matrixAccounts.&lt;account&gt;.tokenFile</code> by the host coordinator &mdash; it is never displayed back on this page.</p>
<h3>◇ agent</h3>
<label class="ma-field">
<span>agent</span>
<select id="ma-agent"></select>
</label>
<h3>◇ provisioned accounts</h3>
<p class="meta">accounts that have a stored token (provision one below to add it here); a config-declared account that hasn't been provisioned yet won't appear until it has a token. status reflects whether a <em>token is stored</em>, not a live session &mdash; a true online/offline indicator is a follow-up that needs the daemon's account registry.</p>
<div id="ma-list" class="ma-list"><p class="meta">select an agent to see its matrix accounts.</p></div>
<h3>◇ provision / log in</h3>
<form id="ma-form" class="ma-form" autocomplete="off">
<label class="ma-field">
<span>account name</span>
<input type="text" name="account" placeholder="e.g. public" required>
</label>
<label class="ma-field">
<span>homeserver</span>
<input type="text" name="homeserver" placeholder="https://matrix.org" required>
</label>
<fieldset class="ma-mode">
<legend>login method</legend>
<label><input type="radio" name="mode" value="password" checked> password</label>
<label><input type="radio" name="mode" value="token"> existing token</label>
</fieldset>
<div id="ma-pw-fields" class="ma-modefields">
<label class="ma-field">
<span>user id</span>
<input type="text" name="user_id" placeholder="@user:matrix.org" autocomplete="username">
</label>
<label class="ma-field">
<span>password</span>
<input type="password" name="password" autocomplete="new-password">
</label>
</div>
<div id="ma-token-fields" class="ma-modefields" hidden>
<label class="ma-field">
<span>access token</span>
<input type="password" name="token" autocomplete="off">
</label>
<label class="ma-field">
<span>user id <span class="meta">(optional &mdash; derived via whoami)</span></span>
<input type="text" name="user_id" placeholder="@user:matrix.org">
</label>
</div>
<button type="submit" class="btn btn-spawn">log in &amp; store token</button>
<p id="ma-result" class="ma-result" aria-live="polite"></p>
</form>
</main>
<script type="module" src="/static/matrix-accounts.js" defer></script>
</body>
</html>