@goodandready/dsh-cost-meter 0.8.1 → 0.8.2

package/README.md

@@ -18,10 +18,20 @@
 
 <p align="center">
   <a href="README.md"><b>🇬🇧 English</b></a> •
-  <a href="docs/README.ru.md"><b>🇷🇺 Русский</b></a> •
-  <a href="docs/README.zh.md"><b>🇨🇳 中文说明</b></a>
+  <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
+  <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
 </p>
 
+<table align="center">
+  <tr>
+    <td align="center">
+      ⭐ <strong>If you like this plugin, please star it on GitHub</strong> — it shows me that the plugin is useful to you and motivates me to keep developing it.
+      <br><br>
+      🐛 <strong>If you find a bug or would like to request a feature</strong>, open a GitHub issue in any language — I will review your proposal and implement useful suggestions in a future plugin version.
+    </td>
+  </tr>
+</table>
+
 </div>
 
 ---
@@ -145,3 +155,9 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 - **Manual Catalog Sync**: On-demand catalog fetch via `POST /dsh-cost-meter/refresh` or UI "Sync Now" button.
 - **Savings Advice & Budget Threshold**: Popover hints on impending off-peak discounts (50% off) and optional warning thresholds (`budgetThreshold`).
 - **Quick Summary Export**: Instant markdown/text summary copy to clipboard.
+
+### UI Refinements & Language Standards (v0.8.2)
+- **Native Dot Status Indicator**: Header chip uses a refined status dot (green for off-peak, amber for peak, pulsing red for budget overrun, neutral for flat/idle) rather than full-fill backgrounds.
+- **Context Cache Savings**: Automatically calculates and highlights financial savings gained from prompt caching (e.g. `Cache saved: ≈ $0.14 (-68%)`).
+- **Multi-Model Accordion**: Clean collapsible list when 3 or more models are used in a single session.
+- **DSH Locale Standards**: Full English (`en`) and Chinese (`zh`) locale dictionaries registered directly in the client bundle. Russian translations are provided externally via `@goodandready/dsh-russian-lang`.

package/README.ru.md

@@ -0,0 +1,156 @@
+# 📦 @goodandready/dsh-cost-meter
+
+<div align="center">
+
+<h3>Чип стоимости сессии, переключатель пиковых тарифов и мониторинг расходов токенов для DeepSeek Harness</h3>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@goodandready/dsh-cost-meter"><img src="https://img.shields.io/npm/v/@goodandready/dsh-cost-meter.svg?style=for-the-badge&color=6366f1&labelColor=1e1b4b" alt="npm version"></a>
+  <a href="../LICENSE"><img src="https://img.shields.io/github/license/GooDAnDReaDY/dsh-cost-meter.svg?style=for-the-badge&color=10b981&labelColor=064e3b" alt="license"></a>
+  <a href="https://github.com/topics/dsh-plugin"><img src="https://img.shields.io/badge/DSH-Plugin-8b5cf6.svg?style=for-the-badge&labelColor=2e1065" alt="DSH Plugin"></a>
+  <a href="https://nodejs.org"><img src="https://img.shields.io/badge/Node-20%2B-f59e0b.svg?style=for-the-badge&labelColor=451a03" alt="Node version"></a>
+</p>
+
+<!-- Обязательная кнопка перехода на витрину всех проектов -->
+<p align="center">
+  <a href="https://goodandready.app/"><img src="https://img.shields.io/badge/Все_проекты_автора-goodandready.app-ff4500.svg?style=for-the-badge&logo=rocket&logoColor=white&labelColor=1a1a2e" alt="Все проекты автора"></a>
+</p>
+
+<p align="center">
+  <a href="README.md"><b>🇬🇧 English</b></a> •
+  <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
+  <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
+</p>
+
+<table align="center">
+  <tr>
+    <td align="center">
+      ⭐ <strong>Если вам нравится этот плагин, поставьте ему звезду на GitHub</strong> — это покажет мне, что плагин вам полезен, и будет мотивировать меня развивать его дальше.
+      <br><br>
+      🐛 <strong>Если вы нашли баг или хотите предложить новый функционал</strong>, создайте issue на GitHub на любом языке — я рассмотрю ваше предложение и реализую полезные идеи в одной из следующих версий плагина.
+    </td>
+  </tr>
+</table>
+
+</div>
+
+---
+
+## ⚡ Обзор и решаемая проблема
+
+Разработка с помощью ИИ-агентов и генерация кода требуют активного потребления токенов (промпты, рассуждения, контекстный кэш). Без непрерывного финансового контроля разработчики рискуют столкнуться с перерасходом бюджета или упустить окна 50% скидок внепикового тарифа.
+
+**`@goodandready/dsh-cost-meter`** встраивает компактный высокоточный телеметрический чип прямо в заголовок диалога DeepSeek Harness (`conversation.session.header.utilities`):
+
+```text
+● ≈ ₽8.55  0:17     ← Чип стоимости сессии в шапке с обратным отсчётом тарифа
+```
+
+По клику открывается интерактивная панель: тарифная сетка за 1M токенов (не-пик / пик с подсветкой активного режима), статус окон в UTC и детальная разбивка расходов текущей сессии по моделям.
+
+---
+
+## 🏛️ Архитектура
+
+```mermaid
+graph TD
+    subgraph StreamTelemetry ["Рантайм DeepSeek Harness"]
+        Req["Запрос LLM / Заголовок<br/>(provider, model)"]
+        StreamHook["Потоковые инкрементальные чанки"]
+        Proj["Проекция costByModel<br/>(30-минутные слоты UTC)"]
+    end
+
+    subgraph PricingCatalog ["Движок тарификации"]
+        Manual["Пользовательские цены<br/>(settings.yaml: prices)"]
+        DeepSeekTier["Сетка DeepSeek<br/>(Пик / 50% скидка не-пик)"]
+        OpenRouterTier["Каталог OpenRouter<br/>(Ежедневный кэш)"]
+    end
+
+    subgraph UI ["Интерфейс пользователя"]
+        Chip["Чип стоимости в шапке<br/>(Тариф + таймер смены)"]
+        Modal["Модальное окно разбивки<br/>(Ставки за 1M, окна UTC, модели)"]
+        Settings["Карточка настроек<br/>(Валюта, курс USD, таймзона)"]
+    end
+
+    Req --> Proj
+    StreamHook --> Proj
+    Proj --> Chip
+    PricingCatalog --> Proj
+    Manual --> PricingCatalog
+    DeepSeekTier --> PricingCatalog
+    OpenRouterTier --> PricingCatalog
+    Chip --> Modal
+```
+
+---
+
+## ✨ Ключевые возможности
+
+1. **Живой расчёт во время стриминга**: расчёт стоимости инкрементально обновляется в реальном времени прямо во время генерации ответа.
+2. **Двухуровневая сетка тарифов**: официальные пиковые окна DeepSeek (01:00–04:00 и 06:00–10:00 UTC) со скидкой 50% во внепиковое время.
+3. **Иммутабельность получасовых слотов UTC**: исторические расходы сессии фиксируются по ставке слота и не пересчитываются задним числом при смене тарифа.
+4. **Provider-aware тарификация**: раздельный учёт для прямых подключений DeepSeek и шлюзов OpenRouter.
+5. **Гибкая настройка валюты**: поддержка пользовательских символов валют (`₽`, `$`, `€`, `¥`), курсов конвертации и таймзон.
+
+---
+
+## 📦 Установка
+
+```bash
+dsh plugin --profile web add @goodandready/dsh-cost-meter
+```
+
+Перезапустите экземпляр DeepSeek Harness и обновите страницу в браузере.
+
+---
+
+## ⚙️ Таблица конфигурации (`settings.yaml`)
+
+```yaml
+dsh-cost-meter:
+  currency: "₽"
+  usdRate: 90.0
+  displayTimeZone: "Europe/Moscow"
+  useOpenRouter: true
+  prices: {}
+  modelMap: {}
+```
+
+### Параметры конфигурации
+
+| Параметр | Доступность | Тип | По умолчанию | Описание |
+|:---|:---|:---|:---|:---|
+| `currency` | GUI / `settings.yaml` | `string` | `"₽"` | Символ валюты в интерфейсе (например, `₽`, `$`, `€`) |
+| `usdRate` | GUI / `settings.yaml` | `number` | `80.0` | Курс обмена: единиц валюты за 1 USD |
+| `displayTimeZone` | GUI / `settings.yaml` | `string` | `"Europe/Moscow"` | IANA часовой пояс для отображения окон пика и не-пика |
+| `useOpenRouter` | GUI / `settings.yaml` | `boolean` | `true` | Загружать ли каталог тарифов и скидочных окон OpenRouter |
+| `refreshHours` | GUI / `settings.yaml` | `number` | `24` | Частота обновления каталога OpenRouter (в часах) |
+| `deepseekPeakPrices` | Только `settings.yaml` | `object` | `{}` | Переопределение встроенных пиковых ставок DeepSeek по id модели |
+| `prices` | Только `settings.yaml` | `object` | `{}` | Ручные ставки за 1M токенов `{ input, output, cacheHit?, cacheWrite? }` |
+| `modelMap` | Только `settings.yaml` | `object` | `{}` | Сопоставление маршрута `"provider/model"` на id в OpenRouter |
+| `manualPeakWindowsUtc` | Только `settings.yaml` | `array` | `[]` | Ручные окна пика HH:MM-HH:MM UTC для ручных ставок |
+| `manualOffPeakMultiplier` | Только `settings.yaml` | `number` | `1.0` | Коэффициент тарифа вне ручных окон пика |
+
+> **Интерфейс настроек (GUI) vs settings.yaml**: Основные параметры (`currency`, `usdRate`, `displayTimeZone`, `useOpenRouter`, `refreshHours`) настраиваются прямо в карточке интерфейса DSH (**Настройки → Плагины → Настройки плагинов → Cost Meter**). Расширенные структурированные правила сопоставления и ручных тарифов задаются через `settings.yaml` из-за сложной древовидной структуры.
+
+---
+
+## 🧪 Тестирование
+
+Запуск набора юнит-тестов:
+
+```bash
+npm test
+```
+
+---
+
+## 📄 Лицензия
+
+MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
+
+### Производительность и интеллектуальные подсказки (v0.8.1)
+- **Алгоритм O(K)**: Моментальный расчёт границ смены тарифов и мемоизация экстремумов без лишних циклов в браузере.
+- **Серверный кэш и ETag**: Поддержка заголовка `304 Not Modified` для маршрута `/state` и кэширование сопоставлений моделей.
+- **Ручная синхронизация**: Кнопка «Синхронизировать сейчас» в настройках с защитой от флуда (`POST /dsh-cost-meter/refresh`).
+- **Подсказки экономии и порог бюджета**: Отсчёт времени до льготного окна (скидка 50%), порог сессии (`budgetThreshold`) и экспорт сводки в буфер обмена.

