npm - janux - Versions diffs - 0.1.0 → 0.2.1 - Mend

janux 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/package.json +5 -2
package/src/client/boot.test.ts +87 -0
package/src/client/boot.ts +76 -2
package/src/client/bridge.ts +55 -6
package/src/client/glow.ts +74 -0
package/src/client/index.ts +12 -0
package/src/client/morph.ts +5 -0
package/src/client/navigate-tool.test.ts +55 -0
package/src/client/navigate-tool.ts +78 -0
package/src/client/navigate.test.ts +172 -0
package/src/client/navigate.ts +180 -0
package/src/client/prefetch.ts +38 -0
package/src/client/single-chunk.ts +14 -0
package/src/client/webmcp.test.ts +222 -0
package/src/client/webmcp.ts +169 -0
package/src/define/factories.test.tsx +25 -0
package/src/define/factories.ts +3 -2
package/src/define/types.ts +9 -0
package/src/index.ts +2 -1
package/src/jsx-runtime.ts +3 -0
package/src/render/server.test.ts +10 -0
package/src/render/server.ts +3 -1
package/src/runtime/effects.ts +7 -6
package/src/runtime/instance.test.ts +23 -0
package/src/runtime/instance.ts +8 -6
package/src/runtime/intents.ts +7 -4
package/src/state/mutation-gate.ts +32 -9
package/src/state/reactive-state.test.ts +17 -11
package/src/state/reactive-state.ts +8 -5

package/src/client/navigate.test.ts ADDED Viewed

