feat(ui): visual cost bars, savings hero, and daily trend chart#418
Merged
Conversation
Overhaul the Cost Intelligence page and per-session cost cards with CodexBar-inspired visual elements: - Savings hero stat: prominent centered card showing total savings amount and percentage in large colored text - Cost progress bars: spend composition (conversation vs overhead), savings ratio with ghost counterfactual outline, cache hit rate - Daily cost trend chart: CSS-only bar chart showing cost per day over the last 14 days using new computeDailyCosts() in cost-tracker.ts - Inline mini-bars: cache hit column in per-session tables now shows a visual progress bar alongside the percentage - Color-coded savings cells: green/red background tinting on savings and avoided-compaction cells - Trend arrows: spend stat pill shows directional indicator comparing live vs historical savings rate All changes are pure server-rendered HTML+CSS with no JS framework dependencies. Dark/light mode works via existing prefers-color-scheme.
…tency - C1: Add display:block to .mini-bar-fill (span elements ignore height/width) - M1: Escape opts.value in renderCostBar, rename detail fields to detailLeftHtml/detailRightHtml to signal trust boundary - M2: Accept preloaded HistoricalEstimates in computeDailyCosts() to avoid redundant DB scans when caller already has the data - M3: Use consistent rate formula for trend arrows (netSavings/counterfactual where counterfactual = actualSpend + netSavings for both live and historical) - L3: Handle combinedNetSavings === 0 edge case with 'Breaking even' state - L2: Use Math.abs() instead of negation for defensive formatting
BYK
added a commit
that referenced
this pull request
May 20, 2026
## Summary Follow-up fix for #418 — the daily cost trend chart was rendering but bars had zero height, making them invisible. ## Root Causes 1. **CSS layout bug**: `.day-col` had no explicit height, so percentage-based `height: X%` on `.day-bar` resolved to `auto` (effectively 0px, leaving only `min-height: 2px`). The parent `.daily-chart` had `height: 120px` but it didn't propagate through the flex column. 2. **Zero-cost live sessions**: The live session loop added entries with `cost: 0` to today's bucket, inflating session count without contributing cost. ## Fix - Give `.day-col` explicit `height: 100%` and `justify-content: flex-end` so bars anchor to the bottom - Switch from percentage bar heights to pixel heights calculated server-side (`barMaxPx = 90`, leaving room for the date label) - Add `cost > 0` guard when bucketing live sessions - Add `flex-shrink: 0` on bar and label to prevent compression
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Overhauls the Cost Intelligence page (
/ui/costs) and per-session cost cards with CodexBar-inspired visual elements, making cost/savings data visually scannable via colored progress bars, ratio visualizations, and clear visual hierarchy.Changes
Savings Hero Stat
$X.XX saved (Y%)in large green text (or red for net overhead)Cost Progress Bars
renderCostBar()andrenderMiniBar()helpers inui.tsDaily Cost Trend Chart
computeDailyCosts()function incost-tracker.tsaggregates historical + live session data by datePer-Session Table Enhancements
Trend Indicators
Technical Notes
prefers-color-schememedia queriesui.ts(CSS + rendering) andcost-tracker.ts(daily aggregation)