Function ElapsedTimer

cli/src/components/elapsed-timer.tsx:16–55

({
  startTime,
  suffix = '',
  attributes,
}: ElapsedTimerProps)

 * Only this component re-renders, not its parents.
 */
export const ElapsedTimer = ({
  startTime,
  suffix = '',
  attributes,
}: ElapsedTimerProps) => {
  const theme = useTheme()
  const [elapsedSeconds, setElapsedSeconds] = useState<number>(() =>
    startTime ? Math.floor((Date.now() - startTime) / 1000) : 0,
  )

  useEffect(() => {
    if (!startTime) {
      setElapsedSeconds(0)
      return
    }

    const updateElapsed = () => {
      const elapsed = Math.floor((Date.now() - startTime) / 1000)
      setElapsedSeconds(elapsed)
    }

    // Update immediately
    updateElapsed()

    // Then update every second
    const interval = setInterval(updateElapsed, 1000)

    return () => clearInterval(interval)
  }, [startTime])

  if (!startTime || elapsedSeconds === 0) {
    return null
  }

  return (
    <span fg={theme.secondary} attributes={attributes}>
      {formatElapsedTime(elapsedSeconds)}{suffix}
    </span>
  )
}