@datalayer/agent-runtimes 1.0.1 → 1.0.3

package/lib/chat/prompt/InputPromptText.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * InputPromptText — Plain-text input variant for InputPrompt.
+ *
+ * Auto-resizing textarea with Enter-to-send and Shift+Enter for newline.
+ *
+ * @module chat/prompt/InputPromptText
+ */
+import { useCallback, useEffect, } from 'react';
+import { Textarea } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+export function InputPromptText({ value, onChange, placeholder = 'Ask anything…', disabled = false, onSubmit, inputRef, }) {
+    // Auto-resize
+    const adjustHeight = useCallback(() => {
+        const el = inputRef && 'current' in inputRef
+            ? inputRef.current
+            : null;
+        if (el) {
+            el.style.height = 'auto';
+            const max = 120;
+            const min = 40;
+            const h = Math.min(Math.max(el.scrollHeight, min), max);
+            el.style.height = `${h}px`;
+            el.style.overflowY = el.scrollHeight > max ? 'auto' : 'hidden';
+        }
+    }, [inputRef]);
+    useEffect(() => {
+        adjustHeight();
+    }, [value, adjustHeight]);
+    useEffect(() => {
+        const t = setTimeout(adjustHeight, 0);
+        return () => clearTimeout(t);
+    }, [adjustHeight]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            onSubmit?.();
+        }
+    }, [onSubmit]);
+    return (_jsx(Box, { sx: { px: 2, py: 1 }, children: _jsx(Textarea, { ref: inputRef, value: value, onChange: e => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, sx: {
+                width: '100%',
+                resize: 'none',
+                minHeight: '40px',
+                maxHeight: '120px',
+                overflow: 'hidden',
+                transition: 'height 0.1s ease-out',
+                py: '2px',
+                border: 'none !important',
+                boxShadow: 'none !important',
+                outline: 'none !important',
+                bg: 'transparent',
+                '&:focus-within': {
+                    border: 'none !important',
+                    boxShadow: 'none !important',
+                    outline: 'none !important',
+                },
+                '& textarea': {
+                    outline: 'none !important',
+                },
+            }, rows: 1 }) }));
+}
+export default InputPromptText;

package/lib/chat/prompt/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Prompt components barrel export.
+ *
+ * @module chat/prompt
+ */
+export { InputPrompt, type InputPromptProps, type InputPromptVariant, } from './InputPrompt';
+export { InputPromptHeader, type InputPromptHeaderProps, } from './InputPromptHeader';
+export { InputPromptFooter, type InputPromptFooterProps, } from './InputPromptFooter';
+export { InputPromptText, type InputPromptTextProps } from './InputPromptText';
+export { InputPromptLexical, type InputPromptLexicalProps, } from './InputPromptLexical';
+export { InputToolbar, type InputToolbarProps } from './InputFooter';

package/lib/chat/prompt/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Prompt components barrel export.
+ *
+ * @module chat/prompt
+ */
+export { InputPrompt, } from './InputPrompt';
+export { InputPromptHeader, } from './InputPromptHeader';
+export { InputPromptFooter, } from './InputPromptFooter';
+export { InputPromptText } from './InputPromptText';
+export { InputPromptLexical, } from './InputPromptLexical';
+export { InputToolbar } from './InputFooter';

package/lib/{components/chat/components → chat}/styles/streamdownStyles.d.ts

@@ -5,7 +5,7 @@
  * Since we don't load Tailwind CSS, we provide equivalent styles via
  * Primer's sx prop targeting the Tailwind class names.
  *
- * @module components/chat/components/styles/streamdownStyles
+ * @module chat/styles/streamdownStyles
  */
 /** Style object compatible with Primer's sx prop */
 type SxStyles = Record<string, unknown>;

package/lib/chat/tools/ToolApprovalBanner.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A single pending approval item.
+ */
+export interface PendingApproval {
+    id: string;
+    toolName: string;
+    toolDescription?: string;
+    args: Record<string, unknown>;
+    agentId: string;
+    requestedAt: string;
+}
+/**
+ * Props for the ToolApprovalBanner.
+ */
+export interface ToolApprovalBannerProps {
+    /** List of pending approvals */
+    pendingApprovals: PendingApproval[];
+    /** Called when user clicks "Review" on a specific approval */
+    onReview: (approval: PendingApproval) => void;
+    /** Called when user clicks "Approve All" */
+    onApproveAll?: () => void;
+    /** Called when user clicks "Dismiss" */
+    onDismiss?: () => void;
+    /** Whether the banner is collapsible */
+    collapsible?: boolean;
+}
+/**
+ * Persistent banner for tool approval notifications.
+ */
+export declare function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, onDismiss, collapsible, }: ToolApprovalBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export default ToolApprovalBanner;

