@linxin666/dsh-usage 0.3.7

package/src/client/locales.ts

@@ -0,0 +1,116 @@
+/**
+ * dsh-usage locale dictionaries (zh/en). The zh dictionary is the key source;
+ * `en` mirrors its full key set (packages/AGENTS.md bilingual discipline).
+ * @module @linxin666/dsh-usage/client/locales
+ */
+
+/** Dictionary namespace this package registers. */
+export const NS = 'dsh-web-ui-usage'
+
+/** Chinese copy. */
+export const zh = {
+  'usage.title': '使用统计',
+  'usage.tab.usage': '用量',
+  'usage.tab.plans': '个人套餐',
+  'usage.refresh': '刷新',
+  'usage.refreshing': '刷新中…',
+  'usage.updated': '更新于 {time}',
+  'usage.loading': '正在加载用量数据…',
+  'usage.error': '加载失败：{error}',
+  'usage.current': '当前',
+  'usage.today': '今日用量',
+  'usage.calls': '{n} 次调用',
+  'usage.tokens.total': '总 tokens',
+  'usage.tokens.input': '输入',
+  'usage.tokens.output': '输出',
+  'usage.tokens.cacheRead': '缓存读',
+  'usage.tokens.cacheWrite': '缓存写',
+  'usage.trend': '近 30 天',
+  'usage.noData': '暂无用量数据（统计自插件启用起）',
+  'usage.balance': '余额',
+  'usage.balance.unsupported': '暂不支持余额查询',
+  'usage.balance.noCredential': '未配置凭据',
+  'usage.oauth': 'OAuth 凭据，不做余额查询',
+  'usage.plan.reset': '{date} 重置',
+  'usage.plan.noPlan': '未检测到套餐数据',
+  'usage.plan.windows.5h': '5 小时',
+  'usage.plan.windows.week': '每周',
+  'usage.plan.windows.month': '每月',
+  'usage.provider.error': '查询失败：{error}',
+  'usage.config.title': '设置',
+  'usage.config.enabled': '启用插件',
+  'usage.config.pollIntervalSec': '轮询间隔（秒）',
+  'usage.config.bubbleMode': '宠物气泡',
+  'usage.config.bubbleMode.always': '常驻显示',
+  'usage.config.bubbleMode.change': '仅变化时',
+  'usage.config.bubbleMode.off': '关闭',
+}
+
+/** English mirror; every zh key present. */
+export const en: Record<UsageKey, string> = {
+  'usage.title': 'Usage Statistics',
+  'usage.tab.usage': 'Usage',
+  'usage.tab.plans': 'Plans',
+  'usage.refresh': 'Refresh',
+  'usage.refreshing': 'Refreshing…',
+  'usage.updated': 'Updated {time}',
+  'usage.loading': 'Loading usage data…',
+  'usage.error': 'Failed to load: {error}',
+  'usage.current': 'Current',
+  'usage.today': 'Today',
+  'usage.calls': '{n} calls',
+  'usage.tokens.total': 'Total tokens',
+  'usage.tokens.input': 'Input',
+  'usage.tokens.output': 'Output',
+  'usage.tokens.cacheRead': 'Cache read',
+  'usage.tokens.cacheWrite': 'Cache write',
+  'usage.trend': 'Last 30 days',
+  'usage.noData': 'No usage data yet (counting starts when the plugin is enabled)',
+  'usage.balance': 'Balance',
+  'usage.balance.unsupported': 'Balance query not supported',
+  'usage.balance.noCredential': 'No credential configured',
+  'usage.oauth': 'OAuth credential, no balance query',
+  'usage.plan.reset': 'resets {date}',
+  'usage.plan.noPlan': 'No plan data detected',
+  'usage.plan.windows.5h': '5 hours',
+  'usage.plan.windows.week': 'Weekly',
+  'usage.plan.windows.month': 'Monthly',
+  'usage.provider.error': 'Query failed: {error}',
+  'usage.config.title': 'Settings',
+  'usage.config.enabled': 'Enable plugin',
+  'usage.config.pollIntervalSec': 'Poll interval (seconds)',
+  'usage.config.bubbleMode': 'Pet bubble',
+  'usage.config.bubbleMode.always': 'Always visible',
+  'usage.config.bubbleMode.change': 'On change',
+  'usage.config.bubbleMode.off': 'Off',
+}
+
+export type UsageKey = keyof typeof zh
+
+/**
+ * Active dictionary, picked by the document language at call time. The
+ * section resolves its copy the same tiny way the pet's DOM-injected surface
+ * does (the settings section has no framework locale seat of its own).
+ */
+export function dictionary(): Record<UsageKey, string> {
+  const lang = typeof document !== 'undefined' ? document.documentElement.lang : 'zh'
+  return lang.toLowerCase().startsWith('en') ? en : zh
+}
+
+/** Translate a key with optional `{name}` template params; missing keys degrade to the key. */
+export function t(key: string, params?: Record<string, unknown>): string {
+  let text: string = (dictionary() as Record<string, string>)[key] ?? key
+  if (params !== undefined) {
+    for (const [name, value] of Object.entries(params)) {
+      text = text.replaceAll(`{${name}}`, String(value))
+    }
+  }
+  return text
+}
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** dsh-usage UI copy. */
+    'dsh-web-ui-usage': UsageKey
+  }
+}

