fix(mobile): keyboard state follows Android's nonanimated IME show

apps/mobile/src/features/keyboard/keyboardControllerState.test.tsx

@@ -0,0 +1,84 @@
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { KeyboardEventData } from "react-native-keyboard-controller";
+import { expect, it, vi } from "vite-plus/test";
+
+const listeners = vi.hoisted(() => new Map<string, Set<(event: KeyboardEventData) => void>>());
+
+// Exercises the patched library source with only its native bindings replaced.
+vi.mock("react-native-keyboard-controller/src/bindings", () => ({
+  KeyboardEvents: {
+    addListener: (name: string, listener: (event: KeyboardEventData) => void) => {
+      const named = listeners.get(name) ?? new Set();
+      named.add(listener);
+      listeners.set(name, named);
+      return { remove: () => named.delete(listener) };
+    },
+  },
+  KeyboardControllerNative: { dismiss: () => {} },
+}));
+
+import { useKeyboardState } from "react-native-keyboard-controller/src/hooks/useKeyboardState";
+import { KeyboardController } from "react-native-keyboard-controller/src/module";
+
+function emit(name: string, height: number) {
+  const event: KeyboardEventData = {
+    height,
+    duration: 0,
+    timestamp: 1,
+    target: 42,
+    type: "default",
+    appearance: "light",
+  };
+  act(() => {
+    for (const listener of listeners.get(name) ?? []) listener(event);
+  });
+}
+
+function KeyboardState() {
+  const { isVisible, height } = useKeyboardState();
+  return <output>{JSON.stringify({ isVisible, height })}</output>;
+}
+
+// The library keeps keyboard state at module scope; every test starts and ends hidden.
+function setup() {
+  emit("keyboardDidHide", 0);
+  return { [Symbol.dispose]: () => emit("keyboardDidHide", 0) };
+}
+
+function renderKeyboardState() {
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  act(() => root.render(<KeyboardState />));
+  return { container, [Symbol.dispose]: () => act(() => root.unmount()) };
+}
+
+// Android's syncKeyboardPosition repairs a nonanimated IME inset change with
+// keyboardDidHide then keyboardDidShow, and no keyboardWillShow.
+it("reports the keyboard shown after Android repairs the IME inset without keyboardWillShow", () => {
+  using _keyboard = setup();
+  using screen = renderKeyboardState();
+
+  emit("keyboardDidShow", 376);
+
+  expect({
+    isVisible: KeyboardController.isVisible(),
+    height: KeyboardController.state().height,
+    hook: JSON.parse(screen.container.textContent ?? ""),
+  }).toEqual({ isVisible: true, height: 376, hook: { isVisible: true, height: 376 } });
+});
+
+it("waits for the native hide before dismiss resolves after a didShow-only repair", async () => {
+  using _keyboard = setup();
+  emit("keyboardDidShow", 376);
+
+  let dismissed = false;
+  const dismissal = KeyboardController.dismiss().then(() => {
+    dismissed = true;
+  });
+  await act(async () => {});
+
+  expect(dismissed).toBe(false);
+  emit("keyboardDidHide", 0);
+  await dismissal;
+});

apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx

@@ -25,7 +25,6 @@ import * as Schema from "effect/Schema";
 import { AsyncResult } from "effect/reactivity";
 import {
   KeyboardController,
-  KeyboardEvents,
   KeyboardStickyView,
   useKeyboardState,
 } from "react-native-keyboard-controller";
@@ -90,6 +89,7 @@ import {
 } from "./terminalInput";
 import { createTerminalPasteSession } from "./terminalPaste";
 import { cacheTerminalGridSize, getCachedTerminalGridSize } from "./terminalUiState";
+import { getKeyboardShowEpoch, subscribeKeyboardShowing } from "./terminalKeyboardShowing";
 
 function TerminalHeader(props: {
   readonly subtitle: string;
@@ -353,26 +353,6 @@ function readLiveTerminalSessions(
     }));
 }
 
