展示HN:我构建了一个工具来解析Claude Code的CLI输出(本地日志查看器)
Show HN: I built a tool to un-dumb Claude Code's CLI output (Local Log Viewer)

原始链接: https://github.com/matt1398/claude-devtools

## claude-devtools:揭示Claude Code的内部运作 claude-devtools 是一款免费、开源的桌面应用程序,旨在提供对 Claude Code 执行过程的全面可见性。它不同于终端冗长的输出或 Claude Code 本身简化的摘要,而是从现有的会话日志 (~/.claude/) 中重建每一个步骤——文件路径、工具调用、token 使用量。 该应用程序提供了一个可视化界面来调试会话,理解上下文使用情况(包括压缩可视化),并监控关键事件,例如访问敏感文件 (.env) 或通过可定制的通知监控高 token 消耗。它擅长梳理涉及子代理和团队的复杂交互,展示它们的执行流程和贡献。 与改变 Claude Code 行为的 GUI 包装器不同,claude-devtools *读取* 日志,与在终端、IDE 或其他工具中启动的会话无缝协作。它具有跨会话搜索的命令面板,通过 SSH 进行远程会话检查,并支持 Docker/独立部署以增强安全性和隔离性。它适用于 macOS、Windows、Linux,以及 Docker。

## Claude 代码 CLI 可见性工具 一名开发者创建了本地 Electron 应用 `claude-devtools`,以改善 Claude 代码 CLI 的可观察性。CLI 的近期更新用摘要掩盖了详细输出,迫使用户依赖冗长的 JSON 日志或缺乏关键信息。 `claude-devtools` 通过解析 `~/.claude/` 中的日志,提供实时、无干扰的执行跟踪来解决这个问题。主要功能包括编辑文件的内联差异、token 使用情况的细分(文件读取 vs. 工具输出 vs. 推理),以及代理执行路径的可视化。 该工具完全在本地运行,无需 API 密钥,并且可以处理现有日志。虽然 Claude CLI *确实* 提供了 `/usage` 和 `/status` 命令来获取 token 数量,但 `claude-devtools` 提供了更细粒度的上下文使用数据——但它*不*显示计费/账户余额信息,这些信息仍然只能通过 Web 控制面板访问。一些评论者建议使用 Opencode 和 Pi 代码代理等替代方案。
相关文章

原文

claude-devtools

claude-devtools - See everything Claude Code hides from your terminal | Product Hunt

Terminal tells you nothing. This shows you everything.
A desktop app that reconstructs exactly what Claude Code did — every file path, every tool call, every token — from the raw session logs already on your machine.

Website  Latest Release  CI Status  Downloads  Platform

Website    Download for macOS    Download for Linux    Download for Windows    Deploy with Docker

100% free, open source. No API keys. No configuration. Just download, open, and see everything Claude Code did.


demo.mp4

Platform Download Notes
macOS (Apple Silicon) .dmg Download the arm64 asset. Drag to Applications. On first launch: right-click → Open
macOS (Intel) .dmg Download the x64 asset. Drag to Applications. On first launch: right-click → Open
Linux .AppImage / .deb / .rpm / .pacman Choose the package format for your distro (portable AppImage or native package manager format).
Windows .exe Standard installer. May trigger SmartScreen — click "More info" → "Run anyway"
Docker docker compose up Open http://localhost:3456. See Docker / Standalone Deployment for details.

The app reads session logs from ~/.claude/ — the data is already on your machine. No setup, no API keys, no login.


Claude Code stopped telling you what it's doing.

Recent Claude Code updates replaced detailed tool output with opaque summaries. Read 3 files. Searched for 1 pattern. Edited 2 files. No paths, no content, no line numbers. The context usage indicator became a three-segment progress bar with no breakdown. To get the details back, the only option is --verbose — which dumps raw JSON, internal system prompts, and thousands of lines of noise into your terminal.

There is no middle ground in the CLI. You either see too little or too much.

claude-devtools restores the information that was taken away — structured, searchable, and without a single modification to Claude Code itself. It reads the raw session logs from ~/.claude/ and reconstructs the full execution trace: every file path that was read, every regex that was searched, every diff that was applied, every token that was consumed — organized into a visual interface you can actually reason about.

There are many GUI wrappers for Claude Code — Conductor, Craft Agents, Vibe Kanban, 1Code, ccswitch, and others. I tried them all. None of them solved the actual problem:

They wrap Claude Code. They inject their own prompts, add their own abstractions, and change how Claude behaves. If you love the terminal — and I do — you don't want that. You want Claude Code exactly as it is.

They only show their own sessions. Run something in the terminal? It doesn't exist in their UI. You can only see what was executed through their tool. The terminal and the GUI are two separate worlds.

You can't debug what went wrong. A session failed — but why? The context filled up too fast — but what consumed it? A subagent spawned 5 child agents — but what did they do? Even in the terminal, scrolling back through a long session to reconstruct what happened is nearly impossible.

You can't monitor what matters. Want to know when Claude reads .env? When a single tool call exceeds 4K tokens of context? When a teammate sends a shutdown request? You'd have to wire up hooks manually, every time, for every project.

claude-devtools takes a different approach. It doesn't wrap or modify Claude Code at all. It reads the session logs that already exist on your machine (~/.claude/) and turns them into a rich, interactive interface — regardless of whether the session ran in the terminal, in an IDE, or through another tool.

Zero configuration. No API keys. Works with every session you've ever run.


🔍 Visible Context Reconstruction

context

Claude Code doesn't expose what's actually in the context window. claude-devtools reverse-engineers it.

The engine walks each turn of the session and reconstructs the full set of context injections — CLAUDE.md files (broken down by global, project, and directory-level), skill activations, @-mentioned files, tool call inputs and outputs, extended thinking, team coordination overhead, and user prompt text.

The result is a per-turn breakdown of estimated token attribution across 7 categories, surfaced in three places: a Context Badge on each assistant response, a Token Usage popover with percentage breakdowns, and a dedicated Session Context Panel.

📉 Compaction Visualization

compact.mp4

See the moment your context hits the limit.

When Claude Code hits its context limit, it silently compresses your conversation and continues. Most tools don't even notice this happened.

claude-devtools detects these compaction boundaries, measures the token delta before and after, and visualizes how your context fills, compresses, and refills over the course of a session. You can see exactly what was in the window at any point, and how the composition shifted after each compaction event.

🔔 Custom Notification Triggers

noti.mp4

Define rules for when you want to receive system notifications. Match on regex patterns, assign colors, and filter your inbox by trigger.

  • Built-in defaults: .env File Access Alert, Tool Result Error (is_error: true), and High Token Usage (default: 8,000 total tokens).
  • Custom matching: use regex against specific fields like file_path, command, prompt, content, thinking, or text.
  • Sensitive-file monitoring: create alerts for .env, secrets, payment/billing/stripe paths, or any project-specific pattern.
  • Noise control: choose input/output/total token thresholds, add ignore patterns, and scope triggers to selected repositories.

🛠️ Rich Tool Call Inspector

Every tool call is paired with its result in an expandable card. Specialized viewers render each tool natively:

  • Read calls show syntax-highlighted code with line numbers
  • Edit calls show inline diffs with added/removed highlighting
  • Bash calls show command output
  • Subagent calls show the full execution tree, expandable in-place

👥 Team & Subagent Visualization

Claude Code now spawns subagents via the Task tool and coordinates entire teams via TeamCreate, SendMessage, and TaskUpdate. In the terminal, all of this collapses into an unreadable stream. claude-devtools untangles it.

  • Subagent sessions are resolved from Task tool calls and rendered as expandable inline cards — each with its own tool trace, token metrics, duration, and cost. Nested subagents (agents spawning agents) render as a recursive tree.
  • Teammate messages — sent via SendMessage with color and summary metadata — are detected and rendered as distinct color-coded cards, separated from regular user messages. Each teammate is identified by name and assigned color.
  • Team lifecycle is fully visible: TeamCreate initialization, TaskCreate/TaskUpdate coordination, SendMessage direct messages and broadcasts, shutdown requests and responses, and TeamDelete teardown.
  • Session summary shows distinct teammate count separately from subagent count, so you can tell at a glance how many agents participated and how work was distributed.

⚡ Command Palette & Cross-Session Search

Hit Cmd+K for a Spotlight-style command palette. Search across all sessions in a project — results show context snippets with highlighted keywords. Navigate directly to the exact message.

Connect to any remote machine over SSH and inspect Claude Code sessions running there — same interface, no compromise.

