@goodandready/dsh-clinebot 0.4.7 → 0.4.8

package/CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to `@goodandready/dsh-clinebot` will be documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.8] - 2026-09-27
+
+### Added
+- **Transparent Loopback Proxy (#127)**: High-performance streaming proxy endpoints at `/dsh-clinebot/v1/chat/completions` and `/dsh-clinebot/v1/models` compatible with OpenAI spec. Features zero-downtime retry on HTTP 429 before stream commits, live SSE token tracking, and direct binding into DSH `llm-pi-ai` provider.
+- **Sticky Session Least-Used Routing (#128)**: Session-aware routing selecting account with maximum quota remaining (`remainingPercent`) at session inception. Pins active session to selected account and triggers seamless failover on quota exhaustion or HTTP 429, with automatic cooldown expiration recovery.
+- **Persistent JSON Token Analytics (#129)**: Atomic file-based telemetry storage at `~/.dsh/clinebot-stats.json` tracking cumulative prompt/completion tokens, requests, and rate limits across models and accounts with debounced write operations. Accessible via `GET /dsh-clinebot/stats` and resettable via `POST /dsh-clinebot/stats/reset`.
+- **Per-Model Reasoning Effort Defaults & Custom Models (#130)**: Fine-grained `reasoning_effort` defaults (`low`, `medium`, `high`, `max`) per reasoning model in configuration and UI. Added support for user-defined custom models (`config.customModels`) integrated into dynamic catalog.
+- **Quota UX & Proactive Monitoring (#131)**: Human-readable reset countdown timer (`formatResetCountdown`) for rolling weekly and monthly quotas, proactive warning banners in settings and progress bars when remaining quota drops below 10%, and monthly billing cycle visibility.
+
 ## [0.4.7] - 2026-09-27
 
 ### Fixed & Cleaned

package/lib/client.js

@@ -122,6 +122,17 @@ const en = {
       'stats.tokens': 'Estimated Session Tokens',
       'stats.latency': 'Last Request Latency',
       'stats.last_req': 'Last Request Time',
+      'models.custom_add_title': 'Custom Models',
+      'models.custom_id': 'Model ID (e.g. anthropic/claude-3-7-sonnet)',
+      'models.custom_name': 'Display Name (optional)',
+      'models.custom_btn_add': 'Add Model',
+      'models.custom_btn_del': 'Delete',
+      'models.effort_auto': 'Auto Effort',
+      'stats.errors429': '429 Rate Limits (Failover)',
+      'stats.top_models': 'Top Models by Token Usage',
+      'stats.reset_btn': 'Reset Stats',
+      'stats.confirm_reset': 'Confirm Reset?',
+      'stats.cancel_reset': 'Cancel',
       'diag.title': '⚡ Diagnostics & Auto-Registration',
       'diag.desc': 'ClineBot registers into DSH Models automatically when key is configured. You can run connection smoke test or force re-sync.',
       'diag.smoke_btn': 'Run Smoke Test (Ping)',
@@ -238,6 +249,17 @@ const en = {
       'stats.tokens': '会话累计 Token 估算',
       'stats.latency': '最近一次请求延迟',
       'stats.last_req': '最近请求时间',
+      'models.custom_add_title': '自定义模型',
+      'models.custom_id': '模型 ID (例如 anthropic/claude-3-7-sonnet)',
+      'models.custom_name': '显示名称 (可选)',
+      'models.custom_btn_add': '添加模型',
+      'models.custom_btn_del': '删除',
+      'models.effort_auto': '自动思考强度',
+      'stats.errors429': '429 限流保护次数',
+      'stats.top_models': 'Token 消耗最高模型',
+      'stats.reset_btn': '重置统计',
+      'stats.confirm_reset': '确认重置？',
+      'stats.cancel_reset': '取消',
       'diag.title': '⚡ 诊断工具与服务接入',
       'diag.desc': '配置 API 密钥后，ClineBot 会自动向 DSH 注册模型服务。您可以在此进行连通性测试或强制重新同步。',
       'diag.smoke_btn': '执行连通性冒烟测试 (Ping)',
@@ -404,6 +426,29 @@ function createErrorBoundary() {
 const ErrorBoundary = createErrorBoundary()
 
 // --- src/client/progress-bar.js ---
+function formatResetCountdown(isoString) {
+  if (!isoString) return ''
+  try {
+    const d = new Date(isoString)
+    const diff = d.getTime() - Date.now()
+    if (Number.isNaN(diff)) return ''
+    if (diff <= 0) return 'resetting'
+    const totalHours = Math.floor(diff / (1000 * 60 * 60))
+    const days = Math.floor(totalHours / 24)
+    const hours = totalHours % 24
+    if (days > 0) {
+      return `${days}d ${hours}h`
+    }
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+    if (hours > 0) {
+      return `${hours}h ${minutes}m`
+    }
+    return `${Math.max(1, minutes)}m`
+  } catch {
+    return ''
+  }
+}
+
 function formatResetTime(isoString) {
   if (!isoString) return ''
   try {
@@ -417,10 +462,11 @@ function formatResetTime(isoString) {
 
 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 isWarn = pct >= 80 && pct < 90
+  const isBad = pct >= 90
   const barClass = isBad ? 'cb-progress-bar-bad' : isWarn ? 'cb-progress-bar-warn' : 'cb-progress-bar-fill'
-  const resetLabel = formatResetTime(resetsAt)
+  const resetCountdown = formatResetCountdown(resetsAt)
+  const resetClock = formatResetTime(resetsAt)
 
   return React.createElement(
     'div',
@@ -432,7 +478,7 @@ function ProgressBar({ label, percentUsed, remainingPercent, resetsAt, t }) {
         gap: '8px',
         padding: '12px 14px',
         borderRadius: '8px',
-        border: '1px solid var(--dsw-alias-border-l2)',
+        border: isBad ? '1px solid var(--dsw-alias-error, #f87171)' : '1px solid var(--dsw-alias-border-l2)',
         background: 'var(--dsw-alias-bg-layer-2)',
       },
     },
@@ -448,20 +494,25 @@ function ProgressBar({ label, percentUsed, remainingPercent, resetsAt, t }) {
           width: '100%',
         },
       },
-      React.createElement('span', { className: 'cb-progress-label', style: { fontWeight: 500, whiteSpace: 'nowrap' } }, label),
+      React.createElement(
+        'span',
+        { className: 'cb-progress-label', style: { fontWeight: 500, whiteSpace: 'nowrap' } },
+        label,
+        isBad ? React.createElement('span', { style: { marginLeft: '6px', fontSize: '11px', color: 'var(--dsw-alias-error, #f87171)' } }, '⚠️ <10%') : null
+      ),
       React.createElement(
         'span',
         {
           className: 'cb-progress-meta cb-bar-meta',
           style: {
             fontSize: '12px',
-            color: 'var(--dsw-alias-label-secondary)',
+            color: isBad ? 'var(--dsw-alias-error, #f87171)' : 'var(--dsw-alias-label-secondary)',
             whiteSpace: 'nowrap',
             marginLeft: 'auto',
           },
         },
         t('quota.used', { pct }),
-        resetLabel ? ` · ${t('quota.reset_at', { time: resetLabel })}` : ''
+        resetCountdown ? ` · ${t('quota.countdown', { time: resetCountdown })}` : (resetClock ? ` · ${t('quota.reset_at', { time: resetClock })}` : '')
       )
     ),
     React.createElement(
@@ -868,6 +919,12 @@ function AccountsSection({ status, busy, handlePinAccount, handleAddAccount, han
 
 // --- src/client/components/quota-section.js ---
 function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }) {
+  const isLowQuota = Boolean(
+    (usage?.windows?.weekly && typeof usage.windows.weekly.remainingPercent === 'number' && usage.windows.weekly.remainingPercent <= 10) ||
+    (usage?.windows?.monthly && typeof usage.windows.monthly.remainingPercent === 'number' && usage.windows.monthly.remainingPercent <= 10) ||
+    (usage?.windows?.fiveHour && typeof usage.windows.fiveHour.remainingPercent === 'number' && usage.windows.fiveHour.remainingPercent <= 10)
+  )
+
   return React.createElement(
     React.Fragment,
     null,
@@ -889,7 +946,14 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }
               : null
           )
         )
-      : null,
+      : (isLowQuota
+          ? React.createElement(
+              'div',
+              { className: 'cb-banner-warning' },
+              React.createElement('span', { style: { fontSize: '16px' } }, '⚠️'),
+              React.createElement('div', { style: { flex: 1 } }, t('quota.warning_low'))
+            )
+          : null),
     keyPresent
       ? React.createElement(
           'div',
@@ -918,27 +982,183 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }
           ),
           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,
-            }),
+            { className: 'cb-grid-2', style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '10px' } },
+            usage?.windows?.fiveHour
+              ? 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,
+                })
+              : null,
             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,
-            })
+            }),
+            usage?.windows?.monthly
+              ? React.createElement(ProgressBar, {
+                  label: t('quota.window_monthly'),
+                  percentUsed: usage.windows.monthly.percentUsed || 0,
+                  remainingPercent: usage.windows.monthly.remainingPercent || 100,
+                  resetsAt: usage.windows.monthly.resetsAt,
+                  t,
+                })
+              : null
           )
         )
       : null
   )
 }
 
