synabun 2.0.0 → 2.0.7

package/neural-interface/public/shared/ui-file-links.js

@@ -0,0 +1,103 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — File links in agent messages: the page side
+// ═══════════════════════════════════════════
+//
+// One click handler for the links in the messages of the four side panels
+// (Assistant, Claude, Codex, OpenCode). A link that points at a file the code
+// editor can open opens it there (`open-file-editor`), at its line and column;
+// every other link keeps what its panel did with it. What a target means and
+// what a click does are decided in file-links.js; this module gives it the
+// page: the bus, the toast, and the server. Whether a file can be opened is
+// the editor's own answer: GET /api/file-content, with the path checks that
+// route applies.
+
+import { emit } from './state.js';
+import { t } from './i18n.js';
+import { createFileLinkHandlers, fillFileLinkCopy } from './file-links.js';
+
+/** A `fileLinks.*` sentence in the active locale; in English where i18n never loads (a detached session). */
+export function fileLinkText(key, params) {
+  const id = `fileLinks.${key}`;
+  let text = id;
+  try { text = t(id, params); } catch { /* i18n is not there: the English below */ }
+  return text && text !== id ? text : fillFileLinkCopy(key, params);
+}
+
+/** A short message over the page: the toast the editor uses. */
+export function showFileLinkNotice(message) {
+  let toast = document.getElementById('fe-toast');
+  if (!toast) {
+    toast = document.createElement('div');
+    toast.id = 'fe-toast';
+    toast.style.cssText = 'position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(30,30,34,0.95);color:#e0e0e0;padding:6px 16px;border-radius:6px;font-size:12px;font-family:var(--ff-mono);z-index:2147483647;pointer-events:none;opacity:0;transition:opacity 0.2s;border:1px solid rgba(255,255,255,0.1);';
+    document.body.appendChild(toast);
+  }
+  toast.textContent = message;
+  toast.style.opacity = '1';
+  clearTimeout(toast._timer);
+  toast._timer = setTimeout(() => { toast.style.opacity = '0'; }, 3500);
+}
+
+let _home = null;
+
+// The home folder, for `~`: the folder picker's route answers with it when no path is asked for.
+function homeFolder() {
+  _home ??= fetch('/api/browse-directory')
+    .then((res) => (res.ok ? res.json() : null))
+    .then((data) => (typeof data?.current === 'string' ? data.current : ''))
+    .catch(() => '')
+    .then((home) => { if (!home) _home = null; return home; });
+  return _home;
+}
+
+async function probeFile(path) {
+  const res = await fetch(`/api/file-content?path=${encodeURIComponent(path)}`);
+  // Only the answer matters: the editor reads the file itself when it opens it.
+  try { await res.body?.cancel(); } catch { /* already read or closed */ }
+  return res.status;
+}
+
+const handlers = createFileLinkHandlers({
+  emit,
+  probe: probeFile,
+  home: homeFolder,
+  origin: () => window.location.origin,
+  say: fileLinkText,
+  notify: showFileLinkNotice,
+  follow: (anchor) => {
+    if (anchor.target === '_blank') window.open(anchor.href, '_blank', 'noopener,noreferrer');
+    else window.location.assign(anchor.href);
+  },
+});
+
+/**
+ * Take a click on a link in an agent's message when the link points at a file (see createFileLinkHandlers).
+ * @returns {boolean} true when the click was taken: the browser no longer follows the link
+ */
+export function handleFileLinkClick(event, options = {}) {
+  const taken = handlers.handleClick(event, options);
+  if (!taken) return false;
+  taken.catch((error) => console.warn('[file-links] click failed', error));
+  return true;
+}
+
+/**
+ * Give the links of a panel's messages their file behaviour. One listener on the container covers messages
+ * that are streaming, finished, or put back from history.
+ * @param {Element} container the element every message of the panel is rendered into
+ * @param {{ cwd?: (anchor: Element) => string, textLinks?: string, copyPath?: (anchor: Element, path: string) => any,
+ *   notify?: (message: string) => void }} [options] see createFileLinkHandlers().handleClick
+ * @returns {() => void} removes the listeners
+ */
+export function wireFileLinks(container, options = {}) {
+  if (!container) return () => {};
+  const own = { ...options, within: container };
+  const onClick = (event) => { handleFileLinkClick(event, own); };
+  const onOver = (event) => handlers.label(event, own);
+  container.addEventListener('click', onClick);
+  container.addEventListener('mouseover', onOver);
+  return () => {
+    container.removeEventListener('click', onClick);
+    container.removeEventListener('mouseover', onOver);
+  };
+}

