opencode-replay 1.0.0

package/dist/assets/prism.css

@@ -0,0 +1,273 @@
+/**
+ * Prism.js Theme - GitHub inspired
+ * Optimized for OpenCode Replay with both light and dark mode support
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #24292e;
+  background: none;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  tab-size: 2;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: var(--spacing-md);
+  margin: var(--spacing-md) 0;
+  overflow: auto;
+  border-radius: var(--radius-md);
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+}
+
+/* Token colors - Light mode */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a737d;
+  font-style: italic;
+}
+
+.token.punctuation {
+  color: #24292e;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #005cc5;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #22863a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #d73a49;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #d73a49;
+}
+
+.token.function,
+.token.class-name {
+  color: #6f42c1;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e36209;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+/* Line highlighting */
+.line-highlight {
+  background: rgba(255, 255, 0, 0.1);
+  border-left: 3px solid #f1c40f;
+  margin-left: calc(-1 * var(--spacing-md) - 3px);
+  padding-left: calc(var(--spacing-md) + 3px);
+}
+
+/* Line numbers */
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em;
+  letter-spacing: -1px;
+  border-right: 1px solid var(--color-border);
+  user-select: none;
+}
+
+.line-numbers-rows > span {
+  display: block;
+  counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: var(--color-text-muted);
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+:root[data-theme="dark"] code[class*="language-"],
+:root[data-theme="dark"] pre[class*="language-"] {
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .token.comment,
+:root[data-theme="dark"] .token.prolog,
+:root[data-theme="dark"] .token.doctype,
+:root[data-theme="dark"] .token.cdata {
+  color: #8b949e;
+}
+
+:root[data-theme="dark"] .token.punctuation {
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .token.property,
+:root[data-theme="dark"] .token.tag,
+:root[data-theme="dark"] .token.boolean,
+:root[data-theme="dark"] .token.number,
+:root[data-theme="dark"] .token.constant,
+:root[data-theme="dark"] .token.symbol,
+:root[data-theme="dark"] .token.deleted {
+  color: #79c0ff;
+}
+
+:root[data-theme="dark"] .token.selector,
+:root[data-theme="dark"] .token.attr-name,
+:root[data-theme="dark"] .token.string,
+:root[data-theme="dark"] .token.char,
+:root[data-theme="dark"] .token.builtin,
+:root[data-theme="dark"] .token.inserted {
+  color: #a5d6ff;
+}
+
+:root[data-theme="dark"] .token.operator,
+:root[data-theme="dark"] .token.entity,
+:root[data-theme="dark"] .token.url,
+:root[data-theme="dark"] .language-css .token.string,
+:root[data-theme="dark"] .style .token.string {
+  color: #ff7b72;
+}
+
+:root[data-theme="dark"] .token.atrule,
+:root[data-theme="dark"] .token.attr-value,
+:root[data-theme="dark"] .token.keyword {
+  color: #ff7b72;
+}
+
+:root[data-theme="dark"] .token.function,
+:root[data-theme="dark"] .token.class-name {
+  color: #d2a8ff;
+}
+
+:root[data-theme="dark"] .token.regex,
+:root[data-theme="dark"] .token.important,
+:root[data-theme="dark"] .token.variable {
+  color: #ffa657;
+}
+
+/* Auto dark mode */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) code[class*="language-"],
+  :root:not([data-theme="light"]) pre[class*="language-"] {
+    color: #e6edf3;
+  }
+
+  :root:not([data-theme="light"]) .token.comment,
+  :root:not([data-theme="light"]) .token.prolog,
+  :root:not([data-theme="light"]) .token.doctype,
+  :root:not([data-theme="light"]) .token.cdata {
+    color: #8b949e;
+  }
+
+  :root:not([data-theme="light"]) .token.punctuation {
+    color: #e6edf3;
+  }
+
+  :root:not([data-theme="light"]) .token.property,
+  :root:not([data-theme="light"]) .token.tag,
+  :root:not([data-theme="light"]) .token.boolean,
+  :root:not([data-theme="light"]) .token.number,
+  :root:not([data-theme="light"]) .token.constant,
+  :root:not([data-theme="light"]) .token.symbol,
+  :root:not([data-theme="light"]) .token.deleted {
+    color: #79c0ff;
+  }
+
+  :root:not([data-theme="light"]) .token.selector,
+  :root:not([data-theme="light"]) .token.attr-name,
+  :root:not([data-theme="light"]) .token.string,
+  :root:not([data-theme="light"]) .token.char,
+  :root:not([data-theme="light"]) .token.builtin,
+  :root:not([data-theme="light"]) .token.inserted {
+    color: #a5d6ff;
+  }
+
+  :root:not([data-theme="light"]) .token.operator,
+  :root:not([data-theme="light"]) .token.entity,
+  :root:not([data-theme="light"]) .token.url,
+  :root:not([data-theme="light"]) .language-css .token.string,
+  :root:not([data-theme="light"]) .style .token.string {
+    color: #ff7b72;
+  }
+
+  :root:not([data-theme="light"]) .token.atrule,
+  :root:not([data-theme="light"]) .token.attr-value,
+  :root:not([data-theme="light"]) .token.keyword {
+    color: #ff7b72;
+  }
+
+  :root:not([data-theme="light"]) .token.function,
+  :root:not([data-theme="light"]) .token.class-name {
+    color: #d2a8ff;
+  }
+
+  :root:not([data-theme="light"]) .token.regex,
+  :root:not([data-theme="light"]) .token.important,
+  :root:not([data-theme="light"]) .token.variable {
+    color: #ffa657;
+  }
+}

package/dist/assets/search.js

@@ -0,0 +1,445 @@
+/**
+ * OpenCode Replay - Client-side Search
+ * 
+ * Features:
+ * - Fetches paginated HTML pages on-demand
+ * - Searches within .message elements using case-insensitive substring matching
+ * - Displays results as they're found (streaming UX)
+ * - Highlights matches with <mark> tags
+ * - Supports URL fragment for shareable searches (#search=query)
+ * - Progressive enhancement - hidden for file:// protocol (CORS)
+ */
+
+(function() {
+  'use strict';
+
+  // Configuration
+  var BATCH_SIZE = 3; // Pages to fetch in parallel
+  var MAX_RESULTS = 100; // Maximum results to display
+
+  // State
+  var modal = null;
+  var searchInput = null;
+  var searchStatus = null;
+  var searchResults = null;
+  var isSearching = false;
+
+  // Detect page context
+  var isSessionPage = window.location.pathname.includes('/sessions/');
+  var isIndexPage = !isSessionPage;
+  
+  // Get total pages from data attribute (set by template)
+  var totalPages = parseInt(document.body.dataset.totalPages || '0', 10);
+
+  /**
+   * Check if we can perform search (CORS limitation for file://)
+   */
+  function canSearch() {
+    return window.location.protocol !== 'file:';
+  }
+
+  /**
+   * Escape HTML special characters
+   */
+  function escapeHtml(str) {
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  /**
+   * Escape regex special characters
+   */
+  function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  /**
+   * Create the search modal HTML
+   */
+  function createModal() {
+    var modalHtml = '<dialog id="search-modal" class="search-modal">' +
+      '<div class="search-modal-content">' +
+        '<div class="search-modal-header">' +
+          '<div class="search-input-wrapper">' +
+            '<span class="search-input-icon">&#128269;</span>' +
+            '<input type="text" id="search-modal-input" placeholder="Search messages..." autocomplete="off" />' +
+          '</div>' +
+          '<button type="button" class="search-modal-close" aria-label="Close search">&times;</button>' +
+        '</div>' +
+        '<div id="search-status" class="search-status"></div>' +
+        '<div id="search-results" class="search-results"></div>' +
+      '</div>' +
+    '</dialog>';
+
+    var container = document.createElement('div');
+    container.innerHTML = modalHtml;
+    document.body.appendChild(container.firstChild);
+
+    modal = document.getElementById('search-modal');
+    searchInput = document.getElementById('search-modal-input');
+    searchStatus = document.getElementById('search-status');
+    searchResults = document.getElementById('search-results');
+
+    // Event listeners
+    var closeBtn = modal.querySelector('.search-modal-close');
+    closeBtn.addEventListener('click', closeModal);
+
+    modal.addEventListener('click', function(e) {
+      if (e.target === modal) {
+        closeModal();
+      }
+    });
+
+    modal.addEventListener('cancel', function(e) {
+      e.preventDefault();
+      closeModal();
+    });
+
+    var debounceTimer = null;
+    searchInput.addEventListener('input', function() {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(function() {
+        performSearch(searchInput.value.trim());
+      }, 200);
+    });
+
+    searchInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') {
+        closeModal();
+      }
+    });
+  }
+
+  /**
+   * Open the search modal
+   */
+  function openModal(initialQuery) {
+    if (!modal) {
+      createModal();
+    }
+
+    modal.showModal();
+    searchInput.value = initialQuery || '';
+    searchInput.focus();
+
+    if (initialQuery) {
+      performSearch(initialQuery);
+    }
+  }
+
+  /**
+   * Close the search modal
+   */
+  function closeModal() {
+    if (modal && modal.open) {
+      modal.close();
+      isSearching = false;
+      // Clear URL hash
+      if (window.location.hash.startsWith('#search=')) {
+        history.replaceState(null, '', window.location.pathname + window.location.search);
+      }
+    }
+  }
+
+  /**
+   * Update URL hash with search query
+   */
+  function updateUrlHash(query) {
+    if (query) {
+      history.replaceState(null, '', window.location.pathname + window.location.search + '#search=' + encodeURIComponent(query));
+    }
+  }
+
+  /**
+   * Get the URL for fetching a page
+   */
+  function getPageFetchUrl(pageFile) {
+    // Pages are in the same directory as index.html for sessions
+    return pageFile;
+  }
+
+  /**
+   * Get the URL for linking to a result
+   */
+  function getPageLinkUrl(pageFile) {
+    return pageFile;
+  }
+
+  /**
+   * Highlight search term in text by escaping HTML first, then wrapping matches
+   * This prevents XSS by ensuring the query is never directly injected as HTML
+   */
+  function highlightMatches(text, searchTerm) {
+    if (!text || !searchTerm) return escapeHtml(text || '');
+    
+    // First escape the entire text to prevent XSS
+    var escaped = escapeHtml(text);
+    // Also escape the search term for HTML (in case it contains < > etc)
+    var escapedTerm = escapeHtml(searchTerm);
+    
+    // Now highlight matches in the escaped text
+    var regex = new RegExp('(' + escapeRegex(escapedTerm) + ')', 'gi');
+    return escaped.replace(regex, '<mark>$1</mark>');
+  }
+
+  /**
+   * Process a single page and find matches
+   */
+  function processPage(pageFile, html, query) {
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(html, 'text/html');
+    var results = [];
+
+    // Find all message blocks
+    var messages = doc.querySelectorAll('.message');
+    messages.forEach(function(msg) {
+      var text = msg.textContent || '';
+      if (text.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+        var msgId = msg.id || '';
+        var link = getPageLinkUrl(pageFile) + (msgId ? '#' + msgId : '');
+
+        // Get a preview of the content
+        var contentEl = msg.querySelector('.message-content');
+        var preview = contentEl ? contentEl.textContent.trim() : text.trim();
+        preview = preview.slice(0, 300);
+
+        // Determine message role
+        var role = msg.classList.contains('message-user') ? 'user' : 'assistant';
+
+        results.push({
+          link: link,
+          role: role,
+          preview: preview,
+          element: msg.cloneNode(true),
+          pageFile: pageFile
+        });
+      }
+    });
+
+    return results;
+  }
+
+  /**
+   * Search within session pages
+   */
+  async function searchSessionPages(query) {
+    if (totalPages === 0) {
+      searchStatus.textContent = 'No pages to search';
+      return;
+    }
+
+    var resultsFound = 0;
+    var pagesSearched = 0;
+
+    // Build list of pages to fetch
+    var pagesToFetch = [];
+    for (var i = 1; i <= totalPages; i++) {
+      pagesToFetch.push('page-' + String(i).padStart(3, '0') + '.html');
+    }
+
+    // Process pages in batches
+    for (var i = 0; i < pagesToFetch.length && isSearching; i += BATCH_SIZE) {
+      var batch = pagesToFetch.slice(i, i + BATCH_SIZE);
+
+      var promises = batch.map(function(pageFile) {
+        return fetch(getPageFetchUrl(pageFile))
+          .then(function(response) {
+            if (!response.ok) throw new Error('Failed to fetch ' + pageFile);
+            return response.text();
+          })
+          .then(function(html) {
+            var results = processPage(pageFile, html, query);
+            pagesSearched++;
+
+            // Update status
+            searchStatus.textContent = 'Found ' + (resultsFound + results.length) + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
+
+            // Display results
+            results.forEach(function(result) {
+              if (resultsFound < MAX_RESULTS) {
+                displayResult(result, query);
+                resultsFound++;
+              }
+            });
+
+            return results.length;
+          })
+          .catch(function(err) {
+            console.error('Error fetching page:', err);
+            pagesSearched++;
+            return 0;
+          });
+      });
+
+      await Promise.all(promises);
+    }
+
+    // Final status
+    if (isSearching) {
+      if (resultsFound === 0) {
+        searchStatus.textContent = 'No results found';
+        searchResults.innerHTML = '<div class="search-no-results">No matches found for "' + escapeHtml(query) + '"</div>';
+      } else {
+        searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + totalPages + ' pages';
+        if (resultsFound >= MAX_RESULTS) {
+          searchStatus.textContent += ' (showing first ' + MAX_RESULTS + ')';
+        }
+      }
+    }
+  }
+
+  /**
+   * Search the index page (session titles and previews)
+   */
+  function searchIndexPage(query) {
+    var sessionCards = document.querySelectorAll('.session-card');
+    var resultsFound = 0;
+
+    sessionCards.forEach(function(card) {
+      var title = card.querySelector('.session-title');
+      var summary = card.querySelector('.session-summary');
+      var text = (title ? title.textContent : '') + ' ' + (summary ? summary.textContent : '');
+
+      if (text.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+        var link = card.getAttribute('href') || '#';
+        var titleText = title ? title.textContent : 'Untitled Session';
+        var summaryText = summary ? summary.textContent : '';
+
+        displayResult({
+          link: link,
+          role: 'session',
+          preview: summaryText.slice(0, 200),
+          title: titleText,
+          pageFile: null
+        }, query);
+
+        resultsFound++;
+      }
+    });
+
+    if (resultsFound === 0) {
+      searchStatus.textContent = 'No results found';
+      searchResults.innerHTML = '<div class="search-no-results">No sessions match "' + escapeHtml(query) + '"</div>';
+    } else {
+      searchStatus.textContent = 'Found ' + resultsFound + ' session(s)';
+    }
+  }
+
+  /**
+   * Display a single search result
+   */
+  function displayResult(result, query) {
+    var resultDiv = document.createElement('a');
+    resultDiv.href = result.link;
+    resultDiv.className = 'search-result';
+
+    var roleLabel = result.role === 'user' ? 'USER' : 
+                    result.role === 'assistant' ? 'ASSISTANT' : 
+                    'SESSION';
+    var roleClass = 'search-result-role search-result-role-' + result.role;
+
+    var title = result.title || '';
+    var preview = result.preview || '';
+
+    // Highlight matches in preview (XSS-safe: escapes HTML before highlighting)
+    var highlightedPreview = highlightMatches(preview, query);
+
+    var html = '<div class="search-result-header">' +
+      '<span class="' + roleClass + '">' + roleLabel + '</span>';
+    
+    if (result.pageFile) {
+      html += '<span class="search-result-page">' + escapeHtml(result.pageFile) + '</span>';
+    }
+    
+    html += '</div>';
+
+    if (title) {
+      // Highlight matches in title (XSS-safe)
+      var highlightedTitle = highlightMatches(title, query);
+      html += '<div class="search-result-title">' + highlightedTitle + '</div>';
+    }
+
+    html += '<div class="search-result-preview">' + highlightedPreview + '</div>';
+
+    resultDiv.innerHTML = html;
+    searchResults.appendChild(resultDiv);
+  }
+
+  /**
+   * Main search function
+   */
+  async function performSearch(query) {
+    if (!query || query.length < 2) {
+      searchStatus.textContent = 'Type at least 2 characters to search';
+      searchResults.innerHTML = '';
+      return;
+    }
+
+    // Cancel any ongoing search
+    isSearching = false;
+    await new Promise(function(resolve) { setTimeout(resolve, 50); });
+
+    // Start new search
+    isSearching = true;
+    searchStatus.textContent = 'Searching...';
+    searchResults.innerHTML = '';
+    updateUrlHash(query);
+
+    if (isSessionPage) {
+      await searchSessionPages(query);
+    } else {
+      searchIndexPage(query);
+    }
+  }
+
+  /**
+   * Initialize search functionality
+   */
+  function init() {
+    // Check if search can work (not file:// protocol)
+    if (!canSearch()) {
+      // Hide search triggers since they won't work
+      var triggers = document.querySelectorAll('.search-trigger');
+      triggers.forEach(function(trigger) {
+        trigger.style.display = 'none';
+      });
+      return;
+    }
+
+    // Keyboard shortcut: Cmd/Ctrl + K
+    document.addEventListener('keydown', function(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        openModal();
+      }
+    });
+
+    // Search trigger button click
+    var triggers = document.querySelectorAll('.search-trigger');
+    triggers.forEach(function(trigger) {
+      trigger.addEventListener('click', function(e) {
+        e.preventDefault();
+        openModal();
+      });
+    });
+
+    // Check for search in URL hash on page load
+    if (window.location.hash.startsWith('#search=')) {
+      var query = decodeURIComponent(window.location.hash.substring(8));
+      if (query) {
+        // Delay to ensure page is ready
+        setTimeout(function() {
+          openModal(query);
+        }, 100);
+      }
+    }
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();