@@ -0,0 +1,172 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { afterAll, beforeAll, describe, expect, it, mock } from 'bun:test';
+import { component, intent, store } from '../define/factories';
+import { jsx } from '../jsx-runtime';
+import { int, list, schema, str, enums } from '../schema';
+import { renderToString } from '../render/server';
+import { boot } from './boot';
+beforeAll(() => GlobalRegistrator.register({ url: 'http://localhost:3000/' }));
+afterAll(() => GlobalRegistrator.unregister());
+const counterDetach = mock(() => {});
+const theme = store({
+  name: 'theme',
+  state: schema({ mode: enums(['dark', 'light']) }),
+  intents: { toggle: intent({ run: ({ state }: any) => (state.mode = 'light') }) },
+});
+const counter = component({
+  name: 'counter',
+  state: schema({ n: int() }),
+  lifecycle: { detach: counterDetach },
+  intents: { inc: intent({ run: ({ state }: any) => (state.n += 1) }) },
+  view: ({ state, intents }: any) =>
+    jsx('div', { children: [jsx('output', { children: String(state.n) }), jsx('button', { on: intents.inc, children: '+' })] }),
+});
+const chat = component({
+  name: 'chat',
+  state: schema({ messages: list({ text: str() }) }),
+  intents: {
+    add: intent({ input: schema({ text: str() }), run: ({ state, input }: any) => state.messages.push(input) }),
+  },
+  view: ({ state }: any) => jsx('ul', { children: state.messages.map((m: any, i: number) => jsx('li', { key: String(i), children: m.text })) }),
+});
+const editorAttach = mock(() => {});
+const editorDetach = mock(() => {});
+const editor = component({
+  name: 'editor',
+  lifecycle: { attach: () => editorAttach(), detach: () => editorDetach() },
+  intents: {},
+  view: () => jsx('div', { class: 'editor', children: 'ready' }),
+});
+function snapshotScripts(snapshots: any[]): string {
+  return snapshots
+    .map(
+      (s) =>
+        `<script type="application/janux+state" data-uri="${s.uri}">${JSON.stringify({ state: s.state, sources: s.sources ?? {} })}</script>`,
+    )
+    .join('');
+}
+async function pageHtml(title: string, node: unknown): Promise<string> {
+  const { html, snapshots } = await renderToString(node, { storeDefs: { theme } });
+  return `<!doctype html><html><head><title>${title}</title></head><body>${html}${snapshotScripts(snapshots)}</body></html>`;
+}
+describe('SPA navigation (streamed diff)', () => {
+  it('applies the three state rules: app stores live, persist islands live, the rest re-resumes', async () => {
+    const pageA = await pageHtml('Page A', [
+      jsx('h1', { children: 'A' }),
+      jsx(counter as any, {}),
+      jsx(chat as any, { persist: true }),
+    ]);
+    const pageB = await pageHtml('Page B', [
+      jsx('h1', { children: 'B' }),
+      jsx(chat as any, { persist: true }),
+    ]);
+    document.write(pageA);
+    document.close();
+    expect(document.querySelector('janux-island[data-jx="chat#default"]')!.hasAttribute('data-jx-persist')).toBe(true);
+    const client = boot({ defs: [counter, chat, theme] });
+    // live state before navigating
+    await client.call('theme.toggle');
+    await client.call('chat.add', { text: 'hello' });
+    await client.call('counter.inc');
+    await client.settled();
+    counterDetach.mockClear();
+    (globalThis as any).fetch = mock(async () => ({
+      ok: true,
+      text: async () => pageB,
+    }));
+    await client.navigate('/b');
+    // swapped content + title (whole-document diff)
+    expect(document.querySelector('h1')!.textContent).toBe('B');
+    expect(document.title).toBe('Page B');
+    // rule 1: app-scope store survives with live state
+    expect(((await client.read('store://theme')) as any).state.mode).toBe('light');
+    // rule 2: persisted island keeps its live instance state
+    expect(((await client.read('ui://chat')) as any).state.messages).toEqual([{ text: 'hello' }]);
+    expect(document.querySelector('janux-island[data-jx="chat#default"] li')!.textContent).toBe('hello');
+    // rule 3: the counter was disposed (detach ran) and is gone from the page
+    expect(counterDetach).toHaveBeenCalledTimes(1);
+    expect(document.querySelector('janux-island[data-jx="counter#default"]')).toBeNull();
+  });
+  it('re-mounts an eager island when its page is revisited after navigating away', async () => {
+    const pageEditor = await pageHtml('Editor', [jsx('h1', { children: 'E' }), jsx(editor as any, { eager: true })]);
+    const pageDoc = await pageHtml('Doc', [jsx('h1', { children: 'D' })]);
+    document.write(pageEditor);
+    document.close();
+    editorAttach.mockClear();
+    editorDetach.mockClear();
+    const client = boot({ defs: [editor] });
+    await client.settled();
+    expect(editorAttach).toHaveBeenCalledTimes(1); // first visit mounts
+    // navigate away → the island is gone AND torn down (detach ran)
+    (globalThis as any).fetch = mock(async () => ({ ok: true, text: async () => pageDoc }));
+    await client.navigate('/doc');
+    expect(document.querySelector('janux-island[data-jx="editor#default"]')).toBeNull();
+    expect(editorDetach).toHaveBeenCalledTimes(1);
+    // revisit → the eager island mounts again from a clean slate (the playground
+    // relies on this attach/detach symmetry to reset Monaco)
+    (globalThis as any).fetch = mock(async () => ({ ok: true, text: async () => pageEditor }));
+    await client.navigate('/editor');
+    expect(document.querySelector('janux-island[data-jx="editor#default"]')).not.toBeNull();
+    expect(editorAttach).toHaveBeenCalledTimes(2);
+  });
+  it('buffers the response into a single chunk before diffing (deterministic swap)', async () => {
+    const pageA = await pageHtml('Page A', jsx('h1', { children: 'A' }));
+    const pageB = await pageHtml('Page B', jsx('h1', { children: 'B' }));
+    let bodyRead = false;
+    document.write(pageA);
+    document.close();
+    const client = boot({ defs: [] });
+    (globalThis as any).fetch = mock(async () => ({
+      ok: true,
+      text: async () => pageB,
+      get body() {
+        bodyRead = true;
+        return new Response(pageB).body;
+      },
+    }));
+    await client.navigate('/b');
+    expect(document.querySelector('h1')!.textContent).toBe('B');
+    expect(bodyRead).toBe(false);
+  });
+  it('emits janux:error and hard-navigates when the fetch fails', async () => {
+    (globalThis as any).fetch = mock(async () => ({ ok: false, status: 500 }));
+    document.write(await pageHtml('Page A', jsx(chat as any, {})));
+    document.close();
+    const client = boot({ defs: [chat] });
+    const errors: string[] = [];
+    document.addEventListener('janux:error', (event: any) => errors.push(event.detail));
+    await client.navigate('/broken'); // resolves — the fallback owns the failure
+    expect(errors.some((message) => /navigation fetch failed/.test(message))).toBe(true);
+  });
+});