package/neural-interface/public/shared/ui-git-bash.js

@@ -0,0 +1,124 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the Git Bash row of Settings
+// ═══════════════════════════════════════════
+//
+// The page side of git-bash-view.js: the row of Settings → AI connections →
+// Executable paths that shows the Git Bash every Claude Code SynaBun starts
+// gets on Windows, with Download / Try again and Re-check. It asks
+// GET /api/cli/git-bash, follows a download while it runs (a few times a
+// second, until the row has left the page), and posts what the buttons ask
+// with the guards of SynaBun's other local routes (a JSON body, X-SynaBun-UI).
+// A server that has no such route (an older one), and every macOS or Linux
+// server, leaves the row hidden.
+
+import { gitBashText, gitBashView } from './git-bash-view.js';
+
+const POST = Object.freeze({ method: 'POST', headers: { 'Content-Type': 'application/json', 'X-SynaBun-UI': '1' }, body: '{}' });
+
+const ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v12h16V6H4zm2.3 2.3 3.7 3.7-3.7 3.7-1.4-1.4L7.2 12 4.9 9.7l1.4-1.4zM11 15h6v2h-6v-2z"/></svg>';
+
+const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
+
+/** The row's markup: hidden until the server says there is something to show (Windows). */
+export function gitBashRowHtml() {
+  return `
+            <div class="cli-path-row" id="cli-git-bash" data-git-bash hidden>
+              <div class="cli-path-icon" style="color:var(--t-secondary)">${ICON}</div>
+              <div class="cli-path-field">
+                <span class="cli-path-label" id="cli-git-bash-label">${escapeHtml(gitBashText('label'))}</span>
+                <div class="cli-path-input-row">
+                  <span class="stg-help" data-git-bash-line role="status" aria-live="polite" aria-labelledby="cli-git-bash-label" style="flex:1;min-width:0;margin:0"></span>
+                  <button type="button" class="cli-detect-btn" data-git-bash-action hidden></button>
+                  <button type="button" class="cli-detect-btn" data-git-bash-recheck hidden>${escapeHtml(gitBashText('recheck'))}</button>
+                  <span class="cli-path-status" data-git-bash-badge></span>
+                </div>
+                <div class="stg-help" data-git-bash-note hidden></div>
+                <div class="stg-help">${escapeHtml(gitBashText('help'))}</div>
+              </div>
+            </div>`;
+}
+
+/**
+ * Fill the row and keep it current. `fetchImpl`, `schedule` and `cancel` are the page's own unless a test gives
+ * others. Returns `{ refresh, stop }`; the row stops following a download by itself once it is off the page.
+ */
+export function wireGitBashRow(row, { fetchImpl = (...args) => fetch(...args), pollMs = 1500, schedule = (fn, ms) => setTimeout(fn, ms), cancel = (id) => clearTimeout(id) } = {}) {
+  if (!row) return { refresh: async () => null, stop: () => {} };
+  const badge = row.querySelector('[data-git-bash-badge]');
+  const line = row.querySelector('[data-git-bash-line]');
+  const note = row.querySelector('[data-git-bash-note]');
+  const action = row.querySelector('[data-git-bash-action]');
+  const recheck = row.querySelector('[data-git-bash-recheck]');
+  let timer = null;
+  let stopped = false;
+
+  const clearPoll = () => { if (timer !== null) { cancel(timer); timer = null; } };
+  const stop = () => { stopped = true; clearPoll(); };
+
+  function draw(status) {
+    const view = gitBashView(status);
+    row.hidden = !view.visible;
+    clearPoll();
+    if (!view.visible) return view;
+    if (badge) {
+      badge.textContent = view.badge?.text || '';
+      badge.className = `cli-path-status${view.badge?.tone ? ` ${view.badge.tone}` : ''}`;
+    }
+    if (line) line.textContent = view.line;
+    if (note) { note.textContent = view.note || ''; note.hidden = !view.note; }
+    if (action) {
+      action.hidden = !view.action;
+      action.disabled = false;
+      action.textContent = view.action ? gitBashText(view.action) : '';
+    }
+    if (recheck) {
+      recheck.hidden = !view.recheck;
+      recheck.disabled = false;
+      recheck.textContent = gitBashText('recheck');
+    }
+    if (view.busy && !stopped) {
+      timer = schedule(() => {
+        timer = null;
+        if (row.isConnected === false) { stop(); return; }
+        refresh();
+      }, pollMs);
+    }
+    return view;
+  }
+
+  async function ask(path, init) {
+    const res = await fetchImpl(path, init);
+    let body = null;
+    try { body = await res.json(); } catch { body = null; }
+    // A refusal that still says how things are (422: nothing to fetch here) is drawn as it is.
+    if (!res.ok && !(body && typeof body.state === 'string')) throw new Error(body?.error || body?.code || `HTTP ${res.status}`);
+    return body;
+  }
+
+  const said = (error) => { if (line) line.textContent = gitBashText('errorRequest', { message: error?.message || String(error) }); };
+
+  async function refresh() {
+    try { return draw(await ask('/api/cli/git-bash')); } catch {
+      // An older server, or none: there is no row to show.
+      row.hidden = true;
+      return null;
+    }
+  }
+
+  action?.addEventListener('click', async () => {
+    action.disabled = true;
+    try { draw(await ask('/api/cli/git-bash/install', POST)); } catch (error) { said(error); action.disabled = false; }
+  });
+  recheck?.addEventListener('click', async () => {
+    recheck.disabled = true;
+    recheck.textContent = gitBashText('checking');
+    try { draw(await ask('/api/cli/git-bash/recheck', POST)); } catch (error) {
+      said(error);
+      recheck.disabled = false;
+      recheck.textContent = gitBashText('recheck');
+    }
+  });
+
+  refresh();
+  return { refresh, stop };
+}

