@datalayer/agent-runtimes 0.0.5 → 0.0.8

package/lib/components/chat/components/AgentIdentity.js

@@ -0,0 +1,318 @@
+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.
+ */
+/**
+ * AgentIdentity component - Shows connected identity providers with token status.
+ * Displays expiration details and allows reconnection if token expired.
+ *
+ * @module components/chat/components/AgentIdentity
+ */
+import React, { useCallback, useMemo } from 'react';
+import { Box, Text, Button, Label, Avatar, Flash, Tooltip, } from '@primer/react';
+import { MarkGithubIcon, LinkIcon, UnlinkIcon, CheckCircleFillIcon, AlertIcon, ClockIcon, SyncIcon, KeyIcon, } from '@primer/octicons-react';
+import { useIdentity, IdentityButton } from '../../../identity';
+import { GITHUB_PROVIDER, GOOGLE_PROVIDER, KAGGLE_PROVIDER, } from '../../../identity';
+const PROVIDER_DISPLAY = {
+    github: {
+        name: 'GitHub',
+        icon: MarkGithubIcon,
+        color: '#24292f',
+        description: 'Access GitHub repositories and APIs',
+    },
+    google: {
+        name: 'Google',
+        icon: KeyIcon,
+        color: '#4285f4',
+        description: 'Access Google services and APIs',
+    },
+    kaggle: {
+        name: 'Kaggle',
+        icon: KeyIcon,
+        color: '#20beff',
+        description: 'Access Kaggle datasets and notebooks',
+    },
+    linkedin: {
+        name: 'LinkedIn',
+        icon: KeyIcon,
+        color: '#0077b5',
+        description: 'Access LinkedIn profile',
+    },
+    slack: {
+        name: 'Slack',
+        icon: KeyIcon,
+        color: '#4a154b',
+        description: 'Access Slack workspaces',
+    },
+    notion: {
+        name: 'Notion',
+        icon: KeyIcon,
+        color: '#000000',
+        description: 'Access Notion pages',
+    },
+    custom: {
+        name: 'Custom',
+        icon: LinkIcon,
+        color: '#6f42c1',
+        description: 'Custom OAuth provider',
+    },
+};
+const DEFAULT_SCOPES = {
+    github: ['read:user', 'user:email', 'repo'],
+    google: ['openid', 'profile', 'email'],
+    kaggle: ['read'],
+    linkedin: ['r_liteprofile', 'r_emailaddress'],
+    slack: ['users:read', 'channels:read'],
+    notion: ['read_content'],
+    custom: [],
+};
+/**
+ * Calculate token status from expiration timestamp
+ */
+export function getTokenStatus(expiresAt) {
+    if (!expiresAt) {
+        return { isExpired: false, isExpiringSoon: false };
+    }
+    const now = Date.now();
+    const expiresAtDate = new Date(expiresAt);
+    const timeUntilExpiry = expiresAt - now;
+    const timeSinceExpiry = now - expiresAt;
+    // Token expires within 5 minutes - considered "expiring soon"
+    const EXPIRING_SOON_THRESHOLD = 5 * 60 * 1000;
+    return {
+        isExpired: timeUntilExpiry < 0,
+        isExpiringSoon: timeUntilExpiry > 0 && timeUntilExpiry < EXPIRING_SOON_THRESHOLD,
+        expiresAt: expiresAtDate,
+        timeUntilExpiry: timeUntilExpiry > 0 ? timeUntilExpiry : undefined,
+        timeSinceExpiry: timeUntilExpiry < 0 ? timeSinceExpiry : undefined,
+    };
+}
+/**
+ * Format duration for display
+ */
+export function formatDuration(ms) {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (days > 0) {
+        return days === 1 ? '1 day' : `${days} days`;
+    }
+    if (hours > 0) {
+        return hours === 1 ? '1 hour' : `${hours} hours`;
+    }
+    if (minutes > 0) {
+        return minutes === 1 ? '1 minute' : `${minutes} minutes`;
+    }
+    return seconds === 1 ? '1 second' : `${seconds} seconds`;
+}
+/**
+ * Format expiration status text
+ */
+export function formatExpirationStatus(status) {
+    if (status.isExpired && status.timeSinceExpiry) {
+        return `Expired ${formatDuration(status.timeSinceExpiry)} ago`;
+    }
+    if (status.timeUntilExpiry) {
+        if (status.isExpiringSoon) {
+            return `Expires in ${formatDuration(status.timeUntilExpiry)}`;
+        }
+        return `Expires in ${formatDuration(status.timeUntilExpiry)}`;
+    }
+    // Token has no expiration info - likely a long-lived token
+    return 'Token does not expire';
+}
+/**
+ * Single identity card with status and actions
+ */
+export function IdentityCard({ identity, providerConfig, showExpirationDetails = true, allowReconnect = true, onConnect: _onConnect, onDisconnect, onError, }) {
+    const { connect, disconnect, configureProvider, isAuthorizing } = useIdentity();
+    const provider = identity.provider;
+    const display = PROVIDER_DISPLAY[provider] || PROVIDER_DISPLAY.custom;
+    const tokenStatus = useMemo(() => getTokenStatus(identity.token?.expiresAt), [identity.token?.expiresAt]);
+    // Configure provider on mount if config is provided
+    React.useEffect(() => {
+        if (providerConfig?.clientId) {
+            const baseConfig = provider === 'github'
+                ? GITHUB_PROVIDER
+                : provider === 'google'
+                    ? GOOGLE_PROVIDER
+                    : provider === 'kaggle'
+                        ? KAGGLE_PROVIDER
+                        : undefined;
+            if (baseConfig) {
+                const redirectUri = providerConfig.config?.redirectUri ||
+                    (typeof window !== 'undefined'
+                        ? `${window.location.origin}${window.location.pathname}`
+                        : '');
+                configureProvider({
+                    ...baseConfig,
+                    ...providerConfig.config,
+                    provider,
+                    clientId: providerConfig.clientId,
+                    redirectUri,
+                });
+            }
+        }
+    }, [providerConfig, provider, configureProvider]);
+    const handleReconnect = useCallback(async () => {
+        try {
+            const scopes = providerConfig?.scopes || DEFAULT_SCOPES[provider];
+            await connect(provider, scopes);
+        }
+        catch (err) {
+            onError?.(err instanceof Error ? err : new Error(String(err)));
+        }
+    }, [provider, providerConfig?.scopes, connect, onError]);
+    const handleDisconnect = useCallback(async () => {
+        try {
+            await disconnect(provider);
+            onDisconnect?.(provider);
+        }
+        catch (err) {
+            onError?.(err instanceof Error ? err : new Error(String(err)));
+        }
+    }, [provider, disconnect, onDisconnect, onError]);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            p: 3,
+            border: '1px solid',
+            borderColor: tokenStatus.isExpired
+                ? 'danger.muted'
+                : tokenStatus.isExpiringSoon
+                    ? 'attention.muted'
+                    : 'success.muted',
+            borderRadius: 2,
+            backgroundColor: tokenStatus.isExpired
+                ? 'danger.subtle'
+                : tokenStatus.isExpiringSoon
+                    ? 'attention.subtle'
+                    : 'success.subtle',
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: 2,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: display.color,
+                            color: 'white',
+                            flexShrink: 0,
+                        }, children: _jsx(display.icon, { size: 16 }) }), _jsxs(Box, { sx: { flex: 1, display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: display.name }), _jsx(Label, { size: "small", variant: "secondary", children: identity.authType === 'token' ? 'API Key' : 'OAuth' })] }), tokenStatus.isExpired ? (_jsx(Label, { variant: "danger", size: "small", children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(AlertIcon, { size: 12 }), " Expired"] }) })) : tokenStatus.isExpiringSoon ? (_jsx(Label, { variant: "attention", size: "small", children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ClockIcon, { size: 12 }), " Expiring Soon"] }) })) : (_jsx(Label, { variant: "success", size: "small", children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(CheckCircleFillIcon, { size: 12 }), " Connected"] }) }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [identity.userInfo?.avatarUrl && (_jsx("a", { href: identity.userInfo.profileUrl ||
+                            (provider === 'github'
+                                ? `https://github.com/${identity.userInfo.username}`
+                                : undefined), target: "_blank", rel: "noopener noreferrer", style: { display: 'block', lineHeight: 0, flexShrink: 0 }, children: _jsx(Avatar, { src: identity.userInfo.avatarUrl, size: 32, alt: identity.userInfo.name ||
+                                identity.userInfo.username ||
+                                display.name, sx: { cursor: 'pointer' } }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [identity.userInfo?.name && (_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1, display: 'block' }, children: identity.userInfo.name })), (identity.userInfo?.username || identity.userInfo?.email) && (_jsx("a", { href: identity.userInfo.profileUrl ||
+                                    (provider === 'github'
+                                        ? `https://github.com/${identity.userInfo.username}`
+                                        : undefined), target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(Text, { sx: {
+                                        fontSize: 0,
+                                        color: 'fg.muted',
+                                        display: 'block',
+                                        ':hover': { textDecoration: 'underline' },
+                                    }, children: identity.userInfo.username
+                                        ? `@${identity.userInfo.username}`
+                                        : identity.userInfo.email }) }))] })] }), showExpirationDetails && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                }, children: [_jsx(ClockIcon, { size: 12 }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: tokenStatus.isExpired
+                                ? 'danger.fg'
+                                : tokenStatus.isExpiringSoon
+                                    ? 'attention.fg'
+                                    : 'fg.muted',
+                        }, children: formatExpirationStatus(tokenStatus) })] })), identity.scopes && identity.scopes.length > 0 && (_jsx(Box, { sx: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: 1,
+                }, children: identity.scopes.map(scope => (_jsx(Label, { size: "small", variant: "secondary", children: scope }, scope))) })), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    gap: 2,
+                    mt: 1,
+                }, children: [tokenStatus.isExpired &&
+                        allowReconnect &&
+                        providerConfig?.clientId && (_jsx(Tooltip, { text: "Reconnect to refresh token", children: _jsx(Button, { variant: "primary", size: "small", leadingVisual: SyncIcon, onClick: handleReconnect, disabled: isAuthorizing, children: isAuthorizing ? 'Connecting...' : 'Reconnect' }) })), _jsxs(Button, { variant: tokenStatus.isExpired ? 'invisible' : 'danger', size: "small", leadingVisual: UnlinkIcon, onClick: handleDisconnect, disabled: isAuthorizing, children: ["Disconnect from ", display.name] })] })] }));
+}
+/**
+ * AgentIdentity component - Displays all connected identities with status
+ *
+ * Features:
+ * - Shows connected OAuth identities (GitHub, Google, Kaggle, etc.)
+ * - Displays token expiration status with detailed timing
+ * - Allows reconnection if token expired
+ * - Reusable across AgentDetails, AgentConfiguration, etc.
+ */
+export function AgentIdentity({ providers, title = 'Connected Accounts', showHeader = true, showDescription = true, description = 'Connected identities for this agent. Agents can use these to access external services on your behalf.', showExpirationDetails = true, allowReconnect = true, onConnect, onDisconnect, onError, }) {
+    const { identities, error } = useIdentity();
+    // Filter to show configured providers AND any token-based connected identities
+    // Token-based identities (like Kaggle) should always be shown if connected
+    const displayIdentities = useMemo(() => {
+        if (providers) {
+            const providerKeys = Object.keys(providers);
+            // Include configured providers AND any token-based connected identities
+            return identities.filter(id => providerKeys.includes(id.provider) ||
+                (id.authType === 'token' && id.isConnected));
+        }
+        return identities;
+    }, [identities, providers]);
+    // Get list of connected provider names
+    const connectedProviderNames = useMemo(() => new Set(identities.map(id => id.provider)), [identities]);
+    // Get providers that are NOT yet connected (to show connect buttons)
+    const unconnectedProviders = useMemo(() => {
+        if (!providers)
+            return {};
+        const providerKeys = Object.keys(providers);
+        const unconnected = {};
+        for (const provider of providerKeys) {
+            if (!connectedProviderNames.has(provider)) {
+                unconnected[provider] = providers[provider];
+            }
+        }
+        return unconnected;
+    }, [providers, connectedProviderNames]);
+    const hasUnconnected = Object.keys(unconnectedProviders).length > 0;
+    const handleError = useCallback((provider) => (err) => {
+        onError?.(provider, err);
+    }, [onError]);
+    // No identities and no providers configured
+    if (displayIdentities.length === 0 && !providers) {
+        return null;
+    }
+    return (_jsxs(Box, { children: [showHeader && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    mb: 2,
+                }, children: [_jsx(KeyIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.muted' }, children: title })] })), _jsxs(Box, { sx: {
+                    p: 3,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [showDescription && (_jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: 'fg.muted',
+                            display: 'block',
+                            mb: displayIdentities.length > 0 ? 3 : 0,
+                        }, children: description })), error && (_jsx(Flash, { variant: "danger", sx: { mb: 3 }, children: error instanceof Error ? error.message : String(error) })), displayIdentities.length > 0 ? (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: displayIdentities.map(identity => (_jsx(IdentityCard, { identity: identity, providerConfig: providers?.[identity.provider], showExpirationDetails: showExpirationDetails, allowReconnect: allowReconnect, onConnect: onConnect, onDisconnect: onDisconnect, onError: handleError(identity.provider) }, identity.provider))) })) : !hasUnconnected ? (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            color: 'fg.muted',
+                        }, children: [_jsx(LinkIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1 }, children: "No connected accounts" })] })) : null, hasUnconnected && (_jsxs(Box, { sx: { mt: displayIdentities.length > 0 ? 3 : 0 }, children: [displayIdentities.length > 0 && (_jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    color: 'fg.muted',
+                                    display: 'block',
+                                    mb: 2,
+                                }, children: "Connect additional accounts:" })), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: Object.keys(unconnectedProviders).map(provider => {
+                                    const config = unconnectedProviders[provider];
+                                    return (_jsx(IdentityButton, { provider: provider, clientId: config.clientId, scopes: config.scopes, providerConfig: config.config, size: "medium", variant: "full", onConnect: onConnect, onDisconnect: onDisconnect, onError: handleError(provider) }, provider));
+                                }) })] }))] })] }));
+}
+export default AgentIdentity;

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

