@pheem49/mint 1.5.2 → 1.5.4

package/src/UI/renderer.js

@@ -6,14 +6,36 @@ const maximizeBtn = document.getElementById('maximize-btn');
 const minimizeBtn = document.getElementById('minimize-btn');
 const clearBtn = document.getElementById('clear-btn');
 const settingsBtn = document.getElementById('settings-btn');
+const sidebarNewChatBtn = document.getElementById('sidebar-new-chat');
+const sidebarSettingsBtn = document.getElementById('sidebar-settings');
+const sidebarToggleBtn = document.getElementById('sidebar-toggle');
+const appBody = document.querySelector('.app-body');
+const sidebarChatBtn = document.getElementById('sidebar-chat-btn');
+const sidebarPicturesBtn = document.getElementById('sidebar-pictures-btn');
+const picturesLibrary = document.getElementById('pictures-library');
+const picturesGrid = document.getElementById('pictures-grid');
+const picturesEmpty = document.getElementById('pictures-empty');
+const picturesCloseBtn = document.getElementById('pictures-close-btn');
 const micBtn = document.getElementById('mic-btn');
 const visionBtn = document.getElementById('vision-btn');
+const chatProviderSelect = document.getElementById('chat-provider-select');
 const imagePreviewContainer = document.getElementById('image-preview-container');
 const imagePreview = document.getElementById('image-preview');
 const removeImageBtn = document.getElementById('remove-image-btn');
+const agentModeToggle = document.getElementById('agent-mode-toggle');
 const modelMount = document.getElementById('model-mount');
 const modelShell = document.getElementById('model-shell');
 const modelStatus = document.getElementById('model-status');
+const mintStatus = document.getElementById('mint-status');
+const mintStatusLabel = document.getElementById('mint-status-label');
+const modelActivityBadge = document.getElementById('model-activity-badge');
+const startupLoading = document.getElementById('startup-loading');
+const appContainer = document.querySelector('.app-container');
+
+if (startupLoading) {
+    startupLoading.style.background = 'var(--bg-gradient)';
+    startupLoading.style.color = 'var(--text-muted)';
+}
 
 // Proactive Assistant elements
 const proactiveBar = document.getElementById('proactive-bar');
@@ -28,6 +50,92 @@ let ttsVolume = 1.0;
 let ttsSpeed = 1.0;
 let ttsPitch = 1.0;
 let lastConversationLanguage = 'auto';
