@bongos/core 1.18.3 → 1.18.19

package/modules/dev-box/app/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bongos-devbox-app",
+  "version": "1.0.10",
+  "description": "Menu-bar / system-tray switch for a builder's hosted dev box. Self-contained subproject (own deps, never installed on the droplet) — see ADR 0045.",
+  "private": true,
+  "main": "src/main.js",
+  "author": "Cloud Bongos",
+  "license": "UNLICENSED",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "vendor": "node scripts/vendor-client.js",
+    "gen-brand": "node scripts/gen-brand.js",
+    "prep": "node scripts/vendor-client.js && node scripts/gen-brand.js",
+    "prestart": "npm run prep",
+    "pretest": "npm run prep",
+    "start": "electron .",
+    "test": "node test/unit.mjs",
+    "icons": "node scripts/gen-icons.js",
+    "predist:mac": "npm run prep",
+    "predist:win": "npm run prep",
+    "dist:mac": "electron-builder --mac --arm64 --x64",
+    "dist:win": "electron-builder --win --x64 --arm64"
+  },
+  "devDependencies": {
+    "electron": "^33.3.1",
+    "electron-builder": "^25.1.8"
+  }
+}

package/modules/dev-box/app/renderer/app.js

@@ -0,0 +1,319 @@
+// devbox-app/renderer/app.js — the panel UI. Pure view over the snapshots the
+// main process pushes; every action is a named verb on window.otb (preload).
+(() => {
+  'use strict';
+
+  const $ = (sel) => document.querySelector(sel);
+  let last = null; // { snapshot, meta }
+
+  function escapeHtml(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (c) => ({
+      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+  }
+
+  const STATUS_LABEL = {
+    none: ['Off', ''],
+    provisioning: ['Starting your box…', 'busy'],
+    active: ['On', 'on'],
+    closing: ['Stopping your box…', 'busy'],
+    error: ['Error', 'err'],
+    loading: ['Checking…', 'busy'],
+  };
+
+  function header(meta, snapshot) {
+    $('#hd-title').textContent = 'Dev Box';
+    if (meta.tagline) $('#hd-epigraph').textContent = `— ${meta.tagline} —`;
+    if (snapshot.status === 'signed_out') {
+      $('#hd-sub').textContent = `Your ${meta.civName} dev box, one switch away.`;
+    } else if (meta.builder) {
+      $('#hd-sub').textContent = `@${meta.builder.login} · ${meta.civName}`;
+    } else {
+      $('#hd-sub').textContent = '';
+    }
+  }
+
+  function signedOutView(meta) {
+    if (meta.pairing && meta.pairing.phase === 'waiting') {
+      return `
+        <section class="scroll">
+          <p class="lede">A page just opened in your browser. Check the code matches, then click
+          <strong>Approve</strong> there — this panel updates itself.</p>
+          <div class="paircode">${escapeHtml(meta.pairing.pairCode)}</div>
+          <button type="button" class="btn btn--ghost" id="act-reopen">Re-open the approval page</button>
+          <button type="button" class="btn btn--danger" id="act-cancel">Cancel</button>
+        </section>`;
+    }
+    const failed = meta.pairing && meta.pairing.phase === 'failed';
+    return `
+      <section class="scroll">
+        <p class="lede">This app starts and stops your hosted dev box — the machine your
+        Claude works on. Sign in once with browser clicks; no terminal, no pasting.</p>
+        ${failed ? `<p class="detail" style="color:var(--terracotta)">The pairing ${escapeHtml(meta.pairing.reason === 'expired' ? 'expired — try again.' : 'did not complete.')}</p>` : ''}
+        <button type="button" class="btn" id="act-signin">Sign in through the hall</button>
+        <p class="note">Opens your browser at the builders’ hall: sign in with GitHub if asked,
+        then click one Approve button.</p>
+      </section>`;
+  }
+
+  function boxView(meta, s) {
+    const [label, tone] = STATUS_LABEL[s.status] || STATUS_LABEL.none;
+    const on = s.status === 'active';
+    const busy = s.busy || s.status === 'provisioning' || s.status === 'closing';
+    const switchDisabled = busy || s.status === 'loading' || s.status === 'error' && s.busy;
+
+    let detail = '';
+    if (s.status === 'provisioning') {
+      detail = 'About a minute or two. The app will chime when it’s ready.';
+    } else if (s.status === 'closing') {
+      detail = 'Shutting down and clearing away.';
+    } else if (s.status === 'active') {
+      detail = 'Boxes rest on their own after ~10 idle minutes — nothing is lost; flip it back anytime.';
+    } else if (s.status === 'none') {
+      detail = 'Flip the switch and a fresh box starts up for you.';
+    } else if (s.status === 'error') {
+      detail = s.lastError || 'Something went wrong — flip the switch to try again.';
+    }
+    if (s.lastError && s.status !== 'error') detail = s.lastError;
+
+    // [label, value, copyKey?] — a copyKey makes the value click-to-copy via
+    // the main process (named verbs only; the renderer never copies raw text).
+    const rows = [];
+    if (on && s.box) {
+      if (s.box.hostname) rows.push(['Host', s.box.hostname]);
+      if (s.box.size) rows.push(['Size', s.box.size]);
+      if (s.terminal && s.terminal.credential) rows.push(['Terminal user', 'otb', 'terminal-user']);
+      if (s.terminal && s.terminal.credential) rows.push(['Terminal pass', s.terminal.credential, 'terminal-credential']);
+    }
+
+    return `
+      <section class="scroll">
+        <div class="switchrow">
+          <button type="button" class="switch" id="act-toggle" data-on="${on ? 1 : 0}" data-busy="${busy ? 1 : 0}"
+                  ${switchDisabled ? 'disabled' : ''} aria-label="Turn the dev box ${on ? 'off' : 'on'}">
+            <span class="switch__knob"></span>
+          </button>
+          <div class="status status--${tone || 'off'}">${escapeHtml(label)}</div>
+          <div class="detail">${escapeHtml(detail)}</div>
+        </div>
+        ${rows.length ? `<div class="rows">${rows.map(([k, v, copyKey]) => `
+          <div class="row"><span class="row__k">${escapeHtml(k)}</span>${copyKey
+            ? `<span class="row__v row__v--copy" data-copy="${escapeHtml(copyKey)}" tabindex="0" role="button"
+                 title="Click to copy" aria-label="Copy ${escapeHtml(k.toLowerCase())}">${escapeHtml(v)}</span>`
+            : `<span class="row__v">${escapeHtml(v)}</span>`}</div>`).join('')}
+        </div>` : ''}
+        ${on ? `
+          <button type="button" class="btn" id="act-terminal" ${s.terminal && s.terminal.url ? '' : 'disabled'}>
+            ${s.terminal && s.terminal.url ? 'Open the browser terminal' : 'Terminal warming up…'}
+          </button>
+          <button type="button" class="btn btn--ghost" id="act-copyssh">Copy SSH command</button>
+        ` : ''}
+        ${keyRow(s)}
+        ${hostKeysRow(s)}
+        ${desktopLinkRow(meta, s)}
+      </section>`;
+  }
+
+  // task 1002509: SSH-key registration status. Silence here is what stranded
+  // builders — the key never reached their account and SSH just said "denied".
+  // Only the failure is shown; a verified key needs no chrome.
+  function keyRow(s) {
+    if (!s.keyRegistered || s.keyRegistered.ok) return '';
+    const why = s.keyRegistered.reason === 'verify_failed'
+      ? "The dev system didn't record it."
+      : s.keyRegistered.reason === 'list_failed'
+        ? "Couldn't check whether it arrived."
+        : s.keyRegistered.reason === 'key_setup_failed'
+          ? "This machine couldn't create the key file."
+          : 'The dev system could not be reached.';
+    return `<div class="dlink"><span class="dlink__warn">!</span>
+      <span>Your SSH key isn't registered yet — ${why} Retrying by itself.</span>
+      <button type="button" class="btn btn--ghost" id="act-key">Retry now</button></div>`;
+  }
+
+  // #909: host-key pinning status — visible, never silent. Only meaningful
+  // while the box is on (keys re-pin on every activation).
+  function hostKeysRow(s) {
+    if (s.status !== 'active' || !s.hostKeys) return '';
+    if (s.hostKeys.ok) {
+      // No action button here on purpose: the self-verify (task 1292) re-checks the
+      // pin every poll, so a green "pinned ✓" is trustworthy — and a Repair button
+      // next to a healthy status reads as "something's wrong" (owner UX feedback,
+      // task 1324). Recovery lives in the failure branch below, where it's earned.
+      return `<div class="dlink"><span class="dlink__ok">✓</span>
+        <span>Box identity pinned — SSH connects without warnings.</span></div>`;
+    }
+    const why = s.hostKeys.reason === 'tool_missing'
+      ? 'OpenSSH tools not found on this machine.'
+      : s.hostKeys.reason === 'stale_pin'
+        ? 'The box was rebuilt with a new identity — re-pinning now.'
+        : s.hostKeys.reason === 'partial_scan'
+          ? `Got some of the box's identity keys but not the one Claude Desktop checks (attempt ${escapeHtml(String(s.hostKeys.attempt || 1))}) — retrying by itself.`
+          : `Still reaching the box (attempt ${escapeHtml(String(s.hostKeys.attempt || 1))}) — retrying by itself.`;
+    return `<div class="dlink"><span class="dlink__warn">!</span>
+      <span>Box identity not pinned yet. ${why}</span>
+      <button type="button" class="btn btn--ghost" id="act-hostkeys">Retry now</button></div>`;
+  }
+
+  function desktopLinkRow(meta, s) {
+    if (!meta.settingsPath) return '';
+    if (s.settingsInstalled) {
+      return `<div class="dlink"><span class="dlink__ok">✓</span>
+        <span>Claude Desktop is linked — restart it once, then choose
+        <strong>${escapeHtml(meta.envName)}</strong> under Code → Environment.</span></div>`;
+    }
+    return `<div class="dlink"><span class="dlink__warn">!</span>
+      <span>Claude Desktop link not installed.</span>
+      <button type="button" class="btn btn--ghost" id="act-install">Install</button></div>`;
+  }
+
+  function render() {
+    if (!last) return;
+    const { snapshot: s, meta } = last;
+    header(meta, s);
+    $('#main').innerHTML = s.status === 'signed_out' ? signedOutView(meta) : boxView(meta, s);
+    $('#ft-auth').textContent = s.status === 'signed_out' ? '' : 'Sign out';
+    $('#ft-version').textContent = `${meta.productName} v${meta.version}`;
+    if (meta.update) {
+      $('#update').hidden = false;
+      // #924: the banner text is computed in main (updater.updateBannerText) so
+      // the copy lives with the version logic; fall back if an older main omits it.
+      $('#update-text').textContent = meta.update.banner || `Update available — v${meta.update.version}`;
+    } else {
+      $('#update').hidden = true;
+    }
+    wire();
+    renderPicker(s);
+  }
+
+  function wire() {
+    const on = (id, fn) => { const el = $(id); if (el) el.addEventListener('click', fn); };
+    on('#act-signin', () => window.otb.signIn());
+    on('#act-cancel', () => window.otb.cancelPairing());
+    on('#act-reopen', () => window.otb.openPairPage());
+    on('#act-toggle', async () => {
+      const s = last.snapshot;
+      if (s.status === 'active') await window.otb.boxOff();
+      else await window.otb.boxOn();
+    });
+    on('#act-terminal', () => window.otb.openTerminal());
+    on('#act-copyssh', async (e) => {
+      await window.otb.copy('ssh');
+      e.target.textContent = 'Copied ✓';
+      setTimeout(() => { e.target.textContent = 'Copy SSH command'; }, 1500);
+    });
+    on('#act-install', () => window.otb.installSettings());
+    on('#act-hostkeys', () => window.otb.retryHostKeys());
+    on('#act-key', () => window.otb.retryKey());
+
+    // Click-to-copy credential rows. Brief "Copied ✓" feedback in place; the
+    // original value is restored unless a re-render replaced the node anyway.
+    document.querySelectorAll('.row__v--copy[data-copy]').forEach((el) => {
+      const copy = async () => {
+        const ok = await window.otb.copy(el.getAttribute('data-copy'));
+        if (!ok) return;
+        const orig = el.textContent;
+        el.textContent = 'Copied ✓';
+        el.classList.add('row__v--copied');
+        setTimeout(() => {
+          if (el.isConnected) { el.textContent = orig; el.classList.remove('row__v--copied'); }
+        }, 1200);
+      };
+      el.addEventListener('click', copy);
+      el.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); copy(); }
+      });
+    });
+  }
+
+  // --- BV1.R100: "What are you working on?" task picker ---------------------
+  // Local state, held OUTSIDE the snapshot so it survives the state-push
+  // re-renders that rewrite #main. Rendered into #picker, shown only when active.
+  let picker = { open: false, loading: false, tasks: null, error: null, result: null, claimingId: null };
+  const resetPicker = () => { picker = { open: false, loading: false, tasks: null, error: null, result: null, claimingId: null }; };
+  const snap = () => (last ? last.snapshot : null);
+
+  function pickerHtml() {
+    if (picker.result) {
+      return `<div class="pick pick--done">
+        <div class="pick__msg">${escapeHtml(picker.result)}</div>
+        <button type="button" class="btn btn--ghost" id="pick-again">Pick another task</button>
+      </div>`;
+    }
+    if (!picker.open) {
+      return `<button type="button" class="btn btn--ghost pick__open" id="pick-open">What are you working on? — pick a task</button>`;
+    }
+    if (picker.loading) {
+      return `<div class="pick"><div class="pick__hd">What are you working on?</div>
+        <div class="detail">Finding your tasks…</div></div>`;
+    }
+    if (picker.error) {
+      return `<div class="pick"><div class="pick__hd">What are you working on?</div>
+        <div class="detail" style="color:var(--terracotta)">${escapeHtml(picker.error)}</div>
+        <button type="button" class="btn btn--ghost" id="pick-refresh">Try again</button>
+        <button type="button" class="btn btn--ghost" id="pick-close">Close</button></div>`;
+    }
+    const tasks = picker.tasks || [];
+    const list = tasks.length
+      ? tasks.map((t) => `<div class="pick__row">
+          <div class="pick__row-main">
+            <div class="pick__title">${escapeHtml(t.title)}</div>
+            <div class="pick__meta">${escapeHtml(t.kind)}${t.estMinutes ? ` · ~${escapeHtml(String(t.estMinutes))} min` : ''} · #${escapeHtml(t.id)}</div>
+          </div>
+          <button type="button" class="btn btn--sm" data-claim="${escapeHtml(t.id)}" ${picker.claimingId ? 'disabled' : ''}>${picker.claimingId === t.id ? 'Claiming…' : 'Claim'}</button>
+        </div>`).join('')
+      : `<div class="detail">Nothing claimable right now — everything’s in flight, blocked, or shipped.</div>`;
+    return `<div class="pick">
+      <div class="pick__hd">What are you working on?</div>
+      <p class="note">Pick one and your box pulls exactly that task’s code — nothing else.</p>
+      <div class="pick__list">${list}</div>
+      <button type="button" class="btn btn--ghost" id="pick-refresh">Refresh</button>
+      <button type="button" class="btn btn--ghost" id="pick-close">Close</button>
+    </div>`;
+  }
+
+  async function loadClaimable() {
+    picker.loading = true; picker.error = null; picker.tasks = null; renderPicker(snap());
+    const r = await window.otb.claimable();
+    picker.loading = false;
+    if (r && r.ok) picker.tasks = r.tasks; else picker.error = (r && r.error) || 'Could not load your tasks.';
+    renderPicker(snap());
+  }
+
+  async function claimPicked(id) {
+    picker.claimingId = id; renderPicker(snap());
+    const r = await window.otb.pickTask(id);
+    picker.claimingId = null;
+    if (r && r.ok) { picker.result = r.message; picker.open = false; }
+    else { picker.error = (r && r.error) || 'Could not claim it.'; }
+    renderPicker(snap());
+  }
+
+  function renderPicker(s) {
+    const el = $('#picker');
+    if (!el) return;
+    if (!s || s.status !== 'active') {
+      el.hidden = true;
+      // Reset when there's no live box, so the next session starts clean.
+      if (!s || s.status === 'signed_out' || s.status === 'none') resetPicker();
+      return;
+    }
+    el.hidden = false;
+    el.innerHTML = pickerHtml();
+    const on = (id, fn) => { const b = $(id); if (b) b.addEventListener('click', fn); };
+    on('#pick-open', () => { picker.open = true; renderPicker(s); loadClaimable(); });
+    on('#pick-refresh', () => loadClaimable());
+    on('#pick-close', () => { picker.open = false; picker.error = null; renderPicker(s); });
+    on('#pick-again', () => { picker.result = null; picker.open = true; renderPicker(s); loadClaimable(); });
+    el.querySelectorAll('[data-claim]').forEach((b) => b.addEventListener('click', () => claimPicked(b.getAttribute('data-claim'))));
+  }
+
+  $('#ft-hall').addEventListener('click', () => window.otb.openHall());
+  $('#ft-auth').addEventListener('click', () => {
+    if (last && last.snapshot.status !== 'signed_out') window.otb.signOut();
+  });
+  $('#update-btn').addEventListener('click', () => window.otb.openUpdate());
+
+  window.otb.onState((payload) => { last = payload; render(); });
+  window.otb.getState().then((payload) => { last = payload; render(); });
+})();

