openclacky 1.3.7 → 1.3.9

data/lib/clacky/web/core/ext.js

@@ -8,10 +8,16 @@
 //   Clacky.ext.subscribe(event, handler)     — listen to store events (read-only)
 //   Clacky.ext.ui.mount(slot, spec, opts)    — inject UI into a named slot
 //
-//   `spec` is either a render function or { create?, render }. On per-session
-//   slots (session.aside/banner/composer), providing `create(ctx)` gives you
-//   one runtime per sessionId, isolated across sessions and disposed only
-//   when the session leaves the sidebar.
+//   `spec` is either a render function or { create?, render }. The render
+//   signature is always `render(container, ctx, runtime)`:
+//     - `container` is a host-owned DOM element — append your UI into it,
+//       or return a DOM node / HTML string and the host appends it for you.
+//     - returning a function registers it as a teardown callback.
+//     - returning null is treated as an error (almost always a wrong
+//       signature, e.g. `(ctx) => ...`), surfaced as a crashed placeholder.
+//   On per-session slots (session.aside/banner/composer), providing
+//   `create(ctx)` gives you one runtime per sessionId, isolated across
+//   sessions and disposed only when the session leaves the sidebar.
 //
 // Safety guarantees enforced here (the "constitution"):
 //   - Every extension callback is wrapped in try/catch. A throwing extension is
