[Snowyyyyyy1]

Rebased onto current main as one commit (6dfd48c7). Main's #1599 head row (.usage-head.tight, the sum at the right) and b0e2569's period thumb are kept as they are. This PR no longer changes either. It carries only the three fixes main still needs:

• Tray period click across an answer. The tray reuses its period buttons when a response redraws the totals, so an answer arriving between pointer press and release no longer swallows the click.
• KPI sub-lines. In a narrow native window a figure's sub-line wraps instead of ending in an ellipsis. Between 961 and 1100px the window shows three figures to a row instead of six.
• Chart dates. fitChartLabels now hides a date that would collide with its neighbour in the native window too, not only on phones. Since 3c7ec4b it lives in plugins/usage/page.js, so the plugin refits the dates itself once fonts load. app.js doesn't call into it.

The Sessions agent strip keeps scrolling inside itself and keeps the picked agent in view (#929). These layout rules apply to the native window, not magpie web.

usage-narrow's head-row checks now assert #1599's layout instead of the left-packed head this PR used to propose. The checks are at most two rows, the first row starting at the left, no overlap, and the sum whole at the right. The picked-agent check waits for the strip's thumb to reach .opt.on before asserting.

The GUI shell reference and browser test notes describe these paths.

Validation

All at 6dfd48c7's tree on main 1eba266a (the main commits since touch only site/ and the READMEs). Browser tests use Playwright 1.62.1 with isolated API fixtures.

• panel-usage-period and usage-narrow: 16/16 in Chromium and WebKit, en/zh/ja/de, at 950/760/560px.
• usage-narrow in Chromium, 6 runs in a row: 4/4 each.
• Run against origin/main's unmodified assets, the two new files fail 10/16. The failures are "an answer while Today is pressed keeps its click" (4), "560px: two dates collide" (4) and "560px: a figure's sub-line is cut short" (2), one for each of the three fixes above.
• [Bug] 使用多个 Agent 时页面出现横向滚动条 #929's sess-agent-strip and usage-sessions-agents-fit: 8/8 in Chromium and WebKit.
• usage-*, sess*, panel-*, click-scroll, gui-ja, gui-de, i18n-keys (98 files): 1205/1234. The 29 failures are in usage-agents-hide, usage-checkin, usage-curve-zoom-back and usage-fold. The same 29 fail on a clean origin/main checkout here (57/86 on both sides for those four files), so they aren't from this change.
• go test -count=1 ./internal/gui under a temporary HOME: everything passes except TestProxyCheckSaysAProxyPassedBy (HTTP 503 from the sandboxed network) and TestMainWindowCorners (macOS title bar). Both fail the same way on clean origin/main on this machine.

Not run: the real native app at these widths.

---

🎬 界面预览

_{CI 用这个 PR 的代码构建并真实运行 magpie（沙盒环境，配置了真实的 DeepSeek key），按改动自动操作、截图和录屏 · 6dfd48c · 运行记录}

改动（按代码）：这次改动让窄的原生窗口（body.window:not(.web)）里用量页的 KPI 小字换行、六项统计在容器 961–1100px 时改排三列，并让图表横轴日期在原生窗口里也会因与相邻标签碰撞而隐藏（含字体就绪后再量一次），同时把托盘面板「用量」的周期按钮改为跨重绘复用，避免回答重绘吞掉点击或让高亮回跳。

Warning

描述与代码不符：描述说用量页头部「现在」把刷新和总额作为一组换行（.usage-head、#usageReload 与 #usageCost 的关系），但 diff 里没有任何 .usage-head 相关的 CSS 或标记改动，这条只出现在文档和新增测试的断言里。

Note

沙盒里看不到：两处布局规则只作用于原生窗口（body.window:not(.web)）：预览环境运行的是 magpie web、宽 1280px 且没有调整窗口大小的动作，因此 KPI 小字换行、六项统计改排三列、以及窄窗口下相邻图表日期被隐藏，都无法在这里拍到；Sessions 的 Agent 标签条按描述保持原样（水平滚动、不换行），diff 也未改动它。面板周期按钮的「回答重绘 / 按下与松开之间到达的响应不吞点击、高亮不回跳」是时序行为，静态截图也拍不到。

_{▶️ 点图打开录屏（可暂停、拖动）· 直接下载 mp4 · 红线是鼠标轨迹，红色圆环是点击}

托盘面板的用量周期按钮

面板「用量」里的周期按钮

面板「用量」的周期按钮与总量

用量页的头部与图表日期

用量页顶部：周期、刷新与总额

用量概览的柱状图与横轴日期标签

会话页的六项统计与 Agent 标签条

会话页顶部的六项统计

会话页的 Agent 标签条

[yetone]

Thanks. I reviewed head f92b198 and ran it merged with current main (07326a3), in Chromium and WebKit, en and zh.

What holds up:

• panel-usage-period and usage-narrow pass 8/8. Copied onto main without the app change, they fail 8/8, so they guard what they claim to.
• The rest of the usage, panel and session tests that touch the thumbs, the period strip, #usageCost, the chart labels or the calendar pass. So do click-scroll, gui-ja, gui-de and i18n-keys (61 files).
• Keeping the tray's period buttons across a redraw looks right. paint() covers every branch of renderPanelUse.

One thing has to change before this can merge:

It undoes #929, and two of that issue's tests now fail.

• sess-agent-strip.test.cjs fails 4/4 with "the strip fits the window at 834px, so nothing is being fixed". It passes 4/4 on main.
• usage-sessions-agents-fit.test.cjs fails 4/4 with "the strip itself scrolls". On main it passes 3/4; the fourth, WebKit en, is a timeout that also happens on main and is unrelated.

#929 (liuweifeng) decided that a Usage › Sessions agent strip too wide for the window scrolls inside itself, and that the picked agent stays in view (c6e318e). The new @container (max-width: 1100px) rule for body.window:not(.web) .sess-tools > .segs / .sess-chart-head > .segs turns that strip into several wrapped rows instead.

The macOS overlay-scrollbar point is fair, but please don't reverse a decision made for an issue in a side change. Either:

• keep the strips scrolling and wrap only the head, the KPIs and the dates; or
• open an issue proposing wrap-instead-of-scroll, and update both #929 tests in the same change once that's agreed.

Before pushing again, please run the whole usage-*, sess* and panel-* set, not a hand-picked subset. Both tests that fail are in that set.

Minor:

• usage-ledger-detail fails on your base only because of a stale test that main has since fixed (07326a3). Rebasing clears it.
• Nothing in this PR conflicts with #977 or #974 textually. I merged all three together and the new tests of each still pass.

[yetone]

Thanks. The layout and thumb changes look right, and I found no problems in the code. I checked dc0dab4 merged onto current main:

• Native window at 950, 760 and 560px, in Chromium and WebKit, in en, zh, ja and de. Every case has no sideways scroll and nothing past the right edge. Refresh and the sum stay on one head row, the chart dates don't collide, and no KPI sub-line is clipped.
• 51 of 52 GUI files pass (usage-, sess, panel-*, click-scroll, gui-ja, gui-de, i18n-keys), and so does go test ./internal/gui.
• Both new tests fail against main's assets, so they guard the change.

One thing blocks the merge: the new usage-narrow.test.cjs fails intermittently in Chromium. It failed in all 7 runs: 1 to 4 of its 4 Chromium cases each time (WebKit always passes). Every failure is "the scrolling strip highlights its choice" (internal/gui/tests/usage-narrow.test.cjs:248).

Repro: run BROWSER=chromium node --test internal/gui/tests/usage-narrow.test.cjs a few times. With the thumb printed in the message, a failure reads:

{"id":"sessAgent","on":"Qoder CN","dLeft":-1058.2,"dW":-42} last=true

The thumb is still on "All", the chip at the other end.

The page itself is fine. Sampling the thumb after a real click on the last chip, it sits on the pick within 50ms, in this PR and on main alike. The test reads it too early: settle() (two animation frames, line 173) after .opt.on moves (line 244) is not always enough for the thumb's move to land in Chromium.

Fix: wait for the thumb itself rather than a fixed two frames. For example, a waitForFunction that the #sessAgent thumb's left, top and height are within 1px of .opt.on, then assert. Please run it several times in Chromium before pushing. Per our rules, a new test that fails some runs counts as failing.

[yetone]

Thanks. 24a17dc waits for the #sessAgent thumb itself (left, top and height within 1px of .opt.on) before asserting, which is the fix I asked for, and the PR still merges cleanly with current main (3e38bd7). I could not run the checks this round (the review machine is short on disk), so it is not merged yet. Next round I will run usage-narrow several times in Chromium, plus the whole usage-*, sess*, panel-*, click-scroll, gui-ja and gui-de set in both engines, post the results here and then merge. Nothing for you to change.

[yetone]

Sorry for the slow review on this one.

It no longer merges onto main: internal/gui/assets/app.css and app.js conflict (4 hunks). Since this PR was opened, main has changed the same Usage header itself. #1599 (7bfd02a, 03dcc90) added .usage-head.tight, which puts the sum at the right of the head row on a narrow window, and b0e2569 changed how the period thumb moves.

I ran your two new tests against current main's assets (origin/main 5b14ebf plus panel-usage-period.test.cjs and usage-narrow.test.cjs from 24a17dc), to see which of your fixes main still needs:

• Still needed: a tray period click across a response. panel-usage-period fails on main in chromium, in en/zh/ja/de: an answer while Today is pressed keeps its click — '7d' !== 'today'. It passes 4/4 in webkit.
• Still needed: KPI sub-lines and chart dates. I turned off only the head-row position checks in usage-narrow (see the next point). With that, main still fails:
  • 560px: two dates collide (chromium ja; webkit zh and ja)
  • 560px: a figure's sub-line is cut short (chromium de)
• Now conflicts with main's design: the head-row layout. usage-narrow's the head row starts away from the left edge (usageCost) and the refresh and the sum are apart (zh chromium at 560, de webkit at 760) assert the layout [Bug] 用量页面金额默认显示不完整 #1599 replaced. Main keeps the sum at the right on purpose, so these assertions need to follow main's head rather than undo it.

Could you rebase onto main and:

1. keep main's [Bug] 用量页面金额默认显示不完整 #1599 head row and the thumb from b0e2569, and adjust the head-row assertions to match them;
2. keep your fixes for the click across a response, the KPI sub-lines and the chart dates, with the tests above.

Then please re-run the tests in both engines, at 560/760/950, in every language. I'll review it again at the new head.