@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/chat/display/EmptyState.d.ts

@@ -0,0 +1,27 @@
+/**
+ * EmptyState — Placeholder content shown when the chat has no messages.
+ *
+ * Supports a custom render function, icon overrides, description text, and
+ * clickable suggestion pills.
+ *
+ * @module chat/display/EmptyState
+ */
+import { type ReactNode } from 'react';
+import type { EmptyStateConfig, Suggestion } from '../../types/chat';
+export interface ChatEmptyStateProps {
+    /** Empty-state configuration (icon, title, subtitle, render) */
+    emptyState?: EmptyStateConfig;
+    /** Brand icon override (falls back to AiAgentIcon) */
+    brandIcon?: ReactNode;
+    /** Description text for the subtitle */
+    description: string;
+    /** Suggestion pills */
+    suggestions?: Suggestion[];
+    /** Called when a suggestion is clicked and should be auto-submitted */
+    onSuggestionSubmit?: (suggestion: Suggestion) => void;
+    /** Called when a suggestion is clicked but should only fill the input */
+    onSuggestionFill?: (message: string) => void;
+    /** Whether clicking a suggestion auto-submits it */
+    submitOnSuggestionClick?: boolean;
+}
+export declare function ChatEmptyState({ emptyState, brandIcon, description, suggestions, onSuggestionSubmit, onSuggestionFill, submitOnSuggestionClick, }: ChatEmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/display/EmptyState.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, LabelGroup, Label, Truncate } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiAgentIcon } from '@datalayer/icons-react';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function ChatEmptyState({ emptyState, brandIcon, description, suggestions, onSuggestionSubmit, onSuggestionFill, submitOnSuggestionClick = true, }) {
+    // Custom render takes precedence
+    if (emptyState?.render) {
+        return _jsx(_Fragment, { children: emptyState.render() });
+    }
+    const handleSuggestionClick = (suggestion) => {
+        if (submitOnSuggestionClick) {
+            onSuggestionSubmit?.(suggestion);
+        }
+        else {
+            onSuggestionFill?.(suggestion.message);
+        }
+    };
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            p: 4,
+            color: 'fg.muted',
+            textAlign: 'center',
+            gap: 2,
+        }, children: [emptyState?.icon || brandIcon || _jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { fontSize: 2 }, children: emptyState?.title || 'Start a conversation' }), (emptyState?.subtitle || description) && (_jsx(Text, { sx: { fontSize: 1 }, children: emptyState?.subtitle || description })), suggestions && suggestions.length > 0 && (_jsx(LabelGroup, { sx: { mt: 2, justifyContent: 'center' }, children: suggestions.map((suggestion, index) => (_jsx(Label, { variant: "accent", title: suggestion.title, sx: {
+                        cursor: 'pointer',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        '&:hover': {
+                            bg: 'accent.emphasis',
+                            color: 'var(--button-primary-fgColor-rest)',
+                            borderColor: 'accent.emphasis',
+                        },
+                    }, onClick: () => handleSuggestionClick(suggestion), children: _jsx(Box, { sx: { width: 140, maxWidth: 140, minWidth: 140 }, children: _jsx(Truncate, { title: suggestion.title, maxWidth: "100%", children: suggestion.title }) }) }, index))) }))] }));
+}

package/lib/{components/chat/components/elements → chat/display}/FloatingBrandButton.d.ts

@@ -2,7 +2,7 @@
  * Floating brand button component for Chat.
  * A hoverable button that opens the chat sidebar.
  *
- * @module components/chat/components/elements/FloatingBrandButton
+ * @module chat/display/FloatingBrandButton
  */
 import React from 'react';
 /**

package/lib/{components/chat/components/elements → chat/display}/FloatingBrandButton.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Floating brand button component for Chat.
  * A hoverable button that opens the chat sidebar.
  *
- * @module components/chat/components/elements/FloatingBrandButton
+ * @module chat/display/FloatingBrandButton
  */
 import { useState } from 'react';
 import { Box, IconButton, Tooltip, Text } from '@primer/react';

