glyph-hud

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const [s, life, u, c, live] = await Promise.all([
      read($, stats),
      read($, lifetime),
      read($, usage),
      read($, cold),
      read($, isLive),
    ])

    if (e.surface !== 'terminal') {
      const { Box, Svg, Button } = $.ui.resolve(e)
      const sum = sumUsage(u)
      return (
        <Box flexDirection="column" gap={1}>
          <Svg
            source={svgHud(s, life, u, c, live)}
            alt={`This chat used ${compact(sum.input + sum.cacheWrite + sum.cacheRead + sum.output)} tokens across ${u.models.length} models; ${s.toolCalls} tool calls, ${s.edits} edits`}
          />
          <Box flexDirection="row" gap={1}>
            <Button key="rescan" label="Rescan" onPress={() => scanUsage($, true)} />
            <Button key="reset" label="Reset code stats" onPress={() => bump($, () => EMPTY)} />
            <Button key="close" label="Close" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
          </Box>
        </Box>
      )
    }

    const { Box, Text, Button } = $.ui.resolve(e)
    const width = Math.max(24, (e.props.bodyColumns ?? 40) - 2)
    const barRoom = Math.max(6, Math.min(30, width - 22))
    const sum = sumUsage(u)
    const total = sum.input + sum.cacheWrite + sum.cacheRead + sum.output
    const top = topTools(s, 4)
    const max = top[0]?.[1] ?? 1

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between">
          <Text dimColor>G L Y P H / H U D</Text>
          <Text color={live ? RED : MUTED}>{live ? '● LIVE' : '○ IDLE'}</Text>
        </Box>
        <Text dimColor>THIS CHAT · TOKENS</Text>
        {textDots(compact(total)).map(row => (
          <Text>{row}</Text>
        ))}
        <Text>
          <Text color={RED}>{u.costUsd === undefined ? '—' : `$${u.costUsd.toFixed(2)}`}</Text>
          <Text dimColor>  ctx </Text>
          {u.contextPct === undefined ? '—' : `${u.contextPct}%`}
          <Text dimColor>  req </Text>
          {sum.requests}
        </Text>
        <Text>
          <Text dimColor>cold cache call </Text>
          <Text color={c.coldPct === undefined ? MUTED : RED}>
            {c.coldPct === undefined ? 'calibrating' : `≈ ${c.coldPct.toFixed(1)}% of 5h`}
          </Text>
          <Text dimColor>  5h used </Text>
          {c.fiveHourPct === undefined ? '—' : `${c.fiveHourPct}%`}
        </Text>
        {c.lastCold && (
          <Text dimColor>
            last cold {c.lastCold.before}% → {c.lastCold.after}% (+{(c.lastCold.after - c.lastCold.before).toFixed(1)}),
            before-reading {c.lastCold.staleMinutes}m old
          </Text>
        )}
        <Text dimColor>
          in {compact(sum.input)} · cw {compact(sum.cacheWrite)} · cr {compact(sum.cacheRead)} · out {compact(sum.output)}
        </Text>
        <Text> </Text>
        <Text dimColor>SPREAD BY MODEL</Text>
        {u.models.length === 0 && <Text dimColor>{u.error ?? 'no responses counted yet'}</Text>}
        {u.models.map((t, i) => {
          const share = total > 0 ? totalOf(t) / total : 0
          const lit = Math.max(1, Math.round(share * barRoom))
          return (
            <Box flexDirection="column">
              <Box flexDirection="row">
                <Text bold color={i === 0 ? RED : undefined}>
                  {shortModel(t.model).slice(0, 16).padEnd(17)}
                </Text>
                <Text color={i === 0 ? RED : undefined}>{'●'.repeat(lit)}</Text>
                <Text dimColor>
                  {'·'.repeat(barRoom - lit)} {compact(totalOf(t))} {Math.round(share * 100)}%
                </Text>
              </Box>
              <Text dimColor>
                {'  '}in {compact(t.input)} cw {compact(t.cacheWrite)} cr {compact(t.cacheRead)} out {compact(t.output)} · {t.requests} req
              </Text>
            </Box>
          )
        })}
        <Text> </Text>
        <Text dimColor>CODE · THIS SESSION</Text>
        {top.map(([name, count], i) => {
          const lit = Math.max(1, Math.round((count / max) * barRoom))
          return (
            <Box flexDirection="row">
              <Text>{shortTool(name).slice(0, 16).padEnd(17)}</Text>
              <Text color={i === 0 ? RED : undefined}>{'●'.repeat(lit)}</Text>
              <Text dimColor>
                {'·'.repeat(barRoom - lit)} {count}
              </Text>
            </Box>
          )
        })}
        {codeTiles(s, life).map(([name, v, isAlert]) => (
          <Box flexDirection="row">
            <Text dimColor>{name.padEnd(12)}</Text>
            <Text bold color={isAlert ? RED : undefined}>
              {v}
            </Text>
          </Box>
        ))}
        {s.blocked > 0 && <Text color={RED}>● {s.blocked} AI-attribution commit(s) blocked</Text>}
        <Box flexDirection="row" gap={1}>
          <Button key="rescan" label="rescan" onPress={() => scanUsage($, true)} />
          <Button key="reset" label="reset" onPress={() => bump($, () => EMPTY)} />
          <Button key="close" label="close" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })