synabun 2.0.9 → 2.1.0

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

@@ -12,9 +12,10 @@ import { updateMemory, deleteMemory, fetchMemory } from './api.js';
 import { KEYS } from './constants.js';
 import { storage } from './storage.js';
 import { catColor } from './colors.js';
-import { truncate, formatMemoryContent, exportMemoryAsMarkdown, rafThrottle } from './utils.js';
+import { truncate, formatMemoryContent, exportMemoryAsMarkdown, rafThrottle, escapeHtml } from './utils.js';
 import { t, getLocale } from './i18n.js';
-import { savePanelLayout, restorePanelLayout } from './ui-panels.js';
+import { savePanelLayout, restorePanelLayout, clampPanelToFrame } from './ui-panels.js';
+import { frameRect } from './app-frame.js';
 import { sendSync as _sendSync, hasPermission, isGuest } from './ui-sync.js';
 
 // Wrap sendSync — skip card events when guest lacks cards permission
@@ -111,7 +112,7 @@ function showTagDeleteModal(tagName, onConfirm) {
   overlay.innerHTML = `
     <div class="tag-delete-modal">
       <div class="tag-delete-modal-title">Remove tag</div>
-      <div class="tag-delete-modal-tag">${tagName}</div>
+      <div class="tag-delete-modal-tag">${escapeHtml(tagName)}</div>
       <div class="tag-delete-modal-actions">
         <button class="action-btn action-btn--ghost tag-modal-cancel">Cancel</button>
         <button class="action-btn action-btn--danger tag-modal-confirm">Delete</button>
@@ -363,7 +364,7 @@ function openCategoryChangeModal(card, node) {
             <div class="cat-opt-dot" style="color:${catColor(cat)}; background:${catColor(cat)}"></div>
             <div class="cat-opt-info">
               <span class="cat-opt-name">${cat}</span>
-              ${desc ? `<span class="cat-opt-desc">${desc}</span>` : ''}
+              ${desc ? `<span class="cat-opt-desc">${escapeHtml(desc)}</span>` : ''}
             </div>
           </div>`;
       }
