content.js

// content.js
(() => {
  const TRACE = Boolean(window.__CMD_BAR_TRACE);
  const now = () => (typeof performance !== 'undefined' && typeof performance.now === 'function' ? performance.now() : Date.now());
  const trace = (...args) => {
    if (!TRACE) return;
    console.log('[CmdBarTrace]', ...args);
  };

  const scriptStart = now();
  console.log('Content script loading...');
  if (window.__cmdBarInjected) {
    console.log('Content script already injected, skipping');
    return;
  }
  window.__cmdBarInjected = true;
  console.log('Content script injected successfully');

// Detect when running inside the extension popup so we can render the command bar there.
const extensionOrigin = chrome?.runtime?.id ? `chrome-extension://${chrome.runtime.id}` : '';
const isExtensionPage = window.location?.origin === extensionOrigin;
const isPopupContext = Boolean(window.__CMD_BAR_POPUP) || (isExtensionPage && window.location?.pathname?.endsWith('/popup.html'));
trace('loaded', { isPopupContext, isExtensionPage, href: window.location?.href, t: now() - scriptStart });

// Constants
const CONSTANTS = {
  CONFIRM_TIMEOUT: 2000,
  MAX_SUBTITLE_LENGTH: 60,
  FALLBACK_ICON: chrome.runtime.getURL('link_18dp_E3E3E3.svg'),
  BOOKMARK_ICON: chrome.runtime.getURL('bookmark_18dp_E3E3E3.svg'),
  HISTORY_ICON: chrome.runtime.getURL('history_18dp_E3E3E3.svg'),
  DEFAULT_STATUS_MSG: '↑ / ↓ navigate • ⌫ close/delete • c copy link'
};

// Message service to avoid DRY violations
const messageService = {
  send: (type, data = {}) => chrome.runtime.sendMessage({ type, ...data }),
  sendWithCallback: (type, data = {}, callback) => chrome.runtime.sendMessage({ type, ...data }, callback),
  recent: (callback) => messageService.sendWithCallback('RECENT', {}, callback),
  search: (query, callback) => messageService.sendWithCallback('SEARCH', { query }, callback),
  open: (item) => messageService.send('OPEN', { item }),
  delete: (item) => messageService.send('DELETE', { item })
};

// UI State Manager for better organization
const uiState = {
  overlay: null,
  input: null,
  listEl: null,
  statusBar: null,
  pinnedTabsEl: null,
  pinnedTabs: [],
  items: [],
  selectedIdx: -1,
  idleTimer: null,
  deleteConfirm: false,
  lastConfirmIdx: -1,
  confirmTimer: null,
  
  reset() {
    this.items = [];
    this.selectedIdx = -1;
    this.deleteConfirm = false;
    this.lastConfirmIdx = -1;
    this.clearTimers();
  },
  
  clearTimers() {
    if (this.idleTimer) {
      clearTimeout(this.idleTimer);
      this.idleTimer = null;
    }
    if (this.confirmTimer) {
      clearTimeout(this.confirmTimer);
      this.confirmTimer = null;
    }
  },
  
  setItems(newItems) {
        this.items = this.sortItems(newItems || []);
    this.selectedIdx = -1;
  },
  
    sortItems(items) {
    const typeOrder = {
      'tab': 1,
      'bookmark': 2,
      'history': 3
    };

    return items.sort((a, b) => {
      const aType = a.type || a.source;
      const bType = b.type || b.source;
      
      const aOrder = typeOrder[aType] || 4;
      const bOrder = typeOrder[bType] || 4;

      if (aOrder !== bOrder) {
        return aOrder - bOrder;
      }

      // Get last visited time for each item
      const getLastVisited = (item) => {
        if (item.lastAccessed) return item.lastAccessed; // tabs
        if (item.lastVisitTime) return item.lastVisitTime; // history
        if (item.dateAdded) return item.dateAdded; // bookmarks fallback
        return 0; // fallback for items without time data
      };
      
      const aTime = getLastVisited(a);
      const bTime = getLastVisited(b);
      
      
      // Sort in descending order (most recent first)
      return bTime - aTime;
    });
  }
};

// Legacy global variables for backward compatibility
let overlay, input, listEl, statusBar, items, selectedIdx, idleTimer;
let deleteConfirm, lastConfirmIdx, confirmTimer;
let stylesInjected = false;

function createOverlay() {
    const tCreateStart = now();
    // Update state references
    overlay = uiState.overlay;
    input = uiState.input;
    listEl = uiState.listEl;
    statusBar = uiState.statusBar;
    items = uiState.items;
    selectedIdx = uiState.selectedIdx;
    deleteConfirm = uiState.deleteConfirm;
    lastConfirmIdx = uiState.lastConfirmIdx;
    confirmTimer = uiState.confirmTimer;
    idleTimer = uiState.idleTimer;

    // Load CSS into the document once
    if (!stylesInjected) {
      if (isPopupContext) {
        // popup.html links shadow-overlay.css directly for faster paint
        stylesInjected = true;
      } else {
        const styleElement = document.createElement('style');
        styleElement.id = 'prd-stv-cmd-bar-styles';
        const tCssStart = now();
        fetch(chrome.runtime.getURL('shadow-overlay.css'))
          .then(response => response.text())
          .then(css => {
            styleElement.textContent = css;
            document.head.appendChild(styleElement);
            stylesInjected = true;
            trace('css_loaded', { ms: now() - tCssStart });
          })
          .catch(err => {
            console.error('Failed to load shadow-overlay.css:', err);
            // Fallback: use inline styles if CSS file fails to load
            styleElement.textContent = `
              #prd-stv-cmd-bar-overlay {
                position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
                backdrop-filter: blur(8px); background: rgba(0, 0, 0, 0.3);
                display: flex; align-items: center; justify-content: center;
                z-index: 2147483647;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
              }
            `;
            document.head.appendChild(styleElement);
            stylesInjected = true;
          });
      }
    }

    // Create overlay inside shadow DOM
    uiState.overlay = document.createElement('div');
    uiState.overlay.id = 'prd-stv-cmd-bar-overlay';

    const container = document.createElement('div');
    container.id = 'prd-stv-cmd-bar-container';

    uiState.input = document.createElement('input');
    uiState.input.id = 'prd-stv-cmd-bar-input';
    uiState.input.type = 'text';
    uiState.input.placeholder = 'Type to search tabs, bookmarks, history...';

    uiState.listEl = document.createElement('div');
    uiState.listEl.id = 'prd-stv-cmd-bar-list';

    uiState.statusBar = document.createElement('div');
    uiState.statusBar.id = 'prd-stv-status-bar';

    // Create tab counter container
    const tabCounterContainer = document.createElement('div');
    tabCounterContainer.style.display = 'flex';
    tabCounterContainer.style.alignItems = 'center';
    tabCounterContainer.style.marginRight = '8px';

    // Create tab counter element
    const tabCounter = document.createElement('span');
    tabCounter.id = 'prd-stv-tab-counter';
    tabCounter.textContent = '0';

    tabCounterContainer.appendChild(tabCounter);
    tabCounterContainer.appendChild(document.createTextNode(' tabs'));

    // Create status message element
    const statusMessageEl = document.createElement('span');
    statusMessageEl.id = 'prd-stv-status-message';
    statusMessageEl.textContent = CONSTANTS.DEFAULT_STATUS_MSG;

    uiState.statusBar.appendChild(tabCounterContainer);
    uiState.statusBar.appendChild(statusMessageEl);
    uiState.statusBar.style.display = 'flex';
    uiState.statusBar.style.alignItems = 'center';

    // Update legacy references
    overlay = uiState.overlay;
    input = uiState.input;
    listEl = uiState.listEl;
    statusBar = uiState.statusBar;

    // Create pinned tabs container (same as sidepanel)
    uiState.pinnedTabsEl = document.createElement('div');
    uiState.pinnedTabsEl.id = 'pinned-tabs-container';
    uiState.pinnedTabsEl.className = 'prd-stv-pinned-tabs';
    uiState.pinnedTabsEl.style.cssText = 'display:none;';

    container.appendChild(uiState.pinnedTabsEl);
    container.appendChild(uiState.input);
    container.appendChild(uiState.listEl);
    container.appendChild(uiState.statusBar);
    uiState.overlay.appendChild(container);

    // Close overlay when user clicks outside the container
    uiState.overlay.addEventListener('mousedown', (ev) => {
      if (ev.target === uiState.overlay) {
        destroyOverlay();
      }
    });
    // Prevent clicks inside the container from bubbling to overlay handler
    container.addEventListener('mousedown', (ev) => ev.stopPropagation());

    // Append overlay directly to document body
    document.body.appendChild(uiState.overlay);
    trace('overlay_appended', { ms: now() - tCreateStart });

    // listeners
    uiState.input.addEventListener('keydown', onKeyDown);
    document.addEventListener('keydown', onGlobalKeyDown);
    document.addEventListener('keyup', onGlobalKeyUp);
    uiState.input.addEventListener('input', onInput);
    uiState.input.focus();

    // Initial data (tabs + pinned tabs + count) in one roundtrip to reduce cold-start overhead.
    const statusMessage = document.getElementById('prd-stv-status-message');
    if (statusMessage) statusMessage.textContent = 'Loading…';

    const tInitStart = now();
    chrome.runtime.sendMessage({ type: 'GET_INITIAL_STATE' }, (response) => {
      const err = chrome.runtime.lastError?.message;
      trace('initial_state', { ms: now() - tInitStart, ok: response?.success, err });

      if (err || !response || response.success === false) {
        // Fallback to legacy init paths if the background doesn't support GET_INITIAL_STATE.
        loadPinnedTabs();
        messageService.recent((res) => {
          uiState.setItems(res);
          items = uiState.items;
          selectedIdx = uiState.selectedIdx;
          renderList();
          if (statusMessage) statusMessage.textContent = CONSTANTS.DEFAULT_STATUS_MSG;
        });
        updateTabCount();
        return;
      }

      if (Array.isArray(response.pinnedTabs)) {
        renderPinnedTabs(response.pinnedTabs);
      }
      if (typeof response.tabCount === 'number') {
        applyTabCount(response.tabCount);
      }
      if (Array.isArray(response.recent)) {
        uiState.setItems(response.recent);
        items = uiState.items;
        selectedIdx = uiState.selectedIdx;
        renderList();
      }

      if (statusMessage) statusMessage.textContent = CONSTANTS.DEFAULT_STATUS_MSG;
    });
  }

  function destroyOverlay() {
    cancelAutoOpen();
    document.removeEventListener('keydown', onGlobalKeyDown);
    document.removeEventListener('keyup', onGlobalKeyUp);
    uiState.overlay = null;
    overlay = null;
    if (isPopupContext) {
      window.close();
    }
  }

function toggleOverlay() {
    // First invocation opens the overlay
    if (!overlay) {
      createOverlay();
      return;
    }
    // Overlay already visible -> move selection down and schedule auto-open
    if (items.length === 0) return;
    input.blur();
    selectedIdx = (selectedIdx + 1) % items.length;
    renderList();
  }

function onGlobalKeyDown(e) {
    if (e.target === input) return; // already handled by onKeyDown
    const handled = handleKey(e);
    if (handled) {
      e.stopPropagation();
      e.preventDefault();
    }
  }

  function onGlobalKeyUp(e) {
    if (e.target === input) return;
    handleKeyUp(e);
  }

  function onKeyDown(e) {
    // If the input is focused and the key is a printable character, allow normal input behavior
    if (e.target === input) {
      // For printable keys, we allow default behavior but prevent propagation to the page
      const isPrintableKey = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
      
      if (isPrintableKey) {
        // Allow the input to receive the character
        e.stopPropagation();
        return;
      }
      
      // For special keys (arrows, enter, etc.) when input is focused, handle them specially
      const handled = handleKey(e);
      if (handled) {
        e.stopPropagation();
      }
      return;
    }
    
    // For keys when input is not focused, handle normally
    const handled = handleKey(e);
    if (handled) {
      e.stopPropagation();
    }
  }

  // Key handler functions - Split for better SRP compliance
  const keyHandlers = {
    escape: () => {
      destroyOverlay();
    },
    
    navigation: (e) => {
      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return false;
      
      e.preventDefault();
      hideDeleteConfirm();
      removeProgressBars();

      const dir = e.key === 'ArrowDown' ? 1 : -1;
      
      // Handle boundary cases - focus input when at edges
      if (e.key === 'ArrowUp' && selectedIdx === 0) {
        selectedIdx = -1;
        renderList();
        input.focus();
        return true;
      }
      
      if (e.key === 'ArrowDown' && selectedIdx === items.length - 1) {
        selectedIdx = -1;
        renderList();
        input.focus();
        return true;
      }
      
      // Handle navigation from input (selectedIdx === -1)
      if (selectedIdx === -1) {
        selectedIdx = e.key === 'ArrowDown' ? 0 : items.length - 1;
      } else {
        selectedIdx = (selectedIdx + dir + items.length) % items.length;
      }
      
      renderList();
      cancelAutoOpen();

      // Blur input so backspace won't edit text - use requestAnimationFrame to ensure proper timing
      requestAnimationFrame(() => {
        if (document.activeElement === input) {
          input.blur();
        }
      });
      return true;
    },
    
    metaNavigation: (e) => {
      if (!e.metaKey) return false;
      
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        input.focus();
        return true;
      }
      
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        if (items.length) {
          selectedIdx = items.length - 1;
          renderList();
          cancelAutoOpen();
          requestAnimationFrame(() => {
            if (document.activeElement === input) {
              input.blur();
            }
          });
        }
        return true;
      }
      
      return false;
    },
    
    deletion: (e) => {
      if (e.key !== 'Backspace') {
        return false;
      }

      const activeEl = document.activeElement;

      // Allow normal backspace behavior when input is focused and has text
      if (activeEl === input && input.value !== '') {
        return false; // Don't handle - allow default backspace behavior
      }

      e.preventDefault();
      const item = items[selectedIdx];
      if (!item) return true;

      if (!deleteConfirm || lastConfirmIdx !== selectedIdx) {
        // First press shows confirmation + bounce
        deleteConfirm = true;
        lastConfirmIdx = selectedIdx;
        showDeleteConfirm();
      } else {
        // Second press performs deletion
        messageService.delete(item);
        hideDeleteConfirm();
        performItemDeletion();
      }
      return true;
    },
    
    copy: (e) => {
      if (e.key !== 'c' || e.metaKey || e.ctrlKey || e.altKey) return false;
      const item = items[selectedIdx];
      if (!item) return false;
      e.preventDefault();
      copyLinkToClipboard(item);
      destroyOverlay();
      return true;
    },

    activation: (e) => {
      if (e.key !== 'Enter') return false;
      
      e.preventDefault();
      const item = items[selectedIdx];
      if (item) {
        messageService.open(item);
        destroyOverlay();
      }
      return true;
    }
  };
  
  // Extracted deletion animation logic
  function performItemDeletion() {
    const el = listEl.querySelector(`[data-idx="${selectedIdx}"]`);
    if (el) {
      el.classList.add('prd-stv-remove');
      el.addEventListener('animationend', () => {
        removeItemFromList();
      }, { once: true });
    } else {
      removeItemFromList();
    }
  }
  
  function removeItemFromList(index = selectedIdx) {
    if (index < 0 || index >= items.length) return;
    items.splice(index, 1);
    if (selectedIdx >= items.length) {
      selectedIdx = items.length - 1;
    } else if (selectedIdx > index) {
      selectedIdx = Math.max(0, selectedIdx - 1);
    }
    renderList();
    // Update tab count after removing an item
    updateTabCount();
  }

  // Simplified and centralized key handling
  function handleKey(e) {
    // Always allow Esc to close the palette
    if (e.key === 'Escape') {
      keyHandlers.escape();
      return true;
    }

    // Ignore all other keys if the palette isn't open
    if (!overlay) return false;

    // If input is focused and it's a printable character, don't process with our handlers
    if (e.target === input) {
      const isPrintableKey = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
      if (isPrintableKey) {
        return false; // Let the input handle printable characters normally
      }
    }

    // Try each handler in order - return true if handled, false otherwise
    if (keyHandlers.navigation(e)) return true;
    if (keyHandlers.metaNavigation(e)) return true;
    if (keyHandlers.copy(e)) return true;
    if (keyHandlers.deletion(e)) return true;
    if (keyHandlers.activation(e)) return true;

    return false; // Key not handled, allow default behavior
  }

  function handleKeyUp(e) {
    // Open tab when the modifier/shortcut key is released (e.g., Meta, Alt, Control)
    if (!overlay) return;
    if (['Meta', 'Alt', 'Control'].includes(e.key)) {
      const item = items[selectedIdx];
      if (item) {
        messageService.open(item);
        destroyOverlay();
      }
    }
  }

