@abide/abide 0.36.0 → 0.37.0

package/AGENTS.md

@@ -100,7 +100,7 @@ Test suites compile `.abide` and rewrite verbs under `bun test` via `preload = [
 
 - `abide/server/AppModule` — the type of `src/app.ts`'s optional hooks: `init` (boot + cleanup), `handle` (middleware), `handleError`, `health` (merges into `/__abide/health`), `forwardHeaders`.
 - `abide/server/agent` — `agent(engine, messages)`: run a model engine against the current request's MCP surface (caller auth forwarded into every tool call), yielding neutral `AgentFrame`s to wrap in `jsonl`/`sse`.
-- `abide/server/InspectorContext` — the capability bundle (`app`, `loadSurface`, `cacheSnapshot`, `onRecord`) handed to `@abide/inspector` when `ABIDE_ENABLE_INSPECTOR=true`.
+- `abide/server/InspectorContext` — the capability bundle (`app`, `loadSurface`, `cacheSnapshot`, `inFlightSnapshot`, `onRecord`) handed to `@abide/inspector` when `ABIDE_ENABLE_INSPECTOR=true`.
 
 ### Prompts — @documentation plumbing
 

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # abide
 
+## 0.37.0
+
+### Minor Changes
+
+- [`dfd9d9e`](https://github.com/briancray/abide/commit/dfd9d9e9149c16761c539f7b45358e9a969174d8) - manual scroll restoration + hash-only navigation ([`1b71ef1`](https://github.com/briancray/abide/commit/1b71ef195186c0cee5a36527307f5f981833b546))
+
+- [`dfd9d9e`](https://github.com/briancray/abide/commit/dfd9d9e9149c16761c539f7b45358e9a969174d8) - lead every tsv line with a wall-clock column ([`5784d47`](https://github.com/briancray/abide/commit/5784d47ddd2d52696fb9db111092c6f571270086))
+
+- [`dfd9d9e`](https://github.com/briancray/abide/commit/dfd9d9e9149c16761c539f7b45358e9a969174d8) - always-`abide-` component wrapper tag ([`711de46`](https://github.com/briancray/abide/commit/711de46f8b5210cbbff5c73cd7aceda410d87f47))
+
+- [`dfd9d9e`](https://github.com/briancray/abide/commit/dfd9d9e9149c16761c539f7b45358e9a969174d8) - inspector in-flight requests + prompts surface ([`823392d`](https://github.com/briancray/abide/commit/823392d0e644b3a84661293f86b28ca10d9a9de9))
+
+- [`dfd9d9e`](https://github.com/briancray/abide/commit/dfd9d9e9149c16761c539f7b45358e9a969174d8) - inspector client scope/router bridge ([`c25b45e`](https://github.com/briancray/abide/commit/c25b45e778f6f17eeaf0875a4b7ecdd63fccb978))
+
 ## 0.36.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.36.0",
+    "version": "0.37.0",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",

package/src/lib/server/runtime/buildInFlightSnapshot.ts

@@ -0,0 +1,35 @@
+import { inFlightRequests } from './inFlightRequests.ts'
+import type { InspectorInFlightRequest } from './types/InspectorInFlightRequest.ts'
+import type { InspectorInFlightSnapshot } from './types/InspectorInFlightSnapshot.ts'
+import type { RequestStore } from './types/RequestStore.ts'
+
+function projectStore(store: RequestStore, now: number): InspectorInFlightRequest {
+    return {
+        trace: store.trace.traceId,
+        method: store.req.method,
+        path: `${store.url.pathname}${store.url.search}`,
+        /* store.start is Bun.nanoseconds() at scope entry; elapsed is current at the read. */
+        elapsedMs: (now - store.start) / 1e6,
+        route: store.route,
+        params: store.params,
+    }
+}
+
+/*
+Snapshots the request scopes currently executing their handler. Read at call
+time so it reflects the in-flight set as it stands; returns empty when the
+inspector hasn't installed the tracking Set or the server is idle. Sorted by
+elapsed ascending — newest (least elapsed) first, so a long-running request
+sinks to the bottom as its elapsed grows.
+*/
+export function buildInFlightSnapshot(): InspectorInFlightSnapshot {
+    const tracked = inFlightRequests.tracked
+    if (!tracked) {
+        return { requests: [] }
+    }
+    const now = Bun.nanoseconds()
+    const requests = Array.from(tracked, (store) => projectStore(store, now)).sort(
+        (left, right) => left.elapsedMs - right.elapsedMs,
+    )
+    return { requests }
+}

package/src/lib/server/runtime/buildInspectorSurface.ts

@@ -1,4 +1,5 @@
 import { jsonSchemaForSchema } from '../../shared/jsonSchemaForSchema.ts'
+import { promptRegistry } from '../prompts/promptRegistry.ts'
 import { verbRegistry } from '../rpc/verbRegistry.ts'
 import { socketOperations } from '../sockets/socketOperations.ts'
 import { socketRegistry } from '../sockets/socketRegistry.ts'
@@ -33,5 +34,12 @@ export function buildInspectorSurface(): InspectorSurface {
             restUrl: operation.restUrl,
         })),
     }))
-    return { verbs, sockets }
+    /* jsonSchema is already JSON Schema (built from the frontmatter `arguments`
+       list by the resolver plugin), so it's passed through, not re-projected. */
+    const prompts = Array.from(promptRegistry.values()).map((entry) => ({
+        name: entry.prompt.name,
+        description: entry.prompt.description,
+        inputSchema: entry.jsonSchema,
+    }))
+    return { verbs, sockets, prompts }
 }

package/src/lib/server/runtime/createServer.ts

@@ -186,6 +186,13 @@ export async function createServer({
     // In dev, append the live-reload client to the shell so every rendered
     // page reconnects to /__abide/dev and reloads after a restart.
     const devShell = dev ? shell.replace('</body>', `${DEV_RELOAD_CLIENT_SCRIPT}</body>`) : shell
+    // When the inspector is enabled, flag the client so startClient installs the
+    // BroadcastChannel bridge that streams scope + router state to the inspector
+    // page. Independent of dev — the inspector can run on a build server too.
+    const inspectedShell =
+        process.env.ABIDE_ENABLE_INSPECTOR === 'true'
+            ? devShell.replace('</body>', `<script>window.__abideInspect=true</script></body>`)
+            : devShell
     /*
     Mount base from APP_URL's pathname (e.g. https://foo.com/v2 → /v2). Install
     the server-side resolver so url() prefixes SSR-generated links, and rewrite
@@ -197,7 +204,9 @@ export async function createServer({
     setBaseResolver(() => base)
     // Rebase the shell's rooted `/_app/` entry refs onto the mount base, matching
     // either quote style so a custom app.html using single quotes still rewrites.
-    const activeShell = base ? devShell.replace(/(["'])\/_app\//g, `$1${base}/_app/`) : devShell
+    const activeShell = base
+        ? inspectedShell.replace(/(["'])\/_app\//g, `$1${base}/_app/`)
+        : inspectedShell
     /*
     Boot-path disk scans run concurrently — they share no data, and under
     `abide dev` the worker-swap window is bounded by exactly this boot.

package/src/lib/server/runtime/inFlightRequests.ts

@@ -0,0 +1,13 @@
+import type { RequestStore } from './types/RequestStore.ts'
+
+/*
+The set of request scopes currently executing their handler, for the inspector's
+in-flight view. `tracked` stays undefined until the inspector mounts and swaps in
+a live Set — so the request path adds nothing (no allocation, no membership
+churn) when the inspector is off. runWithRequestScope adds a store on scope entry
+and removes it when the handler settles; buildInFlightSnapshot reads it. Mirrors
+the on-demand, opt-in shape of the log/socket tap slots.
+*/
+export const inFlightRequests: { tracked: Set<RequestStore> | undefined } = {
+    tracked: undefined,
+}

package/src/lib/server/runtime/maybeMountInspector.ts

@@ -4,7 +4,9 @@ import { requestScopeSlot } from '../../shared/requestScopeSlot.ts'
 import { socketTapSlot } from '../../shared/socketTapSlot.ts'
 import type { LogRecord } from '../../shared/types/LogRecord.ts'
 import { buildCacheSnapshot } from './buildCacheSnapshot.ts'
+import { buildInFlightSnapshot } from './buildInFlightSnapshot.ts'
 import { buildInspectorSurface } from './buildInspectorSurface.ts'
+import { inFlightRequests } from './inFlightRequests.ts'
 import { ensureRegistriesLoaded } from './registryManifests.ts'
 import type { InspectorContext } from './types/InspectorContext.ts'
 
@@ -63,6 +65,10 @@ export async function maybeMountInspector(app: {
         )
         return undefined
     }
+    /* Arm in-flight tracking now the inspector is mounting: runWithRequestScope
+       fills this Set per request, kept process-wide (the events tap teardown is
+       per-connection; the Set outlives any single feed). */
+    inFlightRequests.tracked = new Set()
     const context: InspectorContext = {
         app,
         loadSurface: async () => {
@@ -70,6 +76,7 @@ export async function maybeMountInspector(app: {
             return buildInspectorSurface()
         },
         cacheSnapshot: buildCacheSnapshot,
+        inFlightSnapshot: buildInFlightSnapshot,
         /*
         One process-wide tap each for the log and socket chokepoints; the
         inspector owns both and fans out to its readers. Socket frames arrive

package/src/lib/server/runtime/runWithRequestScope.ts

@@ -5,6 +5,7 @@ import { formatTraceparent } from '../../shared/formatTraceparent.ts'
 import { isStreamingResponse } from '../../shared/isStreamingResponse.ts'
 import { logClosingRecord } from '../../shared/logClosingRecord.ts'
 import type { AppModule } from '../AppModule.ts'
+import { inFlightRequests } from './inFlightRequests.ts'
 import { internalErrorResponse } from './internalErrorResponse.ts'
 import { requestContext } from './requestContext.ts'
 import type { RequestStore } from './types/RequestStore.ts'
@@ -34,6 +35,10 @@ export function runWithRequestScope(
         start: Bun.nanoseconds(),
     }
     return requestContext.run(store, async () => {
+        /* Register the live handler for the inspector's in-flight view; the Set is
+           absent (a no-op) unless the inspector mounted. Removed once the handler
+           settles — its compute is done even if a streamed body keeps piping. */
+        inFlightRequests.tracked?.add(store)
         let response: Response
         try {
             response = await body(store)
@@ -44,6 +49,8 @@ export function runWithRequestScope(
                 abideLog.error(error)
                 response = internalErrorResponse(error)
             }
+        } finally {
+            inFlightRequests.tracked?.delete(store)
         }
         /*
         Flush any cookies the handler set onto the outgoing response. Only when

package/src/lib/server/runtime/types/InspectorContext.ts

@@ -1,5 +1,6 @@
 import type { LogRecord } from '../../../shared/types/LogRecord.ts'
 import type { InspectorCacheSnapshot } from './InspectorCacheSnapshot.ts'
+import type { InspectorInFlightSnapshot } from './InspectorInFlightSnapshot.ts'
 import type { InspectorSurface } from './InspectorSurface.ts'
 
 /*
@@ -19,6 +20,9 @@ export type InspectorContext = {
     /* Snapshots the persistent (global) cache store — current entries with their
        lifecycle state, retention, tags, and a value preview. */
     cacheSnapshot: () => InspectorCacheSnapshot
+    /* Snapshots the requests whose handler is executing right now — the live
+       counterpart to the closing records onRecord emits once a request settles. */
+    inFlightSnapshot: () => InspectorInFlightSnapshot
     /*
     Subscribes to the unified event stream: every emitted log record (the log's
     structured form, trace context and all) plus published socket frames shaped

package/src/lib/server/runtime/types/InspectorInFlightRequest.ts

@@ -0,0 +1,20 @@
+/*
+One in-flight request projected for the inspector — the serializable facts the
+In-flight tab renders for a handler that's currently executing. The held Request
+and CacheStore aren't included; what an operator wants is which request it is,
+how long it's been running, and where it landed in routing.
+*/
+export type InspectorInFlightRequest = {
+    /* The W3C trace id, so the row links to the same trace the Logs/Traces tabs group by. */
+    trace: string
+    /* HTTP method of the inbound request. */
+    method: string
+    /* Request path with query string (app-space, as logged). */
+    path: string
+    /* Ms the handler has been running, measured from scope entry to snapshot time. */
+    elapsedMs: number
+    /* The matched page route pattern, once routing has landed; undefined on rpc/socket requests or before a match. */
+    route: string | undefined
+    /* The matched route's decoded params, when a page route landed. */
+    params: Record<string, string> | undefined
+}

package/src/lib/server/runtime/types/InspectorInFlightSnapshot.ts

@@ -0,0 +1,10 @@
+import type { InspectorInFlightRequest } from './InspectorInFlightRequest.ts'
+
+/*
+The requests executing their handler at snapshot time — a point-in-time read of
+the in-flight set, the live counterpart to the closing records the Logs tab
+shows once a request settles. Empty when the server is idle.
+*/
+export type InspectorInFlightSnapshot = {
+    requests: InspectorInFlightRequest[]
+}

package/src/lib/server/runtime/types/InspectorPrompt.ts

@@ -0,0 +1,15 @@
+/*
+One declared MCP prompt projected for the inspector: the serializable facts the
+Surface tab renders. The render closure isn't included — what an operator wants
+is the prompt's name, what it's for, and the arguments it interpolates, the same
+trio `prompts/list` advertises. Prompts are MCP-only, so there are no client
+surface flags to show.
+*/
+export type InspectorPrompt = {
+    /* The prompt's name (stamped from its file path under src/mcp/prompts/). */
+    name: string
+    /* The frontmatter description, when the prompt declared one. */
+    description: string | undefined
+    /* The argument shape as JSON Schema (from the frontmatter `arguments` list); undefined when it takes none. */
+    inputSchema: Record<string, unknown> | undefined
+}

package/src/lib/server/runtime/types/InspectorSurface.ts

@@ -1,13 +1,16 @@
+import type { InspectorPrompt } from './InspectorPrompt.ts'
 import type { InspectorSocket } from './InspectorSocket.ts'
 import type { InspectorVerb } from './InspectorVerb.ts'
 
 /*
 The app's machine surface projected for the inspector — the static catalog the
-UI renders. Built by reading the verb and socket registries after they're
-eager-loaded, so a freshly-booted server lists its whole surface, not just the
-verbs hit so far. Pages stay out: they're the human surface, already navigable.
+UI renders. Built by reading the verb, socket, and prompt registries after
+they're eager-loaded, so a freshly-booted server lists its whole surface, not
+just the verbs hit so far. Pages stay out: they're the human surface, already
+navigable.
 */
 export type InspectorSurface = {
     verbs: InspectorVerb[]
     sockets: InspectorSocket[]
+    prompts: InspectorPrompt[]
 }

package/src/lib/shared/emitLogRecord.ts

@@ -66,6 +66,15 @@ function formatElapsed(ms: number): string {
     return `+${ms.toFixed(2)}ms`
 }
 
+/* `14:23:01.072` — local wall-clock to the ms. Every record carries `ts`, so the
+   tsv line always leads with one; `+elapsedMs` still trails as the request-relative
+   timing — the two are different axes (when it happened vs how long it took). */
+function formatClock(ts: number): string {
+    const date = new Date(ts)
+    const pad = (value: number, width = 2): string => String(value).padStart(width, '0')
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`
+}
+
 /*
 Builds the record from the emission's own fields plus the ambient request
 scope (trace, elapsed, verb+path), then renders it through the active
@@ -123,11 +132,12 @@ function consoleFor(level: LogRecord['level']): (...args: unknown[]) => void {
 
 /*
 The unified tsv line (the default format): tab-separated
-`<trace8>	<verb path>	[channel] <message>	+0.00ms`. Inside a
-request scope the trace column leads and the elapsed-at-emission timing
-trails; a closing record emitted outside one (asset hits sidestep the scope)
-pads a blank trace column and trails its serve duration instead, so request
-lines stay aligned whatever produced them. Every record speaks on a channel
+`<clock>	<trace8>	<verb path>	[channel] <message>	+0.00ms`. The
+wall-clock leads every line (each record carries `ts`); inside a request scope
+the trace column follows and the elapsed-at-emission timing trails; a closing
+record emitted outside one (asset hits sidestep the scope) pads a blank trace
+column and trails its serve duration instead, so request lines stay aligned
+whatever produced them. Every record speaks on a channel
 (the app name, 'abide', or a diagnostic channel), shown as a dim `[name]`
 tag opening the message field. The verb+path pair is one field — it's the
 line's anchor unit — and the tag folds into the message field so field
@@ -136,6 +146,9 @@ positions stay stable for cut/awk consumers.
 function printTsv(record: LogRecord, voice?: LogVoice): void {
     const fields: string[] = []
     const closing = record.status !== undefined
+    /* Wall-clock leads every line — a stable first column, unlike the conditional
+       trace field, and the axis `+elapsedMs` can't give (when, not how-long). */
+    fields.push(dim(formatClock(record.ts)))
     if (record.trace) {
         fields.push(dim(record.trace.slice(0, 8)))
     } else if (closing) {

package/src/lib/ui/compile/componentWrapperTag.ts

@@ -1,23 +1,13 @@
-import { HTML_TAGS } from './HTML_TAGS.ts'
-
 /*
-The element tag a component instance mounts into. Normally the component name
-lowercased — readable in devtools, a real box like any abide wrapper. But a name
-that lowercases to a real HTML element (`Button`→`button`, `Input`→`input`) yields a
-wrapper with a content model the parser enforces: void elements self-close, and
-`<button>`/`<a>`/table/list/select families reject or foster the component's own
-markup as the wrapper's siblings — so on hydration the skeleton locates the wrapper
-empty, claims `null`, and `attr` throws on it. Those names map to a hyphenated
-custom-element tag (a custom element is never void and has no content model) made
-layout-transparent with `display:contents`, so the component's real root still lays
-out as a direct child of the parent the way the (parse-broken) wrapper would have.
-A name that is NOT a known HTML element (the common case — `Card`, `Dropdown`) is an
-inert unknown tag that holds any content untouched, so it stays as-is. Both back-ends
-call this so the SSR string and the client build agree on the wrapper.
+The element tag a component instance mounts into: always `abide-<name>` lowercased. The
+`abide-` prefix makes every wrapper a valid custom element (contains a hyphen) — never
+void, no content model — so it holds the component's own markup untouched and hydrates
+cleanly, regardless of whether the name collides with an HTML element (`Button`, `Input`).
+Emitted with `display:contents` (see the back-ends) so the wrapper stays out of layout: a
+pure mount host whose real root lays out as a direct child of the parent, keeping the
+component invisible to `grid`/`subgrid`/`flex`. Both back-ends call this so the SSR string
+and the client build agree on the wrapper.
 */
-export function componentWrapperTag(name: string): { tag: string; transparent: boolean } {
-    const lower = name.toLowerCase()
-    return HTML_TAGS.has(lower)
-        ? { tag: `abide-${lower}`, transparent: true }
-        : { tag: lower, transparent: false }
+export function componentWrapperTag(name: string): string {
+    return `abide-${name.toLowerCase()}`
 }

package/src/lib/ui/compile/generateBuild.ts

@@ -4,9 +4,9 @@ import { bindListenEvent } from './bindListenEvent.ts'
 import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
-import { isTextLeaf } from './isTextLeaf.ts'
 import { lowerContext } from './lowerContext.ts'
 import { scopeAttr } from './scopeAttr.ts'
+import { skeletonContext } from './skeletonContext.ts'
 import { staticAttr } from './staticAttr.ts'
 import { staticTextPart } from './staticTextPart.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
@@ -32,6 +32,13 @@ export function generateBuild(
     let counter = 0
     const nextVar = (prefix: string): string => `${prefix}${counter++}`
 
+    /* Per-node skeleton position from the SAME pass the SSR back-end reads — so the client's
+       anchor/text-leaf decisions consult one source of truth instead of re-deriving the
+       position structurally (the drift the shared context exists to prevent). `asOutlet`
+       only rewrites layout `<slot>`s and preserves text-node identity, so the original
+       `nodes` key the same text markers the build traversal looks up. */
+    const { markText } = skeletonContext(nodes)
+
     /* The shared signal→`model` lowering + branch-scoped nested-script deref scope. */
     const {
         expression: lowerExpression,
@@ -135,13 +142,12 @@ export function generateBuild(
         }
         if (node.kind === 'component') {
             /* The wrapper element is a positioned hole in the skeleton; the child mounts
-               into the located node (idempotent display:contents for a transparent wrap,
-               static so it lives in the markup). */
-            const { tag, transparent } = componentWrapperTag(node.name)
+               into the located node. display:contents (idempotent, static so it lives in
+               the markup) keeps the wrapper out of layout — a pure mount host. */
+            const tag = componentWrapperTag(node.name)
             const { code } = mountComponent(node, `${skVar}.el[${counter.el++}]`)
             binds.push(code)
-            const style = transparent ? ' style="display:contents"' : ''
-            return `<${tag} ${HOLE_ATTRIBUTE}${style}></${tag}>`
+            return `<${tag} ${HOLE_ATTRIBUTE} style="display:contents"></${tag}>`
         }
         if (node.kind === 'script') {
             /* A nested `<script>` (scoped reactive block) emits no markup — its lowered body
@@ -172,13 +178,16 @@ export function generateBuild(
             return '<!--a-->'
         }
         const hasReactiveAttr = node.attrs.some((attr) => attr.kind !== 'static')
-        const hasReactiveText = node.children.some(
+        const reactiveTextChild = node.children.find(
             (child) => child.kind === 'text' && child.parts.some((part) => part.kind !== 'static'),
         )
         /* A text-leaf (only text/style children) with reactive text binds marker-free via
            `generateChildren` on the located element; otherwise reactive text is interleaved
-           and uses `<!--a-->` anchors during the child recursion below. */
-        const textLeafBind = hasReactiveText && isTextLeaf(node)
+           and uses `<!--a-->` anchors during the child recursion below. The shared context
+           records the leaf's text as NOT interleaved (`markText` false) — read that flag the
+           SSR back-end also reads, rather than re-deriving leaf-ness via `isTextLeaf` here. */
+        const textLeafBind =
+            reactiveTextChild !== undefined && markText.get(reactiveTextChild) === false
         let openTag = `<${node.tag}`
         let elVar = ''
         if (hasReactiveAttr || textLeafBind) {

package/src/lib/ui/compile/generateSSR.ts

@@ -184,7 +184,7 @@ export function generateSSR(
                the same wrapper the client mounts into, so SSR and client agree.
                Props pass as thunks; slot content passes as a string-returning
                `$children` the child invokes from its <slot>. */
-            const { tag, transparent } = componentWrapperTag(node.name)
+            const tag = componentWrapperTag(node.name)
             const parts = node.props.map(
                 (prop) => `${JSON.stringify(prop.name)}: () => (${lowerExpression(prop.code)})`,
             )
@@ -206,7 +206,7 @@ export function generateSSR(
                the enclosing render body, including from branch closures.) */
             const result = nextVar('$child')
             return (
-                push(target, `<${tag}${transparent ? ' style="display:contents"' : ''}>`) +
+                push(target, `<${tag} style="display:contents">`) +
                 `const ${result} = ${node.name}.render({ ${parts.join(', ')} });\n` +
                 `${target}.push(${result}.html);\n` +
                 `for (const $a of ${result}.awaits) { $awaits.push($a); }\n` +

package/src/lib/ui/createScope.ts

@@ -3,6 +3,7 @@ import { history } from './history.ts'
 import { linked } from './linked.ts'
 import { persist as persistDoc } from './persist.ts'
 import { createDoc } from './runtime/createDoc.ts'
+import { liveScopes } from './runtime/liveScopes.ts'
 import type { Doc } from './runtime/types/Doc.ts'
 import { state } from './state.ts'
 import { sync } from './sync.ts'
@@ -28,6 +29,7 @@ export function createScope(
     initial: unknown = {},
     parent: Scope | undefined = undefined,
     awaiting = false,
+    label: string | undefined = undefined,
 ): Scope {
     /* Eager unless awaiting adoption; `data()` lazily mints an empty doc if a body
        never created one (a stateless component that still reaches for its scope). */
@@ -41,6 +43,7 @@ export function createScope(
 
     const self: Scope = {
         id,
+        label,
         parent,
         read: (path) => data().read(path),
         replace: (path, value) => data().replace(path, value),
@@ -85,7 +88,15 @@ export function createScope(
             persistence = undefined
             unsync?.()
             unsync = undefined
+            if (liveScopes.enabled) {
+                liveScopes.scopes.delete(self)
+            }
         },
     }
+    /* Dev-only: register for the inspector's scope-tree view. Gated, so production
+       never touches the set. */
+    if (liveScopes.enabled) {
+        liveScopes.scopes.add(self)
+    }
     return self
 }

package/src/lib/ui/dom/hydrate.ts

@@ -4,6 +4,7 @@ import { enterRenderPass } from '../runtime/enterRenderPass.ts'
 import { exitRenderPass } from '../runtime/exitRenderPass.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { scopeLabel } from './scopeLabel.ts'
 
 /*
 Adopts existing server-rendered DOM instead of rebuilding it. Runs `build(host)`
@@ -28,7 +29,7 @@ export function hydrate(host: Element, build: (host: Element) => void): () => vo
     /* Same lexical scope establishment as `mount` — a hydrated component owns a scope
        too, adopting the model its build adopts. */
     const parentScope = CURRENT_SCOPE.current
-    const lexical = createScope({}, parentScope, true)
+    const lexical = createScope({}, parentScope, true, scopeLabel(host))
     CURRENT_SCOPE.current = lexical
     try {
         const stop = scope(() => {

package/src/lib/ui/dom/mount.ts

@@ -3,6 +3,7 @@ import { CURRENT_SCOPE } from '../runtime/CURRENT_SCOPE.ts'
 import { enterRenderPass } from '../runtime/enterRenderPass.ts'
 import { exitRenderPass } from '../runtime/exitRenderPass.ts'
 import { scope } from '../runtime/scope.ts'
+import { scopeLabel } from './scopeLabel.ts'
 
 /*
 Mounts a component into `host`: runs `build(host)` under an ownership scope so
@@ -22,7 +23,7 @@ export function mount(host: Element, build: (host: Element) => void): () => void
        `scope()` and its capabilities resolve to it during the build; the previous
        scope is restored after (synchronous build, so the restore is exact). */
     const parentScope = CURRENT_SCOPE.current
-    const lexical = createScope({}, parentScope, true)
+    const lexical = createScope({}, parentScope, true, scopeLabel(host))
     CURRENT_SCOPE.current = lexical
     const stop = scope(() => {
         try {

package/src/lib/ui/dom/scopeLabel.ts

@@ -0,0 +1,15 @@
+/*
+The human-readable name for the scope a mount/hydrate establishes, derived from
+its host element's tag. A nested component mounts into its `abide-<name>` wrapper
+(see `componentWrapperTag`), so stripping the `abide-` prefix recovers the
+component name; any other host (a page/layout outlet) yields its lowercased tag.
+Dev-only — feeds the inspector's Reactive tab so a scope reads `<Counter>` rather
+than an opaque counter id. Returns undefined when there's no element to name from.
+*/
+export function scopeLabel(host: Element): string | undefined {
+    const tag = host.tagName?.toLowerCase()
+    if (tag === undefined) {
+        return undefined
+    }
+    return tag.startsWith('abide-') ? tag.slice('abide-'.length) : tag
+}

package/src/lib/ui/dom/skeleton.ts

@@ -26,6 +26,16 @@ function isElement(node: Node): node is Element {
     return typeof (node as Element).hasAttribute === 'function'
 }
 
+/* A child component's mount wrapper (`abide-<name>`, see `componentWrapperTag`). Its
+   content is a SEPARATE skeleton (the child's own), so the parent's walks must treat it
+   as opaque: in the shallow skeleton it's an empty leaf, so the compiler counts no
+   anchors inside it; on hydrate it's populated, so a descent would over-collect the
+   child's anchors and shift every parent index past it (same hazard as a block range,
+   but bounded by the wrapper element instead of `[`…`]` markers). */
+function isComponentWrapper(node: Node): boolean {
+    return isElement(node) && (node.tagName ?? '').toLowerCase().startsWith('abide-')
+}
+
 /* A comment node's data, or undefined for elements/text. A comment is a node that is
    neither an element (`hasAttribute`) nor a text node (`splitText`); the mini-dom
    exposes no `nodeType`, so detect by method. */
@@ -113,7 +123,9 @@ function scanAnchors(nodes: ArrayLike<Node>, anchors: Node[]): void {
         const node = nodes[index] as Node
         const data = commentData(node)
         if (data === undefined) {
-            if (isElement(node) && depth === 0) {
+            /* Recurse into this skeleton's own elements, but NOT a child component's
+               wrapper — its anchors belong to the child's skeleton (see above). */
+            if (isElement(node) && depth === 0 && !isComponentWrapper(node)) {
                 scanAnchors(node.childNodes, anchors)
             }
         } else if (isCloseMarker(data)) {

package/src/lib/ui/installInspectorBridge.ts

@@ -0,0 +1,138 @@
+import { effect } from './effect.ts'
+import { clientPage } from './runtime/clientPage.ts'
+import { historyEntries } from './runtime/historyEntries.ts'
+import { liveScopes } from './runtime/liveScopes.ts'
+import { PATCH_BUS } from './runtime/PATCH_BUS.ts'
+import { runtimePath } from './runtime/runtimePath.ts'
+
+/* Same-origin cross-tab channel the inspector page listens on. The app tab
+   publishes scope + router state; the inspector subscribes. Web-standard, so no
+   server route or buffer is involved — core publishes, the package consumes. */
+const CHANNEL = 'abide:inspector'
+
+/* Coalesce a burst of patches into one snapshot — the post is the cost, the read is cheap. */
+const SNAPSHOT_DEBOUNCE_MS = 60
+
+/* JSON round-trip to strip anything structured-clone can't carry (functions,
+   class instances, DOM nodes) before postMessage, degrading to undefined rather
+   than throwing into the channel. */
+function cloneable(value: unknown): unknown {
+    try {
+        return JSON.parse(JSON.stringify(value))
+    } catch {
+        return undefined
+    }
+}
+
+/* The live scope forest as a flat list — the inspector rebuilds the tree from
+   each node's `parent` id (the Scope surface exposes no children accessor). */
+function scopeNodes(): Array<{
+    id: string
+    label: string | undefined
+    parent: string | undefined
+    state: unknown
+    recorded: boolean
+}> {
+    return Array.from(liveScopes.scopes, (scope) => ({
+        id: scope.id,
+        label: scope.label,
+        parent: scope.parent?.id,
+        state: cloneable(scope.snapshot()),
+        recorded: scope.canUndo() || scope.canRedo(),
+    }))
+}
+
+/* Router state off the existing reactive holders — read, not subscribed, here;
+   the nav effect drives re-reads. */
+function routerState() {
+    const page = clientPage.value
+    return {
+        path: runtimePath.value,
+        route: page.route,
+        params: page.params,
+        navigating: page.navigating,
+        url: page.url.href,
+        entry: historyEntries.current,
+    }
+}
+
+/*
+Installs the client→inspector bridge: a BroadcastChannel the inspector page reads
+to render its Reactive + Router tabs. Gated by `__abideInspect` (server-injected
+only when the inspector is enabled) and called from startClient before the router
+builds any scope — so registration is armed before the first scope exists. A
+no-op where BroadcastChannel is absent (SSR, old runtimes). Mirrors
+installHotBridge: dev instrumentation, not public surface.
+*/
+export function installInspectorBridge(): void {
+    /* No BroadcastChannel means no consumer for the scope registry — bail before
+       arming `liveScopes.enabled`, so createScope never pays scope tracking for a
+       set nothing reads. */
+    if (typeof BroadcastChannel === 'undefined') {
+        return
+    }
+    liveScopes.enabled = true
+    const channel = new BroadcastChannel(CHANNEL)
+    const tab = typeof crypto !== 'undefined' ? crypto.randomUUID() : String(performance.now())
+    const post = (message: object) => {
+        try {
+            channel.postMessage({ tab, ...message })
+        } catch {
+            /* A non-cloneable slipped through despite the JSON pass — drop the frame
+               rather than throw into a patch/nav handler. */
+        }
+    }
+
+    const announce = () =>
+        post({
+            kind: 'announce',
+            url: typeof location !== 'undefined' ? location.href : '',
+            app: typeof document !== 'undefined' ? document.title : '',
+        })
+    const sendSnapshot = () =>
+        post({ kind: 'snapshot', scopes: scopeNodes(), router: routerState() })
+
+    let snapshotTimer: ReturnType<typeof setTimeout> | undefined
+    const scheduleSnapshot = () => {
+        clearTimeout(snapshotTimer)
+        snapshotTimer = setTimeout(sendSnapshot, SNAPSHOT_DEBOUNCE_MS)
+    }
+
+    /* Inspector handshakes: `hello` (it just opened — everyone re-announce + push)
+       and `request` (it wants a fresh snapshot of this tab). */
+    channel.onmessage = (event) => {
+        const message = event.data as { kind?: string; tab?: string }
+        if (message.kind === 'hello') {
+            announce()
+            sendSnapshot()
+        } else if (message.kind === 'request' && message.tab === tab) {
+            sendSnapshot()
+        }
+    }
+
+    /* Every doc mutation flows through PATCH_BUS; forward the patch as a live
+       mutation event and re-snapshot (debounced) so values stay current. */
+    PATCH_BUS.subscribe((patchEvent) => {
+        post({ kind: 'patch', op: patchEvent.patch.op, path: patchEvent.patch.path })
+        scheduleSnapshot()
+    })
+
+    /* Reading the page + path States tracks them, so this re-runs on navigation. */
+    effect(() => {
+        clientPage.value
+        runtimePath.value
+        post({ kind: 'nav', router: routerState() })
+    })
+
+    if (typeof addEventListener === 'function') {
+        addEventListener('pagehide', () => {
+            post({ kind: 'bye' })
+            channel.close()
+        })
+    }
+
+    announce()
+    /* First snapshot once the router has built the initial scope tree (this runs
+       before router()). */
+    setTimeout(sendSnapshot, 0)
+}

package/src/lib/ui/navigate.ts

@@ -1,16 +1,24 @@
+import { historyEntries } from './runtime/historyEntries.ts'
 import { runtimePath } from './runtime/runtimePath.ts'
 
 /* Navigates to `path`: writes a history entry (when available) and updates the
    reactive route, which re-mounts the matching page via `router`. `replace` swaps
    the current entry instead of pushing — used when honouring a server redirect, so
-   the blocked URL isn't left behind in history. */
+   the blocked URL isn't left behind in history. Each entry carries a monotonic
+   `abideEntry` id so the router can bucket/restore its scroll offset across the page
+   teardown the rebuild does. A push leaves the current entry behind — its scroll is
+   bucketed so back restores it — and mints a fresh id. A replace destroys the current
+   entry and lands fresh content (a redirect), so its saved scroll no longer applies:
+   the bucket is discarded and the id kept, so the new page restores to top/anchor. */
 // @documentation navigate
 export function navigate(path: string, replace = false): void {
     if (typeof history !== 'undefined') {
         if (replace) {
-            history.replaceState({}, '', path)
+            historyEntries.discard()
+            history.replaceState({ abideEntry: historyEntries.current }, '', path)
         } else {
-            history.pushState({}, '', path)
+            historyEntries.save()
+            history.pushState({ abideEntry: historyEntries.next() }, '', path)
         }
     }
     runtimePath.value = path

package/src/lib/ui/router.ts

@@ -6,7 +6,9 @@ import { clientPage } from './runtime/clientPage.ts'
 import { enterRenderPass } from './runtime/enterRenderPass.ts'
 import { exitRenderPass } from './runtime/exitRenderPass.ts'
 import { firstOutlet } from './runtime/firstOutlet.ts'
+import { historyEntries } from './runtime/historyEntries.ts'
 import { runtimePath } from './runtime/runtimePath.ts'
+import type { AbideHistoryState } from './runtime/types/AbideHistoryState.ts'
 import type { NavVerdict } from './runtime/types/NavVerdict.ts'
 import type { Route } from './runtime/types/Route.ts'
 import type { RouteLoader } from './runtime/types/RouteLoader.ts'
@@ -20,6 +22,15 @@ type MountedLayout = { key: string; dispose: () => void; outlet: Element }
 /* A layout mount that returns no disposer still needs one for the chain teardown. */
 const noop = (): void => {}
 
+/* The destination URL for a navigation `path`. On the server / headless there is no
+   `location`, so resolve against a localhost origin; in the browser, against the real
+   origin — `location` is already updated to `path` by the time a swap reads it, so this
+   matches `new URL(location.href)`. */
+const resolveUrl = (path: string): URL =>
+    typeof location === 'undefined'
+        ? new URL(`http://localhost${path}`)
+        : new URL(path, location.origin)
+
 /*
 A minimal client router on the History API. `router` matches the current path
 against the route patterns (literal / `[name]` / `[...rest]`, via matchRoute),
@@ -34,6 +45,11 @@ is disposed and rebuilt, and the page (always the leaf) re-mounts every time. Th
 reactive `page` proxy means a persisted layout reading route/params updates in place
 without a remount. Each chunk loads only on first visit, cached after.
 
+Scroll restoration is manual (`historyEntries`): because the page is rebuilt after the
+browser would restore scroll, each history entry's offset is bucketed by an `abideEntry`
+id and reapplied once the destination DOM exists — back/forward returns to its offset, a
+fresh navigation scrolls to the top.
+
 `probe` (when given) runs each post-boot navigation's destination through the
 server's app.handle first, so auth/redirect gating applies to client navigation
 just as it does to a fresh load; its verdict either clears the mount, soft-redirects
@@ -134,9 +150,22 @@ export function router(
         run()
     }
 
+    const entryOf = (): number =>
+        (history.state as AbideHistoryState | null)?.abideEntry ?? historyEntries.current
     const onPopState = (): void => {
+        /* Bucket the leaving entry's scroll (current still its id) before adopting the
+           one back/forward landed on; `swap` restores the adopted entry's offset once
+           its DOM is rebuilt. */
+        historyEntries.save()
+        historyEntries.adopt(entryOf())
         runtimePath.value = location.pathname + location.search + location.hash
     }
+    const onPageHide = (): void => {
+        /* Mirror the live scroll into the active entry's state before it unloads, so a
+           reload can recover it — the in-memory bucket is gone and `manual` keeps the
+           browser from restoring. */
+        historyEntries.persist()
+    }
     const onClick = (event: MouseEvent): void => {
         /* Let the browser own anything that isn't a plain primary-button click:
            modified clicks (open in a new tab/window), middle/right buttons, and
@@ -175,7 +204,22 @@ export function router(
         navigate(destination.pathname + destination.search + destination.hash)
     }
     if (typeof window !== 'undefined') {
+        /* Own scroll restoration: the browser would restore against the pre-teardown
+           DOM. Adopt the initial entry's id (survives a reload) and stamp it onto the
+           landing entry — merging so any `scroll` a prior unload persisted into this
+           entry's state stays put for the first-paint `restore` to recover. */
+        if ('scrollRestoration' in history) {
+            history.scrollRestoration = 'manual'
+        }
+        historyEntries.adopt(entryOf())
+        const landingState = (history.state as AbideHistoryState | null) ?? {}
+        history.replaceState(
+            { ...landingState, abideEntry: historyEntries.current },
+            '',
+            location.href,
+        )
         window.addEventListener('popstate', onPopState)
+        window.addEventListener('pagehide', onPageHide)
         document.addEventListener('click', onClick as EventListener)
     }
 
@@ -200,6 +244,29 @@ export function router(
             /* The route matches on the pathname only; the query/hash ride along for
                the probe (so server gating sees them) and for clientPage.url. */
             const pathname = path.split(/[?#]/)[0] ?? path
+            /* A same-document navigation — only the `#hash` (and thus scroll) differs from
+               the mounted page — needs no teardown: the live page stays, page.url
+               republishes (so `page.url.hash` updates in place), and we restore the entry's
+               scroll bucket or scroll to the anchor. A differing pathname or query still
+               rebuilds (a query is page data). Skipped on first paint — nothing is mounted. */
+            const targetUrl = resolveUrl(path)
+            const mountedUrl = clientPage.value.url
+            if (
+                !first &&
+                mountedUrl.pathname === targetUrl.pathname &&
+                mountedUrl.search === targetUrl.search &&
+                mountedUrl.hash !== targetUrl.hash
+            ) {
+                /* Invalidate any in-flight full navigation so its late `.then` can't
+                   rebuild over the page this hash hop keeps mounted (the token guard
+                   only bails on a NEWER sequence). That bailed `.then` is also the only
+                   writer of `navigating: false`, so clear the flag here — a hash hop is
+                   synchronous and settles immediately. */
+                sequence += 1
+                clientPage.value = { ...clientPage.value, url: targetUrl, navigating: false }
+                historyEntries.restore(targetUrl.hash)
+                return
+            }
             const matched = matchRoute(patterns, pathname)
             const key = matched?.route ?? '*'
             const params = matched?.params ?? {}
@@ -275,19 +342,19 @@ export function router(
                        while it's still mounted. Disposing first kills that scope; surviving
                        prefix layouts then update in place on publish. */
                     const base = disposeFrom(divergence)
-                    clientPage.value = {
-                        route: chainRoute,
-                        params,
-                        url:
-                            typeof location === 'undefined'
-                                ? new URL(`http://localhost${path}`)
-                                : new URL(location.href),
-                        navigating: false,
-                    }
+                    const url = resolveUrl(path)
+                    clientPage.value = { route: chainRoute, params, url, navigating: false }
                     if (!hydrating) {
                         base.textContent = ''
                     }
                     buildFrom(base, divergence, chainKeys, layoutViews, pageView, params, hydrating)
+                    /* Reapply the destination entry's scroll once its DOM exists — a
+                       back/forward restores its offset, a fresh nav scrolls to the `#hash`
+                       anchor (now built) or the top. Runs on the initial paint too: with
+                       `scrollRestoration='manual'` the browser does NOT restore a reload's
+                       offset, so first paint recovers it from the persisted `history.state`
+                       (a fresh load with no persisted offset falls through to hash/top). */
+                    historyEntries.restore(url.hash)
                 }
                 /* Wrap the swap in a View Transition where the browser supports it, so
                    the page change cross-fades (and shared `view-transition-name` elements
@@ -311,6 +378,7 @@ export function router(
         disposed = true
         if (typeof window !== 'undefined') {
             window.removeEventListener('popstate', onPopState)
+            window.removeEventListener('pagehide', onPageHide)
             document.removeEventListener('click', onClick as EventListener)
         }
         stop()

package/src/lib/ui/runtime/historyEntries.ts

@@ -0,0 +1,113 @@
+import type { AbideHistoryState } from './types/AbideHistoryState.ts'
+
+/*
+Per-history-entry scroll buckets for manual scroll restoration. The browser's own
+restoration is disabled (`history.scrollRestoration = 'manual'` at router boot)
+because the router tears the page down and rebuilds it AFTER the browser would have
+restored scroll — so the offset is lost against a node that no longer exists. Instead
+each history entry carries a monotonic id (stamped into `history.state.abideEntry` by
+`navigate`), and this module buckets that entry's scroll offset: `save()` records the
+outgoing offset before history moves, `restore()` reapplies the destination entry's
+offset after its DOM is rebuilt (or, for an entry seen for the first time — a fresh
+navigation — honours a `#hash` anchor when one resolves, else scrolls to the top). A
+back/forward `adopt`s the entry id read from history.state; a `replace` `discard`s the
+current bucket (its content is superseded). The in-memory `offsets` Map covers the
+same-session back/forward path; `persist()` also mirrors the live scroll into
+`history.state` (on pagehide, when state still reflects the active entry) so a RELOAD
+— where the Map is gone and `scrollRestoration='manual'` keeps the browser from
+restoring — can still recover it via `restore()`'s `persistedOffset` fallback.
+
+Scroll APIs are reached off `globalThis` (guarded) so the module is a no-op on the
+server and in headless tests that never install a window. Shared mutable singleton on
+one object, reached without a barrel — mirrors `reactiveAbortState`/`clientPage`.
+*/
+
+/* The scroll surface: the real `Window` shape, made `Partial` so every member is
+   optional — the module degrades to a no-op on the server / in headless tests that
+   never install a window. */
+const view = globalThis as unknown as Partial<Window>
+
+/* The active entry's offset persisted in `history.state` — survives a reload (the
+   in-memory `offsets` Map does not). Honoured only when the stored id matches `current`,
+   so a foreign history entry's state never restores the wrong scroll. */
+function persistedOffset(): [number, number] | undefined {
+    const state = view.history?.state as AbideHistoryState | null
+    if (state?.abideEntry === current && Array.isArray(state.scroll)) {
+        return state.scroll
+    }
+    return undefined
+}
+
+/* The element a `#hash` addresses, if the document holds one. */
+function anchorFor(hash: string | undefined): HTMLElement | undefined {
+    if (hash === undefined || hash.length <= 1 || view.document === undefined) {
+        return undefined
+    }
+    return view.document.getElementById(hash.slice(1)) ?? undefined
+}
+
+/* The active entry's scroll offset is buckets.get(current); `seq` mints fresh ids. */
+const offsets = new Map<number, [number, number]>()
+let current = 0
+let seq = 0
+
+export const historyEntries = {
+    /* The active history entry's id — stamped into history.state by `navigate`. */
+    get current(): number {
+        return current
+    },
+    /* Mint the next entry id for a pushed history entry, making it active. */
+    next(): number {
+        current = seq += 1
+        return current
+    },
+    /* A back/forward landed on an existing entry — make it active so the following
+       save/restore target its bucket. Keeps `seq` ahead of any adopted id. */
+    adopt(entry: number): void {
+        current = entry
+        if (entry > seq) {
+            seq = entry
+        }
+    },
+    /* Bucket the active entry's current scroll offset, before history moves away. */
+    save(): void {
+        if (typeof view.scrollTo === 'function') {
+            offsets.set(current, [view.scrollX ?? 0, view.scrollY ?? 0])
+        }
+    },
+    /* Drop the active entry's bucket — a replace lands fresh content, so the saved
+       scroll no longer applies. (The replace's own `replaceState` overwrites the
+       persisted copy in `history.state`, so the durable fallback clears too.) */
+    discard(): void {
+        offsets.delete(current)
+    },
+    /* Mirror the live scroll into the active entry's `history.state` so it survives a
+       reload (the in-memory Map does not). Called on pagehide — when `history.state`
+       still reflects the active entry — merging to keep its `abideEntry` stamp. */
+    persist(): void {
+        if (typeof view.scrollTo !== 'function' || view.history === undefined) {
+            return
+        }
+        const state = (view.history.state as AbideHistoryState | null) ?? {}
+        view.history.replaceState({ ...state, scroll: [view.scrollX ?? 0, view.scrollY ?? 0] }, '')
+    },
+    /* Reapply the active entry's scroll once its DOM exists. A back/forward to a saved
+       entry returns to its offset (in-memory, else the reload-durable persisted copy);
+       a fresh entry honours a `#hash` anchor when one resolves, else scrolls to the top. */
+    restore(hash?: string): void {
+        if (typeof view.scrollTo !== 'function') {
+            return
+        }
+        const offset = offsets.get(current) ?? persistedOffset()
+        if (offset !== undefined) {
+            view.scrollTo(offset[0], offset[1])
+            return
+        }
+        const anchor = anchorFor(hash)
+        if (anchor !== undefined) {
+            anchor.scrollIntoView()
+            return
+        }
+        view.scrollTo(0, 0)
+    },
+}

package/src/lib/ui/runtime/liveScopes.ts

@@ -0,0 +1,15 @@
+import type { Scope } from '../types/Scope.ts'
+
+/*
+Dev-only registry of every live scope, for the inspector's Reactive tab. `scopes`
+stays empty and untouched unless installInspectorBridge flips `enabled` (gated by
+the server-injected `__abideInspect`), so production allocates and tracks nothing.
+createScope adds on construction and removes on dispose; the bridge reconstructs
+the scope forest from each entry's `id` + `parent.id` (the Scope surface exposes
+no children accessor, so the flat set + parent links is the traversal path). One
+mutable singleton object — mirrors `reactiveAbortState`, reached without a barrel.
+*/
+export const liveScopes: { enabled: boolean; scopes: Set<Scope> } = {
+    enabled: false,
+    scopes: new Set(),
+}

package/src/lib/ui/runtime/types/AbideHistoryState.ts

@@ -0,0 +1,9 @@
+/* The shape abide stamps into `History.state`: a monotonic `abideEntry` id the router
+   buckets scroll by, and the last `scroll` offset persisted for that entry (so a reload
+   can recover it — the in-memory bucket does not survive). Both optional: a foreign or
+   bare entry (one another script pushed, or the first landing before a stamp) carries
+   neither, which the readers treat as "no abide data". */
+export type AbideHistoryState = {
+    abideEntry?: number
+    scroll?: [number, number]
+}

package/src/lib/ui/startClient.ts

@@ -6,6 +6,7 @@ import { setPageResolver } from '../shared/setPageResolver.ts'
 import type { CacheSnapshotEntry } from '../shared/types/CacheSnapshotEntry.ts'
 import type { StreamedResolution } from '../shared/types/StreamedResolution.ts'
 import { installHotBridge } from './installHotBridge.ts'
+import { installInspectorBridge } from './installInspectorBridge.ts'
 import { probeNavigation } from './probeNavigation.ts'
 import { router } from './router.ts'
 import { clientPage } from './runtime/clientPage.ts'
@@ -42,6 +43,11 @@ export function startClient(
     if ((globalThis as { __abideDev?: boolean }).__abideDev) {
         installHotBridge()
     }
+    /* Inspector only: the server injects `__abideInspect` when ABIDE_ENABLE_INSPECTOR
+       is on, so the scope/router bridge arms before the router builds any scope. */
+    if ((globalThis as { __abideInspect?: boolean }).__abideInspect) {
+        installInspectorBridge()
+    }
     const ssr = (globalThis as { __SSR__?: SsrPayload }).__SSR__ ?? {}
     setBaseResolver(() => ssr.base ?? '')
     /* The `page` proxy reads route/params/url off the router-updated snapshot. */

package/src/lib/ui/types/Scope.ts

@@ -22,6 +22,9 @@ the ONLY public entry; everything else is a method reached through it (the
 */
 export type Scope = {
     readonly id: string
+    /* Dev-only display name (the host component/element it mounted into) for the
+       inspector's Reactive tab; undefined for SSR/detached/child scopes. */
+    readonly label?: string
     readonly parent: Scope | undefined
     /* data — mirrors Doc */
     read: <T>(path: string) => T

package/src/lib/ui/compile/HTML_TAGS.ts

@@ -1,132 +0,0 @@
-/*
-Every standard HTML element name (lowercase), plus the two foreign-content roots
-`svg`/`math`. A component wrapper tag that collides with one of these is a real
-element with a content model and parser quirks — `<button>`/`<a>` reject interactive
-descendants, table/list/select families foster or auto-close non-conforming children,
-void elements self-close, and `<svg>`/`<math>` switch the parser into SVG/MathML
-namespace so the wrapper's HTML children break out (foster-parent) of it entirely —
-so the parser reparents the component's own markup out of the wrapper and hydration
-claims `null`. `componentWrapperTag` remaps any such name to a transparent custom
-element instead. Pure SVG/MathML descendant names (`circle`, `path`, `mrow`, …) are
-NOT here: in HTML context they are inert unknown elements that hold children fine, so
-a `<Circle>` component stays as-is like any non-element name. Superset of VOID_TAGS
-(which the parser/SSR still use for self-closing); this set is only the
-wrapper-safety check.
-*/
-export const HTML_TAGS: ReadonlySet<string> = new Set([
-    'a',
-    'abbr',
-    'address',
-    'area',
-    'article',
-    'aside',
-    'audio',
-    'b',
-    'base',
-    'bdi',
-    'bdo',
-    'blockquote',
-    'body',
-    'br',
-    'button',
-    'canvas',
-    'caption',
-    'cite',
-    'code',
-    'col',
-    'colgroup',
-    'data',
-    'datalist',
-    'dd',
-    'del',
-    'details',
-    'dfn',
-    'dialog',
-    'div',
-    'dl',
-    'dt',
-    'em',
-    'embed',
-    'fieldset',
-    'figcaption',
-    'figure',
-    'footer',
-    'form',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'head',
-    'header',
-    'hgroup',
-    'hr',
-    'html',
-    'i',
-    'iframe',
-    'img',
-    'input',
-    'ins',
-    'kbd',
-    'label',
-    'legend',
-    'li',
-    'link',
-    'main',
-    'map',
-    'mark',
-    'math',
-    'menu',
-    'meta',
-    'meter',
-    'nav',
-    'noscript',
-    'object',
-    'ol',
-    'optgroup',
-    'option',
-    'output',
-    'p',
-    'param',
-    'picture',
-    'pre',
-    'progress',
-    'q',
-    'rp',
-    'rt',
-    'ruby',
-    's',
-    'samp',
-    'script',
-    'search',
-    'section',
-    'select',
-    'slot',
-    'small',
-    'source',
-    'span',
-    'strong',
-    'style',
-    'sub',
-    'summary',
-    'sup',
-    'svg',
-    'table',
-    'tbody',
-    'td',
-    'template',
-    'textarea',
-    'tfoot',
-    'th',
-    'thead',
-    'time',
-    'title',
-    'tr',
-    'track',
-    'u',
-    'ul',
-    'var',
-    'video',
-    'wbr',
-])