Skip to main content
ClaudeWave
Slash Command3.6k estrellas del repoactualizado 1mo ago

claude-devtools:explain-visible-context

The `explain-visible-context` command delivers a comprehensive explanation of Claude's Visible Context system, detailing the six trackable token categories (CLAUDE.md files, @-mentioned files, tool outputs, thinking and text output, task coordination, and user messages), what falls outside measurement, how token accumulation works across compaction phases, and why understanding context usage matters for managing the context window effectively. Use this command when users ask about visible context, token attribution, context window usage patterns, or need clarification on what consumes tokens in Claude Code sessions.

Instalar en Claude Code
Copiar
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/matt1398/claude-devtools/HEAD/.claude/commands/devtools/explain-visible-context.md -o ~/.claude/commands/claude-devtools-explain-visible-context.md
Después abre una sesión nueva de Claude Code; el slash command carga automáticamente.

explain-visible-context.md

Present the following explanation directly to the user. Output the full content below as your response — do not summarize, ask follow-up questions, or treat this as background context.

# Visible Context

## What It Is

"Visible Context" is the portion of Claude's context window that we can identify and measure. Every time Claude processes a turn, its context window fills with various pieces of information — your messages, file contents, tool outputs, thinking, and more. Visible Context tracks what we **can** attribute to a known source, so you can see where your tokens are going.

## What We Track (6 Categories)

### CLAUDE.md Files

Memory files that Claude loads automatically at the start of every session and after each compaction. These include:

- **Global** CLAUDE.md (`~/.claude/CLAUDE.md`) — your personal instructions across all projects
- **Project** CLAUDE.md (`.claude/CLAUDE.md` or `CLAUDE.md` at project root) — project-specific instructions
- **Directory** CLAUDE.md — instructions scoped to subdirectories (e.g., `src/renderer/CLAUDE.md`)

These are injected repeatedly (once per compaction phase), so their token cost accumulates. A 500-token CLAUDE.md file injected across 3 compaction phases costs ~1,500 tokens total.

### @-Mentioned Files

Files you reference with `@path/to/file` in your messages. When you mention a file, Claude Code injects the full file contents into the context. Large files consume significant tokens — a 1,000-line source file could use 5,000+ tokens per mention.

### Tool Outputs

Results returned from tool executions: file reads (`Read`), command output (`Bash`), search results (`Grep`, `Glob`), and others. Every tool result stays in the context window until compaction. A `Bash` command that prints 500 lines of output or a `Read` of a large file both count here.

### Thinking + Text Output

Claude's own output that consumes context:

- **Extended thinking** — Claude's internal reasoning (when thinking mode is active). This can be substantial for complex tasks.
- **Text output** — Claude's visible responses to you. Longer explanations and code blocks use more tokens.

### Task Coordination

Messages and operations from Claude Code's team/orchestration features:

- `SendMessage` — messages between teammates
- `TaskCreate`, `TaskUpdate`, `TaskList`, `TaskGet` — task management
- `TeamCreate`, `TeamDelete` — team lifecycle

Each coordination message adds to the context window of the receiving agent.

### User Messages

Your actual prompt text for each turn. This includes the raw text you type, but not the system-injected metadata around it.

## What We Don't Track

Visible Context does **not** cover everything in Claude's context window. The following are present but not attributable by our tracking:

- **Claude Code's system prompt** — the base instructions that tell Claude how to behave, use tools, format output, etc.
- **Tool descriptions** — the schema and documentation for each built-in tool (Read, Write, Edit, Bash, Grep, Glob, etc.)
- **MCP tool descriptions** — schemas for any MCP (Model Context Protocol) servers you have connected
- **Custom agent definitions** — instructions from `.claude/agents/` configurations
- **Skill descriptions** — the short descriptions of available skills that Claude sees so it knows what's available (visible via `/context` in Claude Code)
- **Internal system reminders** — `<system-reminder>` injections that Claude Code adds for session state, git status, available skills, etc.
- **Conversation structure overhead** — the message formatting, role markers, and protocol framing around each message

These untracked items form a "base cost" that's always present. You can see what Claude Code injects via the `/context` command in Claude Code itself.

## How It's Displayed

### Per-Turn Popover (Context Badge)

Each AI group in the chat shows a small badge. Hovering reveals what was injected at that specific turn — which CLAUDE.md files, which @-mentioned files, which tool outputs contributed tokens.

### Token Usage Popover

The token count next to each AI group has an info icon. Hovering shows the standard input/output/cache breakdown, plus an expandable "Visible Context" section showing the percentage of total tokens attributable to each tracked category.

### Session Context Panel

A dedicated panel (toggle via the context badge or header button) that shows the full session-wide view:

- All tracked injections grouped by category
- Token estimates per injection
- Phase filtering (if compaction events split the session into phases)
- Total visible context as a percentage of total session tokens

## Compaction Phases

When Claude's context window fills up, Claude Code compacts the conversation — summarizing older messages to free space. Each compaction creates a new "phase." Visible Context tracks injections per phase because:

- CLAUDE.md files are re-injected after each compaction
- Previous tool outputs and file contents are summarized away
- The phase selector lets you see what's in context **right now** (current phase) vs. what was present earlier

## Why Visible Context Matters

Understanding where tokens go helps you:

- **Spot expensive injections** — a massive CLAUDE.md file or a frequently-mentioned large file could be using 20%+ of your context
- **Optimize CLAUDE.md** — keep memory files concise; every token is repeated across phases
- **Be strategic with @-mentions** — mentioning a 2,000-line file costs real context space
- **Understand compaction impact** — see how much context resets after compaction
- **Debug unexpected behavior** — if Claude seems to "forget" something, check whether it was compacted away
claude-md-auditorSubagent

Use this agent when CLAUDE.md files or .claude/rules/ files may have drifted from the actual codebase state. This includes after significant refactors, feature additions, file renames, directory restructuring, or when you suspect documentation no longer matches reality. Use proactively after any large code change.\\n\\nExamples:\\n\\n- Example 1:\\n user: \"Refactor the services directory to split analysis into separate modules\"\\n assistant: \"I've completed the refactoring of the services directory. Let me now launch the claude-md-auditor agent to ensure all CLAUDE.md files reflect these structural changes.\"\\n <commentary>\\n Since a significant refactor was performed that likely changed file paths, exports, and directory structure documented in CLAUDE.md files, use the Task tool to launch the claude-md-auditor agent.\\n </commentary>\\n\\n- Example 2:\\n user: \"Add a new notifications feature with hooks, components, and a store slice\"\\n assistant: \"The notifications feature is now implemented. I'll use the claude-md-auditor agent to update the documentation to include the new files and patterns.\"\\n <commentary>\\n A new feature was added with multiple new files across components, hooks, and store slices. The CLAUDE.md files likely need updating to document these additions. Use the Task tool to launch the claude-md-auditor agent.\\n </commentary>\\n\\n- Example 3:\\n user: \"Rename isRealUserMessage to isParsedRealUserMessage across the codebase\"\\n assistant: \"The rename is complete across all source and test files. Now I'll launch the claude-md-auditor agent to update any documentation references to the old function name.\"\\n <commentary>\\n A function was renamed which is likely documented in CLAUDE.md type guard tables and conventions sections. Use the Task tool to launch the claude-md-auditor agent to fix stale references.\\n </commentary>\\n\\n- Example 4:\\n user: \"Can you audit the CLAUDE.md files to make sure they're up to date?\"\\n assistant: \"I'll launch the claude-md-auditor agent to systematically verify all documentation against the actual codebase.\"\\n <commentary>\\n The user explicitly requested a documentation audit. Use the Task tool to launch the claude-md-auditor agent.\\n </commentary>

quality-fixerSubagent

Use this agent when the user wants to fix all code quality issues in the project, including linting, formatting, and unused code detection. This agent runs `pnpm fix` followed by `pnpm quality` in a loop, delegating each iteration to a subagent, until all issues are resolved.\\n\\nExamples:\\n\\n- User: \"Fix all the quality issues\"\\n Assistant: \"I'll launch the quality-fixer agent to iteratively fix all linting, formatting, and quality issues.\"\\n (Uses Task tool to launch quality-fixer agent)\\n\\n- User: \"Run quality checks and fix everything\"\\n Assistant: \"Let me use the quality-fixer agent to handle that.\"\\n (Uses Task tool to launch quality-fixer agent)\\n\\n- User: \"Make sure the code passes all checks\"\\n Assistant: \"I'll use the quality-fixer agent to ensure all quality checks pass.\"\\n (Uses Task tool to launch quality-fixer agent)\\n\\n- After completing a large refactor or feature implementation:\\n Assistant: \"Now that the changes are complete, let me launch the quality-fixer agent to ensure everything passes quality checks.\"\\n (Uses Task tool to launch quality-fixer agent)

claude-devtools:chatgroup-architectureSlash Command

ChatGroup architecture — how conversation data flows from raw JSONL to rendered chat groups. Use when working on UserGroup, AIGroup, SystemGroup, display items, tool linking, chunks, or the rendering hierarchy.

claude-devtools:design-systemSlash Command

Design system and visual language — theming, CSS variables, Tailwind config, component styling patterns, icon usage, animations, and z-index layers. Use when creating or modifying UI components, working with the dark/light theme, or debugging visual issues.

claude-devtools:markdown-searchSlash Command

Markdown search logic — how in-session and cross-session search works. Use when working on SearchBar, search highlighting, searchHighlightUtils, markdownTextSearch, or SessionSearcher.

claude-devtools:navigation-scrollSlash Command

Navigation and scroll orchestration — tab navigation, error highlights, search scrolling, auto-scroll coordination, and common bug patterns. Use when working on useTabNavigationController, scroll restore, or navigation requests.