@octanejs/devtools 0.0.36 → 0.0.38

package/README.md

@@ -7,6 +7,7 @@ streamed over `@tanstack/devtools-event-client` from a dev-only runtime hook.
 ## Installation
 
 ```bash
+npm install @octanejs/devtools
 pnpm add @octanejs/devtools
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/devtools",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -42,14 +42,14 @@
     "@tanstack/devtools-event-client": "0.5.0"
   },
   "peerDependencies": {
-    "octane": "0.1.48"
+    "octane": "0.1.50"
   },
   "devDependencies": {
     "@tanstack/devtools-event-bus": "0.4.2",
     "@testing-library/jest-dom": "^6.9.1",
     "vitest": "^4.1.10",
-    "@octanejs/testing-library": "0.1.45",
-    "octane": "0.1.48"
+    "@octanejs/testing-library": "0.1.47",
+    "octane": "0.1.50"
   },
   "scripts": {
     "test": "vitest run"

package/src/bridge.ts

@@ -43,6 +43,7 @@ const DEVTOOLS_OWN_COMPONENTS = new Set([
 	'TransitionsTab',
 	'PerfModelTab',
 	'TreeRow',
+	'NativeReadRows',
 	'DevtoolsPortal',
 	'TanStackDevtools',
 ]);
@@ -114,6 +115,24 @@ export function startBridge(
 	let lastTree = '';
 	let lastProfile = '';
 	let lastTransition = '';
+	let selectedId: number | null = null;
+	let lastInspect = '';
+
+	const emitInspect = (force = false) => {
+		if (selectedId === null) return;
+		const detail = hook.inspect(selectedId);
+		if (detail === null) {
+			client.emit('inspect-clear', { id: selectedId });
+			selectedId = null;
+			lastInspect = '';
+			return;
+		}
+		const serialized = JSON.stringify(detail);
+		if (force || serialized !== lastInspect) {
+			lastInspect = serialized;
+			client.emit('inspect', detail);
+		}
+	};
 
 	const emitNow = () => {
 		if (trailing !== null) {
@@ -144,6 +163,9 @@ export function startBridge(
 				client.emit('transition', transition);
 			}
 		}
+		// Detail remains lazy: refresh only the selected Scope, even when its
+		// native revisions change without changing the component tree shape.
+		emitInspect();
 	};
 
 	const schedule = () => {
@@ -156,8 +178,8 @@ export function startBridge(
 	const offFlush = hook.subscribe(schedule);
 
 	const offRequest = client.on('inspect-request', (e) => {
-		const detail = hook.inspect(e.payload.id);
-		if (detail) client.emit('inspect', detail);
+		selectedId = e.payload.id;
+		emitInspect(true);
 	});
 
 	// The panel asks for a fresh snapshot when it mounts; force a full re-emit
@@ -167,6 +189,7 @@ export function startBridge(
 		lastTree = '';
 		lastProfile = '';
 		lastTransition = '';
+		lastInspect = '';
 		emitNow();
 	});
 

package/src/client.ts

@@ -22,6 +22,44 @@ export interface NodeDetail {
 	hooks: WireHookCell[];
 	context: Array<{ name: string; value: unknown }>;
 	effectCount: number;
+	/** Optional capability: older runtimes and scopes without native reads omit it. */
+	nativeReads?: NativeReadOwnerWire;
+}
+
+export interface NativeReadSourceWire {
+	scopeKey: string;
+	key: string;
+	read: 'value' | 'latest' | 'snapshot';
+	kind: 'signal' | 'derived' | 'async';
+	status: 'ready' | 'pending' | 'error' | 'unevaluated';
+	revision: number;
+	generation?: number;
+	epoch: number;
+	retired: boolean;
+	historical: boolean;
+	retained: boolean;
+	refreshing: boolean;
+	connection: 'none' | 'connecting' | 'open' | 'closed';
+	complete: boolean;
+	dependencies: readonly { scopeKey: string; key: string }[];
+}
+
+export interface NativeReadWire {
+	observedVersion: number | null;
+	currentVersion: number;
+	source: NativeReadSourceWire | null;
+}
+
+export interface NativeReadAttemptWire {
+	mixed: boolean;
+	reads: readonly NativeReadWire[];
+}
+
+export interface NativeReadOwnerWire {
+	ownerId: number;
+	committed: NativeReadAttemptWire | null;
+	pending: readonly NativeReadAttemptWire[];
+	retry: readonly NativeReadWire[];
 }
 export interface InspectRequest {
 	id: number;
@@ -70,6 +108,7 @@ type OctaneDevtoolsEventMap = {
 	tree: TreeSnapshot;
 	inspect: NodeDetail;
 	'inspect-request': InspectRequest;
+	'inspect-clear': InspectRequest;
 	profile: ProfileSnapshot;
 	transition: TransitionSnapshot;
 	// Panel → bridge: "send me a fresh snapshot now" (emitted when the panel

package/src/panel/ComponentsTab.tsrx

@@ -4,7 +4,71 @@
 // (`inspect-request`); it never mutates app state (see docs/devtools.md P1 scope).
 import { useEffect, useState } from 'octane';
 import type { OctaneNode } from 'octane';
-import { OctaneDevtoolsEventClient, type NodeDetail, type WireTreeNode } from '../client';
+import {
+	OctaneDevtoolsEventClient,
+	type NativeReadWire,
+	type NodeDetail,
+	type WireTreeNode,
+} from '../client';
+
+function NativeReadRows(props: { label: string; reads: readonly NativeReadWire[] }) @{
+	<div>
+		<div class="odt-h">{props.label}</div>
+		@if (props.reads.length === 0) {
+			<div class="odt-empty odt-muted">No native reads.</div>
+		} @else {
+			@for (const read of props.reads; index i) {
+				<div class="odt-kv">
+					@if (read.source) {
+						<div>
+							<div class="odt-kv-key">{read.source.scopeKey + ':' + read.source.key}</div>
+							<div class="odt-muted">
+								{read.source.kind + ' · ' + read.source.read + ' · ' + read.source.status}
+							</div>
+							@if (read.source.retired) {
+								<span class="odt-badge">retired</span>
+							}
+							@if (read.source.historical) {
+								<span class="odt-badge">historical</span>
+							}
+							@if (read.source.retained) {
+								<span class="odt-badge">retained value</span>
+							}
+							@if (read.source.refreshing) {
+								<span class="odt-badge">refreshing</span>
+							}
+							@if (read.source.connection !== 'none') {
+								<span class="odt-badge">{'stream: ' + read.source.connection}</span>
+							}
+							@if (read.source.complete) {
+								<span class="odt-badge">complete</span>
+							}
+							<div class="odt-muted">
+								{'Node revision ' + read.source.revision + ', scope epoch ' + read.source.epoch}
+							</div>
+							@if (read.source.dependencies.length > 0) {
+								<div class="odt-muted">
+									{'Dependencies: ' +
+										read.source.dependencies.map(
+											(dependency) => dependency.scopeKey + ':' + dependency.key,
+										).join(', ')}
+								</div>
+							}
+						</div>
+					} @else {
+						<span class="odt-kv-key">Native source</span>
+					}
+					<span class="odt-kv-val">
+						{'Read revision ' +
+							(read.observedVersion === null ? 'uncommitted' : read.observedVersion) +
+							' → ' +
+							read.currentVersion}
+					</span>
+				</div>
+			}
+		}
+	</div>
+}
 
 function TreeRow(props: {
 	node: WireTreeNode;
@@ -34,20 +98,30 @@ function TreeRow(props: {
 export function ComponentsTab(props: { client: OctaneDevtoolsEventClient }): OctaneNode {
 	const { client } = props;
 	const [nodes, setNodes] = useState<WireTreeNode[]>([]);
-	const [selected, setSelected] = useState<number | null>(null);
+	const [selected, setSelected, getSelected] = useState<number | null>(null);
 	const [detail, setDetail] = useState<NodeDetail | null>(null);
 
 	useEffect(() => {
 		const offTree = client.on('tree', (e) => setNodes(e.payload.nodes));
-		const offInspect = client.on('inspect', (e) => setDetail(e.payload));
+		const offInspect = client.on('inspect', (e) => {
+			if (e.payload.id === getSelected()) setDetail(e.payload);
+		});
+		const offClear = client.on('inspect-clear', (e) => {
+			if (e.payload.id === getSelected()) {
+				setDetail(null);
+				setSelected(null);
+			}
+		});
 		return () => {
 			offTree();
 			offInspect();
+			offClear();
 		};
 	});
 
 	const onSelect = (id: number) => {
 		setSelected(id);
+		setDetail(null);
 		client.emit('inspect-request', { id });
 	};
 
@@ -91,6 +165,30 @@ export function ComponentsTab(props: { client: OctaneDevtoolsEventClient }): Oct
 							}
 						</>
 					}
+					@if (detail.nativeReads) {
+						<div>
+							<div class="odt-h">Native reads</div>
+							<div class="odt-muted">{'Scheduled owner #' + detail.nativeReads.ownerId}</div>
+							<NativeReadRows
+								label="Accepted reads"
+								reads={detail.nativeReads.committed?.reads ?? []}
+							/>
+							@if (detail.nativeReads.committed?.mixed) {
+								<div class="odt-muted">Mixed revisions in this attempt.</div>
+							}
+							@for (const attempt of detail.nativeReads.pending; index i) {
+								<div>
+									<NativeReadRows label="Pending attempt" reads={attempt.reads} />
+									@if (attempt.mixed) {
+										<div class="odt-muted">Mixed revisions in this attempt.</div>
+									}
+								</div>
+							}
+							@if (detail.nativeReads.retry.length > 0) {
+								<NativeReadRows label="Suspended retry sources" reads={detail.nativeReads.retry} />
+							}
+						</div>
+					}
 				</div>
 			} @else {
 				<div class="odt-empty">Select a component.</div>