cache-keeper

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const rest = await next(e)
    const cfg = effective()
    if (e.props.hasSurvey || (e.surface !== 'terminal' && e.surface !== 'desktop')) return rest
    const now = await $.clock.now()
    const last = keeps.at(-1)
    const row = cfg.showRow
      ? rowParts(clock, cfg, now, { keeps: keeps.length, lastPing: last ? { read: last.read, usd: last.usd } : undefined, context, price: price(), outcome })
      : undefined
    const card = held ? heldCard(held, clock, cfg, now, context, price()) : undefined
    if (!row && !card) return rest
    const { Box, Text, Button } = $.ui.resolve(e)
    const color = row?.state === 'warm' ? 'success' : row?.state === 'cold' ? 'warning' : 'subtle'
    return (
      <Box flexDirection="column">
        {rest}
        {row ? (
          <Box>
            <Text color={color}>●</Text>
            <Text dimColor> cache </Text>
            <Text color={color} bold>
              {row.state}
            </Text>
            <Text dimColor>{` · ${row.text}`}</Text>
          </Box>
        ) : null}
        {card ? (
          <Box flexDirection="column" width="100%" borderStyle="round" borderColor="warning" paddingX={1}>
            <Text>{card.reason}</Text>
            <Text dimColor wrap="truncate-end">{`“${card.preview}”`}</Text>
            {card.note ? <Text color="error">{card.note}</Text> : null}
            {card.doing ? (
              <Text color="warning">{card.doing}</Text>
            ) : (
              <Box flexDirection="column">
                <Box gap={1} flexWrap="wrap">
                  <Button key="held-send" hotkey="1" label={card.sendLabel} variant="primary" onPress={() => chooseHeld($, 'send')} />
                  <Button key="held-compact" hotkey="2" label="Compact, then send" onPress={() => chooseHeld($, 'compact')} />
                  <Button key="held-clear" hotkey="3" label="Clear, keep draft" onPress={() => chooseHeld($, 'clear')} />
                  <Button key="held-discard" hotkey="4" label="Discard" dimColor onPress={() => chooseHeld($, 'discard')} />
                </Box>
                {e.surface === 'terminal' ? <Text dimColor>click one, or ctrl+x tab then 1–4</Text> : null}
              </Box>
            )}
          </Box>
        ) : null}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, ($, e) => renderPane($, e))

async function renderPane($: EngineInterface, e: RenderInput<'Pane'>) {
  const { Box, Text, Button } = $.ui.resolve(e)
  const cfg = effective()
  const now = await $.clock.now()
  const p = price()
  const last = keeps.at(-1)
  const row = rowParts(clock, cfg, now, { keeps: keeps.length, lastPing: last ? { read: last.read, usd: last.usd } : undefined, context, price: p, outcome })
  const color = row?.state === 'warm' ? 'success' : row?.state === 'cold' ? 'warning' : 'subtle'
  const hours = cfg.keepWarm ? cfg.keepWarmHours : 0
  const changed = (Object.keys(overrides) as (keyof Patch)[]).some(k => overrides[k] !== config[k])
  const chip = (key: string, label: string, on: boolean, patch: Patch) => (
    <Button key={key} label={label} variant={on ? 'primary' : 'secondary'} onPress={() => void setFromPane($, patch)} />
  )
  const keepHint = [
    hours > 0 ? "after Claude's last answer" : `the cache lapses ${duration(cfg.cacheTtlMinutes * 60_000)} after its last use`,
    clock.holdUntil && clock.holdUntil > now && cfg.keepWarm ? `at least ${duration(clock.holdUntil - now)} more after a cold write` : undefined,
  ].filter(Boolean)
  const read = keeps.reduce((sum, k) => sum + k.read, 0)
  const spent = keeps.length && keeps.every(k => k.usd !== undefined) ? ` · ${usd(keeps.reduce((sum, k) => sum + (k.usd ?? 0), 0))}` : ''
  const paid = coldWrites.reduce((sum, w) => sum + (w.usd ?? 0), 0)
  return (
    <Box flexDirection="column">
      <Box>
        <Text color={color}>●</Text>
        <Text dimColor> cache </Text>
        <Text color={color} bold>
          {row?.state ?? 'idle'}
        </Text>
        <Text dimColor>{` · ${row?.text ?? "nothing cached yet; the clock starts at Claude's first answer"}`}</Text>
      </Box>
      {context > 0 ? (
        <Text dimColor>
          {`${tokens(context)} tokens${model ? ` on ${model}` : ''}${p ? ` · a cold send ${usd((context * p.write) / 1e6)}, a warm one ${usd((context * p.read) / 1e6)}` : ''}`}
        </Text>
      ) : null}

      <Text bold>{'\nKeep warm for'}</Text>
      <Box gap={1} flexWrap="wrap">
        {keepChoices(cfg).map(h => chip(`keep-${h}`, h === 0 ? 'Off' : duration(h * HOUR), h === hours, h === 0 ? { keepWarm: false } : { keepWarm: true, keepWarmHours: h }))}
      </Box>
      <Text dimColor>{keepHint.join(' · ')}</Text>
      {clock.stopped ? <Text color="warning">{`Stopped until your next message: ${clock.stopped}.`}</Text> : null}

      <Text bold>{'\nBefore it expires'}</Text>
      <Box gap={1} flexWrap="wrap">
        {(['nothing', 'compact', 'handoff'] as const).map(a => chip(`expiry-${a}`, EXPIRY_LABELS[a][0], cfg.atExpiry === a, { atExpiry: a }))}
      </Box>
      <Text dimColor>{EXPIRY_LABELS[cfg.atExpiry][1]}</Text>

      <Text bold>{`\nA cold send over ${tokens(cfg.guardMinTokens)} tokens`}</Text>
      <Box gap={1} flexWrap="wrap">
        {(['refuse', 'warn', 'off'] as const).map(g => chip(`guard-${g}`, GUARD_LABELS[g][0], cfg.coldGuard === g, { coldGuard: g }))}
      </Box>
      <Text dimColor>{GUARD_LABELS[cfg.coldGuard][1]}</Text>

      {row?.state === 'warm' || pinging ? (
        <Box marginTop={1}>
          {pinging ? <Text color="warning">Keeping warm…</Text> : <Button key="keep-now" label="Keep warm now" onPress={() => void keepWarmFromPane($)} />}
        </Box>
      ) : null}
      {paneNote ? <Text dimColor>{paneNote}</Text> : null}

      <Text bold>{'\nThis session'}</Text>
      <Text dimColor>{keeps.length ? `${keeps.length} keep-warm${keeps.length === 1 ? '' : 's'} · read ${tokens(read)}${spent}` : 'No keep-warms yet'}</Text>
      <Text dimColor>
        {coldWrites.length
          ? `${coldWrites.length} cold write${coldWrites.length === 1 ? '' : 's'} paid · ${tokens(coldWrites.reduce((sum, w) => sum + w.tokens, 0))} · ${usd(paid)}`
          : 'No cold writes paid'}
      </Text>
      {p ? <Text dimColor>{`${breakEven(p)} keep-warms cost one cold write`}</Text> : null}

      <Box marginTop={1} gap={1} alignItems="center">
        <Text dimColor>This session only · defaults in /config</Text>
        {changed ? (
          <Button
            key="reset"
            label="Reset"
            variant="secondary"
            onPress={() => {
              overrides = {}
              void setFromPane($, {})
            }}
          />
        ) : null}
      </Box>
    </Box>
  )
}