Run inside Claude Code Hub
Claude Code Hub puts Claude Code Cost in a tab next to its other apps. The dashboard is the same. The hub adds a shared project scope, a shared theme, and keyboard shortcuts that work across tabs.
How Claude Code Cost knows it is in the hub
Section titled “How Claude Code Cost knows it is in the hub”Two environment variables turn on hub mode:
CLAUDE_HUB=1turns on hub mode.HUB_URLis the hub’s address.
The hub also gives the app its SDK. In hub mode, the page asks the server for GET /hub-config, which returns {enabled, url} from these two values. The page then accepts messages only from the parent window at the hub’s origin. Standalone, the app has no /hub-config route and uses a stub of the SDK that talks to no hub. See Hub protocol v1.
Project scope
Section titled “Project scope”Press Ctrl+Alt+P in the hub to pick a project. The hub sends the project to Claude Code Cost, which sets the scope and opens that project’s sessions list. The scope shows as a chip in the top bar.
- The scope applies to the overview and insights. The project picker always lists all projects. Switching to Insights keeps it.
- Going back from the sessions list to the overview drops the scope.
- If the hub sends an empty project, Claude Code Cost keeps its current scope. To clear the scope, click the x on the chip or all projects in the breadcrumb. Claude Code Cost then opens the overview.
For scope outside the hub, see Choose a date range and project scope.
Theme sync
Section titled “Theme sync”Light/dark mode and the color theme sync in both directions. Change the theme in Claude Code Cost and the hub passes it to the other apps. Change it in another app and Claude Code Cost follows.
Auto-refresh only on the visible tab
Section titled “Auto-refresh only on the visible tab”The hub hides inactive tabs, so the page cannot tell by itself whether you can see it. The hub tells it which app is active.
- Auto-refresh runs only while Claude Code Cost is the visible tab.
- When you switch to the tab, it checks the data at once. If the data is older than 5 minutes, it reloads the current view.
- While the tab stays visible, it checks again every 30 seconds.
Forwarded keys
Section titled “Forwarded keys”Key presses inside an iframe do not reach the hub, so Claude Code Cost sends these keys to the hub:
| Keys | Hub action |
|---|---|
| Ctrl+Alt+← / Ctrl+Alt+→ | Previous or next hub app |
| Alt+1 … Alt+9 | Go to hub app by number |
| Ctrl+Alt+P | Project picker |
| Ctrl+Alt+W | Config-dir picker |
| Ctrl+Alt+A | App launcher |
Claude Code Cost forwards every Ctrl+Alt+letter. The hub ignores letters that it has no binding for. The Hub group in the in-app help (?) shows only when the app runs inside the hub. For all keys, see Keyboard shortcuts.
One instance per config dir
Section titled “One instance per config dir”The hub can switch between Claude config dirs. Each dir gets its own Claude Code Cost server, started with CLAUDE_CONFIG_DIR set to that dir. That server reads the transcripts in that dir. For the default ~/.claude, it also reads ~/.config/claude/projects. See Configuration and CLI.
After a switch, the page may still point at a session from the old dir. That session does not exist in the new dir, so Claude Code Cost shows a “Not in this config dir” message and opens the overview.
The active 5-hour block on the Insights tab needs the Claude Code Kanban statusline installed in that config dir. Without it, the block card shows “no live window data”. See Watch 5-hour blocks and burn rate.
Framing
Section titled “Framing”Framing follows HUB_URL. When HUB_URL is set, these pages can frame Claude Code Cost: pages on localhost and 127.0.0.1 on any port, the app’s own origin, and the hub’s origin. A remote site still cannot frame it. When HUB_URL is not set, no page can frame it.