feat(browser): the page draws the mode's hint instead of spelling keys

`?` now enters `Help` — the keymap says so and this client resolves
`enter-mode` — but the page has no help overlay: `src/ui/help.rs` is 600
lines of ratatui and nothing shared carries its content. Landing the key
without this would have swapped the mode label to HELP over an unchanged
grid, which looks broken rather than unfinished.

`AppMode::hint_text()` already exists in the protocol crate and is what the
TUI's footer draws, so `RenderModel::hint` relays it. Every mode now states
its own keys in the browser, the page spells none of them, and the modes
this client can enter but not yet draw say what they are. A real help
overlay needs the content moved into the shared layer first, which is the
same move design-principles §5 asks for and is filed rather than faked.

`web/*` is unrun; `node --check` only.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EoW5BB87ZZdm96SvBTWawH

web/app.js

@@ -55,6 +55,7 @@ const el = {
   grid: document.getElementById("grid"),
   categories: document.getElementById("categories"),
   mode: document.getElementById("mode"),
+  hint: document.getElementById("hint"),
   status: document.getElementById("status"),
   viewName: document.getElementById("view-name"),
 };
@@ -204,6 +205,9 @@ function repaint() {
   painted = model.revision;
 
   el.mode.textContent = model.mode;
+  // The mode's own hint, off `AppMode::hint_text()`. The page spells no
+  // keys itself; see `RenderModel::hint`.
+  el.hint.textContent = model.hint;
   modelStatus = model.status;
   paintStatus();
   el.viewName.textContent = model.view_name;

web/index.html

@@ -36,6 +36,7 @@
       <h1>improvise</h1>
       <span id="view-name"></span>
       <span id="mode"></span>
+      <span id="hint"></span>
       <span id="status" role="status"></span>
     </header>
 

web/style.css

@@ -89,6 +89,11 @@ td.selected {
   outline: 1px solid var(--accent);
 }
 
+#hint {
+  opacity: 0.7;
+  font-size: 0.85em;
+}
+
 /* A keyboard edit in progress. Left-aligned even in a numeric column,
    because what is drawn is the text being typed rather than a value. */
 td.typing {