// ==UserScript== // @name Continuity Command Center // @description Unified interface for managing your life as a timeline - connects to Notion, preserves browser context, and exports production-ready materials // @version 1.1.2 // @match https://*/* // @match http://*/* // @icon https://claude.ai/favicon.ico // @grant GM.getValue // @grant GM.setValue // @grant GM.deleteValue // @grant GM.listValues // @grant GM.xmlhttpRequest // @grant GM.setClipboard // @require https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js // @require https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js // ==/UserScript== (function() { 'use strict'; // ============================================================================ // CONFIGURATION & STATE // ============================================================================ const CONFIG = { NOTION_API_KEY: '', TIMELINE_DATABASE_ID: '', SHOWS_DATABASE_ID: '', TODAYS_STREAM_PAGE_ID: '', SYNC_INTERVAL: 30000, // 30 seconds COLORS: { Life: '#4ECDC4', Brand: '#FF6B6B', Business: '#95E1D3' } }; let STATE = { scenes: [], shows: [], currentView: 'timeline', // timeline, kanban, projects filters: { track: null, show: null, status: null, dateRange: null, energy: null }, isOnline: navigator.onLine, pendingChanges: [], isDarkMode: false, isConfigured: false }; // ============================================================================ // UTILITY FUNCTIONS // ============================================================================ function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } function formatDate(date) { return new Date(date).toISOString().split('T')[0]; } function generateId() { return Date.now().toString(36) + Math.random().toString(36).substr(2); } async function captureScreenshot() { try { const canvas = await html2canvas(document.body); return canvas.toDataURL('image/png'); } catch (error) { console.error('Screenshot capture failed:', error); return null; } } // ============================================================================ // NOTION API INTEGRATION // ============================================================================ class NotionAPI { constructor() { this.baseUrl = 'https://api.notion.com/v1'; this.version = '2022-06-28'; } async request(endpoint, method = 'GET', body = null) { const apiKey = await GM.getValue('notion_api_key', CONFIG.NOTION_API_KEY); if (!apiKey) { throw new Error('Notion API key not configured'); } const options = { method, url: `${this.baseUrl}${endpoint}`, headers: { 'Authorization': `Bearer ${apiKey}`, 'Notion-Version': this.version, 'Content-Type': 'application/json' }, responseType: 'json' }; if (body) { options.data = JSON.stringify(body); } try { const response = await GM.xmlhttpRequest(options); return JSON.parse(response.responseText); } catch (error) { console.error('Notion API request failed:', error); throw error; } } async queryDatabase(databaseId, filter = {}) { return await this.request(`/databases/${databaseId}/query`, 'POST', filter); } async createPage(databaseId, properties) { return await this.request('/pages', 'POST', { parent: { database_id: databaseId }, properties }); } async updatePage(pageId, properties) { return await this.request(`/pages/${pageId}`, 'PATCH', { properties }); } async getPage(pageId) { return await this.request(`/pages/${pageId}`); } async getDatabase(databaseId) { return await this.request(`/databases/${databaseId}`); } // Convert Notion page to Scene object pageToScene(page) { const props = page.properties; return { id: page.id, date: props.Date?.date?.start || formatDate(new Date()), track: props.Track?.select?.name || 'Life', show: props.Show?.relation?.[0]?.id || null, showName: props.Show?.title?.[0]?.plain_text || 'Unassigned', phase: props.Phase?.select?.name || '', scene: props.Scene?.title?.[0]?.plain_text || '', status: props.Status?.select?.name || 'Next', energy: props.Energy?.number || 5, notes: props.Notes?.rich_text?.[0]?.plain_text || '', links: props.Links?.url || '', notionUrl: page.url, lastEdited: page.last_edited_time }; } // Convert Scene object to Notion properties sceneToProperties(scene) { return { Date: { date: { start: scene.date } }, Track: { select: { name: scene.track } }, Show: scene.show ? { relation: [{ id: scene.show }] } : { relation: [] }, Phase: scene.phase ? { select: { name: scene.phase } } : { select: null }, Scene: { title: [{ text: { content: scene.scene } }] }, Status: { select: { name: scene.status } }, Energy: { number: scene.energy }, Notes: { rich_text: [{ text: { content: scene.notes || '' } }] }, Links: scene.links ? { url: scene.links } : { url: null } }; } pageToShow(page) { const props = page.properties; return { id: page.id, name: props.Name?.title?.[0]?.plain_text || 'Untitled Show', startDate: props['Start Date']?.date?.start || '', targetEnd: props['Target End']?.date?.start || '', currentPhase: props['Current Phase']?.select?.name || '', northStar: props['North Star Outcome']?.rich_text?.[0]?.plain_text || '', timeline: props.Timeline?.relation || [], notionUrl: page.url }; } } const notionAPI = new NotionAPI(); // ============================================================================ // DATA MANAGEMENT // ============================================================================ async function loadConfiguration() { CONFIG.NOTION_API_KEY = await GM.getValue('notion_api_key', ''); CONFIG.TIMELINE_DATABASE_ID = await GM.getValue('timeline_database_id', ''); CONFIG.SHOWS_DATABASE_ID = await GM.getValue('shows_database_id', ''); CONFIG.TODAYS_STREAM_PAGE_ID = await GM.getValue('todays_stream_page_id', ''); STATE.isDarkMode = await GM.getValue('dark_mode', false); STATE.isConfigured = !!(CONFIG.NOTION_API_KEY && CONFIG.TIMELINE_DATABASE_ID && CONFIG.SHOWS_DATABASE_ID); console.log('Configuration loaded:', STATE.isConfigured ? 'Configured' : 'Not configured'); } async function saveConfiguration(config) { await GM.setValue('notion_api_key', config.apiKey); await GM.setValue('timeline_database_id', config.timelineDbId); await GM.setValue('shows_database_id', config.showsDbId); await GM.setValue('todays_stream_page_id', config.todaysStreamPageId || ''); CONFIG.NOTION_API_KEY = config.apiKey; CONFIG.TIMELINE_DATABASE_ID = config.timelineDbId; CONFIG.SHOWS_DATABASE_ID = config.showsDbId; CONFIG.TODAYS_STREAM_PAGE_ID = config.todaysStreamPageId || ''; STATE.isConfigured = true; console.log('Configuration saved'); } async function syncFromNotion() { if (!STATE.isConfigured) { console.log('Skipping sync - not configured'); return; } try { console.log('Syncing from Notion...'); // Fetch scenes from Timeline database const timelineResponse = await notionAPI.queryDatabase(CONFIG.TIMELINE_DATABASE_ID, { sorts: [{ property: 'Date', direction: 'descending' }] }); STATE.scenes = timelineResponse.results.map(page => notionAPI.pageToScene(page)); // Fetch shows from Shows database const showsResponse = await notionAPI.queryDatabase(CONFIG.SHOWS_DATABASE_ID); STATE.shows = showsResponse.results.map(page => notionAPI.pageToShow(page)); // Cache locally await GM.setValue('cached_scenes', JSON.stringify(STATE.scenes)); await GM.setValue('cached_shows', JSON.stringify(STATE.shows)); await GM.setValue('last_sync', Date.now()); console.log(`Synced ${STATE.scenes.length} scenes and ${STATE.shows.length} shows`); renderCurrentView(); } catch (error) { console.error('Sync from Notion failed:', error); // Load from cache if sync fails await loadFromCache(); } } async function loadFromCache() { const cachedScenes = await GM.getValue('cached_scenes', '[]'); const cachedShows = await GM.getValue('cached_shows', '[]'); STATE.scenes = JSON.parse(cachedScenes); STATE.shows = JSON.parse(cachedShows); console.log('Loaded from cache:', STATE.scenes.length, 'scenes'); } async function createScene(sceneData) { const scene = { id: generateId(), date: sceneData.date || formatDate(new Date()), track: sceneData.track || 'Life', show: sceneData.show || null, showName: sceneData.showName || 'Unassigned', phase: sceneData.phase || '', scene: sceneData.scene || '', status: sceneData.status || 'Now', energy: sceneData.energy || 5, notes: sceneData.notes || '', links: sceneData.links || '', browserContext: sceneData.browserContext || null }; // Add to local state immediately STATE.scenes.unshift(scene); renderCurrentView(); // Sync to Notion if (STATE.isConfigured && STATE.isOnline) { try { const notionPage = await notionAPI.createPage( CONFIG.TIMELINE_DATABASE_ID, notionAPI.sceneToProperties(scene) ); scene.id = notionPage.id; scene.notionUrl = notionPage.url; // Update local cache await GM.setValue('cached_scenes', JSON.stringify(STATE.scenes)); } catch (error) { console.error('Failed to sync scene to Notion:', error); // Queue for later sync STATE.pendingChanges.push({ type: 'create', data: scene }); await GM.setValue('pending_changes', JSON.stringify(STATE.pendingChanges)); } } return scene; } async function updateScene(sceneId, updates) { const sceneIndex = STATE.scenes.findIndex(s => s.id === sceneId); if (sceneIndex === -1) return; Object.assign(STATE.scenes[sceneIndex], updates); renderCurrentView(); // Sync to Notion if (STATE.isConfigured && STATE.isOnline) { try { await notionAPI.updatePage(sceneId, notionAPI.sceneToProperties(STATE.scenes[sceneIndex])); await GM.setValue('cached_scenes', JSON.stringify(STATE.scenes)); } catch (error) { console.error('Failed to update scene in Notion:', error); STATE.pendingChanges.push({ type: 'update', id: sceneId, data: updates }); await GM.setValue('pending_changes', JSON.stringify(STATE.pendingChanges)); } } } async function processPendingChanges() { if (!STATE.isOnline || STATE.pendingChanges.length === 0) return; console.log('Processing', STATE.pendingChanges.length, 'pending changes...'); for (const change of STATE.pendingChanges) { try { if (change.type === 'create') { await notionAPI.createPage(CONFIG.TIMELINE_DATABASE_ID, notionAPI.sceneToProperties(change.data)); } else if (change.type === 'update') { await notionAPI.updatePage(change.id, notionAPI.sceneToProperties(change.data)); } } catch (error) { console.error('Failed to process pending change:', error); } } STATE.pendingChanges = []; await GM.setValue('pending_changes', '[]'); } // ============================================================================ // BROWSER CONTEXT PRESERVATION // ============================================================================ async function captureBrowserSession() { const tabs = []; // Note: We can't access other tabs directly in userscripts // This captures the current page context tabs.push({ url: window.location.href, title: document.title, timestamp: Date.now() }); const sessionData = { id: generateId(), timestamp: Date.now(), tabs, summary: `Browsing: ${document.title}`, currentUrl: window.location.href }; // Store session const sessions = JSON.parse(await GM.getValue('browser_sessions', '[]')); sessions.unshift(sessionData); // Keep last 50 sessions if (sessions.length > 50) sessions.length = 50; await GM.setValue('browser_sessions', JSON.stringify(sessions)); return sessionData; } async function savePageContext(captureType = 'url') { const context = { url: window.location.href, title: document.title, timestamp: Date.now(), type: captureType }; if (captureType === 'screenshot') { context.screenshot = await captureScreenshot(); } else if (captureType === 'selection') { context.selectedText = window.getSelection().toString(); } else if (captureType === 'full') { context.fullText = document.body.innerText.substring(0, 5000); // First 5000 chars } return context; } // ============================================================================ // UI COMPONENTS // ============================================================================ function createMainInterface() { const container = document.createElement('div'); container.id = 'continuity-command-center'; container.className = STATE.isDarkMode ? 'dark-mode' : ''; container.innerHTML = `

