@pie-players/pie-section-player-tools-event-debugger 0.3.4 → 0.3.5

package/EventPanel.svelte

@@ -1,7 +1,7 @@
 <svelte:options
 	customElement={{
 		tag: "pie-section-player-tools-event-debugger",
-		shadow: "none",
+		shadow: "open",
 		props: {
 			maxEvents: { type: "Number", attribute: "max-events" },
 			toolkitCoordinator: { type: "Object", attribute: "toolkit-coordinator" },
@@ -21,7 +21,7 @@
 		getSectionControllerFromCoordinator,
 		isMatchingSectionControllerLifecycleEvent,
 	} from "@pie-players/pie-section-player-tools-shared";
-	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+	import { createEventDispatcher, onDestroy, onMount, untrack } from "svelte";
 
 	type ControllerEvent = {
 		type?: string;
@@ -29,9 +29,32 @@
 		itemId?: string;
 		canonicalItemId?: string;
 		intent?: string;
-		replayed?: boolean;
 		[key: string]: unknown;
 	};
+	type ControllerRuntimeState = {
+		loadingComplete?: boolean;
+		totalRegistered?: number;
+		totalLoaded?: number;
+		itemsComplete?: boolean;
+		completedCount?: number;
+		totalItems?: number;
+	} | null;
+	type ToolkitCoordinatorLike = {
+		subscribeSectionEvents: (args: {
+			sectionId: string;
+			attemptId?: string;
+			listener: (event: ControllerEvent) => void;
+		}) => () => void;
+		getSectionController?: (args: {
+			sectionId: string;
+			attemptId?: string;
+		}) => unknown;
+		onSectionControllerLifecycle?: (
+			listener: (event: {
+				key?: { sectionId?: string; attemptId?: string };
+			}) => void,
+		) => () => void;
+	};
 
 	type EventType =
 		| "item-session-data-changed"
@@ -54,7 +77,6 @@
 		itemId: string | null;
 		canonicalItemId: string | null;
 		intent: string | null;
-		replayed: boolean;
 		duplicateCount: number;
 		payload: unknown;
 		fingerprint: string;
@@ -70,7 +92,7 @@
 		attemptId = undefined,
 	}: {
 		maxEvents?: number;
-		toolkitCoordinator?: any;
+		toolkitCoordinator?: ToolkitCoordinatorLike | null;
 		sectionId?: string;
 		attemptId?: string;
 	} = $props();
@@ -86,11 +108,18 @@
 	let controllerAvailable = $state(false);
 
 	let nextRecordId = 1;
-	let activeController: {
-		subscribe?: (listener: (event: ControllerEvent) => void) => () => void;
-	} | null = null;
-	let unsubscribeController: (() => void) | null = null;
-	let unsubscribeLifecycle: (() => void) | null = null;
+	let resubscribeQueued = false;
+	const subscriptions: {
+		controller: (() => void) | null;
+		lifecycle: (() => void) | null;
+		activeSectionId: string;
+		activeAttemptId?: string;
+	} = {
+		controller: null,
+		lifecycle: null,
+		activeSectionId: "",
+		activeAttemptId: undefined,
+	};
 
 	function safeClone<T>(value: T): T {
 		try {
@@ -179,7 +208,6 @@
 			itemId: getValueAsString(detail?.itemId),
 			canonicalItemId: getValueAsString(detail?.canonicalItemId),
 			intent: getValueAsString(detail?.intent),
-			replayed: detail?.replayed === true,
 			duplicateCount: 1,
 			payload,
 			fingerprint,
@@ -211,6 +239,10 @@
 		}
 	}
 
+	function handleControllerEvent(event: ControllerEvent): void {
+		pushRecord(event || {});
+	}
+
 	function getController(): any | null {
 		return getSectionControllerFromCoordinator(
 			toolkitCoordinator,
@@ -219,15 +251,50 @@
 		);
 	}
 
+	function seedFromRuntimeState(controller: {
+		getRuntimeState?: () => ControllerRuntimeState;
+	}): void {
+		const runtimeState = controller?.getRuntimeState?.();
+		if (!runtimeState || typeof runtimeState !== "object") return;
+		const totalItems =
+			typeof runtimeState.totalItems === "number" ? runtimeState.totalItems : 0;
+		const now = Date.now();
+		pushRecord({
+			type: "section-items-complete-changed",
+			complete: runtimeState.itemsComplete === true,
+			completedCount:
+				typeof runtimeState.completedCount === "number"
+					? runtimeState.completedCount
+					: 0,
+			totalItems,
+			timestamp: now,
+		});
+		if (runtimeState.loadingComplete === true) {
+			pushRecord({
+				type: "section-loading-complete",
+				totalRegistered:
+					typeof runtimeState.totalRegistered === "number"
+						? runtimeState.totalRegistered
+						: 0,
+				totalLoaded:
+					typeof runtimeState.totalLoaded === "number"
+						? runtimeState.totalLoaded
+						: 0,
+				timestamp: now,
+			});
+		}
+	}
+
 	function detachControllerSubscription() {
-		unsubscribeController?.();
-		unsubscribeController = null;
-		activeController = null;
+		subscriptions.controller?.();
+		subscriptions.controller = null;
+		subscriptions.activeSectionId = "";
+		subscriptions.activeAttemptId = undefined;
 	}
 
 	function detachLifecycleSubscription() {
-		unsubscribeLifecycle?.();
-		unsubscribeLifecycle = null;
+		subscriptions.lifecycle?.();
+		subscriptions.lifecycle = null;
 	}
 
 	function ensureControllerSubscription() {
@@ -237,13 +304,34 @@
 			detachControllerSubscription();
 			return;
 		}
-		if (controller === activeController) return;
+
+		const nextAttemptId = attemptId || undefined;
+		const isSameTarget =
+			subscriptions.activeSectionId === sectionId &&
+			subscriptions.activeAttemptId === nextAttemptId;
+		if (isSameTarget && subscriptions.controller) {
+			return;
+		}
+
 		detachControllerSubscription();
-		activeController = controller;
-		unsubscribeController =
-			controller.subscribe?.((event: ControllerEvent) => {
-				pushRecord(event || {});
+		subscriptions.controller =
+			toolkitCoordinator?.subscribeSectionEvents({
+				sectionId,
+				attemptId,
+				listener: handleControllerEvent,
 			}) || null;
+		subscriptions.activeSectionId = sectionId;
+		subscriptions.activeAttemptId = nextAttemptId;
+		seedFromRuntimeState(controller);
+	}
+
+	function queueEnsureControllerSubscription(): void {
+		if (resubscribeQueued) return;
+		resubscribeQueued = true;
+		queueMicrotask(() => {
+			resubscribeQueued = false;
+			ensureControllerSubscription();
+		});
 	}
 
 	const pointerController = createFloatingPanelPointerController({
@@ -316,39 +404,43 @@
 		panelY = initial.y;
 		panelWidth = initial.width;
 		panelHeight = initial.height;
-		ensureControllerSubscription();
-		unsubscribeLifecycle = toolkitCoordinator?.onSectionControllerLifecycle?.(
-			(event: { key?: { sectionId?: string; attemptId?: string } }) => {
-				if (
-					!isMatchingSectionControllerLifecycleEvent(event, sectionId, attemptId)
-				)
-					return;
-				ensureControllerSubscription();
-			},
-		);
-
-		return () => {
-			detachControllerSubscription();
-			detachLifecycleSubscription();
-		};
 	});
 
 	$effect(() => {
 		void toolkitCoordinator;
 		void sectionId;
 		void attemptId;
-		ensureControllerSubscription();
-		detachLifecycleSubscription();
-		unsubscribeLifecycle = toolkitCoordinator?.onSectionControllerLifecycle?.(
-			(event: { key?: { sectionId?: string; attemptId?: string } }) => {
-				if (
-					!isMatchingSectionControllerLifecycleEvent(event, sectionId, attemptId)
-				)
-					return;
-				ensureControllerSubscription();
-			},
-		);
+		untrack(() => {
+			ensureControllerSubscription();
+			detachLifecycleSubscription();
+			subscriptions.lifecycle = toolkitCoordinator?.onSectionControllerLifecycle?.(
+				(event: {
+					type?: "ready" | "disposed";
+					key?: { sectionId?: string; attemptId?: string };
+				}) => {
+					if (
+						!isMatchingSectionControllerLifecycleEvent(event, sectionId, attemptId)
+					)
+						return;
+					if (event?.type === "disposed") {
+						detachControllerSubscription();
+						queueEnsureControllerSubscription();
+						return;
+					}
+					const nextAttemptId = attemptId || undefined;
+					if (
+						subscriptions.controller &&
+						subscriptions.activeSectionId === sectionId &&
+						subscriptions.activeAttemptId === nextAttemptId
+					) {
+						return;
+					}
+					queueEnsureControllerSubscription();
+				},
+			) || null;
+		});
 		return () => {
+			detachControllerSubscription();
 			detachLifecycleSubscription();
 		};
 	});
@@ -381,7 +473,7 @@
 			>
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h5m-7 7h12a2 2 0 002-2V5a2 2 0 00-2-2H6a2 2 0 00-2 2v14a2 2 0 002 2z" />
 			</svg>
-			<h3 class="pie-section-player-tools-event-debugger__title">Session Broadcasts</h3>
+			<h3 class="pie-section-player-tools-event-debugger__title">Controller Events</h3>
 		</div>
 		<div class="pie-section-player-tools-event-debugger__header-actions">
 			<PanelWindowControls
@@ -436,7 +528,7 @@
 				<div class="pie-section-player-tools-event-debugger__list">
 					{#if visibleRecords.length === 0}
 						<div class="pie-section-player-tools-event-debugger__empty">
-							No matching events yet. Interact with an item to capture broadcasts.
+							No matching events yet. Interact with an item to capture controller events.
 						</div>
 					{:else}
 						{#each visibleRecords as record (record.id)}
@@ -456,9 +548,6 @@
 									{#if record.itemId}
 										<span>item: {record.itemId}</span>
 									{/if}
-									{#if record.replayed}
-										<span>replayed</span>
-									{/if}
 									{#if record.intent}
 										<span>intent: {record.intent}</span>
 									{/if}
@@ -482,7 +571,6 @@
 							<div><strong>Target:</strong> {selectedRecord.targetTag || "unknown"}</div>
 							<div><strong>Item:</strong> {selectedRecord.itemId || "n/a"}</div>
 							<div><strong>Canonical:</strong> {selectedRecord.canonicalItemId || "n/a"}</div>
-							<div><strong>Replayed:</strong> {selectedRecord.replayed ? "yes" : "no"}</div>
 							<div><strong>Intent:</strong> {selectedRecord.intent || "n/a"}</div>
 							<div><strong>Duplicates:</strong> {selectedRecord.duplicateCount}</div>
 							<div>