package/lib/chat/tools/ToolApprovalBanner.js

@@ -0,0 +1,62 @@
+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.
+ */
+/**
+ * Tool Approval Banner component.
+ *
+ * A persistent banner shown at the top of the chat when there are
+ * pending tool approval requests. Provides quick counts and
+ * a review button that opens the full ToolApprovalDialog.
+ *
+ * @module chat/tools/ToolApprovalBanner
+ */
+import { useState } from 'react';
+import { Box, Button, Text, CounterLabel } from '@primer/react';
+import { ShieldCheckIcon, AlertIcon, CheckIcon, XIcon, } from '@primer/octicons-react';
+/**
+ * Persistent banner for tool approval notifications.
+ */
+export function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, onDismiss, collapsible = true, }) {
+    const [collapsed, setCollapsed] = useState(false);
+    if (pendingApprovals.length === 0) {
+        return null;
+    }
+    if (collapsed) {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+                px: 3,
+                py: 2,
+                bg: 'attention.subtle',
+                borderBottom: '1px solid',
+                borderColor: 'attention.muted',
+                cursor: 'pointer',
+            }, onClick: () => setCollapsed(false), children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Tool approvals pending" }), _jsx(CounterLabel, { children: pendingApprovals.length })] }));
+    }
+    return (_jsxs(Box, { sx: {
+            borderBottom: '1px solid',
+            borderColor: 'attention.muted',
+            bg: 'attention.subtle',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    px: 3,
+                    py: 2,
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [pendingApprovals.length, " tool", ' ', pendingApprovals.length === 1 ? 'approval' : 'approvals', " pending"] })] }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [onApproveAll && pendingApprovals.length > 1 && (_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: onApproveAll, children: "Approve all" })), collapsible && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setCollapsed(true), children: "Collapse" })), onDismiss && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: XIcon, onClick: onDismiss, "aria-label": "Dismiss" }))] })] }), _jsx(Box, { sx: { px: 3, pb: 2 }, children: pendingApprovals.map(approval => (_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        py: 1,
+                        px: 2,
+                        mb: 1,
+                        bg: 'canvas.default',
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                    }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: approval.toolName }), approval.toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, ml: 2 }, children: approval.toolDescription }))] }), _jsx(Button, { size: "small", variant: "default", onClick: () => onReview(approval), children: "Review" })] }, approval.id))) })] }));
+}
+export default ToolApprovalBanner;

package/lib/{components/chat/components/elements → chat/tools}/ToolApprovalDialog.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Tool approval dialog component.
  * Shows a dialog for HITL tool approval.
  *
- * @module components/chat/components/elements/ToolApprovalDialog
+ * @module chat/tools/ToolApprovalDialog
  */
 import { useCallback, useState } from 'react';
 import { Box, Button, Text, Heading, FormControl, Checkbox, } from '@primer/react';

package/lib/{components/chat/components/display → chat/tools}/ToolCallDisplay.d.ts

@@ -1,5 +1,4 @@
-import type { ToolCallStatus } from '../base/ChatBase';
-import type { CodeError, ExecutionResult } from '../../types/execution';
+import type { CodeError, ExecutionResult, DisplayToolCallStatus } from '../../types';
 /**
  * Error type classification for display purposes
  */
@@ -14,7 +13,7 @@ export interface ToolCallDisplayProps {
     /** Tool result (when complete) */
     result?: unknown;
     /** Current status */
-    status: ToolCallStatus;
+    status: DisplayToolCallStatus;
     /** Error message if failed (backwards compatible) */
     error?: string;
     /** Rich execution result with detailed error information */
@@ -25,6 +24,16 @@ export interface ToolCallDisplayProps {
     exitCode?: number | null;
     /** Execution/infrastructure error message */
     executionError?: string;
+    /** Whether this tool call requires explicit user approval */
+    approvalRequired?: boolean;
+    /** Approval state for this tool call */
+    approvalState?: 'pending' | 'approved' | 'denied';
+    /** Called when user approves this tool call */
+    onApprove?: () => void;
+    /** Called when user denies this tool call */
+    onDeny?: () => void;
+    /** Loading state for approval actions */
+    approvalLoading?: boolean;
 }
 /**
  * ToolCallDisplay component - Default display for tool calls in chat
@@ -36,5 +45,5 @@ export interface ToolCallDisplayProps {
  * - Color-coded status indicators
  * - Rich error display distinguishing execution errors from code errors
  */
-export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, }: ToolCallDisplayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired, approvalState, onApprove, onDeny, approvalLoading, }: ToolCallDisplayProps): import("react/jsx-runtime").JSX.Element;
 export default ToolCallDisplay;

