@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/agent-node/AgentNodeGallery.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, Button, Heading, Label, Spinner, Text, TextInput, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Heading, Label, Spinner, Text, TextInput, } from '@primer/react';
 import { AgentIcon, BeakerIcon, BookIcon, BugIcon, CheckCircleFillIcon, CloudIcon, CodeIcon, CopilotIcon, CpuIcon, DatabaseIcon, DependabotIcon, EyeIcon, FileIcon, GearIcon, GitBranchIcon, GlobeIcon, GraphIcon, HeartIcon, HomeIcon, IssueOpenedIcon, LightBulbIcon, LinkIcon, MailIcon, MegaphoneIcon, NoteIcon, PackageIcon, PencilIcon, PeopleIcon, PlayIcon, PlugIcon, PulseIcon, RocketIcon, SearchIcon, ShareIcon, ShieldCheckIcon, ShieldIcon, SparklesFillIcon, SquirrelIcon, StarIcon, SyncIcon, TableIcon, TagIcon, TelescopeIcon, TerminalIcon, ToolsIcon, ZapIcon, } from '@primer/octicons-react';
 /**
  * The transport to launch a spec with: its own when it names one the node
@@ -465,56 +466,20 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
         onLaunchError,
     ]);
     if (loading) {
-        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, { size: "large" }) }));
+        return (_jsx(Box, { display: "flex", justifyContent: "center", py: 6, children: _jsx(Spinner, { size: "large" }) }));
     }
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: hasActiveAgent ? 'Running agent' : 'Choose an agent' }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: hasActiveAgent
+    return (_jsxs(Box, { children: [_jsxs(Box, { mb: 3, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: hasActiveAgent ? 'Running agent' : 'Choose an agent' }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: hasActiveAgent
                             ? 'Your node is currently running an active agent. You can terminate it to go back to the gallery.'
-                            : 'Pick an agent from the gallery to launch it on this node. The active agent handles prompts sent directly to the node and through the Datalayer platform.' })] }), error && (_jsx(Box, { sx: {
-                    mb: 3,
-                    p: 2,
-                    borderRadius: 2,
-                    bg: 'danger.subtle',
-                    color: 'danger.fg',
-                    fontSize: 1,
-                }, children: error })), hasActiveAgent ? (_jsxs(Box, { sx: {
-                    p: 4,
-                    border: '1px solid',
-                    borderColor: 'accent.muted',
-                    borderRadius: 2,
-                    bg: 'accent.subtle',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Label, { variant: "secondary", sx: {
+                            : 'Pick an agent from the gallery to launch it on this node. The active agent handles prompts sent directly to the node and through the Datalayer platform.' })] }), error && (_jsx(Box, { mb: 3, p: 2, borderRadius: 2, bg: "danger.subtle", color: "danger.fg", fontSize: 1, children: error })), hasActiveAgent ? (_jsxs(Box, { p: 4, border: "1px solid", borderColor: "accent.muted", borderRadius: 2, bg: "accent.subtle", display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsxs(Label, { variant: "secondary", sx: {
                                     display: 'inline-flex',
                                     alignItems: 'center',
                                     gap: 1,
                                     color: 'accent.fg',
                                 }, children: [_jsx(CheckCircleFillIcon, { size: 12 }), "Active agent"] }), _jsx(Text, { sx: { fontWeight: 600 }, children: activeAgent?.name ||
                                     activeAgent?.agent_spec_id ||
-                                    normalizedActiveAgentId })] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Chat is enabled while an active agent is running on this node. Terminate it to return to the agent cards picker." }), activeAgentSpec && (_jsxs(Box, { sx: {
-                            p: 3,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            bg: 'canvas.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2,
-                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Label, { size: "small", variant: "accent", children: "Spec" }), _jsx(Text, { sx: { fontWeight: 600 }, children: activeAgentSpec.name || activeAgentSpec.id }), activeAgentSpec.version && (_jsxs(Label, { size: "small", variant: "secondary", children: ["v", activeAgentSpec.version] }))] }), activeAgentSpec.description && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: activeAgentSpec.description })), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [_jsxs(Label, { size: "small", variant: "secondary", children: ["id: ", activeAgentSpec.id] }), activeAgentSpec.model && (_jsxs(Label, { size: "small", variant: "secondary", children: ["model: ", activeAgentSpec.model] })), activeAgentSpec.inference_provider && (_jsxs(Label, { size: "small", variant: "secondary", children: ["provider: ", activeAgentSpec.inference_provider] })), Array.isArray(activeAgentSpec.tags)
+                                    normalizedActiveAgentId })] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Chat is enabled while an active agent is running on this node. Terminate it to return to the agent cards picker." }), activeAgentSpec && (_jsxs(Box, { p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Label, { size: "small", variant: "accent", children: "Spec" }), _jsx(Text, { sx: { fontWeight: 600 }, children: activeAgentSpec.name || activeAgentSpec.id }), activeAgentSpec.version && (_jsxs(Label, { size: "small", variant: "secondary", children: ["v", activeAgentSpec.version] }))] }), activeAgentSpec.description && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: activeAgentSpec.description })), _jsxs(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: [_jsxs(Label, { size: "small", variant: "secondary", children: ["id: ", activeAgentSpec.id] }), activeAgentSpec.model && (_jsxs(Label, { size: "small", variant: "secondary", children: ["model: ", activeAgentSpec.model] })), activeAgentSpec.inference_provider && (_jsxs(Label, { size: "small", variant: "secondary", children: ["provider: ", activeAgentSpec.inference_provider] })), Array.isArray(activeAgentSpec.tags)
                                         ? activeAgentSpec.tags.map(tag => (_jsx(Label, { size: "small", variant: "secondary", children: tag }, tag)))
-                                        : null] })] })), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-start' }, children: _jsx(Button, { variant: "danger", disabled: terminating, onClick: () => void terminateActiveAgent(), children: terminating ? 'Terminating…' : 'Terminate' }) })] })) : specs.length === 0 ? (_jsx(Box, { sx: {
-                    p: 4,
-                    textAlign: 'center',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    color: 'fg.muted',
-                }, children: "No agents are available in the library yet." })) : (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { mb: 3, maxWidth: 420 }, children: _jsx(TextInput, { value: search, onChange: event => setSearch(event.target.value), placeholder: "Filter agents by name, description, model, or tag...", block: true }) }), _jsx(Box, { sx: {
-                            display: 'grid',
-                            gridTemplateColumns: GRID_TEMPLATE,
-                            gap: 3,
-                        }, children: filteredSpecs.map(spec => {
+                                        : null] })] })), _jsx(Box, { display: "flex", justifyContent: "flex-start", children: _jsx(Button, { variant: "danger", disabled: terminating, onClick: () => void terminateActiveAgent(), children: terminating ? 'Terminating…' : 'Terminate' }) })] })) : specs.length === 0 ? (_jsx(Box, { p: 4, textAlign: "center", border: "1px solid", borderColor: "border.default", borderRadius: 2, color: "fg.muted", children: "No agents are available in the library yet." })) : (_jsxs(_Fragment, { children: [_jsx(Box, { mb: 3, maxWidth: 420, children: _jsx(TextInput, { value: search, onChange: event => setSearch(event.target.value), placeholder: "Filter agents by name, description, model, or tag...", block: true }) }), _jsx(Box, { display: "grid", gridTemplateColumns: GRID_TEMPLATE, gap: 3, children: filteredSpecs.map(spec => {
                             const IconComponent = resolveAgentspecIcon(spec.icon, spec.name || spec.id);
                             const isActive = !!activeAgentId && runningBySpec.get(spec.id) === activeAgentId;
                             const isLaunching = launchingId === spec.id;
@@ -536,52 +501,25 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                                         event.preventDefault();
                                         void launch(spec);
                                     }
-                                }, "aria-label": `${launchLabel} ${spec.name || spec.id}`, "aria-busy": isLaunching, "aria-disabled": isLaunching, sx: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    textAlign: 'left',
-                                    cursor: isLaunching ? 'progress' : 'pointer',
-                                    p: 3,
-                                    border: '1px solid',
+                                }, "aria-label": `${launchLabel} ${spec.name || spec.id}`, "aria-busy": isLaunching, "aria-disabled": isLaunching, display: "flex", flexDirection: "column", textAlign: "left", cursor: isLaunching ? 'progress' : 'pointer', p: 3, border: "1px solid", borderColor: isActive ? 'success.emphasis' : 'border.default', borderRadius: 2, bg: "canvas.default", 
+                                // Hover feedback is border + shadow only. No transform: a
+                                // transform here promotes the card to its own layer and makes
+                                // the line-clamped description re-rasterize (per-paragraph
+                                // motion artifact).
+                                transition: "box-shadow 180ms ease, border-color 180ms ease", hover: {
+                                    boxShadow: 'shadow.medium',
                                     borderColor: isActive
                                         ? 'success.emphasis'
-                                        : 'border.default',
-                                    borderRadius: 2,
-                                    bg: 'canvas.default',
-                                    // Hover feedback is border + shadow only. No transform: a
-                                    // transform here promotes the card to its own layer and makes
-                                    // the line-clamped description re-rasterize (per-paragraph
-                                    // motion artifact).
-                                    transition: 'box-shadow 180ms ease, border-color 180ms ease',
-                                    '&:hover': {
-                                        boxShadow: 'shadow.medium',
-                                        borderColor: isActive
-                                            ? 'success.emphasis'
-                                            : 'accent.emphasis',
-                                    },
-                                    '&:focus-visible': {
-                                        outline: '2px solid',
-                                        outlineColor: 'accent.fg',
-                                        outlineOffset: '2px',
-                                    },
+                                        : 'accent.emphasis',
+                                }, focusVisible: {
+                                    outline: '2px solid',
+                                    outlineColor: 'accent.fg',
+                                    outlineOffset: '2px',
+                                }, sx: {
                                     '&[aria-disabled="true"]': {
                                         opacity: 0.8,
                                     },
-                                }, children: [_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: 2,
-                                            mb: 2,
-                                        }, children: [_jsx(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    width: 40,
-                                                    height: 40,
-                                                    borderRadius: 2,
-                                                    fontSize: 3,
-                                                    bg: 'canvas.subtle',
-                                                }, children: spec.emoji ? (_jsx(Text, { sx: { fontSize: 3, lineHeight: 1 }, children: spec.emoji })) : (_jsx(IconComponent, { size: 20 })) }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: {
+                                }, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", width: 40, height: 40, borderRadius: 2, fontSize: 3, bg: "canvas.subtle", children: spec.emoji ? (_jsx(Text, { sx: { fontSize: 3, lineHeight: 1 }, children: spec.emoji })) : (_jsx(IconComponent, { size: 20 })) }), _jsxs(Box, { flex: 1, minWidth: 0, children: [_jsx(Heading, { as: "h3", sx: {
                                                             fontSize: 2,
                                                             mb: 0,
                                                             overflow: 'hidden',
@@ -599,33 +537,7 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                                             WebkitLineClamp: 3,
                                             WebkitBoxOrient: 'vertical',
                                             overflow: 'hidden',
-                                        }, children: spec.description })), spec.tags && spec.tags.length > 0 && (_jsx(Box, { sx: {
-                                            display: 'flex',
-                                            flexWrap: 'wrap',
-                                            gap: 1,
-                                            mb: 3,
-                                        }, children: spec.tags.slice(0, 4).map(tag => (_jsx(Label, { size: "small", variant: "secondary", children: tag }, tag))) })), _jsx(Box, { sx: { mt: 'auto', pt: 1 }, children: _jsxs(Box, { as: "span", sx: {
-                                                display: 'inline-flex',
-                                                alignItems: 'center',
-                                                gap: 1,
-                                                px: 2,
-                                                py: 1,
-                                                borderRadius: 2,
-                                                border: '1px solid',
-                                                borderColor: isActive
-                                                    ? 'border.default'
-                                                    : 'accent.muted',
-                                                bg: isActive ? 'canvas.subtle' : 'accent.subtle',
-                                                color: isActive ? 'fg.default' : 'accent.fg',
-                                                fontSize: 1,
-                                                fontWeight: 600,
-                                            }, children: [_jsx(IconComponent, { size: 14 }), launchLabel] }) })] }, spec.id));
-                        }) }), filteredSpecs.length === 0 && (_jsx(Box, { sx: {
-                            mt: 3,
-                            p: 3,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                        }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No agents match this filter." }) }))] }))] }));
+                                        }, children: spec.description })), spec.tags && spec.tags.length > 0 && (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 1, mb: 3, children: spec.tags.slice(0, 4).map(tag => (_jsx(Label, { size: "small", variant: "secondary", children: tag }, tag))) })), _jsx(Box, { mt: "auto", pt: 1, children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1, px: 2, py: 1, borderRadius: 2, border: "1px solid", borderColor: isActive ? 'border.default' : 'accent.muted', bg: isActive ? 'canvas.subtle' : 'accent.subtle', color: isActive ? 'fg.default' : 'accent.fg', fontSize: 1, fontWeight: 600, children: [_jsx(IconComponent, { size: 14 }), launchLabel] }) })] }, spec.id));
+                        }) }), filteredSpecs.length === 0 && (_jsx(Box, { mt: 3, p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No agents match this filter." }) }))] }))] }));
 }
 export default AgentNodeGallery;