package/README.zh.md

@@ -0,0 +1,144 @@
+# 📦 @goodandready/dsh-cost-meter
+
+<div align="center">
+
+<h3>面向 DeepSeek Harness 的会话实时花费计费芯片、波峰/波谷阶梯电价与 Token 监控插件</h3>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@goodandready/dsh-cost-meter"><img src="https://img.shields.io/npm/v/@goodandready/dsh-cost-meter.svg?style=for-the-badge&color=6366f1&labelColor=1e1b4b" alt="npm version"></a>
+  <a href="../LICENSE"><img src="https://img.shields.io/github/license/GooDAnDReaDY/dsh-cost-meter.svg?style=for-the-badge&color=10b981&labelColor=064e3b" alt="license"></a>
+  <a href="https://github.com/topics/dsh-plugin"><img src="https://img.shields.io/badge/DSH-Plugin-8b5cf6.svg?style=for-the-badge&labelColor=2e1065" alt="DSH Plugin"></a>
+  <a href="https://nodejs.org"><img src="https://img.shields.io/badge/Node-20%2B-f59e0b.svg?style=for-the-badge&labelColor=451a03" alt="Node version"></a>
+</p>
+
+<!-- 作者所有项目展示页面链接 -->
+<p align="center">
+  <a href="https://goodandready.app/"><img src="https://img.shields.io/badge/作者所有开源项目-goodandready.app-ff4500.svg?style=for-the-badge&logo=rocket&logoColor=white&labelColor=1a1a2e" alt="所有项目"></a>
+</p>
+
+<p align="center">
+  <a href="README.md"><b>🇬🇧 English</b></a> •
+  <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
+  <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
+</p>
+
+<table align="center">
+  <tr>
+    <td align="center">
+      ⭐ <strong>如果您喜欢这个插件，请在 GitHub 上为它点亮 Star</strong> — 这能让我知道插件对您有用，并鼓励我继续开发和维护它。
+      <br><br>
+      🐛 <strong>如果您发现 Bug 或希望增加功能</strong>，请使用任意语言在 GitHub 上提交 Issue — 我会评估您的建议，并在后续版本中实现有价值的改进。
+    </td>
+  </tr>
+</table>
+
+</div>
+
+---
+
+## ⚡ 概述与核心痛点
+
+在使用智能体与大语言模型编程时，模型推理、长上下文以及缓存读写会产生大量 Token 消耗。如果缺乏实时的财务监控，开发者容易错过官方 50% 闲时折扣窗口，或因死循环导致账单超出预算。
+
+**`@goodandready/dsh-cost-meter`** 在 DeepSeek Harness 会话顶部工具栏（`conversation.session.header.utilities`）无缝嵌入高精度花费微件芯片：
+
+```text
+● ≈ ¥0.85  0:17     ← 会话顶部实时花费芯片与换价倒计时
+```
+
+点击芯片可展开交互式详情面板：按每 1M Token 展示峰谷两档费率表格（高亮显示当前激活档位）、UTC 优惠时间段状态以及各模型在当前会话中的累计消费明细。
+
+---
+
+## 🏛️ 架构设计
+
+```mermaid
+graph TD
+    subgraph StreamTelemetry ["DSH 流式遥测运行时"]
+        Req["LLM 请求 / 报头<br/>(provider, model)"]
+        StreamHook["增量流式分片 Hook"]
+        Proj["costByModel 会话投影<br/>(半小时 UTC 时隙)"]
+    end
+
+    subgraph PricingCatalog ["费率解析引擎"]
+        Manual["自定义费率配置<br/>(settings.yaml: prices)"]
+        DeepSeekTier["DeepSeek 官方费率<br/>(高峰 / 闲时 50% 折扣)"]
+        OpenRouterTier["OpenRouter 公开目录<br/>(每日自动缓存)"]
+    end
+
+    subgraph UI ["用户交互界面"]
+        Chip["顶部花费芯片<br/>(实时计费 + 换价倒计时)"]
+        Modal["消费明细抽屉面板<br/>(1M 单价表, UTC 时段, 模型清单)"]
+        Settings["设置卡片<br/>(币种符号, 汇率, 时区)"]
+    end
+
+    Req --> Proj
+    StreamHook --> Proj
+    Proj --> Chip
+    PricingCatalog --> Proj
+    Manual --> PricingCatalog
+    DeepSeekTier --> PricingCatalog
+    OpenRouterTier --> PricingCatalog
+    Chip --> Modal
+```
+
+---
+
+## ✨ 核心特性
+
+1. **增量流式实时计算**：在模型打字生成过程中毫秒级更新 Prompt、Completion 和 Cache 费用，无轮询无卡顿。
+2. **两级阶梯电价引擎**：支持 DeepSeek 官方高峰时段（UTC 01:00–04:00 与 06:00–10:00）及闲时 50% 优惠折扣自动匹配。
+3. **UTC 半小时时隙不可变性**：历史消费严格锁定在消耗发生时刻的时隙费率，切换费率不溯及既往。
+4. **服务商智能路由**：精准区分直连 DeepSeek 服务商与 OpenRouter 等代理网关。
+5. **多币种与本地化**：支持自定义货币符号（`¥`, `$`, `€`, `₽`）、汇率换算与显示时区。
+
+---
+
+## 📦 快速安装
+
+```bash
+dsh plugin --profile web add @goodandready/dsh-cost-meter
+```
+
+重启 DeepSeek Harness 实例并刷新浏览器页面。
+
+---
+
+## ⚙️ 配置项说明 (`settings.yaml`)
+
+```yaml
+dsh-cost-meter:
+  currency: "¥"
+  usdRate: 7.2
+  displayTimeZone: "Asia/Shanghai"
+  useOpenRouter: true
+  prices: {}
+  modelMap: {}
+```
+
+### 配置参数列表
+
+| 参数项 | 类型 | 默认值 | 说明 |
+|:---|:---|:---|:---|
+| `currency` | `string` | `"¥"` | 显示的货币符号或代码 |
+| `usdRate` | `number` | `7.2` | 美元到目标货币的换算汇率 |
+| `displayTimeZone` | `string` | `"Asia/Shanghai"` | 界面中优惠时间段显示的参考时区 |
+| `useOpenRouter` | `boolean` | `true` | 是否加载 OpenRouter 价格表作为备用 |
+| `prices` | `object` | `{}` | 自定义每 1M Token 的费率覆盖 |
+| `modelMap` | `object` | `{}` | 模型别名映射表 |
+
+---
+
+## 🧪 自动化测试
+
+运行单元测试套件：
+
+```bash
+npm test
+```
+
+---
+
+## 📄 许可证
+
+MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)

