@goodandready/dsh-clinebot 0.4.0 → 0.4.2

package/lib/client.js

@@ -14,12 +14,16 @@ const NS = 'dsh-clinebot'
 const ROW_ID = 'dsh-clinebot'
 const ROW_CONFIG_KEY = '@goodandready/dsh-clinebot#' + ROW_ID
 const ROUTE_PREFIX = '/dsh-clinebot'
-const SNAPSHOT_LOADING = Object.freeze({ status: 'loading', view: null })
 // Stable (frozen) fallback reference: useSyncExternalStore compares snapshots by
 // identity (Object.is), so returning a fresh object literal causes an infinite render loop
 // (React error #185 "Maximum update depth exceeded"). Keep this module-level.
 const SNAPSHOT_READY = Object.freeze({ status: 'ready', view: null })
 
+function readConfigForms(ctx) {
+  if (!ctx || typeof ctx.get !== 'function') return undefined
+  try { return ctx.get('configForms') || undefined } catch { return undefined }
+}
+
 // --- src/client/locales.js ---
 const en = {
       title: 'ClineBot',
@@ -60,6 +64,14 @@ const en = {
       'accounts.add_btn': '+ Add Account',
       'accounts.label_placeholder': 'Account Label (e.g. Work)',
       'accounts.env_placeholder': 'CLINEBOT_API_KEY_2',
+      'accounts.delete_btn': 'Delete',
+      'accounts.delete_confirm': 'Are you sure you want to delete account "{label}"?',
+      'accounts.delete_secret': 'Delete secret from credentials',
+      'accounts.save_btn': 'Save Account',
+      'accounts.cancel_btn': 'Cancel',
+      'accounts.key_label': 'API Key',
+      'accounts.quota_used': '{pct}% used',
+      'accounts.last_failover': 'Last failover: {from} → {to} ({reason})',
       'quota.title': '📊 ClinePass Quota & Rate Limits',
       'quota.desc': 'Official rolling window request limits from ClinePass',
       'quota.account': 'Account: {email} · Plan: {plan}',
@@ -80,6 +92,12 @@ const en = {
       'models.verified': 'Verified with plan',
       'models.unverified': 'Not synced (fallback catalog)',
       'models.synced_at': 'Synced: {date}',
+      'models.search_placeholder': 'Search models by name, ID or description…',
+      'models.filter_all': 'All',
+      'models.filter_vision': 'Vision',
+      'models.filter_coding': 'Coding',
+      'models.filter_recommended': 'Recommended',
+      'models.filter_disabled': 'Disabled',
       'models.all': 'All',
       'models.vision': 'Vision Only',
       'models.coding': 'Coding Only',
@@ -156,6 +174,14 @@ const en = {
       'accounts.add_btn': '+ 添加账号',
       'accounts.label_placeholder': '账号标签（例如：工作账号）',
       'accounts.env_placeholder': 'CLINEBOT_API_KEY_2',
+      'accounts.delete_btn': '删除',
+      'accounts.delete_confirm': '确定要删除账号“{label}”吗？',
+      'accounts.delete_secret': '同时删除凭据密钥',
+      'accounts.save_btn': '保存账号',
+      'accounts.cancel_btn': '取消',
+      'accounts.key_label': 'API 密钥',
+      'accounts.quota_used': '已用 {pct}%',
+      'accounts.last_failover': '最近故障转移：{from} → {to} ({reason})',
       'quota.title': '📊 ClinePass 用量配额与限额监控',
       'quota.desc': '来自 ClinePass 官方的实时滚动窗口用量限额',
       'quota.account': '账号：{email} · 套餐：{plan}',
@@ -176,6 +202,12 @@ const en = {
       'models.verified': '已与套餐同步',
       'models.unverified': '未同步（备用目录）',
       'models.synced_at': '同步时间：{date}',
+      'models.search_placeholder': '按名称、ID 或描述搜索模型…',
+      'models.filter_all': '全部',
+      'models.filter_vision': '仅视觉',
+      'models.filter_coding': '仅编程',
+      'models.filter_recommended': '推荐',
+      'models.filter_disabled': '已禁用',
       'models.all': '全部模型',
       'models.vision': '仅视觉 (Vision)',
       'models.coding': '仅编程 (Coding)',
@@ -574,13 +606,162 @@ function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowK
 }
 
 // --- src/client/components/accounts-section.js ---
-function AccountsSection({ status, busy, handlePinAccount, t }) {
+function AccountsSection({ status, busy, handlePinAccount, handleAddAccount, handleDeleteAccount, t }) {
   if (!status.accounts || !status.accounts.length) return null
+
+  const [showAdd, setShowAdd] = React.useState(false)
+  const [newLabel, setNewLabel] = React.useState('')
+  const [newEnv, setNewEnv] = React.useState('')
+  const [newKey, setNewKey] = React.useState('')
+  const [showKey, setShowKey] = React.useState(false)
+  const [deleteSecret, setDeleteSecret] = React.useState(true)
+
+  function handleOpenAdd() {
+    let max = 1
+    for (const a of (status.accounts || [])) {
+      const m = String(a.apiKeyEnv || '').match(/^CLINEBOT_API_KEY_(\d+)$/)
+      if (m) {
+        const n = parseInt(m[1], 10)
+        if (n >= max) max = n + 1
+      }
+    }
+    setNewEnv(`CLINEBOT_API_KEY_${max}`)
+    setShowAdd(true)
+  }
+
+  async function onSubmitAdd(e) {
+    if (e && e.preventDefault) e.preventDefault()
+    if (!newKey.trim()) return
+    if (typeof handleAddAccount === 'function') {
+      await handleAddAccount({
+        label: newLabel.trim() || newEnv.trim(),
+        apiKeyEnv: newEnv.trim(),
+        apiKey: newKey.trim(),
+      })
+    }
+    setNewLabel('')
+    setNewEnv('')
+    setNewKey('')
+    setShowAdd(false)
+  }
+
+  async function onDeleteAccount(envName) {
+    if (typeof window !== 'undefined' && typeof window.confirm === 'function') {
+      if (!window.confirm(t('accounts.delete_confirm', { label: envName }))) return
+    }
+    if (typeof handleDeleteAccount === 'function') {
+      await handleDeleteAccount(envName, deleteSecret)
+    }
+  }
+
   return React.createElement(
     'div',
     { className: 'cb-section-card' },
-    React.createElement('div', { className: 'cb-section-title' }, t('accounts.title')),
+    React.createElement(
+      'div',
+      { className: 'cb-section-title', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+      React.createElement('span', null, t('accounts.title')),
+      !showAdd
+        ? React.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'cb-btn',
+              style: { fontSize: '11px', padding: '4px 10px' },
+              onClick: handleOpenAdd,
+              disabled: !!busy,
+            },
+            t('accounts.add_btn')
+          )
+        : null
+    ),
     React.createElement('div', { className: 'cb-section-desc' }, t('accounts.desc')),
+
+    showAdd
+      ? React.createElement(
+          'form',
+          {
+            onSubmit: onSubmitAdd,
+            style: {
+              background: 'var(--dsw-alias-bg-hover, rgba(0,0,0,0.04))',
+              border: '1px solid var(--dsw-alias-border, rgba(0,0,0,0.12))',
+              borderRadius: '8px',
+              padding: '12px',
+              marginBottom: '14px',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '8px',
+            },
+          },
+          React.createElement(
+            'div',
+            { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
+            React.createElement('input', {
+              type: 'text',
+              className: 'cb-input',
+              style: { flex: '1 1 180px' },
+              placeholder: t('accounts.label_placeholder'),
+              value: newLabel,
+              onChange: (e) => setNewLabel(e.target.value),
+            }),
+            React.createElement('input', {
+              type: 'text',
+              className: 'cb-input',
+              style: { flex: '1 1 180px' },
+              placeholder: t('accounts.env_placeholder'),
+              value: newEnv,
+              onChange: (e) => setNewEnv(e.target.value),
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+            React.createElement('input', {
+              type: showKey ? 'text' : 'password',
+              className: 'cb-input',
+              style: { flex: '1' },
+              placeholder: t('key.placeholder_empty'),
+              value: newKey,
+              onChange: (e) => setNewKey(e.target.value),
+            }),
+            React.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'cb-btn',
+                style: { padding: '4px 8px', fontSize: '11px' },
+                onClick: () => setShowKey(!showKey),
+              },
+              showKey ? t('key.hide') : t('key.show')
+            )
+          ),
+          React.createElement(
+            'div',
+            { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '4px' } },
+            React.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'cb-btn',
+                style: { padding: '4px 10px', fontSize: '12px' },
+                onClick: () => setShowAdd(false),
+              },
+              t('accounts.cancel_btn')
+            ),
+            React.createElement(
+              'button',
+              {
+                type: 'submit',
+                className: 'cb-btn cb-btn-primary',
+                style: { padding: '4px 12px', fontSize: '12px' },
+                disabled: !newKey.trim() || !!busy,
+              },
+              busy === 'add-account' ? t('key.saving') : t('accounts.save_btn')
+            )
+          )
+        )
+      : null,
+
     React.createElement(
       'table',
       { className: 'cb-table' },
@@ -603,9 +784,10 @@ function AccountsSection({ status, busy, handlePinAccount, t }) {
           const envName = typeof acc.apiKeyEnv === 'string' ? acc.apiKeyEnv : ''
           const label = typeof acc.label === 'string' ? acc.label : ''
           const isActive = status.activeAccount === envName || (!status.activeAccount && acc.id === 'default')
+          const isPrimary = acc.id === 'default' || envName === status.config?.apiKeyEnv
           return React.createElement(
             'tr',
-            { key: acc.id },
+            { key: acc.id || envName },
             React.createElement('td', null, React.createElement('strong', null, label)),
             React.createElement('td', null, React.createElement('code', null, envName)),
             React.createElement(
@@ -616,6 +798,12 @@ function AccountsSection({ status, busy, handlePinAccount, t }) {
                 : React.createElement('span', { className: 'cb-badge cb-badge-warn' }, 'Missing Key'),
               isActive
                 ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: '6px' } }, t('accounts.active_badge'))
+                : null,
+              acc.isPinned && !isActive
+                ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '6px', opacity: 0.85 } }, t('accounts.pinned_badge'))
+                : null,
+              typeof acc.percentUsed === 'number'
+                ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '6px' } }, t('accounts.quota_used', { pct: acc.percentUsed }))
                 : null
             ),
             React.createElement(
@@ -633,6 +821,19 @@ function AccountsSection({ status, busy, handlePinAccount, t }) {
                     },
                     t('accounts.pin_btn')
                   )
