@camstack/ui-library 1.2.320 → 1.2.321

package/dist/index.cjs

@@ -12229,6 +12229,8 @@ var useRecordingOnboardSetSettings = trpc.recordingOnboard.setSettings.useMutati
 var useRecordingOnboardGetStatus = trpc.recordingOnboard.getStatus.useQuery;
 /** Generated alias around `trpc.recordingSignal.getStatus.useQuery`. */
 var useRecordingSignalGetStatus = trpc.recordingSignal.getStatus.useQuery;
+/** Generated alias around `trpc.runningState.getStatus.useQuery`. */
+var useRunningStateGetStatus = trpc.runningState.getStatus.useQuery;
 /** Generated alias around `trpc.sceneMonitor.listScenes.useQuery`. */
 var useSceneMonitorListScenes = trpc.sceneMonitor.listScenes.useQuery;
 /** Generated alias around `trpc.sceneMonitor.listScenesBatch.useQuery`. */
@@ -13026,7 +13028,7 @@ function selectedDeviceOptions(options, selected) {
 * select. Both are inline in ui-library (like `node-select`) so any host that
 * renders the shared form field gets them without extra registration.
 */
-var INPUT_CLASS$1 = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
+var INPUT_CLASS$2 = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
 var INPUT_SHELL$1 = "flex items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1.5 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/30";
 var LABEL_CLASS$3 = "block text-[11px] font-medium text-foreground mb-1 break-words";
 var DESC_CLASS$2 = "text-[10px] text-foreground-subtle mt-0.5 break-words";
@@ -13156,7 +13158,7 @@ function DeviceSelectField({ field, value, onChange, disabled, translationFn })
 		required: field.required,
 		translationFn,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-			className: INPUT_CLASS$1,
+			className: INPUT_CLASS$2,
 			value: current,
 			disabled: disabled || field.disabled,
 			onChange: (e) => onChange(e.target.value),
@@ -14382,6 +14384,282 @@ function useCustomFieldRenderer(type) {
 	return (0, react$1.useContext)(CustomFieldRenderersContext)[type] ?? null;
 }
 //#endregion
+//#region src/primitives/button.tsx
+var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
+	variants: {
+		variant: {
+			primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+			secondary: "bg-surface text-foreground hover:bg-surface-hover",
+			ghost: "hover:bg-surface-hover text-foreground-muted",
+			danger: "bg-danger text-white hover:bg-danger/90",
+			outline: "border border-border bg-transparent text-foreground hover:bg-surface-hover"
+		},
+		size: {
+			sm: "h-7 px-2.5 text-xs gap-1.5",
+			md: "h-8 px-3 text-sm gap-2",
+			lg: "h-9 px-4 text-sm gap-2"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "sm"
+	}
+});
+var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+});
+Button.displayName = "Button";
+//#endregion
+//#region src/composites/account-sign-in-field.tsx
+var INPUT_CLASS$1 = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
+var BARE_CODE = /^[A-Za-z0-9._~-]{8,}$/;
+function isRecord$3(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isPresent(value) {
+	if (typeof value === "string") return value.trim().length > 0;
+	if ((0, _camstack_types.isSecretFieldView)(value) || (0, _camstack_types.isSecretMarker)(value)) return true;
+	return false;
+}
+function accountText(value) {
+	return typeof value === "string" && value.trim().length > 0 ? value.trim() : "";
+}
+function countFromValue(value) {
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+	if (Array.isArray(value)) return value.length;
+	if (typeof value === "string" && value.trim().startsWith("[")) try {
+		const parsed = JSON.parse(value);
+		if (Array.isArray(parsed)) return parsed.length;
+	} catch {
+		return null;
+	}
+	return null;
+}
+function nounFor(count, noun) {
+	return count === 1 ? noun : `${noun}s`;
+}
+function choicesOf(value) {
+	if (!Array.isArray(value)) return [];
+	const out = [];
+	for (const row of value) {
+		if (!isRecord$3(row) || typeof row["value"] !== "string" || typeof row["label"] !== "string") continue;
+		out.push({
+			value: row["value"],
+			label: row["label"],
+			...typeof row["brand"] === "string" ? { brand: row["brand"] } : {},
+			...typeof row["region"] === "string" ? { region: row["region"] } : {}
+		});
+	}
+	return out;
+}
+function selectedChoice(value) {
+	return typeof value === "string" ? value : "";
+}
+function shouldComplete(text) {
+	const trimmed = text.trim();
+	if (trimmed.length === 0) return false;
+	if (trimmed.includes("code=") || trimmed.includes("://") || trimmed.includes("error=")) return true;
+	return BARE_CODE.test(trimmed);
+}
+function AccountSignInField({ field, values, disabled, onAction, onChangeMany }) {
+	const t = useUiText();
+	const [phase, setPhase] = (0, react$1.useState)("idle");
+	const [attemptId, setAttemptId] = (0, react$1.useState)(null);
+	const [authorizeUrl, setAuthorizeUrl] = (0, react$1.useState)(null);
+	const [paste, setPaste] = (0, react$1.useState)("");
+	const [error, setError] = (0, react$1.useState)(null);
+	const [working, setWorking] = (0, react$1.useState)(false);
+	const [choices, setChoices] = (0, react$1.useState)([]);
+	const inFlight = (0, react$1.useRef)(false);
+	const account = accountText(values[field.accountKey]);
+	const tokenPresent = field.secretKeys.some((key) => isPresent(values[key]));
+	const signedIn = account.length > 0 || tokenPresent;
+	const count = (field.countKey !== void 0 ? countFromValue(values[field.countKey]) : null) ?? (field.countFromKey !== void 0 ? countFromValue(values[field.countFromKey]) : null);
+	const showPaste = phase === "pasting" || !signedIn && attemptId !== null;
+	const applyResult = (result) => {
+		const patch = {};
+		for (const [formKey, resultKey] of Object.entries(field.assignResult ?? {})) {
+			const assigned = result[resultKey];
+			if (typeof assigned === "string" || typeof assigned === "number") patch[formKey] = assigned;
+		}
+		if (Object.keys(patch).length > 0) onChangeMany?.(patch);
+		const nextChoices = choicesOf(result["choices"]);
+		setChoices(nextChoices.length > 1 ? nextChoices : []);
+		setPhase("idle");
+		setPaste("");
+		setAttemptId(null);
+		setAuthorizeUrl(null);
+	};
+	const begin = async () => {
+		if (!onAction || working) return;
+		setWorking(true);
+		setError(null);
+		try {
+			const result = await onAction(field.beginAction, field.key, {});
+			if (!isRecord$3(result) || typeof result["authorizeUrl"] !== "string" || typeof result["attemptId"] !== "string") {
+				setError(t("uiLibrary.accountSignIn.noLink", "The sign-in page could not be opened. Try again."));
+				return;
+			}
+			if ("verifier" in result || "state" in result) {
+				setError(t("uiLibrary.accountSignIn.noLink", "The sign-in page could not be opened. Try again."));
+				return;
+			}
+			setAttemptId(result["attemptId"]);
+			setAuthorizeUrl(result["authorizeUrl"]);
+			setPhase("pasting");
+			window.open(result["authorizeUrl"], "_blank", "noopener,noreferrer");
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setWorking(false);
+		}
+	};
+	const complete = async (callback) => {
+		if (!onAction || attemptId === null || inFlight.current) return;
+		inFlight.current = true;
+		setWorking(true);
+		setError(null);
+		try {
+			const result = await onAction(field.completeAction, field.key, {
+				attemptId,
+				callback
+			});
+			if (!isRecord$3(result)) {
+				setError(t("uiLibrary.accountSignIn.rejected", "The sign-in was not accepted. Start again."));
+				return;
+			}
+			applyResult(result);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			inFlight.current = false;
+			setWorking(false);
+		}
+	};
+	const signOut = async () => {
+		if (!onAction || working) return;
+		setWorking(true);
+		setError(null);
+		try {
+			await onAction(field.signOutAction, field.key, {});
+			const patch = { [field.accountKey]: "" };
+			if (field.countKey !== void 0) patch[field.countKey] = 0;
+			if (field.choiceKey !== void 0) patch[field.choiceKey] = "";
+			if (field.countFromKey !== void 0) patch[field.countFromKey] = [];
+			for (const key of field.secretKeys) patch[key] = _camstack_types.SECRET_CLEAR;
+			onChangeMany?.(patch);
+			setChoices([]);
+			setPhase("idle");
+			setAttemptId(null);
+			setPaste("");
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setWorking(false);
+		}
+	};
+	const pick = (value) => {
+		const chosen = choices.find((row) => row.value === value);
+		if (chosen === void 0 || field.choiceKey === void 0) return;
+		const patch = { [field.choiceKey]: chosen.value };
+		if (chosen.brand !== void 0) patch["brand"] = chosen.brand;
+		if (chosen.region !== void 0) patch["region"] = chosen.region;
+		onChangeMany?.(patch);
+	};
+	const statusAccount = account.length > 0 ? account : t("uiLibrary.accountSignIn.yourAccount", "your account");
+	const status = count === null ? t("uiLibrary.accountSignIn.signedIn", "Signed in as {{account}}", { account: statusAccount }) : t("uiLibrary.accountSignIn.signedInCount", "Signed in as {{account}} · {{detail}}", {
+		account: statusAccount,
+		detail: field.countNoun !== void 0 ? `${count} ${nounFor(count, field.countNoun)}` : String(count)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "col-span-1 flex min-w-0 flex-col gap-2",
+		children: [
+			signedIn && phase === "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-xs text-foreground",
+						children: status
+					}),
+					choices.length > 1 && field.choiceKey !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+						"aria-label": field.choiceLabel ?? t("uiLibrary.accountSignIn.choose", "Choose"),
+						options: choices.map((row) => ({
+							value: row.value,
+							label: row.label
+						})),
+						value: selectedChoice(values[field.choiceKey]),
+						onChange: (event) => pick(event.target.value),
+						disabled: disabled || working
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							disabled: disabled || working,
+							onClick: () => void begin(),
+							children: t("uiLibrary.accountSignIn.again", "Sign in again")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							disabled: disabled || working,
+							onClick: () => void signOut(),
+							children: t("uiLibrary.accountSignIn.signOut", "Sign out")
+						})]
+					})
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				type: "button",
+				variant: "primary",
+				size: "sm",
+				disabled: disabled || working,
+				onClick: () => void begin(),
+				children: working && phase !== "pasting" ? t("uiLibrary.accountSignIn.working", "Working…") : t("uiLibrary.accountSignIn.signInWith", "Sign in with {{provider}}", { provider: field.providerLabel })
+			}),
+			showPaste && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1.5",
+				children: [authorizeUrl !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					className: "text-[11px] text-primary break-all",
+					href: authorizeUrl,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					children: t("uiLibrary.accountSignIn.open", "Open the sign-in page")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+					className: `${INPUT_CLASS$1} min-h-[60px] resize-y`,
+					"aria-label": t("uiLibrary.accountSignIn.paste", "Redirect address or code"),
+					placeholder: field.pastePlaceholder,
+					value: paste,
+					disabled: disabled || working,
+					onChange: (event) => {
+						const next = event.target.value;
+						setPaste(next);
+						if (shouldComplete(next)) complete(next);
+					}
+				})]
+			}),
+			error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[11px] text-danger",
+				children: error
+			})
+		]
+	});
+}
+function SecretPresenceField({ field, values }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "col-span-1 text-xs text-foreground",
+		children: isPresent(values[field.sourceKey]) ? field.yesLabel : field.noLabel
+	});
+}
+//#endregion
 //#region src/composites/confirm-dialog.tsx
 /**
 * The ONE modal dialog of the product — confirm, alert and prompt.
@@ -20685,39 +20963,6 @@ var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
 });
 Skeleton.displayName = "Skeleton";
 //#endregion
-//#region src/primitives/button.tsx
-var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
-	variants: {
-		variant: {
-			primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-			secondary: "bg-surface text-foreground hover:bg-surface-hover",
-			ghost: "hover:bg-surface-hover text-foreground-muted",
-			danger: "bg-danger text-white hover:bg-danger/90",
-			outline: "border border-border bg-transparent text-foreground hover:bg-surface-hover"
-		},
-		size: {
-			sm: "h-7 px-2.5 text-xs gap-1.5",
-			md: "h-8 px-3 text-sm gap-2",
-			lg: "h-9 px-4 text-sm gap-2"
-		}
-	},
-	defaultVariants: {
-		variant: "primary",
-		size: "sm"
-	}
-});
-var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		ref,
-		className: cn(buttonVariants({
-			variant,
-			size
-		}), className),
-		...props
-	});
-});
-Button.displayName = "Button";
-//#endregion
 //#region src/composites/cap-settings/consumable-rows.tsx
 /** `value` null = unknown (D393) — renders an em-dash, never a fake `0`. */
 function formatRemaining(t, r) {
@@ -29962,7 +30207,7 @@ function ProbeField({ field, value, onChange, disabled, translationFn, onTestFie
 		]
 	});
 }
