@goodandready/dsh-clinebot 0.5.27 → 0.5.28

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to `@goodandready/dsh-clinebot` will be documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.28] - 2026-10-17
+
+### Added
+- **Sidebar Quota Meter (`sidebar.footer.action` slot) (Issue #229)**: Added live subscription quota indicator in DSH sidebar footer right above Settings. Supports collapsed rail mode with 20px dynamic circular ring (`MiniRing`) and wide mode with plan name (`ClinePass Pro`), rolling 5h quota progress bar, and percentage used.
+- **Center-Column Dashboard Overlay (`main` slot) (Issue #229)**: Registered full overlay dashboard under key `clinebot-dashboard`, providing detailed view of 5-hour and weekly quota rolling windows, reset countdown timers, active account pool routing mode, and a close button (`×`) that restores the current chat view without page reload.
+- **Native Models Provider Card (`settings.models.provider-card` slot) (Issue #230)**: Added native provider card registered under `clinebot` and `llm-clinebot` on DSH Settings -> Models page, featuring connection status badges, quick API key input and save into DSH credentials, active model count, and direct navigation to full ClineBot settings.
+- **Sidebar Quota Toggle (`showSidebarQuota`) (Issue #229)**: Added volatile config field and settings toggle (default `true`) allowing users to easily enable or disable the sidebar quota meter.
+
 ## [0.5.27] - 2026-10-17
 
 ### Added

package/lib/client.js

@@ -219,6 +219,28 @@ const en = {
       'update.failed': 'Update failed: {error}',
       'update.checking': 'Checking for updates…',
       'update.up_to_date': 'Up to date',
+      'sidebar.quota_title': 'Cline Quota',
+      'sidebar.show_quota': 'Show quota meter in sidebar',
+      'sidebar.show_quota_hint': 'Display compact quota meter in DSH sidebar footer.',
+      'dashboard.title': 'Cline Quota & Status',
+      'dashboard.subtitle': 'Real-time subscription quota, rolling limits, and account pool status.',
+      'dashboard.close': 'Close dashboard',
+      'dashboard.refresh': 'Refresh',
+      'dashboard.refreshing': 'Refreshing…',
+      'dashboard.rolling_window': '5-Hour Window',
+      'dashboard.weekly_window': 'Weekly Window',
+      'dashboard.remaining': 'remaining',
+      'dashboard.used': 'used',
+      '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',
     }
 
     const zh = {
@@ -402,6 +424,28 @@ const en = {
       'update.failed': '更新失败：{error}',
       'update.checking': '正在检查更新…',
       'update.up_to_date': '已是最新版本',
+      'sidebar.quota_title': 'Cline 额度',
+      'sidebar.show_quota': '在侧边栏显示额度条',
+      'sidebar.show_quota_hint': '在 DSH 侧边栏底部常驻显示额度 mini 进度指示器。',
+      'dashboard.title': 'Cline 额度与状态',
+      'dashboard.subtitle': '实时订阅额度、滑动窗口限制与账户池状态。',
+      'dashboard.close': '关闭面板',
+      'dashboard.refresh': '刷新',
+      'dashboard.refreshing': '正在刷新…',
+      'dashboard.rolling_window': '5小时滑动窗口',
+      'dashboard.weekly_window': '每周配额窗口',
+      'dashboard.remaining': '剩余',
+      'dashboard.used': '已用',
+      '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} 个可用模型',
     }
 
     function makeT(dict, fallback) {
@@ -504,6 +548,34 @@ function ensureCss() {
 .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-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-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: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-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}
+
+.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)
     }
@@ -1289,7 +1361,7 @@ function AccountsSection({
 }
 
 // --- src/client/components/quota-section.js ---
-function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }) {
+function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, showSidebarQuota, onToggleSidebarQuota, t }) {
   const isLowQuota = Boolean(
     (usage?.windows?.weekly && typeof usage.windows.weekly.remainingPercent === 'number' && usage.windows.weekly.remainingPercent <= 10) ||
     (usage?.windows?.monthly && typeof usage.windows.monthly.remainingPercent === 'number' && usage.windows.monthly.remainingPercent <= 10) ||
@@ -1379,6 +1451,22 @@ function QuotaSection({ keyPresent, status, usage, busy, handleRefreshQuota, t }
                   t,
                 })
               : null
+          ),
+          React.createElement(
+            'div',
+            { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '4px', paddingTop: '10px', borderTop: '1px 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'))
+            ),
+            React.createElement('input', {
+              type: 'checkbox',
+              style: { cursor: 'pointer', width: '16px', height: '16px' },
+              checked: showSidebarQuota !== false,
+              onChange: (e) => onToggleSidebarQuota && onToggleSidebarQuota(e.target.checked),
+            })
           )
         )
       : null
