@wallarm-org/gen-ui 0.0.0-stage → 0.1.0

package/dist/json-render/catalog.d.ts

@@ -0,0 +1,64 @@
+import { type ComponentRegistry } from '@json-render/react';
+import * as z from 'zod';
+import type { GenUiAction, GenUiComponent } from '../core/define.js';
+/**
+ * The json-render catalog (what the model is prompted with: `catalog.prompt()`) and the registry
+ * that renders it. The zod props pass through untouched: `$state`/`$bindState` and the other
+ * expressions are resolved by the json-render runtime before a View sees them.
+ */
+export declare const createJsonRenderCatalog: (components: readonly GenUiComponent[], actions: readonly GenUiAction[]) => {
+    catalog: import("@json-render/core").Catalog<{
+        spec: import("@json-render/core").SchemaType<"object", {
+            root: import("@json-render/core").SchemaType<"string", unknown>;
+            elements: import("@json-render/core").SchemaType<"record", import("@json-render/core").SchemaType<"object", {
+                type: import("@json-render/core").SchemaType<"ref", string>;
+                props: import("@json-render/core").SchemaType<"propsOf", string>;
+                children: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+                slots: {
+                    optional: true;
+                    kind: "record";
+                    inner?: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>> | undefined;
+                };
+                visible: {
+                    optional: true;
+                    kind: "any";
+                    inner?: unknown;
+                };
+                repeat: {
+                    optional: true;
+                    kind: "any";
+                    inner?: unknown;
+                };
+            }>>;
+        }>;
+        catalog: import("@json-render/core").SchemaType<"object", {
+            components: import("@json-render/core").SchemaType<"map", {
+                props: import("@json-render/core").SchemaType<"zod", unknown>;
+                slots: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+                description: import("@json-render/core").SchemaType<"string", unknown>;
+                example: import("@json-render/core").SchemaType<"any", unknown>;
+            }>;
+            actions: import("@json-render/core").SchemaType<"map", {
+                params: import("@json-render/core").SchemaType<"zod", unknown>;
+                description: import("@json-render/core").SchemaType<"string", unknown>;
+            }>;
+        }>;
+    }, {
+        components: {
+            [k: string]: {
+                props: z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>;
+                description: string;
+                slots?: string[] | undefined;
+            };
+        };
+        actions: {
+            [k: string]: {
+                description: string;
+                params: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+            };
+        };
+    }>;
+    registry: ComponentRegistry;
+    actions: readonly GenUiAction[];
+};
+export type JsonRenderCatalog = ReturnType<typeof createJsonRenderCatalog>;

package/dist/json-render/catalog.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { defineCatalog } from "@json-render/core";
+import { defineRegistry } from "@json-render/react";
+import { schema } from "@json-render/react/schema";
+import { GuardedView } from "../render/GuardedView.js";
+import * as __rspack_external_zod from "zod";
+const createJsonRenderCatalog = (components, actions)=>{
+    const catalog = defineCatalog(schema, {
+        components: Object.fromEntries(components.map((c)=>[
+                c.name,
+                {
+                    props: c.props,
+                    description: c.description,
+                    ...c.hasChildren ? {
+                        slots: [
+                            'default'
+                        ]
+                    } : {}
+                }
+            ])),
+        actions: Object.fromEntries(actions.map((a)=>[
+                a.name,
+                {
+                    description: a.description,
+                    params: __rspack_external_zod.record(__rspack_external_zod.string(), __rspack_external_zod.unknown())
+                }
+            ]))
+    });
+    const { registry } = defineRegistry(catalog, {
+        components: Object.fromEntries(components.map((component)=>[
+                component.name,
+                ({ props, children, emit })=>/*#__PURE__*/ jsx(GuardedView, {
+                        component: component,
+                        props: props,
+                        emit: emit,
+                        children: children
+                    })
+            ])),
+        actions: Object.fromEntries(actions.map((a)=>[
+                a.name,
+                async ()=>void 0
+            ]))
+    });
+    return {
+        catalog,
+        registry: registry,
+        actions
+    };
+};
+export { createJsonRenderCatalog };

