ngx-json-render 0.8.0 → 0.8.2

package/README.md

@@ -8,7 +8,7 @@ Built on `@json-render/core` (the same spec format, expressions, state store, ac
 
 This is an Angular **adapter over the official core**, not a second implementation of it — `@json-render/core` is a peer dependency, and the spec your model emits is the same one the React, Vue, Solid and Svelte renderers consume. A catalog and a spec written here move to another framework unchanged.
 
-**[Live demo](https://shteynu.github.io/ngx-json-render/)** — interactive spec (bindings, repeat, confirm, watch), a SpecStream rendering progressively that you can stop mid-generation, and a chat where prose and UI patches arrive in one reply; both streaming tabs replay a recording, or call a real model on your own key ([source](https://github.com/shteynu/ngx-json-render/tree/main/projects/demo)) — or [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/shteynu/ngx-json-render)
+**[Live demo](https://shteynu.github.io/ngx-json-render/)** — opens on a sales dashboard streaming in patch by patch, which you can stop mid-generation; plus a playground, an interactive spec (bindings, repeat, confirm, watch), and a chat where prose and UI patches arrive in one reply. Both streaming tabs replay a recording, or call a real model on your own key ([source](https://github.com/shteynu/ngx-json-render/tree/main/projects/demo)) — or [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/shteynu/ngx-json-render)
 
 ![A SpecStream of RFC 6902 patches rendering progressively into an Angular dashboard](https://raw.githubusercontent.com/shteynu/ngx-json-render/main/docs/streaming.gif)
 
@@ -62,7 +62,7 @@ the Material catalog has one too (`--skill ngx-json-render-material`).
 
 Writing a catalog is the honest first step, but you do not have to take it to
 see a spec render. [`ngx-json-render-material`](https://www.npmjs.com/package/ngx-json-render-material)
-ships 28 Angular Material components already registered, so a generated spec
+ships 29 Angular Material components already registered, so a generated spec
 renders with nothing else wired up:
 
 ```bash
@@ -119,7 +119,7 @@ against `@hashbrownai/angular` 0.6.1, as published on 2026-09-30:
 | What the model emits | A json-render spec, streamed as RFC 6902 patches — the format the React, Vue, Svelte and Solid renderers read, so a catalog and a spec move between frameworks unchanged | Hashbrown's own JSON, generated against a schema built from the components you expose; read by Hashbrown's Angular and React clients                 |
 | Server               | Anything that streams text: the [AI SDK](https://ai-sdk.dev) in a few lines, or your own endpoint; `catalog.prompt()` writes the system prompt                           | An [AG-UI](https://docs.ag-ui.com) endpoint, built with Hashbrown's adapters (OpenAI, Anthropic, Google, Azure, Bedrock, Ollama) or your own mapping |
 | Angular              | 20, 21 and 22, each tested in CI                                                                                                                                         | 22 only since 0.6 (0.5 supported 20 and 21)                                                                                                          |
-| Components           | Your own, or 28 ready-made Angular Material ones ([`ngx-json-render-material`](https://www.npmjs.com/package/ngx-json-render-material))                                  | Your own (`exposeComponent`, UI kits)                                                                                                                |
+| Components           | Your own, or 29 ready-made Angular Material ones ([`ngx-json-render-material`](https://www.npmjs.com/package/ngx-json-render-material))                                  | Your own (`exposeComponent`, UI kits)                                                                                                                |
 | Beyond rendering     | Rendering-focused: state and two-way bindings in the spec, actions, visibility, repeat, watch, confirmation dialogs                                                      | An agent toolkit: client-side tools, a QuickJS sandbox for model-written code, shared agent state, interrupts, streaming Markdown                    |
 | License              | Apache-2.0                                                                                                                                                               | MIT                                                                                                                                                  |
 
@@ -306,6 +306,40 @@ app.post('/api/generate', async (req, res) => {
 
 The patches apply to the `spec` signal as each line arrives, so the UI assembles on screen while the model is still generating — exactly what the [demo's Streaming tab](https://shteynu.github.io/ngx-json-render/) replays. Prefer structured output? `catalog.jsonSchema()` exports a JSON Schema for `streamObject`/tool calls, and `checkSpec(spec, 'strict', { catalog })` checks a finished spec against the catalog, props included — see [Checking what the model produced](#checking-what-the-model-produced) for why that and not `catalog.validate(spec)` alone.
 
+### With Genkit
+
+On Firebase, or anywhere else [Genkit](https://genkit.dev) already runs, the route has the same shape. `ai.generateStream` streams the model's text, and that text is the JSONL the system prompt asked for, so it goes to the browser unchanged:
+
+```ts
+// server.ts — Express with Genkit and its Google AI plugin
+import express from 'express';
+import { genkit } from 'genkit';
+import { googleAI } from '@genkit-ai/google-genai';
+import { buildUserPrompt } from '@json-render/core';
+import { catalog } from './catalog';
+
+const ai = genkit({ plugins: [googleAI()] }); // reads GEMINI_API_KEY
+
+const app = express();
+app.use(express.json());
+
+app.post('/api/generate', async (req, res) => {
+  const { prompt, currentSpec } = req.body; // and `context`, yours to use
+
+  const { stream } = ai.generateStream({
+    model: googleAI.model('gemini-3.5-flash'),
+    system: catalog.prompt(),
+    prompt: buildUserPrompt({ prompt, currentSpec }), // currentSpec: refine, not restart
+  });
+
+  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+  for await (const chunk of stream) res.write(chunk.text);
+  res.end();
+});
+```
+
+`buildUserPrompt` comes from `@json-render/core`. Given a `currentSpec`, it asks the model for patches to that spec, so `ui.send(prompt, { previousSpec })` refines the UI instead of regenerating it; without one, it adds a reminder of the order to stream in. Another model is another plugin and `model` line, such as `vertexAI` from the same package. Serve the text from a plain route like this one rather than through `expressHandler` from `@genkit-ai/express`: that wraps every chunk in its own server-sent event (`data: {"message": …}`), which `injectUIStream` does not read.
+
 ### Chat + GenUI
 
 When the model answers in prose _and_ renders a UI in the same turn, reach for
@@ -346,6 +380,14 @@ readonly msg = jsonRenderMessage(() => this.message().parts);
 // template: {{ msg.text() }} @if (msg.hasSpec()) { <json-render [spec]="msg.spec()" ... /> }
 ```
 
+With `@ai-sdk/angular`, hand that component a copy of the message being
+streamed. The SDK's `Chat` writes every chunk into one message object and
+passes that same object back each time, so a signal input holding it never
+changes, and the message renders empty even after the stream ends.
+[`examples/ai-sdk-chat`](https://github.com/shteynu/ngx-json-render/tree/main/examples/ai-sdk-chat)
+is the whole path, server to rendered message, and makes the copy in
+`app.ts`.
+
 Two things about the parts themselves, both the SDK's semantics rather than
 this package's, and both silent when you get them wrong:
 
@@ -536,6 +578,23 @@ The spec renders while the model is still writing the tool call, from the host's
 
 The server side is upstream's `@json-render/mcp`, which serves the view as a single HTML resource. [`projects/mcp-app`](https://github.com/shteynu/ngx-json-render/tree/main/projects/mcp-app) is a complete example with the Material catalog: the view, the build that inlines it into one page, and a server that works around two `createMcpApp` problems.
 
+## Devtools
+
+`ngx-json-render/devtools` is the Angular counterpart of `@json-render/devtools-react` (and its Vue, Svelte and Solid siblings): a floating panel with the spec tree, the live state, every action dispatched, every stream patch with its token usage, and the catalog, plus a picker that finds the element under the pointer. The panel itself is upstream's `@json-render/devtools`, an optional peer. It pins `@json-render/core` exactly, so install the version that matches your core:
+
+```bash
+npm install -D @json-render/devtools@0.21
+```
+
+```html
+<json-render #renderer [spec]="ui.spec()" [registry]="registry" />
+<json-render-devtools [renderer]="renderer" [catalog]="catalog" />
+```
+
+Angular has no provider above `<json-render>` for the panel to read, so the renderer is passed in by template reference. Streams need no wiring: every `injectUIStream` and `injectChatUI` generation in the app shows up in the Stream tab. Pass `[chat]="chat"` and each assistant reply with a spec becomes a generation you can switch between. `Cmd/Ctrl+Shift+J` toggles the panel (`hotkey`), and `(event)` hands every recorded event to your own logging.
+
+It renders nothing outside dev mode, and loads the panel with a dynamic `import()` that a production build removes, so you can leave the tag in your template.
+
 ## Testing
 
 `ngx-json-render/testing` is a separate entry point, so nothing in it can reach
@@ -907,6 +966,8 @@ Schema alone (`ngx-json-render/schema`): `schema`, `AngularSchema`, `AngularSpec
 
 MCP Apps (`ngx-json-render/mcp`): `injectJsonRenderApp`, `parseSpecFromToolResult`, `messageText`, and the types `JsonRenderApp`, `JsonRenderAppOptions`. Needs the optional peers `@modelcontextprotocol/ext-apps` and `@modelcontextprotocol/sdk`.
 
+Devtools (`ngx-json-render/devtools`): `JsonRenderDevtools` (`<json-render-devtools>`), and the types `DevtoolsEvent`, `PanelPosition`. Needs the optional peer `@json-render/devtools`.
+
 Testing (`ngx-json-render/testing`): `renderSpec`, `renderComponent`, `recordedTransport`, `specStream`, `usageLine`.
 
 Everything from `@json-render/core` (types, `createStateStore`, `nestedToFlat`, prompt builders, spec validators, SpecStream compiler) composes with this package; the most common symbols are re-exported.

package/fesm2022/ngx-json-render-devtools.mjs

@@ -0,0 +1,262 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, DestroyRef, isDevMode, afterNextRender, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { registerActionObserver, markDevtoolsActive } from '@json-render/core';
+import { ɵregisterStreamObserver as _registerStreamObserver } from 'ngx-json-render';
+
+/**
+ * A floating json-render devtools panel for an Angular app — the counterpart
+ * of `<JsonRenderDevtools />` in `@json-render/devtools-react`, `-vue`,
+ * `-svelte` and `-solid`, with the same tabs (Spec, State, Actions, Stream,
+ * Catalog) and the same element picker.
+ *
+ * Angular has no provider above `<json-render>` to read the renderer from, so
+ * the renderer is passed in by template reference. Streams need no wiring:
+ * every `injectUIStream` and `injectChatUI` generation in the app reaches the
+ * Stream tab.
+ *
+ * Renders nothing outside dev mode, and loads the panel itself
+ * (`@json-render/devtools`) with a dynamic `import()`, so a production build
+ * never fetches it.
+ *
+ * @example
+ * ```html
+ * <json-render #renderer [spec]="ui.spec()" [registry]="registry" />
+ * <json-render-devtools [renderer]="renderer" [catalog]="catalog" />
+ * ```
+ */
+class JsonRenderDevtools {
+    /** The renderer to inspect: its spec, state store and catalog. */
+    renderer = input(null, ...(ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []));
+    /** Spec to show instead of the renderer's. */
+    spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
+    /** Catalog for the Catalog tab, if the renderer was not given one. */
+    catalog = input(undefined, ...(ngDevMode ? [{ debugName: "catalog" }] : /* istanbul ignore next */ []));
+    /**
+     * A chat from `injectChatUI`: every assistant reply with a spec becomes a
+     * generation in the Spec tab's switcher.
+     */
+    chat = input(null, ...(ngDevMode ? [{ debugName: "chat" }] : /* istanbul ignore next */ []));
+    initialOpen = input(false, ...(ngDevMode ? [{ debugName: "initialOpen" }] : /* istanbul ignore next */ []));
+    position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Toggle shortcut; `false` disables it. */
+    hotkey = input('mod+shift+j', ...(ngDevMode ? [{ debugName: "hotkey" }] : /* istanbul ignore next */ []));
+    /** Events kept in the ring buffer. Read once, at creation. */
+    bufferSize = input(500, ...(ngDevMode ? [{ debugName: "bufferSize" }] : /* istanbul ignore next */ []));
+    /** Pad the page while the panel is open instead of overlaying it. */
+    reserveSpace = input(true, ...(ngDevMode ? [{ debugName: "reserveSpace" }] : /* istanbul ignore next */ []));
+    /** Let the viewer flip the panel between bottom and right dock. */
+    allowDockToggle = input(true, ...(ngDevMode ? [{ debugName: "allowDockToggle" }] : /* istanbul ignore next */ []));
+    /** Every event the panel records, for an app's own logging. */
+    event = output();
+    destroyRef = inject(DestroyRef);
+    events = null;
+    panel = null;
+    destroyed = false;
+    constructor() {
+        if (!isDevMode())
+            return;
+        this.destroyRef.onDestroy(() => (this.destroyed = true));
+        afterNextRender(() => {
+            void this.mount();
+        });
+        // The panel reads everything through getters, so it only needs telling
+        // when to re-read: whenever the spec, the chat or the renderer changes.
+        effect(() => {
+            this.currentSpec();
+            this.chat()?.messages();
+            this.renderer();
+            untracked(() => this.panel?.refresh());
+        });
+        // A state write becomes an event, which redraws the State tab — the
+        // store has no subscribe of the shape the panel's StateStore expects.
+        effect((onCleanup) => {
+            const store = this.renderer()?.stateStore;
+            if (!store)
+                return;
+            onCleanup(store.subscribeChanges((changes) => {
+                for (const change of changes) {
+                    this.events?.push({
+                        kind: 'state-set',
+                        at: Date.now(),
+                        path: change.path,
+                        prev: undefined,
+                        next: change.value,
+                    });
+                }
+            }));
+        });
+    }
+    currentSpec() {
+        const override = this.spec();
+        if (override !== undefined)
+            return override;
+        const chat = this.chat();
+        if (chat) {
+            const replies = chat.messages().filter((m) => m.spec);
+            return replies.at(-1)?.spec ?? null;
+        }
+        return this.renderer()?.spec() ?? null;
+    }
+    currentCatalog() {
+        const own = this.catalog();
+        if (own !== undefined)
+            return own;
+        // The renderer's catalog input is typed structurally; a catalog made with
+        // `schema.createCatalog` is a core Catalog, which is what the tab reads.
+        const fromRenderer = this.renderer()?.catalog();
+        return fromRenderer && 'data' in fromRenderer
+            ? fromRenderer
+            : null;
+    }
+    generations() {
+        const chat = this.chat();
+        if (!chat) {
+            const spec = this.currentSpec();
+            return spec ? [{ id: 'current', label: 'Current', spec }] : [];
+        }
+        return chat
+            .messages()
+            .filter((m) => m.role === 'assistant' && m.spec)
+            .map((m, i) => ({
+            id: m.id,
+            label: `Generation ${i + 1}`,
+            spec: m.spec,
+        }));
+    }
+    stateStore() {
+        const store = this.renderer()?.stateStore;
+        if (!store)
+            return null;
+        return {
+            get: (path) => store.get(path),
+            set: (path, value) => store.set(path, value),
+            update: (updates) => store.update(updates),
+            getSnapshot: () => store.getSnapshot(),
+            subscribe: () => () => { },
+        };
+    }
+    async mount() {
+        // A production build defines `ngDevMode` as false, so the bundler drops
+        // the import below: nothing references the panel chunk, even if esbuild
+        // still writes it to disk.
+        if (typeof ngDevMode !== 'undefined' && !ngDevMode)
+            return;
+        const devtools = await import('@json-render/devtools');
+        if (this.destroyed)
+            return;
+        const events = devtools.createEventStore({
+            bufferSize: this.bufferSize(),
+        });
+        this.events = events;
+        const unsubscribeEvents = events.subscribe(() => {
+            const last = events.snapshot().at(-1);
+            if (last)
+                this.event.emit(last);
+        });
+        // Both observers come from the app's own `@json-render/core` and
+        // `ngx-json-render`, never through `@json-render/devtools`: the registries
+        // are module singletons, and devtools may carry a nested copy of core.
+        const unsubscribeActions = registerActionObserver({
+            onDispatch: (e) => events.push({
+                kind: 'action-dispatched',
+                at: e.at,
+                id: e.id,
+                name: e.name,
+                params: e.params,
+            }),
+            onSettle: (e) => events.push({
+                kind: 'action-settled',
+                at: e.at,
+                id: e.id,
+                ok: e.ok,
+                durationMs: e.durationMs,
+                result: e.result,
+                error: e.error !== undefined ? String(e.error) : undefined,
+            }),
+        });
+        const unsubscribeStreams = _registerStreamObserver({
+            onStart: () => events.push({
+                kind: 'stream-lifecycle',
+                at: Date.now(),
+                phase: 'start',
+            }),
+            onPatch: (patch) => events.push({
+                kind: 'stream-patch',
+                at: Date.now(),
+                patch,
+                source: 'json',
+            }),
+            onText: (text) => events.push({ kind: 'stream-text', at: Date.now(), text }),
+            onUsage: (usage) => devtools.recordUsage(events, usage),
+            onEnd: (ok) => events.push({
+                kind: 'stream-lifecycle',
+                at: Date.now(),
+                phase: 'end',
+                ok,
+            }),
+        });
+        const selection = devtools.createSelectionBus();
+        this.panel = devtools.createPanel({
+            context: {
+                events,
+                getSpec: () => this.currentSpec(),
+                getSpecs: () => this.generations(),
+                getCatalog: () => this.currentCatalog(),
+                getStateStore: () => this.stateStore(),
+                startPicker: (options) => devtools.startPicker(options),
+                selection,
+                activateTab: () => { },
+            },
+            tabs: [
+                devtools.specTab(),
+                devtools.stateTab(),
+                devtools.actionsTab(),
+                devtools.streamTab(),
+                devtools.catalogTab(),
+            ],
+            initialOpen: this.initialOpen(),
+            position: this.position(),
+            hotkey: this.hotkey(),
+            reserveSpace: this.reserveSpace(),
+            allowDockToggle: this.allowDockToggle(),
+        });
+        const unsubscribeSelection = selection.subscribe((key) => {
+            if (key)
+                devtools.highlightElement(key);
+        });
+        // Makes every renderer wrap its elements in `data-jr-key` spans, which is
+        // what the picker and the highlight look for.
+        const releaseActive = markDevtoolsActive();
+        this.destroyRef.onDestroy(() => {
+            releaseActive();
+            unsubscribeSelection();
+            this.panel?.destroy();
+            this.panel = null;
+            unsubscribeStreams();
+            unsubscribeActions();
+            unsubscribeEvents();
+            this.events = null;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderDevtools, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: JsonRenderDevtools, isStandalone: true, selector: "json-render-devtools", inputs: { renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, chat: { classPropertyName: "chat", publicName: "chat", isSignal: true, isRequired: false, transformFunction: null }, initialOpen: { classPropertyName: "initialOpen", publicName: "initialOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, reserveSpace: { classPropertyName: "reserveSpace", publicName: "reserveSpace", isSignal: true, isRequired: false, transformFunction: null }, allowDockToggle: { classPropertyName: "allowDockToggle", publicName: "allowDockToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderDevtools, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'json-render-devtools',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { renderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderer", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }], catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: false }] }], chat: [{ type: i0.Input, args: [{ isSignal: true, alias: "chat", required: false }] }], initialOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialOpen", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], bufferSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferSize", required: false }] }], reserveSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "reserveSpace", required: false }] }], allowDockToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDockToggle", required: false }] }], event: [{ type: i0.Output, args: ["event"] }] } });
+
+/*
+ * Public API Surface of ngx-json-render/devtools
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { JsonRenderDevtools };
+//# sourceMappingURL=ngx-json-render-devtools.mjs.map

package/fesm2022/ngx-json-render-devtools.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-json-render-devtools.mjs","sources":["../../../projects/ngx-json-render/devtools/src/json-render-devtools.ts","../../../projects/ngx-json-render/devtools/src/public-api.ts","../../../projects/ngx-json-render/devtools/src/ngx-json-render-devtools.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  isDevMode,\n  output,\n  untracked,\n} from '@angular/core';\nimport {\n  type Catalog,\n  type Spec,\n  type StateStore,\n  markDevtoolsActive,\n  registerActionObserver,\n} from '@json-render/core';\nimport type {\n  DevtoolsEvent,\n  EventStore,\n  PanelHandle,\n  PanelPosition,\n  SpecEntry,\n} from '@json-render/devtools';\nimport {\n  type ChatUIReturn,\n  type JsonRenderer,\n  ɵregisterStreamObserver,\n} from 'ngx-json-render';\n\n/**\n * A floating json-render devtools panel for an Angular app — the counterpart\n * of `<JsonRenderDevtools />` in `@json-render/devtools-react`, `-vue`,\n * `-svelte` and `-solid`, with the same tabs (Spec, State, Actions, Stream,\n * Catalog) and the same element picker.\n *\n * Angular has no provider above `<json-render>` to read the renderer from, so\n * the renderer is passed in by template reference. Streams need no wiring:\n * every `injectUIStream` and `injectChatUI` generation in the app reaches the\n * Stream tab.\n *\n * Renders nothing outside dev mode, and loads the panel itself\n * (`@json-render/devtools`) with a dynamic `import()`, so a production build\n * never fetches it.\n *\n * @example\n * ```html\n * <json-render #renderer [spec]=\"ui.spec()\" [registry]=\"registry\" />\n * <json-render-devtools [renderer]=\"renderer\" [catalog]=\"catalog\" />\n * ```\n */\n@Component({\n  selector: 'json-render-devtools',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class JsonRenderDevtools {\n  /** The renderer to inspect: its spec, state store and catalog. */\n  readonly renderer = input<JsonRenderer | null>(null);\n  /** Spec to show instead of the renderer's. */\n  readonly spec = input<Spec | null | undefined>(undefined);\n  /** Catalog for the Catalog tab, if the renderer was not given one. */\n  readonly catalog = input<Catalog | null | undefined>(undefined);\n  /**\n   * A chat from `injectChatUI`: every assistant reply with a spec becomes a\n   * generation in the Spec tab's switcher.\n   */\n  readonly chat = input<ChatUIReturn | null>(null);\n  readonly initialOpen = input(false);\n  readonly position = input<PanelPosition>('bottom-right');\n  /** Toggle shortcut; `false` disables it. */\n  readonly hotkey = input<string | false>('mod+shift+j');\n  /** Events kept in the ring buffer. Read once, at creation. */\n  readonly bufferSize = input(500);\n  /** Pad the page while the panel is open instead of overlaying it. */\n  readonly reserveSpace = input(true);\n  /** Let the viewer flip the panel between bottom and right dock. */\n  readonly allowDockToggle = input(true);\n  /** Every event the panel records, for an app's own logging. */\n  readonly event = output<DevtoolsEvent>();\n\n  private readonly destroyRef = inject(DestroyRef);\n  private events: EventStore | null = null;\n  private panel: PanelHandle | null = null;\n  private destroyed = false;\n\n  constructor() {\n    if (!isDevMode()) return;\n\n    this.destroyRef.onDestroy(() => (this.destroyed = true));\n    afterNextRender(() => {\n      void this.mount();\n    });\n\n    // The panel reads everything through getters, so it only needs telling\n    // when to re-read: whenever the spec, the chat or the renderer changes.\n    effect(() => {\n      this.currentSpec();\n      this.chat()?.messages();\n      this.renderer();\n      untracked(() => this.panel?.refresh());\n    });\n\n    // A state write becomes an event, which redraws the State tab — the\n    // store has no subscribe of the shape the panel's StateStore expects.\n    effect((onCleanup) => {\n      const store = this.renderer()?.stateStore;\n      if (!store) return;\n      onCleanup(\n        store.subscribeChanges((changes) => {\n          for (const change of changes) {\n            this.events?.push({\n              kind: 'state-set',\n              at: Date.now(),\n              path: change.path,\n              prev: undefined,\n              next: change.value,\n            });\n          }\n        }),\n      );\n    });\n  }\n\n  private currentSpec(): Spec | null {\n    const override = this.spec();\n    if (override !== undefined) return override;\n    const chat = this.chat();\n    if (chat) {\n      const replies = chat.messages().filter((m) => m.spec);\n      return replies.at(-1)?.spec ?? null;\n    }\n    return this.renderer()?.spec() ?? null;\n  }\n\n  private currentCatalog(): Catalog | null {\n    const own = this.catalog();\n    if (own !== undefined) return own;\n    // The renderer's catalog input is typed structurally; a catalog made with\n    // `schema.createCatalog` is a core Catalog, which is what the tab reads.\n    const fromRenderer = this.renderer()?.catalog();\n    return fromRenderer && 'data' in fromRenderer\n      ? (fromRenderer as unknown as Catalog)\n      : null;\n  }\n\n  private generations(): SpecEntry[] {\n    const chat = this.chat();\n    if (!chat) {\n      const spec = this.currentSpec();\n      return spec ? [{ id: 'current', label: 'Current', spec }] : [];\n    }\n    return chat\n      .messages()\n      .filter((m) => m.role === 'assistant' && m.spec)\n      .map((m, i) => ({\n        id: m.id,\n        label: `Generation ${i + 1}`,\n        spec: m.spec as Spec,\n      }));\n  }\n\n  private stateStore(): StateStore | null {\n    const store = this.renderer()?.stateStore;\n    if (!store) return null;\n    return {\n      get: (path) => store.get(path),\n      set: (path, value) => store.set(path, value),\n      update: (updates) => store.update(updates),\n      getSnapshot: () => store.getSnapshot(),\n      subscribe: () => () => {},\n    };\n  }\n\n  private async mount(): Promise<void> {\n    // A production build defines `ngDevMode` as false, so the bundler drops\n    // the import below: nothing references the panel chunk, even if esbuild\n    // still writes it to disk.\n    if (typeof ngDevMode !== 'undefined' && !ngDevMode) return;\n    const devtools = await import('@json-render/devtools');\n    if (this.destroyed) return;\n\n    const events = devtools.createEventStore({\n      bufferSize: this.bufferSize(),\n    });\n    this.events = events;\n\n    const unsubscribeEvents = events.subscribe(() => {\n      const last = events.snapshot().at(-1);\n      if (last) this.event.emit(last);\n    });\n\n    // Both observers come from the app's own `@json-render/core` and\n    // `ngx-json-render`, never through `@json-render/devtools`: the registries\n    // are module singletons, and devtools may carry a nested copy of core.\n    const unsubscribeActions = registerActionObserver({\n      onDispatch: (e) =>\n        events.push({\n          kind: 'action-dispatched',\n          at: e.at,\n          id: e.id,\n          name: e.name,\n          params: e.params,\n        }),\n      onSettle: (e) =>\n        events.push({\n          kind: 'action-settled',\n          at: e.at,\n          id: e.id,\n          ok: e.ok,\n          durationMs: e.durationMs,\n          result: e.result,\n          error: e.error !== undefined ? String(e.error) : undefined,\n        }),\n    });\n\n    const unsubscribeStreams = ɵregisterStreamObserver({\n      onStart: () =>\n        events.push({\n          kind: 'stream-lifecycle',\n          at: Date.now(),\n          phase: 'start',\n        }),\n      onPatch: (patch) =>\n        events.push({\n          kind: 'stream-patch',\n          at: Date.now(),\n          patch,\n          source: 'json',\n        }),\n      onText: (text) =>\n        events.push({ kind: 'stream-text', at: Date.now(), text }),\n      onUsage: (usage) => devtools.recordUsage(events, usage),\n      onEnd: (ok) =>\n        events.push({\n          kind: 'stream-lifecycle',\n          at: Date.now(),\n          phase: 'end',\n          ok,\n        }),\n    });\n\n    const selection = devtools.createSelectionBus();\n    this.panel = devtools.createPanel({\n      context: {\n        events,\n        getSpec: () => this.currentSpec(),\n        getSpecs: () => this.generations(),\n        getCatalog: () => this.currentCatalog(),\n        getStateStore: () => this.stateStore(),\n        startPicker: (options) => devtools.startPicker(options),\n        selection,\n        activateTab: () => {},\n      },\n      tabs: [\n        devtools.specTab(),\n        devtools.stateTab(),\n        devtools.actionsTab(),\n        devtools.streamTab(),\n        devtools.catalogTab(),\n      ],\n      initialOpen: this.initialOpen(),\n      position: this.position(),\n      hotkey: this.hotkey(),\n      reserveSpace: this.reserveSpace(),\n      allowDockToggle: this.allowDockToggle(),\n    });\n\n    const unsubscribeSelection = selection.subscribe((key) => {\n      if (key) devtools.highlightElement(key);\n    });\n    // Makes every renderer wrap its elements in `data-jr-key` spans, which is\n    // what the picker and the highlight look for.\n    const releaseActive = markDevtoolsActive();\n\n    this.destroyRef.onDestroy(() => {\n      releaseActive();\n      unsubscribeSelection();\n      this.panel?.destroy();\n      this.panel = null;\n      unsubscribeStreams();\n      unsubscribeActions();\n      unsubscribeEvents();\n      this.events = null;\n    });\n  }\n}\n","/*\n * Public API Surface of ngx-json-render/devtools\n */\n\nexport { JsonRenderDevtools } from './json-render-devtools';\nexport type { DevtoolsEvent, PanelPosition } from '@json-render/devtools';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["ɵregisterStreamObserver"],"mappings":"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"}

package/fesm2022/ngx-json-render.mjs

@@ -3139,6 +3139,67 @@ function applyPatch(spec, patch) {
     return newSpec;
 }
 
+const observers = new Set();
+/**
+ * Register an observer for every stream in the app. Returns the function that
+ * removes it. Private API for `ngx-json-render/devtools`.
+ */
+function ɵregisterStreamObserver(observer) {
+    observers.add(observer);
+    return () => {
+        observers.delete(observer);
+    };
+}
+/**
+ * Tell every observer. An observer that throws is a devtools bug, and it must
+ * not become a failed generation in the app it is inspecting.
+ */
+function notifyStreamObservers(event, ...args) {
+    if (observers.size === 0)
+        return;
+    for (const observer of observers) {
+        try {
+            observer[event]?.(...args);
+        }
+        catch (error) {
+            console.error('[ngx-json-render] A stream observer threw:', error);
+        }
+    }
+}
+/**
+ * The start and end of one hook's generations, as observers see them.
+ *
+ * A superseded or stopped request only settles once its abort has gone
+ * through, after the next generation may already have started. Reporting its
+ * end from there would close the new generation instead of the old one, so a
+ * generation ends here the moment it is superseded or stopped, and its own
+ * late end is dropped.
+ */
+function createObservedRuns() {
+    let endOpen = null;
+    return {
+        start() {
+            endOpen?.();
+            let ended = false;
+            const end = (ok) => {
+                if (ended)
+                    return;
+                ended = true;
+                if (endOpen === stop)
+                    endOpen = null;
+                notifyStreamObservers('onEnd', ok);
+            };
+            const stop = () => end(true);
+            endOpen = stop;
+            notifyStreamObservers('onStart');
+            return end;
+        },
+        stop() {
+            endOpen?.();
+        },
+    };
+}
+
 /**
  * Convert a flat element list to a Spec.
  * Input elements use key/parentKey to establish identity and relationships.
@@ -3435,9 +3496,11 @@ function injectUIStream(options) {
         catalog: options.catalog ?? null,
     };
     const session = createStreamSession();
+    const runs = createObservedRuns();
     inject(DestroyRef).onDestroy(() => session.cancel());
     const stop = () => {
         session.cancel();
+        runs.stop();
         isStreaming.set(false);
     };
     const clear = () => {
@@ -3462,6 +3525,8 @@ function injectUIStream(options) {
             ? { ...previousSpec, elements: { ...previousSpec.elements } }
             : { root: '', elements: {} };
         spec.set(currentSpec);
+        const end = runs.start();
+        let failed = false;
         const handleLine = (line) => {
             const parsed = parseLine(line);
             if (!parsed)
@@ -3469,11 +3534,13 @@ function injectUIStream(options) {
             gate.commit(() => {
                 if (parsed.type === 'usage') {
                     usage.set(parsed.usage);
+                    notifyStreamObservers('onUsage', parsed.usage);
                     return;
                 }
                 rawLines.update((prev) => [...prev, line]);
                 currentSpec = applyPatch(currentSpec, parsed.patch);
                 spec.set(currentSpec);
+                notifyStreamObservers('onPatch', parsed.patch);
             });
         };
         try {
@@ -3504,6 +3571,7 @@ function injectUIStream(options) {
                 // not want rendered.
                 if (check.blocked || (validate === 'strict' && check.hasErrors)) {
                     const invalid = new Error(`Generated spec failed validation:\n${formatSpecCheckIssues(check.issues)}`);
+                    failed = true;
                     error.set(invalid);
                     options.onError?.(invalid);
                     return;
@@ -3514,6 +3582,7 @@ function injectUIStream(options) {
         catch (err) {
             if (isAbortError(err))
                 return;
+            failed = true;
             const resolvedError = err instanceof Error ? err : new Error(String(err));
             gate.commit(() => {
                 error.set(resolvedError);
@@ -3522,6 +3591,7 @@ function injectUIStream(options) {
         }
         finally {
             gate.commit(() => isStreaming.set(false));
+            end(!failed);
         }
     };
     return {
@@ -3565,9 +3635,11 @@ function injectChatUI(options) {
         catalog: options.catalog ?? null,
     };
     const session = createStreamSession();
+    const runs = createObservedRuns();
     inject(DestroyRef).onDestroy(() => session.cancel());
     const stop = () => {
         session.cancel();
+        runs.stop();
         isStreaming.set(false);
     };
     const clear = () => {
@@ -3622,6 +3694,8 @@ function injectChatUI(options) {
         messages.update((prev) => [...prev, userMessage, assistantMessage]);
         isStreaming.set(true);
         error.set(null);
+        const end = runs.start();
+        let failed = false;
         // Mutable state for accumulating the assistant response
         let accumulatedText = '';
         let currentSpec = { root: '', elements: {} };
@@ -3633,12 +3707,18 @@ function injectChatUI(options) {
                 // touch, so the message can hold it directly — no snapshot copy.
                 currentSpec = applyPatch(currentSpec, patch);
                 const snapshot = currentSpec;
-                gate.commit(() => messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, spec: snapshot } : m)));
+                gate.commit(() => {
+                    messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, spec: snapshot } : m));
+                    notifyStreamObservers('onPatch', patch);
+                });
             },
             onText(line) {
                 accumulatedText += (accumulatedText ? '\n' : '') + line;
                 const snapshot = accumulatedText;
-                gate.commit(() => messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, text: snapshot } : m)));
+                gate.commit(() => {
+                    messages.update((prev) => prev.map((m) => m.id === assistantId ? { ...m, text: snapshot } : m));
+                    notifyStreamObservers('onText', line);
+                });
             },
         });
         try {
@@ -3672,6 +3752,7 @@ function injectChatUI(options) {
                 // not want rendered.
                 if (check.blocked || (validate === 'strict' && check.hasErrors)) {
                     const invalid = new Error(`Generated spec failed validation:\n${formatSpecCheckIssues(check.issues)}`);
+                    failed = true;
                     error.set(invalid);
                     options.onError?.(invalid);
                     return;
@@ -3687,6 +3768,7 @@ function injectChatUI(options) {
             dropEmptyPlaceholder();
             if (isAbortError(err))
                 return;
+            failed = true;
             const resolvedError = err instanceof Error ? err : new Error(String(err));
             gate.commit(() => {
                 error.set(resolvedError);
@@ -3695,6 +3777,7 @@ function injectChatUI(options) {
         }
         finally {
             gate.commit(() => isStreaming.set(false));
+            end(!failed);
         }
     };
     return {
@@ -3726,5 +3809,5 @@ function injectChatUI(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { CONFIRM_CONTEXT, ELEMENT_KEY, JR_CONFIRM_DIALOG, JR_CONFIRM_LABELS, JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, checkSpec, createStoreSetState, defineRegistry, flatToTree, formatSpecCheckIssues, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectConfirmContext, injectDevtoolsActive, injectElementKey, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, isActionCancelled, jsonRenderMessage };
+export { CONFIRM_CONTEXT, ELEMENT_KEY, JR_CONFIRM_DIALOG, JR_CONFIRM_LABELS, JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, checkSpec, createStoreSetState, defineRegistry, flatToTree, formatSpecCheckIssues, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectConfirmContext, injectDevtoolsActive, injectElementKey, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, isActionCancelled, jsonRenderMessage, ɵregisterStreamObserver };
 //# sourceMappingURL=ngx-json-render.mjs.map