package/lib/{components/chat/components/elements → chat/display}/PoweredByTag.d.ts

@@ -2,7 +2,7 @@
  * PoweredBy tag component for Chat.
  * Shows branding at the bottom of the chat.
  *
- * @module components/chat/components/elements/PoweredByTag
+ * @module chat/display/PoweredByTag
  */
 import React from 'react';
 /**

package/lib/{components/chat/components/elements → chat/header}/ChatHeader.d.ts

@@ -1,7 +1,4 @@
-/**
- * Connection state enumeration
- */
-export type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
+import { ConnectionState } from '../../types';
 /**
  * ChatHeader props
  */

package/lib/{components/chat/components/elements → chat/header}/ChatHeader.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Chat header component with connection status indicator.
  *
- * @module components/chat/components/elements/ChatHeader
+ * @module chat/header/ChatHeader
  */
 import { Text, IconButton, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';

package/lib/chat/header/ChatHeaderBase.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ChatHeader — Header bar for the ChatBase component.
+ *
+ * Renders title, brand icon, sandbox status indicator, action buttons
+ * (new chat, clear, settings), view-mode segmented toggle, and custom
+ * header actions / content.
+ *
+ * @module chat/header/ChatHeaderBase
+ */
+import { type ReactNode } from 'react';
+import type { ChatViewMode, HeaderButtonsConfig } from '../../types/chat';
+import type { SandboxStatusData } from '../../types/context';
+export interface ChatBaseHeaderProps {
+    title?: string;
+    brandIcon?: ReactNode;
+    headerContent?: ReactNode;
+    headerActions?: ReactNode;
+    showInformation?: boolean;
+    onInformationClick?: () => void;
+    padding: number;
+    /** Sandbox status from the backend */
+    sandboxStatus?: SandboxStatusData;
+    /** Callback to interrupt sandbox code execution */
+    onSandboxInterrupt: () => void;
+    /** Header button configuration */
+    headerButtons?: HeaderButtonsConfig;
+    /** Current count of messages (used to conditionally show clear button) */
+    messageCount: number;
+    /** Callback when new chat is triggered */
+    onNewChat: () => void;
+    /** Callback when clear is triggered */
+    onClear: () => void;
+    /** Current chat view mode */
+    chatViewMode?: ChatViewMode;
+    /** Callback when view mode changes */
+    onChatViewModeChange?: (mode: ChatViewMode) => void;
+}
+export declare function ChatBaseHeader({ title, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxStatus, onSandboxInterrupt, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }: ChatBaseHeaderProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/header/ChatHeaderBase.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, IconButton, Truncate } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PlusIcon, TrashIcon, GearIcon, CircleIcon, SquareFillIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
+import { AiAgentIcon } from '@datalayer/icons-react';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function ChatBaseHeader({ title, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxStatus, onSandboxInterrupt, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }) {
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+        }, children: _jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                p: padding,
+            }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        minWidth: 0,
+                        flex: '1 1 auto',
+                    }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), title && (_jsx(Heading, { as: "h3", sx: {
+                                fontSize: 2,
+                                fontWeight: 'semibold',
+                                minWidth: 0,
+                                maxWidth: '100%',
+                            }, children: _jsx(Truncate, { title: title, maxWidth: "28ch", children: title }) })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [sandboxStatus?.available &&
+                            sandboxStatus?.sandbox_running &&
+                            (sandboxStatus.is_executing ? (_jsx(IconButton, { icon: SquareFillIcon, "aria-label": "Interrupt code execution", variant: "invisible", size: "small", sx: { color: 'danger.fg' }, onClick: onSandboxInterrupt })) : (_jsx(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 28,
+                                    height: 28,
+                                    color: 'fg.subtle',
+                                }, title: "Code sandbox ready", children: _jsx(CircleIcon, { size: 12 }) }))), headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                bg: 'neutral.muted',
+                                borderRadius: '6px',
+                                p: '2px',
+                                gap: '1px',
+                            }, children: [
+                                {
+                                    mode: 'floating',
+                                    icon: CommentDiscussionIcon,
+                                    label: 'Full-height popup',
+                                },
+                                {
+                                    mode: 'floating-small',
+                                    icon: DeviceMobileIcon,
+                                    label: 'Floating popup',
+                                },
+                                {
+                                    mode: 'sidebar',
+                                    icon: SidebarExpandIcon,
+                                    label: 'Sidebar panel',
+                                },
+                            ].map(({ mode, icon: ModeIcon, label }) => (_jsx(Box, { as: "button", "aria-label": label, title: label, onClick: () => onChatViewModeChange(mode), sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 26,
+                                    height: 24,
+                                    borderRadius: '4px',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    bg: chatViewMode === mode ? 'canvas.default' : 'transparent',
+                                    boxShadow: chatViewMode === mode ? 'shadow.small' : 'none',
+                                    color: chatViewMode === mode ? 'fg.default' : 'fg.muted',
+                                    transition: 'all 0.15s ease',
+                                    '&:hover': {
+                                        color: 'fg.default',
+                                        bg: chatViewMode === mode
+                                            ? 'canvas.default'
+                                            : 'neutral.subtle',
+                                    },
+                                }, children: _jsx(ModeIcon, { size: 14 }) }, mode))) })), headerActions] })] }) }));
+}

