claude-inspect 0.3.0 → 0.4.0

package/README.de.md

@@ -1,11 +1,12 @@
 # claude-inspect
 
-> English: [README.md](README.md) · Screenshots: [docs/screenshots](docs/screenshots)
+> English: [README.md](README.md) · Website: [brokoskokoli.github.io/claude_inspect](https://brokoskokoli.github.io/claude_inspect/) · Screenshots: [docs/screenshots](docs/screenshots)
 >
 > Die Oberfläche ist englisch; hell, dunkel oder nach Systemeinstellung (Umschalter oben rechts).
 
 Lokales Live-Dashboard für Claude-Code-Agenten. Liest **passiv** die Dateien unter
-`~/.claude`, ohne Hooks, ohne Konfigurationsänderung und ohne eigene Datenablage.
+`~/.claude`, ohne Hooks und ohne Konfigurationsänderung. Das Einzige, was es schreibt, ist ein
+CPU-Protokoll im eigenen Datenverzeichnis (siehe *CPU*).
 
 ## Start
 
@@ -23,7 +24,8 @@ beim Login und nach Abstürzen neu und läuft ohne Token (nur von localhost erre
 
 Manuell gestartet gibt `claude-inspect` eine URL mit Zufallstoken (`?t=…`) aus; der Browser merkt
 es sich als Cookie. `--token` für einen festen Token, `--no-auth` für keinen, `--port` für einen
-anderen Port, `CLAUDE_CONFIG_DIR=/pfad` für ein anderes Datenverzeichnis.
+anderen Port, `CLAUDE_CONFIG_DIR=/pfad` für ein anderes Datenverzeichnis, `--no-cpu-log` ohne
+CPU-Protokoll, `CLAUDE_INSPECT_DATA_DIR=/pfad` für einen anderen Ablageort des CPU-Protokolls.
 
 Aus den Quellen: `git clone …`, `npm install`, `npm run build`, `npm start`
 (`npm run dev` + `npm run dev:web` für die Entwicklung mit Hot-Reload).
@@ -43,6 +45,14 @@ Aus den Quellen: `git clone …`, `npm install`, `npm run build`, `npm start`
     Balken, Aufruf-Verbindungen, Pausen über 10 min zusammengeschoben, Zoom
   - *Call graph*: wer wen aufgerufen hat, inkl. Fork/Fortsetzung
   - *Tasks*: Task-Liste der Session als Board
+  - *CPU*: Auslastung des Claude-Prozesses samt aller Unterprozesse (Shells, Builds, Tests,
+  MCP-Server …) als gestapelter Verlauf je Programmname, dazu die Prozesse mit der meisten CPU-Zeit
+- **CPU**: alle 3 s aus der Prozesstabelle gemessen (100 % = ein Kern), Verlaufslinie auf der
+  Dashboard-Karte. Pro Session eine CSV-Datei im App-Datenverzeichnis (macOS
+  `~/Library/Application Support/claude-inspect/cpu`, Linux `~/.local/share/claude-inspect/cpu`,
+  Windows `%LOCALAPPDATA%\claude-inspect\cpu`), damit der Verlauf nach Sessionende abrufbar bleibt.
+  Dateien älter als 30 Tage werden gelöscht. Gemessen wird nur, solange claude-inspect läuft;
+  Prozesse, die kürzer als 3 s leben, fehlen. Abschalten mit `--no-cpu-log`.
 - **Statistics**: API-Gegenwert (Schätzung nach Listenpreisen), Tokens je Modell/Tag/Projekt,
   Cache-Anteil, Aktivitäts-Heatmap, Tool-Statistik mit Fehlern und Dauer (p95)
 - **Tools**: alle Tool-Aufrufe aller Sessions, filterbar; Klick springt an die Stelle im Verlauf

package/README.md

@@ -12,10 +12,10 @@ claude-inspect is a local web UI that reads the files Claude Code already writes
 and shows running sessions, subagents, `claude -p` worker sessions started by other agents,
 every tool call with its result, timelines, a call graph, token usage and a searchable history.
 
-It is **read-only and passive**: no hooks, no settings changes, no proxy, no data leaves your machine,
-and the tool itself stores nothing.
+It is **read-only and passive** towards `~/.claude`: no hooks, no settings changes, no proxy, no data leaves
+your machine. The only thing it writes is a CPU log in its own data directory (see *CPU usage*).
 
-> Deutsch: [README.de.md](README.de.md) · Design notes (German): [KONZEPT.md](KONZEPT.md)
+> Website: [brokoskokoli.github.io/claude_inspect](https://brokoskokoli.github.io/claude_inspect/) · Deutsch: [README.de.md](README.de.md) · Design notes (German): [KONZEPT.md](KONZEPT.md)
 
 ![Live dashboard with running agents, subagents and a spawned worker session](docs/screenshots/dashboard.jpg)
 
@@ -41,6 +41,7 @@ becomes hard to tell *who is doing what*. claude-inspect answers:
 | **Timeline** | One lane per agent, tool calls as bars, spawn links between lanes, idle gaps > 10 min collapsed, zoom. Click a bar to jump to the call. |
 | **Spawn linking** | Links sessions started by `claude -p …` to the calling tool use via the process tree (exact), `--session-id`, prompt text, `--agent`, time window and working directory – with a confidence label. |
 | **Statistics** | API list-price estimate, tokens per model/day/project, cache share, activity heatmap, tool statistics with error rate and p95 duration. |
+| **CPU usage** | CPU of each Claude Code process plus all its subprocesses (shells, builds, test runners, MCP servers …), measured every 3 s from the process table. Sparkline on the dashboard card, a *CPU* tab per session with a stacked chart by process name and the processes that used the most CPU time. Recorded as one CSV per session in the app data directory (`~/Library/Application Support/claude-inspect/cpu` on macOS, `~/.local/share/claude-inspect/cpu` on Linux, `%LOCALAPPDATA%\claude-inspect\cpu` on Windows), so it stays available after the session ended; files older than 30 days are deleted. Only measured while claude-inspect runs; processes that live less than 3 s are missed. `--no-cpu-log` turns recording off. |
 | **Tool explorer & files** | Every tool call across all sessions, filterable; which files agents read, edited or wrote. |
 | **Full-text search** | Across all transcripts, subagents and the prompt history (including prompts of sessions Claude Code already cleaned up). |
 | **Task boards** | The TaskCreate/TaskUpdate list of a session with dependencies. |
@@ -48,6 +49,8 @@ becomes hard to tell *who is doing what*. claude-inspect answers:
 | **Dark mode** | Light, dark or system theme, remembered per browser. |
 | **Phone-friendly** | On narrow screens (phones, small iframes) the navigation collapses into a menu, tables turn into compact lists, the session view is single-column and long code, paths and JSON scroll inside their block. The server still listens on 127.0.0.1 only – to open it from a phone you need your own tunnel or reverse proxy that forwards to it with a local `Host` header (other hosts are rejected). |
 
+![CPU tab: CPU usage of a worker session and its subprocesses (vitest, tsc, esbuild …) over time](docs/screenshots/cpu.jpg)
+
 <table>
 <tr>
 <td><img src="docs/screenshots/timeline.jpg" alt="Timeline of an orchestrator with subagents and a spawned worker session"></td>
@@ -90,7 +93,8 @@ After `npm install -g claude-inspect@latest`, run `claude-inspect service instal
 
 Started manually, `claude-inspect` prints a URL with a random access token (`?t=…`) that the browser
 keeps as a cookie. Use `--token <t>` for a fixed token or `--no-auth` for none, `--port` for another port,
-`CLAUDE_CONFIG_DIR=/path/to/.claude` for another data directory. `claude-inspect --help` lists everything.
+`CLAUDE_CONFIG_DIR=/path/to/.claude` for another data directory, `--no-cpu-log` to not record CPU usage,
+`CLAUDE_INSPECT_DATA_DIR=/path` for another place for the CPU log. `claude-inspect --help` lists everything.
 
 ### Try it without your own data
 
@@ -127,7 +131,7 @@ FormatRegistry → versioned decoders → normalized model → REST + SSE → Sv
 
 - **Per-record format detection:** every decoder scores a record (`type`, version range, structure); the best one wins, a fallback keeps unknown records. Adding support for a new Claude Code version = adding a decoder file. See [docs/FORMATS.md](docs/FORMATS.md).
 - **In memory only:** startup reads process/job data and file heads (< 1 s); the full history (hundreds of MB) is aggregated in the background in a few seconds and then followed incrementally.
-- **Privacy & security:** listens on `127.0.0.1` only (never reachable from the network), rejects requests whose `Host` header isn't `localhost`/`127.0.0.1` (DNS rebinding), sends no CORS headers (other websites in your browser can't read the API), is read-only, never reads credential files (`*.key`, `daemon/auth`, `ide/*.lock`, …) and masks token/secret fields in the raw view. The access token is an extra layer against *other local processes or users* on the same machine; on a single-user machine `--no-auth` (used by the autostart service) is a reasonable trade-off. Cost figures are estimates from public API list prices – with a subscription you do not pay these amounts directly.
+- **Privacy & security:** listens on `127.0.0.1` only (never reachable from the network), rejects requests whose `Host` header isn't `localhost`/`127.0.0.1` (DNS rebinding), sends no CORS headers (other websites in your browser can't read the API), is read-only towards `~/.claude` (the CPU log goes to its own data directory and contains only timestamps, PIDs, program names and CPU percentages – no command lines), never reads credential files (`*.key`, `daemon/auth`, `ide/*.lock`, …) and masks token/secret fields in the raw view. The access token is an extra layer against *other local processes or users* on the same machine; on a single-user machine `--no-auth` (used by the autostart service) is a reasonable trade-off. Cost figures are estimates from public API list prices – with a subscription you do not pay these amounts directly.
 
 ## Development
 

package/dist/app/server/cli/demo.js

@@ -11,6 +11,7 @@ import { execFileSync, spawn } from 'node:child_process';
 import { existsSync, mkdirSync, rmSync, utimesSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
+import { CSV_HEADER, toCsv } from '../model/cpu.js';
 let ROOT = '';
 const NOW = Date.now();
 const VERSION = '2.1.283';
@@ -283,6 +284,46 @@ function procStart(pid) {
 function sessionFile(pid, data) {
     write(join(ROOT, 'sessions', `${pid}.json`), JSON.stringify({ pid, procStart: procStart(pid), version: VERSION, peerProtocol: 1, pidDomain: process.platform, updatedAt: NOW, statusUpdatedAt: NOW - 20_000, ...data }));
 }
+function cpuHistory(dataDir, sessionId, pid, from, bursts) {
+    const lines = [];
+    let lastWrite = 0;
+    for (let t = from; t <= NOW; t += 3000) {
+        const procs = [{ pid, ppid: 1, comm: 'claude', pct: Math.round((3 + rnd() * 9) * 10) / 10 }];
+        for (const b of bursts) {
+            const start = from + b.at * 60_000;
+            if (t < start || t > start + b.secs * 1000)
+                continue;
+            procs.push({ pid: b.pid, ppid: pid + 1, comm: b.comm, pct: Math.round((b.pct[0] + rnd() * (b.pct[1] - b.pct[0])) * 10) / 10 });
+        }
+        // like the real recorder: quiet phases at most every 30 s
+        if (procs.length === 1 && t - lastWrite < 30_000)
+            continue;
+        lastWrite = t;
+        lines.push(toCsv({ t, procs }));
+    }
+    write(join(dataDir, 'cpu', `${sessionId}.csv`), CSV_HEADER + lines.join(''));
+}
+function demoCpu(dataDir, s) {
+    rmSync(dataDir, { recursive: true, force: true });
+    cpuHistory(dataDir, s.orchId, 41_200, NOW - 38 * 60_000, [
+        { at: 2, secs: 20, comm: 'rg', pid: 41_310, pct: [60, 95] },
+        { at: 30, secs: 150, comm: 'node', pid: 41_377, pct: [110, 160] },
+        { at: 31, secs: 90, comm: 'eslint', pid: 41_380, pct: [90, 130] },
+    ]);
+    const minutes = Math.max(4, (NOW - s.implStart) / 60_000);
+    const at = (f) => f * minutes;
+    cpuHistory(dataDir, s.implId, 52_100, s.implStart, [
+        { at: at(0.1), secs: 120, comm: 'vitest', pid: 52_210, pct: [240, 380] },
+        { at: at(0.1), secs: 120, comm: 'esbuild', pid: 52_214, pct: [20, 60] },
+        { at: at(0.3), secs: 75, comm: 'tsc', pid: 52_260, pct: [95, 105] },
+        { at: at(0.45), secs: 180, comm: 'vitest', pid: 52_301, pct: [280, 420] },
+        { at: at(0.45), secs: 180, comm: 'esbuild', pid: 52_305, pct: [30, 70] },
+        { at: at(0.68), secs: 240, comm: 'node', pid: 52_340, pct: [90, 140] },
+        { at: at(0.84), secs: 150, comm: 'vitest', pid: 52_390, pct: [250, 360] },
+        { at: at(0.84), secs: 150, comm: 'esbuild', pid: 52_394, pct: [20, 50] },
+        { at: at(0.93), secs: 60, comm: 'tsc', pid: 52_401, pct: [95, 105] },
+    ]);
+}
 export async function runDemo(opts) {
     ROOT = opts.out ?? join(existsSync('/tmp') ? '/tmp' : tmpdir(), 'claude-inspect-demo');
     if (!opts.out)
@@ -320,6 +361,8 @@ export async function runDemo(opts) {
     console.log(`Demo data in ${ROOT}`);
     // config.ts reads CLAUDE_CONFIG_DIR on import – set it before loading the server
     process.env.CLAUDE_CONFIG_DIR = ROOT;
+    process.env.CLAUDE_INSPECT_DATA_DIR = `${ROOT}-data`;
+    demoCpu(`${ROOT}-data`, s);
     const { runServer } = await import('../run.js');
     await runServer({ port: opts.port, open: opts.open, token: process.env.CLAUDE_INSPECT_TOKEN ?? 'demo' });
 }

package/dist/app/server/cli.js

@@ -40,11 +40,13 @@ Options:
   --open           open the browser
   --token <t>      fixed access token instead of a random one      env: CLAUDE_INSPECT_TOKEN
   --no-auth        no token (still only reachable from localhost)  env: CLAUDE_INSPECT_NO_AUTH=1
+  --no-cpu-log     don't record CPU usage to the data directory     env: CLAUDE_INSPECT_NO_CPU_LOG=1
   --out <dir>      demo: only write the demo data to <dir>
   -v, --version    print the version
   -h, --help       show this help
 
-Data directory: $CLAUDE_CONFIG_DIR or ~/.claude`;
+Data directory: $CLAUDE_CONFIG_DIR or ~/.claude (read only)
+CPU log:        $CLAUDE_INSPECT_DATA_DIR/cpu (default: the platform's app data directory)`;
 const { values, positionals } = parseArgs({
     allowPositionals: true,
     options: {
@@ -53,6 +55,7 @@ const { values, positionals } = parseArgs({
         dev: { type: 'boolean', default: false },
         token: { type: 'string', default: env.CLAUDE_INSPECT_TOKEN },
         'no-auth': { type: 'boolean', default: env.CLAUDE_INSPECT_NO_AUTH === '1' },
+        'no-cpu-log': { type: 'boolean', default: env.CLAUDE_INSPECT_NO_CPU_LOG === '1' },
         out: { type: 'string' },
         help: { type: 'boolean', short: 'h', default: false },
         version: { type: 'boolean', short: 'v', default: false },
@@ -76,7 +79,7 @@ else if (cmd === 'demo') {
 }
 else if (cmd === undefined) {
     const { runServer } = await import('./run.js');
-    await runServer({ port: port(7717), open: values.open, dev: values.dev, noAuth: values['no-auth'], token: values.token });
+    await runServer({ port: port(7717), open: values.open, dev: values.dev, noAuth: values['no-auth'], token: values.token, noCpuLog: values['no-cpu-log'] });
 }
 else {
     console.error(`Unknown command "${cmd}".\n\n${HELP}`);

package/dist/app/server/config.js

@@ -1,6 +1,19 @@
 import { homedir } from 'node:os';
 import { join, relative, sep } from 'node:path';
 export const CLAUDE_DIR = process.env.CLAUDE_CONFIG_DIR ?? join(homedir(), '.claude');
+/** Üblicher Ort für App-Daten je Plattform. */
+function defaultDataDir() {
+    if (process.platform === 'darwin')
+        return join(homedir(), 'Library', 'Application Support', 'claude-inspect');
+    if (process.platform === 'win32')
+        return join(process.env.LOCALAPPDATA ?? join(homedir(), 'AppData', 'Local'), 'claude-inspect');
+    return join(process.env.XDG_DATA_HOME ?? join(homedir(), '.local', 'share'), 'claude-inspect');
+}
+/**
+ * Eigenes Datenverzeichnis von claude-inspect – das einzige, in das das Tool schreibt
+ * (CPU-Messwerte). ~/.claude wird nie verändert.
+ */
+export const DATA_DIR = process.env.CLAUDE_INSPECT_DATA_DIR || defaultDataDir();
 export const paths = {
     projects: join(CLAUDE_DIR, 'projects'),
     sessions: join(CLAUDE_DIR, 'sessions'),

package/dist/app/server/cpu-monitor.js

@@ -0,0 +1,159 @@
+import { availableParallelism } from 'node:os';
+import { appendFile, mkdir, readdir, readFile, stat, unlink } from 'node:fs/promises';
+import { join } from 'node:path';
+import { DATA_DIR } from './config.js';
+import { computeUsage, cpuHistory, CSV_HEADER, parseCsv, sampleTotal, toCsv } from './model/cpu.js';
+import { readCpuTable } from './sources/cputable.js';
+/** So lange bleiben Messungen im Speicher (Verlauf ohne Aufzeichnung, Sparkline). */
+const MEMORY_MS = 60 * 60_000;
+/** Punkte der Sparkline auf dem Dashboard */
+const SPARK_POINTS = 120;
+/** Unterprozesse unter dieser Auslastung (%) landen nicht in der Datei. */
+const MIN_PCT = 1;
+/** Ruhige Phasen: höchstens alle 30 s eine Zeile, damit die Datei klein bleibt. */
+const IDLE_WRITE_MS = 30_000;
+/** Dateien, die so lange nicht mehr geschrieben wurden, werden gelöscht (wie Claude Codes eigene Aufräumfrist). */
+const RETENTION_MS = 30 * 24 * 3600_000;
+/**
+ * Misst in festen Abständen die CPU-Auslastung jedes Claude-Prozesses samt Unterprozessen.
+ * Liest die Prozesstabelle (ps bzw. /proc), schreibt nur ins eigene Datenverzeichnis.
+ */
+export class CpuMonitor {
+    opts;
+    intervalMs = process.platform === 'win32' ? 10_000 : 3_000;
+    dir = join(DATA_DIR, 'cpu');
+    cores = availableParallelism();
+    prev;
+    lastT = 0;
+    buffers = new Map();
+    writing = Promise.resolve();
+    headerDone = new Set();
+    warned = false;
+    busy = false;
+    timer;
+    cleanupTimer;
+    constructor(opts) {
+        this.opts = opts;
+    }
+    get logging() {
+        return this.opts.log;
+    }
+    start() {
+        void this.tick();
+        this.timer = setInterval(() => void this.tick(), this.intervalMs);
+        if (this.opts.log) {
+            void this.cleanup();
+            this.cleanupTimer = setInterval(() => void this.cleanup(), 6 * 3600_000);
+            this.cleanupTimer.unref();
+        }
+    }
+    stop() {
+        clearInterval(this.timer);
+        clearInterval(this.cleanupTimer);
+    }
+    async tick() {
+        if (this.busy)
+            return;
+        this.busy = true;
+        try {
+            const roots = this.opts.roots();
+            const cur = { t: Date.now(), procs: await readCpuTable() };
+            if (this.prev && cur.procs.size > 0) {
+                for (const [sessionId, procs] of computeUsage(this.prev, cur, roots))
+                    this.record(sessionId, { t: cur.t, procs });
+                this.lastT = cur.t;
+                for (const [id, b] of this.buffers)
+                    if (cur.t - b.samples[b.samples.length - 1].t > MEMORY_MS)
+                        this.buffers.delete(id);
+                this.opts.onSample(this.snapshot());
+            }
+            if (cur.procs.size > 0)
+                this.prev = cur;
+        }
+        catch {
+            /* nächste Runde */
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    record(sessionId, sample) {
+        let b = this.buffers.get(sessionId);
+        if (!b)
+            this.buffers.set(sessionId, (b = { samples: [], lastWrite: 0 }));
+        b.samples.push(sample);
+        while (b.samples.length && sample.t - b.samples[0].t > MEMORY_MS)
+            b.samples.shift();
+        if (!this.opts.log || !/^[\w-]+$/.test(sessionId))
+            return;
+        if (sampleTotal(sample) < MIN_PCT && sample.t - b.lastWrite < IDLE_WRITE_MS)
+            return;
+        b.lastWrite = sample.t;
+        // Claude-Prozess immer (markiert die Messung), Unterprozesse nur, wenn sie etwas tun
+        const rows = sample.procs.filter((p, i) => i === 0 || p.pct >= MIN_PCT);
+        const file = join(this.dir, `${sessionId}.csv`);
+        this.writing = this.writing.then(() => this.append(file, toCsv({ t: sample.t, procs: rows })));
+    }
+    async append(file, text) {
+        try {
+            if (!this.headerDone.has(file)) {
+                await mkdir(this.dir, { recursive: true });
+                try {
+                    await stat(file);
+                }
+                catch {
+                    text = CSV_HEADER + text;
+                }
+                this.headerDone.add(file);
+            }
+            await appendFile(file, text);
+        }
+        catch (e) {
+            if (!this.warned)
+                console.error(`claude-inspect: cannot write CPU log to ${this.dir}: ${e.message}`);
+            this.warned = true;
+        }
+    }
+    async cleanup() {
+        try {
+            for (const name of await readdir(this.dir)) {
+                if (!name.endsWith('.csv'))
+                    continue;
+                const file = join(this.dir, name);
+                if (Date.now() - (await stat(file)).mtimeMs > RETENTION_MS)
+                    await unlink(file);
+            }
+        }
+        catch {
+            /* Verzeichnis gibt es (noch) nicht */
+        }
+    }
+    /** Aktuelle Auslastung der Sessions, die bei der letzten Messung liefen. */
+    snapshot() {
+        const sessions = {};
+        for (const [id, b] of this.buffers) {
+            const last = b.samples[b.samples.length - 1];
+            if (last.t !== this.lastT)
+                continue;
+            sessions[id] = { pct: sampleTotal(last), spark: b.samples.slice(-SPARK_POINTS).map(sampleTotal) };
+        }
+        return { t: this.lastT, intervalMs: this.intervalMs, cores: this.cores, sessions };
+    }
+    async history(sessionId) {
+        let samples = [];
+        const file = this.opts.log && /^[\w-]+$/.test(sessionId) ? join(this.dir, `${sessionId}.csv`) : undefined;
+        if (file) {
+            try {
+                samples = parseCsv(await readFile(file, 'utf8'));
+            }
+            catch {
+                /* noch nichts aufgezeichnet */
+            }
+        }
+        // Messungen, die (noch) nicht in der Datei stehen, aus dem Speicher ergänzen
+        const lastT = samples[samples.length - 1]?.t ?? 0;
+        samples.push(...(this.buffers.get(sessionId)?.samples.filter((s) => s.t > lastT) ?? []));
+        const h = cpuHistory(samples, { intervalMs: this.intervalMs, gapMs: IDLE_WRITE_MS + 5 * this.intervalMs });
+        return { sessionId, logging: this.opts.log, file: samples.length ? file : undefined, cores: this.cores, ...h };
+    }
+}

package/dist/app/server/http.js

@@ -88,6 +88,7 @@ export function startServer(inspector, opts) {
             if (p === '/api/stream') {
                 res.writeHead(200, { 'content-type': 'text/event-stream', 'cache-control': 'no-store', connection: 'keep-alive' });
                 res.write(`event: dashboard\ndata: ${JSON.stringify(await inspector.getDashboard())}\n\n`);
+                res.write(`event: cpu\ndata: ${JSON.stringify(inspector.cpuSnapshot())}\n\n`);
                 sseClients.add(res);
                 req.on('close', () => sseClients.delete(res));
                 return;
@@ -151,6 +152,9 @@ export function startServer(inspector, opts) {
                 return json(res, 200, await inspector.fileStats({ ...filter, q: sp.get('q') || undefined }));
             if (p === '/api/search')
                 return json(res, 200, await inspector.search(sp.get('q') ?? ''));
+            m = /^\/api\/cpu\/([\w-]+)$/.exec(p);
+            if (m)
+                return json(res, 200, await inspector.cpuHistory(m[1]));
             m = /^\/api\/flow\/([\w-]+)$/.exec(p);
             if (m) {
                 const flow = await inspector.flow(m[1]);

package/dist/app/server/inspector.js

@@ -3,6 +3,7 @@ import { watch } from 'node:fs';
 import { stat } from 'node:fs/promises';
 import { basename, join } from 'node:path';
 import { CLAUDE_DIR, relToClaude } from './config.js';
+import { CpuMonitor } from './cpu-monitor.js';
 import { registry } from './formats/index.js';
 import { HistoryIndex } from './history/aggregator.js';
 import { search } from './history/search.js';
@@ -51,6 +52,16 @@ export class Inspector extends EventEmitter {
     timer;
     poller;
     building;
+    /** CPU-Auslastung je Claude-Prozess samt Unterprozessen */
+    cpu;
+    constructor(opts = {}) {
+        super();
+        this.cpu = new CpuMonitor({
+            log: opts.cpuLog ?? false,
+            roots: () => new Map(this.processes.filter((p) => p.alive && p.pid > 0).map((p) => [p.pid, p.sessionId])),
+            onSample: (data) => this.emit('event', { type: 'cpu', data }),
+        });
+    }
     async start() {
         await this.index.scan();
         await this.rebuild();
@@ -79,8 +90,10 @@ export class Inspector extends EventEmitter {
         }
         // Polling als Netz: Prozess-Liveness (kein Datei-Event beim Absturz) und verpasste Events.
         this.poller = setInterval(() => void this.poll(), 3000);
+        this.cpu.start();
     }
     stop() {
+        this.cpu.stop();
         this.watcher?.close();
         clearInterval(this.poller);
         clearTimeout(this.timer);
@@ -160,6 +173,15 @@ export class Inspector extends EventEmitter {
         })().finally(() => (this.building = undefined));
         await this.building;
     }
+    cpuSnapshot() {
+        return this.cpu.snapshot();
+    }
+    cpuHistory(sessionId) {
+        return this.cpu.history(sessionId);
+    }
+    get cpuLogDir() {
+        return this.cpu.logging ? this.cpu.dir : undefined;
+    }
     async getDashboard() {
         if (!this.dashboard)
             await this.rebuild();

package/dist/app/server/model/cpu.js

@@ -0,0 +1,155 @@
+const round1 = (n) => Math.round(n * 10) / 10;
+/**
+ * Auslastung je Claude-Prozess (`roots`: pid → sessionId) samt aller Nachfahren.
+ * Ein Nachfahre, der selbst ein Claude-Prozess ist, zählt nicht mit – er hat seine eigene Kurve.
+ * Prozesse, die es in `prev` nicht gab (oder deren PID neu vergeben wurde), sind seitdem gestartet:
+ * ihre gesamte CPU-Zeit fällt in dieses Intervall.
+ */
+export function computeUsage(prev, cur, roots) {
+    const dt = cur.t - prev.t;
+    const out = new Map();
+    if (dt <= 0)
+        return out;
+    const children = new Map();
+    for (const p of cur.procs.values()) {
+        if (p.ppid === p.pid)
+            continue;
+        const list = children.get(p.ppid);
+        if (list)
+            list.push(p.pid);
+        else
+            children.set(p.ppid, [p.pid]);
+    }
+    const pct = (p) => {
+        const before = prev.procs.get(p.pid);
+        const base = before && before.comm === p.comm && before.cpuMs <= p.cpuMs ? before.cpuMs : 0;
+        return Math.max(0, ((p.cpuMs - base) / dt) * 100);
+    };
+    for (const [rootPid, sessionId] of roots) {
+        const root = cur.procs.get(rootPid);
+        if (!root)
+            continue;
+        const rows = [];
+        const seen = new Set();
+        const queue = [rootPid];
+        while (queue.length) {
+            const pid = queue.shift();
+            if (seen.has(pid))
+                continue;
+            seen.add(pid);
+            const p = cur.procs.get(pid);
+            rows.push({ pid, ppid: p.ppid, comm: p.comm, pct: round1(pct(p)) });
+            for (const c of children.get(pid) ?? [])
+                if (!roots.has(c))
+                    queue.push(c);
+        }
+        out.set(sessionId, rows);
+    }
+    return out;
+}
+export const sampleTotal = (s) => round1(s.procs.reduce((a, p) => a + p.pct, 0));
+// --- CSV ---------------------------------------------------------------------
+export const CSV_HEADER = 'ts,pid,ppid,comm,cpu_pct\n';
+function csvField(s) {
+    return /[",\r\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+}
+export function toCsv(s) {
+    const ts = new Date(s.t).toISOString();
+    return s.procs.map((p) => `${ts},${p.pid},${p.ppid},${csvField(p.comm)},${p.pct}\n`).join('');
+}
+/** Liest die eigene CSV-Datei wieder ein; Zeilen mit gleichem Zeitstempel bilden eine Messung. */
+export function parseCsv(text) {
+    const out = [];
+    let cur;
+    for (const line of text.split('\n')) {
+        const m = /^([^,]+),(\d+),(\d+),("(?:[^"]|"")*"|[^,]*),([\d.]+)\r?$/.exec(line);
+        if (!m)
+            continue;
+        const t = Date.parse(m[1]);
+        if (Number.isNaN(t))
+            continue;
+        const comm = m[4].startsWith('"') ? m[4].slice(1, -1).replace(/""/g, '"') : m[4];
+        if (!cur || cur.t !== t) {
+            cur = { t, procs: [] };
+            out.push(cur);
+        }
+        cur.procs.push({ pid: Number(m[2]), ppid: Number(m[3]), comm, pct: Number(m[5]) });
+    }
+    return out;
+}
+/** Fasst Messungen zu höchstens `maxPoints` Zeitabschnitten zusammen, je Prozessname eine Reihe. */
+export function cpuHistory(samples, opts) {
+    const maxPoints = opts.maxPoints ?? 600;
+    const series = opts.series ?? 6;
+    const stats = new Map();
+    let peak = 0;
+    let cpuSeconds = 0;
+    for (let i = 0; i < samples.length; i++) {
+        const s = samples[i];
+        // Anteil dieser Messung an der Zeit: Abstand zur vorigen, höchstens zwei Messabstände
+        const dt = Math.min(i > 0 ? s.t - samples[i - 1].t : opts.intervalMs, 2 * opts.intervalMs) / 1000;
+        const byComm = new Map();
+        for (const p of s.procs) {
+            byComm.set(p.comm, (byComm.get(p.comm) ?? 0) + p.pct);
+            let st = stats.get(p.comm);
+            if (!st)
+                stats.set(p.comm, (st = { comm: p.comm, cpuSeconds: 0, peak: 0, pids: 0, pidSet: new Set() }));
+            st.cpuSeconds += (p.pct / 100) * dt;
+            st.pidSet.add(p.pid);
+        }
+        for (const [comm, v] of byComm)
+            stats.get(comm).peak = Math.max(stats.get(comm).peak, v);
+        const total = sampleTotal(s);
+        peak = Math.max(peak, total);
+        cpuSeconds += (total / 100) * dt;
+    }
+    const processes = [...stats.values()]
+        .map(({ pidSet, ...st }) => ({ ...st, pids: pidSet.size, cpuSeconds: round1(st.cpuSeconds), peak: round1(st.peak) }))
+        .filter((p) => p.cpuSeconds > 0)
+        .sort((a, b) => b.cpuSeconds - a.cpuSeconds);
+    const named = processes.slice(0, series).map((p) => p.comm);
+    const hasOther = processes.some((p) => p.cpuSeconds > 0 && !named.includes(p.comm));
+    const keys = hasOther ? [...named, 'other'] : named;
+    const slot = (comm) => {
+        const i = named.indexOf(comm);
+        return i >= 0 ? i : named.length;
+    };
+    const base = { keys, processes, cpuSeconds: round1(cpuSeconds), peak: round1(peak) };
+    if (samples.length === 0)
+        return { ...base, bucketMs: opts.intervalMs, points: [] };
+    const from = samples[0].t;
+    const to = samples[samples.length - 1].t;
+    const bucketMs = Math.max(opts.intervalMs, Math.ceil((to - from + 1) / maxPoints / 1000) * 1000);
+    const n = Math.floor((to - from) / bucketMs) + 1;
+    const sums = Array.from({ length: n }, () => ({ count: 0, values: new Array(keys.length).fill(0) }));
+    for (const s of samples) {
+        const b = sums[Math.floor((s.t - from) / bucketMs)];
+        b.count++;
+        for (const p of s.procs)
+            b.values[slot(p.comm)] += p.pct;
+    }
+    // Leere Abschnitte: Eine Messung gibt den Mittelwert seit der vorigen an, also gilt für den
+    // Abschnitt die nächste Messung. Bei größeren Lücken: "nicht gemessen".
+    const points = [];
+    let si = 0;
+    for (let i = 0; i < n; i++) {
+        const t = from + i * bucketMs;
+        const b = sums[i];
+        if (b.count > 0) {
+            points.push({ t, values: b.values.map((v) => round1(v / b.count)) });
+            continue;
+        }
+        while (si < samples.length - 1 && samples[si + 1].t < t)
+            si++;
+        const next = samples[si + 1];
+        if (!next || next.t - samples[si].t > opts.gapMs) {
+            points.push({ t, values: null });
+            continue;
+        }
+        const values = new Array(keys.length).fill(0);
+        for (const p of next.procs)
+            values[slot(p.comm)] += p.pct;
+        points.push({ t, values: values.map(round1) });
+    }
+    return { ...base, bucketMs, points };
+}

package/dist/app/server/run.js

@@ -20,7 +20,7 @@ function openBrowser(url) {
     execFile(bin, args, () => undefined).on('error', () => undefined);
 }
 export async function runServer(opts) {
-    const inspector = new Inspector();
+    const inspector = new Inspector({ cpuLog: !opts.noCpuLog });
     const t0 = Date.now();
     await inspector.start();
     const noAuth = !!(opts.dev || opts.noAuth);
@@ -31,6 +31,7 @@ export async function runServer(opts) {
     });
     const url = noAuth ? `http://localhost:${opts.port}/` : `http://localhost:${opts.port}/?t=${token}`;
     console.log(`claude-inspect is reading ${CLAUDE_DIR} (started in ${Date.now() - t0} ms)`);
+    console.log(inspector.cpuLogDir ? `CPU usage is recorded in ${inspector.cpuLogDir} (--no-cpu-log to turn off)` : 'CPU usage is not recorded (--no-cpu-log)');
     console.log(opts.dev ? `API (dev, no token): ${url}  –  UI: npm run dev:web` : `Dashboard: ${url}`);
     if (opts.open)
         openBrowser(url);