@camstack/ui-library 1.2.182 → 1.2.184

package/dist/composites/stream-debug/stream-debug-overlay.d.ts

@@ -17,6 +17,16 @@ import { WebrtcDebugStats } from './webrtc-debug-stats.js';
  *     (D393). In a tool whose whole job is telling a stalled decoder from a
  *     stalled transport, "nobody measured" and "measured nothing" are
  *     opposite conclusions.
+ *  4. It must not cover the picture, or the operator turns it off and the tool
+ *     is worth nothing. So it is a one-line PILL by default — the verdict and
+ *     the three numbers that carry it — and the full panel only when asked.
+ *     Collapsed it is small enough to live alongside the app's own overlays
+ *     (the audio meter, the box layer), which the operator positions freely
+ *     and which this used to sit on top of.
+ *
+ * Density follows from the same rule: a cumulative counter and its window
+ * share ONE row (`12345 +30`), because two rows saying almost the same thing
+ * is how a panel grows until it covers the video it is describing.
  */
 export interface StreamDebugOverlayProps {
     /** The client half. Null before the first successful poll. */

package/dist/composites/stream-panel.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { CamProfile, StationaryOverlayBox } from '@camstack/types';
+import { CamProfile, WebrtcSessionDebug, StationaryOverlayBox } from '@camstack/types';
 import { SignalingResult, ClientOfferResult, ClientStreamHints, SessionSignalingState } from './camera-stream-player';
 import { DeviceDetections } from '../hooks/use-device-detections';
 /**
@@ -69,6 +69,12 @@ export interface StreamPanelProps {
      * adaptive re-offer (steady-state behaviour is unchanged).
      */
     readonly getSessionState?: (sessionId: string) => Promise<SessionSignalingState>;
+    /**
+     * The server half of the stream-debug overlay. Optional, and when it is
+     * absent the overlay SAYS so rather than showing an empty section — a panel
+     * that silently omits half its answer is worse than one that admits it.
+     */
+    readonly getSessionDebug?: (sessionId: string) => Promise<WebrtcSessionDebug>;
     /**
      * When set, the panel switches to VOD mode: it renders an `HlsVideo`
      * over this master `.m3u8` URL INSTEAD of the live WebRTC player, and
@@ -196,4 +202,4 @@ export interface StreamPanelProps {
     readonly chromeless?: boolean;
     readonly className?: string;
 }
-export declare function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections, defaultShowMotion, streamStats, autoPlay, showPlayStop, snapshotSrc, snapshotLoading, onRefreshSnapshot, showStreamStats, children, extraOverlay, ptzAvailable, ptzShown, ptzOverlay, onPtzToggle, intercomAvailable, intercomShown, onIntercomToggle, chromeless, className, }: StreamPanelProps): import("react").JSX.Element;
+export declare function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections, defaultShowMotion, streamStats, autoPlay, showPlayStop, snapshotSrc, snapshotLoading, onRefreshSnapshot, showStreamStats, children, extraOverlay, ptzAvailable, ptzShown, ptzOverlay, onPtzToggle, intercomAvailable, intercomShown, onIntercomToggle, chromeless, className, }: StreamPanelProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -27236,15 +27236,21 @@ var VERDICT_CLASS = {
 	"transport-stall": "bg-rose-500/30 text-rose-100",
 	"frozen-unknown": "bg-white/15 text-white/70"
 };
-function Row({ label, value, strong = false }) {
+function Row({ label, value, window, strong = false }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-baseline justify-between gap-3 leading-tight",
+		className: "flex items-baseline justify-between gap-2 leading-[1.25]",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "text-white/55 shrink-0",
 			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
-			children: value
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-baseline gap-1 text-right",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
+				children: value
+			}), window !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sky-300/80 tabular-nums",
+				children: window
+			})]
 		})]
 	});
 }
@@ -27261,16 +27267,45 @@ function SectionHeader({ title, measuredAt, now }) {
 		})]
 	});
 }
+/** The pill's dot: the verdict, in the one place that is always visible. */
+var VERDICT_DOT = {
+	unknown: "bg-white/50",
+	decoding: "bg-emerald-400",
+	"decoder-stall": "bg-amber-400",
+	"transport-stall": "bg-rose-400",
+	"frozen-unknown": "bg-white/50"
+};
 function StreamDebugOverlay(props) {
 	const { stats, server, serverError, serverWired, now, sessionId } = props;
 	const verdict = freezeVerdict(stats);
 	const win = stats?.window;
+	const [expanded, setExpanded] = (0, react$1.useState)(false);
+	const stale = stats !== null && now - stats.at > STALE_AFTER_MS;
+	if (!expanded) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: () => setExpanded(true),
+		className: "absolute bottom-10 left-2 z-20 transform-gpu flex items-center gap-1.5 rounded bg-neutral-950/90 ring-1 ring-white/20 px-1.5 py-0.5 text-[9px] font-mono text-white/85 tabular-nums select-text",
+		"data-testid": "stream-debug-pill",
+		title: verdict.label,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-1.5 w-1.5 rounded-full ${VERDICT_DOT[verdict.kind]}` }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: stats?.width !== null && stats?.width !== void 0 ? `${stats.width}×${stats.height}` : UNKNOWN }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [n(stats?.fps), "fps"] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [n(win?.kbps), "k"] }),
+			stale && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-amber-300",
+				children: "stale"
+			})
+		]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "absolute top-2 right-2 z-20 transform-gpu w-[15.5rem] max-h-[calc(100%-1rem)] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-2 py-1.5 text-[10px] font-mono text-white/90 select-text",
+		className: "absolute bottom-10 left-2 z-20 transform-gpu w-[13.5rem] max-h-[70%] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-1.5 py-1 text-[9px] font-mono text-white/90 select-text",
 		"data-testid": "stream-debug-overlay",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `rounded px-1.5 py-1 mb-1 text-[10px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => setExpanded(false),
+				className: `w-full text-left rounded px-1.5 py-0.5 mb-1 text-[9px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
 				children: verdict.label
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
@@ -27281,11 +27316,7 @@ function StreamDebugOverlay(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "framesDecoded",
 				value: n(stats?.framesDecoded),
-				strong: true
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.framesDecoded),
+				window: win?.framesDecoded === null ? void 0 : `+${n(win?.framesDecoded)}`,
 				strong: true
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
@@ -27294,40 +27325,28 @@ function StreamDebugOverlay(props) {
 				strong: true
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· total frozen",
+				label: "frozen",
 				value: n(stats?.totalFreezeMs, { suffix: "ms" }),
+				window: win?.freezeMs === null ? void 0 : `+${n(win?.freezeMs)}ms`,
 				strong: true
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.freezeMs, { suffix: "ms" })
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "pliCount",
 				value: n(stats?.pliCount),
+				window: win?.pliCount === null ? void 0 : `+${n(win?.pliCount)}`,
 				strong: true
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.pliCount)
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "framesDropped",
 				value: n(stats?.framesDropped)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "decode time",
+				label: "decode",
 				value: n(stats?.avgDecodeMs, {
 					digits: 1,
 					suffix: "ms"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.decodeMs, {
-					digits: 1,
-					suffix: "ms"
-				})
+				}),
+				window: win?.decodeMs === null ? void 0 : `${n(win?.decodeMs, { digits: 1 })}ms`
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
 				title: "picture",
@@ -27385,33 +27404,24 @@ function StreamDebugOverlay(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "packetsLost",
-				value: n(stats?.packetsLost)
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.packetsLost)
+				value: n(stats?.packetsLost),
+				window: win?.packetsLost === null ? void 0 : `+${n(win?.packetsLost)}`
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "loss",
 				value: n(stats?.lossPercent, {
 					digits: 2,
 					suffix: "%"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.lossPercent, {
+				}),
+				window: win?.lossPercent === null ? void 0 : n(win?.lossPercent, {
 					digits: 2,
 					suffix: "%"
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "nackCount",
-				value: n(stats?.nackCount)
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.nackCount)
+				value: n(stats?.nackCount),
+				window: win?.nackCount === null ? void 0 : `+${n(win?.nackCount)}`
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "candidate pair",
@@ -27434,9 +27444,16 @@ function StreamDebugOverlay(props) {
 				measuredAt: server?.observedAt ?? null,
 				now
 			}),
-			!serverWired ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-white/50 leading-tight py-0.5",
-				children: "not wired on this host"
+			!serverWired ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-amber-300/90 leading-tight py-0.5",
+				children: [
+					"not wired on this surface — this player was mounted without",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-white/80",
+						children: " getSessionDebug"
+					}),
+					", so the server half cannot be asked"
+				]
 			}) : serverError !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "text-rose-300 leading-tight py-0.5 break-words",
 				children: serverError
@@ -28598,7 +28615,10 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		let cancelled = false;
 		const tick = async () => {
 			const sid = activeSessionIdRef.current;
-			if (sid === null) return;
+			if (sid === null) {
+				setServerDebugError("no session id on this player yet — nothing to ask the server about");
+				return;
+			}
 			try {
 				const answer = await getSessionDebug(sid);
 				if (cancelled) return;
@@ -51062,7 +51082,7 @@ function ImageOffIcon({ className }) {
 		]
 	});
 }
-function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
+function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
 	const registeredButtons = usePlayerToolbarButtons();
 	const recordedPlayback = useRecordedPlayback();
 	const [isPlaying, setIsPlaying] = (0, react$1.useState)(autoPlay);
@@ -51380,6 +51400,7 @@ function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIce
 					handleOffer: playerHandleOffer,
 					reoffer: playerReoffer,
 					getSessionState,
+					...getSessionDebug ? { getSessionDebug } : {},
 					getIceServers,
 					addIceCandidate,
 					getIceCandidates,

package/dist/index.js

@@ -27212,15 +27212,21 @@ var VERDICT_CLASS = {
 	"transport-stall": "bg-rose-500/30 text-rose-100",
 	"frozen-unknown": "bg-white/15 text-white/70"
 };
-function Row({ label, value, strong = false }) {
+function Row({ label, value, window, strong = false }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-baseline justify-between gap-3 leading-tight",
+		className: "flex items-baseline justify-between gap-2 leading-[1.25]",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "text-white/55 shrink-0",
 			children: label
-		}), /* @__PURE__ */ jsx("span", {
-			className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
-			children: value
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-baseline gap-1 text-right",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
+				children: value
+			}), window !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-sky-300/80 tabular-nums",
+				children: window
+			})]
 		})]
 	});
 }
@@ -27237,16 +27243,45 @@ function SectionHeader({ title, measuredAt, now }) {
 		})]
 	});
 }
+/** The pill's dot: the verdict, in the one place that is always visible. */
+var VERDICT_DOT = {
+	unknown: "bg-white/50",
+	decoding: "bg-emerald-400",
+	"decoder-stall": "bg-amber-400",
+	"transport-stall": "bg-rose-400",
+	"frozen-unknown": "bg-white/50"
+};
 function StreamDebugOverlay(props) {
 	const { stats, server, serverError, serverWired, now, sessionId } = props;
 	const verdict = freezeVerdict(stats);
 	const win = stats?.window;
+	const [expanded, setExpanded] = useState(false);
+	const stale = stats !== null && now - stats.at > STALE_AFTER_MS;
+	if (!expanded) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => setExpanded(true),
+		className: "absolute bottom-10 left-2 z-20 transform-gpu flex items-center gap-1.5 rounded bg-neutral-950/90 ring-1 ring-white/20 px-1.5 py-0.5 text-[9px] font-mono text-white/85 tabular-nums select-text",
+		"data-testid": "stream-debug-pill",
+		title: verdict.label,
+		children: [
+			/* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 rounded-full ${VERDICT_DOT[verdict.kind]}` }),
+			/* @__PURE__ */ jsx("span", { children: stats?.width !== null && stats?.width !== void 0 ? `${stats.width}×${stats.height}` : UNKNOWN }),
+			/* @__PURE__ */ jsxs("span", { children: [n(stats?.fps), "fps"] }),
+			/* @__PURE__ */ jsxs("span", { children: [n(win?.kbps), "k"] }),
+			stale && /* @__PURE__ */ jsx("span", {
+				className: "text-amber-300",
+				children: "stale"
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "absolute top-2 right-2 z-20 transform-gpu w-[15.5rem] max-h-[calc(100%-1rem)] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-2 py-1.5 text-[10px] font-mono text-white/90 select-text",
+		className: "absolute bottom-10 left-2 z-20 transform-gpu w-[13.5rem] max-h-[70%] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-1.5 py-1 text-[9px] font-mono text-white/90 select-text",
 		"data-testid": "stream-debug-overlay",
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: `rounded px-1.5 py-1 mb-1 text-[10px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setExpanded(false),
+				className: `w-full text-left rounded px-1.5 py-0.5 mb-1 text-[9px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
 				children: verdict.label
 			}),
 			/* @__PURE__ */ jsx(SectionHeader, {
@@ -27257,11 +27292,7 @@ function StreamDebugOverlay(props) {
 			/* @__PURE__ */ jsx(Row, {
 				label: "framesDecoded",
 				value: n(stats?.framesDecoded),
-				strong: true
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.framesDecoded),
+				window: win?.framesDecoded === null ? void 0 : `+${n(win?.framesDecoded)}`,
 				strong: true
 			}),
 			/* @__PURE__ */ jsx(Row, {
@@ -27270,40 +27301,28 @@ function StreamDebugOverlay(props) {
 				strong: true
 			}),
 			/* @__PURE__ */ jsx(Row, {
-				label: "· total frozen",
+				label: "frozen",
 				value: n(stats?.totalFreezeMs, { suffix: "ms" }),
+				window: win?.freezeMs === null ? void 0 : `+${n(win?.freezeMs)}ms`,
 				strong: true
 			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.freezeMs, { suffix: "ms" })
-			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "pliCount",
 				value: n(stats?.pliCount),
+				window: win?.pliCount === null ? void 0 : `+${n(win?.pliCount)}`,
 				strong: true
 			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.pliCount)
-			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "framesDropped",
 				value: n(stats?.framesDropped)
 			}),
 			/* @__PURE__ */ jsx(Row, {
-				label: "decode time",
+				label: "decode",
 				value: n(stats?.avgDecodeMs, {
 					digits: 1,
 					suffix: "ms"
-				})
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.decodeMs, {
-					digits: 1,
-					suffix: "ms"
-				})
+				}),
+				window: win?.decodeMs === null ? void 0 : `${n(win?.decodeMs, { digits: 1 })}ms`
 			}),
 			/* @__PURE__ */ jsx(SectionHeader, {
 				title: "picture",
@@ -27361,33 +27380,24 @@ function StreamDebugOverlay(props) {
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "packetsLost",
-				value: n(stats?.packetsLost)
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.packetsLost)
+				value: n(stats?.packetsLost),
+				window: win?.packetsLost === null ? void 0 : `+${n(win?.packetsLost)}`
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "loss",
 				value: n(stats?.lossPercent, {
 					digits: 2,
 					suffix: "%"
-				})
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.lossPercent, {
+				}),
+				window: win?.lossPercent === null ? void 0 : n(win?.lossPercent, {
 					digits: 2,
 					suffix: "%"
 				})
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "nackCount",
-				value: n(stats?.nackCount)
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.nackCount)
+				value: n(stats?.nackCount),
+				window: win?.nackCount === null ? void 0 : `+${n(win?.nackCount)}`
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "candidate pair",
@@ -27410,9 +27420,16 @@ function StreamDebugOverlay(props) {
 				measuredAt: server?.observedAt ?? null,
 				now
 			}),
