authorgravatar for jakeleventhal@me.comJake Leventhal <jakeleventhal@me.com> 2026-09-24 21:52:03-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-24 18:52:03-07:00
log3e2370fbbf1efacb341a68e6f28efb06b695e148
tree62880092d34d532e01138b247a1f3ac4fe21ca2c
parent91e53e501c9e7eb03f0ea4a5b72221d08eff9c5c
signature Signed by PGP key B5690EEEBB952194

feat(web): add usage page keybinding (#9434)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Co-authored-by: Julius Marminge <julius0216@outlook.com>

6 files changed, 24 insertions(+), 0 deletions(-)

apps/web/src/components/CommandPalette.tsx+11
......@@ -469,6 +469,7 @@ function overlayModeForCommand(command: string | null): SearchOverlayMode | null
469469}
470470
471471export function CommandPalette({ children }: { children: ReactNode }) {
472 const navigate = useNavigate();
472473 const [state, dispatch] = useReducer(reduceCommandPaletteUiState, {
473474 open: false,
474475 mode: "command",
......@@ -561,6 +562,13 @@ export function CommandPalette({ children }: { children: ReactNode }) {
561562 });
562563 return;
563564 }
565 if (command === "usage.open") {
566 event.preventDefault();
567 event.stopPropagation();
568 setOpen(false);
569 void navigate({ to: "/usage" });
570 return;
571 }
564572 const mode = overlayModeForCommand(command);
565573 if (mode === null) {
566574 return;
......@@ -574,9 +582,11 @@ export function CommandPalette({ children }: { children: ReactNode }) {
574582 }, [
575583 appearanceMode,
576584 keybindings,
585 navigate,
577586 previewOpen,
578587 resolvedTheme,
579588 setAppearanceMode,
589 setOpen,
580590 terminalOpen,
581591 theme,
582592 themeHalves,
......@@ -2023,6 +2033,7 @@ function OpenCommandPaletteDialog(props: {
20232033 searchTerms: ["usage", "use", "tokens", "cost", "spend", "limits", "stats", "analytics"],
20242034 title: "Open usage",
20252035 icon: <ChartNoAxesColumnIcon className={ITEM_ICON_CLASS} />,
2036 shortcutCommand: "usage.open",
20262037 run: async () => {
20272038 await navigate({ to: "/usage" });
20282039 },
apps/web/src/components/settings/KeybindingsSettings.logic.test.ts+1
......@@ -243,6 +243,7 @@ describe("KeybindingsSettings.logic", () => {
243243 "chat.new",
244244 "rightPanel.toggleMaximized",
245245 "thread.stop",
246 "usage.open",
246247 "script.setup-db.run",
247248 ]),
248249 );
docs/user/usage.md+4
......@@ -1,5 +1,9 @@
11# Usage and limits
22
3Open **Usage** from the sidebar or the command palette, or press `mod+u` on web and
4desktop when the terminal is not focused. Customize `usage.open` in
5**Settings → Keybindings**.
6
37## Understand your usage
48
59**Usage** combines Codex, Claude Code, and Grok Build session history from your connected
packages/contracts/src/keybindings.test.ts+6
......@@ -78,6 +78,12 @@ it.effect("parses keybinding rules", () =>
7878 });
7979 assert.strictEqual(parsedProjectSearch.command, "projectSearch.toggle");
8080
81 const parsedUsageOpen = yield* decode(KeybindingRule, {
82 key: "mod+u",
83 command: "usage.open",
84 });
85 assert.strictEqual(parsedUsageOpen.command, "usage.open");
86
8187 const parsedThemeEditor = yield* decode(KeybindingRule, {
8288 key: "mod+alt+shift+t",
8389 command: "themeEditor.toggle",
packages/contracts/src/keybindings.ts+1
......@@ -78,6 +78,7 @@ export const STATIC_KEYBINDING_COMMANDS = [
7878 "commandPalette.toggle",
7979 "filePicker.toggle",
8080 "projectSearch.toggle",
81 "usage.open",
8182 "theme.select",
8283 "appearance.cycle",
8384 "themeEditor.toggle",
packages/shared/src/keybindings.ts+1
......@@ -40,6 +40,7 @@ export const DEFAULT_KEYBINDINGS: ReadonlyArray<KeybindingRule> = [
4040 { key: "mod+k", command: "commandPalette.toggle", when: "!terminalFocus" },
4141 { key: "mod+p", command: "filePicker.toggle", when: "!terminalFocus" },
4242 { key: "mod+shift+f", command: "projectSearch.toggle", when: "!terminalFocus" },
43 { key: "mod+u", command: "usage.open", when: "!terminalFocus" },
4344 { key: "mod+alt+a", command: "theme.select", when: "!terminalFocus" },
4445 { key: "mod+alt+shift+a", command: "appearance.cycle", when: "!terminalFocus" },
4546 { key: "mod+alt+shift+t", command: "themeEditor.toggle" },