@camstack/ui-library 1.2.382 → 1.2.384

package/dist/index.cjs

@@ -24107,6 +24107,22 @@ function formatCursorTime(t, spanMs) {
 	return `${d.toLocaleDateString(void 0, DATE_DM)} ${d.toLocaleTimeString(void 0, TIME_HM)}`;
 }
 //#endregion
+//#region src/composites/charts/chart-bands.ts
+var TONE_TOKEN = {
+	neutral: "foreground-subtle",
+	info: "info",
+	success: "success",
+	warning: "warning",
+	danger: "danger"
+};
+function bandToken(tone) {
+	return TONE_TOKEN[tone];
+}
+/** The bands that contain `x` (edges included), in input order. */
+function bandsAt(bands, x) {
+	return bands.filter((b) => x >= b.from && x <= b.to);
+}
+//#endregion
 //#region src/composites/charts/chart-scale.ts
 var LINEAR_MAX_MANTISSAS = [
 	1,
@@ -24338,6 +24354,23 @@ function gapShadeHook(spans) {
 		ctx.restore();
 	};
 }
+/** Paint the bands behind the lines, each in its tone. */
+function bandShadeHook(bands) {
+	return (u) => {
+		const list = bands();
+		if (list.length === 0) return;
+		const ctx = u.ctx;
+		ctx.save();
+		for (const b of list) {
+			const x0 = u.valToPos(b.from, "x", true);
+			const x1 = u.valToPos(b.to, "x", true);
+			ctx.fillStyle = withAlpha(resolveChartColor(bandToken(b.tone)), BAND_SHADE_ALPHA);
+			ctx.fillRect(x0, u.bbox.top, Math.max(1, x1 - x0), u.bbox.height);
+		}
+		ctx.restore();
+	};
+}
+var BAND_SHADE_ALPHA = .16;
 var BYTE_UNITS = new Set([
 	"B",
 	"bytes",
@@ -24692,7 +24725,7 @@ function lineTooltipBody(input) {
 			preference: input.preference
 		})
 	}));
-	return asBody(input.timeLabel, lines);
+	return asBody(input.timeLabel, [...lines, ...input.extra ?? []]);
 }
 /** The state in force at `t`, and how long that span lasts. */
 function stateSpanAt(segments, t) {
@@ -42821,6 +42854,176 @@ function CopyButton({ value, label, srLabel, className, disabled }) {
 	});
 }
 //#endregion