package/lib/{components/chat/components/display → chat/tools}/ToolCallDisplay.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -7,10 +7,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Default tool call display component.
  * Shows tool execution with collapsible details.
  *
- * @module components/chat/components/display/ToolCallDisplay
+ * @module chat/tools/ToolCallDisplay
  */
-import { useState } from 'react';
-import { Text, Spinner } from '@primer/react';
+import { useEffect, useState } from 'react';
+import { Button, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ChevronDownIcon, ChevronRightIcon, ToolsIcon, CheckCircleIcon, XCircleIcon, ClockIcon, AlertIcon, } from '@primer/octicons-react';
 /**
@@ -20,7 +20,7 @@ function getStatusDisplay(status, errorType) {
     switch (status) {
         case 'inProgress':
             return {
-                icon: _jsx(Spinner, { size: "small" }),
+                icon: _jsx(ClockIcon, { size: 14 }),
                 color: 'attention.fg',
                 label: 'Preparing...',
                 bgColor: 'attention.subtle',
@@ -124,7 +124,7 @@ function getArgsSummary(args) {
  * - Color-coded status indicators
  * - Rich error display distinguishing execution errors from code errors
  */
-export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, }) {
+export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired = false, approvalState, onApprove, onDeny, approvalLoading = false, }) {
     const [isExpanded, setIsExpanded] = useState(false);
     // Determine effective exit code from props or execution result
     const effectiveExitCode = exitCode ?? executionResult?.exit_code;
@@ -143,6 +143,16 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
     const statusDisplay = getStatusDisplay(status, errorType);
     const displayName = formatToolName(toolName);
     const argsSummary = getArgsSummary(args);
+    const resultObject = result && typeof result === 'object'
+        ? result
+        : undefined;
+    const isPendingApproval = approvalState === 'pending' ||
+        (status === 'inProgress' && resultObject?.pending_approval === true);
+    useEffect(() => {
+        if (isPendingApproval) {
+            setIsExpanded(true);
+        }
+    }, [isPendingApproval]);
     // Get error details from various sources (prefer rich error info)
     const effectiveCodeError = codeError || executionResult?.code_error || undefined;
     const effectiveExecutionError = executionError || executionResult?.execution_error || undefined;
@@ -197,7 +207,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     fontSize: 0,
                                     fontWeight: 'medium',
                                     color: statusDisplay.color,
-                                }, children: statusDisplay.label })] }), !isExpanded && (_jsx(Text, { sx: {
+                                }, children: isPendingApproval ? 'Awaiting Approval' : statusDisplay.label })] }), !isExpanded && (_jsx(Text, { sx: {
                             fontSize: 0,
                             color: 'fg.muted',
                             overflow: 'hidden',
@@ -255,7 +265,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         wordBreak: 'break-word',
                                     }, children: typeof result === 'string'
                                         ? result
-                                        : JSON.stringify(result, null, 2) }) })] })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsx(Text, { sx: { color: 'success.fg', fontSize: 1 }, children: "Approved. Executing tool." })) : approvalState === 'denied' ? (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: "Denied. Tool will not run." })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: "This tool requires your approval to run." }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: "Deny" })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',

package/lib/chat/tools/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Display components barrel export.
+ *
+ * @module chat/tools
+ */
+export { ToolCallDisplay, type ToolCallDisplayProps, type ErrorType, } from './ToolCallDisplay';
+export { ToolApprovalBanner, type ToolApprovalBannerProps, type PendingApproval, } from './ToolApprovalBanner';
+export { ToolApprovalDialog, useToolApprovalDialog, type ToolApprovalDialogProps, } from './ToolApprovalDialog';

package/lib/{components/chat/components/display → chat/tools}/index.js

