claude-code/src/components/PromptInput/VoiceIndicator.tsx

import { feature } from 'bun:bundle'
import * as React from 'react'
import { useSettings } from '../../hooks/useSettings.js'
import { Box, Text, useAnimationFrame } from '@anthropic/ink'
import { interpolateColor, toRGBColor } from '../Spinner/utils.js'

type Props = {
  voiceState: 'idle' | 'recording' | 'processing'
}

// Processing shimmer colors: dim gray to lighter gray (matches ThinkingShimmerText)
const PROCESSING_DIM = { r: 153, g: 153, b: 153 }
const PROCESSING_BRIGHT = { r: 185, g: 185, b: 185 }

const PULSE_PERIOD_S = 2 // 2 second period for all pulsing animations

export function VoiceIndicator(props: Props): React.ReactNode {
  if (!feature('VOICE_MODE')) return null
  return <VoiceIndicatorImpl {...props} />
}

function VoiceIndicatorImpl({ voiceState }: Props): React.ReactNode {
  switch (voiceState) {
    case 'recording':
      return <Text dimColor>listening…</Text>
    case 'processing':
      return <ProcessingShimmer />
    case 'idle':
      return null
  }
}

// Static — the warmup window (~120ms between space #2 and activation)
// is too brief for a 1s-period shimmer to register, and a 50ms animation
// timer here runs concurrently with auto-repeat spaces arriving every
// 30-80ms, compounding re-renders during an already-busy window.
export function VoiceWarmupHint(): React.ReactNode {
  if (!feature('VOICE_MODE')) return null
  return <Text dimColor>keep holding…</Text>
}

function ProcessingShimmer(): React.ReactNode {
  const settings = useSettings()
  const reducedMotion = settings.prefersReducedMotion ?? false
  const [ref, time] = useAnimationFrame(reducedMotion ? null : 50)

  if (reducedMotion) {
    return <Text color="warning">Voice: processing…</Text>
  }

  const elapsedSec = time / 1000
  const opacity =
    (Math.sin((elapsedSec * Math.PI * 2) / PULSE_PERIOD_S) + 1) / 2
  const color = toRGBColor(
    interpolateColor(PROCESSING_DIM, PROCESSING_BRIGHT, opacity),
  )

  return (
    <Box ref={ref}>
      <Text color={color}>Voice: processing…</Text>
    </Box>
  )
}