@goodandready/dsh-clinebot 0.3.11 → 0.3.12

package/lib/client.js

@@ -1,14 +1,19 @@
-// Plugin Settings Card (settings.plugin.item).
+// @generated by scripts/build-client.js - DO NOT EDIT DIRECTLY.
+// Edit modular source files in src/client/ instead.
+
 window.__ModuleLoader__.load({
   id: '@goodandready/dsh-clinebot',
   factory: (require) => {
     var module = { exports: {} }
-    const React = require('react')
-    const NS = 'dsh-clinebot'
-    const TITLE = 'ClineBot'
-    const SUBTITLE = 'ClinePass subscription ($9.99/mo) with curated & custom models.'
-    const ROUTE_PREFIX = '/dsh-clinebot'
+    var exports = module.exports
+    let React = require('react')
+
+// --- src/client/constants.js ---
+const NS = 'dsh-clinebot'
+const ROUTE_PREFIX = '/dsh-clinebot'
+const SNAPSHOT_LOADING = { status: 'loading', view: null }
 
+// --- src/client/locales.js ---
 const en = {
       title: 'ClineBot',
       subtitle: 'ClinePass subscription ($9.99/mo) with curated & custom models.',
@@ -199,29 +204,31 @@ const en = {
       }
     }
 
-    function FallbackChevron() {
-      return React.createElement(
-        'svg',
-        { width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', 'aria-hidden': true },
-        React.createElement('path', {
-          d: 'M3.5 5.25L7 8.75L10.5 5.25',
-          stroke: 'currentColor',
-          strokeWidth: 1.5,
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-        })
-      )
-    }
-    let ChevronIcon = null
-    try {
-      const primitives = require('@deepseek-ai/dsh-client-ui-primitives')
-      ChevronIcon = primitives && (primitives.IconChevronDownOutline14 || primitives.IconChevronDownOutline)
-    } catch (_) {
-      ChevronIcon = null
-    }
-    const Chevron = ChevronIcon || FallbackChevron
-
-    function ensureCss() {
+// --- src/client/chevron.js ---
+function FallbackChevron() {
+  return React.createElement(
+    'svg',
+    { width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', 'aria-hidden': true },
+    React.createElement('path', {
+      d: 'M3.5 5.25L7 8.75L10.5 5.25',
+      stroke: 'currentColor',
+      strokeWidth: 1.5,
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+    })
+  )
+}
+let ChevronIcon = null
+try {
+  const primitives = require('@deepseek-ai/dsh-client-ui-primitives')
+  ChevronIcon = primitives && (primitives.IconChevronDownOutline14 || primitives.IconChevronDownOutline)
+} catch (_) {
+  ChevronIcon = null
+}
+const Chevron = ChevronIcon || FallbackChevron
+
+// --- src/client/styles.js ---
+function ensureCss() {
       if (typeof document === 'undefined') return
       if (document.getElementById('dsh-clinebot-full-css')) return
       const style = document.createElement('style')
@@ -283,1197 +290,1162 @@ const en = {
       document.head.appendChild(style)
     }
 
-    function createErrorBoundary() {
-      if (!React || typeof React.Component !== 'function') {
-        return function NoopBoundary(props) { return props?.children || null }
-      }
-      return class ErrorBoundary extends React.Component {
-        constructor(props) {
-          super(props)
-          this.state = { hasError: false, error: null }
-        }
-        static getDerivedStateFromError(error) {
-          return { hasError: true, error }
-        }
-        componentDidCatch(error, errorInfo) {
-          console.error('[dsh-clinebot] React Error:', error, errorInfo)
-        }
-        render() {
-          if (this.state.hasError) {
-            return React.createElement(
-              'div',
-              {
-                className: 'cb-alert cb-alert-err',
-                style: { margin: '12px 0', padding: '14px', borderRadius: '8px' },
-              },
-              React.createElement('div', { style: { fontWeight: 600, marginBottom: '6px' } }, '⚠️ ClineBot UI Error:'),
-              React.createElement('div', { style: { fontSize: '12px', wordBreak: 'break-all' } }, String(this.state.error?.message || this.state.error)),
-              React.createElement(
-                'button',
-                {
-                  type: 'button',
-                  className: 'cb-btn',
-                  style: { marginTop: '10px', fontSize: '12px', padding: '4px 10px' },
-                  onClick: () => this.setState({ hasError: false, error: null }),
-                },
-                'Retry'
-              )
-            )
-          }
-          return this.props?.children || null
-        }
-      }
-    }
-    const ErrorBoundary = createErrorBoundary()
-
-    const SNAPSHOT_READY = Object.freeze({ status: 'ready', value: {} })
-    const SNAPSHOT_LOADING = Object.freeze({ status: 'loading', value: {} })
-
-    function formatResetTime(isoString) {
-      if (!isoString) return '—'
-      try {
-        const d = new Date(isoString)
-        if (isNaN(d.getTime())) return '—'
-        return d.toLocaleTimeString()
-      } catch {
-        return '—'
-      }
-    }
-
-    function ProgressBar({ label, percentUsed, remainingPercent, resetsAt, t }) {
-      const used = Math.max(0, Math.min(100, percentUsed || 0))
-      let fillColor = 'var(--dsw-alias-state-success-primary)'
-      if (used > 75) fillColor = 'var(--dsw-alias-state-warning-primary)'
-      if (used > 90) fillColor = 'var(--dsw-alias-state-error-primary)'
-
-      const resetStr = formatResetTime(resetsAt)
-
-      return React.createElement(
-        'div',
-        { className: 'cb-bar-container' },
-        React.createElement(
-          'div',
-          { className: 'cb-bar-head' },
-          React.createElement('span', null, label),
-          React.createElement('span', { style: { fontWeight: 600 } }, t('quota.used', { pct: used }))
-        ),
-        React.createElement(
-          'div',
-          { className: 'cb-bar-track' },
-          React.createElement('div', {
-            className: 'cb-bar-fill',
-            style: { width: `${used}%`, background: fillColor },
-          })
-        ),
-        React.createElement(
-          'div',
-          { className: 'cb-bar-meta' },
-          React.createElement('span', null, t('quota.remaining', { pct: remainingPercent ?? (100 - used) })),
-          React.createElement('span', null, t('quota.reset_at', { time: resetStr }))
-        )
-      )
+// --- src/client/error-boundary.js ---
+function createErrorBoundary() {
+  try {
+    if (!React || typeof React.Component !== 'function') {
+      return function NoopBoundary(props) { return props?.children || null }
     }
-
-    function SettingsPage(props) {
-      const ctx = props?.ctx
-      const t = props?.t || makeT(en, en)
-
-      const scope = React.useMemo(() => {
-        const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope
-        if (!s?.bind) return undefined
-        try {
-          return s.bind({ namespace: NS })
-        } catch (_) {
-          return undefined
-        }
-      }, [ctx])
-
-      const subscribe = React.useMemo(() => {
-        return (cb) => {
-          if (!scope?.subscribe) return () => {}
-          try {
-            return scope.subscribe(cb) || (() => {})
-          } catch (_) {
-            return () => {}
-          }
-        }
-      }, [scope])
-
-      const getSnapshot = React.useCallback(() => {
-        if (!scope?.getSnapshot) return SNAPSHOT_LOADING
-        try {
-          return scope.getSnapshot() || SNAPSHOT_LOADING
-        } catch (_) {
-          return SNAPSHOT_LOADING
-        }
-      }, [scope])
-
-      const snapshot = React.useSyncExternalStore(
-        subscribe,
-        getSnapshot,
-        React.useCallback(() => SNAPSHOT_LOADING, [])
-      )
-      const snapshotStatus = snapshot?.status || 'loading'
-
-      const [status, setStatus] = React.useState(null)
-      const [draft, setDraft] = React.useState(null)
-      const [busy, setBusy] = React.useState('')
-      const [err, setErr] = React.useState('')
-      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,
-        currentVersion: '0.3.10',
-        latestVersion: '',
-        updateAvailable: false,
-        canAutoUpdate: true,
-        error: '',
-        notice: '',
-      })
-
-      // Key input state
-      const [apiKeyInput, setApiKeyInput] = React.useState('')
-      const [showKey, setShowKey] = React.useState(false)
-
-      React.useEffect(() => {
-        ensureCss()
-      }, [])
-
-      const load = React.useCallback(async () => {
-        setErr('')
-        const res = await fetch(`${ROUTE_PREFIX}/status`, { cache: 'no-store' })
-        const data = await res.json().catch(() => ({}))
-        if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
-        setStatus(data)
-        setDraft(data.config || {})
-      }, [])
-
-      React.useEffect(() => {
-        load().catch((e) => setErr(String(e.message || e)))
-      }, [load])
-
-      const checkUpdate = React.useCallback(async () => {
-        setUpdateState((s) => ({ ...s, checking: true, error: '' }))
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/update`)
-          if (!res.ok) throw new Error(`HTTP ${res.status}`)
-          const data = await res.json().catch(() => ({}))
-          setUpdateState((s) => ({
-            ...s,
-            checking: false,
-            currentVersion: data.currentVersion || s.currentVersion,
-            latestVersion: data.latestVersion || '',
-            updateAvailable: !!data.updateAvailable,
-            canAutoUpdate: data.canAutoUpdate !== false,
-          }))
-        } catch (_) {
-          setUpdateState((s) => ({ ...s, checking: false }))
-        }
-      }, [])
-
-      React.useEffect(() => {
-        checkUpdate()
-      }, [checkUpdate])
-
-      async function handleTriggerUpdate() {
-        if (updateState.updating) return
-        setUpdateState((s) => ({ ...s, updating: true, error: '', notice: '' }))
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/update`, {
-            method: 'POST',
-            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}`)
-          }
-          const newVer = data.updatedVersion || updateState.latestVersion || updateState.currentVersion
-          setUpdateState((s) => ({
-            ...s,
-            updating: false,
-            updateAvailable: false,
-            currentVersion: newVer,
-            notice: t('update.done', { version: newVer }),
-          }))
-        } catch (e) {
-          setUpdateState((s) => ({
-            ...s,
-            updating: false,
-            error: t('update.failed', { error: e.message || String(e) }),
-          }))
-        }
-      }
-
-      React.useEffect(() => {
-        if (snapshotStatus === 'ready' && snapshot?.value && typeof snapshot.value === 'object') {
-          setDraft((prev) => (prev ? { ...prev, ...snapshot.value } : snapshot.value))
-        }
-      }, [snapshotStatus, snapshot?.value])
-
-      // Save Key handler
-      async function handleSaveKey() {
-        if (!apiKeyInput.trim()) {
-          setErr(t('key.empty_err'))
-          return
-        }
-        setBusy('save-key')
-        setErr('')
-        setMsg('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/save-key`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              apiKey: apiKeyInput.trim(),
-              apiKeyEnv: draft?.apiKeyEnv || 'CLINEBOT_API_KEY',
-            }),
-          })
-          const data = await res.json().catch(() => ({}))
-          if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
-          setMsg(t('key.saved_msg', { status: data.validated ? 'OK' : 'Error' }))
-          setApiKeyInput('')
-          await load()
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
-      }
-
-      // Refresh Quota handler
-      async function handleRefreshQuota() {
-        setBusy('refresh-quota')
-        setErr('')
-        setMsg('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/usage`)
-          const data = await res.json().catch(() => ({}))
-          if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
-          setStatus((prev) => ({ ...prev, usage: data }))
-          setMsg(t('quota.refreshed_msg'))
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
-      }
-
-      // Sync official models from ClinePass plan
-      async function handleSyncPlanModels() {
-        setBusy('sync-models')
-        setErr('')
-        setMsg('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/models/sync`, { method: 'POST' })
-          const data = await res.json().catch(() => ({}))
-          if (!res.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('')
-        }
-      }
-
-      // Register/Force Re-sync Provider in DSH
-      async function handleRegister() {
-        setBusy('register')
-        setErr('')
-        setMsg('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/register`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ models: draft.enabledModels }),
-          })
-          const data = await res.json().catch(() => ({}))
-          if (!data.ok) throw new Error(data.error || `HTTP ${res.status}`)
-          setMsg(t('diag.resynced_msg', { count: draft.enabledModels?.length || 0 }))
-          await load()
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
-      }
-
-      // Unregister
-      async function handleUnregister() {
-        setBusy('unregister')
-        setErr('')
-        setMsg('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/unregister`, { method: 'POST' })
-          const data = await res.json().catch(() => ({}))
-          if (!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('')
-        }
-      }
-
-      // Smoke chat test
-      async function handleSmoke() {
-        setBusy('smoke')
-        setErr('')
-        setMsg('')
-        setSmokeResult(null)
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/smoke`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ model: draft?.defaultModel }),
-          })
-          const data = await res.json().catch(() => ({}))
-          if (!data.ok) throw new Error(data.error || `HTTP ${res.status}`)
-          setSmokeResult(data)
-          setMsg(t('diag.smoke_ok', { latency: data.latencyMs }))
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
-      }
-
-      // Fast Browser Login
-      async function handleFastLogin() {
-        setBusy('fast-login')
-        setErr('')
-        setMsg(t('key.login_waiting'))
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/auth/begin`, { method: 'POST' })
-          const data = await res.json().catch(() => ({}))
-          if (!data.ok) throw new Error(data.error || 'Failed to initiate login')
-          if (data.authUrl) {
-            window.open(data.authUrl, '_blank')
-          }
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
-      }
-
-      // Pin active account
-      async function handlePinAccount(accountEnv) {
-        if (scope && snapshotStatus === "ready") {
-          try {
-            await scope.set("activeAccount", accountEnv)
-          } catch (e) {
-            console.warn('[dsh-clinebot] Failed to set activeAccount on scope:', e)
-          }
-        }
-        setBusy(`pin-${accountEnv}`)
-        setErr('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/accounts/active`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ account: accountEnv }),
-          })
-          const data = await res.json().catch(() => ({}))
-          if (!data.ok) throw new Error(data.error || 'Failed to switch account')
-          await load()
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
-      }
-
-      // Debounced persistence for model exclusion to avoid stuttering and request thrashing
-      const debounceTimerRef = typeof React.useRef === 'function' ? React.useRef(null) : { current: null }
-
-      React.useEffect(() => {
-        return () => {
-          if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
-        }
-      }, [])
-
-      function debounceSaveDisabledModels(nextDisabled) {
-        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
-        debounceTimerRef.current = setTimeout(async () => {
-          if (scope && snapshotStatus === 'ready') {
-            try {
-              await scope.set('disabledModels', nextDisabled)
-            } catch (e) {
-              console.warn('[dsh-clinebot] Failed to set disabledModels on scope:', e)
-            }
-          }
-          try {
-            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 (!data.ok) {
-              setErr(data.error || 'Failed to persist disabled models')
-            }
-          } catch (e) {
-            console.warn('[dsh-clinebot] Failed to persist disabled models:', e)
-            setErr(String(e.message || e))
-          }
-        }, 280)
-      }
-
-      // Toggle model exclusion (disabledModels logic) with instant UI state update & debounced network persist
-      function handleToggleModel(id) {
-        if (!draft) return
-        const currentDisabled = new Set(draft.disabledModels || [])
-        if (currentDisabled.has(id)) {
-          currentDisabled.delete(id) // Re-enable
-        } else {
-          currentDisabled.add(id) // Disable
-        }
-        const nextDisabled = Array.from(currentDisabled)
-
-        // Compute next enabled models
-        const allIds = (status?.availableModels || []).map((m) => m.id)
-        const nextEnabled = allIds.filter((mId) => !currentDisabled.has(mId))
-
-        setDraft({ ...draft, disabledModels: nextDisabled, enabledModels: nextEnabled })
-        debounceSaveDisabledModels(nextDisabled)
+    return class ClientErrorBoundary extends React.Component {
+      constructor(props) {
+        super(props)
+        this.state = { hasError: false, error: null }
       }
-
-      // Select all / filter models with instant UI state update & debounced network persist
-      function handleSetModelsFilter(type) {
-        if (!status?.availableModels) return
-        const all = status.availableModels
-        let allowed = new Set()
-        if (type === 'all') {
-          allowed = new Set(all.map((m) => m.id))
-        } else if (type === 'vision') {
-          allowed = new Set(all.filter((m) => m.input?.includes('image') || m.input?.includes('vision')).map((m) => m.id))
-        } else if (type === 'coding') {
-          allowed = new Set(all.filter((m) => m.category === 'coding').map((m) => m.id))
-        } else if (type === 'recommended') {
-          allowed = new Set(all.filter((m) => m.recommended).map((m) => m.id))
-        }
-
-        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)
+      static getDerivedStateFromError(error) {
+        return { hasError: true, error }
       }
-
-      if (snapshotStatus === 'unavailable') {
-        return React.createElement(
-          'div',
-          { className: 'cb-page' },
-          React.createElement('div', { className: 'cb-banner-warning' }, t('settings.unavailable'))
-        )
+      componentDidCatch(error, info) {
+        console.warn('[dsh-clinebot] Client render error caught by boundary:', error, info)
       }
-
-      if (!status || !draft || snapshotStatus === 'loading') {
-        if (err) {
+      render() {
+        if (this.state.hasError) {
           return React.createElement(
             'div',
-            { className: 'cb-page' },
-            React.createElement('div', { className: 'cb-alert cb-alert-err' }, `${t('settings.loading')}: ${err}`),
+            { className: 'cb-alert-err' },
+            React.createElement('strong', null, '⚠️ ClineBot UI Error: '),
+            String(this.state.error?.message || this.state.error || 'Unknown rendering error'),
             React.createElement(
               'button',
               {
                 type: 'button',
                 className: 'cb-btn',
-                style: { marginTop: '12px', alignSelf: 'flex-start' },
-                onClick: () => {
-                  setErr('')
-                  load().catch((e) => setErr(String(e.message || e)))
-                },
+                style: { marginLeft: '12px', padding: '2px 8px', fontSize: '11px' },
+                onClick: () => this.setState({ hasError: false, error: null }),
               },
-              t('settings.retry')
+              'Retry'
             )
           )
         }
-        return React.createElement('div', { className: 'cb-page' }, t('settings.loading'))
+        return this.props.children
       }
-
-      const healthOk = !!status.health?.ok
-      const keyPresent = !!status.key?.present
-      const isRegistered = !!status.isRegistered
-      const modelsList = status.availableModels || []
-      const disabledSet = new Set(draft.disabledModels || [])
-      const enabledCount = modelsList.filter((m) => !disabledSet.has(m.id)).length
-      const usage = status.usage
-
-      return React.createElement(
+    }
+  } catch (e) {
+    return function FallbackBoundary(props) { return props?.children || null }
+  }
+}
+const ErrorBoundary = createErrorBoundary()
+
+// --- src/client/progress-bar.js ---
+function formatResetTime(isoString) {
+  if (!isoString) return ''
+  try {
+    const d = new Date(isoString)
+    if (Number.isNaN(d.getTime())) return ''
+    return d.toLocaleTimeString()
+  } catch {
+    return ''
+  }
+}
+
+function ProgressBar({ label, percentUsed, remainingPercent, resetsAt, t }) {
+  const pct = Math.max(0, Math.min(100, Math.round(percentUsed || 0)))
+  const isWarn = pct >= 80 && pct < 95
+  const isBad = pct >= 95
+  const barClass = isBad ? 'cb-progress-bar-bad' : isWarn ? 'cb-progress-bar-warn' : 'cb-progress-bar-fill'
+  const resetLabel = formatResetTime(resetsAt)
+
+  return React.createElement(
+    'div',
+    { className: 'cb-progress-card' },
+    React.createElement(
+      'div',
+      { className: 'cb-progress-head' },
+      React.createElement('span', { className: 'cb-progress-label' }, label),
+      React.createElement(
+        'span',
+        { className: 'cb-progress-meta' },
+        t('quota.used', { pct }),
+        resetLabel ? ` · ${t('quota.reset_at', { time: resetLabel })}` : ''
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'cb-progress-track' },
+      React.createElement('div', {
+        className: barClass,
+        style: { width: `${pct}%` },
+      })
+    )
+  )
+}
+
+// --- src/client/components/update-banner.js ---
+function UpdateBanner({ updateState, handleTriggerUpdate, t }) {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      'div',
+      {
+        className: 'cb-row',
+        style: {
+          padding: '10px 14px',
+          borderRadius: '8px',
+          border: '1px solid var(--dsw-alias-border-l2)',
+          background: 'var(--dsw-alias-bg-layer-2)',
+          justifyContent: 'space-between',
+        }
+      },
+      React.createElement(
         'div',
-        { className: 'cb-page' },
-
-        // Page Header
+        { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
+        React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)', fontWeight: 500 } },
+          `v${updateState.currentVersion}`
+        ),
+        updateState.checking
+          ? React.createElement('span', { style: { color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px' } },
+              t('update.checking')
+            )
+          : updateState.updateAvailable
+            ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
+                t('update.available', { latestVersion: updateState.latestVersion, currentVersion: updateState.currentVersion })
+              )
+            : React.createElement('span', { className: 'cb-badge cb-badge-ok' },
+                '✓ ' + t('update.up_to_date')
+              )
+      ),
+      updateState.updateAvailable
+        ? React.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'cb-btn cb-btn-primary',
+              disabled: updateState.updating,
+              onClick: handleTriggerUpdate,
+              style: { padding: '5px 12px', fontSize: '12px' }
+            },
+            updateState.updating ? t('update.updating') : t('update.btn')
+          )
+        : null
+    ),
+    updateState.notice ? React.createElement('div', { className: 'cb-alert-ok' }, '✓ ' + updateState.notice) : null,
+    updateState.error ? React.createElement('div', { className: 'cb-alert-err' }, updateState.error) : null
+  )
+}
+
+// --- src/client/components/key-section.js ---
+function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowKey, busy, draft, handleSaveKey, handleFastLogin, t }) {
+  return React.createElement(
+    'div',
+    { className: 'cb-section-card' },
+    React.createElement('div', { className: 'cb-section-title' }, t('key.title')),
+    React.createElement('div', { className: 'cb-section-desc' }, t('key.desc')),
+    React.createElement(
+      'div',
+      { className: 'cb-input-group' },
+      React.createElement('input', {
+        className: 'cb-input',
+        type: showKey ? 'text' : 'password',
+        placeholder: keyPresent ? t('key.placeholder_has') : t('key.placeholder_empty'),
+        value: apiKeyInput,
+        onChange: (e) => setApiKeyInput(e.target.value),
+      }),
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          className: 'cb-btn',
+          onClick: () => setShowKey((v) => !v),
+        },
+        showKey ? t('key.hide') : t('key.show')
+      ),
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          className: 'cb-btn cb-btn-primary',
+          disabled: !!busy || !String(apiKeyInput || '').trim(),
+          onClick: handleSaveKey,
+        },
+        busy === 'save-key' ? t('key.saving') : t('key.save')
+      ),
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          className: 'cb-btn',
+          disabled: !!busy,
+          onClick: handleFastLogin,
+        },
+        busy === 'fast-login' ? '…' : t('key.login_fast')
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'cb-row', style: { fontSize: '13px', 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',
+          target: '_blank',
+          rel: 'noreferrer',
+          style: { color: 'var(--dsw-alias-state-brand-primary)' },
+        },
+        t('key.get_key')
+      )
+    )
+  )
+}
+
+// --- src/client/components/accounts-section.js ---
+function AccountsSection({ status, busy, handlePinAccount, t }) {
+  if (!status.accounts || !status.accounts.length) return null
+  return React.createElement(
+    'div',
+    { className: 'cb-section-card' },
+    React.createElement('div', { className: 'cb-section-title' }, t('accounts.title')),
+    React.createElement('div', { className: 'cb-section-desc' }, t('accounts.desc')),
+    React.createElement(
+      'table',
+      { className: 'cb-table' },
+      React.createElement(
+        'thead',
+        null,
         React.createElement(
-          'div',
-          { className: 'cb-header' },
-          React.createElement(
-            'div',
-            { className: 'cb-page-title' },
-            `🤖 ${t('header.title')}`,
-            React.createElement(
-              'span',
-              { className: `cb-badge ${healthOk ? 'cb-badge-ok' : 'cb-badge-bad'}` },
-              healthOk ? t('badge.online', { latency: status.health?.latencyMs }) : t('badge.offline')
-            ),
+          'tr',
+          null,
+          React.createElement('th', null, 'Account'),
+          React.createElement('th', null, 'Credential Ref'),
+          React.createElement('th', null, 'Status'),
+          React.createElement('th', { style: { textAlign: 'right' } }, 'Action')
+        )
+      ),
+      React.createElement(
+        'tbody',
+        null,
+        status.accounts.map((acc) => {
+          const isActive = status.activeAccount === acc.apiKeyEnv || (!status.activeAccount && acc.id === 'default')
+          return React.createElement(
+            'tr',
+            { key: acc.id },
+            React.createElement('td', null, React.createElement('strong', null, acc.label)),
+            React.createElement('td', null, React.createElement('code', null, acc.apiKeyEnv)),
             React.createElement(
-              'span',
-              { className: `cb-badge ${keyPresent ? 'cb-badge-ok' : 'cb-badge-warn'}` },
-              keyPresent ? t('badge.key_ok', { source: status.key?.source }) : t('badge.key_missing')
+              'td',
+              null,
+              acc.present
+                ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, `Configured (${acc.source})`)
+                : 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
             ),
             React.createElement(
-              'span',
-              { className: `cb-badge ${isRegistered ? 'cb-badge-ok' : 'cb-badge-warn'}` },
-              isRegistered ? t('badge.registered', { count: enabledCount }) : t('badge.not_registered')
+              'td',
+              { style: { textAlign: 'right' } },
+              !isActive && acc.present
+                ? React.createElement(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'cb-btn',
+                      style: { padding: '4px 8px', fontSize: '11px' },
+                      disabled: !!busy,
+                      onClick: () => handlePinAccount(acc.apiKeyEnv),
+                    },
+                    t('accounts.pin_btn')
+                  )
+                : null
             )
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-page-sub' },
-            t('header.sub')
           )
-        ),
-
-        // In-app Update Bar
-        React.createElement(
+        })
+      )
+    )
+  )
+}
+
+// --- src/client/components/quota-section.js ---
+function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }) {
+  return React.createElement(
+    React.Fragment,
+    null,
+    status.quotaWarning
+      ? React.createElement(
           'div',
-          {
-            className: 'cb-row',
-            style: {
-              padding: '10px 14px',
-              borderRadius: '8px',
-              border: '1px solid var(--dsw-alias-border-l2)',
-              background: 'var(--dsw-alias-bg-layer-2)',
-              justifyContent: 'space-between',
-            }
-          },
+          { className: status.quotaWarning.level === 'exhausted' ? 'cb-banner-exhausted' : 'cb-banner-warning' },
+          React.createElement('span', { style: { fontSize: '16px' } }, status.quotaWarning.level === 'exhausted' ? '🚨' : '⚠️'),
           React.createElement(
             'div',
-            { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
-            React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)', fontWeight: 500 } },
-              `v${updateState.currentVersion}`
-            ),
-            updateState.checking
-              ? React.createElement('span', { style: { color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px' } },
-                  t('update.checking')
+            { style: { flex: 1 } },
+            React.createElement('div', null, status.quotaWarning.message),
+            status.quotaWarning.resetsAt
+              ? React.createElement(
+                  'div',
+                  { style: { fontSize: '11px', opacity: 0.9, marginTop: '2px' } },
+                  t('quota.reset_at', { time: new Date(status.quotaWarning.resetsAt).toLocaleTimeString() })
                 )
-              : updateState.updateAvailable
-                ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
-                    t('update.available', { latestVersion: updateState.latestVersion, currentVersion: updateState.currentVersion })
-                  )
-                : React.createElement('span', { className: 'cb-badge cb-badge-ok' },
-                    '✓ ' + t('update.up_to_date')
-                  )
-          ),
-          updateState.updateAvailable
-            ? React.createElement(
-                'button',
-                {
-                  type: 'button',
-                  className: 'cb-btn cb-btn-primary',
-                  disabled: updateState.updating,
-                  onClick: handleTriggerUpdate,
-                  style: { padding: '5px 12px', fontSize: '12px' }
-                },
-                updateState.updating ? t('update.updating') : t('update.btn')
-              )
-            : null
-        ),
-
-        // Update notice & error banners
-        updateState.notice
-          ? React.createElement('div', { className: 'cb-alert-ok' }, '✓ ' + updateState.notice)
-          : null,
-        updateState.error
-          ? React.createElement('div', { className: 'cb-alert-err' }, updateState.error)
-          : null,
-
-        // Notifications
-        err ? React.createElement('div', { className: 'cb-alert-bad' }, err) : null,
-        msg ? React.createElement('div', { className: 'cb-alert-ok' }, msg) : null,
-
-        // Card 1: API Key and Credentials
-        React.createElement(
+              : null
+          )
+        )
+      : null,
+    keyPresent
+      ? React.createElement(
           'div',
           { className: 'cb-section-card' },
           React.createElement(
             'div',
             { className: 'cb-section-title' },
-            t('key.title')
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-section-desc' },
-            t('key.desc')
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-input-group' },
-            React.createElement('input', {
-              className: 'cb-input',
-              type: showKey ? 'text' : 'password',
-              placeholder: keyPresent ? t('key.placeholder_has') : t('key.placeholder_empty'),
-              value: apiKeyInput,
-              onChange: (e) => setApiKeyInput(e.target.value),
-            }),
-            React.createElement(
-              'button',
-              {
-                type: 'button',
-                className: 'cb-btn',
-                onClick: () => setShowKey((v) => !v),
-              },
-              showKey ? t('key.hide') : t('key.show')
-            ),
-            React.createElement(
-              'button',
-              {
-                type: 'button',
-                className: 'cb-btn cb-btn-primary',
-                disabled: !!busy || !String(apiKeyInput || '').trim(),
-                onClick: handleSaveKey,
-              },
-              busy === 'save-key' ? t('key.saving') : t('key.save')
-            ),
+            t('quota.title'),
             React.createElement(
               'button',
               {
                 type: 'button',
                 className: 'cb-btn',
                 disabled: !!busy,
-                onClick: handleFastLogin,
+                onClick: handleRefreshQuota,
               },
-              busy === 'fast-login' ? '…' : t('key.login_fast')
-            )
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-row', style: { fontSize: '13px', 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',
-                target: '_blank',
-                rel: 'noreferrer',
-                style: { color: 'var(--dsw-alias-state-brand-primary)' },
-              },
-              t('key.get_key')
-            )
-          )
-        ),
-
-        // Accounts Pool Card
-        status.accounts && status.accounts.length > 0
-          ? React.createElement(
-              'div',
-              { className: 'cb-section-card' },
-              React.createElement(
-                'div',
-                { className: 'cb-section-title' },
-                t('accounts.title')
-              ),
-              React.createElement(
-                'div',
-                { className: 'cb-section-desc' },
-                t('accounts.desc')
-              ),
-              React.createElement(
-                'table',
-                { className: 'cb-table' },
-                React.createElement(
-                  'thead',
-                  null,
-                  React.createElement(
-                    'tr',
-                    null,
-                    React.createElement('th', null, 'Account'),
-                    React.createElement('th', null, 'Credential Ref'),
-                    React.createElement('th', null, 'Status'),
-                    React.createElement('th', { style: { textAlign: 'right' } }, 'Action')
-                  )
-                ),
-                React.createElement(
-                  'tbody',
-                  null,
-                  status.accounts.map((acc) => {
-                    const isActive = status.activeAccount === acc.apiKeyEnv || (!status.activeAccount && acc.id === 'default')
-                    return React.createElement(
-                      'tr',
-                      { key: acc.id },
-                      React.createElement('td', null, React.createElement('strong', null, acc.label)),
-                      React.createElement('td', null, React.createElement('code', null, acc.apiKeyEnv)),
-                      React.createElement(
-                        'td',
-                        null,
-                        acc.present
-                          ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, `Configured (${acc.source})`)
-                          : 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
-                      ),
-                      React.createElement(
-                        'td',
-                        { style: { textAlign: 'right' } },
-                        !isActive && acc.present
-                          ? React.createElement(
-                              'button',
-                              {
-                                type: 'button',
-                                className: 'cb-btn',
-                                style: { padding: '4px 8px', fontSize: '11px' },
-                                disabled: !!busy,
-                                onClick: () => handlePinAccount(acc.apiKeyEnv),
-                              },
-                              t('accounts.pin_btn')
-                            )
-                          : null
-                      )
-                    )
-                  })
-                )
-              )
-            )
-          : null,
-
-        // Quota Warning Banner
-        status.quotaWarning
-          ? React.createElement(
-              'div',
-              { className: status.quotaWarning.level === 'exhausted' ? 'cb-banner-exhausted' : 'cb-banner-warning' },
-              React.createElement('span', { style: { fontSize: '16px' } }, status.quotaWarning.level === 'exhausted' ? '🚨' : '⚠️'),
-              React.createElement(
-                'div',
-                { style: { flex: 1 } },
-                React.createElement('div', null, status.quotaWarning.message),
-                status.quotaWarning.resetsAt
-                  ? React.createElement(
-                      'div',
-                      { style: { fontSize: '11px', opacity: 0.9, marginTop: '2px' } },
-                      t('quota.reset_at', { time: new Date(status.quotaWarning.resetsAt).toLocaleTimeString() })
-                    )
-                  : null
-              )
-            )
-          : null,
-
-        // Card 2: Subscription Limits & Usage Dashboard
-        keyPresent
-          ? React.createElement(
-              'div',
-              { className: 'cb-section-card' },
-              React.createElement(
-                'div',
-                { className: 'cb-section-title' },
-                t('quota.title'),
-                React.createElement(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'cb-btn',
-                    disabled: !!busy,
-                    onClick: handleRefreshQuota,
-                  },
-                  busy === 'refresh-quota' ? t('quota.refreshing') : t('quota.refresh')
-                )
-              ),
-              React.createElement(
-                'div',
-                { className: 'cb-section-desc' },
-                usage?.user?.email
-                  ? t('quota.account', { email: usage.user.email, plan: usage.plan || 'ClinePass ($9.99/mo)' })
-                  : t('quota.desc')
-              ),
-              React.createElement(
-                'div',
-                { className: 'cb-grid-2' },
-                React.createElement(ProgressBar, {
-                  label: t('quota.window_5h'),
-                  percentUsed: usage?.windows?.fiveHour?.percentUsed || 0,
-                  remainingPercent: usage?.windows?.fiveHour?.remainingPercent || 100,
-                  resetsAt: usage?.windows?.fiveHour?.resetsAt,
-                  t,
-                }),
-                React.createElement(ProgressBar, {
-                  label: t('quota.window_weekly'),
-                  percentUsed: usage?.windows?.weekly?.percentUsed || 0,
-                  remainingPercent: usage?.windows?.weekly?.remainingPercent || 100,
-                  resetsAt: usage?.windows?.weekly?.resetsAt,
-                  t,
-                })
-              )
-            )
-          : null,
-
-        // Card 3: Model Picker Management with Official Plan Sync & Auto-Enable
-        React.createElement(
-          'div',
-          { className: 'cb-section-card' },
-          React.createElement(
-            'div',
-            { className: 'cb-section-title' },
-            t('models.title', { enabled: enabledCount, total: modelsList.length }),
-            React.createElement(
-              'div',
-              { className: 'cb-row' },
-              React.createElement(
-                'button',
-                {
-                  type: 'button',
-                  className: 'cb-btn',
-                  disabled: !!busy || !keyPresent,
-                  onClick: handleSyncPlanModels,
-                },
-                busy === 'sync-models' ? t('models.syncing') : t('models.sync')
-              ),
-              React.createElement(
-                'button',
-                { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('all') },
-                t('models.all')
-              ),
-              React.createElement(
-                'button',
-                { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('vision') },
-                t('models.vision')
-              ),
-              React.createElement(
-                'button',
-                { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('coding') },
-                t('models.coding')
-              ),
-              React.createElement(
-                'button',
-                { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('recommended') },
-                t('models.recommended')
-              )
+              busy === 'refresh-quota' ? t('quota.refreshing') : t('quota.refresh')
             )
           ),
           React.createElement(
             'div',
             { className: 'cb-section-desc' },
-            t('models.desc')
+            usage?.user?.email
+              ? t('quota.account', { email: usage.user.email, plan: usage.plan || 'ClinePass ($9.99/mo)' })
+              : t('quota.desc')
           ),
           React.createElement(
-            'table',
-            { className: 'cb-table' },
-            React.createElement(
-              'thead',
-              null,
-              React.createElement(
-                'tr',
-                null,
-                React.createElement('th', { style: { width: '40px' } }, t('models.th_active')),
-                React.createElement('th', null, t('models.th_name')),
-                React.createElement('th', null, t('models.th_id')),
-                React.createElement('th', null, t('models.th_ctx')),
-                React.createElement('th', null, t('models.th_caps'))
-              )
-            ),
-            React.createElement(
-              'tbody',
-              null,
-              modelsList.map((m) => {
-                const isEnabled = !disabledSet.has(m.id)
-                return React.createElement(
-                  'tr',
-                  { key: m.id },
-                  React.createElement(
-                    'td',
-                    null,
-                    React.createElement('input', {
-                      type: 'checkbox',
-                      checked: isEnabled,
-                      onChange: () => handleToggleModel(m.id),
-                    })
-                  ),
-                  React.createElement(
-                    'td',
-                    null,
-                    React.createElement('strong', null, m.name),
-                    m.recommended
-                      ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: '6px' } }, t('models.star'))
-                      : null,
-                    m.isCustom
-                      ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '6px', opacity: 0.8 } }, t('models.auto_new'))
-                      : 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,
-                    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,
-                    m.reasoningEfforts?.length || m.reasoning
-                      ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '4px' } }, '🧠 Reasoning')
-                      : null
-                  )
-                )
-              })
-            )
+            'div',
+            { className: 'cb-grid-2' },
+            React.createElement(ProgressBar, {
+              label: t('quota.window_5h'),
+              percentUsed: usage?.windows?.fiveHour?.percentUsed || 0,
+              remainingPercent: usage?.windows?.fiveHour?.remainingPercent || 100,
+              resetsAt: usage?.windows?.fiveHour?.resetsAt,
+              t,
+            }),
+            React.createElement(ProgressBar, {
+              label: t('quota.window_weekly'),
+              percentUsed: usage?.windows?.weekly?.percentUsed || 0,
+              remainingPercent: usage?.windows?.weekly?.remainingPercent || 100,
+              resetsAt: usage?.windows?.weekly?.resetsAt,
+              t,
+            })
           )
