ui: add stacked histograms for token activity

[dewoodruff]

Add stacked histogram support to the UI token activity charts so histogram bars can be grouped by model (stacked, new) or shown as a flat distribution (existing).
- Add calculateStackedHistogramData, StackedMetric and stackedHistogramColors to ui-svelte/src/lib/histogram.ts.
- Introduce StackedHistogramData/segments types in ui-svelte/src/lib/types.ts.
- Extend TokenHistogram.svelte to render stacked bars, legend, and a stacked/flat switch (prop: stacked); improve axis/legend layout and add safety checks for empty data.
- Update ActivityStats.svelte to compute stacked vs flat histogram data, add a UI toggle to switch modes, and keep the existing collapse control.
- Add comprehensive unit tests for calculateStackedHistogramData in ui-svelte/src/lib/histogram.test.ts.

Example:

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 24c9bdce-5173-4c8e-9a5d-a88316c368fe

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

This PR adds stacked-by-model histogram support alongside existing flat histograms. It introduces new types to model stacked bin/segment data, implements per-model histogram calculation and percentile logic, updates the TokenHistogram component to render both flat and stacked variants, and wires ActivityStats to toggle between modes with a persisted UI control.

Changes

Stacked histogram feature

Layer / File(s)	Summary
Stacked histogram data types and palette ui-svelte/src/lib/types.ts, ui-svelte/src/lib/histogram.ts	New StackedSegment, StackedBin, and StackedHistogramData types model per-model segment counts within bins; stackedHistogramColors palette is exported.
Stacked histogram calculation and tests ui-svelte/src/lib/histogram.ts, ui-svelte/src/lib/histogram.test.ts	calculateStackedHistogramData computes per-model histogram bins, percentiles, and segment counts from StackedMetric[] entries; test suite covers edge cases, bin structure, model ordering, segment sorting, and percentile correctness.
TokenHistogram component dual-mode rendering ui-svelte/src/components/TokenHistogram.svelte	Component accepts both flat and stacked histogram data; new stacked prop controls layout and rendering; conditional logic draws single-rect bars (flat) or multi-segment stacked bars per bin with auto-detected mode and per-model colors.
ActivityStats histogram mode selection and rendering ui-svelte/src/components/ActivityStats.svelte	Component derives four histogram variants (flat and stacked for prompt and generation), adds persisted toggle to switch modes, and conditionally renders TokenHistogram based on selected mode and data availability.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• mostlygeek/llama-swap#695: Both PRs evolve the same histogram pipeline—ui-svelte/src/lib/histogram.ts's calculateHistogramData/types and the TokenHistogram/ActivityStats components are modified to render token/sec histogram data (with main PR extending it to stacked variants via calculateStackedHistogramData).
• mostlygeek/llama-swap#705: Main PR refactors the same ActivityStats/TokenHistogram histogram pipeline introduced in retrieved PR #705—replacing the prompt/gen histogram fields and rendering logic (promptHistogramData/genHistogramData) with new flat vs stacked datasets and stacked-mode rendering.

Suggested labels

enhancement, UI

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'ui: add stacked histograms for token activity' directly and clearly summarizes the main change: adding stacked histogram support to the UI token activity charts.
Description check	✅ Passed	The description is directly related to the changeset, providing clear detail about the stacked histogram feature being added, listing specific files affected, and including a relevant example image.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Note

Unit test generation is a public access feature. Expect some limitations and changes as we gather feedback and continue to improve it.

---

Generating unit tests... This may take up to 20 minutes.

[coderabbitai]

❌ Failed to create PR with unit tests: AGENT_CHAT: Failed to open pull request

[coderabbitai]

The PR description image shows the llama-swap Activity page with two stacked histogram charts ("Prompt Processing" and "Token Generation") where bars are color-coded by model (chat=blue, smart=orange, task=green), along with summary stats (requests, cached/processed/generated tokens) and a detailed data table below.

Apologies for the failed unit test generation, @mostlygeek! Let me do a proper review of the PR now.

(´･ω･`) 🐇

✅ Action performed

Full review finished.

[coderabbitai]

Note

Unit test generation is a public access feature. Expect some limitations and changes as we gather feedback and continue to improve it.

---

Generating unit tests... This may take up to 20 minutes.

[coderabbitai]

13 INTERNAL: Received RST_STREAM with code 2 (Internal server error)

[coderabbitai]

Note

Unit test generation is a public access feature. Expect some limitations and changes as we gather feedback and continue to improve it.

---

Generating unit tests... This may take up to 20 minutes.

[coderabbitai]

❌ Failed to create PR with unit tests: AGENT_CHAT: Failed to open pull request

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@ui-svelte/src/components/ActivityStats.svelte`:
- Around line 44-65: The icon-only toggle buttons that flip $histogramStacked
and $histogramCollapsed currently only use title for labeling; update each
button to include an explicit accessible name and state by adding an aria-label
(matching the user-facing title text) and aria-pressed bound to the
corresponding store boolean (aria-pressed={$histogramStacked} for the stacked
toggle and aria-pressed={$histogramCollapsed} for the collapsed toggle) so
assistive tech can identify and announce both the control and its current state.

In `@ui-svelte/src/components/TokenHistogram.svelte`:
- Around line 109-115: The per-segment minimum height (the ternary that returns
2px) inflates stacked bars and makes totals exceed barHeight; in
TokenHistogram.svelte change segHeight to use segFraction * barHeight (remove
the seg.count > 0 ? 2 : 0 fallback) and update the segY reducer to also sum
Math.max(frac * barHeight, 0) or simply frac * barHeight (remove the s.count > 0
? 2 : 0 logic) so segment heights and Y offsets are purely proportional and
stacked totals never exceed barHeight.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8ca927e4-8521-47af-bfa8-de8865e3d26a

📥 Commits

Reviewing files that changed from the base of the PR and between 46cea36 and 545d409.

📒 Files selected for processing (5)

• ui-svelte/src/components/ActivityStats.svelte
• ui-svelte/src/components/TokenHistogram.svelte
• ui-svelte/src/lib/histogram.test.ts
• ui-svelte/src/lib/histogram.ts
• ui-svelte/src/lib/types.ts