synabun 2.0.0 → 2.0.7

package/neural-interface/public/shared/assistant/asst-composer.js

@@ -12,6 +12,7 @@
 // send/stop) · file input. The other runtime controls live in the toolbar.
 
 import { matchSlashCommands, SLASH_COMMANDS } from './asst-slash.js';
+import { isLongPaste, typedText } from './asst-automation.js';
 
 const TEXT_EXTENSIONS = new Set([
   'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'json', 'html', 'css', 'scss', 'less', 'xml', 'svg',
@@ -151,6 +152,7 @@ export function createComposer(hostEl, hooks = {}) {
     files: [],    // { name, content }
     uploads: [],  // { name, size, mime, path, status: 'uploading'|'done', progress, controller }
     memories: [], // node objects
+    pastes: [],   // long text pastes still to be told apart from typed words (asst-automation.js typedText)
     slashOpen: false,
     slashIndex: 0,
     slashItems: [],
@@ -321,6 +323,9 @@ export function createComposer(hostEl, hooks = {}) {
     if (!text && !state.images.length && !state.files.length && !state.uploads.length && !state.memories.length) return;
     const payload = {
       text,
+      // What the user typed, without the long pastes: all SynaBun may learn about them from (the prompt keeps everything).
+      typed: typedText(text, state.pastes),
+      pastes: state.pastes.slice(),
       images: state.images.slice(),
       files: state.files.slice(),
       uploads: state.uploads.map(({ name, size, mime, path }) => ({ name, size, mime, path })),
@@ -334,6 +339,7 @@ export function createComposer(hostEl, hooks = {}) {
     state.files = [];
     state.uploads = [];
     state.memories = [];
+    state.pastes = [];
     renderAttachments();
     closeSlash();
     autoResize();
@@ -409,9 +415,12 @@ export function createComposer(hostEl, hooks = {}) {
     return Number.isFinite(x) && Number.isFinite(y) ? { x, y } : null;
   }
 
-  // ── Paste (images) ──
+  // ── Paste (images; long text is remembered as pasted, not typed) ──
   textarea.addEventListener('paste', (e) => {
     if (!e.clipboardData) return;
+    let pasted = '';
+    try { pasted = e.clipboardData.getData?.('text/plain') || ''; } catch { pasted = ''; }
+    if (isLongPaste(pasted)) state.pastes = [...state.pastes, pasted].slice(-20);
     for (const item of e.clipboardData.items) {
       if (item.type.startsWith('image/')) {
         const blob = item.getAsFile();
@@ -596,6 +605,7 @@ export function createComposer(hostEl, hooks = {}) {
       state.files.push(...(payload.files || []));
       state.uploads.push(...(payload.uploads || []).map((u) => ({ ...u, status: 'done', progress: 1 })));
       state.memories.push(...(payload.memories || []));
+      state.pastes = [...state.pastes, ...(payload.pastes || [])].slice(-20);
       renderAttachments();
       autoResize();
       updateSlash();

package/neural-interface/public/shared/assistant/asst-mascot.js

@@ -12,20 +12,25 @@
 //   success, error  once, when a turn that did real work ends (then idle)
 //   watch           while you type: eyes on the caret column, look() at most
 //                   every 120 ms; back 1.5 s after the last key, at once on send
+//   project/budget  attention owned by this panel's empty-state chip/menu;
+//                   commits react once; a menu prevents idle sleep
 //   sleep           the hero only, after 90 s with no input while nothing runs;
 //                   the rig wakes itself on a pointer move or a key
 //
 // Anything else is the renderer's pose: the hero idles, the "Thinking" row's
 // character thinks, the stage acts out its call. A pose the director sets is
 // held: the renderer leaves it alone until the director lets go and asks it
-// to restore its own. Only one panel animates its rigs: the visible one used
-// last (typing, focus, a new stage). Pure logic: the clock, timers and page
-// input come in through `env`, so node:test drives it with fakes
-// (tests/assistant-mascot.test.mjs).
+// to restore its own. A director knows its own panel only: nothing in this
+// module is shared between directors, so every open session dresses and
+// animates its own character at the same time as every other one (a rig that
+// is off screen parks itself: synabun-mascot.js). Pure logic: the clock,
+// timers and page input come in through `env`, so node:test drives it with
+// fakes (tests/assistant-mascot.test.mjs).
 
 export const MASCOT_TIMING = Object.freeze({
   watchEveryMs: 120,
   watchIdleMs: 1500,
+  controlDwellMs: 1500,
   sleepAfterMs: 90_000,
   realWorkMs: 3000,
   oneShotMs: Object.freeze({ success: 1000, error: 900 }),
@@ -60,32 +65,19 @@ export function lookToward(box, point, { horizontal = false } = {}) {
   return { x: unit((vx / d) * m), y: unit((vy / d) * m) };
 }
 
-// ── One panel animates: the visible one used last ──
-const directors = new Set();
-let lead = null;
-let seq = 0;
-
-function elect() {
-  let best = null;
-  for (const d of directors) if (d.visible() && (!best || d.activeAt() > best.activeAt())) best = d;
-  if (!best) for (const d of directors) if (!best || d.activeAt() > best.activeAt()) best = d;
-  if (best === lead) return;
-  const prev = lead;
-  lead = best;
-  prev?.leadChanged();
-  best?.leadChanged();
-}
-
 /**
- * createMascotDirector({ getTarget, caret, setEnabled, isVisible, env })
- * getTarget() → the renderer's visible mascot { kind: 'hero'|'stage', rig, el,
- *   parked?(), hold(on), restore() } or null; caret() → the caret's client
- *   point or null; setEnabled(on) → whether this panel's rigs animate;
- *   isVisible() → the panel is on screen.
+ * createMascotDirector({ getTarget, caret, env })
+ * getTarget() → the renderer's visible mascot { kind: 'hero'|'stage'|'working',
+ *   rig, el, parked?(), hold(on), restore() } or null; caret() → the caret's
+ *   client point or null.
+ * Control API: attend(owner, { pose, rectOf, options, open }), leave(owner),
+ * controlCommitted({ pose, options, reaction }); type(present, pointOf?) also
+ * watches a budget amount field using the same throttling as the composer.
  * env: { now, setTimeout, clearTimeout, input(fn) → unsubscribe (page pointer
  *   and key input), lastInputAt() }.
+ * All of its state is its own: one director per panel, any number at once.
  */
-export function createMascotDirector({ getTarget = () => null, caret = () => null, setEnabled = () => {}, isVisible = () => true, env = {} } = {}) {
+export function createMascotDirector({ getTarget = () => null, caret = () => null, env = {} } = {}) {
   const now = env.now || (() => Date.now());
   const later = env.setTimeout || ((fn, ms) => setTimeout(fn, ms));
   const cancel = env.clearTimeout || ((id) => clearTimeout(id));
@@ -97,6 +89,9 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
   let holding = false; // hold(true) is in force on `target`
   let shown = ''; // the pose (and then) set on `target`
   let typing = false;
+  let typingPoint = null;
+  let attention = null; // { owner, pose, rectOf, options, open }; this panel's empty-state control
+  let attentionTimer = 0;
   let typingTimer = 0;
   let lookTimer = 0;
   let lookedAt = -Infinity;
@@ -108,7 +103,6 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
   let sleepTimer = 0;
   let lastInput = now();
   let stopInput = null;
-  let activeAt = (seq += 1);
 
   const safe = (fn) => { try { return fn(); } catch { return undefined; } };
   const boxOf = (t) => safe(() => t.el?.getBoundingClientRect?.()) || null;
@@ -121,9 +115,16 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
       const point = card && card.width ? { x: card.left + Math.min(card.width * 0.3, 160), y: card.top + Math.min(card.height / 2, 28) } : null;
       return { pose: 'blocked', look: lookToward(boxOf(t), point) };
     }
-    if (oneShot && oneShot.target === t) return { pose: oneShot.pose, opts: { then: 'idle' } };
-    if (typing) return { pose: 'watch', look: lookToward(boxOf(t), safe(caret), { horizontal: true }) };
+    const attentionLook = () => {
+      const rect = attention && safe(attention.rectOf);
+      return lookToward(boxOf(t), rect && { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+    };
+    if (oneShot && oneShot.target === t) return { pose: oneShot.pose, opts: oneShot.opts || { then: 'idle' }, ...(attention ? { look: attentionLook() } : {}) };
+    if (typing) return { pose: 'watch', look: lookToward(boxOf(t), safe(typingPoint || caret), { horizontal: true }) };
     if (sleeping && t.kind === 'hero' && !safe(() => t.parked?.())) return { pose: 'sleep' };
+    if (attention && t.kind === 'hero' && !safe(() => t.parked?.())) {
+      return { pose: attention.pose, opts: safe(attention.options) || {}, look: attentionLook() };
+    }
     return null;
   }
 
@@ -151,7 +152,7 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
       return;
     }
     if (!holding) { holding = true; safe(() => t.hold(true)); }
-    const key = `${want.pose}|${want.opts?.then || ''}`;
+    const key = `${want.pose}|${want.opts?.then || ''}|${!!want.opts?.unlimited}`;
     if (key !== shown) { shown = key; safe(() => t.rig.setPose(want.pose, want.opts)); }
     if (want.look) safe(() => t.rig.look(want.look.x, want.look.y));
   }
@@ -170,7 +171,7 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
 
   function canSleep() {
     const t = target;
-    return !destroyed && !!t && t.kind === 'hero' && !safe(() => t.parked?.()) && !turnActive && !typing && !blocked && !offline && !oneShot;
+    return !destroyed && !!t && t.kind === 'hero' && !safe(() => t.parked?.()) && !turnActive && !typing && !attention?.open && !blocked && !offline && !oneShot;
   }
 
   function armSleep() {
@@ -192,18 +193,20 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     if (lookTimer) { cancel(lookTimer); lookTimer = 0; }
     if (!typing) return;
     typing = false;
+    typingPoint = null;
     apply();
     armSleep();
   }
 
   /** The draft changed: `present` false (an empty draft) ends the watch. */
-  function type(present = true) {
+  function type(present = true, pointOf = null) {
     if (destroyed) return;
-    touch();
     noteInput();
     if (!present) { stopTyping(); return; }
+    if (oneShot?.control) dropOneShot(); // a new edit resumes watching after an acknowledgement
     const first = !typing;
     typing = true;
+    typingPoint = typeof pointOf === 'function' ? pointOf : null;
     if (sleepTimer) { cancel(sleepTimer); sleepTimer = 0; }
     if (typingTimer) cancel(typingTimer);
     typingTimer = later(() => { typingTimer = 0; stopTyping(); }, MASCOT_TIMING.watchIdleMs);
@@ -237,27 +240,53 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     armSleep();
   }
 
-  function touch() {
-    activeAt = (seq += 1);
-    elect();
+  function clearAttention() {
+    if (attentionTimer) { cancel(attentionTimer); attentionTimer = 0; }
+    attention = null;
   }
 
-  const self = {
-    visible: () => !destroyed && safe(isVisible) !== false,
-    activeAt: () => activeAt,
-    leadChanged() { if (!destroyed) safe(() => setEnabled(lead === self)); },
-  };
-  directors.add(self);
-  touch();
-  if (lead !== self) self.leadChanged();
-
   return {
     /** The draft changed (typing): the mascot watches the caret column. */
     type,
     /** Blur, or the draft went away. */
     stopTyping,
+    /** Chip previews relax after a short dwell; only open menus hold attention and block sleep. */
+    attend(owner, spec) {
+      if (destroyed || (attention?.open && attention.owner !== owner && !spec.open)) return;
+      noteInput();
+      clearAttention();
+      attention = { owner, ...spec };
+      if (!attention.open) attentionTimer = later(() => {
+        clearAttention();
+        apply();
+        armSleep();
+      }, MASCOT_TIMING.controlDwellMs);
+      apply();
+      armSleep();
+    },
+    leave(owner) {
+      if (attention?.owner !== owner) return;
+      clearAttention();
+      apply();
+      armSleep();
+    },
+    /** Only acknowledged user commits call this; loads, live updates and keystrokes do not. */
+    controlCommitted({ pose, options = {}, reaction = 'nod' }) {
+      if (destroyed) return;
+      const t = safe(getTarget);
+      if (!t || t.kind !== 'hero' || safe(() => t.parked?.()) || turnActive || offline || blocked) return;
+      stopTyping();
+      noteInput();
+      dropOneShot();
+      const shot = { pose, opts: options, target: t, timer: 0, control: true };
+      shot.timer = later(() => { if (oneShot !== shot) return; oneShot = null; apply(); armSleep(); }, 900);
+      oneShot = shot;
+      apply();
+      safe(() => t.rig.react(reaction));
+      armSleep();
+    },
     /** A prompt went out: the watch hands over at once (the renderer gives the hero to the "Thinking" row). */
-    sent() { touch(); stopTyping(); },
+    sent() { clearAttention(); dropOneShot(); stopTyping(); apply(); armSleep(); },
     /** A card waits on the user (`rectOf()` → its box), or none (null). */
     setBlocked(rectOf) {
       blocked = typeof rectOf === 'function' ? rectOf : null;
@@ -278,6 +307,7 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     },
     turnStarted() {
       turnActive = true;
+      clearAttention();
       dropOneShot();
       if (sleeping) sleeping = false;
       apply();
@@ -285,29 +315,78 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     },
     /** The turn ended with `pose` ('success' | 'error' | null): played once on the rig on screen. */
     turnEnded,
-    /** The renderer's visible mascot changed; a new stage makes this panel the one that animates. */
-    retarget() {
-      if (destroyed) return;
-      const t = safe(getTarget) || null;
-      if (t && t !== target && t.kind === 'stage') touch();
-      apply();
-    },
-    /** The user is here (focus, a click): this panel animates. */
-    touch() { touch(); noteInput(); },
-    /** The host showed or hid the panel. */
-    visibilityChanged() { elect(); },
-    isLead: () => lead === self,
+    /** The renderer's visible mascot changed. */
+    retarget() { apply(); },
+    /** The user is here (focus, a click): a sleeping hero wakes, the quiet starts over. */
+    touch() { if (!destroyed) noteInput(); },
     /** For tests and devtools: what the director holds right now. */
-    state: () => ({ target: target?.kind || null, pose: shown.split('|')[0] || null, typing, blocked: !!blocked, offline, sleeping, oneShot: oneShot?.pose || null, lead: lead === self }),
+    state: () => ({ target: target?.kind || null, pose: shown.split('|')[0] || null, typing, attention: attention?.pose || null, menuOpen: !!attention?.open, blocked: !!blocked, offline, sleeping, oneShot: oneShot?.pose || null }),
     destroy() {
       if (destroyed) return;
       if (target && holding) safe(() => target.hold(false));
       destroyed = true;
+      clearAttention();
       for (const id of [typingTimer, lookTimer, sleepTimer]) if (id) cancel(id);
       dropOneShot();
       if (stopInput) { safe(stopInput); stopInput = null; }
-      directors.delete(self);
-      if (lead === self) { lead = null; elect(); }
+    },
+  };
+}
+
+/** Wire one empty-state chip and its body-level menu to its panel's director. No rig or clock here. */
+export function createMascotControl(anchor, { director = () => null, pose, options = () => ({}) } = {}) {
+  const owner = {};
+  let menu = null, preview = null, watched = false, destroyed = false;
+  const listeners = [];
+  const listen = (node, event, fn) => { node.addEventListener(event, fn); listeners.push(() => node.removeEventListener(event, fn)); };
+  function attend(node = anchor) {
+    if (destroyed) return;
+    preview = node;
+    director()?.attend(owner, { pose, options, open: !!menu, rectOf: () => node.getBoundingClientRect() });
+  }
+  const leave = () => { if (!menu) { preview = null; director()?.leave(owner); } };
+  listen(anchor, 'pointerenter', () => attend(menu || anchor));
+  listen(anchor, 'focus', () => attend(menu || anchor));
+  listen(anchor, 'pointerleave', () => { if (document.activeElement !== anchor) leave(); });
+  listen(anchor, 'blur', leave);
+  let stopMenu = () => {};
+  return {
+    open(node) {
+      if (destroyed || !node) return;
+      stopMenu();
+      menu = node;
+      const follow = e => {
+        const option = e.target.closest?.('.asst-dd-item, input, label, button');
+        if (option && node.contains(option)) attend(option);
+      };
+      const type = e => {
+        if (!e.target.matches?.('.asst-budget-input')) return;
+        watched = true;
+        director()?.type(true, () => {
+          const r = e.target.getBoundingClientRect();
+          return { x: r.left + Math.min(r.width - 12, 12 + e.target.value.length * 7), y: r.top + r.height / 2 };
+        });
+      };
+      node.addEventListener('pointerover', follow);
+      node.addEventListener('focusin', follow);
+      node.addEventListener('input', type);
+      stopMenu = () => {
+        node.removeEventListener('pointerover', follow);
+        node.removeEventListener('focusin', follow);
+        node.removeEventListener('input', type);
+      };
+      attend(node.contains(document.activeElement) ? document.activeElement : node);
+    },
+    close() {
+      stopMenu(); menu = null; preview = null;
+      if (watched) { director()?.stopTyping(); watched = false; }
+      director()?.leave(owner);
+    },
+    commit(reaction) { if (!destroyed) director()?.controlCommitted({ pose, options: options(), reaction }); },
+    refresh() { if (preview) attend(preview); },
+    destroy() {
+      this.close(); destroyed = true;
+      for (const off of listeners) off();
     },
   };
 }

package/neural-interface/public/shared/assistant/asst-menu.js

@@ -21,6 +21,7 @@
 //   info            { label, value }                 → non-interactive row
 //   tag             { label }                        → non-interactive badge row
 //   input           { placeholder, value, onSubmit } → inline text field
+// `restoreFocus` on an item or input sends focus back to the anchor once it is chosen.
 // Keys: ↑/↓ move, Home/End jump, Enter/Space activate, Esc closes (focus back
 // to the anchor), Tab closes. The optional filter hides non-matching items and
 // any group left empty.
@@ -72,6 +73,7 @@ export function closeMenu({ restoreFocus = false } = {}) {
   menu.remove();
   if (anchor?.isConnected) {
     if (anchor.getAttribute('aria-haspopup')) anchor.setAttribute('aria-expanded', 'false');
+    anchor.removeAttribute('aria-controls');
     if (restoreFocus) { try { anchor.focus({ preventScroll: true }); } catch { /* detached */ } }
   }
   try { onClose?.(); } catch { /* listener error */ }
@@ -115,7 +117,7 @@ function buildItems(list, items, { role, onActivate }) {
       input.value = spec.value || '';
       input.setAttribute('aria-label', spec.label || spec.placeholder || 'Value');
       input.dataset.submit = '1';
-      input._asstSubmit = (value) => { closeMenu(); spec.onSubmit?.(value); };
+      input._asstSubmit = (value) => { closeMenu({ restoreFocus: !!spec.restoreFocus }); spec.onSubmit?.(value); };
       list.appendChild(input);
       continue;
     }
@@ -160,7 +162,7 @@ function buildItems(list, items, { role, onActivate }) {
 }
 
 /** Hide items that do not match `query`, then any header/separator left without items. */
-export function applyMenuFilter(list, query) {
+export function applyMenuFilter(list, query, emptyLabel = 'No matches') {
   const q = String(query || '').trim().toLowerCase();
   const rows = [...list.children];
   for (const row of rows) {
@@ -192,7 +194,7 @@ export function applyMenuFilter(list, query) {
   let empty = list.querySelector('.asst-dd-empty.asst-dd-noresults');
   const hasItem = rows.some(r => !r.hidden && (r.classList.contains('asst-dd-item') || r.classList.contains('asst-dd-input')));
   if (q && !hasItem) {
-    if (!empty) { empty = el('div', 'asst-dd-empty asst-dd-noresults', 'No matches'); list.appendChild(empty); }
+    if (!empty) { empty = el('div', 'asst-dd-empty asst-dd-noresults', emptyLabel); list.appendChild(empty); }
     empty.hidden = false;
   } else if (empty) empty.hidden = true;
 }
@@ -286,13 +288,15 @@ export function openMenu(anchor, opts = {}) {
     closeMenu({ restoreFocus: !!item.restoreFocus });
     item.onSelect?.(item, node);
   };
-  buildItems(list, items, { role, onActivate: activate });
-  if (width) menu.style.minWidth = `${width}px`;
+  if (opts.content) list.appendChild(opts.content);
+  else buildItems(list, items, { role, onActivate: activate });
+  if (width) menu.style.minWidth = opts.repositionOnResize ? `min(${width}px, calc(100vw - 16px))` : `${width}px`;
+  if (width && opts.repositionOnResize) menu.style.width = `min(${width}px, calc(100vw - 16px))`;
   document.body.appendChild(menu);
   positionMenu(menu, anchor, placement);
 
   if (filterInput) {
-    filterInput.addEventListener('input', () => { applyMenuFilter(list, filterInput.value); positionMenu(menu, anchor, placement); });
+    filterInput.addEventListener('input', () => { applyMenuFilter(list, filterInput.value, opts.filterEmptyLabel); positionMenu(menu, anchor, placement); });
   }
 
   const onDocDown = (e) => {
@@ -308,6 +312,15 @@ export function openMenu(anchor, opts = {}) {
     const nodes = focusables(menu);
     const idx = nodes.indexOf(document.activeElement);
     if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeMenu({ restoreFocus: true }); return; }
+    if (role === 'dialog') {
+      if (e.key === 'Tab') {
+        const fields = [...menu.querySelectorAll('button, input')].filter(node => !node.disabled && !node.hidden);
+        const index = fields.indexOf(document.activeElement);
+        if (e.shiftKey && index <= 0) { e.preventDefault(); fields.at(-1)?.focus(); }
+        else if (!e.shiftKey && (index < 0 || index === fields.length - 1)) { e.preventDefault(); fields[0]?.focus(); }
+      }
+      return; // native number/switch keys and Enter belong to the form
+    }
     if (e.key === 'Tab') { closeMenu(); return; }
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
       e.preventDefault(); e.stopPropagation();
@@ -341,21 +354,24 @@ export function openMenu(anchor, opts = {}) {
     // Keep single-letter global keybinds out of an open menu.
     e.stopPropagation();
   };
-  const onResize = () => closeMenu();
+  const onResize = () => opts.repositionOnResize ? positionMenu(menu, anchor, placement) : closeMenu();
+  const onBlur = () => closeMenu();
   document.addEventListener('mousedown', onDocDown, true);
-  document.addEventListener('keydown', onKey, true);
+  const keyTarget = role === 'dialog' ? window : document;
+  keyTarget.addEventListener('keydown', onKey, true);
   window.addEventListener('resize', onResize);
-  window.addEventListener('blur', onResize);
+  window.addEventListener('blur', onBlur);
   const cleanup = () => {
     document.removeEventListener('mousedown', onDocDown, true);
-    document.removeEventListener('keydown', onKey, true);
+    keyTarget.removeEventListener('keydown', onKey, true);
     window.removeEventListener('resize', onResize);
-    window.removeEventListener('blur', onResize);
+    window.removeEventListener('blur', onBlur);
   };
 
   _open = { menu, anchor, onClose, cleanup };
   if (anchor.getAttribute('aria-haspopup')) anchor.setAttribute('aria-expanded', 'true');
   anchor.setAttribute('aria-controls', menu.id);
+  opts.onOpen?.(menu);
 
   const selected = list.querySelector('.asst-dd-item[data-checked="1"]:not([disabled])');
   const first = focusables(menu).find(n => n.classList.contains('asst-dd-item')) || focusables(menu)[0];