synabun 2.0.0 → 2.0.5

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-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-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);