package/docs/README.ru.md

@@ -17,11 +17,21 @@
 </p>
 
 <p align="center">
-  <a href="../README.md"><b>🇬🇧 English</b></a> •
+  <a href="README.md"><b>🇬🇧 English</b></a> •
   <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
   <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
 </p>
 
+<table align="center">
+  <tr>
+    <td align="center">
+      ⭐ <strong>Если вам нравится этот плагин, поставьте ему звезду на GitHub</strong> — это покажет мне, что плагин вам полезен, и будет мотивировать меня развивать его дальше.
+      <br><br>
+      🐛 <strong>Если вы нашли баг или хотите предложить новый функционал</strong>, создайте issue на GitHub на любом языке — я рассмотрю ваше предложение и реализую полезные идеи в одной из следующих версий плагина.
+    </td>
+  </tr>
+</table>
+
 </div>
 
 ---
@@ -144,3 +154,9 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 - **Серверный кэш и ETag**: Поддержка заголовка `304 Not Modified` для маршрута `/state` и кэширование сопоставлений моделей.
 - **Ручная синхронизация**: Кнопка «Синхронизировать сейчас» в настройках с защитой от флуда (`POST /dsh-cost-meter/refresh`).
 - **Подсказки экономии и порог бюджета**: Отсчёт времени до льготного окна (скидка 50%), порог сессии (`budgetThreshold`) и экспорт сводки в буфер обмена.
+
+### Визуальные улучшения и языковой стандарт (v0.8.2)
+- **Нативный точечный индикатор**: В шапке используется аккуратная статусная точка (зелёная — скидка 50%, янтарная — пик, красная пульсирующая — превышен бюджет).
+- **Строка экономии кэша**: Отображение сэкономленных средств за счёт кэша контекста (например: `Кэш сэкономил: ≈ $0.14 (-68%)`).
+- **Компактный список моделей**: Аккордеон со сворачиванием списка при использовании 3+ моделей в сессии.
+- **Стандарт локализации DSH**: Встроенные словари `en` и `zh`. Русский язык предоставляется через `dsh-russian-lang`.

package/docs/README.zh.md

@@ -17,11 +17,21 @@
 </p>
 
 <p align="center">
-  <a href="../README.md"><b>🇬🇧 English</b></a> •
+  <a href="README.md"><b>🇬🇧 English</b></a> •
   <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
   <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
 </p>
 
+<table align="center">
+  <tr>
+    <td align="center">
+      ⭐ <strong>如果您喜欢这个插件，请在 GitHub 上为它点亮 Star</strong> — 这能让我知道插件对您有用，并鼓励我继续开发和维护它。
+      <br><br>
+      🐛 <strong>如果您发现 Bug 或希望增加功能</strong>，请使用任意语言在 GitHub 上提交 Issue — 我会评估您的建议，并在后续版本中实现有价值的改进。
+    </td>
+  </tr>
+</table>
+
 </div>
 
 ---
@@ -132,3 +142,9 @@ npm test
 ## 📄 许可证
 
 MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
+
+### 界面优化与语言规范 (v0.8.2)
+- **原生状态圆点指示器**：顶部芯片采用更精简的原生状态圆点（绿色代表低谷优惠，琥珀色代表高峰，红色脉冲代表超出预算上限，灰色代表平价/空闲）。
+- **上下文缓存节省提示**：自动计算并高亮显示命中提示词缓存所节省的费用（例如：`上下文缓存节省：≈ $0.14 (-68%)`）。
+- **多模型折叠列表**：当单次会话中使用 3 个或更多模型时，提供紧凑的可折叠模型明细展示。
+- **DSH 规范双语支持**：插件内置完整的英文（`en`）与中文（`zh`）语言字典。

package/docs/design/DESIGN.md

@@ -86,6 +86,12 @@
   - Не допускать утечек локальных путей и инфраструктурных данных в коде или документации.
 
 ## History & Decisions
+- 2026-09-13 (v0.8.2):
+  - Приведение к стандарту локализации DSH (dsh-plugin-authoring): английский (en) — исходный и fallback-язык, китайский (zh) — обязательная пользовательская локаль. Русский словарь вынесен из плагина; все строки для русского интерфейса переданы в goodandready/dsh-russian-lang.
+  - Нативный точечный dot-индикатор статуса чипа в шапке (.dcm-dot): зеленый (off-peak), янтарный (peak), красный пульсирующий (budget exceeded), серый (idle/unknown).
+  - Адаптивное скрытие таймера чипа на экранах < 680px при сохранении суммы расхода.
+  - Расчёт и отображение выгоды от контекстного кэша (Cache Savings): строка 'Cache saved: ≈ $X.XX (-Y%)' при наличии cacheReadTokens.
+  - Компактный список моделей с аккордеоном при 3+ задействованных моделях сессии.
 - 2026-09-12 (v0.8.1):
   - Оптимизация производительности расчёта тарифов: замена 1440-минутного цикла на алгоритм O(K) по точкам перехода и мемоизация экстремумов через WeakMap.
   - Серверный кэш разрешения тарифов resolveTariffCache (Map) с автоматической очисткой при обновлении каталога.

package/docs/plans/findings.md

@@ -1,17 +1,13 @@
-# Findings: Issue #25 (v0.8.1)
+# Findings: Issue #27 (v0.8.2)
 
-## 1. Клиентские вычисления расписания
-- В `lib/client.js`: `extremes()` и `minutesUntilChange()` вызывались на каждом тике таймера (15 сек) и перерисовывали 1440-минутный цикл:
-  `for (let minute = 0; minute < 1440; minute++)` с поиском в `windows`.
-- В сутках конечное число окон $K$ (обычно 2–4). Смена тарифа может происходить только на границах интервалов: `window.start` и `window.end`.
-- Замена на $O(K)$ даёт мгновенный расчёт без аллокации сотен объектов в секунду при активных сессиях.
+## 1. Точечный индикатор статуса
+- Сплошной яркий фон чипа в тулбаре DSH перетягивает на себя внимание от основного чата.
+- Нативный паттерн DSH: нейтральный полупрозрачный фон с цветной точкой (dot indicator 6x6px) и моноширинным текстом `tabular-nums`.
 
-## 2. Разрешение тарифов на сервере
-- `resolveTariff(cfg, catalog.index, route)` перебирает регулярные выражения и суффиксы.
-- Кэширование в `Map<string, ResolvedTariff>` с очисткой при обновлении каталога полностью снимает нагрузку на CPU при частом пуллинге `/state` клиентами DSH.
+## 2. Экономия кэша (Cache Savings)
+- При использовании кэша провайдера (DeepSeek, Claude, Gemini) стоимость `cacheReadTokens` значительно ниже `uncachedInputTokens` (у DeepSeek: $0.014 vs $0.14-$0.44 за 1M токенов).
+- Разница между стоимостью токенов без кэша (`cacheReadTokens * inputRate`) и фактической стоимостью (`cacheReadTokens * cacheHitRate`) наглядно демонстрирует реальную экономию пользователя прямо в поповере.
 
