@cordfuse/crosstalk 7.0.0-alpha.8 → 7.0.0-beta.1

package/src/web/auth-pages.ts

@@ -0,0 +1,160 @@
+// Setup + login web pages for crosstalk's v8 auth.
+//
+// Visual consistency with the rest of the web UI (page() in layout.ts).
+// Ported from @cordfuse/llmux v2/web/setup.ts + login.ts with the chrome
+// adapted to crosstalk's layout helper.
+
+import { page, escapeHtml, TOAST_HELPER } from './layout.js';
+
+export interface SetupPageData {
+  setupToken: string;
+  host: string;
+  alias: string;
+}
+
+export function setupPage(d: SetupPageData): string {
+  return page({
+    title: `crosstalk on ${d.host} · First-run setup`,
+    host: d.host,
+    alias: d.alias,
+    pageTitle: 'First-run setup',
+    extraCss: `
+  .centered-card{max-width:480px;margin:24px auto 0}
+  .footer-note{margin-top:18px;color:#7a7f87;font-size:11px;text-align:center;line-height:1.6}
+  .footer-note code{color:#c9d1d9;background:#0b0c10;border:1px solid #1f2329;padding:1px 6px;border-radius:3px}
+  .field .help{font-size:11px;color:#7a7f87;line-height:1.4}
+  .field .err{font-size:11px;color:#f85149;line-height:1.4}
+    `,
+    body: `
+<div class="centered-card">
+  <div class="card">
+    <h3>Set the operator passphrase</h3>
+    <p class="sub">This account becomes the engine admin. Pick a passphrase you'll remember — there's no email recovery.</p>
+    <form id="setup-form" autocomplete="off" novalidate>
+      <input type="hidden" name="setupToken" value="${escapeHtml(d.setupToken)}">
+      <div class="field">
+        <label for="su-name">Display name</label>
+        <input id="su-name" name="name" type="text" autocomplete="name" required>
+      </div>
+      <div class="field">
+        <label for="su-username">Username</label>
+        <input id="su-username" name="username" type="text" pattern="[a-z0-9_-]+" maxlength="32" required>
+        <span class="help">Lowercase letters, digits, dashes, underscores. Application-layer only — no OS user required.</span>
+      </div>
+      <div class="field">
+        <label for="su-passphrase">Passphrase</label>
+        <input id="su-passphrase" name="passphrase" type="password" minlength="8" autocomplete="new-password" required>
+        <span class="help">Minimum 8 characters.</span>
+      </div>
+      <div class="field">
+        <label for="su-passphrase2">Confirm passphrase</label>
+        <input id="su-passphrase2" name="passphrase2" type="password" minlength="8" autocomplete="new-password" required>
+        <span class="err" id="su-pp-err" hidden>Passphrases don't match.</span>
+      </div>
+      <div class="actions">
+        <button type="submit" class="primary" id="su-submit">Create admin account</button>
+      </div>
+    </form>
+  </div>
+  <p class="footer-note">The engine's HTTP API stays open on localhost without auth (matches the v7 model — operators on the host are trusted). Only the web UI gates non-public pages behind this account.</p>
+</div>`,
+    inlineScript: `${TOAST_HELPER}
+(() => {
+  const form = document.getElementById('setup-form');
+  const pp = document.getElementById('su-passphrase');
+  const pp2 = document.getElementById('su-passphrase2');
+  const err = document.getElementById('su-pp-err');
+  const submit = document.getElementById('su-submit');
+  pp2.addEventListener('input', () => { err.hidden = !pp2.value || pp.value === pp2.value; });
+  form.addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    if (pp.value !== pp2.value) { err.hidden = false; pp2.focus(); return; }
+    submit.disabled = true;
+    const fd = new FormData(form);
+    const body = { setupToken: fd.get('setupToken'), name: fd.get('name'), username: fd.get('username'), passphrase: fd.get('passphrase') };
+    try {
+      const r = await fetch('/api/setup', { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify(body) });
+      const data = await r.json().catch(() => ({}));
+      if (r.ok && data.ok) {
+        window.showToast('Setup complete — redirecting.', 'ok');
+        setTimeout(() => location.assign('/'), 600);
+      } else {
+        window.showToast(data.error || ('setup failed (' + r.status + ')'), 'err');
+        submit.disabled = false;
+      }
+    } catch (e) {
+      window.showToast('network error: ' + e.message, 'err');
+      submit.disabled = false;
+    }
+  });
+})();`,
+  });
+}
+
+export interface LoginPageData {
+  host: string;
+  alias: string;
+  returnTo?: string;
+}
+
+export function loginPage(d: LoginPageData): string {
+  const returnToSafe = d.returnTo ? escapeHtml(d.returnTo) : '/';
+  return page({
+    title: `crosstalk on ${d.host} · Sign in`,
+    host: d.host,
+    alias: d.alias,
+    pageTitle: 'Sign in',
+    extraCss: `
+  .centered-card{max-width:420px;margin:48px auto 0}
+  .footer-note{margin-top:18px;color:#7a7f87;font-size:11px;text-align:center;line-height:1.6}
+  .footer-note code{color:#c9d1d9;background:#0b0c10;border:1px solid #1f2329;padding:1px 6px;border-radius:3px}
+    `,
+    body: `
+<div class="centered-card">
+  <div class="card">
+    <h3>Sign in</h3>
+    <form id="login-form" autocomplete="on" novalidate>
+      <input type="hidden" name="returnTo" value="${returnToSafe}">
+      <div class="field">
+        <label for="li-username">Username</label>
+        <input id="li-username" name="username" type="text" autocomplete="username" pattern="[a-z0-9_-]+" required autofocus>
+      </div>
+      <div class="field">
+        <label for="li-passphrase">Passphrase</label>
+        <input id="li-passphrase" name="passphrase" type="password" autocomplete="current-password" minlength="8" required>
+      </div>
+      <div class="actions">
+        <button type="submit" class="primary" id="li-submit">Sign in</button>
+      </div>
+    </form>
+  </div>
+  <p class="footer-note">Forgot your passphrase? Delete <code>users.json</code> from the transport state dir and re-run setup. (Yes, that wipes the operator account; no email recovery on this tier.)</p>
+</div>`,
+    inlineScript: `${TOAST_HELPER}
+(() => {
+  const form = document.getElementById('login-form');
+  const submit = document.getElementById('li-submit');
+  form.addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    submit.disabled = true;
+    const fd = new FormData(form);
+    const body = { username: fd.get('username'), passphrase: fd.get('passphrase') };
+    try {
+      const r = await fetch('/api/auth/login', { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify(body) });
+      const data = await r.json().catch(() => ({}));
+      if (r.ok && data.token) {
+        window.showToast('Signed in — redirecting.', 'ok');
+        const dest = fd.get('returnTo') || '/';
+        setTimeout(() => location.assign(dest), 400);
+      } else {
+        window.showToast(data.error || ('sign-in failed (' + r.status + ')'), 'err');
+        submit.disabled = false;
+      }
+    } catch (e) {
+      window.showToast('network error: ' + e.message, 'err');
+      submit.disabled = false;
+    }
+  });
+})();`,
+  });
+}

