@pie-players/pie-section-player-tools-session-debugger 0.3.3 → 0.3.5

package/SectionSessionPanel.svelte

@@ -12,6 +12,14 @@
 
 <script lang="ts">
 	import '@pie-players/pie-theme/components.css';
+	import PanelResizeHandle from '@pie-players/pie-section-player-tools-shared/PanelResizeHandle.svelte';
+	import PanelWindowControls from '@pie-players/pie-section-player-tools-shared/PanelWindowControls.svelte';
+	import {
+		computePanelSizeFromViewport,
+		createFloatingPanelPointerController,
+		getSectionControllerFromCoordinator,
+		isMatchingSectionControllerLifecycleEvent
+	} from '@pie-players/pie-section-player-tools-shared';
 	import { createEventDispatcher } from 'svelte';
 	import { onMount } from 'svelte';
 	const dispatch = createEventDispatcher<{ close: undefined }>();
@@ -21,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>;
@@ -31,15 +45,31 @@
 		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;
+		getSessionState?: () => SectionSessionStateLike | null;
 		subscribe?: (listener: (event: { itemId?: string; timestamp?: number }) => void) => () => void;
 	};
 
 	type ToolkitCoordinatorLike = {
 		getSectionController?: (args: { sectionId: string; attemptId?: string }) => SectionControllerLike | undefined;
+		subscribeSectionEvents: (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;
@@ -60,31 +90,34 @@
 	let sessionWindowY = $state(100);
 	let sessionWindowWidth = $state(220);
 	let sessionWindowHeight = $state(600);
-	let isSessionDragging = $state(false);
-	let isSessionResizing = $state(false);
-
-	let dragStartX = 0;
-	let dragStartY = 0;
-	let dragStartWindowX = 0;
-	let dragStartWindowY = 0;
-	let resizeStartX = 0;
-	let resizeStartY = 0;
-	let resizeStartWidth = 0;
-	let resizeStartHeight = 0;
 
 	let sessionPanelSnapshot = $state<SessionPanelSnapshot>({
 		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 {
@@ -100,8 +133,13 @@
 	}
 
 	function getController(): SectionControllerLike | undefined {
-		if (!toolkitCoordinator || !sectionId) return undefined;
-		return toolkitCoordinator.getSectionController?.({ sectionId, attemptId });
+		return (
+			getSectionControllerFromCoordinator(
+				toolkitCoordinator,
+				sectionId,
+				attemptId
+			) || undefined
+		);
 	}
 
 	function refreshFromController(
@@ -109,7 +147,8 @@
 		controllerOverride?: SectionControllerLike | null
 	) {
 		const controller = controllerOverride || getController();
-		const sectionSlice = controller?.getCurrentSectionAttemptSlice?.() || null;
+		const sectionSlice = controller?.getRuntimeState?.() || null;
+		const persistedSlice = controller?.getSessionState?.() || null;
 		controllerAvailable = Boolean(controller);
 		sessionPanelSnapshot = {
 			currentItemIndex:
@@ -121,30 +160,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() {
@@ -152,6 +187,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) {
@@ -161,32 +203,45 @@
 				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;
+		unsubscribeController = toolkitCoordinator?.subscribeSectionEvents({
+			sectionId,
+			attemptId,
+			listener: handleControllerEvent
+		}) || null;
+		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();
 		});
 	}
 
@@ -195,11 +250,8 @@
 		ensureControllerSubscription();
 		detachLifecycleSubscription();
 		unsubscribeLifecycle = toolkitCoordinator.onSectionControllerLifecycle?.((event) => {
-			const eventSectionId = event?.key?.sectionId || '';
-			const eventAttemptId = event?.key?.attemptId || undefined;
-			if (eventSectionId !== sectionId) return;
-			if ((eventAttemptId || undefined) !== (attemptId || undefined)) return;
-			ensureControllerSubscription();
+			if (!isMatchingSectionControllerLifecycleEvent(event, sectionId, attemptId)) return;
+			queueEnsureControllerSubscription();
 			refreshFromController({
 				updatedAt: Date.now()
 			});
@@ -211,88 +263,47 @@
 	});
 
 	onMount(() => {
-		const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
-		const viewportWidth = window.innerWidth;
-		const viewportHeight = window.innerHeight;
-		sessionWindowWidth = clamp(Math.round(viewportWidth * 0.29), 280, 560);
-		sessionWindowHeight = clamp(Math.round(viewportHeight * 0.72), 360, 860);
-		sessionWindowX = Math.max(16, Math.round(viewportWidth * 0.08));
-		sessionWindowY = Math.max(16, Math.round((viewportHeight - sessionWindowHeight) / 2));
-
-		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);
-		};
-	});
-
-	function startSessionDrag(e: MouseEvent) {
-		isSessionDragging = true;
-		dragStartX = e.clientX;
-		dragStartY = e.clientY;
-		dragStartWindowX = sessionWindowX;
-		dragStartWindowY = sessionWindowY;
-
-		document.addEventListener('mousemove', onSessionDrag);
-		document.addEventListener('mouseup', stopSessionDrag);
-	}
-
-	function onSessionDrag(e: MouseEvent) {
-		if (!isSessionDragging) return;
-		const deltaX = e.clientX - dragStartX;
-		const deltaY = e.clientY - dragStartY;
-		sessionWindowX = dragStartWindowX + deltaX;
-		sessionWindowY = dragStartWindowY + deltaY;
-		sessionWindowX = Math.max(0, Math.min(sessionWindowX, window.innerWidth - sessionWindowWidth));
-		sessionWindowY = Math.max(0, Math.min(sessionWindowY, window.innerHeight - 100));
-	}
-
-	function stopSessionDrag() {
-		isSessionDragging = false;
-		document.removeEventListener('mousemove', onSessionDrag);
-		document.removeEventListener('mouseup', stopSessionDrag);
-	}
-
-	function startSessionResize(e: MouseEvent) {
-		isSessionResizing = true;
-		resizeStartX = e.clientX;
-		resizeStartY = e.clientY;
-		resizeStartWidth = sessionWindowWidth;
-		resizeStartHeight = sessionWindowHeight;
-		document.addEventListener('mousemove', onSessionResize);
-		document.addEventListener('mouseup', stopSessionResize);
-		e.stopPropagation();
-	}
-
-	function onSessionResize(e: MouseEvent) {
-		if (!isSessionResizing) return;
-		const deltaX = e.clientX - resizeStartX;
-		const deltaY = e.clientY - resizeStartY;
-		sessionWindowWidth = Math.max(300, Math.min(resizeStartWidth + deltaX, window.innerWidth - sessionWindowX));
-		sessionWindowHeight = Math.max(
-			200,
-			Math.min(resizeStartHeight + deltaY, window.innerHeight - sessionWindowY)
+		const initial = computePanelSizeFromViewport(
+			{ width: window.innerWidth, height: window.innerHeight },
+			{
+				widthRatio: 0.29,
+				heightRatio: 0.72,
+				minWidth: 280,
+				maxWidth: 560,
+				minHeight: 360,
+				maxHeight: 860,
+				alignX: 'left',
+				alignY: 'center',
+				paddingX: 16,
+				paddingY: 16
+			}
 		);
-	}
+		sessionWindowX = initial.x;
+		sessionWindowY = initial.y;
+		sessionWindowWidth = initial.width;
+		sessionWindowHeight = initial.height;
+	});
 
-	function stopSessionResize() {
-		isSessionResizing = false;
-		document.removeEventListener('mousemove', onSessionResize);
-		document.removeEventListener('mouseup', stopSessionResize);
-	}
+	const pointerController = createFloatingPanelPointerController({
+		getState: () => ({
+			x: sessionWindowX,
+			y: sessionWindowY,
+			width: sessionWindowWidth,
+			height: sessionWindowHeight
+		}),
+		setState: (next) => {
+			sessionWindowX = next.x;
+			sessionWindowY = next.y;
+			sessionWindowWidth = next.width;
+			sessionWindowHeight = next.height;
+		},
+		minWidth: 300,
+		minHeight: 200
+	});
 
 	$effect(() => {
 		return () => {
-			stopSessionDrag();
-			stopSessionResize();
+			pointerController.stop();
 		};
 	});
 </script>
@@ -303,7 +314,7 @@
 >
 	<div
 		class="pie-section-player-tools-session-debugger__header"
-		onmousedown={startSessionDrag}
+		onmousedown={(event: MouseEvent) => pointerController.startDrag(event)}
 		role="button"
 		tabindex="0"
 		aria-label="Drag session panel"
@@ -321,49 +332,16 @@
 			<h3 class="pie-section-player-tools-session-debugger__title">Session Data</h3>
 		</div>
 		<div class="pie-section-player-tools-session-debugger__header-actions">
-			<button
-				class="pie-section-player-tools-session-debugger__icon-button"
-				onclick={() => (isSessionMinimized = !isSessionMinimized)}
-				title={isSessionMinimized ? 'Maximize' : 'Minimize'}
-			>
-				{#if isSessionMinimized}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="pie-section-player-tools-session-debugger__icon-xs"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
-					</svg>
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="pie-section-player-tools-session-debugger__icon-xs"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-					</svg>
-				{/if}
-			</button>
-			<button class="pie-section-player-tools-session-debugger__icon-button" onclick={() => dispatch('close')} title="Close">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="pie-section-player-tools-session-debugger__icon-xs"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-				</svg>
-			</button>
+			<PanelWindowControls
+				minimized={isSessionMinimized}
+				onToggle={() => (isSessionMinimized = !isSessionMinimized)}
+				onClose={() => dispatch('close')}
+			/>
 		</div>
 	</div>
 
 	{#if !isSessionMinimized}
-		<div class="pie-section-player-tools-session-debugger__content-shell" style="height: {sessionWindowHeight - 60}px;">
+		<div class="pie-section-player-tools-session-debugger__content-shell" style="height: {sessionWindowHeight - 50}px;">
 			<div class="pie-section-player-tools-session-debugger__content">
 				<div class="pie-section-player-tools-session-debugger__section-intro">
 					<div class="pie-section-player-tools-session-debugger__heading">PIE Session Data (Persistent)</div>
@@ -381,19 +359,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
@@ -406,18 +385,60 @@
 	{/if}
 
 	{#if !isSessionMinimized}
-		<div
-			class="pie-section-player-tools-session-debugger__resize-handle"
-			onmousedown={startSessionResize}
-			role="button"
-			tabindex="0"
-			title="Resize window"
-		>
-			<svg class="pie-section-player-tools-session-debugger__resize-icon" viewBox="0 0 16 16" fill="currentColor">
-				<path d="M16 16V14H14V16H16Z" />
-				<path d="M16 11V9H14V11H16Z" />
-				<path d="M13 16V14H11V16H13Z" />
-			</svg>
-		</div>
+		<PanelResizeHandle onPointerDown={(event: MouseEvent) => pointerController.startResize(event)} />
 	{/if}
 </div>
+
+<style>
+	.pie-section-player-tools-session-debugger {
+		position: fixed;
+		z-index: 9999;
+		background: var(--color-base-100, #fff);
+		color: var(--color-base-content, #1f2937);
+		border: 2px solid var(--color-base-300, #d1d5db);
+		border-radius: 8px;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+		overflow: hidden;
+		font-family: var(--pie-font-family, Inter, system-ui, sans-serif);
+	}
+
+	.pie-section-player-tools-session-debugger__header {
+		padding: 8px 16px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: var(--color-base-200, #f3f4f6);
+		cursor: move;
+		user-select: none;
+		border-bottom: 1px solid var(--color-base-300, #d1d5db);
+	}
+
+	.pie-section-player-tools-session-debugger__header-title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.pie-section-player-tools-session-debugger__icon-sm {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.pie-section-player-tools-session-debugger__title {
+		margin: 0;
+		font-size: 0.95rem;
+		font-weight: 700;
+	}
+
+	.pie-section-player-tools-session-debugger__header-actions {
+		display: flex;
+		gap: 4px;
+	}
+
+	.pie-section-player-tools-session-debugger__content-shell {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+</style>