@parhelia/core 0.1.11069 → 0.1.11141

package/README.md

@@ -1,34 +1,34 @@
-# @parhelia/core
-
-Core components and utilities for the Parhelia visual content editor for Sitecore.
-
-## Installation
-
-```bash
-npm install @parhelia/core
-```
-
-## Usage
-
-```typescript
-import { /* components */ } from '@parhelia/core';
-import '@parhelia/core/styles.css';
-```
-
-## Features
-
-- Visual editor components
-- UI component library
-- Content management utilities
-- Agent-based AI assistance
-- Page wizard functionality
-- Field editing capabilities
-
-## License
-
-See LICENSE file for details.
-
-## Documentation
-
-For complete documentation, visit [https://parhelia.ai](https://parhelia.ai)
-
+# @parhelia/core
+
+Core components and utilities for the Parhelia visual content editor for Sitecore.
+
+## Installation
+
+```bash
+npm install @parhelia/core
+```
+
+## Usage
+
+```typescript
+import { /* components */ } from '@parhelia/core';
+import '@parhelia/core/styles.css';
+```
+
+## Features
+
+- Visual editor components
+- UI component library
+- Content management utilities
+- Agent-based AI assistance
+- Page wizard functionality
+- Field editing capabilities
+
+## License
+
+See LICENSE file for details.
+
+## Documentation
+
+For complete documentation, visit [https://parhelia.ai](https://parhelia.ai)
+

package/dist/components/ui/dialog.js

@@ -16,10 +16,10 @@ function DialogClose({ ...props }) {
     return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className), ...props }));
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[100] bg-black/50", className), ...props }));
 }
 function DialogContent({ className, children, showCloseButton = true, overlayClassName, ...props }) {
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border shadow-lg duration-200", className), "data-testid": "dialog-content", ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-testid": "dialog-close", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[101] flex w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border shadow-lg duration-200", className), "data-testid": "dialog-content", ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-testid": "dialog-close", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn("border-gray-3 flex flex-col gap-2 border-b px-6 py-5 text-center sm:text-left", className), ...props }));

package/dist/components/ui/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"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"}

package/dist/editor/ai/AgentTerminal.js

@@ -10,6 +10,7 @@ import { AiResponseMessage } from "./AiResponseMessage";
 import { AgentCostDisplay } from "./AgentCostDisplay";
 import { ContextInfoBar } from "./ContextInfoBar";
 import { AgentDocumentList } from "./AgentDocumentList";
+import { AgentEditOperationsPanel } from "./EditOperationsPanel";
 import { getComponentById } from "../componentTreeHelper";
 import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { SecretAgentIcon } from "../ui/Icons";
@@ -553,6 +554,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const recognitionRef = useRef(null);
     const prevPlaceholderRef = useRef(null);
     const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