-function GroupField({ field, values, onChange, disabled, translationFn, onTestField }) {
+function GroupField({ field, values, onChange, onChangeMany, disabled, translationFn, onTestField, onAction }) {
 	const [collapsed, setCollapsed] = (0, react$1.useState)(field.defaultCollapsed ?? false);
 	const isAccordion = field.style === "accordion";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -29986,9 +30231,11 @@ function GroupField({ field, values, onChange, disabled, translationFn, onTestFi
 					field: subField,
 					values,
 					onChange,
+					onChangeMany,
 					disabled,
 					translationFn,
-					onTestField
+					onTestField,
+					onAction
 				}, subField.key))
 			})]
 		})
@@ -30404,6 +30651,10 @@ function AddonActionSelectField({ field, value, values, onChange, disabled, onAc
 				}
 			}
 			setOptions(list);
+			if (field.hideWhenFewerThan !== void 0 && list.length === 1 && (typeof value !== "string" || value.length === 0)) {
+				const only = list[0]?.[valueKey];
+				if (typeof only === "string" && only.length > 0) onChange(only);
+			}
 		}).catch((err) => {
 			if (cancelled) return;
 			setError(err instanceof Error ? err.message : String(err));
@@ -30423,6 +30674,8 @@ function AddonActionSelectField({ field, value, values, onChange, disabled, onAc
 	const valueKey = field.mapOption.value;
 	const labelKey = field.mapOption.label;
 	const descKey = field.mapOption.description;
+	if (!onAction && field.hideWhenFewerThan !== void 0) return null;
+	if (field.hideWhenFewerThan !== void 0 && options !== null && options.length < field.hideWhenFewerThan) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
 		label: field.label,
 		description: field.description,
@@ -31055,9 +31308,11 @@ function FormField({ field, values, onChange, onChangeMany, disabled, translatio
 			field,
 			values,
 			onChange,
+			onChangeMany,
 			disabled,
 			translationFn,
-			onTestField
+			onTestField,
+			onAction
 		});
 		case "sub-tabs": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubTabsField, {
 			field,
@@ -31086,22 +31341,36 @@ function FormField({ field, values, onChange, onChangeMany, disabled, translatio
 			disabled,
 			onAction
 		});
-		case "addon-action-select": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddonActionSelectField, {
+		case "addon-action-select": {
+			const storedKey = field.writesKey ?? field.key;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddonActionSelectField, {
+				field,
+				value: values[storedKey],
+				values,
+				onChange: (next) => onChange(storedKey, next),
+				disabled,
+				onAction
+			});
+		}
+		case "addon-action-button": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddonActionButtonField, {
 			field,
-			value,
 			values,
-			onChange: handleChange,
 			disabled,
-			onAction
+			onAction,
+			onChange,
+			onChangeMany
 		});
-		case "addon-action-button": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddonActionButtonField, {
+		case "account-sign-in": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountSignInField, {
 			field,
 			values,
 			disabled,
 			onAction,
-			onChange,
 			onChangeMany
 		});
+		case "secret-presence": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecretPresenceField, {
+			field,
+			values
+		});
 		case "device-action-button": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceActionButtonField, {
 			field,
 			values,
@@ -33644,6 +33913,99 @@ function BatteryBadge({ status, variant = "compact", className }) {
 	});
 }
 //#endregion
+//#region src/composites/running-status.ts
+function trimmedPhase(phase) {
+	if (phase === null) return void 0;
+	const trimmed = phase.trim();
+	return trimmed === "" ? void 0 : trimmed;
+}
+/** Minutes elapsed since `since`, at least 1; null when `since` is not usable. */
+function runningDurationSince(since, now) {
+	if (since === null || !Number.isFinite(since) || since <= 0) return null;
+	const ms = now - since;
+	if (ms <= 0) return null;
+	const totalMinutes = Math.floor(ms / 6e4);
+	if (totalMinutes < 60) return { minutes: Math.max(1, totalMinutes) };
+	return { hours: Math.floor(totalMinutes / 60) };
+}
+function runningStatusParts(running, since, phase, now) {
+	const phaseLabel = trimmedPhase(phase);
+	if (running === null) return { key: "unknown" };
+	if (running === false) return phaseLabel === void 0 ? { key: "idle" } : {
+		key: "idle",
+		phase: phaseLabel
+	};
+	const duration = runningDurationSince(since, now);
+	if (duration === null) return phaseLabel === void 0 ? { key: "running" } : {
+		key: "running",
+		phase: phaseLabel
+	};
+	return {
+		key: "running",
+		duration,
+		...phaseLabel === void 0 ? {} : { phase: phaseLabel }
+	};
+}
+//#endregion
+//#region src/composites/running-badge.tsx
+function RunningBadge({ running, children, className }) {
+	const t = useUiText();
+	if (running === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-running": "unknown",
+		className: cn("inline-flex shrink-0", className),
+		children
+	});
+	if (running === true) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"data-running": "running",
+		className: cn("relative inline-flex shrink-0 rounded-full p-0.5", className),
+		"aria-label": t("uiLibrary.runningBadge.running", "Running"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "pointer-events-none absolute inset-0 rounded-full border border-primary animate-pulse",
+			"aria-hidden": true
+		}), children]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"data-running": "idle",
+		className: cn("relative inline-flex shrink-0", className),
+		"aria-label": t("uiLibrary.runningBadge.idle", "Idle"),
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "pointer-events-none absolute -bottom-px -right-px h-1.5 w-1.5 rounded-full bg-foreground-subtle",
+			"aria-hidden": true
+		})]
+	});
+}
+function RunningStatusLine({ running, since, phase, className, now = Date.now() }) {
+	const t = useUiText();
+	const parts = runningStatusParts(running, since, phase, now);
+	if (parts.key === "unknown") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: cn("text-[11px] text-foreground-subtle", className),
+		children: t("uiLibrary.runningStatus.unknown", "Unknown")
+	});
+	if (parts.key === "idle") {
+		const base = t("uiLibrary.runningStatus.idle", "Idle");
+		const text = parts.phase === void 0 ? base : t("uiLibrary.runningStatus.withPhase", "{{state}} · {{phase}}", {
+			state: base,
+			phase: parts.phase
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: cn("text-[11px] text-foreground-muted", className),
+			children: text
+		});
+	}
+	let base;
+	if (parts.duration === void 0) base = t("uiLibrary.runningStatus.running", "Running");
+	else if ("minutes" in parts.duration) base = t("uiLibrary.runningStatus.runningForMinutes", "Running for {{count}} min", { count: parts.duration.minutes });
+	else base = t("uiLibrary.runningStatus.runningForHours", "Running for {{count}} h", { count: parts.duration.hours });
+	const text = parts.phase === void 0 ? base : t("uiLibrary.runningStatus.withPhase", "{{state}} · {{phase}}", {
+		state: base,
+		phase: parts.phase
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: cn("text-[11px] text-foreground-muted", className),
+		children: text
+	});
+}
+//#endregion
 //#region src/composites/network-link-badge.tsx
 /**
 * NetworkLinkBadge — compact link indicator for device rows and headers.
@@ -50584,6 +50946,18 @@ function dishwasherHeadline(status, t = defaultUiText) {
 function featureLabel(key) {
 	return (key.split(".").pop() ?? key).replace(/([a-z0-9])([A-Z])/g, "$1 $2");
 }
+/**
+* Salt and rinse aid are consumable items (D915). Their events must not
+* reappear on the hero — the Consumables section is the only surface.
+*/
+function isConsumableDishwasherEvent(event) {
+	const short = (event.split(".").pop() ?? event).toLowerCase();
+	return short.includes("salt") || short.includes("rinse");
+}
+/** Raised events the hero may name. Consumable events are dropped. */
+function visibleDishwasherEvents(events) {
+	return events.filter((event) => !isConsumableDishwasherEvent(event));
+}
 /** Whole seconds as a short duration: `1 h 24 min`, `42 min`, `30 s`. */
 function formatDuration(seconds, t = defaultUiText) {
 	if (seconds < 60) return t("uiLibrary.dishwasher.durationSeconds", "{{n}} s", { n: seconds });
@@ -50740,7 +51114,7 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 							children: [display.doorOpen === true && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "inline-flex items-center gap-1 text-xs text-warning",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DoorOpen, { className: "h-3.5 w-3.5" }), t("uiLibrary.dishwasher.doorOpen", "Door open")]
-							}), display.activeEvents.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							}), visibleDishwasherEvents(display.activeEvents).map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "text-xs text-warning",
 								title: event,
 								children: featureLabel(event)