package/dist/json-render/check.d.ts

@@ -0,0 +1,4 @@
+import type { Spec } from '@json-render/core';
+import { type CheckOptions, type GenUiIssue } from '../core/check.js';
+/** The agent's mistakes in a finished json-render spec, per element. */
+export declare const checkJsonRenderAnswer: (spec: Spec, options: CheckOptions) => GenUiIssue[];

package/dist/json-render/check.js

@@ -0,0 +1,13 @@
+import { checkNodes } from "../core/check.js";
+import { isRecord } from "../core/guards.js";
+const isBinding = (value)=>isRecord(value) && Object.keys(value).some((key)=>key.startsWith('$'));
+const checkJsonRenderAnswer = (spec, options)=>checkNodes(Object.entries(spec.elements).map(([id, element])=>({
+            id,
+            type: element.type,
+            props: element.props ?? {},
+            children: element.children ?? [],
+            actions: Object.values(element.on ?? {}).flatMap((binding)=>(Array.isArray(binding) ? binding : [
+                    binding
+                ]).map((b)=>b.action))
+        })), spec.root, isBinding, options);
+export { checkJsonRenderAnswer };

package/dist/json-render/index.d.ts

@@ -0,0 +1,6 @@
+/** `@wallarm-org/gen-ui/json-render`: render the catalog from json-render specs. */
+export type { Spec, SpecStreamLine } from '@json-render/core';
+export { createJsonRenderCatalog, type JsonRenderCatalog } from './catalog.js';
+export { checkJsonRenderAnswer } from './check.js';
+export { JsonRenderSurface, type JsonRenderSurfaceProps } from './JsonRenderSurface.js';
+export { sanitizeSpec, specFromLines } from './spec.js';

package/dist/json-render/index.js

@@ -0,0 +1,4 @@
+export { createJsonRenderCatalog } from "./catalog.js";
+export { checkJsonRenderAnswer } from "./check.js";
+export { JsonRenderSurface } from "./JsonRenderSurface.js";
+export { sanitizeSpec, specFromLines } from "./spec.js";

package/dist/json-render/spec.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The json-render spec as it streams in: folding SpecStream lines into a spec, and keeping an
+ * agent's spec inside the catalog's contract. No React here.
+ */
+import { type Spec, type SpecStreamLine } from '@json-render/core';
+import type { GenUiAction } from '../core/define.js';
+/** Not a catalog type: the model never sees it, so only `specFromLines` can put it in a spec. */
+export declare const PENDING = "gen-ui:pending";
+/**
+ * Folds SpecStream patch lines (in arrival order) into the spec so far. It starts from an empty
+ * spec (mid-stream the patches may not have added `root` or `elements` yet, and the Renderer needs
+ * both), puts a pending element wherever an element names a child that hasn't arrived yet, and
+ * never throws: a patch it can't apply is dropped, and a value that isn't an element is pending.
+ */
+export declare const specFromLines: (lines: readonly SpecStreamLine[]) => Spec;
+/**
+ * Keeps an agent's spec inside the catalog's contract. json-render runs its own built-in actions
+ * (setState, pushState, removeState, push, pop, validateForm) without a handler, fires `watch`
+ * bindings without a click and opens a `confirm` dialog of its own, so every `on` and `watch`
+ * binding keeps only `{ action, params }` for an action in the allowlist; the rest is dropped
+ * with a warning. Approval stays with the app.
+ */
+export declare const sanitizeSpec: (spec: Spec | null, actions: readonly GenUiAction[]) => Spec | null;

package/dist/json-render/spec.js

