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/remote-ui.js ADDED Viewed

@@ -0,0 +1,850 @@
+// Mobile-first chat UI served at /remote/<channel_id>. Designed so a phone can
+// drive an agent that's running elsewhere (e.g. Claude Code on the user's PC,
+// already joined to the same channel and looping on `wait`). Credentials come
+// in via the URL fragment — never hit the server, never end up in logs.
+//
+// URL shape:
+//   /remote/<channel_id>#t=<channel_token>&k=<identity_key>&cs=<callsign>&p=<owner_password>&n=<display_name>
+//   - t: channel token. Required for non-band channels. Bands use the literal 'public'.
+//   - k: identity_key. Optional. If present, callsign is derived from it (k wins over cs).
+//   - cs: callsign. Used when the channel doesn't require identity.
+//   - p: owner_password. Optional. When set, the phone's join is marked human-authorized
+//        and the channel's trusted-mode instructions take effect for it.
+//   - n: display name (cosmetic; falls back to callsign).
+//
+// If creds are missing or invalid, the page shows a paste-it form instead of
+// auto-joining. The chat itself polls /api/channels/<id>/wait in a loop.
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, (ch) => {
+        switch (ch) {
+            case "&": return "&amp;";
+            case "<": return "&lt;";
+            case ">": return "&gt;";
+            case '"': return "&quot;";
+            case "'": return "&#39;";
+            default: return ch;
+        }
+    });
+}
+export function remoteHtml(channelId) {
+    const safeId = escapeHtml(channelId);
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
+<meta name="theme-color" content="#1a1a1a" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+<title>rogerthat / ${safeId}</title>
+<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; -webkit-tap-highlight-color: transparent; }
+  html, body { height: 100%; margin: 0; }
+  body {
+    font-family: ui-monospace, Menlo, Consolas, monospace;
+    background: var(--bg); color: var(--ink); line-height: 1.45;
+    display: flex; flex-direction: column;
+    overscroll-behavior: contain;
+    -webkit-text-size-adjust: 100%;
+  }
+  header {
+    background: var(--ink); color: var(--bg);
+    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 10px; flex-shrink: 0;
+  }
+  header .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
+  header svg { width: 22px; height: 22px; flex-shrink: 0; }
+  header .title { display: flex; flex-direction: column; min-width: 0; }
+  header .title strong { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  header .title small { font-size: 11px; color: #c9b994; }
+  header .status {
+    font-size: 11px; padding: 3px 8px; border-radius: 10px;
+    background: rgba(255,255,255,0.08); color: #c9b994;
+    white-space: nowrap; flex-shrink: 0;
+  }
+  header .status.ok { background: rgba(45,138,62,0.2); color: #7dd590; }
+  header .status.err { background: rgba(214,84,31,0.2); color: #f0a584; }
+  /* Setup view — shown when URL fragment is missing/invalid */
+  #setup { padding: 24px 16px; max-width: 480px; margin: 0 auto; width: 100%; }
+  #setup h2 { font-size: 18px; margin: 0 0 8px; }
+  #setup p { font-size: 13px; color: var(--dim); margin: 0 0 16px; }
+  #setup label { display: block; font-size: 12px; color: var(--dim); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.06em; }
+  #setup input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: white; font-family: inherit; font-size: 15px; }
+  #setup .err { color: var(--warn); font-size: 13px; margin: 8px 0; }
+  #setup button {
+    width: 100%; padding: 14px; margin-top: 16px;
+    background: var(--warn); color: white; border: none;
+    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
+  }
+  /* Chat view */
+  #log {
+    flex: 1; overflow-y: auto; overflow-x: hidden;
+    padding: 14px 12px; scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+  }
+  .msg { margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
+  .msg.me { align-items: flex-end; }
+  .msg.them { align-items: flex-start; }
+  .msg.sys { align-items: center; }
+  .msg .who {
+    font-size: 10px; color: var(--dim); text-transform: uppercase;
+    letter-spacing: 0.06em; padding: 0 6px;
+  }
+  .msg .bubble {
+    max-width: 86%; padding: 9px 13px; border-radius: 14px;
+    word-wrap: break-word; overflow-wrap: anywhere;
+    background: var(--paper); border: 1px solid var(--line);
+    font-size: 15px; line-height: 1.4;
+    white-space: pre-wrap;
+  }
+  .msg.me .bubble { background: var(--warn); color: white; border-color: var(--warn); }
+  .msg.them .bubble.broadcast { border-style: dashed; }
+  .msg.sys .bubble {
+    background: transparent; border: none; padding: 4px 8px;
+    color: var(--dim); font-size: 12px; font-style: italic;
+  }
+  .msg.sys.error .bubble { color: var(--warn); }
+  .msg .when { font-size: 10px; color: var(--dim); padding: 0 6px; }
+  .msg .chips {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    margin-top: 4px; padding: 0 4px;
+  }
+  .msg .chip {
+    font-family: inherit; font-size: 13px;
+    padding: 6px 12px;
+    background: var(--paper); color: var(--ink);
+    border: 1px solid var(--warn); border-radius: 14px;
+    cursor: pointer; touch-action: manipulation;
+    transition: background 0.1s;
+  }
+  .msg .chip:active { background: var(--warn); color: white; }
+  .msg .attachments {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    margin-top: 4px; padding: 0 4px;
+  }
+  .msg .attachments img {
+    max-width: min(220px, 75vw); max-height: 220px;
+    border: 1px solid var(--line); border-radius: 6px;
+    cursor: zoom-in; object-fit: contain;
+    background: var(--paper);
+  }
+  .msg .attachments .pdf-link {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 8px 12px; font-size: 13px;
+    background: var(--paper); color: var(--ink);
+    border: 1px solid var(--line); border-radius: 6px;
+    text-decoration: none;
+  }
+  .msg .attachments .pdf-link::before { content: '📄'; font-size: 18px; }
+  .msg .attachments .pdf-link:hover { background: var(--bg); }
+  /* Composer paperclip button + file preview chips. */
+  .paperclip {
+    display: flex; align-items: center; justify-content: center;
+    width: 36px; height: 36px; font-size: 20px;
+    background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
+    cursor: pointer; flex-shrink: 0;
+    align-self: flex-end;
+  }
+  .paperclip:hover { background: var(--bg); }
+  #att-preview {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    padding: 6px 8px 4px;
+  }
+  #att-preview .att-chip {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 4px 8px; font-size: 12px;
+    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
+  }
+  #att-preview .att-chip .x {
+    cursor: pointer; color: var(--dim); font-weight: 700;
+    padding: 0 2px;
+  }
+  #att-preview .att-chip .x:hover { color: var(--warn); }
+  footer {
+    flex-shrink: 0; background: var(--paper);
+    border-top: 1px solid var(--line);
+    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
+  }
+  .composer { display: flex; gap: 8px; align-items: flex-end; }
+  .target-pill {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 10px; font-size: 12px; color: var(--dim);
+    background: var(--bg); border: 1px solid var(--line); border-bottom: none;
+    border-radius: 6px 6px 0 0; margin: 0 8px -1px; width: fit-content;
+  }
+  .target-pill select {
+    border: none; background: transparent; font-family: inherit;
+    font-size: 12px; color: var(--ink); padding: 0;
+  }
+  textarea#input {
+    flex: 1; min-height: 44px; max-height: 140px;
+    padding: 11px 13px; border: 1px solid var(--line); background: white;
+    font-family: inherit; font-size: 16px; /* 16px stops iOS zoom-on-focus */
+    line-height: 1.4; resize: none; border-radius: 8px;
+  }
+  textarea#input:focus { outline: 2px solid var(--warn); outline-offset: -1px; }
+  button#send {
+    flex-shrink: 0; padding: 11px 18px;
+    background: var(--warn); color: white; border: none;
+    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
+    border-radius: 8px; min-height: 44px;
+  }
+  button#send:disabled { opacity: 0.4; cursor: not-allowed; }
+</style>
+</head>
+<body>
+<header>
+  <div class="left">
+    <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>
+    <div class="title">
+      <strong id="hdr-name">${safeId}</strong>
+      <small id="hdr-meta">remote channel</small>
+    </div>
+  </div>
+  <div id="status" class="status">connecting…</div>
+</header>
+<div id="setup" hidden>
+  <h2>Connect</h2>
+  <!-- "Quick" panel: shown when t + k/cs came in via the URL fragment.
+       The only thing the human has to type is the owner_password (proves they
+       were given it out-of-band by the agent, vs just inheriting a leaked URL). -->
+  <div id="setup-quick" hidden>
+    <p>Auto-filled from the pair link. Enter the password the agent gave you to join as <strong>human-authorized</strong>, or skip to connect as a regular peer.</p>
+    <p id="setup-quick-summary" style="font-size:12px;color:var(--dim);margin:0 0 16px"></p>
+    <p id="setup-err" class="err" hidden></p>
+    <label for="setup-pw">Owner password (from the agent on your PC)</label>
+    <input id="setup-pw" type="password" autocomplete="off" placeholder="paste / type the password" />
+    <button id="setup-go">Connect — human-authorized</button>
+    <button id="setup-skip" style="background:transparent;color:var(--dim);border:1px solid var(--line);margin-top:8px">Skip — connect without password</button>
+    <details style="margin-top:18px">
+      <summary style="cursor:pointer;font-size:12px;color:var(--dim)">advanced — edit token / identity</summary>
+      <div id="setup-advanced-fields" style="margin-top:12px"></div>
+    </details>
+  </div>
+  <!-- "Full" panel: shown when nothing came in via the URL fragment. -->
+  <div id="setup-full" hidden>
+    <p>Open this page from a QR scan or the pair link and the credentials fill in automatically (the secret lives in the URL fragment, never on the server). Otherwise paste them below.</p>
+    <p id="setup-err-full" class="err" hidden></p>
+    <label for="setup-token">Channel token</label>
+    <input id="setup-token" type="password" autocomplete="off" placeholder="from /api/channels (Bearer …) — or 'public' for bands" />
+    <label for="setup-cs">Callsign (or paste an identity_key instead)</label>
+    <input id="setup-cs" type="text" autocomplete="off" placeholder="phone" />
+    <label for="setup-key">Identity key (optional — required if channel has require_identity)</label>
+    <input id="setup-key" type="password" autocomplete="off" placeholder="paste identity_key (callsign comes from this)" />
+    <label for="setup-pw-full">Owner password (optional — flips your session to human-authorized on trusted channels)</label>
+    <input id="setup-pw-full" type="password" autocomplete="off" placeholder="(optional)" />
+    <button id="setup-go-full">Connect</button>
+  </div>
+</div>
+<main id="log" hidden></main>
+<footer id="composer-wrap" hidden>
+  <div class="target-pill">
+    →&nbsp;
+    <select id="target">
+      <option value="all">all</option>
+    </select>
+  </div>
+  <div id="att-preview" hidden></div>
+  <div class="composer">
+    <label class="paperclip" for="file-input" title="Attach image or PDF (≤380KB)">📎</label>
+    <input id="file-input" type="file" accept="image/jpeg,image/png,image/webp,image/gif,application/pdf" multiple hidden />
+    <textarea id="input" rows="1" placeholder="Send…" autocomplete="off" autocapitalize="sentences"></textarea>
+    <button id="send" type="button">Send</button>
+  </div>
+</footer>
+<script>
+(function(){
+  var channelId = ${JSON.stringify(channelId)};
+  // ── State ──────────────────────────────────────────────────────────────
+  var token = '';          // channel token (Bearer)
+  var identityKey = '';    // optional identity_key
+  var ownerPassword = '';  // optional owner_password (flips trust posture to authorized)
+  var callsign = '';       // resolved after /join
+  var displayName = '';    // cosmetic
+  var sessionId = '';      // X-Session-Id, from /join
+  var lastSeen = 0;        // last delivered msg id (for ?since=)
+  var rosterCache = [];    // last roster snapshot
+  var stopped = false;     // set on fatal error
+  var waiting = false;     // a /wait is in-flight
+  // ── Element refs ───────────────────────────────────────────────────────
+  var $ = function(id){ return document.getElementById(id); };
+  var elSetup = $('setup');
+  var elLog = $('log');
+  var elComposer = $('composer-wrap');
+  var elInput = $('input');
+  var elSend = $('send');
+  var elTarget = $('target');
+  var elStatus = $('status');
+  var elHdrName = $('hdr-name');
+  var elHdrMeta = $('hdr-meta');
+  var elFileInput = $('file-input');
+  var elAttPreview = $('att-preview');
+  // Pending attachments waiting to be sent with the next /send.
+  // Each: { mime, data_base64, filename, size_b64 }
+  var pendingAttachments = [];
+  var ATT_MAX_BYTES_B64 = 512 * 1024; // 512KB total (server enforces too)
+  var ATT_MAX_COUNT = 4;
+  var ATT_ALLOWED = {
+    'image/jpeg': 1, 'image/png': 1, 'image/webp': 1,
+    'image/gif': 1, 'application/pdf': 1,
+  };
+  // ── Fragment parser — URL hash carries the secret bits ─────────────────
+  function parseFragment(){
+    var hash = (location.hash || '').replace(/^#/, '');
+    if (!hash) return {};
+    var out = {};
+    var parts = hash.split('&');
+    for (var i = 0; i < parts.length; i++){
+      var kv = parts[i].split('=');
+      if (kv.length === 2){
+        try { out[decodeURIComponent(kv[0])] = decodeURIComponent(kv[1]); }
+        catch (e) {}
+      }
+    }
+    return out;
+  }
+  // ── HTTP helpers ───────────────────────────────────────────────────────
+  function authHeaders(){
+    var h = { 'Content-Type': 'application/json' };
+    if (token) h['Authorization'] = 'Bearer ' + token;
+    if (sessionId) h['X-Session-Id'] = sessionId;
+    return h;
+  }
+  function api(method, path, body, signal){
+    return fetch(path, {
+      method: method,
+      headers: authHeaders(),
+      body: body ? JSON.stringify(body) : undefined,
+      signal: signal,
+    }).then(function(r){
+      return r.text().then(function(text){
+        var data = null;
+        try { data = text ? JSON.parse(text) : null; } catch (e) {}
+        return { ok: r.ok, status: r.status, data: data, text: text };
+      });
+    });
+  }
+  // ── UI ─────────────────────────────────────────────────────────────────
+  function setStatus(s, kind){
+    elStatus.textContent = s;
+    elStatus.className = 'status' + (kind ? ' ' + kind : '');
+  }
+  function appendSys(text, isError){
+    var d = document.createElement('div');
+    d.className = 'msg sys' + (isError ? ' error' : '');
+    var b = document.createElement('div'); b.className = 'bubble'; b.textContent = text;
+    d.appendChild(b);
+    elLog.appendChild(d);
+    scrollDown();
+  }
+  function appendMsg(m){
+    var mine = m.from === callsign;
+    var d = document.createElement('div');
+    d.className = 'msg ' + (mine ? 'me' : 'them');
+    var who = document.createElement('div'); who.className = 'who';
+    who.textContent = mine
+      ? 'you' + (m.to === 'all' ? ' → all' : ' → ' + m.to)
+      : m.from + (m.to === 'all' ? '' : ' → you');
+    var b = document.createElement('div');
+    b.className = 'bubble' + (m.to === 'all' && !mine ? ' broadcast' : '');
+    // Try to auto-render image URLs in the body; fall back to plain text.
+    var imgFrag = m.text ? autoRenderImageUrls(m.text) : null;
+    if (imgFrag) b.appendChild(imgFrag);
+    else b.textContent = m.text || '';
+    var when = document.createElement('div'); when.className = 'when';
+    when.textContent = fmtTime(m.at);
+    d.appendChild(who); d.appendChild(b); d.appendChild(when);
+    // Inline attachments (base64 carried by the message itself).
+    if (m.attachments && m.attachments.length){
+      var attBar = document.createElement('div');
+      attBar.className = 'attachments';
+      for (var ai = 0; ai < m.attachments.length; ai++){
+        var att = m.attachments[ai];
+        if (!att || !att.mime || !att.data_base64) continue;
+        var dataUrl = 'data:' + att.mime + ';base64,' + att.data_base64;
+        if (att.mime.indexOf('image/') === 0){
+          var img = document.createElement('img');
+          img.src = dataUrl;
+          img.alt = att.filename || att.mime;
+          img.addEventListener('click', (function(url){
+            return function(){ window.open(url, '_blank', 'noopener'); };
+          })(dataUrl));
+          attBar.appendChild(img);
+        } else if (att.mime === 'application/pdf'){
+          var a = document.createElement('a');
+          a.className = 'pdf-link';
+          a.href = dataUrl;
+          a.target = '_blank';
+          a.rel = 'noopener';
+          a.download = att.filename || 'attachment.pdf';
+          a.textContent = att.filename || 'attachment.pdf';
+          attBar.appendChild(a);
+        }
+      }
+      d.appendChild(attBar);
+    }
+    // Suggested replies → render as tappable chips below the bubble (only on
+    // incoming msgs; if I sent it, no point clicking my own suggestion).
+    if (!mine && m.suggested_replies && m.suggested_replies.length){
+      var chipBar = document.createElement('div');
+      chipBar.className = 'chips';
+      for (var i = 0; i < m.suggested_replies.length; i++){
+        var chip = document.createElement('button');
+        chip.type = 'button';
+        chip.className = 'chip';
+        chip.textContent = m.suggested_replies[i];
+        // Capture in closure-friendly way for older mobile JS engines
+        chip.addEventListener('click', (function(text, fromCallsign){
+          return function(){
+            elInput.value = text;
+            elTarget.value = fromCallsign; // reply to whoever sent the suggestion
+            autosize();
+            send();
+          };
+        })(m.suggested_replies[i], m.from));
+        chipBar.appendChild(chip);
+      }
+      d.appendChild(chipBar);
+    }
+    elLog.appendChild(d);
+    scrollDown();
+  }
+  function fmtTime(t){
+    if (!t) return '';
+    var d = new Date(t);
+    var h = String(d.getHours()).padStart(2, '0');
+    var m = String(d.getMinutes()).padStart(2, '0');
+    return h + ':' + m;
+  }
+  function scrollDown(){
+    requestAnimationFrame(function(){ elLog.scrollTop = elLog.scrollHeight; });
+  }
+  function updateRoster(roster){
+    rosterCache = roster || [];
+    // Build the target dropdown: 'all' + each peer (excluding self)
+    var current = elTarget.value;
+    elTarget.innerHTML = '<option value="all">all</option>';
+    for (var i = 0; i < rosterCache.length; i++){
+      var cs = rosterCache[i];
+      if (cs === callsign) continue;
+      var opt = document.createElement('option');
+      opt.value = cs; opt.textContent = '@' + cs;
+      elTarget.appendChild(opt);
+    }
+    // Preserve selection if still valid
+    var stillValid = current === 'all' || rosterCache.indexOf(current) !== -1;
+    if (stillValid) elTarget.value = current;
+    // Update header meta
+    var peers = rosterCache.filter(function(c){ return c !== callsign; });
+    elHdrMeta.textContent = peers.length
+      ? peers.length + ' peer' + (peers.length === 1 ? '' : 's') + ': ' + peers.slice(0, 3).join(', ') + (peers.length > 3 ? '…' : '')
+      : 'waiting for peers';
+  }
+  // ── Setup view ─────────────────────────────────────────────────────────
+  // Two flavours:
+  //   1. "Quick" — fragment supplied t + k/cs; only password missing. Tight UI:
+  //      one input (the password), Connect / Skip buttons. This is the path the
+  //      bootstrap-MCP flow always lands on.
+  //   2. "Full" — nothing supplied; user pastes everything by hand. Rare.
+  function showSetup(prefilled){
+    elSetup.hidden = false;
+    elLog.hidden = true;
+    elComposer.hidden = true;
+    var hasQuickCreds = !!(prefilled && prefilled.t && (prefilled.k || prefilled.cs));
+    if (hasQuickCreds){
+      // Stash so Connect/Skip can use them.
+      token = prefilled.t;
+      identityKey = prefilled.k || '';
+      callsign = prefilled.cs || '';
+      displayName = prefilled.n || prefilled.cs || '';
+      $('setup-quick').hidden = false;
+      $('setup-full').hidden = true;
+      $('setup-quick-summary').textContent =
+        'channel ' + channelId + ' · joining as ' + (identityKey ? 'identity ' + (displayName || '(from key)') : '@' + (callsign || 'phone'));
+      // Pre-focus the password input so the user can start typing immediately.
+      setTimeout(function(){ $('setup-pw').focus(); }, 30);
+      $('setup-go').onclick = function(){ submitQuick(true); };
+      $('setup-skip').onclick = function(){
+        if (!confirm('Connect without a password? Your session will show up to the agent as "trusted-no-password" — useful only if your channel does not have an owner_password set.')) return;
+        submitQuick(false);
+      };
+      $('setup-pw').addEventListener('keydown', function(e){
+        if (e.key === 'Enter'){ e.preventDefault(); submitQuick(true); }
+      });
+    } else {
+      $('setup-quick').hidden = true;
+      $('setup-full').hidden = false;
+      if (prefilled){
+        $('setup-token').value = prefilled.t || '';
+        $('setup-cs').value = prefilled.cs || '';
+        $('setup-key').value = prefilled.k || '';
+        $('setup-pw-full').value = prefilled.p || '';
+      }
+      $('setup-go-full').onclick = function(){
+        var t = $('setup-token').value.trim();
+        var cs = $('setup-cs').value.trim();
+        var k = $('setup-key').value.trim();
+        var pw = $('setup-pw-full').value;
+        if (!t){
+          var err = $('setup-err-full'); err.hidden = false; err.textContent = 'channel token required';
+          return;
+        }
+        if (!k && !cs){
+          var err2 = $('setup-err-full'); err2.hidden = false; err2.textContent = 'either callsign or identity_key required';
+          return;
+        }
+        token = t; callsign = cs; identityKey = k; ownerPassword = pw; displayName = cs || '';
+        bootChat();
+      };
+    }
+  }
+  function submitQuick(usePassword){
+    var pw = $('setup-pw').value;
+    if (usePassword && !pw){
+      var err = $('setup-err'); err.hidden = false; err.textContent = 'password required (or click "Skip" to connect without)';
+      return;
+    }
+    ownerPassword = usePassword ? pw : '';
+    bootChat();
+  }
+  function showChat(){
+    elSetup.hidden = true;
+    elLog.hidden = false;
+    elComposer.hidden = false;
+  }
+  // ── Join + main loop ──────────────────────────────────────────────────
+  var trustPosture = '';
+  function bootChat(){
+    showChat();
+    setStatus('joining…');
+    joinChannel().then(function(){
+      setStatus('connected', 'ok');
+      var note = trustPosture === 'trusted-authorized'
+        ? ' (trusted + human-authorized)'
+        : trustPosture === 'trusted-no-password'
+          ? ' (trusted — no password presented)'
+          : '';
+      appendSys('joined as @' + callsign + note);
+      loopWait();
+    }).catch(function(e){
+      setStatus('error', 'err');
+      appendSys('join failed: ' + (e && e.message ? e.message : e), true);
+    });
+  }
+  function joinChannel(){
+    var body = {};
+    if (identityKey) body.identity_key = identityKey;
+    else body.callsign = callsign;
+    if (ownerPassword) body.owner_password = ownerPassword;
+    return api('POST', '/api/channels/' + encodeURIComponent(channelId) + '/join', body)
+      .then(function(r){
+        if (!r.ok){
+          var msg = (r.data && r.data.error) || ('HTTP ' + r.status);
+          throw new Error(msg);
+        }
+        sessionId = r.data.session_id;
+        callsign = r.data.callsign;
+        trustPosture = r.data.trust_posture || '';
+        displayName = displayName || callsign;
+        elHdrName.textContent = '@' + callsign;
+        updateRoster(r.data.roster || []);
+        // Seed history (so we show what was said before we arrived).
+        var hist = r.data.history || [];
+        for (var i = 0; i < hist.length; i++){
+          appendMsg(hist[i]);
+          if (hist[i].id > lastSeen) lastSeen = hist[i].id;
+        }
+      });
+  }
+  function loopWait(){
+    if (stopped || waiting) return;
+    waiting = true;
+    // Long-poll: 50s default. /wait gives up to 5min ceiling, but 50s keeps
+    // mobile networks happy (LB timeouts ~60s, app-switch resumes faster).
+    var url = '/api/channels/' + encodeURIComponent(channelId) + '/wait?timeout=50';
+    if (lastSeen > 0) url += '&since=' + encodeURIComponent(lastSeen);
+    api('GET', url).then(function(r){
+      waiting = false;
+      if (!r.ok){
+        if (r.status === 410){
+          // session expired — rejoin
+          setStatus('reconnecting…');
+          appendSys('session expired, reconnecting…');
+          sessionId = '';
+          return joinChannel().then(function(){
+            setStatus('connected', 'ok');
+            loopWait();
+          });
+        }
+        setStatus('error', 'err');
+        appendSys('wait failed: ' + ((r.data && r.data.error) || ('HTTP ' + r.status)), true);
+        // Retry after a small backoff so transient errors don't kill the loop.
+        return setTimeout(loopWait, 3000);
+      }
+      var msgs = (r.data && r.data.messages) || [];
+      for (var i = 0; i < msgs.length; i++){
+        appendMsg(msgs[i]);
+        if (msgs[i].id > lastSeen) lastSeen = msgs[i].id;
+      }
+      var ro = (r.data && r.data.roster) || [];
+      if (ro.length) updateRoster(ro);
+      setStatus('connected', 'ok');
+      loopWait();
+    }).catch(function(e){
+      waiting = false;
+      if (stopped) return;
+      setStatus('reconnecting…', 'err');
+      setTimeout(loopWait, 2000);
+    });
+  }
+  // ── Attachments ────────────────────────────────────────────────────────
+  // Read a File → { mime, data_base64, filename, size_b64 } via FileReader.
+  // base64 = the part after 'base64,' in the data URL — we strip the prefix.
+  function readFileAsAttachment(file){
+    return new Promise(function(resolve, reject){
+      var fr = new FileReader();
+      fr.onload = function(){
+        var url = String(fr.result || '');
+        var idx = url.indexOf('base64,');
+        if (idx === -1) return reject(new Error('not base64'));
+        var b64 = url.substr(idx + 7);
+        resolve({ mime: file.type, data_base64: b64, filename: file.name, size_b64: b64.length });
+      };
+      fr.onerror = function(){ reject(fr.error || new Error('FileReader failed')); };
+      fr.readAsDataURL(file);
+    });
+  }
+  function renderAttPreview(){
+    if (pendingAttachments.length === 0){
+      elAttPreview.hidden = true; elAttPreview.innerHTML = '';
+      return;
+    }
+    elAttPreview.hidden = false;
+    elAttPreview.innerHTML = '';
+    pendingAttachments.forEach(function(att, i){
+      var chip = document.createElement('span');
+      chip.className = 'att-chip';
+      var label = document.createElement('span');
+      label.textContent = (att.filename || att.mime) + ' (' + Math.round(att.size_b64 / 1024) + ' KB)';
+      var x = document.createElement('span');
+      x.className = 'x'; x.textContent = '✕';
+      x.title = 'Remove'; x.setAttribute('role', 'button');
+      x.addEventListener('click', function(){
+        pendingAttachments.splice(i, 1);
+        renderAttPreview();
+      });
+      chip.appendChild(label); chip.appendChild(x);
+      elAttPreview.appendChild(chip);
+    });
+  }
+  elFileInput.addEventListener('change', function(){
+    var files = Array.from(elFileInput.files || []);
+    elFileInput.value = '';
+    var promises = files.map(function(f){
+      if (!ATT_ALLOWED[f.type]){
+        appendSys('skipped "' + f.name + '": type ' + (f.type || 'unknown') + ' not allowed', true);
+        return null;
+      }
+      return readFileAsAttachment(f);
+    }).filter(function(p){ return p; });
+    Promise.all(promises).then(function(atts){
+      atts.forEach(function(att){
+        // Per-message total cap, not per-file
+        var total = pendingAttachments.reduce(function(s,a){return s+a.size_b64;}, 0);
+        if (pendingAttachments.length >= ATT_MAX_COUNT){
+          appendSys('skipped "' + att.filename + '": max ' + ATT_MAX_COUNT + ' attachments per message. Host bigger files elsewhere and paste the URL.', true);
+          return;
+        }
+        if (total + att.size_b64 > ATT_MAX_BYTES_B64){
+          appendSys('skipped "' + att.filename + '" (' + Math.round(att.size_b64 / 1024) + ' KB): would exceed the ' + Math.round(ATT_MAX_BYTES_B64 / 1024) + ' KB cap. Host it elsewhere (iCloud / Drive / Dropbox) and paste the share link instead.', true);
+          return;
+        }
+        pendingAttachments.push(att);
+      });
+      renderAttPreview();
+    }).catch(function(e){
+      appendSys('attachment read failed: ' + (e && e.message ? e.message : e), true);
+    });
+  });
+  // Auto-detect image URLs in incoming message text and render as inline img.
+  // Returns a DocumentFragment with text + img elements interleaved, or null
+  // if no image URLs found (caller falls back to textContent).
+  function autoRenderImageUrls(text){
+    var re = /https?:\\/\\/\\S+\\.(?:jpg|jpeg|png|webp|gif)(?:\\?\\S*)?/gi;
+    if (!re.test(text)) return null;
+    re.lastIndex = 0;
+    var frag = document.createDocumentFragment();
+    var lastIdx = 0;
+    var m;
+    while ((m = re.exec(text)) !== null){
+      if (m.index > lastIdx){
+        frag.appendChild(document.createTextNode(text.substring(lastIdx, m.index)));
+      }
+      var img = document.createElement('img');
+      img.src = m[0];
+      img.alt = m[0];
+      img.referrerPolicy = 'no-referrer';
+      img.style.maxWidth = 'min(220px, 75vw)';
+      img.style.maxHeight = '220px';
+      img.style.display = 'block';
+      img.style.marginTop = '4px';
+      img.style.border = '1px solid var(--line)';
+      img.style.borderRadius = '6px';
+      frag.appendChild(img);
+      lastIdx = m.index + m[0].length;
+    }
+    if (lastIdx < text.length){
+      frag.appendChild(document.createTextNode(text.substring(lastIdx)));
+    }
+    return frag;
+  }
+  // ── Send ───────────────────────────────────────────────────────────────
+  function send(){
+    var text = elInput.value.replace(/\\s+$/, '');
+    var hasAtts = pendingAttachments.length > 0;
+    if ((!text && !hasAtts) || !sessionId) return;
+    var to = elTarget.value || 'all';
+    elSend.disabled = true;
+    // Snapshot attachments for the optimistic render + the POST body
+    var attsToSend = pendingAttachments.slice();
+    pendingAttachments = [];
+    renderAttPreview();
+    var optimistic = { id: -Date.now(), from: callsign, to: to, text: text, at: Date.now() };
+    if (attsToSend.length > 0){
+      optimistic.attachments = attsToSend.map(function(a){
+        return { mime: a.mime, data_base64: a.data_base64, filename: a.filename };
+      });
+    }
+    appendMsg(optimistic);
+    elInput.value = '';
+    autosize();
+    var body = { to: to, message: text };
+    if (attsToSend.length > 0){
+      body.attachments = attsToSend.map(function(a){
+        return { mime: a.mime, data_base64: a.data_base64, filename: a.filename };
+      });
+    }
+    api('POST', '/api/channels/' + encodeURIComponent(channelId) + '/send', body
+    ).then(function(r){
+      elSend.disabled = false;
+      if (!r.ok){
+        var msg = (r.data && r.data.error) || ('HTTP ' + r.status);
+        appendSys('send failed: ' + msg, true);
+      }
+    }).catch(function(e){
+      elSend.disabled = false;
+      appendSys('send failed: ' + (e && e.message ? e.message : e), true);
+    });
+  }
+  function autosize(){
+    elInput.style.height = 'auto';
+    elInput.style.height = Math.min(elInput.scrollHeight, 140) + 'px';
+  }
+  elSend.addEventListener('click', send);
+  elInput.addEventListener('input', autosize);
+  elInput.addEventListener('keydown', function(e){
+    // Enter sends (no shift). Shift+Enter inserts newline. iOS soft keyboards
+    // send a 'Go' / 'Enter' that maps to plain Enter.
+    if (e.key === 'Enter' && !e.shiftKey){
+      e.preventDefault();
+      send();
+    }
+  });
+  // ── Leave cleanly on unload — best-effort, doesn't block ──────────────
+  window.addEventListener('pagehide', function(){
+    if (!sessionId) return;
+    try {
+      navigator.sendBeacon &&
+        navigator.sendBeacon(
+          '/api/channels/' + encodeURIComponent(channelId) + '/leave',
+          new Blob([JSON.stringify({})], { type: 'application/json' })
+        );
+    } catch (e) {}
+  });
+  // ── Boot ──────────────────────────────────────────────────────────────
+  var frag = parseFragment();
+  // Strip the fragment from the URL bar so the secret doesn't sit there
+  // for shoulder-surfers / screenshots. The values are already in memory.
+  if (location.hash){
+    try { history.replaceState(null, '', location.pathname + location.search); }
+    catch (e) {}
+  }
+  // Auto-boot only when the URL fragment already carries the password (legacy
+  // links pre-2026-05-21). Default path: pop the setup screen so the human has
+  // to type the password — that's what makes "trusted-authorized" actually mean
+  // a human acted, not just "this URL ran in a browser somewhere".
+  if (frag.t && (frag.k || frag.cs) && frag.p){
+    token = frag.t;
+    identityKey = frag.k || '';
+    callsign = frag.cs || '';
+    ownerPassword = frag.p;
+    displayName = frag.n || frag.cs || '';
+    elHdrName.textContent = displayName ? ('@' + displayName) : safeChannelLabel();
+    bootChat();
+  } else {
+    setStatus('needs password');
+    showSetup(frag);
+  }
+  function safeChannelLabel(){ return ${JSON.stringify(channelId)}; }
+})();
+</script>
+</body>
+</html>`;
+}