@kky42/pievo-server 2.1.0 → 2.3.0

package/.output/server/_ssr/{LoopView-Dsc6oik9.mjs → LoopView-DwSrm9Ja.mjs}

@@ -1,29 +1,17 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { g as require_jsx_runtime, h as require_react } from "../_libs/@base-ui/react+[...].mjs";
-import { ht as isTaskPath } from "./boot-DPoPmSLh.mjs";
-import { A as tsShort, v as fmt, w as md, y as fnum } from "./ui-B6mE5-5v.mjs";
-import { s as getArtifacts } from "./loopApi-7MTSs6hy.mjs";
+import { Bt as parseChartSpec, _t as isTaskPath, c as CHART_ATTRS } from "./boot-3BNKujyp.mjs";
+import { A as tsShort, v as fmt, w as md, y as fnum } from "./ui-Ww2tTM2u.mjs";
+import { l as getChartRuns, s as getArtifacts } from "./loopApi-8_KgBapr.mjs";
 import { t as artifactKind } from "./artifactKind-BW0isV8L.mjs";
 import { t as purify } from "../_libs/dompurify.mjs";
-import { i as isMarkdown, r as ViewerHead, t as ArtifactBody } from "./artifactView-DX4P3Krh.mjs";
-import { n as ModalHead, t as Modal } from "./Modal-Bc_5TYGr.mjs";
+import { i as isMarkdown, r as ViewerHead, t as ArtifactBody } from "./artifactView-iuPsp5aa.mjs";
+import { n as ModalHead, t as Modal } from "./Modal-MaCG52Pv.mjs";
 import { n as import_lib, t as esm_default } from "../_libs/html-react-parser+[...].mjs";