package/lib/chat/index.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Chat - Next generation chat component for agent-runtimes.
+ *
+ * Features:
+ * - Multiple transport support: AG-UI, A2A, ACP
+ * - Hybrid tool execution (frontend/backend)
+ * - Human-in-the-loop (HITL) tool approval
+ * - Middleware pipeline for extensibility
+ * - Extension registry for custom renderers
+ * - Primer React UI components
+ * - Zustand state management (NO provider required!)
+ *
+ * @module chat
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   useChatStore,
+ *   ChatSidebar,
+ *   useFrontendTool,
+ *   DatalayerInferenceProvider,
+ * } from './chat';
+ *
+ * // Setup inference provider (once at app init)
+ * const provider = new DatalayerInferenceProvider({
+ *   apiKey: 'your-api-key',
+ *   baseUrl: 'https://api.datalayer.io',
+ * });
+ * useChatStore.getState().setInferenceProvider(provider);
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <ToolRegistrar />
+ *       <ChatSidebar title="Assistant" />
+ *     </>
+ *   );
+ * }
+ *
+ * function ToolRegistrar() {
+ *   useFrontendTool({
+ *     name: 'greet',
+ *     description: 'Greet a user',
+ *     parameters: [{ name: 'name', type: 'string', required: true }],
+ *     handler: async ({ name }) => ({ greeting: `Hello, ${name}!` }),
+ *   });
+ *   return null;
+ * }
+ * ```
+ */
+export { ChatMessages, type ChatMessagesProps } from './messages/ChatMessages';
+export { ChatSidebar, type ChatSidebarProps } from './ChatSidebar';
+export { ChatStandalone } from './ChatStandalone';
+export { ChatBase } from './base/ChatBase';
+export { InputPrompt, type InputPromptProps } from './prompt';
+export { McpStatusIndicator, type McpStatusIndicatorProps, type McpServerStatus, type McpAggregateStatus, SandboxStatusIndicator, type SandboxStatusIndicatorProps, type SandboxAggregateStatus, type SandboxWsStatus, } from './indicators';
+export { PoweredByTag, type PoweredByTagProps } from './display/PoweredByTag';
+export { FloatingBrandButton, type FloatingBrandButtonProps, } from './display/FloatingBrandButton';
+export { ChatHeader, type ChatHeaderProps } from './header/ChatHeader';
+export { MessagePart, type MessagePartProps, TextPart, type TextPartProps, ReasoningPart, type ReasoningPartProps, ToolPart, type ToolPartProps, DynamicToolPart, type DynamicToolPartProps, } from './parts';
+export { ToolCallDisplay, type ToolCallDisplayProps } from './tools';
+export { ToolApprovalDialog, useToolApprovalDialog, type ToolApprovalDialogProps, } from './tools/ToolApprovalDialog';
+export { ToolApprovalBanner, type ToolApprovalBannerProps, type PendingApproval, } from './tools/ToolApprovalBanner';
+export { Chat, type ChatProps } from './Chat';
+export { ChatFloating, type ChatFloatingProps } from './ChatFloating';
+export { ChatInline, type ChatInlineProps, type ChatInlineProtocolConfig, } from './ChatInline';

package/lib/chat/index.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Chat - Next generation chat component for agent-runtimes.
+ *
+ * Features:
+ * - Multiple transport support: AG-UI, A2A, ACP
+ * - Hybrid tool execution (frontend/backend)
+ * - Human-in-the-loop (HITL) tool approval
+ * - Middleware pipeline for extensibility
+ * - Extension registry for custom renderers
+ * - Primer React UI components
+ * - Zustand state management (NO provider required!)
+ *
+ * @module chat
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   useChatStore,
+ *   ChatSidebar,
+ *   useFrontendTool,
+ *   DatalayerInferenceProvider,
+ * } from './chat';
+ *
+ * // Setup inference provider (once at app init)
+ * const provider = new DatalayerInferenceProvider({
+ *   apiKey: 'your-api-key',
+ *   baseUrl: 'https://api.datalayer.io',
+ * });
+ * useChatStore.getState().setInferenceProvider(provider);
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <ToolRegistrar />
+ *       <ChatSidebar title="Assistant" />
+ *     </>
+ *   );
+ * }
+ *
+ * function ToolRegistrar() {
+ *   useFrontendTool({
+ *     name: 'greet',
+ *     description: 'Greet a user',
+ *     parameters: [{ name: 'name', type: 'string', required: true }],
+ *     handler: async ({ name }) => ({ greeting: `Hello, ${name}!` }),
+ *   });
+ *   return null;
+ * }
+ * ```
+ */
+// Components - Chat elements
+export { ChatMessages } from './messages/ChatMessages';
+export { ChatSidebar } from './ChatSidebar';
+export { ChatStandalone } from './ChatStandalone';
+export { ChatBase } from './base/ChatBase';
+export { InputPrompt } from './prompt';
+export { McpStatusIndicator, SandboxStatusIndicator, } from './indicators';
+export { PoweredByTag } from './display/PoweredByTag';
+export { FloatingBrandButton, } from './display/FloatingBrandButton';
+export { ChatHeader } from './header/ChatHeader';
+// Components - Message part renderers
+export { MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, } from './parts';
+// Components - Tool UI
+export { ToolCallDisplay } from './tools';
+export { ToolApprovalDialog, useToolApprovalDialog, } from './tools/ToolApprovalDialog';
+export { ToolApprovalBanner, } from './tools/ToolApprovalBanner';
+// Components - Transport-agnostic chat
+export { Chat } from './Chat';
+export { ChatFloating } from './ChatFloating';
+export { ChatInline, } from './ChatInline';

