@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/examples/A2UiContactCardExample.d.ts

@@ -1,3 +1,13 @@
+/**
+ * A2UI Contact Card, as a reactor application.
+ *
+ * The scene lives in `./scenes/A2UiContactCardScene` 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/A2UiContactCardExample
+ */
 import React from 'react';
 declare const A2UiContactCardExample: React.FC;
 export default A2UiContactCardExample;

package/lib/examples/A2UiContactCardExample.js

@@ -1,179 +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 { Button, Text } from '@primer/react';
-import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed } from '../components/a2ui';
+/**
+ * A2UI Contact Card, as a reactor application.
+ *
+ * The scene lives in `./scenes/A2UiContactCardScene` 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/A2UiContactCardExample
+ */
+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 CONTACT_SURFACE_ID = 'contact-card-v09';
-const CONTACT_CARD_MESSAGES = createSceneMessages({
-    surfaceId: CONTACT_SURFACE_ID,
-    components: [
-        { id: 'root', component: 'Card', child: 'main-column' },
-        {
-            id: 'main-column',
-            component: 'Column',
-            align: 'center',
-            children: [
-                'avatar-image',
-                'name',
-                'title',
-                'divider',
-                'contact-info',
-                'actions',
-            ],
-        },
-        {
-            id: 'avatar-image',
-            component: 'Image',
-            url: { path: '/avatar' },
-            fit: 'cover',
-            variant: 'avatar',
-        },
-        { id: 'name', component: 'Text', text: { path: '/name' }, variant: 'h2' },
-        {
-            id: 'title',
-            component: 'Text',
-            text: { path: '/title' },
-            variant: 'body',
-        },
-        { id: 'divider', component: 'Divider' },
-        {
-            id: 'contact-info',
-            component: 'Column',
-            children: ['phone-row', 'email-row', 'location-row'],
-        },
-        {
-            id: 'phone-row',
-            component: 'Row',
-            align: 'center',
-            children: ['phone-icon', 'phone-text'],
-        },
-        { id: 'phone-icon', component: 'Icon', name: 'phone' },
-        { id: 'phone-text', component: 'Text', text: { path: '/phone' } },
-        {
-            id: 'email-row',
-            component: 'Row',
-            align: 'center',
-            children: ['email-icon', 'email-text'],
-        },
-        { id: 'email-icon', component: 'Icon', name: 'mail' },
-        { id: 'email-text', component: 'Text', text: { path: '/email' } },
-        {
-            id: 'location-row',
-            component: 'Row',
-            align: 'center',
-            children: ['location-icon', 'location-text'],
-        },
-        { id: 'location-icon', component: 'Icon', name: 'locationOn' },
-        { id: 'location-text', component: 'Text', text: { path: '/location' } },
-        {
-            id: 'actions',
-            component: 'Row',
-            justify: 'center',
-            children: ['follow-button', 'message-button'],
-        },
-        { id: 'follow-button-label', component: 'Text', text: 'Follow' },
-        {
-            id: 'follow-button',
-            component: 'Button',
-            variant: 'primary',
-            child: 'follow-button-label',
-            action: {
-                event: {
-                    name: 'follow_contact',
-                    context: {
-                        contactId: { path: '/contactId' },
-                        name: { path: '/name' },
-                    },
-                },
-            },
-        },
-        { id: 'message-button-label', component: 'Text', text: 'Message' },
-        {
-            id: 'message-button',
-            component: 'Button',
-            child: 'message-button-label',
-            action: {
-                event: {
-                    name: 'message_contact',
-                    context: {
-                        email: { path: '/email' },
-                        name: { path: '/name' },
-                    },
-                },
-            },
-        },
-    ],
-    value: {
-        contactId: 'contact_001',
-        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
-        name: 'David Park',
-        title: 'Engineering Manager',
-        phone: '+1 (555) 234-5678',
-        email: 'david.park@company.com',
-        location: 'San Francisco, CA',
-    },
+import { LoopEmbed } from '../loop';
+import { defineA2uiScenePlugin } from '../loop/plugins/a2ui-scene';
+setupPrimerPortals();
+const ScenePlugin = defineA2uiScenePlugin({
+    key: 'contact-card',
+    title: 'A2UI Contact Card',
+    description: 'A canned A2UI contact card: MessageProcessor + surface, native protocol messages.',
+    load: () => import('./scenes/A2UiContactCardScene'),
 });
-function ContactCardContent({ onAction, }) {
-    const { surfaces, processMessages, resetSurfaces, themeStyle } = useA2uiProcessor(onAction);
-    const loadCard = useCallback(() => {
-        resetSurfaces();
-        processMessages(CONTACT_CARD_MESSAGES);
-    }, [processMessages, resetSurfaces]);
-    useEffect(() => {
-        loadCard();
-    }, [loadCard]);
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, px: 3, pb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: loadCard, children: "Reload Card" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" })] }), _jsx(Box, { style: themeStyle, sx: {
-                    ...A2UI_RENDER_SCOPE_SX,
-                    display: 'grid',
-                    gap: 3,
-                }, children: surfaces.map(surface => (_jsx(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        p: 3,
-                        backgroundColor: 'canvas.default',
-                    }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
-}
 const A2UiContactCardExample = () => {
-    const [lastAction, setLastAction] = useState(null);
-    const handleAction = useCallback((action) => {
-        console.warn('A2UI Contact Card Action:', action);
-        setLastAction(action);
-    }, []);
-    const actionPreview = useMemo(() => {
-        if (!lastAction) {
-            return 'Trigger an action from the card to inspect the event payload.';
-        }
-        return JSON.stringify(lastAction, null, 2);
-    }, [lastAction]);
-    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\uDC64 A2UI Contact Card" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Uses MessageProcessor + A2uiSurface with native A2UI protocol messages." })] }), _jsxs(Box, { sx: {
-                            display: 'grid',
-                            gridTemplateColumns: ['1fr', '2fr 1fr'],
-                            gap: 3,
-                            p: 3,
-                        }, children: [_jsx(ContactCardContent, { onAction: handleAction }), _jsx(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    p: 3,
-                                    backgroundColor: 'canvas.default',
-                                    fontFamily: 'mono',
-                                    fontSize: 0,
-                                    whiteSpace: 'pre-wrap',
-                                    overflow: 'auto',
-                                }, children: actionPreview })] })] }) }) }));
+    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 A2UiContactCardExample;

package/lib/examples/A2UiJupyterOutputExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const A2UiJupyterOutputExample: React.FC;
+export default A2UiJupyterOutputExample;