import * as vscode from 'vscode';
import * as fs from 'fs';
import * as path from 'path';
import { 
    _getBrainDir, 
    findBrainFiles, 
    buildApiUrl,
    getActiveBrainProfile,
    getBrainProfiles,
    logError,
    logInfo,
    resolveEngine,
    summarizeText
} from './utils';
import { getConfig } from './config';
import { AgentExecutor, ChatMessage } from './agent';
import { BridgeInterface } from './bridge';

interface LastVisibleChatSnapshot {
    history: ChatMessage[];
    brainProfileId: string;
    sessionId: string | null;
    timestamp: number;
    negativePrompt?: string;
}

interface ChatSession {
    id: string;
    title: string;
    timestamp: number;
    history: ChatMessage[];
    brainProfileId: string;
    negativePrompt?: string;
}

/**
 * Sidebar UI Provider implementing BridgeInterface for BridgeServer
 */
export class SidebarChatProvider implements vscode.WebviewViewProvider, BridgeInterface {
    public static readonly viewType = 'g1nation-v2-view';
    private static readonly activeSessionStateKey = 'g1nation.activeSessionId';
    private static readonly lastVisibleChatStateKey = 'g1nation.lastVisibleChat';
    private static readonly blankChatStateKey = 'g1nation.blankChatActive';
    private static readonly lastAgentStateKey = 'g1nation.lastAgentPath';
    private _view?: vscode.WebviewView;
    public brainEnabled = true;
    private _currentSessionBrainId: string | null = null;
    private _currentNegativePrompt: string = '';

    constructor(
        private readonly _extensionUri: vscode.Uri,
        private readonly _context: vscode.ExtensionContext,
        private readonly _agent: AgentExecutor
    ) {
        this._agent.setHistoryChangeListener((history) => {
            void this._persistLastVisibleChat(history);
        });
    }

    public resolveWebviewView(
        webviewView: vscode.WebviewView,
        context: vscode.WebviewViewResolveContext,
        _token: vscode.CancellationToken,
    ) {
        this._view = webviewView;

        webviewView.webview.options = {
            enableScripts: true,
            localResourceRoots: [this._extensionUri]
        };

        webviewView.webview.html = this._getHtml(webviewView.webview);
        this._agent.setWebview(webviewView.webview);

        void this._restoreActiveSessionIntoView();

        webviewView.webview.onDidReceiveMessage(async (data) => {
            switch (data.type) {
                case 'prompt':
                case 'promptWithFile':
                    await this._context.globalState.update(SidebarChatProvider.blankChatStateKey, false);
                    await this._handlePrompt(data);
                    // After prompt, save the session automatically
                    await this._saveCurrentSession();
                    break;
                case 'ready':
                    await this._sendBrainStatus();
                    await this._sendBrainProfiles();
                    await this._sendSessionList();
                    await this._sendModels();
                    await this._sendConfig();
                    await this._restoreActiveSessionIntoView();
                    break;
                case 'toggleMultiAgent':
                    await vscode.workspace.getConfiguration('g1nation').update('multiAgentEnabled', data.value, vscode.ConfigurationTarget.Global);
                    break;
                case 'getModels':
                    await this._sendModels();
                    break;
                case 'getAgents':
                    await this._sendAgentsList();
                    break;
                case 'createAgent':
                    await this._createAgent();
                    break;
                case 'newChat':
                    this._currentSessionId = null;
                    this._currentSessionBrainId = getActiveBrainProfile().id;
                    this._agent.resetConversation();
                    await this._context.globalState.update(SidebarChatProvider.activeSessionStateKey, null);
                    await this._context.globalState.update(SidebarChatProvider.lastVisibleChatStateKey, null);
                    await this._context.globalState.update(SidebarChatProvider.blankChatStateKey, true);
                    this.clearChat();
                    await this._sendBrainStatus();
                    break;
                case 'stopGeneration':
                    this._agent.stop();
                    break;
                case 'loadSession':
                    await this._loadSession(data.id);
                    break;
                case 'deleteSession':
                    await this._deleteSession(data.id);
                    break;
                case 'openSettings':
                    vscode.commands.executeCommand('workbench.action.openSettings', 'g1nation');
                    break;
                case 'manageBrains':
                    await this._manageBrains();
                    break;
                case 'syncBrain':
                    await this.syncBrain();
                    await this._sendBrainStatus();
                    break;
                case 'addMessage':
                    this._view?.webview.postMessage({ type: 'addMessage', role: data.role, value: data.value, rationale: data.rationale });
                    break;
                case 'addBrain':
                    await this._addBrainProfile();
                    break;
                case 'setBrainProfile':
                    await this._setActiveBrainProfile(data.id);
                    break;
                case 'getAgentContent':
                    await this._sendAgentContent(data.path);
                    break;
                case 'updateAgent':
                    await this._updateAgent(data.path, data.content, data.negativePrompt);
                    break;
                case 'refreshModels':
                    await this._sendModels();
                    break;
                case 'model':
                    await vscode.workspace.getConfiguration('g1nation').update('defaultModel', data.value, vscode.ConfigurationTarget.Global);
                    logInfo(`Default model updated to: ${data.value}`);
                    break;
                case 'proactiveTrigger':
                    await this._handleProactiveSuggestion(data.context);
                    break;
                case 'exportResponse':
                    const workspacePath = vscode.workspace.workspaceFolders?.[0].uri.fsPath || '';
                    const defaultPath = path.join(workspacePath, 'g1_response.md');
                    const uri = await vscode.window.showSaveDialog({
                        defaultUri: vscode.Uri.file(defaultPath),
                        filters: { 'Markdown': ['md'] }
                    });
                    if (uri) {
                        await vscode.workspace.fs.writeFile(uri, Buffer.from(data.text, 'utf8'));
                        vscode.window.showInformationMessage(`✅ Exported to ${path.basename(uri.fsPath)}`);
                    }
                    break;
                case 'approveAction':
                    await this._agent.approveTransaction();
                    break;
                case 'rejectAction':
                    await this._agent.rejectTransaction();
                    break;
            }
        });
    }

    private _currentSessionId: string | null = null;

    private async _restoreActiveSessionIntoView() {
        if (!this._view) return;

        const blankChatActive = this._context.globalState.get<boolean>(SidebarChatProvider.blankChatStateKey, false);
        if (blankChatActive) {
            return;
        }

        const activeSessionId = this._currentSessionId || this._context.globalState.get<string | null>(SidebarChatProvider.activeSessionStateKey, null);
        if (activeSessionId) {
            const loaded = await this._loadSession(activeSessionId, true);
            if (loaded) return;

            await this._context.globalState.update(SidebarChatProvider.activeSessionStateKey, null);
        }

        const currentHistory = this._agent.getHistory();
        if (currentHistory.length > 0) {
            this._view.webview.postMessage({ type: 'restoreHistory', value: currentHistory });
            await this._persistLastVisibleChat(currentHistory);
            return;
        }

        const snapshot = this._context.globalState.get<LastVisibleChatSnapshot | null>(SidebarChatProvider.lastVisibleChatStateKey, null);
        if (snapshot?.history?.length) {
            this._currentSessionId = snapshot.sessionId || null;
            this._currentSessionBrainId = snapshot.brainProfileId || getActiveBrainProfile().id;
            this._currentNegativePrompt = snapshot.negativePrompt || '';
            await this._setActiveBrainProfile(this._currentSessionBrainId, true);
            this._agent.setHistory(snapshot.history);
            this._view.webview.postMessage({ 
                type: 'restoreHistory', 
                value: snapshot.history,
                negativePrompt: this._currentNegativePrompt
            });
        }
    }

    private async _persistLastVisibleChat(history: ChatMessage[] = this._agent.getHistory()) {
        if (history.length === 0) {
            await this._context.globalState.update(SidebarChatProvider.lastVisibleChatStateKey, null);
            return;
        }

        const snapshot: LastVisibleChatSnapshot = {
            history,
            brainProfileId: this._currentSessionBrainId || getActiveBrainProfile().id,
            sessionId: this._currentSessionId,
            timestamp: Date.now(),
            negativePrompt: this._currentNegativePrompt
        };
        await this._context.globalState.update(SidebarChatProvider.lastVisibleChatStateKey, snapshot);
    }