+//#region src/composites/device-history/history-runs.ts
+/** The context kept on each side of a run when a row opens it. */
+var RUN_WINDOW_MARGIN_MS = 15 * 6e4;
+function runStatus(run) {
+	return run.state === "open" ? "running" : run.outcome ?? "unknown";
+}
+function runEnd(run, now) {
+	return run.state === "open" || run.endedAt === null ? now : run.endedAt;
+}
+/** Elapsed time of a run; an open one counts up to `now`. `null` when a closed run has no duration. */
+function runDurationMs(run, now) {
+	if (run.state === "open") return Math.max(0, now - run.startedAt);
+	if (run.durationMs !== null) return run.durationMs;
+	return run.endedAt === null ? null : Math.max(0, run.endedAt - run.startedAt);
+}
+function formatKwh(kwh) {
+	return kwh === null ? "—" : `${kwh.toFixed(2)} kWh`;
+}
+function formatWatts(w) {
+	return w === null ? "—" : `${String(Math.round(w))} W`;
+}
+function formatRunDuration(ms) {
+	return ms === null ? "—" : formatDurationMs(ms);
+}
+var STATUS_TONE = {
+	running: "info",
+	completed: "success",
+	aborted: "warning",
+	error: "danger",
+	unknown: "neutral"
+};
+function runTone(status) {
+	return STATUS_TONE[status];
+}
+/** The window that frames a run: the run plus {@link RUN_WINDOW_MARGIN_MS} each side. */
+function runWindow(run, now) {
+	return {
+		from: run.startedAt - RUN_WINDOW_MARGIN_MS,
+		to: runEnd(run, now) + RUN_WINDOW_MARGIN_MS
+	};
+}
+/** One band per run that overlaps `window`; the label states the duration and the energy. */
+function runBands(runs, now, window, t) {
+	const title = t("uiLibrary.history.runs.band", "Run");
+	return runs.filter((r) => runEnd(r, now) > window.from && r.startedAt < window.to).map((r) => {
+		const status = runStatus(r);
+		const parts = [formatRunDuration(runDurationMs(r, now)), formatKwh(r.detail.energyKwh)];
+		return {
+			id: r.runId,
+			from: r.startedAt,
+			to: runEnd(r, now),
+			title,
+			label: status === "running" ? t("uiLibrary.history.runs.bandRunning", "running · {{parts}}", { parts: parts.join(" · ") }) : parts.join(" · "),
+			tone: runTone(status)
+		};
+	});
+}
+//#endregion
+//#region src/composites/DeviceRunsPanel.tsx
+/**
+* DeviceRunsPanel — the runs of an appliance, newest first, on the device's
+* History tab: start, end, duration, energy, peak and mean power, outcome.
+* A row opens the run's window (the run plus a margin) in the history view.
+*
+* Presentational: the caller reads the runs (`useDeviceRuns`) and decides
+* whether the device has any — the panel never answers "no runs" itself, an
+* unanswered query is not an empty one (D315). A measurement that failed is
+* `—`, never `0` (D393).
+*/
+function statusLabel(status, t) {
+	switch (status) {
+		case "running": return t("uiLibrary.history.runs.status.running", "Running");
+		case "completed": return t("uiLibrary.history.runs.status.completed", "Completed");
+		case "aborted": return t("uiLibrary.history.runs.status.aborted", "Aborted");
+		case "error": return t("uiLibrary.history.runs.status.error", "Error");
+		case "unknown": return t("uiLibrary.history.runs.status.unknown", "Unknown");
+	}
+}
+var formatStamp = (ms) => new Date(ms).toLocaleString(void 0, {
+	dateStyle: "short",
+	timeStyle: "short"
+});
+function runColumns(now, t) {
+	return [
+		{
+			key: "start",
+			header: t("uiLibrary.history.runs.start", "Start"),
+			render: (r) => formatStamp(r.startedAt),
+			sortValue: (r) => r.startedAt
+		},
+		{
+			key: "end",
+			header: t("uiLibrary.history.runs.end", "End"),
+			render: (r) => r.state === "open" || r.endedAt === null ? t("uiLibrary.history.runs.runningSince", "Running since {{time}}", { time: formatStamp(r.startedAt) }) : formatStamp(r.endedAt),
+			sortValue: (r) => r.endedAt
+		},
+		{
+			key: "duration",
+			header: t("uiLibrary.history.runs.duration", "Duration"),
+			align: "right",
+			render: (r) => formatRunDuration(runDurationMs(r, now)),
+			sortValue: (r) => runDurationMs(r, now)
+		},
+		{
+			key: "energy",
+			header: t("uiLibrary.history.runs.energy", "Energy"),
+			align: "right",
+			render: (r) => formatKwh(r.detail.energyKwh),
+			sortValue: (r) => r.detail.energyKwh
+		},
+		{
+			key: "peak",
+			header: t("uiLibrary.history.runs.peak", "Peak"),
+			align: "right",
+			render: (r) => formatWatts(r.detail.peakW),
+			sortValue: (r) => r.detail.peakW
+		},
+		{
+			key: "avg",
+			header: t("uiLibrary.history.runs.avg", "Average"),
+			align: "right",
+			render: (r) => formatWatts(r.detail.avgW),
+			sortValue: (r) => r.detail.avgW
+		},
+		{
+			key: "outcome",
+			header: t("uiLibrary.history.runs.outcome", "Outcome"),
+			render: (r) => {
+				const status = runStatus(r);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+					variant: runTone(status),
+					children: statusLabel(status, t)
+				});
+			},
+			notSortableReason: t("uiLibrary.history.runs.outcomeNoSort", "Outcomes have no order")
+		}
+	];
+}
+function DeviceRunsPanel({ runs, now, onSelectWindow, className }) {
+	const t = useUiText();
+	const [expanded, setExpanded] = (0, react$1.useState)(true);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleCard, {
+		className,
+		expanded,
+		onExpandedChange: setExpanded,
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 min-w-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs font-semibold text-foreground truncate",
+				children: t("uiLibrary.history.runs.title", "Runs")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] text-foreground-subtle shrink-0",
+				children: t("uiLibrary.history.runs.count", {
+					one: "{{count}} run",
+					other: "{{count}} runs"
+				}, { count: runs.length })
+			})]
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, {
+			columns: runColumns(now, t),
+			rows: runs,
+			rowKey: (r) => r.runId,
+			onRowClick: (r) => onSelectWindow(runWindow(r, now)),
+			maxBodyHeight: TABLE_SCROLL_MAX_H,
+			bordered: false,
+			minWidthPx: 640
+		})
+	});
+}
+//#endregion
 //#region src/composites/device-list/fuzzy-match.ts
 /**
 * fuzzy-match — case and separator-insensitive text search helper.
@@ -63510,10 +63713,10 @@ function InstanceSetup({ addonId, instance, named }) {
 * the instances are unanswered or when none reports an error or a setup. Shares
 * `getStatus`'s query key with the panel, so mounting both costs one request.
 */
