@goodandready/dsh-clinebot 0.5.28 → 0.5.30

package/lib/client.js

@@ -10,9 +10,6 @@ window.__ModuleLoader__.load({
 
 // --- src/client/constants.js ---
 const NS = 'dsh-clinebot'
-// Plugins page row seat (DSH 0.1.6-alpha.2): key = '<package name>#<row id>'.
-const ROW_ID = 'dsh-clinebot'
-const ROW_CONFIG_KEY = '@goodandready/dsh-clinebot#' + ROW_ID
 const ROUTE_PREFIX = '/dsh-clinebot'
 // Stable (frozen) fallback reference: useSyncExternalStore compares snapshots by
 // identity (Object.is), so returning a fresh object literal causes an infinite render loop
@@ -24,6 +21,10 @@ function readConfigForms(ctx) {
   try { return ctx.get('configForms') || undefined } catch { return undefined }
 }
 
+// Returns the namespace's ConfigFormController snapshot — `{ status, value, … }`.
+// `status` is 'loading' | 'ready' | 'unavailable'; `value` is the decoded config
+// object once the namespace is ready. Consumers that only need the status must
+// read `snapshot?.status`, not the snapshot itself.
 function useConfigFormsSnapshot(ctx) {
   const scope = React.useMemo(() => {
     try { return readConfigForms(ctx)?.get?.(NS) || undefined } catch { return undefined }
@@ -34,11 +35,12 @@ function useConfigFormsSnapshot(ctx) {
   const getSnapshot = React.useCallback(() => {
     try { return scope?.getSnapshot?.() || SNAPSHOT_READY } catch { return SNAPSHOT_READY }
   }, [scope])
-  return React.useSyncExternalStore(subscribe, getSnapshot, () => SNAPSHOT_READY)?.status || 'loading'
+  return React.useSyncExternalStore(subscribe, getSnapshot, () => SNAPSHOT_READY) || SNAPSHOT_READY
 }
 
 // --- src/client/locales.js ---
 const en = {
+      nav: 'ClineBot',
       title: 'ClineBot',
       subtitle: 'ClinePass subscription with dynamic plan models.',
       'settings.loading': 'Loading ClineBot settings…',
@@ -53,7 +55,7 @@ const en = {
       'badge.key_missing': 'Key missing',
       'badge.registered': 'DSH Registered ({count} models)',
       'badge.not_registered': 'Not registered',
-      'key.title': '🔑 Authorization & API Key',
+      'key.title': 'Authorization & API Key',
       'key.desc': 'The key is saved directly to DSH Credentials storage (~/.dsh/.credentials.yaml) and never exposed in plaintext configuration files.',
       'key.placeholder_has': '••••••••••••••••••••••••',
       'key.placeholder_empty': 'Paste ClinePass key (cline_...)',
@@ -61,7 +63,7 @@ const en = {
       'key.hide': 'Hide',
       'key.save': 'Save Key',
       'key.saving': 'Saving…',
-      'key.login_fast': '🔑 Open API Keys ↗',
+      '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}',
@@ -69,7 +71,7 @@ const en = {
       'key.get_key': 'Get key in app.cline.bot console ↗',
       'key.saved_msg': 'Key saved to DSH Credentials. Validation: {status}',
       'key.empty_err': 'Please enter an API key before saving',
-      'accounts.title': '👥 Multi-Account Failover Pool',
+      'accounts.title': 'Multi-Account Failover Pool',
       'accounts.desc': 'Add extra accounts. When an account hits 429 rate limits, ClineBot switches to the next available account automatically.',
       'accounts.active_badge': 'Active',
       'accounts.pinned_badge': 'Pinned',
@@ -91,17 +93,17 @@ 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',
-      'quota.title': '📊 ClinePass Quota & Rate Limits',
+      'quota.title': 'ClinePass Quota & Rate Limits',
       'quota.desc': 'Official rolling window request limits from ClinePass',
       'quota.account': 'Account: {email} · Plan: {plan}',
       'quota.refresh': 'Refresh Quotas',
       'quota.refreshing': 'Refreshing…',
       'quota.refreshed_msg': 'Subscription quotas refreshed',
       'quota.window_5h': '⏱ 5-Hour Rolling Limit',
-      'quota.window_weekly': '📅 Weekly Window',
+      'quota.window_weekly': 'Weekly Window',
       'quota.used': '{pct}% used',
       'quota.reset_at': 'Reset: {time}',
-      'quota.window_monthly': '📅 Monthly Window',
+      'quota.window_monthly': 'Monthly Window',
       'quota.countdown': 'Resets in {time}',
       'quota.resetting': 'Resetting…',
       'quota.warning_low': 'Quota is below 10%. Requests may be throttled soon.',
@@ -109,7 +111,7 @@ const en = {
       'quota.warning_5h': 'Low quota warning: {percentUsed}% of 5-hour limit consumed (<10% remaining).',
       'quota.warning_weekly': 'Low weekly quota warning: {percentUsed}% consumed ({remainingPercent}% remaining).',
       'quota.warning_monthly': 'Low monthly quota warning: {percentUsed}% consumed ({remainingPercent}% remaining).',
-      'models.reasoning_tag': '🧠 Reasoning',
+      'models.reasoning_tag': 'Reasoning',
       'models.effort_low': 'Low',
       'models.effort_medium': 'Medium',
       'models.effort_high': 'High',
@@ -133,10 +135,10 @@ const en = {
       'models.show_all': 'Show All',
       'models.clean_stale': 'Clean Stale ({count})',
       'models.models_selected': '{selected} of {total} selected for chat',
-'models.title': '🎯 Model Picker in DSH ({enabled} of {total} active)',
+'models.title': 'Model Picker in DSH ({enabled} of {total} active)',
       'models.desc': 'Catalog synchronizes directly from ClinePass subscription. New plan models are enabled automatically. Uncheck models to hide them from DSH chat picker. Thinking effort is selectable in the composer model menu.',
       'models.reasoning_tooltip': 'Supports thinking effort selection in composer model menu (Off / Low / Medium / High / Max)',
-      'models.sync': '🔄 Check Plan Models',
+      'models.sync': 'Check Plan Models',
       'models.syncing': 'Checking…',
       'models.synced_msg': 'Synchronized subscription models: {total} ({discovered} discovered from ClinePass)',
       'models.verified': 'Verified with plan',
@@ -162,7 +164,7 @@ const en = {
       'models.btn_probe': 'Ping',
       'models.star': 'Star',
       'models.auto_new': 'New',
-      'models.apply_original_all': '⚡ Original Specs',
+      'models.apply_original_all': 'Original Specs',
       'models.reset_contexts_all': '↺ Reset Contexts',
       'models.context_updated_msg': 'Model context limits updated and synchronized to DSH.',
       'models.ctx_default': 'Default ({ctx} / {max})',
@@ -179,7 +181,7 @@ const en = {
       'models.custom_max_label': 'Max Out',
       'models.ctx_tag_original': 'Original',
       'models.ctx_tag_custom': 'Custom',
-      'stats.title': '📈 Current DSH Session Telemetry',
+      'stats.title': 'Current DSH Session Telemetry',
       'stats.desc': 'Local monitoring of requests, network latency, and estimated token usage via ClinePass.',
       'stats.requests': 'Successful / Total Requests',
       'stats.tokens': 'Estimated Session Tokens',
@@ -198,7 +200,7 @@ const en = {
       'stats.reset_btn': 'Reset Stats',
       'stats.confirm_reset': 'Confirm Reset?',
       'stats.cancel_reset': 'Cancel',
-      'diag.title': '⚡ Diagnostics & Auto-Registration',
+      'diag.title': 'Diagnostics & Auto-Registration',
       'diag.desc': 'ClineBot registers into DSH Models automatically when key is configured. You can run connection smoke test or force re-sync.',
       'diag.smoke_btn': 'Run Smoke Test (Ping)',
       'diag.smoke_testing': 'Testing…',
@@ -234,16 +236,20 @@ const en = {
       'dashboard.account_pool': 'Active Routing Account',
       'dashboard.credits': 'Credit Balance',
       'dashboard.updated_at': 'Updated at',
-      'card.title': 'ClineBot Provider',
-      'card.status_connected': 'Connected',
-      'card.status_no_key': 'Key missing',
-      'card.open_settings': 'Settings & Accounts',
-      'card.save_key': 'Save Key',
-      'card.key_saved': 'Key saved',
-      'card.models_active': '{count} active models',
+      'composer.cost_title': 'Estimated Session Cost',
+      'composer.cost_breakdown': 'Token & Cost Breakdown',
+      'composer.prompt_tok': 'Prompt Tokens',
+      'composer.completion_tok': 'Completion Tokens',
+      'composer.reasoning_tok': 'Reasoning Tokens',
+      'composer.est_cost': 'Estimated Cost',
+      'discovery.title': 'Discovered Local Keys',
+      'discovery.import_btn': 'Import from {source}',
+      'discovery.imported': 'Imported to accounts pool',
+      'discovery.scanning': 'Scanning for local Cline keys…',
     }
 
     const zh = {
+      nav: 'ClineBot',
       title: 'ClineBot',
       subtitle: 'ClinePass 订阅服务，包含动态套餐模型。',
       'settings.loading': '正在加载 ClineBot 设置…',
@@ -258,7 +264,7 @@ const en = {
       'badge.key_missing': '未配置密钥',
       'badge.registered': '已接入 DSH ({count} 个模型)',
       'badge.not_registered': '未接入 DSH',
-      'key.title': '🔑 授权与 API 密钥',
+      'key.title': '授权与 API 密钥',
       'key.desc': '密钥直接加密保存在 DSH 凭据管理器 (~/.dsh/.credentials.yaml)，绝不会以明文形式暴露在普通配置文件中。',
       'key.placeholder_has': '••••••••••••••••••••••••',
       'key.placeholder_empty': '粘贴 ClinePass 密钥 (cline_...)',
@@ -266,7 +272,7 @@ const en = {
       'key.hide': '隐藏',
       'key.save': '保存密钥',
       'key.saving': '正在保存…',
-      'key.login_fast': '🔑 打开 API 密钥页 ↗',
+      'key.login_fast': '打开 API 密钥页 ↗',
       'key.verifying': '正在连接 Cline 验证密钥…',
       'key.verified': '✓ 密钥有效：{email} ({plan})',
       'key.invalid': '✗ 密钥验证未通过：{error}',
@@ -274,7 +280,7 @@ const en = {
       'key.get_key': '前往 app.cline.bot 控制台获取密钥 ↗',
       'key.saved_msg': '密钥已成功保存至 DSH 凭据服务。验证状态：{status}',
       'key.empty_err': '保存前请输入 API 密钥',
-      'accounts.title': '👥 多账号故障转移与轮换池 (Failover)',
+      'accounts.title': '多账号故障转移与轮换池 (Failover)',
       'accounts.desc': '添加备用账号。当某个账号触发 429 速率限制或配额耗尽时，ClineBot 会智能无缝切换至剩余额度最高的备用账号。',
       'accounts.active_badge': '当前活动',
       'accounts.pinned_badge': '固定使用',
@@ -296,17 +302,17 @@ const en = {
       'accounts.route_model_placeholder': '模型 ID (例如 cline-pass/deepseek-v4-pro)',
       'accounts.route_account_placeholder': '目标账号',
       'accounts.route_btn_add': '添加路由',
-      'quota.title': '📊 ClinePass 用量配额与限额监控',
+      'quota.title': 'ClinePass 用量配额与限额监控',
       'quota.desc': '来自 ClinePass 官方的实时滚动窗口用量限额',
       'quota.account': '账号：{email} · 套餐：{plan}',
       'quota.refresh': '刷新配额',
       'quota.refreshing': '正在刷新…',
       'quota.refreshed_msg': '订阅用量配额已刷新',
       'quota.window_5h': '⏱ 5 小时滚动限额',
-      'quota.window_weekly': '📅 每周滚动窗口',
+      'quota.window_weekly': '每周滚动窗口',
       'quota.used': '已使用 {pct}%',
       'quota.reset_at': '重置时间：{time}',
-      'quota.window_monthly': '📅 每月滚动窗口',
+      'quota.window_monthly': '每月滚动窗口',
       'quota.countdown': '{time}后重置',
       'quota.resetting': '正在重置',
       'quota.warning_low': '额度低于 10%，请求可能很快会受到限制。',
@@ -314,7 +320,7 @@ const en = {
       'quota.warning_5h': '低额度警告：5 小时限额已消耗 {percentUsed}%（剩余不足 10%）。',
       'quota.warning_weekly': '周限额偏低警告：已消耗 {percentUsed}%（剩余 {remainingPercent}%）。',
       'quota.warning_monthly': '月限额偏低警告：已消耗 {percentUsed}%（剩余 {remainingPercent}%）。',
-      'models.reasoning_tag': '🧠 深度思考',
+      'models.reasoning_tag': '深度思考',
       'models.effort_low': '低',
       'models.effort_medium': '中',
       'models.effort_high': '高',
@@ -338,10 +344,10 @@ const en = {
       'models.show_all': '显示全部',
       'models.clean_stale': '清理过期 ({count})',
       'models.models_selected': '已选择 {selected} / {total} 个模型用于聊天',
-'models.title': '🎯 DSH 模型选择列表（已启用 {enabled}/{total}）',
+'models.title': 'DSH 模型选择列表（已启用 {enabled}/{total}）',
       'models.desc': '模型目录与 ClinePass 官方订阅实时同步。新订阅模型默认自动启用。取消勾选可在 DSH 对话模型列表中隐藏不需要的模型。支持在对话输入框上方切换推理思考强度（Effort）。',
       'models.reasoning_tooltip': '支持在对话框上方模型菜单中选择思考强度（Off / Low / Medium / High / Max）',
-      'models.sync': '🔄 同步订阅模型',
+      'models.sync': '同步订阅模型',
       'models.syncing': '正在同步…',
       'models.synced_msg': '已成功同步订阅模型：共 {total} 个（发现 {discovered} 个新模型）',
       'models.verified': '已与套餐同步',
@@ -367,7 +373,7 @@ const en = {
       'models.btn_probe': '测试延迟',
       'models.star': '推荐',
       'models.auto_new': '新上线',
-      'models.apply_original_all': '⚡ 原厂规格',
+      'models.apply_original_all': '原厂规格',
       'models.reset_contexts_all': '↺ 重置上下文',
       'models.context_updated_msg': '模型上下文限制已更新并同步生效至 DSH。',
       'models.ctx_default': '默认 ({ctx} / {max})',
@@ -384,7 +390,7 @@ const en = {
       'models.custom_max_label': '最大输出',
       'models.ctx_tag_original': '原厂',
       'models.ctx_tag_custom': '自定义',
-      'stats.title': '📈 当前 DSH 会话请求遥测',
+      'stats.title': '当前 DSH 会话请求遥测',
       'stats.desc': '本地实时监控请求次数、网络延迟以及通过 ClinePass 消耗的估算 Token 数量。',
       'stats.requests': '成功 / 总请求次数',
       'stats.tokens': '会话累计 Token 估算',
@@ -403,7 +409,7 @@ const en = {
       'stats.reset_btn': '重置统计',
       'stats.confirm_reset': '确认重置？',
       'stats.cancel_reset': '取消',
-      'diag.title': '⚡ 诊断工具与服务接入',
+      'diag.title': '诊断工具与服务接入',
       'diag.desc': '配置 API 密钥后，ClineBot 会自动向 DSH 注册模型服务。您可以在此进行连通性测试或强制重新同步。',
       'diag.smoke_btn': '执行连通性冒烟测试 (Ping)',
       'diag.smoke_testing': '正在测试…',
@@ -439,13 +445,16 @@ const en = {
       'dashboard.account_pool': '当前承载账户',
       'dashboard.credits': '点数余额',
       'dashboard.updated_at': '更新于',
-      'card.title': 'ClineBot 模型服务',
-      'card.status_connected': '已连接',
-      'card.status_no_key': '未配置密钥',
-      'card.open_settings': '完整设置与多账户',
-      'card.save_key': '保存密钥',
-      'card.key_saved': '密钥已保存',
-      'card.models_active': '{count} 个可用模型',
+      'composer.cost_title': '预估会话成本',
+      'composer.cost_breakdown': 'Token 与费用明细',
+      'composer.prompt_tok': '提示词 Token',
+      'composer.completion_tok': '补全 Token',
+      'composer.reasoning_tok': '思考推理 Token',
+      'composer.est_cost': '预估花费',
+      'discovery.title': '发现本地密钥',
+      'discovery.import_btn': '从 {source} 导入',
+      'discovery.imported': '已成功导入账户池',
+      'discovery.scanning': '正在扫描本地 Cline 密钥…',
     }
 
     function makeT(dict, fallback) {
@@ -463,28 +472,50 @@ const en = {
       }
     }
 
-// --- src/client/chevron.js ---
-function FallbackChevron() {
-  return React.createElement(
-    'svg',
-    { width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', 'aria-hidden': true },
-    React.createElement('path', {
-      d: 'M3.5 5.25L7 8.75L10.5 5.25',
-      stroke: 'currentColor',
-      strokeWidth: 1.5,
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-    })
-  )
-}
-let ChevronIcon = null
+// --- src/client/primitives.js ---
+// The shell's module table provides the design-system primitives, so the plugin
+// renders the same controls (and inherits the same hover/focus/disabled treatment)
+// as the native settings surfaces instead of re-drawing them. Every lookup is
+// defensive: a missing primitive degrades to the plugin's own styled fallback
+// rather than failing the render.
+let primitives = null
 try {
-  const primitives = require('@deepseek-ai/dsh-client-ui-primitives')
-  ChevronIcon = primitives && (primitives.IconChevronDownOutline14 || primitives.IconChevronDownOutline)
+  primitives = require('@deepseek-ai/dsh-client-ui-primitives') || null
 } catch (_) {
-  ChevronIcon = null
+  primitives = null
+}
+
+/** Native toggle for boolean preferences; falls back to a checkbox. */
+const Switch = (primitives && primitives.Switch) || null
+
+/** Native dialog window; the plugin draws a plainer one when it is absent. */
+const Modal = (primitives && primitives.Modal) || null
+
+/**
+ * Boolean preference control: the native Switch when the shell provides it, the
+ * plugin's own checkbox otherwise. Both take the same `checked`/`disabled`/`onChange`.
+ * @param props - checked state, change handler, accessible label and disabled flag.
+ * @returns the control element.
+ */
+function BooleanControl(props) {
+  const { checked, disabled, label, onChange } = props
+  if (Switch) {
+    return React.createElement(Switch, {
+      checked: !!checked,
+      disabled: !!disabled,
+      label,
+      onChange: (next) => { if (typeof onChange === 'function') onChange(next) },
+    })
+  }
+  return React.createElement('input', {
+    type: 'checkbox',
+    style: { cursor: disabled ? 'not-allowed' : 'pointer', width: '16px', height: '16px', flex: 'none' },
+    checked: !!checked,
+    disabled: !!disabled,
+    'aria-label': label,
+    onChange: (e) => { if (typeof onChange === 'function') onChange(e.target.checked) },
+  })
 }
-const Chevron = ChevronIcon || FallbackChevron
 
 // --- src/client/styles.js ---
 function ensureCss() {
@@ -494,88 +525,97 @@ function ensureCss() {
       style.id = 'dsh-clinebot-full-css'
       style.dataset.dshPlugin = NS
       style.textContent = `
-.cb-page{display:flex;flex-direction:column;gap:20px;padding:8px 0 32px;max-width:960px}
-.cb-chevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .16s ease;color:var(--dsw-alias-label-tertiary)}
-.cb-chevron-open{transform:rotate(180deg)}
-.cb-header{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--dsw-alias-border-l2)}
-.cb-page-title{font-size:22px;font-weight:700;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:10px}
-.cb-page-sub{font-size:14px;color:var(--dsw-alias-label-secondary);line-height:1.5}
-
-.cb-section-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
-.cb-section-title{font-size:16px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:space-between}
-.cb-section-desc{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:-6px;line-height:1.4}
-
-.cb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
-.cb-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:14px}
-
-.cb-badge{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:5px;font-weight:500}
-.cb-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent)}
-.cb-badge-warn{border-color:var(--dsw-alias-state-warn-primary);color:var(--dsw-alias-state-warn-primary);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 8%, transparent)}
-.cb-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent)}
-
-.cb-input{height:36px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;width:100%;box-sizing:border-box}
+.cb-page{display:flex;flex-direction:column;gap:16px;width:100%}
+.cb-header{display:flex;flex-direction:column;gap:4px;padding:2px 0 4px}
+.cb-page-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--dsw-alias-label-primary);font-size:16px;font-weight:600;line-height:24px}
+.cb-page-sub{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+
+.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-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}
+
+.cb-badge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:1px 6px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-xs);color:var(--dsw-alias-label-secondary);font-size:11px;line-height:16px;font-weight:400}
+.cb-badge-ok{color:var(--dsw-alias-state-success-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-success-primary) 45%, transparent)}
+.cb-badge-warn{color:var(--dsw-alias-state-warn-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 45%, transparent)}
+.cb-badge-bad{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent)}
+
+.cb-input{box-sizing:border-box;width:100%;height:36px;padding:0 12px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px}
+.cb-input::placeholder{color:var(--dsw-alias-label-tertiary)}
 .cb-input:focus{outline:none;border-color:var(--dsw-alias-brand-primary)}
-.cb-input-group{display:flex;gap:8px;align-items:center}
-
-.cb-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:7px 14px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}
-.cb-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}
-.cb-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
-.cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary) !important;color:var(--dsw-alias-bg-layer-3) !important;opacity:0.88;visibility:visible !important}
-.cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent)}
-.cb-btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent) !important;border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 50%, transparent)}
-.cb-btn-disabled{opacity:0.5;cursor:not-allowed}
-
-.cb-progress-card, .cb-bar-container{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2)}
-.cb-progress-head, .cb-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary);width:100%}
+.cb-input-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.cb-input-group > .cb-input{flex:1 1 240px;min-width:0}
+.cb-input-group > .cb-btn{flex:none}
+
+.cb-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:36px;padding:0 14px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;white-space:nowrap;cursor:pointer}
+.cb-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.cb-btn:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}
+.cb-btn:disabled{opacity:.5;cursor:not-allowed}
+.cb-btn-primary{border-color:transparent;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-2)}
+.cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary);opacity:.88}
+.cb-btn-danger{color:var(--dsw-alias-state-error-primary)}
+.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{font-size:12px;color:var(--dsw-alias-label-secondary);white-space:nowrap;margin-left:auto}
-.cb-progress-track, .cb-bar-track{width:100%;height:8px;border-radius:999px;background:var(--dsw-alias-bg-layer-1);overflow:hidden;border:1px solid var(--dsw-alias-border-l2)}
-.cb-progress-bar-fill, .cb-bar-fill{height:100%;border-radius:999px;transition:width .3s;background:var(--dsw-alias-brand-primary, var(--dsw-alias-state-success-primary))}
-.cb-progress-bar-warn{height:100%;border-radius:999px;transition:width .3s;background:var(--dsw-alias-state-warn-primary)}
-.cb-progress-bar-bad{height:100%;border-radius:999px;transition:width .3s;background:var(--dsw-alias-state-error-primary)}
-
-.cb-table{width:100%;border-collapse:collapse;margin-top:8px}
-.cb-table th{text-align:left;font-size:12px;color:var(--dsw-alias-label-secondary);padding:8px 10px;border-bottom:1px solid var(--dsw-alias-border-l2);font-weight:600}
-.cb-table td{padding:10px;border-bottom:1px solid var(--dsw-alias-border-l2);font-size:13px;color:var(--dsw-alias-label-primary)}
-.cb-table tr:hover{background:var(--dsw-alias-bg-layer-2)}
-
-.cb-alert-ok{padding:10px 14px;border-radius:8px;background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);color:var(--dsw-alias-state-success-primary);font-size:13px}
-.cb-alert-bad{padding:10px 14px;border-radius:8px;background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:13px}
-.cb-alert-err{padding:10px 14px;border-radius:8px;background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:13px}
-.cb-banner-warning{padding:12px 16px;border-radius:8px;background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);border:1px solid var(--dsw-alias-state-warn-primary);color:var(--dsw-alias-state-warn-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:500}
-.cb-banner-exhausted{padding:12px 16px;border-radius:8px;background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);border:1px solid var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:600}
-.cb-stat-box{padding:12px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;gap:4px}
-.cb-stat-val{font-size:18px;font-weight:700;color:var(--dsw-alias-label-primary)}
-.cb-stat-lbl{font-size:12px;color:var(--dsw-alias-label-secondary)}
-.cb-preview{padding:12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);font-family:monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--dsw-alias-border-l2)}
-
-[class*="_footArea"] [class*="_footerActions"]{flex-direction:column}
-.cb-foot{box-sizing:border-box;flex:0 0 auto;width:100%;min-width:0;font:inherit;color:var(--dsw-alias-label-secondary);text-align:left;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:10px;flex-direction:column;gap:6px;margin:0 0 4px;padding:8px;display:flex}
-.cb-foot:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l2)}
-.cb-foot:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
-.cb-footTop{align-items:center;gap:8px;min-width:0;display:flex}
-.cb-footName{white-space:nowrap;text-overflow:ellipsis;color:var(--dsw-alias-label-primary);min-width:0;overflow:hidden;font-size:13px;font-weight:500;line-height:20px}
-.cb-footRow{flex-direction:column;gap:4px;min-width:0;display:flex}
-.cb-footHead{align-items:baseline;gap:8px;min-width:0;display:flex}
+.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-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}
+.cb-progress-bar-bad{height:100%;border-radius:var(--dsw-radius-xs);background:var(--dsw-alias-state-error-primary);transition:width .3s ease}
+
+.cb-table{width:100%;border-collapse:collapse;margin-top:4px}
+.cb-table th{padding:8px 10px;border-bottom:.5px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);text-align:left;font-size:12px;font-weight:500;line-height:18px}
+.cb-table td{padding:10px;border-bottom:.5px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);font-size:14px;line-height:20px}
+.cb-table tr:hover{background:var(--dsw-alias-interactive-bg-hover)}
+
+.cb-alert{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--dsw-radius-md);font-size:12px;line-height:18px}
+.cb-alert-ok{padding:10px 12px;border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);color:var(--dsw-alias-state-success-primary);font-size:12px;line-height:18px}
+.cb-alert-bad{padding:10px 12px;border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cb-alert-err{padding:10px 12px;border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cb-banner-warning{display:flex;align-items:center;gap:8px;padding:10px 12px;border:.5px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary) 45%, transparent);border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 10%, transparent);color:var(--dsw-alias-state-warn-primary);font-size:12px;font-weight:500;line-height:18px}
+.cb-banner-exhausted{display:flex;align-items:center;gap:8px;padding:10px 12px;border:.5px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:12px;font-weight:600;line-height:18px}
+.cb-stat-box{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-1)}
+.cb-stat-val{color:var(--dsw-alias-label-primary);font-size:16px;font-weight:600;line-height:24px}
+.cb-stat-lbl{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cb-preview{padding:10px 12px;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);font-family:var(--ds-font-family-code,monospace);font-size:12px;line-height:18px;white-space:pre-wrap;word-break:break-all}
+
+/* The shell lays the footer action list out as a row, which a full-width meter
+   cannot share: with another plugin's entry beside it the plan name truncates and
+   the window label wraps. Stack the list while this meter is in it. The :has()
+   scoping keeps the rule off any footer that does not contain this plugin, so it
+   cannot reach across other registrants the way a plain descendant selector would. */
+[class*="_footerActions"]:has(.cb-foot), [class*="_footerActions"]:has(.cb-railButton){flex-direction:column}
+.cb-foot{box-sizing:border-box;flex:1 1 auto;width:100%;min-width:0;display:flex;flex-direction:column;gap:6px;margin:0 0 4px;padding:8px;border:.5px solid transparent;border-radius:var(--dsw-radius-md);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;text-align:left;cursor:pointer}
+.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-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-footBar{display:block;background:var(--dsw-alias-bg-layer-2);border-radius:999px;height:5px;overflow:hidden}
-.cb-footFill{display:block;background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:width .3s ease}
+.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-railButton{box-sizing:border-box;width:36px;height:36px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:8px;flex:none;justify-content:center;align-items:center;margin:0 0 4px;padding:0;display:inline-flex}
+.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:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
-.cb-glyph{flex:none;justify-content:center;align-items:center;display:inline-flex;color:var(--dsw-alias-brand-primary)}
+.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}
+.cb-glyph{flex:none;display:inline-flex;justify-content:center;align-items:center;color:var(--dsw-alias-brand-primary)}
 
-.cb-mainOverlay{background:var(--dsw-alias-bg-layer-1);width:100%;height:100%;overflow:auto;display:block}
-.cb-mainInner{max-width:760px;margin:0 auto;padding:24px 20px 40px;flex-direction:column;gap:14px;display:flex;color:var(--dsw-alias-label-primary)}
-.cb-mainHeader{align-items:center;gap:10px;display:flex;flex-wrap:wrap;border-bottom:1px solid var(--dsw-alias-border-l2);padding-bottom:14px}
-.cb-mainTitle{margin:0;font-size:18px;font-weight:600;line-height:1.4}
-.cb-mainSub{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}
-.cb-mainCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
+/* 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-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)}
 
-.cb-providerCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;margin:8px 0}
 `
       document.head.appendChild(style)
     }
@@ -950,6 +990,40 @@ function AccountsSection({
   const [deleteSecret, setDeleteSecret] = React.useState(true)
   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((data) => {
+        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,
+        apiKey: item.key,
+      })
+      setDiscoveredKeys((prev) => prev.filter((k) => k.key !== item.key))
+    }
+  }
 
   function handleOpenAdd() {
     let max = 1
@@ -1011,6 +1085,31 @@ function AccountsSection({
         : 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) =>
+            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 })
+              )
+            )
+          )
+        )
+      : null,
     React.createElement(
       'div',
       {
@@ -1454,18 +1553,17 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, sho
           ),
           React.createElement(
             'div',
-            { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '4px', paddingTop: '10px', borderTop: '1px solid var(--dsw-alias-border-l2)' } },
+            { 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' } },
-              React.createElement('span', { style: { fontSize: '13px', fontWeight: 500, color: 'var(--dsw-alias-label-primary)' } }, t('sidebar.show_quota')),
-              React.createElement('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)' } }, t('sidebar.show_quota_hint'))
+              { 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('input', {
-              type: 'checkbox',
-              style: { cursor: 'pointer', width: '16px', height: '16px' },
+            React.createElement(BooleanControl, {
               checked: showSidebarQuota !== false,
-              onChange: (e) => onToggleSidebarQuota && onToggleSidebarQuota(e.target.checked),
+              label: t('sidebar.show_quota'),
+              onChange: (next) => onToggleSidebarQuota && onToggleSidebarQuota(next),
             })
           )
         )
@@ -1735,17 +1833,21 @@ function VisibleModelsSub({
     },
     React.createElement(
       'div',
-      { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '8px' } },
+      { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' } },
       React.createElement(
-        'label',
-        { style: { display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '13px', fontWeight: '500' } },
-        React.createElement('input', {
-          type: 'checkbox',
+        'div',
+        { style: { display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0 } },
+        React.createElement(
+          'span',
+          { style: { fontSize: '14px', lineHeight: '20px', color: 'var(--dsw-alias-label-primary)' } },
+          t('models.filter_by_plan')
+        ),
+        React.createElement(BooleanControl, {
           checked: !!filterModelsByPlan,
           disabled: !!busy,
-          onChange: (e) => onConfigUpdate && onConfigUpdate({ filterModelsByPlan: e.target.checked }),
-        }),
-        React.createElement('span', null, t('models.filter_by_plan'))
+          label: t('models.filter_by_plan'),
+          onChange: (next) => onConfigUpdate && onConfigUpdate({ filterModelsByPlan: next }),
+        })
       ),
       React.createElement(
         'div',
@@ -2589,25 +2691,25 @@ function DiagSection({
         )
       ),
       React.createElement(
-        'label',
-        { style: { display: 'inline-flex', alignItems: 'center', gap: '8px', cursor: 'pointer', whiteSpace: 'nowrap' } },
-        React.createElement('input', {
-          type: 'checkbox',
-          checked: !!proxyMode,
-          disabled: !!busy,
-          onChange: (e) => onToggleProxy && onToggleProxy(e.target.checked),
-        }),
+        'div',
+        { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px' } },
         React.createElement(
           'span',
           {
             style: {
-              fontSize: '13px',
-              fontWeight: 500,
+              fontSize: '14px',
+              lineHeight: '20px',
               color: proxyMode ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-secondary)',
             },
           },
           proxyMode ? t('diag.proxy_enabled') : t('diag.proxy_disabled')
-        )
+        ),
+        React.createElement(BooleanControl, {
+          checked: !!proxyMode,
+          disabled: !!busy,
+          label: t('diag.proxy_title'),
+          onChange: (next) => onToggleProxy && onToggleProxy(next),
+        })
       )
     ),
     React.createElement(
@@ -2700,10 +2802,14 @@ function MiniRing({ percent, size = 18, warn = false }) {
   )
 }
 
-function SidebarQuota({ ctx, wide, open, t: propT }) {
+function SidebarQuota({ ctx, wide, t: propT }) {
   const t = propT || makeT(en, en)
   const [data, setData] = React.useState(null)
-  const [visible, setVisible] = React.useState(true)
+  const [open, setOpen] = React.useState(false)
+
+  // Check the configForms snapshot for the showSidebarQuota toggle
+  const configSnapshot = useConfigFormsSnapshot(ctx)
+  const show = configSnapshot?.value?.showSidebarQuota !== false
 
   const loadQuota = React.useCallback(async () => {
     try {
@@ -2716,7 +2822,9 @@ function SidebarQuota({ ctx, wide, open, t: propT }) {
     }
   }, [])
 
+  // Poll only while the meter is on screen — a hidden meter has nothing to refresh.
   React.useEffect(() => {
+    if (!show) return undefined
     let timer = null
     const scheduleNext = () => {
       timer = setTimeout(async () => {
@@ -2727,12 +2835,9 @@ function SidebarQuota({ ctx, wide, open, t: propT }) {
     loadQuota()
     scheduleNext()
     return () => { if (timer) clearTimeout(timer) }
-  }, [loadQuota])
+  }, [loadQuota, show])
 
-  // Check configForms snapshot for showSidebarQuota toggle
-  const config = useConfigFormsSnapshot(ctx)
-  const show = config?.showSidebarQuota !== false
-  if (!show || !visible) return null
+  if (!show) return null
 
   const fiveHour = data?.windows?.fiveHour
   const weekly = data?.windows?.weekly
@@ -2741,85 +2846,101 @@ function SidebarQuota({ ctx, wide, open, t: propT }) {
   const isWarn = pct >= 85
   const planName = data?.plan || t('title')
 
-  const handleOpen = () => {
-    if (typeof open === 'function') {
-      open()
-    } else {
-      ctx?.get?.('layout')?.selectPanel?.('clinebot-dashboard')
-    }
-  }
+  // 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 tooltip = `${t('sidebar.quota_title')}: ${pct}% ${t('dashboard.used')} (${planName})`
+  const dialog = React.createElement(DashboardDialog, { t, open, onClose: () => setOpen(false) })
 
   if (!wide) {
     return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          className: 'cb-railButton',
+          'aria-label': tooltip,
+          'aria-expanded': open,
+          title: tooltip,
+          onClick: handleOpen,
+        },
+        React.createElement(MiniRing, { percent: pct, warn: isWarn, size: 20 })
+      ),
+      dialog
+    )
+  }
+
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
       'button',
       {
         type: 'button',
-        className: 'cb-railButton',
+        className: 'cb-foot',
         'aria-label': tooltip,
+        'aria-expanded': open,
         title: tooltip,
         onClick: handleOpen,
       },
-      React.createElement(MiniRing, { percent: pct, warn: isWarn, size: 20 })
-    )
-  }
-
-  return React.createElement(
-    'button',
-    {
-      type: 'button',
-      className: 'cb-foot',
-      'aria-label': tooltip,
-      title: tooltip,
-      onClick: handleOpen,
-    },
-    React.createElement(
-      'div',
-      { 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(
-      'div',
-      { className: 'cb-footRow' },
       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')}`)
+        { 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: 'cb-footBar' },
-        React.createElement('span', {
-          className: isWarn ? 'cb-footFill cb-footFillWarn' : 'cb-footFill',
-          style: { width: `${Math.min(100, Math.max(2, pct))}%` },
-        })
+        'div',
+        { className: 'cb-footRow' },
+        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(
+          'span',
+          { className: 'cb-footBar' },
+          React.createElement('span', {
+            className: isWarn ? 'cb-footFill cb-footFillWarn' : 'cb-footFill',
+            style: { width: `${Math.min(100, Math.max(2, pct))}%` },
+          })
+        )
       )
-    )
+    ),
+    dialog
   )
 }
 
-// --- src/client/components/dashboard-overlay.js ---
-function DashboardOverlay(props) {
-  const ctx = props?.ctx
+// --- 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.
+ */
+function DashboardDialog(props) {
   const t = props?.t || makeT(en, en)
+  const open = props?.open !== false
+  const onClose = typeof props?.onClose === 'function' ? props.onClose : () => {}
+
   const [data, setData] = React.useState(null)
   const [status, setStatus] = React.useState(null)
   const [loading, setLoading] = React.useState(false)
   const [updatedAt, setUpdatedAt] = React.useState('')
   const [err, setErr] = React.useState('')
 
-  const handleClose = () => {
-    if (typeof props?.close === 'function') {
-      props.close()
-    } else {
-      ctx?.get?.('layout')?.selectPanel?.(null)
-    }
-  }
-
   const loadData = React.useCallback(async () => {
     setLoading(true)
     setErr('')
@@ -2841,299 +2962,294 @@ function DashboardOverlay(props) {
   }, [])
 
   React.useEffect(() => {
-    loadData()
-  }, [loadData])
+    if (open) loadData()
+  }, [open, loadData])
+
+  if (!open) return null
 
   const plan = data?.plan || status?.config?.defaultModel || 'ClinePass'
   const email = data?.user?.email || ''
   const activeAcc = status?.config?.activeAccount || 'Auto (Least-used)'
   const enabledCount = status?.config?.enabledModels?.length || 0
+  const routingMode = status?.config?.accountMode === 'round_robin' ? t('accounts.mode_round_robin') : t('accounts.mode_least_used')
 
-  return React.createElement(
+  const body = React.createElement(
     'div',
-    { className: 'cb-mainOverlay', role: 'region', 'aria-label': t('dashboard.title') },
+    { className: 'cb-dialog' },
     React.createElement(
       'div',
-      { className: 'cb-mainInner' },
-      // Header
+      { className: 'cb-dialogMeta' },
+      updatedAt ? React.createElement('span', null, `${t('dashboard.updated_at')} ${updatedAt}`) : null,
+      React.createElement('span', { style: { flex: 1 } }),
       React.createElement(
-        'header',
-        { className: 'cb-mainHeader' },
-        React.createElement(
-          'div',
-          { style: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 } },
-          React.createElement('h2', { className: 'cb-mainTitle' }, t('dashboard.title')),
-          React.createElement('p', { className: 'cb-mainSub' }, t('dashboard.subtitle'))
-        ),
-        React.createElement('span', { style: { flex: 1 } }),
-        updatedAt
-          ? React.createElement(
-              'span',
-              { style: { fontSize: '12px', color: 'var(--dsw-alias-label-tertiary)', fontVariantNumeric: 'tabular-nums' } },
-              `${t('dashboard.updated_at')} ${updatedAt}`
-            )
-          : null,
-        React.createElement(
-          'button',
-          {
-            type: 'button',
-            className: 'cb-btn',
-            disabled: loading,
-            onClick: loadData,
-          },
-          loading ? t('dashboard.refreshing') : t('dashboard.refresh')
-        ),
-        React.createElement(
-          'button',
-          {
-            type: 'button',
-            className: 'cb-btn',
-            style: { minWidth: '32px', padding: '0 8px', fontSize: '16px' },
-            'aria-label': t('dashboard.close'),
-            title: t('dashboard.close'),
-            onClick: handleClose,
-          },
-          '✕'
-        )
-      ),
+        '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,
+    err ? React.createElement('div', { className: 'cb-alert-bad' }, err) : null,
 
-      // Card 1: Account & Plan Status
+    // Account and plan
+    React.createElement(
+      'div',
+      { className: 'cb-dialogCard' },
       React.createElement(
         'div',
-        { className: 'cb-mainCard' },
+        { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px', flexWrap: 'wrap' } },
         React.createElement(
           'div',
-          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-          React.createElement(
-            'div',
-            { style: { display: 'flex', alignItems: 'center', gap: '10px' } },
-            React.createElement('span', { style: { fontSize: '20px' } }, '💳'),
-            React.createElement(
-              'div',
-              null,
-              React.createElement('div', { style: { fontSize: '15px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } }, plan),
-              email ? React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } }, email) : null
-            )
-          ),
-          React.createElement(
-            'span',
-            { className: 'cb-badge cb-badge-ok' },
-            t('badge.registered', { count: enabledCount })
-          )
+          { 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(
-          'div',
-          { className: 'cb-grid-2', style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px', marginTop: '6px' } },
-          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)
-          ),
-          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' } }, status?.config?.accountMode === 'round_robin' ? t('accounts.mode_round_robin') : t('accounts.mode_least_used'))
-          )
-        )
+        React.createElement('span', { className: 'cb-badge cb-badge-ok' }, t('badge.registered', { count: enabledCount }))
       ),
-
-      // Card 2: Quota Windows
       React.createElement(
         'div',
-        { className: 'cb-mainCard' },
+        { className: 'cb-grid-2', style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' } },
         React.createElement(
           'div',
-          { style: { fontSize: '15px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } },
-          t('quota.title')
+          { 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)
         ),
         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
+          { 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)
         )
       )
+    ),
+
+    // Quota windows
+    React.createElement(
+      'div',
+      { className: 'cb-dialogCard' },
+      React.createElement('div', { className: 'cb-section-title' }, t('quota.title')),
+      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
+      )
+    )
+  )
+
+  if (Modal) {
+    return React.createElement(Modal, {
+      open: true,
+      onClose,
+      title: t('dashboard.title'),
+      description: t('dashboard.subtitle'),
+      closeLabel: t('dashboard.close'),
+      children: body,
+    })
+  }
+
+  // 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() },
+      React.createElement(
+        'div',
+        { className: 'cb-dialogMeta' },
+        React.createElement('span', { className: 'cb-row-title' }, t('dashboard.title')),
+        React.createElement('span', { style: { flex: 1 } }),
+        React.createElement(
+          'button',
+          { type: 'button', className: 'cb-btn', 'aria-label': t('dashboard.close'), onClick: onClose },
+          t('dashboard.close')
+        )
+      ),
+      body
     )
   )
 }
 
-// --- src/client/components/models-provider-card.js ---
-function ModelsProviderCard(props) {
-  const ctx = props?.ctx
-  const t = props?.t || makeT(en, en)
-  const [status, setStatus] = React.useState(null)
-  const [apiKey, setApiKey] = React.useState('')
-  const [showKey, setShowKey] = React.useState(false)
-  const [saving, setSaving] = React.useState(false)
-  const [msg, setMsg] = React.useState('')
-  const [err, setErr] = React.useState('')
+// --- src/client/components/composer-cost.js ---
+function formatTokens(count) {
+  const n = Number(count) || 0
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M'
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k'
+  return String(n)
+}
 
-  const loadStatus = React.useCallback(async () => {
-    try {
-      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/status`, { cache: 'no-store' })
-      if (!res.ok) return
-      const json = await res.json().catch(() => null)
-      if (json && json.ok) setStatus(json)
-    } catch {
-      // quiet on network fail
-    }
-  }, [])
+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
 
-  React.useEffect(() => {
-    loadStatus()
-  }, [loadStatus])
+  const pTok = Number(tokens?.promptTokens || tokens?.inputTokens || 0)
+  const cTok = Number(tokens?.completionTokens || tokens?.outputTokens || 0)
+  const rTok = Number(tokens?.reasoningTokens || 0)
 
-  const keyConfigured = Boolean(status?.keyPresent || status?.config?.hasKey)
-  const modelsCount = status?.config?.enabledModels?.length || status?.availableModels?.length || 0
+  const cost = (pTok * promptRate + cTok * completionRate + rTok * reasoningRate) / 1000000
+  return { cost, pTok, cTok, rTok, total: pTok + cTok + rTok }
+}
 
-  const handleSaveKey = async () => {
-    const keyVal = String(apiKey || '').trim()
-    if (!keyVal) {
-      setErr(t('key.empty_err'))
-      return
-    }
-    setSaving(true)
-    setErr('')
-    setMsg('')
-    try {
-      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/save-key`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ apiKey: keyVal, apiKeyEnv: status?.config?.apiKeyEnv }),
-      })
-      const data = await res.json().catch(() => ({}))
-      if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`)
-      setApiKey('')
-      setMsg(t('card.key_saved'))
-      await loadStatus()
-    } catch (e) {
-      setErr(String(e?.message || e))
-    } finally {
-      setSaving(false)
+function ComposerCostDock(props) {
+  const t = props?.t || makeT(en, en)
+  const [stats, setStats] = React.useState(null)
+  const [showPopover, setShowPopover] = React.useState(false)
+
+  // 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(() => {
+    if (projectedTokens) return
+    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)
+        }
+      } catch {
+        // quiet
+      }
     }
+    loadStats()
+    const timer = setTimeout(loadStats, 30000)
+    return () => { active = false; clearTimeout(timer) }
+  }, [projectedTokens])
+
+  const tokens = projectedTokens || {
+    promptTokens: stats?.promptTokens || 0,
+    completionTokens: stats?.completionTokens || 0,
+    reasoningTokens: stats?.reasoningTokens || 0,
   }
 
-  const handleOpenSettings = () => {
-    const layout = ctx?.get?.('layout')
-    if (typeof layout?.selectPanel === 'function') {
-      layout.selectPanel('clinebot-dashboard')
-    } else if (typeof props?.openSettings === 'function') {
-      props.openSettings()
-    }
+  const modelId = projectedModel?.id || ''
+  const { cost, pTok, cTok, rTok, total } = calculateCost(tokens, modelId)
+
+  if (total === 0 && !stats) {
+    return null
   }
 
+  const costDisplay = cost < 0.001 && cost > 0 ? '< $0.001' : `$${cost.toFixed(3)}`
+
   return React.createElement(
     'div',
-    { className: 'cb-providerCard', 'data-clinebot-provider-card': 'true' },
-    // Header
+    {
+      className: 'cb-composer-cost-dock',
+      'data-composer-session-cost': 'true',
+      style: { position: 'relative', display: 'inline-flex', alignItems: 'center' },
+    },
     React.createElement(
-      'div',
-      { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-      React.createElement(
-        'div',
-        { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-        React.createElement('span', { style: { fontSize: '18px' } }, '🤖'),
-        React.createElement('span', { style: { fontSize: '15px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } }, t('card.title'))
-      ),
-      React.createElement(
-        'div',
-        { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
-        React.createElement(
-          'span',
-          { className: keyConfigured ? 'cb-badge cb-badge-ok' : 'cb-badge cb-badge-warn' },
-          keyConfigured ? `✓ ${t('card.status_connected')}` : `⚠️ ${t('card.status_no_key')}`
-        ),
-        modelsCount > 0
-          ? React.createElement(
-              'span',
-              { className: 'cb-badge cb-badge-ok' },
-              t('card.models_active', { count: modelsCount })
-            )
-          : null
-      )
+      '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`)
     ),
-
-    // Quick Key Input Form
-    React.createElement(
-      'div',
-      { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
-      React.createElement(
-        'div',
-        { className: 'cb-input-group' },
-        React.createElement('input', {
-          type: showKey ? 'text' : 'password',
-          className: 'cb-input',
-          style: { flex: 1 },
-          value: apiKey,
-          placeholder: keyConfigured ? t('key.placeholder_has') : t('key.placeholder_empty'),
-          onChange: (e) => setApiKey(e.target.value),
-          onKeyDown: (e) => { if (e.key === 'Enter') handleSaveKey() },
-        }),
-        React.createElement(
-          'button',
-          {
-            type: 'button',
-            className: 'cb-btn',
-            onClick: () => setShowKey(!showKey),
-          },
-          showKey ? t('key.hide') : t('key.show')
-        ),
-        React.createElement(
-          'button',
+    showPopover
+      ? React.createElement(
+          'div',
           {
-            type: 'button',
-            className: 'cb-btn cb-btn-primary',
-            disabled: saving || !apiKey.trim(),
-            onClick: handleSaveKey,
+            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: '0 4px 12px rgba(0,0,0,0.15)',
+              zIndex: 100,
+              fontSize: '12px',
+              color: 'var(--dsw-alias-label-primary)',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '6px',
+            },
           },
-          saving ? t('key.saving') : t('card.save_key')
+          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}`)
+          )
         )
-      ),
-      msg ? React.createElement('div', { className: 'cb-alert-ok' }, msg) : null,
-      err ? React.createElement('div', { className: 'cb-alert-bad' }, err) : null
-    ),
-
-    // Footer with navigation to full settings
-    React.createElement(
-      'div',
-      { style: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center', borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: '10px' } },
-      React.createElement(
-        'button',
-        {
-          type: 'button',
-          className: 'cb-btn',
-          onClick: handleOpenSettings,
-        },
-        `⚙️ ${t('card.open_settings')}`
-      )
-    )
+      : null
   )
 }
 
@@ -3141,7 +3257,7 @@ function ModelsProviderCard(props) {
 function SettingsPage(props) {
   const ctx = props?.ctx
   const t = props?.t || makeT(en, en)
-  const snapshotStatus = useConfigFormsSnapshot(ctx)
+  const configSnapshot = useConfigFormsSnapshot(ctx)
 
   const [status, setStatus] = React.useState(null)
   const [draft, setDraft] = React.useState(null)
@@ -3526,7 +3642,7 @@ function SettingsPage(props) {
       React.createElement(
         'div',
         { className: 'cb-page-title' },
-        `🤖 ${t('header.title')}`,
+        t('header.title'),
         React.createElement(
           'span',
           { className: `cb-badge ${healthOk ? 'cb-badge-ok' : 'cb-badge-bad'}` },
@@ -3550,7 +3666,7 @@ function SettingsPage(props) {
     React.createElement(UpdateBanner, { updateState, handleTriggerUpdate, handleCheckUpdate: checkUpdate, t }),
 
     // Settings host status warning
-    snapshotStatus === 'unavailable'
+    configSnapshot?.status === 'unavailable'
       ? React.createElement('div', { className: 'cb-alert-bad', style: { marginBottom: '12px' } }, t('settings.unavailable'))
       : null,
 
@@ -3632,65 +3748,6 @@ function SettingsPage(props) {
   )
 }
 
-// --- src/client/plugin-card.js ---
-function PluginCard(props) {
-  const page = !!(props && props.view === 'page')
-  const [open, setOpen] = React.useState(!!page)
-  const t = props?.t || makeT(en, en)
-  React.useEffect(() => {
-    ensureCss()
-  }, [])
-
-  // Row seat (plugins.row.config): the host page draws title/icon/crumb and the
-  // padding, so the summary is a one-liner and the page drops our card chrome.
-  if (props && props.view === 'summary') {
-    return React.createElement('span', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
-  }
-
-  return React.createElement(
-    page ? 'div' : 'li',
-    { className: page ? 'cb-page' : 'cb-section-card', style: page ? undefined : { listStyle: 'none', marginBottom: '12px' } },
-    React.createElement(
-      'button',
-      {
-        type: 'button',
-        style: {
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          display: page ? 'none' : 'flex',
-          alignItems: 'center',
-          width: '100%',
-          padding: 0,
-          textAlign: 'left',
-        },
-        'aria-expanded': page ? true : open,
-        onClick: () => setOpen((v) => !v),
-      },
-      React.createElement(
-        'div',
-        { style: { flex: 1 } },
-        React.createElement('div', { style: { fontWeight: 600, fontSize: '15px' } }, t('title')),
-        React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
-      ),
-      React.createElement('span', { className: 'cb-chevron' + (open ? ' cb-chevron-open' : '') },
-        React.createElement(Chevron)
-      )
-    ),
-    (page || open)
-      ? React.createElement(
-          'div',
-          { style: { marginTop: '16px' } },
-          React.createElement(
-            ErrorBoundary,
-            { t },
-            React.createElement(SettingsPage, { ...props, ctx: props && props.ctx })
-          )
-        )
-      : null
-  )
-}
-
 // --- src/client/entry.js ---
 function ensureSettingsForm(ctx) {
   const svc = readConfigForms(ctx)
@@ -3703,6 +3760,12 @@ function ensureSettingsForm(ctx) {
 }
 
 function apply(ctx) {
+  // The stylesheet has to be in the document before any of this plugin's slots
+  // render. `sidebar.footer.action` and `main` mount on boot, so leaving the
+  // injection to the settings page's mount effect renders those seats unstyled
+  // until the user opens the plugin page.
+  ensureCss()
+
   const addLocale = (locale, dictionary) => {
     try {
       return ctx.locale.register(NS, locale, dictionary)
@@ -3755,50 +3818,31 @@ function apply(ctx) {
     }
   }
 
-  // The seat the Plugins page actually renders as the plugin's own page with the
-  // settings form: a card in the plugin list (`plugins.item`), exactly how
-  // @goodandready-private/dsh-agentrouter does it. `view: 'summary'` is the card's
-  // one-liner, `view: 'page'` is the body of that page.
-  registerSlotWhenReady('plugins.item', () =>
+  // 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
+  // and the scrolling body, and hands a section `close` as its one affordance; the
+  // section draws its own content. An unregistered id gets the shell's default
+  // settings glyph in the nav.
+  registerSlotWhenReady('settings.section', () =>
     ctx.slots.register(
       {
-        name: 'plugins.item',
+        name: 'settings.section',
         id: NS,
-        order: 60,
-        label: () => 'clinebot',
-        locale: NS,
-        inject: () => ({ ctx }),
-      },
-      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx }))
-    )
-  )
-
-  // Row seat first (the seat the current core renders), legacy seat after it.
-  // The core keys the seat as `<bundle name>#<row id>`; `bundle.name` may be the
-  // package name or the short bundle name depending on the manager's view, so both
-  // spellings are registered — the unused one is inert.
-  // Row seat: key = ROW_CONFIG_KEY ('@goodandready/dsh-clinebot#dsh-clinebot').
-  registerSlotWhenReady('plugins.row.config', () =>
-    ctx.slots.register(
-      {
-        name: 'plugins.row.config',
-        key: ROW_CONFIG_KEY,
-        locale: NS,
-        inject: () => ({ ctx }),
-      },
-      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx }))
-    )
-  )
-
-  registerSlotWhenReady('settings.plugin.item', () =>
-    ctx.slots.register(
-      {
-        name: 'settings.plugin.item',
-        key: NS,
+        order: 30,
+        label: () => {
+          try {
+            const t = ctx.locale && typeof ctx.locale.bind === 'function' ? ctx.locale.bind(NS) : null
+            const label = t ? t('nav') : ''
+            return label && label !== 'nav' ? label : 'ClineBot'
+          } catch (_) {
+            return 'ClineBot'
+          }
+        },
         locale: NS,
         inject: () => ({ ctx }),
       },
-      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx }))
+      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(SettingsPage, { ...props, ctx: (props && props.ctx) || ctx }))
     )
   )
 
@@ -3816,33 +3860,32 @@ function apply(ctx) {
     )
   )
 
-  // Central Overlay Dashboard (main slot)
-  registerSlotWhenReady('main', () =>
+  // 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.
+
+  // Composer Session Cost Dock (conversation.composer.dock slot)
+  registerSlotWhenReady('conversation.composer.dock', () =>
     ctx.slots.register(
       {
-        name: 'main',
-        key: 'clinebot-dashboard',
+        name: 'conversation.composer.dock',
+        id: 'clinebot-cost',
+        order: 10,
         locale: NS,
         inject: () => ({ ctx }),
       },
-      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(DashboardOverlay, { ...props, ctx: (props && props.ctx) || ctx }))
+      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(ComposerCostDock, { ...props, ctx: (props && props.ctx) || ctx }))
     )
   )
-
-  // Settings Models Provider Card (settings.models.provider-card slot)
-  for (const pKey of ['clinebot', 'llm-clinebot']) {
-    registerSlotWhenReady('settings.models.provider-card', () =>
-      ctx.slots.register(
-        {
-          name: 'settings.models.provider-card',
-          key: pKey,
-          locale: NS,
-          inject: () => ({ ctx }),
-        },
-        (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(ModelsProviderCard, { ...props, ctx: (props && props.ctx) || ctx }))
-      )
-    )
-  }
 }
 
 module.exports = { apply, inject: ['slots', 'locale', 'configForms'] }