@datalayer/agent-runtimes 0.0.2

package/lib/examples/components/AgentsDataTable.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, Avatar, Box } from '@primer/react';
+import { PlayIcon, PauseIcon } from '@primer/octicons-react';
+import { useAgentsStore } from '../stores/examplesStore';
+/**
+ * Agents Data Table Component
+ *
+ * Displays agents in a table format with status controls.
+ */
+export const AgentsDataTable = ({ onToggleStatus, showAuthor = true, showLastEdited = true, }) => {
+    const agents = useAgentsStore(state => state.agents);
+    const toggleAgentStatus = useAgentsStore(state => state.toggleAgentStatus);
+    const handleToggle = (agentId) => {
+        toggleAgentStatus(agentId);
+        onToggleStatus?.(agentId);
+    };
+    return (_jsx(Box, { sx: {
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            overflow: 'hidden',
+        }, children: _jsxs("table", { style: {
+                width: '100%',
+                borderCollapse: 'collapse',
+            }, children: [_jsx("thead", { style: {
+                        backgroundColor: 'var(--bgColor-muted)',
+                        borderBottom: '1px solid var(--borderColor-default)',
+                    }, children: _jsxs("tr", { children: [_jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'left',
+                                    fontWeight: 600,
+                                    fontSize: '14px',
+                                }, children: "Agent" }), showAuthor && (_jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'left',
+                                    fontWeight: 600,
+                                    fontSize: '14px',
+                                }, children: "Author" })), showLastEdited && (_jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'left',
+                                    fontWeight: 600,
+                                    fontSize: '14px',
+                                }, children: "Last Edited" })), _jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'left',
+                                    fontWeight: 600,
+                                    fontSize: '14px',
+                                }, children: "Status" }), _jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'left',
+                                    fontWeight: 600,
+                                    fontSize: '14px',
+                                }, children: "Actions" })] }) }), _jsx("tbody", { children: agents.map(agent => (_jsxs("tr", { style: {
+                            borderBottom: '1px solid var(--borderColor-default)',
+                        }, children: [_jsx("td", { style: { padding: '12px 16px' }, children: _jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '12px',
+                                    }, children: [_jsx(Avatar, { src: agent.avatarUrl, size: 32 }), _jsx("span", { style: { fontWeight: 600 }, children: agent.name })] }) }), showAuthor && (_jsx("td", { style: { padding: '12px 16px' }, children: _jsx("span", { style: { color: 'var(--fgColor-muted)' }, children: agent.author }) })), showLastEdited && (_jsx("td", { style: { padding: '12px 16px' }, children: _jsx("span", { style: { color: 'var(--fgColor-muted)' }, children: agent.lastEdited }) })), _jsx("td", { style: { padding: '12px 16px' }, children: _jsx("span", { style: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        gap: '6px',
+                                        padding: '2px 8px',
+                                        borderRadius: '12px',
+                                        fontSize: '12px',
+                                        fontWeight: 500,
+                                        backgroundColor: agent.status === 'running'
+                                            ? 'var(--bgColor-success-muted)'
+                                            : 'var(--bgColor-attention-muted)',
+                                        color: agent.status === 'running'
+                                            ? 'var(--fgColor-success)'
+                                            : 'var(--fgColor-attention)',
+                                    }, children: agent.status === 'running' ? 'Running' : 'Paused' }) }), _jsx("td", { style: { padding: '12px 16px' }, children: _jsx(IconButton, { icon: agent.status === 'running' ? PauseIcon : PlayIcon, "aria-label": agent.status === 'running' ? 'Pause agent' : 'Start agent', onClick: () => handleToggle(agent.id), variant: "invisible" }) })] }, agent.id))) })] }) }));
+};

package/lib/examples/components/FooterMetrics.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface FooterMetricsProps {
+    tokens: number;
+    cost: number;
+}
+/**
+ * Footer Metrics Component
+ *
+ * Displays token usage and cost.
+ */
+export declare const FooterMetrics: React.FC<FooterMetricsProps>;
+export {};

