token-speedometer

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || !hasTurn) return next(e)

    const avg = averageTps()
    const title = isParked ? '턴 종료' : PHASE_LABEL[phase]
    const summary =
      `${title} ${Math.round(shownTps)} tok/s · 평균 ${avg === undefined ? '—' : Math.round(avg)}` +
      ` · 최고 ${Math.round(maxTps)} · 출발 ${seconds(launchMs)}`
    const elements = $.ui.resolve(e)

    // 터미널은 고정폭 글자로 막대를 그린다. 'Svg' in 검사는 타입을 좁히는 용도이고, 실행 중 표에는 터미널에도 그 키가 있다.
    if (e.surface === 'terminal' || !('Svg' in elements)) {
      const { Box, Text } = elements
      return (
        <Box borderStyle="round" borderDimColor paddingX={1}>
          <Text dimColor={isParked}>{`${bar(shownTps)}  ${summary}`}</Text>
        </Box>
      )
    }

    const { Box, Svg } = elements
    const shownGear = isParked ? 'P' : phase === 'thinking' || phase === 'tool' ? 'N' : gear
    const view = {
      tps: shownTps,
      avgTps: avg,
      maxTps,
      launchMs,
      phase: isParked ? undefined : phase,
      gear: shownGear,
    }
    // 그림 모드로 그린다. 대화형(isInteractive)은 그림 안의 애니메이션이 돌지만 데스크톱에서 크기가 줄고 갱신마다 깜박였다.
    // 그림 모드에서는 애니메이션이 돌지 않는다(녹화로 확인: 막대가 6프레임마다 바뀜).
    return (
      <Box>
        <Svg source={hudSvg(view)} alt={`토큰 속도계: ${summary}`} />
      </Box>
    )
  })