fix(maestro): show mobile key bar only while terminal is focused

The special-key bar previously showed on every coarse-pointer device, even
when the terminal was unfocused and the soft keyboard was down — which looked
out of place. Gate it on the terminal textarea's focus/blur (the same signal
that drives the keyboard) via a `keybar-active` class, and re-fit on toggle
since showing/hiding the bar changes the terminal's height.

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

web/src/attach.ts

@@ -126,6 +126,23 @@ export function createAttachConnection(
   term.loadAddon(fit);
   term.open(body);
 
+  // Mobile: the special-key bar is only useful while the soft keyboard is up,
+  // so reveal it only when the terminal's hidden textarea is focused (CSS still
+  // gates it to coarse pointers). Tapping a keycap keeps focus via pointerdown
+  // preventDefault, so the bar stays put during use. Re-fit on the toggle since
+  // showing/hiding the bar changes the terminal's available height.
+  const ta = term.textarea;
+  if (ta) {
+    ta.addEventListener("focus", () => {
+      keybar.el.classList.add("keybar-active");
+      requestAnimationFrame(tryFit);
+    });
+    ta.addEventListener("blur", () => {
+      keybar.el.classList.remove("keybar-active");
+      requestAnimationFrame(tryFit);
+    });
+  }
+
   let mounted = false;
   // We compute the fit ourselves instead of FitAddon.fit(): the addon subtracts
   // a scrollbar width that xterm reports as `offsetWidth - scrollArea || 15`,

web/src/styles.css

@@ -1192,8 +1192,10 @@ textarea {
   background: var(--surface);
 }
 
+/* Shown on touch only while the terminal is focused (soft keyboard up) — the
+   `keybar-active` class is toggled on textarea focus/blur in attach.ts. */
 @media (pointer: coarse) {
-  .attach-keybar {
+  .attach-keybar.keybar-active {
     display: grid;
   }
 }