@goodandready/dsh-clinebot 0.5.32 → 0.6.0

package/lib/client.js

@@ -51,7 +51,7 @@ const en = {
       'header.sub': 'Connect models under your active ClinePass subscription. OpenAI API compatible, automated rolling limit tracking, and instant auto-registration in DSH.',
       'badge.online': 'Host online ({latency} ms)',
       'badge.offline': 'Host unreachable',
-      'badge.key_ok': 'Key ✓ ({source})',
+      'badge.key_ok': 'Key set ({source})',
       'badge.key_missing': 'Key missing',
       'badge.registered': 'DSH Registered ({count} models)',
       'badge.not_registered': 'Not registered',
@@ -65,8 +65,8 @@ const en = {
       'key.saving': 'Saving…',
       'key.login_fast': 'Open API Keys ↗',
       'key.verifying': 'Validating key with Cline…',
-      'key.verified': '✓ Valid key for {email} ({plan})',
-      'key.invalid': '✗ Key validation failed: {error}',
+      'key.verified': 'Valid key for {email} ({plan})',
+      'key.invalid': 'Key validation failed: {error}',
       'key.env_label': 'Credential environment name: ',
       'key.get_key': 'Get key in app.cline.bot console ↗',
       'key.saved_msg': 'Key saved to DSH Credentials. Validation: {status}',
@@ -93,6 +93,11 @@ const en = {
       'accounts.route_model_placeholder': 'Model ID (e.g. cline-pass/deepseek-v4-pro)',
       'accounts.route_account_placeholder': 'Target Account',
       'accounts.route_btn_add': 'Add Route',
+      'accounts.actions': 'Account actions', 'accounts.configured': 'Configured', 'accounts.missing_key': 'Missing key', 'accounts.source': 'Source: {source}',
+      'accounts.quota_5h': '5h {pct}%', 'accounts.rename': 'Rename', 'accounts.rename_save': 'Save name', 'accounts.rename_placeholder': 'Account label',
+      'accounts.clear_key': 'Clear stored key', 'accounts.clear_confirm': 'Clear the stored key for {name}? The account row stays.',
+      'accounts.remove_confirm': 'Remove {name} from the pool?', 'accounts.confirm': 'Confirm', 'accounts.cancel': 'Cancel', 'accounts.unpin': 'Unpin',
+      'accounts.no_accounts': 'No accounts configured yet.', 'accounts.route_remove': 'Remove route',
       'quota.title': 'ClinePass Quota & Rate Limits',
       'quota.desc': 'Official rolling window request limits from ClinePass',
       'quota.account': 'Account: {email} · Plan: {plan}',
@@ -119,9 +124,9 @@ const en = {
       'models.caps_vision': 'Vision',
       'models.caps_general': 'General',
       'models.caps_coding': 'Coding',
-      'diag.smoke_result': '✅ Latency: {latency} ms | Model: {model}\nResponse: {preview}',
+      'diag.smoke_result': 'Latency: {latency} ms | Model: {model}\nResponse: {preview}',
       'diag.empty': '(empty)',
-      'ui.error_title': '⚠️ ClineBot UI Error: ',
+      'ui.error_title': 'ClineBot UI Error: ',
       'ui.retry': 'Retry',
       'update.check_failed': 'Failed to check for updates',
       'update.retry': 'Retry check',
@@ -242,13 +247,86 @@ const en = {
       'composer.completion_tok': 'Completion Tokens',
       'composer.reasoning_tok': 'Reasoning Tokens',
       'composer.est_cost': 'Estimated Cost',
+      'composer.unpriced': 'unpriced', 'composer.cache_read': 'Cache Read', 'composer.cache_write': 'Cache Write',
+      'composer.price_source': 'Price', 'composer.price_estimate': 'estimate', 'composer.price_override': 'override',
       'discovery.title': 'Discovered Local Keys',
       'discovery.import_btn': 'Import from {source}',
       'discovery.imported': 'Imported to accounts pool',
       'discovery.scanning': 'Scanning for local Cline keys…',
+      'settings.unsaved': '{count} unsaved change(s)', 'settings.saving': 'Saving…', 'settings.saved': 'Settings saved', 'settings.save_failed': 'Could not save settings', 'settings.save': 'Save', 'settings.discard': 'Discard',
+      'settings.save_invalid_base_url': 'Base URL must be https:// or a localhost address.', 'settings.save_invalid_number': 'Timeouts and payload limits must be positive numbers.',
+      'settings.models_group': 'Models & context', 'settings.models_group_hint': 'Plan filter, visible models, context windows, output limits and reasoning defaults.',
+      'settings.integrations': 'Integrations & display', 'settings.integrations_desc': 'Surfaces outside the chat request that reuse this provider.',
+      'settings.web_search': 'Serve web search with ClineBot', 'settings.web_search_hint': 'Use the ClinePass endpoint for the DSH web_search tool.',
+      'settings.sidebar_quota': 'Show quota meter in the sidebar', 'settings.sidebar_quota_hint': 'Display the compact plan and rolling-window meter above Settings.',
+      'settings.composer_cost': 'Show session cost in the composer', 'settings.composer_cost_hint': 'Display the estimated token cost beside the composer.',
+      'settings.proxy_mode': 'Transparent loopback proxy', 'settings.proxy_mode_hint': 'Legacy transport only: route requests through the local failover proxy.',
+      'settings.advanced': 'Advanced', 'settings.advanced_desc': 'Connection, timeouts, storage paths and the temporary transport switch.',
+      'settings.base_url': 'API base URL', 'settings.base_url_hint': 'ClinePass API root. Remote endpoints must use https://.',
+      'settings.timeout': 'Connect timeout (ms)', 'settings.timeout_hint': 'Maximum wait for the upstream response headers.', 'settings.smoke_timeout': 'Smoke-test timeout (ms)', 'settings.smoke_timeout_hint': 'Maximum wait for the diagnostic chat completion.',
+      'settings.stream_idle': 'Stream idle timeout (ms)', 'settings.stream_idle_hint': 'Maximum gap between SSE chunks before the stream is treated as dead.', 'settings.max_payload': 'Max multimodal payload (MB)', 'settings.max_payload_hint': 'Oldest images are evicted once the request exceeds this budget.',
+      'settings.stats_path': 'Stats file path', 'settings.stats_path_hint': 'Persistent JSON telemetry path (supports ~/).', 'settings.models_cache_path': 'Models cache path', 'settings.models_cache_path_hint': 'Offline model catalogue cache (supports ~/).',
+      'settings.transport': 'Transport', 'settings.transport_hint': 'Native ctx.llm adapter (recommended) or the legacy llm-pi-ai + loopback proxy.',
+      'providerCard.title': 'ClineBot (ClinePass)',
+      'providerCard.hint': 'Paste a ClinePass API key or manage the full account pool in Settings → ClineBot.',
+      'providerCard.keyPresent': 'Key configured',
+      'providerCard.keyMissing': 'Key missing',
+      'providerCard.routeActive': 'Route active',
+      'providerCard.placeholder': 'Paste API key',
+      'providerCard.replace': 'Replace API key',
+      'providerCard.save': 'Save key',
+      'providerCard.saving': 'Saving…',
+      'providerCard.saved': 'Key saved and validated',
+      'providerCard.failed': 'Could not save the key',
+      'providerCard.show': 'Show',
+      'providerCard.hide': 'Hide',
+      'providerCard.openSettings': 'Open Settings → ClineBot for accounts, models and quotas.',
+      'dashboard.tab_quota': 'Quota', 'dashboard.tab_analytics': 'Analytics', 'dashboard.auto_account': 'Automatic (least used)',
+      'analytics.title': 'Usage analytics', 'analytics.requests': 'Requests', 'analytics.tokens': 'Tokens', 'analytics.cost': 'Estimated cost', 'analytics.success': 'Success rate', 'analytics.ttft': 'Avg TTFT',
+      'analytics.loading': 'Loading analytics…', 'analytics.no_data': 'No analytics yet. Send a few messages first.',
+      'analytics.unpriced': '{count} request(s) have no price estimate and are excluded from cost totals.',
+      'analytics.group_model': 'Models', 'analytics.group_day': 'Days', 'analytics.group_session': 'Sessions',
+      'analytics.heatmap': 'Request heatmap', 'analytics.heatmap_hint': 'Requests per hour over the last 7 days.',
+      'analytics.heatmap_less': 'Less', 'analytics.heatmap_more': 'More',
+      'analytics.heatmap_empty': 'No hourly data yet. Send a message to start the heatmap.',
+      'analytics.input': 'Input', 'analytics.output': 'Output', 'analytics.reasoning': 'Reasoning',
+      'analytics.cache_read': 'Cache read', 'analytics.cache_write': 'Cache write',
+      'analytics.avg_ttft': 'Avg TTFT', 'analytics.avg_latency': 'Avg latency', 'analytics.errors': 'Errors',
+      'analytics.no_key': 'ClinePass key is not configured.',
+      'analytics.no_key_hint': 'Open Settings → ClineBot and paste a key, or import a discovered local key.',
+      'analytics.health_error': 'ClinePass endpoint is unreachable.',
+      'analytics.not_registered': 'ClineBot provider is not registered with DSH.',
+      'analytics.not_registered_hint': 'Open Settings → ClineBot and check Diagnostics.',
+      'analytics.stale': 'Showing the last successful snapshot.',
+      'analytics.range': 'Range', 'analytics.range_7': '7 days', 'analytics.range_30': '30 days', 'analytics.range_90': '90 days',
+      'analytics.heatmap_all_models': 'All models', 'analytics.heatmap_peak': 'Peak',
+      'analytics.heatmap_by_hour': 'By hour', 'analytics.heatmap_model': 'Heatmap model',
+      'quota.no_windows': 'No quota windows reported.',
+      'prices.title': 'Price overrides', 'prices.desc': 'USD per 1M tokens. Blank uses the local estimate.',
+      'prices.show': 'Show prices', 'prices.hide': 'Hide prices', 'prices.model': 'Model',
+      'prices.input': 'Input', 'prices.output': 'Output', 'prices.cache_read': 'Cache read', 'prices.cache_write': 'Cache write',
+      'prices.auto': 'auto', 'prices.empty': 'No models available.',
+      'prices.hint': 'These rates affect the composer and local analytics only; they are not an invoice.',
     }
 
-    const zh = {
+    function makeT(dict, fallback) {
+      return function t(key, vars) {
+        if (key === 'quota.countdown' && vars?.time === 'resetting') {
+          return (dict && dict['quota.resetting']) || (fallback && fallback['quota.resetting']) || '正在重置'
+        }
+        let val = (dict && dict[key]) || (fallback && fallback[key]) || key
+        if (vars && typeof val === 'string') {
+          for (const k of Object.keys(vars)) {
+            val = val.replace(new RegExp('\\{' + k + '\\}', 'g'), String(vars[k]))
+          }
+        }
+        return val
+      }
+    }
+
+// --- src/client/locales-zh.js ---
+// Chinese locale dictionary.
+const zh = {
       nav: 'ClineBot',
       title: 'ClineBot',
       subtitle: 'ClinePass 订阅服务，包含动态套餐模型。',
@@ -274,8 +352,8 @@ const en = {
       'key.saving': '正在保存…',
       'key.login_fast': '打开 API 密钥页 ↗',
       'key.verifying': '正在连接 Cline 验证密钥…',
-      'key.verified': '✓ 密钥有效：{email} ({plan})',
-      'key.invalid': '✗ 密钥验证未通过：{error}',
+      'key.verified': '密钥有效：{email} ({plan})',
+      'key.invalid': '密钥验证未通过：{error}',
       'key.env_label': '凭据环境变量名称：',
       'key.get_key': '前往 app.cline.bot 控制台获取密钥 ↗',
       'key.saved_msg': '密钥已成功保存至 DSH 凭据服务。验证状态：{status}',
@@ -302,6 +380,11 @@ const en = {
       'accounts.route_model_placeholder': '模型 ID (例如 cline-pass/deepseek-v4-pro)',
       'accounts.route_account_placeholder': '目标账号',
       'accounts.route_btn_add': '添加路由',
+      'accounts.actions': '账户操作', 'accounts.configured': '已配置', 'accounts.missing_key': '缺少密钥', 'accounts.source': '来源：{source}',
+      'accounts.quota_5h': '5小时 {pct}%', 'accounts.rename': '重命名', 'accounts.rename_save': '保存名称', 'accounts.rename_placeholder': '账户名称',
+      'accounts.clear_key': '清除已存密钥', 'accounts.clear_confirm': '清除 {name} 的已存密钥？账户行会保留。',
+      'accounts.remove_confirm': '从池中移除 {name}？', 'accounts.confirm': '确认', 'accounts.cancel': '取消', 'accounts.unpin': '取消固定',
+      'accounts.no_accounts': '尚未配置账户。', 'accounts.route_remove': '移除路由',
       'quota.title': 'ClinePass 用量配额与限额监控',
       'quota.desc': '来自 ClinePass 官方的实时滚动窗口用量限额',
       'quota.account': '账号：{email} · 套餐：{plan}',
@@ -328,9 +411,9 @@ const en = {
       'models.caps_vision': '视觉',
       'models.caps_general': '通用',
       'models.caps_coding': '编程',
-      'diag.smoke_result': '✅ 延迟：{latency} ms | 模型：{model}\n响应：{preview}',
+      'diag.smoke_result': '延迟：{latency} ms | 模型：{model}\n响应：{preview}',
       'diag.empty': '(空)',
-      'ui.error_title': '⚠️ ClineBot 界面错误：',
+      'ui.error_title': 'ClineBot 界面错误：',
       'ui.retry': '重试',
       'update.check_failed': '检查更新失败',
       'update.retry': '重试检查',
@@ -451,25 +534,66 @@ const en = {
       'composer.completion_tok': '补全 Token',
       'composer.reasoning_tok': '思考推理 Token',
       'composer.est_cost': '预估花费',
+      'composer.unpriced': '无价格', 'composer.cache_read': '缓存读取', 'composer.cache_write': '缓存写入',
+      'composer.price_source': '价格来源', 'composer.price_estimate': '估算', 'composer.price_override': '覆盖',
       'discovery.title': '发现本地密钥',
       'discovery.import_btn': '从 {source} 导入',
       'discovery.imported': '已成功导入账户池',
       'discovery.scanning': '正在扫描本地 Cline 密钥…',
-    }
-
-    function makeT(dict, fallback) {
-      return function t(key, vars) {
-        if (key === 'quota.countdown' && vars?.time === 'resetting') {
-          return (dict && dict['quota.resetting']) || (fallback && fallback['quota.resetting']) || '正在重置'
-        }
-        let val = (dict && dict[key]) || (fallback && fallback[key]) || key
-        if (vars && typeof val === 'string') {
-          for (const k of Object.keys(vars)) {
-            val = val.replace(new RegExp('\\{' + k + '\\}', 'g'), String(vars[k]))
-          }
-        }
-        return val
-      }
+      'settings.unsaved': '{count} 项未保存更改', 'settings.saving': '正在保存…', 'settings.saved': '设置已保存', 'settings.save_failed': '无法保存设置', 'settings.save': '保存', 'settings.discard': '放弃',
+      'settings.save_invalid_base_url': 'Base URL 必须使用 https:// 或 localhost。', 'settings.save_invalid_number': '超时和负载限制必须是正数。',
+      'settings.models_group': '模型与上下文', 'settings.models_group_hint': '套餐过滤、可见模型、上下文窗口、输出上限和推理默认值。',
+      'settings.integrations': '集成与显示', 'settings.integrations_desc': '聊天请求之外复用此服务商的界面入口。',
+      'settings.web_search': '使用 ClineBot 提供网页搜索', 'settings.web_search_hint': '为 DSH web_search 工具使用 ClinePass 端点。',
+      'settings.sidebar_quota': '在侧边栏显示配额', 'settings.sidebar_quota_hint': '在设置上方显示紧凑的套餐与滚动窗口配额。',
+      'settings.composer_cost': '在输入框显示会话成本', 'settings.composer_cost_hint': '在输入框旁显示预估 token 成本。',
+      'settings.proxy_mode': '透明回环代理', 'settings.proxy_mode_hint': '仅旧传输：通过本地故障转移代理发送请求。',
+      'settings.advanced': '高级', 'settings.advanced_desc': '连接、超时、存储路径和临时传输开关。',
+      'settings.base_url': 'API 基础地址', 'settings.base_url_hint': 'ClinePass API 根地址。远程端点必须使用 https://。',
+      'settings.timeout': '连接超时（毫秒）', 'settings.timeout_hint': '等待上游响应头的最大时间。', 'settings.smoke_timeout': '烟雾测试超时（毫秒）', 'settings.smoke_timeout_hint': '等待诊断聊天补全的最大时间。',
+      'settings.stream_idle': '流空闲超时（毫秒）', 'settings.stream_idle_hint': 'SSE 数据块之间的最大间隔，超过后视为断流。', 'settings.max_payload': '多模态负载上限（MB）', 'settings.max_payload_hint': '请求超过预算时会淘汰最旧的图片。',
+      'settings.stats_path': '统计文件路径', 'settings.stats_path_hint': '持久化 JSON 遥测路径（支持 ~/）。', 'settings.models_cache_path': '模型缓存路径', 'settings.models_cache_path_hint': '离线模型目录缓存（支持 ~/）。',
+      'settings.transport': '传输方式', 'settings.transport_hint': '原生 ctx.llm 适配器（推荐）或旧版 llm-pi-ai + 回环代理。',
+      'providerCard.title': 'ClineBot（ClinePass）',
+      'providerCard.hint': '粘贴 ClinePass API 密钥，或前往“设置 → ClineBot”管理完整账户池。',
+      'providerCard.keyPresent': '密钥已配置',
+      'providerCard.keyMissing': '缺少密钥',
+      'providerCard.routeActive': '路由已启用',
+      'providerCard.placeholder': '粘贴 API 密钥',
+      'providerCard.replace': '替换 API 密钥',
+      'providerCard.save': '保存密钥',
+      'providerCard.saving': '正在保存…',
+      'providerCard.saved': '密钥已保存并验证',
+      'providerCard.failed': '无法保存密钥',
+      'providerCard.show': '显示',
+      'providerCard.hide': '隐藏',
+      'providerCard.openSettings': '前往“设置 → ClineBot”管理账户、模型和配额。',
+      'dashboard.tab_quota': '配额', 'dashboard.tab_analytics': '分析', 'dashboard.auto_account': '自动（最少使用）',
+      'analytics.title': '用量分析', 'analytics.requests': '请求数', 'analytics.tokens': 'Token', 'analytics.cost': '预估成本', 'analytics.success': '成功率', 'analytics.ttft': '平均首字延迟',
+      'analytics.loading': '正在加载分析…', 'analytics.no_data': '暂无分析数据，请先发送几条消息。',
+      'analytics.unpriced': '{count} 个请求没有价格估算，未计入成本合计。',
+      'analytics.group_model': '模型', 'analytics.group_day': '日期', 'analytics.group_session': '会话',
+      'analytics.heatmap': '请求热力图', 'analytics.heatmap_hint': '最近 7 天每小时的请求数。',
+      'analytics.heatmap_less': '少', 'analytics.heatmap_more': '多',
+      'analytics.heatmap_empty': '暂无按小时数据。发送一条消息后开始记录。',
+      'analytics.input': '输入', 'analytics.output': '输出', 'analytics.reasoning': '推理',
+      'analytics.cache_read': '缓存读取', 'analytics.cache_write': '缓存写入',
+      'analytics.avg_ttft': '平均首字延迟', 'analytics.avg_latency': '平均延迟', 'analytics.errors': '错误',
+      'analytics.no_key': '尚未配置 ClinePass 密钥。',
+      'analytics.no_key_hint': '打开“设置 → ClineBot”粘贴密钥，或导入已发现的本地密钥。',
+      'analytics.health_error': 'ClinePass 端点不可达。',
+      'analytics.not_registered': 'ClineBot 提供商未在 DSH 中注册。',
+      'analytics.not_registered_hint': '打开“设置 → ClineBot”检查诊断。',
+      'analytics.stale': '正在显示上次成功获取的数据。',
+      'analytics.range': '范围', 'analytics.range_7': '7 天', 'analytics.range_30': '30 天', 'analytics.range_90': '90 天',
+      'analytics.heatmap_all_models': '所有模型', 'analytics.heatmap_peak': '峰值',
+      'analytics.heatmap_by_hour': '按小时', 'analytics.heatmap_model': '热力图模型',
+      'quota.no_windows': '未返回配额窗口。',
+      'prices.title': '价格覆盖', 'prices.desc': '每 100 万 token 的美元价格。留空使用本地估算。',
+      'prices.show': '显示价格', 'prices.hide': '隐藏价格', 'prices.model': '模型',
+      'prices.input': '输入', 'prices.output': '输出', 'prices.cache_read': '缓存读取', 'prices.cache_write': '缓存写入',
+      'prices.auto': '自动', 'prices.empty': '暂无模型。',
+      'prices.hint': '这些价格只影响输入框成本和本地分析，不是账单。',
     }
 
 // --- src/client/primitives.js ---
@@ -517,6 +641,121 @@ function BooleanControl(props) {
   })
 }
 
+// --- src/client/icons.js ---
+/**
+ * Calm 16px stroke icons. They inherit `currentColor` and never carry emoji or
+ * hardcoded palette values, so they follow the host theme in both modes.
+ */
+function CbIcon({ name, size = 16, className }) {
+  const common = {
+    width: size,
+    height: size,
+    viewBox: '0 0 16 16',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.5,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className: className || 'cb-icon',
+    'aria-hidden': 'true',
+    focusable: 'false',
+  }
+  const children = []
+  switch (name) {
+    case 'search':
+      children.push(
+        React.createElement('circle', { key: 'c', cx: 7, cy: 7, r: 4.5 }),
+        React.createElement('path', { key: 'l', d: 'M10.5 10.5 14 14' })
+      )
+      break
+    case 'plus':
+      children.push(
+        React.createElement('path', { key: 'v', d: 'M8 3v10' }),
+        React.createElement('path', { key: 'h', d: 'M3 8h10' })
+      )
+      break
+    case 'close':
+      children.push(React.createElement('path', { key: 'x', d: 'm4 4 8 8M12 4l-8 8' }))
+      break
+    case 'check':
+      children.push(React.createElement('path', { key: 'p', d: 'm3.5 8.5 3 3 6-7' }))
+      break
+    case 'warning':
+      children.push(
+        React.createElement('path', { key: 't', d: 'M8 2 14 13H2Z' }),
+        React.createElement('path', { key: 'l', d: 'M8 6v3' }),
+        React.createElement('circle', { key: 'd', cx: 8, cy: 11.2, r: 0.6, fill: 'currentColor', stroke: 'none' })
+      )
+      break
+    case 'error':
+      children.push(
+        React.createElement('circle', { key: 'c', cx: 8, cy: 8, r: 6 }),
+        React.createElement('path', { key: 'l', d: 'M8 4.5v4' }),
+        React.createElement('circle', { key: 'd', cx: 8, cy: 11.4, r: 0.6, fill: 'currentColor', stroke: 'none' })
+      )
+      break
+    case 'download':
+      children.push(
+        React.createElement('path', { key: 'a', d: 'M8 2v7' }),
+        React.createElement('path', { key: 'b', d: 'm5 6.5 3 3 3-3' }),
+        React.createElement('path', { key: 'c', d: 'M3 12.5h10' })
+      )
+      break
+    case 'chevron':
+      children.push(React.createElement('path', { key: 'p', d: 'm6 4 4 4-4 4' }))
+      break
+    case 'kebab':
+      children.push(
+        React.createElement('circle', { key: 'a', cx: 8, cy: 3.5, r: 1, fill: 'currentColor', stroke: 'none' }),
+        React.createElement('circle', { key: 'b', cx: 8, cy: 8, r: 1, fill: 'currentColor', stroke: 'none' }),
+        React.createElement('circle', { key: 'c', cx: 8, cy: 12.5, r: 1, fill: 'currentColor', stroke: 'none' })
+      )
+      break
+    case 'key':
+      children.push(
+        React.createElement('circle', { key: 'c', cx: 5, cy: 8, r: 2.5 }),
+        React.createElement('path', { key: 'a', d: 'M7.5 8H14' }),
+        React.createElement('path', { key: 'b', d: 'M11.5 8v2' }),
+        React.createElement('path', { key: 'd', d: 'M13.5 8v1.5' })
+      )
+      break
+    case 'edit':
+      children.push(
+        React.createElement('path', { key: 'a', d: 'M3 13l.5-3L11 2.5 13.5 5 6 12.5Z' }),
+        React.createElement('path', { key: 'b', d: 'm9.5 4 2.5 2.5' })
+      )
+      break
+    case 'trash':
+      children.push(
+        React.createElement('path', { key: 'a', d: 'M3 5h10' }),
+        React.createElement('path', { key: 'b', d: 'M6 5V3.5h4V5' }),
+        React.createElement('path', { key: 'c', d: 'M4.5 5 5 13h6l.5-8' })
+      )
+      break
+    case 'route':
+      children.push(
+        React.createElement('path', { key: 'a', d: 'M3 5h6a2 2 0 0 1 0 4H5a2 2 0 0 0 0 4h8' }),
+        React.createElement('path', { key: 'b', d: 'm11 10 2 3-2 3' })
+      )
+      break
+    case 'refresh':
+      children.push(
+        React.createElement('path', { key: 'a', d: 'M13 8a5 5 0 1 1-1.5-3.5' }),
+        React.createElement('path', { key: 'b', d: 'M13 2.5V6h-3.5' })
+      )
+      break
+    case 'account':
+      children.push(
+        React.createElement('circle', { key: 'a', cx: 8, cy: 5.5, r: 2.5 }),
+        React.createElement('path', { key: 'b', d: 'M3 13c.6-2.5 2.6-4 5-4s4.4 1.5 5 4' })
+      )
+      break
+    default:
+      children.push(React.createElement('circle', { key: 'c', cx: 8, cy: 8, r: 6 }))
+  }
+  return React.createElement('svg', common, children)
+}
+
 // --- src/client/styles.js ---
 function ensureCss() {
       if (typeof document === 'undefined') return
@@ -532,7 +771,7 @@ function ensureCss() {
 
 .cb-section-card{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-xl);background:var(--dsw-alias-settings-card-fill)}
 .cb-section-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:20px}
-.cb-section-desc{margin-top:-6px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cb-section-desc{margin-top:-6px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;overflow-wrap:anywhere}
 
 .cb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 .cb-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:12px}
@@ -559,10 +798,13 @@ function ensureCss() {
 .cb-btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent)}
 .cb-btn-disabled{opacity:.5;cursor:not-allowed}
 
-.cb-progress-card, .cb-bar-container{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-1)}
-.cb-progress-head, .cb-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:20px}
-.cb-progress-label{font-weight:500;white-space:nowrap}
-.cb-progress-meta, .cb-bar-meta{margin-left:auto;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;white-space:nowrap}
+.cb-progress-card, .cb-bar-container{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-1)}
+.cb-progress-card-bad{border-color:var(--dsw-alias-state-error-primary)}
+.cb-progress-head, .cb-bar-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;width:100%;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:20px}
+.cb-progress-label{flex:0 0 auto;font-weight:500;white-space:nowrap}
+.cb-progress-meta, .cb-bar-meta{flex:1 1 140px;min-width:0;margin-left:auto;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;text-align:right;white-space:normal;overflow-wrap:anywhere}
+.cb-progress-meta-bad{color:var(--dsw-alias-state-error-primary)}
+.cb-progress-low{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:11px;color:var(--dsw-alias-state-error-primary)}
 .cb-progress-track, .cb-bar-track{width:100%;height:6px;border-radius:var(--dsw-radius-xs);background:var(--dsw-alias-bg-layer-2);overflow:hidden}
 .cb-progress-bar-fill, .cb-bar-fill{height:100%;border-radius:var(--dsw-radius-xs);background:var(--dsw-alias-brand-primary);transition:width .3s ease}
 .cb-progress-bar-warn{height:100%;border-radius:var(--dsw-radius-xs);background:var(--dsw-alias-state-warn-primary);transition:width .3s ease}
@@ -594,15 +836,19 @@ function ensureCss() {
 .cb-foot:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l3)}
 .cb-foot:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}
 .cb-footTop{display:flex;align-items:center;gap:8px;min-width:0}