@@ -375,7 +376,7 @@ function openCategoryChangeModal(card, node) {
         <div class="cat-opt-dot" style="color:${catColor(cat)}; background:${catColor(cat)}"></div>
         <div class="cat-opt-info">
           <span class="cat-opt-name">${cat}</span>
-          ${desc ? `<span class="cat-opt-desc">${desc}</span>` : ''}
+          ${desc ? `<span class="cat-opt-desc">${escapeHtml(desc)}</span>` : ''}
         </div>
         ${isActive ? '<svg class="cat-opt-check" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>' : ''}
       </div>`;
@@ -546,9 +547,11 @@ function bringToFront(cardEl) {
 function getNextCardPosition() {
   const count = _openCards.size;
   const offset = count * 30;
+  // Cascading from 200 / 80 px of the window (192 / 24 px into the app frame), inside the frame.
+  const f = frameRect();
   return {
-    left: Math.min(window.innerWidth - 540, 200 + (offset % 300)) + 'px',
-    top: Math.min(window.innerHeight - 300, 80 + (offset % 200)) + 'px',
+    left: Math.max(f.left, Math.min(f.right - 540, f.left + 192 + (offset % 300))) + 'px',
+    top: Math.max(f.top, Math.min(f.bottom - 300, f.top + 24 + (offset % 200))) + 'px',
   };
 }
 
@@ -587,6 +590,13 @@ export function getOpenCardCount() {
   return _openCards.size;
 }
 
+/** Press an open card's Linked button from outside it (the context menu), unless it is on already. */
+export function focusLinkedMemories(memoryId) {
+  const card = _openCards.get(memoryId);
+  if (!card || state.focusedNodeId === memoryId) return;
+  q(card.el, 'focus-btn')?.click();
+}
+
 export function restoreOpenCards() {
   const raw = storage.getItem(KEYS.OPEN_CARDS);
   if (!raw) return;
@@ -863,7 +873,7 @@ export function openMemoryCard(node, savedPosition) {
     if (!value) return;
     const row = document.createElement('div');
     row.className = 'detail-meta-row';
-    row.innerHTML = `<span style="color:rgba(255,255,255,0.3)">${label}</span><span>${value}</span>`;
+    row.innerHTML = `<span style="color:rgba(255,255,255,0.3)">${label}</span><span>${escapeHtml(String(value))}</span>`;
     meta.appendChild(row);
   };
   addMeta('Project', p.project);
@@ -893,7 +903,7 @@ export function openMemoryCard(node, savedPosition) {
   const filesContent = q(card, 'files-content');
   if (p.related_files && p.related_files.length) {
     filesContent.innerHTML = p.related_files.map(f =>
-      `<div style="font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:12px;color:rgba(255,255,255,0.45);padding:2px 0">${f}</div>`
+      `<div style="font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:12px;color:rgba(255,255,255,0.45);padding:2px 0">${escapeHtml(String(f))}</div>`
     ).join('');
     filesDiv.style.display = '';
   } else {
@@ -1062,6 +1072,8 @@ export function openMemoryCard(node, savedPosition) {
   // ── Add to DOM and state ──
   _openCards.set(node.id, cardState);
   document.body.appendChild(card);
+  // A position saved in another window size, or with the explorers closed, comes back inside the app frame.
+  if (savedPosition) clampPanelToFrame(card);
   bringToFront(card);
 
   // Trigger entrance animation on next frame

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

@@ -65,6 +65,7 @@ const handlers = createFileLinkHandlers({
   say: fileLinkText,
   notify: showFileLinkNotice,
   follow: (anchor) => {
+    if (anchor.protocol !== 'http:' && anchor.protocol !== 'https:') return; // an address of this app, never a script link
     if (anchor.target === '_blank') window.open(anchor.href, '_blank', 'noopener,noreferrer');
     else window.location.assign(anchor.href);
   },

package/neural-interface/public/shared/ui-image-gallery.js

@@ -7,6 +7,8 @@
 import { emit, on } from './state.js';
 import { fetchImages, toggleImageFavorite, deleteImage } from './api.js';
 import { addImageToWhiteboard } from './ui-whiteboard.js';
+import { escapeHtml } from './utils.js';
+import { centeredInFrame } from './app-frame.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -22,33 +24,33 @@ let _lightboxImg = null;    // filename currently in lightbox
 let isVisible = false;
 
 // ── Drag state ──
-let _dragging = false;
-let _dragOff = { x: 0, y: 0 };
-let _dragRaf = 0;
-let _pendingDrag = null;
-
-function applyDragPosition() {
-  _dragRaf = 0;
-  if (!_panel || !_pendingDrag) return;
-  _panel.style.left = _pendingDrag.left + 'px';
-  _panel.style.top = _pendingDrag.top + 'px';
-}
-
-function scheduleDragPosition(left, top) {
-  _pendingDrag = { left, top };
-  if (!_dragRaf) _dragRaf = requestAnimationFrame(applyDragPosition);
-}
-
-function flushDragPosition() {
-  if (_dragRaf) {
-    cancelAnimationFrame(_dragRaf);
-    _dragRaf = 0;
-  }
-  applyDragPosition();
-}
-
-// ── Icons ──
-const ICON_CLOSE = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+let _dragging = false;
+let _dragOff = { x: 0, y: 0 };
+let _dragRaf = 0;
+let _pendingDrag = null;
+
+function applyDragPosition() {
+  _dragRaf = 0;
+  if (!_panel || !_pendingDrag) return;
+  _panel.style.left = _pendingDrag.left + 'px';
+  _panel.style.top = _pendingDrag.top + 'px';
+}
+
+function scheduleDragPosition(left, top) {
+  _pendingDrag = { left, top };
+  if (!_dragRaf) _dragRaf = requestAnimationFrame(applyDragPosition);
+}
+
+function flushDragPosition() {
+  if (_dragRaf) {
+    cancelAnimationFrame(_dragRaf);
+    _dragRaf = 0;
+  }
+  applyDragPosition();
+}
+
+// ── Icons ──
+const ICON_CLOSE = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
 const ICON_REFRESH = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 8a5.5 5.5 0 019.2-4M13.5 8a5.5 5.5 0 01-9.2 4"/><path d="M11.5 2v2.5H14M4.5 14v-2.5H2"/></svg>';
 const ICON_HEART = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.7C4.3 11 2 8.7 2 6.3A3.3 3.3 0 018 4.6a3.3 3.3 0 016 1.7c0 2.4-2.3 4.7-6 7.4z"/></svg>';
 const ICON_HEART_FILL = '<svg viewBox="0 0 16 16" fill="currentColor" stroke="none"><path d="M8 13.7C4.3 11 2 8.7 2 6.3A3.3 3.3 0 018 4.6a3.3 3.3 0 016 1.7c0 2.4-2.3 4.7-6 7.4z"/></svg>';
@@ -153,9 +155,9 @@ function buildPanelHTML() {
 
 function buildCard(img) {
   return `
-    <div class="ig-card" data-filename="${img.filename}">
+    <div class="ig-card" data-filename="${escapeHtml(img.filename).replace(/"/g, '&quot;')}">
       <div class="ig-thumb-wrap">
