limits-meter

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, isHidden))) return next(e)
    const s = await read($, snapshot)
    if (s.limits.length === 0 && s.contextPercent === null) return next(e)

    const { Box, Text, Button } = $.ui.resolve(e)
    const w = WORDS[lang]
    const now = await $.clock.now()
    const list = await read($, turns)
    const last = list[list.length - 1]
    const columns = e.props.bodyColumns || e.viewport?.columns || 80
    const width = barWidth(columns)
    const meter = (percent: number) =>
      width > 0 ? <Text color={tone(percent)}>{`${bar(width, percent)} `}</Text> : width === 0 ? <Text color={tone(percent)}>{mini(percent)}</Text> : null
    const id = await read($, model)
    const level = await read($, effort)
    // The model in the accent color; the effort as a five-step gauge and its name, max in warning.
    const setting =
      (id || level !== null) && shows('model') ? (
        <Text key="model">
          {id && <Text color="claude" bold>{shortModel(id)}</Text>}
          {id && level !== null && <Text> </Text>}
          {level !== null && effortView(Text, level)}
        </Text>
      ) : null

    const verbs = [
      ...(needsCompact(s) ? [<Button key="compact" label={w.compact} plain color="warning" onPress={() => fill($, w.compactFill)} />] : []),
      <Button key="details" label={w.details} plain dimColor onPress={() => open($)} />,
      <Button key="hide" label={w.hide} plain dimColor onPress={() => setHidden($, true)} />,
    ]

    if (format === 'compact') {
      // model · effort · ctx 8% · 5h 34% · wk 31%: numbers only, one line.
      const cell = (key: string, name: string, percent: number | null) => (
        <Text key={key}>
          <Text dimColor>{`${name} `}</Text>
          <Text color={tone(percent)} bold>{pct(percent)}</Text>
        </Text>
      )
      const parts = [
        ...(setting ? [setting] : []),
        ...(shows('ctx') ? [cell('ctx', 'ctx', s.contextPercent)] : []),
        ...s.limits.filter(l => shows(CELL_IDS[l.kind] ?? l.kind)).map(l => cell(l.kind, label(l.kind, lang), l.percent)),
      ]
      const line = (
        <Box key="limits-meter" flexDirection="row" flexWrap="wrap" gap={2} paddingX={1}>
          <Text key="numbers">{parts.flatMap((p, i) => (i > 0 ? [<Text key={`sep-${i}`} dimColor> · </Text>, p] : [p]))}</Text>
          {verbs}
        </Box>
      )
      const beneath = await next(e)
      return beneath ? (
        <Box flexDirection="column">
          {line}
          {beneath}
        </Box>
      ) : (
        line
      )
    }

    const band = [
      ...(setting ? [setting] : []),
      ...s.limits
        .filter(l => shows(CELL_IDS[l.kind] ?? l.kind))
        .map(l => {
          const reset = resetIn(l.resetsAt, now, lang)
          return (
            <Text key={l.kind}>
              <Text dimColor>{`${label(l.kind, lang)} `}</Text>
              {meter(l.percent)}
              <Text color={tone(l.percent)} bold>{pct(l.percent)}</Text>
              {reset !== '' && <Text dimColor>{` ↻${reset}`}</Text>}
            </Text>
          )
        }),
      ...(shows('ctx')
        ? [
            <Text key="ctx">
              <Text dimColor>ctx </Text>
              {s.contextPercent !== null && meter(s.contextPercent)}
              <Text color={tone(s.contextPercent)} bold>{pct(s.contextPercent)}</Text>
            </Text>,
          ]
        : []),
      ...(last?.cacheHit != null && shows('cache')
        ? [
            <Text key="cache">
              <Text dimColor>cache </Text>
              <Text>{pct(last.cacheHit * 100)}</Text>
            </Text>,
          ]
        : []),
    ]

    const mine = (
      <Box key="limits-meter" flexDirection="row" flexWrap="wrap" gap={2} paddingX={1}>
        {band}
        {verbs}
      </Box>
    )
    const theirs = await next(e)
    return theirs ? (
      <Box flexDirection="column">
        {mine}
        {theirs}
      </Box>
    ) : (
      mine
    )
  })

