hermes-agent/ui-tui/src/components/thinking.tsx

import { Box, Text } from 'ink'
import { useEffect, useState } from 'react'

import { FACES, SPINNER, TOOL_VERBS, VERBS } from '../constants.js'
import { pick } from '../lib/text.js'
import type { Theme } from '../theme.js'
import type { ActiveTool } from '../types.js'

export function Thinking({ reasoning, t, tools }: { reasoning: string; t: Theme; tools: ActiveTool[] }) {
  const [frame, setFrame] = useState(0)
  const [verb] = useState(() => pick(VERBS))
  const [face] = useState(() => pick(FACES))

  useEffect(() => {
    const id = setInterval(() => setFrame(f => (f + 1) % SPINNER.length), 80)

    return () => clearInterval(id)
  }, [])

  return (
    <Box flexDirection="column">
      {tools.length ? (
        tools.map(tool => (
          <Text color={t.color.dim} key={tool.id}>
            {SPINNER[frame]} {TOOL_VERBS[tool.name] ?? '⚡ ' + tool.name}…
          </Text>
        ))
      ) : (
        <Text color={t.color.dim}>
          {SPINNER[frame]} {face} {verb}…
        </Text>
      )}
      {reasoning && (
        <Text color={t.color.dim} dimColor wrap="truncate-end">
          {'  💭 '}
          {reasoning.slice(-120).replace(/\n/g, ' ')}
        </Text>
      )}
    </Box>
  )
}