+    const [showCompressionPopover, setShowCompressionPopover] = useState(false);
     const isWaitingRef = useRef(false);
     useEffect(() => {
         isWaitingRef.current = isWaitingForResponse;
@@ -581,7 +583,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 const hasPendingSuffix = (tc.functionName || "").includes("(pending approval)");
                 const isApproved = (tc.functionName || "").includes("(approved)");
                 const isRejected = (tc.functionName || "").includes("(rejected)");
-                if ((hasApprovalMetadata || hasPendingSuffix) && !isApproved && !isRejected) {
+                if ((hasApprovalMetadata || hasPendingSuffix) &&
+                    !isApproved &&
+                    !isRejected) {
                     pending.push({
                         messageId: tc.messageId || msg.id,
                         dbMessageId: tc.dbMessageId,
@@ -669,6 +673,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [costLimitExceeded, setCostLimitExceeded] = useState(null);
     // Live running totals from backend status updates (tokenUsage)
     const [liveTotals, setLiveTotals] = useState(null);
+    // Context window status from backend (extracted from delta cost object)
+    const [contextWindowStatus, setContextWindowStatus] = useState(null);
     // Flag to track when we should create a new message
     const shouldCreateNewMessage = useRef(false);
     // Keep a ref to the current messages for immediate access
@@ -685,6 +691,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const subscribedAgentIdRef = useRef(null);
     // Cache mode/model changes made while the agent is still "new" (not yet persisted)
     const pendingSettingsRef = useRef(null);
+    // Track whether textarea should maintain focus during re-renders
+    const shouldMaintainFocusRef = useRef(false);
     // Auto-scroll to bottom when new messages arrive
     const scrollToBottom = useCallback(() => {
         const container = messagesContainerRef.current;
@@ -936,6 +944,19 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 setIsWaitingForResponse(false);
                 shouldCreateNewMessage.current = false;
             }
+            // Extract context window info from cost object
+            if (cost.contextWindow && cost.contextUsed) {
+                const contextWindowValue = Number(cost.contextWindow);
+                const contextUsedValue = Number(cost.contextUsed);
+                if (contextWindowValue > 0 && contextUsedValue >= 0) {
+                    setContextWindowStatus({
+                        contextWindowTokens: contextWindowValue,
+                        estimatedInputTokens: contextUsedValue,
+                        contextUsedPercent: (contextUsedValue / contextWindowValue) * 100,
+                        model: agentData?.model || agent?.model || "",
+                    });
+                }
+            }
         }
         // Always call setMessages and handle all logic in the callback with latest messages
         setMessages((prev) => {
@@ -1104,6 +1125,19 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             if (anyNonZero) {
                 setLiveTotals(nextTotals);
             }
+            // Extract context window info from cost object
+            if (cost.contextWindow && cost.contextUsed) {
+                const contextWindowValue = Number(cost.contextWindow);
+                const contextUsedValue = Number(cost.contextUsed);
+                if (contextWindowValue > 0 && contextUsedValue >= 0) {
+                    setContextWindowStatus({
+                        contextWindowTokens: contextWindowValue,
+                        estimatedInputTokens: contextUsedValue,
+                        contextUsedPercent: (contextUsedValue / contextWindowValue) * 100,
+                        model: agentData?.model || agent?.model || "",
+                    });
+                }
+            }
         }
         else {
             // Fallback: legacy aggregated totals included in the tool result data
@@ -1373,6 +1407,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 language: item.language,
                                 version: item.version,
                                 name: editContext?.contentEditorItem?.name,
+                                path: editContext?.contentEditorItem?.path,
                             },
                         ],
                         components: editContext?.selection?.length && item
@@ -1571,6 +1606,18 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             })();
             // For existing agents, use database metadata or none
             setAgentMetadata(sanitizeAgentMetadata(parsedMeta));
+            // Initialize context window status from loaded agent data
+            if (agentData.contextUsedTokens !== undefined) {
+                setContextWindowStatus({
+                    contextWindowTokens: agentData.contextWindowTokens ?? 0,
+                    estimatedInputTokens: agentData.contextUsedTokens,
+                    contextUsedPercent: agentData.contextWindowTokens
+                        ? (agentData.contextUsedTokens / agentData.contextWindowTokens) *
+                            100
+                        : 0,
+                    model: agentData.model,
+                });
+            }
         }
         catch (err) {
             console.error("❌ Failed to load agent:", err);
@@ -1962,19 +2009,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     setIsConnecting(false);
                     return;
                 }
-                if (statusData?.state === "contextWindow") {
-                    window.__agentContextWindowStatus = {
-                        model: statusData.model,
-                        normalizedModel: statusData.normalizedModel,
-                        contextWindowTokens: statusData.contextWindowTokens,
-                        maxCompletionTokens: statusData.maxCompletionTokens,
-                        estimatedInputTokens: statusData.estimatedInputTokens,
-                        messageCount: statusData.messageCount,
-                        contextUsedPercent: statusData.contextUsedPercent,
-                    };
-                    setMessages((prev) => [...prev]);
-                    return;
-                }
                 if (statusData?.state === "contextChanged") {
                     // Server sends additionalData directly (with todoList inside)
                     const serverAdditionalData = statusData.additionalData || statusData.AdditionalData || {};
@@ -2234,6 +2268,14 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             scrollToBottom();
         }
     }, [messages, scrollToBottom, shouldAutoScroll]);
+    // Maintain focus on textarea when messages update (prevents focus loss during agent responses)
+    useEffect(() => {
+        if (shouldMaintainFocusRef.current &&
+            textareaRef.current &&
+            !activePlaceholderInput) {
+            textareaRef.current.focus();
+        }
+    }, [messages, activePlaceholderInput]);
     // Persist any pending settings (mode/model) once an agent exists server-side
     const persistPendingSettingsIfNeeded = useCallback(async () => {
         try {
@@ -2345,6 +2387,31 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     console.warn(`Context factory not found: ${factoryName}. Proceeding without it.`);
                 }
             }
+            // In live context mode, compute fresh context from editor state to avoid stale agentMetadata
+            // The UI (ContextInfoBar) always shows live context, so we must send matching context to AI
+            let effectiveContext = agentMetadata;
+            try {
+                const normalizedAgentProfileId = agent?.profileId?.toLowerCase();
+                const profile = activeProfile ||
+                    profiles.find((p) => p.id?.toLowerCase() === normalizedAgentProfileId);
+                const isLiveMode = profile?.editorContextMode === "live";
+                if (isLiveMode && typeof buildCurrentContext === "function") {
+                    const freshContext = buildCurrentContext();
+                    if (freshContext) {
+                        // Merge fresh live context with existing metadata to preserve comments, additionalData, etc.
+                        effectiveContext = {
+                            ...(agentMetadata || {}),
+                            items: freshContext.items,
+                            currentItemId: freshContext.currentItemId,
+                            components: freshContext.components,
+                            field: freshContext.field,
+                        };
+                    }
+                }
+            }
+            catch (e) {
+                console.warn("[AgentTerminal] Failed to compute live context:", e);
+            }
             const request = {
                 agentId: agentId,
                 message: savedPrompt,
@@ -2353,7 +2420,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 profile: activeProfile?.name || profiles[0]?.name || "",
                 model: selectedModelId,
                 mode: mode,
-                context: canonicalizeAgentMetadata(agentMetadata), // Canonicalize to ensure complete field structure
+                context: canonicalizeAgentMetadata(effectiveContext), // Use fresh live context when in live mode
                 deterministic: deterministicFlags.deterministic,
                 seed: deterministicFlags.seed,
             };
@@ -2533,6 +2600,30 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     console.warn(`Context factory not found: ${factoryName}. Proceeding without it.`);
                 }
             }
