opencode-replay 1.0.0

package/dist/index.js

@@ -0,0 +1,2569 @@
+#!/usr/bin/env bun
+// @bun
+
+// src/index.ts
+import { parseArgs } from "util";
+import { resolve as resolve2, join as join4 } from "path";
+import { readdir as readdir2 } from "fs/promises";
+
+// src/storage/reader.ts
+import { readdir } from "fs/promises";
+import { join } from "path";
+import { homedir } from "os";
+function getDefaultStoragePath() {
+  return join(homedir(), ".local", "share", "opencode", "storage");
+}
+async function readJson(filePath) {
+  try {
+    const file = Bun.file(filePath);
+    if (!await file.exists()) {
+      return null;
+    }
+    return await file.json();
+  } catch {
+    return null;
+  }
+}
+async function listJsonFiles(dirPath) {
+  try {
+    const entries = await readdir(dirPath, { withFileTypes: true });
+    return entries.filter((e) => e.isFile() && e.name.endsWith(".json")).map((e) => e.name.replace(".json", ""));
+  } catch {
+    return [];
+  }
+}
+async function listProjects(storagePath) {
+  const projectDir = join(storagePath, "project");
+  const projectIds = await listJsonFiles(projectDir);
+  const projects = [];
+  for (const id of projectIds) {
+    const project = await readJson(join(projectDir, `${id}.json`));
+    if (project)
+      projects.push(project);
+  }
+  return projects.sort((a, b) => b.time.updated - a.time.updated);
+}
+async function findProjectByPath(storagePath, workdir) {
+  const projects = await listProjects(storagePath);
+  return projects.find((p) => workdir === p.worktree || workdir.startsWith(p.worktree + "/")) ?? null;
+}
+async function listSessions(storagePath, projectId) {
+  const sessionDir = join(storagePath, "session", projectId);
+  const sessionIds = await listJsonFiles(sessionDir);
+  const sessions = [];
+  for (const id of sessionIds) {
+    const session = await readJson(join(sessionDir, `${id}.json`));
+    if (session)
+      sessions.push(session);
+  }
+  return sessions.sort((a, b) => b.time.updated - a.time.updated);
+}
+async function listMessages(storagePath, sessionId) {
+  const messageDir = join(storagePath, "message", sessionId);
+  const messageIds = await listJsonFiles(messageDir);
+  const messages = [];
+  for (const id of messageIds) {
+    const message = await readJson(join(messageDir, `${id}.json`));
+    if (message)
+      messages.push(message);
+  }
+  return messages.sort((a, b) => a.time.created - b.time.created);
+}
+async function listParts(storagePath, messageId) {
+  const partDir = join(storagePath, "part", messageId);
+  const partIds = await listJsonFiles(partDir);
+  const parts = [];
+  for (const id of partIds) {
+    const part = await readJson(join(partDir, `${id}.json`));
+    if (part)
+      parts.push(part);
+  }
+  return parts.sort((a, b) => a.id.localeCompare(b.id));
+}
+async function getMessagesWithParts(storagePath, sessionId) {
+  const messages = await listMessages(storagePath, sessionId);
+  const result = [];
+  for (const message of messages) {
+    const parts = await listParts(storagePath, message.id);
+    result.push({ message, parts });
+  }
+  return result;
+}
+
+// src/render/html.ts
+import { join as join2, dirname } from "path";
+import { mkdir, copyFile } from "fs/promises";
+
+// src/utils/html.ts
+var HTML_ESCAPE_MAP = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml(str) {
+  if (str == null)
+    return "";
+  return String(str).replace(/[&<>"']/g, (char) => HTML_ESCAPE_MAP[char] ?? char);
+}
+function escapeAttr(str) {
+  return escapeHtml(str);
+}
+function isSafeUrl(url) {
+  if (/^(https?:\/\/|\/|#|\.\.?\/)/.test(url))
+    return true;
+  if (/^data:image\//i.test(url))
+    return true;
+  return !/^[a-z]+:/i.test(url);
+}
+function renderMarkdown(text) {
+  let html = escapeHtml(text);
+  html = html.replace(/```([^\n]*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    const rawLang = (lang || "").trim();
+    const safeLang = rawLang.replace(/[^a-zA-Z0-9_-]/g, "") || "text";
+    const displayLang = rawLang || "text";
+    return `<div class="code-block-wrapper">
+<span class="code-language">${escapeHtml(displayLang)}</span>
+<pre><code class="language-${safeLang}">${code.trim()}</code></pre>
+</div>`;
+  });
+  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, linkText, url) => {
+    const safeUrl = isSafeUrl(url) ? url : "#";
+    return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${linkText}</a>`;
+  });
+  html = html.split(/\n\n+/).map((p) => `<p>${p.replace(/\n/g, "<br>")}</p>`).join(`
+`);
+  return html;
+}
+function truncate(str, maxLength) {
+  if (str == null)
+    return "";
+  if (str.length <= maxLength)
+    return str;
+  return str.slice(0, maxLength - 3) + "...";
+}
+
+// src/render/templates/base.ts
+var FOUC_PREVENTION_SCRIPT = `<script>
+(function() {
+  var theme = localStorage.getItem('opencode-replay-theme');
+  if (!theme) {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  document.documentElement.setAttribute('data-theme', theme);
+})();
+</script>`;
+function renderBasePage(options) {
+  const {
+    title,
+    content,
+    assetsPath = "./assets",
+    headExtra = "",
+    bodyClass = "",
+    totalPages
+  } = options;
+  const bodyAttrs = [];
+  if (bodyClass)
+    bodyAttrs.push(`class="${bodyClass}"`);
+  if (totalPages !== undefined)
+    bodyAttrs.push(`data-total-pages="${totalPages}"`);
+  const bodyAttrStr = bodyAttrs.length > 0 ? ` ${bodyAttrs.join(" ")}` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="generator" content="opencode-replay">
+  <meta name="color-scheme" content="light dark">
+  <title>${escapeHtml(title)} - OpenCode Replay</title>
+  ${FOUC_PREVENTION_SCRIPT}
+  <link rel="stylesheet" href="${assetsPath}/styles.css">
+  <link rel="stylesheet" href="${assetsPath}/prism.css">
+  ${headExtra}
+</head>
+<body${bodyAttrStr}>
+  <div class="container">
+    ${content}
+  </div>
+  <script src="${assetsPath}/theme.js"></script>
+  <script src="${assetsPath}/highlight.js"></script>
+  <script src="${assetsPath}/search.js"></script>
+</body>
+</html>`;
+}
+var THEME_TOGGLE_BUTTON = `<button 
+  id="theme-toggle" 
+  class="theme-toggle" 
+  type="button"
+  aria-label="Toggle dark mode"
+  aria-pressed="false"
+  title="Toggle theme"
+>
+  <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"/>
+    <line x1="12" y1="1" x2="12" y2="3"/>
+    <line x1="12" y1="21" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="3" y2="12"/>
+    <line x1="21" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+  </svg>
+  <svg class="icon-moon" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </svg>
+</button>`;
+function renderHeader(options) {
+  const {
+    title,
+    subtitle,
+    breadcrumbs = [],
+    showSearch = true,
+    showThemeToggle = true
+  } = options;
+  const breadcrumbHtml = breadcrumbs.length > 0 ? `<nav class="breadcrumbs">
+        ${breadcrumbs.map((b, i) => {
+    const isLast = i === breadcrumbs.length - 1;
+    if (isLast || !b.href) {
+      return `<span class="breadcrumb-item current">${escapeHtml(b.label)}</span>`;
+    }
+    const safeHref = isSafeUrl(b.href) ? escapeAttr(b.href) : "#";
+    return `<a href="${safeHref}" class="breadcrumb-item">${escapeHtml(b.label)}</a>`;
+  }).join('<span class="breadcrumb-separator">/</span>')}
+      </nav>` : "";
+  const headerActions = showSearch || showThemeToggle ? `<div class="header-actions">
+    ${showSearch ? `<button class="search-trigger" type="button" aria-label="Search">
+      <span class="search-icon">&#128269;</span>
+      <span class="search-text">Search...</span>
+      <kbd>Ctrl+K</kbd>
+    </button>` : ""}
+    ${showThemeToggle ? THEME_TOGGLE_BUTTON : ""}
+  </div>` : "";
+  return `<header class="page-header">
+  <div class="header-top">
+    ${breadcrumbHtml}
+    ${headerActions}
+  </div>
+  <h1>${escapeHtml(title)}</h1>
+  ${subtitle ? `<p class="subtitle">${escapeHtml(subtitle)}</p>` : ""}
+</header>`;
+}
+function renderFooter() {
+  return `<footer class="page-footer">
+  <p>Generated by <a href="https://github.com/opencode-replay" target="_blank" rel="noopener">opencode-replay</a></p>
+</footer>`;
+}
+// src/utils/format.ts
+function formatDate(timestamp) {
+  return new Date(timestamp).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatDateTime(timestamp) {
+  return new Date(timestamp).toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatTime(timestamp) {
+  return new Date(timestamp).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatDuration(startMs, endMs) {
+  const diff = endMs - startMs;
+  if (diff <= 0)
+    return "0s";
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60)
+    return `${seconds}s`;
+  if (seconds < 3600) {
+    const minutes2 = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return secs > 0 ? `${minutes2}m ${secs}s` : `${minutes2}m`;
+  }
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+}
+function formatTokens(tokens) {
+  if (tokens < 1000)
+    return tokens.toString();
+  if (tokens < 1e6)
+    return `${(tokens / 1000).toFixed(1)}k`;
+  return `${(tokens / 1e6).toFixed(2)}M`;
+}
+function formatCost(cost) {
+  if (cost === 0)
+    return "\u2014";
+  if (cost < 0.01)
+    return `$${cost.toFixed(4)}`;
+  if (cost < 1)
+    return `$${cost.toFixed(3)}`;
+  return `$${cost.toFixed(2)}`;
+}
+function formatDiff(additions, deletions) {
+  const parts = [];
+  if (additions > 0)
+    parts.push(`+${additions}`);
+  if (deletions > 0)
+    parts.push(`-${deletions}`);
+  return parts.join(" ") || "0";
+}
+function formatRelativeTime(timestamp) {
+  const now = Date.now();
+  const diff = now - timestamp;
+  if (diff < 0)
+    return formatDate(timestamp);
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (seconds < 60)
+    return "just now";
+  if (minutes < 60)
+    return `${minutes}m ago`;
+  if (hours < 24)
+    return `${hours}h ago`;
+  if (days === 1)
+    return "yesterday";
+  if (days < 7)
+    return `${days}d ago`;
+  return formatDate(timestamp);
+}
+function formatBytes(bytes) {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/render/templates/index-page.ts
+function renderSessionCard(data, isAllProjects) {
+  const { session, project, messageCount, firstPrompt } = data;
+  const sessionUrl = `sessions/${session.id}/index.html`;
+  const dateStr = formatRelativeTime(session.time.updated);
+  const fullDate = formatDate(session.time.created);
+  const summary = session.summary;
+  const hasStats = summary && (summary.additions || summary.deletions || summary.files);
+  return `<a href="${sessionUrl}" class="session-card" data-session-id="${escapeHtml(session.id)}">
+  <div class="session-title">${escapeHtml(session.title)}</div>
+  <div class="session-meta">
+    <span title="${fullDate}">${dateStr}</span>
+    ${messageCount !== undefined ? `<span>${messageCount} messages</span>` : ""}
+    ${isAllProjects && project?.name ? `<span>${escapeHtml(project.name)}</span>` : ""}
+  </div>
+  ${firstPrompt ? `<div class="session-summary">${escapeHtml(truncate(firstPrompt, 200))}</div>` : ""}
+  ${hasStats ? `<div class="session-stats">
+    ${summary?.additions ? `<span class="stat-additions">+${summary.additions}</span>` : ""}
+    ${summary?.deletions ? `<span class="stat-deletions">-${summary.deletions}</span>` : ""}
+    ${summary?.files ? `<span>${summary.files} files</span>` : ""}
+  </div>` : ""}
+</a>`;
+}
+function renderSessionList(sessions, isAllProjects) {
+  if (sessions.length === 0) {
+    return `<div class="no-sessions">
+      <p>No sessions found.</p>
+    </div>`;
+  }
+  return `<div class="session-list">
+  ${sessions.map((s) => renderSessionCard(s, isAllProjects)).join(`
+`)}
+</div>`;
+}
+function renderIndexStats(sessions) {
+  const totalSessions = sessions.length;
+  const totalMessages = sessions.reduce((sum, s) => sum + (s.messageCount ?? 0), 0);
+  const totalAdditions = sessions.reduce((sum, s) => sum + (s.session.summary?.additions ?? 0), 0);
+  const totalDeletions = sessions.reduce((sum, s) => sum + (s.session.summary?.deletions ?? 0), 0);
+  return `<div class="stats">
+  <div class="stat">
+    <span class="stat-label">Sessions</span>
+    <span class="stat-value">${totalSessions}</span>
+  </div>
+  ${totalMessages > 0 ? `<div class="stat">
+    <span class="stat-label">Messages</span>
+    <span class="stat-value">${totalMessages}</span>
+  </div>` : ""}
+  ${totalAdditions > 0 || totalDeletions > 0 ? `<div class="stat">
+    <span class="stat-label">Changes</span>
+    <span class="stat-value">${formatDiff(totalAdditions, totalDeletions)}</span>
+  </div>` : ""}
+</div>`;
+}
+function renderIndexPage(data) {
+  const {
+    title,
+    subtitle,
+    sessions,
+    isAllProjects = false,
+    breadcrumbs = [],
+    assetsPath = "./assets"
+  } = data;
+  const header = renderHeader({
+    title,
+    subtitle,
+    breadcrumbs,
+    showSearch: true
+  });
+  const stats = renderIndexStats(sessions);
+  const sessionList = renderSessionList(sessions, isAllProjects);
+  const footer = renderFooter();
+  const content = `
+${header}
+${stats}
+${sessionList}
+${footer}
+`;
+  return renderBasePage({
+    title,
+    content,
+    assetsPath,
+    bodyClass: "index-page"
+  });
+}
+// src/render/templates/session.ts
+function renderCommitCard(commit) {
+  const { hash, message, branch, timestamp, url } = commit;
+  const hashDisplay = url && isSafeUrl(url) ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" class="commit-hash">${escapeHtml(hash)}</a>` : `<span class="commit-hash">${escapeHtml(hash)}</span>`;
+  const branchHtml = branch ? `<span class="commit-branch">${escapeHtml(branch)}</span>` : "";
+  const timeHtml = timestamp ? `<span class="commit-time">${formatTime(timestamp)}</span>` : "";
+  return `<div class="commit-card">
+  <div class="commit-icon">
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+      <path d="M11.75 7.5a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zm1.5 0a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0zm-1.5 0a3.75 3.75 0 1 0-7.5 0 3.75 3.75 0 0 0 7.5 0z"/>
+      <path d="M8 4.5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
+    </svg>
+  </div>
+  <div class="commit-content">
+    <div class="commit-header">
+      ${hashDisplay}
+      ${branchHtml}
+      ${timeHtml}
+    </div>
+    <div class="commit-message">${escapeHtml(message)}</div>
+  </div>
+</div>`;
+}
+function renderCommitCards(commits) {
+  if (!commits || commits.length === 0)
+    return "";
+  return `<div class="commit-cards">
+  ${commits.map(renderCommitCard).join(`
+`)}
+</div>`;
+}
+function renderTimelineEntry(entry) {
+  const { promptNumber, messageId, promptPreview, toolCounts, pageNumber, commits } = entry;
+  const toolStats = Object.entries(toolCounts).filter(([_, count]) => count > 0).map(([tool, count]) => `<span>${count} ${tool}</span>`).join("");
+  const commitsHtml = renderCommitCards(commits ?? []);
+  return `<div class="timeline-entry">
+  <div class="timeline-marker">${promptNumber}</div>
+  <div class="timeline-content">
+    <a href="page-${String(pageNumber).padStart(3, "0")}.html#${messageId}" class="prompt-link">
+      ${escapeHtml(truncate(promptPreview, 150))}
+    </a>
+    ${toolStats ? `<div class="timeline-stats">${toolStats}</div>` : ""}
+    ${commitsHtml}
+  </div>
+</div>`;
+}
+function renderTimeline(entries) {
+  if (entries.length === 0) {
+    return `<div class="no-timeline">
+      <p>No messages in this session.</p>
+    </div>`;
+  }
+  return `<div class="session-timeline">
+  ${entries.map(renderTimelineEntry).join(`
+`)}
+</div>`;
+}
+function renderSessionStats(data) {
+  const { session, messageCount, totalTokens, totalCost, model } = data;
+  const duration = session.time.updated > session.time.created ? formatDuration(session.time.created, session.time.updated) : null;
+  const stats = [];
+  stats.push({ label: "Created", value: formatDateTime(session.time.created) });
+  if (duration) {
+    stats.push({ label: "Duration", value: duration });
+  }
+  stats.push({ label: "Messages", value: String(messageCount) });
+  if (model) {
+    stats.push({ label: "Model", value: model });
+  }
+  if (totalTokens) {
+    const tokenStr = `${formatTokens(totalTokens.input)} in / ${formatTokens(totalTokens.output)} out`;
+    stats.push({ label: "Tokens", value: tokenStr });
+  }
+  if (totalCost !== undefined && totalCost > 0) {
+    stats.push({ label: "Cost", value: formatCost(totalCost) });
+  }
+  if (session.summary) {
+    const { additions, deletions, files } = session.summary;
+    if (additions || deletions) {
+      stats.push({ label: "Changes", value: formatDiff(additions ?? 0, deletions ?? 0) });
+    }
+    if (files) {
+      stats.push({ label: "Files", value: String(files) });
+    }
+  }
+  return `<div class="stats">
+  ${stats.map((s) => `<div class="stat"><span class="stat-label">${s.label}</span><span class="stat-value">${escapeHtml(s.value)}</span></div>`).join(`
+`)}
+</div>`;
+}
+function renderPagination(pageCount) {
+  if (pageCount <= 1)
+    return "";
+  const links = Array.from({ length: pageCount }, (_, i) => {
+    const pageNum = i + 1;
+    const pageFile = `page-${String(pageNum).padStart(3, "0")}.html`;
+    return `<a href="${pageFile}">Page ${pageNum}</a>`;
+  }).join(`
+`);
+  return `<nav class="pagination">
+  ${links}
+</nav>`;
+}
+function renderSessionPage(data) {
+  const { session, projectName, timeline, pageCount, assetsPath = "../../assets" } = data;
+  const breadcrumbs = [
+    { label: projectName ?? "Sessions", href: "../../index.html" },
+    { label: session.title }
+  ];
+  const header = renderHeader({
+    title: session.title,
+    subtitle: `Session ${session.id}`,
+    breadcrumbs,
+    showSearch: true
+  });
+  const stats = renderSessionStats(data);
+  const timelineHtml = renderTimeline(timeline);
+  const pagination = renderPagination(pageCount);
+  const footer = renderFooter();
+  const content = `
+${header}
+${stats}
+<h2>Timeline</h2>
+${timelineHtml}
+${pagination}
+${footer}
+`;
+  return renderBasePage({
+    title: session.title,
+    content,
+    assetsPath,
+    bodyClass: "session-page",
+    totalPages: pageCount
+  });
+}
+// src/render/components/tools/bash.ts
+function renderBashTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const command = input?.command || "";
+  const description = input?.description || state.title || "";
+  const workdir = input?.workdir;
+  const output = state.output || "";
+  const error = state.error;
+  const status = state.status;
+  const workdirHtml = workdir ? `<span class="bash-workdir" title="Working directory">${escapeHtml(workdir)}</span>` : "";
+  const descriptionHtml = description ? `<span class="bash-description">${escapeHtml(description)}</span>` : "";
+  const outputLines = output.split(`
+`).length;
+  const isLongOutput = outputLines > 20;
+  const collapsedClass = isLongOutput ? "collapsed" : "";
+  let outputHtml = "";
+  if (output) {
+    outputHtml = `<div class="bash-output">
+      <pre><code>${escapeHtml(output)}</code></pre>
+    </div>`;
+  }
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="bash-error">
+      <pre><code>${escapeHtml(error)}</code></pre>
+    </div>`;
+  }
+  return `<div class="tool-call tool-bash" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">$</span>
+    <span class="bash-command">${escapeHtml(command)}</span>
+    ${descriptionHtml}
+    ${workdirHtml}
+    <span class="tool-toggle">${isLongOutput ? "+" : "-"}</span>
+  </div>
+  <div class="tool-body ${collapsedClass}">
+    ${outputHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+
+// src/render/components/tools/read.ts
+function renderReadTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const filePath = input?.filePath || state.title || "Unknown file";
+  const offset = input?.offset;
+  const limit = input?.limit;
+  const output = state.output || "";
+  const error = state.error;
+  const status = state.status;
+  const fileName = filePath.split("/").pop() || filePath;
+  let rangeInfo = "";
+  if (offset !== undefined || limit !== undefined) {
+    const parts = [];
+    if (offset !== undefined)
+      parts.push(`from line ${offset}`);
+    if (limit !== undefined)
+      parts.push(`${limit} lines`);
+    rangeInfo = `<span class="read-range">(${parts.join(", ")})</span>`;
+  }
+  const lineCount = output ? output.split(`
+`).length : 0;
+  const lineInfo = lineCount > 0 ? `<span class="read-lines">${lineCount} lines</span>` : "";
+  const isLongOutput = lineCount > 50;
+  const collapsedClass = isLongOutput ? "collapsed" : "";
+  let contentHtml = "";
+  if (output) {
+    contentHtml = `<div class="read-content">
+      <pre><code>${escapeHtml(output)}</code></pre>
+    </div>`;
+  }
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="read-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-read" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#128196;</span>
+    <span class="read-file-path" title="${escapeHtml(filePath)}">${escapeHtml(fileName)}</span>
+    <span class="read-full-path">${escapeHtml(filePath)}</span>
+    ${rangeInfo}
+    ${lineInfo}
+    <span class="tool-toggle">${isLongOutput ? "+" : "-"}</span>
+  </div>
+  <div class="tool-body ${collapsedClass}">
+    ${contentHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+
+// src/render/components/tools/write.ts
+function renderWriteTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const filePath = input?.filePath || state.title || "Unknown file";
+  const content = input?.content || "";
+  const error = state.error;
+  const status = state.status;
+  const fileName = filePath.split("/").pop() || filePath;
+  const lineCount = content ? content.split(`
+`).length : 0;
+  const lineInfo = `<span class="write-lines">${lineCount} lines</span>`;
+  const charCount = content.length;
+  const charInfo = `<span class="write-chars">${formatBytes(charCount)}</span>`;
+  const isLongContent = lineCount > 30;
+  const collapsedClass = isLongContent ? "collapsed" : "";
+  const statusBadge = status === "completed" ? `<span class="write-badge badge-success">Created</span>` : status === "error" ? `<span class="write-badge badge-error">Failed</span>` : `<span class="write-badge">Writing...</span>`;
+  let contentHtml = "";
+  if (content) {
+    contentHtml = `<div class="write-content">
+      <pre><code>${escapeHtml(content)}</code></pre>
+    </div>`;
+  }
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="write-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-write" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#128221;</span>
+    ${statusBadge}
+    <span class="write-file-path" title="${escapeHtml(filePath)}">${escapeHtml(fileName)}</span>
+    <span class="write-full-path">${escapeHtml(filePath)}</span>
+    ${lineInfo}
+    ${charInfo}
+    <span class="tool-toggle">${isLongContent ? "+" : "-"}</span>
+  </div>
+  <div class="tool-body ${collapsedClass}">
+    ${contentHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+
+// src/render/components/tools/edit.ts
+function renderEditTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const filePath = input?.filePath || state.title || "Unknown file";
+  const oldString = input?.oldString || "";
+  const newString = input?.newString || "";
+  const replaceAll = input?.replaceAll || false;
+  const error = state.error;
+  const status = state.status;
+  const fileName = filePath.split("/").pop() || filePath;
+  const oldLines = oldString.split(`
+`).length;
+  const newLines = newString.split(`
+`).length;
+  const diffStats = `<span class="edit-stats">
+    <span class="edit-old-lines">${oldLines} lines</span>
+    <span class="edit-arrow">&#8594;</span>
+    <span class="edit-new-lines">${newLines} lines</span>
+  </span>`;
+  const replaceAllBadge = replaceAll ? `<span class="edit-replace-all">Replace All</span>` : "";
+  const diffHtml = renderDiff(oldString, newString);
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="edit-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-edit" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#9998;</span>
+    <span class="edit-file-path" title="${escapeHtml(filePath)}">${escapeHtml(fileName)}</span>
+    <span class="edit-full-path">${escapeHtml(filePath)}</span>
+    ${replaceAllBadge}
+    ${diffStats}
+    <span class="tool-toggle">-</span>
+  </div>
+  <div class="tool-body">
+    ${diffHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function renderDiff(oldString, newString) {
+  const oldLines = oldString.split(`
+`);
+  const newLines = newString.split(`
+`);
+  if (oldLines.length <= 50 && newLines.length <= 50) {
+    return `<div class="edit-diff">
+      <div class="diff-old">
+        <div class="diff-label">Old</div>
+        <pre><code class="diff-removed">${escapeHtml(oldString)}</code></pre>
+      </div>
+      <div class="diff-new">
+        <div class="diff-label">New</div>
+        <pre><code class="diff-added">${escapeHtml(newString)}</code></pre>
+      </div>
+    </div>`;
+  }
+  return `<div class="edit-diff-long">
+    <details class="diff-section diff-old-section">
+      <summary class="diff-label">Old (${oldLines.length} lines)</summary>
+      <pre><code class="diff-removed">${escapeHtml(oldString)}</code></pre>
+    </details>
+    <details class="diff-section diff-new-section" open>
+      <summary class="diff-label">New (${newLines.length} lines)</summary>
+      <pre><code class="diff-added">${escapeHtml(newString)}</code></pre>
+    </details>
+  </div>`;
+}
+
+// src/render/components/tools/glob.ts
+function renderGlobTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const pattern = input?.pattern || "";
+  const searchPath = input?.path || ".";
+  const output = state.output || "";
+  const error = state.error;
+  const status = state.status;
+  const files = output.trim() ? output.trim().split(`
+`).filter(Boolean) : [];
+  const fileCount = files.length;
+  const isLongList = fileCount > 20;
+  const collapsedClass = isLongList ? "collapsed" : "";
+  const fileListHtml = files.length > 0 ? `<ul class="glob-file-list">
+        ${files.map((file) => `<li class="glob-file-item">
+          <span class="glob-file-icon">${getFileIcon(file)}</span>
+          <span class="glob-file-name">${escapeHtml(file)}</span>
+        </li>`).join(`
+`)}
+      </ul>` : `<div class="glob-no-matches">No matching files</div>`;
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="glob-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-glob" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#128269;</span>
+    <span class="glob-pattern">${escapeHtml(pattern)}</span>
+    <span class="glob-path">${escapeHtml(searchPath)}</span>
+    <span class="glob-count">${fileCount} files</span>
+    <span class="tool-toggle">${isLongList ? "+" : "-"}</span>
+  </div>
+  <div class="tool-body ${collapsedClass}">
+    ${fileListHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function getFileIcon(filePath) {
+  const ext = filePath.split(".").pop()?.toLowerCase() || "";
+  if (filePath.endsWith("/"))
+    return "&#128193;";
+  const icons = {
+    ts: "&#128220;",
+    tsx: "&#128220;",
+    js: "&#128220;",
+    jsx: "&#128220;",
+    json: "&#128203;",
+    md: "&#128196;",
+    css: "&#127912;",
+    html: "&#127760;",
+    py: "&#128013;",
+    rs: "&#9881;",
+    go: "&#128039;",
+    rb: "&#128142;",
+    sh: "&#128187;",
+    yml: "&#128203;",
+    yaml: "&#128203;"
+  };
+  return icons[ext] || "&#128196;";
+}
+
+// src/render/components/tools/grep.ts
+function renderGrepTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const pattern = input?.pattern || "";
+  const searchPath = input?.path || ".";
+  const include = input?.include;
+  const output = state.output || "";
+  const error = state.error;
+  const status = state.status;
+  const matches = parseGrepOutput(output);
+  const matchCount = matches.length;
+  const isLongList = matchCount > 20;
+  const collapsedClass = isLongList ? "collapsed" : "";
+  const includeHtml = include ? `<span class="grep-include" title="File filter">${escapeHtml(include)}</span>` : "";
+  const matchesHtml = matches.length > 0 ? `<ul class="grep-matches">
+        ${matches.map((match) => `<li class="grep-match">
+          <span class="grep-match-file">${escapeHtml(match.file)}</span>
+          <span class="grep-match-line">:${match.line}</span>
+          <span class="grep-match-content">${escapeHtml(match.content)}</span>
+        </li>`).join(`
+`)}
+      </ul>` : `<div class="grep-no-matches">No matches found</div>`;
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="grep-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-grep" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#128270;</span>
+    <span class="grep-pattern">${escapeHtml(pattern)}</span>
+    ${includeHtml}
+    <span class="grep-path">${escapeHtml(searchPath)}</span>
+    <span class="grep-count">${matchCount} matches</span>
+    <span class="tool-toggle">${isLongList ? "+" : "-"}</span>
+  </div>
+  <div class="tool-body ${collapsedClass}">
+    ${matchesHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function parseGrepOutput(output) {
+  if (!output.trim())
+    return [];
+  const lines = output.trim().split(`
+`);
+  const matches = [];
+  for (const line of lines) {
+    const match = line.match(/^(.+?):(\d+):?(.*)$/);
+    if (match && match[1] && match[2]) {
+      matches.push({
+        file: match[1],
+        line: parseInt(match[2], 10),
+        content: match[3] || ""
+      });
+    }
+  }
+  return matches;
+}
+
+// src/render/components/tools/task.ts
+function renderTaskTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const description = input?.description || state.title || "Task";
+  const prompt = input?.prompt || "";
+  const agentType = input?.subagent_type || "general";
+  const command = input?.command;
+  const output = state.output || "";
+  const error = state.error;
+  const status = state.status;
+  const agentBadge = getAgentBadge(agentType);
+  const commandHtml = command ? `<div class="task-command">
+        <span class="task-command-label">Command:</span>
+        <code>${escapeHtml(command)}</code>
+      </div>` : "";
+  const promptLines = prompt.split(`
+`).length;
+  const isLongPrompt = promptLines > 5;
+  const promptHtml = prompt ? `<div class="task-prompt">
+        <details ${isLongPrompt ? "" : "open"}>
+          <summary class="task-prompt-label">Prompt (${promptLines} lines)</summary>
+          <pre><code>${escapeHtml(prompt)}</code></pre>
+        </details>
+      </div>` : "";
+  const resultLines = output.split(`
+`).length;
+  const resultHtml = output ? `<div class="task-result">
+        <details open>
+          <summary class="task-result-label">Result (${resultLines} lines)</summary>
+          <pre><code>${escapeHtml(output)}</code></pre>
+        </details>
+      </div>` : "";
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="task-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-task" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#128101;</span>
+    ${agentBadge}
+    <span class="task-description">${escapeHtml(description)}</span>
+    <span class="tool-toggle">-</span>
+  </div>
+  <div class="tool-body">
+    ${commandHtml}
+    ${promptHtml}
+    ${resultHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function getAgentBadge(agentType) {
+  const badges = {
+    general: { color: "#1565c0", bg: "#e3f2fd", label: "General" },
+    explore: { color: "#6a1b9a", bg: "#f3e5f5", label: "Explore" },
+    reviewer: { color: "#c62828", bg: "#ffebee", label: "Reviewer" },
+    docs: { color: "#2e7d32", bg: "#e8f5e9", label: "Docs" }
+  };
+  const badge = badges[agentType] || { color: "#757575", bg: "#f5f5f5", label: agentType };
+  return `<span class="task-agent-badge" style="color: ${badge.color}; background: ${badge.bg}">
+    ${escapeHtml(badge.label)}
+  </span>`;
+}
+
+// src/render/components/tools/todowrite.ts
+function renderTodoWriteTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const todos = input?.todos || [];
+  const error = state.error;
+  const status = state.status;
+  const completed = todos.filter((t) => t.status === "completed").length;
+  const inProgress = todos.filter((t) => t.status === "in_progress").length;
+  const pending = todos.filter((t) => t.status === "pending").length;
+  const cancelled = todos.filter((t) => t.status === "cancelled").length;
+  const summary = `${completed}/${todos.length} done`;
+  const todoListHtml = todos.length > 0 ? `<ul class="todo-list">
+        ${todos.map((todo) => renderTodoItem(todo)).join(`
+`)}
+      </ul>` : `<div class="todo-empty">No todos</div>`;
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="todo-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-todowrite" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#128203;</span>
+    <span class="tool-name">Todo List</span>
+    <span class="todo-summary">${escapeHtml(summary)}</span>
+    <span class="todo-stats">
+      ${inProgress > 0 ? `<span class="todo-stat-progress">${inProgress} in progress</span>` : ""}
+      ${pending > 0 ? `<span class="todo-stat-pending">${pending} pending</span>` : ""}
+      ${cancelled > 0 ? `<span class="todo-stat-cancelled">${cancelled} cancelled</span>` : ""}
+    </span>
+    <span class="tool-toggle">-</span>
+  </div>
+  <div class="tool-body">
+    ${todoListHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function renderTodoItem(todo) {
+  const statusIcon = getStatusIcon(todo.status);
+  const priorityBadge = getPriorityBadge(todo.priority);
+  return `<li class="todo-item todo-${todo.status}">
+    <span class="todo-status">${statusIcon}</span>
+    <span class="todo-content">${escapeHtml(todo.content)}</span>
+    ${priorityBadge}
+  </li>`;
+}
+function getStatusIcon(status) {
+  switch (status) {
+    case "completed":
+      return "&#10003;";
+    case "in_progress":
+      return "&#8594;";
+    case "pending":
+      return "&#9675;";
+    case "cancelled":
+      return "&#10007;";
+    default:
+      return "&#9675;";
+  }
+}
+function getPriorityBadge(priority) {
+  if (priority === "high") {
+    return `<span class="todo-priority priority-high">high</span>`;
+  }
+  if (priority === "medium") {
+    return `<span class="todo-priority priority-medium">medium</span>`;
+  }
+  return "";
+}
+
+// src/render/components/tools/webfetch.ts
+function renderWebFetchTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const url = input?.url || "";
+  const format = input?.format || "markdown";
+  const output = state.output || "";
+  const error = state.error;
+  const status = state.status;
+  const urlHtml = url && isSafeUrl(url) ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" class="webfetch-url">${escapeHtml(truncateUrl(url))}</a>` : `<span class="webfetch-url">${escapeHtml(url)}</span>`;
+  const formatBadge = `<span class="webfetch-format">${escapeHtml(format)}</span>`;
+  const contentLines = output.split(`
+`).length;
+  const contentSize = formatBytes(output.length);
+  const sizeInfo = output ? `<span class="webfetch-size">${contentSize}</span>` : "";
+  const isLongContent = contentLines > 30;
+  const collapsedClass = isLongContent ? "collapsed" : "";
+  let contentHtml = "";
+  if (output) {
+    contentHtml = `<div class="webfetch-content">
+      <pre><code>${escapeHtml(output)}</code></pre>
+    </div>`;
+  }
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="webfetch-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-webfetch" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#127760;</span>
+    ${urlHtml}
+    ${formatBadge}
+    ${sizeInfo}
+    <span class="tool-toggle">${isLongContent ? "+" : "-"}</span>
+  </div>
+  <div class="tool-body ${collapsedClass}">
+    ${contentHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function truncateUrl(url, maxLength = 60) {
+  if (url.length <= maxLength)
+    return url;
+  try {
+    const parsed = new URL(url);
+    const domain = parsed.hostname;
+    const path = parsed.pathname;
+    if (domain.length + path.length <= maxLength) {
+      return domain + path;
+    }
+    const availableForPath = maxLength - domain.length - 3;
+    if (availableForPath > 10) {
+      return domain + path.slice(0, availableForPath) + "...";
+    }
+    return url.slice(0, maxLength - 3) + "...";
+  } catch {
+    return url.slice(0, maxLength - 3) + "...";
+  }
+}
+
+// src/render/components/tools/batch.ts
+function renderBatchTool(part) {
+  const { state } = part;
+  const input = state.input;
+  const toolCalls = input?.tool_calls || [];
+  const output = state.output || "";
+  const error = state.error;
+  const status = state.status;
+  const toolCounts = new Map;
+  for (const call of toolCalls) {
+    const count = toolCounts.get(call.tool) || 0;
+    toolCounts.set(call.tool, count + 1);
+  }
+  const toolSummary = Array.from(toolCounts.entries()).map(([tool, count]) => `${count} ${tool}`).join(", ");
+  const toolListHtml = toolCalls.length > 0 ? `<ul class="batch-tool-list">
+        ${toolCalls.map((call, i) => renderNestedTool(call, i)).join(`
+`)}
+      </ul>` : `<div class="batch-empty">No tool calls</div>`;
+  let outputHtml = "";
+  if (output) {
+    const outputLines = output.split(`
+`).length;
+    const isLongOutput = outputLines > 30;
+    outputHtml = `<div class="batch-output">
+      <details ${isLongOutput ? "" : "open"}>
+        <summary class="batch-output-label">Combined Output (${outputLines} lines)</summary>
+        <pre><code>${escapeHtml(output)}</code></pre>
+      </details>
+    </div>`;
+  }
+  let errorHtml = "";
+  if (error) {
+    errorHtml = `<div class="batch-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(error)}</span>
+    </div>`;
+  }
+  return `<div class="tool-call tool-batch" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">&#128230;</span>
+    <span class="batch-title">Batch (${toolCalls.length} calls)</span>
+    <span class="batch-summary">${escapeHtml(toolSummary)}</span>
+    <span class="tool-toggle">-</span>
+  </div>
+  <div class="tool-body">
+    ${toolListHtml}
+    ${outputHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function renderNestedTool(call, index) {
+  const toolIcon = getToolIcon(call.tool);
+  const info = getToolInfo(call.tool, call.parameters);
+  return `<li class="batch-tool-item">
+    <span class="batch-tool-index">${index + 1}</span>
+    <span class="batch-tool-icon">${toolIcon}</span>
+    <span class="batch-tool-name">${escapeHtml(call.tool)}</span>
+    <span class="batch-tool-info">${escapeHtml(info)}</span>
+  </li>`;
+}
+function getToolIcon(tool) {
+  const icons = {
+    bash: "$",
+    read: "&#128196;",
+    write: "&#128221;",
+    edit: "&#9998;",
+    glob: "&#128269;",
+    grep: "&#128270;",
+    task: "&#128101;",
+    todowrite: "&#128203;",
+    webfetch: "&#127760;"
+  };
+  return icons[tool] || "&#128295;";
+}
+function getToolInfo(tool, params) {
+  switch (tool) {
+    case "bash":
+      return String(params.command || params.description || "");
+    case "read":
+    case "write":
+    case "edit":
+      return String(params.filePath || "");
+    case "glob":
+      return String(params.pattern || "");
+    case "grep":
+      return String(params.pattern || "");
+    case "webfetch":
+      return String(params.url || "");
+    default:
+      return "";
+  }
+}
+
+// src/render/components/part.ts
+function renderTextPart(part) {
+  if (part.ignored)
+    return "";
+  return `<div class="part part-text">
+  ${renderMarkdown(part.text)}
+</div>`;
+}
+function renderReasoningPart(part) {
+  const hasTiming = part.time?.start && part.time?.end;
+  const durationHtml = hasTiming ? `<span class="reasoning-duration">${formatDuration(part.time.start, part.time.end)}</span>` : "";
+  const contentLines = part.text.split(`
+`).length;
+  const isLong = contentLines > 20;
+  const collapsedClass = isLong ? "collapsed" : "";
+  const toggleIndicator = isLong ? "+" : "-";
+  return `<div class="reasoning">
+  <div class="reasoning-header" onclick="this.nextElementSibling.classList.toggle('collapsed'); this.querySelector('.reasoning-toggle').textContent = this.nextElementSibling.classList.contains('collapsed') ? '+' : '-';">
+    <span class="reasoning-icon">&#128161;</span>
+    <span class="reasoning-label">Thinking...</span>
+    ${durationHtml}
+    <span class="reasoning-toggle">${toggleIndicator}</span>
+  </div>
+  <div class="reasoning-content ${collapsedClass}">
+    ${escapeHtml(part.text)}
+  </div>
+</div>`;
+}
+function renderToolPart(part) {
+  const { tool } = part;
+  switch (tool) {
+    case "bash":
+      return renderBashTool(part);
+    case "read":
+      return renderReadTool(part);
+    case "write":
+      return renderWriteTool(part);
+    case "edit":
+      return renderEditTool(part);
+    case "glob":
+      return renderGlobTool(part);
+    case "grep":
+      return renderGrepTool(part);
+    case "task":
+      return renderTaskTool(part);
+    case "todowrite":
+      return renderTodoWriteTool(part);
+    case "webfetch":
+      return renderWebFetchTool(part);
+    case "batch":
+      return renderBatchTool(part);
+    default:
+      return renderGenericToolPart(part);
+  }
+}
+function renderGenericToolPart(part) {
+  const { tool, state } = part;
+  const status = state.status;
+  const title = state.title || tool;
+  const inputHtml = state.input ? `<div class="tool-input">
+      <div class="tool-input-label">Input</div>
+      <pre><code>${escapeHtml(JSON.stringify(state.input, null, 2))}</code></pre>
+    </div>` : "";
+  const outputHtml = state.output ? `<div class="tool-output">
+      <div class="tool-output-label">Output</div>
+      <pre><code>${escapeHtml(state.output)}</code></pre>
+    </div>` : "";
+  const errorHtml = state.error ? `<div class="tool-error">
+      <span class="error-icon">&#9888;</span>
+      <span class="error-message">${escapeHtml(state.error)}</span>
+    </div>` : "";
+  const outputLines = (state.output || "").split(`
+`).length;
+  const isLongOutput = outputLines > 20;
+  const collapsedClass = isLongOutput ? "collapsed" : "";
+  return `<div class="tool-call tool-generic tool-${escapeHtml(tool)}" data-status="${escapeHtml(status)}">
+  <div class="tool-header" onclick="this.nextElementSibling.classList.toggle('collapsed')">
+    <span class="tool-icon">${getToolIcon2(tool)}</span>
+    <span class="tool-name">${escapeHtml(tool)}</span>
+    <span class="tool-title">${escapeHtml(title)}</span>
+    <span class="tool-toggle">${isLongOutput ? "+" : "-"}</span>
+  </div>
+  <div class="tool-body ${collapsedClass}">
+    ${inputHtml}
+    ${outputHtml}
+    ${errorHtml}
+  </div>
+</div>`;
+}
+function getToolIcon2(tool) {
+  const icons = {
+    bash: "$",
+    read: "&#128196;",
+    write: "&#128221;",
+    edit: "&#9998;",
+    glob: "&#128269;",
+    grep: "&#128270;",
+    task: "&#128101;",
+    todowrite: "&#128203;",
+    webfetch: "&#127760;",
+    batch: "&#128230;"
+  };
+  return icons[tool] || "&#128295;";
+}
+function renderFilePart(part) {
+  const filename = part.filename || "file";
+  const isImage = part.mime.startsWith("image/");
+  const isDataUrl = part.url.startsWith("data:");
+  const icon = getFileIcon2(part.mime);
+  let sizeHtml = "";
+  if (isDataUrl) {
+    const base64Part = part.url.split(",")[1];
+    if (base64Part) {
+      const estimatedBytes = Math.floor(base64Part.length * 0.75);
+      sizeHtml = `<span class="file-size">${formatBytes(estimatedBytes)}</span>`;
+    }
+  }
+  const sourceHtml = part.source ? `<span class="file-source">from ${escapeHtml(part.source.type)}${part.source.toolName ? `: ${escapeHtml(part.source.toolName)}` : ""}</span>` : "";
+  let previewHtml = "";
+  if (isImage && isDataUrl && isSafeUrl(part.url)) {
+    previewHtml = `<div class="file-preview">
+      <img src="${part.url}" alt="${escapeHtml(filename)}" loading="lazy">
+    </div>`;
+  } else if (isDataUrl) {
+    previewHtml = `<div class="file-preview">
+      <a href="${part.url}" download="${escapeHtml(filename)}" class="file-preview-link">
+        <span>&#128190;</span> Download file
+      </a>
+    </div>`;
+  }
+  return `<div class="part part-file">
+  <div class="file-header">
+    <span class="file-icon">${icon}</span>
+    <div class="file-info">
+      <span class="file-name">${escapeHtml(filename)}</span>
+      <div class="file-meta">
+        <span class="file-mime">${escapeHtml(part.mime)}</span>
+        ${sizeHtml}
+        ${sourceHtml}
+      </div>
+    </div>
+  </div>
+  ${previewHtml}
+</div>`;
+}
+function getFileIcon2(mime) {
+  if (mime.startsWith("image/"))
+    return "&#128444;";
+  if (mime.startsWith("video/"))
+    return "&#127910;";
+  if (mime.startsWith("audio/"))
+    return "&#127925;";
+  if (mime.startsWith("text/"))
+    return "&#128196;";
+  if (mime.includes("pdf"))
+    return "&#128203;";
+  if (mime.includes("zip") || mime.includes("compressed"))
+    return "&#128230;";
+  return "&#128206;";
+}
+function renderSnapshotPart(part) {
+  return `<div class="part part-snapshot">
+  <span class="snapshot-icon">&#128247;</span>
+  <span class="snapshot-label">Snapshot created</span>
+  <span class="snapshot-id">${escapeHtml(part.snapshot)}</span>
+</div>`;
+}
+function renderPatchPart(part) {
+  const fileCount = part.files.length;
+  const filesHtml = part.files.length > 0 ? `<ul class="patch-files">
+        ${part.files.map((file) => `<li class="patch-file-item">
+          <span class="patch-file-icon">&#128196;</span>
+          <span class="patch-file-name">${escapeHtml(file)}</span>
+        </li>`).join("")}
+      </ul>` : "";
+  return `<div class="part part-patch">
+  <div class="patch-header">
+    <span class="patch-icon">&#128190;</span>
+    <span class="patch-label">File changes</span>
+    <span class="patch-file-count">${fileCount} file${fileCount !== 1 ? "s" : ""}</span>
+    <span class="patch-hash">${escapeHtml(part.hash.slice(0, 8))}</span>
+  </div>
+  ${filesHtml}
+</div>`;
+}
+function renderAgentPart(part) {
+  const sourceHtml = part.source?.value ? `<span class="agent-source">${escapeHtml(part.source.value.slice(0, 100))}${part.source.value.length > 100 ? "..." : ""}</span>` : "";
+  return `<div class="part part-agent">
+  <span class="agent-icon">&#129302;</span>
+  <span class="agent-label">Agent:</span>
+  <span class="agent-name-badge">${escapeHtml(part.name)}</span>
+  ${sourceHtml}
+</div>`;
+}
+function renderCompactionPart(part) {
+  const typeLabel = part.auto ? "Auto-compacted" : "Manual compaction";
+  const icon = part.auto ? "&#9881;" : "&#128477;";
+  return `<div class="part part-compaction">
+  <div class="compaction-badge">
+    <span class="compaction-icon">${icon}</span>
+    <span class="compaction-type">${typeLabel}</span>
+  </div>
+</div>`;
+}
+function renderSubtaskPart(part) {
+  const agentClass = `agent-${escapeHtml(part.agent.toLowerCase())}`;
+  const commandHtml = part.command ? `<div class="subtask-command">
+        <span class="subtask-command-label">Command:</span>
+        <code>${escapeHtml(part.command)}</code>
+      </div>` : "";
+  return `<div class="part part-subtask">
+  <div class="subtask-header">
+    <span class="subtask-icon">&#128101;</span>
+    <span class="subtask-agent-badge ${agentClass}">${escapeHtml(part.agent)}</span>
+    <span class="subtask-description">${escapeHtml(part.description)}</span>
+  </div>
+  <div class="subtask-body">
+    ${commandHtml}
+    <div class="subtask-prompt">
+      <div class="subtask-prompt-label">Prompt</div>
+      <div class="subtask-prompt-text">${escapeHtml(part.prompt)}</div>
+    </div>
+  </div>
+</div>`;
+}
+function renderRetryPart(part) {
+  const codeHtml = part.error.code ? `<span class="retry-error-code">Code: ${escapeHtml(part.error.code)}</span>` : "";
+  return `<div class="part part-retry">
+  <div class="retry-header">
+    <span class="retry-icon">&#128260;</span>
+    <span class="retry-label">Retry</span>
+    <span class="retry-attempt">Attempt #${part.attempt}</span>
+  </div>
+  <div class="retry-error">
+    <div class="retry-error-name">${escapeHtml(part.error.name)}</div>
+    <div class="retry-error-message">${escapeHtml(part.error.message)}</div>
+    ${codeHtml}
+  </div>
+</div>`;
+}
+function renderGenericPart(part) {
+  return `<div class="part part-generic">
+  <span class="part-type">${escapeHtml(part.type)}</span>
+</div>`;
+}
+function renderPart(part) {
+  switch (part.type) {
+    case "text":
+      return renderTextPart(part);
+    case "reasoning":
+      return renderReasoningPart(part);
+    case "tool":
+      return renderToolPart(part);
+    case "file":
+      return renderFilePart(part);
+    case "snapshot":
+      return renderSnapshotPart(part);
+    case "patch":
+      return renderPatchPart(part);
+    case "agent":
+      return renderAgentPart(part);
+    case "compaction":
+      return renderCompactionPart(part);
+    case "subtask":
+      return renderSubtaskPart(part);
+    case "retry":
+      return renderRetryPart(part);
+    default:
+      return renderGenericPart(part);
+  }
+}
+
+// src/render/components/message.ts
+function renderUserMessage(message, parts) {
+  const time = formatTime(message.time.created);
+  const model = message.model ? `${message.model.providerID}/${message.model.modelID}` : "";
+  const partsHtml = parts.map((part) => renderPart(part)).join(`
+`);
+  return `<div class="message message-user" id="${escapeHtml(message.id)}">
+  <div class="message-header">
+    <span class="message-role">User</span>
+    <span class="message-time">${time}</span>
+    ${model ? `<span class="message-model">${escapeHtml(model)}</span>` : ""}
+  </div>
+  <div class="message-content">
+    ${partsHtml}
+  </div>
+</div>`;
+}
+function renderAssistantMessage(message, parts) {
+  const time = formatTime(message.time.created);
+  const model = message.modelID || "";
+  const tokens = message.tokens;
+  const cost = message.cost;
+  const partsHtml = parts.map((part) => renderPart(part)).join(`
+`);
+  const statsHtml = [];
+  if (tokens) {
+    statsHtml.push(`<span class="stat">Tokens: ${formatTokens(tokens.input)} in / ${formatTokens(tokens.output)} out</span>`);
+    if (tokens.cache?.read) {
+      statsHtml.push(`<span class="stat">Cache: ${formatTokens(tokens.cache.read)} read</span>`);
+    }
+  }
+  if (cost !== undefined && cost > 0) {
+    statsHtml.push(`<span class="stat">Cost: ${formatCost(cost)}</span>`);
+  }
+  if (message.finish) {
+    statsHtml.push(`<span class="stat">Finish: ${message.finish}</span>`);
+  }
+  return `<div class="message message-assistant" id="${escapeHtml(message.id)}">
+  <div class="message-header">
+    <span class="message-role">Assistant</span>
+    <span class="message-time">${time}</span>
+    ${model ? `<span class="message-model">${escapeHtml(model)}</span>` : ""}
+  </div>
+  <div class="message-content">
+    ${partsHtml}
+  </div>
+  ${statsHtml.length > 0 ? `<div class="message-stats">${statsHtml.join(`
+`)}</div>` : ""}
+</div>`;
+}
+function renderMessage(messageWithParts) {
+  const { message, parts } = messageWithParts;
+  if (message.role === "user") {
+    return renderUserMessage(message, parts);
+  } else {
+    return renderAssistantMessage(message, parts);
+  }
+}
+function renderMessages(messages) {
+  return `<div class="messages">
+  ${messages.map(renderMessage).join(`
+`)}
+</div>`;
+}
+
+// src/render/templates/page.ts
+function pageLink(pageNum, currentPage) {
+  const pageFile = `page-${String(pageNum).padStart(3, "0")}.html`;
+  if (pageNum === currentPage) {
+    return `<span class="pagination-page current">${pageNum}</span>`;
+  }
+  return `<a href="${pageFile}" class="pagination-page">${pageNum}</a>`;
+}
+function getPageNumbers(currentPage, totalPages) {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const pages = [];
+  const windowSize = 1;
+  pages.push(1);
+  const windowStart = Math.max(2, currentPage - windowSize);
+  const windowEnd = Math.min(totalPages - 1, currentPage + windowSize);
+  if (windowStart > 2) {
+    pages.push(-1);
+  }
+  for (let i = windowStart;i <= windowEnd; i++) {
+    pages.push(i);
+  }
+  if (windowEnd < totalPages - 1) {
+    pages.push(-1);
+  }
+  pages.push(totalPages);
+  return pages;
+}
+function renderPagination2(pageNumber, totalPages) {
+  if (totalPages <= 1)
+    return "";
+  const parts = [];
+  if (pageNumber > 1) {
+    const prevFile = `page-${String(pageNumber - 1).padStart(3, "0")}.html`;
+    parts.push(`<a href="${prevFile}" class="pagination-prev">&larr; Previous</a>`);
+  } else {
+    parts.push(`<span class="pagination-prev disabled">&larr; Previous</span>`);
+  }
+  const pageNumbers = getPageNumbers(pageNumber, totalPages);
+  for (const num of pageNumbers) {
+    if (num === -1) {
+      parts.push(`<span class="pagination-ellipsis">&hellip;</span>`);
+    } else {
+      parts.push(pageLink(num, pageNumber));
+    }
+  }
+  if (pageNumber < totalPages) {
+    const nextFile = `page-${String(pageNumber + 1).padStart(3, "0")}.html`;
+    parts.push(`<a href="${nextFile}" class="pagination-next">Next &rarr;</a>`);
+  } else {
+    parts.push(`<span class="pagination-next disabled">Next &rarr;</span>`);
+  }
+  return `<nav class="pagination">
+  ${parts.join(`
+  `)}
+</nav>`;
+}
+function renderConversationPage(data) {
+  const {
+    session,
+    projectName,
+    messages,
+    pageNumber,
+    totalPages,
+    assetsPath = "../../assets"
+  } = data;
+  const breadcrumbs = [
+    { label: projectName ?? "Sessions", href: "../../index.html" },
+    { label: session.title, href: "index.html" },
+    { label: `Page ${pageNumber}` }
+  ];
+  const header = renderHeader({
+    title: session.title,
+    subtitle: `Page ${pageNumber} of ${totalPages}`,
+    breadcrumbs,
+    showSearch: true
+  });
+  const messagesHtml = renderMessages(messages);
+  const paginationTop = renderPagination2(pageNumber, totalPages);
+  const paginationBottom = renderPagination2(pageNumber, totalPages);
+  const footer = renderFooter();
+  const content = `
+${header}
+${paginationTop}
+${messagesHtml}
+${paginationBottom}
+${footer}
+`;
+  return renderBasePage({
+    title: `${session.title} - Page ${pageNumber}`,
+    content,
+    assetsPath,
+    bodyClass: "conversation-page",
+    totalPages
+  });
+}
+// src/render/git-commits.ts
+function parseGitRemoteUrl(url) {
+  const httpsMatch = url.match(/https?:\/\/github\.com\/([^/]+)\/([^/\s.]+)(?:\.git)?/i);
+  if (httpsMatch) {
+    const [, owner, name] = httpsMatch;
+    return {
+      owner,
+      name,
+      fullName: `${owner}/${name}`,
+      baseUrl: `https://github.com/${owner}/${name}`
+    };
+  }
+  const sshMatch = url.match(/git@github\.com:([^/]+)\/([^/\s.]+)(?:\.git)?/i);
+  if (sshMatch) {
+    const [, owner, name] = sshMatch;
+    return {
+      owner,
+      name,
+      fullName: `${owner}/${name}`,
+      baseUrl: `https://github.com/${owner}/${name}`
+    };
+  }
+  const shorthandMatch = url.match(/(?:^|[^@])github\.com[:/]([^/\s]+)\/([^/\s.]+?)(?:\.git)?(?:\s|$)/i);
+  if (shorthandMatch) {
+    const [, owner, name] = shorthandMatch;
+    return {
+      owner,
+      name,
+      fullName: `${owner}/${name}`,
+      baseUrl: `https://github.com/${owner}/${name}`
+    };
+  }
+  return null;
+}
+function parseRepoString(repo) {
+  const match = repo.match(/^([^/]+)\/([^/]+)$/);
+  if (!match)
+    return null;
+  const [, owner, name] = match;
+  return {
+    owner,
+    name,
+    fullName: `${owner}/${name}`,
+    baseUrl: `https://github.com/${owner}/${name}`
+  };
+}
+function parseGitCommitOutput(output) {
+  const commitMatch = output.match(/\[([^\s\]]+)(?:\s+\([^)]+\))?\s+([a-f0-9]{7,40})\]\s+(.+)/i);
+  if (!commitMatch)
+    return null;
+  const [, branch, hash, message] = commitMatch;
+  return {
+    hash: hash.slice(0, 7),
+    fullHash: hash.length > 7 ? hash : undefined,
+    message: message.trim(),
+    branch,
+    timestamp: 0
+  };
+}
+function parseGitPushOutput(output) {
+  const result = {
+    repo: null,
+    commits: []
+  };
+  const repoMatch = output.match(/To\s+((?:[\S]*)?github\.com[^\s]+)/i);
+  if (repoMatch) {
+    result.repo = parseGitRemoteUrl(repoMatch[1]);
+  }
+  const rangeRegex = /([a-f0-9]{7,40})\.\.([a-f0-9]{7,40})\s+(\S+)\s+->\s+\S+/gi;
+  let rangeMatch;
+  while ((rangeMatch = rangeRegex.exec(output)) !== null) {
+    result.commits.push({
+      fromHash: rangeMatch[1].slice(0, 7),
+      toHash: rangeMatch[2].slice(0, 7),
+      branch: rangeMatch[3]
+    });
+  }
+  const newBranchRegex = /\*\s+\[new branch\]\s+(\S+)\s+->\s+\S+/gi;
+  let newBranchMatch;
+  while ((newBranchMatch = newBranchRegex.exec(output)) !== null) {
+    result.commits.push({
+      toHash: "",
+      branch: newBranchMatch[1]
+    });
+  }
+  return result;
+}
+function isGitCommitCommand(command) {
+  return /(?:^|&&|\|\||;|\$\()\s*(?:[A-Z_]+=\S+\s+)*git\s+commit\b/i.test(command);
+}
+function isGitPushCommand(command) {
+  return /(?:^|&&|\|\||;|\$\()\s*(?:[A-Z_]+=\S+\s+)*git\s+push\b/i.test(command);
+}
+function extractCommitsFromMessages(messages, repoOverride) {
+  const commits = [];
+  let currentPromptNumber = 0;
+  let detectedRepo = repoOverride ?? null;
+  for (const msg of messages) {
+    if (msg.message.role === "user") {
+      currentPromptNumber++;
+      continue;
+    }
+    if (msg.message.role === "assistant") {
+      for (const part of msg.parts) {
+        if (part.type !== "tool" || part.tool !== "bash")
+          continue;
+        const toolPart = part;
+        const input = toolPart.state.input;
+        const output = toolPart.state.output || "";
+        const command = input?.command || "";
+        const timestamp = toolPart.state.time?.end ?? toolPart.state.time?.start ?? msg.message.time.created;
+        if (isGitPushCommand(command)) {
+          const pushResult = parseGitPushOutput(output);
+          if (pushResult.repo && !detectedRepo) {
+            detectedRepo = pushResult.repo;
+          }
+        }
+        if (isGitCommitCommand(command)) {
+          const commitInfo = parseGitCommitOutput(output);
+          if (commitInfo) {
+            commitInfo.timestamp = timestamp;
+            if (detectedRepo || repoOverride) {
+              const repo = repoOverride ?? detectedRepo;
+              commitInfo.url = `${repo.baseUrl}/commit/${commitInfo.fullHash ?? commitInfo.hash}`;
+            }
+            commits.push({
+              commit: commitInfo,
+              afterPromptNumber: currentPromptNumber
+            });
+          }
+        }
+      }
+    }
+  }
+  if (detectedRepo) {
+    for (const { commit } of commits) {
+      if (!commit.url) {
+        commit.url = `${detectedRepo.baseUrl}/commit/${commit.fullHash ?? commit.hash}`;
+      }
+    }
+  }
+  return commits;
+}
+function detectRepoFromMessages(messages) {
+  for (const msg of messages) {
+    if (msg.message.role !== "assistant")
+      continue;
+    for (const part of msg.parts) {
+      if (part.type !== "tool" || part.tool !== "bash")
+        continue;
+      const toolPart = part;
+      const input = toolPart.state.input;
+      const output = toolPart.state.output || "";
+      const command = input?.command || "";
+      if (isGitPushCommand(command)) {
+        const pushResult = parseGitPushOutput(output);
+        if (pushResult.repo) {
+          return pushResult.repo;
+        }
+      }
+      if (/\bgit\s+remote\b/i.test(command) && output.includes("github.com")) {
+        const originMatch = output.match(/origin\s+([\S]+)\s+\((?:fetch|push)\)/i);
+        if (originMatch) {
+          const repo = parseGitRemoteUrl(originMatch[1]);
+          if (repo)
+            return repo;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+// src/render/html.ts
+var PROMPTS_PER_PAGE = 5;
+async function ensureDir(dir) {
+  await mkdir(dir, { recursive: true });
+}
+async function writeHtml(filePath, content) {
+  await ensureDir(dirname(filePath));
+  await Bun.write(filePath, content);
+}
+function getAssetsSourceDir() {
+  const prodAssetsDir = join2(import.meta.dir, "assets");
+  const devAssetsDir = join2(import.meta.dir, "../assets");
+  if (Bun.file(join2(prodAssetsDir, "styles.css")).size) {
+    return prodAssetsDir;
+  }
+  return devAssetsDir;
+}
+async function copyAssets(outputDir) {
+  const assetsDir = join2(outputDir, "assets");
+  await ensureDir(assetsDir);
+  const sourceDir = getAssetsSourceDir();
+  await copyFile(join2(sourceDir, "styles.css"), join2(assetsDir, "styles.css"));
+  await copyFile(join2(sourceDir, "prism.css"), join2(assetsDir, "prism.css"));
+  await copyFile(join2(sourceDir, "theme.js"), join2(assetsDir, "theme.js"));
+  await copyFile(join2(sourceDir, "highlight.js"), join2(assetsDir, "highlight.js"));
+  await copyFile(join2(sourceDir, "search.js"), join2(assetsDir, "search.js"));
+}
+function getFirstPrompt(messages) {
+  for (const msg of messages) {
+    if (msg.message.role === "user") {
+      for (const part of msg.parts) {
+        if (part.type === "text") {
+          return part.text;
+        }
+      }
+    }
+  }
+  return;
+}
+function countTools(parts) {
+  const counts = {};
+  for (const part of parts) {
+    if (part.type === "tool") {
+      counts[part.tool] = (counts[part.tool] ?? 0) + 1;
+    }
+  }
+  return counts;
+}
+function buildTimeline(messages, repoOverride) {
+  const timeline = [];
+  let promptNumber = 0;
+  const detectedRepo = repoOverride ?? detectRepoFromMessages(messages) ?? undefined;
+  const commitsWithPrompts = extractCommitsFromMessages(messages, detectedRepo);
+  const commitsByPrompt = new Map;
+  for (const { commit, afterPromptNumber } of commitsWithPrompts) {
+    const existing = commitsByPrompt.get(afterPromptNumber) ?? [];
+    existing.push(commit);
+    commitsByPrompt.set(afterPromptNumber, existing);
+  }
+  for (let i = 0;i < messages.length; i++) {
+    const msg = messages[i];
+    if (msg.message.role !== "user")
+      continue;
+    promptNumber++;
+    let promptPreview = "";
+    for (const part of msg.parts) {
+      if (part.type === "text") {
+        promptPreview = part.text;
+        break;
+      }
+    }
+    const toolCounts = {};
+    for (let j = i + 1;j < messages.length; j++) {
+      const nextMsg = messages[j];
+      if (nextMsg.message.role === "user")
+        break;
+      const counts = countTools(nextMsg.parts);
+      for (const [tool, count] of Object.entries(counts)) {
+        toolCounts[tool] = (toolCounts[tool] ?? 0) + count;
+      }
+    }
+    const pageNumber = Math.ceil(promptNumber / PROMPTS_PER_PAGE);
+    const commits = commitsByPrompt.get(promptNumber);
+    timeline.push({
+      promptNumber,
+      messageId: msg.message.id,
+      promptPreview,
+      timestamp: msg.message.time.created,
+      toolCounts,
+      pageNumber,
+      commits
+    });
+  }
+  return timeline;
+}
+function paginateMessages(messages) {
+  const pages = [];
+  let currentPage = [];
+  let promptCount = 0;
+  for (const msg of messages) {
+    if (msg.message.role === "user") {
+      promptCount++;
+      if (promptCount > PROMPTS_PER_PAGE) {
+        pages.push(currentPage);
+        currentPage = [];
+        promptCount = 1;
+      }
+    }
+    currentPage.push(msg);
+  }
+  if (currentPage.length > 0) {
+    pages.push(currentPage);
+  }
+  return pages;
+}
+async function generateSessionHtml(storagePath, outputDir, session2, projectName, repo, includeJson) {
+  const sessionDir = join2(outputDir, "sessions", session2.id);
+  await ensureDir(sessionDir);
+  const messages = await getMessagesWithParts(storagePath, session2.id);
+  const messageCount = messages.length;
+  const firstPrompt = getFirstPrompt(messages);
+  const timeline = buildTimeline(messages, repo);
+  let totalTokensInput = 0;
+  let totalTokensOutput = 0;
+  let totalCost = 0;
+  let model;
+  for (const msg of messages) {
+    if (msg.message.role === "assistant") {
+      const asst = msg.message;
+      if (asst.tokens) {
+        totalTokensInput += asst.tokens.input;
+        totalTokensOutput += asst.tokens.output;
+      }
+      if (asst.cost) {
+        totalCost += asst.cost;
+      }
+      if (!model && asst.modelID) {
+        model = asst.modelID;
+      }
+    }
+  }
+  const pages = paginateMessages(messages);
+  const pageCount = pages.length;
+  const sessionOverviewHtml = renderSessionPage({
+    session: session2,
+    projectName,
+    timeline,
+    messageCount,
+    totalTokens: totalTokensInput > 0 || totalTokensOutput > 0 ? { input: totalTokensInput, output: totalTokensOutput } : undefined,
+    totalCost: totalCost > 0 ? totalCost : undefined,
+    pageCount,
+    model,
+    assetsPath: "../../assets"
+  });
+  await writeHtml(join2(sessionDir, "index.html"), sessionOverviewHtml);
+  for (let i = 0;i < pages.length; i++) {
+    const pageNumber = i + 1;
+    const pageMessages = pages[i] ?? [];
+    const pageHtml = renderConversationPage({
+      session: session2,
+      projectName,
+      messages: pageMessages,
+      pageNumber,
+      totalPages: pageCount,
+      assetsPath: "../../assets"
+    });
+    const pageFile = `page-${String(pageNumber).padStart(3, "0")}.html`;
+    await writeHtml(join2(sessionDir, pageFile), pageHtml);
+  }
+  if (includeJson) {
+    const jsonData = {
+      session: session2,
+      messages,
+      timeline,
+      stats: {
+        messageCount,
+        pageCount,
+        totalTokensInput,
+        totalTokensOutput,
+        totalCost,
+        model
+      }
+    };
+    await Bun.write(join2(sessionDir, "session.json"), JSON.stringify(jsonData, null, 2));
+  }
+  return { messageCount, pageCount, firstPrompt };
+}
+async function generateHtml(options) {
+  const { storagePath, outputDir, all = false, sessionId, includeJson = false, onProgress, repo } = options;
+  await ensureDir(outputDir);
+  await copyAssets(outputDir);
+  const sessionCards = [];
+  let title = "OpenCode Sessions";
+  let projectName;
+  let totalPageCount = 0;
+  let totalMessageCount = 0;
+  async function processSession(session2, project, index, total) {
+    onProgress?.({
+      current: index + 1,
+      total,
+      title: session2.title,
+      phase: "generating"
+    });
+    const result = await generateSessionHtml(storagePath, outputDir, session2, project.name, repo, includeJson);
+    totalPageCount += result.pageCount;
+    totalMessageCount += result.messageCount;
+    sessionCards.push({
+      session: session2,
+      project,
+      messageCount: result.messageCount,
+      firstPrompt: result.firstPrompt
+    });
+  }
+  if (sessionId) {
+    onProgress?.({ current: 0, total: 1, title: "Scanning...", phase: "scanning" });
+    const projects = await listProjects(storagePath);
+    for (const project of projects) {
+      const sessions = await listSessions(storagePath, project.id);
+      const session2 = sessions.find((s) => s.id === sessionId);
+      if (session2) {
+        await processSession(session2, project, 0, 1);
+        title = session2.title;
+        projectName = project.name;
+        break;
+      }
+    }
+  } else if (all) {
+    onProgress?.({ current: 0, total: 0, title: "Scanning projects...", phase: "scanning" });
+    const projects = await listProjects(storagePath);
+    const allSessions = [];
+    for (const project of projects) {
+      const sessions = await listSessions(storagePath, project.id);
+      for (const session2 of sessions) {
+        allSessions.push({ session: session2, project });
+      }
+    }
+    for (let i = 0;i < allSessions.length; i++) {
+      const { session: session2, project } = allSessions[i];
+      await processSession(session2, project, i, allSessions.length);
+    }
+    title = "All OpenCode Sessions";
+  } else {
+    const cwd = process.cwd();
+    onProgress?.({ current: 0, total: 0, title: "Finding project...", phase: "scanning" });
+    const project = await findProjectByPath(storagePath, cwd);
+    if (!project) {
+      throw new Error(`No OpenCode project found for directory: ${cwd}
+` + `Run this command from a directory where you have used OpenCode, ` + `or use --all to generate for all projects.`);
+    }
+    projectName = project.name ?? project.worktree.split("/").pop();
+    title = projectName ?? "OpenCode Sessions";
+    const sessions = await listSessions(storagePath, project.id);
+    for (let i = 0;i < sessions.length; i++) {
+      const session2 = sessions[i];
+      await processSession(session2, project, i, sessions.length);
+    }
+  }
+  const indexHtml = renderIndexPage({
+    title,
+    subtitle: projectName,
+    sessions: sessionCards,
+    isAllProjects: all,
+    assetsPath: "./assets"
+  });
+  await writeHtml(join2(outputDir, "index.html"), indexHtml);
+  onProgress?.({
+    current: sessionCards.length,
+    total: sessionCards.length,
+    title: "Complete",
+    phase: "complete"
+  });
+  return {
+    sessionCount: sessionCards.length,
+    pageCount: totalPageCount,
+    messageCount: totalMessageCount,
+    projectName
+  };
+}
+
+// src/server.ts
+import { resolve, join as join3, sep } from "path";
+function isPathSafe(rootDir, targetPath) {
+  const resolvedRoot = resolve(rootDir);
+  const resolvedTarget = resolve(targetPath);
+  return resolvedTarget.startsWith(resolvedRoot + sep) || resolvedTarget === resolvedRoot;
+}
+function createRequestHandler(rootDir) {
+  const ROOT_DIR = resolve(rootDir);
+  return async function handleRequest(req) {
+    const url = new URL(req.url);
+    if (req.method !== "GET" && req.method !== "HEAD") {
+      return new Response("Method Not Allowed", {
+        status: 405,
+        headers: { Allow: "GET, HEAD" }
+      });
+    }
+    let pathname;
+    try {
+      pathname = decodeURIComponent(url.pathname);
+    } catch {
+      return new Response("Bad Request", { status: 400 });
+    }
+    pathname = pathname.replace(/\0/g, "");
+    const targetPath = join3(ROOT_DIR, pathname);
+    if (!isPathSafe(ROOT_DIR, targetPath)) {
+      return new Response("Forbidden", { status: 403 });
+    }
+    let file = Bun.file(targetPath);
+    let fileExists = await file.exists();
+    if (pathname.endsWith("/") || !fileExists) {
+      const indexPath = join3(targetPath, "index.html");
+      const indexFile = Bun.file(indexPath);
+      if (await indexFile.exists()) {
+        file = indexFile;
+        fileExists = true;
+      }
+    }
+    if (!fileExists) {
+      return new Response("Not Found", {
+        status: 404,
+        headers: { "Content-Type": "text/plain" }
+      });
+    }
+    const content = await file.arrayBuffer();
+    const etag = `W/"${Bun.hash(new Uint8Array(content)).toString(16)}"`;
+    const ifNoneMatch = req.headers.get("If-None-Match");
+    if (ifNoneMatch === etag) {
+      return new Response(null, {
+        status: 304,
+        headers: { ETag: etag }
+      });
+    }
+    const isHashed = /\.[a-f0-9]{8,}\.(js|css|png|jpg|jpeg|gif|svg|woff2?)$/i.test(targetPath);
+    const responseHeaders = {
+      "Content-Type": file.type,
+      "Content-Length": String(content.byteLength),
+      ETag: etag,
+      "Cache-Control": isHashed ? "public, max-age=31536000, immutable" : "public, max-age=3600"
+    };
+    if (req.method === "HEAD") {
+      return new Response(null, { headers: responseHeaders });
+    }
+    return new Response(content, { headers: responseHeaders });
+  };
+}
+async function serve(options) {
+  const { directory, port, open = true } = options;
+  const handleRequest = createRequestHandler(directory);
+  let server;
+  try {
+    server = Bun.serve({
+      port,
+      fetch: handleRequest,
+      error(error) {
+        console.error("Server error:", error);
+        return new Response("Internal Server Error", { status: 500 });
+      }
+    });
+  } catch (err) {
+    const error = err;
+    if (error.code === "EADDRINUSE") {
+      console.error(`Error: Port ${port} is already in use`);
+      process.exit(1);
+    }
+    throw err;
+  }
+  const serverUrl = `http://localhost:${port}`;
+  console.log(`
+Server running at ${serverUrl}`);
+  console.log(`Press Ctrl+C to stop
+`);
+  if (open) {
+    openBrowser(serverUrl);
+  }
+  const sigintHandler = () => shutdown("SIGINT");
+  const sigtermHandler = () => shutdown("SIGTERM");
+  function shutdown(signal) {
+    console.log(`
+Received ${signal}, shutting down...`);
+    process.off("SIGINT", sigintHandler);
+    process.off("SIGTERM", sigtermHandler);
+    server.stop();
+    console.log("Server stopped");
+    process.exit(0);
+  }
+  process.on("SIGINT", sigintHandler);
+  process.on("SIGTERM", sigtermHandler);
+  await new Promise(() => {});
+}
+function openBrowser(url) {
+  const platform = process.platform;
+  if (platform === "darwin") {
+    Bun.spawn(["open", url]);
+  } else if (platform === "win32") {
+    Bun.spawn(["cmd", "/c", "start", "", url]);
+  } else {
+    Bun.spawn(["xdg-open", url]);
+  }
+}
+
+// src/index.ts
+var colors = {
+  reset: "\x1B[0m",
+  bold: "\x1B[1m",
+  dim: "\x1B[2m",
+  red: "\x1B[31m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  blue: "\x1B[34m",
+  magenta: "\x1B[35m",
+  cyan: "\x1B[36m",
+  white: "\x1B[37m",
+  gray: "\x1B[90m"
+};
+var useColors = !process.env.NO_COLOR && process.stdout.isTTY;
+function color(text, ...codes) {
+  if (!useColors)
+    return text;
+  return codes.join("") + text + colors.reset;
+}
+var quietMode = false;
+var verboseMode = false;
+function log(message) {
+  if (!quietMode) {
+    console.log(message);
+  }
+}
+function debug(message) {
+  if (verboseMode && !quietMode) {
+    console.log(color("[debug]", colors.gray) + " " + message);
+  }
+}
+function writeProgress(message) {
+  if (!quietMode) {
+    process.stdout.write(message);
+  }
+}
+function formatProgress(progress) {
+  if (progress.phase === "scanning") {
+    return color("Scanning: ", colors.cyan) + color(progress.title, colors.dim);
+  }
+  if (progress.phase === "complete") {
+    return "";
+  }
+  const maxTitleLength = 50;
+  const title = progress.title.length > maxTitleLength ? progress.title.slice(0, maxTitleLength - 3) + "..." : progress.title;
+  const counter = color(`[${progress.current}/${progress.total}]`, colors.cyan);
+  return `${counter} ${title}`;
+}
+function formatStats(stats) {
+  const parts = [];
+  parts.push(`${stats.sessionCount} session${stats.sessionCount !== 1 ? "s" : ""}`);
+  parts.push(`${stats.pageCount} page${stats.pageCount !== 1 ? "s" : ""}`);
+  parts.push(`${stats.messageCount} message${stats.messageCount !== 1 ? "s" : ""}`);
+  return parts.join(", ");
+}
+function slugify(text) {
+  return text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").slice(0, 50);
+}
+async function getAutoOutputDir(storagePath, sessionId, all) {
+  if (all) {
+    const date = new Date().toISOString().split("T")[0];
+    return `./opencode-all-${date}`;
+  }
+  if (sessionId) {
+    const projects = await listProjects(storagePath);
+    for (const project2 of projects) {
+      const sessions = await listSessions(storagePath, project2.id);
+      const session2 = sessions.find((s) => s.id === sessionId);
+      if (session2) {
+        const name = slugify(session2.title) || sessionId.slice(0, 12);
+        return `./${name}-replay`;
+      }
+    }
+    return `./${sessionId.slice(0, 12)}-replay`;
+  }
+  const cwd = process.cwd();
+  const project = await findProjectByPath(storagePath, cwd);
+  if (project) {
+    const name = project.name ?? project.worktree.split("/").pop() ?? "project";
+    const slug = slugify(name) || "project";
+    return `./${slug}-replay`;
+  }
+  return "./opencode-replay-output";
+}
+var { values } = parseArgs({
+  args: Bun.argv.slice(2),
+  options: {
+    all: {
+      type: "boolean",
+      default: false,
+      description: "Generate for all projects"
+    },
+    auto: {
+      type: "boolean",
+      short: "a",
+      default: false,
+      description: "Auto-name output directory from project/session"
+    },
+    output: {
+      type: "string",
+      short: "o",
+      description: "Output directory"
+    },
+    session: {
+      type: "string",
+      short: "s",
+      description: "Generate for specific session only"
+    },
+    json: {
+      type: "boolean",
+      default: false,
+      description: "Include raw JSON export"
+    },
+    open: {
+      type: "boolean",
+      default: false,
+      description: "Open in browser after generation"
+    },
+    storage: {
+      type: "string",
+      description: "Custom storage path"
+    },
+    serve: {
+      type: "boolean",
+      default: false,
+      description: "Start HTTP server after generation"
+    },
+    port: {
+      type: "string",
+      default: "3000",
+      description: "Server port (default: 3000)"
+    },
+    quiet: {
+      type: "boolean",
+      short: "q",
+      default: false,
+      description: "Suppress non-essential output"
+    },
+    verbose: {
+      type: "boolean",
+      default: false,
+      description: "Show detailed debug output"
+    },
+    "no-generate": {
+      type: "boolean",
+      default: false,
+      description: "Skip generation, only serve existing output"
+    },
+    repo: {
+      type: "string",
+      description: "GitHub repo (OWNER/NAME) for commit links"
+    },
+    help: {
+      type: "boolean",
+      short: "h",
+      default: false,
+      description: "Show help"
+    },
+    version: {
+      type: "boolean",
+      short: "v",
+      default: false,
+      description: "Show version"
+    }
+  },
+  allowPositionals: true
+});
+if (values.help) {
+  console.log(`
+opencode-replay - Generate static HTML transcripts from OpenCode sessions
+
+Usage:
+  opencode-replay [options]
+
+Options:
+  --all                  Generate for all projects (default: current project only)
+  -a, --auto             Auto-name output directory from project/session name
+  -o, --output <dir>     Output directory (default: ./opencode-replay-output)
+  -s, --session <id>     Generate for 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
+  --repo <owner/name>    GitHub repo for commit links (e.g., sst/opencode)
+  -q, --quiet            Suppress non-essential output
+  --verbose              Show detailed debug output
+  -h, --help             Show this help message
+  -v, --version          Show version
+
+Examples:
+  opencode-replay                     # Current project's sessions
+  opencode-replay --all               # All projects
+  opencode-replay -a                  # Auto-name output (e.g., ./my-project-replay)
+  opencode-replay -o ./my-transcripts # Custom output directory
+  opencode-replay --session ses_xxx   # Specific session only
+  opencode-replay --serve             # Generate and serve via HTTP
+  opencode-replay --serve --port 8080 # Serve on custom port
+  opencode-replay --serve --no-generate -o ./existing  # Serve existing output
+  opencode-replay --repo sst/opencode   # Add GitHub links to git commits
+`);
+  process.exit(0);
+}
+if (values.version) {
+  const pkg = await Bun.file(resolve2(import.meta.dir, "..", "package.json")).json();
+  console.log(pkg.version);
+  process.exit(0);
+}
+var storagePath = values.storage ?? getDefaultStoragePath();
+var port = parseInt(values.port ?? "3000", 10);
+quietMode = values.quiet ?? false;
+verboseMode = values.verbose ?? false;
+debug(`CLI arguments: ${JSON.stringify(values)}`);
+debug(`Storage path: ${storagePath}`);
+debug(`Working directory: ${process.cwd()}`);
+if (isNaN(port) || port < 1 || port > 65535) {
+  console.error("Error: Invalid port number");
+  process.exit(1);
+}
+try {
+  await readdir2(storagePath);
+  const projectDir = join4(storagePath, "project");
+  try {
+    await readdir2(projectDir);
+  } catch {
+    throw new Error("INVALID_STORAGE");
+  }
+} catch (err) {
+  const error = err;
+  console.error(color("Error:", colors.red, colors.bold) + ` OpenCode storage not found at: ${storagePath}`);
+  console.error("");
+  if (error.code === "ENOENT") {
+    console.error(color("The directory does not exist.", colors.yellow));
+  } else if (error.message === "INVALID_STORAGE") {
+    console.error(color("The directory exists but is not a valid OpenCode storage.", colors.yellow));
+    console.error(color("Missing 'project/' subdirectory.", colors.dim));
+  } else {
+    console.error(color("The directory exists but is not a valid OpenCode storage.", colors.yellow));
+  }
+  console.error("");
+  console.error(color("This could mean:", colors.dim));
+  console.error("  1. OpenCode has not been used on this machine yet");
+  console.error("  2. The storage path is incorrect");
+  console.error("");
+  console.error(color("Solutions:", colors.green));
+  console.error("  - Run OpenCode at least once to create the storage directory");
+  console.error("  - Use --storage <path> to specify a custom storage location");
+  console.error("");
+  console.error(color("Expected path:", colors.dim) + ` ${storagePath}`);
+  process.exit(1);
+}
+var outputDir;
+if (values.output) {
+  outputDir = values.output;
+  debug(`Using explicit output directory: ${outputDir}`);
+} else if (values.auto) {
+  debug("Auto-generating output directory name...");
+  outputDir = await getAutoOutputDir(storagePath, values.session, values.all);
+  debug(`Auto-generated output directory: ${outputDir}`);
+} else {
+  outputDir = "./opencode-replay-output";
+  debug(`Using default output directory: ${outputDir}`);
+}
+var repoInfo = values.repo ? parseRepoString(values.repo) ?? undefined : undefined;
+if (values.repo && !repoInfo) {
+  console.error(color("Error:", colors.red, colors.bold) + ` Invalid repo format: ${values.repo}`);
+  console.error("Expected format: OWNER/NAME (e.g., sst/opencode)");
+  process.exit(1);
+}
+log(color("opencode-replay", colors.bold, colors.cyan));
+log(color("---------------", colors.dim));
+log(color("Storage:", colors.dim) + ` ${storagePath}`);
+log(color("Output:", colors.dim) + ` ${resolve2(outputDir)}`);
+if (repoInfo) {
+  log(color("Repo:", colors.dim) + ` ${repoInfo.fullName}`);
+}
+if (values["no-generate"]) {
+  const indexFile = Bun.file(resolve2(outputDir, "index.html"));
+  if (!await indexFile.exists()) {
+    console.error(color("Error:", colors.red, colors.bold) + ` Output directory not found or missing index.html: ${resolve2(outputDir)}`);
+    console.error("Run without --no-generate to generate output first.");
+    process.exit(1);
+  }
+  log(color("Skipping generation (--no-generate)", colors.yellow));
+  log("");
+} else {
+  const modeText = values.all ? "all projects" : "current project";
+  log(color("Mode:", colors.dim) + ` ${modeText}`);
+  if (values.session) {
+    log(color("Session:", colors.dim) + ` ${values.session}`);
+  }
+  log("");
+  try {
+    const stats = await generateHtml({
+      storagePath,
+      outputDir: resolve2(outputDir),
+      all: values.all ?? false,
+      sessionId: values.session,
+      includeJson: values.json ?? false,
+      repo: repoInfo,
+      onProgress: (progress) => {
+        const msg = formatProgress(progress);
+        if (msg) {
+          writeProgress(`\r\x1B[K${msg}`);
+        }
+      }
+    });
+    writeProgress("\r\x1B[K");
+    if (values.session && stats.sessionCount === 0) {
+      console.error(color("Warning:", colors.yellow, colors.bold) + ` Session not found: ${values.session}`);
+      console.error("Use --all to see all available sessions, or check the session ID.");
+      process.exit(1);
+    }
+    log(color("Done!", colors.green, colors.bold) + ` Generated ${formatStats(stats)}`);
+    console.log(resolve2(outputDir));
+  } catch (error) {
+    process.stdout.write("\r\x1B[K");
+    console.error(color("Error:", colors.red, colors.bold) + " " + (error instanceof Error ? error.message : error));
+    process.exit(1);
+  }
+}
+if (values.serve) {
+  await serve({
+    directory: resolve2(outputDir),
+    port,
+    open: values.open ?? true
+  });
+} else if (values.open) {
+  const indexPath = resolve2(outputDir, "index.html");
+  openInBrowser(indexPath);
+}
+function openInBrowser(target) {
+  const platform = process.platform;
+  if (platform === "darwin") {
+    Bun.spawn(["open", target]);
+  } else if (platform === "win32") {
+    Bun.spawn(["cmd", "/c", "start", "", target]);
+  } else {
+    Bun.spawn(["xdg-open", target]);
+  }
+}