claude-session-viewer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hanyeol Cho
+
+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.

package/README.md

@@ -0,0 +1,79 @@
+# Claude Session Viewer
+
+A web-based tool to visualize Claude session history from your local `.claude` directory in a timeline format.
+
+## Getting Started
+
+### Installation
+
+```bash
+npm install
+```
+
+### Run with npx
+
+```bash
+npx .
+```
+
+Or run with the package name:
+
+```bash
+npx claude-session-viewer
+```
+
+### Run Development Server
+
+```bash
+npm run dev
+```
+
+This command runs both:
+- Backend server (http://localhost:3000)
+- Frontend development server (http://localhost:5173)
+
+Open http://localhost:5173 in your browser.
+
+### Build
+
+```bash
+npm run build
+```
+
+## Features
+
+- ✅ Auto-detect `.claude` directory
+- ✅ Session list by project
+- ✅ Session detail timeline view
+- ✅ Real-time file change detection (WebSocket)
+- 🚧 Search and filtering
+- 🚧 Code highlighting
+- 🚧 Markdown rendering
+
+## Project Structure
+
+```
+.
+├── src/
+│   ├── server/           # Fastify backend
+│   │   └── index.ts
+│   ├── components/       # React components
+│   │   ├── SessionList.tsx
+│   │   └── SessionDetail.tsx
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── index.css
+├── vite.config.ts        # Vite config (includes proxy)
+└── package.json
+```
+
+## API
+
+### GET /api/sessions
+Returns a list of all sessions.
+
+### GET /api/sessions/:id
+Returns detailed information for a specific session.
+
+### WebSocket /ws
+Receives real-time file change events.

package/bin/cli.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const args = process.argv.slice(2);
+
+if (args.includes("--help") || args.includes("-h")) {
+  console.log(
+    [
+      "Claude Session Viewer",
+      "",
+      "Usage:",
+      "  npx claude-session-viewer",
+      "",
+      "Options:",
+      "  -h, --help     Show this help message",
+      "  -v, --version  Show package version",
+      "",
+    ].join("\n"),
+  );
+  process.exit(0);
+}
+
+if (args.includes("--version") || args.includes("-v")) {
+  const pkg = await import("../package.json", { assert: { type: "json" } });
+  console.log(pkg.default.version);
+  process.exit(0);
+}
+
+const rootDir = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm";
+
+const child = spawn(npmCmd, ["run", "dev"], {
+  cwd: rootDir,
+  stdio: "inherit",
+});
+
+child.on("exit", (code) => {
+  if (code !== null) {
+    process.exit(code);
+  }
+});
+
+child.on("error", (error) => {
+  console.error("Failed to start dev servers:", error.message);
+  process.exit(1);
+});

package/bin/dev.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import getPort from "get-port";
+
+const rootDir = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm";
+
+const port = await getPort({ port: 3000 });
+
+const children = new Set();
+
+function spawnProcess(args, envOverrides) {
+  const child = spawn(npmCmd, args, {
+    cwd: rootDir,
+    stdio: "inherit",
+    env: { ...process.env, ...envOverrides },
+  });
+  children.add(child);
+  child.on("exit", () => {
+    children.delete(child);
+  });
+  return child;
+}
+
+spawnProcess(["run", "dev:server"], { PORT: String(port) });
+spawnProcess(["run", "dev:client"], { VITE_API_PORT: String(port) });
+
+function shutdown(signal) {
+  for (const child of children) {
+    child.kill(signal);
+  }
+}
+
+process.on("SIGINT", () => shutdown("SIGINT"));
+process.on("SIGTERM", () => shutdown("SIGTERM"));

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Claude Session Viewer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "claude-session-viewer",
+  "version": "0.1.0",
+  "type": "module",
+  "bin": {
+    "claude-session-viewer": "./bin/cli.js"
+  },
+  "scripts": {
+    "dev": "node bin/dev.js",
+    "dev:server": "tsx watch src/server/index.ts",
+    "dev:client": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "repository": {
+      "type": "git",
+      "url": "git+https://github.com/hanyeol/claude-session-viewer.git"
+  },
+  "bugs": {
+      "url": "https://github.com/hanyeol/claude-session-viewer/issues"
+  },
+  "keywords": [
+      "claude",
+      "claude-code",
+      "session-viewer",
+      "cli"
+  ],
+  "homepage": "https://github.com/hanyeol/claude-session-viewer",
+  "author": "Hanyeol Cho <hanyeol.cho@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@fastify/cors": "^9.0.1",
+    "@fastify/websocket": "^10.0.1",
+    "@tanstack/react-query": "^5.17.19",
+    "chokidar": "^3.5.3",
+    "date-fns": "^3.0.6",
+    "fastify": "^4.25.2",
+    "fuse.js": "^7.0.0",
+    "get-port": "^7.1.0",
+    "highlight.js": "^11.9.0",
+    "marked": "^11.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-window": "^1.8.10",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-window": "^1.8.8",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/App.tsx

@@ -0,0 +1,174 @@
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
+import { useState, useEffect } from 'react'
+import SessionList from './components/SessionList'
+import SessionDetail from './components/SessionDetail'
+
+const queryClient = new QueryClient()
+
+interface Session {
+  id: string
+  project: string
+  timestamp: string
+  messages: any[]
+  messageCount: number
+  title?: string
+  isAgent?: boolean
+  agentSessions?: Session[]
+}
+
+interface ProjectGroup {
+  name: string
+  displayName: string
+  sessionCount: number
+  lastActivity: string
+  sessions: Session[]
+}
+
+function AppContent() {
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null)
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['sessions'],
+    queryFn: async () => {
+      const response = await fetch('/api/sessions')
+      if (!response.ok) throw new Error('Failed to fetch sessions')
+      return response.json() as Promise<{ projects: ProjectGroup[] }>
+    },
+  })
+
+  // WebSocket connection for real-time updates
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    const wsUrl = `${protocol}//${window.location.host}/ws`
+    let ws: WebSocket | null = null
+    let closeAfterOpen = false
+    let reconnectTimeout: ReturnType<typeof setTimeout> | null = null
+    let retryCount = 0
+    let shouldReconnect = true
+
+    const connect = () => {
+      ws = new WebSocket(wsUrl)
+      closeAfterOpen = false
+
+      ws.onopen = () => {
+        if (closeAfterOpen) {
+          ws?.close()
+          return
+        }
+        retryCount = 0
+      }
+
+      ws.onmessage = (event) => {
+        const message = JSON.parse(event.data)
+        if (message.type === 'file-added' || message.type === 'file-changed' || message.type === 'file-deleted') {
+          // Refetch session list
+          refetch()
+
+          // If a session is selected, also refetch its details
+          if (selectedSessionId) {
+            queryClient.invalidateQueries({ queryKey: ['session', selectedSessionId] })
+          }
+        }
+      }
+
+      ws.onerror = (error) => {
+        console.error('WebSocket error:', error)
+      }
+
+      ws.onclose = () => {
+        if (!shouldReconnect) return
+        const delayMs = Math.min(1000 * 2 ** retryCount, 10000)
+        retryCount += 1
+        reconnectTimeout = setTimeout(connect, delayMs)
+      }
+    }
+
+    connect()
+
+    return () => {
+      shouldReconnect = false
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout)
+      }
+      if (ws && ws.readyState === WebSocket.CONNECTING) {
+        closeAfterOpen = true
+      } else {
+        ws?.close()
+      }
+    }
+  }, [refetch, selectedSessionId])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-900">
+        <div className="text-white text-xl">Loading sessions...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-900">
+        <div className="text-red-400 text-xl">Error: {error.message}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-screen bg-gray-900 text-white">
+      {/* Sidebar */}
+      <div className="w-80 border-r border-gray-700 overflow-y-auto">
+        <div className="p-4 border-b border-gray-700">
+          <h1 className="text-xl font-bold">Claude Sessions</h1>
+          <p className="text-sm text-gray-400 mt-1">
+            {data?.projects.length || 0} project{data?.projects.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+        <SessionList
+          projects={data?.projects || []}
+          selectedId={selectedSessionId}
+          onSelect={setSelectedSessionId}
+        />
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 overflow-y-auto">
+        {selectedSessionId ? (
+          <SessionDetail sessionId={selectedSessionId} />
+        ) : (
+          <div className="flex items-center justify-center h-full text-gray-500">
+            <div className="text-center">
+              <svg
+                className="mx-auto h-12 w-12 text-gray-600"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                />
+              </svg>
+              <h3 className="mt-2 text-sm font-medium">No session selected</h3>
+              <p className="mt-1 text-sm text-gray-600">
+                Select a session from the sidebar to view details
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppContent />
+    </QueryClientProvider>
+  )
+}
+
+export default App

package/src/components/ProjectGroup.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react'
+import { format } from 'date-fns'
+
+interface Session {
+  id: string
+  project: string
+  timestamp: string
+  messages: any[]
+  messageCount: number
+  title?: string
+  isAgent?: boolean
+  agentSessions?: Session[]
+}
+
+interface ProjectGroupProps {
+  name: string
+  displayName: string
+  sessionCount: number
+  lastActivity: string
+  sessions: Session[]
+  selectedId: string | null
+  onSelectSession: (id: string) => void
+}
+
+export default function ProjectGroup({
+  displayName,
+  sessionCount,
+  lastActivity,
+  sessions,
+  selectedId,
+  onSelectSession,
+}: ProjectGroupProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div className="border-b border-gray-700">
+      {/* Project Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="sticky top-0 z-10 w-full text-left p-4 bg-gray-900 hover:bg-gray-800 transition-colors flex items-center justify-between"
+      >
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <svg
+              className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+            <span className="font-semibold text-sm truncate">{displayName}</span>
+          </div>
+          <div className="text-xs text-gray-400 mt-1 ml-6">
+            {sessionCount} session{sessionCount !== 1 ? 's' : ''} · Last activity{' '}
+            {format(new Date(lastActivity), 'PPp')}
+          </div>
+        </div>
+      </button>
+
+      {/* Sessions List */}
+      {isExpanded && (
+        <div className="bg-gray-900/50">
+          {sessions.map((session) => (
+            <div key={session.id}>
+              {/* Main Session */}
+              <button
+                onClick={() => onSelectSession(session.id)}
+                className={`w-full text-left px-4 py-3 pl-8 hover:bg-gray-700/50 transition-colors border-l-2 ${
+                  selectedId === session.id
+                    ? 'bg-gray-700 border-blue-500'
+                    : 'border-transparent'
+                }`}
+              >
+                {session.title && (
+                  <div className="text-sm font-medium text-gray-200 mb-1 truncate">
+                    {session.title}
+                  </div>
+                )}
+                <div className="text-xs text-gray-400">
+                  {format(new Date(session.timestamp), 'PPpp')}
+                </div>
+                <div className="text-xs text-gray-500 mt-1">
+                  {session.messageCount} message{session.messageCount !== 1 ? 's' : ''}
+                  {session.agentSessions && session.agentSessions.length > 0 && (
+                    <span className="ml-2">
+                      · {session.agentSessions.length} task{session.agentSessions.length !== 1 ? 's' : ''}
+                    </span>
+                  )}
+                </div>
+              </button>
+
+              {/* Agent Sessions */}
+              {session.agentSessions && session.agentSessions.length > 0 && (
+                <div className="bg-gray-900/70">
+                  {session.agentSessions.map((agentSession) => (
+                    <button
+                      key={agentSession.id}
+                      onClick={() => onSelectSession(agentSession.id)}
+                      className={`w-full text-left px-4 py-2 pl-14 hover:bg-gray-700/50 transition-colors border-l-2 ${
+                        selectedId === agentSession.id
+                          ? 'bg-gray-700 border-blue-500'
+                          : 'border-transparent'
+                      }`}
+                    >
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="px-1.5 py-0.5 text-xs bg-purple-900/50 text-purple-300 rounded">
+                          TASK
+                        </span>
+                        {agentSession.title && (
+                          <span className="text-sm font-medium text-gray-300 truncate">
+                            {agentSession.title}
+                          </span>
+                        )}
+                      </div>
+                      <div className="text-xs text-gray-400">
+                        {format(new Date(agentSession.timestamp), 'PPpp')}
+                      </div>
+                      <div className="text-xs text-gray-500 mt-1">
+                        {agentSession.messageCount} message{agentSession.messageCount !== 1 ? 's' : ''}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/SessionDetail.tsx

@@ -0,0 +1,140 @@
+import { useQuery } from '@tanstack/react-query'
+import { format } from 'date-fns'
+
+interface SessionDetailProps {
+  sessionId: string
+}
+
+export default function SessionDetail({ sessionId }: SessionDetailProps) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['session', sessionId],
+    queryFn: async () => {
+      const response = await fetch(`/api/sessions/${sessionId}`)
+      if (!response.ok) throw new Error('Failed to fetch session')
+      return response.json()
+    },
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-gray-400">Loading session...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-red-400">Error: {error.message}</div>
+      </div>
+    )
+  }
+
+  const session = data?.session
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="border-b border-gray-700 p-6 bg-gray-800">
+        <div className="flex items-center gap-2">
+          {session?.isAgent && (
+            <span className="px-2 py-1 text-xs bg-purple-900/50 text-purple-300 rounded font-semibold">
+              TASK
+            </span>
+          )}
+          <h2 className="text-2xl font-bold truncate flex-1">{session?.title || 'Untitled Session'}</h2>
+        </div>
+        <div className="text-xl text-gray-300">{session?.project}</div>
+        <div className="flex items-center gap-3 mt-4 text-sm text-gray-400">
+          <span>
+            {session?.timestamp && format(new Date(session.timestamp), 'PPpp')}
+          </span>
+          <span>•</span>
+          <span>
+            {session?.messageCount || 0} message{session?.messageCount !== 1 ? 's' : ''}
+          </span>
+          {session?.agentSessions && session.agentSessions.length > 0 && (
+            <>
+              <span>•</span>
+              <span>
+                {session.agentSessions.length} task{session.agentSessions.length !== 1 ? 's' : ''}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Messages Timeline */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          {session?.messages.map((message: any, index: number) => (
+            <div key={index} className="border-l-2 border-gray-700 pl-4">
+              <div className="flex items-start justify-between mb-2">
+                <div className="flex items-center gap-2">
+                  <span
+                    className={`px-2 py-1 text-xs rounded ${
+                      message.type === 'user'
+                        ? 'bg-blue-900 text-blue-200'
+                        : message.type === 'assistant'
+                        ? 'bg-green-900 text-green-200'
+                        : 'bg-gray-700 text-gray-300'
+                    }`}
+                  >
+                    {message.type || 'system'}
+                  </span>
+                  {message.timestamp && (
+                    <span className="text-xs text-gray-500">
+                      {format(new Date(message.timestamp), 'HH:mm:ss')}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Message Content */}
+              <div className="bg-gray-800 rounded-lg p-4 text-sm">
+                {message.message?.content && Array.isArray(message.message.content) ? (
+                  <div className="space-y-2">
+                    {message.message.content.map((content: any, idx: number) => (
+                      <div key={idx}>
+                        {content.type === 'text' && (
+                          <p className="whitespace-pre-wrap">{content.text}</p>
+                        )}
+                        {content.type === 'tool_use' && (
+                          <div className="bg-gray-900 p-3 rounded border border-gray-700">
+                            <div className="text-yellow-400 font-mono text-xs mb-2">
+                              🔧 {content.name}
+                            </div>
+                            <pre className="text-xs overflow-x-auto text-gray-400">
+                              {JSON.stringify(content.input, null, 2)}
+                            </pre>
+                          </div>
+                        )}
+                        {content.type === 'tool_result' && (
+                          <div className="bg-gray-900 p-3 rounded border border-gray-700">
+                            <div className="text-green-400 font-mono text-xs mb-2">
+                              ✓ Tool Result
+                            </div>
+                            <pre className="text-xs overflow-x-auto text-gray-400">
+                              {typeof content.content === 'string'
+                                ? content.content
+                                : JSON.stringify(content.content, null, 2)}
+                            </pre>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <pre className="text-xs overflow-x-auto text-gray-400">
+                    {JSON.stringify(message, null, 2)}
+                  </pre>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/SessionList.tsx

@@ -0,0 +1,45 @@
+import ProjectGroup from './ProjectGroup'
+
+interface Session {
+  id: string
+  project: string
+  timestamp: string
+  messages: any[]
+  messageCount: number
+  title?: string
+  isAgent?: boolean
+  agentSessions?: Session[]
+}
+
+interface ProjectGroup {
+  name: string
+  displayName: string
+  sessionCount: number
+  lastActivity: string
+  sessions: Session[]
+}
+
+interface SessionListProps {
+  projects: ProjectGroup[]
+  selectedId: string | null
+  onSelect: (id: string) => void
+}
+
+export default function SessionList({ projects, selectedId, onSelect }: SessionListProps) {
+  return (
+    <div>
+      {projects.map((project) => (
+        <ProjectGroup
+          key={project.name}
+          name={project.name}
+          displayName={project.displayName}
+          sessionCount={project.sessionCount}
+          lastActivity={project.lastActivity}
+          sessions={project.sessions}
+          selectedId={selectedId}
+          onSelectSession={onSelect}
+        />
+      ))}
+    </div>
+  )
+}

package/src/index.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  min-height: 100vh;
+}
+
+/* Custom scrollbar styles */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #4B5563 #1F2937;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #1F2937;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #4B5563;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: #6B7280;
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/src/server/index.ts

@@ -0,0 +1,440 @@
+import Fastify from 'fastify'
+import cors from '@fastify/cors'
+import websocket from '@fastify/websocket'
+import { homedir } from 'os'
+import { join } from 'path'
+import { readdir, readFile, stat } from 'fs/promises'
+import chokidar from 'chokidar'
+import getPort from 'get-port'
+
+const CLAUDE_DIR = join(homedir(), '.claude')
+const DEFAULT_PORT = 3000
+
+const server = Fastify({
+  logger: true
+})
+
+// Plugins
+await server.register(cors, {
+  origin: 'http://localhost:5173'
+})
+await server.register(websocket)
+
+// Types
+interface Session {
+  id: string
+  project: string
+  timestamp: string
+  messages: any[]
+  messageCount: number
+  title?: string
+  isAgent?: boolean
+  agentSessions?: Session[]
+}
+
+interface ProjectGroup {
+  name: string
+  displayName: string
+  sessionCount: number
+  lastActivity: string
+  sessions: Session[]
+}
+
+// Helper: Parse JSONL file
+async function parseJsonl(filePath: string): Promise<any[]> {
+  const content = await readFile(filePath, 'utf-8')
+  return content
+    .split('\n')
+    .filter(line => line.trim())
+    .map(line => JSON.parse(line))
+}
+
+// Helper: Clean text by removing tags
+function cleanText(text: string): string {
+  return text
+    .replace(/<ide_selection>[\s\S]*?<\/ide_selection>/g, ' ')
+    .replace(/<ide_opened_file>[\s\S]*?<\/ide_opened_file>/g, ' ')
+    .replace(/<system-reminder>[\s\S]*?<\/system-reminder>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function extractFirstText(content: any): string | null {
+  if (Array.isArray(content)) {
+    for (const item of content) {
+      if (item.type === 'text' && item.text) {
+        const cleaned = cleanText(item.text)
+        if (cleaned) {
+          return cleaned
+        }
+      }
+    }
+    return null
+  }
+
+  if (typeof content === 'string') {
+    const cleaned = cleanText(content)
+    return cleaned || null
+  }
+
+  return null
+}
+
+// Helper: Extract title from session messages
+function extractSessionTitle(messages: any[]): string {
+  // First, try to find queue-operation / enqueue message
+  for (const msg of messages) {
+    if (msg.type === 'queue-operation' && msg.operation === 'enqueue' && msg.content) {
+      const firstText = extractFirstText(msg.content)
+      if (firstText) {
+        return firstText.substring(0, 100).trim()
+      }
+    }
+  }
+
+  // Fallback: Find first user message with actual text content
+  for (const msg of messages) {
+    if (msg.type === 'user' && msg.message?.content) {
+      const firstText = extractFirstText(msg.message.content)
+      if (firstText) {
+        return firstText.substring(0, 100).trim()
+      }
+    }
+  }
+
+  return 'Untitled Session'
+}
+
+function getProjectNameFromPath(projectPath: string): string {
+  return projectPath.split('/').pop()?.replace(/-Users-hanyeol-Projects-/, '') || 'unknown'
+}
+
+function getProjectDisplayName(projectName: string): string {
+  return projectName.replace(/-Users-hanyeol-Projects-/, '')
+}
+
+function collectAgentDescriptions(messages: any[]): Map<string, string> {
+  const agentDescriptions = new Map<string, string>()
+  const toolUseDescriptions = new Map<string, string>()
+  const toolResultAgentIds = new Map<string, string>()
+
+  for (const msg of messages) {
+    if (msg.type === 'assistant' && msg.message?.content && Array.isArray(msg.message.content)) {
+      for (const item of msg.message.content) {
+        if (item.type === 'tool_use' && item.name === 'Task' && item.input?.description) {
+          toolUseDescriptions.set(item.id, item.input.description)
+        }
+      }
+    }
+
+    const agentId = msg.agentId || msg.toolUseResult?.agentId
+    if (agentId && msg.message?.content && Array.isArray(msg.message.content)) {
+      for (const item of msg.message.content) {
+        if (item.type === 'tool_result' && item.tool_use_id) {
+          toolResultAgentIds.set(item.tool_use_id, agentId)
+        }
+      }
+    }
+  }
+
+  for (const [toolUseId, description] of toolUseDescriptions.entries()) {
+    const agentId = toolResultAgentIds.get(toolUseId)
+    if (agentId) {
+      agentDescriptions.set(`agent-${agentId}`, description)
+    }
+  }
+
+  return agentDescriptions
+}
+
+function attachAgentSessionsFromMap(
+  session: Session,
+  agentDescriptions: Map<string, string>,
+  agentSessionsMap: Map<string, Session>
+): void {
+  if (agentDescriptions.size === 0) return
+
+  session.agentSessions = []
+  for (const [agentSessionId, description] of agentDescriptions) {
+    const agentSession = agentSessionsMap.get(agentSessionId)
+    if (agentSession) {
+      agentSession.title = description
+      session.agentSessions.push(agentSession)
+    }
+  }
+  session.agentSessions.sort((a, b) =>
+    new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+  )
+}
+
+async function loadAgentSessionsFromFiles(
+  projectPath: string,
+  projectName: string,
+  agentDescriptions: Map<string, string>
+): Promise<Session[]> {
+  const agentSessions: Session[] = []
+
+  for (const [agentSessionId, description] of agentDescriptions) {
+    const agentFile = join(projectPath, `${agentSessionId}.jsonl`)
+    try {
+      const agentMessages = await parseJsonl(agentFile)
+      const agentFileStat = await stat(agentFile)
+      agentSessions.push({
+        id: agentSessionId,
+        project: projectName,
+        timestamp: agentFileStat.mtime.toISOString(),
+        messages: agentMessages,
+        messageCount: agentMessages.length,
+        title: description,
+        isAgent: true
+      })
+    } catch {
+      // Skip if agent file not found
+    }
+  }
+
+  agentSessions.sort((a, b) =>
+    new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+  )
+  return agentSessions
+}
+
+function findAgentTitleFromParentMessages(messages: any[], agentId: string): string | null {
+  const agentDescriptions = collectAgentDescriptions(messages)
+  const description = agentDescriptions.get(`agent-${agentId}`)
+  return description || null
+}
+
+// Helper: Get all sessions from a project directory
+async function getProjectSessions(projectPath: string): Promise<Session[]> {
+  const files = await readdir(projectPath)
+  const allSessions: Session[] = []
+  const agentSessionsMap = new Map<string, Session>()
+
+  // First pass: collect all sessions
+  for (const file of files) {
+    if (file.endsWith('.jsonl')) {
+      const filePath = join(projectPath, file)
+      const fileStat = await stat(filePath)
+
+      // Skip empty files
+      if (fileStat.size === 0) continue
+
+      try {
+        const messages = await parseJsonl(filePath)
+
+        // Filter: Skip sessions with only 1 message that is assistant-only
+        if (messages.length === 1 && messages[0].type === 'assistant') {
+          continue
+        }
+
+        // Extract project name from path
+        const projectName = getProjectNameFromPath(projectPath)
+
+        // Extract session title
+        const title = extractSessionTitle(messages)
+
+        const sessionId = file.replace('.jsonl', '')
+        const isAgent = sessionId.startsWith('agent-')
+
+        const session: Session = {
+          id: sessionId,
+          project: projectName,
+          timestamp: fileStat.mtime.toISOString(),
+          messages,
+          messageCount: messages.length,
+          title,
+          isAgent
+        }
+
+        if (isAgent) {
+          agentSessionsMap.set(sessionId, session)
+        } else {
+          allSessions.push(session)
+        }
+      } catch (error) {
+        console.error(`Error parsing ${file}:`, error)
+      }
+    }
+  }
+
+  // Second pass: attach agent sessions to their parent sessions
+  for (const session of allSessions) {
+    const agentDescriptions = collectAgentDescriptions(session.messages)
+    attachAgentSessionsFromMap(session, agentDescriptions, agentSessionsMap)
+  }
+
+  return allSessions
+}
+
+// API: Get all sessions grouped by project
+server.get('/api/sessions', async (request, reply) => {
+  try {
+    const projectsDir = join(CLAUDE_DIR, 'projects')
+    const projects = await readdir(projectsDir)
+
+    const projectGroups: ProjectGroup[] = []
+
+    for (const project of projects) {
+      const projectPath = join(projectsDir, project)
+      const projectStat = await stat(projectPath)
+
+      if (projectStat.isDirectory()) {
+        const sessions = await getProjectSessions(projectPath)
+
+        if (sessions.length > 0) {
+          // Sort sessions by timestamp descending
+          sessions.sort((a, b) =>
+            new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+          )
+
+          const displayName = getProjectDisplayName(project)
+
+          projectGroups.push({
+            name: project,
+            displayName,
+            sessionCount: sessions.length,
+            lastActivity: sessions[0].timestamp, // Most recent session
+            sessions
+          })
+        }
+      }
+    }
+
+    // Sort project groups by last activity descending
+    projectGroups.sort((a, b) =>
+      new Date(b.lastActivity).getTime() - new Date(a.lastActivity).getTime()
+    )
+
+    return { projects: projectGroups }
+  } catch (error) {
+    console.error('Error reading sessions:', error)
+    return { projects: [] }
+  }
+})
+
+// API: Get session by ID
+server.get<{ Params: { id: string } }>('/api/sessions/:id', async (request, reply) => {
+  try {
+    const { id } = request.params
+    const projectsDir = join(CLAUDE_DIR, 'projects')
+    const projects = await readdir(projectsDir)
+
+    const isAgent = id.startsWith('agent-')
+
+    for (const project of projects) {
+      const projectPath = join(projectsDir, project)
+      const sessionFile = join(projectPath, `${id}.jsonl`)
+
+      try {
+        const messages = await parseJsonl(sessionFile)
+        const fileStat = await stat(sessionFile)
+        const projectName = getProjectDisplayName(project)
+        let title = extractSessionTitle(messages)
+
+        // For agent sessions, try to find the description from parent session
+        if (isAgent) {
+          const agentId = id.replace('agent-', '')
+          const files = await readdir(projectPath)
+          for (const file of files) {
+            if (!file.startsWith('agent-') && file.endsWith('.jsonl')) {
+              try {
+                const parentMessages = await parseJsonl(join(projectPath, file))
+                const description = findAgentTitleFromParentMessages(parentMessages, agentId)
+                if (description) {
+                  title = description
+                  break
+                }
+              } catch {
+                continue
+              }
+            }
+          }
+        }
+
+        // If this is a main session (not agent), attach agent sessions
+        let agentSessions: Session[] | undefined
+        if (!isAgent) {
+          const agentDescriptions = collectAgentDescriptions(messages)
+          if (agentDescriptions.size > 0) {
+            agentSessions = await loadAgentSessionsFromFiles(projectPath, projectName, agentDescriptions)
+          }
+        }
+
+        return {
+          session: {
+            id,
+            project: projectName,
+            timestamp: fileStat.mtime.toISOString(),
+            messages,
+            messageCount: messages.length,
+            title,
+            isAgent,
+            agentSessions
+          }
+        }
+      } catch {
+        continue
+      }
+    }
+
+    return reply.code(404).send({ error: 'Session not found' })
+  } catch (error) {
+    console.error('Error reading session:', error)
+    return reply.code(500).send({ error: 'Internal server error' })
+  }
+})
+
+// WebSocket: Watch for file changes
+server.register(async function (fastify) {
+  fastify.get('/ws', { websocket: true }, (socket) => {
+    const projectsDir = join(CLAUDE_DIR, 'projects')
+
+    const watcher = chokidar.watch(projectsDir, {
+      ignoreInitial: true,
+      persistent: true
+    })
+
+    watcher.on('add', (path) => {
+      socket.send(JSON.stringify({ type: 'file-added', path }))
+    })
+
+    watcher.on('change', (path) => {
+      socket.send(JSON.stringify({ type: 'file-changed', path }))
+    })
+
+    watcher.on('unlink', (path) => {
+      socket.send(JSON.stringify({ type: 'file-deleted', path }))
+    })
+
+    socket.on('close', () => {
+      watcher.close()
+    })
+
+    socket.on('error', (err: Error) => {
+      console.error('WebSocket error:', err)
+    })
+  })
+})
+
+// Start server
+const start = async () => {
+  try {
+    const envPort = process.env.PORT ? Number(process.env.PORT) : undefined
+    const port = Number.isFinite(envPort) ? envPort : await getPort({ port: DEFAULT_PORT })
+
+    await server.listen({ port })
+
+    if (port !== DEFAULT_PORT) {
+      console.log(`Port ${DEFAULT_PORT} is in use, using port ${port} instead`)
+    }
+
+    console.log(`Server running on http://localhost:${port}`)
+    console.log(`Watching Claude directory: ${CLAUDE_DIR}`)
+  } catch (err) {
+    server.log.error(err)
+    process.exit(1)
+  }
+}
+
+start()

package/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+const serverPort = Number(process.env.VITE_API_PORT) || 3000
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: `http://localhost:${serverPort}`,
+        changeOrigin: true,
+      },
+      '/ws': {
+        target: `http://localhost:${serverPort}`,
+        ws: true,
+        changeOrigin: true,
+      },
+    },
+  },
+  define: {
+    'import.meta.env.VITE_API_PORT': JSON.stringify(serverPort.toString()),
+  },
+})