tokenscope

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const l = await read($, ledger)
    const v = await read($, view)
    const c = await read($, cache)
    const now = await $.clock.now()
    const W = Math.max(36, e.props.bodyColumns - 1)
    const elapsedH = Math.max(1 / 60, (now - l.startedAt) / 3_600_000)
    const perHour = l.totals.usd / elapsedH
    const agentCount = Object.values(l.agents).filter(a => a.kind === 'subagent').length
    const room = Math.max(4, (e.viewport?.rows ?? 30) - 12)

    const groups = buildGroups(l, c, now)
    let body
    if (v.tab === 'agents') body = Agents(ui, l, W, now)
    else if (v.tab === 'tasks') body = Tasks(ui, l, W, now, room)
    else if (v.tab === 'skills') body = Skills(ui, l, W)
    else if (v.tab === 'models') body = ModelCards(ui, groups, l, c, now, W)
    else if (v.tab === 'plan') body = Plan($, ui, l, v, W, now)
    else if (v.tab === 'cache') body = CacheTab($, ui, c, W, now, groups)
    else body = Overview(ui, l, W, ByModel(ui, groups, l, c, now, W))

    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Box flexDirection="row" justifyContent="space-between">
            <Text bold color={C.brand}>
              ◆ T O K E N S C O P E
            </Text>
            <Text color={C.dim}>
              {fmtDuration(now - l.startedAt)} · {l.totals.requests} req · {agentCount} subagents
            </Text>
          </Box>
          <Box flexDirection="row" gap={2} flexWrap="wrap">
            <Text bold color={C.usd}>
              {fmtUsd(l.totals.usd)}
            </Text>
            <Text color={C.dim}>API-equivalent</Text>
            <Text color={heat(perHour / 4)}>↯ {fmtUsd(perHour)}/h burn</Text>
            {v.engineUsd !== null && <Text color={C.dim}>/cost ledger {fmtUsd(v.engineUsd)}</Text>}
          </Box>
          {NowLine(ui, l, v, c, now, W)}
          {ModelStrip(ui, groups, l, c, now, W)}
        </Box>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          {TABS.map(([tab, label], i) => (
            <Button
              key={`tab-${tab}`}
              label={label}
              hotkey={String(i + 1)}
              variant={v.tab === tab ? 'primary' : 'secondary'}
              onPress={() => update($, view, x => ({ ...x, tab }))}
            />
          ))}
        </Box>
        {body}
      </Box>
    )
  })

export function NowLine(ui: Kit, l: Ledger, v: View, c: CacheState, now: number, W: number) {
  const { Box, Text } = ui
  const n = l.now
  if (!n?.model) return <Text color={C.dim}>▶ NOW  waiting for the first request…</Text>
  const r = rateFor(n.model)
  const ctx = v.context
  const pctFull = ctx?.percent ?? 0
  const prefix = ctx?.tokens ?? c.main?.tokens ?? 0
  const warm = c.main !== null && isWarm(c.main, now) && modelKey(c.main.model) === modelKey(n.model)
  const warmCost = (prefix * r.cacheRead) / 1e6
  const coldCost = (prefix * r.input * 1.25) / 1e6
  const bw = W >= 100 ? 12 : 6
  return (
    <Box flexDirection="row" columnGap={1} flexWrap="wrap">
      <Text color={C.dim}>▶ NOW</Text>
      <Text bold color={familyColor(n.model)}>
        {modelName(n.model)}
      </Text>
      <Text color={n.effort ? effortColor(n.effort) : C.dim}>{n.effort ? `effort ${n.effort}` : 'effort —'}</Text>
      {ctx && ctx.tokens !== undefined && (
        <Box flexDirection="row" columnGap={1}>
          <Text color={C.dim}>│ ctx</Text>
          <Text color={ctxColor(pctFull)}>
            {fmtTok(ctx.tokens)}/{fmtTok(ctx.window)}
          </Text>
          <Text color={ctxColor(pctFull)}>{bar(pctFull / 100, bw).padEnd(bw, '·')}</Text>
          <Text color={ctxColor(pctFull)} bold>
            {pctFull}%
          </Text>
        </Box>
      )}
      {prefix > 0 && (
        <Box flexDirection="row" columnGap={1}>
          <Text color={C.dim}>│ next request</Text>
          {warm ? (
            <Box flexDirection="row" columnGap={1}>
              <Text color={C.cr} bold>
                ≈{fmtUsd(warmCost)}
              </Text>
              <Text color={C.dim}>warm · {fmtUsd(coldCost)} if cold</Text>
            </Box>
          ) : (
            <Box flexDirection="row" columnGap={1}>
              <Text color={C.cold} bold>
                ≈{fmtUsd(coldCost)}
              </Text>
              <Text color={C.dim}>re-writes the cache</Text>
            </Box>
          )}
        </Box>
      )}
    </Box>
  )
}

