claude_stream_viewer 1.0.16 → 1.0.18

package/src/log_viewer/log_renderer.ts

@@ -0,0 +1,160 @@
+import { colors } from '../libs/colors.js';
+import { TerminalOutput } from '../libs/terminal_output.js';
+import { ToolInputFormatter } from './tool_input_formatter.js';
+import type { ClaudeEvent, ContentBlock, ToolInput } from '../types/claude_event.js';
+
+/** Tool results longer than this many lines are truncated in the log. */
+const MAX_TOOL_RESULT_LINES = 40;
+
+/**
+ * Renders consolidated stream events to stdout as a colorized, human-readable
+ * log.
+ *
+ * Holds per-stream state (a `tool_use_id` → tool-name map used to label tool
+ * results), so a fresh instance should be created per stream.
+ */
+export class LogRenderer {
+	private toolNamesById = new Map<string, string>();
+
+	/**
+	 * Renders a single event to stdout. `stream_event` envelopes are skipped and
+	 * unrecognized event types are dumped as raw JSON under a generic header.
+	 */
+	render(event: ClaudeEvent) {
+		const type = event.type;
+		if (type === 'stream_event') return;
+		if (type === 'system') return this.renderSystem(event);
+		if (type === 'assistant') return this.renderAssistant(event);
+		if (type === 'user') return this.renderUser(event);
+		if (type === 'rate_limit_event') return this.renderRateLimit(event);
+		if (type === 'result') return this.renderResult(event);
+		this.printHeader(`${type ?? 'unknown'}`);
+		this.printJSON(event);
+	}
+
+	private printHeader(label: string) {
+		console.log(TerminalOutput.header(label));
+	}
+
+	private printJSON(obj: unknown) {
+		console.log(TerminalOutput.json(obj));
+	}
+
+	private renderSystem(event: ClaudeEvent) {
+		if (event.subtype !== 'init') {
+			this.printHeader(`SYSTEM: ${event.subtype ?? 'unknown'}`);
+			this.printJSON(event);
+			return;
+		}
+		this.printHeader('SESSION');
+		const sessionPrefix = event.session_id !== undefined ? event.session_id.slice(0, 8) : 'unknown';
+		const toolsCount = event.tools !== undefined ? event.tools.length : 0;
+		console.log(colors.system(`model: ${event.model ?? 'unknown'}`));
+		console.log(colors.system(`cwd: ${event.cwd ?? 'unknown'}`));
+		console.log(colors.system(`tools: ${toolsCount}`));
+		console.log(colors.system(`session: ${sessionPrefix}`));
+		if (event.claude_code_version !== undefined) {
+			console.log(colors.system(`claude-code: v${event.claude_code_version}`));
+		}
+	}
+
+	private renderAssistant(event: ClaudeEvent) {
+		const content = event.message?.content;
+		if (content === undefined) return;
+		for (const block of content) {
+			this.renderAssistantBlock(block);
+		}
+	}
+
+	private renderAssistantBlock(block: ContentBlock) {
+		if (block.type === 'thinking') {
+			console.log(colors.system('\n--- thinking ---'));
+			console.log(colors.thinking(block.thinking ?? ''));
+			return;
+		}
+		if (block.type === 'text') {
+			console.log(colors.text(`\n${block.text ?? ''}`));
+			return;
+		}
+		if (block.type === 'tool_use') {
+			this.renderToolUse(block);
+			return;
+		}
+		console.log(colors.system(`\n[assistant block: ${block.type ?? 'unknown'}]`));
+		this.printJSON(block);
+	}
+
+	private renderToolUse(block: ContentBlock) {
+		const name = block.name ?? 'tool';
+		if (block.id !== undefined) {
+			this.toolNamesById.set(block.id, name);
+		}
+		console.log(colors.tool(`\n→ ${name}`));
+
+		const rawInput = block.input;
+		const input: ToolInput = (rawInput !== null && typeof rawInput === 'object')
+			? rawInput as ToolInput
+			: {};
+		const bodyLines = ToolInputFormatter.format(name, input);
+		for (const line of bodyLines) {
+			console.log(`    ${line}`);
+		}
+	}
+
+	private renderUser(event: ClaudeEvent) {
+		const content = event.message?.content;
+		if (content === undefined) return;
+		for (const block of content) {
+			if (block.type === 'tool_result') {
+				this.renderToolResult(block);
+				continue;
+			}
+			console.log(colors.system(`\n[user block: ${block.type ?? 'unknown'}]`));
+			this.printJSON(block);
+		}
+	}
+
+	private renderToolResult(block: ContentBlock) {
+		const toolName = block.tool_use_id !== undefined
+			? this.toolNamesById.get(block.tool_use_id) ?? block.tool_use_id.slice(0, 12)
+			: 'unknown';
+		const isError = block.is_error === true;
+		const label = isError ? `← ${toolName} ERROR` : `← ${toolName} result`;
+		console.log(colors.tool(`\n${label}`));
+
+		const text = LogRenderer.toolResultToText(block.content);
+		const lines = text.split('\n');
+		const colorFn = isError ? colors.error : colors.text;
+		if (lines.length <= MAX_TOOL_RESULT_LINES) {
+			console.log(colorFn(text));
+			return;
+		}
+		const head = lines.slice(0, MAX_TOOL_RESULT_LINES).join('\n');
+		const moreCount = lines.length - MAX_TOOL_RESULT_LINES;
+		console.log(colorFn(head));
+		console.log(colors.system(`… (truncated, ${moreCount} more lines)`));
+	}
+
+	private static toolResultToText(content: ContentBlock['content']): string {
+		if (content === undefined) return '';
+		if (typeof content === 'string') return content;
+		return content.map((b) => b.text ?? '').join('');
+	}
+
+	private renderRateLimit(event: ClaudeEvent) {
+		const status = event.rate_limit_info?.status ?? 'unknown';
+		console.log(colors.system(`\n[rate_limit] ${status}`));
+	}
+
+	private renderResult(event: ClaudeEvent) {
+		this.printHeader('RESULT');
+		if (event.terminal_reason !== undefined) console.log(colors.system(`terminal_reason: ${event.terminal_reason}`));
+		if (event.stop_reason !== undefined) console.log(colors.system(`stop_reason: ${event.stop_reason}`));
+		if (event.is_error === true) console.log(colors.error('is_error: true'));
+		const denials = event.permission_denials;
+		if (denials !== undefined && denials.length > 0) console.log(colors.system(`permission_denials: ${denials.length}`));
+		if (event.num_turns !== undefined) console.log(colors.system(`turns: ${event.num_turns}`));
+		if (event.duration_ms !== undefined) console.log(colors.system(`duration: ${(event.duration_ms / 1000).toFixed(2)}s`));
+		if (event.total_cost_usd !== undefined) console.log(colors.system(`cost: $${event.total_cost_usd.toFixed(4)}`));
+	}
+}

