@goodandready/dsh-clinebot 0.3.25 → 0.4.1

package/lib/client.js

@@ -14,21 +14,25 @@ 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',
-      subtitle: 'ClinePass subscription ($9.99/mo) with curated & custom models.',
+      subtitle: 'ClinePass subscription with dynamic plan models.',
       'settings.loading': 'Loading ClineBot settings…',
       'settings.retry': 'Retry',
       'settings.unavailable': 'ClineBot settings unavailable (host namespace is not ready).',
       'header.title': 'ClineBot (ClinePass) Provider',
-      'header.sub': 'Connect models under ClinePass subscription ($9.99/mo). OpenAI API compatible, automated rolling limit tracking, and instant auto-registration in DSH.',
+      'header.sub': 'Connect models under your active ClinePass subscription. OpenAI API compatible, automated rolling limit tracking, and instant auto-registration in DSH.',
       'badge.online': 'Host online ({latency} ms)',
       'badge.offline': 'Host unreachable',
       'badge.key_ok': 'Key ✓ ({source})',
@@ -43,8 +47,11 @@ const en = {
       'key.hide': 'Hide',
       'key.save': 'Save Key',
       'key.saving': 'Saving…',
-      'key.login_fast': '🚀 Quick Web Login',
-      'key.login_waiting': 'Waiting for authorization in browser…',
+      'key.login_fast': '🔑 Open API Keys ↗',
+      'key.login_waiting': 'Paste key below for instant verification.',
+      'key.verifying': 'Validating key with Cline…',
+      'key.verified': '✓ Valid key for {email} ({plan})',
+      'key.invalid': '✗ Key validation failed: {error}',
       'key.env_label': 'Credential environment name: ',
       'key.get_key': 'Get key in app.cline.bot console ↗',
       'key.saved_msg': 'Key saved to DSH Credentials. Validation: {status}',
@@ -57,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}',
@@ -74,6 +89,15 @@ const en = {
       'models.sync': '🔄 Check Plan Models',
       'models.syncing': 'Checking…',
       'models.synced_msg': 'Synchronized subscription models: {total} ({discovered} discovered from ClinePass)',
+      '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',
@@ -113,12 +137,12 @@ const en = {
 
     const zh = {
       title: 'ClineBot',
-      subtitle: 'ClinePass 订阅服务 ($9.99/月)，包含精选与自定义模型。',
+      subtitle: 'ClinePass 订阅服务，包含动态套餐模型。',
       'settings.loading': '正在加载 ClineBot 设置…',
       'settings.retry': '重试',
       'settings.unavailable': 'ClineBot 设置不可用（宿主命名空间尚未就绪）。',
       'header.title': 'ClineBot (ClinePass) 模型服务商',
-      'header.sub': '通过 ClinePass 订阅 ($9.99/月) 连接主流推理与编程模型。完全兼容 OpenAI 接口，自动追踪滚动限额并在 DSH 中即时生效。',
+      'header.sub': '通过 ClinePass 订阅连接主流推理与编程模型。完全兼容 OpenAI 接口，自动追踪滚动限额并在 DSH 中即时生效。',
       'badge.online': '服务在线 ({latency} ms)',
       'badge.offline': '主机无法连接',
       'badge.key_ok': '密钥正常 ({source})',
@@ -133,8 +157,11 @@ const en = {
       'key.hide': '隐藏',
       'key.save': '保存密钥',
       'key.saving': '正在保存…',
-      'key.login_fast': '🚀 浏览器快速登录',
-      'key.login_waiting': '等待在浏览器中完成授权…',
+      'key.login_fast': '🔑 打开 API 密钥页 ↗',
+      'key.login_waiting': '请在下方粘贴密钥，系统将自动进行有效性校验。',
+      'key.verifying': '正在连接 Cline 验证密钥…',
+      'key.verified': '✓ 密钥有效：{email} ({plan})',
+      'key.invalid': '✗ 密钥验证未通过：{error}',
       'key.env_label': '凭据环境变量名称：',
       'key.get_key': '前往 app.cline.bot 控制台获取密钥 ↗',
       'key.saved_msg': '密钥已成功保存至 DSH 凭据服务。验证状态：{status}',
@@ -147,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}',
@@ -164,6 +199,15 @@ const en = {
       'models.sync': '🔄 同步订阅模型',
       'models.syncing': '正在同步…',
       'models.synced_msg': '已成功同步订阅模型：共 {total} 个（发现 {discovered} 个新模型）',
+      '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)',
@@ -275,11 +319,14 @@ function ensureCss() {
 .cb-btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent) !important;border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 50%, transparent)}
 .cb-btn-disabled{opacity:0.5;cursor:not-allowed}
 
-.cb-bar-container{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2)}
-.cb-bar-head{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
-.cb-bar-track{width:100%;height:10px;border-radius:999px;background:var(--dsw-alias-bg-layer-1);overflow:hidden;border:1px solid var(--dsw-alias-border-l2)}
-.cb-bar-fill{height:100%;border-radius:999px;transition:width .3s}
-.cb-bar-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--dsw-alias-label-secondary)}
+.cb-progress-card, .cb-bar-container{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2)}
+.cb-progress-head, .cb-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary);width:100%}
+.cb-progress-label{font-weight:500;white-space:nowrap}
+.cb-progress-meta, .cb-bar-meta{font-size:12px;color:var(--dsw-alias-label-secondary);white-space:nowrap;margin-left:auto}
+.cb-progress-track, .cb-bar-track{width:100%;height:8px;border-radius:999px;background:var(--dsw-alias-bg-layer-1);overflow:hidden;border:1px solid var(--dsw-alias-border-l2)}
+.cb-progress-bar-fill, .cb-bar-fill{height:100%;border-radius:999px;transition:width .3s;background:var(--dsw-alias-state-brand-primary, var(--dsw-alias-state-success-primary))}
+.cb-progress-bar-warn{height:100%;border-radius:999px;transition:width .3s;background:var(--dsw-alias-state-warning-primary)}
+.cb-progress-bar-bad{height:100%;border-radius:999px;transition:width .3s;background:var(--dsw-alias-state-error-primary)}
 
 .cb-table{width:100%;border-collapse:collapse;margin-top:8px}
 .cb-table th{text-align:left;font-size:12px;color:var(--dsw-alias-label-secondary);padding:8px 10px;border-bottom:1px solid var(--dsw-alias-border-l2);font-weight:600}
