feat: Add search, bookmarks, live updates, and complete UI redesign

New Features:
- 🔍 Add fuzzy search across all sessions with Fuse.js
- ⭐ Add bookmarking system for favorite sessions
- 🔄 Add live session updates with 5s polling when Claude is active
- 📤 Add export to Markdown functionality
- ⌨️ Add keyboard navigation with arrow keys
- 📋 Add visual feedback for copy actions (green checkmark animation)

UI/UX Improvements:
- 🎨 Switch from purple to Anthropic orange (#D97757) for Claude branding
- 📱 Add mobile-responsive sidebar with hamburger menu
- 🏗️ Redesign with hierarchical folder structure and VSCode-style collapsing
- ✨ Add loading shimmer animations and better empty states
- 🛠️ Create specialized tool renderers (code, file, search, diff, git)
- 💬 Improve message separation with subtle backgrounds and borders

Technical Changes:
- Migrate state management to Zustand
- Add React Query for data fetching and caching
- Adopt Shadcn/ui component library
- Implement custom design system with CSS variables
- Add comprehensive TypeScript types
- Remove Playwright tests and test infrastructure

Performance:
- Implement proper caching strategies
- Add optimistic updates for UI interactions
- Reduce unnecessary re-renders with React Query

Dependencies:
- Added: @tanstack/react-query, zustand, fuse.js, chokidar, @radix-ui/*
- Removed: @playwright/test, playwright

Author: phpmypython

CONTRIBUTING.md

@@ -5,12 +5,17 @@ A modern web application for browsing and viewing Claude conversation session tr
 ## Features
 
 - 📁 **File Tree Navigation**: Browse your Claude sessions organized by project directories
-- 💬 **Chat-Style Interface**: View conversations in a familiar chat format
+- 💬 **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
+- 🔍 **Search & Filter**: Search through all your sessions with fuzzy matching
+- ⭐ **Bookmarking**: Star your favorite sessions for quick access
+- 🔄 **Live Updates**: Automatically refreshes when Claude is actively running
+- 📋 **Copy Functionality**: Copy session IDs and tool outputs with visual feedback
 - 📝 **Markdown Rendering**: Full markdown support with syntax highlighting
-- 🛠️ **Tool Visualization**: See tool calls and results in formatted blocks
+- 🛠️ **Tool Visualization**: Specialized renderers for different tool types (bash, file operations, etc.)
+- 📱 **Responsive Design**: Works seamlessly on mobile and desktop
+- ⌨️ **Keyboard Navigation**: Navigate sessions with arrow keys
+- 📤 **Export to Markdown**: Export entire conversations as markdown files
 
 ## Prerequisites
 
@@ -22,7 +27,7 @@ A modern web application for browsing and viewing Claude conversation session tr
 
 1. Clone the repository:
 ```bash
-git clone https://github.com/phpmypython/claude-viewer.git
+git clone <repository-url>
 cd claude-viewer
 ```
 
@@ -67,17 +72,6 @@ When viewing a session, hover over it in the sidebar and click the copy icon to
 
 ## 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
@@ -91,9 +85,11 @@ yarn start
   /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
+  /session              # Session-related components
+  /tool-renderers       # Tool call visualization components
+  /ui                   # UI components (buttons, cards, etc.)
+/lib                    # Utility libraries and types
+/hooks                  # Custom React hooks
 ```
 
 ## Configuration
@@ -115,4 +111,4 @@ Built with:
 - [React](https://reactjs.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - [react-markdown](https://github.com/remarkjs/react-markdown)
-- [Playwright](https://playwright.dev/) for testing
+- [Radix UI](https://radix-ui.com/) for components

README.md

@@ -1,7 +1,8 @@
-import { NextResponse } from 'next/server'
-import fs from 'fs/promises'
-import path from 'path'
-import os from 'os'
+import { NextResponse } from 'next/server';
+import { getSessionThreads } from '@/lib/session-parser';
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
 
 /**
  * GET /api/sessions
@@ -37,7 +38,7 @@ export async function GET() {
 
     // Process each project directory to extract session information
     const projectData = await Promise.all(
-      projects.map(async (projectName) => {
+      projects.map(async (projectName: string) => {
         // Skip hidden files/directories
         if (projectName.startsWith('.')) return null
 
@@ -48,11 +49,11 @@ export async function GET() {
 
         // Get all JSONL session files in the project directory
         const sessions = await fs.readdir(projectPath)
-        const jsonlSessions = sessions.filter(s => s.endsWith('.jsonl'))
+        const jsonlSessions = sessions.filter((s: string) => s.endsWith('.jsonl'))
 
         // Extract metadata and title from each session file
         const sessionData = await Promise.all(
-          jsonlSessions.map(async (sessionFile) => {
+          jsonlSessions.map(async (sessionFile: string) => {
             const sessionPath = path.join(projectPath, sessionFile)
             const sessionStats = await fs.stat(sessionPath)
 

app/api/sessions/route.ts

@@ -0,0 +1,127 @@
+import { NextRequest, NextResponse } from 'next/server';
+import chokidar from 'chokidar';
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
+
+export async function GET(request: NextRequest) {
+  const stream = new ReadableStream({
+    async start(controller) {
+      const encoder = new TextEncoder();
+      const claudeProjectsDir = path.join(os.homedir(), '.claude', 'projects');
+      
+      // Track file positions for incremental reads
+      const filePositions = new Map<string, number>();
+      
+      // Set up file watcher
+      const watcher = chokidar.watch(`${claudeProjectsDir}/**/*.jsonl`, {
+        persistent: true,
+        ignoreInitial: true,
+        awaitWriteFinish: {
+          stabilityThreshold: 100,
+          pollInterval: 50
+        }
+      });
+      
+      // Send heartbeat every 30 seconds
+      const heartbeatInterval = setInterval(() => {
+        try {
+          const heartbeat = JSON.stringify({
+            type: 'heartbeat',
+            timestamp: new Date().toISOString()
+          });
+          controller.enqueue(encoder.encode(`data: ${heartbeat}\n\n`));
+        } catch (e) {
+          // Client disconnected
+          clearInterval(heartbeatInterval);
+          watcher.close();
+        }
+      }, 30000);
+      
+      // Handle file changes
+      watcher.on('change', async (filepath) => {
+        try {
+          const lastPos = filePositions.get(filepath) || 0;
+          const stats = await fs.stat(filepath);
+          
+          if (stats.size > lastPos) {
+            // Read only new content
+            const buffer = Buffer.alloc(stats.size - lastPos);
+            const fileHandle = await fs.open(filepath, 'r');
+            await fileHandle.read(buffer, 0, buffer.length, lastPos);
+            await fileHandle.close();
+            
+            const newContent = buffer.toString('utf8');
+            const newLines = newContent.split('\n').filter(line => line.trim());
+            
+            filePositions.set(filepath, stats.size);
+            
+            // Parse new messages
+            const messages = [];
+            for (const line of newLines) {
+              try {
+                messages.push(JSON.parse(line));
+              } catch {
+                // Skip invalid JSON
+              }
+            }
+            
+            if (messages.length > 0) {
+              const sessionId = path.basename(filepath, '.jsonl');
+              const project = path.basename(path.dirname(filepath));
+              
+              // Send multiple formats to handle different ID conventions
+              const data = JSON.stringify({
+                type: 'new_messages',
+                sessionId,
+                fullSessionId: `${project}/${sessionId}`,
+                project,
+                messages,
+                messageCount: messages.length,
+                timestamp: new Date().toISOString()
+              });
+              
+              console.log('[SSE] Sending new_messages event:', { sessionId, project, messageCount: messages.length });
+              controller.enqueue(encoder.encode(`data: ${data}\n\n`));
+            }
+          }
+        } catch (error) {
+          console.error('Error processing file change:', error);
+        }
+      });
+      
+      // Handle new files
+      watcher.on('add', async (filepath) => {
+        try {
+          const sessionId = path.basename(filepath, '.jsonl');
+          const project = path.basename(path.dirname(filepath));
+          
+          const data = JSON.stringify({
+            type: 'new_session',
+            sessionId,
+            project,
+            timestamp: new Date().toISOString()
+          });
+          
+          controller.enqueue(encoder.encode(`data: ${data}\n\n`));
+        } catch (error) {
+          console.error('Error processing new file:', error);
+        }
+      });
+      
+      // Cleanup on disconnect
+      request.signal.addEventListener('abort', () => {
+        clearInterval(heartbeatInterval);
+        watcher.close();
+      });
+    }
+  });
+  
+  return new NextResponse(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  });
+}

app/api/sessions/stream/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import { getAllSessionFiles, buildSessionThread } from '@/lib/session-parser';
+import path from 'path';
+import os from 'os';
+
+export async function GET(
+  request: Request,
+  { params }: { params: { sessionId: string } }
+) {
+  try {
+    const claudeProjectsDir = path.join(os.homedir(), '.claude', 'projects');
+    const allFiles = await getAllSessionFiles(claudeProjectsDir);
+    const thread = await buildSessionThread(params.sessionId, allFiles);
+    
+    return NextResponse.json(thread);
+  } catch (error) {
+    console.error('Error loading session thread:', error);
+    return NextResponse.json(
+      { error: 'Failed to load session thread' },
+      { status: 500 }
+    );
+  }
+}

app/api/sessions/thread/[sessionId]/route.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from 'next/server';
+import { getSessionThreads } from '@/lib/session-parser';
+import path from 'path';
+import os from 'os';
+
+export async function GET() {
+  try {
+    const claudeProjectsDir = path.join(os.homedir(), '.claude', 'projects');
+    const threads = await getSessionThreads(claudeProjectsDir);
+    
+    // Group threads by project
+    const projectMap = new Map<string, any>();
+    
+    for (const thread of threads) {
+      // Get project name from first file
+      const projectName = thread.files[0]?.project || 'unknown';
+      
+      if (!projectMap.has(projectName)) {
+        projectMap.set(projectName, {
+          name: projectName,
+          sessions: []
+        });
+      }
+      
+      projectMap.get(projectName)!.sessions.push({
+        id: thread.rootSessionId,
+        title: thread.title || 'Untitled Session',
+        messageCount: thread.messages.length,
+        fileCount: thread.files.length,
+        lastUpdated: thread.messages[thread.messages.length - 1]?.timestamp || new Date().toISOString(),
+        firstMessage: thread.messages[0]?.timestamp || new Date().toISOString(),
+      });
+    }
+    
+    const projects = Array.from(projectMap.values()).sort((a, b) => 
+      a.name.localeCompare(b.name)
+    );
+    
+    return NextResponse.json({ projects });
+  } catch (error) {
+    console.error('Error loading sessions:', error);
+    return NextResponse.json(
+      { error: 'Failed to load sessions' },
+      { status: 500 }
+    );
+  }
+}

app/api/sessions/v2/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from 'next/server';
+import { getSessionThreads } from '@/lib/session-parser';
+import { buildProjectTree } from '@/lib/project-tree-builder';
+import path from 'path';
+import os from 'os';
+
+export async function GET() {
+  try {
+    const claudeProjectsDir = path.join(os.homedir(), '.claude', 'projects');
+    const threads = await getSessionThreads(claudeProjectsDir);
+    const tree = buildProjectTree(threads);
+    
+    return NextResponse.json({ 
+      fileTree: tree.children,
+      totalSessions: threads.length
+    });
+  } catch (error) {
+    console.error('Error loading sessions:', error);
+    return NextResponse.json(
+      { error: 'Failed to load sessions' },
+      { status: 500 }
+    );
+  }
+}