-import { a as Area, c as Tooltip, i as XAxis, l as ResponsiveContainer, n as LineChart, o as Line, r as YAxis, s as CartesianGrid, t as AreaChart } from "../_libs/recharts+victory-vendor.mjs";
-//#region node_modules/.nitro/vite/services/ssr/assets/LoopView-Dsc6oik9.js
+import { a as Scatter, c as CartesianGrid, d as ResponsiveContainer, i as XAxis, l as Tooltip, n as ScatterChart, o as Area, r as YAxis, s as Line, t as ComposedChart, u as Legend } from "../_libs/recharts+victory-vendor.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/LoopView-DwSrm9Ja.js
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_jsx_runtime = require_jsx_runtime();
-/** Parse a `<loop-chart series="key:label:unit, ...">` attribute into MetricField[]. */
-function parseSeries(attr) {
-	if (!attr) return [];
-	return attr.split(",").map((s) => {
-		const [key, label, unit] = s.split(":").map((x) => x.trim());
-		return {
-			key: key ?? "",
-			...label ? { label } : {},
-			...unit ? { unit } : {}
-		};
-	}).filter((f) => f.key);
-}
 function buildBindingContext(runs) {
 	const latest = {};
 	const seen = /* @__PURE__ */ new Set();
@@ -53,49 +41,72 @@ function lookup(ctx, path) {
 	const parts = path.split(".");
 	if (parts[0] === "latest" && parts[1]) return ctx.latest[parts[1]];
 }
-/** Per-run numeric metrics snapshots → one series per numeric field (chronological). */
-function numericSeries(runsNewestFirst) {
-	const chron = (runsNewestFirst ?? []).slice().reverse();
-	const series = {};
-	for (const r of chron) {
-		const obj = r.metrics && typeof r.metrics === "object" && !Array.isArray(r.metrics) ? r.metrics : {};
-		for (const k in obj) {
-			const v = obj[k];
-			if (typeof v === "number" && isFinite(v)) (series[k] ??= []).push({
-				t: r.ts,
-				v
-			});
-		}
+var finiteMetric = (run, key) => {
+	const value = run.metrics?.[key];
+	return typeof value === "number" && Number.isFinite(value) ? value : null;
+};
+var chronological = (runs) => runs.slice().sort((a, b) => a.runIndex - b.runIndex);
+function seriesChartRows(runs, keys, x) {
+	return chronological(runs).flatMap((run) => {
+		const values = keys.map((key) => [key, finiteMetric(run, key)]);
+		if (!values.some(([, value]) => value != null)) return [];
+		const row = {
+			__x: x === "time" ? run.ts : run.runIndex,
+			__runIndex: run.runIndex,
+			__status: run.status
+		};
+		for (const [key, value] of values) if (value != null) row[key] = value;
+		return [row];
+	});
+}
+function scatterChartRows(runs, xKey, yKey) {
+	return chronological(runs).flatMap((run) => {
+		const x = finiteMetric(run, xKey);
+		const y = finiteMetric(run, yKey);
+		return x == null || y == null ? [] : [{
+			x,
+			y,
+			runIndex: run.runIndex,
+			status: run.status,
+			ts: run.ts
+		}];
+	});
+}
+function progressChartRows(runs, yKey) {
+	return chronological(runs).flatMap((run) => {
+		const y = finiteMetric(run, yKey);
+		return y == null ? [] : [{
+			x: run.runIndex,
+			y,
+			runIndex: run.runIndex,
+			status: run.status,
+			ts: run.ts
+		}];
+	});
+}
+/** Running best follows persisted kept decisions only. There is no renderer-side keep threshold. */
+function runningBest(rows, direction) {
+	let best = null;
+	const out = [];
+	for (const row of rows) {
+		if (row.status === "kept") best = best == null ? row.y : direction === "min" ? Math.min(best, row.y) : Math.max(best, row.y);
+		if (best != null) out.push({
+			x: row.x,
+			y: best
+		});
 	}
-	return series;
+	return out;
 }
-/**
-* Merge per-key series into the row-oriented array Recharts consumes
-* (`[{__t, k1, k2}, …]`, chronological). Rows are the union of the requested
-* keys' timestamps - a run that reported only some keys leaves the others
-* absent on that row (the chart bridges the gap via `connectNulls`).
-*/
-function seriesRows(data, keys) {
-	const ts = /* @__PURE__ */ new Set();
-	for (const k of keys) for (const p of data[k] ?? []) ts.add(p.t);
-	const sorted = [...ts].sort();
-	const idx = new Map(sorted.map((t, i) => [t, i]));
-	const rows = sorted.map((t) => ({ __t: t }));
-	for (const k of keys) for (const p of data[k] ?? []) rows[idx.get(p.t)][k] = p.v;
-	return rows;
+function chartDomain(values, requested) {
+	if (Array.isArray(requested)) return requested;
+	if (!values.length) return ["auto", "auto"];
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	if (requested === "zero") return [Math.min(0, min), Math.max(0, max)];
+	const span = max - min;
+	const pad = span > 0 ? span * .1 : Math.max(Math.abs(max) * .05, 1);
+	return [min - pad, max + pad];
 }
-/**
-* `<loop-chart series="mrr:MRR:$, paid:Paid">` - the loop's run-history trend,
-* rendered by Recharts in the shadcn/ui-charts grammar, themed entirely by the
-* theme tokens (`--color-chart-1..5` ramp, hairline grid, mono ticks,
-* flat tooltip - no shadows, no decorative color). One series renders as a
-* gradient area; multiple series render as plain lines (overlapping translucent
-* fills go muddy in a monochrome palette). A single-point series renders a dot
-* instead of nothing, so a young loop's dashboard is never blank.
-*
-* `data` is the shared `numericSeries(runs)` map computed once by LoopView.
-*/
-/** Distinct strokes for multiple series - display ink first, then the signal colors. */
 var STROKES = [
 	"var(--color-chart-1)",
 	"var(--color-chart-2)",
@@ -103,13 +114,6 @@ var STROKES = [
 	"var(--color-chart-4)",
 	"var(--color-chart-5)"
 ];
-/**
-* Fixed pixel height: ResponsiveContainer tracks the CONTAINER width while the
-* height stays constant - the fix for the old stretched-viewBox renderer, which
-* scaled like an image (≈4px-fat strokes and a ~340px-tall chart at the loop
-* page's full dashboard width). Also the initial render size before the
-* ResizeObserver measures (and the only size in a non-browser render).
-*/
 var HEIGHT = 190;
 var INITIAL = {
 	width: 640,
@@ -129,163 +133,327 @@ var TOOLTIP_STYLE = {
 	fontFamily: "var(--font-mono)",
 	fontSize: 11
 };
-/** "$12.4k" / "40℃" / "7" - the unit placement the legend has always used. */
-var withUnit = (v, unit) => unit === "$" ? `$${fnum(v)}` : `${fnum(v)}${unit}`;
-function LoopChart({ data, series }) {
-	const gradientId = (0, import_react.useId)();
-	if (!series.length) return null;
-	const plotted = series.map((f) => ({
-		field: f,
-		pts: data[f.key] ?? []
-	})).filter((s) => s.pts.length >= 1);
-	if (!plotted.length) return null;
-	const rows = seriesRows(data, plotted.map((s) => s.field.key));
-	const single = plotted.length === 1;
-	const unitOf = new Map(plotted.map((s) => [s.field.key, s.field.unit ?? ""]));
-	const xAxis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
-		dataKey: "__t",
-		tickLine: false,
-		axisLine: false,
-		tickMargin: 8,
-		minTickGap: 28,
-		interval: "preserveStartEnd",
-		tick: TICK,
-		tickFormatter: (t) => md(t)
-	});
-	const yAxis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
-		width: 34,
-		tickCount: 4,
-		tickLine: false,
-		axisLine: false,
-		tick: TICK,
-		tickFormatter: (v) => fnum(v)
-	});
-	const grid = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, {
-		vertical: false,
-		stroke: "var(--color-hairline)"
-	});
-	const tooltip = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, {
-		isAnimationActive: false,
-		cursor: {
-			stroke: "var(--color-wire)",
-			strokeDasharray: "3 3"
-		},
-		contentStyle: TOOLTIP_STYLE,
-		labelStyle: {
-			color: "var(--color-secondary)",
-			marginBottom: 2
-		},
-		itemStyle: {
-			color: "var(--color-primary)",
-			padding: "1px 0"
-		},
-		labelFormatter: (t) => tsShort(String(t)),
-		formatter: (v, name, item) => [withUnit(Number(v), unitOf.get(String(item?.dataKey)) ?? ""), String(name)]
-	});
-	const seriesProps = (s, idx) => {
-		const color = STROKES[idx % STROKES.length];
-		return {
-			dataKey: s.field.key,
-			name: s.field.label ?? s.field.key,
-			type: "monotone",
-			stroke: color,
-			strokeWidth: 1.5,
-			dot: s.pts.length === 1 ? {
-				r: 3.5,
-				strokeWidth: 0,
-				fill: color
-			} : false,
-			activeDot: {
-				r: 3,
-				strokeWidth: 0,
-				fill: color
-			},
-			connectNulls: true,
-			isAnimationActive: false
-		};
-	};
-	const margin = {
-		top: 6,
-		right: 12,
-		left: 0,
-		bottom: 0
-	};
+var withUnit = (value, unit = "") => unit === "$" ? `$${fnum(value)}` : `${fnum(value)}${unit}`;
+var metricValues = (runs, keys) => runs.flatMap((run) => keys.map((key) => finiteMetric(run, key)).filter((value) => value != null));
+var axisDomain = (runs, keys, spec) => chartDomain(metricValues(runs, keys), spec.yDomain);
+var axisValue = (value, domain) => {
+	if (typeof domain[0] !== "number" || typeof domain[1] !== "number") return fnum(value);
+	const span = Math.abs(domain[1] - domain[0]);
+	const digits = span < .001 ? 6 : span < .01 ? 5 : span < .1 ? 4 : span < 1 ? 3 : span < 10 ? 2 : span < 100 ? 1 : 0;
+	return value.toFixed(digits);
+};
+function ChartFrame({ children, caption }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", {
 		className: "my-2 min-w-0",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "min-w-0",
 			style: { height: HEIGHT },
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, {
-				width: "100%",
-				height: "100%",
-				initialDimension: INITIAL,
-				children: single ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AreaChart, {
-					data: rows,
-					margin,
-					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
-							id: gradientId,
-							x1: "0",
-							y1: "0",
-							x2: "0",
-							y2: "1",
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
-								offset: "5%",
-								stopColor: STROKES[0],
-								stopOpacity: .28
-							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
-								offset: "95%",
-								stopColor: STROKES[0],
-								stopOpacity: .02
-							})]
-						}) }),
-						grid,
-						xAxis,
-						yAxis,
-						tooltip,
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Area, {
-							...seriesProps(plotted[0], 0),
-							fill: `url(#${gradientId})`
-						})
-					]
-				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LineChart, {
-					data: rows,
-					margin,
-					children: [
-						grid,
-						xAxis,
-						yAxis,
-						tooltip,
-						plotted.map((s, idx) => /* @__PURE__ */ (0, import_react.createElement)(Line, {
-							...seriesProps(s, idx),
-							key: s.field.key
-						}))
-					]
-				})
-			})
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", {
+			children
+		}), caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", {
 			className: "mt-1 flex flex-wrap gap-x-4 gap-y-1 text-label text-[var(--color-secondary)]",