⚡ Continuity

${!STATE.isConfigured ? `

Welcome to Continuity Command Center

Connect your Notion workspace to get started.

` : `

`; document.body.appendChild(container); attachEventListeners(); if (STATE.isConfigured) { renderCurrentView(); } } function renderCurrentView() { const content = document.getElementById('ccc-main-content'); if (!content) return; const filteredScenes = applyFilters(STATE.scenes); if (STATE.currentView === 'timeline') { content.innerHTML = renderTimelineView(filteredScenes); } else if (STATE.currentView === 'kanban') { content.innerHTML = renderKanbanView(filteredScenes); } else if (STATE.currentView === 'projects') { content.innerHTML = renderProjectsView(); } attachCardEventListeners(); } function applyFilters(scenes) { return scenes.filter(scene => { if (STATE.filters.track && scene.track !== STATE.filters.track) return false; if (STATE.filters.show && scene.show !== STATE.filters.show) return false; if (STATE.filters.status && scene.status !== STATE.filters.status) return false; return true; }); } function renderTimelineView(scenes) { const groupedByDate = {}; scenes.forEach(scene => { if (!groupedByDate[scene.date]) { groupedByDate[scene.date] = []; } groupedByDate[scene.date].push(scene); }); const dates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a)); return `

${dates.map(date => `

