José Almeida
aa70b7dfa4
* feat(web): add mobile terminal key-bar with sticky Ctrl modifier Mobile software keyboards lack Ctrl, Esc, Tab, arrows, and shell symbols, so users had no way to interrupt a running command (Ctrl+C), escape an editor, or navigate the shell. Adds a horizontally scrolling key-bar above the virtual keyboard — sticky Ctrl modifier, dedicated Ctrl+C / Ctrl+D buttons, and visualViewport-based docking so the bar tracks the OS keyboard as it opens and closes. * test(web): add E2E coverage for mobile terminal key-bar Nine Playwright tests on the mobile-chrome project cover visibility gating, key emission verified via captured WS frames, the sticky Ctrl state machine, dedicated Ctrl+C / Ctrl+D buttons, keyboard-aware docking, accessibility, and an end-to-end ^C echo to prove the shell path works. Adds a reusable shell.input frame capture helper and a small page-object for the key-bar. * feat(web): shared shell input helpers for the mobile terminal Introduces a small toolkit the next commit will wire into the mobile key-bar: - `refocusXtermTextarea` — re-focuses xterm's hidden textarea after a virtual-key tap so iOS Safari doesn't dismiss the soft keyboard. - `suppressIOSKeyboardAssists` — strips name/autocomplete/data-* hints on the textarea so iOS / 1Password / LastPass / Bitwarden skip the AutoFill suggestion bar. - `useShellModifiersStore` (Zustand) — module-level Ctrl/Shift latch state with toggle (off → latched → sticky → off) and consume actions. - `applyShellModifiers` — pure transform: ctrl + a-z → control byte; shift + tab → CSI Z (reverse tab); single-char only. - `sendShellInput` — single entry point that reads the store, applies the transform, sends over WS, and consumes latched modifiers. `useShellKeySender` and the xterm `onData` path in `shell-terminal.tsx` now route through `sendShellInput` so any future modifier state propagates uniformly. `suppressIOSKeyboardAssists` is wired into `useTerminalInit` immediately after `terminal.open()`. * feat(web): mobile key-bar pivots to OS-keyboard input + pins to keyboard Reworks the mobile terminal key-bar around two insights: 1. The OS soft keyboard already provides letters — duplicating them in-bar was confusing and didn't address the real problem (Ctrl couldn't modify what the user typed via the OS keyboard, because that input went straight to xterm and bypassed React state). 2. iOS Safari `position: fixed; bottom:` drifts during visual-viewport scroll while the keyboard is open. Anchoring via `top` tied to the visual viewport's bottom edge stays glued. Changes: - `MobileTerminalKeybar` reads Ctrl/Shift state from the shared `useShellModifiersStore` and toggles it on tap. The actual chord transform now happens in `sendShellInput`, which both the bar and xterm's `onData` path call — so a Ctrl latch set from the bar modifies the next character typed on the OS keyboard. - Drops `LETTER_KEYS` and `chordChar` from the bar; adds a Shift toggle (Shift+Tab → reverse-tab from the bar; pairs with the modifier transform for OS-keyboard taps). - Latched state now shows the same ring as sticky (with sticky using a stronger `ring-primary`), so the first tap is visibly active. - `touch-action: manipulation` on each button so taps in the `overflow-x-auto` row don't get reinterpreted as scroll. - `useVisualViewportOffset` exports `viewportBottom = offsetTop + height`. When the keyboard is open the bar uses `top: viewportBottom - KEYBAR_HEIGHT_PX` and `bottom: auto`; closed, it keeps the `bottom`-based positioning so it sits above the bottom nav. - `SessionMobileLayout` computes the terminal panel's `paddingBottom` so terminal content's bottom edge sits exactly at the bar's top edge whether the keyboard is up or not. Tests cover the new modifier flow, Shift+Tab, the absence of in-bar letter buttons, and the `top`-anchored positioning when the keyboard is reported as open. * test(web): rewrite mobile key-bar e2e around real user flows The prior e2e leaned on in-bar letter buttons that no longer exist. Rewrites the spec around the journeys a mobile user actually performs: tap ^C to cancel, latch Ctrl + type a letter on the OS keyboard, sticky Ctrl across multiple chords, Shift+Tab from the bar, history nav with the arrow button, Esc, symbol keys, and the iOS positioning fixes (top-anchored when the keyboard opens, tracks visual viewport scroll, terminal panel reserves space for the bar). Adds a `shift` getter to the page object. * style(web): apply prettier formatting * fix(web): keep modifiers armed on dropped sends + tighten input handler Addresses bot review on PR #741: - `sendShellInput` no longer consumes Ctrl/Shift when the WS client isn't available — the chord stays armed so the user can retry once reconnected instead of seeing the latch silently clear. - Adds `send-shell-input.test.ts` with the matrix the helper needs: empty data, ctrl chord + auto-release, sticky retention, shift+tab → CSI Z, shift passthrough on non-tab, and the WS-disconnected no-send/no-consume path. - Removes dead `ctrlChord` export and its tests — the only consumer was its own test, and `applyShellModifiers` covers the same transform end-to-end. - Drops the unused `send` parameter from `useShellInputHandler` (the effect now goes through `sendShellInput` directly), removing a spurious dep that would otherwise re-fire the effect on identity changes. - Documents that `KEY_SEQUENCES.home`/`end` are intentionally readline shortcuts (Ctrl+A/E), not VT Home/End sequences, so future readers don't mistake it for a bug. * refactor(web): split mobile key-bar helpers, tighten null-viewport test Addresses two non-blocking suggestions from PR #741 review: - Move `KeyDef`, `KEYS`, `ModifierButton`, and `KeybarButton` out of `mobile-terminal-keybar.tsx` into a sibling helpers file. The main component drops from 213 to 115 lines, comfortably under the 200-line component convention. - Assert `viewportBottom === 0` in the null-viewport branch of `use-visual-viewport-offset.test.ts` so all three return-shape fields are covered there.
29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
import { getWebSocketClient } from "@/lib/ws/connection";
|
|
import { applyShellModifiers } from "./apply-shell-modifiers";
|
|
import { useShellModifiersStore, isActive } from "./shell-modifiers";
|
|
|
|
/**
|
|
* Single entry point for shell input. Applies active ctrl/shift modifiers,
|
|
* sends over the WS, then consumes latched (non-sticky) modifiers.
|
|
*
|
|
* Used by both the virtual key-bar and xterm's own `onData` callback so that
|
|
* a Ctrl latch set from the key-bar modifies the next character the user
|
|
* types on the OS keyboard — which is the whole point of the modifier.
|
|
*/
|
|
export function sendShellInput(sessionId: string, data: string): void {
|
|
if (!data) return;
|
|
const client = getWebSocketClient();
|
|
if (!client) return; // keep modifiers armed; the user can retry once reconnected
|
|
const store = useShellModifiersStore.getState();
|
|
const ctrlActive = isActive(store.ctrl);
|
|
const shiftActive = isActive(store.shift);
|
|
const transformed = applyShellModifiers(data, { ctrl: ctrlActive, shift: shiftActive });
|
|
client.send({
|
|
type: "request",
|
|
action: "shell.input",
|
|
payload: { session_id: sessionId, data: transformed },
|
|
});
|
|
if (ctrlActive) store.consumeCtrl();
|
|
if (shiftActive) store.consumeShift();
|
|
}
|