package/lib/chat/indicators/McpStatusIndicator.d.ts

@@ -0,0 +1,9 @@
+export interface McpStatusIndicatorProps {
+    /** API base URL (e.g. "http://127.0.0.1:8765"). Defaults to
+     *  the current host on non-localhost, or localhost:8765. */
+    apiBase?: string;
+    /** Optional auth token for authenticated requests (e.g. K8s ingress). */
+    authToken?: string;
+}
+export declare function McpStatusIndicator({ apiBase, authToken, }: McpStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export default McpStatusIndicator;

package/lib/chat/indicators/McpStatusIndicator.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * McpStatusIndicator — Round coloured dot that shows the aggregate
+ * status of MCP servers.  A @primer/react Tooltip lists per-server
+ * details on hover.
+ *
+ * Aggregate logic
+ * ───────────────
+ * - no servers array / empty → "none"  (gray, hidden or subtle)
+ * - any server "starting"   → "starting"  (amber, pulsing)
+ * - any server "failed"     → "failed"    (red)
+ * - all servers "started"   → "started"   (green)
+ * - otherwise               → "not_started" (gray)
+ *
+ * @module chat/indicators/McpStatusIndicator
+ */
+import { useEffect, useMemo } from 'react';
+import { Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useQuery } from '@tanstack/react-query';
+import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../../types/mcp';
+/* ── Helpers ───────────────────────────────────────────── */
+function getApiBase(apiBase) {
+    if (apiBase)
+        return apiBase;
+    if (typeof window === 'undefined')
+        return '';
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
+function deriveAggregate(servers) {
+    if (!servers || servers.length === 0)
+        return 'none';
+    if (servers.some(s => s.status === 'starting'))
+        return 'starting';
+    if (servers.some(s => s.status === 'failed'))
+        return 'failed';
+    if (servers.every(s => s.status === 'started'))
+        return 'started';
+    return 'not_started';
+}
+function buildTooltipText(aggregate, servers) {
+    if (aggregate === 'none')
+        return MCP_STATUS_LABELS.none;
+    const lines = [MCP_STATUS_LABELS[aggregate]];
+    for (const s of servers) {
+        let detail = `• ${s.id}: ${s.status}`;
+        if (s.status === 'started' && s.tools_count !== undefined) {
+            detail += ` (${s.tools_count} tools)`;
+        }
+        if (s.status === 'failed' && s.error) {
+            detail += ` — ${s.error}`;
+        }
+        lines.push(detail);
+    }
+    return lines.join('\n');
+}
+const MCP_PULSE_KEYFRAMES = `
+@keyframes mcp-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+`;
+function useInjectKeyframes() {
+    useEffect(() => {
+        const id = '__mcp-pulse-keyframes__';
+        if (document.getElementById(id))
+            return;
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = MCP_PULSE_KEYFRAMES;
+        document.head.appendChild(style);
+    }, []);
+}
+/* ── Component ─────────────────────────────────────────── */
+export function McpStatusIndicator({ apiBase, authToken, }) {
+    useInjectKeyframes();
+    const { data } = useQuery({
+        queryKey: ['mcp-toolsets-status', apiBase],
+        queryFn: async () => {
+            const base = getApiBase(apiBase);
+            const headers = {};
+            if (authToken) {
+                headers['Authorization'] = `Bearer ${authToken}`;
+            }
+            const response = await fetch(`${base}/api/v1/configure/mcp-toolsets-status`, { headers });
+            if (!response.ok)
+                throw new Error('Failed to fetch MCP status');
+            return response.json();
+        },
+        refetchInterval: 5000,
+    });
+    const servers = data?.servers ?? [];
+    const aggregate = useMemo(() => deriveAggregate(servers), [servers]);
+    const tooltipText = useMemo(() => buildTooltipText(aggregate, servers), [aggregate, servers]);
+    // Hide when no servers are configured at all.
+    if (aggregate === 'none')
+        return null;
+    return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 28,
+                height: 28,
+                padding: 0,
+                border: 'none',
+                background: 'none',
+                cursor: 'default',
+                lineHeight: 0,
+            }, children: _jsx(Box, { as: "span", sx: {
+                    display: 'inline-block',
+                    width: 12,
+                    height: 12,
+                    borderRadius: '50%',
+                    bg: MCP_STATUS_COLORS[aggregate],
+                    flexShrink: 0,
+                    ...(aggregate === 'starting' && {
+                        animation: 'mcp-pulse 1.5s ease-in-out infinite',
+                    }),
+                } }) }) }));
+}
+export default McpStatusIndicator;

package/lib/chat/indicators/SandboxStatusIndicator.d.ts

@@ -0,0 +1,10 @@
+export interface SandboxStatusIndicatorProps {
+    /** API base URL (e.g. "http://127.0.0.1:8765"). */
+    apiBase?: string;
+    /** Optional auth token for authenticated requests (e.g. K8s ingress). */
+    authToken?: string;
+    /** Agent ID to scope sandbox status to a specific agent. */
+    agentId?: string;
+}
+export declare function SandboxStatusIndicator({ apiBase, authToken, agentId, }: SandboxStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export default SandboxStatusIndicator;