@parhelia/core 0.1.12882 → 0.1.12883

package/dist/editor/ai/InlineAiDialog.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useRef, useEffect, useLayoutEffect, useMemo, } from "react";
-import { Sparkles, Check, X, SendHorizonal, Wand2, RotateCcw, Maximize2, History, Cpu, RotateCw, StopCircle, Bug, } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect, useMemo, } from "react";
+import { Check, X, ArrowUp, ChevronDown, ChevronLeft, Lightbulb, LoaderCircle, } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import { Badge } from "../../components/ui/badge";
 import { Textarea } from "../../components/ui/textarea";
@@ -15,9 +15,11 @@ import { subscribeAgent as subscribeAgentRegistry } from "../services/agentSubsc
 import { getAiTextEditPrompts, getEditorSettings, } from "../services/systemService";
 import { loadAiProfiles } from "../services/aiService";
 import { localStorageService } from "../services/localStorageService";
+import { diffWords } from "diff";
 // Default Profile ID for the Inline Text Editor profile
 const DEFAULT_INLINE_TEXT_EDITOR_PROFILE_ID = "8e53c90c-2eac-476b-b03d-d0c2cfbbcd8a";
 const AI_TEXT_EDIT_MODELS_STORAGE_KEY = "aiTextEdit.selectedModelIds";
+const START_AGENT_TIMEOUT_MS = 15_000;
 /** Normalize profile ID to a stable key (lowercase, no braces) so storage works regardless of API casing. */
 function normalizeProfileIdForStorage(profileId) {
     return profileId.replace(/^\{|\}$/g, "").toLowerCase();
@@ -38,7 +40,7 @@ function getStoredModelIds(profileId) {
                 }
             }
         }
-        return Array.isArray(ids) && ids.length > 0 ? ids : null;
+        return Array.isArray(ids) ? ids : null;
     }
     catch {
         return null;
@@ -65,10 +67,29 @@ function setStoredModelIds(profileId, modelIds) {
         // ignore
     }
 }