@@ -365,24 +412,62 @@ function ProgressBar({ label, percentUsed, remainingPercent, resetsAt, t }) {
 
   return React.createElement(
     'div',
-    { className: 'cb-progress-card' },
+    {
+      className: 'cb-progress-card cb-bar-container',
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        padding: '12px 14px',
+        borderRadius: '8px',
+        border: '1px solid var(--dsw-alias-border-l2)',
+        background: 'var(--dsw-alias-bg-layer-2)',
+      },
+    },
     React.createElement(
       'div',
-      { className: 'cb-progress-head' },
-      React.createElement('span', { className: 'cb-progress-label' }, label),
+      {
+        className: 'cb-progress-head cb-bar-head',
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'baseline',
+          gap: '16px',
+          width: '100%',
+        },
+      },
+      React.createElement('span', { className: 'cb-progress-label', style: { fontWeight: 500, whiteSpace: 'nowrap' } }, label),
       React.createElement(
         'span',
-        { className: 'cb-progress-meta' },
+        {
+          className: 'cb-progress-meta cb-bar-meta',
+          style: {
+            fontSize: '12px',
+            color: 'var(--dsw-alias-label-secondary)',
+            whiteSpace: 'nowrap',
+            marginLeft: 'auto',
+          },
+        },
         t('quota.used', { pct }),
         resetLabel ? ` · ${t('quota.reset_at', { time: resetLabel })}` : ''
       )
     ),
     React.createElement(
       'div',
-      { className: 'cb-progress-track' },
+      {
+        className: 'cb-progress-track cb-bar-track',
+        style: {
+          width: '100%',
+          height: '8px',
+          borderRadius: '999px',
+          background: 'var(--dsw-alias-bg-layer-1)',
+          overflow: 'hidden',
+          border: '1px solid var(--dsw-alias-border-l2)',
+        },
+      },
       React.createElement('div', {
         className: barClass,
-        style: { width: `${pct}%` },
+        style: { width: `${pct}%`, height: '100%', borderRadius: '999px' },
       })
     )
   )