-// `useKeyboardState` only flips on willShow and didHide; the accessory must
-// leave as soon as the keyboard starts hiding, so it follows the will-events.
-let keyboardShowing = KeyboardController.isVisible();
-function subscribeKeyboardShowing(onChange: () => void) {
-  keyboardShowing = KeyboardController.isVisible();
-  const willShow = KeyboardEvents.addListener("keyboardWillShow", () => {
-    keyboardShowing = true;
-    onChange();
-  });
-  const willHide = KeyboardEvents.addListener("keyboardWillHide", () => {
-    keyboardShowing = false;
-    onChange();
-  });
-  return () => {
-    willShow.remove();
-    willHide.remove();
-  };
-}
-const getKeyboardShowing = () => keyboardShowing;
-
 function ThreadTerminal(props: {
   readonly params: ThreadTerminalRouteScreenProps["route"]["params"];
   readonly routeEnvironmentId: EnvironmentId | null;
@@ -586,28 +566,25 @@ function ThreadTerminal(props: {
       { kind: "send", key: "dash", label: "-", data: "-" },
     ];
   }, [hostPlatform]);
-  const keyboardState = useKeyboardState((state) => ({
-    height: state.height,
-    isVisible: state.isVisible,
-  }));
-  const keyboardShowing = useSyncExternalStore(subscribeKeyboardShowing, getKeyboardShowing);
+  const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
+  const keyboardHeight = useKeyboardState((state) => state.height);
+  const keyboardShowEpoch = useSyncExternalStore(subscribeKeyboardShowing, getKeyboardShowEpoch);
   // The accessory follows the keyboard, except that the dismiss and show
   // buttons flip it ahead of the keyboard animation.
-  const [accessory, setAccessory] = useState({ keyboardShowing, dismissed: false });
-  if (accessory.keyboardShowing !== keyboardShowing) {
-    setAccessory({ keyboardShowing, dismissed: !keyboardShowing });
+  const [accessory, setAccessory] = useState({ keyboardShowEpoch, dismissed: false });
+  if (accessory.keyboardShowEpoch !== keyboardShowEpoch) {
+    setAccessory({ keyboardShowEpoch, dismissed: keyboardShowEpoch === 0 });
   }
   const isAccessoryDismissed = accessory.dismissed;
-  const isAccessoryVisible = canOperateTerminal && keyboardState.isVisible && !isAccessoryDismissed;
+  const isAccessoryVisible = canOperateTerminal && isKeyboardVisible && !isAccessoryDismissed;
   // Android's terminal owns an EditText; turning off autoFocus also clears its native focus.
   const terminalAutoFocus =
     Platform.OS === "android"
       ? !isAccessoryDismissed &&
-        (!SHOWCASE_ENABLED || keyboardFocusRequest > 0 || keyboardState.isVisible)
+        (!SHOWCASE_ENABLED || keyboardFocusRequest > 0 || isKeyboardVisible)
       : !SHOWCASE_ENABLED;
   const terminalBottomInset =
-    (keyboardState.isVisible ? keyboardState.height : 0) +
-    (isAccessoryVisible ? TERMINAL_ACCESSORY_HEIGHT : 0);
+    (isKeyboardVisible ? keyboardHeight : 0) + (isAccessoryVisible ? TERMINAL_ACCESSORY_HEIGHT : 0);
 
   const terminalMenuSessions: ReadonlyArray<TerminalMenuSession> = buildTerminalMenuSessions({
     knownSessions: knownSessions ?? [],
@@ -861,8 +838,7 @@ function ThreadTerminal(props: {
             // Measured top reservation is zero when UIKit already inset the body or moved the bar.
             paddingTop:
               Platform.OS === "ios" ? (nativeColumnMetrics?.safeArea.top ?? insets.top) : 0,
-            paddingBottom:
-              Platform.OS === "android" && !keyboardState.isVisible ? insets.bottom : 0,
+            paddingBottom: Platform.OS === "android" && !isKeyboardVisible ? insets.bottom : 0,
           }}
         >
           {!isEnvironmentReady ? (
@@ -957,7 +933,7 @@ function ThreadTerminal(props: {
                 />
               </View>
 
-              {Platform.OS === "android" && !keyboardState.isVisible ? (
+              {Platform.OS === "android" && !isKeyboardVisible ? (
                 <View className="min-h-14 flex-row items-center gap-2 bg-card-alt px-2">
                   {hasNativeTerminalSurface() ? (
                     <Button label="Attach output" tone="text" onPress={requestCapture} />
@@ -1032,7 +1008,7 @@ function ThreadTerminal(props: {
                     </ComposerToolbarRow>
                   </View>
                 </KeyboardStickyView>
-              ) : canOperateTerminal && !keyboardState.isVisible && Platform.OS !== "android" ? (
+              ) : canOperateTerminal && !isKeyboardVisible && Platform.OS !== "android" ? (
                 <Pressable
                   accessibilityLabel="Show keyboard"
                   accessibilityRole="button"

apps/mobile/src/features/terminal/terminalKeyboardShowing.test.ts

@@ -0,0 +1,66 @@
+import { expect, it, vi } from "vite-plus/test";
+
+const listeners = vi.hoisted(() => new Map<string, Set<() => void>>());
+
+vi.mock("react-native-keyboard-controller", () => ({
+  KeyboardController: { isVisible: () => false },
+  KeyboardEvents: {
+    addListener: (name: string, listener: () => void) => {
+      const named = listeners.get(name) ?? new Set();
+      named.add(listener);
+      listeners.set(name, named);
+      return { remove: () => named.delete(listener) };
+    },
+  },
+}));
+
+import { getKeyboardShowEpoch, subscribeKeyboardShowing } from "./terminalKeyboardShowing";
+
+function emit(name: string) {
+  for (const listener of listeners.get(name) ?? []) listener();
+}
+
+// Android's syncKeyboardPosition repairs a nonanimated IME inset change with
+// keyboardDidHide then keyboardDidShow, and no will-events.
+it("keeps the accessory through Android's did-only repair and starts a new show after it", () => {
+  // Two mounted terminal screens, each reading the snapshot when notified.
+  const seen = [0, 0];
+  const unsubscribes = seen.map((_, index) => {
+    seen[index] = getKeyboardShowEpoch();
+    return subscribeKeyboardShowing(() => {
+      seen[index] = getKeyboardShowEpoch();
+    });
+  });
+  const trace = [
+    "keyboardWillShow",
+    "keyboardDidShow",
+    "keyboardDidHide",
+    "keyboardDidShow",
+    "keyboardWillHide",
+    "keyboardWillShow",
+  ].map((name) => {
+    emit(name);
+    return {
+      epoch: getKeyboardShowEpoch(),
+      inSync: seen.every((s) => s === getKeyboardShowEpoch()),
+    };
+  });
+
+  const [shown, settled, repairHidden, repairShown, hidden, reshown] = trace.map((t) => t.epoch);
+  expect({
+    neverHiddenByRepair: [shown, settled, repairHidden, repairShown].every((epoch) => epoch !== 0),
+    sameShow: settled === shown && repairHidden === shown,
+    newShow: repairShown !== shown,
+    hidden,
+    newShowAfterHide: reshown !== 0 && reshown !== repairShown,
+    subscribersInSync: trace.every((t) => t.inSync),
+  }).toEqual({
+    neverHiddenByRepair: true,
+    sameShow: true,
+    newShow: true,
+    hidden: 0,
+    newShowAfterHide: true,
+    subscribersInSync: true,
+  });
+  for (const unsubscribe of unsubscribes) unsubscribe();
+});

apps/mobile/src/features/terminal/terminalKeyboardShowing.ts

@@ -0,0 +1,40 @@
+import { KeyboardController, KeyboardEvents } from "react-native-keyboard-controller";
+
+// The accessory leaves on willHide, before `useKeyboardState` sees didHide. Android
+// repairs a nonanimated IME change with didHide then didShow alone: that didHide must
+// not hide the accessory (it would clear the terminal's focus), but the didShow after
+// it starts a new show so a dismissed accessory comes back.
+const subscribers = new Set<() => void>();
+let showEpoch = 1;
+let keyboardShowing = KeyboardController.isVisible();
+let hiddenSinceShow = !keyboardShowing;
+
+const notify = () => {
+  for (const subscriber of subscribers) subscriber();
+};
+const show = () => {
+  if (hiddenSinceShow) showEpoch += 1;
+  hiddenSinceShow = false;
+  keyboardShowing = true;
+  notify();
+};
+KeyboardEvents.addListener("keyboardWillShow", show);
+KeyboardEvents.addListener("keyboardDidShow", show);
+KeyboardEvents.addListener("keyboardWillHide", () => {
+  keyboardShowing = false;
+  hiddenSinceShow = true;
+  notify();
+});
+KeyboardEvents.addListener("keyboardDidHide", () => {
+  hiddenSinceShow = true;
+});
+
+export function subscribeKeyboardShowing(onChange: () => void) {
+  subscribers.add(onChange);
+  return () => {
+    subscribers.delete(onChange);
+  };
+}
+
+// 0 while hidden; otherwise a number that changes with every new show.
+export const getKeyboardShowEpoch = () => (keyboardShowing ? showEpoch : 0);

apps/mobile/vite.config.ts

@@ -31,6 +31,7 @@ const reactTests = [
   "src/features/threads/use-thread-list-now.test.tsx",
   "src/features/home/home-list-options.test.tsx",
   "src/features/connection/ConnectionsNewRouteScreen.test.tsx",
+  "src/features/keyboard/keyboardControllerState.test.tsx",
 ];
 
 const sourceRoot = `${normalizePath(NodeURL.fileURLToPath(new URL("./src", import.meta.url)))}/`;