package/src/log_viewer/tool_input_formatter.ts

@@ -0,0 +1,183 @@
+import { colors } from '../libs/colors.js';
+import type { ToolInput } from '../types/claude_event.js';
+
+/**
+ * Renders a `tool_use` block's input into compact, human-readable lines — one
+ * dedicated formatter per known tool (Bash, Read, Grep, …).
+ */
+export class ToolInputFormatter {
+	/**
+	 * Formats a tool's input into display lines, dispatched by tool name.
+	 * Unrecognized tools fall back to a pretty-printed JSON dump.
+	 *
+	 * @param name  Tool name from the `tool_use` block.
+	 * @param input Raw tool input object.
+	 * @returns Colorized lines to print beneath the tool header.
+	 */
+	static format(name: string, input: ToolInput): string[] {
+		if (name === 'Bash') return ToolInputFormatter.formatBashInput(input);
+		if (name === 'Read') return ToolInputFormatter.formatReadInput(input);
+		if (name === 'Write') return ToolInputFormatter.formatWriteInput(input);
+		if (name === 'Edit') return ToolInputFormatter.formatEditInput(input);
+		if (name === 'Grep') return ToolInputFormatter.formatGrepInput(input);
+		if (name === 'Glob') return ToolInputFormatter.formatGlobInput(input);
+		if (name === 'TodoWrite') return ToolInputFormatter.formatTodoWriteInput(input);
+		if (name === 'WebFetch') return ToolInputFormatter.formatWebFetchInput(input);
+		if (name === 'WebSearch') return ToolInputFormatter.formatWebSearchInput(input);
+		if (name === 'Task' || name === 'Agent') return ToolInputFormatter.formatTaskInput(input);
+		return ToolInputFormatter.formatFallbackInput(input);
+	}
+
+	private static formatBashInput(input: ToolInput): string[] {
+		const command = ToolInputFormatter.readString(input, 'command') ?? '';
+		const description = ToolInputFormatter.readString(input, 'description');
+		const lines: string[] = [];
+		const cmdLines = command.split('\n');
+		lines.push(colors.text(`$ ${cmdLines[0] ?? ''}`));
+		for (let i = 1; i < cmdLines.length; i++) {
+			lines.push(colors.text(cmdLines[i]));
+		}
+		if (description !== undefined) {
+			lines.push(colors.system(`# ${description}`));
+		}
+		return lines;
+	}
+
+	private static formatReadInput(input: ToolInput): string[] {
+		const filePath = ToolInputFormatter.readString(input, 'file_path') ?? '';
+		const offset = ToolInputFormatter.readNumber(input, 'offset');
+		const limit = ToolInputFormatter.readNumber(input, 'limit');
+		let suffix = '';
+		if (offset !== undefined && limit !== undefined) {
+			suffix = `:${offset}-${offset + limit - 1}`;
+		} else if (offset !== undefined) {
+			suffix = `:${offset}+`;
+		}
+		return [colors.text(`${filePath}${suffix}`)];
+	}
+
+	private static formatWriteInput(input: ToolInput): string[] {
+		const filePath = ToolInputFormatter.readString(input, 'file_path') ?? '';
+		return [colors.text(filePath)];
+	}
+
+	private static formatEditInput(input: ToolInput): string[] {
+		const filePath = ToolInputFormatter.readString(input, 'file_path') ?? '';
+		const lines = [colors.text(filePath)];
+		if (ToolInputFormatter.readBoolean(input, 'replace_all') === true) {
+			lines.push(colors.system('replace_all=true'));
+		}
+		return lines;
+	}
+
+	private static formatGrepInput(input: ToolInput): string[] {
+		const pattern = ToolInputFormatter.readString(input, 'pattern') ?? '';
+		const path = ToolInputFormatter.readString(input, 'path');
+		const head = path !== undefined ? `"${pattern}" in ${path}` : `"${pattern}"`;
+		const flags: string[] = [];
+		const outputMode = ToolInputFormatter.readString(input, 'output_mode');
+		if (outputMode !== undefined) flags.push(`output_mode=${outputMode}`);
+		if (ToolInputFormatter.readBoolean(input, '-n') === true) flags.push('-n');
+		if (ToolInputFormatter.readBoolean(input, '-i') === true) flags.push('-i');
+		const headLimit = ToolInputFormatter.readNumber(input, 'head_limit');
+		if (headLimit !== undefined) flags.push(`head_limit=${headLimit}`);
+		const glob = ToolInputFormatter.readString(input, 'glob');
+		if (glob !== undefined) flags.push(`glob=${glob}`);
+		const fileType = ToolInputFormatter.readString(input, 'type');
+		if (fileType !== undefined) flags.push(`type=${fileType}`);
+		if (flags.length === 0) {
+			return [colors.text(head)];
+		}
+		return [`${colors.text(head)} ${colors.system(`(${flags.join(', ')})`)}`];
+	}
+
+	private static formatGlobInput(input: ToolInput): string[] {
+		const pattern = ToolInputFormatter.readString(input, 'pattern') ?? '';
+		const path = ToolInputFormatter.readString(input, 'path');
+		const text = path !== undefined ? `${pattern} in ${path}` : pattern;
+		return [colors.text(text)];
+	}
+
+	private static formatTodoWriteInput(input: ToolInput): string[] {
+		const todos = input['todos'];
+		if (Array.isArray(todos) === false) {
+			return [colors.system('(no todos)')];
+		}
+		return todos.map((todo) => {
+			if (typeof todo !== 'object' || todo === null) {
+				return colors.text(String(todo));
+			}
+			const t = todo as Record<string, unknown>;
+			const status = typeof t['status'] === 'string' ? t['status'] : '?';
+			const content = typeof t['content'] === 'string' ? t['content'] : '';
+			let mark = '?';
+			if (status === 'pending') mark = ' ';
+			else if (status === 'in_progress') mark = '~';
+			else if (status === 'completed') mark = 'x';
+			return colors.text(`[${mark}] ${content}`);
+		});
+	}
+
+	private static formatWebFetchInput(input: ToolInput): string[] {
+		const url = ToolInputFormatter.readString(input, 'url') ?? '';
+		const prompt = ToolInputFormatter.readString(input, 'prompt');
+		const lines = [colors.text(url)];
+		if (prompt !== undefined) {
+			lines.push(colors.system(`prompt: ${prompt}`));
+		}
+		return lines;
+	}
+
+	private static formatWebSearchInput(input: ToolInput): string[] {
+		const query = ToolInputFormatter.readString(input, 'query') ?? '';
+		const flags: string[] = [];
+		const allowed = input['allowed_domains'];
+		if (Array.isArray(allowed) && allowed.length > 0) {
+			flags.push(`allowed_domains=[${allowed.map((d) => String(d)).join(', ')}]`);
+		}
+		const blocked = input['blocked_domains'];
+		if (Array.isArray(blocked) && blocked.length > 0) {
+			flags.push(`blocked_domains=[${blocked.map((d) => String(d)).join(', ')}]`);
+		}
+		const head = colors.text(`"${query}"`);
+		if (flags.length === 0) return [head];
+		return [`${head} ${colors.system(`(${flags.join(', ')})`)}`];
+	}
+
+	private static formatTaskInput(input: ToolInput): string[] {
+		const description = ToolInputFormatter.readString(input, 'description') ?? '';
+		const subagentType = ToolInputFormatter.readString(input, 'subagent_type') ?? 'agent';
+		const prompt = ToolInputFormatter.readString(input, 'prompt');
+		const lines = [colors.text(`[${subagentType}] ${description}`)];
+		if (prompt !== undefined) {
+			const PROMPT_PREVIEW_LIMIT = 200;
+			if (prompt.length <= PROMPT_PREVIEW_LIMIT) {
+				lines.push(colors.system(`prompt: ${prompt}`));
+			} else {
+				const head = prompt.slice(0, PROMPT_PREVIEW_LIMIT);
+				lines.push(colors.system(`prompt: ${head}… (${prompt.length} chars)`));
+			}
+		}
+		return lines;
+	}
+
+	private static formatFallbackInput(input: ToolInput): string[] {
+		const json = JSON.stringify(input, null, 2);
+		return json.split('\n').map((line) => colors.json(line));
+	}
+
+	private static readString(input: ToolInput, key: string): string | undefined {
+		const value = input[key];
+		return typeof value === 'string' ? value : undefined;
+	}
+
+	private static readNumber(input: ToolInput, key: string): number | undefined {
+		const value = input[key];
+		return typeof value === 'number' ? value : undefined;
+	}
+
+	private static readBoolean(input: ToolInput, key: string): boolean | undefined {
+		const value = input[key];
+		return typeof value === 'boolean' ? value : undefined;
+	}
+}