    private async _saveCurrentSession() {
        const history = this._agent.getHistory();
        if (history.length === 0) return;

        let sessions = this._getSessions();
        const firstMsg = history.find(m => m.role === 'user')?.content;
        const title = typeof firstMsg === 'string' ? firstMsg.substring(0, 50).replace(/\n/g, ' ') + (firstMsg.length > 50 ? '...' : '') : 'New Chat';
        const brainProfileId = this._currentSessionBrainId || getActiveBrainProfile().id;
        
        if (!this._currentSessionId) {
            this._currentSessionId = Date.now().toString();
            sessions.unshift({
                id: this._currentSessionId,
                title,
                timestamp: Date.now(),
                history,
                brainProfileId,
                negativePrompt: this._currentNegativePrompt
            });
        } else {
            const idx = sessions.findIndex(s => s.id === this._currentSessionId);
            if (idx >= 0) {
                sessions[idx].history = history;
                sessions[idx].timestamp = Date.now();
                sessions[idx].brainProfileId = brainProfileId;
                sessions[idx].negativePrompt = this._currentNegativePrompt;
                if (!sessions[idx].title || sessions[idx].title === 'New Chat') {
                    sessions[idx].title = title;
                }
            } else {
                sessions.unshift({
                    id: this._currentSessionId,
                    title,
                    timestamp: Date.now(),
                    history,
                    brainProfileId,
                    negativePrompt: this._currentNegativePrompt
                });
            }
        }

        // Keep only last 50 sessions
        if (sessions.length > 50) sessions = sessions.slice(0, 50);
        
        await this._putSessions(sessions);
        await this._context.globalState.update(SidebarChatProvider.activeSessionStateKey, this._currentSessionId);
        await this._persistLastVisibleChat(history);
        await this._sendSessionList();
    }

    private async _sendSessionList() {
        if (!this._view) return;
        const sessions = this._getSessions();
        const list = sessions.map(s => ({
            id: s.id,
            title: s.title,
            timestamp: s.timestamp,
            brainProfileId: s.brainProfileId || '',
            messageCount: s.history.length,
            history: s.history
        }));
        this._view.webview.postMessage({ type: 'sessionList', value: list });
    }

    private async _loadSession(id: string, skipSessionListRefresh: boolean = false): Promise<boolean> {
        if (!id) {
            logError('Session load requested without an id.');
            this._view?.webview.postMessage({ type: 'error', value: 'Chat session id is missing.' });
            return false;
        }

        const sessions = this._getSessions();
        const session = sessions.find(s => s.id === id);
        if (session) {
            const history = Array.isArray(session.history) ? session.history : [];
            if (history.length === 0) {
                logError('Session load failed because history is empty or invalid.', { id });
                this._view?.webview.postMessage({ type: 'error', value: 'This chat session has no saved messages.' });
                return false;
            }

            this._agent.stop();
            this._currentSessionId = id;
            this._currentNegativePrompt = session.negativePrompt || '';
            const sessionBrainId = session.brainProfileId || getActiveBrainProfile().id;
            await this._setActiveBrainProfile(sessionBrainId, true);
            this._agent.setHistory(history);
            await this._context.globalState.update(SidebarChatProvider.activeSessionStateKey, id);
            await this._context.globalState.update(SidebarChatProvider.blankChatStateKey, false);
            await this._persistLastVisibleChat(history);
            this._view?.webview.postMessage({
                type: 'sessionLoaded',
                value: {
                    id,
                    title: session.title || 'Chat Session',
                    history,
                    negativePrompt: this._currentNegativePrompt
                }
            });
            if (!skipSessionListRefresh) {
                await this._sendSessionList();
            }
            logInfo('Chat session loaded.', { id, messages: history.length });
            return true;
        }

        logError('Session load failed because id was not found.', { id, sessionCount: sessions.length });
        this._view?.webview.postMessage({ type: 'error', value: 'Chat session was not found.' });
        return false;
    }

    private async _deleteSession(id: string) {
        let sessions = this._getSessions();
        sessions = sessions.filter(s => s.id !== id);
        await this._putSessions(sessions);
        if (this._currentSessionId === id) {
            this._currentSessionId = null;
            this._agent.resetConversation();
            await this._context.globalState.update(SidebarChatProvider.activeSessionStateKey, null);
            await this._context.globalState.update(SidebarChatProvider.lastVisibleChatStateKey, null);
            await this._context.globalState.update(SidebarChatProvider.blankChatStateKey, true);
            this.clearChat();
        }
        await this._sendSessionList();
    }

    private _getSessions(): ChatSession[] {
        const rawSessions = this._context.globalState.get<any[]>('chat_sessions', []) || [];
        return rawSessions
            .map((session, index): ChatSession | null => {
                const history = Array.isArray(session?.history)
                    ? session.history.filter((message: any) =>
                        message
                        && (message.role === 'user' || message.role === 'assistant' || message.role === 'system')
                        && message.content !== undefined
                    )
                    : [];

                if (!session?.id || history.length === 0) return null;

                const firstMsg = history.find((message: ChatMessage) => message.role === 'user')?.content;
                const fallbackTitle = typeof firstMsg === 'string'
                    ? firstMsg.substring(0, 50).replace(/\n/g, ' ') + (firstMsg.length > 50 ? '...' : '')
                    : `Chat ${index + 1}`;

                return {
                    id: String(session.id),
                    title: String(session.title || fallbackTitle),
                    timestamp: typeof session.timestamp === 'number' ? session.timestamp : Date.now(),
                    history,
                    brainProfileId: String(session.brainProfileId || getActiveBrainProfile().id),
                    negativePrompt: String(session.negativePrompt || '')
                };
            })
            .filter((session): session is ChatSession => !!session)
            .sort((a, b) => b.timestamp - a.timestamp)
            .slice(0, 50);
    }

    private async _putSessions(sessions: ChatSession[]) {
        await this._context.globalState.update('chat_sessions', sessions.slice(0, 50));
    }

    private async _sendConfig() {
        if (!this._view) return;
        const config = getConfig();
        this._view.webview.postMessage({
            type: 'configUpdate',
            value: {
                multiAgentEnabled: config.multiAgentEnabled
            }
        });
    }

    private async _sendBrainStatus() {
        if (!this._view) return;
        const activeBrain = getActiveBrainProfile();
        const brainDir = activeBrain.localBrainPath;
        const files = findBrainFiles(brainDir);
        this._view.webview.postMessage({ 
            type: 'brainStatus', 
            value: { 
                count: files.length, 
                path: brainDir,
                name: activeBrain.name,
                description: activeBrain.description || '',
                repo: activeBrain.secondBrainRepo || ''
            } 
        });
    }

    private async _sendBrainProfiles() {
        if (!this._view) return;
        const activeBrain = getActiveBrainProfile();
        this._currentSessionBrainId = this._currentSessionBrainId || activeBrain.id;
        const profiles = getBrainProfiles().map((profile) => ({
            id: profile.id,
            name: profile.name,
            path: profile.localBrainPath,
            description: profile.description || '',
            repo: profile.secondBrainRepo || ''
        }));
        this._view.webview.postMessage({
            type: 'brainProfiles',
            value: {
                activeBrainId: activeBrain.id,
                profiles
            }
        });
    }

    private async _setActiveBrainProfile(profileId: string, silent: boolean = false) {
        const profiles = getBrainProfiles();
        const nextProfile = profiles.find((profile) => profile.id === profileId) || profiles[0];
        if (!nextProfile) return;

        await vscode.workspace.getConfiguration('g1nation').update('activeBrainId', nextProfile.id, vscode.ConfigurationTarget.Global);
        this._currentSessionBrainId = nextProfile.id;
        await this._sendBrainProfiles();
        await this._sendBrainStatus();

        if (!silent) {
            this.injectSystemMessage(`**[Brain Switched]** ${nextProfile.name}\n\`${nextProfile.localBrainPath}\``);
        }
    }

    private async _manageBrains() {
        const activeBrain = getActiveBrainProfile();
        const choice = await vscode.window.showQuickPick([
            {
                label: 'Add Brain Folder',
                description: 'Create a new brain profile from a local folder'
            },
            {
                label: 'Open Active Brain Folder',
                description: activeBrain.localBrainPath
            },
            {
                label: 'Open Brain Settings',
                description: 'Edit names, paths, repos, and descriptions'
            }
        ], {
            placeHolder: `Active Brain: ${activeBrain.name} (${activeBrain.localBrainPath})`
        });

        if (!choice) return;

        if (choice.label === 'Add Brain Folder') {
            await this._addBrainProfile();
            return;
        }

        if (choice.label === 'Open Active Brain Folder') {
            if (!fs.existsSync(activeBrain.localBrainPath)) {
                fs.mkdirSync(activeBrain.localBrainPath, { recursive: true });
            }
            await vscode.commands.executeCommand('revealFileInOS', vscode.Uri.file(activeBrain.localBrainPath));
            return;
        }

        vscode.commands.executeCommand('workbench.action.openSettings', 'g1nation.brainProfiles');
    }