-			!serverWired ? /* @__PURE__ */ jsx("div", {
-				className: "text-white/50 leading-tight py-0.5",
-				children: "not wired on this host"
+			!serverWired ? /* @__PURE__ */ jsxs("div", {
+				className: "text-amber-300/90 leading-tight py-0.5",
+				children: [
+					"not wired on this surface — this player was mounted without",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-white/80",
+						children: " getSessionDebug"
+					}),
+					", so the server half cannot be asked"
+				]
 			}) : serverError !== null ? /* @__PURE__ */ jsx("div", {
 				className: "text-rose-300 leading-tight py-0.5 break-words",
 				children: serverError
@@ -28574,7 +28591,10 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		let cancelled = false;
 		const tick = async () => {
 			const sid = activeSessionIdRef.current;
-			if (sid === null) return;
+			if (sid === null) {
+				setServerDebugError("no session id on this player yet — nothing to ask the server about");
+				return;
+			}
 			try {
 				const answer = await getSessionDebug(sid);
 				if (cancelled) return;
@@ -51038,7 +51058,7 @@ function ImageOffIcon({ className }) {
 		]
 	});
 }
-function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
+function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
 	const registeredButtons = usePlayerToolbarButtons();
 	const recordedPlayback = useRecordedPlayback();
 	const [isPlaying, setIsPlaying] = useState(autoPlay);
@@ -51356,6 +51376,7 @@ function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIce
 					handleOffer: playerHandleOffer,
 					reoffer: playerReoffer,
 					getSessionState,
+					...getSessionDebug ? { getSessionDebug } : {},
 					getIceServers,
 					addIceCandidate,
 					getIceCandidates,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.182",
+  "version": "1.2.184",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",