ccakashic 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# cctape
+
+A CLI tool to browse Claude Code session logs (`~/.claude/projects/`) as beautiful HTML in your browser.
+
+## Usage
+
+### npx
+
+```bash
+npx cctape
+```
+
+### Run from source
+
+```bash
+git clone git@github.com:ashimon83/cctape.git
+cd cctape
+npm start
+```
+
+A local HTTP server starts and your browser opens automatically.
+
+## Features
+
+- **Fully browser-based** — Project list → Session list → Conversation detail
+- **Chat-style layout** — User / assistant messages in bubbles
+- **Collapsible tool calls** — Bash, Read, Edit, and other tool invocations are collapsed into `<details>` blocks
+- **Diff view** — File edits shown with red/green line highlights
+- **Date navigation** — Side nav and sticky headers to jump between dates
+- **Token stats** — Per-session input/output tokens, cache hit rate, and duration
+- **Inline subagent conversations** — Subagent dialogues nested inside the Agent tool_use that spawned them
+- **Permalinks** — Click any message timestamp to get a shareable URL
+- **Dark mode** — Follows `prefers-color-scheme` automatically
+- **Filter search** — Incremental filtering on list pages
+- **Keyboard navigation** — `j` / `k` to move between messages
+- **Zero dependencies** — Node.js built-in modules only
+
+## Options
+
+```bash
+# Custom port (default: 3333)
+CCTAPE_PORT=3000 npx cctape
+```
+
+## Requirements
+
+- Node.js >= 18
+
+## License
+
+MIT

package/bin/cctape.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+'use strict';
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { exec } = require('child_process');
+const { listProjects, listSessions } = require('../lib/discover');
+const { parseSession } = require('../lib/parser');
+const { generate } = require('../lib/html-generator');
+const { generateIndex, generateSessionList } = require('../lib/pages');
+
+function openInBrowser(url) {
+  const cmd = process.platform === 'darwin' ? 'open'
+    : process.platform === 'win32' ? 'start'
+    : 'xdg-open';
+  exec(`${cmd} "${url}"`);
+}
+
+const PORT = parseInt(process.env.CCTAPE_PORT) || 3333;
+
+const server = http.createServer(async (req, res) => {
+  try {
+    const url = new URL(req.url, `http://localhost`);
+    const pathname = url.pathname;
+
+    if (pathname === '/' || pathname === '') {
+      // Project index
+      const projects = listProjects();
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+      res.end(generateIndex(projects));
+      return;
+    }
+
+    const projectMatch = pathname.match(/^\/project\/(.+)$/);
+    if (projectMatch && !pathname.includes('/session/')) {
+      // Session list for a project
+      const rawName = decodeURIComponent(projectMatch[1]);
+      const projects = listProjects();
+      const project = projects.find(p => p.rawName === rawName);
+      if (!project) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Project not found');
+        return;
+      }
+      const sessions = await listSessions(project.dir);
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+      res.end(generateSessionList(project, sessions));
+      return;
+    }
+
+    const sessionMatch = pathname.match(/^\/project\/(.+)\/session\/(.+)$/);
+    if (sessionMatch) {
+      // Render a specific session
+      const rawName = decodeURIComponent(sessionMatch[1]);
+      const sessionId = decodeURIComponent(sessionMatch[2]);
+      const projects = listProjects();
+      const project = projects.find(p => p.rawName === rawName);
+      if (!project) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Project not found');
+        return;
+      }
+      const sessionPath = path.join(project.dir, `${sessionId}.jsonl`);
+      if (!fs.existsSync(sessionPath)) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Session not found');
+        return;
+      }
+      const sessions = await listSessions(project.dir);
+      const session = sessions.find(s => s.id === sessionId) || { id: sessionId, path: sessionPath };
+      const parsed = await parseSession(sessionPath);
+      const html = generate(parsed, { projectName: project.name, session, backUrl: `/project/${encodeURIComponent(rawName)}` });
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+      res.end(html);
+      return;
+    }
+
+    res.writeHead(404, { 'Content-Type': 'text/plain' });
+    res.end('Not found');
+  } catch (err) {
+    console.error(err);
+    res.writeHead(500, { 'Content-Type': 'text/plain' });
+    res.end('Internal server error');
+  }
+});
+
+server.listen(PORT, '127.0.0.1', () => {
+  const addr = server.address();
+  const url = `http://127.0.0.1:${addr.port}`;
+  console.log(`cctape running at ${url}`);
+  console.log('Press Ctrl+C to stop');
+  openInBrowser(url);
+});

package/lib/discover.js