export function ModelStrip(ui: Kit, groups: Group[], l: Ledger, c: CacheState, now: number, W: number) {
  const { Box, Text } = ui
  const ttl = ttlMs(c.ttl)
  const bw = W >= 100 ? 14 : 8
  const shown = groups.filter(g => g.loops.length > 0 || g.isNow).slice(0, 4)
  if (shown.length === 0) return <Text color={C.dim}>⏱ no prompt cache yet</Text>
  return (
    <Box flexDirection="column">
      {shown.map(g => {
        const w = g.warmest
        const efforts = effortList(g, l)
        const lock = g.hasMain && c.lock === 'on' && w ? ' 🔒' : ''
        if (!w) {
          const last = g.loops[0]?.w
          return (
            <Box flexDirection="row" columnGap={1}>
              <Text color={C.cold} bold>
                {lpad('❄', 6)}
              </Text>
              <Text color={C.cold}>{''.padEnd(bw, '·')}</Text>
              <Text color={familyColor(g.model)} bold>
                {pad(modelName(g.model), 11)}
              </Text>
              <Text color={C.dim}>{pad(efforts, 13)}</Text>
              <Text color={C.dim}>
                {last ? `cold for ${fmtDuration(now - last.expiresAt)} · next request re-writes ~${fmtTok(last.tokens)}` : 'no cache yet'}
              </Text>
            </Box>
          )
        }
        const color = warmColor(w, now, ttl)
        return (
          <Box flexDirection="row" columnGap={1}>
            <Text color={color} bold>
              {lpad(`⏱${mmss(w.expiresAt - now)}`, 6)}
            </Text>
            <Text color={color}>{bar((w.expiresAt - now) / ttl, bw).padEnd(bw, '·')}</Text>
            <Text color={familyColor(g.model)} bold>
              {pad(modelName(g.model), 11)}
            </Text>
            <Text color={C.dim}>{pad(efforts, 13)}</Text>
            <Text color={C.text}>{warmCount(g, now)}</Text>
            <Text color={C.dim}>
              · {fmtTok(w.tokens)} tok · keeping it warm saves {fmtUsd(keepWarmUsd(w))}
              {lock}
            </Text>
          </Box>
        )
      })}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const v = await read($, view)
    const l = await read($, ledger)
    if (e.props.hasSurvey || !v.band || (l.totals.requests === 0 && !l.now)) return next(e)
    const { Box, Text } = $.ui.resolve(e)
    const c = await read($, cache)
    const now = await $.clock.now()
    const ttl = ttlMs(c.ttl)
    const t = l.totals
    type Seg = [string, string, boolean?]
    const segs: Seg[][] = []

    // what runs now, and its cache
    const n = l.now
    const head: Seg[] = [['◆ ', C.brand]]
    if (n?.model) {
      head.push([modelName(n.model), familyColor(n.model), true])
      head.push([n.effort ? `·${n.effort}` : '', n.effort ? effortColor(n.effort) : C.dim])
    }
    const m = c.main
    if (m && isWarm(m, now)) {
      head.push([` ⏱${mmss(m.expiresAt - now)}`, warmColor(m, now, ttl), true])
      if (c.lock === 'on') head.push([' 🔒', C.dim])
    } else if (m) {
      head.push([' ❄ cold', C.cold, true])
    }
    if (c.queued) head.push([` 🔁 ${c.queued}`, C.usd])
    segs.push(head)

    // every other model with a warm cache, grouped
    for (const g of buildGroups(l, c, now)) {
      if (!g.warmest || (n?.model && modelKey(n.model) === g.key)) continue
      segs.push([
        [' │ ', C.dim],
        [modelName(g.model), familyColor(g.model)],
        [` ⏱${mmss(g.warmest.expiresAt - now)}`, warmColor(g.warmest, now, ttl)],
        [g.loops.filter(x => isWarm(x.w, now)).length > 1 ? ` ×${g.loops.filter(x => isWarm(x.w, now)).length}` : '', C.dim],
      ])
    }

    segs.push([[' │ ', C.dim], [fmtUsd(t.usd), C.usd, true]])
    const ctx = v.context
    if (ctx?.percent !== undefined) segs.push([[' │ ctx ', C.dim], [`${ctx.percent}%`, ctxColor(ctx.percent), true]])
    segs.push([[' │ in ', C.dim], [fmtTok(t.input), C.in]])
    segs.push([[' c.wrt ', C.dim], [fmtTok(t.cacheWrite), C.cw]])
    segs.push([[' c.read ', C.dim], [fmtTok(t.cacheRead), C.cr]])
    segs.push([[' out ', C.dim], [fmtTok(t.output), C.out]])
    segs.push([[' │ hit ', C.dim], [pct(hitRate(t)), C.save]])
    const five = v.gauges.find(g => g.kind === 'five_hour')
    if (five) {
      const cells = Math.round(five.percentUsed / 20)
      segs.push([
        [' │ 5h ', C.dim],
        ['▰'.repeat(cells) + '▱'.repeat(5 - cells), gaugeColor(five.percentUsed)],
        [` ${five.percentUsed}%`, gaugeColor(five.percentUsed)],
      ])
    }
    segs.push([[' │ /tokenscope', C.dim]])

    let room = e.props.bodyColumns - 1
    const shown: Seg[] = []
    for (const g of segs) {
      const w = g.reduce((sum, [text]) => sum + text.length, 0)
      if (w > room) break
      room -= w
      shown.push(...g.filter(([text]) => text !== ''))
    }
    return (
      <Box flexDirection="row">
        {shown.map(([text, color, bold]) => (
          <Text color={color} bold={bold === true}>
            {text}
          </Text>
        ))}
      </Box>
    )
  })