package/lib/examples/components/FooterMetrics.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+/**
+ * Footer Metrics Component
+ *
+ * Displays token usage and cost.
+ */
+export const FooterMetrics = ({ tokens, cost, }) => {
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 3,
+            py: 2,
+            px: 3,
+        }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tokens:", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: tokens.toLocaleString() })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Cost:", ' ', _jsxs(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: ["$", cost.toFixed(2), " USD"] })] })] }));
+};

package/lib/examples/components/Header.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+interface HeaderProps {
+    activeSession: string;
+    agentName?: string;
+    agentDescription?: string;
+    agentStatus?: 'running' | 'paused';
+    richEditor: boolean;
+    durable: boolean;
+    codemode: boolean;
+    showContextTree: boolean;
+    isNewAgent?: boolean;
+    isConfigured?: boolean;
+    onSessionChange: (sessionId: string) => void;
+    onRichEditorChange: (value: boolean) => void;
+    onDurableChange: (value: boolean) => void;
+    onCodemodeChange: (value: boolean) => void;
+    onToggleContextTree: () => void;
+    onToggleStatus?: () => void;
+}
+/**
+ * Header Component
+ *
+ * Main header for the agent runtime interface with session tabs,
+ * toggle switches, controls, and optional context treemap.
+ */
+export declare const Header: React.FC<HeaderProps>;
+export {};

package/lib/examples/components/Header.js

