@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/examples/A2UiRestaurantExample.d.ts

@@ -1,3 +1,13 @@
+/**
+ * A2UI Restaurant, as a reactor application.
+ *
+ * The scene lives in `./scenes/A2UiRestaurantScene` and arrives as an A2UI scene
+ * plugin — one workspace view, ordered ahead of the chat. The rest is the
+ * standard chat plugins; there is no agent behind this scene, so the
+ * workspace runs on the browser target and costs no server.
+ *
+ * @module examples/A2UiRestaurantExample
+ */
 import React from 'react';
 declare const A2UiRestaurantExample: React.FC;
 export default A2UiRestaurantExample;

package/lib/examples/A2UiRestaurantExample.js

@@ -1,187 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, getCardGradient } from '@datalayer/primer-addons';
-import { Text, Spinner, TextInput, Button } from '@primer/react';
-import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed } from '../components/a2ui';
-import { basicCatalog } from '@a2ui/react/v0_9';
+/**
+ * A2UI Restaurant, as a reactor application.
+ *
+ * The scene lives in `./scenes/A2UiRestaurantScene` and arrives as an A2UI scene
+ * plugin — one workspace view, ordered ahead of the chat. The rest is the
+ * standard chat plugins; there is no agent behind this scene, so the
+ * workspace runs on the browser target and costs no server.
+ *
+ * @module examples/A2UiRestaurantExample
+ */
+import { useMemo } from 'react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
-import { A2uiMarkdownProvider } from './utils/a2uiMarkdownProvider';
-import { useExampleThemeStore } from './utils/themeStore';
-import { useA2uiProcessor } from './utils/a2ui';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-const LOADING_TEXT_LINES = [
-    'Finding the best spots for you...',
-    'Checking reviews...',
-    'Looking for open tables...',
-    'Almost there...',
-];
-const extractV09Messages = (data) => {
-    const messages = [];
-    data.forEach(item => {
-        const part = item.root ?? item;
-        if (part.kind !== 'data' || !part.data) {
-            return;
-        }
-        const message = part.data;
-        if (message.version === 'v0.9') {
-            // Normalize the catalog id so surfaces render regardless of which
-            // catalog URL variant the backend/LLM emits (the frontend only has the
-            // registered basicCatalog).
-            const createSurface = message.createSurface;
-            if (createSurface && createSurface.catalogId !== basicCatalog.id) {
-                createSurface.catalogId = basicCatalog.id;
-            }
-            messages.push(message);
-        }
-    });
-    return messages;
-};
-function RestaurantSearch({ onSearch, isLoading, }) {
-    const [inputValue, setInputValue] = useState('Top 5 Chinese restaurants in New York');
-    const { theme, colorMode } = useExampleThemeStore();
-    const gradient = getCardGradient(theme, colorMode);
-    const handleSubmit = useCallback((event) => {
-        event.preventDefault();
-        if (!inputValue.trim() || isLoading) {
-            return;
-        }
-        onSearch(inputValue.trim());
-    }, [inputValue, isLoading, onSearch]);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 4,
-            p: 4,
-            maxWidth: 640,
-            mx: 'auto',
-        }, children: [_jsx(Box, { sx: {
-                    width: '100%',
-                    height: 200,
-                    borderRadius: 2,
-                    background: `linear-gradient(135deg, ${gradient.from} 0%, ${gradient.to} 100%)`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: _jsx(Text, { sx: { fontSize: '4rem' }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: { fontSize: '2rem', fontWeight: 'bold', textAlign: 'center' }, children: "Restaurant Finder" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: "A2UI renderer connected to a live agent backend." }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
-}
+import { LoopEmbed } from '../loop';
+import { defineA2uiScenePlugin } from '../loop/plugins/a2ui-scene';
+setupPrimerPortals();
+const ScenePlugin = defineA2uiScenePlugin({
+    key: 'restaurant',
+    title: 'A2UI Restaurant',
+    description: 'A restaurant-booking A2UI scene rendered from protocol messages.',
+    load: () => import('./scenes/A2UiRestaurantScene'),
+});
 const A2UiRestaurantExample = () => {
-    const baseUrl = useExampleAgentRuntimesUrl();
-    const a2uiRestaurantEndpoint = `${baseUrl}/api/v1/a2ui/restaurant/`;
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [hasData, setHasData] = useState(false);
-    const [lastQuery, setLastQuery] = useState('');
-    const [loadingTextIndex, setLoadingTextIndex] = useState(0);
-    const sendPayloadRef = useRef(null);
-    const handleAction = useCallback(async (action) => {
-        if (!sendPayloadRef.current) {
-            return;
-        }
-        await sendPayloadRef.current({
-            action: action.name,
-            context: action.context,
-        });
-    }, []);
-    const { surfaces, processMessages, resetSurfaces, themeStyle } = useA2uiProcessor(handleAction);
-    useEffect(() => {
-        if (!isLoading) {
-            return;
-        }
-        const interval = window.setInterval(() => {
-            setLoadingTextIndex(prev => (prev + 1) % LOADING_TEXT_LINES.length);
-        }, 1800);
-        return () => {
-            clearInterval(interval);
-        };
-    }, [isLoading]);
-    const sendPayload = useCallback(async (payload) => {
-        try {
-            setIsLoading(true);
-            setError(null);
-            setLoadingTextIndex(0);
-            const response = await fetch(a2uiRestaurantEndpoint, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload),
-            });
-            if (!response.ok) {
-                const errorData = (await response.json());
-                throw new Error(errorData.detail || 'Request failed');
-            }
-            const data = (await response.json());
-            if (!Array.isArray(data)) {
-                throw new Error(data.error || 'Invalid server payload');
-            }
-            const v09Messages = extractV09Messages(data);
-            if (v09Messages.length === 0) {
-                throw new Error('No A2UI messages returned by backend');
-            }
-            resetSurfaces();
-            processMessages(v09Messages);
-            setHasData(true);
-        }
-        catch (requestError) {
-            const message = requestError instanceof Error
-                ? requestError.message
-                : 'Unknown error';
-            setError(message);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [processMessages, resetSurfaces, a2uiRestaurantEndpoint]);
-    useEffect(() => {
-        sendPayloadRef.current = sendPayload;
-    }, [sendPayload]);
-    const handleSearch = useCallback(async (query) => {
-        setLastQuery(query);
-        await sendPayload({ query });
-    }, [sendPayload]);
-    const handleRetry = useCallback(async () => {
-        if (!lastQuery) {
-            return;
-        }
-        await sendPayload({ query: lastQuery });
-    }, [lastQuery, sendPayload]);
-    return (_jsx(ThemedProvider, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs(Box, { sx: {
-                            p: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: '1.25rem', fontWeight: 'bold' }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Uses MessageProcessor and A2uiSurface with native A2UI backend messages." })] }), _jsxs(Box, { sx: { flex: 1, p: 3 }, children: [!hasData && !isLoading && !error && (_jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading })), isLoading && (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    height: 280,
-                                    gap: 3,
-                                }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: LOADING_TEXT_LINES[loadingTextIndex] })] })), error && !isLoading && (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                    gap: 3,
-                                    p: 4,
-                                }, children: [_jsxs(Text, { sx: { color: 'danger.fg' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: handleRetry, disabled: !lastQuery, children: "Retry" })] })), !isLoading && hasData && !error && (_jsxs(Box, { style: themeStyle, sx: {
-                                    ...A2UI_RENDER_SCOPE_SX,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 3,
-                                }, children: [_jsx(Button, { variant: "invisible", sx: { alignSelf: 'flex-start' }, onClick: () => setHasData(false), children: "\u2190 New Search" }), surfaces.map(surface => (_jsx(Box, { sx: {
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            borderRadius: 1,
-                                            p: 3,
-                                        }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }))] }), _jsx(Box, { sx: {
-                            p: 2,
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                            textAlign: 'center',
-                        }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", a2uiRestaurantEndpoint] }) })] }) }) }));
+    const plugins = useMemo(() => [ScenePlugin], []);
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
 };
 export default A2UiRestaurantExample;

package/lib/examples/A2UiViewerExample.d.ts

@@ -1,3 +1,13 @@
+/**
+ * A2UI Viewer, as a reactor application.
+ *
+ * The scene lives in `./scenes/A2UiViewerScene` and arrives as an A2UI scene
+ * plugin — one workspace view, ordered ahead of the chat. The rest is the
+ * standard chat plugins; there is no agent behind this scene, so the
+ * workspace runs on the browser target and costs no server.
+ *
+ * @module examples/A2UiViewerExample
+ */
 import React from 'react';
 declare const A2UiViewerExample: React.FC;
 export default A2UiViewerExample;

package/lib/examples/A2UiViewerExample.js

@@ -1,386 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box } from '@datalayer/primer-addons';
-import { SegmentedControl, Text } from '@primer/react';
-import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed } from '../components/a2ui';
+/**
+ * A2UI Viewer, as a reactor application.
+ *
+ * The scene lives in `./scenes/A2UiViewerScene` and arrives as an A2UI scene
+ * plugin — one workspace view, ordered ahead of the chat. The rest is the
+ * standard chat plugins; there is no agent behind this scene, so the
+ * workspace runs on the browser target and costs no server.
+ *
+ * @module examples/A2UiViewerExample
+ */
+import { useMemo } from 'react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
-import { A2uiMarkdownProvider } from './utils/a2uiMarkdownProvider';
-import { createSceneMessages, useA2uiProcessor } from './utils/a2ui';
-const SCENES = [
-    {
-        id: 'recipe',
-        label: 'Recipe Card',
-        emoji: '🍲',
-        description: 'Rich recipe card with image and metadata.',
-        messages: createSceneMessages({
-            surfaceId: 'viewer-recipe',
-            components: [
-                { id: 'root', component: 'Card', child: 'main' },
-                {
-                    id: 'main',
-                    component: 'Column',
-                    children: [
-                        'recipe-image',
-                        'title',
-                        'rating-row',
-                        'timing-row',
-                        'servings',
-                    ],
-                },
-                {
-                    id: 'recipe-image',
-                    component: 'Image',
-                    url: { path: '/image' },
-                    fit: 'cover',
-                    variant: 'largeFeature',
-                },
-                {
-                    id: 'title',
-                    component: 'Text',
-                    variant: 'h3',
-                    text: { path: '/title' },
-                },
-                {
-                    id: 'rating-row',
-                    component: 'Row',
-                    align: 'center',
-                    children: ['star', 'rating', 'reviews'],
-                },
-                { id: 'star', component: 'Icon', name: 'star' },
-                { id: 'rating', component: 'Text', text: { path: '/rating' } },
-                {
-                    id: 'reviews',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: { path: '/reviewCount' },
-                },
-                { id: 'timing-row', component: 'Row', children: ['prep', 'cook'] },
-                {
-                    id: 'prep',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: { path: '/prepTime' },
-                },
-                {
-                    id: 'cook',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: { path: '/cookTime' },
-                },
-                {
-                    id: 'servings',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: { path: '/servings' },
-                },
-            ],
-            value: {
-                image: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=300&h=180&fit=crop',
-                title: 'Mediterranean Quinoa Bowl',
-                rating: '4.9',
-                reviewCount: '(1,247 reviews)',
-                prepTime: '15 min prep',
-                cookTime: '20 min cook',
-                servings: 'Serves 4',
-            },
-        }),
-    },
-    {
-        id: 'booking',
-        label: 'Booking Form',
-        emoji: '📅',
-        description: 'Form controls and a submit action payload.',
-        messages: createSceneMessages({
-            surfaceId: 'viewer-booking',
-            components: [
-                {
-                    id: 'root',
-                    component: 'Column',
-                    children: [
-                        'title',
-                        'party-size',
-                        'date-time',
-                        'dietary',
-                        'submit-label',
-                        'submit-button',
-                    ],
-                },
-                {
-                    id: 'title',
-                    component: 'Text',
-                    variant: 'h2',
-                    text: { path: '/title' },
-                },
-                {
-                    id: 'party-size',
-                    component: 'TextField',
-                    label: 'Party Size',
-                    value: { path: '/partySize' },
-                },
-                {
-                    id: 'date-time',
-                    component: 'DateTimeInput',
-                    label: 'Date & Time',
-                    value: { path: '/dateTime' },
-                },
-                {
-                    id: 'dietary',
-                    component: 'TextField',
-                    label: 'Dietary Requirements',
-                    value: { path: '/dietary' },
-                    variant: 'longText',
-                },
-                { id: 'submit-label', component: 'Text', text: 'Submit Reservation' },
-                {
-                    id: 'submit-button',
-                    component: 'Button',
-                    variant: 'primary',
-                    child: 'submit-label',
-                    action: {
-                        event: {
-                            name: 'submit_booking',
-                            context: {
-                                partySize: { path: '/partySize' },
-                                dateTime: { path: '/dateTime' },
-                                dietary: { path: '/dietary' },
-                            },
-                        },
-                    },
-                },
-            ],
-            value: {
-                title: 'Book Your Table',
-                partySize: '4',
-                dateTime: '2026-05-15T19:30:00Z',
-                dietary: 'No peanuts',
-            },
-        }),
-    },
-    {
-        id: 'dashboard',
-        label: 'Sales Snapshot',
-        emoji: '📈',
-        description: 'Nested cards and list-like KPI tiles.',
-        messages: createSceneMessages({
-            surfaceId: 'viewer-dashboard',
-            components: [
-                {
-                    id: 'root',
-                    component: 'Column',
-                    children: ['headline', 'subtitle', 'tiles'],
-                },
-                {
-                    id: 'headline',
-                    component: 'Text',
-                    variant: 'h2',
-                    text: 'Sales by Category',
-                },
-                { id: 'subtitle', component: 'Text', text: 'Q2 performance snapshot' },
-                {
-                    id: 'tiles',
-                    component: 'Column',
-                    children: ['tile-1', 'tile-2', 'tile-3', 'tile-4'],
-                },
-                { id: 'tile-1', component: 'Card', child: 'tile-1-row' },
-                {
-                    id: 'tile-1-row',
-                    component: 'Row',
-                    justify: 'spaceBetween',
-                    children: ['tile-1-label', 'tile-1-value'],
-                },
-                {
-                    id: 'tile-1-label',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: 'Apparel',
-                },
-                {
-                    id: 'tile-1-value',
-                    component: 'Text',
-                    variant: 'h3',
-                    text: '$41,200',
-                },
-                { id: 'tile-2', component: 'Card', child: 'tile-2-row' },
-                {
-                    id: 'tile-2-row',
-                    component: 'Row',
-                    justify: 'spaceBetween',
-                    children: ['tile-2-label', 'tile-2-value'],
-                },
-                {
-                    id: 'tile-2-label',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: 'Electronics',
-                },
-                {
-                    id: 'tile-2-value',
-                    component: 'Text',
-                    variant: 'h3',
-                    text: '$28,900',
-                },
-                { id: 'tile-3', component: 'Card', child: 'tile-3-row' },
-                {
-                    id: 'tile-3-row',
-                    component: 'Row',
-                    justify: 'spaceBetween',
-                    children: ['tile-3-label', 'tile-3-value'],
-                },
-                {
-                    id: 'tile-3-label',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: 'Home Goods',
-                },
-                {
-                    id: 'tile-3-value',
-                    component: 'Text',
-                    variant: 'h3',
-                    text: '$15,600',
-                },
-                { id: 'tile-4', component: 'Card', child: 'tile-4-row' },
-                {
-                    id: 'tile-4-row',
-                    component: 'Row',
-                    justify: 'spaceBetween',
-                    children: ['tile-4-label', 'tile-4-value'],
-                },
-                {
-                    id: 'tile-4-label',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: 'Health & Beauty',
-                },
-                {
-                    id: 'tile-4-value',
-                    component: 'Text',
-                    variant: 'h3',
-                    text: '$10,300',
-                },
-            ],
-        }),
-    },
-    {
-        id: 'shipping',
-        label: 'Shipping Status',
-        emoji: '📦',
-        description: 'Order fulfillment timeline with current package state.',
-        messages: createSceneMessages({
-            surfaceId: 'viewer-shipping',
-            components: [
-                { id: 'root', component: 'Card', child: 'main' },
-                {
-                    id: 'main',
-                    component: 'Column',
-                    children: [
-                        'title-row',
-                        'tracking',
-                        'divider',
-                        'status-1',
-                        'status-2',
-                        'status-3',
-                        'eta',
-                    ],
-                },
-                {
-                    id: 'title-row',
-                    component: 'Row',
-                    align: 'center',
-                    children: ['title-icon', 'title'],
-                },
-                { id: 'title-icon', component: 'Icon', name: 'inventory' },
-                {
-                    id: 'title',
-                    component: 'Text',
-                    variant: 'h2',
-                    text: 'Package Status',
-                },
-                {
-                    id: 'tracking',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: { path: '/tracking' },
-                },
-                { id: 'divider', component: 'Divider' },
-                { id: 'status-1', component: 'Text', text: { path: '/statusPlaced' } },
-                { id: 'status-2', component: 'Text', text: { path: '/statusShipped' } },
-                {
-                    id: 'status-3',
-                    component: 'Text',
-                    variant: 'h3',
-                    text: { path: '/statusDelivery' },
-                },
-                {
-                    id: 'eta',
-                    component: 'Text',
-                    variant: 'caption',
-                    text: { path: '/eta' },
-                },
-            ],
-            value: {
-                tracking: 'Tracking: 17999AA10123456784',
-                statusPlaced: '✓ Order Placed',
-                statusShipped: '✓ Shipped',
-                statusDelivery: '🚚 Out for Delivery',
-                eta: 'Estimated delivery: Today by 8 PM',
-            },
-        }),
-    },
-];
-function ViewerContent({ onAction, }) {
-    const { surfaces, processMessages, resetSurfaces, themeStyle } = useA2uiProcessor(onAction);
-    const [selectedSceneId, setSelectedSceneId] = useState(SCENES[0].id);
-    const selectedScene = useMemo(() => SCENES.find(scene => scene.id === selectedSceneId) ?? SCENES[0], [selectedSceneId]);
-    useEffect(() => {
-        resetSurfaces();
-        processMessages(selectedScene.messages);
-    }, [selectedScene, processMessages, resetSurfaces]);
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, p: 3 }, children: [_jsxs(Box, { sx: {
-                    width: '100%',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    p: 3,
-                    backgroundColor: 'canvas.default',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Select Scene" }), _jsx(SegmentedControl, { "aria-label": "A2UI viewer scene picker", fullWidth: true, children: SCENES.map(scene => (_jsx(SegmentedControl.Button, { selected: scene.id === selectedSceneId, onClick: () => setSelectedSceneId(scene.id), children: `${scene.emoji} ${scene.label}` }, scene.id))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: selectedScene.description })] }), _jsx(Box, { style: themeStyle, sx: {
-                    ...A2UI_RENDER_SCOPE_SX,
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, children: surfaces.map(surface => (_jsx(Box, { sx: { width: '100%' }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
-}
+import { LoopEmbed } from '../loop';
+import { defineA2uiScenePlugin } from '../loop/plugins/a2ui-scene';
+setupPrimerPortals();
+const ScenePlugin = defineA2uiScenePlugin({
+    key: 'viewer',
+    title: 'A2UI Viewer',
+    description: 'Paste A2UI protocol messages and watch the surface they describe.',
+    load: () => import('./scenes/A2UiViewerScene'),
+});
 const A2UiViewerExample = () => {
-    const [lastAction, setLastAction] = useState(null);
-    const handleAction = useCallback((action) => {
-        console.log('A2UI Viewer Action:', action);
-        setLastAction(action);
-    }, []);
-    return (_jsx(ThemedProvider, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDD0D A2UI Viewer" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Standalone viewer scenes powered by MessageProcessor and A2uiSurface." })] }), _jsx(ViewerContent, { onAction: handleAction }), _jsx(Box, { sx: {
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            p: 3,
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            backgroundColor: 'canvas.default',
-                            whiteSpace: 'pre-wrap',
-                            maxHeight: 180,
-                            overflow: 'auto',
-                        }, children: lastAction
-                            ? JSON.stringify(lastAction, null, 2)
-                            : 'No action triggered yet.' })] }) }) }));
+    const plugins = useMemo(() => [ScenePlugin], []);
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
 };
 export default A2UiViewerExample;