@shawnowen/comet-mcp 2.3.0

package/extension/sidepanel.js

@@ -0,0 +1,1186 @@
+// ─── Comet Session Manager — Side Panel ───────────────────────────────────────
+// T008: Base module structure with message helper, DOM references,
+//       section toggle logic, and initialization entry point.
+
+'use strict';
+
+// ─── Message Helper ───────────────────────────────────────────────────────────
+
+/**
+ * Send a typed message to background.js and return response data.
+ * Follows contract: { type, payload } → { ok, data, error }
+ * @param {string} type - Message type (e.g., 'getGroups')
+ * @param {object} [payload={}] - Optional payload
+ * @returns {Promise<any>} Response data
+ */
+async function sendMessage(type, payload = {}) {
+    return new Promise((resolve, reject) => {
+        chrome.runtime.sendMessage({ type, payload }, (response) => {
+            if (chrome.runtime.lastError) {
+                reject(new Error(chrome.runtime.lastError.message));
+                return;
+            }
+            if (!response) {
+                reject(new Error(`No response for message type "${type}"`));
+                return;
+            }
+            if (response.ok) {
+                resolve(response.data);
+            } else {
+                reject(new Error(response.error || `Handler error for "${type}"`));
+            }
+        });
+    });
+}
+
+// ─── DOM References ───────────────────────────────────────────────────────────
+
+const $ = (sel) => document.querySelector(sel);
+const $$ = (sel) => document.querySelectorAll(sel);
+
+const DOM = {
+    // Search
+    searchInput: $('#search-input'),
+    searchClear: $('#search-clear'),
+
+    // Sections
+    sectionHeaders: $$('.section-header'),
+    liveContent: $('#live-content'),
+    archivedContent: $('#archived-content'),
+    recentContent: $('#recent-content'),
+    liveCount: $('#live-count'),
+    archivedCount: $('#archived-count'),
+    recentCount: $('#recent-count'),
+
+    // Empty states
+    liveEmpty: $('#live-empty'),
+    archivedEmpty: $('#archived-empty'),
+    recentEmpty: $('#recent-empty'),
+
+    // Status bar
+    statusDot: $('#status-dot'),
+    statusText: $('#status-text'),
+    btnReconnect: $('#btn-reconnect'),
+
+    // Toolbar
+    btnSaveAll: $('#btn-save-all'),
+    btnImport: $('#btn-import'),
+    btnExport: $('#btn-export'),
+
+    // Import modal
+    importOverlay: $('#import-overlay'),
+    importTextarea: $('#import-textarea'),
+    importPreview: $('#import-preview'),
+    importDuplicates: $('#import-duplicates'),
+    importDuplicateText: $('#import-duplicate-text'),
+    importCancel: $('#import-cancel'),
+    importConfirm: $('#import-confirm'),
+    importClose: $('#import-close'),
+
+    // Container
+    sectionsContainer: $('#sections-container'),
+};
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const state = {
+    groups: [],           // Live TabGroup[]
+    tabs: [],             // Live Tab[]
+    archived: [],         // ArchiveEntry[]
+    recentlyClosed: [],   // Session[]
+    expandedGroups: new Set(),  // Group IDs currently expanded
+    expandedSections: new Set(['live']),  // Section names currently expanded
+    searchQuery: '',
+    cdpConnected: false,
+    refreshTimer: null,
+    healthTimer: null,
+};
+
+// ─── Utility Helpers ──────────────────────────────────────────────────────────
+
+/**
+ * Format a timestamp to a relative time string (e.g., "2 min ago")
+ */
+function timeAgo(ts) {
+    const seconds = Math.floor((Date.now() - ts) / 1000);
+    if (seconds < 60) return 'just now';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes} min ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+}
+
+/**
+ * Extract hostname from a URL for display
+ */
+function hostname(url) {
+    try {
+        return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+        return url;
+    }
+}
+
+/**
+ * Escape HTML to prevent XSS in dynamic content
+ */
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+/**
+ * Create an element with attributes and children
+ */
+function el(tag, attrs = {}, ...children) {
+    const elem = document.createElement(tag);
+    for (const [key, val] of Object.entries(attrs)) {
+        if (key === 'className') elem.className = val;
+        else if (key === 'dataset') Object.assign(elem.dataset, val);
+        else if (key.startsWith('on')) elem.addEventListener(key.slice(2).toLowerCase(), val);
+        else elem.setAttribute(key, val);
+    }
+    for (const child of children) {
+        if (typeof child === 'string') elem.appendChild(document.createTextNode(child));
+        else if (child) elem.appendChild(child);
+    }
+    return elem;
+}
+
+// ─── Section Toggle Logic ─────────────────────────────────────────────────────
+
+function initSectionToggles() {
+    DOM.sectionHeaders.forEach((header) => {
+        const sectionName = header.dataset.section;
+        const content = $(`#${sectionName}-content`);
+        if (!content) return;
+
+        // Set initial state
+        if (state.expandedSections.has(sectionName)) {
+            header.classList.add('expanded');
+            content.classList.remove('collapsed');
+        } else {
+            header.classList.remove('expanded');
+            content.classList.add('collapsed');
+        }
+
+        header.addEventListener('click', () => {
+            const isExpanded = state.expandedSections.has(sectionName);
+            if (isExpanded) {
+                state.expandedSections.delete(sectionName);
+                header.classList.remove('expanded');
+                content.classList.add('collapsed');
+            } else {
+                state.expandedSections.add(sectionName);
+                header.classList.add('expanded');
+                content.classList.remove('collapsed');
+            }
+        });
+    });
+}
+
+// ─── Search Logic (T024-T026) ─────────────────────────────────────────────────
+
+function initSearch() {
+    let debounceTimer = null;
+
+    DOM.searchInput.addEventListener('input', () => {
+        clearTimeout(debounceTimer);
+        const query = DOM.searchInput.value.trim();
+
+        DOM.searchClear.classList.toggle('hidden', query.length === 0);
+
+        debounceTimer = setTimeout(() => {
+            state.searchQuery = query.toLowerCase();
+            applySearchFilter();
+        }, 150);
+    });
+
+    DOM.searchClear.addEventListener('click', () => {
+        DOM.searchInput.value = '';
+        DOM.searchClear.classList.add('hidden');
+        state.searchQuery = '';
+        applySearchFilter();
+        DOM.searchInput.focus();
+    });
+}
+
+function applySearchFilter() {
+    if (!state.searchQuery) {
+        // Show all items
+        document.querySelectorAll('.group-node, .archive-item, .recent-item, .tab-item, .window-header')
+            .forEach(el => el.style.display = '');
+        const noResults = document.querySelector('.no-results');
+        if (noResults) noResults.remove();
+        return;
+    }
+
+    // Basic search implementation — filter visible items
+    const query = state.searchQuery;
+    let matchCount = 0;
+
+    // Filter live groups and tabs
+    document.querySelectorAll('.group-node').forEach(node => {
+        const title = (node.dataset.title || '').toLowerCase();
+        const hasMatch = title.includes(query);
+        // Check child tabs
+        let childMatch = false;
+        node.querySelectorAll('.tab-item').forEach(tab => {
+            const tabTitle = (tab.dataset.title || '').toLowerCase();
+            const tabUrl = (tab.dataset.url || '').toLowerCase();
+            const tabMatch = tabTitle.includes(query) || tabUrl.includes(query);
+            tab.style.display = tabMatch ? '' : 'none';
+            if (tabMatch) childMatch = true;
+        });
+        const visible = hasMatch || childMatch;
+        node.style.display = visible ? '' : 'none';
+        if (visible) matchCount++;
+    });
+
+    // Filter archived items
+    document.querySelectorAll('.archive-item').forEach(item => {
+        const title = (item.dataset.title || '').toLowerCase();
+        const visible = title.includes(query);
+        item.style.display = visible ? '' : 'none';
+        if (visible) matchCount++;
+    });
+
+    // Filter recently closed items
+    document.querySelectorAll('.recent-item').forEach(item => {
+        const title = (item.dataset.title || '').toLowerCase();
+        const url = (item.dataset.url || '').toLowerCase();
+        const visible = title.includes(query) || url.includes(query);
+        item.style.display = visible ? '' : 'none';
+        if (visible) matchCount++;
+    });
+
+    // Show/hide no results
+    let noResults = document.querySelector('.no-results');
+    if (matchCount === 0 && !noResults) {
+        noResults = el('div', { className: 'no-results' },
+            el('span', { className: 'no-results-icon' }, '🔍'),
+            el('span', {}, 'No results found')
+        );
+        DOM.sectionsContainer.appendChild(noResults);
+    } else if (matchCount > 0 && noResults) {
+        noResults.remove();
+    }
+}
+
+// ─── Connection Status (T012) ─────────────────────────────────────────────────
+
+async function checkHealth() {
+    try {
+        const result = await sendMessage('healthCheck');
+        state.cdpConnected = result.cdpConnected;
+        updateStatusUI(true, result.version);
+    } catch {
+        state.cdpConnected = false;
+        updateStatusUI(false);
+    }
+}
+
+function updateStatusUI(connected, version = '') {
+    if (connected) {
+        DOM.statusDot.className = 'status-dot connected';
+        DOM.statusText.textContent = `Connected v${version}`;
+        DOM.btnReconnect.classList.add('hidden');
+    } else {
+        DOM.statusDot.className = 'status-dot disconnected';
+        DOM.statusText.textContent = 'Disconnected';
+        DOM.btnReconnect.classList.remove('hidden');
+    }
+}
+
+// ─── Tree Rendering (T009) ───────────────────────────────────────────────────
+
+async function fetchAndRenderLiveTree() {
+    try {
+        const [groups, tabs] = await Promise.all([
+            sendMessage('getGroups'),
+            sendMessage('getTabs'),
+        ]);
+        state.groups = groups;
+        state.tabs = tabs;
+        renderLiveTree(groups, tabs);
+    } catch (err) {
+        console.error('[Comet] Failed to fetch live tree:', err);
+    }
+}
+
+function renderLiveTree(groups, tabs) {
+    // Group tabs by windowId → groupId
+    const windowMap = new Map(); // windowId → { groups: Map<groupId, group>, tabs: Map<groupId, tab[]> }
+
+    for (const group of groups) {
+        if (!windowMap.has(group.windowId)) {
+            windowMap.set(group.windowId, { groups: new Map(), ungroupedTabs: [] });
+        }
+        windowMap.get(group.windowId).groups.set(group.id, group);
+    }
+
+    for (const tab of tabs) {
+        if (!windowMap.has(tab.windowId)) {
+            windowMap.set(tab.windowId, { groups: new Map(), ungroupedTabs: [] });
+        }
+        const win = windowMap.get(tab.windowId);
+        if (tab.groupId === -1) {
+            // Track ungrouped tabs per window
+            win.ungroupedTabs.push(tab);
+            continue;
+        }
+        if (!win.groups.has(tab.groupId)) continue; // skip tabs without known group
+    }
+
+    // Build DOM
+    const container = DOM.liveContent;
+    const existingEmpty = DOM.liveEmpty;
+
+    // Clear existing tree (preserve empty state element)
+    const children = Array.from(container.children);
+    children.forEach(child => {
+        if (child !== existingEmpty) child.remove();
+    });
+
+    let totalGroups = 0;
+    const sortedWindows = [...windowMap.entries()].sort((a, b) => a[0] - b[0]);
+
+    for (const [windowId, winData] of sortedWindows) {
+        if (winData.groups.size === 0) continue;
+
+        // Window header
+        if (sortedWindows.length > 1) {
+            container.appendChild(el('div', { className: 'window-header' }, `Window ${windowId}`));
+        }
+
+        // Groups in this window
+        for (const [groupId, group] of winData.groups) {
+            totalGroups++;
+            const groupTabs = tabs.filter(t => t.groupId === groupId);
+            const isExpanded = state.expandedGroups.has(String(groupId));
+
+            const groupNode = createGroupNode(group, groupTabs, isExpanded);
+            container.appendChild(groupNode);
+        }
+
+        // Ungrouped tabs section per window (T009 edge case)
+        if (winData.ungroupedTabs.length > 0) {
+            const ungroupedId = `ungrouped-${windowId}`;
+            const isExpanded = state.expandedGroups.has(ungroupedId);
+            const ungroupedGroup = {
+                id: ungroupedId,
+                title: 'Ungrouped',
+                color: 'grey',
+                collapsed: !isExpanded,
+                windowId,
+            };
+            const ungroupedNode = createGroupNode(ungroupedGroup, winData.ungroupedTabs, isExpanded);
+            container.appendChild(ungroupedNode);
+        }
+    }
+
+    // Update count and empty state
+    DOM.liveCount.textContent = String(totalGroups);
+    existingEmpty.classList.toggle('hidden', totalGroups > 0);
+
+    // Re-apply search filter if active
+    if (state.searchQuery) applySearchFilter();
+}
+
+function createGroupNode(group, groupTabs, isExpanded) {
+    const node = el('div', {
+        className: 'group-node',
+        dataset: { groupId: String(group.id), title: group.title }
+    });
+
+    // Group header
+    const header = el('div', {
+        className: `group-header${isExpanded ? ' expanded' : ''}`,
+        onClick: (e) => {
+            if (e.target.closest('.action-btn')) return;
+            toggleGroupExpand(group.id, header, tabList);
+        }
+    },
+        el('span', { className: 'group-chevron' }, '▸'),
+        el('span', { className: `group-color-badge badge-${group.color}` }),
+        el('span', { className: 'group-title', title: group.title }, group.title || 'Untitled'),
+        el('span', { className: 'group-tab-count' }, `${groupTabs.length}`),
+        el('div', { className: 'group-actions' },
+            el('button', {
+                className: 'action-btn archive-btn',
+                title: 'Archive group',
+                onClick: () => archiveGroupAction(group.id, group.title)
+            }, '📦'),
+            el('button', {
+                className: 'action-btn close-btn',
+                title: 'Close group',
+                onClick: () => closeGroupAction(group.id)
+            }, '×')
+        )
+    );
+
+    // Tab list
+    const tabList = el('div', {
+        className: `tab-list${isExpanded ? '' : ' collapsed'}`
+    });
+
+    for (const tab of groupTabs) {
+        tabList.appendChild(createTabItem(tab));
+    }
+
+    node.appendChild(header);
+    node.appendChild(tabList);
+    return node;
+}
+
+function createTabItem(tab) {
+    const favicon = tab.favIconUrl
+        ? el('img', { className: 'tab-favicon', src: tab.favIconUrl, alt: '' })
+        : el('span', { className: 'tab-favicon-placeholder' }, '●');
+
+    // Handle favicon load errors
+    if (favicon.tagName === 'IMG') {
+        favicon.onerror = () => {
+            const placeholder = el('span', { className: 'tab-favicon-placeholder' }, '●');
+            favicon.replaceWith(placeholder);
+        };
+    }
+
+    return el('div', {
+        className: `tab-item${tab.active ? ' active' : ''}`,
+        dataset: { tabId: String(tab.id), title: tab.title, url: tab.url },
+        onClick: (e) => {
+            if (e.target.closest('.tab-close')) return;
+            focusTabAction(tab.id, tab.windowId);
+        }
+    },
+        favicon,
+        el('span', { className: 'tab-title', title: tab.title }, tab.title || 'Untitled'),
+        el('span', { className: 'tab-url' }, hostname(tab.url)),
+        el('button', {
+            className: 'tab-close',
+            title: 'Close tab',
+            onClick: () => closeTabAction(tab.id)
+        }, '×')
+    );
+}
+
+function toggleGroupExpand(groupId, header, tabList) {
+    const key = String(groupId);
+    const isExpanded = state.expandedGroups.has(key);
+
+    if (isExpanded) {
+        state.expandedGroups.delete(key);
+        header.classList.remove('expanded');
+        tabList.classList.add('collapsed');
+    } else {
+        state.expandedGroups.add(key);
+        header.classList.add('expanded');
+        tabList.classList.remove('collapsed');
+    }
+
+    // Persist expanded state
+    chrome.storage.local.set({ expandedGroups: [...state.expandedGroups] });
+}
+
+// ─── Archived Sessions Rendering (T018) ──────────────────────────────────────
+
+async function fetchAndRenderArchived() {
+    try {
+        const archived = await sendMessage('getArchivedGroups');
+        state.archived = archived || [];
+        renderArchived(state.archived);
+    } catch (err) {
+        console.error('[Comet] Failed to fetch archived groups:', err);
+        state.archived = [];
+        renderArchived([]);
+    }
+}
+
+function renderArchived(entries) {
+    const container = DOM.archivedContent;
+    const existingEmpty = DOM.archivedEmpty;
+
+    // Clear existing
+    Array.from(container.children).forEach(child => {
+        if (child !== existingEmpty) child.remove();
+    });
+
+    DOM.archivedCount.textContent = String(entries.length);
+    existingEmpty.classList.toggle('hidden', entries.length > 0);
+
+    for (const entry of entries) {
+        const archiveKey = `archive-${entry.taskThreadId}`;
+        const isExpanded = state.expandedGroups.has(archiveKey);
+        const urls = entry.urls || [];
+
+        const archiveNode = el('div', {
+            className: 'group-node archive-node',
+            dataset: { threadId: entry.taskThreadId, title: entry.title }
+        });
+
+        // Expandable tab list showing individual URLs
+        const tabList = el('div', {
+            className: `tab-list${isExpanded ? '' : ' collapsed'}`
+        });
+
+        for (const tabEntry of urls) {
+            tabList.appendChild(el('div', {
+                className: 'tab-item archive-tab-item',
+                dataset: { title: tabEntry.title || '', url: tabEntry.url || '' },
+                onClick: () => restoreSingleTabAction(entry.taskThreadId, tabEntry.url)
+            },
+                el('span', { className: 'tab-favicon-placeholder' }, '🔗'),
+                el('span', { className: 'tab-title', title: tabEntry.title || tabEntry.url }, tabEntry.title || hostname(tabEntry.url)),
+                el('span', { className: 'tab-url' }, hostname(tabEntry.url || ''))
+            ));
+        }
+
+        // Archive group header — clickable to expand/collapse
+        const header = el('div', {
+            className: `group-header archive-item${isExpanded ? ' expanded' : ''}`,
+            onClick: (e) => {
+                if (e.target.closest('.action-btn') || e.target.closest('.rename-input')) return;
+                const nowExpanded = state.expandedGroups.has(archiveKey);
+                if (nowExpanded) {
+                    state.expandedGroups.delete(archiveKey);
+                    header.classList.remove('expanded');
+                    tabList.classList.add('collapsed');
+                } else {
+                    state.expandedGroups.add(archiveKey);
+                    header.classList.add('expanded');
+                    tabList.classList.remove('collapsed');
+                }
+            }
+        },
+            el('span', { className: 'group-chevron' }, '▸'),
+            el('span', { className: `group-color-badge badge-${entry.color || 'grey'}` }),
+            el('span', {
+                className: 'group-title archive-title',
+                title: 'Double-click to rename',
+                onDblclick: (e) => startRename(e.target, entry.taskThreadId)
+            }, entry.title || 'Untitled'),
+            el('span', { className: 'group-tab-count' }, `${urls.length}`),
+            el('span', { className: 'archive-timestamp' }, entry.archivedAt ? timeAgo(new Date(entry.archivedAt).getTime()) : ''),
+            el('div', { className: 'group-actions' },
+                el('button', {
+                    className: 'action-btn restore-btn',
+                    title: 'Restore all tabs',
+                    onClick: () => restoreGroupAction(entry.taskThreadId)
+                }, '↩'),
+                el('button', {
+                    className: 'action-btn rename-btn',
+                    title: 'Rename group',
+                    onClick: (e) => {
+                        const titleEl = header.querySelector('.archive-title');
+                        if (titleEl) startRename(titleEl, entry.taskThreadId);
+                    }
+                }, '✏️'),
+                el('button', {
+                    className: 'action-btn delete-btn',
+                    title: 'Delete archive',
+                    onClick: () => deleteArchivedAction(entry.taskThreadId)
+                }, '🗑')
+            )
+        );
+
+        archiveNode.appendChild(header);
+        archiveNode.appendChild(tabList);
+        container.appendChild(archiveNode);
+    }
+
+    if (state.searchQuery) applySearchFilter();
+}
+
+// ─── Recently Closed Rendering (T022) ────────────────────────────────────────
+
+async function fetchAndRenderRecent() {
+    try {
+        const sessions = await sendMessage('getRecentlyClosed', { maxResults: 25 });
+        state.recentlyClosed = sessions || [];
+        renderRecentlyClosed(state.recentlyClosed);
+    } catch (err) {
+        console.error('[Comet] Failed to fetch recently closed:', err);
+        state.recentlyClosed = [];
+        renderRecentlyClosed([]);
+    }
+}
+
+function renderRecentlyClosed(sessions) {
+    const container = DOM.recentContent;
+    const existingEmpty = DOM.recentEmpty;
+
+    // Clear existing
+    Array.from(container.children).forEach(child => {
+        if (child !== existingEmpty) child.remove();
+    });
+
+    DOM.recentCount.textContent = String(sessions.length);
+    existingEmpty.classList.toggle('hidden', sessions.length > 0);
+
+    for (const session of sessions) {
+        if (session.tab) {
+            const tab = session.tab;
+            const item = el('div', {
+                className: 'recent-item',
+                dataset: { sessionId: session.sessionId || '', title: tab.title || '', url: tab.url || '' }
+            },
+                el('span', { className: 'recent-type-icon' }, '📄'),
+                el('span', { className: 'tab-title', title: tab.title }, tab.title || 'Untitled'),
+                el('span', { className: 'tab-url' }, hostname(tab.url || '')),
+                el('span', { className: 'recent-timestamp' }, session.lastModified ? timeAgo(session.lastModified * 1000) : ''),
+                el('div', { className: 'group-actions' },
+                    el('button', {
+                        className: 'action-btn restore-btn',
+                        title: 'Restore tab',
+                        onClick: () => restoreClosedAction(session.sessionId)
+                    }, '↩')
+                )
+            );
+            container.appendChild(item);
+        } else if (session.window) {
+            // T023: Expandable window entries in Recently Closed
+            const win = session.window;
+            const winTabs = win.tabs || [];
+            const tabCount = winTabs.length;
+            const windowKey = `recent-win-${session.sessionId}`;
+            const isExpanded = state.expandedGroups.has(windowKey);
+
+            const windowNode = el('div', {
+                className: 'group-node recent-window-node',
+                dataset: { sessionId: session.sessionId || '', title: `Window (${tabCount} tabs)` }
+            });
+
+            // Individual tabs list (expandable)
+            const tabList = el('div', {
+                className: `tab-list${isExpanded ? '' : ' collapsed'}`
+            });
+
+            for (const wTab of winTabs) {
+                tabList.appendChild(el('div', {
+                    className: 'tab-item',
+                    dataset: { title: wTab.title || '', url: wTab.url || '' }
+                },
+                    wTab.favIconUrl
+                        ? el('img', { className: 'tab-favicon', src: wTab.favIconUrl, alt: '' })
+                        : el('span', { className: 'tab-favicon-placeholder' }, '●'),
+                    el('span', { className: 'tab-title', title: wTab.title }, wTab.title || 'Untitled'),
+                    el('span', { className: 'tab-url' }, hostname(wTab.url || ''))
+                ));
+            }
+
+            // Window header (clickable to expand/collapse)
+            const header = el('div', {
+                className: `group-header recent-item${isExpanded ? ' expanded' : ''}`,
+                onClick: (e) => {
+                    if (e.target.closest('.action-btn')) return;
+                    const nowExpanded = state.expandedGroups.has(windowKey);
+                    if (nowExpanded) {
+                        state.expandedGroups.delete(windowKey);
+                        header.classList.remove('expanded');
+                        tabList.classList.add('collapsed');
+                    } else {
+                        state.expandedGroups.add(windowKey);
+                        header.classList.add('expanded');
+                        tabList.classList.remove('collapsed');
+                    }
+                }
+            },
+                el('span', { className: 'group-chevron' }, '▸'),
+                el('span', { className: 'recent-type-icon' }, '🪟'),
+                el('span', { className: 'tab-title' }, `Window (${tabCount} tabs)`),
+                el('span', { className: 'recent-timestamp' }, session.lastModified ? timeAgo(session.lastModified * 1000) : ''),
+                el('div', { className: 'group-actions' },
+                    el('button', {
+                        className: 'action-btn restore-btn',
+                        title: 'Restore entire window',
+                        onClick: () => restoreClosedAction(session.sessionId)
+                    }, '↩')
+                )
+            );
+
+            windowNode.appendChild(header);
+            windowNode.appendChild(tabList);
+            container.appendChild(windowNode);
+        }
+    }
+
+    if (state.searchQuery) applySearchFilter();
+}
+
+// ─── Actions (T012, T019, T035) ──────────────────────────────────────────────
+
+async function archiveGroupAction(groupId, title) {
+    try {
+        await sendMessage('archiveGroup', { groupId, title });
+        await Promise.all([fetchAndRenderLiveTree(), fetchAndRenderArchived()]);
+    } catch (err) {
+        console.error('[Comet] Archive failed:', err);
+    }
+}
+
+async function restoreGroupAction(taskThreadId) {
+    try {
+        await sendMessage('restoreGroup', { taskThreadId });
+        await Promise.all([fetchAndRenderLiveTree(), fetchAndRenderArchived()]);
+    } catch (err) {
+        console.error('[Comet] Restore failed:', err);
+    }
+}
+
+async function deleteArchivedAction(taskThreadId) {
+    try {
+        await sendMessage('deleteArchived', { taskThreadId });
+        await fetchAndRenderArchived();
+    } catch (err) {
+        console.error('[Comet] Delete archived failed:', err);
+    }
+}
+
+async function focusTabAction(tabId, windowId) {
+    try {
+        await sendMessage('focusTab', { tabId, windowId });
+    } catch (err) {
+        console.error('[Comet] Focus tab failed:', err);
+    }
+}
+
+async function closeTabAction(tabId) {
+    try {
+        await sendMessage('closeTab', { tabId });
+        await fetchAndRenderLiveTree();
+    } catch (err) {
+        console.error('[Comet] Close tab failed:', err);
+    }
+}
+
+async function closeGroupAction(groupId) {
+    try {
+        await sendMessage('closeGroup', { groupId });
+        await fetchAndRenderLiveTree();
+    } catch (err) {
+        console.error('[Comet] Close group failed:', err);
+    }
+}
+
+async function restoreClosedAction(sessionId) {
+    try {
+        await sendMessage('restoreClosed', { sessionId });
+        await Promise.all([fetchAndRenderLiveTree(), fetchAndRenderRecent()]);
+    } catch (err) {
+        console.error('[Comet] Restore closed failed:', err);
+    }
+}
+
+// ─── Save All Action ─────────────────────────────────────────────────────────
+
+async function saveAllTabsAction() {
+    const btn = DOM.btnSaveAll;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '  Saving…';
+
+    try {
+        const result = await sendMessage('saveAllTabs');
+        btn.textContent = `  ✓ Saved ${result.totalTabs} tabs`;
+        setTimeout(() => {
+            btn.textContent = originalText;
+            btn.disabled = false;
+        }, 2000);
+        await Promise.all([fetchAndRenderLiveTree(), fetchAndRenderArchived()]);
+    } catch (err) {
+        console.error('[Comet] Save all failed:', err);
+        btn.textContent = originalText;
+        btn.disabled = false;
+    }
+}
+
+// ─── Rename Archive Action ───────────────────────────────────────────────────
+
+function startRename(titleEl, taskThreadId) {
+    // Replace title span with an input
+    const currentTitle = titleEl.textContent;
+    const input = el('input', {
+        className: 'rename-input',
+        type: 'text',
+        value: currentTitle,
+    });
+
+    titleEl.style.display = 'none';
+    titleEl.parentElement.insertBefore(input, titleEl.nextSibling);
+    input.focus();
+    input.select();
+
+    const finishRename = async () => {
+        const newTitle = input.value.trim();
+        input.remove();
+        titleEl.style.display = '';
+
+        if (newTitle && newTitle !== currentTitle) {
+            try {
+                await sendMessage('renameArchived', { taskThreadId, newTitle });
+                titleEl.textContent = newTitle;
+                // Update in state
+                const entry = state.archived.find(e => e.taskThreadId === taskThreadId);
+                if (entry) entry.title = newTitle;
+            } catch (err) {
+                console.error('[Comet] Rename failed:', err);
+            }
+        }
+    };
+
+    input.addEventListener('blur', finishRename);
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
+        if (e.key === 'Escape') { input.value = currentTitle; input.blur(); }
+    });
+}
+
+// ─── Single Tab Restore ──────────────────────────────────────────────────────
+
+async function restoreSingleTabAction(taskThreadId, url) {
+    try {
+        await sendMessage('restoreSingleTab', { taskThreadId, url });
+    } catch (err) {
+        console.error('[Comet] Single tab restore failed:', err);
+    }
+}
+
+// ─── Import/Export (T029-T030, T037) ─────────────────────────────────────────
+
+function initImportExport() {
+    // Save All button
+    DOM.btnSaveAll.addEventListener('click', saveAllTabsAction);
+
+    // Import button opens modal
+    DOM.btnImport.addEventListener('click', () => {
+        DOM.importOverlay.classList.remove('hidden');
+        DOM.importTextarea.value = '';
+        DOM.importPreview.classList.add('hidden');
+        DOM.importPreview.innerHTML = '';
+        DOM.importDuplicates.classList.add('hidden');
+        DOM.importConfirm.disabled = true;
+        DOM.importTextarea.focus();
+    });
+
+    // Close modal
+    const closeModal = () => DOM.importOverlay.classList.add('hidden');
+    DOM.importClose.addEventListener('click', closeModal);
+    DOM.importCancel.addEventListener('click', closeModal);
+    DOM.importOverlay.addEventListener('click', (e) => {
+        if (e.target === DOM.importOverlay) closeModal();
+    });
+
+    // Parse on input
+    DOM.importTextarea.addEventListener('input', () => {
+        const text = DOM.importTextarea.value.trim();
+        if (!text) {
+            DOM.importPreview.classList.add('hidden');
+            DOM.importConfirm.disabled = true;
+            return;
+        }
+        const parsed = parseOneTabExport(text);
+        renderImportPreview(parsed);
+    });
+
+    // Confirm import
+    DOM.importConfirm.addEventListener('click', async () => {
+        const groups = collectImportGroups();
+        if (!groups.length) return;
+
+        DOM.importConfirm.disabled = true;
+        DOM.importConfirm.textContent = 'Importing…';
+
+        try {
+            await sendMessage('importUrls', { groups });
+            closeModal();
+            await fetchAndRenderArchived();
+        } catch (err) {
+            console.error('[Comet] Import failed:', err);
+        } finally {
+            DOM.importConfirm.textContent = 'Import';
+        }
+    });
+
+    // Export button
+    DOM.btnExport.addEventListener('click', async () => {
+        try {
+            const data = await sendMessage('exportAll');
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `comet-sessions-${new Date().toISOString().slice(0, 10)}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        } catch (err) {
+            console.error('[Comet] Export failed:', err);
+        }
+    });
+}
+
+// ─── OneTab Parser (T029) ────────────────────────────────────────────────────
+
+function parseOneTabExport(text) {
+    const lines = text.split('\n');
+    const groups = [];
+    let currentGroup = { name: '', urls: [] };
+
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) {
+            // Blank line = group separator
+            if (currentGroup.urls.length > 0) {
+                groups.push(currentGroup);
+                currentGroup = { name: '', urls: [] };
+            }
+            continue;
+        }
+
+        // Parse: URL | Title  or  just URL
+        const pipeIdx = trimmed.indexOf(' | ');
+        let url, title;
+        if (pipeIdx !== -1) {
+            url = trimmed.substring(0, pipeIdx).trim();
+            title = trimmed.substring(pipeIdx + 3).trim();
+        } else {
+            url = trimmed;
+            title = '';
+        }
+
+        // Basic URL validation
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            currentGroup.urls.push({ url, title });
+        }
+    }
+
+    // Push last group
+    if (currentGroup.urls.length > 0) {
+        groups.push(currentGroup);
+    }
+
+    // Auto-name unnamed groups
+    groups.forEach((g, i) => {
+        if (!g.name) {
+            g.name = `Imported Group ${i + 1}`;
+        }
+    });
+
+    return groups;
+}
+
+function renderImportPreview(groups) {
+    DOM.importPreview.innerHTML = '';
+
+    if (!groups.length) {
+        DOM.importPreview.classList.add('hidden');
+        DOM.importConfirm.disabled = true;
+        return;
+    }
+
+    DOM.importPreview.classList.remove('hidden');
+    DOM.importConfirm.disabled = false;
+
+    // Count duplicates across groups
+    const allUrls = groups.flatMap(g => g.urls.map(u => u.url));
+    const urlCounts = {};
+    allUrls.forEach(u => { urlCounts[u] = (urlCounts[u] || 0) + 1; });
+    const duplicateCount = Object.values(urlCounts).filter(c => c > 1).length;
+
+    if (duplicateCount > 0) {
+        DOM.importDuplicates.classList.remove('hidden');
+        DOM.importDuplicateText.textContent = `${duplicateCount} duplicate URL(s) detected across groups`;
+    } else {
+        DOM.importDuplicates.classList.add('hidden');
+    }
+
+    for (const group of groups) {
+        const groupEl = el('div', { className: 'import-preview-group' },
+            el('div', { className: 'import-group-name' },
+                el('input', { type: 'text', value: group.name, dataset: { groupName: 'true' } }),
+                el('span', { className: 'import-group-count' }, `${group.urls.length} tabs`)
+            )
+        );
+
+        // Show first 3 URLs
+        const showCount = Math.min(group.urls.length, 3);
+        for (let i = 0; i < showCount; i++) {
+            groupEl.appendChild(el('div', { className: 'import-group-url' }, group.urls[i].url));
+        }
+        if (group.urls.length > 3) {
+            groupEl.appendChild(el('div', { className: 'import-group-url' }, `… and ${group.urls.length - 3} more`));
+        }
+
+        DOM.importPreview.appendChild(groupEl);
+    }
+}
+
+function collectImportGroups() {
+    const groups = [];
+    const text = DOM.importTextarea.value.trim();
+    if (!text) return groups;
+
+    const parsed = parseOneTabExport(text);
+    const nameInputs = DOM.importPreview.querySelectorAll('input[data-group-name]');
+
+    parsed.forEach((group, i) => {
+        const name = nameInputs[i] ? nameInputs[i].value.trim() : group.name;
+        groups.push({ name: name || group.name, urls: group.urls });
+    });
+
+    return groups;
+}
+
+// ─── Auto-Refresh (T011) ─────────────────────────────────────────────────────
+
+function startAutoRefresh() {
+    // Poll every 3 seconds for changes
+    state.refreshTimer = setInterval(async () => {
+        await Promise.all([
+            fetchAndRenderLiveTree(),
+            fetchAndRenderArchived(),
+            fetchAndRenderRecent(),
+        ]);
+    }, 3000);
+
+    // Health check every 10 seconds
+    state.healthTimer = setInterval(checkHealth, 10000);
+}
+
+function stopAutoRefresh() {
+    if (state.refreshTimer) {
+        clearInterval(state.refreshTimer);
+        state.refreshTimer = null;
+    }
+    if (state.healthTimer) {
+        clearInterval(state.healthTimer);
+        state.healthTimer = null;
+    }
+}
+
+// ─── Reconnect Button ────────────────────────────────────────────────────────
+
+function initReconnect() {
+    DOM.btnReconnect.addEventListener('click', async () => {
+        DOM.statusText.textContent = 'Reconnecting…';
+        await checkHealth();
+    });
+}
+
+// ─── Keyboard Navigation (T039) ──────────────────────────────────────────────
+
+function initKeyboardNav() {
+    document.addEventListener('keydown', (e) => {
+        // Don't intercept when typing in inputs/textareas
+        const isInput = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA';
+
+        // Escape closes search or modal
+        if (e.key === 'Escape') {
+            if (!DOM.importOverlay.classList.contains('hidden')) {
+                DOM.importOverlay.classList.add('hidden');
+            } else if (DOM.searchInput.value) {
+                DOM.searchInput.value = '';
+                DOM.searchClear.classList.add('hidden');
+                state.searchQuery = '';
+                applySearchFilter();
+                DOM.searchInput.blur();
+            }
+            return;
+        }
+
+        // Ctrl/Cmd+F focuses search
+        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+            e.preventDefault();
+            DOM.searchInput.focus();
+            DOM.searchInput.select();
+            return;
+        }
+
+        // Arrow key navigation only when not in an input field
+        if (isInput) return;
+
+        // Gather all focusable tree items
+        const focusable = [...document.querySelectorAll(
+            '.group-header, .tab-item, .archive-item, .recent-item, .section-header'
+        )].filter(el => el.offsetParent !== null); // only visible
+
+        if (!focusable.length) return;
+
+        const current = document.querySelector('.kb-focused');
+        let idx = current ? focusable.indexOf(current) : -1;
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            idx = Math.min(idx + 1, focusable.length - 1);
+            setKeyboardFocus(focusable, idx);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            idx = Math.max(idx - 1, 0);
+            setKeyboardFocus(focusable, idx);
+        } else if (e.key === 'Enter' && current) {
+            e.preventDefault();
+            current.click();
+        } else if (e.key === 'Tab') {
+            // Tab/Shift+Tab jumps between section headers
+            e.preventDefault();
+            const headers = [...document.querySelectorAll('.section-header')].filter(el => el.offsetParent !== null);
+            if (!headers.length) return;
+            const curHeader = current?.closest('.section')?.querySelector('.section-header');
+            let hIdx = curHeader ? headers.indexOf(curHeader) : -1;
+            hIdx = e.shiftKey
+                ? (hIdx <= 0 ? headers.length - 1 : hIdx - 1)
+                : (hIdx >= headers.length - 1 ? 0 : hIdx + 1);
+            setKeyboardFocus(focusable, focusable.indexOf(headers[hIdx]));
+        }
+    });
+}
+
+function setKeyboardFocus(items, idx) {
+    // Remove previous focus
+    document.querySelectorAll('.kb-focused').forEach(el => el.classList.remove('kb-focused'));
+    if (idx >= 0 && idx < items.length) {
+        items[idx].classList.add('kb-focused');
+        items[idx].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+}
+
+// ─── Initialization ──────────────────────────────────────────────────────────
+
+async function init() {
+    // Load persisted state
+    try {
+        const stored = await chrome.storage.local.get(['expandedGroups', 'expandedSections']);
+        if (stored.expandedGroups) {
+            state.expandedGroups = new Set(stored.expandedGroups);
+        }
+        if (stored.expandedSections) {
+            state.expandedSections = new Set(stored.expandedSections);
+        }
+    } catch {
+        // Ignore storage errors
+    }
+
+    // Initialize UI components
+    initSectionToggles();
+    initSearch();
+    initImportExport();
+    initReconnect();
+    initKeyboardNav();
+
+    // Perform initial data fetch
+    await checkHealth();
+    await Promise.all([
+        fetchAndRenderLiveTree(),
+        fetchAndRenderArchived(),
+        fetchAndRenderRecent(),
+    ]);
+
+    // Start auto-refresh
+    startAutoRefresh();
+}
+
+// Start when DOM is ready
+document.addEventListener('DOMContentLoaded', init);