fix(web): localize the context panel headline order and drop empty bar parts

The panel header concatenated a `45%` span with a `context.used` fragment, so Chinese rendered "45% 上下文已用" against the ring's own "上下文已用 45%". The header now renders the one localized `context.aria` sentence split around its `{percent}` slot: each locale owns the reading's position while the reading keeps its primary tone, and the side a locale leaves empty collapses through `.headline:empty` instead of spending a header gap. The bar mapped every composition row to a segment unconditionally, and `.segment`'s 2px min-width kept each one visible, so a 0% occupancy panel painted an ~8px filled bar over an empty context. Parts are now computed with their widths and zero-width parts are filtered out, which also collapses the plain and segmented branches into one map.
2026-08-05 15:59:24 +08:00
parent d2aafc2a33
commit 46562b2c30
7 changed files with 79 additions and 27 deletions
@@ -16,7 +16,7 @@ Web 聊天的统计行把上下文占用率作为一个行内数字（`Context N

 `dsh-token-meter` 把计价启发式抽取到 `src/estimate.ts`（与测量服务逐字共享），并注册第三个会话投影 `contextBreakdown`，携带 `systemTokens` / `toolsTokens` / `messageTokens`。envelope 数字在每条 `request/header` 上经 `canonicalHeader` 按后者胜重新计价；消息数字用逐节点 `{seq, tokens}` 列表折叠表层追加与位置替换，因此压缩会像缩小下一个请求那样缩小它。折叠表层中不存在的替换范围会直接抛出：已提交日志在追加时就经过表层校验，无法解析的范围是日志损坏，而不是可跳过的事件。

-`ui-conversation` 把上下文占用率从统计行移走（一个事实一个家），放到 composer 尾部的 `ContextMeter`：模型座位之后的一枚 14px 占用圆环，由 `contextPressure` 供数，点击弹出的面板把提供方精确的百分比与 `~已用 / 容量` 标题，与 4px 分色分段进度条及带 `~` 前缀的组成明细行并列。两套口径刻意永不对账——圆环、标题与进度条总长保持提供方精确值，启发式占比只用于切分进度条的彩色分段与明细行，且每个启发式数字都标 `~`，因为固定的「4 字符≈1 token」启发式会系统性低估 CJK 文本与代码。
+`ui-conversation` 把上下文占用率从统计行移走（一个事实一个家），放到 composer 尾部的 `ContextMeter`：模型座位之后的一枚 14px 占用圆环，由 `contextPressure` 供数，点击弹出的面板把提供方精确的百分比与 `~已用 / 容量` 标题，与 4px 分色分段进度条及带 `~` 前缀的组成明细行并列。两套口径刻意永不对账——圆环、标题与进度条总长保持提供方精确值，启发式占比只用于切分进度条的彩色分段与明细行，且每个启发式数字都标 `~`，因为固定的「4 字符≈1 token」启发式会系统性低估 CJK 文本与代码。标题是一整句本地化文案（`context.aria`，与圆环的无障碍名共用），在 `{percent}` 槽位处切开渲染，于是读数的位置由各语言自己决定——英文在前、中文在后——同时读数保留自己的字重；宽度算出为零的分段直接不渲染，否则 `.segment` 的 min-width 会在 0% 占用时画出一段填充色。

 ## 备选方案