fix(mobile): 44dp touch targets, accessibility, and tokenized model-picker

[iscekic]

Summary

Closes the remediation phases of .plans/mobile-readability-touch-target-audit.md. The audit report itself is in .plans/mobile-ui-audit-findings.md (not committed, per repo policy on plans).

Touch targets and accessibility

• agents/chat-composer.tsx: send/stop now have hitSlop reaching 44dp, plus accessibilityRole, accessibilityLabel, and accessibilityState.
• profile-avatar-button.tsx: full 44dp box (h-11 w-11) with accessibilityRole and pressed feedback.
• screen-header.tsx: title dropdown gets 44dp hitSlop + role/label; the back button now has accessibilityRole="button".
• agents/session-list-screen.tsx (plus/filter): 44dp-reaching hitSlop, accessibilityRole, pressed feedback. The facing slops are capped at 8 so the two expanded targets don't overlap inside the 16px gap (overlapping sibling hit rects let the later sibling steal taps).

Readability

• ui/session-row.tsx, ui/configure-row.tsx: replace text-[10.5px] / text-[11.5px] / text-[14.5px] arbitrary sizes with the nearest sanctioned text-xs / text-sm utilities.
• app/(app)/(tabs)/_layout.tsx: raise tab-label font size from 10px to 11px (with small letter-spacing).

Tokenization (no more hardcoded brand-blue)

• kiloclaw/model-picker.tsx: selected state moves from border-blue-500 bg-blue-500/5 + #3b82f6 to border-primary bg-neutral-100 dark:bg-neutral-800 + colors.primary (the established selected-card pattern from exec-policy.tsx; an opaque bg-accent-soft fill was tried first but is #E8F27A in both themes, which made dark-mode card text and the primary-colored checkmark illegible). Decorative Balanced / Frontier icon tints now use the existing agent-sky / agent-yuki tile-bg tokens. The 'or select from 500+ models' link is enlarged to a 44dp target with accessibilityRole='link' and a label.
• kiloclaw/settings/model-list.tsx: selected Check color → colors.primary.
• agents/child-session-section.tsx: running-tool icons / text / border move from #3b82f6 / text-blue-500 to the agent-sky token set (theme-aware light + dark).

Out of scope: chat gutters (already consistent at px-4 on both message-bubble.tsx files), status-badge palettes (green / red / blue is a deliberate semantic set), the model-picker performanceDotColor dots (same deliberate-decorative category), and the eyebrow / 10-11px metadata typography (intentional per the design contract).

A size='touch' Button variant and an a11y-enforcing IconButton wrapper were originally added in ui/button.tsx but dropped in review: nothing consumed them, and knip ignores src/components/ui/** so they would have shipped as permanently unchecked dead code. They can return in the same PR as their first call site.

Verification

Manual device verification is required but was not done by the agent (no simulator / device access in this worktree). Items to spot-check on iOS and Android, light + dark:

• ChatComposer (agent chat): tap reliability and VoiceOver / TalkBack announcement of 'Send message' / 'Stop generating'.
• SessionHeader (ScreenHeader with onTitlePress): title now announces 'Open menu for <title>'. Back button announces as a button.
• Profile avatar, Agents list plus / filter: tap reliability near the screen edge, and that a tap between the plus and filter icons hits the intended control.
• KiloClaw model picker: selected card contrast in light + dark (neutral fill + primary border/check); the 'select from 500+ models' link target.
• SessionRow / ConfigureRow long-title truncation (already had numberOfLines={1}, now at text-sm / text-xs).
• Tab bar at default and 130% Dynamic Type: 'KiloClaw' label still fits the 64dp content width.

Automated checks: pnpm format, pnpm typecheck (mobile + full repo), pnpm lint, pnpm test (360/360), pnpm check:unused all clean.

Visual Changes

Visual changes are limited to:

• Tab labels slightly larger (10 → 11px) at the bottom of every screen.
• KiloClaw model picker selected state changes from a blue ring to a brand yellow-green (primary) border on a neutral fill (bg-neutral-100 / dark:bg-neutral-800).
• SessionRow and ConfigureRow row titles / subtitles are 1-2px larger.
• All hitSlop changes are invisible; they expand the tap area without changing visual size.

Screenshots were not captured by the agent; visual confirmation is part of the manual checklist above.

Reviewer Notes

Seven small commits; the last one applies review findings (dark-mode selected-card contrast, overlapping hitSlop rects, dropping the unused IconButton/touch surface, ThemeColors type reuse, double 'selected' screen-reader announcement).

Risk areas

• getStatusBorderColor in child-session-section.tsx now takes the full ThemeColors object instead of just destructiveColor. Tested only by typecheck and existing tests.
• The asymmetric hitSlop insets on the session-list header buttons trade ~3dp of horizontal target for non-overlapping hit rects; vertical targets stay at 44dp.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

Reviewed all 11 changed files (touch-target/accessibility additions, tokenized colors, and text-size normalization) and found no security, runtime, or logic issues in the changed lines.

Files Reviewed (11 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/model-list.tsx
• apps/mobile/src/components/agents/chat-composer.tsx
• apps/mobile/src/components/agents/child-session-section.tsx
• apps/mobile/src/components/agents/session-list-screen.tsx
• apps/mobile/src/components/kiloclaw/model-picker.tsx
• apps/mobile/src/components/profile-avatar-button.tsx
• apps/mobile/src/components/screen-header.tsx
• apps/mobile/src/components/ui/button.tsx
• apps/mobile/src/components/ui/configure-row.tsx
• apps/mobile/src/components/ui/session-row.tsx

---

_{Reviewed by claude-sonnet-5-20260630 · Input: 42 · Output: 17.5K · Cached: 1.2M}

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