feat cli: add stop button on status bar

Author: jahooma

cli/src/chat.tsx

@@ -1440,6 +1440,7 @@ export const Chat = ({
             isAtBottom={isAtBottom}
             scrollToLatest={scrollToLatest}
             statusIndicatorState={statusIndicatorState}
+            onStop={chatKeyboardHandlers.onInterruptStream}
           />
         )}
 

cli/src/components/status-bar.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 
 import { ScrollToBottomButton } from './scroll-to-bottom-button'
 import { ShimmerText } from './shimmer-text'
+import { StopButton } from './stop-button'
 import { useTheme } from '../hooks/use-theme'
 import { formatElapsedTime } from '../utils/format-elapsed-time'
 
@@ -15,13 +16,15 @@ interface StatusBarProps {
   isAtBottom: boolean
   scrollToLatest: () => void
   statusIndicatorState: StatusIndicatorState
+  onStop?: () => void
 }
 
 export const StatusBar = ({
   timerStartTime,
   isAtBottom,
   scrollToLatest,
   statusIndicatorState,
+  onStop,
 }: StatusBarProps) => {
   const theme = useTheme()
   const [elapsedSeconds, setElapsedSeconds] = useState(0)
@@ -161,9 +164,14 @@ export const StatusBar = ({
           flexBasis: 0,
           flexDirection: 'row',
           justifyContent: 'flex-end',
+          alignItems: 'center',
+          gap: 1,
         }}
       >
         <text style={{ wrapMode: 'none' }}>{elapsedTimeContent}</text>
+        {onStop && (statusIndicatorState.kind === 'waiting' || statusIndicatorState.kind === 'streaming') && (
+          <StopButton onClick={onStop} />
+        )}
       </box>
     </box>
   )

cli/src/components/stop-button.tsx

@@ -0,0 +1,32 @@
+import { TextAttributes } from '@opentui/core'
+import { useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+
+interface StopButtonProps {
+  onClick: () => void
+}
+
+export const StopButton = ({ onClick }: StopButtonProps) => {
+  const theme = useTheme()
+  const [hovered, setHovered] = useState(false)
+
+  return (
+    <Button
+      style={{ paddingLeft: 1, paddingRight: 1 }}
+      onClick={onClick}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+    >
+      <text>
+        <span
+          fg={theme.secondary}
+          attributes={hovered ? TextAttributes.BOLD : TextAttributes.DIM}
+        >
+          ■ Stop
+        </span>
+      </text>
+    </Button>
+  )
+}