@@ -0,0 +1,153 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const readline = require('readline');
+
+const CLAUDE_DIR = path.join(os.homedir(), '.claude', 'projects');
+
+function decodeDirName(dirName) {
+  // Directory names encode paths: /Users/foo/bar → -Users-foo-bar
+  // This is lossy (dots become dashes too), but good enough for display
+  if (dirName.startsWith('-')) {
+    return '/' + dirName.slice(1).replace(/-/g, '/');
+  }
+  return dirName;
+}
+
+function listProjects() {
+  if (!fs.existsSync(CLAUDE_DIR)) {
+    return [];
+  }
+
+  const entries = fs.readdirSync(CLAUDE_DIR, { withFileTypes: true });
+  const projects = [];
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+
+    const projectDir = path.join(CLAUDE_DIR, entry.name);
+    const jsonlFiles = fs.readdirSync(projectDir).filter(f => f.endsWith('.jsonl'));
+
+    if (jsonlFiles.length === 0) continue;
+
+    // Get most recent modification time
+    let lastModified = 0;
+    for (const f of jsonlFiles) {
+      const stat = fs.statSync(path.join(projectDir, f));
+      if (stat.mtimeMs > lastModified) lastModified = stat.mtimeMs;
+    }
+
+    projects.push({
+      name: decodeDirName(entry.name),
+      rawName: entry.name,
+      dir: projectDir,
+      sessionCount: jsonlFiles.length,
+      lastModified: new Date(lastModified),
+    });
+  }
+
+  projects.sort((a, b) => b.lastModified - a.lastModified);
+  return projects;
+}
+
+async function getSessionPreview(filePath) {
+  return new Promise((resolve) => {
+    const result = {
+      id: path.basename(filePath, '.jsonl'),
+      path: filePath,
+      timestamp: null,
+      lastModified: fs.statSync(filePath).mtimeMs,
+      preview: '',
+      gitBranch: null,
+      slug: null,
+      model: null,
+      hasSubagents: false,
+      totalTokens: 0,
+      outputTokens: 0,
+    };
+
+    // Check for subagents directory
+    const sessionDir = path.join(path.dirname(filePath), result.id);
+    if (fs.existsSync(path.join(sessionDir, 'subagents'))) {
+      result.hasSubagents = true;
+    }
+
+    const rl = readline.createInterface({
+      input: fs.createReadStream(filePath, { encoding: 'utf-8' }),
+      crlfDelay: Infinity,
+    });
+
+    let foundPreview = false;
+
+    rl.on('line', (line) => {
+      try {
+        const obj = JSON.parse(line);
+
+        if (!result.timestamp && obj.timestamp) {
+          result.timestamp = obj.timestamp;
+        }
+        if (!result.gitBranch && obj.gitBranch) {
+          result.gitBranch = obj.gitBranch;
+        }
+        if (!result.slug && obj.slug) {
+          result.slug = obj.slug;
+        }
+
+        // Extract model from first assistant message
+        if (!result.model && obj.type === 'assistant' && obj.message?.model) {
+          result.model = obj.message.model;
+        }
+
+        // Aggregate token usage
+        if (obj.type === 'assistant' && obj.message?.usage) {
+          const u = obj.message.usage;
+          result.totalTokens += (u.input_tokens || 0) + (u.output_tokens || 0)
+            + (u.cache_creation_input_tokens || 0) + (u.cache_read_input_tokens || 0);
+          result.outputTokens += u.output_tokens || 0;
+        }
+
+        // Extract first user message as preview
+        if (!foundPreview && obj.type === 'user' && obj.message) {
+          const content = obj.message.content;
+          let text = '';
+          if (typeof content === 'string') {
+            text = content;
+          } else if (Array.isArray(content)) {
+            for (const block of content) {
+              if (block.type === 'text' && block.text) {
+                text = block.text;
+                break;
+              }
+            }
+          }
+          if (text) {
+            result.preview = text.replace(/\n/g, ' ').slice(0, 100);
+            foundPreview = true;
+          }
+        }
+      } catch {
+        // skip malformed lines
+      }
+    });
+
+    rl.on('close', () => resolve(result));
+    rl.on('error', () => resolve(result));
+  });
+}
+
+async function listSessions(projectDir) {
+  const jsonlFiles = fs.readdirSync(projectDir)
+    .filter(f => f.endsWith('.jsonl'))
+    .map(f => path.join(projectDir, f));
+
+  const sessions = await Promise.all(jsonlFiles.map(getSessionPreview));
+
+  // Sort by file modification time descending (most recently active first)
+  sessions.sort((a, b) => b.lastModified - a.lastModified);
+
+  return sessions;
+}
+
+module.exports = { listProjects, listSessions, decodeDirName, CLAUDE_DIR };