+// --- src/client/components/custom-models.js ---
+function CustomModelsSub({ customModels = [], onConfigUpdate, busy, t }) {
+  const [newId, setNewId] = React.useState('')
+  const [newName, setNewName] = React.useState('')
+  const [isExpanded, setIsExpanded] = React.useState(false)
+
+  function handleAdd() {
+    const trimmedId = newId.trim()
+    const trimmedName = newName.trim() || trimmedId
+    if (!trimmedId) return
+    const nextList = [...customModels.filter((m) => m.id !== trimmedId), {
+      id: trimmedId,
+      name: trimmedName,
+      contextLength: 128000,
+      maxTokens: 8192,
+      category: 'general',
+      isCustom: true,
+    }]
+    if (typeof onConfigUpdate === 'function') {
+      onConfigUpdate({ customModels: nextList })
+    }
+    setNewId('')
+    setNewName('')
+  }
+
+  function handleDelete(id) {
+    const nextList = customModels.filter((m) => m.id !== id)
+    if (typeof onConfigUpdate === 'function') {
+      onConfigUpdate({ customModels: nextList })
+    }
+  }
+
+  return React.createElement(
+    'div',
+    {
+      style: {
+        marginTop: '16px',
+        paddingTop: '14px',
+        borderTop: '1px solid var(--dsw-alias-border-l2)',
+      },
+    },
+    React.createElement(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          cursor: 'pointer',
+        },
+        onClick: () => setIsExpanded(!isExpanded),
+      },
+      React.createElement(
+        'span',
+        { style: { fontWeight: 500, fontSize: '13px', color: 'var(--dsw-alias-label-primary)' } },
+        `➕ ${t('models.custom_add_title')} (${customModels.length})`
+      ),
+      React.createElement(
+        'span',
+        { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } },
+        isExpanded ? '▲' : '▼'
+      )
+    ),
+    isExpanded
+      ? React.createElement(
+          'div',
+          { style: { marginTop: '12px', display: 'flex', flexDirection: 'column', gap: '10px' } },
+          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('models.custom_id'),
+              value: newId,
+              disabled: !!busy,
+              onChange: (e) => setNewId(e.target.value),
+            }),
+            React.createElement('input', {
+              type: 'text',
+              className: 'cb-input',
+              style: { flex: '1 1 180px' },
+              placeholder: t('models.custom_name'),
+              value: newName,
+              disabled: !!busy,
+              onChange: (e) => setNewName(e.target.value),
+            }),
+            React.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'cb-btn cb-btn-primary',
+                disabled: !newId.trim() || !!busy,
+                onClick: handleAdd,
+              },
+              t('models.custom_btn_add')
+            )
+          ),
+          customModels.length > 0
+            ? React.createElement(
+                'div',
+                { style: { display: 'flex', flexDirection: 'column', gap: '6px', marginTop: '6px' } },
+                customModels.map((cm) =>
+                  React.createElement(
+                    'div',
+                    {
+                      key: cm.id,
+                      style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        padding: '6px 10px',
+                        background: 'var(--dsw-alias-bg-layer-2)',
+                        border: '1px solid var(--dsw-alias-border-l2)',
+                        borderRadius: '6px',
+                        fontSize: '12px',
+                      },
+                    },
+                    React.createElement(
+                      'div',
+                      null,
+                      React.createElement('span', { style: { fontWeight: 500 } }, cm.name || cm.id),
+                      React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)', marginLeft: '8px' } }, `(${cm.id})`)
+                    ),
+                    React.createElement(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'cb-btn',
+                        style: { padding: '2px 8px', fontSize: '11px' },
+                        disabled: !!busy,
+                        onClick: () => handleDelete(cm.id),
+                      },
+                      t('models.custom_btn_del')
+                    )
+                  )
+                )
+              )
+            : null
+        )
+      : null
+  )
+}
+
 // --- src/client/components/models-section.js ---
 function ModelsSection({
   modelsList,
@@ -953,6 +1173,10 @@ function ModelsSection({
   planSynced,
   planSyncedAt,
   defaultModelWarning,
+  customModels,
+  modelReasoningDefaults,
+  onConfigUpdate,
+  onUpdateReasoningEffort,
   t,
 }) {
   const syncDateStr = planSyncedAt ? new Date(planSyncedAt).toLocaleDateString() : ''
@@ -1337,7 +1561,30 @@ function ModelsSection({
                     ? 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')
+                    ? React.createElement(
+                        React.Fragment,
+                        null,
+                        React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: (category || hasVision) ? '4px' : '0' }, title: t('models.reasoning_tooltip') }, '🧠 Reasoning'),
+                        React.createElement(
+                          'select',
+                          {
+                            className: 'cb-select',
+                            style: { marginLeft: '4px', fontSize: '10px', padding: '1px 3px' },
+                            value: (modelReasoningDefaults && modelReasoningDefaults[m.id]) || '',
+                            disabled: !!busy,
+                            onChange: (e) => {
+                              if (typeof onUpdateReasoningEffort === 'function') {
+                                onUpdateReasoningEffort(m.id, e.target.value)
+                              }
+                            },
+                          },
+                          React.createElement('option', { value: '' }, t('models.effort_auto')),
+                          React.createElement('option', { value: 'low' }, 'Low'),
+                          React.createElement('option', { value: 'medium' }, 'Medium'),
+                          React.createElement('option', { value: 'high' }, 'High'),
+                          React.createElement('option', { value: 'max' }, 'Max')
+                        )
+                      )
                     : null
                 )
               })()
