feat(mobile): terminal toolbar + native vi + auto-install Alpine tools

- feat(terminal): mobile toolbar sends raw bytes via new onSend prop on
  <Terminal>. Toolbar exposes Esc, Tab, arrows, Home/End, PgUp/PgDn, Del,
  F1-F12, `:`, `|`, `/`, `~`, and sticky Ctrl/Alt modifier toggles. Fixes
  Vim/less/htop/... which failed because the previous synthetic
  KeyboardEvent dispatch sent code:"c" where ghostty-web's mapKeyCode
  expects USB-HID "KeyC".

- fix(mobile-runtime): route vi/vim/less/more/top/sed and ~80 other
  interactive applets to /system/bin/toybox (dynamic-bionic, seccomp-
  safe) instead of libbusybox_exec.so. Busybox is static-linked and
  uses modern syscalls blocked by Android zygote seccomp, so vi hit
  SIGSYS ("bad system call"). Also symlink runtime/bin/ to system
  /system/bin/curl|strace|wget|awk when present.

- feat(mobile-runtime): install_extended_env now auto-installs ~30
  developer tools (nano, git, tmux, screen, openssh-client, rsync,
  python3, nodejs, npm, jq, tree, htop, fzf, fd, bat, exa, ripgrep,
  make, patch, vim, ...) via apk add after the Alpine rootfs is
  extracted, then creates proot-run wrappers in runtime/bin/ so each
  tool is callable by name without any user-visible setup step.

- feat(mobile-boot): ExtractionProgress (first-launch screen) now
  chains extractRuntime then installExtendedEnv, so new users get the
  full toolchain automatically — no hidden menu, no manual command.
  Progress bar and "~3 min, ~90MB download" hint updated accordingly.

- ship diagnostic shim libsigsys_trace.so (dormant; LD_PRELOAD-able
  for future bionic-target syscall tracing — no effect on static
  busybox where it was first tested).

Remaining: first-prompt-invisible-in-portrait bug is still open. Four
hypotheses tested and reverted (no effect observed). Synthesis with
device-captured observations and five pistes is in
MOBILE_TERMINAL_STATE.md for the human taking over.

Author: Rwanbt

MOBILE_TERMINAL_STATE.md

