opencode-replay 1.0.1 → 1.1.0

package/README.md

@@ -1,7 +1,12 @@
 # opencode-replay
 
+[![npm version](https://img.shields.io/npm/v/opencode-replay.svg)](https://www.npmjs.com/package/opencode-replay)
+[![npm downloads](https://img.shields.io/npm/dm/opencode-replay.svg)](https://www.npmjs.com/package/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.
 
+**[Live Demo](https://ramtinj95.github.io/opencode-replay/)** - See example session transcripts
+
 ## 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.
@@ -34,6 +39,47 @@ opencode-replay
 opencode-replay --open
 ```
 
+## Output Formats
+
+### HTML (default)
+
+Generate static HTML transcripts viewable in any browser:
+
+```bash
+opencode-replay                     # Current project's sessions
+opencode-replay --all               # All projects
+opencode-replay -o ./my-transcripts # Custom output directory
+opencode-replay -a                  # Auto-name output (e.g., ./my-project-replay)
+```
+
+### Markdown
+
+Generate markdown for sharing or piping:
+
+```bash
+# To stdout (for piping)
+opencode-replay -f md -s ses_xxx
+opencode-replay -f md -s ses_xxx | gh gist create --filename transcript.md -
+opencode-replay -f md -s ses_xxx | pbcopy
+
+# To file
+opencode-replay -f md -s ses_xxx -o transcript.md
+```
+
+### GitHub Gist
+
+Upload HTML directly to GitHub Gist with a shareable preview URL:
+
+```bash
+opencode-replay --gist                 # Secret gist (default)
+opencode-replay --gist --gist-public   # Public gist
+opencode-replay -s ses_xxx --gist      # Upload specific session
+```
+
+Requires [GitHub CLI](https://cli.github.com/) to be installed and authenticated (`gh auth login`).
+
+The generated gist is viewable via [gisthost.github.io](https://gisthost.github.io/) which renders HTML files directly.
+
 ## Usage
 
 ### Basic Commands
@@ -80,19 +126,40 @@ The built-in server includes:
 - Path traversal protection
 - Auto-opens browser on start
 
+### GitHub Integration
+
+Add clickable links to GitHub commits in the rendered output:
+
+```bash
+opencode-replay --repo owner/repo-name
+
+# Example
+opencode-replay --repo sst/opencode
+```
+
+This adds links to commit hashes found in tool outputs, making it easy to navigate to the exact commits referenced during a session.
+
 ### All Options
 
 | Option | Short | Description |
 |--------|-------|-------------|
-| `--all` | `-a` | Generate for all projects (default: current project only) |
-| `--output <dir>` | `-o` | Output directory (default: `./opencode-replay-output`) |
+| `--all` | | Generate for all projects (default: current project only) |
+| `--auto` | `-a` | Auto-name output directory from project/session name |
+| `--output <path>` | `-o` | Output directory (HTML) or file (markdown) |
 | `--session <id>` | `-s` | Generate for a specific session only |
+| `--format <type>` | `-f` | Output format: `html` (default), `md` |
+| `--stdout` | | Output to stdout (markdown only, requires `--session`) |
+| `--gist` | | Upload HTML to GitHub Gist after generation |
+| `--gist-public` | | Make gist public (default: secret) |
 | `--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 |
+| `--repo <owner/name>` | | GitHub repo for commit links (e.g., `sst/opencode`) |
+| `--quiet` | `-q` | Suppress non-essential output |
+| `--verbose` | | Show detailed debug output |
 | `--help` | `-h` | Show help message |
 | `--version` | `-v` | Show version |
 
@@ -109,6 +176,9 @@ opencode-replay --all --open
 # Export a specific session with JSON data
 opencode-replay --session ses_abc123 --json -o ./session-export
 
+# Auto-name output from project name
+opencode-replay -a  # Creates ./my-project-replay
+
 # Use custom storage location
 opencode-replay --storage /custom/path/to/storage
 
@@ -117,6 +187,18 @@ opencode-replay --serve --port 8080
 
 # Quick preview of existing transcripts
 opencode-replay --serve --no-generate -o ./my-transcripts
+
+# Markdown to stdout for piping
+opencode-replay -f md -s ses_xxx
+
+# Create a GitHub Gist from a session
+opencode-replay -s ses_xxx --gist
+
+# Upload all projects to a public gist
+opencode-replay --all --gist --gist-public
+
+# Add GitHub commit links
+opencode-replay --repo sst/opencode
 ```
 
 ## Output Structure
@@ -126,7 +208,7 @@ opencode-replay-output/
 ├── index.html                    # Master index (all sessions)
 ├── assets/
 │   ├── styles.css               # Stylesheet
-│   └── search.js                # Client-side search (coming soon)
+│   └── search.js                # Client-side search
 ├── projects/                     # Only in --all mode
 │   └── {project-name}/
 │       └── index.html           # Project-level session list
@@ -159,6 +241,7 @@ Each tool type has specialized rendering:
 
 - [Bun](https://bun.sh) runtime (recommended) or Node.js 18+
 - OpenCode sessions in standard storage location
+- [GitHub CLI](https://cli.github.com/) (optional, for `--gist` feature)
 
 ## Development
 

package/dist/assets/gist-preview.js

@@ -0,0 +1,126 @@
+/**
+ * OpenCode Replay - Gist Preview Link Rewriter
+ * Rewrites relative links for gisthost.github.io preview
+ *
+ * When HTML files are uploaded to GitHub Gist and viewed via gisthost.github.io,
+ * relative links need to be rewritten to include the gist ID in the URL format:
+ * ?GIST_ID/path/to/file.html
+ *
+ * This script runs only on gisthost.github.io and automatically rewrites all
+ * relative links in the document.
+ */
+(function initGistPreview() {
+  'use strict';
+
+  // Only run on gisthost.github.io
+  if (!window.location.host.includes('gisthost.github.io')) {
+    return;
+  }
+
+  // Extract gist ID from URL
+  // URL format: https://gisthost.github.io/?GIST_ID/filename.html
+  var search = window.location.search;
+  if (!search || search.length < 2) {
+    return;
+  }
+
+  // Remove leading '?' and extract gist ID (everything before first '/')
+  var path = search.slice(1);
+  var slashIndex = path.indexOf('/');
+  if (slashIndex === -1) {
+    return;
+  }
+
+  var gistId = path.slice(0, slashIndex);
+  if (!gistId) {
+    return;
+  }
+
+  // Get current directory for resolving relative paths
+  var currentPath = path.slice(slashIndex + 1);
+  var currentDir = currentPath.substring(0, currentPath.lastIndexOf('/') + 1);
+
+  /**
+   * Resolve a relative path against the current directory
+   * Handles './' and '../' prefixes
+   */
+  function resolvePath(href) {
+    // Already absolute or anchor-only
+    if (href.startsWith('http') || href.startsWith('#') || href.startsWith('?')) {
+      return null;
+    }
+
+    var resolved = currentDir + href;
+
+    // Normalize path (handle ../)
+    var parts = resolved.split('/');
+    var normalized = [];
+    for (var i = 0; i < parts.length; i++) {
+      var part = parts[i];
+      if (part === '..') {
+        normalized.pop();
+      } else if (part !== '.' && part !== '') {
+        normalized.push(part);
+      }
+    }
+
+    return normalized.join('/');
+  }
+
+  /**
+   * Rewrite a single link element
+   */
+  function rewriteLink(link) {
+    var href = link.getAttribute('href');
+    if (!href) {
+      return;
+    }
+
+    var resolved = resolvePath(href);
+    if (resolved !== null) {
+      link.setAttribute('href', '?' + gistId + '/' + resolved);
+    }
+  }
+
+  /**
+   * Rewrite all links in the document
+   */
+  function rewriteAllLinks() {
+    var links = document.querySelectorAll('a[href]');
+    for (var i = 0; i < links.length; i++) {
+      rewriteLink(links[i]);
+    }
+  }
+
+  // Run on DOMContentLoaded or immediately if DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', rewriteAllLinks);
+  } else {
+    rewriteAllLinks();
+  }
+
+  // Also observe for dynamically added links (optional but useful)
+  if (typeof MutationObserver !== 'undefined') {
+    var observer = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(node) {
+          if (node.nodeType === 1) { // Element node
+            if (node.tagName === 'A' && node.hasAttribute('href')) {
+              rewriteLink(node);
+            }
+            // Also check children
+            var childLinks = node.querySelectorAll ? node.querySelectorAll('a[href]') : [];
+            for (var i = 0; i < childLinks.length; i++) {
+              rewriteLink(childLinks[i]);
+            }
+          }
+        });
+      });
+    });
+
+    observer.observe(document.body || document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+  }
+})();