openclacky 1.2.8 → 1.2.9

data/lib/clacky/web/app.css

@@ -3858,6 +3858,7 @@ body {
 .model-card-grid-actions {
   display: flex;
   flex-direction: row;
+  align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding-top: 0.625rem;
@@ -3867,7 +3868,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
+  gap: 0.3125rem;
   padding: 0.375rem 0.5rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 6px;
@@ -3877,15 +3878,9 @@ body {
   cursor: pointer;
   transition: all 0.15s;
   white-space: nowrap;
+  min-width: 0;
 }
-.btn-card-grid-action svg {
-  flex-shrink: 0;
-}
-.btn-card-grid-action span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+.btn-card-grid-action svg { flex-shrink: 0; }
 .btn-card-grid-action:hover:not(:disabled) {
   border-color: var(--color-accent-primary);
   color: var(--color-accent-primary);
@@ -3895,13 +3890,22 @@ body {
   opacity: 0.5;
   cursor: not-allowed;
 }
+.btn-card-grid-action-primary {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
 .btn-card-grid-action-danger:hover:not(:disabled) {
   border-color: var(--color-error);
   color: var(--color-error);
   background: color-mix(in srgb, var(--color-error) 8%, transparent);
 }
-a.btn-card-grid-action {
-  text-decoration: none;
+.model-card-grid-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-left: auto;
+  justify-content: flex-end;
 }
 .model-card-grid-footer {
   display: flex;
@@ -9710,4 +9714,160 @@ body.setup-mode[data-theme="dark"] {
     grid-column: 1 / -1;
     text-align: right;
   }
-}
+}
+
+/* ════ Media generation (Settings → Models tab) ════ */
+.settings-section-desc {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin: -0.25rem 0 0.5rem;
+}
+.media-row {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  background: var(--color-bg-secondary);
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+}
+.media-row.is-expanded {
+  background: var(--color-bg-secondary);
+}
+.media-row-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  min-height: 2.25rem;
+}
+.media-row-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  min-width: 3rem;
+}
+.media-row-segmented {
+  display: inline-flex;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  padding: 1px;
+}
+.media-row-segmented button {
+  background: transparent;
+  border: none;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  font-family: inherit;
+}
+.media-row-segmented button:hover:not(.is-active):not(:disabled) {
+  color: var(--color-text-primary);
+}
+.media-row-segmented button.is-active {
+  background: var(--color-button-primary);
+  color: #fff;
+}
+.media-row-segmented button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.media-row-status {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 16rem;
+}
+.media-row-detail {
+  border-top: 1px solid var(--color-border-primary);
+  padding: 0.625rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  background: var(--color-bg-primary);
+}
+.media-row-detail.is-warning {
+  color: var(--color-warning, #d97706);
+}
+.media-row-hint {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary, var(--color-text-secondary));
+}
+.media-row-detail .media-kv {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+}
+.media-row-detail .media-kv-key {
+  color: var(--color-text-secondary);
+}
+.media-row-detail .media-kv-val {
+  color: var(--color-text-primary);
+  font-weight: 500;
+  word-break: break-all;
+}
+.media-row-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  justify-content: flex-end;
+}
+.media-row-btn {
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
+  border-radius: 6px;
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  font-family: inherit;
+}
+.media-row-btn:hover {
+  background: var(--color-bg-secondary);
+}
+.media-row-btn.is-primary {
+  background: var(--color-button-primary);
+  color: #fff;
+  border-color: transparent;
+}
+.media-row-btn.is-primary:hover {
+  background: var(--color-button-primary-hover);
+}
+.media-custom-form {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.4375rem 0.625rem;
+  align-items: center;
+}
+.media-custom-form label {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+.media-custom-form input {
+  width: 100%;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
+  border-radius: 6px;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.media-custom-form .media-form-actions {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: 0.25rem;
+}

data/lib/clacky/web/i18n.js

@@ -490,6 +490,35 @@ const I18n = (() => {
       "settings.models.empty":    "No models configured. Click \"+ Add Model\" to add one.",
       "settings.models.badge.default": "Default",
       "settings.models.badge.lite":    "Lite",
+      "settings.media.title":         "Media Generation",
+      "settings.media.desc":          "Optional. Image / video / audio generation models.",
+      "settings.media.loading":       "Loading…",
+      "settings.media.error":         "Failed to load: {{msg}}",
+      "settings.media.kind.image":    "Image",
+      "settings.media.kind.video":    "Video",
+      "settings.media.kind.audio":    "Audio",
+      "settings.media.source.off":    "Off",
+      "settings.media.source.auto":   "Auto",
+      "settings.media.source.custom": "Custom",
+      "settings.media.field.model":   "Model",
+      "settings.media.field.baseUrl": "Base URL",
+      "settings.media.field.apiKey":  "API Key",
+      "settings.media.field.provider":"Provider",
+      "settings.media.off.hint":               "Disabled.",
+      "settings.media.auto.followsDefault":    "Follows default chat model",
+      "settings.media.auto.noDefaultModel":    "Set a default chat model first.",
+      "settings.media.auto.unsupported":       "Current provider has no built-in model for this kind. Switch to Custom.",
+      "settings.media.auto.comingSoon":        "Not available yet — no built-in providers.",
+      "settings.media.auto.disabledTitle":     "No built-in provider available — use Custom.",
+      "settings.media.action.edit":   "Edit",
+      "settings.media.action.save":   "Save",
+      "settings.media.action.cancel": "Cancel",
+      "settings.media.action.saving": "Saving…",
+      "settings.media.action.saved":  "Saved",
+      "settings.media.apiKey.placeholder": "Enter API key",
+      "settings.media.apiKey.required":    "API key required",
+      "settings.media.model.required":     "Model name required",
+      "settings.media.baseUrl.required":   "Base URL required",
       "settings.models.field.quicksetup": "Quick Setup",
       "settings.models.field.model":      "Model",
       "settings.models.field.baseurl":    "Base URL",
@@ -1180,6 +1209,35 @@ const I18n = (() => {
       "settings.models.empty":    "暂未配置模型，点击「+ 添加模型」添加。",
       "settings.models.badge.default": "默认",
       "settings.models.badge.lite":    "轻量",
+      "settings.media.title":         "媒体生成",
+      "settings.media.desc":          "可选。图片 / 视频 / 音频 生成模型。",
+      "settings.media.loading":       "加载中…",
+      "settings.media.error":         "加载失败：{{msg}}",
+      "settings.media.kind.image":    "图片",
+      "settings.media.kind.video":    "视频",
+      "settings.media.kind.audio":    "音频",
+      "settings.media.source.off":    "关闭",
+      "settings.media.source.auto":   "自动",
+      "settings.media.source.custom": "自定义",
+      "settings.media.field.model":   "模型",
+      "settings.media.field.baseUrl": "Base URL",
+      "settings.media.field.apiKey":  "API Key",
+      "settings.media.field.provider":"服务商",
+      "settings.media.off.hint":               "已关闭。",
+      "settings.media.auto.followsDefault":    "跟随默认聊天模型",
+      "settings.media.auto.noDefaultModel":    "请先设置默认聊天模型。",
+      "settings.media.auto.unsupported":       "当前服务商无内置模型，请切换到「自定义」。",
+      "settings.media.auto.comingSoon":        "暂无内置服务商，敬请期待。",
+      "settings.media.auto.disabledTitle":     "暂无内置服务商，请使用自定义。",
+      "settings.media.action.edit":   "编辑",
+      "settings.media.action.save":   "保存",
+      "settings.media.action.cancel": "取消",
+      "settings.media.action.saving": "保存中…",
+      "settings.media.action.saved":  "已保存",
+      "settings.media.apiKey.placeholder": "请输入 API Key",
+      "settings.media.apiKey.required":    "请填写 API Key",
+      "settings.media.model.required":     "请填写模型名称",
+      "settings.media.baseUrl.required":   "请填写 Base URL",
       "settings.models.field.quicksetup": "快速配置",
       "settings.models.field.model":      "Model",
       "settings.models.field.baseurl":    "Base URL",

data/lib/clacky/web/index.html

@@ -771,6 +771,17 @@
             </div>
             <div id="model-cards"></div>
           </section>
+
+          <!-- Media generation section -->
+          <section class="settings-section" id="media-section">
+            <div class="settings-section-title">
+              <span data-i18n="settings.media.title">Media Generation</span>
+            </div>
+            <div class="settings-section-desc" data-i18n="settings.media.desc">
+              Generate images, video, and audio using your configured providers. "Auto" follows your default chat model.
+            </div>
+            <div id="media-rows"></div>
+          </section>
         </div>
 
         <!-- ══ Tab: UI ══ -->
@@ -1052,8 +1063,8 @@
           <div id="model-modal-test-result" class="model-test-result"></div>
 
           <label class="model-field model-field-checkbox" id="model-modal-default-field">
-            <input type="checkbox" id="model-modal-set-default">
-            <span data-i18n="settings.models.field.setDefault">Set as default model</span>
+            <input type="checkbox" id="model-modal-set-default" class="field-checkbox">
+            <span class="field-label" data-i18n="settings.models.field.setDefault">Set as default model</span>
           </label>
         </div>
         <div class="modal-footer">
@@ -1288,6 +1299,7 @@
 <script src="/skills.js"></script>
 <script src="/channels.js"></script>
 <script src="/mcp.js"></script>
+<script src="/model-tester.js"></script>
 <script src="/settings.js"></script>
 <script src="/billing.js"></script>
 <script src="/onboard.js"></script>

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;