-			children: plotted.map((s, idx) => {
-				const last = s.pts[s.pts.length - 1];
-				if (!last) return null;
-				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-					className: "inline-flex items-center gap-1.5",
-					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-							className: "inline-block h-[2px] w-3 align-middle",
-							style: { background: STROKES[idx % STROKES.length] }
-						}),
-						s.field.label ?? s.field.key,
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-							className: "text-[var(--color-display)]",
-							children: withUnit(last.v, s.field.unit ?? "")
-						})
-					]
-				}, s.field.key);
+			children: caption
+		}) : null]
+	});
+}
+function LoopChart({ runs, spec }) {
+	if (spec.type === "scatter") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScatterPlot, {
+		runs,
+		spec
+	});
+	if (spec.type === "progress") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressPlot, {
+		runs,
+		spec
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SeriesPlot, {
+		runs,
+		spec
+	});
+}
+function SeriesPlot({ runs, spec }) {
+	const gradientId = (0, import_react.useId)();
+	const keys = spec.series.map((field) => field.key);
+	const rows = seriesChartRows(runs, keys, spec.x);
+	if (!rows.length) return null;
+	const units = new Map(spec.series.map((field) => [field.key, field.unit ?? ""]));
+	const domain = axisDomain(runs, keys, spec);
+	const latest = /* @__PURE__ */ new Map();
+	for (const row of rows) for (const key of keys) if (typeof row[key] === "number") latest.set(key, row[key]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartFrame, {
+		caption: spec.series.map((field, index) => {
+			const value = latest.get(field.key);
+			return value == null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "inline-block h-[2px] w-3",
+						style: { background: STROKES[index % STROKES.length] }
+					}),
+					field.label ?? field.key,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-[var(--color-display)]",
+						children: withUnit(value, field.unit)
+					})
+				]
+			}, field.key);
+		}),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			initialDimension: INITIAL,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ComposedChart, {
+				data: rows,
+				margin: {
+					top: 6,
+					right: 12,
+					left: 0,
+					bottom: 0
+				},
+				children: [
+					spec.type === "area" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
+						id: gradientId,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+							offset: "5%",
+							stopColor: STROKES[0],
+							stopOpacity: .28
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+							offset: "95%",
+							stopColor: STROKES[0],
+							stopOpacity: .02
+						})]
+					}) }) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, {
+						vertical: false,
+						stroke: "var(--color-hairline)"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+						dataKey: "__x",
+						type: spec.x === "runIndex" ? "number" : "category",
+						domain: spec.x === "runIndex" ? ["dataMin", "dataMax"] : void 0,
+						tick: TICK,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						minTickGap: 28,
+						tickFormatter: (value) => spec.x === "time" ? md(String(value)) : String(value)
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+						width: 60,
+						domain,
+						allowDataOverflow: Array.isArray(spec.yDomain),
+						tick: TICK,
+						tickLine: false,
+						axisLine: false,
+						tickFormatter: (value) => axisValue(value, domain)
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, {
+						isAnimationActive: false,
+						contentStyle: TOOLTIP_STYLE,
+						labelFormatter: (value) => spec.x === "time" ? tsShort(String(value)) : `run #${value}`,
+						formatter: (value, name, item) => [withUnit(Number(value), units.get(String(item?.dataKey))), String(name)]
+					}),
+					spec.type === "area" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Area, {
+						...seriesProps(spec.series[0], 0),
+						connectNulls: true,
+						dot: rows.length === 1 ? {
+							r: 3.5,
+							strokeWidth: 0
+						} : false,
+						fill: `url(#${gradientId})`
+					}) : spec.series.map((field, index) => /* @__PURE__ */ (0, import_react.createElement)(Line, {
+						...seriesProps(field, index),
+						key: field.key,
+						connectNulls: true,
+						dot: spec.colorBy === "status" ? statusDot(field.key) : rows.length === 1 ? {
+							r: 3.5,
+							strokeWidth: 0
+						} : false
+					}))
+				]
 			})