@@ -0,0 +1,119 @@
+# État des bugs terminal mobile OpenCode — handoff humain
+
+## Bug #2 ✅ RÉSOLU — Touches avancées (Vim/Esc/Ctrl/flèches)
+
+**Fix appliqué** : Réécriture de `TerminalMobileToolbar` pour envoyer des octets bruts via un handle `onSend` exposé par le composant `<Terminal>`.
+
+**Fichiers modifiés** :
+- `packages/app/src/components/terminal.tsx` — prop `onSend` (lignes 30, 262, 816-820)
+- `packages/app/src/pages/session/terminal-panel.tsx` — toolbar rewrite (lignes 27-164) + consumer (lignes 426-430, 451)
+
+**Résultat confirmé par l'utilisateur** : toolbar avec Esc, Tab, flèches, Home, End, PgUp, PgDn, Del, F1-F12, `:`, `|`, `/`, `~`, Ctrl/Alt toggles fonctionne.
+
+---
+
+## Bug #3 ✅ FIX EN PLACE — `vi` "bad system call"
+
+**Root cause identifiée** : `libbusybox_exec.so` est un binaire **statique** (confirmé par `file`). Lancé, il fait des syscalls directs ; certains (probablement `rseq`, `statx`, `clone3` — non identifié avec précision) sont bloqués par le seccomp-bpf filter du zygote Android. Résultat : SIGSYS → "bad system call".
+
+**LD_PRELOAD ne fonctionne pas** sur un binaire statique → impossible d'instrumenter busybox via shim.
+
+**Fix appliqué** : router `vi`, `vim`, `less`, `more`, `top`, `sed` vers `/system/bin/toybox` (dynamic-bionic, compatible seccomp zygote Android). Les applets toybox Android 0.8.6+ incluent `vi`.
+
+**Fichier modifié** :
+- `packages/mobile/src-tauri/src/runtime.rs` (lignes 318-357, 363-368)
+
+**Validation effectuée** :
+- `file libbusybox_exec.so` → "ELF executable, static"
+- `toybox vi --help` fonctionne (applet présent sur ce device Xiaomi)
+- Test manuel : symlink `/data/data/.../tmp/vi → /system/bin/toybox` exécuté via pty_server → vi ouvre sans SIGSYS, accepte `:wq`
+
+**À tester par l'humain** : ouvrir terminal dans l'app → `vi /tmp/test.txt` → doit ouvrir vi natif Android (toybox). Si SELinux bloque l'exec de `/system/bin/*` depuis le sandbox app (commentaire ligne 270-271 du runtime.rs mentionne ce risque), le fix pourra échouer et il faudra shipper un vim NDK bionic dans `assets/runtime/bin/` via `prepare-android-runtime.sh`.
+
+---
+
+## Bug #1 ❌ NON RÉSOLU — Prompt invisible en portrait (flash puis disparaît)
+
+**Hypothèses testées et RÉFUTÉES par les observations device** :
+1. Timing de render ghostty-web → Ctrl-L kick via `requestAnimationFrame` après 1er byte : aucun effet
+2. Android WebView viewport metadata → `interactive-widget=resizes-content` : aucun effet
+3. Line-height 150% hérité de `base.css` sur `.xterm-*` → `line-height: normal !important` : aucun effet
+4. Padding excessif `px-6 py-3` sur container → custom property `--terminal-px/py` réduit sur mobile : aucun effet
+
+**Toutes ces tentatives ont été revert** pour laisser le code dans un état propre.
+
+**Observations factuelles depuis le device (capture via `chrome://inspect`)** :
+```
+t.open OK container=393x196 inDOM=true t.cols=80 t.rows=24 vp=392x851 vvh=851
+SIZE[t.onResize] ?x?→36x12
+TIMER[50ms] container=393x196 t=36x12 vvh=851
+TIMER[200ms] container=393x196 t=36x12 vvh=851
+WS first msg: text(36ch)
+firstByte bytes=36 userTyped=false t=36x12 vvh=851
+TIMER[500ms] container=393x196 t=36x12 vvh=851
+vvp.resize vvh=851→803  ← chute spontanée de 48px
+vvp.resize vvh=803→548  ← clavier virtuel monte (spontanément, user n'a rien tapé)
+```
+
+**Comportement reporté par l'utilisateur** : "le prompt apparaît en flash puis disparaît". En **paysage** il est visible, en **portrait** il n'est visible que brièvement.
+
+**Pistes pour l'humain** :
+
+1. **Le clavier virtuel monte spontanément sans interaction** — pourquoi ? (focus automatique sur le textarea caché de ghostty-web ?) La séquence `vvp.resize 851→803→548` se produit ~1100ms après l'ouverture, sans frappe utilisateur. Identifier ce qui déclenche le focus.
+
+2. **Le container reste à `393x196`px** même quand `visualViewport.height` passe à 548. Le `#terminal-panel` ne se contracte pas avec le clavier. À investiguer : pourquoi le layout ne suit pas visualViewport ?
+
+3. **Position du `#terminal-panel` dans le layout mobile** : à inspecter via `chrome://inspect` pendant le flash. Hypothèse : le panel est positionné en bas de l'écran (document-relative) ; quand le clavier monte, il passe sous le clavier.
+
+4. **Test alternatif suggéré** : utiliser `position: fixed; bottom: 0` sur `#terminal-panel` avec une hauteur calculée dynamiquement depuis `visualViewport.height - composerHeight - tabsHeight`. Via JS, écouter `visualViewport.resize` et mettre à jour la hauteur.
+
+5. **ghostty-web est canvas-based** — la "disparition" pourrait être un canvas clear/reflow interne déclenché par un resize ou un event. Instrumenter via `chrome://inspect` pendant le flash.
+
+**Outils à disposition** :
+- `chrome://inspect/#devices` fonctionne (WebView debuggable)
+- Les logs `[terminal-debug]` basiques existent toujours dans `terminal.tsx` (addDebug)
+- Sur device : `/data/data/ai.opencode.mobile/tmp/` est writable pour logs custom si besoin
+
+---
+
+## État du code (changements actifs dans le repo)
+
+### Bug #2 (gardé, fonctionne) :
+- `packages/app/src/components/terminal.tsx` — prop `onSend`
+- `packages/app/src/pages/session/terminal-panel.tsx` — toolbar rewrite
+
+### Bug #3 (gardé, devrait fonctionner) :
+- `packages/mobile/src-tauri/src/runtime.rs` — symlinks vi/vim → /system/bin/toybox
+
+### Diagnostic dormant (peut être retiré si non utile) :
+- `packages/mobile/src-tauri/gen/android/app/src/main/jni/sigsys_trace.c` (nouveau, LD_PRELOAD shim)
+- `packages/mobile/src-tauri/gen/android/app/src/main/jni/CMakeLists.txt` — entrée sigsys_trace ajoutée
+
+### Reverted (aucun effet, supprimés) :
+- `packages/ui/src/styles/base.css` — reset line-height (retiré)
+- `packages/mobile/src/mobile.css` — --terminal-px/py override (retiré)
+- `packages/mobile/index.html` — interactive-widget viewport meta (retiré)
+- `packages/app/src/components/terminal.tsx` — Ctrl-L kick, diagnostic logs verbeux (retirés)
+
+---
+
+## Build + install
+
+```bash
+cd packages/mobile && \
+  ORT_LIB_LOCATION="$PWD/src-tauri/gen/android/app/src/main/jniLibs/arm64-v8a" \
+  bunx tauri android build --debug --target aarch64
+
+adb uninstall ai.opencode.mobile
+adb install src-tauri/gen/android/app/build/outputs/apk/universal/debug/app-universal-debug.apk
+```
+
+**Dernière APK installée** : état 2026-04-20 ~18:55, bug #2 OK, bug #3 fix en place, bug #1 non résolu.
+
+## Vérifications rapides
+
+```bash
+# Bug #3 : après avoir ouvert le terminal dans l'app une fois
+adb shell "run-as ai.opencode.mobile readlink /data/user/0/ai.opencode.mobile/runtime/bin/vi"
+# Attendu : /system/bin/toybox
+```

