@parhelia/core 0.1.12554 → 0.1.12555

package/dist/editor/ai/InlineAiDialog.js

@@ -1,188 +1,27 @@
 "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, } from "lucide-react";
+import { Sparkles, Check, X, Loader2, SendHorizonal, Wand2, RotateCcw, Type, Scissors, Maximize2, Feather, Briefcase, History, HelpCircle, Cpu, } 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 { cn } from "../../lib/utils";
-import { sanitizeSvg } from "../../lib/sanitize";
 import { useEditContext } from "../client/editContext";
 import { startAgent, closeAgent } from "../services/agentService";
 import { getAiTextEditPrompts, getEditorSettings } from "../services/systemService";
 import { loadAiProfiles } from "../services/aiService";
-import { localStorageService } from "../services/localStorageService";
 // Default Profile ID for the Inline Text Editor profile
 const DEFAULT_INLINE_TEXT_EDITOR_PROFILE_ID = "d7e8f9a0-b1c2-4d3e-a5f6-789012345678";
-const AI_TEXT_EDIT_MODELS_STORAGE_KEY = "aiTextEdit.selectedModelIds";
-/** 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();
-}
-function getStoredModelIds(profileId) {
-    try {
-        const parsed = localStorageService.getItem(AI_TEXT_EDIT_MODELS_STORAGE_KEY);
-        if (!parsed)
-            return null;
-        const normalizedKey = normalizeProfileIdForStorage(profileId);
-        // Prefer exact normalized key, then find any key that normalizes to the same
-        let ids = parsed?.[normalizedKey] ?? null;
-        if (!ids && parsed && typeof parsed === "object") {
-            for (const key of Object.keys(parsed)) {
-                if (normalizeProfileIdForStorage(key) === normalizedKey) {
-                    ids = parsed[key] ?? null;
-                    break;
-                }
-            }
-        }
-        return Array.isArray(ids) && ids.length > 0 ? ids : null;
-    }
-    catch {
-        return null;
-    }
-}
-function setStoredModelIds(profileId, modelIds) {
-    try {
-        const parsed = localStorageService.getItem(AI_TEXT_EDIT_MODELS_STORAGE_KEY) || {};
-        const normalizedKey = normalizeProfileIdForStorage(profileId);
-        // Merge: keep other profiles' keys as-is, but normalize keys we care about so we don't accumulate duplicates
-        const data = {};
-        const seen = new Set();
-        for (const key of Object.keys(parsed)) {
-            const n = normalizeProfileIdForStorage(key);
-            if (seen.has(n))
-                continue;
-            seen.add(n);
-            data[n] = parsed[key] ?? [];
-        }
-        data[normalizedKey] = modelIds;
-        localStorageService.setItem(AI_TEXT_EDIT_MODELS_STORAGE_KEY, data);
-    }
-    catch {
-        // ignore
-    }
-}
-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 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;
-            }
-            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 null;
-}
-function cleanAgentResponse(raw) {
-    return raw
-        .trim()
-        .replace(/^```[\s\S]*?\n/, "")
-        .replace(/\n```$/, "")
-        .trim();
-}
-function parseAiTextEditResponse(raw) {
-    const cleaned = cleanAgentResponse(raw);
-    if (!cleaned) {
-        return { error: "AI returned an empty response." };
-    }
-    try {
-        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;
-        }
-        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 {
-        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
-            }
-        }
-        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 ?? {};
-    const payloadData = payload?.data ?? {};
-    const candidates = [
-        payload?.error,
-        payload?.Error,
-        payload?.message,
-        payload?.Message,
-        payload?.statusMessage,
-        payload?.StatusMessage,
-        payloadData?.error,
-        payloadData?.Error,
-        payloadData?.message,
-        payloadData?.Message,
-        payloadData?.statusMessage,
-        payloadData?.StatusMessage,
-        message?.data?.error,
-    ];
-    for (const candidate of candidates) {
-        if (typeof candidate === "string" && candidate.trim()) {
-            return candidate.trim();
-        }
-    }
-    return null;
-}
+// Map of supported icons for quick actions
+const ICON_MAP = {
+    Type,
+    Scissors,
+    Maximize2,
+    Feather,
+    Briefcase,
+    Sparkles,
+    Wand2,
+};
 export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter, onAccept, onClose, position, className, }) {
     const editContext = useEditContext();
     const [state, setState] = useState("input");
@@ -193,18 +32,15 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
     const [quickActions, setQuickActions] = useState([]);
     const [profileId, setProfileId] = useState(DEFAULT_INLINE_TEXT_EDITOR_PROFILE_ID);
     const [activeProfile, setActiveProfile] = useState(undefined);
-    const [selectedModelIds, setSelectedModelIds] = useState([]);
-    const [modelRuns, setModelRuns] = useState({});
+    const [selectedModelId, setSelectedModelId] = useState(undefined);
     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());
+    // Agent state - persisted across refinements
+    const agentIdRef = useRef(null);
     const unsubscribeRef = useRef(null);
-    const modelRunsRef = useRef({});
-    const latestRawContentRef = useRef({});
-    const lastParsedRawRef = useRef({});
+    const resultRef = useRef("");
     // Model popover state
     const [modelPopoverOpen, setModelPopoverOpen] = useState(false);
     // ALT+letter quick select state
@@ -214,29 +50,14 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
     // Available models from the profile
     const availableModels = activeProfile?.models || [];
     const hasMultipleModels = availableModels.length > 1;
-    // Build the selected model list (fallback to first model if somehow stale)
-    const selectedModels = useMemo(() => {
-        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);
-    }, [selectedModelIds, availableModels]);
-    const selectedModelSummary = useMemo(() => {
-        if (!selectedModels.length)
+    // Get the selected model name for display
+    const selectedModelName = useMemo(() => {
+        if (!selectedModelId || !availableModels.length)
             return null;
-        if (selectedModels.length === 1)
-            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]);
+        const model = availableModels.find(m => m.id === selectedModelId);
+        return model?.name || null;
+    }, [selectedModelId, availableModels]);
+    // Load settings and prompts on mount
     useEffect(() => {
         const loadSettings = async () => {
             try {
@@ -264,19 +85,13 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
                 return;
             try {
                 const profiles = await loadAiProfiles();
-                const normalizedProfileId = normalizeProfileIdForStorage(profileId);
-                const profile = profiles.find((p) => normalizeProfileIdForStorage(p.id) === normalizedProfileId);
+                const profile = profiles.find(p => p.id === profileId);
                 if (profile) {
                     setActiveProfile(profile);
-                    const availableModelIds = new Set((profile.models ?? []).map((m) => m.id));
+                    // Set default model
                     const defaultModelId = profile.defaultModelId || profile.models?.[0]?.id;
-                    const stored = getStoredModelIds(profileId);
-                    const validStored = stored?.filter((id) => availableModelIds.has(id));
-                    if (validStored?.length) {
-                        setSelectedModelIds(validStored);
-                    }
-                    else if (defaultModelId) {
-                        setSelectedModelIds([defaultModelId]);
+                    if (defaultModelId) {
+                        setSelectedModelId(defaultModelId);
                     }
                 }
             }
@@ -286,230 +101,136 @@ export function InlineAiDialog({ selectedText = "", contextBefore, contextAfter,
         };
         loadProfile();
     }, [profileId]);
-    useEffect(() => {
-        modelRunsRef.current = modelRuns;
-    }, [modelRuns]);
-    // Persist model selection to localStorage when it or profileId changes
-    useEffect(() => {
-        if (profileId && selectedModelIds.length > 0) {
-            setStoredModelIds(profileId, selectedModelIds);
-        }
-    }, [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)
-            return;
-        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);
-        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
-    }, []);
-    const updateModelRun = useCallback((agentId, updater) => {
-        setModelRuns((prev) => {
-            const current = prev[agentId];
-            if (!current)
-                return prev;
-            const updated = updater(current);
-            const next = { ...prev, [agentId]: updated };
-            modelRunsRef.current = next;
-            evaluateRunCompletion(next);
-            return next;
-        });
-    }, [evaluateRunCompletion]);
-    const subscribeAgent = useCallback((agentId) => {
-        const socket = globalThis.editorSocket;
-        if (!socket || socket.readyState !== WebSocket.OPEN) {
-            console.warn("[InlineAiDialog] WebSocket not available");
-            return;
-        }
-        socket.send(JSON.stringify({
-            type: "agent:subscribe",
-            agentId,
-        }));
-    }, []);
-    const unsubscribeAllAgents = useCallback(() => {
-        const socket = globalThis.editorSocket;
-        if (!socket || socket.readyState !== WebSocket.OPEN)
-            return;
-        for (const agentId of activeAgentIdsRef.current) {
-            socket.send(JSON.stringify({
-                type: "agent:unsubscribe",
-                agentId,
-            }));
-        }
-    }, []);
-    const closeAllActiveAgents = useCallback(() => {
-        for (const agentId of activeAgentIdsRef.current) {
-            closeAgent(agentId).catch(() => { });
-        }
-        activeAgentIdsRef.current.clear();
-        latestRawContentRef.current = {};
-        lastParsedRawRef.current = {};
-    }, []);
-    const handleStopModelRun = useCallback((agentId) => {
-        activeAgentIdsRef.current.delete(agentId);
-        delete latestRawContentRef.current[agentId];
-        delete lastParsedRawRef.current[agentId];
-        closeAgent(agentId).catch(() => { });
-        updateModelRun(agentId, (current) => ({
-            ...current,
-            status: "error",
-            error: "Stopped by user",
-        }));
-    }, [updateModelRun]);
     // Cleanup on unmount
     useEffect(() => {
         return () => {
-            unsubscribeAllAgents();
+            // Unsubscribe from WebSocket
             if (unsubscribeRef.current) {
                 unsubscribeRef.current();
             }
-            closeAllActiveAgents();
+            // Close the agent if it exists
+            if (agentIdRef.current) {
+                closeAgent(agentIdRef.current).catch(() => { });
+            }
         };
-    }, [unsubscribeAllAgents, closeAllActiveAgents]);
-    const ensureSocketListener = useCallback(() => {
-        if (!editContext?.addSocketMessageListener || unsubscribeRef.current) {
+    }, []);
+    // Subscribe to WebSocket messages for the agent
+    const subscribeToAgent = useCallback((agentId) => {
+        const socket = globalThis.editorSocket;
+        if (!socket || socket.readyState !== WebSocket.OPEN) {
+            console.warn("[InlineAiDialog] WebSocket not available");
             return;
         }
-        const handleMessage = (message) => {
-            const messageAgentId = message.agentId || message.payload?.agentId;
-            if (!messageAgentId || !activeAgentIdsRef.current.has(messageAgentId)) {
-                return;
-            }
-            const msgType = message.type;
-            if (msgType === "agent:run:delta") {
-                const deltaData = message.payload?.data;
-                const content = deltaData?.deltaContent || "";
-                const isIncremental = deltaData?.isIncremental !== false;
-                if (!content)
+        // Send subscription message
+        socket.send(JSON.stringify({
+            type: "agent:subscribe",
+            agentId: agentId,
+        }));
+        // Add message listener via editContext
+        if (editContext?.addSocketMessageListener) {
+            const handleMessage = (message) => {
+                // Only handle messages for our agent
+                if (message.agentId !== agentId && message.payload?.agentId !== agentId) {
                     return;
-                const previousRaw = latestRawContentRef.current[messageAgentId] || "";
-                const nextRaw = isIncremental ? previousRaw + content : content;
-                latestRawContentRef.current[messageAgentId] = nextRaw;
-                const existingRun = modelRunsRef.current[messageAgentId];
-                if (existingRun) {
-                    modelRunsRef.current = {
-                        ...modelRunsRef.current,
-                        [messageAgentId]: {
-                            ...existingRun,
-                            status: "streaming",
-                            rawContent: nextRaw,
-                        },
-                    };
-                }
-                updateModelRun(messageAgentId, (current) => {
-                    const nextRawContent = isIncremental ? current.rawContent + content : content;
-                    return {
-                        ...current,
-                        status: "streaming",
-                        rawContent: nextRawContent,
-                    };
-                });
-            }
-            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();
-                if (normalizedStatus === "error") {
-                    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:run:error" || msgType === "agent:error") {
-                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") {
-                const lifecycleError = extractAgentErrorMessage(message);
-                if (lifecycleError) {
-                    updateModelRun(messageAgentId, (current) => ({
-                        ...current,
-                        status: "error",
-                        error: lifecycleError,
-                    }));
-                    return;
+                const msgType = message.type;
+                if (msgType === "agent:run:delta") {
+                    // Content chunks come via agent:run:delta with data.deltaContent
+                    const deltaData = message.payload?.data;
+                    const content = deltaData?.deltaContent || "";
+                    const isIncremental = deltaData?.isIncremental !== false;
+                    if (content) {
+                        if (isIncremental) {
+                            // Incremental: append to existing
+                            resultRef.current += content;
+                        }
+                        else {
+                            // Non-incremental: replace with totalContent or use deltaContent as full content
+                            resultRef.current = content;
+                        }
+                        // Clean up markdown formatting
+                        const cleanResult = resultRef.current
+                            .replace(/^```[\s\S]*?\n/, "")
+                            .replace(/\n```$/, "")
+                            .trim();
+                        setResult(cleanResult);
+                    }
                 }
-                const current = modelRunsRef.current[messageAgentId];
-                const rawContentToParse = latestRawContentRef.current[messageAgentId] ?? current?.rawContent ?? "";
-                if (lastParsedRawRef.current[messageAgentId] === rawContentToParse) {
-                    return;
+                else if (msgType === "agent:message:complete" || msgType === "agent:run:complete") {
+                    // Message complete - switch to preview state
+                    setState("preview");
                 }
-                lastParsedRawRef.current[messageAgentId] = rawContentToParse;
-                const parsed = parseAiTextEditResponse(rawContentToParse);
-                if (parsed.error) {
-                    updateModelRun(messageAgentId, (run) => ({
-                        ...run,
-                        status: "error",
-                        error: parsed.error,
-                    }));
+                else if (msgType === "agent:error") {
+                    // Error occurred
+                    const errorMsg = message.payload?.error || message.data?.error || "An error occurred";
+                    setError(errorMsg);
+                    setState("input");
                 }
-                else {
-                    updateModelRun(messageAgentId, (run) => ({
-                        ...run,
-                        status: "done",
-                        replacementText: parsed.replacementText ?? "",
-                        error: undefined,
-                    }));
+                else if (msgType === "agent:status:update") {
+                    // Status update - check for running/completed
+                    const status = message.payload?.status;
+                    if (status === "completed" || status === "idle") {
+                        setState("preview");
+                    }
+                    else if (status === "error") {
+                        setError(message.payload?.message || "Agent error");
+                        setState("input");
+                    }
                 }
+            };
+            unsubscribeRef.current = editContext.addSocketMessageListener(handleMessage);
+        }
+    }, [editContext]);
+    // Unsubscribe from current agent
+    const unsubscribeFromAgent = useCallback(() => {
+        if (unsubscribeRef.current) {
+            unsubscribeRef.current();
+            unsubscribeRef.current = null;
+        }
+        if (agentIdRef.current) {
+            const socket = globalThis.editorSocket;
+            if (socket && socket.readyState === WebSocket.OPEN) {
+                socket.send(JSON.stringify({
+                    type: "agent:unsubscribe",
+                    agentId: agentIdRef.current,
+                }));
             }
-        };
-        unsubscribeRef.current = editContext.addSocketMessageListener(handleMessage);
-    }, [editContext, updateModelRun]);
+        }
+    }, []);
     const executeAiModification = useCallback(async (customInstruction) => {
         if (!editContext)
             return;
-        if (!selectedModels.length) {
-            setError("Select at least one model.");
-            return;
-        }
+        setState("loading");
         setError(null);
+        resultRef.current = "";
         setResult("");
-        setModelRuns({});
-        modelRunsRef.current = {};
-        latestRawContentRef.current = {};
-        lastParsedRawRef.current = {};
-        unsubscribeAllAgents();
-        closeAllActiveAgents();
         try {
-            // Build the message with context around the selection if available
-            const hasContext = contextBefore || contextAfter;
-            const contextInfo = hasContext
-                ? `CONTEXT (text surrounding the selection):
+            // Create new agent ID if this is first request, otherwise reuse for refinement
+            const isNewAgent = !agentIdRef.current;
+            if (isNewAgent) {
+                agentIdRef.current = crypto.randomUUID();
+            }
+            const agentId = agentIdRef.current;
+            // Build the message - include context on first message
+            let message;
+            if (isNewAgent) {
+                // Include context around the selection if available
+                const hasContext = contextBefore || contextAfter;
+                const contextInfo = hasContext
+                    ? `CONTEXT (text surrounding the selection):
 Before: "${contextBefore || ""}"
 After: "${contextAfter || ""}"
 
 `
-                : "";
-            let message;
-            if (selectedText) {
-                message = `${contextInfo}I need you to modify ONLY the following selected portion of the text:
+                    : "";
+                if (selectedText) {
+                    message = `${contextInfo}I need you to modify ONLY the following selected portion of the text:
 
 SELECTED TEXT TO MODIFY:
 """
@@ -518,22 +239,31 @@ ${selectedText}
 
 ${customInstruction}
 
-Return ONLY the modified version of the selected text, not the entire field.
-${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
-            }
-            else {
-                message = `${contextInfo}I need you to generate text at the cursor position.
+Remember: Return ONLY the modified version of the selected text, not the entire field.`;
+                }
+                else {
+                    message = `${contextInfo}I need you to generate text at the cursor position.
 
 ${customInstruction}
 
-Return ONLY the text to insert at the cursor position, not the entire field.
-${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
+Remember: Return ONLY the text to insert at the cursor position, not the entire field.`;
+                }
+            }
+            else {
+                // For refinements, just send the instruction
+                message = customInstruction;
             }
+            // Subscribe to WebSocket before starting
+            if (isNewAgent) {
+                subscribeToAgent(agentId);
+            }
+            // Track conversation history
             setConversationHistory((prev) => [...prev, customInstruction]);
+            // Build context based on profile's editorContextMode setting
             let agentContext = undefined;
             const contextMode = activeProfile?.editorContextMode;
             const shouldIncludeContext = contextMode === "onCreate" || contextMode === "live";
-            if (shouldIncludeContext) {
+            if (shouldIncludeContext && isNewAgent) {
                 const item = editContext.currentItemDescriptor;
                 if (item) {
                     agentContext = {
@@ -563,66 +293,25 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                     };
                 }
             }
-            ensureSocketListener();
-            const initialRuns = {};
-            for (const model of selectedModels) {
-                const agentId = crypto.randomUUID();
-                activeAgentIdsRef.current.add(agentId);
-                latestRawContentRef.current[agentId] = "";
-                delete lastParsedRawRef.current[agentId];
-                initialRuns[agentId] = {
-                    agentId,
-                    modelId: model.id,
-                    modelName: model.name,
-                    status: "pending",
-                    rawContent: "",
-                };
-            }
-            setModelRuns(initialRuns);
-            modelRunsRef.current = initialRuns;
-            setState("preview"); // Show results immediately side-by-side as they stream in
-            await Promise.all(Object.values(initialRuns).map(async (run) => {
-                subscribeAgent(run.agentId);
-                try {
-                    await startAgent({
-                        agentId: run.agentId,
-                        message,
-                        sessionId: editContext.sessionId,
-                        profileId: profileId,
-                        mode: "autonomous",
-                        model: run.modelId,
-                        context: agentContext,
-                    });
-                }
-                catch (runErr) {
-                    const errorMsg = runErr instanceof Error ? runErr.message : "Failed to start model run";
-                    updateModelRun(run.agentId, (current) => ({
-                        ...current,
-                        status: "error",
-                        error: errorMsg,
-                    }));
-                }
-            }));
+            // Start the agent
+            const request = {
+                agentId,
+                message,
+                sessionId: editContext.sessionId,
+                profileId: profileId,
+                mode: "autonomous",
+                model: selectedModelId,
+                context: agentContext,
+            };
+            console.log("[InlineAiDialog] Starting agent:", agentId, agentContext ? "with context" : "without context");
+            await startAgent(request);
         }
         catch (err) {
             console.error("AI modification error:", err);
             setError(err instanceof Error ? err.message : "An error occurred");
             setState("input");
         }
-    }, [
-        editContext,
-        selectedText,
-        contextBefore,
-        contextAfter,
-        profileId,
-        activeProfile,
-        selectedModels,
-        closeAllActiveAgents,
-        unsubscribeAllAgents,
-        ensureSocketListener,
-        subscribeAgent,
-        updateModelRun,
-    ]);
+    }, [editContext, selectedText, contextBefore, contextAfter, subscribeToAgent, profileId, selectedModelId, activeProfile]);
     const handleQuickAction = useCallback((action) => {
         executeAiModification(action.instruction);
     }, [executeAiModification]);
@@ -698,50 +387,38 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
             }
         };
     }, [state, isAltPressed, altSearchBuffer, quickActions, handleQuickAction]);
-    const handleUseRunResult = useCallback((replacementText) => {
-        if (!replacementText)
-            return;
-        onAccept(replacementText);
-    }, [onAccept]);
-    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 handleAccept = useCallback(() => {
+        if (result) {
+            onAccept(result);
+        }
+    }, [result, onAccept]);
     const handleTryAgain = useCallback(() => {
         // Go back to input state to refine
         setState("input");
         setResult("");
+        resultRef.current = "";
+        // Keep the agent for conversation history
     }, []);
-    const handleRetry = useCallback(() => {
-        const lastInstruction = conversationHistory[conversationHistory.length - 1];
-        if (lastInstruction) {
-            executeAiModification(lastInstruction);
-        }
-    }, [conversationHistory, executeAiModification]);
     const handleStartOver = useCallback(() => {
-        unsubscribeAllAgents();
-        closeAllActiveAgents();
-        setModelRuns({});
-        modelRunsRef.current = {};
-        latestRawContentRef.current = {};
-        lastParsedRawRef.current = {};
+        // Close existing agent and start fresh
+        unsubscribeFromAgent();
+        if (agentIdRef.current) {
+            closeAgent(agentIdRef.current).catch(() => { });
+            agentIdRef.current = null;
+        }
         setState("input");
         setResult("");
+        resultRef.current = "";
         setConversationHistory([]);
         setError(null);
-    }, [unsubscribeAllAgents, closeAllActiveAgents]);
+    }, [unsubscribeFromAgent]);
     const handleClose = useCallback(() => {
-        unsubscribeAllAgents();
-        closeAllActiveAgents();
+        unsubscribeFromAgent();
+        if (agentIdRef.current) {
+            closeAgent(agentIdRef.current).catch(() => { });
+        }
         onClose();
-    }, [unsubscribeAllAgents, closeAllActiveAgents, onClose]);
+    }, [unsubscribeFromAgent, onClose]);
     const toggleLarge = useCallback(() => {
         setIsLarge((prev) => !prev);
     }, []);
@@ -816,7 +493,7 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
             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]);
+    }, [position?.x, position?.y, state, result, selectedText, isLarge]);
     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",
@@ -825,13 +502,14 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                 zIndex: 95,
             }
             : 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 isSvgIcon = action.icon?.trim().startsWith("<svg") || action.icon?.trim().startsWith("<?xml");
+                                            const IconComponent = !isSvgIcon ? (ICON_MAP[action.icon] || HelpCircle) : null;
                                             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: {
-                                                            __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));
+                                            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: [isSvgIcon ? (_jsx("div", { className: "w-3.5 h-3.5 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full", dangerouslySetInnerHTML: {
+                                                            __html: action.icon,
+                                                        } })) : (IconComponent && _jsx(IconComponent, { className: "w-3.5 h-3.5" })), 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()) {
@@ -840,27 +518,27 @@ ${AI_TEXT_EDIT_RESPONSE_FORMAT_INSTRUCTION}`;
                                     }
                                 }, 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)
+                                            : "Describe the change you want...", className: cn("w-full py-3 pl-3 pr-14 text-sm 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: selectedModelName ? `Model: ${selectedModelName}` : "Select model", children: _jsx(Cpu, { className: "w-3.5 h-3.5" }) }) }), _jsxs(PopoverContent, { className: "w-48 p-1.5", align: "end", sideOffset: 8, children: [_jsx("div", { className: "text-[10px] font-semibold text-gray-400 uppercase tracking-wider px-2 py-1", children: "Model" }), _jsx("div", { className: "space-y-0.5", children: availableModels.map((model) => (_jsx("button", { type: "button", onClick: () => {
+                                                                        setSelectedModelId(model.id);
+                                                                        setModelPopoverOpen(false);
+                                                                    }, className: cn("w-full text-left px-2 py-1.5 text-xs rounded-md transition-colors", selectedModelId === 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
+                                                                        : "text-gray-600 hover:bg-gray-100"), children: model.name }, model.id))) })] })] })), _jsx("button", { type: "submit", disabled: !instruction.trim(), className: cn("p-2.5 rounded-xl transition-all duration-300", instruction.trim()
                                                     ? "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: [(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" && (_jsx(_Fragment, { children: run.rawContent?.trim() ? (renderTextWithContext(run.rawContent, false)) : (_jsx("span", { className: "text-gray-400 italic", children: "Waiting for response\u2026" })) })), run.status === "done" && run.replacementText != null && (_jsxs(_Fragment, { children: [renderTextWithContext(run.replacementText, true), _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.status === "error" && (_jsx("div", { className: "text-red-700", children: run.error || "Something went wrong." }))] })] }, run.agentId))) })] })), _jsxs("form", { onSubmit: (e) => {
+                                                    : "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 === "loading" && (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 bg-violet-200 rounded-full animate-ping opacity-20" }), _jsx("div", { className: "relative bg-violet-50 p-4 rounded-full", children: _jsx(Loader2, { className: "w-8 h-8 text-violet-600 animate-spin" }) })] }), _jsxs("div", { className: "text-center", children: [_jsx("span", { className: "text-sm font-semibold text-gray-800 block", children: "AI is thinking..." }), _jsx("span", { className: "text-xs text-gray-500 mt-1 block px-10", children: "Updating your text based on your instructions." })] }), result && (_jsx("div", { className: "w-full mt-4 px-4 py-3 bg-violet-50/50 border border-violet-100 rounded-xl max-h-32 overflow-y-auto animate-in fade-in duration-300 whitespace-pre-wrap", children: renderTextWithContext(result, true) }))] })), state === "preview" && (_jsxs("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-bold text-green-600 uppercase tracking-wider mb-2", children: [_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }), "Suggested Edit"] }), _jsx("div", { className: "px-4 py-3 bg-green-50/50 border border-green-100 rounded-xl overflow-y-auto shadow-inner whitespace-pre-wrap transition-all duration-300", style: { maxHeight: isLarge ? '500px' : '192px' }, children: renderTextWithContext(result, true) })] }), _jsxs("form", { onSubmit: (e) => {
                                     e.preventDefault();
                                     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)
+                                }, 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-sm 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: selectedModelName ? `Model: ${selectedModelName}` : "Select model", children: _jsx(Cpu, { className: "w-3.5 h-3.5" }) }) }), _jsxs(PopoverContent, { className: "w-48 p-1.5", align: "end", sideOffset: 8, children: [_jsx("div", { className: "text-[10px] font-semibold text-gray-400 uppercase tracking-wider px-2 py-1", children: "Model" }), _jsx("div", { className: "space-y-0.5", children: availableModels.map((model) => (_jsx("button", { type: "button", onClick: () => {
+                                                                        setSelectedModelId(model.id);
+                                                                        setModelPopoverOpen(false);
+                                                                    }, className: cn("w-full text-left px-2 py-1.5 text-xs rounded-md transition-colors", selectedModelId === 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
+                                                                        : "text-gray-600 hover:bg-gray-100"), children: model.name }, model.id))) })] })] })), _jsx("button", { type: "submit", disabled: !instruction.trim(), className: cn("p-2.5 rounded-xl transition-all duration-300", instruction.trim()
                                                     ? "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"] })] })] }))] })] }));
+                                                    : "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, { size: "sm", onClick: handleAccept, className: "flex-[1.5] bg-violet-600 hover:bg-violet-700 text-white shadow-md shadow-violet-200 rounded-xl font-semibold", children: [_jsx(Check, { className: "w-4 h-4 mr-2" }), "Replace Selection"] })] })] }))] })] }));
 }
 export default InlineAiDialog;
 //# sourceMappingURL=InlineAiDialog.js.map