@deepwatch/dsh-live 0.1.0

package/lib/client.js

@@ -0,0 +1,951 @@
+window.__ModuleLoader__.load({
+	id: "@deepwatch/dsh-live",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region ../brand/lib/identity.js
+		/** Every status the product renders, and the tone it is permitted. */
+		const STATUS_TONE = {
+			VERIFIED: "success",
+			FAILED: "error",
+			UNVERIFIED: "caution",
+			INCONCLUSIVE: "caution",
+			STALE: "caution",
+			BLOCKED: "caution",
+			queued: "neutral",
+			running: "active",
+			completed: "info",
+			failed: "error",
+			cancelled: "neutral",
+			current: "neutral",
+			gap: "caution",
+			expired: "caution",
+			unavailable: "caution"
+		};
+		/**
+		* The tone one status is allowed.
+		*
+		* Anything unrecognized is `neutral`, never `success`. A new status added
+		* elsewhere and not registered here renders as unremarkable rather than
+		* accidentally as a win.
+		*/
+		function toneFor$1(status) {
+			return STATUS_TONE[status] ?? "neutral";
+		}
+		/**
+		* The semantic token a tone maps to.
+		*
+		* Feature packages ask for a tone and get a CSS variable. They never write a
+		* hex value, which is what stops the palette from being re-invented slightly
+		* differently in every panel — and what makes a theme change one edit.
+		*/
+		function tokenFor(tone) {
+			return `var(--watch-tone-${tone})`;
+		}
+		//#endregion
+		//#region ../brand/lib/mark.js
+		/**
+		* The Watch mark, inlined.
+		*
+		* Generated by `scripts/brand-assets.mjs` from `assets/watch-orca-master.png`.
+		* Do not edit by hand: the master is the brand source of truth and this is a
+		* mechanical derivation of it at 64px, which covers a 32px slot at 2x.
+		*
+		* @module @deepwatch/dsh-client-brand/mark
+		*/
+		/** The orca, as a transparent PNG data URI. */
+		const WATCH_MARK_PNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAF+UlEQVR42u1Za4hUZRhezbxladcfSkmpuO7sfJf5Y5EFupDRDcK0nTnf934nJNDKrCTCROyHv6JCEaWyP9mPjESQiH4EW4iYREkZhGDQRSq7kGl7cc/7zpz23M+M67qrM7s6ngc+dvYwwznP8z7v5ftOS0uGDBkyZMiQIUOGDBnGGtKmFqaQCcDnpcF3pcFPBeAnTFNnUxPPdeIUYXC1NPi9AHSlIbdgk1sw5AqNfQJoeVMSz2saL4BWSoPHfcIhaV+A4O+XAqitKckLoFkc8LOIbFqAgqGKBNzFNU1szsgrWiqA/pRRtKvJe9feYwrHN2mRo3XSEFURtwMhpJ//eJgBTW468kx5+Y5bBZDrLWnKbsEuJ+R9AagiDN19+VVxRdcJQ23C0CIBtEQaXCxtWpgr0XxmcEauRNO5xt0+8ZC8tMPlfTaxCIcvD8LaJwzC4PsC8JeAFLnCJH+9diY0utxfVPGvx9GnkHxyzf8+0M5L28YaZ3ON2wXQ6eTBz7N0QjoWwE4LFX3PF2vfJUm8reRcxTSt54C93sNyTS5XPrmKF2EvdyOCMrZ5DUEztFDebzgQMaDVCyyacAn1a7yJa/zci1DwoOgWN1LvF99VevvR7a9U3L6/Trr9e7rKPR1PY39EPixq1bavWenrkQihUMcGlsUtGttWmLfoVq7xKA/Je6tgk/Nfr3vGHQT/nHadjjXUH5NJRz8iHre+8pCC+P9rOsI1PjBG5PFGrvFYWMSSXAZyV71a7vvtb7e/VoBvj1W6F60ip0oAU50OMiJvD+6KSKS4Zhg/5fYwwJtHuW/jHq7Q9ZZvf11VrLyBpbxiA/U8t6XcveaNcs8jL1Jfrd1FKqqxCzwBngj7v31u8rK2Zmj8lQPdOyrk5z/u5GPiis4ITQck0DtC02tC41bh93T8WgKekUNUfVlT5KpTYBDbwzlc4Kegvxym8MlRmNWxkyt0BshsYppuGKItTuGA9wuNOwXQKZkSYNBKH8366fG3tnsEXcW71ieBugP3hQ6MPgO90Fj7A84TgCtH8huucZrUuFZoPJE88NkCpNMjiXxM+ggr0VqmcI60aVx4QDKbK9wsvXOBpBNVmMKnGr5xuSDxLLxHRFHUNbZOpUVseX9ipB+ZRRaHc7c9ZuGjItWNJGCZa3y4YQIsKNFEpujBkQrRVnTGC40/i8TKZ7W6QvL5Bwn0bLs6/+6vvYgzuMZKdGIUCIwnOdAdjasFJZqTt/B1ATRtROmgcF1s19QJjwDqKhjaKgFfEkB3SXt4g868x3rGMY17Y/JRLQn2EIfaVQMnR2moPa+wSxi6cwQtdCrXeLxWBAH0EwOaOuLNV5HuixwVnyDFxdO/x8uNrQeGbuGA+4ShN+d3OrcN0wVLhcZyusL7+wgYefESQAuFRscrflUtM5kR+oRpYCqERXFc3nJWCsBTAvBtpil33t8AbpAp2wbRwm8u5P7tRWemMLRGGjzkCRFun5M5QdMHo7U52i8g2gHiQaZxbU7h3MGKpXdNAr7iRy4pfmUGJC/mGbjCgtD4Uap9hl2B+CicCdD6pB9HbQx78pZzgClnOwOn2FrC26uE0LhCGvq3ELqAA26rSzAUGqGDabQQ1IcPcyVcLA1uHkiJXdLgNqYczRRdU896MEtAuO0NT3K4pq4w4hOkTddK++wbDqTNTAm4XXoppPB43RypscMLgEy1x0H2GCeYxmV1E4Er3BFX5eAg48CwHVRyprR34qy6Hc+VcHLewv2pFKvaa8RvmAArOQufqddO8Xqhg7PA8Ka/X+jkeNHBANoRFcTIAYWaly0S6DS38CBX+FXrivL0ermASYN/hAJU+Bi8wsorbBWAFLgxHr9Phe2yWxr6WBpaxjVNakxH0DjX2xYXDHrn+ZtGXQBNG9NTYbhJWiJtmjTcKfPiRbCcCVw7nRywY9TfNBnaHXeAoBvt9eaVlisFPJwFCoH9dzbty9QhDmTeCvN/y1gV4bF2gMWVczQPdHXLlYjW5TQpV8SHWjJkyJAhQ4YMGTJkyJAhQ4YMGTIMH/8DqnZ5/XHc+csAAAAASUVORK5CYII=";
+		//#endregion
+		//#region ../workspace/lib/client/surface.js
+		const MODE_KICKER = {
+			Watch: "Trust layer",
+			Live: "Observation",
+			Memory: "Knowledge",
+			Library: "Evidence library",
+			Compare: "Change analysis"
+		};
+		/** Stable global class names; their rules live with the product theme. */
+		const C = {
+			root: "watch-mode-root",
+			hero: "watch-mode-hero",
+			markFrame: "watch-mode-mark-frame",
+			mark: "watch-mode-mark",
+			heroCopy: "watch-mode-hero-copy",
+			eyebrow: "watch-mode-eyebrow",
+			title: "watch-mode-title",
+			lead: "watch-mode-lead",
+			localBadge: "watch-mode-local-badge",
+			body: "watch-mode-body",
+			empty: "watch-empty",
+			emptyCopy: "watch-empty-copy",
+			sectionLabel: "watch-section-label",
+			emptyShows: "watch-empty-shows",
+			emptyWhy: "watch-empty-why",
+			nextBlock: "watch-next-block",
+			nextList: "watch-next-list",
+			panel: "watch-panel",
+			panelHeading: "watch-panel-heading",
+			facts: "watch-facts",
+			factRow: "watch-fact-row",
+			factKey: "watch-fact-key",
+			factValue: "watch-fact-value",
+			note: "watch-note",
+			noteMark: "watch-note-mark",
+			unavailable: "watch-unavailable",
+			unavailableHead: "watch-unavailable-head",
+			unavailableBadge: "watch-unavailable-badge",
+			unavailableBecause: "watch-unavailable-because",
+			requirements: "watch-requirements"
+		};
+		/** The frame: a title, one sentence of what this is, then the body. */
+		function ModeSurface({ title, lead, children }) {
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: C.root,
+				"data-watch-mode": title.toLowerCase(),
+				children: [(0, react_jsx_runtime.jsxs)("header", {
+					className: C.hero,
+					children: [
+						(0, react_jsx_runtime.jsx)("span", {
+							className: C.markFrame,
+							"aria-hidden": "true",
+							children: (0, react_jsx_runtime.jsx)("img", {
+								className: C.mark,
+								src: WATCH_MARK_PNG,
+								alt: ""
+							})
+						}),
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: C.heroCopy,
+							children: [
+								(0, react_jsx_runtime.jsx)("span", {
+									className: C.eyebrow,
+									children: `DEEPWATCH / ${MODE_KICKER[title] ?? "Evidence workspace"}`
+								}),
+								(0, react_jsx_runtime.jsx)("h2", {
+									className: C.title,
+									children: title
+								}),
+								(0, react_jsx_runtime.jsx)("p", {
+									className: C.lead,
+									children: lead
+								})
+							]
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: C.localBadge,
+							children: "Local-first"
+						})
+					]
+				}), (0, react_jsx_runtime.jsx)("div", {
+					className: C.body,
+					children
+				})]
+			});
+		}
+		/**
+		* What this surface would show, why it shows nothing, and what to do.
+		*
+		* All three parts are required. "No data" on its own teaches people the product
+		* is broken; naming the reason and the next action is the difference between an
+		* empty state and a dead end.
+		*/
+		function EmptyState({ shows, why, next }) {
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: C.empty,
+				"data-watch-empty-state": "",
+				children: [(0, react_jsx_runtime.jsxs)("div", {
+					className: C.emptyCopy,
+					children: [
+						(0, react_jsx_runtime.jsx)("span", {
+							className: C.sectionLabel,
+							children: "What appears here"
+						}),
+						(0, react_jsx_runtime.jsx)("p", {
+							className: C.emptyShows,
+							children: shows
+						}),
+						(0, react_jsx_runtime.jsx)("p", {
+							className: C.emptyWhy,
+							children: why
+						})
+					]
+				}), next.length === 0 ? null : (0, react_jsx_runtime.jsxs)("div", {
+					className: C.nextBlock,
+					children: [(0, react_jsx_runtime.jsx)("span", {
+						className: C.sectionLabel,
+						children: "Start here"
+					}), (0, react_jsx_runtime.jsx)("ol", {
+						className: C.nextList,
+						children: next.map((step) => (0, react_jsx_runtime.jsx)("li", { children: step }, step))
+					})]
+				})]
+			});
+		}
+		/** A titled block of content. */
+		function Panel({ heading, children }) {
+			return (0, react_jsx_runtime.jsxs)("section", {
+				className: C.panel,
+				"data-watch-panel": "",
+				children: [heading === void 0 ? null : (0, react_jsx_runtime.jsx)("h3", {
+					className: C.panelHeading,
+					children: heading
+				}), children]
+			});
+		}
+		/** A key/value grid. Long values wrap rather than forcing the page sideways. */
+		function Facts({ rows }) {
+			return (0, react_jsx_runtime.jsx)("dl", {
+				className: C.facts,
+				children: rows.map(([label, value]) => (0, react_jsx_runtime.jsxs)("div", {
+					className: C.factRow,
+					children: [(0, react_jsx_runtime.jsx)("dt", {
+						className: C.factKey,
+						children: label
+					}), (0, react_jsx_runtime.jsx)("dd", {
+						className: C.factValue,
+						children: value
+					})]
+				}, label))
+			});
+		}
+		/**
+		* A capability this build cannot reach, said out loud.
+		*
+		* Distinct from `EmptyState`: empty means nothing has happened yet, unavailable
+		* means the surface could not show it even if something had. Conflating the two
+		* is how a person concludes a working feature is broken, or a missing one is
+		* merely quiet.
+		*/
+		function Unavailable({ what, because, wouldNeed }) {
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: C.unavailable,
+				"data-watch-unavailable": "",
+				children: [
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: C.unavailableHead,
+						children: [(0, react_jsx_runtime.jsx)("h3", { children: what }), (0, react_jsx_runtime.jsx)("span", {
+							className: C.unavailableBadge,
+							children: "Not available in this build"
+						})]
+					}),
+					(0, react_jsx_runtime.jsx)("p", {
+						className: C.unavailableBecause,
+						children: because
+					}),
+					wouldNeed.length === 0 ? null : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("h4", {
+						className: C.panelHeading,
+						children: "What it would take"
+					}), (0, react_jsx_runtime.jsx)("ul", {
+						className: C.requirements,
+						children: wouldNeed.map((item) => (0, react_jsx_runtime.jsx)("li", { children: item }, item))
+					})] })
+				]
+			});
+		}
+		//#endregion
+		//#region src/sources-catalogue.ts
+		const SOURCES = [
+			{
+				id: "screen",
+				name: "Screen",
+				what: "The whole display, as a continuous observation.",
+				asks: "Asks for screen-capture permission the first time you start it.",
+				runtime: "shell",
+				needsOsPermission: true,
+				canAct: false
+			},
+			{
+				id: "window",
+				name: "Window",
+				what: "One application window rather than the whole display.",
+				asks: "Asks for screen-capture permission the first time you start it.",
+				runtime: "shell",
+				needsOsPermission: true,
+				canAct: false
+			},
+			{
+				id: "camera",
+				name: "Camera",
+				what: "Live visual input from an attached device.",
+				asks: "Asks for camera permission the first time you start it.",
+				runtime: "device",
+				needsOsPermission: true,
+				canAct: false
+			},
+			{
+				id: "microphone",
+				name: "Microphone",
+				what: "Live audio, with timings a citation can point at.",
+				asks: "Asks for microphone permission the first time you start it.",
+				runtime: "device",
+				needsOsPermission: true,
+				canAct: false
+			},
+			{
+				id: "browser-observer",
+				name: "Browser Observer",
+				what: "Watches a page and records what it showed. Takes no action.",
+				asks: "No OS permission. Needs the browser runtime enabled.",
+				runtime: "process",
+				needsOsPermission: false,
+				canAct: false
+			},
+			{
+				id: "browser-operator",
+				name: "Browser Operator",
+				what: "Acts on a page and returns a receipt for what it did. A separate capability from observing.",
+				asks: "No OS permission. Needs the browser runtime enabled, and every side effect carries an idempotency key.",
+				runtime: "process",
+				needsOsPermission: false,
+				canAct: true
+			},
+			{
+				id: "synthetic",
+				name: "Synthetic source",
+				what: "A task-owned page this workspace generates, for exercising capture without touching anything of yours.",
+				asks: "No permission. It observes only content this workspace created.",
+				runtime: "fixture",
+				needsOsPermission: false,
+				canAct: false
+			}
+		];
+		//#endregion
+		//#region src/client/live-mode.tsx
+		/** Words for a state, so it is never only a colour. */
+		const STATE_WORDS = {
+			idle: "Not started",
+			requesting_permission: "Waiting for your permission",
+			starting: "Starting",
+			active: "Observing",
+			paused: "Paused",
+			stopping: "Stopping",
+			stopped: "Stopped",
+			cancelled: "Cancelled",
+			denied: "Permission refused — nothing was captured",
+			unavailable: "Source unavailable",
+			timed_out: "The source did not start in time",
+			failed: "Failed"
+		};
+		const PERMISSION_WORDS = {
+			not_requested: "Not requested",
+			requested: "Requested",
+			granted: "Granted",
+			denied: "Refused"
+		};
+		function toneFor(state) {
+			if (state === "active") return "var(--watch-tone-active)";
+			if ([
+				"denied",
+				"failed",
+				"timed_out",
+				"unavailable"
+			].includes(state)) return "var(--watch-tone-error)";
+			if ([
+				"paused",
+				"starting",
+				"requesting_permission",
+				"stopping"
+			].includes(state)) return "var(--watch-tone-caution)";
+			return "var(--watch-tone-neutral)";
+		}
+		/** The Live mode: what could be observed, and what is being observed. */
+		function LiveModeView({ session = null, receipts = [] } = {}) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModeSurface, {
+				title: "Live",
+				lead: "A continuous observation over a source, with its clock, its gaps and its freshness. Opening this page starts nothing and asks for nothing.",
+				children: [
+					session === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
+						shows: "An active session: which source is bound, its permission state, the observations arriving with their timestamps, and how it ended.",
+						why: "No live session is running, and no source has been started.",
+						next: ["Choose a source below and start it — each asks for its own permission at that moment, not before.", "Bind ASR or Visual Perception in Settings → Role Bindings if you want a source interpreted rather than only recorded."]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Panel, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "baseline",
+							gap: "10px",
+							flexWrap: "wrap"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+							style: {
+								fontSize: "15px",
+								color: toneFor(session.state)
+							},
+							children: STATE_WORDS[session.state]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontSize: "12px",
+								color: "var(--dsw-alias-label-secondary)"
+							},
+							children: session.reason === "" ? session.sourceId : session.reason
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { marginTop: "12px" },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Facts, { rows: [
+							["Session", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"data-watch-ltr": true,
+								children: session.sessionId
+							}, "s")],
+							["Source", session.sourceId],
+							["Permission", PERMISSION_WORDS[session.permission]],
+							["Run", session.runId ?? "Not associated with a run"],
+							["Started", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"data-watch-ltr": true,
+								children: session.startedAt ?? "—"
+							}, "t")],
+							["Observations", String(session.observations.length)]
+						] })
+					})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Panel, {
+						heading: `Observations (${String(session.observations.length)})`,
+						children: session.observations.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							style: {
+								fontSize: "13px",
+								margin: 0,
+								color: "var(--dsw-alias-label-tertiary)"
+							},
+							children: "Nothing observed yet. An observation without a timestamp could not be cited, so none is recorded until the clock is running."
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+							style: {
+								margin: 0,
+								paddingInlineStart: "20px",
+								fontSize: "12.5px",
+								lineHeight: 1.7
+							},
+							children: session.observations.slice(-25).map((observation) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									"data-watch-ltr": true,
+									style: { color: "var(--dsw-alias-label-tertiary)" },
+									children: `+${String(observation.offsetMs)}ms`
+								}),
+								" ",
+								observation.text
+							] }, observation.observationId))
+						})
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Panel, {
+						heading: "Sources",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Facts, { rows: SOURCES.map((source) => [source.name, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+							source.what,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { color: "var(--dsw-alias-label-tertiary)" },
+								children: source.asks
+							}),
+							source.canAct ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { color: "var(--watch-tone-caution)" },
+								children: "This one can act on the world, not only record it."
+							})] }) : null
+						] }, source.id)]) })
+					}),
+					receipts.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Panel, {
+						heading: `Finished sessions (${String(receipts.length)})`,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Facts, { rows: receipts.slice(0, 10).map((receipt) => [receipt.sessionId, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+							STATE_WORDS[receipt.finalState],
+							` · ${String(receipt.observationCount)} observation(s)`,
+							receipt.reason === "" ? "" : ` · ${receipt.reason}`
+						] }, receipt.sessionId)]) })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Unavailable, {
+						what: "Sources this machine cannot provide",
+						because: "Every source above keeps its real adapter and its real permission boundary, and each is exercised deterministically. A source is only offered as startable where its adapter can actually run here — a control that fails when pressed teaches people the product is broken rather than that a capability is absent.",
+						wouldNeed: [
+							"The hardware or OS support the adapter names, on the machine running Watch.",
+							"The relevant OS permission, granted at first use rather than on load.",
+							"A role bound for interpretation if the stream is to be transcribed or described."
+						]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/session.ts
+		/** The default bound. Roughly an hour of dense observation. */
+		const DEFAULT_LIMITS = { maxEvents: 2e3 };
+		/** Begin a session, before anything has been observed. */
+		function startSession(input) {
+			return {
+				sessionId: input.sessionId,
+				target: input.target,
+				kind: input.kind,
+				status: "starting",
+				connection: "connecting",
+				cursor: "",
+				startedAtMs: input.startedAtMs,
+				events: [],
+				gaps: [],
+				pinned: [],
+				clocks: {
+					wallMs: null,
+					mediaMs: null,
+					sessionMs: 0,
+					latencyMs: null
+				},
+				trimmed: 0,
+				needsSnapshot: false,
+				lastError: null
+			};
+		}
+		/** Recompute the clocks from the newest event. */
+		function clocksFrom(state, events, nowMs) {
+			const newest = events[events.length - 1];
+			if (newest === void 0) return {
+				wallMs: null,
+				mediaMs: null,
+				sessionMs: nowMs - state.startedAtMs,
+				latencyMs: null
+			};
+			return {
+				wallMs: newest.at,
+				mediaMs: newest.mediaMs,
+				sessionMs: nowMs - state.startedAtMs,
+				latencyMs: Math.max(0, nowMs - newest.at)
+			};
+		}
+		/**
+		* Trim the buffer to its bound.
+		*
+		* Gaps and pinned events survive. The trim count is carried so the surface can
+		* say "1,204 earlier events dropped" rather than presenting a partial history
+		* as a complete one.
+		*/
+		function bound(events, pinned, limits) {
+			if (events.length <= limits.maxEvents) return {
+				events,
+				dropped: 0
+			};
+			const pinnedEvidence = new Set(pinned.flatMap((moment) => moment.evidenceIds));
+			const keepAlways = (event) => event.kind === "gap" || event.evidenceIds.some((id) => pinnedEvidence.has(id));
+			const protectedEvents = events.filter(keepAlways);
+			const ordinary = events.filter((event) => !keepAlways(event));
+			const room = Math.max(0, limits.maxEvents - protectedEvents.length);
+			const kept = ordinary.slice(Math.max(0, ordinary.length - room));
+			const keptIds = new Set([...protectedEvents, ...kept].map((event) => event.seq));
+			return {
+				events: events.filter((event) => keptIds.has(event.seq)),
+				dropped: ordinary.length - kept.length
+			};
+		}
+		/** Mint the gap a cursor break implies, with the range it actually covers. */
+		function cursorBreakGap(state, delta) {
+			const last = state.events[state.events.length - 1];
+			const next = delta.events[0];
+			if (last === void 0 || next === void 0) return null;
+			return {
+				seq: last.seq + .5,
+				cursor: state.cursor,
+				kind: "gap",
+				at: last.at,
+				mediaMs: last.mediaMs,
+				text: "observation gap — the stream did not continue from the last cursor",
+				range: last.mediaMs === null || next.mediaMs === null ? null : {
+					startMs: last.mediaMs,
+					endMs: next.mediaMs
+				},
+				evidenceIds: []
+			};
+		}
+		/**
+		* Apply one delta or snapshot to the session.
+		*
+		* The three cases, in the order they are checked:
+		*
+		* 1. **A snapshot** replaces the event view outright and clears
+		*    `needsSnapshot`. This is the only thing that re-establishes continuity.
+		* 2. **A delta that continues from the held cursor** appends. This is the
+		*    ordinary case.
+		* 3. **A delta that does not** is a break. A gap event is minted at the seam,
+		*    `needsSnapshot` is set, and the delta's events are *not* appended —
+		*    appending them would splice two discontinuous stretches into something
+		*    that reads as continuous.
+		*
+		* Re-applying the same delta is a no-op, which is what makes a retry safe.
+		*/
+		function applyDelta(state, delta, nowMs, limits = DEFAULT_LIMITS) {
+			const engineGaps = delta.gaps ?? [];
+			if (delta.isSnapshot) {
+				const { events, dropped } = bound(delta.events, state.pinned, limits);
+				return {
+					...state,
+					status: delta.status,
+					connection: delta.status === "observing" ? "live" : state.connection,
+					cursor: delta.nextCursor,
+					events,
+					gaps: mergeGaps(state.gaps, [...engineGaps, ...rangesOf(delta.events)]),
+					clocks: clocksFrom(state, events, nowMs),
+					trimmed: state.trimmed + dropped,
+					needsSnapshot: false,
+					lastError: null
+				};
+			}
+			if (delta.nextCursor === state.cursor) return state;
+			if (delta.fromCursor !== state.cursor) {
+				const gap = cursorBreakGap(state, delta);
+				const events = gap === null ? state.events : [...state.events, gap];
+				return {
+					...state,
+					connection: "reconnecting",
+					events,
+					gaps: mergeGaps(state.gaps, gap?.range === null || gap?.range === void 0 ? [] : [gap.range]),
+					clocks: clocksFrom(state, events, nowMs),
+					needsSnapshot: true,
+					lastError: `cursor ${delta.fromCursor} does not continue from ` + (state.cursor === "" ? "(start)" : state.cursor)
+				};
+			}
+			const { events, dropped } = bound([...state.events, ...delta.events], state.pinned, limits);
+			return {
+				...state,
+				status: delta.status,
+				connection: delta.status === "observing" ? "live" : state.connection,
+				cursor: delta.nextCursor,
+				events,
+				gaps: mergeGaps(state.gaps, [...engineGaps, ...rangesOf(delta.events)]),
+				clocks: clocksFrom(state, events, nowMs),
+				trimmed: state.trimmed + dropped,
+				lastError: null
+			};
+		}
+		/** Ranges of the gap events in a batch. */
+		function rangesOf(events) {
+			return events.filter((event) => event.kind === "gap" && event.range !== null).map((event) => event.range);
+		}
+		/** Union of two gap lists, deduplicated and ordered. */
+		function mergeGaps(existing, incoming) {
+			const seen = /* @__PURE__ */ new Map();
+			for (const range of [...existing, ...incoming]) seen.set(`${String(range.startMs)}:${String(range.endMs)}`, range);
+			return [...seen.values()].sort((left, right) => left.startMs - right.startMs);
+		}
+		/** Record that the channel dropped. */
+		function connectionLost(state, reason) {
+			return {
+				...state,
+				connection: "lost",
+				needsSnapshot: true,
+				lastError: reason
+			};
+		}
+		/** Record that a reconnect attempt is under way. */
+		function reconnecting(state) {
+			return {
+				...state,
+				connection: "reconnecting"
+			};
+		}
+		/**
+		* Pin a moment.
+		*
+		* Pinning protects the events it references from being trimmed. That is the
+		* whole reason pins take evidence ids: a pin that pointed only at a timestamp
+		* would survive a trim while the thing it pointed at did not.
+		*/
+		function pinMoment(state, moment) {
+			if (state.pinned.some((existing) => existing.momentId === moment.momentId)) return state;
+			return {
+				...state,
+				pinned: [...state.pinned, moment]
+			};
+		}
+		/** Stop the session, keeping or discarding what it observed. */
+		function finish(state, finalize) {
+			return {
+				...state,
+				status: finalize ? "finalized" : "discarded",
+				connection: "stopped"
+			};
+		}
+		/** Freeze a finished session into its replay record. */
+		function toReplay(state) {
+			return {
+				sessionId: state.sessionId,
+				target: state.target,
+				kind: state.kind,
+				status: state.status,
+				events: state.events,
+				gaps: state.gaps,
+				pinned: state.pinned,
+				trimmed: state.trimmed
+			};
+		}
+		/**
+		* Digest of a replay, so "reopening it shows the same thing" is assertable.
+		*
+		* FNV-1a over event identity and gap ranges — the same construction the
+		* trajectory projection uses, and for the same reason.
+		*/
+		function replayDigest(replay) {
+			let hash = 2166136261;
+			const feed = (text) => {
+				for (let index = 0; index < text.length; index += 1) {
+					hash ^= text.charCodeAt(index);
+					hash = Math.imul(hash, 16777619) >>> 0;
+				}
+			};
+			feed(`${replay.sessionId}|${replay.status}|${String(replay.trimmed)}`);
+			for (const event of replay.events) feed(`|${String(event.seq)}:${event.kind}:${event.cursor}`);
+			for (const gap of replay.gaps) feed(`|gap:${String(gap.startMs)}-${String(gap.endMs)}`);
+			return hash.toString(16).padStart(8, "0");
+		}
+		/**
+		* One line describing the session's honesty, for the surface header.
+		*
+		* Always says the gap count and the trim count, including when both are zero.
+		* A message that appears only when something is wrong is a message people
+		* learn to not look for.
+		*/
+		function describeContinuity(state) {
+			const parts = [state.gaps.length === 0 ? "no gaps" : `${String(state.gaps.length)} gap(s)`, state.trimmed === 0 ? "nothing dropped" : `${String(state.trimmed)} earlier event(s) dropped`];
+			if (state.needsSnapshot) parts.push("view not continuous — resnapshot pending");
+			return parts.join(" · ");
+		}
+		//#endregion
+		//#region src/client/components.tsx
+		/** Connection states, mapped onto the brand's status vocabulary. */
+		const CONNECTION_STATUS = {
+			connecting: "queued",
+			live: "running",
+			reconnecting: "gap",
+			lost: "unavailable",
+			stopped: "completed"
+		};
+		/** A millisecond count as a clock reading. */
+		function clock(ms) {
+			if (ms === null) return "—";
+			const total = Math.max(0, Math.floor(ms / 1e3));
+			const seconds = String(total % 60).padStart(2, "0");
+			const minutes = String(Math.floor(total / 60) % 60).padStart(2, "0");
+			return `${String(Math.floor(total / 3600)).padStart(2, "0")}:${minutes}:${seconds}`;
+		}
+		/**
+		* Session, media and wall clocks, side by side.
+		*
+		* Three readings rather than one, because they answer three questions and
+		* disagree constantly during a live observation. A single "time" field would
+		* be right about one of them and quietly wrong about the other two.
+		*/
+		function LiveHeader({ state }) {
+			const status = CONNECTION_STATUS[state.connection] ?? "unavailable";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				"data-watch-live-header": "",
+				"data-watch-live-session": state.sessionId,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "target",
+						dir: "ltr",
+						children: state.target
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "kind",
+						children: state.kind
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "status",
+						children: state.status
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						"data-watch-field": "connection",
+						style: { color: tokenFor(toneFor$1(status)) },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							children: state.connection === "live" ? "●" : "▲"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: state.connection })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "session-clock",
+						dir: "ltr",
+						children: `session ${clock(state.clocks.sessionMs)}`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "media-clock",
+						dir: "ltr",
+						children: `media ${clock(state.clocks.mediaMs)}`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "wall-clock",
+						dir: "ltr",
+						children: state.clocks.wallMs === null ? "wall —" : `wall ${new Date(state.clocks.wallMs).toISOString()}`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "latency",
+						children: state.clocks.latencyMs === null ? "latency —" : `latency ${String(state.clocks.latencyMs)}ms`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-watch-field": "continuity",
+						children: describeContinuity(state)
+					})
+				]
+			});
+		}
+		/**
+		* One observed event.
+		*
+		* A gap draws as a gap — dashed, glyphed and labelled — and is never
+		* collapsed into the events around it.
+		*/
+		function LiveEventRow({ event, onSelect }) {
+			const isGap = event.kind === "gap";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				"data-watch-live-event": event.kind,
+				"data-watch-seq": String(event.seq),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => {
+						onSelect(event);
+					},
+					style: {
+						font: "inherit",
+						color: "inherit",
+						cursor: "pointer",
+						background: isGap ? "var(--watch-wash-caution)" : "none",
+						border: isGap ? "1px dashed var(--watch-tone-caution)" : "1px solid transparent",
+						textAlign: "start",
+						width: "100%"
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							dir: "ltr",
+							style: { fontVariantNumeric: "tabular-nums" },
+							children: clock(event.mediaMs)
+						}),
+						isGap && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							children: " ⌇ "
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							dir: "auto",
+							children: event.text
+						})
+					]
+				})
+			});
+		}
+		/**
+		* The Live mode body.
+		*
+		* `Resnapshot needed` is rendered as a banner rather than a toast. A transient
+		* notification for "your view of this is not continuous" is a notification
+		* that will be missed exactly when it matters.
+		*/
+		function LiveSurface(props) {
+			const { state } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				"data-watch-live": "",
+				"aria-label": "Live observation",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveHeader, { state }),
+					state.needsSnapshot && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						role: "alert",
+						"data-watch-live-resnapshot": "",
+						style: {
+							borderInlineStart: "3px solid var(--watch-tone-caution)",
+							paddingInlineStart: "8px"
+						},
+						children: [
+							"This view is not continuous. ",
+							state.lastError ?? "The stream did not continue from the last cursor.",
+							" A fresh snapshot is needed before anything here can be read as unbroken."
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						"data-watch-live-controls": "",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-watch-action": "start",
+								onClick: props.onStart,
+								children: "Start"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-watch-action": "pin",
+								onClick: props.onPin,
+								children: "Pin moment"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-watch-action": "finalize",
+								onClick: () => {
+									props.onStop(true);
+								},
+								children: "Stop and keep"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-watch-action": "discard",
+								onClick: () => {
+									props.onStop(false);
+								},
+								children: "Stop and discard"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						"data-watch-live-events": "",
+						style: {
+							listStyle: "none",
+							margin: 0,
+							padding: 0
+						},
+						children: state.events.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveEventRow, {
+							event,
+							onSelect: props.onSelect
+						}, String(event.seq)))
+					}),
+					state.pinned.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						"data-watch-live-pinned": "",
+						"aria-label": "Pinned moments",
+						children: state.pinned.map((moment) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							"data-watch-pinned": moment.momentId,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								dir: "ltr",
+								children: clock(moment.atMediaMs)
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								dir: "auto",
+								children: ` ${moment.note}`
+							})]
+						}, moment.momentId))
+					}),
+					state.trimmed > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						"data-watch-live-trimmed": String(state.trimmed),
+						children: [`${String(state.trimmed)} earlier event(s) are no longer held in this view. `, "Gaps and pinned moments were kept."]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/index.tsx
+		/** Services this half needs before it can register anything. */
+		const inject = ["slots"];
+		/** Register the Live mode body. */
+		function apply(ctx) {
+			const slots = ctx.slots;
+			slots.inject("conversation.view", () => {
+				slots.register({
+					name: "conversation.view",
+					id: "live",
+					label: "Live",
+					order: 30
+				}, LiveModeView);
+			});
+		}
+		//#endregion
+		exports.DEFAULT_LIMITS = DEFAULT_LIMITS;
+		exports.LiveEventRow = LiveEventRow;
+		exports.LiveHeader = LiveHeader;
+		exports.LiveModeView = LiveModeView;
+		exports.LiveSurface = LiveSurface;
+		exports.apply = apply;
+		exports.applyDelta = applyDelta;
+		exports.connectionLost = connectionLost;
+		exports.describeContinuity = describeContinuity;
+		exports.finish = finish;
+		exports.inject = inject;
+		exports.pinMoment = pinMoment;
+		exports.reconnecting = reconnecting;
+		exports.replayDigest = replayDigest;
+		exports.startSession = startSession;
+		exports.toReplay = toReplay;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map