@@ -55230,6 +55604,8 @@ function ChildRow$1({ trpc, child, onNavigate, parentName }) {
 	const showMotionTrigger = enabled && hasMotionTriggerFeature(child);
 	const roleDefaults = useRoleDisplayDefaults();
 	useIconGlyphsVersion();
+	const ChildIcon = deviceLeadIcon(child, roleDefaults);
+	const runningSlice = useDeviceState(trpc, child.id, (s) => s.runningState);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		onClick: (e) => {
 			e.stopPropagation();
@@ -55237,7 +55613,10 @@ function ChildRow$1({ trpc, child, onNavigate, parentName }) {
 		},
 		className: "w-full flex items-center gap-2 px-3 py-1.5 text-left hover:bg-surface-hover transition-colors cursor-pointer",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(deviceLeadIcon(child, roleDefaults), { className: "h-3 w-3 text-foreground-subtle flex-shrink-0" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RunningBadge, {
+				running: runningSlice === void 0 || runningSlice.running === null ? null : runningSlice.running,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildIcon, { className: "h-3 w-3 text-foreground-subtle flex-shrink-0" })
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-[10.5px] text-foreground flex-1 truncate",
 				children: childListName(child, parentName)
@@ -55631,13 +56010,16 @@ var CHEVRON_SLOT_CLASS = {
 	horizontal: "h-3.5 w-3.5",
 	stacked: "h-4 w-4 mt-0.5"
 };
-function DeviceItemHeader({ device, variant, flags, parent, integrationIcon, hasChildren, expanded, onToggleExpand, onNavigateToParent, stacked = false, nameOverflow = "truncate" }) {
+function DeviceItemHeader({ trpc, device, variant, flags, parent, integrationIcon, hasChildren, expanded, onToggleExpand, onNavigateToParent, stacked = false, nameOverflow = "truncate" }) {
 	const t = useUiText();
 	const containerChildren = useContainerChildren(device.id);
 	const roleDefaults = useRoleDisplayDefaults();
 	useIconGlyphsVersion();
 	const Icon = deviceLeadIcon(effectiveIconDevice(device, containerChildren), roleDefaults);
+	const runningSlice = useDeviceState(trpc, device.id, (s) => s.runningState);
+	const runningBadge = runningSlice === void 0 || runningSlice.running === null ? null : runningSlice.running;
 	const slotClass = stacked ? CHEVRON_SLOT_CLASS.stacked : CHEVRON_SLOT_CLASS.horizontal;
+	const iconClass = cn("text-foreground-subtle flex-shrink-0", stacked ? "h-4 w-4 mt-0.5" : variant === "minimal" ? "h-3 w-3" : "h-3.5 w-3.5");
 	const lineClass = nameOverflow === "scroll" ? NAME_TEXT_CLASS : "truncate";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn(stacked ? "flex items-start gap-2 w-full min-w-0" : "flex items-center gap-2 flex-1 min-w-0"),
@@ -55657,7 +56039,10 @@ function DeviceItemHeader({ device, variant, flags, parent, integrationIcon, has
 				"data-testid": "chevron-slot",
 				className: cn("flex-shrink-0", slotClass)
 			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: cn("text-foreground-subtle flex-shrink-0", stacked ? "h-4 w-4 mt-0.5" : variant === "minimal" ? "h-3 w-3" : "h-3.5 w-3.5") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RunningBadge, {
+				running: runningBadge,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: iconClass })
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex-1 min-w-0",
 				children: [
@@ -56151,6 +56536,7 @@ function DeviceItem(props) {
 					className: "flex-shrink-0"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceItemHeader, {
+					trpc,
 					device,
 					variant,
 					flags,
@@ -56227,6 +56613,7 @@ function DeviceItem(props) {
 							className: "flex-shrink-0 mt-0.5"
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceItemHeader, {
+							trpc,
 							device,
 							variant,
 							flags,
@@ -56318,6 +56705,7 @@ function DeviceItemTableRow(props) {
 						"aria-label": t("uiLibrary.deviceItem.select", "Select {{name}}", { name: device.name }),
 						className: "flex-shrink-0"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceItemHeader, {
+						trpc,
 						device,
 						variant,
 						flags,
@@ -68488,6 +68876,8 @@ exports.RotateCcw = RotateCcw;
 exports.RotateCw = RotateCw;
 exports.Route = Route;
 exports.RunReport = RunReport;
+exports.RunningBadge = RunningBadge;
+exports.RunningStatusLine = RunningStatusLine;
 exports.SCENE_CAPTURE_VARIANTS = SCENE_CAPTURE_VARIANTS;
 exports.SCENE_CAPTURE_VARIANTS$1 = SCENE_CAPTURE_VARIANTS;
 exports.SECRET_MASK_PLACEHOLDER = SECRET_MASK_PLACEHOLDER;
@@ -68929,6 +69319,8 @@ exports.roiTooLarge = roiTooLarge;
 exports.roiTooLarge$1 = roiTooLarge;
 exports.rootSourceState = rootSourceState;
 exports.routerBasename = routerBasename;
+exports.runningDurationSince = runningDurationSince;
+exports.runningStatusParts = runningStatusParts;
 exports.sameLocationSuggestions = sameLocationSuggestions;
 exports.scrubReducer = scrubReducer;
 exports.searchSteps = searchSteps;
@@ -70023,6 +70415,7 @@ exports.useRecordingOnboardSetSettings = useRecordingOnboardSetSettings;
 exports.useRecordingSignalGetStatus = useRecordingSignalGetStatus;
 exports.useRemoteComponent = useRemoteComponent;
 exports.useRoleDisplayDefaults = useRoleDisplayDefaults;
+exports.useRunningStateGetStatus = useRunningStateGetStatus;
 exports.useSceneMonitorCaptureReference = useSceneMonitorCaptureReference;
 exports.useSceneMonitorCreateScene = useSceneMonitorCreateScene;
 exports.useSceneMonitorDeleteReference = useSceneMonitorDeleteReference;