Android: Expand/open icon on tool items unresponsive to touch

[begna112]

Description

On Android, the "arrow and box" (expand/open) icon at the top right corner of task/tool items in the chat transcript does not respond to touch. Tapping it rarely or never triggers the expected action (opening/expanding the tool content).

Root Cause

The icon is rendered as a TouchableOpacity (secondaryAction) in ToolView.tsx with a tiny 18px touch target and no hitSlop. Combined with gesture hierarchy interference from parent components, touches fail to reach the button.

Touch Handling Chain

MessageView.tsx → AgentTextBlock
  └── Pressable (agentMessageContainer)    ← intercepts touches
        └── ToolView
              └── Header
                    └── TouchableOpacity (secondaryAction)  ← tiny target, no hitSlop
                          └── Ionicons "open-outline"       ← what user taps

Three Contributing Factors

1. Tiny touch target with no hitSlop (ToolView.tsx, secondaryAction style ~line 491)

   • The icon button has only marginLeft: 0 — no hitSlop defined
   • The icon is 18px, well below Android's recommended 48dp minimum touch target
   • For comparison, CopyMessageButton in MessageView.tsx already uses hitSlop={8}

2. Parent Pressable intercepting touches (MessageView.tsx ~line 274)

   • AgentTextBlock wraps content in a <Pressable> for web hover effects
   • Even without an onPress handler, Pressable participates in Android's touch responder system and can steal touches from small child targets

3. GestureDetector LongPress consuming touches (MarkdownView.tsx ~lines 84-99)

   • Gesture.LongPress() wraps all markdown content and can intercept taps before they propagate to nested TouchableOpacity buttons

Why Android-Specific

iOS has better gesture disambiguation that can resolve competing gesture handlers in favor of small nested targets. Android's touch system is stricter about hit testing with small targets and competing responders.

Suggested Fix

• Add hitSlop={10} (or similar) to the secondaryAction TouchableOpacity in ToolView.tsx
• Add pointerEvents="box-none" to the agentMessageContainer Pressable in MessageView.tsx so it doesn't capture touches meant for children
• Consider configuring the GestureDetector in MarkdownView.tsx with waitFor or simultaneousWithExternalGesture to allow nested buttons to function independently

Related

• Android: tables in markdown are nearly impossible to scroll horizontally #92 (table horizontal scrolling blocked by same gesture hierarchy)
• Same Pressable + GestureDetector interference pattern

[begna112]

Additional instances of the same pattern

Audit found more small touch targets missing hitSlop across the codebase:

File	Component	Icon Size	hitSlop
ExitPlanToolView.tsx ~line 286	Approve/Reject/Request Changes buttons	18px icons	❌ Missing
SessionGettingStartedGuidance.tsx ~line 305	Copy command Pressable	16px icon	❌ Missing
MarkdownView.tsx ~line 204	Code block copy button (absolute positioned, top-right)	Text	❌ Missing
MermaidRenderer.tsx ~lines 114, 197	Mermaid diagram copy buttons	Text	❌ Missing

For reference, components that already do this correctly:

• Header.tsx back button: hitSlop={15}
• HomeHeader.tsx buttons: hitSlop={15}
• HeaderTitleWithAction.tsx: hitSlop={10}
• CopyMessageButton in MessageView.tsx: hitSlop={8}

The ExitPlanToolView buttons are particularly important since they're the primary way users approve/reject plans.