@kontsedal/olas-devtools 0.0.1-rc.0

package/dist/index.cjs

@@ -0,0 +1,1922 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let _kontsedal_olas_react = require("@kontsedal/olas-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _kontsedal_olas_core = require("@kontsedal/olas-core");
+//#region src/format.ts
+/**
+* Render a payload (props, vars, result, etc.) as a single-line string for
+* the panel. Cuts at `maxLen` so a giant blob doesn't blow up the layout.
+*/
+function formatPayload(value, maxLen = 200) {
+	if (value === void 0) return "undefined";
+	if (value === null) return "null";
+	if (typeof value === "function") return "[fn]";
+	let s;
+	try {
+		s = JSON.stringify(value, replaceUnserializable);
+	} catch {
+		s = String(value);
+	}
+	if (s === void 0) s = String(value);
+	return s.length > maxLen ? `${s.slice(0, maxLen)}…` : s;
+}
+function replaceUnserializable(_key, value) {
+	if (typeof value === "function") return "[fn]";
+	if (typeof value === "bigint") return value.toString();
+	if (value instanceof Error) return {
+		name: value.name,
+		message: value.message
+	};
+	return value;
+}
+/** Render an HH:MM:SS.mmm timestamp from epoch ms. */
+function formatTime(t) {
+	const d = new Date(t);
+	const pad = (n, w = 2) => n.toString().padStart(w, "0");
+	return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+}
+/** Render a controller path / query key as a compact string. */
+function formatPath(path) {
+	if (path.length === 0) return "∅";
+	return path.map((p) => String(p)).join(" › ");
+}
+//#endregion
+//#region src/JsonView.tsx
+function JsonView({ value, depth = 0 }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
+		value,
+		depth,
+		initiallyOpen: depth === 0
+	});
+}
+function Render({ value, depth, initiallyOpen }) {
+	if (value === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "olas-devtools-json-null",
+		children: "null"
+	});
+	if (value === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "olas-devtools-json-null",
+		children: "undefined"
+	});
+	const t = typeof value;
+	if (t === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "olas-devtools-json-string",
+		children: [
+			"\"",
+			value,
+			"\""
+		]
+	});
+	if (t === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "olas-devtools-json-number",
+		children: String(value)
+	});
+	if (t === "boolean") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "olas-devtools-json-boolean",
+		children: String(value)
+	});
+	if (t === "bigint") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "olas-devtools-json-number",
+		children: [String(value), "n"]
+	});
+	if (value instanceof Error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "olas-devtools-json-error",
+		children: [
+			value.name,
+			"(",
+			JSON.stringify(value.message),
+			")"
+		]
+	});
+	if (Array.isArray(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleArray, {
+		value,
+		depth,
+		initiallyOpen
+	});
+	if (t === "object") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleObject, {
+		value,
+		depth,
+		initiallyOpen
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: String(value) });
+}
+function CollapsibleArray({ value, depth, initiallyOpen }) {
+	const [open, setOpen] = (0, react.useState)(initiallyOpen && value.length <= 12);
+	if (value.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "olas-devtools-json-bracket",
+		children: "[]"
+	});
+	if (!open) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		className: "olas-devtools-json-toggle",
+		onClick: () => setOpen(true),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-bracket",
+				children: "["
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "olas-devtools-json-summary",
+				children: [
+					value.length,
+					" item",
+					value.length === 1 ? "" : "s"
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-bracket",
+				children: "]"
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "olas-devtools-json-block",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "olas-devtools-json-toggle olas-devtools-json-toggle-open",
+				onClick: () => setOpen(false),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "olas-devtools-json-bracket",
+					children: "["
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-children",
+				children: value.map((item, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "olas-devtools-json-row",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "olas-devtools-json-index",
+						children: [idx, ":"]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
+						value: item,
+						depth: depth + 1,
+						initiallyOpen: false
+					})]
+				}, idx))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-bracket",
+				children: "]"
+			})
+		]
+	});
+}
+function CollapsibleObject({ value, depth, initiallyOpen }) {
+	const keys = Object.keys(value);
+	const [open, setOpen] = (0, react.useState)(initiallyOpen && keys.length <= 8);
+	if (keys.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "olas-devtools-json-bracket",
+		children: "{}"
+	});
+	if (!open) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		className: "olas-devtools-json-toggle",
+		onClick: () => setOpen(true),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-bracket",
+				children: "{"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "olas-devtools-json-summary",
+				children: [keys.slice(0, 3).join(", "), keys.length > 3 ? ` +${keys.length - 3}` : ""]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-bracket",
+				children: "}"
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "olas-devtools-json-block",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "olas-devtools-json-toggle olas-devtools-json-toggle-open",
+				onClick: () => setOpen(false),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "olas-devtools-json-bracket",
+					children: "{"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-children",
+				children: keys.map((k) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "olas-devtools-json-row",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "olas-devtools-json-key",
+						children: [k, ":"]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
+						value: value[k],
+						depth: depth + 1,
+						initiallyOpen: false
+					})]
+				}, k))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-json-bracket",
+				children: "}"
+			})
+		]
+	});
+}
+/**
+* Subscribes to a root's `__debug` bus and maintains live state for the
+* devtools panel. Exposes signals so the React layer can consume via
+* `@kontsedal/olas-react`'s `use()`.
+*
+* Pure logic — no DOM, no React. Construct one per root.
+*/
+var DevtoolsStore = class {
+	tree$ = (0, _kontsedal_olas_core.signal)(makeRoot());
+	cache$ = (0, _kontsedal_olas_core.signal)([]);
+	mutations$ = (0, _kontsedal_olas_core.signal)([]);
+	fields$ = (0, _kontsedal_olas_core.signal)([]);
+	maxEntries;
+	now;
+	nextId = 1;
+	/** Keyed by `path|name` so a mutation:run can be paired with its
+	*  success/error to compute duration. Cleared after pairing. */
+	mutationStarts = /* @__PURE__ */ new Map();
+	constructor(options) {
+		this.maxEntries = options?.maxEntries ?? 100;
+		this.now = options?.now ?? (() => Date.now());
+	}
+	/**
+	* Subscribe to the given root's debug bus. Returns the unsubscribe. The
+	* caller (typically the React component) is responsible for invoking it
+	* on unmount.
+	*/
+	attach(root) {
+		return root.__debug.subscribe((event) => this.handle(event));
+	}
+	/** Apply one event. Exposed for tests. */
+	handle(event) {
+		switch (event.type) {
+			case "controller:constructed":
+				this.tree$.set(insertNode(this.tree$.peek(), event.path, event.props));
+				return;
+			case "controller:suspended":
+				this.tree$.set(setNodeState(this.tree$.peek(), event.path, "suspended"));
+				return;
+			case "controller:resumed":
+				this.tree$.set(setNodeState(this.tree$.peek(), event.path, "active"));
+				return;
+			case "controller:disposed":
+				this.tree$.set(setNodeState(this.tree$.peek(), event.path, "disposed"));
+				return;
+			case "cache:subscribed":
+				this.pushCache({
+					kind: "subscribed",
+					queryKey: event.queryKey,
+					subscriberPath: event.subscriberPath
+				});
+				return;
+			case "cache:fetch-start":
+				this.pushCache({
+					kind: "fetch-start",
+					queryKey: event.queryKey
+				});
+				return;
+			case "cache:fetch-success":
+				this.pushCache({
+					kind: "fetch-success",
+					queryKey: event.queryKey,
+					durationMs: event.durationMs
+				});
+				return;
+			case "cache:fetch-error":
+				this.pushCache({
+					kind: "fetch-error",
+					queryKey: event.queryKey,
+					durationMs: event.durationMs,
+					error: event.error
+				});
+				return;
+			case "cache:invalidated":
+				this.pushCache({
+					kind: "invalidated",
+					queryKey: event.queryKey
+				});
+				return;
+			case "cache:gc":
+				this.pushCache({
+					kind: "gc",
+					queryKey: event.queryKey
+				});
+				return;
+			case "mutation:run":
+				this.mutationStarts.set(mutationKey(event.path, event.name), this.now());
+				this.pushMutation({
+					kind: "run",
+					path: event.path,
+					name: event.name,
+					vars: event.vars
+				});
+				return;
+			case "mutation:success": {
+				const durationMs = this.consumeStart(event.path, event.name);
+				this.pushMutation({
+					kind: "success",
+					path: event.path,
+					name: event.name,
+					result: event.result,
+					...durationMs !== void 0 ? { durationMs } : {}
+				});
+				return;
+			}
+			case "mutation:error": {
+				const durationMs = this.consumeStart(event.path, event.name);
+				this.pushMutation({
+					kind: "error",
+					path: event.path,
+					name: event.name,
+					error: event.error,
+					...durationMs !== void 0 ? { durationMs } : {}
+				});
+				return;
+			}
+			case "mutation:rollback":
+				this.pushMutation({
+					kind: "rollback",
+					path: event.path,
+					name: event.name
+				});
+				return;
+			case "field:validated":
+				this.pushField({
+					path: event.path,
+					field: event.field,
+					valid: event.valid,
+					errors: event.errors
+				});
+				return;
+		}
+	}
+	/** Clear every log. Tree state is preserved — the live tree is not a log. */
+	clearLogs() {
+		this.cache$.set([]);
+		this.mutations$.set([]);
+		this.fields$.set([]);
+	}
+	pushCache(entry) {
+		const full = {
+			id: this.nextId++,
+			t: this.now(),
+			...entry
+		};
+		this.cache$.set(appendBounded(this.cache$.peek(), full, this.maxEntries));
+	}
+	pushMutation(entry) {
+		const full = {
+			id: this.nextId++,
+			t: this.now(),
+			...entry
+		};
+		this.mutations$.set(appendBounded(this.mutations$.peek(), full, this.maxEntries));
+	}
+	pushField(entry) {
+		const full = {
+			id: this.nextId++,
+			t: this.now(),
+			...entry
+		};
+		this.fields$.set(appendBounded(this.fields$.peek(), full, this.maxEntries));
+	}
+	consumeStart(path, name) {
+		const key = mutationKey(path, name);
+		const startedAt = this.mutationStarts.get(key);
+		if (startedAt === void 0) return void 0;
+		this.mutationStarts.delete(key);
+		return this.now() - startedAt;
+	}
+};
+function mutationKey(path, name) {
+	return `${path.join(">")}#${name ?? ""}`;
+}
+function makeRoot() {
+	return {
+		path: [],
+		state: "active",
+		props: void 0,
+		children: []
+	};
+}
+function appendBounded(arr, item, max) {
+	const next = arr.length >= max ? arr.slice(arr.length - max + 1) : arr.slice();
+	next.push(item);
+	return next;
+}
+/**
+* Insert (or update) a node at `path` inside the tree. Auto-creates any
+* missing intermediate ancestors as 'active' placeholders — needed if the
+* subscriber attached after the root was constructed.
+*
+* Returns a NEW tree object (immutable update).
+*/
+function insertNode(root, path, props) {
+	if (path.length === 0) return {
+		...root,
+		state: "active",
+		props
+	};
+	return cloneWithUpsert(root, path, 0, props);
+}
+function cloneWithUpsert(node, path, depth, props) {
+	if (depth === path.length) return {
+		...node,
+		state: "active",
+		props
+	};
+	const segment = path[depth];
+	const idx = node.children.findIndex((c) => c.path[c.path.length - 1] === segment);
+	const childPath = path.slice(0, depth + 1);
+	if (idx === -1) {
+		const newChild = cloneWithUpsert({
+			path: childPath,
+			state: "active",
+			props: void 0,
+			children: []
+		}, path, depth + 1, props);
+		return {
+			...node,
+			children: [...node.children, newChild]
+		};
+	}
+	const existing = node.children[idx];
+	const updatedChild = cloneWithUpsert(existing, path, depth + 1, props);
+	const nextChildren = node.children.slice();
+	nextChildren[idx] = updatedChild;
+	return {
+		...node,
+		children: nextChildren
+	};
+}
+/**
+* Set `state` on the node at `path`. If the node doesn't exist (out-of-order
+* event delivery), the tree is returned unchanged.
+*/
+function setNodeState(root, path, state) {
+	if (path.length === 0) return {
+		...root,
+		state
+	};
+	return setStateAt(root, path, 0, state) ?? root;
+}
+function setStateAt(node, path, depth, state) {
+	if (depth === path.length) return {
+		...node,
+		state
+	};
+	const segment = path[depth];
+	const idx = node.children.findIndex((c) => c.path[c.path.length - 1] === segment);
+	if (idx === -1) return null;
+	const existing = node.children[idx];
+	const updatedChild = setStateAt(existing, path, depth + 1, state);
+	if (updatedChild === null) return null;
+	const nextChildren = node.children.slice();
+	nextChildren[idx] = updatedChild;
+	return {
+		...node,
+		children: nextChildren
+	};
+}
+//#endregion
+//#region src/styles.ts
+/**
+* Inline CSS for the devtools panel. Scoped to the `.olas-devtools-*` class
+* prefix so it doesn't bleed into the host app. Honors `prefers-color-scheme`
+* and accepts host palette overrides via `--olas-*` custom properties.
+*/
+const DEVTOOLS_CSS = `
+.olas-devtools {
+  container-type: inline-size;
+  --olas-bg:           #ffffff;
+  --olas-fg:           #1f2330;
+  --olas-muted:        #6b7280;
+  --olas-soft:         #f5f6f9;
+  --olas-soft-2:       #eef0f4;
+  --olas-accent:       #4f46e5;
+  --olas-accent-soft:  rgba(79,70,229,0.10);
+  --olas-success:      #1e8a3d;
+  --olas-success-soft: rgba(30,138,61,0.12);
+  --olas-warn:         #ad6800;
+  --olas-warn-soft:    rgba(173,104,0,0.12);
+  --olas-error:        #b8361f;
+  --olas-error-soft:   rgba(184,54,31,0.12);
+  --olas-border:       #e6e6ea;
+  --olas-border-soft:  #eeeef2;
+  --olas-row-alt:      #fafafc;
+
+  /* JSON viewer colors */
+  --olas-json-key:     #7a4ab8;
+  --olas-json-string:  #1e8a3d;
+  --olas-json-number:  #b25400;
+  --olas-json-boolean: #4f46e5;
+  --olas-json-null:    #9aa0aa;
+  --olas-json-bracket: #6b7280;
+  --olas-json-summary: #6b7280;
+
+  font-family: -apple-system, BlinkMacSystemFont, "Inter var", "Inter", "Segoe UI", system-ui, sans-serif;
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--olas-fg);
+  background: var(--olas-bg);
+  border: 1px solid var(--olas-border);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 320px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.olas-devtools *,
+.olas-devtools *::before,
+.olas-devtools *::after { box-sizing: border-box; }
+
+@media (prefers-color-scheme: dark) {
+  .olas-devtools {
+    --olas-bg:           #15171e;
+    --olas-fg:           #e8ebf2;
+    --olas-muted:        #97a0b3;
+    --olas-soft:         #1d2029;
+    --olas-soft-2:       #232733;
+    --olas-accent:       #8b86f0;
+    --olas-accent-soft:  rgba(139,134,240,0.18);
+    --olas-success:      #4ade80;
+    --olas-success-soft: rgba(74,222,128,0.16);
+    --olas-warn:         #f5b740;
+    --olas-warn-soft:    rgba(245,183,64,0.16);
+    --olas-error:        #ef6b53;
+    --olas-error-soft:   rgba(239,107,83,0.16);
+    --olas-border:       #2a2e3a;
+    --olas-border-soft:  #20232c;
+    --olas-row-alt:      #1a1d25;
+
+    --olas-json-key:     #c39bff;
+    --olas-json-string:  #7ee79d;
+    --olas-json-number:  #f5b740;
+    --olas-json-boolean: #8b86f0;
+    --olas-json-null:    #7c8090;
+    --olas-json-bracket: #97a0b3;
+    --olas-json-summary: #97a0b3;
+  }
+}
+
+/* ---- tabs ------------------------------------------------------------- */
+.olas-devtools-tabs {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  border-bottom: 1px solid var(--olas-border);
+  background: var(--olas-soft);
+  padding: 0 8px;
+  flex-shrink: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.olas-devtools-tabs::-webkit-scrollbar { display: none; }
+.olas-devtools-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 10px 8px;
+  background: transparent;
+  color: var(--olas-muted);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 500;
+  font-size: 12px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: color 80ms, border-color 80ms;
+}
+.olas-devtools-tab-label-full { display: inline; }
+.olas-devtools-tab-label-short { display: none; }
+@container (max-width: 480px) {
+  .olas-devtools-tab { padding: 9px 8px 8px; font-size: 11.5px; gap: 4px; }
+  .olas-devtools-tab-label-full { display: none; }
+  .olas-devtools-tab-label-short { display: inline; }
+  .olas-devtools-pause-text,
+  .olas-devtools-clear-text { display: none; }
+}
+.olas-devtools-tab:hover { color: var(--olas-fg); }
+.olas-devtools-tab[aria-selected="true"] {
+  color: var(--olas-fg);
+  border-bottom-color: var(--olas-accent);
+}
+.olas-devtools-tab[aria-selected="true"] .olas-devtools-tab-count {
+  background: var(--olas-accent-soft);
+  color: var(--olas-accent);
+}
+.olas-devtools-tab-count {
+  min-width: 18px;
+  padding: 0 6px;
+  height: 16px;
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--olas-fg) 8%, transparent);
+  color: var(--olas-muted);
+  font-size: 10.5px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.olas-devtools-pause,
+.olas-devtools-clear {
+  padding: 4px 10px;
+  background: transparent;
+  color: var(--olas-muted);
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11.5px;
+  align-self: center;
+}
+.olas-devtools-pause { margin-left: auto; }
+.olas-devtools-pause:hover,
+.olas-devtools-clear:hover {
+  color: var(--olas-fg);
+  background: color-mix(in oklch, var(--olas-bg) 60%, transparent);
+}
+.olas-devtools-pause-on { color: var(--olas-warn); background: var(--olas-warn-soft); }
+.olas-devtools-pause-on:hover { color: var(--olas-warn); }
+.olas-devtools-clear-icon { display: none; }
+@container (max-width: 480px) {
+  .olas-devtools-clear-text { display: none; }
+  .olas-devtools-clear-icon { display: inline; }
+  .olas-devtools-pause, .olas-devtools-clear { padding: 4px 8px; }
+}
+
+/* ---- filter ---------------------------------------------------------- */
+.olas-devtools-filter {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--olas-border-soft);
+  background: var(--olas-bg);
+}
+.olas-devtools-filter input {
+  flex: 1;
+  padding: 5px 9px;
+  border: 1px solid var(--olas-border);
+  border-radius: 6px;
+  background: var(--olas-soft);
+  color: var(--olas-fg);
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+  transition: border-color 80ms, box-shadow 80ms;
+}
+.olas-devtools-filter input:focus {
+  border-color: var(--olas-accent);
+  box-shadow: 0 0 0 2px var(--olas-accent-soft);
+}
+.olas-devtools-filter input::placeholder { color: var(--olas-muted); }
+.olas-devtools-filter button {
+  background: transparent;
+  border: 0;
+  color: var(--olas-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  padding: 2px 6px;
+}
+.olas-devtools-filter button:hover { color: var(--olas-fg); }
+
+/* ---- body ------------------------------------------------------------ */
+.olas-devtools-body {
+  flex: 1;
+  overflow: auto;
+}
+
+/* ---- list rows ------------------------------------------------------- */
+.olas-devtools-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.olas-devtools-list li {
+  border-bottom: 1px solid var(--olas-border-soft);
+  display: flex;
+  flex-direction: column;
+}
+.olas-devtools-list li:last-child { border-bottom: none; }
+.olas-devtools-list li:hover { background: var(--olas-row-alt); }
+
+.olas-devtools-row-top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  min-height: 32px;
+}
+.olas-devtools-row-clickable .olas-devtools-row-top { cursor: pointer; user-select: none; }
+
+.olas-devtools-target {
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px;
+  color: var(--olas-fg);
+  word-break: break-word;
+  min-width: 0;
+}
+.olas-devtools-target strong { font-weight: 600; color: var(--olas-accent); }
+.olas-devtools-time {
+  color: var(--olas-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.olas-devtools-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--olas-muted);
+  font-size: 12px;
+  width: 16px;
+  height: 16px;
+  transition: transform 100ms;
+  user-select: none;
+}
+.olas-devtools-chevron-open { transform: rotate(90deg); color: var(--olas-fg); }
+
+.olas-devtools-kind {
+  color: var(--olas-accent);
+  background: var(--olas-accent-soft);
+  border-radius: 4px;
+  padding: 1px 7px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+}
+.olas-devtools-kind-success { color: var(--olas-success); background: var(--olas-success-soft); }
+.olas-devtools-kind-error   { color: var(--olas-error);   background: var(--olas-error-soft); }
+.olas-devtools-kind-warn,
+.olas-devtools-kind-rollback { color: var(--olas-warn); background: var(--olas-warn-soft); }
+.olas-devtools-duration {
+  color: var(--olas-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  background: var(--olas-soft);
+  border-radius: 4px;
+  padding: 1px 6px;
+  white-space: nowrap;
+}
+
+.olas-devtools-payload {
+  margin: 0 12px 10px;
+  padding: 8px 10px;
+  background: var(--olas-soft);
+  border: 1px solid var(--olas-border-soft);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px;
+  color: var(--olas-fg);
+  overflow-x: auto;
+}
+.olas-devtools-payload-inline {
+  margin-top: -4px;
+  padding: 4px 10px;
+  background: transparent;
+  border: 0;
+  color: var(--olas-muted);
+  font-size: 11px;
+}
+.olas-devtools-payload-json { line-height: 1.5; }
+
+/* ---- JSON viewer ----------------------------------------------------- */
+.olas-devtools-json-row {
+  display: block;
+  padding-left: 14px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.olas-devtools-json-children {
+  display: block;
+  border-left: 1px dashed var(--olas-border);
+  margin-left: 4px;
+}
+.olas-devtools-json-block {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+}
+.olas-devtools-json-key {
+  color: var(--olas-json-key);
+  margin-right: 6px;
+  font-weight: 500;
+}
+.olas-devtools-json-index {
+  color: var(--olas-json-bracket);
+  margin-right: 6px;
+}
+.olas-devtools-json-string { color: var(--olas-json-string); }
+.olas-devtools-json-number { color: var(--olas-json-number); }
+.olas-devtools-json-boolean { color: var(--olas-json-boolean); }
+.olas-devtools-json-null { color: var(--olas-json-null); font-style: italic; }
+.olas-devtools-json-bracket { color: var(--olas-json-bracket); }
+.olas-devtools-json-error { color: var(--olas-error); }
+.olas-devtools-json-summary {
+  color: var(--olas-json-summary);
+  font-style: italic;
+  margin: 0 4px;
+}
+.olas-devtools-json-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+}
+.olas-devtools-json-toggle:hover { background: var(--olas-accent-soft); border-radius: 3px; }
+
+/* ---- empty state ---------------------------------------------------- */
+.olas-devtools-empty {
+  padding: 36px 24px;
+  text-align: center;
+  color: var(--olas-muted);
+}
+.olas-devtools-empty-title {
+  color: var(--olas-fg);
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+.olas-devtools-empty-hint {
+  font-size: 12px;
+  max-width: 320px;
+  margin: 0 auto;
+  line-height: 1.55;
+}
+
+/* ---- tree ------------------------------------------------------------ */
+.olas-devtools-tree { padding: 10px 12px; }
+.olas-devtools-tree-node {
+  padding: 1px 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+.olas-devtools-tree-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 1px 0;
+}
+.olas-devtools-tree-name { color: var(--olas-fg); font-weight: 500; }
+.olas-devtools-tree-state-active,
+.olas-devtools-tree-state-suspended,
+.olas-devtools-tree-state-disposed {
+  border-radius: 4px;
+  padding: 0 6px;
+  font-size: 9.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.olas-devtools-tree-state-active {
+  color: var(--olas-success);
+  background: var(--olas-success-soft);
+}
+.olas-devtools-tree-state-suspended {
+  color: var(--olas-warn);
+  background: var(--olas-warn-soft);
+}
+.olas-devtools-tree-state-disposed {
+  color: var(--olas-muted);
+  background: color-mix(in oklch, var(--olas-fg) 8%, transparent);
+}
+.olas-devtools-tree-pending {
+  color: var(--olas-warn);
+  background: var(--olas-warn-soft);
+  border-radius: 4px;
+  padding: 0 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.olas-devtools-tree-props-toggle {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--olas-muted);
+  padding: 0 4px;
+  border-radius: 4px;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.olas-devtools-tree-props-toggle:hover {
+  color: var(--olas-fg);
+  background: var(--olas-soft);
+}
+.olas-devtools-tree-props {
+  margin: 4px 0 6px 8px;
+  padding: 6px 10px;
+  background: var(--olas-soft);
+  border: 1px solid var(--olas-border-soft);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  overflow-x: auto;
+}
+.olas-devtools-tree-children {
+  margin-left: 8px;
+  border-left: 1px dashed var(--olas-border);
+  padding-left: 10px;
+  margin-top: 2px;
+}
+
+/* ---- floating window + launcher ------------------------------------- */
+.olas-devtools-launcher {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 2147483645;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px 7px 11px;
+  background: #1f2330;
+  color: #e8ebf2;
+  border: 1px solid #2a2e3a;
+  border-radius: 999px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.18);
+  cursor: pointer;
+  font: inherit;
+  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+}
+.olas-devtools-launcher:hover { filter: brightness(1.1); }
+.olas-devtools-launcher-active { box-shadow: 0 0 0 2px rgba(139,134,240,0.5), 0 8px 24px rgba(0,0,0,0.18); }
+.olas-devtools-launcher-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #4ade80;
+  box-shadow: 0 0 6px rgba(74,222,128,0.7);
+}
+.olas-devtools-launcher-label { letter-spacing: 0.01em; }
+
+.olas-devtools-floating {
+  position: fixed;
+  z-index: 2147483646;
+  display: flex;
+  flex-direction: column;
+  background: var(--olas-bg, #ffffff);
+  color: var(--olas-fg, #1f2330);
+  border: 1px solid var(--olas-border, #e6e6ea);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 24px 64px rgba(0,0,0,0.18);
+  overflow: hidden;
+  /* Inherit the panel's own CSS vars when DevtoolsPanel is mounted inside. */
+}
+@media (prefers-color-scheme: dark) {
+  .olas-devtools-floating {
+    background: #15171e;
+    color: #e8ebf2;
+    border-color: #2a2e3a;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.5);
+  }
+}
+.olas-devtools-floating-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 30px;
+  padding: 0 8px 0 10px;
+  background: var(--olas-soft, #f5f6f9);
+  border-bottom: 1px solid var(--olas-border, #e6e6ea);
+  cursor: grab;
+  user-select: none;
+  flex-shrink: 0;
+}
+.olas-devtools-floating-header:active { cursor: grabbing; }
+.olas-devtools-floating-grip {
+  color: var(--olas-muted, #6b7280);
+  font-size: 14px;
+  line-height: 1;
+}
+.olas-devtools-floating-title {
+  flex: 1;
+  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--olas-fg, #1f2330);
+  letter-spacing: 0.01em;
+}
+.olas-devtools-floating-actions { display: inline-flex; gap: 2px; }
+.olas-devtools-floating-action {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  color: var(--olas-muted, #6b7280);
+  cursor: pointer;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+}
+.olas-devtools-floating-action:hover {
+  color: var(--olas-fg, #1f2330);
+  background: color-mix(in oklch, currentColor 14%, transparent);
+}
+.olas-devtools-floating-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+.olas-devtools-floating-body > .olas-devtools {
+  flex: 1;
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+}
+.olas-devtools-floating-resize {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+  background:
+    linear-gradient(135deg, transparent 0 7px, var(--olas-muted, #6b7280) 7px 8px, transparent 8px 10px,
+                            var(--olas-muted, #6b7280) 10px 11px, transparent 11px 100%);
+  opacity: 0.6;
+}
+.olas-devtools-floating-resize:hover { opacity: 1; }
+`;
+//#endregion
+//#region src/DevtoolsPanel.tsx
+/**
+* Drop-in devtools panel for an Olas root.
+*
+* Features:
+*  - **Tree** populated from the snapshot replay on mount (no lost events).
+*  - **Cache / Mutations / Fields** event logs in reverse chronological order.
+*  - **Filter** field per tab — text-matches kind, path, name, payload.
+*  - **Pause** toggle freezes the log without stopping ingestion.
+*  - **Click a row** to expand its payload from a truncated preview to the full
+*    JSON.
+*  - **Mutation durations** — `run → success/error` pairing surfaces elapsed ms.
+*
+* Styled inline (no CSS import needed) and scoped to the `.olas-devtools-*`
+* class prefix. Hosts override the palette via `--olas-*` custom properties.
+* Spec §13.
+*/
+function DevtoolsPanel(props) {
+	const { root, defaultTab = "tree", maxEntries, urlHashKey, inspectorPollMs = 800 } = props;
+	const store = (0, react.useMemo)(() => new DevtoolsStore(maxEntries !== void 0 ? { maxEntries } : void 0), [maxEntries]);
+	(0, react.useEffect)(() => store.attach(root), [root, store]);
+	const initial = (0, react.useMemo)(() => readUrlHash(urlHashKey, defaultTab), [urlHashKey, defaultTab]);
+	const [tab, setTab] = (0, react.useState)(initial.tab);
+	const [paused, setPaused] = (0, react.useState)(false);
+	const [filters, setFilters] = (0, react.useState)(initial.filters);
+	const filter = filters[tab];
+	const setFilter = (q) => setFilters((prev) => ({
+		...prev,
+		[tab]: q
+	}));
+	(0, react.useEffect)(() => {
+		if (urlHashKey === void 0) return;
+		writeUrlHash(urlHashKey, {
+			tab,
+			filters
+		});
+	}, [
+		urlHashKey,
+		tab,
+		filters
+	]);
+	const [cacheEntries, setCacheEntries] = (0, react.useState)([]);
+	const rootRef = (0, react.useRef)(root);
+	rootRef.current = root;
+	(0, react.useEffect)(() => {
+		if (tab !== "inspector") return;
+		const tick = () => setCacheEntries(rootRef.current.__debug.queryEntries());
+		tick();
+		const id = window.setInterval(tick, inspectorPollMs);
+		return () => window.clearInterval(id);
+	}, [tab, inspectorPollMs]);
+	const liveTree = (0, _kontsedal_olas_react.use)(store.tree$);
+	const liveCache = (0, _kontsedal_olas_react.use)(store.cache$);
+	const liveMutations = (0, _kontsedal_olas_react.use)(store.mutations$);
+	const liveFields = (0, _kontsedal_olas_react.use)(store.fields$);
+	const [frozen, setFrozen] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (paused) setFrozen({
+			tree: liveTree,
+			cache: liveCache,
+			mutations: liveMutations,
+			fields: liveFields
+		});
+		else setFrozen(null);
+	}, [paused]);
+	const tree = frozen?.tree ?? liveTree;
+	const cache = frozen?.cache ?? liveCache;
+	const mutations = frozen?.mutations ?? liveMutations;
+	const fields = frozen?.fields ?? liveFields;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "olas-devtools",
+		"data-testid": "olas-devtools",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: DEVTOOLS_CSS }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "olas-devtools-tabs",
+				role: "tablist",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
+						name: "tree",
+						current: tab,
+						setTab,
+						label: "Tree",
+						short: "Tree",
+						count: countLiveControllers(liveTree)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
+						name: "cache",
+						current: tab,
+						setTab,
+						label: "Cache",
+						short: "Cache",
+						count: liveCache.length
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
+						name: "inspector",
+						current: tab,
+						setTab,
+						label: "Inspector",
+						short: "Insp",
+						count: cacheEntries.length
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
+						name: "mutations",
+						current: tab,
+						setTab,
+						label: "Mutations",
+						short: "Mut",
+						count: liveMutations.length
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
+						name: "fields",
+						current: tab,
+						setTab,
+						label: "Fields",
+						short: "Fld",
+						count: liveFields.length
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						"aria-pressed": paused,
+						className: paused ? "olas-devtools-pause olas-devtools-pause-on" : "olas-devtools-pause",
+						onClick: () => setPaused(!paused),
+						title: paused ? "Resume live updates" : "Pause live updates",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							children: paused ? "▶" : "⏸"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "olas-devtools-pause-text",
+							children: paused ? " Resume" : " Pause"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						className: "olas-devtools-clear",
+						type: "button",
+						onClick: () => store.clearLogs(),
+						title: "Clear logs",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "olas-devtools-clear-text",
+							children: "Clear"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "olas-devtools-clear-icon",
+							"aria-hidden": "true",
+							children: "✕"
+						})]
+					})
+				]
+			}),
+			(tab === "cache" || tab === "inspector" || tab === "mutations" || tab === "fields") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "olas-devtools-filter",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "search",
+					value: filter,
+					placeholder: `Filter ${tab}…`,
+					onChange: (e) => setFilter(e.target.value)
+				}), filter !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => setFilter(""),
+					"aria-label": "Clear filter",
+					children: "✕"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "olas-devtools-body",
+				role: "tabpanel",
+				children: [
+					tab === "tree" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeView, {
+						tree,
+						mutations: liveMutations
+					}),
+					tab === "cache" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CacheView, {
+						entries: cache,
+						filter
+					}),
+					tab === "inspector" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InspectorView, {
+						entries: cacheEntries,
+						filter
+					}),
+					tab === "mutations" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MutationsView, {
+						entries: mutations,
+						filter
+					}),
+					tab === "fields" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsView, {
+						entries: fields,
+						filter
+					})
+				]
+			})
+		]
+	});
+}
+function Tab(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		role: "tab",
+		type: "button",
+		"aria-selected": props.current === props.name,
+		title: props.label,
+		className: "olas-devtools-tab",
+		onClick: () => props.setTab(props.name),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-tab-label-full",
+				children: props.label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-tab-label-short",
+				"aria-hidden": "true",
+				children: props.short
+			}),
+			props.count > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-tab-count",
+				"aria-hidden": "true",
+				children: props.count
+			})
+		]
+	});
+}
+function countLiveControllers(node) {
+	let total = node.state !== "disposed" ? 1 : 0;
+	for (const c of node.children) total += countLiveControllers(c);
+	return Math.max(total - 1, 0);
+}
+function TreeView({ tree, mutations }) {
+	if (tree.children.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No controllers yet",
+		hint: "The root hasn't constructed any controllers."
+	});
+	const pending = (0, react.useMemo)(() => rollupPending(mutations), [mutations]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "olas-devtools-tree",
+		children: tree.children.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
+			node: child,
+			pending
+		}, child.path.join("/")))
+	});
+}
+function rollupPending(entries) {
+	const inFlight = /* @__PURE__ */ new Map();
+	const out = /* @__PURE__ */ new Map();
+	for (const e of entries) {
+		const key = `${e.path.join(">")}#${e.name ?? ""}`;
+		const pathKey = e.path.join(">");
+		if (e.kind === "run") {
+			inFlight.set(key, (inFlight.get(key) ?? 0) + 1);
+			out.set(pathKey, (out.get(pathKey) ?? 0) + 1);
+		} else if (e.kind === "success" || e.kind === "error") {
+			const n = inFlight.get(key) ?? 0;
+			if (n > 0) inFlight.set(key, n - 1);
+			const p = out.get(pathKey) ?? 0;
+			if (p > 0) out.set(pathKey, p - 1);
+		}
+	}
+	return out;
+}
+function TreeNode({ node, pending }) {
+	const name = node.path[node.path.length - 1] ?? "?";
+	const stateClass = node.state === "suspended" ? "olas-devtools-tree-state-suspended" : node.state === "disposed" ? "olas-devtools-tree-state-disposed" : "olas-devtools-tree-state-active";
+	const pendingCount = pending.get(node.path.join(">")) ?? 0;
+	const propsPreview = (0, react.useMemo)(() => summarizeProps(node.props), [node.props]);
+	const [propsOpen, setPropsOpen] = (0, react.useState)(false);
+	const canExpandProps = node.props !== void 0 && node.props !== null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "olas-devtools-tree-node",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "olas-devtools-tree-row",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "olas-devtools-tree-name",
+						children: name
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: stateClass,
+						children: node.state
+					}),
+					pendingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "olas-devtools-tree-pending",
+						title: "pending mutations on this controller",
+						children: [pendingCount, " pending"]
+					}),
+					canExpandProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "olas-devtools-tree-props-toggle",
+						"aria-expanded": propsOpen,
+						onClick: () => setPropsOpen((v) => !v),
+						title: propsOpen ? "Hide props" : "Show full props",
+						children: propsPreview
+					})
+				]
+			}),
+			propsOpen && canExpandProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "olas-devtools-tree-props",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonView, { value: node.props })
+			}),
+			node.children.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "olas-devtools-tree-children",
+				children: node.children.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
+					node: child,
+					pending
+				}, child.path.join("/")))
+			})
+		]
+	});
+}
+/** Build a one-line props summary for the tree row. */
+function summarizeProps(props) {
+	if (props === null || props === void 0) return "";
+	if (typeof props === "string") return `"${truncate(props, 24)}"`;
+	if (typeof props === "number" || typeof props === "boolean") return String(props);
+	if (Array.isArray(props)) return `[${props.length}]`;
+	if (typeof props === "object") {
+		const keys = Object.keys(props);
+		if (keys.length === 0) return "{}";
+		return `{ ${keys.slice(0, 2).map((k) => {
+			const v = props[k];
+			return `${k}: ${shortValue(v)}`;
+		}).join(", ")}${keys.length > 2 ? `, +${keys.length - 2}` : ""} }`;
+	}
+	return String(props);
+}
+function shortValue(v) {
+	if (v === null) return "null";
+	if (v === void 0) return "undefined";
+	if (typeof v === "string") return `"${truncate(v, 16)}"`;
+	if (typeof v === "number" || typeof v === "boolean") return String(v);
+	if (Array.isArray(v)) return `[${v.length}]`;
+	if (typeof v === "object") return `{${Object.keys(v).length}}`;
+	return String(v);
+}
+function truncate(s, max) {
+	return s.length <= max ? s : `${s.slice(0, max - 1)}…`;
+}
+function InspectorView({ entries, filter }) {
+	const filtered = useFiltered(entries, filter, inspectorHaystack);
+	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No cache entries",
+		hint: "Subscribe to a query somewhere in the tree to see its data."
+	});
+	if (filtered.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No matches",
+		hint: `Nothing matches “${filter}”.`
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "olas-devtools-list",
+		children: filtered.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InspectorRow, { entry }, entry.key.join("|")))
+	});
+}
+function inspectorHaystack(e) {
+	return [
+		...e.key.map(String),
+		e.status,
+		safeStringify(e.data)
+	].join(" ");
+}
+function InspectorRow({ entry }) {
+	const kindClass = entry.status === "error" ? "olas-devtools-kind-error" : entry.status === "success" ? "olas-devtools-kind-success" : entry.status === "pending" ? "olas-devtools-kind-warn" : "";
+	const ageMs = entry.lastUpdatedAt != null ? Date.now() - entry.lastUpdatedAt : null;
+	const tags = [];
+	if (entry.isStale) tags.push("stale");
+	if (entry.isFetching) tags.push("fetching");
+	if (entry.hasPendingMutations) tags.push("optimistic");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+		kind: entry.status,
+		kindClass,
+		target: formatPath(entry.key),
+		t: entry.lastUpdatedAt ?? Date.now(),
+		payload: entry.error ?? entry.data,
+		suffix: [ageMs != null ? `${formatAge(ageMs)} ago` : "—", ...tags].join(" · ")
+	});
+}
+function safeStringify(v) {
+	try {
+		return JSON.stringify(v) ?? "";
+	} catch {
+		return String(v);
+	}
+}
+function formatAge(ms) {
+	if (ms < 1e3) return `${ms}ms`;
+	if (ms < 6e4) return `${Math.round(ms / 1e3)}s`;
+	if (ms < 36e5) return `${Math.round(ms / 6e4)}m`;
+	return `${Math.round(ms / 36e5)}h`;
+}
+function readUrlHash(key, defaultTab) {
+	const empty = {
+		tree: "",
+		cache: "",
+		inspector: "",
+		mutations: "",
+		fields: ""
+	};
+	if (key === void 0) return {
+		tab: defaultTab,
+		filters: empty
+	};
+	if (typeof window === "undefined") return {
+		tab: defaultTab,
+		filters: empty
+	};
+	try {
+		const raw = new URLSearchParams(window.location.hash.replace(/^#/, "")).get(key);
+		if (raw === null) return {
+			tab: defaultTab,
+			filters: empty
+		};
+		const parsed = JSON.parse(decodeURIComponent(raw));
+		return {
+			tab: parsed.tab ?? defaultTab,
+			filters: {
+				...empty,
+				...parsed.filters ?? {}
+			}
+		};
+	} catch {
+		return {
+			tab: defaultTab,
+			filters: empty
+		};
+	}
+}
+function writeUrlHash(key, state) {
+	if (typeof window === "undefined") return;
+	const params = new URLSearchParams(window.location.hash.replace(/^#/, ""));
+	params.set(key, encodeURIComponent(JSON.stringify(state)));
+	const next = `#${params.toString()}`;
+	if (next !== window.location.hash) window.history.replaceState(null, "", next);
+}
+function CacheView({ entries, filter }) {
+	const filtered = useFiltered(entries, filter, cacheHaystack);
+	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No cache events yet",
+		hint: "Trigger a query subscription to see fetches here."
+	});
+	if (filtered.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No matches",
+		hint: `Nothing matches “${filter}”.`
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "olas-devtools-list",
+		children: [...filtered].reverse().map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CacheRow, { entry }, entry.id))
+	});
+}
+function cacheHaystack(e) {
+	const parts = [e.kind, ...e.queryKey.map((p) => String(p))];
+	if (e.kind === "fetch-error") parts.push(safeStringify(e.error));
+	if (e.kind === "subscribed") parts.push(...e.subscriberPath);
+	return parts.join(" ");
+}
+function CacheRow({ entry }) {
+	const kindClass = entry.kind === "fetch-error" ? "olas-devtools-kind-error" : entry.kind === "fetch-success" ? "olas-devtools-kind-success" : entry.kind === "invalidated" || entry.kind === "gc" ? "olas-devtools-kind-warn" : "";
+	let inline = null;
+	let payload;
+	let suffix = null;
+	if (entry.kind === "fetch-success") suffix = `${entry.durationMs}ms`;
+	else if (entry.kind === "fetch-error") {
+		suffix = `${entry.durationMs}ms`;
+		payload = entry.error;
+	} else if (entry.kind === "subscribed") inline = `from ${formatPath(entry.subscriberPath)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+		kind: entry.kind,
+		kindClass,
+		target: formatPath(entry.queryKey),
+		t: entry.t,
+		inline,
+		payload,
+		suffix
+	});
+}
+function MutationsView({ entries, filter }) {
+	const filtered = useFiltered(entries, filter, mutationHaystack);
+	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No mutations yet",
+		hint: "Trigger a mutation to see the lifecycle here."
+	});
+	if (filtered.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No matches",
+		hint: `Nothing matches “${filter}”.`
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "olas-devtools-list",
+		children: [...filtered].reverse().map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MutationRow, { entry }, entry.id))
+	});
+}
+function mutationHaystack(e) {
+	const parts = [
+		e.kind,
+		...e.path,
+		e.name ?? ""
+	];
+	if (e.kind === "run") parts.push(safeStringify(e.vars));
+	if (e.kind === "success") parts.push(safeStringify(e.result));
+	if (e.kind === "error") parts.push(safeStringify(e.error));
+	return parts.join(" ");
+}
+function MutationRow({ entry }) {
+	const kindClass = entry.kind === "error" ? "olas-devtools-kind-error" : entry.kind === "rollback" ? "olas-devtools-kind-rollback" : entry.kind === "success" ? "olas-devtools-kind-success" : "";
+	const target = entry.name ? `${entry.name} · ${formatPath(entry.path)}` : formatPath(entry.path);
+	let payload;
+	let suffix = null;
+	if (entry.kind === "run") payload = entry.vars;
+	else if (entry.kind === "success") {
+		payload = entry.result;
+		if (entry.durationMs !== void 0) suffix = `${entry.durationMs}ms`;
+	} else if (entry.kind === "error") {
+		payload = entry.error;
+		if (entry.durationMs !== void 0) suffix = `${entry.durationMs}ms`;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+		kind: entry.kind,
+		kindClass,
+		target,
+		t: entry.t,
+		payload,
+		suffix
+	});
+}
+function FieldsView({ entries, filter }) {
+	const filtered = useFiltered(entries, filter, fieldHaystack);
+	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No field validations yet",
+		hint: "Type into a form bound via ctx.form(...) or ctx.field(...) — each pass lands here."
+	});
+	if (filtered.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		title: "No matches",
+		hint: `Nothing matches “${filter}”.`
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "olas-devtools-list",
+		children: [...filtered].reverse().map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, { entry }, entry.id))
+	});
+}
+function fieldHaystack(e) {
+	return [
+		e.field,
+		...e.path,
+		e.valid ? "valid" : "invalid",
+		...e.errors
+	].join(" ");
+}
+function FieldRow({ entry }) {
+	const kindClass = entry.valid ? "olas-devtools-kind-success" : "olas-devtools-kind-error";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+		kind: entry.valid ? "valid" : "invalid",
+		kindClass,
+		target: `${formatPath(entry.path)} · ${entry.field}`,
+		t: entry.t,
+		inline: entry.errors.length > 0 ? entry.errors.join(" · ") : null
+	});
+}
+function Row(props) {
+	const { kind, kindClass, target, t, inline, payload, suffix } = props;
+	const hasPayload = payload !== void 0;
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const togglable = hasPayload;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: togglable ? "olas-devtools-row-clickable" : "",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "olas-devtools-row-top",
+				onClick: togglable ? () => setExpanded((v) => !v) : void 0,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `olas-devtools-kind ${kindClass}`,
+						children: kind
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "olas-devtools-target",
+						children: target
+					}),
+					suffix !== void 0 && suffix !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "olas-devtools-duration",
+						children: suffix
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "olas-devtools-time",
+						children: formatTime(t)
+					}),
+					togglable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: `olas-devtools-chevron ${expanded ? "olas-devtools-chevron-open" : ""}`,
+						children: "›"
+					})
+				]
+			}),
+			inline != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "olas-devtools-payload olas-devtools-payload-inline",
+				children: inline
+			}),
+			hasPayload && expanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "olas-devtools-payload olas-devtools-payload-json",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonView, { value: payload })
+			})
+		]
+	});
+}
+function useFiltered(items, filter, haystack) {
+	return (0, react.useMemo)(() => {
+		if (filter.trim() === "") return [...items];
+		const q = filter.toLowerCase();
+		return items.filter((item) => haystack(item).toLowerCase().includes(q));
+	}, [
+		items,
+		filter,
+		haystack
+	]);
+}
+function Empty({ title, hint }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "olas-devtools-empty",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "olas-devtools-empty-title",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "olas-devtools-empty-hint",
+			children: hint
+		})]
+	});
+}
+//#endregion
+//#region src/DevtoolsLauncher.tsx
+const MIN_W = 360;
+const MIN_H = 280;
+const HEADER_H = 30;
+const DEFAULT_W = 520;
+const DEFAULT_H = 520;
+const MARGIN = 16;
+function DevtoolsLauncher(props) {
+	const storageKey = props.storageKey ?? "olas-devtools-window";
+	const [state, setState] = (0, react.useState)(() => loadState(storageKey, props.initial));
+	(0, react.useEffect)(() => {
+		if (typeof localStorage === "undefined") return;
+		try {
+			localStorage.setItem(storageKey, JSON.stringify(state));
+		} catch {}
+	}, [state, storageKey]);
+	(0, react.useEffect)(() => {
+		const onResize = () => setState((s) => clampToViewport(s));
+		if (typeof window === "undefined") return;
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, []);
+	const setOpen = (0, react.useCallback)((open) => setState((s) => ({
+		...s,
+		open
+	})), []);
+	const setMin = (0, react.useCallback)((minimized) => setState((s) => ({
+		...s,
+		minimized
+	})), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: DEVTOOLS_CSS }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LauncherButton, {
+			open: state.open,
+			onClick: () => setOpen(!state.open)
+		}),
+		state.open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingWindow, {
+			state,
+			setState,
+			onClose: () => setOpen(false),
+			onMinimize: () => setMin(!state.minimized),
+			children: !state.minimized && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "olas-devtools-floating-body",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevtoolsPanel, {
+					root: props.root,
+					defaultTab: props.defaultTab,
+					maxEntries: props.maxEntries,
+					urlHashKey: props.urlHashKey
+				})
+			})
+		})
+	] });
+}
+function LauncherButton({ open, onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		"aria-label": open ? "Hide Olas devtools" : "Show Olas devtools",
+		onClick,
+		className: `olas-devtools-launcher ${open ? "olas-devtools-launcher-active" : ""}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "olas-devtools-launcher-dot"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "olas-devtools-launcher-label",
+			children: "Olas devtools"
+		})]
+	});
+}
+function FloatingWindow(props) {
+	const { state, setState, onClose, onMinimize } = props;
+	const dragState = (0, react.useRef)(null);
+	const onPointerDown = (kind) => (e) => {
+		e.preventDefault();
+		e.target.setPointerCapture(e.pointerId);
+		dragState.current = {
+			kind,
+			ox: e.clientX,
+			oy: e.clientY,
+			sx: state.x,
+			sy: state.y,
+			sw: state.w,
+			sh: state.h
+		};
+	};
+	const onPointerMove = (e) => {
+		const d = dragState.current;
+		if (d === null) return;
+		const dx = e.clientX - d.ox;
+		const dy = e.clientY - d.oy;
+		if (d.kind === "move") setState((s) => clampToViewport({
+			...s,
+			x: d.sx + dx,
+			y: d.sy + dy
+		}));
+		else {
+			const w = Math.max(MIN_W, d.sw + dx);
+			const h = Math.max(MIN_H, d.sh + dy);
+			setState((s) => clampToViewport({
+				...s,
+				w,
+				h
+			}));
+		}
+	};
+	const onPointerUp = () => {
+		dragState.current = null;
+	};
+	const minimized = state.minimized;
+	const height = minimized ? HEADER_H : state.h;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "olas-devtools-floating",
+		role: "dialog",
+		"aria-label": "Olas devtools",
+		style: {
+			left: state.x,
+			top: state.y,
+			width: state.w,
+			height
+		},
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: onPointerUp,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "olas-devtools-floating-header",
+				onPointerDown: onPointerDown("move"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "olas-devtools-floating-grip",
+						"aria-hidden": "true",
+						children: "⠿"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "olas-devtools-floating-title",
+						children: "Olas devtools"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "olas-devtools-floating-actions",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": minimized ? "Expand" : "Minimize",
+							onClick: onMinimize,
+							className: "olas-devtools-floating-action",
+							children: minimized ? "▢" : "–"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": "Close",
+							onClick: onClose,
+							className: "olas-devtools-floating-action",
+							children: "×"
+						})]
+					})
+				]
+			}),
+			props.children,
+			!minimized && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "olas-devtools-floating-resize",
+				onPointerDown: onPointerDown("resize"),
+				"aria-label": "Resize",
+				role: "separator"
+			})
+		]
+	});
+}
+function clampToViewport(s) {
+	if (typeof window === "undefined") return s;
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	const w = Math.min(s.w, vw - MARGIN * 2);
+	const h = Math.min(s.h, vh - MARGIN * 2);
+	const x = Math.max(MARGIN, Math.min(s.x, vw - w - MARGIN));
+	const y = Math.max(MARGIN, Math.min(s.y, vh - HEADER_H - MARGIN));
+	return {
+		...s,
+		x,
+		y,
+		w,
+		h
+	};
+}
+function loadState(storageKey, initial) {
+	const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+	const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+	const w = initial?.w ?? DEFAULT_W;
+	const h = initial?.h ?? DEFAULT_H;
+	const defaults = {
+		x: initial?.x ?? Math.max(MARGIN, vw - w - MARGIN),
+		y: initial?.y ?? Math.max(MARGIN, vh - h - MARGIN - 56),
+		w,
+		h,
+		open: false,
+		minimized: false
+	};
+	if (typeof localStorage === "undefined") return defaults;
+	try {
+		const raw = localStorage.getItem(storageKey);
+		if (!raw) return defaults;
+		const parsed = JSON.parse(raw);
+		return clampToViewport({
+			x: parsed.x ?? defaults.x,
+			y: parsed.y ?? defaults.y,
+			w: parsed.w ?? defaults.w,
+			h: parsed.h ?? defaults.h,
+			open: parsed.open ?? false,
+			minimized: parsed.minimized ?? false
+		});
+	} catch {
+		return defaults;
+	}
+}
+//#endregion
+exports.DevtoolsLauncher = DevtoolsLauncher;
+exports.DevtoolsPanel = DevtoolsPanel;
+exports.DevtoolsStore = DevtoolsStore;
+exports.formatPath = formatPath;
+exports.formatPayload = formatPayload;
+exports.formatTime = formatTime;
+exports.insertNode = insertNode;
+exports.setNodeState = setNodeState;
+
+//# sourceMappingURL=index.cjs.map