    private async _addBrainProfile() {
        const selected = await vscode.window.showOpenDialog({
            canSelectFiles: false,
            canSelectFolders: true,
            canSelectMany: false,
            openLabel: 'Use as Brain'
        });

        const folder = selected?.[0]?.fsPath;
        if (!folder) return;

        const defaultName = path.basename(folder) || 'New Brain';
        const name = await vscode.window.showInputBox({
            prompt: 'Name this brain profile',
            value: defaultName,
            validateInput: (value) => value.trim() ? null : 'Brain name is required.'
        });
        if (!name) return;

        const description = await vscode.window.showInputBox({
            prompt: 'Optional description shown in the G1nation sidebar',
            value: ''
        });

        const repo = await vscode.window.showInputBox({
            prompt: 'Optional Second Brain Git repository URL',
            value: ''
        });

        // Read raw settings directly to avoid virtual default-brain (injected in memory by getConfig())
        // being saved into the settings file and corrupting the profile list on next load.
        const cfg = vscode.workspace.getConfiguration('g1nation');
        const existingRaw: any[] = cfg.get<any[]>('brainProfiles', []) || [];

        const idBase = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'brain';
        let id = idBase;
        let suffix = 2;
        while (existingRaw.some((p: any) => p.id === id)) {
            id = `${idBase}-${suffix++}`;
        }

        const newProfile = {
            id,
            name: name.trim(),
            localBrainPath: folder,
            secondBrainRepo: (repo || '').trim(),
            description: (description || '').trim()
        };
        const nextProfiles = [...existingRaw, newProfile];

        await cfg.update('brainProfiles', nextProfiles, vscode.ConfigurationTarget.Global);
        await cfg.update('activeBrainId', id, vscode.ConfigurationTarget.Global);
        this._currentSessionBrainId = id;

        // Directly post the freshly-built profile list to the webview.
        // cfg.update() is async and VSCode's config cache may not reflect the new value
        // immediately, so we avoid re-reading via getBrainProfiles() here.
        if (this._view) {
            this._view.webview.postMessage({
                type: 'brainProfiles',
                value: {
                    activeBrainId: id,
                    profiles: nextProfiles.map((p: any) => ({
                        id: p.id || '',
                        name: p.name || '',
                        path: p.localBrainPath || '',
                        description: p.description || '',
                        repo: p.secondBrainRepo || ''
                    }))
                }
            });
        }
        await this._sendBrainStatus();
        this.injectSystemMessage(`**[Brain Added]** ${name.trim()}\n\`${folder}\``);
    }

    // --- BridgeInterface Methods ---

    public injectSystemMessage(msg: string): void {
        this._view?.webview.postMessage({ type: 'streamStart' });
        this._view?.webview.postMessage({ type: 'streamChunk', value: msg });
        this._view?.webview.postMessage({ type: 'streamEnd' });
    }

    public getHistoryText(): string {
        return "Conversation history placeholder for evaluation.";
    }

    public sendPromptFromExtension(prompt: string): void {
        if (this._view) {
            this._view.show?.(true);
            this._view.webview.postMessage({ type: 'injectPrompt', value: prompt });
        }
    }

    public findBrainFiles(dir: string): string[] {
        return findBrainFiles(dir);
    }

    // --- End BridgeInterface ---

    public focusInput() {
        this._view?.webview.postMessage({ type: 'focusInput' });
    }

    public clearChat() {
        this._view?.webview.postMessage({ type: 'clearChat' });
    }

    public async syncBrain() {
        const activeBrain = getActiveBrainProfile();
        const brainDir = activeBrain.localBrainPath;
        if (!fs.existsSync(brainDir)) {
            vscode.window.showErrorMessage("Second Brain directory not found.");
            return;
        }
        vscode.window.withProgress({
            location: vscode.ProgressLocation.Notification,
            title: "G1nation: Syncing Second Brain...",
            cancellable: false
        }, async () => {
            try {
                const { execSync } = require('child_process');
                execSync(`git add .`, { cwd: brainDir });
                execSync(`git commit -m "[G1-Sync] Manual knowledge update"`, { cwd: brainDir });
                execSync(`git push`, { cwd: brainDir });
                vscode.window.showInformationMessage("Second Brain synced successfully.");
            } catch (err: any) {
                vscode.window.showInformationMessage("Brain Synced: Local knowledge is up-to-date (no changes to push).");
            }
        });
    }

    private _getAgentsDir(): string {
        const defaultPath = 'E:\\Wiki\\Agent\\.agent\\skills';
        if (fs.existsSync(defaultPath)) return defaultPath;
        
        const workspaceFolders = vscode.workspace.workspaceFolders;
        if (workspaceFolders) {
            const localPath = path.join(workspaceFolders[0].uri.fsPath, '.agent', 'skills');
            if (!fs.existsSync(localPath)) {
                fs.mkdirSync(localPath, { recursive: true });
            }
            return localPath;
        }
        return '';
    }

    private async _sendAgentsList() {
        if (!this._view) return;
        const dir = this._getAgentsDir();
        const agents = [];
        if (dir && fs.existsSync(dir)) {
            const files = fs.readdirSync(dir);
            for (const f of files) {
                if (f.endsWith('.md')) {
                    agents.push({ name: f.replace('.md', ''), path: path.join(dir, f) });
                }
            }
        }
        const lastPath = this._context.globalState.get<string>(SidebarChatProvider.lastAgentStateKey, 'none');
        this._view.webview.postMessage({ type: 'agentsList', value: agents, selected: lastPath });
    }

    private async _handleProactiveSuggestion(context: string) {
        if (!this._view) return;

        let suggestion = '';
        switch (context) {
            case 'settings_exploration':
                suggestion = '💡 **Tip:** 모델 설정을 최적화하여 답변 속도를 2배 이상 높일 수 있습니다. 설정에서 `Max Context Size`를 조정해보세요!';
                break;
            case 'brain_sync_exploration':
                suggestion = '🧠 **Knowledge Sync:** 최근에 수정한 파일이 지식 베이스에 반영되지 않았나요? 지금 동기화 버튼을 눌러 최신 정보를 업데이트하세요.';
                break;
            case 'agent_selection_exploration':
                suggestion = '🤖 **Agent Skills:** 특정 언어나 프레임워크에 특화된 에이전트 스킬을 선택하면 더 정확한 코드를 생성할 수 있습니다.';
                break;
            default:
                suggestion = '💡 새로운 기능을 발견하셨나요? 궁금한 점이 있다면 언제든 물어보세요!';
        }

        this._view.webview.postMessage({ type: 'streamStart' });
        this._view.webview.postMessage({ type: 'streamChunk', value: `\n\n> [!TIP]\n> ${suggestion}\n` });
        this._view.webview.postMessage({ type: 'streamEnd' });
    }

    private async _createAgent() {
        const name = await vscode.window.showInputBox({
            prompt: 'Name of the new Agent (e.g., frontend_expert)',
            placeHolder: 'Agent name...'
        });
        if (!name) return;

        const safeName = name.trim().replace(/[^a-zA-Z0-9_\\-\\u3131-\\uD79D]/g, '_');
        if (!safeName) return;

        const dir = this._getAgentsDir();
        if (!dir) {
            vscode.window.showErrorMessage('Agent directory could not be determined.');
            return;
        }

        const filePath = path.join(dir, `${safeName}.md`);
        if (!fs.existsSync(filePath)) {
            fs.writeFileSync(filePath, `# Agent Persona: ${safeName}\\n\\nAdd your instructions here...\\n`, 'utf8');
        }

        const doc = await vscode.workspace.openTextDocument(filePath);
        await vscode.window.showTextDocument(doc);
        await this._sendAgentsList();
    }

    private async _sendAgentContent(agentPath: string) {
        if (!this._view || !agentPath || agentPath === 'none') return;
        if (fs.existsSync(agentPath)) {
            const content = fs.readFileSync(agentPath, 'utf8');
            const negativePrompt = this._context.globalState.get<string>(`negativePrompt:${agentPath}`, '');
            this._view.webview.postMessage({ 
                type: 'agentContent', 
                value: content,
                negativePrompt: negativePrompt
            });
            await this._context.globalState.update(SidebarChatProvider.lastAgentStateKey, agentPath);
        }
    }

    private async _updateAgent(agentPath: string, content: string, negativePrompt?: string) {
        if (!agentPath || agentPath === 'none') return;
        try {
            fs.writeFileSync(agentPath, content, 'utf8');
            if (negativePrompt !== undefined) {
                await this._context.globalState.update(`negativePrompt:${agentPath}`, negativePrompt);
            }
            vscode.window.showInformationMessage('Agent skill updated successfully.');
        } catch (err: any) {
            vscode.window.showErrorMessage(`Failed to update agent: ${err.message}`);
        }
    }