-## 3. Поддержка ETag
-- Для `/dsh-cost-meter/state` генерация слабого ETag (`W/"<hash>"`) на основе `updatedAt`, `fetchedAt` и счетчиков токенов позволяет клиентам передавать `If-None-Match` и получать `304 Not Modified`, экономя полосу пропускания и парсинг JSON.
-
-## 4. Алиасы вендоров
-- Разные провайдеры в DSH могут передавать вендоров как `z-ai`, `zai`, `google`, `gemini`, `deepseek-ai`, `deepseek`. Единая нормализация исключит ситуации fallback на generic тариф.
+## 3. Стандарт локализации
+- По стандарту DSH (`dsh-plugin-authoring`, `dhs-plugin-release-workflow`), плагин обязан иметь `en` как канонический исходный и `zh` как обязательную локаль.
+- Русский перевод не зашивается в плагин, а поставляется через отдельный плагин `dsh-russian-lang`. Для синхронизации перевода открывается issue в репозитории `goodandready/dsh-russian-lang`.

package/docs/plans/progress.md

@@ -1,12 +1,12 @@
-# Progress: Issue #25 (v0.8.1)
+# Progress: Issue #27 (v0.8.2)
 
-- **2026-09-12 19:10**:
-  - Создана Gitea Issue #25.
-  - Создан worktree `.worktrees/issue-25` от `origin/main` (ветка `feat/issue-25-perf-and-smart-features`).
-  - Инициализированы планы в `docs/plans/`.
+- **2026-09-13 15:06**:
+  - Создана Gitea Issue #27.
+  - Развернут worktree `.worktrees/issue-27` на ветке `feat/issue-27-ui-and-locales`.
+  - Зафиксированы планы и стандарты в `docs/plans/`.
 
-- **2026-09-12 19:16**:
-  - Реализованы оптимизации в `lib/index.js` (resolveTariffCache, ETag / 304, POST /refresh, budgetThreshold, VENDOR_ALIASES).
-  - Реализованы улучшения в `lib/client.js` (O(K) minutesUntilChange, memoized extremes, кнопка синхронизации с cooldown, порог бюджета, плашка экономии, копирование сводки).
-  - Добавлены тесты в `test/v081-perf-smart.test.mjs` (все 20 тестов успешно пройдены).
-  - Версия поднята до `0.8.1`.
+- **2026-09-13 15:08**:
+  - Реализованы улучшения в `lib/client.js` (dot status indicator, cache savings display, multi-model accordion, en/zh locales).
+  - Добавлены тесты в `test/v082-ui-locales.test.mjs` (все 22 теста успешно пройдены).
+  - Версия обновлена до `0.8.2`.
+  - Документация актуализирована на en, zh, ru.

package/docs/plans/task_plan.md

@@ -1,31 +1,31 @@
-# Task Plan: Issue #25 (v0.8.1) — Оптимизация производительности, ручная синхронизация каталога и подсказки экономии
+# Task Plan: Issue #27 (v0.8.2) — Визуальная индикация шапки/поповера и стандарт локализации en/zh
 
 ## Цели
-1. **Скорость**:
-   - Оптимизация алгоритма расчета времени смены тарифа (`minutesUntilChange`) и экстремумов (`extremes`) с $O(1440)$ до $O(K)$ без полного минутного цикла.
-   - Серверный кэш `resolveTariffCache` для быстрого разрешения моделей.
-   - Поддержка ETag / 304 Not Modified на эндпоинте `/dsh-cost-meter/state`.
-2. **Качество и управление**:
-   - Маршрут `POST /dsh-cost-meter/refresh` с rate limit (cooldown 30 сек) и кнопка «Синхронизировать сейчас» в настройках.
-   - Таблица нормализации алиасов вендоров (Smart Vendor Aliases).
-   - Индикация stale-кэша каталога в UI.
-3. **Экономия**:
-   - Подсказка в поповере о приближении льготного тарифа (50% скидка).
-   - Конфигурируемый порог сессии `budgetThreshold` с предупреждающей подсветкой чипа.
-   - Кнопка «Скопировать сводку» в поповере.
-4. **Стандарты и релиз**:
-   - 100% прохождение тестов `npm test`.
-   - Проверка размера файлов (< 256 KiB).
-   - Тестирование на test server (MiniPC :3082), затем на MiniAI candidate (:3080).
-   - Запрос подтверждения пользователя -> публикация v0.8.1 в npm/GitHub -> rollout на прод.
+1. **Визуальные улучшения шапки и поповера**:
+   - Чип в шапке: точечный dot-индикатор (зеленый/янтарный/красный/серый) вместо сплошного фона, аккуратная интеграция с тулбаром DSH.
+   - Адаптивное скрытие таймера на узких экранах, сохранение суммы.
+   - Индикация экономии контекстного кэша (Cache Savings): строка `Cache saved: ≈ $X.XX (-Y%)`.
+   - Компактный список/аккордеон при нескольких моделях сессии (3+ модели).
+   - Точные нативные токены тем DSH.
+2. **Стандарт локализации DSH**:
+   - Исходный и fallback язык: `en`.
+   - Обязательная локаль: `zh` (полный набор эквивалентных ключей).
+   - Исключение зашитого `ru` словаря из плагина.
+   - Создание Issue в `goodandready/dsh-russian-lang` со всеми строками для русского перевода.
+3. **Документация и релиз**:
+   - Версия `0.8.2` (инкремент только `z`).
+   - Актуализация `docs/design/DESIGN.md`, `README.md` (en), `docs/README.zh.md` (zh), `docs/README.ru.md` (ru).
+   - 100% покрытие unit-тестами без внешних зависимостей.
+   - Валидация на test server (`:3082`) и на production (`:3080`).
+   - Запрос подтверждения -> публикация v0.8.2.
 
 ## Статус выполнения
-- [x] Issue #25 создана
-- [x] Worktree `.worktrees/issue-25` развёрнут
-- [x] Реализация серверной части (`lib/index.js`)
-- [x] Реализация клиентской части (`lib/client.js`)
-- [x] Добавление unit-тестов в `test/`
-- [x] Обновление документации (`DESIGN.md`, `README.md`, `README.ru.md`)
-- [ ] Тестирование на стендах (:3082, :3080)
-- [ ] Публикация релиза v0.8.1
-- [ ] Закрытие Issue #25 и очистка worktree
+- [x] Issue #27 создана
+- [x] Worktree `.worktrees/issue-27` развернут
+- [x] Реализация `lib/client.js` (UI шапки/поповера, расчет cache savings, словари en/zh)
+- [x] Обновление тестов в `test/`
+- [x] Обновление документации (`DESIGN.md`, `README.md`, `README.zh.md`, `README.ru.md`)
+- [ ] Регистрация Issue в `goodandready/dsh-russian-lang`
+- [ ] Сборка и приёмка кандидата (:3082, :3080)
+- [ ] Публикация релиза v0.8.2
+- [ ] Закрытие Issue #27 и cleanup worktree

package/lib/client.js

@@ -1,6 +1,7 @@
 // dsh-cost-meter — client half.
 // Self-registering browser module for DeepSeek Harness.
