@tanstack/pacer-devtools 1.1.4 → 1.2.0

package/dist/{PacerDevtools-C_K6wJJQ.js → components-CGEHIK6F.js}

@@ -1,12 +1,12 @@
-import { className, createComponent, delegateEvents, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
+import { className, createComponent, delegateEvents, effect, insert, memo, setStyleProperty, style, template, use } from "solid-js/web";
 import { Header, HeaderLogo, JsonTree, MainPanel, ThemeContextProvider, useTheme } from "@tanstack/devtools-ui";
-import { createStore } from "solid-js/store";
-import { For, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js";
-import { pacerEventClient } from "@tanstack/pacer/event-client";
+import { createStore, produce } from "solid-js/store";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js";
+import { getPacerDevtoolsInstance, pacerEventClient } from "@tanstack/pacer/event-client";
 import * as goober from "goober";
 import { useStore } from "@tanstack/solid-store";
 import clsx from "clsx";
-import { pacerEventClient as pacerEventClient$1 } from "@tanstack/pacer";
+import { emitChange } from "@tanstack/pacer";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime.js";
 //#region src/PacerContextProvider.tsx
@@ -24,109 +24,78 @@ const initialPacerDevtoolsStore = {
 	lastUpdatedByKey: {}
 };
 const PacerDevtoolsContext = createContext([initialPacerDevtoolsStore, () => {}]);
-const updateOrAddToArray = (oldArray, newItem) => {
-	const index = oldArray.findIndex((item) => item.key === newItem.key);
-	if (index !== -1) return oldArray.map((item, i) => i === index ? newItem : item);
-	return [...oldArray, newItem];
-};
+/**
+* Match TanStack Form devtools: subscribe with {@link pacerEventClient.on} per
+* event suffix so the same `pacer:${suffix}` channel the library emits on is
+* observed. `onAllPluginEvents` only sees `tanstack-devtools-global`, which is
+* not always relayed the same way by the shell.
+*
+* `d-*` suffixes are used when the devtools panel pushes state back (see
+* ActionButtons); those must update the panel store too.
+*/
+const PACER_DEVTOOLS_UTIL_EVENTS = [
+	{
+		listKey: "asyncBatchers",
+		suffixes: ["AsyncBatcher", "d-AsyncBatcher"]
+	},
+	{
+		listKey: "asyncDebouncers",
+		suffixes: ["AsyncDebouncer", "d-AsyncDebouncer"]
+	},
+	{
+		listKey: "asyncQueuers",
+		suffixes: ["AsyncQueuer", "d-AsyncQueuer"]
+	},
+	{
+		listKey: "asyncRateLimiters",
+		suffixes: ["AsyncRateLimiter", "d-AsyncRateLimiter"]
+	},
+	{
+		listKey: "asyncThrottlers",
+		suffixes: ["AsyncThrottler", "d-AsyncThrottler"]
+	},
+	{
+		listKey: "batchers",
+		suffixes: ["Batcher", "d-Batcher"]
+	},
+	{
+		listKey: "debouncers",
+		suffixes: ["Debouncer", "d-Debouncer"]
+	},
+	{
+		listKey: "queuers",
+		suffixes: ["Queuer", "d-Queuer"]
+	},
+	{
+		listKey: "rateLimiters",
+		suffixes: ["RateLimiter", "d-RateLimiter"]
+	},
+	{
+		listKey: "throttlers",
+		suffixes: ["Throttler", "d-Throttler"]
+	}
+];
 function PacerContextProvider(props) {
 	const [store, setStore] = createStore(initialPacerDevtoolsStore);
 	createEffect(() => {
-		onCleanup(pacerEventClient.onAllPluginEvents((_e) => {
-			const e = _e;
-			switch (e.type) {
-				case "pacer:AsyncBatcher":
-					setStore({
-						asyncBatchers: updateOrAddToArray(store.asyncBatchers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:AsyncDebouncer":
-					setStore({
-						asyncDebouncers: updateOrAddToArray(store.asyncDebouncers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:AsyncQueuer":
-					setStore({
-						asyncQueuers: updateOrAddToArray(store.asyncQueuers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:AsyncRateLimiter":
-					setStore({
-						asyncRateLimiters: updateOrAddToArray(store.asyncRateLimiters, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:AsyncThrottler":
-					setStore({
-						asyncThrottlers: updateOrAddToArray(store.asyncThrottlers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:Batcher":
-					setStore({
-						batchers: updateOrAddToArray(store.batchers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:Debouncer":
-					setStore({
-						debouncers: updateOrAddToArray(store.debouncers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:Queuer":
-					setStore({
-						queuers: updateOrAddToArray(store.queuers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:RateLimiter":
-					setStore({
-						rateLimiters: updateOrAddToArray(store.rateLimiters, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-				case "pacer:Throttler":
-					setStore({
-						throttlers: updateOrAddToArray(store.throttlers, e.payload),
-						lastUpdatedByKey: {
-							...store.lastUpdatedByKey,
-							[e.payload.key]: Date.now()
-						}
-					});
-					break;
-			}
+		const cleanups = [];
+		for (const { listKey, suffixes } of PACER_DEVTOOLS_UTIL_EVENTS) for (const suffix of suffixes) cleanups.push(pacerEventClient.on(suffix, (e) => {
+			const key = e.payload.key;
+			if (!key) return;
+			const instance = getPacerDevtoolsInstance(key);
+			if (!instance || typeof instance !== "object") return;
+			setStore(produce((draft) => {
+				const list = draft[listKey];
+				const index = list.findIndex((item) => item.key === key);
+				const inst = instance;
+				if (index !== -1) list[index] = inst;
+				else list.push(inst);
+				draft.lastUpdatedByKey[key] = Date.now();
+			}));
 		}));
+		onCleanup(() => {
+			for (const cleanup of cleanups) cleanup();
+		});
 	});
 	return createComponent(PacerDevtoolsContext.Provider, {
 		value: [store, setStore],
@@ -448,9 +417,25 @@ const stylesFactory = (theme) => {
 	const css = goober.css;
 	const t = (light, dark) => theme === "light" ? light : dark;
 	return {
+		shellRoot: css`
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+    `,
+		mainPanelShell: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: hidden !important;
+    `,
 		mainContainer: css`
       display: flex;
-      flex: 1;
+      flex: 1 1 0%;
       min-height: 0;
       overflow: hidden;
       padding: ${size[2]};
@@ -852,7 +837,7 @@ const UTIL_GROUPS = [
 ];
 //#endregion
 //#region src/components/UtilList.tsx
-var _tmpl$$4 = /* @__PURE__ */ template(`<div>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div><div></div><div>`);
+var _tmpl$$4 = /* @__PURE__ */ template(`<div>`), _tmpl$2$3 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div><div></div><div>`);
 function UtilList(props) {
 	const styles = useStyles();
 	return (() => {
@@ -860,7 +845,7 @@ function UtilList(props) {
 		insert(_el$, createComponent(For, {
 			each: UTIL_GROUPS,
 			children: (group) => memo(() => memo(() => props.utilState()[group.key].length > 0)() && (() => {
-				var _el$2 = _tmpl$2$2(), _el$3 = _el$2.firstChild;
+				var _el$2 = _tmpl$2$3(), _el$3 = _el$2.firstChild;
 				insert(_el$3, () => group.label);
 				insert(_el$2, createComponent(For, {
 					get each() {
@@ -913,16 +898,42 @@ function UtilList(props) {
 }
 delegateEvents(["click"]);
 //#endregion
+//#region src/utils/read-pacer-store-state.ts
+/** TanStack Store (`@tanstack/store`) used by pacer utils. */
+function isPacerUtilTanStackStore(x) {
+	return typeof x === "object" && x !== null && "subscribe" in x && typeof x.subscribe === "function" && "get" in x && typeof x.get === "function";
+}
+/**
+* Core pacer utils expose TanStack `Store` (`get()` / `state`). React hooks may
+* also expose a reactive `state` field. Use this for devtools UI that needs a
+* plain snapshot (e.g. JsonTree).
+*/
+function getPacerUtilStoreState(instance) {
+	const store = instance.store;
+	if (store && typeof store.get === "function") return store.get();
+	if (store && store.state !== void 0) return store.state;
+	return instance.state;
+}
+//#endregion
 //#region src/components/ActionButtons.tsx
-var _tmpl$$3 = /* @__PURE__ */ template(`<div>No actions available for this util`), _tmpl$2$1 = /* @__PURE__ */ template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ template(`<button><span>`), _tmpl$4 = /* @__PURE__ */ template(`<button><span></span>Flush`), _tmpl$5 = /* @__PURE__ */ template(`<button><span></span>Cancel`), _tmpl$6 = /* @__PURE__ */ template(`<button><span></span>Reset`), _tmpl$7 = /* @__PURE__ */ template(`<button><span></span>Clear`);
+var _tmpl$$3 = /* @__PURE__ */ template(`<div>No actions available for this util`), _tmpl$2$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ template(`<button><span>`), _tmpl$4 = /* @__PURE__ */ template(`<button><span></span>Flush`), _tmpl$5 = /* @__PURE__ */ template(`<button><span></span>Cancel`), _tmpl$6 = /* @__PURE__ */ template(`<button><span></span>Reset`), _tmpl$7 = /* @__PURE__ */ template(`<button><span></span>Clear`);
 function ActionButtons(props) {
 	const styles = useStyles();
 	const utilInstance = props.instance;
-	const utilState = utilInstance?.store?.state;
-	const hasPending = utilState && "isPending" in utilState;
-	const hasEmpty = utilState && "isEmpty" in utilState;
-	const isPending = hasPending ? !!utilState.isPending : false;
-	const isEmpty = hasEmpty ? utilState.isEmpty : void 0;
+	const store = utilInstance?.store;
+	const stateAccessor = isPacerUtilTanStackStore(store) ? useStore(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}) : () => getPacerUtilStoreState(utilInstance);
+	const getState = () => stateAccessor();
+	const hasPending = () => {
+		return "isPending" in getState();
+	};
+	const isPending = () => {
+		const u = getState();
+		return "isPending" in u ? !!u.isPending : false;
+	};
+	const isEmptyFlag = () => {
+		const u = getState();
+		return "isEmpty" in u ? !!u.isEmpty : false;
+	};
 	const hasFlush = typeof utilInstance.flush === "function";
 	const hasCancel = typeof utilInstance.cancel === "function";
 	const hasReset = typeof utilInstance.reset === "function";
@@ -930,45 +941,52 @@ function ActionButtons(props) {
 	const hasStart = typeof utilInstance.start === "function";
 	const hasStop = typeof utilInstance.stop === "function";
 	const hasStartStop = hasStart && hasStop;
-	const isRunning = utilState?.isRunning ?? true;
-	if (!hasPending && !hasFlush && !hasCancel && !hasReset && !hasClear) return (() => {
+	const isRunning = () => {
+		const u = getState();
+		return "isRunning" in u ? !!u.isRunning : true;
+	};
+	if (!hasPending() && !hasFlush && !hasCancel && !hasReset && !hasClear) return (() => {
 		var _el$ = _tmpl$$3();
 		effect(() => className(_el$, styles().sectionEmpty));
 		return _el$;
 	})();
 	const emitName = `d-${props.utilName}`;
+	const utilNameLower = props.utilName.toLowerCase();
 	return (() => {
-		var _el$2 = _tmpl$2$1();
-		insert(_el$2, hasPending && (() => {
-			var _el$3 = _tmpl$3$1(), _el$4 = _el$3.firstChild;
-			_el$3.$$mousedown = () => {
-				const next = !isPending;
-				utilInstance.store.setState((prev) => ({
-					...prev,
-					isPending: next
-				}));
-				pacerEventClient$1.emit(emitName, utilInstance);
-			};
-			insert(_el$3, isPending ? "Restore Pending" : "Trigger Pending", null);
-			effect((_p$) => {
-				var _v$ = styles().actionButton, _v$2 = styles().actionDotBlue;
-				_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-				_v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0
-			});
-			return _el$3;
+		var _el$2 = _tmpl$2$2();
+		insert(_el$2, (() => {
+			var _c$ = memo(() => !!hasPending());
+			return () => _c$() && (() => {
+				var _el$3 = _tmpl$3$1(), _el$4 = _el$3.firstChild;
+				_el$3.$$mousedown = () => {
+					const next = !isPending();
+					utilInstance.store.setState((prev) => ({
+						...prev,
+						isPending: next
+					}));
+					emitChange(emitName, utilInstance);
+				};
+				insert(_el$3, () => isPending() ? "Restore Pending" : "Trigger Pending", null);
+				effect((_p$) => {
+					var _v$ = styles().actionButton, _v$2 = styles().actionDotBlue;
+					_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+					_v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$3;
+			})();
 		})(), null);
 		insert(_el$2, hasFlush && (() => {
 			var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
 			_el$5.$$mousedown = () => {
 				utilInstance.flush();
-				pacerEventClient$1.emit(emitName, utilInstance);
+				emitChange(emitName, utilInstance);
 			};
 			effect((_p$) => {
-				var _v$3 = styles().actionButton, _v$4 = props.utilName.toLowerCase().includes("debouncer") && !isPending || props.utilName.toLowerCase().includes("throttler") && !isPending || props.utilName.toLowerCase().includes("batcher") && isEmpty || props.utilName.toLowerCase().includes("queuer") && isEmpty, _v$5 = styles().actionDotGreen;
+				var _v$3 = styles().actionButton, _v$4 = utilNameLower.includes("debouncer") && !isPending() || utilNameLower.includes("throttler") && !isPending() || utilNameLower.includes("batcher") && isEmptyFlag() || utilNameLower.includes("queuer") && isEmptyFlag(), _v$5 = styles().actionDotGreen;
 				_v$3 !== _p$.e && className(_el$5, _p$.e = _v$3);
 				_v$4 !== _p$.t && (_el$5.disabled = _p$.t = _v$4);
 				_v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
@@ -984,10 +1002,10 @@ function ActionButtons(props) {
 			var _el$7 = _tmpl$5(), _el$8 = _el$7.firstChild;
 			_el$7.$$mousedown = () => {
 				utilInstance.cancel();
-				pacerEventClient$1.emit(emitName, utilInstance);
+				emitChange(emitName, utilInstance);
 			};
 			effect((_p$) => {
-				var _v$6 = styles().actionButton, _v$7 = props.utilName.toLowerCase().includes("debouncer") && !isPending || props.utilName.toLowerCase().includes("throttler") && !isPending || props.utilName.toLowerCase().includes("batcher") && isEmpty || props.utilName.toLowerCase().includes("queuer") && isEmpty, _v$8 = styles().actionDotRed;
+				var _v$6 = styles().actionButton, _v$7 = utilNameLower.includes("debouncer") && !isPending() || utilNameLower.includes("throttler") && !isPending() || utilNameLower.includes("batcher") && isEmptyFlag() || utilNameLower.includes("queuer") && isEmptyFlag(), _v$8 = styles().actionDotRed;
 				_v$6 !== _p$.e && className(_el$7, _p$.e = _v$6);
 				_v$7 !== _p$.t && (_el$7.disabled = _p$.t = _v$7);
 				_v$8 !== _p$.a && className(_el$8, _p$.a = _v$8);
@@ -1003,7 +1021,7 @@ function ActionButtons(props) {
 			var _el$9 = _tmpl$6(), _el$0 = _el$9.firstChild;
 			_el$9.$$mousedown = () => {
 				utilInstance.reset();
-				pacerEventClient$1.emit(emitName, utilInstance);
+				emitChange(emitName, utilInstance);
 			};
 			effect((_p$) => {
 				var _v$9 = styles().actionButton, _v$0 = styles().actionDotYellow;
@@ -1020,10 +1038,10 @@ function ActionButtons(props) {
 			var _el$1 = _tmpl$7(), _el$10 = _el$1.firstChild;
 			_el$1.$$mousedown = () => {
 				utilInstance.clear();
-				pacerEventClient$1.emit(emitName, utilInstance);
+				emitChange(emitName, utilInstance);
 			};
 			effect((_p$) => {
-				var _v$1 = styles().actionButton, _v$10 = props.utilName.toLowerCase().includes("batcher") && isEmpty || props.utilName.toLowerCase().includes("queuer") && isEmpty, _v$11 = styles().actionDotOrange;
+				var _v$1 = styles().actionButton, _v$10 = utilNameLower.includes("batcher") && isEmptyFlag() || utilNameLower.includes("queuer") && isEmptyFlag(), _v$11 = styles().actionDotOrange;
 				_v$1 !== _p$.e && className(_el$1, _p$.e = _v$1);
 				_v$10 !== _p$.t && (_el$1.disabled = _p$.t = _v$10);
 				_v$11 !== _p$.a && className(_el$10, _p$.a = _v$11);
@@ -1038,11 +1056,11 @@ function ActionButtons(props) {
 		insert(_el$2, hasStartStop && (() => {
 			var _el$11 = _tmpl$3$1(), _el$12 = _el$11.firstChild;
 			_el$11.$$mousedown = () => {
-				if (isRunning) utilInstance.stop();
+				if (isRunning()) utilInstance.stop();
 				else utilInstance.start();
-				pacerEventClient$1.emit(emitName, utilInstance);
+				emitChange(emitName, utilInstance);
 			};
-			insert(_el$11, isRunning ? "Stop" : "Start", null);
+			insert(_el$11, () => isRunning() ? "Stop" : "Start", null);
 			effect((_p$) => {
 				var _v$12 = styles().actionButton, _v$13 = styles().actionDotPurple;
 				_v$12 !== _p$.e && className(_el$11, _p$.e = _v$12);
@@ -1063,56 +1081,46 @@ delegateEvents(["mousedown"]);
 //#region src/components/StateHeader.tsx
 var _tmpl$$2 = /* @__PURE__ */ template(`<div><div></div><div style=display:flex;align-items:center;gap:16px><div><div>Key</div><div></div><div>Last Updated</div><div> (<!>)</div></div><div style=margin-left:auto;font-weight:bold>% reduction`);
 dayjs.extend(relativeTime);
-function StateHeader(props) {
-	const styles = useStyles();
-	const [now, setNow] = createSignal(Date.now());
-	onMount(() => {
-		const interval = setInterval(() => {
-			setNow(Date.now());
-		}, 1e3);
-		onCleanup(() => {
-			clearInterval(interval);
-		});
-	});
-	const entry = props.selectedInstance();
-	if (!entry) return null;
-	const key = entry.instance.key;
-	const updatedAt = props.utilState().lastUpdatedByKey[key] ?? Date.now();
+function reductionFromState(entry, state) {
+	if (!state) return 0;
+	const completedExecutions = entry.type.toLowerCase().includes("async") ? Number(state.settleCount) || 0 : Number(state.executionCount) || 0;
+	if (entry.type.toLowerCase().includes("batcher")) {
+		const totalItemsProcessed = Number(state.totalItemsProcessed) || 0;
+		if (totalItemsProcessed === 0) return 0;
+		return Math.round((totalItemsProcessed - completedExecutions) / totalItemsProcessed * 100);
+	}
+	let requestCount = 0;
+	if (state.maybeExecuteCount !== void 0) requestCount = Number(state.maybeExecuteCount) || 0;
+	else if (state.addItemCount !== void 0) requestCount = Number(state.addItemCount) || 0;
+	else return 0;
+	if (requestCount === 0) return 0;
+	const reduction = requestCount - completedExecutions;
+	return Math.round(reduction / requestCount * 100);
+}
+function StateHeaderInner(props) {
+	const key = props.entry.instance.key;
+	const updatedAt = () => props.utilState().lastUpdatedByKey[key] ?? Date.now();
 	const getRelativeTime = () => {
-		const diffMs = now() - updatedAt;
+		const at = updatedAt();
+		const diffMs = props.now() - at;
 		const diffSeconds = Math.floor(diffMs / 1e3);
 		if (diffSeconds < 60) return `${diffSeconds} second${diffSeconds !== 1 ? "s" : ""} ago`;
-		return dayjs(updatedAt).fromNow();
+		return dayjs(at).fromNow();
 	};
-	const getReductionPercentage = () => {
-		const state = entry.instance.store?.state || entry.instance.state;
-		if (!state) return 0;
-		const completedExecutions = entry.type.toLowerCase().includes("async") ? state.settleCount || 0 : state.executionCount || 0;
-		if (entry.type.toLowerCase().includes("batcher")) {
-			const totalItemsProcessed = state.totalItemsProcessed || 0;
-			if (totalItemsProcessed === 0) return 0;
-			return Math.round((totalItemsProcessed - completedExecutions) / totalItemsProcessed * 100);
-		}
-		let requestCount = 0;
-		if (state.maybeExecuteCount !== void 0) requestCount = state.maybeExecuteCount;
-		else if (state.addItemCount !== void 0) requestCount = state.addItemCount;
-		else return 0;
-		if (requestCount === 0) return 0;
-		const reduction = requestCount - completedExecutions;
-		return Math.round(reduction / requestCount * 100);
-	};
-	const reductionPercentage = getReductionPercentage();
+	const store = props.entry.instance?.store;
+	const stateAccessor = isPacerUtilTanStackStore(store) ? useStore(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}) : () => getPacerUtilStoreState(props.entry.instance);
+	const reductionPercentage = () => reductionFromState(props.entry, stateAccessor());
 	return (() => {
 		var _el$ = _tmpl$$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
 		_el$1.nextSibling;
 		var _el$10 = _el$4.nextSibling, _el$11 = _el$10.firstChild;
-		insert(_el$2, () => entry.type);
+		insert(_el$2, () => props.entry.type);
 		insert(_el$6, key);
-		insert(_el$8, () => new Date(updatedAt).toLocaleTimeString(), _el$9);
+		insert(_el$8, () => new Date(updatedAt()).toLocaleTimeString(), _el$9);
 		insert(_el$8, getRelativeTime, _el$1);
 		insert(_el$10, reductionPercentage, _el$11);
 		effect((_p$) => {
-			var _v$ = styles().stateHeader, _v$2 = styles().stateTitle, _v$3 = styles().infoGrid, _v$4 = styles().infoLabel, _v$5 = styles().infoValueMono, _v$6 = styles().infoLabel, _v$7 = styles().infoValueMono, _v$8 = styles().infoValueMono;
+			var _v$ = props.styles.stateHeader, _v$2 = props.styles.stateTitle, _v$3 = props.styles.infoGrid, _v$4 = props.styles.infoLabel, _v$5 = props.styles.infoValueMono, _v$6 = props.styles.infoLabel, _v$7 = props.styles.infoValueMono, _v$8 = props.styles.infoValueMono;
 			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
 			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
 			_v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
@@ -1135,9 +1143,57 @@ function StateHeader(props) {
 		return _el$;
 	})();
 }
+function StateHeader(props) {
+	const styles = useStyles();
+	const [now, setNow] = createSignal(Date.now());
+	onMount(() => {
+		const interval = setInterval(() => {
+			setNow(Date.now());
+		}, 1e3);
+		onCleanup(() => {
+			clearInterval(interval);
+		});
+	});
+	return createComponent(Show, {
+		get when() {
+			return props.selectedInstance();
+		},
+		children: (entry) => createComponent(StateHeaderInner, {
+			get entry() {
+				return entry();
+			},
+			get styles() {
+				return styles();
+			},
+			now,
+			get utilState() {
+				return props.utilState;
+			}
+		})
+	});
+}
+//#endregion
+//#region src/components/UtilStateJsonTree.tsx
+/**
+* Subscribes to the util's TanStack Store so the tree updates live (same
+* idea as {@link UtilList} status). A plain snapshot would only refresh when the
+* devtools shell re-renders, which does not happen on nested store updates.
+*/
+function UtilStateJsonTree(props) {
+	const store = props.instance?.store;
+	if (isPacerUtilTanStackStore(store)) {
+		const snapshot = useStore(store, (s) => s);
+		return createComponent(JsonTree, { get value() {
+			return snapshot();
+		} });
+	}
+	return createComponent(JsonTree, { get value() {
+		return getPacerUtilStoreState(props.instance);
+	} });
+}
 //#endregion
 //#region src/components/DetailsPanel.tsx
-var _tmpl$$1 = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>Select a util from the left panel to view its state`), _tmpl$3 = /* @__PURE__ */ template(`<div><div><div>Actions</div></div><div><div>State</div><div></div></div><div><div>Options</div><div>`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<div>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div>Select a util from the left panel to view its state`), _tmpl$3 = /* @__PURE__ */ template(`<div><div><div>Actions</div></div><div><div>State</div><div></div></div><div><div>Options</div><div>`);
 function DetailsPanel(props) {
 	const styles = useStyles();
 	return (() => {
@@ -1145,7 +1201,7 @@ function DetailsPanel(props) {
 		insert(_el$, () => {
 			const entry = props.selectedInstance();
 			if (!entry) return (() => {
-				var _el$2 = _tmpl$2();
+				var _el$2 = _tmpl$2$1();
 				effect(() => className(_el$2, styles().noSelection));
 				return _el$2;
 			})();
@@ -1166,8 +1222,8 @@ function DetailsPanel(props) {
 						return entry.type;
 					}
 				}), null);
-				insert(_el$8, createComponent(JsonTree, { get value() {
-					return entry.instance.store?.state;
+				insert(_el$8, createComponent(UtilStateJsonTree, { get instance() {
+					return entry.instance;
 				} }));
 				insert(_el$1, createComponent(JsonTree, { get value() {
 					return entry.instance.options;
@@ -1204,7 +1260,18 @@ function DetailsPanel(props) {
 }
 //#endregion
 //#region src/components/Shell.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><div style=min-width:150px;max-width:800px></div><div></div><div style=flex:1><div>Details`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div style=min-width:150px;max-width:800px></div><div></div><div style=flex:1><div>Details`), _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function readResizeObserverBlockSize(entry) {
+	const [box] = entry.borderBoxSize;
+	if (box !== void 0) return box.blockSize;
+	return entry.contentRect.height;
+}
+/** Outer plugin slot from TanStack Devtools (not the inner React mount div, which can report a tiny height). */
+function resolvePluginHost(el) {
+	const byId = el.closest("[id^=\"plugin-container-\"]");
+	if (byId) return byId;
+	return el.parentElement?.parentElement?.parentElement ?? el.parentElement?.parentElement ?? el.parentElement;
+}
 function Shell() {
 	const styles = useStyles();
 	const state = usePacerDevtoolsState();
@@ -1212,6 +1279,8 @@ function Shell() {
 	const [selectedKey, setSelectedKey] = createSignal(null);
 	const [leftPanelWidth, setLeftPanelWidth] = createSignal(300);
 	const [isDragging, setIsDragging] = createSignal(false);
+	const [shellRootEl, setShellRootEl] = createSignal(null);
+	const [slotHeightPx, setSlotHeightPx] = createSignal(void 0);
 	const selectedInstance = createMemo(() => {
 		const key = selectedKey();
 		if (!key) return null;
@@ -1254,51 +1323,95 @@ function Shell() {
 		document.removeEventListener("mousemove", handleMouseMove);
 		document.removeEventListener("mouseup", handleMouseUp);
 	});
-	return createComponent(MainPanel, { get children() {
-		return [createComponent(Header, { get children() {
-			return createComponent(HeaderLogo, {
-				flavor: {
-					light: "#84cc16",
-					dark: "#84cc16"
-				},
-				children: "TanStack Pacer"
-			});
-		} }), (() => {
-			var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
-			insert(_el$2, createComponent(UtilList, {
-				selectedKey,
-				setSelectedKey,
-				utilState
-			}));
-			_el$3.$$mousedown = handleMouseDown;
-			insert(_el$4, createComponent(DetailsPanel, {
-				selectedInstance,
-				utilState
-			}), null);
-			effect((_p$) => {
-				var _v$ = styles().mainContainer, _v$2 = styles().leftPanel, _v$3 = `${leftPanelWidth()}px`, _v$4 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$5 = styles().rightPanel, _v$6 = styles().panelHeader;
-				_v$ !== _p$.e && className(_el$, _p$.e = _v$);
-				_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-				_v$3 !== _p$.a && setStyleProperty(_el$2, "width", _p$.a = _v$3);
-				_v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
-				_v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
-				_v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0,
-				o: void 0,
-				i: void 0,
-				n: void 0
-			});
-			return _el$;
-		})()];
-	} });
+	/**
+	* TanStack Devtools plugin slots use height: 100% without min-height: 0 on flex
+	* ancestors, so percentage height often never constrains our tree. Observing the
+	* outer `plugin-container-*` host (not the immediate React mount wrapper) and
+	* setting an explicit pixel height makes inner overflow-y regions scroll without
+	* capping to the mount div’s collapsed height.
+	*/
+	createEffect(() => {
+		const el = shellRootEl();
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const pluginSlot = resolvePluginHost(el);
+		if (!pluginSlot) return;
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			const target = entry.target;
+			const h = target.clientHeight > 0 ? target.clientHeight : readResizeObserverBlockSize(entry);
+			if (h > 0) setSlotHeightPx(Math.round(h));
+		});
+		ro.observe(pluginSlot);
+		onCleanup(() => ro.disconnect());
+	});
+	return (() => {
+		var _el$ = _tmpl$2();
+		use(setShellRootEl, _el$);
+		insert(_el$, createComponent(MainPanel, {
+			get ["class"]() {
+				return styles().mainPanelShell;
+			},
+			get children() {
+				return [createComponent(Header, { get children() {
+					return createComponent(HeaderLogo, {
+						flavor: {
+							light: "#84cc16",
+							dark: "#84cc16"
+						},
+						children: "TanStack Pacer"
+					});
+				} }), (() => {
+					var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild;
+					insert(_el$3, createComponent(UtilList, {
+						selectedKey,
+						setSelectedKey,
+						utilState
+					}));
+					_el$4.$$mousedown = handleMouseDown;
+					insert(_el$5, createComponent(DetailsPanel, {
+						selectedInstance,
+						utilState
+					}), null);
+					effect((_p$) => {
+						var _v$ = styles().mainContainer, _v$2 = styles().leftPanel, _v$3 = `${leftPanelWidth()}px`, _v$4 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$5 = styles().rightPanel, _v$6 = styles().panelHeader;
+						_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+						_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+						_v$3 !== _p$.a && setStyleProperty(_el$3, "width", _p$.a = _v$3);
+						_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+						_v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+						_v$6 !== _p$.n && className(_el$6, _p$.n = _v$6);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0
+					});
+					return _el$2;
+				})()];
+			}
+		}));
+		effect((_p$) => {
+			var _v$7 = styles().shellRoot, _v$8 = { ...slotHeightPx() !== void 0 ? {
+				height: `${slotHeightPx()}px`,
+				"max-height": `${slotHeightPx()}px`
+			} : {} };
+			_v$7 !== _p$.e && className(_el$, _p$.e = _v$7);
+			_p$.t = style(_el$, _v$8, _p$.t);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
 }
 delegateEvents(["mousedown"]);
 //#endregion
-//#region src/PacerDevtools.tsx
+//#region src/components/index.tsx
 function PacerDevtools(props) {
 	return createComponent(ThemeContextProvider, {
 		get theme() {