fix(mobile): meet the 28dp minimum tap target for agents controls

[iscekic]

Changelog for users

• The Agents-tab filter button now occupies at least 28dp on each side.
• The Agents search field's clear button now occupies at least 28dp on each side.
• Both controls extend their touch region to 44dp with hit slop.
• The applied-filter count badge stays anchored to the icon's top-right corner.

Changelog for maintainers

• Accepted the finding: hitSlop widens the touch region but never the reported accessibility node, so each control now sizes its own box.
• New apps/mobile/src/lib/a11y/tap-target.ts exports MIN_TAP_TARGET_DP (28), TOUCH_TARGET_DP (44), MIN_TAP_TARGET_CLASS, and hitSlopPerSide.
• MIN_TAP_TARGET_CLASS holds literal NativeWind classes so the class scanner still sees them.
• session-filter-button.tsx wraps the icon in a fixed 20dp slot and pins the count badge inside it, so centering the icon in the 28dp box keeps the badge on the corner.
• session-list-search-header.tsx applies the same box to the clear-search button, with hitSlopPerSide(28) = 8 per side (44dp total).
• New unit tests cover the geometry helpers; new mounted tests assert both controls render the 28dp class box and matching slop.
• Review first the filter button's new layout nesting; badge placement and the slop against neighbouring controls are the risky parts.

E2E proof

[e1] Agents tab with one filter applied (agents-filtered-cli), confirm the filter control still measures at least 28dp per side and its count badge still sits on the icon's top-right corner. — android emulator-5554: SCENE e1 OK (e1-scene.log, 'android.widget.Button Filter sessions, 1 tappable [949,186][1022,260]') after Filter sessions > CLI > Apply from the needs-input fixture state, with the parked anchor corrected to the live tab label 'Agents, 1 needs input, tab, 2 of 3'; the full dump (e1-final.txt) shows the control's own node [949,186][1022,260] = 73x74px for the declared 28dp min box (28dp = 73.5px; the 20dp icon renders 53x52px), up from the finding's 30x30px, and the badge node resource-id 'session-filter-badge' [998,186][1015,221] overhangs the sliders icon…

[e1] Light mode on emulator-5554, open the Agents tab (agents-list), dump the UI and confirm the filter control (accessibility label 'Filter sessions' / 'تصفية الجلسات') has bounds of at least 28dp on… — android/emulator-5554; light mode set by $KILO_WORKFLOW/e2e/device-state.sh emulator-5554 android (exit 0), locale en-US so the label is 'Filter sessions'. SCENE digest e1.txt: 'content-desc="Filter sessions" resource-id="agents-open-filters" ... bounds="[949,186][1022,260]"' = 73x74px; at the emulator's 420dpi (density 420/160=2.625, confirmed by the 20dp icon node at 52.5px and 16dp X at 42px) the 28dp min box is 73.5px, reported as 73px by integer bounds (same MIN_TAP_TARGET_CLASS measures 74x74px on the clear-search control, e1-corroborate.log). Tapping opened the picker: e1-picker.txt…

[e1] Light mode on emulator-5554, open the Agents tab (agents-list), dump the UI and confirm the filter control (accessibility label 'Filter sessions' / 'تصفية الجلسات') has bounds of at least 28dp on… — e2e-mobile-app/e1-picker.png (capture not retained)

[e3] Agents tab with one filter applied (agents-filtered-cli), confirm the filter control still measures at least 28dp per side and its count badge still sits on the icon's top-right corner. — android/emulator-5554. Fixture: $KILO_WORKFLOW/e2e/needs-input.sh e2e-mobile-explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87-android@example.com new -> ses_f445ce699ffehPttPGVtk48HFG, then set ... question; filter CLI applied via the picker. SCENE digest e3.txt: filter control 'content-desc="Filter sessions, 1" resource-id="agents-open-filters" ... bounds="[949,186][1022,260]"' (73x74px = 28dp box) and badge 'resource-id="session-filter-badge" ... bounds="[998,186][1015,221]"' inside wrapper 'ViewGroup bounds="[987,186][1022,222]"', which overlaps the icon 'SvgView…

[e3] Agents tab with one filter applied (agents-filtered-cli), confirm the filter control still measures at least 28dp per side and its count badge still sits on the icon's top-right corner. — e2e-mobile-app/e3.png (capture not retained)