+            // In live context mode, compute fresh context from editor state to avoid stale agentMetadata
+            let effectiveContext = agentMetadata;
+            try {
+                const normalizedAgentProfileId = agent?.profileId?.toLowerCase();
+                const profile = activeProfile ||
+                    profiles.find((p) => p.id?.toLowerCase() === normalizedAgentProfileId);
+                const isLiveMode = profile?.editorContextMode === "live";
+                if (isLiveMode && typeof buildCurrentContext === "function") {
+                    const freshContext = buildCurrentContext();
+                    if (freshContext) {
+                        // Merge fresh live context with existing metadata to preserve comments, additionalData, etc.
+                        effectiveContext = {
+                            ...(agentMetadata || {}),
+                            items: freshContext.items,
+                            currentItemId: freshContext.currentItemId,
+                            components: freshContext.components,
+                            field: freshContext.field,
+                        };
+                    }
+                }
+            }
+            catch (e) {
+                console.warn("[AgentTerminal] Failed to compute live context for quick message:", e);
+            }
             const request = {
                 agentId: agent.id,
                 message: savedPrompt,
@@ -2541,7 +2632,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 profile: activeProfile?.name || profiles[0]?.name || "",
                 model: selectedModelId,
                 mode: mode,
-                context: canonicalizeAgentMetadata(agentMetadata), // Canonicalize to ensure complete field structure
+                context: canonicalizeAgentMetadata(effectiveContext), // Use fresh live context when in live mode
                 deterministic: deterministicFlags.deterministic,
                 seed: deterministicFlags.seed,
             };
@@ -2686,8 +2777,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     language: item.language,
                     version: item.version,
                     name: editContext?.contentEditorItem?.name,