package/src/client/usage-store.ts

@@ -0,0 +1,52 @@
+/**
+ * Browser-side usage store: the overview snapshot polled from the host plus
+ * the fetch lifecycle. Section-local: the store lives while the settings
+ * section is mounted, so polling only runs while the page is open.
+ * @module @linxin666/dsh-usage/client/usage-store
+ */
+
+import { defineStore } from '@deepseek-ai/dsh-client-store'
+import type { EngineStoreHandle, EngineStoreInstance } from '@deepseek-ai/dsh-client-store'
+import type { UsageOverviewView } from '../core/types.ts'
+
+/** Section UI state as consumers see it. */
+export interface UsageUiState {
+  /** Latest host overview; null before the first successful fetch. */
+  snapshot: UsageOverviewView | null
+  /** Fetch lifecycle. */
+  status: 'loading' | 'ready' | 'error'
+  /** Transport error message, when any. */
+  error: string | null
+}
+
+/** Store write set. */
+export type UsageUiActions = {
+  /** Replace the overview (poll result). */
+  setSnapshot: (draft: UsageUiState, snapshot: UsageOverviewView) => void
+  /** Mark the fetch lifecycle. */
+  setState: (draft: UsageUiState, status: UsageUiState['status'], error: string | null) => void
+}
+
+/** Create the usage store handle (apply world only; never module-level). */
+export function createUsageStore(): EngineStoreHandle<UsageUiState, UsageUiActions> {
+  return defineStore({
+    init: (): UsageUiState => ({
+      snapshot: null,
+      status: 'loading',
+      error: null,
+    }),
+    actions: {
+      setSnapshot: (draft, snapshot) => {
+        draft.snapshot = snapshot
+        draft.status = 'ready'
+        draft.error = null
+      },
+      setState: (draft, status, error) => {
+        draft.status = status
+        draft.error = error
+      },
+    },
+  })
+}
+
+export type UsageStoreInstance = EngineStoreInstance<UsageUiState, UsageUiActions>

package/src/client/usage.module.css

@@ -0,0 +1,311 @@
+/* dsh-usage settings section: quiet cards on the host surface tokens, no
+   framework style imports. Neutral grays follow the GUI text color so the
+   section reads on light and dark themes alike. */
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: inherit;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.currentProvider {
+  font-size: 13px;
+  opacity: 0.75;
+}
+
+.refreshBtn {
+  appearance: none;
+  border: 1px solid currentColor;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 12px;
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 120ms ease, background-color 120ms ease;
+}
+
+.refreshBtn:hover:not(:disabled) {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.refreshBtn:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.refreshBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+}
+
+.tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  padding: 6px 14px;
+  cursor: pointer;
+  opacity: 0.65;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.tab:hover {
+  opacity: 0.9;
+}
+
+.tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
+}
+
+.tabActive {
+  opacity: 1;
+  font-weight: 600;
+  border-bottom-color: currentColor;
+}
+
+.card {
+  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.cardTitle {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+
+.statRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.statValue {
+  font-size: 18px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.statLabel {
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+.providerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+  border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
+  font-size: 13px;
+}
+
+.providerRow:first-of-type {
+  border-top: none;
+}
+
+.providerName {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.providerTokens {
+  font-variant-numeric: tabular-nums;
+  opacity: 0.75;
+  white-space: nowrap;
+}
+
+.providerBalance {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.currentBadge {
+  font-size: 10px;
+  font-weight: 600;
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  border-radius: 999px;
+  padding: 1px 7px;
+  opacity: 0.8;
+  flex: none;
+}
+
+.trend {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 56px;
+}
+
+.trendBar {
+  flex: 1 1 0;
+  min-width: 4px;
+  border-radius: 3px 3px 0 0;
+  background: color-mix(in srgb, currentColor 30%, transparent);
+  min-height: 2px;
+}
+
+.trendBarToday {
+  background: color-mix(in srgb, currentColor 65%, transparent);
+}
+
+.trendAxis {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  opacity: 0.5;
+  font-variant-numeric: tabular-nums;
+}
+
+.muted {
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.errorLine {
+  font-size: 12px;
+  opacity: 0.75;
+}
+
+.planCard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.planHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.planName {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.windowRow {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.windowLabel {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  opacity: 0.8;
+  font-variant-numeric: tabular-nums;
+}
+
+.bar {
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  overflow: hidden;
+}
+
+.barFill {
+  height: 100%;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 55%, transparent);
+  transition: width 300ms ease;
+}
+
+.barWarn {
+  background: #d97706;
+}
+
+.barLow {
+  background: #dc2626;
+}
+
+.resetLine {
+  font-size: 11px;
+  opacity: 0.55;
+  font-variant-numeric: tabular-nums;
+}
+
+.settingsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+
+.settingItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.settingItem input[type='checkbox'] {
+  accent-color: currentColor;
+}
+
+.settingItem input[type='number'] {
+  width: 90px;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  padding: 3px 8px;
+}
+
+.settingItem select {
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  padding: 3px 8px;
+}
+
+.settingItem input:focus-visible,
+.settingItem select:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
+}