openclacky 1.3.2 → 1.3.3

data/lib/clacky/web/features/mcp/store.js

@@ -0,0 +1,158 @@
+// ── MCP · store — server catalog data + Agent-driven actions ───────────────
+//
+// MCP is a read-only, Agent-First panel. Configuration lives in mcp.json; this
+// store fetches the catalog, probes servers for their tool list, toggles the
+// enabled flag, and removes entries. It never renders.
+//
+// Holds catalog data, expand state, and a tools cache. Emits store events the
+// view reacts to; mirrors them to the extension bus via Clacky.ext.emit.
+//
+// `Mcp` stays the single public facade.
+//
+// Depends on: Sessions, Clacky.ext.
+// ───────────────────────────────────────────────────────────────────────────
+
+const McpStore = (() => {
+  let _data = null;
+  const _expanded = new Set();
+  const _toolsCache = new Map();
+
+  const _listeners = {};
+
+  function _on(event, handler) {
+    (_listeners[event] ||= []).push(handler);
+    return () => {
+      const list = _listeners[event];
+      const i = list ? list.indexOf(handler) : -1;
+      if (i >= 0) list.splice(i, 1);
+    };
+  }
+
+  function _emit(event, payload) {
+    (_listeners[event] || []).forEach((h) => h(payload));
+    if (window.Clacky && Clacky.ext) Clacky.ext.emit(event, payload);
+  }
+
+  const state = {
+    get data() { return _data; },
+    get expanded() { return _expanded; },
+    isExpanded(name) { return _expanded.has(name); },
+    cachedTools(name) { return _toolsCache.get(name); },
+    hasCachedTools(name) { return _toolsCache.has(name); },
+  };
+
+  async function _sendToAgent(command, sessionName) {
+    try {
+      const maxN = Sessions.all.reduce((max, s) => {
+        const m = s.name.match(/^Session (\d+)$/);
+        return m ? Math.max(max, parseInt(m[1], 10)) : max;
+      }, 0);
+      const name = sessionName || ("Session " + (maxN + 1));
+
+      const res = await fetch("/api/sessions", {
+        method:  "POST",
+        headers: { "Content-Type": "application/json" },
+        body:    JSON.stringify({ name, source: "mcp" }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "failed to create session");
+      const session = data.session;
+      if (!session) throw new Error("no session returned");
+
+      Sessions.add(session);
+      Sessions.renderList();
+      Sessions.setPendingMessage(session.id, command);
+      Sessions.select(session.id);
+    } catch (e) {
+      alert("Error: " + e.message);
+    }
+  }
+
+  const Mcp = {
+    on: _on,
+    state,
+
+    async load() {
+      _emit("mcp:loading");
+      try {
+        const res = await fetch("/api/mcp");
+        _data = await res.json();
+        _emit("mcp:changed", { data: _data });
+      } catch (e) {
+        _emit("mcp:error", { message: e.message });
+      }
+    },
+
+    /** Fetch a server's tool catalog (cached). Returns { ok, tools, error }. */
+    async probe(name) {
+      if (_toolsCache.has(name)) return { ok: true, tools: _toolsCache.get(name) };
+      try {
+        const res  = await fetch(`/api/mcp/${encodeURIComponent(name)}/probe`, { method: "POST" });
+        const data = await res.json();
+        if (!res.ok || !data.ok) return { ok: false, error: data.error || "unknown" };
+        const tools = data.tools || [];
+        _toolsCache.set(name, tools);
+        return { ok: true, tools };
+      } catch (e) {
+        return { ok: false, error: e.message };
+      }
+    },
+
+    toggleExpand(name) {
+      if (_expanded.has(name)) _expanded.delete(name);
+      else _expanded.add(name);
+      _emit("mcp:changed", { data: _data });
+    },
+
+    async toggle(name, enabled) {
+      try {
+        const res = await fetch(`/api/mcp/${encodeURIComponent(name)}/enabled`, {
+          method:  "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body:    JSON.stringify({ enabled }),
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) {
+          _emit("mcp:actionError", { kind: "toggle", message: data.error || `HTTP ${res.status}` });
+          return;
+        }
+        if (!enabled) {
+          _toolsCache.delete(name);
+          _expanded.delete(name);
+        }
+        await Mcp.load();
+      } catch (e) {
+        _emit("mcp:actionError", { kind: "toggle", message: e.message });
+      }
+    },
+
+    async remove(name) {
+      try {
+        const res = await fetch(`/api/mcp/${encodeURIComponent(name)}`, { method: "DELETE" });
+        const data = await res.json();
+        if (!res.ok || !data.ok) {
+          _emit("mcp:actionError", { kind: "remove", message: data.error || `HTTP ${res.status}` });
+          return;
+        }
+        _toolsCache.delete(name);
+        _expanded.delete(name);
+        await Mcp.load();
+      } catch (e) {
+        _emit("mcp:actionError", { kind: "remove", message: e.message });
+      }
+    },
+
+    resetCaches() {
+      _toolsCache.clear();
+      _expanded.clear();
+    },
+
+    askAdd()      { return _sendToAgent("/mcp-manager add", "MCP Setup"); },
+    askFix(name)  { return _sendToAgent(`/mcp-manager reconfigure ${name}`, `MCP Fix — ${name}`); },
+    sendToAgent:  _sendToAgent,
+  };
+
+  return Mcp;
+})();
+
+const Mcp = McpStore;

data/lib/clacky/web/{mcp.js → features/mcp/view.js}

@@ -1,48 +1,38 @@
-// mcp.js — MCP servers panel (read-only, Agent-First).
+// ── MCP · view — rendering + DOM wiring for the MCP servers panel ──────────
 //
-// This page lists MCP servers configured in ~/.clacky/mcp.json (or project-level
-// override). Configuration itself stays in the JSON file — same format as
-// Claude Desktop and Cursor — so existing configs work as-is.
+// Owns all card/status/tools rendering and event wiring. Reads through
+// McpStore.state and reacts to store events. Probe / toggle / remove go through
+// store actions; confirm dialogs and error alerts (UI concerns) live here.
 //
-// Per-server "Show tools" probes the server briefly to fetch its tool catalog.
-// Nothing here keeps a process running; agent runs do their own lazy spawn.
-
-const Mcp = (() => {
-
-  let _data = null;
-  const _expanded = new Set();
-  const _toolsCache = new Map();
+// Augments the `Mcp` facade with onPanelShow.
+//
+// Depends on: McpStore, I18n, global $ helper.
+// ───────────────────────────────────────────────────────────────────────────
 
-  async function onPanelShow() {
-    await _load();
-  }
+const McpView = (() => {
 
-  async function _load() {
+  function _renderLoading() {
     const list = $("mcp-list");
     const status = $("mcp-status");
-    if (!list) return;
-    list.innerHTML = `<div class="channel-loading">${I18n.t("mcp.loading")}</div>`;
     if (status) status.innerHTML = "";
+    if (list) list.innerHTML = `<div class="channel-loading">${I18n.t("mcp.loading")}</div>`;
+  }
 
-    try {
-      const res = await fetch("/api/mcp");
-      const data = await res.json();
-      _data = data;
-      _render();
-    } catch (e) {
-      list.innerHTML = `<div class="channel-error">${I18n.t("mcp.loadError", { msg: _esc(e.message) })}</div>`;
-    }
+  function _renderError(payload) {
+    const list = $("mcp-list");
+    if (list) list.innerHTML = `<div class="channel-error">${I18n.t("mcp.loadError", { msg: _esc(payload.message) })}</div>`;
   }
 
   function _render() {
     const list = $("mcp-list");
     const status = $("mcp-status");
-    if (!list || !_data) return;
+    const data = McpStore.state.data;
+    if (!list || !data) return;
 
     if (status) {
-      const pathLabel = _data.config_exists
-        ? _esc(_data.config_path)
-        : `${_esc(_data.config_path)} <em>${I18n.t("mcp.config.missing")}</em>`;
+      const pathLabel = data.config_exists
+        ? _esc(data.config_path)
+        : `${_esc(data.config_path)} <em>${I18n.t("mcp.config.missing")}</em>`;
       status.innerHTML = `
         <div class="mcp-cta">
           <div class="mcp-cta-text">
@@ -70,16 +60,15 @@ const Mcp = (() => {
         </div>
       `;
       $("btn-mcp-refresh")?.addEventListener("click", () => {
-        _toolsCache.clear();
-        _expanded.clear();
-        _load();
+        Mcp.resetCaches();
+        Mcp.load();
       });
-      $("btn-mcp-cta")?.addEventListener("click", () => _askClackyAdd());
+      $("btn-mcp-cta")?.addEventListener("click", () => Mcp.askAdd());
     }
 
     list.innerHTML = "";
 
-    if (!_data.configured || !_data.servers || _data.servers.length === 0) {
+    if (!data.configured || !data.servers || data.servers.length === 0) {
       list.innerHTML = `
         <div class="mcp-empty">
           <h3>${I18n.t("mcp.empty.title")}</h3>
@@ -89,11 +78,11 @@ const Mcp = (() => {
           </button>
         </div>
       `;
-      $("btn-mcp-empty-cta")?.addEventListener("click", () => _askClackyAdd());
+      $("btn-mcp-empty-cta")?.addEventListener("click", () => Mcp.askAdd());
       return;
     }
 
-    _data.servers.forEach(server => {
+    data.servers.forEach(server => {
       list.appendChild(_renderCard(server));
     });
   }
@@ -109,7 +98,7 @@ const Mcp = (() => {
       ? (server.url || "")
       : [server.command, ...(server.args || [])].filter(Boolean).join(" ");
     const cmdLabel = isHttp ? I18n.t("mcp.url") : I18n.t("mcp.command");
-    const isExpanded = _expanded.has(server.name);
+    const isExpanded = McpStore.state.isExpanded(server.name);
     const toggleAria = server.disabled
       ? I18n.t("mcp.toggle.off")
       : I18n.t("mcp.toggle.on");
@@ -174,7 +163,7 @@ const Mcp = (() => {
     card.querySelector(`#btn-mcp-probe-${CSS.escape(server.name)}`)
       ?.addEventListener("click", () => {
         if (server.disabled) return;
-        _toggleProbe(server.name);
+        Mcp.toggleExpand(server.name);
       });
     card.querySelector(`#btn-mcp-remove-${CSS.escape(server.name)}`)
       ?.addEventListener("click", () => _remove(server.name));
@@ -186,39 +175,23 @@ const Mcp = (() => {
     return card;
   }
 
-  async function _toggleProbe(name) {
-    if (_expanded.has(name)) {
-      _expanded.delete(name);
-    } else {
-      _expanded.add(name);
-    }
-    _render();
-    if (_expanded.has(name)) await _renderTools(name);
-  }
-
   async function _renderTools(name) {
     const region = document.getElementById(`mcp-tools-${name}`);
     if (!region) return;
 
-    if (_toolsCache.has(name)) {
-      region.innerHTML = _toolsHtml(_toolsCache.get(name));
+    if (McpStore.state.hasCachedTools(name)) {
+      region.innerHTML = _toolsHtml(McpStore.state.cachedTools(name));
       return;
     }
 
     region.innerHTML = `<div class="mcp-tools-loading">${I18n.t("mcp.toolsLoading")}</div>`;
 
-    try {
-      const res = await fetch(`/api/mcp/${encodeURIComponent(name)}/probe`, { method: "POST" });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        region.innerHTML = `<div class="mcp-tools-error">${I18n.t("mcp.toolsLoadError", { msg: _esc(data.error || "unknown") })}</div>`;
-        return;
-      }
-      _toolsCache.set(name, data.tools || []);
-      region.innerHTML = _toolsHtml(data.tools || []);
-    } catch (e) {
-      region.innerHTML = `<div class="mcp-tools-error">${I18n.t("mcp.toolsLoadError", { msg: _esc(e.message) })}</div>`;
+    const result = await Mcp.probe(name);
+    if (!result.ok) {
+      region.innerHTML = `<div class="mcp-tools-error">${I18n.t("mcp.toolsLoadError", { msg: _esc(result.error) })}</div>`;
+      return;
     }
+    region.innerHTML = _toolsHtml(result.tools);
   }
 
   function _toolsHtml(tools) {
@@ -237,80 +210,14 @@ const Mcp = (() => {
     `;
   }
 
-  function _askClackyAdd() {
-    _sendToAgent("/mcp-manager add", "MCP Setup");
-  }
-
-  function _askClackyFix(name) {
-    _sendToAgent(`/mcp-manager reconfigure ${name}`, `MCP Fix — ${name}`);
-  }
-
-  async function _sendToAgent(command, sessionName) {
-    try {
-      const maxN = Sessions.all.reduce((max, s) => {
-        const m = s.name.match(/^Session (\d+)$/);
-        return m ? Math.max(max, parseInt(m[1], 10)) : max;
-      }, 0);
-      const name = sessionName || ("Session " + (maxN + 1));
-
-      const res = await fetch("/api/sessions", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name, source: "mcp" }),
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "failed to create session");
-      const session = data.session;
-      if (!session) throw new Error("no session returned");
-
-      Sessions.add(session);
-      Sessions.renderList();
-      Sessions.setPendingMessage(session.id, command);
-      Sessions.select(session.id);
-    } catch (e) {
-      alert("Error: " + e.message);
-    }
-  }
-
   async function _toggle(name, enabled) {
-    try {
-      const res = await fetch(`/api/mcp/${encodeURIComponent(name)}/enabled`, {
-        method:  "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ enabled }),
-      });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        alert(I18n.t("mcp.toggle.error", { msg: data.error || `HTTP ${res.status}` }));
-        return;
-      }
-      if (!enabled) {
-        _toolsCache.delete(name);
-        _expanded.delete(name);
-      }
-      await _load();
-    } catch (e) {
-      alert(I18n.t("mcp.toggle.error", { msg: e.message }));
-    }
+    await Mcp.toggle(name, enabled);
   }
 
-  async function _remove(name) {
+  function _remove(name) {
     const msg = I18n.t("mcp.remove.confirm", { name });
     if (!window.confirm(msg)) return;
-
-    try {
-      const res = await fetch(`/api/mcp/${encodeURIComponent(name)}`, { method: "DELETE" });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        alert(I18n.t("mcp.remove.error", { msg: data.error || `HTTP ${res.status}` }));
-        return;
-      }
-      _toolsCache.delete(name);
-      _expanded.delete(name);
-      await _load();
-    } catch (e) {
-      alert(I18n.t("mcp.remove.error", { msg: e.message }));
-    }
+    Mcp.remove(name);
   }
 
   function _esc(str) {
@@ -321,8 +228,24 @@ const Mcp = (() => {
       .replace(/"/g, "&quot;");
   }
 
-  return {
-    onPanelShow,
-    init() {},
+  function _onActionError(payload) {
+    const key = payload.kind === "remove" ? "mcp.remove.error" : "mcp.toggle.error";
+    alert(I18n.t(key, { msg: payload.message }));
+  }
+
+  function _subscribe() {
+    Mcp.on("mcp:loading", _renderLoading);
+    Mcp.on("mcp:changed", _render);
+    Mcp.on("mcp:error", _renderError);
+    Mcp.on("mcp:actionError", _onActionError);
+  }
+
+  const viewApi = {
+    onPanelShow() { return Mcp.load(); },
   };
+
+  return { init: _subscribe, api: viewApi };
 })();
+
+Object.assign(Mcp, McpView.api);
+McpView.init();

data/lib/clacky/web/features/model-tester/store.js

@@ -0,0 +1,77 @@
+// ── ModelTester · store — model connection test + save (shared helper) ────
+//
+// Network helpers shared by the onboarding wizard and the settings model modal:
+// test a model connection and persist a model config. No own panel, no state to
+// hold — it mirrors test/save outcomes onto the extension bus so extensions can
+// observe model-config changes.
+//
+// `ModelTester` stays the single public facade.
+//
+// Depends on: I18n, Clacky.ext.
+// ───────────────────────────────────────────────────────────────────────────
+
+window.ModelTester = (function () {
+  function _emit(event, payload) {
+    if (window.Clacky && Clacky.ext) Clacky.ext.emit(event, payload);
+  }
+
+  async function testConnection({ model, base_url, api_key, anthropic_format, index, id } = {}) {
+    const body = { model, base_url, api_key };
+    if (typeof id === "string" && id) body.id = id;
+    if (typeof index === "number") body.index = index;
+    if (anthropic_format) body.anthropic_format = true;
+
+    let data;
+    try {
+      const res = await fetch("/api/config/test", {
+        method:  "POST",
+        headers: { "Content-Type": "application/json" },
+        body:    JSON.stringify(body)
+      });
+      data = await res.json();
+    } catch (e) {
+      return { ok: false, message: e.message };
+    }
+
+    let result;
+    if (!data.ok) {
+      const msg  = data.message || "";
+      const code = data.error_code || "";
+      result = code === "insufficient_credit"
+        ? { ok: false, message: I18n.t("error.insufficient_credit"), error_code: code }
+        : { ok: false, message: msg, error_code: code };
+    } else if (data.effective_base_url && data.effective_base_url !== base_url) {
+      result = { ok: true, base_url: data.effective_base_url, message: data.message || "", rewrote: true };
+    } else {
+      result = { ok: true, base_url, message: data.message || "" };
+    }
+
+    _emit("modeltester:tested", { model, ok: result.ok });
+    return result;
+  }
+
+  async function saveModel(payload, { existingId } = {}) {
+    const url = existingId
+      ? `/api/config/models/${encodeURIComponent(existingId)}`
+      : "/api/config/models";
+    const method = existingId ? "PATCH" : "POST";
+
+    try {
+      const res  = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body:    JSON.stringify(payload)
+      });
+      const data = await res.json();
+      const result = data.ok ? { ok: true } : { ok: false, error: data.error || "" };
+      _emit("modeltester:saved", { existingId: existingId || null, ok: result.ok });
+      return result;
+    } catch (e) {
+      return { ok: false, error: e.message };
+    }
+  }
+
+  return { testConnection, saveModel };
+})();
+
+const ModelTester = window.ModelTester;

data/lib/clacky/web/features/model-tester/view.js

@@ -0,0 +1,7 @@
+// ── ModelTester · view — render-free feature ──────────────────────────────
+//
+// ModelTester is a shared network helper with no panel of its own: the
+// onboarding wizard and the settings model modal own the UI and call
+// ModelTester.testConnection / saveModel directly. There is nothing to render
+// here. This file exists to satisfy the store/view layering convention.
+// ───────────────────────────────────────────────────────────────────────────