+                    path: editContext?.contentEditorItem?.path,
                 },
             ],
+            currentItemId: item.id, // ID of the currently loaded item user is viewing
             components: editContext?.selection?.length && item
                 ? editContext.selection.map((componentId) => ({
                     componentId,
@@ -2764,6 +2857,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 const merged = {
                     ...existingMeta,
                     items: currentCtx.items ? [...currentCtx.items] : undefined,
+                    currentItemId: currentCtx.currentItemId,
                     components: currentCtx.components
                         ? [...currentCtx.components]
                         : undefined,
@@ -2784,8 +2878,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 const sanitized = sanitizeAgentMetadata(merged);
                 setAgentMetadata(sanitized ? { ...sanitized } : null);
                 // If the agent exists server-side, persist context as well
+                // Defer the server update to avoid blocking rendering
                 if (agent?.id && agent.status !== "new") {
-                    await updateAgentContext(agent.id, merged);
+                    // Use requestIdleCallback or setTimeout to defer the update, allowing React to render first
+                    if (typeof requestIdleCallback !== "undefined") {
+                        requestIdleCallback(async () => {
+                            await updateAgentContext(agent.id, merged);
+                        }, { timeout: 1000 });
+                    }
+                    else {
+                        // Fallback for browsers without requestIdleCallback
+                        setTimeout(async () => {
+                            await updateAgentContext(agent.id, merged);
+                        }, 0);
+                    }
                 }
             }
             catch (err) {
@@ -3019,7 +3125,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             }
                             // Content exists - show dots WITHOUT icon (inline at bottom)
                             return (_jsxs("div", { className: "flex gap-3 px-4 pb-4", children: [_jsx("div", { className: "w-7 flex-shrink-0" }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400" })] }) })] }));
-                        })(), renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), !hideContext && renderContextInfoBar(), !hideContext && agent?.id && activeProfile && (_jsx(AgentDocumentList, { agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), !hideContext && (_jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata })), queuedPrompts.length > 0 && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", children: _jsxs("div", { className: "px-4 pt-3 pb-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsxs("span", { className: "text-xs font-semibold text-amber-900", children: ["Queued Messages (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "space-y-2", children: queuedPrompts.map((qp) => (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-xs", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "break-words whitespace-pre-wrap text-gray-600", children: qp.prompt }), qp.createdDate && (_jsx("div", { className: "mt-1.5 text-[10px] text-gray-400", children: formatTime(new Date(qp.createdDate)) }))] }) }) }, qp.id))) })] }) })), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [activePlaceholderInput ? (
+                        })(), renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), !hideContext && renderContextInfoBar(), !hideContext && agent?.id && activeProfile && (_jsx(AgentDocumentList, { agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), !hideContext && (_jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata })), !hideContext && agent?.id && (_jsx(AgentEditOperationsPanel, { agentId: agent.id })), queuedPrompts.length > 0 && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", children: _jsxs("div", { className: "px-4 pt-3 pb-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsxs("span", { className: "text-xs font-semibold text-amber-900", children: ["Queued Messages (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "space-y-2", children: queuedPrompts.map((qp) => (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-xs", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "break-words whitespace-pre-wrap text-gray-600", children: qp.prompt }), qp.createdDate && (_jsx("div", { className: "mt-1.5 text-[10px] text-gray-400", children: formatTime(new Date(qp.createdDate)) }))] }) }) }, qp.id))) })] }) })), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [activePlaceholderInput ? (
                     // Placeholder Input (from quick actions)
                     // Show buttons when hideBottomControls is true (e.g., splash screen) since normal submit area is hidden
                     _jsx(PlaceholderInput, { ref: placeholderInputRef, text: activePlaceholderInput.text, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: setAllPlaceholdersFilled, onComplete: (filledText) => {
@@ -3081,7 +3187,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 if (currentHistoryIndex !== -1) {
                                     setCurrentHistoryIndex(-1);
                                 }
-                            }, onKeyDown: handleKeyPress, placeholder: inputPlaceholder, className: "h-[80px] flex-1 resize-none overflow-y-auto text-xs", "data-testid": "agent-terminal-prompt", disabled: isSubmitting }) })), !hideBottomControls && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-stretch justify-between gap-2", children: [_jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-start gap-2", children: [_jsxs(Tooltip, { delayDuration: 400, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("select", { className: `h-5 rounded border px-1.5 text-[10px] ${mode === "read-only"
+                            }, onKeyDown: handleKeyPress, onFocus: () => {
+                                shouldMaintainFocusRef.current = true;
+                            }, onBlur: () => {
+                                shouldMaintainFocusRef.current = false;
+                            }, placeholder: inputPlaceholder, className: "h-[80px] flex-1 resize-none overflow-y-auto text-xs", "data-testid": "agent-terminal-prompt", disabled: isSubmitting }) })), !hideBottomControls && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-stretch justify-between gap-2", children: [_jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-start gap-2", children: [_jsxs(Tooltip, { delayDuration: 400, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("select", { className: `h-5 rounded border px-1.5 text-[10px] ${mode === "read-only"
                                                                 ? "border-green-300 bg-green-50 text-green-700"
                                                                 : mode === "supervised"
                                                                     ? "border-amber-300 bg-amber-50 text-amber-700"
@@ -3198,7 +3308,41 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                         (!!prompt &&
                                                             /\{([^}]+)\}|<([^>]+)>/.test(prompt) &&
                                                             !allPlaceholdersFilled) ||
-                                                        (!!activePlaceholderInput && !allPlaceholdersFilled)), size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isExecuting ? "Stop" : "Send", "aria-label": isExecuting ? "Stop" : "Send", "data-testid": "agent-send-stop-button", "data-executing": isExecuting ? "true" : "false", children: isExecuting ? (_jsx(Square, { className: "size-3", strokeWidth: 1 })) : (_jsx(Send, { className: "size-3", strokeWidth: 1 })) })] })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 text-[10px] text-gray-500", children: [_jsx(AgentCostDisplay, { totalTokens: liveTotals
+                                                        (!!activePlaceholderInput && !allPlaceholdersFilled)), size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isExecuting ? "Stop" : "Send", "aria-label": isExecuting ? "Stop" : "Send", "data-testid": "agent-send-stop-button", "data-executing": isExecuting ? "true" : "false", children: isExecuting ? (_jsx(Square, { className: "size-3", strokeWidth: 1 })) : (_jsx(Send, { className: "size-3", strokeWidth: 1 })) })] })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 text-[10px] text-gray-500", children: [agent?.id &&
+                                        (() => {
+                                            const hasData = contextWindowStatus &&
+                                                contextWindowStatus.contextWindowTokens;
+                                            const percentValue = hasData
+                                                ? typeof contextWindowStatus.contextUsedPercent === "number"
+                                                    ? contextWindowStatus.contextUsedPercent
+                                                    : 0
+                                                : 0;
+                                            const pct = hasData ? `${percentValue.toFixed(1)}%` : "—";
+                                            // Color based on usage level
+                                            const getContextColor = (percent) => {
+                                                if (percent < 50)
+                                                    return "#22c55e"; // green-500
+                                                if (percent < 80)
+                                                    return "#f59e0b"; // amber-500
+                                                return "#ef4444"; // red-500
+                                            };
+                                            const contextColor = hasData
+                                                ? getContextColor(percentValue)
+                                                : "#9ca3af"; // gray-400 for no data
+                                            // SVG circle parameters - radius chosen so circumference ≈ 100
+                                            const radius = 15.915;
+                                            // Helper function to format tokens as "k"
+                                            const formatTokens = (tokens) => {
+                                                if (tokens >= 1000) {
+                                                    return `${(tokens / 1000).toFixed(1)}k`;
+                                                }
+                                                return tokens.toString();
+                                            };
+                                            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "flex cursor-help items-center", children: _jsxs("svg", { className: "h-3 w-3", viewBox: "0 0 36 36", "aria-hidden": "true", children: [_jsx("circle", { cx: "18", cy: "18", r: radius, fill: "none", stroke: "#e5e7eb", strokeWidth: "4" }), hasData && (_jsx("circle", { cx: "18", cy: "18", r: radius, fill: "none", stroke: contextColor, strokeWidth: "4", strokeDasharray: `${percentValue} 100`, strokeLinecap: "round", style: {
+                                                                            transformOrigin: "center",
+                                                                            transform: "rotate(-90deg)",
+                                                                        } })), !hasData && (_jsx("circle", { cx: "18", cy: "18", r: radius, fill: "none", stroke: contextColor, strokeWidth: "4", strokeDasharray: "0 100", strokeLinecap: "round", opacity: 0.5 }))] }) }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: hasData && contextWindowStatus ? (_jsxs("div", { className: "max-w-[320px] space-y-1 text-xs", children: [contextWindowStatus.model && (_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Model:" }), " ", contextWindowStatus.model] })), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Context window:" }), " ", formatTokens(contextWindowStatus.estimatedInputTokens || 0), " ", "/", " ", formatTokens(contextWindowStatus.contextWindowTokens), " ", "tokens"] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Used:" }), " ", pct] })] })) : (_jsx("div", { className: "max-w-[320px] text-xs", children: "Context window usage will appear here when the agent starts processing." })) })] }));
+                                        })(), agent?.compressionMarkerIndex != null && (_jsxs(Popover, { open: showCompressionPopover, onOpenChange: setShowCompressionPopover, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "cursor-pointer rounded border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] text-blue-700 transition-colors hover:bg-blue-100", onClick: () => setShowCompressionPopover(!showCompressionPopover), children: "Compressed" }) }), _jsx(PopoverContent, { className: "w-96 p-4", align: "start", side: "top", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Conversation Compressed" }), _jsxs("p", { className: "mt-1 text-xs text-gray-600", children: ["First ", agent.compressionMarkerIndex, " messages have been summarized to reduce context usage."] })] }), agent.compressedSummary && (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs font-medium text-gray-700", children: "Summary:" }), _jsx("div", { className: "max-h-64 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-3 text-xs whitespace-pre-wrap text-gray-700", children: agent.compressedSummary })] }))] }) })] })), _jsx(AgentCostDisplay, { totalTokens: liveTotals
                                             ? {
                                                 input: liveTotals.input,
                                                 output: liveTotals.output,
@@ -3210,29 +3354,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                 cacheWriteCost: liveTotals.cacheWriteCost ?? 0,
                                                 totalCost: liveTotals.totalCost,
                                             }
-                                            : totalTokens, costLimit: effectiveCostLimit }), (() => {
-                                        try {
-                                            const s = window.__agentContextWindowStatus;
-                                            if (!s || !s.contextWindowTokens)
-                                                return null;
-                                            const pct = typeof s.contextUsedPercent === "number"
-                                                ? `${s.contextUsedPercent.toFixed(1)}%`
-                                                : undefined;
-                                            // Helper function to format tokens as "k"
-                                            const formatTokens = (tokens) => {
-                                                if (tokens >= 1000) {
-                                                    return `${(tokens / 1000).toFixed(1)}k`;
-                                                }
-                                                return tokens.toString();
-                                            };
-                                            if (!pct)
-                                                return null;
-                                            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "cursor-help rounded border border-gray-200 bg-gray-50 px-2 py-0.5", children: ["Context: ", pct] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Model:" }), " ", s.model, s.normalizedModel && ` (${s.normalizedModel})`] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Context window:" }), " ", formatTokens(s.estimatedInputTokens || 0), " /", " ", formatTokens(s.contextWindowTokens), " tokens"] }), typeof s.maxCompletionTokens === "number" && (_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Max completion:" }), " ", formatTokens(s.maxCompletionTokens), " tokens"] })), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Used:" }), " ", pct] })] }) })] }));
-                                        }
-                                        catch {
-                                            return null;
-                                        }
-                                    })(), activeProfile && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-gray-400 hover:text-gray-600", onClick: async () => {
+                                            : totalTokens, costLimit: effectiveCostLimit }), activeProfile && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-gray-400 hover:text-gray-600", onClick: async () => {
                                                         if (!editContext || !activeProfile?.id)
                                                             return;
                                                         // Load the profile item using editContext