-		})]
+		})
 	});
 }
+function ScatterPlot({ runs, spec }) {
+	const rows = scatterChartRows(runs, spec.xKey, spec.yKey);
+	if (!rows.length) return null;
+	const domain = chartDomain(rows.map((row) => row.y), spec.yDomain);
+	const xDomain = chartDomain(rows.map((row) => row.x), "auto");
+	const kept = rows.filter((row) => row.status === "kept");
+	const other = rows.filter((row) => row.status !== "kept");
+	const groups = spec.colorBy === "status" ? [{
+		name: "Other",
+		rows: other,
+		fill: "var(--color-disabled)"
+	}, {
+		name: "Kept",
+		rows: kept,
+		fill: "var(--color-success)"
+	}] : [{
+		name: spec.yLabel ?? spec.yKey,
+		rows,
+		fill: STROKES[0]
+	}];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, {
+		width: "100%",
+		height: "100%",
+		initialDimension: INITIAL,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ScatterChart, {
+			margin: {
+				top: 8,
+				right: 12,
+				left: 0,
+				bottom: 8
+			},
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { stroke: "var(--color-hairline)" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+					type: "number",
+					dataKey: "x",
+					name: spec.xLabel ?? spec.xKey,
+					domain: xDomain,
+					tickFormatter: (value) => axisValue(value, xDomain),
+					tick: TICK,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+					type: "number",
+					dataKey: "y",
+					name: spec.yLabel ?? spec.yKey,
+					domain,
+					allowDataOverflow: Array.isArray(spec.yDomain),
+					width: 60,
+					tickFormatter: (value) => axisValue(value, domain),
+					tick: TICK,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, {
+					isAnimationActive: false,
+					contentStyle: TOOLTIP_STYLE,
+					cursor: {
+						stroke: "var(--color-wire)",
+						strokeDasharray: "3 3"
+					},
+					labelFormatter: (_, payload) => payload?.[0]?.payload ? `run #${payload[0].payload.runIndex}` : "",
+					formatter: (value, name, item) => [withUnit(Number(value), String(item?.dataKey) === "x" ? spec.xUnit : spec.yUnit), String(name)]
+				}),
+				groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Scatter, {
+					name: group.name,
+					data: group.rows,
+					fill: group.fill,
+					isAnimationActive: false
+				}, group.name)),
+				spec.colorBy ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Legend, {
+					verticalAlign: "top",
+					align: "right"
+				}) : null
+			]
+		})
+	}) });
+}
+function ProgressPlot({ runs, spec }) {
+	const rows = progressChartRows(runs, spec.yKey);
+	if (!rows.length) return null;
+	const kept = rows.filter((row) => row.status === "kept");
+	const other = rows.filter((row) => row.status !== "kept");
+	const best = runningBest(rows, spec.direction);
+	const domain = chartDomain(rows.map((row) => row.y), spec.yDomain);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, {
+		width: "100%",
+		height: "100%",
+		initialDimension: INITIAL,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ComposedChart, {
+			margin: {
+				top: 8,
+				right: 12,
+				left: 0,
+				bottom: 8
+			},
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, {
+					vertical: false,
+					stroke: "var(--color-hairline)"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+					type: "number",
+					dataKey: "x",
+					domain: ["dataMin", "dataMax"],
+					tick: TICK,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+					type: "number",
+					dataKey: "y",
+					domain,
+					allowDataOverflow: Array.isArray(spec.yDomain),
+					width: 60,
+					tickFormatter: (value) => axisValue(value, domain),
+					tick: TICK,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, {
+					isAnimationActive: false,
+					contentStyle: TOOLTIP_STYLE,
+					labelFormatter: (_, payload) => payload?.[0]?.payload ? `run #${payload[0].payload.runIndex ?? payload[0].payload.x}` : ""
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Scatter, {
+					name: "Other",
+					data: other,
+					fill: "var(--color-disabled)",
+					isAnimationActive: false
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Scatter, {
+					name: "Kept",
+					data: kept,
+					fill: "var(--color-success)",
+					isAnimationActive: false
+				}),
+				best.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Line, {
+					name: "Running best",
+					data: best,
+					dataKey: "y",
+					type: "stepAfter",
+					stroke: "var(--color-success)",
+					strokeWidth: 2,
+					dot: false,
+					isAnimationActive: false
+				}) : null,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Legend, {
+					verticalAlign: "top",
+					align: "right"
+				})
+			]
+		})
+	}) });
+}
+var seriesProps = (field, index) => ({
+	dataKey: field.key,
+	name: field.label ?? field.key,
+	type: "linear",
+	stroke: STROKES[index % STROKES.length],
+	strokeWidth: 1.5,
+	activeDot: {
+		r: 3,
+		strokeWidth: 0
+	},
+	isAnimationActive: false
+});
+var statusDot = (key) => (props) => {
+	if (typeof props?.payload?.[key] !== "number") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+		cx: props.cx,
+		cy: props.cy,
+		r: 2.8,
+		fill: props.payload.__status === "kept" ? "var(--color-success)" : "var(--color-disabled)"
+	});
+};
 var basename$2 = (path) => path.split("/").pop() || path;
 var pad = (n) => String(n).padStart(2, "0");
 /** A real calendar date within a sane range (no 2026-13-40, no year 10521). */
