@datalayer/agent-runtimes 1.5.71 → 1.5.73

package/lib/examples/AgentMCPExample.js

@@ -7,21 +7,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { AuthRequiredView, ErrorView } from './components';
+import { AuthRequiredView, ErrorView } from './components/index.js';
 import { Heading, Label, Spinner, Text, Token as PrimerToken, } from '@primer/react';
 import { GlobeIcon, CheckCircleIcon, ServerIcon, XCircleIcon, ToolsIcon, } from '@primer/octicons-react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { waitForAgent } from './utils/waitForAgent';
-import { LoopEmbed } from '../apps';
-import { AgentMcpPlugin } from '../apps/plugins/agent-mcp';
-import { createChatExtrasPlugin } from '../apps/plugins/chat-extras';
-import { useAIAgentsWebSocket } from '../hooks';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { parseAgentStreamMessage } from '../types/stream';
-import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../types/mcp';
-import { MCP_SERVER_LIBRARY } from '../specs/mcpServers';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { waitForAgent } from './utils/waitForAgent.js';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentMcpPlugin } from '../apps/plugins/agent-mcp/index.js';
+import { createChatExtrasPlugin } from '../apps/plugins/chat-extras/index.js';
+import { useAIAgentsWebSocket } from '../hooks/index.js';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
+import { parseAgentStreamMessage } from '../types/stream.js';
+import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../types/mcp.js';
+import { MCP_SERVER_LIBRARY } from '../specs/mcpServers.js';
 const queryClient = new QueryClient();
 const AGENT_NAME = 'mcp-example-agent';
 /* ── Aggregate MCP status helpers ─────────────────────── */
@@ -306,7 +306,7 @@ const AgentMCPInner = ({ onLogout }) => {
     return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [isReconnectedAgent && (_jsx(Box, { 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, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }), _jsxs(Box, { width: 320, minWidth: 260, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", minHeight: 0, bg: "canvas.default", children: [_jsxs(Box, { p: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(ServerIcon, { size: 16 }), "MCP Servers & Tools"] }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { as: "span", display: "inline-block", width: 8, height: 8, borderRadius: "50%", bg: MCP_STATUS_COLORS[aggregate], flexShrink: 0 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [MCP_STATUS_LABELS[aggregate], " \u00B7 ", totalTools, " tool", totalTools !== 1 ? 's' : ''] })] })] }), _jsxs(Box, { p: 2, overflow: "auto", flex: 1, children: [_jsxs(Box, { mb: 3, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 1, mb: 2 }, children: "MCP Servers" }), _jsx(McpStatusPanel, { data: mcpStatusData })] }), mcpServers.length === 0 ? (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, py: 4, children: [_jsx(Spinner, { size: "medium" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for MCP servers to start..." })] })) : (_jsxs(_Fragment, { children: [mcpServers.map(server => (_jsxs(Box, { children: [_jsx(McpServerCard, { server: server }), server.tools.length > 0 && (_jsx(Box, { pl: 2, children: server.tools.map(tool => (_jsx(McpToolCard, { tool: tool }, `${tool.serverId}-${tool.name}`))) }))] }, server.id))), _jsxs(Box, { mt: 3, p: 2, borderRadius: 2, bg: "canvas.default", border: "1px solid", borderColor: "border.muted", children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "MCP (Model Context Protocol)" }), _jsxs(Box, { fontSize: 0, color: "fg.muted", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(GlobeIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Servers:" }), " Discover and start MCP servers that expose tools to the agent"] })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(ToolsIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Tools:" }), " Individual capabilities exposed by each server (search, fetch, etc.)"] })] })] })] })] }))] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
-    import('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -322,7 +322,7 @@ const AgentMCPExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
+        import('../state/substates/index.js').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentMemoryExample.js

@@ -21,17 +21,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, TextInput, Heading, Label, Flash, } from '@primer/react';
 import { SearchIcon, DatabaseIcon, ListUnorderedIcon, } 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 { waitForAgent } from './utils/waitForAgent';