@@ -49,8 +55,6 @@ Clacky.ext = (() => {
   // renderer becomes one tab (chrome drawn by the host), and only the active
   // tab's body is shown. Renderers in these slots must carry opts.tab.
   const TABBED_SLOTS = { "session.aside": true };
-  // slot => active tab id (remembered across re-renders within a page load).
-  const _activeTab = {};
 
   // Slots that follow the current session's agent scope. A mount into any
   // of these, made from inside a panel file, is confined to that panel's
@@ -92,6 +96,7 @@ Clacky.ext = (() => {
   // Resolved by the host before the extension scripts run (see loader markers).
   const _extAgents = {};
   const _panelAgents = {};
+  const _agentContributions = {};     // agent id => { panels:[{id,title,title_zh}], skills:[...] }
   let   _currentPanel = null;         // set while an official panel file is loading
 
   // Current session context, kept in sync by the host on every session switch.
@@ -213,6 +218,11 @@ Clacky.ext = (() => {
     Object.assign(_panelAgents, map);
   }
 
+  function registerAgentContributions(map) {
+    if (PURE || !map) return;
+    Object.assign(_agentContributions, map);
+  }
+
   const api = {
     // Register a named data source. Host/extensions can later resolve it.
     register(name, fn) {
@@ -376,26 +386,119 @@ Clacky.ext = (() => {
   // as the view teardown, run before the next render or on session exit.
   function _invokeRender(slot, entry, container, ctx) {
     const runtime = _getRuntime(slot, entry, ctx);
-    let node, teardown, crashed = false;
+    let node, teardown, crashed = false, reason = null;
     try {
       const out = entry.render(container, ctx, runtime);
-      if (out === undefined) {
-        crashed = false;  // container mutated in-place is fine
+      if (out === undefined || out === null) {
+        // undefined → container mutated in-place; null → renderer opted out of
+        // this context (e.g. `if (!ctx.sessionId) return null` on the new-session
+        // page). Both render nothing; neither is an error.
       } else if (typeof out === "function") {
         teardown = out;
       } else {
         node = out;
       }
-    } catch (_e) {
+    } catch (err) {
+      reason = String((err && err.stack) || err);
+      console.error(`[Clacky.ext] extension "${entry.extId || "?"}" threw in render for slot ${JSON.stringify(slot)}:`, err);
       crashed = true;
     }
-    if (crashed) return { crashed: true };
+    if (crashed) return { crashed: true, reason, extId: entry.extId };
     if (ctx && ctx.sessionId && teardown) {
       _rememberViewTeardown(ctx.sessionId, _mountKey(slot, entry), teardown);
     }
     return { node };
   }
 
+  // Build a styled, self-contained crashed-panel placeholder: a short headline
+  // plus a collapsible <details> exposing the actual reason and a nudge to the
+  // console. Never throws; the reason is rendered as plain text.
+  function _crashedPlaceholder(extId, reason) {
+    _injectCrashStyle();
+    const box = document.createElement("div");
+    box.className = "ext-slot-crashed";
+    box.setAttribute("data-ext-status", "crashed");
+
+    const head = document.createElement("div");
+    head.className = "ext-crashed-head";
+    const icon = document.createElement("span");
+    icon.className = "ext-crashed-icon";
+    icon.textContent = "!";
+    const title = document.createElement("span");
+    title.className = "ext-crashed-title";
+    title.textContent = extId ? `扩展「${extId}」渲染失败` : "扩展渲染失败";
+    head.appendChild(icon);
+    head.appendChild(title);
+    box.appendChild(head);
+
+    const hint = document.createElement("div");
+    hint.className = "ext-crashed-hint";
+    hint.textContent = "面板未能加载。展开下方详情，或打开浏览器控制台 (console) 查看完整错误。";
+    box.appendChild(hint);
+
+    if (reason) {
+      const details = document.createElement("details");
+      details.className = "ext-crashed-details";
+      const summary = document.createElement("summary");
+      summary.textContent = "错误详情";
+      const pre = document.createElement("pre");
+      pre.className = "ext-crashed-reason";
+      pre.textContent = reason;
+      details.appendChild(summary);
+      details.appendChild(pre);
+      box.appendChild(details);
+    }
+    return box;
+  }
+
+  let _crashStyleInjected = false;
+  function _injectCrashStyle() {
+    if (_crashStyleInjected) return;
+    _crashStyleInjected = true;
+    const style = document.createElement("style");
+    style.id = "ext-crashed-style";
+    style.textContent = `
+      .ext-slot-crashed {
+        margin: 12px;
+        padding: 14px 16px;
+        border: 1px solid var(--color-error-border, #fecaca);
+        background: var(--color-error-bg, #fef2f2);
+        border-radius: var(--radius-md, 8px);
+        color: var(--color-text-secondary, #56585e);
+        font-size: 13px;
+        line-height: 1.5;
+      }
+      .ext-crashed-head { display: flex; align-items: center; gap: 8px; }
+      .ext-crashed-icon {
+        display: inline-flex; align-items: center; justify-content: center;
+        width: 18px; height: 18px; flex: none;
+        border-radius: 50%;
+        background: var(--color-error, #ef4444);
+        color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
+      }
+      .ext-crashed-title { font-weight: 600; color: var(--color-text-primary, #1a1b1e); }
+      .ext-crashed-hint { margin-top: 6px; color: var(--color-text-tertiary, #8a8d94); }
+      .ext-crashed-details { margin-top: 10px; }
+      .ext-crashed-details > summary {
+        cursor: pointer; user-select: none;
+        color: var(--color-error, #ef4444); font-weight: 500;
+      }
+      .ext-crashed-reason {
+        margin: 8px 0 0;
+        padding: 10px;
+        max-height: 220px; overflow: auto;
+        background: var(--color-bg-primary, #fbfbfa);
+        border: 1px solid var(--color-border-primary, #e8e8e4);
+        border-radius: var(--radius-sm, 6px);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 12px; line-height: 1.45;
+        white-space: pre-wrap; word-break: break-word;
+        color: var(--color-text-secondary, #56585e);
+      }
+    `;
+    (document.head || document.documentElement).appendChild(style);
+  }
+
 
   // null agents AND null panel => global (always visible). Otherwise the
   // current profile must be in the renderer's agent list, or in the set of
@@ -407,6 +510,13 @@ Clacky.ext = (() => {
     return false;
   }
 
+  // What a third-party agent's extension contributes (panels + skills), from
+  // ext.yml — so the new-session page can advertise it before a session exists.
+  // Returns { panels:[{id,title,title_zh}], skills:[...] } or null for built-ins.
+  function contributionsForAgent(agentId) {
+    return (agentId && _agentContributions[agentId]) || null;
+  }
+
   // Render every extension registered for `slot` into `container`, scoped to the
   // current agent profile. Called by the host's view layer wherever it exposes a
   // slot, and re-called on session switch (the container is cleared first so a
@@ -436,11 +546,9 @@ Clacky.ext = (() => {
       // Nav mounts that open a workspace declare it via opts.workspace; the
       // host stamps it so the Router alone owns the active highlight.
       if (entry.workspace) wrap.setAttribute("data-ext-workspace", entry.workspace);
-      const { node, crashed } = _invokeRender(slot, entry, wrap, renderCtx);
+      const { node, crashed, reason, extId } = _invokeRender(slot, entry, wrap, renderCtx);
       if (crashed) {
-        wrap.setAttribute("data-ext-status", "crashed");
-        wrap.className = "ext-slot-crashed";
-        wrap.textContent = "Extension failed to render.";
+        wrap.appendChild(_crashedPlaceholder(extId || entry.extId, reason));
         container.appendChild(wrap);
         return;
       }
@@ -478,17 +586,16 @@ Clacky.ext = (() => {
     const bodies = document.createElement("div");
     bodies.className = "aside-bodies";
 
-    // Restore previously active tab if still present, else first tab.
+    // Always default to the first (highest-priority) tab. Tabs may register in
+    // several async passes; whichever pass runs last simply lands on tab #1.
     const ids = renderers.map((e) => e.tab.id);
-    let active = _activeTab[slot];
-    if (!active || !ids.includes(active)) active = ids[0];
+    const active = ids[0];
 
     const tabBtns = {};
     const bodyEls = {};
     const rendered = {};
 
     function activate(id) {
-      _activeTab[slot] = id;
       Object.keys(tabBtns).forEach((k) => tabBtns[k].classList.toggle("active", k === id));
       Object.keys(bodyEls).forEach((k) => bodyEls[k].classList.toggle("active", k === id));
       if (!rendered[id]) {
@@ -498,12 +605,9 @@ Clacky.ext = (() => {
         const localCtx = Object.assign({}, renderCtx, {
           setBadge: (n) => _setTabBadge(tabBtns[id], n),
         });
-        const { node, crashed } = _invokeRender(slot, entry, body, localCtx);
+        const { node, crashed, reason, extId } = _invokeRender(slot, entry, body, localCtx);
         if (crashed) {
-          const ph = document.createElement("div");
-          ph.className = "ext-slot-crashed";
-          ph.textContent = "Extension failed to render.";
-          body.appendChild(ph);
+          body.appendChild(_crashedPlaceholder(extId || entry.extId, reason));
         } else if (node != null) {
           if (typeof node === "string") body.innerHTML = node;
           else body.appendChild(node);
@@ -608,6 +712,8 @@ Clacky.ext = (() => {
     notifySessionRemoved,
     refreshSlots,
     registerPanelAgents,
+    registerAgentContributions,
+    contributionsForAgent,
     api,
     ui,
     subscribe,

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

@@ -19,9 +19,11 @@
 
 const ExtensionsStore = (() => {
   // ── State (single source of truth) ─────────────────────────────────────
-  let _extensions = [];        // [{ id, name, name_zh, description, ..., units }]
-  let _query      = "";        // current search text
-  let _sort       = "newest";  // "newest" | "updated" | "downloads"
+  let _extensions      = [];        // [{ id, name, name_zh, description, ..., units }]
+  let _allExtensions   = [];        // unfiltered result from server
+  let _query           = "";        // current search text
+  let _sort            = "newest";  // "newest" | "updated" | "downloads"
+  let _filterInstalled = false;     // when true, show only installed extensions
   let _loading    = false;
   let _error      = null;      // soft warning when the store is unreachable
   let _detail     = null;      // currently opened extension detail, or null
@@ -50,6 +52,7 @@ const ExtensionsStore = (() => {
     get extensions() { return _extensions; },
     get query()      { return _query; },
     get sort()       { return _sort; },
+    get filterInstalled() { return _filterInstalled; },
     get loading()    { return _loading; },
     get error()      { return _error; },
     get detail()        { return _detail; },
@@ -73,7 +76,8 @@ const ExtensionsStore = (() => {
         const qs   = params.toString();
         const res  = await fetch("/api/store/extensions" + (qs ? "?" + qs : ""));
         const data = await res.json();
-        _extensions = data.extensions || [];
+        _allExtensions = data.extensions || [];
+        _extensions    = _filterInstalled ? _allExtensions.filter(e => e.installed) : _allExtensions;
         _error      = data.warning || null;
         _loading    = false;
         _emit("extensions:changed", { extensions: _extensions, warning: _error });
@@ -100,6 +104,13 @@ const ExtensionsStore = (() => {
       return Extensions.load();
     },
 
+    /** Toggle the "installed only" filter (client-side, no new network request). */
+    setFilterInstalled(onlyInstalled) {
+      _filterInstalled = !!onlyInstalled;
+      _extensions = _filterInstalled ? _allExtensions.filter(e => e.installed) : _allExtensions;
+      _emit("extensions:changed", { extensions: _extensions, warning: _error });
+    },
+
     /** Open the detail view for one extension (fetches contributes + versions). */
     async loadDetail(id) {
       if (!id) return;
@@ -156,6 +167,31 @@ const ExtensionsStore = (() => {
       }
     },
 
+    /** Install a marketplace extension by fetching its download_url then posting to the local server. */
+    async install(id) {
+      if (!id) return;
+      try {
+        const detailRes  = await fetch("/api/store/extension?id=" + encodeURIComponent(id));
+        const detailData = await detailRes.json();
+        if (!detailRes.ok || !detailData.ok) throw new Error(detailData.error || "fetch detail failed");
+        const ext          = detailData.extension;
+        const download_url = ext.download_url;
+        if (!download_url) throw new Error("No download URL available");
+        const res = await fetch("/api/store/extension/install", {
+          method:  "POST",
+          headers: { "Content-Type": "application/json" },
+          body:    JSON.stringify({ download_url, name: ext.name }),
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) throw new Error(data.error || "install failed");
+        await Extensions.loadDetail(id);
+      } catch (e) {
+        console.error("[Extensions] install failed", e);
+        _detailError = e.message;
+        _emit("extensions:detail");
+      }
+    },
+
     /** Remove an installed extension, then return to the list. */
     async uninstall(id) {
       if (!id) return;
@@ -167,8 +203,7 @@ const ExtensionsStore = (() => {
         });
         const data = await res.json();
         if (!res.ok || !data.ok) throw new Error(data.error || "uninstall failed");
-        Extensions.closeDetail();
-        Extensions.load();
+        await Extensions.loadDetail(id);
       } catch (e) {
         console.error("[Extensions] uninstall failed", e);
         _detailError = e.message;

data/lib/clacky/web/features/extensions/view.js

@@ -21,8 +21,8 @@ const ExtensionsView = (() => {
     container.innerHTML = Array.from({ length: 4 }).map(() => `
       <div class="extension-card">
         <div class="extension-card-main">
-          <span class="skel" style="height:2rem;width:2rem;border-radius:8px;"></span>
-          <div class="extension-info">
+          <span class="skel" style="height:2rem;width:2rem;border-radius:8px;flex-shrink:0"></span>
+          <div class="extension-info" style="display:flex;flex-direction:column;gap:0.375rem">
             <span class="skel skel-title"></span>
             <span class="skel skel-subtitle"></span>
           </div>
@@ -161,7 +161,8 @@ const ExtensionsView = (() => {
     return `
       <div class="extension-detail-head">
         <button type="button" class="extension-detail-back" id="extension-detail-back">
-          ← ${escapeHtml(I18n.t("extensions.detail.back"))}
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 2L4 7L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          ${escapeHtml(I18n.t("extensions.detail.back"))}
         </button>
       </div>
       ${inner}`;
@@ -188,6 +189,16 @@ const ExtensionsView = (() => {
         if (ok) Extensions.uninstall(id);
       });
     }
+
+    const installBtn = document.querySelector("[data-ext-install]");
+    if (installBtn) {
+      installBtn.addEventListener("click", () => {
+        const id = installBtn.getAttribute("data-ext-install");
+        installBtn.disabled = true;
+        installBtn.textContent = I18n.t("extensions.action.installing");
+        Extensions.install(id);
+      });
+    }
   }
 
   function _backToList() {
@@ -214,6 +225,8 @@ const ExtensionsView = (() => {
     const homepageHtml = ext.homepage
       ? `<a class="extension-homepage" href="${escapeHtml(ext.homepage)}" target="_blank" rel="noopener noreferrer">${I18n.t("extensions.homepage")}</a>`
       : "";
+    const authorHtml = ext.author
+      ? `<span class="extension-detail-author">${escapeHtml(ext.author)}</span>` : "";
 
     return `
       <div class="extension-detail-hero">
@@ -225,10 +238,8 @@ const ExtensionsView = (() => {
             ${installedHtml}
             ${unitsHtml}
           </div>
-          <div class="extension-desc">${escapeHtml(description)}</div>
-          <div class="extension-meta">
-            ${homepageHtml}
-          </div>
+          ${description ? `<div class="extension-desc extension-desc-detail">${escapeHtml(description)}</div>` : ""}
+          ${(authorHtml || homepageHtml) ? `<div class="extension-meta">${authorHtml}${homepageHtml}</div>` : ""}
           ${_renderActions(ext)}
         </div>
       </div>
@@ -239,8 +250,17 @@ const ExtensionsView = (() => {
   // Manage buttons for a locally installed extension: enable/disable toggle
   // (always available when installed) plus remove (installed layer only).
   function _renderActions(ext) {
-    if (!ext.installed) return "";
-    const slug = ext.name || ext.slug || (ext.id != null ? String(ext.id) : "");
+    const id = ext.id != null ? String(ext.id) : (ext.name || ext.slug || "");
+    if (!ext.installed) {
+      if (ext.origin === "marketplace" && ext.download_url) {
+        return `
+      <div class="extension-detail-actions">
+        <button type="button" class="extension-action extension-action-install" data-ext-install="${escapeHtml(id)}">${escapeHtml(I18n.t("extensions.action.install"))}</button>
+      </div>`;
+      }
+      return "";
+    }
+    const slug = ext.name || ext.slug || id;
     const toggleKey = ext.disabled ? "extensions.action.enable" : "extensions.action.disable";
     const toggleCls = ext.disabled ? "extension-action-enable" : "extension-action-disable";
     const disabledBadge = ext.disabled
@@ -273,10 +293,13 @@ const ExtensionsView = (() => {
       const singular = type.replace(/s$/, "");
       const heading = _sectionHeading(type);
       const rows = items.map((it) => {
-        const title = (currentLang === "zh" && it.title_zh) ? it.title_zh
-          : (it.title || it.name || it.id || singular);
-        const desc = (currentLang === "zh" && it.description_zh) ? it.description_zh
-          : (it.description || "");
+        const isStr = typeof it === "string";
+        const title = isStr ? it
+          : ((currentLang === "zh" && it.title_zh) ? it.title_zh
+            : (it.title || it.name || it.id || singular));
+        const desc = isStr ? ""
+          : ((currentLang === "zh" && it.description_zh) ? it.description_zh
+            : (it.description || ""));
         return `
           <li class="extension-contrib-item">
             <span class="extension-contrib-title">${escapeHtml(String(title))}</span>
@@ -339,6 +362,14 @@ const ExtensionsView = (() => {
       sortSelect.addEventListener("change", () => Extensions.setSort(sortSelect.value));
     }
 
+    document.querySelectorAll(".extensions-filter-tab").forEach(btn => {
+      btn.addEventListener("click", () => {
+        document.querySelectorAll(".extensions-filter-tab").forEach(b => b.classList.remove("extensions-filter-tab-active"));
+        btn.classList.add("extensions-filter-tab-active");
+        Extensions.setFilterInstalled(btn.dataset.filter === "installed");
+      });
+    });
+
     const list = $("extensions-list");
     if (list) {
       list.addEventListener("click", (e) => {

data/lib/clacky/web/features/new-session/store.js

@@ -168,6 +168,18 @@ const NewSessionStore = (() => {
     _emit("newSession:reset", {});
   }
 
+  async function fetchSkillsForAgent(agentId) {
+    try {
+      const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/skills`);
+      if (!res.ok) return [];
+      const data = await res.json();
+      return data.skills || [];
+    } catch (e) {
+      console.error("Failed to load skills:", e);
+      return [];
+    }
+  }
+
   return {
     get state() { return _state; },
     on: _on,
@@ -179,6 +191,7 @@ const NewSessionStore = (() => {
     loadModels,
     loadDefaultDirectory,
     createSession,
+    fetchSkillsForAgent,
     reset,
   };
 })();