@@ -0,0 +1,77 @@
+import { compileSpecStream } from "@json-render/core";
+import { isRecord } from "../core/guards.js";
+import { warn } from "../render/warn.js";
+const PENDING = 'gen-ui:pending';
+const pending = (id)=>({
+        type: PENDING,
+        props: {
+            id
+        },
+        children: []
+    });
+const specFromLines = (lines)=>{
+    let compiled;
+    try {
+        compiled = compileSpecStream(lines.map((line)=>JSON.stringify(line)).join('\n'), {
+            root: '',
+            elements: {}
+        });
+    } catch  {
+        return lines.length ? specFromLines(lines.slice(0, -1)) : {
+            root: '',
+            elements: {}
+        };
+    }
+    const raw = isRecord(compiled) ? compiled : {};
+    const source = isRecord(raw.elements) ? raw.elements : {};
+    const elements = {};
+    for (const [key, value] of Object.entries(source))elements[key] = isRecord(value) && 'string' == typeof value.type ? {
+        ...value,
+        type: value.type,
+        props: isRecord(value.props) ? value.props : {},
+        children: Array.isArray(value.children) ? value.children.filter((child)=>'string' == typeof child) : []
+    } : pending(key);
+    for (const element of Object.values(elements))for (const key of element.children ?? [])elements[key] ??= pending(key);
+    return {
+        root: 'string' == typeof raw.root ? raw.root : '',
+        elements,
+        ...isRecord(raw.state) ? {
+            state: raw.state
+        } : {}
+    };
+};
+const sanitizeSpec = (spec, actions)=>{
+    if (!spec) return spec;
+    const allowed = new Set(actions.map((a)=>a.name));
+    const keep = (bindings)=>(Array.isArray(bindings) ? bindings : [
+            bindings
+        ]).flatMap((binding)=>{
+            const action = isRecord(binding) ? binding.action : void 0;
+            if ('string' == typeof action && allowed.has(action)) return [
+                {
+                    action,
+                    ...isRecord(binding.params) ? {
+                        params: binding.params
+                    } : {}
+                }
+            ];
+            warn(`dropped json-render action '${String(action)}', not in the allowlist`);
+            return [];
+        });
+    const filter = (map)=>isRecord(map) ? Object.fromEntries(Object.entries(map).map(([event, bindings])=>[
+                event,
+                keep(bindings)
+            ]).filter(([, kept])=>kept.length > 0)) : void 0;
+    return {
+        ...spec,
+        elements: Object.fromEntries(Object.entries(spec.elements).map(([key, element])=>[
+                key,
+                {
+                    ...element,
+                    on: filter(element.on),
+                    watch: filter(element.watch)
+                }
+            ]))
+    };
+};
+export { PENDING, sanitizeSpec, specFromLines };

package/dist/openui/OpenUiSurface.d.ts

@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+import { type OpenUIError } from '@openuidev/react-lang';
+import type { GenUiActionHandler } from '../core/define.js';
+import type { OpenUiLibrary } from './catalog.js';
+export interface OpenUiSurfaceProps {
+    library: OpenUiLibrary;
+    /** The OpenUI Lang program so far; it grows while the model streams. */
+    program: string;
+    /**
+     * The app's data. Each top-level key is a `$variable` the program reads (`kpi` → `$kpi.attacks`);
+     * pass a new object when it changes and the page follows, with no call to the agent.
+     */
+    data?: Record<string, unknown>;
+    streaming?: boolean;
+    onAction: GenUiActionHandler;
+    /** What OpenUI couldn't parse or render, once the stream is done. Default: console.warn. */
+    onError?: (errors: readonly OpenUIError[]) => void;
+}
+/**
+ * Renders one OpenUI Lang program through the catalog. Only the app's actions reach `onAction`:
+ * OpenUI's own steps that leave the page (`@ToAssistant`, `@OpenUrl`) are dropped with a warning,
+ * and with no tool provider `Query` and `Mutation` reach nothing.
+ */
+export declare const OpenUiSurface: FC<OpenUiSurfaceProps>;