+import { AuthRequiredView, ErrorView } from './components/index.js';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { waitForAgent } from './utils/waitForAgent.js';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { LoopEmbed } from '../apps';
-import { AgentMemoryPlugin } from '../apps/plugins/agent-memory';
-import { listRuntimeMemories } from '../api/runtimes/runtimes';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { useRuntimeTargetStore } from './utils/runtimeTargetStore';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentMemoryPlugin } from '../apps/plugins/agent-memory/index.js';
+import { listRuntimeMemories } from '../api/runtimes/runtimes.js';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
+import { useRuntimeTargetStore } from './utils/runtimeTargetStore.js';
 const LOOP_PLUGINS_AGENTMEM = [AgentMemoryPlugin];
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'memory-example-agent';
@@ -215,7 +215,7 @@ const AgentMemoryInner = ({ onLogout }) => {
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {
-    import('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -232,7 +232,7 @@ const AgentMemoryExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
+        import('../state/substates/index.js').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentMonitoringExample.js

@@ -19,25 +19,25 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Heading, Label } from '@primer/react';
 import { GraphIcon } 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 { waitForAgent } from './utils/waitForAgent';
-import { ContextPanel, } from '../context/ContextPanel';
-import { CostTracker } from '../context/CostTracker';
-import { CostUsageChart } from '../context/CostUsageChart';
-import { TokenUsageChart } from '../context/TokenUsageChart';
-import { GraphFlowChart } from '../context/GraphFlowChart';
-import { TurnGraphChart } from '../context/TurnGraphChart';
-import { useAIAgentsWebSocket } from '../hooks';
-import { parseAgentStreamMessage } from '../types/stream';
-import { useCoreStore } from '../state/substates';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { AuthRequiredView, ErrorView } from './components/index.js';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { waitForAgent } from './utils/waitForAgent.js';
+import { ContextPanel, } from '../context/ContextPanel.js';
+import { CostTracker } from '../context/CostTracker.js';
+import { CostUsageChart } from '../context/CostUsageChart.js';
+import { TokenUsageChart } from '../context/TokenUsageChart.js';
+import { GraphFlowChart } from '../context/GraphFlowChart.js';
+import { TurnGraphChart } from '../context/TurnGraphChart.js';
+import { useAIAgentsWebSocket } from '../hooks/index.js';
+import { parseAgentStreamMessage } from '../types/stream.js';
+import { useCoreStore } from '../state/substates/index.js';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { LoopEmbed } from '../apps';
-import { AgentMonitoringPlugin } from '../apps/plugins/agent-monitoring';
-import { createChatExtrasPlugin } from '../apps/plugins/chat-extras';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentMonitoringPlugin } from '../apps/plugins/agent-monitoring/index.js';
+import { createChatExtrasPlugin } from '../apps/plugins/chat-extras/index.js';
 const AGENT_NAME = 'monitoring-example-agent';
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL;
 // Consume-side OTEL override (DATALAYER_OTEL_IN_URL). When set, telemetry is
@@ -301,7 +301,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                                 : ''] })] })), _jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Turn Execution Graph (OTEL traces)" }), _jsx(TurnGraphChart, { serviceName: otelServiceName, agentId: agentId, otelUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
-    import('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -317,7 +317,7 @@ const AgentMonitoringExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
+        import('../state/substates/index.js').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentNotificationsExample.js

@@ -19,14 +19,14 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Heading, Label, TextInput, Flash, Timeline, } from '@primer/react';
 import { AlertIcon, BellIcon, MailIcon, CheckCircleIcon, MuteIcon, } 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 { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
+import { AuthRequiredView, ErrorView } from './components/index.js';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime.js';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { LoopEmbed } from '../apps';
-import { useAgentRuntimeStore } from '../stores';
-import { AgentNotificationsPlugin } from '../apps/plugins/agent-notifications';
+import { LoopEmbed } from '../apps/index.js';
+import { useAgentRuntimeStore } from '../stores/index.js';
+import { AgentNotificationsPlugin } from '../apps/plugins/agent-notifications/index.js';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'notification-example-agent';
@@ -222,7 +222,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {
-    import('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -239,7 +239,7 @@ const AgentNotificationsExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
+        import('../state/substates/index.js').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentOtelExample.js

@@ -28,12 +28,12 @@ import { TelescopeIcon, PlugIcon, XIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { OtelHeader, DashboardView, SqlView, SystemView, useSimpleAuthStore, } from '@datalayer/core/lib/views/otel';
 import { useCoreStore } from '@datalayer/core';
-import { ThemedProvider } from './utils/themedProvider';
-import { AuthRequiredView } from './components';
-import { LoopEmbed } from '../apps';
-import { uniqueAgentId } from './utils/agentId';
-import { AgentOtelPlugin } from '../apps/plugins/agent-otel';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { AuthRequiredView } from './components/index.js';
+import { LoopEmbed } from '../apps/index.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { AgentOtelPlugin } from '../apps/plugins/agent-otel/index.js';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
 // ─── Environment / defaults ────────────────────────────────────────────────
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL ?? '';
 // Consume-side OTEL override (DATALAYER_OTEL_IN_URL). When set, telemetry is

package/lib/examples/AgentOutputsExample.js

@@ -26,14 +26,14 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Heading, Label } from '@primer/react';
 import { TableIcon, FileIcon, CodeIcon, GraphIcon, DownloadIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { AuthRequiredView } from './components';
+import { AuthRequiredView } from './components/index.js';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { LoopEmbed } from '../apps';
-import { AgentOutputsPlugin } from '../apps/plugins/agent-outputs';
-import { useChatStore } from '../stores/chatStore';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentOutputsPlugin } from '../apps/plugins/agent-outputs/index.js';
+import { useChatStore } from '../stores/chatStore.js';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
 const LOOP_PLUGINS_AGENTOUT = [AgentOutputsPlugin];
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
@@ -339,7 +339,7 @@ const AgentOutputsInner = () => {
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {
-    import('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };

package/lib/examples/AgentParametersExample.js

@@ -8,12 +8,12 @@ import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { Button, Heading, Label, Spinner, Text } from '@primer/react';
 import validator from '@rjsf/validator-ajv8';
 import { Form, yamlSchemaToJsonSchema } from '@datalayer/primer-rjsf';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
-import { ErrorView } from './components';
-import { LoopEmbed } from '../apps';
-import { AgentParametersPlugin } from '../apps/plugins/agent-parameters';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime.js';
+import { ErrorView } from './components/index.js';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentParametersPlugin } from '../apps/plugins/agent-parameters/index.js';
 const LOOP_PLUGINS_AGENTPAR = [AgentParametersPlugin];
 setupPrimerPortals();
 const AGENTSPEC_ID = 'example-parameters';

package/lib/examples/AgentSkillsExample.js

@@ -7,16 +7,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { AuthRequiredView, ErrorView } from './components';
+import { AuthRequiredView, ErrorView } from './components/index.js';
 import { Button, Dialog, Heading, Label, Text, Token as PrimerToken, } from '@primer/react';
 import { BriefcaseIcon, FileIcon } from '@primer/octicons-react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
-import { LoopEmbed } from '../apps';
-import { AgentSkillsPlugin } from '../apps/plugins/agent-skills';
-import { useSkills, useSkillActions } from '../hooks';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime.js';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentSkillsPlugin } from '../apps/plugins/agent-skills/index.js';
+import { useSkills, useSkillActions } from '../hooks/index.js';
 const LOOP_PLUGINS_AGENTSKI = [AgentSkillsPlugin];
 const queryClient = new QueryClient();
 const AGENT_NAME = 'skills-example-agent';
@@ -92,7 +92,7 @@ const AgentSkillsInner = ({ onLogout }) => {
     return (_jsx(Box, { height: "100%", display: "flex", flexDirection: "column", children: _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTSKI }) }), _jsxs(Box, { width: 320, minWidth: 280, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", minHeight: 0, bg: "canvas.default", children: [_jsxs(Box, { p: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { 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, { 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, { mt: 3, p: 2, borderRadius: 2, bg: "canvas.default", border: "1px solid", borderColor: "border.muted", children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "Skill Statuses" }), _jsxs(Box, { fontSize: 0, color: "fg.muted", children: [_jsxs(Box, { 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, { 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, { 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('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -108,7 +108,7 @@ const AgentSkillsExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
+        import('../state/substates/index.js').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentSubagentsExample.js

@@ -20,14 +20,14 @@ import { useMemo } from 'react';
 import { Text, Spinner, Heading, Label, Timeline } from '@primer/react';
 import { PeopleIcon, PersonIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { LoopEmbed } from '../apps';
-import { AgentSubagentsPlugin } from '../apps/plugins/agent-subagents';
-import { SubagentChatPanel } from '../chat/messages/ChatMessageList';
-import { useAgentRuntimeActiveSubagentToolCallId, useAgentRuntimeRunningSubagentNames, } from '../stores';
-import { getAgentspecs } from '../specs/agents';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentSubagentsPlugin } from '../apps/plugins/agent-subagents/index.js';
+import { SubagentChatPanel } from '../chat/messages/ChatMessageList.js';
+import { useAgentRuntimeActiveSubagentToolCallId, useAgentRuntimeRunningSubagentNames, } from '../stores/index.js';
+import { getAgentspecs } from '../specs/agents/index.js';
 const LOOP_PLUGINS_AGENTSUB = [AgentSubagentsPlugin];
 const AGENT_NAME = 'subagents-example-agent';
 const AGENTSPEC_ID = 'example-subagents';

package/lib/examples/AgentToolApprovalsExample.js

@@ -7,16 +7,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { AuthRequiredView, ErrorView } from './components';
+import { AuthRequiredView, ErrorView } from './components/index.js';
 import { Text } from '@primer/react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { waitForAgent } from './utils/waitForAgent';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { LoopEmbed } from '../apps';
-import { createAgentToolApprovalsPlugin } from '../apps/plugins/agent-tool-approvals';
-import { useAgentRuntimeApprovals } from '../stores/agentRuntimeStore';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { waitForAgent } from './utils/waitForAgent.js';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
+import { LoopEmbed } from '../apps/index.js';
+import { createAgentToolApprovalsPlugin } from '../apps/plugins/agent-tool-approvals/index.js';
+import { useAgentRuntimeApprovals } from '../stores/agentRuntimeStore.js';
 const queryClient = new QueryClient();
 const AGENT_NAME_PREFIX = 'tool-approval-example-agent';
 const DEFAULT_AGENTSPEC_ID = 'example-tool-approvals';
@@ -157,7 +157,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
     return (_jsxs(Box, { height: "100%", minHeight: 0, display: "flex", flexDirection: "column", children: [isReconnectedAgent && (_jsx(Box, { px: 3, py: 1, borderBottom: "1px solid", borderColor: "border.default", children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsx(Box, { flex: 1, minHeight: 0, display: "flex", children: _jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }, agentName) }) })] }));
 };
 const syncTokenToIamStore = (token) => {
-    import('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -173,7 +173,7 @@ const AgentToolApprovalsExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
+        import('../state/substates/index.js').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentTriggersExample.js

@@ -20,19 +20,19 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, Heading, Label, TextInput, Flash, Timeline, Truncate, Tooltip, } from '@primer/react';
 import { ClockIcon, SyncIcon, CheckCircleIcon, XCircleIcon, PlayIcon, GlobeIcon, ZapIcon, EyeIcon, EyeClosedIcon, TrashIcon, CopyIcon, } 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 { AuthRequiredView, ErrorView } from './components/index.js';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { LoopEmbed } from '../apps';
-import { AgentTriggersPlugin } from '../apps/plugins/agent-triggers';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { waitForAgent } from './utils/waitForAgent';
-import { useConnectedIdentities } from '../identity';
-import { ToolApprovalBanner, ToolApprovalDialog, } from '../chat/tools';
-import { useAgentEvents, useDeleteAgentEvent, useMarkEventRead, useMarkEventUnread, useAIAgentsWebSocket, } from '../hooks';
-import { AGUIAdapter, VercelAIAdapter } from '../protocols';
-import { createUserMessage } from '../types/messages';
+import { LoopEmbed } from '../apps/index.js';
+import { AgentTriggersPlugin } from '../apps/plugins/agent-triggers/index.js';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
+import { waitForAgent } from './utils/waitForAgent.js';
+import { useConnectedIdentities } from '../identity/index.js';
+import { ToolApprovalBanner, ToolApprovalDialog, } from '../chat/tools/index.js';
+import { useAgentEvents, useDeleteAgentEvent, useMarkEventRead, useMarkEventUnread, useAIAgentsWebSocket, } from '../hooks/index.js';
+import { AGUIAdapter, VercelAIAdapter } from '../protocols/index.js';
+import { createUserMessage } from '../types/messages.js';
 const LOOP_PLUGINS_AGENTTRI = [AgentTriggersPlugin];
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
@@ -1087,7 +1087,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {
-    import('../state/substates').then(({ iamStore }) => {
+    import('../state/substates/index.js').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -1104,7 +1104,7 @@ const AgentTriggersExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
+        import('../state/substates/index.js').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentspecsExample.js

@@ -13,17 +13,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 import { useCoreStore } from '@datalayer/core';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { AgentConfiguration } from '../config';
-import { Chat } from '../chat';
-import { DEFAULT_MODEL } from '../specs';
-import { useIdentity } from '../identity';
-import { useAgentsStore } from './utils/examplesStore';
-import { ThemedProvider } from './utils/themedProvider';
-import { isSpecSelection, getSpecId, isCloudSpecSelection, getCloudSpecId, } from '../config/AgentConfiguration';
-import { MockFileBrowser, MainContent, Header } from './components';
-import { useChatStore } from '../stores';
-import { useExampleAgentRuntimes as useAgentRuntimes } from './hooks/useExampleAgentRuntimes';
-import { resolveExampleAgentRuntimesUrl, useExampleAgentRuntimesUrl, } from './utils/useExampleAgentRuntimesUrl';
+import { AgentConfiguration } from '../config/index.js';
+import { Chat } from '../chat/index.js';
+import { DEFAULT_MODEL } from '../specs/index.js';
+import { useIdentity } from '../identity/index.js';
+import { useAgentsStore } from './utils/examplesStore.js';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { isSpecSelection, getSpecId, isCloudSpecSelection, getCloudSpecId, } from '../config/AgentConfiguration.js';
+import { MockFileBrowser, MainContent, Header } from './components/index.js';
+import { useChatStore } from '../stores/index.js';
+import { useExampleAgentRuntimes as useAgentRuntimes } from './hooks/useExampleAgentRuntimes.js';
+import { resolveExampleAgentRuntimesUrl, useExampleAgentRuntimesUrl, } from './utils/useExampleAgentRuntimesUrl.js';
 // Create a query client for React Query
 const queryClient = new QueryClient({
     defaultOptions: {

package/lib/examples/AvatarExample.js

@@ -15,17 +15,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * and so are the characters clippy.js publishes, fetched when picked.
  */
 import { useEffect, useRef, useState } from 'react';
-import { useAgentInspector } from '../components/inspector/agentSpans';
+import { useAgentInspector } from '../components/inspector/agentSpans.js';
 import { buildReactorFromPlugins } from '@datalayer/reactor';
 import { Button, Heading, Text, ToggleSwitch } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './utils/themedProvider';
-import { ChatFloating } from '../chat';
-import { AssistantCharactersPlugin, assistantCharacterNamed, assistantCharactersOf, } from '../apps/plugins/assistant-characters';
-import { OwlCharacterPlugin } from './utils/owlCharacterPlugin';
-import { readTestSpriteCharacter } from './utils/testSpriteCharacter';
-import { CLIPPY_JS_CHARACTERS, CLIPPY_JS_VERSION, readClippyJsCharacter, } from './utils/clippyJsCharacters';
-import { CHARACTER_FILES_ACCEPT, readCharacterFiles, } from '../chat/assistant/formats';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { ChatFloating } from '../chat/index.js';
+import { AssistantCharactersPlugin, assistantCharacterNamed, assistantCharactersOf, } from '../apps/plugins/assistant-characters/index.js';
+import { OwlCharacterPlugin } from './utils/owlCharacterPlugin.js';
+import { readTestSpriteCharacter } from './utils/testSpriteCharacter.js';
+import { CLIPPY_JS_CHARACTERS, CLIPPY_JS_VERSION, readClippyJsCharacter, } from './utils/clippyJsCharacters.js';
+import { CHARACTER_FILES_ACCEPT, readCharacterFiles, } from '../chat/assistant/formats/index.js';
 /**
  * The agent-runtimes server the assistant talks to: `?agentRuntimesUrl=`
  * when given, else this machine's on port 8765. It serves the `assistant`

package/lib/examples/AvatarGalleryExample.js

@@ -21,14 +21,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import { Button, Checkbox, FormControl, Heading, SegmentedControl, Text, ToggleSwitch, } from '@primer/react';
 import { Box, DatalayerThemeProvider, themeConfigs, } from '@datalayer/primer-addons';
-import { ThemedProvider } from './utils/themedProvider';
-import { useExampleThemeStore } from './utils/themeStore';
-import { AssistantStage } from '../chat/assistant/AssistantStage';
-import { isAssistantModel3D } from '../chat/assistant/avatar3d';
-import { useViewportDrag } from '../chat/useViewportDrag';
-import { AvatarGalleryGrid, MODEL_3D_CHARACTER, GalleryBalloons, GalleryNotebook, GalleryObstacle, galleryNotebookVisual, Still, useGalleryCharacters, } from './utils/AvatarGalleryGrid';
-import { GALLERY_POSES, GALLERY_POSE_LABELS, SAMPLE_NOTEBOOK_SAYING, balloonForPose, sampleApproval, sampleHistory, sampleSaying, sampleToolLine, stateOfPose, } from './utils/avatarGallery';
-import { CLIPPY_JS_VERSION, useClippyJsCharacters, } from './utils/clippyJsCharacters';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { useExampleThemeStore } from './utils/themeStore.js';
+import { AssistantStage } from '../chat/assistant/AssistantStage.js';
+import { isAssistantModel3D } from '../chat/assistant/avatar3dModel.js';
+import { useViewportDrag } from '../chat/useViewportDrag.js';
+import { AvatarGalleryGrid, MODEL_3D_CHARACTER, GalleryBalloons, GalleryNotebook, GalleryObstacle, galleryNotebookVisual, Still, useGalleryCharacters, } from './utils/AvatarGalleryGrid.js';
+import { GALLERY_POSES, GALLERY_POSE_LABELS, SAMPLE_NOTEBOOK_SAYING, balloonForPose, sampleApproval, sampleHistory, sampleSaying, sampleToolLine, stateOfPose, } from './utils/avatarGallery.js';
+import { CLIPPY_JS_VERSION, useClippyJsCharacters, } from './utils/clippyJsCharacters.js';
 const STAGE_SIZE = 96;
 const PANEL_HEIGHT = 640;
 const LEAVE_MS = 700;

package/lib/examples/CellExample.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
-import { getServiceManagerRuntimeEnvironmentDetails } from '../hooks/useAgentRuntimes';
-import { ThemedJupyterProvider } from './utils/themedProvider';
+import { getServiceManagerRuntimeEnvironmentDetails } from '../hooks/useAgentRuntimes.js';
+import { ThemedJupyterProvider } from './utils/themedProvider.js';
 import { Button, Heading, Label, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 const CELL_ID = 'cell-example-1';

package/lib/examples/ChatCustomExample.js

@@ -7,10 +7,10 @@ import { useMemo } from 'react';
 import { Spinner, Text } from '@primer/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
-import { Chat } from '../chat';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime.js';
+import { Chat } from '../chat/index.js';
 // Create a query client for React Query
 const queryClient = new QueryClient({
     defaultOptions: {

package/lib/examples/ChatExample.js

@@ -25,14 +25,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { ThemedProvider } from './utils/themedProvider';
-import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
-import { BROWSER_SIGN_IN_REASON, useExampleAgentProtocol, } from './hooks/useExampleAgentProtocol';
-import { runsInBrowser } from '../runtimes/variants';
-import { AGENTSPECS } from '../specs/agents/agents';
-import { ErrorView } from './components';
-import { Chat } from '../chat';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { uniqueAgentId } from './utils/agentId.js';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime.js';
+import { BROWSER_SIGN_IN_REASON, useExampleAgentProtocol, } from './hooks/useExampleAgentProtocol.js';
+import { runsInBrowser } from '../runtimes/variants.js';
+import { AGENTSPECS } from '../specs/agents/agents.js';
+import { ErrorView } from './components/index.js';
+import { Chat } from '../chat/index.js';
 setupPrimerPortals();
 const AGENTSPEC_ID = 'example-simple';
 const AGENT_NAME = 'simple';

package/lib/examples/ChatStandaloneExample.js

@@ -18,8 +18,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './utils/themedProvider';
-import { ChatStandalone } from '../chat';
+import { ThemedProvider } from './utils/themedProvider.js';
+import { ChatStandalone } from '../chat/index.js';
 /**
  * Simulated AI responses for demo purposes.
  * In a real application, this would call your AI backend.