@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/examples/AgentSkillsExample.js

@@ -0,0 +1,290 @@
+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.
+ */
+/// <reference types="vite/client" />
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Heading, Label, Spinner, Text, Token as PrimerToken, } from '@primer/react';
+import { AlertIcon, BeakerIcon, BriefcaseIcon, PackageIcon, SignOutIcon, } from '@primer/octicons-react';
+import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { SignInSimple } from '@datalayer/core/lib/views/iam';
+import { UserBadge } from '@datalayer/core/lib/views/profile';
+import { ThemedProvider } from './utils/themedProvider';
+import { Chat } from '../chat';
+const queryClient = new QueryClient();
+const AGENT_NAME = 'skills-demo-agent';
+const AGENT_SPEC_ID = 'demo-full';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const SkillCard = ({ skill }) => (_jsxs(Box, { sx: {
+        border: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: 2,
+        p: 2,
+        mb: 2,
+        bg: 'canvas.default',
+    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [skill.emoji && _jsx(Text, { sx: { fontSize: 2 }, children: skill.emoji }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: skill.name }), _jsx(Label, { size: "small", variant: skill.variant === 'package' ? 'accent' : 'primary', children: skill.variant === 'package'
+                        ? 'package-based'
+                        : skill.variant === 'path'
+                            ? 'path-based'
+                            : 'name-based' })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 1, mt: 0 }, children: skill.description }), skill.variant === 'module' && skill.module && (_jsxs(Text, { sx: { fontSize: 0, fontFamily: 'mono', color: 'fg.muted' }, children: ["module: ", skill.module] })), skill.variant === 'package' && (_jsxs(Box, { sx: { fontSize: 0, fontFamily: 'mono', color: 'fg.muted' }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["package: ", skill.package] }), _jsxs(Text, { sx: { display: 'block' }, children: ["method: ", skill.method] })] })), skill.variant === 'path' && skill.path && (_jsxs(Text, { sx: { fontSize: 0, fontFamily: 'mono', color: 'fg.muted' }, children: ["path: ", skill.path] })), skill.license && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mt: 1 }, children: ["License: ", skill.license] })), skill.compatibility && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: ["Compat: ", skill.compatibility] })), skill.allowedTools && skill.allowedTools.length > 0 && (_jsx(Box, { sx: { mt: 1, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: skill.allowedTools.map(tool => (_jsx(PrimerToken, { text: tool, size: "small" }, tool))) })), skill.tags && skill.tags.length > 0 && (_jsx(Box, { sx: { mt: 1, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: skill.tags.map(tag => (_jsx(PrimerToken, { text: tag, size: "small" }, tag))) }))] }));
+const AgentSkillsInner = ({ onLogout }) => {
+    const { token } = useSimpleAuthStore();
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(AGENT_NAME);
+    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    const [skills, setSkills] = useState([]);
+    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const chatAuthToken = token === null ? undefined : token;
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    useEffect(() => {
+        let isCancelled = false;
+        const createAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
+            try {
+                // Create local agent runtime using the demo-full spec.
+                // The spec contains both code-based and path-based skills.
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: AGENT_NAME,
+                        description: 'Agent with skills demo - code-based and path-based skills',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        enable_skills: true,
+                        tools: [],
+                    }),
+                });
+                let resolvedAgentId = AGENT_NAME;
+                let isAlreadyRunning = false;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || AGENT_NAME;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const data = await response.json().catch(() => null);
+                        detail =
+                            (typeof data?.detail === 'string' && data.detail) ||
+                                (typeof data?.message === 'string' && data.message) ||
+                                '';
+                    }
+                    else {
+                        detail = await response.text();
+                    }
+                    if (response.status === 409 || /already exists/i.test(detail || '')) {
+                        isAlreadyRunning = true;
+                    }
+                    else {
+                        throw new Error(detail || `Failed to create agent: ${response.status}`);
+                    }
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReconnectedAgent(isAlreadyRunning);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, authFetch]);
+    // Fetch skill information from the agent's spec endpoint
+    useEffect(() => {
+        if (!isReady)
+            return;
+        const fetchSkills = async () => {
+            try {
+                const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/spec`);
+                if (!res.ok)
+                    return;
+                const spec = await res.json();
+                const skillNames = spec?.skills ?? [];
+                // For each skill name, build a SkillInfo from the catalog when possible.
+                const { getSkillSpec } = await import('../specs/skills');
+                const infos = skillNames.map((name) => {
+                    const baseName = name.includes(':') ? name.split(':')[0] : name;
+                    const catalogSpec = getSkillSpec(baseName);
+                    if (catalogSpec?.path) {
+                        // Variant 3: path-based skill
+                        return {
+                            name: catalogSpec.name,
+                            description: catalogSpec.description || `Skill: ${baseName}`,
+                            variant: 'path',
+                            path: catalogSpec.path,
+                            tags: catalogSpec.tags ? [...catalogSpec.tags] : [],
+                            emoji: catalogSpec.emoji,
+                        };
+                    }
+                    if (catalogSpec?.package && catalogSpec?.method) {
+                        // Variant 2: package-based skill
+                        return {
+                            name: catalogSpec.name,
+                            description: catalogSpec.description || `Skill: ${baseName}`,
+                            variant: 'package',
+                            package: catalogSpec.package,
+                            method: catalogSpec.method,
+                            license: catalogSpec.license,
+                            compatibility: catalogSpec.compatibility,
+                            allowedTools: catalogSpec.allowedTools,
+                            skillMetadata: catalogSpec.skillMetadata,
+                            tags: catalogSpec.tags ? [...catalogSpec.tags] : [],
+                            emoji: catalogSpec.emoji,
+                        };
+                    }
+                    // Variant 1: name-based (module discovery)
+                    return {
+                        name: catalogSpec?.name ?? baseName,
+                        description: catalogSpec?.description ?? `Skill: ${baseName}`,
+                        variant: 'module',
+                        module: catalogSpec?.module ?? `agent_skills.skills.${baseName}`,
+                        tags: catalogSpec?.tags ? [...catalogSpec.tags] : [],
+                        emoji: catalogSpec?.emoji,
+                    };
+                });
+                setSkills(infos);
+            }
+            catch {
+                // Non-fatal: skill display is informational
+            }
+        };
+        void fetchSkills();
+    }, [isReady, agentId, agentBaseUrl, authFetch]);
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching skills demo agent..." })] }));
+    }
+    if (runtimeStatus === 'error' || hookError) {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+    }
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
+                    px: 3,
+                    py: 1,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: `Skills Demo Agent`, placeholder: "Ask the agent to use its skills...", showHeader: true, showNewChatButton: true, showClearButton: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Skills: ", skills.length] }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), suggestions: [
+                                {
+                                    title: 'List available skills',
+                                    message: 'List all your available skills and what they can do.',
+                                },
+                                {
+                                    title: '🌐 Crawl a webpage',
+                                    message: 'Use the crawl skill to fetch the content of https://datalayer.ai and summarize it.',
+                                },
+                                {
+                                    title: '📅 Generate an event',
+                                    message: 'Use the events skill to create a new event named "team-sync" with status "pending" and describe it.',
+                                },
+                                {
+                                    title: '🐙 GitHub repos',
+                                    message: 'Use the GitHub skill to list the public repositories for the "datalayer" organization.',
+                                },
+                                {
+                                    title: '📄 Read a PDF',
+                                    message: 'Use the PDF skill to extract the text from a PDF file at /tmp/sample.pdf and show me the first 200 characters.',
+                                },
+                                {
+                                    title: '📝 Summarize text',
+                                    message: 'Use the text summarizer skill to summarize the following: "Artificial intelligence has transformed many industries. Machine learning enables computers to learn from data. Natural language processing allows machines to understand human language. Computer vision gives machines the ability to interpret images. These technologies are reshaping healthcare, finance, education, and transportation."',
+                                },
+                                {
+                                    title: '😄 Tell me a joke',
+                                    message: 'Use the jokes skill to tell me a random joke.',
+                                },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 320,
+                            minWidth: 280,
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            minHeight: 0,
+                            bg: 'canvas.subtle',
+                        }, children: [_jsxs(Box, { sx: {
+                                    p: 2,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(BriefcaseIcon, { size: 16 }), "Agent Skills"] }) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Loaded: ", skills.length, " skill", skills.length !== 1 ? 's' : ''] })] }), _jsxs(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: [skills.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills loaded." })) : (skills.map(skill => _jsx(SkillCard, { skill: skill }, skill.name))), _jsxs(Box, { sx: {
+                                            mt: 3,
+                                            p: 2,
+                                            borderRadius: 2,
+                                            bg: 'canvas.inset',
+                                            border: '1px solid',
+                                            borderColor: 'border.muted',
+                                        }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "Skill Spec Variants" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(BeakerIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Path-based:" }), " Discovered from a local SKILL.md directory path"] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(PackageIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Module-based:" }), " Python module or package + method with frontmatter"] })] })] })] })] })] })] })] }));
+};
+const syncTokenToIamStore = (token) => {
+    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        iamStore.setState({ token });
+    });
+};
+const AgentSkillsExample = () => {
+    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const hasSynced = useRef(false);
+    useEffect(() => {
+        if (token && !hasSynced.current) {
+            hasSynced.current = true;
+            syncTokenToIamStore(token);
+        }
+    }, [token]);
+    const handleSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        hasSynced.current = true;
+        syncTokenToIamStore(newToken);
+    }, [setAuth]);
+    const handleLogout = useCallback(() => {
+        clearAuth();
+        hasSynced.current = false;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: undefined });
+        });
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Skills Demo", description: "Sign in to test code-based and path-based agent skills.", leadingIcon: _jsx(BriefcaseIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentSkillsInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentSkillsExample;

package/lib/examples/AgentToolApprovalsExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AgentToolApprovalsExample: React.FC;
+export default AgentToolApprovalsExample;