Claude Code Prism

English

Why This Exists

If you use Claude Code in the terminal, you probably know claude-hud — a status line plugin that shows token usage, cost, and context window in real time. It works great for the CLI.

But if you use Claude Code for VS Code (or Cursor), none of that works. The VS Code extension gives you a chat sidebar, but there's no way to see how many tokens you've burned, what the session is costing you, or how close you are to the context limit. You're spending real money with every message, and you can't see the meter running. That's stressful.

On top of that, Claude Code CLI has a rich set of / commands (/cost, /compact, /model, etc.) that simply don't exist in the VS Code GUI. We wanted those too.

Inspired by claude-hud, we built Claude Code Prism — a standalone companion extension that brings the same HUD experience and CLI-level insights into Claude Code for VS Code. It's designed as a separate plugin on purpose: it never touches the Claude Code for VS Code extension itself. When Anthropic ships an update to Claude Code for VS Code, nothing breaks. Claude Code Prism sits alongside it, adding what's missing without getting in the way.

Prerequisites

Claude Code for VS Code must be installed and running. Claude Code Prism is a companion extension — it enhances Claude Code for VS Code but does not work on its own.

Screenshot

Top: Compact style — three-line strip showing model, tokens, context bar, cost, session stats, and cache. Middle: Glass style — frosted dashboard card with full stats grid. Bottom: Settings panel — provider profile system with auto-switching pricing presets.

How It Works

   Claude Code for VS Code (running)
                      │
                      │  Claude Code Prism monitors session metadata
                      ▼
              Extracts only operational metrics:
                      │
                      ├── token counts  (input / output / cache)
                      ├── model name    + pricing lookup
                      └── session duration
                      │
                      ▼
   Status Bar:  [model] [tokens] [████░░ ctx%] [$cost]

No API keys. No network requests. No telemetry. Does not read your conversation content. Everything stays on your machine.

Features

Feature	Description
Real-time HUD	Model, tokens, cost, and context window — always visible, two styles (Compact / Glass)
Auto session detection	Finds the active session for your current workspace automatically, scans project dirs on first run
Live updates	Updates the instant Claude generates — not polling
Context window bar	`████████░░ 78%` — turns yellow at 65%, red at 85%
Per-call pricing	Flat fee per API call mode (次卡) for third-party resellers
Provider profiles	Save/load pricing presets per provider — auto-switches when you change `ANTHROPIC_BASE_URL`
Cost breakdown	`Prism: Session Cost` opens a detailed per-category report
Export handoff	Delegates to Claude Code Exporter if installed

Quick Start

Make sure Claude Code for VS Code is installed
Install Claude Code Prism from the VS Code Marketplace
Open a project and start a Claude Code session — check your status bar

Commands

Command	Keybinding	Description
`Claude Code Prism: Session Cost`	`Ctrl+Shift+Alt+C`	Detailed cost breakdown
`Claude Code Prism: Export Session`	`Ctrl+Shift+Alt+E`	Export or open the session file
`Claude Code Prism: Status`	—	Full status panel
`Claude Code Prism: Toggle HUD`	—	Enable/disable the status bar

Settings

Setting	Default	Description
`claudePrism.hudStyle`	`"compact"`	HUD style: `compact` (three-line strip) or `glass` (dashboard card)
`claudePrism.pricingMode`	`"token"`	`token` = per-token pricing, `perCall` = flat fee per API call
`claudePrism.perCallCost`	`0.03`	Cost per API call in USD (per-call mode)
`claudePrism.customPricing`	`null`	Custom per-model pricing ($/M tokens)
`claudePrism.pricingMultiplier`	`1`	Global pricing multiplier (0.5 = 50% off, 1.2 = 20% markup)
`claudePrism.customContextWindows`	`null`	Custom context window sizes per model
`claudePrism.providerProfiles`	`{}`	Saved pricing profiles per provider (auto-managed by Settings UI)
`claudePrism.claudeProjectsDir`	`""`	Custom Claude projects directory

Compatibility

VS Code 1.85+ · Cursor
Requires: Claude Code for VS Code
Windows / macOS / Linux

中文

为什么做这个插件

如果你在终端里用 Claude Code，你大概知道 claude-hud ——一个状态行插件，实时显示 token 用量、费用和上下文窗口。CLI 下用着很舒服。

但如果你用的是 Claude Code for VS Code（或 Cursor），这些全都用不了。VS Code 扩展给了你一个对话侧边栏，但你看不到烧了多少 token、这次会话花了多少钱、离上下文上限还有多远。每条消息都在花真金白银，表盘却是黑的。这让人心里没底。

除此之外，Claude Code CLI 有一整套 / 命令（/cost、/compact、/model 等等），在 VS Code 的 GUI 里根本不存在。我们也想要这些。

受 claude-hud 启发，我们做了 Claude Code Prism ——一个独立的伴生插件，把同样的 HUD 体验和 CLI 级别的运行洞察带进 Claude Code for VS Code。它刻意设计成独立插件：绝不碰 Claude Code for VS Code 扩展本身。Anthropic 更新 Claude Code for VS Code 的时候，什么都不会坏。Claude Code Prism 安安静静地待在旁边，补上缺失的部分，不碍事。

前置条件

需要先安装 Claude Code for VS Code。Claude Code Prism 是伴生插件——增强 Claude Code for VS Code 的体验，但无法独立运行。

截图

上方: Compact 风格 — 三行极简条，显示模型、token、上下文进度条、费用、会话统计和缓存。中间: Glass 风格 — 毛玻璃仪表盘卡片，完整统计网格。下方: 设置面板 — Provider Profile 系统，切换供应商自动加载对应的计价预设。

工作原理

   Claude Code for VS Code（运行中）
                      │
                      │  Claude Code Prism 监控会话元数据
                      ▼
              仅提取运行指标：
                      │
                      ├── token 统计（输入 / 输出 / 缓存）
                      ├── 模型名 + 定价查询
                      └── 会话时长
                      │
                      ▼
   状态栏:  [模型] [token数] [████░░ 上下文%] [$费用]

无需 API Key。无网络请求。无遥测。不读取你的对话内容。 一切数据留在本地。

功能

功能	说明
实时 HUD	模型、token、费用、上下文窗口——始终可见，两种风格（Compact / Glass）
自动识别会话	自动匹配当前工作区对应的活跃会话，首次启动自动扫描项目目录
实时更新	Claude 生成的瞬间就更新，不是轮询
上下文进度条	`████████░░ 78%` — 65% 变黄，85% 变红
按次计价	按 API 调用次数收费模式（次卡），适配第三方中转站
Provider Profiles	按供应商保存/加载计价预设——切换 `ANTHROPIC_BASE_URL` 时自动切换
费用明细	`Prism: Session Cost` 命令打开逐类别的详细报表
导出联动	如果安装了 Claude Code Exporter，一键委托导出

快速开始

先安装 Claude Code for VS Code
从 VS Code Marketplace 安装 Claude Code Prism
打开项目，开始一个 Claude Code 会话——看状态栏

命令

命令	快捷键	说明
`Claude Code Prism: Session Cost`	`Ctrl+Shift+Alt+C`	费用明细
`Claude Code Prism: Export Session`	`Ctrl+Shift+Alt+E`	导出或打开会话文件
`Claude Code Prism: Status`	—	完整状态面板
`Claude Code Prism: Toggle HUD`	—	开关状态栏

设置项

设置	默认值	说明
`claudePrism.hudStyle`	`"compact"`	HUD 风格：`compact`（三行条）或 `glass`（仪表盘卡片）
`claudePrism.pricingMode`	`"token"`	`token` = 按 token 计价，`perCall` = 按次计价
`claudePrism.perCallCost`	`0.03`	每次 API 调用费用（美元，按次模式）
`claudePrism.customPricing`	`null`	自定义模型单价（$/M tokens）
`claudePrism.pricingMultiplier`	`1`	全局价格倍率（0.5 = 五折，1.2 = 加价 20%）
`claudePrism.customContextWindows`	`null`	自定义上下文窗口大小
`claudePrism.providerProfiles`	`{}`	按供应商保存的计价预设（Settings UI 自动管理）
`claudePrism.claudeProjectsDir`	`""`	自定义 Claude 项目目录

兼容性

VS Code 1.85+ · Cursor
前置条件：Claude Code for VS Code
Windows / macOS / Linux

_{The HUD that Claude Code for VS Code doesn't have — yet.}
_{Claude Code for VS Code 还没有的那块仪表盘。}

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
.github/workflows		.github/workflows
images		images
src		src
.gitignore		.gitignore
.vscodeignore		.vscodeignore
LICENSE		LICENSE
README.md		README.md
esbuild.js		esbuild.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Claude Code Prism

English

Why This Exists

Prerequisites

Screenshot

How It Works

Features

Quick Start

Commands

Settings

See Also

Compatibility

中文

为什么做这个插件

前置条件

截图

工作原理

功能

快速开始

命令

设置项

相关扩展

兼容性

About

Uh oh!

Releases 9

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

Claude Code Prism

English

Why This Exists

Prerequisites

Screenshot

How It Works

Features

Quick Start

Commands

Settings

See Also

Compatibility

中文

为什么做这个插件

前置条件

截图

工作原理

功能

快速开始

命令

设置项

相关扩展

兼容性

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 9

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages