editormate 1.0.2 → 1.0.7

package/extension/src/webview/webview_scripts.ts

@@ -1,698 +0,0 @@
-export function getWebviewClientScripts(channelDataJson: string, initialTab: string = 'dashboard', initialMessagesJson: string = '[]'): string {
-  return `
-    const vscode = acquireVsCodeApi();
-    const channels = ${channelDataJson};
-    let allRecentMessages = ${initialMessagesJson};
-    const savedState = vscode.getState() || {};
-    let currentMainTab = savedState.currentMainTab || '${initialTab}';
-    let currentPlatform = savedState.currentPlatform || 'telegram';
-    let isDiscordChannelOpen = false;
-    let selectedSlotIndex = 1;
-    let currentEditType = 'slot';
-    let currentEditTargetCmd = '';
-
-    // --- Tab Switching & Top Cog Persistence ---
-    function switchMainTab(tabName) {
-      currentMainTab = tabName;
-      vscode.setState({ ...(vscode.getState() || {}), currentMainTab: tabName });
-      vscode.postMessage({ command: 'setMainTab', tab: tabName });
-
-      const dashboardTab = document.getElementById('tab-content-dashboard');
-      const settingsTab = document.getElementById('tab-content-settings');
-      const topCog = document.getElementById('top-cog-btn');
-
-      if (tabName === 'settings') {
-        if (dashboardTab) dashboardTab.classList.remove('active');
-        if (settingsTab) settingsTab.classList.add('active');
-        if (topCog) {
-          topCog.classList.add('active');
-          topCog.innerText = '✕';
-          topCog.title = 'Close Settings (Back to Remote Deck)';
-        }
-      } else {
-        if (settingsTab) settingsTab.classList.remove('active');
-        if (dashboardTab) dashboardTab.classList.add('active');
-        if (topCog) {
-          topCog.classList.remove('active');
-          topCog.innerText = '⚙️';
-          topCog.title = 'Settings & Channels';
-        }
-      }
-    }
-
-    function toggleSettingsTab() {
-      if (currentMainTab === 'settings') {
-        switchMainTab('dashboard');
-      } else {
-        switchMainTab('settings');
-      }
-    }
-
-    // --- Collapsible Cards (Device, Guard, Commands, Screen, Settings) ---
-    function toggleCard(bodyId, arrowId) {
-      const body = document.getElementById(bodyId);
-      const arrow = document.getElementById(arrowId);
-      if (!body) return;
-      const isClosed = body.style.display === 'none';
-      body.style.display = isClosed ? 'block' : 'none';
-      if (arrow) {
-        arrow.classList.toggle('open', isClosed);
-      }
-      const collapseBtn = document.getElementById('collapse-btn-' + bodyId);
-      if (collapseBtn) {
-        collapseBtn.innerText = isClosed ? '▴ Collapse' : '▾ Expand';
-      }
-    }
-
-    // --- Dynamic Inline Alias Quick-Add & Chip Removal ---
-    function toggleInlineAliasDrawer(cmdCleanId) {
-      const drawer = document.getElementById('alias-drawer-' + cmdCleanId);
-      if (!drawer) return;
-      const isHidden = drawer.style.display === 'none' || !drawer.style.display;
-      drawer.style.display = isHidden ? 'block' : 'none';
-      if (isHidden) {
-        const inp = document.getElementById('input-alias-' + cmdCleanId);
-        if (inp) inp.focus();
-      }
-    }
-
-    function saveInlineAlias(targetCommand, cmdCleanId) {
-      const input = document.getElementById('input-alias-' + cmdCleanId);
-      if (!input) return;
-      const alias = input.value.trim().replace(/^\\//, '');
-      if (!alias) {
-        alert('Please specify an alias name (without slash)');
-        return;
-      }
-      vscode.postMessage({
-        command: 'addAlias',
-        alias: alias,
-        targetCommand: targetCommand
-      });
-      input.value = '';
-      toggleInlineAliasDrawer(cmdCleanId);
-    }
-
-    function removeAlias(alias) {
-      if (!alias) return;
-      vscode.postMessage({
-        command: 'deleteAlias',
-        alias: alias
-      });
-    }
-
-    let isEditMode = false;
-    let draggedCard = null;
-
-    // --- Edit Mode & Card Reordering ---
-    function toggleEditMode() {
-      isEditMode = !isEditMode;
-      const container = document.getElementById('main-container') || document.querySelector('.container');
-      const editBtn = document.getElementById('top-edit-btn');
-      if (container) {
-        container.classList.toggle('is-edit-mode', isEditMode);
-      }
-      if (editBtn) {
-        editBtn.classList.toggle('active', isEditMode);
-        editBtn.title = isEditMode ? 'Exit Edit Mode (Layout Locked)' : 'Edit Layout (Reorder Cards)';
-      }
-      updateDraggableCards();
-    }
-
-    function moveCardUp(cardId) {
-      const card = document.getElementById(cardId) || document.querySelector('[data-card-id="' + cardId + '"]');
-      if (!card || !card.parentElement) return;
-      const prev = card.previousElementSibling;
-      if (prev && prev.classList.contains('reorderable-card')) {
-        card.parentElement.insertBefore(card, prev);
-        saveCardOrder();
-      }
-    }
-
-    function moveCardDown(cardId) {
-      const card = document.getElementById(cardId) || document.querySelector('[data-card-id="' + cardId + '"]');
-      if (!card || !card.parentElement) return;
-      const next = card.nextElementSibling;
-      if (next && next.classList.contains('reorderable-card')) {
-        card.parentElement.insertBefore(card, next.nextSibling);
-        saveCardOrder();
-      }
-    }
-
-    function saveCardOrder() {
-      const dashContainer = document.getElementById('tab-content-dashboard');
-      const setContainer = document.getElementById('tab-content-settings');
-      const dashCards = dashContainer ? Array.from(dashContainer.querySelectorAll('.reorderable-card')).map(c => c.getAttribute('data-card-id')).filter(Boolean) : [];
-      const setCards = setContainer ? Array.from(setContainer.querySelectorAll('.reorderable-card')).map(c => c.getAttribute('data-card-id')).filter(Boolean) : [];
-
-      const current = vscode.getState() || {};
-      vscode.setState({
-        ...current,
-        dashboardCardOrder: dashCards,
-        settingsCardOrder: setCards
-      });
-    }
-
-    function restoreCardOrder() {
-      const state = vscode.getState() || {};
-      if (state.dashboardCardOrder && state.dashboardCardOrder.length > 0) {
-        const dashContainer = document.getElementById('tab-content-dashboard');
-        if (dashContainer) {
-          state.dashboardCardOrder.forEach(id => {
-            const card = dashContainer.querySelector('[data-card-id="' + id + '"]');
-            if (card) dashContainer.appendChild(card);
-          });
-        }
-      }
-      if (state.settingsCardOrder && state.settingsCardOrder.length > 0) {
-        const setContainer = document.getElementById('tab-content-settings');
-        if (setContainer) {
-          state.settingsCardOrder.forEach(id => {
-            const card = setContainer.querySelector('[data-card-id="' + id + '"]');
-            if (card) setContainer.appendChild(card);
-          });
-        }
-      }
-    }
-
-    function updateDraggableCards() {
-      const cards = document.querySelectorAll('.reorderable-card');
-      cards.forEach(card => {
-        card.setAttribute('draggable', isEditMode ? 'true' : 'false');
-      });
-    }
-
-    function initCardDragAndDrop() {
-      const cards = document.querySelectorAll('.reorderable-card');
-      cards.forEach(card => {
-        card.addEventListener('dragstart', (e) => {
-          if (!isEditMode) {
-            e.preventDefault();
-            return;
-          }
-          draggedCard = card;
-          e.dataTransfer.effectAllowed = 'move';
-          card.style.opacity = '0.5';
-        });
-
-        card.addEventListener('dragend', () => {
-          card.style.opacity = '1';
-          draggedCard = null;
-          saveCardOrder();
-        });
-
-        card.addEventListener('dragover', (e) => {
-          if (!isEditMode || !draggedCard || draggedCard === card) return;
-          if (draggedCard.parentElement !== card.parentElement) return;
-          e.preventDefault();
-          e.dataTransfer.dropEffect = 'move';
-
-          const bounding = card.getBoundingClientRect();
-          const offset = bounding.y + (bounding.height / 2);
-          if (e.clientY - offset > 0) {
-            card.parentElement.insertBefore(draggedCard, card.nextSibling);
-          } else {
-            card.parentElement.insertBefore(draggedCard, card);
-          }
-        });
-      });
-    }
-
-    // --- Companion Device Make Active & Unlink ---
-    function makeSelectedCompanionActive() {
-      const select = document.getElementById('select-active-companion');
-      const val = select ? select.value : '';
-      vscode.postMessage({ command: 'setThisIdeActive' });
-      if (val) {
-        vscode.postMessage({ command: 'setActiveCompanion', companion: val });
-      }
-    }
-
-    function unpairChannelDevice(platform) {
-      const select = document.getElementById('select-linked-' + platform) || document.getElementById('select-linked-device-' + platform);
-      const accountId = select ? select.value : '';
-      if (!accountId) {
-        return;
-      }
-      vscode.postMessage({
-        command: 'unpairAccount',
-        platform: platform,
-        userId: accountId
-      });
-    }
-
-    function onCompanionDeviceChange(val) {
-      const cur = vscode.getState() || {};
-      vscode.setState(Object.assign({}, cur, { selectedCompanion: val }));
-      vscode.postMessage({ command: 'setSelectedCompanion', companion: val });
-      renderChatStream();
-    }
-
-    // --- Mobile Prompt Routing Tooltip & Info ---
-    function toggleRoutingTip() {
-      const box = document.getElementById('routing-explainer-box');
-      if (box) {
-        const isHidden = box.style.display === 'none' || !box.style.display;
-        box.style.display = isHidden ? 'block' : 'none';
-      }
-    }
-
-    // --- Media Lightbox Modal (Audio, Video, Image) ---
-    function openMediaModal(mediaUrl, mediaType) {
-      enlargeMedia(mediaUrl, mediaType);
-    }
-
-    function enlargeMedia(mediaUrl, mediaType) {
-      const modal = document.getElementById('media-modal');
-      const container = document.getElementById('media-modal-container');
-      if (!modal || !container) return;
-
-      if (mediaType === 'audio') {
-        container.innerHTML = 
-          '<div style="background: var(--card-bg); border: 1px solid var(--border); padding: 18px 24px; border-radius: 10px; width: 340px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.6);">' +
-          '  <div style="font-size: 28px; margin-bottom: 8px;">🎙️</div>' +
-          '  <div style="font-size: 13px; font-weight: 700; color: var(--emerald); margin-bottom: 4px;">Companion Voice Note</div>' +
-          '  <div style="font-size: 9.5px; color: var(--text-muted); margin-bottom: 14px;">High-Fidelity Audio Playback</div>' +
-          '  <audio controls autoplay src="' + mediaUrl + '" style="width: 100%; outline: none; border-radius: 6px;"></audio>' +
-          '</div>';
-      } else if (mediaType === 'video') {
-        container.innerHTML = 
-          '<div style="background: var(--card-bg); border: 1px solid var(--border); padding: 12px; border-radius: 10px; max-width: 90vw; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.6);">' +
-          '  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">' +
-          '    <span style="font-size: 12px; font-weight: 700; color: var(--purple);">🎬 Companion Video Note</span>' +
-          '    <span style="font-size: 9.5px; color: var(--text-muted);">Preview</span>' +
-          '  </div>' +
-          '  <video controls autoplay src="' + mediaUrl + '" style="max-width: 100%; max-height: 70vh; border-radius: 6px;"></video>' +
-          '</div>';
-      } else {
-        container.innerHTML = 
-          '<div style="background: var(--card-bg); border: 1px solid var(--border); padding: 10px; border-radius: 10px; max-width: 90vw; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.6);">' +
-          '  <img src="' + mediaUrl + '" alt="Attachment Lightbox" style="max-width: 100%; max-height: 75vh; border-radius: 6px; object-fit: contain;" />' +
-          '</div>';
-      }
-      modal.style.display = 'flex';
-    }
-
-    function closeMediaModal() {
-      const modal = document.getElementById('media-modal');
-      const container = document.getElementById('media-modal-container');
-      if (container) container.innerHTML = '';
-      if (modal) modal.style.display = 'none';
-    }
-
-    window.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') closeMediaModal();
-    });
-
-    // --- Processing & Capture Engine Preferences (Optimistic Update) ---
-    function onUpdatePreference(key, value) {
-      // Optimistically update Screenshot Scope buttons in DOM immediately
-      if (key === 'screenshotScope') {
-        const buttons = document.querySelectorAll('.scope-selector-grid .scope-btn');
-        buttons.forEach(btn => {
-          const onclickAttr = btn.getAttribute('onclick') || '';
-          if (onclickAttr.includes("'" + value + "'")) {
-            btn.classList.add('active');
-          } else {
-            btn.classList.remove('active');
-          }
-        });
-      }
-
-      vscode.postMessage({
-        command: 'updatePreferences',
-        preferences: { [key]: value }
-      });
-    }
-
-    // --- Active Target IDE Selection (No Blasting Protocol) ---
-    function setThisIdeActive() {
-      vscode.postMessage({ command: 'setThisIdeActive' });
-    }
-
-    function onSelectActiveSession(sessionId) {
-      if (sessionId) {
-        vscode.postMessage({ command: 'setActiveSession', sessionId });
-      }
-    }
-
-    // --- Command & Slot Inspector / Inline Form ---
-    function selectItemForEdit(type, slotIndex, alias, command, desc) {
-      currentEditType = type;
-      currentEditTargetCmd = command || '';
-      selectedSlotIndex = slotIndex || 1;
-      const formTitle = document.getElementById('editor-form-title');
-      const formType = document.getElementById('editor-form-type');
-      const inputAlias = document.getElementById('input-alias');
-      const inputCmd = document.getElementById('input-target-cmd');
-      const btnSave = document.getElementById('btn-save-slot');
-
-      if (inputAlias) inputAlias.value = alias || '';
-      if (inputCmd) inputCmd.value = command || '';
-
-      if (type === 'builtin') {
-        if (formTitle) formTitle.innerText = '✏️ Assign / Edit Alias for ' + command;
-        if (formType) formType.innerText = 'Built-in Command';
-        if (btnSave) btnSave.innerText = '💾 Save Alias for ' + command;
-        if (inputCmd) inputCmd.readOnly = true;
-      } else {
-        if (formTitle) formTitle.innerText = '✏️ Edit Custom Slot ' + selectedSlotIndex;
-        if (formType) formType.innerText = 'Slot ' + selectedSlotIndex;
-        if (btnSave) btnSave.innerText = '💾 Save & Update Slot ' + selectedSlotIndex;
-        if (inputCmd) inputCmd.readOnly = false;
-      }
-
-      // Highlight selected row
-      document.querySelectorAll('.cmd-row-clickable').forEach(r => r.classList.remove('selected'));
-      if (window.event && window.event.currentTarget) {
-        window.event.currentTarget.classList.add('selected');
-      }
-    }
-
-    function saveSlotEdit() {
-      const inputAlias = document.getElementById('input-alias');
-      const inputCmd = document.getElementById('input-target-cmd');
-      const alias = inputAlias ? inputAlias.value.trim().replace(/^\\//, '') : '';
-      const command = inputCmd ? inputCmd.value.trim() : '';
-
-      if (!alias) {
-        alert('Please specify an alias name (without slash)');
-        return;
-      }
-
-      if (currentEditType === 'builtin') {
-        vscode.postMessage({
-          command: 'addAlias',
-          alias: alias,
-          targetCommand: currentEditTargetCmd || command
-        });
-      } else {
-        if (!command) {
-          alert('Please specify target IDE command');
-          return;
-        }
-        vscode.postMessage({
-          command: 'updateSlot',
-          slotIndex: selectedSlotIndex,
-          alias: alias,
-          targetCommand: command
-        });
-      }
-    }
-
-    function testRunActiveSlot() {
-      const inputAlias = document.getElementById('input-alias');
-      const inputCmd = document.getElementById('input-target-cmd');
-      const cmd = inputCmd ? inputCmd.value.trim() : '';
-      const alias = inputAlias ? inputAlias.value.trim() : '';
-
-      if (cmd.startsWith('/')) {
-        vscode.postMessage({ command: 'remoteCommand', cmd });
-      } else if (alias) {
-        vscode.postMessage({ command: 'runAlias', alias });
-      }
-    }
-
-    function refreshScreenPreview() {
-      const img = document.getElementById('screen-preview-img');
-      if (img) {
-        img.style.opacity = '0.5';
-      }
-      vscode.postMessage({ command: 'captureScreen' });
-    }
-
-    // --- Channel Switching & WhatsApp Dual-Number Setup ---
-    function switchChannel(platform) {
-      if (platform === 'slack') {
-        return; // Slack in development / coming soon
-      }
-      currentPlatform = platform;
-      vscode.setState({ ...(vscode.getState() || {}), currentPlatform: platform });
-      document.querySelectorAll('.channel-btn').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.platform === platform);
-      });
-
-      // Show the selected platform's linked devices wrapper and hide others
-      ['telegram', 'discord', 'whatsapp', 'slack'].forEach(p => {
-        const wrap = document.getElementById('wrapper-linked-' + p);
-        if (wrap) {
-          wrap.style.display = p === platform ? 'block' : 'none';
-        }
-      });
-
-      const standardBox = document.getElementById('standard-qr-box');
-      const whatsappBox = document.getElementById('whatsapp-qr-box');
-      const badgePill = document.getElementById('channel-status-badge');
-
-      if (platform === 'whatsapp') {
-        if (standardBox) standardBox.style.display = 'none';
-        if (whatsappBox) whatsappBox.style.display = 'block';
-        if (badgePill) {
-          badgePill.innerText = 'BAILEYS';
-          badgePill.className = 'badge badge-live';
-        }
-        reloadWhatsAppFrame();
-      } else {
-        if (whatsappBox) whatsappBox.style.display = 'none';
-        if (standardBox) standardBox.style.display = 'flex';
-
-        const data = channels[platform] || {};
-        const titleEl = document.getElementById('qr-title');
-        const subEl = document.getElementById('qr-sub');
-        const badgeEl = document.getElementById('qr-badge');
-        const qrEl = document.getElementById('qr-image');
-        const linkBtn = document.getElementById('btn-open-link');
-
-        if (titleEl) titleEl.innerText = data.title || 'Connect';
-        if (subEl) subEl.innerText = data.subtitle || '';
-        if (badgeEl) {
-          badgeEl.innerText = data.badge || 'READY';
-          badgeEl.className = 'badge ' + (data.badgeClass || 'badge-live');
-        }
-        if (badgePill) {
-          badgePill.innerText = data.badge || 'READY';
-          badgePill.className = 'badge ' + (data.badgeClass || 'badge-live');
-        }
-        if (qrEl) qrEl.src = data.qrUrl || '';
-        if (linkBtn) {
-          linkBtn.onclick = () => {
-            if (data.link) {
-              vscode.postMessage({ command: 'openUrl', url: data.link });
-            } else {
-              vscode.postMessage({ command: 'pair', platform });
-            }
-          };
-        }
-      }
-    }
-
-    let isWaConnected = false;
-
-    async function pollWhatsAppStatus() {
-      try {
-        const res = await fetch('http://127.0.0.1:4588/api/pair/status?platform=whatsapp', { cache: 'no-store' });
-        if (!res.ok) return;
-        const data = await res.json();
-        const img = document.getElementById('whatsapp-qr-image');
-        const badgePill = document.getElementById('badge-whatsapp') || document.getElementById('channel-badge');
-
-        if (data.connected) {
-          if (!isWaConnected) {
-            isWaConnected = true;
-            if (badgePill && currentPlatform === 'whatsapp') {
-              badgePill.innerText = 'CONNECTED';
-              badgePill.className = 'badge badge-live';
-            }
-            if (img) {
-              img.src = 'http://127.0.0.1:4588/api/pair/qr?platform=whatsapp&t=' + Date.now();
-            }
-          }
-        } else {
-          if (isWaConnected) {
-            isWaConnected = false;
-            if (badgePill && currentPlatform === 'whatsapp') {
-              badgePill.innerText = 'PAIRING';
-              badgePill.className = 'badge badge-amber';
-            }
-            if (img) {
-              img.src = 'http://127.0.0.1:4588/api/pair/qr?platform=whatsapp&t=' + Date.now();
-            }
-          }
-        }
-      } catch (e) {}
-    }
-
-    // Start background live polling so scanning automatically transitions without manual reload
-    setInterval(pollWhatsAppStatus, 2000);
-
-    function reloadWhatsAppFrame(reset = false) {
-      const resetParam = reset ? '&reset=true' : '';
-      const img = document.getElementById('whatsapp-qr-image');
-      if (img) {
-        img.src = 'http://127.0.0.1:4588/api/pair/qr?platform=whatsapp' + resetParam + '&t=' + Date.now();
-      }
-      const frame = document.getElementById('whatsapp-frame');
-      if (frame) {
-        frame.src = 'http://127.0.0.1:4588/api/whatsapp/qr?t=' + Date.now() + (reset ? '&reset=true' : '');
-      }
-      setTimeout(pollWhatsAppStatus, 500);
-    }
-
-    function refreshWhatsAppQr() {
-      isWaConnected = false;
-      reloadWhatsAppFrame(true);
-    }
-
-    function refreshCurrentQr() {
-      if (currentPlatform === 'whatsapp') {
-        reloadWhatsAppFrame();
-      } else {
-        const qrEl = document.getElementById('qr-image');
-        const data = channels[currentPlatform] || {};
-        if (qrEl && data.qrUrl) {
-          qrEl.src = data.qrUrl.split('?')[0] + '?platform=' + currentPlatform + '&t=' + Date.now();
-        }
-      }
-    }
-
-    function saveWaTargetNumber() {
-      const input = document.getElementById('input-wa-target-number');
-      const phone = input ? input.value.trim() : '';
-      vscode.postMessage({ command: 'setTargetWaNumber', phone });
-    }
-
-    // --- Collapsible Discord Community QR ---
-    function toggleDiscordChannelQr() {
-      isDiscordChannelOpen = !isDiscordChannelOpen;
-      const content = document.getElementById('discord-collapsible-content');
-      const arrow = document.getElementById('discord-arrow');
-
-      if (content) {
-        content.style.display = isDiscordChannelOpen ? 'block' : 'none';
-      }
-      if (arrow) {
-        arrow.classList.toggle('open', isDiscordChannelOpen);
-      }
-    }
-
-    // --- Licensing ---
-    function submitLicenseKey() {
-      const input = document.getElementById('input-license-key');
-      const key = input ? input.value.trim() : '';
-      if (!key) {
-        alert('Please enter a license key');
-        return;
-      }
-      vscode.postMessage({ command: 'enterLicense', licenseKey: key });
-    }
-
-    function deactivateLicense() {
-      vscode.postMessage({ command: 'deactivateLicense' });
-    }
-
-    function changeRouting(val) {
-      vscode.postMessage({ command: 'setChatRouting', routing: val });
-    }
-
-    function setGuardMode(mode) {
-      vscode.postMessage({ command: 'setGuardMode', mode });
-    }
-
-    function resolvePending(action) {
-      vscode.postMessage({ command: 'resolveExecution', action: action });
-    }
-
-    function getSelectedCompanionPlatform() {
-      const compSelect = document.getElementById('select-active-companion');
-      const val = compSelect ? compSelect.value : '';
-      if (!val || val === 'all') return '';
-      const colonIdx = val.indexOf(':');
-      return (colonIdx !== -1 ? val.substring(0, colonIdx) : val).toLowerCase();
-    }
-
-    function renderChatStream() {
-      const stream = document.getElementById('live-chat-stream');
-      if (!stream) return;
-      const platform = getSelectedCompanionPlatform();
-      const badge = document.getElementById('live-feed-badge');
-      if (badge) {
-        badge.textContent = platform ? platform.toUpperCase() : 'ALL CHANNELS';
-      }
-      let msgs = allRecentMessages || [];
-      if (platform) {
-        msgs = msgs.filter(function(m) {
-          const p = (m.platform || '').toLowerCase();
-          const s = (m.sender || '').toLowerCase();
-          return p === platform || (platform === 'whatsapp' && (p === 'whatsapp' || s.indexOf('whatsapp') !== -1));
-        });
-      }
-      if (!msgs || msgs.length === 0) {
-        stream.innerHTML = '<div style="color: var(--text-muted); font-size: 9.5px; text-align: center; padding: 8px 0;">' +
-          (platform ? 'No messages yet for ' + platform.toUpperCase() + '.' : 'No recent messages yet. Speak or type to EditorMate!') +
-          '</div>';
-        return;
-      }
-      stream.innerHTML = msgs.slice(-6).map(function(m) {
-        const isOut = m.sender === 'EditorMate';
-        let mediaTag = '';
-        if (m.mediaUrl) {
-          if (m.mediaType === 'audio' || m.mediaUrl.endsWith('.ogg') || m.mediaUrl.endsWith('.wav') || m.mediaUrl.endsWith('.mp3')) {
-            mediaTag = '<div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;"><button class="media-preview-btn audio" onclick="openMediaModal(\\\'' + m.mediaUrl + '\\\', \\\'audio\\\')">🎙️ Play Audio Note ▶</button><audio src="' + m.mediaUrl + '" controls style="width: 100%; height: 26px; border-radius: 4px;"></audio></div>';
-          } else if (m.mediaType === 'image' || m.mediaUrl.endsWith('.jpg') || m.mediaUrl.endsWith('.png') || m.mediaUrl.endsWith('.jpeg')) {
-            mediaTag = '<div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;"><button class="media-preview-btn" onclick="openMediaModal(\\\'' + m.mediaUrl + '\\\', \\\'image\\\')">🖼️ View Full Image 🔍</button><img src="' + m.mediaUrl + '" style="max-width: 100%; max-height: 120px; border-radius: 4px; cursor: pointer;" onclick="openMediaModal(\\\'' + m.mediaUrl + '\\\', \\\'image\\\')" /></div>';
-          } else if (m.mediaType === 'video' || m.mediaUrl.endsWith('.mp4') || m.mediaUrl.endsWith('.webm')) {
-            mediaTag = '<div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;"><button class="media-preview-btn video" onclick="openMediaModal(\\\'' + m.mediaUrl + '\\\', \\\'video\\\')">🎬 Watch Video Note ▶</button><video src="' + m.mediaUrl + '" controls style="max-width: 100%; max-height: 120px; border-radius: 4px;"></video></div>';
-          }
-        }
-        return (
-          '<div class="chat-bubble ' + (isOut ? 'outbound' : 'inbound') + '">' +
-          '  <div class="chat-meta"><span>' + (m.sender || (m.platform ? m.platform.toUpperCase() : 'Companion')) + '</span></div>' +
-          '  <div style="word-break: break-word;">' + m.text + '</div>' +
-          mediaTag +
-          '</div>'
-        );
-      }).join('');
-    }
-
-    // Listen to messages from extension
-    window.addEventListener('message', event => {
-      const msg = event.data;
-      if (msg.command === 'updateScreenFrame' && msg.dataUrl) {
-        const frame = document.getElementById('screen-preview-img');
-        if (frame) {
-          frame.src = msg.dataUrl;
-          frame.style.opacity = '1';
-        }
-      }
-      if (msg.command === 'updateFeed' && msg.messages) {
-        allRecentMessages = msg.messages;
-        renderChatStream();
-      }
-    });
-
-    function enableCompanionService() {
-      vscode.postMessage({ command: 'enableCompanionService' });
-    }
-
-    // Default initialization (restore saved tab, platform, card layout & drag-and-drop immediately)
-    restoreCardOrder();
-    initCardDragAndDrop();
-
-    const curState = vscode.getState() || {};
-    if (curState.selectedCompanion) {
-      const compSelect = document.getElementById('select-active-companion');
-      if (compSelect && compSelect.querySelector('option[value="' + curState.selectedCompanion + '"]')) {
-        compSelect.value = curState.selectedCompanion;
-      }
-    }
-
-    if (currentMainTab === 'settings') {
-      switchMainTab('settings');
-    } else {
-      switchMainTab('dashboard');
-    }
-    switchChannel(currentPlatform);
-    renderChatStream();
-    vscode.postMessage({ command: 'captureScreen' });
-  `;
-}