openclacky 1.3.1 → 1.3.3

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

@@ -1,17 +1,16 @@
-// channels.js — Channels panel (Agent-First design)
+// ── Channels · view — platform metadata + rendering + DOM wiring ───────────
 //
-// Design principle: no configuration forms here.
-// This page shows platform status only. All setup is done via Agent with browser automation.
-// "Auto Setup" opens a chat session with /channel-manager pre-filled — the Agent will use
-// browser automation to complete the entire setup on the platform's web console.
-// "Test" runs /channel-manager doctor via the Agent and streams results.
-
-const Channels = (() => {
-
-  // Platform display metadata (use accessor to pick up runtime language)
-  // SVG sources: dashboard-icons (Lark, multi-color brand mark),
-  // TDesign icons (WeCom/WeChat, single-color), simpleicons (Discord/Telegram),
-  // ant-design/ant-design-icons outlined (DingTalk).
+// Owns PLATFORM_META (logos/labels), all card rendering, and event wiring.
+// Reads data through ChannelsStore.state and reacts to store events. Toggle /
+// test / setup go through store actions.
+//
+// Augments the `Channels` facade with onPanelShow.
+//
+// Depends on: ChannelsStore, I18n, global $ helper.
+// ───────────────────────────────────────────────────────────────────────────
+
+const ChannelsView = (() => {
+
   function PLATFORM_META() {
     return {
       feishu: {
@@ -65,37 +64,12 @@ const Channels = (() => {
     };
   }
 
-  // ── Public API ──────────────────────────────────────────────────────────────
-
-  async function onPanelShow() {
-    await _load();
-  }
-
-  // ── Data Loading ─────────────────────────────────────────────────────────────
-
-  async function _load({ silent = false } = {}) {
-    const container = $("channels-list");
-    if (!container) return;
-    if (!silent) {
-      container.innerHTML = `<div class="channel-loading">${I18n.t("channels.loading")}</div>`;
-    }
-
-    try {
-      const res  = await fetch("/api/channels");
-      const data = await res.json();
-      _render(data.channels || []);
-    } catch (e) {
-      container.innerHTML = `<div class="channel-error">${I18n.t("channels.loadError", { msg: _esc(e.message) })}</div>`;
-    }
-  }
-
-  // ── Rendering ─────────────────────────────────────────────────────────────────
-
-  function _render(channels) {
+  function _render() {
     const container = $("channels-list");
     if (!container) return;
     container.innerHTML = "";
 
+    const channels = ChannelsStore.state.channels;
     const meta = PLATFORM_META();
     const platformIds = Object.keys(meta);
     const configured = [];
@@ -106,19 +80,8 @@ const Channels = (() => {
       (serverData.has_config ? configured : unconfigured).push({ pid, serverData, meta: meta[pid] });
     });
 
-    // Connected section
-    if (configured.length > 0) {
-      const section = _renderSection("connected", configured);
-      container.appendChild(section);
-    }
-
-    // Unconfigured section
-    if (unconfigured.length > 0) {
-      const section = _renderSection("unconfigured", unconfigured);
-      container.appendChild(section);
-    }
-
-    // Custom adapter development card
+    if (configured.length > 0) container.appendChild(_renderSection("connected", configured));
+    if (unconfigured.length > 0) container.appendChild(_renderSection("unconfigured", unconfigured));
     container.appendChild(_renderCustomDevCard());
   }
 
@@ -134,8 +97,7 @@ const Channels = (() => {
     section.appendChild(header);
 
     items.forEach(({ pid, serverData, meta }) => {
-      const card = _renderCard(pid, serverData, meta);
-      section.appendChild(card);
+      section.appendChild(_renderCard(pid, serverData, meta));
     });
 
     return section;
@@ -187,7 +149,6 @@ const Channels = (() => {
       </div>
     `;
 
-    // Bind events
     card.querySelector(`#btn-test-${platform}`)?.addEventListener("click", () => _runTest(platform));
     card.querySelector(`#btn-configure-${platform}`)?.addEventListener("click", () => _openSetup(platform));
     card.querySelector(`#toggle-${platform}`)?.addEventListener("change", (ev) => _onToggle(platform, ev.target));
@@ -205,35 +166,18 @@ const Channels = (() => {
     `;
   }
 
-  // ── Status hint helpers ───────────────────────────────────────────────
-
   function _statusHint(enabled, running, hasConfig) {
-    if (running) {
-      return `<p class="channel-status-hint hint-ok">✓ ${I18n.t("channels.hint.running")}</p>`;
-    }
-    if (enabled) {
-      return `<p class="channel-status-hint hint-warn">⚠ ${I18n.t("channels.hint.enabledNotRunning")}</p>`;
-    }
-    if (hasConfig) {
-      return `<p class="channel-status-hint hint-idle">${I18n.t("channels.hint.disabled")}</p>`;
-    }
+    if (running)   return `<p class="channel-status-hint hint-ok">✓ ${I18n.t("channels.hint.running")}</p>`;
+    if (enabled)   return `<p class="channel-status-hint hint-warn">⚠ ${I18n.t("channels.hint.enabledNotRunning")}</p>`;
+    if (hasConfig) return `<p class="channel-status-hint hint-idle">${I18n.t("channels.hint.disabled")}</p>`;
     return `<p class="channel-status-hint hint-idle">${I18n.t("channels.hint.notConfigured")}</p>`;
   }
 
-  // ── Toggle handler ───────────────────────────────────────────────────────────
-
   async function _onToggle(platform, checkbox) {
     const desired = checkbox.checked;
     checkbox.disabled = true;
     try {
-      const res = await fetch(`/api/channels/${encodeURIComponent(platform)}/enabled`, {
-        method:  "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ enabled: desired }),
-      });
-      const data = await res.json();
-      if (!res.ok || !data.ok) throw new Error(data.error || "toggle failed");
-      await _load({ silent: true });
+      await Channels.toggle(platform, desired);
     } catch (e) {
       checkbox.checked = !desired;
       alert("Error: " + e.message);
@@ -242,53 +186,16 @@ const Channels = (() => {
     }
   }
 
-  // ── Actions ───────────────────────────────────────────────────────────────────
-
-  // Run E2E test: open a session and send /channel-manager doctor
-  async function _runTest(platform) {
+  function _runTest(platform) {
     const meta = PLATFORM_META()[platform];
-    await _sendToAgent(meta.testCmd, `Channel E2E Test — ${meta.name}`);
+    return Channels.runTest(meta.testCmd, `Channel E2E Test — ${meta.name}`);
   }
 
-  // Open setup: open a session and send /channel-manager setup <platform>
-  async function _openSetup(platform) {
+  function _openSetup(platform) {
     const meta = PLATFORM_META()[platform];
-    await _sendToAgent(meta.setupCmd, `Channel Setup — ${meta.name}`);
-  }
-
-  // Create a session, add it to the list, navigate to it, and send the given command.
-  // Follows the same pattern as Skills.createInSession().
-  async function _sendToAgent(command, sessionName) {
-    try {
-      // Pick a session name in "Session N" style, consistent with other modules
-      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: "setup" }),
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || I18n.t("channels.sessionError"));
-      const session = data.session;
-      if (!session) throw new Error(I18n.t("channels.noSession"));
-
-      // Register in Sessions, refresh sidebar, queue command, then navigate
-      Sessions.add(session);
-      Sessions.renderList();
-      Sessions.setPendingMessage(session.id, command);
-      Sessions.select(session.id);
-    } catch (e) {
-      alert("Error: " + e.message);
-    }
+    return Channels.openSetup(meta.setupCmd, `Channel Setup — ${meta.name}`);
   }
 
-  // ── Custom Adapter Development Card ──────────────────────────────────────────
-
   function _renderCustomDevCard() {
     const card = document.createElement("div");
     card.className = "channel-card channel-card-custom-dev";
@@ -320,17 +227,12 @@ const Channels = (() => {
     `;
 
     card.querySelector("#btn-custom-dev-guide")?.addEventListener("click", () => {
-      _sendToAgent(
-        I18n.t("channels.customDev.prompt"),
-        I18n.t("channels.customDev.title")
-      );
+      Channels.sendToAgent(I18n.t("channels.customDev.prompt"), I18n.t("channels.customDev.title"));
     });
 
     return card;
   }
 
-  // ── Helpers ───────────────────────────────────────────────────────────────────
-
   function _esc(str) {
     return String(str || "")
       .replace(/&/g, "&amp;")
@@ -339,8 +241,29 @@ const Channels = (() => {
       .replace(/"/g, "&quot;");
   }
 
-  return {
-    onPanelShow,
-    init() {}, // no static DOM to bind; events bound per-render
+  function _renderLoading() {
+    const container = $("channels-list");
+    if (container) container.innerHTML = `<div class="channel-loading">${I18n.t("channels.loading")}</div>`;
+  }
+
+  function _renderError(payload) {
+    const container = $("channels-list");
+    if (container) container.innerHTML = `<div class="channel-error">${I18n.t("channels.loadError", { msg: _esc(payload.message) })}</div>`;
+  }
+
+  function _subscribe() {
+    Channels.on("channels:loading", _renderLoading);
+    Channels.on("channels:changed", _render);
+    Channels.on("channels:error", _renderError);
+  }
+
+  const viewApi = {
+    init() { /* subscriptions wired at load; panel data loads on onPanelShow */ },
+    onPanelShow() { return Channels.load(); },
   };
+
+  return { init: _subscribe, api: viewApi };
 })();
+
+Object.assign(Channels, ChannelsView.api);
+ChannelsView.init();

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

@@ -0,0 +1,81 @@
+// ── Creator · store — cloud/local skill data + publish network ─────────────
+//
+// Owns the creator skill lists (cloud / local), loading flag, and the network
+// calls (load catalog, publish a skill). It never renders.
+//
+// Emits store events the view reacts to; mirrors them to the extension bus via
+// Clacky.ext.emit.
+//
+// `Creator` stays the single public facade.
+//
+// Depends on: Clacky.ext.
+// ───────────────────────────────────────────────────────────────────────────
+
+const CreatorStore = (() => {
+  let _cloudSkills = [];
+  let _localSkills = [];
+  let _loading     = false;
+
+  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 cloudSkills() { return _cloudSkills; },
+    get localSkills() { return _localSkills; },
+    get loading()     { return _loading; },
+  };
+
+  const Creator = {
+    on: _on,
+    state,
+
+    async load() {
+      if (_loading) return;
+      _loading = true;
+      _emit("creator:loading");
+      try {
+        const res  = await fetch("/api/creator/skills");
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Load failed");
+
+        _cloudSkills = data.cloud_skills || [];
+        _localSkills = data.local_skills || [];
+        _emit("creator:changed", { platformFetchError: data.platform_fetch_error || null });
+      } catch (e) {
+        console.error("[Creator] load failed", e);
+        _emit("creator:error", { message: e.message });
+      } finally {
+        _loading = false;
+      }
+    },
+
+    /** Publish (or update) a skill. Returns { ok, already_exists, error }. */
+    async publish(skillName, { force = false } = {}) {
+      const url  = `/api/my-skills/${encodeURIComponent(skillName)}/publish${force ? "?force=true" : ""}`;
+      const res  = await fetch(url, { method: "POST" });
+      const data = await res.json();
+      return {
+        ok:             res.ok && !!data.ok,
+        already_exists: !!data.already_exists,
+        error:          data.error || null,
+      };
+    },
+  };
+
+  return Creator;
+})();
+
+const Creator = CreatorStore;

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

@@ -1,21 +1,16 @@
-// creator.js — Creator Hub panel
+// ── Creator · view — Creator Hub rendering + publish UI + DOM wiring ───────
 //
-// Three-section layout:
-//   1. Cloud Skills  — published to the platform (version, download count)
-//   2. Local Skills  — local only, or published but with local changes
-//   3. Create New    — opens a new session with /skill-creator
+// Owns rendering of cloud/local skill cards, the publish progress UI (animation
+// + overwrite confirm), the new-skill entry, and sidebar/panel visibility.
+// Reads through CreatorStore.state; load/publish go through store actions.
 //
-// Only visible when Brand.userLicensed is true.
-// Load order: after brand.js, before app.js
-
-const Creator = (() => {
-  // ── Private state ────────────────────────────────────────────────────
-  let _cloudSkills = [];
-  let _localSkills = [];
-  let _loading     = false;
-  let _domWired    = false;
+// Augments the `Creator` facade with onPanelShow and updateSidebarVisibility.
+//
+// Depends on: CreatorStore, I18n, Brand, Skills, Modal.
+// ───────────────────────────────────────────────────────────────────────────
 
-  // ── Helpers ──────────────────────────────────────────────────────────
+const CreatorView = (() => {
+  let _domWired = false;
 
   function escapeHtml(s) {
     return String(s ?? "")
@@ -27,46 +22,7 @@ const Creator = (() => {
     return I18n.t ? I18n.t(key) : key;
   }
 
-  // Returns true if local SKILL.md is newer than the last upload
-  function _hasLocalChanges(skill) {
-    if (!skill.local_modified_at || !skill.uploaded_at) return false;
-    try {
-      return new Date(skill.local_modified_at) > new Date(skill.uploaded_at);
-    } catch { return false; }
-  }
-
-  // ── Data loading ─────────────────────────────────────────────────────
-
-  async function _load() {
-    if (_loading) return;
-    _loading = true;
-    _renderLoading();
-    try {
-      const res  = await fetch("/api/creator/skills");
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Load failed");
-
-      _cloudSkills = data.cloud_skills || [];
-      _localSkills = data.local_skills || [];
-      _render();
-
-      if (data.platform_fetch_error) {
-        _showNotice(
-          I18n.lang() === "zh"
-            ? `平台数据加载失败：${data.platform_fetch_error}`
-            : `Platform data unavailable: ${data.platform_fetch_error}`,
-          "warn"
-        );
-      }
-    } catch (e) {
-      console.error("[Creator] load failed", e);
-      _renderError(e.message);
-    } finally {
-      _loading = false;
-    }
-  }
-
-  // ── Rendering ────────────────────────────────────────────────────────
+  // ── Loading / error ─────────────────────────────────────────────────────
 
   function _renderLoading() {
     const cloudList = document.getElementById("creator-cloud-list");
@@ -76,52 +32,57 @@ const Creator = (() => {
     if (localList) localList.innerHTML = "";
   }
 
-  function _renderError(msg) {
+  function _renderError(payload) {
     const cloudList = document.getElementById("creator-cloud-list");
-    if (cloudList) cloudList.innerHTML = `<div class="creator-empty creator-error">${escapeHtml(msg)}</div>`;
+    if (cloudList) cloudList.innerHTML = `<div class="creator-empty creator-error">${escapeHtml(payload.message)}</div>`;
     const localList = document.getElementById("creator-local-list");
     if (localList) localList.innerHTML = "";
   }
 
-  function _render() {
+  function _render(payload) {
     _renderCloudSection();
     _renderLocalSection();
     _wireNewSkillEntry();
+
+    if (payload && payload.platformFetchError) {
+      _showNotice(
+        I18n.lang() === "zh"
+          ? `平台数据加载失败：${payload.platformFetchError}`
+          : `Platform data unavailable: ${payload.platformFetchError}`,
+        "warn"
+      );
+    }
   }
 
   function _renderCloudSection() {
-    const list  = document.getElementById("creator-cloud-list");
-    const block = document.getElementById("creator-cloud-block");
+    const list = document.getElementById("creator-cloud-list");
     if (!list) return;
 
-    if (_cloudSkills.length === 0) {
+    const cloudSkills = CreatorStore.state.cloudSkills;
+    if (cloudSkills.length === 0) {
       list.innerHTML = `<div class="creator-empty">${_t("creator.cloud.empty")}</div>`;
       return;
     }
 
     list.innerHTML = "";
-    _cloudSkills.forEach(skill => {
-      list.appendChild(_buildCloudCard(skill));
-    });
+    cloudSkills.forEach(skill => list.appendChild(_buildCloudCard(skill)));
   }
 
   function _renderLocalSection() {
-    const list  = document.getElementById("creator-local-list");
-    const block = document.getElementById("creator-local-block");
+    const list = document.getElementById("creator-local-list");
     if (!list) return;
 
-    if (_localSkills.length === 0) {
+    const localSkills = CreatorStore.state.localSkills;
+    if (localSkills.length === 0) {
       list.innerHTML = `<div class="creator-empty">${_t("creator.local.empty")}</div>`;
       return;
     }
 
     list.innerHTML = "";
-    _localSkills.forEach(skill => {
-      list.appendChild(_buildLocalCard(skill));
-    });
+    localSkills.forEach(skill => list.appendChild(_buildLocalCard(skill)));
   }
 
-  // ── Cloud card ───────────────────────────────────────────────────────
+  // ── Cloud card ───────────────────────────────────────────────────────────
 
   function _buildCloudCard(skill) {
     const card = document.createElement("div");
@@ -143,15 +104,10 @@ const Creator = (() => {
          </span>`
       : "";
 
-    // Has local changes indicator
     const changesHtml = skill.has_local_changes
       ? `<span class="creator-changes-badge" title="${_t("creator.hasLocalChanges")}">● ${_t("creator.changed")}</span>`
       : "";
 
-    // Action buttons:
-    //   - local_present + has_local_changes → "Update" (publish) + "Iterate" (skill-creator)
-    //   - local_present + no changes        → grey disabled "Up to date" + "Iterate"
-    //   - no local copy                     → nothing (can only iterate to create local first)
     let actionBtnsHtml = "";
     if (skill.local_present) {
       if (skill.has_local_changes) {
@@ -220,15 +176,13 @@ const Creator = (() => {
 
     if (skill.local_present) {
       const iterBtn = card.querySelector(".btn-creator-iterate");
-      if (iterBtn) {
-        iterBtn.addEventListener("click", () => _iterateSkill(skill.name));
-      }
+      if (iterBtn) iterBtn.addEventListener("click", () => _iterateSkill(skill.name));
     }
 
     return card;
   }
 
-  // ── Local card ───────────────────────────────────────────────────────
+  // ── Local card ─────────────────────────────────────────────────────────
 
   function _buildLocalCard(skill) {
     const card = document.createElement("div");
@@ -277,7 +231,7 @@ const Creator = (() => {
     return card;
   }
 
-  // ── Publish logic ────────────────────────────────────────────────────
+  // ── Publish UI ───────────────────────────────────────────────────────────
 
   async function _publishSkill(skillName, publishBtn, progressWrap, progressBar, force, card, isUpdate) {
     publishBtn.disabled = true;
@@ -300,27 +254,22 @@ const Creator = (() => {
     let skipFinalReset = false;
 
     try {
-      const url  = `/api/my-skills/${encodeURIComponent(skillName)}/publish${force ? "?force=true" : ""}`;
-      const res  = await fetch(url, { method: "POST" });
-      const data = await res.json();
-
+      const result = await Creator.publish(skillName, { force });
       clearInterval(animInterval);
 
-      if (!res.ok || !data.ok) {
-        alreadyExists = !!data.already_exists;
-        throw new Error(data.error || "Publish failed");
+      if (!result.ok) {
+        alreadyExists = result.already_exists;
+        throw new Error(result.error || "Publish failed");
       }
 
-      // Success
       progressBar.style.width = "100%";
       progressBar.dataset.state = "success";
       publishBtn.dataset.state = "success";
       if (btnLabel) btnLabel.textContent = I18n.lang() === "zh" ? "已发布 ✓" : "Published ✓";
 
       await new Promise(r => setTimeout(r, 1400));
-      // Reload to get fresh data
-      await _load();
-      skipFinalReset = true; // _load() re-renders, no need to reset manually
+      await Creator.load();
+      skipFinalReset = true;
 
     } catch (e) {
       clearInterval(animInterval);
@@ -368,14 +317,10 @@ const Creator = (() => {
     }
   }
 
-  // ── Iterate skill (open skill-creator session for an existing skill) ──
-
   function _iterateSkill(skillName) {
     Skills.createInSession(`/skill-creator ${I18n.t("creator.iterate.prompt")}${skillName}`);
   }
 
-  // ── Create new skill entry ────────────────────────────────────────────
-
   function _wireNewSkillEntry() {
     const entry = document.getElementById("creator-new-entry");
     if (!entry || entry.dataset.wired) return;
@@ -383,8 +328,6 @@ const Creator = (() => {
     entry.addEventListener("click", () => Skills.createInSession());
   }
 
-  // ── Notice bar ────────────────────────────────────────────────────────
-
   function _showNotice(msg, type = "warn") {
     const container = document.getElementById("creator-cloud-list");
     if (!container) return;
@@ -396,9 +339,13 @@ const Creator = (() => {
     container.prepend(el);
   }
 
-  // ── Public API ────────────────────────────────────────────────────────
+  function _subscribe() {
+    Creator.on("creator:loading", _renderLoading);
+    Creator.on("creator:changed", _render);
+    Creator.on("creator:error", _renderError);
+  }
 
-  return {
+  const viewApi = {
     /** Show/hide the creator section.
      *  Hidden for brand consumer users (branded=true, userLicensed=false).
      *  Visible for creators (userLicensed=true) and unbranded users. */
@@ -415,7 +362,6 @@ const Creator = (() => {
         _domWired = true;
         _wireNewSkillEntry();
       }
-      // Show promo banner and cloud lock for non-licensed users
       const licensed = Brand.userLicensed;
       const banner = document.getElementById("creator-promo-banner");
       const lock   = document.getElementById("creator-cloud-lock");
@@ -423,7 +369,12 @@ const Creator = (() => {
       if (banner) banner.style.display = licensed ? "none" : "";
       if (lock)   lock.style.display   = licensed ? "none" : "";
       if (list)   list.style.display   = licensed ? ""     : "none";
-      _load();
+      Creator.load();
     },
   };
+
+  return { init: _subscribe, api: viewApi };
 })();
+
+Object.assign(Creator, CreatorView.api);
+CreatorView.init();