package/src/stats/stats_collector.ts

@@ -0,0 +1,175 @@
+import type { ClaudeEvent, ModelUsage } from '../types/claude_event.js';
+import type { ModelTokens, StatsReport } from '../types/stats_report.js';
+
+/**
+ * Accumulates per-stream statistics — tool-call counts, tool-result errors, and
+ * peak prompt size — and captures the `result` event, then assembles a
+ * {@link StatsReport}. A fresh instance should be created per stream.
+ */
+export class StatsCollector {
+	private toolUseCounts = new Map<string, number>();
+	private toolResultCount = 0;
+	private toolResultErrorCount = 0;
+	private peakPromptTokens = 0;
+	private resultEvent: ClaudeEvent | undefined;
+
+	/** Feeds one event into the accumulators; call for every event in the stream. */
+	track(event: ClaudeEvent) {
+		const type = event.type;
+		if (type === 'assistant') {
+			this.trackPromptSize(event);
+			this.trackToolUses(event);
+			return;
+		}
+		if (type === 'user') {
+			this.trackToolResults(event);
+			return;
+		}
+		if (type === 'result') {
+			this.resultEvent = event;
+		}
+	}
+
+	private trackPromptSize(event: ClaudeEvent) {
+		const usage = event.message?.usage;
+		if (usage === undefined) return;
+		const prompt = (usage.input_tokens ?? 0) + (usage.cache_read_input_tokens ?? 0) + (usage.cache_creation_input_tokens ?? 0);
+		if (prompt > this.peakPromptTokens) {
+			this.peakPromptTokens = prompt;
+		}
+	}
+
+	private trackToolUses(event: ClaudeEvent) {
+		const content = event.message?.content;
+		if (content === undefined) return;
+		for (const block of content) {
+			if (block.type !== 'tool_use') {
+				continue;
+			}
+			const name = block.name ?? 'tool';
+			this.toolUseCounts.set(name, (this.toolUseCounts.get(name) ?? 0) + 1);
+		}
+	}
+
+	private trackToolResults(event: ClaudeEvent) {
+		const content = event.message?.content;
+		if (content === undefined) return;
+		for (const block of content) {
+			if (block.type !== 'tool_result') {
+				continue;
+			}
+			this.toolResultCount += 1;
+			if (block.is_error === true) {
+				this.toolResultErrorCount += 1;
+			}
+		}
+	}
+
+	/**
+	 * Builds the final {@link StatsReport} from the captured `result` event and
+	 * the tracked accumulators. Call once, after the stream closes.
+	 */
+	buildReport(): StatsReport {
+		const event = this.resultEvent;
+		const usage = event?.usage;
+
+		const result = {
+			terminalReason: event?.terminal_reason,
+			stopReason: event?.stop_reason,
+			isError: event?.is_error === true,
+			numTurns: event?.num_turns,
+			permissionDenials: event?.permission_denials?.length ?? 0,
+			durationMs: event?.duration_ms,
+			totalCostUsd: event?.total_cost_usd,
+		};
+
+		let latency: StatsReport['latency'];
+		if (event?.duration_ms !== undefined) {
+			const wallMs = event.duration_ms;
+			const apiMs = event.duration_api_ms;
+			const localMs = apiMs !== undefined ? Math.max(0, wallMs - apiMs) : undefined;
+			const output = usage?.output_tokens;
+			const throughputTokPerS = (apiMs !== undefined && apiMs > 0 && output !== undefined && output > 0)
+				? Math.round(output / (apiMs / 1000))
+				: undefined;
+			latency = { wallMs, apiMs, localMs, throughputTokPerS };
+		}
+
+		let tokens: StatsReport['tokens'];
+		if (usage !== undefined) {
+			const input = usage.input_tokens ?? 0;
+			const output = usage.output_tokens ?? 0;
+			const cacheRead = usage.cache_read_input_tokens ?? 0;
+			const cacheCreate = usage.cache_creation_input_tokens ?? 0;
+			const total = input + output + cacheRead + cacheCreate;
+			const promptTotal = input + cacheRead + cacheCreate;
+			const cacheHitPct = promptTotal > 0 ? StatsCollector.round1((cacheRead / promptTotal) * 100) : 0;
+			tokens = {
+				input,
+				output,
+				cacheRead,
+				cacheCreate,
+				total,
+				cacheHitPct,
+				byModel: StatsCollector.buildByModel(event?.modelUsage),
+			};
+		}
+
+		const contextWindow = StatsCollector.maxContextWindow(event?.modelUsage);
+		const context = {
+			peakPromptTokens: this.peakPromptTokens,
+			contextWindow: contextWindow > 0 ? contextWindow : undefined,
+			peakPct: contextWindow > 0 ? StatsCollector.round1((this.peakPromptTokens / contextWindow) * 100) : undefined,
+		};
+
+		const byTool = [...this.toolUseCounts.entries()]
+			.sort((a, b) => b[1] - a[1])
+			.map(([name, count]) => ({ name, count }));
+		const totalCalls = byTool.reduce((sum, entry) => sum + entry.count, 0);
+		const errorPct = this.toolResultCount > 0 ? StatsCollector.round1((this.toolResultErrorCount / this.toolResultCount) * 100) : 0;
+		const tools = {
+			totalCalls,
+			byTool,
+			resultCount: this.toolResultCount,
+			errorCount: this.toolResultErrorCount,
+			errorPct,
+		};
+
+		return {
+			truncated: this.resultEvent === undefined,
+			result,
+			latency,
+			tokens,
+			context,
+			tools,
+		};
+	}
+
+	private static buildByModel(modelUsage: Record<string, ModelUsage> | undefined): ModelTokens[] {
+		if (modelUsage === undefined) return [];
+		return Object.entries(modelUsage).map(([model, usage]) => ({
+			model,
+			input: usage.inputTokens ?? 0,
+			output: usage.outputTokens ?? 0,
+			cacheRead: usage.cacheReadInputTokens ?? 0,
+			cacheCreate: usage.cacheCreationInputTokens ?? 0,
+			costUsd: usage.costUSD,
+		}));
+	}
+
+	private static maxContextWindow(modelUsage: Record<string, ModelUsage> | undefined): number {
+		if (modelUsage === undefined) return 0;
+		let max = 0;
+		for (const usage of Object.values(modelUsage)) {
+			const contextWindow = usage.contextWindow ?? 0;
+			if (contextWindow > max) {
+				max = contextWindow;
+			}
+		}
+		return max;
+	}
+
+	private static round1(value: number): number {
+		return Math.round(value * 10) / 10;
+	}
+}