Phase 2: render the panel and fix what looking revealed

Rendering it headlessly for the first time turned up two defects that
neither typecheck nor 112 tests could see:

- pads were labelled PAD 1, PAD 2 rather than printing their numeral.
  The hardware prints the number, and swaps in a function name only when
  a layer lights the pad up; Key now does the same.
- the LCD showed MODE:S, the context code, instead of the mode name. A
  single letter tells the reader nothing.

Both are only visible by looking, which is the point: the geometry was
arithmetically correct the whole time and still read wrong.

CLAUDE.md now records how to look. There is no Chromium here, but
Firefox screenshots headlessly with no new dependency, given three
things that otherwise waste an afternoon: -no-remote and a throwaway
profile, or it opens a tab in the running browser and captures nothing;
an HTTP server, because module scripts will not load over file://; and a
user.js pref to force dark mode.

Verified in both light and dark at 360x735. 112 tests, build clean,
www/ untouched.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/ui/Panel.tsx

@@ -30,10 +30,14 @@ interface KeyProps extends Pick<PanelProps, "lit" | "held" | "onPress"> {
   readonly className: string | undefined;
 }
 
+/** Pads print their number, not "PAD 7" — until a layer lights them up. */
+const padNumber = (id: ControlId): string | undefined => /^p(\d+)$/.exec(id)?.[1];
+
 function Key({ id, className, lit, held, onPress }: KeyProps) {
   const entries = lit.get(id);
   const isHeld = held.includes(id);
   const isLit = entries !== undefined && entries.length > 0;
+  const number = padNumber(id);
 
   return (
     <button
@@ -43,7 +47,13 @@ function Key({ id, className, lit, held, onPress }: KeyProps) {
       aria-label={panelLabel(id)}
       onClick={onPress ? () => onPress(id) : undefined}
     >
-      {isLit ? entries[0]!.short : panelLabel(id)}
+      {isLit ? (
+        entries[0]!.short
+      ) : number ? (
+        <span className={styles.num}>{number}</span>
+      ) : (
+        panelLabel(id)
+      )}
       {entries && entries.length > 1 ? (
         <span className={styles.badge}>{entries.length}</span>
       ) : null}