cache-watch

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const fresh = await read($, freshAt)
    const counts = await read($, last)
    if (e.props.hasSurvey || fresh === null || counts === null) return next(e)

    const life = await read($, ttl)
    const sums = await read($, total)
    const hits = await read($, history)
    const at = await read($, now)
    const tip = await read($, advice)
    const isOpen = await read($, isExpanded)
    const isCompactRunning = await read($, isCompacting)
    const elements = $.ui.resolve(e)
    const { Box, Text, Button } = elements
    const Svg = 'Svg' in elements ? elements.Svg : undefined

    const lifeMs = life.minutes * 60_000
    const left = lifeMs - (at - fresh)
    const state = left <= 0 ? 'expired' : left <= WARN_MIN * 60_000 ? 'warn' : 'fresh'
    const tone = state === 'expired' ? RED : state === 'warn' ? AMBER : GREEN
    // A symbol and words carry the state too, never the color alone.
    const icon = state === 'expired' ? '✕' : state === 'warn' ? '▲' : '●'
    const clock =
      state === 'expired'
        ? `expired ${span(-left)} ago`
        : state === 'warn'
          ? `expires in ${span(left)}`
          : `${span(left)} left`
    const isNarrow = (e.props.bodyColumns ?? 80) < NARROW
    const size = sum(counts)

    const row = (label: string, value: string) => (
      <Box>
        <Box width={14} flexShrink={0}>
          <Text dimColor>{label}</Text>
        </Box>
        <Text>{value}</Text>
      </Box>
    )

    return (
      <Box flexDirection="column">
        <Box gap={1} alignItems="center">
          <Text color={tone}>{icon}</Text>
          <Text bold>Cache</Text>
          {Svg ? (
            <Svg source={barSvg(left / lifeMs)} alt={clock} width={BAR_W} height={BAR_H} />
          ) : (
            <Text>
              {barCells(left / lifeMs, isNarrow ? 10 : 16).map(cell => (
                <Text color={cell.color} dimColor={cell.color === undefined}>
                  {cell.glyph}
                </Text>
              ))}
            </Text>
          )}
          <Text color={state === 'fresh' ? undefined : tone} bold={state !== 'fresh'}>
            {clock}
          </Text>
          {!isNarrow && <Text dimColor>of {life.minutes === 60 ? '1h' : '5m'}</Text>}
          {!isNarrow && <Text dimColor>·</Text>}
          {!isNarrow && <Text dimColor>hits</Text>}
          {!isNarrow && Svg && (
            <Svg
              source={sparkSvg(hits)}
              alt={`Cache hit rate of the last ${hits.length} requests`}
              width={SPARK_W}
              height={SPARK_H}
            />
          )}
          {!isNarrow && !Svg && (
            <Text>
              {sparkCells(hits).map(cell => (
                <Text color={cell.color} dimColor={cell.color === undefined}>
                  {cell.glyph}
                </Text>
              ))}
            </Text>
          )}
          <Text color={heat(counts.read / Math.max(1, size))}>{pct(counts.read, size)}%</Text>
          {state === 'expired' && <Text color={RED}>· next message re-caches {k(size)} tokens</Text>}
          <Button
            key="details"
            plain
            hotkey="d"
            label={isOpen ? 'less' : 'more'}
            onPress={() => update($, isExpanded, v => !v)}
          />
        </Box>

        {isOpen && (
          <Box flexDirection="column" marginLeft={2}>
            {row('Lifetime', lifetimeText(life))}
            {row(
              'Last request',
              `${pct(counts.read, size)}% from cache: ${k(counts.read)} read, ${k(counts.write)} written, ${k(counts.uncached)} new`,
            )}
            {row(
              'Session',
              `${pct(sums.read, sum(sums))}% from cache: ${k(sums.read)} tokens served at about a tenth of the price`,
            )}
            {row('If it expires', `the next message re-writes ${k(size)} tokens into the cache`)}
            {row('Advice', `runs ${WARN_MIN}m before expiry, or now with /cache-advice`)}
          </Box>
        )}

        {tip !== null && (
          <Box
            flexDirection="column"
            borderStyle="round"
            borderColor={tip.status === 'failed' ? RED : AMBER}
            paddingX={1}
          >
            {tip.status === 'thinking' ? (
              <Text>◌ Preparing advice: asking the model while the cache is still warm...</Text>
            ) : (
              <Box flexDirection="column">
                <Text bold>
                  {tip.status === 'failed' ? '✕ Advice failed. ' : '▲ '}Suggested: {LABEL[tip.pick]}
                </Text>
                {tip.why !== '' && <Text dimColor>{tip.why}</Text>}
                <Box gap={1} marginTop={1}>
                  {tip.handoff !== '' && (
                    <Button
                      key="copy"
                      hotkey="1"
                      label="Copy handoff prompt"
                      variant={tip.pick === 'handoff' ? 'primary' : 'secondary'}
                      onPress={() => copyHandoff($, tip.handoff, e.surface)}
                    />
                  )}
                  {tip.handoff !== '' && (
                    <Button
                      key="show"
                      hotkey="2"
                      label="Show prompt"
                      onPress={() => void $.ui.open({ id: PANE, title: 'Handoff prompt' })}
                    />
                  )}
                  {(tip.pick !== 'continue' || tip.handoff !== '') && (
                    <Button
                      key="compact"
                      hotkey="3"
                      label={isCompactRunning ? 'Compacting...' : 'Compact now'}
                      variant={tip.pick === 'compact' ? 'primary' : 'secondary'}
                      onPress={() => (isCompactRunning ? undefined : compactNow($, tip.compactFocus))}
                    />
                  )}
                  <Button
                    key="keep"
                    hotkey="4"
                    label="Continue here"
                    variant={tip.pick === 'continue' ? 'primary' : 'secondary'}
                    onPress={() => update($, advice, () => null)}
                  />
                </Box>
              </Box>
            )}
          </Box>
        )}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const tip = await read($, advice)
    const { Box, Markdown, Button } = $.ui.resolve(e)
    const text = tip?.handoff ?? ''

    return (
      <Box flexDirection="column" gap={1}>
        <Markdown text={text || '_No handoff prompt yet. Run /cache-advice to prepare one._'} />
        {text !== '' && (
          <Button key="copy" hotkey="c" label="Copy" variant="primary" onPress={() => copyHandoff($, text, e.surface)} />
        )}
      </Box>
    )
  })