ccakashic 0.2.0 → 0.2.2

package/README.md

@@ -2,6 +2,10 @@
 
 An Akashic Record of your Claude Code sessions — browse Claude Code session logs (`~/.claude/projects/`) as beautiful HTML in your browser.
 
+![Session detail with stats, cost badges, and chat layout](docs/screenshot1.png)
+
+![Collapsible tool calls, code blocks, and per-message cost](docs/screenshot2.png)
+
 ## Usage
 
 ### npx
@@ -23,13 +27,16 @@ 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
+- **Chat-style layout** — User / assistant messages in chat bubbles
+- **Collapsible tool calls** — Bash, Read, Edit, and other tool invocations collapsed by default
 - **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
+- **Cost estimation** — Per-turn and per-message USD cost based on Claude Opus 4 pricing (input / output / cache read / cache write breakdown)
+- **Elapsed time** — Per-turn duration and per-tool execution time derived from timestamps
+- **Local command display** — `!` shell commands rendered with prompt and output
 - **Inline subagent conversations** — Subagent dialogues nested inside the Agent tool_use that spawned them
-- **Permalinks** — Click any message timestamp to get a shareable URL
+- **Permalinks** — Click any message timestamp to get a shareable URL (`#t20260416103045`)
+- **Session-level stats** — Estimated cost, turns, token breakdown, cache hit rate, and duration in the header
 - **Dark mode** — Follows `prefers-color-scheme` automatically
 - **Filter search** — Incremental filtering on list pages
 - **Keyboard navigation** — `j` / `k` to move between messages

package/bin/ccakashic.js

@@ -5,7 +5,7 @@ const http = require('http');
 const fs = require('fs');
 const path = require('path');
 const { exec } = require('child_process');
-const { listProjects, listSessions } = require('../lib/discover');
+const { listProjects, listSessions, findSessionForCwd } = require('../lib/discover');
 const { parseSession } = require('../lib/parser');
 const { generate } = require('../lib/html-generator');
 const { generateIndex, generateSessionList } = require('../lib/pages');
@@ -85,10 +85,21 @@ const server = http.createServer(async (req, res) => {
   }
 });
 
-server.listen(PORT, '127.0.0.1', () => {
+server.listen(PORT, '127.0.0.1', async () => {
   const addr = server.address();
   const url = `http://127.0.0.1:${addr.port}`;
   console.log(`ccakashic running at ${url}`);
   console.log('Press Ctrl+C to stop');
-  openInBrowser(url);
+
+  let openUrl = url;
+  try {
+    const match = await findSessionForCwd(process.cwd());
+    if (match) {
+      openUrl = `${url}/project/${encodeURIComponent(match.projectRawName)}/session/${encodeURIComponent(match.sessionId)}#session-bottom`;
+      console.log(`Detected session for ${process.cwd()} → opening at bottom`);
+    }
+  } catch (err) {
+    console.error('Failed to auto-detect session:', err.message);
+  }
+  openInBrowser(openUrl);
 });

package/lib/discover.js

@@ -150,4 +150,72 @@ async function listSessions(projectDir) {
   return sessions;
 }
 
-module.exports = { listProjects, listSessions, decodeDirName, CLAUDE_DIR };
+function readCwdFromSession(filePath) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: fs.createReadStream(filePath, { encoding: 'utf-8' }),
+      crlfDelay: Infinity,
+    });
+
+    let found = null;
+    rl.on('line', (line) => {
+      if (found) return;
+      try {
+        const obj = JSON.parse(line);
+        if (obj.cwd) {
+          found = obj.cwd;
+          rl.close();
+        }
+      } catch {
+        // skip
+      }
+    });
+
+    rl.on('close', () => resolve(found));
+    rl.on('error', () => resolve(found));
+  });
+}
+
+function latestSessionFile(projectDir) {
+  const files = fs.readdirSync(projectDir).filter(f => f.endsWith('.jsonl'));
+  if (!files.length) return null;
+  let best = null;
+  let bestMtime = 0;
+  for (const f of files) {
+    const mtime = fs.statSync(path.join(projectDir, f)).mtimeMs;
+    if (mtime > bestMtime) {
+      bestMtime = mtime;
+      best = f;
+    }
+  }
+  return best ? { file: best, mtimeMs: bestMtime } : null;
+}
+
+async function findSessionForCwd(cwd) {
+  // Pick the project whose cwd is the most specific (longest) match for the
+  // given cwd. A brand-new session in a specific subdir should win over an
+  // older, more-active ancestor project.
+  const projects = listProjects();
+  let bestMatch = null;
+  let bestLen = -1;
+
+  for (const project of projects) {
+    const latest = latestSessionFile(project.dir);
+    if (!latest) continue;
+    const projectCwd = await readCwdFromSession(path.join(project.dir, latest.file));
+    if (!projectCwd) continue;
+
+    const isMatch = cwd === projectCwd || cwd.startsWith(projectCwd + path.sep);
+    if (isMatch && projectCwd.length > bestLen) {
+      bestMatch = {
+        projectRawName: project.rawName,
+        sessionId: path.basename(latest.file, '.jsonl'),
+      };
+      bestLen = projectCwd.length;
+    }
+  }
+
+  return bestMatch;
+}
+
+module.exports = { listProjects, listSessions, decodeDirName, findSessionForCwd, CLAUDE_DIR };