-// Unified design system aligned with @goodandready/dsh-clinebot.
+// Unified design system aligned with @goodandready/dsh-clinebot and DSH tokens.
+// Canonical languages: English (en) and Chinese (zh).
 
 window.__ModuleLoader__.load({
   id: '@goodandready/dsh-cost-meter',
@@ -16,62 +17,6 @@ window.__ModuleLoader__.load({
 
     // ----------------------------------------------------------- localization
 
-    const ru = {
-      title: 'Учёт расходов',
-      subtitle: 'Тариф моделей, окна пиковых цен и стоимость сессии',
-      'header.title': 'Учёт расходов (Cost Meter)',
-      'header.sub': 'Мониторинг расходов токенов, автоматическое сопоставление тарифов и скидочных окон',
-      'badge.catalog_ok': 'Каталог: {count} моделей',
-      'badge.catalog_empty': 'Каталог: загрузка…',
-      'badge.catalog_off': 'Каталог: выключен',
-      'badge.catalog_err': 'Каталог: ошибка',
-      'badge.catalog_stale': 'Кэш: офлайн',
-      'badge.deepseek': 'Тариф DeepSeek: активен',
-      'section.general': 'Основные параметры',
-      'section.general_desc': 'Отображение валюты, курса пересчёта, лимита бюджета и часового пояса',
-      'section.openrouter': 'Каталог цен OpenRouter',
-      'section.openrouter_desc': 'Публичный каталог моделей для автоматического определения ставок и окон скидок',
-      'section.diagnostics': 'Диагностика и статус',
-      'section.diagnostics_desc': 'Текущее состояние фоновой синхронизации и кэша тарифов',
-      'diag.models_count': 'Моделей в каталоге',
-      'diag.last_sync': 'Последняя синхронизация',
-      'diag.route': 'Активный маршрут',
-      'diag.tariff_source': 'Источник тарифа',
-      'field.currency': 'Символ валюты',
-      'hint.currency': 'Символ валюты для отображения расходов (например, $, ₽, €).',
-      'field.usdRate': 'Курс валюты к USD',
-      'hint.usdRate': 'Количество единиц вашей валюты за 1 USD (1 для долларов).',
-      'field.budgetThreshold': 'Порог бюджета сессии (USD)',
-      'hint.budgetThreshold': 'Оповещать цветом чипа при превышении суммы за сессию (0 — выключено).',
-      'field.displayTimeZone': 'Временная зона (IANA)',
-      'hint.displayTimeZone': 'Временная зона для отображения пиковых окон (например, Europe/Moscow, UTC).',
-      'field.useOpenRouter': 'Использовать каталог OpenRouter',
-      'hint.useOpenRouter': 'Автоматически загружать ставки и скидочные окна для моделей через OpenRouter API.',
-      'field.refreshHours': 'Период обновления каталога (часов)',
-      'hint.refreshHours': 'Интервал фонового обновления каталога в часах (от 1 до 168).',
-      'action.sync_now': 'Синхронизировать сейчас',
-      'action.syncing': 'Синхронизация…',
-      'action.sync_ok': 'Каталог обновлён',
-      'action.sync_err': 'Ошибка синхронизации',
-      'action.sync_rate_limited': 'Подождите {seconds} сек',
-      'action.copy_report': 'Скопировать сводку',
-      'action.copied': 'Скопировано!',
-      'savings.hint': '💡 Скидка 50% начнётся через {time} ({clock} {zone})',
-      'budget.exceeded': '⚠️ Превышен лимит сессии: {limit}',
-      'settings.save': 'Сохранить настройки',
-      'settings.saving': 'Сохранение…',
-      'settings.saved': 'Настройки успешно сохранены',
-      'settings.saveFailed': 'Ошибка сохранения: ',
-      'settings.loading': 'Загрузка настроек…',
-      'settings.unavailable': 'Настройки временно недоступны',
-      'settings.retry': 'Повторить попытку',
-      chipUnknown: 'Тариф не определён',
-      routeUnknown: 'Маршрут не определён',
-      catalogUnavailable: 'Каталог недоступен: ',
-      peak: 'пик',
-      offpeak: 'не-пик',
-    }
-
     const en = {
       title: 'Cost Meter',
       subtitle: 'Model rates, peak discount windows and session spend',
@@ -94,13 +39,13 @@ window.__ModuleLoader__.load({
       'diag.route': 'Active route',
       'diag.tariff_source': 'Tariff source',
       'field.currency': 'Currency Symbol',
-      'hint.currency': 'Currency symbol shown in the UI (e.g. $, ₽, €).',
+      'hint.currency': 'Currency symbol shown in the UI (e.g. $, ¥, €).',
       'field.usdRate': 'USD Exchange Rate',
       'hint.usdRate': 'Units of currency per 1 USD (1 keeps USD).',
       'field.budgetThreshold': 'Session Budget Threshold (USD)',
       'hint.budgetThreshold': 'Warn via chip color when session spend exceeds this amount (0 disables).',
       'field.displayTimeZone': 'Time Zone (IANA)',
-      'hint.displayTimeZone': 'IANA time zone for peak hours display (e.g. Europe/Moscow, UTC).',
+      'hint.displayTimeZone': 'IANA time zone for peak hours display (e.g. Europe/Moscow, Asia/Shanghai, UTC).',
       'field.useOpenRouter': 'Use OpenRouter Catalog',
       'hint.useOpenRouter': 'Pull rates and discount windows dynamically from public OpenRouter API.',
       'field.refreshHours': 'Catalog Refresh Interval (hours)',
@@ -113,7 +58,10 @@ window.__ModuleLoader__.load({
       'action.copy_report': 'Copy Summary',
       'action.copied': 'Copied!',
       'savings.hint': '💡 50% discount starts in {time} ({clock} {zone})',
+      'savings.cache_saved': '⚡ Context cache saved: ≈ {amount} ({percent}%)',
       'budget.exceeded': '⚠️ Budget limit exceeded: {limit}',
+      'models.show_more': 'Show all {count} models',
+      'models.show_less': 'Show fewer',
       'settings.save': 'Save Settings',
       'settings.saving': 'Saving…',
       'settings.saved': 'Settings saved successfully',
@@ -126,6 +74,89 @@ window.__ModuleLoader__.load({
       catalogUnavailable: 'Catalog unavailable: ',
       peak: 'peak',
       offpeak: 'off-peak',
+      'rate.per_1m': '1M tokens, $',
+      'rate.cache_hit': 'Input (cache hit)',
+      'rate.input': 'Input (cache miss)',
+      'rate.cache_write': 'Input (cache write)',
+      'rate.output': 'Output',
+      'tokens.session': 'Session Tokens',
+      'tokens.tokens_col': 'Tokens',
+      'tokens.models_spent': 'Spend by Model',
+      'tokens.session_total': 'Session total:',
+      'tokens.no_usage_yet': 'Provider has not reported usage for this session yet.',
+      'tokens.not_priced': 'Not priced',
+      'tz.invalid': 'Invalid IANA time zone identifier',
+    }
+
+    const zh = {
+      title: '成本计量器',
+      subtitle: '模型费率、高峰优惠窗口与会话消费统计',
+      'header.title': '成本计量器 (Cost Meter)',
+      'header.sub': 'Token 消费监控、费率自动匹配与折扣窗口管理',
+      'badge.catalog_ok': '目录：{count} 个模型',
+      'badge.catalog_empty': '目录：加载中…',
+      'badge.catalog_off': '目录：已禁用',
+      'badge.catalog_err': '目录：错误',
+      'badge.catalog_stale': '缓存：离线',
+      'badge.deepseek': 'DeepSeek 费率：生效中',
+      'section.general': '基础参数',
+      'section.general_desc': '显示货币、汇率转换、预算阈值与时区设置',
+      'section.openrouter': 'OpenRouter 定价目录',
+      'section.openrouter_desc': '用于自动获取模型价格与折扣窗口的公开价格目录',
+      'section.diagnostics': '诊断与状态',
+      'section.diagnostics_desc': '后台同步与费率缓存当前状态',
+      'diag.models_count': '目录中模型数',
+      'diag.last_sync': '上次同步',
+      'diag.route': '当前路由',
+      'diag.tariff_source': '费率来源',
+      'field.currency': '货币符号',
+      'hint.currency': '界面中显示的货币符号（例如：$、¥、€）。',
+      'field.usdRate': 'USD 汇率',
+      'hint.usdRate': '每 1 美元对应的本币金额（1 为美元）。',
+      'field.budgetThreshold': '会话预算阈值 (USD)',
+      'hint.budgetThreshold': '当会话消费超出该金额时在状态指示器报警（0 表示禁用）。',
+      'field.displayTimeZone': '时区 (IANA)',
+      'hint.displayTimeZone': '显示高峰时段的 IANA 时区（例如：Asia/Shanghai、UTC）。',
+      'field.useOpenRouter': '使用 OpenRouter 目录',
+      'hint.useOpenRouter': '通过公开的 OpenRouter API 自动拉取费率与折扣窗口。',
+      'field.refreshHours': '目录刷新周期 (小时)',
+      'hint.refreshHours': '后台刷新价格目录的时间间隔（1 至 168 小时）。',
+      'action.sync_now': '立即同步',
+      'action.syncing': '同步中…',
+      'action.sync_ok': '目录已更新',
+      'action.sync_err': '同步失败',
+      'action.sync_rate_limited': '请等待 {seconds} 秒',
+      'action.copy_report': '复制消费报告',
+      'action.copied': '已复制！',
+      'savings.hint': '💡 5 折优惠将在 {time} 后生效 ({clock} {zone})',
+      'savings.cache_saved': '⚡ 上下文缓存节省：≈ {amount} ({percent}%)',
+      'budget.exceeded': '⚠️ 已超出预算上限：{limit}',
+      'models.show_more': '查看全部 {count} 个模型',
+      'models.show_less': '收起',
+      'settings.save': '保存设置',
+      'settings.saving': '保存中…',
+      'settings.saved': '设置已成功保存',
+      'settings.saveFailed': '保存设置失败：',
+      'settings.loading': '加载设置中…',
+      'settings.unavailable': '设置暂时不可用',
+      'settings.retry': '重试',
+      chipUnknown: '费率未知',
+      routeUnknown: '路由未知',
+      catalogUnavailable: '价格目录不可用：',
+      peak: '高峰',
+      offpeak: '低谷',
+      'rate.per_1m': '每 1M tokens ($)',
+      'rate.cache_hit': '输入 (命中缓存)',
+      'rate.input': '输入 (未命中)',
+      'rate.cache_write': '输入 (写入缓存)',
+      'rate.output': '输出',
+      'tokens.session': '会话 Tokens',
+      'tokens.tokens_col': 'Tokens 数',
+      'tokens.models_spent': '各模型消费',
+      'tokens.session_total': '会话总计：',
+      'tokens.no_usage_yet': '提供商尚未报告当前会话的用量数据。',
+      'tokens.not_priced': '未定价',
+      'tz.invalid': '无效的 IANA 时区标识',
     }
 
     function makeT(dict, fallback) {
@@ -144,8 +175,12 @@ window.__ModuleLoader__.load({
       const localeService = (ctx && typeof ctx.get === 'function' ? ctx.get('locale') : null) || (ctx && ctx.locale) || (ctx && ctx.services && ctx.services.locale)
       return React.useSyncExternalStore(
         React.useMemo(() => (cb) => (localeService && typeof localeService.subscribe === 'function' ? localeService.subscribe(cb) : () => {}), [localeService]),
-        React.useCallback(() => (localeService && typeof localeService.getSnapshot === 'function' ? localeService.getSnapshot().active : 'ru'), [localeService]),
-        React.useCallback(() => 'ru', []),
+        React.useCallback(() => {
+          const snap = localeService && typeof localeService.getSnapshot === 'function' ? localeService.getSnapshot() : null
+          const active = snap ? (snap.active || snap.locale || 'en') : 'en'
+          return String(active).startsWith('zh') ? 'zh' : 'en'
+        }, [localeService]),
+        React.useCallback(() => 'en', []),
       )
     }
 
@@ -190,6 +225,7 @@ window.__ModuleLoader__.load({
 .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-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; }
@@ -197,26 +233,39 @@ window.__ModuleLoader__.load({
 
 .dcm-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 6px; }
 
-.dcm-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 22px; transition: opacity .15s ease; }
-.dcm-chip:hover { opacity: 0.88; }
-.dcm-chip-budget-warn { animation: dcm-pulse 2s infinite ease-in-out; }
-@keyframes dcm-pulse { 0%, 100% { border-color: rgba(239,68,68,0.4); } 50% { border-color: rgba(239,68,68,0.9); } }
+/* 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-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-chip-timer { opacity: 0.72; font-size: 11px; padding-left: 2px; border-left: 1px solid var(--dsw-alias-border-l2); }
+@media (max-width: 680px) {
+  .dcm-chip-timer { display: none; }
+}
 
-.dcm-panel { position: absolute; top: 28px; right: 0; z-index: 40; width: 330px; 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 30px rgba(0,0,0,.28); 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: 4px; font-size: 13px; }
+@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-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; }
-.dcm-panel-grid { display: grid; grid-template-columns: 1fr 60px 60px; column-gap: 6px; align-items: center; }
-.dcm-panel-grid-flat { display: grid; grid-template-columns: 1fr 72px; column-gap: 6px; align-items: center; }
-.dcm-panel-grid-3 { display: grid; grid-template-columns: 1fr 58px 72px; column-gap: 6px; align-items: center; }
+.dcm-panel-grid { display: grid; grid-template-columns: 1fr 62px 62px; column-gap: 6px; align-items: center; }
+.dcm-panel-grid-flat { display: grid; grid-template-columns: 1fr 76px; column-gap: 6px; align-items: center; }
+.dcm-panel-grid-3 { display: grid; grid-template-columns: 1fr 60px 74px; column-gap: 6px; align-items: center; }
 .dcm-th { color: var(--dsw-alias-label-tertiary); padding-bottom: 4px; font-size: 11px; }
 .dcm-th-num { color: var(--dsw-alias-label-tertiary); padding-bottom: 4px; text-align: right; font-size: 11px; }
-.dcm-td { padding: 3px 0; }
+.dcm-td { padding: 3.5px 0; color: var(--dsw-alias-label-secondary); }
 .dcm-cell-idle { text-align: right; padding: 3px 6px; border-radius: 4px; color: var(--dsw-alias-label-tertiary); }
-.dcm-num { text-align: right; color: var(--dsw-alias-label-tertiary); padding: 3px 0; }
-.dcm-cost { text-align: right; padding: 3px 0; }
+.dcm-num { text-align: right; color: var(--dsw-alias-label-tertiary); padding: 3.5px 0; }
+.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: 13px; }
+.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:hover { text-decoration: underline; }
 `
 
     function ensureStyles() {
@@ -324,13 +373,14 @@ window.__ModuleLoader__.load({
       }
     }
 
-    function ago(timestamp) {
-      if (!timestamp) return 'нет данных'
+    function ago(timestamp, locale) {
+      if (!timestamp) return '—'
+      const isZh = locale === 'zh'
       const minutes = Math.max(0, Math.round((Date.now() - timestamp) / 60000))
-      if (minutes < 1) return 'только что'
-      if (minutes < 60) return minutes + ' мин назад'
+      if (minutes < 1) return isZh ? '刚刚' : 'just now'
+      if (minutes < 60) return minutes + (isZh ? ' 分钟前' : ' min ago')
       const hours = Math.round(minutes / 60)
-      return hours < 48 ? hours + ' ч назад' : Math.round(hours / 24) + ' дн назад'
+      return hours < 48 ? hours + (isZh ? ' 小时前' : ' hrs ago') : Math.round(hours / 24) + (isZh ? ' 天前' : ' days ago')
     }
 
     // ---------------------------------------------------------------- card
@@ -338,7 +388,7 @@ window.__ModuleLoader__.load({
     function CostMeterCard(props) {
       const ctx = props.ctx
       const locale = useActiveLocale(ctx)
-      const t = props.t || makeT(locale === 'ru' ? ru : en, en)
+      const t = props.t || makeT(locale === 'zh' ? zh : en, en)
       const [open, setOpen] = React.useState(false)
       const [draft, setDraft] = React.useState(null)
       const [saving, setSaving] = React.useState(false)
@@ -563,7 +613,7 @@ window.__ModuleLoader__.load({
                           onChange: (e) => setDraft({ ...draft, displayTimeZone: e.target.value }),
                         }),
                         React.createElement('span', { className: 'dcm-hint' },
-                          tzValid ? t('hint.displayTimeZone') : 'Некорректный идентификатор временной зоны IANA'
+                          tzValid ? t('hint.displayTimeZone') : t('tz.invalid')
                         ),
                       ),
                     ),
@@ -622,7 +672,7 @@ window.__ModuleLoader__.load({
                       ),
                       React.createElement('div', { className: 'dcm-stat-box' },
                         React.createElement('span', { className: 'dcm-stat-val' },
-                          diagState ? ago(diagState.fetchedAt) : '—'
+                          diagState ? ago(diagState.fetchedAt, locale) : '—'
                         ),
                         React.createElement('span', { className: 'dcm-stat-lbl' }, t('diag.last_sync')),
                       ),
@@ -669,14 +719,10 @@ window.__ModuleLoader__.load({
       return (schedule && schedule.base) || { cacheHit: 0, input: 0, cacheWrite: 0, output: 0 }
     }
 
-    /**
-     * Fast O(K) lookup of next tariff rate boundary instead of a 1440-minute loop.
-     */
     function minutesUntilChange(schedule, minute) {
       const windows = (schedule && schedule.windows) || []
       if (!windows.length) return null
       const now = ratesAt(schedule, minute)
-      // Transition points can only occur at window start or window end
       const transitions = new Set()
       for (const w of windows) {
         transitions.add(w.start % DAY)
@@ -694,9 +740,6 @@ window.__ModuleLoader__.load({
       return minDiff
     }
 
-    /**
-     * Memoized calculation of low and high rate extremes for a schedule.
-     */
     const extremesMemo = new WeakMap()
     function extremes(schedule) {
       if (!schedule) return { low: {}, high: {}, flat: true }
@@ -780,7 +823,7 @@ window.__ModuleLoader__.load({
         reference.getUTCFullYear(), reference.getUTCMonth(), reference.getUTCDate(), 0, minute,
       ))
       try {
-        return new Intl.DateTimeFormat('ru-RU', {
+        return new Intl.DateTimeFormat('en-GB', {
           hour: '2-digit', minute: '2-digit', hour12: false, timeZone: zone,
         }).format(d)
       } catch {
@@ -790,7 +833,6 @@ window.__ModuleLoader__.load({
 
     function zoneLabel(zone) {
       if (!zone) return 'UTC'
-      if (zone === 'Europe/Moscow') return 'МСК'
       const city = zone.includes('/') ? zone.slice(zone.lastIndexOf('/') + 1) : zone
       return city.replace(/_/g, ' ')
     }
@@ -800,7 +842,7 @@ window.__ModuleLoader__.load({
     function CostMeter(props) {
       const ctx = props.ctx
       const locale = useActiveLocale(ctx)
-      const t = props.t || makeT(locale === 'ru' ? ru : en, en)
+      const t = props.t || makeT(locale === 'zh' ? zh : en, en)
       const useProjection = props.useProjection
       const usage = useProjection ? useProjection('tokenUsage') : undefined
       const byModel = useProjection ? useProjection('costByModel') : undefined
@@ -808,6 +850,7 @@ window.__ModuleLoader__.load({
       const [open, setOpen] = React.useState(false)
       const [now, setNow] = React.useState(() => new Date())
       const [copied, setCopied] = React.useState(false)
+      const [showAllModels, setShowAllModels] = React.useState(false)
       const box = React.useRef(null)
 
       React.useEffect(() => { ensureStyles() }, [])
@@ -868,16 +911,18 @@ window.__ModuleLoader__.load({
           h('button', {
             key: 'chip', type: 'button',
             className: 'dcm-chip',
-            style: { background: 'transparent', color: 'var(--dsw-alias-label-tertiary)' },
             onClick: () => setOpen((v) => !v), title: t('chipUnknown'),
-          }, 'тариф ?'),
+          }, [
+            h('span', { key: 'dot', className: 'dcm-dot dcm-dot-idle' }),
+            h('span', { key: 'txt' }, t('chipUnknown')),
+          ]),
           open ? h('div', { key: 'panel', className: 'dcm-panel' }, [
             h('div', { key: 't', className: 'dcm-panel-title' },
               state.route ? state.route.provider + ' / ' + state.route.model : t('routeUnknown')),
             h('div', { key: 'n', className: 'dcm-panel-note' },
               state.catalogError
                 ? t('catalogUnavailable') + state.catalogError
-                : 'Модель не найдена в каталоге OpenRouter. Задайте ставки вручную в настройках (prices) или сопоставьте модель через modelMap.'),
+                : t('tokens.not_priced')),
           ]) : null,
         ])
       }
@@ -910,13 +955,12 @@ window.__ModuleLoader__.load({
       const totalUsd = fx > 0 ? total / fx : total
       const budgetExceeded = budgetThreshold > 0 && totalUsd >= budgetThreshold
 
-      const fg = budgetExceeded
-        ? 'var(--dsw-alias-state-error-primary)'
-        : (cheapNow ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-warning-primary)')
-      const bg = budgetExceeded
-        ? 'rgba(239,68,68,0.14)'
-        : (cheapNow ? 'rgba(16,185,129,0.12)' : 'rgba(245,158,11,0.12)')
-      const activeCell = { textAlign: 'right', padding: '3px 6px', borderRadius: 4, background: bg, color: fg, fontWeight: 600 }
+      // Dot indicator status class
+      const dotClass = budgetExceeded
+        ? '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 rateRow = (label, key) => flat
         ? [
@@ -956,16 +1000,30 @@ window.__ModuleLoader__.load({
         .join(', ')
       const nowLocal = hhmmInZone(minute, zone, now)
 
-      // Copy textual report to clipboard
+      // Calculate cache savings amount
+      let cacheSavedAmount = 0
+      let cacheSavedPercent = 0
+      if (hasUsage && usage && Number(usage.cacheReadTokens) > 0 && active.input > active.cacheHit) {
+        const tokensRead = Number(usage.cacheReadTokens)
+        const missedCost = (tokensRead / 1e6) * active.input
+        const hitCost = (tokensRead / 1e6) * active.cacheHit
+        cacheSavedAmount = Math.max(0, (missedCost - hitCost) * fx)
+        cacheSavedPercent = missedCost > 0 ? Math.round(((missedCost - hitCost) / missedCost) * 100) : 0
+      }
+
+      // Copy summary report to clipboard
       const copyReport = () => {
         const lines = [
           '=== ' + (state.route ? state.route.model : 'Cost Meter Report') + ' ===',
-          'Сессия: ' + (hasUsage ? money(total, currency) : '—') + (budgetThreshold > 0 ? ' (порог ' + money(budgetThreshold * fx, currency) + ')' : ''),
-          'Тариф: ' + (cheapNow ? 'Льготный (не-пик)' : 'Полный (пик)'),
-          'Ставки (1M): вход ' + rate(active.input) + ', выход ' + rate(active.output) + ', кэш ' + rate(active.cacheHit),
+          t('tokens.session_total') + ' ' + (hasUsage ? money(total, currency) : '—') + (budgetThreshold > 0 ? ' (limit: ' + money(budgetThreshold * fx, currency) + ')' : ''),
+          'Tier: ' + (flat ? 'Flat' : (cheapNow ? t('offpeak') : t('peak'))),
+          'Rates (1M): input ' + rate(active.input) + ', output ' + rate(active.output) + ', cache ' + rate(active.cacheHit),
         ]
+        if (cacheSavedAmount > 0) {
+          lines.push('Cache saved: ≈ ' + money(cacheSavedAmount, currency) + ' (' + cacheSavedPercent + '%)')
+        }
         if (hasUsage && usage) {
-          lines.push('Токены: вход ' + tokens(usage.inputTokens) + ', выход ' + tokens(usage.outputTokens) + ', кэш-хит ' + tokens(usage.cacheReadTokens))
+          lines.push('Tokens: in ' + tokens(usage.inputTokens) + ', out ' + tokens(usage.outputTokens) + ', cache hit ' + tokens(usage.cacheReadTokens))
         }
         const text = lines.join('\n')
         if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
@@ -991,57 +1049,65 @@ window.__ModuleLoader__.load({
         })
       }
 
+      // Display models with collapse support if > 3 models
+      const visibleModels = (perModel.length
+        ? perModel
+        : (state.route ? [{ key: state.route.provider + '/' + state.route.model, model: state.route.model, known: Boolean(schedule), cost: 0 }] : [])
+      )
+      const shouldCollapse = visibleModels.length > 3 && !showAllModels
+      const renderedModels = shouldCollapse ? visibleModels.slice(0, 3) : visibleModels
+
       return h('div', { ref: box, style: { position: 'relative' } }, [
         h('button', {
           key: 'chip', type: 'button',
-          className: 'dcm-chip' + (budgetExceeded ? ' dcm-chip-budget-warn' : ''),
-          style: {
-            background: bg,
-            color: fg,
-            borderColor: budgetExceeded
-              ? 'rgba(239,68,68,0.5)'
-              : (cheapNow ? 'rgba(16,185,129,0.3)' : 'rgba(245,158,11,0.3)'),
-          },
+          className: 'dcm-chip',
           onClick: () => setOpen((v) => !v),
           title: budgetExceeded
             ? t('budget.exceeded', { limit: money(budgetThreshold * fx, currency) })
-            : (flat ? 'Единый тариф' : cheapNow ? 'Льготный тариф' : 'Полный тариф'),
+            : (flat ? 'Flat tariff' : cheapNow ? t('offpeak') : t('peak')),
         }, [
+          h('span', { key: 'dot', className: dotClass }),
           h('span', { key: 'sum' }, hasUsage ? '≈ ' + money(total, currency) : '—'),
-          left ? h('span', { key: 'left', style: { opacity: 0.75 } }, left) : null,
+          left ? h('span', { key: 'left', className: 'dcm-chip-timer' }, left) : null,
         ]),
 
         open ? h('div', { key: 'panel', className: 'dcm-panel' }, [
-          h('div', { key: 'title', className: 'dcm-panel-title' },
-            (state.route ? state.route.model : 'модель') +
-            (flat ? '' : ' — сейчас ' + (cheapNow ? 'не-пик' : t('peak')))),
+          h('div', { key: 'title', className: 'dcm-panel-title' }, [
+            h('span', { key: 'model-name' }, state.route ? state.route.model : 'model'),
+            flat ? null : h('span', { key: 'tier', style: { fontSize: 11.5, opacity: 0.85 } }, cheapNow ? t('offpeak') : t('peak')),
+          ]),
 
           h('div', { key: 'note', className: 'dcm-panel-note' },
             flat
-              ? 'Единая ставка, от времени суток не зависит'
-              : (cheapNow ? 'Действует льготная ставка' : 'Действует полная ставка') +
-                (left ? ' · смена через ' + left : '')),
+              ? 'Flat rate schedule'
+              : (cheapNow ? 'Discounted rate active' : 'Full rate active') +
+                (left ? ' · change in ' + left : '')),
 
           flat
             ? null
             : h('div', { key: 'clock', className: 'dcm-panel-note' },
-                'Пик: ' + windowText + ' ' + zl + ' · сейчас ' + nowLocal + ' ' + zl),
+                t('peak') + ': ' + windowText + ' ' + zl + ' · now ' + nowLocal + ' ' + zl),
 
           discountHint ? h('div', { key: 'savings-box', className: 'dcm-tip-box', style: { marginTop: 6 } }, discountHint) : null,
 
+          cacheSavedAmount > 0
+            ? h('div', { key: 'cache-saved-box', className: 'dcm-cache-box', style: { marginTop: 6 } },
+                t('savings.cache_saved', { amount: money(cacheSavedAmount, currency), percent: cacheSavedPercent }))
+            : null,
+
           budgetExceeded ? h('div', { key: 'budget-warn', className: 'dcm-alert dcm-alert-err', style: { marginTop: 6, padding: '6px 10px', fontSize: 11 } },
             t('budget.exceeded', { limit: money(budgetThreshold * fx, currency) })) : null,
 
           h('hr', { key: 'hr1', className: 'dcm-hr' }),
 
           h('div', { key: 'rates', className: flat ? 'dcm-panel-grid-flat' : 'dcm-panel-grid' }, [
-            h('div', { key: 'h0', className: 'dcm-th' }, '1M токенов, $'),
-            flat ? null : h('div', { key: 'h1', className: 'dcm-th-num' }, 'не-пик'),
-            h('div', { key: 'h2', className: 'dcm-th-num' }, flat ? 'ставка' : 'пик'),
-            rateRow('Вход (кэш-хит)', 'cacheHit'),
-            rateRow('Вход (мимо кэша)', 'input'),
-            showCacheWrite ? rateRow('Вход (запись в кэш)', 'cacheWrite') : null,
-            rateRow('Выход', 'output'),
+            h('div', { key: 'h0', className: 'dcm-th' }, t('rate.per_1m')),
+            flat ? null : h('div', { key: 'h1', className: 'dcm-th-num' }, t('offpeak')),
+            h('div', { key: 'h2', className: 'dcm-th-num' }, flat ? 'rate' : t('peak')),
+            rateRow(t('rate.cache_hit'), 'cacheHit'),
+            rateRow(t('rate.input'), 'input'),
+            showCacheWrite ? rateRow(t('rate.cache_write'), 'cacheWrite') : null,
+            rateRow(t('rate.output'), 'output'),
           ]),
 
           h('hr', { key: 'hr2', className: 'dcm-hr' }),
@@ -1049,27 +1115,24 @@ window.__ModuleLoader__.load({
           multiModel
             ? null
             : [
-                h('div', { key: 'btitle', className: 'dcm-section-lbl' }, 'Токены сессии'),
+                h('div', { key: 'btitle', className: 'dcm-section-lbl' }, t('tokens.session')),
                 h('div', { key: 'breakdown', className: 'dcm-panel-grid-3' }, [
-                  h('div', { key: 'b0', className: 'dcm-th' }, 'токенов'),
+                  h('div', { key: 'b0', className: 'dcm-th' }, t('tokens.tokens_col')),
                   h('div', { key: 'b1', className: 'dcm-th-num' }, ''),
                   h('div', { key: 'b2', className: 'dcm-th-num' }, currency),
-                  spentRow('Вход (кэш-хит)', 'cacheReadTokens', 'cacheHit'),
-                  spentRow('Вход (мимо кэша)', 'uncachedInputTokens', 'input'),
-                  showCacheWrite ? spentRow('Вход (запись в кэш)', 'cacheWriteTokens', 'cacheWrite') : null,
-                  spentRow('Выход', 'outputTokens', 'output'),
+                  spentRow(t('rate.cache_hit'), 'cacheReadTokens', 'cacheHit'),
+                  spentRow(t('rate.input'), 'uncachedInputTokens', 'input'),
+                  showCacheWrite ? spentRow(t('rate.cache_write'), 'cacheWriteTokens', 'cacheWrite') : null,
+                  spentRow(t('rate.output'), 'outputTokens', 'output'),
                 ]),
                 h('hr', { key: 'hr-models', className: 'dcm-hr' }),
               ],
 
-          h('div', { key: 'mtitle', className: 'dcm-section-lbl' }, 'Расход по моделям'),
+          h('div', { key: 'mtitle', className: 'dcm-section-lbl' }, t('tokens.models_spent')),
           h(
             'div',
             { key: 'models-list', style: { display: 'flex', flexDirection: 'column', gap: 4 } },
-            (perModel.length
-              ? perModel
-              : (state.route ? [{ key: state.route.provider + '/' + state.route.model, model: state.route.model, known: Boolean(schedule), cost: 0 }] : [])
-            ).map((m) =>
+            renderedModels.map((m) =>
               h(
                 'div',
                 {
@@ -1102,22 +1165,31 @@ window.__ModuleLoader__.load({
                         color: m.known ? 'var(--dsw-alias-label-primary)' : 'var(--dsw-alias-label-tertiary)',
                       },
                     },
-                    m.known ? (hasUsage ? money(m.cost, currency) : '—') : 'не указана стоимость',
+                    m.known ? (hasUsage ? money(m.cost, currency) : '—') : t('tokens.not_priced'),
                   ),
                 ],
               ),
             ),
           ),
 
+          visibleModels.length > 3
+            ? h('button', {
+                key: 'toggle-models',
+                type: 'button',
+                className: 'dcm-accordion-btn',
+                onClick: () => setShowAllModels((v) => !v),
+              }, shouldCollapse ? t('models.show_more', { count: visibleModels.length }) : t('models.show_less'))
+            : null,
+
           h('hr', { key: 'hr3', className: 'dcm-hr' }),
 
           h('div', { key: 'total', className: 'dcm-total' }, [
-            h('span', { key: 'l' }, 'Сессия:'),
-            h('span', { key: 'v' }, hasUsage ? '≈ ' + money(total, currency) : 'нет данных'),
+            h('span', { key: 'l' }, t('tokens.session_total')),
+            h('span', { key: 'v' }, hasUsage ? '≈ ' + money(total, currency) : '—'),
           ]),
 
           hasUsage ? null : h('div', { key: 'nodata', className: 'dcm-panel-note', style: { paddingTop: 6 } },
-            'Провайдер ещё не сообщил usage для этой сессии.'),
+            t('tokens.no_usage_yet')),
 
           h('div', { key: 'footer-actions', style: { display: 'flex', justifyContent: 'flex-end', marginTop: 10 } },
             h('button', {
@@ -1132,7 +1204,7 @@ window.__ModuleLoader__.load({
 
     function apply(ctx) {
       if (ctx.locale && ctx.locale.register) {
-        try { ctx.locale.register(NS, { en, ru }) } catch (_) {}
+        try { ctx.locale.register(NS, { en, zh }) } catch (_) {}
       }
 
       refreshMirrorUntilVisible(ctx)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-cost-meter",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "DeepSeek Harness plugin: a session cost chip in the conversation header - live token usage by bucket, peak/off-peak tariff, and a countdown to the next tariff switch.",
   "type": "module",
   "main": "lib/index.js",