@camstack/ui-library 1.2.181 → 1.2.182

package/dist/index.cjs

@@ -7213,6 +7213,8 @@ var useWebrtcSessionCloseSession = trpc.webrtcSession.closeSession.useMutation;
 var useWebrtcSessionHasAdaptiveBitrate = trpc.webrtcSession.hasAdaptiveBitrate.useQuery;
 /** Generated alias around `trpc.webrtcSession.getSessionState.useQuery`. */
 var useWebrtcSessionGetSessionState = trpc.webrtcSession.getSessionState.useQuery;
+/** Generated alias around `trpc.webrtcSession.getSessionDebug.useQuery`. */
+var useWebrtcSessionGetSessionDebug = trpc.webrtcSession.getSessionDebug.useQuery;
 /** Generated alias around `trpc.zoneAnalytics.getCurrentSnapshot.useQuery`. */
 var useZoneAnalyticsGetCurrentSnapshot = trpc.zoneAnalytics.getCurrentSnapshot.useQuery;
 /** Generated alias around `trpc.zoneAnalytics.getCurrentSnapshotBatch.useQuery`. */
@@ -26976,6 +26978,580 @@ async function measureDownlinkMbps(origin, deps) {
 	}
 }
 //#endregion
+//#region src/composites/stream-debug/webrtc-debug-stats.ts
+/** Beyond this the log is a scroll, not a signal. */
+var RESOLUTION_LOG_MAX = 8;
+function num(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function str(value) {
+	return typeof value === "string" && value.length > 0 ? value : null;
+}
+/** Δ of two cumulative counters. Null unless BOTH ends were measured; a
+*  counter that went backwards (a reset) yields null rather than a negative. */
+function delta(now, before) {
+	if (now === null || before === null) return null;
+	const d = now - before;
+	return d < 0 ? null : d;
+}
+function lossPercentOf(lost, received) {
+	if (lost === null || received === null) return null;
+	const total = lost + received;
+	if (total <= 0) return null;
+	return lost / total * 100;
+}
+function profileLevelIdOf(fmtp) {
+	if (fmtp === null) return null;
+	return /profile-level-id=([0-9a-fA-F]+)/.exec(fmtp)?.[1] ?? null;
+}
+function collect(report) {
+	const out = {
+		inbound: null,
+		codecs: /* @__PURE__ */ new Map(),
+		candidates: /* @__PURE__ */ new Map(),
+		pair: null,
+		selectedPairId: null
+	};
+	const pairs = [];
+	report.forEach((raw) => {
+		const s = raw;
+		const id = str(s.id);
+		switch (s.type) {
+			case "inbound-rtp":
+				if ((s.kind ?? s.mediaType) === "video") out.inbound = s;
+				break;
+			case "codec":
+				if (id !== null) out.codecs.set(id, s);
+				break;
+			case "local-candidate":
+			case "remote-candidate":
+				if (id !== null) out.candidates.set(id, s);
+				break;
+			case "candidate-pair":
+				pairs.push(s);
+				break;
+			case "transport":
+				out.selectedPairId = str(s.selectedCandidatePairId);
+				break;
+			default: break;
+		}
+	});
+	const byId = out.selectedPairId;
+	out.pair = pairs.find((p) => str(p.id) === byId) ?? pairs.find((p) => p.selected === true) ?? pairs.find((p) => p.nominated === true && p.state === "succeeded") ?? pairs.find((p) => p.nominated === true) ?? pairs.find((p) => p.state === "succeeded") ?? null;
+	return out;
+}
+function readCounters(inbound) {
+	if (inbound === null) return {
+		timestamp: null,
+		bytesReceived: null,
+		packetsReceived: null,
+		packetsLost: null,
+		framesDecoded: null,
+		framesDropped: null,
+		freezeCount: null,
+		totalFreezesDurationS: null,
+		totalDecodeTimeS: null,
+		nackCount: null,
+		pliCount: null
+	};
+	return {
+		timestamp: num(inbound.timestamp),
+		bytesReceived: num(inbound.bytesReceived),
+		packetsReceived: num(inbound.packetsReceived),
+		packetsLost: num(inbound.packetsLost),
+		framesDecoded: num(inbound.framesDecoded),
+		framesDropped: num(inbound.framesDropped),
+		freezeCount: num(inbound.freezeCount),
+		totalFreezesDurationS: num(inbound.totalFreezesDuration),
+		totalDecodeTimeS: num(inbound.totalDecodeTime),
+		nackCount: num(inbound.nackCount),
+		pliCount: num(inbound.pliCount)
+	};
+}
+var EMPTY_WINDOW = {
+	spanMs: null,
+	kbps: null,
+	packetsReceived: null,
+	packetsLost: null,
+	lossPercent: null,
+	framesDecoded: null,
+	framesDropped: null,
+	freezeCount: null,
+	freezeMs: null,
+	nackCount: null,
+	pliCount: null,
+	decodeMs: null
+};
+function windowOf(now, before) {
+	if (before === null) return EMPTY_WINDOW;
+	const spanMs = delta(now.timestamp, before.timestamp);
+	if (spanMs === null || spanMs <= 0) return EMPTY_WINDOW;
+	const bytes = delta(now.bytesReceived, before.bytesReceived);
+	const lost = delta(now.packetsLost, before.packetsLost);
+	const received = delta(now.packetsReceived, before.packetsReceived);
+	const decoded = delta(now.framesDecoded, before.framesDecoded);
+	const decodeS = delta(now.totalDecodeTimeS, before.totalDecodeTimeS);
+	const freezeS = delta(now.totalFreezesDurationS, before.totalFreezesDurationS);
+	return {
+		spanMs,
+		kbps: bytes === null ? null : Math.round(bytes * 8 / spanMs),
+		packetsReceived: received,
+		packetsLost: lost,
+		lossPercent: lossPercentOf(lost, received),
+		framesDecoded: decoded,
+		framesDropped: delta(now.framesDropped, before.framesDropped),
+		freezeCount: delta(now.freezeCount, before.freezeCount),
+		freezeMs: freezeS === null ? null : Math.round(freezeS * 1e3),
+		nackCount: delta(now.nackCount, before.nackCount),
+		pliCount: delta(now.pliCount, before.pliCount),
+		decodeMs: decodeS === null || decoded === null || decoded <= 0 ? null : decodeS / decoded * 1e3
+	};
+}
+function resolutionLogOf(prev, width, height, at) {
+	if (width === null || height === null) return prev;
+	const last = prev.at(-1);
+	if (last !== void 0 && last.width === width && last.height === height) return prev;
+	const next = [...prev, {
+		width,
+		height,
+		at
+	}];
+	return next.length > RESOLUTION_LOG_MAX ? next.slice(next.length - RESOLUTION_LOG_MAX) : next;
+}
+/**
+* Derive one debug sample. Immutable: `prev` is read, never mutated, and the
+* returned object is the input for the next call.
+*/
+function deriveWebrtcDebugStats(input) {
+	const { inbound, codecs, candidates, pair } = collect(input.report);
+	const raw = readCounters(inbound);
+	const codecStat = inbound !== null ? codecs.get(str(inbound.codecId) ?? "") : void 0;
+	const mime = str(codecStat?.mimeType);
+	const fmtp = str(codecStat?.sdpFmtpLine);
+	const localCand = pair !== null ? candidates.get(str(pair.localCandidateId) ?? "") : void 0;
+	const remoteCand = pair !== null ? candidates.get(str(pair.remoteCandidateId) ?? "") : void 0;
+	const localType = str(localCand?.candidateType);
+	const remoteType = str(remoteCand?.candidateType);
+	const width = num(inbound?.frameWidth);
+	const height = num(inbound?.frameHeight);
+	const totalFreezeS = raw.totalFreezesDurationS;
+	const decodeS = raw.totalDecodeTimeS;
+	const decodedTotal = raw.framesDecoded;
+	return {
+		at: input.now,
+		hasInboundVideo: inbound !== null,
+		width,
+		height,
+		fps: num(inbound?.framesPerSecond),
+		codec: mime === null ? null : mime.split("/")[1] ?? mime,
+		codecProfileLevelId: profileLevelIdOf(fmtp),
+		jitterMs: jitterMsOf(inbound),
+		packetsReceived: raw.packetsReceived,
+		packetsLost: raw.packetsLost,
+		lossPercent: lossPercentOf(raw.packetsLost, raw.packetsReceived),
+		nackCount: raw.nackCount,
+		pliCount: raw.pliCount,
+		framesDecoded: decodedTotal,
+		framesDropped: raw.framesDropped,
+		freezeCount: raw.freezeCount,
+		totalFreezeMs: totalFreezeS === null ? null : Math.round(totalFreezeS * 1e3),
+		avgDecodeMs: decodeS === null || decodedTotal === null || decodedTotal <= 0 ? null : decodeS / decodedTotal * 1e3,
+		rttMs: rttMsOf(pair),
+		availableIncomingKbps: availableKbpsOf(pair),
+		localCandidateType: localType,
+		remoteCandidateType: remoteType,
+		candidatePairType: localType === null && remoteType === null ? null : `${localType ?? "?"}/${remoteType ?? "?"}`,
+		candidateProtocol: str(localCand?.protocol),
+		iceConnectionState: input.iceConnectionState,
+		dtlsState: input.dtlsState,
+		window: windowOf(raw, input.prev?.raw ?? null),
+		resolutionLog: resolutionLogOf(input.prev?.resolutionLog ?? [], width, height, input.now),
+		raw
+	};
+}
+function jitterMsOf(inbound) {
+	const jitter = num(inbound?.jitter);
+	return jitter === null ? null : jitter * 1e3;
+}
+function rttMsOf(pair) {
+	const rtt = num(pair?.currentRoundTripTime);
+	return rtt === null ? null : rtt * 1e3;
+}
+function availableKbpsOf(pair) {
+	const bps = num(pair?.availableIncomingBitrate);
+	return bps === null ? null : Math.round(bps / 1e3);
+}
+var VERDICTS = {
+	unknown: "no window yet",
+	decoding: "decoding",
+	"decoder-stall": "DECODER STALL — bytes arriving, no frames out",
+	"transport-stall": "TRANSPORT STALL — nothing arriving",
+	"frozen-unknown": "frames stopped — byte rate unknown"
+};
+function freezeVerdict(stats) {
+	const kind = freezeVerdictKind(stats);
+	return {
+		kind,
+		label: VERDICTS[kind]
+	};
+}
+function freezeVerdictKind(stats) {
+	if (stats === null || !stats.hasInboundVideo) return "unknown";
+	const decoded = stats.window.framesDecoded;
+	if (decoded === null) return "unknown";
+	if (decoded > 0) return "decoding";
+	const kbps = stats.window.kbps;
+	if (kbps === null) return "frozen-unknown";
+	return kbps > 0 ? "decoder-stall" : "transport-stall";
+}
+//#endregion
+//#region src/composites/stream-debug/stream-debug-overlay.tsx
+/** `—` is the ONLY rendering of unknown. Never an empty cell, never 0. */
+var UNKNOWN = "—";
+function n(value, opts) {
+	if (value === null || value === void 0 || !Number.isFinite(value)) return UNKNOWN;
+	const digits = opts?.digits ?? 0;
+	return `${value.toFixed(digits)}${opts?.suffix ?? ""}`;
+}
+function s(value) {
+	return value === null || value === void 0 || value === "" ? UNKNOWN : value;
+}
+function b(value) {
+	return value === null || value === void 0 ? UNKNOWN : value ? "yes" : "no";
+}
+/** Age of a measurement, in the form an operator reads at a glance. */
+function age(at, now) {
+	if (at === null) return UNKNOWN;
+	const ms = Math.max(0, now - at);
+	if (ms < 1e3) return `${ms}ms ago`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s ago`;
+	return `${Math.floor(ms / 6e4)}m${Math.floor(ms % 6e4 / 1e3)}s ago`;
+}
+/** A measurement older than this is NOT live, and is said to be. */
+var STALE_AFTER_MS = 3e3;
+var VERDICT_CLASS = {
+	unknown: "bg-white/15 text-white/70",
+	decoding: "bg-emerald-500/25 text-emerald-200",
+	"decoder-stall": "bg-amber-500/30 text-amber-100",
+	"transport-stall": "bg-rose-500/30 text-rose-100",
+	"frozen-unknown": "bg-white/15 text-white/70"
+};
+function Row({ label, value, strong = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-baseline justify-between gap-3 leading-tight",
+		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
+		})]
+	});
+}
+function SectionHeader({ title, measuredAt, now }) {
+	const stale = measuredAt !== null && now - measuredAt > STALE_AFTER_MS;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-baseline justify-between gap-3 mt-2 first:mt-0 pb-0.5 border-b border-white/20",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-white/80 font-semibold tracking-wide uppercase text-[9px]",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: stale ? "text-amber-300 text-[9px]" : "text-white/45 text-[9px]",
+			children: [stale ? "STALE · " : "", age(measuredAt, now)]
+		})]
+	});
+}
+function StreamDebugOverlay(props) {
+	const { stats, server, serverError, serverWired, now, sessionId } = props;
+	const verdict = freezeVerdict(stats);
+	const win = stats?.window;
+	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",
+		"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]}`,
+				children: verdict.label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+				title: "decode",
+				measuredAt: stats?.at ?? null,
+				now
+			}),
+			/* @__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),
+				strong: true
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "freezeCount",
+				value: n(stats?.freezeCount),
+				strong: true
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "· total frozen",
+				value: n(stats?.totalFreezeMs, { suffix: "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),
+				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",
+				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"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+				title: "picture",
+				measuredAt: stats?.at ?? null,
+				now
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "resolution",
+				value: stats?.width !== null && stats?.width !== void 0 && stats.height !== null ? `${stats.width}×${stats.height}` : UNKNOWN
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "fps",
+				value: n(stats?.fps)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "codec",
+				value: stats?.codec === null || stats?.codec === void 0 ? UNKNOWN : `${stats.codec}${stats.codecProfileLevelId !== null ? ` ${stats.codecProfileLevelId}` : ""}`
+			}),
+			(stats?.resolutionLog.length ?? 0) > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-0.5 text-white/60 leading-tight",
+				children: stats?.resolutionLog.map((mark) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex justify-between",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						mark.width,
+						"×",
+						mark.height
+					] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-white/40",
+						children: age(mark.at, now)
+					})]
+				}, `${mark.at}-${mark.width}x${mark.height}`))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+				title: "transport",
+				measuredAt: stats?.at ?? null,
+				now
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "bitrate",
+				value: n(win?.kbps, { suffix: " kbps" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "rtt",
+				value: n(stats?.rttMs, {
+					digits: 0,
+					suffix: "ms"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "jitter",
+				value: n(stats?.jitterMs, {
+					digits: 1,
+					suffix: "ms"
+				})
+			}),
+			/* @__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)
+			}),
+			/* @__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, {
+					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)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "candidate pair",
+				value: s(stats?.candidatePairType)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "protocol",
+				value: s(stats?.candidateProtocol)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "ice",
+				value: s(stats?.iceConnectionState)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				label: "dtls",
+				value: s(stats?.dtlsState)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+				title: "server",
+				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"
+			}) : serverError !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-rose-300 leading-tight py-0.5 break-words",
+				children: serverError
+			}) : server === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-white/50 leading-tight py-0.5",
+				children: "waiting for the first answer…"
+			}) : !server.alive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-amber-300 leading-tight py-0.5",
+				children: "session not found on the server — it ended, or this node never had it"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "served rung",
+					value: s(server.servedTier),
+					strong: true
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "adaptive",
+					value: b(server.adaptive)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "source",
+					value: s(server.camStreamId)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "source kind",
+					value: server.sourceKind
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "ingest node",
+					value: s(server.ingestNodeId)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "· remote",
+					value: b(server.ingestIsRemote)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "egress leg",
+					value: server.egressLeg,
+					strong: true
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "codec src→out",
+					value: `${s(server.sourceCodec)}→${s(server.negotiatedCodec)}`
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "broker",
+					value: s(server.brokerStatus)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "· bitrate",
+					value: n(server.brokerBitrateKbps, { suffix: " kbps" })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "· input fps",
+					value: n(server.brokerInputFps)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "rtp sent",
+					value: n(server.rtpPacketsSent)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "track mode",
+					value: s(server.trackMode)
+				}),
+				server.lastDecision === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "ladder",
+					value: "never moved"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+						label: "ladder move",
+						value: `${server.lastDecision.cause}${server.lastDecision.tier !== null ? ` → ${server.lastDecision.tier}` : ""}`,
+						strong: true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+						label: "· when",
+						value: age(server.lastDecision.at, now)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+						label: "· lossRatio",
+						value: n(server.lastDecision.lossRatio, { digits: 4 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+						label: "· clientKbps",
+						value: n(server.lastDecision.clientKbps, { suffix: " kbps" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+						label: "· stalledFor",
+						value: n(server.lastDecision.stalledForMs, { suffix: "ms" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+						label: "· serverSending",
+						value: b(server.lastDecision.serverSending)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+						label: "· transcode-down",
+						value: b(server.lastDecision.forcedTranscodeDown)
+					})
+				] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "promotions",
+					value: n(server.upgradeCount)
+				}),
+				server.tierFailures.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					label: "tier failures",
+					value: server.tierFailures.map((f) => `${f.tier}:${f.failures}`).join(" ")
+				})
+			] }),
+			sessionId !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-1 pt-0.5 border-t border-white/15 text-white/40 break-all leading-tight",
+				children: sessionId
+			})
+		]
+	});
+}
+//#endregion
 //#region src/composites/camera-stream-player.tsx
 /**
 * Silence (or restore) a live WebRTC stream FOR REAL.
@@ -27074,7 +27650,7 @@ function mergePlayerHints(autoHints, override, downlinkMbps, coldStart) {
 	return coldStart ? stripDownlinkForColdStart(merged) : merged;
 }
 var FIRST_FRAME_TIMEOUT_MS = 8e3;
-function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, onClientNetworkSample, onConnectTiming, className = "", onStateChange, onError, onReconnectAttempt, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, onAdaptiveHints, reconnectSignal, onControlChannel, onVideoElement }) {
+function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, onClientNetworkSample, onConnectTiming, className = "", onStateChange, onError, onReconnectAttempt, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, reoffer, posterUrl, hintsOverride, onAdaptiveHints, reconnectSignal, onControlChannel, onVideoElement }) {
 	const videoRef = (0, react$1.useRef)(null);
 	const containerRef = (0, react$1.useRef)(null);
 	const pcRef = (0, react$1.useRef)(null);
@@ -27971,55 +28547,77 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		const webkit = video !== null && typeof video.webkitSetPresentationMode === "function";
 		setIsPipSupported(standard || webkit);
 	}, []);
-	const [statsText, setStatsText] = (0, react$1.useState)("");
-	const statsPrev = (0, react$1.useRef)(null);
+	const [debugStats, setDebugStats] = (0, react$1.useState)(null);
+	const [serverDebug, setServerDebug] = (0, react$1.useState)(null);
+	const [serverDebugError, setServerDebugError] = (0, react$1.useState)(null);
+	const [debugNow, setDebugNow] = (0, react$1.useState)(() => Date.now());
+	(0, react$1.useEffect)(() => {
+		if (!showStats) return;
+		const id = setInterval(() => setDebugNow(Date.now()), 500);
+		return () => clearInterval(id);
+	}, [showStats]);
 	(0, react$1.useEffect)(() => {
 		if (!showStats) {
-			setStatsText("");
-			statsPrev.current = null;
+			setDebugStats(null);
 			return;
 		}
+		const prev = { current: null };
+		let cancelled = false;
 		const tick = async () => {
 			const pc = pcRef.current;
 			if (!pc) return;
 			try {
 				const report = await pc.getStats();
-				let bytes = 0;
-				let ts = 0;
-				let fps = 0;
-				let w = 0;
-				let h = 0;
-				let rtt = 0;
-				report.forEach((raw) => {
-					const s = raw;
-					if (s.type === "inbound-rtp" && (s.kind ?? s.mediaType) === "video") {
-						bytes = s.bytesReceived ?? 0;
-						ts = s.timestamp;
-						fps = s.framesPerSecond ?? 0;
-						w = s.frameWidth ?? 0;
-						h = s.frameHeight ?? 0;
-					} else if (s.type === "candidate-pair" && s.nominated && typeof s.currentRoundTripTime === "number") rtt = s.currentRoundTripTime;
+				if (cancelled) return;
+				const next = deriveWebrtcDebugStats({
+					report,
+					prev: prev.current,
+					now: Date.now(),
+					iceConnectionState: pc.iceConnectionState,
+					dtlsState: pc.connectionState
 				});
-				let kbps = 0;
-				if (statsPrev.current && ts > statsPrev.current.ts) kbps = Math.round((bytes - statsPrev.current.bytes) * 8 / (ts - statsPrev.current.ts));
-				statsPrev.current = {
-					bytes,
-					ts
-				};
-				const parts = [];
-				if (w && h) parts.push(`${w}×${h}`);
-				if (fps) parts.push(`${Math.round(fps)}fps`);
-				if (kbps > 0) parts.push(`${kbps} kbps`);
-				if (rtt) parts.push(`${Math.round(rtt * 1e3)}ms`);
-				setStatsText(parts.join(" · "));
+				prev.current = next;
+				setDebugStats(next);
 			} catch {}
 		};
 		tick();
 		const id = setInterval(() => {
 			tick();
 		}, 1e3);
-		return () => clearInterval(id);
+		return () => {
+			cancelled = true;
+			clearInterval(id);
+		};
 	}, [showStats]);
+	(0, react$1.useEffect)(() => {
+		if (!showStats || !getSessionDebug) {
+			setServerDebug(null);
+			setServerDebugError(null);
+			return;
+		}
+		let cancelled = false;
+		const tick = async () => {
+			const sid = activeSessionIdRef.current;
+			if (sid === null) return;
+			try {
+				const answer = await getSessionDebug(sid);
+				if (cancelled) return;
+				setServerDebug(answer);
+				setServerDebugError(null);
+			} catch (err) {
+				if (cancelled) return;
+				setServerDebugError(err instanceof Error ? err.message : String(err));
+			}
+		};
+		tick();
+		const id = setInterval(() => {
+			tick();
+		}, 1e3);
+		return () => {
+			cancelled = true;
+			clearInterval(id);
+		};
+	}, [showStats, getSessionDebug]);
 	const netPrev = (0, react$1.useRef)(null);
 	(0, react$1.useEffect)(() => {
 		if (!onClientNetworkSample) {
@@ -28206,9 +28804,13 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				className: "absolute top-2 left-2 z-10 transform-gpu px-2 py-0.5 rounded bg-black/60 text-[10px] text-white font-medium",
 				children: label
 			}),
-			showStats && statsText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute top-2 right-2 z-10 transform-gpu px-2 py-0.5 rounded bg-black/60 text-[10px] text-white font-mono",
-				children: statsText
+			showStats && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StreamDebugOverlay, {
+				stats: debugStats,
+				server: serverDebug,
+				serverError: serverDebugError,
+				serverWired: getSessionDebug !== void 0,
+				now: debugNow,
+				sessionId: activeSessionIdRef.current
 			}),
 			overlay,
 			showControls && !stillImg && state === "connecting" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -51561,6 +52163,13 @@ function useDeviceWebrtc(trpc, deviceId, pollIntervalMs = 5e3) {
 			} catch {
 				return { pendingRenegotiation: null };
 			}
+		}, [trpc, deviceId]),
+		getSessionDebug: (0, react$1.useCallback)(async (sessionId) => {
+			if (deviceId === null) throw new Error("getSessionDebug: no device bound to this player");
+			return trpc.webrtcSession.getSessionDebug.query({
+				deviceId,
+				sessionId
+			});
 		}, [trpc, deviceId])
 	};
 }
@@ -52077,6 +52686,7 @@ exports.StepTimings = StepTimings;
 exports.StepTreeMaster = StepTreeMaster;
 exports.Stepper = Stepper;
 exports.StreamBrokerSelector = StreamBrokerSelector;
+exports.StreamDebugOverlay = StreamDebugOverlay;
 exports.StreamPanel = StreamPanel;
 exports.Switch = Switch;
 exports.SwitchHeroCard = SwitchHeroCard;
@@ -52142,6 +52752,7 @@ exports.cursorFractionFor = cursorFractionFor;
 exports.darkColors = require_theme_index.darkColors$1;
 exports.defaultTheme = require_theme_index.defaultTheme$1;
 exports.deriveDeviceKind = deriveDeviceKind;
+exports.deriveWebrtcDebugStats = deriveWebrtcDebugStats;
 exports.describeDeviceSelector = describeDeviceSelector;
 exports.deviceMatchesFilter = deviceMatchesFilter;
 exports.deviceOptionLabel = deviceOptionLabel;
@@ -52158,6 +52769,7 @@ exports.findTimezone = _camstack_types.findTimezone;
 exports.formatControlDateTime = formatControlDateTime;
 exports.formatLastSeen = formatLastSeen;
 exports.formatNumeric = formatNumeric;
+exports.freezeVerdict = freezeVerdict;
 exports.fuzzyMatch = fuzzyMatch;
 exports.getClassColor = getClassColor;
 exports.getPhaseVisual = getPhaseVisual;
@@ -53327,6 +53939,7 @@ exports.useWebrtcSessionAddIceCandidate = useWebrtcSessionAddIceCandidate;
 exports.useWebrtcSessionCloseSession = useWebrtcSessionCloseSession;
 exports.useWebrtcSessionCreateSession = useWebrtcSessionCreateSession;
 exports.useWebrtcSessionGetIceCandidates = useWebrtcSessionGetIceCandidates;
+exports.useWebrtcSessionGetSessionDebug = useWebrtcSessionGetSessionDebug;
 exports.useWebrtcSessionGetSessionState = useWebrtcSessionGetSessionState;
 exports.useWebrtcSessionHandleAnswer = useWebrtcSessionHandleAnswer;
 exports.useWebrtcSessionHandleOffer = useWebrtcSessionHandleOffer;