package/lib/html-generator.js

@@ -142,8 +142,10 @@ function renderMessage(msg) {
 
   function makeItemBadge(m) {
     const parts = [];
-    if (m.usage) {
-      const c = calcCost(m.usage.input_tokens || 0, m.usage.output_tokens || 0, m.usage.cache_read_input_tokens || 0, m.usage.cache_creation_input_tokens || 0);
+    const c = m.usage
+      ? calcCost(m.usage.input_tokens || 0, m.usage.output_tokens || 0, m.usage.cache_read_input_tokens || 0, m.usage.cache_creation_input_tokens || 0)
+      : null;
+    if (c) {
       parts.push(`${c.totalStr}`);
     }
     if (m.execMs) {
@@ -152,7 +154,7 @@ function renderMessage(msg) {
       parts.push(`${formatDuration(m.elapsedMs)}`);
     }
     if (!parts.length) return '';
-    const detail = m.usage ? ` <span class="usage-detail">(in:${formatCost(tokenCostUsd(m.usage.input_tokens||0, COST_PER_M.input))} out:${formatCost(tokenCostUsd(m.usage.output_tokens||0, COST_PER_M.output))} cache-r:${formatCost(tokenCostUsd(m.usage.cache_read_input_tokens||0, COST_PER_M.cacheRead))} cache-w:${formatCost(tokenCostUsd(m.usage.cache_creation_input_tokens||0, COST_PER_M.cacheWrite))})</span>` : '';
+    const detail = c ? ` <span class="usage-detail">(in:${c.inStr} out:${c.outStr} cache-r:${c.crStr} cache-w:${c.cwStr})</span>` : '';
     return `<span class="item-usage">${parts.join(' | ')}${detail}</span>`;
   }
 
@@ -274,10 +276,10 @@ function calcCost(input, output, cacheRead, cacheWrite) {
   const total = inCost + outCost + crCost + cwCost;
   return {
     totalStr: formatCost(total),
-    inStr: formatCost(inCost),
-    outStr: formatCost(outCost),
-    crStr: formatCost(crCost),
-    cwStr: formatCost(cwCost),
+    inStr: formatTokens(input),
+    outStr: formatTokens(output),
+    crStr: formatTokens(cacheRead),
+    cwStr: formatTokens(cacheWrite),
   };
 }
 
@@ -382,6 +384,9 @@ ${detailLayoutCSS()}
   </nav>
   <main class="chat-container" id="session-top">
   ${groupsHtml}
+  <div class="load-more-row">
+    <button class="load-more-btn" id="loadMoreBtn" type="button">Load more &#x21bb;</button>
+  </div>
   <div id="session-bottom"></div>
   </main>
 </div>
@@ -405,6 +410,26 @@ function detailLayoutCSS() {
   min-width: 0;
 }
 
+/* Load more (reload) button at the bottom of the thread */
+.load-more-row {
+  display: flex;
+  justify-content: center;
+  margin: 24px 0 12px;
+}
+.load-more-btn {
+  padding: 8px 18px;
+  font-size: 0.85rem;
+  color: var(--text);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.load-more-btn:hover {
+  background: var(--bg-hover, var(--border));
+}
+
 /* Stats bar */
 .stats-bar {
   display: flex;

package/lib/template-assets.js

@@ -633,6 +633,23 @@ function getAppJS() {
     el.innerHTML = renderMarkdown(el.textContent);
   });
 
+  // Scroll to bottom when hash is #session-bottom. We re-scroll here (after
+  // markdown rendering) because the DOM height grows when markdown expands,
+  // making the browser's initial anchor scroll land in the wrong place.
+  if (window.location.hash === '#session-bottom') {
+    window.scrollTo(0, document.body.scrollHeight);
+  }
+
+  // Load more: reload the page to pick up any newly appended messages, then
+  // scroll back to the bottom.
+  var loadMoreBtn = document.getElementById('loadMoreBtn');
+  if (loadMoreBtn) {
+    loadMoreBtn.addEventListener('click', function() {
+      window.location.hash = 'session-bottom';
+      window.location.reload();
+    });
+  }
+
   // Keyboard navigation: j/k to move between user messages
   var msgEls = Array.from(document.querySelectorAll('.msg-user, .msg-assistant'));
   var currentIdx = -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccakashic",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Browse Claude Code session logs (~/.claude/projects/) as beautiful HTML in your browser — an Akashic Record of your Claude Code sessions",
   "bin": {
     "ccakashic": "bin/ccakashic.js"