function onInput(e) {
    e.stopPropagation(); // Prevent the input event from affecting the page
    hideDeleteConfirm();
    // User is typing -> cancel pending auto open
    cancelAutoOpen();
    const q = input.value.trim();
    if (!q) {
      messageService.recent((res) => {
        uiState.setItems(res);
        items = uiState.items;
        selectedIdx = uiState.selectedIdx;
        renderList();
      });
      return;
    }
    messageService.search(q, (res) => {
      uiState.setItems(res);
      items = uiState.items;
      selectedIdx = uiState.selectedIdx;
      renderList();
    });
  }

function hideDeleteConfirm() {
    uiState.deleteConfirm = false;
    deleteConfirm = false;
    if (uiState.confirmTimer) {
      clearTimeout(uiState.confirmTimer);
      uiState.confirmTimer = null;
      confirmTimer = null;
    }
    const statusMessage = document.getElementById('prd-stv-status-message');
    if (statusMessage) {
      statusMessage.textContent = CONSTANTS.DEFAULT_STATUS_MSG;
      statusMessage.classList.remove('confirm');
    }
  }

function removeProgressBars() {
    uiState.listEl?.querySelectorAll('.prd-stv-prog').forEach(el => el.remove());
  }

  function cancelAutoOpen() {
    if (uiState.idleTimer) {
      clearTimeout(uiState.idleTimer);
      uiState.idleTimer = null;
      idleTimer = null;
    }
    removeProgressBars();
  }

