@parhelia/core 0.1.12903 → 0.1.12905

package/dist/editor/ai/InlineAiDialog.js

@@ -1,25 +1,22 @@
 "use client";
-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 { 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 { 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 { CloseButton } from "../../components/ui/close-button";
+import { Popover, PopoverTrigger, PopoverContent } from "../../components/ui/popover";
 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();
@@ -40,7 +37,7 @@ function getStoredModelIds(profileId) {
                 }
             }
         }
-        return Array.isArray(ids) ? ids : null;
+        return Array.isArray(ids) && ids.length > 0 ? ids : null;
     }
     catch {
         return null;
@@ -67,65 +64,45 @@ function setStoredModelIds(profileId, modelIds) {
         // ignore
     }
 }
-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).
+const AI_TEXT_EDIT_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)) {
-        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;
+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;
             }
-            if (ch === '"') {
-                inString = true;
-                continue;
+            else if (ch === "\\") {
+                escaped = true;
             }
-            if (ch === "{")
-                depth++;
-            if (ch === "}") {
-                depth--;
-                if (depth === 0) {
-                    candidates.push(input.slice(start, i + 1));
-                    break;
-                }
+            else if (ch === "\"") {
+                inString = false;
+            }
+            continue;
+        }
+        if (ch === "\"") {
+            inString = true;
+            continue;
+        }
+        if (ch === "{")
+            depth++;
+        if (ch === "}") {
+            depth--;
+            if (depth === 0) {
+                return input.slice(start, i + 1);
             }
         }
     }
-    return candidates;
+    return null;
 }
 function cleanAgentResponse(raw) {
     return raw
@@ -179,74 +156,53 @@ function extractStreamingPreview(raw) {
         return body;
     }
 }
