cc-session-length 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# cc-session-length
+
+**How long are your Claude Code sessions?**
+
+Reads your `~/.claude` session files and shows the duration distribution — from 30-second context-compaction restarts to multi-hour marathon runs.
+
+## Usage
+
+```bash
+npx cc-session-length
+```
+
+Or use the browser version (no install):
+
+→ **[yurukusa.github.io/cc-session-length](https://yurukusa.github.io/cc-session-length/)**
+
+Drag in your `~/.claude` folder. Everything runs locally — nothing is uploaded.
+
+## Sample output
+
+```
+cc-session-length — How long are your Claude Code sessions? (Asia/Tokyo)
+
+457 sessions · All time
+
+  < 1 min    ████████████████████████░░░░   88  ( 19%)
+  1–5 min    ████████████████████████████  109  ( 24%)
+  5–15 min   ██████████████░░░░░░░░░░░░░░   54  ( 12%)
+  15–30 min  ██████████░░░░░░░░░░░░░░░░░░   38  (  8%)
+  30–60 min  ███████████░░░░░░░░░░░░░░░░░   43  (  9%)
+  1–2 hr     ███████░░░░░░░░░░░░░░░░░░░░░   27  (  6%)
+  2–4 hr     ██████░░░░░░░░░░░░░░░░░░░░░░   25  (  5%)
+  4–8 hr     ████░░░░░░░░░░░░░░░░░░░░░░░░   17  (  4%)
+  8+ hr      ██████████████░░░░░░░░░░░░░░   56  ( 12%)
+
+───────────────────────────────────────────────────────
+  Session type:     ⚖️ Balanced Worker
+  Mix of short and medium sessions. Steady rhythm.
+
+  Average:  4h 13m
+  Median:   11m
+  P90:      10h 42m
+  Longest:  101h 30m
+  < 1 min (compaction):  19.3% of all sessions
+```
+
+## Session types
+
+| Type | Description |
+|------|-------------|
+| ⚡ Rapid Cycler | 60%+ of sessions < 1 min — lots of context compactions |
+| 🏃 Quick Iterator | Median < 5 min — short, fast feedback cycles |
+| ⚖️ Balanced Worker | Median 5–30 min — mix of short and medium |
+| 🔬 Deep Worker | Median 30–120 min — long, focused sessions |
+| 🦁 Marathon Coder | Median > 2 hr — multi-hour deep work |
+
+## Options
+
+```bash
+npx cc-session-length              # All-time breakdown
+npx cc-session-length --days=30   # Last 30 days
+npx cc-session-length --json      # JSON output for dashboards
+```
+
+## How it works
+
+For each session file in `~/.claude/projects/`, the tool reads the first and last timestamp entry and computes the duration. Sessions in `subagents/` directories are excluded (those are subagent runs, not your main sessions).
+
+## Part of cc-toolkit
+
+cc-session-length is tool #46 in [cc-toolkit](https://yurukusa.github.io/cc-toolkit/) — 48 free tools for Claude Code users.
+
+---
+
+**GitHub**: [yurukusa/cc-session-length](https://github.com/yurukusa/cc-session-length)
+**Try it**: `npx cc-session-length`

package/cli.mjs

@@ -0,0 +1,226 @@
+#!/usr/bin/env node
+import { readdir, open } from 'fs/promises';
+import { join, basename } from 'path';
+import { homedir } from 'os';
+
+const VERSION = '1.0.0';
+const MAX_CHUNK = 4096;
+const TAIL_CHUNK = 8192;
+
+function parseArgs(argv) {
+  const args = { days: 0, json: false, utc: false };
+  for (const a of argv.slice(2)) {
+    if (a.startsWith('--days=')) args.days = parseInt(a.slice(7)) || 0;
+    else if (a === '--json') args.json = true;
+    else if (a === '--utc') args.utc = true;
+    else if (a === '--help' || a === '-h') {
+      console.log([
+        `cc-session-length v${VERSION}`,
+        '',
+        'Usage: cc-session-length [options]',
+        '',
+        'Options:',
+        '  --days=N    Only analyze sessions from the last N days',
+        '  --utc       Use UTC instead of local time',
+        '  --json      Output JSON for piping',
+        '  --help      Show this help',
+      ].join('\n'));
+      process.exit(0);
+    }
+  }
+  return args;
+}
+
+async function readChunk(path, fromEnd = false) {
+  let fh;
+  try {
+    fh = await open(path, 'r');
+    const buf = Buffer.alloc(fromEnd ? TAIL_CHUNK : MAX_CHUNK);
+    let offset = 0;
+    if (fromEnd) {
+      const stat = await fh.stat();
+      offset = Math.max(0, stat.size - TAIL_CHUNK);
+    }
+    const { bytesRead } = await fh.read(buf, 0, buf.length, offset);
+    return buf.subarray(0, bytesRead).toString('utf8');
+  } catch { return ''; }
+  finally { await fh?.close(); }
+}
+
+function extractFirstTimestamp(text) {
+  for (const line of text.split('\n')) {
+    if (!line.trim()) continue;
+    try {
+      const d = JSON.parse(line);
+      if (d.timestamp) return new Date(d.timestamp);
+    } catch {}
+  }
+  return null;
+}
+
+function extractLastTimestamp(text) {
+  const lines = text.split('\n').reverse();
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    try {
+      const d = JSON.parse(line);
+      if (d.timestamp) return new Date(d.timestamp);
+    } catch {}
+  }
+  return null;
+}
+
+async function collectSessions(dir, cutoff) {
+  const sessions = [];
+  let entries;
+  try { entries = await readdir(dir); } catch { return sessions; }
+  for (const name of entries) {
+    if (!name.endsWith('.jsonl')) continue;
+    const path = join(dir, name);
+    const head = await readChunk(path, false);
+    const firstTs = extractFirstTimestamp(head);
+    if (!firstTs) continue;
+    if (cutoff && firstTs < cutoff) continue;
+    const tail = await readChunk(path, true);
+    const lastTs = extractLastTimestamp(tail);
+    if (!lastTs) continue;
+    const durationMin = (lastTs - firstTs) / 60000;
+    if (durationMin < 0) continue;
+    sessions.push({ file: name, firstTs, lastTs, durationMin });
+  }
+  return sessions;
+}
+
+const BUCKETS = [
+  { label: '< 1 min',   min: 0,   max: 1 },
+  { label: '1–5 min',   min: 1,   max: 5 },
+  { label: '5–15 min',  min: 5,   max: 15 },
+  { label: '15–30 min', min: 15,  max: 30 },
+  { label: '30–60 min', min: 30,  max: 60 },
+  { label: '1–2 hr',    min: 60,  max: 120 },
+  { label: '2–4 hr',    min: 120, max: 240 },
+  { label: '4–8 hr',    min: 240, max: 480 },
+  { label: '8+ hr',     min: 480, max: Infinity },
+];
+
+function median(sorted) {
+  if (!sorted.length) return 0;
+  const m = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[m] : (sorted[m - 1] + sorted[m]) / 2;
+}
+
+function mean(arr) {
+  return arr.length ? arr.reduce((s, v) => s + v, 0) / arr.length : 0;
+}
+
+function classify(medianMin, compactionRate) {
+  if (compactionRate >= 0.6) return { label: '⚡ Rapid Cycler', desc: 'Mostly short context-compaction restarts. Your AI works in tight loops.' };
+  if (medianMin < 5)  return { label: '🏃 Quick Iterator', desc: 'Short, frequent sessions. Fast feedback cycles.' };
+  if (medianMin < 30) return { label: '⚖️  Balanced Worker', desc: 'Mix of short and medium sessions. Steady rhythm.' };
+  if (medianMin < 120) return { label: '🔬 Deep Worker',   desc: 'Long, focused sessions. Sustained concentration.' };
+  return { label: '🦁 Marathon Coder', desc: 'Multi-hour sessions. Maximum deep work.' };
+}
+
+function bar(pct, width = 28) {
+  const filled = Math.round(pct / 100 * width);
+  return '█'.repeat(filled) + '░'.repeat(width - filled);
+}
+
+function fmtDuration(min) {
+  if (min < 1) return `${Math.round(min * 60)}s`;
+  if (min < 60) return `${Math.round(min)}m`;
+  const h = Math.floor(min / 60);
+  const m = Math.round(min % 60);
+  return m ? `${h}h ${m}m` : `${h}h`;
+}
+
+async function main() {
+  const args = parseArgs(process.argv);
+  const claudeDir = join(homedir(), '.claude', 'projects');
+  const cutoff = args.days ? new Date(Date.now() - args.days * 86400000) : null;
+
+  let all = [];
+  let dirs;
+  try { dirs = await readdir(claudeDir); } catch {
+    console.error('~/.claude/projects not found');
+    process.exit(1);
+  }
+
+  for (const d of dirs) {
+    const sub = join(claudeDir, d);
+    const sessions = await collectSessions(sub, cutoff);
+    all.push(...sessions);
+  }
+
+  if (!all.length) {
+    console.log('No sessions found.');
+    process.exit(0);
+  }
+
+  const durations = all.map(s => s.durationMin).sort((a, b) => a - b);
+  const total = durations.length;
+  const avg = mean(durations);
+  const med = median(durations);
+  const max = durations[total - 1];
+  const p90 = durations[Math.floor(total * 0.9)];
+  const compactionCount = durations.filter(d => d < 1).length;
+  const compactionRate = compactionCount / total;
+
+  const bucketCounts = BUCKETS.map(b => ({
+    ...b,
+    count: durations.filter(d => d >= b.min && d < b.max).length,
+  }));
+
+  const cls = classify(med, compactionRate);
+
+  if (args.json) {
+    console.log(JSON.stringify({
+      total, avg, median: med, max, p90, compactionRate,
+      classification: cls.label,
+      buckets: bucketCounts.map(b => ({ label: b.label, count: b.count, pct: b.count / total * 100 })),
+    }, null, 2));
+    return;
+  }
+
+  const tz = args.utc ? 'UTC' : Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const scope = args.days ? `Last ${args.days} days` : 'All time';
+
+  const C = {
+    reset: '\x1b[0m', bold: '\x1b[1m',
+    purple: '\x1b[35m', cyan: '\x1b[36m', yellow: '\x1b[33m',
+    orange: '\x1b[38;5;214m', muted: '\x1b[90m',
+  };
+
+  const maxBucketCount = Math.max(...bucketCounts.map(b => b.count), 1);
+
+  console.log(`\n${C.purple}${C.bold}cc-session-length${C.reset} — How long are your Claude Code sessions? (${tz})\n`);
+  console.log(`${C.muted}${total} sessions · ${scope}${C.reset}\n`);
+
+  for (const b of bucketCounts) {
+    const pct = (b.count / total * 100).toFixed(0);
+    const barWidth = Math.round(b.count / maxBucketCount * 28);
+    const isShort = b.max <= 1;
+    const color = isShort ? C.purple : b.max <= 15 ? C.cyan : b.max <= 60 ? C.yellow : C.orange;
+    const filled = '█'.repeat(barWidth);
+    const empty  = '░'.repeat(28 - barWidth);
+    console.log(
+      `  ${C.muted}${b.label.padEnd(10)}${C.reset}  ` +
+      `${color}${filled}${C.muted}${empty}${C.reset}  ` +
+      `${C.muted}${String(b.count).padStart(5)}  (${String(pct).padStart(4)}%)${C.reset}`
+    );
+  }
+
+  console.log(`\n${'─'.repeat(55)}`);
+  console.log(`  ${C.cyan}Session type:${C.reset}     ${C.bold}${cls.label}${C.reset}`);
+  console.log(`  ${C.muted}${cls.desc}${C.reset}`);
+
+  console.log(`\n  ${C.muted}Average:${C.reset}  ${C.bold}${fmtDuration(avg)}${C.reset}`);
+  console.log(`  ${C.muted}Median:${C.reset}   ${C.bold}${fmtDuration(med)}${C.reset}`);
+  console.log(`  ${C.muted}P90:${C.reset}      ${C.bold}${fmtDuration(p90)}${C.reset}`);
+  console.log(`  ${C.muted}Longest:${C.reset}  ${C.purple}${C.bold}${fmtDuration(max)}${C.reset}`);
+  console.log(`  ${C.muted}< 1 min (compaction):${C.reset}  ${(compactionRate * 100).toFixed(1)}% of all sessions`);
+
+  console.log();
+}
+
+main().catch(e => { console.error(e.message); process.exit(1); });

package/index.html

@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>cc-session-length — How long are your Claude Code sessions?</title>
+<meta name="description" content="See the duration distribution of your Claude Code sessions. Drop your ~/.claude folder to find out if you're a Quick Iterator, Deep Worker, or Marathon Coder.">
+<meta property="og:title" content="cc-session-length — Session duration analyzer for Claude Code">
+<meta property="og:description" content="How long are your Claude Code sessions? From 30-second compaction restarts to 100-hour marathon runs.">
+<meta property="og:url" content="https://yurukusa.github.io/cc-session-length/">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="@yurukusa_dev">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  --bg: #0d1117; --surface: #161b22; --border: #30363d;
+  --text: #e6edf3; --muted: #8b949e;
+  --purple: #bc8cff; --cyan: #58d8f0; --yellow: #f7c948; --orange: #ffa657;
+  --blue: #58a6ff; --green: #56d364;
+}
+body {
+  background: var(--bg); color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Consolas, monospace;
+  min-height: 100vh; display: flex; flex-direction: column;
+  align-items: center; padding: 2rem 1rem;
+}
+.header { text-align: center; margin-bottom: 2rem; }
+.header h1 { font-size: 1.8rem; font-weight: 700; color: var(--purple); margin-bottom: 0.5rem; }
+.header p { color: var(--muted); font-size: 0.9rem; }
+.drop-zone {
+  width: 100%; max-width: 600px; border: 2px dashed var(--border);
+  border-radius: 12px; padding: 3rem 2rem; text-align: center;
+  cursor: pointer; transition: border-color 0.2s, background 0.2s;
+  margin-bottom: 2rem; background: var(--surface);
+}
+.drop-zone:hover, .drop-zone.drag-over { border-color: var(--purple); background: #1a0f2e; }
+.drop-zone h2 { font-size: 1.1rem; margin-bottom: 0.75rem; }
+.drop-zone p { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
+.drop-zone .icon { font-size: 2.5rem; margin-bottom: 1rem; }
+.drop-zone input[type="file"] { display: none; }
+#results { width: 100%; max-width: 700px; display: none; }
+.meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 1.5rem; text-align: center; }
+.card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem;
+}
+.card-title { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
+.hour-row {
+  display: flex; align-items: center; gap: 0.5rem;
+  margin-bottom: 0.3rem; font-size: 0.78rem;
+}
+.row-label { color: var(--muted); min-width: 5.5rem; font-family: Consolas, monospace; }
+.bar-wrap { flex: 1; height: 14px; background: #21262d; border-radius: 3px; overflow: hidden; }
+.bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
+.bar-fill.short  { background: var(--purple); }
+.bar-fill.quick  { background: var(--cyan); }
+.bar-fill.medium { background: var(--yellow); }
+.bar-fill.long   { background: var(--orange); }
+.row-count { color: var(--muted); min-width: 4.5rem; text-align: right; font-family: Consolas, monospace; font-size: 0.75rem; }
+.score-card { text-align: center; }
+.cls-label { font-size: 1.5rem; font-weight: 700; color: var(--purple); margin-bottom: 0.5rem; }
+.cls-desc  { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }
+.stats-grid {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1rem;
+}
+@media (min-width: 480px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
+.stat { text-align: center; }
+.stat .num { font-size: 1.2rem; font-weight: 700; display: block; }
+.stat .lbl { font-size: 0.7rem; color: var(--muted); }
+.footer { margin-top: 2rem; text-align: center; font-size: 0.8rem; color: var(--muted); }
+.footer a { color: var(--blue); text-decoration: none; margin: 0 0.5rem; }
+.btn {
+  background: var(--purple); color: #0d1117; border: none;
+  border-radius: 6px; padding: 0.6rem 1.5rem; font-size: 0.9rem;
+  font-weight: 600; cursor: pointer; margin-top: 1rem; font-family: inherit;
+}
+.btn:hover { opacity: 0.85; }
+</style>
+</head>
+<body>
+<div class="header">
+  <h1>cc-session-length</h1>
+  <p>How long are your Claude Code sessions?</p>
+</div>
+<div class="drop-zone" id="dropZone" onclick="document.getElementById('fi').click()">
+  <div class="icon">⏱️</div>
+  <h2>Drop your .claude folder here</h2>
+  <p>Or click to select it.<br>Your data stays local — nothing is uploaded.</p>
+  <input type="file" id="fi" webkitdirectory multiple>
+  <button class="btn" onclick="event.stopPropagation(); document.getElementById('fi').click()">
+    Select ~/.claude folder
+  </button>
+</div>
+<div id="results">
+  <div class="meta" id="metaLine"></div>
+  <div class="card score-card" id="scoreCard"></div>
+  <div class="card">
+    <div class="card-title">Session duration distribution</div>
+    <div id="chart"></div>
+  </div>
+  <div class="footer">
+    <a href="https://github.com/yurukusa/cc-session-length" target="_blank">GitHub</a> ·
+    <a href="https://yurukusa.github.io/cc-toolkit/" target="_blank">cc-toolkit (106 free tools)</a> ·
+    <span>Also: <code>npx cc-session-length</code></span>
+  </div>
+</div>
+<div class="footer" id="footerMain">
+  <a href="https://github.com/yurukusa/cc-session-length" target="_blank">GitHub</a> ·
+  <a href="https://yurukusa.github.io/cc-toolkit/" target="_blank">cc-toolkit</a> ·
+  <span>Part of 106 free tools for Claude Code</span>
+</div>
+<script>
+const dropZone = document.getElementById('dropZone');
+const fi = document.getElementById('fi');
+dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); processFiles(Array.from(e.dataTransfer.files)); });
+fi.addEventListener('change', e => processFiles(Array.from(e.target.files)));
+
+const BUCKETS = [
+  { label: '< 1 min',   min: 0,   max: 1,        cls: 'short' },
+  { label: '1–5 min',   min: 1,   max: 5,        cls: 'quick' },
+  { label: '5–15 min',  min: 5,   max: 15,       cls: 'quick' },
+  { label: '15–30 min', min: 15,  max: 30,       cls: 'medium' },
+  { label: '30–60 min', min: 30,  max: 60,       cls: 'medium' },
+  { label: '1–2 hr',    min: 60,  max: 120,      cls: 'long' },
+  { label: '2–4 hr',    min: 120, max: 240,      cls: 'long' },
+  { label: '4–8 hr',    min: 240, max: 480,      cls: 'long' },
+  { label: '8+ hr',     min: 480, max: Infinity, cls: 'long' },
+];
+
+function fmtDuration(min) {
+  if (min < 1) return `${Math.round(min * 60)}s`;
+  if (min < 60) return `${Math.round(min)}m`;
+  const h = Math.floor(min / 60);
+  const m = Math.round(min % 60);
+  return m ? `${h}h ${m}m` : `${h}h`;
+}
+
+function classify(med, compactionRate) {
+  if (compactionRate >= 0.6) return { label: '⚡ Rapid Cycler', desc: 'Mostly short context-compaction restarts. Your AI works in tight loops.' };
+  if (med < 5)  return { label: '🏃 Quick Iterator', desc: 'Short, frequent sessions. Fast feedback cycles.' };
+  if (med < 30) return { label: '⚖️ Balanced Worker', desc: 'Mix of short and medium sessions. Steady rhythm.' };
+  if (med < 120) return { label: '🔬 Deep Worker', desc: 'Long, focused sessions. Sustained concentration.' };
+  return { label: '🦁 Marathon Coder', desc: 'Multi-hour sessions. Maximum deep work.' };
+}
+
+function median(arr) {
+  if (!arr.length) return 0;
+  const s = [...arr].sort((a, b) => a - b);
+  const m = Math.floor(s.length / 2);
+  return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
+}
+
+async function processFiles(files) {
+  // Only top-level session files (not in subagents/ subdirs), under .claude/projects/
+  const sessionFiles = files.filter(f => {
+    const p = f.webkitRelativePath;
+    return p.endsWith('.jsonl') &&
+           p.includes('projects') &&
+           !p.includes('/subagents/');
+  });
+  if (!sessionFiles.length) {
+    alert('No session files found.\nSelect your .claude folder (not a subfolder).');
+    return;
+  }
+
+  const durations = [];
+
+  for (const f of sessionFiles) {
+    try {
+      // Read head (4KB) for first timestamp
+      const headText = await f.slice(0, 4096).text();
+      let firstTs = null;
+      for (const line of headText.split('\n')) {
+        if (!line.trim()) continue;
+        try {
+          const d = JSON.parse(line);
+          if (d.timestamp) { firstTs = new Date(d.timestamp); break; }
+        } catch {}
+      }
+      if (!firstTs) continue;
+
+      // Read tail (8KB) for last timestamp
+      const tailText = await f.slice(Math.max(0, f.size - 8192)).text();
+      let lastTs = null;
+      const tailLines = tailText.split('\n').reverse();
+      for (const line of tailLines) {
+        if (!line.trim()) continue;
+        try {
+          const d = JSON.parse(line);
+          if (d.timestamp) { lastTs = new Date(d.timestamp); break; }
+        } catch {}
+      }
+      if (!lastTs) continue;
+
+      const durationMin = (lastTs - firstTs) / 60000;
+      if (durationMin < 0) continue;
+      durations.push(durationMin);
+    } catch {}
+  }
+
+  if (!durations.length) {
+    alert('Could not extract session durations.');
+    return;
+  }
+
+  const sorted = [...durations].sort((a, b) => a - b);
+  const total = sorted.length;
+  const avg = durations.reduce((s, v) => s + v, 0) / total;
+  const med = median(sorted);
+  const maxVal = sorted[total - 1];
+  const p90 = sorted[Math.floor(total * 0.9)];
+  const compactionCount = sorted.filter(d => d < 1).length;
+  const compactionRate = compactionCount / total;
+
+  document.getElementById('metaLine').textContent = `${total} sessions analyzed`;
+  dropZone.style.display = 'none';
+  document.getElementById('footerMain').style.display = 'none';
+  document.getElementById('results').style.display = 'block';
+
+  renderChart(sorted, total);
+  renderScore(med, avg, maxVal, p90, compactionRate, total, compactionCount);
+}
+
+function renderChart(sorted, total) {
+  const bucketCounts = BUCKETS.map(b => ({
+    ...b,
+    count: sorted.filter(d => d >= b.min && d < b.max).length,
+  }));
+  const maxCount = Math.max(...bucketCounts.map(b => b.count), 1);
+
+  document.getElementById('chart').innerHTML = bucketCounts.map(b => {
+    const pct = (b.count / total * 100).toFixed(1);
+    const barPct = (b.count / maxCount * 100).toFixed(0);
+    return `<div class="hour-row">
+      <span class="row-label">${b.label}</span>
+      <div class="bar-wrap"><div class="bar-fill ${b.cls}" style="width:${barPct}%"></div></div>
+      <span class="row-count">${b.count} (${pct}%)</span>
+    </div>`;
+  }).join('');
+}
+
+function renderScore(med, avg, maxVal, p90, compactionRate, total, compactionCount) {
+  const cls = classify(med, compactionRate);
+  const colors = {
+    '⚡ Rapid Cycler':   'var(--purple)',
+    '🏃 Quick Iterator': 'var(--cyan)',
+    '⚖️ Balanced Worker': 'var(--yellow)',
+    '🔬 Deep Worker':    'var(--orange)',
+    '🦁 Marathon Coder': 'var(--orange)',
+  };
+  const color = colors[cls.label] || 'var(--purple)';
+
+  document.getElementById('scoreCard').innerHTML = `
+    <div class="card-title">Session length profile</div>
+    <div class="cls-label" style="color:${color}">${cls.label}</div>
+    <div class="cls-desc">${cls.desc}</div>
+    <div class="stats-grid">
+      <div class="stat"><span class="num" style="color:${color}">${fmtDuration(med)}</span><span class="lbl">median</span></div>
+      <div class="stat"><span class="num">${fmtDuration(avg)}</span><span class="lbl">average</span></div>
+      <div class="stat"><span class="num" style="color:var(--purple)">${fmtDuration(maxVal)}</span><span class="lbl">longest</span></div>
+      <div class="stat"><span class="num">${(compactionRate * 100).toFixed(1)}%</span><span class="lbl">< 1 min (compact)</span></div>
+    </div>`;
+}
+</script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "cc-session-length",
+  "version": "1.0.0",
+  "description": "How long are your Claude Code sessions? Duration distribution and analysis.",
+  "type": "module",
+  "bin": {
+    "cc-session-length": "./cli.mjs"
+  },
+  "scripts": {
+    "start": "node cli.mjs"
+  },
+  "keywords": [
+    "claude-code",
+    "claude",
+    "ai",
+    "session",
+    "productivity",
+    "analytics",
+    "cli"
+  ],
+  "author": "yurukusa",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  }
+}