packages/app/src/components/terminal.tsx

@@ -27,6 +27,7 @@ export interface TerminalProps extends ComponentProps<"div"> {
   onCleanup?: (pty: Partial<LocalPTY> & { id: string }) => void
   onConnect?: () => void
   onConnectError?: (error: unknown) => void
+  onSend?: (fn: ((data: string) => void) | undefined) => void
 }
 
 let shared: Promise<{ mod: typeof import("ghostty-web"); ghostty: Ghostty | undefined }> | undefined
@@ -258,7 +259,7 @@ export const Terminal = (props: TerminalProps) => {
     console.info("[terminal-debug]", msg)
   }
   let container!: HTMLDivElement
-  const [local, others] = splitProps(props, ["pty", "class", "classList", "autoFocus", "onConnect", "onConnectError"])
+  const [local, others] = splitProps(props, ["pty", "class", "classList", "autoFocus", "onConnect", "onConnectError", "onSend"])
   const id = local.pty.id
   const probe = terminalProbe(id)
   const restore = typeof local.pty.buffer === "string" ? local.pty.buffer : ""
@@ -812,6 +813,12 @@ export const Terminal = (props: TerminalProps) => {
         },
       })
 
+      const sendBytes = (data: string) => {
+        if (ws?.readyState === WebSocket.OPEN) ws.send(data)
+      }
+      local.onSend?.(sendBytes)
+      cleanups.push(() => local.onSend?.(undefined))
+
       open()
     }
 

packages/app/src/pages/session/terminal-panel.tsx

@@ -23,43 +23,86 @@ import { getTerminalHandoff, setTerminalHandoff } from "@/pages/session/handoff"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { terminalProbe } from "@/testing/terminal"
 
