feat(web): show cache hit rates in request logs

README.md

@@ -57,7 +57,7 @@ Your application only needs one base URL and one AccessKey. Providers, accounts,
 - **One gateway, native protocols** — Manage official APIs, cloud platforms, model services, and compatible relays together while clients keep their OpenAI, Anthropic, or Gemini native interfaces.
 - **One mechanism for API keys and subscriptions** — Codex, Claude, Antigravity, Grok, and API-key channels share credential management, scheduling, and health handling.
 - **Scheduling and failure isolation built in** — Multi-credential scheduling, configurable weights, retries, cooldown, blacklisting, and session affinity reduce the impact of overloaded or failing credentials.
-- **Observable, self-hosted, and simple to deploy** — Inspect health, routes, logs, usage, and cost estimates in an embedded UI backed by SQLite, MySQL, or PostgreSQL with local credential encryption.
+- **Observable, self-hosted, and simple to deploy** — Inspect health, routes, logs with inline cache hit rates, usage, and cost estimates in an embedded UI backed by SQLite, MySQL, or PostgreSQL with local credential encryption.
 
 ## Quick start
 

README_CN.md

@@ -57,7 +57,7 @@
 - **统一入口，保留原生协议** — 官方 API、云平台、模型服务和兼容中转统一管理；客户端继续使用 OpenAI、Anthropic 或 Gemini 原生接口，无需改造代码。
 - **统一管理 API Key 与订阅账号** — Codex、Claude、Antigravity、Grok 等订阅渠道与 API Key 渠道共享凭据管理、调度和健康体系。
 - **内置调度与故障隔离** — 多凭据调度、可配置权重、重试、冷却、黑名单与会话亲和，降低单个凭据过载或失效的影响。
-- **可观测、易部署、数据自持** — 提供健康、路由、日志、用量与成本估算；单个 Go 二进制内嵌管理界面，支持 SQLite、MySQL、PostgreSQL 和本地凭据加密。
+- **可观测、易部署、数据自持** — 提供健康、路由、日志、用量与成本估算，日志列表直接显示缓存命中率；单个 Go 二进制内嵌管理界面，支持 SQLite、MySQL、PostgreSQL 和本地凭据加密。
 
 ## 快速开始
 

README_JP.md

@@ -57,7 +57,7 @@ API キー、サブスクリプションアカウント、トラフィック制
 - **単一ゲートウェイでネイティブプロトコルを維持** — 公式 API、クラウド基盤、モデルサービス、互換中継を一元管理しながら、クライアントは OpenAI、Anthropic、Gemini のネイティブインターフェイスをそのまま使えます。
 - **API キーとサブスクリプションを統一管理** — Codex、Claude、Antigravity、Grok と API キーチャネルで、認証情報管理・スケジューリング・健全性管理を共通化します。
 - **スケジューリングと障害分離を内蔵** — 複数認証情報のスケジューリング、設定可能なウェイト、リトライ、クールダウン、ブラックリスト、セッションアフィニティにより、過負荷や失効の影響を抑えます。
-- **可観測で導入しやすく、データを自己管理** — 健全性、ルート、ログ、使用量、コスト概算を確認でき、SQLite、MySQL、PostgreSQL とローカル認証情報暗号化を単一バイナリで利用できます。
+- **可観測で導入しやすく、データを自己管理** — 健全性、ルート、ログ、使用量、コスト概算とログ一覧でのキャッシュヒット率を確認でき、SQLite、MySQL、PostgreSQL とローカル認証情報暗号化を単一バイナリで利用できます。
 
 ## クイックスタート
 

web/src/features/monitor/LogsTab.vue

@@ -891,15 +891,6 @@ function costLabel(log: RequestLogItemDto): string {
                   <span class="logs-list__token-direction" aria-hidden="true">in</span>
                   {{ formatLogTokenCount(log.input_tokens, locale) }}
                   <span class="logs-list__token-hints">
-                    <AppTooltip v-if="hasRequestLogCache(log)" :content="cacheTooltip(log)">
-                      <button
-                        type="button"
-                        class="logs-list__hint"
-                        :aria-label="t('monitor.logs.tokens.cacheDetails')"
-                      >
-                        <Layers :size="13" aria-hidden="true" />
-                      </button>
-                    </AppTooltip>
                     <AppTooltip
                       v-if="log.usage_state === 'partial'"
                       :content="t('monitor.logs.tokens.partial')"
@@ -918,6 +909,18 @@ function costLabel(log: RequestLogItemDto): string {
                   <span class="logs-list__token-direction" aria-hidden="true">out</span>
                   {{ formatLogTokenCount(log.output_tokens, locale) }}
                 </span>
+                <AppTooltip v-if="hasRequestLogCache(log)" :content="cacheTooltip(log)">
+                  <button
+                    type="button"
+                    class="logs-list__hint logs-list__cache-rate"
+                    :aria-label="`${t('monitor.logs.tokens.cacheHitRate')} ${formatCacheHitRate(log.cache_read_tokens, log.input_tokens, locale)} · ${t('monitor.logs.tokens.cacheDetails')}`"
+                  >
+                    <span class="logs-list__token-direction">
+                      <Layers :size="13" aria-hidden="true" />
+                    </span>
+                    {{ formatCacheHitRate(log.cache_read_tokens, log.input_tokens, locale) }}
+                  </button>
+                </AppTooltip>
               </span>
             </OverflowTooltip>
             <span v-else class="logs-list__state--warning">—</span>
@@ -1166,6 +1169,21 @@ function costLabel(log: RequestLogItemDto): string {
   cursor: help;
 }
 
+.logs-list__cache-rate {
+  width: max-content;
+  max-width: 100%;
+  flex-basis: auto;
+  justify-content: flex-start;
+  gap: 5px;
+  font: inherit;
+  font-size: var(--text-label-xs);
+}
+
+.logs-list__cache-rate .logs-list__token-direction {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .logs-list__hint:hover {
   background: var(--color-surface-sunken);
   color: var(--color-text);