@@ -1345,45 +1592,139 @@ function ModelsSection({
           )
         })
       )
-    )
+    ),
+    typeof CustomModelsSub === 'function'
+      ? React.createElement(CustomModelsSub, {
+          customModels: customModels || [],
+          onConfigUpdate: onConfigUpdate,
+          busy: busy,
+          t: t,
+        })
+      : null
   )
 }
 
 // --- src/client/components/stats-section.js ---
-function StatsSection({ status, t }) {
+function StatsSection({ status, onResetStats, busy, t }) {
+  const [confirmReset, setConfirmReset] = React.useState(false)
+
+  const s = status?.statsSummary || {}
+  const sess = status?.sessionStats || {}
+
+  const topModels = Object.entries(s.byModel || {})
+    .sort((a, b) => (b[1].tokens || 0) - (a[1].tokens || 0))
+    .slice(0, 5)
+
   return React.createElement(
     'div',
     { className: 'cb-section-card' },
-    React.createElement('div', { className: 'cb-section-title' }, t('stats.title')),
+    React.createElement(
+      'div',
+      { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' } },
+      React.createElement('div', { className: 'cb-section-title' }, t('stats.title')),
+      React.createElement(
+        'div',
+        null,
+        confirmReset
+          ? React.createElement(
+              React.Fragment,
+              null,
+              React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cb-btn cb-btn-warn',
+                  style: { padding: '2px 8px', fontSize: '11px', marginRight: '6px' },
+                  disabled: !!busy,
+                  onClick: () => {
+                    setConfirmReset(false)
+                    if (typeof onResetStats === 'function') onResetStats()
+                  },
+                },
+                t('stats.confirm_reset')
+              ),
+              React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cb-btn',
+                  style: { padding: '2px 8px', fontSize: '11px' },
+                  onClick: () => setConfirmReset(false),
+                },
+                t('stats.cancel_reset')
+              )
+            )
+          : React.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'cb-btn',
+                style: { padding: '2px 8px', fontSize: '11px' },
+                disabled: !!busy,
+                onClick: () => setConfirmReset(true),
+              },
+              t('stats.reset_btn')
+            )
+      )
+    ),
     React.createElement('div', { className: 'cb-section-desc' }, t('stats.desc')),
     React.createElement(
       'div',
-      { className: 'cb-grid-2' },
+      { className: 'cb-grid-2', style: { marginTop: '12px' } },
       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-val' }, `${s.requests || 0} (${sess.successfulRequests || 0} sess)`),
         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-val' }, `${Number(s.totalTokens || 0).toLocaleString()}`),
         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-val' }, `${s.errors429 || 0}`),
+        React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.errors429'))
       ),
       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'))