+        )
+      : null
+  )
+}
+
+// --- src/client/components/models-section.js ---
+function ModelsSection({ modelsList, disabledSet, enabledCount, keyPresent, busy, handleSyncPlanModels, handleSetModelsFilter, handleToggleModel, t }) {
+  return React.createElement(
+    'div',
+    { className: 'cb-section-card' },
+    React.createElement(
+      'div',
+      { className: 'cb-section-title' },
+      t('models.title', { enabled: enabledCount, total: modelsList.length }),
+      React.createElement(
+        'div',
+        { className: 'cb-row' },
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'cb-btn',
+            disabled: !!busy || !keyPresent,
+            onClick: handleSyncPlanModels,
+          },
+          busy === 'sync-models' ? t('models.syncing') : t('models.sync')
         ),
-
-        // Card 4: Session Metrics & Usage Tracking
+        React.createElement('button', { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('all') }, t('models.all')),
+        React.createElement('button', { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('vision') }, t('models.vision')),
+        React.createElement('button', { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('coding') }, t('models.coding')),
+        React.createElement('button', { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('recommended') }, t('models.recommended'))
+      )
+    ),
+    React.createElement('div', { className: 'cb-section-desc' }, t('models.desc')),
+    React.createElement(
+      'table',
+      { className: 'cb-table' },
+      React.createElement(
+        'thead',
+        null,
         React.createElement(
-          'div',
-          { className: 'cb-section-card' },
-          React.createElement(
-            'div',
-            { className: 'cb-section-title' },
-            t('stats.title')
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-section-desc' },
-            t('stats.desc')
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-grid-2' },
-            React.createElement(
-              'div',
-              { className: 'cb-stat-box' },
-              React.createElement('div', { className: 'cb-stat-val' }, `${status.sessionStats?.successfulRequests || 0} / ${status.sessionStats?.totalRequests || 0}`),
-              React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.requests'))
-            ),
+          'tr',
+          null,
+          React.createElement('th', { style: { width: '40px' } }, t('models.th_active')),
+          React.createElement('th', null, t('models.th_name')),
+          React.createElement('th', null, t('models.th_id')),
+          React.createElement('th', null, t('models.th_ctx')),
+          React.createElement('th', null, t('models.th_caps'))
+        )
+      ),
+      React.createElement(
+        'tbody',
+        null,
+        modelsList.map((m) => {
+          const isEnabled = !disabledSet.has(m.id)
+          return React.createElement(
+            'tr',
+            { key: m.id },
             React.createElement(
-              'div',
-              { className: 'cb-stat-box' },
-              React.createElement('div', { className: 'cb-stat-val' }, `~${status.sessionStats?.totalTokensEst || 0}`),
-              React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.tokens'))
+              'td',
+              null,
+              React.createElement('input', {
+                type: 'checkbox',
+                checked: isEnabled,
+                onChange: () => handleToggleModel(m.id),
+              })
             ),
             React.createElement(
-              'div',
-              { className: 'cb-stat-box' },
-              React.createElement('div', { className: 'cb-stat-val' }, status.sessionStats?.lastLatencyMs ? `${status.sessionStats.lastLatencyMs} ms` : '—'),
-              React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.latency'))
+              'td',
+              null,
+              React.createElement('strong', null, m.name),
+              m.recommended
+                ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: '6px' } }, t('models.star'))
+                : null,
+              m.isCustom
+                ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '6px', opacity: 0.8 } }, t('models.auto_new'))
+                : null
             ),