-const AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION = `Return ONLY valid JSON (no markdown, no code fences, no extra text).
+function isActiveModelRunStatus(status) {
+    return (status === "pending" || status === "thinking" || status === "streaming");
+}
+const AI_TEXT_EDIT_SINGLE_RESPONSE_FORMAT_INSTRUCTION = `Return ONLY valid JSON (no markdown, no code fences, no extra text).
 Use exactly one of these shapes:
 {"replacementText":"<the modified text>"}
 {"error":"<short explanation of why you cannot complete this request>"}`;
+function normalizeAiTextEditResultCount(resultCount) {
+    return typeof resultCount === "number" && Number.isFinite(resultCount)
+        ? Math.max(1, Math.min(20, Math.floor(resultCount)))
+        : 1;
+}
+function getAiTextEditResponseFormatInstruction(resultCount) {
+    const normalizedResultCount = normalizeAiTextEditResultCount(resultCount);
+    if (normalizedResultCount <= 1) {
+        return AI_TEXT_EDIT_SINGLE_RESPONSE_FORMAT_INSTRUCTION;
+    }
+    return `Return ONLY valid JSON (no markdown, no code fences, no extra text).
+Use exactly one of these shapes:
+{"replacementTexts":["<result 1>","<result 2>"]}
+{"error":"<short explanation of why you cannot complete this request>"}
+Return exactly ${normalizedResultCount} results in replacementTexts. Each array item must be a complete standalone replacement/insert text. Do not include numbering or bullets inside the values.`;
+}
 function extractJsonObjectCandidates(input) {
     const candidates = [];
     for (let start = input.indexOf("{"); start >= 0; start = input.indexOf("{", start + 1)) {
@@ -170,6 +191,12 @@ function coerceAiTextEditResponse(parsed) {
     if (typeof parsedObj.replacementText === "string") {
         return { replacementText: parsedObj.replacementText };
     }
+    if (Array.isArray(parsedObj.replacementTexts)) {
+        const replacementTexts = parsedObj.replacementTexts.filter((value) => typeof value === "string");
+        if (replacementTexts.length > 0) {
+            return { replacementTexts };
+        }
+    }
     return null;
 }
 function tryParseAiTextEditJson(json) {
@@ -201,7 +228,9 @@ export function parseAiTextEditResponse(raw) {
             if (!parsed || typeof parsed !== "object") {
                 return { error: "AI returned an invalid response format." };
             }
-            return { error: "AI response is missing `replacementText` or `error`." };
+            return {
+                error: "AI response is missing `replacementText`, `replacementTexts`, or `error`.",
+            };
         }
         catch {
             // Fall through to candidate extraction for mixed prose/JSON responses.
@@ -244,11 +273,69 @@ function extractAgentErrorMessage(message) {
     }
     return null;
 }
+function withTimeout(promise, timeoutMs, timeoutMessage) {
+    return new Promise((resolve, reject) => {
+        const timeoutId = window.setTimeout(() => {
+            reject(new Error(timeoutMessage));
+        }, timeoutMs);
+        promise.then((value) => {
+            window.clearTimeout(timeoutId);
+            resolve(value);
+        }, (error) => {
+            window.clearTimeout(timeoutId);
+            reject(error);
+        });
+    });
+}
+/**
+ * Shared instruction box: a rounded composer with the send button inside the
+ * textarea shell and the model selector below it.
+ */
+function InstructionComposer({ inputRef, value, onChange, onSubmit, onKeyDown, placeholder, minHeightClass, submitTitle, canSubmit, models, hasMultipleModels, modelPopoverOpen, onModelPopoverOpenChange, selectedModelIds, selectedModelsCount, selectedModelSummary, onToggleModel, onFocusChange, }) {
+    const formRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    // Single line at rest; grows to its full height while focused or holding text.
+    const isExpanded = focused || value.trim().length > 0;
+    // Report focus up so the popover width follows the custom prompt field.
+    useEffect(() => {
+        onFocusChange?.(focused);
+    }, [focused, onFocusChange]);
+    useEffect(() => {
+        return () => onFocusChange?.(false);
+    }, [onFocusChange]);
+    // Collapse again once focus leaves the composer entirely. Interactions with the
+    // footer controls or the (portaled) model popover keep it expanded.
+    const handleBlur = () => {
+        window.setTimeout(() => {
+            const active = document.activeElement;
+            if (formRef.current?.contains(active ?? null) ||
+                (active instanceof Element &&
+                    active.closest("[data-radix-popper-content-wrapper]"))) {
+                return;
+            }
+            setFocused(false);
+        }, 0);
+    };
+    return (_jsx("form", { ref: formRef, onSubmit: (event) => {
+            event.preventDefault();
+            onSubmit();
+        }, className: "w-full", children: _jsx("div", { className: "flex w-full items-start gap-2", children: _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsxs("div", { className: "border-border-default focus-within:border-neutral-grey-100 focus-within:ring-neutral-grey-100/10 bg-neutral-grey-5/30 relative min-w-0 overflow-hidden rounded-[12px] border transition-colors duration-200 focus-within:ring-4", children: [_jsx(Textarea, { ref: inputRef, value: value, onChange: (event) => onChange(event.target.value), onKeyDown: onKeyDown, onFocus: () => setFocused(true), onBlur: handleBlur, placeholder: placeholder, rows: 1, className: cn("w-full resize-none rounded-none border-0 bg-transparent px-2 pr-11 text-xs shadow-none transition-colors duration-200 outline-none focus-visible:border-0 focus-visible:shadow-none", isExpanded
+                                    ? `${minHeightClass} pt-3 pb-10 leading-normal`
+                                    : "h-8 min-h-0 py-0 leading-8") }), _jsx("button", { type: "submit", disabled: !canSubmit, className: cn("absolute right-1.5 flex h-6 w-6 items-center justify-center rounded-[4px] p-0 transition-colors duration-200", isExpanded ? "bottom-1.5" : "top-1", canSubmit
+                                    ? "bg-neutral-grey-100 hover:bg-neutral-grey-100/90 text-white"
+                                    : "bg-neutral-grey-5 text-neutral-grey-50 cursor-not-allowed"), title: submitTitle, children: _jsx(ArrowUp, { className: "h-4 w-4" }) })] }), hasMultipleModels && (_jsx("div", { className: "flex items-center overflow-hidden", children: _jsxs(Popover, { open: modelPopoverOpen, onOpenChange: onModelPopoverOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("inline-flex items-center gap-1 rounded-[4px] px-2 py-1.5 text-[11px] font-medium transition-colors duration-200", "text-neutral-grey-50 hover:text-neutral-grey-100 hover:bg-neutral-grey-5", modelPopoverOpen &&
+                                            "text-neutral-grey-100 bg-neutral-grey-5"), title: selectedModelSummary
+                                            ? `Models: ${selectedModelSummary}`
+                                            : "Choose models", children: [_jsx("span", { className: "max-w-[150px] truncate", children: selectedModelSummary ?? "Choose models" }), _jsx(ChevronDown, { className: "h-3 w-3" })] }) }), _jsxs(PopoverContent, { className: "w-56 p-1.5", align: "start", sideOffset: 8, children: [_jsxs("div", { className: "badge-pad flex items-center justify-between", children: [_jsx("span", { className: "text-neutral-grey-50 text-[10px] font-semibold tracking-wider", children: "Models" }), _jsxs("span", { className: "text-neutral-grey-100 text-[10px] font-medium", children: [selectedModelsCount, " selected"] })] }), _jsx("div", { className: "space-y-0.5", children: models.map((model) => (_jsxs("button", { type: "button", onClick: () => onToggleModel(model.id), className: cn("flex w-full items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-xs transition-colors", selectedModelIds.includes(model.id)
+                                                    ? "bg-neutral-grey-5 text-neutral-grey-100"
+                                                    : "text-neutral-grey-50 hover:bg-neutral-grey-5"), children: [_jsx("span", { className: cn("flex h-3.5 w-3.5 items-center justify-center rounded border", selectedModelIds.includes(model.id)
+                                                            ? "border-neutral-grey-100 bg-neutral-grey-100 text-white"
+                                                            : "border-border-default bg-white text-transparent"), children: _jsx(Check, { className: "h-3 w-3" }) }), model.name] }, model.id))) })] })] }) }))] }) }) }));
+}
 export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter, onAccept, onClose, position, className, }) {
     const editContext = useEditContext();
     const [state, setState] = useState("input");
     const [instruction, setInstruction] = useState("");
-    const [result, setResult] = useState("");
     const [error, setError] = useState(null);
     const [conversationHistory, setConversationHistory] = useState([]);
     const [quickActions, setQuickActions] = useState([]);
@@ -258,8 +345,6 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
     const [modelRuns, setModelRuns] = useState({});
     const inputRef = useRef(null);
     const dialogRef = useRef(null);
-    const [isLarge, setIsLarge] = useState(false);
-    const [clampedPosition, setClampedPosition] = useState(position);
     // Agent state for the current multi-model run
     const activeAgentIdsRef = useRef(new Set());
     const unsubscribeRef = useRef(null);
@@ -268,6 +353,8 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
     const lastParsedRawRef = useRef({});
     // Model popover state
     const [modelPopoverOpen, setModelPopoverOpen] = useState(false);
+    // Whether the custom-prompt composer is focused, so the popover can grow with it.
+    const [promptFocused, setPromptFocused] = useState(false);
     // ALT+letter quick select state
     const [altSearchBuffer, setAltSearchBuffer] = useState("");
     const [isAltPressed, setIsAltPressed] = useState(false);
@@ -283,7 +370,7 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
         const selected = selectedModelIds
             .map((id) => byId.get(id))
             .filter(Boolean);
-        return selected.length ? selected : availableModels.slice(0, 1);
+        return selected;
     }, [selectedModelIds, availableModels]);
     const selectedModelSummary = useMemo(() => {
         if (!selectedModels.length)
@@ -292,16 +379,6 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
             return selectedModels[0]?.name || null;
         return `${selectedModels.length} models selected`;
     }, [selectedModels]);
-    const successfulRuns = useMemo(() => Object.values(modelRuns).filter((run) => run.status === "done" &&
-        typeof run.replacementText === "string" &&
-        run.replacementText.length > 0), [modelRuns]);
-    const hasMultipleResults = successfulRuns.length > 1;
-    // Automatically switch to larger mode when showing more than one response
-    useEffect(() => {
-        if (state === "preview" && hasMultipleResults) {
-            setIsLarge(true);
-        }
-    }, [state, hasMultipleResults]);
     useEffect(() => {
         const loadSettings = async () => {
             try {
@@ -340,7 +417,10 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                     const defaultModelId = profile.defaultModelId || profile.models?.[0]?.id;
                     const stored = getStoredModelIds(profileId);
                     const validStored = stored?.filter((id) => availableModelIds.has(id));
-                    if (validStored?.length) {
+                    if (stored && stored.length === 0) {
+                        setSelectedModelIds([]);
+                    }
+                    else if (validStored?.length) {
                         setSelectedModelIds(validStored);
                     }
                     else if (defaultModelId) {
@@ -359,16 +439,12 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
     }, [modelRuns]);
     // Persist model selection to localStorage when it or profileId changes
     useEffect(() => {
-        if (profileId && selectedModelIds.length > 0) {
+        if (profileId && activeProfile) {
             setStoredModelIds(profileId, selectedModelIds);
         }
-    }, [profileId, selectedModelIds]);
-    // Focus input on mount
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, []);
+    }, [profileId, activeProfile, selectedModelIds]);
+    // The custom-prompt composer starts collapsed (single line) and expands on
+    // focus, so the input is intentionally not auto-focused on mount.
     const evaluateRunCompletion = useCallback((runs) => {
         const values = Object.values(runs);
         if (!values.length)
@@ -376,19 +452,13 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
         const allTerminal = values.every((run) => run.status === "done" || run.status === "error");
         if (!allTerminal)
             return;
-        const doneRuns = values.filter((run) => run.status === "done" && run.replacementText?.length);
+        const doneRuns = values.filter((run) => run.status === "done" &&
+            (run.replacementTexts?.length || run.replacementText?.length));
         if (doneRuns.length === 0) {
             setError("All selected models failed. See each model’s card for details. You can retry or change your instruction.");
-            setResult("");
             // Stay in preview so the user sees per-model error cards and can Retry/Discard
             return;
         }
-        if (doneRuns.length === 1) {
-            setResult(doneRuns[0]?.replacementText ?? "");
-        }
-        else {
-            setResult("");
-        }
         setError(null);
         // State is already "preview" – we show results side-by-side as they stream in
     }, []);
@@ -412,13 +482,6 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
             return;
         subscriptionReleasesRef.current.set(agentId, subscribeAgentRegistry(agentId));
     }, []);
-    const releaseAgentSubscription = useCallback((agentId) => {
-        const release = subscriptionReleasesRef.current.get(agentId);
-        if (release) {
-            release();
-            subscriptionReleasesRef.current.delete(agentId);
-        }
-    }, []);
     const unsubscribeAllAgents = useCallback(() => {
         for (const release of subscriptionReleasesRef.current.values()) {
             release();
@@ -433,22 +496,6 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
         latestRawContentRef.current = {};
         lastParsedRawRef.current = {};
     }, []);
-    const handleStopModelRun = useCallback((agentId) => {
-        activeAgentIdsRef.current.delete(agentId);
-        delete latestRawContentRef.current[agentId];
-        delete lastParsedRawRef.current[agentId];
-        releaseAgentSubscription(agentId);
-        closeAgent(agentId).catch(() => { });
-        updateModelRun(agentId, (current) => ({
-            ...current,
-            status: "error",
-            error: "Stopped by user",
-        }));
-    }, [updateModelRun, releaseAgentSubscription]);
-    const handleOpenAgentInSidePanel = useCallback((agentId) => {
-        editContext?.openSidebar?.("agents-panel");
-        window.dispatchEvent(new CustomEvent("editor:openAgent", { detail: { agentId } }));
-    }, [editContext]);
     // Cleanup on unmount
     useEffect(() => {
         return () => {
@@ -515,6 +562,18 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                         return { ...current, status: "error", error: errorMsg };
                     });
                 }
+                else if (normalizedStatus === "running" ||
+                    normalizedStatus === "thinking" ||
+                    normalizedStatus === "streamopen" ||
+                    normalizedStatus === "executingtoolcalls" ||
+                    normalizedStatus === "toolapprovalgranted" ||
+                    normalizedStatus === "toolapprovalrejected") {
+                    updateModelRun(messageAgentId, (current) => {
+                        if (current.status !== "pending")
+                            return current;
+                        return { ...current, status: "thinking" };
+                    });
+                }
             }
             else if (msgType === "agent:run:error" || msgType === "agent:error") {
                 const errorMsg = extractAgentErrorMessage(message) ||
@@ -553,10 +612,13 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                     }));
                 }
                 else {
+                    const replacementTexts = parsed.replacementTexts ??
+                        (parsed.replacementText != null ? [parsed.replacementText] : []);
                     updateModelRun(messageAgentId, (run) => ({
                         ...run,
                         status: "done",
-                        replacementText: parsed.replacementText ?? "",
+                        replacementText: replacementTexts[0] ?? "",
+                        replacementTexts,
                         error: undefined,
                     }));
                 }
@@ -565,7 +627,7 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
         unsubscribeRef.current =
             editContext.addSocketMessageListener(handleMessage);
     }, [editContext, updateModelRun]);
-    const executeAiModification = useCallback(async (customInstruction) => {
+    const executeAiModification = useCallback(async (customInstruction, resultCount = 1) => {
         if (!editContext)
             return;
         if (!selectedModels.length) {
@@ -573,7 +635,6 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
             return;
         }
         setError(null);
-        setResult("");
         setModelRuns({});
         modelRunsRef.current = {};
         latestRawContentRef.current = {};
@@ -590,6 +651,8 @@ After: "${contextAfter || ""}"
 
 `
                 : "";