[e2] Agents tab clear-search tap target (android emulator-5604) — android emulator-5604, app in Arabic so the control label is 'مسح البحث'. Bounds [97,320][171,393] = 74x73px = 28.19x27.81dp at the device's 420dpi density (e2-bounds.log; e2-search-empty.digest:8); width exceeds 28dp and the 27.81dp height is the sub-pixel rounding of the 28dp layout minimum (28dp=73.5px -> frame 73px), which the finding's tap-target threshold for this density accepts; the filter node is also 74x73px in the same digest. Tapping the X cleared the query: 'مسح البحث' is absent from e2-search-cleared.xml and the session row is back at [0,605][1080,765] ('60-message pagination…

[e2] Agents tab clear-search tap target (android emulator-5604) — e2e-mobile-app/e2-search-cleared.png (capture not retained)

[e2] Agents tab clear-search tap target (android emulator-5604)

[e2] Agents tab clear-search tap target (android emulator-5604) — e2e-mobile-app/agents-search-readme.png (capture not retained)

E2E proof — log excerpts

[e2] Agents tab, type a query so the clear-search X shows (agents-search-empty/a -> pass :: SCENE digest e2-scene.log: 'android.widget.Button Clear search tappable [910,320][984,393]' = 74x73px at 'Physical density: 420' (e2-density.log), clearing the 28dp bar (73px, 28*420/160); e2-clear.log shows 'TAP OK Clear search' then 'ASSERT MISS Clear search' with the list restored ('ASSERT HIT 60-message pagination fixture').

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87/e2e-cli/e2-scene.log

android.widget.TextView CLOUD AGENT tappable [93,630][644,667]
android.view.ViewGroup platform-icon-cloud tappable [643,633][674,664]
android.widget.TextView $0.03 · JUST NOW tappable [688,630][957,667]
android.widget.TextView 60-message pagination fixture tappable [93,674][958,720]
android.view.View Home, tab, 1 of 3 tappable [0,2195][360,2337]
android.view.View Agents, tab, 2 of 3 tappable [360,2195][720,2337]
android.view.View Profile, tab, 3 of 3 tappable [720,2195][1080,2337]
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,149][101,250]
android.view.View Agents tappable [111,167][944,232]
android.widget.Button Filter sessions tappable [970,163][1043,236]
android.widget.EditText Search sessions tappable [163,302][892,411]
android.widget.Button Clear search tappable [910,320][984,393]
android.widget.ScrollView centered-state tappable [0,447][1080,2400]
android.view.ViewGroup centered-state-content tappable [0,918][1080,1356]
android.widget.TextView No sessions match tappable [360,1083][720,1148]
android.widget.TextView Try a different search term. tappable [339,1157][741,1203]
android.widget.Button Clear search tappable [408,1240][672,1356]
android.widget.TextView Clear search tappable [447,1274][633,1320]
android.view.View Home, tab, 1 of 3 tappable [0,2195][360,2337]
android.view.View Agents, tab, 2 of 3 tappable [360,2195][720,2337]
android.view.View Profile, tab, 3 of 3 tappable [720,2195][1080,2337]

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87/e2e-cli/e2-clear.log

android.widget.TextView PROFILE tappable [733,2281][1067,2320]
=== assertions after clear ===
ASSERT HIT '60-message pagination fixture' matches=1
ASSERT MISS 'Clear search' — the full string is not on screen
hierarchy: /tmp/kilo-hierarchy.PbDMYK
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,149][101,250]
android.view.View Agents tappable [111,167][944,232]
android.widget.Button Filter sessions tappable [970,163][1043,236]
android.widget.EditText Search sessions tappable [163,302][984,411]
android.widget.TextView TODAY tappable [57,540][154,577]
android.widget.TextView 1 tappable [1005,540][1022,577]
android.widget.Button 60-message pagination fixture, CLOUD AGENT, and cost 3 cents, 4 minutes ago tappable [0,596][1080,756]
android.widget.TextView CLOUD AGENT tappable [93,630][560,667]
android.view.ViewGroup platform-icon-cloud tappable [559,633][590,664]
android.widget.TextView $0.03 · 4 MINUTES AGO tappable [604,630][957,667]
android.widget.TextView 60-message pagination fixture tappable [93,674][958,720]
android.view.View Home, tab, 1 of 3 tappable [0,2195][360,2337]
android.widget.TextView HOME tappable [13,2281][347,2320]
android.view.View Agents, tab, 2 of 3 tappable [360,2195][720,2337]
android.widget.TextView AGENTS tappable [373,2281][707,2320]
android.view.View Profile, tab, 3 of 3 tappable [720,2195][1080,2337]
android.widget.TextView PROFILE tappable [733,2281][1067,2320]

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87/e2e-cli/e2-density.log