+                : null,
+              !isPrimary
+                ? React.createElement(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'cb-btn cb-btn-danger',
+                      style: { padding: '4px 8px', fontSize: '11px', marginLeft: '6px' },
+                      disabled: !!busy,
+                      onClick: () => onDeleteAccount(envName),
+                    },
+                    t('accounts.delete_btn')
+                  )
                 : null
             )
           )
@@ -643,7 +844,11 @@ function AccountsSection({ status, busy, handlePinAccount, t }) {
       ? React.createElement(
           'div',
           { className: 'cb-rotation-info', style: { marginTop: '10px', fontSize: '12px', opacity: 0.85 } },
-          `Last failover: ${status.lastRotation.from} → ${status.lastRotation.to} (${status.lastRotation.reason})`
+          t('accounts.last_failover', {
+            from: status.lastRotation.from,
+            to: status.lastRotation.to,
+            reason: status.lastRotation.reason,
+          })
         )
       : null
   )
@@ -738,6 +943,29 @@ function ModelsSection({
   t,
 }) {
   const syncDateStr = planSyncedAt ? new Date(planSyncedAt).toLocaleDateString() : ''
+  const [search, setSearch] = React.useState('')
+  const [viewFilter, setViewFilter] = React.useState('all')
+
+  const filteredModels = modelsList.filter((m) => {
+    if (viewFilter === 'vision') {
+      const hasVision = Boolean(m.input?.includes('image') || m.input?.includes('vision'))
+      if (!hasVision) return false
+    } else if (viewFilter === 'coding') {
+      if (m.category !== 'coding') return false
+    } else if (viewFilter === 'recommended') {
+      if (!m.recommended) return false
+    } else if (viewFilter === 'disabled') {
+      if (!disabledSet.has(m.id)) return false
+    }
+    if (search.trim()) {
+      const q = search.trim().toLowerCase()
+      const name = String(m.name || '').toLowerCase()
+      const id = String(m.id || '').toLowerCase()
+      const desc = String(m.description || '').toLowerCase()
+      if (!name.includes(q) && !id.includes(q) && !desc.includes(q)) return false
+    }
+    return true
+  })
 
   return React.createElement(
     'div',
@@ -777,6 +1005,83 @@ function ModelsSection({
       )
     ),
     React.createElement('div', { className: 'cb-section-desc' }, t('models.desc')),
+
+    // Search and display filter bar
+    React.createElement(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          gap: '8px',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          marginBottom: '12px',
+        },
+      },
+      React.createElement('input', {
+        type: 'text',
+        className: 'cb-input',
+        style: { flex: '1 1 200px' },
+        placeholder: t('models.search_placeholder'),
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+      }),
+      React.createElement(
+        'div',
+        { className: 'cb-row', style: { gap: '4px' } },
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: `cb-btn ${viewFilter === 'all' ? 'cb-btn-active' : ''}`,
+            style: { padding: '4px 8px', fontSize: '11px' },
+            onClick: () => setViewFilter('all'),
+          },
+          t('models.filter_all')
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: `cb-btn ${viewFilter === 'vision' ? 'cb-btn-active' : ''}`,
+            style: { padding: '4px 8px', fontSize: '11px' },
+            onClick: () => setViewFilter('vision'),
+          },
+          t('models.filter_vision')
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: `cb-btn ${viewFilter === 'coding' ? 'cb-btn-active' : ''}`,
+            style: { padding: '4px 8px', fontSize: '11px' },
+            onClick: () => setViewFilter('coding'),
+          },
+          t('models.filter_coding')
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: `cb-btn ${viewFilter === 'recommended' ? 'cb-btn-active' : ''}`,
+            style: { padding: '4px 8px', fontSize: '11px' },
+            onClick: () => setViewFilter('recommended'),
+          },
+          t('models.filter_recommended')
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: `cb-btn ${viewFilter === 'disabled' ? 'cb-btn-active' : ''}`,
+            style: { padding: '4px 8px', fontSize: '11px' },
+            onClick: () => setViewFilter('disabled'),
+          },
+          t('models.filter_disabled')
+        )
+      )
+    ),
+
     React.createElement(
       'table',
       { className: 'cb-table' },
@@ -796,7 +1101,7 @@ function ModelsSection({
       React.createElement(
         'tbody',
         null,
-        modelsList.map((m) => {
+        filteredModels.map((m) => {
           const isEnabled = !disabledSet.has(m.id)
           return React.createElement(
             'tr',
@@ -949,58 +1254,23 @@ Response: ${smokeResult.preview || '(empty)'}`
 }
 
 // --- src/client/settings-page.js ---
-function readConfigForms(ctx) {
-  if (!ctx || typeof ctx.get !== 'function') return undefined
-  try {
-    return ctx.get('configForms') || undefined
-  } catch (err) {
-    console.warn('[dsh-clinebot] configForms is not available:', err)
-    return undefined
-  }
-}
-
-function SettingsPage(props) {
-  const ctx = props?.ctx
-  const t = props?.t || makeT(en, en)
-
+function useConfigFormsSnapshot(ctx) {
   const scope = React.useMemo(() => {
-    const svc = readConfigForms(ctx)
-    if (!svc || typeof svc.get !== 'function') return undefined
-    try {
-      return svc.get(NS)
-    } catch (err) {
-      console.warn('[dsh-clinebot] configForms.get failed:', err)
-      return undefined
-    }
+    try { return readConfigForms(ctx)?.get?.(NS) || undefined } catch { return undefined }
   }, [ctx])
-
-  const subscribe = React.useMemo(() => {
-    return (cb) => {
-      if (!scope?.subscribe) return () => {}
-      try {
-        return scope.subscribe(cb) || (() => {})
-      } catch (_) {
-        return () => {}
-      }
-    }
+  const subscribe = React.useMemo(() => (cb) => {
+    try { return scope?.subscribe ? (scope.subscribe(cb) || (() => {})) : () => {} } catch { return () => {} }
   }, [scope])
-
   const getSnapshot = React.useCallback(() => {
-    if (!scope?.getSnapshot) return SNAPSHOT_READY
-    try {
-      return scope.getSnapshot() || SNAPSHOT_READY
-    } catch (err) {
-      console.warn('[dsh-clinebot] settings snapshot failed:', err)
-      return SNAPSHOT_READY
-    }
+    try { return scope?.getSnapshot?.() || SNAPSHOT_READY } catch { return SNAPSHOT_READY }
   }, [scope])
+  return React.useSyncExternalStore(subscribe, getSnapshot, () => SNAPSHOT_READY)?.status || 'loading'
+}
 
-  const snapshot = React.useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    React.useCallback(() => SNAPSHOT_READY, [])
-  )
-  const snapshotStatus = snapshot?.status || 'loading'
+function SettingsPage(props) {
+  const ctx = props?.ctx
+  const t = props?.t || makeT(en, en)
+  const snapshotStatus = useConfigFormsSnapshot(ctx)
 
   const [status, setStatus] = React.useState(null)
   const [draft, setDraft] = React.useState(null)
@@ -1009,7 +1279,6 @@ function SettingsPage(props) {
   const [msg, setMsg] = React.useState('')
   const [smokeResult, setSmokeResult] = React.useState(null)
 
-  // Plugin in-app updater state
   const [updateState, setUpdateState] = React.useState({
     checking: false,
     updating: false,
@@ -1021,13 +1290,10 @@ function SettingsPage(props) {
     notice: '',
   })
 
-  // Key input state
   const [apiKeyInput, setApiKeyInput] = React.useState('')
   const [showKey, setShowKey] = React.useState(false)
 
-  React.useEffect(() => {
-    ensureCss()
-  }, [])
+  React.useEffect(() => { ensureCss() }, [])
 
   const load = React.useCallback(async () => {
     setErr('')
@@ -1061,9 +1327,7 @@ function SettingsPage(props) {
     }
   }, [])
 
-  React.useEffect(() => {
-    checkUpdate()
-  }, [checkUpdate])
+  React.useEffect(() => { checkUpdate() }, [checkUpdate])
 
   async function handleTriggerUpdate() {
     if (updateState.updating) return
@@ -1074,9 +1338,7 @@ function SettingsPage(props) {
         headers: { 'x-dsh-plugin-update': '1' },
       })
       const data = await res.json().catch(() => ({}))
-      if (!res.ok || data.ok === false || data.error) {
-        throw new Error(data.error || `HTTP ${res.status}`)
-      }
+      if (!res.ok || data.ok === false || data.error) throw new Error(data.error || `HTTP ${res.status}`)
       const newVer = data.updatedVersion || updateState.latestVersion || updateState.currentVersion
       setUpdateState((s) => ({
         ...s,
@@ -1087,24 +1349,27 @@ function SettingsPage(props) {
       }))
       setTimeout(() => checkUpdate(), 2000)
     } catch (err) {
-      setUpdateState((s) => ({
-        ...s,
-        updating: false,
-        error: t('update.failed', { error: String(err.message || err) }),
-      }))
+      setUpdateState((s) => ({ ...s, updating: false, error: t('update.failed', { error: String(err.message || err) }) }))
     }
   }
 
-  async function handleSaveKey() {
-    const keyVal = String(apiKeyInput || '').trim()
-    if (!keyVal) {
-      setErr(t('key.empty_err'))
-      return
-    }
-    setBusy('save-key')
+  async function performAction(busyKey, fn) {
+    setBusy(busyKey)
     setErr('')
     setMsg('')
     try {
+      await fn()
+    } catch (e) {
+      setErr(String(e.message || e))
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handleSaveKey() {
+    const keyVal = String(apiKeyInput || '').trim()
+    if (!keyVal) { setErr(t('key.empty_err')); return }
+    await performAction('save-key', async () => {
       const res = await fetch(`${ROUTE_PREFIX}/save-key`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -1115,87 +1380,53 @@ function SettingsPage(props) {
       setApiKeyInput('')
       setMsg(t('key.saved_msg', { status: data.validated ? 'OK' : 'Notice (check console)' }))
       await load()
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
-    }
+    })
   }
 
   async function handleRefreshQuota() {
-    setBusy('refresh-quota')
-    setErr('')
-    setMsg('')
-    try {
+    await performAction('refresh-quota', async () => {
       const res = await fetch(`${ROUTE_PREFIX}/usage`)
       const data = await res.json().catch(() => ({}))
       if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
       setStatus((prev) => (prev ? { ...prev, usage: data } : prev))
       setMsg(t('quota.refreshed_msg'))
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
-    }
+    })
   }
 
   async function handleSyncPlanModels() {
-    setBusy('sync-models')
-    setErr('')
-    setMsg('')
-    try {
+    await performAction('sync-models', async () => {
       const res = await fetch(`${ROUTE_PREFIX}/models/sync`, { method: 'POST' })
       const data = await res.json().catch(() => ({}))
       if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
       setMsg(t('models.synced_msg', { total: data.totalModelsCount, discovered: data.discoveredCount }))
       await load()
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
-    }
+    })
   }
 
   async function handleRegister() {
-    setBusy('register')
-    setErr('')
-    setMsg('')
-    try {
+    await performAction('register', async () => {
       const res = await fetch(`${ROUTE_PREFIX}/register`, { method: 'POST' })
       const data = await res.json().catch(() => ({}))
       if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
       const count = status?.availableModels?.filter((m) => !(draft?.disabledModels || []).includes(m.id)).length || 0
       setMsg(t('diag.resynced_msg', { count }))
       await load()
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
-    }
+    })
   }
 
   async function handleUnregister() {
-    setBusy('unregister')
-    setErr('')
-    setMsg('')
-    try {
+    await performAction('unregister', async () => {
       const res = await fetch(`${ROUTE_PREFIX}/unregister`, { method: 'POST' })
       const data = await res.json().catch(() => ({}))
       if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
       setMsg(t('diag.unregistered_msg'))
       await load()
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
-    }
+    })
   }
 
   async function handleSmoke() {
-    setBusy('smoke')
-    setErr('')
     setSmokeResult(null)
-    try {
+    await performAction('smoke', async () => {
       const res = await fetch(`${ROUTE_PREFIX}/smoke`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -1204,11 +1435,7 @@ function SettingsPage(props) {
       const data = await res.json().catch(() => ({}))
       if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
       setSmokeResult(data)
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
-    }
+    })
   }
 
   const [verifyStatus, setVerifyStatus] = React.useState({ state: 'idle', email: '', plan: '', error: '' })
@@ -1249,9 +1476,7 @@ function SettingsPage(props) {
   }
 
   async function handlePinAccount(accountEnv) {
-    setBusy('pin-account')
-    setErr('')
-    try {
+    await performAction('pin-account', async () => {
       const res = await fetch(`${ROUTE_PREFIX}/accounts/active`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -1260,25 +1485,65 @@ function SettingsPage(props) {
       const data = await res.json().catch(() => ({}))
       if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
       await load()
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
-    }
+    })
+  }
+
+  async function handleAddAccount({ label, apiKeyEnv, apiKey }) {
+    await performAction('add-account', async () => {
+      const res = await fetch(`${ROUTE_PREFIX}/accounts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ label, apiKeyEnv, apiKey }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      setMsg(t('key.saved_msg', { status: data.validated ? 'OK' : (data.validationError || 'Notice') }))
+      await load()
+    })
+  }
+
+  async function handleDeleteAccount(accountEnv, deleteSecret = true) {
+    await performAction('delete-account', async () => {
+      const res = await fetch(`${ROUTE_PREFIX}/accounts/delete`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKeyEnv: accountEnv, deleteSecret }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      await load()
+    })
   }
 
   const debounceTimerRef = typeof React.useRef === 'function' ? React.useRef(null) : { current: null }
-  function debounceSaveDisabledModels(nextDisabled) {
+
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+    }
+  }, [])
+
+  function debounceSaveDisabledModels(nextDisabled, previousDisabled) {
     if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
     debounceTimerRef.current = setTimeout(async () => {
       try {
-        await fetch(`${ROUTE_PREFIX}/models/toggle`, {
+        const res = await fetch(`${ROUTE_PREFIX}/models/toggle`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ disabledModels: nextDisabled }),
         })
+        const data = await res.json().catch(() => ({}))
+        if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+        await load()
       } catch (err) {
         console.warn('[dsh-clinebot] Failed saving disabled models:', err)
+        setErr(String(err?.message || err))
+        setDraft((prev) => {
+          if (!prev) return prev
+          const all = status?.availableModels || []
+          const prevEnabled = all.map((m) => m.id).filter((mId) => !previousDisabled.includes(mId))
+          return { ...prev, disabledModels: previousDisabled, enabledModels: prevEnabled }
+        })
       }
     }, 400)
   }
@@ -1290,7 +1555,7 @@ function SettingsPage(props) {
     const all = status?.availableModels || []
     const enabledIds = all.map((m) => m.id).filter((mId) => !next.includes(mId))
     setDraft({ ...draft, disabledModels: next, enabledModels: enabledIds })
-    debounceSaveDisabledModels(next)
+    debounceSaveDisabledModels(next, curr)
   }
 
   function handleSetModelsFilter(type) {
@@ -1306,10 +1571,11 @@ function SettingsPage(props) {
       allowed = new Set(all.filter((m) => m.recommended).map((m) => m.id))
     }
 
+    const curr = draft?.disabledModels || []
     const nextDisabled = all.map((m) => m.id).filter((id) => !allowed.has(id))
     const nextEnabled = Array.from(allowed)
     setDraft({ ...draft, disabledModels: nextDisabled, enabledModels: nextEnabled })
-    debounceSaveDisabledModels(nextDisabled)
+    debounceSaveDisabledModels(nextDisabled, curr)
   }
 
   if (!status || !draft) {
@@ -1378,6 +1644,11 @@ function SettingsPage(props) {
     // In-app Update Bar
     React.createElement(UpdateBanner, { updateState, handleTriggerUpdate, t }),
 
+    // Settings host status warning
+    snapshotStatus === 'unavailable'
+      ? React.createElement('div', { className: 'cb-alert-bad', style: { marginBottom: '12px' } }, t('settings.unavailable'))
+      : null,
+
     // Notifications
     err ? React.createElement('div', { className: 'cb-alert-bad' }, err) : null,
     msg ? React.createElement('div', { className: 'cb-alert-ok' }, msg) : null,
@@ -1398,7 +1669,14 @@ function SettingsPage(props) {
     }),
 
     // Accounts Pool Card
-    React.createElement(AccountsSection, { status, busy, handlePinAccount, t }),
+    React.createElement(AccountsSection, {
+      status,
+      busy,
+      handlePinAccount,
+      handleAddAccount,
+      handleDeleteAccount,
+      t,
+    }),
 
     // Quota Warning & Dashboard Card
     React.createElement(QuotaSection, { keyPresent, status, usage, busy, handleRefreshQuota, t }),