Home: one time range across the health block, and failures that follow it

The health screen was fixed at 24 hours everywhere except its lists, which
were fixed at nothing: `failuresQueryOptions` read the newest 100 rows and
`HealthActivity` filtered them client-side, so on a busy engine the failures
list covered whatever few minutes 100 rows happened to span while the chart
beside it spanned a day — and pinning an older minute showed an empty card.

One `RangePicker` now sits on the Health heading and governs the whole block:
the tiles, the flow table, both charts and both lists. Presets are 1h / 6h /
24h / 7d — the collector prunes at `OBS_RETENTION_DAYS` (30), so a week is
behind the last one. The longer windows ask for coarser buckets, since a week
of minute rollups is ten thousand points nobody can see.

Failures get the escape hatch the runs already had: a pinned minute is asked
for with `since`/`until` rather than filtered out of what is held, and the
list itself is bound to the selected range. `RUN_DEPTH`/`EVENT_DEPTH` become
one `LIST_DEPTH`, which now buys coverage of the window on screen instead of
a fixed newest-N — narrowing the range is what makes the same rows reach the
whole of it. The "Failures (24h)" tile counts errors over the selected window
from the rollups the table is drawn from, so tile, column and chart agree.

The node-panel and edge trend curves get no picker. They are a Redis ring of
the last 120 values per message with no window to ask for, so hovering one
reveals what it actually shows — how many readings, and the span they cover.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XC2jX6Hdj7pxGGKzBTrbqB

frontend/src/components/Flow/MessageSparkline.tsx

@@ -3,6 +3,11 @@ import { useEffect, useState } from "react"
 
 import type { HistoryPoint } from "@/client"
 import { Sparkline } from "@/components/Common/Sparkline"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { qualify } from "./deriveEdges"
 import { useLiveValue } from "./liveStore"
 import { messageHistoryQueryOptions } from "./queries"
@@ -16,6 +21,27 @@ function describe(value: unknown): string {
   return JSON.stringify(value) ?? String(value)
 }
 
+/** A stretch of time in the coarsest unit that still says it. */
+function span(seconds: number): string {
+  if (seconds < 90) return `${Math.round(seconds)}s`
+  if (seconds < 5400) return `${Math.round(seconds / 60)}m`
+  return `${Math.round(seconds / 3600)}h`
+}
+
+/**
+ * What the curve is actually showing.
+ *
+ * These are a ring of the last `WINDOW` values per message, not a window of
+ * time — a message that fires twice an hour and one that fires at 10 Hz draw
+ * the same width for wildly different spans. The readings themselves are what
+ * says which, so the caption reads it off them rather than claiming a range.
+ */
+function caption(points: HistoryPoint[]): string {
+  const readings = `The last ${points.length} reading${points.length === 1 ? "" : "s"}`
+  const covered = points[points.length - 1].ts - points[0].ts
+  return covered > 0 ? `${readings}, over ${span(covered)}.` : `${readings}.`
+}
+
 /**
  * The name only settles once typing stops. Without this, every keystroke in the
  * message field would ask the server for a history.
@@ -93,6 +119,17 @@ export function MessageSparkline({
     )
   }
 
-  // The value is live here, so the dot on the newest reading is earned.
-  return <Sparkline points={points} />
+  // The value is live here, so the dot on the newest reading is earned. The
+  // caption is on hover rather than beside the curve: these sit one per port
+  // in a dense panel, and a line of prose each would crowd it out.
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div>
+          <Sparkline points={points} />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{caption(points)}</TooltipContent>
+    </Tooltip>
+  )
 }