opencode-replay 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ramtin Javanmardi 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# opencode-replay
+
+A CLI tool that generates static HTML transcripts from [OpenCode](https://github.com/sst/opencode) sessions, enabling browsing, searching, and sharing of AI-assisted coding conversations.
+
+## Why?
+
+OpenCode stores session data in `~/.local/share/opencode/storage/` as JSON files, but this data isn't easily browsable or shareable. `opencode-replay` transforms these sessions into clean, searchable, static HTML pages.
+
+**Use cases:**
+- **PR Documentation** - Attach session transcripts to pull requests showing the AI collaboration process
+- **Self-Review** - Analyze past sessions to identify effective prompting patterns
+- **Team Sharing** - Share session transcripts with teammates for knowledge transfer
+- **Debugging** - Review what happened in a session when something went wrong
+- **Compliance** - Maintain audit trails of AI-assisted code generation
+
+## Installation
+
+```bash
+# Using bun (recommended)
+bun install -g opencode-replay
+
+# Using npm
+npm install -g opencode-replay
+```
+
+## Quick Start
+
+```bash
+# Generate HTML for current project's sessions
+cd /path/to/your/project
+opencode-replay
+
+# Open the generated transcript in your browser
+opencode-replay --open
+```
+
+## Usage
+
+### Basic Commands
+
+```bash
+# Generate HTML for current project (auto-detects from cwd)
+opencode-replay
+
+# Generate HTML for ALL projects across your machine
+opencode-replay --all
+
+# Specify output directory (default: ./opencode-replay-output)
+opencode-replay -o ./my-transcripts
+
+# Export a specific session by ID
+opencode-replay --session ses_4957d04cdffeJwdujYPBCKpIsb
+
+# Open in browser after generation
+opencode-replay --open
+
+# Include raw JSON export alongside HTML
+opencode-replay --json
+```
+
+### HTTP Server Mode
+
+Serve generated transcripts via HTTP for easier viewing and sharing:
+
+```bash
+# Generate and serve via HTTP (default port: 3000)
+opencode-replay --serve
+
+# Serve on a custom port
+opencode-replay --serve --port 8080
+
+# Serve existing output without regenerating
+opencode-replay --serve --no-generate -o ./existing-output
+```
+
+The built-in server includes:
+- Automatic MIME type detection
+- ETag-based caching for efficient reloads
+- Directory index serving (serves `index.html` for directory requests)
+- Path traversal protection
+- Auto-opens browser on start
+
+### All Options
+
+| Option | Short | Description |
+|--------|-------|-------------|
+| `--all` | `-a` | Generate for all projects (default: current project only) |
+| `--output <dir>` | `-o` | Output directory (default: `./opencode-replay-output`) |
+| `--session <id>` | `-s` | Generate for a specific session only |
+| `--json` | | Include raw JSON export alongside HTML |
+| `--open` | | Open in browser after generation |
+| `--storage <path>` | | Custom storage path (default: `~/.local/share/opencode/storage`) |
+| `--serve` | | Start HTTP server after generation |
+| `--port <number>` | | Server port (default: `3000`) |
+| `--no-generate` | | Skip generation, only serve existing output |
+| `--help` | `-h` | Show help message |
+| `--version` | `-v` | Show version |
+
+### Examples
+
+```bash
+# Generate transcripts for your current project
+cd ~/workspace/my-project
+opencode-replay
+
+# Generate all sessions and open in browser
+opencode-replay --all --open
+
+# Export a specific session with JSON data
+opencode-replay --session ses_abc123 --json -o ./session-export
+
+# Use custom storage location
+opencode-replay --storage /custom/path/to/storage
+
+# Generate and serve for easy sharing
+opencode-replay --serve --port 8080
+
+# Quick preview of existing transcripts
+opencode-replay --serve --no-generate -o ./my-transcripts
+```
+
+## Output Structure
+
+```
+opencode-replay-output/
+├── index.html                    # Master index (all sessions)
+├── assets/
+│   ├── styles.css               # Stylesheet
+│   └── search.js                # Client-side search (coming soon)
+├── projects/                     # Only in --all mode
+│   └── {project-name}/
+│       └── index.html           # Project-level session list
+└── sessions/
+    └── {session-id}/
+        ├── index.html           # Session overview with timeline
+        ├── page-001.html        # Conversation pages (5 prompts each)
+        ├── page-002.html
+        └── session.json         # Raw data (if --json flag)
+```
+
+## Tool Renderers
+
+Each tool type has specialized rendering:
+
+| Tool | Display |
+|------|---------|
+| `bash` | Terminal-style command with `$` prefix, dark output box |
+| `read` | File path header with content preview and line numbers |
+| `write` | File path with "Created" badge, content preview |
+| `edit` | Side-by-side diff view (old/new comparison) |
+| `glob` | Pattern with file list and type icons |
+| `grep` | Pattern with matching lines (file:line format) |
+| `task` | Agent type badge with collapsible prompt/result |
+| `todowrite` | Checklist with status icons |
+| `webfetch` | Clickable URL with content preview |
+| `batch` | Nested tool call summary |
+
+## Requirements
+
+- [Bun](https://bun.sh) runtime (recommended) or Node.js 18+
+- OpenCode sessions in standard storage location
+
+## Development
+
+```bash
+# Clone the repository
+git clone https://github.com/ramtinJ95/opencode-replay
+cd opencode-replay
+
+# Install dependencies
+bun install
+
+# Run in development mode
+bun run src/index.ts
+
+# Type check
+bun run typecheck
+
+# Build for distribution
+bun run build
+```
+
+## License
+
+MIT

package/dist/assets/highlight.js

@@ -0,0 +1,300 @@
+/**
+ * OpenCode Replay - Lightweight Syntax Highlighter
+ * A minimal syntax highlighter for common programming languages
+ * No external dependencies, works offline
+ */
+
+(function() {
+  'use strict';
+
+  // Language definitions with token patterns
+  const languages = {
+    // JavaScript/TypeScript
+    javascript: {
+      patterns: [
+        { type: 'comment', pattern: /\/\/.*$/gm },
+        { type: 'comment', pattern: /\/\*[\s\S]*?\*\//g },
+        { type: 'string', pattern: /(["'`])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'keyword', pattern: /\b(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|try|catch|finally|throw|new|class|extends|import|export|from|default|async|await|yield|typeof|instanceof|in|of|void|delete|this|super|static|get|set)\b/g },
+        { type: 'boolean', pattern: /\b(true|false|null|undefined|NaN|Infinity)\b/g },
+        { type: 'number', pattern: /\b\d+\.?\d*([eE][+-]?\d+)?\b/g },
+        { type: 'function', pattern: /\b([a-zA-Z_$][\w$]*)\s*(?=\()/g },
+        { type: 'class-name', pattern: /\b([A-Z][\w]*)\b/g },
+        { type: 'operator', pattern: /[+\-*/%=<>!&|^~?:]+/g },
+        { type: 'punctuation', pattern: /[{}[\]();,]/g }
+      ]
+    },
+    typescript: { extends: 'javascript' },
+    jsx: { extends: 'javascript' },
+    tsx: { extends: 'javascript' },
+    
+    // Python
+    python: {
+      patterns: [
+        { type: 'comment', pattern: /#.*$/gm },
+        { type: 'string', pattern: /("""[\s\S]*?"""|'''[\s\S]*?''')/g },
+        { type: 'string', pattern: /(["'])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'keyword', pattern: /\b(and|as|assert|async|await|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield|True|False|None)\b/g },
+        { type: 'builtin', pattern: /\b(print|len|range|str|int|float|list|dict|set|tuple|bool|type|isinstance|hasattr|getattr|setattr|open|input|map|filter|reduce|zip|enumerate|sorted|reversed|sum|min|max|abs|round)\b/g },
+        { type: 'number', pattern: /\b\d+\.?\d*([eE][+-]?\d+)?\b/g },
+        { type: 'function', pattern: /\b([a-zA-Z_][\w]*)\s*(?=\()/g },
+        { type: 'class-name', pattern: /\bclass\s+([A-Z][\w]*)/g },
+        { type: 'decorator', pattern: /@[\w.]+/g },
+        { type: 'operator', pattern: /[+\-*/%=<>!&|^~@]+/g },
+        { type: 'punctuation', pattern: /[{}[\]();:,]/g }
+      ]
+    },
+    
+    // JSON
+    json: {
+      patterns: [
+        { type: 'property', pattern: /"[^"\\]*(?:\\.[^"\\]*)*"(?=\s*:)/g },
+        { type: 'string', pattern: /"[^"\\]*(?:\\.[^"\\]*)*"/g },
+        { type: 'number', pattern: /-?\b\d+\.?\d*([eE][+-]?\d+)?\b/g },
+        { type: 'boolean', pattern: /\b(true|false|null)\b/g },
+        { type: 'punctuation', pattern: /[{}[\]:,]/g }
+      ]
+    },
+    
+    // HTML/XML
+    html: {
+      patterns: [
+        { type: 'comment', pattern: /<!--[\s\S]*?-->/g },
+        { type: 'tag', pattern: /<\/?[\w-]+/g },
+        { type: 'attr-name', pattern: /\s[\w-]+(?==)/g },
+        { type: 'attr-value', pattern: /=\s*(["'])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'punctuation', pattern: /[<>\/=]/g }
+      ]
+    },
+    xml: { extends: 'html' },
+    svg: { extends: 'html' },
+    
+    // CSS
+    css: {
+      patterns: [
+        { type: 'comment', pattern: /\/\*[\s\S]*?\*\//g },
+        { type: 'selector', pattern: /[^{}]+(?=\s*\{)/g },
+        { type: 'property', pattern: /[\w-]+(?=\s*:)/g },
+        { type: 'string', pattern: /(["'])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'number', pattern: /-?\b\d+\.?\d*(px|em|rem|%|vh|vw|deg|s|ms)?\b/g },
+        { type: 'function', pattern: /[\w-]+(?=\()/g },
+        { type: 'punctuation', pattern: /[{}();:,]/g }
+      ]
+    },
+    scss: { extends: 'css' },
+    less: { extends: 'css' },
+    
+    // Bash/Shell
+    bash: {
+      patterns: [
+        { type: 'comment', pattern: /#.*$/gm },
+        { type: 'string', pattern: /(["'])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'keyword', pattern: /\b(if|then|else|elif|fi|for|while|do|done|case|esac|function|return|exit|break|continue|export|source|alias|unalias|cd|pwd|echo|printf|read|test)\b/g },
+        { type: 'builtin', pattern: /\b(ls|cat|grep|sed|awk|find|xargs|sort|uniq|head|tail|wc|cut|tr|mkdir|rm|cp|mv|chmod|chown|curl|wget|tar|gzip|gunzip|ssh|scp|git|npm|yarn|bun|node|python|pip)\b/g },
+        { type: 'variable', pattern: /\$[\w]+|\$\{[^}]+\}/g },
+        { type: 'operator', pattern: /[|&;><]+/g },
+        { type: 'punctuation', pattern: /[()[\]{}]/g }
+      ]
+    },
+    sh: { extends: 'bash' },
+    shell: { extends: 'bash' },
+    zsh: { extends: 'bash' },
+    
+    // SQL
+    sql: {
+      patterns: [
+        { type: 'comment', pattern: /--.*$/gm },
+        { type: 'comment', pattern: /\/\*[\s\S]*?\*\//g },
+        { type: 'string', pattern: /(["'])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'keyword', pattern: /\b(SELECT|FROM|WHERE|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AND|OR|NOT|IN|EXISTS|BETWEEN|LIKE|IS|NULL|AS|ORDER|BY|GROUP|HAVING|LIMIT|OFFSET|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|INDEX|VIEW|DROP|ALTER|ADD|COLUMN|PRIMARY|KEY|FOREIGN|REFERENCES|UNIQUE|DEFAULT|CHECK|CONSTRAINT|CASCADE|UNION|ALL|DISTINCT|COUNT|SUM|AVG|MIN|MAX|CASE|WHEN|THEN|ELSE|END)\b/gi },
+        { type: 'number', pattern: /\b\d+\.?\d*\b/g },
+        { type: 'operator', pattern: /[=<>!+\-*/%]+/g },
+        { type: 'punctuation', pattern: /[(),;.]/g }
+      ]
+    },
+    
+    // Go
+    go: {
+      patterns: [
+        { type: 'comment', pattern: /\/\/.*$/gm },
+        { type: 'comment', pattern: /\/\*[\s\S]*?\*\//g },
+        { type: 'string', pattern: /(["'`])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'keyword', pattern: /\b(break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go|goto|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/g },
+        { type: 'builtin', pattern: /\b(append|cap|close|complex|copy|delete|imag|len|make|new|panic|print|println|real|recover)\b/g },
+        { type: 'boolean', pattern: /\b(true|false|nil|iota)\b/g },
+        { type: 'number', pattern: /\b\d+\.?\d*([eE][+-]?\d+)?\b/g },
+        { type: 'function', pattern: /\b([a-zA-Z_][\w]*)\s*(?=\()/g },
+        { type: 'class-name', pattern: /\b([A-Z][\w]*)\b/g },
+        { type: 'operator', pattern: /[+\-*/%=<>!&|^:]+/g },
+        { type: 'punctuation', pattern: /[{}[\]();,]/g }
+      ]
+    },
+    
+    // Rust
+    rust: {
+      patterns: [
+        { type: 'comment', pattern: /\/\/.*$/gm },
+        { type: 'comment', pattern: /\/\*[\s\S]*?\*\//g },
+        { type: 'string', pattern: /(["'])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'keyword', pattern: /\b(as|async|await|break|const|continue|crate|dyn|else|enum|extern|false|fn|for|if|impl|in|let|loop|match|mod|move|mut|pub|ref|return|self|Self|static|struct|super|trait|true|type|unsafe|use|where|while)\b/g },
+        { type: 'builtin', pattern: /\b(Option|Result|Some|None|Ok|Err|Vec|String|Box|Rc|Arc|Cell|RefCell|HashMap|HashSet|println!|print!|format!|vec!|panic!|assert!|debug!)\b/g },
+        { type: 'number', pattern: /\b\d+\.?\d*([eE][+-]?\d+)?[iu]?(8|16|32|64|128|size)?\b/g },
+        { type: 'function', pattern: /\b([a-z_][\w]*)\s*(?=\()/g },
+        { type: 'class-name', pattern: /\b([A-Z][\w]*)\b/g },
+        { type: 'lifetime', pattern: /'[a-z_][\w]*/g },
+        { type: 'operator', pattern: /[+\-*/%=<>!&|^:?]+/g },
+        { type: 'punctuation', pattern: /[{}[\]();,]/g }
+      ]
+    },
+    
+    // YAML
+    yaml: {
+      patterns: [
+        { type: 'comment', pattern: /#.*$/gm },
+        { type: 'property', pattern: /^[\w-]+(?=\s*:)/gm },
+        { type: 'string', pattern: /(["'])(?:(?!\1)[^\\]|\\.)*\1/g },
+        { type: 'boolean', pattern: /\b(true|false|yes|no|on|off|null|~)\b/gi },
+        { type: 'number', pattern: /\b\d+\.?\d*\b/g },
+        { type: 'punctuation', pattern: /[:\-[\]{}|>]/g }
+      ]
+    },
+    yml: { extends: 'yaml' },
+    
+    // Markdown
+    markdown: {
+      patterns: [
+        { type: 'title', pattern: /^#{1,6}\s+.+$/gm },
+        { type: 'bold', pattern: /\*\*[^*]+\*\*|__[^_]+__/g },
+        { type: 'italic', pattern: /\*[^*]+\*|_[^_]+_/g },
+        { type: 'code', pattern: /`[^`]+`/g },
+        { type: 'url', pattern: /\[[^\]]+\]\([^)]+\)/g },
+        { type: 'list', pattern: /^[\s]*[-*+]\s/gm },
+        { type: 'blockquote', pattern: /^>\s.+$/gm }
+      ]
+    },
+    md: { extends: 'markdown' },
+    
+    // Diff
+    diff: {
+      patterns: [
+        { type: 'deleted', pattern: /^-.*$/gm },
+        { type: 'inserted', pattern: /^\+.*$/gm },
+        { type: 'coord', pattern: /^@@.*@@$/gm },
+        { type: 'comment', pattern: /^(diff|index|---|\+\+\+).*$/gm }
+      ]
+    },
+    
+    // Plain text (no highlighting)
+    text: { patterns: [] },
+    plaintext: { patterns: [] }
+  };
+
+  // Resolve language extensions
+  function getLanguagePatterns(lang) {
+    const langDef = languages[lang] || languages.text;
+    if (langDef.extends) {
+      return languages[langDef.extends]?.patterns || [];
+    }
+    return langDef.patterns || [];
+  }
+
+  // Escape HTML special characters
+  function escapeHtml(str) {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  // Highlight code with given language
+  function highlight(code, lang) {
+    const normalizedLang = (lang || 'text').toLowerCase().replace(/[^a-z0-9]/g, '');
+    const patterns = getLanguagePatterns(normalizedLang);
+    
+    if (patterns.length === 0) {
+      return escapeHtml(code);
+    }
+
+    // Track which parts of the code have been tokenized
+    const tokens = [];
+    
+    // Apply each pattern
+    for (const { type, pattern } of patterns) {
+      // Reset pattern lastIndex
+      pattern.lastIndex = 0;
+      let match;
+      
+      while ((match = pattern.exec(code)) !== null) {
+        tokens.push({
+          type,
+          start: match.index,
+          end: match.index + match[0].length,
+          text: match[0]
+        });
+      }
+    }
+
+    // Sort tokens by start position
+    tokens.sort((a, b) => a.start - b.start);
+
+    // Remove overlapping tokens (keep first match)
+    const filtered = [];
+    let lastEnd = 0;
+    for (const token of tokens) {
+      if (token.start >= lastEnd) {
+        filtered.push(token);
+        lastEnd = token.end;
+      }
+    }
+
+    // Build highlighted HTML
+    let result = '';
+    let pos = 0;
+    for (const token of filtered) {
+      if (token.start > pos) {
+        result += escapeHtml(code.slice(pos, token.start));
+      }
+      result += `<span class="token ${token.type}">${escapeHtml(token.text)}</span>`;
+      pos = token.end;
+    }
+    if (pos < code.length) {
+      result += escapeHtml(code.slice(pos));
+    }
+
+    return result;
+  }
+
+  // Find and highlight all code blocks on page load
+  function highlightAll() {
+    const codeBlocks = document.querySelectorAll('pre code[class*="language-"]');
+    
+    for (const block of codeBlocks) {
+      // Extract language from class
+      const classes = block.className.split(/\s+/);
+      const langClass = classes.find(c => c.startsWith('language-'));
+      const lang = langClass ? langClass.replace('language-', '') : 'text';
+      
+      // Get original code text
+      const code = block.textContent || '';
+      
+      // Apply highlighting
+      block.innerHTML = highlight(code, lang);
+    }
+  }
+
+  // Run on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', highlightAll);
+  } else {
+    highlightAll();
+  }
+
+  // Expose API for dynamic use
+  window.OpenCodeHighlight = {
+    highlight,
+    highlightAll,
+    languages: Object.keys(languages)
+  };
+})();