hud

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const snap = await read($, snapshot)
    const v = await read($, view)
    if (e.props.hasSurvey || snap === null || v.mode === 'hidden' || e.props.maxRows < 1) return next(e)

    const s = { ui: $.ui.resolve(e), isTerminal: e.surface === 'terminal', now: await $.clock.now() }
    if (s.isTerminal) lastTerminalDraw = s.now
    const { Box } = s.ui
    const d = await data($, snap)
    d.live = { ...d.live, isWorking: d.live.isWorking || e.props.isWorking }
    // The terminal draws its own [-] in the band's top-right corner; leave it room.
    const width = e.props.bodyColumns - (s.isTerminal ? 4 : 0)
    const act = actions($)
    const rows = v.mode === 'detail' && e.props.maxRows >= 2 ? drawer(s, d, width, act).slice(0, e.props.maxRows - 1) : []
    return (
      <Box flexDirection="column">
        <Box width={width}>{glance(s, d, width, act)}</Box>
        {rows}
      </Box>
    )
  })

export function glance(s: Surface, d: Data, width: number, actions: Actions, isPane = false): RenderElement {
  const { Box, Button, Text } = s.ui
  const { snap, live, now } = d

  // Claude's own spinner and clay say what Claude is doing in the terminal;
  // the desktop keeps its vector heartbeat in the status hue.
  const statusHue: Hue = s.isTerminal ? 'claude' : 'status'
  const txt = (hue: Hue, text: string, style: { dim?: boolean; bold?: boolean; color?: string } = {}) => (
    <Text color={style.color} bold={style.bold} dimColor={style.dim}>{text}</Text>
  )
  // A chip: its icon in the hue, then whatever the metric shows, flat on the
  // band so the row stays one line tall. The icon is a glyph in the terminal
  // and a lit vector tile elsewhere. With no name to press (narrow rows) the
  // terminal's glyph opens the drawer, and elsewhere the value does.
  const chip = (key: string, hue: Hue, glyph: string, body: RenderElement[], press?: { tab: Tab; id: string }, kind?: IconKind, percent?: number) => {
    const c = tone(d, hue)
    const mark = !s.isTerminal && kind
      ? icon(s, kind, c.fg, percent)
      : press ? label(s, d, actions, press.tab, press.id, glyph) : <Text color={c.fg}>{glyph}</Text>
    return (
      <Box key={`chip-${key}`} flexShrink={0} alignItems="center">
        {mark}
        <Text> </Text>
        {body}
      </Box>
    )
  }
  // A meter: a vector capsule on the desktop, a row of segments in the terminal.
  const meterOf = (key: string, unit: 'context' | 'limits', to: number, from: number | undefined, cols: number, hue: Hue, mark?: number) => {
    const c = tone(d, hue)
    if (s.isTerminal) return bar(s, key, sliding(d, unit, to, from), cols, mark, c.track)
    return capsule(s, key, to, cols, mark, isFlashing(d, unit) ? from : undefined, now - (d.live.flash[unit] - FLASH_MS))
  }

  const plan = (tier: Tier) => {
    const chips: Chip[] = []
    const meter = METER[tier]
    const named = tier === 'full' || tier === 'mid'

    // What Claude is doing: a spinner and a shimmer while it works, else idle.
    if (live.isWorking) {
      const frame = Math.floor(now / FRAME_MS)
      const clock = formatDuration(now - live.turnStartedAt)
      const tools = named && live.toolsThisTurn > 0 ? ` · ${live.toolsThisTurn} tool${live.toolsThisTurn === 1 ? '' : 's'}` : ''
      const word = named ? 'working' : ''
      chips.push({
        key: 'status', cols: 2 + (word ? word.length + 1 : 0) + clock.length + tools.length,
        draw: () => {
          const c = tone(d, statusHue)
          // A highlight sweeps across the word, as on Claude's own spinner line.
          const head = (frame % (word.length + 8)) - 3
          const bright = mix(c.fg, d.isLight ? '#000000' : '#FFFFFF', 0.6)
          const letters = [...word].map((ch, i) => (
            <Text key={`shimmer-${i}`} color={mix(c.fg, bright, Math.max(0, 1 - Math.abs(i - head) / 2.5))}>{ch}</Text>
          ))
          const motion = s.isTerminal ? letters : [heartbeat(s, 5, c.fg)]
          return chip('status', statusHue, SPINNER[frame % SPINNER.length] ?? '✻', [
            ...motion, ...(word ? [txt(statusHue, ' ')] : []),
            txt(statusHue, clock, { bold: true, color: c.fg }),
            ...(tools ? [txt(statusHue, tools, { dim: true })] : []),
          ], undefined, 'working')
        },
      })
    } else {
      chips.push({
        key: 'status', cols: 2 + 4,
        draw: () => chip('status', statusHue, '✻', [label(s, d, actions, 'turns', 'idle', 'idle')], undefined, 'idle'),
      })
    }

    // Context.
    {
      const p = snap.percent
      const value = p === undefined ? '—' : `${p}%`
      const hasMeter = meter > 0 && p !== undefined
      chips.push({
        key: 'ctx', cols: 2 + (named ? 8 : 0) + (hasMeter ? meter + 1 : 0) + value.length,
        draw: () => {
          const shown = p === undefined
            ? txt('context', value, { dim: true })
            : txt('context', value, { bold: true, color: glow(d, 'context', levelColor(p)) })
          return chip('ctx', 'context', pie(p ?? 0), [
            ...(named ? [label(s, d, actions, 'context', 'ctx', 'context'), txt('context', ' ')] : []),
            ...(hasMeter ? [meterOf('bar-ctx', 'context', p, live.previous.percent, meter, 'context'), txt('context', ' ')] : []),
            !named && !s.isTerminal ? label(s, d, actions, 'context', 'ctx', value) : shown,
          ], named ? undefined : { tab: 'context', id: 'ctx' }, 'context', p ?? 0)
        },
      })
    }

    // Plan limits.
    for (const limit of snap.limits) {
      const hue: Hue = limit.kind === 'seven_day' ? 'seven_day' : 'five_hour'
      const p = pace(limit, now)
      const name = limitName(limit.kind, tier === 'full')
      const value = `${Math.round(limit.percentUsed)}%`
      const showReset = limit.resetsAt !== undefined && (tier === 'full' || (tier === 'mid' && limit.kind === 'five_hour'))
      const reset = showReset ? formatSpan(Date.parse(limit.resetsAt as string) - now) : ''
      const id = limit.kind === 'seven_day' ? '7d' : limit.kind === 'five_hour' ? '5h' : limit.kind
      chips.push({
        key: `limit-${limit.kind}`,
        cols: 2 + (named ? name.length + 1 : 0) + (meter ? meter + 1 : 0) + value.length + (reset ? 5 + reset.length : 0),
        draw: () => {
          return chip(`limit-${limit.kind}`, hue, limit.kind === 'seven_day' ? '▦' : '◷', [
            ...(named ? [label(s, d, actions, 'limits', id, name), txt(hue, ' ')] : []),
            ...(meter ? [meterOf(`bar-${limit.kind}`, 'limits', limit.percentUsed, live.previous.limits[limit.kind], meter, hue, p?.expected), txt(hue, ' ')] : []),
            !named && !s.isTerminal ? label(s, d, actions, 'limits', id, value) : txt(hue, value, { bold: true, color: glow(d, 'limits', paceColor(limit, p)) }),
            ...(reset ? [txt(hue, ' │ ', { dim: true }), txt(hue, `↻ ${reset}`, { dim: true })] : []),
          ], named ? undefined : { tab: 'limits', id }, limit.kind === 'seven_day' ? 'seven_day' : 'five_hour')
        },
      })
    }

    // Tokens this session, when there's room: in and out.
    const tk = live.tokens
    const tokIn = tk.input + tk.cacheRead + tk.cacheWrite
    if (tier === 'full' && tokIn + tk.output > 0) {
      chips.push({
        key: 'tokens', cols: (s.isTerminal ? 0 : 2) + `↑ ${formatTokens(tokIn)}  ↓ ${formatTokens(tk.output)}`.length,
        draw: () => {
          const c = tone(d, 'tokens')
          return (
            <Box key="chip-tokens" flexShrink={0} alignItems="center">
              {s.isTerminal ? null : icon(s, 'tokens', c.fg)}
              {s.isTerminal ? null : <Text> </Text>}
              <Text color={c.fg}>↑ </Text>{txt('tokens', formatTokens(tokIn), { bold: true })}
              <Text color={c.fg}>  ↓ </Text>{txt('tokens', formatTokens(tk.output), { bold: true })}
            </Box>
          )
        },
      })
    }

    // Money: this session, then this month across sessions.
    if (snap.usd !== undefined) {
      const spend = summarize(d.ledger, d.today)
      const value = formatUsd(snap.usd)
      const month = named ? `${spend.monthLabel} ${formatUsd(spend.month)}` : ''
      chips.push({
        key: 'cost', cols: 2 + (named ? 6 : 0) + value.length + (month ? 3 + month.length : 0),
        draw: () => chip('cost', 'cost', '$', [
          ...(named ? [label(s, d, actions, 'cost', 'cost', 'spent'), txt('cost', ' ')] : []),
          !named && !s.isTerminal ? label(s, d, actions, 'cost', 'cost', value) : txt('cost', value, { bold: true, color: glow(d, 'cost', tone(d, 'cost').fg) }),
          ...(month ? [txt('cost', ' │ ', { dim: true }), txt('cost', month, { dim: true })] : []),
        ], named || !s.isTerminal ? undefined : { tab: 'cost', id: 'cost' }, 'cost'),
      })
    }

    const controls = isPane ? 0 : named ? 6 : 3
    // Off the terminal an icon is a tile two cells wide, not a one-cell glyph.
    const extra = s.isTerminal ? 0 : 1
    const need = chips.reduce((a, x) => a + x.cols + extra, 0) + chips.length * GAP + controls
    return { chips, named, fits: need <= width }
  }

  const { chips, named } = TIERS.map(plan).find(x => x.fits) ?? plan('tiny')
  const isOpen = d.view.mode === 'detail'
  // The items sit left on an even rhythm; the controls keep to the right edge.
  return (
    <Box key="glance" alignItems="center" width="100%" columnGap={GAP}>

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const s = { ui: $.ui.resolve(e), isTerminal: e.surface === 'terminal', now: await $.clock.now() }
    if (s.isTerminal) lastTerminalDraw = s.now
    const snap = (await read($, snapshot)) ?? { window: 0, limits: [] }
    const d = await data($, snap)
    return dashboard(s, d, e.props.bodyColumns, actions($))
  })

export function dashboard(s: Surface, d: Data, width: number, actions: Actions): RenderElement {
  const { Box, Text } = s.ui
  const inner = Math.max(40, width - 4)
  const heading = (key: string, text: string, hint: string) => (
    <Box key={key} marginTop={1} marginBottom={0}>
      <Text color={ACCENT} bold>{text}</Text>
      <Text dimColor>{`  ${hint}`}</Text>
    </Box>
  )
  return (
    <Box flexDirection="column" paddingX={2} paddingY={s.isTerminal ? 0 : 1}>
      {glance(s, d, inner, actions, true)}
      {heading('h-context', 'Context', 'how full the conversation window is')}
      {section(s, d, 'context', inner, actions, true)}
      {heading('h-limits', 'Plan limits', 'your subscription windows, and how fast you are using them')}
      {section(s, d, 'limits', inner, actions, true)}
      {heading('h-cost', 'Spend', 'sessions with HUD on this machine; not a bill')}
      {section(s, d, 'cost', inner, actions, true)}
      {heading('h-turns', 'Turns', 'each response, how long it took and what it used')}
      {section(s, d, 'turns', inner, actions, true)}
    </Box>
  )
}