@camstack/ui-library 1.2.319 → 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,
@@ -32467,9 +32736,36 @@ function ConfigSchemaFieldControl({ field, allFields, step, disabled, modelScope
 }
 //#endregion
 //#region src/composites/step-inspector/setting-values.ts
+/**
+* How the step inspector names a stored setting value, and what a field falls
+* back to when no layer stores it. Pure, so the provenance line and its tests
+* agree on one spelling.
+*/
 function isValueField(field) {
 	return field.type !== "separator" && field.type !== "info" && field.type !== "group";
 }
+/**
+* A field only the accelerator that runs the model may set (D927): a model id,
+* a `<key>ModelId` binding, a `minConfidence*` floor, or any field the schema
+* marks as bound to its model. A camera never renders one as an input.
+*/
+function isModelScopedField(field) {
+	if ("bindsToModel" in field && field.bindsToModel === true) return true;
+	return "key" in field && (0, _camstack_types.isModelScopedStepSettingKey)(field.key);
+}
+/** The fields a CAMERA may edit: every model-scoped field removed, groups recursed. */
+function withoutModelScopedFields(fields) {
+	return fields.flatMap((field) => {
+		if (field.type === "group") {
+			const inner = withoutModelScopedFields(field.fields);
+			return inner.length > 0 ? [{
+				...field,
+				fields: [...inner]
+			}] : [];
+		}
+		return isModelScopedField(field) ? [] : [field];
+	});
+}
 /** True for a D738 field whose value is stored with the model it was made for. */
 function bindsToModel(field) {
 	return (field.type === "slider" || field.type === "number") && field.bindsToModel === true;
@@ -32586,7 +32882,7 @@ function SettingProvenance({ field, layers, target, labels, boundKeys, modelId,
 				children: withDefault.join(" · ")
 			}),
 			pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "rounded border border-amber-500/40 px-1.5 py-px text-amber-500",
+				className: "rounded border border-warning/40 px-1.5 py-px text-warning",
 				title: t("uiLibrary.layeredSettings.pinnedHint", "Stored by an older editor as a copy of the value below. It changes nothing today, but it stops later changes below from reaching this camera."),
 				children: t("uiLibrary.layeredSettings.pinned", "pinned at the {{source}} value", { source: pinnedAt.toLowerCase() })
 			}),
@@ -32603,8 +32899,9 @@ function SettingProvenance({ field, layers, target, labels, boundKeys, modelId,
 		]
 	});
 }
-function LayeredSettingsForm({ addon, fields, layers, target, labels, modelId, onChangeLayer, rootModel, pinnedKeys = [], fieldActions, headerActions, highlightKey = null, disabled = false }) {
+function LayeredSettingsForm({ addon, fields: givenFields, layers, target, labels, modelId, onChangeLayer, rootModel, pinnedKeys = [], fieldActions, headerActions, highlightKey = null, disabled = false }) {
 	const t = useUiText();
+	const fields = target === "camera" ? withoutModelScopedFields(givenFields) : givenFields;
 	const boundKeys = (0, _camstack_types.collectModelBoundKeys)(fields);
 	const effective = (0, _camstack_types.effectiveStepSettings)(layers);
 	const targetLayer = layers[target];
@@ -33616,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.
@@ -50556,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 });
@@ -50712,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)
@@ -55202,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();
@@ -55209,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)
@@ -55603,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"),
@@ -55629,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: [
@@ -56123,6 +56536,7 @@ function DeviceItem(props) {
 					className: "flex-shrink-0"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceItemHeader, {
+					trpc,
 					device,
 					variant,
 					flags,
@@ -56199,6 +56613,7 @@ function DeviceItem(props) {
 							className: "flex-shrink-0 mt-0.5"
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceItemHeader, {
+							trpc,
 							device,
 							variant,
 							flags,
@@ -56290,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,
@@ -61234,6 +61650,7 @@ function RecordEntrySecretField({ name, label, required, value, disabled, onPatc
 function SchemaField(props) {
 	const { path, name, node, value, secretPaths, required, disabled, onPatch } = props;
 	const label = labelFor(name, node);
+	const uiText = useUiText();
 	if (isSecretField(path, secretPaths, node)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecordEntrySecretField, {
 		name,
 		label,
@@ -61305,7 +61722,7 @@ function SchemaField(props) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField$1, {
 			label,
 			required,
-			description: "JSON object",
+			description: uiText("uiLibrary.recordEntries.jsonObject", "JSON object"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 				className: cn("min-h-[8rem] w-full resize-y rounded-md border border-border bg-surface px-2.5 py-2 font-mono text-xs text-foreground", "placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-inset focus:ring-primary", "disabled:cursor-not-allowed disabled:opacity-50"),
 				rows: 6,
@@ -62062,9 +62479,8 @@ function ResponseLog({ data, label = "Response", className = "" }) {
 * `clampToParent` narrows the target dropdown + access checkboxes to
 * what the CALLER possesses. Admins pass `null` to allow everything.
 *
-* This is the RAW editor. The simple, two-question Access panel on
-* `/system/users` composes the same wire shape through `ACCESS_ROLES`; this
-* one is what an operator drops into when a grant set is not a plain role.
+* This is the RAW editor, for TOKENS. People are not edited here: a person
+* is an Admin or a Viewer (D921), set from `/system/identity?tab=users`.
 */
 /** `<select>` value → the tri-state `includeLinked` it means. */
 var INCLUDE_LINKED_VALUES = {
@@ -68460,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;
@@ -68800,6 +69218,7 @@ exports.isFieldVisible = isFieldVisible;
 exports.isGroupExpanded = isGroupExpanded;
 exports.isHistoryWindowId = isHistoryWindowId;
 exports.isKeychainFieldValue = isKeychainFieldValue;
+exports.isModelScopedField = isModelScopedField;
 exports.isRedactedSecret = isRedactedSecret;
 exports.isRefusal = isRefusal;
 exports.isSecretField = isSecretField;
@@ -68900,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;
@@ -69994,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;
@@ -70264,5 +70686,6 @@ exports.withHiddenChart = withHiddenChart;
 exports.withPanel = withPanel;
 exports.withResolvedParentDetail = withResolvedParentDetail;
 exports.withUseRootModel = withUseRootModel;
+exports.withoutModelScopedFields = withoutModelScopedFields;
 exports.withoutPanel = withoutPanel;
 exports.writeStoredGroupBy = writeStoredGroupBy;