feat(adminapi): split usage chart into stacked calls + cost panels

Replace the single overlay chart with two separate SVGs stacked
vertically. Calls on top, cost on bottom, same X-axis layout so day
columns line up exactly — you can drop a mental plumb line from a
calls bar straight onto the cost bar for the same day.

Each panel now shows proper axes:

* Y-axis line on the left with 3 tick labels (0, mid, max). Calls
  show as integers; cost uses priceFmt ($0.0001 precision when
  needed). Horizontal dashed guides at each tick help read values
  off the bars.
* Small left-of-axis label tags ("calls" / "cost") identify each
  panel without a legend.
* Shared X-axis labels render only under the bottom panel so the
  stack reads as a single figure.

Bar rendering keeps the adaptive width from the previous fix. Tooltips
now show both metrics on hover (calls + cost, newline-separated) so
hovering either bar tells the full story of that day. Rects animate
to full opacity on hover for quicker eye-tracking.

The old line-overlay approach was compact but confusing — when both
metrics peaked on the same day the two renderings looked interchangeable.
Stacked panels with independent Y-axes make "many cheap calls" vs "few
expensive calls" visually unambiguous and give concrete numeric reference
points at the three tick lines.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Alexey Panfilov

internal/adminapi/templates/partials_layout.html

@@ -39,9 +39,9 @@
   .usage-card__sub { font-size: 0.8em; color: var(--text-secondary, rgba(0,0,0,0.6)); margin-top: 0.25rem; }
   .usage-chart-wrap { margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(0,0,0,0.03); border-radius: var(--radius, 8px); max-width: 640px; }
   .usage-chart-title { font-size: 0.85em; margin-bottom: 0.5rem; color: var(--text-secondary, rgba(0,0,0,0.7)); }