package/src/web/channels.ts

@@ -0,0 +1,395 @@
+// channels.ts — channel list + per-channel threaded message view.
+//
+// /c          → list of channels (links into /c/<handle>)
+// /c/<handle> → threaded message view: root messages (no `re:`) sorted
+//               newest-first; replies indented under their parent
+//               chronologically. Same shape as @cordfuse/llmux's /orch.
+//               Includes a send-message form at the top.
+
+import { page, escapeHtml, relativeTime, TOAST_HELPER } from './layout.js';
+
+export interface ChannelListData {
+  host: string;
+  alias: string;
+  channels: { uuid: string; name: string | null; parent: string | null }[];
+}
+
+export function channelListPage(d: ChannelListData): string {
+  const body = `
+<section class="card">
+  <h3 style="display:flex;align-items:center;justify-content:space-between">
+    <span>Channels (${d.channels.length})</span>
+    <button id="open-new-channel" class="primary" type="button" style="font-size:11px;font-weight:600">+ new channel</button>
+  </h3>
+  <p class="sub">Each channel is a directory under <code>data/channels/&lt;uuid&gt;/</code>. Messages and replies live as committed markdown files.</p>
+  <div id="new-channel-form" style="display:none;background:#0b0c10;border:1px solid #1f2329;border-radius:6px;padding:12px;margin-bottom:14px">
+    <div class="field" style="margin-bottom:8px">
+      <label for="new-channel-name">Channel name</label>
+      <input id="new-channel-name" type="text" placeholder="e.g. release-7 (lowercase, no spaces)" pattern="[a-z0-9][a-z0-9_.-]*">
+      <span class="sub" style="margin:4px 0 0">Lowercase, may contain digits / dots / dashes / underscores. UUID names rejected.</span>
+    </div>
+    <div class="actions">
+      <button type="button" id="new-channel-cancel">cancel</button>
+      <button type="button" id="new-channel-create" class="primary">create</button>
+    </div>
+  </div>
+  ${d.channels.length === 0
+    ? '<p class="empty">No channels yet. Click <strong>+ new channel</strong> or run <code>crosstalk channel &lt;name&gt;</code>.</p>'
+    : d.channels.map(c => {
+        const handle = c.name ?? c.uuid;
+        const display = c.name ?? c.uuid.slice(0, 8) + '…';
+        return `<a href="/c/${encodeURIComponent(handle)}" style="display:block;padding:10px 4px;border-bottom:1px solid #1f2329"><span class="chip brand">${escapeHtml(display)}</span>${c.parent ? `<span class="chip" title="parent: ${escapeHtml(c.parent)}">child</span>` : ''} <span style="color:#7a7f87;font-size:11px;margin-left:8px">${escapeHtml(c.uuid)}</span></a>`;
+      }).join('')}
+</section>
+`;
+  return page({
+    title: `crosstalk on ${d.host} · Channels`,
+    host: d.host,
+    alias: d.alias,
+    activeNav: 'channels',
+    pageTitle: 'Channels',
+    body,
+    inlineScript: `${TOAST_HELPER}
+(() => {
+  const form = document.getElementById('new-channel-form');
+  const openBtn = document.getElementById('open-new-channel');
+  const cancelBtn = document.getElementById('new-channel-cancel');
+  const createBtn = document.getElementById('new-channel-create');
+  const nameInput = document.getElementById('new-channel-name');
+  if (!form || !openBtn) return;
+  openBtn.addEventListener('click', () => {
+    form.style.display = 'block'; nameInput.focus();
+  });
+  cancelBtn.addEventListener('click', () => { form.style.display = 'none'; nameInput.value = ''; });
+  async function create(){
+    const name = nameInput.value.trim();
+    if (!name) { window.showToast('name required', 'err'); nameInput.focus(); return; }
+    createBtn.disabled = true;
+    try {
+      const r = await fetch('/channels', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({ name }) });
+      const data = await r.json().catch(() => ({}));
+      if (r.ok) {
+        window.showToast("created '" + name + "' — opening", 'ok');
+        setTimeout(() => location.assign('/c/' + encodeURIComponent(name)), 500);
+      } else {
+        window.showToast(data.error || ('create failed (' + r.status + ')'), 'err');
+        createBtn.disabled = false;
+      }
+    } catch (e) {
+      window.showToast('network error: ' + e.message, 'err');
+      createBtn.disabled = false;
+    }
+  }
+  createBtn.addEventListener('click', create);
+  nameInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); create(); } });
+})();`,
+  });
+}
+
+export interface BusMessage {
+  /** Path relative to data/channels/<uuid>/ */
+  relPath: string;
+  from: string;
+  to: string | string[];
+  re: string | string[] | null;
+  body: string;
+  timestamp: string;
+  failed: boolean;
+}
+
+export interface ChannelViewData {
+  host: string;
+  alias: string;
+  channelHandle: string;
+  channelUuid: string;
+  channelName: string | null;
+  messages: BusMessage[];
+}
+
+export function channelViewPage(d: ChannelViewData): string {
+  const title = d.channelName ?? d.channelUuid.slice(0, 8) + '…';
+  const messagesJson = JSON.stringify(d.messages);
+
+  const body = `
+<section class="card">
+  <h3 style="display:flex;align-items:center;justify-content:space-between">
+    <span>${escapeHtml(title)}</span>
+    <span style="display:inline-flex;gap:6px">
+      <button id="rename-btn" type="button" style="font-size:11px;padding:5px 10px">rename</button>
+      <button id="delete-btn" type="button" style="font-size:11px;padding:5px 10px;color:#f85149;border-color:#4a2329">delete</button>
+    </span>
+  </h3>
+  <p class="sub" style="word-break:break-all">uuid: ${escapeHtml(d.channelUuid)}</p>
+</section>
+
+<section class="card">
+  <h3>Send message</h3>
+  <form id="send-form" autocomplete="off">
+    <div class="field">
+      <label for="send-to">to (alias OR alias@machine, or 'all')</label>
+      <input id="send-to" name="to" type="text" required>
+    </div>
+    <div class="field">
+      <label for="send-re">re: parent-msg-id (optional, for replies)</label>
+      <input id="send-re" name="re" type="text" placeholder="leave blank for a new thread">
+    </div>
+    <div class="field">
+      <label for="send-body">message body</label>
+      <textarea id="send-body" name="body" required></textarea>
+    </div>
+    <div class="actions">
+      <button type="submit" class="primary" id="send-btn">send</button>
+    </div>
+  </form>
+</section>
+
+<section class="card">
+  <h3>Messages <span style="float:right;font-size:10px;color:#7a7f87;letter-spacing:.06em">${d.messages.length} TOTAL</span></h3>
+  <div id="messages">
+    ${d.messages.length === 0
+      ? '<p class="empty">No messages on this channel yet. Send one above.</p>'
+      : '<!-- rendered by inline script -->'}
+  </div>
+</section>
+`;
+
+  const inlineScript = `${TOAST_HELPER}
+const CHANNEL_HANDLE = ${JSON.stringify(d.channelHandle)};
+const CHANNEL_UUID = ${JSON.stringify(d.channelUuid)};
+const CHANNEL_NAME = ${JSON.stringify(d.channelName)};
+const ALIAS = ${JSON.stringify(d.alias)};
+
+// Rename — PATCH /channels/<handle> { name }
+document.getElementById('rename-btn').addEventListener('click', async () => {
+  const proposed = prompt('Rename this channel to (lowercase, no spaces, [a-z0-9._-]+):', CHANNEL_NAME || '');
+  if (proposed === null) return;
+  const name = proposed.trim();
+  if (!name) { window.showToast('name required', 'err'); return; }
+  try {
+    const r = await fetch('/channels/' + encodeURIComponent(CHANNEL_HANDLE), {
+      method: 'PATCH', headers: {'content-type':'application/json'},
+      body: JSON.stringify({ name }),
+    });
+    const data = await r.json().catch(() => ({}));
+    if (r.ok) {
+      window.showToast("renamed to '" + name + "'", 'ok');
+      setTimeout(() => location.replace('/c/' + encodeURIComponent(name) + '?_=' + Date.now()), 500);
+    } else {
+      window.showToast(data.error || ('rename failed (' + r.status + ')'), 'err');
+    }
+  } catch (e) { window.showToast('network error: ' + e.message, 'err'); }
+});
+
+// Delete — DELETE /channels/<handle>?confirm=<typed-name>
+// Server requires the operator to type the channel's name as confirmation.
+document.getElementById('delete-btn').addEventListener('click', async () => {
+  const label = CHANNEL_NAME || CHANNEL_UUID;
+  const typed = prompt("Type '" + label + "' to confirm deletion. ALL messages on this channel will be lost.", '');
+  if (typed === null) return;
+  try {
+    const r = await fetch('/channels/' + encodeURIComponent(CHANNEL_HANDLE) + '?confirm=' + encodeURIComponent(typed), {
+      method: 'DELETE',
+    });
+    const data = await r.json().catch(() => ({}));
+    if (r.ok) {
+      window.showToast('channel deleted', 'ok');
+      // Defeat bfcache by using location.replace + a cache-bust query
+      // param. location.assign('/c') alone can let Chrome restore a
+      // stale snapshot of /c that still lists the deleted channel.
+      setTimeout(() => location.replace('/c?_=' + Date.now()), 600);
+    } else {
+      window.showToast(data.error || ('delete failed (' + r.status + ')'), 'err');
+    }
+  } catch (e) { window.showToast('network error: ' + e.message, 'err'); }
+});
+
+function escapeText(s){ const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
+function fmtTo(to){ return Array.isArray(to) ? to.join(',') : to; }
+function fmtRe(re){ return !re ? '' : Array.isArray(re) ? re.join(',') : re; }
+
+function renderMsg(m, depth){
+  const reHtml = m.re ? '<span class="msg-re">re: ' + escapeText(fmtRe(m.re)) + '</span>' : '';
+  const depthClass = depth > 0 ? ' reply' : '';
+  const failedHtml = m.failed ? '<div class="msg-failed">FAILED</div>' : '';
+  return [
+    '<div class="msg' + depthClass + '">',
+    '  <div class="msg-head">',
+    '    <span class="msg-route"><span class="msg-from">' + escapeText(m.from) + '</span><span class="msg-arrow">→</span><span class="msg-to">' + escapeText(fmtTo(m.to)) + '</span>' + reHtml + '</span>',
+    '    <span class="msg-id">' + escapeText(m.relPath.split('/').pop() || '') + '</span>',
+    '  </div>',
+    '  <div class="msg-body">' + escapeText(m.body) + '</div>',
+    '  ' + failedHtml,
+    '</div>',
+  ].join('');
+}
+
+function renderThreaded(messages){
+  const byPath = new Map();
+  for (const m of messages) byPath.set(m.relPath, m);
+
+  function rootOf(m){
+    let cur = m;
+    const seen = new Set();
+    while (cur.re){
+      if (seen.has(cur.relPath)) return cur.relPath;
+      seen.add(cur.relPath);
+      const pid = Array.isArray(cur.re) ? cur.re[0] : cur.re;
+      const parent = byPath.get(pid);
+      if (!parent) return cur.relPath;
+      cur = parent;
+    }
+    return cur.relPath;
+  }
+  function depthOf(m){
+    let d = 0; let cur = m; const seen = new Set();
+    while (cur.re && d < 8){
+      if (seen.has(cur.relPath)) break;
+      seen.add(cur.relPath);
+      const pid = Array.isArray(cur.re) ? cur.re[0] : cur.re;
+      const parent = byPath.get(pid);
+      if (!parent) break;
+      d++; cur = parent;
+    }
+    return d;
+  }
+
+  const byRoot = new Map();
+  for (const m of messages){
+    const rid = rootOf(m);
+    if (!byRoot.has(rid)) byRoot.set(rid, []);
+    byRoot.get(rid).push(m);
+  }
+  const roots = Array.from(byRoot.entries()).sort(function(a, b){
+    const ra = byPath.get(a[0]);
+    const rb = byPath.get(b[0]);
+    const ta = ra ? ra.timestamp : a[1][0].timestamp;
+    const tb = rb ? rb.timestamp : b[1][0].timestamp;
+    return (tb || '').localeCompare(ta || '');
+  });
+  return roots.map(function(entry){
+    const items = entry[1].slice().sort(function(a, b){ return (a.timestamp || '').localeCompare(b.timestamp || ''); });
+    const cards = items.map(function(m){ return renderMsg(m, depthOf(m)); }).join('');
+    const replyCount = items.length - 1;
+    const summary = replyCount > 0
+      ? '<div class="thread-summary">↳ ' + replyCount + ' repl' + (replyCount === 1 ? 'y' : 'ies') + '</div>'
+      : '';
+    return '<div class="thread">' + summary + cards + '</div>';
+  }).join('');
+}
+
+function render(messages){
+  const wrap = document.getElementById('messages');
+  if (!wrap) return;
+  if (messages.length === 0){
+    wrap.innerHTML = '<p class="empty">No messages on this channel yet. Send one above.</p>';
+    return;
+  }
+  wrap.innerHTML = renderThreaded(messages);
+}
+
+let MESSAGES = ${messagesJson};
+render(MESSAGES);
+
+// Send-message form
+document.getElementById('send-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  const btn = document.getElementById('send-btn');
+  btn.disabled = true;
+  const to = document.getElementById('send-to').value.trim();
+  const body = document.getElementById('send-body').value.trim();
+  const re = document.getElementById('send-re').value.trim();
+  if (!to || !body){ window.showToast('to + body required', 'err'); btn.disabled = false; return; }
+  const payload = { type: 'primitive', channel: CHANNEL_UUID, from: ALIAS, to: to, body: body };
+  if (re) payload.re = re;
+  try {
+    const r = await fetch('/messages', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify(payload) });
+    if (!r.ok){ const d = await r.json().catch(() => ({})); throw new Error(d.error || 'send failed (' + r.status + ')'); }
+    document.getElementById('send-body').value = '';
+    document.getElementById('send-re').value = '';
+    window.showToast('sent', 'ok');
+    setTimeout(refreshMessages, 300);
+  } catch (e){
+    window.showToast(e.message, 'err');
+  }
+  btn.disabled = false;
+});
+
+// Poll every 5s for new messages.
+async function refreshMessages(){
+  try {
+    const r = await fetch('/c/' + encodeURIComponent(CHANNEL_HANDLE) + '/messages.json');
+    if (!r.ok) return;
+    const j = await r.json();
+    if (Array.isArray(j.messages) && j.messages.length !== MESSAGES.length){
+      MESSAGES = j.messages;
+      render(MESSAGES);
+    } else if (Array.isArray(j.messages)){
+      MESSAGES = j.messages;
+    }
+  } catch (_) {}
+}
+setInterval(refreshMessages, 5000);
+`;
+
+  return page({
+    title: `crosstalk · ${title}`,
+    host: d.host,
+    alias: d.alias,
+    activeNav: 'channels',
+    pageTitle: title,
+    body,
+    inlineScript,
+  });
+}
+
+export interface AgentsPageData {
+  host: string;
+  alias: string;
+  installed: string[];
+  known: string[];
+  yamlReferenced: string[];
+  claimed: string[];
+}
+
+export function agentsPage(d: AgentsPageData): string {
+  function chips(list: string[], highlightedList: string[], emptyMsg: string): string {
+    if (list.length === 0) return `<p class="empty">${escapeHtml(emptyMsg)}</p>`;
+    return list.map(a => {
+      const cls = highlightedList.includes(a) ? 'chip brand' : 'chip';
+      return `<span class="${cls}">${escapeHtml(a)}</span>`;
+    }).join('');
+  }
+  const body = `
+<section class="card">
+  <h3>Installed agent CLIs</h3>
+  <p class="sub">CLI binaries crosstalk knows how to PTY-wrap, detected on this engine's PATH.</p>
+  ${chips(d.installed, d.claimed, 'No supported agent CLIs found on PATH.')}
+</section>
+
+<section class="card">
+  <h3>Referenced in data/crosstalk.yaml</h3>
+  <p class="sub">CLIs that have at least one model entry in this transport's registry (whether claimed or not).</p>
+  ${chips(d.yamlReferenced, d.claimed, 'No model entries reference any known agent CLI yet.')}
+</section>
+
+<section class="card">
+  <h3>Claimed by this dispatcher</h3>
+  <p class="sub">CLIs with at least one entry whose binary was on PATH at dispatcher startup. Restart after installing a new CLI to claim its models.</p>
+  ${chips(d.claimed, d.claimed, 'No CLIs claimed yet — restart the engine after installing.')}
+</section>
+
+<section class="card">
+  <h3>Supported (catalog)</h3>
+  <p class="sub">The full set of agent CLIs crosstalk has built-in support for.</p>
+  ${chips(d.known, d.installed, '')}
+</section>
+`;
+  return page({
+    title: `crosstalk on ${d.host} · Agents`,
+    host: d.host,
+    alias: d.alias,
+    activeNav: 'agents',
+    pageTitle: 'Agents',
+    body,
+  });
+}