diff --git a/CLAUDE.md b/CLAUDE.md
index 95887c4..e3b6dd2 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -192,6 +192,26 @@ src/styles/base.css   tokens: palette, fonts, the vertical budget
 bugs. The cost is that a mistyped class renders with no class at all rather than
 failing, which is why the layout is pinned by tests instead.
 
+**Seeing the UI without the phone.** There is no Chromium on this machine, but
+Firefox can screenshot headlessly with no extra dependency:
+
+```
+npx vite build
+cd dist && python3 -m http.server 8777 --bind 127.0.0.1 &
+firefox -no-remote --profile "$(mktemp -d)" --headless \
+        --window-size=360,735 --screenshot out.png http://127.0.0.1:8777/
+```
+
+Three things that will otherwise waste time: `-no-remote` plus a throwaway
+`--profile` are required or it opens a tab in your running Firefox and captures
+nothing; module scripts will not load over `file://`, so it has to be served over
+HTTP; and dark mode needs a `user.js` in that profile with
+`layout.css.prefers-color-scheme.content-override` set to `0`.
+
+Do this after UI changes. The first render had pads labelled "PAD 1" instead of
+their numeral, and the LCD showing the context code `MODE:S` rather than the mode
+name — neither visible to typecheck or the test suite.
+
 **`panelLayout.ts` is data, and tested.** `allPanelControls()` must cover all 54
 labelled controls exactly once — a typo'd id would otherwise just quietly go
 missing from the panel. The bank row is pinned at six keys ending in SHIFT
diff --git a/src/App.tsx b/src/App.tsx
index c888aa1..aed39ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -77,8 +77,8 @@ export function App() {
         lit={lit}
         held={held}
         screen={{
-          top: `MODE:${ctx}`,
-          right: activeLayer === "" ? "LAYER:—" : layerLabel(activeLayer),
+          top: CTX[ctx].toUpperCase(),
+          right: activeLayer === "" ? "NO MODIFIER" : layerLabel(activeLayer),
           main: `${onLayer.length} function${onLayer.length === 1 ? "" : "s"}`,
           chips: onLayer.slice(0, 3).map((e) => e.short),
         }}
diff --git a/src/ui/Panel.module.css b/src/ui/Panel.module.css
index 2159107..d4c9e95 100644
--- a/src/ui/Panel.module.css
+++ b/src/ui/Panel.module.css
@@ -247,6 +247,14 @@
   border-radius: 4px;
 }
 
+/* The pad's number, as printed on the hardware. */
+.num {
+  font-family: var(--mono);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--muted);
+}
+
 .side {
   color: var(--accent);
   font-weight: 700;
diff --git a/src/ui/Panel.tsx b/src/ui/Panel.tsx
index 02c2cad..f4abc54 100644
--- a/src/ui/Panel.tsx
+++ b/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}