const effortView = (Text: Elements[keyof Elements]['Text'], level: string | number) => {
  const max = level === 'max'
  return [
    ...(gauge(level) !== '' ? [<Text key="gauge" color={max ? 'warning' : undefined} dimColor={!max}>{`${gauge(level)} `}</Text>] : []),
    <Text key="level" color={max ? 'warning' : undefined} bold={max}>{String(level)}</Text>,
  ]
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const w = WORDS[lang]
    const s = await read($, snapshot)
    const list = await read($, turns)
    const readings = await read($, samples)
    const now = await $.clock.now()
    const columns = Math.max(30, (e.props.bodyColumns || e.viewport?.columns || 80) - 2)
    const width = Math.max(10, Math.min(40, columns - 30))
    const paces = s.limits.map(l => {
      const points = readings[l.kind]
      return l.resetsAt !== null && points && points.resetsAt === l.resetsAt ? pace(points.points, now, l.resetsAt) : null
    })
    const trend = list.filter(t => t.contextPercent != null)
    const top = heaviest(list)
    const id = await read($, model)
    const level = await read($, effort)
    const at = await read($, switchAt)
    const choices = [...new Set([...SWITCH_CHOICES, at])].sort((a, b) => a - b)
    // Rows besides the turns: the hint, three headings, the context row, the table head, the
    // footer, the gaps, a pace line per window that has one and the trend line; then the
    // costly-switch section (heading, hint, choices, order, gap) and the model's (heading, row, gap).
    const fixed = 12 + Math.max(1, s.limits.length) + paces.filter(p => p !== null).length + (trend.length > 1 ? 1 : 0) + 5 + (id || level !== null ? 3 : 0)
    const room = Math.max(3, (e.props.scroll?.bodyRows ?? e.viewport?.rows ?? 30) - fixed)
    const [cIn, cOut, cCache, cTime, cModel] = w.columns

    return (
      <Box flexDirection="column" paddingX={1} gap={1}>
        <Text dimColor>{w.hint}</Text>

        <Box flexDirection="column">
          <Text bold>{w.planWindows}</Text>
          {s.limits.length === 0 && <Text dimColor>{w.noWindows}</Text>}
          {s.limits.map((l, i) => {
            const left = paces[i]
            return (
              <Box key={l.kind} flexDirection="column">
                <Text>
                  <Text dimColor>{label(l.kind, lang).padEnd(6)}</Text>
                  <Text color={tone(l.percent)}>{bar(width, l.percent)}</Text>
                  <Text bold>{` ${pct(l.percent).padStart(4)}`}</Text>
                  <Text dimColor>{l.resetsAt !== null ? `  ${w.resetsIn(resetIn(l.resetsAt, now, lang))}` : ''}</Text>
                </Text>
                {left != null && <Text color="warning">{`      ${w.pace(label(l.kind, lang), resetIn(now + left, now, lang))}`}</Text>}
              </Box>
            )
          })}
        </Box>

        <Box flexDirection="column">
          <Text bold>{w.contextHeading}</Text>
          <Box flexDirection="row" flexWrap="wrap" gap={2}>
            <Text>
              <Text dimColor>{'ctx   '}</Text>
              <Text color={tone(s.contextPercent)}>{bar(width, s.contextPercent ?? 0)}</Text>
              <Text bold>{` ${pct(s.contextPercent).padStart(4)}`}</Text>
              <Text dimColor>{s.contextTokens !== null ? `  ${w.ofWindow(tokens(s.contextTokens), tokens(s.contextWindow))}` : ''}</Text>
            </Text>
            {needsCompact(s) && <Button key="compact" label={w.compact} plain color="warning" onPress={() => fill($, w.compactFill)} />}
          </Box>
          {trend.length > 1 && (
            <Text>
              <Text dimColor>{'      '}</Text>
              <Text color={tone(s.contextPercent)}>{contextSpark(list.slice(-width))}</Text>
              <Text dimColor>{`  ${w.trend(Math.min(list.length, width))}`}</Text>
            </Text>
          )}
        </Box>

        {(id || level !== null) && (
          <Box flexDirection="column">
            <Text bold>{w.modelHeading}</Text>
            <Text>
              {id && <Text color="claude" bold>{shortModel(id)}</Text>}
              {level !== null && <Text dimColor>{`${id ? '   ' : ''}${w.effort} `}</Text>}
              {level !== null && effortView(Text, level)}
            </Text>
          </Box>
        )}

        <Box flexDirection="column">
          <Text bold>{w.warnHeading}</Text>
          <Text dimColor>{w.warnHint}</Text>
          <Box flexDirection="row" flexWrap="wrap">
            {choices.map((n, i) => (
              <Box key={`warn-${n}`} flexDirection="row">
                {i > 0 && <Text dimColor> · </Text>}
                {n === at ? (
                  <Text color="claude" bold>{`${n}%`}</Text>
                ) : (
                  <Button key={`warn:${n}`} plain dimColor label={`${n}%`} onPress={() => setSwitchAt($, n).then(() => $.ui.toast(w.warnSet(n)), () => $.ui.toast(w.failedToRun(`/${COMMAND} warn ${n}`)))} />
                )}
              </Box>
            ))}
          </Box>
          <Text dimColor>{w.warnOrder}</Text>
        </Box>

        <Box flexDirection="column">
          <Text bold>{w.turns}</Text>
          {list.length === 0 && <Text dimColor>{w.noTurns}</Text>}
          {list.length > 0 && <Text dimColor>{`    ${cIn.padStart(8)}${cOut.padStart(8)}${cCache.padStart(7)}${cTime.padStart(7)}  ${cModel}`}</Text>}
          {list.slice(-room).map((t, i, shown) => {
            const isTop = list.length > 1 && t === top
            return (
              <Text key={`turn-${list.length - shown.length + i}`}>
                <Text dimColor>{`#${list.length - shown.length + i + 1}`.padEnd(4)}</Text>
                <Text color={isTop ? 'claude' : undefined} bold={isTop}>{tokens(t.input).padStart(8)}</Text>
                <Text>{tokens(t.output).padStart(8)}</Text>
                <Text color={t.cacheHit !== null && t.cacheHit < 0.5 ? 'warning' : undefined}>{pct(t.cacheHit === null ? null : t.cacheHit * 100).padStart(7)}</Text>
                <Text dimColor>{`${`${Math.round(t.durationMs / 1000)}s`.padStart(7)}  ${shortModel(t.model)}`}</Text>
              </Text>
            )
          })}
        </Box>

        <Box flexDirection="row" flexWrap="wrap" gap={2}>
          {verbRow({ Box, Text, Button }, COMMAND, VERBS, v => pressVerb($, v))}
          <Button key="close" role="dismiss" label={w.close} onPress={() => $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })

export function verbRow(
  ui: Pick<Elements[keyof Elements], 'Box' | 'Text' | 'Button'>,
  command: string,
  verbs: readonly Verb[],
  onPress: (v: Verb) => void,
  lead = '',
) {
  const { Box, Text, Button } = ui
  return (
    <Box flexDirection="row" flexWrap="wrap">
      {lead !== '' && <Text dimColor>{`${lead} · `}</Text>}
      <Text dimColor>{`/${command} `}</Text>
      {verbs.map((v, i) => (
        <Box key={`verbrow:${v.verb}`} flexDirection="row">
          {i > 0 && <Text dimColor> · </Text>}
          <Button key={`verb:${v.verb}`} plain dimColor label={v.label ?? v.verb} onPress={() => onPress(v)} />
        </Box>
      ))}
    </Box>
  )
}