refactor(maestro): refine mobile key bar per review (NAP-342)

Review feedback on the touch key bar:
- Pare to essentials: Esc, Tab, Ctrl, Alt + cursor keys (drop PgUp/PgDn
  and the symbol keys).
- Two compact Termux-style rows in a 5-col grid; cursor keys as a
  real-keyboard inverted-T with Home/End filling the top corners:
      Esc  Tab  Home  ↑   End
      Ctrl Alt   ←    ↓    →
- Add Alt as a second sticky one-shot modifier; Ctrl+Alt compose, and
  both promote cursor keys to the modified CSI form (\x1b[1;<n><final>).
- Explicit press-flash animation: the pointerdown preventDefault (kept so
  the terminal stays focused) suppresses native :active feedback.

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

web/src/styles.css

@@ -1173,45 +1173,35 @@ textarea {
 
 /* ---------- mobile special-key bar (Termux-style) ---------- */
 
-/* Hidden on devices with a precise pointer (a physical keyboard already has
-   these keys). Revealed on touch, where the soft keyboard omits them. The shell
-   tracks the visual viewport (see `#app`), so this row lands above the keyboard. */
+/* Two compact rows (Termux layout) in a 5-column grid the 10 keys flow into:
+   Esc/Tab + Ctrl/Alt on the left, cursor keys as a real-keyboard inverted-T on
+   the right (Home/End fill the top corners). Layout is always defined; only
+   *visibility* is gated: hidden on precise-pointer devices (a physical keyboard
+   already has these keys), shown on touch where the soft keyboard omits them.
+   The shell tracks the visual viewport (see `#app`), so it lands above it. */
 .attach-keybar {
   display: none;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--sp-1);
+  padding: var(--sp-1) var(--sp-2);
+  padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--border);
+  background: var(--surface);
 }
 
 @media (pointer: coarse) {
   .attach-keybar {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: stretch;
-    gap: var(--sp-1);
-    padding: var(--sp-1) var(--sp-2);
-    padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
-    border-top: 1px solid var(--border);
-    background: var(--surface);
-    overflow-x: auto;
-    overflow-y: hidden;
-    overscroll-behavior-x: contain;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-  }
-
-  .attach-keybar::-webkit-scrollbar {
-    display: none;
+    display: grid;
   }
 }
 
 .attach-keybar .keycap {
-  flex: 0 0 auto;
-  min-width: var(--tap);
-  height: var(--tap);
-  padding: 0 var(--sp-3);
+  height: 32px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-mono);
-  font-size: var(--fs-14);
+  font-size: var(--fs-13);
   color: var(--ink);
   background: var(--surface-2);
   border: 1px solid var(--border);
@@ -1230,7 +1220,25 @@ textarea {
   border-color: var(--border-strong);
 }
 
-/* Armed sticky Ctrl: lit in signal-green until it folds into the next key. */
+/* Explicit press feedback: `pointerdown` preventDefault (kept for terminal
+   focus) suppresses native `:active` on touch, so flash a quick spring. */
+@keyframes keycap-press {
+  0% {
+    transform: scale(0.92);
+    background: var(--accent-tint);
+    border-color: var(--accent);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.attach-keybar .keycap.is-pressed {
+  animation: keycap-press 200ms var(--ease-out);
+}
+
+/* Armed sticky modifier (Ctrl/Alt): lit in signal-green until it folds into the
+   next key. */
 .attach-keybar .keycap-mod[aria-pressed="true"] {
   color: var(--accent-ink);
   background: var(--accent);