editormate 1.0.2 → 1.0.5

package/extension/dist/webview/webview_html.js

@@ -1,830 +0,0 @@
-"use strict";
-/**
- * EditorMate Webview HTML Template
- * Renders the multi-tab layout with TokenShield aesthetic:
- * - Top header with settings cog for fast tab switching
- * - Remote Deck (Main Page): Device connection bar, text sending/not sending status, Execution Guard, and commands dropdown
- * - Settings & Channels: Connection pills, live WhatsApp iframe, collapsible Discord channel QR, and hardware preferences.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWebviewHtmlBody = getWebviewHtmlBody;
-const ide_detector_1 = require("../ide_detector");
-function getWebviewHtmlBody(data) {
-    // All 10 Built-in Commands with Live Removable Alias Chips & Inline Quick-Add Drawer
-    const builtinCommandsHtml = (data.builtinCommands || [])
-        .map((cmd) => {
-        const cleanCmdId = cmd.id.replace(/^\//, '');
-        const existingAliases = (data.aliases || []).filter((a) => a.command.toLowerCase() === cmd.id.toLowerCase() ||
-            a.command.toLowerCase() === cleanCmdId.toLowerCase());
-        const aliasBadges = existingAliases.length > 0
-            ? existingAliases
-                .map((a) => `<span class="cmd-badge-alias" title="Click to remove alias /${a.alias}">/${a.alias} <span style="opacity: 0.7; margin-left: 2px; cursor: pointer;" onclick="event.stopPropagation(); removeAlias('${a.alias}')">✕</span></span>`)
-                .join(' ')
-            : `<span style="font-size: 8px; color: var(--text-muted); opacity: 0.6;">+ alias</span>`;
-        return `
-      <div style="display: flex; flex-direction: column;">
-        <div class="cmd-row-clickable" onclick="toggleInlineAliasDrawer('${cleanCmdId}')">
-          <div class="cmd-meta-col">
-            <span class="cmd-badge-key">${cmd.id}</span>
-            <div style="display: flex; gap: 2px; flex-wrap: wrap;">${aliasBadges}</div>
-            <span class="cmd-desc-text" title="${cmd.description}">${cmd.description}</span>
-          </div>
-          <div class="cmd-action-btns">
-            <button class="mini-btn" title="Assign Alias for ${cmd.id}" onclick="event.stopPropagation(); toggleInlineAliasDrawer('${cleanCmdId}')">✏️</button>
-            <button class="mini-btn" title="Test Run Command ${cmd.id}" onclick="event.stopPropagation(); vscode.postMessage({command: 'remoteCommand', cmd: '${cmd.id}'})">▶</button>
-          </div>
-        </div>
-
-        <!-- Inline Quick-Add Alias Drawer -->
-        <div id="alias-drawer-${cleanCmdId}" class="alias-inline-drawer" style="display: none;">
-          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px;">
-            <span style="font-size: 8.5px; font-weight: 700; color: var(--accent);">Alias for ${cmd.id} (e.g. s, snap, ref):</span>
-            <span style="font-size: 8px; color: var(--text-muted); cursor: pointer;" onclick="toggleInlineAliasDrawer('${cleanCmdId}')">✕ Close</span>
-          </div>
-          <div style="display: flex; gap: 3px;">
-            <input id="input-alias-${cleanCmdId}" type="text" class="form-input" placeholder="Alias name" style="font-size: 9.5px; height: 22px; padding: 2px 4px;" onkeydown="if(event.key==='Enter') saveInlineAlias('${cmd.id}', '${cleanCmdId}')" />
-            <button class="btn btn-primary" style="height: 22px; padding: 0 6px; font-size: 9px; width: 48px;" onclick="saveInlineAlias('${cmd.id}', '${cleanCmdId}')">💾 Add</button>
-          </div>
-        </div>
-      </div>
-    `;
-    })
-        .join('\n');
-    // 3 Custom IDE slots
-    const customSlotsHtml = data.customSlots
-        .map((slot) => `
-      <div class="cmd-row-clickable" onclick="selectItemForEdit('slot', ${slot.slotIndex}, '${slot.alias}', '${slot.command}', '${slot.label}')">
-        <div class="cmd-meta-col">
-          <span class="cmd-badge-key">/${slot.alias}</span>
-          <span style="font-size: 8px; background: rgba(129, 140, 248, 0.15); color: #818cf8; padding: 1px 3px; border-radius: 3px; font-weight: 600;">S${slot.slotIndex}</span>
-          <span class="cmd-arrow-target" title="${slot.command}">➔ ${slot.command}</span>
-        </div>
-        <div class="cmd-action-btns">
-          <button class="mini-btn" title="Edit Slot" onclick="event.stopPropagation(); selectItemForEdit('slot', ${slot.slotIndex}, '${slot.alias}', '${slot.command}', '${slot.label}')">✏️</button>
-          <button class="mini-btn" title="Test Execute Slot" onclick="event.stopPropagation(); vscode.postMessage({command: 'runAlias', alias: '${slot.alias}'})">▶</button>
-        </div>
-      </div>
-    `)
-        .join('\n');
-    // Linked Companion Devices across all platforms (Only real authenticated accounts)
-    const linkedAccounts = (data.linkedAccounts || []).filter((a) => ['whatsapp', 'telegram', 'discord', 'slack', 'matrix'].includes(a.platform) &&
-        (0, ide_detector_1.isRealPairedAccount)(a));
-    // Real paired devices only - NEVER treat arbitrary unverified phone numbers as paired!
-    const hasLinked = linkedAccounts.length > 0;
-    const selectedCompanion = data.selectedCompanion || '';
-    const selectedPlatform = selectedCompanion && selectedCompanion !== 'all'
-        ? (selectedCompanion.includes(':') ? selectedCompanion.split(':')[0].toLowerCase() : selectedCompanion.toLowerCase())
-        : '';
-    const companionOptionsHtml = linkedAccounts.length > 0
-        ? [
-            ...(linkedAccounts.length > 1
-                ? [`<option value="all" ${!selectedCompanion || selectedCompanion === 'all' ? 'selected' : ''}>🌐 All Paired Devices (${linkedAccounts.length})</option>`]
-                : []),
-            ...linkedAccounts.map((a) => {
-                const icon = a.platform === 'whatsapp' ? '💬' : a.platform === 'telegram' ? '✈️' : a.platform === 'discord' ? '🎮' : '⚡';
-                const display = a.userHandle || (a.platform === 'whatsapp' ? `+${a.userId}` : a.userId);
-                const val = `${a.platform}:${a.userId}`;
-                const isSelected = val === selectedCompanion || (linkedAccounts.length === 1);
-                return `<option value="${val}" ${isSelected ? 'selected' : ''}>${icon} ${display} (${a.platform.toUpperCase()})</option>`;
-            })
-        ].join('\n')
-        : `<option value="" disabled selected>No paired devices found</option>`;
-    // Live Chat Stream Bubbles with Playable Audio & Media Lightbox (Filtered by active companion device)
-    const rawChatMessages = data.recentChatMessages || [];
-    const filteredChatMessages = selectedPlatform
-        ? rawChatMessages.filter((m) => {
-            const p = (m.platform || '').toLowerCase();
-            const s = (m.sender || '').toLowerCase();
-            return p === selectedPlatform || (selectedPlatform === 'whatsapp' && (p === 'whatsapp' || s.includes('whatsapp')));
-        })
-        : rawChatMessages;
-    const chatMessagesHtml = filteredChatMessages.length > 0
-        ? filteredChatMessages
-            .slice(-6)
-            .map((m) => {
-            let mediaHtml = '';
-            if (m.mediaUrl) {
-                const url = m.mediaUrl;
-                if (m.mediaType === 'audio' || url.endsWith('.ogg') || url.endsWith('.wav') || url.endsWith('.mp3')) {
-                    mediaHtml = `
-                  <div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;">
-                    <button class="media-preview-btn audio" onclick="openMediaModal('${url}', 'audio')" title="Play audio note in popup">🎙️ Play Audio Note ▶</button>
-                    <audio controls src="${url}" preload="none" style="width: 100%; height: 26px; border-radius: 4px;"></audio>
-                  </div>`;
-                }
-                else if (m.mediaType === 'image' || url.endsWith('.jpg') || url.endsWith('.png') || url.endsWith('.jpeg')) {
-                    mediaHtml = `
-                  <div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;">
-                    <button class="media-preview-btn" onclick="openMediaModal('${url}', 'image')" title="View enlarged image">🖼️ View Full Image 🔍</button>
-                    <img src="${url}" alt="Attachment" style="max-width: 100%; max-height: 140px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer;" onclick="openMediaModal('${url}', 'image')" />
-                  </div>`;
-                }
-                else if (m.mediaType === 'video' || url.endsWith('.mp4') || url.endsWith('.webm')) {
-                    mediaHtml = `
-                  <div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;">
-                    <button class="media-preview-btn video" onclick="openMediaModal('${url}', 'video')" title="Watch video note in popup">🎬 Watch Video Note ▶</button>
-                    <video controls src="${url}" style="max-width: 100%; max-height: 140px; border-radius: 4px; border: 1px solid var(--border);"></video>
-                  </div>`;
-                }
-            }
-            return `
-              <div class="chat-bubble ${m.sender === 'EditorMate' ? 'outbound' : 'inbound'}">
-                <div class="chat-meta">
-                  <span>${m.sender || (m.platform ? m.platform.toUpperCase() : 'Companion')}</span>
-                  <span style="opacity: 0.7;">${new Date(m.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
-                </div>
-                <div style="word-break: break-word;">${m.text}</div>
-                ${mediaHtml}
-              </div>
-            `;
-        })
-            .join('\n')
-        : `<div style="color: var(--text-muted); font-size: 9.5px; text-align: center; padding: 8px 0;">No messages yet for ${selectedPlatform ? selectedPlatform.toUpperCase() : 'all companions'}. Speak or type to EditorMate!</div>`;
-    // Target IDE Session Options (Real dynamically detected IDEs, no hardcoded names)
-    const sessionOptions = data.connectedSessions && data.connectedSessions.length > 0
-        ? data.connectedSessions
-            .map((s) => `<option value="${s.id}" ${s.id === data.activeSessionId ? 'selected' : ''}>${s.id === data.mySessionId ? '★ [THIS IDE] ' : ''}${s.name} (${s.ide})</option>`)
-            .join('\n')
-        : `<option value="${data.mySessionId}" selected>★ [THIS IDE] ${data.workspaceName} (${data.realIde || 'IDE'})</option>`;
-    // Trial progress width calculation
-    const trialDays = Math.max(0, Math.min(data.trialDaysLeft, data.trialMaxDays || 7));
-    const trialPct = Math.round((trialDays / (data.trialMaxDays || 7)) * 100);
-    const isSettingsTab = data.activeMainTab === 'settings';
-    return `
-    <div id="main-container" class="container">
-      <!-- 1. Top Brand & Action Bar -->
-      <div class="brand-bar">
-        <div class="brand-group">
-          <span class="brand-icon">${data.iconEmoji}</span>
-          <div class="brand-meta">
-            <div class="brand-title">EditorMate</div>
-            <div class="brand-sub">${data.workspaceName}</div>
-          </div>
-          <span class="badge ${data.isActivated ? 'badge-live' : 'badge-amber'}">
-            <span class="pulse-dot"></span>${data.isActivated ? 'PRO' : 'TRIAL'}
-          </span>
-        </div>
-        <div class="top-actions">
-          <button id="top-edit-btn" class="top-btn" onclick="toggleEditMode()" title="Edit Layout (Reorder Cards)">✏️</button>
-          <button id="top-cog-btn" class="top-btn ${isSettingsTab ? 'active' : ''}" onclick="toggleSettingsTab()" title="${isSettingsTab ? 'Close Settings (Back to Remote Deck)' : 'Settings & Channels'}">${isSettingsTab ? '✕' : '⚙️'}</button>
-        </div>
-      </div>
-
-      <!-- ======================================================== -->
-      <!-- TAB 1: REMOTE DECK (MAIN DASHBOARD)                      -->
-      <!-- ======================================================== -->
-      <div id="tab-content-dashboard" class="tab-content ${isSettingsTab ? '' : 'active'}">
-
-        <!-- A. Companion Device Card (With Dropdown & Inline Make Active & Unpair Buttons) -->
-        <div id="card-device" class="card reorderable-card" data-card-id="card-device">
-          <div class="collapsible-header" onclick="toggleCard('card-body-device', 'arrow-device')">
-            <div style="display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;">
-              <span class="section-title">📱 Companion Device</span>
-              <span class="badge ${hasLinked ? 'badge-live' : 'badge-amber'}">
-                <span class="pulse-dot"></span>${hasLinked ? 'PAIRED' : 'NOT PAIRED'}
-              </span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-device')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-device')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-            <span id="arrow-device" class="collapse-arrow open">▼</span>
-          </div>
-
-          <div id="card-body-device" class="collapsible-body">
-            <!-- Companion Device Selector with Equal-Sized Dropdown and Action Buttons -->
-            <div style="margin-bottom: 7px;">
-              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px;">
-                <label class="field-label" style="margin-bottom: 0;">Connected Companion Device / Channel:</label>
-                ${!hasLinked ? `<span style="font-size: 8px; color: var(--accent); cursor: pointer;" onclick="switchMainTab('settings')">+ Connect Channel</span>` : ''}
-              </div>
-              <div style="display: flex; gap: 4px; align-items: center; width: 100%;">
-                <select id="select-active-companion" class="select-field" style="flex: 1; height: 26px; font-size: 9.5px; min-width: 0;" onchange="onCompanionDeviceChange(this.value)">
-                  ${companionOptionsHtml}
-                </select>
-                <button class="btn btn-primary" style="height: 26px; width: auto; padding: 0 8px; font-size: 9px; flex-shrink: 0;" onclick="makeSelectedCompanionActive()" title="Set this device active for chatting">
-                  🎯 Make Active
-                </button>
-              </div>
-            </div>
-
-            <!-- Active Target IDE Selector (Prevents blasting to all IDEs) -->
-            <div class="target-ide-banner" style="margin-bottom: 6px;">
-              <div style="display: flex; flex-direction: column; overflow: hidden; min-width: 0; flex: 1;">
-                <span style="font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Target Chat IDE Session</span>
-                <span style="font-size: 9.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                  ${data.isActiveChatTarget ? '🎯 Active (Targeted)' : '⏸️ Standing By'}
-                </span>
-              </div>
-              <div style="flex-shrink: 0;">
-                ${!data.isActiveChatTarget ? `
-                  <button class="mini-btn" style="background: var(--accent); color: #000; font-weight: 700; padding: 2px 6px;" onclick="setThisIdeActive()">
-                    🎯 Make Active
-                  </button>
-                ` : `
-                  <span class="target-ide-badge">ACTIVE</span>
-                `}
-              </div>
-            </div>
-
-            <!-- Target Session Switcher Dropdown (Real active IDE sessions only) -->
-            <div style="margin-bottom: 6px;">
-              <select class="select-field" onchange="onSelectActiveSession(this.value)">
-                ${sessionOptions}
-              </select>
-            </div>
-
-            <!-- Mobile Prompt Routing Selection with Tooltip & Info Drawer -->
-            <div style="margin-bottom: 6px;">
-              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px;">
-                <label class="field-label" style="margin-bottom: 0;" title="Select how incoming mobile prompts are dispatched in this IDE">Mobile Prompt Routing:</label>
-                <span class="info-tip-btn" onclick="toggleRoutingTip()" title="Click to view guide on routing modes">ℹ️ Info</span>
-              </div>
-              <div id="routing-explainer-box" class="routing-explainer" style="display: none; padding: 6px 8px; margin-bottom: 6px;">
-                <div>📌 <b>Direct Pin:</b> Pins incoming mobile prompt directly into editor context as active draft without auto-running.</div>
-                <div style="margin-top: 3px;">🚀 <b>Auto-Submit Turn:</b> Instantly sends prompt to AI agent as an active conversational turn upon arrival.</div>
-                <div style="margin-top: 3px;">⚡ <b>Quick Chat Input:</b> Populates IDE Quick Chat bar, letting you review or edit before hitting Enter.</div>
-                <div style="margin-top: 3px;">🔔 <b>Toast (Manual):</b> Displays a toast popup in bottom-right with an 'Insert / Run' button.</div>
-              </div>
-              <select class="select-field" onchange="changeRouting(this.value)" title="Choose how mobile messages are routed into your IDE">
-                <option value="autoPin" ${data.currentRouting === 'autoPin' ? 'selected' : ''} title="Pins incoming mobile prompt directly into editor context as active draft without auto-running">📌 Direct Pin (Zero-Click)</option>
-                <option value="autoSubmit" ${data.currentRouting === 'autoSubmit' ? 'selected' : ''} title="Instantly sends prompt to AI agent as an active conversational turn upon arrival">🚀 Auto-Submit Turn</option>
-                <option value="quickChat" ${data.currentRouting === 'quickChat' ? 'selected' : ''} title="Populates IDE Quick Chat bar, letting you review or edit before hitting Enter">⚡ Quick Chat Input</option>
-                <option value="manualToast" ${data.currentRouting === 'manualToast' ? 'selected' : ''} title="Displays a toast popup in bottom-right with an 'Insert / Run' button">🔔 Toast (Manual)</option>
-              </select>
-            </div>
-
-            <!-- Cockpit Metadata Grid -->
-            <div class="cockpit-grid">
-              <div class="grid-row">
-                <span class="grid-label">📱 Device</span>
-                <span class="grid-val" title="${data.deviceName}">${hasLinked && data.isDevicePaired ? data.deviceName : '<span style="color: var(--amber);">Not Paired</span>'}</span>
-              </div>
-              <div class="grid-row">
-                <span class="grid-label">💬 Chat Line</span>
-                <span class="grid-val" style="color: ${hasLinked ? 'var(--emerald)' : 'var(--text-muted)'};" title="${hasLinked ? (linkedAccounts[0]?.userHandle ? `${linkedAccounts[0].userHandle} (${linkedAccounts[0].platform.toUpperCase()})` : (linkedAccounts[0]?.platform === 'whatsapp' ? '+' + linkedAccounts[0].userId : linkedAccounts[0]?.userId || 'Paired Channel')) : 'Not Connected'}">
-                  ${hasLinked ? (linkedAccounts[0]?.userHandle ? `${linkedAccounts[0].userHandle} (${linkedAccounts[0].platform.toUpperCase()})` : (linkedAccounts[0]?.platform === 'whatsapp' ? '+' + linkedAccounts[0].userId : linkedAccounts[0]?.userId || 'Paired Channel')) : 'Not Connected'}
-                </span>
-              </div>
-              <div class="grid-row">
-                <span class="grid-label">💺 Seat</span>
-                <span class="grid-val font-mono">${data.deviceSeat}</span>
-              </div>
-              <div class="grid-row">
-                <span class="grid-label">⚡ Bridge</span>
-                <span class="grid-val" style="color: var(--emerald);">127.0.0.1:4588</span>
-              </div>
-            </div>
-
-            <!-- Live Chat / Feed Column with Connected Device -->
-            <div class="chat-card" style="margin-top: 6px;">
-              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px;">
-                <span style="font-weight: 600; font-size: 9.5px; color: var(--accent);">💬 Live Companion Feed</span>
-                <span id="live-feed-badge" class="badge badge-purple" style="font-size: 8px; text-transform: uppercase;">${selectedPlatform ? selectedPlatform : 'All Channels'}</span>
-              </div>
-              <div id="live-chat-stream" class="chat-bubble-stream">
-                ${chatMessagesHtml}
-              </div>
-            </div>
-
-            <!-- Privacy Meter -->
-            <div class="privacy-box" style="margin-top: 6px;">
-              <div class="privacy-row">
-                <span class="privacy-tag sending">📤 Sending</span>
-                <span class="privacy-text" title="Voice notes & clean prompts to selected IDE">Voice & prompts to active IDE</span>
-              </div>
-              <div class="privacy-row" style="margin-top: 3px;">
-                <span class="privacy-tag not-sending">🔒 NOT Sending</span>
-                <span class="privacy-text" title="0 code telemetry • 0 cloud logs • Local socket encryption">0 telemetry • 0 cloud logs • Local socket encryption</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- B. Collapsible Execution Guard Card -->
-        <div id="card-guard" class="card reorderable-card" data-card-id="card-guard">
-          <div class="collapsible-header" onclick="toggleCard('card-body-guard', 'arrow-guard')">
-            <div style="display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1;">
-              <span class="section-title">🛡️ Execution Guard</span>
-              <span class="badge ${data.approvalMode === 'allow_all' ? 'badge-live' : data.approvalMode === 'deny_all' ? 'badge-amber' : 'badge-purple'}">
-                ${data.approvalMode.toUpperCase().replace('_', ' ')}
-              </span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-guard')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-guard')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-            <span id="arrow-guard" class="collapse-arrow open">▼</span>
-          </div>
-
-          <div id="card-body-guard" class="collapsible-body">
-            ${data.pendingExecutions && data.pendingExecutions.length > 0 ? `
-              <div id="pending-execution-alert" style="background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 6px; padding: 7px 8px; margin-bottom: 7px;">
-                <div style="font-size: 8.5px; font-weight: 700; color: var(--amber); margin-bottom: 2px;">
-                  ⚠️ EXECUTION PERMISSION REQUEST
-                </div>
-                <div style="font-size: 9px; color: var(--text); font-family: var(--font-mono); word-break: break-all; margin-bottom: 5px;">
-                  ${data.pendingExecutions[0].command} ${data.pendingExecutions[0].alias ? `(${data.pendingExecutions[0].alias})` : ''}
-                </div>
-                <div style="display: flex; gap: 4px;">
-                  <button class="btn btn-allow" style="height: 24px; font-size: 9px; flex: 1;" onclick="resolvePending('allow')" title="Approve and execute this command now">⚡ Allow</button>
-                  <button class="btn btn-allow" style="height: 24px; font-size: 9px; flex: 1;" onclick="resolvePending('allow_all')" title="Whitelist and execute without asking again">⚡ Allow All</button>
-                  <button class="btn btn-deny" style="height: 24px; font-size: 9px; flex: 1;" onclick="resolvePending('deny')" title="Reject and block this execution">🚫 Deny</button>
-                </div>
-              </div>
-            ` : ''}
-            <div class="guard-btn-row">
-              <button class="btn btn-allow ${data.approvalMode === 'allow_all' ? 'active-guard' : ''}" onclick="setGuardMode('allow_all')" title="Auto-approve all remote commands">⚡ Allow</button>
-              <button class="btn btn-amber ${data.approvalMode === 'prompt' ? 'active-guard' : ''}" onclick="setGuardMode('prompt')" title="Prompt on each unapproved execution">❓ Prompt</button>
-              <button class="btn btn-deny ${data.approvalMode === 'deny_all' ? 'active-guard' : ''}" onclick="setGuardMode('deny_all')" title="Block all unapproved executions">🚫 Deny</button>
-            </div>
-            <div style="font-size: 8.5px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; margin-top: 5px;">
-              <span>Whitelist: ${data.whitelistCount} approved</span>
-              <span style="cursor: pointer; color: var(--accent); text-decoration: underline;" onclick="vscode.postMessage({command: 'clearWhitelist'})">Clear</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- C. Supported Commands & Custom Aliases (Collapsible Accordion) -->
-        <div id="card-commands" class="card reorderable-card" data-card-id="card-commands">
-          <div class="collapsible-header" onclick="toggleCard('card-body-commands', 'arrow-commands')">
-            <div style="display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; overflow: hidden;">
-              <span class="section-title">⌨️ Commands</span>
-              <span class="badge badge-purple">10 BUILT-IN • 3 SLOTS</span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-commands')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-commands')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-            <span id="arrow-commands" class="collapse-arrow">▼</span>
-          </div>
-
-          <div id="card-body-commands" class="collapsible-body" style="display: none;">
-            <!-- Group 1: 10 Built-in Commands with Aliases -->
-            <div class="cmd-group-title">
-              <span>🤖 10 Built-in Commands (Click row to assign alias)</span>
-              <span style="font-size: 8px; color: var(--text-muted); text-transform: none;">Click to test / edit</span>
-            </div>
-            <div class="cmd-list-col">
-              ${builtinCommandsHtml}
-            </div>
-
-            <!-- Group 2: 3 Assignable IDE Command Slots -->
-            <div class="cmd-group-title" style="margin-top: 8px;">
-              <span>⌨️ 3 Assignable Custom Slots</span>
-              <span style="font-size: 8px; color: var(--text-muted); text-transform: none;">Click row to edit</span>
-            </div>
-            <div class="cmd-list-col">
-              ${customSlotsHtml}
-            </div>
-
-            <!-- Inspector & Inline Editor Form (Populates when any command or slot is clicked) -->
-            <div id="command-editor-form" class="editor-form-box">
-              <div style="display: flex; align-items: center; justify-content: space-between;">
-                <span id="editor-form-title" style="font-size: 10px; font-weight: 700; color: var(--accent);">✏️ Edit Custom Slot 1</span>
-                <span id="editor-form-type" style="font-size: 8.5px; color: var(--text-muted);">Slot 1</span>
-              </div>
-              <div>
-                <label class="field-label">Shortcut Alias Name (without slash):</label>
-                <input id="input-alias" type="text" class="form-input" placeholder="e.g. s, snap, fmt, save, term" value="fmt" />
-              </div>
-              <div>
-                <label class="field-label">Target IDE / Shell Command:</label>
-                <input id="input-target-cmd" type="text" class="form-input" placeholder="e.g. editor.action.formatDocument or /snap" value="editor.action.formatDocument" />
-              </div>
-              <div style="display: flex; gap: 4px; margin-top: 2px;">
-                <button id="btn-save-slot" class="btn btn-primary" style="flex: 1;" onclick="saveSlotEdit()">
-                  💾 Save & Update
-                </button>
-                <button class="btn" style="width: 70px;" onclick="testRunActiveSlot()">
-                  ▶ Test
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- D. Live Screen Preview Card (Collapsible) -->
-        <div id="card-screen" class="card reorderable-card" data-card-id="card-screen">
-          <div class="collapsible-header" onclick="toggleCard('card-body-screen', 'arrow-screen')">
-            <div style="display: flex; align-items: center; gap: 6px;">
-              <span class="section-title">🖥️ Live Screen Preview</span>
-              <span class="badge badge-live"><span class="pulse-dot"></span>LIVE FRAME</span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-screen')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-screen')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-            <button class="collapse-toggle-btn" title="Toggle Preview" onclick="event.stopPropagation(); toggleCard('card-body-screen', 'arrow-screen')">
-              <span>Preview</span> <span id="arrow-screen" class="collapse-arrow open">▼</span>
-            </button>
-          </div>
-
-          <div id="card-body-screen" class="collapsible-body">
-            ${data.isDaemonOnline === false ? `
-              <div class="daemon-offline-banner" style="background: rgba(255,165,0,0.12); border: 1px solid rgba(255,165,0,0.35); border-radius: 6px; padding: 10px; margin-bottom: 8px; text-align: center;">
-                <div style="font-weight: 700; font-size: 11px; color: #ffb84d; margin-bottom: 4px;">⚡ Companion Service Paused</div>
-                <div style="font-size: 10px; opacity: 0.85; margin-bottom: 8px; line-height: 1.35;">
-                  Enable the local companion bridge (port 4588) to stream live IDE window frames.
-                </div>
-                <button onclick="enableCompanionService()" class="btn btn-primary" style="width: 100%; font-size: 10px; padding: 5px 8px; font-weight: 600;">
-                  🚀 Start Companion Service
-                </button>
-              </div>
-            ` : ''}
-            <div style="position: relative; background: #000; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; min-height: 120px; display: flex; align-items: center; justify-content: center;">
-              <img id="screen-preview-img" src="" alt="IDE Screen Preview" style="width: 100%; height: auto; max-height: 220px; object-fit: contain; display: block;" />
-            </div>
-            <div style="display: flex; gap: 4px; margin-top: 6px;">
-              <button class="btn btn-primary" style="flex: 1;" onclick="refreshScreenPreview()">📸 Refresh Frame</button>
-              <button class="btn" style="width: 80px;" onclick="vscode.postMessage({command: 'remoteTerminal'})">💻 Shell</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- E. Remote Quick Tools -->
-        <div id="card-quick-tools" class="card reorderable-card" data-card-id="card-quick-tools" style="padding: 6px 8px;">
-          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;">
-            <span style="font-weight: 700; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px;">⚡ Quick Remote Tools</span>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-quick-tools')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-quick-tools')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-          </div>
-          <div class="action-grid">
-            <button class="btn" onclick="vscode.postMessage({command: 'captureScreen'})">📸 Screen Snap</button>
-            <button class="btn" onclick="vscode.postMessage({command: 'remoteTerminal'})">💻 Shell Exec</button>
-            <button class="btn" onclick="vscode.postMessage({command: 'remoteCommand', cmd: '/status'})">💬 Status Check</button>
-            <button class="btn" onclick="vscode.postMessage({command: 'openUrl', url: 'http://127.0.0.1:4588/api/report/pdf'})">📄 PDF Report</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- ======================================================== -->
-      <!-- TAB 2: SETTINGS & CHANNELS                               -->
-      <!-- ======================================================== -->
-      <div id="tab-content-settings" class="tab-content ${isSettingsTab ? 'active' : ''}">
-
-        <!-- A. Connect Channels & Pairing (TOP of Settings, right below EditorMate header) -->
-        <div id="card-channels" class="card reorderable-card" data-card-id="card-channels">
-          <div class="header-row" style="margin-bottom: 6px;">
-            <div style="display: flex; align-items: center; gap: 6px;">
-              <span class="section-title">📱 Connect Channels & Pairing</span>
-              <span id="channel-status-badge" class="badge ${hasLinked ? 'badge-live' : 'badge-amber'}">${hasLinked ? 'PAIRED' : 'READY'}</span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-channels')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-channels')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-          </div>
-          ${(() => {
-        const isTgPaired = linkedAccounts.some(a => a.platform === 'telegram');
-        const isDcPaired = linkedAccounts.some(a => a.platform === 'discord');
-        const isWaPaired = linkedAccounts.some(a => a.platform === 'whatsapp');
-        const isSlPaired = linkedAccounts.some(a => a.platform === 'slack');
-        return `
-              <div class="channel-pills" style="margin-bottom: 7px;">
-                <button class="channel-btn channel-tg active" data-platform="telegram" onclick="switchChannel('telegram')">
-                  <span>✈️</span><span>Telegram</span>
-                </button>
-                <button class="channel-btn channel-dc" data-platform="discord" onclick="switchChannel('discord')">
-                  <span>🎮</span><span>Discord</span>
-                </button>
-                <button class="channel-btn channel-wa" data-platform="whatsapp" onclick="switchChannel('whatsapp')">
-                  <span>💬</span><span>WhatsApp</span>
-                </button>
-                <button class="channel-btn channel-sl disabled" data-platform="slack" disabled title="Coming Soon" style="opacity: 0.55; cursor: not-allowed;" onclick="return false;">
-                  <span>⚡</span><span>Slack</span>
-                  <span style="font-size: 7.5px; background: rgba(255,255,255,0.08); padding: 1px 4px; border-radius: 3px; margin-left: 2px; color: var(--text-muted); font-weight: 600;">Coming Soon</span>
-                </button>
-              </div>
-            `;
-    })()}
-
-          <!-- Dynamic Per-Platform Linked Device Selector with Inline [ 🔌 Unlink ] Button -->
-          ${(() => {
-        const getPlatformLinkedHtml = (platform, label) => {
-            const list = linkedAccounts.filter(a => a.platform === platform);
-            if (list.length === 0) {
-                return `
-                  <div id="wrapper-linked-${platform}" class="platform-linked-device-wrapper" style="display: ${platform === 'telegram' ? 'block' : 'none'}; margin-bottom: 6px;">
-                    <div style="font-size: 8.5px; color: var(--text-muted); padding: 5px 7px; background: rgba(255,255,255,0.02); border-radius: 4px; border: 1px dashed var(--border);">
-                      No ${label} companion currently linked. Follow steps below to link.
-                    </div>
-                  </div>
-                `;
-            }
-            return `
-                <div id="wrapper-linked-${platform}" class="platform-linked-device-wrapper" style="display: ${platform === 'telegram' ? 'block' : 'none'}; margin-bottom: 7px;">
-                  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px;">
-                    <span style="font-size: 8.5px; font-weight: 700; color: var(--emerald);">Linked ${label} Companion(s):</span>
-                    <span class="badge badge-live" style="font-size: 8px; padding: 0 4px;">PAIRED</span>
-                  </div>
-                  <div style="display: flex; gap: 4px; align-items: center;">
-                    <select id="select-linked-${platform}" class="select-field" style="flex: 1; height: 26px; font-size: 9.5px;">
-                      ${list.map(a => `<option value="${a.userId}">${a.userHandle || a.userId}</option>`).join('')}
-                    </select>
-                    <button class="btn btn-deny" style="height: 26px; padding: 0 8px; font-size: 9px; flex-shrink: 0;" onclick="unpairChannelDevice('${platform}')" title="Unlink this ${label} device">
-                      🔌 Unlink
-                    </button>
-                  </div>
-                </div>
-              `;
-        };
-        return `
-              ${getPlatformLinkedHtml('telegram', 'Telegram')}
-              ${getPlatformLinkedHtml('discord', 'Discord')}
-              ${getPlatformLinkedHtml('whatsapp', 'WhatsApp')}
-              ${getPlatformLinkedHtml('slack', 'Slack')}
-            `;
-    })()}
-
-          <!-- Standard QR Box (For Telegram, Discord, Slack) -->
-          <div id="standard-qr-box" class="qr-box">
-            ${data.isDaemonOnline === false ? `
-              <div class="daemon-offline-banner" style="background: rgba(255,165,0,0.12); border: 1px solid rgba(255,165,0,0.35); border-radius: 6px; padding: 10px; margin-bottom: 8px; text-align: center; width: 100%;">
-                <div style="font-weight: 700; font-size: 11px; color: #ffb84d; margin-bottom: 4px;">⚡ Companion Service Paused</div>
-                <div style="font-size: 10px; opacity: 0.85; margin-bottom: 8px; line-height: 1.35;">
-                  Enable local service (port 4588) to render Telegram/WhatsApp pairing QR codes.
-                </div>
-                <button onclick="enableCompanionService()" class="btn btn-primary" style="width: 100%; font-size: 10px; padding: 5px 8px; font-weight: 600;">
-                  🚀 Start Companion Service
-                </button>
-              </div>
-            ` : ''}
-            <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
-              <span id="qr-title" style="font-weight: 600; font-size: 11px;">Telegram Bot</span>
-              <span id="qr-badge" class="badge badge-live">LIVE</span>
-            </div>
-            <div id="qr-sub" style="font-size: 9.5px; color: var(--text-muted);">Scan QR to link with @EditorMate_bot</div>
-            <img id="qr-image" class="qr-img" src="" alt="Pairing QR Code" />
-            <div style="display: flex; gap: 4px; width: 100%;">
-              <button id="btn-open-link" class="btn btn-primary" style="flex: 1;">🔗 Open Link</button>
-              <button class="btn" style="width: 34px;" onclick="refreshCurrentQr()" title="Refresh QR">🔄</button>
-            </div>
-          </div>
-
-          <!-- WhatsApp Multi-Device with Direct Phone Setup + QR Image -->
-          <div id="whatsapp-qr-box" class="qr-box" style="display: none; padding: 8px;">
-            <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 5px;">
-              <span style="font-weight: 700; font-size: 11px; color: #25d366;">💬 WhatsApp Direct Chat Line</span>
-              <span class="badge badge-live">BAILEYS</span>
-            </div>
-
-            <!-- WhatsApp Direct Phone Number Entry -->
-            <div style="width: 100%; margin-bottom: 6px; text-align: left;">
-              <div style="font-size: 9px; color: var(--text-muted); line-height: 1.3; margin-bottom: 4px;">
-                Enter your WhatsApp number with country code to receive instant greetings & chat directly from your phone:
-              </div>
-              <div style="display: flex; gap: 4px; align-items: center;">
-                <input id="input-wa-target-number" type="text" class="form-input" placeholder="+91 9876543210" value="${data.targetUserWaNumber ? '+' + data.targetUserWaNumber.replace(/^\+/, '') : ''}" style="font-size: 10px; height: 26px; flex: 1;" />
-                <button class="btn btn-primary" style="width: 80px; height: 26px; font-size: 9.5px; flex-shrink: 0;" onclick="saveWaTargetNumber()">💾 Save</button>
-              </div>
-            </div>
-
-            <!-- Dual-Mode Explainer Box -->
-            <div style="background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(37, 211, 102, 0.3); border-radius: 5px; padding: 6px; text-align: left; width: 100%; font-size: 9px; line-height: 1.35; color: var(--text);">
-              <div style="color: #25d366; font-weight: 700; margin-bottom: 2px;">Pairing Instructions:</div>
-              <div>• Open WhatsApp on your phone ➔ <b>Settings</b> ➔ <b>Linked Devices</b>.</div>
-              <div style="margin-top: 2px;">• Tap <b>Link a Device</b> and point camera at the live QR code:</div>
-            </div>
-
-            <!-- Direct Image QR Render -->
-            <div style="background: #fff; padding: 6px; border-radius: 8px; display: inline-block; margin: 10px auto;">
-              <img
-                id="whatsapp-qr-image"
-                src="http://127.0.0.1:4588/api/pair/qr?platform=whatsapp"
-                alt="WhatsApp Multi-Device QR"
-                style="width: 160px; height: 160px; display: block;"
-              />
-            </div>
-            <div style="display: flex; gap: 6px; width: 100%;">
-              <button class="btn btn-primary" style="flex: 1;" onclick="refreshWhatsAppQr()">🔄 Refresh QR Code</button>
-              <button class="btn" style="flex: 1;" onclick="vscode.postMessage({command: 'openUrl', url: 'http://127.0.0.1:4588/api/whatsapp/qr'})">🔗 Open in Browser</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- B. TokenShield-Style Commercial License & 7-Day Trial Card (Below Channels) -->
-        <div id="card-license" class="card reorderable-card" data-card-id="card-license">
-          <div class="header-row" style="margin-bottom: 8px;">
-            <div style="display: flex; align-items: center; gap: 6px;">
-              <span class="section-title">🛡️ License & Commercial Entitlement</span>
-              <span class="badge ${data.isActivated ? 'badge-live' : 'badge-amber'}">
-                ${data.isActivated ? 'PRO (LIFETIME)' : '7-DAY TRIAL'}
-              </span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-license')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-license')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-          </div>
-
-          ${data.isActivated ? `
-            <!-- Pro Active Banner -->
-            <div class="trial-box" style="border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.05);">
-              <div style="display: flex; align-items: center; justify-content: space-between;">
-                <span style="font-weight: 700; color: var(--emerald); font-size: 11px;">✨ EditorMate Pro Lifetime Active</span>
-                <span class="badge badge-live">VERIFIED</span>
-              </div>
-              <div style="font-size: 9.5px; color: var(--text-muted);">
-                Device Seat: <span class="font-mono">${data.deviceSeat}</span>
-              </div>
-              <div style="font-size: 9.5px; color: var(--text-muted);">
-                License Key: <span class="font-mono">${data.licenseKeyMasked || 'EM-PRO-••••••••'}</span>
-              </div>
-              <div style="margin-top: 4px;">
-                <button class="btn btn-deny" onclick="deactivateLicense()">
-                  🗑️ Remove Key From This Device (Unbind Seat)
-                </button>
-              </div>
-            </div>
-          ` : `
-            <!-- Evaluation & License Activation (Clean & Compact) -->
-            <div class="trial-box">
-              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;">
-                <span style="font-weight: 600; font-size: 10px; color: var(--text);">Evaluation: <span style="color: var(--amber); font-weight: 700;">${trialDays}/7 days left</span></span>
-                <span style="font-size: 8.5px; color: var(--text-muted); font-family: monospace;">Seat: ${data.deviceSeat}</span>
-              </div>
-              <div class="trial-track" style="margin-bottom: 7px;">
-                <div class="trial-fill" style="width: ${trialPct}%;"></div>
-              </div>
-              <div style="display: flex; gap: 4px; align-items: center;">
-                <input id="input-license-key" type="text" class="form-input" placeholder="Enter Lifetime Pro Key (EM-PRO-...)" style="font-size: 9.5px; height: 26px;" />
-                <button class="btn btn-primary" style="width: 75px; height: 26px; font-size: 9.5px;" onclick="submitLicenseKey()">Activate</button>
-              </div>
-              <div style="margin-top: 5px; display: flex; justify-content: flex-end;">
-                <a href="#" style="font-size: 9px; color: var(--accent); text-decoration: none; font-weight: 600;" onclick="vscode.postMessage({command: 'openUrl', url: 'https://praveenojha.com/editormate#pricing'})">👉 Upgrade to Lifetime Pro ($5) ↗</a>
-              </div>
-            </div>
-          `}
-        </div>
-
-        <!-- C. Processing & Capture Engine Preferences (Below License) -->
-        <div id="card-preferences" class="card reorderable-card" data-card-id="card-preferences">
-          <div class="header-row" style="margin-bottom: 8px;">
-            <div style="display: flex; align-items: center; gap: 6px;">
-              <span class="section-title">⚙️ Processing & Capture Engine Preferences</span>
-              <span class="badge badge-live">ACTIVE</span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-preferences')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-preferences')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-          </div>
-
-          <div class="settings-switch-list">
-            <!-- 1. Audio to Whisper STT -->
-            <div class="switch-row">
-              <div class="switch-meta">
-                <span class="switch-title">🎙️ Audio to Whisper Text</span>
-                <span class="switch-desc">Transcribe voice notes & audio clips using Whisper VAD</span>
-              </div>
-              <label class="toggle-switch">
-                <input type="checkbox" id="pref-whisper" ${data.preferences?.sttWhisperEnabled !== false ? 'checked' : ''} onchange="onUpdatePreference('sttWhisperEnabled', this.checked)" />
-                <span class="slider"></span>
-              </label>
-            </div>
-
-            <!-- 2. LLM Filtering of Whisper Text -->
-            <div class="switch-row">
-              <div class="switch-meta">
-                <span class="switch-title">✨ LLM Filtering of Whisper Text</span>
-                <span class="switch-desc">Filter filler words ('um', 'ah', 'like'), stuttering, and hesitations with local LLM</span>
-              </div>
-              <label class="toggle-switch">
-                <input type="checkbox" id="pref-llm-filtering" ${data.preferences?.sttLlmFiltering !== false ? 'checked' : ''} onchange="onUpdatePreference('sttLlmFiltering', this.checked)" />
-                <span class="slider"></span>
-              </label>
-            </div>
-
-            <!-- 3. Video to Text -->
-            <div class="switch-row">
-              <div class="switch-meta">
-                <span class="switch-title">🎬 Video to Text</span>
-                <span class="switch-desc">Extract audio track from video notes and transcribe directly to agent prompt</span>
-              </div>
-              <label class="toggle-switch">
-                <input type="checkbox" id="pref-video-stt" ${data.preferences?.videoToTextEnabled !== false ? 'checked' : ''} onchange="onUpdatePreference('videoToTextEnabled', this.checked)" />
-                <span class="slider"></span>
-              </label>
-            </div>
-
-            <!-- 4. Attachment Attached As-Is -->
-            <div class="switch-row">
-              <div class="switch-meta">
-                <span class="switch-title">📎 Attachment Attached As-Is</span>
-                <span class="switch-desc">Pass documents and files directly into workspace without alteration</span>
-              </div>
-              <label class="toggle-switch">
-                <input type="checkbox" id="pref-raw-attachments" ${data.preferences?.rawAttachmentsPassthrough !== false ? 'checked' : ''} onchange="onUpdatePreference('rawAttachmentsPassthrough', this.checked)" />
-                <span class="slider"></span>
-              </label>
-            </div>
-
-            <!-- 5. Screenshot Scope (3 Levels) -->
-            <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);">
-              <div class="switch-meta" style="margin-bottom: 6px;">
-                <span class="switch-title">📸 Screenshot Capture Scope (3 Levels)</span>
-                <span class="switch-desc">Choose snapshot boundary when capturing via /snap or Remote Deck</span>
-              </div>
-              <div class="scope-selector-grid">
-                <button class="scope-btn ${data.preferences?.screenshotScope === 'ide' || !data.preferences?.screenshotScope ? 'active' : ''}" onclick="onUpdatePreference('screenshotScope', 'ide')">
-                  <span style="font-size: 14px;">🎯</span>
-                  <span style="font-weight: 600;">Only IDE</span>
-                  <span style="font-size: 8px; opacity: 0.7;">Active Editor</span>
-                </button>
-                <button class="scope-btn ${data.preferences?.screenshotScope === 'window' ? 'active' : ''}" onclick="onUpdatePreference('screenshotScope', 'window')">
-                  <span style="font-size: 14px;">🪟</span>
-                  <span style="font-weight: 600;">Active Window</span>
-                  <span style="font-size: 8px; opacity: 0.7;">Foreground App</span>
-                </button>
-                <button class="scope-btn ${data.preferences?.screenshotScope === 'screen' ? 'active' : ''}" onclick="onUpdatePreference('screenshotScope', 'screen')">
-                  <span style="font-size: 14px;">🖥️</span>
-                  <span style="font-weight: 600;">Whole Screen</span>
-                  <span style="font-size: 8px; opacity: 0.7;">Full Desktop</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- D. Collapsible Discord Community & Channel QR Card -->
-        <div id="card-discord" class="card reorderable-card" data-card-id="card-discord">
-          <div class="collapsible-header" onclick="toggleDiscordChannelQr()">
-            <div style="display: flex; align-items: center; gap: 6px;">
-              <span style="font-size: 14px;">💬</span>
-              <span style="font-weight: 600; font-size: 11px; color: #818cf8;">Join Discord Community & Channel</span>
-            </div>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-discord')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-discord')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-            <span id="discord-arrow" class="collapse-arrow">▼</span>
-          </div>
-          <div id="discord-collapsible-content" class="collapsible-body" style="display: none;">
-            <div style="text-align: center; padding: 6px 0;">
-              <div style="font-size: 10px; color: var(--text-muted); margin-bottom: 8px;">
-                Scan with your phone to join the official EditorMate Discord Channel:
-              </div>
-              <div style="background: #ffffff; padding: 8px; border-radius: 8px; display: inline-block; box-shadow: 0 4px 14px rgba(0,0,0,0.4);">
-                <img
-                  src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https%3A%2F%2Fdiscord.gg%2FXEJhZ4UaY"
-                  alt="Discord Channel QR"
-                  style="width: 120px; height: 120px; display: block; border-radius: 4px;"
-                />
-              </div>
-              <div style="margin-top: 8px;">
-                <button class="btn btn-primary" onclick="vscode.postMessage({command: 'openUrl', url: 'https://discord.gg/XEJhZ4UaY'})">
-                  🔗 Open Discord Channel (discord.gg/XEJhZ4UaY)
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- E. Hardware & Customization Preferences -->
-        <div id="card-hardware" class="card reorderable-card" data-card-id="card-hardware">
-          <div class="header-row" style="margin-bottom: 6px;">
-            <span class="section-title">⚙️ Preferences & Hardware</span>
-            <div class="card-reorder-bar">
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardUp('card-hardware')" title="Move card up">▲</button>
-              <button class="reorder-btn" onclick="event.stopPropagation(); moveCardDown('card-hardware')" title="Move card down">▼</button>
-              <span class="drag-handle" title="Drag to reorder card">⠿</span>
-            </div>
-          </div>
-          <div style="display: flex; flex-direction: column; gap: 6px;">
-            <button class="btn" onclick="vscode.postMessage({command: 'renameDevice'})">📱 Rename Client Device</button>
-            <button class="btn" onclick="vscode.postMessage({command: 'changeIcon'})">🎨 Change Brand Icon</button>
-            <button class="btn" onclick="vscode.postMessage({command: 'viewLogs'})">📋 View Companion Daemon Logs</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Footer Copyright Banner -->
-      <div class="footer-copyright">
-        <div style="font-size: 8.5px; color: var(--text-muted); opacity: 0.85;">
-          ⚖️ © <strong>Praveen Ojha</strong>
-        </div>
-        <div style="font-size: 7.5px; color: var(--text-muted); opacity: 0.7; margin-top: 2px;">
-          Not to reverse engineer, decompile, or copy.
-        </div>
-      </div>
-
-      <!-- Media Lightbox Modal -->
-      <div id="media-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; padding: 16px;" onclick="closeMediaModal()">
-        <div id="media-modal-container" style="max-width: 95%; max-height: 90%; display: flex; align-items: center; justify-content: center;" onclick="event.stopPropagation()"></div>
-        <button style="position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.2); border: none; color: #fff; font-size: 16px; border-radius: 50%; width: 28px; height: 28px; cursor: pointer;" onclick="closeMediaModal()">✕</button>
-      </div>
-    </div>
-  `;
-}