@@ -151,18 +151,18 @@ export function FloatingWorkingControl(props: {
151151 return null ;
152152 }
153153
154- // The queue, agents, and reconnect labels have separate tap targets .
155- const statusInteractive = props . status ?. kind === "connection" ;
154+ // Each interactive segment has its own tap target .
155+ const statusInteractive = props . status ?. kind === "connection" || props . status ?. kind === "waiting" ;
156156 const capsuleInteractive = statusInteractive || hasQueue || hasAgents || hasDevicePreview ;
157157 // The host stays centered on the capsule, but its measurement constraint
158158 // comes from the overlay, independent of the capsule's current width.
159159 const statusContent =
160160 props . status !== null ? (
161161 < View
162- pointerEvents = { props . status . kind === "connection" ? "box-none" : "none" }
162+ pointerEvents = { statusInteractive ? "box-none" : "none" }
163163 className = "h-11 items-center justify-center"
164164 >
165- < Animated . View className = "h-11" style = { capsuleSizerStyle } />
165+ < Animated . View pointerEvents = "none" className = "h-11" style = { capsuleSizerStyle } />
166166 < View
167167 pointerEvents = { statusInteractive ? "box-none" : "none" }
168168 className = "absolute h-11 items-center justify-center"
@@ -386,25 +386,9 @@ function FloatingStatusLabel(props: {
386386 ) ;
387387 }
388388 if ( props . status . kind === "waiting" ) {
389- return (
390- < StatusLabelRow
391- key = "waiting"
392- accessibilityLabel = { props . status . accessibilityLabel }
393- className = "gap-2"
394- onLayout = { props . onLayout }
395- >
396- < SymbolView
397- name = { { ios : "bolt" , android : "bolt" } }
398- size = { 13 }
399- tintColorClassName = "foreground"
400- type = "monochrome"
401- />
402- < Text className = "shrink font-t3-medium text-xs text-foreground" numberOfLines = { 1 } >
403- { props . status . label }
404- </ Text >
405- </ StatusLabelRow >
406- ) ;
389+ return < BackgroundWorkLabel status = { props . status } onLayout = { props . onLayout } /> ;
407390 }
391+
408392 if ( props . status . kind === "preparing" ) {
409393 return (
410394 < StatusLabelRow
@@ -471,6 +455,56 @@ function StatusLabelRow(props: {
471455 ) ;
472456}
473457
458+ // Stop is its own button inside the row rather than the whole pill, so a
459+ // stray tap on the label cannot end background work. Everything but Stop
460+ // passes touches through to the feed, like the non-interactive labels.
461+ function BackgroundWorkLabel ( props : {
462+ readonly status : Extract < FloatingWorkingStatus , { kind : "waiting" } > ;
463+ readonly onLayout : ( event : LayoutChangeEvent ) => void ;
464+ } ) {
465+ return (
466+ < Animated . View
467+ pointerEvents = "box-none"
468+ className = "absolute max-w-full"
469+ entering = { LABEL_ENTERING }
470+ exiting = { LABEL_EXITING }
471+ onLayout = { props . onLayout }
472+ >
473+ < View pointerEvents = "box-none" className = "h-11 flex-row items-center pl-4" >
474+ < View
475+ pointerEvents = "none"
476+ accessible
477+ accessibilityLabel = { props . status . accessibilityLabel }
478+ className = "min-w-0 shrink flex-row items-center gap-2"
479+ >
480+ < SymbolView
481+ name = { { ios : "bolt" , android : "bolt" } }
482+ size = { 13 }
483+ tintColorClassName = "foreground"
484+ type = "monochrome"
485+ />
486+ < Text className = "shrink font-t3-medium text-xs text-foreground" numberOfLines = { 1 } >
487+ { props . status . label }
488+ </ Text >
489+ </ View >
490+ < View pointerEvents = "none" className = "ml-3 h-4 w-px bg-border" />
491+ < Pressable
492+ accessibilityLabel = { props . status . stopping ? "Stopping" : "Stop background work" }
493+ accessibilityRole = "button"
494+ accessibilityState = { { disabled : props . status . stopping } }
495+ className = "h-11 justify-center pl-3 pr-4 active:opacity-70"
496+ disabled = { props . status . stopping }
497+ onPress = { props . status . onStop }
498+ >
499+ < Text className = "font-t3-medium text-xs text-danger-foreground" >
500+ { props . status . stopping ? "Stopping…" : "Stop" }
501+ </ Text >
502+ </ Pressable >
503+ </ View >
504+ </ Animated . View >
505+ ) ;
506+ }
507+
474508function WorkingDuration ( props : {
475509 readonly startedAt : string ;
476510 readonly onLayout : ( event : LayoutChangeEvent ) => void ;
0 commit comments