openclacky 1.2.8 → 1.2.10

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;
@@ -4104,6 +4108,175 @@ a.btn-card-grid-action {
   border-color: var(--color-border-secondary);
 }
 
+/* ── Directory Picker Modal (tree-based) ─────────────────────────────────── */
+.modal-title {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--color-border-primary);
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.modal-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--color-border-primary);
+}
+.dir-picker-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  font-family: var(--font-mono, monospace);
+  transition: border-color 0.15s;
+  box-sizing: border-box;
+}.dir-picker-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+.dir-picker-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+/* Preset buttons row */
+.dp-presets {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.dp-presets .btn-sm {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+}
+/* Path input container */
+.dp-path-container {
+  flex-shrink: 0;
+  position: relative;
+}/* Autocomplete dropdown */
+.dp-autocomplete {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+.dp-ac-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  color: var(--color-text-primary);
+  transition: background 0.1s;
+}
+.dp-ac-item:hover,
+.dp-ac-item.active {
+  background: var(--color-bg-hover);
+}
+.dp-ac-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+.dp-ac-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Tree container */
+.dp-tree {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  background: var(--color-bg-secondary);
+  min-height: 200px;
+  max-height: 340px;
+  overflow: auto;
+  font-size: 0.8125rem;
+}
+/* Tree node */
+.dp-node {
+  user-select: none;
+}
+.dp-row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.1s;
+}
+.dp-row:hover {
+  background: var(--color-bg-hover);
+}
+.dp-row.selected {
+  background: var(--color-accent-subtle, rgba(59, 130, 246, 0.12));
+}
+.dp-row.selected .dp-name {
+  color: var(--color-accent);
+  font-weight: 500;
+}
+/* Caret */
+.dp-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  transition: transform 0.15s;
+}
+.dp-caret.open {
+  transform: rotate(90deg);
+}
+/* Folder icon */
+.dp-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+.dp-row.selected .dp-icon {
+  color: var(--color-accent);
+}
+/* Name */
+.dp-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+}
+/* Children container */
+.dp-children {
+  display: flex;
+  flex-direction: column;
+}/* Loading / empty / error states */
+.dp-loading,
+.dp-empty,
+.dp-error {
+  padding: 0.5rem 1rem;
+  color: var(--color-text-tertiary);
+  font-size: 0.75rem;
+  font-style: italic;
+}
+.dp-error {
+  color: var(--color-text-danger, #ef4444);
+}
 /* Model name combobox */
 .model-name-combobox {
   position: relative;
@@ -9065,11 +9238,14 @@ body.setup-mode[data-theme="dark"] {
 .tooltip-date {
   font-weight: 600;
   color: var(--color-text-primary);
+  white-space: nowrap;
 }
-.tooltip-total {
+.tooltip-total-value {
   font-size: 0.875rem;
   color: var(--color-accent);
-  font-weight: 500;
+  font-weight: 600;
+  white-space: nowrap;
+  margin-left: 0.75rem;
 }
 .tooltip-row {
   display: flex;
@@ -9567,6 +9743,53 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-text-secondary);
   font-weight: 500;
 }
+.settings-exchange-rate-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 34px;
+  padding: 0.45rem 0.8rem;
+  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 28%, var(--color-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-secondary));
+  color: var(--color-accent-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+.settings-exchange-rate-refresh svg {
+  flex: 0 0 auto;
+}
+.settings-exchange-rate-refresh:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 52%, var(--color-border));
+  background: color-mix(in srgb, var(--color-accent-primary) 12%, var(--color-bg-secondary));
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent-primary) 16%, transparent);
+  transform: translateY(-1px);
+}
+.settings-exchange-rate-refresh:active:not(:disabled) {
+  transform: translateY(0);
+}
+.settings-exchange-rate-refresh:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+.settings-exchange-rate-status {
+  min-height: 1.1rem;
+  margin-top: 0.4rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+}
+.settings-exchange-rate-status.success {
+  color: var(--color-success, #2e7d32);
+}
+.settings-exchange-rate-status.error {
+  color: var(--color-error, #d33);
+}
 
 /* ── Sessions List ───────────────────────────────────────────────────── */
 .billing-sessions-row {
@@ -9710,4 +9933,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/billing.js

@@ -226,7 +226,7 @@ const Billing = (() => {
       tooltip.innerHTML = `
         <div class="tooltip-header">
           <span class="tooltip-date">${date}</span>
-          <span class="tooltip-total">${total} tokens</span>
+          <span class="tooltip-total-value">${total} tokens</span>
         </div>
         <div class="tooltip-row">
           <span class="tooltip-dot tooltip-total"></span>

data/lib/clacky/web/i18n.js

@@ -80,8 +80,16 @@ const I18n = (() => {
       "sessions.actions.download":     "Download session files",
       "sessions.actions.downloadHint": "for debugging",
       "sib.dir.tooltip":         "Click to change directory",
-      "sib.dir.changePrompt":    "Change working directory:",
-      "workspace.title":         "Workspace",
+      "sib.dir.changePrompt":    "Change working directory",
+      "sib.dir.home":            "Home",
+      "sib.dir.root":            "Root",
+      "sib.dir.default":         "Default workspace",
+      "sib.dir.current":         "Current workspace",      "sib.dir.inputPlaceholder": "Type or select a directory path",
+      "sib.dir.loading":         "Loading…",
+      "sib.dir.empty":           "Empty directory",
+      "sib.dir.loadError":       "Failed to load",
+      "sib.dir.confirm":         "Confirm",
+      "sib.dir.cancel":          "Cancel",      "workspace.title":         "Workspace",
       "workspace.expand":        "Open workspace",
       "workspace.collapse":      "Collapse workspace",
       "workspace.refresh":       "Refresh",
@@ -490,6 +498,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",
@@ -595,6 +632,10 @@ const I18n = (() => {
       "settings.currency.usd":             "$ USD",
       "settings.currency.cny":             "¥ CNY",
       "settings.currency.exchangeRate":    "Exchange Rate (1 USD =)",
+      "settings.currency.updateLatest":    "Update latest",
+      "settings.currency.updating":        "Updating…",
+      "settings.currency.updated":         "Updated from {{source}} on {{date}}",
+      "settings.currency.updateFailed":    "Failed to fetch the latest rate. You can still enter it manually.",
 
       // ── Onboard ──
       "onboard.title":              "Welcome to {{brand}}",
@@ -771,8 +812,16 @@ const I18n = (() => {
       "sessions.actions.download":     "下载会话文件",
       "sessions.actions.downloadHint": "用于调试",
       "sib.dir.tooltip":         "点击切换工作目录",
-      "sib.dir.changePrompt":    "切换工作目录：",
-      "workspace.title":         "工作区",
+      "sib.dir.changePrompt":    "切换工作目录",
+      "sib.dir.home":            "主目录",
+      "sib.dir.root":            "根目录",
+      "sib.dir.default":         "默认工作目录",
+      "sib.dir.current":         "当前工作目录",      "sib.dir.inputPlaceholder": "输入或选择目录路径",
+      "sib.dir.loading":         "加载中…",
+      "sib.dir.empty":           "空目录",
+      "sib.dir.loadError":       "加载失败",
+      "sib.dir.confirm":         "确认",
+      "sib.dir.cancel":          "取消",      "workspace.title":         "工作区",
       "workspace.expand":        "打开工作区",
       "workspace.collapse":      "收起工作区",
       "workspace.refresh":       "刷新",
@@ -1180,6 +1229,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",
@@ -1285,6 +1363,10 @@ const I18n = (() => {
       "settings.currency.usd":             "$ 美元",
       "settings.currency.cny":             "¥ 人民币",
       "settings.currency.exchangeRate":    "汇率 (1 美元 =)",
+      "settings.currency.updateLatest":    "获取最新汇率",
+      "settings.currency.updating":        "获取中…",
+      "settings.currency.updated":         "已从 {{source}} 更新，日期 {{date}}",
+      "settings.currency.updateFailed":    "获取最新汇率失败，仍可手动输入。",
 
       // ── Onboard ──
       "onboard.title":              "欢迎使用 {{brand}}",

data/lib/clacky/web/index.html

@@ -384,7 +384,7 @@
         <div id="image-preview-strip" style="display:none"></div>
         <div id="input-bar">
           <!-- Hidden file picker -->
-          <input type="file" id="image-file-input" accept="image/png,image/jpeg,image/gif,image/webp,*/*" multiple style="display:none">
+          <input type="file" id="image-file-input" accept="*/*" multiple style="display:none">
           <button id="btn-attach" title="Attach file (image, pdf, docx, md, tar.gz…) — drag & drop / Ctrl+V also work">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.41a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
@@ -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 ══ -->
@@ -813,7 +824,15 @@
                 <div class="settings-exchange-rate-input-wrapper">
                   <input type="number" id="settings-exchange-rate" class="settings-exchange-rate-input" step="0.0001" min="0.0001" placeholder="6.7944">
                   <span class="settings-exchange-rate-unit">CNY</span>
+                  <button type="button" id="btn-update-exchange-rate" class="settings-exchange-rate-refresh">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/>
+                      <path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/>
+                    </svg>
+                    <span data-i18n="settings.currency.updateLatest">Update latest</span>
+                  </button>
                 </div>
+                <div id="settings-exchange-rate-status" class="settings-exchange-rate-status"></div>
               </label>
             </div>
           </section>
@@ -1052,8 +1071,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 +1307,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>