Merge remote-tracking branch 'origin/main' into jahooma/evalbuff-quality

Author: jahooma

cli/src/__tests__/e2e-cli.test.ts

@@ -80,20 +80,28 @@ describe.skipIf(!sdkBuilt)('CLI End-to-End Tests', () => {
   test(
     'CLI accepts --agent flag',
     async () => {
-      // Note: This will timeout and exit because we can't interact with stdin
-      // But we can verify it starts without errors
+      // Verify the CLI starts without errors when given --agent flag.
+      // The CLI goes through full initialization (agent registry, skill registry,
+      // renderer creation) before producing any piped output, so we need a
+      // generous timeout. We also treat "process still alive" as success.
       const proc = spawn('bun', ['run', CLI_PATH, '--agent', 'ask'], {
         cwd: path.join(__dirname, '../..'),
         stdio: 'pipe',
       })
 
       let started = false
+      let exitedEarly = false
+      proc.once('exit', () => {
+        if (!started) exitedEarly = true
+      })
+
       await new Promise<void>((resolve) => {
         const timeout = setTimeout(() => {
+          // Process is still alive after wait — it started successfully
+          if (!exitedEarly) started = true
           resolve()
-        }, 2000) // Increased timeout for CI environments
+        }, 8000)
 
-        // Check both stdout and stderr - CLI may output to either
         proc.stdout?.once('data', () => {
           started = true
           clearTimeout(timeout)
@@ -122,12 +130,17 @@ describe.skipIf(!sdkBuilt)('CLI End-to-End Tests', () => {
       })
 
       let started = false
+      let exitedEarly = false
+      proc.once('exit', () => {
+        if (!started) exitedEarly = true
+      })
+
       await new Promise<void>((resolve) => {
         const timeout = setTimeout(() => {
+          if (!exitedEarly) started = true
           resolve()
-        }, 2000) // Increased timeout for CI environments
+        }, 8000)
 
-        // Check both stdout and stderr - CLI may output to either
         proc.stdout?.once('data', () => {
           started = true
           clearTimeout(timeout)

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>
+  )
+}