synabun 1.3.0 → 2.0.0-beta

package/neural-interface/public/shared/ocp-v2/ocp-v2-confirm-logic.js

@@ -0,0 +1,117 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// OpenCode V2 — confirming what publishes or destroys (no DOM)
+// The panel never asks with a native dialog (window.confirm): a browser driven
+// by an automation accepts those by itself, so one click would publish a
+// transcript or delete a session. A confirmation is two steps, both in the
+// panel:
+//   1. ask()      arms it: the panel shows what will happen, the button that
+//                 does it and Cancel (ocp-v2-confirm.js draws that row)
+//   2. confirm()  the click on that button, the only thing that resolves true
+// Armed is not agreed. It ends as "no" when it is cancelled, when it times out,
+// when another question takes its place, and when the panel is bound to
+// another session while it waits (ocp-v2-binding.js): the question on screen
+// was about the session the panel has left.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { captureBinding, onRebind } from './ocp-v2-binding.js';
+
+export const CONFIRM_TIMEOUT_MS = 15_000;
+// A second click this soon after the first is the same gesture (a double
+// click, a click that bounced): it confirms nothing, and the question stays.
+export const CONFIRM_MIN_DELAY_MS = 350;
+
+/**
+ * One question at a time for one panel.
+ *   ask({ key, text, confirmLabel, cancelLabel, surface })
+ *                    → Promise<boolean>; true only after confirm(key).
+ *                      `key` names the action ("share:ses_1"), `text` says what
+ *                      will happen, `surface` is where the row is drawn. A
+ *                      question without a key or a text is not asked: false.
+ *   confirm(key)     step two → true when that question was armed, in time and
+ *                      on the binding it was asked on
+ *   cancel(match)    `match`: nothing (whatever is armed), a key, or
+ *                      `(view) => boolean`
+ *   armed()          the question on screen (`{ key, text, confirmLabel,
+ *                      cancelLabel, surface }`), or null
+ *   onChange(fn)     `fn(view | null, reason)` whenever the question changes;
+ *                      reason: armed / confirmed / cancelled / timeout /
+ *                      replaced / moved
+ * `store` is the panel store the questions belong to; without one nothing is
+ * tied to a session.
+ */
+export function createConfirmations({
+  store = null, timeoutMs = CONFIRM_TIMEOUT_MS, minDelayMs = CONFIRM_MIN_DELAY_MS,
+  now = Date.now, setTimer = setTimeout, clearTimer = clearTimeout,
+} = {}) {
+  let armed = null;                 // { view, at, armedAt, timer, settle }
+  const listeners = new Set();
+
+  const notify = (reason) => {
+    const view = armed ? armed.view : null;
+    for (const fn of [...listeners]) {
+      try { fn(view, reason); } catch (err) { console.warn('[ocp-v2-confirm] listener failed', err); }
+    }
+  };
+  function end(agreed, reason) {
+    const was = armed;
+    if (!was) return false;
+    armed = null;
+    clearTimer(was.timer);
+    was.settle(agreed === true);
+    notify(reason);
+    return true;
+  }
+  const matches = (match) => {
+    if (!armed) return false;
+    if (match === undefined) return true;
+    if (typeof match === 'function') { try { return match(armed.view) === true; } catch { return false; } }
+    return armed.view.key === String(match);
+  };
+
+  function ask({ key, text, confirmLabel, cancelLabel, surface } = {}) {
+    const view = Object.freeze({
+      key: String(key || ''),
+      text: String(text || ''),
+      confirmLabel: String(confirmLabel || 'Confirm'),
+      cancelLabel: String(cancelLabel || 'Cancel'),
+      surface: String(surface || ''),
+    });
+    // A question that does not say what will happen is not asked, and nothing
+    // is agreed to.
+    if (!view.key || !view.text.trim()) return Promise.resolve(false);
+    end(false, 'replaced');
+    // The session the question is about: the one on screen when it is asked.
+    const at = store ? captureBinding(store) : null;
+    return new Promise((resolve) => {
+      const entry = { view, at, armedAt: now(), settle: resolve, timer: null };
+      entry.timer = setTimer(() => { if (armed === entry) end(false, 'timeout'); }, timeoutMs);
+      entry.timer?.unref?.();
+      armed = entry;
+      notify('armed');
+    });
+  }
+
+  // Step two. (Not called `confirm`: nothing here is the browser's dialog.)
+  function agree(key) {
+    if (key === undefined || !matches(String(key))) return false;
+    if (armed.at && !armed.at.isCurrent()) { end(false, 'moved'); return false; }
+    const waited = now() - armed.armedAt;
+    if (waited >= timeoutMs) { end(false, 'timeout'); return false; }
+    if (waited < minDelayMs) return false;
+    return end(true, 'confirmed');
+  }
+
+  const unsubscribe = store
+    ? onRebind(store, () => { if (armed?.at && !armed.at.isCurrent()) end(false, 'moved'); })
+    : null;
+
+  return {
+    ask,
+    confirm: agree,
+    cancel: (match, reason = 'cancelled') => (matches(match) ? end(false, reason) : false),
+    armed: () => (armed ? armed.view : null),
+    isArmed: (key) => !!armed && armed.view.key === String(key || ''),
+    onChange(fn) { listeners.add(fn); return () => listeners.delete(fn); },
+    destroy() { end(false, 'cancelled'); try { unsubscribe?.(); } catch { /* already gone */ } listeners.clear(); },
+  };
+}

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

@@ -0,0 +1,59 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// OpenCode V2 — the row an armed confirmation shows (DOM)
+// What will happen, the button that does it, and Cancel: the neutral banner the
+// "Undone … Restore" line uses, with the panel's inline action buttons. When a
+// question is armed, by whom and for how long is in ocp-v2-confirm-logic.js;
+// each surface (the session menu, the panel, the naming dialog, the
+// environment popover) puts the row where its action is.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** The row for `view` (confirms.armed()). Its buttons answer through `confirms`. */
+export function confirmRow(confirms, view) {
+  const row = document.createElement('div');
+  row.className = 'ocpv2-retry-banner ocpv2-revert-banner ocpv2-confirm';
+  row.dataset.confirmKey = view.key;
+  row.setAttribute('role', 'alertdialog');
+  const text = document.createElement('span');
+  text.className = 'ocpv2-retry-message ocpv2-confirm-text';
+  text.textContent = view.text;
+  const answer = (cls, label, onClick) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = `ocpv2-inline-action ${cls}`;
+    btn.textContent = label;
+    btn.addEventListener('click', (event) => { event.stopPropagation(); onClick(); });
+    return btn;
+  };
+  row.append(
+    text,
+    answer('ocpv2-confirm-yes', view.confirmLabel, () => confirms.confirm(view.key)),
+    answer('ocpv2-confirm-no', view.cancelLabel, () => confirms.cancel(view.key)),
+  );
+  // Inside a menu row a click on the question is not a click on the row.
+  row.addEventListener('click', (event) => event.stopPropagation());
+  return row;
+}
+
+/**
+ * Keeps `root` showing the row of the question that is armed for `surface`,
+ * and no other: under `anchorFor(key)` when that element is a child of `root`,
+ * else as `root`'s first child. Call it after `root` was filled again and
+ * whenever the question changes.
+ */
+export function syncConfirmRow(confirms, root, surface, anchorFor = () => null) {
+  if (!root) return null;
+  const view = confirms.armed();
+  const mine = view && view.surface === surface ? view : null;
+  let shown = null;
+  for (const child of [...(root.children || [])]) {
+    if (!String(child.className || '').split(/\s+/).includes('ocpv2-confirm')) continue;
+    if (mine && !shown && child.dataset?.confirmKey === mine.key) shown = child;
+    else child.remove();
+  }
+  if (!mine || shown) return shown;
+  const row = confirmRow(confirms, mine);
+  const anchor = anchorFor(mine.key);
+  if (anchor && anchor.parentNode === root) root.insertBefore(row, anchor.nextSibling);
+  else root.insertBefore(row, root.firstChild);
+  return row;
+}

package/neural-interface/public/shared/ocp-v2/ocp-v2-context-gauge.js

@@ -0,0 +1,252 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// OpenCode V2 — Context window gauge (the reading, not a widget)
+// Derives usage from the newest assistant message already in the panel store
+// (populated by sessionMessages + live message.updated events) and uses
+// provider model metadata as the context-window denominator. We do NOT call
+// the v2 session.context endpoint: chat traffic still flows through the v1
+// prompt API, so v2's separate context projection is empty for our sessions.
+// The reading is kept in the store's `contextGauge`; the header cog and its
+// Context settings popover (ocp-v2-context-menu.js) are what show it.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { getDefaultStore } from './ocp-v2-state.js';
+import { fetchProvidersFull } from './ocp-v2-providers.js';
+import { captureBinding } from './ocp-v2-binding.js';
+
+let _providers = null;
+let _providersPromise = null;
+
+/** Keeps `store.contextGauge` current for the session the store is on. */
+export function trackContextGauge(store = getDefaultStore()) {
+  let destroyed = false;
+  let refreshTimer = 0;
+  let refreshSeq = 0;
+
+  function scheduleRefresh(reason = 'state', delayMs = 250) {
+    if (destroyed) return;
+    clearTimeout(refreshTimer);
+    refreshTimer = setTimeout(() => {
+      refreshTimer = 0;
+      refresh(reason).catch((err) => {
+        if (!destroyed) console.warn('[ocp-v2-context-gauge] refresh failed', err);
+      });
+    }, Math.max(0, delayMs));
+  }
+
+  async function refresh(reason = 'manual') {
+    if (destroyed) return false;
+    const s = store.getState();
+    const sessionId = s.sessionId;
+    if (!sessionId) {
+      store.resetContextGauge?.('idle');
+      return false;
+    }
+
+    const seq = ++refreshSeq;
+    // The gauge of the binding this refresh was started on: an answer for an
+    // earlier one (another session, or an earlier visit to this one) is dropped.
+    const at = captureBinding(store);
+    const current = s.contextGauge || {};
+    if (current.status !== 'ready') {
+      store.setContextGauge?.({ status: 'pending', error: '', updatedAt: Date.now() });
+    }
+
+    try {
+      const providers = await loadProviders();
+      if (destroyed || seq !== refreshSeq || !at.isCurrent()) return false;
+
+      const tokenBlock = findNewestTokenBlockFromStore(store.getState());
+      const model = resolveActiveModel(store.getState(), tokenBlock);
+      const contextWindow = resolveContextWindow(providers, model);
+      const usedTokens = tokenBlock?.usedTokens || 0;
+      const percent = usedTokens && contextWindow ? (usedTokens / contextWindow) * 100 : 0;
+
+      store.setContextGauge?.({
+        status: usedTokens > 0 && contextWindow ? 'ready' : 'pending',
+        usedTokens,
+        contextWindow: contextWindow || null,
+        percent,
+        model: model?.modelID || null,
+        providerID: model?.providerID || null,
+        basis: tokenBlock?.basis || 'message.tokens',
+        breakdown: tokenBlock?.breakdown || null,
+        messageId: tokenBlock?.messageId || '',
+        updatedAt: Date.now(),
+        error: usedTokens && !contextWindow ? 'context window unavailable for selected model' : '',
+      });
+      return true;
+    } catch (err) {
+      if (destroyed || seq !== refreshSeq || !at.isCurrent()) return false;
+      store.setContextGauge?.({
+        status: 'pending',
+        updatedAt: Date.now(),
+        error: err?.message || String(err),
+      });
+      return false;
+    }
+  }
+
+  function onProvidersChanged() {
+    _providers = null;
+    _providersPromise = null;
+    scheduleRefresh('providers:changed', 50);
+  }
+
+  const unsubscribe = store.subscribe((event, state) => {
+    if (shouldRefreshForEvent(event, state)) scheduleRefresh(event?.type || 'state');
+  });
+  document.addEventListener('ocp-providers-changed', onProvidersChanged);
+
+  scheduleRefresh('mount', 50);
+
+  return {
+    destroy() {
+      destroyed = true;
+      clearTimeout(refreshTimer);
+      unsubscribe?.();
+      document.removeEventListener('ocp-providers-changed', onProvidersChanged);
+    },
+    refresh: () => refresh('manual'),
+  };
+}
+
+function shouldRefreshForEvent(event, state) {
+  if (!event || event.type === 'context:gauge') return false;
+  if (!state?.sessionId) return event.type === 'session:set' || event.type === 'messages:clear';
+  if (event.type === 'session:set') return true;
+  if (event.type === 'config:model' || event.type === 'config:variant' || event.type === 'config:cwd') return true;
+  if (event.type === 'server:status') return state.serverStatus === 'ready';
+  if (event.type === 'running:set') return !state.running;
+  // message:upsert carries the tokens block and can fire during a turn — refresh
+  // either way so the gauge tracks live usage. Skip part:upsert during running
+  // to avoid hammering the gauge on every streaming chunk.
+  if (event.type === 'message:upsert') return true;
+  if (event.type === 'part:upsert') return !state.running;
+  if (event.type === 'messages:clear') return true;
+  if (event.type === 'plan:actions:set' || event.type === 'plan:turn:complete') return true;
+  return false;
+}
+
+async function loadProviders() {
+  if (_providers) return _providers;
+  if (_providersPromise) return _providersPromise;
+  _providersPromise = fetchProvidersFull()
+    .then((json) => {
+      if (json?.ok === false) throw new Error(json.error || 'provider metadata unavailable');
+      _providers = normalizeProviders(json?.data ?? json);
+      return _providers;
+    })
+    .finally(() => { _providersPromise = null; });
+  return _providersPromise;
+}
+
+function normalizeProviders(data) {
+  if (Array.isArray(data)) return data;
+  const all = data?.all || data?.providers || data?.items;
+  if (Array.isArray(all)) return all;
+  if (all && typeof all === 'object') {
+    return Object.entries(all).map(([id, provider]) => ({ id, ...(typeof provider === 'object' ? provider : {}) }));
+  }
+  return [];
+}
+
+function findNewestTokenBlockFromStore(state) {
+  const order = Array.isArray(state?.messageOrder) ? state.messageOrder : [];
+  const messages = state?.messages;
+  if (!order.length || !messages) return null;
+  for (let i = order.length - 1; i >= 0; i--) {
+    const entry = messages.get(order[i]);
+    if (!entry || entry.role !== 'assistant') continue;
+    const info = entry.info || {};
+    // v1 messages flatten model into modelID/providerID; v2 messages nest it
+    // under info.model. normalizeModel handles both shapes.
+    const itemModel = normalizeModel(info.model) || normalizeModel(info);
+    const block = normalizeTokenBlock(info.tokens || info.usage, info.id || entry.id, itemModel, 'message.tokens');
+    if (block) return block;
+  }
+  return null;
+}
+
+function normalizeTokenBlock(tokens, messageId = '', model = null, basis = 'session.context') {
+  if (!tokens || typeof tokens !== 'object') return null;
+  const inputTokens = readNumber(tokens.input, tokens.inputTokens, tokens.input_tokens);
+  const cacheReadTokens = readNumber(tokens.cache?.read, tokens.cacheRead, tokens.cachedInputTokens, tokens.cache_read_input_tokens);
+  const cacheWriteTokens = readNumber(tokens.cache?.write, tokens.cacheWrite, tokens.cacheCreationInputTokens, tokens.cache_creation_input_tokens);
+  const outputTokens = readNumber(tokens.output, tokens.outputTokens, tokens.output_tokens);
+  const reasoningTokens = readNumber(tokens.reasoning, tokens.reasoningOutputTokens, tokens.reasoning_output_tokens);
+  const usedTokens = inputTokens + cacheReadTokens + cacheWriteTokens;
+  if (usedTokens <= 0) return null;
+  return {
+    usedTokens,
+    model,
+    messageId,
+    basis,
+    breakdown: { inputTokens, cacheReadTokens, cacheWriteTokens, outputTokens, reasoningTokens },
+  };
+}
+
+function resolveActiveModel(state, tokenBlock) {
+  return normalizeModel(state?.model)
+    || normalizeModel(tokenBlock?.model)
+    || normalizeModel(state?.sessionInfo?.model)
+    || null;
+}
+
+function resolveContextWindow(providers, model) {
+  if (!model?.modelID) return null;
+  const providerId = String(model.providerID || '').toLowerCase();
+  const modelId = String(model.modelID || '').toLowerCase();
+  for (const provider of providers || []) {
+    const currentProviderId = String(provider?.id || provider?.providerID || provider?.providerId || '').toLowerCase();
+    if (providerId && currentProviderId && currentProviderId !== providerId) continue;
+    for (const entry of modelEntries(provider)) {
+      if (String(entry.id || '').toLowerCase() !== modelId) continue;
+      const modelObj = entry.model || {};
+      const limit = readNumber(modelObj.limit?.context, modelObj.limits?.context, modelObj.contextWindow, modelObj.context_window, modelObj.context);
+      if (limit > 0) return limit;
+    }
+  }
+  return null;
+}
+
+function modelEntries(provider) {
+  const models = provider?.models;
+  if (Array.isArray(models)) {
+    return models.map((model) => ({ id: modelIdFor(model), model: typeof model === 'object' ? model : { id: model } })).filter((entry) => entry.id);
+  }
+  if (models && typeof models === 'object') {
+    return Object.entries(models).map(([id, model]) => ({
+      id: modelIdFor(model) || id,
+      model: typeof model === 'object' ? { id, ...model } : { id },
+    })).filter((entry) => entry.id);
+  }
+  return [];
+}
+
+function modelIdFor(value) {
+  if (typeof value === 'string') return value;
+  if (!value || typeof value !== 'object') return '';
+  return value.id || value.modelID || value.modelId || value.name || '';
+}
+
+function normalizeModel(value) {
+  if (!value) return null;
+  if (typeof value === 'string') {
+    const idx = value.indexOf('/');
+    return idx >= 0
+      ? { providerID: value.slice(0, idx), modelID: value.slice(idx + 1) }
+      : { providerID: '', modelID: value };
+  }
+  if (typeof value !== 'object') return null;
+  const providerID = value.providerID || value.providerId || value.provider || '';
+  const modelID = value.modelID || value.modelId || value.id || value.name || '';
+  return modelID ? { providerID, modelID } : null;
+}
+
+function readNumber(...values) {
+  for (const value of values) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed) && parsed > 0) return Math.floor(parsed);
+  }
+  return 0;
+}