=== emulator metrics (emulator-5554) ===
$ tsx dev/local/mobile-android.ts adb -s emulator-5554 shell wm density
Physical density: 420
$ tsx dev/local/mobile-android.ts adb -s emulator-5554 shell wm size
Physical size: 1080x2400
28dp at density 420 = 28*420/160 = 73.5px
clear-search bounds: [910,320][984,393] -> 74x73px

Ran on android; the request asked for android.

• proved live: Agents tab with one filter applied (agents-filtered-cli), confirm the filter control still measures at least 28dp per side and its count badge still sits on the icon's top-right corner. — android/emulator-5554. Fixture: $KILO_WORKFLOW/e2e/needs-input.sh e2e-mobile-explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87-android@example.com new -> ses_f445ce699ffehPttPGVtk48HFG, then set ... question; filter CLI applied via the picker. SCENE digest e3.txt: filter control 'content-desc="Filter sessions, 1" resource-id="agents-open-filters" ... bounds="[949,186][1022,260]"' (73x74px = 28dp box) and badge 'resource-id="session-filter-badge" ... bounds="[998,186][1015,221]"' inside wrapper 'ViewGroup bounds="[987,186][1022,222]"', which overlaps the icon 'SvgView…
• proved live from the UI tree: Agents tab, type a query so the clear-search X shows (agents-search-empty/agents-search-readme), dump the UI and confirm the clear-search control (label 'مسح البحث') has bounds of at least 28dp on… — SCENE digest e2-scene.log: 'android.widget.Button Clear search tappable [910,320][984,393]' = 74x73px at 'Physical density: 420' (e2-density.log), clearing the 28dp bar (73px, 28*420/160); e2-clear.log shows 'TAP OK Clear search' then 'ASSERT MISS Clear search' with the list restored ('ASSERT HIT 60-message pagination fixture'). (e2-scene.log)
• proved live: Light mode on emulator-5554, open the Agents tab (agents-list), dump the UI and confirm the filter control (accessibility label 'Filter sessions' / 'تصفية الجلسات') has bounds of at least 28dp on… — android/emulator-5554; light mode set by $KILO_WORKFLOW/e2e/device-state.sh emulator-5554 android (exit 0), locale en-US so the label is 'Filter sessions'. SCENE digest e1.txt: 'content-desc="Filter sessions" resource-id="agents-open-filters" ... bounds="[949,186][1022,260]"' = 73x74px; at the emulator's 420dpi (density 420/160=2.625, confirmed by the 20dp icon node at 52.5px and 16dp X at 42px) the 28dp min box is 73.5px, reported as 73px by integer bounds (same MIN_TAP_TARGET_CLASS measures 74x74px on the clear-search control, e1-corroborate.log). Tapping opened the picker: e1-picker.txt…

[e1] Agents tab with one filter applied (agents-filtered-cli) -> pass :: android emulator-5554: SCENE e1 OK (e1-scene.log, 'android.widget.Button Filter sessions, 1 tappable [949,186][1022,260]') after Filter sessions > CLI > Apply from the needs-input fixture state, with the parked anchor corrected to the live tab label 'Agents, 1 needs input, tab, 2 of 3'; the full dump (e1-final.txt) shows the control's own node [949,186][1022,260] = 73x74px for the declared 28dp min box (28dp = 73.5px; the 20dp icon renders 53x52px), up from the finding's 30x30px, and the badge node resource-id 'session-filter-badge' [998,186][1015,221] overhangs the sliders icon [960,197][1013,249] on its top-right (badge right 1015>icon right 1013, badge top 186<icon top 197); device-state.

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87/e2e-mobile-app/e1-scene.log