+        React.createElement('div', { className: 'cb-stat-val' }, sess.lastLatencyMs ? `${sess.lastLatencyMs} ms` : '—'),
+        React.createElement('div', { className: 'cb-stat-lbl' }, t('stats.latency'))
       )
-    )
+    ),
+    topModels.length > 0
+      ? React.createElement(
+          'div',
+          { style: { marginTop: '14px' } },
+          React.createElement('div', { style: { fontSize: '12px', fontWeight: 500, marginBottom: '6px', color: 'var(--dsw-alias-label-secondary)' } }, t('stats.top_models')),
+          React.createElement(
+            'div',
+            { style: { display: 'flex', flexDirection: 'column', gap: '4px' } },
+            topModels.map(([modId, data]) =>
+              React.createElement(
+                'div',
+                {
+                  key: modId,
+                  style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    fontSize: '11px',
+                    padding: '4px 8px',
+                    background: 'var(--dsw-alias-bg-layer-2)',
+                    borderRadius: '4px',
+                  },
+                },
+                React.createElement('span', { style: { fontFamily: 'monospace' } }, modId),
+                React.createElement('span', null, `${data.requests || 0} reqs · ${Number(data.tokens || 0).toLocaleString()} tok`)
+              )
+            )
+          )
+        )
+      : null
   )
 }
 
