From 32558118c564bf11903336ceb2da741ddf8000dd Mon Sep 17 00:00:00 2001
From: Alex Soffronow Pagonidis
 <237136924+alex-clickhouse@users.noreply.github.com>
Date: Tue, 25 Aug 2026 22:17:45 +0000
Subject: [PATCH] Diagnostics: give the daily-cost bars a height to resolve
 against

The "Daily cost" chart rendered as bare date labels with no bars.

Each bar carries style={{ height: `${heightPct}%` }}, but its parent
column was a flex item in an `items-end` row, so the column's cross
size was content-based. A percentage height against an auto-height
containing block resolves to `auto`, and the bar has no content of its
own, so every bar computed to 0px -- including the tallest one, which
asks for 100%.

The column is now h-full, and the bar sits in a `flex-1 min-h-0` track
that takes the space left over after the date label. The percentage
resolves against that track, so the chart keeps its 80px total height
and the labels stay put.

Measured in Chromium against the built app and the real /api/diagnostics
response (8 days): bars were 0px across the board, and are now 1.6-64.5px
in proportion to cost. The hover tooltip still shows on the bar.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/pages/DiagnosticsPage.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/DiagnosticsPage.tsx b/web/src/pages/DiagnosticsPage.tsx
index 1146363c..65dd9808 100644
--- a/web/src/pages/DiagnosticsPage.tsx
+++ b/web/src/pages/DiagnosticsPage.tsx
@@ -176,14 +176,20 @@ export function DiagnosticsPage() {
                     const heightPct = maxCost > 0 ? Math.max(2, (cost / maxCost) * 100) : 2;
                     const dateLabel = day.date?.slice(5) || ''; // MM-DD
                     return (
-                      <div key={day.date} className="flex-1 flex flex-col items-center gap-0.5 min-w-0">
-                        <div
-                          className="w-full bg-accent/30 rounded-t-sm hover:bg-accent/50 transition-colors relative group"
-                          style={{ height: `${heightPct}%` }}
-                        >
-                          <div className="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block z-10
-                            bg-surface-raised border border-border-subtle rounded px-1.5 py-0.5 text-[10px] text-text-secondary whitespace-nowrap shadow-lg">
-                            {formatTokens((day.input_tokens || 0) + (day.output_tokens || 0))} &middot; ${cost.toFixed(2)}
+                      <div key={day.date} className="flex-1 flex flex-col items-center gap-0.5 min-w-0 h-full">
+                        {/* Bar track. The bar's percentage height needs a parent
+                            with a definite height to resolve against, so the
+                            column is h-full and the track takes the space left
+                            over after the date label. */}
+                        <div className="flex-1 w-full flex items-end min-h-0">
+                          <div
+                            className="w-full bg-accent/30 rounded-t-sm hover:bg-accent/50 transition-colors relative group"
+                            style={{ height: `${heightPct}%` }}
+                          >
+                            <div className="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block z-10
+                              bg-surface-raised border border-border-subtle rounded px-1.5 py-0.5 text-[10px] text-text-secondary whitespace-nowrap shadow-lg">
+                              {formatTokens((day.input_tokens || 0) + (day.output_tokens || 0))} &middot; ${cost.toFixed(2)}
+                            </div>
                           </div>
                         </div>
                         <span className="text-[9px] text-text-faint tabular-nums">{dateLabel}</span>