cc-context-check 1.0.0

package/README.md

@@ -0,0 +1,54 @@
+# cc-context-check
+
+See exactly how full your Claude Code context window is — right from your terminal.
+
+```
+npx cc-context-check
+```
+
+## What it does
+
+Reads token usage directly from your `~/.claude/projects/` session transcripts and shows:
+
+- **Context fill %** with a color-coded progress bar
+- **Token counts**: input used (including cache), output, remaining
+- **Smart warnings**: yellow at 70%, red at 85% (time to `/compact`)
+- **Last 5 active sessions** across all your Claude Code projects
+
+## Example output
+
+```
+cc-context-check — Context window usage across sessions
+
+Context limit: 200.0k tokens (Claude Sonnet/Opus)
+
+🟢 ~/projects/my-app    [a3f9c12] just now · 12.4 MB
+   ████████████░░░░░░░░░░░░░░░░░░ 40.1% used
+   80.2k input · 1.2k output · 119.8k remaining
+
+🟡 ~/                   [b7d44e1] 2h ago · 5.9 MB
+   █████████████████████░░░░░░░░░ 71.5% used
+   143.0k input · 89 output · 57.0k remaining
+   △ Warning: Context is getting full — consider /compact
+```
+
+## Options
+
+```
+--all, -a    Show top 20 sessions instead of 5
+--json       JSON output for scripting
+```
+
+## Why this exists
+
+Claude Code's context window is 200k tokens. When it fills up, responses slow down and you lose context of earlier work. `/compact` compresses history — but knowing *when* to compact is guesswork without this tool.
+
+cc-context-check reads the actual `input_tokens`, `cache_read_input_tokens`, and `cache_creation_input_tokens` from your session files to give you the real number.
+
+## Part of cc-toolkit
+
+One of 79 free tools for Claude Code users → [cc-toolkit](https://yurukusa.github.io/cc-toolkit/)
+
+## License
+
+MIT

package/cli.mjs

@@ -0,0 +1,200 @@
+#!/usr/bin/env node
+
+// cc-context-check — See how full your Claude Code context window is
+// Reads ~/.claude/projects/ session transcripts, extracts token usage from the latest exchange.
+// Zero dependencies. Works with Claude Sonnet/Opus/Haiku.
+
+import { readdir, stat, open } from 'node:fs/promises';
+import { join } from 'node:path';
+import { homedir } from 'node:os';
+
+// ── Config ──────────────────────────────────────────────────────
+
+const CONTEXT_LIMIT = 200_000; // Claude Sonnet/Opus context window (tokens)
+const WARN_PCT = 0.70;         // yellow warning threshold
+const CRIT_PCT = 0.85;         // red critical threshold
+const TAIL_BYTES = 65_536;     // read last 64KB to find recent usage data
+
+// ── Color helpers ───────────────────────────────────────────────
+
+const C = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+};
+
+function bar(pct, width = 30) {
+  const filled = Math.min(Math.round(pct * width), width);
+  const color = pct >= CRIT_PCT ? C.red : pct >= WARN_PCT ? C.yellow : C.green;
+  return color + '█'.repeat(filled) + C.dim + '░'.repeat(width - filled) + C.reset;
+}
+
+function fmt(n) {
+  return n >= 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
+}
+
+// ── Read last N bytes of a file ──────────────────────────────────
+
+async function readTail(filePath, maxBytes) {
+  const fh = await open(filePath, 'r');
+  try {
+    const { size } = await fh.stat();
+    const start = Math.max(0, size - maxBytes);
+    const buf = Buffer.alloc(size - start);
+    const { bytesRead } = await fh.read(buf, 0, buf.length, start);
+    return buf.toString('utf8', 0, bytesRead);
+  } finally {
+    await fh.close();
+  }
+}
+
+// ── Find latest usage from a jsonl chunk ─────────────────────────
+
+function extractLatestUsage(chunk) {
+  const lines = chunk.split('\n').reverse();
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    let d;
+    try { d = JSON.parse(line); } catch { continue; }
+    if (d.type !== 'assistant') continue;
+    const usage = d?.message?.usage;
+    if (!usage) continue;
+    const inputTokens = (usage.input_tokens || 0) +
+      (usage.cache_read_input_tokens || 0) +
+      (usage.cache_creation_input_tokens || 0);
+    const outputTokens = usage.output_tokens || 0;
+    if (inputTokens > 0) {
+      return { inputTokens, outputTokens, raw: usage };
+    }
+  }
+  return null;
+}
+
+// ── Find all project jsonl files sorted by mtime ─────────────────
+
+async function findAllJsonlFiles() {
+  const base = join(homedir(), '.claude', 'projects');
+  let projectDirs;
+  try {
+    projectDirs = await readdir(base);
+  } catch {
+    return [];
+  }
+
+  const files = [];
+  for (const dir of projectDirs) {
+    const dirPath = join(base, dir);
+    let entries;
+    try { entries = await readdir(dirPath); } catch { continue; }
+    for (const entry of entries) {
+      if (!entry.endsWith('.jsonl')) continue;
+      const filePath = join(dirPath, entry);
+      try {
+        const s = await stat(filePath);
+        files.push({ filePath, mtime: s.mtimeMs, size: s.size, project: dir });
+      } catch {}
+    }
+  }
+  files.sort((a, b) => b.mtime - a.mtime);
+  return files;
+}
+
+// ── Format timestamp ─────────────────────────────────────────────
+
+function relTime(mtime) {
+  const diff = Date.now() - mtime;
+  const min = Math.floor(diff / 60_000);
+  const hr = Math.floor(min / 60);
+  if (hr > 0) return `${hr}h ${min % 60}m ago`;
+  if (min > 0) return `${min}m ago`;
+  return 'just now';
+}
+
+// ── Main ─────────────────────────────────────────────────────────
+
+async function main() {
+  const args = process.argv.slice(2);
+  const showAll = args.includes('--all') || args.includes('-a');
+  const jsonOut = args.includes('--json');
+  const topN = showAll ? 20 : 5;
+
+  const files = await findAllJsonlFiles();
+  if (files.length === 0) {
+    console.error('No Claude Code session files found in ~/.claude/projects/');
+    process.exit(1);
+  }
+
+  const results = [];
+  for (const f of files.slice(0, topN)) {
+    let usage = null;
+    try {
+      const chunk = await readTail(f.filePath, TAIL_BYTES);
+      usage = extractLatestUsage(chunk);
+    } catch {}
+    results.push({ ...f, usage });
+  }
+
+  if (jsonOut) {
+    console.log(JSON.stringify(results.map(r => ({
+      project: r.project,
+      file: r.filePath.split('/').pop(),
+      mtime: new Date(r.mtime).toISOString(),
+      size_mb: (r.size / 1024 / 1024).toFixed(1),
+      input_tokens: r.usage?.inputTokens ?? null,
+      output_tokens: r.usage?.outputTokens ?? null,
+      pct: r.usage ? (r.usage.inputTokens / CONTEXT_LIMIT * 100).toFixed(1) : null,
+    })), null, 2));
+    return;
+  }
+
+  // ── Header ───────────────────────────────────────────────────
+  console.log(`\n${C.bold}cc-context-check${C.reset} — Context window usage across sessions\n`);
+  console.log(`${C.dim}Context limit: ${fmt(CONTEXT_LIMIT)} tokens (Claude Sonnet/Opus)${C.reset}\n`);
+
+  let anyData = false;
+  for (const r of results) {
+    const projectShort = r.project.replace(/-home-namakusa-?/, '~/')
+      .replace(/^~\/projects\//, '~/').slice(0, 40);
+    const sessionId = r.filePath.split('/').pop().slice(0, 8);
+    const sizeStr = (r.size / 1024 / 1024).toFixed(1) + ' MB';
+
+    if (!r.usage) {
+      console.log(`${C.dim}${projectShort} [${sessionId}] — no usage data (${relTime(r.mtime)})${C.reset}`);
+      continue;
+    }
+
+    anyData = true;
+    const { inputTokens, outputTokens } = r.usage;
+    const pct = inputTokens / CONTEXT_LIMIT;
+    const pctStr = (pct * 100).toFixed(1) + '%';
+    const statusIcon = pct >= CRIT_PCT ? '🔴' : pct >= WARN_PCT ? '🟡' : '🟢';
+    const remaining = CONTEXT_LIMIT - inputTokens;
+
+    console.log(`${statusIcon} ${C.bold}${projectShort}${C.reset} ${C.dim}[${sessionId}] ${relTime(r.mtime)} · ${sizeStr}${C.reset}`);
+    console.log(`   ${bar(pct)} ${C.bold}${pctStr}${C.reset} used`);
+    console.log(`   ${C.cyan}${fmt(inputTokens)}${C.reset} input · ${C.dim}${fmt(outputTokens)} output · ${fmt(remaining)} remaining${C.reset}`);
+
+    if (pct >= CRIT_PCT) {
+      console.log(`   ${C.red}⚠ Critical: Run /compact soon to avoid context overflow${C.reset}`);
+    } else if (pct >= WARN_PCT) {
+      console.log(`   ${C.yellow}△ Warning: Context is getting full — consider /compact${C.reset}`);
+    }
+    console.log();
+  }
+
+  if (!anyData) {
+    console.log(`${C.dim}No token usage data found in recent sessions.${C.reset}`);
+    console.log(`${C.dim}Token data appears in sessions after at least one AI response.${C.reset}\n`);
+  }
+
+  // ── Footer ───────────────────────────────────────────────────
+  console.log(`${C.dim}Options: --all (-a) show top 20 sessions · --json JSON output${C.reset}\n`);
+}
+
+main().catch(e => { console.error(e.message); process.exit(1); });

package/index.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>cc-context-check — How full is your Claude Code context window?</title>
+<meta name="description" content="See exactly how full your Claude Code context window is. Drag in your ~/.claude folder for instant analysis.">
+<meta property="og:title" content="cc-context-check — Context window usage for Claude Code">
+<meta property="og:description" content="Reads token usage from your session transcripts. Color-coded progress bars: green, yellow, red. No install needed.">
+<meta property="og:url" content="https://yurukusa.github.io/cc-context-check/">
+<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;
+  --green: #56d364;
+  --yellow: #f7c948;
+  --red: #ff7b72;
+  --cyan: #58d8f0;
+  --blue: #58a6ff;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Mono', Consolas, monospace;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 2rem 1rem;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.header h1 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--cyan);
+  font-family: Consolas, 'Courier New', monospace;
+  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(--cyan);
+  background: #1a2332;
+}
+
+.drop-zone h2 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  color: var(--text);
+}
+
+.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;
+}
+
+.btn {
+  background: var(--cyan);
+  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; }
+
+#results {
+  width: 100%;
+  max-width: 700px;
+  display: none;
+}
+
+.results-header {
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.session-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.session-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+
+.session-project {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--text);
+}
+
+.session-info {
+  font-size: 0.75rem;
+  color: var(--muted);
+  text-align: right;
+}
+
+.progress-container {
+  margin-bottom: 0.75rem;
+}
+
+.progress-bar {
+  height: 8px;
+  border-radius: 4px;
+  background: #21262d;
+  overflow: hidden;
+  margin-bottom: 0.4rem;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+.fill-green { background: var(--green); }
+.fill-yellow { background: var(--yellow); }
+.fill-red { background: var(--red); }
+
+.progress-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+}
+
+.pct-value {
+  font-weight: 700;
+}
+
+.token-breakdown {
+  font-size: 0.78rem;
+  color: var(--muted);
+  display: flex;
+  gap: 1.2rem;
+  flex-wrap: wrap;
+}
+
+.token-item span:first-child {
+  color: var(--cyan);
+  font-weight: 600;
+}
+
+.warning-msg {
+  margin-top: 0.75rem;
+  font-size: 0.8rem;
+  padding: 0.4rem 0.75rem;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.warning-yellow { background: rgba(247,201,72,0.12); color: var(--yellow); }
+.warning-red { background: rgba(255,123,114,0.12); color: var(--red); }
+
+.summary-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1.25rem 1.5rem;
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+.summary-title {
+  font-size: 0.8rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 1rem;
+}
+
+.summary-stats {
+  display: flex;
+  justify-content: center;
+  gap: 2.5rem;
+  flex-wrap: wrap;
+}
+
+.summary-stat .num {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--cyan);
+  display: block;
+}
+
+.summary-stat .label {
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.footer-links {
+  margin-top: 2rem;
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.footer-links a {
+  color: var(--blue);
+  text-decoration: none;
+  margin: 0 0.5rem;
+}
+
+.status-icon {
+  margin-right: 0.4rem;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 480px) {
+  .session-meta { flex-direction: column; gap: 0.25rem; }
+  .session-info { text-align: left; }
+  .summary-stats { gap: 1.5rem; }
+}
+</style>
+</head>
+<body>
+
+<div class="header">
+  <h1>cc-context-check</h1>
+  <p>See how full your Claude Code context window is</p>
+</div>
+
+<div class="drop-zone" id="dropZone" onclick="document.getElementById('folderInput').click()">
+  <div class="icon">📁</div>
+  <h2>Drop your .claude folder here</h2>
+  <p>Or click to select it manually.<br>
+  Your data stays local — nothing is uploaded.</p>
+  <input type="file" id="folderInput" webkitdirectory multiple>
+  <button class="btn" onclick="event.stopPropagation(); document.getElementById('folderInput').click()">
+    Select ~/.claude folder
+  </button>
+</div>
+
+<div id="results">
+  <div class="results-header" id="resultsHeader"></div>
+  <div id="sessionList"></div>
+  <div class="summary-section" id="summarySection"></div>
+  <div class="footer-links">
+    <a href="https://github.com/yurukusa/cc-context-check" 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-context-check</code></span>
+  </div>
+</div>
+
+<div class="footer-links" id="footerMain">
+  <a href="https://github.com/yurukusa/cc-context-check" 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 CONTEXT_LIMIT = 200_000;
+const WARN_PCT = 0.70;
+const CRIT_PCT = 0.85;
+
+const dropZone = document.getElementById('dropZone');
+const folderInput = document.getElementById('folderInput');
+
+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));
+});
+
+folderInput.addEventListener('change', e => processFiles(Array.from(e.target.files)));
+
+function relTime(ms) {
+  const diff = Date.now() - ms;
+  const min = Math.floor(diff / 60000);
+  const hr = Math.floor(min / 60);
+  if (hr > 24) return Math.floor(hr / 24) + 'd ago';
+  if (hr > 0) return `${hr}h ${min % 60}m ago`;
+  if (min > 0) return `${min}m ago`;
+  return 'just now';
+}
+
+function fmtTokens(n) {
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+  return String(n);
+}
+
+async function readLastLines(file, maxBytes = 65536) {
+  const size = file.size;
+  const start = Math.max(0, size - maxBytes);
+  const blob = file.slice(start, size);
+  return await blob.text();
+}
+
+function extractLatestUsage(text) {
+  const lines = text.split('\n').reverse();
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    let d;
+    try { d = JSON.parse(line); } catch { continue; }
+    if (d.type !== 'assistant') continue;
+    const usage = d?.message?.usage;
+    if (!usage) continue;
+    const inputTokens = (usage.input_tokens || 0) +
+      (usage.cache_read_input_tokens || 0) +
+      (usage.cache_creation_input_tokens || 0);
+    if (inputTokens > 0) {
+      return { inputTokens, outputTokens: usage.output_tokens || 0 };
+    }
+  }
+  return null;
+}
+
+async function processFiles(files) {
+  const jsonlFiles = files.filter(f => f.name.endsWith('.jsonl') && f.webkitRelativePath.includes('projects'));
+  if (!jsonlFiles.length) {
+    alert('No session files found.\nMake sure to select your .claude folder (not a subfolder).');
+    return;
+  }
+
+  // Sort by last modified
+  jsonlFiles.sort((a, b) => b.lastModified - a.lastModified);
+  const top = jsonlFiles.slice(0, 20);
+
+  const sessions = [];
+  for (const f of top) {
+    const chunk = await readLastLines(f);
+    const usage = extractLatestUsage(chunk);
+    const pathParts = f.webkitRelativePath.split('/');
+    const projectPart = pathParts.slice(1, -1).join('/') || 'root';
+    const project = projectPart
+      .replace(/^projects\//, '')
+      .replace(/^-home-[^\/]+-?/, '~/')
+      .replace(/^~\/projects\//, '~/')
+      .slice(0, 45);
+    sessions.push({
+      project,
+      file: f.name.slice(0, 8),
+      mtime: f.lastModified,
+      size: f.size,
+      usage
+    });
+  }
+
+  renderResults(sessions);
+}
+
+function renderResults(sessions) {
+  document.getElementById('dropZone').style.display = 'none';
+  document.getElementById('footerMain').style.display = 'none';
+  const results = document.getElementById('results');
+  results.style.display = 'block';
+
+  const withData = sessions.filter(s => s.usage);
+  document.getElementById('resultsHeader').textContent =
+    `Analyzed ${sessions.length} sessions — ${withData.length} with token data`;
+
+  const list = document.getElementById('sessionList');
+  list.innerHTML = '';
+
+  sessions.forEach(s => {
+    if (!s.usage) return;
+    const pct = s.usage.inputTokens / CONTEXT_LIMIT;
+    const pctPct = (pct * 100).toFixed(1);
+    const remaining = CONTEXT_LIMIT - s.usage.inputTokens;
+    const colorClass = pct >= CRIT_PCT ? 'fill-red' : pct >= WARN_PCT ? 'fill-yellow' : 'fill-green';
+    const icon = pct >= CRIT_PCT ? '🔴' : pct >= WARN_PCT ? '🟡' : '🟢';
+    const sizeMB = (s.size / 1024 / 1024).toFixed(1);
+
+    let warningHtml = '';
+    if (pct >= CRIT_PCT) {
+      warningHtml = `<div class="warning-msg warning-red">⚠ Critical: Run /compact soon to avoid context overflow</div>`;
+    } else if (pct >= WARN_PCT) {
+      warningHtml = `<div class="warning-msg warning-yellow">△ Warning: Context getting full — consider /compact</div>`;
+    }
+
+    list.innerHTML += `
+      <div class="session-card">
+        <div class="session-meta">
+          <div class="session-project">
+            <span class="status-icon">${icon}</span>${s.project}
+          </div>
+          <div class="session-info">[${s.file}] ${relTime(s.mtime)}<br>${sizeMB} MB</div>
+        </div>
+        <div class="progress-container">
+          <div class="progress-bar">
+            <div class="progress-fill ${colorClass}" style="width:${Math.min(pct * 100, 100)}%"></div>
+          </div>
+          <div class="progress-label">
+            <span class="pct-value">${pctPct}% used</span>
+            <span style="color:var(--muted)">${fmtTokens(remaining)} remaining</span>
+          </div>
+        </div>
+        <div class="token-breakdown">
+          <div class="token-item"><span>${fmtTokens(s.usage.inputTokens)}</span> input tokens</div>
+          <div class="token-item"><span>${fmtTokens(s.usage.outputTokens)}</span> output tokens</div>
+          <div class="token-item"><span>${fmtTokens(CONTEXT_LIMIT)}</span> limit</div>
+        </div>
+        ${warningHtml}
+      </div>`;
+  });
+
+  // Summary
+  const avgPct = withData.length > 0
+    ? (withData.reduce((sum, s) => sum + s.usage.inputTokens / CONTEXT_LIMIT, 0) / withData.length * 100).toFixed(0)
+    : 0;
+  const critCount = withData.filter(s => s.usage.inputTokens / CONTEXT_LIMIT >= CRIT_PCT).length;
+  const warnCount = withData.filter(s => s.usage.inputTokens / CONTEXT_LIMIT >= WARN_PCT && s.usage.inputTokens / CONTEXT_LIMIT < CRIT_PCT).length;
+  const maxTokens = withData.length > 0 ? Math.max(...withData.map(s => s.usage.inputTokens)) : 0;
+
+  document.getElementById('summarySection').innerHTML = `
+    <div class="summary-title">Summary</div>
+    <div class="summary-stats">
+      <div class="summary-stat">
+        <span class="num">${withData.length}</span>
+        <span class="label">sessions analyzed</span>
+      </div>
+      <div class="summary-stat">
+        <span class="num">${avgPct}%</span>
+        <span class="label">avg context used</span>
+      </div>
+      <div class="summary-stat">
+        <span class="num" style="color:var(--red)">${critCount}</span>
+        <span class="label">need /compact now</span>
+      </div>
+      <div class="summary-stat">
+        <span class="num">${fmtTokens(maxTokens)}</span>
+        <span class="label">max tokens used</span>
+      </div>
+    </div>
+  `;
+}
+</script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "cc-context-check",
+  "version": "1.0.0",
+  "description": "See how full your Claude Code context window is — reads token usage from session transcripts",
+  "main": "cli.mjs",
+  "bin": {
+    "cc-context-check": "./cli.mjs"
+  },
+  "scripts": {
+    "start": "node cli.mjs"
+  },
+  "keywords": [
+    "claude-code",
+    "claude",
+    "ai",
+    "context-window",
+    "token-usage",
+    "developer-tools",
+    "cli"
+  ],
+  "author": "yurukusa",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  }
+}