fix(adminapi): shrink daily chart + replace paired bars with bar+line

The chart was too large (720×160) and the two bars per day looked
identical whenever both metrics peaked on the same day — each was
independently normalised to its own axis max, so visually "calls at
100% of calls-max" is the same height as "cost at 100% of cost-max".

New layout, 480×120 (CSS-capped to 160px tall, 640px wide):

* Calls remain as vertical bars on the primary axis.
* Cost moves to a line + point overlay on the right-hand axis. Line
  shape is distinct from bar shape, so a day with many cheap calls
  vs. few expensive ones reads correctly at a glance.
* Bar width is adaptive (60% of a slot, capped at 28px) so a 2-day
  dataset shows thick readable bars instead of 8px slivers in a wide
  empty chart.
* X-axis gets sparse labels at first / middle / last day (avoids
  collisions at 30 days, still informative at 1 day).
* Tooltip on both the bar and the cost dot shows both numbers.

Peak summary in the title keeps the old "calls peak / cost peak"
annotation so exact values are one glance away.

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

Author: Alexey Panfilov

internal/adminapi/templates/partials_layout.html

@@ -37,9 +37,9 @@
   .usage-card__label { font-size: 0.8em; color: var(--text-secondary, rgba(0,0,0,0.6)); text-transform: uppercase; letter-spacing: 0.05em; }
   .usage-card__value { font-size: 1.5em; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
   .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); }
+  .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; }
+  .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-section-h { font-size: 0.95em; margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; }

internal/adminapi/templates/usage.html

@@ -60,22 +60,34 @@
   {{if gt .DailyChart.Days 0}}
   <div class="usage-chart-wrap">
     <div class="usage-chart-title">
-      Daily calls & cost (30-day window) — bar height is relative to the 30-day max.
-      <span style="color:var(--text-secondary);">Calls peak {{.DailyChart.MaxCalls}}, cost peak {{priceFmt .DailyChart.MaxCost}}.</span>
+      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>
     </div>
     <svg viewBox="0 0 {{.DailyChart.Width}} {{.DailyChart.Height}}" class="usage-chart" xmlns="http://www.w3.org/2000/svg">
