@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentSkillsExample.js

@@ -1,46 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
 /// <reference types="vite/client" />
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { ErrorView } from './components';
-import { Button, Heading, Label, Spinner, Text, Token as PrimerToken, } from '@primer/react';
-import { BeakerIcon, BriefcaseIcon, PackageIcon, SignOutIcon, } from '@primer/octicons-react';
+import { AuthRequiredView, ErrorView } from './components';
+import { Button, Dialog, Heading, Label, Spinner, Text, Token as PrimerToken, } from '@primer/react';
+import { BriefcaseIcon, FileIcon } 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 { uniqueAgentId } from './utils/agentId';
 import { Chat } from '../chat';
+import { useSkills, useSkillActions } from '../hooks';
 const queryClient = new QueryClient();
-const AGENT_NAME = 'skills-demo-agent';
-const AGENT_SPEC_ID = 'demo-full';
+const AGENT_NAME = 'skills-example-agent';
+const AGENT_SPEC_ID = 'example-skills';
 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 SkillCard = ({ skill, onToggle, onToggleApproval }) => {
+    const [showDefinition, setShowDefinition] = useState(false);
+    const sourceVariant = skill.source_variant ?? 'unknown';
+    const sourceLabel = sourceVariant === 'path'
+        ? 'file-based'
+        : sourceVariant === 'package'
+            ? 'package-based'
+            : sourceVariant === 'module'
+                ? 'module-based'
+                : 'unknown';
+    const sourceDetail = sourceVariant === 'package'
+        ? [skill.package, skill.method].filter(Boolean).join('#')
+        : sourceVariant === 'module'
+            ? skill.module
+            : sourceVariant === 'path'
+                ? skill.path
+                : undefined;
+    return (_jsxs(_Fragment, { children: [_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: [_jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: skill.name }), skill.status && (_jsx(Label, { size: "small", variant: skill.status === 'loaded'
+                                    ? 'success'
+                                    : skill.status === 'enabled'
+                                        ? 'attention'
+                                        : 'secondary', children: skill.status })), skill.approved && (_jsx(Label, { size: "small", variant: "success", children: "approved" })), skill.status === 'loaded' && skill.skill_definition && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDefinition(true), leadingVisual: FileIcon, sx: { fontSize: 0, p: 0, color: 'fg.muted' }, "aria-label": "View SKILL.md", children: "SKILL.md" })), _jsxs(Box, { sx: { ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleApproval(skill.id), sx: { fontSize: 0 }, children: skill.approved ? 'Unapprove' : 'Approve' }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggle(skill.id), sx: { fontSize: 0 }, children: skill.status === 'available' ? 'Enable' : 'Disable' })] })] }), skill.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 1, mt: 0 }, children: skill.description })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "secondary", children: sourceLabel }), sourceDetail && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: sourceDetail }))] }), 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))) }))] }), showDefinition && skill.skill_definition && (_jsx(Dialog, { title: `${skill.name} — SKILL.md`, onClose: () => setShowDefinition(false), width: "xlarge", children: _jsx(Box, { sx: { p: 3, maxHeight: '70vh', overflow: 'auto' }, children: _jsx(Box, { as: "pre", sx: {
+                            fontFamily: 'mono',
+                            fontSize: 0,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                            m: 0,
+                            p: 3,
+                            bg: 'canvas.inset',
+                            borderRadius: 2,
+                            border: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: skill.skill_definition }) }) }))] }));
+};
 const AgentSkillsInner = ({ onLogout }) => {
     const { token } = useSimpleAuthStore();
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     const [runtimeStatus, setRuntimeStatus] = useState('launching');
     const [isReady, setIsReady] = useState(false);
     const [hookError, setHookError] = useState(null);
-    const [agentId, setAgentId] = useState(AGENT_NAME);
+    const [agentId, setAgentId] = useState(agentName);
     const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
-    const [skills, setSkills] = useState([]);
     const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
     const chatAuthToken = token === null ? undefined : token;
+    // WS-sourced skills (reads from codemodeStatus pushed via monitoring WS)
+    const skillsQuery = useSkills(isReady);
+    const skills = useMemo(() => skillsQuery.data?.skills ?? [], [skillsQuery.data]);
+    const { enableSkill, disableSkill, approveSkill, unapproveSkill } = useSkillActions(agentId);
+    const toggleSkill = useCallback((skillId) => {
+        const skill = skills.find(s => s.id === skillId);
+        if (skill?.status === 'available') {
+            enableSkill(skillId);
+        }
+        else {
+            disableSkill(skillId);
+        }
+    }, [skills, enableSkill, disableSkill]);
+    const toggleSkillApproval = useCallback((skillId) => {
+        const skill = skills.find(s => s.id === skillId);
+        if (skill?.approved) {
+            unapproveSkill(skillId);
+        }
+        else {
+            approveSkill(skillId);
+        }
+    }, [skills, approveSkill, unapproveSkill]);
+    const fileBasedSkills = skills.filter(s => s.source_variant === 'path');
+    const packageBasedSkills = skills.filter(s => s.source_variant === 'package');
+    const moduleBasedSkills = skills.filter(s => s.source_variant === 'module');
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -57,13 +111,13 @@ const AgentSkillsInner = ({ onLogout }) => {
             setHookError(null);
             setIsReconnectedAgent(false);
             try {
-                // Create local agent runtime using the demo-full spec.
-                // The spec contains both code-based and path-based skills.
+                // Create local agent runtime using the example-full spec.
+                // The spec contains module-based, package-based and file-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',
+                        name: agentName,
+                        description: 'Agent with skills example - module, package and file based skills',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
                         agent_spec_id: AGENT_SPEC_ID,
@@ -71,11 +125,11 @@ const AgentSkillsInner = ({ onLogout }) => {
                         tools: [],
                     }),
                 });
