session-hud

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    if (e.props.hasSurvey) return below

    const st = await read($, hud)
    const now = await $.clock.now()
    const { Box, Text } = $.ui.resolve(e)
    const W = Math.max(20, (e.props.bodyColumns ?? 80) - 6)

    // Section header: the mod's name
    const header = <Text bold color="blueBright" wrap="truncate">{'⚡ Session Tracker'}</Text>
    const five = st.limits.find(l => l.kind === 'five_hour')

    const ctxLeft = st.ctxTokens === null ? st.ctxWindow : Math.max(0, st.ctxWindow - st.ctxTokens)
    // Two clocks: the prompt running now (or the last one), and every prompt of the session added up
    const total = cleanTotal(st.totalSeconds) + (st.isRunning ? st.turnSeconds : 0)
    // Labels in blue, values in their own color
    const label = (t: string) => <Text bold color="blueBright">{t}</Text>

    // Side-by-side cards: each metric is a small titled column, and the cards wrap with the width
    const bar = (cells: number, pct: number | null) => {
      const p = pct ?? 0
      const filled = Math.max(pct === null ? 0 : 1, Math.min(cells, Math.round((p / 100) * cells)))
      return [
        <Text color={tone(p)}>{'█'.repeat(filled)}</Text>,
        <Text dimColor>{'░'.repeat(Math.max(0, cells - filled))}</Text>,
        <Text bold color={tone(p)}>{pct === null ? ' —' : ` ${Math.round(p)}%`}</Text>,
      ]
    }
    const reset5 = five ? inTime(five.resetsAt, now) : ''
    const card = (width: number, ...rowsOfSpans: any[][]) => (
      <Box flexDirection="column" width={width}>
        {rowsOfSpans.map(spans => <Text wrap="truncate">{spans}</Text>)}
      </Box>
    )
    const isOver = st.ctxTokens !== null && st.ctxWindow > 0 && st.ctxTokens >= compactAt(st.ctxWindow)
    const isHard = isOver && st.ctxTokens !== null && st.ctxTokens >= compactHard(st.ctxWindow)
    // Mods cannot press /compact for you here, so the card tells you what to type
    const compactHint = isOver
      ? <Text bold color={isHard ? 'red' : 'yellow'}>{'👉 Type /compact now'}</Text>
      : null
    const ctxNote = st.ctxTokens === null
      ? <Text dimColor>no data yet</Text>
      : isHard
        ? <Text bold color="red">{`⚠ ${short(st.ctxTokens)} · Compact recommended 300-400K+ (if 1M context window)`}</Text>
        : isOver
        ? <Text color="yellow">{`💡 ${short(st.ctxTokens)} · Compact recommended 300-400K+ (if 1M context window)`}</Text>
        : <Text dimColor>{`${short(ctxLeft)} left of ${short(st.ctxWindow)}`}</Text>
    const ctxCard = (w: number) => (
      <Box flexDirection="column" width={w}>
        <Text wrap="truncate">{label('🧠 Context window')}</Text>
        <Text wrap="truncate">{bar(Math.max(4, w - 6), st.ctxPercent)}</Text>
        <Text wrap="truncate">{ctxNote}</Text>
        {compactHint ? <Text wrap="truncate">{compactHint}</Text> : null}
      </Box>
    )
    const fiveCard = (w: number) => card(w,
      [label('⚡ 5-hour limit')],
      five ? bar(Math.max(4, w - 6), five.percent) : [<Text dimColor>after the first reply</Text>],
      [<Text dimColor>{reset5 ? `↻ ${reset5.replace('resets in ', '')}` : ''}</Text>],
    )
    const timeCard = (w: number) => card(w,
      [label('⏱ Prompt time')],
      [<Text dimColor>{st.isRunning ? 'now  ' : 'last  '}</Text>, <Text bold color={st.isRunning ? 'cyan' : undefined}>{clock(st.turnSeconds)}</Text>],
      [<Text dimColor>{'all   '}</Text>, <Text bold>{clock(total)}</Text>],
    )
    const costCard = (w: number) => card(w,
      [label('💵 Session cost')],
      [<Text bold color="green">{usd(st.costUsd)}</Text>],
      [<Text dimColor>{'this session'}</Text>],
    )
    // One line for the clocks and the cost, used when only two cards fit across
    const statsLine = (
      <Text wrap="truncate">
        {label('⏱ ')}<Text bold color={st.isRunning ? 'cyan' : undefined}>{clock(st.turnSeconds)}</Text>
        <Text dimColor>{st.isRunning ? ' now' : ' last'}</Text>
        <Text dimColor>{'  ·  '}</Text>
        {label('⌛ ')}<Text bold>{clock(total)}</Text><Text dimColor>{' all'}</Text>
        <Text dimColor>{'  ·  '}</Text>
        {label('💵 ')}<Text bold color="green">{usd(st.costUsd)}</Text>
      </Text>
    )

    const GAP = 3
    let rows: any[]
    if (W >= 96) {
      // Wide: four cards in one band
      const w = Math.floor((W - GAP * 3) / 4)
      rows = [<Box flexDirection="row" columnGap={GAP}>{ctxCard(w)}{fiveCard(w)}{timeCard(w)}{costCard(w)}</Box>]
    } else if (W >= 40) {
      // Medium and split view: the two gauges side by side, then one stats line
      const w = Math.floor((W - GAP) / 2)
      rows = [<Box flexDirection="row" columnGap={GAP}>{ctxCard(w)}{fiveCard(w)}</Box>, statsLine]
    } else {
      // Very narrow: one compact line per gauge, then the stats
      const cells = Math.max(4, W - 26)
      rows = [
        <Text wrap="truncate">{label('🧠 ')}{bar(cells, st.ctxPercent)}<Text dimColor>{st.ctxTokens === null ? '' : ` ${short(ctxLeft)} left`}</Text></Text>,
        <Text wrap="truncate">{label('⚡ ')}{five ? bar(cells, five.percent) : <Text dimColor>—</Text>}<Text dimColor>{reset5 ? ` ↻ ${reset5.replace('resets in ', '')}` : ''}</Text></Text>,
        statsLine,
      ]
      if (isOver) rows.push(<Text wrap="truncate" bold color={isHard ? 'red' : 'yellow'}>{'💡 Compact recommended · type /compact'}</Text>)
    }

    return (
      <Box flexDirection="column">
        {header}
        {rows}
        {below}
      </Box>
    )
  })