function showDeleteConfirm() {
    const statusMessage = document.getElementById('prd-stv-status-message');
    if (!statusMessage) return;

    statusMessage.textContent = 'Press backspace again to confirm';
    statusMessage.classList.add('confirm');

    // Bounce animation on the currently selected item
    const activeEl = uiState.listEl?.querySelector('.prd-stv-cmd-item.prd-stv-active');
    if (activeEl) {
      activeEl.classList.add('prd-stv-bounce');
      activeEl.addEventListener('animationend', () => {
        activeEl.classList.remove('prd-stv-bounce');
      }, { once: true });
    }

    uiState.confirmTimer = setTimeout(() => hideDeleteConfirm(), CONSTANTS.CONFIRM_TIMEOUT);
    confirmTimer = uiState.confirmTimer;
  }




  // Extracted item rendering logic for better modularity
  function createItemElement(item, index) {
    const div = document.createElement('div');
    const isHistory = item.type === 'history' || item.source === 'history';
    div.className = 'prd-stv-cmd-item' + (index === selectedIdx ? ' prd-stv-active' : '') + (isHistory ? ' prd-stv-history-item' : '');
    div.dataset.idx = index;

    const iconHtml = getIconHtml(item);
    
    // Add controls (check + 3-dots). In popup context, tabs get a close button on the left.
    const isBookmark = item.type === 'bookmark';
    const isTab = item.type === 'tab';
    const showCloseBtn = isPopupContext && isTab;
    const controlsHtml = (isBookmark || isTab) ? `
      <div class="prd-stv-item-controls" style="opacity:0;transition:opacity 0.2s ease;margin-left:auto;padding-left:8px;">
        ${showCloseBtn ? `<button class="prd-stv-close-btn" title="Close tab" data-close-tab-id="${item.id}"><span class="material-icons-round">check</span></button>` : ''}
        <button class="prd-stv-menu-btn" title="More options" ${isBookmark ? `data-bookmark-id="${item.id}"` : `data-tab-id="${item.id}"`}
          style="background:transparent;border:none;color:#9b9b9b;font-size:16px;cursor:pointer;padding:4px;border-radius:15px;">⋯</button>
      </div>
    ` : '';
    
    // Use custom title if available, otherwise use original title
    const displayTitle = item.customTitle || item.title || item.url;

    div.innerHTML = `
      <div style="display:flex;align-items:center;width:100%;">
        ${iconHtml}
        <div style="display:flex;flex-direction:row; gap: 5px;flex:1;min-width:0;">
          <span class="prd-stv-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">${highlightMatches(displayTitle, input?.value.trim())}</span>
          <span class="prd-stv-url" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">${getSubtitle(item)}</span>
        </div>
        ${controlsHtml}
      </div>
    `;
    
    // // Add error handling for favicon images
    // const favicon = div.querySelector('.prd-stv-favicon');
    // if (favicon) {
    //   favicon.addEventListener('error', () => {
    //     favicon.src = CONSTANTS.FALLBACK_ICON;
    //   }, { once: true });
    // }
    
    // Add click handler
    div.addEventListener('click', (e) => {
      if (e.target.classList.contains('prd-stv-close-btn')) {
        e.stopPropagation();
        if (item.type === 'tab') {
          messageService.delete(item);
          removeItemFromList(index);
        }
      } else if (e.target.classList.contains('prd-stv-menu-btn')) {
        e.stopPropagation();
        if (item.type === 'bookmark') {
          showBookmarkContextMenu(e, item, div);
        } else if (item.type === 'tab') {
          showTabContextMenu(e, item, div);
        }
      } else {
        messageService.open(item);
        destroyOverlay();
      }
    });
    
    // Show menu button on hover
    div.addEventListener('mouseenter', () => {
      const controls = div.querySelector('.prd-stv-item-controls');
      if (controls) controls.style.opacity = '1';
    });
    
    div.addEventListener('mouseleave', () => {
      const controls = div.querySelector('.prd-stv-item-controls');
      if (controls) controls.style.opacity = '0';
    });
    
    return div;
  }
  
  function scrollToActiveItem() {
    const activeEl = listEl.querySelector('.prd-stv-cmd-item.prd-stv-active');
    if (activeEl) {
      activeEl.scrollIntoView({ block: 'nearest' });
    }
  }

  function renderList() {
    listEl.innerHTML = '';
    
    items.forEach((item, index) => {
      const itemElement = createItemElement(item, index);
      listEl.appendChild(itemElement);
    });

    // Ensure the selected item is visible within the scroll container
    scrollToActiveItem();
  }