+            const responseFormatInstruction = getAiTextEditResponseFormatInstruction(resultCount);
+            const requestedResultCount = normalizeAiTextEditResultCount(resultCount);
             let message;
             if (selectedText) {
                 message = `${contextInfo}I need you to modify ONLY the following selected portion of the text:
@@ -602,7 +665,7 @@ ${selectedText}
 ${customInstruction}
 
 Return ONLY the modified version of the selected text, not the entire field.
-${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
+${responseFormatInstruction}`;
             }
             else {
                 message = `${contextInfo}I need you to generate text at the cursor position.
@@ -610,7 +673,7 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
 ${customInstruction}
 
 Return ONLY the text to insert at the cursor position, not the entire field.
-${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
+${responseFormatInstruction}`;
             }
             setConversationHistory((prev) => [...prev, customInstruction]);
             let agentContext = undefined;
@@ -657,6 +720,7 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                     agentId,
                     modelId: model.id,
                     modelName: model.name,
+                    requestedResultCount,
                     status: "pending",
                     rawContent: "",
                 };
@@ -667,7 +731,7 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
             await Promise.all(Object.values(initialRuns).map(async (run) => {
                 subscribeAgentInline(run.agentId);
                 try {
-                    await startAgent({
+                    await withTimeout(startAgent({
                         agentId: run.agentId,
                         message,
                         sessionId: editContext.sessionId,
@@ -675,6 +739,11 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                         mode: "autonomous",
                         model: run.modelId,
                         context: agentContext,
+                    }), START_AGENT_TIMEOUT_MS, `Timed out starting ${run.modelName}. Please try again.`);
+                    updateModelRun(run.agentId, (current) => {
+                        if (current.status !== "pending")
+                            return current;
+                        return { ...current, status: "thinking" };
                     });
                 }
                 catch (runErr) {
@@ -709,7 +778,7 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
         updateModelRun,
     ]);
     const handleQuickAction = useCallback((action) => {
-        executeAiModification(action.instruction);
+        executeAiModification(action.instruction, action.resultCount);
     }, [executeAiModification]);
     // ALT+letter quick select for quick actions
     useEffect(() => {
@@ -788,72 +857,131 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
             return;
         onAccept(replacementText);
     }, [onAccept]);
+    const handleModelBadgeClick = useCallback((event, agentId) => {
+        if (!event.ctrlKey)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (editContext?.isMobile) {
+            editContext.openSidebar("agents-panel");
+        }
+        else {
+            editContext?.setShowAgentsPanel(true);
+        }
+        const dispatchOpenAgent = () => {
+            window.dispatchEvent(new CustomEvent("editor:openAgent", {
+                detail: { agentId },
+            }));
+        };
+        if (editContext?.isMobile) {
+            window.setTimeout(dispatchOpenAgent, 500);
+        }
+        else {
+            dispatchOpenAgent();
+        }
+    }, [editContext]);
     const toggleModelSelection = useCallback((modelId) => {
         setSelectedModelIds((prev) => {
             if (prev.includes(modelId)) {
-                if (prev.length === 1) {
-                    return prev;
-                }
                 return prev.filter((id) => id !== modelId);
             }
             return [...prev, modelId];
         });
     }, []);
     const handleTryAgain = useCallback(() => {
-        // Go back to input state to refine
-        setState("input");
-        setResult("");
-    }, []);
-    const handleRetry = useCallback(() => {
-        const lastInstruction = conversationHistory[conversationHistory.length - 1];
-        if (lastInstruction) {
-            executeAiModification(lastInstruction);
-        }
-    }, [conversationHistory, executeAiModification]);
-    const handleStartOver = useCallback(() => {
         unsubscribeAllAgents();
         closeAllActiveAgents();
+        setState("input");
+        setInstruction("");
+        setError(null);
+        setConversationHistory([]);
         setModelRuns({});
         modelRunsRef.current = {};
         latestRawContentRef.current = {};
         lastParsedRawRef.current = {};
-        setState("input");
-        setResult("");
-        setConversationHistory([]);
-        setError(null);
     }, [unsubscribeAllAgents, closeAllActiveAgents]);
     const handleClose = useCallback(() => {
         unsubscribeAllAgents();
         closeAllActiveAgents();
         onClose();
     }, [unsubscribeAllAgents, closeAllActiveAgents, onClose]);
-    const toggleLarge = useCallback(() => {
-        setIsLarge((prev) => !prev);
-    }, []);
+    useEffect(() => {
+        const handleEscapeKey = (event) => {
+            if (event.key !== "Escape")
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            handleClose();
+        };
+        document.addEventListener("keydown", handleEscapeKey, true);
+        return () => {
+            document.removeEventListener("keydown", handleEscapeKey, true);
+        };
+    }, [handleClose]);
     const renderTextWithContext = (centerText, isResult = false) => {
         const hasContext = contextBefore || contextAfter;
         // No context available - just show the selected text
         if (!hasContext) {
             return (_jsx("span", { className: cn("rounded px-0.5 font-medium", isResult
                     ? "bg-feedback-green-light text-feedback-green"
-                    : "bg-highlight-10 text-highlight-100 italic"), children: centerText }));
+                    : "bg-neutral-grey-5 text-neutral-grey-100 italic"), children: centerText }));
         }
         // Show context with ellipsis indicators
         return (_jsxs("div", { className: "text-xs leading-relaxed whitespace-pre-wrap", children: [contextBefore && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-neutral-grey-50", children: "..." }), _jsx("span", { className: "text-neutral-grey-50", children: contextBefore })] })), _jsx("span", { className: cn("mx-0.5 rounded px-0.5 font-medium", isResult
                         ? "bg-feedback-green-light text-feedback-green"
-                        : "bg-highlight-10 text-highlight-100 italic"), children: centerText }), contextAfter && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-neutral-grey-50", children: contextAfter }), _jsx("span", { className: "text-neutral-grey-50", children: "..." })] }))] }));
+                        : "bg-neutral-grey-5 text-neutral-grey-100 italic"), children: centerText }), contextAfter && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-neutral-grey-50", children: contextAfter }), _jsx("span", { className: "text-neutral-grey-50", children: "..." })] }))] }));
+    };
+    const renderSuggestionPreview = (replacementText) => {
+        const hasContext = contextBefore || contextAfter;
+        const hasOriginalSelection = selectedText.trim().length > 0;
+        const diff = hasOriginalSelection
+            ? diffWords(selectedText, replacementText)
+            : [];
+        const suggestedTextClass = "bg-feedback-green-light text-feedback-green rounded px-0.5";
+        return (_jsxs("div", { className: "font-mono text-sm whitespace-pre-wrap", children: [hasContext && contextBefore && (_jsxs("span", { className: "text-neutral-grey-50", children: [_jsx("span", { children: "..." }), _jsx("span", { children: contextBefore })] })), hasOriginalSelection ? (diff.map((part, index) => {
+                    if (part.added) {
+                        return (_jsx("span", { className: suggestedTextClass, children: part.value }, index));
+                    }
+                    if (part.removed) {
+                        return null;
+                    }
+                    return (_jsx("span", { className: suggestedTextClass, children: part.value }, index));
+                })) : (_jsx("span", { className: suggestedTextClass, children: replacementText })), hasContext && contextAfter && (_jsxs("span", { className: "text-neutral-grey-50", children: [_jsx("span", { children: contextAfter }), _jsx("span", { children: "..." })] }))] }));
     };
