claude-session-viewer 0.1.0 → 0.1.2

package/dist/client/assets/index-DUAdsLyv.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.right-0{right:0}.top-0{top:0}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-12{height:3rem}.h-4{height:1rem}.h-full{height:100%}.h-screen{height:100vh}.w-1{width:.25rem}.w-12{width:3rem}.w-4{width:1rem}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-col-resize{cursor:col-resize}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-900{--tw-bg-opacity: 1;background-color:rgb(30 58 138 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-gray-900\/50{background-color:#11182780}.bg-gray-900\/70{background-color:#111827b3}.bg-green-900{--tw-bg-opacity: 1;background-color:rgb(20 83 45 / var(--tw-bg-opacity, 1))}.bg-purple-900\/50{background-color:#581c8780}.bg-transparent{background-color:transparent}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-14{padding-left:3.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-200{--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-200{--tw-text-opacity: 1;color:rgb(187 247 208 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;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}*{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}.hover\:bg-gray-700\/50:hover{background-color:#37415180}.hover\:bg-gray-800:hover{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}

package/{index.html → dist/client/index.html}

@@ -5,9 +5,10 @@
     <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>
+    <script type="module" crossorigin src="/assets/index-D70FKSi-.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DUAdsLyv.css">
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/dist/server/index.js

@@ -0,0 +1,364 @@
+import Fastify from 'fastify';
+import fastifyStatic from '@fastify/static';
+import websocket from '@fastify/websocket';
+import { existsSync } from 'fs';
+import { readdir, readFile, stat } from 'fs/promises';
+import { homedir } from 'os';
+import { dirname, join, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import chokidar from 'chokidar';
+import getPort from 'get-port';
+const CLAUDE_DIR = join(homedir(), '.claude');
+const SERVER_DIR = dirname(fileURLToPath(import.meta.url));
+const CLIENT_DIST_DIR = resolve(SERVER_DIR, '../client');
+const DEFAULT_PORT = 9090;
+const server = Fastify({
+    logger: true
+});
+// Plugins
+await server.register(websocket);
+if (existsSync(CLIENT_DIST_DIR)) {
+    await server.register(fastifyStatic, {
+        root: CLIENT_DIST_DIR
+    });
+    server.setNotFoundHandler((request, reply) => {
+        const url = request.raw.url || '';
+        if (url.startsWith('/api') || url.startsWith('/ws')) {
+            reply.code(404).send({ error: 'Not found' });
+            return;
+        }
+        reply.sendFile('index.html');
+    });
+}
+// Helper: Parse JSONL file
+async function parseJsonl(filePath) {
+    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) {
+    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) {
+    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) {
+    // 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) {
+    return projectPath.split('/').pop()?.replace(/-Users-hanyeol-Projects-/, '') || 'unknown';
+}
+function getProjectDisplayName(projectName) {
+    return projectName.replace(/-Users-hanyeol-Projects-/, '');
+}
+function collectAgentDescriptions(messages) {
+    const agentDescriptions = new Map();
+    const toolUseDescriptions = new Map();
+    const toolResultAgentIds = new Map();
+    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, agentDescriptions, agentSessionsMap) {
+    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, projectName, agentDescriptions) {
+    const agentSessions = [];
+    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, agentId) {
+    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) {
+    const files = await readdir(projectPath);
+    const allSessions = [];
+    const agentSessionsMap = new Map();
+    // 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 = {
+                    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 = [];
+        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('/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;
+                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) => {
+            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`);
+        }
+        const url = `http://localhost:${port}`;
+        console.log(`Server running on \x1b[36m${url}\x1b[0m`);
+        console.log(`Watching Claude directory: \x1b[36m${CLAUDE_DIR}\x1b[0m`);
+    }
+    catch (err) {
+        server.log.error(err);
+        process.exit(1);
+    }
+};
+start();

package/package.json

@@ -1,36 +1,47 @@
 {
   "name": "claude-session-viewer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "bin": {
     "claude-session-viewer": "./bin/cli.js"
   },
+  "files": [
+    "bin/",
+    "dist/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "dev": "node bin/dev.js",
     "dev:server": "tsx watch src/server/index.ts",
     "dev:client": "vite",
-    "build": "tsc && vite build",
+    "build:server": "tsc -p tsconfig.server.json",
+    "build:client": "vite build --outDir dist/client",
+    "build": "npm run build:server && npm run build:client",
+    "start": "node dist/server/index.js",
+    "prepack": "npm run 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"
+    "type": "git",
+    "url": "git+https://github.com/hanyeol/claude-session-viewer.git"
   },
   "bugs": {
-      "url": "https://github.com/hanyeol/claude-session-viewer/issues"
+    "url": "https://github.com/hanyeol/claude-session-viewer/issues"
   },
   "keywords": [
-      "claude",
-      "claude-code",
-      "session-viewer",
-      "cli"
+    "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/static": "^7.0.3",
     "@fastify/websocket": "^10.0.1",
     "@tanstack/react-query": "^5.17.19",
     "chokidar": "^3.5.3",
@@ -40,6 +51,7 @@
     "get-port": "^7.1.0",
     "highlight.js": "^11.9.0",
     "marked": "^11.1.1",
+    "open": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-window": "^1.8.10",

package/postcss.config.js

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

package/src/App.tsx

@@ -1,174 +0,0 @@
-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