package/dist/openui/OpenUiSurface.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Renderer } from "@openuidev/react-lang";
+import { isRecord } from "../core/guards.js";
+import { SurfaceBoundary } from "../render/SurfaceBoundary.js";
+import { warn } from "../render/warn.js";
+const OpenUiSurface = ({ library, program, data = {}, streaming = false, onAction, onError = warnErrors })=>{
+    const handleAction = ({ type, params })=>{
+        if (!library.actions.some((a)=>a.name === type)) return void warn(`action "${type}" is not in the allowlist, dropped`);
+        onAction(type, isRecord(params.context) ? params.context : {});
+    };
+    const handleErrors = (errors)=>{
+        if (!streaming && errors.length) onError(errors);
+    };
+    return /*#__PURE__*/ jsx(SurfaceBoundary, {
+        children: /*#__PURE__*/ jsx(Renderer, {
+            response: program,
+            library: library.library,
+            isStreaming: streaming,
+            initialState: Object.fromEntries(Object.entries(data).map(([k, v])=>[
+                    `$${k}`,
+                    v
+                ])),
+            onAction: handleAction,
+            onError: handleErrors,
+            publishObservability: false
+        })
+    });
+};
+const warnErrors = (errors)=>warn('OpenUI rejected the answer', errors);
+export { OpenUiSurface };

package/dist/openui/catalog.d.ts

@@ -0,0 +1,23 @@
+import * as z from 'zod';
+import type { GenUiAction, GenUiComponent } from '../core/define.js';
+/**
+ * The OpenUI library for the catalog (what the model is prompted with: `library.prompt()`). Each
+ * entry's props pass through in their order, which is the positional order in OpenUI Lang; an
+ * entry's events become action props after them, and a container takes `children` last. The
+ * app's actions are library actions, written `@block_ips({ips: …})`: the map is the action's
+ * context, as in A2UI.
+ */
+export declare const createOpenUiLibrary: (components: readonly GenUiComponent[], actions: readonly GenUiAction[]) => {
+    library: Required<import("@openuidev/react-lang").Library<import("@openuidev/react-lang").DefinedAction<z.ZodObject<{
+        context: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    }, z.core.$strip>, string>>>;
+    actions: readonly GenUiAction[];
+};
+export type OpenUiLibrary = ReturnType<typeof createOpenUiLibrary>;
+/**
+ * An element's data props: no children, no action props, and no `null`, which is how OpenUI Lang
+ * skips a positional argument.
+ */
+export declare const dataProps: (component: GenUiComponent, props: Record<string, unknown>) => {
+    [k: string]: unknown;
+};

package/dist/openui/catalog.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { action, createLibrary, defineAction, defineComponent, useTriggerAction } from "@openuidev/react-lang";
+import { isRecord } from "../core/guards.js";
+import { GuardedView } from "../render/GuardedView.js";
+import * as __rspack_external_zod from "zod";
+const createOpenUiLibrary = (components, actions)=>{
+    const defined = [];
+    const child = __rspack_external_zod.lazy(()=>__rspack_external_zod.union(defined.map((d)=>d.ref)));
+    for (const component of components){
+        const { name, description, props, events = [], hasChildren } = component;
+        const schema = props.extend(Object.fromEntries(events.map((event)=>[
+                event,
+                action().optional()
+            ]))).extend(hasChildren ? {
+            children: __rspack_external_zod.array(child).optional()
+        } : {});
+        defined.push(defineComponent({
+            name,
+            description,
+            props: schema,
+            component: renderer(component)
+        }));
+    }
+    const library = createLibrary({
+        components: defined,
+        actions: actions.map((a)=>defineAction({
+                name: a.name,
+                description: a.description,
+                params: __rspack_external_zod.object({
+                    context: __rspack_external_zod.record(__rspack_external_zod.string(), __rspack_external_zod.unknown()).optional()
+                })
+            }))
+    });
+    return {
+        library,
+        actions
+    };
+};
+const dataProps = (component, props)=>{
+    const { events = [] } = component;
+    return Object.fromEntries(Object.entries(props).filter(([key, value])=>null !== value && 'children' !== key && !events.includes(key)));
+};
+const renderer = (component)=>{
+    const Render = ({ props, renderNode })=>{
+        const triggerAction = useTriggerAction();
+        const data = dataProps(component, props);
+        const emit = (event)=>{
+            const plan = props[event];
+            if (isRecord(plan)) triggerAction('', void 0, plan);
+        };
+        const children = Array.isArray(props.children) ? props.children : [];
+        return /*#__PURE__*/ jsx(GuardedView, {
+            component: component,
+            props: data,
+            emit: emit,
+            children: component.hasChildren && children.map((node, i)=>/*#__PURE__*/ jsx(Fragment, {
+                    children: renderNode(node)
+                }, isRecord(node) && 'string' == typeof node.statementId ? node.statementId : i))
+        });
+    };
+    Render.displayName = `OpenUi${component.name}`;
+    return Render;
+};
+export { createOpenUiLibrary, dataProps };

