@goodandready/dsh-cost-meter 0.8.2 → 0.8.4

package/lib/client.js

@@ -11,8 +11,13 @@ window.__ModuleLoader__.load({
     const h = React.createElement
 
     const NS = 'dsh-cost-meter'
+    // Plugins page row seat (DSH 0.1.6-alpha.2): key = '<package name>#<row id>'.
+    const PKG = '@goodandready/dsh-cost-meter'
+    const ROW_ID = 'dsh-cost-meter'
+    const ROW_CONFIG_KEY = PKG + '#' + ROW_ID
     const STATE_PATH = '/dsh-cost-meter/state'
     const REFRESH_PATH = '/dsh-cost-meter/refresh'
+    const UPDATE_PATH = '/dsh-cost-meter/update'
     const DAY = 1440
 
     // ----------------------------------------------------------- localization
@@ -22,6 +27,13 @@ window.__ModuleLoader__.load({
       subtitle: 'Model rates, peak discount windows and session spend',
       'header.title': 'Cost Meter',
       'header.sub': 'Token spend monitoring, automatic tariff resolution and discount windows',
+      'update.checking': 'Checking for updates…',
+      'update.up_to_date': 'Up to date',
+      'update.available': 'Update available: v{latestVersion} (current: v{currentVersion})',
+      'update.btn': 'Update Now',
+      'update.updating': 'Updating…',
+      'update.done': 'Successfully updated to v{version}! Please restart DSH.',
+      'update.failed': 'Update failed: {error}',
       'badge.catalog_ok': 'Catalog: {count} models',
       'badge.catalog_empty': 'Catalog: loading…',
       'badge.catalog_off': 'Catalog: disabled',
@@ -93,6 +105,13 @@ window.__ModuleLoader__.load({
       subtitle: '模型费率、高峰优惠窗口与会话消费统计',
       'header.title': '成本计量器 (Cost Meter)',
       'header.sub': 'Token 消费监控、费率自动匹配与折扣窗口管理',
+      'update.checking': '正在检查更新…',
+      'update.up_to_date': '已是最新版本',
+      'update.available': '发现新版本 v{latestVersion}（当前版本 v{currentVersion}）',
+      'update.btn': '立即更新',
+      'update.updating': '正在更新…',
+      'update.done': '更新成功至 v{version}！请重启 DSH 服务生效。',
+      'update.failed': '更新失败：{error}',
       'badge.catalog_ok': '目录：{count} 个模型',
       'badge.catalog_empty': '目录：加载中…',
       'badge.catalog_off': '目录：已禁用',
@@ -200,19 +219,22 @@ window.__ModuleLoader__.load({
 .dcm-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
 .dcm-field { display: flex; flex-direction: column; gap: 6px; }
 .dcm-row-check { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
-.dcm-check { width: 16px; height: 16px; accent-color: var(--dsw-alias-state-brand-primary, #6366f1); cursor: pointer; }
+.dcm-check { width: 16px; height: 16px; accent-color: var(--dsw-alias-state-brand-primary); cursor: pointer; }
 .dcm-label { color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 500; }
 .dcm-hint { color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 1.4; }
 
 .dcm-input { height: 34px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-3); color: var(--dsw-alias-label-primary); border-radius: 8px; padding: 0 12px; font-size: 13px; width: 100%; box-sizing: border-box; }
-.dcm-input:focus { outline: none; border-color: var(--dsw-alias-state-brand-primary, #6366f1); }
-.dcm-input-err { border-color: var(--dsw-alias-state-error-primary, #ef4444); }
+.dcm-input:focus { outline: none; border-color: var(--dsw-alias-state-brand-primary); }
+.dcm-input-err { border-color: var(--dsw-alias-state-error-primary); }
+
+.dcm-chevron { display: inline-flex; align-items: center; justify-content: center; transition: transform .16s ease; color: var(--dsw-alias-label-tertiary); }
+.dcm-chevron-open { transform: rotate(180deg); }
 
 .dcm-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
 .dcm-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--dsw-alias-border-l2); display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
-.dcm-badge-ok { border-color: var(--dsw-alias-state-success-primary); color: var(--dsw-alias-state-success-primary); background: rgba(16,185,129,0.08); }
-.dcm-badge-warn { border-color: var(--dsw-alias-state-warning-primary); color: var(--dsw-alias-state-warning-primary); background: rgba(245,158,11,0.08); }
-.dcm-badge-bad { border-color: var(--dsw-alias-state-error-primary); color: var(--dsw-alias-state-error-primary); background: rgba(239,68,68,0.08); }
+.dcm-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); }
+.dcm-badge-warn { border-color: var(--dsw-alias-state-warning-primary); color: var(--dsw-alias-state-warning-primary); background: color-mix(in srgb, var(--dsw-alias-state-warning-primary) 8%, transparent); }
+.dcm-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); }
 
 .dcm-btn { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 6px 14px; font-size: 13px; background: var(--dsw-alias-bg-layer-3); color: var(--dsw-alias-label-primary); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s ease; }
 .dcm-btn:hover:not(:disabled) { background: var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-3)); }
@@ -222,10 +244,10 @@ window.__ModuleLoader__.load({
 .dcm-btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
 
 .dcm-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.4; }
-.dcm-alert-ok { background: rgba(16,185,129,0.1); color: var(--dsw-alias-state-success-primary); }
-.dcm-alert-err { background: rgba(239,68,68,0.1); color: var(--dsw-alias-state-error-primary); }
-.dcm-tip-box { padding: 8px 12px; border-radius: 8px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.4; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.dcm-cache-box { padding: 7px 11px; border-radius: 8px; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.22); color: var(--dsw-alias-state-success-primary); font-size: 11.5px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
+.dcm-alert-ok { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent); color: var(--dsw-alias-state-success-primary); }
+.dcm-alert-err { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent); color: var(--dsw-alias-state-error-primary); }
+.dcm-tip-box { padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--dsw-alias-state-brand-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--dsw-alias-state-brand-primary) 20%, transparent); color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.4; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.dcm-cache-box { padding: 7px 11px; border-radius: 8px; background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--dsw-alias-state-success-primary) 22%, transparent); color: var(--dsw-alias-state-success-primary); font-size: 11.5px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
 
 .dcm-stat-box { padding: 10px 12px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-3); display: flex; flex-direction: column; gap: 2px; }
 .dcm-stat-val { font-size: 14px; font-weight: 600; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }
@@ -234,13 +256,13 @@ window.__ModuleLoader__.load({
 .dcm-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 6px; }
 
 /* Native dot-indicator chip */
-.dcm-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.05)); color: var(--dsw-alias-label-primary); cursor: pointer; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 24px; transition: all .15s ease; user-select: none; }
-.dcm-chip:hover { border-color: var(--dsw-alias-border-l3, var(--dsw-alias-label-tertiary)); background: var(--dsw-alias-bg-layer-3, rgba(255,255,255,0.08)); }
+.dcm-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); cursor: pointer; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 24px; transition: all .15s ease; user-select: none; }
+.dcm-chip:hover { border-color: var(--dsw-alias-border-l3, var(--dsw-alias-label-tertiary)); background: var(--dsw-alias-bg-layer-3); }
 .dcm-dot { width: 6.5px; height: 6.5px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
-.dcm-dot-ok { background: var(--dsw-alias-state-success-primary, #10b981); box-shadow: 0 0 5px rgba(16,185,129,0.5); }
-.dcm-dot-warn { background: var(--dsw-alias-state-warning-primary, #f59e0b); box-shadow: 0 0 5px rgba(245,158,11,0.4); }
-.dcm-dot-err { background: var(--dsw-alias-state-error-primary, #ef4444); box-shadow: 0 0 6px rgba(239,68,68,0.7); animation: dcm-pulse 1.8s infinite ease-in-out; }
-.dcm-dot-idle { background: var(--dsw-alias-label-tertiary, #9ca3af); }
+.dcm-dot-ok { background: var(--dsw-alias-state-success-primary); box-shadow: 0 0 5px color-mix(in srgb, var(--dsw-alias-state-success-primary) 50%, transparent); }
+.dcm-dot-warn { background: var(--dsw-alias-state-warning-primary); box-shadow: 0 0 5px color-mix(in srgb, var(--dsw-alias-state-warning-primary) 40%, transparent); }
+.dcm-dot-err { background: var(--dsw-alias-state-error-primary); box-shadow: 0 0 6px color-mix(in srgb, var(--dsw-alias-state-error-primary) 70%, transparent); animation: dcm-pulse 1.8s infinite ease-in-out; }
+.dcm-dot-idle { background: var(--dsw-alias-label-tertiary); }
 
 .dcm-chip-timer { opacity: 0.72; font-size: 11px; padding-left: 2px; border-left: 1px solid var(--dsw-alias-border-l2); }
 @media (max-width: 680px) {
@@ -249,7 +271,7 @@ window.__ModuleLoader__.load({
 
 @keyframes dcm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
 
-.dcm-panel { position: absolute; top: 30px; right: 0; z-index: 40; width: 336px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-base)); box-shadow: 0 10px 32px rgba(0,0,0,.32); font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-primary); text-align: left; font-variant-numeric: tabular-nums; }
+.dcm-panel { position: absolute; top: 30px; right: 0; z-index: 40; width: 336px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-base)); box-shadow: var(--dsw-alias-shadow-layer-3, 0 10px 32px var(--dsw-alias-bg-base)); font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-primary); text-align: left; font-variant-numeric: tabular-nums; }
 .dcm-panel-title { font-weight: 600; padding-bottom: 2px; font-size: 13.5px; display: flex; justify-content: space-between; align-items: baseline; }
 .dcm-panel-note { color: var(--dsw-alias-label-tertiary); font-size: 12px; }
 .dcm-hr { height: 1px; background: var(--dsw-alias-border-l2); margin: 10px -16px; border: 0; }
@@ -264,7 +286,7 @@ window.__ModuleLoader__.load({
 .dcm-cost { text-align: right; padding: 3.5px 0; font-weight: 500; color: var(--dsw-alias-label-primary); }
 .dcm-section-lbl { color: var(--dsw-alias-label-tertiary); padding-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
 .dcm-total { display: flex; justify-content: space-between; font-weight: 600; font-size: 13.5px; }
-.dcm-accordion-btn { appearance: none; background: transparent; border: 0; color: var(--dsw-alias-state-brand-primary, #6366f1); font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 0; text-align: left; }
+.dcm-accordion-btn { appearance: none; background: transparent; border: 0; color: var(--dsw-alias-state-brand-primary); font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 0; text-align: left; }
 .dcm-accordion-btn:hover { text-decoration: underline; }
 `
 
@@ -318,51 +340,83 @@ window.__ModuleLoader__.load({
     }
     const ErrorBoundary = createErrorBoundary()
 
+    function getSettingsScope(ctx) {
+      return (ctx && typeof ctx.get === 'function' ? ctx.get('settingsScope') : null) || (ctx && ctx.settingsScope) || (ctx && ctx.services && ctx.services.settingsScope) || null
+    }
+
     function refreshMirrorUntilVisible(ctx) {
+      const s = getSettingsScope(ctx)
       const visible = () => {
         try {
-          const s = (ctx?.get && ctx.get('lanSettings')) || (ctx?.get && ctx.get('settingsScope')) || ctx?.settingsScope
           const view = s?.describe?.()?.getSnapshot?.()?.view
           return !!view && Array.isArray(view.namespaces) && view.namespaces.some((row) => row.ns === NS)
-        } catch (_) {
+        } catch (e) {
+          if (ctx?.logger?.debug) ctx.logger.debug('[dsh-cost-meter] mirror check error: ' + (e?.message || e))
           return false
         }
       }
-      if (visible()) return () => {}
+      if (!s || visible()) return () => {}
       let tries = 0
       const timer = setInterval(() => {
-        if (visible() || tries >= 15) { clearInterval(timer); return }
+        if (visible() || tries >= 15) {
+          if (!visible() && tries >= 15 && ctx?.logger?.warn) {
+            ctx.logger.warn('[dsh-cost-meter] settings mirror did not appear after 15 attempts')
+          }
+          clearInterval(timer)
+          return
+        }
         tries += 1
         try {
-          const s = (ctx?.get && ctx.get('lanSettings')) || (ctx?.get && ctx.get('settingsScope')) || ctx?.settingsScope
           s?.describe?.()?.load?.()
-        } catch (_) {}
+        } catch (e) {
+          if (ctx?.logger?.debug) ctx.logger.debug('[dsh-cost-meter] settings load error: ' + (e?.message || e))
+        }
       }, 1000)
       return () => clearInterval(timer)
     }
 
-    function Chevron(props) {
+    let ChevronIcon = null
+    try {
+      const primitives = require('@deepseek-ai/dsh-client-ui-primitives')
+      ChevronIcon = primitives && (primitives.IconChevronDownOutline14 || primitives.IconChevronDownOutline)
+    } catch (e) {
+      ChevronIcon = null
+    }
+
+    function FallbackChevron(props) {
       return React.createElement(
         'svg',
         {
-          width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none',
-          style: {
-            marginLeft: 'auto',
-            transform: props.open ? 'rotate(180deg)' : 'none',
-            transition: 'transform .18s ease',
-            color: 'var(--dsw-alias-label-secondary)',
-          },
+          width: 14,
+          height: 14,
+          viewBox: '0 0 14 14',
+          fill: 'none',
+          'aria-hidden': true,
         },
         React.createElement('path', {
-          d: 'M4 6L8 10L12 6',
+          d: 'M3.5 5.25L7 8.75L10.5 5.25',
           stroke: 'currentColor',
-          strokeWidth: 1.6,
+          strokeWidth: 1.5,
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
         }),
       )
     }
 
+    function Chevron(props) {
+      const icon = ChevronIcon
+        ? React.createElement(ChevronIcon, { 'aria-hidden': true })
+        : React.createElement(FallbackChevron, null)
+      return React.createElement(
+        'span',
+        {
+          className: 'dcm-chevron' + (props.open ? ' dcm-chevron-open' : ''),
+          style: { marginLeft: 'auto' },
+        },
+        icon,
+      )
+    }
+
     function isValidTimeZone(tz) {
       if (!tz || typeof tz !== 'string') return false
       try {
@@ -389,7 +443,8 @@ window.__ModuleLoader__.load({
       const ctx = props.ctx
       const locale = useActiveLocale(ctx)
       const t = props.t || makeT(locale === 'zh' ? zh : en, en)
-      const [open, setOpen] = React.useState(false)
+      const page = !!(props && props.view === 'page')
+      const [open, setOpen] = React.useState(!!page)
       const [draft, setDraft] = React.useState(null)
       const [saving, setSaving] = React.useState(false)
       const [err, setErr] = React.useState('')
@@ -400,7 +455,72 @@ window.__ModuleLoader__.load({
       const [syncing, setSyncing] = React.useState(false)
       const [syncMsg, setSyncMsg] = React.useState('')
 
-      const settingsScope = (ctx && typeof ctx.get === 'function' ? ctx.get('settingsScope') : null) || (ctx && ctx.settingsScope) || (ctx && ctx.services && ctx.services.settingsScope)
+      // Plugin in-app updater state
+      const [updateState, setUpdateState] = React.useState({
+        checking: false,
+        updating: false,
+        currentVersion: '0.8.3',
+        latestVersion: '',
+        updateAvailable: false,
+        canAutoUpdate: true,
+        error: '',
+        notice: '',
+      })
+
+      const checkUpdate = React.useCallback(async () => {
+        setUpdateState((s) => ({ ...s, checking: true, error: '' }))
+        try {
+          const res = await fetch(UPDATE_PATH)
+          if (!res.ok) throw new Error('HTTP ' + res.status)
+          const data = await res.json().catch(() => ({}))
+          setUpdateState((s) => ({
+            ...s,
+            checking: false,
+            currentVersion: data.currentVersion || s.currentVersion,
+            latestVersion: data.latestVersion || '',
+            updateAvailable: Boolean(data.updateAvailable),
+            canAutoUpdate: data.canAutoUpdate !== false,
+          }))
+        } catch (e) {
+          setUpdateState((s) => ({ ...s, checking: false }))
+        }
+      }, [])
+
+      React.useEffect(() => {
+        if (open) checkUpdate()
+      }, [open, checkUpdate])
+
+      async function handleTriggerUpdate() {
+        if (updateState.updating) return
+        setUpdateState((s) => ({ ...s, updating: true, error: '', notice: '' }))
+        try {
+          const res = await fetch(UPDATE_PATH, {
+            method: 'POST',
+            headers: { 'x-dsh-plugin-update': '1' },
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok || data.ok === false || data.error) {
+            throw new Error(data.error || ('HTTP ' + res.status))
+          }
+          const newVer = data.updatedVersion || updateState.latestVersion || updateState.currentVersion
+          setUpdateState((s) => ({
+            ...s,
+            updating: false,
+            updateAvailable: false,
+            currentVersion: newVer,
+            notice: t('update.done', { version: newVer }),
+          }))
+          setTimeout(() => checkUpdate(), 2000)
+        } catch (err) {
+          setUpdateState((s) => ({
+            ...s,
+            updating: false,
+            error: t('update.failed', { error: String(err.message || err) }),
+          }))
+        }
+      }
+
+      const settingsScope = getSettingsScope(ctx)
       const scope = React.useMemo(
         () => (settingsScope ? settingsScope.bind({ namespace: NS }) : undefined),
         [settingsScope],
@@ -535,9 +655,15 @@ window.__ModuleLoader__.load({
       const catalogHasErr = diagState && Boolean(diagState.catalogError)
       const openRouterEnabled = draft ? Boolean(draft.useOpenRouter) : true
 
-      return React.createElement('li', { className: 'dcm-card' },
+      // 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', { className: 'dcm-sub' }, t('header.sub'))
+      }
+
+      return React.createElement(page ? 'div' : 'li', { className: page ? 'dcm-page' : 'dcm-card' },
         React.createElement('button', {
-          type: 'button', className: 'dcm-head', 'aria-expanded': open,
+          type: 'button', className: 'dcm-head', style: page ? { display: 'none' } : undefined, 'aria-expanded': page ? true : open,
           onClick: () => setOpen((v) => !v),
         },
           React.createElement('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: 2 } },
@@ -566,6 +692,38 @@ window.__ModuleLoader__.load({
             : status !== 'ready'
               ? React.createElement('div', { className: 'dcm-alert dcm-alert-err' }, t('settings.unavailable'))
               : React.createElement(React.Fragment, null,
+                  // In-app Update Bar
+                  React.createElement('div', {
+                    className: 'dcm-section-card',
+                    style: { padding: '10px 14px', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+                  },
+                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 } },
+                      React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)', fontWeight: 500 } },
+                        'v' + updateState.currentVersion
+                      ),
+                      updateState.checking
+                        ? React.createElement('span', { style: { color: 'var(--dsw-alias-label-tertiary)', fontSize: 12 } }, t('update.checking'))
+                        : updateState.updateAvailable
+                          ? React.createElement('span', { className: 'dcm-badge dcm-badge-warn' },
+                              t('update.available', { latestVersion: updateState.latestVersion, currentVersion: updateState.currentVersion })
+                            )
+                          : React.createElement('span', { className: 'dcm-badge dcm-badge-ok' },
+                              '✓ ' + t('update.up_to_date')
+                            )
+                    ),
+                    updateState.updateAvailable
+                      ? React.createElement('button', {
+                          type: 'button',
+                          className: 'dcm-btn dcm-btn-primary',
+                          disabled: updateState.updating,
+                          onClick: handleTriggerUpdate,
+                          style: { padding: '4px 10px', fontSize: 12 },
+                        }, updateState.updating ? t('update.updating') : t('update.btn'))
+                      : null
+                  ),
+                  updateState.notice ? React.createElement('div', { className: 'dcm-alert dcm-alert-ok' }, '✓ ' + updateState.notice) : null,
+                  updateState.error ? React.createElement('div', { className: 'dcm-alert dcm-alert-err' }, updateState.error) : null,
+
                   // Section 1: General Parameters
                   React.createElement('div', { className: 'dcm-section-card' },
                     React.createElement('div', { className: 'dcm-section-title' }, t('section.general')),
@@ -855,7 +1013,7 @@ window.__ModuleLoader__.load({
 
       React.useEffect(() => { ensureStyles() }, [])
 
-      const settingsScope = (ctx && typeof ctx.get === 'function' ? ctx.get('settingsScope') : null) || (ctx && ctx.settingsScope) || (ctx && ctx.services && ctx.services.settingsScope)
+      const settingsScope = getSettingsScope(ctx)
       const settingsSnap = React.useSyncExternalStore
         ? React.useSyncExternalStore(
             (cb) => (settingsScope && typeof settingsScope.subscribe === 'function' ? settingsScope.subscribe(cb) : () => {}),
@@ -960,7 +1118,7 @@ window.__ModuleLoader__.load({
         ? 'dcm-dot dcm-dot-err'
         : (flat ? 'dcm-dot dcm-dot-idle' : (cheapNow ? 'dcm-dot dcm-dot-ok' : 'dcm-dot dcm-dot-warn'))
 
-      const activeCell = { textAlign: 'right', padding: '3px 6px', borderRadius: 4, background: 'rgba(99,102,241,0.12)', color: 'var(--dsw-alias-state-brand-primary, #6366f1)', fontWeight: 600 }
+      const activeCell = { textAlign: 'right', padding: '3px 6px', borderRadius: 4, background: 'color-mix(in srgb, var(--dsw-alias-state-brand-primary) 12%, transparent)', color: 'var(--dsw-alias-state-brand-primary)', fontWeight: 600 }
 
       const rateRow = (label, key) => flat
         ? [
@@ -1203,11 +1361,43 @@ window.__ModuleLoader__.load({
     }
 
     function apply(ctx) {
-      if (ctx.locale && ctx.locale.register) {
-        try { ctx.locale.register(NS, { en, zh }) } catch (_) {}
+      const registerDictionaries = () => {
+        try {
+          // ctx.locale.register(NS, { en, zh }) is canonical form in DSH
+          return ctx.locale.register(NS, { en, zh })
+        } catch (err) {
+          if (ctx?.logger?.warn) {
+            ctx.logger.warn(`[dsh-cost-meter] locale register failed: ${err?.message || err}`)
+          }
+          return () => {}
+        }
       }
 
-      refreshMirrorUntilVisible(ctx)
+      if (ctx.locale && typeof ctx.locale.register === 'function') {
+        if (typeof ctx.effect === 'function') {
+          ctx.effect(() => {
+            const undo = registerDictionaries()
+            return () => {
+              try {
+                if (typeof undo === 'function') undo()
+              } catch (e) {
+                if (ctx?.logger?.debug) ctx.logger.debug('[dsh-cost-meter] locale undo error: ' + (e?.message || e))
+              }
+            }
+          }, 'dsh-cost-meter: locale dictionaries')
+        } else {
+          registerDictionaries()
+        }
+      }
+
+      if (typeof ctx.effect === 'function') {
+        ctx.effect(
+          () => refreshMirrorUntilVisible(ctx),
+          'dsh-cost-meter: refresh settings mirror',
+        )
+      } else {
+        refreshMirrorUntilVisible(ctx)
+      }
 
       if (ctx.slots && typeof ctx.slots.inject === 'function') {
         ctx.slots.inject('conversation.session.header.utilities', () =>
@@ -1217,6 +1407,14 @@ window.__ModuleLoader__.load({
           ),
         )
 
+        // Row seat first (the seat the current core renders), legacy seat kept below.
+        ctx.slots.inject('plugins.row.config', () =>
+          ctx.slots.register(
+            { name: 'plugins.row.config', key: ROW_CONFIG_KEY, locale: NS, order: 20, inject: () => ({ ctx }) },
+            (p) => React.createElement(ErrorBoundary, null, React.createElement(CostMeterCard, { ...p, ctx: (p && p.ctx) || ctx })),
+          ),
+        )
+
         ctx.slots.inject('settings.plugin.item', () =>
           ctx.slots.register(
             { name: 'settings.plugin.item', key: NS, locale: NS, order: 20, inject: () => ({ ctx }) },

package/lib/index.js

@@ -1,3 +1,4 @@
+import { registerPluginUpdater } from './updater.js'
 // dsh-cost-meter — host half.
 //
 // The harness prices nothing on purpose: pi-ai carries a `cost` field but
@@ -20,12 +21,38 @@ import { dirname, join } from 'node:path'
 import z from '@deepseek-ai/schemastery'
 import { z as zod } from 'zod'
 
-export const name = 'dsh-cost-meter'
+export const name = '@goodandready/dsh-cost-meter'
 export const inject = ['webServer']
 
 const NS = 'dsh-cost-meter'
 const STATE_PATH = '/dsh-cost-meter/state'
 const REFRESH_PATH = '/dsh-cost-meter/refresh'
+export function isLoopback(value) {
+  const address = value?.toLowerCase().replace(/^\[|\]$/g, '')
+  return address === 'localhost' || address === 'localhost.' || address === '::1'
+    || address?.startsWith('127.') === true
+    || address?.startsWith('::ffff:127.') === true
+}
+
+export function isTrustedCaller(request) {
+  const remote = request?.socket?.remoteAddress || request?.connection?.remoteAddress
+  if (isLoopback(remote)) return true
+  const site = request?.headers?.['sec-fetch-site']
+  if (site === 'same-origin' || site === 'same-site') return true
+  if (site === 'cross-site') return false
+  const origin = request?.headers?.['origin']
+  const host = request?.headers?.['host']
+  if (origin && host) {
+    try {
+      const url = new URL(origin)
+      if (url.host === host) return true
+    } catch (e) {
+      /* invalid url */
+    }
+  }
+  return false
+}
+
 const CATALOG_URL = 'https://openrouter.ai/api/v1/models'
 const CACHE_FILE = join(process.env.DSH_HOME || join(homedir(), '.dsh'), 'storages', 'dsh-cost-meter-catalog.json')
 
@@ -532,6 +559,11 @@ export function apply(ctx, config) {
             res.end(JSON.stringify({ error: 'method not allowed' }))
             return
           }
+          if (!isTrustedCaller(req)) {
+            res.writeHead(403, { 'Content-Type': 'application/json' })
+            res.end(JSON.stringify({ error: 'forbidden source origin' }))
+            return
+          }
           const now = Date.now()
           const COOLDOWN_MS = 30000
           if (now - lastManualRefreshAt < COOLDOWN_MS) {
@@ -627,4 +659,14 @@ export function apply(ctx, config) {
       }),
     'dsh-cost-meter: state route',
   )
+
+  // Route 3: /dsh-cost-meter/update (in-app one-click updater)
+  if (ctx.webServer?.register) {
+    ctx.effect(() => registerPluginUpdater(ctx, {
+      endpoint: '/dsh-cost-meter/update',
+      packageName: name,
+      manifestUrl: new URL('../package.json', import.meta.url),
+    }), 'dsh-cost-meter: updater')
+  }
+
 }