@cabane/companion 0.5.0

package/dist/static/app.js

@@ -0,0 +1,585 @@
+// Cabane Bridge dashboard frontend. Vanilla JS, no build step.
+// Subscribes to /api/events (SSE) for live updates and falls back to REST
+// fetches for the initial paint + the available-workspaces list.
+
+const $ = (id) => document.getElementById(id);
+
+// the dashboard is read-only. No "available to connect" list, no
+// connect/disconnect/activate/deactivate — that lifecycle lives in the cabane
+// app now. This frontend shows status, per-workspace state, the dispatch feed,
+// and logs, plus local-only Stop / Restart / Reload-config.
+const state = {
+  status: null, // latest /api/status snapshot
+  dispatches: [], // newest-first wire records
+  expanded: new Set(), // dispatch ids whose detail is open
+  logsOpen: false,
+  online: true, // is the bridge process reachable (SSE up)?
+};
+
+// ---- tiny fetch helpers ----
+
+async function getJSON(path) {
+  const res = await fetch(path);
+  if (!res.ok) throw new Error((await safeError(res)) || `${res.status}`);
+  return res.json();
+}
+
+async function postJSON(path, body) {
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body || {}),
+  });
+  if (!res.ok) throw new Error((await safeError(res)) || `${res.status}`);
+  return res.json().catch(() => ({}));
+}
+
+async function safeError(res) {
+  try {
+    const j = await res.json();
+    return j && j.error;
+  } catch {
+    return null;
+  }
+}
+
+// ---- formatting ----
+
+function timeAgo(iso) {
+  if (!iso) return 'never';
+  const secs = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 1000));
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.round(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.round(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.round(hrs / 24)}d ago`;
+}
+
+function clock(iso) {
+  const d = iso ? new Date(iso) : new Date();
+  return d.toTimeString().slice(0, 8);
+}
+
+function hostOf(url) {
+  try {
+    return new URL(url).host;
+  } catch {
+    return null;
+  }
+}
+
+// Freshness for the status dots. a connected, idle bridge is healthy,
+// not a warning — so connected = green, full stop. red = offline / not
+// connected to cabane. amber stays defined (in CSS) for a future genuinely-
+// degraded signal, but we don't downgrade a quiet-but-connected bridge to it.
+function freshness(connected) {
+  if (!state.online || !connected) return 'red';
+  return 'green';
+}
+
+// ---- rendering ----
+
+function render() {
+  renderStatus();
+  renderHarnesses();
+  renderConnected();
+  renderDispatches();
+}
+
+// CT586: the harnesses this device exposes to Cabane. `harnesses` is null until
+// the first probe lands (show "checking…"); once probed, a list of three, and if
+// NONE are exposed the loud empty state — the headline requirement. Each row shows
+// a state badge, version when known, a one-line guide, and the friendly enable
+// affordance for the two config-driven harnesses (Codex flag / opencode URL).
+const HARNESS_BADGE = {
+  exposed: 'Exposed',
+  detected_not_exposed: 'Not exposed',
+  needs_attention: 'Needs attention',
+  not_detected: 'Not detected',
+};
+
+function renderHarnesses() {
+  const s = state.status;
+  const harnesses = s && s.harnesses;
+  const list = $('harness-list');
+  const checking = $('harness-checking');
+  const emptyBanner = $('harness-empty');
+
+  // Before the first probe (null) — or while offline with no snapshot yet — show
+  // the checking placeholder, not the scary empty state.
+  if (!harnesses) {
+    list.innerHTML = '';
+    emptyBanner.hidden = true;
+    checking.hidden = false;
+    return;
+  }
+  checking.hidden = true;
+
+  const anyExposed = harnesses.some((h) => h.state === 'exposed');
+  emptyBanner.hidden = anyExposed;
+
+  list.innerHTML = '';
+  for (const h of harnesses) {
+    const li = document.createElement('li');
+    li.className = 'harness-row';
+
+    const name = el('span', 'harness-name', h.label);
+    li.append(name);
+    if (h.version) li.append(el('span', 'harness-version', `v${h.version}`));
+
+    const badge = el(
+      'span',
+      `harness-badge harness-badge--${h.state}`,
+      HARNESS_BADGE[h.state] || h.state,
+    );
+    li.append(el('span', 'harness-spacer'), badge);
+
+    if (h.detail) li.append(el('p', 'harness-detail', h.detail));
+
+    // Friendly enable — never install, never login (BYO). Codex is a one-click
+    // flag flip; opencode takes a URL we validate is reachable before writing.
+    if (h.enable === 'codex') {
+      const btn = el('button', 'primary small', 'Use Codex');
+      btn.addEventListener('click', () => void enableHarness({ runtime: 'codex' }, btn));
+      const wrap = el('div', 'harness-enable');
+      wrap.append(btn);
+      li.append(wrap);
+    } else if (h.enable === 'opencode') {
+      const form = el('div', 'harness-enable');
+      const input = el('input');
+      input.type = 'text';
+      input.placeholder = 'opencode serve URL (e.g. http://127.0.0.1:4096)';
+      const btn = el('button', 'primary small', 'Add opencode');
+      const submit = () => {
+        const url = input.value.trim();
+        if (url) void enableHarness({ runtime: 'opencode', serverUrl: url }, btn);
+      };
+      btn.addEventListener('click', submit);
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') submit();
+      });
+      form.append(input, btn);
+      li.append(form);
+    }
+    list.append(li);
+  }
+}
+
+function renderStatus() {
+  const s = state.status;
+  const dot = $('status-dot');
+  const title = $('status-title');
+  if (!state.online) {
+    dot.className = 'dot dot--red';
+    title.textContent = 'Cabane Bridge — Offline';
+    $('conn-line').textContent = 'Bridge process not reachable. Re-run `cabane-companion start`.';
+    $('listen-line').textContent = '';
+    document.title = '⚠ Bridge — Offline';
+    return;
+  }
+  if (!s) return;
+  const overall = freshness(s.connected);
+  dot.className = `dot dot--${overall}`;
+  const listening = s.connected;
+  title.textContent = listening ? 'Cabane Bridge — Listening' : 'Cabane Bridge — Disconnected';
+  document.title = listening ? '● Bridge — Listening' : '⚠ Bridge — Disconnected';
+
+  const cabaneHost = hostOf(s.cabane_url) || 'cabane';
+  if (s.connected) {
+    $('conn-line').textContent = `Connected to ${cabaneHost}`;
+  } else {
+    // this branch means the bridge process is up (the dashboard reached
+    // it) but the bridge's own event stream to cabane is down — NOT that cabane
+    // the app is unreachable. Point at the bridge connection so the copy isn't
+    // misleading. The stream auto-retries; `cabane-companion start` is the remedy
+    // if the process was never (re)started.
+    const last = s.last_event_at_overall
+      ? ` — last connected ${timeAgo(s.last_event_at_overall)}`
+      : '';
+    $('conn-line').textContent =
+      `⚠ Bridge isn't connected to ${cabaneHost}${last}. Make sure \`cabane-companion start\` is running.`;
+  }
+  $('listen-line').textContent = listening
+    ? `Listening — last event ${timeAgo(s.last_event_at_overall)}`
+    : 'Not connected to any workspace stream.';
+
+  $('ver-bridge').textContent = s.bridge_version || '—';
+}
+
+function renderConnected() {
+  const s = state.status;
+  const list = $('connected-list');
+  list.innerHTML = '';
+  const wss = (s && s.workspaces) || [];
+  $('connected-count').textContent = wss.length ? `(${wss.length})` : '';
+  $('connected-empty').hidden = wss.length > 0;
+  for (const ws of wss) {
+    const li = document.createElement('li');
+    li.className = 'ws-row';
+    // a terminal auth failure (rotated/revoked PAT) is a dead end the
+    // operator has to act on — render it red with a clear "re-add" line, not as
+    // the transient grey of a reconnecting stream.
+    const f = ws.auth_failed ? 'red' : freshness(ws.connected);
+
+    const dot = el('span', `dot dot--${f}`);
+    const name = el('span', 'ws-name', ws.name);
+    const meta = el(
+      'span',
+      'ws-meta',
+      ws.auth_failed
+        ? 'disconnected — re-add this workspace in the cabane app'
+        : `last event ${timeAgo(ws.last_event_at)} · ${ws.dispatch_count_today} today`,
+    );
+    if (ws.auth_failed) {
+      li.classList.add('ws-row--auth-failed');
+      meta.classList.add('ws-meta--alert');
+    }
+    const spacer = el('span', 'spacer');
+
+    // read-only — assignment lives in the cabane app. The bridge pulls which
+    // agents to run; this view just observes them.
+    li.append(dot, name, meta, spacer);
+
+    // CT29: the agents this device runs in this workspace, pulled from Cabane.
+    const agents = ws.agents || [];
+    if (agents.length) {
+      const sub = el('ul', 'ws-agents');
+      for (const a of agents) {
+        const row = el('li', 'ws-agent');
+        const handle = el('span', 'ws-agent-name', `@${a.username}`);
+        const modeTag = el('span', 'ws-agent-mode', a.mode);
+        row.append(handle, modeTag);
+        if (!a.has_credential) {
+          const warn = el('span', 'ws-agent-warn', 'no credential — re-assign in cabane');
+          row.append(warn);
+        } else if (a.missing_secrets && a.missing_secrets.length) {
+          const warn = el(
+            'span',
+            'ws-agent-warn',
+            `needs secret(s) this device lacks: ${a.missing_secrets.join(', ')}`,
+          );
+          row.append(warn);
+        }
+        sub.append(row);
+      }
+      li.append(sub);
+    }
+    list.append(li);
+  }
+}
+
+function renderDispatches() {
+  const list = $('dispatch-list');
+  list.innerHTML = '';
+  $('dispatch-empty').hidden = state.dispatches.length > 0;
+  for (const d of state.dispatches) {
+    const li = document.createElement('li');
+    li.className = 'dispatch-row';
+
+    const head = el('div', 'dispatch-head');
+    head.append(
+      el('span', 'time', clock(d.timestamp)),
+      el('span', 'ws', d.workspace_slug),
+      el('span', 'preview', d.message || '(no message)'),
+      verdict(d),
+    );
+    head.addEventListener('click', () => {
+      if (state.expanded.has(d.id)) state.expanded.delete(d.id);
+      else state.expanded.add(d.id);
+      renderDispatches();
+    });
+    li.append(head);
+
+    if (state.expanded.has(d.id)) {
+      const detail = el('div', 'dispatch-detail');
+
+      // show both halves of the exchange — the triggering message and
+      // the agent's reply — plus the error if the turn failed.
+      detail.append(detailBlock('Message', d.message || '(no message body captured)'));
+
+      if (d.reply) {
+        detail.append(detailBlock('Reply', d.reply));
+      } else if (d.status === 'running') {
+        detail.append(detailBlock('Reply', 'still running…', 'muted'));
+      } else if (d.status === 'replied') {
+        detail.append(detailBlock('Reply', '(no reply text captured)', 'muted'));
+      }
+
+      if (d.error) {
+        detail.append(detailBlock('Error', d.error, 'err-text'));
+      }
+      li.append(detail);
+    }
+    list.append(li);
+  }
+}
+
+function verdict(d) {
+  if (d.status === 'running') return el('span', 'verdict run', '… running');
+  if (d.status === 'replied') {
+    const secs = d.duration_ms ? ` (${(d.duration_ms / 1000).toFixed(1)}s)` : '';
+    return el('span', 'verdict ok', `✓ replied${secs}`);
+  }
+  return el('span', 'verdict err', '⚠ error');
+}
+
+// ---- DOM helpers ----
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+// a labeled section inside an expanded dispatch row (Message / Reply /
+// Error). `bodyClass` adds a modifier to the body (e.g. 'muted', 'err-text').
+function detailBlock(label, body, bodyClass) {
+  const block = el('div', 'd-block');
+  block.append(
+    el('p', 'd-label', label),
+    el('div', `d-body${bodyClass ? ` ${bodyClass}` : ''}`, body),
+  );
+  return block;
+}
+
+let toastTimer = null;
+function toast(msg, isError) {
+  const t = $('toast');
+  t.textContent = msg;
+  t.className = `toast${isError ? ' error' : ''}`;
+  t.hidden = false;
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => {
+    t.hidden = true;
+  }, 4000);
+}
+
+// ---- actions ----
+
+async function control(action) {
+  try {
+    await postJSON('/api/control', { action });
+    if (action === 'stop') toast('Stopping the bridge…');
+    if (action === 'restart') toast('Restarting the bridge…');
+    if (action === 'reload-config') toast('Reloaded config.');
+  } catch (err) {
+    toast(err.message || 'control failed', true);
+  }
+}
+
+// CT586: re-probe the harnesses now. The response carries the refreshed status;
+// the SSE status:changed also lands, so either updates the surface.
+async function recheckHarnesses() {
+  try {
+    const { status } = await postJSON('/api/harnesses/recheck');
+    if (status) {
+      state.status = status;
+      render();
+    }
+  } catch (err) {
+    toast(err.message || "couldn't recheck harnesses", true);
+  }
+}
+
+// CT586: enable/expose a config-driven harness. On success the refreshed status
+// re-renders (the row flips to exposed). A failure — most often an unreachable
+// opencode URL — surfaces as a toast in place; the config is left untouched.
+async function enableHarness(body, btn) {
+  if (btn) btn.disabled = true;
+  try {
+    const { status } = await postJSON('/api/harnesses/enable', body);
+    if (status) {
+      state.status = status;
+      render();
+    }
+    toast(body.runtime === 'codex' ? 'Codex enabled.' : 'opencode added.');
+  } catch (err) {
+    if (btn) btn.disabled = false;
+    toast(err.message || "couldn't enable that harness", true);
+  }
+}
+
+// ---- logs ----
+
+let logsTimer = null;
+async function loadLogs() {
+  try {
+    const { lines } = await getJSON('/api/logs?lines=200');
+    const view = $('logs-view');
+    view.textContent = lines.join('\n') || '(log is empty)';
+    view.scrollTop = view.scrollHeight;
+  } catch (err) {
+    $('logs-view').textContent = `couldn't read logs: ${err.message}`;
+  }
+}
+
+function setLogsOpen(open) {
+  state.logsOpen = open;
+  $('logs-panel').hidden = !open;
+  clearInterval(logsTimer);
+  if (open) {
+    void loadLogs();
+    logsTimer = setInterval(() => {
+      if (!document.hidden) void loadLogs();
+    }, 5000);
+  }
+}
+
+// ---- settings ----
+
+function renderSettings() {
+  const s = state.status;
+  if (!s) return;
+  $('set-url').textContent = s.cabane_url || '—';
+  $('set-port').textContent = s.dashboard_url ? new URL(s.dashboard_url).port || '80' : '—';
+}
+
+// Flash a green ✓ next to the control that was just saved, then clear it.
+const savedTimers = new WeakMap();
+function flashSaved(checkEl) {
+  if (!checkEl) return;
+  checkEl.hidden = false;
+  clearTimeout(savedTimers.get(checkEl));
+  savedTimers.set(
+    checkEl,
+    setTimeout(() => {
+      checkEl.hidden = true;
+    }, 2500),
+  );
+}
+
+async function saveSettings(patch, checkEl) {
+  try {
+    const { status } = await postJSON('/api/settings', patch);
+    if (status) {
+      state.status = status;
+      render();
+    }
+    flashSaved(checkEl);
+  } catch (err) {
+    toast(err.message || "couldn't save setting", true);
+  }
+}
+
+// ---- SSE wiring ----
+
+function connectSSE() {
+  const es = new EventSource('/api/events');
+
+  es.addEventListener('status:changed', (e) => {
+    state.online = true;
+    state.status = JSON.parse(e.data);
+    render();
+    renderSettings();
+  });
+
+  const upsertDispatch = (e) => {
+    const rec = JSON.parse(e.data);
+    const idx = state.dispatches.findIndex((d) => d.id === rec.id);
+    if (idx >= 0) state.dispatches[idx] = rec;
+    else state.dispatches.unshift(rec);
+    if (state.dispatches.length > 50) state.dispatches.length = 50;
+    renderDispatches();
+  };
+  es.addEventListener('dispatch:started', upsertDispatch);
+  es.addEventListener('dispatch:completed', upsertDispatch);
+  es.addEventListener('dispatch:error', upsertDispatch);
+
+  // workspace:connected / workspace:disconnected still arrive when a local
+  // `add` + reload-config changes the runner set; the accompanying
+  // status:changed re-renders, so no extra handling is needed here.
+
+  es.onerror = () => {
+    // EventSource auto-reconnects; if the bridge is actually gone the retries
+    // keep failing and we show the offline state. readyState 2 = closed.
+    if (es.readyState === EventSource.CLOSED || es.readyState === EventSource.CONNECTING) {
+      state.online = false;
+      renderStatus();
+    }
+  };
+  es.onopen = () => {
+    if (!state.online) {
+      state.online = true;
+      void boot();
+    }
+  };
+}
+
+// ---- boot ----
+
+async function boot() {
+  try {
+    state.status = await getJSON('/api/status');
+    state.online = true;
+  } catch {
+    state.online = false;
+  }
+  try {
+    const { dispatches } = await getJSON('/api/dispatches?limit=20');
+    state.dispatches = dispatches;
+  } catch {
+    /* leave existing */
+  }
+  render();
+  renderSettings();
+  // Seed settings controls from config-derived status.
+  const s = state.status;
+  if (s) {
+    $('set-loglevel').value = 'debug';
+    // SJ522: auto-open now defaults OFF, so the toggle seeds unchecked to match.
+    $('set-autoopen').checked = false;
+  }
+}
+
+function wireControls() {
+  for (const btn of document.querySelectorAll('[data-toggle]')) {
+    btn.addEventListener('click', () => {
+      const id = btn.getAttribute('data-toggle');
+      const panel = $(id);
+      const open = panel.hidden;
+      panel.hidden = !open;
+      if (id === 'logs-panel') setLogsOpen(open);
+    });
+  }
+  $('stop-btn').addEventListener('click', () => {
+    if (window.confirm('Stop the bridge? Replies will stop until you run it again.')) {
+      void control('stop');
+    }
+  });
+  $('restart-btn').addEventListener('click', () => void control('restart'));
+  $('recheck-btn').addEventListener('click', () => void recheckHarnesses());
+  $('set-loglevel').addEventListener('change', (e) => {
+    void saveSettings({ logLevel: e.target.value }, $('check-loglevel'));
+    void control('reload-config');
+  });
+  $('set-autoopen').addEventListener('change', (e) => {
+    void saveSettings({ autoOpen: e.target.checked }, $('check-autoopen'));
+  });
+}
+
+// Refresh relative timestamps + dot freshness every second without a network
+// round-trip.
+setInterval(() => {
+  if (state.online && state.status) {
+    renderStatus();
+    renderConnected();
+  }
+}, 1000);
+
+// CT586: re-probe harnesses when the window regains focus (a user tabs away to
+// install/log into a harness, then back), throttled so rapid focus flaps don't
+// spam the probes. The heartbeat cadence covers the background case.
+let lastRecheck = 0;
+window.addEventListener('focus', () => {
+  if (!state.online) return;
+  const now = Date.now();
+  if (now - lastRecheck < 5000) return;
+  lastRecheck = now;
+  void recheckHarnesses();
+});
+
+wireControls();
+void boot();
+connectSSE();