function getIconHtml(it) {
    // For bookmarks and history, use Google's favicon service
    if ((it.type === 'bookmark' || it.type === 'history') && it.url) {
      const faviconUrl = `https://www.google.com/s2/favicons?domain=${encodeURIComponent(new URL(it.url).hostname)}&sz=32`;
      return `<img class="prd-stv-favicon" src="${faviconUrl}" onerror="this.src='${CONSTANTS.FALLBACK_ICON}'" />`;
    }
    
    // For tabs, use the favicon if available
    const actual = it.icon || '';
    if (actual) {
      return `<img class="prd-stv-favicon" src="${actual}" />`;
    }
    // No favicon available → fallback icon
    return `<img class="prd-stv-favicon" src="${CONSTANTS.FALLBACK_ICON}" />`;
  }


  function typeGlyph(it) {
    if (it.type === 'bookmark') return `<img src="${CONSTANTS.BOOKMARK_ICON}" class="prd-stv-type-icon" />`;
    if (it.type === 'history') return `<img src="${CONSTANTS.HISTORY_ICON}" class="prd-stv-type-icon" />`;
    return '';
  }

  function getSubtitle(it) {
    if (it.source === 'history' && it.lastVisitTime) {
      const rel = escapeHtml(timeAgo(it.lastVisitTime));
      const glyph = typeGlyph(it);
      return glyph ? `${glyph} ${rel}` : rel;
    }
    if (it.source === 'bookmark' && it.folder) {
      const glyph = typeGlyph(it);
      return glyph ? `${glyph} ${escapeHtml(it.folder)}` : escapeHtml(it.folder);
    }
    return highlightMatches(truncateMiddle(it.url), input?.value.trim());
  }

