@parhelia/core 0.1.12907 → 0.1.12909

package/dist/editor/ai/InlineAiDialog.js

@@ -1,22 +1,25 @@
 "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";
-import { Popover, PopoverTrigger, PopoverContent } from "../../components/ui/popover";
+import { Popover, PopoverTrigger, PopoverContent, } from "../../components/ui/popover";
+import { CloseButton } from "../../components/ui/close-button";
 import { cn } from "../../lib/utils";
 import { sanitizeSvg } from "../../lib/sanitize";
 import { useEditContext } from "../client/editContext";
 import { startAgent, closeAgent } from "../services/agentService";
 import { subscribeAgent as subscribeAgentRegistry } from "../services/agentSubscriptionRegistry";
-import { getAiTextEditPrompts, getEditorSettings } from "../services/systemService";
+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();
@@ -37,7 +40,7 @@ function getStoredModelIds(profileId) {
                 }
             }
         }
-        return Array.isArray(ids) && ids.length > 0 ? ids : null;
+        return Array.isArray(ids) ? ids : null;
     }
     catch {
         return null;
@@ -64,45 +67,65 @@ 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 tryExtractFirstJsonObject(input) {
-    const start = input.indexOf("{");
-    if (start < 0)
-        return null;
-    let depth = 0;
-    let inString = false;
-    let escaped = false;
-    for (let i = start; i < input.length; i++) {
-        const ch = input[i];
-        if (inString) {
-            if (escaped) {
-                escaped = false;
-            }
-            else if (ch === "\\") {
-                escaped = true;
+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)) {
+        let depth = 0;
+        let inString = false;
+        let escaped = false;
+        for (let i = start; i < input.length; i++) {
+            const ch = input[i];
+            if (inString) {
+                if (escaped) {
+                    escaped = false;
+                }
+                else if (ch === "\\") {
+                    escaped = true;
+                }
+                else if (ch === '"') {
+                    inString = false;
+                }
+                continue;
             }
-            else if (ch === "\"") {
-                inString = false;
+            if (ch === '"') {
+                inString = true;
+                continue;
             }
-            continue;
-        }
-        if (ch === "\"") {
-            inString = true;
-            continue;
-        }
-        if (ch === "{")
-            depth++;
-        if (ch === "}") {
-            depth--;
-            if (depth === 0) {
-                return input.slice(start, i + 1);
+            if (ch === "{")
+                depth++;
+            if (ch === "}") {
+                depth--;
+                if (depth === 0) {
+                    candidates.push(input.slice(start, i + 1));
+                    break;
+                }
             }
         }
     }
-    return null;
+    return candidates;
 }
 function cleanAgentResponse(raw) {
     return raw
@@ -156,53 +179,74 @@ function extractStreamingPreview(raw) {
         return body;
     }
 }
-function parseAiTextEditResponse(raw) {
-    const cleaned = cleanAgentResponse(raw);
-    if (!cleaned) {
-        return { error: "AI returned an empty response." };
+function coerceAiTextEditResponse(parsed) {
+    const parsedObj = parsed;
+    if (!parsedObj || typeof parsedObj !== "object") {
+        return null;
     }
+    if (typeof parsedObj.error === "string" &&
+        parsedObj.error.trim().length > 0) {
+        return { error: parsedObj.error.trim() };
+    }
+    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) {
     try {
-        let parsed = JSON.parse(cleaned);
+        let parsed = JSON.parse(json);
         // Some models return JSON wrapped as a JSON string; parse one extra level.
         if (typeof parsed === "string") {
             const reparsed = JSON.parse(parsed);
             parsed = reparsed;
         }
-        const parsedObj = parsed;
-        if (!parsedObj || typeof parsedObj !== "object") {
-            return { error: "AI returned an invalid response format." };
-        }
-        if (typeof parsedObj.error === "string" && parsedObj.error.trim().length > 0) {
-            return { error: parsedObj.error.trim() };
-        }
-        if (typeof parsedObj.replacementText === "string") {
-            return { replacementText: parsedObj.replacementText };
-        }
-        return { error: "AI response is missing `replacementText` or `error`." };
+        return coerceAiTextEditResponse(parsed);
     }
     catch {
-        const extractedJson = tryExtractFirstJsonObject(cleaned);
-        if (extractedJson) {
-            try {
-                const recovered = JSON.parse(extractedJson);
-                if (recovered && typeof recovered === "object") {
-                    if (typeof recovered.error === "string" && recovered.error.trim()) {
-                        return { error: recovered.error.trim() };
-                    }
-                    if (typeof recovered.replacementText === "string") {
-                        return { replacementText: recovered.replacementText };
-                    }
-                }
-            }
-            catch {
-                // ignore and fall through to regular error handling
+        return null;
+    }
+}
+export function parseAiTextEditResponse(raw) {
+    const cleaned = cleanAgentResponse(raw);
+    if (!cleaned) {
+        return { error: "AI returned an empty response." };
+    }
+    const parsedStrict = tryParseAiTextEditJson(cleaned);
+    if (parsedStrict) {
+        return parsedStrict;
+    }
+    if (cleaned.trim().startsWith("{")) {
+        try {
+            const parsed = JSON.parse(cleaned);
+            if (!parsed || typeof parsed !== "object") {
+                return { error: "AI returned an invalid response format." };
             }
+            return {
+                error: "AI response is missing `replacementText`, `replacementTexts`, or `error`.",
+            };
+        }
+        catch {
+            // Fall through to candidate extraction for mixed prose/JSON responses.
         }
-        if (cleaned && !cleaned.includes("{")) {
-            return { error: cleaned.slice(0, 300) };
+    }
+    const candidates = extractJsonObjectCandidates(cleaned);
+    for (const candidate of candidates) {
+        const recovered = tryParseAiTextEditJson(candidate);
+        if (recovered) {
+            return recovered;
         }
-        return { error: "AI returned invalid JSON. Please try again." };
     }
+    if (cleaned && !cleaned.includes("{")) {
+        return { error: cleaned.slice(0, 300) };
+    }
+    return { error: "AI returned invalid JSON. Please try again." };
 }
 function extractAgentErrorMessage(message) {
     const payload = message?.payload ?? {};
@@ -229,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-medium 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([]);
@@ -243,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);
@@ -253,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);
@@ -265,8 +367,10 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
         if (!availableModels.length)
             return [];
         const byId = new Map(availableModels.map((m) => [m.id, m]));
-        const selected = selectedModelIds.map((id) => byId.get(id)).filter(Boolean);
-        return selected.length ? selected : availableModels.slice(0, 1);
+        const selected = selectedModelIds
+            .map((id) => byId.get(id))
+            .filter(Boolean);
+        return selected;
     }, [selectedModelIds, availableModels]);
     const selectedModelSummary = useMemo(() => {
         if (!selectedModels.length)
@@ -275,25 +379,20 @@ 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 {
                 const [promptsResult, settingsResult] = await Promise.all([
                     getAiTextEditPrompts(),
-                    getEditorSettings()
+                    getEditorSettings(),
                 ]);
-                if (promptsResult.type === "success" && promptsResult.data && promptsResult.data.length > 0) {
+                if (promptsResult.type === "success" &&
+                    promptsResult.data &&
+                    promptsResult.data.length > 0) {
                     setQuickActions(promptsResult.data);
                 }
-                if (settingsResult.type === "success" && settingsResult.data?.aiTextEditProfileId) {
+                if (settingsResult.type === "success" &&
+                    settingsResult.data?.aiTextEditProfileId) {
                     setProfileId(settingsResult.data.aiTextEditProfileId);
                 }
             }
@@ -318,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) {
@@ -337,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)
@@ -354,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
     }, []);
@@ -390,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();
@@ -411,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 () => {
@@ -468,7 +537,9 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                     };
                 }
                 updateModelRun(messageAgentId, (current) => {
-                    const nextRawContent = isIncremental ? current.rawContent + content : content;
+                    const nextRawContent = isIncremental
+                        ? current.rawContent + content
+                        : content;
                     return {
                         ...current,
                         status: "streaming",
@@ -476,27 +547,45 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                     };
                 });
             }
-            else if (msgType === "agent:run:status" || msgType === "agent:status:update") {
+            else if (msgType === "agent:run:status" ||
+                msgType === "agent:status:update") {
                 const statusData = message.payload?.data || message.payload || {};
-                const normalizedStatus = (statusData.state || statusData.status || "").toString().toLowerCase();
+                const normalizedStatus = (statusData.state || statusData.status || "")
+                    .toString()
+                    .toLowerCase();
                 if (normalizedStatus === "error") {
-                    const errorMsg = extractAgentErrorMessage(message) || "AI could not complete this request.";
+                    const errorMsg = extractAgentErrorMessage(message) ||
+                        "AI could not complete this request.";
                     updateModelRun(messageAgentId, (current) => {
                         if (current.status === "done")
                             return current; // don't overwrite success
                         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) || "AI could not complete this request.";
+                const errorMsg = extractAgentErrorMessage(message) ||
+                    "AI could not complete this request.";
                 updateModelRun(messageAgentId, (current) => {
                     if (current.status === "done")
                         return current; // don't overwrite success
                     return { ...current, status: "error", error: errorMsg };
                 });
             }
-            else if (msgType === "agent:message:complete" || msgType === "agent:run:complete") {
+            else if (msgType === "agent:message:complete" ||
+                msgType === "agent:run:complete") {
                 const lifecycleError = extractAgentErrorMessage(message);
                 if (lifecycleError) {
                     updateModelRun(messageAgentId, (current) => ({
@@ -507,7 +596,9 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                     return;
                 }
                 const current = modelRunsRef.current[messageAgentId];
-                const rawContentToParse = latestRawContentRef.current[messageAgentId] ?? current?.rawContent ?? "";
+                const rawContentToParse = latestRawContentRef.current[messageAgentId] ??
+                    current?.rawContent ??
+                    "";
                 if (lastParsedRawRef.current[messageAgentId] === rawContentToParse) {
                     return;
                 }
@@ -521,18 +612,22 @@ 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,
                     }));
                 }
             }
         };
-        unsubscribeRef.current = editContext.addSocketMessageListener(handleMessage);
+        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) {
@@ -540,7 +635,6 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
             return;
         }
         setError(null);
-        setResult("");
         setModelRuns({});
         modelRunsRef.current = {};
         latestRawContentRef.current = {};
@@ -557,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:
@@ -569,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.
@@ -577,41 +673,39 @@ ${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;
-            const contextMode = activeProfile?.editorContextMode;
-            const shouldIncludeContext = contextMode === "onCreate" || contextMode === "live";
-            if (shouldIncludeContext) {
-                const item = editContext.currentItemDescriptor;
-                if (item) {
-                    agentContext = {
-                        items: [
-                            {
+            // Inline edits inherently act on the current field/page, so always
+            // include the current item (and any selected components) as context.
+            const item = editContext.currentItemDescriptor;
+            if (item) {
+                agentContext = {
+                    items: [
+                        {
+                            id: item.id,
+                            language: item.language,
+                            version: item.version,
+                            name: editContext.item?.name,
+                            path: editContext.item?.path,
+                        },
+                    ],
+                    // Include selected components if any
+                    components: editContext.selection?.length
+                        ? editContext.selection.map((componentId) => ({
+                            componentId,
+                            pageItem: {
                                 id: item.id,
                                 language: item.language,
                                 version: item.version,
                                 name: editContext.item?.name,
-                                path: editContext.item?.path,
                             },
-                        ],
-                        // Include selected components if any
-                        components: editContext.selection?.length
-                            ? editContext.selection.map((componentId) => ({
-                                componentId,
-                                pageItem: {
-                                    id: item.id,
-                                    language: item.language,
-                                    version: item.version,
-                                    name: editContext.item?.name,
-                                },
-                            }))
-                            : undefined,
-                        // Set the current item as the active context
-                        currentItemId: item.id,
-                    };
-                }
+                        }))
+                        : undefined,
+                    // Set the current item as the active context
+                    currentItemId: item.id,
+                };
             }
             ensureSocketListener();
             const initialRuns = {};
@@ -624,6 +718,7 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                     agentId,
                     modelId: model.id,
                     modelName: model.name,
+                    requestedResultCount,
                     status: "pending",
                     rawContent: "",
                 };
@@ -634,7 +729,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,
@@ -642,10 +737,17 @@ ${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) {
-                    const errorMsg = runErr instanceof Error ? runErr.message : "Failed to start model run";
+                    const errorMsg = runErr instanceof Error
+                        ? runErr.message
+                        : "Failed to start model run";
                     updateModelRun(run.agentId, (current) => ({
                         ...current,
                         status: "error",
@@ -674,7 +776,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(() => {
@@ -707,7 +809,7 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                 }
                 else if (matches.length > 1) {
                     // Multiple matches - check if any match is EXACTLY the buffer
-                    const exactMatch = matches.find(m => m.label.toLowerCase() === newBuffer);
+                    const exactMatch = matches.find((m) => m.label.toLowerCase() === newBuffer);
                     if (exactMatch) {
                         handleQuickAction(exactMatch);
                         setAltSearchBuffer("");
@@ -753,68 +855,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("font-medium px-0.5 rounded", isResult ? "bg-green-100 text-green-900" : "bg-violet-100 text-violet-900 italic"), children: centerText }));
+            return (_jsx("span", { className: cn("rounded px-0.5 font-medium", isResult
+                    ? "bg-feedback-green-light text-feedback-green"
+                    : "bg-neutral-grey-5 text-neutral-grey-100 italic"), children: centerText }));
         }
         // Show context with ellipsis indicators
-        return (_jsxs("div", { className: "leading-relaxed text-xs whitespace-pre-wrap", children: [contextBefore && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-400", children: "..." }), _jsx("span", { className: "text-gray-400", children: contextBefore })] })), _jsx("span", { className: cn("font-medium mx-0.5 px-0.5 rounded", isResult ? "bg-green-100 text-green-900" : "bg-violet-100 text-violet-900 italic"), children: centerText }), contextAfter && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-400", children: contextAfter }), _jsx("span", { className: "text-gray-400", children: "..." })] }))] }));
+        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-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();
@@ -824,96 +989,65 @@ ${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("bg-white/95 backdrop-blur-sm rounded-xl shadow-[0_10px_40px_rgba(0,0,0,0.1)] border border-gray-100 max-h-[80vh] flex flex-col overflow-hidden agent-inline-dialog 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-[12px] 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: "flex-shrink-0 flex items-center gap-2.5 px-4 py-3 bg-gradient-to-r from-violet-500/5 to-purple-500/5 border-b border-gray-100", children: [_jsx("div", { className: "flex items-center justify-center w-6 h-6 rounded-lg bg-violet-600 shadow-sm shadow-violet-200", children: _jsx(Sparkles, { className: "w-3.5 h-3.5 text-white" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-semibold text-gray-800 leading-tight", children: "AI Text Edit" }), conversationHistory.length > 0 && (_jsxs("span", { className: "text-[10px] text-gray-400 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("p-1.5 hover:bg-gray-100 rounded-lg transition-all duration-200 group", isLarge && "bg-violet-50 text-violet-600 hover:bg-violet-100"), title: isLarge ? "Make smaller" : "Make larger", children: _jsx(Maximize2, { className: cn("w-4 h-4 text-gray-400 group-hover:text-gray-600", isLarge && "text-violet-600") }) }), _jsx("button", { onClick: handleClose, className: "p-1.5 hover:bg-gray-100 rounded-lg transition-all duration-200 group", title: "Close", children: _jsx(X, { className: "w-4 h-4 text-gray-400 group-hover:text-gray-600" }) })] })] }), selectedText && (_jsxs("div", { className: "flex-shrink-0 px-4 py-3 bg-gray-50/50 border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2", children: [_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-200" }), "Selected Content"] }), _jsxs("div", { className: "relative max-h-48 overflow-y-auto whitespace-pre-wrap transition-all duration-300", children: [_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-0.5 bg-violet-200 rounded-full" }), _jsx("div", { className: "pl-3", children: renderTextWithContext(selectedText) })] })] })), _jsxs("div", { className: "p-4 min-h-0 flex-1 overflow-y-auto", children: [state === "input" && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [isAltPressed && (_jsxs("div", { className: "flex items-center gap-2 text-xs text-violet-600 bg-violet-50 px-2.5 py-1.5 rounded-lg animate-in fade-in duration-150", children: [_jsx("kbd", { className: "px-1.5 py-0.5 bg-violet-100 rounded text-[10px] font-mono 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) => {
-                                            const hasSvgIcon = action.icon?.trim() && (action.icon.trim().startsWith("<svg") || action.icon.trim().startsWith("<?xml"));
+            : 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-medium", 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"));
                                             const labelLower = action.label.toLowerCase();
-                                            const isMatch = isAltPressed && altSearchBuffer && labelLower.startsWith(altSearchBuffer);
-                                            const isPartialMatch = isAltPressed && altSearchBuffer && labelLower.includes(altSearchBuffer) && !isMatch;
-                                            return (_jsxs("button", { onClick: () => handleQuickAction(action), className: cn("flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg transition-all duration-200", "bg-white border border-gray-200 text-gray-600", "hover:border-violet-300 hover:text-violet-700 hover:bg-violet-50", "active:scale-95 shadow-sm hover:shadow-md", isMatch && "border-violet-400 bg-violet-100 text-violet-700 ring-2 ring-violet-300", isPartialMatch && "border-violet-200 bg-violet-50/50", isAltPressed && !isMatch && !isPartialMatch && "opacity-50"), children: [hasSvgIcon && (_jsx("div", { className: "w-3.5 h-3.5 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full shrink-0", dangerouslySetInnerHTML: {
+                                            const isMatch = isAltPressed &&
+                                                altSearchBuffer &&
+                                                labelLower.startsWith(altSearchBuffer);
+                                            const isPartialMatch = isAltPressed &&
+                                                altSearchBuffer &&
+                                                labelLower.includes(altSearchBuffer) &&
+                                                !isMatch;
+                                            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: "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();
+                                                        } })), 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));
+                                        }) })] }), _jsx(InstructionComposer, { inputRef: inputRef, value: instruction, onChange: setInstruction, onSubmit: () => {
                                     if (instruction.trim()) {
                                         executeAiModification(instruction.trim());
                                         setInstruction("");
                                     }
-                                }, className: "relative group", 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("w-full py-3 pl-3 pr-14 text-xs rounded-2xl border border-gray-200", "focus:border-violet-400 focus:ring-4 focus:ring-violet-500/10", "outline-none transition-all duration-200 bg-gray-50/30 resize-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("p-1.5 rounded-lg transition-all duration-200", "text-gray-400 hover:text-violet-600 hover:bg-violet-50", modelPopoverOpen && "text-violet-600 bg-violet-50"), title: selectedModelSummary ? `Models: ${selectedModelSummary}` : "Select models", children: _jsx(Cpu, { className: "w-3.5 h-3.5" }) }) }), _jsxs(PopoverContent, { className: "w-56 p-1.5", align: "end", sideOffset: 8, children: [_jsxs("div", { className: "flex items-center justify-between px-2 py-1", children: [_jsx("span", { className: "text-[10px] font-semibold text-gray-400 uppercase tracking-wider", children: "Models" }), _jsxs("span", { className: "text-[10px] text-violet-600 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("w-full text-left px-2 py-1.5 text-xs rounded-md transition-colors flex items-center gap-2", selectedModelIds.includes(model.id)
-                                                                        ? "bg-violet-100 text-violet-700 font-medium"
-                                                                        : "text-gray-600 hover:bg-gray-100"), children: [_jsx("span", { className: cn("w-3.5 h-3.5 rounded border flex items-center justify-center", selectedModelIds.includes(model.id)
-                                                                                ? "border-violet-600 bg-violet-600 text-white"
-                                                                                : "border-gray-300 bg-white text-transparent"), children: _jsx(Check, { className: "w-3 h-3" }) }), model.name] }, model.id))) })] })] })), _jsx("button", { type: "submit", disabled: !instruction.trim() || selectedModels.length === 0, className: cn("p-2.5 rounded-xl transition-all duration-300", instruction.trim() && selectedModels.length > 0
-                                                    ? "bg-violet-600 text-white shadow-lg shadow-violet-200 hover:bg-violet-700 hover:-translate-y-0.5"
-                                                    : "bg-gray-100 text-gray-400 cursor-not-allowed"), title: "Send (Enter)", children: _jsx(SendHorizonal, { className: "w-4 h-4" }) })] })] }), conversationHistory.length > 0 && (_jsxs("div", { className: "flex items-center justify-between pt-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-gray-400 font-medium", children: [_jsx(History, { className: "w-3 h-3" }), "Conversation active"] }), _jsxs("button", { onClick: handleStartOver, className: "text-[10px] font-bold text-violet-600 hover:text-violet-700 uppercase tracking-tight flex items-center gap-1 transition-colors", children: [_jsx(RotateCcw, { className: "w-3 h-3" }), "Clear History"] })] })), error && (_jsxs("div", { className: "text-xs text-red-600 bg-red-50 px-3 py-2 rounded-lg border border-red-100 flex items-start gap-2 animate-in fade-in slide-in-from-top-1 duration-200", children: [_jsx(X, { className: "w-3.5 h-3.5 mt-0.5 shrink-0" }), _jsx("span", { children: error })] }))] })), state === "preview" && (_jsxs("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [Object.keys(modelRuns).length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-bold text-gray-500 uppercase tracking-wider", children: [_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-400" }), 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("min-w-[280px] flex-1 rounded-xl p-3 flex flex-col gap-2 border", run.status === "done" && "border-green-100 bg-green-50/40", run.status === "error" && "border-red-100 bg-red-50/30", (run.status === "pending" || run.status === "streaming") && "border-violet-100 bg-violet-50/30"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-xs font-semibold text-gray-700 truncate", children: run.modelName }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsx("button", { type: "button", onClick: () => handleOpenAgentInSidePanel(run.agentId), className: "p-1 rounded text-gray-400 hover:text-violet-600 hover:bg-violet-50 transition-colors", title: "Open agent in side panel", children: _jsx(Bug, { className: "w-3 h-3" }) }), (run.status === "pending" || run.status === "streaming") && (_jsx("button", { type: "button", onClick: () => handleStopModelRun(run.agentId), className: "p-1.5 rounded-lg text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors", title: "Stop this model", children: _jsx(StopCircle, { className: "w-4 h-4" }) })), _jsxs(Badge, { variant: "outline", className: cn("text-[10px]", run.status === "done" && "border-green-300 text-green-700", run.status === "error" && "border-red-300 text-red-700", (run.status === "pending" || run.status === "streaming") && "border-violet-300 text-violet-700"), children: [run.status === "pending" && "Queued", run.status === "streaming" && "Streaming…", run.status === "done" && "Ready", run.status === "error" && "Error"] })] })] }), _jsxs("div", { className: cn("text-xs whitespace-pre-wrap rounded-lg p-2 overflow-y-auto border min-h-[80px]", run.status === "done" && "bg-white/80 border-green-100", run.status === "error" && "bg-white/80 border-red-100 text-red-700", (run.status === "pending" || run.status === "streaming") && "bg-white/60 border-violet-100"), style: { maxHeight: isLarge ? "420px" : "200px" }, children: [run.status === "pending" && (_jsx("span", { className: "text-gray-400 italic", children: "Starting\u2026" })), run.status === "streaming" && (() => {
-                                                            const preview = extractStreamingPreview(run.rawContent ?? "");
-                                                            return preview ? (renderTextWithContext(preview, false)) : (_jsx("span", { className: "text-gray-400 italic", children: "Waiting for response\u2026" }));
-                                                        })(), run.status === "done" && run.replacementText != null && (renderTextWithContext(run.replacementText, true)), run.status === "error" && (_jsx("div", { className: "text-red-700", children: run.error || "Something went wrong." }))] }), run.status === "done" && run.replacementText != null && (_jsxs(Button, { size: "sm", onClick: () => handleUseRunResult(run.replacementText), className: "mt-2 bg-violet-600 hover:bg-violet-700 text-white rounded-lg font-semibold w-full", children: [_jsx(Check, { className: "w-4 h-4 mr-1.5" }), "Use this"] }))] }, run.agentId))) })] })), _jsxs("form", { onSubmit: (e) => {
-                                    e.preventDefault();
+                                }, 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-medium", 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 ? (_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" &&
+                                                            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-medium", 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-medium 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: "relative group", 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("w-full min-h-[80px] py-3 pl-3 pr-14 text-xs rounded-2xl border border-gray-200", "focus:border-violet-400 focus:ring-4 focus:ring-violet-500/10", "outline-none transition-all duration-200 bg-gray-50/30 resize-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("p-1.5 rounded-lg transition-all duration-200", "text-gray-400 hover:text-violet-600 hover:bg-violet-50", modelPopoverOpen && "text-violet-600 bg-violet-50"), title: selectedModelSummary ? `Models: ${selectedModelSummary}` : "Select models", children: _jsx(Cpu, { className: "w-3.5 h-3.5" }) }) }), _jsxs(PopoverContent, { className: "w-56 p-1.5", align: "end", sideOffset: 8, children: [_jsxs("div", { className: "flex items-center justify-between px-2 py-1", children: [_jsx("span", { className: "text-[10px] font-semibold text-gray-400 uppercase tracking-wider", children: "Models" }), _jsxs("span", { className: "text-[10px] text-violet-600 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("w-full text-left px-2 py-1.5 text-xs rounded-md transition-colors flex items-center gap-2", selectedModelIds.includes(model.id)
-                                                                        ? "bg-violet-100 text-violet-700 font-medium"
-                                                                        : "text-gray-600 hover:bg-gray-100"), children: [_jsx("span", { className: cn("w-3.5 h-3.5 rounded border flex items-center justify-center", selectedModelIds.includes(model.id)
-                                                                                ? "border-violet-600 bg-violet-600 text-white"
-                                                                                : "border-gray-300 bg-white text-transparent"), children: _jsx(Check, { className: "w-3 h-3" }) }), model.name] }, model.id))) })] })] })), _jsx("button", { type: "submit", disabled: !instruction.trim() || selectedModels.length === 0, className: cn("p-2.5 rounded-xl transition-all duration-300", instruction.trim() && selectedModels.length > 0
-                                                    ? "bg-violet-600 text-white shadow-lg shadow-violet-200 hover:bg-violet-700 hover:-translate-y-0.5"
-                                                    : "bg-gray-100 text-gray-400 cursor-not-allowed"), title: "Refine (Enter)", children: _jsx(Wand2, { className: "w-4 h-4" }) })] })] }), _jsxs("div", { className: "flex gap-2.5 pt-1", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleStartOver, className: "flex-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-xl font-medium", children: [_jsx(RotateCcw, { className: "w-4 h-4 mr-2" }), "Discard"] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: handleRetry, disabled: conversationHistory.length === 0, className: "flex-1 text-violet-600 hover:text-violet-700 hover:bg-violet-50 rounded-xl font-medium disabled:opacity-50 disabled:pointer-events-none", title: "Run the same request again", children: [_jsx(RotateCw, { className: "w-4 h-4 mr-2" }), "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