+let mintActivityResetTimer = null;
+let currentSettings = {};
+
+const PROVIDER_PICKER_OPTIONS = [
+    ['gemini', 'Gemini'],
+    ['anthropic', 'Claude'],
+    ['openai', 'OpenAI'],
+    ['ollama', 'Ollama'],
+    ['huggingface', 'Hugging Face'],
+    ['local_openai', 'Local']
+];
+
+function buildProviderPicker(settings = currentSettings) {
+    if (!chatProviderSelect) return;
+    chatProviderSelect.textContent = '';
+    PROVIDER_PICKER_OPTIONS.forEach(([value, label]) => {
+        const option = document.createElement('option');
+        option.value = value;
+        option.textContent = label;
+        chatProviderSelect.appendChild(option);
+    });
+    chatProviderSelect.value = settings.aiProvider || 'gemini';
+}
+
+function syncAgentModeToggle(settings = currentSettings) {
+    if (!agentModeToggle) return;
+    agentModeToggle.checked = settings.assistantMode === 'agent';
+    agentModeToggle.closest('.smart-context-control')?.classList.toggle('is-active', agentModeToggle.checked);
+}
+
+async function changeChatProvider(provider) {
+    if (!PROVIDER_PICKER_OPTIONS.some(([value]) => value === provider)) return;
+    const nextSettings = { ...currentSettings, aiProvider: provider };
+    chatProviderSelect.disabled = true;
+    try {
+        const result = await window.api.saveSettings(nextSettings);
+        if (!result || result.success !== false) {
+            currentSettings = nextSettings;
+            buildProviderPicker(currentSettings);
+        } else {
+            throw new Error(result.message || 'Unable to save provider setting');
+        }
+    } catch (error) {
+        console.error('Failed to change provider:', error);
+        buildProviderPicker(currentSettings);
+        setMintActivity('error');
+    } finally {
+        chatProviderSelect.disabled = false;
+    }
+}
+
+const MINT_ACTIVITY_STATES = {
+    idle: { label: 'Idle', title: 'Mint is idle' },
+    listening: { label: 'Listening', title: 'Mint is listening' },
+    thinking: { label: 'Thinking', title: 'Mint is thinking' },
+    speaking: { label: 'Speaking', title: 'Mint is speaking' },
+    error: { label: 'Error', title: 'Mint needs attention' }
+};
+
+function setMintActivity(state, options = {}) {
+    const normalizedState = MINT_ACTIVITY_STATES[state] ? state : 'idle';
+    const meta = MINT_ACTIVITY_STATES[normalizedState];
+    if (mintActivityResetTimer) {
+        clearTimeout(mintActivityResetTimer);
+        mintActivityResetTimer = null;
+    }
+
+    [mintStatus, modelActivityBadge].forEach((element) => {
+        if (!element) return;
+        element.dataset.state = normalizedState;
+        element.title = meta.title;
+        const label = element.querySelector('.mint-status-label');
+        if (label) label.textContent = meta.label;
+    });
+    if (mintStatusLabel) mintStatusLabel.textContent = meta.label;
+
+    if (window.api && window.api.setAiState) {
+        window.api.setAiState(normalizedState);
+    }
+
+    if (normalizedState === 'error' || options.resetAfter) {
+        mintActivityResetTimer = setTimeout(() => {
+            setMintActivity('idle');
+        }, options.resetAfter || 3500);
+    }
+}
 
 function detectConversationLanguage(text) {
     const value = String(text || '');
@@ -56,8 +164,11 @@ function buildInteractionLanguageInstruction() {
 // --- Theme Loading ---
 function applyTheme(theme, accentColor, systemTextColor, config = {}) {
     document.documentElement.setAttribute('data-theme', theme || 'dark');
-    const accent = accentColor || '#8b5cf6';
-    const textColor = systemTextColor || '#f8fafc';
+    const accent = accentColor || '#8f6cf5';
+    const defaultTextColor = theme === 'light' ? '#0f172a' : '#e8e8ea';
+    const textColor = (!systemTextColor || (theme === 'light' && systemTextColor === '#f8fafc'))
+        ? defaultTextColor
+        : systemTextColor;
     document.documentElement.style.setProperty('--accent', accent);
     document.documentElement.style.setProperty('--accent-hover', lightenColor(accent, 20));
     document.documentElement.style.setProperty('--text-main', textColor);
@@ -65,19 +176,36 @@ function applyTheme(theme, accentColor, systemTextColor, config = {}) {
     // Dynamic UI Customizations
     document.documentElement.style.setProperty('--glass-blur', config.glassBlur || 'blur(16px)');
     document.body.style.fontFamily = config.fontFamily || "'Outfit', sans-serif";
+    document.documentElement.style.fontSize = config.fontSize || '15px';
 
     if (theme === 'custom') {
         if (config.customBgStart && config.customBgEnd) {
             const gradient = `linear-gradient(135deg, ${config.customBgStart} 0%, ${config.customBgEnd} 100%)`;
+            document.documentElement.style.setProperty('--bg-color', config.customBgStart);
             document.documentElement.style.setProperty('--bg-gradient', gradient);
         }
         if (config.customPanelBg) {
             const rgb = hexToRgb(config.customPanelBg);
             document.documentElement.style.setProperty('--panel-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.75)`);
+            document.documentElement.style.setProperty('--panel-raised', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.82)`);
+            document.documentElement.style.setProperty('--panel-soft', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.46)`);
+            document.documentElement.style.setProperty('--chrome-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.88)`);
+            document.documentElement.style.setProperty('--surface-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.62)`);
+            document.documentElement.style.setProperty('--surface-strong', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.86)`);
+            document.documentElement.style.setProperty('--input-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.72)`);
         }
     } else {
-        document.documentElement.style.removeProperty('--bg-gradient');
-        document.documentElement.style.removeProperty('--panel-bg');
+        [
+            '--bg-color',
+            '--bg-gradient',
+            '--panel-bg',
+            '--panel-raised',
+            '--panel-soft',
+            '--chrome-bg',
+            '--surface-bg',
+            '--surface-strong',
+            '--input-bg'
+        ].forEach(name => document.documentElement.style.removeProperty(name));
     }
 }
 
@@ -93,14 +221,19 @@ function hexToRgb(hex) {
 async function loadTheme() {
     try {
         const config = await window.api.getSettings();
+        currentSettings = config || {};
         applyTheme(config.theme, config.accentColor, config.systemTextColor, config);
         enableVoiceReply = config.enableVoiceReply !== false;
         ttsProvider = config.ttsProvider || 'google';
         ttsVolume = config.ttsVolume !== undefined ? config.ttsVolume : 1.0;
         ttsSpeed = config.ttsSpeed !== undefined ? config.ttsSpeed : 1.0;
         ttsPitch = config.ttsPitch !== undefined ? config.ttsPitch : 1.0;
+        buildProviderPicker(currentSettings);
+        syncAgentModeToggle(currentSettings);
     } catch (e) {
         applyTheme('dark', '#8b5cf6', '#f8fafc');
+        buildProviderPicker(currentSettings);
+        syncAgentModeToggle(currentSettings);
     }
 }
 
@@ -116,12 +249,41 @@ function lightenColor(hex, amount) {
 
 // 🔔 Real-time theme sync from Settings window
 window.api.onSettingsChanged((config) => {
+    currentSettings = config || currentSettings;
     applyTheme(config.theme, config.accentColor, config.systemTextColor, config);
     enableVoiceReply = config.enableVoiceReply !== false;
     ttsProvider = config.ttsProvider || 'google';
     ttsVolume = config.ttsVolume !== undefined ? config.ttsVolume : 1.0;
     ttsSpeed = config.ttsSpeed !== undefined ? config.ttsSpeed : 1.0;
     ttsPitch = config.ttsPitch !== undefined ? config.ttsPitch : 1.0;
+    buildProviderPicker(currentSettings);
+    syncAgentModeToggle(currentSettings);
+});
+
+chatProviderSelect?.addEventListener('change', (event) => {
+    changeChatProvider(event.target.value);
+});
+
+agentModeToggle?.addEventListener('change', async () => {
+    const nextSettings = {
+        ...currentSettings,
+        assistantMode: agentModeToggle.checked ? 'agent' : 'chat'
+    };
+    agentModeToggle.disabled = true;
+    try {
+        const result = await window.api.saveSettings(nextSettings);
+        if (!result || result.success !== false) {
+            currentSettings = nextSettings;
+        } else {
+            throw new Error(result.message || 'Unable to save assistant mode');
+        }
+    } catch (error) {
+        console.error('Failed to change assistant mode:', error);
+        setMintActivity('error');
+    } finally {
+        syncAgentModeToggle(currentSettings);
+        agentModeToggle.disabled = false;
+    }
 });
 
 // --- Voice Input Setup ---
@@ -190,6 +352,7 @@ function setupSpeechRecognition() {
     speechRecognition.onstart = () => {
         micBtn.classList.add('listening');
         chatInput.placeholder = "Listening... (Click to stop)";
+        setMintActivity('listening');
         speechHadResult = false;
         if (speechFallbackTimer) clearTimeout(speechFallbackTimer);
         speechFallbackTimer = setTimeout(() => {
@@ -228,6 +391,7 @@ function setupSpeechRecognition() {
 
     speechRecognition.onerror = (err) => {
         console.error("Speech recognition error:", err);
+        setMintActivity('error');
         fallbackToMediaRecorder();
         isSpeechStreaming = false;
         resetMicUI();
@@ -300,10 +464,12 @@ async function setupMediaRecorder() {
         mediaRecorder.onstart = () => {
             micBtn.classList.add('listening');
             chatInput.placeholder = "Listening... (Click to stop)";
+            setMintActivity('listening');
         };
 
     } catch (err) {
         console.error("Microphone access error:", err);
+        setMintActivity('error');
         micBtn.style.display = 'none';
         appendMessage("❌ ไม่สามารถเข้าถึงไมโครโฟนได้ค่ะ กรุณาตรวจสอบการตั้งค่าระดับระบบ", 'ai');
     }
@@ -312,11 +478,15 @@ async function setupMediaRecorder() {
 function resetMicUI() {
     micBtn.classList.remove('listening');
     chatInput.placeholder = DEFAULT_PLACEHOLDER;
+    if (voiceMode !== 'speech' && (!mediaRecorder || mediaRecorder.state === 'inactive')) {
+        setMintActivity('idle');
+    }
 }
 
 async function sendVoiceMessage(base64Audio) {
     showTyping();
     chatInput.placeholder = "Processing voice...";
+    setMintActivity('thinking');
     try {
         // Send empty text, but include the audio
         const response = await window.api.sendMessage("", null, base64Audio);
@@ -330,11 +500,14 @@ async function sendVoiceMessage(base64Audio) {
         await speakText(normalizeAiText(response.response), { onEnd: resumeSpeechIfNeeded });
         notifyAiIfNeeded();
 
-        if (response.action && response.action.type !== 'none') {
+        if (response.approval?.required) {
+            appendApprovalCard(msgDiv, response.approval);
+        } else if (response.action && response.action.type !== 'none') {
             appendActionCard(msgDiv, response.action);
         }
     } catch (error) {
         removeTyping();
+        setMintActivity('error');
         appendMessage("ขออภัยค่ะ เกิดข้อผิดพลาดในการประมวลผลเสียง", 'ai');
         console.error(error);
         resumeSpeechIfNeeded();
@@ -373,10 +546,10 @@ micBtn.addEventListener('click', (e) => {
         if (mediaRecorder.state === 'inactive') {
             audioChunks = [];
             mediaRecorder.start();
-            if (window.api && window.api.setAiState) window.api.setAiState('listening');
+            setMintActivity('listening');
         } else {
             mediaRecorder.stop();
-            if (window.api && window.api.setAiState) window.api.setAiState('thinking');
+            setMintActivity('thinking');
             voiceMode = null;
         }
         return;
@@ -408,10 +581,10 @@ micBtn.addEventListener('click', (e) => {
     if (mediaRecorder.state === 'inactive') {
         audioChunks = [];
         mediaRecorder.start();
-        if (window.api && window.api.setAiState) window.api.setAiState('listening');
+        setMintActivity('listening');
     } else {
         mediaRecorder.stop();
-        if (window.api && window.api.setAiState) window.api.setAiState('thinking');
+        setMintActivity('thinking');
     }
 });
 
@@ -419,7 +592,7 @@ micBtn.addEventListener('click', (e) => {
 let currentAudioPlayer = null;
 
 function speakText(text, options = {}) {
-    if (window.api && window.api.setAiState) window.api.setAiState('speaking');
+    setMintActivity('speaking');
     const onEnd = typeof options.onEnd === 'function' ? options.onEnd : () => {};
     
     const wrappedOnEnd = () => {
@@ -429,7 +602,7 @@ function speakText(text, options = {}) {
 
     return new Promise(async (resolve) => {
         if (!enableVoiceReply) {
-            if (window.api && window.api.setAiState) window.api.setAiState('idle');
+            setMintActivity('idle');
             wrappedOnEnd();
             return resolve();
         }
@@ -447,7 +620,7 @@ function speakText(text, options = {}) {
         }
 
         if (!text || !text.trim()) {
-            if (window.api && window.api.setAiState) window.api.setAiState('idle');
+            setMintActivity('idle');
             wrappedOnEnd();
             return resolve();
         }
@@ -461,7 +634,7 @@ function speakText(text, options = {}) {
                     let i = 0;
                     const playNext = () => {
                         if (i >= urls.length) {
-                            if (window.api && window.api.setAiState) window.api.setAiState('idle');
+                            setMintActivity('idle');
                             wrappedOnEnd();
                             return resolve();
                         }
@@ -499,6 +672,7 @@ function speakText(text, options = {}) {
 
 function fallbackSpeak(text, onEnd, resolve) {
     if (!('speechSynthesis' in window)) {
+        setMintActivity('idle');
         if (onEnd) onEnd();
         resolve();
         return;
@@ -515,7 +689,7 @@ function fallbackSpeak(text, onEnd, resolve) {
     const done = () => {
         if (finished) return;
         finished = true;
-        if (window.api && window.api.setAiState) window.api.setAiState('idle');
+        setMintActivity('idle');
         if (onEnd) onEnd();
         resolve();
     };
@@ -540,9 +714,82 @@ maximizeBtn.addEventListener('click', () => {
 });
 
 // Settings button
-settingsBtn.addEventListener('click', () => {
+function openSettings() {
     window.api.openSettings();
-});
+}
+
+settingsBtn.addEventListener('click', openSettings);
+sidebarSettingsBtn?.addEventListener('click', openSettings);
+
+async function renderPicturesLibrary() {
+    if (!picturesGrid || !picturesEmpty) return;
+    picturesGrid.innerHTML = '';
+
+    const pictures = await window.api.listSavedPictures();
+    picturesEmpty.classList.toggle('is-hidden', pictures.length > 0);
+
+    for (const picture of pictures) {
+        const card = document.createElement('article');
+        card.className = 'picture-card';
+
+        const img = document.createElement('img');
+        img.src = picture.url;
+        img.alt = picture.filename || 'Saved picture';
+        img.loading = 'lazy';
+
+        const meta = document.createElement('div');
+        meta.className = 'picture-card-meta';
+        const date = picture.createdAt ? new Date(picture.createdAt).toLocaleString() : '';
+        meta.textContent = picture.message || date || picture.filename || 'Saved picture';
+        meta.title = [picture.filename, picture.message, date].filter(Boolean).join('\n');
+
+        card.appendChild(img);
+        card.appendChild(meta);
+        picturesGrid.appendChild(card);
+    }
+}
+
+async function openPicturesLibrary() {
+    if (!appBody || !picturesLibrary) return;
+    picturesLibrary.hidden = false;
+    requestAnimationFrame(() => {
+        appBody.classList.add('pictures-open');
+    });
+    sidebarChatBtn?.classList.remove('is-active');
+    sidebarPicturesBtn?.classList.add('is-active');
+    await renderPicturesLibrary();
+}
+
+function closePicturesLibrary() {
+    if (!appBody || !picturesLibrary) return;
+    appBody.classList.remove('pictures-open');
+    setTimeout(() => {
+        if (!appBody.classList.contains('pictures-open')) {
+            picturesLibrary.hidden = true;
+        }
+    }, 240);
+    sidebarChatBtn?.classList.add('is-active');
+    sidebarPicturesBtn?.classList.remove('is-active');
+}
+
+sidebarChatBtn?.addEventListener('click', closePicturesLibrary);
+sidebarPicturesBtn?.addEventListener('click', openPicturesLibrary);
+picturesCloseBtn?.addEventListener('click', closePicturesLibrary);
+
+function setSidebarCollapsed(isCollapsed) {
+    if (!appBody || !sidebarToggleBtn) return;
+    appBody.classList.toggle('sidebar-collapsed', isCollapsed);
+    sidebarToggleBtn.setAttribute('aria-expanded', String(!isCollapsed));
+    sidebarToggleBtn.setAttribute('aria-label', isCollapsed ? 'Expand sidebar' : 'Collapse sidebar');
+    sidebarToggleBtn.setAttribute('title', isCollapsed ? 'Expand sidebar' : 'Collapse sidebar');
+}
+
+if (appBody && sidebarToggleBtn) {
+    setSidebarCollapsed(true);
+    sidebarToggleBtn.addEventListener('click', () => {
+        setSidebarCollapsed(!appBody.classList.contains('sidebar-collapsed'));
+    });
+}
 
 // Throttle utility to prevent UI spam
 function throttle(func, limit) {
@@ -586,15 +833,141 @@ function formatTime(isoString) {
     }
 }
 
+function compactSmartContext(context) {
+    if (!context || typeof context !== 'object') return null;
+    const activeWindow = context.activeWindow || {};
+    const currentApp = context.currentApp || {};
+    const browser = context.browser || null;
+    return {
+        capturedAt: context.capturedAt,
+        platform: context.platform,
+        currentApp: currentApp.name || activeWindow.appName || activeWindow.processName || '',
+        processName: currentApp.processName || activeWindow.processName || '',
+        pid: currentApp.pid || activeWindow.pid || null,
+        activeWindowTitle: activeWindow.title || '',
+        browser: browser ? {
+            title: browser.title || '',
+            url: browser.url || '',
+            urlUnavailableReason: browser.urlUnavailableReason || ''
+        } : null,
+        selectedText: context.selectedText || '',
+        clipboardText: context.clipboardText || ''
+    };
+}
+
+function appendSmartContextToMessage(message, context) {
+    const compact = compactSmartContext(context);
+    if (!compact) return message;
+    return [
+        message,
+        '',
+        '[SMART_CONTEXT]',
+        'Use this structured desktop context together with the attached screenshot. Do not mention it unless it helps answer the user.',
+        JSON.stringify(compact, null, 2),
+        '[/SMART_CONTEXT]'
+    ].join('\n');
+}
+
+function shouldShowAgentActivity(options = {}) {
+    return options.showAgentActivity !== false && currentSettings.assistantMode === 'agent';
+}
+
+function createAgentActivityCard() {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message', 'ai-message', 'agent-activity-message');
+
+    const bubble = document.createElement('div');
+    bubble.classList.add('message-bubble', 'agent-activity-card');
+
+    const header = document.createElement('div');
+    header.className = 'agent-activity-header';
+    const title = document.createElement('span');
+    title.textContent = 'Agent Activity';
+    const status = document.createElement('span');
+    status.className = 'agent-activity-status';
+    status.textContent = 'Running';
+    header.appendChild(title);
+    header.appendChild(status);
+
+    const list = document.createElement('div');
+    list.className = 'agent-activity-list';
+
+    bubble.appendChild(header);
+    bubble.appendChild(list);
+    messageDiv.appendChild(bubble);
+    chatContainer.appendChild(messageDiv);
+    scrollToBottom();
+
+    return {
+        element: messageDiv,
+        list,
+        status,
+        add(label, state = 'running', detail = '') {
+            const item = document.createElement('div');
+            item.className = 'agent-activity-item';
+            item.dataset.state = state;
+
+            const dot = document.createElement('span');
+            dot.className = 'agent-activity-dot';
+
+            const content = document.createElement('span');
+            content.className = 'agent-activity-text';
+            content.textContent = detail ? `${label}: ${detail}` : label;
+
+            item.appendChild(dot);
+            item.appendChild(content);
+            list.appendChild(item);
+            scrollToBottom();
+            return item;
+        },
+        update(item, state, label, detail = '') {
+            if (!item) return;
+            item.dataset.state = state;
+            const content = item.querySelector('.agent-activity-text');
+            if (content && label) {
+                content.textContent = detail ? `${label}: ${detail}` : label;
+            }
+        },
+        finish(state = 'done', label = 'Done') {
+            status.textContent = label;
+            status.dataset.state = state;
+        }
+    };
+}
+
+function describeSmartContextActivity(context, hasScreenshot) {
+    const compact = compactSmartContext(context) || {};
+    const parts = [];
+    if (hasScreenshot) parts.push('screen');
+    if (compact.currentApp) parts.push(compact.currentApp);
+    if (compact.activeWindowTitle) parts.push(compact.activeWindowTitle);
+    if (compact.selectedText) parts.push('selected text');
+    if (compact.clipboardText) parts.push('clipboard');
+    return parts.slice(0, 3).join(' · ') || 'desktop context';
+}
+
+function describeActionActivity(action) {
+    if (!action || action.type === 'none') return 'No desktop action';
+    const meta = getActionCardMeta(action);
+    return meta.detail ? `${meta.title} · ${meta.detail}` : meta.title;
+}
+
 // Clear chat history
-clearBtn.addEventListener('click', async () => {
+async function clearChatHistory(confirmMessage = 'Clear current chat history?') {
+    const shouldClear = window.confirm(confirmMessage);
+    if (!shouldClear) return;
+
+    closePicturesLibrary();
     await window.api.resetChat();
     // Remove all messages except the initial greeting
     const messages = chatContainer.querySelectorAll('.message:not(.initial)');
     messages.forEach(m => m.remove());
     // Append a clear confirmation
     appendMessage('Chat history cleared. Starting fresh! 🌿', 'ai', null, new Date().toISOString());
-});
+}
+
+clearBtn.addEventListener('click', () => clearChatHistory('Clear current chat history?'));
+sidebarNewChatBtn?.addEventListener('click', () => clearChatHistory('Start a new chat and clear current history?'));
 
 function formatProviderInfo(providerInfo) {
     if (!providerInfo || typeof providerInfo !== 'object') return '';
@@ -604,6 +977,85 @@ function formatProviderInfo(providerInfo) {
     return model ? `${provider || 'AI'} • ${model}` : provider;
 }
 
+function formatNumber(value) {
+    const number = Number(value) || 0;
+    return number.toLocaleString('en-US');
+}
+
+function summarizeProviderUsage(providerInfo) {
+    const usage = Array.isArray(providerInfo?.usage) ? providerInfo.usage : [];
+    const selectedProvider = String(providerInfo?.provider || '').trim();
+    const selectedModel = String(providerInfo?.model || '').trim();
+    const row = usage.find(item =>
+        String(item.provider || '') === selectedProvider &&
+        String(item.model || '') === selectedModel
+    ) || usage[0] || {};
+
+    return {
+        requests: Number(row.requests) || 0,
+        inputTokens: Number(row.inputTokens) || 0,
+        outputTokens: Number(row.outputTokens) || 0,
+        reasoningTokens: Number(row.reasoningTokens) || 0,
+        cacheReads: Number(row.cacheReads) || 0,
+        totalTokens: Number(row.totalTokens) || 0
+    };
+}
+
+function closeProviderPopover() {
+    document.querySelectorAll('.provider-popover').forEach(popover => popover.remove());
+    document.querySelectorAll('.provider-badge.is-open').forEach(badge => badge.classList.remove('is-open'));
+}
+
+function createProviderRow(label, value) {
+    const row = document.createElement('div');
+    row.className = 'provider-popover-row';
+    const labelEl = document.createElement('span');
+    labelEl.textContent = label;
+    const valueEl = document.createElement('strong');
+    valueEl.textContent = value;
+    row.appendChild(labelEl);
+    row.appendChild(valueEl);
+    return row;
+}
+
+function showProviderPopover(anchor, providerInfo) {
+    closeProviderPopover();
+    anchor.classList.add('is-open');
+
+    const provider = String(providerInfo?.provider || 'AI').trim();
+    const model = String(providerInfo?.model || 'Unknown model').trim();
+    const usage = summarizeProviderUsage(providerInfo);
+    const popover = document.createElement('div');
+    popover.className = 'provider-popover';
+
+    const title = document.createElement('div');
+    title.className = 'provider-popover-title';
+    title.textContent = 'Model details';
+    popover.appendChild(title);
+
+    popover.appendChild(createProviderRow('Provider', provider));
+    popover.appendChild(createProviderRow('Model', model));
+    popover.appendChild(createProviderRow('Context tokens', formatNumber(usage.inputTokens)));
+    popover.appendChild(createProviderRow('Output tokens', formatNumber(usage.outputTokens)));
+    if (usage.reasoningTokens) {
+        popover.appendChild(createProviderRow('Reasoning tokens', formatNumber(usage.reasoningTokens)));
+    }
+    popover.appendChild(createProviderRow('Total tokens', formatNumber(usage.totalTokens)));
+
+    const action = document.createElement('button');
+    action.type = 'button';
+    action.className = 'provider-popover-action';
+    action.textContent = 'Change model in Settings';
+    action.addEventListener('click', (event) => {
+        event.stopPropagation();
+        closeProviderPopover();
+        if (window.api?.openSettings) window.api.openSettings();
+    });
+    popover.appendChild(action);
+
+    anchor.after(popover);
+}
+
 function splitListOutro(text) {
     const value = String(text || '').trim();
     const markers = [
@@ -726,10 +1178,20 @@ function appendMessage(text, sender, base64Image = null, timestamp = null, optio
         const timeDiv = document.createElement('div');
         timeDiv.classList.add('message-time');
         if (providerLabel) {
-            const providerSpan = document.createElement('span');
-            providerSpan.classList.add('provider-badge');
-            providerSpan.textContent = providerLabel;
-            timeDiv.appendChild(providerSpan);
+            const providerButton = document.createElement('button');
+            providerButton.type = 'button';
+            providerButton.classList.add('provider-badge');
+            providerButton.textContent = providerLabel;
+            providerButton.title = 'View model details';
+            providerButton.addEventListener('click', (event) => {
+                event.stopPropagation();
+                if (providerButton.classList.contains('is-open')) {
+                    closeProviderPopover();
+                    return;
+                }
+                showProviderPopover(providerButton, options.providerInfo);
+            });
+            timeDiv.appendChild(providerButton);
         }
         if (timestamp) {
             const timeSpan = document.createElement('span');
@@ -834,29 +1296,193 @@ function autoChunkAiText(text) {
 }
 
 function appendActionCard(messageDiv, action) {
+    if (!messageDiv || !action || action.type === 'none') return;
+
+    const meta = getActionCardMeta(action);
     const card = document.createElement('div');
     card.classList.add('action-card');
+    card.dataset.actionType = action.type || 'unknown';
 
-    let icon = '⚡';
-    let text = '';
-
-    if (action.type === 'open_url') {
-        icon = '🌐';
-        text = `Opened URL: ${action.target}`;
-    } else if (action.type === 'open_app') {
-        icon = '🚀';
-        text = `Launched App: ${action.target}`;
-    } else if (action.type === 'search') {
-        icon = '🔍';
-        text = `Searched info: ${action.target}`;
-    } else {
-        return; // Do nothing if none or unknown
+    const icon = document.createElement('span');
+    icon.className = 'action-card-icon';
+    icon.textContent = meta.icon;
+
+    const content = document.createElement('div');
+    content.className = 'action-card-content';
+
+    const title = document.createElement('div');
+    title.className = 'action-card-title';
+    title.textContent = meta.title;
+    content.appendChild(title);
+
+    if (meta.detail) {
+        const detail = document.createElement('div');
+        detail.className = 'action-card-detail';
+        detail.textContent = meta.detail;
+        content.appendChild(detail);
     }
 
-    card.textContent = `${icon} ${text}`;
+    card.appendChild(icon);
+    card.appendChild(content);
+    messageDiv.querySelector('.message-bubble')?.appendChild(card);
+}
+
+function getActionCardMeta(action) {
+    const target = formatActionTarget(action);
+    const type = action?.type || 'unknown';
+    const targetOrFallback = target || 'No target';
+
+    const map = {
+        open_url: ['🌐', 'Opened URL', target],
+        search: ['🔍', 'Searched the web', target],
+        open_app: ['🚀', 'Launched app', target],
+        web_automation: ['🧭', 'Ran browser automation', target],
+        create_folder: ['📁', 'Created folder', target],
+        open_file: ['📄', 'Opened file', target],
+        open_folder: ['📂', 'Opened folder', target],
+        delete_file: ['🗑️', 'Deleted file', target],
+        find_path: ['🔎', action.openAfter ? 'Found and opened path' : 'Found path', buildFindPathDetail(action)],
+        clipboard_write: ['📋', 'Updated clipboard', target],
+        learn_file: ['📚', 'Indexed file', target],
+        learn_folder: ['📚', 'Indexed folder', target],
+        system_info: ['💻', target ? 'Checked weather' : 'Checked system info', target],
+        plugin: ['🔌', 'Ran plugin', target],
+        mcp_tool: ['🧩', 'Called MCP tool', target],
+        mouse_move: ['↗', 'Moved pointer', target],
+        mouse_click: ['☝', 'Clicked screen', buildMouseDetail(action)],
+        type_text: ['⌨', 'Typed text', target],
+        key_tap: ['⌨', 'Pressed key', target],
+        system_automation: ['⚙', 'Changed system setting', target]
+    };
+
+    const [icon, title, detail] = map[type] || ['⚡', `Ran action: ${type}`, targetOrFallback];
+    return { icon, title, detail };
+}
+
+function buildFindPathDetail(action) {
+    const target = formatActionTarget(action);
+    const typeLabel = action.pathType && action.pathType !== 'any' ? ` (${action.pathType})` : '';
+    return target ? `${target}${typeLabel}` : typeLabel.trim();
+}
+
+function buildMouseDetail(action) {
+    const point = formatActionTarget(action);
+    const button = action.button ? `button ${action.button}` : 'left button';
+    return point ? `${point} · ${button}` : button;
+}
+
+function formatActionTarget(action) {
+    if (!action || typeof action !== 'object') return '';
+    if (action.server && action.target) return `${action.server}:${action.target}`;
+    if (action.pluginName) return `${action.pluginName} ${action.target || ''}`.trim();
+    if (action.target) return String(action.target);
+    if (Number.isFinite(action.x) && Number.isFinite(action.y)) return `${action.x}, ${action.y}`;
+    return '';
+}
+
+function getApprovalCopy(approval) {
+    const action = approval?.action || {};
+    const actionType = action.type || 'unknown';
+    const target = formatActionTarget(action);
+    const isDangerous = approval?.tier === 'dangerous';
+    return {
+        title: isDangerous ? 'Dangerous action requires approval' : 'Action requires approval',
+        body: target ? `${actionType}: ${target}` : actionType,
+        reason: approval?.reason || 'This action needs your permission before Mint can run it.',
+        approveLabel: isDangerous ? 'Allow Dangerous Action' : 'Allow Action'
+    };
+}
+
+function appendApprovalCard(messageDiv, approval, activity = null) {
+    if (!messageDiv || !approval?.action || !window.api?.executeApprovedAction) return;
+
+    const copy = getApprovalCopy(approval);
+    const card = document.createElement('div');
+    card.classList.add('action-card', 'approval-card');
+    card.dataset.tier = approval.tier || 'approval';
+
+    const content = document.createElement('div');
+    content.className = 'approval-card-content';
+
+    const title = document.createElement('div');
+    title.className = 'approval-card-title';
+    title.textContent = copy.title;
+
+    const body = document.createElement('div');
+    body.className = 'approval-card-body';
+    body.textContent = copy.body;
+
+    const reason = document.createElement('div');
+    reason.className = 'approval-card-reason';
+    reason.textContent = copy.reason;
+
+    content.appendChild(title);
+    content.appendChild(body);
+    content.appendChild(reason);
+
+    const actions = document.createElement('div');
+    actions.className = 'approval-card-actions';
+
+    const approveBtn = document.createElement('button');
+    approveBtn.type = 'button';
+    approveBtn.className = 'approval-btn approval-btn-approve';
+    approveBtn.textContent = copy.approveLabel;
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.type = 'button';
+    cancelBtn.className = 'approval-btn approval-btn-cancel';
+    cancelBtn.textContent = 'Cancel';
+
+    const setDone = (message, state) => {
+        approveBtn.disabled = true;
+        cancelBtn.disabled = true;
+        card.dataset.state = state;
+        reason.textContent = message;
+    };
+
+    approveBtn.addEventListener('click', async () => {
+        approveBtn.disabled = true;
+        cancelBtn.disabled = true;
+        reason.textContent = 'Running approved action...';
+        const runStep = activity?.add('Running approved action', 'running', describeActionActivity(approval.action));
+        setMintActivity('thinking');
+
+        try {
+            const result = await window.api.executeApprovedAction(approval.action);
+            if (!result || result.success === false) {
+                setDone(result?.message || 'Action failed.', 'error');
+                activity?.update(runStep, 'error', 'Action failed', result?.message || '');
+                activity?.finish('error', 'Failed');
+                setMintActivity('error');
+                return;
+            }
+
+            setDone(result.message || 'Action completed.', 'approved');
+            activity?.update(runStep, 'done', 'Action completed', result.message || describeActionActivity(approval.action));
+            activity?.finish('done', 'Completed');
+            setMintActivity('idle');
+        } catch (error) {
+            console.error('[Approval] Failed to execute action:', error);
+            setDone(error.message || 'Action failed.', 'error');
+            activity?.update(runStep, 'error', 'Action failed', error.message || '');
+            activity?.finish('error', 'Failed');
+            setMintActivity('error');
+        }
+    });
+
+    cancelBtn.addEventListener('click', () => {
+        setDone('Cancelled by user.', 'cancelled');
+        activity?.add('Approval cancelled', 'cancelled');
+        activity?.finish('cancelled', 'Cancelled');
+        setMintActivity('idle');
+    });
+
+    actions.appendChild(approveBtn);
+    actions.appendChild(cancelBtn);
+    card.appendChild(content);
+    card.appendChild(actions);
 
-    // Append after the bubble
-    messageDiv.querySelector('.message-bubble').appendChild(card);
+    messageDiv.querySelector('.message-bubble')?.appendChild(card);
 }
 
 function showTyping() {
@@ -898,8 +1524,18 @@ function loadScript(src) {
     });
 }
 
+function hideStartupLoading() {
+    appContainer?.classList.remove('is-loading');
+    if (!startupLoading) return;
+    startupLoading.classList.add('is-hidden');
+    setTimeout(() => startupLoading.remove(), 400);
+}
+
 async function loadLive2DWhenIdle() {
-    if (!modelMount || window.Live2DManager) return;
+    if (!modelMount || window.Live2DManager) {
+        hideStartupLoading();
+        return;
+    }
     try {
         await loadScript('../../node_modules/@hazart-pkg/live2d-core/live2dcubismcore.min.js');
         await loadScript('../../node_modules/pixi.js/dist/browser/pixi.min.js');
@@ -907,6 +1543,7 @@ async function loadLive2DWhenIdle() {
         await loadScript('live2d_manager.js');
         if (window.Live2DManager) {
             await Live2DManager.loadModel(modelMount, modelStatus, modelShell);
+            applyModelPanelControlState();
         }
     } catch (err) {
         console.error('[Live2D] Deferred load failed:', err);
@@ -914,6 +1551,8 @@ async function loadLive2DWhenIdle() {
             modelStatus.classList.add('is-error');
             modelStatus.textContent = 'Live2D model unavailable.';
         }
+    } finally {
+        hideStartupLoading();
     }
 }
 
@@ -978,30 +1617,55 @@ async function sendTextMessage(text, options = {}) {
         rememberConversationLanguage(displayText || cleanText);
     }
 
+    const activity = shouldShowAgentActivity(options) ? createAgentActivityCard() : null;
+    const contextStep = activity?.add('Preparing desktop context', 'running');
+
     // Show typing early so user knows we are processing
     showTyping();
+    setMintActivity('thinking');
+
+    let messageToSend = cleanText;
 
     // Check Smart Context Toggle
     const smartToggle = document.getElementById('smart-context-toggle');
     if (allowSmartContext && smartToggle && smartToggle.checked && !imageToSend) {
         try {
-            const silentCapture = await window.api.captureSilentScreen();
+            const [silentCapture, smartContext] = await Promise.all([
+                window.api.captureSilentScreen(),
+                window.api.getSmartContext ? window.api.getSmartContext() : Promise.resolve(null)
+            ]);
             if (silentCapture) {
                 // Set imageToSend so it gets sent to the API, but we already appended the chat bubble
                 imageToSend = silentCapture;
             }
+            if (smartContext) {
+                messageToSend = appendSmartContextToMessage(cleanText, smartContext);
+            }
+            if (activity && contextStep) {
+                activity.update(
+                    contextStep,
+                    'done',
+                    'Read Smart Context',
+                    describeSmartContextActivity(smartContext, Boolean(silentCapture))
+                );
+            }
         } catch (err) {
             console.error("Smart Context capture failed:", err);
+            activity?.update(contextStep, 'error', 'Smart Context unavailable', err.message || '');
         }
+    } else if (activity && contextStep) {
+        activity.update(contextStep, 'skipped', 'Smart Context skipped', imageToSend ? 'image already attached' : 'toggle is off');
     }
 
     // Hide proactive bar if user is actively typing a message
     hideProactiveBar();
+    const modelStep = activity?.add('Waiting for model response', 'running');
 
     try {
         // Send to main process (text, image, audio=null)
-        const response = await window.api.sendMessage(cleanText, imageToSend, null);
+        const response = await window.api.sendMessage(messageToSend, imageToSend, null);
         removeTyping();
+        activity?.update(modelStep, 'done', 'Model response received');
 
         if (typeof response.response !== 'string') {
             response.response = normalizeAiText(response.response);
@@ -1009,6 +1673,7 @@ async function sendTextMessage(text, options = {}) {
 
         // Handle system_info action: fetch data and append to AI message
         if (response.action && response.action.type === 'system_info') {
+            const infoStep = activity?.add('Running local info action', 'running', describeActionActivity(response.action));
             const city = (response.action.target || '').trim();
             // Only treat as weather if city looks like a real location name (not blank, not 'date', not 'time')
             const weatherKeywords = ['date', 'time', 'วัน', 'เวลา', 'today', 'now'];
@@ -1018,12 +1683,14 @@ async function sendTextMessage(text, options = {}) {
                 // Weather query
                 const weather = await window.api.getWeather(city);
                 response.response += `\n\n🌡️ ${weather.data}`;
+                activity?.update(infoStep, 'done', 'Weather info added', city);
             } else {
                 // General system info (date, time, RAM, CPU)
                 const info = await window.api.getSystemInfo();
                 const machine = info.machine && info.machine.display ? `\n🖥️ รุ่นเครื่อง: ${info.machine.display}` : '';
                 const distro = info.distro ? `\nระบบ: ${info.distro}` : '';
                 response.response += `\n\n📅 วันนี้: ${info.date}\n⏰ เวลา: ${info.time}${machine}${distro}\n💻 CPU: ${info.cpu.model} (${info.cpu.cores} คอร์)\n💻 RAM: ${info.ram.used} / ${info.ram.total} (${info.ram.percent})`;
+                activity?.update(infoStep, 'done', 'System info added');
             }
         }
 
@@ -1039,11 +1706,27 @@ async function sendTextMessage(text, options = {}) {
         notifyAiIfNeeded();
 
         // Append action card if applicable
-        if (response.action && response.action.type !== 'none' && response.action.type !== 'system_info') {
+        if (response.approval?.required) {
+            activity?.add('Selected action', 'approval', describeActionActivity(response.approval.action));
+            activity?.add('Waiting for approval', 'running', response.approval.reason || '');
+            activity?.finish('waiting', 'Waiting');
+            appendApprovalCard(msgDiv, response.approval, activity);
+        } else if (response.action && response.action.type !== 'none' && response.action.type !== 'system_info') {
+            activity?.add('Selected action', 'done', describeActionActivity(response.action));
             appendActionCard(msgDiv, response.action);
+            activity?.finish('done', 'Completed');
+        } else if (response.action && response.action.type === 'system_info') {
+            activity?.add('Selected action', 'done', describeActionActivity(response.action));
+            activity?.finish('done', 'Completed');
+        } else {
+            activity?.add('No desktop action selected', 'done');
+            activity?.finish('done', 'Completed');
         }
     } catch (error) {
         removeTyping();
+        setMintActivity('error');
+        activity?.update(modelStep, 'error', 'Model request failed', error.message || '');
+        activity?.finish('error', 'Failed');
         appendMessage("Sorry, I encountered an error communicating with the main process.", 'ai');
         console.error(error);
         resumeSpeechIfNeeded();
@@ -1052,7 +1735,6 @@ async function sendTextMessage(text, options = {}) {
 
 chatForm.addEventListener('submit', throttle(async (e) => {
     e.preventDefault();
-    if (window.api && window.api.setAiState) window.api.setAiState('thinking');
     const text = chatInput.value.trim();
     await sendTextMessage(text);
 }, 500));
@@ -1060,7 +1742,7 @@ chatForm.addEventListener('submit', throttle(async (e) => {
 window.addEventListener('live2d-model-interaction', async (event) => {
     const prompt = event?.detail?.prompt;
     if (!prompt) return;
-    if (window.api && window.api.setAiState) window.api.setAiState('thinking');
+    setMintActivity('thinking');
     const interactionPrompt = `${prompt}\n\n${buildInteractionLanguageInstruction()}`;
     const displayPrefix = lastConversationLanguage === 'thai' ? 'แตะโมเดล' : 'Model interaction';
     await sendTextMessage(interactionPrompt, {
@@ -1126,9 +1808,9 @@ inputArea.addEventListener('drop', (e) => {
 window.addEventListener('DOMContentLoaded', async () => {
     chatInput.focus();
     await loadTheme();
+    setMintActivity('idle');
     await loadChatHistory();
-    const scheduleLive2DLoad = window.requestIdleCallback || ((callback) => setTimeout(callback, 750));
-    scheduleLive2DLoad(() => loadLive2DWhenIdle());
+    loadLive2DWhenIdle();
 });
 
 // Proactive OS Notifications (Battery, Network, etc.)
@@ -1143,6 +1825,11 @@ window.addEventListener('focus', () => {
     if (window.api.clearAiNotifications) window.api.clearAiNotifications();
 });
 
+document.addEventListener('click', closeProviderPopover);
+document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') closeProviderPopover();
+});
+
 // =====================
 // Proactive Smart Suggestion Engine
 // =====================
@@ -1224,34 +1911,121 @@ if (smartContextToggle) {
 // Toggle Live2D Model visibility
 const toggleModelBtn = document.getElementById('toggle-model-btn');
 const assistantWorkspace = document.querySelector('.assistant-workspace');
+const modelLockBtn = document.getElementById('model-lock-btn');
+const modelScaleSlider = document.getElementById('model-scale-slider');
+const modelScaleValue = document.getElementById('model-scale-value');
+const modelScaleResetBtn = document.getElementById('model-scale-reset-btn');
+const modelBgBtn = document.getElementById('model-bg-btn');
+const layoutPresetBtns = document.querySelectorAll('.layout-preset-btn');
+
+const modelBgStorageKey = 'mint-model-background';
+const modelScaleStorageKey = 'mint-model-scale';
+const modelPositionLockStorageKey = 'mint-model-position-locked';
+const workspaceLayoutStorageKey = 'mint-workspace-layout';
+const modelBgClasses = ['model-bg-default', 'model-bg-clear', 'model-bg-grid', 'model-bg-stage'];
+const modelBgLabels = ['Default background', 'Clear background', 'Grid background', 'Stage background'];
+const workspaceLayoutClasses = ['layout-chat'];
+const workspaceLayoutPresets = ['companion', 'chat'];
+
+function setModelHidden(isHidden) {
+    if (!assistantWorkspace || !toggleModelBtn) return;
+    assistantWorkspace.classList.toggle('model-hidden', Boolean(isHidden));
+    toggleModelBtn.classList.toggle('active', Boolean(isHidden));
+    toggleModelBtn.setAttribute('aria-pressed', String(Boolean(isHidden)));
+    localStorage.setItem('mint-model-hidden', String(Boolean(isHidden)));
+
+    if (!isHidden && window.Live2DManager && Live2DManager.model) {
+        setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+            if (typeof Live2DManager.fitModelToMount === 'function') {
+                Live2DManager.fitModelToMount();
+            }
+        }, 450);
+    }
+}
+
+function setModelPositionLocked(isLocked) {
+    const locked = Boolean(isLocked);
+    localStorage.setItem(modelPositionLockStorageKey, String(locked));
+    modelLockBtn?.classList.toggle('is-active', locked);
+    modelLockBtn?.setAttribute('aria-pressed', String(locked));
+    modelLockBtn?.setAttribute('title', locked ? 'Unlock model position' : 'Lock model position');
+    if (window.Live2DManager) {
+        Live2DManager.setPointerTrackingEnabled(!locked);
+    }
+}
+
+function setModelBackground(index) {
+    if (!modelShell) return;
+    const normalized = ((Number(index) || 0) + modelBgClasses.length) % modelBgClasses.length;
+    modelBgClasses.forEach(className => modelShell.classList.remove(className));
+    if (normalized > 0) {
+        modelShell.classList.add(modelBgClasses[normalized]);
+    }
+    localStorage.setItem(modelBgStorageKey, String(normalized));
+    modelBgBtn?.setAttribute('title', modelBgLabels[normalized]);
+}
+
+function setModelScale(value) {
+    const next = Math.max(78, Math.min(128, Number(value) || 100));
+    localStorage.setItem(modelScaleStorageKey, String(next));
+    if (modelScaleSlider) modelScaleSlider.value = String(next);
+    if (modelScaleValue) modelScaleValue.textContent = `${(next / 100).toFixed(2)}x`;
+    if (window.Live2DManager) {
+        Live2DManager.setZoomMultiplier(next / 100);
+    }
+}
+
+function applyModelPanelControlState() {
+    setModelPositionLocked(localStorage.getItem(modelPositionLockStorageKey) === 'true');
+    setModelBackground(Number(localStorage.getItem(modelBgStorageKey) || 0));
+    setModelScale(Number(localStorage.getItem(modelScaleStorageKey) || 100));
+    setWorkspaceLayout(localStorage.getItem(workspaceLayoutStorageKey) || 'companion');
+}
+
+function setWorkspaceLayout(layout) {
+    if (!assistantWorkspace) return;
+    const normalized = workspaceLayoutPresets.includes(layout) ? layout : 'companion';
+    workspaceLayoutClasses.forEach(className => assistantWorkspace.classList.remove(className));
+    if (normalized !== 'companion') {
+        assistantWorkspace.classList.add(`layout-${normalized}`);
+    }
+    localStorage.setItem(workspaceLayoutStorageKey, normalized);
+    layoutPresetBtns.forEach((button) => {
+        const isActive = button.dataset.layoutPreset === normalized;
+        button.classList.toggle('is-active', isActive);
+        button.setAttribute('aria-pressed', String(isActive));
+    });
+}
 
 if (toggleModelBtn && assistantWorkspace) {
     toggleModelBtn.addEventListener('click', () => {
-        const isHidden = assistantWorkspace.classList.toggle('model-hidden');
-        toggleModelBtn.classList.toggle('active', isHidden);
-        
-        // Save preference to local storage
-        localStorage.setItem('mint-model-hidden', String(isHidden));
-        
-        // Refit model if shown
-        if (!isHidden && window.Live2DManager && Live2DManager.model) {
-            // Wait for transition
-            setTimeout(() => {
-                // Trigger a resize event to refit
-                window.dispatchEvent(new Event('resize'));
-            }, 450);
-        }
+        setModelHidden(!assistantWorkspace.classList.contains('model-hidden'));
     });
 
     // Restore preference on load
     const savedModelHidden = localStorage.getItem('mint-model-hidden');
     const savedHidden = savedModelHidden === null || savedModelHidden === 'true';
     if (savedHidden) {
-        assistantWorkspace.classList.add('model-hidden');
-        toggleModelBtn.classList.add('active');
+        setModelHidden(true);
     }
 }
 
+modelLockBtn?.addEventListener('click', () => {
+    setModelPositionLocked(localStorage.getItem(modelPositionLockStorageKey) !== 'true');
+});
+modelScaleSlider?.addEventListener('input', (event) => setModelScale(event.target.value));
+modelScaleResetBtn?.addEventListener('click', () => setModelScale(100));
+modelBgBtn?.addEventListener('click', () => {
+    const current = Number(localStorage.getItem(modelBgStorageKey) || 0);
+    setModelBackground(current + 1);
+});
+layoutPresetBtns.forEach((button) => {
+    button.addEventListener('click', () => setWorkspaceLayout(button.dataset.layoutPreset));
+});
+
+applyModelPanelControlState();
+
 // Cycle Shiroko's Expression
 const changeExpressionBtn = document.getElementById('change-expression-btn');
 if (changeExpressionBtn) {