editormate 0.0.0-stage → 1.0.2

package/extension/src/webview/webview_scripts.ts

@@ -0,0 +1,698 @@
+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' });
+  `;
+}