ccanalyzer 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,47 @@
+# ccanalyzer
+
+A web-based dashboard for analyzing your [Claude Code](https://claude.ai/code) sessions — costs, token usage, agent activity, and conversation timelines.
+
+![Node.js >= 18](https://img.shields.io/badge/node-%3E%3D18-brightgreen)
+[![npm](https://img.shields.io/npm/v/ccanalyzer)](https://www.npmjs.com/package/ccanalyzer)
+
+## Usage
+
+```bash
+npx -y ccanalyzer@latest
+```
+
+Opens a local dashboard at **http://localhost:3737** in your browser.
+
+## Features
+
+- **Dashboard** — all projects with token counts, costs, and last activity
+- **Session browser** — list sessions per project sorted by recency
+- **Session detail** — full message thread with token/cost breakdown per exchange
+- **Gantt timeline** — visual timeline of user turns, AI responses, and spawned agents
+  - Click a **message bar** → see the exchange inline
+  - Click an **agent bar** → open the full agent conversation in a popup
+- **Agent popup** — complete agent conversation with stats (input/output tokens, cost)
+
+## Custom config directory
+
+By default, ccanalyzer reads `~/.claude`. To analyze a different Claude config directory (e.g. a work profile or a custom `CLAUDE_CONFIG_DIR`):
+
+```bash
+CLAUDE_CONFIG_DIR=/path/to/your/.claude npx -y ccanalyzer@latest
+```
+
+Example — analyze a secondary profile:
+
+```bash
+CLAUDE_CONFIG_DIR=~/.claude-work npx -y ccanalyzer@latest
+```
+
+## Requirements
+
+- Node.js >= 18
+- Claude Code sessions in `~/.claude/projects/` (or your custom `CLAUDE_CONFIG_DIR`)
+
+## License
+
+MIT

package/bin/index.js

@@ -5,7 +5,7 @@ const { startServer } = require('../src/server');
 const port = parseInt(process.env.PORT || '3737', 10);
 
 startServer(port).then(({ url }) => {
-  console.log(`\n  ccanalyser running at ${url}\n`);
+  console.log(`\n  ccanalyzer running at ${url}\n`);
   try {
     // Try to open browser
     import('open').then(m => m.default(url)).catch(() => {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccanalyzer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Web-based analyzer for Claude Code sessions",
   "bin": {
     "ccanalyzer": "./bin/index.js"
@@ -20,7 +20,13 @@
   "engines": {
     "node": ">=18"
   },
-  "keywords": ["claude", "claude-code", "analytics", "sessions", "ccanalyzer"],
+  "keywords": [
+    "claude",
+    "claude-code",
+    "analytics",
+    "sessions",
+    "ccanalyzer"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/public/app.js

@@ -62,6 +62,27 @@ function showView(name) {
   });
 }
 
+function pushUrl(params) {
+  const qs = new URLSearchParams(params).toString();
+  history.pushState(params, '', qs ? '?' + qs : location.pathname);
+}
+
+function restoreFromUrl() {
+  const p = new URLSearchParams(location.search);
+  const project = p.get('project');
+  const session = p.get('session');
+  if (project && session) return loadSessionDetail(encodeURIComponent(project), encodeURIComponent(session));
+  if (project) return loadSessions(encodeURIComponent(project));
+  loadDashboard();
+}
+
+window.addEventListener('popstate', e => {
+  const d = e.state || {};
+  if (d.session && d.project) loadSessionDetail(encodeURIComponent(d.project), encodeURIComponent(d.session));
+  else if (d.project) loadSessions(encodeURIComponent(d.project));
+  else loadDashboard();
+});
+
 function setBreadcrumb(parts) {
   $('breadcrumb').innerHTML = parts.map(p => `<div style="color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(p)}</div>`).join('');
 }
@@ -75,6 +96,7 @@ async function api(path) {
 
 /* ── Dashboard ── */
 async function loadDashboard() {
+  pushUrl({});
   showView('dashboard');
   setBreadcrumb(['Dashboard']);
   const container = $('view-dashboard');
@@ -178,6 +200,7 @@ function initActivityChart() {
 /* ── Sessions list ── */
 async function loadSessions(dirNameEncoded) {
   const dirName = decodeURIComponent(dirNameEncoded);
+  pushUrl({ project: dirName });
   showView('sessions');
 
   if (!state.projects) {
@@ -230,6 +253,7 @@ async function loadSessions(dirNameEncoded) {
 async function loadSessionDetail(dirNameEncoded, fileEncoded) {
   const dirName = decodeURIComponent(dirNameEncoded);
   const file = decodeURIComponent(fileEncoded);
+  pushUrl({ project: dirName, session: file });
   showView('session-detail');
   const container = $('view-session-detail');
   container.innerHTML = '<div style="padding:40px;text-align:center;color:var(--text3)">Chargement...</div>';
@@ -264,6 +288,30 @@ function renderSessionDetail(session, dirName, file) {
     ? new Date(lastTimestamp) - new Date(firstTimestamp) : null;
   const hasAgents = agents && agents.length > 0;
 
+  // Aggregate MCPs and skills across all messages
+  const sessionMcps = new Set();
+  const sessionSkills = new Set();
+  for (const msg of session.messages) {
+    if (msg.type !== 'assistant') continue;
+    const content = Array.isArray(msg.content) ? msg.content : [];
+    for (const block of content) {
+      if (!block || block.type !== 'tool_use') continue;
+      if (block.name.startsWith('mcp__')) {
+        const parts = block.name.split('__');
+        const server = (parts[1] || '').replace(/^claude_ai_/, '').replace(/_/g, ' ');
+        if (server) sessionMcps.add(server);
+      } else if (block.name === 'Skill' && block.input?.skill) {
+        sessionSkills.add(block.input.skill);
+      }
+    }
+  }
+  const mcpBar = sessionMcps.size > 0
+    ? `<div class="session-tools-bar">${[...sessionMcps].map(s => `<span class="usage-chip"><span class="tag-mcp">mcp</span>${escHtml(s)}</span>`).join('')}</div>`
+    : '';
+  const skillBar = sessionSkills.size > 0
+    ? `<div class="session-tools-bar">${[...sessionSkills].map(s => `<span class="usage-chip"><span class="tag-skill">skill</span>${escHtml(s)}</span>`).join('')}</div>`
+    : '';
+
   container.innerHTML = `
     <button class="back-btn" onclick="loadSessions('${encodeURIComponent(dirName)}')">← Sessions</button>
     <div class="page-header">
@@ -278,6 +326,7 @@ function renderSessionDetail(session, dirName, file) {
       ${cwd ? `<div class="meta-item"><div class="meta-label">Répertoire</div><div class="meta-value mono">${escHtml(cwd.replace('/home/olivier-j/', '~/'))}</div></div>` : ''}
       ${gitBranch && gitBranch !== 'HEAD' ? `<div class="meta-item"><div class="meta-label">Branche</div><div class="meta-value mono" style="color:var(--green)">${escHtml(gitBranch)}</div></div>` : ''}
     </div>
+    ${mcpBar}${skillBar}
 
     <div class="token-bar">
       <div class="token-item"><div class="token-label">Input</div><div class="token-value input">${fmt(totalUsage.input)}</div></div>
@@ -821,15 +870,84 @@ function renderMessages(messages, ctx) {
     return true;
   });
   if (!filtered.length) return '<div class="empty"><p>Aucun message</p></div>';
-  return filtered.map((m, i) => renderMessage(m, i, ctx)).join('');
+
+  // Track active skill/agent context across messages
+  let activeAgent = null;
+  return filtered.map((m, i) => {
+    if (m.type === 'assistant') {
+      const content = Array.isArray(m.content) ? m.content : [];
+      for (const block of content) {
+        if (!block || block.type !== 'tool_use') continue;
+        if (block.name === 'Skill') {
+          activeAgent = { kind: 'skill', name: block.input?.skill || '?' };
+        } else if (block.name === 'Agent') {
+          const name = block.input?.description || block.input?.subagent_type || 'agent';
+          activeAgent = { kind: 'agent', name: name.slice(0, 40) };
+        }
+      }
+    }
+    return renderMessage(m, i, ctx, activeAgent);
+  }).join('');
 }
 
-function renderMessage(m, i, ctx) {
+function renderMessage(m, i, ctx, activeAgent) {
   const isUser = m.type === 'user';
   const isAgent = m.isSidechain;
   const collapseByDefault = !isUser && i > 0;
   const pfx = ctx === 'modal' ? 'modal-' : '';
 
+  // Extract tool info for assistant messages (used in header hint + usage chips)
+  const msgToolNames = [];
+  const mcpServers = [];
+  const skillsUsed = [];
+  if (!isUser) {
+    const contentArr = Array.isArray(m.content) ? m.content : [];
+    for (const block of contentArr) {
+      if (!block || block.type !== 'tool_use') continue;
+      msgToolNames.push(block.name);
+      if (block.name.startsWith('mcp__')) {
+        const parts = block.name.split('__');
+        const server = (parts[1] || '').replace(/^claude_ai_/, '').replace(/_/g, ' ');
+        if (server && !mcpServers.includes(server)) mcpServers.push(server);
+      } else if (block.name === 'Skill' && block.input?.skill) {
+        const sn = block.input.skill;
+        if (!skillsUsed.includes(sn)) skillsUsed.push(sn);
+      }
+    }
+  }
+  // Build a human-readable hint for the collapsed header
+  let toolHint = '';
+  if (!isUser && msgToolNames.length > 0) {
+    const hintParts = [];
+    // Agent spawns: show description
+    const contentArr2 = Array.isArray(m.content) ? m.content : [];
+    for (const block of contentArr2) {
+      if (!block || block.type !== 'tool_use') continue;
+      if (block.name === 'Agent') {
+        const desc = block.input?.description || block.input?.subagent_type || 'agent';
+        hintParts.push(`⬡ ${desc.slice(0, 40)}`);
+      } else if (block.name === 'Skill') {
+        hintParts.push(`skill:${block.input?.skill || '?'}`);
+      } else if (block.name.startsWith('mcp__')) {
+        const parts = block.name.split('__');
+        const server = (parts[1] || '').replace(/^claude_ai_/, '');
+        const tool = (parts[2] || '').replace(/^[a-z]+-/, '');
+        if (!hintParts.some(p => p.startsWith(`mcp:${server}`)))
+          hintParts.push(`mcp:${server}/${tool}`);
+      } else if (!['Read','Write','Edit','Bash','WebSearch','WebFetch','ToolSearch'].includes(block.name)) {
+        hintParts.push(block.name);
+      }
+    }
+    // Fallback to common tools if nothing notable
+    if (!hintParts.length) {
+      const common = msgToolNames.slice(0, 3);
+      hintParts.push(...common);
+      if (msgToolNames.length > 3) hintParts.push(`+${msgToolNames.length - 3}`);
+    }
+    toolHint = hintParts.slice(0, 3).join('  ');
+    if (hintParts.length > 3) toolHint += `  +${hintParts.length - 3}`;
+  }
+
   let bodyHtml = '';
   if (isUser) {
     if (typeof m.content === 'string') {
@@ -880,24 +998,36 @@ function renderMessage(m, i, ctx) {
       ${u.cache_creation_input_tokens ? `<span class="usage-chip">cache↑: <span class="cw">${fmt(u.cache_creation_input_tokens)}</span></span>` : ''}
       ${u.cache_read_input_tokens ? `<span class="usage-chip">cache↓: <span class="cr">${fmt(u.cache_read_input_tokens)}</span></span>` : ''}
       ${m.model ? `<span class="usage-chip" style="color:var(--accent)">${escHtml(modelShort(m.model))}</span>` : ''}
+      ${mcpServers.map(s => `<span class="usage-chip"><span class="tag-mcp">mcp</span>${escHtml(s)}</span>`).join('')}
+      ${skillsUsed.map(s => `<span class="usage-chip"><span class="tag-skill">skill</span>${escHtml(s)}</span>`).join('')}
     </div>`;
   }
 
   const ts = m.timestamp ? fmtTime(m.timestamp) : '';
   const msgId = `${pfx}msg-${i}`;
 
+  let agentBadge = '';
+  if (!isUser && activeAgent) {
+    const icon = activeAgent.kind === 'skill' ? '⚡' : '⬡';
+    const col = activeAgent.kind === 'skill' ? 'var(--purple)' : 'var(--teal)';
+    agentBadge = `<span class="msg-agent-badge" style="color:${col}">${icon} ${escHtml(activeAgent.name)}</span>`;
+  }
+
   return `
     <div class="message ${isAgent ? 'sidechain' : ''} ${collapseByDefault ? 'collapsed' : ''}" id="${msgId}" data-uuid="${escHtml(m.uuid || '')}">
       <div class="message-header" onclick="this.parentElement.classList.toggle('collapsed')">
         <span class="msg-role ${isUser ? 'user' : 'assistant'}">${isUser ? '👤 User' : '🤖 AI'}</span>
+        ${agentBadge}
         ${isAgent ? '<span class="badge badge-sidechain">agent</span>' : ''}
+        ${toolHint ? `<span class="msg-tool-hint">${escHtml(toolHint)}</span>` : ''}
         <div class="msg-meta">
           ${ts ? `<span>${ts}</span>` : ''}
           ${m.stopReason ? `<span style="color:var(--text3)">${escHtml(m.stopReason)}</span>` : ''}
         </div>
         <span class="msg-chevron">▼</span>
       </div>
-      <div class="message-body">${bodyHtml}${usageHtml}</div>
+      <div class="message-body">${bodyHtml}</div>
+      ${usageHtml ? `<div class="message-stats">${usageHtml}</div>` : ''}
     </div>`;
 }
 
@@ -920,4 +1050,4 @@ window.setMsgFilter = setMsgFilter;
 window.toggleTimeline = toggleTimeline;
 window.closeAgentModal = closeAgentModal;
 
-loadDashboard();
+restoreFromUrl();

package/src/public/index.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ccanalyser</title>
-  <link rel="stylesheet" href="style.css" />
+  <title>ccanalyzer</title>
+  <link rel="stylesheet" href="style.css?v=6" />
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 </head>
 <body>
@@ -12,7 +12,7 @@
     <nav id="sidebar">
       <div class="logo">
         <span class="logo-icon">◈</span>
-        <span class="logo-text">ccanalyser</span>
+        <span class="logo-text">ccanalyzer</span>
       </div>
       <div id="nav-menu">
         <a href="#" class="nav-item active" data-view="dashboard">
@@ -33,6 +33,6 @@
     <div class="spinner"></div>
   </div>
 
-  <script src="app.js"></script>
+  <script src="app.js?v=6"></script>
 </body>
 </html>

package/src/public/style.css

@@ -241,7 +241,7 @@ tr:hover td { background: var(--bg3); cursor: pointer; }
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 14px;
   padding: 16px 20px;
   background: var(--bg2);
   border: 1px solid var(--border);
@@ -262,7 +262,7 @@ tr:hover td { background: var(--bg3); cursor: pointer; }
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--radius2);
-  margin-bottom: 24px;
+  margin-bottom: 14px;
   flex-wrap: wrap;
 }
 .token-item { display: flex; flex-direction: column; gap: 3px; }
@@ -335,6 +335,31 @@ tr:hover td { background: var(--bg3); cursor: pointer; }
 }
 .message.collapsed .message-body { display: none; }
 
+.message-stats {
+  padding: 8px 16px 10px;
+  background: var(--bg2);
+  border-top: 1px solid var(--border);
+}
+.message-stats .usage-inline {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+.msg-agent-badge {
+  font-family: var(--font);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #1a1e28;
+  flex-shrink: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
 .msg-text {
   color: var(--text);
   line-height: 1.65;
@@ -405,6 +430,41 @@ tr:hover td { background: var(--bg3); cursor: pointer; }
 .usage-chip .cw { color: var(--yellow); }
 .usage-chip .cr { color: var(--teal); }
 
+.tag-mcp, .tag-skill {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  margin-right: 4px;
+}
+.tag-mcp { background: #1a2e2a; color: var(--teal); }
+.tag-skill { background: #221a30; color: var(--purple); }
+
+.msg-tool-hint {
+  font-family: var(--font);
+  font-size: 11px;
+  color: var(--text3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 320px;
+  flex-shrink: 1;
+}
+
+.session-tools-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 14px;
+}
+
 /* ── Back button ── */
 .back-btn {
   display: inline-flex;