@@ -1,4 +1,5 @@
 import { type Suggestion } from './base/ChatBase';
+import type { OAuthProvider, OAuthProviderConfig, Identity } from '../../../identity';
 /**
  * Supported transports (communication transports)
  */
@@ -49,6 +50,16 @@ export interface ChatProps {
     showModelSelector?: boolean;
     /** Show tools menu (fetched from /configure endpoint) */
     showToolsMenu?: boolean;
+    /** Show skills menu (fetched from /skills endpoint) */
+    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[];
     /** Clear messages when component mounts or agentId changes */
     clearOnMount?: boolean;
     /** Suggestions to show in empty state */
@@ -59,6 +70,18 @@ export interface ChatProps {
     description?: string;
     /** Auto-focus the input on mount */
     autoFocus?: boolean;
+    /** Identity providers configuration for OAuth */
+    identityProviders?: {
+        [K in OAuthProvider]?: {
+            clientId: string;
+            scopes?: string[];
+            config?: Partial<OAuthProviderConfig>;
+        };
+    };
+    /** Callback when identity connects */
+    onIdentityConnect?: (identity: Identity) => void;
+    /** Callback when identity disconnects */
+    onIdentityDisconnect?: (provider: OAuthProvider) => void;
 }
 /**
  * Chat Component
@@ -101,5 +124,5 @@ export interface ChatProps {
  * />
  * ```
  */
-export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, initialMcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/lib/components/chat/components/Chat.js

@@ -24,6 +24,7 @@ import { AlertIcon, SyncIcon, InfoIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { ChatBase } from './base/ChatBase';
 import { AgentDetails } from './AgentDetails';
+import { useConnectedIdentities } from '../../../identity';
 // Try to get Jupyter settings if available
 let getJupyterSettings;
 try {
@@ -129,11 +130,34 @@ function getProtocolType(transport) {
  * />
  * ```
  */
-export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, }) {
+export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = false, codemodeEnabled = false, initialModel, initialMcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, }) {
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
     const [messageCount, setMessageCount] = useState(0);
+    const [focusTrigger, setFocusTrigger] = useState(0);
+    // Get connected identities to pass to backend for skill execution
+    const connectedIdentities = useConnectedIdentities();
+    // Map identities to the format expected by ChatBase
+    // Filter out identities without tokens (not fully connected)
+    const identitiesForChat = useMemo(() => {
+        return connectedIdentities
+            .filter(identity => identity.token?.accessToken)
+            .map(identity => ({
+            provider: identity.provider,
+            accessToken: identity.token.accessToken,
+        }));
+    }, [connectedIdentities]);
+    // Focus the input when returning from details view
+    useEffect(() => {
+        if (!showDetails) {
+            // Small delay to ensure the chat view is visible before focusing
+            const timer = setTimeout(() => {
+                setFocusTrigger(prev => prev + 1);
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [showDetails]);
     // Build protocol config based on transport
     const protocolConfig = useMemo(() => {
         try {
@@ -248,28 +272,26 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
                 bg: 'canvas.default',
             }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transport.toUpperCase().replace('-', ' '), " agent..."] })] }));
     }
-    // Show agent details view
-    if (showDetails) {
-        return (_jsx(Box, { className: className, sx: {
-                position: 'relative',
-                height,
-                bg: 'canvas.default',
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, onBack: () => setShowDetails(false) }) }));
-    }
-    return (_jsx(Box, { className: className, sx: {
+    return (_jsxs(Box, { className: className, sx: {
             position: 'relative',
             height,
             bg: 'canvas.default',
             display: 'flex',
             flexDirection: 'column',
-        }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: false, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
-                showNewChat: true,
-                showClear: true,
-                onNewChat: handleNewChat,
-            }, avatarConfig: {
-                showAvatars: true,
-            }, backgroundColor: "canvas.default" }) }));
+        }, children: [_jsx(Box, { sx: {
+                    display: showDetails ? 'flex' : 'none',
+                    flexDirection: 'column',
+                    height: '100%',
+                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsx(Box, { sx: {
+                    display: showDetails ? 'none' : 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, initialMcpServers: initialMcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
+                        showNewChat: true,
+                        showClear: true,
+                        onNewChat: handleNewChat,
+                    }, avatarConfig: {
+                        showAvatars: true,
+                    }, backgroundColor: "canvas.default", focusTrigger: focusTrigger }) })] }));
 }
 export default Chat;

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

@@ -145,6 +145,11 @@ export interface ChatFloatingProps {
      * @default false
      */
     showToolsMenu?: boolean;
+    /**
+     * Show skills menu in footer.
+     * @default false
+     */
+    showSkillsMenu?: boolean;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -152,5 +157,5 @@ export interface ChatFloatingProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, showModelSelector, showToolsMenu, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, showModelSelector, showToolsMenu, showSkillsMenu, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;

package/lib/components/chat/components/ChatFloating.js

@@ -43,7 +43,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, showModelSelector = false, showToolsMenu = false, panelProps, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -73,14 +73,20 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         return {
             type: 'ag-ui',
             endpoint,
-            // Enable config query for model/tools selector when showModelSelector or showToolsMenu is true
-            enableConfigQuery: showModelSelector || showToolsMenu,
+            // Enable config query for model/tools/skills selector
+            enableConfigQuery: showModelSelector || showToolsMenu || showSkillsMenu,
             // Config endpoint is at /api/v1/configure (global, not per-agent)
-            configEndpoint: showModelSelector || showToolsMenu
+            configEndpoint: showModelSelector || showToolsMenu || showSkillsMenu
                 ? `${baseUrl}/api/v1/configure`
                 : undefined,
         };
-    }, [protocolProp, endpoint, showModelSelector, showToolsMenu]);
+    }, [
+        protocolProp,
+        endpoint,
+        showModelSelector,
+        showToolsMenu,
+        showSkillsMenu,
+    ]);
     // Clear messages when endpoint/protocol changes (e.g., switching examples)
     useEffect(() => {
         clearStoreMessages();
@@ -387,6 +393,6 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         ...poweredByProps,
                     }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, ...panelProps, children: children }) })] }));
+                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, ...panelProps, children: children }) })] }));
 }
 export default ChatFloating;

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

@@ -0,0 +1,47 @@
+/**
+ * Distribution child item
+ */
+interface DistributionChild {
+    name: string;
+    value: number;
+    children?: DistributionChild[];
+}
+/**
+ * Distribution data for treemap
+ */
+interface Distribution {
+    name: string;
+    value: number;
+    children: DistributionChild[];
+}
+/**
+ * Context snapshot response from API
+ */
+export interface ContextSnapshotResponse {
+    agentId: string;
+    systemPrompts: string[];
+    systemPromptTokens: number;
+    messages: Array<{
+        role: string;
+        content: string;
+        estimatedTokens: number;
+        timestamp: string | null;
+    }>;
+    userMessageTokens: number;
+    assistantMessageTokens: number;
+    totalTokens: number;
+    contextWindow: number;
+    distribution: Distribution;
+    error?: string;
+}
+export interface ContextDistributionProps {
+    /** Agent ID for fetching context snapshot */
+    agentId: string;
+    /** Height of the chart */
+    height?: string;
+}
+/**
+ * ContextDistribution component displays context distribution as a treemap.
+ */
+export declare function ContextDistribution({ agentId, height, }: ContextDistributionProps): import("react/jsx-runtime").JSX.Element;
+export default ContextDistribution;