ccakashic 0.2.0 → 0.2.1

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/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),
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccakashic",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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"