Claude Code Beautify

A richer VS Code interface for the Claude Code CLI — the real claude process, wrapped in a real UI.

This isn't a reimplementation of Claude Code — it's a genuine UI wrapped around the real claude CLI, talking to it over its own stream-json protocol. Every feature here (diffs, permissions, sessions, the agent tree) is backed by the actual CLI process running on your machine, not a separate reimplementation of its behavior.

Status: early / pre-release. Actively developed, not yet on the Marketplace — install from source for now (see below).

Why

The official Claude Code experience lives in a terminal or a fairly bare panel. This wraps the same real CLI in something closer to what an editor-native AI tool should feel like: inline diffs you can review and accept, a real permission flow, session history that survives restarts, one-click file rewinds, and — the actual differentiator — a live tree showing every subagent Claude spawns while it works, not just a wall of text.

Features

Core chat

• Streaming responses with markdown, syntax highlighting, and thinking indicators
• Inline diff cards for Edit/Write/MultiEdit/NotebookEdit calls — Accept/Reject wired to the CLI's real permission protocol, plus a button to open the change in VS Code's native diff editor
• Permission prompts (Yes / Yes, don't ask again / No / tell Claude instead) with pattern-based "always allow"
• Manual / Plan / Auto-edits mode, model picker, and reasoning-effort control — all live-switchable mid-session, mapped to the real CLI flags and control requests
• Cost and token accounting sourced from the CLI's own numbers, plus a context-window usage breakdown
• / slash-command menu and @-file mentions (respects .gitignore)
• Image attachments — paste, drag-drop, or file picker, with thumbnails and a lightbox preview

Sessions & tabs

• Conversations persist across panel close and VS Code restarts — reads and writes the CLI's own on-disk session storage directly, never a separate copy
• A searchable session history panel, grouped by Today / Yesterday / Last 7 days / Older, listing every conversation for the workspace — including ones started from a plain claude terminal
• Real VS Code editor tabs for multiple concurrent conversations, with status dots for permission-pending or finished-while-hidden
• Rename or remove conversations from the picker without touching the underlying transcript
• Every reply shows which model answered, its cost, and its token count — real numbers live, a clearly-marked estimate on replayed history

Checkpoints & rewind

• Every message gets a checkpoint via the CLI's own native file-checkpointing (not git-based) — a rewind icon reverts your files to right before that point, with the conversation itself left untouched
• A confirmation step before rewinding, since it's a real, hard-to-undo-looking action

Live multi-agent view

• A genuinely recursive tree showing every subagent Claude spawns mid-task, built from the real protocol's parent_tool_use_id — not simulated
• Each node shows its own live status, branches collapse and expand independently, and one click opens that agent's full transcript in a real editor tab
• Reopening a past conversation reconstructs the same nested tree from disk, not just each branch's final state

Session info

• One click, right next to Send, shows every file the current session touched and every skill, agent, MCP server, or tool it used
• The same view is available for any past session from the history panel, without resuming it
• Click a file to open it directly in the editor

Settings

• A native VS Code settings page: default model, default permission mode, default reasoning effort, and a CLI executable-path override for installs that aren't on PATH

Design

• Follows your actual VS Code theme automatically — light or dark, whatever you're running, no separate toggle to manage
• A custom teal-accented visual identity and a real SVG icon set throughout, no emoji

Requirements

• Claude Code CLI installed and authenticated (claude auth login). This extension never reads or handles your credentials directly — all auth goes through the CLI.
• VS Code ^1.94.0 or later.

Installing (from source — not yet on the Marketplace)

git clone https://github.com/iam-joey/claude-code-vs-code-extension.git
cd claude-code-vs-code-extension
npm install
npm run build

Then open the folder in VS Code and press F5 to launch an Extension Development Host with the extension loaded.

Development

npm run watch       # esbuild in watch mode (both the extension host and webview bundles)
npm run typecheck   # tsc --noEmit
npm run lint         # eslint
npm run format      # prettier

Host-side changes (src/extension.ts, src/claude/**) need a full restart of the Extension Development Host (stop and re-F5) to take effect — a window reload alone re-loads whatever's already built in dist/, it doesn't rebuild it. Webview-side changes generally pick up on a window reload once npm run watch has rebuilt dist/webview.js.

How it works, briefly

The extension host spawns claude --output-format stream-json --input-format stream-json --verbose --permission-prompt-tool stdio and speaks its line-delimited JSON protocol directly — parsing assistant/tool/result events, answering permission control_requests, and forwarding typed messages to a Svelte webview that renders the actual UI. Nothing about the CLI's behavior is reimplemented or guessed at; where the protocol wasn't documented, it was captured from the real CLI and verified against it directly.

Contributing

Issues and PRs are welcome. There's no test suite yet — the bar for a change is npm run typecheck && npm run lint passing and a manual pass in the Extension Development Host. implementation-phases.md has the full build history if you want the reasoning behind how something works, not just what it does.

Roadmap

• Package and publish to the VS Code Marketplace (currently install-from-source only)
• CI on GitHub Actions — lint/build/typecheck on every PR
• A diagnostics feed — surface VS Code's own Problems panel to Claude automatically
• A hooks panel — visual list of PreToolUse/PostToolUse hooks with enable/disable toggles
• A real CLAUDE.md / memory editor, read/edit/save inline instead of round-tripping through the terminal

See implementation-phases.md for the full build history and reasoning behind what's already shipped.

License

MIT — see LICENSE.