Initial commit: Claude Viewer - Browse Claude conversation transcripts

- Next.js 14 web application with TypeScript
- File tree navigation with auto-expand
- Chat-style interface with markdown rendering
- Dark mode support
- Tool visualization for AI interactions
- Playwright tests included
- MIT License

Author: phpmypython

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,60 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Testing
+coverage/
+test-results/
+playwright-report/
+playwright/.cache/
+
+# Next.js
+.next/
+out/
+build/
+
+# Production
+dist/
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Local env files
+.env
+.env*.local
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Test artifacts
+*.png
+debug-*.js
+tree-debug.png
+test-*.png
+
+
+CLAUDE.MD
+.claude/

CONTRIBUTING.md

@@ -0,0 +1,57 @@
+# Contributing to Claude Viewer
+
+Thank you for your interest in contributing to Claude Viewer! We welcome contributions from the community.
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork: `git clone https://github.com/YOUR-USERNAME/claude-viewer.git`
+3. Install dependencies: `yarn install`
+4. Create a new branch: `git checkout -b feature/your-feature-name`
+
+## Development Workflow
+
+1. Make your changes
+2. Run tests: `yarn test`
+3. Run type checking: `yarn typecheck`
+4. Run linting: `yarn lint`
+5. Commit your changes with a descriptive message
+6. Push to your fork and create a pull request
+
+## Code Style
+
+- We use TypeScript for type safety
+- Follow the existing code style
+- Use meaningful variable and function names
+- Add comments for complex logic
+- Keep components focused and reusable
+
+## Testing
+
+- Write tests for new features
+- Ensure all existing tests pass
+- Use Playwright for E2E testing
+- Run `yarn test` before submitting PR
+
+## Pull Request Guidelines
+
+- Keep PRs focused on a single feature or fix
+- Update documentation if needed
+- Ensure all tests pass
+- Provide a clear description of changes
+- Link any related issues
+
+## Reporting Issues
+
+- Use GitHub Issues to report bugs
+- Provide clear reproduction steps
+- Include system information
+- Attach error messages or screenshots (without personal data)
+
+## Security
+
+- Never commit sensitive information
+- Don't include personal session data in PRs
+- Report security issues privately
+
+Thank you for contributing!

LICENSE

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

README.md

@@ -0,0 +1,118 @@
+# Claude Viewer
+
+A modern web application for browsing and viewing Claude conversation session transcripts stored in the `.claude/projects` directory.
+
+## Features
+
+- 📁 **File Tree Navigation**: Browse your Claude sessions organized by project directories
+- 💬 **Chat-Style Interface**: View conversations in a familiar chat format
+- 🌗 **Dark Mode Support**: Toggle between light and dark themes
+- 🔍 **Auto-Expand Navigation**: Direct links to sessions automatically expand the file tree
+- 📋 **Copy Session Paths**: Quickly copy JSONL file paths to clipboard
+- 📝 **Markdown Rendering**: Full markdown support with syntax highlighting
+- 🛠️ **Tool Visualization**: See tool calls and results in formatted blocks
+
+## Prerequisites
+
+- Node.js 18.x or higher
+- Yarn package manager
+- Claude Code or Claude Desktop with session files in `~/.claude/projects/`
+
+## Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/phpmypython/claude-viewer.git
+cd claude-viewer
+```
+
+2. Install dependencies:
+```bash
+yarn install
+```
+
+3. Run the development server:
+```bash
+yarn dev
+```
+
+4. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+## Session File Location
+
+By default, the application looks for Claude session files in:
+```
+~/.claude/projects/
+```
+
+This is the standard location where Claude Code and Claude Desktop store conversation transcripts in JSONL format.
+
+## Usage
+
+### Browsing Sessions
+- Click on folders in the sidebar to expand/collapse them
+- Click on a session to view the conversation
+- Use the theme toggle button to switch between light and dark mode
+
+### Direct Links
+You can link directly to a specific session using URL parameters:
+```
+http://localhost:3000/?session=<session-id>
+```
+
+The application will automatically expand the file tree to show the selected session.
+
+### Copying File Paths
+When viewing a session, hover over it in the sidebar and click the copy icon to copy the full JSONL file path to your clipboard.
+
+## Development
+
+### Running Tests
+```bash
+# Run all tests
+yarn test
+
+# Run tests in watch mode
+yarn test:watch
+
+# Run tests with UI
+yarn test:ui
+```
+
+### Building for Production
+```bash
+yarn build
+yarn start
+```
+
+### Project Structure
+```
+/app                    # Next.js app directory
+  /api                  # API routes for reading sessions
+  page.tsx              # Main page component
+/components             # React components
+  Sidebar.tsx           # File tree navigation
+  ChatView.tsx          # Conversation display
+/tests                  # Playwright E2E tests
+```
+
+## Configuration
+
+The application uses sensible defaults and doesn't require configuration for most users. If your Claude sessions are stored in a different location, you'll need to modify the API routes to point to the correct directory.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT License - see LICENSE file for details
+
+## Acknowledgments
+
+Built with:
+- [Next.js](https://nextjs.org/)
+- [React](https://reactjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [react-markdown](https://github.com/remarkjs/react-markdown)
+- [Playwright](https://playwright.dev/) for testing

app/api/sessions/[project]/[session]/route.ts

@@ -0,0 +1,81 @@
+import { NextResponse } from 'next/server'
+import fs from 'fs/promises'
+import path from 'path'
+import os from 'os'
+
+/**
+ * GET /api/sessions/[project]/[session]
+ * 
+ * Fetches the content of a specific Claude conversation session.
+ * Reads the JSONL file and extracts all user and assistant messages.
+ * 
+ * @param request - The incoming request object
+ * @param params - Route parameters containing project name and session ID
+ * @returns {Promise<NextResponse>} JSON response with array of messages
+ * 
+ * Message format:
+ * - role: 'user' | 'assistant' | 'system'
+ * - content: Message content (string or array of content items)
+ * - timestamp: ISO timestamp of the message
+ */
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ project: string; session: string }> }
+) {
+  try {
+    const { project, session } = await params
+    const homeDir = os.homedir()
+    const sessionPath = path.join(
+      homeDir, 
+      '.claude', 
+      'projects', 
+      project, 
+      `${session}.jsonl`
+    )
+    
+    // Reading session from: sessionPath
+    
+    // Check if file exists
+    try {
+      await fs.access(sessionPath)
+    } catch {
+      // Session file not found
+      return NextResponse.json({ error: 'Session file not found' }, { status: 404 })
+    }
+    
+    const content = await fs.readFile(sessionPath, 'utf-8')
+    const lines = content.trim().split('\n').filter(line => line.trim())
+    
+    // Found ${lines.length} lines in session file
+    
+    const parsedLines = lines.map((line, index) => {
+      try {
+        return JSON.parse(line)
+      } catch (e) {
+        // Failed to parse line ${index + 1}
+        return null
+      }
+    }).filter(Boolean)
+    
+    // Successfully parsed ${parsedLines.length} lines
+    
+    // Extract messages from the parsed data
+    const messages = parsedLines
+      .filter(item => item.message && (item.type === 'user' || item.type === 'assistant'))
+      .map(item => ({
+        role: item.type,
+        content: item.message.content,
+        timestamp: item.timestamp
+      }))
+    
+    // Extracted ${messages.length} messages
+    
+    return NextResponse.json({ messages })
+  } catch (error) {
+    // Error reading session
+    return NextResponse.json({ 
+      error: 'Failed to read session', 
+      details: error instanceof Error ? error.message : 'Unknown error' 
+    }, { status: 500 })
+  }
+}