package/neural-interface/public/shared/ui-help.js

@@ -5,6 +5,10 @@
 
 import { getHelpSections, getVariant } from './registry.js';
 import { registerAction, getDisplayKey } from './ui-keybinds.js';
+import { t } from './i18n.js';
+
+// The modifier of the File Explorer's keys, as this system shows it.
+const MOD_KEY = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform || '') ? '⌘' : 'Ctrl';
 
 // Shared help sections that appear in all variants
 // Keyboard section uses dynamic keys from central keybinds system
@@ -46,6 +50,28 @@ function getSharedHelpSections() {
       <div class="help-row"><div class="help-keys"><span class="help-key">Pin</span><span class="help-key">&#x1F4CC;</span></div><span class="help-desc">Lock panel position &amp; size</span></div>
     </div>`
   },
+  {
+    // The File Explorer's tree, while it has the keyboard (shared/explorer/, docs/file-explorer.md)
+    order: 85,
+    html: `<div class="help-section">
+      <div class="help-section-title">${t('fileExplorer.help.title')}</div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">${getDisplayKey('toggle-file-explorer')}</span></div><span class="help-desc">${t('fileExplorer.help.toggle')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">&uarr;</span><span class="help-key">&darr;</span><span class="help-key">Home</span><span class="help-key">End</span></div><span class="help-desc">${t('fileExplorer.help.move')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">&rarr;</span><span class="help-key">&larr;</span></div><span class="help-desc">${t('fileExplorer.help.fold')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">Enter</span></div><span class="help-desc">${t('fileExplorer.help.open')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">Space</span></div><span class="help-desc">${t('fileExplorer.help.peek')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">Shift</span><span class="help-key">&uarr; &darr;</span></div><span class="help-desc">${t('fileExplorer.help.range')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">A&ndash;Z</span></div><span class="help-desc">${t('fileExplorer.help.typeAhead')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">&darr;</span><span class="help-key">Enter</span></div><span class="help-desc">${t('fileExplorer.help.offers')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">F2</span></div><span class="help-desc">${t('fileExplorer.help.rename')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">Del</span></div><span class="help-desc">${t('fileExplorer.help.delete')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">${MOD_KEY}</span><span class="help-key">X / C / V</span></div><span class="help-desc">${t('fileExplorer.help.clipboard')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">${MOD_KEY}</span><span class="help-key">Alt</span><span class="help-key">C</span></div><span class="help-desc">${t('fileExplorer.help.copyPath')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">${MOD_KEY}</span><span class="help-key">P</span></div><span class="help-desc">${t('fileExplorer.help.goToFile')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">Shift</span><span class="help-key">F10</span></div><span class="help-desc">${t('fileExplorer.help.menu')}</span></div>
+      <div class="help-row"><div class="help-keys"><span class="help-key">Esc</span></div><span class="help-desc">${t('fileExplorer.help.escape')}</span></div>
+    </div>`
+  },
   {
     order: 90,
     html: `<div class="help-section">

package/neural-interface/public/shared/ui-invite.js

@@ -7,9 +7,6 @@
 import { emit, on } from './state.js';
 import {
   fetchInviteStatus,
-  fetchTunnelStatus,
-  startTunnel,
-  stopTunnel,
   generateInviteKey,
   revokeInviteKey,
   revokeAllInviteSessions,
@@ -18,15 +15,25 @@ import {
   saveInvitePermissions,
 } from './api.js';
 import { isGuest } from './ui-sync.js';
+import { createTunnelCard, drawInto } from './ui-tunnel.js';
 
 const $ = (id) => document.getElementById(id);
 
 let _isOpen = false;
 let _data = { hasKey: false, maskedKey: null, activeSessions: 0, proxyConfig: { useProxy: false, proxyUrl: '' } };
-let _tunnelUrl = null;
-let _tunnelAvailable = false;
-let _tunnelStarting = false;
-let _tunnelPollTimer = null;
+// The Cloudflare tunnel: what the server says of it, read by tunnel-view.js; asked again by itself while a
+// download or a start is on its way, for as long as the dropdown is open (ui-tunnel.js).
+let _tunnelKind = null;
+const _tunnel = createTunnelCard({
+  alive: () => _isOpen,
+  onChange(view) {
+    if (!_isOpen) return;
+    // The address coming or going changes the other sections too (the invite link); anything else only this block.
+    const whole = view.kind !== _tunnelKind && (view.kind === 'running' || _tunnelKind === 'running');
+    _tunnelKind = view.kind;
+    if (whole) render(); else drawTunnel();
+  },
+});
 let _keyMode = 'auto'; // 'auto' | 'custom'
 let _revealedKey = null; // shown only right after generation
 let _permissions = { terminal: false, whiteboard: false, memories: true, skills: false, cards: true, browser: false };
@@ -60,15 +67,12 @@ function toggleDropdown() {
 
 async function loadAndRender() {
   try {
-    const [inviteRes, tunnelRes, permRes] = await Promise.all([
+    const [inviteRes, , permRes] = await Promise.all([
       fetchInviteStatus(),
-      fetchTunnelStatus(),
+      _tunnel.refresh(),
       fetchInvitePermissions(),
     ]);
     _data = inviteRes;
-    _tunnelUrl = tunnelRes.url || null;
-    _tunnelAvailable = tunnelRes.available;
-    _tunnelStarting = tunnelRes.starting || false;
     if (permRes?.permissions) _permissions = permRes.permissions;
   } catch (err) {
     console.warn('[invite] Failed to load status:', err);
@@ -76,38 +80,13 @@ async function loadAndRender() {
   render();
 }
 
-// ─── Tunnel polling ─────────────────────
-
-function pollForTunnelUrl() {
-  if (_tunnelPollTimer) clearInterval(_tunnelPollTimer);
-  let attempts = 0;
-  _tunnelPollTimer = setInterval(async () => {
-    attempts++;
-    try {
-      const res = await fetchTunnelStatus();
-      if (res.url) {
-        clearInterval(_tunnelPollTimer);
-        _tunnelPollTimer = null;
-        _tunnelUrl = res.url;
-        _tunnelStarting = false;
-        if (_isOpen) render();
-      } else if (attempts >= 30) {
-        clearInterval(_tunnelPollTimer);
-        _tunnelPollTimer = null;
-        _tunnelStarting = false;
-        if (_isOpen) render();
-      }
-    } catch {}
-  }, 1000);
-}
-
 // ─── URL helpers ────────────────────────
 
 function getBaseUrl() {
   if (_data.proxyConfig?.useProxy && _data.proxyConfig?.proxyUrl) {
     return _data.proxyConfig.proxyUrl.replace(/\/+$/, '');
   }
-  return _tunnelUrl || null;
+  return _tunnel.view().url || null;
 }
 
 function getInviteUrl() {
@@ -136,9 +115,7 @@ function render() {
   const dd = $('invite-dropdown');
   if (!dd) return;
 
-  const baseUrl = getBaseUrl();
   const inviteUrl = getInviteUrl();
-  const hasUrl = !!baseUrl;
   const useProxy = _data.proxyConfig?.useProxy || false;
 
   dd.innerHTML = `
@@ -153,39 +130,7 @@ function render() {
           <button class="invite-alt-link" id="invite-mode-tunnel">Use Cloudflare tunnel</button>
         </div>
       ` : `
-        ${hasUrl ? `
-          <div class="invite-status-row">
-            <span class="invite-status-dot active"></span>
-            <span class="invite-url-text">${baseUrl}</span>
-            <button class="invite-copy-icon" id="invite-copy-base-url" data-tooltip="Copy"><svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
-            <span class="invite-copied" id="invite-copied-url">Copied</span>
-          </div>
-          <div class="invite-action-row">
-            <button class="invite-btn" id="invite-tunnel-stop">Stop</button>
-            <button class="invite-alt-link" id="invite-mode-proxy">Use custom URL</button>
-          </div>
-        ` : `
-          ${_tunnelAvailable ? `
-            ${_tunnelStarting ? `
-              <div class="invite-action-row">
-                <button class="invite-btn" disabled style="opacity:0.5;cursor:default">
-                  <svg viewBox="0 0 24 24" class="invite-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
-                  Starting...
-                </button>
-              </div>
-            ` : `
-              <div class="invite-action-row">
-                <button class="invite-btn primary" id="invite-tunnel-start">Start Tunnel</button>
-                <button class="invite-alt-link" id="invite-mode-proxy">Use custom URL</button>
-              </div>
-            `}
-          ` : `
-            <div class="invite-action-row">
-              <span style="font-size:10px;color:var(--t-dimmed)">cloudflared not available</span>
-              <button class="invite-alt-link" id="invite-mode-proxy">Use custom URL</button>
-            </div>
-          `}
-        `}
+        <div id="invite-tunnel"></div>
       `}
     </div>
 
@@ -242,12 +187,118 @@ function render() {
     ` : ''}
   `;
 
+  wireTunnel();
+  drawTunnel();
   wireEvents();
   updateBadge();
 }
 
+// ─── The tunnel block ───────────────────
+// Drawn by itself: while cloudflared is being downloaded the progress changes every second, and the rest of the
+// dropdown (a password being typed, a key just shown) must not be drawn over for that.
+
+const COPY_ICON = '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+const SPINNER = '<svg viewBox="0 0 24 24" class="invite-spin invite-tunnel-spinner" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>';
+const USE_CUSTOM = '<button class="invite-alt-link" id="invite-mode-proxy">Use custom URL</button>';
+
+/** The markup of the tunnel block for a reading of tunnel-view.js. */
+function tunnelBlock(view) {
+  const label = escHtml(view.label);
+  const detail = view.detail ? `<div class="invite-tunnel-detail">${escHtml(view.detail)}</div>` : '';
+  if (view.kind === 'running') {
+    return `
+      <div class="invite-status-row" role="status">
+        <span class="invite-status-dot active" aria-hidden="true"></span>
+        <span class="invite-url-text" title="${label}">${escHtml(view.url)}</span>
+        <button class="invite-copy-icon" id="invite-copy-base-url" data-tooltip="Copy" aria-label="Copy">${COPY_ICON}</button>
+        <span class="invite-copied" id="invite-copied-url">Copied</span>
+      </div>
+      ${view.copy ? `<div class="invite-tunnel-detail invite-tunnel-copy">${escHtml(view.copy)}${view.copyNote ? ` ${escHtml(view.copyNote)}` : ''}</div>` : ''}
+      <div class="invite-action-row">
+        <button class="invite-btn" id="invite-tunnel-stop">${escHtml(view.actionLabel)}</button>
+        ${USE_CUSTOM}
+      </div>`;
+  }
+  if (view.kind === 'downloading' || view.kind === 'starting') {
+    return `
+      <div class="invite-status-row" role="status">
+        ${SPINNER}
+        <span class="invite-tunnel-state">${label}</span>
+        ${view.progress ? `<span class="invite-tunnel-percent">${escHtml(view.progress.text)}</span>` : ''}
+      </div>
+      ${view.progress ? `<div class="invite-progress" role="progressbar" aria-label="${label}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${view.progress.percent}"><span style="width:${view.progress.percent}%"></span></div>` : ''}
+      ${detail}
+      <div class="invite-action-row">
+        <button class="invite-btn" id="invite-tunnel-stop">${escHtml(view.actionLabel)}</button>
+        ${USE_CUSTOM}
+      </div>`;
+  }
+  if (view.kind === 'failed') {
+    return `
+      <div class="invite-status-row" role="alert">
+        <span class="invite-status-dot error" aria-hidden="true"></span>
+        <span class="invite-tunnel-state error">${label}</span>
+      </div>
+      ${detail}
+      <div class="invite-action-row">
+        <button class="invite-btn primary" id="invite-tunnel-start">${escHtml(view.actionLabel)}</button>
+        ${USE_CUSTOM}
+      </div>`;
+  }
+  if (view.kind === 'idle') {
+    return `
+      ${detail}
+      <div class="invite-action-row">
+        <button class="invite-btn primary" id="invite-tunnel-start">${escHtml(view.actionLabel)}</button>
+        ${USE_CUSTOM}
+      </div>`;
+  }
+  // No tunnel can be started from here (the server needs a restart first, or this system has no tunnel
+  // program): the state, why, and the other way to an address.
+  return `
+    <div class="invite-status-row" role="status">
+      <span class="invite-status-dot${view.tone === 'warn' ? ' warn' : ''}" aria-hidden="true"></span>
+      <span class="invite-tunnel-state">${label}</span>
+    </div>
+    ${detail}
+    <div class="invite-action-row">
+      ${USE_CUSTOM}
+    </div>`;
+}
+
+function drawTunnel() {
+  const box = $('invite-tunnel');
+  if (box) drawInto(box, tunnelBlock(_tunnel.view()));
+}
+
+/** One listener for the block: its buttons come and go with the state. */
+function wireTunnel() {
+  const box = $('invite-tunnel');
+  if (!box) return;
+  box.addEventListener('click', async (e) => {
+    const button = e.target.closest('button');
+    if (!button || !box.contains(button)) return;
+    e.stopPropagation();
+    if (button.id === 'invite-tunnel-start') {
+      // Shown at once: the server answers immediately too, and then says what it is doing.
+      _tunnel.show({ ...(_tunnel.status() || {}), state: 'starting', starting: true, url: null, error: null });
+      await _tunnel.start();
+    } else if (button.id === 'invite-tunnel-stop') {
+      await _tunnel.stop();
+    } else if (button.id === 'invite-copy-base-url') {
+      const url = getBaseUrl();
+      if (url) copyText(url, 'invite-copied-url');
+    } else if (button.id === 'invite-mode-proxy') {
+      await saveInviteProxy({ useProxy: true, proxyUrl: _data.proxyConfig?.proxyUrl || '' });
+      _data.proxyConfig = { useProxy: true, proxyUrl: _data.proxyConfig?.proxyUrl || '' };
+      _revealedKey = null;
+      render();
+    }
+  });
+}
+
 function escHtml(s) {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 
 const PERM_ICONS = {
@@ -282,48 +333,7 @@ function wireEvents() {
     render();
   });
 
-  $('invite-mode-proxy')?.addEventListener('click', async (e) => {
-    e.stopPropagation();
-    await saveInviteProxy({ useProxy: true, proxyUrl: _data.proxyConfig?.proxyUrl || '' });
-    _data.proxyConfig = { useProxy: true, proxyUrl: _data.proxyConfig?.proxyUrl || '' };
-    _revealedKey = null;
-    render();
-  });
-
-  // Copy base URL
-  $('invite-copy-base-url')?.addEventListener('click', (e) => {
-    e.stopPropagation();
-    const url = getBaseUrl();
-    if (url) copyText(url, 'invite-copied-url');
-  });
-
-  // Tunnel start/stop
-  $('invite-tunnel-start')?.addEventListener('click', async (e) => {
-    e.stopPropagation();
-    try {
-      _tunnelStarting = true;
-      render();
-      await startTunnel();
-      pollForTunnelUrl();
-    } catch (err) {
-      console.error('[invite] Tunnel start failed:', err);
-      _tunnelStarting = false;
-      render();
-    }
-  });
-
-  $('invite-tunnel-stop')?.addEventListener('click', async (e) => {
-    e.stopPropagation();
-    try {
-      await stopTunnel();
-      _tunnelUrl = null;
-      _tunnelStarting = false;
-      if (_tunnelPollTimer) { clearInterval(_tunnelPollTimer); _tunnelPollTimer = null; }
-      render();
-    } catch (err) {
-      console.error('[invite] Tunnel stop failed:', err);
-    }
-  });
+  // (The tunnel block's own buttons, "Use custom URL" among them, are wired in wireTunnel.)
 
   // Proxy save
   $('invite-proxy-save')?.addEventListener('click', async (e) => {

package/neural-interface/public/shared/ui-judgments.js

@@ -862,7 +862,7 @@ export function wireJudgmentsTab(overlay, { toast = () => {}, initial = null } =
     const outcome = row.outcome && typeof row.outcome === 'object' ? row.outcome : null;
     const summary = `${clock(row.created_at)} · <code>${escapeHtml(row.surface)}</code>${riders.map(x => ` <span style="${CHIP}">+${escapeHtml(x)}</span>`).join('')} ${kit.th('settings.redesign.judgments.qMs', { origin: escapeHtml(row.origin), model: escapeHtml(row.model || ''), num: num(row.question_count), num2: num(row.latency_ms), num3: num(row.input_tokens) })}${num(row.output_tokens)}${row.cached ? ' · <span style="color:var(--accent)">' + kit.te('settings.redesign.judgments.cached') + '</span>' : ''}${row.error ? ` · <span style="color:#f66">${escapeHtml(row.error)}</span>` : ''}${row.entity_id ? ` · ${memLink(row.entity_id)}` : ''}${row.session_id ? ` · <a href="#" class="jv-session-link" data-session="${attr(row.session_id)}" title="${attr(row.session_id)}${kit.te('settings.redesign.judgments.thisSessionSJudgments')}" style="${LINK};font-family:monospace">${kit.te('settings.redesign.judgments.session')} ${escapeHtml(shortId(row.session_id))}</a>` : ''}${row.project ? ` · ${escapeHtml(row.project)}` : ''}`;
     return `<details class="jv-log-row" data-id="${attr(row.id)}"${state.openLogIds.has(String(row.id)) ? ' open' : ''} style="font-size:12px;border:1px solid var(--s-medium);border-radius:6px;padding:4px 8px;background:var(--s-darker)">
-      <summary style="cursor:pointer;list-style:none" title="${attr(row.created_at)}">${summary}</summary>
+      <summary style="cursor:pointer;list-style:none" title="${attr(row.created_at)}">${summary}${row.surface === 'budget-split' && budgetSplitLine(row, row.answers || {}).line ? ' · ' + budgetSplitLine(row, row.answers || {}).line : ''}</summary>
       <div class="settings-hint" style="margin:6px 0 2px">${kit.te('settings.redesign.judgments.state')}</div><pre style="margin:0;white-space:pre-wrap;font-size:11px;max-height:160px;overflow:auto">${escapeHtml(row.state_preview || '')}</pre>
       <div class="settings-hint" style="margin:6px 0 2px">${kit.te('settings.redesign.judgments.answers')}</div><pre style="margin:0;white-space:pre-wrap;font-size:11px;max-height:200px;overflow:auto">${escapeHtml(answers || '—')}</pre>
       ${outcome ? `<div class="settings-hint" style="margin:6px 0 2px">${kit.te('settings.redesign.judgments.outcome')}</div><pre style="${PRE}">${escapeHtml(JSON.stringify(outcome, null, 2))}</pre>` : ''}
@@ -1029,7 +1029,16 @@ export function wireJudgmentsTab(overlay, { toast = () => {}, initial = null } =
     const p = prob(a.goal_met);
     return { line: p == null ? '' : flagged(kit.tx('settings.redesign.judgments.pGoalMet', { pct: pct(p) }), p >= knob('loop-goal', 'minConfidence', 0.8)) };
   }
+  function budgetSplitLine(row, answers) {
+    const names = { share_claude_code: 'Claude Code', share_codex: 'Codex', share_opencode: 'OpenCode' };
+    const parts = Object.entries(names).filter(([key]) => answers[key]?.type === 'score').map(([key, label]) => {
+      const a = answers[key];
+      return escapeHtml(kit.tx('settings.redesign.judgments.budgetShareScore', { provider: label, score: num(a.score ?? a.value), confidence: pct(a.confidence) }));
+    });
+    return { line: parts.join(' · ') };
+  }
   const TIMELINE = {
+    'budget-split': budgetSplitLine,
     'prompt-urgency': urgencyLine, 'rerank': rankLine, 'brief-rank': rankLine,
     'agent-message': stopLine, 'turn-worth': stopLine, 'claim-check': stopLine,
     'edit-stale': staleLine, 'stale-check': staleLine, 'plan-conflict': planLine, 'compact-digest': digestLine, 'loop-goal': loopLine,

package/neural-interface/public/shared/ui-keybinds.js

@@ -25,6 +25,8 @@ let _reverseMap = new Map();      // combo string → actionId (for O(1) dispatc
 let _recording = null;            // { actionId, originalCombo } when recording
 let _pendingBindings = null;      // working copy during modal editing
 let _modalOpen = false;
+// Actions that were removed ("toggle-toolbar" was "Hide all toolbars"): a saved key for one is dropped on load.
+const RETIRED_ACTIONS = ['toggle-toolbar'];
 
 // ── Combo building ──
 
@@ -426,6 +428,8 @@ export async function initKeybinds() {
   } catch {
     _bindings = { ...DEFAULT_KEYBINDS };
   }
+  // A key saved for an action that is gone does nothing and must not hold its combo (or show up as a conflict).
+  for (const actionId of RETIRED_ACTIONS) delete _bindings[actionId];
 
   _reverseMap = buildReverseMap(_bindings);