Add Claude Code transcript archive with HTML visualization

[augustraca-hue]

Summary

This PR adds a comprehensive HTML-based archive system for Claude Code transcripts, enabling browsing and searching of conversation histories with rich formatting and interactive features.

Key Changes

• Archive Structure: Created a hierarchical archive organization with:

  • Root index page (claude-archive/index.html) listing all archived projects
  • Project-level index pages showing all conversations for each project
  • Individual conversation pages with full transcript display and pagination

• HTML Transcript Visualization: Implemented detailed transcript rendering with:

  • Message threading with user/assistant/tool-reply message types
  • Syntax-highlighted code blocks with language detection
  • Thinking blocks for Claude's reasoning display
  • Tool usage visualization (file operations, edits, etc.)
  • Todo list rendering with status indicators (completed, in-progress, pending)

• Interactive Features:

  • Expandable/collapsible content sections for long messages
  • Search functionality with modal dialog
  • Pagination controls for navigating multi-page conversations
  • Timestamp-based message linking with highlight animation
  • Responsive design with mobile-friendly layout

• Styling System:

  • Comprehensive CSS variable system for consistent theming
  • Color-coded message types (blue for user, gray for assistant, orange for tools)
  • Gradient backgrounds for different content types
  • Smooth animations and hover states

• Content Organization:

  • Commit tracking and display within transcripts
  • File operation visualization (write/edit tools with diff display)
  • Message truncation with expand buttons for readability
  • Continuation sections for multi-part conversations

Implementation Details

The archive uses semantic HTML5 with embedded CSS for self-contained, portable transcript files. Each conversation is split into paginated HTML files for performance, with an index page providing navigation and search capabilities. The styling uses CSS custom properties for easy theme customization and maintains accessibility with proper semantic markup.

https://claude.ai/code/session_01QUKRmFM1ZbpaeTKvtgn9dv

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5831a08bcc

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Escape JSON text before assigning to innerHTML

The JSON highlighter rewrites pre.json content and then assigns it with el.innerHTML = text without escaping </> from the original transcript. If any archived JSON block contains HTML-like payloads (for example a string value like <img onerror=...>), opening the archive will execute injected markup/script in the page context. This is a cross-site scripting vector for any hosted/shared archive generated from untrusted transcript data.

Useful? React with 👍 / 👎.