cc-model 1.0.0

package/README.md

@@ -0,0 +1,84 @@
+# cc-model
+
+Which Claude AI models are powering your sessions?
+
+Shows the distribution of Opus, Sonnet, and Haiku usage across your Claude Code history — and how that's changed over time.
+
+## Usage
+
+```bash
+npx cc-model
+```
+
+```
+cc-model — Which Claude models power your sessions
+
+  Opus 4.5    ████████████████████████████   249  ( 53%)
+  Opus 4.6    █████████████████░░░░░░░░░░░   147  ( 31%)
+  Sonnet 4.6  █████░░░░░░░░░░░░░░░░░░░░░░░    46  ( 10%)
+  Haiku 4.5   ██░░░░░░░░░░░░░░░░░░░░░░░░░░    17  (  4%)
+  Sonnet 4.5  █░░░░░░░░░░░░░░░░░░░░░░░░░░░     8  (  2%)
+
+───────────────────────────────────────────────────────
+  Total sessions: 467
+  Current model:  Opus 4.6
+  Primary model:  Opus 4.5 (249 sessions)
+
+  Run with --timeline to see week-by-week model history
+```
+
+## Timeline view
+
+```bash
+npx cc-model --timeline
+```
+
+```
+cc-model — Week-by-week model usage
+
+  2026-W02   20  Opus 4.5×20
+  2026-W03   33  Opus 4.5×30  Haiku 4.5×3
+  2026-W05   76  Opus 4.5×75  Haiku 4.5×1
+  2026-W06  146  Opus 4.5×115  Opus 4.6×15  Haiku 4.5×8  Sonnet 4.5×8
+  2026-W07   37  Opus 4.6×36  Haiku 4.5×1
+  2026-W08   91  Opus 4.6×53  Sonnet 4.6×38
+  2026-W09   50  Opus 4.6×41  Sonnet 4.6×8
+  2026-W10    2  Opus 4.6×2
+```
+
+The timeline reveals the exact week you switched models — and whether you ever mix them within a week.
+
+## Options
+
+```bash
+npx cc-model               # Model distribution
+npx cc-model --timeline    # Week-by-week breakdown
+npx cc-model --json        # JSON output
+npx cc-model --help        # Show help
+```
+
+## What the data shows
+
+- **Primary model**: Which model has handled the most sessions overall
+- **Current model**: The model used in your most recent session
+- **Timeline**: When you switched models, and how often you mix Opus/Sonnet/Haiku
+
+## Browser Version
+
+→ **[yurukusa.github.io/cc-model](https://yurukusa.github.io/cc-model/)**
+
+Drag in your `~/.claude` folder. Includes distribution chart and interactive timeline. Runs locally.
+
+## Part of cc-toolkit
+
+cc-model is tool #50 in [cc-toolkit](https://yurukusa.github.io/cc-toolkit/) — 50 free tools for Claude Code users.
+
+Related:
+- [cc-session-length](https://github.com/yurukusa/cc-session-length) — Session duration distribution
+- [cc-momentum](https://github.com/yurukusa/cc-momentum) — Week-by-week session trend
+- [cc-depth](https://github.com/yurukusa/cc-depth) — Conversation turns per session
+
+---
+
+**GitHub**: [yurukusa/cc-model](https://github.com/yurukusa/cc-model)
+**Try it**: `npx cc-model`

package/cli.mjs

@@ -0,0 +1,221 @@
+#!/usr/bin/env node
+/**
+ * cc-model — Which Claude AI models power your sessions?
+ * Shows the distribution of model usage across your Claude Code sessions.
+ */
+
+import { readFileSync, readdirSync, statSync } from 'fs';
+import { join } from 'path';
+import { homedir } from 'os';
+
+const args = process.argv.slice(2);
+const jsonMode = args.includes('--json');
+const timelineMode = args.includes('--timeline');
+const showHelp = args.includes('--help') || args.includes('-h');
+
+if (showHelp) {
+  console.log(`cc-model — Which Claude AI models power your sessions?
+
+Usage:
+  npx cc-model               # Model distribution
+  npx cc-model --timeline    # Week-by-week model usage
+  npx cc-model --json        # JSON output
+`);
+  process.exit(0);
+}
+
+const claudeDir = join(homedir(), '.claude', 'projects');
+
+/**
+ * Normalize model ID to a short human-readable name.
+ * "claude-opus-4-6" -> "Opus 4.6"
+ * "claude-opus-4-5-20251101" -> "Opus 4.5"
+ * "claude-haiku-4-5-20251001" -> "Haiku 4.5"
+ */
+function normalizeModel(raw) {
+  // Strip date suffix
+  const base = raw.replace(/-20\d{6}$/, '');
+  // "claude-opus-4-6" -> split by "-"
+  const parts = base.replace(/^claude-/, '').split('-');
+  // parts = ["opus", "4", "6"] or ["sonnet", "4", "5"]
+  if (parts.length >= 3) {
+    const tier = parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+    const major = parts[1];
+    const minor = parts[2];
+    return `${tier} ${major}.${minor}`;
+  }
+  return base;
+}
+
+function scanProjects(dir) {
+  const sessions = [];
+  let projectDirs;
+  try {
+    projectDirs = readdirSync(dir);
+  } catch {
+    return sessions;
+  }
+
+  for (const projDir of projectDirs) {
+    const projPath = join(dir, projDir);
+    let entries;
+    try {
+      const stat = statSync(projPath);
+      if (!stat.isDirectory()) continue;
+      entries = readdirSync(projPath);
+    } catch {
+      continue;
+    }
+
+    for (const entry of entries) {
+      if (!entry.endsWith('.jsonl')) continue;
+      const filePath = join(projPath, entry);
+      try {
+        const stat = statSync(filePath);
+        if (!stat.isFile()) continue;
+      } catch {
+        continue;
+      }
+
+      let content;
+      try {
+        content = readFileSync(filePath, 'utf8');
+      } catch {
+        continue;
+      }
+
+      // Extract all model references and find the dominant one
+      const modelMatches = content.match(/"model":"claude-[^"]+"/g);
+      if (!modelMatches || modelMatches.length === 0) continue;
+
+      // Count each model
+      const modelCount = {};
+      for (const m of modelMatches) {
+        const rawModel = m.replace('"model":"', '').replace('"', '');
+        const normalized = normalizeModel(rawModel);
+        modelCount[normalized] = (modelCount[normalized] || 0) + 1;
+      }
+
+      // Primary model for this session = most frequent
+      const primaryModel = Object.entries(modelCount).sort((a, b) => b[1] - a[1])[0][0];
+
+      // Get first timestamp for timeline
+      let firstTs = null;
+      const tsMatch = content.match(/"timestamp":"([^"]+)"/);
+      if (tsMatch) firstTs = new Date(tsMatch[1]);
+
+      sessions.push({ model: primaryModel, date: firstTs, modelCount });
+    }
+  }
+
+  return sessions;
+}
+
+const sessions = scanProjects(claudeDir);
+
+if (sessions.length === 0) {
+  console.error('No session files with model data found.');
+  process.exit(1);
+}
+
+// Aggregate by model
+const modelTotals = {};
+for (const s of sessions) {
+  modelTotals[s.model] = (modelTotals[s.model] || 0) + 1;
+}
+
+const sortedModels = Object.entries(modelTotals).sort((a, b) => b[1] - a[1]);
+const total = sessions.length;
+
+// Most recent session's model = "current"
+const sortedByDate = sessions.filter(s => s.date).sort((a, b) => b.date - a.date);
+const currentModel = sortedByDate.length > 0 ? sortedByDate[0].model : null;
+
+if (jsonMode) {
+  console.log(JSON.stringify({
+    total_sessions: total,
+    current_model: currentModel,
+    primary_model: sortedModels[0]?.[0],
+    distribution: sortedModels.map(([model, count]) => ({
+      model,
+      sessions: count,
+      pct: Math.round(count / total * 100),
+    })),
+  }, null, 2));
+  process.exit(0);
+}
+
+// Timeline mode
+if (timelineMode) {
+  function getISOWeek(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
+    const week1 = new Date(d.getFullYear(), 0, 4);
+    const weekNum = 1 + Math.round(((d - week1) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7);
+    return `${d.getFullYear()}-W${String(weekNum).padStart(2, '0')}`;
+  }
+
+  // Group by week, track model usage
+  const weekData = {};
+  for (const s of sessions) {
+    if (!s.date) continue;
+    const wk = getISOWeek(s.date);
+    if (!weekData[wk]) weekData[wk] = {};
+    weekData[wk][s.model] = (weekData[wk][s.model] || 0) + 1;
+  }
+
+  const weeks = Object.keys(weekData).sort();
+  if (weeks.length === 0) {
+    console.log('No timeline data available.');
+    process.exit(0);
+  }
+
+  // Only show last 12 weeks
+  const recentWeeks = weeks.slice(-12);
+  const allModels = [...new Set(sessions.map(s => s.model))].sort();
+  const modelColors = ['Opus', 'Sonnet', 'Haiku'];
+
+  console.log('cc-model — Week-by-week model usage\n');
+  for (const wk of recentWeeks) {
+    const data = weekData[wk];
+    const wkTotal = Object.values(data).reduce((a, b) => a + b, 0);
+    const dominant = Object.entries(data).sort((a, b) => b[1] - a[1])[0][0];
+    const models = Object.entries(data).sort((a, b) => b[1] - a[1])
+      .map(([m, c]) => `${m}×${c}`)
+      .join('  ');
+    console.log(`  ${wk}  ${String(wkTotal).padStart(3)}  ${models}`);
+  }
+  process.exit(0);
+}
+
+// Default: distribution chart
+const BAR_WIDTH = 28;
+const maxCount = sortedModels[0]?.[1] || 1;
+
+function bar(count) {
+  const filled = Math.round((count / maxCount) * BAR_WIDTH);
+  return '█'.repeat(filled) + '░'.repeat(BAR_WIDTH - filled);
+}
+
+function rpad(str, len) {
+  return str + ' '.repeat(Math.max(0, len - str.length));
+}
+
+// Find max label length
+const maxLabel = Math.max(...sortedModels.map(([m]) => m.length));
+
+console.log('cc-model — Which Claude models power your sessions\n');
+
+for (const [model, count] of sortedModels) {
+  const label = rpad(model, maxLabel);
+  const countStr = String(count).padStart(4);
+  const pct = (count / total * 100).toFixed(0).padStart(3);
+  console.log(`  ${label}  ${bar(count)}  ${countStr}  (${pct}%)`);
+}
+
+console.log('\n' + '─'.repeat(55));
+console.log(`  Total sessions: ${total}`);
+if (currentModel) console.log(`  Current model:  ${currentModel}`);
+console.log(`  Primary model:  ${sortedModels[0]?.[0]} (${sortedModels[0]?.[1]} sessions)`);
+console.log(`\n  Run with --timeline to see week-by-week model history`);

package/index.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>cc-model — Claude model distribution</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    background: #0d1117;
+    color: #c9d1d9;
+    font-family: 'SF Mono', 'Consolas', 'Cascadia Code', monospace;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 20px;
+  }
+  h1 { font-size: 1.5rem; color: #d2a8ff; margin-bottom: 6px; letter-spacing: -0.5px; }
+  .subtitle { color: #8b949e; font-size: 0.875rem; margin-bottom: 32px; }
+
+  .drop-zone {
+    border: 2px dashed #30363d;
+    border-radius: 12px;
+    padding: 48px 64px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    max-width: 480px;
+    width: 100%;
+    margin-bottom: 32px;
+  }
+  .drop-zone:hover, .drop-zone.drag-over {
+    border-color: #d2a8ff;
+    background: rgba(210,168,255,0.05);
+  }
+  .drop-icon { font-size: 2.5rem; margin-bottom: 12px; }
+  .drop-text { color: #8b949e; font-size: 0.875rem; line-height: 1.6; }
+  .drop-text strong { color: #c9d1d9; }
+  #file-input { display: none; }
+
+  .result { display: none; max-width: 600px; width: 100%; }
+  .result.visible { display: block; }
+
+  .card {
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 16px;
+  }
+  .card-title {
+    color: #8b949e;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 16px;
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+  .stat-item { text-align: center; }
+  .stat-val { font-size: 1.3rem; color: #d2a8ff; font-weight: 700; }
+  .stat-lbl { font-size: 0.7rem; color: #8b949e; margin-top: 2px; }
+
+  /* Model tier colors */
+  .opus  { background: linear-gradient(90deg, #d2a8ff 0%, #a56bff 100%); }
+  .sonnet { background: linear-gradient(90deg, #79c0ff 0%, #388bfd 100%); }
+  .haiku  { background: linear-gradient(90deg, #56d364 0%, #2ea043 100%); }
+
+  .bar-chart { font-size: 0.8rem; }
+  .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+  .bar-label { width: 88px; text-align: right; color: #c9d1d9; flex-shrink: 0; font-size: 0.8rem; }
+  .bar-track { flex: 1; height: 16px; background: #21262d; border-radius: 3px; overflow: hidden; }
+  .bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
+  .bar-count { width: 72px; color: #8b949e; text-align: right; flex-shrink: 0; font-size: 0.75rem; }
+
+  /* Timeline */
+  .timeline { font-size: 0.78rem; }
+  .tl-row { display: flex; gap: 12px; margin-bottom: 4px; align-items: flex-start; }
+  .tl-week { width: 64px; color: #8b949e; flex-shrink: 0; }
+  .tl-bars { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
+  .tl-chip {
+    padding: 2px 7px;
+    border-radius: 3px;
+    font-size: 0.72rem;
+    color: #0d1117;
+    font-weight: 600;
+  }
+
+  .tab-row { display: flex; gap: 8px; margin-bottom: 16px; }
+  .tab-btn {
+    background: none;
+    border: 1px solid #30363d;
+    color: #8b949e;
+    padding: 6px 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8rem;
+    transition: all 0.2s;
+  }
+  .tab-btn.active { border-color: #d2a8ff; color: #d2a8ff; background: rgba(210,168,255,0.1); }
+  .tab-btn:hover:not(.active) { border-color: #8b949e; color: #c9d1d9; }
+
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+
+  .reset-btn {
+    margin-top: 16px;
+    background: none;
+    border: 1px solid #30363d;
+    color: #8b949e;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8rem;
+    display: block;
+    width: 100%;
+    transition: all 0.2s;
+  }
+  .reset-btn:hover { border-color: #d2a8ff; color: #d2a8ff; }
+
+  .footer { color: #8b949e; font-size: 0.75rem; text-align: center; margin-top: 12px; }
+  .footer a { color: #d2a8ff; text-decoration: none; }
+  .footer a:hover { text-decoration: underline; }
+</style>
+</head>
+<body>
+
+<h1>🤖 cc-model</h1>
+<p class="subtitle">Which Claude AI models power your sessions?</p>
+
+<div class="drop-zone" id="drop-zone">
+  <div class="drop-icon">📁</div>
+  <div class="drop-text">
+    <strong>Drop your ~/.claude folder here</strong><br>
+    or click to select<br><br>
+    Reads session files locally.<br>
+    Nothing is uploaded.
+  </div>
+  <input type="file" id="file-input" webkitdirectory multiple accept=".jsonl">
+</div>
+
+<div class="result" id="result">
+  <div class="card">
+    <div class="card-title">Model Summary</div>
+    <div class="stats-grid">
+      <div class="stat-item">
+        <div class="stat-val" id="stat-total">—</div>
+        <div class="stat-lbl">sessions</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-val" id="stat-current">—</div>
+        <div class="stat-lbl">current model</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-val" id="stat-primary">—</div>
+        <div class="stat-lbl">primary model</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="tab-row">
+      <button class="tab-btn active" data-tab="dist">Distribution</button>
+      <button class="tab-btn" data-tab="timeline">Timeline</button>
+    </div>
+
+    <div class="tab-panel active" id="tab-dist">
+      <div class="bar-chart" id="bar-chart"></div>
+    </div>
+    <div class="tab-panel" id="tab-timeline">
+      <div class="timeline" id="timeline-chart"></div>
+    </div>
+  </div>
+
+  <button class="reset-btn" id="reset-btn">← Analyze another folder</button>
+</div>
+
+<div class="footer">
+  <a href="https://github.com/yurukusa/cc-model" target="_blank">cc-model</a> ·
+  Part of <a href="https://yurukusa.github.io/cc-toolkit/" target="_blank">cc-toolkit</a> · 106 free tools for Claude Code
+</div>
+
+<script>
+const dropZone = document.getElementById('drop-zone');
+const fileInput = document.getElementById('file-input');
+const resultEl = document.getElementById('result');
+const resetBtn = document.getElementById('reset-btn');
+
+dropZone.addEventListener('click', () => fileInput.click());
+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(e.dataTransfer.files); });
+fileInput.addEventListener('change', () => processFiles(fileInput.files));
+resetBtn.addEventListener('click', () => { resultEl.classList.remove('visible'); dropZone.style.display = ''; fileInput.value = ''; });
+
+// Tab switching
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+    btn.classList.add('active');
+    document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
+  });
+});
+
+function normalizeModel(raw) {
+  const base = raw.replace(/-20\d{6}$/, '');
+  const parts = base.replace(/^claude-/, '').split('-');
+  if (parts.length >= 3) {
+    const tier = parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+    return `${tier} ${parts[1]}.${parts[2]}`;
+  }
+  return base;
+}
+
+function getModelClass(model) {
+  if (model.startsWith('Opus')) return 'opus';
+  if (model.startsWith('Sonnet')) return 'sonnet';
+  if (model.startsWith('Haiku')) return 'haiku';
+  return 'opus';
+}
+
+function getISOWeek(date) {
+  const d = new Date(date);
+  d.setHours(0,0,0,0);
+  d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
+  const week1 = new Date(d.getFullYear(), 0, 4);
+  const wn = 1 + Math.round(((d - week1)/86400000 - 3 + ((week1.getDay()+6)%7))/7);
+  return `${d.getFullYear()}-W${String(wn).padStart(2,'0')}`;
+}
+
+async function processFiles(files) {
+  const jsonlFiles = Array.from(files).filter(f => {
+    const p = f.webkitRelativePath || f.name;
+    return p.endsWith('.jsonl') && !p.includes('/subagents/');
+  });
+  if (jsonlFiles.length === 0) { alert('No session files found.'); return; }
+  dropZone.style.display = 'none';
+
+  const sessions = [];
+  const BATCH = 40;
+  for (let i = 0; i < jsonlFiles.length; i += BATCH) {
+    const batch = jsonlFiles.slice(i, i + BATCH);
+    await Promise.all(batch.map(async f => {
+      try {
+        const text = await f.text();
+        const matches = text.match(/"model":"claude-[^"]+"/g);
+        if (!matches) return;
+        const mc = {};
+        for (const m of matches) {
+          const nm = normalizeModel(m.replace('"model":"','').replace('"',''));
+          mc[nm] = (mc[nm]||0) + 1;
+        }
+        const primary = Object.entries(mc).sort((a,b)=>b[1]-a[1])[0][0];
+        const tsMatch = text.match(/"timestamp":"([^"]+)"/);
+        sessions.push({ model: primary, date: tsMatch ? new Date(tsMatch[1]) : null });
+      } catch {}
+    }));
+  }
+
+  if (!sessions.length) { alert('No model data found.'); return; }
+
+  const modelTotals = {};
+  for (const s of sessions) modelTotals[s.model] = (modelTotals[s.model]||0) + 1;
+  const sorted = Object.entries(modelTotals).sort((a,b)=>b[1]-a[1]);
+  const total = sessions.length;
+  const recent = sessions.filter(s=>s.date).sort((a,b)=>b.date-a.date)[0];
+  const current = recent ? recent.model : sorted[0][0];
+
+  document.getElementById('stat-total').textContent = total;
+  document.getElementById('stat-current').textContent = current;
+  document.getElementById('stat-primary').textContent = sorted[0][0];
+
+  const maxCount = sorted[0][1];
+  document.getElementById('bar-chart').innerHTML = sorted.map(([m, c]) => `
+    <div class="bar-row">
+      <div class="bar-label">${m}</div>
+      <div class="bar-track">
+        <div class="bar-fill ${getModelClass(m)}" style="width:${(c/maxCount*100).toFixed(1)}%"></div>
+      </div>
+      <div class="bar-count">${c} (${Math.round(c/total*100)}%)</div>
+    </div>
+  `).join('');
+
+  // Timeline
+  const weekData = {};
+  for (const s of sessions) {
+    if (!s.date) continue;
+    const wk = getISOWeek(s.date);
+    if (!weekData[wk]) weekData[wk] = {};
+    weekData[wk][s.model] = (weekData[wk][s.model]||0) + 1;
+  }
+  const weeks = Object.keys(weekData).sort().slice(-12);
+  document.getElementById('timeline-chart').innerHTML = weeks.map(wk => {
+    const data = weekData[wk];
+    const chips = Object.entries(data).sort((a,b)=>b[1]-a[1]).map(([m,c]) =>
+      `<span class="tl-chip ${getModelClass(m)}">${m} ×${c}</span>`
+    ).join('');
+    return `<div class="tl-row"><div class="tl-week">${wk}</div><div class="tl-bars">${chips}</div></div>`;
+  }).join('');
+
+  resultEl.classList.add('visible');
+}
+</script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "cc-model",
+  "version": "1.0.0",
+  "description": "Which Claude AI models power your sessions? Distribution and timeline of model usage.",
+  "type": "module",
+  "bin": {
+    "cc-model": "./cli.mjs"
+  },
+  "scripts": {
+    "start": "node cli.mjs"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "ai",
+    "developer-tools",
+    "analytics",
+    "productivity"
+  ],
+  "author": "yurukusa",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  }
+}