openclacky 1.2.8 → 1.2.9

data/lib/clacky/web/settings.js

@@ -16,6 +16,7 @@ const Settings = (() => {
 
   function open() {
     _load();
+    _loadMedia();
     _loadBrand();
     _loadBrowserStatus();
     _applyAboutTabVisibility();
@@ -101,22 +102,24 @@ const Settings = (() => {
         </div>
       </div>
       <div class="model-card-grid-actions">
-        ${!isDefault ? `<button class="btn-card-grid-action" data-index="${index}" data-action="default" title="${I18n.t("settings.models.btn.setDefault")}">
-          <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="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+        ${!isDefault ? `<button class="btn-card-grid-action btn-card-grid-action-primary" data-index="${index}" data-action="default">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
           <span>${I18n.t("settings.models.btn.setDefault")}</span>
         </button>` : ""}
-        <button class="btn-card-grid-action" data-index="${index}" data-action="test" title="${I18n.t("settings.models.btn.test")}">
-          <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 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
-          <span>${I18n.t("settings.models.btn.test")}</span>
-        </button>
-        <button class="btn-card-grid-action" data-index="${index}" data-action="edit" title="${I18n.t("settings.models.btn.edit")}">
-          <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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-          <span>${I18n.t("settings.models.btn.edit")}</span>
-        </button>
-        ${_models.length > 1 ? `<button class="btn-card-grid-action btn-card-grid-action-danger" data-index="${index}" data-action="delete" title="${I18n.t("settings.models.btn.delete")}">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-          <span>${I18n.t("settings.models.btn.delete")}</span>
-        </button>` : ""}
+        <div class="model-card-grid-toolbar">
+          <button class="btn-card-grid-action" data-index="${index}" data-action="test">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+            <span>${I18n.t("settings.models.btn.test")}</span>
+          </button>
+          <button class="btn-card-grid-action" data-index="${index}" data-action="edit">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+            <span>${I18n.t("settings.models.btn.edit")}</span>
+          </button>
+          ${_models.length > 1 ? `<button class="btn-card-grid-action btn-card-grid-action-danger" data-index="${index}" data-action="delete">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+            <span>${I18n.t("settings.models.btn.delete")}</span>
+          </button>` : ""}
+        </div>
       </div>
       ${websiteUrl ? `<div class="model-card-grid-footer">
         <a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer">
@@ -131,8 +134,7 @@ const Settings = (() => {
   }
 
   function _bindCompactCardEvents(card, index) {
-    // Bind all action buttons using data-action attribute
-    card.querySelectorAll(".btn-card-grid-action").forEach(btn => {
+    card.querySelectorAll("[data-action]").forEach(btn => {
       btn.addEventListener("click", () => {
         const action = btn.dataset.action;
         switch (action) {
@@ -164,7 +166,8 @@ const Settings = (() => {
       document.getElementById("model-modal-model").value = model.model || "";
       document.getElementById("model-modal-baseurl").value = model.base_url || "";
       document.getElementById("model-modal-apikey").value = model.api_key_masked || "";
-      document.getElementById("model-modal-default-field").style.display = "none";
+      document.getElementById("model-modal-default-field").style.display = "";
+      document.getElementById("model-modal-set-default").checked = (model.type === "default");
 
       // Set provider dropdown value
       const matched = _findProviderByBaseUrl(model.base_url);
@@ -182,6 +185,8 @@ const Settings = (() => {
       document.getElementById("model-modal-baseurl").value = "";
       document.getElementById("model-modal-apikey").value = "";
       document.getElementById("model-modal-default-field").style.display = "";
+      // Default to checked for new models — most users want their first/new
+      // model to take over as the default.
       document.getElementById("model-modal-set-default").checked = true;
 
       // Reset provider dropdown
@@ -282,23 +287,14 @@ const Settings = (() => {
     _showTestResult(index, null, "");
 
     try {
-      const body = {
-        model: model.model,
+      const result = await ModelTester.testConnection({
+        model:    model.model,
         base_url: model.base_url,
-        api_key: model.api_key_masked,
-        index
-      };
-      if (model.anthropic_format) body.anthropic_format = true;
-
-      const testRes = await fetch("/api/config/test", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body)
+        api_key:  model.api_key_masked,
+        index,
+        anthropic_format: model.anthropic_format
       });
-      const testData = await testRes.json();
-      _showTestResult(index, testData.ok, testData.message);
-    } catch (e) {
-      _showTestResult(index, false, e.message);
+      _showTestResult(index, result.ok, result.message);
     } finally {
       if (testBtn) testBtn.disabled = false;
     }
@@ -309,7 +305,7 @@ const Settings = (() => {
     const index = parseInt(document.getElementById("model-modal-index").value, 10);
 
     const model = document.getElementById("model-modal-model").value.trim();
-    const base_url = document.getElementById("model-modal-baseurl").value.trim();
+    let base_url = document.getElementById("model-modal-baseurl").value.trim();
     const api_key = document.getElementById("model-modal-apikey").value.trim();
 
     saveBtn.disabled = true;
@@ -325,25 +321,19 @@ const Settings = (() => {
     saveBtn.textContent = I18n.t("settings.models.btn.testing");
     _showModalTestResult(null, "");
 
-    try {
-      const testBody = { model, base_url, api_key, index };
-      if (anthropic_format) testBody.anthropic_format = true;
+    const result = await ModelTester.testConnection({
+      model, base_url, api_key, index, anthropic_format
+    });
 
-      const testRes = await fetch("/api/config/test", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(testBody)
-      });
-      const testData = await testRes.json();
-      _showModalTestResult(testData.ok, testData.message);
+    if (result.rewrote) {
+      base_url = result.base_url;
+      const baseInput = document.getElementById("model-modal-baseurl");
+      if (baseInput) baseInput.value = base_url;
+    }
 
-      if (!testData.ok) {
-        saveBtn.textContent = I18n.t("settings.models.btn.save");
-        saveBtn.disabled = false;
-        return;
-      }
-    } catch (e) {
-      _showModalTestResult(false, e.message);
+    _showModalTestResult(result.ok, result.message);
+
+    if (!result.ok) {
       saveBtn.textContent = I18n.t("settings.models.btn.save");
       saveBtn.disabled = false;
       return;
@@ -357,60 +347,38 @@ const Settings = (() => {
     const hasId = !!existing.id;
 
     const payload = { model, base_url, anthropic_format };
-    if (isNew) {
-      if (document.getElementById("model-modal-set-default").checked) {
-        payload.type = "default";
-        _models.forEach(m => { if (m.type === "default") m.type = null; });
-      } else {
-        payload.type = null;
-      }
-    } else {
-      payload.type = existing.type;
+    const setDefault = document.getElementById("model-modal-set-default").checked;
+    payload.type = setDefault ? "default" : null;
+    if (setDefault) {
+      _models.forEach((m, i) => {
+        if (i !== index && m.type === "default") m.type = null;
+      });
     }
 
     if (api_key && !api_key.includes("****")) {
       payload.api_key = api_key;
     }
 
-    try {
-      let res, data;
-      if (hasId) {
-        res = await fetch(`/api/config/models/${encodeURIComponent(existing.id)}`, {
-          method: "PATCH",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload)
-        });
-        data = await res.json();
-      } else {
-        if (!payload.api_key) {
-          saveBtn.textContent = I18n.t("settings.models.btn.save");
-          saveBtn.disabled = false;
-          _showModalTestResult(false, I18n.t("settings.models.placeholder.apikey"));
-          return;
-        }
-        res = await fetch(`/api/config/models`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload)
-        });
-        data = await res.json();
-      }
+    if (!hasId && !payload.api_key) {
+      saveBtn.textContent = I18n.t("settings.models.btn.save");
+      saveBtn.disabled = false;
+      _showModalTestResult(false, I18n.t("settings.models.placeholder.apikey"));
+      return;
+    }
 
-      if (data.ok) {
-        saveBtn.textContent = I18n.t("settings.models.btn.saved");
-        setTimeout(() => {
-          _closeModal();
-          _load();
-        }, 800);
-      } else {
-        saveBtn.textContent = I18n.t("settings.models.btn.save");
-        saveBtn.disabled = false;
-        _showModalTestResult(false, data.error || I18n.t("settings.models.saveFailed"));
-      }
-    } catch (e) {
+    const saveResult = await ModelTester.saveModel(payload, { existingId: hasId ? existing.id : null });
+
+    if (saveResult.ok) {
+      saveBtn.textContent = I18n.t("settings.models.btn.saved");
+      setTimeout(() => {
+        _closeModal();
+        _load();
+        _loadMedia();
+      }, 800);
+    } else {
       saveBtn.textContent = I18n.t("settings.models.btn.save");
       saveBtn.disabled = false;
-      _showModalTestResult(false, e.message);
+      _showModalTestResult(false, saveResult.error || I18n.t("settings.models.saveFailed"));
     }
   }
 
@@ -1077,7 +1045,7 @@ const Settings = (() => {
           const span = btn.querySelector("span");
           if (span) span.textContent = I18n.t("settings.models.btn.done");
         }
-        setTimeout(_load, 800);
+        setTimeout(() => { _load(); _loadMedia(); }, 800);
       } else {
         if (btn) {
           btn.disabled = false;
@@ -1132,6 +1100,7 @@ const Settings = (() => {
 
     // Reload fresh state
     _load();
+    _loadMedia();
   }
 
   // ── Helpers ──────────────────────────────────────────────────────────────────
@@ -1550,6 +1519,259 @@ const Settings = (() => {
     }
   }
 
+
+  // ── Media generation (Settings → Models tab, below the model cards) ───
+  // Per-kind tri-state: off / auto (derive from default) / custom (user-set).
+  // Backend API:
+  //   GET   /api/config/media                 → { media: { image: {...}, ... }, default_provider: {...} }
+  //   PATCH /api/config/media/:kind           → body { source: "off"|"auto"|"custom", model?, base_url?, api_key?, anthropic_format? }
+  // The state object per kind:
+  //   { source, configured, model, base_url, api_key_masked, provider, available }
+
+  const MEDIA_KINDS = ["image", "video", "audio"];
+  let _mediaState = null;
+  let _mediaDefaults = null;
+  const _mediaCustomDraft = {};
+
+  async function _loadMedia() {
+    const container = document.getElementById("media-rows");
+    if (!container) return;
+    container.innerHTML = `<div class="settings-loading">${I18n.t("settings.media.loading")}</div>`;
+    try {
+      const res = await fetch("/api/config/media");
+      const data = await res.json();
+      _mediaState = data.media || {};
+      _mediaDefaults = data.default_provider || {};
+      _renderMediaRows();
+    } catch (e) {
+      container.innerHTML = `<div class="settings-error">${I18n.t("settings.media.error", { msg: e.message })}</div>`;
+    }
+  }
+
+  function _renderMediaRows() {
+    const container = document.getElementById("media-rows");
+    if (!container) return;
+    container.innerHTML = "";
+    MEDIA_KINDS.forEach(kind => {
+      container.appendChild(_renderMediaRow(kind));
+    });
+  }
+
+  function _renderMediaRow(kind) {
+    const state = (_mediaState && _mediaState[kind]) || { source: "off", available: [] };
+    const def   = (_mediaDefaults && _mediaDefaults[kind]) || { available: [] };
+    const autoAvailable = !!(def && def.model);
+    const isCustomEditing = state.source === "custom" && (!state.configured || _mediaCustomDraft[kind]);
+
+    const row = document.createElement("div");
+    row.className = "media-row";
+    if (isCustomEditing || (state.source === "auto" && state.configured) || (state.source === "custom" && state.configured)) {
+      row.classList.add("is-expanded");
+    }
+    row.dataset.kind = kind;
+
+    // Compact head: title · segmented · status
+    const head = document.createElement("div");
+    head.className = "media-row-head";
+
+    const title = document.createElement("span");
+    title.className = "media-row-title";
+    title.textContent = I18n.t(`settings.media.kind.${kind}`);
+    head.appendChild(title);
+
+    const seg = document.createElement("div");
+    seg.className = "media-row-segmented";
+    ["off", "auto", "custom"].forEach(src => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.dataset.source = src;
+      btn.textContent = I18n.t(`settings.media.source.${src}`);
+      if (state.source === src) btn.classList.add("is-active");
+      if (src === "auto" && !autoAvailable) {
+        btn.disabled = true;
+        btn.title = I18n.t("settings.media.auto.disabledTitle");
+      } else {
+        btn.addEventListener("click", () => _onMediaSourceClick(kind, src));
+      }
+      seg.appendChild(btn);
+    });
+    head.appendChild(seg);
+
+    const status = document.createElement("span");
+    status.className = "media-row-status";
+    status.textContent = _mediaStatusText(kind, state, def);
+    head.appendChild(status);
+
+    row.appendChild(head);
+
+    const detail = _renderMediaDetail(kind, state, def);
+    if (detail) row.appendChild(detail);
+
+    return row;
+  }
+
+  function _mediaStatusText(kind, state, def) {
+    if (state.source === "off") return "";
+    if (state.source === "auto") {
+      if (state.configured && state.model) return state.model;
+      return "";
+    }
+    if (state.source === "custom" && state.configured && !_mediaCustomDraft[kind]) {
+      return state.model || "";
+    }
+    return "";
+  }
+
+  function _renderMediaDetail(kind, state, def) {
+    if (state.source === "off") return null;
+
+    if (state.source === "auto") {
+      if (state.configured && state.model) {
+        const wrap = document.createElement("div");
+        wrap.className = "media-row-detail";
+        wrap.innerHTML = `
+          <div class="media-kv">
+            <span class="media-kv-key">${I18n.t("settings.media.field.provider")}</span>
+            <span class="media-kv-val">${_esc(state.provider || "—")}</span>
+            <span class="media-kv-key">${I18n.t("settings.media.field.model")}</span>
+            <span class="media-kv-val">${_esc(state.model)}</span>
+          </div>
+          <div class="media-row-hint">${I18n.t("settings.media.auto.followsDefault")}</div>
+        `;
+        return wrap;
+      }
+      const wrap = document.createElement("div");
+      wrap.className = "media-row-detail is-warning";
+      const hasDefault = def && def.provider;
+      wrap.innerHTML = `<div>${hasDefault ? I18n.t("settings.media.auto.unsupported") : I18n.t("settings.media.auto.noDefaultModel")}</div>`;
+      return wrap;
+    }
+
+    // custom
+    if (state.configured && !_mediaCustomDraft[kind]) {
+      const wrap = document.createElement("div");
+      wrap.className = "media-row-detail";
+      wrap.innerHTML = `
+        <div class="media-kv">
+          <span class="media-kv-key">${I18n.t("settings.media.field.model")}</span>
+          <span class="media-kv-val">${_esc(state.model || "—")}</span>
+          <span class="media-kv-key">${I18n.t("settings.media.field.baseUrl")}</span>
+          <span class="media-kv-val">${_esc(state.base_url || "—")}</span>
+          <span class="media-kv-key">${I18n.t("settings.media.field.apiKey")}</span>
+          <span class="media-kv-val">${_esc(state.api_key_masked || "—")}</span>
+        </div>
+      `;
+      const actions = document.createElement("div");
+      actions.className = "media-row-actions";
+      const editBtn = document.createElement("button");
+      editBtn.type = "button";
+      editBtn.className = "media-row-btn";
+      editBtn.textContent = I18n.t("settings.media.action.edit");
+      editBtn.addEventListener("click", () => {
+        _mediaCustomDraft[kind] = {
+          model:    state.model || "",
+          base_url: state.base_url || "",
+          api_key:  ""
+        };
+        _renderMediaRows();
+      });
+      actions.appendChild(editBtn);
+      wrap.appendChild(actions);
+      return wrap;
+    }
+
+    // edit form
+    const draft = _mediaCustomDraft[kind] || { model: "", base_url: "", api_key: "" };
+    const wrap = document.createElement("div");
+    wrap.className = "media-row-detail";
+    const form = document.createElement("div");
+    form.className = "media-custom-form";
+    form.innerHTML = `
+      <label>${I18n.t("settings.media.field.model")}</label>
+      <input type="text" data-field="model" value="${_esc(draft.model)}" placeholder="gpt-image-1">
+      <label>${I18n.t("settings.media.field.baseUrl")}</label>
+      <input type="text" data-field="base_url" value="${_esc(draft.base_url)}" placeholder="https://api.openai.com/v1">
+      <label>${I18n.t("settings.media.field.apiKey")}</label>
+      <input type="password" data-field="api_key" value="${_esc(draft.api_key)}" placeholder="${I18n.t("settings.media.apiKey.placeholder")}">
+      <div class="media-form-actions">
+        <button type="button" class="media-row-btn" data-act="cancel">${I18n.t("settings.media.action.cancel")}</button>
+        <button type="button" class="media-row-btn is-primary" data-act="save">${I18n.t("settings.media.action.save")}</button>
+      </div>
+    `;
+    form.querySelectorAll("input").forEach(inp => {
+      inp.addEventListener("input", () => {
+        _mediaCustomDraft[kind] = _mediaCustomDraft[kind] || {};
+        _mediaCustomDraft[kind][inp.dataset.field] = inp.value;
+      });
+    });
+    form.querySelector('[data-act="cancel"]').addEventListener("click", () => {
+      delete _mediaCustomDraft[kind];
+      // If there's no saved custom, fall back to whatever the saved source is (or off)
+      if (!state.configured) {
+        const fallback = (_mediaDefaults && _mediaDefaults[kind] && _mediaDefaults[kind].model) ? "auto" : "off";
+        _mediaState[kind] = { ..._mediaState[kind], source: fallback };
+      }
+      _renderMediaRows();
+    });
+    form.querySelector('[data-act="save"]').addEventListener("click", async () => {
+      const d = _mediaCustomDraft[kind] || {};
+      try {
+        await _saveMediaConfig(kind, {
+          source:   "custom",
+          model:    (d.model || "").trim(),
+          base_url: (d.base_url || "").trim(),
+          api_key:  d.api_key || ""
+        });
+        delete _mediaCustomDraft[kind];
+        await _loadMedia();
+      } catch (e) {
+        alert(e.message);
+      }
+    });
+    wrap.appendChild(form);
+    return wrap;
+  }
+
+  async function _onMediaSourceClick(kind, source) {
+    const cur = (_mediaState && _mediaState[kind]) || {};
+    if (cur.source === source && source !== "custom") return;
+
+    if (source === "custom") {
+      if (cur.source !== "custom" && !_mediaCustomDraft[kind]) {
+        _mediaCustomDraft[kind] = {
+          model:    cur.model || "",
+          base_url: cur.base_url || "",
+          api_key:  ""
+        };
+      }
+      _mediaState[kind] = { ...cur, source: "custom" };
+      _renderMediaRows();
+      return;
+    }
+
+    try {
+      await _saveMediaConfig(kind, { source });
+      delete _mediaCustomDraft[kind];
+      await _loadMedia();
+    } catch (e) {
+      alert(e.message);
+    }
+  }
+
+  async function _saveMediaConfig(kind, body) {
+    const res = await fetch(`/api/config/media/${kind}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok || data.error) {
+      throw new Error(data.error || `HTTP ${res.status}`);
+    }
+    return data;
+  }
+
+
   function init() {
     _initTabs();
     _initModal();
@@ -1628,7 +1850,10 @@ const Settings = (() => {
     _initCurrencyBtns();
 
     // Re-render model cards when language changes (dynamic HTML, not data-i18n)
-    document.addEventListener("langchange", () => _renderCards());
+    document.addEventListener("langchange", () => {
+      _renderCards();
+      _renderMediaRows();
+    });
   }
 
   // ── Currency ──────────────────────────────────────────────────────────

data/lib/clacky.rb

@@ -125,6 +125,9 @@ require_relative "clacky/mcp/client"
 require_relative "clacky/mcp/virtual_skill"
 require_relative "clacky/mcp/registry"
 require_relative "clacky/mcp/skill_provider"
+require_relative "clacky/media/base"
+require_relative "clacky/media/openai_compat"
+require_relative "clacky/media/generator"
 require_relative "clacky/telemetry"
 require_relative "clacky/agent"