pace

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || e.props.isWorking) return next(e)
    const b = await read($, band)
    const hidden = await read($, dismissed)
    const points = await read($, resume)
    const now = await $.clock.now()
    const kind = BAND_ORDER.find(one => isBandKind(one) && b[one] !== undefined && !hidden.includes(one))
    const fresh = points.filter(p => now - p.createdMs < OLD_MS)
    const old = points.length - fresh.length
    if (!kind && points.length === 0) return next(e)

    const { Box, Button, Text } = $.ui.resolve(e)
    const s = kind && isBandKind(kind) ? b[kind] : undefined
    const beneath = await next(e)

    return (
      <Box flexDirection="column">
        {s && kind && (
          <Box key="signal" flexDirection="row" gap={1}>
            <Text color={kind === 'cold' ? 'red' : 'yellow'} wrap="truncate">
              {`${ICON[kind]} pace ${s.text}${s.hint ? ` · ${s.hint}` : ''}`}
            </Text>
            <Button key="park" label="1 park" hotkey="1" onPress={() => void openPark($, kind)} />
            <Button key="dismiss" label="2 dismiss" hotkey="2" onPress={() => void update($, dismissed, l => [...l, kind])} />
          </Box>
        )}
        {fresh[0] && (
          <Box key="resume" flexDirection="row" gap={1}>
            <Text dimColor wrap="truncate">
              {`pace: resume point ${age(now - fresh[0].createdMs)} · ${fresh[0].title} · ${k(fresh[0].context)}`}
            </Text>
            <Button key="resume-go" label="3 resume" hotkey="3" onPress={() => void doResume($, fresh[0])} />
            <Button key="resume-drop" label="4 discard" hotkey="4" onPress={() => void removePoints($, [fresh[0].path])} />
            {points.length > 1 && (
              <Button
                key="resume-list"
                label={`5 all ${points.length}`}
                hotkey="5"
                onPress={() => void $.ui.open({ id: RESUME_PANE, title: 'pace · resume points', focus: true, closeOnEscape: true })}
              />
            )}
          </Box>
        )}
        {old > 0 && (
          <Box key="old" flexDirection="row" gap={1}>
            <Text dimColor>{`pace: ${old} resume point${old === 1 ? '' : 's'} older than 7 days`}</Text>
            <Button
              key="old-clear"
              label="6 clear"
              hotkey="6"
              onPress={() => void removePoints($, points.filter(p => now - p.createdMs >= OLD_MS).map(p => p.path))}
            />
          </Box>
        )}
        {beneath}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: NOW_PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const n = await read($, nowState)
    if (!n) return <Text dimColor>pace: no figures yet.</Text>
    const left = n.cacheRemainingMs
    const cache = left === undefined ? 'no request yet' : left > 0 ? `${Math.ceil(left / 60_000)}m left` : 'cold'
    const rows: [string, string][] = [
      ['context', `${k(n.context)} of ${k(n.window)}${n.percent !== undefined ? ` (${Math.round(n.percent)}%)` : ''}`],
      ['turns', String(n.turns)],
      ['cache', cache],
      ['last request', `read ${k(n.lastRead)} · wrote ${k(n.lastWrite)}`],
      ['re-writes', String(n.rewrites)],
      ...n.rateLimits.map(
        r => [r.kind, `${Math.round(r.percentUsed)}%${r.resetsAt ? ` · resets ${r.resetsAt}` : ''}`] as [string, string],
      ),
      ['cost', n.costUsd !== undefined ? `$${n.costUsd.toFixed(2)}` : '—'],
      ['signals', n.active.length > 0 ? n.active.join(', ') : 'none'],
      ...n.captures.map(
        (c, i) =>
          [i === 0 ? 'work' : '', `${i === 0 ? 'started' : i === n.captures.length - 1 ? 'now' : 'then'} at ${k(c.context)}: ${c.drifted ? '⇄ ' : ''}${c.text}${c.why ? ` (${c.why})` : ''}`] as [string, string],
      ),
    ]
    return (
      <Box flexDirection="column">
        <Button key="close" label="close" role="dismiss" onPress={() => void $.ui.close({ id: NOW_PANE })} />
        {rows.map(([label, value], i) => (
          <Box key={`${label}${i}`} flexDirection="row">
            <Text dimColor>{label.padEnd(14)}</Text>
            <Text>{value}</Text>
          </Box>
        ))}
      </Box>
    )
  })