@@ -445,7 +530,7 @@ function UpdateBanner({ updateState, handleTriggerUpdate, t }) {
 }
 
 // --- src/client/components/key-section.js ---
-function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowKey, busy, draft, handleSaveKey, handleFastLogin, t }) {
+function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowKey, busy, draft, handleSaveKey, handleFastLogin, verifyStatus, t }) {
   return React.createElement(
     'div',
     { className: 'cb-section-card' },
@@ -488,19 +573,28 @@ function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowK
           disabled: !!busy,
           onClick: handleFastLogin,
         },
-        busy === 'fast-login' ? '…' : t('key.login_fast')
+        t('key.login_fast')
       )
     ),
+    verifyStatus && verifyStatus.state === 'verifying'
+      ? React.createElement('div', { style: { marginTop: '8px', fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('key.verifying'))
+      : null,
+    verifyStatus && verifyStatus.state === 'valid'
+      ? React.createElement('div', { className: 'cb-alert-ok', style: { marginTop: '8px', fontSize: '13px' } }, t('key.verified', { email: verifyStatus.email, plan: verifyStatus.plan }))
+      : null,
+    verifyStatus && verifyStatus.state === 'invalid'
+      ? React.createElement('div', { className: 'cb-alert-bad', style: { marginTop: '8px', fontSize: '13px' } }, t('key.invalid', { error: verifyStatus.error }))
+      : null,
     React.createElement(
       'div',
-      { className: 'cb-row', style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } },
+      { className: 'cb-row', style: { fontSize: '13px', marginTop: '12px', color: 'var(--dsw-alias-label-secondary)' } },
       React.createElement('span', null, t('key.env_label')),
       React.createElement('code', null, draft.apiKeyEnv || 'CLINEBOT_API_KEY'),
       React.createElement('span', null, ' · '),
       React.createElement(
         'a',
         {
-          href: 'https://app.cline.bot',
+          href: 'https://app.cline.bot/settings/api-keys',
           target: '_blank',
           rel: 'noreferrer',
           style: { color: 'var(--dsw-alias-state-brand-primary)' },
@@ -512,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' },
@@ -541,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(
@@ -554,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(
@@ -571,12 +821,36 @@ 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
             )
           )
         })
       )
-    )
+    ),
+    status.lastRotation
+      ? React.createElement(
+          'div',
+          { className: 'cb-rotation-info', style: { marginTop: '10px', fontSize: '12px', opacity: 0.85 } },
+          t('accounts.last_failover', {
+            from: status.lastRotation.from,
+            to: status.lastRotation.to,
+            reason: status.lastRotation.reason,
+          })
+        )
+      : null
   )
 }
 
@@ -627,7 +901,7 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }
             'div',
             { className: 'cb-section-desc' },
             usage?.user?.email
-              ? t('quota.account', { email: usage.user.email, plan: usage.plan || 'ClinePass ($9.99/mo)' })
+              ? t('quota.account', { email: usage.user.email, plan: usage.plan || 'ClinePass' })
               : t('quota.desc')
           ),
           React.createElement(
@@ -654,14 +928,63 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }
 }
 
 // --- src/client/components/models-section.js ---