@@ -1469,14 +1810,8 @@ function SettingsPage(props) {
   const [smokeResult, setSmokeResult] = React.useState(null)
 
   const [updateState, setUpdateState] = React.useState({
-    checking: false,
-    updating: false,
-    currentVersion: '',
-    latestVersion: '',
-    updateAvailable: false,
-    canAutoUpdate: true,
-    error: '',
-    notice: '',
+    checking: false, updating: false, currentVersion: '', latestVersion: '',
+    updateAvailable: false, canAutoUpdate: true, error: '', notice: '',
   })
 
   const [apiKeyInput, setApiKeyInput] = React.useState('')
@@ -1486,10 +1821,14 @@ function SettingsPage(props) {
 
   const load = React.useCallback(async () => {
     setErr('')
-    const res = await fetch(`${ROUTE_PREFIX}/status`, { cache: 'no-store' })
+    const [res, statsRes] = await Promise.all([
+      fetch(`${ROUTE_PREFIX}/status`, { cache: 'no-store' }),
+      fetch(`${ROUTE_PREFIX}/stats`, { cache: 'no-store' }).catch(() => null),
+    ])
     const data = await res.json().catch(() => ({}))
     if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
-    setStatus(data)
+    const statsData = statsRes && statsRes.ok ? await statsRes.json().catch(() => null) : null
+    setStatus({ ...data, statsSummary: statsData || data.statsSummary })
     setDraft(data.config || {})
   }, [])
 
@@ -1718,6 +2057,28 @@ function SettingsPage(props) {
     })
   }
 
+  async function handleConfigPatch(patch) {
+    await performAction('patch-config', async () => {
+      const res = await fetch(`${ROUTE_PREFIX}/config`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(patch),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      await load()
+    })
+  }
+
+  async function handleResetStats() {
+    await performAction('reset-stats', async () => {
+      const res = await fetch(`${ROUTE_PREFIX}/stats/reset`, { method: 'POST' })
+      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 }
 
   React.useEffect(() => {
@@ -1787,19 +2148,7 @@ function SettingsPage(props) {
         'div',
         { className: 'cb-page' },
         React.createElement('div', { className: 'cb-alert cb-alert-err' }, `${t('settings.loading')}: ${err}`),
-        React.createElement(
-          'button',
-          {
-            type: 'button',
-            className: 'cb-btn',
-            style: { marginTop: '12px', alignSelf: 'flex-start' },
-            onClick: () => {
-              setErr('')
-              load().catch((e) => setErr(String(e.message || e)))
-            },
-          },
-          t('settings.retry')
-        )
+        React.createElement('button', { type: 'button', className: 'cb-btn', style: { marginTop: '12px' }, onClick: () => { setErr(''); load().catch((e) => setErr(String(e.message || e))) } }, t('settings.retry'))
       )
     }
     return React.createElement('div', { className: 'cb-page' }, t('settings.loading'))
@@ -1898,11 +2247,20 @@ function SettingsPage(props) {
       planSynced: !!(status?.config?.planSynced || (status?.config?.dynamicModels && status.config.dynamicModels.length > 0)),
       planSyncedAt: status?.config?.planSyncedAt || 0,
       defaultModelWarning: status?.config?.defaultModelWarning || '',
+      customModels: draft?.customModels || [],
+      modelReasoningDefaults: draft?.modelReasoningDefaults || {},
+      onConfigUpdate: handleConfigPatch,
+      onUpdateReasoningEffort: (modelId, effort) => {
+        const next = { ...(draft?.modelReasoningDefaults || {}) }
+        if (!effort) delete next[modelId]
+        else next[modelId] = effort
+        handleConfigPatch({ modelReasoningDefaults: next })
+      },
       t,
     }),
 
     // Card 4: Session Metrics & Usage Tracking
-    React.createElement(StatsSection, { status, t }),
+    React.createElement(StatsSection, { status, onResetStats: handleResetStats, busy, t }),
 
     // Card 5: Diagnostics & Sync with DSH
     React.createElement(DiagSection, {