@datalayer/agent-runtimes 0.0.5 → 0.0.8

package/lib/examples/AgentSpaceHomeExample.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1,171 +0,0 @@
-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/components/AgentsDataTable.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-interface AgentsDataTableProps {
-    onToggleStatus?: (agentId: string) => void;
-    showAuthor?: boolean;
-    showLastEdited?: boolean;
-}
-/**
- * Agents Data Table Component
- *
- * Displays agents in a table format with status controls.
- */
-export declare const AgentsDataTable: React.FC<AgentsDataTableProps>;
-export {};

package/lib/examples/components/AgentsDataTable.js

@@ -1,74 +0,0 @@
-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/Rating.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-interface RatingProps {
-    /** Rating value between 1 and 5 */
-    value: number;
-    /** Size of the stars */
-    size?: number;
-}
-/**
- * Rating Component
- *
- * Displays a star rating using octicons.
- */
-export declare const Rating: React.FC<RatingProps>;
-export {};

package/lib/examples/components/Rating.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@datalayer/primer-addons';
-import { StarFillIcon } from '@primer/octicons-react';
-/**
- * Rating Component
- *
- * Displays a star rating using octicons.
- */
-export const Rating = ({ value, size = 12 }) => {
-    const clampedValue = Math.max(1, Math.min(5, value));
-    return (_jsx(Box, { sx: { display: 'flex', gap: 0.5, alignItems: 'center' }, children: Array.from({ length: 5 }, (_, index) => (_jsx(StarFillIcon, { size: size, fill: index < clampedValue ? '#fbbf24' : '#e5e7eb' }, index))) }));
-};