Claudevisual

ClaudeVisual

Introduction

Real-time visibility into Claude Code sessions,
right inside VS Code — plus in-editor editing of Claude Code's own config.

While working with Claude Code from the terminal, it's hard to see at a glance: how much
context is left, which workflow/skill/sub-agent is running, which model is active, what a
task is costing in tokens, and which permission mode you're in. ClaudeVisual surfaces all of
that live in the sidebar and status bar, without slowing Claude Code down or adding to its
token/cost overhead.

Screenshots

      Multiple concurrent sessions, each collapsed to one row (tokens, cost, context %, tok/min)

      Session expanded — vitals, Efficiency Advisor tips, agent orchestration tree, token economics, activity timeline

Installation

Install "ClaudeVisual" from the
VS Code Marketplace,
or from the Extensions view (Cmd+Shift+X) by searching "ClaudeVisual".

Still on 0.x — the settings.json safe-write path (hooks install, StatusLine wrap, config-form
writes) is unit-tested and manually walked against real sessions (see
docs/manual-live-checklist.md), but hasn't yet seen wide
multi-machine use. If it misbehaves against your settings.json shape, please
open an issue — every write goes through a
backup + atomic write-then-rename + rollback path, so worst case is an Undo, not data loss.

To build and install from source instead:

Then reload the VS Code window (Cmd+Shift+P > "Developer: Reload Window") to activate it.

See docs/deployment-guide.md for the full build/deploy workflow,
including the faster F5 Extension Development Host loop for active development.

Usage

1. Open a project you use Claude Code in.
2. The ClaudeVisual sidebar (activity bar icon) and status bar populate automatically from
   that session's JSONL transcript —…