openclacky 0.8.2 → 0.8.4

data/lib/clacky/web/settings.js

@@ -71,7 +71,7 @@ const Settings = (() => {
         </div>
         <div class="model-card-actions">
           ${_models.length > 1
-            ? `<button class="btn-model-remove" data-index="${index}" title="Remove this model">✕</button>`
+            ? `<button class="btn-model-remove" data-index="${index}" title="Remove this model">×</button>`
             : ""}
         </div>
       </div>
@@ -79,11 +79,19 @@ const Settings = (() => {
       <div class="model-fields">
         <label class="model-field">
           <span class="field-label">Quick Setup</span>
-          <select class="field-select provider-select" data-index="${index}">
-            <option value="">— Choose provider —</option>
-            ${providerOptions}
-            <option value="custom">Custom</option>
-          </select>
+          <div class="custom-select-wrapper" data-index="${index}">
+            <div class="custom-select-trigger">
+              <span class="custom-select-value placeholder">— Choose provider —</span>
+              <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </div>
+            <div class="custom-select-dropdown">
+              <div class="custom-select-option" data-value="">— Choose provider —</div>
+              ${_providers.map(p => `<div class="custom-select-option" data-value="${p.id}">${_esc(p.name)}</div>`).join("")}
+              <div class="custom-select-option" data-value="custom">Custom</div>
+            </div>
+          </div>
         </label>
         <label class="model-field">
           <span class="field-label">Model</span>
@@ -100,14 +108,22 @@ const Settings = (() => {
           <div class="field-input-row">
             <input type="password" class="field-input api-key-input" data-key="api_key" data-index="${index}"
               placeholder="sk-…" value="${_esc(model.api_key_masked)}">
-            <button class="btn-toggle-key" data-index="${index}" title="Show/hide key">👁</button>
+            <button class="btn-toggle-key" data-index="${index}" title="Show/hide key">
+              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+              </svg>
+            </button>
           </div>
         </label>
       </div>
 
       <div class="model-card-footer">
         <span class="model-test-result" data-index="${index}"></span>
-        <button class="btn-save-model btn-primary" data-index="${index}">Save</button>
+        <div class="model-card-actions-row">
+          ${!isDefault ? `<button class="btn-set-default" data-index="${index}" title="Set as default model">Set as Default</button>` : ""}
+          <button class="btn-save-model btn-primary" data-index="${index}">Save</button>
+        </div>
       </div>
     `;
 
@@ -116,23 +132,92 @@ const Settings = (() => {
   }
 
   function _bindCardEvents(card, index) {
-    // Provider preset dropdown — auto-fill model & base_url
-    card.querySelector(".provider-select").addEventListener("change", (e) => {
-      const pid = e.target.value;
-      if (!pid || pid === "custom") return;
-      const preset = _providers.find(p => p.id === pid);
-      if (!preset) return;
-
-      const modelInput   = card.querySelector(`[data-key="model"]`);
-      const baseUrlInput = card.querySelector(`[data-key="base_url"]`);
-      if (modelInput)   modelInput.value   = preset.default_model || "";
-      if (baseUrlInput) baseUrlInput.value = preset.base_url       || "";
+    // Custom dropdown interactions
+    const customSelectWrapper = card.querySelector(".custom-select-wrapper");
+    const trigger = customSelectWrapper.querySelector(".custom-select-trigger");
+    const dropdown = customSelectWrapper.querySelector(".custom-select-dropdown");
+    const valueSpan = trigger.querySelector(".custom-select-value");
+    const options = dropdown.querySelectorAll(".custom-select-option");
+
+    // Toggle dropdown
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isOpen = dropdown.classList.contains("open");
+      // Close all other dropdowns
+      document.querySelectorAll(".custom-select-dropdown.open").forEach(d => {
+        d.classList.remove("open");
+        d.previousElementSibling.classList.remove("open");
+      });
+      if (!isOpen) {
+        dropdown.classList.add("open");
+        trigger.classList.add("open");
+      }
+    });
+
+    // Select option
+    options.forEach(option => {
+      option.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const value = option.dataset.value;
+        const text = option.textContent;
+        
+        // Update UI
+        valueSpan.textContent = text;
+        if (value) {
+          valueSpan.classList.remove("placeholder");
+        } else {
+          valueSpan.classList.add("placeholder");
+        }
+        
+        // Update selected state
+        options.forEach(opt => opt.classList.remove("selected"));
+        option.classList.add("selected");
+        
+        // Close dropdown
+        dropdown.classList.remove("open");
+        trigger.classList.remove("open");
+        
+        // Auto-fill model & base_url if a provider preset was selected
+        if (value && value !== "custom") {
+          const preset = _providers.find(p => p.id === value);
+          if (preset) {
+            const modelInput   = card.querySelector(`[data-key="model"]`);
+            const baseUrlInput = card.querySelector(`[data-key="base_url"]`);
+            if (modelInput)   modelInput.value   = preset.default_model || "";
+            if (baseUrlInput) baseUrlInput.value = preset.base_url       || "";
+          }
+        }
+      });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", () => {
+      dropdown.classList.remove("open");
+      trigger.classList.remove("open");
     });
 
     // Toggle API key visibility
-    card.querySelector(".btn-toggle-key").addEventListener("click", () => {
-      const input = card.querySelector(".api-key-input");
-      input.type = input.type === "password" ? "text" : "password";
+    const toggleKeyBtn = card.querySelector(".btn-toggle-key");
+    const apiKeyInput = card.querySelector(".api-key-input");
+    const eyeIcon = toggleKeyBtn.querySelector("svg");
+    
+    toggleKeyBtn.addEventListener("click", () => {
+      const isPassword = apiKeyInput.type === "password";
+      apiKeyInput.type = isPassword ? "text" : "password";
+      
+      // Update icon
+      if (isPassword) {
+        // Show eye-off icon
+        eyeIcon.innerHTML = `
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
+        `;
+      } else {
+        // Show eye icon
+        eyeIcon.innerHTML = `
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+        `;
+      }
     });
 
     // Save: auto-test first, then save if passed
@@ -143,6 +228,12 @@ const Settings = (() => {
     if (removeBtn) {
       removeBtn.addEventListener("click", () => _removeModel(index));
     }
+
+    // Set as default model
+    const setDefaultBtn = card.querySelector(".btn-set-default");
+    if (setDefaultBtn) {
+      setDefaultBtn.addEventListener("click", () => _setAsDefault(index));
+    }
   }
 
   // ── Read form values from a card ────────────────────────────────────────────
@@ -233,26 +324,88 @@ const Settings = (() => {
     el.className   = `model-test-result ${ok ? "result-ok" : "result-fail"}`;
   }
 
+  // ── Set as Default Model ───────────────────────────────────────────────────
+
+  async function _setAsDefault(index) {
+    const btn = document.querySelector(`.btn-set-default[data-index="${index}"]`);
+    if (!btn) return;
+
+    btn.disabled    = true;
+    btn.textContent = "Setting…";
+
+    // Set the selected one as "default", others as null (not just delete)
+    // Using null ensures the server explicitly updates/removes the type field
+    const updatedModels = _models.map((m, i) => {
+      const model = { ...m };
+      if (i === index) {
+        model.type = "default";
+      } else {
+        model.type = null;
+      }
+      return model;
+    });
+
+    try {
+      const res = await fetch("/api/config", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ models: updatedModels })
+      });
+      const data = await res.json();
+
+      if (data.ok) {
+        btn.textContent = "Done ✓";
+        // Reload to refresh the UI
+        setTimeout(_load, 800);
+      } else {
+        btn.textContent = "Set as Default";
+        btn.disabled    = false;
+        alert(data.error || "Failed to set default model");
+      }
+    } catch (e) {
+      btn.textContent = "Set as Default";
+      btn.disabled    = false;
+      alert("Error: " + e.message);
+    }
+  }
+
   // ── Add / Remove model ───────────────────────────────────────────────────────
 
   function _addModel() {
+    // When adding a new model, automatically set it as default.
+    // Set all existing models' type to null (not just delete) so server updates them.
+    _models = _models.map(m => {
+      const model = { ...m };
+      model.type = null;
+      return model;
+    });
+
     _models.push({
       index:            _models.length,
       model:            "",
       base_url:         "",
       api_key_masked:   "",
       anthropic_format: false,
-      type:             null
+      type:             "default"  // New model automatically becomes default
     });
     _renderCards();
-    // Scroll to the new card
+    // Scroll to the new card with offset
     const cards = document.querySelectorAll(".model-card");
-    if (cards.length) cards[cards.length - 1].scrollIntoView({ behavior: "smooth" });
+    if (cards.length) {
+      const lastCard = cards[cards.length - 1];
+      lastCard.scrollIntoView({ behavior: "smooth", block: "start" });
+      // Add 20px offset after scroll completes
+      setTimeout(() => {
+        const container = document.getElementById("settings-body");
+        if (container) container.scrollTop -= 20;
+      }, 300);
+    }
   }
 
   async function _removeModel(index) {
     if (_models.length <= 1) return;
-    if (!confirm(`Remove model "${_models[index]?.model || index + 1}"?`)) return;
+    const confirmed = await Modal.confirm(`Remove model "${_models[index]?.model || index + 1}"?`);
+    if (!confirmed) return;
 
     _models.splice(index, 1);
 

data/lib/clacky/web/skills.js

@@ -352,9 +352,13 @@ const Skills = (() => {
       const labelEl = $("skills-sidebar-label");
       if (!labelEl) return;
       const total = _skills.length;
-      labelEl.textContent = total === 0
-        ? "No skills"
-        : `${total} skill${total !== 1 ? "s" : ""}`;
+      // Don't show "No skills" when the skills panel is active
+      const isActive = Router.current === "skills";
+      if (total === 0) {
+        labelEl.textContent = isActive ? "Skills" : "No skills";
+      } else {
+        labelEl.textContent = `${total} skill${total !== 1 ? "s" : ""}`;
+      }
     },
 
     // ── Actions ───────────────────────────────────────────────────────────

data/lib/clacky/web/tasks.js

@@ -47,15 +47,32 @@ const Tasks = (() => {
 
     row.innerHTML = `
       <div class="task-col task-col-name">
-        <span class="task-icon">⏰</span>
+        <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="task-icon">
+          <circle cx="12" cy="12" r="10"/>
+          <polyline points="12 6 12 12 16 14"/>
+        </svg>
         <span class="task-name-text">${escapeHtml(t.name)}</span>
       </div>
       <div class="task-col task-col-schedule">${schedLabel}</div>
       <div class="task-col task-col-content">${previewText}</div>
       <div class="task-col task-col-actions">
-        <button class="task-btn task-btn-run"  title="Run now">▶ Run</button>
-        <button class="task-btn task-btn-edit" title="Edit task">✎ Edit</button>
-        <button class="task-btn task-btn-del"  title="Delete">✕</button>
+        <button class="task-btn task-btn-run"  title="Run now">
+          <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">
+            <polygon points="6 3 20 12 6 21 6 3"/>
+          </svg> Run
+        </button>
+        <button class="task-btn task-btn-edit" title="Edit task">
+          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
+            <path d="m15 5 4 4"/>
+          </svg> Edit
+        </button>
+        <button class="task-btn task-btn-del"  title="Delete">
+          <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="M18 6 6 18"/>
+            <path d="m6 6 12 12"/>
+          </svg>
+        </button>
       </div>`;
 
     row.querySelector(".task-btn-run").addEventListener("click", e => {
@@ -113,9 +130,13 @@ const Tasks = (() => {
       // Sidebar item is static in HTML — just update the label text.
       const labelEl = $("tasks-sidebar-label");
       if (!labelEl) return;
-      labelEl.textContent = _tasks.length === 0
-        ? "No tasks"
-        : `${_tasks.length} task${_tasks.length !== 1 ? "s" : ""}`;
+      // Don't show "No tasks" when the tasks panel is active
+      const isActive = Router.current === "tasks";
+      if (_tasks.length === 0) {
+        labelEl.textContent = isActive ? "Tasks" : "No tasks";
+      } else {
+        labelEl.textContent = `${_tasks.length} task${_tasks.length !== 1 ? "s" : ""}`;
+      }
     },
 
     // ── Main panel table ──────────────────────────────────────────────────
@@ -130,7 +151,12 @@ const Tasks = (() => {
         empty.className = "task-table-empty";
         empty.innerHTML = `
           <p>No scheduled tasks.</p>
-          <button class="task-create-btn" id="btn-create-task-empty">＋ Create Task</button>`;
+          <button class="task-create-btn" id="btn-create-task-empty">
+            <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="M5 12h14"/>
+              <path d="M12 5v14"/>
+            </svg> Create Task
+          </button>`;
         table.appendChild(empty);
         const btn = table.querySelector("#btn-create-task-empty");
         if (btn) btn.addEventListener("click", () => Tasks.createInSession());

data/lib/clacky/web/theme.js

@@ -0,0 +1,67 @@
+// theme.js — Theme switcher module
+// Handles light/dark theme persistence and switching
+
+const Theme = (() => {
+  const STORAGE_KEY = "clacky-theme";
+  const ATTR_NAME = "data-theme";
+
+  // Initialize theme from localStorage or system preference
+  function init() {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    const theme = saved || (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
+    apply(theme);
+  }
+
+  // Apply theme to document
+  function apply(theme) {
+    document.documentElement.setAttribute(ATTR_NAME, theme);
+    localStorage.setItem(STORAGE_KEY, theme);
+    
+    // Update header toggle button if it exists
+    const headerToggle = document.getElementById("theme-toggle-header");
+    if (headerToggle) {
+      if (theme === "light") {
+        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 {
+        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"/>
+          <path d="M12 20v2"/>
+          <path d="m4.93 4.93 1.41 1.41"/>
+          <path d="m17.66 17.66 1.41 1.41"/>
+          <path d="M2 12h2"/>
+          <path d="M20 12h2"/>
+          <path d="m6.34 17.66-1.41 1.41"/>
+          <path d="m19.07 4.93-1.41 1.41"/>
+        </svg>`;
+      }
+    }
+    
+    // Update settings toggle button if it exists (legacy)
+    const toggle = document.getElementById("theme-toggle");
+    if (toggle) {
+      const icon = theme === "light" ? "🌙" : "☀️";
+      const label = theme === "light" ? "Dark" : "Light";
+      toggle.innerHTML = `<span class="theme-icon">${icon}</span><span>${label}</span>`;
+    }
+  }
+
+  // Toggle between light and dark
+  function toggle() {
+    const current = document.documentElement.getAttribute(ATTR_NAME) || "dark";
+    const next = current === "dark" ? "light" : "dark";
+    apply(next);
+  }
+
+  // Get current theme
+  function current() {
+    return document.documentElement.getAttribute(ATTR_NAME) || "dark";
+  }
+
+  return { init, toggle, current };
+})();
+
+// Initialize theme on page load
+Theme.init();

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openclacky
 version: !ruby/object:Gem::Version
-  version: 0.8.2
+  version: 0.8.4
 platform: ruby
 authors:
 - windy
@@ -177,6 +177,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: rubyzip
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
 description: OpenClacky is a Ruby CLI tool for interacting with AI models via OpenAI-compatible
   APIs. It provides chat functionality and autonomous AI agent capabilities with tool
   use.
@@ -336,6 +350,7 @@ files:
 - lib/clacky/web/settings.js
 - lib/clacky/web/skills.js
 - lib/clacky/web/tasks.js
+- lib/clacky/web/theme.js
 - lib/clacky/web/ws.js
 - scripts/install.sh
 - scripts/uninstall.sh