-function ModelsSection({ modelsList, disabledSet, enabledCount, keyPresent, busy, handleSyncPlanModels, handleSetModelsFilter, handleToggleModel, t }) {
+function ModelsSection({
+  modelsList,
+  disabledSet,
+  enabledCount,
+  keyPresent,
+  busy,
+  handleSyncPlanModels,
+  handleSetModelsFilter,
+  handleToggleModel,
+  planSynced,
+  planSyncedAt,
+  defaultModelWarning,
+  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',
     { className: 'cb-section-card' },
+    defaultModelWarning
+      ? React.createElement('div', { className: 'cb-alert-bad', style: { marginBottom: '12px' } }, `⚠️ ${defaultModelWarning}`)
+      : null,
     React.createElement(
       'div',
       { className: 'cb-section-title' },
-      t('models.title', { enabled: enabledCount, total: modelsList.length }),
+      React.createElement(
+        'span',
+        null,
+        t('models.title', { enabled: enabledCount, total: modelsList.length }),
+        planSynced
+          ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: '8px', fontSize: '11px' } }, t('models.verified'))
+          : React.createElement('span', { className: 'cb-badge cb-badge-warn', style: { marginLeft: '8px', fontSize: '11px' } }, t('models.unverified')),
+        syncDateStr ? React.createElement('span', { style: { marginLeft: '8px', fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } }, t('models.synced_at', { date: syncDateStr })) : null
+      ),
       React.createElement(
         'div',
         { className: 'cb-row' },
@@ -682,6 +1005,83 @@ function ModelsSection({ modelsList, disabledSet, enabledCount, keyPresent, busy
       )
     ),
     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' },
@@ -701,7 +1101,7 @@ function ModelsSection({ modelsList, disabledSet, enabledCount, keyPresent, busy
       React.createElement(
         'tbody',
         null,
-        modelsList.map((m) => {
+        filteredModels.map((m) => {
           const isEnabled = !disabledSet.has(m.id)
           return React.createElement(
             'tr',
@@ -727,17 +1127,31 @@ function ModelsSection({ modelsList, disabledSet, enabledCount, keyPresent, busy
                 : null
             ),
             React.createElement('td', null, React.createElement('code', null, m.id)),
-            React.createElement('td', null, `${Math.round((m.contextLength || 200000) / 1000)}k`),
+            React.createElement('td', null, `${Math.round((m.contextLength || 128000) / 1000)}k`),
             React.createElement(
               'td',
               null,
-              React.createElement('span', { className: 'cb-badge' }, m.category || 'general'),
-              m.input?.includes('image') || m.input?.includes('vision')
-                ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '4px' } }, 'Vision')
-                : null,
-              (Array.isArray(m.reasoningEfforts) ? m.reasoningEfforts.length > 0 : (m.reasoningEfforts && typeof m.reasoningEfforts === 'object' ? Object.keys(m.reasoningEfforts).length > 0 : Boolean(m.reasoning)))
-                ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: '4px' }, title: t('models.reasoning_tooltip') }, '🧠 Reasoning')
-                : null
+              (() => {
+                const hasReasoning = Boolean(
+                  (Array.isArray(m.reasoningEfforts) && m.reasoningEfforts.length > 0) ||
+                  (m.reasoningEfforts && typeof m.reasoningEfforts === 'object' && Object.keys(m.reasoningEfforts).length > 0) ||
+                  m.reasoning ||
+                  m.category === 'reasoning'
+                )
+                const category = m.category && m.category !== 'reasoning' ? m.category : (hasReasoning ? null : 'general')
+                const hasVision = Boolean(m.input?.includes('image') || m.input?.includes('vision'))
+                return React.createElement(
+                  React.Fragment,
+                  null,
+                  category ? React.createElement('span', { className: 'cb-badge' }, category) : null,
+                  hasVision
+                    ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: category ? '4px' : '0' } }, 'Vision')
+                    : null,
+                  hasReasoning
+                    ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: (category || hasVision) ? '4px' : '0' }, title: t('models.reasoning_tooltip') }, '🧠 Reasoning')
+                    : null
+                )
+              })()
             )
           )
         })
@@ -840,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)
@@ -900,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,
@@ -912,28 +1290,10 @@ function SettingsPage(props) {
     notice: '',
   })
 
-  // Key input state
   const [apiKeyInput, setApiKeyInput] = React.useState('')
   const [showKey, setShowKey] = React.useState(false)
 
