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

package/dist/playground/GenUiPlayground.js

@@ -0,0 +1,413 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Badge } from "@wallarm-org/design-system/Badge";
+import { Button } from "@wallarm-org/design-system/Button";
+import { SegmentedControl, SegmentedControlItem } from "@wallarm-org/design-system/SegmentedControl";
+import { HStack, VStack } from "@wallarm-org/design-system/Stack";
+import { Text } from "@wallarm-org/design-system/Text";
+import { ToggleButton } from "@wallarm-org/design-system/ToggleButton";
+import { cn } from "@wallarm-org/design-system/utils/cn";
+import { A2uiSurfaces } from "../a2ui/A2uiSurfaces.js";
+import { createA2uiCatalog } from "../a2ui/catalog.js";
+import { checkA2uiAnswer } from "../a2ui/check.js";
+import { ExpressSurfaces, toExpressLines } from "../a2ui/express.js";
+import { wallarmComponents } from "../components/index.js";
+import { openUiAnswer } from "../fixtures/openui.js";
+import { createJsonRenderCatalog } from "../json-render/catalog.js";
+import { checkJsonRenderAnswer } from "../json-render/check.js";
+import { JsonRenderSurface } from "../json-render/JsonRenderSurface.js";
+import { specFromLines } from "../json-render/spec.js";
+import { createOpenUiLibrary } from "../openui/catalog.js";
+import { checkOpenUiAnswer } from "../openui/check.js";
+import { OpenUiSurface } from "../openui/OpenUiSurface.js";
+const FORMATS = [
+    'a2ui',
+    'express',
+    'json-render',
+    'openui'
+];
+const isFormat = (value)=>FORMATS.includes(value);
+const DELAY = {
+    agent: 650,
+    app: 220
+};
+const A2UI_CATALOG = createA2uiCatalog(wallarmComponents);
+const GenUiPlayground = ({ scenarios, className, defaultStreamOpen = true })=>{
+    const [scenarioId, setScenarioId] = useState(scenarios[0]?.id);
+    const [format, setFormat] = useState('a2ui');
+    const [streamOpen, setStreamOpen] = useState(defaultStreamOpen);
+    const [log, setLog] = useState([]);
+    const scenario = scenarios.find((s)=>s.id === scenarioId) ?? scenarios[0];
+    const [express] = useState(()=>new Map(scenarios.map((s)=>[
+                s.id,
+                toExpress(s)
+            ])));
+    const expressOf = scenario && express.get(scenario.id);
+    const stream = 'a2ui' === format ? scenario?.a2ui ?? [] : 'express' === format ? expressOf?.lines ?? [] : 'openui' === format ? scenario?.openui ?? [] : scenario?.jsonRender ?? [];
+    const replay = useReplay(stream);
+    const live = scenario?.liveStreams;
+    const ticks = useLiveTicks(replay.done ? live?.every : void 0, `${scenario?.id}-${format}-${replay.run}`);
+    const liveRange = Array.from({
+        length: ticks
+    }, (_, i)=>i + 1);
+    const liveA2ui = live ? liveRange.flatMap((tick)=>live.lines(tick).a2ui) : [];
+    const liveJsonRender = live ? liveRange.flatMap((tick)=>live.lines(tick).jsonRender) : [];
+    const liveOpenUi = live ? liveRange.flatMap((tick)=>live.lines(tick).openui) : [];
+    const liveExpress = live && expressOf ? liveRange.flatMap((tick)=>toExpressLines(A2UI_CATALOG, expressOf.surfaceId, live.lines(tick).a2ui.map((entry)=>entry.line)).map((line)=>({
+                origin: 'app',
+                line
+            }))) : [];
+    const shown = [
+        ...stream.slice(0, replay.count),
+        ...{
+            a2ui: liveA2ui,
+            express: liveExpress,
+            'json-render': liveJsonRender,
+            openui: liveOpenUi
+        }[format]
+    ];
+    const [jsonCatalogs] = useState(()=>new Map(scenarios.map((s)=>[
+                s.id,
+                createJsonRenderCatalog(wallarmComponents, s.actions)
+            ])));
+    const [openUiLibraries] = useState(()=>new Map(scenarios.map((s)=>[
+                s.id,
+                createOpenUiLibrary(wallarmComponents, s.actions)
+            ])));
+    const handleAction = (name, params)=>{
+        setLog((entries)=>[
+                {
+                    seq: entries.length,
+                    text: `${name} ${JSON.stringify(params)}`
+                },
+                ...entries
+            ]);
+    };
+    const pick = (id)=>{
+        setScenarioId(id);
+        replay.restart();
+    };
+    const handleFormatChange = (value)=>{
+        if (!isFormat(value)) return;
+        setFormat(value);
+        replay.restart();
+    };
+    const jsonCatalog = scenario && jsonCatalogs.get(scenario.id);
+    const openUiLibrary = scenario && openUiLibraries.get(scenario.id);
+    const checkOptions = {
+        components: wallarmComponents,
+        actions: scenario?.actions ?? []
+    };
+    const issues = scenario && replay.done ? 'json-render' === format ? checkJsonRenderAnswer(specFromLines(scenario.jsonRender.map((l)=>l.line)), checkOptions) : 'openui' === format && openUiLibrary ? checkOpenUiAnswer(openUiAnswer(scenario.openui).program, openUiLibrary, checkOptions) : checkA2uiAnswer(scenario.a2ui.map((l)=>l.line), checkOptions) : void 0;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex min-h-0 flex-col bg-bg-surface-1', className),
+        children: [
+            /*#__PURE__*/ jsxs(VStack, {
+                gap: 12,
+                align: "stretch",
+                className: "border-b border-border-primary-light p-16",
+                children: [
+                    /*#__PURE__*/ jsxs(HStack, {
+                        justify: "between",
+                        align: "center",
+                        gap: 12,
+                        children: [
+                            /*#__PURE__*/ jsx(Text, {
+                                weight: "medium",
+                                children: "Ask the agent"
+                            }),
+                            /*#__PURE__*/ jsxs(HStack, {
+                                gap: 8,
+                                align: "center",
+                                children: [
+                                    /*#__PURE__*/ jsxs(SegmentedControl, {
+                                        value: format,
+                                        onChange: handleFormatChange,
+                                        children: [
+                                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                                value: "a2ui",
+                                                children: "A2UI v1.0"
+                                            }),
+                                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                                value: "express",
+                                                children: "A2UI Express"
+                                            }),
+                                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                                value: "json-render",
+                                                children: "json-render"
+                                            }),
+                                            /*#__PURE__*/ jsx(SegmentedControlItem, {
+                                                value: "openui",
+                                                children: "OpenUI"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(ToggleButton, {
+                                        size: "medium",
+                                        active: streamOpen,
+                                        "aria-pressed": streamOpen,
+                                        onToggle: setStreamOpen,
+                                        children: "Stream"
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "outline",
+                                        color: "neutral",
+                                        size: "medium",
+                                        onClick: replay.restart,
+                                        children: "Replay"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        role: "group",
+                        "aria-label": "Prompts",
+                        className: "flex flex-wrap gap-8",
+                        children: scenarios.map((s)=>/*#__PURE__*/ jsx(ToggleButton, {
+                                size: "medium",
+                                active: s.id === scenario?.id,
+                                "aria-pressed": s.id === scenario?.id,
+                                onToggle: ()=>pick(s.id),
+                                title: s.summary,
+                                children: s.prompt
+                            }, s.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex min-h-0 flex-1",
+                children: [
+                    /*#__PURE__*/ jsx("section", {
+                        "aria-label": "Answer",
+                        className: "min-w-0 flex-1 overflow-auto bg-bg-page-bg p-24",
+                        children: scenario && ('a2ui' === format ? /*#__PURE__*/ jsx(A2uiSurfaces, {
+                            catalog: A2UI_CATALOG,
+                            messages: [
+                                ...scenario.a2ui.slice(0, replay.count),
+                                ...liveA2ui
+                            ].map((entry)=>entry.line),
+                            actions: scenario.actions,
+                            onAction: handleAction
+                        }, `${scenario.id}-${replay.run}`) : 'express' === format ? expressOf && /*#__PURE__*/ jsx(ExpressSurfaces, {
+                            catalog: A2UI_CATALOG,
+                            surfaceId: expressOf.surfaceId,
+                            chunks: [
+                                ...expressOf.lines.slice(0, replay.count),
+                                ...liveExpress
+                            ].map((entry)=>entry.line),
+                            actions: scenario.actions,
+                            onAction: handleAction
+                        }, `${scenario.id}-${replay.run}`) : 'openui' === format ? openUiLibrary && /*#__PURE__*/ jsx(OpenUiSurface, {
+                            library: openUiLibrary,
+                            ...openUiAnswer([
+                                ...scenario.openui.slice(0, replay.count),
+                                ...liveOpenUi
+                            ]),
+                            streaming: !replay.done,
+                            onAction: handleAction
+                        }, `${scenario.id}-${replay.run}`) : jsonCatalog && /*#__PURE__*/ jsx(JsonRenderSurface, {
+                            catalog: jsonCatalog,
+                            spec: specFromLines([
+                                ...scenario.jsonRender.slice(0, replay.count),
+                                ...liveJsonRender
+                            ].map((entry)=>entry.line)),
+                            streaming: !replay.done,
+                            onAction: handleAction
+                        }, `${scenario.id}-${replay.run}`))
+                    }),
+                    streamOpen && /*#__PURE__*/ jsxs("aside", {
+                        "aria-label": "Stream",
+                        className: "flex w-360 shrink-0 flex-col border-l border-border-primary-light",
+                        children: [
+                            /*#__PURE__*/ jsxs(HStack, {
+                                justify: "between",
+                                align: "center",
+                                className: "px-16 py-12",
+                                children: [
+                                    /*#__PURE__*/ jsxs(HStack, {
+                                        gap: 8,
+                                        align: "center",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Text, {
+                                                weight: "medium",
+                                                children: "Stream"
+                                            }),
+                                            ticks > 0 && /*#__PURE__*/ jsxs(Badge, {
+                                                type: "secondary",
+                                                color: "green",
+                                                size: "small",
+                                                children: [
+                                                    "Live \xb7 app data every ",
+                                                    Math.round((live?.every ?? 0) / 1000),
+                                                    " s"
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "sm",
+                                        color: "secondary",
+                                        children: ticks > 0 ? `${shown.length} lines` : `${replay.count} of ${stream.length} lines`
+                                    })
+                                ]
+                            }),
+                            issues && /*#__PURE__*/ jsx("div", {
+                                className: "px-16 pb-8",
+                                "data-gen-ui-check": true,
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    size: "sm",
+                                    color: "secondary",
+                                    children: 0 === issues.length ? 'Answer check: every component renders, every action is allowed.' : `Answer check: ${issues.length} issues to send back to the agent.`
+                                })
+                            }),
+                            'express' === format && expressOf && /*#__PURE__*/ jsx("div", {
+                                className: "px-16 pb-8",
+                                children: /*#__PURE__*/ jsxs(Text, {
+                                    size: "sm",
+                                    color: "secondary",
+                                    children: [
+                                        "The agent's part is ",
+                                        expressOf.saving,
+                                        "% shorter than the same answer in JSON."
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("ol", {
+                                className: "m-0 flex min-h-0 flex-1 list-none flex-col gap-6 overflow-y-auto overflow-x-hidden px-16 pb-16",
+                                children: shown.map((entry, i)=>/*#__PURE__*/ jsx("li", {
+                                        className: "min-w-0",
+                                        children: /*#__PURE__*/ jsxs("details", {
+                                            className: "rounded-8 bg-bg-surface-2",
+                                            children: [
+                                                /*#__PURE__*/ jsxs("summary", {
+                                                    className: "flex min-w-0 cursor-pointer list-none items-center gap-8 p-8",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Badge, {
+                                                            type: "secondary",
+                                                            color: 'agent' === entry.origin ? 'violet' : 'green',
+                                                            size: "small",
+                                                            children: 'agent' === entry.origin ? 'agent · layout' : 'app · data'
+                                                        }),
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "min-w-0 truncate font-mono text-xs text-text-primary",
+                                                            children: describeLine(entry.line)
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx("pre", {
+                                                    className: "m-0 max-h-320 overflow-y-auto whitespace-pre-wrap break-all border-t border-border-primary-light p-8 font-mono text-xs text-text-primary",
+                                                    children: 'string' == typeof entry.line ? entry.line : JSON.stringify(entry.line, null, 2)
+                                                })
+                                            ]
+                                        })
+                                    }, `${replay.run}-${i}`))
+                            }),
+                            /*#__PURE__*/ jsxs(VStack, {
+                                gap: 4,
+                                align: "stretch",
+                                className: "border-t border-border-primary-light px-16 py-12",
+                                children: [
+                                    /*#__PURE__*/ jsx(Text, {
+                                        weight: "medium",
+                                        children: "Actions sent to the agent"
+                                    }),
+                                    0 === log.length ? /*#__PURE__*/ jsx(Text, {
+                                        size: "sm",
+                                        color: "secondary",
+                                        children: "Press a button in the answer."
+                                    }) : log.slice(0, 4).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))
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const toExpress = (scenario)=>{
+    const messages = scenario.a2ui.map((entry)=>entry.line);
+    const first = messages[0];
+    const surfaceId = first && 'createSurface' in first ? first.createSurface.surfaceId : 'main';
+    const lines = toExpressLines(A2UI_CATALOG, surfaceId, messages).map((line)=>({
+            origin: line.startsWith('$/') ? 'app' : 'agent',
+            line
+        }));
+    const agentJson = JSON.stringify(scenario.a2ui.filter((entry)=>'agent' === entry.origin).map((entry)=>entry.line)).length;
+    const agentExpress = lines.filter((entry)=>'agent' === entry.origin).reduce((total, entry)=>total + entry.line.length + 1, 0);
+    return {
+        surfaceId,
+        lines,
+        saving: Math.round((1 - agentExpress / agentJson) * 100)
+    };
+};
+const MAX_LIVE_TICKS = 100;
+function useLiveTicks(every, key) {
+    const [state, setState] = useState({
+        key,
+        ticks: 0
+    });
+    const ticks = state.key === key ? state.ticks : 0;
+    useEffect(()=>{
+        if (!every || ticks >= MAX_LIVE_TICKS) return;
+        const timer = setTimeout(()=>setState({
+                key,
+                ticks: ticks + 1
+            }), every);
+        return ()=>clearTimeout(timer);
+    }, [
+        every,
+        key,
+        ticks
+    ]);
+    return ticks;
+}
+function useReplay(lines) {
+    const [state, setState] = useState({
+        run: 0,
+        count: 0
+    });
+    const timer = useRef(void 0);
+    useEffect(()=>{
+        if (state.count >= lines.length) return;
+        const next = lines[state.count];
+        timer.current = setTimeout(()=>setState((s)=>({
+                    ...s,
+                    count: s.count + 1
+                })), next ? DELAY[next.origin] : 0);
+        return ()=>clearTimeout(timer.current);
+    }, [
+        state,
+        lines
+    ]);
+    const restart = ()=>setState((s)=>({
+                run: s.run + 1,
+                count: 0
+            }));
+    return {
+        ...state,
+        restart,
+        done: state.count >= lines.length
+    };
+}
+const describeLine = (line)=>{
+    if ('object' != typeof line || null === line) return String(line);
+    if ('op' in line && 'path' in line) return `${String(line.op)} ${String(line.path)}`;
+    if ('path' in line && 'value' in line) return `data · ${String(line.path)}`;
+    const [type, body] = Object.entries(line).find(([key])=>'version' !== key) ?? [
+        '?',
+        {}
+    ];
+    if ('object' != typeof body || null === body) return type;
+    if ('components' in body && Array.isArray(body.components)) {
+        const ids = body.components.map((c)=>'object' == typeof c && null !== c && 'id' in c ? String(c.id) : '?');
+        return `${type} · ${ids.join(', ')}`;
+    }
+    if ('path' in body) return `${type} · ${String(body.path)}`;
+    return 'surfaceId' in body ? `${type} · ${String(body.surfaceId)}` : type;
+};
+export { GenUiPlayground };

package/dist/playground/index.d.ts

@@ -0,0 +1,3 @@
+/** `@wallarm-org/gen-ui/playground`: the demos the playground app and the docs site embed. */
+export { GenUiChatDemo, type GenUiChatDemoProps } from './GenUiChatDemo.js';
+export { GenUiPlayground, type GenUiPlaygroundProps } from './GenUiPlayground.js';

package/dist/playground/index.js

@@ -0,0 +1,2 @@
+export { GenUiChatDemo } from "./GenUiChatDemo.js";
+export { GenUiPlayground } from "./GenUiPlayground.js";

package/dist/playground/useEmulatedAgent.d.ts

@@ -0,0 +1,37 @@
+import type { SpecStreamLine } from '@json-render/core';
+import type { ChatApprovalPart, ChatApprovalResponse, ChatCustomPart, ChatMessage, ChatPart, ChatStatus } from '@wallarm-org/design-system/WallyAssistant';
+import { type A2uiMessage } from '../a2ui/catalog.js';
+export type GenUiFormat = 'a2ui' | 'express' | 'json-render' | 'openui';
+export declare const GEN_UI_FORMATS: readonly string[];
+export declare const isGenUiFormat: (value: string) => value is GenUiFormat;
+/** The custom part the emulated agent streams: one surface, its lines in arrival order. */
+export type GenUiPartData = {
+    format: 'a2ui';
+    lines: readonly A2uiMessage[];
+} | {
+    format: 'express';
+    surfaceId: string;
+    lines: readonly string[];
+} | {
+    format: 'json-render';
+    lines: readonly SpecStreamLine[];
+} | {
+    format: 'openui';
+    lines: readonly string[];
+};
+export type GenUiPart = ChatCustomPart<GenUiPartData>;
+export declare const GEN_UI_KIND = "wallarm.gen-ui";
+/** A chat part is a gen-ui surface when it carries this kind; only the emulator makes them. */
+export declare const isGenUiPart: (part: ChatPart) => part is GenUiPart;
+/**
+ * A scripted stand-in for the agent: every reply is built from fixtures on timers, the way a
+ * mapper would fold a real stream into snapshots. Only the format of the UI part changes.
+ */
+export declare function useEmulatedAgent(format: GenUiFormat): {
+    messages: readonly ChatMessage[];
+    status: ChatStatus;
+    send: (text: string) => Promise<void>;
+    stop: () => void;
+    act: (name: string, params: Record<string, unknown>) => void;
+    respond: (response: ChatApprovalResponse, approval: ChatApprovalPart) => Promise<void>;
+};

package/dist/playground/useEmulatedAgent.js

@@ -0,0 +1,221 @@
+import { useRef, useState } from "react";
+import { createA2uiCatalog } from "../a2ui/catalog.js";
+import { toExpressLines } from "../a2ui/express.js";
+import { wallarmComponents } from "../components/index.js";
+import { ATTACK_SUMMARY_A2UI, ATTACK_SUMMARY_JSON_RENDER, ATTACK_SUMMARY_SURFACE } from "../fixtures/attackSummary.js";
+import { toOpenUiLines } from "../fixtures/openui.js";
+const GEN_UI_FORMATS = [
+    'a2ui',
+    'express',
+    'json-render',
+    'openui'
+];
+const isGenUiFormat = (value)=>GEN_UI_FORMATS.includes(value);
+const GEN_UI_KIND = 'wallarm.gen-ui';
+const isGenUiPart = (part)=>'custom' === part.type && part.kind === GEN_UI_KIND;
+const EXPRESS_LINES = toExpressLines(createA2uiCatalog(wallarmComponents), ATTACK_SUMMARY_SURFACE, ATTACK_SUMMARY_A2UI);
+const OPENUI_LINES = toOpenUiLines(ATTACK_SUMMARY_A2UI.map((line)=>({
+        origin: 'agent',
+        line
+    }))).map((entry)=>entry.line).filter((line)=>'string' == typeof line);
+const partData = (format, count)=>{
+    switch(format){
+        case 'a2ui':
+            return {
+                format,
+                lines: ATTACK_SUMMARY_A2UI.slice(0, count)
+            };
+        case 'express':
+            return {
+                format,
+                surfaceId: ATTACK_SUMMARY_SURFACE,
+                lines: EXPRESS_LINES.slice(0, count)
+            };
+        case 'json-render':
+            return {
+                format,
+                lines: ATTACK_SUMMARY_JSON_RENDER.slice(0, count)
+            };
+        default:
+            return {
+                format,
+                lines: OPENUI_LINES.slice(0, count)
+            };
+    }
+};
+const LENGTH = {
+    a2ui: ATTACK_SUMMARY_A2UI.length,
+    express: EXPRESS_LINES.length,
+    'json-render': ATTACK_SUMMARY_JSON_RENDER.length,
+    openui: OPENUI_LINES.length
+};
+const DELAY = {
+    a2ui: 450,
+    express: 300,
+    'json-render': 180,
+    openui: 300
+};
+const sleep = (ms)=>new Promise((resolve)=>setTimeout(resolve, ms));
+const INTRO = "Here's what happened in the last 24 hours. The login endpoint stands out.";
+const BLOCK_APPROVAL = (ips)=>[
+        `Block **${ips.length}** source IPs on all applications?`,
+        '```',
+        ...ips,
+        '```'
+    ].join('\n');
+function useEmulatedAgent(format) {
+    const [messages, setMessages] = useState([]);
+    const [status, setStatus] = useState('ready');
+    const run = useRef(0);
+    const seq = useRef(0);
+    const start = ()=>{
+        const id = ++run.current;
+        return ()=>run.current === id;
+    };
+    const patch = (id, f)=>setMessages((list)=>{
+            const prev = list.find((m)=>m.id === id);
+            const base = prev?.role === 'assistant' ? prev : {
+                role: 'assistant',
+                id,
+                parts: []
+            };
+            const next = f(base);
+            return prev ? list.map((m)=>m.id === id ? next : m) : [
+                ...list,
+                next
+            ];
+        });
+    const upsertPart = (id, part)=>patch(id, (m)=>({
+                ...m,
+                parts: m.parts.some((p)=>p.id === part.id) ? m.parts.map((p)=>p.id === part.id ? part : p) : [
+                    ...m.parts,
+                    part
+                ]
+            }));
+    const send = async (text)=>{
+        const alive = start();
+        const userId = `u${++seq.current}`;
+        const replyId = `${userId}:reply`;
+        setMessages((list)=>[
+                ...list,
+                {
+                    role: 'user',
+                    id: userId,
+                    parts: [
+                        {
+                            type: 'text',
+                            id: `${userId}:text`,
+                            text
+                        }
+                    ]
+                }
+            ]);
+        setStatus('submitted');
+        await sleep(500);
+        if (!alive()) return;
+        setStatus('streaming');
+        const step = {
+            id: 'query',
+            kind: 'tool',
+            name: 'query_attacks'
+        };
+        upsertPart(replyId, {
+            type: 'chain-of-thought',
+            id: `${replyId}:cot`,
+            steps: [
+                {
+                    ...step,
+                    status: 'running',
+                    label: 'Querying attacks for the last 24 hours'
+                }
+            ]
+        });
+        await sleep(900);
+        if (!alive()) return;
+        upsertPart(replyId, {
+            type: 'chain-of-thought',
+            id: `${replyId}:cot`,
+            steps: [
+                {
+                    ...step,
+                    status: 'done',
+                    label: 'Queried attacks',
+                    metric: '1,240'
+                }
+            ]
+        });
+        const words = INTRO.split(' ');
+        for(let i = 1; i <= words.length; i++){
+            await sleep(40);
+            if (!alive()) return;
+            upsertPart(replyId, {
+                type: 'text',
+                id: `${replyId}:text`,
+                text: words.slice(0, i).join(' ')
+            });
+        }
+        for(let i = 1; i <= LENGTH[format]; i++){
+            await sleep(DELAY[format]);
+            if (!alive()) return;
+            const part = {
+                type: 'custom',
+                id: `${replyId}:ui`,
+                kind: GEN_UI_KIND,
+                data: partData(format, i)
+            };
+            upsertPart(replyId, part);
+        }
+        setStatus('ready');
+    };
+    const stop = ()=>{
+        run.current++;
+        setStatus('ready');
+    };
+    const act = (name, params)=>{
+        if ('block_ips' !== name) return;
+        const ips = Array.isArray(params.ips) ? params.ips.map(String) : [];
+        const id = `a${++seq.current}:block`;
+        const approval = {
+            type: 'approval',
+            id: `${id}:approval`,
+            status: 'pending',
+            content: BLOCK_APPROVAL(ips),
+            options: [
+                {
+                    id: 'once',
+                    kind: 'allow-once',
+                    label: 'Block'
+                },
+                {
+                    id: 'reject',
+                    kind: 'reject',
+                    label: 'Cancel'
+                }
+            ]
+        };
+        upsertPart(id, approval);
+    };
+    const respond = async (response, approval)=>{
+        const id = approval.id.replace(/:approval$/, '');
+        upsertPart(id, {
+            ...approval,
+            status: response.approved ? 'approved' : 'rejected'
+        });
+        if (!response.approved) return;
+        await sleep(600);
+        upsertPart(id, {
+            type: 'text',
+            id: `${id}:text`,
+            text: 'Done: the 3 IPs are on the denylist for 24 hours.'
+        });
+    };
+    return {
+        messages,
+        status,
+        send,
+        stop,
+        act,
+        respond
+    };
+}
+export { GEN_UI_FORMATS, GEN_UI_KIND, isGenUiFormat, isGenUiPart, useEmulatedAgent };