@@ -2573,6 +2661,482 @@ function DiagSection({
   )
 }
 
+// --- src/client/components/sidebar-quota.js ---
+function MiniRing({ percent, size = 18, warn = false }) {
+  const r = 7
+  const c = 2 * Math.PI * r
+  const pct = Math.max(0, Math.min(100, Number(percent) || 0))
+  const offset = c - (pct / 100) * c
+  const strokeColor = warn ? 'var(--dsw-alias-state-error-primary)' : 'var(--dsw-alias-brand-primary)'
+
+  return React.createElement(
+    'svg',
+    {
+      className: 'cb-glyph',
+      width: size,
+      height: size,
+      viewBox: '0 0 20 20',
+      fill: 'none',
+    },
+    React.createElement('circle', {
+      cx: 10,
+      cy: 10,
+      r,
+      stroke: 'var(--dsw-alias-bg-layer-2)',
+      strokeWidth: 2.5,
+    }),
+    React.createElement('circle', {
+      cx: 10,
+      cy: 10,
+      r,
+      stroke: strokeColor,
+      strokeWidth: 2.5,
+      strokeDasharray: c,
+      strokeDashoffset: offset,
+      strokeLinecap: 'round',
+      transform: 'rotate(-90 10 10)',
+      style: { transition: 'stroke-dashoffset 0.3s ease' },
+    })
+  )
+}
+
+function SidebarQuota({ ctx, wide, open, t: propT }) {
+  const t = propT || makeT(en, en)
+  const [data, setData] = React.useState(null)
+  const [visible, setVisible] = React.useState(true)
+
+  const loadQuota = React.useCallback(async () => {
+    try {
+      const res = await fetchWithTimeout(`${ROUTE_PREFIX}/usage`, { cache: 'no-store' })
+      if (!res.ok) return
+      const json = await res.json().catch(() => null)
+      if (json && json.ok) setData(json)
+    } catch {
+      // quiet on network fail
+    }
+  }, [])
+
+  React.useEffect(() => {
+    let timer = null
+    const scheduleNext = () => {
+      timer = setTimeout(async () => {
+        await loadQuota()
+        scheduleNext()
+      }, 60000)
+    }
+    loadQuota()
+    scheduleNext()
+    return () => { if (timer) clearTimeout(timer) }
+  }, [loadQuota])
+
+  // Check configForms snapshot for showSidebarQuota toggle
+  const config = useConfigFormsSnapshot(ctx)
+  const show = config?.showSidebarQuota !== false
+  if (!show || !visible) 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 handleOpen = () => {
+    if (typeof open === 'function') {
+      open()
+    } else {
+      ctx?.get?.('layout')?.selectPanel?.('clinebot-dashboard')
+    }
+  }
+
+  const tooltip = `${t('sidebar.quota_title')}: ${pct}% ${t('dashboard.used')} (${planName})`
+
+  if (!wide) {
+    return React.createElement(
+      'button',
+      {
+        type: 'button',
+        className: 'cb-railButton',
+        'aria-label': tooltip,
+        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')}`)
+      ),
+      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))}%` },
+        })
+      )
+    )
+  )
+}
+
+// --- src/client/components/dashboard-overlay.js ---
+function DashboardOverlay(props) {
+  const ctx = props?.ctx
+  const t = props?.t || makeT(en, en)
+  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('')
+    try {
+      const [uRes, sRes] = await Promise.all([
+        fetchWithTimeout(`${ROUTE_PREFIX}/usage`, { cache: 'no-store' }),
+        fetchWithTimeout(`${ROUTE_PREFIX}/status`, { cache: 'no-store' }),
+      ])
+      const uJson = await uRes.json().catch(() => ({}))
+      const sJson = await sRes.json().catch(() => ({}))
+      if (uJson?.ok) setData(uJson)
+      if (sJson?.ok) setStatus(sJson)
+      setUpdatedAt(new Date().toLocaleTimeString())
+    } catch (e) {
+      setErr(String(e?.message || e))
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  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
+
+  return React.createElement(
+    'div',
+    { className: 'cb-mainOverlay', role: 'region', 'aria-label': t('dashboard.title') },
+    React.createElement(
+      'div',
+      { className: 'cb-mainInner' },
+      // Header
+      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,
+          },
+          '✕'
+        )
+      ),
+
+      err ? React.createElement('div', { className: 'cb-alert-bad' }, err) : null,
+
+      // Card 1: Account & Plan Status
+      React.createElement(
+        'div',
+        { className: 'cb-mainCard' },
+        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 })
+          )
+        ),
+        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'))
+          )
+        )
+      ),
+
+      // Card 2: Quota Windows
+      React.createElement(
+        'div',
+        { className: 'cb-mainCard' },
+        React.createElement(
+          'div',
+          { style: { fontSize: '15px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } },
+          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
+        )
+      )
+    )
+  )
+}
+
+// --- 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('')
+
+  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
+    }
+  }, [])
+
+  React.useEffect(() => {
+    loadStatus()
+  }, [loadStatus])
+
+  const keyConfigured = Boolean(status?.keyPresent || status?.config?.hasKey)
+  const modelsCount = status?.config?.enabledModels?.length || status?.availableModels?.length || 0
+
+  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)
+    }
+  }
+
+  const handleOpenSettings = () => {
+    const layout = ctx?.get?.('layout')
+    if (typeof layout?.selectPanel === 'function') {
+      layout.selectPanel('clinebot-dashboard')
+    } else if (typeof props?.openSettings === 'function') {
+      props.openSettings()
+    }
+  }
+
+  return React.createElement(
+    'div',
+    { className: 'cb-providerCard', 'data-clinebot-provider-card': 'true' },
+    // Header
+    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
+      )
+    ),
+
+    // 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',
+          {
+            type: 'button',
+            className: 'cb-btn cb-btn-primary',
+            disabled: saving || !apiKey.trim(),
+            onClick: handleSaveKey,
+          },
+          saving ? t('key.saving') : t('card.save_key')
+        )
+      ),
+      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')}`
+      )
+    )
+  )
+}
+
 // --- src/client/settings-page.js ---
 function SettingsPage(props) {
   const ctx = props?.ctx
@@ -3020,7 +3584,7 @@ function SettingsPage(props) {
     }),
 
     // Quota Warning & Dashboard Card