-      <line x1="20" y1="{{sub .DailyChart.Height 20}}" x2="{{sub .DailyChart.Width 10}}" y2="{{sub .DailyChart.Height 20}}" stroke="#ccc" />
+      <!-- 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="8" height="{{.CallsH}}" fill="#3b82f6">
-          <title>{{.DayLabel}}: {{.Calls}} calls, {{priceFmt .CostUSD}}</title>
-        </rect>
-        <rect x="{{add .X 9}}" y="{{.CostY}}" width="8" height="{{.CostH}}" fill="#10b981">
-          <title>{{.DayLabel}}: {{priceFmt .CostUSD}}, {{.Calls}} calls</title>
+        <rect x="{{.X}}" y="{{.CallsY}}" width="{{.W}}" height="{{.CallsH}}" fill="#3b82f6" opacity="0.75" rx="1">
+          <title>{{.DayLabel}}: {{.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" />
+      {{end}}
+      {{range .DailyChart.CostDots}}
+        <circle cx="{{.X}}" cy="{{.CostY}}" r="2.5" fill="#10b981">
+          <title>{{.DayLabel}}: {{priceFmt .CostUSD}} · {{.Calls}} calls</title>
+        </circle>
+      {{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>
+      {{end}}
     </svg>
     <div class="usage-chart-legend">
-      <span><span class="usage-chart-legend__swatch" style="background:#3b82f6;"></span> calls</span>
+      <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>

internal/adminapi/usage.go

@@ -44,24 +44,39 @@ type expensiveTurnView struct {
 
 // 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".
 type dailyChart struct {
-	Width    int
-	Height   int
-	Bars     []dailyBar
-	MaxCalls int
-	MaxCost  float64
-	Days     int
+	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
+	MaxCost   float64
+	Days      int
+	XAxisTags []xAxisTag // sparse labels at first/middle/last day
 }
 
 type dailyBar struct {
-	X         int
-	CallsY    int
-	CallsH    int
-	CostY     int
-	CostH     int
-	DayLabel  string // short label for x-axis, e.g. "04-20"
-	Calls     int
-	CostUSD   float64
+	X        int
+	W        int
+	CallsY   int
+	CallsH   int
+	CostY    int
+	DayLabel string
+	Calls    int
+	CostUSD  float64
+}
+
+type xAxisTag struct {
+	X     int
+	Label string
 }
 
 func (s *Server) handleUsage(w http.ResponseWriter, r *http.Request) {
@@ -176,14 +191,31 @@ func resolvePeriod(period string) (time.Time, string) {
 	}
 }
 
-// buildDailyChart turns a slice of UsageDayBucket into SVG coordinates. The
-// chart is a fixed 600×160 box with two bars per day (calls + cost, grouped).
+// 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.
 func buildDailyChart(buckets []llm.UsageDayBucket) dailyChart {
-	c := dailyChart{Width: 720, Height: 160, Days: len(buckets)}
+	const (
+		width     = 480
+		height    = 120
+		padLeft   = 12
+		padRight  = 12
+		padTop    = 10
+		padBottom = 22
+	)
+	c := dailyChart{
+		Width:   width,
+		Height:  height,
+		PlotTop: padTop,
+		PlotBot: height - padBottom,
+		Days:    len(buckets),
+	}
 	if len(buckets) == 0 {
 		return c
 	}
-	// Normalize — find max for each axis.
+	sort.Slice(buckets, func(i, j int) bool { return buckets[i].Day.Before(buckets[j].Day) })
+
 	for _, b := range buckets {
 		if b.Calls > c.MaxCalls {
 			c.MaxCalls = b.Calls
@@ -198,24 +230,64 @@ func buildDailyChart(buckets []llm.UsageDayBucket) dailyChart {
 	if c.MaxCost == 0 {
 		c.MaxCost = 0.0001
 	}
-	// Layout: barWidth pair per day, 20px of padding total. For 30-day view we
-	// want ~10px per day comfortably.
-	sort.Slice(buckets, func(i, j int) bool { return buckets[i].Day.Before(buckets[j].Day) })
-	dayWidth := (c.Width - 40) / max(len(buckets), 1)
+
+	plotW := width - padLeft - padRight
+	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)
+	if barW < 2 {
+		barW = 2
+	}
+	if barW > 28 {
+		barW = 28
+	}
+
+	var pathBuilder strings.Builder
 	for i, b := range buckets {
-		x := 20 + i*dayWidth
-		callsH := int(float64(b.Calls) / float64(c.MaxCalls) * 140)
-		costH := int(b.CostUSD / c.MaxCost * 140)
-		c.Bars = append(c.Bars, dailyBar{
-			X:        x,
-			CallsY:   c.Height - 20 - callsH,
+		slotCenter := padLeft + int((float64(i)+0.5)*slot)
+		barX := slotCenter - barW/2
+
+		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:    c.Height - 20 - costH,
-			CostH:    costH,
+			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})
+
+		if i == 0 {
+			fmt.Fprintf(&pathBuilder, "M %d %d", slotCenter, costY)
+		} else {
+			fmt.Fprintf(&pathBuilder, " L %d %d", slotCenter, costY)
+		}
+	}
+	c.CostPath = pathBuilder.String()
+
+	// X-axis labels: first, middle, last — keeps the axis readable on both
+	// 1-day and 30-day views without collisions.
+	addTag := func(i int) {
+		slotCenter := padLeft + int((float64(i)+0.5)*slot)
+		c.XAxisTags = append(c.XAxisTags, xAxisTag{X: slotCenter, Label: buckets[i].Day.Format("01-02")})
+	}
+	addTag(0)
+	if len(buckets) >= 3 {
+		addTag(len(buckets) / 2)
+	}
+	if len(buckets) > 1 {
+		addTag(len(buckets) - 1)
 	}
 	return c
 }