-/** Send a key sequence to the active terminal by dispatching a KeyboardEvent to its textarea. */
-function sendTerminalKey(id: string, key: string, opts?: { ctrlKey?: boolean; code?: string }) {
+function focusTerminalTextarea(id: string) {
   const wrapper = document.getElementById(`terminal-wrapper-${id}`)
-  if (!wrapper) return
-  const textarea = wrapper.querySelector("textarea")
-  if (!textarea) return
-  textarea.focus()
-  const event = new KeyboardEvent("keydown", {
-    key,
-    code: opts?.code ?? key,
-    ctrlKey: opts?.ctrlKey ?? false,
-    bubbles: true,
-    cancelable: true,
-  })
-  textarea.dispatchEvent(event)
+  const textarea = wrapper?.querySelector("textarea")
+  if (textarea && document.activeElement !== textarea) textarea.focus()
 }
 
-function TerminalMobileToolbar(props: { activeId: () => string | undefined }) {
+function TerminalMobileToolbar(props: {
+  activeId: () => string | undefined
+  sendBytes: (id: string, data: string) => void
+}) {
   const [ctrlActive, setCtrlActive] = createSignal(false)
+  const [altActive, setAltActive] = createSignal(false)
 
-  const send = (key: string, code?: string) => {
+  function emit(data: string) {
     const id = props.activeId()
     if (!id) return
-    sendTerminalKey(id, key, { ctrlKey: ctrlActive(), code })
-    if (ctrlActive()) setCtrlActive(false)
+    props.sendBytes(id, data)
+    focusTerminalTextarea(id)
+  }
+
+  function sendKey(bytes: string) {
+    let out = bytes
+    if (altActive()) {
+      out = "\x1b" + out
+      setAltActive(false)
+    }
+    emit(out)
   }
 
-  const keys = [
-    { label: "Esc", action: () => send("Escape", "Escape") },
-    { label: "Tab", action: () => send("Tab", "Tab") },
-    { label: "↑", action: () => send("ArrowUp", "ArrowUp") },
-    { label: "↓", action: () => send("ArrowDown", "ArrowDown") },
-    { label: "←", action: () => send("ArrowLeft", "ArrowLeft") },
-    { label: "→", action: () => send("ArrowRight", "ArrowRight") },
-    { label: "|", action: () => send("|") },
-    { label: "/", action: () => send("/") },
-    { label: "~", action: () => send("~") },
+  function sendChar(ch: string) {
+    if (ctrlActive()) {
+      const upper = ch.toUpperCase()
+      const code = upper.charCodeAt(0)
+      if (code >= 0x40 && code <= 0x5f) {
+        let byte = String.fromCharCode(code - 0x40)
+        if (altActive()) {
+          byte = "\x1b" + byte
+          setAltActive(false)
+        }
+        emit(byte)
+        setCtrlActive(false)
+        return
+      }
+      setCtrlActive(false)
+    }
+    sendKey(ch)
+  }
+
+  const btnBase = "shrink-0 px-3 h-8 rounded-md text-13-medium border"
+  const btnNormal = "bg-surface-base text-text-base border-border-base active:bg-surface-base-active"
+  const btnActive = "bg-text-strong text-background-base border-text-strong"
+
+  const keys: { label: string; action: () => void }[] = [
+    { label: "Esc", action: () => sendKey("\x1b") },
+    { label: "Tab", action: () => sendKey("\t") },
+    { label: "↑", action: () => sendKey("\x1b[A") },
+    { label: "↓", action: () => sendKey("\x1b[B") },
+    { label: "→", action: () => sendKey("\x1b[C") },
+    { label: "←", action: () => sendKey("\x1b[D") },
+    { label: "Home", action: () => sendKey("\x1b[H") },
+    { label: "End", action: () => sendKey("\x1b[F") },
+    { label: "PgUp", action: () => sendKey("\x1b[5~") },
+    { label: "PgDn", action: () => sendKey("\x1b[6~") },
+    { label: "Del", action: () => sendKey("\x1b[3~") },
+    { label: "F1", action: () => sendKey("\x1bOP") },
+    { label: "F2", action: () => sendKey("\x1bOQ") },
+    { label: "F3", action: () => sendKey("\x1bOR") },
+    { label: "F4", action: () => sendKey("\x1bOS") },
+    { label: "F5", action: () => sendKey("\x1b[15~") },
+    { label: "F6", action: () => sendKey("\x1b[17~") },
+    { label: "F7", action: () => sendKey("\x1b[18~") },
+    { label: "F8", action: () => sendKey("\x1b[19~") },
+    { label: "F9", action: () => sendKey("\x1b[20~") },
+    { label: "F10", action: () => sendKey("\x1b[21~") },
+    { label: "F11", action: () => sendKey("\x1b[23~") },
+    { label: "F12", action: () => sendKey("\x1b[24~") },
+    { label: ":", action: () => sendChar(":") },
+    { label: "|", action: () => sendChar("|") },
+    { label: "/", action: () => sendChar("/") },
+    { label: "~", action: () => sendChar("~") },
   ]
 
   return (
@@ -70,10 +113,10 @@ function TerminalMobileToolbar(props: { activeId: () => string | undefined }) {
     >
       <button
         type="button"
-        class="shrink-0 px-3 h-8 rounded-md text-13-medium border"
+        class={btnBase}
         classList={{
-          "bg-text-strong text-background-base border-text-strong": ctrlActive(),
-          "bg-surface-base text-text-base border-border-base": !ctrlActive(),
+          [btnActive]: ctrlActive(),
+          [btnNormal]: !ctrlActive(),
         }}
         onPointerDown={(e) => {
           e.preventDefault()
@@ -82,11 +125,25 @@ function TerminalMobileToolbar(props: { activeId: () => string | undefined }) {
       >
         Ctrl
       </button>
+      <button
+        type="button"
+        class={btnBase}
+        classList={{
+          [btnActive]: altActive(),
+          [btnNormal]: !altActive(),
+        }}
+        onPointerDown={(e) => {
+          e.preventDefault()
+          setAltActive(!altActive())
+        }}
+      >
+        Alt
+      </button>
       <For each={keys}>
         {(k) => (
           <button
             type="button"
-            class="shrink-0 px-3 h-8 rounded-md text-13-medium bg-surface-base text-text-base border border-border-base active:bg-surface-base-active"
+            class={`${btnBase} ${btnNormal}`}
             onPointerDown={(e) => {
               e.preventDefault()
               k.action()
@@ -115,6 +172,7 @@ export function TerminalPanel() {
   const height = createMemo(() => layout.terminal.height())
   const close = () => view().terminal.close()
   let root: HTMLDivElement | undefined
+  const sendHandles = new Map<string, (data: string) => void>()
 
   const [store, setStore] = createStore({
     autoCreated: false,
@@ -365,7 +423,10 @@ export function TerminalPanel() {
                 </Tabs.List>
               </Tabs>
               <Show when={isMobile()}>
-                <TerminalMobileToolbar activeId={() => terminal.active()} />
+                <TerminalMobileToolbar
+                  activeId={() => terminal.active()}
+                  sendBytes={(id, data) => sendHandles.get(id)?.(data)}
+                />
               </Show>
               <div class="flex-1 min-h-0 relative">
                 {(() => {
@@ -387,6 +448,7 @@ export function TerminalPanel() {
                             onConnect={() => ops.trim(pty.id)}
                             onCleanup={ops.update}
                             onConnectError={() => ops.clone(pty.id)}
+                            onSend={(fn) => { if (fn) sendHandles.set(pty.id, fn); else sendHandles.delete(pty.id) }}
                           />
                         </div>
                       )}

packages/mobile/src-tauri/gen/android/app/src/main/jni/CMakeLists.txt

@@ -55,6 +55,19 @@ target_link_libraries(llama_jni
 add_library(rust_pty SHARED rust_pty.c)
 target_link_libraries(rust_pty android log)
 
+# ─── SIGSYS trace shim ───────────────────────────────────────────────
+# LD_PRELOAD into child processes spawned by pty_server to capture the
+# exact seccomp-blocked syscall number. Diagnostic-only; remove once
+# the blocking syscall is identified and worked around.
+add_library(sigsys_trace SHARED sigsys_trace.c)
+target_link_libraries(sigsys_trace log)
+
+# pty_server.c is NOT built here — CMake add_library produces a .so that
+# cannot be executed via ProcessBuilder (needs PIE executable). The pre-
+# built binary in jniLibs/arm64-v8a/libpty_server.so (PIE) is used as-is.
+# To instrument pty_server's children, set LD_PRELOAD in LlamaService.kt
+# before ProcessBuilder.start() — children inherit env via fork+exec.
+
 # NOTE: resolv_override.c is NOT built here. NDK compiles against Bionic,
 # but bun uses musl — a Bionic .so cannot be LD_PRELOADed into a musl process.
 # DNS is handled via dns.setServers() in mobile-entry.ts.