+            React.createElement('td', null, React.createElement('code', null, m.id)),
+            React.createElement('td', null, `${Math.round((m.contextLength || 200000) / 1000)}k`),
             React.createElement(
-              'div',
-              { className: 'cb-stat-box' },
-              React.createElement('div', { className: 'cb-stat-val' }, status.sessionStats?.lastRequestAt ? new Date(status.sessionStats.lastRequestAt).toLocaleTimeString() : '—'),
-              React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.last_req'))
+              '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,
+              m.reasoningEfforts?.length || m.reasoning
+                ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '4px' } }, '🧠 Reasoning')
+                : null
             )
           )
-        ),
-
-        // Card 5: Diagnostics & Sync with DSH
-        React.createElement(
+        })
+      )
+    )
+  )
+}
+
+// --- src/client/components/stats-section.js ---
+function StatsSection({ status, t }) {
+  return React.createElement(
+    'div',
+    { className: 'cb-section-card' },
+    React.createElement('div', { className: 'cb-section-title' }, t('stats.title')),
+    React.createElement('div', { className: 'cb-section-desc' }, t('stats.desc')),
+    React.createElement(
+      'div',
+      { className: 'cb-grid-2' },
+      React.createElement(
+        'div',
+        { className: 'cb-stat-box' },
+        React.createElement('div', { className: 'cb-stat-val' }, `${status.sessionStats?.successfulRequests || 0} / ${status.sessionStats?.totalRequests || 0}`),
+        React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.requests'))
+      ),
+      React.createElement(
+        'div',
+        { className: 'cb-stat-box' },
+        React.createElement('div', { className: 'cb-stat-val' }, `~${status.sessionStats?.totalTokensEst || 0}`),
+        React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.tokens'))
+      ),
+      React.createElement(
+        'div',
+        { className: 'cb-stat-box' },
+        React.createElement('div', { className: 'cb-stat-val' }, status.sessionStats?.lastLatencyMs ? `${status.sessionStats.lastLatencyMs} ms` : '—'),
+        React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.latency'))
+      ),
+      React.createElement(
+        'div',
+        { className: 'cb-stat-box' },
+        React.createElement('div', { className: 'cb-stat-val' }, status.sessionStats?.lastRequestAt ? new Date(status.sessionStats.lastRequestAt).toLocaleTimeString() : '—'),
+        React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.last_req'))
+      )
+    )
+  )
+}
+
+// --- src/client/components/diag-section.js ---
+function DiagSection({ keyPresent, isRegistered, busy, smokeResult, handleSmoke, handleUnregister, handleRegister, t }) {
+  return React.createElement(
+    'div',
+    { className: 'cb-section-card' },
+    React.createElement('div', { className: 'cb-section-title' }, t('diag.title')),
+    React.createElement('div', { className: 'cb-section-desc' }, t('diag.desc')),
+    React.createElement(
+      'div',
+      { className: 'cb-row' },
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          className: 'cb-btn',
+          disabled: !!busy || !keyPresent,
+          onClick: handleSmoke,
+        },
+        busy === 'smoke' ? t('diag.smoke_testing') : t('diag.smoke_btn')
+      ),
+      isRegistered
+        ? React.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'cb-btn cb-btn-danger',
+              disabled: !!busy,
+              onClick: handleUnregister,
+            },
+            busy === 'unregister' ? t('diag.unregistering') : t('diag.unregister_btn')
+          )
+        : null,
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          className: 'cb-btn cb-btn-primary',
+          style: { marginLeft: 'auto' },
+          disabled: !!busy,
+          onClick: handleRegister,
+        },
+        busy === 'register' ? t('diag.resyncing') : t('diag.resync_btn')
+      )
+    ),
+    smokeResult
+      ? React.createElement(
           'div',
-          { className: 'cb-section-card' },
-          React.createElement(
-            'div',
-            { className: 'cb-section-title' },
-            t('diag.title')
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-section-desc' },
-            t('diag.desc')
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-row' },
-            React.createElement(
-              'button',
-              {
-                type: 'button',
-                className: 'cb-btn',
-                disabled: !!busy || !keyPresent,
-                onClick: handleSmoke,
-              },
-              busy === 'smoke' ? t('diag.smoke_testing') : t('diag.smoke_btn')
-            ),
-            isRegistered
-              ? React.createElement(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'cb-btn cb-btn-danger',
-                    disabled: !!busy,
-                    onClick: handleUnregister,
-                  },
-                  busy === 'unregister' ? t('diag.unregistering') : t('diag.unregister_btn')
-                )
-              : null,
-            React.createElement(
-              'button',
-              {
-                type: 'button',
-                className: 'cb-btn cb-btn-primary',
-                style: { marginLeft: 'auto' },
-                disabled: !!busy,
-                onClick: handleRegister,
-              },
-              busy === 'register' ? t('diag.resyncing') : t('diag.resync_btn')
-            )
-          ),
-          smokeResult
-            ? React.createElement(
-                'div',
-                { className: 'cb-preview' },
-                `✅ Latency: ${smokeResult.latencyMs} ms | Model: ${smokeResult.model}\nResponse: ${smokeResult.preview || '(empty)'}`
-              )
-            : null
+          { className: 'cb-preview' },
+          `✅ Latency: ${smokeResult.latencyMs} ms | Model: ${smokeResult.model}
+Response: ${smokeResult.preview || '(empty)'}`
         )