-    React.createElement(QuotaSection, { keyPresent, status, usage, busy, handleRefreshQuota, t }),
+    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, {
@@ -3237,6 +3801,48 @@ function apply(ctx) {
       (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx }))
     )
   )
+
+  // Sidebar Quota Meter (sidebar.footer.action slot)
+  registerSlotWhenReady('sidebar.footer.action', () =>
+    ctx.slots.register(
+      {
+        name: 'sidebar.footer.action',
+        id: 'clinebot-quota',
+        order: 20,
+        locale: NS,
+        inject: () => ({ ctx }),
+      },
+      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(SidebarQuota, { ...props, ctx: (props && props.ctx) || ctx }))
+    )
+  )
+
+  // Central Overlay Dashboard (main slot)
+  registerSlotWhenReady('main', () =>
+    ctx.slots.register(
+      {
+        name: 'main',
+        key: 'clinebot-dashboard',
+        locale: NS,
+        inject: () => ({ ctx }),
+      },
+      (props) => React.createElement(ErrorBoundary, { t: props && props.t }, React.createElement(DashboardOverlay, { ...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'] }

package/lib/config.js

@@ -41,6 +41,8 @@ export const Config = z.object({
     .description('Automatically hide models not included in active subscription plan from chat picker.').volatile(),
   visibleModels: z.array(z.string()).default([])
     .description('User-selected visible models in chat model picker (empty means all supported models).').volatile(),
+  showSidebarQuota: z.boolean().default(true)
+    .description('Display compact quota meter in DSH sidebar footer.').volatile(),
   enabledModels: z.array(z.string()).default([])
     .description('Deprecated: preserved for backwards compatibility with earlier versions.'),
   dynamicModels: z.array(z.object({
@@ -209,6 +211,7 @@ export function publicConfig(cfg) {
     disabledModels: disabledList,
     filterModelsByPlan,
     visibleModels,
+    showSidebarQuota: cfg?.showSidebarQuota !== false,
     enabledModels: activeIds,
     timeoutMs: Number(cfg?.timeoutMs) || DEFAULT_TIMEOUT_MS,
     smokeTimeoutMs: Number(cfg?.smokeTimeoutMs) || DEFAULT_SMOKE_TIMEOUT_MS,

package/lib/proxy-token.js

@@ -14,9 +14,9 @@ export const LOCAL_PROXY_KEY_ENV = 'CLINEBOT_LOCAL_PROXY_TOKEN'
 let cachedToken = null
 
 const require = createRequire(import.meta.url)
-let packageVersion = '0.5.27'
+let packageVersion = '0.5.28'
 try {
-  packageVersion = require('../package.json').version || '0.5.27'
+  packageVersion = require('../package.json').version || '0.5.28'
 } catch (err) {
   /* fallback to default version if manifest is unreadable */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-clinebot",
-  "version": "0.5.27",
+  "version": "0.5.28",
   "description": "DeepSeek Harness companion for ClineBot / ClinePass: dynamic subscription models sync, quota exhaustion warnings, session metrics, dedicated settings page, live usage limits, and /cline slash-command.",
   "license": "MIT",
   "type": "module",