fix(mobile): keep tab bar and empty states clear of the keyboard

[iscekic]

Changelog for users

• The bottom tab bar hides while the keyboard is open, so the HOME/AGENTS/PROFILE labels no longer sit under the keyboard accessory strip.
• The tab bar returns in place when the keyboard closes, with no content jump.
• The Agents no-match state keeps its message, its second line, and its Clear search action visible above the tab bar in a short landscape window.
• The new-session button no longer floats over the Agents no-match state; it returns as soon as the list has rows again.
• In a cramped landscape window the empty state drops its decorative icon and shows the title, description, and action only.

Changelog for maintainers

• apps/mobile/src/components/agents/session-list-screen.tsx:309 — accepted: showFab now also excludes the no-match body (!noMatchBody), so the FAB yields the band that state fills; the rows list keeps the FAB and clears it with its own frame inset, and the load-failure body keeps it as the only creation affordance while the list is failing.
• apps/mobile/src/components/empty-state.tsx:21 — accepted: the fixed FULL_FORM_BAND constant is gone; the compact form is chosen by comparing the band against the full form's own measured height, so Dynamic Type, wrapped copy, and the pull-to-refresh line cannot select a form the band overflows.
• tabBarHideOnKeyboard: true sits on the shared tabs screenOptions, so every tab hides the bar while the IME is up; the bar keeps its absolute placement, so hiding it moves no surrounding layout and dismissal restores it in place.
• The centered-state band now ends at the tab bar's top edge: getCenteredStateBand computes the visible viewport clipped to the surface and reserved insets, and getCenteredStateLayout shares it so centering and compaction read the same numbers.
• CenteredState publishes the measured band through CenteredStateBandContext (useCenteredStateBand lives in its own module so consumers resolve it when the component is mocked) and measures the pull-to-refresh line above its children, subtracting that height so a child compacts on the space it actually gets.
• CenteredEmptyStateContent keeps the last measured full-form height, switches form during render, and blanks the form until the new form's own layout lands.
• Review first the measured-height state machine: the first frame renders the full form before it can compact, and the kept height refreshes only when the full form renders again. The tab bar now hides for any focused text field on a tab screen, not only Agents search.
• Proof updated: the landscape no-match capture now shows the state above the tab bar with no FAB over it and Clear search restoring New session (e1); the load-failure state keeps Retry and New session and New session opens the composer (e2, e3). The tab-bar-hide, cross-platform, and portrait captures still hold.

E2E proof

Owner request

Explorer finding: agents-search-empty: The keyboard accessory bar covers the bottom tab bar so the HOME/AGENTS/PROFILE labels are clipped and the empty-state second line is not visible.

The user-agent explorer found this while using the app like a user.
One finding per item; the explorer never edits product code.

Flow: agents-search-empty
Found on revision: f2181ae

Repro:

1. set this state first: account e2e-mobile-cloud-android@example.com; credits 24; reviews 5; org; session question; uimode day; size 540x1200; battery 61 charging; density 240; rotate landscape; relaunch; the device in light mode
2. open the app on emulator-5602
3. reach agents-search-empty
4. the capture shows the defect named below

Observed: The keyboard accessory bar covers the bottom tab bar so the HOME/AGENTS/PROFILE labels are clipped and the empty-state second line is not visible.
Expected: the screen renders without this defect

Evidence (from the device run):

E2E proof — log excerpts

[e2] Android landscape 800x360dp, sessions request failing with no cached rows:  -> pass :: nextjs killed with <internal>(e2-nextjs-down.log) and the app cold-launched with no cached rows, so the centred load-failure block rendered instead of the cached-rows refresh line: e2-landscape.digest.log DIGEST A (landscape 2400x1080 = 800x360dp at density 480, read through the sim session that holds the rotation appium resets) carries '- Button "Retry" [ref=e8]' and '- Button "New session" [ref=e10]', and after tapping it DIGEST B carries '- EditText "What would you like to work on?" [ref=e3]'; the same 8 steps (screen, tap AGENTS, four asserts, tap New session, assert the composer) passed in one appium session - e2-scene.log 'SCENE e2 OK'. Stills of both moments for the visual reviewer: e2

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-4559/e2e-mobile-app/e2-scene.log

android.widget.TextView Retry tappable [500,2146][579,2192]
SCENE e2 OK
android.widget.LinearLayout com.kilocode.kiloapp:id/action_bar_root tappable [0,0][1080,2400]
android.widget.FrameLayout android:id/content tappable [0,0][1080,2400]
android.widget.Button Go back tappable [0,84][101,185]
android.view.View New session tappable [111,102][1044,167]
android.widget.EditText What would you like to work on? tappable [58,271][1024,502]
android.widget.Button Add attachment tappable [58,507][140,590]
android.widget.Button Paste from clipboard tappable [150,507][232,590]
android.widget.Button Start voice input tappable [931,502][1023,594]
android.view.View Couldn't load models tappable [344,846][737,911]
android.widget.TextView Check your connection and try again. tappable [268,920][814,966]
android.widget.Button Retry tappable [462,1003][620,1119]
android.widget.TextView Retry tappable [501,1037][580,1083]
android.widget.TextView Run on tappable [37,1203][1045,1249]
android.widget.Button Run on: Cloud Agent tappable [37,1267][909,1384]
android.widget.TextView Cloud Agent tappable [67,1297][844,1353]
android.widget.Button Refresh tappable [928,1267][1043,1382]
android.widget.TextView Run `kilo remote` on your computer, or `/remote` in a running CLI session, to control a local kilo process. tappable [36,1402][1044,1476]
android.widget.TextView Repository tappable [37,1522][1045,1568]
android.view.View Couldn't load GitHub repositories tappable [230,1955][850,2020]
android.widget.TextView Check your connection and try again. tappable [267,2029][813,2075]
android.widget.Button Retry tappable [461,2112][619,2228]
android.widget.TextView Retry tappable [500,2146][579,2192]

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-4559/e2e-mobile-app/e2-landscape.digest.log

- Button "See all" [ref=e2]
- TextView "SEE ALL" [ref=e3]
- ScrollView "centered-state" [ref=e4]
- TextView "Connecting…" [ref=e5]
- android.view.View "Something went wrong" [ref=e6]
- TextView "Could not load active sessions" [ref=e7]
- Button "Retry" [ref=e8]
- TextView "Retry" [ref=e9]
- Button "New session" [ref=e10]
- android.view.View "Home, tab, 1 of 3" [ref=e11]
- TextView "HOME" [ref=e12]
- android.view.View "Agents, tab, 2 of 3" [checked] [ref=e13]
- TextView "AGENTS" [checked] [ref=e14]
- android.view.View "Profile, tab, 3 of 3" [ref=e15]
- TextView "PROFILE" [ref=e16]
=== DIGEST B: after tapping the New session button (e2) ===
- Button "Go back" [ref=e1]
- android.view.View "New session" [ref=e2]
- EditText "What would you like to work on?" [ref=e3]
- Button "Add attachment" [ref=e4]
- Button "Paste from clipboard" [ref=e5]
- Button "Start voice input" [ref=e6]
- android.view.View "Couldn't load models" [ref=e7]
- TextView "Check your connection and try again." [ref=e8]

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-4559/e2e-mobile-app/e2-nextjs-down.log

<internal>(port 6100 refuses; pids 239667 )

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-4559/e2e-mobile-app/e3-run.log

android.widget.TextView PROFILE tappable [733,2281][1067,2320]
SCENE e3fab OK
android.widget.LinearLayout com.kilocode.kiloapp:id/action_bar_root tappable [0,0][1080,2400]
android.widget.FrameLayout android:id/content tappable [0,0][1080,2400]
android.widget.Button Go back tappable [0,84][101,185]
android.view.View New session tappable [111,102][1044,167]
android.widget.EditText What would you like to work on? tappable [58,271][1024,502]
android.widget.Button Add attachment tappable [58,507][140,590]
android.widget.Button Paste from clipboard tappable [150,507][232,590]
android.widget.Button Start voice input tappable [931,502][1023,594]
android.view.View Couldn't load models tappable [344,846][737,911]
android.widget.TextView Check your connection and try again. tappable [268,920][814,966]
android.widget.Button Retry tappable [462,1003][620,1119]
android.widget.TextView Retry tappable [501,1037][580,1083]
android.widget.TextView Run on tappable [37,1203][1045,1249]
android.widget.Button Run on: Cloud Agent tappable [37,1267][909,1384]
android.widget.TextView Cloud Agent tappable [67,1297][844,1353]
android.widget.Button Refresh tappable [928,1267][1043,1382]
android.widget.TextView Run `kilo remote` on your computer, or `/remote` in a running CLI session, to control a local kilo process. tappable [36,1402][1044,1476]
android.widget.TextView Repository tappable [37,1522][1045,1568]
android.view.View Couldn't load GitHub repositories tappable [230,1955][850,2020]
android.widget.TextView Check your connection and try again. tappable [267,2029][813,2075]
android.widget.Button Retry tappable [461,2112][619,2228]
android.widget.TextView Retry tappable [500,2146][579,2192]

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

The keyboard clearance and measured-band changes are sound: showFab now excludes the no-match body (!noMatchBody) so the FAB yields the band that state fills, the fixed FULL_FORM_BAND estimate is replaced by the full form's own measured height, and centering and compaction both read getCenteredStateBand; both previous findings are resolved at HEAD.

Files Reviewed (10 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.mounted.test.tsx
• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/agents/session-list-screen.mounted.test.tsx
• apps/mobile/src/components/agents/session-list-screen.tsx
• apps/mobile/src/components/centered-state-band.ts
• apps/mobile/src/components/centered-state.tsx
• apps/mobile/src/components/empty-state.mounted.test.tsx
• apps/mobile/src/components/empty-state.tsx
• apps/mobile/src/lib/centered-state-layout.test.ts
• apps/mobile/src/lib/centered-state-layout.ts

Previous Review Summary (commit d1191eb)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit d1191eb)

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	2
SUGGESTION	0

Issue Details (click to expand)

WARNING

File	Line	Issue
apps/mobile/src/components/agents/session-list-screen.tsx	309	Centered no-match/error bodies now share a band with the still-rendered FAB, which can overlap the state's action
apps/mobile/src/components/empty-state.tsx	21	FULL_FORM_BAND is a fixed 168pt that ignores font scale, copy wrapping, and reduced motion, so bands in [168, realHeight) skip the compact fallback and park content behind the bottom overlay

Files Reviewed (10 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.mounted.test.tsx
• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/agents/session-list-screen.mounted.test.tsx
• apps/mobile/src/components/agents/session-list-screen.tsx - 1 issue
• apps/mobile/src/components/centered-state-band.ts
• apps/mobile/src/components/centered-state.tsx
• apps/mobile/src/components/empty-state.mounted.test.tsx
• apps/mobile/src/components/empty-state.tsx - 1 issue
• apps/mobile/src/lib/centered-state-layout.test.ts
• apps/mobile/src/lib/centered-state-layout.ts

Fix these issues in Kilo Cloud

---

_{Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0}

_{Review guidance: REVIEW.md from base branch main}