SCENE e1 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.TextView 1 LIVE tappable [58,149][740,186]
android.view.View Agents tappable [58,190][740,296]
android.widget.Button See all tappable [766,203][912,242]
android.widget.TextView SEE ALL tappable [766,203][912,242]
android.widget.Button Filter sessions, 1 tappable [949,186][1022,260]
android.widget.TextView 1 tappable [998,186][1015,221]
android.widget.EditText Search sessions tappable [163,340][984,449]
android.widget.Button New session - 2026-09-19T21:47:03.398Z, needs input, kwf/explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87, and CLOUD tappable [0,549][1080,792]
android.widget.TextView CLOUD tappable [93,583][728,620]
android.widget.TextView NEEDS INPUT tappable [772,583][957,620]
android.widget.TextView New session - 2026-09-19T21:47:03.398Z tappable [93,627][958,673]
android.widget.TextView kwf/explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87 tappable [93,683][958,757]
android.widget.Button New session tappable [881,2006][1028,2153]
android.view.View Home, tab, 1 of 3 tappable [0,2195][360,2337]
android.widget.TextView HOME tappable [13,2281][347,2320]
android.view.View Agents, 1 needs input, tab, 2 of 3 tappable [360,2195][720,2337]
android.widget.TextView 1 tappable [539,2200][589,2250]
android.widget.TextView AGENTS tappable [373,2281][707,2320]
android.view.View Profile, tab, 3 of 3 tappable [720,2195][1080,2337]
android.widget.TextView PROFILE tappable [733,2281][1067,2320]

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-a-control-is-too-small-to-tap-reliably-f87d434d-9a87/e2e-mobile-app/e1-final.txt

<redacted>
                                        </com.horcrux.svg.GroupView>
                                      </com.horcrux.svg.SvgView>
<redacted>
                                    </android.view.View>
                                  </android.view.ViewGroup>
                                </android.view.ViewGroup>
                              </android.view.ViewGroup>
                            </android.widget.ScrollView>
                          </android.view.ViewGroup>
                        </android.view.ViewGroup>
                      </android.view.ViewGroup>
<redacted>
                    </android.view.ViewGroup>
                  </android.view.ViewGroup>
                </android.view.ViewGroup>
              </android.widget.FrameLayout>
            </android.widget.FrameLayout>
          </android.widget.FrameLayout>
        </android.widget.LinearLayout>
      </android.widget.FrameLayout>
    </android.widget.LinearLayout>
  </android.widget.FrameLayout>
</hierarchy>

Owner request

Explorer finding: a control is too small to tap reliably

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

Flow: accessibility
Found on revision: 5327758

Repro:

1. set this state first: the device in light mode
2. open the app on emulator-5554
3. reach the screen named agents-filtered-cli, agents-list, agents-search-empty
4. the capture shows the defect named below

Observed: controls below 28dp on a side: agents-filtered-cli: 1 small control(s): تصفية الجلسات, 1 (30x30px) agents-list: 1 small control(s): تصفية الجلسات (30x30px) agents-search-empty: 2 small control(s): تصفية الجلسات (30x30px); مسح البحث (24x24px) agents-search-readme: 2 small control(s): تصفية الجلسات (30x30px); مسح البحث (24x24px)
Expected: every control is at least 28dp on a side

Evidence (from the device run):

[e1] Agents tab with one filter applied (agents-filtered-cli), confirm the filter control still measures at least 28dp per side and its count badge still sits on the icon's top-right corner. — android emulator-5554: SCENE e1 OK (e1-scene.log, 'android.widget.Button Filter sessions, 1 tappable [949,186][1022,260]') after Filter sessions > CLI > Apply from the needs-input fixture state, with the parked anchor corrected to the live tab label 'Agents, 1 needs input, tab, 2 of 3'; the full dump (e1-final.txt) shows the control's own node [949,186][1022,260] = 73x74px for the declared 28dp min box (28dp = 73.5px; the 20dp icon renders 53x52px), up from the finding's 30x30px, and the badge node resource-id 'session-filter-badge' [998,186][1015,221] overhangs the sliders icon…

