Skip to content
This repository was archived by the owner on Jul 30, 2026. It is now read-only.

feat(tui): rebuild overview snapshot as donut-chart sections - #178

Merged
makoMakoGo merged 2 commits into
personal/local-clientsfrom
feat/overview-snapshot-donuts
Jul 20, 2026
Merged

feat(tui): rebuild overview snapshot as donut-chart sections#178
makoMakoGo merged 2 commits into
personal/local-clientsfrom
feat/overview-snapshot-donuts

Conversation

@makoMakoGo

@makoMakoGo makoMakoGo commented Jul 20, 2026

Copy link
Copy Markdown
Owner

What

Rebuilds the Overview tab's Snapshot panel as three sections with donut charts, replacing the previous text-only layout:

  • Left — metric groups joined by dashed separators, plus a new Active Days row (days with >0 tokens, matching the footer's day count)
  • Middle — Tokens donut (center shows total tokens) with a legend of colored markers, exact values, and per-segment percentages
  • Right — Sources donut (center shows source health %) with a per-state legend (Clean/Degraded/Partial/Failed/Rejected)

Sections are split by vertical dividers with uniform 1-cell padding on both sides.

How

  • New DonutChart widget (crates/tokscale-cli/src/tui/ui/donut.rs): braille dot-matrix ring (2x4 dots per cell, true circle in dot space), segments laid out clockwise from 12 o'clock, center text on a cleared background, and an empty_color ring when all weights are zero.
  • Minimum visible arc: non-zero segments smaller than ~4 dots on the mid-band circumference are bumped to stay visible, funded proportionally from larger segments (sum stays 1). Zero-weight segments stay invisible by design; legends always carry the exact values.
  • Progressive width tiers: ≥110 cols → all three sections; ≥80 → metrics + Tokens; ≥40 → metrics only; below → stacked text fallback.
  • Colors: Cache Read / Clean follow theme.accent. Cache Write (LightBlue) and Partial (LightMagenta) use fixed colors because most themes set accent to cyan or near-cyan, which previously made those arcs and legend markers indistinguishable. Segment colors are shared between donut and legend via single token_buckets/source_buckets definitions.

Out of scope (unchanged): the data pipeline, the Tokens-per-Day chart above the panel, and the footer.

Verification

  • cargo test -p tokscale-cli — 845 tests pass, including 15 new DonutChart tests and 15 rewritten panel tests (tiers, dividers, separators, overflow policy, segment colors, tiny-arc visibility, all-clean ring stays single-colored)
  • cargo clippy, cargo fmt — clean
  • Manual TUI runs at 200x50 / 95x40 / 60x40 against real data, plus a fabricated fixture with degraded/partial/failed sources to verify the multi-color Sources ring end to end

Summary by CodeRabbit

  • 新功能
    • 概览快照新增 Tokens 与 Sources 环形图,直观展示数据分布及占比。
    • 环形图支持中心文字、颜色图例、空数据状态和尺寸自适应。
  • 界面改进
    • 概览面板根据窗口宽度自动切换三列、两列、单列及窄屏布局。
    • 新增 Active Days 指标、竖向分隔线,并优化指标与图例的对齐、截断和显示效果。
  • 稳定性
    • 优化极小窗口和不同面板尺寸下的显示,避免布局异常。

Replace the text-only Overview snapshot panel with three sections split
by vertical dividers: metrics (now with dashed separators and an Active
Days row), a Tokens donut with legend, and a Sources donut with legend.

- Add a DonutChart widget: braille dot-matrix ring, segments laid out
  clockwise from 12 o'clock, center text, and a minimum visible arc so
  tiny non-zero segments stay visible (legends keep exact values)
- Progressive width tiers: >=110 cols show all sections, >=80 drops the
  Sources section, >=40 keeps metrics only, below falls back to stacked
  text
- Cache Read/Clean segments follow theme.accent; Cache Write and
  Partial use fixed LightBlue/LightMagenta so arcs never merge with
  cyan-ish theme accents
- Data pipeline, the Tokens-per-Day chart above, and the footer are
  unchanged
@coderabbitai

coderabbitai Bot commented Jul 20, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@makoMakoGo, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 44 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e1fce901-dc41-428d-a97d-153e40e7ec8b

📥 Commits

Reviewing files that changed from the base of the PR and between 03b3e1d and 8bf6d73.

📒 Files selected for processing (1)
  • crates/tokscale-cli/src/tui/ui/overview_snapshot.rs

Walkthrough

Changes

概览甜甜圈图

Layer / File(s) Summary
甜甜圈图组件
crates/tokscale-cli/src/tui/ui/donut.rs
新增基于 Unicode Braille 的甜甜圈图,支持分段颜色、最小可见弧、中心文本、背景和半径配置,并覆盖多种几何与边界测试。
概览面板布局接入
crates/tokscale-cli/src/tui/ui/mod.rs, crates/tokscale-cli/src/tui/ui/overview_snapshot.rs
将甜甜圈图接入 Overview Snapshot,重写三列、两列、单列和窄屏回退布局,新增指标、图例及分隔线渲染。
布局与视觉行为验证
crates/tokscale-cli/src/tui/ui/overview_snapshot.rs
新增布局定位、颜色提取和主题测试,验证分隔线、图例对齐、健康分段、指标裁剪及多尺寸渲染稳定性。

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Snapshot
  participant DonutChart
  participant Buffer
  Snapshot->>Snapshot: 根据可用宽度选择布局
  Snapshot->>DonutChart: 创建 Tokens 或 Sources 图表
  DonutChart->>Buffer: 绘制 Braille 环与中心文本
  Snapshot->>Buffer: 绘制指标、图例和分隔线
Loading

Possibly related PRs

  • makoMakoGo/tokscale#154:引入了 Overview Snapshot 的渲染结构,与本次面板布局重构存在代码层面的关联。

Poem

小兔画环点点亮,
Braille 花瓣绕中央。
Tokens、Sources 排成行,
分隔虚线守两旁。
窄屏也能稳稳唱。

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了将 Overview Snapshot 重构为甜甜圈图分区的主要改动。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/overview-snapshot-donuts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 03b3e1d5ea

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread crates/tokscale-cli/src/tui/ui/overview_snapshot.rs Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@crates/tokscale-cli/src/tui/ui/overview_snapshot.rs`:
- Around line 443-452: Update source_buckets so the donut chart contains only
source-level counts: Clean, Degraded, Partial, and Failed. Remove
rejected_records from the returned segments and adjust the array size and any
dependent rendering code accordingly; display rejected records separately if the
existing UI requires them.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5d8763e9-aad5-4265-90ec-9d3057c88649

📥 Commits

Reviewing files that changed from the base of the PR and between 1e38ad3 and 03b3e1d.

📒 Files selected for processing (3)
  • crates/tokscale-cli/src/tui/ui/donut.rs
  • crates/tokscale-cli/src/tui/ui/mod.rs
  • crates/tokscale-cli/src/tui/ui/overview_snapshot.rs

Comment thread crates/tokscale-cli/src/tui/ui/overview_snapshot.rs Outdated
@codspeed-hq

codspeed-hq Bot commented Jul 20, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

✅ 41 untouched benchmarks


Comparing feat/overview-snapshot-donuts (8bf6d73) with personal/local-clients (1e38ad3)

Open in CodSpeed

Rejected counts individual parser records rather than sources, so its
ring share contradicted the source-state health percentage shown in the
center (e.g. 9 clean + 1 degraded + 10 rejected rendered a ~45%-clean
ring under a 90% label). The donut now uses only the four source-state
counts, matching the center percentage; the exact rejected count stays
in the legend below.
@makoMakoGo
makoMakoGo merged commit c84bad8 into personal/local-clients Jul 20, 2026
8 checks passed
@makoMakoGo
makoMakoGo deleted the feat/overview-snapshot-donuts branch July 20, 2026 11:05
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant