@datalayer/agent-runtimes 0.0.5 → 0.0.8

package/lib/components/chat/components/ContextDistribution.js

@@ -0,0 +1,146 @@
+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.
+/**
+ * ContextDistribution component - Shows context distribution as a treemap.
+ */
+import { Box, Text, Spinner, Button } from '@primer/react';
+import { ListUnorderedIcon } from '@primer/octicons-react';
+import { useQuery } from '@tanstack/react-query';
+import ReactECharts from 'echarts-for-react';
+import { useState } from 'react';
+function getLocalApiBase() {
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
+/**
+ * Format token count for display
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+}
+/**
+ * ContextDistribution component displays context distribution as a treemap.
+ */
+export function ContextDistribution({ agentId, height = '250px', }) {
+    const [showDetails, setShowDetails] = useState(false);
+    const { data: snapshotData, isLoading, error, } = useQuery({
+        queryKey: ['context-snapshot', agentId],
+        queryFn: async () => {
+            const apiBase = getLocalApiBase();
+            const response = await fetch(`${apiBase}/api/v1/configure/agents/${encodeURIComponent(agentId)}/context-snapshot`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch context snapshot');
+            }
+            return response.json();
+        },
+        refetchInterval: 10000, // Refresh every 10 seconds
+        refetchOnMount: 'always',
+        staleTime: 0,
+    });
+    if (isLoading) {
+        return (_jsxs(Box, { sx: {
+                p: 3,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height,
+            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, fontSize: 1, color: 'fg.muted' }, children: "Loading context distribution..." })] }));
+    }
+    if (error || !snapshotData) {
+        return (_jsx(Box, { sx: {
+                p: 3,
+                bg: 'canvas.subtle',
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'border.default',
+            }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context distribution" }) }));
+    }
+    const { distribution, totalTokens, contextWindow } = snapshotData;
+    const hasData = distribution.children && distribution.children.length > 0;
+    // ECharts option for treemap
+    const chartOption = {
+        tooltip: {
+            formatter: (info) => {
+                return `${info.name}: ${formatTokens(info.value)} tokens`;
+            },
+        },
+        series: [
+            {
+                type: 'treemap',
+                data: hasData ? distribution.children : [{ name: 'No data', value: 1 }],
+                roam: false,
+                breadcrumb: {
+                    show: false,
+                },
+                label: {
+                    show: true,
+                    formatter: '{b}',
+                    fontSize: 12,
+                },
+                itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                },
+                levels: [
+                    {
+                        itemStyle: {
+                            borderColor: '#777',
+                            borderWidth: 0,
+                            gapWidth: 1,
+                        },
+                    },
+                    {
+                        itemStyle: {
+                            borderColor: '#555',
+                            borderWidth: 5,
+                            gapWidth: 1,
+                        },
+                        colorSaturation: [0.35, 0.5],
+                    },
+                    {
+                        colorSaturation: [0.35, 0.5],
+                    },
+                ],
+            },
+        ],
+    };
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    mb: 2,
+                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " /", ' ', formatTokens(contextWindow), " tokens)"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: showDetails ? 'Hide Details' : 'Show Details' })] }), hasData ? (_jsx(ReactECharts, { option: chartOption, style: { height }, opts: { renderer: 'svg' } })) : (_jsx(Box, { sx: {
+                    p: 4,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    textAlign: 'center',
+                    height,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No context data yet. Start a conversation to see context distribution." }) })), showDetails && hasData && (_jsxs(Box, { sx: {
+                    mt: 3,
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.default',
+                    fontFamily: 'mono',
+                    fontSize: 0,
+                }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), snapshotData.systemPromptTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["System Prompts: ", formatTokens(snapshotData.systemPromptTokens), ' ', "tokens"] }), snapshotData.systemPrompts.map((prompt, idx) => (_jsxs(Text, { sx: { display: 'block', ml: 3, mt: 1, color: 'fg.muted' }, children: ["\u2022", ' ', prompt.length > 100 ? prompt.slice(0, 100) + '...' : prompt] }, idx)))] })), (snapshotData.userMessageTokens > 0 ||
+                        snapshotData.assistantMessageTokens > 0) && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Messages:", ' ', formatTokens(snapshotData.userMessageTokens +
+                                        snapshotData.assistantMessageTokens), ' ', "tokens"] }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 User Messages:", ' ', formatTokens(snapshotData.userMessageTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Assistant Responses:", ' ', formatTokens(snapshotData.assistantMessageTokens), " tokens"] })] })] }))] }))] }));
+}
+export default ContextDistribution;

package/lib/components/chat/components/ContextUsage.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Context category child item
+ */
+interface ContextCategoryChild {
+    name: string;
+    value: number;
+}
+/**
+ * Context category with children
+ */
+interface ContextCategory {
+    name: string;
+    value: number;
+    children: ContextCategoryChild[];
+}
+/**
+ * Context details response from API
+ */
+export interface ContextDetailsResponse {
+    name: string;
+    totalTokens: number;
+    usedTokens: number;
+    children: ContextCategory[];
+}
+export interface ContextUsageProps {
+    /** Agent ID for fetching context details (required) */
+    agentId: string;
+}
+/**
+ * ContextUsage component displays token usage breakdown by category.
+ */
+export declare function ContextUsage({ agentId }: ContextUsageProps): import("react/jsx-runtime").JSX.Element;
+export default ContextUsage;

package/lib/components/chat/components/ContextUsage.js

@@ -0,0 +1,127 @@
+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.
+/**
+ * ContextUsage component - Shows context usage details with token breakdown.
+ */
+import { CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, } from '@primer/octicons-react';
+import { Box, Heading, Text, ProgressBar, Spinner } from '@primer/react';
+import { useQuery } from '@tanstack/react-query';
+function getLocalApiBase() {
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
+/**
+ * Format token count for display
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+}
+/**
+ * Get icon for context category
+ */
+function getCategoryIcon(name) {
+    switch (name.toLowerCase()) {
+        case 'files':
+            return FileIcon;
+        case 'messages':
+            return CommentDiscussionIcon;
+        case 'tools':
+            return ToolsIcon;
+        case 'memory':
+            return DatabaseIcon;
+        case 'system':
+            return FileIcon;
+        case 'cache':
+            return DatabaseIcon;
+        default:
+            return ClockIcon;
+    }
+}
+/**
+ * ContextUsage component displays token usage breakdown by category.
+ */
+export function ContextUsage({ agentId }) {
+    const { data: contextData, isLoading, error, } = useQuery({
+        queryKey: ['context-details', agentId],
+        queryFn: async () => {
+            const apiBase = getLocalApiBase();
+            const response = await fetch(`${apiBase}/api/v1/configure/agents/${encodeURIComponent(agentId)}/context-details`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch context details');
+            }
+            return response.json();
+        },
+        refetchInterval: 10000, // Refresh every 10 seconds
+        refetchOnMount: 'always', // Always refetch when component mounts
+        staleTime: 0, // Data is always considered stale
+    });
+    if (isLoading) {
+        return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                        fontSize: 1,
+                        fontWeight: 'semibold',
+                        mb: 2,
+                        color: 'fg.muted',
+                    }, children: "Cumulative Context Usage" }), _jsxs(Box, { sx: {
+                        p: 3,
+                        bg: 'canvas.subtle',
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading context details..." })] })] }));
+    }
+    if (error || !contextData) {
+        return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                        fontSize: 1,
+                        fontWeight: 'semibold',
+                        mb: 2,
+                        color: 'fg.muted',
+                    }, children: "Cumulative Context Usage" }), _jsx(Box, { sx: {
+                        p: 3,
+                        bg: 'canvas.subtle',
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                    }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details" }) })] }));
+    }
+    const contextUsagePercent = (contextData.usedTokens / contextData.totalTokens) * 100;
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                    fontSize: 1,
+                    fontWeight: 'semibold',
+                    mb: 2,
+                    color: 'fg.muted',
+                }, children: "Cumulative Context Usage" }), _jsxs(Box, { sx: {
+                    p: 3,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    mb: 1,
+                                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [formatTokens(contextData.usedTokens), " /", ' ', formatTokens(contextData.totalTokens), " tokens"] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [contextUsagePercent.toFixed(0), "%"] })] }), _jsx(ProgressBar, { progress: contextUsagePercent, sx: { height: 8 }, bg: contextUsagePercent > 80 ? 'danger.emphasis' : 'accent.emphasis' })] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: contextData.children.map(category => {
+                            const CategoryIcon = getCategoryIcon(category.name);
+                            const categoryPercent = (category.value / contextData.totalTokens) * 100;
+                            return (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                }, children: [_jsx(Box, { sx: { color: 'fg.muted', width: 20 }, children: _jsx(CategoryIcon, { size: 16 }) }), _jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: category.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', minWidth: 60 }, children: formatTokens(category.value) }), _jsx(Box, { sx: { width: 80 }, children: _jsx(ProgressBar, { progress: categoryPercent, sx: { height: 4 } }) })] }, category.name));
+                        }) })] })] }));
+}
+export default ContextUsage;

package/lib/components/chat/components/base/ChatBase.d.ts

@@ -201,6 +201,16 @@ export interface ChatBaseProps {
     showModelSelector?: boolean;
     /** Show tools menu (for protocols that support it) */
     showToolsMenu?: boolean;
+    /** Show skills menu (for protocols that support it) */
+    showSkillsMenu?: boolean;
+    /** Indicate tools are accessed via Codemode meta-tools */
+    codemodeEnabled?: boolean;
+    /** Initial model ID to select (e.g., 'openai:gpt-4o-mini') */
+    initialModel?: string;
+    /** Initial MCP server IDs to enable (others will be disabled) */
+    initialMcpServers?: string[];
+    /** Initial skill IDs to enable */
+    initialSkills?: string[];
     /** Custom class name */
     className?: string;
     /** Custom loading state */
@@ -301,10 +311,50 @@ export interface ChatBaseProps {
      * These tools execute in the browser and their results are sent back to the agent.
      */
     frontendTools?: FrontendToolDefinition[];
+    /**
+     * Callback when the agent requests authorization for an external service.
+     * This is called when a tool needs OAuth access to a service like GitHub.
+     *
+     * @param provider - The OAuth provider name (e.g., 'github', 'google')
+     * @param scopes - The requested OAuth scopes
+     * @param context - Additional context about why authorization is needed
+     * @returns Promise resolving to the access token, or null if user cancels
+     *
+     * @example
+     * ```tsx
+     * <ChatBase
+     *   onAuthorizationRequired={async (provider, scopes, context) => {
+     *     // Show UI to user to authorize
+     *     const token = await showAuthDialog(provider, scopes);
+     *     return token;
+     *   }}
+     * />
+     * ```
+     */
+    onAuthorizationRequired?: (provider: string, scopes: string[], context?: {
+        toolName?: string;
+        reason?: string;
+    }) => Promise<string | null>;
+    /**
+     * Connected identities to pass to agent tools.
+     * When provided, access tokens for these identities are automatically
+     * included in tool calls that need them.
+     *
+     * @example
+     * ```tsx
+     * const { identities, getAccessToken } = useIdentity();
+     * <ChatBase connectedIdentities={identities} />
+     * ```
+     */
+    connectedIdentities?: Array<{
+        provider: string;
+        userId?: string;
+        accessToken?: string;
+    }>;
 }
 /**
  * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
  */
-export declare function ChatBase({ title, showHeader, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, className, loadingState, headerActions, useStore: useStoreMode, protocol, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBase({ title, showHeader, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, initialMcpServers, initialSkills, className, loadingState, headerActions, useStore: useStoreMode, protocol, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, onAuthorizationRequired, connectedIdentities, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
 export type { PoweredByTagProps };
 export default ChatBase;