claude-devtools parses your ~/.ssh/config for host aliases, supports agent forwarding, private keys, and password auth, then opens an SFTP channel to stream session logs from the remote ~/.claude/ directory. Each SSH host gets its own isolated service context with independent caches, file watchers, and parsers. Switching between local and remote workspaces is instant — the app snapshots your current state to IndexedDB before the switch and restores it when you return, tabs and all.

Open multiple sessions side-by-side. Drag-and-drop tabs between panes, split views, and compare sessions in parallel — like a proper IDE for your AI conversations.

🛠️ Rich Tool Call Inspector

Every tool call is paired with its result in an expandable card. Specialized viewers render each tool natively:

  • Read calls show syntax-highlighted code with line numbers
  • Edit calls show inline diffs with added/removed highlighting
  • Bash calls show command output
  • Subagent calls show the full execution tree, expandable in-place

What the CLI Hides vs. What claude-devtools Shows

What you see in the terminal What claude-devtools shows you
Read 3 files Exact file paths, syntax-highlighted content with line numbers
Searched for 1 pattern The regex pattern, every matching file, and the matched lines
Edited 2 files Inline diffs with added/removed highlighting per file
A three-segment context bar Per-turn token attribution across 7 categories — CLAUDE.md breakdown, skills, @-mentions, tool I/O, thinking, teams, user text — with compaction visualization showing how context fills, compresses, and refills
Subagent output interleaved with the main thread Isolated execution trees per agent, expandable inline with their own metrics
Teammate messages buried in session logs Color-coded teammate cards with name, message, and full team lifecycle visibility
Critical events mixed into normal output Trigger-filtered notification inbox for .env access, payment-related file paths, execution errors, and high token usage
--verbose JSON dump Structured, filterable, navigable interface — no noise

Docker / Standalone Deployment

Run claude-devtools without Electron — in Docker, on a remote server, or anywhere Node.js runs.

Quick Start (Docker Compose)

Open http://localhost:3456 in your browser.

docker build -t claude-devtools .
docker run -p 3456:3456 -v ~/.claude:/data/.claude:ro claude-devtools
pnpm install
pnpm standalone:build
node dist-standalone/index.cjs
Variable Default Description
CLAUDE_ROOT ~/.claude Path to the .claude data directory
HOST 0.0.0.0 Bind address
PORT 3456 Listen port
CORS_ORIGIN * (standalone) CORS origin policy (*, specific origin, or comma-separated list)
  • Real-time updates may be slower than Electron. The Electron app uses native file system watchers with IPC for instant updates. The Docker/standalone server uses SSE (Server-Sent Events) over HTTP, which may introduce slight delays when sessions are actively being written to.
  • Custom Claude root path. If your .claude directory is not at ~/.claude, update the volume mount to point to the correct location:
    # Example: Claude root at /home/user/custom-claude-dir
    docker run -p 3456:3456 -v /home/user/custom-claude-dir:/data/.claude:ro claude-devtools
    
    # Or with docker compose, set the CLAUDE_DIR env variable:
    CLAUDE_DIR=/home/user/custom-claude-dir docker compose up

Security-Focused Deployment

The standalone server has zero outbound network calls. For maximum isolation:

docker run --network none -p 3456:3456 -v ~/.claude:/data/.claude:ro claude-devtools

See SECURITY.md for a full audit of network activity.


Build from source

Prerequisites: Node.js 20+, pnpm 10+

git clone https://github.com/matt1398/claude-devtools.git
cd claude-devtools
pnpm install
pnpm dev

The app auto-discovers your Claude Code projects from ~/.claude/.

pnpm dist:mac:arm64  # macOS Apple Silicon (.dmg)
pnpm dist:mac:x64    # macOS Intel (.dmg)
pnpm dist:win        # Windows (.exe)
pnpm dist:linux      # Linux (AppImage/.deb/.rpm/.pacman)
pnpm dist            # macOS + Windows + Linux
Command Description
pnpm dev Development with hot reload
pnpm build Production build
pnpm typecheck TypeScript type checking
pnpm lint:fix Lint and auto-fix
pnpm test Run all tests
pnpm test:watch Watch mode
pnpm test:coverage Coverage report
pnpm check Full quality gate (types + lint + test + build)

See CONTRIBUTING.md for development guidelines. Please read our Code of Conduct.

IPC handlers validate all inputs with strict path containment checks. File reads are constrained to the project root and ~/.claude. Sensitive credential paths are blocked. See SECURITY.md for details.

MIT

联系我们 contact @ memedata.com