@pie-players/pie-section-player-tools-session-debugger 0.3.4 → 0.3.7

package/SectionSessionPanel.svelte

@@ -29,6 +29,12 @@
 		currentItemIndex: number | null;
 		currentItemId: string | null;
 		visitedItemIdentifiers: string[];
+		loadingComplete: boolean;
+		totalRegistered: number;
+		totalLoaded: number;
+		itemsComplete: boolean;
+		completedCount: number;
+		totalItems: number;
 		updatedAt: number | null;
 		lastChangedItemId: string | null;
 		itemSessions: Record<string, unknown>;
@@ -39,15 +45,36 @@
 		currentItemId?: string;
 		visitedItemIdentifiers?: string[];
 		itemSessions?: Record<string, unknown>;
+		loadingComplete?: boolean;
+		totalRegistered?: number;
+		totalLoaded?: number;
+		itemsComplete?: boolean;
+		completedCount?: number;
+		totalItems?: number;
+	};
+
+	type SectionSessionStateLike = {
+		itemSessions?: Record<string, unknown>;
 	};
 
 	type SectionControllerLike = {
-		getCurrentSectionAttemptSlice?: () => SectionAttemptSliceLike | null;
+		getRuntimeState?: () => SectionAttemptSliceLike | null;
+		getSession?: () => SectionSessionStateLike | null;
 		subscribe?: (listener: (event: { itemId?: string; timestamp?: number }) => void) => () => void;
 	};
 
 	type ToolkitCoordinatorLike = {
 		getSectionController?: (args: { sectionId: string; attemptId?: string }) => SectionControllerLike | undefined;
+		subscribeItemEvents?: (args: {
+			sectionId: string;
+			attemptId?: string;
+			listener: (event: { itemId?: string; timestamp?: number }) => void;
+		}) => () => void;
+		subscribeSectionLifecycleEvents?: (args: {
+			sectionId: string;
+			attemptId?: string;
+			listener: (event: { itemId?: string; timestamp?: number }) => void;
+		}) => () => void;
 	onSectionControllerLifecycle?: (
 		listener: (event: { type: 'ready' | 'disposed'; key?: { sectionId?: string; attemptId?: string } }) => void
 	) => () => void;
@@ -73,15 +100,29 @@
 		currentItemIndex: null,
 		currentItemId: null,
 		visitedItemIdentifiers: [],
+		loadingComplete: false,
+		totalRegistered: 0,
+		totalLoaded: 0,
+		itemsComplete: false,
+		completedCount: 0,
+		totalItems: 0,
 		updatedAt: null,
 		lastChangedItemId: null,
 		itemSessions: {}
 	});
-	let activeController: SectionControllerLike | null = null;
 	let unsubscribeController: (() => void) | null = null;
 	let unsubscribeLifecycle: (() => void) | null = null;
 	let controllerAvailable = $state(false);
-	let refreshQueued = false;
+	let resubscribeQueued = false;
+	const subscriptionTarget: {
+		controller: SectionControllerLike | null;
+		sectionId: string;
+		attemptId?: string;
+	} = {
+		controller: null,
+		sectionId: '',
+		attemptId: undefined
+	};
 
 	function cloneSessionSnapshot<T>(value: T): T {
 		try {
@@ -111,7 +152,8 @@
 		controllerOverride?: SectionControllerLike | null
 	) {
 		const controller = controllerOverride || getController();
-		const sectionSlice = controller?.getCurrentSectionAttemptSlice?.() || null;
+		const sectionSlice = controller?.getRuntimeState?.() || null;
+		const persistedSlice = controller?.getSession?.() || null;
 		controllerAvailable = Boolean(controller);
 		sessionPanelSnapshot = {
 			currentItemIndex:
@@ -123,30 +165,26 @@
 					? sectionSlice.currentItemId
 					: null,
 			visitedItemIdentifiers: cloneSessionSnapshot(sectionSlice?.visitedItemIdentifiers || []),
+			loadingComplete: sectionSlice?.loadingComplete === true,
+			totalRegistered: typeof sectionSlice?.totalRegistered === 'number' ? sectionSlice.totalRegistered : 0,
+			totalLoaded: typeof sectionSlice?.totalLoaded === 'number' ? sectionSlice.totalLoaded : 0,
+			itemsComplete: sectionSlice?.itemsComplete === true,
+			completedCount: typeof sectionSlice?.completedCount === 'number' ? sectionSlice.completedCount : 0,
+			totalItems: typeof sectionSlice?.totalItems === 'number' ? sectionSlice.totalItems : 0,
 			updatedAt: meta?.updatedAt || Date.now(),
 			lastChangedItemId: meta?.itemId || null,
-			itemSessions: cloneSessionSnapshot(sectionSlice?.itemSessions || {})
+			itemSessions: cloneSessionSnapshot(
+				sectionSlice?.itemSessions || persistedSlice?.itemSessions || {}
+			)
 		};
 	}
 
-	function queueRefresh(meta?: { itemId?: string; updatedAt?: number }) {
-		if (refreshQueued) return;
-		refreshQueued = true;
-		queueMicrotask(() => {
-			refreshQueued = false;
-			ensureControllerSubscription();
-			refreshFromController(
-				meta || {
-					updatedAt: Date.now()
-				}
-			);
-		});
-	}
-
 	function detachControllerSubscription() {
 		unsubscribeController?.();
 		unsubscribeController = null;
-		activeController = null;
+		subscriptionTarget.controller = null;
+		subscriptionTarget.sectionId = '';
+		subscriptionTarget.attemptId = undefined;
 	}
 
 	function detachLifecycleSubscription() {
@@ -154,6 +192,13 @@
 		unsubscribeLifecycle = null;
 	}
 
+	function handleControllerEvent(detail: { itemId?: string; timestamp?: number }): void {
+		refreshFromController({
+			itemId: detail?.itemId,
+			updatedAt: detail?.timestamp || Date.now()
+		});
+	}
+
 	function ensureControllerSubscription() {
 		const controller = getController() || null;
 		if (!controller) {
@@ -163,32 +208,54 @@
 				currentItemIndex: null,
 				currentItemId: null,
 				visitedItemIdentifiers: [],
+				loadingComplete: false,
+				totalRegistered: 0,
+				totalLoaded: 0,
+				itemsComplete: false,
+				completedCount: 0,
+				totalItems: 0,
 				updatedAt: Date.now(),
 				lastChangedItemId: null,
 				itemSessions: {}
 			};
 			return;
 		}
-		if (controller === activeController) return;
+		const nextAttemptId = attemptId || undefined;
+		const isSameTarget =
+			subscriptionTarget.controller === controller &&
+			subscriptionTarget.sectionId === sectionId &&
+			subscriptionTarget.attemptId === nextAttemptId;
+		if (isSameTarget && unsubscribeController) {
+			refreshFromController(undefined, controller);
+			return;
+		}
 		detachControllerSubscription();
-		activeController = controller;
-		const subscribe = typeof controller.subscribe === 'function' ? controller.subscribe.bind(controller) : null;
-		unsubscribeController =
-			subscribe?.((detail) => {
-				refreshFromController(
-					{
-						itemId: detail?.itemId,
-						updatedAt: detail?.timestamp || Date.now()
-					},
-					controller
-				);
-			}) || null;
+		const unsubscribeItem = toolkitCoordinator?.subscribeItemEvents?.({
+			sectionId,
+			attemptId,
+			listener: handleControllerEvent
+		}) || null;
+		const unsubscribeSection = toolkitCoordinator?.subscribeSectionLifecycleEvents?.({
+			sectionId,
+			attemptId,
+			listener: handleControllerEvent
+		}) || null;
+		unsubscribeController = () => {
+			unsubscribeItem?.();
+			unsubscribeSection?.();
+		};
+		subscriptionTarget.controller = controller;
+		subscriptionTarget.sectionId = sectionId;
+		subscriptionTarget.attemptId = nextAttemptId;
 		refreshFromController(undefined, controller);
 	}
 