package/dist/openui/check.d.ts

@@ -0,0 +1,4 @@
+import { type CheckOptions, type GenUiIssue } from '../core/check.js';
+import { type OpenUiLibrary } from './catalog.js';
+/** The agent's mistakes in a finished OpenUI Lang program, per statement. */
+export declare const checkOpenUiAnswer: (program: string, library: OpenUiLibrary, options: CheckOptions) => GenUiIssue[];

package/dist/openui/check.js

@@ -0,0 +1,68 @@
+import { createParser } from "@openuidev/react-lang";
+import { checkNodes } from "../core/check.js";
+import { isRecord } from "../core/guards.js";
+import { dataProps } from "./catalog.js";
+const isBinding = (value)=>isRecord(value) && 'string' == typeof value.k;
+const isElement = (value)=>isRecord(value) && 'element' === value.type && 'string' == typeof value.typeName;
+const checkOpenUiAnswer = (program, library, options)=>{
+    const { library: lib } = library;
+    const result = createParser(lib.toJSONSchema(), lib.root).parse(program);
+    const nodes = [];
+    const visit = (element, fallbackId)=>{
+        const id = element.statementId ?? fallbackId;
+        const component = options.components.find((c)=>c.name === element.typeName);
+        const children = Array.isArray(element.props.children) ? element.props.children.filter(isElement) : [];
+        nodes.push({
+            id,
+            type: element.typeName,
+            props: component ? dataProps(component, element.props) : element.props,
+            children: children.map((child, i)=>child.statementId ?? `${id}_children_${i}`),
+            actions: (component?.events ?? []).flatMap((event)=>actionNames(element.props[event]))
+        });
+        children.forEach((child, i)=>visit(child, `${id}_children_${i}`));
+    };
+    if (isElement(result.root)) visit(result.root, 'root');
+    const reported = [
+        ...result.meta.unresolved.map((name)=>({
+                id: referrer(program, name) ?? name,
+                message: `Child "${name}" was never sent.`
+            })),
+        ...result.meta.errors.map(({ code, statementId, component, path, message })=>{
+            const at = {
+                id: statementId ?? 'root',
+                component
+            };
+            if ('unknown-component' === code) return {
+                ...at,
+                message: `Unknown component "${component}".`
+            };
+            if ('unknown-function' === code) return {
+                ...at,
+                message: `Action "${component}" is not allowed.`
+            };
+            return {
+                ...at,
+                prop: path?.split('/').filter(Boolean).join('.') || void 0,
+                message
+            };
+        })
+    ];
+    const issues = [
+        ...checkNodes(nodes, result.root?.statementId, isBinding, options),
+        ...reported
+    ];
+    return issues.filter((issue, i)=>!issue.prop || issues.findIndex((other)=>other.id === issue.id && other.prop === issue.prop) === i);
+};
+const actionNames = (value)=>{
+    if (Array.isArray(value)) return value.flatMap(actionNames);
+    if (!isRecord(value)) return [];
+    const own = 'Comp' === value.k && 'string' == typeof value.name && 'Action' !== value.name;
+    return [
+        ...own ? [
+            String(value.name)
+        ] : [],
+        ...Object.values(value).flatMap(actionNames)
+    ];
+};
+const referrer = (program, ref)=>program.split('\n').map((line)=>line.match(/^\s*(\w+)\s*=(.*)$/)).find((match)=>match?.[2] && new RegExp(`\\b${ref}\\b`).test(match[2]))?.[1];
+export { checkOpenUiAnswer };

