session-meter

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const b = await read($, breakdown)
    const r = await read($, reading)
    const turns = await read($, history)
    const list = await read($, samples)
    const sent = await read($, notes)
    const calls = await read($, tools)
    const asks = await read($, requests)
    const now = await $.clock.now()
    const w = Math.max(28, e.props.bodyColumns - 1)
    const inner = w - 6
    if (!b) return <Text dimColor>Waiting for the first context reading.</Text>

    const draw = (row: Row, width: number) =>
      fit(row, width).map((s, j) => <Text key={String(j)} color={s.c} dimColor={s.d} bold={s.b}>{s.t}</Text>)
    const frame = (title: string, tone: string, rows: Row[], right = '') => {
      const rule = Math.max(0, w - 6 - title.length - (right ? right.length + 2 : 0))
      return (
        <Box key={title} flexDirection="column" marginTop={1}>
          <Text>
            <Text color={tone} dimColor>╭─ </Text>
            <Text color={tone} bold>{title}</Text>
            <Text color={tone} dimColor> {'─'.repeat(rule)}</Text>
            {right ? <Text dimColor> {right} </Text> : null}
            <Text color={tone} dimColor>─╮</Text>
          </Text>
          {rows.map((row, i) => (
            <Text key={String(i)}>
              <Text color={tone} dimColor>│  </Text>
              {draw(row, inner)}
              <Text color={tone} dimColor>  │</Text>
            </Text>
          ))}
          <Text color={tone} dimColor>╰{'─'.repeat(w - 2)}╯</Text>
        </Box>
      )
    }

    // Context: one stacked bar of what fills it, the compaction mark, a legend, the size over turns, the heaviest items.
    const used = b.categories.filter(c => c.kind === 'used' && c.tokens > 0)
    const bar: Row = used.map(c => ({ t: '█'.repeat(cells(c.tokens, b.window, inner)), c: c.color }))
    const filled = width(bar)
    const mark = b.threshold === undefined ? -1 : Math.min(inner - 1, cells(b.threshold, b.window, inner))
    for (let i = filled; i < inner; i++) bar.push(i === mark ? { t: '┊', c: 'warning' } : { t: '·', d: true, c: mark >= 0 && i > mark ? 'error' : undefined })
    // The legend is a two-column grid, names left and counts right-aligned in each column.
    const colW = Math.floor((inner - 3) / 2)
    const keys = [
      ...used.map(c => ({ mark: '■', c: c.color, name: c.name, n: tokens(c.tokens) })),
      ...(b.threshold === undefined ? [] : [{ mark: '┊', c: 'warning', name: 'compacts at', n: tokens(b.threshold) }]),
    ]
    const key = (k: (typeof keys)[number]): Row => spread([{ t: `${k.mark} `, c: k.c }, { t: k.name.slice(0, colW - k.n.length - 3) }], [{ t: k.n, d: true }], colW)
    const legend: Row[] = []
    for (let i = 0; i < keys.length; i += 2) {
      const [a, z] = [keys[i], keys[i + 1]]
      if (a) legend.push([...key(a), ...(z ? [{ t: '   ' }, ...key(z)] : [])])
    }
    const last = turns.at(-1)
    const prev = turns.at(-2)
    const delta = last !== undefined && prev !== undefined ? last - prev : undefined
    const chartCols = inner - 12
    const chart = turns.length < 2 ? [] : braille(turns, b.window, chartCols, 2)
    const contextRows: Row[] = [
      spread([{ t: tokens(b.tokens), b: true }, { t: ` of ${tokens(b.window)}`, d: true }], [{ t: `${Math.round(b.percent)}%`, c: zone(b.percent), b: true }], inner),
      [],
      bar,
      [],
      ...legend,
      [],
      ...(chart.length
        ? [
            [{ t: chart[0] ?? '', c: 'suggestion' }, { t: '  ' }, { t: `${delta !== undefined && delta >= 0 ? '+' : '-'}${tokens(Math.abs(delta ?? 0))}`, b: true }],
            [{ t: chart[1] ?? '', c: 'suggestion' }, { t: '  last turn', d: true }],
          ]
        : [[{ t: 'Size over turns shows after two turns.', d: true }]]),
      ...(b.heaviest.length ? [[] as Row, ...b.heaviest.map(item => spread([{ t: '▸ ', d: true }, { t: item.name }], [{ t: tokens(item.tokens), d: true }], inner))] : []),
    ]

    // Limits: each window's meter, its reset, and whether the current pace lasts until then.
    const limitRows: Row[] = []
    const tones: string[] = []
    const glance: Row = [{ t: 'ctx ', d: true }, { t: `${Math.round(b.percent)}%`, c: zone(b.percent), b: true }]
    for (const win of WINDOWS) {
      const limit = r.limits.find(l => l.kind === win.kind)
      if (!limit) continue
      const p = pace(list, win.kind, now)
      const tone = limit.percentUsed >= 80 || (p.kind === 'full' && p.inMs < 3_600_000) ? 'error' : p.kind === 'full' ? 'warning' : 'success'
      tones.push(tone)
      const pct = `${Math.round(limit.percentUsed)}%`.padStart(4)
      const reset = `↻${duration(resetsIn(limit.resetsAt, now))}`.padEnd(7)
      if (limitRows.length) limitRows.push([])
      limitRows.push([{ t: `${win.label} `, b: true }, { t: '▕', d: true }, ...meter(limit.percentUsed, inner - 18), { t: '▏', d: true }, { t: ` ${pct} `, c: tone, b: true }, { t: reset, d: true }])
      limitRows.push(
        p.kind === 'measuring'
          ? [{ t: '   measuring pace…', d: true }]
          : p.kind === 'full'
            ? [{ t: `   full in ~${duration(p.inMs)} at this pace`, c: tone }]
            : [{ t: '   lasts until the reset at this pace', d: true }],
      )
      glance.push({ t: `   ${win.label} `, d: true }, { t: `${Math.round(limit.percentUsed)}%`, c: tone, b: true })
    }
    // toTimeString starts with the local HH:MM:SS.
    const hhmm = (ms: number) => new Date(ms).toTimeString().slice(0, 5)
    if (sent.length) limitRows.push([], ...sent.map(n => [{ t: `${hhmm(n.at)} `, d: true }, { t: `note sent: ${n.text}` }]))
    const limitTone = tones.includes('error') ? 'error' : tones.includes('warning') ? 'warning' : 'success'

    // Tools and Requests share the rows left below; each keeps at least three.
    // The top padding and glance row, each frame's two borders and top margin, and the Requests column header.
    const fixed = 2 + (contextRows.length + 3) + (limitRows.length ? limitRows.length + 3 : 0) + 3 + 4
    const left = Math.max(6, e.props.scroll.bodyRows - fixed)
    const toolCount = Math.max(3, Math.ceil(left / 2))
    const askCount = Math.max(3, left - toolCount)

    const shown = [...calls.filter(t => t.ok === undefined), ...calls.filter(t => t.ok !== undefined)].slice(0, toolCount)
    const running = calls.filter(t => t.ok === undefined).length
    const toolRows: Row[] = shown.length
      ? shown.map(t => {
          const icon = t.ok === undefined ? { t: '◌', c: 'warning' } : t.ok ? { t: '✓', c: 'success' } : { t: '✗', c: 'error' }
          const time = t.ms === undefined ? '…' : elapsed(t.ms)
          return spread([icon, { t: ` ${(t.sub ? `↳${t.name}` : t.name).padEnd(7)} `, b: !t.sub, d: t.sub }, { t: t.target.slice(0, inner - 16), d: true }], [{ t: time, d: true }], inner)
        })
      : [[{ t: 'No tool calls yet.', d: true }]]
    const toolTone = shown.find(t => t.ok !== undefined)?.ok === false ? 'error' : 'success'

    const askRows: Row[] = asks.length
      ? [
          [{ t: 'loop          in   out  cache   time', d: true }],
          ...asks.slice(0, askCount).map(q => {
            const hit = q.input ? Math.round((q.cached / q.input) * 100) : 0
            const cacheTone = hit < 20 ? 'error' : hit < 50 ? 'warning' : undefined
            return [
              { t: q.agent.padEnd(10).slice(0, 10), b: q.agent === 'main', d: q.agent !== 'main' },
              { t: tokens(q.input).padStart(6) + tokens(q.output).padStart(6) },
              { t: `${hit}%`.padStart(7), c: cacheTone, d: cacheTone === undefined },
              { t: elapsed(q.ms).padStart(7), d: true },
            ]
          }),
        ]
      : [[{ t: 'No model requests yet.', d: true }]]
    const lastHit = asks[0] && asks[0].input ? asks[0].cached / asks[0].input : 1
    const model = asks[0]?.model.replace(/^claude-/, '') ?? ''

    return (
      <Box flexDirection="column" paddingTop={1}>
        <Text>
          {draw(glance, w - 3)}
        </Text>
        {frame('Context', zone(b.percent), contextRows)}
        {limitRows.length ? frame('Limits', limitTone, limitRows) : null}
        {frame('Tools', toolTone, toolRows, running ? `${running} running` : '')}
        {frame('Requests', lastHit < 0.5 ? 'warning' : 'success', askRows, model)}
      </Box>
    )
  })