@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/A2UiContactCardExample.d.ts

@@ -1,21 +1,3 @@
-/**
- * A2UiContactCardExample
- *
- * Demonstrates a rich contact card UI rendered via A2UI protocol.
- * Uses static A2UI JSON messages (no backend required) featuring:
- * - Data-bound contact information (name, title, email, phone, etc.)
- * - Avatar image with cover fit
- * - Icon + text info rows (calendar, location, email, phone)
- * - Interactive buttons with actions (Follow, Message)
- * - Card and Column layout composition
- * - Divider for visual separation
- *
- * Based on the contact_lookup sample from the A2UI repository.
- */
 import React from 'react';
-/**
- * A2UiContactCardExample — Rich contact card with data binding & actions.
- * No backend required — uses static A2UI JSON messages rendered client-side.
- */
 declare const A2UiContactCardExample: React.FC;
 export default A2UiContactCardExample;

package/lib/examples/A2UiContactCardExample.js

@@ -3,430 +3,173 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/**
- * A2UiContactCardExample
- *
- * Demonstrates a rich contact card UI rendered via A2UI protocol.
- * Uses static A2UI JSON messages (no backend required) featuring:
- * - Data-bound contact information (name, title, email, phone, etc.)
- * - Avatar image with cover fit
- * - Icon + text info rows (calendar, location, email, phone)
- * - Interactive buttons with actions (Follow, Message)
- * - Card and Column layout composition
- * - Divider for visual separation
- *
- * Based on the contact_lookup sample from the A2UI repository.
- */
-import { useState, useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
+import { Button, Text } from '@primer/react';
+import { A2uiSurface } from '@a2ui/react/v0_9';
 import { ThemedProvider } from './utils/themedProvider';
-import { Text, Button as PrimerButton } from '@primer/react';
-import { A2UIProvider, A2UIRenderer, useA2UIActions, initializeDefaultCatalog, } from '@a2ui/react';
-initializeDefaultCatalog();
-const CONTACTS = [
-    {
-        name: 'Alice Johnson',
-        title: 'Staff Engineer',
-        team: 'Platform',
-        location: 'San Francisco, CA',
-        email: 'alice@example.com',
-        mobile: '+1 (415) 555-0101',
-        calendar: 'Available',
-        imageUrl: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Alice',
-    },
-    {
-        name: 'Bob Martinez',
-        title: 'Product Manager',
-        team: 'Growth',
-        location: 'New York, NY',
-        email: 'bob@example.com',
-        mobile: '+1 (212) 555-0202',
-        calendar: 'In a meeting',
-        imageUrl: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Bob',
-    },
-    {
-        name: 'Casey Smith',
-        title: 'Digital Marketing Specialist',
-        team: 'Marketing',
-        location: 'London, UK',
-        email: 'casey@example.com',
-        mobile: '+44 20 7946 0958',
-        calendar: 'Out of office',
-        imageUrl: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Casey',
-    },
-];
-// ---------------------------------------------------------------------------
-// A2UI message builders
-// ---------------------------------------------------------------------------
-function contactCardMessages(contact) {
-    return [
-        // Begin rendering
-        { beginRendering: { surfaceId: 'contact-card', root: 'main_card' } },
-        // Surface update - component tree
+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' },
         {
-            surfaceUpdate: {
-                surfaceId: 'contact-card',
-                components: [
-                    {
-                        id: 'profile_image',
-                        component: {
-                            Image: {
-                                url: { path: '/imageUrl' },
-                                usageHint: 'avatar',
-                                fit: 'cover',
-                            },
-                        },
-                    },
-                    {
-                        id: 'user_heading',
-                        weight: 1,
-                        component: { Text: { text: { path: '/name' }, usageHint: 'h2' } },
-                    },
-                    {
-                        id: 'description_text_1',
-                        component: { Text: { text: { path: '/title' } } },
-                    },
-                    {
-                        id: 'description_text_2',
-                        component: { Text: { text: { path: '/team' } } },
-                    },
-                    {
-                        id: 'description_column',
-                        component: {
-                            Column: {
-                                children: {
-                                    explicitList: [
-                                        'user_heading',
-                                        'description_text_1',
-                                        'description_text_2',
-                                    ],
-                                },
-                                alignment: 'center',
-                            },
-                        },
-                    },
-                    // Calendar row
-                    {
-                        id: 'calendar_icon',
-                        component: { Icon: { name: { literalString: 'calendar_today' } } },
-                    },
-                    {
-                        id: 'calendar_primary_text',
-                        component: {
-                            Text: { usageHint: 'h5', text: { path: '/calendar' } },
-                        },
-                    },
-                    {
-                        id: 'calendar_secondary_text',
-                        component: { Text: { text: { literalString: 'Calendar' } } },
-                    },
-                    {
-                        id: 'calendar_text_column',
-                        component: {
-                            Column: {
-                                children: {
-                                    explicitList: [
-                                        'calendar_primary_text',
-                                        'calendar_secondary_text',
-                                    ],
-                                },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    {
-                        id: 'info_row_1',
-                        component: {
-                            Row: {
-                                children: {
-                                    explicitList: ['calendar_icon', 'calendar_text_column'],
-                                },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    // Location row
-                    {
-                        id: 'location_icon',
-                        component: { Icon: { name: { literalString: 'location_on' } } },
-                    },
-                    {
-                        id: 'location_primary_text',
-                        component: {
-                            Text: { usageHint: 'h5', text: { path: '/location' } },
-                        },
-                    },
-                    {
-                        id: 'location_secondary_text',
-                        component: { Text: { text: { literalString: 'Location' } } },
-                    },
-                    {
-                        id: 'location_text_column',
-                        component: {
-                            Column: {
-                                children: {
-                                    explicitList: [
-                                        'location_primary_text',
-                                        'location_secondary_text',
-                                    ],
-                                },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    {
-                        id: 'info_row_2',
-                        component: {
-                            Row: {
-                                children: {
-                                    explicitList: ['location_icon', 'location_text_column'],
-                                },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    // Email row
-                    {
-                        id: 'mail_icon',
-                        component: { Icon: { name: { literalString: 'mail' } } },
-                    },
-                    {
-                        id: 'mail_primary_text',
-                        component: { Text: { usageHint: 'h5', text: { path: '/email' } } },
-                    },
-                    {
-                        id: 'mail_secondary_text',
-                        component: { Text: { text: { literalString: 'Email' } } },
-                    },
-                    {
-                        id: 'mail_text_column',
-                        component: {
-                            Column: {
-                                children: {
-                                    explicitList: ['mail_primary_text', 'mail_secondary_text'],
-                                },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    {
-                        id: 'info_row_3',
-                        component: {
-                            Row: {
-                                children: { explicitList: ['mail_icon', 'mail_text_column'] },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    // Divider
-                    { id: 'div', component: { Divider: {} } },
-                    // Phone row
-                    {
-                        id: 'call_icon',
-                        component: { Icon: { name: { literalString: 'call' } } },
-                    },
-                    {
-                        id: 'call_primary_text',
-                        component: { Text: { usageHint: 'h5', text: { path: '/mobile' } } },
-                    },
-                    {
-                        id: 'call_secondary_text',
-                        component: { Text: { text: { literalString: 'Mobile' } } },
-                    },
-                    {
-                        id: 'call_text_column',
-                        component: {
-                            Column: {
-                                children: {
-                                    explicitList: ['call_primary_text', 'call_secondary_text'],
-                                },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    {
-                        id: 'info_row_4',
-                        component: {
-                            Row: {
-                                children: { explicitList: ['call_icon', 'call_text_column'] },
-                                distribution: 'start',
-                                alignment: 'start',
-                            },
-                        },
-                    },
-                    // Info column
-                    {
-                        id: 'info_rows_column',
-                        weight: 1,
-                        component: {
-                            Column: {
-                                children: {
-                                    explicitList: [
-                                        'info_row_1',
-                                        'info_row_2',
-                                        'info_row_3',
-                                        'info_row_4',
-                                    ],
-                                },
-                                alignment: 'stretch',
-                            },
-                        },
-                    },
-                    // Action buttons
-                    {
-                        id: 'button_1_text',
-                        component: { Text: { text: { literalString: 'Follow' } } },
-                    },
-                    {
-                        id: 'button_1',
-                        component: {
-                            Button: {
-                                child: 'button_1_text',
-                                primary: true,
-                                action: {
-                                    name: 'follow_contact',
-                                    context: [{ key: 'contactName', value: { path: '/name' } }],
-                                },
-                            },
-                        },
-                    },
-                    {
-                        id: 'button_2_text',
-                        component: { Text: { text: { literalString: 'Message' } } },
-                    },
-                    {
-                        id: 'button_2',
-                        component: {
-                            Button: {
-                                child: 'button_2_text',
-                                primary: false,
-                                action: {
-                                    name: 'send_message',
-                                    context: [{ key: 'contactName', value: { path: '/name' } }],
-                                },
-                            },
-                        },
-                    },
-                    {
-                        id: 'action_buttons_row',
-                        component: {
-                            Row: {
-                                children: { explicitList: ['button_1', 'button_2'] },
-                                distribution: 'center',
-                                alignment: 'center',
-                            },
-                        },
-                    },
-                    // Main layout
-                    {
-                        id: 'main_column',
-                        component: {
-                            Column: {
-                                children: {
-                                    explicitList: [
-                                        'profile_image',
-                                        'description_column',
-                                        'div',
-                                        'info_rows_column',
-                                        'action_buttons_row',
-                                    ],
-                                },
-                                alignment: 'stretch',
-                            },
-                        },
-                    },
-                    { id: 'main_card', 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' },
+                    },
+                },
             },
         },
-        // Data model
+        { id: 'message-button-label', component: 'Text', text: 'Message' },
         {
-            dataModelUpdate: {
-                surfaceId: 'contact-card',
-                path: '/',
-                contents: [
-                    { key: 'name', valueString: contact.name },
-                    { key: 'title', valueString: contact.title },
-                    { key: 'team', valueString: contact.team },
-                    { key: 'location', valueString: contact.location },
-                    { key: 'email', valueString: contact.email },
-                    { key: 'mobile', valueString: contact.mobile },
-                    { key: 'calendar', valueString: contact.calendar },
-                    { key: 'imageUrl', valueString: contact.imageUrl },
-                ],
+            id: 'message-button',
+            component: 'Button',
+            child: 'message-button-label',
+            action: {
+                event: {
+                    name: 'message_contact',
+                    context: {
+                        email: { path: '/email' },
+                        name: { path: '/name' },
+                    },
+                },
             },
         },
-    ];
-}
-// ---------------------------------------------------------------------------
-// Components
-// ---------------------------------------------------------------------------
-function ContactCardContent() {
-    const { processMessages, clearSurfaces, getSurfaces } = useA2UIActions();
-    const [selectedIdx, setSelectedIdx] = useState(null);
-    const loadContact = useCallback((idx) => {
-        clearSurfaces();
-        processMessages(contactCardMessages(CONTACTS[idx]));
-        setSelectedIdx(idx);
-    }, [processMessages, clearSurfaces]);
-    const surfaces = getSurfaces();
-    const surfaceEntries = Array.from(surfaces.entries());
-    return (_jsxs(Box, { sx: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [_jsxs(Box, { sx: {
-                    width: '260px',
-                    borderRight: '1px solid',
-                    borderColor: 'border.default',
-                    backgroundColor: 'canvas.subtle',
-                    padding: 3,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 2,
-                }, children: [_jsx(Text, { as: "h3", sx: { fontSize: '1rem', fontWeight: 'bold', marginBottom: 2 }, children: "Contacts" }), CONTACTS.map((contact, idx) => (_jsx(PrimerButton, { variant: selectedIdx === idx ? 'primary' : 'default', onClick: () => loadContact(idx), sx: { width: '100%', justifyContent: 'flex-start' }, children: _jsxs(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'flex-start',
-                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: '0.875rem' }, children: contact.name }), _jsx(Text, { sx: {
-                                        fontSize: '0.75rem',
-                                        color: selectedIdx === idx ? 'fg.onEmphasis' : 'fg.muted',
-                                    }, children: contact.title })] }) }, contact.email)))] }), _jsx(Box, { sx: {
-                    flex: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    padding: 4,
-                }, children: selectedIdx === null ? (_jsxs(Box, { sx: { textAlign: 'center' }, children: [_jsx(Text, { sx: { fontSize: '3rem' }, children: "\uD83D\uDC64" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', marginTop: 2 }, children: "Select a contact from the sidebar" })] })) : (_jsx(Box, { sx: { maxWidth: '420px', width: '100%' }, children: surfaceEntries.map(([surfaceId]) => (_jsx(A2UIRenderer, { surfaceId: surfaceId }, surfaceId))) })) })] }));
+    ],
+    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',
+    },
+});
+function ContactCardContent({ onAction, }) {
+    const { surfaces, processMessages, resetSurfaces } = 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, { sx: { display: 'grid', gap: 3 }, children: surfaces.map(surface => (_jsx(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 3,
+                        backgroundColor: 'canvas.subtle',
+                    }, children: _jsx(A2uiSurface, { surface: surface }) }, surface.id))) })] }));
 }
-/**
- * A2UiContactCardExample — Rich contact card with data binding & actions.
- * No backend required — uses static A2UI JSON messages rendered client-side.
- */
 const A2UiContactCardExample = () => {
-    const handleAction = useCallback((actionMessage) => {
-        console.log('Contact action:', actionMessage);
-        alert(`Action: ${JSON.stringify(actionMessage, null, 2)}`);
+    const [lastAction, setLastAction] = useState(null);
+    const handleAction = useCallback((action) => {
+        console.log('A2UI Contact Card Action:', action);
+        setLastAction(action);
     }, []);
-    return (_jsx(ThemedProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minHeight: '100vh',
-                    backgroundColor: 'canvas.default',
-                }, children: [_jsxs(Box, { sx: {
-                            padding: 3,
+    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.subtle',
-                        }, children: [_jsx(Text, { as: "h1", sx: {
-                                    fontSize: '1.25rem',
-                                    fontWeight: 'bold',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                }, children: "\uD83D\uDC64 A2UI Contact Card" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Data-bound contact card with actions \u2014 based on A2UI contact_lookup sample" })] }), _jsx(ContactCardContent, {})] }) }) }));
+                        }, 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.subtle',
+                                    fontFamily: 'mono',
+                                    fontSize: 0,
+                                    whiteSpace: 'pre-wrap',
+                                    overflow: 'auto',
+                                }, children: actionPreview })] })] }) }) }));
 };
 export default A2UiContactCardExample;

package/lib/examples/A2UiRestaurantExample.d.ts

@@ -1,33 +1,3 @@
-/**
- * A2UiRestaurantExample
- *
- * Demonstrates A2UI (Agent-to-UI) protocol integration with a pydantic-ai
- * restaurant finder agent using the official @a2ui/react renderer.
- *
- * The agent generates A2UI JSON messages that are rendered into
- * interactive React components via A2UIProvider + A2UIRenderer.
- *
- * Features:
- * - A2UI protocol message processing via @a2ui/react
- * - Dynamic UI generation from agent responses
- * - Restaurant search and booking interface
- * - Action handling for interactive components (buttons, forms)
- * - Dark/light theme support
- *
- * Backend: /api/v1/a2ui/restaurant/
- */
 import React from 'react';
-/**
- * A2UiRestaurantExample - Main example component
- *
- * Demonstrates A2UI protocol integration with pydantic-ai.
- * The agent generates A2UI JSON messages for restaurant search,
- * display, and booking functionality.
- *
- * Uses @a2ui/react's two-context architecture:
- * - A2UIProvider wraps the app, receives an onAction callback
- * - useA2UIActions() provides processMessages/clearSurfaces/getSurfaces
- * - A2UIRenderer renders surfaces by ID
- */
 declare const A2UiRestaurantExample: React.FC;
 export default A2UiRestaurantExample;