synabun 2.0.0-beta → 2.0.5

package/neural-interface/public/shared/explorer/fx-api.js

@@ -0,0 +1,216 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — File Explorer: the server
+// ═══════════════════════════════════════════
+//
+// Every request the explorer makes. The page reloads at any time and the
+// server only on a restart, so it works against an older server with what that
+// has: the listing and search of /api/project-files, git from /api/git/status,
+// a new file or folder and a delete through the editor's routes. Whether the
+// server has the explorer's own routes (lib/file-explorer-api.js) it is told
+// by the answer of GET /api/projects, which the panel asks for anyway
+// (`serverSays`): an older server lists nothing there, and nothing of
+// /api/explorer is ever asked of it. What it cannot do answers
+// `{ ok: false, code: 'unsupported' }` here, without a request.
+// Nothing in this file throws: a call resolves to `{ ok: true, … }` or to
+// `{ ok: false, code, … }` (`offline` when the server did not answer).
+
+import { fromLegacyListing, fromLegacySearch, trimSlash } from './fx-logic.js';
+
+const JSON_HEADERS = { 'Content-Type': 'application/json' };
+const RECONNECT_MS = [1500, 3000, 6000, 12000, 30000];
+
+/**
+ * @param {{ fetchImpl?: typeof fetch, EventSourceImpl?: typeof EventSource }} [o]
+ */
+export function createExplorerApi({ fetchImpl = (...args) => fetch(...args), EventSourceImpl = globalThis.EventSource } = {}) {
+  let asked = null;   // the one question about what the server has
+  let listed = null;  // what GET /api/projects said this server has
+  let caps = { known: false, explorer: false, info: null };
+
+  async function request(url, init) {
+    let res;
+    try { res = await fetchImpl(url, init); } catch (error) { return { ok: false, code: error?.name === 'AbortError' ? 'aborted' : 'offline' }; }
+    let body = null;
+    try { body = await res.json(); } catch { body = null; }
+    if (res.ok && body && body.ok !== false) return { ok: true, ...body };
+    // The server's first gate answers an invited guest 403 "Admin only", without a code of its own.
+    const guest = res.status === 403 && body?.error === 'Admin only';
+    return { ...(body && typeof body === 'object' ? body : {}), ok: false, code: body?.code || (guest ? 'GUEST_FORBIDDEN' : res.status === 403 ? 'denied' : res.status === 404 ? 'gone' : 'failed'), status: res.status };
+  }
+  const post = (path, body) => request(`/api/explorer${path}`, { method: 'POST', headers: JSON_HEADERS, body: JSON.stringify(body) });
+  const unsupported = () => Promise.resolve({ ok: false, code: 'unsupported' });
+
+  /**
+   * What GET /api/projects listed as this server's capabilities (null when it did not answer). Called by the panel
+   * each time it reads the projects: a server that was restarted since is found out by the next read.
+   */
+  function serverSays(list) {
+    const has = Array.isArray(list) && list.includes('explorer');
+    if (listed !== null && has === caps.explorer && caps.known) return;
+    listed = Array.isArray(list) ? list : (list === null ? null : []);
+    asked = null;
+    caps = { known: false, explorer: false, info: null };
+  }
+
+  /** What the server can do: its own word on the explorer's routes, asked for once it says it has them. */
+  function capabilities() {
+    if (!asked) {
+      asked = (async () => {
+        if (listed === null) { asked = null; return caps; }   // not told yet: the next call looks again
+        const has = listed.includes('explorer');
+        const info = has ? await request('/api/explorer/info') : null;
+        if (has && !info.ok && info.code === 'offline') { asked = null; return caps; }
+        caps = { known: true, explorer: !!(has && info?.ok), info: info?.ok ? info : null };
+        return caps;
+      })();
+    }
+    return asked;
+  }
+
+  /** What is known of the server right now (after `capabilities()` answered). */
+  const abilities = () => ({
+    known: caps.known,
+    ops: caps.explorer,
+    watch: caps.explorer,
+    trash: caps.explorer && !!caps.info?.trash,
+    reveal: caps.explorer && !!caps.info?.reveal,
+    preview: caps.explorer,
+    platform: caps.info?.platform || null,
+  });
+
+  async function list(path) {
+    await capabilities();
+    if (caps.explorer) return request(`/api/explorer/list?path=${encodeURIComponent(path)}`);
+    const old = await request(`/api/project-files?path=${encodeURIComponent(path)}`);
+    if (!old.ok) {
+      // The older route words its failures itself: a folder that is not there, a path that is not allowed.
+      return { ok: false, code: old.code === 'offline' ? 'offline' : old.status === 403 ? (old.code === 'GUEST_FORBIDDEN' ? old.code : 'outside') : old.status === 400 ? 'gone' : 'failed' };
+    }
+    return fromLegacyListing(old);
+  }
+
+  async function search(root, query, signal) {
+    await capabilities();
+    if (caps.explorer) return request(`/api/explorer/search?root=${encodeURIComponent(root)}&q=${encodeURIComponent(query)}`, { signal });
+    const old = await request(`/api/project-files?${new URLSearchParams({ path: root, search: query, recursive: '1' })}`, { signal });
+    return old.ok ? fromLegacySearch(old) : old;
+  }
+
+  async function git(root) {
+    await capabilities();
+    if (caps.explorer) return request(`/api/explorer/git?root=${encodeURIComponent(root)}`);
+    const old = await request(`/api/git/status?path=${encodeURIComponent(root)}`);
+    if (!old.ok) return old;
+    if (!old.isGit) return { ok: true, isGit: false };
+    const changes = {};
+    for (const change of old.changes || []) if (change?.path) changes[change.path] = change.status;
+    return { ok: true, isGit: true, branch: old.branch || '', changes, ignored: [], legacy: true };
+  }
+
+  async function create(parent, name, type) {
+    await capabilities();
+    if (caps.explorer) return post('/create', { parent, name, type });
+    // An older server: its own two routes. It would write over a file, or take a folder that is there for a new
+    // one, so the folder is read first and a name that is taken is refused here.
+    const there = await list(parent);
+    if (!there.ok) return there;
+    if (there.items.some((item) => item.name.toLowerCase() === name.toLowerCase())) return { ok: false, code: 'exists', name };
+    const path = `${trimSlash(parent)}/${name}`;
+    const made = type === 'dir'
+      ? await request('/api/file-mkdir', { method: 'POST', headers: JSON_HEADERS, body: JSON.stringify({ path }) })
+      : await request('/api/file-content', { method: 'POST', headers: JSON_HEADERS, body: JSON.stringify({ path, content: '', create: true, expectAbsent: true }) });
+    if (made.ok) return { ok: true, path, type };
+    return { ok: false, code: made.status === 409 ? 'exists' : made.status === 403 ? 'denied' : made.code === 'offline' ? 'offline' : 'failed', name };
+  }
+
+  async function remove(paths, { permanent = false } = {}) {
+    await capabilities();
+    if (caps.explorer) return post('/delete', { paths, permanent });
+    // An older server deletes for good, one entry at a time, and a folder only when it is empty.
+    if (!permanent) return { ok: false, code: 'no-trash' };
+    const deleted = [];
+    for (const path of paths) {
+      const done = await request(`/api/file-content?path=${encodeURIComponent(path)}`, { method: 'DELETE' });
+      if (done.ok || done.status === 404) { deleted.push(path); continue; }
+      const notEmpty = done.status === 400 && /not empty/i.test(String(done.error || ''));
+      return { ok: false, code: notEmpty ? 'not-empty' : done.status === 403 ? 'denied' : done.code === 'offline' ? 'offline' : 'failed', deleted, failed: path };
+    }
+    return { ok: true, deleted, trashed: false };
+  }
+
+  const guarded = (call) => async (...args) => { await capabilities(); return caps.explorer ? call(...args) : unsupported(); };
+
+  /**
+   * Follow a project on disk. `onChange({ dirs, git })` names the shown folders that changed; `onReady(again)` says
+   * the stream is up (`again`: after it was down, so anything may have changed meanwhile). A stream is not a watch
+   * that works: `onState({ live, scope })` says what the server really watches, at the start and when it changes
+   * (`live`: 'full', 'partial' when some folders could not be watched, 'none' when the project is not watched at
+   * all; `scope`: 'tree', or 'folders' where only the shown folders are watched). `onResync()`: the server lost
+   * its watch on the project; it tries for it again by itself, and nothing is sent back for the report (what is
+   * shown may be stale, the folders that are shown are the ones it was told). Null on a server that has no
+   * watch. The connection is tried again by itself, ever more slowly, until `close()`.
+   */
+  function watch(root, { onChange, onReady = () => {}, onDown = () => {}, onState = () => {}, onResync = () => {} }) {
+    if (!caps.explorer || typeof EventSourceImpl !== 'function') return null;
+    let source = null; let id = null; let dirs = []; let closed = false; let attempt = 0; let timer = 0; let pushTimer = 0; let wasUp = false;
+    const push = () => {
+      clearTimeout(pushTimer);
+      pushTimer = setTimeout(() => { if (id && !closed) post(`/watch/${id}`, { dirs }); }, 120);
+    };
+    const connect = () => {
+      if (closed) return;
+      source = new EventSourceImpl(`/api/explorer/watch?root=${encodeURIComponent(root)}`);
+      const say = (data) => onState({ live: ['partial', 'none'].includes(data?.live) ? data.live : 'full', scope: data?.scope === 'folders' ? 'folders' : 'tree' });
+      source.addEventListener('ready', (event) => {
+        let said = null;
+        try { said = JSON.parse(event.data); } catch { said = null; }
+        id = said?.id || null;
+        attempt = 0;
+        push();
+        say(said);
+        onReady(wasUp);
+        wasUp = true;
+      });
+      source.addEventListener('state', (event) => { try { say(JSON.parse(event.data)); } catch { /* skipped, as below */ } });
+      source.addEventListener('change', (event) => { try { onChange(JSON.parse(event.data)); } catch { /* a report that cannot be read is skipped */ } });
+      source.addEventListener('resync', () => onResync());
+      source.onerror = () => {
+        // The browser would try again every three seconds for as long as the page lives: tried here, more slowly.
+        try { source.close(); } catch { /* closed */ }
+        id = null;
+        if (closed) return;
+        onDown();
+        timer = setTimeout(connect, RECONNECT_MS[Math.min(attempt++, RECONNECT_MS.length - 1)]);
+      };
+    };
+    connect();
+    return {
+      setDirs(list) { dirs = [...list]; push(); },
+      close() { closed = true; clearTimeout(timer); clearTimeout(pushTimer); try { source?.close(); } catch { /* closed */ } },
+    };
+  }
+
+  return {
+    serverSays,
+    capabilities,
+    abilities,
+    list,
+    search,
+    git,
+    create,
+    remove,
+    rename: guarded((path, name) => post('/rename', { path, name })),
+    // `permanent`: what a replace clears may be removed for good when the Trash cannot take it (the user was asked).
+    // `replace`: the names that may be replaced (the ones the user was asked about), or false.
+    move: guarded((paths, into, { replace = false, permanent = false } = {}) => post('/move', { paths, into, replace, permanent })),
+    copy: guarded((paths, into, { replace = false, permanent = false } = {}) => post('/copy', { paths, into, replace, permanent })),
+    reveal: guarded((path) => post('/reveal', { path })),
+    upload: guarded((file, into, { name = file.name, rel = '', replace = false, permanent = false } = {}) => request(
+      `/api/explorer/upload?${new URLSearchParams({ into, name, ...(rel ? { rel } : {}), ...(replace ? { replace: '1' } : {}), ...(replace && permanent ? { permanent: '1' } : {}) })}`,
+      { method: 'POST', headers: { 'Content-Type': 'application/octet-stream' }, body: file },
+    )),
+    /** Where the bytes of an image are (null on a server that has no preview). */
+    rawUrl: (path) => (caps.explorer ? `/api/explorer/raw?path=${encodeURIComponent(path)}` : null),
+    watch,
+  };
+}