-function DeviceExportSetup({ addonId }) {
+function DeviceExportSetup({ addonId, instanceId }) {
 	const state = useExportInstances(addonId);
 	if (state.kind !== "answered") return null;
-	const enabled = state.instances.filter((i) => i.enabled);
+	const enabled = state.instances.filter((i) => i.enabled && (instanceId === void 0 || i.instanceId === instanceId));
 	if (enabled.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: enabled.map((instance) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InstanceSetup, {
 		addonId,
@@ -63616,7 +63819,7 @@ function BulkSummary({ outcome, onDismiss }) {
 		]
 	});
 }
-function DeviceExportInstancePanel({ addonId, instance, named, onOpenDevice, showSetup = true }) {
+function DeviceExportInstancePanel({ addonId, instance, named = false, onOpenDevice, showSetup = true }) {
 	const instanceId = instance.instanceId;
 	const t = useUiText();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
@@ -71771,6 +71974,7 @@ function latestValues(model) {
 * for the cross-device History page, where the reader chose the series.
 */
 var DEFAULT_HEIGHT = 120;
+var NO_BANDS = [];
 function seriesSpan(range, xs) {
 	if (range !== void 0) return range.to - range.from;
 	if (xs.length < 2) return 0;
@@ -71797,18 +72001,25 @@ function seriesTooltip(input) {
 					value: values[i] ?? null,
 					quantity: sample.quantity,
 					unit: sample.unit ?? null
+				})),
+				extra: bandsAt(input.bands, at).map((b) => ({
+					id: `band:${b.id}`,
+					label: b.title,
+					value: b.label
 				}))
 			});
 		},
 		onDataX: input.onDataX
 	};
 }
