AIChatPanel.js

/*
 * GNU AGPL-3.0 License
 *
 * Copyright (c) 2021 - present core.ai . All rights reserved.
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
 * for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
 *
 */

/**
 * AI Chat Panel — renders the chat UI in the AI sidebar tab, handles streaming
 * responses from Claude Code, and manages edit application to documents.
 */
define(function (require, exports, module) {

    const SidebarTabs         = require("view/SidebarTabs"),
        DocumentManager     = require("document/DocumentManager"),
        CommandManager      = require("command/CommandManager"),
        Commands            = require("command/Commands"),
        ProjectManager      = require("project/ProjectManager"),
        EditorManager       = require("editor/EditorManager"),
        FileSystem          = require("filesystem/FileSystem"),
        LiveDevMain         = require("LiveDevelopment/main"),
        WorkspaceManager    = require("view/WorkspaceManager"),
        Dialogs             = require("widgets/Dialogs"),
        SnapshotStore       = require("core-ai/AISnapshotStore"),
        PhoenixConnectors   = require("core-ai/aiPhoenixConnectors"),
        AIChatHistory       = require("core-ai/AIChatHistory"),
        Strings             = require("strings"),
        StringUtils         = require("utils/StringUtils"),
        marked              = require("thirdparty/marked.min");

    // Capture at module load time — window.KernalModeTrust is deleted before extensions load
    const _KernalModeTrust = window.KernalModeTrust;

    let _nodeConnector = null;
    let _currentEntitlementState = null; // "chat" | "login" | "upsell" | "adminDisabled" | null
    let _isStreaming = false;
    let _queuedMessage = null;  // text queued by user while AI is streaming
    let _currentRequestId = null;
    let _segmentText = "";       // text for the current segment only
    let _autoScroll = true;
    let _hasReceivedContent = false; // tracks if we've received any text/tool in current response
    let _currentEdits = [];          // edits in current response, for summary card
    let _firstEditInResponse = true; // tracks first edit per response for initial PUC
    let _undoApplied = false;        // whether undo/restore has been clicked on any card
    let _sessionError = false;       // set when aiError fires; cleared on new send or new session
    // --- AI event trace logging (compact, non-flooding) ---
    let _traceTextChunks = 0;
    let _traceToolStreamCounts = {}; // toolId → count
    let _toolStreamStaleTimer = null;    // timer to start rotating activity text
    let _toolStreamRotateTimer = null;   // interval for cycling activity phrases

    // Context bar state
    let _selectionDismissed = false;    // user dismissed selection chip
    let _lastSelectionInfo = null;      // {filePath, fileName, startLine, endLine, selectedText}
    let _lastCursorLine = null;         // cursor line when no selection
    let _lastCursorFile = null;         // file name for cursor chip
    let _cursorDismissed = false;       // user dismissed cursor chip
    let _cursorDismissedLine = null;    // line that was dismissed
    let _livePreviewActive = false;     // live preview panel is open
    let _livePreviewDismissed = false;  // user dismissed live preview chip
    let $contextBar;                    // DOM ref

    // Image paste state
    let _attachedImages = [];  // [{dataUrl, mediaType, base64Data}]
    const MAX_IMAGES = 10;
    const MAX_IMAGE_BASE64_SIZE = 200 * 1024; // ~200KB base64
    const ALLOWED_IMAGE_TYPES = [
        "image/png", "image/jpeg", "image/gif", "image/webp", "image/svg+xml"
    ];

    // Chat history recording state
    let _chatHistory = [];          // Array of message records for current session
    let _firstUserMessage = null;   // Captured on first send, used as session title
    let _currentSessionId = null;   // Browser-side session ID tracker
    let _isResumedSession = false;  // Whether current session was resumed from history
    let _lastQuestions = null;      // Last AskUserQuestion questions, for recording

    // DOM references
    let $panel, $messages, $status, $statusText, $textarea, $sendBtn, $stopBtn, $imagePreview;
    let $aiTabContainer = null;

    // Live DOM query for $messages — the cached $messages reference can become stale
    // after SidebarTabs reparents the panel. Use this for any deferred operations
    // (click handlers, callbacks) where the cached reference may no longer be in the DOM.
    function _$msgs() {
        return $(".ai-chat-messages");
    }

    const PANEL_HTML =
        '<div class="ai-chat-panel">' +
            '<div class="ai-chat-header">' +
                '<span class="ai-chat-title">' + Strings.AI_CHAT_TITLE + '</span>' +
                '<div class="ai-chat-header-actions">' +
                    '<button class="ai-history-btn" title="' + Strings.AI_CHAT_HISTORY_TITLE + '">' +
                        '<i class="fa-solid fa-clock-rotate-left"></i>' +
                    '</button>' +
                    '<button class="ai-new-session-btn" title="' + Strings.AI_CHAT_NEW_SESSION_TITLE + '">' +
                        '<i class="fa-solid fa-plus"></i> ' + Strings.AI_CHAT_NEW_BTN +
                    '</button>' +
                '</div>' +
            '</div>' +
            '<div class="ai-session-history-dropdown"></div>' +
            '<div class="ai-chat-messages"></div>' +
            '<div class="ai-chat-status">' +
                '<span class="ai-status-spinner"></span>' +
                '<span class="ai-status-text">' + Strings.AI_CHAT_THINKING + '</span>' +
            '</div>' +
            '<div class="ai-chat-input-area">' +
                '<div class="ai-chat-image-preview"></div>' +
                '<div class="ai-chat-context-bar"></div>' +
                '<div class="ai-chat-input-wrap">' +
                    '<textarea class="ai-chat-textarea" placeholder="' + Strings.AI_CHAT_PLACEHOLDER + '" rows="1"></textarea>' +
                    '<button class="ai-send-btn" title="' + Strings.AI_CHAT_SEND_TITLE + '">' +
                        '<i class="fa-solid fa-paper-plane"></i>' +
                    '</button>' +
                    '<button class="ai-stop-btn" title="' + Strings.AI_CHAT_STOP_TITLE + '" style="display:none">' +
                        '<i class="fa-solid fa-stop"></i>' +
                    '</button>' +
                '</div>' +
            '</div>' +
        '</div>';

    const UNAVAILABLE_HTML =
        '<div class="ai-chat-panel">' +
            '<div class="ai-unavailable">' +
                '<div class="ai-unavailable-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>' +
                '<div class="ai-unavailable-title">' + Strings.AI_CHAT_CLI_NOT_FOUND + '</div>' +
                '<div class="ai-unavailable-message">' +
                    Strings.AI_CHAT_CLI_INSTALL_MSG +
                '</div>' +
                '<button class="ai-retry-btn">' + Strings.AI_CHAT_RETRY + '</button>' +
            '</div>' +
        '</div>';

    const PLACEHOLDER_HTML =
        '<div class="ai-chat-panel">' +
            '<div class="ai-unavailable">' +
                '<div class="ai-unavailable-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>' +
                '<div class="ai-unavailable-title">' + Strings.AI_CHAT_TITLE + '</div>' +
                '<div class="ai-unavailable-message">' +
                    Strings.AI_CHAT_DESKTOP_ONLY +
                '</div>' +
                '<button class="ai-upsell-btn ai-download-btn">' + Strings.AI_CHAT_DOWNLOAD_BTN + '</button>' +
            '</div>' +
        '</div>';

    /**
     * Initialize the chat panel with a NodeConnector instance.
     * @param {Object} nodeConnector - NodeConnector for communicating with the node-side Claude agent.
     */
    function init(nodeConnector) {
        _nodeConnector = nodeConnector;

        // Wire up events from node side
        _nodeConnector.on("aiTextStream", _onTextStream);
        _nodeConnector.on("aiProgress", _onProgress);
        _nodeConnector.on("aiToolInfo", _onToolInfo);
        _nodeConnector.on("aiToolStream", _onToolStream);
        _nodeConnector.on("aiToolEdit", _onToolEdit);
        _nodeConnector.on("aiError", _onError);
        _nodeConnector.on("aiComplete", _onComplete);
        _nodeConnector.on("aiQuestion", _onQuestion);
        _nodeConnector.on("aiClarificationRead", function (_event, data) {
            // Claude consumed the queued clarification — show it as a user message and remove the bubble
            const images = _queuedMessage ? _queuedMessage.images : [];
            _queuedMessage = null;
            _removeQueueBubble();
            if (data.text || images.length > 0) {
                _appendUserMessage(data.text, images);
                // Record clarification in chat history
                _chatHistory.push({
                    type: "user",
                    text: data.text,
                    images: images.map(function (img) {
                        return { dataUrl: img.dataUrl, mediaType: img.mediaType };
                    })
                });
            }
        });

        // Create container once, add to AI tab
        $aiTabContainer = $('<div class="ai-tab-container"></div>');
        SidebarTabs.addToTab("ai", $aiTabContainer);

        // Listen for entitlement changes to refresh UI on login/logout
        const EntitlementsManager = _KernalModeTrust && _KernalModeTrust.EntitlementsManager;
        if (EntitlementsManager) {
            EntitlementsManager.on(EntitlementsManager.EVENT_ENTITLEMENTS_CHANGED, _checkEntitlementAndInit);
        }

        // Check entitlements and render appropriate UI
        _checkEntitlementAndInit();
    }

    /**
     * Show placeholder UI for non-native (browser) builds.
     */
    function initPlaceholder() {
        $aiTabContainer = $('<div class="ai-tab-container"></div>');
        SidebarTabs.addToTab("ai", $aiTabContainer);
        const $placeholder = $(PLACEHOLDER_HTML);
        $placeholder.find(".ai-download-btn").on("click", function () {
            window.open("https://phcode.io", "_blank");
        });
        $aiTabContainer.empty().append($placeholder);
    }

    /**
     * Remove any existing panel content from the AI tab container.
     */
    function _removeCurrentPanel() {
        if ($aiTabContainer) {
            $aiTabContainer.empty();
        }
        // Clear cached DOM references so stale jQuery objects aren't reused
        $panel = null;
        $messages = null;
        $status = null;
        $statusText = null;
        $textarea = null;
        $sendBtn = null;
        $stopBtn = null;
        $imagePreview = null;
    }

    /**
     * Gate AI UI behind entitlement checks. Shows login screen if not logged in,
     * upsell screen if no AI plan, or proceeds to CLI availability check if entitled.
     */
    function _checkEntitlementAndInit() {
        const EntitlementsManager = _KernalModeTrust && _KernalModeTrust.EntitlementsManager;
        if (!EntitlementsManager) {
            // No entitlement system (test env or dev) — skip straight to CLI check
            if (_currentEntitlementState !== "chat") {
                _removeCurrentPanel();
                _checkAvailability();
            }
            return;
        }
        if (!EntitlementsManager.isLoggedIn()) {
            if (_currentEntitlementState !== "login") {
                _removeCurrentPanel();
                _renderLoginUI();
            }
            return;
        }
        // TODO: Switch to EntitlementsManager.getAIEntitlement() once AI entitlement is
        // implemented in the backend. For now, reuse liveEdit entitlement as a proxy for
        // "has Pro plan". Once AI entitlement is available, the check should be:
        //   EntitlementsManager.getAIEntitlement().then(function (entitlement) {
        //       if (entitlement.aiDisabledByAdmin) {
        //           _renderAdminDisabledUI();
        //       } else if (entitlement.activated) {
        //           _checkAvailability();
        //       } else if (entitlement.needsLogin) {
        //           _renderLoginUI();
        //       } else {
        //           _renderUpsellUI(entitlement);
        //       }
        //   });
        EntitlementsManager.getLiveEditEntitlement().then(function (entitlement) {
            if (entitlement.activated) {
                if (_currentEntitlementState !== "chat") {
                    _removeCurrentPanel();
                    _checkAvailability();
                }
            } else {
                if (_currentEntitlementState !== "upsell") {
                    _removeCurrentPanel();
                    _renderUpsellUI(entitlement);
                }
            }
        }).catch(function () {
            if (_currentEntitlementState !== "chat") {
                _removeCurrentPanel();
                _checkAvailability(); // fallback on error
            }
        });
    }

    /**
     * Render the login prompt UI (user not signed in).
     */
    function _renderLoginUI() {
        _currentEntitlementState = "login";
        const html =
            '<div class="ai-chat-panel">' +
                '<div class="ai-unavailable">' +
                    '<div class="ai-unavailable-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>' +
                    '<div class="ai-unavailable-title">' + Strings.AI_CHAT_LOGIN_TITLE + '</div>' +
                    '<div class="ai-unavailable-message">' +
                        Strings.AI_CHAT_LOGIN_MESSAGE +
                    '</div>' +
                    '<button class="ai-retry-btn ai-login-btn">' + Strings.AI_CHAT_LOGIN_BTN + '</button>' +
                '</div>' +
            '</div>';
        const $login = $(html);
        $login.find(".ai-login-btn").on("click", function () {
            _KernalModeTrust.EntitlementsManager.loginToAccount();
        });
        $aiTabContainer.empty().append($login);
    }

    /**
     * Render the upsell UI (user logged in but no AI plan).
     */
    function _renderUpsellUI(entitlement) {
        _currentEntitlementState = "upsell";
        const html =
            '<div class="ai-chat-panel">' +
                '<div class="ai-unavailable">' +
                    '<div class="ai-unavailable-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>' +
                    '<div class="ai-unavailable-title">' + Strings.AI_CHAT_UPSELL_TITLE + '</div>' +
                    '<div class="ai-unavailable-message">' +
                        Strings.AI_CHAT_UPSELL_MESSAGE +
                    '</div>' +
                    '<button class="ai-upsell-btn">' + Strings.AI_CHAT_UPSELL_BTN + '</button>' +
                '</div>' +
            '</div>';
        const $upsell = $(html);
        $upsell.find(".ai-upsell-btn").on("click", function () {
            const url = (entitlement && entitlement.buyURL) || brackets.config.purchase_url;
            Phoenix.app.openURLInDefaultBrowser(url);
        });
        $aiTabContainer.empty().append($upsell);
    }

    /**
     * Render the admin-disabled UI (AI turned off by system administrator).
     */
    function _renderAdminDisabledUI() {
        _currentEntitlementState = "adminDisabled";
        const html =
            '<div class="ai-chat-panel">' +
                '<div class="ai-unavailable">' +
                    '<div class="ai-unavailable-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>' +
                    '<div class="ai-unavailable-title">' + Strings.AI_CHAT_ADMIN_DISABLED_TITLE + '</div>' +
                    '<div class="ai-unavailable-message">' +
                        Strings.AI_CHAT_ADMIN_DISABLED_MESSAGE +
                    '</div>' +
                '</div>' +
            '</div>';
        $aiTabContainer.empty().append($(html));
    }

    /**
     * Check if Claude CLI is available and render the appropriate UI.
     */
    function _checkAvailability() {
        _nodeConnector.execPeer("checkAvailability")
            .then(function (result) {
                if (result.available) {
                    _renderChatUI();
                } else {
                    _renderUnavailableUI(result.error);
                }
            })
            .catch(function (err) {
                _renderUnavailableUI(err.message || String(err));
            });
    }

    /**
     * Render the full chat UI.
     */
    function _renderChatUI() {
        _currentEntitlementState = "chat";
        $panel = $(PANEL_HTML);
        $messages = $panel.find(".ai-chat-messages");
        $status = $panel.find(".ai-chat-status");
        $statusText = $panel.find(".ai-status-text");
        $textarea = $panel.find(".ai-chat-textarea");
        $sendBtn = $panel.find(".ai-send-btn");
        $stopBtn = $panel.find(".ai-stop-btn");
        $imagePreview = $panel.find(".ai-chat-image-preview");

        // Event handlers
        $sendBtn.on("click", function () {
            if (_isStreaming) {
                _queueMessage();
            } else {
                _sendMessage();
            }
        });
        $stopBtn.on("click", _cancelQuery);
        $panel.find(".ai-new-session-btn").on("click", _newSession);
        $panel.find(".ai-history-btn").on("click", function () {
            _toggleHistoryDropdown();
        });

        // Hide "+ New" button initially (no conversation yet)
        $panel.find(".ai-new-session-btn").hide();

        $textarea.on("keydown", function (e) {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                if (_isStreaming) {
                    _queueMessage();
                } else {
                    _sendMessage();
                }
            }
            if (e.key === "Escape") {
                if (_isStreaming) {
                    _cancelQuery();
                } else {
                    $textarea.val("");
                }
            }
        });

        // Auto-resize textarea
        $textarea.on("input", function () {
            this.style.height = "auto";
            this.style.height = Math.min(this.scrollHeight, 96) + "px"; // max ~6rem
        });

        // Paste handler for images
        $textarea.on("paste", function (e) {
            const items = (e.originalEvent || e).clipboardData && (e.originalEvent || e).clipboardData.items;
            if (!items) {
                return;
            }
            let imageFound = false;
            for (let i = 0; i < items.length; i++) {
                const item = items[i];
                if (item.kind === "file" && ALLOWED_IMAGE_TYPES.indexOf(item.type) !== -1) {
                    if (_attachedImages.length >= MAX_IMAGES) {
                        break;
                    }
                    imageFound = true;
                    const blob = item.getAsFile();
                    // Capture mediaType synchronously — DataTransferItem properties
                    // become invalid after the paste event handler returns, but
                    // the File object's type persists across the async boundary.
                    const mediaType = blob.type || item.type;
                    const reader = new FileReader();
                    reader.onload = function (ev) {
                        const dataUrl = ev.target.result;
                        const commaIdx = dataUrl.indexOf(",");
                        const base64Data = dataUrl.slice(commaIdx + 1);
                        if (base64Data.length > MAX_IMAGE_BASE64_SIZE) {
                            // Resize oversized images via canvas
                            _resizeImage(dataUrl, function (resized) {
                                _addImageIfUnique(resized.dataUrl, resized.mediaType, resized.base64Data);
                            });
                        } else {
                            _addImageIfUnique(dataUrl, mediaType, base64Data);
                        }
                    };
                    reader.readAsDataURL(blob);
                }
            }
            if (imageFound) {
                e.preventDefault();
            }
        });

        // Track scroll position for auto-scroll
        $messages.on("scroll", function () {
            const el = $messages[0];
            _autoScroll = (el.scrollHeight - el.scrollTop - el.clientHeight) < 50;
        });

        // Context bar
        $contextBar = $panel.find(".ai-chat-context-bar");

        // Track editor selection/cursor for context chips
        EditorManager.off("activeEditorChange.aiChat");
        EditorManager.on("activeEditorChange.aiChat", function (_event, newEditor, oldEditor) {
            if (oldEditor) {
                oldEditor.off("cursorActivity.aiContext");
            }
            if (newEditor) {
                newEditor.off("cursorActivity.aiContext");
                newEditor.on("cursorActivity.aiContext", function (_evt, editor) {
                    _updateSelectionChip(editor);
                });
            }
            _updateSelectionChip(newEditor);
        });
        // Bind to current editor if already active
        const currentEditor = EditorManager.getActiveEditor();
        if (currentEditor) {
            currentEditor.off("cursorActivity.aiContext");
            currentEditor.on("cursorActivity.aiContext", function (_evt, editor) {
                _updateSelectionChip(editor);
            });
        }
        _updateSelectionChip(currentEditor);

        // Track live preview status — listen to both LiveDev status changes
        // and panel show/hide events so the chip updates when the panel is closed
        LiveDevMain.off("statusChange.aiChat");
        LiveDevMain.on("statusChange.aiChat", _updateLivePreviewChip);
        LiveDevMain.off(LiveDevMain.EVENT_OPEN_PREVIEW_URL + ".aiChat");
        LiveDevMain.on(LiveDevMain.EVENT_OPEN_PREVIEW_URL + ".aiChat", function () {
            _livePreviewDismissed = false;
            _updateLivePreviewChip();
        });
        WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN + ".aiChat");
        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN + ".aiChat", _updateLivePreviewChip);
        WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_PANEL_HIDDEN + ".aiChat");
        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_HIDDEN + ".aiChat", _updateLivePreviewChip);
        _updateLivePreviewChip();

        // Refresh context bar when the AI tab becomes active (DOM updates
        // are deferred while the tab is hidden to avoid layout interference)
        SidebarTabs.off("tabChanged.aiChat");
        SidebarTabs.on("tabChanged.aiChat", function (_event, tabId) {
            if (tabId === "ai") {
                _updateSelectionChip();
                _updateLivePreviewChip();
            }
        });

        // When a screenshot is captured, attach the image to the awaiting tool indicator
        PhoenixConnectors.off("screenshotCaptured.aiChat");
        PhoenixConnectors.on("screenshotCaptured.aiChat", function (_event, base64) {
            const $tool = _$msgs().find('.ai-msg-tool').filter(function () {
                return $(this).data("awaitingScreenshot");
            }).last();
            if ($tool.length) {
                $tool.data("awaitingScreenshot", false);
                const $detail = $tool.find(".ai-tool-detail");
                const $img = $('<img class="ai-tool-screenshot" src="data:image/png;base64,' + base64 + '">');
                $img.on("click", function (e) {
                    e.stopPropagation();
                    _showImageLightbox($img.attr("src"));
                });
                $img.on("load", function () {
                    // Force scroll — the image load changes height after insertion,
                    // which can cause the scroll listener to clear _autoScroll
                    if ($messages && $messages.length) {
                        $messages[0].scrollTop = $messages[0].scrollHeight;
                    }
                });
                $detail.html($img);
                $tool.addClass("ai-tool-expanded");
                _scrollToBottom();
            }
        });

        // When switching projects, warn the user if AI is currently working
        // and cancel the query before proceeding.
        ProjectManager.off("beforeProjectClose.aiChat");
        ProjectManager.on("beforeProjectClose.aiChat", function (_event, _projectRoot, vetoPromises) {
            if (_isStreaming && vetoPromises) {
                const vetoPromise = new Promise(function (resolve, reject) {
                    Dialogs.showConfirmDialog(
                        Strings.AI_CHAT_SWITCH_PROJECT_TITLE,
                        Strings.AI_CHAT_SWITCH_PROJECT_MSG
                    ).done(function (btnId) {
                        if (btnId === Dialogs.DIALOG_BTN_OK) {
                            _cancelQuery();
                            _setStreaming(false);
                            resolve();
                        } else {
                            reject();
                        }
                    });
                });
                vetoPromises.push(vetoPromise);
            }
        });

        // When a new project opens, reset the AI chat to a blank state
        ProjectManager.off("projectOpen.aiChat");
        ProjectManager.on("projectOpen.aiChat", function () {
            _newSession();
        });

        $aiTabContainer.empty().append($panel);
    }

    /**
     * Render the unavailable UI (CLI not found).
     */
    function _renderUnavailableUI(error) {
        _currentEntitlementState = "chat";
        const $unavailable = $(UNAVAILABLE_HTML);
        $unavailable.find(".ai-retry-btn").on("click", function () {
            _checkAvailability();
        });
        $aiTabContainer.empty().append($unavailable);
    }

    // --- Context bar chip management ---

    /**
     * Update the selection/cursor chip based on the active editor state.
     * Skipped when the AI tab isn't active — calling getSelection()/getSelectedText()
     * from both activeEditorChange and cursorActivity during inline editor operations
     * interferes with the inline editor's cursor position tracking.
     */
    function _updateSelectionChip(editor) {
        if (SidebarTabs.getActiveTab() !== "ai") {
            return;
        }
        if (!editor) {
            editor = EditorManager.getActiveEditor();
        }
        if (!editor) {
            _lastSelectionInfo = null;
            _lastCursorLine = null;
            _lastCursorFile = null;
            _renderContextBar();
            return;
        }

        let filePath = editor.document.file.fullPath;
        if (filePath.startsWith("/tauri/")) {
            filePath = filePath.replace("/tauri", "");
        }
        const fileName = filePath.split("/").pop();

        if (editor.hasSelection()) {
            const sel = editor.getSelection();
            const startLine = sel.start.line + 1;
            const endLine = sel.end.line + 1;
            const selectedText = editor.getSelectedText();

            // Reset dismissed flag when selection changes
            if (!_lastSelectionInfo ||
                _lastSelectionInfo.startLine !== startLine ||
                _lastSelectionInfo.endLine !== endLine ||
                _lastSelectionInfo.filePath !== filePath) {
                _selectionDismissed = false;
            }

            _lastSelectionInfo = {
                filePath: filePath,
                fileName: fileName,
                startLine: startLine,
                endLine: endLine,
                selectedText: selectedText
            };
            _lastCursorLine = null;
            _lastCursorFile = null;
        } else {
            const cursor = editor.getCursorPos();
            const cursorLine = cursor.line + 1;
            // Reset cursor dismissed when cursor moves to a different line
            if (_cursorDismissed && _cursorDismissedLine !== cursorLine) {
                _cursorDismissed = false;
            }
            _lastSelectionInfo = null;
            _lastCursorLine = cursorLine;
            _lastCursorFile = fileName;
        }

        _renderContextBar();
    }

    /**
     * Update the live preview chip based on panel visibility.
     */
    function _updateLivePreviewChip() {
        if (SidebarTabs.getActiveTab() !== "ai") {
            return;
        }
        const panel = WorkspaceManager.getPanelForID("live-preview-panel");
        const wasActive = _livePreviewActive;
        _livePreviewActive = !!(panel && panel.isVisible());
        // Reset dismissed when live preview is re-opened
        if (_livePreviewActive && !wasActive) {
            _livePreviewDismissed = false;
        }
        _renderContextBar();
    }

    /**
     * Rebuild the context bar chips from current state.
     */
    function _renderContextBar() {
        if (!$contextBar) {
            return;
        }
        $contextBar.empty();

        // Live preview chip
        if (_livePreviewActive && !_livePreviewDismissed) {
            const $lpChip = $(
                '<span class="ai-context-chip ai-context-chip-livepreview">' +
                    '<span class="ai-context-chip-icon"><i class="fa-solid fa-eye"></i></span>' +
                    '<span class="ai-context-chip-label">' + Strings.AI_CHAT_CONTEXT_LIVE_PREVIEW + '</span>' +
                    '<button class="ai-context-chip-close">&times;</button>' +
                '</span>'
            );
            $lpChip.find(".ai-context-chip-close").on("click", function () {
                _livePreviewDismissed = true;
                _renderContextBar();
            });
            $contextBar.append($lpChip);
        }

        // Selection or cursor chip
        if (_lastSelectionInfo && !_selectionDismissed) {
            const label = StringUtils.format(Strings.AI_CHAT_CONTEXT_SELECTION,
                _lastSelectionInfo.startLine, _lastSelectionInfo.endLine) +
                " in " + _lastSelectionInfo.fileName;
            const $chip = $(
                '<span class="ai-context-chip ai-context-chip-selection">' +
                    '<span class="ai-context-chip-icon"><i class="fa-solid fa-i-cursor"></i></span>' +
                    '<span class="ai-context-chip-label"></span>' +
                    '<button class="ai-context-chip-close">&times;</button>' +
                '</span>'
            );
            $chip.find(".ai-context-chip-label").text(label);
            $chip.find(".ai-context-chip-close").on("click", function () {
                _selectionDismissed = true;
                _renderContextBar();
            });
            $contextBar.append($chip);
        } else if (_lastCursorLine !== null && !_lastSelectionInfo && !_cursorDismissed) {
            const label = StringUtils.format(Strings.AI_CHAT_CONTEXT_CURSOR, _lastCursorLine) +
                " in " + _lastCursorFile;
            const $cursorChip = $(
                '<span class="ai-context-chip ai-context-chip-selection">' +
                    '<span class="ai-context-chip-icon"><i class="fa-solid fa-i-cursor"></i></span>' +
                    '<span class="ai-context-chip-label"></span>' +
                    '<button class="ai-context-chip-close">&times;</button>' +
                '</span>'
            );
            $cursorChip.find(".ai-context-chip-label").text(label);
            $cursorChip.find(".ai-context-chip-close").on("click", function () {
                _cursorDismissed = true;
                _cursorDismissedLine = _lastCursorLine;
                _renderContextBar();
            });
            $contextBar.append($cursorChip);
        }

        // Toggle visibility
        $contextBar.toggleClass("has-chips", $contextBar.children().length > 0);
    }

    /**
     * Add an image to _attachedImages if it's not a duplicate.
     */
    function _addImageIfUnique(dataUrl, mediaType, base64Data) {
        const isDuplicate = _attachedImages.some(function (existing) {
            return existing.base64Data === base64Data;
        });
        if (!isDuplicate && _attachedImages.length < MAX_IMAGES) {
            _attachedImages.push({dataUrl: dataUrl, mediaType: mediaType, base64Data: base64Data});
            _renderImagePreview();
        }
    }

    /**
     * Resize an image so its base64 data stays under MAX_IMAGE_BASE64_SIZE.
     * Two-phase strategy using WebP for better quality-per-byte:
     *   Phase 1 — reduce quality at original dimensions.
     *   Phase 2 — scale dimensions down (75%, then 50%) and retry quality steps.
     */
    function _resizeImage(dataUrl, callback) {
        const img = new Image();
        img.onload = function () {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            const qualitySteps = [0.92, 0.85, 0.75, 0.6, 0.45];
            const scaleSteps = [1, 0.75, 0.5];
            let result;

            for (let s = 0; s < scaleSteps.length; s++) {
                const scale = scaleSteps[s];
                canvas.width = Math.round(img.width * scale);
                canvas.height = Math.round(img.height * scale);
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                for (let q = 0; q < qualitySteps.length; q++) {
                    result = canvas.toDataURL("image/webp", qualitySteps[q]);
                    if (result.split(",")[1].length <= MAX_IMAGE_BASE64_SIZE) {
                        const base64 = result.split(",")[1];
                        callback({dataUrl: result, mediaType: "image/webp", base64Data: base64});
                        return;
                    }
                }
            }

            // Last resort: use the smallest result we got
            const base64 = result.split(",")[1];
            callback({dataUrl: result, mediaType: "image/webp", base64Data: base64});
        };
        img.src = dataUrl;
    }

    /**
     * Show a lightbox overlay with the full-size image.
     */
    function _showImageLightbox(src) {
        const $overlay = $(
            '<div class="ai-image-lightbox">' +
                '<img />' +
            '</div>'
        );
        $overlay.find("img").attr("src", src);
        $overlay.on("click", function () {
            $overlay.remove();
        });
        $panel.append($overlay);
    }

    /**
     * Render the image preview strip from _attachedImages.
     */
    function _renderImagePreview() {
        if (!$imagePreview) {
            return;
        }
        $imagePreview.empty();
        if (_attachedImages.length === 0) {
            $imagePreview.removeClass("has-images");
            return;
        }
        $imagePreview.addClass("has-images");
        _attachedImages.forEach(function (img, idx) {
            const $thumb = $(
                '<span class="ai-image-thumb">' +
                    '<img />' +
                    '<button class="ai-image-remove" title="' + Strings.AI_CHAT_IMAGE_REMOVE + '">&times;</button>' +
                '</span>'
            );
            $thumb.find("img").attr("src", img.dataUrl).on("click", function () {
                _showImageLightbox(img.dataUrl);
            });
            $thumb.find(".ai-image-remove").on("click", function () {
                _attachedImages.splice(idx, 1);
                _renderImagePreview();
            });
            $imagePreview.append($thumb);
        });
    }

    /**
     * Queue a clarification message while AI is streaming.
     * Places a static bubble above the input area and captures any attached images.
     */
    function _queueMessage() {
        const text = $textarea.val().trim();
        if (!text && _attachedImages.length === 0) {
            return;
        }

        // Capture images for the clarification
        const queuedImages = _attachedImages.slice();
        const imagesPayload = _attachedImages.map(function (img) {
            return { mediaType: img.mediaType, base64Data: img.base64Data };
        });
        _attachedImages = [];
        _renderImagePreview();

        // Append to existing queued text or start new
        if (_queuedMessage) {
            if (text) {
                _queuedMessage.text += "\n" + text;
            }
            _queuedMessage.images = _queuedMessage.images.concat(queuedImages);
            _queuedMessage.imagesPayload = _queuedMessage.imagesPayload.concat(imagesPayload);
        } else {
            _queuedMessage = {
                text: text,
                images: queuedImages,
                imagesPayload: imagesPayload
            };
        }

        // Send to node side (text + images)
        _nodeConnector.execPeer("queueClarification", {
            text: text,
            images: imagesPayload.length > 0 ? imagesPayload : undefined
        }).catch(function (err) {
            console.warn("[AI UI] Failed to queue clarification:", err.message);
        });

        // Update or create queue bubble in the input area
        const $inputArea = $textarea.closest(".ai-chat-input-area");
        let $bubble = $inputArea.find(".ai-queued-msg");
        if ($bubble.length) {
            $bubble.find(".ai-queued-text").text(_queuedMessage.text);
            // Re-render image thumbs
            const $thumbs = $bubble.find(".ai-queued-images");
            $thumbs.empty();
            _queuedMessage.images.forEach(function (img) {
                $thumbs.append($('<img>').attr("src", img.dataUrl));
            });
            if (_queuedMessage.images.length > 0) {
                $thumbs.show();
            }
        } else {
            $bubble = $(
                '<div class="ai-queued-msg">' +
                    '<div class="ai-queued-header">' +
                        '<span class="ai-queued-label">' + Strings.AI_CHAT_QUEUED + '</span>' +
                        '<button class="ai-queued-edit-btn">' + Strings.AI_CHAT_QUEUED_EDIT + '</button>' +
                    '</div>' +
                    '<div class="ai-queued-images"></div>' +
                    '<div class="ai-queued-text"></div>' +
                '</div>'
            );
            $bubble.find(".ai-queued-text").text(_queuedMessage.text);
            if (_queuedMessage.images.length > 0) {
                const $thumbs = $bubble.find(".ai-queued-images");
                _queuedMessage.images.forEach(function (img) {
                    $thumbs.append($('<img>').attr("src", img.dataUrl));
                });
                $thumbs.show();
            }
            $bubble.find(".ai-queued-edit-btn").on("click", _editQueuedMessage);
            $inputArea.prepend($bubble);
        }

        // Clear textarea
        $textarea.val("");
        $textarea.css("height", "auto");
    }

    /**
     * Remove the queue bubble from the UI.
     */
    function _removeQueueBubble() {
        const $inputArea = $textarea ? $textarea.closest(".ai-chat-input-area") : null;
        if ($inputArea) {
            $inputArea.find(".ai-queued-msg").remove();
        }
    }

    /**
     * Edit the queued message: move text back to textarea, restore images, and clear the queue.
     */
    function _editQueuedMessage() {
        if (_queuedMessage) {
            $textarea.val(_queuedMessage.text);
            $textarea.css("height", "auto");
            $textarea[0].style.height = Math.min($textarea[0].scrollHeight, 96) + "px";
            $textarea[0].focus({ preventScroll: true });
            // Restore images
            _attachedImages = _queuedMessage.images;
            _renderImagePreview();
        }
        _queuedMessage = null;
        _removeQueueBubble();
        _nodeConnector.execPeer("clearClarification").catch(function () {
            // ignore
        });
    }

    /**
     * Send the current input as a message to Claude.
     */
    function _sendMessage() {
        const text = $textarea.val().trim();
        if (!text || _isStreaming) {
            return;
        }

        // Show "+ New" button once a conversation starts
        $panel.find(".ai-new-session-btn").show();

        // Capture first user message for session title
        if (!_currentSessionId && !_isResumedSession && !_firstUserMessage) {
            _firstUserMessage = text;
        }

        // Capture attached images before clearing
        const imagesForDisplay = _attachedImages.slice();
        const imagesPayload = _attachedImages.map(function (img) {
            return {mediaType: img.mediaType, base64Data: img.base64Data};
        });
        _attachedImages = [];
        _renderImagePreview();

        // Append user message
        _appendUserMessage(text, imagesForDisplay);

        // Record user message in chat history
        _chatHistory.push({
            type: "user",
            text: text,
            images: imagesForDisplay.map(function (img) {
                return { dataUrl: img.dataUrl, mediaType: img.mediaType };
            })
        });

        // Clear input
        $textarea.val("");
        $textarea.css("height", "auto");

        // Set streaming state
        _sessionError = false;
        _setStreaming(true);

        // Reset segment tracking and show thinking indicator
        _segmentText = "";
        _hasReceivedContent = false;
        _currentEdits = [];
        _firstEditInResponse = true;
        SnapshotStore.startTracking();
        _appendThinkingIndicator();

        // Remove restore highlights from previous interactions
        _$msgs().find(".ai-restore-highlighted").removeClass("ai-restore-highlighted");

        // Get project path
        const projectPath = _getProjectRealPath();

        _traceTextChunks = 0;
        _traceToolStreamCounts = {};

        const prompt = text;
        console.log("[AI UI] Sending prompt:", text.slice(0, 60));

        // Gather selection context if available and not dismissed
        let selectionContext = null;
        if (_lastSelectionInfo && !_selectionDismissed && _lastSelectionInfo.selectedText) {
            const MAX_INLINE_SELECTION = 500;
            const MAX_PREVIEW_LINES = 3;
            const MAX_PREVIEW_LINE_LEN = 80;
            let selectedText = _lastSelectionInfo.selectedText;
            let selectionPreview = null;
            if (selectedText.length > MAX_INLINE_SELECTION) {
                const lines = selectedText.split("\n");
                const headLines = lines.slice(0, MAX_PREVIEW_LINES).map(function (l) {
                    return l.length > MAX_PREVIEW_LINE_LEN ? l.slice(0, MAX_PREVIEW_LINE_LEN) + "..." : l;
                });
                const tailLines = lines.length > MAX_PREVIEW_LINES * 2
                    ? lines.slice(-MAX_PREVIEW_LINES).map(function (l) {
                        return l.length > MAX_PREVIEW_LINE_LEN ? l.slice(0, MAX_PREVIEW_LINE_LEN) + "..." : l;
                    })
                    : [];
                selectionPreview = headLines.join("\n") +
                    (tailLines.length ? "\n...\n" + tailLines.join("\n") : "");
                selectedText = null;
            }
            selectionContext = {
                filePath: _lastSelectionInfo.filePath,
                startLine: _lastSelectionInfo.startLine,
                endLine: _lastSelectionInfo.endLine,
                selectedText: selectedText,
                selectionPreview: selectionPreview
            };
        }

        _nodeConnector.execPeer("sendPrompt", {
            prompt: prompt,
            projectPath: projectPath,
            sessionAction: "continue",
            locale: brackets.getLocale(),
            selectionContext: selectionContext,
            images: imagesPayload.length > 0 ? imagesPayload : undefined
        }).then(function (result) {
            _currentRequestId = result.requestId;
            console.log("[AI UI] RequestId:", result.requestId);
        }).catch(function (err) {
            _setStreaming(false);
            _appendErrorMessage(StringUtils.format(Strings.AI_CHAT_SEND_ERROR, err.message || String(err)));
        });
    }

    /**
     * Cancel the current streaming query.
     */
    function _cancelQuery() {
        if (_nodeConnector && _isStreaming) {
            _nodeConnector.execPeer("cancelQuery").catch(function () {
                // ignore cancel errors
            });
        }
        // Move queued text and images back to textarea on cancel
        if (_queuedMessage) {
            $textarea.val(_queuedMessage.text);
            $textarea.css("height", "auto");
            $textarea[0].style.height = Math.min($textarea[0].scrollHeight, 96) + "px";
            _attachedImages = _queuedMessage.images;
            _renderImagePreview();
            _queuedMessage = null;
            _removeQueueBubble();
        }
    }

    /**
     * Start a new session: destroy server-side session and clear chat.
     */
    function _newSession() {
        if (_nodeConnector) {
            _nodeConnector.execPeer("destroySession").catch(function () {
                // ignore
            });
        }
        _currentRequestId = null;
        _segmentText = "";
        _hasReceivedContent = false;
        _isStreaming = false;
        _sessionError = false;
        _queuedMessage = null;
        _removeQueueBubble();
        _firstEditInResponse = true;
        _undoApplied = false;
        _currentSessionId = null;
        _isResumedSession = false;
        _firstUserMessage = null;
        _chatHistory = [];
        _lastQuestions = null;
        _selectionDismissed = false;
        _lastSelectionInfo = null;
        _lastCursorLine = null;
        _lastCursorFile = null;
        _cursorDismissed = false;
        _cursorDismissedLine = null;
        _livePreviewDismissed = false;
        _attachedImages = [];
        _renderImagePreview();
        SnapshotStore.reset();
        PhoenixConnectors.clearPreviousContentMap();
        if ($messages) {
            $messages.empty();
        }
        // Close history dropdown and hide "+ New" button since we're back to empty state
        if ($panel) {
            $panel.find(".ai-session-history-dropdown").removeClass("open");
            $panel.find(".ai-history-btn").removeClass("active");
            $panel.removeClass("ai-history-open");
            $panel.find(".ai-new-session-btn").hide();
        }
        if ($status) {
            $status.removeClass("active");
        }
        if ($textarea) {
            $textarea.prop("disabled", false);
            $textarea[0].focus({ preventScroll: true });
        }
        if ($sendBtn) {
            $sendBtn.prop("disabled", false);
        }
    }

    // --- Event handlers for node-side events ---

    function _onTextStream(_event, data) {
        _traceTextChunks++;
        if (_traceTextChunks === 1) {
            console.log("[AI UI]", "First text chunk");
        }

        // Remove thinking indicator on first content
        if (!_hasReceivedContent) {
            _hasReceivedContent = true;
            $messages.find(".ai-thinking").remove();
        }

        // If no active stream target exists, create a new text segment
        if (!$messages.find(".ai-stream-target").length) {
            _appendAssistantSegment();
        }

        _segmentText += data.text;
        _renderAssistantStream();
    }

    // Tool type configuration: icon, color, label
    const TOOL_CONFIG = {
        Glob:  { icon: "fa-solid fa-magnifying-glass", color: "#6b9eff", label: Strings.AI_CHAT_TOOL_SEARCH_FILES },
        Grep:  { icon: "fa-solid fa-magnifying-glass-location", color: "#6b9eff", label: Strings.AI_CHAT_TOOL_SEARCH_CODE },
        Read:  { icon: "fa-solid fa-file-lines", color: "#6bc76b", label: Strings.AI_CHAT_TOOL_READ },
        Edit:  { icon: "fa-solid fa-pen", color: "#e8a838", label: Strings.AI_CHAT_TOOL_EDIT },
        Write: { icon: "fa-solid fa-file-pen", color: "#e8a838", label: Strings.AI_CHAT_TOOL_WRITE },
        Bash:  { icon: "fa-solid fa-terminal", color: "#c084fc", label: Strings.AI_CHAT_TOOL_RUN_CMD },
        Skill: { icon: "fa-solid fa-puzzle-piece", color: "#e0c060", label: Strings.AI_CHAT_TOOL_SKILL },
        "mcp__phoenix-editor__getEditorState":     { icon: "fa-solid fa-code", color: "#6bc76b", label: Strings.AI_CHAT_TOOL_EDITOR_STATE },
        "mcp__phoenix-editor__takeScreenshot":     { icon: "fa-solid fa-camera", color: "#c084fc", label: Strings.AI_CHAT_TOOL_SCREENSHOT },
        "mcp__phoenix-editor__execJsInLivePreview": { icon: "fa-solid fa-eye", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_LIVE_PREVIEW_JS },
        "mcp__phoenix-editor__controlEditor":       { icon: "fa-solid fa-code", color: "#6bc76b", label: Strings.AI_CHAT_TOOL_CONTROL_EDITOR },
        "mcp__phoenix-editor__resizeLivePreview":   { icon: "fa-solid fa-arrows-left-right", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_RESIZE_PREVIEW },
        "mcp__phoenix-editor__wait":                { icon: "fa-solid fa-hourglass-half", color: "#adb9bd", label: Strings.AI_CHAT_TOOL_WAIT },
        "mcp__phoenix-editor__getUserClarification": { icon: "fa-solid fa-comment-dots", color: "#6bc76b", label: Strings.AI_CHAT_TOOL_CLARIFICATION },
        TodoWrite: { icon: "fa-solid fa-list-check", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_TASKS },
        AskUserQuestion: { icon: "fa-solid fa-circle-question", color: "#66bb6a", label: Strings.AI_CHAT_TOOL_QUESTION },
        Task: { icon: "fa-solid fa-diagram-project", color: "#6b9eff", label: Strings.AI_CHAT_TOOL_TASK }
    };

    function _onProgress(_event, data) {
        console.log("[AI UI]", "Progress:", data.phase, data.toolName ? data.toolName + " #" + data.toolId : "");
        if ($statusText) {
            const toolName = data.toolName || "";
            const config = TOOL_CONFIG[toolName];
            $statusText.text(config ? config.label + "..." : Strings.AI_CHAT_THINKING);
        }
        if (data.phase === "tool_use") {
            _appendToolIndicator(data.toolName, data.toolId);
        }
    }

    function _onToolInfo(_event, data) {
        const uid = (_currentRequestId || "") + "-" + data.toolId;
        const streamCount = _traceToolStreamCounts[uid] || 0;
        console.log("[AI UI]", "ToolInfo:", data.toolName, "#" + data.toolId,
            "file=" + (data.toolInput && data.toolInput.file_path || "?").split("/").pop(),
            "streamEvents=" + streamCount);
        _updateToolIndicator(data.toolId, data.toolName, data.toolInput);

        // Capture content of files the AI reads (for snapshot delete tracking)
        if (data.toolName === "Read" && data.toolInput && data.toolInput.file_path) {
            const filePath = data.toolInput.file_path;
            const vfsPath = SnapshotStore.realToVfsPath(filePath);
            const openDoc = DocumentManager.getOpenDocumentForPath(vfsPath);
            if (openDoc) {
                SnapshotStore.recordFileRead(filePath, openDoc.getText());
            } else {
                const file = FileSystem.getFileForPath(vfsPath);
                file.read(function (err, readData) {
                    if (!err && readData) {
                        SnapshotStore.recordFileRead(filePath, readData);
                    }
                });
            }
        }
    }

    /**
     * Start an elapsed-time counter on a tool indicator. Called when the tool's
     * stale timer fires (no streaming activity for 2s).
     */
    function _startElapsedTimer($tool) {
        if ($tool.data("elapsedTimer")) {
            return; // already running
        }
        const startTime = $tool.data("startTime") || Date.now();
        const $header = $tool.find(".ai-tool-header");
        let $elapsed = $header.find(".ai-tool-elapsed");
        if (!$elapsed.length) {
            $elapsed = $('<span class="ai-tool-elapsed"></span>');
            $header.append($elapsed);
        }
        function update() {
            const secs = Math.floor((Date.now() - startTime) / 1000);
            if (secs < 60) {
                $elapsed.text(secs + "s");
            } else {
                const m = Math.floor(secs / 60);
                const s = secs % 60;
                $elapsed.text(m + "m " + (s < 10 ? "0" : "") + s + "s");
            }
        }
        update();
        const timerId = setInterval(function () {
            if ($tool.hasClass("ai-tool-done")) {
                clearInterval(timerId);
                return;
            }
            update();
        }, 1000);
        $tool.data("elapsedTimer", timerId);
    }

    function _onToolStream(_event, data) {
        const uniqueToolId = (_currentRequestId || "") + "-" + data.toolId;
        _traceToolStreamCounts[uniqueToolId] = (_traceToolStreamCounts[uniqueToolId] || 0) + 1;
        const $tool = $messages.find('.ai-msg-tool[data-tool-id="' + uniqueToolId + '"]');
        if (!$tool.length) {
            return;
        }

        // Update label with filename as soon as file_path is available
        if (!$tool.data("labelUpdated")) {
            const filePath = _extractJsonStringValue(data.partialJson, "file_path");
            if (filePath) {
                const fileName = filePath.split("/").pop();
                const config = TOOL_CONFIG[data.toolName] || {};
                $tool.find(".ai-tool-label").text((config.label || data.toolName) + " " + fileName + "...");
                $tool.data("labelUpdated", true);
            }
        }

        const preview = _extractToolPreview(data.toolName, data.partialJson);
        const count = _traceToolStreamCounts[uniqueToolId];
        if (count === 1) {
            console.log("[AI UI]", "ToolStream first:", data.toolName, "#" + data.toolId,
                "json=" + (data.partialJson || "").length + "ch");
        }
        if (preview) {
            $tool.find(".ai-tool-preview").text(preview);
            _scrollToBottom();
        }

        // Reset staleness timer — if no new stream event arrives within 2s,
        // rotate through activity phrases so the user sees something is happening.
        clearTimeout(_toolStreamStaleTimer);
        clearInterval(_toolStreamRotateTimer);
        _toolStreamStaleTimer = setTimeout(function () {
            const phrases = [
                Strings.AI_CHAT_WORKING,
                Strings.AI_CHAT_WRITING,
                Strings.AI_CHAT_PROCESSING
            ];
            let idx = 0;
            const $livePreview = $tool.find(".ai-tool-preview");
            if ($livePreview.length && !$tool.hasClass("ai-tool-done")) {
                $livePreview.text(phrases[idx]);
            }
            _startElapsedTimer($tool);
            _toolStreamRotateTimer = setInterval(function () {
                idx = (idx + 1) % phrases.length;
                const $p = $tool.find(".ai-tool-preview");
                if ($p.length && !$tool.hasClass("ai-tool-done")) {
                    $p.text(phrases[idx]);
                } else {
                    clearInterval(_toolStreamRotateTimer);
                }
            }, 3000);
        }, 2000);
    }

    /**
     * Extract a complete string value for a given key from partial JSON.
     * Returns null if the key isn't found or the value isn't complete yet.
     */
    function _extractJsonStringValue(partialJson, key) {
        // Try both with and without space after colon: "key":"val" or "key": "val"
        let pattern = '"' + key + '":"';
        let idx = partialJson.indexOf(pattern);
        if (idx === -1) {
            pattern = '"' + key + '": "';
            idx = partialJson.indexOf(pattern);
        }
        if (idx === -1) {
            return null;
        }
        const start = idx + pattern.length;
        // Find the closing quote (not escaped)
        let end = start;
        while (end < partialJson.length) {
            if (partialJson[end] === '"' && partialJson[end - 1] !== '\\') {
                return partialJson.slice(start, end).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
            }
            end++;
        }
        return null; // value not complete yet
    }

    /**
     * Extract a readable one-line preview from partial tool input JSON.
     * Looks for the "interesting" key per tool type (e.g. content for Write).
     */
    function _extractToolPreview(toolName, partialJson) {
        if (!partialJson) {
            return "";
        }
        // Map tool names to the key whose value we want to preview.
        // Tools not listed here get no streaming preview.
        const interestingKey = {
            Write: "content",
            Edit: "new_string",
            Bash: "command",
            Grep: "pattern",
            Glob: "pattern",
            "mcp__phoenix-editor__execJsInLivePreview": "code"
        }[toolName];

        if (!interestingKey) {
            return "";
        }

        let raw = "";
        // Find the interesting key and grab everything after it
        const keyPattern = '"' + interestingKey + '":';
        const idx = partialJson.indexOf(keyPattern);
        if (idx !== -1) {
            raw = partialJson.slice(idx + keyPattern.length).slice(-120);
        }
        // If the interesting key hasn't appeared yet, show a byte counter
        // so the user sees streaming activity during the file_path phase
        if (!raw && partialJson.length > 3) {
            return StringUtils.format(Strings.AI_CHAT_RECEIVING_BYTES, partialJson.length);
        }
        if (!raw) {
            return "";
        }
        // Clean up JSON syntax noise into readable text
        let preview = raw
            .replace(/\\n/g, " ")
            .replace(/\\t/g, " ")
            .replace(/\\"/g, '"')
            .replace(/\s+/g, " ")
            .trim();
        // Strip leading JSON artifacts (quotes, whitespace)
        preview = preview.replace(/^[\s"]+/, "");
        // Strip trailing incomplete JSON artifacts
        preview = preview.replace(/["{}\[\]]*$/, "").trim();
        return preview;
    }

    function _onToolEdit(_event, data) {
        const edit = data.edit;
        const uniqueToolId = (_currentRequestId || "") + "-" + data.toolId;
        console.log("[AI UI]", "ToolEdit:", edit.file.split("/").pop(), "#" + data.toolId);

        // Track for summary card
        const oldLines = edit.oldText ? edit.oldText.split("\n").length : 0;
        const newLines = edit.newText ? edit.newText.split("\n").length : 0;
        _currentEdits.push({
            file: edit.file,
            linesAdded: newLines,
            linesRemoved: oldLines
        });

        // Record tool edit in chat history
        _chatHistory.push({
            type: "tool_edit",
            file: edit.file,
            linesAdded: newLines,
            linesRemoved: oldLines
        });

        // Capture pre-edit content for snapshot tracking
        const previousContent = PhoenixConnectors.getPreviousContent(edit.file);
        const isNewFile = (edit.oldText === null && (previousContent === undefined || previousContent === ""));

        // On first edit per response, insert initial PUC if needed.
        // Create initial snapshot *before* recordFileBeforeEdit so it pushes
        // an empty {} that recordFileBeforeEdit will back-fill directly.
        if (_firstEditInResponse) {
            _firstEditInResponse = false;
            if (SnapshotStore.getSnapshotCount() === 0) {
                const initialIndex = SnapshotStore.createInitialSnapshot();
                // Insert initial restore point PUC before the current tool indicator
                const $puc = $(
                    '<div class="ai-msg ai-msg-restore-point" data-snapshot-index="' + initialIndex + '">' +
                        '<button class="ai-restore-point-btn" disabled>' + Strings.AI_CHAT_RESTORE_POINT + '</button>' +
                    '</div>'
                );
                $puc.find(".ai-restore-point-btn").on("click", function () {
                    if (!_isStreaming) {
                        _onRestoreClick(initialIndex);
                    }
                });
                // Find the last tool indicator and insert the PUC right before it
                const $liveMsg = _$msgs();
                const $lastTool = $liveMsg.find(".ai-msg-tool").last();
                if ($lastTool.length) {
                    $lastTool.before($puc);
                } else {
                    $liveMsg.append($puc);
                }
            }
        }

        // Record pre-edit content into pending snapshot and back-fill
        SnapshotStore.recordFileBeforeEdit(edit.file, previousContent, isNewFile);

        // Find the oldest Edit/Write tool indicator for this file that doesn't
        // already have edit actions. This is more robust than matching by toolId
        // because the SDK with includePartialMessages may re-emit tool_use blocks
        // as phantom indicators, causing toolId mismatches.
        const fileName = edit.file.split("/").pop();
        const $tool = $messages.find('.ai-msg-tool').filter(function () {
            const label = $(this).find(".ai-tool-label").text();
            const hasActions = $(this).find(".ai-tool-edit-actions").length > 0;
            return !hasActions && (label.includes("Edit " + fileName) || label.includes("Write " + fileName));
        }).first();
        if (!$tool.length) {
            return;
        }

        // Remove any existing edit actions (in case of duplicate events)
        $tool.find(".ai-tool-edit-actions").remove();

        // Build the inline edit actions (diff toggle only — undo is on summary card)
        const $actions = $('<div class="ai-tool-edit-actions"></div>');

        // Diff toggle
        const $diffToggle = $('<button class="ai-tool-diff-toggle">' + Strings.AI_CHAT_SHOW_DIFF + '</button>');
        const $diff = $('<div class="ai-tool-diff"></div>');

        if (edit.oldText) {
            edit.oldText.split("\n").forEach(function (line) {
                $diff.append($('<div class="ai-diff-old"></div>').text("- " + line));
            });
            edit.newText.split("\n").forEach(function (line) {
                $diff.append($('<div class="ai-diff-new"></div>').text("+ " + line));
            });
        } else {
            // Write (new file) — show all as new
            edit.newText.split("\n").forEach(function (line) {
                $diff.append($('<div class="ai-diff-new"></div>').text("+ " + line));
            });
        }

        $diffToggle.on("click", function () {
            $diff.toggleClass("expanded");
            $diffToggle.text($diff.hasClass("expanded") ? Strings.AI_CHAT_HIDE_DIFF : Strings.AI_CHAT_SHOW_DIFF);
        });

        $actions.append($diffToggle);
        $tool.append($actions);
        $tool.append($diff);
        _scrollToBottom();
    }

    function _onError(_event, data) {
        console.log("[AI UI]", "Error:", (data.error || "").slice(0, 200));
        _sessionError = true;
        _appendErrorMessage(data.error);
        // Record error in chat history
        _chatHistory.push({ type: "error", text: data.error });
        // Don't stop streaming — the node side may continue (partial results)
    }

    async function _onComplete(_event, data) {
        console.log("[AI UI]", "Complete. textChunks=" + _traceTextChunks,
            "toolStreams=" + JSON.stringify(_traceToolStreamCounts));
        // Reset trace counters for next query
        _traceTextChunks = 0;
        _traceToolStreamCounts = {};

        // Record finalized text segment before completing
        if (_segmentText) {
            const isFirst = !_chatHistory.some(function (m) { return m.type === "assistant"; });
            _chatHistory.push({ type: "assistant", markdown: _segmentText, isFirst: isFirst });
        }

        // Append edit summary if there were edits (finalizeResponse called inside)
        if (_currentEdits.length > 0) {
            // Record edit summary in chat history
            const fileStats = {};
            const fileOrder = [];
            _currentEdits.forEach(function (e) {
                if (!fileStats[e.file]) {
                    fileStats[e.file] = { added: 0, removed: 0 };
                    fileOrder.push(e.file);
                }
                fileStats[e.file].added += e.linesAdded;
                fileStats[e.file].removed += e.linesRemoved;
            });
            _chatHistory.push({
                type: "edit_summary",
                files: fileOrder.map(function (f) {
                    return { file: f, added: fileStats[f].added, removed: fileStats[f].removed };
                })
            });
            await _appendEditSummary();
        }

        SnapshotStore.stopTracking();
        _setStreaming(false);

        // Save session to history
        if (data.sessionId) {
            _currentSessionId = data.sessionId;
            const firstUserMsg = _chatHistory.find(function (m) { return m.type === "user"; });
            const sessionTitle = (firstUserMsg && firstUserMsg.text)
                ? firstUserMsg.text.slice(0, AIChatHistory.SESSION_TITLE_MAX_LEN)
                : "Untitled";
            // Record/update metadata (moves to top of history list)
            AIChatHistory.recordSessionMetadata(data.sessionId, sessionTitle);
            _firstUserMessage = null;
            // Remove any trailing "complete" markers before adding new one
            while (_chatHistory.length > 0 && _chatHistory[_chatHistory.length - 1].type === "complete") {
                _chatHistory.pop();
            }
            _chatHistory.push({ type: "complete" });
            AIChatHistory.saveChatHistory(data.sessionId, {
                id: data.sessionId,
                title: sessionTitle,
                timestamp: Date.now(),
                messages: _chatHistory
            });
        }

        // Fatal error (e.g. process exit code 1) — disable inputs, show "New Chat"
        if (_sessionError && !data.sessionId) {
            $textarea.prop("disabled", true);
            $textarea.closest(".ai-chat-input-wrap").addClass("disabled");
            $sendBtn.prop("disabled", true);
            // Move queued text back to textarea for user to reuse after new session
            if (_queuedMessage) {
                $textarea.val(_queuedMessage.text);
                _attachedImages = _queuedMessage.images;
                _renderImagePreview();
                _queuedMessage = null;
                _removeQueueBubble();
            }
            // Append inline "New Chat" button below the error
            const $newChat = $(
                '<div class="ai-msg ai-msg-new-chat">' +
                    '<button class="ai-error-new-chat-btn">' +
                        '<i class="fa-solid fa-plus"></i> ' + Strings.AI_CHAT_NEW_BTN +
                    '</button>' +
                '</div>'
            );
            $newChat.find(".ai-error-new-chat-btn").on("click", function () {
                // Preserve textarea content and images across the new session
                const savedText = $textarea.val();
                const savedImages = _attachedImages.slice();
                $newChat.remove();
                _newSession();
                $textarea.prop("disabled", false);
                $textarea.closest(".ai-chat-input-wrap").removeClass("disabled");
                $sendBtn.prop("disabled", false);
                $textarea.val(savedText);
                _attachedImages = savedImages;
                _renderImagePreview();
                $textarea[0].focus({ preventScroll: true });
            });
            $messages.append($newChat);
            _scrollToBottom();
            return;
        }

        // If user had a queued message, auto-send it as the next turn
        if (_queuedMessage) {
            const pending = _queuedMessage;
            _queuedMessage = null;
            _removeQueueBubble();
            $textarea.val(pending.text);
            _attachedImages = pending.images;
            _renderImagePreview();
            _sendMessage();
        }
    }

    /**
     * Append a compact summary card showing all files modified during this response.
     */
    async function _appendEditSummary() {
        // Finalize snapshot and get the after-snapshot index
        const afterIndex = await SnapshotStore.finalizeResponse();
        _undoApplied = false;

        // Aggregate per-file stats
        const fileStats = {};
        const fileOrder = [];
        _currentEdits.forEach(function (e) {
            if (!fileStats[e.file]) {
                fileStats[e.file] = { added: 0, removed: 0 };
                fileOrder.push(e.file);
            }
            fileStats[e.file].added += e.linesAdded;
            fileStats[e.file].removed += e.linesRemoved;
        });

        const fileCount = fileOrder.length;
        const $summary = $('<div class="ai-msg ai-msg-edit-summary" data-snapshot-index="' + afterIndex + '"></div>');
        const $header = $(
            '<div class="ai-edit-summary-header">' +
                '<span class="ai-edit-summary-title">' +
                    StringUtils.format(Strings.AI_CHAT_FILES_CHANGED, fileCount,
                        fileCount === 1 ? Strings.AI_CHAT_FILE_SINGULAR : Strings.AI_CHAT_FILE_PLURAL) +
                '</span>' +
            '</div>'
        );

        if (afterIndex >= 0) {
            // Update any previous summary card buttons to say "Restore to this point"
            _$msgs().find('.ai-edit-restore-btn').text(Strings.AI_CHAT_RESTORE_POINT)
                .attr("title", Strings.AI_CHAT_RESTORE_TITLE)
                .data("action", "restore");

            // Determine button label: "Undo" if not undone, else "Restore to this point"
            const isUndo = !_undoApplied;
            const label = isUndo ? Strings.AI_CHAT_UNDO : Strings.AI_CHAT_RESTORE_POINT;
            const title = isUndo ? Strings.AI_CHAT_UNDO_TITLE : Strings.AI_CHAT_RESTORE_TITLE;

            const $restoreBtn = $(
                '<button class="ai-edit-restore-btn" data-snapshot-index="' + afterIndex + '" ' +
                'title="' + title + '">' + label + '</button>'
            );
            $restoreBtn.data("action", isUndo ? "undo" : "restore");
            $restoreBtn.on("click", function (e) {
                e.stopPropagation();
                if (_isStreaming) {
                    return;
                }
                if ($(this).data("action") === "undo") {
                    _onUndoClick(afterIndex);
                } else {
                    _onRestoreClick(afterIndex);
                }
            });
            $header.append($restoreBtn);
        }
        $summary.append($header);

        fileOrder.forEach(function (filePath) {
            const stats = fileStats[filePath];
            const displayName = filePath.split("/").pop();
            const $file = $(
                '<div class="ai-edit-summary-file" data-path="' + _escapeAttr(filePath) + '">' +
                    '<span class="ai-edit-summary-name"></span>' +
                    '<span class="ai-edit-summary-stats">' +
                        '<span class="ai-edit-summary-add">+' + stats.added + '</span>' +
                        '<span class="ai-edit-summary-del">-' + stats.removed + '</span>' +
                    '</span>' +
                '</div>'
            );
            $file.find(".ai-edit-summary-name").text(displayName);
            $file.on("click", function () {
                const vfsPath = SnapshotStore.realToVfsPath(filePath);
                CommandManager.execute(Commands.CMD_OPEN, { fullPath: vfsPath });
            });
            $summary.append($file);
        });

        $messages.append($summary);
        _scrollToBottom();
    }

    /**
     * Handle "Restore to this point" click on any restore point element.
     * @param {number} snapshotIndex - index into the snapshots array
     */
    function _onRestoreClick(snapshotIndex) {
        const $msgs = _$msgs();
        // Remove all existing highlights
        $msgs.find(".ai-restore-highlighted").removeClass("ai-restore-highlighted");

        // Once any "Restore to this point" is clicked, undo is no longer applicable
        _undoApplied = true;

        // Reset all buttons to "Restore to this point"
        $msgs.find('.ai-edit-restore-btn').each(function () {
            $(this).text(Strings.AI_CHAT_RESTORE_POINT)
                .attr("title", Strings.AI_CHAT_RESTORE_TITLE)
                .data("action", "restore");
        });
        $msgs.find('.ai-restore-point-btn').text(Strings.AI_CHAT_RESTORE_POINT);

        SnapshotStore.restoreToSnapshot(snapshotIndex, function (errorCount) {
            if (errorCount > 0) {
                console.warn("[AI UI] Restore had", errorCount, "errors");
            }

            // Mark the clicked element as "Restored"
            const $m = _$msgs();
            const $target = $m.find('[data-snapshot-index="' + snapshotIndex + '"]');
            if ($target.length) {
                $target.addClass("ai-restore-highlighted");
                const $btn = $target.find(".ai-edit-restore-btn, .ai-restore-point-btn");
                $btn.text(Strings.AI_CHAT_RESTORED);
            }
        });
    }

    /**
     * Handle "Undo" click on the latest summary card.
     * @param {number} afterIndex - snapshot index of the latest after-snapshot
     */
    function _onUndoClick(afterIndex) {
        const $msgs = _$msgs();
        _undoApplied = true;
        const targetIndex = afterIndex - 1;

        // Reset all buttons to "Restore to this point"
        $msgs.find('.ai-edit-restore-btn').each(function () {
            $(this).text(Strings.AI_CHAT_RESTORE_POINT)
                .attr("title", Strings.AI_CHAT_RESTORE_TITLE)
                .data("action", "restore");
        });
        $msgs.find('.ai-restore-point-btn').text(Strings.AI_CHAT_RESTORE_POINT);

        SnapshotStore.restoreToSnapshot(targetIndex, function (errorCount) {
            if (errorCount > 0) {
                console.warn("[AI UI] Undo had", errorCount, "errors");
            }

            // Find the DOM element for the target snapshot and highlight it
            const $m = _$msgs();
            const $target = $m.find('[data-snapshot-index="' + targetIndex + '"]');
            if ($target.length) {
                $m.find(".ai-restore-highlighted").removeClass("ai-restore-highlighted");
                $target.addClass("ai-restore-highlighted");
                $target[0].scrollIntoView({ behavior: "smooth", block: "center" });
                // Mark the target as "Restored"
                const $btn = $target.find(".ai-edit-restore-btn, .ai-restore-point-btn");
                $btn.text(Strings.AI_CHAT_RESTORED);
            }
        });
    }

    /**
     * Handle an AskUserQuestion tool call — render interactive question UI.
     */
    function _onQuestion(_event, data) {
        const questions = data.questions || [];
        if (!questions.length) {
            return;
        }

        // Capture questions for history recording (answers recorded in _sendQuestionAnswers)
        _lastQuestions = questions;

        // Remove thinking indicator on first content
        if (!_hasReceivedContent) {
            _hasReceivedContent = true;
            $messages.find(".ai-thinking").remove();
        }

        // Finalize current text segment so question appears after it
        $messages.find(".ai-stream-target").removeClass("ai-stream-target");
        _segmentText = "";

        const answers = {};
        const totalQuestions = questions.length;
        let answeredCount = 0;

        const $container = $('<div class="ai-msg ai-msg-question"></div>');

        questions.forEach(function (q) {
            const $qBlock = $('<div class="ai-question-block"></div>');
            const $qText = $('<div class="ai-question-text"></div>');
            $qText.text(q.question);
            $qBlock.append($qText);

            const $options = $('<div class="ai-question-options"></div>');

            q.options.forEach(function (opt) {
                const $opt = $('<button class="ai-question-option"></button>');
                const $label = $('<span class="ai-question-option-label"></span>');
                $label.text(opt.label);
                $opt.append($label);
                if (opt.description) {
                    const $desc = $('<span class="ai-question-option-desc"></span>');
                    $desc.text(opt.description);
                    $opt.append($desc);
                }

                $opt.on("click", function () {
                    if ($qBlock.data("answered")) {
                        return;
                    }
                    if (q.multiSelect) {
                        $opt.toggleClass("selected");
                    } else {
                        // Single select — answer immediately
                        $qBlock.data("answered", true);
                        $options.find(".ai-question-option").prop("disabled", true);
                        $opt.addClass("selected");
                        $qBlock.find(".ai-question-other").hide();
                        answers[q.question] = opt.label;
                        answeredCount++;
                        if (answeredCount >= totalQuestions) {
                            _sendQuestionAnswers(answers);
                        }
                    }
                });
                $options.append($opt);
            });

            // Multi-select submit button
            if (q.multiSelect) {
                const $submit = $('<button class="ai-question-submit">' +
                    '<i class="fa-solid fa-paper-plane"></i></button>');
                $submit.on("click", function () {
                    if ($qBlock.data("answered")) {
                        return;
                    }
                    const selected = [];
                    $options.find(".ai-question-option.selected").each(function () {
                        selected.push($(this).find(".ai-question-option-label").text());
                    });
                    if (!selected.length) {
                        return;
                    }
                    $qBlock.data("answered", true);
                    $options.find(".ai-question-option").prop("disabled", true);
                    $submit.prop("disabled", true);
                    $qBlock.find(".ai-question-other").hide();
                    answers[q.question] = selected.join(", ");
                    answeredCount++;
                    if (answeredCount >= totalQuestions) {
                        _sendQuestionAnswers(answers);
                    }
                });
                $options.append($submit);
            }

            $qBlock.append($options);

            // "Other" free-text input
            const $other = $('<div class="ai-question-other"></div>');
            const $input = $('<input type="text" class="ai-question-other-input" ' +
                'placeholder="' + Strings.AI_CHAT_QUESTION_OTHER + '">');
            const $sendOther = $('<button class="ai-question-other-submit">' +
                '<i class="fa-solid fa-paper-plane"></i></button>');
            function submitOther() {
                const val = $input.val().trim();
                if (!val || $qBlock.data("answered")) {
                    return;
                }
                $qBlock.data("answered", true);
                $options.find(".ai-question-option").prop("disabled", true);
                $input.prop("disabled", true);
                $sendOther.prop("disabled", true);
                answers[q.question] = val;
                answeredCount++;
                if (answeredCount >= totalQuestions) {
                    _sendQuestionAnswers(answers);
                }
            }
            $sendOther.on("click", submitOther);
            $input.on("keydown", function (e) {
                if (e.key === "Enter") {
                    submitOther();
                }
            });
            $other.append($input).append($sendOther);
            $qBlock.append($other);

            $container.append($qBlock);
        });

        $messages.append($container);
        _scrollToBottom();
    }

    /**
     * Send collected question answers to the node side.
     */
    function _sendQuestionAnswers(answers) {
        // Record question + answers in chat history
        if (_lastQuestions) {
            _chatHistory.push({
                type: "question",
                questions: _lastQuestions,
                answers: answers
            });
            _lastQuestions = null;
        }
        _nodeConnector.execPeer("answerQuestion", { answers: answers }).catch(function (err) {
            console.warn("[AI UI] Failed to send question answer:", err.message);
        });
    }

    // --- DOM helpers ---

    function _appendUserMessage(text, images) {
        const $msg = $(
            '<div class="ai-msg ai-msg-user">' +
                '<div class="ai-msg-label">' + Strings.AI_CHAT_LABEL_YOU + '</div>' +
                '<div class="ai-msg-content"></div>' +
            '</div>'
        );
        $msg.find(".ai-msg-content").text(text);
        if (images && images.length > 0) {
            const $imgDiv = $('<div class="ai-user-images"></div>');
            images.forEach(function (img) {
                const $thumb = $('<img class="ai-user-image-thumb" />');
                $thumb.attr("src", img.dataUrl);
                $thumb.on("click", function () {
                    _showImageLightbox(img.dataUrl);
                });
                $imgDiv.append($thumb);
            });
            $msg.find(".ai-msg-content").append($imgDiv);
        }
        $messages.append($msg);
        _scrollToBottom();
    }

    /**
     * Append a thinking/typing indicator while waiting for first content.
     */
    function _appendThinkingIndicator() {
        const $thinking = $(
            '<div class="ai-msg ai-msg-assistant ai-thinking">' +
                '<div class="ai-msg-label">' + Strings.AI_CHAT_LABEL_CLAUDE + '</div>' +
                '<div class="ai-msg-content">' +
                    '<span class="ai-thinking-dots">' +
                        '<span></span><span></span><span></span>' +
                    '</span>' +
                '</div>' +
            '</div>'
        );
        $messages.append($thinking);
        _scrollToBottom();
    }

    /**
     * Append a new assistant text segment. Creates a fresh content block
     * that subsequent text deltas will stream into. Shows the "Claude" label
     * only for the first segment in a response.
     */
    function _appendAssistantSegment() {
        // Check if this is a continuation (there's already assistant content or tools above)
        const isFirst = !$messages.find(".ai-msg-assistant").not(".ai-thinking").length;
        const $msg = $(
            '<div class="ai-msg ai-msg-assistant">' +
                (isFirst ? '<div class="ai-msg-label">Claude</div>' : '') +
                '<div class="ai-msg-content ai-stream-target"></div>' +
            '</div>'
        );
        $messages.append($msg);
    }

    /**
     * Re-render the current streaming segment from accumulated segment text.
     */
    function _renderAssistantStream() {
        const $target = $messages.find(".ai-stream-target").last();
        if ($target.length) {
            try {
                $target.html(marked.parse(_segmentText, { breaks: true, gfm: true }));
                _enhanceColorCodes($target);
                _addCopyButtons($target);
            } catch (e) {
                $target.text(_segmentText);
            }
            _scrollToBottom();
        }
    }

    const HEX_COLOR_RE = /#[a-f0-9]{3,8}\b/gi;

    /**
     * Scan text nodes inside an element for hex color codes and wrap each
     * with an inline swatch element showing the actual color.
     */
    function _enhanceColorCodes($el) {
        // Walk text nodes inside the element, but skip <pre> blocks and already-enhanced swatches
        const walker = document.createTreeWalker(
            $el[0],
            NodeFilter.SHOW_TEXT,
            {
                acceptNode: function (node) {
                    const parent = node.parentNode;
                    if (parent.closest && parent.closest("pre, .ai-color-swatch")) {
                        return NodeFilter.FILTER_REJECT;
                    }
                    return HEX_COLOR_RE.test(node.nodeValue)
                        ? NodeFilter.FILTER_ACCEPT
                        : NodeFilter.FILTER_REJECT;
                }
            }
        );

        const textNodes = [];
        let n;
        while ((n = walker.nextNode())) {
            textNodes.push(n);
        }

        textNodes.forEach(function (textNode) {
            const text = textNode.nodeValue;
            HEX_COLOR_RE.lastIndex = 0;
            const frag = document.createDocumentFragment();
            let lastIndex = 0;
            let match;
            while ((match = HEX_COLOR_RE.exec(text)) !== null) {
                // Append any text before the match
                if (match.index > lastIndex) {
                    frag.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
                }
                const color = match[0];
                const swatch = document.createElement("span");
                swatch.className = "ai-color-swatch";
                swatch.style.setProperty("--swatch-color", color);
                const preview = document.createElement("span");
                preview.className = "ai-color-swatch-preview";
                swatch.appendChild(preview);
                swatch.appendChild(document.createTextNode(color));
                frag.appendChild(swatch);
                lastIndex = HEX_COLOR_RE.lastIndex;
            }
            if (lastIndex < text.length) {
                frag.appendChild(document.createTextNode(text.slice(lastIndex)));
            }
            textNode.parentNode.replaceChild(frag, textNode);
        });
    }

    /**
     * Inject a copy-to-clipboard button into each <pre> block inside the given container.
     * Idempotent: skips <pre> elements that already have a .ai-copy-btn.
     */
    function _addCopyButtons($container) {
        $container.find("pre").each(function () {
            const $pre = $(this);
            if ($pre.find(".ai-copy-btn").length) {
                return;
            }
            const $btn = $('<button class="ai-copy-btn" title="' + Strings.AI_CHAT_COPY_CODE + '">' +
                '<i class="fa-solid fa-copy"></i></button>');
            $btn.on("click", function (e) {
                e.stopPropagation();
                const $code = $pre.find("code");
                const text = ($code.length ? $code[0] : $pre[0]).textContent;
                Phoenix.app.copyToClipboard(text);
                const $icon = $btn.find("i");
                $icon.removeClass("fa-copy").addClass("fa-check");
                $btn.attr("title", Strings.AI_CHAT_COPIED_CODE);
                setTimeout(function () {
                    $icon.removeClass("fa-check").addClass("fa-copy");
                    $btn.attr("title", Strings.AI_CHAT_COPY_CODE);
                }, 1500);
            });
            $pre.append($btn);
        });
    }

    function _appendToolIndicator(toolName, toolId) {
        // Remove thinking indicator on first content
        if (!_hasReceivedContent) {
            _hasReceivedContent = true;
            $messages.find(".ai-thinking").remove();
        }

        // Record finalized text segment before clearing
        if (_segmentText) {
            const isFirst = !_chatHistory.some(function (m) { return m.type === "assistant"; });
            _chatHistory.push({ type: "assistant", markdown: _segmentText, isFirst: isFirst });
        }

        // Finalize the current text segment so tool appears after it, not at the end
        $messages.find(".ai-stream-target").removeClass("ai-stream-target");
        _segmentText = "";

        // Mark any previous active tool indicator as done
        _finishActiveTools();

        const config = TOOL_CONFIG[toolName] || { icon: "fa-solid fa-gear", color: "#adb9bd", label: toolName };

        // Use requestId + toolId to ensure globally unique data-tool-id
        const uniqueToolId = (_currentRequestId || "") + "-" + toolId;
        const $tool = $(
            '<div class="ai-msg ai-msg-tool" data-tool-id="' + uniqueToolId + '">' +
                '<div class="ai-tool-header">' +
                    '<span class="ai-tool-spinner"></span>' +
                    '<span class="ai-tool-label"></span>' +
                '</div>' +
                '<div class="ai-tool-preview"></div>' +
            '</div>'
        );
        $tool.find(".ai-tool-label").text(config.label + "...");
        $tool.css("--tool-color", config.color);
        $tool.attr("data-tool-icon", config.icon);
        $tool.data("startTime", Date.now());
        $messages.append($tool);
        _scrollToBottom();
    }

    /**
     * Update an existing tool indicator with details once tool input is known.
     */
    function _updateToolIndicator(toolId, toolName, toolInput) {
        const uniqueToolId = (_currentRequestId || "") + "-" + toolId;
        const $tool = $messages.find('.ai-msg-tool[data-tool-id="' + uniqueToolId + '"]');
        if (!$tool.length) {
            return;
        }

        const config = TOOL_CONFIG[toolName] || { icon: "fa-solid fa-gear", color: "#adb9bd", label: toolName };
        const detail = _getToolDetail(toolName, toolInput);

        // Record tool in chat history
        _chatHistory.push({
            type: "tool",
            toolName: toolName,
            summary: detail.summary,
            icon: config.icon,
            color: config.color
        });

        // Replace spinner with colored icon immediately
        $tool.find(".ai-tool-spinner").replaceWith(
            '<span class="ai-tool-icon" style="color:' + config.color + '">' +
                '<i class="' + config.icon + '"></i>' +
            '</span>'
        );

        // Update label to include summary
        $tool.find(".ai-tool-label").text(detail.summary);

        // For TodoWrite, render a mini task-list widget and auto-expand
        if (toolName === "TodoWrite" && toolInput && toolInput.todos) {
            const $detail = $('<div class="ai-tool-detail"></div>');
            const $todoList = $('<div class="ai-todo-list"></div>');
            toolInput.todos.forEach(function (todo) {
                let iconClass, statusClass;
                if (todo.status === "completed") {
                    iconClass = "fa-solid fa-circle-check";
                    statusClass = "completed";
                } else if (todo.status === "in_progress") {
                    iconClass = "fa-solid fa-spinner fa-spin";
                    statusClass = "in_progress";
                } else {
                    iconClass = "fa-regular fa-circle";
                    statusClass = "pending";
                }
                const $item = $(
                    '<div class="ai-todo-item">' +
                        '<span class="ai-todo-icon ' + statusClass + '"><i class="' + iconClass + '"></i></span>' +
                        '<span class="ai-todo-content ' + (todo.status === "completed" ? "completed" : "") + '"></span>' +
                    '</div>'
                );
                $item.find(".ai-todo-content").text(todo.content);
                $todoList.append($item);
            });
            $detail.append($todoList);
            $tool.append($detail);
            $tool.addClass("ai-tool-expanded");
            $tool.find(".ai-tool-header").on("click", function () {
                $tool.toggleClass("ai-tool-expanded");
            }).css("cursor", "pointer");
        } else if (toolName === "mcp__phoenix-editor__wait" && toolInput && toolInput.seconds) {
            // Countdown timer: update label every second
            const totalSec = Math.ceil(toolInput.seconds);
            let remaining = totalSec;
            const $label = $tool.find(".ai-tool-label");
            const countdownId = setInterval(function () {
                remaining--;
                if (remaining <= 0) {
                    clearInterval(countdownId);
                    $label.text(StringUtils.format(Strings.AI_CHAT_TOOL_WAITED, totalSec));
                } else {
                    $label.text(StringUtils.format(Strings.AI_CHAT_TOOL_WAITING, remaining));
                }
            }, 1000);
        } else if (toolName === "mcp__phoenix-editor__takeScreenshot") {
            const $detail = $('<div class="ai-tool-detail"></div>');
            $tool.append($detail);
            $tool.data("awaitingScreenshot", true);
            $tool.find(".ai-tool-header").on("click", function () {
                $tool.toggleClass("ai-tool-expanded");
            }).css("cursor", "pointer");
        } else if (toolName === "Task" && toolInput) {
            const $detail = $('<div class="ai-tool-detail"></div>');
            const desc = toolInput.description || toolInput.prompt || "";
            if (desc) {
                $detail.append($('<div class="ai-tool-detail-line"></div>').text(desc.slice(0, 200)));
            }
            $tool.append($detail);
            $tool.addClass("ai-tool-expanded");
            $tool.find(".ai-tool-header").on("click", function () {
                $tool.toggleClass("ai-tool-expanded");
            }).css("cursor", "pointer");
        } else if (detail.lines && detail.lines.length) {
            // Add expandable detail if available
            const $detail = $('<div class="ai-tool-detail"></div>');
            detail.lines.forEach(function (line) {
                $detail.append($('<div class="ai-tool-detail-line"></div>').text(line));
            });
            $tool.append($detail);

            // Make header clickable to expand
            $tool.find(".ai-tool-header").on("click", function () {
                $tool.toggleClass("ai-tool-expanded");
            }).css("cursor", "pointer");
        }

        // For file-related tools, make label clickable to open the file
        if (toolInput && toolInput.file_path &&
            (toolName === "Read" || toolName === "Write" || toolName === "Edit")) {
            const filePath = toolInput.file_path;
            $tool.find(".ai-tool-label").on("click", function (e) {
                e.stopPropagation();
                const vfsPath = SnapshotStore.realToVfsPath(filePath);
                CommandManager.execute(Commands.CMD_OPEN, { fullPath: vfsPath });
            }).css("cursor", "pointer").addClass("ai-tool-label-clickable");
        }

        // Clear any stale-preview timers now that tool info arrived
        clearTimeout(_toolStreamStaleTimer);
        clearInterval(_toolStreamRotateTimer);

        // Stop the elapsed timer and remove the element
        const elapsedTimer = $tool.data("elapsedTimer");
        if (elapsedTimer) {
            clearInterval(elapsedTimer);
            $tool.removeData("elapsedTimer");
        }
        $tool.find(".ai-tool-elapsed").remove();

        // Delay marking as done so the streaming preview stays visible briefly.
        // The ai-tool-done class hides the preview via CSS; deferring it lets the
        // browser paint the preview before it disappears.
        setTimeout(function () {
            $tool.addClass("ai-tool-done");
            $tool.find(".ai-tool-preview").text("");
        }, 1500);

        _scrollToBottom();
    }

    /**
     * Extract a summary and detail lines from tool input.
     */
    function _getToolDetail(toolName, input) {
        if (!input) {
            return { summary: toolName, lines: [] };
        }
        switch (toolName) {
        case "Glob":
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_SEARCHED, input.pattern || ""),
                lines: input.path ? [StringUtils.format(Strings.AI_CHAT_TOOL_IN_PATH, input.path)] : []
            };
        case "Grep":
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_GREP, input.pattern || ""),
                lines: [
                    input.path ? StringUtils.format(Strings.AI_CHAT_TOOL_IN_PATH, input.path) : "",
                    input.include ? StringUtils.format(Strings.AI_CHAT_TOOL_INCLUDE, input.include) : ""
                ].filter(Boolean)
            };
        case "Read":
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_READ_FILE, (input.file_path || "").split("/").pop()),
                lines: [input.file_path || ""]
            };
        case "Edit":
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_EDIT_FILE, (input.file_path || "").split("/").pop()),
                lines: [input.file_path || ""]
            };
        case "Write":
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_WRITE_FILE, (input.file_path || "").split("/").pop()),
                lines: [input.file_path || ""]
            };
        case "Bash":
            return {
                summary: Strings.AI_CHAT_TOOL_RAN_CMD,
                lines: input.command ? [input.command] : []
            };
        case "Skill":
            return {
                summary: input.skill ? StringUtils.format(Strings.AI_CHAT_TOOL_SKILL_NAME, input.skill) : Strings.AI_CHAT_TOOL_SKILL,
                lines: input.args ? [input.args] : []
            };
        case "mcp__phoenix-editor__getEditorState":
            return { summary: Strings.AI_CHAT_TOOL_EDITOR_STATE, lines: [] };
        case "mcp__phoenix-editor__takeScreenshot": {
            let screenshotTarget = Strings.AI_CHAT_TOOL_SCREENSHOT_FULL_PAGE;
            if (input.selector) {
                if (input.selector.indexOf("live-preview") !== -1 || input.selector.indexOf("panel-live-preview") !== -1) {
                    screenshotTarget = Strings.AI_CHAT_TOOL_SCREENSHOT_LIVE_PREVIEW;
                } else {
                    screenshotTarget = input.selector;
                }
            }
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_SCREENSHOT_OF, screenshotTarget),
                lines: input.selector ? [input.selector] : []
            };
        }
        case "mcp__phoenix-editor__execJsInLivePreview":
            return {
                summary: Strings.AI_CHAT_TOOL_LIVE_PREVIEW_JS,
                lines: input.code ? input.code.split("\n").slice(0, 20) : []
            };
        case "mcp__phoenix-editor__resizeLivePreview":
            return {
                summary: Strings.AI_CHAT_TOOL_RESIZE_PREVIEW,
                lines: input.width ? [input.width + "px"] : []
            };
        case "mcp__phoenix-editor__wait":
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_WAITING, input.seconds || "?"),
                lines: []
            };
        case "mcp__phoenix-editor__getUserClarification":
            return {
                summary: Strings.AI_CHAT_TOOL_CLARIFICATION,
                lines: []
            };
        case "AskUserQuestion": {
            const qs = input.questions || [];
            return {
                summary: Strings.AI_CHAT_TOOL_QUESTION,
                lines: qs.map(function (q) { return q.question; })
            };
        }
        case "Task": {
            const desc = input.description || input.prompt || "";
            const agentType = input.subagent_type || "";
            const summary = agentType
                ? StringUtils.format(Strings.AI_CHAT_TOOL_TASK_NAME, agentType)
                : Strings.AI_CHAT_TOOL_TASK;
            return {
                summary: summary,
                lines: desc ? [desc.split("\n")[0].slice(0, 120)] : []
            };
        }
        case "TodoWrite": {
            const todos = input.todos || [];
            const completed = todos.filter(function (t) { return t.status === "completed"; }).length;
            return {
                summary: StringUtils.format(Strings.AI_CHAT_TOOL_TASKS_SUMMARY, completed, todos.length),
                lines: []
            };
        }
        case "mcp__phoenix-editor__controlEditor": {
            // Multi-operation batch format
            if (input.operations && input.operations.length) {
                if (input.operations.length === 1) {
                    // Single operation — show its detail
                    const op = input.operations[0];
                    const fn = (op.filePath || "").split("/").pop();
                    let opSummary;
                    switch (op.operation) {
                    case "open":
                    case "openInWorkingSet":
                        opSummary = "Open " + fn;
                        break;
                    case "close":
                        opSummary = "Close " + fn;
                        break;
                    case "setCursorPos":
                        opSummary = "Go to L" + (op.line || "?") + " in " + fn;
                        break;
                    case "setSelection":
                        opSummary = "Select L" + (op.startLine || "?") + "-L" + (op.endLine || "?") + " in " + fn;
                        break;
                    default:
                        opSummary = Strings.AI_CHAT_TOOL_CONTROL_EDITOR;
                    }
                    return { summary: opSummary, lines: [op.filePath || ""] };
                }
                // Multiple operations — summarize
                const count = input.operations.length;
                const opTypes = {};
                input.operations.forEach(function (op) {
                    const t = op.operation || "open";
                    opTypes[t] = (opTypes[t] || 0) + 1;
                });
                const parts = Object.keys(opTypes).map(function (t) {
                    const label = (t === "open" || t === "openInWorkingSet") ? "Open" :
                        t === "close" ? "Close" :
                            t === "setCursorPos" ? "Navigate" :
                                t === "setSelection" ? "Select" : t;
                    return label + " " + opTypes[t];
                });
                return { summary: parts.join(", ") + " files", lines: [] };
            }
            // Legacy single-operation format
            const fileName = (input.filePath || "").split("/").pop();
            let opSummary;
            switch (input.operation) {
            case "open":
            case "openInWorkingSet":
                opSummary = "Open " + fileName;
                break;
            case "close":
                opSummary = "Close " + fileName;
                break;
            case "setCursorPos":
                opSummary = "Go to L" + (input.line || "?") + " in " + fileName;
                break;
            case "setSelection":
                opSummary = "Select L" + (input.startLine || "?") + "-L" + (input.endLine || "?") + " in " + fileName;
                break;
            default:
                opSummary = Strings.AI_CHAT_TOOL_CONTROL_EDITOR;
            }
            return { summary: opSummary, lines: [input.filePath || ""] };
        }
        default: {
            // Fallback: use TOOL_CONFIG label if available
            const cfg = TOOL_CONFIG[toolName];
            return { summary: cfg ? cfg.label : toolName, lines: [] };
        }
        }
    }

    /**
     * Mark all active (non-done) tool indicators as finished.
     * Tools that already received _updateToolIndicator (spinner replaced with
     * .ai-tool-icon) are skipped — their delayed timeout will add .ai-tool-done.
     * This only force-finishes tools that never got a toolInfo (e.g. interrupted).
     */
    function _finishActiveTools() {
        $messages.find(".ai-msg-tool:not(.ai-tool-done)").each(function () {
            const $prev = $(this);
            // Clear any running elapsed timer
            const et = $prev.data("elapsedTimer");
            if (et) {
                clearInterval(et);
                $prev.removeData("elapsedTimer");
            }
            $prev.find(".ai-tool-elapsed").remove();
            // _updateToolIndicator already ran — let the delayed timeout handle it
            if ($prev.find(".ai-tool-icon").length) {
                return;
            }
            $prev.addClass("ai-tool-done");
            const iconClass = $prev.attr("data-tool-icon") || "fa-solid fa-check";
            const color = $prev.css("--tool-color") || "#adb9bd";
            $prev.find(".ai-tool-spinner").replaceWith(
                '<span class="ai-tool-icon" style="color:' + color + '">' +
                    '<i class="' + iconClass + '"></i>' +
                '</span>'
            );
        });
    }


    function _appendErrorMessage(text) {
        const $msg = $(
            '<div class="ai-msg ai-msg-error">' +
                '<div class="ai-msg-content"></div>' +
            '</div>'
        );
        $msg.find(".ai-msg-content").text(text);
        $messages.append($msg);
        _scrollToBottom();
    }

    function _setStreaming(streaming) {
        _isStreaming = streaming;
        if ($status) {
            $status.toggleClass("active", streaming);
        }
        if ($textarea) {
            // Keep textarea enabled during streaming so users can type a queued clarification
            if (!streaming) {
                $textarea[0].focus({ preventScroll: true });
            }
        }
        if ($sendBtn && $stopBtn) {
            if (streaming) {
                $sendBtn.hide();
                $stopBtn.show();
            } else {
                $stopBtn.hide();
                $sendBtn.show();
            }
        }
        // Disable/enable all restore buttons during streaming (use live query)
        _$msgs().find(".ai-restore-point-btn, .ai-edit-restore-btn")
            .prop("disabled", streaming);
        if (!streaming && $messages) {
            // Clean up thinking indicator if still present
            $messages.find(".ai-thinking").remove();

            // Finalize: remove ai-stream-target class so future messages get their own container
            $messages.find(".ai-stream-target").removeClass("ai-stream-target");

            // Ensure copy buttons are present on all code blocks
            _addCopyButtons($messages);

            // Mark all active tool indicators as done
            _finishActiveTools();
        }
    }

    function _scrollToBottom() {
        if (_autoScroll && $messages && $messages.length) {
            const el = $messages[0];
            el.scrollTop = el.scrollHeight;
        }
    }

    function _escapeAttr(str) {
        return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }

    // --- Session History ---

    /**
     * Toggle the history dropdown open/closed.
     */
    function _toggleHistoryDropdown() {
        const $dropdown = $panel.find(".ai-session-history-dropdown");
        const $btn = $panel.find(".ai-history-btn");
        const isOpen = $dropdown.hasClass("open");
        if (isOpen) {
            $dropdown.removeClass("open");
            $btn.removeClass("active");
            $panel.removeClass("ai-history-open");
        } else {
            _renderHistoryDropdown();
            $dropdown.addClass("open");
            $btn.addClass("active");
            $panel.addClass("ai-history-open");
        }
    }

    /**
     * Render the history dropdown contents from stored session metadata.
     */
    function _renderHistoryDropdown() {
        const $dropdown = $panel.find(".ai-session-history-dropdown");
        $dropdown.empty();

        const history = AIChatHistory.loadSessionHistory();
        if (!history.length) {
            $dropdown.append(
                '<div class="ai-history-empty">' + Strings.AI_CHAT_HISTORY_EMPTY + '</div>'
            );
            return;
        }

        history.forEach(function (session) {
            const $item = $(
                '<div class="ai-history-item" data-session-id="' + _escapeAttr(session.id) + '">' +
                    '<div class="ai-history-item-info">' +
                        '<div class="ai-history-item-title"></div>' +
                        '<div class="ai-history-item-time"></div>' +
                    '</div>' +
                    '<button class="ai-history-item-delete" title="' + Strings.AI_CHAT_HISTORY_DELETE_CONFIRM + '">' +
                        '<i class="fa-solid fa-trash-can"></i>' +
                    '</button>' +
                '</div>'
            );
            $item.find(".ai-history-item-title").text(session.title || "Untitled");
            $item.find(".ai-history-item-time").text(AIChatHistory.formatRelativeTime(session.timestamp));

            if (_currentSessionId === session.id) {
                $item.addClass("ai-history-active");
            }

            // Click to resume session
            $item.find(".ai-history-item-info").on("click", function () {
                _resumeSession(session.id, session.title);
            });

            // Delete button
            $item.find(".ai-history-item-delete").on("click", function (e) {
                e.stopPropagation();
                AIChatHistory.deleteSession(session.id, function () {
                    _renderHistoryDropdown();
                });
            });

            $dropdown.append($item);
        });

        // Clear all link
        const $clearAll = $('<div class="ai-history-clear-all">' + Strings.AI_CHAT_HISTORY_CLEAR_ALL + '</div>');
        $clearAll.on("click", function () {
            AIChatHistory.clearAllHistory(function () {
                $panel.find(".ai-session-history-dropdown").removeClass("open");
                $panel.find(".ai-history-btn").removeClass("active");
                $panel.removeClass("ai-history-open");
            });
        });
        $dropdown.append($clearAll);
    }

    /**
     * Resume a past session: load history, restore visual state, tell node side.
     */
    function _resumeSession(sessionId, title) {
        // Close dropdown
        $panel.find(".ai-session-history-dropdown").removeClass("open");
        $panel.find(".ai-history-btn").removeClass("active");
        $panel.removeClass("ai-history-open");

        // Cancel any in-flight query
        if (_isStreaming) {
            _cancelQuery();
        }

        // Tell node side to set session ID for resume
        _nodeConnector.execPeer("resumeSession", { sessionId: sessionId }).catch(function (err) {
            console.warn("[AI UI] Failed to resume session:", err.message);
        });

        // Load chat history from disk
        AIChatHistory.loadChatHistory(sessionId, function (err, data) {
            if (err) {
                console.warn("[AI UI] Failed to load chat history:", err);
                // Remove stale metadata entry
                AIChatHistory.deleteSession(sessionId);
                return;
            }

            // Reset state (similar to _newSession but keep session ID)
            _currentRequestId = null;
            _segmentText = "";
            _hasReceivedContent = false;
            _isStreaming = false;
            _sessionError = false;
            _queuedMessage = null;
            _removeQueueBubble();
            _firstEditInResponse = true;
            _undoApplied = false;
            _firstUserMessage = null;
            _lastQuestions = null;
            _attachedImages = [];
            _renderImagePreview();
            SnapshotStore.reset();
            PhoenixConnectors.clearPreviousContentMap();

            // Clear messages and render restored chat
            $messages.empty();

            // Show "Resumed session" indicator
            const $indicator = $(
                '<div class="ai-session-resumed-indicator">' +
                    '<i class="fa-solid fa-clock-rotate-left"></i> ' +
                    Strings.AI_CHAT_SESSION_RESUMED +
                '</div>'
            );
            $messages.append($indicator);

            // Render restored messages
            AIChatHistory.renderRestoredChat(data.messages, $messages, $panel);

            // Set state for continued conversation
            _currentSessionId = sessionId;
            _isResumedSession = true;
            _chatHistory = data.messages ? data.messages.slice() : [];

            // Show "+ New" button, enable input
            $panel.find(".ai-new-session-btn").show();
            if ($status) {
                $status.removeClass("active");
            }
            $textarea.prop("disabled", false);
            $textarea.closest(".ai-chat-input-wrap").removeClass("disabled");
            $sendBtn.prop("disabled", false);
            $textarea[0].focus({ preventScroll: true });

            // Scroll to bottom
            if ($messages && $messages.length) {
                $messages[0].scrollTop = $messages[0].scrollHeight;
            }
        });
    }

    // --- Path utilities ---

    /**
     * Get the real filesystem path for the current project root.
     */
    function _getProjectRealPath() {
        const root = ProjectManager.getProjectRoot();
        if (!root) {
            return "/";
        }
        const fullPath = root.fullPath;
        // Desktop (Tauri) paths: /tauri/real/path → /real/path
        if (fullPath.startsWith("/tauri/")) {
            return fullPath.replace("/tauri", "");
        }
        return fullPath;
    }

    // Public API
    exports.init = init;
    exports.initPlaceholder = initPlaceholder;
});