-                let resolvedAgentId = AGENT_NAME;
+                let resolvedAgentId = agentName;
                 let isAlreadyRunning = false;
                 if (response.ok) {
                     const data = await response.json();
-                    resolvedAgentId = data?.id || AGENT_NAME;
+                    resolvedAgentId = data?.id || agentName;
                 }
                 else {
                     const contentType = response.headers.get('content-type') || '';
@@ -115,68 +169,7 @@ const AgentSkillsInner = ({ onLogout }) => {
         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]);
+    }, [agentBaseUrl, agentName, authFetch]);
     if (!isReady && runtimeStatus !== 'error') {
         return (_jsxs(Box, { sx: {
                 display: 'flex',
@@ -185,7 +178,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                 justifyContent: 'center',
                 height: '100vh',
                 gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching skills demo agent..." })] }));
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching skills example agent..." })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
@@ -199,11 +192,15 @@ const AgentSkillsInner = ({ onLogout }) => {
                     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: [
+                }, 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`, brandIcon: _jsx(BriefcaseIcon, { size: 16 }), placeholder: "Ask the agent to use its skills...", showHeader: true, showNewChatButton: true, showClearButton: false, showTokenUsage: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Skills: ", skills.length] }) }), suggestions: [
                                 {
                                     title: 'List available skills',
                                     message: 'List all your available skills and what they can do.',
                                 },
+                                {
+                                    title: '👤 Who am I',
+                                    message: 'Use the datalayer-whoami skill to tell me who I am, including my user identity and available context.',
+                                },
                                 {
                                     title: '🌐 Crawl a webpage',
                                     message: 'Use the crawl skill to fetch the content of https://datalayer.ai and summarize it.',
@@ -214,7 +211,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                                 },
                                 {
                                     title: '🐙 GitHub repos',
-                                    message: 'Use the GitHub skill to list the public repositories for the "datalayer" organization.',
+                                    message: 'Use the GitHub skill to show two sections: first, the top 3 recently updated public repositories from the datalayer organization; second, my top 3 recently updated private repositories. Keep the output clear and concise.',
                                 },
                                 {
                                     title: '📄 Read a PDF',
@@ -241,14 +238,14 @@ const AgentSkillsInner = ({ onLogout }) => {
                                     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: {
+                                }, 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: [skills.length, " skill", skills.length !== 1 ? 's' : '', " \u00B7", ' ', skills.filter(s => s.status === 'loaded').length, " loaded \u00B7", ' ', skills.filter(s => s.approved).length, " approved"] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: [fileBasedSkills.length, " file-based \u00B7", ' ', packageBasedSkills.length, " package-based \u00B7", ' ', moduleBasedSkills.length, " module-based"] })] }), _jsxs(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: [skills.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for skills snapshot..." })) : (skills.map(skill => (_jsx(SkillCard, { skill: skill, onToggle: toggleSkill, onToggleApproval: toggleSkillApproval }, skill.id)))), _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"] })] })] })] })] })] })] })] }));
+                                        }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "Skill Statuses" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "secondary", children: "available" }), _jsx(Text, { children: "In catalog, not yet enabled" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "attention", children: "enabled" }), _jsx(Text, { children: "Enabled, loading pending" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Label, { size: "small", variant: "success", children: "loaded" }), _jsx(Text, { children: "SKILL.md loaded, in system prompt" })] })] })] })] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('@datalayer/core/lib/state').then(({ iamStore }) => {
@@ -256,7 +253,7 @@ const syncTokenToIamStore = (token) => {
     });
 };
 const AgentSkillsExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -264,11 +261,6 @@ const AgentSkillsExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -277,7 +269,7 @@ const AgentSkillsExample = () => {
         });
     }, [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(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentSkillsInner, { onLogout: handleLogout }) }) }));
 };

package/lib/examples/AgentSubagentsExample.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AgentSubagentsExample
+ *
+ * Demonstrates multi-agent delegation using subagents-pydantic-ai.
+ * The parent agent orchestrates a researcher and a writer subagent,
+ * delegating tasks and combining results for the user.
+ *
+ * - Creates a local agent from the 'example-subagents' spec
+ * - Shows a Chat component for interacting with the orchestrator
+ * - Sidebar displays subagent info and active task status
+ */
+import React from 'react';
+declare const AgentSubagentsExample: React.FC;
+export default AgentSubagentsExample;

package/lib/examples/AgentSubagentsExample.js

@@ -0,0 +1,228 @@
+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.
+ */
+/**
+ * AgentSubagentsExample
+ *
+ * Demonstrates multi-agent delegation using subagents-pydantic-ai.
+ * The parent agent orchestrates a researcher and a writer subagent,
+ * delegating tasks and combining results for the user.
+ *
+ * - Creates a local agent from the 'example-subagents' spec
+ * - Shows a Chat component for interacting with the orchestrator
+ * - Sidebar displays subagent info and active task status
+ */
+/// <reference types="vite/client" />
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Text, Spinner, Heading, Label, Timeline } from '@primer/react';
+import { PeopleIcon, PersonIcon, CheckCircleFillIcon, ClockIcon, XCircleFillIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { AuthRequiredView, ErrorView } from './components';
+import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { Chat } from '../chat';
+const AGENT_NAME = 'subagents-example-agent';
+const AGENT_SPEC_ID = 'example-subagents';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const SUBAGENTS = [
+    {
+        name: 'researcher',
+        description: 'Researches topics, gathers facts, and provides detailed analysis',
+        preferredMode: 'sync',
+        typicalComplexity: 'moderate',
+        canAskQuestions: true,
+    },
+    {
+        name: 'writer',
+        description: 'Writes clear, structured content based on research or instructions',
+        preferredMode: 'sync',
+        typicalComplexity: 'moderate',
+        canAskQuestions: false,
+    },
+];
+const AgentSubagentsInner = ({ onLogout, }) => {
+    const { token } = useSimpleAuthStore();
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(agentName);
+    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    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 createLocalAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
+            try {
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'Subagents example – multi-agent delegation with researcher and writer',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        enable_skills: true,
+                        tools: [],
+                    }),
+                });
+                let resolvedAgentId = agentName;
+                let isAlreadyRunning = false;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || agentName;
+                }
+                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 local 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 createLocalAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [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 subagents example agent..." })] }));
+    }
+    if (runtimeStatus === 'error' || hookError) {
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
+    }
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    flexShrink: 0,
+                }, children: [_jsx(PeopleIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Subagents Demo" }), isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Label, { variant: "accent", children: [SUBAGENTS.length, " subagents"] })] }), _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: "Subagents Orchestrator", brandIcon: _jsx(PeopleIcon, { size: 16 }), placeholder: "Ask me to research a topic, write content, or both...", description: "Multi-agent delegation with researcher & writer", showHeader: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                {
+                                    title: 'Research & write',
+                                    message: 'Research the pros and cons of Python async patterns and write a summary.',
+                                },
+                                {
+                                    title: 'Research only',
+                                    message: 'Find recent advances in LLM fine-tuning and provide a detailed analysis.',
+                                },
+                                {
+                                    title: 'Write only',
+                                    message: 'Write a concise guide on REST API design best practices.',
+                                },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 320,
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: 'auto',
+                        }, children: [_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Available Subagents" }), _jsx(Timeline, { children: SUBAGENTS.map(sa => (_jsxs(Timeline.Item, { children: [_jsx(Timeline.Badge, { children: _jsx(PersonIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsx(Box, { sx: { mb: 1 }, children: _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: sa.name }) }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: sa.description }), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [_jsx(Label, { size: "small", variant: "secondary", children: sa.preferredMode }), _jsx(Label, { size: "small", variant: "secondary", children: sa.typicalComplexity }), sa.canAskQuestions && (_jsx(Label, { size: "small", variant: "accent", children: "can ask questions" }))] })] })] }, sa.name))) })] }), _jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Delegation Tools" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [
+                                            {
+                                                name: 'task',
+                                                desc: 'Assign a task to a subagent',
+                                                icon: ClockIcon,
+                                            },
+                                            {
+                                                name: 'check_task',
+                                                desc: 'Check status of a running task',
+                                                icon: CheckCircleFillIcon,
+                                            },
+                                            {
+                                                name: 'list_active_tasks',
+                                                desc: 'View all active delegated tasks',
+                                                icon: PeopleIcon,
+                                            },
+                                            {
+                                                name: 'soft_cancel_task',
+                                                desc: 'Gracefully cancel a task',
+                                                icon: XCircleFillIcon,
+                                            },
+                                        ].map(tool => (_jsxs(Box, { sx: {
+                                                p: 2,
+                                                border: '1px solid',
+                                                borderColor: 'border.default',
+                                                borderRadius: 2,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: 2,
+                                            }, children: [_jsx(tool.icon, { size: 14 }), _jsxs(Box, { children: [_jsx(Text, { sx: {
+                                                                fontSize: 1,
+                                                                fontWeight: 'bold',
+                                                                fontFamily: 'mono',
+                                                            }, children: tool.name }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 0 }, children: tool.desc })] })] }, tool.name))) })] }), _jsxs(Box, { sx: { p: 3 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "How It Works" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["The orchestrator agent delegates tasks to specialised subagents using the ", _jsx("code", { children: "task" }), " tool. Each subagent runs independently with its own model, instructions, and context."] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: "Subagents can be configured with different execution modes (sync, async, auto), complexity hints, and question-asking capabilities for interactive workflows." })] })] })] })] }));
+};
+const AgentSubagentsExample = () => {
+    const { token, clearAuth } = useSimpleAuthStore();
+    const handleLogout = useCallback(() => {
+        clearAuth();
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
+    }
+    return (_jsx(ThemedProvider, { children: _jsx(AgentSubagentsInner, { onLogout: handleLogout }) }));
+};
+export default AgentSubagentsExample;