-.cb-footName{min-width:0;overflow:hidden;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;text-overflow:ellipsis}
+.cb-footName{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;text-overflow:ellipsis}
 .cb-footRow{display:flex;flex-direction:column;gap:4px;min-width:0}
 .cb-footHead{display:flex;align-items:baseline;gap:8px;min-width:0}
-.cb-footLabel{flex:1;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:16px}
-.cb-footAmount{flex:none;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
+.cb-footLabel{flex:1;min-width:0;overflow:hidden;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:16px;white-space:nowrap;text-overflow:ellipsis}
+.cb-footAmount{flex:0 1 auto;max-width:68%;overflow:hidden;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis}
+.cb-footRowMissing .cb-footLabel{opacity:.65}
+.cb-footAmountMissing{color:var(--dsw-alias-label-tertiary)}
+.cb-footMessage{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
 .cb-footBar{display:block;height:4px;border-radius:var(--dsw-radius-xs);background:var(--dsw-alias-bg-layer-2);overflow:hidden}
 .cb-footFill{display:block;height:100%;border-radius:var(--dsw-radius-xs);background:var(--dsw-alias-brand-primary);transition:width .3s ease}
 .cb-footFillWarn{background:var(--dsw-alias-state-error-primary)}
-.cb-footPct{flex:none;width:34px;color:var(--dsw-alias-label-secondary);text-align:right;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
+.cb-footPct{margin-left:auto;flex:none;width:34px;color:var(--dsw-alias-label-secondary);text-align:right;font-size:12px;font-weight:600;line-height:16px;font-variant-numeric:tabular-nums}
+.cb-footPctWarn{color:var(--dsw-alias-state-error-primary)}
 .cb-railButton{box-sizing:border-box;flex:none;display:inline-flex;justify-content:center;align-items:center;width:36px;height:36px;margin:0 0 4px;padding:0;border:.5px solid transparent;border-radius:var(--dsw-radius-md);background:transparent;color:var(--dsw-alias-label-secondary);cursor:pointer}
 .cb-railButton:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}
 .cb-railButton:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}
@@ -611,11 +857,261 @@ function ensureCss() {
 /* The window chrome and its width belong to the shell's Modal, so the body only
    fills whatever it is given — a fixed width here overflows the panel. */
 .cb-dialog{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0;max-height:min(72vh, 640px);overflow-y:auto;color:var(--dsw-alias-label-primary)}
+.cb-panel{display:flex;flex-direction:column;gap:14px;width:100%;max-width:780px;margin:0 auto;padding:18px;height:100%;max-height:calc(100vh - 56px);min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;color:var(--dsw-alias-label-primary)}
+.cb-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
+.cb-panel-identity{display:flex;flex-direction:column;gap:4px;min-width:0}
+.cb-panel-title{color:var(--dsw-alias-label-primary);font-size:18px;font-weight:650;line-height:24px}
+.cb-panel-sub{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cb-panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:none}
+.cb-panel-updated{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px;font-variant-numeric:tabular-nums}
+.cb-panel-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:18px;line-height:1;cursor:pointer}
+.cb-panel-close:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}
+.cb-notice{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-2)}
+.cb-notice-title{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:18px}
+.cb-notice-hint{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cb-notice-error{border-color:var(--dsw-alias-state-error-primary)}
+.cb-notice-error .cb-notice-title{color:var(--dsw-alias-state-error-primary)}
+@media(max-width:720px){.cb-panel{padding:12px;max-height:none}}
 .cb-dialogMeta{display:flex;align-items:center;gap:8px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
 .cb-dialogCard{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-xl);background:var(--dsw-alias-settings-card-fill)}
 .cb-dialogFallback{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--dsw-alias-bg-mask-1)}
 .cb-dialogFallbackPanel{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 96px);overflow-y:auto;padding:18px;border-radius:var(--dsw-radius-panel);background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-elevation-prominent)}
 
