fix(cli): use tmux-safe thinking indicator

Author: apfine

packages/cli/src/ui/components/GeminiSpinner.tsx

@@ -6,13 +6,22 @@
 
 import type React from 'react';
 import { useState, useEffect, useMemo } from 'react';
-import { Text, useIsScreenReaderEnabled } from 'ink';
+import { Box, Text, useIsScreenReaderEnabled } from 'ink';
 import { CliSpinner } from './CliSpinner.js';
 import type { SpinnerName } from 'cli-spinners';
 import { Colors } from '../colors.js';
 import tinygradient from 'tinygradient';
 
 const COLOR_CYCLE_DURATION_MS = 4000;
+const SPINNER_UPDATE_INTERVAL_MS = 30;
+const TMUX_UPDATE_INTERVAL_MS = 750;
+const TMUX_FRAMES = ['.', '..', '...'] as const;
+
+function isTmuxEnvironment(): boolean {
+  return (
+    !!process.env['TMUX'] || (process.env['TERM'] ?? '').startsWith('tmux')
+  );
+}
 
 interface GeminiSpinnerProps {
   spinnerType?: SpinnerName;
@@ -24,7 +33,9 @@ export const GeminiSpinner: React.FC<GeminiSpinnerProps> = ({
   altText,
 }) => {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const isTmux = isTmuxEnvironment();
   const [time, setTime] = useState(0);
+  const [tmuxFrameIndex, setTmuxFrameIndex] = useState(0);
 
   const googleGradient = useMemo(() => {
     const brandColors = [
@@ -43,18 +54,31 @@ export const GeminiSpinner: React.FC<GeminiSpinnerProps> = ({
       return;
     }
 
-    const interval = setInterval(() => {
-      setTime((prevTime) => prevTime + 30);
-    }, 30); // ~33fps for smooth color transitions
+    const interval = setInterval(
+      () => {
+        if (isTmux) {
+          setTmuxFrameIndex(
+            (prevIndex) => (prevIndex + 1) % TMUX_FRAMES.length,
+          );
+          return;
+        }
+        setTime((prevTime) => prevTime + SPINNER_UPDATE_INTERVAL_MS);
+      },
+      isTmux ? TMUX_UPDATE_INTERVAL_MS : SPINNER_UPDATE_INTERVAL_MS,
+    );
 
     return () => clearInterval(interval);
-  }, [isScreenReaderEnabled]);
+  }, [isScreenReaderEnabled, isTmux]);
 
   const progress = (time % COLOR_CYCLE_DURATION_MS) / COLOR_CYCLE_DURATION_MS;
   const currentColor = googleGradient.rgbAt(progress).toHexString();
 
   return isScreenReaderEnabled ? (
     <Text>{altText}</Text>
+  ) : isTmux ? (
+    <Box width={3}>
+      <Text>{TMUX_FRAMES[tmuxFrameIndex]}</Text>
+    </Box>
   ) : (
     <Text color={currentColor}>
       <CliSpinner type={spinnerType} />