+    const modelRunValues = useMemo(() => Object.values(modelRuns), [modelRuns]);
+    const useCompactResultList = useMemo(() => modelRunValues.some((run) => run.requestedResultCount > 1 ||
+        (run.replacementTexts?.length ?? 0) > 1), [modelRunValues]);
+    const compactSuggestions = useMemo(() => {
+        const seenSuggestions = new Set();
+        return modelRunValues.flatMap((run) => {
+            const replacementTexts = run.replacementTexts ??
+                (run.replacementText != null ? [run.replacementText] : []);
+            return replacementTexts
+                .filter((replacementText) => {
+                const dedupeKey = replacementText
+                    .trim()
+                    .replace(/\s+/g, " ")
+                    .toLocaleLowerCase();
+                if (!dedupeKey || seenSuggestions.has(dedupeKey)) {
+                    return false;
+                }
+                seenSuggestions.add(dedupeKey);
+                return true;
+            })
+                .map((replacementText, index) => ({
+                id: `${run.agentId}-${index}`,
+                agentId: run.agentId,
+                modelName: run.modelName,
+                text: replacementText,
+            }));
+        });
+    }, [modelRunValues]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === "Escape") {
             e.preventDefault();
-            if (state === "preview") {
-                handleTryAgain();
-            }
-            else {
-                handleClose();
-            }
+            handleClose();
         }
-    }, [state, handleTryAgain, handleClose]);
+    }, [handleClose]);
     const handleTextareaKeyDown = useCallback((e) => {
         if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
@@ -863,67 +991,16 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
             }
         }
     }, [instruction, executeAiModification]);