package/src/client/navigate.ts ADDED Viewed

@@ -0,0 +1,180 @@
+import diff from 'diff-dom-streaming';
+import { mountIsland, type MountContext } from './mount';
+import { consumePrefetched } from './prefetch';
+import { singleChunkStream } from './single-chunk';
+export interface NavigateOptions {
+  signal?: AbortSignal;
+}
+const esc = (id: string): string =>
+  typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id;
+function emitNavigate(phase: 'before' | 'after', from: string, to: string): void {
+  document.dispatchEvent(new CustomEvent('janux:navigate', { detail: { phase, from, to } }));
+}
+function throwIfAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) throw new DOMException('navigation superseded', 'AbortError');
+}
+interface PersistedIsland {
+  id: string;
+  node: Element;
+}
+/**
+ * transition:persist strategy: mounted `persist` islands are lifted out of the
+ * document before the diff (live instance and DOM untouched) and grafted back
+ * over whatever the incoming page rendered for them — or disposed if it's gone.
+ */
+function extractPersisted(mount: MountContext): PersistedIsland[] {
+  return [...document.querySelectorAll('janux-island[data-jx-persist]')]
+    .filter((node) => mount.registry.mounted.has(node.getAttribute('data-jx') ?? ''))
+    .map((node) => {
+      node.remove();
+      return { id: node.getAttribute('data-jx')!, node };
+    });
+}
+async function restorePersisted(mount: MountContext, kept: PersistedIsland[]): Promise<void> {
+  await Promise.all(
+    kept.map(async ({ id, node }) => {
+      const incoming = document.querySelector(`janux-island[data-jx="${esc(id)}"]`);
+      if (incoming) incoming.replaceWith(node);
+      else await mount.registry.mounted.get(id)?.dispose();
+    }),
+  );
+}
+/** Store names still referenced by an island that survived the diff (persisted or newly resumed). */
+function storesInUse(mount: MountContext): Set<string> {
+  const used = [...mount.registry.mounted.values()].flatMap((instance) =>
+    Object.values(instance.def.use ?? {}).map((store) => store.name),
+  );
+  return new Set(used);
+}
+/** After the diff: dispose route stores no surviving island still uses. Islands are swept by DOM state. */
+async function disposeRouteStores(mount: MountContext): Promise<void> {
+  const { registry } = mount;
+  const keptStores = storesInUse(mount);
+  const dropped = [...registry.stores.entries()].filter(
+    ([name, instance]) => instance.def.scope === 'route' && !keptStores.has(name),
+  );
+  await Promise.all(dropped.map(([, instance]) => instance.dispose()));
+  dropped.forEach(([name]) => registry.stores.delete(name));
+}
+/** App-store snapshots (already-embedded) survive; UI snapshots are replaced by the incoming page. */
+function reindexSnapshots(mount: MountContext): void {
+  [...mount.registry.snapshots.keys()]
+    .filter((uri) => uri.startsWith('ui://'))
+    .forEach((uri) => mount.registry.snapshots.delete(uri));
+  document.querySelectorAll('script[type="application/janux+state"]').forEach((script) => {
+    const uri = script.getAttribute('data-uri');
+    if (!uri) return;
+    try {
+      mount.registry.snapshots.set(uri, JSON.parse(script.textContent ?? '{}'));
+    } catch {
+      document.dispatchEvent(new CustomEvent('janux:error', { detail: `invalid snapshot ${uri}` }));
+    }
+  });
+}
+/** Islands marked `eager` mount without waiting for interaction (editors, event listeners…). */
+export async function mountEagerIslands(mount: MountContext): Promise<void> {
+  const pending = [...document.querySelectorAll('janux-island[data-jx-eager]')].filter(
+    (node) => !mount.registry.mounted.has(node.getAttribute('data-jx') ?? ''),
+  );
+  await Promise.all(pending.map((node) => mountIsland(node.getAttribute('data-jx')!, node, mount)));
+}
+async function sweepDisconnected(mount: MountContext): Promise<void> {
+  const gone = [...mount.registry.mounted.entries()].filter(
+    ([id]) => !document.querySelector(`janux-island[data-jx="${esc(id)}"]`)?.isConnected,
+  );
+  await Promise.all(gone.map(([, instance]) => instance.dispose()));
+}
+async function fetchStream(url: string, signal?: AbortSignal): Promise<ReadableStream<Uint8Array>> {
+  const cached = consumePrefetched(url);
+  if (cached) return cached;
+  const response = await fetch(url, { signal, headers: { accept: 'text/html' } });
+  if (!response.ok) throw new Error(`navigation fetch failed (${response.status})`);
+  // Buffer the whole page before diffing: a navigation fetches a complete,
+  // server-rendered page, so a single-chunk stream is deterministic and
+  // avoids the streaming diff's chunk-boundary edge cases (a swap is not SSR).
+  return singleChunkStream(await response.text());
+}
+/**
+ * Diff-then-dispose: nothing is destroyed before the DOM actually changes, so
+ * an abort before/during the diff leaves the current page fully intact (kept
+ * persisted nodes are re-attached, no island disposed). Disposal happens after,
+ * driven by what the diff removed from the document.
+ */
+async function applyPage(mount: MountContext, stream: ReadableStream<Uint8Array>, signal?: AbortSignal): Promise<void> {
+  const kept = extractPersisted(mount);
+  try {
+    throwIfAborted(signal);
+    // The Navigation API drives the transition; diff directly (its own would be skipped).
+    await diff(document, stream);
+    await restorePersisted(mount, kept);
+  } catch (error) {
+    // Aborted/failed before the swap committed: put persisted nodes back untouched.
+    kept.forEach(({ node }) => {
+      if (!node.isConnected) document.body.appendChild(node);
+    });
+    throw error;
+  }
+}
+async function runNavigation(url: string, mount: MountContext, options: NavigateOptions): Promise<void> {
+  const from = location.href;
+  emitNavigate('before', from, url);
+  try {
+    throwIfAborted(options.signal);
+    const stream = await fetchStream(url, options.signal);
+    throwIfAborted(options.signal);
+    await applyPage(mount, stream, options.signal);
+    reindexSnapshots(mount);
+    await sweepDisconnected(mount);
+    await disposeRouteStores(mount);
+    await mountEagerIslands(mount);
+    emitNavigate('after', from, url);
+  } catch (error) {
+    if ((error as any)?.name === 'AbortError') return;
+    document.dispatchEvent(new CustomEvent('janux:error', { detail: String(error) }));
+    location.href = url;
+  }
+}
+let navChain: Promise<void> = Promise.resolve();
+/**
+ * SPA navigation: streams the next page's HTML and DIFFS it against the live
+ * document (diff-dom-streaming) — unchanged shells are never touched, persisted
+ * islands keep their live instances, and everything else re-resumes from the
+ * incoming snapshots, exactly like an initial load. Navigations are serialized:
+ * a superseded one (aborted by the Navigation API) finishes its cleanup before
+ * the next starts, so persisted islands are never lost to a race.
+ */
+export function performNavigation(url: string, mount: MountContext, options: NavigateOptions = {}): Promise<void> {
+  navChain = navChain.then(() => runNavigation(url, mount, options));
+  return navChain;
+}