-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 };
-        }
+function parseAiTextEditResponse(raw) {
+    const cleaned = cleanAgentResponse(raw);
+    if (!cleaned) {
+        return { error: "AI returned an empty response." };
     }
-    return null;
-}
-function tryParseAiTextEditJson(json) {
     try {
-        let parsed = JSON.parse(json);
+        let parsed = JSON.parse(cleaned);
         // Some models return JSON wrapped as a JSON string; parse one extra level.
         if (typeof parsed === "string") {
             const reparsed = JSON.parse(parsed);
             parsed = reparsed;
         }
-        return coerceAiTextEditResponse(parsed);
+        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`." };
     }
     catch {
-        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." };
+        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 {
-                error: "AI response is missing `replacementText`, `replacementTexts`, or `error`.",
-            };
-        }
-        catch {
-            // Fall through to candidate extraction for mixed prose/JSON responses.
         }
-    }
-    const candidates = extractJsonObjectCandidates(cleaned);
-    for (const candidate of candidates) {
-        const recovered = tryParseAiTextEditJson(candidate);
-        if (recovered) {
-            return recovered;
+        if (cleaned && !cleaned.includes("{")) {
+            return { error: cleaned.slice(0, 300) };
         }
+        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 ?? {};
@@ -273,69 +229,11 @@ 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([]);
@@ -345,6 +243,8 @@ 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);
@@ -353,8 +253,6 @@ 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);
@@ -367,10 +265,8 @@ 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;
+        const selected = selectedModelIds.map((id) => byId.get(id)).filter(Boolean);
+        return selected.length ? selected : availableModels.slice(0, 1);
     }, [selectedModelIds, availableModels]);
     const selectedModelSummary = useMemo(() => {
         if (!selectedModels.length)
@@ -379,20 +275,25 @@ 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);
                 }
             }
@@ -417,10 +318,7 @@ 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 (stored && stored.length === 0) {
-                        setSelectedModelIds([]);
-                    }
-                    else if (validStored?.length) {
+                    if (validStored?.length) {
                         setSelectedModelIds(validStored);
                     }
                     else if (defaultModelId) {
@@ -439,12 +337,16 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
     }, [modelRuns]);
     // Persist model selection to localStorage when it or profileId changes
     useEffect(() => {
-        if (profileId && activeProfile) {
+        if (profileId && selectedModelIds.length > 0) {
             setStoredModelIds(profileId, selectedModelIds);
         }
-    }, [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.
+    }, [profileId, selectedModelIds]);
+    // Focus input on mount
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
     const evaluateRunCompletion = useCallback((runs) => {
         const values = Object.values(runs);
         if (!values.length)
@@ -452,13 +354,19 @@ 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.replacementTexts?.length || run.replacementText?.length));
+        const doneRuns = values.filter((run) => run.status === "done" && 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
     }, []);
@@ -482,6 +390,13 @@ 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();
@@ -496,6 +411,22 @@ 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 () => {
@@ -537,9 +468,7 @@ 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",
@@ -547,45 +476,27 @@ 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) => ({
@@ -596,9 +507,7 @@ 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;
                 }
@@ -612,22 +521,18 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                     }));
                 }
                 else {
-                    const replacementTexts = parsed.replacementTexts ??
-                        (parsed.replacementText != null ? [parsed.replacementText] : []);
                     updateModelRun(messageAgentId, (run) => ({
                         ...run,
                         status: "done",
-                        replacementText: replacementTexts[0] ?? "",
-                        replacementTexts,
+                        replacementText: parsed.replacementText ?? "",
                         error: undefined,
                     }));
                 }
             }
         };
-        unsubscribeRef.current =
-            editContext.addSocketMessageListener(handleMessage);
+        unsubscribeRef.current = editContext.addSocketMessageListener(handleMessage);
     }, [editContext, updateModelRun]);
-    const executeAiModification = useCallback(async (customInstruction, resultCount = 1) => {
+    const executeAiModification = useCallback(async (customInstruction) => {
         if (!editContext)
             return;
         if (!selectedModels.length) {
@@ -635,6 +540,7 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
             return;
         }
         setError(null);
+        setResult("");
         setModelRuns({});
         modelRunsRef.current = {};
         latestRawContentRef.current = {};
@@ -651,8 +557,6 @@ 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:
@@ -665,7 +569,7 @@ ${selectedText}
 ${customInstruction}
 
 Return ONLY the modified version of the selected text, not the entire field.
-${responseFormatInstruction}`;
+${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
             }
             else {
                 message = `${contextInfo}I need you to generate text at the cursor position.
@@ -673,39 +577,41 @@ ${responseFormatInstruction}`;
 ${customInstruction}
 
 Return ONLY the text to insert at the cursor position, not the entire field.
-${responseFormatInstruction}`;
+${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
             }
             setConversationHistory((prev) => [...prev, customInstruction]);
             let agentContext = undefined;
-            // 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: {
+            const contextMode = activeProfile?.editorContextMode;
+            const shouldIncludeContext = contextMode === "onCreate" || contextMode === "live";
+            if (shouldIncludeContext) {
+                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,
                             },
-                        }))
-                        : undefined,
-                    // Set the current item as the active context
-                    currentItemId: item.id,
-                };
+                        ],
+                        // 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,
+                    };
+                }
             }
             ensureSocketListener();
             const initialRuns = {};
@@ -718,7 +624,6 @@ ${responseFormatInstruction}`;
                     agentId,
                     modelId: model.id,
                     modelName: model.name,
-                    requestedResultCount,
                     status: "pending",
                     rawContent: "",
                 };
@@ -729,7 +634,7 @@ ${responseFormatInstruction}`;
             await Promise.all(Object.values(initialRuns).map(async (run) => {
                 subscribeAgentInline(run.agentId);
                 try {
-                    await withTimeout(startAgent({
+                    await startAgent({
                         agentId: run.agentId,
                         message,
                         sessionId: editContext.sessionId,
@@ -737,17 +642,10 @@ ${responseFormatInstruction}`;
                         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",
@@ -776,7 +674,7 @@ ${responseFormatInstruction}`;
         updateModelRun,
     ]);
     const handleQuickAction = useCallback((action) => {
-        executeAiModification(action.instruction, action.resultCount);
+        executeAiModification(action.instruction);
     }, [executeAiModification]);
     // ALT+letter quick select for quick actions
     useEffect(() => {
@@ -809,7 +707,7 @@ ${responseFormatInstruction}`;
                 }
                 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("");
@@ -855,131 +753,68 @@ ${responseFormatInstruction}`;
             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]);
-    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 toggleLarge = useCallback(() => {
+        setIsLarge((prev) => !prev);
+    }, []);
     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-neutral-grey-5 text-neutral-grey-100 italic"), children: centerText }));
+            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 }));
         }
         // 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-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: "..." })] }))] }));
+        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: "..." })] }))] }));
     };
-    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();
-            handleClose();
+            if (state === "preview") {
+                handleTryAgain();
+            }
+            else {
+                handleClose();
+            }
         }
-    }, [handleClose]);
+    }, [state, handleTryAgain, handleClose]);
     const handleTextareaKeyDown = useCallback((e) => {
         if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
@@ -989,65 +824,96 @@ ${responseFormatInstruction}`;
             }
         }
     }, [instruction, executeAiModification]);
-    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
+    // 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
             ? {
                 position: "fixed",
-                left: position.x,
-                top: position.y,
-                zIndex: 1100,
+                left: clampedPosition.x,
+                top: clampedPosition.y,
+                zIndex: 95,
             }
-            : 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"));
+            : 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"));
                                             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 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: {
+                                            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: {
                                                             __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));
-                                        }) })] }), _jsx(InstructionComposer, { inputRef: inputRef, value: instruction, onChange: setInstruction, onSubmit: () => {
+                                                        } })), 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();
                                     if (instruction.trim()) {
                                         executeAiModification(instruction.trim());
                                         setInstruction("");
                                     }
-                                }, 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: () => {
+                                }, 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();
                                     if (instruction.trim()) {
                                         executeAiModification(instruction.trim());
                                         setInstruction("");
                                     }
-                                }, 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 })] }))] })] }));
+                                }, 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"] })] })] }))] })] }));
 }
 export default InlineAiDialog;
 //# sourceMappingURL=InlineAiDialog.js.map