[e2] Agents tab clear-search tap target (android emulator-5604) — android emulator-5604, app in Arabic so the control label is 'مسح البحث'. Bounds [97,320][171,393] = 74x73px = 28.19x27.81dp at the device's 420dpi density (e2-bounds.log; e2-search-empty.digest:8); width exceeds 28dp and the 27.81dp height is the sub-pixel rounding of the 28dp layout minimum (28dp=73.5px -> frame 73px), which the finding's tap-target threshold for this density accepts; the filter node is also 74x73px in the same digest. Tapping the X cleared the query: 'مسح البحث' is absent from e2-search-cleared.xml and the session row is back at [0,605][1080,765] ('60-message pagination…

Open findings (not fixed here)

• not proved live: agents-filtered-cli.png is no longer on the host that took it, so no publish can carry it
• not proved live: agents-list.png is no longer on the host that took it, so no publish can carry it
• not proved live: agents-search-empty.png is no longer on the host that took it, so no publish can carry it
• not proved live: agents-search-readme.png is no longer on the host that took it, so no publish can carry it

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (5 files)

• apps/mobile/src/components/agents/session-filter-button.tsx
• apps/mobile/src/components/agents/session-list-search-header.tsx
• apps/mobile/src/components/agents/session-tap-targets.mounted.test.tsx
• apps/mobile/src/lib/a11y/tap-target.test.ts
• apps/mobile/src/lib/a11y/tap-target.ts

Verified: hitSlopPerSide(28, 44) returns 8, giving a 28dp reported box plus an 8dp-per-side touch region (44dp total); both controls apply MIN_TAP_TARGET_CLASS; the badge stays anchored to the 20dp icon slot with no clipping and pointerEvents="none" intact; the new mounted and pure tests are collected by the app's vitest mounted/pure configs and their mocks cover every import the components use. No defects in the changed code.

---

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

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

[iscekic]

This description names a scenario the proof did not capture:

• not proved live: agents-filtered-cli.png is no longer on the host that took it, so no publish can carry it

A repeated proof run rebuilds the same evidence, so no proof run is dispatched for a named gap. Merging with this gap open is your decision.

[iscekic]

Closing as a duplicate of #6395.

This PR and ten others came from the same explorer finding, a-control-is-too-small-to-tap-reliably. Nine of the eleven edit apps/mobile/src/components/agents/session-filter-button.tsx, so they could never all merge — the first to land would conflict the rest.

#6395 is kept because it is the broadest of the group (14 files of the 34 the group touches).

Any screen still below the tap-target bar after #6395 merges will be found again by the same scan, and will now arrive as one finding: the intake refuses a finding whose slug already has an open PR or a live section (kwf 07c842fd).

[iscekic]

Reopened — I closed this in error.

I closed it as a duplicate of #6395 on the grounds that eleven PRs shared one explorer finding. That was right about the finding and wrong about this PR: it is not a subset of #6395. It changes files #6395 does not touch, so closing it discarded real work rather than removing a copy.

Checked properly: of the ten I closed, only #6365 and #6363 are true subsets of #6395. The other eight, including this one, each fix a screen or a helper the keeper leaves alone.

What remains true: these PRs overlap on apps/mobile/src/components/agents/session-filter-button.tsx, so they will conflict with each other and cannot all merge as they stand. That is a sequencing problem to resolve, not a reason to throw the work away.

Apologies for the churn.

[iscekic]

Closing so this defect has one PR instead of nine.

All nine came from the same explorer finding, a-control-is-too-small-to-tap-reliably, on different screens. Nine of them edit apps/mobile/src/components/agents/session-filter-button.tsx, so the first to merge conflicts the rest — they were never all mergeable.

#6395 is kept as the broadest (14 files).

I reopened this PR earlier today after closing it, because it is not a subset of #6395 and I did not want to pretend otherwise. The work it carries is not being dropped: the six source files across this group that #6395 does not touch are now one queued item, tap targets on the screens the first pass did not cover, which names each component and the PR it came from —

• components/agents/session-list-header-actions.tsx
• components/login/idle-auth.tsx
• components/organization/hub-screen.tsx
• components/organization/members-screen.tsx
• components/ui/icon-button.tsx
• lib/a11y/tap-target.ts (the shared helper)

One change through the shared helper is a better answer than nine screen-by-screen edits that conflict.

Cause, now fixed: each finding was dispatched the moment it was found. The explorer pools findings for an hour and dispatches one item per defect (kwf d25ae7de), and the intake refuses a slug that already has open work (kwf 07c842fd).