package/src/client/prefetch.ts ADDED Viewed

@@ -0,0 +1,38 @@
+interface PrefetchEntry {
+  body: Promise<string>;
+  at: number;
+}
+const prefetched = new Map<string, PrefetchEntry>();
+const PREFETCH_TTL = 30_000;
+function isFresh(entry: PrefetchEntry | undefined): entry is PrefetchEntry {
+  return entry !== undefined && Date.now() - entry.at <= PREFETCH_TTL;
+}
+/** Warms the next page on link hover; entries expire after 30s. */
+export function prefetch(url: string): void {
+  if (isFresh(prefetched.get(url))) return;
+  prefetched.set(url, {
+    at: Date.now(),
+    body: fetch(url, { headers: { accept: 'text/html' } }).then((response) =>
+      response.ok ? response.text() : Promise.reject(new Error('prefetch failed')),
+    ),
+  });
+  prefetched.get(url)!.body.catch(() => prefetched.delete(url));
+}
+/** Returns a stream of the prefetched page if still fresh, evicting the entry either way. */
+export function consumePrefetched(url: string): ReadableStream<Uint8Array> | undefined {
+  const entry = prefetched.get(url);
+  prefetched.delete(url);
+  if (!isFresh(entry)) return undefined;
+  return new ReadableStream({
+    async start(controller) {
+      controller.enqueue(new TextEncoder().encode(await entry.body));
+      controller.close();
+    },
+  });
+}

