cache-panel

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const w = await read($, warm)
    const now = await read($, nowAt)
    const last = await read($, lastRequestAt)
    const reminding = await read($, isReminding)
    const showReminder = w === null && reminding && last > 0 && now - last < TTL_MS
    if (e.props.hasSurvey || (w === null && !showReminder)) return next(e)

    const below = await next(e)
    const { Box, Button } = $.ui.resolve(e)
    const short = e.props.bodyColumns < 40
    const label =
      w !== null
        ? `warm ${fmtDur(w.deadline - now)}`
        : short
          ? `cache ${fmtDur(last + TTL_MS - now)}`
          : `cache cools in ${fmtDur(last + TTL_MS - now)}`
    const mine = <Button key="open" label={label} onPress={() => void openPanel($)} />

    return below ? (
      <Box flexDirection="column">
        {mine}
        {below}
      </Box>
    ) : (
      mine
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    // Text fields exist in the terminal and the Desktop app only.
    if (e.surface !== 'terminal' && e.surface !== 'desktop') return next(e)
    const { Box, Text, Button, Input } = $.ui.resolve(e)
    const s = await read($, snap)
    const now = await read($, nowAt)
    const last = await read($, lastRequestAt)
    const w = await read($, warm)
    const typed = await read($, hoursText)
    const lastNote = await read($, note)

    const price = priceOf(s.model)
    const basis = s.hasLimits ? 'subscription' : 'api'
    const parsed = parseHours(typed)
    const hours = parsed ?? DEFAULT_HOURS
    const isCold = last > 0 && now - last >= TTL_MS
    const plan = makePlan({ ctx: s.ctx, price, basis, hours, lastReq: last, now, isWarm: !isCold })
    // Short enough to fit above the prompt, so the arrow keys move focus and do not scroll.
    const narrow = e.props.bodyColumns < 44

    const cacheText = isCold
      ? `cold ${fmtDur(now - last - TTL_MS)}`
      : last > 0
        ? `${fmtDur(last + TTL_MS - now)} left`
        : 'no request'
    const quota = s.fiveHour !== null ? ` · 5h ${s.fiveHour}%` : ''
    const guess = price.isGuess ? ' · guessed' : ''

    let advice: string
    if (parsed === null) advice = `Hours: 0 to ${MAX_HOURS}`
    else if (isCold) advice = 'Cache is cold: just send.'
    else if (s.ctx < thresholdTokens(price)) advice = 'Small context: do nothing.'
    else advice = narrow ? `Best: ${pickLabel(plan.recommended)}` : `Best: ${pickLabel(plan.recommended)} (warm wins to ~${plan.breakEvenHours.toFixed(1)}h)`
    const legend = basis === 'subscription' ? '~ token-equiv (plan) · $ API price' : '~ token-equiv · $ API price'

    return (
      <Box flexDirection="column">
        {narrow ? (
          <Box flexDirection="column">
            <Text bold>{`${price.id} · ctx ${fmtK(s.ctx)}`}</Text>
            <Text>{`cache ${cacheText}${quota}${guess}`}</Text>
          </Box>
        ) : (
          <Text bold>{`${price.id} · ctx ${fmtK(s.ctx)} · cache ${cacheText}${quota}${guess}`}</Text>
        )}
        <Input
          key="hours"
          label="Away (hours)"
          placeholder={String(DEFAULT_HOURS)}
          value={typed}
          submitLabel="warm"
          onInput={(v: string) => void update($, hoursText, () => v)}
          onSubmit={(v: string) => {
            const h = parseHours(v)
            if (h === null) $.ui.toast(`Enter hours between 0 and ${MAX_HOURS}`, { timeoutMs: TOAST_MS })
            else void startWarm($, h)
          }}
        />
        {optionRows(plan, !isCold, narrow).map(line => (
          <Text>{line}</Text>
        ))}
        {!narrow && <Text dimColor>{lastNote !== '' ? lastNote : legend}</Text>}
        <Text>{advice}</Text>
        {w !== null && (
          <Button
            key="stop"
            label={`Stop warm (${fmtDur(w.deadline - now)} left, ${w.pings} ping${w.pings === 1 ? '' : 's'})`}
            autoFocus
            onPress={() => void endWarm($, 'stopped')}
          />
        )}
        {w === null && !isCold && (
          <Button
            key="warm"
            label={`Keep warm ${fmtHours(hours)}`}
            autoFocus
            onPress={() => {
              if (parsed === null) $.ui.toast(`Enter hours between 0 and ${MAX_HOURS}`, { timeoutMs: TOAST_MS })
              else void startWarm($, parsed)
            }}
          />
        )}
        {!isCold && <Button key="once" label="Ping once (+1h)" onPress={() => void doPing($, 'once')} />}
        <Button key="compact" label="Compact now" onPress={() => void $.clock.after(50, () => void compactNow($))} />
        {isCold && <Button key="close" label="Dismiss" autoFocus onPress={() => void $.ui.close({ id: PANE })} />}
      </Box>
    )
  })