Implement ticket 057: fix rate() line charts for sparse/bursty occurrences

A rate() series over a metric whose occurrences are confined to a short
burst within a much wider queried range (e.g. sum by (code)
(rate(KeyPressed[5m])) against a ~10h log where all key presses happen
in the first 10s) rendered as broken: the line simply stopped at the
last real occurrence, and the chart's x-axis auto-scaled to the tiny
span of actual data points rather than the queried range, silently
narrowing a 10-hour view down to ~10 seconds with no indication anything
was off.

Backend (src/engine.rs): windowed_rate_series now appends a synthetic
boundary point at start_ms/end_ms (computed via the existing
rate::rate_at against the original occurrence points, so a boundary
inside a still-warm window gets its true partial value rather than a
hardcoded 0) whenever the real series doesn't already reach that edge.
Wired into both the bare rate() and sum()/avg(rate()) evaluate_promql
branches, which already had start_ms/end_ms in scope.

Frontend (PanelChart.tsx/Dashboards.tsx): the line chart's XAxis now
uses an explicit numeric domain pinned to the panel's queried range
(passed down from Dashboards.tsx's PanelPreview) instead of recharts'
default auto-scale-to-data-extent, so sparse data can no longer make
the axis look narrower than what was actually queried.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/Dashboards.tsx

@@ -96,7 +96,7 @@ function PanelPreview({ panel, range }: { panel: Panel; range: TimeRange | null
   if (loading && series.length === 0) {
     return <div className="flex h-48 items-center justify-center text-xs text-text-faint">Loading…</div>
   }
-  return <PanelChart series={series} chartType={panel.chart_type} />
+  return <PanelChart series={series} chartType={panel.chart_type} range={range} />
 }
 
 function AutosaveStatus({ status, error }: { status: SaveStatus; error: string | null }) {

webapp/src/components/PanelChart.tsx

@@ -14,6 +14,7 @@ import {
   YAxis,
 } from 'recharts'
 import type { ChartType, PromqlSeries } from '../lib/api'
+import type { TimeRange } from './LogTimeline'
 
 /// Renders a label combination as a series key/legend string, e.g. `{"path":"/a"}` -> `path=/a`; no labels renders as `value`.
 export function seriesLabel(labels: Record<string, string>): string {
@@ -91,19 +92,36 @@ function sumValue(series: PromqlSeries): number {
   return series.points.reduce((total, [, value]) => total + value, 0)
 }
 
-export function PanelChart({ series, chartType }: { series: PromqlSeries[]; chartType: ChartType }) {
+export function PanelChart({
+  series,
+  chartType,
+  range,
+}: {
+  series: PromqlSeries[]
+  chartType: ChartType
+  range?: TimeRange | null
+}) {
   if (series.length === 0) {
     return <div className="flex h-48 items-center justify-center text-xs text-text-faint">No data in range.</div>
   }
 
   if (chartType === 'line') {
     const { rows, keys } = toLineData(series)
+    // Ticket 057: without an explicit numeric domain, recharts auto-scales the x-axis to the
+    // min/max timestamp actually present in `rows` — so a metric whose occurrences only cover a
+    // sliver of the queried range (a burst followed by silence) silently renders as if that
+    // sliver *were* the full range, with no visual sign the axis got narrowed. Pinning the domain
+    // to the panel's actual queried range keeps the axis honest; `type="number"` is required for
+    // a `domain` tuple to be interpreted as a value range rather than a category filter.
     return (
       <ResponsiveContainer width="100%" height={220}>
         <LineChart data={rows} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--c-border)" />
           <XAxis
             dataKey="timestamp_ms"
+            type="number"
+            domain={range ? [range.startMs, range.endMs] : ['dataMin', 'dataMax']}
+            allowDataOverflow
             tickFormatter={formatTimestamp}
             stroke="var(--c-text-subtle)"
             tick={{ fontSize: 11, fill: 'var(--c-text-muted)' }}