package/dist/openui/index.d.ts

@@ -0,0 +1,5 @@
+/** `@wallarm-org/gen-ui/openui`: render the catalog from OpenUI Lang programs. */
+export type { OpenUIError } from '@openuidev/react-lang';
+export { createOpenUiLibrary, type OpenUiLibrary } from './catalog.js';
+export { checkOpenUiAnswer } from './check.js';
+export { OpenUiSurface, type OpenUiSurfaceProps } from './OpenUiSurface.js';

package/dist/openui/index.js

@@ -0,0 +1,3 @@
+export { createOpenUiLibrary } from "./catalog.js";
+export { checkOpenUiAnswer } from "./check.js";
+export { OpenUiSurface } from "./OpenUiSurface.js";

package/dist/playground/GenUiChatDemo.d.ts

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+export interface GenUiChatDemoProps {
+    /** Sizes the demo; it fills its box (give the host a height). */
+    className?: string;
+}
+/**
+ * Generative UI inside the Wally chat: an emulated agent answers with a surface (in the format
+ * picked for the next answer) through WallyAssistant's `renderPart`. Its Block button asks for
+ * approval before the agent acts.
+ */
+export declare const GenUiChatDemo: FC<GenUiChatDemoProps>;

package/dist/playground/GenUiChatDemo.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SegmentedControl, SegmentedControlItem } from "@wallarm-org/design-system/SegmentedControl";
+import { VStack } from "@wallarm-org/design-system/Stack";
+import { Text } from "@wallarm-org/design-system/Text";
+import { cn } from "@wallarm-org/design-system/utils/cn";
+import { WallyAssistant } from "@wallarm-org/design-system/WallyAssistant";
+import { A2uiSurfaces } from "../a2ui/A2uiSurfaces.js";
+import { createA2uiCatalog } from "../a2ui/catalog.js";
+import { ExpressSurfaces } from "../a2ui/express.js";
+import { wallarmComponents } from "../components/index.js";
+import { ATTACK_SUMMARY_ACTIONS } from "../fixtures/attackSummary.js";
+import { createJsonRenderCatalog } from "../json-render/catalog.js";
+import { JsonRenderSurface } from "../json-render/JsonRenderSurface.js";
+import { specFromLines } from "../json-render/spec.js";
+import { createOpenUiLibrary } from "../openui/catalog.js";
+import { OpenUiSurface } from "../openui/OpenUiSurface.js";
+import { isGenUiFormat, isGenUiPart, useEmulatedAgent } from "./useEmulatedAgent.js";
+const A2UI_CATALOG = createA2uiCatalog(wallarmComponents);
+const JSON_RENDER_CATALOG = createJsonRenderCatalog(wallarmComponents, ATTACK_SUMMARY_ACTIONS);
+const OPENUI_LIBRARY = createOpenUiLibrary(wallarmComponents, ATTACK_SUMMARY_ACTIONS);
+const SUGGESTIONS = [
+    {
+        id: 'summary',
+        label: 'Show attacks for the last 24 hours'
+    }
+];
+const GenUiSurface = ({ part, streaming, onAction })=>{
+    const { data } = part;
+    switch(data.format){
+        case 'a2ui':
+            return /*#__PURE__*/ jsx(A2uiSurfaces, {
+                catalog: A2UI_CATALOG,
+                messages: data.lines,
+                actions: ATTACK_SUMMARY_ACTIONS,
+                onAction: onAction
+            });
+        case 'express':
+            return /*#__PURE__*/ jsx(ExpressSurfaces, {
+                catalog: A2UI_CATALOG,
+                surfaceId: data.surfaceId,
+                chunks: data.lines,
+                actions: ATTACK_SUMMARY_ACTIONS,
+                onAction: onAction
+            });
+        case 'json-render':
+            return /*#__PURE__*/ jsx(JsonRenderSurface, {
+                catalog: JSON_RENDER_CATALOG,
+                spec: specFromLines(data.lines),
+                streaming: streaming,
+                onAction: onAction
+            });
+        default:
+            return /*#__PURE__*/ jsx(OpenUiSurface, {
+                library: OPENUI_LIBRARY,
+                program: data.lines.join('\n'),
+                streaming: streaming,
+                onAction: onAction
+            });
+    }
+};
+const GenUiChatDemo = ({ className })=>{
+    const [format, setFormat] = useState('a2ui');
+    const [log, setLog] = useState([]);
+    const agent = useEmulatedAgent(format);
+    const handleAction = (name, params)=>{
+        setLog((entries)=>[
+                {
+                    seq: entries.length,
+                    text: `${name} ${JSON.stringify(params)}`
+                },
+                ...entries
+            ]);
+        agent.act(name, params);
+    };
+    const renderPart = (part, ctx)=>isGenUiPart(part) ? /*#__PURE__*/ jsx(GenUiSurface, {
+            part: part,
+            streaming: ctx.streaming,
+            onAction: handleAction
+        }) : void 0;
+    const handleFormatChange = (value)=>{
+        if (isGenUiFormat(value)) setFormat(value);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex min-h-0 gap-24 bg-bg-surface-1 p-16', className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "h-full min-w-0 flex-1",
+                children: /*#__PURE__*/ jsx(WallyAssistant, {
+                    messages: agent.messages,
+                    status: agent.status,
+                    suggestions: agent.messages.length ? void 0 : SUGGESTIONS,
+                    onSubmit: agent.send,
+                    onStop: agent.stop,
+                    onApprovalRespond: agent.respond,
+                    approvalPlacement: "inline",
+                    renderPart: renderPart
+                })
+            }),
+            /*#__PURE__*/ jsxs(VStack, {
+                gap: 12,
+                align: "stretch",
+                className: "w-320 shrink-0",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        weight: "medium",
+                        children: "Format of the next answer"
+                    }),
+                    /*#__PURE__*/ jsxs(SegmentedControl, {
+                        value: format,
+                        onChange: handleFormatChange,
+                        children: [
+                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                value: "a2ui",
+                                children: "A2UI"
+                            }),
+                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                value: "express",
+                                children: "Express"
+                            }),
+                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                value: "json-render",
+                                children: "json-render"
+                            }),
+                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                value: "openui",
+                                children: "OpenUI"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        weight: "medium",
+                        children: "Actions sent to the agent"
+                    }),
+                    0 === log.length ? /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        color: "secondary",
+                        children: "Ask for the attacks, then press a button in the answer."
+                    }) : log.slice(0, 6).map((entry)=>/*#__PURE__*/ jsx("pre", {
+                            className: "m-0 whitespace-pre-wrap break-all font-mono text-xs text-text-primary",
+                            children: entry.text
+                        }, entry.seq))
+                ]
+            })
+        ]
+    });
+};
+export { GenUiChatDemo };

package/dist/playground/GenUiPlayground.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from 'react';
+import type { ReplayScenario } from '../fixtures/scenarios.js';
+export interface GenUiPlaygroundProps {
+    /** The prompts to pick from, in order; the first one plays on mount. */
+    scenarios: readonly ReplayScenario[];
+    /** Sizes the playground; it fills its box (give the host a height). */
+    className?: string;
+    /** Show the stream panel at first; a narrow host starts with it closed. Default true. */
+    defaultStreamOpen?: boolean;
+}
+/**
+ * Replays recorded agent answers: pick a prompt, watch the agent stream the layout and the app
+ * fill its data, in either format, with the stream itself beside the page.
+ */
+export declare const GenUiPlayground: FC<GenUiPlaygroundProps>;