synabun 1.3.0 → 2.0.0

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

@@ -0,0 +1,351 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// OpenCode V2 — what a tool card, the todo widget and the cost label show
+// (no DOM). The renderer builds nodes from these view models.
+//
+// A tool part is `{ tool, callID, state: { status, input, output?, error?,
+// title?, metadata?, time?, attachments? } }`. The keys inside `input` and
+// `metadata` are not in the SDK typings: every read here is optional, and a
+// tool this file does not know falls back to its input and output as text.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const TOOL_OUTPUT_MAX_LINES = 24;
+export const TOOL_OUTPUT_MAX_CHARS = 4000;
+
+const str = (v) => (typeof v === 'string' ? v : '');
+const oneLine = (v, max = 120) => {
+  const text = str(v).replace(/\s+/g, ' ').trim();
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+};
+const baseName = (path) => str(path).split(/[\\/]/).filter(Boolean).pop() || str(path);
+
+/** Canonical tool key: `mcp__server__tool` and `server_tool` stay as they are, built-ins are lowercased. */
+export function toolKey(name) {
+  return str(name).trim().toLowerCase();
+}
+
+const TOOL_LABELS = {
+  bash: 'Bash', edit: 'Edit', multiedit: 'Edit', write: 'Write', apply_patch: 'Patch', patch: 'Patch',
+  read: 'Read', grep: 'Grep', glob: 'Glob', list: 'List', ls: 'List',
+  webfetch: 'Fetch', websearch: 'Search', codesearch: 'Code search',
+  task: 'Task', todowrite: 'Todos', todoread: 'Todos', skill: 'Skill', lsp: 'LSP',
+};
+
+const TOOL_ICON_KEYS = {
+  bash: 'bash', edit: 'edit', multiedit: 'edit', write: 'write', apply_patch: 'patch', patch: 'patch',
+  read: 'read', grep: 'grep', glob: 'glob', list: 'ls', ls: 'ls',
+  webfetch: 'fetch', websearch: 'sourcegraph', codesearch: 'sourcegraph', task: 'agent', lsp: 'diagnostics',
+};
+
+export function toolLabel(name) {
+  const key = toolKey(name);
+  if (TOOL_LABELS[key]) return TOOL_LABELS[key];
+  // An MCP tool arrives as `server_tool`: show both halves.
+  const raw = str(name).trim();
+  return raw ? raw.replace(/^mcp__/, '').replace(/__/g, ' · ') : 'Tool';
+}
+
+export function formatDuration(ms) {
+  const value = Number(ms);
+  if (!Number.isFinite(value) || value < 0) return '';
+  if (value < 1000) return `${Math.round(value)}ms`;
+  if (value < 60_000) return `${(value / 1000).toFixed(value < 10_000 ? 1 : 0)}s`;
+  const minutes = Math.floor(value / 60_000);
+  return `${minutes}m ${Math.round((value % 60_000) / 1000)}s`;
+}
+
+/** Keep the head of a long output: `{ text, hiddenLines, truncated }`. */
+export function truncateOutput(text, maxLines = TOOL_OUTPUT_MAX_LINES, maxChars = TOOL_OUTPUT_MAX_CHARS) {
+  const full = str(text);
+  const lines = full.split('\n');
+  let kept = lines.slice(0, maxLines);
+  let out = kept.join('\n');
+  if (out.length > maxChars) {
+    out = out.slice(0, maxChars);
+    kept = out.split('\n');
+  }
+  const truncated = out.length < full.length;
+  return { text: out, hiddenLines: truncated ? Math.max(lines.length - kept.length, 0) : 0, truncated };
+}
+
+/** A unified diff as typed lines: add / del / hunk / meta / ctx. */
+export function parseUnifiedDiff(diff) {
+  const out = [];
+  for (const line of str(diff).split('\n')) {
+    if (line.startsWith('+++') || line.startsWith('---') || line.startsWith('diff ') || line.startsWith('index ')
+      || line.startsWith('Index: ') || /^=+$/.test(line)) {
+      out.push({ type: 'meta', text: line });
+    } else if (line.startsWith('@@')) out.push({ type: 'hunk', text: line });
+    else if (line.startsWith('+')) out.push({ type: 'add', text: line });
+    else if (line.startsWith('-')) out.push({ type: 'del', text: line });
+    else out.push({ type: 'ctx', text: line });
+  }
+  while (out.length && out[out.length - 1].text === '') out.pop();
+  return out;
+}
+
+/** +n −m of a parsed diff. */
+export function diffStat(lines) {
+  let additions = 0;
+  let deletions = 0;
+  for (const line of lines || []) {
+    if (line.type === 'add') additions += 1;
+    else if (line.type === 'del') deletions += 1;
+  }
+  return { additions, deletions };
+}
+
+// An edit without a diff in its metadata: the old and new strings as −/+ lines.
+function diffFromStrings(oldText, newText) {
+  const lines = [];
+  for (const line of str(oldText).split('\n')) lines.push({ type: 'del', text: `-${line}` });
+  for (const line of str(newText).split('\n')) lines.push({ type: 'add', text: `+${line}` });
+  return lines;
+}
+
+function outputText(state) {
+  const output = state?.output;
+  if (output == null) return '';
+  if (typeof output === 'string') return output;
+  try { return JSON.stringify(output, null, 2); } catch { return String(output); }
+}
+
+function jsonText(value) {
+  if (value == null) return '';
+  if (typeof value === 'string') return value;
+  try { return JSON.stringify(value, null, 2); } catch { return String(value); }
+}
+
+function errorText(state) {
+  const error = state?.error;
+  if (!error) return '';
+  return typeof error === 'string' ? error : jsonText(error);
+}
+
+const MAX_DIFF_LINES = 400;
+
+function diffSection(lines) {
+  const stat = diffStat(lines);
+  const shown = lines.slice(0, MAX_DIFF_LINES);
+  return { kind: 'diff', lines: shown, hiddenLines: lines.length - shown.length, ...stat };
+}
+
+/**
+ * Everything a tool card shows.
+ *   { tool, label, iconKey, status, title, meta, sections, defaultExpanded,
+ *     copyText, childSessionId, attachments }
+ * sections: { kind: 'code' | 'output' | 'error' | 'diff' | 'todos', … }
+ */
+export function toolCardView(part) {
+  const state = part?.state && typeof part.state === 'object' ? part.state : {};
+  const input = state.input && typeof state.input === 'object' ? state.input : (part?.input && typeof part.input === 'object' ? part.input : {});
+  const metadata = state.metadata && typeof state.metadata === 'object' ? state.metadata : {};
+  const tool = toolKey(part?.tool || part?.name);
+  const status = str(state.status || part?.status) || 'pending';
+  const start = Number(state.time?.start);
+  const end = Number(state.time?.end);
+  const view = {
+    tool,
+    label: toolLabel(part?.tool || part?.name),
+    iconKey: TOOL_ICON_KEYS[tool] || '',
+    status,
+    title: oneLine(state.title),
+    meta: Number.isFinite(start) && Number.isFinite(end) && end >= start ? formatDuration(end - start) : '',
+    sections: [],
+    defaultExpanded: status === 'error',
+    copyText: '',
+    childSessionId: '',
+    attachments: Array.isArray(state.attachments) ? state.attachments.filter((a) => a && typeof a.url === 'string') : [],
+  };
+  const output = outputText(state);
+  const error = errorText(state);
+  const addOutput = (text = output) => { if (text) view.sections.push({ kind: 'output', ...truncateOutput(text), full: text }); };
+
+  switch (tool) {
+    case 'bash': {
+      const command = str(input.command);
+      view.title = oneLine(input.description) || view.title || oneLine(command);
+      if (command) view.sections.push({ kind: 'code', text: command, prompt: '$' });
+      addOutput(str(metadata.output) || output);
+      view.copyText = command;
+      // A command that is running or failed is what the user is waiting on.
+      view.defaultExpanded = status !== 'completed';
+      if (typeof metadata.exit === 'number' && metadata.exit !== 0) view.meta = [view.meta, `exit ${metadata.exit}`].filter(Boolean).join(' · ');
+      break;
+    }
+    case 'edit':
+    case 'multiedit':
+    case 'write':
+    case 'apply_patch':
+    case 'patch': {
+      const path = str(input.filePath || input.file_path || input.path || metadata.filepath || metadata.filediff?.file);
+      view.title = view.title || oneLine(path);
+      const diff = str(metadata.diff);
+      let lines = diff ? parseUnifiedDiff(diff) : [];
+      if (!lines.length && tool === 'edit' && (input.oldString != null || input.newString != null)) {
+        lines = diffFromStrings(input.oldString, input.newString);
+      }
+      if (!lines.length && tool === 'write' && str(input.content)) {
+        lines = str(input.content).split('\n').map((line) => ({ type: 'add', text: `+${line}` }));
+      }
+      if (!lines.length && str(input.patchText)) lines = parseUnifiedDiff(input.patchText);
+      if (lines.length) {
+        const section = diffSection(lines);
+        view.sections.push(section);
+        const stat = `+${section.additions} −${section.deletions}`;
+        view.meta = [stat, view.meta].filter(Boolean).join(' · ');
+      }
+      view.copyText = path;
+      break;
+    }
+    case 'read': {
+      const path = str(input.filePath || input.file_path || input.path);
+      view.title = view.title || oneLine(path);
+      const range = [input.offset != null ? `from ${input.offset}` : '', input.limit != null ? `${input.limit} lines` : ''].filter(Boolean).join(', ');
+      if (range) view.meta = [range, view.meta].filter(Boolean).join(' · ');
+      addOutput(str(metadata.preview) || output);
+      view.copyText = path;
+      break;
+    }
+    case 'grep':
+    case 'glob':
+    case 'list':
+    case 'ls': {
+      const pattern = str(input.pattern);
+      const where = str(input.path);
+      view.title = oneLine([pattern, where && `in ${baseName(where) || where}`, str(input.include) && `(${input.include})`].filter(Boolean).join(' ')) || view.title;
+      const count = Number(metadata.matches ?? metadata.count);
+      if (Number.isFinite(count)) view.meta = [`${count} ${tool === 'grep' ? 'match' : 'result'}${count === 1 ? '' : (tool === 'grep' ? 'es' : 's')}`, view.meta].filter(Boolean).join(' · ');
+      addOutput();
+      view.copyText = pattern || where;
+      break;
+    }
+    case 'webfetch':
+    case 'websearch':
+    case 'codesearch': {
+      const target = str(input.url || input.query);
+      view.title = oneLine(target) || view.title;
+      addOutput();
+      view.copyText = target;
+      break;
+    }
+    case 'task': {
+      const agent = str(input.subagent_type || input.agent);
+      view.title = oneLine([agent, str(input.description)].filter(Boolean).join(' · ')) || view.title;
+      view.childSessionId = str(metadata.sessionId || metadata.sessionID || input.sessionId || input.sessionID);
+      if (str(input.prompt)) view.sections.push({ kind: 'code', text: str(input.prompt), prompt: '' });
+      addOutput();
+      view.copyText = str(input.prompt);
+      break;
+    }
+    case 'todowrite':
+    case 'todoread': {
+      const todos = todoView(Array.isArray(metadata.todos) ? metadata.todos : input.todos);
+      view.title = todos.total ? `${todos.done}/${todos.total} done` : view.title;
+      if (todos.total) view.sections.push({ kind: 'todos', items: todos.items });
+      break;
+    }
+    case 'skill': {
+      view.title = oneLine(input.name) || view.title;
+      addOutput();
+      break;
+    }
+    default: {
+      // A tool without a dedicated card: its input as text, then its output.
+      const inputText = Object.keys(input).length ? jsonText(input) : '';
+      if (!view.title) view.title = oneLine(Object.values(input).find((v) => typeof v === 'string') || '');
+      if (inputText) view.sections.push({ kind: 'code', text: inputText, prompt: '' });
+      addOutput();
+      view.copyText = inputText;
+    }
+  }
+  if (error) view.sections.push({ kind: 'error', text: error });
+  return view;
+}
+
+/** A signature that changes whenever the card would. */
+export function toolCardSignature(view) {
+  const body = view.sections.map((s) => `${s.kind}:${s.text?.length ?? s.lines?.length ?? s.items?.length ?? 0}:${s.hiddenLines || 0}`).join(',');
+  return `${view.tool}|${view.status}|${view.title}|${view.meta}|${body}|${view.childSessionId}|${view.attachments.length}`;
+}
+
+// ── Todos (session.todo, todo.updated, the todowrite tool) ──────────────────
+
+const TODO_STATUSES = new Set(['pending', 'in_progress', 'completed', 'cancelled']);
+
+/** `{ items: [{ content, status }], total, done, active }`. */
+export function todoView(todos) {
+  const items = (Array.isArray(todos) ? todos : [])
+    .filter((t) => t && typeof t.content === 'string' && t.content.trim())
+    .map((t) => ({ content: t.content.trim(), status: TODO_STATUSES.has(t.status) ? t.status : 'pending' }));
+  const open = items.filter((t) => t.status !== 'cancelled');
+  return {
+    items,
+    total: open.length,
+    done: open.filter((t) => t.status === 'completed').length,
+    active: items.find((t) => t.status === 'in_progress')?.content || '',
+  };
+}
+
+/** The widget shows while there is work left; a finished or empty list hides it. */
+export function todoWidgetVisible(view) {
+  return view.total > 0 && view.done < view.total;
+}
+
+// ── Cost and per-message meta (OpenCode's own numbers) ──────────────────────
+
+export function formatCost(value) {
+  const cost = Number(value);
+  if (!Number.isFinite(cost) || cost <= 0) return '';
+  if (cost < 0.01) return `$${cost.toFixed(4)}`;
+  return `$${cost.toFixed(cost < 10 ? 3 : 2)}`;
+}
+
+/**
+ * A cost OpenCode reported for one message, zero included: a free model's
+ * answer says "$0.00" where a paid one says its price. '' only when OpenCode
+ * reported no cost at all (an older transcript).
+ */
+export function formatReportedCost(value) {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) return '';
+  return value === 0 ? '$0.00' : formatCost(value);
+}
+
+export function formatTokens(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n) || n <= 0) return '';
+  if (n < 1000) return String(Math.round(n));
+  if (n < 1_000_000) return `${(n / 1000).toFixed(n < 10_000 ? 1 : 0)}k`;
+  return `${(n / 1_000_000).toFixed(2)}M`;
+}
+
+/**
+ * What OpenCode says this session cost. Session.cost (1.18) when the session
+ * info has it, else the sum over the assistant messages on screen.
+ */
+export function sessionCostOf(state) {
+  const fromSession = Number(state?.sessionInfo?.cost);
+  let fromMessages = 0;
+  for (const msg of state?.messages?.values?.() || []) {
+    const cost = Number(msg?.info?.cost);
+    if (msg?.info?.role === 'assistant' && Number.isFinite(cost)) fromMessages += cost;
+  }
+  // The session row is updated when a turn ends; messages are live.
+  return Math.max(Number.isFinite(fromSession) ? fromSession : 0, fromMessages);
+}
+
+/** One muted line under an assistant message: model · agent · tokens · cost · time. */
+export function messageMetaText(info) {
+  if (!info || info.role !== 'assistant') return '';
+  const tokens = info.tokens || {};
+  const total = Number(tokens.total) || (Number(tokens.input) || 0) + (Number(tokens.output) || 0) + (Number(tokens.reasoning) || 0);
+  const created = Number(info.time?.created);
+  const completed = Number(info.time?.completed);
+  return [
+    str(info.modelID),
+    str(info.agent),
+    str(info.variant),
+    formatTokens(total) && `${formatTokens(total)} tok`,
+    formatReportedCost(info.cost),
+    Number.isFinite(created) && Number.isFinite(completed) && completed > created ? formatDuration(completed - created) : '',
+  ].filter(Boolean).join(' · ');
+}

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

