usage-band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const s = await read($, snap)
    const now = Math.max(s.now, s.lastAt)
    const until = (iso?: string) => (iso ? `resets ${left(Date.parse(iso) - now).replace(' ', '')}` : '')

    const cp = s.ctxPct ?? 0
    const cells: Cell[] = [{
      icon: 'ctx', value: `${cp}%`,
      sub: s.ctxWin ? `${k(s.ctxTok ?? 0)} / ${k(s.ctxWin)}` : '',
      frac: cp / 100,
      color: (s.ctxTok ?? 0) >= NAG_HARD ? BAD : (s.ctxTok ?? 0) >= NAG ? (tone(cp) === BAD ? BAD : WARN) : tone(cp),
    }]
    const tok = s.ctxTok ?? 0
    const nag = !e.props.isWorking && tok >= Math.max(NAG, s.snooze ?? 0)
    // A window whose reset time has passed is back at 0% until the next response says more.
    const limit = (icon: string, label: string, pct?: number, reset?: string) => {
      if (pct === undefined) return
      const isReset = !!reset && Date.parse(reset) <= now
      const p = isReset ? 0 : pct
      cells.push({ icon, value: `${p}%`, sub: isReset ? label : `${label} · ${until(reset)}`, frac: p / 100, color: tone(p) })
    }
    limit('clock', '5h', s.h5, s.h5Reset)
    limit('cal', '7d', s.wk, s.wkReset)
    const ttl = (s.ttl ?? (s.sub ? '1h' : '5m')) === '1h' ? TTL_SUB : TTL_API
    const rem = s.lastAt ? s.lastAt + ttl - now : 0
    // What the last message actually did: ✓ read from cache, ✗ paid full price.
    const last = s.hit === undefined ? '' : s.missTok ? ` · ✗ missed ${k(s.missTok)}` : ` · ✓ hit ${Math.round(s.hit * 100)}%`
    if (e.props.isWorking) cells.push({ icon: 'flame', value: 'Warm', sub: 'cache · active', frac: 1, color: WARMC, hot: true })
    else if (rem > 0) cells.push({ icon: 'flame', value: 'Warm', sub: `cache · ${left(rem).replace(' ', '')} left${last}`, frac: rem / ttl, color: WARMC, hot: true })
    else cells.push({ icon: 'snow', value: 'Cold', sub: s.lastAt ? 'cache · expired' : 'cache · no reply yet', frac: 0, color: COOL, hot: true })

    const { Box, Text, Button } = $.ui.resolve(e)
    // Three flavours: cache cold (Clear is free, anything else re-reads it all),
    // cache about to expire (compact now while it's cheap), or just big.
    const isCold = s.lastAt > 0 && rem <= 0
    const isExpiring = !isCold && rem > 0 && rem <= 10 * 60_000
    const compactBtn = <Button key="compact" label="Compact" variant={isCold ? 'secondary' : 'primary'} onPress={() => void $.session.compact()} />
    const clearBtn = <Button key="clear" label="Clear" variant={isCold ? 'primary' : 'secondary'} onPress={() => void $.prompt.fill({ text: '/clear' })} />
    const nagRow = nag ? (
      <Box flexDirection="row" alignItems="center" gap={1} paddingX={1}>
        <Text color={isCold ? COOL : tok >= NAG_HARD ? BAD : WARN}>●</Text>
        <Text dimColor>
          {isCold
            ? `Cache cold: next message re-reads ${k(tok)}. Clear is free.`
            : isExpiring
              ? `Cache expires in ${left(rem)}: compact now while it's cheap.`
              : `${k(tok)} in context: each turn re-sends all of it.`}
        </Text>
        {isCold ? clearBtn : compactBtn}
        {isCold ? compactBtn : clearBtn}
        <Button key="later" label="Later" dimColor onPress={() => update($, snap, x => ({ ...x, snooze: tok + 100_000 }))} />
      </Box>
    ) : null

    if (e.surface === 'desktop' || e.surface === 'vscode' || e.surface === 'mobile') {
      const { Svg } = $.ui.resolve(e) as { Svg: (p: { source: string; alt: string; width?: number; height?: number }) => unknown }
      return (
        <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" justifyContent="space-between" alignItems="center" paddingX={1}>
          {cells.map(c => (
            <Box key={c.icon} flexDirection="row" alignItems="center" gap={1}>
              <Svg source={gauge(c)} alt={`${c.value} ${c.sub}`} width={24} height={28} />
              <Text bold color={c.hot ? c.color : undefined}>{c.value}</Text>
              <Text dimColor>{c.sub}</Text>
            </Box>
          ))}
        </Box>
        {nagRow}
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
      <Box flexDirection="row" justifyContent="space-between" paddingX={1}>
        {cells.map(c => (
          <Text key={c.icon}>
            <Text color={c.color}>{ring(c.frac)} </Text>
            <Text bold color={c.hot ? c.color : undefined}>{c.value}</Text>
            
            {c.sub ? <Text dimColor> {c.sub}</Text> : null}
          </Text>
        ))}
      </Box>
      {nagRow}
      </Box>
    )
  })