@datalayer/agent-runtimes 0.0.2

package/lib/examples/AgentSpaceFormExample.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Agent Runtime Example Component
+ *
+ * Demonstrates the multi-transport, multi-agent architecture of agent-runtimes.
+ *
+ * Features:
+ * - Agent library selection (Pydantic AI, LangChain, Simple AI)
+ * - Transport selection (ACP, AG-UI, A2A)
+ * - Configurable WebSocket URL and Agent ID
+ * - Real-time streaming responses
+ * - Permission request handling
+ * - Connection state management
+ *
+ * Usage:
+ * 1. Start the agent-runtimes server: `npm run start:acp`
+ * 2. The UI will automatically connect to the ACP server
+ * 3. Select your agent library and transport
+ * 4. Enter the WebSocket URL and Agent ID (or use defaults)
+ * 5. Click Connect and start chatting!
+ */
+declare const AgentSpaceFormExample: React.FC;
+export default AgentSpaceFormExample;

package/lib/examples/AgentSpaceFormExample.js

@@ -0,0 +1,296 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/// <reference types="vite/client" />
+import { useState, useEffect, useCallback } from 'react';
+import { PageLayout, IconButton } from '@primer/react';
+import { SidebarCollapseIcon, SidebarExpandIcon } from '@primer/octicons-react';
+import { AiAgentIcon } from '@datalayer/icons-react';
+import { Blankslate } from '@primer/react/experimental';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { Chat } from '../components/chat';
+import { useAgentsStore } from './stores/examplesStore';
+import { MockFileBrowser, MainContent, Header, FooterMetrics, AgentConfiguration, } from './components';
+// Create a query client for React Query
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            gcTime: 1000 * 60 * 10, // 10 minutes
+            retry: 1,
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+// Default configuration - use environment variable if available
+// Note: Vercel AI connects to Jupyter server (8888), other protocols connect to agent-runtimes server (8765)
+const DEFAULT_WS_URL = import.meta.env.VITE_ACP_WS_URL || 'ws://localhost:8765/api/v1/acp/ws';
+const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const DEFAULT_AGENT_ID = 'demo-agent';
+/**
+ * Agent Runtime Example Component
+ *
+ * Demonstrates the multi-transport, multi-agent architecture of agent-runtimes.
+ *
+ * Features:
+ * - Agent library selection (Pydantic AI, LangChain, Simple AI)
+ * - Transport selection (ACP, AG-UI, A2A)
+ * - Configurable WebSocket URL and Agent ID
+ * - Real-time streaming responses
+ * - Permission request handling
+ * - Connection state management
+ *
+ * Usage:
+ * 1. Start the agent-runtimes server: `npm run start:acp`
+ * 2. The UI will automatically connect to the ACP server
+ * 3. Select your agent library and transport
+ * 4. Enter the WebSocket URL and Agent ID (or use defaults)
+ * 5. Click Connect and start chatting!
+ */
+const AgentSpaceFormExample = () => {
+    const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
+    const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
+    const [agentName, setAgentName] = useState(DEFAULT_AGENT_ID);
+    const [selectedAgentId, setSelectedAgentId] = useState('new-agent');
+    const [agentLibrary, setAgentLibrary] = useState('pydantic-ai');
+    const [transport, setTransport] = useState('ag-ui');
+    const [extensions, setExtensions] = useState([]);
+    const [isConfigured, setIsConfigured] = useState(false);
+    // UI state
+    const [activeSession, setActiveSession] = useState('session-1');
+    const [richEditor, setRichEditor] = useState(false);
+    const [durable, setDurable] = useState(true);
+    const [codemode, setCodemode] = useState(false);
+    const [showContextTree, setShowContextTree] = useState(false);
+    const [showNotebook] = useState(true);
+    const [leftPaneVisible, setLeftPaneVisible] = useState(true);
+    const [rightPaneVisible, setRightPaneVisible] = useState(true);
+    const [timeTravel, setTimeTravel] = useState(0);
+    const [isCreatingAgent, setIsCreatingAgent] = useState(false);
+    const [createError, setCreateError] = useState(null);
+    // Get agents and current agent from store
+    const agents = useAgentsStore(state => state.agents);
+    const currentAgent = useAgentsStore(state => state.getAgentById(selectedAgentId));
+    const toggleAgentStatus = useAgentsStore(state => state.toggleAgentStatus);
+    // Initialize transport from selected agent on mount
+    useEffect(() => {
+        if (currentAgent) {
+            setTransport(currentAgent.transport);
+            setAgentName(currentAgent.id);
+        }
+    }, [currentAgent]);
+    const handleAgentSelect = (agentId) => {
+        setSelectedAgentId(agentId);
+        setCreateError(null);
+        if (agentId === 'new-agent') {
+            // Reset to defaults for new agent
+            setAgentName(DEFAULT_AGENT_ID);
+            setTransport('ag-ui');
+        }
+        else {
+            const agent = agents.find(a => a.id === agentId);
+            if (agent) {
+                setAgentName(agent.id);
+                setTransport(agent.transport);
+            }
+        }
+    };
+    /**
+     * Create a new agent via the API
+     */
+    const createAgentOnServer = useCallback(async () => {
+        setIsCreatingAgent(true);
+        setCreateError(null);
+        try {
+            const response = await fetch(`${baseUrl}/api/v1/agents`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: agentName,
+                    description: `Agent created via UI (${agentLibrary})`,
+                    agent_library: agentLibrary,
+                    transport: transport,
+                    model: 'openai:gpt-4o-mini',
+                    system_prompt: 'You are a helpful AI assistant.',
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response
+                    .json()
+                    .catch(() => ({ detail: 'Unknown error' }));
+                throw new Error(errorData.detail || `Failed to create agent: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('[AgentRuntimeExample] Agent created:', data);
+            return data.id;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to create agent';
+            console.error('[AgentRuntimeExample] Error creating agent:', errorMessage);
+            setCreateError(errorMessage);
+            return null;
+        }
+        finally {
+            setIsCreatingAgent(false);
+        }
+    }, [baseUrl, agentName, agentLibrary, transport]);
+    /**
+     * Delete an agent via the API
+     */
+    const deleteAgentOnServer = useCallback(async (agentId) => {
+        try {
+            const response = await fetch(`${baseUrl}/api/v1/agents/${agentId}`, {
+                method: 'DELETE',
+            });
+            if (!response.ok) {
+                console.warn(`[AgentRuntimeExample] Failed to delete agent: ${response.status}`);
+                return false;
+            }
+            console.log('[AgentRuntimeExample] Agent deleted:', agentId);
+            return true;
+        }
+        catch (error) {
+            console.warn('[AgentRuntimeExample] Error deleting agent:', error);
+            return false;
+        }
+    }, [baseUrl]);
+    const handleConnect = async () => {
+        // For existing agents (not new-agent), ensure transport and agentName are set
+        if (selectedAgentId !== 'new-agent') {
+            const agent = agents.find(a => a.id === selectedAgentId);
+            if (agent) {
+                setTransport(agent.transport);
+                setAgentName(agent.id);
+            }
+            setIsConfigured(true);
+            return;
+        }
+        // For vercel-ai-jupyter, no server-side agent creation needed
+        // It uses Jupyter server's built-in agent endpoint
+        if (transport === 'vercel-ai-jupyter') {
+            setIsConfigured(true);
+            return;
+        }
+        // For new agents, first create the agent on the server
+        if (transport === 'acp' && wsUrl && agentName) {
+            const createdAgentId = await createAgentOnServer();
+            if (createdAgentId) {
+                setAgentName(createdAgentId);
+                setIsConfigured(true);
+            }
+        }
+        else if ((transport === 'ag-ui' ||
+            transport === 'vercel-ai' ||
+            transport === 'a2a') &&
+            baseUrl &&
+            agentName) {
+            const createdAgentId = await createAgentOnServer();
+            if (createdAgentId) {
+                setAgentName(createdAgentId);
+                setIsConfigured(true);
+            }
+        }
+    };
+    const handleReset = async () => {
+        // Delete the agent from the server if we created it
+        if (selectedAgentId === 'new-agent' && agentName) {
+            await deleteAgentOnServer(agentName);
+        }
+        setIsConfigured(false);
+    };
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: selectedAgentId === 'new-agent' ? undefined : currentAgent?.name, agentDescription: selectedAgentId === 'new-agent'
+                            ? undefined
+                            : currentAgent?.description, agentStatus: currentAgent?.status, richEditor: richEditor, durable: durable, codemode: codemode, showContextTree: showContextTree, isNewAgent: selectedAgentId === 'new-agent', isConfigured: isConfigured, onSessionChange: setActiveSession, onRichEditorChange: setRichEditor, onDurableChange: setDurable, onCodemodeChange: setCodemode, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
+                            ? () => toggleAgentStatus(currentAgent.id)
+                            : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                                    position: 'fixed',
+                                    left: 0,
+                                    top: '50%',
+                                    transform: 'translateY(-50%)',
+                                    zIndex: 100,
+                                }, children: _jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse left pane", size: "small", onClick: () => setLeftPaneVisible(false), sx: {
+                                        borderRadius: '0 6px 6px 0',
+                                        bg: 'canvas.default',
+                                        border: '1px solid',
+                                        borderLeft: 'none',
+                                        borderColor: 'border.default',
+                                    } }) }), _jsx(PageLayout.Pane, { position: "start", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '90px' }, children: selectedAgentId === 'new-agent' ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "New Agent" }), _jsx(Box, { sx: { textAlign: 'center' }, children: _jsx(Blankslate.Description, { children: "Configure your new agent using the settings on the right" }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { sx: {
+                            position: 'fixed',
+                            left: 0,
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            zIndex: 100,
+                        }, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand left pane", size: "small", onClick: () => setLeftPaneVisible(true), sx: {
+                                borderRadius: '0 6px 6px 0',
+                                bg: 'canvas.default',
+                                border: '1px solid',
+                                borderLeft: 'none',
+                                borderColor: 'border.default',
+                            } }) })), _jsx(PageLayout.Content, { children: _jsx(MainContent, { showNotebook: showNotebook, timeTravel: timeTravel, onTimeTravelChange: setTimeTravel, richEditor: richEditor, notebookFile: currentAgent?.notebookFile, lexicalFile: currentAgent?.lexicalFile, isNewAgent: selectedAgentId === 'new-agent' }) }), rightPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                                    position: 'fixed',
+                                    right: 0,
+                                    top: '50%',
+                                    transform: 'translateY(-50%)',
+                                    zIndex: 100,
+                                }, children: _jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse right pane", size: "small", onClick: () => setRightPaneVisible(false), sx: {
+                                        borderRadius: '6px 0 0 6px',
+                                        bg: 'canvas.default',
+                                        border: '1px solid',
+                                        borderRight: 'none',
+                                        borderColor: 'border.default',
+                                    } }) }), _jsx(PageLayout.Pane, { position: "end", width: "large", resizable: true, sticky: true, children: _jsx(Box, { sx: {
+                                        height: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        p: 2,
+                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onAgentSelect: handleAgentSelect, onConnect: handleConnect })) : (
+                                    /* Chat Interface */
+                                    _jsx(Box, { sx: { flex: 1 }, children: _jsx(Chat, { transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, title: currentAgent?.name || agentName || 'AI Assistant', autoConnect: true, autoFocus: true, placeholder: "Type your message to the agent...", height: "calc(100vh - 250px)", suggestions: [
+                                                {
+                                                    title: '👋 Say hello',
+                                                    message: 'Hello! What can you help me with today?',
+                                                },
+                                                {
+                                                    title: '💡 Get ideas',
+                                                    message: 'Can you suggest some creative project ideas?',
+                                                },
+                                                {
+                                                    title: '📝 Explain concepts',
+                                                    message: 'Can you explain how AI agents work?',
+                                                },
+                                                {
+                                                    title: '🔧 Help with code',
+                                                    message: 'Can you help me write some Python code?',
+                                                },
+                                            ], onDisconnect: handleReset, onMessageSent: (_content) => {
+                                                // Message sent
+                                            }, onMessageReceived: (_message) => {
+                                                // Message received
+                                            } }) })) }) })] })) : (_jsx(Box, { sx: {
+                            position: 'fixed',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            zIndex: 100,
+                        }, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand right pane", size: "small", onClick: () => setRightPaneVisible(true), sx: {
+                                borderRadius: '6px 0 0 6px',
+                                bg: 'canvas.default',
+                                border: '1px solid',
+                                borderRight: 'none',
+                                borderColor: 'border.default',
+                            } }) })), _jsx(PageLayout.Footer, { divider: "line", sx: {
+                            position: 'fixed',
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            bg: 'canvas.default',
+                            zIndex: 10,
+                        }, children: selectedAgentId !== 'new-agent' && (_jsx(FooterMetrics, { tokens: 1523552, cost: 2.01 })) })] }) }) }));
+};
+export default AgentSpaceFormExample;

package/lib/examples/AgentSpaceHomeExample.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Agent Runtimes Example Component
+ *
+ * Displays a page with agent tiles using Primer PageHeader component.
+ */
+declare const AgentSpaceHomeExample: React.FC;
+export default AgentSpaceHomeExample;

package/lib/examples/AgentSpaceHomeExample.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
+import { PageHeader, Button, TextInput, ActionMenu, ActionList, Box, Avatar, SegmentedControl, } from '@primer/react';
+import { PlusIcon, SearchIcon, KebabHorizontalIcon, TriangleDownIcon, CircleIcon, PauseIcon, } from '@primer/octicons-react';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { useAgentsStore } from './stores/examplesStore';
+import { AgentsDataTable } from './components/AgentsDataTable';
+import { Rating } from './components/Rating';
+const AgentTile = ({ type, title, description, author, lastEdited, screenshot, status, avatarUrl, stars = 0, notifications = 0, onClick, }) => {
+    if (type === 'create') {
+        return (_jsxs(Box, { onClick: onClick, style: {
+                width: '300px',
+                height: '200px',
+                border: '2px dashed var(--borderColor-default)',
+                borderRadius: '8px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+                background: 'var(--bgColor-default)',
+            }, onMouseEnter: e => {
+                e.currentTarget.style.borderColor =
+                    'var(--borderColor-accent-emphasis)';
+                e.currentTarget.style.background = 'var(--bgColor-muted)';
+            }, onMouseLeave: e => {
+                e.currentTarget.style.borderColor = 'var(--borderColor-default)';
+                e.currentTarget.style.background = 'var(--bgColor-default)';
+            }, children: [_jsx(Box, { style: { color: 'var(--fgColor-muted)' }, children: _jsx(PlusIcon, { size: 48 }) }), _jsx(Box, { style: {
+                        marginTop: '12px',
+                        fontSize: '14px',
+                        color: 'var(--fgColor-muted)',
+                        fontWeight: 600,
+                    }, children: "Create new agent space" })] }));
+    }
+    return (_jsxs(Box, { onClick: onClick, style: {
+            width: '300px',
+            border: '1px solid var(--borderColor-default)',
+            borderRadius: '8px',
+            overflow: 'visible',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+            background: 'var(--bgColor-default)',
+            position: 'relative',
+        }, onMouseEnter: e => {
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
+            e.currentTarget.style.transform = 'translateY(-2px)';
+        }, onMouseLeave: e => {
+            e.currentTarget.style.boxShadow = 'none';
+            e.currentTarget.style.transform = 'translateY(0)';
+        }, children: [notifications > 0 && (_jsx(Box, { style: {
+                    position: 'absolute',
+                    top: '-8px',
+                    right: '-8px',
+                    minWidth: '24px',
+                    height: '24px',
+                    padding: '0 6px',
+                    borderRadius: '12px',
+                    background: '#ef4444',
+                    color: 'white',
+                    fontSize: '13px',
+                    fontWeight: 700,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+                    border: '2px solid var(--bgColor-default)',
+                    zIndex: 10,
+                }, children: notifications })), _jsxs(Box, { style: {
+                    width: '100%',
+                    height: '150px',
+                    background: screenshot
+                        ? `url(${screenshot}) center/cover`
+                        : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: 'white',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    position: 'relative',
+                }, children: [!screenshot && title, status && (_jsx(Box, { style: {
+                            position: 'absolute',
+                            top: '8px',
+                            right: '8px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                            padding: '4px 8px',
+                            borderRadius: '4px',
+                            background: 'rgba(255, 255, 255, 0.9)',
+                            fontSize: '12px',
+                            fontWeight: 600,
+                            color: status === 'running'
+                                ? 'var(--fgColor-success)'
+                                : 'var(--fgColor-attention)',
+                        }, children: status === 'running' ? (_jsxs(_Fragment, { children: [_jsx(CircleIcon, { size: 12, fill: "var(--fgColor-success)" }), _jsx("span", { children: "Running" })] })) : (_jsxs(_Fragment, { children: [_jsx(PauseIcon, { size: 12 }), _jsx("span", { children: "Paused" })] })) }))] }), _jsxs(Box, { style: { padding: '12px' }, children: [_jsx(Box, { style: {
+                            fontSize: '16px',
+                            fontWeight: 600,
+                            color: 'var(--fgColor-default)',
+                            marginBottom: '8px',
+                        }, children: title }), description && (_jsx(Box, { style: {
+                            fontSize: '13px',
+                            color: 'var(--fgColor-muted)',
+                            marginBottom: '8px',
+                            lineHeight: '1.4',
+                        }, children: description })), _jsxs(Box, { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '12px',
+                        }, children: [avatarUrl && _jsx(Avatar, { src: avatarUrl, size: 40 }), _jsxs(Box, { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsxs(Box, { style: {
+                                            fontSize: '12px',
+                                            color: 'var(--fgColor-muted)',
+                                        }, children: ["by ", author] }), _jsxs(Box, { style: {
+                                            fontSize: '12px',
+                                            color: 'var(--fgColor-muted)',
+                                        }, children: ["Edited ", lastEdited] }), stars > 0 && (_jsx(Box, { style: { marginTop: '4px' }, children: _jsx(Rating, { value: stars, size: 12 }) }))] })] })] })] }));
+};
+/**
+ * Agent Runtimes Example Component
+ *
+ * Displays a page with agent tiles using Primer PageHeader component.
+ */
+const AgentSpaceHomeExample = () => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [lastEditedFilter, setLastEditedFilter] = useState('Last edited');
+    const [visibilityFilter, setVisibilityFilter] = useState('Any visibility');
+    const [statusFilter, setStatusFilter] = useState('Any status');
+    const [analystFilter, setAnalystFilter] = useState('All analysts');
+    const [viewMode, setViewMode] = useState('tiles');
+    // Get agents from store
+    const agents = useAgentsStore(state => state.agents);
+    const handleCreateAgent = () => {
+        // Handle create new agent
+    };
+    const handleAgentClick = (agentName) => {
+        // Handle agent click
+        void agentName;
+    };
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { style: {
+                minHeight: '100vh',
+                background: 'var(--bgColor-default)',
+                padding: '24px',
+            }, children: [_jsxs(PageHeader, { role: "banner", "aria-label": "Agent Spaces", sx: { borderBottom: 'none' }, children: [_jsx(PageHeader.TitleArea, { children: _jsx(PageHeader.Title, { children: "Agent Spaces" }) }), _jsx(PageHeader.Actions, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "invisible", leadingVisual: KebabHorizontalIcon, "aria-label": "More options" }) }), _jsx(ActionMenu.Overlay, { children: _jsx(ActionList, { children: _jsx(ActionList.Item, { onSelect: () => {
+                                                    // Handle add folder
+                                                }, children: "Add folder" }) }) })] }) })] }), _jsxs(Box, { style: { padding: '24px' }, children: [_jsxs(Box, { style: {
+                                display: 'flex',
+                                gap: '12px',
+                                marginBottom: '24px',
+                                flexWrap: 'wrap',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                            }, children: [_jsxs(Box, { style: {
+                                        display: 'flex',
+                                        gap: '12px',
+                                        flexWrap: 'wrap',
+                                        alignItems: 'center',
+                                        flex: 1,
+                                    }, children: [_jsx(Box, { style: { flex: '1 1 300px', minWidth: '200px' }, children: _jsx(TextInput, { leadingVisual: SearchIcon, placeholder: "Search agent spaces...", value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { width: '100%' } }) }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { trailingAction: TriangleDownIcon, children: lastEditedFilter }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsx(ActionList.Item, { selected: lastEditedFilter === 'Last edited', onSelect: () => setLastEditedFilter('Last edited'), children: "Last edited" }), _jsx(ActionList.Item, { selected: lastEditedFilter === 'Created date', onSelect: () => setLastEditedFilter('Created date'), children: "Created date" }), _jsx(ActionList.Item, { selected: lastEditedFilter === 'Name', onSelect: () => setLastEditedFilter('Name'), children: "Name" })] }) })] }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { trailingAction: TriangleDownIcon, children: visibilityFilter }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsx(ActionList.Item, { selected: visibilityFilter === 'Any visibility', onSelect: () => setVisibilityFilter('Any visibility'), children: "Any visibility" }), _jsx(ActionList.Item, { selected: visibilityFilter === 'Public', onSelect: () => setVisibilityFilter('Public'), children: "Public" }), _jsx(ActionList.Item, { selected: visibilityFilter === 'Private', onSelect: () => setVisibilityFilter('Private'), children: "Private" })] }) })] }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { trailingAction: TriangleDownIcon, children: statusFilter }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsx(ActionList.Item, { selected: statusFilter === 'Any status', onSelect: () => setStatusFilter('Any status'), children: "Any status" }), _jsx(ActionList.Item, { selected: statusFilter === 'Active', onSelect: () => setStatusFilter('Active'), children: "Active" }), _jsx(ActionList.Item, { selected: statusFilter === 'Draft', onSelect: () => setStatusFilter('Draft'), children: "Draft" }), _jsx(ActionList.Item, { selected: statusFilter === 'Archived', onSelect: () => setStatusFilter('Archived'), children: "Archived" })] }) })] }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { trailingAction: TriangleDownIcon, children: analystFilter }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsx(ActionList.Item, { selected: analystFilter === 'All analysts', onSelect: () => setAnalystFilter('All analysts'), children: "All analysts" }), _jsx(ActionList.Item, { selected: analystFilter === 'Eric Charles', onSelect: () => setAnalystFilter('Eric Charles'), children: "Eric Charles" }), _jsx(ActionList.Item, { selected: analystFilter === 'Other users', onSelect: () => setAnalystFilter('Other users'), children: "Other users" })] }) })] })] }), _jsxs(SegmentedControl, { "aria-label": "View mode", onChange: index => setViewMode(index === 0 ? 'tiles' : 'table'), children: [_jsx(SegmentedControl.Button, { selected: viewMode === 'tiles', children: "Tiles" }), _jsx(SegmentedControl.Button, { selected: viewMode === 'table', children: "Table" })] })] }), viewMode === 'tiles' && (_jsxs(Box, { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+                                gap: '24px',
+                                marginBottom: '48px',
+                            }, children: [_jsx(AgentTile, { type: "create", onClick: handleCreateAgent }), agents.map(agent => (_jsx(AgentTile, { type: "agent", title: agent.name, description: agent.description, author: agent.author, lastEdited: agent.lastEdited, screenshot: agent.screenshot, status: agent.status, avatarUrl: agent.avatarUrl, stars: agent.stars, notifications: agent.notifications, onClick: () => handleAgentClick(agent.name) }, agent.id)))] })), viewMode === 'table' && (_jsx(Box, { children: _jsx(AgentsDataTable, {}) }))] })] }) }));
+};
+export default AgentSpaceHomeExample;

package/lib/examples/CopilotKitLexicalExample.d.ts

@@ -0,0 +1,38 @@
+/**
+ * CopilotKit Lexical Example with CopilotKit Integration.
+ *
+ * To run this example, create a .env file in the core directory with:
+ * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
+ *
+ * You also will need to connect copilot kit to some sort of LLM Add LLM Provider API Key.
+ *
+ * https://docs.copilotkit.ai/reference/hooks/useFrontendTool
+ *
+ * @module examples/CopilotKitLexicalExample
+ */
+import 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+import type { ServiceManager } from '@jupyterlab/services';
+import '@datalayer/jupyter-lexical/style/index.css';
+import '@copilotkit/react-ui/styles.css';
+import './lexical/lexical-theme.css';
+/**
+ * Main CopilotKit lexical example component
+ */
+interface CopilotKitLexicalExampleProps {
+    content?: string;
+    serviceManager?: ServiceManager.IManager;
+}
+declare function CopilotKitLexicalExample({ content, serviceManager, }: CopilotKitLexicalExampleProps): JSX.Element;
+export default CopilotKitLexicalExample;