package/modules/dev-box/app/renderer/index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Security-Policy"
+        content="default-src 'none'; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self'; img-src 'self' data:;">
+  <title>Dev Box</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="theme.generated.css">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<header class="hd">
+  <p class="hd__epigraph" id="hd-epigraph"></p>
+  <h1 class="hd__title" id="hd-title">Dev Box</h1>
+  <p class="hd__sub" id="hd-sub"></p>
+</header>
+
+<main id="main">
+  <!-- filled by app.js -->
+</main>
+
+<!-- BV1.R100: "What are you working on?" — lives OUTSIDE #main so its local
+     pick state survives the snapshot re-renders that rewrite #main. Shown only
+     while the box is on. -->
+<section id="picker" hidden></section>
+
+<footer class="ft">
+  <button type="button" class="ft__link" id="ft-hall">The builders’ hall ↗</button>
+  <span class="ft__dot" aria-hidden="true">·</span>
+  <button type="button" class="ft__link" id="ft-auth">Sign out</button>
+  <div class="ft__version" id="ft-version"></div>
+</footer>
+
+<div class="update" id="update" hidden>
+  <span id="update-text"></span>
+  <button type="button" class="update__btn" id="update-btn">Update</button>
+</div>
+
+<script src="app.js"></script>
+</body>
+</html>

