npm - rogerthat - Versions diffs - 1.21.2 - Mend

rogerthat 1.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/account-ui.js ADDED Viewed

@@ -0,0 +1,895 @@
+export function accountHtml() {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>rogerthat — account</title>
+<!-- Loaded for the "Pair phone" QR modal. Stays out of every other page; failure
+     is recoverable — the URL itself is still shown and can be opened directly. -->
+<script src="https://unpkg.com/qrcode@1.5.4/build/qrcode.min.js" defer></script>
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%231a1a1a'/><path d='M 9 7 Q 16 4 23 7' stroke='%23d6541f' stroke-width='1.5' fill='none' stroke-linecap='round'/><ellipse cx='11' cy='14' rx='2' ry='3' fill='%23f4ede0' transform='rotate(-15 11 14)'/><ellipse cx='21' cy='14' rx='2' ry='3' fill='%23f4ede0' transform='rotate(15 21 14)'/><ellipse cx='16' cy='22' rx='8' ry='6.5' fill='%23f4ede0'/><circle cx='13' cy='21' r='1.2' fill='%231a1a1a'/><circle cx='19' cy='21' r='1.2' fill='%231a1a1a'/><ellipse cx='16' cy='25' rx='1.5' ry='1' fill='%23d6541f'/></svg>" />
+<style>
+  :root {
+    --bg: #f4ede0; --ink: #1a1a1a; --dim: #7a6f5f; --warn: #d6541f;
+    --line: #c9b994; --paper: #fffaef; --ok: #2d8a3e;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: ui-monospace, Menlo, monospace; background: var(--bg); color: var(--ink); line-height: 1.5; }
+  .wrap { max-width: 720px; margin: 0 auto; padding: 32px 24px 96px; }
+  header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; gap: 12px; flex-wrap: wrap; }
+  .logo { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
+  .logo svg { width: 22px; height: 22px; }
+  .nav a { color: var(--dim); text-decoration: none; font-size: 13px; margin-left: 14px; }
+  .nav a:hover { color: var(--ink); }
+  h1 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 6px; }
+  h2 { font-size: 16px; margin: 32px 0 12px; }
+  p.sub { color: var(--dim); font-size: 14px; margin: 0 0 24px; }
+  .card { background: var(--paper); border: 1px solid var(--line); padding: 24px; margin-bottom: 24px; }
+  .card.gate { border: 2px solid var(--ink); }
+  label { font-size: 13px; color: var(--dim); display: block; margin-bottom: 6px; }
+  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  input[type=text], input[type=password] {
+    flex: 1; min-width: 220px; padding: 10px 12px; border: 1px solid var(--line); background: white;
+    font-family: inherit; font-size: 14px;
+  }
+  button {
+    padding: 10px 18px; background: var(--warn); color: white; border: none;
+    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
+  }
+  button.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); }
+  button.danger { background: transparent; color: var(--warn); border: 1px solid var(--warn); padding: 4px 10px; font-size: 12px; font-weight: 500; }
+  button:hover { background: #b8451a; }
+  button.ghost:hover { background: var(--bg); color: var(--ink); }
+  button.danger:hover { background: var(--warn); color: white; }
+  table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); }
+  th, td { text-align: left; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
+  th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); font-weight: 600; }
+  tr:last-child td { border-bottom: none; }
+  .reveal { background: var(--bg); border: 1px dashed var(--warn); padding: 12px 14px; font-size: 12px; margin-top: 16px; }
+  .reveal strong { color: var(--warn); }
+  .reveal pre { margin: 8px 0; white-space: pre-wrap; word-break: break-all; user-select: all; font-size: 12px; }
+  .reveal-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+  .reveal-actions button { background: var(--ink); color: white; padding: 6px 12px; font-size: 12px; font-weight: 500; }
+  .reveal-actions button:hover { background: #333; }
+  .reveal-actions button.confirm { background: var(--ok); }
+  .reveal-actions button.confirm:hover { background: #1f6b2e; }
+  .err { color: var(--warn); font-size: 13px; margin: 8px 0; }
+  .empty { text-align: center; padding: 28px; color: var(--dim); font-size: 13px; }
+  footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
+  footer a { color: var(--dim); }
+  /* Pair-phone modal — used to build a /remote/<id> URL with creds in the fragment */
+  .modal-backdrop {
+    position: fixed; inset: 0; background: rgba(26,26,26,0.55); z-index: 1000;
+    display: flex; align-items: center; justify-content: center; padding: 16px;
+  }
+  .modal-panel {
+    background: var(--paper); border: 2px solid var(--ink); padding: 20px 22px;
+    max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;
+  }
+  .modal-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; gap: 12px; }
+  .modal-head h2 { margin: 0; font-size: 17px; }
+  .modal-head .x { background: transparent; color: var(--dim); border: none; padding: 4px 8px; font-size: 18px; cursor: pointer; }
+  #pair-url { background: var(--bg); border: 1px dashed var(--warn); padding: 10px 12px;
+              font-size: 11px; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap;
+              user-select: all; max-height: 90px; overflow-y: auto; }
+  #pair-qr { background: white; padding: 14px; text-align: center; min-height: 240px;
+             border: 1px solid var(--line); }
+  #pair-qr svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <div class="logo">
+      <svg viewBox="0 0 32 32" aria-hidden="true">
+        <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
+        <path d="M 9 7 Q 16 4 23 7" stroke="#d6541f" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+        <ellipse cx="11" cy="14" rx="2" ry="3" fill="#f4ede0" transform="rotate(-15 11 14)"/>
+        <ellipse cx="21" cy="14" rx="2" ry="3" fill="#f4ede0" transform="rotate(15 21 14)"/>
+        <ellipse cx="16" cy="22" rx="8" ry="6.5" fill="#f4ede0"/>
+        <circle cx="13" cy="21" r="1.2" fill="#1a1a1a"/>
+        <circle cx="19" cy="21" r="1.2" fill="#1a1a1a"/>
+        <ellipse cx="16" cy="25" rx="1.5" ry="1" fill="#d6541f"/>
+      </svg>
+      <span>rogerthat / account</span>
+    </div>
+    <nav class="nav">
+      <a href="/">landing</a>
+      <a href="/policy">policy</a>
+      <a href="/llms.txt">/llms.txt</a>
+    </nav>
+  </header>
+  <div id="gate" class="card gate" hidden>
+    <h2 style="margin-top:0">Sign in or create an account</h2>
+    <p class="sub">No email, no password. Rogerthat uses a recovery_token (your "password", you keep it) and short-lived session_tokens (the cookie, kept in this browser's sessionStorage).</p>
+    <p id="gate-err" class="err"></p>
+    <h3 style="margin:24px 0 8px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:0.06em">Existing account</h3>
+    <label for="login-token">Paste a session_token or a recovery_token</label>
+    <div class="row">
+      <input id="login-token" type="password" autocomplete="off" placeholder="session_token or recovery_token" />
+      <button id="login-btn">Sign in</button>
+    </div>
+    <h3 style="margin:32px 0 8px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:0.06em">New account</h3>
+    <p class="sub">Generates a recovery_token + session_token. Save the recovery_token in your password manager — it's shown only once and is the only way to recover this account.</p>
+    <button id="create-btn">Create account</button>
+    <h3 style="margin:32px 0 8px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:0.06em">Lost your recovery_token? Use email</h3>
+    <p class="sub">If you attached a verified email to your account, we can send a one-time recovery link.</p>
+    <p id="recover-msg" class="err"></p>
+    <div class="row">
+      <input id="recover-email" type="email" autocomplete="email" placeholder="email@example.com" />
+      <button id="recover-btn" class="ghost">Send recovery link</button>
+    </div>
+  </div>
+  <div id="dashboard" hidden>
+    <div class="card">
+      <h1 id="account-id">…</h1>
+      <p class="sub">Account created <span id="account-created">…</span>. <span id="account-extra"></span></p>
+      <div class="row">
+        <button id="logout-btn" class="ghost">Sign out (just clears this browser)</button>
+      </div>
+      <div id="reveal" class="reveal" hidden>
+        <strong>Save these now.</strong> They are shown ONLY on this screen. You will not see them again after navigation.
+        <div id="reveal-body"></div>
+        <div class="reveal-actions">
+          <button data-action="download">⬇ Download .txt</button>
+          <button data-action="copy">⎘ Copy</button>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <h2 style="margin-top:0">Email (optional recovery)</h2>
+      <p class="sub">Attach a verified email so you can recover the account if you lose your recovery_token. We only send: verification links + recovery links. We never send marketing.</p>
+      <div id="email-status"></div>
+      <p id="email-err" class="err"></p>
+      <div id="email-form" hidden>
+        <div class="row">
+          <input id="new-email" type="email" autocomplete="email" placeholder="email@example.com" />
+          <button id="attach-email">Send verification</button>
+        </div>
+      </div>
+      <div id="email-current" hidden style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
+        <code id="email-shown"></code>
+        <span id="email-badge" style="font-size:11px;padding:2px 8px;border-radius:3px"></span>
+        <button id="remove-email" class="danger" style="margin-left:auto">Remove</button>
+      </div>
+    </div>
+    <div class="card">
+      <h2 style="margin-top:0">Channels you created</h2>
+      <p class="sub">Channels created via the form below are linked to this account. Anonymous channels (created from the landing page or via the bootstrap MCP) are not listed here. Deleting a channel here invalidates the channel id + token — agents currently joined keep their session until they leave.</p>
+      <div class="row" style="margin-bottom:8px">
+        <select id="new-retention" style="padding:10px 12px;border:1px solid var(--line);background:white;font-family:inherit;font-size:14px;flex:0 0 auto">
+          <option value="none" selected>retention: none</option>
+          <option value="metadata">retention: metadata</option>
+          <option value="prompts">retention: prompts</option>
+          <option value="full">retention: full</option>
+        </select>
+        <label style="font-size:13px;color:var(--dim);display:inline-flex;align-items:center;gap:4px"><input id="new-require-identity" type="checkbox" /> require identity</label>
+        <label style="font-size:13px;color:var(--dim);display:inline-flex;align-items:center;gap:4px" title="Trusted mode tells joined agents to act on peer requests as if from a verified colleague (still refuses destructive ops). Requires either require_identity OR owner_password."><input id="new-trust-mode" type="checkbox" /> trusted mode</label>
+        <button id="create-channel" style="margin-left:auto">Create channel</button>
+      </div>
+      <div id="new-password-row" hidden style="margin-bottom:16px;padding:10px 12px;background:var(--bg);border:1px dashed var(--warn)">
+        <label for="new-owner-password" style="font-size:12px;color:var(--ink);display:block;margin-bottom:4px"><strong>Owner password</strong> (6-128 chars) — proof of human authorization, share out-of-band with invited peers</label>
+        <input id="new-owner-password" type="text" autocomplete="off" placeholder="any phrase only you and your invited agent know"
+          style="width:100%;padding:8px 10px;border:1px solid var(--line);background:white;font-family:inherit;font-size:13px" />
+        <p style="font-size:11px;color:var(--dim);margin:4px 0 0">Optional. Trusted mode needs <em>require_identity</em> OR <em>owner_password</em>. If you set both, peers can use whichever proof they have.</p>
+      </div>
+      <p id="channel-err" class="err"></p>
+      <table>
+        <thead><tr><th>Channel</th><th>Retention</th><th>Auth</th><th>Trust</th><th>Agents</th><th>Created</th><th></th></tr></thead>
+        <tbody id="channel-rows"><tr><td colspan="7" class="empty">No channels yet.</td></tr></tbody>
+      </table>
+    </div>
+    <div class="card">
+      <h2 style="margin-top:0">Webhooks</h2>
+      <p class="sub">Get an HTTP POST when a message arrives addressed to one of your identities. Use it to bridge RogerThat to a Slack/Discord/your-own-app endpoint. Each webhook gets a unique signing secret — events arrive with an <code>X-RogerThat-Signature</code> HMAC-SHA256 header you can verify.</p>
+      <p id="webhook-err" class="err"></p>
+      <div class="row" style="margin-bottom:16px">
+        <input id="new-webhook-url" type="url" placeholder="https://your-endpoint.example.com/rogerthat" style="flex:1" />
+        <button id="create-webhook">Subscribe</button>
+      </div>
+      <table>
+        <thead><tr><th>Endpoint</th><th>Events</th><th>Created</th><th></th></tr></thead>
+        <tbody id="webhook-rows"><tr><td colspan="4" class="empty">No webhooks yet.</td></tr></tbody>
+      </table>
+    </div>
+    <div class="card">
+      <h2 style="margin-top:0">Identities</h2>
+      <p class="sub">An identity is a stable callsign you can use to join channels with <code>require_identity=true</code>. Each identity has a persistent <code>identity_key</code> (shown once on creation) that proves "you on this account, using this callsign". Treat the key like a password.</p>
+      <div class="row" style="margin-bottom:16px">
+        <input id="new-callsign" type="text" placeholder="callsign (lowercase, 1-32 chars)" />
+        <button id="create-ident">Create identity</button>
+      </div>
+      <p id="ident-err" class="err"></p>
+      <table>
+        <thead><tr><th>Callsign</th><th>Created</th><th></th></tr></thead>
+        <tbody id="ident-rows"><tr><td colspan="3" class="empty">No identities yet.</td></tr></tbody>
+      </table>
+    </div>
+    <div id="reveal" class="card reveal" hidden>
+      <strong>Save these now.</strong> They are shown ONLY on this screen. You will not see them again after navigation.
+      <div id="reveal-body"></div>
+      <div class="reveal-actions">
+        <button data-action="download">⬇ Download .txt</button>
+        <button data-action="copy">⎘ Copy</button>
+        <button id="reveal-pair-btn" hidden>📱 Pair phone now</button>
+      </div>
+    </div>
+  </div>
+  <footer>
+    <a href="/policy">communication policy</a> · <a href="/">landing</a> · session_token lives only in this browser's sessionStorage
+  </footer>
+</div>
+<!-- Pair-phone modal: builds a /remote/<id> URL with the channel token + identity
+     in the URL fragment, renders the QR client-side. Token & key are never sent
+     to a third-party renderer. -->
+<div id="pair-modal" class="modal-backdrop" hidden>
+  <div class="modal-panel">
+    <div class="modal-head">
+      <h2>Pair phone with a channel</h2>
+      <button id="pair-close" class="x" aria-label="close">✕</button>
+    </div>
+    <p class="sub">Builds a URL your phone can open. The token + identity_key live in the URL fragment (after <code>#</code>) — so they never reach the server logs or referrers. Treat the URL like a password.</p>
+    <label>Channel</label>
+    <input id="pair-channel" type="text" readonly style="background:var(--bg);color:var(--dim)" />
+    <label style="margin-top:12px">Channel token <span style="color:var(--dim);text-transform:none;letter-spacing:0">(shown once when you created the channel)</span></label>
+    <input id="pair-token" type="password" autocomplete="off" placeholder="paste the join_token" />
+    <p style="font-size:11px;color:var(--dim);margin:14px 0 4px;text-transform:uppercase;letter-spacing:0.06em">Authentication — one of:</p>
+    <label>identity_key <span style="color:var(--dim);text-transform:none;letter-spacing:0">(required if channel has require_identity=true)</span></label>
+    <input id="pair-key" type="password" autocomplete="off" placeholder="(optional)" />
+    <label style="margin-top:8px">or callsign</label>
+    <input id="pair-cs" type="text" autocomplete="off" placeholder="phone" />
+    <label style="margin-top:12px">Owner password <span style="color:var(--dim);text-transform:none;letter-spacing:0">(optional — for trusted channels, flips the phone's session to "human-authorized")</span></label>
+    <input id="pair-pw" type="password" autocomplete="off" placeholder="(optional)" />
+    <p id="pair-err" class="err" hidden></p>
+    <div class="row" style="margin-top:16px">
+      <button id="pair-gen">Generate pair link</button>
+      <span id="pair-status" style="font-size:12px;color:var(--dim)"></span>
+    </div>
+    <div id="pair-output" hidden style="margin-top:18px">
+      <label>Pair URL</label>
+      <pre id="pair-url"></pre>
+      <div class="row" style="margin:8px 0 16px">
+        <button id="pair-copy" class="ghost">⎘ Copy</button>
+        <a id="pair-open" target="_blank" rel="noopener" class="ghost" style="padding:10px 18px;background:transparent;color:var(--dim);border:1px solid var(--line);font-family:inherit;font-size:14px;text-decoration:none;cursor:pointer">↗ Open here</a>
+      </div>
+      <label>QR (scan with phone camera)</label>
+      <div id="pair-qr">QR will appear here…</div>
+      <p style="font-size:11px;color:var(--dim);margin-top:8px"><strong>⚠</strong> Anyone with this URL can drive the agent on this channel. Don't paste it into anything other than your phone.</p>
+    </div>
+  </div>
+</div>
+<script>
+  const KEY = 'rogerthat_account_session';
+  let session = sessionStorage.getItem(KEY) || '';
+  const $ = (id) => document.getElementById(id);
+  function fmtDate(ts) {
+    if (!ts) return '—';
+    return new Date(ts).toLocaleString();
+  }
+  function esc(s) {
+    return String(s).replace(/[&<>"']/g, ch => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[ch]));
+  }
+  function showGate(err) {
+    $('gate').hidden = false;
+    $('dashboard').hidden = true;
+    $('gate-err').textContent = err || '';
+  }
+  let revealPayload = null;  // { filename, text }
+  function showReveal(filename, text) {
+    revealPayload = { filename, text };
+    $('reveal-body').innerHTML = '<pre>' + esc(text) + '</pre>';
+    // Default: hide the channel-only "Pair phone" action. Channel-create
+    // unhides + wires it after this call.
+    const pb = $('reveal-pair-btn');
+    if (pb) { pb.hidden = true; pb.onclick = null; }
+    $('reveal').hidden = false;
+  }
+  function showDashboard(account, justCreated) {
+    $('gate').hidden = true;
+    $('dashboard').hidden = false;
+    $('account-id').textContent = account.id;
+    $('account-created').textContent = fmtDate(account.created_at);
+    $('account-extra').textContent = account.identities ? '(' + account.identities.length + ' identit' + (account.identities.length === 1 ? 'y' : 'ies') + ')' : '';
+    renderEmail(account);
+    renderIdentities(account.identities || []);
+    loadChannels();
+    loadWebhooks();
+    if (justCreated) {
+      const text = [
+        'RogerThat account credentials',
+        '============================',
+        '',
+        'Service:        https://rogerthat.chat',
+        'Account ID:     ' + justCreated.account_id,
+        'Created:        ' + new Date().toISOString(),
+        'Recovery token: ' + justCreated.recovery_token,
+        'Session token:  ' + justCreated.session_token,
+        '',
+        '⚠ Save the recovery_token in a password manager — it is the ONLY way to',
+        '  recover this account if you lose the session.',
+        '  The session_token is short-lived; re-issue via /api/account/recover.',
+      ].join('\\n');
+      showReveal('rogerthat-account-' + justCreated.account_id + '.txt', text);
+    }
+  }
+  document.querySelectorAll('#reveal .reveal-actions button').forEach(btn => {
+    btn.addEventListener('click', () => {
+      if (!revealPayload) return;
+      if (btn.dataset.action === 'download') {
+        const blob = new Blob([revealPayload.text.replace(/\\\\n/g, '\\n')], { type: 'text/plain;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = revealPayload.filename;
+        document.body.appendChild(a); a.click(); a.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+        btn.classList.add('confirm');
+        btn.textContent = '✓ Downloaded';
+        setTimeout(() => { btn.classList.remove('confirm'); btn.textContent = '⬇ Download .txt'; }, 2000);
+      } else if (btn.dataset.action === 'copy') {
+        navigator.clipboard.writeText(revealPayload.text.replace(/\\\\n/g, '\\n')).then(() => {
+          btn.classList.add('confirm');
+          btn.textContent = '✓ Copied';
+          setTimeout(() => { btn.classList.remove('confirm'); btn.textContent = '⎘ Copy'; }, 2000);
+        }).catch((e) => {
+          alert('Copy failed: ' + e.message + '\\n\\nSelect the text manually and Ctrl+C.');
+        });
+      }
+    });
+  });
+  async function loadWebhooks() {
+    try {
+      const r = await fetch('/api/account/webhooks', { headers: { Authorization: 'Bearer ' + session } });
+      if (!r.ok) return;
+      const data = await r.json();
+      renderWebhooks(data.webhooks || []);
+    } catch {}
+  }
+  function renderWebhooks(list) {
+    const tbody = $('webhook-rows');
+    if (!list.length) {
+      tbody.innerHTML = '<tr><td colspan="4" class="empty">No webhooks yet. Subscribe to get POSTed when messages arrive for your identities.</td></tr>';
+      return;
+    }
+    tbody.innerHTML = list.map(h =>
+      '<tr>' +
+        '<td><code style="font-size:11px">' + esc(h.url) + '</code></td>' +
+        '<td>' + h.events.map(e => '<span class="chip">' + esc(e) + '</span>').join('') + '</td>' +
+        '<td>' + fmtAgo(h.created_at) + '</td>' +
+        '<td style="text-align:right"><button class="danger" data-wh="' + esc(h.id) + '">Delete</button></td>' +
+      '</tr>'
+    ).join('');
+    tbody.querySelectorAll('button.danger').forEach(btn => {
+      btn.addEventListener('click', () => deleteWebhook(btn.dataset.wh));
+    });
+  }
+  async function deleteWebhook(id) {
+    if (!confirm('Delete this webhook? Events will stop firing immediately.')) return;
+    try {
+      const r = await fetch('/api/account/webhooks/' + encodeURIComponent(id), {
+        method: 'DELETE',
+        headers: { Authorization: 'Bearer ' + session },
+      });
+      if (!r.ok) { $('webhook-err').textContent = 'Failed: HTTP ' + r.status; return; }
+      loadWebhooks();
+    } catch (e) {
+      $('webhook-err').textContent = 'Error: ' + e.message;
+    }
+  }
+  async function loadChannels() {
+    try {
+      const r = await fetch('/api/account/channels', { headers: { Authorization: 'Bearer ' + session } });
+      if (!r.ok) return;
+      const data = await r.json();
+      renderChannels(data.channels || []);
+    } catch {}
+  }
+  function renderChannels(list) {
+    const tbody = $('channel-rows');
+    if (!list.length) {
+      tbody.innerHTML = '<tr><td colspan="7" class="empty">No channels yet. Use the form above to create one linked to this account.</td></tr>';
+      return;
+    }
+    tbody.innerHTML = list.map(c => {
+      const auth = c.require_identity ? 'identity' : 'token';
+      const authColor = c.require_identity ? '#d6541f' : 'var(--dim)';
+      const trustLabel = c.trust_mode === 'trusted'
+        ? (c.has_owner_password ? 'trusted + pw' : 'trusted')
+        : 'untrusted';
+      const trustColor = c.trust_mode === 'trusted' ? '#d6541f' : 'var(--dim)';
+      const ago = fmtAgo(c.created_at);
+      return '<tr>' +
+        '<td><code>' + esc(c.id) + '</code></td>' +
+        '<td>' + esc(c.retention) + '</td>' +
+        '<td><span style="color:' + authColor + '">' + auth + '</span></td>' +
+        '<td><span style="color:' + trustColor + '">' + trustLabel + '</span></td>' +
+        '<td>' + c.agent_count + '</td>' +
+        '<td>' + ago + '</td>' +
+        '<td style="text-align:right;white-space:nowrap">' +
+          '<button class="ghost" data-pair="' + esc(c.id) + '" style="font-size:12px;padding:4px 10px;margin-right:6px" title="Build a phone pair URL + QR for this channel">📱 Pair</button>' +
+          '<button class="danger" data-ch="' + esc(c.id) + '">Delete</button>' +
+        '</td>' +
+      '</tr>';
+    }).join('');
+    tbody.querySelectorAll('button[data-ch]').forEach(btn => {
+      btn.addEventListener('click', () => deleteChannel(btn.dataset.ch));
+    });
+    tbody.querySelectorAll('button[data-pair]').forEach(btn => {
+      btn.addEventListener('click', () => openPairModal(btn.dataset.pair));
+    });
+  }
+  function fmtAgo(ts) {
+    if (!ts) return '—';
+    const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+    if (s < 60) return s + 's ago';
+    if (s < 3600) return Math.floor(s / 60) + 'm ago';
+    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
+    return Math.floor(s / 86400) + 'd ago';
+  }
+  async function deleteChannel(id) {
+    if (!confirm('Delete channel "' + id + '"? This invalidates the channel id + token. Cannot be undone.')) return;
+    try {
+      const r = await fetch('/api/account/channels/' + encodeURIComponent(id), {
+        method: 'DELETE',
+        headers: { Authorization: 'Bearer ' + session },
+      });
+      if (!r.ok) { $('channel-err').textContent = 'Failed: HTTP ' + r.status; return; }
+      loadChannels();
+    } catch (e) {
+      $('channel-err').textContent = 'Error: ' + e.message;
+    }
+  }
+  function renderEmail(account) {
+    const form = $('email-form');
+    const current = $('email-current');
+    if (account.email) {
+      form.hidden = true;
+      current.hidden = false;
+      current.style.display = 'flex';
+      $('email-shown').textContent = account.email;
+      const badge = $('email-badge');
+      if (account.email_verified) {
+        badge.textContent = 'verified';
+        badge.style.background = '#2d8a3e';
+        badge.style.color = 'white';
+      } else {
+        badge.textContent = 'pending verification — check inbox';
+        badge.style.background = 'var(--bg)';
+        badge.style.color = 'var(--warn)';
+      }
+    } else {
+      form.hidden = false;
+      current.hidden = true;
+      current.style.display = 'none';
+    }
+  }
+  function renderIdentities(idents) {
+    const tbody = $('ident-rows');
+    if (!idents.length) {
+      tbody.innerHTML = '<tr><td colspan="3" class="empty">No identities yet.</td></tr>';
+      return;
+    }
+    tbody.innerHTML = idents.map(i =>
+      '<tr>' +
+        '<td><code>' + esc(i.callsign) + '</code></td>' +
+        '<td>' + fmtDate(i.created_at) + '</td>' +
+        '<td style="text-align:right"><button class="danger" data-cs="' + esc(i.callsign) + '">Revoke</button></td>' +
+      '</tr>'
+    ).join('');
+    tbody.querySelectorAll('button.danger').forEach(btn => {
+      btn.addEventListener('click', () => revokeIdentity(btn.dataset.cs));
+    });
+  }
+  async function loadAccount() {
+    if (!session) { showGate(); return; }
+    try {
+      const r = await fetch('/api/account', { headers: { Authorization: 'Bearer ' + session } });
+      if (r.status === 401) {
+        sessionStorage.removeItem(KEY);
+        session = '';
+        showGate('Session expired or invalid. Sign in again.');
+        return;
+      }
+      const data = await r.json();
+      showDashboard(data);
+    } catch (e) {
+      showGate('Failed to load account: ' + e.message);
+    }
+  }
+  $('login-btn').addEventListener('click', async () => {
+    const v = $('login-token').value.trim();
+    if (!v) return;
+    // Try as session first. If 401, try as recovery_token.
+    try {
+      const probe = await fetch('/api/account', { headers: { Authorization: 'Bearer ' + v } });
+      if (probe.ok) {
+        sessionStorage.setItem(KEY, v);
+        session = v;
+        loadAccount();
+        return;
+      }
+    } catch {}
+    try {
+      const r = await fetch('/api/account/recover', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ recovery_token: v }),
+      });
+      if (!r.ok) {
+        $('gate-err').textContent = 'Token not recognised as session OR recovery.';
+        return;
+      }
+      const data = await r.json();
+      sessionStorage.setItem(KEY, data.session_token);
+      session = data.session_token;
+      loadAccount();
+    } catch (e) {
+      $('gate-err').textContent = 'Error: ' + e.message;
+    }
+  });
+  $('login-token').addEventListener('keydown', (e) => { if (e.key === 'Enter') $('login-btn').click(); });
+  $('recover-btn').addEventListener('click', async () => {
+    const email = $('recover-email').value.trim();
+    if (!email) return;
+    $('recover-msg').style.color = 'var(--dim)';
+    $('recover-msg').textContent = 'Sending…';
+    try {
+      const r = await fetch('/api/account/email-recover', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      const data = await r.json();
+      $('recover-msg').textContent = data.message || 'If this email is registered and verified, a recovery link was sent.';
+    } catch (e) {
+      $('recover-msg').style.color = 'var(--warn)';
+      $('recover-msg').textContent = 'Error: ' + e.message;
+    }
+  });
+  $('attach-email').addEventListener('click', async () => {
+    const email = $('new-email').value.trim();
+    if (!email) return;
+    $('email-err').textContent = '';
+    try {
+      const r = await fetch('/api/account/email', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + session },
+        body: JSON.stringify({ email }),
+      });
+      const data = await r.json();
+      if (!r.ok) { $('email-err').textContent = data.error || ('HTTP ' + r.status); return; }
+      $('new-email').value = '';
+      loadAccount();
+    } catch (e) {
+      $('email-err').textContent = 'Error: ' + e.message;
+    }
+  });
+  $('create-webhook').addEventListener('click', async () => {
+    const url = $('new-webhook-url').value.trim();
+    if (!url) return;
+    $('webhook-err').textContent = '';
+    try {
+      const r = await fetch('/api/account/webhooks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + session },
+        body: JSON.stringify({ url, events: ['message.received'] }),
+      });
+      const data = await r.json();
+      if (!r.ok) { $('webhook-err').textContent = data.error || ('HTTP ' + r.status); return; }
+      $('new-webhook-url').value = '';
+      const text = [
+        'RogerThat webhook',
+        '================',
+        '',
+        'URL:    ' + data.url,
+        'Events: ' + (data.events || []).join(', '),
+        'Secret: ' + data.secret,
+        'ID:     ' + data.id,
+        '',
+        '⚠ Save the secret. Use it to verify the X-RogerThat-Signature header on incoming events.',
+        '  Signature is HMAC-SHA256 of the JSON body, prefixed with "sha256=".',
+      ].join('\\n');
+      showReveal('rogerthat-webhook-' + data.id + '.txt', text);
+      loadWebhooks();
+    } catch (e) {
+      $('webhook-err').textContent = 'Error: ' + e.message;
+    }
+  });
+  $('new-trust-mode').addEventListener('change', () => {
+    $('new-password-row').hidden = !$('new-trust-mode').checked;
+  });
+  $('create-channel').addEventListener('click', async () => {
+    const retention = $('new-retention').value;
+    const require_identity = $('new-require-identity').checked;
+    const trusted = $('new-trust-mode').checked;
+    const owner_password = $('new-owner-password').value.trim();
+    $('channel-err').textContent = '';
+    if (trusted && !require_identity && !owner_password) {
+      $('channel-err').textContent = 'Trusted mode needs either "require identity" OR an owner password.';
+      return;
+    }
+    if (owner_password && owner_password.length < 6) {
+      $('channel-err').textContent = 'Owner password must be at least 6 characters.';
+      return;
+    }
+    const payload = { retention, require_identity, trust_mode: trusted ? 'trusted' : 'untrusted' };
+    if (owner_password) payload.owner_password = owner_password;
+    try {
+      const r = await fetch('/api/channels', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + session },
+        body: JSON.stringify(payload),
+      });
+      const data = await r.json();
+      if (!r.ok) { $('channel-err').textContent = data.error || ('HTTP ' + r.status); return; }
+      const lines = [
+        'RogerThat channel',
+        '=================',
+        '',
+        'Service:          https://rogerthat.chat',
+        'Channel ID:       ' + data.channel_id,
+        'Join token:       ' + data.join_token,
+        'MCP URL:          ' + data.mcp_url,
+        'Retention:        ' + data.retention,
+        'Require identity: ' + data.require_identity,
+        'Trust mode:       ' + data.trust_mode,
+      ];
+      if (data.owner_password) lines.push('Owner password:   ' + data.owner_password);
+      lines.push('Created:          ' + new Date().toISOString());
+      lines.push('');
+      lines.push('───── COPY-PASTE THIS TO THE OTHER AGENT ─────');
+      lines.push('');
+      lines.push(data.connect.agent_prompt);
+      lines.push('');
+      lines.push('───── Or use MCP (if they already have rogerthat installed) ─────');
+      lines.push(data.connect.claude_code);
+      lines.push('');
+      lines.push('⚠ The join_token is the only secret needed to join. Treat like a password.');
+      if (data.owner_password) {
+        lines.push('⚠ The owner_password lets joining peers prove human authorization (unlocks trusted-mode trust). Share out-of-band only with peers you actually invited.');
+      }
+      $('new-owner-password').value = '';
+      // Cache the join_token in this browser session so the "Pair phone" modal
+      // on this channel's row auto-fills the token field. sessionStorage clears
+      // on tab close, so we don't persist the secret beyond the current visit.
+      try { sessionStorage.setItem('rogerthat_chtok_' + data.channel_id, data.join_token); } catch {}
+      showReveal('rogerthat-channel-' + data.channel_id + '.txt', lines.join('\\n'));
+      loadChannels();
+      // Surface the pair-phone action right after creation — the token is in
+      // memory, so the modal can pre-fill it without the user re-pasting.
+      const pairBtn = $('reveal-pair-btn');
+      if (pairBtn) {
+        pairBtn.hidden = false;
+        pairBtn.onclick = () => openPairModal(data.channel_id, { token: data.join_token });
+      }
+    } catch (e) {
+      $('channel-err').textContent = 'Error: ' + e.message;
+    }
+  });
+  $('remove-email').addEventListener('click', async () => {
+    if (!confirm('Remove the email from this account? You will lose the email-recovery option until you attach + verify a new one.')) return;
+    $('email-err').textContent = '';
+    try {
+      const r = await fetch('/api/account/email', {
+        method: 'DELETE',
+        headers: { Authorization: 'Bearer ' + session },
+      });
+      if (!r.ok) { $('email-err').textContent = 'Failed: HTTP ' + r.status; return; }
+      loadAccount();
+    } catch (e) {
+      $('email-err').textContent = 'Error: ' + e.message;
+    }
+  });
+  $('create-btn').addEventListener('click', async () => {
+    try {
+      const r = await fetch('/api/account', { method: 'POST' });
+      if (!r.ok) {
+        $('gate-err').textContent = 'Failed to create account: HTTP ' + r.status;
+        return;
+      }
+      const data = await r.json();
+      sessionStorage.setItem(KEY, data.session_token);
+      session = data.session_token;
+      // Show with reveal block
+      const r2 = await fetch('/api/account', { headers: { Authorization: 'Bearer ' + session } });
+      const acc = await r2.json();
+      showDashboard(acc, data);
+    } catch (e) {
+      $('gate-err').textContent = 'Error: ' + e.message;
+    }
+  });
+  $('logout-btn').addEventListener('click', () => {
+    sessionStorage.removeItem(KEY);
+    session = '';
+    $('reveal').hidden = true;
+    showGate();
+  });
+  $('create-ident').addEventListener('click', async () => {
+    const cs = $('new-callsign').value.trim();
+    if (!cs) return;
+    $('ident-err').textContent = '';
+    try {
+      const r = await fetch('/api/account/identities', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + session },
+        body: JSON.stringify({ callsign: cs }),
+      });
+      const data = await r.json();
+      if (!r.ok) { $('ident-err').textContent = data.error || ('HTTP ' + r.status); return; }
+      $('new-callsign').value = '';
+      const text = [
+        'RogerThat identity key',
+        '=====================',
+        '',
+        'Service:      https://rogerthat.chat',
+        'Callsign:     ' + data.callsign,
+        'Identity key: ' + data.identity_key,
+        'Created:      ' + new Date().toISOString(),
+        '',
+        '⚠ Save this key. It is shown ONLY once. Use it as Bearer auth',
+        '  when joining channels with require_identity=true.',
+      ].join('\\n');
+      showReveal('rogerthat-identity-' + data.callsign + '.txt', text);
+      loadAccount();
+    } catch (e) {
+      $('ident-err').textContent = 'Error: ' + e.message;
+    }
+  });
+  async function revokeIdentity(cs) {
+    if (!confirm('Revoke identity "' + cs + '"? Any channels you joined with it will keep working until you leave, but you cannot use the key to join again.')) return;
+    try {
+      const r = await fetch('/api/account/identities/' + encodeURIComponent(cs), {
+        method: 'DELETE',
+        headers: { Authorization: 'Bearer ' + session },
+      });
+      if (!r.ok) { $('ident-err').textContent = 'Failed: HTTP ' + r.status; return; }
+      loadAccount();
+    } catch (e) {
+      $('ident-err').textContent = 'Error: ' + e.message;
+    }
+  }
+  // ─── Pair-phone modal ──────────────────────────────────────────────────
+  function openPairModal(channelId, prefill) {
+    $('pair-channel').value = channelId;
+    // Auto-fill token from this-session cache (set on channel creation), or
+    // accept an explicit prefill that wins over the cache.
+    let tok = '';
+    try { tok = sessionStorage.getItem('rogerthat_chtok_' + channelId) || ''; } catch {}
+    if (prefill && prefill.token) tok = prefill.token;
+    $('pair-token').value = tok;
+    $('pair-key').value = (prefill && prefill.key) || '';
+    $('pair-cs').value = (prefill && prefill.cs) || '';
+    $('pair-pw').value = (prefill && prefill.pw) || '';
+    $('pair-output').hidden = true;
+    $('pair-err').hidden = true;
+    $('pair-status').textContent = '';
+    $('pair-modal').hidden = false;
+    // Focus the first empty field so the user can paste immediately
+    setTimeout(() => {
+      const first = !$('pair-token').value
+        ? $('pair-token')
+        : (!$('pair-key').value && !$('pair-cs').value ? $('pair-key') : null);
+      if (first) first.focus();
+    }, 30);
+  }
+  function closePairModal() { $('pair-modal').hidden = true; }
+  $('pair-close').addEventListener('click', closePairModal);
+  $('pair-modal').addEventListener('click', (e) => {
+    // Click outside the panel (on the backdrop) closes the modal.
+    if (e.target === $('pair-modal')) closePairModal();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !$('pair-modal').hidden) closePairModal();
+  });
+  $('pair-gen').addEventListener('click', () => {
+    const channelId = $('pair-channel').value;
+    const t = $('pair-token').value.trim();
+    const k = $('pair-key').value.trim();
+    const cs = $('pair-cs').value.trim();
+    const pw = $('pair-pw').value;
+    const err = $('pair-err');
+    err.hidden = true; err.textContent = '';
+    if (!t) { err.hidden = false; err.textContent = 'Channel token is required.'; return; }
+    if (!k && !cs) { err.hidden = false; err.textContent = 'Provide either an identity_key or a callsign.'; return; }
+    const params = new URLSearchParams();
+    params.set('t', t);
+    if (k) params.set('k', k);
+    if (cs) params.set('cs', cs);
+    if (pw) params.set('p', pw);
+    const url = location.origin + '/remote/' + encodeURIComponent(channelId) + '#' + params.toString();
+    $('pair-url').textContent = url;
+    $('pair-open').setAttribute('href', url);
+    $('pair-output').hidden = false;
+    // Render QR client-side. If the qrcode lib failed to load (offline / CDN
+    // blocked), fall back to showing just the URL — the page is still useful.
+    const qr = $('pair-qr');
+    qr.innerHTML = 'rendering…';
+    if (typeof window.QRCode !== 'undefined' && typeof window.QRCode.toString === 'function') {
+      window.QRCode.toString(url, { type: 'svg', errorCorrectionLevel: 'M', margin: 1, width: 256 }, (e, svg) => {
+        if (e) { qr.textContent = 'QR render failed: ' + (e.message || e); return; }
+        qr.innerHTML = svg;
+      });
+    } else {
+      qr.textContent = 'QR library failed to load. The URL above carries the same data — copy it to your phone manually.';
+    }
+  });
+  $('pair-copy').addEventListener('click', () => {
+    const url = $('pair-url').textContent;
+    if (!url) return;
+    const done = () => {
+      const b = $('pair-copy');
+      const prev = b.textContent;
+      b.textContent = '✓ Copied';
+      setTimeout(() => { b.textContent = prev; }, 1500);
+    };
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(url).then(done).catch(() => {
+        $('pair-status').textContent = 'copy failed — select the URL and copy manually';
+      });
+    } else {
+      $('pair-status').textContent = 'clipboard API unavailable — select the URL and copy manually';
+    }
+  });
+  loadAccount();
+</script>
+</body>
+</html>`;
+}