ccakashic 0.1.1 → 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

@@ -132,12 +132,40 @@ function renderMessage(msg) {
   const id = msgId(msg.timestamp);
   const time = `<a class="timestamp" href="#${id}">${formatTime(msg.timestamp)}</a>`;
 
+  const turnBadge = msg.turnUsage
+    ? (() => {
+        const c = calcCost(msg.turnUsage.input, msg.turnUsage.output, msg.turnUsage.cacheRead, msg.turnUsage.cacheCreate);
+        const dur = msg.turnUsage.durationMs ? ` | ${formatDuration(msg.turnUsage.durationMs)}` : '';
+        return `<span class="turn-usage">&#9889; Turn: ${c.totalStr}${dur} <span class="usage-detail">(in:${c.inStr} out:${c.outStr} cache-r:${c.crStr} cache-w:${c.cwStr})</span></span>`;
+      })()
+    : '';
+
+  function makeItemBadge(m) {
+    const parts = [];
+    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) {
+      parts.push(`${formatDuration(m.execMs)}`);
+    } else if (m.elapsedMs && m.elapsedMs >= 1000) {
+      parts.push(`${formatDuration(m.elapsedMs)}`);
+    }
+    if (!parts.length) return '';
+    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>`;
+  }
+
+  const itemBadge = makeItemBadge(msg);
+
   switch (msg.type) {
     case 'user':
-      return `<div class="msg msg-user" id="${id}">${time}<div class="msg-content" data-markdown>${escapeHtml(msg.text)}</div></div>`;
+      return `<div class="msg msg-user" id="${id}">${time}<div class="msg-content" data-markdown>${escapeHtml(msg.text)}</div>${turnBadge}</div>`;
 
     case 'assistant':
-      return `<div class="msg msg-assistant" id="${id}">${time}<div class="msg-content" data-markdown>${escapeHtml(msg.text)}</div></div>`;
+      return `<div class="msg msg-assistant" id="${id}">${time}<div class="msg-content" data-markdown>${escapeHtml(msg.text)}</div>${itemBadge ? `<div>${itemBadge}</div>` : ''}</div>`;
 
     case 'thinking':
       return `<div class="msg msg-thinking" id="${id}">${time}<span class="thinking-indicator">Thinking...</span></div>`;
@@ -148,16 +176,23 @@ function renderMessage(msg) {
       const subagentHtml = msg.subagentMessages
         ? `<div class="subagent-inline"><details><summary><span class="tool-summary">Subagent conversation</span></summary><div class="subagent-content">${msg.subagentMessages.map(renderMessage).join('\n')}</div></details></div>`
         : '';
-      return `<div class="msg msg-tool" id="${id}"><details><summary>${time}<span class="tool-summary">${summary}</span></summary><div class="tool-details">${renderToolInput(msg)}${resultHtml}${subagentHtml}</div></details></div>`;
+      return `<div class="msg msg-tool" id="${id}"><details><summary>${time}<span class="tool-summary">${summary}</span></summary><div class="tool-details">${renderToolInput(msg)}${resultHtml}${subagentHtml}</div></details>${itemBadge ? `<div class="tool-usage-row">${itemBadge}</div>` : ''}</div>`;
     }
 
     case 'tool_result':
       // Unpaired tool result (shouldn't happen often)
       return `<div class="msg msg-tool" id="${id}"><div class="tool-output"><pre><code>${escapeHtml((msg.content || '').slice(0, 2000))}</code></pre></div></div>`;
 
+    case 'local_command': {
+      const cmd = msg.command ? `<div class="local-cmd-input"><span class="local-cmd-prompt">$</span> ${escapeHtml(msg.command)}</div>` : '';
+      const stdout = msg.stdout && msg.stdout.trim() ? `<pre class="local-cmd-output"><code>${escapeHtml(msg.stdout)}</code></pre>` : '';
+      const stderr = msg.stderr && msg.stderr.trim() ? `<pre class="local-cmd-output local-cmd-stderr"><code>${escapeHtml(msg.stderr)}</code></pre>` : '';
+      return `<div class="msg msg-local-cmd" id="${id}">${time}${cmd}${stdout}${stderr}${turnBadge}</div>`;
+    }
+
     case 'system':
       if (msg.subtype === 'turn_duration') {
-        return `<div class="msg msg-system" id="${id}"><span class="duration">Turn: ${formatDuration(msg.durationMs)}</span></div>`;
+        return ''; // Now shown in turn usage badge
       }
       return `<div class="msg msg-system" id="${id}">${escapeHtml(msg.content || '')}</div>`;
 
@@ -214,6 +249,40 @@ function groupMessagesByDate(messages) {
   return groups;
 }
 
+// Cost per 1M tokens (USD) - Claude Opus 4 pricing
+const COST_PER_M = {
+  input: 15,
+  output: 75,
+  cacheRead: 1.5,
+  cacheWrite: 18.75,
+};
+
+function tokenCostUsd(tokens, rate) {
+  return (tokens / 1_000_000) * rate;
+}
+
+function formatCost(usd) {
+  if (usd < 0.001) return '<$0.01';
+  if (usd < 0.01) return `$${usd.toFixed(3)}`;
+  if (usd < 1) return `$${usd.toFixed(2)}`;
+  return `$${usd.toFixed(2)}`;
+}
+
+function calcCost(input, output, cacheRead, cacheWrite) {
+  const inCost = tokenCostUsd(input, COST_PER_M.input);
+  const outCost = tokenCostUsd(output, COST_PER_M.output);
+  const crCost = tokenCostUsd(cacheRead, COST_PER_M.cacheRead);
+  const cwCost = tokenCostUsd(cacheWrite, COST_PER_M.cacheWrite);
+  const total = inCost + outCost + crCost + cwCost;
+  return {
+    totalStr: formatCost(total),
+    inStr: formatTokens(input),
+    outStr: formatTokens(output),
+    crStr: formatTokens(cacheRead),
+    cwStr: formatTokens(cacheWrite),
+  };
+}
+
 function formatTokens(n) {
   if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
   if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
@@ -233,20 +302,18 @@ function formatDurationLong(ms) {
 function renderStats(stats) {
   if (!stats || !stats.turns) return '';
 
+  const totalCost = calcCost(stats.inputTokens, stats.outputTokens, stats.cacheRead, stats.cacheCreation);
+
   const items = [];
+  items.push(`<span class="stat-item"><span class="stat-label">Est. Cost</span><span class="stat-value">${totalCost.totalStr}</span></span>`);
   items.push(`<span class="stat-item"><span class="stat-label">Turns</span><span class="stat-value">${stats.turns}</span></span>`);
   items.push(`<span class="stat-item"><span class="stat-label">Input</span><span class="stat-value">${formatTokens(stats.inputTokens)}</span></span>`);
   items.push(`<span class="stat-item"><span class="stat-label">Output</span><span class="stat-value">${formatTokens(stats.outputTokens)}</span></span>`);
-  items.push(`<span class="stat-item"><span class="stat-label">Cache Create</span><span class="stat-value">${formatTokens(stats.cacheCreation)}</span></span>`);
   items.push(`<span class="stat-item"><span class="stat-label">Cache Read</span><span class="stat-value">${formatTokens(stats.cacheRead)}</span></span>`);
-  items.push(`<span class="stat-item"><span class="stat-label">Total</span><span class="stat-value">${formatTokens(stats.totalTokens)}</span></span>`);
+  items.push(`<span class="stat-item"><span class="stat-label">Cache Write</span><span class="stat-value">${formatTokens(stats.cacheCreation)}</span></span>`);
   items.push(`<span class="stat-item"><span class="stat-label">Cache Hit</span><span class="stat-value">${(stats.cacheHitRate * 100).toFixed(0)}%</span></span>`);
   if (stats.durationMs) {
     items.push(`<span class="stat-item"><span class="stat-label">Duration</span><span class="stat-value">${formatDurationLong(stats.durationMs)}</span></span>`);
-    if (stats.outputTokens && stats.durationMs > 0) {
-      const tokPerMin = Math.round(stats.outputTokens / (stats.durationMs / 60000));
-      items.push(`<span class="stat-item"><span class="stat-label">Output/min</span><span class="stat-value">${formatTokens(tokPerMin)}</span></span>`);
-    }
   }
 
   return `<div class="stats-bar">${items.join('')}</div>`;

package/lib/parser.js

@@ -142,21 +142,97 @@ function buildConversation(lines) {
   // Pair tool_use with tool_result
   pairToolMessages(messages);
 
+  // Calculate per-turn token usage (tokens between each user input)
+  calculateTurnUsage(messages);
+
+  // Calculate elapsed time for each message (time since previous message)
+  calculateElapsed(messages);
+
   return messages;
 }
 
+function parseLocalCommand(text) {
+  // Parse <bash-input>, <bash-stdout>, <bash-stderr> tags
+  const inputMatch = text.match(/<bash-input>([\s\S]*?)<\/bash-input>/);
+  const stdoutMatch = text.match(/<bash-stdout>([\s\S]*?)<\/bash-stdout>/);
+  const stderrMatch = text.match(/<bash-stderr>([\s\S]*?)<\/bash-stderr>/);
+
+  if (inputMatch) {
+    return { type: 'local_command', subtype: 'input', command: inputMatch[1] };
+  }
+  if (stdoutMatch || stderrMatch) {
+    return {
+      type: 'local_command',
+      subtype: 'output',
+      stdout: stdoutMatch ? stdoutMatch[1] : '',
+      stderr: stderrMatch ? stderrMatch[1] : '',
+    };
+  }
+  return null;
+}
+
+function processUserText(text, line, messages) {
+  // Skip local-command-caveat (system instruction, not user input)
+  if (text.match(/^<local-command-caveat>/)) {
+    return;
+  }
+
+  // Parse local command input/output
+  const localCmd = parseLocalCommand(text);
+  if (localCmd) {
+    if (localCmd.subtype === 'input') {
+      messages.push({
+        type: 'local_command',
+        command: localCmd.command,
+        timestamp: line.timestamp,
+        uuid: line.uuid,
+      });
+    } else if (localCmd.subtype === 'output') {
+      // Attach to previous local_command if exists
+      const prev = messages.length > 0 ? messages[messages.length - 1] : null;
+      if (prev && prev.type === 'local_command' && !prev.stdout) {
+        prev.stdout = localCmd.stdout;
+        prev.stderr = localCmd.stderr;
+      } else {
+        messages.push({
+          type: 'local_command',
+          command: '',
+          stdout: localCmd.stdout,
+          stderr: localCmd.stderr,
+          timestamp: line.timestamp,
+          uuid: line.uuid,
+        });
+      }
+    }
+    return;
+  }
+
+  // Strip system-reminder tags but keep surrounding user text
+  const stripped = text
+    .replace(/<system-reminder>[\s\S]*?<\/system-reminder>/g, '')
+    .replace(/<command-name>[\s\S]*?<\/command-name>/g, '')
+    .replace(/<command-message>[\s\S]*?<\/command-message>/g, '')
+    .replace(/<command-args>[\s\S]*?<\/command-args>/g, '')
+    .replace(/<local-command-stdout>[\s\S]*?<\/local-command-stdout>/g, '')
+    .trim();
+
+  if (stripped) {
+    messages.push({
+      type: 'user',
+      text: stripped,
+      timestamp: line.timestamp,
+      uuid: line.uuid,
+    });
+  }
+}
+
 function processUserMessage(line, messages) {
   const content = line.message?.content;
   if (!content) return;
 
   if (typeof content === 'string') {
     if (content.trim()) {
-      messages.push({
-        type: 'user',
-        text: content,
-        timestamp: line.timestamp,
-        uuid: line.uuid,
-      });
+      processUserText(content, line, messages);
     }
     return;
   }
@@ -164,12 +240,7 @@ function processUserMessage(line, messages) {
   if (Array.isArray(content)) {
     for (const block of content) {
       if (block.type === 'text' && block.text?.trim()) {
-        messages.push({
-          type: 'user',
-          text: block.text,
-          timestamp: line.timestamp,
-          uuid: line.uuid,
-        });
+        processUserText(block.text, line, messages);
       } else if (block.type === 'tool_result') {
         const toolResult = {
           type: 'tool_result',
@@ -218,6 +289,9 @@ function processAssistantMessage(line, messages) {
   const content = line.message?.content;
   if (!content || !Array.isArray(content)) return;
 
+  const usage = line.message?.usage || null;
+  let usageAssigned = false;
+
   for (const block of content) {
     if (block.type === 'thinking') {
       messages.push({
@@ -232,7 +306,9 @@ function processAssistantMessage(line, messages) {
         model: line.message.model,
         timestamp: line.timestamp,
         uuid: line.uuid,
+        usage: !usageAssigned ? usage : null,
       });
+      usageAssigned = true;
     } else if (block.type === 'tool_use') {
       messages.push({
         type: 'tool_use',
@@ -241,7 +317,79 @@ function processAssistantMessage(line, messages) {
         input: block.input,
         timestamp: line.timestamp,
         uuid: line.uuid,
+        usage: !usageAssigned ? usage : null,
       });
+      usageAssigned = true;
+    }
+  }
+}
+
+function calculateTurnUsage(messages) {
+  // Walk backwards from each user message, summing usage of preceding assistant messages
+  // A "turn" = user input → all assistant responses until next user input
+  for (let i = 0; i < messages.length; i++) {
+    if (messages[i].type !== 'user' && messages[i].type !== 'local_command') continue;
+
+    // Sum usage of all following assistant/tool messages until next user message
+    let totalInput = 0;
+    let totalOutput = 0;
+    let totalCacheRead = 0;
+    let totalCacheCreate = 0;
+    const seenUsageIds = new Set(); // Dedupe (multiple blocks from same API response)
+
+    for (let j = i + 1; j < messages.length; j++) {
+      const m = messages[j];
+      if (m.type === 'user' || m.type === 'local_command') break;
+      if (m.usage && !seenUsageIds.has(m.uuid + (m.usage.input_tokens || 0))) {
+        seenUsageIds.add(m.uuid + (m.usage.input_tokens || 0));
+        totalInput += m.usage.input_tokens || 0;
+        totalOutput += m.usage.output_tokens || 0;
+        totalCacheRead += m.usage.cache_read_input_tokens || 0;
+        totalCacheCreate += m.usage.cache_creation_input_tokens || 0;
+      }
+    }
+
+    // Find turn_duration in the following messages
+    let turnDurationMs = 0;
+    for (let j = i + 1; j < messages.length; j++) {
+      const m = messages[j];
+      if (m.type === 'user' || m.type === 'local_command') break;
+      if (m.type === 'system' && m.subtype === 'turn_duration') {
+        turnDurationMs = m.durationMs || 0;
+        break;
+      }
+    }
+
+    const total = totalInput + totalOutput + totalCacheRead + totalCacheCreate;
+    if (total > 0 || turnDurationMs > 0) {
+      messages[i].turnUsage = {
+        input: totalInput,
+        output: totalOutput,
+        cacheRead: totalCacheRead,
+        cacheCreate: totalCacheCreate,
+        total,
+        durationMs: turnDurationMs,
+      };
+    }
+  }
+}
+
+function calculateElapsed(messages) {
+  for (let i = 1; i < messages.length; i++) {
+    const prev = messages[i - 1];
+    const curr = messages[i];
+    if (prev.timestamp && curr.timestamp) {
+      const elapsed = new Date(curr.timestamp) - new Date(prev.timestamp);
+      if (elapsed > 0) {
+        curr.elapsedMs = elapsed;
+      }
+    }
+    // For tool_use with paired result, calculate execution time
+    if (curr.type === 'tool_use' && curr.result?.timestamp && curr.timestamp) {
+      const execTime = new Date(curr.result.timestamp) - new Date(curr.timestamp);
+      if (execTime > 0) {
+        curr.execMs = execTime;
+      }
     }
   }
 }

package/lib/template-assets.js

@@ -131,6 +131,71 @@ body {
   position: relative;
 }
 
+/* Local command (user ! commands) */
+.msg-local-cmd {
+  align-self: flex-end;
+  margin-left: 20%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 0.82rem;
+}
+.local-cmd-input {
+  padding: 2px 0;
+  font-weight: 600;
+}
+.local-cmd-prompt {
+  color: var(--text-muted);
+  margin-right: 4px;
+}
+.local-cmd-output {
+  margin-top: 4px;
+  padding: 6px 8px;
+  background: var(--code-block-bg);
+  color: var(--code-block-text);
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 0.78rem;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.local-cmd-output code {
+  background: none;
+  padding: 0;
+  color: inherit;
+}
+.local-cmd-stderr {
+  border-left: 3px solid #ef4444;
+}
+
+/* Token usage badges */
+.turn-usage, .item-usage {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 2px 8px;
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+.turn-usage {
+  font-weight: 600;
+}
+.item-usage {
+  font-weight: 400;
+  opacity: 0.8;
+}
+.tool-usage-row {
+  padding: 4px 14px 6px;
+}
+.usage-detail {
+  font-size: 0.6rem;
+  opacity: 0.7;
+}
+
 .msg .timestamp {
   display: block;
   font-size: 0.7rem;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ccakashic",
-  "version": "0.1.1",
+  "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"
+    "ccakashic": "bin/ccakashic.js"
   },
   "files": [
     "bin",