package/dist/static/index.html

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Cabane Bridge</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+    <!-- the Cabane app-icon — ink tile, ember A-frame mark. Reads on a
+         light or dark browser tab. -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect width='512' height='512' rx='112' ry='112' fill='%23141413'/><g fill='none' stroke='%23c8552a' stroke-width='2.52' stroke-linecap='round' transform='translate(116 151) scale(11.67)'><path d='M 1.26 16.74 L 12 1.26'/><path d='M 12 1.26 L 22.74 16.74'/></g></svg>"
+    />
+  </head>
+  <body>
+    <main class="shell">
+      <header class="topbar">
+        <div class="brand">
+          <svg class="logo" viewBox="0 0 24 18" fill="none" aria-hidden="true">
+            <path d="M 1.26 16.74 L 12 1.26" stroke="currentColor" stroke-width="2.52" stroke-linecap="round" />
+            <path d="M 12 1.26 L 22.74 16.74" stroke="currentColor" stroke-width="2.52" stroke-linecap="round" />
+          </svg>
+          <span id="status-dot" class="dot dot--unknown" aria-hidden="true"></span>
+          <h1 id="status-title">Cabane Bridge</h1>
+        </div>
+        <p id="conn-line" class="conn-line">Connecting…</p>
+        <p id="listen-line" class="listen-line"></p>
+      </header>
+
+      <!-- CT586: the harnesses this device exposes to Cabane. Primary panel — a
+           device exposing NONE is useless, so the loud empty state lives here. -->
+      <section class="panel" id="harnesses-panel">
+        <h2>
+          Harnesses
+          <button type="button" id="recheck-btn" class="link-btn" title="Re-check now">
+            Recheck
+          </button>
+        </h2>
+        <div id="harness-empty" class="harness-empty" hidden>
+          <p class="harness-empty-title">Cabane can’t run anything on this device yet.</p>
+          <p class="harness-empty-body">
+            Install and sign in to a harness — Claude Code, Codex, or opencode —
+            then it’ll appear here as ready. Until then, agents assigned to this
+            device have nothing to run on.
+          </p>
+        </div>
+        <ul id="harness-list" class="harness-list"></ul>
+        <p id="harness-checking" class="empty">Checking harnesses…</p>
+      </section>
+
+      <section class="panel" id="connected-panel">
+        <h2>Connected workspaces <span id="connected-count" class="count"></span></h2>
+        <ul id="connected-list" class="ws-list"></ul>
+        <p id="connected-empty" class="empty" hidden>
+          No workspaces enrolled yet. Connect a bridge in the cabane app
+          (Workspace Settings → Agents → Bridges), then run
+          <code>cabane-companion add</code> and paste the string when prompted.
+        </p>
+      </section>
+
+      <section class="panel" id="dispatches-panel">
+        <h2>Recent dispatches</h2>
+        <ul id="dispatch-list" class="dispatch-list"></ul>
+        <p id="dispatch-empty" class="empty" hidden>
+          No dispatches yet. Post a message in cabane and it'll show up here.
+        </p>
+      </section>
+
+      <footer class="actions">
+        <button type="button" data-toggle="logs-panel">Open logs</button>
+        <button type="button" data-toggle="settings-panel">Settings</button>
+        <button type="button" id="restart-btn" class="ghost">Restart</button>
+        <button type="button" id="stop-btn" class="ghost danger">Stop</button>
+      </footer>
+
+      <section class="panel collapsible" id="logs-panel" hidden>
+        <h2>Logs <span class="hint">~/.cabane/bridge.log</span></h2>
+        <pre id="logs-view" class="logs">Loading…</pre>
+      </section>
+
+      <section class="panel collapsible" id="settings-panel" hidden>
+        <h2>Settings</h2>
+        <div class="setting">
+          <label>Cabane URL</label>
+          <span id="set-url" class="readonly">—</span>
+        </div>
+        <div class="setting">
+          <label>Dashboard port</label>
+          <span id="set-port" class="readonly">—</span>
+          <span class="hint">change in ~/.cabane/config.json (needs restart)</span>
+        </div>
+        <div class="setting">
+          <label for="set-loglevel">Log level</label>
+          <select id="set-loglevel">
+            <option value="warn">warn</option>
+            <option value="info">info</option>
+            <option value="debug">debug</option>
+          </select>
+          <span id="check-loglevel" class="saved-check" hidden>✓</span>
+        </div>
+        <div class="setting">
+          <label for="set-autoopen">Auto-open browser on start</label>
+          <input type="checkbox" id="set-autoopen" />
+          <span id="check-autoopen" class="saved-check" hidden>✓</span>
+        </div>
+      </section>
+
+      <p class="version">
+        bridge <span id="ver-bridge">—</span>
+      </p>
+    </main>
+
+    <div id="toast" class="toast" hidden></div>
+    <script src="/static/app.js"></script>
+  </body>
+</html>