synabun 1.3.0 → 2.0.0-beta

package/neural-interface/public/shared/ocp-v2/ocp-v2-projectbar.js

@@ -0,0 +1,649 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// OpenCode V2 — Project bar (project + branch dropdowns)
+// Lives at the top of the .ocpv2-compose card, mirroring legacy ocp-projectbar.
+// Owns: project picker, branch picker, cwd-change reactivity. Does NOT own state
+// — delegates to panel.js via the `ctx` object so this module stays decoupled.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { getDefaultStore } from './ocp-v2-state.js';
+import { sendTextMessage } from './ocp-v2-send.js';
+import { api, onEvent } from './ocp-v2-ws.js';
+import { captureBinding, latestOnly } from './ocp-v2-binding.js';
+import { setSessionMcpProfile } from './ocp-v2-session-actions.js';
+import { storage } from '../storage.js';
+import { on } from '../state.js';
+
+let _currentStore = getDefaultStore();
+const getState = () => _currentStore.getState();
+const subscribe = (l) => _currentStore.subscribe(l);
+
+let _root = null;
+let _projectDd = null;
+let _branchDd = null;
+let _profileDd = null;
+let _recallDd = null;
+let _ctx = null;
+let _unsubscribe = null;
+let _profileSyncUnsub = null;
+let _branchCache = new Map();   // path → { branches, current, ts }
+let _docClickWired = false;
+let _docClickHandler = null;
+
+let _recallProfile = 'balanced';
+let _recallLoaded = false;
+
+let _currentProfile = 'full';
+let _defaultProfile = 'full';
+let _mcpProfiles = [];          // [{ id, label, hint }]
+let _profileLoaded = false;
+let _profileSyncVersion = 0;
+const MCP_SESSION_PROFILE_KEY = 'synabun-opencode-session-mcp-profiles';
+
+function readSessionProfiles() {
+  try {
+    const parsed = JSON.parse(storage.getItem(MCP_SESSION_PROFILE_KEY) || '{}');
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch { return {}; }
+}
+
+function savedSessionProfile(sessionId) {
+  if (!sessionId) return null;
+  return readSessionProfiles()[sessionId] || null;
+}
+
+function saveSessionProfile(sessionId, profile) {
+  if (!sessionId || !profile) return;
+  const profiles = readSessionProfiles();
+  profiles[sessionId] = profile;
+  storage.setItem(MCP_SESSION_PROFILE_KEY, JSON.stringify(profiles));
+}
+
+async function syncProfileForActiveSession() {
+  const version = ++_profileSyncVersion;
+  const state = getState();
+  // The session this read is for (ocp-v2-binding.js): its answer is that
+  // session's, and reaches the selector only while the panel is still on it.
+  const at = captureBinding(_currentStore);
+  const sessionId = at.sessionId;
+  const profile = state.sessionInfo?.mcpProfile
+    || savedSessionProfile(sessionId)
+    || _defaultProfile;
+  _currentProfile = profile;
+  _currentStore.setMcpProfile(profile);
+  applyProfileLabel();
+  if (!sessionId) return;
+  try {
+    const result = await api.mcpProfileGet(sessionId);
+    const remote = result?.data;
+    // A running serve is authoritative across windows. If no serve is pinned
+    // yet, retain the session's persisted browser-side choice for first launch.
+    if (!remote?.pinned || !remote.profile) return;
+    if (version !== _profileSyncVersion || !at.isCurrent()) return;
+    saveSessionProfile(sessionId, remote.profile);
+    _currentStore.setMcpProfile(remote.profile);
+    _currentProfile = remote.profile;
+    applyMcpProfileState(remote.profile, remote.presets);
+  } catch { /* socket may still be booting; local session state remains valid */ }
+}
+
+const RECALL_PROFILES_META = [
+  { id: 'quick',    label: 'Quick',    hint: '3 results' },
+  { id: 'balanced', label: 'Balanced', hint: '5 results' },
+  { id: 'deep',     label: 'Deep',     hint: '10 results' },
+  { id: 'custom',   label: 'Custom',   hint: 'custom' },
+];
+const RECALL_PROFILE_DEFAULTS = {
+  quick:    { limit: 3,  minImportance: 5, minScore: 0.45, maxChars: 300, includeSessions: 'never',  recencyBoost: false },
+  balanced: { limit: 5,  minImportance: 0, minScore: 0.30, maxChars: 0,   includeSessions: 'auto',   recencyBoost: false },
+  deep:     { limit: 10, minImportance: 0, minScore: 0.20, maxChars: 0,   includeSessions: 'always', recencyBoost: false },
+};
+
+const ARROW_DOWN = '▾';
+
+export function mountProjectBar(rootEl, ctx, store = getDefaultStore()) {
+  _currentStore = store;
+  unmountProjectBar();
+  _root = rootEl;
+  _ctx = ctx || {};
+
+  const bar = document.createElement('div');
+  bar.className = 'ocpv2-projectbar';
+
+  _projectDd = makeDropdown('ocpv2-project-dd', 'project...', 'Project');
+  bar.appendChild(_projectDd);
+
+  _branchDd = makeDropdown('ocpv2-branch-dd', 'branch', 'Branch', 'ocpv2-dropdown-sm');
+  bar.appendChild(_branchDd);
+
+  _profileDd = makeDropdown('ocpv2-profile-dd', 'profile', 'Tool profile', 'ocpv2-dropdown-sm');
+  bar.appendChild(_profileDd);
+
+  _recallDd = makeDropdown('ocpv2-recall-dd', 'recall', 'Recall profile', 'ocpv2-dropdown-sm');
+  bar.appendChild(_recallDd);
+
+  // Right-aligned action buttons (changelog, revert, etc.) — mirrors
+  // cp-bar-actions / cxp-projectbar-actions on Claude/Codex panels.
+  const actions = document.createElement('div');
+  actions.className = 'ocpv2-bar-actions';
+
+  const changelogBtn = document.createElement('button');
+  changelogBtn.type = 'button';
+  changelogBtn.className = 'ocpv2-bar-action';
+  changelogBtn.setAttribute('data-action', 'changelog');
+  changelogBtn.setAttribute('data-tooltip', 'Generate changelog (/synabun changelog)');
+  changelogBtn.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 1.5h8.5v13H4a1.5 1.5 0 01-1.5-1.5V3A1.5 1.5 0 014 1.5z"/><path d="M5.5 5h5M5.5 7.5h3M5.5 10h4"/></svg>';
+  changelogBtn.addEventListener('click', () => {
+    const s = getState();
+    if (s.running || !s.sessionId) return;
+    sendTextMessage('/synabun changelog').catch((err) => {
+      console.warn('[ocp-v2-projectbar] changelog send failed', err);
+    });
+  });
+  actions.appendChild(changelogBtn);
+  bar.appendChild(actions);
+
+  // Insert as the first child of the compose card so it sits above the input area.
+  if (_root.firstChild) _root.insertBefore(bar, _root.firstChild);
+  else _root.appendChild(bar);
+
+  wireProjectDd();
+  wireBranchDd();
+  wireProfileDd();
+  wireRecallDd();
+  wireDocClick();
+
+  // Shared broadcasts update only the default for future sessions. A live
+  // session keeps its own profile until its scoped serve is restarted.
+  _profileSyncUnsub = on('mcp:profile-changed', (msg = {}) => {
+    _defaultProfile = msg.defaultProfile || msg.profile || _defaultProfile;
+    applyMcpProfileState(getState().sessionId ? null : _defaultProfile, msg.presets);
+  });
+
+  _unsubscribe = subscribe((event) => {
+    if (event?.type === 'config:cwd') {
+      syncToCwd(getState().cwd || '');
+    } else if (event?.type === 'session:set') {
+      // Session switch may carry a new directory — sync best-effort.
+      // panel.js owns the canonical setCwd; this is just a defensive refresh.
+      const s = getState();
+      const dir = s.sessionInfo?.directory;
+      if (dir && dir !== getState().cwd) syncToCwd(dir);
+      syncProfileForActiveSession();
+    } else if (event?.type === 'config:mcp-profile') {
+      const state = getState();
+      const profile = state.mcpProfile || _defaultProfile;
+      if (state.sessionId) saveSessionProfile(state.sessionId, profile);
+      _currentProfile = profile;
+      applyProfileLabel();
+      if (ddIsOpen(_profileDd)) paintProfileMenu();
+    }
+  });
+
+  // Initial paint
+  syncToCwd(getState().cwd || '');
+  // Kick off projects load so the menu has options when user opens it
+  Promise.resolve(_ctx.ensureProjectsLoaded?.()).catch(() => {});
+  // Load saved recall profile so the DD shows the current selection on first open
+  loadRecallProfile().catch(() => {});
+  // Load active MCP tool profile so its label is correct on first paint
+  loadCurrentProfile().catch(() => {});
+
+  return {
+    refresh: () => syncToCwd(getState().cwd || ''),
+    destroy: unmountProjectBar,
+  };
+}
+
+export function unmountProjectBar() {
+  _profileSyncVersion += 1;
+  if (_unsubscribe) { try { _unsubscribe(); } catch {} }
+  if (_profileSyncUnsub) { try { _profileSyncUnsub(); } catch {} }
+  if (_docClickWired && _docClickHandler) {
+    document.removeEventListener('mousedown', _docClickHandler);
+    _docClickWired = false;
+    _docClickHandler = null;
+  }
+  _root?.querySelector('.ocpv2-projectbar')?.remove();
+  _root = null;
+  _projectDd = null;
+  _branchDd = null;
+  _profileDd = null;
+  _recallDd = null;
+  _ctx = null;
+  _unsubscribe = null;
+  _profileSyncUnsub = null;
+  _branchCache = new Map();
+  _profileLoaded = false;
+  _currentProfile = 'full';
+  _defaultProfile = 'full';
+  _mcpProfiles = [];
+}
+
+// ── Dropdown construction ──────────────────────────────────────────────────
+
+function makeDropdown(id, placeholder, tooltip, extraClass = '') {
+  const dd = document.createElement('div');
+  dd.id = id;
+  dd.className = 'ocpv2-dropdown' + (extraClass ? ' ' + extraClass : '');
+  dd.dataset.placeholder = placeholder;
+  if (tooltip) dd.setAttribute('data-tooltip', tooltip);
+  dd.innerHTML =
+    `<span class="ocpv2-dd-label">${placeholder}</span>`
+    + `<span class="ocpv2-dd-arrow">${ARROW_DOWN}</span>`
+    + `<div class="ocpv2-dd-menu"></div>`;
+  return dd;
+}
+
+function ddSetLabel(dd, text, hasValue) {
+  const lbl = dd?.querySelector('.ocpv2-dd-label');
+  if (!lbl) return;
+  lbl.textContent = text || dd.dataset.placeholder || '';
+  if (hasValue) dd.classList.add('has-value');
+  else dd.classList.remove('has-value');
+}
+
+// A menu that has to load something before it opens (the project list, the
+// tool profiles, the recall setting) opens only when it is still the one the
+// user asked for last: not after another menu was opened or everything was
+// closed while it loaded.
+const _menuOpenings = latestOnly();
+
+function ddOpen(dd) {
+  if (!dd) return;
+  closeAllDropdowns(dd);
+  dd.classList.add('open');
+  dd.querySelector('.ocpv2-dd-menu')?.classList.add('open');
+}
+
+function ddClose(dd) {
+  dd?.classList.remove('open');
+  dd?.querySelector('.ocpv2-dd-menu')?.classList.remove('open');
+}
+
+function ddIsOpen(dd) { return !!dd?.classList.contains('open'); }
+
+function closeAllDropdowns(except) {
+  // Closing everything (an outside click) also calls off a menu that is still loading.
+  if (!except) _menuOpenings.cancel();
+  document.querySelectorAll('.ocpv2-dropdown.open').forEach((dd) => {
+    if (dd === except) return;
+    ddClose(dd);
+  });
+}
+
+function ddPopulate(dd, items, selectedValue, onSelect) {
+  const menu = dd?.querySelector('.ocpv2-dd-menu');
+  if (!menu) return;
+  menu.innerHTML = '';
+  if (!items || !items.length) {
+    const empty = document.createElement('div');
+    empty.className = 'ocpv2-dd-option';
+    empty.style.cssText = 'opacity:0.4;cursor:default';
+    empty.textContent = '(empty)';
+    menu.appendChild(empty);
+    return;
+  }
+  for (const it of items) {
+    const opt = document.createElement('div');
+    opt.className = 'ocpv2-dd-option' + (it.value === selectedValue ? ' selected' : '');
+    opt.textContent = it.label;
+    if (it.title) opt.title = it.title;
+    opt.addEventListener('click', () => {
+      ddClose(dd);
+      onSelect?.(it.value, it);
+    });
+    menu.appendChild(opt);
+  }
+}
+
+// ── Project dropdown wiring ────────────────────────────────────────────────
+
+function wireProjectDd() {
+  _projectDd.addEventListener('click', async (event) => {
+    if (event.target.closest('.ocpv2-dd-menu')) return;
+    if (ddIsOpen(_projectDd)) { ddClose(_projectDd); return; }
+    const wanted = _menuOpenings.begin();
+    try { await _ctx.ensureProjectsLoaded?.(); } catch {}
+    if (!wanted()) return;
+    paintProjectMenu();
+    ddOpen(_projectDd);
+  });
+}
+
+function paintProjectMenu() {
+  const projects = _ctx.getProjects?.() || [];
+  const items = projects.map((p) => {
+    const path = (p && (p.path || p)) || '';
+    const label = typeof path === 'string' ? path.split('/').filter(Boolean).pop() : '';
+    return { value: String(path), label: label || String(path), title: String(path) };
+  }).filter((it) => it.value);
+
+  ddPopulate(_projectDd, items, getState().cwd || '', (value) => {
+    _ctx.setActiveProject?.(value);
+  });
+}
+
+// ── Branch dropdown wiring ─────────────────────────────────────────────────
+
+function wireBranchDd() {
+  _branchDd.addEventListener('click', async (event) => {
+    if (event.target.closest('.ocpv2-dd-menu')) return;
+    const cwd = getState().cwd;
+    if (!cwd) return;
+    if (ddIsOpen(_branchDd)) { ddClose(_branchDd); return; }
+    const wanted = _menuOpenings.begin();
+    await loadBranchesFor(cwd, /* force */ false);
+    // Another project was selected while its branches were read: this menu
+    // would be the old project's. (Or the user opened another menu meanwhile.)
+    if (!wanted() || getState().cwd !== cwd) return;
+    paintBranchMenu();
+    ddOpen(_branchDd);
+  });
+}
+
+async function loadBranchesFor(path, force) {
+  if (!path) return null;
+  const cached = _branchCache.get(path);
+  if (cached && !force) return cached;
+  try {
+    const res = await fetch(`/api/terminal/branches?path=${encodeURIComponent(path)}`);
+    const data = await res.json();
+    const out = {
+      branches: Array.isArray(data?.branches) ? data.branches : [],
+      current: data?.current || '',
+      ts: Date.now(),
+    };
+    _branchCache.set(path, out);
+    return out;
+  } catch (err) {
+    console.warn('[ocp-v2-projectbar] loadBranches failed', err);
+    return null;
+  }
+}
+
+function paintBranchMenu() {
+  const cwd = getState().cwd || '';
+  const data = _branchCache.get(cwd);
+  if (!data) {
+    ddPopulate(_branchDd, [], '', () => {});
+    return;
+  }
+  const items = (data.branches || []).map((name) => ({ value: name, label: name }));
+  ddPopulate(_branchDd, items, data.current || '', async (value) => {
+    if (!value || value === data.current) return;
+    try {
+      await fetch('/api/terminal/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: cwd, branch: value }),
+      });
+      _branchCache.delete(cwd);
+      const fresh = await loadBranchesFor(cwd, true);
+      // The label shows the branch of the project on screen: `cwd` is the one
+      // the checkout was for, and the panel may be in another by now.
+      if (fresh && (getState().cwd || '') === cwd) ddSetLabel(_branchDd, fresh.current || value, !!(fresh.current || value));
+    } catch (err) {
+      console.warn('[ocp-v2-projectbar] checkout failed', err);
+    }
+  });
+}
+
+// ── State sync ─────────────────────────────────────────────────────────────
+
+// OpenCode saw the branch change (a checkout by the model, the user or
+// another tool): drop what is cached and re-read the branch of the project on
+// screen. The event does not say which project it is about, and one refetch
+// is cheap.
+let _branchRefreshTimer = null;
+onEvent((eventType) => {
+  if (eventType !== 'vcs.branch.updated' || !_branchDd) return;
+  if (_branchRefreshTimer) clearTimeout(_branchRefreshTimer);
+  _branchRefreshTimer = setTimeout(() => {
+    _branchRefreshTimer = null;
+    const cwd = getState().cwd;
+    if (!cwd) return;
+    _branchCache.delete(cwd);
+    syncToCwd(cwd);
+  }, 300);
+});
+
+function syncToCwd(cwd) {
+  // Project label
+  const labelText = cwd ? (cwd.split('/').filter(Boolean).pop() || cwd) : (_projectDd?.dataset.placeholder || 'project...');
+  ddSetLabel(_projectDd, labelText, !!cwd);
+
+  // Branch label — load lazily; show placeholder until data arrives
+  if (!cwd) {
+    ddSetLabel(_branchDd, _branchDd?.dataset.placeholder || 'branch', false);
+    _branchCache.clear();
+    return;
+  }
+  const cached = _branchCache.get(cwd);
+  if (cached) {
+    ddSetLabel(_branchDd, cached.current || (_branchDd?.dataset.placeholder || 'branch'), !!cached.current);
+  } else {
+    ddSetLabel(_branchDd, '…', false);
+    loadBranchesFor(cwd, false).then(() => {
+      // Keyed by directory: a late answer for the project the panel has left
+      // does not relabel the one it is in.
+      if ((getState().cwd || '') !== cwd) return;
+      const fresh = _branchCache.get(cwd);
+      if (fresh) ddSetLabel(_branchDd, fresh.current || (_branchDd?.dataset.placeholder || 'branch'), !!fresh.current);
+      else ddSetLabel(_branchDd, _branchDd?.dataset.placeholder || 'branch', false);
+    });
+  }
+}
+
+// ── MCP Profile dropdown wiring ────────────────────────────────────────────
+
+function wireProfileDd() {
+  _profileDd.addEventListener('click', async (event) => {
+    if (event.target.closest('.ocpv2-dd-menu')) return;
+    if (getState().running) return;
+    if (ddIsOpen(_profileDd)) { ddClose(_profileDd); return; }
+    const wanted = _menuOpenings.begin();
+    if (!_profileLoaded) {
+      try { await loadCurrentProfile(); } catch {}
+    }
+    // The menu changes the profile of the session on screen: it does not open
+    // over a turn that started while the profiles loaded.
+    if (!wanted() || getState().running) return;
+    paintProfileMenu();
+    ddOpen(_profileDd);
+  });
+}
+
+function mcpProfileItemsFromPresets(presets) {
+  if (!presets || typeof presets !== 'object') return null;
+  return Object.entries(presets).map(([id, p]) => ({
+    id,
+    label: p?.label || id,
+    hint: `${p?.tools ?? '?'} tools`,
+  }));
+}
+
+function applyMcpProfileState(profile, presets) {
+  if (profile) _currentProfile = profile;
+  const items = mcpProfileItemsFromPresets(presets);
+  if (items) _mcpProfiles = items;
+  applyProfileLabel();
+  if (ddIsOpen(_profileDd)) paintProfileMenu();
+}
+
+function applyProfileLabel() {
+  const matched = _mcpProfiles.find((p) => p.id === _currentProfile);
+  ddSetLabel(_profileDd, matched ? matched.label : _currentProfile, !!_currentProfile);
+}
+
+async function loadCurrentProfile() {
+  try {
+    const data = await fetch('/api/mcp/profile').then((r) => r.json());
+    if (data?.ok) {
+      _defaultProfile = data.defaultProfile || data.profile || 'full';
+      applyMcpProfileState(null, data.presets);
+      await syncProfileForActiveSession();
+    }
+  } catch (err) {
+    console.warn('[ocp-v2-projectbar] loadCurrentProfile failed', err);
+  } finally {
+    _profileLoaded = true;
+    applyProfileLabel();
+  }
+}
+
+function paintProfileMenu() {
+  const menu = _profileDd?.querySelector('.ocpv2-dd-menu');
+  if (!menu) return;
+  menu.innerHTML = '';
+  if (!_mcpProfiles.length) {
+    const empty = document.createElement('div');
+    empty.className = 'ocpv2-dd-option';
+    empty.style.cssText = 'opacity:0.4;cursor:default';
+    empty.textContent = '(empty)';
+    menu.appendChild(empty);
+    return;
+  }
+  for (const p of _mcpProfiles) {
+    const opt = document.createElement('div');
+    opt.className = 'ocpv2-dd-option' + (p.id === _currentProfile ? ' selected' : '');
+    opt.style.gap = '6px';
+    opt.innerHTML = `<span>${p.label}</span><span class="ocpv2-dd-hint">${p.hint}</span>`;
+    opt.addEventListener('click', async (event) => {
+      event.stopPropagation();
+      ddClose(_profileDd);
+      if (p.id === _currentProfile) return;
+      const previous = _currentProfile;
+      const at = captureBinding(_currentStore);
+      _currentProfile = p.id;
+      applyProfileLabel();
+      try { await updateMcpProfile(p.id); }
+      catch (err) {
+        // The label is rolled back only where it was changed: after a move the
+        // selector already shows the profile of the session on screen.
+        if (at.isCurrent()) {
+          _currentProfile = previous;
+          applyProfileLabel();
+        }
+        console.error('[ocp-v2-projectbar] updateMcpProfile failed', err);
+      }
+    });
+    menu.appendChild(opt);
+  }
+}
+
+async function updateMcpProfile(profile) {
+  const state = getState();
+  if (state.running) throw new Error('Wait for the active turn to finish before changing its MCP profile.');
+  let effective = profile;
+  if (state.sessionId) {
+    // The change is for the session it was asked on (setSessionMcpProfile
+    // captures it before the request): the answer is saved under that
+    // session's key, and the store and the selector take it only while the
+    // panel is still on that binding.
+    const changed = await setSessionMcpProfile(_currentStore, api, profile, { save: saveSessionProfile });
+    if (changed?.applied) {
+      _currentProfile = changed.profile;
+      applyProfileLabel();
+    }
+    return;
+  }
+  // With no active session the selector intentionally edits only the default
+  // used by runtimes created later.
+  const response = await fetch('/api/mcp/profile', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ profile: effective }),
+  });
+  const payload = await response.json().catch(() => null);
+  if (!response.ok || payload?.ok === false) {
+    throw new Error(payload?.error || `Could not update the future-runtime MCP default (${response.status})`);
+  }
+  _defaultProfile = effective;
+  applyProfileLabel();
+}
+
+// ── Recall dropdown wiring ─────────────────────────────────────────────────
+
+function wireRecallDd() {
+  _recallDd.addEventListener('click', async (event) => {
+    if (event.target.closest('.ocpv2-dd-menu')) return;
+    if (ddIsOpen(_recallDd)) { ddClose(_recallDd); return; }
+    const wanted = _menuOpenings.begin();
+    if (!_recallLoaded) {
+      try { await loadRecallProfile(); } catch {}
+    }
+    if (!wanted()) return;
+    paintRecallMenu();
+    ddOpen(_recallDd);
+  });
+}
+
+async function loadRecallProfile() {
+  try {
+    const data = await fetch('/api/display-settings').then((r) => r.json());
+    if (data?.profile) _recallProfile = data.profile;
+  } catch (err) {
+    console.warn('[ocp-v2-projectbar] loadRecallProfile failed', err);
+  } finally {
+    _recallLoaded = true;
+  }
+  applyRecallLabel();
+}
+
+function applyRecallLabel() {
+  const matched = RECALL_PROFILES_META.find((p) => p.id === _recallProfile);
+  ddSetLabel(_recallDd, matched ? matched.label : _recallProfile, !!_recallProfile);
+}
+
+function paintRecallMenu() {
+  const menu = _recallDd?.querySelector('.ocpv2-dd-menu');
+  if (!menu) return;
+  menu.innerHTML = '';
+  for (const p of RECALL_PROFILES_META) {
+    const opt = document.createElement('div');
+    opt.className = 'ocpv2-dd-option' + (p.id === _recallProfile ? ' selected' : '');
+    opt.style.gap = '6px';
+    opt.innerHTML = `<span>${p.label}</span><span class="ocpv2-dd-hint">${p.hint}</span>`;
+    opt.addEventListener('click', async (event) => {
+      event.stopPropagation();
+      ddClose(_recallDd);
+      if (p.id === _recallProfile) return;
+      _recallProfile = p.id;
+      applyRecallLabel();
+      try { await saveRecallProfile(p.id); }
+      catch (err) { console.error('[ocp-v2-projectbar] saveRecallProfile failed', err); }
+    });
+    menu.appendChild(opt);
+  }
+}
+
+async function saveRecallProfile(profile) {
+  const current = await fetch('/api/display-settings').then((r) => r.json()).catch(() => ({}));
+  const defaults = RECALL_PROFILE_DEFAULTS[profile] || current?.recallDefaults || RECALL_PROFILE_DEFAULTS.balanced;
+  const body = {
+    ...current,
+    profile,
+    recallDefaults: profile !== 'custom' ? defaults : current?.recallDefaults,
+  };
+  await fetch('/api/display-settings', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+}
+
+// ── Outside-click closes any open dropdown ─────────────────────────────────
+
+function wireDocClick() {
+  if (_docClickWired) return;
+  _docClickHandler = (event) => {
+    if (event.target?.closest?.('.ocpv2-dropdown')) return;
+    // A click elsewhere also calls off a menu that is still loading.
+    _menuOpenings.cancel();
+    const open = document.querySelector('.ocpv2-dropdown.open');
+    if (!open) return;
+    closeAllDropdowns(null);
+  };
+  document.addEventListener('mousedown', _docClickHandler);
+  _docClickWired = true;
+}

package/neural-interface/public/shared/ocp-v2/ocp-v2-providers.js

@@ -0,0 +1,35 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// OpenCode V2 — one read of the provider list for every module
+// The model picker, the variant picker, the context gauge and the composer
+// each need `GET /api/opencode/providers/full` (the whole models.dev catalog,
+// a few hundred kilobytes). They ask through here, so opening the panel reads
+// it once. A change (`ocp-providers-changed`) drops the copy.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Long enough to cover the burst of readers at mount and at a refresh, short
+// enough that a later, deliberate refresh reads the server again.
+export const PROVIDERS_SHARE_MS = 3000;
+
+/** A cache around `fetchJson()`: concurrent and near-simultaneous callers share one read. */
+export function createSharedFetch(fetchJson, { shareMs = PROVIDERS_SHARE_MS, now = () => Date.now() } = {}) {
+  let promise = null;
+  let startedAt = 0;
+  const read = () => {
+    if (promise && now() - startedAt < shareMs) return promise;
+    startedAt = now();
+    const current = Promise.resolve().then(fetchJson);
+    promise = current;
+    // A failed read is not kept: the next caller tries again.
+    current.catch(() => { if (promise === current) promise = null; });
+    return current;
+  };
+  read.invalidate = () => { promise = null; };
+  return read;
+}
+
+/** The parsed body of GET /api/opencode/providers/full: `{ ok, data: { all, default, connected } }`. */
+export const fetchProvidersFull = createSharedFetch(() => fetch('/api/opencode/providers/full').then((r) => r.json()));
+
+if (typeof document !== 'undefined') {
+  document.addEventListener('ocp-providers-changed', () => fetchProvidersFull.invalidate());
+}