-  // Accounts state
-  const [newAccountLabel, setNewAccountLabel] = React.useState('')
-  const [newAccountEnv, setNewAccountEnv] = React.useState('')
-  const [showAddAccount, setShowAddAccount] = React.useState(false)
-
-  // Filter & Search for Models
-  const [modelsFilter, setModelsFilter] = React.useState('all')
-  const [modelsSearch, setModelsSearch] = React.useState('')
-  const [disabledModels, setDisabledModels] = React.useState([])
-  const [advancedOpen, setAdvancedOpen] = React.useState(false)
-
-  // Loopback fast login state
-  const [fastLoginActive, setFastLoginActive] = React.useState(false)
-  const [fastLoginNotice, setFastLoginNotice] = React.useState('')
-
-  React.useEffect(() => {
-    ensureCss()
-  }, [])
+  React.useEffect(() => { ensureCss() }, [])
 
   const load = React.useCallback(async () => {
     setErr('')
@@ -967,9 +1327,7 @@ function SettingsPage(props) {
     }
   }, [])
 
-  React.useEffect(() => {
-    checkUpdate()
-  }, [checkUpdate])
+  React.useEffect(() => { checkUpdate() }, [checkUpdate])
 
   async function handleTriggerUpdate() {
     if (updateState.updating) return
@@ -980,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,
@@ -993,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' },
@@ -1021,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' },
@@ -1110,34 +1435,48 @@ 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('')
-    }
+    })
   }
 
-  async function handleFastLogin() {
-    setBusy('fast-login')
-    setErr('')
-    try {
-      const res = await fetch(`${ROUTE_PREFIX}/auth/begin`, { method: 'POST' })
-      const data = await res.json().catch(() => ({}))
-      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
-      if (data.authUrl) {
-        window.open(data.authUrl, '_blank')
+  const [verifyStatus, setVerifyStatus] = React.useState({ state: 'idle', email: '', plan: '', error: '' })
+  const verifyTimerRef = typeof React.useRef === 'function' ? React.useRef(null) : { current: null }
+
+  React.useEffect(() => {
+    const raw = String(apiKeyInput || '').trim()
+    if (!raw || raw.length < 10) {
+      setVerifyStatus({ state: 'idle', email: '', plan: '', error: '' })
+      return
+    }
+    if (verifyTimerRef.current) clearTimeout(verifyTimerRef.current)
+    verifyTimerRef.current = setTimeout(async () => {
+      setVerifyStatus({ state: 'verifying', email: '', plan: '', error: '' })
+      try {
+        const res = await fetch(`${ROUTE_PREFIX}/key/verify`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key: raw }),
+        })
+        const data = await res.json().catch(() => ({}))
+        if (data.ok && data.valid) {
+          setVerifyStatus({ state: 'valid', email: data.email, plan: data.plan, error: '' })
+        } else {
+          setVerifyStatus({ state: 'invalid', email: '', plan: '', error: data.error || 'Verification failed' })
+        }
+      } catch (err) {
+        setVerifyStatus({ state: 'invalid', email: '', plan: '', error: String(err?.message || err) })
       }
-    } catch (e) {
-      setErr(String(e.message || e))
-    } finally {
-      setBusy('')
+    }, 500)
+    return () => {
+      if (verifyTimerRef.current) clearTimeout(verifyTimerRef.current)
     }
+  }, [apiKeyInput])
+
+  function handleFastLogin() {
+    window.open('https://app.cline.bot/settings/api-keys', '_blank')
   }
 
   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' },
@@ -1146,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)
   }
@@ -1176,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) {
@@ -1192,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) {
@@ -1264,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,
@@ -1279,11 +1664,19 @@ function SettingsPage(props) {
       draft,
       handleSaveKey,
       handleFastLogin,
+      verifyStatus,
       t,
     }),
 
     // 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 }),
@@ -1298,6 +1691,9 @@ function SettingsPage(props) {
       handleSyncPlanModels,
       handleSetModelsFilter,
       handleToggleModel,
+      planSynced: !!(status?.config?.planSynced || (status?.config?.dynamicModels && status.config.dynamicModels.length > 0)),
+      planSyncedAt: status?.config?.planSyncedAt || 0,
+      defaultModelWarning: status?.config?.defaultModelWarning || '',
       t,
     }),
 
@@ -1370,7 +1766,7 @@ function PluginCard(props) {
           React.createElement(
             ErrorBoundary,
             null,
-            React.createElement(SettingsPage, { ...props, ctx: (props && props.ctx) || ctx })
+            React.createElement(SettingsPage, { ...props, ctx: props && props.ctx })
           )
         )
       : null