synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/ui-cost-widget.js

@@ -531,26 +531,47 @@ function _toggleCollapse() {
 
 // ── Drag ──
 
-function _makeDraggable(header) {
-  header.style.cursor = 'grab';
-
-  header.addEventListener('mousedown', (e) => {
+function _makeDraggable(header) {
+  header.style.cursor = 'grab';
+
+  header.addEventListener('mousedown', (e) => {
     if (e.target.closest('.cw-collapse') || e.target.closest('.cw-scan')) return;
     e.preventDefault();
 
     // If docked, undock on drag
     if (_docked) _undock();
-
-    const rect = _widget.getBoundingClientRect();
-    _drag = {
-      startX: e.clientX,
-      startY: e.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-    };
-    header.style.cursor = 'grabbing';
-
-    // Reset right/bottom positioning and switch to left/top
+
+    const rect = _widget.getBoundingClientRect();
+    _drag = {
+      startX: e.clientX,
+      startY: e.clientY,
+      origLeft: rect.left,
+      origTop: rect.top,
+      width: rect.width,
+      height: rect.height,
+    };
+    let dragRaf = 0;
+    let pendingPos = null;
+    const applyDrag = () => {
+      dragRaf = 0;
+      if (!_widget || !pendingPos) return;
+      _widget.style.left = pendingPos.left + 'px';
+      _widget.style.top = pendingPos.top + 'px';
+    };
+    const scheduleDrag = (left, top) => {
+      pendingPos = { left, top };
+      if (!dragRaf) dragRaf = requestAnimationFrame(applyDrag);
+    };
+    const flushDrag = () => {
+      if (dragRaf) {
+        cancelAnimationFrame(dragRaf);
+        dragRaf = 0;
+      }
+      applyDrag();
+    };
+    header.style.cursor = 'grabbing';
+
+    // Reset right/bottom positioning and switch to left/top
     _widget.style.right = 'auto';
     _widget.style.bottom = 'auto';
     _widget.style.left = _drag.origLeft + 'px';
@@ -560,25 +581,25 @@ function _makeDraggable(header) {
       if (!_drag) return;
       const dx = ev.clientX - _drag.startX;
       const dy = ev.clientY - _drag.startY;
-      let newLeft = _drag.origLeft + dx;
-      let newTop = _drag.origTop + dy;
-      // Constrain to viewport
-      const ww = _widget.offsetWidth;
-      const wh = _widget.offsetHeight;
-      newLeft = Math.max(0, Math.min(window.innerWidth - ww, newLeft));
-      newTop = Math.max(0, Math.min(window.innerHeight - wh, newTop));
-      _widget.style.left = newLeft + 'px';
-      _widget.style.top = newTop + 'px';
-    };
-
-    const onUp = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      header.style.cursor = 'grab';
-      if (_drag) {
-        _savePos(parseInt(_widget.style.left), parseInt(_widget.style.top));
-        _drag = null;
-      }
+      let newLeft = _drag.origLeft + dx;
+      let newTop = _drag.origTop + dy;
+      // Constrain to viewport
+      const ww = _drag.width;
+      const wh = _drag.height;
+      newLeft = Math.max(0, Math.min(window.innerWidth - ww, newLeft));
+      newTop = Math.max(0, Math.min(window.innerHeight - wh, newTop));
+      scheduleDrag(newLeft, newTop);
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      header.style.cursor = 'grab';
+      if (_drag) {
+        flushDrag();
+        _savePos(parseInt(_widget.style.left), parseInt(_widget.style.top));
+        _drag = null;
+      }
     };
 
     document.addEventListener('mousemove', onMove);

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

@@ -1,3 +1,4 @@
+import { mountMemoryHistory } from './ui-memory-maintenance.js';
 // ═══════════════════════════════════════════
 // SynaBun Neural Interface — Detail Cards (Multi-Instance)
 // ═══════════════════════════════════════════
@@ -7,12 +8,12 @@
 // again brings its card to front instead of duplicating.
 
 import { state, emit, on } from './state.js';
-import { updateMemory, deleteMemory } from './api.js';
+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 } from './utils.js';
-import { t } from './i18n.js';
+import { truncate, formatMemoryContent, exportMemoryAsMarkdown, rafThrottle } from './utils.js';
+import { t, getLocale } from './i18n.js';
 import { savePanelLayout, restorePanelLayout } from './ui-panels.js';
 import { sendSync as _sendSync, hasPermission, isGuest } from './ui-sync.js';
 
@@ -128,9 +129,21 @@ function showTagDeleteModal(tagName, onConfirm) {
 // MARKDOWN CONTENT EDITOR (edit mode)
 // ═══════════════════════════════════════════
 
-function enterEditMode(card, node) {
+async function enterEditMode(card, node) {
   const cardState = _openCards.get(node.id);
-  if (!cardState) return;
+  if (!cardState || cardState.isEditing) return;
+  try {
+    const full = await fetchMemory(node.id);
+    if (!card.isConnected || _openCards.get(node.id) !== cardState) return;
+    if (typeof full?.payload?.content !== 'string') throw new Error('Could not load complete memory.');
+    node.payload.content=full.payload.content;
+    node.revision=full.revision;
+    delete node.payload.contentTruncated;
+  } catch(error) {
+    const warning=document.createElement('p');warning.textContent=error.message;
+    q(card,'content').prepend(warning);return;
+  }
+
   cardState.isEditing = true;
 
   const contentEl = q(card, 'content');
@@ -166,10 +179,12 @@ function enterEditMode(card, node) {
   textarea.value = node.payload.content || '';
   textarea.spellcheck = false;
 
-  function autoResize() {
+  // Reading scrollHeight forces a synchronous reflow; coalesce to one per frame
+  // so fast typing doesn't thrash layout on every keystroke.
+  const autoResize = rafThrottle(() => {
     textarea.style.height = 'auto';
     textarea.style.height = Math.min(360, Math.max(120, textarea.scrollHeight)) + 'px';
-  }
+  });
   textarea.addEventListener('input', autoResize);
 
   const actions = document.createElement('div');
@@ -263,10 +278,15 @@ async function exitEditMode(card, node, save) {
     const textarea = editor.querySelector('.md-textarea');
     const newContent = textarea.value;
     try {
-      await updateMemory(node.id, { content: newContent });
+      const saved = await updateMemory(node.id, { content: newContent, expected_revision: node.revision });
+      node.revision = saved.revision;
       node.payload.content = newContent;
     } catch (err) {
       console.error('Content save failed:', err);
+      let error = editor.querySelector('[data-save-error]');
+      if (!error) { error=document.createElement('p'); error.dataset.saveError='true';editor.append(error); }
+      error.textContent=err.message;
+      return; // Keep the unsaved draft available after a revision conflict.
     }
   }
 
@@ -433,9 +453,31 @@ async function changeMemoryCategory(card, node, newCategory) {
 // CREATE DETAIL CARD DOM
 // ═══════════════════════════════════════════
 
+// The card shell is a large static HTML+SVG template that only varies by
+// panelId (3 spots) and the session locale. Parsing this string on every card
+// open (i.e. every node click) is wasted work — build it once per locale and
+// cloneNode() per open, which is markedly cheaper than re-parsing innerHTML.
+let _cardTemplateNode = null;
+let _cardTemplateLocale = null;
+
 function createDetailCard(panelId) {
-  const el = document.createElement('div');
+  const loc = getLocale();
+  if (!_cardTemplateNode || _cardTemplateLocale !== loc) {
+    _cardTemplateNode = _buildCardTemplate();
+    _cardTemplateLocale = loc;
+  }
+  const el = _cardTemplateNode.cloneNode(true);
   el.id = panelId;
+  // Patch the panelId-dependent hooks the drag/pin systems key off.
+  const dragEl = el.querySelector('.detail-header.drag-handle');
+  if (dragEl) dragEl.setAttribute('data-drag', panelId);
+  const pinEl = el.querySelector('.pin-btn');
+  if (pinEl) pinEl.setAttribute('data-pin', panelId);
+  return el;
+}
+
+function _buildCardTemplate() {
+  const el = document.createElement('div');
   el.className = 'detail-card glass resizable';
 
   el.innerHTML = `
@@ -447,7 +489,7 @@ function createDetailCard(panelId) {
     <div class="resize-handle resize-handle-tr" data-resize="tr"></div>
     <div class="resize-handle resize-handle-bl" data-resize="bl"></div>
     <div class="resize-handle resize-handle-br" data-resize="br"></div>
-    <div class="detail-header drag-handle" data-drag="${panelId}">
+    <div class="detail-header drag-handle" data-drag="">
       <div class="detail-header-actions">
         <button class="detail-action-btn" data-role="edit-btn" data-tooltip="${t('detail.edit')}"><svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
         <button class="detail-action-btn detail-action-btn--gold" data-role="bookmark-btn" data-tooltip="${t('detail.bookmark')}"><svg viewBox="0 0 24 24"><path d="M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16l-7-4-7 4V5z"/></svg></button>
@@ -457,7 +499,7 @@ function createDetailCard(panelId) {
         <span class="detail-action-btn detail-drag-to-term" draggable="true" data-role="drag-to-term" data-tooltip="Drag to terminal"><svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6"/><line x1="12" y1="19" x2="20" y2="19"/></svg></span>
         <button class="detail-action-btn" data-role="compact-btn" data-tooltip="${t('detail.compact')}"><svg viewBox="0 0 24 24"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg></button>
         <div class="detail-action-sep"></div>
-        <button class="detail-action-btn pin-btn" data-pin="${panelId}" data-tooltip="${t('common.pin')}"><svg viewBox="0 0 24 24"><path d="M9 4v4.5L7.5 10H6v2h4v7l2 1 2-1v-7h4v-2h-1.5L15 8.5V4H9z" stroke-linejoin="round" stroke-linecap="round"/></svg></button>
+        <button class="detail-action-btn pin-btn" data-pin="" data-tooltip="${t('common.pin')}"><svg viewBox="0 0 24 24"><path d="M9 4v4.5L7.5 10H6v2h4v7l2 1 2-1v-7h4v-2h-1.5L15 8.5V4H9z" stroke-linejoin="round" stroke-linecap="round"/></svg></button>
         <button class="detail-action-btn detail-action-btn--close" data-role="close-btn" data-tooltip="${t('common.close')}">&times;</button>
       </div>
       <div class="detail-header-category">
@@ -585,6 +627,11 @@ export function openMemoryCard(node, savedPosition) {
 
   const panelId = 'detail-card-' + node.id.slice(0, 8);
   const card = createDetailCard(panelId);
+  if (!node.payload?._isOpenClaw && !isGuest()) mountMemoryHistory(card.querySelector('.detail-body'),node.id,async()=>{
+    const fresh=await fetchMemory(node.id);
+    if(fresh?.payload){node.payload=fresh.payload;const target=q(card,'content');if(target)target.innerHTML=formatMemoryContent(fresh.payload.content);}
+    emit('stats:update');
+  });
   const p = node.payload;
   const color = catColor(p.category);
 
@@ -723,6 +770,21 @@ export function openMemoryCard(node, savedPosition) {
   const contentEl = q(card, 'content');
   contentEl.innerHTML = formatMemoryContent(p.content);
 
+  // Graph payloads may carry truncated content (fields=graph) — hydrate the
+  // full memory before the user can read or edit a clipped version.
+  if (p.contentTruncated) {
+    fetchMemory(node.id).then((full) => {
+      const fullContent = full?.payload?.content ?? full?.content;
+      if (typeof fullContent !== 'string') return;
+      p.content = fullContent;
+      delete p.contentTruncated;
+      const cardState = _openCards.get(node.id);
+      if (cardState && !cardState.isEditing) {
+        contentEl.innerHTML = formatMemoryContent(fullContent);
+      }
+    }).catch(() => {});
+  }
+
   // Edit button
   q(card, 'edit-btn').onclick = () => enterEditMode(card, node);
 
@@ -1106,12 +1168,13 @@ export function initDetailPanel() {
   });
 
   // Persist open card positions after resize/drag and sync to other clients
-  on('detail:layout-changed', () => {
+  on('detail:layout-changed', (payload) => {
     persistOpenCards();
-    // Send move/resize sync for all open cards (the event doesn't tell us which card changed,
-    // so we sync all — the receiving end ignores unchanged values)
+    // Sync only the card that moved when the event says which one; fall back
+    // to syncing all for emitters that don't pass a panelId
     if (!_isRemoteCardOp) {
       for (const [id, c] of _openCards) {
+        if (payload?.panelId && c.el.id !== payload.panelId) continue;
         sendSync({
           type: 'card:moved',
           memoryId: id,