@@ -0,0 +1,294 @@
+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.
+ */
+import { useState, useRef } from 'react';
+import { Text, Button, PageLayout, ToggleSwitch, AvatarStack, Avatar, Spinner, TextInput, FormControl, AnchoredOverlay, IconButton, } from '@primer/react';
+import { ZapIcon, ListUnorderedIcon, InfoIcon, PlayIcon, PauseIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import ReactECharts from 'echarts-for-react';
+import { SessionTabs } from './SessionTabs';
+import { HeaderControls } from './HeaderControls';
+// Mock session data
+const MOCK_SESSIONS = [
+    { id: 'session-1', name: 'Session 1', active: true },
+    { id: 'session-2', name: 'Session 2', active: false },
+    { id: 'session-3', name: 'Session 3', active: false },
+];
+// Mock context data for treemap
+const MOCK_CONTEXT_DATA = {
+    name: 'Context',
+    children: [
+        {
+            name: 'Files',
+            value: 450000,
+            children: [
+                { name: 'app.py', value: 125000 },
+                { name: 'models.py', value: 98000 },
+                { name: 'routes.py', value: 112000 },
+                { name: 'utils.py', value: 115000 },
+            ],
+        },
+        {
+            name: 'Messages',
+            value: 380000,
+            children: [
+                { name: 'User messages', value: 180000 },
+                { name: 'Assistant responses', value: 200000 },
+            ],
+        },
+        {
+            name: 'Tools',
+            value: 220000,
+            children: [
+                { name: 'Code execution', value: 95000 },
+                { name: 'File operations', value: 75000 },
+                { name: 'Search', value: 50000 },
+            ],
+        },
+        {
+            name: 'Memory',
+            value: 473552,
+            children: [
+                { name: 'Short term', value: 150000 },
+                { name: 'Long term', value: 323552 },
+            ],
+        },
+        {
+            name: 'Free space',
+            value: 996448,
+        },
+    ],
+};
+// Optimized context data with more free space
+const OPTIMIZED_CONTEXT_DATA = {
+    name: 'Context',
+    children: [
+        {
+            name: 'Files',
+            value: 280000,
+            children: [
+                { name: 'app.py', value: 85000 },
+                { name: 'models.py', value: 65000 },
+                { name: 'routes.py', value: 70000 },
+                { name: 'utils.py', value: 60000 },
+            ],
+        },
+        {
+            name: 'Messages',
+            value: 250000,
+            children: [
+                { name: 'User messages', value: 120000 },
+                { name: 'Assistant responses', value: 130000 },
+            ],
+        },
+        {
+            name: 'Tools',
+            value: 150000,
+            children: [
+                { name: 'Code execution', value: 65000 },
+                { name: 'File operations', value: 50000 },
+                { name: 'Search', value: 35000 },
+            ],
+        },
+        {
+            name: 'Memory',
+            value: 320000,
+            children: [
+                { name: 'Short term', value: 100000 },
+                { name: 'Long term', value: 220000 },
+            ],
+        },
+        {
+            name: 'Free space',
+            value: 1520000,
+        },
+    ],
+};
+/**
+ * Header Component
+ *
+ * Main header for the agent runtime interface with session tabs,
+ * toggle switches, controls, and optional context treemap.
+ */
+export const Header = ({ activeSession, agentName, agentDescription, agentStatus, richEditor, durable, codemode, showContextTree, isNewAgent = false, isConfigured = false, onSessionChange, onRichEditorChange, onDurableChange, onCodemodeChange, onToggleContextTree, onToggleStatus, }) => {
+    const [isOptimizing, setIsOptimizing] = useState(false);
+    const [contextData, setContextData] = useState(MOCK_CONTEXT_DATA);
+    const [totalTokens, setTotalTokens] = useState('1.52M');
+    const [showDetails, setShowDetails] = useState(false);
+    const [showAvatarView, setShowAvatarView] = useState(false);
+    const [openOverlay, setOpenOverlay] = useState(null);
+    const richEditorRef = useRef(null);
+    const durableRef = useRef(null);
+    const codemodeRef = useRef(null);
+    const handleOptimize = () => {
+        setIsOptimizing(true);
+        setTimeout(() => {
+            setContextData(OPTIMIZED_CONTEXT_DATA);
+            setTotalTokens('1.00M');
+            setIsOptimizing(false);
+        }, 2000);
+    };
+    return (_jsxs(PageLayout.Header, { divider: "none", children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 3,
+                    py: 2,
+                }, children: [agentName && (_jsx(SessionTabs, { sessions: MOCK_SESSIONS, activeSession: activeSession, agentName: agentName, agentDescription: agentDescription, onSessionChange: onSessionChange, onAddSession: () => {
+                            /* Add session */
+                        } })), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 3,
+                            marginLeft: 'auto',
+                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: codemode, onClick: () => onCodemodeChange(!codemode), "aria-labelledby": "codemode-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "codemode-label", sx: { fontSize: 0 }, children: "Codemode" }), _jsx(IconButton, { ref: codemodeRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Codemode info", onClick: () => setOpenOverlay(openOverlay === 'codemode' ? null : 'codemode') }), _jsx(AnchoredOverlay, { open: openOverlay === 'codemode', onOpen: () => setOpenOverlay('codemode'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: codemodeRef, children: _jsxs(Box, { sx: {
+                                                p: 3,
+                                                maxWidth: '300px',
+                                                bg: 'canvas.overlay',
+                                                border: '1px solid',
+                                                borderColor: 'border.default',
+                                                borderRadius: 2,
+                                                boxShadow: 'shadow.large',
+                                            }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        display: 'block',
+                                                        mb: 1,
+                                                        fontWeight: 'bold',
+                                                    }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Optimize the agent for code-focused tasks including code generation, debugging, and technical problem-solving." })] }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: richEditor, onClick: () => onRichEditorChange(!richEditor), "aria-labelledby": "rich-editor-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "rich-editor-label", sx: { fontSize: 0 }, children: "Rich Editor" }), _jsx(IconButton, { ref: richEditorRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Rich Editor info", onClick: () => setOpenOverlay(openOverlay === 'richEditor' ? null : 'richEditor') }), _jsx(AnchoredOverlay, { open: openOverlay === 'richEditor', onOpen: () => setOpenOverlay('richEditor'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: richEditorRef, children: _jsxs(Box, { sx: {
+                                                p: 3,
+                                                maxWidth: '300px',
+                                                bg: 'canvas.overlay',
+                                                border: '1px solid',
+                                                borderColor: 'border.default',
+                                                borderRadius: 2,
+                                                boxShadow: 'shadow.large',
+                                            }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        display: 'block',
+                                                        mb: 1,
+                                                        fontWeight: 'bold',
+                                                    }, children: "Rich Editor" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable rich text editing with formatting options, markdown support, and visual enhancements for a better editing experience." })] }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: durable, onClick: () => onDurableChange(!durable), "aria-labelledby": "durable-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "durable-label", sx: { fontSize: 0 }, children: "Durable" }), _jsx(IconButton, { ref: durableRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Durable info", onClick: () => setOpenOverlay(openOverlay === 'durable' ? null : 'durable') }), _jsx(AnchoredOverlay, { open: openOverlay === 'durable', onOpen: () => setOpenOverlay('durable'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: durableRef, children: _jsxs(Box, { sx: {
+                                                p: 3,
+                                                maxWidth: '300px',
+                                                bg: 'canvas.overlay',
+                                                border: '1px solid',
+                                                borderColor: 'border.default',
+                                                borderRadius: 2,
+                                                boxShadow: 'shadow.large',
+                                            }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        display: 'block',
+                                                        mb: 1,
+                                                        fontWeight: 'bold',
+                                                    }, children: "Durable" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Persist agent state and conversation history across sessions. Your work is automatically saved and restored when you return." })] }) })] })] }), agentName && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [agentStatus && onToggleStatus && (_jsx(IconButton, { "aria-label": agentStatus === 'running' ? 'Pause agent' : 'Play agent', icon: agentStatus === 'running' ? PauseIcon : PlayIcon, onClick: onToggleStatus, variant: "invisible", size: "small", sx: {
+                                    color: agentStatus === 'running' ? 'attention.fg' : 'success.fg',
+                                } })), _jsx(HeaderControls, { onToggleContextTree: onToggleContextTree })] })), agentName && (_jsx(Box, { onClick: () => setShowAvatarView(!showAvatarView), sx: { cursor: 'pointer' }, children: _jsxs(AvatarStack, { size: 24, disableExpand: true, children: [_jsx(Avatar, { alt: "Primer logo", src: "https://avatars.githubusercontent.com/primer" }), _jsx(Avatar, { alt: "GitHub logo", src: "https://avatars.githubusercontent.com/github" }), _jsx(Avatar, { alt: "Atom logo", src: "https://avatars.githubusercontent.com/atom" }), _jsx(Avatar, { alt: "GitHub Desktop logo", src: "https://avatars.githubusercontent.com/desktop" })] }) }))] }), agentName && showContextTree && (_jsxs(Box, { sx: {
+                    mt: 2,
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.subtle',
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            mb: 2,
+                        }, children: [_jsxs(Text, { sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'bold',
+                                }, children: ["Context Distribution (", totalTokens, " tokens)"] }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: "Details" }), _jsx(Button, { size: "small", onClick: handleOptimize, disabled: isOptimizing, leadingVisual: isOptimizing ? Spinner : ZapIcon, children: "Optimize" })] })] }), _jsx(ReactECharts, { option: {
+                            series: [
+                                {
+                                    type: 'treemap',
+                                    data: contextData.children,
+                                    roam: false,
+                                    breadcrumb: {
+                                        show: false,
+                                    },
+                                    label: {
+                                        show: true,
+                                        formatter: '{b}',
+                                    },
+                                    itemStyle: {
+                                        borderColor: '#fff',
+                                        borderWidth: 2,
+                                    },
+                                    levels: [
+                                        {
+                                            itemStyle: {
+                                                borderColor: '#777',
+                                                borderWidth: 0,
+                                                gapWidth: 1,
+                                            },
+                                        },
+                                        {
+                                            itemStyle: {
+                                                borderColor: '#555',
+                                                borderWidth: 5,
+                                                gapWidth: 1,
+                                            },
+                                            colorSaturation: [0.35, 0.5],
+                                        },
+                                        {
+                                            colorSaturation: [0.35, 0.5],
+                                        },
+                                    ],
+                                },
+                            ],
+                        }, style: { height: '300px' } }), showDetails && (_jsxs(Box, { sx: {
+                            mt: 3,
+                            p: 2,
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                            bg: 'canvas.default',
+                            fontFamily: 'mono',
+                            fontSize: 0,
+                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), contextData.children.map((category) => (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: [category.name, ": ", (category.value / 1000).toFixed(0), "K tokens"] }), category.children && (_jsx(Box, { sx: { ml: 3, mt: 1 }, children: category.children.map((item) => (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 ", item.name, ": ", (item.value / 1000).toFixed(0), "K tokens"] }, item.name))) }))] }, category.name)))] }))] })), agentName && showAvatarView && (_jsxs(Box, { sx: {
+                    mt: 2,
+                    p: 3,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.subtle',
+                }, children: [_jsx(Text, { sx: {
+                            fontSize: 1,
+                            fontWeight: 'bold',
+                            display: 'block',
+                            mb: 3,
+                        }, children: "Share and Collaborate" }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    display: 'block',
+                                    mb: 2,
+                                }, children: "Current Members" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "Primer logo", src: "https://avatars.githubusercontent.com/primer" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontWeight: 'semibold',
+                                                            display: 'block',
+                                                        }, children: "Primer" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "primer@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Admin" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "GitHub logo", src: "https://avatars.githubusercontent.com/github" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontWeight: 'semibold',
+                                                            display: 'block',
+                                                        }, children: "GitHub" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "support@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "Atom logo", src: "https://avatars.githubusercontent.com/atom" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontWeight: 'semibold',
+                                                            display: 'block',
+                                                        }, children: "Atom" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "atom@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Only" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "GitHub Desktop logo", src: "https://avatars.githubusercontent.com/desktop" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontWeight: 'semibold',
+                                                            display: 'block',
+                                                        }, children: "GitHub Desktop" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "desktop@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] })] })] }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Add people" }), _jsx(TextInput, { placeholder: "Enter email address", sx: { width: '100%' } })] }) }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Message" }), _jsx(TextInput, { placeholder: "Optional message for invitees", sx: { width: '100%' } })] }) }), _jsxs(Box, { children: [_jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    display: 'block',
+                                    mb: 2,
+                                }, children: "General Access" }), _jsx(Box, { sx: {
+                                    p: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    borderRadius: 2,
+                                    bg: 'canvas.default',
+                                }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Text, { sx: { fontSize: 0 }, children: "foo" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Only" })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Text, { sx: { fontSize: 0 }, children: "bar" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] })] }) })] })] }))] }));
+};

package/lib/examples/components/HeaderControls.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface HeaderControlsProps {
+    onToggleContextTree: () => void;
+}
+/**
+ * Header Controls Component
+ *
+ * Contains the context toggle sparkline.
+ */
+export declare const HeaderControls: React.FC<HeaderControlsProps>;
+export {};

package/lib/examples/components/HeaderControls.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+import { Sparklines, SparklinesLine } from '../../components/sparklines';
+/**
+ * Header Controls Component
+ *
+ * Contains the context toggle sparkline.
+ */
+export const HeaderControls = ({ onToggleContextTree, }) => {
+    // Sample data for the sparkline - in production, this would come from props or state
+    const sparklineData = [
+        120, 200, 150, 180, 170, 210, 200, 220, 180, 210, 230, 250, 260, 270, 280,
+        290, 300, 320, 310, 330,
+    ];
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            cursor: 'pointer',
+            '&:hover': {
+                opacity: 0.8,
+            },
+        }, onClick: onToggleContextTree, children: _jsx(Box, { sx: { width: '120px', height: '30px' }, children: _jsx(Sparklines, { data: sparklineData, width: 120, height: 30, children: _jsx(SparklinesLine, { color: "#0969da", style: { strokeWidth: '2' } }) }) }) }));
+};