-  .usage-chart { width: 100%; height: auto; display: block; max-height: 160px; }
-  .usage-chart-legend { font-size: 0.85em; display: flex; gap: 1.5rem; margin-top: 0.5rem; color: var(--text-secondary, rgba(0,0,0,0.7)); }
-  .usage-chart-legend__swatch { display: inline-block; width: 10px; height: 10px; margin-right: 0.25rem; border-radius: 2px; vertical-align: middle; }
+  .usage-chart { width: 100%; height: auto; display: block; max-height: 140px; }
+  .usage-chart + .usage-chart { margin-top: 0.25rem; }
+  .usage-chart rect:hover { opacity: 1 !important; }
   .usage-section-h { font-size: 0.95em; margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; }
   .usage-turns td { vertical-align: top; }
   .usage-turn__q { color: var(--text-primary, #000); margin-bottom: 0.25rem; font-size: 0.9em; }

internal/adminapi/templates/usage.html

@@ -56,40 +56,53 @@
     </div>
   </div>
 
-  <!-- Daily chart (last 30 days regardless of period toggle) -->
+  <!-- Daily charts (last 30 days regardless of period toggle) -->
   {{if gt .DailyChart.Days 0}}
+  {{$c := .DailyChart}}
   <div class="usage-chart-wrap">
     <div class="usage-chart-title">
-      Daily calls & cost — {{.DailyChart.Days}} day(s) with activity in the last 30.
-      <span style="color:var(--text-secondary);">Peak: {{.DailyChart.MaxCalls}} calls · {{priceFmt .DailyChart.MaxCost}}.</span>
+      Daily activity — {{$c.Days}} day(s) with usage in the last 30.
     </div>
-    <svg viewBox="0 0 {{.DailyChart.Width}} {{.DailyChart.Height}}" class="usage-chart" xmlns="http://www.w3.org/2000/svg">
-      <!-- baseline -->
-      <line x1="12" y1="{{.DailyChart.PlotBot}}" x2="{{sub .DailyChart.Width 12}}" y2="{{.DailyChart.PlotBot}}" stroke="#ccc" stroke-width="1" />
-      <!-- calls bars -->
-      {{range .DailyChart.Bars}}
-        <rect x="{{.X}}" y="{{.CallsY}}" width="{{.W}}" height="{{.CallsH}}" fill="#3b82f6" opacity="0.75" rx="1">
-          <title>{{.DayLabel}}: {{.Calls}} calls · {{priceFmt .CostUSD}}</title>
+
+    <!-- Calls chart (top) -->
+    <svg viewBox="0 0 {{$c.Width}} {{$c.Height}}" class="usage-chart" xmlns="http://www.w3.org/2000/svg">
+      <!-- y-axis line -->
+      <line x1="{{$c.PlotLeft}}" y1="{{$c.PlotTop}}" x2="{{$c.PlotLeft}}" y2="{{$c.PlotBot}}" stroke="#bbb" />
+      <!-- y-axis ticks + labels + horizontal guides -->
+      {{range $c.CallsYAxis}}
+        <line x1="{{sub $c.PlotLeft 3}}" y1="{{.Y}}" x2="{{$c.PlotLeft}}" y2="{{.Y}}" stroke="#bbb" />
+        <line x1="{{$c.PlotLeft}}" y1="{{.Y}}" x2="{{$c.PlotRight}}" y2="{{.Y}}" stroke="#eee" stroke-dasharray="2 3" />
+        <text x="{{sub $c.PlotLeft 6}}" y="{{add .Y 3}}" font-size="9" fill="var(--text-secondary, #666)" text-anchor="end">{{.Label}}</text>
+      {{end}}
+      <!-- y-axis label -->
+      <text x="10" y="{{add $c.PlotTop 4}}" font-size="9" fill="var(--text-secondary, #888)" font-weight="600">calls</text>
+      <!-- bars -->
+      {{range $c.CallsBars}}
+        <rect x="{{.X}}" y="{{.Y}}" width="{{.W}}" height="{{.H}}" fill="#3b82f6" opacity="0.8" rx="1">
+          <title>{{.DayLabel}}&#10;{{.Calls}} calls · {{priceFmt .CostUSD}}</title>
         </rect>
       {{end}}
-      <!-- cost line overlay -->
-      {{if .DailyChart.CostPath}}
-      <path d="{{.DailyChart.CostPath}}" fill="none" stroke="#10b981" stroke-width="1.5" />
+    </svg>
+
+    <!-- Cost chart (bottom) — same X-axis layout for day-by-day comparison -->
+    <svg viewBox="0 0 {{$c.Width}} {{$c.Height}}" class="usage-chart" xmlns="http://www.w3.org/2000/svg">
+      <line x1="{{$c.PlotLeft}}" y1="{{$c.PlotTop}}" x2="{{$c.PlotLeft}}" y2="{{$c.PlotBot}}" stroke="#bbb" />
+      {{range $c.CostYAxis}}
+        <line x1="{{sub $c.PlotLeft 3}}" y1="{{.Y}}" x2="{{$c.PlotLeft}}" y2="{{.Y}}" stroke="#bbb" />
+        <line x1="{{$c.PlotLeft}}" y1="{{.Y}}" x2="{{$c.PlotRight}}" y2="{{.Y}}" stroke="#eee" stroke-dasharray="2 3" />
+        <text x="{{sub $c.PlotLeft 6}}" y="{{add .Y 3}}" font-size="9" fill="var(--text-secondary, #666)" text-anchor="end">{{.Label}}</text>
       {{end}}
-      {{range .DailyChart.CostDots}}
-        <circle cx="{{.X}}" cy="{{.CostY}}" r="2.5" fill="#10b981">
-          <title>{{.DayLabel}}: {{priceFmt .CostUSD}} · {{.Calls}} calls</title>
-        </circle>
+      <text x="10" y="{{add $c.PlotTop 4}}" font-size="9" fill="var(--text-secondary, #888)" font-weight="600">cost</text>
+      {{range $c.CostBars}}
+        <rect x="{{.X}}" y="{{.Y}}" width="{{.W}}" height="{{.H}}" fill="#10b981" opacity="0.8" rx="1">
+          <title>{{.DayLabel}}&#10;{{priceFmt .CostUSD}} · {{.Calls}} calls</title>
+        </rect>
       {{end}}
-      <!-- x-axis labels (sparse) -->
-      {{range .DailyChart.XAxisTags}}
-        <text x="{{.X}}" y="{{sub $.DailyChart.Height 6}}" font-size="9" fill="var(--text-secondary, #666)" text-anchor="middle">{{.Label}}</text>
+      <!-- Shared X-axis labels: only on the bottom chart so the stack reads as one figure. -->
+      {{range $c.XAxisTags}}
+        <text x="{{.X}}" y="{{sub $c.Height 4}}" font-size="9" fill="var(--text-secondary, #666)" text-anchor="middle">{{.Label}}</text>
       {{end}}
     </svg>
-    <div class="usage-chart-legend">
-      <span><span class="usage-chart-legend__swatch" style="background:#3b82f6;opacity:0.75;"></span> calls</span>
-      <span><span class="usage-chart-legend__swatch" style="background:#10b981;"></span> cost (USD)</span>
-    </div>
   </div>
   {{end}}
 

internal/adminapi/usage.go

@@ -42,36 +42,45 @@ type expensiveTurnView struct {
 	Answer     string // first line, up to 200 chars
 }
 
-// dailyChart is a pre-sized SVG description rendered in the template — keeps
-// the template free of math and the HTML free of JS dependencies.
-//
-// Layout: calls are rendered as solid vertical bars (primary axis, left).
-// Cost is a line + point overlay on a secondary axis (right). Two visually
-// distinct elements — you can tell at a glance whether a day was "lots of
-// cheap calls" or "few expensive calls".
+// dailyChart describes two stacked SVG charts (calls on top, cost below)
+// that share the same X-axis layout so day columns line up exactly. Each
+// chart carries its own Y-axis ticks with labels. Pre-computed here so the
+// template stays math-free.
 type dailyChart struct {
-	Width     int
-	Height    int
-	PlotTop   int // y coordinate of the top of the plotting area
-	PlotBot   int // y coordinate of the axis line
-	Bars      []dailyBar
-	CostPath  string // SVG path data "M x y L x y L ..." for the cost line
-	CostDots  []dailyBar // reuses bar fields for dot positions (X + CostY)
-	MaxCalls  int
+	Width      int
+	Height     int // per-chart height (each chart renders separately)
+	PlotTop    int
+	PlotBot    int
+	PlotLeft   int // x-coordinate of the Y-axis line
+	PlotRight  int
+	Days       int
+	// Calls series (bar chart, top)
+	CallsBars  []chartBar
+	CallsYAxis []yTick
+	MaxCalls   int
+	// Cost series (bar chart, bottom)
+	CostBars  []chartBar
+	CostYAxis []yTick
 	MaxCost   float64
-	Days      int
-	XAxisTags []xAxisTag // sparse labels at first/middle/last day
+	// Shared X-axis — applied to the cost chart only (bottom of the stack)
+	XAxisTags []xAxisTag
 }
 
-type dailyBar struct {
+type chartBar struct {
 	X        int
 	W        int
-	CallsY   int
-	CallsH   int
-	CostY    int
+	Y        int
+	H        int
 	DayLabel string
-	Calls    int
-	CostUSD  float64
+	// Tooltip content — both metrics shown on hover so users don't need to
+	// cross-reference.
+	Calls   int
+	CostUSD float64
+}
+
+type yTick struct {
+	Y     int
+	Label string
 }
 
 type xAxisTag struct {
@@ -191,25 +200,27 @@ func resolvePeriod(period string) (time.Time, string) {
 	}
 }
 
-// buildDailyChart turns a slice of UsageDayBucket into SVG coordinates. Calls
-// are bars; cost is an overlaid line with markers. Size is fixed 480×120;
-// bar width is adaptive so sparse data (1-3 days) still looks like a chart
-// and not one lonely pixel-wide sliver.
+// buildDailyChart produces two synchronized SVG chart descriptions (calls
+// on top, cost on bottom) sharing padLeft/padRight + slot widths so day
+// columns line up vertically. Size: 520×100 per chart, Y-axis on the left
+// with up to 3 tick labels (0 / mid / max).
 func buildDailyChart(buckets []llm.UsageDayBucket) dailyChart {
 	const (
-		width     = 480
-		height    = 120
-		padLeft   = 12
-		padRight  = 12
-		padTop    = 10
-		padBottom = 22
+		width     = 520
+		height    = 100
+		padLeft   = 48 // room for Y-axis labels
+		padRight  = 8
+		padTop    = 8
+		padBottom = 20
 	)
 	c := dailyChart{
-		Width:   width,
-		Height:  height,
-		PlotTop: padTop,
-		PlotBot: height - padBottom,
-		Days:    len(buckets),
+		Width:     width,
+		Height:    height,
+		PlotTop:   padTop,
+		PlotBot:   height - padBottom,
+		PlotLeft:  padLeft,
+		PlotRight: width - padRight,
+		Days:      len(buckets),
 	}
 	if len(buckets) == 0 {
 		return c
@@ -231,55 +242,62 @@ func buildDailyChart(buckets []llm.UsageDayBucket) dailyChart {
 		c.MaxCost = 0.0001
 	}
 
-	plotW := width - padLeft - padRight
+	plotW := c.PlotRight - c.PlotLeft
 	plotH := c.PlotBot - c.PlotTop
 	slot := float64(plotW) / float64(len(buckets))
-	// Bars are up to 60% of a slot, capped at 28px to look sensible for
-	// sparse data without becoming huge.
-	barW := int(slot * 0.6)
+	barW := int(slot * 0.65)
 	if barW < 2 {
 		barW = 2
 	}
 	if barW > 28 {
 		barW = 28
 	}
 
-	var pathBuilder strings.Builder
 	for i, b := range buckets {
-		slotCenter := padLeft + int((float64(i)+0.5)*slot)
+		slotCenter := c.PlotLeft + int((float64(i)+0.5)*slot)
 		barX := slotCenter - barW/2
+		dayLabel := b.Day.Format("01-02")
 
+		// Calls bar
 		callsH := int(float64(b.Calls) / float64(c.MaxCalls) * float64(plotH))
 		if callsH < 0 {
 			callsH = 0
 		}
-		costY := c.PlotBot - int(b.CostUSD/c.MaxCost*float64(plotH))
-
-		bar := dailyBar{
-			X:        barX,
-			W:        barW,
-			CallsY:   c.PlotBot - callsH,
-			CallsH:   callsH,
-			CostY:    costY,
-			DayLabel: b.Day.Format("01-02"),
-			Calls:    b.Calls,
-			CostUSD:  b.CostUSD,
-		}
-		c.Bars = append(c.Bars, bar)
-		c.CostDots = append(c.CostDots, dailyBar{X: slotCenter, CostY: costY, DayLabel: bar.DayLabel, Calls: bar.Calls, CostUSD: bar.CostUSD})
+		c.CallsBars = append(c.CallsBars, chartBar{
+			X: barX, W: barW,
+			Y: c.PlotBot - callsH, H: callsH,
+			DayLabel: dayLabel, Calls: b.Calls, CostUSD: b.CostUSD,
+		})
 
-		if i == 0 {
-			fmt.Fprintf(&pathBuilder, "M %d %d", slotCenter, costY)
-		} else {
-			fmt.Fprintf(&pathBuilder, " L %d %d", slotCenter, costY)
+		// Cost bar
+		costH := int(b.CostUSD / c.MaxCost * float64(plotH))
+		if costH < 0 {
+			costH = 0
 		}
+		c.CostBars = append(c.CostBars, chartBar{
+			X: barX, W: barW,
+			Y: c.PlotBot - costH, H: costH,
+			DayLabel: dayLabel, Calls: b.Calls, CostUSD: b.CostUSD,
+		})
+	}
+
+	// Y-axis ticks: 0, max/2, max — 3 lines only, keeps chart uncluttered
+	// while giving the reader concrete numbers to reference.
+	c.CallsYAxis = []yTick{
+		{Y: c.PlotBot, Label: "0"},
+		{Y: c.PlotTop + (c.PlotBot-c.PlotTop)/2, Label: intFmt(c.MaxCalls / 2)},
+		{Y: c.PlotTop, Label: intFmt(c.MaxCalls)},
+	}
+	c.CostYAxis = []yTick{
+		{Y: c.PlotBot, Label: "$0"},
+		{Y: c.PlotTop + (c.PlotBot-c.PlotTop)/2, Label: priceFmt(c.MaxCost / 2)},
+		{Y: c.PlotTop, Label: priceFmt(c.MaxCost)},
 	}
-	c.CostPath = pathBuilder.String()
 
-	// X-axis labels: first, middle, last — keeps the axis readable on both
-	// 1-day and 30-day views without collisions.
+	// X-axis — sparse labels at first / middle / last day, applied to the
+	// bottom chart in the template.
 	addTag := func(i int) {
-		slotCenter := padLeft + int((float64(i)+0.5)*slot)
+		slotCenter := c.PlotLeft + int((float64(i)+0.5)*slot)
 		c.XAxisTags = append(c.XAxisTags, xAxisTag{X: slotCenter, Label: buckets[i].Day.Format("01-02")})
 	}
 	addTag(0)