package/neural-interface/public/shared/explorer/fx-links.js

@@ -0,0 +1,204 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — File Explorer: the editor and the agents
+// ═══════════════════════════════════════════
+//
+// The two neighbours the tree talks to.
+//
+// The code editor (shared/editor/) says which files are open, which have
+// unsaved text and which one is showing (`getEditorTabs()`, and the
+// `editor-tabs-changed` event when that changes), and re-points the tab of a
+// file that was renamed or moved (`repointEditorTab()`): the tab stays, with its
+// text, caret, scroll position and undo history. The controller hands those
+// in; nothing of the editor is read from the page or changed here.
+//
+// The agents: a path is handed to a side panel through the function each panel
+// already has for it. What goes where, and the words for it, are decided here.
+
+import { isWithin, trimSlash } from './fx-logic.js';
+
+const wait = (ms) => new Promise((done) => setTimeout(done, ms));
+async function until(check, ms) {
+  const end = Date.now() + ms;
+  for (;;) {
+    if (check()) return true;
+    if (Date.now() > end) return false;
+    await wait(40);
+  }
+}
+const sameSet = (a, b) => a.size === b.size && [...a].every((entry) => b.has(entry));
+const laterFrame = (work) => (typeof requestAnimationFrame === 'function' ? requestAnimationFrame(work) : setTimeout(work, 16));
+
+/**
+ * @param {object} o
+ * @param {(path: string, at?: { pin?: boolean }) => void} o.openFile editor-panel.js openFileInEditor
+ * @param {() => any} o.save editor-panel.js saveEditorPanel (the showing tab)
+ * @param {() => { open: { path: string, dirty: boolean }[], active: string | null }} o.tabs editor-panel.js getEditorTabs
+ * @param {(from: string, to: string) => { moved: object[], kept: string[] }} o.repoint editor-panel.js repointEditorTab
+ * @param {(listener: (tabs: object) => void) => (() => void)} o.subscribe hears `editor-tabs-changed`; gives back how to stop
+ * @param {(state: { open: Set<string>, dirty: Set<string>, active: string | null }) => void} o.onChange
+ * @param {(work: () => void) => any} [o.later] runs `work` soon (a frame): several changes are one redraw
+ */
+export function createEditorLink({ openFile, save, tabs, repoint, subscribe, onChange, later = laterFrame }) {
+  let state = { open: new Set(), dirty: new Set(), active: null };
+  let stopHearing = null;
+  let due = false;
+
+  const shape = (said) => {
+    const next = { open: new Set(), dirty: new Set(), active: null };
+    for (const tab of said?.open || []) {
+      const path = trimSlash(tab?.path || '');
+      if (!path) continue;
+      next.open.add(path);
+      if (tab.dirty) next.dirty.add(path);
+    }
+    if (said?.active) next.active = trimSlash(said.active);
+    return next;
+  };
+  /** What the editor has open right now. */
+  const read = () => { try { return shape(tabs()); } catch { return shape(null); } };
+
+  function refresh() {
+    due = false;
+    if (!stopHearing) return;
+    const next = read();
+    if (next.active === state.active && sameSet(next.open, state.open) && sameSet(next.dirty, state.dirty)) return;
+    state = next;
+    onChange(state);
+  }
+  // The editor says so while it works (a first letter typed, a tab closed): the tree is drawn after it, once.
+  const schedule = () => { if (!due) { due = true; later(refresh); } };
+
+  /** Start following what the editor has open. */
+  function start() {
+    if (stopHearing) return;
+    stopHearing = subscribe(schedule) || (() => {});
+    schedule();
+  }
+  function stop() {
+    stopHearing?.();
+    stopHearing = null;
+  }
+
+  /** The open files with unsaved text that are one of `paths`, or inside one of them. */
+  const unsavedIn = (paths) => [...read().dirty].filter((file) => paths.some((path) => isWithin(path, file)));
+
+  /** Save one open file: its tab is shown, saved, and checked. False when it still has unsaved text after that. */
+  async function saveFile(path) {
+    const file = trimSlash(path);
+    openFile(file);
+    if (!(await until(() => read().active === file, 4000))) return false;
+    try { await save(); } catch { return false; }
+    return until(() => { const now = read(); return now.active === file && !now.dirty.has(file); }, 6000);
+  }
+
+  /**
+   * Entries were renamed or moved: the tabs of the files among them, or inside them, follow, each as it is.
+   * @param {{ from: string, to: string }[]} moves
+   * @returns {string[]} the open files that could not follow (the path each would take is open with unsaved text)
+   */
+  function follow(moves) {
+    const kept = [];
+    for (const move of moves) {
+      try { kept.push(...(repoint(move.from, move.to)?.kept || [])); }
+      catch (error) { console.warn('[file-explorer] the editor could not follow', move.from, error); }
+    }
+    return kept;
+  }
+
+  return { start, stop, state: () => state, read, unsavedIn, saveFile, follow };
+}
+
+// ── The agents ──
+
+export const SEND_TARGETS = Object.freeze(['claude', 'codex', 'opencode', 'assistant']);
+const TARGET_NAMES = { claude: 'Claude Code', codex: 'Codex', opencode: 'OpenCode' };
+
+/**
+ * @param {object} o
+ * @param {object} o.deps what each panel offers: `sendToFocusedSession(kind, data)`, `claude(path)`, `codex(path)`,
+ *   `opencode(path)`, `assistant(path)`, and `lastActive()` (the panel used last)
+ * @param {(key: string, params?: object) => string} o.t
+ */
+export function createSender({ deps, t }) {
+  const nameOf = (target) => (target === 'session' ? t('fileExplorer.send.session') : TARGET_NAMES[target] || t('fileExplorer.send.assistant'));
+  /** Where "Send to AI" goes when nothing else is said: the panel that was used last. */
+  const current = () => { let last = null; try { last = deps.lastActive(); } catch { last = null; } return SEND_TARGETS.includes(last) ? last : 'claude'; };
+
+  /**
+   * Hand paths to an agent, each as a file reference of that panel. Only what a panel took counts as sent: a
+   * panel answers `false` for a path it did not take (the Assistant when it is switched off); anything else it
+   * answers, or nothing, is a path that was taken.
+   * @param {string[]} paths @param {string | null} [target] one of SEND_TARGETS; without it, the session window
+   *   that has the focus, else the panel used last
+   * @returns {Promise<{ ok: boolean, target: string, name: string, count: number }>} `count`: how many were taken;
+   *   `ok`: at least one was, and nothing failed
+   */
+  async function send(paths, target = null) {
+    const list = paths.filter(Boolean);
+    let to = target;
+    let taken = 0;
+    try {
+      if (!to) {
+        // A detached session that has the focus takes it: all of it, or none.
+        if (list.length && deps.sendToFocusedSession('path', list[0])) {
+          for (const path of list.slice(1)) deps.sendToFocusedSession('path', path);
+          return { ok: true, target: 'session', name: nameOf('session'), count: list.length };
+        }
+        to = current();
+      }
+      for (const path of list) if ((await deps[to](path)) !== false) taken++;
+      return { ok: taken > 0, target: to, name: nameOf(to), count: taken };
+    } catch (error) {
+      console.warn('[file-explorer] could not send to', to, error);
+      return { ok: false, target: to || current(), name: nameOf(to || current()), count: taken };
+    }
+  }
+
+  // Rows dragged out of the tree onto a side panel: the panel takes them as it takes "Send to AI".
+  let dragged = null; let marked = null; let onSent = () => {};
+  const surfaceOf = (event) => event.target?.closest?.('[data-sidepanel-provider]') || null;
+  const mark = (surface) => {
+    if (marked === surface) return;
+    marked?.classList.remove('fe-drop-agent');
+    marked = surface;
+    marked?.classList.add('fe-drop-agent');
+  };
+  const over = (event) => {
+    const surface = surfaceOf(event);
+    mark(surface && SEND_TARGETS.includes(surface.dataset.sidepanelProvider) ? surface : null);
+    if (!marked) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'copy';
+  };
+  const drop = (event) => {
+    const surface = surfaceOf(event);
+    const target = surface?.dataset.sidepanelProvider;
+    const paths = dragged;
+    mark(null);
+    if (!paths || !SEND_TARGETS.includes(target)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    send(paths, target).then(onSent);
+  };
+
+  return {
+    targets: () => SEND_TARGETS.map((id) => ({ id, name: nameOf(id) })),
+    current,
+    nameOf,
+    send,
+    /** Rows are being dragged: side panels take them until `dragEnd()`. */
+    dragStart(paths, sent) {
+      dragged = [...paths];
+      onSent = sent || (() => {});
+      document.addEventListener('dragover', over, true);
+      document.addEventListener('drop', drop, true);
+    },
+    dragEnd() {
+      dragged = null;
+      mark(null);
+      document.removeEventListener('dragover', over, true);
+      document.removeEventListener('drop', drop, true);
+    },
+  };
+}