-function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacked = false, area = false, syncKey, formatValue, displayPreference, axisFor, emptyMessage, pending = false, actions, footer, windowToggle, className }) {
+function TimeSeriesChart({ title, series, bands = NO_BANDS, range, height = DEFAULT_HEIGHT, stacked = false, area = false, syncKey, formatValue, displayPreference, axisFor, emptyMessage, pending = false, actions, footer, windowToggle, className }) {
 	const t = useUiText();
 	const model = (0, react$1.useMemo)(() => buildTimeSeriesModel(series, stacked), [series, stacked]);
 	const [cursorIdx, setCursorIdx] = (0, react$1.useState)(null);
 	const modelRef = (0, react$1.useRef)(model);
 	modelRef.current = model;
+	const bandsRef = (0, react$1.useRef)(bands);
+	bandsRef.current = bands;
 	const rangeRef = (0, react$1.useRef)(range);
 	rangeRef.current = range;
 	const fmt = (0, react$1.useCallback)((v, unit) => (formatValue ?? formatChartValue)(v, unit), [formatValue]);
@@ -71937,7 +72148,7 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 			bands,
 			cursor: chartCursor(syncKey),
 			hooks: {
-				drawClear: [gapShadeHook(() => modelRef.current.gaps)],
+				drawClear: [bandShadeHook(() => bandsRef.current), gapShadeHook(() => modelRef.current.gaps)],
 				setCursor: [(u) => setCursorIdx(u.cursor.idx ?? null)]
 			}
 		};
@@ -71949,6 +72160,7 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 	const tooltip = (0, react$1.useMemo)(() => seriesTooltip({
 		model,
 		series,
+		bands,
 		range,
 		preference: displayPreference,
 		onDataX: (dataX) => {
@@ -71957,6 +72169,7 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 	}), [
 		model,
 		series,
+		bands,
 		range,
 		displayPreference
 	]);
@@ -72744,7 +72957,7 @@ function booleanLabels(key, t) {
 function failure(entry) {
 	return entry !== void 0 && !entry.ok ? entry.error : null;
 }
-function HistoryChart({ spec, entryFor, reads, window, compare, syncKey, actions }) {
+function HistoryChart({ spec, entryFor, reads, window, compare, syncKey, actions, runs, now }) {
 	const t = useUiText();
 	const pending = reads === null;
 	if (spec.type === "states") {
@@ -72819,13 +73032,15 @@ function HistoryChart({ spec, entryFor, reads, window, compare, syncKey, actions
 		compare,
 		syncKey,
 		actions,
+		runs: spec.series.some((s) => s.key === "cap:power-meter.power") ? runs : void 0,
+		now,
 		labelOf: (s) => spec.series.length > 1 || s.scope !== "" ? seriesLabel(s) : spec.title
 	});
 }
 function seriesLabel(s) {
 	return s.scope === "" ? s.displayName : `${s.displayName} · ${s.scope}`;
 }
-function LinesChart({ title, series, entryFor, reads, window, compare, syncKey, actions, labelOf, toolbar, colorOf }) {
+function LinesChart({ title, series, entryFor, reads, window, compare, syncKey, actions, labelOf, toolbar, colorOf, runs, now }) {
 	const t = useUiText();
 	const errors = [...new Set(series.map((s) => failure(entryFor(s.key, false))).filter((e) => e !== null))];
 	const defs = (0, react$1.useMemo)(() => {
@@ -72875,6 +73090,12 @@ function LinesChart({ title, series, entryFor, reads, window, compare, syncKey,
 		colorOf,
 		t
 	]);
+	const bands = (0, react$1.useMemo)(() => runs === void 0 ? [] : runBands(runs, now ?? window.to, window, t), [
+		runs,
+		now,
+		window,
+		t
+	]);
 	if (errors.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadFailed, {
 		title,
 		error: errors.join("; "),
@@ -72883,6 +73104,7 @@ function LinesChart({ title, series, entryFor, reads, window, compare, syncKey,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeSeriesChart, {
 		title,
 		series: defs,
+		bands,
 		range: window,
 		syncKey,
 		pending: reads === null,
@@ -73218,6 +73440,24 @@ function HistoryWindowBar({ value, onChange, custom, onCustomChange, compare, on
 	});
 }
 //#endregion
+//#region src/composites/device-history/use-device-runs.ts
+/** How many runs the panel and the bands are given; the cap's page size. */
+var DEVICE_RUNS_PAGE = 50;
+var REFRESH_MS = 6e4;
+/** The newest runs, or `undefined` while unanswered, absent or empty. */
+function useDeviceRuns(deviceId) {
+	const q = useDeviceRunsListRuns({
+		deviceId,
+		limit: 50
+	}, {
+		staleTime: REFRESH_MS,
+		refetchInterval: REFRESH_MS,
+		retry: false
+	});
+	if (q.status !== "success" || q.data.runs.length === 0) return void 0;
+	return q.data.runs;
+}
+//#endregion
 //#region src/composites/device-history/history-reads.ts
 /**
 * Batched history reads. `queryMany` answers up to 24 reads over one window
@@ -73502,7 +73742,9 @@ function DeviceHistoryView({ deviceId, fixedWindow, onNavigate }) {
 	const custom = fixedWindow ? null : decodeCustomWindow(customParam);
 	const compare = fixedWindow === void 0 && compareParam === "1";
 	const spanGuess = resolveHistoryWindow(windowId, Date.now(), custom);
-	const range = resolveHistoryWindow(windowId, anchorNow(Date.now(), spanGuess.to - spanGuess.from), custom);
+	const now = anchorNow(Date.now(), spanGuess.to - spanGuess.from);
+	const range = resolveHistoryWindow(windowId, now, custom);
+	const runs = useDeviceRuns(deviceId);
 	const { presence, list } = useDeviceSeriesList(deviceId);
 	const panels = useHistoryPanels();
 	const hidden = (0, react$1.useMemo)(() => new Set(panels.value.hidden[String(deviceId)] ?? []), [panels.value.hidden, deviceId]);
@@ -73570,81 +73812,95 @@ function DeviceHistoryView({ deviceId, fixedWindow, onNavigate }) {
 		description: t("uiLibrary.history.empty", "A value appears here once it changes, or at the next five-minute check.")
 	});
 	const syncKey = `device-history:${String(deviceId)}`;
+	const showWindow = (w) => {
+		setWindowParam("custom");
+		setCustomParam(encodeCustomWindow(w));
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: STACK_GAP,
-		children: [fixedWindow === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-wrap items-center justify-between gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistoryWindowBar, {
-				value: windowId,
-				onChange: (id) => setWindowParam(id === "24h" ? null : id),
-				custom,
-				onCustomChange: (w) => setCustomParam(encodeCustomWindow(w)),
-				compare,
-				onCompareChange: (on) => setCompareParam(on ? "1" : null)
-			}), hiddenCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-				variant: "ghost",
-				size: "sm",
-				onClick: showAllHidden,
-				disabled: !panels.writable,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeOff, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				}), t("uiLibrary.history.showHidden", {
-					one: "Show {{count}} hidden chart",
-					other: "Show {{count}} hidden charts"
-				}, { count: hiddenCount })]
-			})]
-		}), visible.map((section) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleCard, {
-				expanded: !collapsed.has(section.id),
-				onExpandedChange: (next) => setCollapsed((prev) => {
-					const s = new Set(prev);
-					if (next) s.delete(section.id);
-					else s.add(section.id);
-					return s;
-				}),
-				header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2 min-w-0",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-xs font-semibold text-foreground truncate",
-						children: humanizeName(section.name)
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-[10px] text-foreground-subtle shrink-0",
-						children: t("uiLibrary.history.chartCount", {
-							one: "{{count}} chart",
-							other: "{{count}} charts"
-						}, { count: section.charts.length })
-					})]
-				}),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "grid grid-cols-1 gap-4 2xl:grid-cols-2",
-					children: section.charts.map((spec) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistoryChart, {
-						spec,
-						entryFor,
-						reads: readsData,
-						window: range,
-						compare,
-						syncKey,
-						actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KebabMenu, {
-							title: t("uiLibrary.history.chartMenu", "Chart actions"),
-							items: [{
-								id: "open",
-								label: t("uiLibrary.history.openInHistory", "Open in History"),
-								icon: ChartLine,
-								onClick: () => navigate(historyPageHref(refsOf(deviceId, spec), windowId))
-							}, {
-								id: "hide",
-								label: t("uiLibrary.history.hide", "Hide"),
-								icon: EyeOff,
-								hidden: fixedWindow !== void 0,
-								disabled: !panels.writable,
-								onClick: () => setHidden(spec.id, true)
-							}]
-						})
-					}, spec.id))
-				})
-			}, section.id);
-		})]
+		children: [
+			fixedWindow === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistoryWindowBar, {
+					value: windowId,
+					onChange: (id) => setWindowParam(id === "24h" ? null : id),
+					custom,
+					onCustomChange: (w) => setCustomParam(encodeCustomWindow(w)),
+					compare,
+					onCompareChange: (on) => setCompareParam(on ? "1" : null)
+				}), hiddenCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: showAllHidden,
+					disabled: !panels.writable,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeOff, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}), t("uiLibrary.history.showHidden", {
+						one: "Show {{count}} hidden chart",
+						other: "Show {{count}} hidden charts"
+					}, { count: hiddenCount })]
+				})]
+			}),
+			fixedWindow === void 0 && runs !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceRunsPanel, {
+				runs,
+				now,
+				onSelectWindow: showWindow
+			}),
+			visible.map((section) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleCard, {
+					expanded: !collapsed.has(section.id),
+					onExpandedChange: (next) => setCollapsed((prev) => {
+						const s = new Set(prev);
+						if (next) s.delete(section.id);
+						else s.add(section.id);
+						return s;
+					}),
+					header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2 min-w-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs font-semibold text-foreground truncate",
+							children: humanizeName(section.name)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] text-foreground-subtle shrink-0",
+							children: t("uiLibrary.history.chartCount", {
+								one: "{{count}} chart",
+								other: "{{count}} charts"
+							}, { count: section.charts.length })
+						})]
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "grid grid-cols-1 gap-4 2xl:grid-cols-2",
+						children: section.charts.map((spec) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistoryChart, {
+							spec,
+							entryFor,
+							reads: readsData,
+							window: range,
+							compare,
+							syncKey,
+							runs,
+							now,
+							actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KebabMenu, {
+								title: t("uiLibrary.history.chartMenu", "Chart actions"),
+								items: [{
+									id: "open",
+									label: t("uiLibrary.history.openInHistory", "Open in History"),
+									icon: ChartLine,
+									onClick: () => navigate(historyPageHref(refsOf(deviceId, spec), windowId))
+								}, {
+									id: "hide",
+									label: t("uiLibrary.history.hide", "Hide"),
+									icon: EyeOff,
+									hidden: fixedWindow !== void 0,
+									disabled: !panels.writable,
+									onClick: () => setHidden(spec.id, true)
+								}]
+							})
+						}, spec.id))
+					})
+				}, section.id);
+			})
+		]
 	});
 }
 function HistorySkeleton() {
@@ -73804,7 +74060,7 @@ function TimelineSlider({ markers, bands = [], selectedId = null, step = 5, aria
 }
 //#endregion
 //#region src/ui-library-version.ts
-var uiLibraryVersion = "1.2.382";
+var uiLibraryVersion = "1.2.384";
 //#endregion
 //#region src/hooks/use-account-unit-preferences.ts
 /**
@@ -74909,6 +75165,7 @@ exports.DEVICE_NAME_JOIN = DEVICE_NAME_JOIN;
 exports.DEVICE_PICKER_GROUP_STORAGE_KEY = DEVICE_PICKER_GROUP_STORAGE_KEY;
 exports.DEVICE_ROLE_META = DEVICE_ROLE_META;
 exports.DEVICE_ROLE_NOUNS = DEVICE_ROLE_NOUNS;
+exports.DEVICE_RUNS_PAGE = DEVICE_RUNS_PAGE;
 exports.DEVICE_TYPE_CONTROL = DEVICE_TYPE_CONTROL;
 exports.DEVICE_TYPE_META = DEVICE_TYPE_META;
 exports.DEVICE_TYPE_NOUNS = DEVICE_TYPE_NOUNS;
@@ -74925,6 +75182,7 @@ exports.DeviceActivityPanel = DeviceActivityPanel;
 exports.DeviceBatchToolbar = DeviceBatchToolbar;
 exports.DeviceCard = DeviceCard;
 exports.DeviceContextProvider = DeviceContextProvider;
+exports.DeviceExportInstancePanel = DeviceExportInstancePanel;
 exports.DeviceExportPanel = DeviceExportPanel;
 exports.DeviceExportSetup = DeviceExportSetup;
 exports.DeviceFilterBar = DeviceFilterBar;
@@ -74938,6 +75196,7 @@ exports.DeviceMultiSelectField = DeviceMultiSelectField;
 exports.DeviceName = DeviceName;
 exports.DevicePicker = DevicePicker;
 exports.DeviceQuickDetailProvider = DeviceQuickDetailProvider;
+exports.DeviceRunsPanel = DeviceRunsPanel;
 exports.DeviceSelectField = DeviceSelectField;
 exports.DeviceSelectorPicker = DeviceSelectorPicker;
 exports.DeviceStepMatrix = DeviceStepMatrix;
@@ -75187,6 +75446,7 @@ exports.RIGHT = RIGHT;
 exports.ROI_AREA_WARN_FRACTION = ROI_AREA_WARN_FRACTION;
 exports.ROLE_DESCRIPTOR = ROLE_DESCRIPTOR;
 exports.ROOT_DETECTOR_STEP_ID = ROOT_DETECTOR_STEP_ID;
+exports.RUN_WINDOW_MARGIN_MS = RUN_WINDOW_MARGIN_MS;
 exports.Radar = Radar;
 exports.RadialGauge = RadialGauge;
 exports.Radio = Radio;
@@ -75684,6 +75944,8 @@ exports.roiTooLarge = roiTooLarge;
 exports.roiTooLarge$1 = roiTooLarge;
 exports.rootSourceState = rootSourceState;
 exports.routerBasename = routerBasename;
+exports.runBands = runBands;
+exports.runWindow = runWindow;
 exports.runningDurationSince = runningDurationSince;
 exports.runningStatusParts = runningStatusParts;
 exports.sameDeviceName = sameDeviceName;
@@ -76179,6 +76441,7 @@ exports.useDeviceProviderTestCreationField = useDeviceProviderTestCreationField;
 exports.useDeviceProxy = useDeviceProxy;
 exports.useDeviceProxy$1 = useDeviceProxy;
 exports.useDeviceQuickDetailOpen = useDeviceQuickDetailOpen;
+exports.useDeviceRuns = useDeviceRuns;
 exports.useDeviceRunsGetCurrentRun = useDeviceRunsGetCurrentRun;
 exports.useDeviceRunsGetRun = useDeviceRunsGetRun;
 exports.useDeviceRunsListRuns = useDeviceRunsListRuns;