${formatDateLabel(date)}

${groupedByDate[date].map(scene => renderSceneCard(scene)).join('')}

`).join('')}

`; } function renderKanbanView(scenes) { const columns = ['Next', 'Now', 'In Progress', 'Complete']; return `

${columns.map(status => `

${status}

${scenes.filter(s => s.status === status).length}

${scenes.filter(s => s.status === status).map(scene => renderSceneCard(scene, true)).join('')}

`).join('')}

`; } function renderProjectsView() { return `

${STATE.shows.map(show => { const showScenes = STATE.scenes.filter(s => s.show === show.id); const completedScenes = showScenes.filter(s => s.status === 'Complete').length; const progress = showScenes.length > 0 ? (completedScenes / showScenes.length * 100) : 0; return `

${show.name}

${show.currentPhase}

${completedScenes}/${showScenes.length} scenes

🎯 ${show.northStar} 📅 ${show.startDate} → ${show.targetEnd}

`; }).join('')}

`; } function renderSceneCard(scene, draggable = false) { const trackColor = CONFIG.COLORS[scene.track] || '#999'; return `

${scene.showName} ${scene.status}

${scene.scene || 'Untitled Scene'}

${scene.phase ? `${scene.phase}` : ''} ${scene.notes ? `

${scene.notes.substring(0, 100)}${scene.notes.length > 100 ? '...' : ''}

` : ''}

⚡ ${scene.energy}/10 ${scene.links ? `🔗` : ''} ${scene.browserContext ? '💾' : ''}

`; } function formatDateLabel(dateString) { const date = new Date(dateString); const today = new Date(); const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1); if (dateString === formatDate(today)) return 'Today'; if (dateString === formatDate(yesterday)) return 'Yesterday'; return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); } function showQuickCaptureModal() { const modal = document.createElement('div'); modal.className = 'ccc-modal'; modal.innerHTML = ` `; document.body.appendChild(modal); let selectedType = 'url'; // Capture type selection modal.querySelectorAll('.ccc-capture-type').forEach(btn => { btn.addEventListener('click', () => { modal.querySelectorAll('.ccc-capture-type').forEach(b => b.classList.remove('active')); btn.classList.add('active'); selectedType = btn.dataset.type; }); }); // Close modal const closeModal = () => modal.remove(); modal.querySelector('#ccc-modal-close').addEventListener('click', closeModal); modal.querySelector('#ccc-capture-cancel').addEventListener('click', closeModal); // Save capture modal.querySelector('#ccc-capture-save').addEventListener('click', async () => { const title = modal.querySelector('#ccc-capture-title').value; const track = modal.querySelector('#ccc-capture-track').value; const show = modal.querySelector('#ccc-capture-show').value; const notes = modal.querySelector('#ccc-capture-notes').value; const context = await savePageContext(selectedType); const showName = STATE.shows.find(s => s.id === show)?.name || 'Unassigned'; await createScene({ scene: title, track, show: show || null, showName, status: 'Now', notes, links: window.location.href, browserContext: context }); closeModal(); showNotification('Scene captured successfully! ✨'); }); } function showSettingsModal() { const modal = document.createElement('div'); modal.className = 'ccc-modal'; modal.innerHTML = ` `; document.body.appendChild(modal); const closeModal = () => modal.remove(); modal.querySelector('#ccc-modal-close').addEventListener('click', closeModal); modal.querySelector('#ccc-settings-cancel').addEventListener('click', closeModal); modal.querySelector('#ccc-settings-save').addEventListener('click', async () => { const config = { apiKey: modal.querySelector('#ccc-settings-api-key').value, timelineDbId: modal.querySelector('#ccc-settings-timeline-db').value, showsDbId: modal.querySelector('#ccc-settings-shows-db').value, todaysStreamPageId: modal.querySelector('#ccc-settings-stream-page').value }; await saveConfiguration(config); closeModal(); // Recreate interface with configuration document.getElementById('continuity-command-center').remove(); createMainInterface(); // Initial sync await syncFromNotion(); showNotification('Configuration saved! Syncing with Notion... ⚡'); }); } function showExportModal() { const modal = document.createElement('div'); modal.className = 'ccc-modal'; modal.innerHTML = ` `; document.body.appendChild(modal); const closeModal = () => modal.remove(); modal.querySelector('#ccc-modal-close').addEventListener('click', closeModal); modal.querySelector('#ccc-export-daily').addEventListener('click', () => { exportDailyJournal(); closeModal(); }); modal.querySelector('#ccc-export-problem').addEventListener('click', () => { exportProblemSolution(); closeModal(); }); modal.querySelector('#ccc-export-execution').addEventListener('click', () => { exportExecutionReady(); closeModal(); }); } function showNotification(message) { const notification = document.createElement('div'); notification.className = 'ccc-notification'; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.classList.add('show'); }, 10); setTimeout(() => { notification.classList.remove('show'); setTimeout(() => notification.remove(), 300); }, 3000); } // ============================================================================ // EXPORT FUNCTIONS // ============================================================================ async function exportDailyJournal() { const today = formatDate(new Date()); const todayScenes = STATE.scenes.filter(s => s.date === today); const markdown = `# Daily Journal - ${formatDateLabel(today)} ## Today's Story ${todayScenes.map(scene => ` ### ${scene.scene} **Track:** ${scene.track} | **Show:** ${scene.showName} | **Status:** ${scene.status} **Energy:** ${scene.energy}/10 ${scene.notes} ${scene.links ? `🔗 [Link](${scene.links})` : ''} ${scene.browserContext ? '💾 Browser context captured' : ''} --- `).join('\n')} ## Summary - **Total Scenes:** ${todayScenes.length} - **By Track:** Life (${todayScenes.filter(s => s.track === 'Life').length}), Brand (${todayScenes.filter(s => s.track === 'Brand').length}), Business (${todayScenes.filter(s => s.track === 'Business').length}) - **Average Energy:** ${(todayScenes.reduce((sum, s) => sum + s.energy, 0) / todayScenes.length).toFixed(1)}/10 ## Tomorrow's Focus ${todayScenes.filter(s => s.status === 'In Progress').map(s => `- Continue: ${s.scene}`).join('\n')} ${STATE.scenes.filter(s => s.status === 'Next').slice(0, 3).map(s => `- Start: ${s.scene}`).join('\n')} `; await GM.setClipboard(markdown); showNotification('Daily journal copied to clipboard! 📋'); } async function exportProblemSolution() { const recentScenes = STATE.scenes.slice(0, 10); const markdown = `# Problem-Solution Brief ## Overview Generated from ${recentScenes.length} recent scenes across your Timeline. ${recentScenes.map(scene => ` ## ${scene.scene} **Context** - Track: ${scene.track} - Show: ${scene.showName} - Phase: ${scene.phase} - Date: ${scene.date} **Problem/Challenge** ${scene.notes || 'No notes captured'} **Approach** Status: ${scene.status} Energy Level: ${scene.energy}/10 **Resources** ${scene.links ? `- [Reference](${scene.links})` : 'No links'} --- `).join('\n')} ## Patterns & Insights - Most active track: ${getMostActiveTrack()} - Current focus: ${STATE.shows[0]?.name || 'Multiple shows'} - Completion rate: ${getCompletionRate()}% `; await GM.setClipboard(markdown); showNotification('Problem-Solution brief copied to clipboard! 🎯'); } async function exportExecutionReady() { const { jsPDF } = jspdf; const doc = new jsPDF(); doc.setFontSize(20); doc.text('Execution-Ready Export', 20, 20); doc.setFontSize(12); let y = 40; STATE.scenes.filter(s => s.status === 'Complete').slice(0, 10).forEach(scene => { if (y > 270) { doc.addPage(); y = 20; } doc.setFontSize(14); doc.text(scene.scene, 20, y); y += 10; doc.setFontSize(10); doc.text(`${scene.track} | ${scene.showName}`, 20, y); y += 7; if (scene.notes) { const lines = doc.splitTextToSize(scene.notes, 170); doc.text(lines, 20, y); y += lines.length * 5 + 10; } y += 5; }); doc.save('continuity-execution-ready.pdf'); showNotification('Execution-ready PDF downloaded! 🚀'); } function getMostActiveTrack() { const counts = { Life: 0, Brand: 0, Business: 0 }; STATE.scenes.forEach(s => counts[s.track]++); return Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b); } function getCompletionRate() { const completed = STATE.scenes.filter(s => s.status === 'Complete').length; return STATE.scenes.length > 0 ? Math.round((completed / STATE.scenes.length) * 100) : 0; } // ============================================================================ // EVENT LISTENERS // ============================================================================ function attachEventListeners() { const container = document.getElementById('continuity-command-center'); // Toggle sidebar const toggleBtn = document.getElementById('ccc-toggle-btn'); const sidebar = container.querySelector('.ccc-sidebar'); toggleBtn?.addEventListener('click', () => { sidebar.classList.toggle('ccc-collapsed'); }); // Close button document.getElementById('ccc-close-btn')?.addEventListener('click', () => { sidebar.classList.add('ccc-collapsed'); }); // Theme toggle document.getElementById('ccc-theme-btn')?.addEventListener('click', async () => { STATE.isDarkMode = !STATE.isDarkMode; container.classList.toggle('dark-mode'); await GM.setValue('dark_mode', STATE.isDarkMode); document.getElementById('ccc-theme-btn').textContent = STATE.isDarkMode ? '☀️' : '🌙'; }); // Sync button document.getElementById('ccc-sync-btn')?.addEventListener('click', async () => { showNotification('Syncing with Notion... ⚡'); await syncFromNotion(); showNotification('Sync complete! ✨'); }); // Settings button document.getElementById('ccc-settings-btn')?.addEventListener('click', showSettingsModal); document.getElementById('ccc-setup-btn')?.addEventListener('click', showSettingsModal); // View tabs container.querySelectorAll('.ccc-tab').forEach(tab => { tab.addEventListener('click', () => { STATE.currentView = tab.dataset.view; container.querySelectorAll('.ccc-tab').forEach(t => t.classList.remove('active')); tab.classList.add('active'); renderCurrentView(); }); }); // Filters document.getElementById('ccc-filter-track')?.addEventListener('change', (e) => { STATE.filters.track = e.target.value || null; renderCurrentView(); }); document.getElementById('ccc-filter-show')?.addEventListener('change', (e) => { STATE.filters.show = e.target.value || null; renderCurrentView(); }); document.getElementById('ccc-filter-status')?.addEventListener('change', (e) => { STATE.filters.status = e.target.value || null; renderCurrentView(); }); // Quick capture document.getElementById('ccc-capture-btn')?.addEventListener('click', showQuickCaptureModal); // Export document.getElementById('ccc-export-btn')?.addEventListener('click', showExportModal); } function attachCardEventListeners() { // Drag and drop for Kanban const draggableCards = document.querySelectorAll('.ccc-scene-card.draggable'); draggableCards.forEach(card => { card.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', card.dataset.sceneId); card.classList.add('dragging'); }); card.addEventListener('dragend', () => { card.classList.remove('dragging'); }); }); const kanbanColumns = document.querySelectorAll('.ccc-kanban-column'); kanbanColumns.forEach(column => { column.addEventListener('dragover', (e) => { e.preventDefault(); column.classList.add('drag-over'); }); column.addEventListener('dragleave', () => { column.classList.remove('drag-over'); }); column.addEventListener('drop', async (e) => { e.preventDefault(); column.classList.remove('drag-over'); const sceneId = e.dataTransfer.getData('text/plain'); const newStatus = column.dataset.status; await updateScene(sceneId, { status: newStatus }); showNotification(`Scene moved to ${newStatus}! ✨`); }); }); } // ============================================================================ // KEYBOARD SHORTCUTS // ============================================================================ function setupKeyboardShortcuts() { console.log('Setting up keyboard shortcuts...'); document.addEventListener('keydown', (e) => { // Cmd+C (Mac) or Ctrl+C (Windows/Linux): Quick Capture if ((e.metaKey || e.ctrlKey) && e.key === 'c' && !e.shiftKey && !e.altKey) { e.preventDefault(); console.log('Cmd/Ctrl+C pressed - opening quick capture'); if (!STATE.isConfigured) { showNotification('Please configure Notion first! Click the ⚡ button.'); return; } showQuickCaptureModal(); } // Cmd+S (Mac) or Ctrl+S (Windows/Linux): Toggle Sidebar if ((e.metaKey || e.ctrlKey) && e.key === 's' && !e.shiftKey && !e.altKey) { e.preventDefault(); console.log('Cmd/Ctrl+S pressed - toggling sidebar'); const sidebar = document.querySelector('.ccc-sidebar'); sidebar?.classList.toggle('ccc-collapsed'); } // Cmd+E (Mac) or Ctrl+E (Windows/Linux): Export if ((e.metaKey || e.ctrlKey) && e.key === 'e' && !e.shiftKey && !e.altKey) { e.preventDefault(); console.log('Cmd/Ctrl+E pressed - opening export modal'); if (!STATE.isConfigured) { showNotification('Please configure Notion first! Click the ⚡ button.'); return; } showExportModal(); } }); console.log('Keyboard shortcuts registered successfully'); } // ============================================================================ // STYLES // ============================================================================ function injectStyles() { const styles = ` #continuity-command-center { --ccc-primary: #4ECDC4; --ccc-secondary: #FF6B6B; --ccc-tertiary: #95E1D3; --ccc-bg: #ffffff; --ccc-bg-secondary: #f8f9fa; --ccc-text: #2c3e50; --ccc-text-secondary: #7f8c8d; --ccc-border: #e1e8ed; --ccc-shadow: rgba(0, 0, 0, 0.1); } #continuity-command-center.dark-mode { --ccc-bg: #1a1a1a; --ccc-bg-secondary: #2d2d2d; --ccc-text: #e0e0e0; --ccc-text-secondary: #a0a0a0; --ccc-border: #404040; --ccc-shadow: rgba(0, 0, 0, 0.3); } .ccc-sidebar { position: fixed; top: 0; right: 0; width: 480px; height: 100vh; background: var(--ccc-bg); color: var(--ccc-text); box-shadow: -2px 0 20px var(--ccc-shadow); z-index: 999999; display: flex; flex-direction: column; transition: transform 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .ccc-sidebar.ccc-collapsed { transform: translateX(100%); } .ccc-header { padding: 20px; border-bottom: 1px solid var(--ccc-border); display: flex; justify-content: space-between; align-items: center; background: var(--ccc-bg-secondary); } .ccc-header h1 { margin: 0; font-size: 20px; font-weight: 600; } .ccc-header-actions { display: flex; gap: 8px; } .ccc-btn-icon { background: none; border: none; font-size: 18px; cursor: pointer; padding: 8px; border-radius: 6px; transition: background 0.2s; } .ccc-btn-icon:hover { background: var(--ccc-border); } .ccc-setup-prompt { padding: 40px 20px; text-align: center; } .ccc-setup-prompt h2 { margin: 0 0 10px 0; font-size: 18px; } .ccc-setup-prompt p { margin: 0 0 20px 0; color: var(--ccc-text-secondary); } .ccc-view-tabs { display: flex; padding: 10px 20px; gap: 8px; border-bottom: 1px solid var(--ccc-border); } .ccc-tab { flex: 1; padding: 10px; background: none; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ccc-text-secondary); transition: all 0.2s; } .ccc-tab.active { background: var(--ccc-primary); color: white; } .ccc-filters { padding: 15px 20px; display: flex; gap: 10px; border-bottom: 1px solid var(--ccc-border); } .ccc-select { flex: 1; padding: 8px 12px; border: 1px solid var(--ccc-border); border-radius: 6px; background: var(--ccc-bg); color: var(--ccc-text); font-size: 13px; cursor: pointer; } .ccc-content { flex: 1; overflow-y: auto; padding: 20px; } .ccc-timeline { display: flex; flex-direction: column; gap: 30px; } .ccc-timeline-date-label { font-weight: 600; font-size: 14px; color: var(--ccc-text-secondary); margin-bottom: 15px; padding-left: 10px; border-left: 3px solid var(--ccc-primary); } .ccc-timeline-scenes { display: flex; flex-direction: column; gap: 12px; } .ccc-scene-card { background: var(--ccc-bg-secondary); border-radius: 8px; overflow: hidden; display: flex; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; } .ccc-scene-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--ccc-shadow); } .ccc-scene-card.dragging { opacity: 0.5; } .ccc-scene-track { width: 4px; flex-shrink: 0; } .ccc-scene-content { padding: 15px; flex: 1; } .ccc-scene-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ccc-scene-show { font-size: 12px; font-weight: 600; color: var(--ccc-primary); } .ccc-scene-status { font-size: 11px; padding: 3px 8px; background: var(--ccc-border); border-radius: 12px; color: var(--ccc-text-secondary); } .ccc-scene-title { margin: 0 0 8px 0; font-size: 15px; font-weight: 600; } .ccc-scene-phase { display: inline-block; font-size: 11px; padding: 3px 8px; background: var(--ccc-primary); color: white; border-radius: 4px; margin-bottom: 8px; } .ccc-scene-notes { margin: 8px 0; font-size: 13px; color: var(--ccc-text-secondary); line-height: 1.5; } .ccc-scene-meta { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ccc-text-secondary); margin-top: 8px; } .ccc-scene-link { text-decoration: none; } .ccc-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; height: 100%; } .ccc-kanban-column { background: var(--ccc-bg-secondary); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; min-height: 0; } .ccc-kanban-column.drag-over { background: var(--ccc-border); } .ccc-kanban-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--ccc-border); } .ccc-kanban-header h3 { margin: 0; font-size: 14px; font-weight: 600; } .ccc-kanban-count { background: var(--ccc-primary); color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; } .ccc-kanban-cards { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; } .ccc-projects { display: flex; flex-direction: column; gap: 15px; } .ccc-project-card { background: var(--ccc-bg-secondary); border-radius: 8px; padding: 20px; } .ccc-project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .ccc-project-header h3 { margin: 0; font-size: 16px; font-weight: 600; } .ccc-project-phase { font-size: 12px; padding: 4px 10px; background: var(--ccc-primary); color: white; border-radius: 12px; } .ccc-project-progress { margin-bottom: 15px; } .ccc-progress-bar { height: 8px; background: var(--ccc-border); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .ccc-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ccc-primary), var(--ccc-secondary)); transition: width 0.3s ease; } .ccc-progress-text { font-size: 12px; color: var(--ccc-text-secondary); } .ccc-project-meta { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ccc-text-secondary); margin-bottom: 15px; } .ccc-project-actions { display: flex; gap: 8px; } .ccc-footer { padding: 15px 20px; border-top: 1px solid var(--ccc-border); display: flex; gap: 10px; } .ccc-btn-primary { flex: 1; padding: 12px 20px; background: var(--ccc-primary); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .ccc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3); } .ccc-btn-secondary { flex: 1; padding: 12px 20px; background: var(--ccc-bg-secondary); color: var(--ccc-text); border: 1px solid var(--ccc-border); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .ccc-btn-secondary:hover { background: var(--ccc-border); transform: translateY(-2px); } .ccc-btn-small { padding: 8px 16px; background: var(--ccc-primary); color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .ccc-btn-small:hover { opacity: 0.9; } .ccc-toggle-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: var(--ccc-primary); color: white; border: none; border-radius: 50%; font-size: 28px; cursor: pointer; box-shadow: 0 4px 20px var(--ccc-shadow); z-index: 999998; transition: transform 0.2s; } .ccc-toggle-btn:hover { transform: scale(1.1); } .ccc-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000000; backdrop-filter: blur(4px); } .ccc-modal-content { background: var(--ccc-bg); border-radius: 12px; width: 90%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .ccc-modal-header { padding: 20px; border-bottom: 1px solid var(--ccc-border); display: flex; justify-content: space-between; align-items: center; } .ccc-modal-header h2 { margin: 0; font-size: 20px; font-weight: 600; } .ccc-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .ccc-modal-footer { padding: 20px; border-top: 1px solid var(--ccc-border); display: flex; gap: 10px; justify-content: flex-end; } .ccc-form-group { margin-bottom: 20px; } .ccc-form-group label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ccc-text); } .ccc-form-group small { display: block; margin-top: 5px; font-size: 12px; color: var(--ccc-text-secondary); } .ccc-input { width: 100%; padding: 10px 12px; border: 1px solid var(--ccc-border); border-radius: 6px; background: var(--ccc-bg); color: var(--ccc-text); font-size: 14px; box-sizing: border-box; } .ccc-textarea { width: 100%; min-height: 100px; padding: 10px 12px; border: 1px solid var(--ccc-border); border-radius: 6px; background: var(--ccc-bg); color: var(--ccc-text); font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box; } .ccc-capture-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ccc-capture-type { padding: 12px; background: var(--ccc-bg-secondary); border: 2px solid var(--ccc-border); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; } .ccc-capture-type:hover { border-color: var(--ccc-primary); transform: translateY(-2px); } .ccc-capture-type.active { background: var(--ccc-primary); color: white; border-color: var(--ccc-primary); } .ccc-export-options { display: flex; flex-direction: column; gap: 15px; } .ccc-export-option { padding: 20px; background: var(--ccc-bg-secondary); border: 2px solid var(--ccc-border); border-radius: 8px; cursor: pointer; text-align: left; transition: all 0.2s; } .ccc-export-option:hover { border-color: var(--ccc-primary); transform: translateY(-2px); } .ccc-export-icon { font-size: 32px; display: block; margin-bottom: 10px; } .ccc-export-option h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; } .ccc-export-option p { margin: 0; font-size: 13px; color: var(--ccc-text-secondary); } .ccc-settings-help { margin-top: 20px; padding: 15px; background: var(--ccc-bg-secondary); border-radius: 8px; } .ccc-settings-help h3 { margin: 0 0 10px 0; font-size: 14px; font-weight: 600; } .ccc-settings-help ol { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ccc-text-secondary); } .ccc-settings-help li { margin-bottom: 5px; } .ccc-notification { position: fixed; bottom: 100px; right: 30px; background: var(--ccc-primary); color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 20px var(--ccc-shadow); z-index: 1000001; font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; } .ccc-notification.show { opacity: 1; transform: translateY(0); } /* Scrollbar styling */ .ccc-content::-webkit-scrollbar, .ccc-kanban-cards::-webkit-scrollbar, .ccc-modal-body::-webkit-scrollbar { width: 8px; } .ccc-content::-webkit-scrollbar-track, .ccc-kanban-cards::-webkit-scrollbar-track, .ccc-modal-body::-webkit-scrollbar-track { background: var(--ccc-bg-secondary); } .ccc-content::-webkit-scrollbar-thumb, .ccc-kanban-cards::-webkit-scrollbar-thumb, .ccc-modal-body::-webkit-scrollbar-thumb { background: var(--ccc-border); border-radius: 4px; } .ccc-content::-webkit-scrollbar-thumb:hover, .ccc-kanban-cards::-webkit-scrollbar-thumb:hover, .ccc-modal-body::-webkit-scrollbar-thumb:hover { background: var(--ccc-text-secondary); } `; const styleSheet = document.createElement('style'); styleSheet.textContent = styles; document.head.appendChild(styleSheet); } // ============================================================================ // INITIALIZATION // ============================================================================ async function init() { console.log('Initializing Continuity Command Center...'); // Load configuration await loadConfiguration(); // Load cached data await loadFromCache(); // Inject styles injectStyles(); // Create main interface createMainInterface(); // Setup keyboard shortcuts setupKeyboardShortcuts(); console.log('Keyboard shortcuts active. Press Cmd/Ctrl+C to capture, Cmd/Ctrl+S to toggle sidebar, Cmd/Ctrl+E to export'); // Initial sync if configured if (STATE.isConfigured) { await syncFromNotion(); // Setup periodic sync setInterval(async () => { if (STATE.isOnline && STATE.isConfigured) { await syncFromNotion(); } }, CONFIG.SYNC_INTERVAL); } // Monitor online/offline status window.addEventListener('online', async () => { STATE.isOnline = true; console.log('Back online - processing pending changes...'); await processPendingChanges(); await syncFromNotion(); }); window.addEventListener('offline', () => { STATE.isOnline = false; console.log('Offline mode - changes will be queued'); }); // Auto-capture browser session before page unload window.addEventListener('beforeunload', async () => { await captureBrowserSession(); }); console.log('Continuity Command Center initialized! ⚡'); } // Start the extension if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

⚡ Continuity

Welcome to Continuity Command Center

${status}

${show.name}

${scene.scene || 'Untitled Scene'}

Quick Capture

Settings

How to find Database IDs:

Export

Daily Journal

Problem-Solution Brief

Execution-Ready

Continuity Command Center

About