fix(web): a Usage toggle shortcut now goes back instead of staying on Usage

apps/web/src/components/AppSidebarLayout.tsx

@@ -219,7 +219,8 @@ function routePanelsOpen(routeThreadRef: ReturnType<typeof useThreadRouteRef>) {
   };
 }
 
-function NavigationHistoryShortcuts() {
+export function NavigationHistoryShortcuts() {
+  const usagePageOpen = useLocation({ select: (location) => location.pathname === "/usage" });
   const keybindings = useAtomValue(primaryServerKeybindingsAtom);
   const routeThreadRef = useThreadRouteRef();
 
@@ -239,6 +240,7 @@ function NavigationHistoryShortcuts() {
           ...routePanelsOpen(routeThreadRef),
           editableFocus: isEditableFocused(event.target),
           modelPickerOpen: isModelPickerOpen(),
+          usagePageOpen,
         },
       });
       if (command !== "navigation.back" && command !== "navigation.forward") return;
@@ -251,7 +253,7 @@ function NavigationHistoryShortcuts() {
 
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [keybindings, routeThreadRef]);
+  }, [keybindings, routeThreadRef, usagePageOpen]);
 
   return null;
 }

apps/web/src/components/CommandPalette.tsx

@@ -237,6 +237,7 @@ const EMPTY_BROWSE_ENTRIES: FilesystemBrowseResult["entries"] = [];
 
 export function CommandPalette({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
+  const usagePageOpen = useLocation({ select: (location) => location.pathname === "/usage" });
   const [state, dispatch] = useReducer(reduceCommandPaletteUiState, {
     open: false,
     mode: "command",
@@ -287,6 +288,7 @@ export function CommandPalette({ children }: { children: ReactNode }) {
           previewFocus: isPreviewFocused(),
           previewOpen,
           modelPickerOpen: composerHandleRef.current?.isModelPickerOpen() ?? false,
+          usagePageOpen,
         },
       });
       if (command === "appearance.cycle") {
@@ -352,6 +354,7 @@ export function CommandPalette({ children }: { children: ReactNode }) {
     theme,
     themeHalves,
     toggleMode,
+    usagePageOpen,
   ]);
 
   useEffect(

apps/web/src/components/UsageToggleShortcut.browser.test.tsx

@@ -0,0 +1,52 @@
+import { compileResolvedKeybindingsConfig } from "@t3tools/shared/keybindings";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { userEvent } from "vite-plus/test/browser";
+
+import { render } from "../../test/render";
+
+const state = vi.hoisted(() => ({ navigate: vi.fn() }));
+
+// One key toggles Usage: it opens Usage elsewhere and goes back from it.
+const keybindings = compileResolvedKeybindingsConfig([
+  { key: "mod+u", command: "navigation.back", when: "usagePageOpen" },
+  { key: "mod+u", command: "usage.open", when: "!usagePageOpen" },
+]);
+
+vi.mock(import("@effect/atom-react"), async (original) => ({
+  ...(await original()),
+  useAtomValue: (() => keybindings) as never,
+}));
+vi.mock(import("@tanstack/react-router"), async (original) => ({
+  ...(await original()),
+  useNavigate: (() => state.navigate) as never,
+}));
+
+import { NavigationHistoryShortcuts } from "./AppSidebarLayout";
+import { CommandPalette } from "./CommandPalette";
+
+// regression: #21357
+describe("usage toggle shortcut on Usage", () => {
+  it("goes back", async () => {
+    vi.clearAllMocks();
+    using _platform = vi.spyOn(navigator, "platform", "get").mockReturnValue("Linux x86_64");
+    await using _screen = await render(<NavigationHistoryShortcuts />, { router: "/usage" });
+
+    using back = vi.spyOn(window.history, "back").mockImplementation(() => undefined);
+    await userEvent.keyboard("{Control>}u{/Control}");
+
+    expect(back).toHaveBeenCalledOnce();
+  });
+
+  // Both listeners sit on window, so the palette must not claim the key whatever their order.
+  it("does not reopen Usage from the command palette", async () => {
+    vi.clearAllMocks();
+    using _platform = vi.spyOn(navigator, "platform", "get").mockReturnValue("Linux x86_64");
+    await using _screen = await render(<CommandPalette>{null}</CommandPalette>, {
+      router: "/usage",
+    });
+
+    await userEvent.keyboard("{Control>}u{/Control}");
+
+    expect(state.navigate).not.toHaveBeenCalled();
+  });
+});