-        <img class="ig-thumb" src="${imageUrl(img.filename)}" loading="lazy" alt="${img.filename}">
+        <img class="ig-thumb" src="${imageUrl(img.filename)}" loading="lazy" alt="${escapeHtml(img.filename).replace(/"/g, '&quot;')}">
         <div class="ig-card-actions">
           <button class="ig-card-btn ig-card-fav${img.favorite ? ' active' : ''}" data-action="fav" data-tooltip="${img.favorite ? 'Unfavorite' : 'Favorite'}">${img.favorite ? ICON_HEART_FILL : ICON_HEART}</button>
           <button class="ig-card-btn ig-card-wb" data-action="whiteboard" data-tooltip="Add to Whiteboard">${ICON_WHITEBOARD}</button>
@@ -164,7 +166,7 @@ function buildCard(img) {
         </div>
       </div>
       <div class="ig-card-info">
-        <span class="ig-card-name">${img.filename.length > 30 ? img.filename.slice(0, 27) + '...' : img.filename}</span>
+        <span class="ig-card-name">${escapeHtml(img.filename.length > 30 ? img.filename.slice(0, 27) + '...' : img.filename)}</span>
         <span class="ig-card-meta">${formatSize(img.size)} · ${formatDate(img.modifiedAt)}</span>
       </div>
     </div>`;
@@ -185,9 +187,9 @@ function openLightbox(filename) {
   lb.innerHTML = `
     <div class="ig-lb-overlay" id="ig-lb-overlay"></div>
     <div class="ig-lb-content">
-      <img class="ig-lb-img" src="${imageUrl(filename)}" alt="${filename}">
+      <img class="ig-lb-img" src="${imageUrl(filename)}" alt="${escapeHtml(filename).replace(/"/g, '&quot;')}">
       <div class="ig-lb-bar">
-        <span class="ig-lb-name">${filename}</span>
+        <span class="ig-lb-name">${escapeHtml(filename)}</span>
         ${img ? `<span class="ig-lb-size">${formatSize(img.size)}</span>` : ''}
         <div class="ig-lb-actions">
           <button class="ig-btn" id="ig-lb-fav" data-tooltip="Toggle favorite">${img?.favorite ? ICON_HEART_FILL : ICON_HEART}</button>
@@ -387,13 +389,13 @@ function wirePanel() {
     header.addEventListener('mousedown', (e) => {
       if (e.target.closest('button')) return;
       _dragging = true;
-      _panel.classList.add('dragging');
-      const rect = _panel.getBoundingClientRect();
-      _dragOff = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-      _pendingDrag = null;
-      e.preventDefault();
-    });
-  }
+      _panel.classList.add('dragging');
+      const rect = _panel.getBoundingClientRect();
+      _dragOff = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      _pendingDrag = null;
+      e.preventDefault();
+    });
+  }
 
   // Keyboard in lightbox
   document.addEventListener('keydown', handleKey);
@@ -424,24 +426,26 @@ function openPanel() {
   _panel.innerHTML = buildPanelHTML();
   document.body.appendChild(_panel);
 
-  _panel.style.left = Math.max(20, (window.innerWidth - 780) / 2) + 'px';
-  _panel.style.top = Math.max(48, (window.innerHeight - 560) / 2) + 'px';
+  // Centred in the app frame
+  const at = centeredInFrame(780, 560);
+  _panel.style.left = at.left + 'px';
+  _panel.style.top = at.top + 'px';
 
   wirePanel();
   isVisible = true;
   refreshImages();
 
-  // Global mouse handlers for drag
-  const onMouseMove = (e) => {
-    if (!_dragging) return;
-    scheduleDragPosition(e.clientX - _dragOff.x, e.clientY - _dragOff.y);
-  };
-  const onMouseUp = () => {
-    if (!_dragging) return;
-    _dragging = false;
-    flushDragPosition();
-    if (_panel) _panel.classList.remove('dragging');
-  };
+  // Global mouse handlers for drag
+  const onMouseMove = (e) => {
+    if (!_dragging) return;
+    scheduleDragPosition(e.clientX - _dragOff.x, e.clientY - _dragOff.y);
+  };
+  const onMouseUp = () => {
+    if (!_dragging) return;
+    _dragging = false;
+    flushDragPosition();
+    if (_panel) _panel.classList.remove('dragging');
+  };
   document.addEventListener('mousemove', onMouseMove);
   document.addEventListener('mouseup', onMouseUp);
 

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

@@ -37,6 +37,7 @@ const _tunnel = createTunnelCard({
 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 };
+let _dataLoaded = false; // the status was read once (the badge's read at start-up counts)
 
 // ─── Dropdown open/close ────────────────
 
@@ -47,7 +48,12 @@ function openDropdown() {
   dd.style.display = '';
   $('invite-btn')?.classList.add('active');
   emit('panel:close-all-dropdowns-except', 'invite');
-  loadAndRender();
+  // The status as last read (the badge's read at start-up, an earlier open) paints at once once the tunnel's
+  // state is known too (an earlier open asked it); the read below redraws only what changed, and never under a
+  // field being typed in.
+  const early = _dataLoaded && _tunnelKind !== null;
+  if (early) render();
+  loadAndRender({ inPlace: early });
 }
 
 function closeDropdown() {
@@ -65,7 +71,10 @@ function toggleDropdown() {
 
 // ─── Data fetching ──────────────────────
 
-async function loadAndRender() {
+const inviteSnapshot = () => { try { return JSON.stringify([_data, _permissions, _tunnel.view()]); } catch { return ''; } };
+
+async function loadAndRender({ inPlace = false } = {}) {
+  const before = inPlace ? inviteSnapshot() : null;
   try {
     const [inviteRes, , permRes] = await Promise.all([
       fetchInviteStatus(),
@@ -73,10 +82,16 @@ async function loadAndRender() {
       fetchInvitePermissions(),
     ]);
     _data = inviteRes;
+    _dataLoaded = true;
     if (permRes?.permissions) _permissions = permRes.permissions;
   } catch (err) {
     console.warn('[invite] Failed to load status:', err);
   }
+  if (inPlace) {
+    if (inviteSnapshot() === before) return;
+    const typing = document.activeElement?.closest?.('#invite-dropdown') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName);
+    if (typing) return; // the next open shows it
+  }
   render();
 }
 
@@ -524,6 +539,7 @@ export function initInvite() {
   // Load initial badge count
   fetchInviteStatus().then((res) => {
     _data = res;
+    _dataLoaded = true;
     updateBadge();
   }).catch(() => {});
 }

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

@@ -26,7 +26,7 @@ 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'];
+const RETIRED_ACTIONS = ['toggle-toolbar', 'toggle-minimap'];
 
 // ── Combo building ──
 
@@ -94,6 +94,31 @@ export function getBinding(actionId) {
   return _bindings[actionId] || null;
 }
 
+/** The key an action is bound to as a menu shows it, or '' while it has none (the context menu, read at each open). */
+export function getShortcutLabel(actionId) {
+  const combo = _bindings[actionId];
+  return combo ? comboToDisplay(combo) : '';
+}
+
+/** Whether a module registered an action with this id. */
+export function hasAction(actionId) {
+  return _actions.has(actionId);
+}
+
+/** The action a key press is bound to, or null (a key the user bound stays that action, Shift+F10 included). */
+export function actionForKey(e) {
+  const combo = buildCombo(e);
+  return (combo && _reverseMap.get(combo)) || null;
+}
+
+/** Run a registered action as its key would. False when nothing registered it. */
+export function runAction(actionId) {
+  const handler = _actions.get(actionId);
+  if (!handler) return false;
+  handler();
+  return true;
+}
+
 // ── Central dispatcher ──
 
 function centralKeyHandler(e) {

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

@@ -259,11 +259,11 @@ async function _showSetupView() {
       <div class="link-setup-sessions">${sessions.map(s => {
         const meta = PROFILE_META[s.profile] || { label: s.profile, color: '#888' };
         return `
-          <label class="link-setup-session" data-id="${s.id}">
-            <input type="checkbox" value="${s.id}" />
+          <label class="link-setup-session" data-id="${_escapeHtml(s.id).replace(/"/g, '&quot;')}">
+            <input type="checkbox" value="${_escapeHtml(s.id).replace(/"/g, '&quot;')}" />
             <span class="link-setup-dot" style="background:${meta.color}"></span>
-            <span class="link-setup-label">${meta.label}</span>
-            <span class="link-setup-cwd">${s.cwd ? s.cwd.split(/[/\\]/).pop() : ''}</span>
+            <span class="link-setup-label">${_escapeHtml(meta.label)}</span>
+            <span class="link-setup-cwd">${s.cwd ? _escapeHtml(s.cwd.split(/[/\\]/).pop()) : ''}</span>
           </label>
         `;
       }).join('')}</div>
@@ -350,12 +350,12 @@ function _renderAgents(link) {
     return `
       <div class="link-agent ${active ? 'active' : ''}" data-idx="${i}">
         <span class="link-agent-dot" style="background:${meta.color}"></span>
-        <span class="link-agent-name">${meta.label}</span>
+        <span class="link-agent-name">${_escapeHtml(meta.label)}</span>
         ${active ? '<span class="link-agent-typing">typing...</span>' : ''}
       </div>
     `;
   }).join('<span class="link-agent-arrow">⇄</span>')
-    + `<span class="link-mode-badge ${link.mode || 'sidecar'}">${(link.mode || 'sidecar').toUpperCase()}</span>`;
+    + `<span class="link-mode-badge ${_escapeHtml(link.mode || 'sidecar').replace(/"/g, '&quot;')}">${_escapeHtml((link.mode || 'sidecar').toUpperCase())}</span>`;
 }
 
 function _renderControls(link) {
@@ -421,7 +421,7 @@ function _renderTargetSelector(link) {
   el.innerHTML = `<span class="link-target-label">Send to:</span>` +
     link.sessions.map((s, i) => {
       const meta = PROFILE_META[s.profile] || { label: s.profile, color: '#888' };
-      return `<button class="link-target-btn ${i === 0 ? 'selected' : ''}" data-idx="${i}" style="--agent-color:${meta.color}">${meta.label}</button>`;
+      return `<button class="link-target-btn ${i === 0 ? 'selected' : ''}" data-idx="${i}" style="--agent-color:${meta.color}">${_escapeHtml(meta.label)}</button>`;
     }).join('');
 
   el.querySelectorAll('.link-target-btn').forEach(btn => {
@@ -452,7 +452,7 @@ function _renderMessages() {
       <div class="link-msg ${isUser ? 'link-msg-user' : 'link-msg-agent'}">
         <div class="link-msg-header">
           <span class="link-msg-dot" style="background:${meta.color}"></span>
-          <span class="link-msg-name">${meta.label}</span>
+          <span class="link-msg-name">${_escapeHtml(meta.label)}</span>
           <span class="link-msg-time">${time}</span>
         </div>
         <div class="link-msg-content">${_escapeHtml(msg.content)}</div>
@@ -505,7 +505,7 @@ function _onSyncChunk(msg) {
     streamEl.innerHTML = `
       <div class="link-msg-header">
         <span class="link-msg-dot" style="background:${meta.color}"></span>
-        <span class="link-msg-name">${meta.label}</span>
+        <span class="link-msg-name">${_escapeHtml(meta.label)}</span>
         <span class="link-msg-time">streaming...</span>
       </div>
       <div class="link-msg-content"></div>