openclacky 1.3.6 → 1.3.7

data/lib/clacky/web/sessions.js

@@ -293,6 +293,25 @@ const Sessions = (() => {
 
   let _userScrolledUp = false;  // true if user manually scrolled away from bottom
 
+  let _agentsById = null;
+  let _agentsLoadingPromise = null;
+
+  function _ensureAgentsLoaded() {
+    if (_agentsById) return Promise.resolve(_agentsById);
+    if (_agentsLoadingPromise) return _agentsLoadingPromise;
+    _agentsLoadingPromise = fetch("/api/agents")
+      .then(r => (r.ok ? r.json() : { agents: [] }))
+      .then(data => {
+        const map = {};
+        ((data && data.agents) || []).forEach(a => { map[a.id] = a; });
+        _agentsById = map;
+        return map;
+      })
+      .catch(() => (_agentsById = {}))
+      .finally(() => { _agentsLoadingPromise = null; });
+    return _agentsLoadingPromise;
+  }
+
   function _isAtBottom(container) {
     if (!container) return false;
     const threshold = 150;
@@ -450,76 +469,9 @@ const Sessions = (() => {
   // we call addEventListener directly (no ?. / no `if` guards). If any is
   // missing, it means HTML and JS drifted and we want the loud error.
   function _initNewSessionControls() {
-    // Split button: main (quick create)
     document.getElementById("btn-new-session-inline")
-      .addEventListener("click", () => Sessions.create("general"));
-
-    // Split button: arrow — show dropdown on hover, hide when leaving the whole wrap
-    const arrow = document.getElementById("btn-new-session-arrow");
-    const wrap  = arrow.closest(".btn-split-wrap");
-    const dd    = document.getElementById("new-session-dropdown");
-
-    arrow.addEventListener("mouseenter", () => { dd.hidden = false; });
-    dd.addEventListener("mouseenter",    () => { dd.hidden = false; });
-    wrap.addEventListener("mouseleave",  () => { dd.hidden = true; });
-    dd.addEventListener("mouseleave",    () => { dd.hidden = true; });
+      .addEventListener("click", () => { location.hash = "#new"; });
 
-    // Dropdown item "Advanced Options…"
-    document.addEventListener("click", (e) => {
-      if (e.target && e.target.id === "btn-new-session-modal") {
-        dd.hidden = true;
-        Sessions.openNewSessionModal();
-      } else if (!wrap.contains(e.target)) {
-        dd.hidden = true;
-      }
-    });
-
-    // Welcome screen "+ New Session" button
-    document.getElementById("btn-welcome-new")
-      .addEventListener("click", () => Sessions.create("general"));
-
-    // Welcome screen starter chips: create a session, then prefill the prompt
-    document.querySelectorAll(".chip[data-welcome-prompt]").forEach((chip) => {
-      chip.addEventListener("click", async () => {
-        await Sessions.create("general");
-        const prompt = I18n.t(chip.dataset.welcomePrompt);
-        const input  = document.getElementById("user-input");
-        if (input && prompt) {
-          input.value = prompt;
-          input.focus();
-          input.dispatchEvent(new Event("input", { bubbles: true }));
-        }
-      });
-    });
-
-    // Modal: cancel / create / overlay click
-    document.getElementById("new-session-cancel")
-      .addEventListener("click", () => Sessions.closeNewSessionModal());
-    document.getElementById("new-session-create")
-      .addEventListener("click", () => Sessions.createFromModal());
-    document.getElementById("new-session-modal")
-      .addEventListener("click", (e) => {
-        // Only close when the click lands on the overlay itself, not on
-        // the inner dialog panel.
-        if (e.target.id === "new-session-modal") {
-          Sessions.closeNewSessionModal();
-        }
-      });
-
-    // Working-directory browse button → reuses the session picker in
-    // session-less mode (no session exists yet, so it browses via /api/dirs).
-    const browseBtn = document.getElementById("new-session-browse-btn");
-    if (browseBtn) {
-      browseBtn.addEventListener("click", async () => {
-        const dirInput = document.getElementById("new-session-directory");
-        const start = dirInput ? dirInput.value.trim() : "";
-        const picked = await window.openDirectoryPicker(start, null);
-        if (picked && dirInput) dirInput.value = picked;
-      });
-    }
-
-    // Load-more sessions button is rendered dynamically by renderList(),
-    // so we listen via event delegation.
     document.addEventListener("click", (e) => {
       if (e.target && e.target.id === "btn-load-more-sessions") {
         Sessions.loadMore();
@@ -639,11 +591,11 @@ const Sessions = (() => {
 
   function _addImageFile(file) {
     if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-      alert(`Unsupported image type: ${file.type}\nSupported: PNG, JPEG, GIF, WEBP`);
+      alert(I18n.t("chat.file.unsupportedType", { type: file.type }));
       return;
     }
     if (file.size > MAX_IMAGE_SIZE) {
-      alert(`Image too large: ${file.name} (max 5 MB)`);
+      alert(I18n.t("chat.file.imageTooLarge", { name: file.name, max: "5 MB" }));
       return;
     }
     const seq = ++_imageSeq;
@@ -655,12 +607,12 @@ const Sessions = (() => {
         _pendingImages.push({ dataUrl, name: displayName, mimeType: file.type === "image/png" ? "image/png" : "image/jpeg", seq });
         _renderAttachmentPreviews();
       })
-      .catch(err => alert(`Image processing failed: ${err.message}`));
+      .catch(err => alert(I18n.t("chat.file.processFailed", { msg: err.message })));
   }
 
   function _addGenericFile(file) {
     if (file.size > MAX_FILE_BYTES) {
-      alert(`File too large: ${file.name} (max 32 MB)`);
+      alert(I18n.t("chat.file.tooLarge", { name: file.name, max: "32 MB" }));
       return;
     }
     // Upload file to server via HTTP — only the path is returned, no base64 in memory
@@ -669,7 +621,7 @@ const Sessions = (() => {
     fetch("/api/upload", { method: "POST", body: formData })
       .then(r => r.json())
       .then(data => {
-        if (!data.ok) { alert(`Upload failed: ${data.error}`); return; }
+        if (!data.ok) { alert(I18n.t("chat.file.uploadFailed", { msg: data.error })); return; }
         _pendingFiles.push({
           name:      data.name,
           path:      data.path,
@@ -2166,11 +2118,22 @@ const Sessions = (() => {
       ? `<span class="session-badge session-badge--${s.source}">${I18n.t(badgeKey)}</span>`
       : "";
 
-    // Coding profile badge (agent_profile === "coding"). Neutral styling so
-    // it lives peacefully with the source badge and the status dot.
-    const codingBadgeHtml = s.agent_profile === "coding"
-      ? `<span class="session-badge session-badge--coding">${I18n.t("sessions.badge.coding")}</span>`
-      : "";
+    // Agent profile badge: any non-general profile gets a badge. Coding
+    // (built-in) keeps its i18n label + hollow neutral style; extension /
+    // custom agents fall back to their configured title (or profile id).
+    let agentBadgeHtml = "";
+    const profile = s.agent_profile;
+    if (profile && profile !== "general") {
+      if (profile === "coding") {
+        agentBadgeHtml = `<span class="session-badge session-badge--coding">${I18n.t("sessions.badge.coding")}</span>`;
+      } else {
+        const meta = _agentsById && _agentsById[profile];
+        const isZh = I18n.lang && I18n.lang().startsWith("zh");
+        const label = (meta && ((isZh && meta.title_zh) || meta.title)) || profile;
+        const safeLabel = escapeHtml(label);
+        agentBadgeHtml = `<span class="session-badge session-badge--agent" title="${safeLabel}">${safeLabel}</span>`;
+      }
+    }
 
     // Pin icon (always visible for pinned sessions)
     const pinIcon = s.pinned ? `<span class="session-pin-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(45deg);display:block"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/></svg></span>` : "";
@@ -2187,7 +2150,7 @@ const Sessions = (() => {
 
     el.innerHTML = `
       <div class="session-body">
-        <div class="session-name">${dotHtml}<span class="session-name__text">${nameHtml}</span>${badgeHtml}${codingBadgeHtml}${pinIcon}</div>
+        <div class="session-name">${dotHtml}<span class="session-name__text">${nameHtml}</span>${badgeHtml}${agentBadgeHtml}${pinIcon}</div>
         <div class="session-meta">${metaText}</div>
         ${snippetHtml}
       </div>
@@ -2325,6 +2288,7 @@ const Sessions = (() => {
       _initComposer();
       _initSearch();
       _initMessageHistory();
+      _ensureAgentsLoaded().then(() => Sessions.renderList());
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
 
@@ -2899,7 +2863,7 @@ const Sessions = (() => {
         let cronEntryRendered = false;
 
         nonCron.forEach(s => {
-          if (!cronEntryRendered && _latestCronUpdatedAt) {
+          if (!cronEntryRendered && !s.pinned && _latestCronUpdatedAt) {
             const t = s.updated_at || s.created_at;
             if (!t || t < _latestCronUpdatedAt) {
               _renderCronGroupItem(list, _cronCount, cronHasRunning);
@@ -2937,14 +2901,22 @@ const Sessions = (() => {
       // has scrolled away to browse other sessions.
       if (scrollToActive) {
         const activeEl = list.querySelector(".session-item.active");
-        if (activeEl) {
-          // If the active session is the very first item, scroll to top of the sidebar
-          // container so sticky headers / expanded panels don't obscure it.
-          if (activeEl === list.firstElementChild) {
-            const sidebarList = document.getElementById("sidebar-list");
-            if (sidebarList) sidebarList.scrollTop = 0;
-          } else {
-            activeEl.scrollIntoView({ block: "nearest" });
+        const sidebarList = document.getElementById("sidebar-list");
+        if (activeEl && sidebarList) {
+          // Only scroll when the active row is not already fully visible.
+          // The "Sessions" divider is position:sticky at the top of
+          // #sidebar-list, so the usable viewport starts *below* it — treat
+          // that as the top edge, otherwise a row tucked under the header
+          // reads as "visible" and never gets revealed.
+          const header = sidebarList.querySelector(".sidebar-divider");
+          const headerH = (header && header.offsetParent) ? header.offsetHeight : 0;
+          const listRect = sidebarList.getBoundingClientRect();
+          const rowRect = activeEl.getBoundingClientRect();
+          const topEdge = listRect.top + headerH;
+          if (rowRect.top < topEdge) {
+            sidebarList.scrollTop += rowRect.top - topEdge;
+          } else if (rowRect.bottom > listRect.bottom) {
+            sidebarList.scrollTop += rowRect.bottom - listRect.bottom;
           }
         }
       }
@@ -3189,7 +3161,7 @@ const Sessions = (() => {
     /** Update the session info bar below the chat header with current session metadata. */
     updateInfoBar(s) {
       this._lastSession = s;
-      if (window.Workspace) Workspace.onSession(s);
+      if (Clacky.Workspace) Clacky.Workspace.onSession(s);
       if (!s) {
         // Hide all spans when no session
         ["sib-id", "sib-status", "sib-dir", "sib-mode", "sib-model", "sib-reasoning", "sib-tasks", "sib-cost"].forEach(id => {
@@ -4028,187 +4000,8 @@ const Sessions = (() => {
       _pendingMessage = null;
       return msg;
     },
-
-    // ── New Session Modal ──────────────────────────────────────────────────
-
-    /** Open the New Session modal with configuration options. */
-    openNewSessionModal() {
-      const modal = $("new-session-modal");
-      if (!modal) return;
-
-      // Populate model dropdown from configured models
-      _populateModelDropdown();
-
-      // Set default working directory to an absolute path (home/clacky_workspace).
-      const dirInput = $("new-session-directory");
-      if (dirInput && !dirInput.value) {
-        fetch("/api/dirs")
-          .then(r => r.ok ? r.json() : null)
-          .then(data => {
-            const home = data && data.home;
-            if (home && !dirInput.value) {
-              dirInput.value = home.replace(/\/+$/, "") + "/clacky_workspace";
-            }
-          })
-          .catch(() => {});
-      }
-
-      // Setup agent type change listener to show/hide init project checkbox
-      const agentSelect = $("new-session-agent");
-      const initProjectField = $("new-session-init-project-field");
-      
-      if (agentSelect && initProjectField) {
-        // Set initial state based on current selection
-        initProjectField.style.display = agentSelect.value === "coding" ? "block" : "none";
-        
-        // Listen for changes
-        agentSelect.addEventListener("change", function() {
-          initProjectField.style.display = this.value === "coding" ? "block" : "none";
-        });
-      }
-
-      // Show modal
-      modal.style.display = "flex";
-    },
-
-    /** Close the New Session modal. */
-    closeNewSessionModal() {
-      const modal = $("new-session-modal");
-      if (modal) modal.style.display = "none";
-    },
-
-    /** Create session from modal form data. */
-    async createFromModal() {
-      const agentSelect = $("new-session-agent");
-      const nameInput = $("new-session-name");
-      const modelSelect = $("new-session-model");
-      const dirInput = $("new-session-directory");
-      const initCheckbox = $("new-session-init-project");
-      const createBtn = $("new-session-create");
-
-      const agentProfile = agentSelect ? agentSelect.value : "general";
-      const customName = nameInput ? nameInput.value.trim() : "";
-      // The dropdown's value is the model's stable runtime id (see
-      // _populateModelDropdown). Using the id — not the model *name* — lets
-      // the backend switch to the right full model entry (api_key, base_url,
-      // anthropic_format) instead of mutating the current default entry's
-      // name in place, which caused "unknown model <name>" errors when the
-      // chosen model belonged to a different provider than the default.
-      const selectedModelId = modelSelect ? modelSelect.value : "";
-      const workingDir = dirInput ? dirInput.value.trim() : "";
-      const initProject = initCheckbox ? initCheckbox.checked : false;
-
-      // Auto-generate name if not provided
-      let name = customName;
-      if (!name) {
-        const maxN = _sessions.reduce((max, s) => {
-          const m = s.name.match(/^Session (\d+)$/);
-          return m ? Math.max(max, parseInt(m[1], 10)) : max;
-        }, 0);
-        name = "Session " + (maxN + 1);
-      }
-
-      if (createBtn) createBtn.disabled = true;
-
-      try {
-        const payload = {
-          name,
-          agent_profile: agentProfile,
-          source: "manual"
-        };
-
-        // Add optional fields
-        if (workingDir) payload.working_dir = workingDir;
-        if (selectedModelId) payload.model_id = selectedModelId;
-
-        const res = await fetch("/api/sessions", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload)
-        });
-        const data = await res.json();
-
-        if (!res.ok) {
-          const msg = data.error || "unknown error";
-          const friendly = res.status === 409
-            ? I18n.t("sessions.dirNotEmpty")
-            : I18n.t("sessions.createError") + msg;
-          alert(friendly);
-          if (createBtn) createBtn.disabled = false;
-          return;
-        }
-
-        const session = data.session;
-        if (!session) return;
-
-        // Close modal and reset form
-        Sessions.closeNewSessionModal();
-        if (nameInput) nameInput.value = "";
-        if (dirInput) dirInput.value = "";
-        if (initCheckbox) initCheckbox.checked = false;
-
-        // Add to list and select
-        Sessions.add(session);
-        Sessions.renderList();
-        Sessions.select(session.id);
-
-        // If init project was checked, send /new command
-        if (initProject) {
-          Sessions.setPendingMessage(session.id, "/new");
-        }
-      } catch (e) {
-        alert(I18n.t("sessions.createError") + e.message);
-      } finally {
-        if (createBtn) createBtn.disabled = false;
-      }
-    },
   };
 
-  // ── Helper: Populate model dropdown ────────────────────────────────────────
-
-  async function _populateModelDropdown() {
-    const modelSelect = $("new-session-model");
-    if (!modelSelect) return;
-
-    try {
-      const res = await fetch("/api/config");
-      const data = await res.json();
-      const models = data.models || [];
-
-      modelSelect.innerHTML = "";
-
-      if (models.length === 0) {
-        const opt = document.createElement("option");
-        opt.value = "";
-        opt.textContent = "No models configured";
-        modelSelect.appendChild(opt);
-        return;
-      }
-
-      // Add each configured model (CLI-style format).
-      // The option's value is the model's stable runtime id — not the bare
-      // model name — so the backend can switch to the exact model entry
-      // (with matching api_key / base_url / anthropic_format) when the user
-      // chooses a non-default model. See createFromModal + build_session.
-      models.forEach(m => {
-        const opt = document.createElement("option");
-        opt.value = m.id || "";
-
-        // Format: [default] abs-claude-sonnet-4-5 (clacky...8825)
-        const typeBadge = m.type === "default" ? "[default] " : "";
-        const label = `${typeBadge}${m.model} (${m.api_key_masked})`;
-        opt.textContent = label;
-
-        // Pre-select default model
-        if (m.type === "default") opt.selected = true;
-        modelSelect.appendChild(opt);
-      });
-    } catch (e) {
-      console.error("Failed to load models:", e);
-      modelSelect.innerHTML = '<option value="">Error loading models</option>';
-    }
-  }
-
   return Sessions;
 })();
 
@@ -5681,7 +5474,7 @@ const Sessions = (() => {
 // ── Session Info Bar Reasoning Effort Switcher ────────────────────────────
 (function() {
   let _isOpen = false;
-  const LEVELS = ["off", "low", "medium", "high"];
+  const LEVELS = ["off", "low", "medium", "high", "xhigh"];
 
   document.addEventListener("click", async (e) => {
     const el = e.target.closest("#sib-reasoning");
@@ -5790,3 +5583,5 @@ document.addEventListener("currencychange", () => {
     scrollTimer = setTimeout(() => sidebarList.classList.remove("is-scrolling"), 1000);
   }, { passive: true });
 })();
+
+Clacky.Sessions = Sessions;

data/lib/clacky/web/settings.js

@@ -20,7 +20,7 @@ const Settings = (() => {
     _loadBrand();
     _loadBrowserStatus();
     _initNetworkSettings();
-    if (window.Backup) Backup.load();
+    if (Clacky.Backup) Clacky.Backup.load();
     _applyAboutTabVisibility();
   }
 

data/lib/clacky/web/skills.js

@@ -452,3 +452,5 @@ const SkillAC = (() => {
     handleKey: _handleKey,
   };
 })();
+
+Clacky.SkillAC = SkillAC;

data/lib/clacky/web/theme.js

@@ -30,11 +30,13 @@ const Theme = (() => {
       // Icon shows what you'd switch TO, not what you are on.
       if (theme === "light") {
         // In light mode → show moon (click to go dark)
+        headerToggle.title = I18n.t("header.theme.toDark");
         headerToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
           <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
         </svg>`;
       } else {
         // In dark mode → show sun (click to go light)
+        headerToggle.title = I18n.t("header.theme.toLight");
         headerToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
           <circle cx="12" cy="12" r="4"/>
           <path d="M12 2v2"/>

data/lib/clacky/web/ws-dispatcher.js

@@ -281,6 +281,7 @@ WS.onEvent(ev => {
     }
 
     case "session_deleted":
+      if (window.Clacky && Clacky.ext) Clacky.ext.notifySessionRemoved(ev.session_id);
       Sessions.remove(ev.session_id);
       if (ev.session_id === Sessions.activeId) Router.navigate("welcome");
       Sessions.renderList();

data/lib/clacky/web/ws.js

@@ -126,3 +126,5 @@ const WS = (() => {
     get ready() { return _ready; },
   };
 })();
+
+Clacky.WS = WS;

data/lib/clacky.rb

@@ -95,6 +95,7 @@ require_relative "clacky/ui2/progress_indicator"
 require_relative "clacky/utils/logger"
 require_relative "clacky/proxy_config"
 require_relative "clacky/platform_http_client"
+require_relative "clacky/identity"
 require_relative "clacky/utils/encoding"
 require_relative "clacky/utils/environment_detector"
 require_relative "clacky/utils/browser_detector"
@@ -140,18 +141,28 @@ require_relative "clacky/server/browser_manager"
 require_relative "clacky/server/backup_manager"
 require_relative "clacky/cli"
 
-# Runtime patch layer: load user/AI patches from ~/.clacky/patches/ after all
-# gem code is defined, so fingerprints reflect the actual installed source.
-require_relative "clacky/patch_loader"
+# Extension architecture: define the base class + container loader + scaffolding
+# + dispatcher up front so the patch / hook loaders below can read its result.
+require_relative "clacky/extension/api_extension"
+require_relative "clacky/extension/api_loader"
+require_relative "clacky/extension/loader"
+require_relative "clacky/extension/scaffold/template_renderer"
+require_relative "clacky/extension/scaffold"
+require_relative "clacky/extension/packager"
+require_relative "clacky/extension/dispatcher"
+require_relative "clacky/extension/hook_loader"
+require_relative "clacky/extension/verifier"
+Clacky::ExtensionLoader.load_all
+
+# Runtime patch layer: load user/AI patches from ~/.clacky/patches/ AND patches
+# contributed by ext.yml containers (contributes.patches). Runs after all gem
+# code is defined, so fingerprints reflect the actual installed source.
+require_relative "clacky/extension/patch_loader"
 Clacky::PatchLoader.load_all
 
-# HTTP API extension layer: define the base class + loader + dispatcher.
-# Loading of user extensions is deferred to HttpServer#start so the host
-# process is fully initialized before extension handlers can resolve helpers
-# like session_manager or agent_config.
-require_relative "clacky/api_extension"
-require_relative "clacky/api_extension_loader"
-require_relative "clacky/server/api_extension_dispatcher"
+# Process-wide registry of hook callbacks contributed by ext.yml containers
+# (contributes.hooks). Each agent copies them onto its own HookManager at init.
+Clacky::ExtensionHookLoader.load_all
 
 module Clacky
   class AgentInterrupted < Exception; end  # Inherit from Exception to bypass rescue StandardError