package/modules/dev-box/app/renderer/styles.css

@@ -0,0 +1,246 @@
+/* Dev Box panel styles — layout/structure only. The :root design tokens
+   (palette + fonts) are generated from config/branding.json into
+   theme.generated.css by scripts/gen-brand.js and loaded BEFORE this file, so
+   the whole panel re-skins to the instance brand with no edit here. */
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body { height: 100%; }
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  -webkit-user-select: none;
+  overflow: hidden;
+}
+
+/* header */
+.hd { text-align: center; padding: 18px 16px 10px; }
+.hd__epigraph {
+  font-style: italic;
+  font-size: 0.78rem;
+  color: var(--ink-faint);
+  letter-spacing: 0.04em;
+}
+.hd__title {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.25rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  margin-top: 2px;
+}
+.hd__sub { font-size: 0.85rem; color: var(--ink-soft); min-height: 1.2em; }
+
+/* main card area */
+main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 16px 12px;
+}
+.scroll {
+  background: var(--bg-card);
+  border: 1px solid var(--rule);
+  outline: 1px solid var(--rule-soft);
+  outline-offset: 3px;
+  padding: 16px;
+  margin: 6px 2px 14px;
+}
+.lede { color: var(--ink-soft); font-size: 0.92rem; }
+.lede strong { color: var(--ink); }
+
+/* the switch */
+.switchrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0 6px;
+}
+.switch {
+  width: 96px;
+  height: 48px;
+  border: 2px solid var(--rule);
+  border-radius: 24px;
+  background: var(--bg-deep);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.25s ease;
+}
+.switch:disabled { cursor: default; opacity: 0.6; }
+.switch__knob {
+  position: absolute;
+  top: 3px; left: 4px;
+  width: 38px; height: 38px;
+  border-radius: 50%;
+  background: var(--bg-card);
+  border: 1px solid var(--rule-soft);
+  transition: left 0.25s ease;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.9rem;
+}
+.switch[data-on="1"] { background: var(--accent-deep); border-color: var(--accent-deep); }
+.switch[data-on="1"] .switch__knob { left: 50px; }
+.switch[data-busy="1"] .switch__knob::after {
+  content: "";
+  width: 18px; height: 18px;
+  border: 2px solid var(--rule);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.status {
+  font-family: var(--font-display);
+  font-size: 0.86rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.status--on { color: var(--accent-deep); }
+.status--busy { color: var(--ink-soft); }
+.status--err { color: var(--terracotta); }
+.detail {
+  text-align: center;
+  font-size: 0.86rem;
+  color: var(--ink-soft);
+  min-height: 1.2em;
+}
+
+/* info rows */
+.rows { margin-top: 12px; border-top: 1px solid var(--rule-soft); }
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--rule-soft) 40%, transparent);
+  font-size: 0.86rem;
+}
+.row__k { color: var(--ink-faint); }
+.row__v {
+  color: var(--ink-soft);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.78rem;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.row__v--copy {
+  cursor: pointer;
+  text-decoration: underline dotted color-mix(in srgb, var(--ink-faint) 60%, transparent);
+  text-underline-offset: 3px;
+}
+.row__v--copy:hover, .row__v--copy:focus-visible { color: var(--accent-deep); }
+.row__v--copied { color: var(--accent-deep); font-weight: 600; }
+
+/* buttons */
+.btn {
+  font-family: var(--font-display);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 9px 14px;
+  background: var(--accent-deep);
+  color: var(--bg-card);
+  border: 1px solid var(--accent-deep);
+  cursor: pointer;
+  width: 100%;
+  margin-top: 10px;
+}
+.btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
+.btn:disabled { opacity: 0.55; cursor: default; }
+.btn--ghost {
+  background: transparent;
+  color: var(--accent-deep);
+}
+.btn--ghost:hover:not(:disabled) { background: var(--bg-deep); color: var(--ink); }
+.btn--danger { background: transparent; color: var(--terracotta); border-color: var(--terracotta); }
+
+/* pairing code */
+.paircode {
+  text-align: center;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 1.3rem;
+  letter-spacing: 0.18em;
+  padding: 10px;
+  margin: 10px 0;
+  background: var(--bg-deep);
+  border: 1px solid var(--rule-soft);
+}
+
+/* desktop-link row */
+.dlink { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.86rem; }
+.dlink__ok { color: var(--accent-deep); font-weight: 600; }
+.dlink__warn { color: var(--terracotta); }
+.dlink .btn { width: auto; margin: 0; padding: 5px 10px; }
+
+.note { font-style: italic; font-size: 0.8rem; color: var(--ink-faint); margin-top: 10px; }
+
+/* footer */
+.ft {
+  text-align: center;
+  padding: 8px 16px 12px;
+  border-top: 1px solid var(--rule-soft);
+  background: var(--bg);
+}
+.ft__link {
+  background: none; border: none; cursor: pointer;
+  font-family: var(--font-body);
+  font-size: 0.84rem;
+  color: var(--accent-deep);
+  text-decoration: underline;
+}
+.ft__dot { color: var(--ink-faint); margin: 0 6px; }
+.ft__version { font-size: 0.72rem; color: var(--ink-faint); margin-top: 2px; }
+
+/* update banner */
+.update[hidden] { display: none; }
+.update {
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  background: var(--accent-deep);
+  color: var(--bg-card);
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  padding: 8px;
+  font-size: 0.84rem;
+}
+.update__btn {
+  font-family: var(--font-display);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: var(--bg-card);
+  color: var(--accent-deep);
+  border: none; padding: 5px 10px; cursor: pointer;
+}
+
+/* BV1.R100 — "What are you working on?" task picker (#picker, outside #main). */
+#picker { padding: 0 18px 14px; }
+.pick__open { margin-top: 0; }
+.pick { border-top: 1px solid var(--rule-soft); padding-top: 12px; }
+.pick__hd { font-family: var(--font-display); font-size: 0.9rem; color: var(--ink); }
+.pick__msg { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
+.pick--done { border-top: 1px solid var(--rule-soft); padding-top: 12px; }
+.pick__list { margin-top: 8px; }
+.pick__row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 0; border-bottom: 1px solid var(--rule-soft);
+}
+.pick__row-main { flex: 1; min-width: 0; }
+.pick__title {
+  color: var(--ink); font-size: 0.86rem; line-height: 1.35;
+  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
+  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+}
+.pick__meta { color: var(--ink-faint); font-size: 0.74rem; margin-top: 2px; }
+.btn--sm {
+  width: auto; margin-top: 0; flex: 0 0 auto;
+  padding: 6px 12px; font-size: 0.72rem;
+}

package/modules/dev-box/app/renderer/theme.generated.css

@@ -0,0 +1,16 @@
+/* GENERATED by scripts/gen-brand.js from config/branding.json — do not edit by hand. */
+:root {
+  --bg: #fff7ed;
+  --bg-card: #ffffff;
+  --bg-deep: #ffedd5;
+  --ink: #2a1f17;
+  --ink-soft: #6b5d52;
+  --ink-faint: #857567;
+  --rule: #fdba74;
+  --rule-soft: #fed7aa;
+  --accent: #f97316;
+  --accent-deep: #ea580c;
+  --terracotta: #fb7185;
+  --font-display: "Baloo 2", "Quicksand", system-ui, sans-serif;
+  --font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
+}