makecindy / makecindy/cindy

bug: 用量历史「按模型 / 按 agent」表首列横向溢出——#3393 只修了「最耗 token 的任务」

Open
#3,445 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
2.7k
Forks
401
Avg merge
21h 48m
Merged PRs (30d)
776

Description

## 现象

设置 → 用量历史 →「按模型」「按 agent」两张明细表的**首列**一旦出现超长文本,整张表格会被横向撑出内容区:右侧的占比 / 输入 / 输出 / 缓存读 / 缓存写 / 命中率等列被挤出卡片右缘并裁掉,相邻数字还会贴到一起。

触发条件:自定义 provider 的超长 model id(例如 `zai-qwen3-500b-a22b-mix-232k-highreason-extended-openai-compatible-cn-shared-pool-latest` 这类带路由后缀/日期/池标记的命名),或任意超长 agent 名。

## 根因

与 #3393 修复的「最耗 token 的任务」**同一类病**:首列单元格是 `whitespace-nowrap` 但没有宽度约束。自动布局的表格先按最长内容(用户输入的自由文本)算出首列宽度,把整张卡片撑出内容区;内层 `truncate` 因为没有可收缩的宽度而失效。

## 与 #3393 的关系

#3393 只修了 `UsageTaskTable`(任务列),其 PR 描述里明确写了:

> 「按模型」表首列(`UsageBreakdownTables`)的同类问题——同一个病但另一张表,单独提;

本 issue 就是那个「单独提」的落点(当前 `UsageBreakdownTables.tsx` 两张表都还未加宽度约束)。

顺带说明:user 安装的 v0.1.61(2026-08-25 发布)**尚未包含** #3393 的修复,所以现阶段在「最耗 token 的任务」表也还能复现同一现象;#3393 合入后(等下一版发布),按模型 / 按 agent 表将是最后一个遗留口子。

## 复现(等价的 Tailwind 类 + 真实超长 model id,Chrome)

| 场景 | 卡片宽 | 表格实际宽 | 溢出 |
|---|---|---|---|
| 按模型表(修复前) | 800px | 871px | +88px |
| 按模型表(修复前,窄窗) | 460px | 847px | +404px |
| 任务表(v0.1.61 结构) | 800px | 1024px | +241px(即 #3393 修的那个)|

修复前后对比截图:`repro.png`(本地生成的可省略号化验证页,before/after 六组对照,含 800px/460px 两种宽度)。

## 建议

将 #3393 中任务列的既定修法套用到两张明细表首列:`w-full max-w-0 pl-0` + `truncate` + `title` 悬停全名;其余列补 `pl-3` 列间距。已附修复 PR。

Contributor guide

Open the contributing guide

Research direction

Start with UsageBreakdownTables.tsx and compare its two tables with the UsageTaskTable changes from #3393. Use the supplied repro.png and test long model and agent names at the 800px and 460px widths. Done means the first columns truncate without pushing the remaining columns beyond the card, while the full value remains available on hover.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.