-    // Clamp the dialog position so it never renders outside the viewport.
-    // This matters because `position` is based on selection coordinates which can be near the viewport edge.
-    useLayoutEffect(() => {
-        if (!position) {
-            if (clampedPosition !== undefined)
-                setClampedPosition(undefined);
-            return;
-        }
-        const margin = 12;
-        const vw = window.innerWidth || 0;
-        const vh = window.innerHeight || 0;
-        // Use ResizeObserver to track the actual size of the dialog as it changes
-        const updatePosition = () => {
-            const el = dialogRef.current;
-            if (!el)
-                return;
-            const width = el.offsetWidth || 0;
-            const height = el.offsetHeight || 0;
-            if (!width || !height || !vw || !vh) {
-                const next = { x: position.x, y: position.y };
-                if (clampedPosition?.x !== next.x || clampedPosition?.y !== next.y)
-                    setClampedPosition(next);
-                return;
-            }
-            const x = Math.min(Math.max(margin, position.x), Math.max(margin, vw - width - margin));
-            const y = Math.min(Math.max(margin, position.y), Math.max(margin, vh - height - margin));
-            if (clampedPosition?.x !== x || clampedPosition?.y !== y) {
-                setClampedPosition({ x, y });
-            }
-        };
-        const resizeObserver = new ResizeObserver(() => {
-            updatePosition();
-        });
-        if (dialogRef.current) {
-            resizeObserver.observe(dialogRef.current);
-        }
-        // Initial update
-        updatePosition();
-        return () => {
-            resizeObserver.disconnect();
-        };
-        // Re-clamp when the content changes (height changes) or when the requested position changes.
-    }, [
-        position?.x,
-        position?.y,
-        state,
-        result,
-        selectedText,
-        isLarge,
-        modelRuns,
-        hasMultipleResults,
-    ]);
-    return (_jsxs("div", { ref: dialogRef, className: cn("border-border-default agent-inline-dialog flex max-h-[80vh] flex-col overflow-hidden rounded-xl border bg-white/95 shadow-[0_10px_40px_color-mix(in_srgb,var(--color-neutral-grey-100)_10%,transparent)] backdrop-blur-sm transition-all duration-300 ease-in-out", isLarge ? "w-[800px]" : "w-[420px]", "animate-in fade-in-0 zoom-in-95 duration-200 ease-out", className), style: clampedPosition
+    return (_jsxs("div", { ref: dialogRef, className: cn("border-border-default agent-inline-dialog flex max-h-[80vh] flex-col overflow-hidden rounded-2xl border bg-white/95 shadow-lg backdrop-blur-sm transition-all duration-300 ease-in-out [&_button]:rounded-[4px]", 
+        // Popover grows while the custom prompt field is focused or results are shown.
+        promptFocused || state === "preview" ? "w-[390px]" : "w-[190px]", "animate-in fade-in-0 zoom-in-95 duration-200 ease-out", className), style: position
             ? {
                 position: "fixed",
-                left: clampedPosition.x,
-                top: clampedPosition.y,
-                zIndex: 95,
+                left: position.x,
+                top: position.y,
+                zIndex: 1100,
             }
-            : undefined, onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "from-highlight-100/5 to-highlight-100/5 border-border-default flex flex-shrink-0 items-center gap-2.5 border-b bg-gradient-to-r px-4 py-3", children: [_jsx("div", { className: "bg-highlight-100 shadow-highlight-100 flex h-6 w-6 items-center justify-center rounded-lg shadow-sm", children: _jsx(Sparkles, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-neutral-grey-100 text-sm leading-tight font-semibold", children: "AI Text Edit" }), conversationHistory.length > 0 && (_jsxs("span", { className: "text-neutral-grey-50 text-[10px] font-medium", children: [conversationHistory.length, " ", conversationHistory.length === 1 ? "turn" : "turns", " in history"] }))] }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx("button", { onClick: toggleLarge, className: cn("hover:bg-neutral-grey-5 group rounded-lg p-1.5 transition-all duration-200", isLarge &&
-                                    "bg-highlight-10 text-highlight-100 hover:bg-highlight-10"), title: isLarge ? "Make smaller" : "Make larger", children: _jsx(Maximize2, { className: cn("text-neutral-grey-50 group-hover:text-neutral-grey-50 h-4 w-4", isLarge && "text-highlight-100") }) }), _jsx(CloseButton, { onClick: handleClose, label: "Close" })] })] }), selectedText && (_jsxs("div", { className: "bg-neutral-grey-5/50 border-border-default flex-shrink-0 border-b px-4 py-3", children: [_jsxs("div", { className: "text-neutral-grey-50 mb-2 flex items-center gap-1.5 text-[10px] font-bold tracking-wider", children: [_jsx("div", { className: "bg-neutral-grey-10 h-1.5 w-1.5 rounded-full" }), "Selected Content"] }), _jsxs("div", { className: "relative max-h-48 overflow-y-auto whitespace-pre-wrap transition-all duration-300", children: [_jsx("div", { className: "bg-highlight-10 absolute top-0 bottom-0 left-0 w-0.5 rounded-full" }), _jsx("div", { className: "pl-3", children: renderTextWithContext(selectedText) })] })] })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children: [state === "input" && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [isAltPressed && (_jsxs("div", { className: "text-highlight-100 bg-highlight-10 animate-in fade-in flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs duration-150", children: [_jsx("kbd", { className: "badge-pad-sm bg-highlight-10 rounded font-mono text-[10px] font-bold", children: "ALT" }), _jsx("span", { className: "font-medium", children: altSearchBuffer ? (_jsxs(_Fragment, { children: ["Type to select:", " ", _jsx("span", { className: "font-bold", children: altSearchBuffer })] })) : ("Type first letters of an action...") })] })), _jsx("div", { className: "flex flex-wrap gap-2", children: quickActions.map((action) => {
+            : undefined, onKeyDown: handleKeyDown, children: [state === "preview" && (_jsxs("div", { className: "border-border-default flex flex-shrink-0 items-center gap-2.5 border-b px-3 py-3", children: [_jsx("button", { onClick: handleTryAgain, className: "hover:bg-neutral-grey-5 -ml-1.5 rounded-[4px] p-1.5 transition-colors", title: "Back", "aria-label": "Back", children: _jsx(ChevronLeft, { className: "text-neutral-grey-50 h-4 w-4" }) }), _jsx("span", { className: "text-neutral-grey-100 text-sm leading-tight font-semibold", children: "Choose a result" }), _jsx("div", { className: "ml-auto flex items-center gap-1", children: _jsx(CloseButton, { onClick: handleClose, label: "Close" }) })] })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: [state === "input" && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [isAltPressed && (_jsxs("div", { className: "text-neutral-grey-100 bg-neutral-grey-5 animate-in fade-in flex items-center gap-2 rounded-xl px-2 py-1.5 text-xs duration-150", children: [_jsx("kbd", { className: "badge-pad-sm bg-neutral-grey-5 rounded font-mono text-[10px] font-bold", children: "ALT" }), _jsx("span", { className: "font-medium", children: altSearchBuffer ? (_jsxs(_Fragment, { children: ["Type to select:", " ", _jsx("span", { className: "font-bold", children: altSearchBuffer })] })) : ("Type first letters of an action...") })] })), _jsx("div", { className: "flex flex-col", children: quickActions.map((action) => {
                                             const hasSvgIcon = action.icon?.trim() &&
                                                 (action.icon.trim().startsWith("<svg") ||
                                                     action.icon.trim().startsWith("<?xml"));
@@ -935,69 +1012,44 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                                                 altSearchBuffer &&
                                                 labelLower.includes(altSearchBuffer) &&
                                                 !isMatch;
-                                            return (_jsxs("button", { onClick: () => handleQuickAction(action), className: cn("flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium transition-all duration-200", "border-border-default text-neutral-grey-50 border bg-white", "hover:border-highlight-100 hover:text-highlight-100 hover:bg-highlight-10", "shadow-sm hover:shadow-md active:scale-95", isMatch &&
-                                                    "border-highlight-100 bg-highlight-10 text-highlight-100 ring-highlight-100 ring-2", isPartialMatch &&
-                                                    "border-highlight-100 bg-highlight-10/50", isAltPressed &&
+                                            return (_jsxs("button", { onClick: () => handleQuickAction(action), className: cn("flex w-full items-center gap-2.5 rounded-[4px] px-2 py-2 text-left text-xs transition-colors duration-150", "text-neutral-grey-100 hover:text-neutral-grey-100 hover:bg-neutral-grey-5", isMatch &&
+                                                    "bg-neutral-grey-5 text-neutral-grey-100 ring-neutral-grey-100 ring-2", isPartialMatch && "bg-neutral-grey-5/50", isAltPressed &&
                                                     !isMatch &&
                                                     !isPartialMatch &&
-                                                    "opacity-50"), children: [hasSvgIcon && (_jsx("div", { className: "flex h-3.5 w-3.5 shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                                    "opacity-50"), children: [hasSvgIcon && (_jsx("div", { className: "text-neutral-grey-50 flex h-4 w-4 shrink-0 items-center justify-start [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
                                                             __html: sanitizeSvg(action.icon.trim()),
                                                         } })), isAltPressed && altSearchBuffer ? (_jsxs("span", { children: [_jsx("span", { className: cn(isMatch &&
                                                                     "font-bold underline underline-offset-2"), children: action.label.slice(0, altSearchBuffer.length) }), action.label.slice(altSearchBuffer.length)] })) : (action.label)] }, action.id));
-                                        }) })] }), _jsxs("form", { onSubmit: (e) => {
-                                    e.preventDefault();
+                                        }) })] }), _jsx(InstructionComposer, { inputRef: inputRef, value: instruction, onChange: setInstruction, onSubmit: () => {
                                     if (instruction.trim()) {
                                         executeAiModification(instruction.trim());
                                         setInstruction("");
                                     }
-                                }, className: "group relative", children: [_jsx(Textarea, { ref: inputRef, value: instruction, onChange: (e) => setInstruction(e.target.value), onKeyDown: handleTextareaKeyDown, placeholder: conversationHistory.length > 0
-                                            ? "How can I improve this further?"
-                                            : "Describe the change you want...", className: cn("border-border-default w-full rounded-2xl border py-3 pr-14 pl-3 text-xs", "focus:border-highlight-100 focus:ring-highlight-100/10 focus:ring-4", "bg-neutral-grey-5/30 resize-none transition-all duration-200 outline-none", isLarge ? "min-h-[200px]" : "min-h-[100px]") }), _jsxs("div", { className: "absolute right-2 bottom-2 flex items-center gap-1", children: [hasMultipleModels && (_jsxs(Popover, { open: modelPopoverOpen, onOpenChange: setModelPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: cn("flex h-7 w-7 items-center justify-center rounded-lg p-0 transition-colors duration-200", "text-neutral-grey-50 hover:text-highlight-100 hover:bg-highlight-10", modelPopoverOpen &&
-                                                                "text-highlight-100 bg-highlight-10"), title: selectedModelSummary
-                                                                ? `Models: ${selectedModelSummary}`
-                                                                : "Select models", children: _jsx(Cpu, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { className: "w-56 p-1.5", align: "end", sideOffset: 8, children: [_jsxs("div", { className: "badge-pad flex items-center justify-between", children: [_jsx("span", { className: "text-neutral-grey-50 text-[10px] font-semibold tracking-wider", children: "Models" }), _jsxs("span", { className: "text-highlight-100 text-[10px] font-medium", children: [selectedModels.length, " selected"] })] }), _jsx("div", { className: "space-y-0.5", children: availableModels.map((model) => (_jsxs("button", { type: "button", onClick: () => toggleModelSelection(model.id), className: cn("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors", selectedModelIds.includes(model.id)
-                                                                        ? "bg-highlight-10 text-highlight-100 font-medium"
-                                                                        : "text-neutral-grey-50 hover:bg-neutral-grey-5"), children: [_jsx("span", { className: cn("flex h-3.5 w-3.5 items-center justify-center rounded border", selectedModelIds.includes(model.id)
-                                                                                ? "border-highlight-100 bg-highlight-100 text-white"
-                                                                                : "border-border-default bg-white text-transparent"), children: _jsx(Check, { className: "h-3 w-3" }) }), model.name] }, model.id))) })] })] })), _jsx("button", { type: "submit", disabled: !instruction.trim() || selectedModels.length === 0, className: cn("flex h-7 w-7 items-center justify-center rounded-lg p-0 transition-colors duration-200", instruction.trim() && selectedModels.length > 0
-                                                    ? "bg-highlight-100 hover:bg-highlight-100 text-white"
-                                                    : "bg-neutral-grey-5 text-neutral-grey-50 cursor-not-allowed"), title: "Send (Enter)", children: _jsx(SendHorizonal, { className: "h-3.5 w-3.5" }) })] })] }), conversationHistory.length > 0 && (_jsxs("div", { className: "flex items-center justify-between pt-1", children: [_jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-1.5 text-[10px] font-medium", children: [_jsx(History, { className: "h-3 w-3" }), "Conversation active"] }), _jsxs("button", { onClick: handleStartOver, className: "text-highlight-100 hover:text-highlight-100 flex items-center gap-1 text-[10px] font-bold tracking-tight transition-colors", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), "Clear History"] })] })), error && (_jsxs("div", { className: "text-feedback-red bg-feedback-red-light border-feedback-red animate-in fade-in slide-in-from-top-1 flex items-start gap-2 rounded-lg border px-3 py-2 text-xs duration-200", children: [_jsx(X, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: error })] }))] })), state === "preview" && (_jsxs("div", { className: "animate-in fade-in slide-in-from-bottom-2 space-y-4 duration-300", children: [Object.keys(modelRuns).length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-1.5 text-[10px] font-bold tracking-wider", children: [_jsx("div", { className: "bg-highlight-100 h-1.5 w-1.5 rounded-full" }), Object.values(modelRuns).some((r) => r.status === "pending" || r.status === "streaming")
-                                                ? "Responses (live)"
-                                                : "Model responses"] }), _jsx("div", { className: "flex gap-3 overflow-x-auto pb-1", children: Object.values(modelRuns).map((run) => (_jsxs("div", { className: cn("flex min-w-[280px] flex-1 flex-col gap-2 rounded-xl border p-3", run.status === "done" &&
-                                                "border-feedback-green bg-feedback-green-light/40", run.status === "error" &&
-                                                "border-feedback-red bg-feedback-red-light/30", (run.status === "pending" ||
-                                                run.status === "streaming") &&
-                                                "border-highlight-100 bg-highlight-10/30"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-neutral-grey-100 truncate text-xs font-semibold", children: run.modelName }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => handleOpenAgentInSidePanel(run.agentId), className: "text-neutral-grey-50 hover:text-highlight-100 hover:bg-highlight-10 rounded p-1 transition-colors", title: "Open agent in side panel", children: _jsx(Bug, { className: "h-3 w-3" }) }), (run.status === "pending" ||
-                                                                    run.status === "streaming") && (_jsx("button", { type: "button", onClick: () => handleStopModelRun(run.agentId), className: "text-neutral-grey-50 hover:text-feedback-red hover:bg-feedback-red-light rounded-lg p-1.5 transition-colors", title: "Stop this model", children: _jsx(StopCircle, { className: "h-4 w-4" }) })), _jsxs(Badge, { variant: "outline", className: cn(run.status === "done" &&
-                                                                        "border-feedback-green text-feedback-green", run.status === "error" &&
-                                                                        "border-feedback-red text-feedback-red", (run.status === "pending" ||
-                                                                        run.status === "streaming") &&
-                                                                        "border-highlight-100 text-highlight-100"), children: [run.status === "pending" && "Queued", run.status === "streaming" && "Streaming…", run.status === "done" && "Ready", run.status === "error" && "Error"] })] })] }), _jsxs("div", { className: cn("min-h-[80px] overflow-y-auto rounded-lg border p-2 text-xs whitespace-pre-wrap", run.status === "done" &&
-                                                        "border-feedback-green bg-white/80", run.status === "error" &&
-                                                        "border-feedback-red text-feedback-red bg-white/80", (run.status === "pending" ||
-                                                        run.status === "streaming") &&
-                                                        "border-highlight-100 bg-white/60"), style: { maxHeight: isLarge ? "420px" : "200px" }, children: [run.status === "pending" && (_jsx("span", { className: "text-neutral-grey-50 italic", children: "Starting\u2026" })), run.status === "streaming" &&
+                                }, onKeyDown: handleTextareaKeyDown, placeholder: conversationHistory.length > 0
+                                    ? "How can I improve this further?"
+                                    : "Describe...", minHeightClass: "min-h-[92px]", submitTitle: "Send (Enter)", canSubmit: !!instruction.trim() && selectedModels.length > 0, models: availableModels, hasMultipleModels: hasMultipleModels, modelPopoverOpen: modelPopoverOpen, onModelPopoverOpenChange: setModelPopoverOpen, selectedModelIds: selectedModelIds, selectedModelsCount: selectedModels.length, selectedModelSummary: selectedModelSummary, onToggleModel: toggleModelSelection, onFocusChange: setPromptFocused }), error && (_jsxs("div", { className: "text-feedback-red bg-feedback-red-light border-feedback-red animate-in fade-in slide-in-from-top-1 flex items-start gap-2 rounded-xl border px-3 py-2 text-xs duration-200", children: [_jsx(X, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: error })] }))] })), state === "preview" && (_jsxs("div", { className: "animate-in fade-in slide-in-from-bottom-2 space-y-4 duration-300", children: [modelRunValues.length > 0 &&
+                                (useCompactResultList ? (_jsxs("div", { className: "border-border-default overflow-hidden rounded-lg border bg-white", children: [compactSuggestions.length > 0 ? (compactSuggestions.map((suggestion) => (_jsxs("button", { type: "button", onClick: () => handleUseRunResult(suggestion.text), className: "hover:bg-neutral-grey-5 border-border-default flex h-8 w-full items-center gap-2 border-b px-3 text-left text-xs last:border-b-0", title: suggestion.text, children: [_jsx("span", { className: "text-neutral-grey-100 min-w-0 flex-1 truncate", children: suggestion.text }), selectedModels.length > 1 && (_jsx("span", { className: "text-neutral-grey-50 max-w-[96px] shrink-0 truncate text-[10px]", title: suggestion.modelName, children: suggestion.modelName }))] }, suggestion.id)))) : (_jsxs("div", { className: "text-neutral-grey-50 flex min-h-9 items-center gap-1.5 px-3 text-xs italic", children: [modelRunValues.some((run) => isActiveModelRunStatus(run.status)) && (_jsx(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" })), modelRunValues.some((run) => isActiveModelRunStatus(run.status))
+                                                    ? "Waiting for suggestions..."
+                                                    : "No suggestions returned."] })), compactSuggestions.length === 0 &&
+                                            modelRunValues
+                                                .filter((run) => run.status === "error")
+                                                .map((run) => (_jsx("div", { className: "text-feedback-red border-border-default border-t px-3 py-2 text-xs", children: run.error || `${run.modelName} failed.` }, `${run.agentId}-error`)))] })) : (_jsx("div", { className: "flex flex-col gap-4", children: modelRunValues.map((run) => {
+                                        const replacementTexts = run.replacementTexts ??
+                                            (run.replacementText != null
+                                                ? [run.replacementText]
+                                                : []);
+                                        return (_jsxs("div", { className: cn("border-border-default flex flex-col gap-4 rounded-lg border bg-white p-4", run.status === "error" && "border-feedback-red"), children: [_jsxs("div", { className: "text-neutral-grey-100 flex items-center gap-2 text-xs leading-none font-semibold", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Lightbulb, { className: "text-neutral-grey-100 h-5 w-5 shrink-0" }), _jsx("span", { children: "Suggestion" })] }), selectedModels.length > 1 && (_jsx(Badge, { asChild: true, variant: "secondary", size: "sm", className: "ml-auto max-w-[180px] cursor-default truncate", children: _jsx("button", { type: "button", onClick: (event) => handleModelBadgeClick(event, run.agentId), title: `${run.modelName} (Ctrl+click to open agent chat)`, children: run.modelName }) }))] }), _jsxs("div", { className: "max-h-[220px] min-h-[44px] overflow-y-auto", children: [run.status === "pending" && (_jsxs("span", { className: "text-neutral-grey-50 inline-flex items-center gap-1.5 text-xs italic", children: [_jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }), "Starting..."] })), run.status === "thinking" && (_jsxs("span", { className: "text-neutral-grey-50 inline-flex items-center gap-1.5 text-xs italic", children: [_jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }), "Thinking..."] })), run.status === "streaming" &&
                                                             (() => {
                                                                 const preview = extractStreamingPreview(run.rawContent ?? "");
-                                                                return preview ? (renderTextWithContext(preview, false)) : (_jsx("span", { className: "text-neutral-grey-50 italic", children: "Waiting for response\u2026" }));
+                                                                return preview ? (_jsx("div", { className: "font-mono text-sm leading-7 whitespace-pre-wrap", children: renderTextWithContext(preview, false) })) : (_jsxs("span", { className: "text-neutral-grey-50 inline-flex items-center gap-1.5 text-xs italic", children: [_jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }), "Waiting for response..."] }));
                                                             })(), run.status === "done" &&
-                                                            run.replacementText != null &&
-                                                            renderTextWithContext(run.replacementText, true), run.status === "error" && (_jsx("div", { className: "text-feedback-red", children: run.error || "Something went wrong." }))] }), run.status === "done" && run.replacementText != null && (_jsxs(Button, { size: "sm", onClick: () => handleUseRunResult(run.replacementText), className: "bg-highlight-100 hover:bg-highlight-100 mt-2 w-full rounded-lg font-semibold text-white", children: [_jsx(Check, { className: "mr-1.5 h-4 w-4" }), "Use this"] }))] }, run.agentId))) })] })), _jsxs("form", { onSubmit: (e) => {
-                                    e.preventDefault();
+                                                            replacementTexts.length > 0 && (_jsx("div", { className: "flex flex-col gap-4", children: replacementTexts.map((replacementText, index) => (_jsxs("div", { className: "border-border-default flex flex-col gap-3 border-b pb-4 last:border-b-0 last:pb-0", children: [replacementTexts.length > 1 && (_jsxs("div", { className: "text-neutral-grey-50 text-[11px] font-semibold", children: ["Suggestion ", index + 1] })), renderSuggestionPreview(replacementText), _jsxs(Button, { size: "sm", onClick: () => handleUseRunResult(replacementText), className: "bg-neutral-grey-10 hover:bg-neutral-grey-15 text-neutral-grey-100 self-start rounded-[4px] px-4 py-2 text-sm font-semibold shadow-none", children: [_jsx(Check, { className: "mr-1.5 h-4 w-4" }), "Apply"] })] }, `${run.agentId}-${index}`))) })), run.status === "error" && (_jsx("div", { className: "text-feedback-red text-sm", children: run.error || "Something went wrong." }))] })] }, run.agentId));
+                                    }) }))), _jsx(InstructionComposer, { inputRef: inputRef, value: instruction, onChange: setInstruction, onSubmit: () => {
                                     if (instruction.trim()) {
                                         executeAiModification(instruction.trim());
                                         setInstruction("");
                                     }
-                                }, className: "group relative", children: [_jsx(Textarea, { ref: inputRef, value: instruction, onChange: (e) => setInstruction(e.target.value), onKeyDown: handleTextareaKeyDown, placeholder: "Not quite right? Ask for a change...", className: cn("border-border-default min-h-[80px] w-full rounded-2xl border py-3 pr-14 pl-3 text-xs", "focus:border-highlight-100 focus:ring-highlight-100/10 focus:ring-4", "bg-neutral-grey-5/30 resize-none transition-all duration-200 outline-none") }), _jsxs("div", { className: "absolute right-2 bottom-2 flex items-center gap-1", children: [hasMultipleModels && (_jsxs(Popover, { open: modelPopoverOpen, onOpenChange: setModelPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: cn("flex h-7 w-7 items-center justify-center rounded-lg p-0 transition-colors duration-200", "text-neutral-grey-50 hover:text-highlight-100 hover:bg-highlight-10", modelPopoverOpen &&
-                                                                "text-highlight-100 bg-highlight-10"), title: selectedModelSummary
-                                                                ? `Models: ${selectedModelSummary}`
-                                                                : "Select models", children: _jsx(Cpu, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { className: "w-56 p-1.5", align: "end", sideOffset: 8, children: [_jsxs("div", { className: "badge-pad flex items-center justify-between", children: [_jsx("span", { className: "text-2xs text-neutral-grey-50 font-semibold tracking-wider", children: "Models" }), _jsxs("span", { className: "text-highlight-100 text-[10px] font-medium", children: [selectedModels.length, " selected"] })] }), _jsx("div", { className: "space-y-0.5", children: availableModels.map((model) => (_jsxs("button", { type: "button", onClick: () => toggleModelSelection(model.id), className: cn("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors", selectedModelIds.includes(model.id)
-                                                                        ? "bg-highlight-10 text-highlight-100 font-medium"
-                                                                        : "text-neutral-grey-50 hover:bg-neutral-grey-5"), children: [_jsx("span", { className: cn("flex h-3.5 w-3.5 items-center justify-center rounded border", selectedModelIds.includes(model.id)
-                                                                                ? "border-highlight-100 bg-highlight-100 text-white"
-                                                                                : "border-border-default bg-white text-transparent"), children: _jsx(Check, { className: "h-3 w-3" }) }), model.name] }, model.id))) })] })] })), _jsx("button", { type: "submit", disabled: !instruction.trim() || selectedModels.length === 0, className: cn("flex h-7 w-7 items-center justify-center rounded-lg p-0 transition-colors duration-200", instruction.trim() && selectedModels.length > 0
-                                                    ? "bg-highlight-100 hover:bg-highlight-100 text-white"
-                                                    : "bg-neutral-grey-5 text-neutral-grey-50 cursor-not-allowed"), title: "Refine (Enter)", children: _jsx(Wand2, { className: "h-3.5 w-3.5" }) })] })] }), _jsxs("div", { className: "flex gap-2.5 pt-1", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleStartOver, className: "text-neutral-grey-50 hover:text-neutral-grey-100 hover:bg-neutral-grey-5 flex-1 rounded-xl font-medium", children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Discard"] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: handleRetry, disabled: conversationHistory.length === 0, className: "text-highlight-100 hover:text-highlight-100 hover:bg-highlight-10 flex-1 rounded-xl font-medium disabled:pointer-events-none disabled:opacity-50", title: "Run the same request again", children: [_jsx(RotateCw, { className: "mr-2 h-4 w-4" }), "Retry"] })] })] }))] })] }));
+                                }, onKeyDown: handleTextareaKeyDown, placeholder: "Not quite right? Ask for a change...", minHeightClass: "min-h-[92px]", submitTitle: "Refine (Enter)", canSubmit: !!instruction.trim() && selectedModels.length > 0, models: availableModels, hasMultipleModels: hasMultipleModels, modelPopoverOpen: modelPopoverOpen, onModelPopoverOpenChange: setModelPopoverOpen, selectedModelIds: selectedModelIds, selectedModelsCount: selectedModels.length, selectedModelSummary: selectedModelSummary, onToggleModel: toggleModelSelection, onFocusChange: setPromptFocused })] }))] })] }));
 }
 export default InlineAiDialog;
 //# sourceMappingURL=InlineAiDialog.js.map