cache-clock

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const clock = await read($, clockAtom)
    const now = (await read($, nowAtom)) || (await $.clock.now())
    return paneView($, e, clock, now, Math.max(20, e.props.bodyColumns - 2))
  })

function paneView($: EngineInterface, e: View, clock: Clock, now: number, width: number) {
  const { Box, Text } = $.ui.resolve(e)
  const rule = '─'.repeat(width)
  const last = clock.last
  const header = (
    <Box flexDirection="row" justifyContent="space-between">
      <Text bold>⏱ Prompt cache</Text>
      <Text dimColor>{`${clock.ttl.label} · ${clock.ttl.why}`}</Text>
    </Box>
  )
  if (!last) {
    return (
      <Box flexDirection="column" paddingX={1}>
        {header}
        <Text dimColor>{rule}</Text>
        <Text dimColor>Nothing cached yet: the first reply starts the clock.</Text>
      </Box>
    )
  }
  const price = priceFor(last.model)
  const next = nextCost(last, price, clock.ttl.ms)
  const phase = phaseOf(last, clock.ttl, clock.isWorking, now)
  const left = Math.max(0, last.at + clock.ttl.ms - now)
  const barWidth = Math.max(10, width - 22)
  const costWidth = Math.max(10, width - 26)
  const t = clock.totals
  const hit = Math.round((100 * t.read) / Math.max(1, t.read + t.write + t.input))
  const fresh = clock.base > 0 ? freshCost(clock.base, price, clock.ttl.ms) : undefined
  const compact = compactCost(last, price)
  const options: string[] =
    phase === 'expired'
      ? [
          `Continue: ≈ ${moneyText(next.cold)} for the next message, then ≈ ${moneyText(next.warm)} a message while warm.`,
          ...(fresh !== undefined ? [`Start fresh with /clear: ≈ ${moneyText(fresh)}. Claude forgets this conversation; save what you need to a file first.`] : []),
          `/compact first: re-reads all ${tokensText(next.tokens)} tokens without the cache to summarize them, then each message is small.`,
        ]
      : [
          `Keep going: ≈ ${moneyText(next.warm)} a short message while warm.`,
          `Stepping away for longer than ${phase === 'working' ? (clock.ttl.ms >= HOUR ? 'an hour' : '5 minutes') : durationText(left)}? /compact now ≈ ${moneyText(compact)}; once cold, the next message is ≈ ${moneyText(next.cold)}.`,
        ]
  return (
    <Box flexDirection="column" paddingX={1}>
      {header}
      <Text dimColor>{rule}</Text>
      <Text color={COLOR[phase]}>
        {phase === 'expired' ? `${bar(0, barWidth)} expired` : `${bar(phase === 'working' ? 1 : left / clock.ttl.ms, barWidth)} ${phase === 'working' ? 'in use' : `${durationText(left)} left`}`}
      </Text>
      <Box flexDirection="column" marginTop={1}>
        <Text bold color="blue">NEXT MESSAGE</Text>
        <Text wrap="wrap">{`Re-sends ${tokensText(next.tokens)} tokens${clock.window ? ` of the ${tokensText(clock.window)} window` : ''}.`}</Text>
        <Text>
          <Text color="green">{`cache warm    ${bar(next.warm / Math.max(next.cold, 1e-9), costWidth)} `}</Text>
          <Text>{moneyText(next.warm)}</Text>
        </Text>
        <Text>
          <Text color="red">{`cache expired ${bar(1, costWidth)} `}</Text>
          <Text>{moneyText(next.cold)}</Text>
        </Text>
        <Text dimColor wrap="wrap">{`${price.name}${price.isGuess ? ' (price unknown, Opus 5.5 assumed)' : ''} at API prices, before Claude's reply. Prices: ${pricedAt ? `Anthropic's pricing page, read ${durationText(now - pricedAt)} ago` : `built-in list of ${BUILT_IN_DATE}`}.`}</Text>
      </Box>
      <Box flexDirection="column" marginTop={1}>
        <Text bold color="cyan">WHAT TO DO</Text>
        {options.map((o, i) => (
          <Text key={`o-${i}`} wrap="wrap">{`• ${o}`}</Text>
        ))}
      </Box>
      <Text dimColor>{rule}</Text>
      <Box flexDirection="column">
        <Text bold color="magenta">THIS SESSION</Text>
        <Text>
          {clock.history.map((r, i) => (
            <Text key={`h-${i}`} color={r.isMiss ? 'red' : 'green'}>
              {r.isMiss ? '○' : '●'}
            </Text>
          ))}
        </Text>
        <Text wrap="wrap">{`hit ${hit}% · ${t.requests} requests · ${tokensText(t.read)} read from cache · ${tokensText(t.write)} written · ≈ ${moneyText(t.usd)} at API prices`}</Text>
        {clock.misses.length > 0 && (
          <Box flexDirection="column" marginTop={1}>
            <Text dimColor>Rebuilt:</Text>
            {clock.misses.map((m, i) => (
              <Text key={`m-${i}`} wrap="wrap">{`${durationText(now - m.at)} ago · ${tokensText(m.write)} tokens · ${m.cause ?? 'unknown'} · ${moneyText(m.usd)}`}</Text>
            ))}
          </Box>
        )}
      </Box>
      <Text dimColor>{rule}</Text>
      <Text wrap="wrap">
        <Text bold>Resets the cache: </Text>
        <Text>/model, fast mode on, adding an MCP server, /compact, a long pause.</Text>
      </Text>
      <Text wrap="wrap">
        <Text bold>Keeps it: </Text>
        <Text>editing files, skills, /rewind, subagents, permission modes.</Text>
      </Text>
      <Text dimColor wrap="wrap">{`Last request on ${shortModel(last.model)} · context ${tokensText(contextOf(last))} tokens.`}</Text>
    </Box>
  )
}