    private async _handlePrompt(data: any) {
        if (!this._view) return;

        const { value, model, internet, files, agentFile, negativePrompt } = data;
        this._currentNegativePrompt = negativePrompt || '';
        this._currentSessionBrainId = getActiveBrainProfile().id;
        
        let agentSkillContext = undefined;
        if (agentFile && fs.existsSync(agentFile)) {
            agentSkillContext = fs.readFileSync(agentFile, 'utf8');
        }

        try {
            await this._agent.handlePrompt(value, model, {
                internetEnabled: internet,
                visionContent: files,
                agentSkillContext,
                negativePrompt
            });
        } catch (error: any) {
            logError('Prompt handling failed in sidebar provider.', { error: error?.message || String(error), promptPreview: summarizeText(value || '', 200) });
            this._view.webview.postMessage({ type: 'error', value: error.message });
        }
    }

    private async _sendModels() {
        if (!this._view) return;
        try {
            const config = getConfig();
            const url = config.ollamaUrl;
            let defaultModel = config.defaultModel;
            let models: string[] = [];

            const primaryEngine = resolveEngine(url);
            const engines = primaryEngine === 'lmstudio' ? ['lmstudio', 'ollama'] as const : ['ollama', 'lmstudio'] as const;

            for (const engine of engines) {
                const modelsUrl = buildApiUrl(url, engine, 'models');
                try {
                    logInfo('Model discovery started.', { engine, modelsUrl });
                    const res = await fetch(modelsUrl, { signal: AbortSignal.timeout(5000) });
                    const rawText = await res.text();
                    if (!res.ok) {
                        logError('Model discovery returned non-OK status.', { engine, modelsUrl, status: res.status, body: summarizeText(rawText, 300) });
                        continue;
                    }

                    const data = rawText ? JSON.parse(rawText) as any : {};
                    models = engine === 'lmstudio'
                        ? (data.data || []).map((m: any) => m.id)
                        : (data.models || []).map((m: any) => m.name);

                    if (models.length > 0) {
                        logInfo('Model discovery succeeded.', { engine, count: models.length, modelsPreview: models.slice(0, 5) });
                        break;
                    }
                } catch (e: any) {
                    logError('Model discovery failed.', { engine, modelsUrl, error: e?.message || String(e) });
                }
            }

            if (models.length === 0) {
                models = defaultModel ? [defaultModel] : [];
                this._view.webview.postMessage({ type: 'engineStatus', value: { online: false, url } });
            } else {
                this._view.webview.postMessage({ type: 'engineStatus', value: { online: true, url } });
            }

            const baseModel = defaultModel?.replace(/:\d+$/, '');
            if (baseModel && baseModel !== defaultModel && models.includes(baseModel)) {
                defaultModel = baseModel;
                await vscode.workspace.getConfiguration('g1nation').update('defaultModel', defaultModel, vscode.ConfigurationTarget.Global);
            }

            if (models.length > 0 && (!defaultModel || !models.includes(defaultModel))) {
                // [State Persistence Fix] 저장된 모델이 목록에 없을 때:
                // 즉시 강제 리셋하는 대신, 현재 모델 목록의 첫 번째를 '폴백 후보'로만 사용.
                // 단, defaultModel이 완전히 없는 경우에만 실제로 저장함.
                if (!defaultModel) {
                    defaultModel = models[0];
                    await vscode.workspace.getConfiguration('g1nation').update('defaultModel', defaultModel, vscode.ConfigurationTarget.Global);
                } else {
                    // 저장된 모델명은 유지하고, UI에는 첫 번째 모델을 보여주되
                    // 설정은 건드리지 않아 다음 번에 같은 모델이 다시 로드될 경우 복원 가능하도록 함
                    logInfo('Saved model not found in current list, using first available as fallback.', { saved: defaultModel, fallback: models[0] });
                    defaultModel = models[0];
                }
            }

            const defaultIdx = models.indexOf(defaultModel);
            if (defaultIdx > 0) {
                models.splice(defaultIdx, 1);
                models.unshift(defaultModel);
            }

            this._view.webview.postMessage({ type: 'modelsList', value: { models, selected: defaultModel } });
        } catch (err) {
            logError('Model list update failed.', err);
            const fallbackModel = getConfig().defaultModel;
            this._view.webview.postMessage({ type: 'modelsList', value: { models: fallbackModel ? [fallbackModel] : [], selected: fallbackModel } });
        }
    }