package/src/client/single-chunk.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/**
+ * Wraps already-buffered HTML into a one-chunk stream. Client navigation
+ * fetches a complete, server-rendered page, so streaming buys nothing here —
+ * and delivering it in a single chunk sidesteps the diff's chunk-boundary
+ * edge cases entirely, making every navigation deterministic.
+ */
+export function singleChunkStream(html: string): ReadableStream<Uint8Array> {
+  return new ReadableStream({
+    start(controller) {
+      controller.enqueue(new TextEncoder().encode(html));
+      controller.close();
+    },
+  });
+}

package/src/client/webmcp.test.ts ADDED Viewed

@@ -0,0 +1,222 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, mock } from 'bun:test';
+import { component, intent } from '../define/factories';
+import { jsx } from '../jsx-runtime';
+import { int, schema } from '../schema';
+import { renderToString } from '../render/server';
+import { boot, type JanuxClient } from './boot';
+import {
+  createModelContextPolyfill,
+  installWebMCP,
+  type ModelContextPolyfill,
+  type WebMCPHandle,
+} from './webmcp';
+beforeAll(() => GlobalRegistrator.register());
+afterAll(() => GlobalRegistrator.unregister());
+const counter = component({
+  name: 'counter',
+  state: schema({ n: int() }),
+  intents: {
+    inc: intent({ description: 'Increment', run: ({ state }) => (state.n += 1) }),
+    reset: intent({ guard: 'confirm', run: ({ state }) => (state.n = 0) }),
+  },
+  view: ({ state, intents }: any) =>
+    jsx('div', {
+      children: [
+        jsx('output', { children: `n=${state.n}` }),
+        jsx('button', { on: intents.inc, children: '+1' }),
+      ],
+    }),
+});
+const ROUTE_MANIFEST = {
+  janux: '0.1.0',
+  resources: [],
+  tools: [
+    {
+      name: 'api.shop.pay',
+      description: 'Pay the order',
+      guard: 'confirm',
+      input: { type: 'object', properties: { total: { type: 'number' } } },
+    },
+  ],
+  events: [],
+};
+const originalFetch = globalThis.fetch;
+let manifestTools = ROUTE_MANIFEST.tools;
+const fetchMock = mock(async (input: any, init?: RequestInit) => {
+  const url = String(input);
+  if (url.startsWith('/_janux/manifest')) {
+    return Response.json({ ...ROUTE_MANIFEST, tools: manifestTools });
+  }
+  if (url.startsWith('/_janux/api/')) return Response.json({ ok: true, result: 'paid' });
+  return originalFetch(input, init);
+});
+async function serveAndBoot(): Promise<JanuxClient> {
+  const { html, snapshots } = await renderToString(jsx(counter as any, {}), {
+    initialState: { 'ui://counter#default': { n: 5 } },
+  });
+  const scripts = snapshots
+    .map(
+      (s) =>
+        `<script type="application/janux+state" data-uri="${s.uri}">${JSON.stringify({ state: s.state, sources: s.sources ?? {} })}</script>`,
+    )
+    .join('');
+  document.body.innerHTML = html + scripts;
+  return boot({ defs: [counter], webmcp: false });
+}
+function polyfillOf(): ModelContextPolyfill {
+  return (document as any).modelContext;
+}
+describe('WebMCP integration', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    delete (document as any).modelContext;
+    manifestTools = ROUTE_MANIFEST.tools;
+    fetchMock.mockClear();
+    globalThis.fetch = fetchMock as any;
+  });
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+  it('polyfill: registers, lists, calls and honors AbortSignal', async () => {
+    const context = createModelContextPolyfill();
+    const controller = new AbortController();
+    context.registerTool(
+      { name: 'echo', description: 'Echo', execute: (input) => input },
+      { signal: controller.signal },
+    );
+    expect(context.listTools().map((tool) => tool.name)).toEqual(['echo']);
+    expect(await context.callTool('echo', { a: 1 })).toEqual({ a: 1 });
+    controller.abort();
+    expect(context.listTools()).toHaveLength(0);
+    expect(context.callTool('echo')).rejects.toThrow('unknown tool');
+  });
+  it('polyfill: provideContext replaces the registered set', () => {
+    const context = createModelContextPolyfill();
+    context.registerTool({ name: 'old', execute: () => null });
+    context.provideContext!({ tools: [{ name: 'next', execute: () => null }] });
+    expect(context.listTools().map((tool) => tool.name)).toEqual(['next']);
+  });
+  it('auto-registers the built-in navigate tool alongside manifest tools', async () => {
+    const client = await serveAndBoot();
+    const handle = installWebMCP(client);
+    await handle.sync();
+    expect(polyfillOf().listTools().map((tool) => tool.name)).toContain('navigate');
+  });
+  it('an app tool named navigate makes the built-in step aside', async () => {
+    manifestTools = [
+      { name: 'navigate', description: 'App-owned nav', guard: 'auto', input: { type: 'object', properties: { total: { type: 'number' } } } },
+    ];
+    const client = await serveAndBoot();
+    const handle = installWebMCP(client);
+    await handle.sync();
+    const navigate = polyfillOf().listTools().find((tool) => tool.name === 'navigate');
+    expect(navigate?.description).toContain('App-owned nav');
+  });
+  it('registers route manifest tools plus live local tools, with sanitized names', async () => {
+    const client = await serveAndBoot();
+    await client.call('counter.inc'); // mounts the island → local manifest is live
+    const handle = installWebMCP(client);
+    await handle.sync();
+    const names = polyfillOf()
+      .listTools()
+      .map((tool) => tool.name);
+    expect(names).toContain('api_shop_pay');
+    expect(names).toContain('counter_inc');
+    expect(names).toContain('counter_reset');
+    handle.dispose();
+  });
+  it('executes UI tools through the bridge and annotates confirm guards', async () => {
+    const client = await serveAndBoot();
+    await client.call('counter.inc');
+    const handle = installWebMCP(client);
+    await handle.sync();
+    const result: any = await polyfillOf().callTool('counter_inc');
+    await client.settled();
+    expect(document.querySelector('output')!.textContent).toBe('n=7');
+    expect(result.content[0].type).toBe('text');
+    const reset = polyfillOf()
+      .listTools()
+      .find((tool) => tool.name === 'counter_reset')!;
+    expect(reset.description).toContain('human must approve');
+    handle.dispose();
+  });
+  it('executes api.* tools over HTTP with the agent origin header', async () => {
+    const client = await serveAndBoot();
+    const handle = installWebMCP(client);
+    await handle.sync();
+    const result: any = await polyfillOf().callTool('api_shop_pay', { total: 25 });
+    expect(JSON.parse(result.content[0].text)).toEqual({ ok: true, result: 'paid' });
+    const apiCall = fetchMock.mock.calls.find(([url]) => String(url).startsWith('/_janux/api/'));
+    expect(String(apiCall![0])).toBe('/_janux/api/shop.pay');
+    expect((apiCall![1]!.headers as any)['x-janux-origin']).toBe('agent');
+    handle.dispose();
+  });
+  it('re-syncs on SPA navigation without duplicating registrations', async () => {
+    const client = await serveAndBoot();
+    const handle = installWebMCP(client);
+    await handle.sync();
+    manifestTools = [{ ...ROUTE_MANIFEST.tools[0]!, name: 'api.shop.refund' }];
+    document.dispatchEvent(
+      new CustomEvent('janux:navigate', { detail: { phase: 'after', from: '/', to: '/next' } }),
+    );
+    await handle.sync();
+    const names = polyfillOf()
+      .listTools()
+      .map((tool) => tool.name);
+    expect(names).toContain('api_shop_refund');
+    expect(names).not.toContain('api_shop_pay');
+    handle.dispose();
+  });
+  it('boot installs WebMCP by default (0 config)', async () => {
+    const { html } = await renderToString(jsx(counter as any, {}), {
+      initialState: { 'ui://counter#default': { n: 1 } },
+    });
+    document.body.innerHTML = html;
+    boot({ defs: [counter] });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(polyfillOf()).toBeDefined();
+    expect(polyfillOf().polyfilled).toBe(true);
+  });
+});