@@ -949,14 +1117,14 @@ function KanbanCard({ card, onOpen }) {
 * else (A/B panels, stat tiles, layout, text) is the agent's own HTML — there are
 * NO opinionated panel components.
 *
-*   <loop-chart series="mrr:MRR:$, paid:Paid"></loop-chart>   multi-series trend chart
+*   <loop-chart type="line" x="runIndex" series="mrr:MRR:$"></loop-chart>
 *   <loop-embed match="reports/digest-*.md"></loop-embed>      newest matching artifact, embedded
 *   <loop-calendar match="reports/*.md"></loop-calendar>       month calendar of produced files
 *   <loop-kanban columns="a,b,c" match="notes/*.md">           typed products as a board, columns = type
 *
 * Registering a new primitive means moving three things together: LOOP_TAGS +
 * the sanitizer config below, the parser swap in `options`, and the skill's
-* authoring docs (references/evolve.md §3, run/steer.md) - the sanitizer
+* authoring docs (references/dashboard.md plus concise run-prompt examples) - the sanitizer
 * allowlist and the skill prose must never drift apart.
 */
 var LOOP_TAGS = [
@@ -967,7 +1135,7 @@ var LOOP_TAGS = [
 ];
 /** Data-bearing attributes on the loop-* primitives (all parsed by us, never markup). */
 var LOOP_ATTRS = [
-	"series",
+	...CHART_ATTRS,
 	"file",
 	"match",
 	"full",
@@ -1039,10 +1207,29 @@ function LoopView({ html, runs, loopId, taskFile }) {
 		const ctx = buildBindingContext(runs);
 		return purify.sanitize(resolveBindings(html, ctx), SANITIZE_CONFIG);
 	}, [html, runs]);
-	const data = (0, import_react.useMemo)(() => numericSeries(runs), [runs]);
+	const wantsCharts = /<loop-chart\b/.test(clean);
+	const [chartData, setChartData] = (0, import_react.useState)(null);
+	const chartRuns = chartData?.loopId === loopId ? chartData.runs : null;
 	const wantsArtifacts = /<loop-(embed|calendar|kanban)\b/.test(clean);
 	const [artifacts, setArtifacts] = (0, import_react.useState)(null);
 	const newestRunId = runs[0]?.id;
+	const newestRunLive = runs[0]?.running === true;
+	(0, import_react.useEffect)(() => {
+		if (!wantsCharts) return;
+		let alive = true;
+		getChartRuns({ data: { loopId } }).then((list) => alive && setChartData({
+			loopId,
+			runs: list
+		})).catch(() => {});
+		return () => {
+			alive = false;
+		};
+	}, [
+		wantsCharts,
+		loopId,
+		newestRunId,
+		newestRunLive
+	]);
 	(0, import_react.useEffect)(() => {
 		if (!wantsArtifacts) return;
 		let alive = true;
@@ -1062,17 +1249,24 @@ function LoopView({ html, runs, loopId, taskFile }) {
 		wantsArtifacts,
 		loopId,
 		newestRunId,
-		runs[0]?.running === true
+		newestRunLive
 	]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 		className: "loopview text-[14px] leading-relaxed",
 		children: esm_default(clean, (0, import_react.useMemo)(() => ({ replace: (node) => {
 			if (!(node instanceof import_lib.Element)) return void 0;
 			const a = node.attribs ?? {};
-			if (node.name === "loop-chart") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopChart, {
-				data,
-				series: parseSeries(a.series)
-			});
+			if (node.name === "loop-chart") {
+				const parsed = parseChartSpec(a);
+				if (!parsed.ok) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "rounded-control border border-[var(--color-wire)] bg-[var(--color-raised)] p-3 text-meta text-[var(--color-secondary)]",
+					children: "This chart uses an outdated or invalid configuration."
+				});
+				return chartRuns ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopChart, {
+					runs: chartRuns,
+					spec: parsed.value
+				}) : null;
+			}
 			if (node.name === "loop-embed") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopEmbed, {
 				loopId,
 				artifacts,
@@ -1095,7 +1289,7 @@ function LoopView({ html, runs, loopId, taskFile }) {
 				taskFile
 			});
 		} }), [
-			data,
+			chartRuns,
 			loopId,
 			taskFile,
 			artifacts