docs(help): update in-app controls help (#175)

Author: benvinegar

src/ui/AppHost.interactions.test.tsx

@@ -1601,15 +1601,15 @@ describe("App interactions", () => {
 
       let frame = setup.captureCharFrame();
       expect(frame).toContain("Toggle files/filter focus");
-      expect(frame).not.toContain("Keyboard help");
+      expect(frame).not.toContain("Controls help");
 
       await act(async () => {
         await setup.mockInput.pressArrow("left");
       });
       await flush(setup);
 
       frame = setup.captureCharFrame();
-      expect(frame).toContain("Keyboard help");
+      expect(frame).toContain("Controls help");
       expect(frame).not.toContain("Toggle files/filter focus");
 
       await act(async () => {
@@ -1619,7 +1619,7 @@ describe("App interactions", () => {
 
       frame = setup.captureCharFrame();
       expect(frame).toContain("Toggle files/filter focus");
-      expect(frame).not.toContain("Keyboard help");
+      expect(frame).not.toContain("Controls help");
     } finally {
       await act(async () => {
         setup.renderer.destroy();

src/ui/components/chrome/HelpDialog.tsx

@@ -2,7 +2,7 @@ import { fitText, padText } from "../../lib/text";
 import type { AppTheme } from "../../themes";
 import { ModalFrame } from "./ModalFrame";
 
-/** Render the keyboard help modal. */
+/** Render the in-app controls help modal. */
 export function HelpDialog({
   canRefresh = false,
   terminalHeight,
@@ -27,10 +27,17 @@ export function HelpDialog({
         ["d / u", "half page down / up"],
         ["[ / ]", "previous / next hunk"],
         ["{ / }", "previous / next comment"],
-        ["← / →", "scroll code (Shift = faster)"],
+        ["← / →", "scroll code left / right (Shift = faster)"],
         ["Home / End", "jump to top / bottom"],
       ],
     },
+    {
+      title: "Mouse",
+      items: [
+        ["Wheel", "scroll vertically"],
+        ["Shift+Wheel", "scroll code horizontally"],
+      ],
+    },
     {
       title: "View",
       items: [
@@ -92,7 +99,7 @@ export function HelpDialog({
       terminalHeight={terminalHeight}
       terminalWidth={terminalWidth}
       theme={theme}
-      title="Keyboard help"
+      title="Controls help"
       width={width}
       onClose={onClose}
     >

src/ui/components/ui-components.test.tsx

@@ -1292,22 +1292,22 @@ describe("UI components", () => {
     expect(frame).not.toContain("Update available:");
   });
 
-  test("HelpDialog renders every keyboard shortcut row without overlap", async () => {
+  test("HelpDialog renders every documented control row without overlap", async () => {
     const theme = resolveTheme("midnight", null);
     const frame = await captureFrame(
       <HelpDialog
         canRefresh={true}
-        terminalHeight={31}
+        terminalHeight={36}
         terminalWidth={76}
         theme={theme}
         onClose={() => {}}
       />,
       76,
-      31,
+      36,
     );
 
     const expectedRows = [
-      "Keyboard help",
+      "Controls help",
       "[Esc]",
       "Navigation",
       "↑ / ↓           move line-by-line",
@@ -1317,8 +1317,11 @@ describe("UI components", () => {
       "d / u           half page down / up",
       "[ / ]           previous / next hunk",
       "{ / }           previous / next comment",
-      "← / →           scroll code (Shift = faster)",
+      "← / →           scroll code left / right (Shift = faster)",
       "Home / End      jump to top / bottom",
+      "Mouse",
+      "Wheel           scroll vertically",
+      "Shift+Wheel     scroll code horizontally",
       "View",
       "1 / 2 / 0       split / stack / auto",
       "s / t           sidebar / theme",
@@ -1337,9 +1340,11 @@ describe("UI components", () => {
 
     const lines = frame.split("\n");
     const blankModalRow = /│\s+│/;
+    const mouseHeaderIndex = lines.findIndex((line) => line.includes("│ Mouse"));
     const viewHeaderIndex = lines.findIndex((line) => line.includes("│ View"));
     const reviewHeaderIndex = lines.findIndex((line) => line.includes("│ Review"));
 
+    expect(lines[mouseHeaderIndex - 1]).toMatch(blankModalRow);
     expect(lines[viewHeaderIndex - 1]).toMatch(blankModalRow);
     expect(lines[reviewHeaderIndex - 1]).toMatch(blankModalRow);
     expect(frame).not.toContain("linese/Awrapt/smetadata");

src/ui/lib/appMenus.ts

@@ -216,7 +216,7 @@ export function buildAppMenus({
     help: [
       {
         kind: "item",
-        label: "Keyboard help",
+        label: "Controls help",
         hint: "?",
         checked: showHelp,
         action: toggleHelp,