@@ -0,0 +1,168 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// OpenCode V2 — tool cards
+// One collapsible card per tool call: icon, name, a one-line summary, duration,
+// status; the body shows the command / diff / output, truncated, with Copy.
+// What a card contains is decided by toolCardView() (ocp-v2-tools-logic.js);
+// this file only builds the nodes. Every string that comes from the model or a
+// tool goes in through textContent.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { TOOL_ICONS } from './ocp-v2-icons.js';
+import { toolCardView } from './ocp-v2-tools-logic.js';
+
+const CHEVRON_SVG = '<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+const FALLBACK_ICON = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>';
+const TODO_MARKS = { completed: '✓', in_progress: '▸', pending: '○', cancelled: '✕' };
+
+// What the user opened or closed by hand wins over a card's default.
+const _expandedByUser = new Map(); // callId → boolean
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+function outputSection(section, helpers) {
+  // MCP tools answer with content blocks (text + images): those keep their
+  // dedicated rendering.
+  const blocks = helpers.contentBlocks?.(section.full);
+  if (blocks) return blocks;
+  const wrap = el('div', 'ocpv2-tool-output');
+  const text = el('span', '', section.text);
+  wrap.appendChild(text);
+  if (section.truncated) {
+    const more = el('button', 'ocpv2-tc-more', section.hiddenLines
+      ? `Show all (${section.hiddenLines} more line${section.hiddenLines === 1 ? '' : 's'})`
+      : 'Show all');
+    more.type = 'button';
+    more.addEventListener('click', (event) => {
+      event.stopPropagation();
+      text.textContent = section.full;
+      more.remove();
+    });
+    wrap.appendChild(more);
+  }
+  return wrap;
+}
+
+function diffSectionNode(section) {
+  const wrap = el('div', 'ocpv2-tool-output ocpv2-tc-diff');
+  for (const line of section.lines) {
+    wrap.appendChild(el('div', `ocpv2-diff-line ocpv2-diff-${line.type}`, line.text || ' '));
+  }
+  if (section.hiddenLines > 0) {
+    wrap.appendChild(el('div', 'ocpv2-diff-line ocpv2-diff-meta', `… ${section.hiddenLines} more lines`));
+  }
+  return wrap;
+}
+
+function todosSectionNode(section) {
+  const wrap = el('div', 'ocpv2-tool-output ocpv2-tc-todos');
+  for (const item of section.items) {
+    const row = el('div', `ocpv2-todo-item ocpv2-todo-${item.status}`);
+    row.appendChild(el('span', 'ocpv2-todo-mark', TODO_MARKS[item.status] || '○'));
+    row.appendChild(el('span', 'ocpv2-todo-text', item.content));
+    wrap.appendChild(row);
+  }
+  return wrap;
+}
+
+function attachmentNode(file) {
+  const mime = String(file.mime || '');
+  if (mime.startsWith('image/') || /^data:image\//.test(file.url)) {
+    const wrap = el('div', 'ocpv2-tool-output ocpv2-tool-output-image');
+    const img = el('img', 'ocpv2-tool-screenshot');
+    img.src = file.url;
+    img.alt = file.filename || 'attachment';
+    img.loading = 'lazy';
+    wrap.appendChild(img);
+    return wrap;
+  }
+  return el('div', 'ocpv2-part ocpv2-part-file', `📎 ${file.filename || 'attachment'}`);
+}
+
+/**
+ * helpers:
+ *   contentBlocks(output)  → a node for MCP content blocks, or null
+ *   onOpenChild(sessionId) → open the sub-agent session of a task card
+ */
+export function renderToolCard(part, helpers = {}) {
+  const view = toolCardView(part);
+  const callId = part.callID || part.id || `${view.tool}-${part.messageID || ''}`;
+  const expanded = _expandedByUser.has(callId) ? _expandedByUser.get(callId) : view.defaultExpanded;
+
+  const wrap = el('div', `ocpv2-part ocpv2-part-tool ocpv2-tool-card${expanded ? ' ocpv2-tool-expanded' : ''}`);
+  wrap.dataset.toolId = callId;
+  wrap.dataset.status = view.status;
+  wrap.dataset.tool = view.tool;
+
+  const head = el('div', 'ocpv2-tool-head ocpv2-tc-head');
+  const icon = el('span', 'ocpv2-tc-icon');
+  icon.innerHTML = TOOL_ICONS[view.iconKey] || FALLBACK_ICON;
+  head.appendChild(icon);
+  const titles = el('span', 'ocpv2-tc-titles');
+  titles.appendChild(el('span', 'ocpv2-tool-name', view.label));
+  if (view.title) {
+    const summary = el('span', 'ocpv2-tc-summary', view.title);
+    summary.title = view.title;
+    titles.appendChild(summary);
+  }
+  head.appendChild(titles);
+  if (view.meta) head.appendChild(el('span', 'ocpv2-tc-meta', view.meta));
+  head.appendChild(el('span', `ocpv2-tool-status ocpv2-tool-${view.status}`, view.status));
+  const chevron = el('span', 'ocpv2-tc-chevron');
+  chevron.innerHTML = CHEVRON_SVG;
+  head.appendChild(chevron);
+  head.addEventListener('click', () => {
+    const next = !wrap.classList.contains('ocpv2-tool-expanded');
+    _expandedByUser.set(callId, next);
+    wrap.classList.toggle('ocpv2-tool-expanded', next);
+  });
+  wrap.appendChild(head);
+
+  const body = el('div', 'ocpv2-tc-body');
+  for (const section of view.sections) {
+    if (section.kind === 'code') {
+      body.appendChild(el('div', 'ocpv2-tool-input', section.prompt ? `${section.prompt} ${section.text}` : section.text));
+    } else if (section.kind === 'output') {
+      body.appendChild(outputSection(section, helpers));
+    } else if (section.kind === 'diff') {
+      body.appendChild(diffSectionNode(section));
+    } else if (section.kind === 'todos') {
+      body.appendChild(todosSectionNode(section));
+    } else if (section.kind === 'error') {
+      body.appendChild(el('div', 'ocpv2-tool-output ocpv2-tool-output-error', section.text));
+    }
+  }
+  for (const file of view.attachments) body.appendChild(attachmentNode(file));
+
+  const actions = el('div', 'ocpv2-tc-actions');
+  if (view.copyText) {
+    const copy = el('button', 'ocpv2-msg-action', 'Copy');
+    copy.type = 'button';
+    copy.addEventListener('click', async (event) => {
+      event.stopPropagation();
+      try {
+        await navigator.clipboard.writeText(view.copyText);
+        copy.textContent = 'Copied';
+        setTimeout(() => { if (copy.isConnected) copy.textContent = 'Copy'; }, 1200);
+      } catch { /* clipboard unavailable */ }
+    });
+    actions.appendChild(copy);
+  }
+  if (view.childSessionId && typeof helpers.onOpenChild === 'function') {
+    const open = el('button', 'ocpv2-msg-action', 'Open sub-agent');
+    open.type = 'button';
+    open.addEventListener('click', (event) => {
+      event.stopPropagation();
+      helpers.onOpenChild(view.childSessionId);
+    });
+    actions.appendChild(open);
+  }
+  if (actions.children.length) body.appendChild(actions);
+
+  wrap.appendChild(body);
+  return wrap;
+}