openclacky 1.2.8 → 1.2.10

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

@@ -0,0 +1,58 @@
+// Shared helpers for the model config UI flows.
+// Used by both the onboarding wizard and the settings model modal.
+window.ModelTester = (function () {
+  // Test a model connection.
+  // Returns one of:
+  //   { ok: true,  base_url, message }                 — connected, no rewrite
+  //   { ok: true,  base_url, message, rewrote: true }  — connected, base_url auto-corrected (/v1 appended)
+  //   { ok: false, message }                           — failed (server-reported or network)
+  async function testConnection({ model, base_url, api_key, anthropic_format, index } = {}) {
+    const body = { model, base_url, api_key };
+    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 };
+    }
+
+    if (!data.ok) return { ok: false, message: data.message || "" };
+
+    if (data.effective_base_url && data.effective_base_url !== base_url) {
+      return { ok: true, base_url: data.effective_base_url, message: data.message || "", rewrote: true };
+    }
+    return { ok: true, base_url, message: data.message || "" };
+  }
+
+  // Persist a model config (create or update).
+  // existingId === null/undefined → POST /api/config/models (create).
+  // existingId === string         → PATCH /api/config/models/:id (update).
+  // Returns { ok: bool, error? }.
+  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();
+      return data.ok ? { ok: true } : { ok: false, error: data.error || "" };
+    } catch (e) {
+      return { ok: false, error: e.message };
+    }
+  }
+
+  return { testConnection, saveModel };
+})();

data/lib/clacky/web/onboard.js

@@ -417,43 +417,30 @@ const Onboard = (() => {
     _setResult(null, "");
 
     // Step 1: test connection
-    try {
-      const res  = await fetch("/api/config/test", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ model, base_url: baseUrl, api_key: apiKey, index: 0 })
-      });
-      const data = await res.json();
-      if (!data.ok) {
-        _setResult(false, data.message || (zh ? "连接失败。" : "Connection failed."));
-        btn.disabled    = false;
-        btn.textContent = I18n.t("onboard.key.btn.test");
-        return;
-      }
-    } catch (e) {
-      _setResult(false, e.message);
+    const testResult = await ModelTester.testConnection({
+      model, base_url: baseUrl, api_key: apiKey, index: 0
+    });
+
+    if (!testResult.ok) {
+      _setResult(false, testResult.message || (zh ? "连接失败。" : "Connection failed."));
       btn.disabled    = false;
       btn.textContent = I18n.t("onboard.key.btn.test");
       return;
     }
 
+    let effectiveBaseUrl = testResult.base_url;
+    if (testResult.rewrote) {
+      const baseInput = document.getElementById("setup-base-url");
+      if (baseInput) baseInput.value = effectiveBaseUrl;
+    }
+
     // Step 2: save config
     btn.textContent = I18n.t("onboard.key.saving");
-    try {
-      const res  = await fetch("/api/config/models", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ type: "default", model, base_url: baseUrl, api_key: apiKey, anthropic_format: false })
-      });
-      const data = await res.json();
-      if (!data.ok) {
-        _setResult(false, data.error || (zh ? "保存失败。" : "Save failed."));
-        btn.disabled    = false;
-        btn.textContent = I18n.t("onboard.key.btn.test");
-        return;
-      }
-    } catch (e) {
-      _setResult(false, e.message);
+    const saveResult = await ModelTester.saveModel({
+      type: "default", model, base_url: effectiveBaseUrl, api_key: apiKey
+    });
+    if (!saveResult.ok) {
+      _setResult(false, saveResult.error || (zh ? "保存失败。" : "Save failed."));
       btn.disabled    = false;
       btn.textContent = I18n.t("onboard.key.btn.test");
       return;

data/lib/clacky/web/sessions.js

@@ -3804,6 +3804,448 @@ const Sessions = (() => {
 
 // ── Session Info Bar Working Directory Switcher ───────────────────────────
 (function() {
+  // Directory picker with predefined list
+  // ── Tree-based directory picker ─────────────────────────────────────────
+  const ICON_FOLDER_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
+  const ICON_CARET_SVG  = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+  function showDirectoryPicker(currentDir, sessionId) {
+    return new Promise((resolve) => {
+      const t = (key, fallback) => {
+        const s = I18n.t(key);
+        return (s && s !== key) ? s : fallback;
+      };
+
+      let selectedPath = currentDir;
+      let rootDir = ""; // absolute path of the session's working directory
+
+      // Fetch directory entries from API, returns dirs with absolute paths
+      async function fetchDirs(relPath, absolute = false) {
+        let url = `/api/sessions/${encodeURIComponent(sessionId)}/files?path=${encodeURIComponent(relPath || "")}`;
+        if (absolute) url += "&absolute=true";
+        const resp = await fetch(url);
+        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+        const data = await resp.json();
+        // Only update rootDir in relative mode; absolute mode would overwrite it with "/"
+        if (!absolute) rootDir = data.root || rootDir;
+        const dirs = (data.entries || []).filter(e => e.type === "dir");
+        // Convert relative paths to absolute
+        dirs.forEach(d => {
+          // Strip leading slashes from path to avoid double slashes
+          const cleanPath = d.path.replace(/^\/+/, "");
+          d.absPath = absolute ? ("/" + cleanPath) : (rootDir.replace(/\/+$/, "") + "/" + cleanPath);
+          d.absolute = absolute; // Store absolute flag for child expansion
+        });        return dirs;
+      }
+
+      // Build a tree node for a directory entry
+      function buildDirNode(entry, depth) {
+        const node = document.createElement("div");
+        node.className = "dp-node";
+        node.dataset.depth = depth; // Store depth for child expansion
+
+        const row = document.createElement("div");
+        row.className = "dp-row";
+        row.style.paddingLeft = `${depth * 16 + 8}px`;
+        const caret = document.createElement("span");
+        caret.className = "dp-caret";
+        caret.innerHTML = ICON_CARET_SVG;
+
+        const icon = document.createElement("span");
+        icon.className = "dp-icon";
+        icon.innerHTML = ICON_FOLDER_SVG;
+
+        const name = document.createElement("span");
+        name.className = "dp-name";
+        name.textContent = entry.name;
+
+        row.appendChild(caret);
+        row.appendChild(icon);
+        row.appendChild(name);
+        node.appendChild(row);
+
+        const children = document.createElement("div");
+        children.className = "dp-children";
+        children.style.display = "none";
+        node.appendChild(children);
+
+        // Single-click: select directory (show path) + expand/collapse
+        let clickTimer = null;
+        row.addEventListener("click", (e) => {
+          e.stopPropagation();
+          if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
+          clickTimer = setTimeout(() => {
+            clickTimer = null;
+            // Select this directory
+            modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+            row.classList.add("selected");
+            selectedPath = entry.absPath;
+            pathInput.value = entry.absPath;
+            // Also expand/collapse
+            toggleExpand(entry, caret, children);
+          }, 250);
+        });
+
+        // Double-click: enter directory (navigate into it)
+        row.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
+          // Enter this directory - reload tree with this as root
+          loadTreeForPath(entry.absPath, entry.absolute);
+        });
+        return node;
+      }
+
+      async function toggleExpand(entry, caret, children) {
+        const isOpen = caret.classList.contains("open");
+        if (isOpen) {
+          caret.classList.remove("open");
+          children.style.display = "none";
+          return;
+        }
+        caret.classList.add("open");
+        children.style.display = "flex";
+        if (children.dataset.loaded === "1") return;
+        children.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+        try {
+          const dirs = await fetchDirs(entry.path, entry.absolute);
+          children.innerHTML = "";
+          if (dirs.length === 0) {
+            children.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
+          } else {
+            const parentNode = children.parentElement;
+            const parentDepth = parseInt(parentNode?.dataset?.depth) || 0;
+            const childDepth = parentDepth + 1;
+            const frag = document.createDocumentFragment();
+            dirs.forEach(d => frag.appendChild(buildDirNode(d, childDepth)));
+            children.appendChild(frag);
+          }          children.dataset.loaded = "1";
+        } catch (err) {
+          console.error("dir picker load failed:", err);
+          children.innerHTML = `<div class="dp-error">${t("sib.dir.loadError", "加载失败")}</div>`;
+        }
+      }
+
+      // Create modal overlay
+      const overlay = document.createElement("div");
+      overlay.className = "modal-overlay";
+
+      // Create modal content
+      const modal = document.createElement("div");
+      modal.className = "modal-content";
+      modal.style.maxWidth = "520px";
+      modal.style.maxHeight = "80vh";
+      modal.style.display = "flex";
+      modal.style.flexDirection = "column";
+
+      // Title
+      const title = document.createElement("div");
+      title.className = "modal-title";
+      title.textContent = t("sib.dir.changePrompt", "切换工作目录");
+      modal.appendChild(title);
+
+      // Modal body
+      const body = document.createElement("div");
+      body.className = "modal-body";
+      body.style.flex = "1";
+      body.style.overflow = "hidden";
+      body.style.display = "flex";
+      body.style.flexDirection = "column";
+      body.style.gap = "8px";
+
+      // Quick presets (will be populated with absolute paths after first API call)
+      const presets = document.createElement("div");
+      presets.className = "dp-presets";
+      body.appendChild(presets);
+
+      function setupPresets() {
+        presets.innerHTML = "";
+        const presetDirs = [
+          { value: rootDir, text: t("sib.dir.current", "当前工作目录"), absolute: false },
+          { value: "/", text: t("sib.dir.root", "根目录"), absolute: true }
+        ];        presetDirs.forEach(p => {
+          const btn = document.createElement("button");
+          btn.className = "btn btn-secondary btn-sm";
+          btn.textContent = p.text;
+          btn.addEventListener("click", () => {
+            selectedPath = p.value;
+            pathInput.value = p.value;
+            modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+            loadTreeForPath(p.value, p.absolute);
+          });
+          presets.appendChild(btn);
+        });
+      }
+
+      // Path input
+      const pathContainer = document.createElement("div");
+      pathContainer.className = "dp-path-container";
+      const pathInput = document.createElement("input");
+      pathInput.type = "text";
+      pathInput.className = "dir-picker-input";
+      pathInput.value = currentDir;
+      pathInput.placeholder = t("sib.dir.inputPlaceholder", "输入或选择目录路径");
+      pathContainer.appendChild(pathInput);
+
+      // Autocomplete dropdown
+      const autocomplete = document.createElement("div");
+      autocomplete.className = "dp-autocomplete";
+      autocomplete.style.display = "none";
+      pathContainer.appendChild(autocomplete);
+
+      body.appendChild(pathContainer);
+      // Tree container
+      const treeContainer = document.createElement("div");
+      treeContainer.className = "dp-tree";
+      treeContainer.style.flex = "1";
+      treeContainer.style.overflow = "auto";
+      treeContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+      body.appendChild(treeContainer);
+
+      modal.appendChild(body);
+
+      // Buttons
+      const buttonContainer = document.createElement("div");
+      buttonContainer.className = "modal-buttons";
+
+      const cancelButton = document.createElement("button");
+      cancelButton.className = "btn btn-secondary";
+      cancelButton.textContent = t("sib.dir.cancel", "取消");
+      cancelButton.onclick = () => {
+        overlay.remove();
+        resolve(null);
+      };
+
+      const confirmButton = document.createElement("button");
+      confirmButton.className = "btn btn-primary";
+      confirmButton.textContent = t("sib.dir.confirm", "确认");
+      confirmButton.onclick = () => {
+        const dir = pathInput.value.trim();
+        overlay.remove();
+        resolve(dir || null);
+      };
+
+      buttonContainer.appendChild(cancelButton);
+      buttonContainer.appendChild(confirmButton);
+      modal.appendChild(buttonContainer);
+
+      overlay.appendChild(modal);
+      document.body.appendChild(overlay);
+
+      // Sync pathInput changes to selectedPath
+      pathInput.addEventListener("input", () => {
+        selectedPath = pathInput.value;
+        modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+      });
+
+      // Load tree for a given path
+      async function loadTreeForPath(dirPath, absolute = false) {
+        treeContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+        // Auto-detect absolute mode: path is absolute and outside working directory
+        const useAbsolute = absolute || (dirPath.startsWith("/") && (!rootDir || !dirPath.startsWith(rootDir)));
+        // Convert absolute path to relative path for API
+        let relPath = dirPath;
+        if (!useAbsolute && rootDir && dirPath.startsWith(rootDir)) {
+          relPath = dirPath.substring(rootDir.length).replace(/^\/+/, "");
+        }
+        try {
+          const dirs = await fetchDirs(relPath, useAbsolute);
+          // Update presets and pathInput with absolute paths after first API call
+          if (rootDir && presets.children.length === 0) {
+            setupPresets();
+            // Update pathInput to show absolute path
+            if (rootDir !== currentDir && !currentDir.startsWith(rootDir)) {
+              pathInput.value = rootDir;
+              selectedPath = rootDir;
+            }
+          }
+          treeContainer.innerHTML = "";
+          if (dirs.length === 0) {
+            treeContainer.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
+          } else {
+            const frag = document.createDocumentFragment();
+            dirs.forEach(d => frag.appendChild(buildDirNode(d, 0)));
+            treeContainer.appendChild(frag);
+          }
+        } catch (err) {
+          console.error("dir picker load failed:", err);
+          treeContainer.innerHTML = `<div class="dp-error">${t("sib.dir.loadError", "加载失败")}</div>`;
+        }
+      }
+      loadTreeForPath("");
+
+      // ── Autocomplete logic ──────────────────────────────────────────────
+      let autocompleteTimer = null;
+      let activeIndex = -1;
+
+      function hideAutocomplete() {
+        autocomplete.style.display = "none";
+        autocomplete.innerHTML = "";
+        activeIndex = -1;
+      }
+
+      function showAutocomplete(items) {
+        autocomplete.innerHTML = "";
+        if (!items.length) { hideAutocomplete(); return; }
+
+        items.forEach((item, i) => {
+          const row = document.createElement("div");
+          row.className = "dp-ac-item";
+          if (i === activeIndex) row.classList.add("active");
+
+          const icon = document.createElement("span");
+          icon.className = "dp-ac-icon";
+          icon.innerHTML = ICON_FOLDER_SVG;
+
+          const name = document.createElement("span");
+          name.className = "dp-ac-name";
+          name.textContent = item.name;
+
+          row.appendChild(icon);
+          row.appendChild(name);
+
+          row.addEventListener("mousedown", (e) => {
+            e.preventDefault(); // prevent blur
+            // Construct full path: keep parent path from input, append selected item name
+            const inputVal = pathInput.value;
+            const lastSlash = inputVal.lastIndexOf("/");
+            const fullPath = lastSlash >= 0
+              ? inputVal.substring(0, lastSlash + 1) + item.name
+              : item.name;
+            pathInput.value = fullPath;
+            selectedPath = fullPath;
+            hideAutocomplete();
+            loadTreeForPath(fullPath);
+          });
+          row.addEventListener("mouseenter", () => {
+            activeIndex = i;
+            autocomplete.querySelectorAll(".dp-ac-item").forEach((el, j) => {
+              el.classList.toggle("active", j === i);
+            });
+          });
+
+          autocomplete.appendChild(row);
+        });
+        autocomplete.style.display = "";
+      }
+
+      async function fetchSuggestions(inputVal) {
+        if (!inputVal) { hideAutocomplete(); return; }
+
+        // Determine parent dir and prefix
+        const lastSlash = inputVal.lastIndexOf("/");
+        let parentPath, prefix;
+        if (lastSlash > 0) {
+          parentPath = inputVal.substring(0, lastSlash);
+          prefix = inputVal.substring(lastSlash + 1).toLowerCase();
+        } else if (lastSlash === 0) {
+          parentPath = "/";
+          prefix = inputVal.substring(1).toLowerCase();
+        } else {
+          parentPath = "";
+          prefix = inputVal.toLowerCase();
+        }
+
+        // Determine if we need absolute mode (path outside working directory)
+        const isAbsolute = parentPath.startsWith("/") && (!rootDir || !parentPath.startsWith(rootDir));
+        let relPath = parentPath;
+        if (!isAbsolute && rootDir && parentPath.startsWith(rootDir)) {
+          relPath = parentPath.substring(rootDir.length).replace(/^\/+/, "");
+        }
+
+        try {
+          const dirs = await fetchDirs(relPath, isAbsolute);
+          const filtered = prefix
+            ? dirs.filter(d => d.name.toLowerCase().startsWith(prefix))
+            : dirs;
+          showAutocomplete(filtered.slice(0, 15)); // limit to 15 items
+        } catch (_) {
+          hideAutocomplete();
+        }
+      }
+
+      pathInput.addEventListener("input", () => {
+        selectedPath = pathInput.value;
+        modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+        clearTimeout(autocompleteTimer);
+        autocompleteTimer = setTimeout(() => fetchSuggestions(pathInput.value.trim()), 200);
+      });
+
+      pathInput.addEventListener("blur", () => {
+        // Delay to allow mousedown on suggestion
+        setTimeout(hideAutocomplete, 150);
+      });
+
+      pathInput.addEventListener("focus", () => {
+        if (pathInput.value.trim()) fetchSuggestions(pathInput.value.trim());
+      });
+
+      // Keyboard navigation in autocomplete
+      pathInput.addEventListener("keydown", (e) => {
+        const items = autocomplete.querySelectorAll(".dp-ac-item");
+        if (!items.length || autocomplete.style.display === "none") {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            // Navigate to typed path without closing modal
+            const dir = pathInput.value.trim();
+            if (dir) {
+              selectedPath = dir;
+              hideAutocomplete();
+              loadTreeForPath(dir);
+            }
+          }
+          return;
+        }
+
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          activeIndex = Math.min(activeIndex + 1, items.length - 1);
+          items.forEach((el, i) => el.classList.toggle("active", i === activeIndex));
+          items[activeIndex]?.scrollIntoView({ block: "nearest" });
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          activeIndex = Math.max(activeIndex - 1, 0);
+          items.forEach((el, i) => el.classList.toggle("active", i === activeIndex));
+          items[activeIndex]?.scrollIntoView({ block: "nearest" });
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          if (activeIndex >= 0 && items[activeIndex]) {
+            // Select the highlighted suggestion
+            const evt = new MouseEvent("mousedown", { bubbles: true });
+            items[activeIndex].dispatchEvent(evt);
+          } else {
+            // Navigate to typed path without closing modal
+            const dir = pathInput.value.trim();
+            if (dir) {
+              selectedPath = dir;
+              hideAutocomplete();
+              loadTreeForPath(dir);
+            }
+          }
+        } else if (e.key === "Escape") {
+          hideAutocomplete();
+        }
+      });
+
+      overlay.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          if (autocomplete.style.display !== "none") {
+            hideAutocomplete();
+          } else {
+            cancelButton.click();
+          }
+        }
+      });
+
+      overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) cancelButton.click();
+      });
+
+      // Focus path input
+      pathInput.focus();
+      pathInput.select();
+    });
+  }
+
   // Handle click on working directory
   document.addEventListener("click", async (e) => {
     const dirEl = e.target.closest("#sib-dir");
@@ -3812,12 +4254,11 @@ const Sessions = (() => {
       const sessionId = dirEl.dataset.sessionId;
       const currentDir = dirEl.dataset.workingDir || dirEl.textContent;
 
-      const newDir = await Modal.prompt(I18n.t("sib.dir.changePrompt"), currentDir);
+      const newDir = await showDirectoryPicker(currentDir, sessionId);
       if (newDir && newDir !== currentDir) {
         _changeWorkingDirectory(sessionId, newDir);
       }
     }
-
     // Handle click on session ID — toggles a small actions dropdown with
     // items like "Download session files (for debugging)". Designed to be
     // extensible (more session-level actions can be added here later).