+/* Provider card inside Settings -> Models. */
+.cb-provider-card{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-1)}
+.cb-provider-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.cb-provider-title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:600;line-height:20px}
+.cb-provider-hint{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+
+/* Grouped settings, disclosure rows and the staged-save bar. */
+.cb-settings-group{display:flex;flex-direction:column;gap:10px;padding:4px 0}
+.cb-settings-group-divided{border-top:.5px solid var(--dsw-alias-border-l2);padding-top:16px;margin-top:4px}
+.cb-settings-group-head{display:flex;align-items:center;gap:8px;margin:0;padding:0}
+.cb-settings-disclosure{width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:2px 0}
+.cb-settings-group-title{margin:0;color:var(--dsw-alias-label-primary);font-size:14px;line-height:20px;font-weight:600}
+.cb-settings-group-action{margin-left:auto;color:var(--dsw-alias-label-secondary);font-size:12px}
+.cb-settings-group-desc{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cb-settings-group-body{display:flex;flex-direction:column;gap:2px}
+.cb-settings-spacer{flex:1 1 auto}
+.cb-settings-chevron{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--dsw-alias-label-tertiary);font-size:18px;line-height:1;transition:transform .16s ease}
+.cb-settings-chevron-open{transform:rotate(90deg)}
+.cb-settings-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.cb-settings-row:last-child{border-bottom:0}
+.cb-settings-row-text{display:flex;flex-direction:column;gap:4px;min-width:0}
+.cb-settings-row-title{color:var(--dsw-alias-label-primary);font-size:13px;line-height:18px;font-weight:500}
+.cb-settings-row-desc{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cb-settings-row-error{color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cb-settings-row-control{display:flex;align-items:center;gap:8px;flex:none}
+.cb-settings-input{width:220px;max-width:46vw}
+.cb-savebar{position:sticky;bottom:0;z-index:30;margin:18px -4px -4px;padding:10px 4px 4px;background:linear-gradient(to top,var(--dsw-alias-bg-layer-1) 70%,transparent)}
+.cb-savebar-inner{display:flex;align-items:center;gap:10px;padding:10px 12px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-elevation-prominent)}
+.cb-savebar-text{min-width:0;overflow:hidden;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;white-space:nowrap;text-overflow:ellipsis}
+
+/* Calm icon and account-pool primitives. */
+.cb-icon{flex:none;display:inline-block;vertical-align:-2px}
+.cb-icon-chevron-open{transform:rotate(90deg)}
+.cb-banner-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;color:inherit}
+.cb-inline-alert{display:flex;align-items:center;gap:6px}
+.cb-mono{font-family:var(--ds-font-family-code,monospace);font-size:11px;color:var(--dsw-alias-label-secondary)}
+.cb-muted{color:var(--dsw-alias-label-secondary);font-size:12px}
+.cb-empty{padding:16px 0;color:var(--dsw-alias-label-secondary);font-size:12px;text-align:center}
+.cb-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.cb-accounts .cb-section-desc{margin-bottom:8px}
+.cb-discovered{display:flex;flex-direction:column;gap:6px;margin:8px 0;padding:10px 12px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1)}
+.cb-discovered-head{display:flex;align-items:center;gap:6px;color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500}
+.cb-discovered-row{display:flex;align-items:center;gap:8px;font-size:12px}
+.cb-discovered-row .cb-mono{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cb-account-mode{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:12px}
+.cb-seg{display:inline-flex;overflow:hidden;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md)}
+.cb-seg-item{padding:4px 10px;border:0;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;cursor:pointer}
+.cb-seg-item+.cb-seg-item{border-left:.5px solid var(--dsw-alias-border-l2)}
+.cb-seg-item-active{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary);font-weight:500}
+.cb-account-add{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px;padding:12px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1)}
+.cb-account-add-row{display:flex;gap:8px;flex-wrap:wrap}
+.cb-account-add-row .cb-input{flex:1 1 180px}
+.cb-account-add-actions{display:flex;justify-content:flex-end;gap:8px}
+.cb-account-list{display:flex;flex-direction:column;margin-top:4px}
+.cb-account-item{position:relative;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.cb-account-item:last-child{border-bottom:0}
+.cb-account-row{display:flex;align-items:center;gap:10px;padding:10px 0}
+.cb-status-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-border-l3)}
+.cb-status-dot-ok{background:var(--dsw-alias-state-success-primary)}
+.cb-status-dot-warn{background:var(--dsw-alias-state-warn-primary)}
+.cb-status-dot-bad{background:var(--dsw-alias-state-error-primary)}
+.cb-status-dot-idle{background:var(--dsw-alias-border-l3)}
+.cb-account-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.cb-account-name{display:flex;align-items:baseline;gap:8px;min-width:0;color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500;line-height:18px}
+.cb-account-env{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cb-account-meta{min-width:0;overflow:hidden;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:16px;white-space:nowrap;text-overflow:ellipsis}
+.cb-account-badges{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:240px}
+.cb-account-quota{display:flex;flex:none;align-items:center;justify-content:flex-end;gap:6px;min-width:112px}
+.cb-meter{display:block;width:64px;height:4px;overflow:hidden;border-radius:2px;background:var(--dsw-alias-bg-layer-2)}
+.cb-meter-fill{display:block;height:100%;background:var(--dsw-alias-brand-primary);transition:width .3s ease}
+.cb-meter-fill-warn{background:var(--dsw-alias-state-error-primary)}
+.cb-icon-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:.5px solid transparent;border-radius:var(--dsw-radius-md);background:transparent;color:var(--dsw-alias-label-secondary);cursor:pointer}
+.cb-icon-btn:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}
+.cb-icon-btn:disabled{opacity:.5;cursor:not-allowed}
+.cb-account-menu{display:flex;flex-direction:column;min-width:180px;margin:0 0 8px 18px;padding:4px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-elevation-prominent)}
+.cb-menu-item{padding:6px 8px;border:0;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;text-align:left;cursor:pointer}
+.cb-menu-item:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.cb-menu-item-danger{color:var(--dsw-alias-state-error-primary)}
+.cb-account-inline{display:flex;align-items:center;gap:8px;padding:0 0 10px 18px}
+.cb-account-inline .cb-input{flex:1;min-width:0}
+.cb-account-danger{padding:8px 10px;margin:0 0 8px 18px;border-radius:var(--dsw-radius-md);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 8%,transparent)}
+.cb-account-danger-text{flex:1;min-width:0;color:var(--dsw-alias-state-error-primary);font-size:12px}
+.cb-account-routes{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:12px;border-top:.5px solid var(--dsw-alias-border-l2)}
+.cb-account-routes-head{display:flex;align-items:center;gap:6px;color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500}
+.cb-account-route-add{display:flex;gap:8px;flex-wrap:wrap}
+.cb-account-route-add .cb-input{flex:2 1 160px}
+.cb-account-route-add .cb-select{flex:1 1 140px}
+.cb-account-route-list{display:flex;flex-direction:column;gap:4px}
+.cb-account-route-row{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-layer-1);font-size:12px}
+.cb-account-route-row .cb-mono{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+@media(max-width:720px){
+  .cb-account-row{flex-wrap:wrap}
+  .cb-account-badges{justify-content:flex-start;max-width:none}
+  .cb-account-quota{min-width:0}
+}
+
+/* Calm section toolbars, stats and banners. */
+.cb-section-actions{display:flex;align-items:center;gap:6px;flex:none}
+.cb-btn-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none}
+.cb-quota-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin-top:4px}
+@media(max-width:640px){.cb-quota-grid{grid-template-columns:1fr}}
+.cb-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:4px}
+.cb-model-list{display:flex;flex-direction:column;gap:4px;margin-top:12px}
+.cb-model-list-title{margin-bottom:2px;color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:500}
+.cb-model-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px;border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-layer-1);font-size:12px}
+.cb-model-row .cb-mono{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cb-banner-body{flex:1;min-width:0}
+.cb-banner-sub{margin-top:2px;font-size:11px;opacity:.9}
+.cb-state-ok{color:var(--dsw-alias-state-success-primary);font-size:12px}
+.cb-hint{margin-top:8px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cb-key-status{margin-top:8px;font-size:12px}
+.cb-key-meta{display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--dsw-alias-label-secondary);font-size:12px}
+.cb-link{color:var(--dsw-alias-brand-primary);text-decoration:none}
+.cb-link:hover{text-decoration:underline}
+.cb-update-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-2)}
+.cb-update-info{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}
+.cb-update-version{color:var(--dsw-alias-label-secondary);font-weight:500}
+.cb-row-actions{display:flex;align-items:center;gap:8px;margin-top:4px}
+
+/* Composer cost and analytics dialog. */
+.cb-composer-cost{position:relative;display:inline-flex;align-items:center}
+.cb-composer-cost-button{display:inline-flex;align-items:center;gap:4px;height:24px;padding:2px 8px;border:.5px solid var(--dsw-alias-border-l2);border-radius:999px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font:inherit;font-size:11px;cursor:pointer}
+.cb-composer-cost-button:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l3)}
+.cb-composer-cost-value{color:var(--dsw-alias-label-primary);font-weight:600}
+.cb-composer-popover{position:absolute;bottom:100%;left:0;z-index:100;display:flex;flex-direction:column;gap:6px;min-width:200px;margin-bottom:6px;padding:10px 12px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-3);box-shadow:var(--dsw-elevation-prominent);color:var(--dsw-alias-label-primary);font-size:12px}
+.cb-composer-title{padding-bottom:4px;border-bottom:.5px solid var(--dsw-alias-border-l2);font-weight:600}
+.cb-composer-row,.cb-composer-total{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.cb-composer-total{padding-top:4px;border-top:.5px solid var(--dsw-alias-border-l2);font-weight:600}
+.cb-composer-value{font-variant-numeric:tabular-nums}
+.cb-tabs{display:flex;gap:4px;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.cb-tab{padding:6px 10px;border:0;border-bottom:1.5px solid transparent;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;cursor:pointer}
+.cb-tab-active{border-bottom-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary);font-weight:500}
+.cb-dialogRow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
+.cb-dialogBadges{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}
+.cb-analytics-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
+.cb-account-tabs{display:flex;flex-wrap:wrap;gap:6px}
+.cb-account-tab{display:inline-flex;align-items:center;padding:2px 10px;border:.5px solid var(--dsw-alias-border-l2);border-radius:999px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;cursor:pointer}
+.cb-account-tab:hover:not(.cb-account-tab-active){color:var(--dsw-alias-label-primary)}
+.cb-account-tab-active{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary)}
+.cb-price-section{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:12px;border-top:.5px solid var(--dsw-alias-border-l2)}
+.cb-price-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
+.cb-price-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
+.cb-price-table{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-x:auto}
+.cb-price-head-row,.cb-price-row{display:grid;grid-template-columns:minmax(160px,1.6fr) repeat(4,minmax(72px,1fr));gap:6px;align-items:center;min-width:520px}
+.cb-price-head-row{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
+.cb-price-row .cb-mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary);font-size:12px}
+.cb-price-input{width:100%;min-width:0;padding:4px 6px;font-size:12px}
+.cb-dialogIdentity{display:flex;flex-direction:column;gap:2px;min-width:0}
+.cb-dialogTiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
+.cb-dialogWindows{display:flex;flex-direction:column;gap:12px}
+.cb-analytics-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
+.cb-analytics-head,.cb-analytics-row{display:grid;grid-template-columns:minmax(120px,1fr) 70px 70px 80px 70px;gap:8px;align-items:center;padding:4px 0;font-size:11px}
+.cb-analytics-head{border-bottom:.5px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary)}
+.cb-analytics-row{border-bottom:.5px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary)}
+.cb-analytics-row .cb-mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cb-heat-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
+.cb-heat-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.cb-heat-toolbar .cb-hint{margin:0}
+.cb-heat-select{max-width:260px;padding:3px 8px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:12px}
+.cb-heat-scroll{overflow-x:auto;padding-bottom:4px}
+.cb-heat{display:grid;grid-template-columns:44px repeat(24,minmax(10px,1fr));gap:2px;align-items:center;min-width:620px}
+.cb-heat-hour{color:var(--dsw-alias-label-tertiary);font-size:9px;line-height:12px;text-align:center}
+.cb-heat-day{color:var(--dsw-alias-label-secondary);font-size:10px;line-height:14px;white-space:nowrap}
+.cb-heat-cell,.cb-heat-swatch{display:block;border-radius:3px;background:var(--dsw-alias-bg-layer-2)}
+.cb-heat-cell{height:14px}
+.cb-heat-swatch{width:12px;height:12px;border-radius:2px}
+.cb-heat-l0{background:var(--dsw-alias-bg-layer-2)}
+.cb-heat-l1{background:color-mix(in srgb,var(--dsw-alias-brand-primary) 18%,var(--dsw-alias-bg-layer-2))}
+.cb-heat-l2{background:color-mix(in srgb,var(--dsw-alias-brand-primary) 36%,var(--dsw-alias-bg-layer-2))}
+.cb-heat-l3{background:color-mix(in srgb,var(--dsw-alias-brand-primary) 58%,var(--dsw-alias-bg-layer-2))}
+.cb-heat-l4{background:color-mix(in srgb,var(--dsw-alias-brand-primary) 80%,var(--dsw-alias-bg-layer-2))}
+.cb-heat-legend{display:flex;align-items:center;gap:4px;color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:14px}
+.cb-hour-strip-head{margin:10px 0 0;color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:14px}
+.cb-hour-strip{display:grid;grid-template-columns:44px repeat(24,minmax(10px,1fr));gap:2px;align-items:end;height:30px;min-width:620px}
+.cb-hour-col{display:flex;align-items:flex-end;height:100%}
+.cb-hour-bar{display:block;width:100%;min-height:2px;border-radius:2px 2px 0 0}
+.cb-hour-labels{display:grid;grid-template-columns:44px repeat(24,minmax(10px,1fr));gap:2px;color:var(--dsw-alias-label-tertiary);font-size:9px;line-height:12px;text-align:center;min-width:620px}
+@media(max-width:720px){
+  .cb-analytics-head,.cb-analytics-row{grid-template-columns:1fr 56px 64px}
+  .cb-analytics-head span:nth-child(4),.cb-analytics-head span:nth-child(5),.cb-analytics-row span:nth-child(4),.cb-analytics-row span:nth-child(5){display:none}
+}
+
+/* Opencode-inspired visual language: neutral rgba surfaces, 7-10px radii and
+   the same green/amber/red accents. Text still follows the harness theme. */
+.cb-page{gap:14px;padding:4px 2px 24px}
+.cb-page-title{font-size:18px;font-weight:650;line-height:1.4}
+.cb-panel{max-width:760px;padding:18px}
+.cb-section-card,.cb-dialogCard,.cb-provider-card,.cb-progress-card,.cb-stat-box,.cb-account-add,.cb-discovered,.cb-update-banner,.cb-notice,.cb-savebar-inner,.cb-account-menu{border:1px solid rgba(127,127,127,.25);border-radius:10px;background:rgba(127,127,127,.06)}
+.cb-section-card,.cb-dialogCard{padding:12px 14px;gap:10px}
+.cb-section-title,.cb-settings-group-title{font-size:13px;font-weight:650;line-height:1.5}
+.cb-section-desc,.cb-settings-group-desc,.cb-settings-row-desc,.cb-hint{opacity:.72;line-height:1.5}
+.cb-input,.cb-select{height:auto;min-height:32px;padding:6px 8px;border:1px solid rgba(127,127,127,.35);border-radius:7px;background:rgba(127,127,127,.08);font-size:13px;line-height:1.4}
+.cb-input:focus,.cb-select:focus{border-color:rgba(80,140,255,.6);outline:2px solid rgba(80,140,255,.25);outline-offset:1px}
+.cb-btn{height:auto;min-height:30px;padding:6px 11px;border:1px solid rgba(127,127,127,.35);border-radius:7px;background:rgba(127,127,127,.1);font-size:13px;line-height:1.4}
+.cb-btn:hover:not(:disabled){background:rgba(127,127,127,.18)}
+.cb-btn-primary{border-color:rgba(80,140,255,.6);background:rgba(80,140,255,.18);color:inherit}
+.cb-btn-primary:hover:not(:disabled){background:rgba(80,140,255,.26)}
+.cb-btn-danger{border-color:rgba(220,80,80,.5);color:#e07a7a}
+.cb-badge{padding:2px 7px;border:1px solid rgba(127,127,127,.3);border-radius:999px;background:rgba(127,127,127,.1);font-size:11px;line-height:1.4}
+.cb-badge-ok{color:#4fbf86;border-color:rgba(60,180,110,.5);background:rgba(60,180,110,.10)}
+.cb-badge-warn{color:#d9a24a;border-color:rgba(220,160,60,.5);background:rgba(220,160,60,.10)}
+.cb-badge-bad{color:#e07a7a;border-color:rgba(220,80,80,.5);background:rgba(220,80,80,.10)}
+.cb-stat-box{padding:8px 10px;border-radius:8px}
+.cb-stat-val{font-size:15px;font-weight:600;line-height:1.4}
+.cb-stat-lbl{font-size:11px;line-height:1.5}
+.cb-table{font-size:12px}
+.cb-table th{padding:5px 8px;border-bottom:1px solid rgba(127,127,127,.18);font-size:11px;font-weight:600;opacity:.8}
+.cb-table td{padding:5px 8px;border-bottom:1px solid rgba(127,127,127,.18);font-size:12px}
+.cb-progress-track,.cb-bar-track{height:8px;border-radius:999px;background:rgba(127,127,127,.2)}
+.cb-progress-bar-fill,.cb-bar-fill,.cb-footFill,.cb-meter-fill{background:#4fbf86}
+.cb-progress-bar-warn{background:#d9a24a}
+.cb-progress-bar-bad,.cb-footFillWarn,.cb-meter-fill-warn{background:#e07a7a}
+.cb-progress-meta-bad,.cb-progress-low,.cb-footPctWarn{color:#e07a7a}
+.cb-footBar,.cb-meter{background:rgba(127,127,127,.2)}
+.cb-account-tab,.cb-seg{border:1px solid rgba(127,127,127,.3);border-radius:999px;background:rgba(127,127,127,.1)}
+.cb-seg{border-radius:7px;overflow:hidden}
+.cb-seg-item{border:0;border-left:1px solid rgba(127,127,127,.2);border-radius:0;background:transparent}
+.cb-seg-item:first-child{border-left:0}
+.cb-seg-item-active,.cb-account-tab-active{border-color:rgba(80,140,255,.6);background:rgba(80,140,255,.18);color:inherit}
+.cb-tab{border:0;border-radius:0;background:transparent;border-bottom:1.5px solid transparent}
+.cb-tab-active{border-bottom-color:#4fbf86;background:transparent}
+.cb-heat-l0{background:rgba(127,127,127,.10)}
+.cb-heat-l1{background:rgba(79,191,134,.234)}
+.cb-heat-l2{background:rgba(79,191,134,.382)}
+.cb-heat-l3{background:rgba(79,191,134,.530)}
+.cb-heat-l4{background:rgba(79,191,134,.826)}
+.cb-heat-cell,.cb-heat-swatch{border-radius:3px}
+.cb-analytics-head,.cb-analytics-row{padding:5px 0;border-bottom:1px solid rgba(127,127,127,.18)}
+.cb-settings-row,.cb-price-section{border-color:rgba(127,127,127,.18)}
+.cb-alert-ok{background:rgba(60,180,110,.10);color:#4fbf86}
+.cb-alert-bad,.cb-alert-err{background:rgba(220,80,80,.10);color:#e07a7a}
+.cb-banner-warning{background:rgba(220,160,60,.10);border-color:rgba(220,160,60,.5);color:#d9a24a}
+.cb-banner-exhausted{background:rgba(220,80,80,.10);border-color:rgba(220,80,80,.5);color:#e07a7a}
+.cb-account-route-row,.cb-model-row,.cb-preview,.cb-account-add{background:rgba(127,127,127,.06)}
+
 `
       document.head.appendChild(style)
     }
@@ -643,6 +1139,257 @@ async function fetchWithTimeout(url, opts = {}, ms = 30000) {
   }
 }
 
+// --- src/client/settings-draft.js ---
+/**
+ * Staged configuration draft for the ClineBot settings page.
+ *
+ * Fields edited in the form are merged into `pending` and written with one
+ * `PUT /config` when the user presses Save. Account operations remain
+ * immediate and are handled by the page's existing handlers.
+ */
+function useStagedConfig({ status, draft, setDraft, load, t, pendingRef }) {
+  const [pending, setPending] = React.useState({})
+  const [saving, setSaving] = React.useState(false)
+  const [saveState, setSaveState] = React.useState('idle')
+  const [saveError, setSaveError] = React.useState('')
+  const savedTimer = React.useRef(null)
+
+  React.useEffect(() => () => {
+    if (savedTimer.current) clearTimeout(savedTimer.current)
+  }, [])
+
+  const validationError = React.useMemo(() => {
+    if (Object.hasOwn(pending, 'baseUrl')) {
+      const raw = String(pending.baseUrl || '').trim()
+      try {
+        const url = new URL(raw)
+        const local = url.hostname === 'localhost' || url.hostname === '127.0.0.1'
+        if (url.protocol !== 'https:' && !local) return t('settings.save_invalid_base_url')
+      } catch {
+        return t('settings.save_invalid_base_url')
+      }
+    }
+    for (const key of ['timeoutMs', 'smokeTimeoutMs', 'streamIdleTimeoutMs', 'maxPayloadMb']) {
+      if (!Object.hasOwn(pending, key)) continue
+      const value = Number(pending[key])
+      if (!Number.isFinite(value) || value <= 0) return t('settings.save_invalid_number')
+    }
+    return ''
+  }, [pending, t])
+
+  const stage = React.useCallback((patch) => {
+    if (!patch || typeof patch !== 'object') return
+    const next = { ...(pendingRef.current || {}), ...patch }
+    pendingRef.current = next
+    setPending(next)
+    setDraft((current) => ({ ...(current || {}), ...patch }))
+    setSaveState('unsaved')
+    setSaveError('')
+  }, [pendingRef, setDraft])
+
+  const discard = React.useCallback(() => {
+    pendingRef.current = {}
+    setPending({})
+    setDraft(status?.config || {})
+    setSaveState('idle')
+    setSaveError('')
+  }, [pendingRef, setDraft, status])
+
+  const save = React.useCallback(async () => {
+    const patch = pendingRef.current || {}
+    if (Object.keys(patch).length === 0 || saving) return
+    if (validationError) {
+      setSaveState('error')
+      setSaveError(validationError)
+      return
+    }
+    setSaving(true)
+    setSaveState('saving')
+    setSaveError('')
+    try {
+      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/config`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ config: patch }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || data.ok === false) throw new Error(data.error || `HTTP ${res.status}`)
+      pendingRef.current = {}
+      setPending({})
+      await load()
+      setSaveState('saved')
+      if (savedTimer.current) clearTimeout(savedTimer.current)
+      savedTimer.current = setTimeout(() => {
+        setSaveState((current) => (current === 'saved' ? 'idle' : current))
+      }, 2500)
+    } catch (error) {
+      setSaveState('error')
+      setSaveError(String(error?.message || error))
+    } finally {
+      setSaving(false)
+    }
+  }, [load, pendingRef, saving, validationError])
+
+  return {
+    pending,
+    pendingCount: Object.keys(pending).length,
+    saving,
+    saveState,
+    saveError,
+    validationError,
+    invalid: Boolean(validationError),
+    stage,
+    discard,
+    save,
+  }
+}
+
+// --- src/client/settings-models.js ---
+/**
+ * Model-picker selection state and debounced persistence.
+ *
+ * Model toggles are immediate by design: the picker is a direct inventory
+ * control, not part of the staged settings form.
+ */
+function useModelSelection({ status, draft, setDraft, load, setErr }) {
+  const debounceTimerRef = React.useRef(null)
+
+  React.useEffect(() => () => {
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+  }, [])
+
+  function debounceSaveDisabledModels(nextDisabled, previousDisabled) {
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+    debounceTimerRef.current = setTimeout(async () => {
+      try {
+        const res = await fetchWithTimeout(`${ROUTE_PREFIX}/models/toggle`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ disabledModels: nextDisabled }),
+        })
+        const data = await res.json().catch(() => ({}))
+        if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+        await load()
+      } catch (error) {
+        console.warn('[dsh-clinebot] Failed saving disabled models:', error)
+        setErr(String(error?.message || error))
+        setDraft((previous) => {
+          if (!previous) return previous
+          const all = status?.availableModels || []
+          const previousEnabled = all.map((model) => model.id).filter((id) => !previousDisabled.includes(id))
+          return { ...previous, disabledModels: previousDisabled, enabledModels: previousEnabled }
+        })
+      }
+    }, 400)
+  }
+
+  function handleToggleModel(id) {
+    const current = draft?.disabledModels || []
+    const next = current.includes(id)
+      ? current.filter((entry) => entry !== id)
+      : [...current, id]
+    const all = status?.availableModels || []
+    const enabled = all.map((model) => model.id).filter((modelId) => !next.includes(modelId))
+    setDraft({ ...(draft || {}), disabledModels: next, enabledModels: enabled })
+    debounceSaveDisabledModels(next, current)
+  }
+
+  function handleSetModelsFilter(type) {
+    const all = status?.availableModels || []
+    let allowed = new Set()
+    if (type === 'all') allowed = new Set(all.map((model) => model.id))
+    else if (type === 'vision') allowed = new Set(all.filter((model) => model.input?.includes('image') || model.input?.includes('vision')).map((model) => model.id))
+    else if (type === 'coding') allowed = new Set(all.filter((model) => model.category === 'coding').map((model) => model.id))
+    else if (type === 'recommended') allowed = new Set(all.filter((model) => model.recommended).map((model) => model.id))
+
+    const current = draft?.disabledModels || []
+    const nextDisabled = all.map((model) => model.id).filter((id) => !allowed.has(id))
+    const nextEnabled = Array.from(allowed)
+    setDraft({ ...(draft || {}), disabledModels: nextDisabled, enabledModels: nextEnabled })
+    debounceSaveDisabledModels(nextDisabled, current)
+  }
+
+  return { handleToggleModel, handleSetModelsFilter }
+}
+
+// --- src/client/settings-accounts.js ---
+/**
+ * Immediate account-pool operations. These are intentionally outside the
+ * staged settings form: adding, pinning, renaming, clearing and deleting an
+ * account commit on their own.
+ */
+function createAccountActions({ performAction, load, t, setMsg }) {
+  async function handlePinAccount(accountEnv) {
+    await performAction('pin-account', async () => {
+      const res = await fetchWithTimeout(`${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()
+    })
+  }
+
+  async function handleAddAccount({ label, apiKeyEnv, apiKey, id }) {
+    await performAction('add-account', async () => {
+      const endpoint = id ? `${ROUTE_PREFIX}/keys/discovered/import` : `${ROUTE_PREFIX}/accounts`
+      const payload = id ? { id, label, apiKeyEnv } : { label, apiKeyEnv, apiKey }
+      const res = await fetchWithTimeout(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      setMsg(t('key.saved_msg', { status: data.validated ? 'OK' : (data.validationError || 'Notice') }))
+      await load()
+    })
+  }
+
+  async function handleDeleteAccount(accountEnv, deleteSecret = true) {
+    await performAction('delete-account', async () => {
+      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/accounts/delete`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKeyEnv: accountEnv, deleteSecret }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      await load()
+    })
+  }
+
+  async function handleRenameAccount(accountEnv, label) {
+    await performAction('rename-account', async () => {
+      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/accounts/rename`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKeyEnv: accountEnv, label }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      await load()
+    })
+  }
+
+  async function handleClearKey(accountEnv) {
+    await performAction('clear-key', async () => {
+      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/accounts/key/clear`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKeyEnv: accountEnv }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+      await load()
+    })
+  }
+
+  return { handlePinAccount, handleAddAccount, handleDeleteAccount, handleRenameAccount, handleClearKey }
+}
+
 // --- src/client/error-boundary.js ---
 function createErrorBoundary() {
   try {
@@ -663,7 +1410,7 @@ function createErrorBoundary() {
       render() {
         if (this.state.hasError) {
           const t = this.props && typeof this.props.t === 'function' ? this.props.t : null
-          const errorTitle = t ? t('ui.error_title') : '⚠️ ClineBot UI Error: '
+          const errorTitle = t ? t('ui.error_title') : 'ClineBot UI Error: '
           const retryLabel = t ? t('ui.retry') : 'Retry'
           return React.createElement(
             'div',
@@ -736,128 +1483,343 @@ function ProgressBar({ label, percentUsed, remainingPercent, resetsAt, t }) {
 
   return React.createElement(
     'div',
-    {
-      className: 'cb-progress-card cb-bar-container',
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        padding: '12px 14px',
-        borderRadius: '8px',
-        border: isBad ? '1px solid var(--dsw-alias-state-error-primary)' : '1px solid var(--dsw-alias-border-l2)',
-        background: 'var(--dsw-alias-bg-layer-2)',
-      },
-    },
+    { className: isBad ? 'cb-progress-card cb-progress-card-bad' : 'cb-progress-card' },
     React.createElement(
       'div',
-      {
-        className: 'cb-progress-head cb-bar-head',
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'baseline',
-          gap: '16px',
-          width: '100%',
-        },
-      },
+      { className: 'cb-progress-head' },
       React.createElement(
         'span',
-        { className: 'cb-progress-label', style: { fontWeight: 500, whiteSpace: 'nowrap' } },
+        { className: 'cb-progress-label' },
         label,
-        isBad ? React.createElement('span', { style: { marginLeft: '6px', fontSize: '11px', color: 'var(--dsw-alias-state-error-primary)' } }, '⚠️ <10%') : null
+        isBad
+          ? React.createElement(
+              'span',
+              { className: 'cb-progress-low' },
+              React.createElement(CbIcon, { name: 'warning', size: 12 }),
+              '<10%'
+            )
+          : null
       ),
       React.createElement(
         'span',
-        {
-          className: 'cb-progress-meta cb-bar-meta',
-          style: {
-            fontSize: '12px',
-            color: isBad ? 'var(--dsw-alias-state-error-primary)' : 'var(--dsw-alias-label-secondary)',
-            whiteSpace: 'nowrap',
-            marginLeft: 'auto',
-          },
-        },
+        { className: isBad ? 'cb-progress-meta cb-progress-meta-bad' : 'cb-progress-meta' },
         t('quota.used', { pct }),
-        resetCountdown ? ` · ${resetCountdown === 'resetting' ? (t('quota.resetting') || '正在重置') : t('quota.countdown', { time: resetCountdown })}` : (resetClock ? ` · ${t('quota.reset_at', { time: resetClock })}` : '')
+        resetCountdown
+          ? ` · ${resetCountdown === 'resetting' ? (t('quota.resetting') || '正在重置') : t('quota.countdown', { time: resetCountdown })}`
+          : (resetClock ? ` · ${t('quota.reset_at', { time: resetClock })}` : '')
       )
     ),
     React.createElement(
       'div',
-      {
-        className: 'cb-progress-track cb-bar-track',
-        style: {
-          width: '100%',
-          height: '8px',
-          borderRadius: '999px',
-          background: 'var(--dsw-alias-bg-layer-1)',
-          overflow: 'hidden',
-          border: '1px solid var(--dsw-alias-border-l2)',
-        },
-      },
-      React.createElement('div', {
-        className: barClass,
-        style: { width: `${pct}%`, height: '100%', borderRadius: '999px' },
-      })
+      { className: 'cb-progress-track' },
+      React.createElement('div', { className: barClass, style: { width: `${pct}%` } })
     )
   )
 }
 
-// --- src/client/components/update-banner.js ---
-function UpdateBanner({ updateState, handleTriggerUpdate, handleCheckUpdate, t }) {
-  const status = updateState.status || (
-    updateState.checking
-      ? 'checking'
-      : (updateState.latestCheckFailed
-          ? 'error'
-          : (updateState.updateAvailable
-              ? 'available'
-              : (updateState.lastCheckedAt ? 'current' : 'idle')))
+// --- src/client/components/settings-layout.js ---
+/**
+ * Shared settings layout primitives: a titled group, a foldable group, a
+ * title/description/control row, and the floating staged-save bar.
+ */
+function SettingsGroup({ title, description, divided = false, action, children }) {
+  return React.createElement(
+    'section',
+    { className: divided ? 'cb-settings-group cb-settings-group-divided' : 'cb-settings-group', 'aria-label': title },
+    React.createElement(
+      'div',
+      { className: 'cb-settings-group-head' },
+      React.createElement('h3', { className: 'cb-settings-group-title' }, title),
+      action ? React.createElement('span', { className: 'cb-settings-group-action' }, action) : null
+    ),
+    description ? React.createElement('div', { className: 'cb-settings-group-desc' }, description) : null,
+    React.createElement('div', { className: 'cb-settings-group-body' }, children)
   )
+}
 
-  const isChecking = status === 'checking' || updateState.checking
-  const isAvailable = status === 'available' || updateState.updateAvailable
-  const isCurrent = status === 'current'
-  const isError = status === 'error' || updateState.latestCheckFailed
-
+function CollapsibleGroup({ title, description, defaultOpen = false, divided = false, badge, children }) {
+  const [open, setOpen] = React.useState(Boolean(defaultOpen))
   return React.createElement(
-    React.Fragment,
-    null,
+    'section',
+    { className: divided ? 'cb-settings-group cb-settings-group-divided' : 'cb-settings-group', 'aria-label': title },
     React.createElement(
-      'div',
+      'button',
       {
-        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',
-        }
+        type: 'button',
+        className: 'cb-settings-group-head cb-settings-disclosure',
+        'aria-expanded': open,
+        onClick: () => setOpen((value) => !value),
       },
+      React.createElement('span', { className: 'cb-settings-group-title' }, title),
+      badge !== undefined && badge !== '' ? React.createElement('span', { className: 'cb-badge' }, badge) : null,
+      React.createElement('span', { className: 'cb-settings-spacer' }),
+      React.createElement('span', { className: open ? 'cb-settings-chevron cb-settings-chevron-open' : 'cb-settings-chevron', 'aria-hidden': 'true' }, '›')
+    ),
+    open && description ? React.createElement('div', { className: 'cb-settings-group-desc' }, description) : null,
+    open ? React.createElement('div', { className: 'cb-settings-group-body' }, children) : null
+  )
+}
+
+function SettingRow({ title, description, control, error, htmlFor }) {
+  return React.createElement(
+    'div',
+    { className: 'cb-settings-row' },
+    React.createElement(
+      'div',
+      { className: 'cb-settings-row-text' },
+      htmlFor
+        ? React.createElement('label', { className: 'cb-settings-row-title', htmlFor }, title)
+        : React.createElement('span', { className: 'cb-settings-row-title' }, title),
+      error
+        ? React.createElement('div', { className: 'cb-settings-row-error' }, error)
+        : (description ? React.createElement('div', { className: 'cb-settings-row-desc' }, description) : null)
+    ),
+    control ? React.createElement('div', { className: 'cb-settings-row-control' }, control) : null
+  )
+}
+
+function SaveBar({ pendingCount, saving, saveState, saveError, invalid, validationError, onSave, onDiscard, t }) {
+  const visible = pendingCount > 0 || saving || saveState === 'saved' || saveState === 'error'
+  if (!visible) return null
+  const message = saveError
+    || validationError
+    || (saving
+      ? t('settings.saving')
+      : (saveState === 'saved' ? t('settings.saved') : t('settings.unsaved', { count: pendingCount })))
+  return React.createElement(
+    'div',
+    { className: 'cb-savebar', role: 'status' },
+    React.createElement(
+      'div',
+      { className: 'cb-savebar-inner' },
+      React.createElement('span', { className: 'cb-savebar-text' }, message),
+      React.createElement('span', { className: 'cb-settings-spacer' }),
       React.createElement(
-        'div',
-        { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
-        updateState.currentVersion
-          ? React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)', fontWeight: 500 } },
-              `v${updateState.currentVersion}`
-            )
+        'button',
+        {
+          type: 'button',
+          className: 'cb-btn',
+          disabled: saving || pendingCount === 0,
+          onClick: onDiscard,
+        },
+        t('settings.discard')
+      ),
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          className: 'cb-btn cb-btn-primary',
+          disabled: saving || pendingCount === 0 || invalid,
+          onClick: onSave,
+        },
+        saving ? t('settings.saving') : t('settings.save')
+      )
+    )
+  )
+}
+
+// --- src/client/components/integrations-section.js ---
+/** Integrations & display settings: surfaces outside the chat request itself. */
+function IntegrationToggle({ id, label, hint, checked, onChange }) {
+  return React.createElement(SettingRow, {
+    title: label,
+    description: hint,
+    htmlFor: id,
+    control: React.createElement(BooleanControl, {
+      checked: !!checked,
+      label,
+      onChange: (next) => onChange(next),
+    }),
+  })
+}
+
+function IntegrationsSection({ draft, onStage, transport, t }) {
+  const current = draft || {}
+  return React.createElement(
+    SettingsGroup,
+    {
+      title: t('settings.integrations'),
+      description: t('settings.integrations_desc'),
+      divided: true,
+    },
+    React.createElement(IntegrationToggle, {
+      id: 'cb-web-search',
+      label: t('settings.web_search'),
+      hint: t('settings.web_search_hint'),
+      checked: current.webSearch !== false,
+      onChange: (value) => onStage({ webSearch: value }),
+    }),
+    React.createElement(IntegrationToggle, {
+      id: 'cb-sidebar-quota',
+      label: t('settings.sidebar_quota'),
+      hint: t('settings.sidebar_quota_hint'),
+      checked: current.showSidebarQuota !== false,
+      onChange: (value) => onStage({ showSidebarQuota: value }),
+    }),
+    React.createElement(IntegrationToggle, {
+      id: 'cb-composer-cost',
+      label: t('settings.composer_cost'),
+      hint: t('settings.composer_cost_hint'),
+      checked: current.showComposerCost !== false,
+      onChange: (value) => onStage({ showComposerCost: value }),
+    }),
+    transport === 'pi-ai'
+      ? React.createElement(IntegrationToggle, {
+        id: 'cb-proxy-mode',
+        label: t('settings.proxy_mode'),
+        hint: t('settings.proxy_mode_hint'),
+        checked: current.proxyMode !== false,
+        onChange: (value) => onStage({ proxyMode: value }),
+      })
+      : null
+  )
+}
+
+// --- src/client/components/advanced-section.js ---
+/** Advanced connection, timeout and storage settings. */
+function AdvancedField({ id, label, hint, value, type, onChange }) {
+  return React.createElement(SettingRow, {
+    title: label,
+    description: hint,
+    htmlFor: id,
+    control: React.createElement('input', {
+      id,
+      className: 'cb-input cb-settings-input',
+      type: type || 'text',
+      value: value === undefined || value === null ? '' : String(value),
+      onChange: (event) => onChange(event.target.value),
+    }),
+  })
+}
+
+function AdvancedSection({ draft, onStage, transport, t }) {
+  const current = draft || {}
+  const numeric = (key, minimum) => (raw) => {
+    if (raw === '') return
+    const value = Number(raw)
+    if (Number.isFinite(value) && value > minimum) onStage({ [key]: value })
+  }
+  return React.createElement(
+    CollapsibleGroup,
+    {
+      title: t('settings.advanced'),
+      description: t('settings.advanced_desc'),
+      divided: true,
+      defaultOpen: false,
+    },
+    React.createElement(AdvancedField, {
+      id: 'cb-base-url',
+      label: t('settings.base_url'),
+      hint: t('settings.base_url_hint'),
+      value: current.baseUrl,
+      onChange: (value) => onStage({ baseUrl: value }),
+    }),
+    React.createElement(AdvancedField, {
+      id: 'cb-timeout',
+      label: t('settings.timeout'),
+      hint: t('settings.timeout_hint'),
+      value: current.timeoutMs,
+      type: 'number',
+      onChange: numeric('timeoutMs', 0),
+    }),
+    React.createElement(AdvancedField, {
+      id: 'cb-smoke-timeout',
+      label: t('settings.smoke_timeout'),
+      hint: t('settings.smoke_timeout_hint'),
+      value: current.smokeTimeoutMs,
+      type: 'number',
+      onChange: numeric('smokeTimeoutMs', 0),
+    }),
+    React.createElement(AdvancedField, {
+      id: 'cb-stream-idle',
+      label: t('settings.stream_idle'),
+      hint: t('settings.stream_idle_hint'),
+      value: current.streamIdleTimeoutMs,
+      type: 'number',
+      onChange: numeric('streamIdleTimeoutMs', 0),
+    }),
+    React.createElement(AdvancedField, {
+      id: 'cb-max-payload',
+      label: t('settings.max_payload'),
+      hint: t('settings.max_payload_hint'),
+      value: current.maxPayloadMb,
+      type: 'number',
+      onChange: numeric('maxPayloadMb', 0),
+    }),
+    React.createElement(AdvancedField, {
+      id: 'cb-stats-path',
+      label: t('settings.stats_path'),
+      hint: t('settings.stats_path_hint'),
+      value: current.statsPath,
+      onChange: (value) => onStage({ statsPath: value }),
+    }),
+    React.createElement(AdvancedField, {
+      id: 'cb-models-cache-path',
+      label: t('settings.models_cache_path'),
+      hint: t('settings.models_cache_path_hint'),
+      value: current.modelsCachePath,
+      onChange: (value) => onStage({ modelsCachePath: value }),
+    }),
+    React.createElement(SettingRow, {
+      title: t('settings.transport'),
+      description: t('settings.transport_hint'),
+      htmlFor: 'cb-transport',
+      control: React.createElement(
+        'select',
+        {
+          id: 'cb-transport',
+          className: 'cb-select',
+          value: current.transport === 'pi-ai' ? 'pi-ai' : 'adapter',
+          onChange: (event) => onStage({ transport: event.target.value }),
+        },
+        React.createElement('option', { value: 'adapter' }, 'Native adapter'),
+        React.createElement('option', { value: 'pi-ai' }, 'Legacy llm-pi-ai + proxy')
+      ),
+    })
+  )
+}
+
+// --- src/client/components/update-banner.js ---
+function UpdateBanner({ updateState, handleTriggerUpdate, handleCheckUpdate, t }) {
+  const status = updateState.status || (
+    updateState.checking
+      ? 'checking'
+      : (updateState.latestCheckFailed
+          ? 'error'
+          : (updateState.updateAvailable
+              ? 'available'
+              : (updateState.lastCheckedAt ? 'current' : 'idle')))
+  )
+
+  const isChecking = status === 'checking' || updateState.checking
+  const isAvailable = status === 'available' || updateState.updateAvailable
+  const isCurrent = status === 'current'
+  const isError = status === 'error' || updateState.latestCheckFailed
+
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      'div',
+      { className: 'cb-update-banner' },
+      React.createElement(
+        'div',
+        { className: 'cb-update-info' },
+        updateState.currentVersion
+          ? React.createElement('span', { className: 'cb-update-version' }, `v${updateState.currentVersion}`)
           : null,
         isChecking
-          ? React.createElement('span', { style: { color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px' } },
-              t('update.checking')
-            )
+          ? React.createElement('span', { className: 'cb-muted' }, t('update.checking'))
           : isAvailable
-            ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
+            ? React.createElement(
+                'span',
+                { className: 'cb-badge cb-badge-warn' },
                 t('update.available', { latestVersion: updateState.latestVersion, currentVersion: updateState.currentVersion })
               )
             : isCurrent
-              ? React.createElement('span', { className: 'cb-badge cb-badge-ok' },
-                  '✓ ' + t('update.up_to_date')
-                )
+              ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, t('update.up_to_date'))
               : isError
-                ? React.createElement('span', { className: 'cb-badge cb-badge-bad' },
-                    t('update.check_failed')
-                  )
+                ? React.createElement('span', { className: 'cb-badge cb-badge-bad' }, t('update.check_failed'))
                 : null
       ),
       isAvailable
@@ -868,7 +1830,6 @@ function UpdateBanner({ updateState, handleTriggerUpdate, handleCheckUpdate, t }
               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')
           )
@@ -880,13 +1841,12 @@ function UpdateBanner({ updateState, handleTriggerUpdate, handleCheckUpdate, t }
                 className: 'cb-btn',
                 disabled: isChecking,
                 onClick: handleCheckUpdate,
-                style: { padding: '5px 12px', fontSize: '12px' }
               },
               t('update.retry')
             )
           : null
     ),
-    updateState.notice ? React.createElement('div', { className: 'cb-alert-ok' }, '✓ ' + updateState.notice) : 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
   )
 }
@@ -894,7 +1854,7 @@ function UpdateBanner({ updateState, handleTriggerUpdate, handleCheckUpdate, t }
 // --- src/client/components/key-section.js ---
 function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowKey, busy, draft, handleSaveKey, handleFastLogin, verifyStatus, t }) {
   return React.createElement(
-    'div',
+    'section',
     { className: 'cb-section-card' },
     React.createElement('div', { className: 'cb-section-title' }, t('key.title')),
     React.createElement('div', { className: 'cb-section-desc' }, t('key.desc')),
@@ -906,15 +1866,11 @@ function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowK
         type: showKey ? 'text' : 'password',
         placeholder: keyPresent ? t('key.placeholder_has') : t('key.placeholder_empty'),
         value: apiKeyInput,
-        onChange: (e) => setApiKeyInput(e.target.value),
+        onChange: (event) => setApiKeyInput(event.target.value),
       }),
       React.createElement(
         'button',
-        {
-          type: 'button',
-          className: 'cb-btn',
-          onClick: () => setShowKey((v) => !v),
-        },
+        { type: 'button', className: 'cb-btn', onClick: () => setShowKey((value) => !value) },
         showKey ? t('key.hide') : t('key.show')
       ),
       React.createElement(
@@ -929,37 +1885,32 @@ function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowK
       ),
       React.createElement(
         'button',
-        {
-          type: 'button',
-          className: 'cb-btn',
-          disabled: !!busy,
-          onClick: handleFastLogin,
-        },
+        { type: 'button', className: 'cb-btn', disabled: !!busy, onClick: handleFastLogin },
         t('key.login_fast')
       )
     ),
     verifyStatus && verifyStatus.state === 'verifying'
-      ? React.createElement('div', { style: { marginTop: '8px', fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('key.verifying'))
+      ? React.createElement('div', { className: 'cb-hint' }, t('key.verifying'))
       : null,
     verifyStatus && verifyStatus.state === 'valid'
-      ? React.createElement('div', { className: 'cb-alert-ok', style: { marginTop: '8px', fontSize: '13px' } }, t('key.verified', { email: verifyStatus.email, plan: verifyStatus.plan }))
+      ? React.createElement('div', { className: 'cb-alert-ok cb-key-status' }, t('key.verified', { email: verifyStatus.email, plan: verifyStatus.plan }))
       : null,
     verifyStatus && verifyStatus.state === 'invalid'
-      ? React.createElement('div', { className: 'cb-alert-bad', style: { marginTop: '8px', fontSize: '13px' } }, t('key.invalid', { error: verifyStatus.error }))
+      ? React.createElement('div', { className: 'cb-alert-bad cb-key-status' }, t('key.invalid', { error: verifyStatus.error }))
       : null,
     React.createElement(
       'div',
-      { className: 'cb-row', style: { fontSize: '13px', marginTop: '12px', color: 'var(--dsw-alias-label-secondary)' } },
+      { className: 'cb-key-meta' },
       React.createElement('span', null, t('key.env_label')),
-      React.createElement('code', null, draft.apiKeyEnv || 'CLINEBOT_API_KEY'),
-      React.createElement('span', null, ' · '),
+      React.createElement('code', { className: 'cb-mono' }, draft.apiKeyEnv || 'CLINEBOT_API_KEY'),
+      React.createElement('span', { className: 'cb-muted' }, '·'),
       React.createElement(
         'a',
         {
           href: 'https://app.cline.bot/settings/api-keys',
           target: '_blank',
           rel: 'noreferrer',
-          style: { color: 'var(--dsw-alias-brand-primary)' },
+          className: 'cb-link',
         },
         t('key.get_key')
       )
@@ -968,188 +1919,201 @@ function KeySection({ keyPresent, apiKeyInput, setApiKeyInput, showKey, setShowK
 }
 
 // --- src/client/components/accounts-section.js ---
+/**
+ * Accounts pool: one calm row per account, with live quota, status dot and a
+ * compact action menu. Account mutations commit immediately; the rest of the
+ * settings page uses the staged save bar.
+ */
 function AccountsSection({
   status,
   busy,
   handlePinAccount,
   handleAddAccount,
   handleDeleteAccount,
+  handleRenameAccount,
+  handleClearKey,
   accountMode,
   handleUpdateAccountMode,
   modelRoutes = {},
   onUpdateModelRoutes,
   t,
 }) {
-  if (!status.accounts || !status.accounts.length) return null
-
   const [showAdd, setShowAdd] = React.useState(false)
   const [newLabel, setNewLabel] = React.useState('')
   const [newEnv, setNewEnv] = React.useState('')
   const [newKey, setNewKey] = React.useState('')
   const [showKey, setShowKey] = React.useState(false)
-  const [deleteSecret, setDeleteSecret] = React.useState(true)
+  const [discoveredKeys, setDiscoveredKeys] = React.useState([])
+  const [usageByAccount, setUsageByAccount] = React.useState({})
+  const [menuFor, setMenuFor] = React.useState('')
+  const [renameFor, setRenameFor] = React.useState('')
+  const [renameValue, setRenameValue] = React.useState('')
+  const [confirmAction, setConfirmAction] = React.useState(null)
   const [routeModel, setRouteModel] = React.useState('')
   const [routeAccount, setRouteAccount] = React.useState('')
-  const [discoveredKeys, setDiscoveredKeys] = React.useState([])
 
   React.useEffect(() => {
     let active = true
     fetchWithTimeout(`${ROUTE_PREFIX}/keys/discovered`, { cache: 'no-store' })
-      .then((r) => r.json())
+      .then((response) => response.json())
       .then((data) => {
-        if (active && data?.ok && Array.isArray(data.discovered)) {
-          setDiscoveredKeys(data.discovered)
-        }
+        if (active && data?.ok && Array.isArray(data.discovered)) setDiscoveredKeys(data.discovered)
       })
       .catch(() => {})
     return () => { active = false }
   }, [])
 
-  async function handleImportDiscovered(item) {
-    let max = 1
-    for (const a of (status.accounts || [])) {
-      const m = String(a.apiKeyEnv || '').match(/^CLINEBOT_API_KEY_(\d+)$/)
-      if (m) {
-        const n = parseInt(m[1], 10)
-        if (n >= max) max = n + 1
-      }
-    }
-    const targetEnv = `CLINEBOT_API_KEY_${max}`
-    if (typeof handleAddAccount === 'function') {
-      await handleAddAccount({
-        label: item.source || targetEnv,
-        apiKeyEnv: targetEnv,
-        id: item.id,
+  const accountSignature = (status?.accounts || []).map((account) => account.apiKeyEnv || account.id).join('|')
+  React.useEffect(() => {
+    let active = true
+    fetchWithTimeout(`${ROUTE_PREFIX}/accounts/usage`, { cache: 'no-store' })
+      .then((response) => response.json())
+      .then((data) => {
+        if (!active || !data?.ok || !Array.isArray(data.accounts)) return
+        const next = {}
+        for (const entry of data.accounts) next[entry.apiKeyEnv] = entry
+        setUsageByAccount(next)
       })
-      setDiscoveredKeys((prev) => prev.filter((k) => k.id !== item.id))
-    }
-  }
+      .catch(() => {})
+    return () => { active = false }
+  }, [accountSignature, status?.activeAccount, busy])
 
-  function handleOpenAdd() {
+  function nextEnvName() {
     let max = 1
-    for (const a of (status.accounts || [])) {
-      const m = String(a.apiKeyEnv || '').match(/^CLINEBOT_API_KEY_(\d+)$/)
-      if (m) {
-        const n = parseInt(m[1], 10)
-        if (n >= max) max = n + 1
-      }
+    for (const account of status.accounts || []) {
+      const match = String(account.apiKeyEnv || '').match(/^CLINEBOT_API_KEY_(\d+)$/)
+      if (match) max = Math.max(max, Number(match[1]) + 1)
     }
-    setNewEnv(`CLINEBOT_API_KEY_${max}`)
+    return `CLINEBOT_API_KEY_${max}`
+  }
+
+  function openAdd() {
+    setNewEnv(nextEnvName())
     setShowAdd(true)
   }
 
-  async function onSubmitAdd(e) {
-    if (e && e.preventDefault) e.preventDefault()
-    if (!newKey.trim()) return
-    if (typeof handleAddAccount === 'function') {
-      await handleAddAccount({
-        label: newLabel.trim() || newEnv.trim(),
-        apiKeyEnv: newEnv.trim(),
-        apiKey: newKey.trim(),
-      })
-    }
+  async function submitAdd(event) {
+    if (event?.preventDefault) event.preventDefault()
+    if (!newKey.trim() || typeof handleAddAccount !== 'function') return
+    await handleAddAccount({
+      label: newLabel.trim() || newEnv.trim(),
+      apiKeyEnv: newEnv.trim(),
+      apiKey: newKey.trim(),
+    })
     setNewLabel('')
     setNewEnv('')
     setNewKey('')
     setShowAdd(false)
   }
 
-  async function onDeleteAccount(envName) {
-    if (typeof window !== 'undefined' && typeof window.confirm === 'function') {
-      if (!window.confirm(t('accounts.delete_confirm', { label: envName }))) return
+  async function importDiscovered(item) {
+    if (typeof handleAddAccount !== 'function') return
+    await handleAddAccount({
+      label: item.source || nextEnvName(),
+      apiKeyEnv: nextEnvName(),
+      id: item.id,
+    })
+    setDiscoveredKeys((previous) => previous.filter((entry) => entry.id !== item.id))
+  }
+
+  function openRename(account) {
+    setMenuFor('')
+    setRenameFor(account.apiKeyEnv)
+    setRenameValue(account.label || '')
+  }
+
+  async function submitRename(account) {
+    if (typeof handleRenameAccount === 'function') {
+      await handleRenameAccount(account.apiKeyEnv, renameValue.trim() || account.apiKeyEnv)
+    }
+    setRenameFor('')
+    setRenameValue('')
+  }
+
+  async function runConfirm() {
+    if (!confirmAction) return
+    if (confirmAction.type === 'delete' && typeof handleDeleteAccount === 'function') {
+      await handleDeleteAccount(confirmAction.env, true)
     }
-    if (typeof handleDeleteAccount === 'function') {
-      await handleDeleteAccount(envName, deleteSecret)
+    if (confirmAction.type === 'clear' && typeof handleClearKey === 'function') {
+      await handleClearKey(confirmAction.env)
     }
+    setConfirmAction(null)
+  }
+
+  function dotClass(account, live) {
+    if (!account.present) return 'cb-status-dot cb-status-dot-warn'
+    if (live?.error) return 'cb-status-dot cb-status-dot-bad'
+    const percent = live?.usage?.windows?.fiveHour?.percentUsed
+    if (typeof percent === 'number' && percent >= 95) return 'cb-status-dot cb-status-dot-bad'
+    if (account.isPinned || status.activeAccount === account.apiKeyEnv) return 'cb-status-dot cb-status-dot-ok'
+    return 'cb-status-dot cb-status-dot-idle'
   }
 
+  const accounts = status.accounts || []
+
   return React.createElement(
-    'div',
-    { className: 'cb-section-card' },
+    'section',
+    { className: 'cb-section-card cb-accounts' },
     React.createElement(
       'div',
-      { className: 'cb-section-title', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-      React.createElement('span', null, t('accounts.title')),
+      { className: 'cb-section-head' },
+      React.createElement('div', { className: 'cb-section-title' }, t('accounts.title')),
       !showAdd
         ? React.createElement(
             'button',
-            {
-              type: 'button',
-              className: 'cb-btn',
-              style: { fontSize: '11px', padding: '4px 10px' },
-              onClick: handleOpenAdd,
-              disabled: !!busy,
-            },
-            t('accounts.add_btn')
+            { type: 'button', className: 'cb-btn cb-btn-primary', disabled: !!busy, onClick: openAdd },
+            React.createElement(CbIcon, { name: 'plus', size: 13 }),
+            ` ${t('accounts.add_btn')}`
           )
         : null
     ),
     React.createElement('div', { className: 'cb-section-desc' }, t('accounts.desc')),
+
     discoveredKeys.length > 0
       ? React.createElement(
           'div',
-          { className: 'cb-alert-ok', style: { display: 'flex', flexDirection: 'column', gap: '6px', margin: '6px 0' } },
-          React.createElement('div', { style: { fontWeight: 600 } }, `🔍 ${t('discovery.title')}`),
-          discoveredKeys.map((item, idx) =>
+          { className: 'cb-discovered' },
+          React.createElement(
+            'div',
+            { className: 'cb-discovered-head' },
+            React.createElement(CbIcon, { name: 'key', size: 14 }),
+            ` ${t('discovery.title')}`
+          ),
+          discoveredKeys.map((item) => React.createElement(
+            'div',
+            { className: 'cb-discovered-row', key: item.id },
+            React.createElement('span', { className: 'cb-mono' }, item.maskedKey || item.source),
+            React.createElement('span', { className: 'cb-muted' }, item.source || ''),
             React.createElement(
-              'div',
-              { key: idx, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-              React.createElement('span', null, `${item.maskedKey} (${item.source})`),
-              React.createElement(
-                'button',
-                {
-                  type: 'button',
-                  className: 'cb-btn',
-                  style: { fontSize: '11px', padding: '2px 8px' },
-                  disabled: !!busy,
-                  onClick: () => handleImportDiscovered(item),
-                },
-                t('discovery.import_btn', { source: item.source })
-              )
+              'button',
+              {
+                type: 'button',
+                className: 'cb-btn',
+                disabled: !!busy,
+                onClick: () => importDiscovered(item),
+              },
+              React.createElement(CbIcon, { name: 'download', size: 12 }),
+              ` ${t('discovery.import_btn', { source: item.source || '' })}`
             )
-          )
+          ))
         )
       : null,
+
     React.createElement(
       'div',
-      {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px',
-          margin: '8px 0 12px 0',
-          fontSize: '12px',
-          color: 'var(--dsw-alias-label-secondary)',
-        },
-      },
-      React.createElement('span', { style: { fontWeight: 500 } }, t('accounts.mode_label') + ':'),
+      { className: 'cb-account-mode' },
+      React.createElement('span', { className: 'cb-muted' }, t('accounts.mode_label')),
       React.createElement(
         'div',
-        {
-          style: {
-            display: 'inline-flex',
-            borderRadius: '6px',
-            border: '1px solid var(--dsw-alias-border-l2, color-mix(in srgb, currentColor 12%, transparent))',
-            overflow: 'hidden',
-          },
-        },
+        { className: 'cb-seg' },
         React.createElement(
           'button',
           {
             type: 'button',
-            className: 'cb-btn',
-            style: {
-              borderRadius: 0,
-              fontSize: '11px',
-              padding: '3px 9px',
-              border: 'none',
-              background: (accountMode || 'least_used') === 'least_used'
-                ? 'var(--dsw-alias-interactive-bg-active, color-mix(in srgb, currentColor 14%, transparent))'
-                : 'transparent',
-              fontWeight: (accountMode || 'least_used') === 'least_used' ? 600 : 400,
-            },
-            onClick: () => typeof handleUpdateAccountMode === 'function' && handleUpdateAccountMode('least_used'),
+            className: (accountMode || 'least_used') === 'least_used' ? 'cb-seg-item cb-seg-item-active' : 'cb-seg-item',
             disabled: !!busy,
+            onClick: () => handleUpdateAccountMode && handleUpdateAccountMode('least_used'),
           },
           t('accounts.mode_least_used')
         ),
@@ -1157,20 +2121,9 @@ function AccountsSection({
           'button',
           {
             type: 'button',
-            className: 'cb-btn',
-            style: {
-              borderRadius: 0,
-              fontSize: '11px',
-              padding: '3px 9px',
-              border: 'none',
-              borderLeft: '1px solid var(--dsw-alias-border-l2, color-mix(in srgb, currentColor 12%, transparent))',
-              background: accountMode === 'round_robin'
-                ? 'var(--dsw-alias-interactive-bg-active, color-mix(in srgb, currentColor 14%, transparent))'
-                : 'transparent',
-              fontWeight: accountMode === 'round_robin' ? 600 : 400,
-            },
-            onClick: () => typeof handleUpdateAccountMode === 'function' && handleUpdateAccountMode('round_robin'),
+            className: accountMode === 'round_robin' ? 'cb-seg-item cb-seg-item-active' : 'cb-seg-item',
             disabled: !!busy,
+            onClick: () => handleUpdateAccountMode && handleUpdateAccountMode('round_robin'),
           },
           t('accounts.mode_round_robin')
         )
@@ -1180,72 +2133,47 @@ function AccountsSection({
     showAdd
       ? React.createElement(
           'form',
-          {
-            onSubmit: onSubmitAdd,
-            style: {
-              background: 'var(--dsw-alias-interactive-bg-hover, color-mix(in srgb, currentColor 4%, transparent))',
-              border: '1px solid var(--dsw-alias-border-l2, color-mix(in srgb, currentColor 12%, transparent))',
-              borderRadius: '8px',
-              padding: '12px',
-              marginBottom: '14px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-            },
-          },
+          { className: 'cb-account-add', onSubmit: submitAdd },
           React.createElement(
             'div',
-            { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
+            { className: 'cb-account-add-row' },
             React.createElement('input', {
               type: 'text',
               className: 'cb-input',
-              style: { flex: '1 1 180px' },
               placeholder: t('accounts.label_placeholder'),
               value: newLabel,
-              onChange: (e) => setNewLabel(e.target.value),
+              onChange: (event) => setNewLabel(event.target.value),
             }),
             React.createElement('input', {
               type: 'text',
               className: 'cb-input',
-              style: { flex: '1 1 180px' },
               placeholder: t('accounts.env_placeholder'),
               value: newEnv,
-              onChange: (e) => setNewEnv(e.target.value),
+              onChange: (event) => setNewEnv(event.target.value),
             })
           ),
           React.createElement(
             'div',
-            { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+            { className: 'cb-account-add-row' },
             React.createElement('input', {
               type: showKey ? 'text' : 'password',
               className: 'cb-input',
-              style: { flex: '1' },
               placeholder: t('key.placeholder_empty'),
               value: newKey,
-              onChange: (e) => setNewKey(e.target.value),
+              onChange: (event) => setNewKey(event.target.value),
             }),
             React.createElement(
               'button',
-              {
-                type: 'button',
-                className: 'cb-btn',
-                style: { padding: '4px 8px', fontSize: '11px' },
-                onClick: () => setShowKey(!showKey),
-              },
+              { type: 'button', className: 'cb-btn', onClick: () => setShowKey((value) => !value) },
               showKey ? t('key.hide') : t('key.show')
             )
           ),
           React.createElement(
             'div',
-            { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '4px' } },
+            { className: 'cb-account-add-actions' },
             React.createElement(
               'button',
-              {
-                type: 'button',
-                className: 'cb-btn',
-                style: { padding: '4px 10px', fontSize: '12px' },
-                onClick: () => setShowAdd(false),
-              },
+              { type: 'button', className: 'cb-btn', onClick: () => setShowAdd(false) },
               t('accounts.cancel_btn')
             ),
             React.createElement(
@@ -1253,7 +2181,6 @@ function AccountsSection({
               {
                 type: 'submit',
                 className: 'cb-btn cb-btn-primary',
-                style: { padding: '4px 12px', fontSize: '12px' },
                 disabled: !newKey.trim() || !!busy,
               },
               busy === 'add-account' ? t('key.saving') : t('accounts.save_btn')
@@ -1262,147 +2189,186 @@ function AccountsSection({
         )
       : null,
 
-    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 envName = typeof acc.apiKeyEnv === 'string' ? acc.apiKeyEnv : ''
-          const label = typeof acc.label === 'string' ? acc.label : ''
-          const isActive = status.activeAccount === envName || (!status.activeAccount && acc.id === 'default')
-          const isPrimary = acc.id === 'default' || envName === status.config?.apiKeyEnv
-          return React.createElement(
-            'tr',
-            { key: acc.id || envName },
-            React.createElement('td', null, React.createElement('strong', null, label)),
-            React.createElement('td', null, React.createElement('code', null, envName)),
-            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,
-              acc.isPinned && !isActive
-                ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '6px', opacity: 0.85 } }, t('accounts.pinned_badge'))
-                : null,
-              typeof acc.percentUsed === 'number'
-                ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '6px' } }, t('accounts.quota_used', { pct: acc.percentUsed }))
-                : null
-            ),
-            React.createElement(
-              'td',
-              { style: { textAlign: 'right' } },
-              !isActive && acc.present
+    accounts.length === 0
+      ? React.createElement('div', { className: 'cb-empty' }, t('accounts.no_accounts'))
+      : React.createElement(
+          'div',
+          { className: 'cb-account-list' },
+          accounts.map((account) => {
+            const envName = account.apiKeyEnv || account.id || ''
+            const live = usageByAccount[envName]
+            const isActive = status.activeAccount === envName || (!status.activeAccount && account.id === 'default')
+            const isPrimary = account.id === 'default' || envName === status.config?.apiKeyEnv
+            const five = live?.usage?.windows?.fiveHour
+            const percent = typeof five?.percentUsed === 'number'
+              ? five.percentUsed
+              : (typeof account.percentUsed === 'number' ? account.percentUsed : null)
+            const plan = live?.usage?.plan || ''
+            const email = live?.usage?.user?.email || ''
+            return React.createElement(
+              'div',
+              { className: 'cb-account-item', key: envName || account.id },
+              React.createElement(
+                'div',
+                { className: 'cb-account-row' },
+                React.createElement('span', { className: dotClass(account, live), 'aria-hidden': 'true' }),
+                React.createElement(
+                  'div',
+                  { className: 'cb-account-main' },
+                  React.createElement(
+                    'div',
+                    { className: 'cb-account-name' },
+                    account.label || envName,
+                    React.createElement('span', { className: 'cb-account-env cb-mono' }, envName)
+                  ),
+                  React.createElement(
+                    'div',
+                    { className: 'cb-account-meta' },
+                    [plan, email].filter(Boolean).join(' · ') || t('accounts.source', { source: account.source || '—' })
+                  )
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'cb-account-badges' },
+                  isActive ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, t('accounts.active_badge')) : null,
+                  account.isPinned ? React.createElement('span', { className: 'cb-badge' }, t('accounts.pinned_badge')) : null,
+                  account.present
+                    ? React.createElement('span', { className: 'cb-badge' }, t('accounts.configured'))
+                    : React.createElement('span', { className: 'cb-badge cb-badge-warn' }, t('accounts.missing_key'))
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'cb-account-quota' },
+                  percent === null
+                    ? null
+                    : React.createElement(
+                        React.Fragment,
+                        null,
+                        React.createElement('span', { className: 'cb-muted' }, t('accounts.quota_5h', { pct: Math.round(percent) })),
+                        React.createElement(
+                          'span',
+                          { className: 'cb-meter' },
+                          React.createElement('span', {
+                            className: percent >= 95 ? 'cb-meter-fill cb-meter-fill-warn' : 'cb-meter-fill',
+                            style: { width: `${Math.max(0, Math.min(100, percent))}%` },
+                          })
+                        )
+                      )
+                ),
+                React.createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'cb-icon-btn',
+                    'aria-label': t('accounts.actions'),
+                    'aria-expanded': menuFor === envName,
+                    disabled: !!busy,
+                    onClick: () => setMenuFor((current) => (current === envName ? '' : envName)),
+                  },
+                  React.createElement(CbIcon, { name: 'kebab', size: 16 })
+                )
+              ),
+
+              menuFor === envName
                 ? React.createElement(
-                    'button',
-                    {
-                      type: 'button',
-                      className: 'cb-btn',
-                      style: { padding: '4px 8px', fontSize: '11px' },
-                      disabled: !!busy,
-                      onClick: () => handlePinAccount(envName),
-                    },
-                    t('accounts.pin_btn')
+                    'div',
+                    { className: 'cb-account-menu' },
+                    isActive
+                      ? React.createElement('button', { type: 'button', className: 'cb-menu-item', onClick: () => { setMenuFor(''); handlePinAccount('') } }, t('accounts.unpin'))
+                      : account.present
+                        ? React.createElement('button', { type: 'button', className: 'cb-menu-item', onClick: () => { setMenuFor(''); handlePinAccount(envName) } }, t('accounts.pin_btn'))
+                        : null,
+                    !isPrimary
+                      ? React.createElement('button', { type: 'button', className: 'cb-menu-item', onClick: () => openRename(account) }, t('accounts.rename'))
+                      : null,
+                    account.present
+                      ? React.createElement('button', { type: 'button', className: 'cb-menu-item', onClick: () => { setMenuFor(''); setConfirmAction({ type: 'clear', env: envName }) } }, t('accounts.clear_key'))
+                      : null,
+                    !isPrimary
+                      ? React.createElement('button', { type: 'button', className: 'cb-menu-item cb-menu-item-danger', onClick: () => { setMenuFor(''); setConfirmAction({ type: 'delete', env: envName }) } }, t('accounts.delete_btn'))
+                      : null
                   )
                 : null,
-              !isPrimary
+
+              renameFor === envName
                 ? React.createElement(
-                    'button',
-                    {
-                      type: 'button',
-                      className: 'cb-btn cb-btn-danger',
-                      style: { padding: '4px 8px', fontSize: '11px', marginLeft: '6px' },
-                      disabled: !!busy,
-                      onClick: () => onDeleteAccount(envName),
-                    },
-                    t('accounts.delete_btn')
+                    'div',
+                    { className: 'cb-account-inline' },
+                    React.createElement('input', {
+                      type: 'text',
+                      className: 'cb-input',
+                      value: renameValue,
+                      onChange: (event) => setRenameValue(event.target.value),
+                      placeholder: t('accounts.rename_placeholder'),
+                    }),
+                    React.createElement('button', { type: 'button', className: 'cb-btn cb-btn-primary', disabled: !!busy, onClick: () => submitRename(account) }, t('accounts.rename_save')),
+                    React.createElement('button', { type: 'button', className: 'cb-btn', onClick: () => setRenameFor('') }, t('accounts.cancel'))
+                  )
+                : null,
+
+              confirmAction && confirmAction.env === envName
+                ? React.createElement(
+                    'div',
+                    { className: 'cb-account-inline cb-account-danger' },
+                    React.createElement(
+                      'span',
+                      { className: 'cb-account-danger-text' },
+                      confirmAction.type === 'delete'
+                        ? t('accounts.remove_confirm', { name: account.label || envName })
+                        : t('accounts.clear_confirm', { name: account.label || envName })
+                    ),
+                    React.createElement('button', { type: 'button', className: 'cb-btn cb-btn-danger', disabled: !!busy, onClick: runConfirm }, t('accounts.confirm')),
+                    React.createElement('button', { type: 'button', className: 'cb-btn', onClick: () => setConfirmAction(null) }, t('accounts.cancel'))
                   )
                 : null
             )
-          )
-        })
-      )
-    ),
-    status.lastRotation
-      ? React.createElement(
-          'div',
-          { className: 'cb-rotation-info', style: { marginTop: '10px', fontSize: '12px', opacity: 0.85 } },
-          t('accounts.last_failover', {
-            from: status.lastRotation.from,
-            to: status.lastRotation.to,
-            reason: status.lastRotation.reason,
           })
-        )
-      : null,
+        ),
+
     React.createElement(
       'div',
-      { style: { marginTop: '14px', paddingTop: '12px', borderTop: '1px solid var(--dsw-alias-border-l2)' } },
+      { className: 'cb-account-routes' },
       React.createElement(
         'div',
-        { style: { fontSize: '12px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)', marginBottom: '4px' } },
-        t('accounts.routes_title')
+        { className: 'cb-account-routes-head' },
+        React.createElement(CbIcon, { name: 'route', size: 14 }),
+        ` ${t('accounts.routes_title')}`
       ),
+      React.createElement('div', { className: 'cb-section-desc' }, t('accounts.routes_desc')),
       React.createElement(
         'div',
-        { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', marginBottom: '8px' } },
-        t('accounts.routes_desc')
-      ),
-      React.createElement(
-        'div',
-        { style: { display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center' } },
+        { className: 'cb-account-route-add' },
         React.createElement('input', {
           type: 'text',
           className: 'cb-input',
-          style: { flex: '2 1 140px', height: '26px', fontSize: '11px', padding: '0 6px' },
           placeholder: t('accounts.route_model_placeholder'),
           value: routeModel,
-          onChange: (e) => setRouteModel(e.target.value),
+          onChange: (event) => setRouteModel(event.target.value),
         }),
         React.createElement(
           'select',
           {
             className: 'cb-select',
-            style: { flex: '1 1 120px', height: '26px', fontSize: '11px', padding: '0 4px' },
             value: routeAccount,
-            onChange: (e) => setRouteAccount(e.target.value),
+            onChange: (event) => setRouteAccount(event.target.value),
           },
           React.createElement('option', { value: '' }, t('accounts.route_account_placeholder')),
-          (status.accounts || []).map((acc) => {
-            const keyName = acc.apiKeyEnv || acc.id
-            return React.createElement('option', { key: keyName, value: keyName }, `${acc.label || keyName} (${keyName})`)
+          accounts.map((account) => {
+            const key = account.apiKeyEnv || account.id
+            return React.createElement('option', { key, value: key }, `${account.label || key} (${key})`)
           })
         ),
         React.createElement(
           'button',
           {
             type: 'button',
-            className: 'cb-btn cb-btn-primary',
-            style: { padding: '3px 8px', fontSize: '11px' },
+            className: 'cb-btn',
             disabled: !routeModel.trim() || !routeAccount.trim() || !!busy,
             onClick: () => {
-              if (typeof onUpdateModelRoutes === 'function') {
-                const next = { ...(modelRoutes || {}), [routeModel.trim()]: routeAccount.trim() }
-                onUpdateModelRoutes(next)
-                setRouteModel('')
-                setRouteAccount('')
-              }
+              if (typeof onUpdateModelRoutes !== 'function') return
+              onUpdateModelRoutes({ ...(modelRoutes || {}), [routeModel.trim()]: routeAccount.trim() })
+              setRouteModel('')
+              setRouteAccount('')
             },
           },
           t('accounts.route_btn_add')
@@ -1411,48 +2377,30 @@ function AccountsSection({
       Object.keys(modelRoutes || {}).length > 0
         ? React.createElement(
             'div',
-            { style: { display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '8px' } },
-            Object.entries(modelRoutes || {}).map(([mId, accKey]) =>
+            { className: 'cb-account-route-list' },
+            Object.entries(modelRoutes || {}).map(([modelId, accountKey]) => React.createElement(
+              'div',
+              { className: 'cb-account-route-row', key: modelId },
+              React.createElement('span', { className: 'cb-mono' }, modelId),
+              React.createElement(CbIcon, { name: 'chevron', size: 12 }),
+              React.createElement('strong', null, accountKey),
               React.createElement(
-                'div',
+                'button',
                 {
-                  key: mId,
-                  style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    padding: '3px 8px',
-                    fontSize: '11px',
-                    background: 'var(--dsw-alias-bg-layer-2)',
-                    borderRadius: '4px',
+                  type: 'button',
+                  className: 'cb-icon-btn',
+                  'aria-label': t('accounts.route_remove'),
+                  disabled: !!busy,
+                  onClick: () => {
+                    if (typeof onUpdateModelRoutes !== 'function') return
+                    const next = { ...(modelRoutes || {}) }
+                    delete next[modelId]
+                    onUpdateModelRoutes(next)
                   },
                 },
-                React.createElement(
-                  'span',
-                  null,
-                  React.createElement('code', null, mId),
-                  ' ➔ ',
-                  React.createElement('strong', null, accKey)
-                ),
-                React.createElement(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'cb-btn cb-btn-danger',
-                    style: { padding: '1px 6px', fontSize: '10px' },
-                    disabled: !!busy,
-                    onClick: () => {
-                      if (typeof onUpdateModelRoutes === 'function') {
-                        const next = { ...(modelRoutes || {}) }
-                        delete next[mId]
-                        onUpdateModelRoutes(next)
-                      }
-                    },
-                  },
-                  '✕'
-                )
+                React.createElement(CbIcon, { name: 'close', size: 13 })
               )
-            )
+            ))
           )
         : null
     )
@@ -1474,15 +2422,26 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, sho
       ? 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(
+            'span',
+            { className: 'cb-banner-icon' },
+            React.createElement(CbIcon, {
+              name: status.quotaWarning.level === 'exhausted' ? 'error' : 'warning',
+              size: 16,
+            })
+          ),
           React.createElement(
             'div',
-            { style: { flex: 1 } },
-            React.createElement('div', null, (status.quotaWarning.code && t(status.quotaWarning.code, status.quotaWarning.params)) || status.quotaWarning.message),
+            { className: 'cb-banner-body' },
+            React.createElement(
+              'div',
+              null,
+              (status.quotaWarning.code && t(status.quotaWarning.code, status.quotaWarning.params)) || status.quotaWarning.message
+            ),
             status.quotaWarning.resetsAt
               ? React.createElement(
                   'div',
-                  { style: { fontSize: '11px', opacity: 0.9, marginTop: '2px' } },
+                  { className: 'cb-banner-sub' },
                   t('quota.reset_at', { time: new Date(status.quotaWarning.resetsAt).toLocaleTimeString() })
                 )
               : null
@@ -1492,26 +2451,25 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, sho
           ? React.createElement(
               'div',
               { className: 'cb-banner-warning' },
-              React.createElement('span', { style: { fontSize: '16px' } }, '⚠️'),
-              React.createElement('div', { style: { flex: 1 } }, t('quota.warning_low'))
+              React.createElement(
+                'span',
+                { className: 'cb-banner-icon' },
+                React.createElement(CbIcon, { name: 'warning', size: 16 })
+              ),
+              React.createElement('div', { className: 'cb-banner-body' }, t('quota.warning_low'))
             )
           : null),
     keyPresent
       ? React.createElement(
-          'div',
+          'section',
           { className: 'cb-section-card' },
           React.createElement(
             'div',
-            { className: 'cb-section-title' },
-            t('quota.title'),
+            { className: 'cb-section-head' },
+            React.createElement('div', { className: 'cb-section-title' }, t('quota.title')),
             React.createElement(
               'button',
-              {
-                type: 'button',
-                className: 'cb-btn',
-                disabled: !!busy,
-                onClick: handleRefreshQuota,
-              },
+              { type: 'button', className: 'cb-btn', disabled: !!busy, onClick: handleRefreshQuota },
               busy === 'refresh-quota' ? t('quota.refreshing') : t('quota.refresh')
             )
           ),
@@ -1524,7 +2482,7 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, sho
           ),
           React.createElement(
             'div',
-            { className: 'cb-grid-2', style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '10px' } },
+            { className: 'cb-quota-grid' },
             usage?.windows?.fiveHour
               ? React.createElement(ProgressBar, {
                   label: t('quota.window_5h'),
@@ -1551,21 +2509,15 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, sho
                 })
               : null
           ),
-          React.createElement(
-            'div',
-            { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px', marginTop: '4px', paddingTop: '16px', borderTop: '.5px solid var(--dsw-alias-border-l2)' } },
-            React.createElement(
-              'div',
-              { style: { display: 'flex', flexDirection: 'column', minWidth: 0 } },
-              React.createElement('span', { style: { fontSize: '14px', lineHeight: '20px', color: 'var(--dsw-alias-label-primary)' } }, t('sidebar.show_quota')),
-              React.createElement('span', { style: { marginTop: '4px', fontSize: '12px', lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)' } }, t('sidebar.show_quota_hint'))
-            ),
-            React.createElement(BooleanControl, {
+          React.createElement(SettingRow, {
+            title: t('sidebar.show_quota'),
+            description: t('sidebar.show_quota_hint'),
+            control: React.createElement(BooleanControl, {
               checked: showSidebarQuota !== false,
               label: t('sidebar.show_quota'),
               onChange: (next) => onToggleSidebarQuota && onToggleSidebarQuota(next),
-            })
-          )
+            }),
+          })
         )
       : null
   )
@@ -1632,12 +2584,17 @@ function CustomModelsSub({ customModels = [], onConfigUpdate, busy, t }) {
       React.createElement(
         'span',
         { style: { fontWeight: 500, fontSize: '13px', color: 'var(--dsw-alias-label-primary)' } },
-        `➕ ${t('models.custom_add_title')} (${customModels.length})`
+        React.createElement(CbIcon, { name: 'plus', size: 13 }),
+        ` ${t('models.custom_add_title')} (${customModels.length})`
       ),
       React.createElement(
         'span',
         { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } },
-        isExpanded ? '▲' : '▼'
+        React.createElement(CbIcon, {
+          name: 'chevron',
+          size: 13,
+          className: isExpanded ? 'cb-icon cb-icon-chevron-open' : 'cb-icon',
+        })
       )
     ),
     isExpanded
@@ -1897,7 +2854,12 @@ function VisibleModelsSub({
             style: { padding: '4px 10px', fontSize: '12px' },
             onClick: () => setOpen(!open),
           },
-          open ? '▲ ' + t('models.models_selected', { selected: count, total: modelsList.length }) : '▼ ' + t('models.models_selected', { selected: count, total: modelsList.length })
+          React.createElement(CbIcon, {
+            name: 'chevron',
+            size: 12,
+            className: open ? 'cb-icon cb-icon-chevron-open' : 'cb-icon',
+          }),
+          ` ${t('models.models_selected', { selected: count, total: modelsList.length })}`
         )
       )
     ),
@@ -1984,7 +2946,7 @@ function VisibleModelsSub({
                     ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { fontSize: '10px', padding: '1px 6px' } }, t('models.in_plan'))
                     : React.createElement('span', { className: 'cb-badge', style: { fontSize: '10px', padding: '1px 6px', color: 'var(--dsw-alias-label-secondary)' } }, t('models.out_of_plan')),
                   !m.isContextOverridden
-                    ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { fontSize: '10px', padding: '1px 5px' } }, '原厂')
+                    ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { fontSize: '10px', padding: '1px 5px' } }, t('models.ctx_tag_original'))
                     : null
                 )
               )
@@ -1995,6 +2957,23 @@ function VisibleModelsSub({
   )
 }
 
+// --- src/client/components/provider-card.js ---
+/**
+ * Provider card inside DSH Settings -> Models.
+ *
+ * The host owns the row chrome: provider name, status dot and the Edit action.
+ * Accounts, the API key, models and quotas live on the full Settings -> ClineBot
+ * page, so this slot intentionally renders nothing instead of duplicating that
+ * form inside the Models page.
+ */
+function ProviderCard(props) {
+  const row = props?.provider || {}
+  const providerId = typeof row === 'string' ? row : (row.provider || props?.providerId || '')
+  const settingsNs = row && typeof row === 'object' ? (row.settingsNs || '') : ''
+  if (providerId !== 'clinebot' && settingsNs !== NS) return null
+  return null
+}
+
 // --- src/client/components/models-section.js ---
 function ModelsSection({
   modelsList,
@@ -2061,9 +3040,7 @@ function ModelsSection({
   return React.createElement(
     'div',
     { className: 'cb-section-card' },
-    defaultModelWarning
-      ? React.createElement('div', { className: 'cb-alert-bad', style: { marginBottom: '12px' } }, `⚠️ ${defaultModelWarning}`)
-      : null,
+    defaultModelWarning ? React.createElement('div', { className: 'cb-alert-bad cb-inline-alert', style: { marginBottom: '12px' } }, React.createElement(CbIcon, { name: 'warning', size: 14 }), ` ${defaultModelWarning}`) : null,
     React.createElement(VisibleModelsSub, {
       modelsList,
       visibleModels,
@@ -2424,7 +3401,7 @@ function ModelsSection({
                           setEditingModelId(m.id)
                         },
                       },
-                      '✎'
+                      React.createElement(CbIcon, { name: 'edit', size: 13 })
                     )
                   )
             ),
@@ -2503,6 +3480,7 @@ function StatsSection({ status, onResetStats, busy, t }) {
   const requests = typeof totals.requests === 'number' ? totals.requests : (typeof s.requests === 'number' ? s.requests : 0)
   const totalTokens = typeof totals.totalTokens === 'number' ? totals.totalTokens : (typeof s.totalTokens === 'number' ? s.totalTokens : 0)
   const errors429 = typeof totals.rateLimited429 === 'number' ? totals.rateLimited429 : (typeof s.errors429 === 'number' ? s.errors429 : (typeof totals.failed === 'number' ? totals.failed : 0))
+  const reasoning = Number(totals.reasoningTokens || sess.reasoningTokensEst || 0)
 
   const topModels = Object.entries(s.byModel || {})
     .sort((a, b) => {
@@ -2513,24 +3491,24 @@ function StatsSection({ status, onResetStats, busy, t }) {
     .slice(0, 5)
 
   return React.createElement(
-    'div',
+    'section',
     { className: 'cb-section-card' },
     React.createElement(
       'div',
-      { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' } },
+      { className: 'cb-section-head' },
       React.createElement('div', { className: 'cb-section-title' }, t('stats.title')),
       React.createElement(
         'div',
-        { style: { display: 'flex', gap: '6px', alignItems: 'center' } },
+        { className: 'cb-section-actions' },
         React.createElement(
           'a',
           {
             href: '/dsh-clinebot/stats/export',
             download: 'clinebot-stats.csv',
-            className: 'cb-btn',
-            style: { padding: '2px 8px', fontSize: '11px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center' },
+            className: 'cb-btn cb-btn-link',
           },
-          `📥 ${t('stats.export_csv')}`
+          React.createElement(CbIcon, { name: 'download', size: 13 }),
+          ` ${t('stats.export_csv')}`
         ),
         confirmReset
           ? React.createElement(
@@ -2541,7 +3519,6 @@ function StatsSection({ status, onResetStats, busy, t }) {
                 {
                   type: 'button',
                   className: 'cb-btn cb-btn-warn',
-                  style: { padding: '2px 8px', fontSize: '11px', marginRight: '6px' },
                   disabled: !!busy,
                   onClick: () => {
                     setConfirmReset(false)
@@ -2552,12 +3529,7 @@ function StatsSection({ status, onResetStats, busy, t }) {
               ),
               React.createElement(
                 'button',
-                {
-                  type: 'button',
-                  className: 'cb-btn',
-                  style: { padding: '2px 8px', fontSize: '11px' },
-                  onClick: () => setConfirmReset(false),
-                },
+                { type: 'button', className: 'cb-btn', onClick: () => setConfirmReset(false) },
                 t('stats.cancel_reset')
               )
             )
@@ -2566,7 +3538,6 @@ function StatsSection({ status, onResetStats, busy, t }) {
               {
                 type: 'button',
                 className: 'cb-btn',
-                style: { padding: '2px 8px', fontSize: '11px' },
                 disabled: !!busy,
                 onClick: () => setConfirmReset(true),
               },
@@ -2577,7 +3548,7 @@ function StatsSection({ status, onResetStats, busy, t }) {
     React.createElement('div', { className: 'cb-section-desc' }, t('stats.desc')),
     React.createElement(
       'div',
-      { className: 'cb-grid-2', style: { marginTop: '12px' } },
+      { className: 'cb-stats-grid' },
       React.createElement(
         'div',
         { className: 'cb-stat-box' },
@@ -2587,16 +3558,12 @@ function StatsSection({ status, onResetStats, busy, t }) {
       React.createElement(
         'div',
         { className: 'cb-stat-box' },
-        React.createElement(
-          'div',
-          { className: 'cb-stat-val' },
-          `${Number(totalTokens).toLocaleString()}`
-        ),
+        React.createElement('div', { className: 'cb-stat-val' }, Number(totalTokens).toLocaleString()),
         React.createElement(
           'div',
           { className: 'cb-stat-lbl' },
-          totals.reasoningTokens || sess.reasoningTokensEst
-            ? `${t('stats.tokens')} (${Number(totals.reasoningTokens || sess.reasoningTokensEst).toLocaleString()} reasoning)`
+          reasoning > 0
+            ? `${t('stats.tokens')} (${reasoning.toLocaleString()} reasoning)`
             : t('stats.tokens')
         )
       ),
@@ -2616,30 +3583,18 @@ function StatsSection({ status, onResetStats, busy, t }) {
     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(
+          { className: 'cb-model-list' },
+          React.createElement('div', { className: 'cb-model-list-title' }, t('stats.top_models')),
+          topModels.map(([modelId, data]) => 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.totalTokens ?? data.tokens ?? 0).toLocaleString()} tok${data.reasoningTokens ? ` (${Number(data.reasoningTokens).toLocaleString()} thk)` : ''}`)
-              )
+            { className: 'cb-model-row', key: modelId },
+            React.createElement('span', { className: 'cb-mono' }, modelId),
+            React.createElement(
+              'span',
+              { className: 'cb-muted' },
+              `${data.requests || 0} reqs · ${Number(data.totalTokens ?? data.tokens ?? 0).toLocaleString()} tok${data.reasoningTokens ? ` (${Number(data.reasoningTokens).toLocaleString()} reasoning)` : ''}`
             )
-          )
+          ))
         )
       : null
   )
@@ -2659,49 +3614,19 @@ function DiagSection({
   t,
 }) {
   return React.createElement(
-    'div',
+    'section',
     { 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',
-      {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '10px 14px',
-          background: 'var(--dsw-alias-bg-layer-2)',
-          borderRadius: '8px',
-          border: '1px solid var(--dsw-alias-border-l2)',
-        },
-      },
-      React.createElement(
-        'div',
-        { style: { display: 'flex', flexDirection: 'column', gap: '3px' } },
-        React.createElement(
-          'span',
-          { style: { fontSize: '13px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } },
-          t('diag.proxy_title')
-        ),
-        React.createElement(
-          'span',
-          { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } },
-          t('diag.proxy_desc')
-        )
-      ),
-      React.createElement(
-        'div',
-        { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px' } },
+    React.createElement(SettingRow, {
+      title: t('diag.proxy_title'),
+      description: t('diag.proxy_desc'),
+      control: React.createElement(
+        React.Fragment,
+        null,
         React.createElement(
           'span',
-          {
-            style: {
-              fontSize: '14px',
-              lineHeight: '20px',
-              color: proxyMode ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-secondary)',
-            },
-          },
+          { className: proxyMode ? 'cb-state-ok' : 'cb-muted' },
           proxyMode ? t('diag.proxy_enabled') : t('diag.proxy_disabled')
         ),
         React.createElement(BooleanControl, {
@@ -2710,11 +3635,11 @@ function DiagSection({
           label: t('diag.proxy_title'),
           onChange: (next) => onToggleProxy && onToggleProxy(next),
         })
-      )
-    ),
+      ),
+    }),
     React.createElement(
       'div',
-      { className: 'cb-row' },
+      { className: 'cb-row cb-row-actions' },
       React.createElement(
         'button',
         {
@@ -2737,12 +3662,12 @@ function DiagSection({
             busy === 'unregister' ? t('diag.unregistering') : t('diag.unregister_btn')
           )
         : null,
+      React.createElement('span', { className: 'cb-settings-spacer' }),
       React.createElement(
         'button',
         {
           type: 'button',
           className: 'cb-btn cb-btn-primary',
-          style: { marginLeft: 'auto' },
           disabled: !!busy,
           onClick: handleRegister,
         },
@@ -2802,7 +3727,7 @@ function MiniRing({ percent, size = 18, warn = false }) {
   )
 }
 
-function SidebarQuota({ ctx, wide, t: propT }) {
+function SidebarQuota({ ctx, wide, t: propT, open: openPanel }) {
   const t = propT || makeT(en, en)
   const [data, setData] = React.useState(null)
   const [open, setOpen] = React.useState(false)
@@ -2839,18 +3764,48 @@ function SidebarQuota({ ctx, wide, t: propT }) {
 
   if (!show) return null
 
-  const fiveHour = data?.windows?.fiveHour
-  const weekly = data?.windows?.weekly
-  const activeWindow = fiveHour || weekly
-  const pct = Math.round(activeWindow?.percentUsed || 0)
-  const isWarn = pct >= 85
-  const planName = data?.plan || t('title')
+  const windowEntries = [
+    { key: 'fiveHour', label: t('quota.window_5h'), value: data?.windows?.fiveHour },
+    { key: 'weekly', label: t('quota.window_weekly'), value: data?.windows?.weekly },
+    { key: 'monthly', label: t('quota.window_monthly'), value: data?.windows?.monthly },
+  ]
+
+  const windowPct = (window) => {
+    const value = Number(window.value?.percentUsed)
+    return Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : null
+  }
+
+  const measured = windowEntries
+    .map((window) => ({ ...window, pct: windowPct(window) }))
+    .filter((window) => window.pct !== null)
+
+  const pct = measured.length ? Math.max(...measured.map((window) => window.pct)) : 0
+  const isWarn = measured.some((window) => window.pct >= 85)
+  const planName = String(data?.plan || t('title')).replace(/\s*\(\$[^)]*\)\s*$/, '')
+  const accountLabel = data?.account ? ` · ${data.account}` : ''
+  const tooltip = `${planName}${accountLabel} · ${windowEntries.map((window) => {
+    const value = windowPct(window)
+    return `${window.label} ${value === null ? '—' : `${value}% ${t('dashboard.used')}`}`
+  }).join(' · ')}`
 
   // The window is local to the meter: nothing is selected or navigated, so the
   // conversation stays where it is and closing simply drops the window.
-  const handleOpen = () => setOpen(true)
+  const handleOpen = () => {
+    if (typeof openPanel === 'function') {
+      try {
+        if (openPanel() !== false) return
+      } catch {
+        /* fall through to the local window */
+      }
+    }
+    setOpen(true)
+  }
+
+  // Keep all three rows visible even when the endpoint omits a window for the
+  // current plan; the missing row shows an explicit dash instead of silently
+  // relabelling another window.
+  const rows = windowEntries
 
-  const tooltip = `${t('sidebar.quota_title')}: ${pct}% ${t('dashboard.used')} (${planName})`
   const dialog = React.createElement(DashboardDialog, { t, open, onClose: () => setOpen(false) })
 
   if (!wide) {
@@ -2891,68 +3846,403 @@ function SidebarQuota({ ctx, wide, t: propT }) {
         { className: 'cb-footTop' },
         React.createElement(MiniRing, { percent: pct, warn: isWarn, size: 16 }),
         React.createElement('span', { className: 'cb-footName' }, planName),
-        React.createElement('span', { className: 'cb-footPct', style: { marginLeft: 'auto', fontWeight: 600, color: isWarn ? 'var(--dsw-alias-state-error-primary)' : 'var(--dsw-alias-label-secondary)' } }, `${pct}%`)
+        React.createElement('span', { className: isWarn ? 'cb-footPct cb-footPctWarn' : 'cb-footPct' }, `${pct}%`)
       ),
+      rows.map((window) => {
+        const value = windowPct(window)
+        const hasData = value !== null
+        const warn = hasData && value >= 85
+        const reset = hasData && typeof formatResetCountdown === 'function'
+          ? formatResetCountdown(window.value?.resetsAt)
+          : ''
+        const resetText = reset
+          ? ` · ${reset === 'resetting' ? t('quota.resetting') : reset}`
+          : ''
+        return React.createElement(
+          'div',
+          { className: hasData ? 'cb-footRow' : 'cb-footRow cb-footRowMissing', key: window.key },
+          React.createElement(
+            'div',
+            { className: 'cb-footHead' },
+            React.createElement('span', { className: 'cb-footLabel' }, window.label),
+            React.createElement(
+              'span',
+              { className: hasData ? 'cb-footAmount' : 'cb-footAmount cb-footAmountMissing' },
+              hasData ? `${100 - value}% ${t('dashboard.remaining')}${resetText}` : '—'
+            )
+          ),
+          React.createElement(
+            'span',
+            { className: 'cb-footBar' },
+            React.createElement('span', {
+              className: warn ? 'cb-footFill cb-footFillWarn' : 'cb-footFill',
+              style: { width: hasData ? `${Math.min(100, Math.max(2, value))}%` : '0%' },
+            })
+          )
+        )
+      }),
+      rows.some((window) => windowPct(window) !== null)
+        ? null
+        : React.createElement('span', { className: 'cb-footMessage' }, data?.error || t('quota.no_windows'))
+    ),
+    dialog
+  )
+}
+
+// --- src/client/components/price-section.js ---
+/**
+ * Per-model price overrides. A blank field falls back to the built-in local
+ * estimate; the values are USD per 1M tokens.
+ */
+function PriceSection({ modelsList = [], priceOverrides = {}, onConfigUpdate, t }) {
+  const [expanded, setExpanded] = React.useState(false)
+  const models = Array.isArray(modelsList) ? modelsList : []
+
+  const update = (modelId, field, raw) => {
+    const next = { ...(priceOverrides || {}) }
+    const current = { ...(next[modelId] || {}) }
+    const value = String(raw ?? '').trim()
+    const numeric = Number(value)
+    if (value === '' || !Number.isFinite(numeric) || numeric < 0) delete current[field]
+    else current[field] = numeric
+    if (Object.keys(current).length === 0) delete next[modelId]
+    else next[modelId] = current
+    onConfigUpdate({ priceOverrides: next })
+  }
+
+  return React.createElement(
+    'div',
+    { className: 'cb-price-section' },
+    React.createElement(
+      'div',
+      { className: 'cb-price-head' },
       React.createElement(
         'div',
-        { className: 'cb-footRow' },
-        React.createElement(
+        { className: 'cb-price-copy' },
+        React.createElement('div', { className: 'cb-section-title' }, t('prices.title')),
+        React.createElement('div', { className: 'cb-section-desc' }, t('prices.desc'))
+      ),
+      React.createElement(
+        'button',
+        { type: 'button', className: 'cb-btn', onClick: () => setExpanded((value) => !value) },
+        expanded ? t('prices.hide') : t('prices.show')
+      )
+    ),
+    expanded
+      ? React.createElement(
           'div',
-          { className: 'cb-footHead' },
-          React.createElement('span', { className: 'cb-footLabel' }, t('dashboard.rolling_window')),
-          React.createElement('span', { className: 'cb-footAmount' }, `${100 - pct}% ${t('dashboard.remaining')}`)
-        ),
-        React.createElement(
+          { className: 'cb-price-table' },
+          React.createElement(
+            'div',
+            { className: 'cb-price-head-row' },
+            React.createElement('span', null, t('prices.model')),
+            React.createElement('span', null, t('prices.input')),
+            React.createElement('span', null, t('prices.output')),
+            React.createElement('span', null, t('prices.cache_read')),
+            React.createElement('span', null, t('prices.cache_write'))
+          ),
+          models.length === 0
+            ? React.createElement('div', { className: 'cb-hint' }, t('prices.empty'))
+            : models.map((model) => {
+                const override = priceOverrides?.[model.id] || {}
+                return React.createElement(
+                  'div',
+                  { className: 'cb-price-row', key: model.id },
+                  React.createElement('span', { className: 'cb-mono', title: model.id }, model.name || model.id),
+                  ['input', 'output', 'cacheRead', 'cacheWrite'].map((field) => React.createElement('input', {
+                    key: field,
+                    className: 'cb-input cb-price-input',
+                    type: 'number',
+                    min: '0',
+                    step: '0.001',
+                    value: override[field] === undefined ? '' : String(override[field]),
+                    placeholder: t('prices.auto'),
+                    onChange: (event) => update(model.id, field, event.target.value),
+                  }))
+                )
+              }),
+          React.createElement('div', { className: 'cb-hint' }, t('prices.hint'))
+        )
+      : null
+  )
+}
+
+// --- src/client/components/analytics-heatmap.js ---
+/**
+ * Weekday × hour request heatmap, matching the reference providers: seven rows
+ * (Mon–Sun), 24 columns, a peak-hour line and a compact by-hour strip. The
+ * model selector re-fetches the same range for one model.
+ */
+function heatWeekdayLabels() {
+  return Array.from({ length: 7 }, (_, index) => {
+    const date = new Date(2024, 0, 1 + index)
+    return date.toLocaleDateString(undefined, { weekday: 'short' })
+  })
+}
+
+function heatHourLabel(hour) {
+  return hour % 3 === 0 ? String(hour).padStart(2, '0') : ''
+}
+
+function HeatmapView({ heatmap, model, onModelChange, t }) {
+  if (!heatmap || !Array.isArray(heatmap.grid)) {
+    return React.createElement('div', { className: 'cb-hint' }, t('analytics.heatmap_empty'))
+  }
+
+  const grid = heatmap.grid
+  const hours = Array.isArray(heatmap.hours) ? heatmap.hours : Array(24).fill(0)
+  const total = Number(heatmap.total) || 0
+  const models = Array.isArray(heatmap.models) ? heatmap.models : []
+  const max = Math.max(1, ...grid.flat())
+  const maxHours = Math.max(1, ...hours)
+  const peakHour = hours.reduce((best, value, hour) => (value > (hours[best] || 0) ? hour : best), 0)
+  const peak = hours[peakHour] || 0
+  const level = (value) => {
+    const requests = Number(value) || 0
+    if (requests <= 0) return 0
+    return Math.min(4, Math.max(1, Math.ceil((requests / max) * 4)))
+  }
+  const weekdays = heatWeekdayLabels()
+
+  return React.createElement(
+    'div',
+    { className: 'cb-heat-wrap' },
+    React.createElement(
+      'div',
+      { className: 'cb-heat-toolbar' },
+      React.createElement('span', { className: 'cb-badge' }, `${total} ${t('analytics.requests')}`),
+      models.length > 1
+        ? React.createElement(
+            'select',
+            {
+              className: 'cb-heat-select',
+              value: model || '',
+              title: t('analytics.heatmap_model'),
+              onChange: (event) => onModelChange && onModelChange(event.target.value),
+            },
+            React.createElement('option', { value: '' }, `${t('analytics.heatmap_all_models')} (${total})`),
+            models.map((entry) => React.createElement(
+              'option',
+              { key: entry.model, value: entry.model },
+              `${entry.model} (${entry.total})`
+            ))
+          )
+        : null,
+      peak > 0
+        ? React.createElement('span', { className: 'cb-hint' }, `${t('analytics.heatmap_peak')}: ${String(peakHour).padStart(2, '0')}:00 · ${peak}`)
+        : null
+    ),
+    React.createElement(
+      'div',
+      { className: 'cb-heat-scroll' },
+      React.createElement(
+        'div',
+        { className: 'cb-heat' },
+        React.createElement('span', { className: 'cb-heat-corner' }),
+        hours.map((_, hour) => React.createElement(
+          'span',
+          { className: 'cb-heat-hour', key: `hour-${hour}` },
+          heatHourLabel(hour)
+        )),
+        weekdays.map((label, day) => React.createElement(
+          React.Fragment,
+          { key: `day-${day}` },
+          React.createElement('span', { className: 'cb-heat-day' }, label),
+          (grid[day] || []).map((value, hour) => React.createElement('span', {
+            key: `cell-${day}-${hour}`,
+            className: `cb-heat-cell cb-heat-l${level(value)}`,
+            title: `${label} ${String(hour).padStart(2, '0')}:00 — ${value} ${t('analytics.requests')}`,
+          }))
+        ))
+      ),
+      React.createElement('p', { className: 'cb-hour-strip-head' }, t('analytics.heatmap_by_hour')),
+      React.createElement(
+        'div',
+        { className: 'cb-hour-strip' },
+        React.createElement('span'),
+        hours.map((value, hour) => React.createElement(
           'span',
-          { className: 'cb-footBar' },
+          { className: 'cb-hour-col', key: `strip-${hour}`, title: `${String(hour).padStart(2, '0')}:00 — ${value}` },
           React.createElement('span', {
-            className: isWarn ? 'cb-footFill cb-footFillWarn' : 'cb-footFill',
-            style: { width: `${Math.min(100, Math.max(2, pct))}%` },
+            className: `cb-hour-bar cb-heat-l${level(value)}`,
+            style: { height: `${Math.max(2, Math.round(28 * (Number(value) || 0) / maxHours))}px` },
           })
+        ))
+      ),
+      React.createElement(
+        'div',
+        { className: 'cb-hour-labels' },
+        React.createElement('span'),
+        hours.map((_, hour) => React.createElement('span', { key: `label-${hour}` }, heatHourLabel(hour)))
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'cb-heat-legend' },
+      React.createElement('span', null, t('analytics.heatmap_less')),
+      [0, 1, 2, 3, 4].map((bucket) => React.createElement('span', {
+        key: bucket,
+        className: `cb-heat-swatch cb-heat-l${bucket}`,
+      })),
+      React.createElement('span', null, t('analytics.heatmap_more'))
+    ),
+    total === 0
+      ? React.createElement('div', { className: 'cb-hint' }, t('analytics.heatmap_empty'))
+      : null
+  )
+}
+
+// --- src/client/components/quota-panel-view.js ---
+/**
+ * The account/quota cards shared by the center-column panel and the modal
+ * fallback. Account tabs and the selected account's report are passed in by
+ * DashboardDialog; this component only renders the selected snapshot.
+ */
+function QuotaPanelView({
+  accountTabs,
+  selectedUsage,
+  accountName,
+  accountEmail,
+  accountPlan,
+  accountBadges = [],
+  activeAcc,
+  routingMode,
+  enabledCount,
+  t,
+}) {
+  return React.createElement(
+    React.Fragment,
+    null,
+    accountTabs,
+    selectedUsage?.ok === false
+      ? React.createElement('div', { className: 'cb-alert-bad' }, selectedUsage.error || t('analytics.no_data'))
+      : null,
+    React.createElement(
+      'div',
+      { className: 'cb-dialogCard' },
+      React.createElement(
+        'div',
+        { className: 'cb-dialogRow' },
+        React.createElement(
+          'div',
+          { className: 'cb-dialogIdentity' },
+          React.createElement('div', { className: 'cb-row-title' }, accountName),
+          React.createElement('div', { className: 'cb-row-desc' }, [accountEmail, accountPlan].filter(Boolean).join(' · '))
+        ),
+        React.createElement(
+          'div',
+          { className: 'cb-dialogBadges' },
+          accountBadges.map((badge, index) => React.createElement('span', { className: badge.className, key: `account-badge-${index}` }, badge.label)),
+          React.createElement('span', { className: 'cb-badge cb-badge-ok' }, t('badge.registered', { count: enabledCount }))
+        )
+      ),
+      React.createElement(
+        'div',
+        { className: 'cb-dialogTiles' },
+        React.createElement(
+          'div',
+          { className: 'cb-stat-box' },
+          React.createElement('div', { className: 'cb-stat-lbl' }, t('dashboard.account_pool')),
+          React.createElement('div', { className: 'cb-stat-val' }, activeAcc)
+        ),
+        React.createElement(
+          'div',
+          { className: 'cb-stat-box' },
+          React.createElement('div', { className: 'cb-stat-lbl' }, t('accounts.mode_label')),
+          React.createElement('div', { className: 'cb-stat-val' }, routingMode)
         )
       )
     ),
-    dialog
+    React.createElement(
+      'div',
+      { className: 'cb-dialogCard' },
+      React.createElement('div', { className: 'cb-section-title' }, t('quota.title')),
+      React.createElement(
+        'div',
+        { className: 'cb-dialogWindows' },
+        selectedUsage?.windows?.fiveHour
+          ? React.createElement(ProgressBar, {
+              label: t('quota.window_5h'),
+              percentUsed: selectedUsage.windows.fiveHour.percentUsed || 0,
+              remainingPercent: selectedUsage.windows.fiveHour.remainingPercent || 100,
+              resetsAt: selectedUsage.windows.fiveHour.resetsAt,
+              t,
+            })
+          : null,
+        selectedUsage?.windows?.weekly
+          ? React.createElement(ProgressBar, {
+              label: t('quota.window_weekly'),
+              percentUsed: selectedUsage.windows.weekly.percentUsed || 0,
+              remainingPercent: selectedUsage.windows.weekly.remainingPercent || 100,
+              resetsAt: selectedUsage.windows.weekly.resetsAt,
+              t,
+            })
+          : null,
+        selectedUsage?.windows?.monthly
+          ? React.createElement(ProgressBar, {
+              label: t('quota.window_monthly'),
+              percentUsed: selectedUsage.windows.monthly.percentUsed || 0,
+              remainingPercent: selectedUsage.windows.monthly.remainingPercent || 100,
+              resetsAt: selectedUsage.windows.monthly.resetsAt,
+              t,
+            })
+          : null,
+        !selectedUsage?.windows || (!selectedUsage.windows.fiveHour && !selectedUsage.windows.weekly && !selectedUsage.windows.monthly)
+          ? React.createElement('div', { className: 'cb-hint' }, t('quota.no_windows'))
+          : null
+      )
+    )
   )
 }
 
 // --- src/client/components/dashboard-dialog.js ---
 /**
- * The quota & status window, opened from the sidebar meter.
- *
- * This used to be a `main`-slot panel: clicking the meter called
- * `layout.selectPanel('clinebot-dashboard')`, which swapped the conversation out
- * of the centre column for a full-bleed dashboard. A status read-out has no
- * business replacing the conversation, so it is a window now — the shell's own
- * `Modal`, which brings the backdrop, the close affordance, Escape and focus
- * handling with it.
- *
- * `open` is owned by the caller (the meter), and the data is fetched on open
- * rather than on mount, so a closed window costs nothing.
+ * Quota and analytics surfaces. The sidebar card opens this as the layout's
+ * center-column panel (the Command Code / OpenCode shape); when the layout
+ * service is unavailable the same content falls back to the shell's Modal.
  */
 function DashboardDialog(props) {
   const t = props?.t || makeT(en, en)
-  const open = props?.open !== false
+  const panel = props?.panel === true
+  const open = panel || props?.open !== false
   const onClose = typeof props?.onClose === 'function' ? props.onClose : () => {}
 
   const [data, setData] = React.useState(null)
   const [status, setStatus] = React.useState(null)
+  const [analytics, setAnalytics] = React.useState(null)
+  const [tab, setTab] = React.useState('quota')
+  const [groupBy, setGroupBy] = React.useState('model')
   const [loading, setLoading] = React.useState(false)
+  const [analyticsLoading, setAnalyticsLoading] = React.useState(false)
   const [updatedAt, setUpdatedAt] = React.useState('')
   const [err, setErr] = React.useState('')
+  const [accountsUsage, setAccountsUsage] = React.useState(null)
+  const [selectedAccount, setSelectedAccount] = React.useState('')
+  const [analyticsDays, setAnalyticsDays] = React.useState(7)
+  const [heatmapModel, setHeatmapModel] = React.useState('')
 
   const loadData = React.useCallback(async () => {
     setLoading(true)
     setErr('')
     try {
-      const [uRes, sRes] = await Promise.all([
+      const [uRes, sRes, aRes] = await Promise.all([
         fetchWithTimeout(`${ROUTE_PREFIX}/usage`, { cache: 'no-store' }),
         fetchWithTimeout(`${ROUTE_PREFIX}/status`, { cache: 'no-store' }),
+        fetchWithTimeout(`${ROUTE_PREFIX}/accounts/usage`, { cache: 'no-store' }),
       ])
       const uJson = await uRes.json().catch(() => ({}))
       const sJson = await sRes.json().catch(() => ({}))
+      const aJson = await aRes.json().catch(() => ({}))
       if (uJson?.ok) setData(uJson)
       if (sJson?.ok) setStatus(sJson)
+      if (aJson?.ok) {
+        setAccountsUsage(aJson)
+        setSelectedAccount((current) => {
+          const accounts = Array.isArray(aJson.accounts) ? aJson.accounts : []
+          if (accounts.some((entry) => entry.apiKeyEnv === current)) return current
+          return aJson.activeAccount || accounts[0]?.apiKeyEnv || ''
+        })
+      }
       setUpdatedAt(new Date().toLocaleTimeString())
     } catch (e) {
       setErr(String(e?.message || e))
@@ -2961,105 +4251,375 @@ function DashboardDialog(props) {
     }
   }, [])
 
+  const loadAnalytics = React.useCallback(async (group = groupBy, days = analyticsDays, model = heatmapModel) => {
+    setAnalyticsLoading(true)
+    setErr('')
+    try {
+      const from = Date.now() - days * 86_400_000
+      const query = [
+        `groupBy=${encodeURIComponent(group)}`,
+        'limit=20',
+        `from=${from}`,
+        `heatmapDays=${days}`,
+        ...(model ? [`heatmapModel=${encodeURIComponent(model)}`] : []),
+      ].join('&')
+      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/analytics?${query}`, { cache: 'no-store' })
+      const json = await res.json().catch(() => ({}))
+      if (!res.ok || !json.ok) throw new Error(json.error || `HTTP ${res.status}`)
+      setAnalytics(json)
+    } catch (e) {
+      setErr(String(e?.message || e))
+    } finally {
+      setAnalyticsLoading(false)
+    }
+  }, [groupBy, analyticsDays, heatmapModel])
+
   React.useEffect(() => {
     if (open) loadData()
   }, [open, loadData])
 
+  React.useEffect(() => {
+    if (open && (panel || tab === 'analytics')) loadAnalytics(groupBy, analyticsDays, heatmapModel)
+  }, [open, panel, tab, groupBy, analyticsDays, heatmapModel, loadAnalytics])
+
+  React.useEffect(() => {
+    if (!open) return undefined
+    let timer = null
+    const tick = () => {
+      loadData()
+      if (panel || tab === 'analytics') loadAnalytics(groupBy, analyticsDays, heatmapModel)
+      timer = setTimeout(tick, 120000)
+    }
+    timer = setTimeout(tick, 120000)
+    return () => { if (timer) clearTimeout(timer) }
+  }, [open, panel, tab, groupBy, analyticsDays, heatmapModel, loadData, loadAnalytics])
+
   if (!open) return null
 
+  function fmtTokens(value) {
+    const n = Number(value) || 0
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
+    return String(n)
+  }
+
+  function fmtCost(value) {
+    const n = Number(value) || 0
+    if (n === 0) return '$0'
+    if (n < 0.0001) return '< $0.0001'
+    return `$${n.toFixed(4)}`
+  }
+
+  function fmtMs(value) {
+    const n = Number(value) || 0
+    return n > 0 ? `${Math.round(n)} ms` : '—'
+  }
+
   const plan = data?.plan || status?.config?.defaultModel || 'ClinePass'
   const email = data?.user?.email || ''
-  const activeAcc = status?.config?.activeAccount || 'Auto (Least-used)'
+  const activeAcc = status?.config?.activeAccount || t('dashboard.auto_account')
   const enabledCount = status?.config?.enabledModels?.length || 0
   const routingMode = status?.config?.accountMode === 'round_robin' ? t('accounts.mode_round_robin') : t('accounts.mode_least_used')
+  const accountEntries = Array.isArray(accountsUsage?.accounts) ? accountsUsage.accounts : []
+  const selectedEntry = accountEntries.find((entry) => entry.apiKeyEnv === selectedAccount)
+    || accountEntries.find((entry) => entry.active)
+    || accountEntries[0]
+  const selectedUsage = selectedEntry?.usage || data
+  const accountPlan = selectedUsage?.plan || plan
+  const accountEmail = selectedUsage?.user?.email || email
+  const accountName = selectedEntry?.label || selectedEntry?.apiKeyEnv || accountPlan
+  const accountBadges = []
+  if (selectedEntry) {
+    accountBadges.push(selectedEntry.configured === false
+      ? { className: 'cb-badge cb-badge-warn', label: t('accounts.missing_key') }
+      : { className: 'cb-badge cb-badge-ok', label: t('accounts.configured') })
+    if (selectedEntry.active) accountBadges.push({ className: 'cb-badge cb-badge-ok', label: t('accounts.active_badge') })
+    if (selectedEntry.isPinned) accountBadges.push({ className: 'cb-badge', label: t('accounts.pinned_badge') })
+  }
+  const accountTabs = accountEntries.length > 1
+    ? React.createElement(
+        'div',
+        { className: 'cb-account-tabs' },
+        accountEntries.map((entry) => React.createElement(
+          'button',
+          {
+            type: 'button',
+            key: entry.apiKeyEnv || entry.id,
+            className: entry.apiKeyEnv === selectedEntry?.apiKeyEnv ? 'cb-account-tab cb-account-tab-active' : 'cb-account-tab',
+            onClick: () => setSelectedAccount(entry.apiKeyEnv),
+          },
+          entry.label || entry.apiKeyEnv || entry.id
+        ))
+      )
+    : null
+
+  const noticeItems = []
+  if (status?.key && status.key.present === false) {
+    noticeItems.push(React.createElement(
+      'div',
+      { className: 'cb-notice', key: 'no-key' },
+      React.createElement('div', { className: 'cb-notice-title' }, t('analytics.no_key')),
+      React.createElement('div', { className: 'cb-notice-hint' }, t('analytics.no_key_hint'))
+    ))
+  }
+  if (status?.health && status.health.ok === false) {
+    noticeItems.push(React.createElement(
+      'div',
+      { className: 'cb-notice cb-notice-error', key: 'health' },
+      React.createElement('div', { className: 'cb-notice-title' }, t('analytics.health_error')),
+      React.createElement('div', { className: 'cb-notice-hint' }, status.health.error || '')
+    ))
+  }
+  if (status && status.isRegistered === false) {
+    noticeItems.push(React.createElement(
+      'div',
+      { className: 'cb-notice', key: 'not-registered' },
+      React.createElement('div', { className: 'cb-notice-title' }, t('analytics.not_registered')),
+      React.createElement('div', { className: 'cb-notice-hint' }, t('analytics.not_registered_hint'))
+    ))
+  }
+  const notices = noticeItems.length
+    ? React.createElement(React.Fragment, null, ...noticeItems)
+    : null
+  const errorNotice = err
+    ? React.createElement('div', { className: data ? 'cb-hint' : 'cb-alert-bad' }, data ? `${t('analytics.stale')} ${err}` : err)
+    : null
+  const totals = analytics?.totals
+  const secondaryTiles = totals
+    ? [
+        [t('analytics.input'), fmtTokens(totals.promptTokens)],
+        [t('analytics.output'), fmtTokens(totals.completionTokens)],
+        [t('analytics.reasoning'), fmtTokens(totals.reasoningTokens)],
+        [t('analytics.cache_read'), fmtTokens(totals.cacheReadTokens)],
+        [t('analytics.cache_write'), fmtTokens(totals.cacheWriteTokens)],
+        [t('analytics.avg_ttft'), fmtMs(totals.avgTtftMs)],
+        [t('analytics.avg_latency'), fmtMs(totals.avgLatencyMs)],
+        [t('analytics.errors'), String(Math.round(Number(totals.failed) || 0))],
+      ]
+    : []
+
+  const tabs = React.createElement(
+    'div',
+    { className: 'cb-tabs' },
+    React.createElement(
+      'button',
+      { type: 'button', className: tab === 'quota' ? 'cb-tab cb-tab-active' : 'cb-tab', onClick: () => setTab('quota') },
+      t('dashboard.tab_quota')
+    ),
+    React.createElement(
+      'button',
+      { type: 'button', className: tab === 'analytics' ? 'cb-tab cb-tab-active' : 'cb-tab', onClick: () => setTab('analytics') },
+      t('dashboard.tab_analytics')
+    )
+  )
+
+  const quotaBody = React.createElement(QuotaPanelView, {
+    accountTabs,
+    selectedUsage,
+    accountName,
+    accountEmail,
+    accountPlan,
+    accountBadges,
+    activeAcc,
+    routingMode,
+    enabledCount,
+    t,
+  })
+
+  const analyticsBody = React.createElement(
+    'div',
+    { className: 'cb-dialogCard' },
+    React.createElement(
+      'div',
+      { className: 'cb-dialogRow' },
+      React.createElement('div', { className: 'cb-section-title' }, t('analytics.title')),
+      React.createElement(
+        'div',
+        { className: 'cb-analytics-controls' },
+        React.createElement(
+          'select',
+          {
+            className: 'cb-heat-select',
+            value: String(analyticsDays),
+            title: t('analytics.range'),
+            onChange: (event) => setAnalyticsDays(Number(event.target.value)),
+          },
+          React.createElement('option', { value: '7' }, t('analytics.range_7')),
+          React.createElement('option', { value: '30' }, t('analytics.range_30')),
+          React.createElement('option', { value: '90' }, t('analytics.range_90'))
+        ),
+        React.createElement(
+          'div',
+          { className: 'cb-seg' },
+          ['model', 'day', 'session'].map((group) => React.createElement(
+            'button',
+            {
+              key: group,
+              type: 'button',
+              className: groupBy === group ? 'cb-seg-item cb-seg-item-active' : 'cb-seg-item',
+              onClick: () => setGroupBy(group),
+            },
+            t(`analytics.group_${group}`)
+          ))
+        )
+      )
+    ),
+    analytics?.totals
+      ? React.createElement(
+          'div',
+          { className: 'cb-dialogTiles' },
+          React.createElement(
+            'div',
+            { className: 'cb-stat-box' },
+            React.createElement('div', { className: 'cb-stat-val' }, String(analytics.totals.requests || 0)),
+            React.createElement('div', { className: 'cb-stat-lbl' }, t('analytics.requests'))
+          ),
+          React.createElement(
+            'div',
+            { className: 'cb-stat-box' },
+            React.createElement('div', { className: 'cb-stat-val' }, fmtTokens(analytics.totals.totalTokens)),
+            React.createElement('div', { className: 'cb-stat-lbl' }, t('analytics.tokens'))
+          ),
+          React.createElement(
+            'div',
+            { className: 'cb-stat-box' },
+            React.createElement('div', { className: 'cb-stat-val' }, `≈ ${fmtCost(analytics.totals.costUsd)}`),
+            React.createElement('div', { className: 'cb-stat-lbl' }, t('analytics.cost'))
+          ),
+          React.createElement(
+            'div',
+            { className: 'cb-stat-box' },
+            React.createElement('div', { className: 'cb-stat-val' }, `${Math.round(analytics.totals.successRate || 0)}%`),
+            React.createElement('div', { className: 'cb-stat-lbl' }, t('analytics.success'))
+          )
+        )
+      : null,
+    secondaryTiles.length
+      ? React.createElement(
+          'div',
+          { className: 'cb-dialogTiles' },
+          secondaryTiles.map(([label, value]) => React.createElement(
+            'div',
+            { className: 'cb-stat-box', key: label },
+            React.createElement('div', { className: 'cb-stat-val' }, value),
+            React.createElement('div', { className: 'cb-stat-lbl' }, label)
+          ))
+        )
+      : null,
+    analyticsLoading
+      ? React.createElement('div', { className: 'cb-hint' }, t('analytics.loading'))
+      : analytics?.groups?.length
+        ? React.createElement(
+            'div',
+            { className: 'cb-analytics-list' },
+            React.createElement(
+              'div',
+              { className: 'cb-analytics-head' },
+              React.createElement('span', null, analytics.groupBy || groupBy),
+              React.createElement('span', null, t('analytics.requests')),
+              React.createElement('span', null, t('analytics.tokens')),
+              React.createElement('span', null, t('analytics.cost')),
+              React.createElement('span', null, t('analytics.ttft'))
+            ),
+            analytics.groups.map((group) => React.createElement(
+              'div',
+              { className: 'cb-analytics-row', key: group.key },
+              React.createElement('span', { className: 'cb-mono' }, group.label || group.key),
+              React.createElement('span', null, String(group.requests || 0)),
+              React.createElement('span', null, fmtTokens(group.totalTokens)),
+              React.createElement('span', null, `≈ ${fmtCost(group.costUsd)}`),
+              React.createElement('span', null, group.avgTtftMs ? `${Math.round(group.avgTtftMs)} ms` : '—')
+            ))
+          )
+        : React.createElement('div', { className: 'cb-empty' }, t('analytics.no_data')),
+    analytics?.unpriced > 0
+      ? React.createElement('div', { className: 'cb-hint' }, t('analytics.unpriced', { count: analytics.unpriced }))
+      : null
+  )
 
-  const body = React.createElement(
+  const heatmapCard = React.createElement(
     'div',
-    { className: 'cb-dialog' },
-    React.createElement(
-      'div',
-      { className: 'cb-dialogMeta' },
-      updatedAt ? React.createElement('span', null, `${t('dashboard.updated_at')} ${updatedAt}`) : null,
-      React.createElement('span', { style: { flex: 1 } }),
-      React.createElement(
-        'button',
-        { type: 'button', className: 'cb-btn', disabled: loading, onClick: loadData },
-        loading ? t('dashboard.refreshing') : t('dashboard.refresh')
-      )
-    ),
-
-    err ? React.createElement('div', { className: 'cb-alert-bad' }, err) : null,
+    { className: 'cb-dialogCard' },
+    React.createElement('div', { className: 'cb-section-title' }, t('analytics.heatmap')),
+    React.createElement('div', { className: 'cb-section-desc' }, t('analytics.heatmap_hint')),
+    React.createElement(HeatmapView, {
+      heatmap: analytics?.heatmap,
+      model: heatmapModel,
+      onModelChange: setHeatmapModel,
+      t,
+    })
+  )
 
-    // Account and plan
+  const panelBody = React.createElement(
+    'div',
+    { className: 'cb-panel' },
     React.createElement(
       'div',
-      { className: 'cb-dialogCard' },
+      { className: 'cb-panel-head' },
       React.createElement(
         'div',
-        { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px', flexWrap: 'wrap' } },
-        React.createElement(
-          'div',
-          { style: { display: 'flex', flexDirection: 'column', minWidth: 0 } },
-          React.createElement('div', { className: 'cb-row-title' }, plan),
-          email ? React.createElement('div', { className: 'cb-row-desc' }, email) : null
-        ),
-        React.createElement('span', { className: 'cb-badge cb-badge-ok' }, t('badge.registered', { count: enabledCount }))
+        { className: 'cb-panel-identity' },
+        React.createElement('div', { className: 'cb-panel-title' }, t('dashboard.title')),
+        React.createElement('div', { className: 'cb-panel-sub' }, t('dashboard.subtitle'))
       ),
       React.createElement(
         'div',
-        { className: 'cb-grid-2', style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' } },
+        { className: 'cb-panel-actions' },
+        updatedAt ? React.createElement('span', { className: 'cb-panel-updated' }, `${t('dashboard.updated_at')} ${updatedAt}`) : null,
         React.createElement(
-          'div',
-          { className: 'cb-stat-box' },
-          React.createElement('div', { className: 'cb-stat-lbl' }, t('dashboard.account_pool')),
-          React.createElement('div', { className: 'cb-stat-val', style: { fontSize: '14px', wordBreak: 'break-all' } }, activeAcc)
+          'button',
+          {
+            type: 'button',
+            className: 'cb-btn',
+            disabled: loading || analyticsLoading,
+            onClick: () => { loadData(); loadAnalytics(groupBy) },
+          },
+          (loading || analyticsLoading) ? t('dashboard.refreshing') : t('dashboard.refresh')
         ),
         React.createElement(
-          'div',
-          { className: 'cb-stat-box' },
-          React.createElement('div', { className: 'cb-stat-lbl' }, t('accounts.mode_label')),
-          React.createElement('div', { className: 'cb-stat-val', style: { fontSize: '14px' } }, routingMode)
+          'button',
+          {
+            type: 'button',
+            className: 'cb-panel-close',
+            'aria-label': t('dashboard.close'),
+            title: t('dashboard.close'),
+            onClick: onClose,
+          },
+          '×'
         )
       )
     ),
+    notices,
+    errorNotice,
+    quotaBody,
+    analyticsBody,
+    heatmapCard
+  )
 
-    // Quota windows
+  const body = React.createElement(
+    'div',
+    { className: 'cb-dialog' },
     React.createElement(
       'div',
-      { className: 'cb-dialogCard' },
-      React.createElement('div', { className: 'cb-section-title' }, t('quota.title')),
+      { className: 'cb-dialogMeta' },
+      updatedAt ? React.createElement('span', null, `${t('dashboard.updated_at')} ${updatedAt}`) : null,
+      React.createElement('span', { className: 'cb-settings-spacer' }),
       React.createElement(
-        'div',
-        { style: { display: 'flex', flexDirection: 'column', gap: '12px' } },
-        data?.windows?.fiveHour
-          ? React.createElement(ProgressBar, {
-              label: t('quota.window_5h'),
-              percentUsed: data.windows.fiveHour.percentUsed || 0,
-              remainingPercent: data.windows.fiveHour.remainingPercent || 100,
-              resetsAt: data.windows.fiveHour.resetsAt,
-              t,
-            })
-          : null,
-        React.createElement(ProgressBar, {
-          label: t('quota.window_weekly'),
-          percentUsed: data?.windows?.weekly?.percentUsed || 0,
-          remainingPercent: data?.windows?.weekly?.remainingPercent || 100,
-          resetsAt: data?.windows?.weekly?.resetsAt,
-          t,
-        }),
-        data?.windows?.monthly
-          ? React.createElement(ProgressBar, {
-              label: t('quota.window_monthly'),
-              percentUsed: data.windows.monthly.percentUsed || 0,
-              remainingPercent: data.windows.monthly.remainingPercent || 100,
-              resetsAt: data.windows.monthly.resetsAt,
-              t,
-            })
-          : null
+        'button',
+        { type: 'button', className: 'cb-btn', disabled: loading || analyticsLoading, onClick: () => (tab === 'quota' ? loadData() : loadAnalytics(groupBy)) },
+        (loading || analyticsLoading) ? t('dashboard.refreshing') : t('dashboard.refresh')
       )
-    )
+    ),
+    tabs,
+    notices,
+    errorNotice,
+    tab === 'quota'
+      ? quotaBody
+      : React.createElement(React.Fragment, null, analyticsBody, heatmapCard)
   )
 
+  if (panel) return panelBody
+
   if (Modal) {
     return React.createElement(Modal, {
       open: true,
@@ -3071,18 +4631,17 @@ function DashboardDialog(props) {
     })
   }
 
-  // Older shells without the primitive still get a window, just a plainer one.
   return React.createElement(
     'div',
     { className: 'cb-dialogFallback', role: 'dialog', 'aria-label': t('dashboard.title'), onClick: onClose },
     React.createElement(
       'div',
-      { className: 'cb-dialogFallbackPanel', onClick: (e) => e.stopPropagation() },
+      { className: 'cb-dialogFallbackPanel', onClick: (event) => event.stopPropagation() },
       React.createElement(
         'div',
         { className: 'cb-dialogMeta' },
         React.createElement('span', { className: 'cb-row-title' }, t('dashboard.title')),
-        React.createElement('span', { style: { flex: 1 } }),
+        React.createElement('span', { className: 'cb-settings-spacer' }),
         React.createElement(
           'button',
           { type: 'button', className: 'cb-btn', 'aria-label': t('dashboard.close'), onClick: onClose },
@@ -3102,43 +4661,84 @@ function formatTokens(count) {
   return String(n)
 }
 
-function calculateCost(tokens, modelId = '') {
-  const isPremium = String(modelId).includes('claude') || String(modelId).includes('pro')
-  // Rates per 1M tokens
-  const promptRate = isPremium ? 3.0 : 0.15
-  const completionRate = isPremium ? 15.0 : 0.60
-  const reasoningRate = isPremium ? 15.0 : 0.60
+function findPrice(modelId, prices) {
+  if (!modelId || !Array.isArray(prices)) return null
+  const exact = prices.find((entry) => entry && entry.id === modelId)
+  if (exact) return exact
+  return prices.find((entry) => entry && entry.id && (modelId === entry.id || modelId.endsWith(`/${entry.id}`) || modelId.includes(entry.id))) || null
+}
 
+function calculateCost(tokens, modelId, prices) {
   const pTok = Number(tokens?.promptTokens || tokens?.inputTokens || 0)
   const cTok = Number(tokens?.completionTokens || tokens?.outputTokens || 0)
   const rTok = Number(tokens?.reasoningTokens || 0)
-
-  const cost = (pTok * promptRate + cTok * completionRate + rTok * reasoningRate) / 1000000
-  return { cost, pTok, cTok, rTok, total: pTok + cTok + rTok }
+  const cacheRead = Number(tokens?.cacheReadTokens || tokens?.cacheRead || 0)
+  const cacheWrite = Number(tokens?.cacheWriteTokens || tokens?.cacheWrite || 0)
+  const total = pTok + cTok + rTok
+  const price = findPrice(modelId, prices)
+  if (!price) return { cost: 0, priced: false, source: null, pTok, cTok, rTok, cacheRead, cacheWrite, total }
+  const uncachedInput = Math.max(0, pTok - cacheRead - cacheWrite)
+  const cost = (
+    uncachedInput * Number(price.input || 0) +
+    cTok * Number(price.output || 0) +
+    cacheRead * Number(price.cacheRead || 0) +
+    cacheWrite * Number(price.cacheWrite || 0)
+  ) / 1000000
+  return { cost, priced: true, source: price.source || 'estimate', pTok, cTok, rTok, cacheRead, cacheWrite, total }
 }
 
+const COST_ANCHOR = '[data-slot="conversation.composer.dock"]'
+const STATS_ROOT = '[data-composer-stats]'
+const STATS_USAGE = '[data-composer-stat="usage"]'
+const STATS_ANY = '[data-composer-stat]'
+const DIALOG_TRIGGER = 'button[aria-haspopup="dialog"]'
+const MISSES_BEFORE_WARNING = 3
+
+/**
+ * Inject the session cost into the native token-usage pill instead of drawing a
+ * second pill. The composer's `conversation.composer.dock` entry is still the
+ * only way to read the session projection; the rendered node is a hidden anchor
+ * the injection locates its own composer from.
+ */
 function ComposerCostDock(props) {
+  if (typeof props?.useProjection !== 'function') return null
+  return React.createElement(ComposerCostEntry, props)
+}
+
+function ComposerCostEntry(props) {
   const t = props?.t || makeT(en, en)
+  const configSnapshot = useConfigFormsSnapshot(props?.ctx)
   const [stats, setStats] = React.useState(null)
-  const [showPopover, setShowPopover] = React.useState(false)
+  const [prices, setPrices] = React.useState([])
+  const markerRef = React.useRef(null)
+
+  const projectedTokens = props.useProjection('tokenUsage')
+  const selection = props.useProjection('modelSelection')
+  const priceOverridesKey = JSON.stringify(configSnapshot?.value?.priceOverrides || {})
 
-  // Use projection hook if passed by DSH composer dock, or poll session stats
-  const projectedTokens = typeof props?.useProjection === 'function' ? props.useProjection('tokenUsage') : null
-  const projectedModel = typeof props?.useProjection === 'function' ? props.useProjection('modelSelection') : null
+  React.useEffect(() => {
+    let active = true
+    fetchWithTimeout(`${ROUTE_PREFIX}/prices`, { cache: 'no-store' })
+      .then((response) => response.json())
+      .then((data) => {
+        if (active && data?.ok && Array.isArray(data.models)) setPrices(data.models)
+      })
+      .catch(() => {})
+    return () => { active = false }
+  }, [priceOverridesKey])
 
   React.useEffect(() => {
-    if (projectedTokens) return
+    if (projectedTokens) return undefined
     let active = true
     const loadStats = async () => {
       try {
         const res = await fetchWithTimeout(`${ROUTE_PREFIX}/stats`, { cache: 'no-store' })
         if (!res.ok) return
         const data = await res.json().catch(() => null)
-        if (active && data?.stats?.summary) {
-          setStats(data.stats.summary)
-        }
+        const totals = data?.stats?.totals || data?.stats?.summary || null
+        if (active && totals) setStats(totals)
       } catch {
-        // quiet
+        /* quiet */
       }
     }
     loadStats()
@@ -3146,111 +4746,122 @@ function ComposerCostDock(props) {
     return () => { active = false; clearTimeout(timer) }
   }, [projectedTokens])
 
-  const tokens = projectedTokens || {
+  const selected = selection?.lastUsed
+    ?? selection?.next
+    ?? (selection?.provider || selection?.model ? selection : null)
+  const provider = String(selected?.provider || '')
+  const modelId = String(selected?.model || selected?.id || '')
+  const isClineBot = (provider === '' || provider === 'clinebot' || provider === 'llm-clinebot')
+    && (provider === 'clinebot' || provider === 'llm-clinebot' || modelId.startsWith('cline-pass/'))
+
+  const rawTokens = projectedTokens || {
     promptTokens: stats?.promptTokens || 0,
     completionTokens: stats?.completionTokens || 0,
     reasoningTokens: stats?.reasoningTokens || 0,
+    cacheReadTokens: stats?.cacheReadTokens || 0,
+    cacheWriteTokens: stats?.cacheWriteTokens || 0,
   }
-
-  const modelId = projectedModel?.id || ''
-  const { cost, pTok, cTok, rTok, total } = calculateCost(tokens, modelId)
-
-  if (total === 0 && !stats) {
-    return null
+  const cacheRead = Number(rawTokens.cacheReadTokens || 0)
+  const cacheWrite = Number(rawTokens.cacheWriteTokens || 0)
+  const uncachedInput = Number(rawTokens.uncachedInputTokens)
+  const promptTokens = Number.isFinite(uncachedInput)
+    ? uncachedInput + cacheRead + cacheWrite
+    : Number(rawTokens.promptTokens || rawTokens.inputTokens || 0)
+  const tokens = {
+    promptTokens,
+    completionTokens: Number(rawTokens.completionTokens || rawTokens.outputTokens || 0),
+    reasoningTokens: Number(rawTokens.reasoningTokens || 0),
+    cacheReadTokens: cacheRead,
+    cacheWriteTokens: cacheWrite,
   }
+  const { cost, priced, source, pTok, cTok, rTok, total } = calculateCost(tokens, modelId, prices)
+
+  const costValue = priced ? (cost < 0.0001 && cost > 0 ? '< $0.0001' : `$${cost.toFixed(4)}`) : t('composer.unpriced')
+  const costDisplay = priced && source === 'estimate' ? `≈ ${costValue}` : costValue
+  const title = [
+    `${t('composer.cost_title')} ${costDisplay}`,
+    `${t('composer.prompt_tok')} ${formatTokens(pTok)}`,
+    `${t('composer.completion_tok')} ${formatTokens(cTok)}`,
+    ...(rTok > 0 ? [`${t('composer.reasoning_tok')} ${formatTokens(rTok)}`] : []),
+    ...(cacheRead > 0 ? [`${t('composer.cache_read')} ${formatTokens(cacheRead)}`] : []),
+    ...(cacheWrite > 0 ? [`${t('composer.cache_write')} ${formatTokens(cacheWrite)}`] : []),
+    ...(priced ? [`${t('composer.price_source')} ${source === 'override' ? t('composer.price_override') : t('composer.price_estimate')}`] : []),
+  ].join(' · ')
+  const inject = isClineBot && priced && total > 0
 
-  const costDisplay = cost < 0.001 && cost > 0 ? '< $0.001' : `$${cost.toFixed(3)}`
+  React.useEffect(() => {
+    if (!inject || typeof document === 'undefined') return undefined
+    const marker = markerRef.current
+    if (!marker) return undefined
+    const scope = marker.closest(COST_ANCHOR)
+    if (!scope) return undefined
+
+    let host = null
+    let root = null
+    let valueNode = null
+    let misses = 0
+
+    const apply = () => {
+      if (!root || root.parentNode === null) {
+        const usageAnchor = scope.querySelector(STATS_USAGE) || scope.querySelector(STATS_ANY)
+        const statsRoot = usageAnchor || scope.querySelector(STATS_ROOT) || scope
+        const triggers = statsRoot.querySelectorAll(DIALOG_TRIGGER)
+        const button = triggers[triggers.length - 1] || usageAnchor
+        if (!button) {
+          misses += 1
+          if (misses === MISSES_BEFORE_WARNING) {
+            console.warn('[dsh-clinebot] no native token-usage pill found for the session cost')
+          }
+          return
+        }
+        misses = 0
+        host = button
+        root = document.createElement('span')
+        root.setAttribute('data-clinebot-session-cost', '')
+        root.style.display = 'inline-flex'
+        root.style.alignItems = 'center'
+        const separator = document.createElement('span')
+        separator.textContent = '·'
+        separator.setAttribute('aria-hidden', 'true')
+        separator.style.color = 'var(--dsw-alias-separator-primary)'
+        separator.style.margin = '0 6px 0 0'
+        valueNode = document.createElement('span')
+        valueNode.style.fontWeight = '500'
+        root.appendChild(separator)
+        root.appendChild(valueNode)
+        button.appendChild(root)
+      }
+      if (root.parentNode !== host) host.appendChild(root)
+      if (valueNode.textContent !== costDisplay) valueNode.textContent = costDisplay
+      if (root.title !== title) root.title = title
+    }
 
-  return React.createElement(
-    'div',
-    {
-      className: 'cb-composer-cost-dock',
-      'data-composer-session-cost': 'true',
-      style: { position: 'relative', display: 'inline-flex', alignItems: 'center' },
-    },
-    React.createElement(
-      'button',
-      {
-        type: 'button',
-        className: 'cb-btn',
-        style: {
-          padding: '2px 8px',
-          fontSize: '11px',
-          height: '24px',
-          borderRadius: '999px',
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: '4px',
-          color: 'var(--dsw-alias-label-secondary)',
-          background: 'var(--dsw-alias-bg-layer-2)',
-          border: '1px solid var(--dsw-alias-border-l2)',
-          cursor: 'pointer',
-        },
-        title: `${t('composer.cost_title')}: ${costDisplay} (${formatTokens(total)} tokens)`,
-        onClick: () => setShowPopover(!showPopover),
-      },
-      React.createElement('span', { style: { fontSize: '12px' } }, '🪙'),
-      React.createElement('span', { style: { fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } }, `≈ ${costDisplay}`),
-      React.createElement('span', { style: { opacity: 0.7 } }, `· ${formatTokens(total)} tok`)
-    ),
-    showPopover
-      ? React.createElement(
-          'div',
-          {
-            className: 'cb-popover',
-            style: {
-              position: 'absolute',
-              bottom: '100%',
-              left: 0,
-              marginBottom: '6px',
-              minWidth: '200px',
-              padding: '10px 12px',
-              background: 'var(--dsw-alias-bg-layer-3)',
-              border: '1px solid var(--dsw-alias-border-l2)',
-              borderRadius: '8px',
-              boxShadow: 'var(--dsw-elevation-prominent)',
-              zIndex: 100,
-              fontSize: '12px',
-              color: 'var(--dsw-alias-label-primary)',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '6px',
-            },
-          },
-          React.createElement(
-            'div',
-            { style: { fontWeight: 600, borderBottom: '1px solid var(--dsw-alias-border-l2)', paddingBottom: '4px' } },
-            t('composer.cost_breakdown')
-          ),
-          React.createElement(
-            'div',
-            { style: { display: 'flex', justifyContent: 'space-between' } },
-            React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)' } }, t('composer.prompt_tok')),
-            React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, formatTokens(pTok))
-          ),
-          React.createElement(
-            'div',
-            { style: { display: 'flex', justifyContent: 'space-between' } },
-            React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)' } }, t('composer.completion_tok')),
-            React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, formatTokens(cTok))
-          ),
-          rTok > 0
-            ? React.createElement(
-                'div',
-                { style: { display: 'flex', justifyContent: 'space-between' } },
-                React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)' } }, t('composer.reasoning_tok')),
-                React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, formatTokens(rTok))
-              )
-            : null,
-          React.createElement(
-            'div',
-            { style: { display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: '4px', fontWeight: 600 } },
-            React.createElement('span', null, t('composer.est_cost')),
-            React.createElement('span', { style: { color: 'var(--dsw-alias-brand-primary)' } }, `≈ ${costDisplay}`)
-          )
-        )
+    apply()
+    const observer = typeof window !== 'undefined' && typeof window.MutationObserver === 'function'
+      ? new window.MutationObserver(apply)
       : null
-  )
+    observer?.observe(document.body, { childList: true })
+    let timer = null
+    const tick = () => {
+      apply()
+      timer = setTimeout(tick, 2000)
+    }
+    timer = setTimeout(tick, 2000)
+    return () => {
+      observer?.disconnect()
+      if (timer) clearTimeout(timer)
+      if (root?.parentNode) root.parentNode.removeChild(root)
+    }
+  }, [inject, costDisplay, title])
+
+  if (configSnapshot?.value?.showComposerCost === false) return null
+  if (total === 0 && !stats) return null
+  if (!inject) return null
+  return React.createElement('span', {
+    ref: markerRef,
+    style: { display: 'none' },
+    'data-clinebot-cost-anchor': '',
+  })
 }
 
 // --- src/client/settings-page.js ---
@@ -3275,6 +4886,7 @@ function SettingsPage(props) {
 
   React.useEffect(() => { ensureCss() }, [])
 
+  const pendingRef = React.useRef({})
   const load = React.useCallback(async () => {
     setErr('')
     const [res, statsRes] = await Promise.all([
@@ -3286,11 +4898,15 @@ function SettingsPage(props) {
     const rawStats = statsRes && statsRes.ok ? await statsRes.json().catch(() => null) : null
     const statsObj = (rawStats && typeof rawStats === 'object' && rawStats.stats) ? rawStats.stats : (rawStats || data.statsSummary || {})
     setStatus({ ...data, statsSummary: statsObj })
-    setDraft(data.config || {})
+    // Preserve unsaved staged fields across an account/model refresh.
+    setDraft({ ...(data.config || {}), ...(pendingRef.current || {}) })
   }, [])
 
   React.useEffect(() => { load().catch((e) => setErr(String(e.message || e))) }, [load])
 
+  const staged = useStagedConfig({ status, draft, setDraft, load, t, pendingRef })
+  const modelSelection = useModelSelection({ status, draft, setDraft, load, setErr })
+
   const checkUpdate = React.useCallback(async () => {
     setUpdateState((s) => ({ ...s, checking: true, status: 'checking', error: '' }))
     try {
@@ -3378,6 +4994,14 @@ function SettingsPage(props) {
     }
   }
 
+  const {
+    handlePinAccount,
+    handleAddAccount,
+    handleDeleteAccount,
+    handleRenameAccount,
+    handleClearKey,
+  } = createAccountActions({ performAction, load, t, setMsg })
+
   async function handleSaveKey() {
     const keyVal = String(apiKeyInput || '').trim()
     if (!keyVal) { setErr(t('key.empty_err')); return }
@@ -3498,45 +5122,6 @@ function SettingsPage(props) {
     window.open('https://app.cline.bot/settings/api-keys', '_blank')
   }
 
-  async function handlePinAccount(accountEnv) {
-    await performAction('pin-account', async () => {
-      const res = await fetchWithTimeout(`${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()
-    })
-  }
-
-  async function handleAddAccount({ label, apiKeyEnv, apiKey, id }) {
-    await performAction('add-account', async () => {
-      const endpoint = id ? `${ROUTE_PREFIX}/keys/discovered/import` : `${ROUTE_PREFIX}/accounts`
-      const payload = id ? { id, label, apiKeyEnv } : { label, apiKeyEnv, apiKey }
-      const res = await fetchWithTimeout(endpoint, {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload),
-      })
-      const data = await res.json().catch(() => ({}))
-      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
-      setMsg(t('key.saved_msg', { status: data.validated ? 'OK' : (data.validationError || 'Notice') }))
-      await load()
-    })
-  }
-
-  async function handleDeleteAccount(accountEnv, deleteSecret = true) {
-    await performAction('delete-account', async () => {
-      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/accounts/delete`, {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ apiKeyEnv: accountEnv, deleteSecret }),
-      })
-      const data = await res.json().catch(() => ({}))
-      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
-      await load()
-    })
-  }
-
   async function handleConfigPatch(patch) {
     setDraft((d) => ({ ...(d || {}), ...(patch || {}) }))
     await performAction('patch-config', async () => {
@@ -3559,60 +5144,6 @@ function SettingsPage(props) {
     })
   }
 
-  const debounceTimerRef = typeof React.useRef === 'function' ? React.useRef(null) : { current: null }
-
-  React.useEffect(() => () => { if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current) }, [])
-
-  function debounceSaveDisabledModels(nextDisabled, previousDisabled) {
-    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
-    debounceTimerRef.current = setTimeout(async () => {
-      try {
-        const res = await fetchWithTimeout(`${ROUTE_PREFIX}/models/toggle`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ disabledModels: nextDisabled }),
-        })
-        const data = await res.json().catch(() => ({}))
-        if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
-        await load()
-      } catch (err) {
-        console.warn('[dsh-clinebot] Failed saving disabled models:', err)
-        setErr(String(err?.message || err))
-        setDraft((prev) => {
-          if (!prev) return prev
-          const all = status?.availableModels || []
-          const prevEnabled = all.map((m) => m.id).filter((mId) => !previousDisabled.includes(mId))
-          return { ...prev, disabledModels: previousDisabled, enabledModels: prevEnabled }
-        })
-      }
-    }, 400)
-  }
-
-  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, curr)
-  }
-
-  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 curr = draft?.disabledModels || []
-    const nextDisabled = all.map((m) => m.id).filter((id) => !allowed.has(id))
-    const nextEnabled = Array.from(allowed)
-    setDraft({ ...draft, disabledModels: nextDisabled, enabledModels: nextEnabled })
-    debounceSaveDisabledModels(nextDisabled, curr)
-  }
-
   if (!status || !draft) {
     if (err) {
       return React.createElement(
@@ -3693,7 +5224,13 @@ function SettingsPage(props) {
 
     // Accounts Pool Card
     React.createElement(AccountsSection, {
-      status, busy, handlePinAccount, handleAddAccount, handleDeleteAccount,
+      status,
+      busy,
+      handlePinAccount,
+      handleAddAccount,
+      handleDeleteAccount,
+      handleRenameAccount,
+      handleClearKey,
       accountMode: draft?.accountMode || status?.config?.accountMode || 'least_used',
       handleUpdateAccountMode: (mode) => handleConfigPatch({ accountMode: mode }),
       modelRoutes: draft?.modelRoutes || status?.config?.modelRoutes || {},
@@ -3702,39 +5239,72 @@ function SettingsPage(props) {
     }),
 
     // Quota Warning & Dashboard Card
-    React.createElement(QuotaSection, { keyPresent, status, usage, busy, handleRefreshQuota, showSidebarQuota: draft?.showSidebarQuota !== false, onToggleSidebarQuota: (v) => handleConfigPatch({ showSidebarQuota: v }), t }),
-
-    // Card 3: Model Picker Management
-    React.createElement(ModelsSection, {
-      modelsList,
-      disabledSet,
-      enabledCount,
+    React.createElement(QuotaSection, {
       keyPresent,
+      status,
+      usage,
       busy,
-      handleSyncPlanModels,
-      handleUpdateModelContext,
-      handleSetModelsFilter,
-      handleToggleModel,
-      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 || {},
-      visibleModels: draft?.visibleModels || [],
-      filterModelsByPlan: draft?.filterModelsByPlan !== false,
-      onConfigUpdate: handleConfigPatch,
-      onUpdateReasoningEffort: (modelId, effort) => {
-        const next = { ...(draft?.modelReasoningDefaults || {}) }
-        if (!effort) delete next[modelId]; else next[modelId] = effort
-        handleConfigPatch({ modelReasoningDefaults: next })
-      },
+      handleRefreshQuota,
+      showSidebarQuota: draft?.showSidebarQuota !== false,
+      onToggleSidebarQuota: (value) => staged.stage({ showSidebarQuota: value }),
       t,
     }),
 
-    // Card 4: Session Metrics & Usage Tracking
+    // Models & context: a foldable group keeps the long model table out of the
+    // initial page while preserving the picker controls.
+    React.createElement(
+      CollapsibleGroup,
+      {
+        title: t('settings.models_group'),
+        description: t('settings.models_group_hint'),
+        badge: `${enabledCount}/${modelsList.length}`,
+        divided: true,
+        defaultOpen: false,
+      },
+      React.createElement(ModelsSection, {
+        modelsList,
+        disabledSet,
+        enabledCount,
+        keyPresent,
+        busy,
+        handleSyncPlanModels,
+        handleUpdateModelContext,
+        handleSetModelsFilter: modelSelection.handleSetModelsFilter,
+        handleToggleModel: modelSelection.handleToggleModel,
+        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 || {},
+        visibleModels: draft?.visibleModels || [],
+        filterModelsByPlan: draft?.filterModelsByPlan !== false,
+        onConfigUpdate: staged.stage,
+        onUpdateReasoningEffort: (modelId, effort) => {
+          const next = { ...(draft?.modelReasoningDefaults || {}) }
+          if (!effort) delete next[modelId]; else next[modelId] = effort
+          staged.stage({ modelReasoningDefaults: next })
+        },
+        t,
+      }),
+      React.createElement(PriceSection, {
+        modelsList,
+        priceOverrides: draft?.priceOverrides || {},
+        onConfigUpdate: staged.stage,
+        t,
+      })
+    ),
+
+    // Session Metrics & Usage Tracking
     React.createElement(StatsSection, { status, onResetStats: handleResetStats, busy, t }),
 
-    // Card 5: Diagnostics & Sync with DSH
+    React.createElement(IntegrationsSection, {
+      draft,
+      onStage: staged.stage,
+      transport: draft?.transport || status?.config?.transport || 'adapter',
+      t,
+    }),
+
+    // Diagnostics & Sync with DSH
     React.createElement(DiagSection, {
       keyPresent,
       isRegistered,
@@ -3744,7 +5314,26 @@ function SettingsPage(props) {
       handleUnregister,
       handleRegister,
       proxyMode: draft?.proxyMode !== false,
-      onToggleProxy: (val) => handleConfigPatch({ proxyMode: val }),
+      onToggleProxy: (value) => staged.stage({ proxyMode: value }),
+      t,
+    }),
+
+    React.createElement(AdvancedSection, {
+      draft,
+      onStage: staged.stage,
+      transport: draft?.transport || status?.config?.transport || 'adapter',
+      t,
+    }),
+
+    React.createElement(SaveBar, {
+      pendingCount: staged.pendingCount,
+      saving: staged.saving,
+      saveState: staged.saveState,
+      saveError: staged.saveError,
+      invalid: staged.invalid,
+      validationError: staged.validationError,
+      onSave: staged.save,
+      onDiscard: staged.discard,
       t,
     })
   )
@@ -3820,6 +5409,24 @@ function apply(ctx) {
     }
   }
 
+  function selectLayoutPanel(id) {
+    try {
+      const layout = typeof ctx.get === 'function' ? ctx.get('layout') : ctx.layout
+      if (!layout || typeof layout.selectPanel !== 'function') return false
+      layout.selectPanel(id)
+      return true
+    } catch (err) {
+      console.warn('[dsh-clinebot] layout.selectPanel failed:', err)
+      return false
+    }
+  }
+
+  const openPanel = () => selectLayoutPanel('clinebot-panel')
+  const closePanel = () => {
+    if (selectLayoutPanel(null)) return
+    selectLayoutPanel('conversation')
+  }
+
   // The plugin's configuration is a section of DSH Settings (`settings.section`),
   // a peer of General/Models/Plugins — not a row in the Plugins list and not a tab
   // inside the Plugins settings section. The shell owns the modal, the section nav
@@ -3856,24 +5463,57 @@ function apply(ctx) {
         id: 'clinebot-quota',
         order: 20,
         locale: NS,
-        inject: () => ({ ctx }),
+        inject: () => ({ ctx, open: openPanel }),
       },
       (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(SidebarQuota, { ...props, ctx: (props && props.ctx) || ctx }))
     )
   )
 
-  // The quota & status read-out is a window opened from the sidebar meter, not a
-  // `main`-slot panel: occupying the centre column meant clicking the meter threw
-  // the conversation out of the way to show a status read-out.
-
-  // `settings.models.provider-card` is deliberately not registered. The seat is
-  // KEYED and dispatched with `entryKey = <provider settingsNs>` on every provider
-  // row, unconditionally: the models page renders it before the row's own
-  // `open ? editor : null`, and its owner props carry no open state. Anything
-  // registered there therefore shows on the collapsed row and reads as an editor
-  // that opened by itself. The row's 编辑 affordance already opens a provider
-  // editor with the same API-key field, and this plugin's configuration lives in
-  // its own Settings section, so the seat is left free.
+  // The quota & usage dashboard opens in the layout's center column, matching
+  // the Command Code / OpenCode provider surfaces. The sidebar card selects it
+  // through `layout.selectPanel`; the panel's Close button selects the
+  // conversation again. When no layout service is available the card falls back
+  // to its local Modal.
+  registerSlotWhenReady('main', () =>
+    ctx.slots.register(
+      {
+        name: 'main',
+        key: 'clinebot-panel',
+        locale: NS,
+        inject: () => ({ ctx, open: openPanel, close: closePanel }),
+      },
+      (props) => React.createElement(
+        ErrorBoundary,
+        { t: props && props.t },
+        React.createElement(DashboardDialog, {
+          ...props,
+          panel: true,
+          ctx: (props && props.ctx) || ctx,
+          onClose: (props && props.close) || closePanel,
+        })
+      )
+    )
+  )
+
+  // Models-page provider card. The seat is keyed by the provider's settings
+  // namespace, which the native adapter registration declares as `dsh-clinebot`
+  // (`settingsNs`). The component returns null for every other provider row, so
+  // it cannot leak onto a sibling's card.
+  registerSlotWhenReady('settings.models.provider-card', () =>
+    ctx.slots.register(
+      {
+        name: 'settings.models.provider-card',
+        key: NS,
+        locale: NS,
+        inject: () => ({ ctx }),
+      },
+      (props) => React.createElement(
+        ErrorBoundary,
+        { t: props && props.t },
+        React.createElement(ProviderCard, { ...props, ctx: (props && props.ctx) || ctx })
+      )
+    )
+  )
 
   // Composer Session Cost Dock (conversation.composer.dock slot)
   registerSlotWhenReady('conversation.composer.dock', () =>