Add 30d range and sync health grid

Author: k0ngk0ng

README.md

@@ -92,7 +92,7 @@ All endpoints are mounted under `<APP_BASE_PATH>/api/v1`. Protected endpoints re
 | POST | `/auth/logout` | clear cookie |
 | GET | `/status` | drain status (last pop, errors, totals) |
 | POST | `/sync` | trigger metadata refresh |
-| GET | `/usage/overview` | summary + hourly + daily + 30×96 health grid |
+| GET | `/usage/overview` | summary + hourly + daily + range-sized 15-minute health grid |
 | GET | `/usage/analysis` | aggregations by API / model / both |
 | GET | `/usage/events` | paginated raw events |
 | GET | `/usage/events/filters` | distinct models + sources |
@@ -109,7 +109,7 @@ All endpoints are mounted under `<APP_BASE_PATH>/api/v1`. Protected endpoints re
 | GET | `/aliases/export` | JSON dump of all aliases |
 | POST | `/aliases/import` | bulk merge / replace |
 
-Common query params: `range=all|today|4h|8h|12h|24h|7d|custom`, `start`, `end`, `model` (repeatable), `source` (repeatable), `auth_index`, `result=success|failed`, `page`, `page_size`.
+Common query params: `range=all|today|4h|8h|12h|24h|7d|30d|custom`, `start`, `end`, `model` (repeatable), `source` (repeatable), `auth_index`, `result=success|failed`, `page`, `page_size`.
 
 ## Architecture
 

internal/storage/sqlite/usage.go

@@ -432,7 +432,7 @@ func costFromTotals(model string, input, output, cached int64, prices map[string
 	return computeCost(model, input, output, cached, prices)
 }
 
-// BuildUsageOverview returns the summary, hourly+daily series and a 30×96 health grid.
+// BuildUsageOverview returns the summary, hourly+daily series and a range-sized 15-minute health grid.
 func (s *Store) BuildUsageOverview(ctx context.Context, f storage.UsageFilter, prices map[string]storage.ModelPriceSetting) (*storage.UsageOverview, error) {
 	now := time.Now().UTC()
 
@@ -581,8 +581,16 @@ func (s *Store) bucketSeriesDaily(ctx context.Context, f storage.UsageFilter, no
 func (s *Store) healthGrid(ctx context.Context, f storage.UsageFilter, now time.Time) ([][]storage.HealthCell, error) {
 	healthFilter := f
 	end := startOfDay(now).Add(24 * time.Hour)
-	healthFilter.End = end
-	healthFilter.Start = end.Add(-30 * 24 * time.Hour)
+	if healthFilter.HasRange() {
+		healthFilter.Start = startOfDay(healthFilter.Start)
+		healthFilter.End = startOfDay(healthFilter.End.Add(-time.Nanosecond)).Add(24 * time.Hour)
+		if healthFilter.End.Sub(healthFilter.Start) > 30*24*time.Hour {
+			healthFilter.Start = healthFilter.End.Add(-30 * 24 * time.Hour)
+		}
+	} else {
+		healthFilter.End = end
+		healthFilter.Start = end.Add(-30 * 24 * time.Hour)
+	}
 	type row struct {
 		Bucket string
 		Total  int64
@@ -606,8 +614,12 @@ func (s *Store) healthGrid(ctx context.Context, f storage.UsageFilter, now time.
 		bucketMap[t.UTC()] = storage.HealthCell{Bucket: t.UTC(), Total: r.Total, Failed: r.Failed}
 	}
 
-	grid := make([][]storage.HealthCell, 30)
-	for d := 0; d < 30; d++ {
+	days := int(healthFilter.End.Sub(healthFilter.Start).Hours() / 24)
+	if days < 1 {
+		days = 1
+	}
+	grid := make([][]storage.HealthCell, days)
+	for d := 0; d < days; d++ {
 		row := make([]storage.HealthCell, 96)
 		dayStart := healthFilter.Start.Add(time.Duration(d) * 24 * time.Hour)
 		for c := 0; c < 96; c++ {

internal/storage/types.go

@@ -91,7 +91,7 @@ type APIKeyOverview struct {
 
 // UsageFilter parameterizes all aggregation/listing queries.
 type UsageFilter struct {
-	Range     string // all | today | 4h | 8h | 12h | 24h | 7d | custom
+	Range     string // all | today | 4h | 8h | 12h | 24h | 7d | 30d | custom
 	Start     time.Time
 	End       time.Time
 	Models    []string
@@ -226,7 +226,7 @@ type UsageBucket struct {
 	Cost            float64   `json:"cost"`
 }
 
-// HealthCell is one cell of the 30-day health heatmap (15-minute spans by default).
+// HealthCell is one cell of the range-sized health heatmap (15-minute spans by default).
 type HealthCell struct {
 	Bucket  time.Time `json:"bucket"`
 	Total   int64     `json:"total"`

internal/usage/service.go

@@ -95,6 +95,10 @@ func ParseFilter(rangeKey string, startStr, endStr string, models, sources, apiK
 		end := startOfDay(now).Add(24 * time.Hour)
 		f.End = end
 		f.Start = end.Add(-7 * 24 * time.Hour)
+	case "30d":
+		end := startOfDay(now).Add(24 * time.Hour)
+		f.End = end
+		f.Start = end.Add(-30 * 24 * time.Hour)
 	case "custom":
 		if strings.TrimSpace(startStr) == "" || strings.TrimSpace(endStr) == "" {
 			return f, errors.New("custom range requires start and end")

web/src/api/types.ts

@@ -14,6 +14,7 @@ export type RangeKey =
   | "12h"
   | "24h"
   | "7d"
+  | "30d"
   | "custom";
 
 export type ResultFilter = "" | "success" | "failed";

web/src/components/FilterBar.tsx

@@ -10,6 +10,7 @@ const RANGE_PRESETS: { key: RangeKey; label: string }[] = [
   { key: "12h", label: "12h" },
   { key: "24h", label: "24h" },
   { key: "7d", label: "7d" },
+  { key: "30d", label: "30d" },
   { key: "all", label: "All" },
   { key: "custom", label: "Custom" },
 ];

web/src/components/HealthGrid.tsx

@@ -33,11 +33,12 @@ export default function HealthGrid({ grid }: Props) {
     hours: hourlyCells(day),
   }));
   const maxTotal = Math.max(0, ...days.flatMap((day) => day.hours.map((cell) => cell.total)));
+  const title = `${days.length}-day request health by hour`;
 
   return (
     <div className="bg-panel border border-border rounded-lg p-4">
       <div className="flex items-center justify-between mb-3">
-        <h3 className="text-sm font-medium">30-day request health by hour</h3>
+        <h3 className="text-sm font-medium">{title}</h3>
         <Legend />
       </div>
       <div className="overflow-x-auto pb-1">

web/src/pages/Overview.tsx

@@ -37,7 +37,7 @@ export default function Overview() {
   }, [filter, tick]);
 
   const summary = data?.summary;
-  const useDaily = filter.range === "7d" || filter.range === "all";
+  const useDaily = filter.range === "7d" || filter.range === "30d" || filter.range === "all";
   const series = useDaily ? data?.daily_series || [] : data?.hourly_series || [];
 
   return (
@@ -104,7 +104,7 @@ export default function Overview() {
         </div>
 
         <div>
-          <h2 className="text-sm uppercase tracking-wider text-muted mb-2">30-day health</h2>
+          <h2 className="text-sm uppercase tracking-wider text-muted mb-2">Health</h2>
           {data && <HealthGrid grid={data.health_grid || []} />}
         </div>
       </div>