Make cancel not explode.

- We were console.erroring, throwing and early aborting. Instead we now treat cancels like a normal user message and show an indicator in the UI

Fixes https://b.corp.google.com/issues/416515841

packages/cli/src/ui/components/messages/InfoMessage.tsx

@@ -17,7 +17,7 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
   const prefixWidth = prefix.length;
 
   return (
-    <Box flexDirection="row">
+    <Box flexDirection="row" marginTop={1}>
       <Box width={prefixWidth}>
         <Text color={Colors.AccentYellow}>{prefix}</Text>
       </Box>

packages/cli/src/ui/hooks/useGeminiStream.ts

@@ -177,8 +177,6 @@ export const useGeminiStream = (
         let geminiMessageBuffer = '';
 
         for await (const event of stream) {
-          if (signal.aborted) break;
-
           if (event.type === ServerGeminiEventType.Content) {
             if (
               pendingHistoryItemRef.current?.type !== 'gemini' &&
@@ -293,6 +291,18 @@ export const useGeminiStream = (
             );
             setStreamingState(StreamingState.WaitingForConfirmation);
             return; // Wait for user confirmation
+          } else if (event.type === ServerGeminiEventType.UserCancelled) {
+            // Flush out existing pending history item.
+            if (pendingHistoryItemRef.current) {
+              addItem(pendingHistoryItemRef.current, userMessageTimestamp);
+              setPendingHistoryItem(null);
+            }
+            addItem(
+              { type: 'info', text: 'User cancelled the request.' },
+              userMessageTimestamp,
+            );
+            setStreamingState(StreamingState.Idle);
+            return; // Stop processing the stream
           }
         } // End stream loop