package/lib/examples/components/LexicalEditor.d.ts

@@ -0,0 +1,27 @@
+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 React from 'react';
+import type { ServiceManager } from '@jupyterlab/services';
+import '@datalayer/jupyter-lexical/style/index.css';
+import '../lexical/lexical-theme.css';
+interface LexicalEditorProps {
+    content?: string;
+    serviceManager?: ServiceManager.IManager;
+}
+/**
+ * Lexical Editor Component
+ *
+ * Rich text editor with Simple integration.
+ */
+export declare const LexicalEditor: React.FC<LexicalEditorProps>;
+export {};

package/lib/examples/components/LexicalEditor.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+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 { useCallback, useEffect, useRef, useState } from 'react';
+import { $getRoot, $createParagraphNode } from 'lexical';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { TRANSFORMERS } from '@lexical/markdown';
+import { registerCodeHighlighting } from '@lexical/code';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { Box } from '@datalayer/primer-addons';
+import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, } from '@datalayer/jupyter-lexical';
+import { editorConfig } from '../lexical/editorConfig';
+import '@datalayer/jupyter-lexical/style/index.css';
+import '../lexical/lexical-theme.css';
+const LEXICAL_ID = 'agent-runtime-lexical-editor';
+const INITIAL_CONTENT = undefined;
+/**
+ * Lexical plugin for loading initial content into the editor.
+ */
+function LoadContentPlugin({ content }) {
+    const [editor] = useLexicalComposerContext();
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (!content || !isFirstRender.current) {
+            return;
+        }
+        isFirstRender.current = false;
+        try {
+            const parsed = JSON.parse(content);
+            if (parsed && typeof parsed === 'object' && parsed.root) {
+                const editorState = editor.parseEditorState(content);
+                editor.setEditorState(editorState, {
+                    tag: 'history-merge',
+                });
+            }
+            else {
+                throw new Error('Invalid Lexical editor state format');
+            }
+        }
+        catch {
+            editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                const paragraph = $createParagraphNode();
+                root.append(paragraph);
+            }, {
+                tag: 'history-merge',
+            });
+        }
+    }, [content, editor]);
+    return null;
+}
+/**
+ * Lexical plugin for Simple code syntax highlighting.
+ */
+function CodeHighlightPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}
+/**
+ * Wrapper component for kernel-dependent Simple plugins.
+ */
+function SimpleKernelPluginsInner() {
+    const { defaultKernel } = useJupyter();
+    return (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, { kernel: defaultKernel }), _jsx(JupyterInputOutputPlugin, { kernel: defaultKernel })] }));
+}
+/**
+ * Lexical Editor Component
+ *
+ * Rich text editor with Simple integration.
+ */
+export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, }) => {
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+    const handleChange = useCallback((_editorState) => {
+        // onChange handler - can be used for tracking changes
+    }, []);
+    return (_jsx(Box, { sx: {
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            padding: 3,
+            backgroundColor: 'canvas.default',
+            minHeight: '600px',
+        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) }));
+};

package/lib/examples/components/MainContent.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ServiceManager } from '@jupyterlab/services';
+interface MainContentProps {
+    showNotebook: boolean;
+    timeTravel: number;
+    onTimeTravelChange: (value: number) => void;
+    richEditor: boolean;
+    notebookFile?: string;
+    lexicalFile?: string;
+    isNewAgent?: boolean;
+    serviceManager?: ServiceManager.IManager;
+}
+/**
+ * Main Content Component
+ *
+ * Displays the main content area with Simple notebook viewer or Lexical editor and time travel.
+ */
+export declare const MainContent: React.FC<MainContentProps>;
+export {};