feat: use stop icon for cancel control

packages/app/src/components/agent-input-area.tsx

@@ -377,12 +377,14 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
                   <Pressable
                     onPress={handleCancelAgent}
                     disabled={!ws.isConnected}
+                    accessibilityLabel="Stop agent"
+                    accessibilityRole="button"
                     style={[
                       styles.cancelButton,
                       !ws.isConnected && styles.buttonDisabled,
                     ]}
                   >
-                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                    <Square size={18} color={theme.colors.background} fill={theme.colors.background} />
                   </Pressable>
                 </>
               ) : shouldShowSendButton ? (
@@ -553,19 +555,13 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.palette.blue[600],
   },
   cancelButton: {
-    minWidth: 92,
-    paddingHorizontal: theme.spacing[4],
+    width: 40,
     height: 40,
     borderRadius: theme.borderRadius.full,
     backgroundColor: theme.colors.palette.red[500],
     alignItems: "center",
     justifyContent: "center",
   },
-  cancelButtonText: {
-    color: theme.colors.background,
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.semibold,
-  },
   buttonDisabled: {
     opacity: 0.5,
   },

plan.md

@@ -76,6 +76,7 @@
   - `RealtimeProvider` now records when speech detection interrupts active playback and logs `[Telemetry] barge_in.playback_stop_latency` once the app reports audio stopped, while the server's `Session.handleRealtimeSpeechStart` logs `[Telemetry] barge_in.llm_abort_latency` after aborting live LLM runs—giving us measurable client + server latency metrics per turn.
 - [x] Codex tool calls aren’t visible in the live stream (they only show up after hydrating/refreshing); fix the reducer/rendering path so Codex tool events appear in real time the same way Claude’s do.
   - Stream reducer now inspects Codex `provider_event` payloads and converts command/file/MCP/web search items into agent tool entries immediately, so the UI shows the pills while the turn is running instead of waiting for hydration; `stream.test.ts` gained coverage proving provider events alone still surface command + MCP calls, and `npm run test --workspace=@voice-dev/app -- src/types/stream.test.ts` passes.
-- [ ] Update the AgentInput “Cancel” control to use a square stop icon button (consistent with media players) so interrupting an agent is visually distinct from other actions.
+- [x] Update the AgentInput “Cancel” control to use a square stop icon button (consistent with media players) so interrupting an agent is visually distinct from other actions.
+  - Replaced the text-based pill with a compact circular stop control that reuses the Square media glyph (plus accessibility labels), making the interrupt action visually distinct without impacting the other pending AgentInput tweaks.
 - [ ] When the agent input has text and we’re not in the cancellable state, replace both the mic (Dictate) and Realtime buttons with a single Send button—only surface Dictate/Realtime when the input is empty or the agent is running.
 - [ ] Remove the agent status pill next to the permission selector; instead show a “working” indicator inside the chat scroll view itself (three bouncing dots animation) whenever the agent is busy.