fix(web): port #10158 to V2 — Usage shortcuts sort the same whatever the binding order

Main's keybindings settings rank the Usage page commands by the page's own
order but left usage.open unranked. An unranked command fell back to an
alphabetical compare, so the comparator was inconsistent and the list
order depended on the input order. With V2's extra default bindings
(threadPanel.toggle, composer.sendAlternate, ...) the settings list put
Open between Tokens and Limits, and main's own test failed on this branch.
usage.open now ranks first, and the test checks both input orders.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: juliusmarminge

apps/web/src/components/settings/KeybindingsSettings.logic.test.ts

@@ -60,20 +60,25 @@ describe("KeybindingsSettings.logic", () => {
   );
   it("orders Usage bindings and command choices like the page", () => {
     const expected = [
-      "usage.cost",
       "usage.open",
+      "usage.cost",
       "usage.tokens",
       "usage.limits",
       "usage.period.day",
       "usage.period.week",
       "usage.period.month",
       "usage.period.quarter",
     ];
-    const bindings = DEFAULT_RESOLVED_KEYBINDINGS.toReversed();
-    expect(buildKeybindingRows(bindings, "usage").map((row) => row.command)).toEqual(expected);
-    expect(
-      buildKeybindingCommandOptions(bindings).filter((command) => command.startsWith("usage.")),
-    ).toEqual(expected);
+    // The order must not depend on the order of the configured bindings.
+    for (const bindings of [
+      DEFAULT_RESOLVED_KEYBINDINGS,
+      DEFAULT_RESOLVED_KEYBINDINGS.toReversed(),
+    ]) {
+      expect(buildKeybindingRows(bindings, "usage").map((row) => row.command)).toEqual(expected);
+      expect(
+        buildKeybindingCommandOptions(bindings).filter((command) => command.startsWith("usage.")),
+      ).toEqual(expected);
+    }
   });
 
   it("builds searchable rows with readable key and when values", () => {

apps/web/src/components/settings/KeybindingsSettings.logic.ts

@@ -15,8 +15,14 @@ import { shortcutKeyFromEvent } from "../../keybindings";
 import { isMacPlatform } from "../../lib/utils";
 import { METRIC_OPTIONS, WINDOW_OPTIONS } from "../usage/usageShortcuts";
 
+// Every usage.* command needs a rank. An unranked one falls back to the
+// alphabetical compare, which makes the comparator inconsistent and the order
+// depend on the input order.
 const usageCommandOrder = new Map<KeybindingCommand, number>(
-  [...METRIC_OPTIONS, ...WINDOW_OPTIONS].map((option, index) => [option.command, index]),
+  [
+    "usage.open" as const,
+    ...[...METRIC_OPTIONS, ...WINDOW_OPTIONS].map((option) => option.command),
+  ].map((command, index) => [command, index]),
 );
 
 function compareUsageCommands(left: KeybindingCommand, right: KeybindingCommand): number | null {