ccakashic 0.1.0 → 0.2.0

package/README.md

@@ -1,20 +1,20 @@
-# cctape
+# ccakashic
 
-A CLI tool to browse Claude Code session logs (`~/.claude/projects/`) as beautiful HTML in your browser.
+An Akashic Record of your Claude Code sessions — browse Claude Code session logs (`~/.claude/projects/`) as beautiful HTML in your browser.
 
 ## Usage
 
 ### npx
 
 ```bash
-npx cctape
+npx ccakashic
 ```
 
 ### Run from source
 
 ```bash
-git clone git@github.com:ashimon83/cctape.git
-cd cctape
+git clone git@github.com:ashimon83/ccakashic.git
+cd ccakashic
 npm start
 ```
 
@@ -39,7 +39,7 @@ A local HTTP server starts and your browser opens automatically.
 
 ```bash
 # Custom port (default: 3333)
-CCTAPE_PORT=3000 npx cctape
+CCAKASHIC_PORT=3000 npx ccakashic
 ```
 
 ## Requirements

package/bin/{cctape.js → ccakashic.js}

@@ -17,7 +17,7 @@ function openInBrowser(url) {
   exec(`${cmd} "${url}"`);
 }
 
-const PORT = parseInt(process.env.CCTAPE_PORT) || 3333;
+const PORT = parseInt(process.env.CCAKASHIC_PORT) || 3333;
 
 const server = http.createServer(async (req, res) => {
   try {
@@ -88,7 +88,7 @@ const server = http.createServer(async (req, res) => {
 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(`ccakashic running at ${url}`);
   console.log('Press Ctrl+C to stop');
   openInBrowser(url);
 });

package/lib/html-generator.js

@@ -132,12 +132,38 @@ 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 = [];
+    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);
+      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 = 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>` : '';
+    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 +174,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 +247,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: formatCost(inCost),
+    outStr: formatCost(outCost),
+    crStr: formatCost(crCost),
+    cwStr: formatCost(cwCost),
+  };
+}
+
 function formatTokens(n) {
   if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
   if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
@@ -233,20 +300,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>`;
@@ -293,7 +358,7 @@ ${detailLayoutCSS()}
 </style>
 </head>
 <body>
-<a href="https://github.com/ashimon83/cctape" class="github-corner" aria-label="View source on GitHub" target="_blank" rel="noopener"><svg width="70" height="70" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+<a href="https://github.com/ashimon83/ccakashic" class="github-corner" aria-label="View source on GitHub" target="_blank" rel="noopener"><svg width="70" height="70" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 <div class="detail-sticky-bar" id="detailStickyBar"></div>
 <header class="session-header">
   ${backLink}

package/lib/pages.js

@@ -22,7 +22,7 @@ function formatTokens(n) {
   return String(n);
 }
 
-const GITHUB_URL = 'https://github.com/ashimon83/cctape';
+const GITHUB_URL = 'https://github.com/ashimon83/ccakashic';
 
 function githubCorner() {
   return `<a href="${GITHUB_URL}" class="github-corner" aria-label="View source on GitHub" target="_blank" rel="noopener"><svg width="70" height="70" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>`;
@@ -251,9 +251,9 @@ function generateIndex(projects) {
 </a>`;
   }).join('\n');
 
-  return pageShell('cctape', `
+  return pageShell('ccakashic', `
 <div class="page-header">
-  <h1>cctape</h1>
+  <h1>ccakashic</h1>
   <div class="subtitle">Claude Code Session Logs</div>
 </div>
 <div class="list-container">
@@ -327,10 +327,10 @@ function generateSessionList(project, sessions) {
 </div>`;
   }).join('\n');
 
-  return pageShell(`${project.name} — cctape`, `
+  return pageShell(`${project.name} — ccakashic`, `
 <div class="sticky-date-bar" id="stickyDateBar"></div>
 <div class="page-header">
-  <div class="breadcrumb"><a href="/">cctape</a> / ${escapeHtml(project.name)}</div>
+  <div class="breadcrumb"><a href="/">ccakashic</a> / ${escapeHtml(project.name)}</div>
   <h1>${escapeHtml(project.name)}</h1>
   <div class="subtitle">${sessions.length} sessions</div>
 </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.0",
-  "description": "Browse Claude Code session logs (~/.claude/projects/) as beautiful HTML in your browser",
+  "version": "0.2.0",
+  "description": "Browse Claude Code session logs (~/.claude/projects/) as beautiful HTML in your browser — an Akashic Record of your Claude Code sessions",
   "bin": {
-    "cctape": "./bin/cctape.js"
+    "ccakashic": "bin/ccakashic.js"
   },
   "files": [
     "bin",
@@ -15,7 +15,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "start": "node bin/cctape.js"
+    "start": "node bin/ccakashic.js"
   },
   "dependencies": {},
   "keywords": [
@@ -26,16 +26,17 @@
     "viewer",
     "log",
     "jsonl",
-    "html"
+    "html",
+    "akashic"
   ],
   "author": "ashimon83",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ashimon83/cctape.git"
+    "url": "git+https://github.com/ashimon83/ccakashic.git"
   },
-  "homepage": "https://github.com/ashimon83/cctape#readme",
+  "homepage": "https://github.com/ashimon83/ccakashic#readme",
   "bugs": {
-    "url": "https://github.com/ashimon83/cctape/issues"
+    "url": "https://github.com/ashimon83/ccakashic/issues"
   }
 }