-      )
+      : null
+  )
+}
+
+// --- src/client/settings-page.js ---
+function SettingsPage(props) {
+  const ctx = props?.ctx
+  const t = props?.t || makeT(en, en)
+
+  const scope = React.useMemo(() => {
+    const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope
+    if (!s?.bind) return undefined
+    try {
+      return s.bind({ namespace: NS })
+    } catch (_) {
+      return undefined
+    }
+  }, [ctx])
+
+  const subscribe = React.useMemo(() => {
+    return (cb) => {
+      if (!scope?.subscribe) return () => {}
+      try {
+        return scope.subscribe(cb) || (() => {})
+      } catch (_) {
+        return () => {}
+      }
+    }
+  }, [scope])
+
+  const getSnapshot = React.useCallback(() => {
+    if (!scope?.getSnapshot) return SNAPSHOT_LOADING
+    try {
+      return scope.getSnapshot() || SNAPSHOT_LOADING
+    } catch (_) {
+      return SNAPSHOT_LOADING
+    }
+  }, [scope])
+
+  const snapshot = React.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    React.useCallback(() => SNAPSHOT_LOADING, [])
+  )
+  const snapshotStatus = snapshot?.status || 'loading'
+
+  const [status, setStatus] = React.useState(null)
+  const [draft, setDraft] = React.useState(null)
+  const [busy, setBusy] = React.useState('')
+  const [err, setErr] = React.useState('')
+  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,
+    currentVersion: '0.3.12',
+    latestVersion: '',
+    updateAvailable: false,
+    canAutoUpdate: true,
+    error: '',
+    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()
+  }, [])
+
+  const load = React.useCallback(async () => {
+    setErr('')
+    const res = await fetch(`${ROUTE_PREFIX}/status`, { cache: 'no-store' })
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
+    setStatus(data)
+    setDraft(data.config || {})
+  }, [])
+
+  React.useEffect(() => {
+    load().catch((e) => setErr(String(e.message || e)))
+  }, [load])
+
+  const checkUpdate = React.useCallback(async () => {
+    setUpdateState((s) => ({ ...s, checking: true, error: '' }))
+    try {
+      const res = await fetch(`${ROUTE_PREFIX}/update`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json().catch(() => ({}))
+      setUpdateState((s) => ({
+        ...s,
+        checking: false,
+        currentVersion: data.currentVersion || s.currentVersion,
+        latestVersion: data.latestVersion || '',
+        updateAvailable: !!data.updateAvailable,
+        canAutoUpdate: data.canAutoUpdate !== false,
+      }))
+    } catch (_) {
+      setUpdateState((s) => ({ ...s, checking: false }))
+    }
+  }, [])
+
+  React.useEffect(() => {
+    checkUpdate()
+  }, [checkUpdate])
+
+  async function handleTriggerUpdate() {
+    if (updateState.updating) return
+    setUpdateState((s) => ({ ...s, updating: true, error: '', notice: '' }))
+    try {
+      const res = await fetch(`${ROUTE_PREFIX}/update`, {
+        method: 'POST',
+        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}`)
+      }
+      const newVer = data.updatedVersion || updateState.latestVersion || updateState.currentVersion
+      setUpdateState((s) => ({
+        ...s,
+        updating: false,
+        updateAvailable: false,
+        currentVersion: newVer,
+        notice: t('update.done', { version: newVer }),
+      }))
+      setTimeout(() => checkUpdate(), 2000)
+    } catch (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')
+    setErr('')
+    setMsg('')
+    try {
+      const res = await fetch(`${ROUTE_PREFIX}/save-key`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKey: keyVal, apiKeyEnv: draft?.apiKeyEnv }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      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 {
+      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 {
+      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 {
+      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('')
     }
+  }
 
-    // Accordion item for Plugins section
-    function PluginCard(props) {
-      const [open, setOpen] = React.useState(false)
-      const t = props?.t || makeT(en, en)
-      React.useEffect(() => {
-        ensureCss()
-      }, [])
+  async function handleUnregister() {
+    setBusy('unregister')
+    setErr('')
+    setMsg('')
+    try {
+      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 {
+      const res = await fetch(`${ROUTE_PREFIX}/smoke`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model: draft?.defaultModel }),
+      })
+      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')
+      }
+    } catch (e) {
+      setErr(String(e.message || e))
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handlePinAccount(accountEnv) {
+    setBusy('pin-account')
+    setErr('')
+    try {
+      const res = await fetch(`${ROUTE_PREFIX}/accounts/active`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ account: accountEnv }),
+      })
+      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('')
+    }
+  }
 
+  const debounceTimerRef = typeof React.useRef === 'function' ? React.useRef(null) : { current: null }
+  function debounceSaveDisabledModels(nextDisabled) {
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+    debounceTimerRef.current = setTimeout(async () => {
+      try {
+        await fetch(`${ROUTE_PREFIX}/models/toggle`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ disabledModels: nextDisabled }),
+        })
+      } catch (err) {
+        console.warn('[dsh-clinebot] Failed saving disabled models:', err)
+      }
+    }, 400)
+  }
+
+  function handleToggleModel(id) {
+    const curr = draft?.disabledModels || []
+    const isCurrentlyDisabled = curr.includes(id)
+    const next = isCurrentlyDisabled ? curr.filter((x) => x !== id) : [...curr, id]
+    const all = status?.availableModels || []
+    const enabledIds = all.map((m) => m.id).filter((mId) => !next.includes(mId))
+    setDraft({ ...draft, disabledModels: next, enabledModels: enabledIds })
+    debounceSaveDisabledModels(next)
+  }
+
+  function handleSetModelsFilter(type) {
+    const all = status?.availableModels || []
+    let allowed = new Set()
+    if (type === 'all') {
+      allowed = new Set(all.map((m) => m.id))
+    } else if (type === 'vision') {
+      allowed = new Set(all.filter((m) => m.input?.includes('image') || m.input?.includes('vision')).map((m) => m.id))
+    } else if (type === 'coding') {
+      allowed = new Set(all.filter((m) => m.category === 'coding').map((m) => m.id))
+    } else if (type === 'recommended') {
+      allowed = new Set(all.filter((m) => m.recommended).map((m) => m.id))
+    }
+
+    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)
+  }
+
+  if (snapshotStatus === 'unavailable') {
+    return React.createElement(
+      'div',
+      { className: 'cb-page' },
+      React.createElement('div', { className: 'cb-banner-warning' }, t('settings.unavailable'))
+    )
+  }
+
+  if (!status || !draft || snapshotStatus === 'loading') {
+    if (err) {
       return React.createElement(
-        'li',
-        { className: 'cb-section-card', style: { listStyle: 'none', marginBottom: '12px' } },
+        'div',
+        { className: 'cb-page' },
+        React.createElement('div', { className: 'cb-alert cb-alert-err' }, `${t('settings.loading')}: ${err}`),
         React.createElement(
           'button',
           {
             type: 'button',
-            style: {
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              width: '100%',
-              padding: 0,
-              textAlign: 'left',
+            className: 'cb-btn',
+            style: { marginTop: '12px', alignSelf: 'flex-start' },
+            onClick: () => {
+              setErr('')
+              load().catch((e) => setErr(String(e.message || e)))
             },
-            'aria-expanded': open,
-            onClick: () => setOpen((v) => !v),
           },
-          React.createElement(
-            'div',
-            { style: { flex: 1 } },
-            React.createElement('div', { style: { fontWeight: 600, fontSize: '15px' } }, t('title')),
-            React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
-          ),
-          React.createElement('span', { className: 'cb-chevron' + (open ? ' cb-chevron-open' : '') },
-            React.createElement(Chevron)
-          )
-        ),
-        open
-          ? React.createElement(
-              'div',
-              { style: { marginTop: '16px' } },
-              React.createElement(
-                ErrorBoundary,
-                null,
-                React.createElement(SettingsPage, { ...props, ctx: (props && props.ctx) || ctx })
-              )
-            )
-          : null
+          t('settings.retry')
+        )
       )
     }
+    return React.createElement('div', { className: 'cb-page' }, t('settings.loading'))
+  }
+
+  const healthOk = !!status.health?.ok
+  const keyPresent = !!status.key?.present
+  const isRegistered = !!status.isRegistered
+  const modelsList = status.availableModels || []
+  const disabledSet = new Set(draft.disabledModels || [])
+  const enabledCount = modelsList.filter((m) => !disabledSet.has(m.id)).length
+  const usage = status.usage
+
+  return React.createElement(
+    'div',
+    { className: 'cb-page' },
+
+    // Page Header
+    React.createElement(
+      'div',
+      { className: 'cb-header' },
+      React.createElement(
+        'div',
+        { className: 'cb-page-title' },
+        `🤖 ${t('header.title')}`,
+        React.createElement(
+          'span',
+          { className: `cb-badge ${healthOk ? 'cb-badge-ok' : 'cb-badge-bad'}` },
+          healthOk ? t('badge.online', { latency: status.health?.latencyMs }) : t('badge.offline')
+        ),
+        React.createElement(
+          'span',
+          { className: `cb-badge ${keyPresent ? 'cb-badge-ok' : 'cb-badge-warn'}` },
+          keyPresent ? t('badge.key_ok', { source: status.key?.source }) : t('badge.key_missing')
+        ),
+        React.createElement(
+          'span',
+          { className: `cb-badge ${isRegistered ? 'cb-badge-ok' : 'cb-badge-warn'}` },
+          isRegistered ? t('badge.registered', { count: enabledCount }) : t('badge.not_registered')
+        )
+      ),
+      React.createElement('div', { className: 'cb-page-sub' }, t('header.sub'))
+    ),
+
+    // In-app Update Bar
+    React.createElement(UpdateBanner, { updateState, handleTriggerUpdate, t }),
+
+    // Notifications
+    err ? React.createElement('div', { className: 'cb-alert-bad' }, err) : null,
+    msg ? React.createElement('div', { className: 'cb-alert-ok' }, msg) : null,
+
+    // Card 1: API Key and Credentials
+    React.createElement(KeySection, {
+      keyPresent,
+      apiKeyInput,
+      setApiKeyInput,
+      showKey,
+      setShowKey,
+      busy,
+      draft,
+      handleSaveKey,
+      handleFastLogin,
+      t,
+    }),
+
+    // Accounts Pool Card
+    React.createElement(AccountsSection, { status, busy, handlePinAccount, t }),
+
+    // Quota Warning & Dashboard Card
+    React.createElement(QuotaSection, { keyPresent, status, usage, busy, handleRefreshQuota, t }),
+
+    // Card 3: Model Picker Management
+    React.createElement(ModelsSection, {
+      modelsList,
+      disabledSet,
+      enabledCount,
+      keyPresent,
+      busy,
+      handleSyncPlanModels,
+      handleSetModelsFilter,
+      handleToggleModel,
+      t,
+    }),
+
+    // Card 4: Session Metrics & Usage Tracking
+    React.createElement(StatsSection, { status, t }),
+
+    // Card 5: Diagnostics & Sync with DSH
+    React.createElement(DiagSection, {
+      keyPresent,
+      isRegistered,
+      busy,
+      smokeResult,
+      handleSmoke,
+      handleUnregister,
+      handleRegister,
+      t,
+    })
+  )
+}
+
+// --- src/client/plugin-card.js ---
+function PluginCard(props) {
+  const [open, setOpen] = React.useState(false)
+  const t = props?.t || makeT(en, en)
+  React.useEffect(() => {
+    ensureCss()
+  }, [])
+
+  return React.createElement(
+    'li',
+    { className: 'cb-section-card', style: { listStyle: 'none', marginBottom: '12px' } },
+    React.createElement(
+      'button',
+      {
+        type: 'button',
+        style: {
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          padding: 0,
+          textAlign: 'left',
+        },
+        'aria-expanded': open,
+        onClick: () => setOpen((v) => !v),
+      },
+      React.createElement(
+        'div',
+        { style: { flex: 1 } },
+        React.createElement('div', { style: { fontWeight: 600, fontSize: '15px' } }, t('title')),
+        React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
+      ),
+      React.createElement('span', { className: 'cb-chevron' + (open ? ' cb-chevron-open' : '') },
+        React.createElement(Chevron)
+      )
+    ),
+    open
+      ? React.createElement(
+          'div',
+          { style: { marginTop: '16px' } },
+          React.createElement(
+            ErrorBoundary,
+            null,
+            React.createElement(SettingsPage, { ...props, ctx: (props && props.ctx) || ctx })
+          )
+        )
+      : null
+  )
+}
 
-    function refreshMirrorUntilVisible(ctx) {
-      const visible = () => {
-        try {
-          const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope
-          const view = s?.describe?.()?.getSnapshot?.()?.view
-          return !!view && Array.isArray(view.namespaces) && view.namespaces.some((row) => row.ns === NS)
-        } catch (_) {
-          return false
-        }
-      }
-      if (visible()) return () => {}
-      let tries = 0
-      const timer = setInterval(() => {
-        if (visible() || tries >= 15) { clearInterval(timer); return }
-        tries += 1
-        try {
-          const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope
-          s?.describe?.()?.load?.()
-        } catch (e) {
-          console.debug?.('[dsh-clinebot] Polling settings mirror:', e)
-        }
-      }, 1000)
-      return () => clearInterval(timer)
+// --- src/client/entry.js ---
+function refreshMirrorUntilVisible(ctx) {
+  const visible = () => {
+    try {
+      const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope
+      const view = s?.describe?.()?.getSnapshot?.()?.view
+      return !!view && Array.isArray(view.namespaces) && view.namespaces.some((row) => row.ns === NS)
+    } catch (_) {
+      return false
     }
+  }
+  if (visible()) return () => {}
+  let tries = 0
+  const timer = setInterval(() => {
+    if (visible() || tries >= 15) { clearInterval(timer); return }
+    tries += 1
+    try {
+      const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope
+      s?.describe?.()?.load?.()
+    } catch (e) {
+      console.debug?.('[dsh-clinebot] Polling settings mirror:', e)
+    }
+  }, 1000)
+  return () => clearInterval(timer)
+}
 
-    function apply(ctx) {
-      const addLocale = (locale, dictionary) => {
-        try {
-          return ctx.locale.register(NS, locale, dictionary)
-        } catch (_) {
-          return () => {}
-        }
-      }
-      if (ctx.locale && ctx.locale.register) {
-        if (typeof ctx.effect === 'function') {
-          ctx.effect(() => {
-            const undo = [addLocale('en', en), addLocale('zh', zh)]
-            return () => { for (const off of undo) off() }
-          }, 'dsh-clinebot: dictionaries')
-        } else {
-          addLocale('en', en)
-          addLocale('zh', zh)
-        }
-      }
-
-      if (typeof ctx.effect === 'function') {
-        ctx.effect(
-          () => refreshMirrorUntilVisible(ctx),
-          'dsh-clinebot: re-read the settings mirror until our namespace appears',
-        )
-      }
-
-      function registerSlotWhenReady(slotName, registerFn) {
-        if (!ctx.slots) return
-        if (typeof ctx.slots.inject === 'function') {
-          try {
-            ctx.slots.inject(slotName, () => {
-              try {
-                return registerFn()
-              } catch (err) {
-                console.warn('[dsh-clinebot] Error registering slot ' + slotName + ':', err)
-              }
-            })
-            return
-          } catch (err) {
-            console.warn('[dsh-clinebot] Failed to inject slot ' + slotName + ':', err)
-          }
-        }
-        if (typeof ctx.slots.register === 'function') {
+function apply(ctx) {
+  const addLocale = (locale, dictionary) => {
+    try {
+      return ctx.locale.register(NS, locale, dictionary)
+    } catch (_) {
+      return () => {}
+    }
+  }
+  if (ctx.locale && ctx.locale.register) {
+    if (typeof ctx.effect === 'function') {
+      ctx.effect(() => {
+        const undo = [addLocale('en', en), addLocale('zh', zh)]
+        return () => { for (const off of undo) off() }
+      }, 'dsh-clinebot: dictionaries')
+    } else {
+      addLocale('en', en)
+      addLocale('zh', zh)
+    }
+  }
+
+  if (typeof ctx.effect === 'function') {
+    ctx.effect(
+      () => refreshMirrorUntilVisible(ctx),
+      'dsh-clinebot: re-read the settings mirror until our namespace appears',
+    )
+  }
+
+  function registerSlotWhenReady(slotName, registerFn) {
+    if (!ctx.slots) return
+    if (typeof ctx.slots.inject === 'function') {
+      try {
+        ctx.slots.inject(slotName, () => {
           try {
-            registerFn()
+            return registerFn()
           } catch (err) {
-            console.warn('[dsh-clinebot] Failed direct registration for ' + slotName + ':', err)
+            console.warn('[dsh-clinebot] Error registering slot ' + slotName + ':', err)
           }
-        }
+        })
+        return
+      } catch (err) {
+        console.warn('[dsh-clinebot] Failed to inject slot ' + slotName + ':', err)
+      }
+    }
+    if (typeof ctx.slots.register === 'function') {
+      try {
+        registerFn()
+      } catch (err) {
+        console.warn('[dsh-clinebot] Failed direct registration for ' + slotName + ':', err)
       }
-
-      registerSlotWhenReady('settings.plugin.item', () =>
-        ctx.slots.register(
-          {
-            name: 'settings.plugin.item',
-            key: NS,
-            locale: NS,
-            inject: () => ({ ctx }),
-          },
-          (props) => React.createElement(ErrorBoundary, null, React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx }))
-        )
-      )
     }
+  }
+
+  registerSlotWhenReady('settings.plugin.item', () =>
+    ctx.slots.register(
+      {
+        name: 'settings.plugin.item',
+        key: NS,
+        locale: NS,
+        inject: () => ({ ctx }),
+      },
+      (props) => React.createElement(ErrorBoundary, null, React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx }))
+    )
+  )
+}
+
+module.exports = { apply, inject: ['slots', 'locale', 'settingsScope'] }
 
-    module.exports = { apply, inject: ['slots', 'locale', 'settingsScope'] }
     return module.exports
   },
 })