function showToast(message, duration = 2000) {
    const existing = document.getElementById('prd-stv-toast');
    existing?.remove();
    const div = document.createElement('div');
    div.id = 'prd-stv-toast';
    div.textContent = message;
    document.body.appendChild(div);
    setTimeout(() => div.remove(), duration);
  }

  async function copyLinkToClipboard(item) {
    try {
      await navigator.clipboard.writeText(item.url || '');
      showToast('Link copied!');
    } catch (e) {
      // Fallback: create temp textarea
      const ta = document.createElement('textarea');
      ta.value = item.url || '';
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (err) {}
      ta.remove();
      showToast('Link copied!');
    }
  }

  function timeAgo(ms) {
    const diff = Date.now() - ms;
    const s = Math.floor(diff / 1000);
    const m = Math.floor(s / 60);
    const h = Math.floor(m / 60);
    const d = Math.floor(h / 24);
    if (d > 0) return `${d}d ago`;
    if (h > 0) return `${h}h ago`;
    if (m > 0) return `${m}m ago`;
    return `${s}s ago`;
  }

  function escapeHtml(str) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return str?.replace(/[&<>"']/g, (c) => map[c]) || '';
  }

  // Highlight occurrences of the current query within text
  function highlightMatches(text, query) {
    if (!query) return escapeHtml(text);
    const escaped = escapeHtml(text || '');
    // Escape regex special chars in query
    const safeQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    try {
      const regex = new RegExp(safeQuery, 'ig');
      return escaped.replace(regex, (m) => `<span class="prd-stv-hl">${m}</span>`);
    } catch (e) {
      return escaped;
    }
  }
  // Truncate long strings in the middle so they fit on a single line
  // Example: "https://verylongdomain.com/path/to/resource" (maxLen 40)
  // becomes "https://verylo.../path/to/resource"
  function truncateMiddle(str, maxLen = CONSTANTS.MAX_SUBTITLE_LENGTH) {
    if (!str || str.length <= maxLen) return str || '';
    const part = Math.floor((maxLen - 3) / 2);
    return str.slice(0, part) + '...' + str.slice(str.length - part);
  }

  function applyTabCount(count) {
    const tabCounter = document.getElementById('prd-stv-tab-counter');
    if (!tabCounter || typeof count !== 'number') return;

    const oldCount = parseInt(tabCounter.textContent) || 0;
    const newCount = count;

    if (oldCount !== newCount) {
      tabCounter.textContent = newCount;
      tabCounter.classList.remove('prd-stv-tab-count-update');
      void tabCounter.offsetWidth; // reflow to restart animation
      tabCounter.classList.add('prd-stv-tab-count-update');
    }
  }

  // Update the tab counter in the status bar
  function updateTabCount() {
    chrome.runtime.sendMessage({ type: "GET_TAB_COUNT" }, (response) => {
      if (chrome.runtime.lastError) {
        console.error('Error getting tab count:', chrome.runtime.lastError);
        return;
      }
      if (response && response.count !== undefined) {
        applyTabCount(response.count);
      }
    });
  }

  // Bookmark context menu for content.js overlay
  function showBookmarkContextMenu(event, bookmark, itemElement) {
    if (!window.itemContextMenu) {
      showBookmarkContextMenuLegacy(event, bookmark, itemElement);
      return;
    }

    const computeHasDate = async () => {
      try {
        if (!window.datedLinksModule) return false;
        return await window.datedLinksModule.hasDate(bookmark.url);
      } catch (error) {
        console.warn('Failed to check dated status:', error);
        return false;
      }
    };

    (async () => {
      const hasDate = await computeHasDate();

      const handleDateAction = async (action) => {
        if (!window.datedLinksModule) {
          showToast('Date feature not available');
          return true;
        }

        const itemData = {
          url: bookmark.url,
          title: bookmark.title || 'Untitled',
          favicon: bookmark.favicon || '',
          itemType: 'bookmark',
          itemId: bookmark.id
        };

        if (action === 'add-date-tomorrow') {
          const dates = window.itemContextMenu.getQuickDates();
          await window.datedLinksModule.addDate(itemData, dates.tomorrow);
          showToast('Date set to tomorrow');
        } else if (action === 'add-date-next-week') {
          const dates = window.itemContextMenu.getQuickDates();
          await window.datedLinksModule.addDate(itemData, dates.nextWeek);
          showToast('Date set to next week');
        } else if (action === 'add-date-someday') {
          const dates = window.itemContextMenu.getQuickDates();
          await window.datedLinksModule.addDate(itemData, dates.someday);
          showToast('Date set to someday');
        } else if (action === 'add-date-custom') {
          if (!window.dateModal) {
            showToast('Date picker not available');
            return true;
          }
          window.dateModal.show(itemData);
          return true;
        } else if (action === 'remove-date') {
          await window.datedLinksModule.removeDate(bookmark.url);
          showToast('Date removed');
        }

        return true;
      };

      const dateRow = window.itemContextMenu.createDateIconRow(hasDate, handleDateAction);
      const renameItem = window.itemContextMenu.createMenuItem('Rename', 'rename');
      const moveItem = window.itemContextMenu.createMenuItem('Move to...', 'move');

      const menu = window.itemContextMenu.showMenuAtEvent(event, [dateRow, renameItem, moveItem]);
      menu.addEventListener('click', (e) => {
        const action = e.target.closest('.prd-stv-context-item')?.dataset.action;
        if (action === 'rename') {
          startBookmarkRename(bookmark, itemElement);
        } else if (action === 'move') {
          showBookmarkMoveDialog(bookmark);
        }
        window.itemContextMenu.close();
      });
    })();
  }

  function closeBookmarkContextMenu() {
    window.itemContextMenu?.close?.();
    document.getElementById('prd-stv-bookmark-context-menu')?.remove();
  }

  function startBookmarkRename(bookmark, itemElement) {
    const titleElement = itemElement.querySelector('.prd-stv-title') || itemElement.querySelector('span');
    const currentTitle = bookmark.title;
    
    // Create input element
    const input = document.createElement('input');
    input.type = 'text';
    input.value = currentTitle;
    input.style.cssText = 'background:#3a3a3a;border:1px solid #b9a079;color:#fff;padding:2px 4px;border-radius:15px;font-size:14px;outline:none;width:100%;';
    
    // Replace title with input
    titleElement.innerHTML = '';
    titleElement.appendChild(input);
    input.focus();
    input.select();
    
    const finishRename = async (save = false) => {
      const newTitle = input.value.trim();
      if (save && newTitle && newTitle !== currentTitle) {
        try {
          await chrome.runtime.sendMessage({
            type: 'RENAME_BOOKMARK',
            bookmarkId: bookmark.id,
            newTitle: newTitle
          });
          bookmark.title = newTitle; // Update local state
          showToast('Bookmark renamed');
        } catch (error) {
          console.error('Failed to rename bookmark:', error);
          showToast('Failed to rename bookmark');
        }
      }
      
      // Restore original title display
      titleElement.innerHTML = highlightMatches(bookmark.title || bookmark.url, input?.value.trim() || '');
    };
    
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        finishRename(true);
      } else if (e.key === 'Escape') {
        e.preventDefault();
        finishRename(false);
      }
    });
    
    input.addEventListener('blur', () => finishRename(true));
  }

  function showBookmarkMoveDialog(bookmark) {
    if (!window.folderSelectorModal?.show) {
      showToast('Folder selector not available');
      return;
    }

    (async () => {
      if (bookmark._isTab) {
        const selection = await window.folderSelectorModal.show({
          title: 'Save as bookmark',
          actionText: 'Save',
          showTitleInput: true,
          titleValue: bookmark.title || '',
          excludeId: null,
          focus: 'title',
        });
        if (!selection?.folderId) return;

        const editedTitle = selection.title || bookmark.title || 'Untitled';
        const bookmarkData = {
          parentId: selection.folderId,
          title: editedTitle,
          url: bookmark.url
        };

        const response = await chrome.runtime.sendMessage({ type: 'CREATE_BOOKMARK', bookmarkData });
        if (response && response.success === false) throw new Error(response.error || 'Create bookmark failed');

        showToast('Tab saved as bookmark');
        return;
      }

      const selection = await window.folderSelectorModal.show({
        title: `Move "${bookmark.title || 'Untitled'}" to folder`,
        actionText: 'Move',
        showTitleInput: false,
        excludeId: bookmark.id,
        focus: 'search',
      });
      if (!selection?.folderId) return;

      const response = await chrome.runtime.sendMessage({
        type: 'MOVE_BOOKMARK',
        bookmarkId: bookmark.id,
        destinationId: selection.folderId
      });

      if (response && response.success === false) {
        throw new Error(response.error || 'Move bookmark failed');
      }

      showToast('Bookmark moved');
    })().catch((error) => {
      console.error('Move failed:', error);
      showToast('Failed to move');
    });
  }

  function showTabContextMenu(event, tab, itemElement) {
    if (!window.itemContextMenu) {
      showTabContextMenuLegacy(event, tab, itemElement);
      return;
    }

    const computePinned = () => {
      if (!Array.isArray(uiState.pinnedTabs)) return false;
      return uiState.pinnedTabs.some(p => p.url === tab.url);
    };

    const computeHasDate = async () => {
      try {
        if (!window.datedLinksModule) return false;
        return await window.datedLinksModule.hasDate(tab.url);
      } catch (error) {
        console.warn('Failed to check dated status:', error);
        return false;
      }
    };

    (async () => {
      const isPinned = computePinned();
      const hasDate = await computeHasDate();

      const handleDateAction = async (action) => {
        if (!window.datedLinksModule) {
          showToast('Date feature not available');
          return true;
        }

        const itemData = {
          url: tab.url,
          title: tab.title || 'Untitled',
          favicon: tab.icon || tab.favIconUrl || '',
          itemType: 'tab',
          itemId: tab.id
        };

        if (action === 'add-date-tomorrow') {
          const dates = window.itemContextMenu.getQuickDates();
          await window.datedLinksModule.addDate(itemData, dates.tomorrow);
          showToast('Date set to tomorrow');
        } else if (action === 'add-date-next-week') {
          const dates = window.itemContextMenu.getQuickDates();
          await window.datedLinksModule.addDate(itemData, dates.nextWeek);
          showToast('Date set to next week');
        } else if (action === 'add-date-someday') {
          const dates = window.itemContextMenu.getQuickDates();
          await window.datedLinksModule.addDate(itemData, dates.someday);
          showToast('Date set to someday');
        } else if (action === 'add-date-custom') {
          if (!window.dateModal) {
            showToast('Date picker not available');
            return true;
          }
          window.dateModal.show(itemData);
          return true;
        } else if (action === 'remove-date') {
          await window.datedLinksModule.removeDate(tab.url);
          showToast('Date removed');
        }

        return true;
      };

      const dateRow = window.itemContextMenu.createDateIconRow(hasDate, handleDateAction);
      const renameItem = window.itemContextMenu.createMenuItem('Rename', 'rename');
      const pinItem = window.itemContextMenu.createMenuItem(isPinned ? 'Unpin Tab' : 'Pin Tab', isPinned ? 'unpin' : 'pin');
      const moveItem = window.itemContextMenu.createMenuItem('Move to...', 'move-to-folder');
      const dupItem = window.itemContextMenu.createMenuItem('Duplicate Tab', 'duplicate');

      const menu = window.itemContextMenu.showMenuAtEvent(event, [dateRow, renameItem, pinItem, moveItem, dupItem]);
      menu.addEventListener('click', async (e) => {
        const action = e.target.closest('.prd-stv-context-item')?.dataset.action;
        if (action === 'rename') {
          startTabRename(tab, itemElement);
        } else if (action === 'pin') {
          await handlePinTab(tab);
        } else if (action === 'unpin') {
          await handleUnpinTab(tab);
        } else if (action === 'move-to-folder') {
          const fakeBookmark = {
            id: `tab_${tab.id}`,
            title: tab.title || 'Untitled',
            url: tab.url,
            _isTab: true,
            _tabData: tab
          };
          showBookmarkMoveDialog(fakeBookmark);
        } else if (action === 'duplicate') {
          await handleDuplicateTab(tab);
        }
        window.itemContextMenu.close();
      });
    })();
  }

  function closeTabContextMenu() {
    window.itemContextMenu?.close?.();
    document.getElementById('prd-stv-tab-context-menu')?.remove();
  }

  // Legacy context menus (used outside popup.html where shared modules aren't loaded)
  function showBookmarkContextMenuLegacy(event, bookmark, itemElement) {
    closeBookmarkContextMenu();

    const contextMenu = document.createElement('div');
    contextMenu.id = 'prd-stv-bookmark-context-menu';
    contextMenu.style.cssText = `
      position: fixed;
      background: #2b2b2b;
      border: 1px solid #555;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      min-width: 120px;
      overflow: hidden;
      z-index: 2147483648;
      animation: contextMenuIn 0.15s ease-out;
    `;

    contextMenu.innerHTML = `
      <div class="context-item" data-action="rename" style="padding:10px 14px;cursor:pointer;color:#f5f5f5;font-size:14px;transition:background-color 0.15s ease;border-bottom:1px solid #3a3a3a;">
        <span>Rename</span>
      </div>
      <div class="context-item" data-action="move" style="padding:10px 14px;cursor:pointer;color:#f5f5f5;font-size:14px;transition:background-color 0.15s ease;">
        <span>Move to...</span>
      </div>
    `;

    const style = document.createElement('style');
    style.textContent = `
      @keyframes contextMenuIn {
        from { opacity: 0; transform: scale(0.95) translateY(-4px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
      }
      #prd-stv-bookmark-context-menu .context-item:hover {
        background: #353535 !important;
      }
    `;
    document.head.appendChild(style);

    const buttonRect = event.target.getBoundingClientRect();
    contextMenu.style.left = `${buttonRect.left - 120}px`;
    contextMenu.style.top = `${buttonRect.bottom + 4}px`;
    document.body.appendChild(contextMenu);

    contextMenu.addEventListener('click', (e) => {
      const action = e.target.closest('.context-item')?.dataset.action;
      if (action === 'rename') {
        startBookmarkRename(bookmark, itemElement);
      } else if (action === 'move') {
        showBookmarkMoveDialog(bookmark);
      }
      closeBookmarkContextMenu();
    });

    setTimeout(() => {
      document.addEventListener('click', closeBookmarkContextMenu, { once: true });
    }, 10);
  }

  function showTabContextMenuLegacy(event, tab, itemElement) {
    closeTabContextMenu();

    const contextMenu = document.createElement('div');
    contextMenu.id = 'prd-stv-tab-context-menu';
    contextMenu.style.cssText = `
      position: fixed;
      background: #2b2b2b;
      border: 1px solid #555;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      min-width: 120px;
      overflow: hidden;
      z-index: 2147483648;
      animation: contextMenuIn 0.15s ease-out;
    `;

    contextMenu.innerHTML = `
      <div class="context-item" data-action="pin" style="padding:10px 14px;cursor:pointer;color:#f5f5f5;font-size:14px;transition:background-color 0.15s ease;border-bottom:1px solid #3a3a3a;">
        <span>Pin Tab</span>
      </div>
      <div class="context-item" data-action="move-to-folder" style="padding:10px 14px;cursor:pointer;color:#f5f5f5;font-size:14px;transition:background-color 0.15s ease;border-bottom:1px solid #3a3a3a;">
        <span>Move to...</span>
      </div>
      <div class="context-item" data-action="duplicate" style="padding:10px 14px;cursor:pointer;color:#f5f5f5;font-size:14px;transition:background-color 0.15s ease;">
        <span>Duplicate Tab</span>
      </div>
    `;

    const style = document.createElement('style');
    style.textContent = `
      @keyframes contextMenuIn {
        from { opacity: 0; transform: scale(0.95) translateY(-4px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
      }
      #prd-stv-tab-context-menu .context-item:hover {
        background: #353535 !important;
      }
    `;
    document.head.appendChild(style);

    const buttonRect = event.target.getBoundingClientRect();
    contextMenu.style.left = `${buttonRect.left - 120}px`;
    contextMenu.style.top = `${buttonRect.bottom + 4}px`;
    document.body.appendChild(contextMenu);

    contextMenu.addEventListener('click', async (e) => {
      const action = e.target.closest('.context-item')?.dataset.action;
      if (action === 'pin') {
        await handlePinTab(tab);
      } else if (action === 'move-to-folder') {
        const fakeBookmark = {
          id: `tab_${tab.id}`,
          title: tab.title || 'Untitled',
          url: tab.url,
          _isTab: true,
          _tabData: tab
        };
        showBookmarkMoveDialog(fakeBookmark);
      } else if (action === 'duplicate') {
        await handleDuplicateTab(tab);
      }
      closeTabContextMenu();
    });

    setTimeout(() => {
      document.addEventListener('click', closeTabContextMenu, { once: true });
    }, 10);
  }

  function startTabRename(tab, itemElement) {
    const titleElement = itemElement.querySelector('.prd-stv-title') || itemElement.querySelector('span');
    const currentTitle = tab.customTitle || tab.title || 'Untitled';

    const inputEl = window.renameHelper?.createRenameInput
      ? window.renameHelper.createRenameInput(currentTitle)
      : (() => {
        const input = document.createElement('input');
        input.type = 'text';
        input.value = currentTitle;
        return input;
      })();

    inputEl.style.cssText = 'background:#3a3a3a;border:1px solid #b9a079;color:#fff;padding:2px 4px;border-radius:15px;font-size:14px;outline:none;width:100%;';

    titleElement.innerHTML = '';
    titleElement.appendChild(inputEl);
    inputEl.focus();
    inputEl.select();

    const finish = async (save = false) => {
      const newTitle = inputEl.value.trim();
      if (save && newTitle && newTitle !== currentTitle) {
        try {
          if (tab.url && window.renameHelper?.saveCustomTitle) {
            await window.renameHelper.saveCustomTitle(tab.url, newTitle);
          }
          tab.customTitle = newTitle;
          showToast('Tab renamed');
        } catch (error) {
          console.error('Failed to rename tab:', error);
          showToast('Failed to rename tab');
        }
      }

      titleElement.innerHTML = highlightMatches(tab.customTitle || tab.title || tab.url, input?.value.trim() || '');
    };

    if (window.renameHelper?.setupKeyboardHandlers) {
      window.renameHelper.setupKeyboardHandlers(inputEl, finish);
    } else {
      inputEl.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          e.preventDefault();
          finish(true);
        } else if (e.key === 'Escape') {
          e.preventDefault();
          finish(false);
        }
      });
      inputEl.addEventListener('blur', () => finish(true));
    }
  }

  async function handleSaveTabAsBookmark(tab) {
    try {
      // For simplicity in overlay, save to default bookmarks bar
      // Full folder selection functionality is available in side panel
      const bookmarkData = {
        parentId: '1', // Bookmarks bar
        title: tab.title || 'Untitled',
        url: tab.url
      };
      
      const result = await chrome.runtime.sendMessage({
        type: 'CREATE_BOOKMARK',
        bookmarkData: bookmarkData
      });
      
      if (result && result.success) {
        showToast('Tab saved as bookmark');
        destroyOverlay();
      } else {
        throw new Error(result?.error || 'Unknown error');
      }
    } catch (error) {
      console.error('Failed to save tab as bookmark:', error);
      showToast('Failed to save bookmark');
    }
  }

  async function handleDuplicateTab(tab) {
    try {
      await chrome.tabs.create({ 
        url: tab.url,
        windowId: tab.windowId,
        index: tab.index + 1
      });
      showToast('Tab duplicated');
      destroyOverlay();
    } catch (error) {
      console.error('Failed to duplicate tab:', error);
      showToast('Failed to duplicate tab');
    }
  }

  async function handlePinTab(tab) {
    try {
      const tabData = {
        url: tab.url,
        title: tab.title || 'Untitled',
        favicon: tab.icon || tab.favIconUrl || ''
      };
      
      const response = await chrome.runtime.sendMessage({ 
        type: 'ADD_PINNED_TAB', 
        tabData 
      });
      
      if (response && response.success) {
        showToast('Tab pinned');
        loadPinnedTabs();
      } else {
        throw new Error(response?.error || 'Failed to pin tab');
      }
    } catch (error) {
      console.error('Failed to pin tab:', error);
      showToast(error.message || 'Failed to pin tab');
    }
  }

  async function handleUnpinTab(tab) {
    try {
      const response = await chrome.runtime.sendMessage({
        type: 'REMOVE_PINNED_TAB',
        url: tab.url
      });

      if (response && response.success) {
        showToast('Tab unpinned');
        loadPinnedTabs();
      } else {
        throw new Error(response?.error || 'Failed to unpin tab');
      }
    } catch (error) {
      console.error('Failed to unpin tab:', error);
      showToast(error.message || 'Failed to unpin tab');
    }
  }

  // Pinned Tabs Functions
  async function loadPinnedTabs() {
    try {
      const response = await chrome.runtime.sendMessage({ type: 'GET_PINNED_TABS' });
      if (response && response.pinnedTabs) {
        renderPinnedTabs(response.pinnedTabs);
      }
    } catch (error) {
      console.error('Failed to load pinned tabs:', error);
    }
  }

  function renderPinnedTabs(pinnedTabs) {
    if (!uiState.pinnedTabsEl) return;

    if (!pinnedTabs || pinnedTabs.length === 0) {
      uiState.pinnedTabs = [];
      uiState.pinnedTabsEl.style.display = 'none';
      return;
    }

    uiState.pinnedTabs = pinnedTabs;

    // Use same display style as sidepanel
    uiState.pinnedTabsEl.style.display = 'grid';
    uiState.pinnedTabsEl.innerHTML = '';

    pinnedTabs.forEach(pinnedTab => {
      // Create icon element with same class as sidepanel
      const tabIcon = document.createElement('div');
      tabIcon.className = 'pinned-tab-icon';
      tabIcon.dataset.url = pinnedTab.url;
      tabIcon.title = pinnedTab.title;

      // Add active/inactive state classes (same as sidepanel)
      if (pinnedTab.isActive) {
        tabIcon.classList.add('pinned-tab-active');
      } else {
        tabIcon.classList.add('pinned-tab-inactive');
      }

      // Create favicon with same class as sidepanel
      const favicon = document.createElement('img');
      favicon.className = 'pinned-tab-favicon';
      favicon.src = pinnedTab.favicon || CONSTANTS.FALLBACK_ICON;
      favicon.alt = pinnedTab.title;
      favicon.onerror = () => {
        favicon.src = CONSTANTS.FALLBACK_ICON;
      };
      tabIcon.appendChild(favicon);

      // Create action button with same class as sidepanel
      const btn = document.createElement('button');
      btn.className = 'pinned-tab-action';
      btn.innerHTML = pinnedTab.isActive ? '−' : '×';
      btn.title = pinnedTab.isActive ? 'Close tab' : 'Remove from pinned';

      btn.onclick = async (e) => {
        e.stopPropagation();
        try {
          if (pinnedTab.isActive && pinnedTab.tabId) {
            // Close active tab
            await chrome.runtime.sendMessage({ 
              type: 'CLOSE_PINNED_TAB', 
              tabId: pinnedTab.tabId 
            });
          } else {
            // Remove pinned tab
            await chrome.runtime.sendMessage({ 
              type: 'REMOVE_PINNED_TAB', 
              url: pinnedTab.url 
            });
          }
          // Reload pinned tabs
          loadPinnedTabs();
        } catch (error) {
          console.error('Failed to handle pinned tab action:', error);
        }
      };
      tabIcon.appendChild(btn);

      // Click on icon to open/activate (not on button)
      tabIcon.onclick = async (e) => {
        if (e.target === btn) return; // Don't trigger when clicking button
        
        try {
          if (pinnedTab.isActive && pinnedTab.tabId) {
            // Activate existing tab
            await chrome.runtime.sendMessage({ 
              type: 'ACTIVATE_TAB', 
              tabId: pinnedTab.tabId 
            });
            destroyOverlay();
          } else {
            // Open new tab
            await chrome.runtime.sendMessage({ 
              type: 'OPEN_PINNED_TAB', 
              url: pinnedTab.url 
            });
            destroyOverlay();
          }
        } catch (error) {
          console.error('Failed to open pinned tab:', error);
        }
      };

      uiState.pinnedTabsEl.appendChild(tabIcon);
    });
  }

  chrome.runtime.onMessage.addListener((msg) => {
    console.log('Content script received message:', msg.type);
    if (msg.type === 'TOGGLE') {
      console.log('Toggling overlay...');
      toggleOverlay();
    } else if (msg.type === 'TAB_COUNT_CHANGED') {
      updateTabCount();
    } else if (msg.type === 'PINNED_TABS_UPDATED') {
      loadPinnedTabs();
    }
  });

  // In the extension popup, render the command bar immediately instead of using the side panel shell.
  if (isPopupContext) {
    createOverlay();
  }
})();