@@ -5,6 +5,8 @@
 /**
  * Display components barrel export.
  *
- * @module components/chat/components/display
+ * @module chat/tools
  */
 export { ToolCallDisplay, } from './ToolCallDisplay';
+export { ToolApprovalBanner, } from './ToolApprovalBanner';
+export { ToolApprovalDialog, useToolApprovalDialog, } from './ToolApprovalDialog';

package/lib/chat/usage/TokenUsageBar.d.ts

@@ -0,0 +1,8 @@
+import type { ContextSnapshotData } from '../../types/context';
+export interface TokenUsageBarProps {
+    /** Agent usage data from the context-snapshot API */
+    agentUsage: ContextSnapshotData;
+    /** Horizontal padding to match the chat layout */
+    padding: number;
+}
+export declare function TokenUsageBar({ agentUsage, padding }: TokenUsageBarProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/usage/TokenUsageBar.js

@@ -0,0 +1,213 @@
+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.
+ */
+/**
+ * TokenUsageBar — Compact bar showing context-window usage with a
+ * tiny pie chart, session totals, and a hover overlay with category
+ * breakdown.
+ *
+ * @module chat/elements/TokenUsageBar
+ */
+import { useRef, useState } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import ReactECharts from 'echarts-for-react';
+import { formatTokenCount } from '../../utils';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function TokenUsageBar({ agentUsage, padding }) {
+    // State for context pie chart overlay
+    const [contextOverlayOpen, setContextOverlayOpen] = useState(false);
+    const contextAnchorRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
+    const hasTurn = agentUsage.turnUsage &&
+        (agentUsage.turnUsage.inputTokens > 0 ||
+            agentUsage.turnUsage.outputTokens > 0);
+    const hasSession = agentUsage.sessionUsage &&
+        (agentUsage.sessionUsage.inputTokens > 0 ||
+            agentUsage.sessionUsage.outputTokens > 0);
+    // Build pie chart data
+    const usedTokens = agentUsage.totalTokens;
+    const windowTokens = agentUsage.contextWindow;
+    const freeTokens = Math.max(0, windowTokens - usedTokens);
+    const pct = windowTokens > 0 ? (usedTokens / windowTokens) * 100 : 0;
+    // Build category breakdown from distribution or individual fields
+    const categories = [];
+    if (agentUsage.distribution?.children?.length) {
+        const colorMap = {
+            'System Prompts': '#8250df',
+            'Tool Definitions': '#bf8700',
+            'User Messages': '#0969da',
+            'Assistant Messages': '#1a7f37',
+            'Tool Usage': '#cf222e',
+        };
+        for (const child of agentUsage.distribution.children) {
+            categories.push({
+                name: child.name,
+                value: child.value,
+                color: colorMap[child.name] || '#6e7781',
+            });
+        }
+    }
+    else {
+        if (agentUsage.systemPromptTokens > 0) {
+            categories.push({
+                name: 'System Prompts',
+                value: agentUsage.systemPromptTokens,
+                color: '#8250df',
+            });
+        }
+        if (agentUsage.toolTokens > 0) {
+            categories.push({
+                name: 'Tool Definitions',
+                value: agentUsage.toolTokens,
+                color: '#bf8700',
+            });
+        }
+        const messageTokens = (agentUsage.userMessageTokens || 0) +
+            (agentUsage.assistantMessageTokens || 0);
+        if (messageTokens > 0) {
+            categories.push({
+                name: 'Messages',
+                value: messageTokens,
+                color: '#0969da',
+            });
+        }
+        const toolResultTokens = (agentUsage.toolCallTokens || 0) + (agentUsage.toolReturnTokens || 0);
+        if (toolResultTokens > 0) {
+            categories.push({
+                name: 'Tool Results',
+                value: toolResultTokens,
+                color: '#cf222e',
+            });
+        }
+    }
+    // Tiny filled pie chart options
+    const pieColor = pct > 90 ? '#cf222e' : pct > 70 ? '#bf8700' : '#0969da';
+    const freeSliceColor = 'var(--bgColor-muted, #f6f8fa)';
+    const freeSliceOverlayColor = 'var(--borderColor-default, #d1d9e0)';
+    const miniPieOption = {
+        animation: false,
+        series: [
+            {
+                type: 'pie',
+                radius: [0, '90%'],
+                center: ['50%', '50%'],
+                silent: true,
+                label: { show: false },
+                labelLine: { show: false },
+                data: [
+                    { value: usedTokens, itemStyle: { color: pieColor } },
+                    { value: freeTokens, itemStyle: { color: freeSliceColor } },
+                ],
+            },
+        ],
+    };
+    // Overlay detail pie options (donut for category breakdown)
+    const overlayPieOption = {
+        animation: false,
+        series: [
+            {
+                type: 'pie',
+                radius: ['45%', '80%'],
+                center: ['50%', '50%'],
+                silent: true,
+                label: { show: false },
+                labelLine: { show: false },
+                itemStyle: {
+                    borderColor: 'var(--bgColor-default, #ffffff)',
+                    borderWidth: 1,
+                },
+                data: [
+                    ...categories.map(c => ({
+                        value: c.value,
+                        itemStyle: { color: c.color },
+                    })),
+                    { value: freeTokens, itemStyle: { color: freeSliceOverlayColor } },
+                ],
+            },
+        ],
+    };
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: 2,
+            py: 1,
+            px: padding,
+            bg: 'canvas.subtle',
+            flexWrap: 'nowrap',
+            overflow: 'visible',
+            whiteSpace: 'nowrap',
+            minWidth: 0,
+        }, children: [_jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, onMouseEnter: () => {
+                    if (hoverTimeoutRef.current)
+                        clearTimeout(hoverTimeoutRef.current);
+                    hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(true), 150);
+                }, onMouseLeave: () => {
+                    if (hoverTimeoutRef.current)
+                        clearTimeout(hoverTimeoutRef.current);
+                    hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(false), 250);
+                }, children: [_jsx(Box, { ref: contextAnchorRef, sx: {
+                            cursor: 'pointer',
+                            width: 20,
+                            height: 20,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: '50%',
+                        }, children: _jsx(ReactECharts, { option: miniPieOption, style: { width: 18, height: 18 }, opts: { renderer: 'svg' } }) }), contextOverlayOpen && (_jsxs(Box, { sx: {
+                            position: 'absolute',
+                            bottom: '100%',
+                            left: 0,
+                            mb: 1,
+                            p: 3,
+                            width: 260,
+                            bg: 'canvas.overlay',
+                            borderRadius: 2,
+                            boxShadow: 'shadow.large',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            zIndex: 100,
+                        }, children: [_jsx(Text, { sx: {
+                                    fontWeight: 'bold',
+                                    fontSize: 1,
+                                    color: 'fg.default',
+                                    display: 'block',
+                                    mb: 2,
+                                }, children: "Context Window" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default' }, children: formatTokenCount(usedTokens) }), ' / ', formatTokenCount(windowTokens), ' tokens'] }), _jsxs(Text, { sx: {
+                                    fontSize: 0,
+                                    color: pct > 90
+                                        ? 'danger.fg'
+                                        : pct > 70
+                                            ? 'attention.fg'
+                                            : 'fg.muted',
+                                    fontWeight: 'semibold',
+                                    display: 'block',
+                                    mb: 2,
+                                }, children: ['• ', pct.toFixed(0), "%"] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mb: 2 }, children: _jsx(ReactECharts, { option: overlayPieOption, style: { width: 80, height: 80 }, opts: { renderer: 'svg' } }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: categories.map(cat => {
+                                    const catPct = usedTokens > 0 ? (cat.value / usedTokens) * 100 : 0;
+                                    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                                                    width: 8,
+                                                    height: 8,
+                                                    borderRadius: '50%',
+                                                    bg: cat.color,
+                                                    flexShrink: 0,
+                                                } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', flex: 1 }, children: cat.name }), _jsxs(Text, { sx: {
+                                                    fontSize: 0,
+                                                    color: 'fg.default',
+                                                    fontWeight: 'semibold',
+                                                }, children: [catPct.toFixed(1), "%"] })] }, cat.name));
+                                }) }), pct > 70 && (_jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    color: 'attention.fg',
+                                    display: 'block',
+                                    mt: 2,
+                                    fontStyle: 'italic',
+                                }, children: "Quality may decline as limit nears." }))] }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(agentUsage.totalTokens) }), ' / ', formatTokenCount(agentUsage.contextWindow), ' ctx'] }), hasSession && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· ', formatTokenCount(agentUsage.sessionUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.sessionUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), hasTurn && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· turn ', formatTokenCount(agentUsage.turnUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.turnUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] }))] }));
+}