context-gauge

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const text = r.text
    if ((await isHostedNow($, r)) || r.look.place !== 'top' || text === null || e.props.hasSurvey) return next(e)
    const below = await next(e)
    const { Box, Text } = $.ui.resolve(e)
    return withReadout({ Box: Box as Make['Box'], Text: Text as Make['Text'] }, below, r.name, text, r.look, e.props.isWorking, e.surface === 'terminal' ? r.glyphs : 'full')
  })

export function withReadout(make: Make, below: RenderElement | null | undefined, name: string, text: string, look: Look, isWorking = false, glyphs: IconGlyphs = 'full'): RenderElement {
  if (isWorking && look.whileWorking === 'hide') return below ?? make.Box({ children: [] })
  const piece = pieceElement(make, { name, text, color: look.color }, look, isWorking && look.whileWorking === 'dim', glyphs)
  const justify = justifyOf(look.align)
  const ownRow = (key: string) => make.Box({ key, flexDirection: 'row', justifyContent: justify, children: [make.Text({ wrap: 'wrap', children: [piece] })] })

  const isOurs = below !== null && below !== undefined && below.type === 'Box' && keyOf(below) === BAND_KEY
  const rest: RenderNode[] = isOurs ? [...(below.children ?? [])] : isEmpty(below) ? [] : [below as RenderElement]

  if (look.layout === 'merged') {
    const at = rest.findIndex(n => keyOf(n) === ROW_KEY)
    const row = at >= 0 ? rest[at] : undefined
    if (row !== undefined && typeof row !== 'string' && row.type === 'Box') {
      const line = row.children?.[0]
      if (line !== undefined && typeof line !== 'string' && line.type === 'Text') {
        const sep = make.Text({ dimColor: true, children: [separatorOf(look)] })
        const joined = make.Text({ ...line.props, children: [piece, sep, ...(line.children ?? [])] })
        rest[at] = make.Box({ ...row.props, children: [joined] })
        return make.Box({ key: BAND_KEY, flexDirection: 'column', children: rest })
      }
    }
    return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(ROW_KEY), ...rest] })
  }
  return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(`${ROW_KEY}:${name}`), ...rest] })
}

function pieceElement(make: Make, p: Piece, look: Look, isDimmed: boolean, glyphs: IconGlyphs = 'full'): RenderElement {
  const text = pieceText(p.name, p.text, look, glyphs)
  return make.Text({ ...pieceProps(p.color, look, isDimmed), children: [look.style === 'pills' ? ` ${text} ` : text] })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const snap = await read($, snapshot)
    const live = await read($, fill)
    const message = await read($, note)
    lastColumns = e.props.bodyColumns
    const width = Math.max(30, e.props.bodyColumns - 2)
    const labelW = Math.min(22, Math.max(12, Math.floor(width * 0.3)))
    const barW = Math.max(6, Math.min(40, width - labelW - 16))
    const autoAt = autoCompactAt()

    const header =
      live === null
        ? 'Context: no response yet in this window'
        : `Context ${fmtTokens(live.tokens)} / ${fmtTokens(live.window)} · ${Math.round(live.percent)}%`
    let usedIndex = 0

    return (
      <Box flexDirection="column">
        <Text bold>{header}</Text>
        {snap === null ? (
          <Text dimColor>No breakdown yet: press Refresh.</Text>
        ) : (
          <Box flexDirection="column">
            <Text dimColor wrap="wrap">
              {snap.model} · estimated {hhmmss(snap.at)} · auto-compact{' '}
              {snap.isAutoCompactEnabled && snap.autoCompactThreshold !== null ? `at ${fmtTokens(snap.autoCompactThreshold)}` : 'off'}
              {autoAt > 0 ? ` · this mod compacts at ${autoAt}%` : ''}
            </Text>
            <Text> </Text>
            {snap.rows.map(row => {
              const label = row.name.length >= labelW ? `${row.name.slice(0, labelW - 2)}… ` : row.name.padEnd(labelW)
              const tokens = fmtTokens(row.tokens).padStart(8)
              if (row.kind === 'deferred') {
                return (
                  <Text dimColor>
                    {label}
                    {'(loaded on demand)'.padEnd(barW)}
                    {tokens}
                  </Text>
                )
              }
              const bar = blockBar(row.tokens, snap.maxTokens, barW)
              const share = pctOf(row.tokens, snap.maxTokens).padStart(7)
              if (row.kind === 'used') {
                const color = PALETTE[usedIndex++ % PALETTE.length] ?? 'cyan'
                return (
                  <Text>
                    {label}
                    <Text color={color}>{bar}</Text>
                    {tokens}
                    <Text dimColor>{share}</Text>
                  </Text>
                )
              }
              return (
                <Text dimColor>
                  {label}
                  {bar}
                  {tokens}
                  {share}
                </Text>
              )
            })}
            {snap.memoryFiles.length > 0 && (
              <Box flexDirection="column" marginTop={1}>
                <Text bold>
                  Memory files <Text dimColor>({snap.memoryCount} · {fmtTokens(snap.memoryTokens)})</Text>
                </Text>
                {snap.memoryFiles.map(item => (
                  <Text wrap="truncate-end">
                    {fmtTokens(item.tokens).padStart(7)} {item.label} <Text dimColor>{item.detail}</Text>
                  </Text>
                ))}
              </Box>
            )}
            {snap.mcpTools.length > 0 && (
              <Box flexDirection="column" marginTop={1}>
                <Text bold>
                  MCP tools <Text dimColor>({snap.mcpCount} · {fmtTokens(snap.mcpTokens)})</Text>
                </Text>
                {snap.mcpTools.map(item => (
                  <Text wrap="truncate-end">
                    {fmtTokens(item.tokens).padStart(7)} {item.label} <Text dimColor>{item.detail}</Text>
                  </Text>
                ))}
              </Box>
            )}
            {snap.skills.length > 0 && (
              <Box flexDirection="column" marginTop={1}>
                <Text bold>
                  Skills <Text dimColor>({snap.skillCount} · {fmtTokens(snap.skillTokens)})</Text>
                </Text>
                {snap.skills.map(item => (
                  <Text wrap="truncate-end">
                    {fmtTokens(item.tokens).padStart(7)} {item.label} <Text dimColor>{item.detail}</Text>
                  </Text>
                ))}
              </Box>
            )}
          </Box>
        )}
        <Box gap={1} marginTop={1}>
          <Button key="refresh" hotkey="r" label="Refresh" onPress={() => void refreshPane($)} />
          <Button key="compact" hotkey="c" label="Compact now" onPress={() => void compactNow($, 'button')} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
        {message !== null && (
          <Text dimColor wrap="wrap">
            {message}
          </Text>
        )}
      </Box>
    )
  })