-	export function refreshFromHost(): void {
-		queueRefresh({
-			updatedAt: Date.now()
+	function queueEnsureControllerSubscription(): void {
+		if (resubscribeQueued) return;
+		resubscribeQueued = true;
+		queueMicrotask(() => {
+			resubscribeQueued = false;
+			ensureControllerSubscription();
 		});
 	}
 
@@ -198,7 +265,7 @@
 		detachLifecycleSubscription();
 		unsubscribeLifecycle = toolkitCoordinator.onSectionControllerLifecycle?.((event) => {
 			if (!isMatchingSectionControllerLifecycleEvent(event, sectionId, attemptId)) return;
-			ensureControllerSubscription();
+			queueEnsureControllerSubscription();
 			refreshFromController({
 				updatedAt: Date.now()
 			});
@@ -229,20 +296,6 @@
 		sessionWindowY = initial.y;
 		sessionWindowWidth = initial.width;
 		sessionWindowHeight = initial.height;
-
-		const handleRuntimeSessionEvent = () => {
-			queueRefresh({
-				updatedAt: Date.now()
-			});
-		};
-		document.addEventListener('session-changed', handleRuntimeSessionEvent as EventListener, true);
-		document.addEventListener('item-session-changed', handleRuntimeSessionEvent as EventListener, true);
-		document.addEventListener('composition-changed', handleRuntimeSessionEvent as EventListener, true);
-		return () => {
-			document.removeEventListener('session-changed', handleRuntimeSessionEvent as EventListener, true);
-			document.removeEventListener('item-session-changed', handleRuntimeSessionEvent as EventListener, true);
-			document.removeEventListener('composition-changed', handleRuntimeSessionEvent as EventListener, true);
-		};
 	});
 
 	const pointerController = createFloatingPanelPointerController({
@@ -320,19 +373,20 @@
 						</svg>
 						<span class="pie-section-player-tools-session-debugger__text-xs">Section controller not available for this section yet.</span>
 					</div>
-				{:else if Object.keys(sessionPanelSnapshot.itemSessions || {}).length === 0}
-					<div class="pie-section-player-tools-session-debugger__alert pie-section-player-tools-session-debugger__alert--info">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="pie-section-player-tools-session-debugger__icon-md"
-							fill="none"
-							viewBox="0 0 24 24"
-						>
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-						</svg>
-						<span class="pie-section-player-tools-session-debugger__text-xs">No section session data yet. Interact with the questions to see updates.</span>
-					</div>
 				{:else}
+					{#if Object.keys(sessionPanelSnapshot.itemSessions || {}).length === 0}
+						<div class="pie-section-player-tools-session-debugger__alert pie-section-player-tools-session-debugger__alert--info">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="pie-section-player-tools-session-debugger__icon-md"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+							</svg>
+							<span class="pie-section-player-tools-session-debugger__text-xs">No section session data yet. Interact with the questions to see updates.</span>
+						</div>
+					{/if}
 					<div class="pie-section-player-tools-session-debugger__card">
 						<div class="pie-section-player-tools-session-debugger__card-title">
 							Item Sessions Snapshot
@@ -401,8 +455,4 @@
 		min-height: 0;
 	}
 
-	.pie-section-player-tools-session-debugger__resize-handle {
-		user-select: none;
-	}
-
 </style>