    private _getHtml(webview: vscode.Webview): string {
        return `<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>G1nation</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        :root {
            --bg: #0d1117;
            --bg-secondary: #0d1117;
            --surface: #161b22;
            --border: #30363d;
            --border-bright: #484f58;
            --text-primary: #c9d1d9;
            --text-bright: #ffffff;
            --text-dim: #8b949e;
            --accent: #58a6ff;
            --accent-glow: rgba(88, 166, 255, 0.15);
            --success: #238636;
            --warning: #d29922;
            --error: #f85149;
            --code-bg: #161b22;
            --table-header-bg: #161b22;
            --table-row-hover: #21262d;
            --input-bg: #0d1117;
        }

        body.vscode-light {
            --bg: #ffffff;
            --bg-secondary: #f6f8fa;
            --surface: #ffffff;
            --border: #d0d7de;
            --border-bright: #afb8c1;
            --text-primary: #24292f;
            --text-bright: #111118;
            --text-dim: #57606a;
            --accent: #0969da;
            --accent-glow: rgba(9, 105, 218, 0.1);
            --success: #1a7f37;
            --warning: #9a6700;
            --error: #cf222e;
            --code-bg: #f6f8fa;
            --table-header-bg: #f6f8fa;
            --table-row-hover: #f3f4f6;
            --input-bg: #ffffff;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        html, body {
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Helvetica, Arial, sans-serif;
            font-size: 13px;
            line-height: 1.6;
            background: var(--bg);
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* --- Header --- */
        .header {
            display: flex;
            flex-direction: column;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
            z-index: 100;
        }

        .header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
        }

        .header-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 14px 10px;
            flex-wrap: wrap;
        }

        .brand { font-weight: 700; font-size: 14px; color: var(--text-bright); letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
        .logo { width: 22px; height: 22px; background: var(--accent); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; }

        .chat {
            flex: 1;
            overflow-y: auto;
            padding: 16px 14px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            scroll-behavior: smooth;
        }

        /* --- Messages --- */
        .msg {
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
            animation: msgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .msg-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 11px; color: var(--text-dim); }
        .av { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
        .icon-btn:hover { background: var(--border); color: var(--text-bright); }
        .icon-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(187, 134, 252, 0.1); }
        
        /* Tooltip System */
        [data-tooltip] { position: relative; }
        [data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
            background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;
            font-size: 10px; white-space: nowrap; opacity: 0; pointer-events: none;
            transition: all 0.2s ease; z-index: 100; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        [data-tooltip]:hover::after { opacity: 1; bottom: -35px; }
        
        .header-controls { display: flex; gap: 8px; margin-left: auto; }
        
        #promptInput::placeholder { color: var(--accent); opacity: 0.6; font-weight: 500; }


        .msg-body {
            padding-left: 30px;
            color: var(--text-primary);
            font-size: 13.5px;
            word-break: break-word;
        }

        .msg-user .msg-body {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 10px 14px;
            margin-left: 30px;
            white-space: pre-wrap;
        }

        /* --- Markdown Style --- */
        .markdown-body h1, .markdown-body h2, .markdown-body h3 {
            color: var(--text-bright);
            margin: 1.5em 0 0.8em;
            font-weight: 600;
            line-height: 1.3;
        }

        .markdown-body h1 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; color: var(--accent); }
        .markdown-body h2 { font-size: 1.3em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
        .markdown-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.2em 0;
            font-size: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        .markdown-body th { background: var(--table-header-bg); color: var(--accent); font-weight: 600; text-align: left; padding: 10px 12px; border: 1px solid var(--border); }
        .markdown-body td { padding: 8px 12px; border: 1px solid var(--border); color: var(--text-primary); }
        .markdown-body tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

        .markdown-body pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow-x: auto; margin: 12px 0; }
        .markdown-body code { font-family: 'SF Mono', monospace; font-size: 11.5px; background: rgba(175, 184, 193, 0.2); padding: 0.2em 0.4em; border-radius: 4px; }

        /* --- UI Elements --- */
        .msg-actions {
            position: absolute; bottom: -12px; right: 0; display: flex; gap: 4px; opacity: 0; transition: 0.2s; z-index: 20;
        }
        .msg:hover .msg-actions { opacity: 1; }
        .action-btn {
            background: var(--bg-secondary); border: 1px solid var(--border);
            color: var(--text-dim); padding: 4px 10px; border-radius: 6px; font-size: 10px; cursor: pointer; transition: 0.2s;
            display: flex; align-items: center; gap: 4px;
        }
        .action-btn:hover { color: var(--text-bright); border-color: var(--accent); background: var(--accent-glow); }

        .icon-btn {
            background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); width: 28px; height: 28px;
            border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; font-size: 13px;
        }
        .icon-btn:hover { color: var(--text-bright); border-color: var(--accent); background: var(--accent-glow); }
        .icon-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

        select { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); padding: 4px 8px; border-radius: 6px; font-size: 10.5px; cursor: pointer; }

        /* --- Input & Attachments --- */
        .input-wrap {
            padding: 12px 14px 16px; background: var(--bg); border-top: 1px solid var(--border); flex-shrink: 0;
        }

        .input-box {
            background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
            display: flex; flex-direction: column; gap: 8px; transition: 0.2s;
            position: relative; /* Toast 위치 앙커 */
        }
        .input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

        textarea {
            width: 100%; background: transparent; border: none; color: var(--text-bright);
            font-family: inherit; font-size: 13.5px; resize: none; outline: none; min-height: 24px; max-height: 160px;
        }

        .attachment-preview {
            display: none; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
        }
        .attachment-preview.visible { display: flex; }

        .file-chip {
            display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border);
            padding: 4px 8px; border-radius: 6px; font-size: 11px; color: var(--text-primary);
        }
        .file-chip .remove { cursor: pointer; color: var(--text-dim); }
        .file-chip .remove:hover { color: var(--error); }

        .input-footer { display: flex; align-items: center; justify-content: space-between; }
        .footer-left { display: flex; align-items: center; gap: 8px; }

        .send-btn {
            background: var(--accent); color: #fff; border: none; padding: 6px 14px; border-radius: 6px;
            font-weight: 600; font-size: 12px; cursor: pointer;
        }
        .send-btn:disabled { opacity: 0.3; cursor: not-allowed; }

        .footer-right { display: flex; align-items: center; gap: 6px; }

        .cancel-btn {
            background: transparent; color: var(--text-dim); border: 1px solid var(--border);
            padding: 6px 10px; border-radius: 6px; font-weight: 600; font-size: 11px;
            cursor: pointer; align-items: center; gap: 4px; transition: all 0.15s ease;
        }
        .cancel-btn:hover { background: rgba(248, 81, 73, 0.12); color: var(--error); border-color: var(--error); }

        .stop-btn {
            background: rgba(248, 81, 73, 0.15); color: var(--error); border: 1px solid var(--error);
            padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 12px;
            cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
            animation: stopPulse 1.2s ease-in-out infinite;
        }
        .stop-btn:hover { background: rgba(248, 81, 73, 0.3); }
        @keyframes stopPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(248,81,73,0.4); }
            50% { box-shadow: 0 0 0 5px rgba(248,81,73,0); }
        }

        /* --- Drag and Drop Overlay --- */
        body.drag-over::after {
            content: '📂 파일을 여기에 놓으세요';
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(88, 166, 255, 0.2);
            backdrop-filter: blur(4px);
            border: 2px dashed var(--accent);
            display: flex; align-items: center; justify-content: center;
            color: var(--text-bright); font-size: 18px; font-weight: 700;
            z-index: 9999; pointer-events: none;
            animation: fadeIn 0.2s ease-out;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* --- Toast Notification --- */
        .toast-notif {
            position: absolute; bottom: calc(100% + 8px); left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: var(--surface); border: 1px solid var(--border-bright);
            color: var(--text-primary); font-size: 11px; font-weight: 600;
            padding: 7px 14px; border-radius: 20px; white-space: nowrap;
            opacity: 0; pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }
        .toast-notif.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
        .toast-notif.toast-warn { border-color: var(--error); color: var(--error); background: rgba(248,81,73,0.08); }
        .toast-notif.toast-success { border-color: var(--success); color: var(--success); background: rgba(35,134,54,0.08); }

        /* --- Overlays & Others --- */
        .thinking-bar { height: 2px; background: transparent; position: relative; overflow: hidden; margin-top: -1px; }
        .thinking-bar.active {
            display: block;
            background: linear-gradient(90deg, transparent, #2196f3, #bb86fc, transparent);
            background-size: 200% 100%;
            animation: thinking 1.5s infinite linear;
        }
        @keyframes thinking { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .history-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8);
            backdrop-filter: blur(10px); z-index: 1000; display: none; flex-direction: column; padding: 20px;
        }
        .history-overlay.visible { display: flex; }

        .stream-active::after {
            content: ''; display: inline-block; width: 6px; height: 14px; background: var(--accent);
            margin-left: 4px; animation: blink 0.8s step-end infinite; vertical-align: middle;
        }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

        .welcome { text-align: center; padding: 40px 20px; color: var(--text-dim); }
        .welcome-logo { font-size: 48px; color: var(--accent); margin-bottom: 16px; opacity: 0.8; }
        .welcome-title { font-size: 20px; font-weight: 700; color: var(--text-bright); margin-bottom: 8px; }

        /* --- History List --- */
        .history-item {
            padding: 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
            margin-bottom: 10px; cursor: pointer; transition: 0.2s;
        }
        .history-item:hover { border-color: var(--accent); background: var(--accent-glow); }

        /* --- Approval UI --- */
        .approval-box {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 15px 0;
            padding: 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-bright);
            border-radius: 12px;
            animation: msgIn 0.3s ease-out;
        }
        .approval-title { font-weight: 700; color: var(--accent); font-size: 12px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
        .approval-btns { display: flex; gap: 10px; }
        .btn-approve { flex: 1; background: var(--success); color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px; transition: 0.2s; }
        .btn-approve:hover { filter: brightness(1.1); transform: translateY(-1px); }
        .btn-reject { flex: 1; background: var(--error); color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px; transition: 0.2s; }
        .btn-reject:hover { filter: brightness(1.1); transform: translateY(-1px); }

        /* --- Physics & Micro-interactions --- */
        button {
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            outline: none;
        }
        button:active {
            transform: scale(0.96);
            filter: brightness(0.9);
        }

        /* --- Hierarchical Grouping --- */
        .input-group {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            padding: 8px;
            margin-top: 10px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            gap: 8px;
        }

        /* --- Storytelling Stepper --- */
        .stepper-container {
            display: none;
            margin: 12px 16px;
            padding: 12px;
            background: rgba(var(--accent-rgb), 0.05);
            border-radius: 8px;
            border: 1px solid rgba(var(--accent-rgb), 0.1);
            animation: slideIn 0.3s ease-out;
        }
        .stepper-container.active { display: block; }
        .steps {
            display: flex;
            justify-content: space-between;
            position: relative;
        }
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex: 1;
        }
        .step-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-dim);
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .step.active .step-dot {
            background: var(--accent);
            box-shadow: 0 0 12px var(--accent);
            transform: scale(1.5);
        }
        .step.complete .step-dot {
            background: var(--success);
            box-shadow: 0 0 8px var(--success);
        }
        .step-label {
            font-size: 9px;
            color: var(--text-dim);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .step.active .step-label { color: var(--accent); }
        .step.complete .step-label { color: var(--success); }

        /* --- Rationale View (Thought Process) --- */
        .rationale-container {
            margin: 12px 0;
            padding: 16px;
            background: rgba(255, 255, 255, 0.03);
            border-left: 3px solid var(--accent);
            border-radius: 4px 12px 12px 4px;
            font-size: 12px;
            line-height: 1.5;
            animation: slideIn 0.3s ease-out;
            backdrop-filter: blur(10px);
        }
        .rationale-header {
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--accent);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
        }
        .rationale-section {
            margin-bottom: 10px;
        }
        .rationale-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: 4px;
            font-size: 11px;
        }
        .rationale-content {
            color: var(--text-dim);
            padding-left: 20px;
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-top">
            <div class="brand"><div class="logo">✦</div> G1nation</div>
            <div style="display: flex; gap: 6px;">
                <button class="icon-btn" id="newChatBtn" title="New Chat">+</button>
                <button class="icon-btn" id="settingsBtn" title="Settings">⚙️</button>
            </div>
        </div>
        <div class="header-controls">
            <div id="statusDot" style="width:6px; height:6px; border-radius:50%; background:var(--text-dim);"></div>
            <select id="modelSel" title="Select Model"></select>
            <select id="brainSel" title="Select Brain"></select>
            <select id="agentSel" title="Select Agentic Skill"></select>
            <button class="icon-btn" id="editAgentBtn" title="Edit Agent Skill">📝</button>
            <button class="icon-btn" id="addAgentBtn" title="Create Agent">+</button>
            <button class="icon-btn" id="multiAgentBtn" data-tooltip="Multi-Agent Mode">🤖</button>
            <button class="icon-btn" id="internetBtn" data-tooltip="Internet Access">🌐</button>
            <button class="icon-btn" id="brainBtn" data-tooltip="Sync Knowledge">🧠</button>
            <button class="icon-btn" id="historyBtn" data-tooltip="View History">📜</button>
        </div>
    </div>
    
    <div id="historyOverlay" class="history-overlay">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
            <h2 style="color:var(--text-bright);">Chat History</h2>
            <button class="icon-btn" id="closeHistoryBtn">✕</button>
        </div>
        <div id="historyList" style="flex:1; overflow-y:auto;"></div>
    </div>

    <div class="thinking-bar" id="thinkingBar"></div>

    <div id="stepper" class="stepper-container">
        <div class="steps">
            <div class="step" id="step-analyze"><div class="step-dot"></div><div class="step-label">Analyze</div></div>
            <div class="step" id="step-plan"><div class="step-dot"></div><div class="step-label">Plan</div></div>
            <div class="step" id="step-execute"><div class="step-dot"></div><div class="step-label">Execute</div></div>
            <div class="step" id="step-verify"><div class="step-dot"></div><div class="step-label">Verify</div></div>
        </div>
    </div>

    <div class="chat" id="chat">
        <div class="welcome">
            <div class="welcome-logo">✦</div>
            <div class="welcome-title">Welcome to G1nation</div>
            <p>Your premium local AI assistant.<br>Ready to analyze projects and build reports.</p>
        </div>
    </div>

    <div class="input-wrap">
        <div id="agentConfigPanel" style="display:none; padding-bottom:8px; flex-direction: column; gap: 8px;">
            <div style="font-size: 10px; color: var(--text-dim); margin-bottom: -4px;">Agent Persona/Instructions</div>
            <textarea id="agentPrompt" rows="5" placeholder="Agent Persona & Instructions..." style="font-size:11.5px; padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--text-bright); width:100%; resize:vertical; font-family:inherit; outline:none;"></textarea>
            
            <div style="font-size: 10px; color: var(--text-dim); margin-bottom: -4px;">Negative Prompt (Strict Rules)</div>
            <textarea id="negativePrompt" rows="2" placeholder="What NOT to do..." style="font-size:11.5px; padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--text-bright); width:100%; resize:vertical; font-family:inherit; outline:none;"></textarea>
            
            <button id="updateAgentBtn" style="background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); padding: 6px; font-size: 10px; border-radius: 6px; cursor: pointer; transition: 0.2s;">Update Agent Skill</button>
        </div>
        <div class="input-box">
            <div id="attachPreview" class="attachment-preview"></div>
            <textarea id="input" rows="1" placeholder="Type your request..."></textarea>
            <div class="input-footer">
                <div class="footer-left">
                    <button class="icon-btn" id="attachBtn" title="Attach Files">📎</button>
                    <span id="statusLabel" style="font-size:10px; color:var(--text-dim);">Ready</span>
                </div>
                <div class="footer-right">
                    <button id="cancelBtn" class="cancel-btn" title="Clear draft" style="display:none;">✕ Clear</button>
                    <button id="stopBtn" class="stop-btn" title="Stop generation" style="display:none;">■ Stop</button>
                    <button id="sendBtn" class="send-btn">Send</button>
                </div>
            </div>
            <div id="toastNotif" class="toast-notif"></div>
        </div>
        <div class="input-group">
            <button class="action-btn" style="flex:1" id="inputNewChatBtn">New Chat</button>
            <button class="action-btn" style="flex:1" id="inputSyncBtn">Sync Knowledge</button>
        </div>
    </div>
        <input type="file" id="fileInput" multiple hidden accept="image/*,.txt,.md,.pdf,.csv,.json,.js,.ts,.py,.java,.rs,.go">
    </div>

    <script>
        const vscode = acquireVsCodeApi();
        const chat = document.getElementById('chat');
        const input = document.getElementById('input');
        const sendBtn = document.getElementById('sendBtn');
        const stopBtn = document.getElementById('stopBtn');
        const cancelBtn = document.getElementById('cancelBtn');
        const toastNotif = document.getElementById('toastNotif');
        const thinkingBar = document.getElementById('thinkingBar');
        const statusLabel = document.getElementById('statusLabel');
        const stepper = document.getElementById('stepper');

        // --- Draft State Management ---
        let isDraftActive = false;
        let _toastTimer = null;

        function showToast(msg, type = 'info') {
            toastNotif.textContent = msg;
            toastNotif.className = 'toast-notif toast-' + type + ' toast-visible';
            if (_toastTimer) clearTimeout(_toastTimer);
            _toastTimer = setTimeout(() => {
                toastNotif.classList.remove('toast-visible');
            }, 2500);
        }

        function setDraftActive(active) {
            isDraftActive = active;
            cancelBtn.style.display = active ? 'inline-flex' : 'none';
        }

        // 생성 중/완료 시 Send ⇔ Stop 전환
        function setGenerating(generating) {
            if (generating) {
                sendBtn.style.display = 'none';
                stopBtn.style.display = 'inline-flex';
                // 생성 중에는 Clear 버튼 숨김
                cancelBtn.style.display = 'none';
            } else {
                stopBtn.style.display = 'none';
                sendBtn.style.display = 'inline-flex';
                sendBtn.disabled = false;
                // Draft 상태에 따라 Clear 버튼 복원
                if (isDraftActive) cancelBtn.style.display = 'inline-flex';
            }
        }

        function clearDraft() {
            // Step 1: 상태 초기화 (Draft State Reset)
            setDraftActive(false);
            // Step 2: UI 반영 (Input + Attachments 초기화)
            input.value = '';
            input.style.height = 'auto';
            pendingFiles = [];
            renderAttachments();
            input.focus();
            // Step 3: Toast 알림으로 즉각적 피드백
            showToast('✕ 작성 내용이 초기화되었습니다.', 'warn');
            Sound.warn();
        }


        // --- Sound Manager ---
        const Sound = {
            ctx: null,
            init() { if (!this.ctx) this.ctx = new (window.AudioContext || window.webkitAudioContext)(); },
            play(freq, type, dur) {
                try {
                    this.init();
                    const osc = this.ctx.createOscillator();
                    const gain = this.ctx.createGain();
                    osc.type = type;
                    osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
                    gain.gain.setValueAtTime(0.05, this.ctx.currentTime);
                    gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + dur);
                    osc.connect(gain);
                    gain.connect(this.ctx.destination);
                    osc.start();
                    osc.stop(this.ctx.currentTime + dur);
                } catch(e) {}
            },
            success() { this.play(880, 'sine', 0.1); setTimeout(() => this.play(1109, 'sine', 0.15), 80); },
            warn() { this.play(440, 'triangle', 0.3); }
        };

        function setStep(stepId, state = 'active') {
            stepper.classList.add('active');
            const step = document.getElementById('step-' + stepId);
            if (step) {
                if (state === 'active') {
                    document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
                    step.classList.add('active');
                } else if (state === 'complete') {
                    step.classList.remove('active');
                    step.classList.add('complete');
                }
            }
        }

        function resetStepper() {
            stepper.classList.remove('active');
            document.querySelectorAll('.step').forEach(s => {
                s.classList.remove('active');
                s.classList.remove('complete');
            });
        }
        const modelSel = document.getElementById('modelSel');
        const brainSel = document.getElementById('brainSel');
        const historyOverlay = document.getElementById('historyOverlay');
        const historyList = document.getElementById('historyList');
        const statusDot = document.getElementById('statusDot');
        const attachBtn = document.getElementById('attachBtn');
        const fileInput = document.getElementById('fileInput');
        const attachPreview = document.getElementById('attachPreview');
        const agentSel = document.getElementById('agentSel');
        const editAgentBtn = document.getElementById('editAgentBtn');
        const addAgentBtn = document.getElementById('addAgentBtn');
        const agentConfigPanel = document.getElementById('agentConfigPanel');
        const agentPrompt = document.getElementById('agentPrompt');
        const negativePrompt = document.getElementById('negativePrompt');
        const updateAgentBtn = document.getElementById('updateAgentBtn');

        let streamBody = null;
        let internetEnabled = false;
        let pendingFiles = [];
        let editMode = false;

        function fmt(text) { return marked.parse(text || ''); }

        function copyToClipboard(text, btn) {
            const textarea = document.createElement('textarea');
            textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0';
            document.body.appendChild(textarea); textarea.select();
            try {
                if (document.execCommand('copy')) {
                    btn.innerText = '✅ Copied!'; setTimeout(() => { btn.innerText = '📋 Copy'; }, 2000);
                }
            } catch (err) { console.error('Copy failed', err); }
            document.body.removeChild(textarea);
        }

        window.approve = () => {
            const box = document.querySelector('.approval-box');
            if (box) box.remove();
            vscode.postMessage({ type: 'approveAction' });
        };
        window.reject = () => {
            const box = document.querySelector('.approval-box');
            if (box) box.remove();
            vscode.postMessage({ type: 'rejectAction' });
        };

        function exportToMD(text) {
            vscode.postMessage({ type: 'exportResponse', text: text });
        }

        function addMsg(text, role, rationale) {
            const isUser = role === 'user';
            const msgEl = document.createElement('div');
            msgEl.className = 'msg ' + (isUser ? 'msg-user' : 'msg-ai');
            msgEl._raw = text;

            // If rationale exists and it's an AI message, add the Rationale View
            if (!isUser && rationale && (rationale.problem || rationale.goal || rationale.reasoning)) {
                const ratDiv = document.createElement('div');
                ratDiv.className = 'rationale-container';
                let ratHtml = '<div class="rationale-header"><span>🧠</span> Thought Process</div>';
                if (rationale.problem) {
                    ratHtml += '<div class="rationale-section"><div class="rationale-label"><span>⚠️</span> Problem</div><div class="rationale-content">' + rationale.problem + '</div></div>';
                }
                if (rationale.goal) {
                    ratHtml += '<div class="rationale-section"><div class="rationale-label"><span>💡</span> Goal</div><div class="rationale-content">' + rationale.goal + '</div></div>';
                }
                if (rationale.reasoning) {
                    ratHtml += '<div class="rationale-section"><div class="rationale-label"><span>✅</span> Rationale</div><div class="rationale-content">' + rationale.reasoning + '</div></div>';
                }
                ratDiv.innerHTML = ratHtml;
                chat.appendChild(ratDiv);
            }

            const head = document.createElement('div');
            head.className = 'msg-head';
            head.innerHTML = isUser ? '<div class="av av-user">U</div> You' : '<div class="av av-ai">✦</div> G1nation';

            const body = document.createElement('div');
            body.className = 'msg-body markdown-body';
            
            if (isUser) {
                body.innerText = text;
            } else {
                body.innerHTML = fmt(text);
            }

            const actions = document.createElement('div');
            actions.className = 'msg-actions';

            const copyBtn = document.createElement('button');
            copyBtn.className = 'action-btn'; copyBtn.innerText = '📋 Copy';
            copyBtn.onclick = (e) => { e.stopPropagation(); copyToClipboard(msgEl._raw, copyBtn); };

            const exportBtn = document.createElement('button');
            exportBtn.className = 'action-btn'; exportBtn.innerText = '💾 Export';
            exportBtn.onclick = (e) => { e.stopPropagation(); exportToMD(msgEl._raw); };

            actions.appendChild(copyBtn);
            actions.appendChild(exportBtn);
            
            msgEl.appendChild(head); msgEl.appendChild(body);
            msgEl.appendChild(actions);
            chat.appendChild(msgEl); chat.scrollTop = chat.scrollHeight;
            return { body, msgEl };
        }

        window.addEventListener('message', e => {
            const msg = e.data;
            switch(msg.type) {
                case 'addMessage':
                    addMsg(msg.value, msg.role, msg.rationale);
                    break;
                case 'streamStart':
                    thinkingBar.classList.remove('active');
                    if (document.querySelector('.welcome')) document.querySelector('.welcome').remove();
                    const res = addMsg('', 'assistant');
                    streamBody = res.body; streamBody._parent = res.msgEl; streamBody._parent._raw = '';
                    streamBody.classList.add('stream-active');
                    break;
                case 'streamChunk':
                    if (streamBody) {
                        streamBody._parent._raw += msg.value;
                        streamBody.innerHTML = fmt(streamBody._parent._raw);
                        chat.scrollTop = chat.scrollHeight;
                    }
                    break;
                case 'streamEnd':
                    if (streamBody) streamBody.classList.remove('stream-active');
                    streamBody = null;
                    // \uc0dd\uc131 \uc644\ub8cc \uc2dc Stop \ubc84\ud2bc \uc228\uae30\uace0 Send \ubcf5\uad50
                    setGenerating(false);
                    resetStepper();
                    Sound.success();
                    break;
                case 'restoreHistory':
                case 'sessionLoaded':
                    const historyData = msg.type === 'sessionLoaded' ? msg.value : msg;
                    const history = Array.isArray(historyData.history) ? historyData.history : (Array.isArray(historyData) ? historyData : []);
                    
                    if (history && history.length > 0) {
                        chat.innerHTML = '';
                        history.forEach(m => addMsg(m.content, m.role === 'assistant' ? 'assistant' : 'user', m.rationale));
                    }
                    if (historyData.negativePrompt !== undefined) {
                        negativePrompt.value = historyData.negativePrompt;
                    }
                    historyOverlay.classList.remove('visible');
                    break;
                case 'clearChat':
                    chat.innerHTML = '<div class="welcome"><div class="welcome-logo">✦</div><div class="welcome-title">Welcome to G1nation</div><p>Your premium local AI assistant.<br>Ready to analyze projects and build reports.</p></div>';
                    break;
                case 'focusInput':
                    input.focus();
                    break;
                case 'modelsList': {
                    modelSel.innerHTML = '';
                    // [State Persistence - Tier 2] LocalStorage에서 마지막 선택 모델 복원 시도
                    const _savedModel = localStorage.getItem('g1nation_last_model');
                    // 서버 추천 모델 vs 로컬 저장 모델 중 우선순위 결정
                    // LocalStorage에 저장된 값이 현재 목록에 있으면 그것을 우선 사용 (Tier 2 우선)
                    const _preferredModel = (_savedModel && msg.value.models.includes(_savedModel))
                        ? _savedModel
                        : msg.value.selected;
                    msg.value.models.forEach(m => {
                        const o = document.createElement('option'); o.value = m; o.innerText = m;
                        if (m === _preferredModel) o.selected = true;
                        modelSel.appendChild(o);
                    });
                    // LocalStorage에 저장된 모델이 실제로 적용된 경우, 백엔드 설정도 동기화
                    if (_savedModel && _savedModel !== msg.value.selected && msg.value.models.includes(_savedModel)) {
                        vscode.postMessage({ type: 'model', value: _savedModel });
                    }
                    if (typeof updateInputPlaceholder === 'function') updateInputPlaceholder();
                    statusLabel.innerText = \`Model: \${_preferredModel}\`;
                    break;
                }
                case 'brainProfiles':
                    brainSel.innerHTML = '';
                    msg.value.profiles.forEach(p => {
                        const o = document.createElement('option'); o.value = p.id; o.innerText = p.name;
                        if (p.id === msg.value.activeBrainId) o.selected = true;
                        brainSel.appendChild(o);
                    });
                    const addOpt = document.createElement('option');
                    addOpt.value = 'new'; addOpt.innerText = '+ Add New Brain...';
                    brainSel.appendChild(addOpt);
                    break;
                case 'sessionList':
                    historyList.innerHTML = '';
                    msg.value.forEach(s => {
                        const el = document.createElement('div'); el.className = 'history-item';
                        el.innerHTML = \`<div style="font-weight:600; color:var(--text-bright); mb-2">\${s.title}</div><div style="font-size:10px; color:var(--text-dim)">\${new Date(s.timestamp).toLocaleString()} · \${s.messageCount} msgs</div>\`;
                        el.onclick = () => vscode.postMessage({ type: 'loadSession', id: s.id });
                        historyList.appendChild(el);
                    });
                    break;
                case 'engineStatus':
                    statusDot.style.background = msg.value.online ? 'var(--success)' : 'var(--error)';
                    break;
                case 'autoContinue':
                    statusLabel.innerText = msg.value; thinkingBar.classList.add('active');
                    if (msg.value.includes('Analyzing')) setStep('analyze');
                    if (msg.value.includes('Planning')) setStep('plan');
                    if (msg.value.includes('Executing')) setStep('execute');
                    setTimeout(() => { thinkingBar.classList.remove('active'); }, 3000);
                    break;
                case 'agentsList':
                    agentSel.innerHTML = '<option value="none">No Agent</option>';
                    msg.value.forEach(a => {
                        const o = document.createElement('option'); o.value = a.path; o.innerText = a.name;
                        if (a.path === msg.selected) o.selected = true;
                        agentSel.appendChild(o);
                    });
                    if (msg.selected && msg.selected !== 'none') {
                        vscode.postMessage({ type: 'getAgentContent', path: msg.selected });
                    }
                    break;
                case 'agentContent':
                    agentPrompt.value = msg.value;
                    negativePrompt.value = msg.negativePrompt || '';
                    break;
                case 'error':
                    thinkingBar.classList.remove('active'); sendBtn.disabled = false;
                    addMsg(msg.value, 'error');
                    break;
                case 'requiresApproval':
                    const box = document.createElement('div');
                    box.className = 'approval-box';
                    box.innerHTML = '<div class="approval-title"><span>🛡️</span> 작업 승인 대기 중 (Action Approval Required)</div>' +
                                    '<div style="font-size: 11px; color: var(--text-dim); margin-bottom: 8px;">위의 변경 사항을 프로젝트에 반영할까요?</div>' +
                                    '<div class="approval-btns">' +
                                    '    <button class="btn-approve" onclick="approve()">승인 (Approve)</button>' +
                                    '    <button class="btn-reject" onclick="reject()">롤백 (Rollback)</button>' +
                                    '</div>';
                    chat.appendChild(box);
                    chat.scrollTop = chat.scrollHeight;
                    break;
            }
        });

        function renderAttachments() {
            attachPreview.innerHTML = '';
            if (pendingFiles.length === 0) { attachPreview.classList.remove('visible'); return; }
            attachPreview.classList.add('visible');
            pendingFiles.forEach((f, i) => {
                const chip = document.createElement('div'); chip.className = 'file-chip';
                chip.innerHTML = \`<span>📎</span> \${f.name} <span class="remove" onclick="removeFile(\${i})">✕</span>\`;
                attachPreview.appendChild(chip);
            });
        }
        window.removeFile = (i) => {
            pendingFiles.splice(i, 1);
            renderAttachments();
            // 파일 삭제 후 Draft State 재평가
            setDraftActive(input.value.trim().length > 0 || pendingFiles.length > 0);
        };
        function processFiles(files) {
            if (!files || files.length === 0) return;
            
            Array.from(files).forEach(file => {
                const reader = new FileReader();
                reader.onload = () => {
                    const base64 = reader.result.split(',')[1];
                    pendingFiles.push({ name: file.name, type: file.type, data: base64 });
                    renderAttachments();
                    setDraftActive(true);
                };
                reader.readAsDataURL(file);
            });
            showToast(`\${files.length}개의 파일이 추가되었습니다.`, 'success');
            Sound.success();
        }

        attachBtn.onclick = () => fileInput.click();
        fileInput.onchange = () => {
            processFiles(fileInput.files);
            fileInput.value = '';
        };

        // --- Drag and Drop Implementation ---
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            document.body.addEventListener(eventName, e => {
                e.preventDefault();
                e.stopPropagation();
            }, false);
        });

        ['dragenter', 'dragover'].forEach(eventName => {
            document.body.addEventListener(eventName, () => {
                document.body.classList.add('drag-over');
            }, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            document.body.addEventListener(eventName, () => {
                document.body.classList.remove('drag-over');
            }, false);
        });

        document.body.addEventListener('drop', e => {
            const dt = e.dataTransfer;
            const files = dt.files;
            processFiles(files);
        }, false);

        function send() {
            const val = input.value.trim();
            if (!val && pendingFiles.length === 0) return;
            addMsg(val || (pendingFiles.length > 0 ? \`[Sent \${pendingFiles.length} files]\` : ''), 'user');
            vscode.postMessage({ 
                type: 'prompt', 
                value: val, 
                model: modelSel.value, 
                internet: internetEnabled, 
                files: pendingFiles.length > 0 ? pendingFiles : undefined,
                agentFile: agentSel.value === 'none' ? undefined : agentSel.value,
                negativePrompt: negativePrompt.value.trim() || undefined
            });
            input.value = ''; input.style.height = 'auto'; pendingFiles = []; renderAttachments();
            // 전송 완료 후 Draft State 리셋 + Stop 버튼 표시
            setDraftActive(false);
            setGenerating(true);
            thinkingBar.classList.add('active');
        }

        sendBtn.onclick = send;
        input.addEventListener('keydown', e => { 
            if (e.key === 'Enter' && !e.shiftKey) { 
                if (e.isComposing) return;
                e.preventDefault(); 
                send(); 
            } 
        });
        input.addEventListener('input', () => {
            input.style.height = 'auto';
            input.style.height = input.scrollHeight + 'px';
            // Draft State: 내용이 있으면 cancelBtn 표시
            setDraftActive(input.value.trim().length > 0 || pendingFiles.length > 0);
        });

        cancelBtn.onclick = () => clearDraft();
        stopBtn.onclick = () => {
            vscode.postMessage({ type: 'stopGeneration' });
            setGenerating(false);
            thinkingBar.classList.remove('active');
            showToast('■ 생성이 중단되었습니다.', 'warn');
            Sound.warn();
        };

        const startNewChat = () => { Sound.play(660, 'sine', 0.1); vscode.postMessage({ type: 'newChat' }); };
        document.getElementById('newChatBtn').onclick = startNewChat;
        document.getElementById('inputNewChatBtn').onclick = startNewChat;

        document.getElementById('settingsBtn').onclick = () => vscode.postMessage({ type: 'openSettings' });
        document.getElementById('internetBtn').onclick = () => {
            internetEnabled = !internetEnabled; document.getElementById('internetBtn').classList.toggle('active', internetEnabled);
        };

        let multiAgentEnabled = true;
        document.getElementById('multiAgentBtn').onclick = () => {
            multiAgentEnabled = !multiAgentEnabled;
            vscode.postMessage({ type: 'toggleMultiAgent', value: multiAgentEnabled });
            document.getElementById('multiAgentBtn').classList.toggle('active', multiAgentEnabled);
        };

        const syncBrain = () => { Sound.play(550, 'sine', 0.1); vscode.postMessage({ type: 'syncBrain' }); };
        document.getElementById('brainBtn').onclick = syncBrain;
        document.getElementById('inputSyncBtn').onclick = syncBrain;
        document.getElementById('historyBtn').onclick = () => vscode.postMessage({ type: 'getSessions' });
        document.getElementById('historyBtn').addEventListener('click', () => historyOverlay.classList.add('visible'));
        document.getElementById('closeHistoryBtn').onclick = () => historyOverlay.classList.remove('visible');
        const updateInputPlaceholder = () => {
            promptInput.placeholder = \`Ask \${modelSel.value}...\`;
        };

        modelSel.onchange = () => {
            const _selectedModel = modelSel.value;
            // [State Persistence - Tier 2] 모델 변경 시 LocalStorage에 즉시 저장 (클라이언트 측 지속성)
            try {
                localStorage.setItem('g1nation_last_model', _selectedModel);
            } catch(e) {
                console.warn('[G1nation] LocalStorage 저장 실패:', e);
            }
            // [State Persistence - Tier 1] VS Code 전역 설정에 동기화 (영구 저장)
            vscode.postMessage({ type: 'model', value: _selectedModel });
            updateInputPlaceholder();
            // 상태 레이블 즉시 업데이트
            statusLabel.innerText = \`Model: \${_selectedModel}\`;
        };
        brainSel.onchange = () => {
            if (brainSel.value === 'new') {
                vscode.postMessage({ type: 'addBrain' });
            } else {
                vscode.postMessage({ type: 'setBrainProfile', id: brainSel.value });
            }
        };

        // Handle initial state and state updates from extension
        window.addEventListener('message', e => {
            const msg = e.data;
            if (msg.type === 'configUpdate') {
                multiAgentEnabled = msg.value.multiAgentEnabled;
                document.getElementById('multiAgentBtn').classList.toggle('active', multiAgentEnabled);
            }
        });


        agentSel.onchange = () => {
            if (agentSel.value !== 'none') {
                vscode.postMessage({ type: 'getAgentContent', path: agentSel.value });
                if (editMode) agentConfigPanel.style.display = 'flex';
            } else {
                agentConfigPanel.style.display = 'none';
                editMode = false;
                editAgentBtn.classList.remove('active');
                agentPrompt.value = '';
                negativePrompt.value = '';
            }
        };

        editAgentBtn.onclick = () => {
            if (agentSel.value === 'none') return;
            editMode = !editMode;
            editAgentBtn.classList.toggle('active', editMode);
            agentConfigPanel.style.display = editMode ? 'flex' : 'none';
        };

        updateAgentBtn.onclick = () => {
            if (agentSel.value !== 'none') {
                vscode.postMessage({ 
                    type: 'updateAgent', 
                    path: agentSel.value, 
                    content: agentPrompt.value,
                    negativePrompt: negativePrompt.value.trim()
                });
            }
        };

        addAgentBtn.onclick = () => vscode.postMessage({ type: 'createAgent' });

        vscode.postMessage({ type: 'getModels' });
        vscode.postMessage({ type: 'getAgents' });
        vscode.postMessage({ type: 'ready' });

        // --- Proactive Behavioral Tracking ---
        let hoverTimer = null;
        const trackBehavior = (elementId, context) => {
            const el = document.getElementById(elementId);
            if (!el) return;
            el.addEventListener('mouseenter', () => {
                hoverTimer = setTimeout(() => {
                    vscode.postMessage({ type: 'proactiveTrigger', context: context });
                }, 5000); // 5 seconds threshold
            });
            el.addEventListener('mouseleave', () => {
                if (hoverTimer) clearTimeout(hoverTimer);
            });
        };

        trackBehavior('settingsBtn', 'settings_exploration');
        trackBehavior('brainBtn', 'brain_sync_exploration');
        trackBehavior('agentSel', 'agent_selection_exploration');
    </script>
</body>
</html>`;
    }
}