context-gauge

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const m = await read($, meter)
    const l = await read($, live)
    const w = await read($, wrap)
    await read($, tick)
    if (!m && !l) return next(e)
    const look = await lookOf($)
    const now = await $.clock.now()
    const { Box, Text, Button } = $.ui.resolve(e)
    const Svg = svgOf($, e, look.style)
    const sep = <Text color={C.rule}> │ </Text>

    const ctx = m ? ctxRatio(m) : 0
    const ctxColor = tone(ctx, 0.75, 0.9)
    const drawn = m && readings(m, ctx, now, look.style)

    const gear = <Button key="settings" label="⚙" plain dimColor onPress={() => openSettings($)} />
    const chip = await drawChip($, e)
    const status = await read($, serviceStatus)
    const statusColor_ = !status || status.error ? C.rule : status.indicator === 'none' ? C.ok : status.indicator === 'minor' ? C.warn : C.hot
    const extras = (
      <Box flexDirection="row" gap={1}>
        <Button key="status" label="◉" plain dimColor onPress={() => update($, isStatusOpen, x => !x)} />
        <Text color={statusColor_}>{status ? '●' : '○'}</Text>
        <Button key="history" label="≡" plain dimColor onPress={() => openTimeline($)} />
      </Box>
    )
    // What the SVG line may take: the band's cells less the controls beside
    // it, at a conservative 8px a cell (a desktop UI font's cell is ~7-8px).
    const controlCells =
      (chip ? 24 + 2 + (await chipNameLength($)) + 2 : 0) +
      8
    // Buttons take a little more than their cells on desktop (padding), so
    // leave room to spare; the meters shrink and clip, the controls never do.
    const meterCells = Math.max(16, e.props.bodyColumns - controlCells - 10)
    const stripRoom = meterCells * 6.5

    const meterRow =
      m && drawn && Svg ? (
        <Box flexDirection="row" alignItems="center" gap={2}>
          <Box flexGrow={1} flexShrink={1} minWidth={10} overflow="hidden">
            <Svg source={strip(drawn, m.usd, look, stripRoom)} alt={alt(drawn, m.usd)} />
          </Box>
          <Box flexDirection="row" alignItems="center" gap={2} flexShrink={0}>
            {chip}
            {extras}
            {gear}
          </Box>
        </Box>
      ) : (
        m && (
          <Box flexDirection="row" gap={1}>
            <Box flexGrow={1} flexShrink={1} minWidth={10} flexDirection="row" overflow="hidden">
              {(() => {
                const fit = fitTextBand(m, ctx, now, meterCells)
                const [c1, c2] = bar(ctx, fit.ctxBar)
                return (
                  <Box flexDirection="row">
                    <Text color={C.accent}>◆ </Text>
                    <Text dimColor>ctx </Text>
                    <Text color={ctxColor}>{c1}</Text>
                    <Text color={C.rule}>{c2}</Text>
                    <Text color={ctxColor} bold>
                      {' '}
                      {m.percent ?? 0}%
                    </Text>
                    {fit.tokens && m.tokens !== undefined && (
                      <Text dimColor>
                        {' '}
                        {k(m.tokens)}/{k(m.isAutoCompact && m.threshold ? m.threshold : m.window)}
                      </Text>
                    )}
                    {fit.delta && m.delta ? (
                      <Text dimColor>
                        {' '}
                        {m.delta > 0 ? '+' : ''}
                        {k(m.delta)}
                      </Text>
                    ) : null}
                    {ctx >= 0.9 && <Text color={C.hot}> ⚠ compacts soon</Text>}
                    {m.limits
                      .filter(x => fit.kinds.includes(x.kind))
                      .map(x => {
                        const c = tone(x.percent / 100, 0.7, 0.9)
                        const [a, b] = bar(x.percent / 100, fit.blocks, '▰', '▱')
                        return (
                          <Box flexDirection="row">
                            {sep}
                            <Text dimColor>{limitLabel(x.kind)} </Text>
                            <Text color={c}>{a}</Text>
                            <Text color={C.rule}>{b}</Text>
                            <Text color={c}> {x.percent}%</Text>
                            {fit.resets && <Text dimColor> {resetIn(x, now)}</Text>}
                          </Box>
                        )
                      })}
                    {fit.cost && m.usd !== undefined && (
                      <Box flexDirection="row">
                        {sep}
                        <Text dimColor>${m.usd.toFixed(2)}</Text>
                      </Box>
                    )}
                  </Box>
                )
              })()}
            </Box>
            <Box flexDirection="row" gap={1} flexShrink={0}>
              {chip}
              {extras}
              {gear}
            </Box>
          </Box>
        )
      )

    const running = l && l.tools.find(t => t.ms === null)
    const tps = l && l.genMs > 500 ? Math.round(l.outTokens / (l.genMs / 1000)) : null
    const phaseNow = l ? now - l.phaseSince : 0
    const thinkTotal = l ? l.thinkMs + (l.phase === 'thinking' ? phaseNow : 0) : 0

    const liveRow = l && (
      <Box flexDirection="row" flexWrap="wrap">
        <Text color={C.accent}>{PHASE[l.phase]} </Text>
        <Text>{dur(phaseNow)}</Text>
        {sep}
        <Text dimColor>turn {dur(now - l.startedAt)}</Text>
        {thinkTotal > 0 && <Text dimColor> · think {dur(thinkTotal)}</Text>}
        {tps !== null && <Text dimColor> · {tps} tok/s</Text>}
        {running && <Text dimColor> · {running.name} {dur(now - running.startedAt)}</Text>}
        <Text>  </Text>
        <Button key="stop" label="■ Stop" hotkey="s" onPress={() => stopTurn($)} />
        <Text> </Text>
        <Button key="pane" label="Panel" dimColor onPress={() => $.ui.open({ id: PANE, title: 'Gauge' })} />
        <Text> </Text>
        <Button key="timeline" label="History" dimColor onPress={() => openTimeline($)} />
      </Box>
    )

    const wrapRow = w.pending && (
      <Box flexDirection="row" flexWrap="wrap">
        <Text color={C.hot}>{w.pending.label} </Text>
        <Text dimColor>wrap-up prompt in {dur(w.pending.deadline - now)} </Text>
        <Button key="wrap-cancel" label="Cancel" hotkey="c" onPress={() => cancelWrap($)} />
        <Text> </Text>
        <Button key="wrap-now" label="Send now" dimColor onPress={() => fireWrap($)} />
      </Box>
    )

    const picker = await drawInlinePicker($, e)
    const statusPanel = await drawStatus($, e)

    return (
      <Box flexDirection="column">
        {wrapRow}
        {meterRow}
        {picker}
        {statusPanel}
        {liveRow}
      </Box>

async function drawChip($: EngineInterface, e: RenderInput<'AbovePrompt'>) {
  const s = await read($, settings)
  if (!s.models.isShown) return null
  const c = await read($, current)
  const isOpen = await read($, isPickerOpen)
  const { Box, Button } = $.ui.resolve(e)
  const Client =
    e.surface === 'terminal' || e.surface === 'desktop'
      ? ($.ui.resolve(e) as { Client?: ElementConstructor<ClientProps> }).Client
      : undefined
  const at = activeSlot(c, s.models)
  const slot = at === null ? undefined : s.models.slots[at]
  const name = slot ? slotLabel(slot) : c.model ? modelLabel(familyOf(c.model) ?? c.model) : 'Model'
  const n = s.models.slots.length
  return (
    <Box flexDirection="row" gap={1} flexShrink={0}>
      {Client && (
        <Client
          key="model-track"
          module="./slider.tsx"
          props={{
            labels: s.models.slots.map(slotLabel),
            locked: s.models.slots.map(x => isLocked(x, s.models)),
            active: at,
            accent: CLAUDE,
            compact: true,
            rail: (c.theme ?? '').startsWith('light') ? '#dcdce0' : '#3a3b40',
          }}
          width={(n - 1) * 5 + 3}
        />
      )}
      <Button
        key="model-chip"
        label={`${c.fast ? '⚡ ' : ''}${name} ${isOpen ? '⌄' : '›'}`}
        plain
        dimColor={!isOpen}
        onPress={() => update($, isPickerOpen, x => !x)}
      />
    </Box>
  )
}

async function drawInlinePicker($: EngineInterface, e: RenderInput<'AbovePrompt'>) {
  if (!(await read($, isPickerOpen))) return null
  const { Box, Button } = $.ui.resolve(e)
  const s = await read($, settings)
  const c = await read($, current)
  const at = activeSlot(c, s.models)
  const slots = s.models.slots
  const locked = slots.map(x => isLocked(x, s.models))
  const Svg = e.surface === 'terminal' ? undefined : ($.ui.resolve(e) as { Svg?: ElementConstructor<SvgProps> }).Svg
  return (
    <Box flexDirection="column" borderStyle="round" borderColor={C.rule} paddingX={1}>
      <Box flexDirection="row" gap={2} alignItems="center">
        {Svg && <Svg source={pill(slots.length, at, locked, CLAUDE, 0.5 * SCALE[s.look.size])} alt={`position ${at === null ? 'none' : at + 1}`} />}
        {slots.map((x, i) => (
          <Button
            key={`pick-${i}`}
            label={`${locked[i] ? '⊘ ' : ''}${slotLabel(x)}`}
            plain
            dimColor={i !== at}
            onPress={() => applySlot($, i)}
          />
        ))}
      </Box>
      <Box flexDirection="row" gap={2}>
        <Button key="picker-fast" label={c.fast ? '⚡ Fast on' : '⚡ Fast'} plain dimColor={!c.fast} onPress={() => toggleFast($)} />
        <Button key="picker-style" label={`Style: ${c.outputStyle ?? 'default'}`} plain dimColor onPress={() => void setStyle($).then(t => $.ui.toast(t))} />
        <Button key="picker-settings" label="Edit positions" plain dimColor onPress={() => update($, settingsTab, () => 'models').then(() => openSettings($))} />
        <Button key="picker-close" label="✕" plain dimColor onPress={() => update($, isPickerOpen, () => false)} />
      </Box>
    </Box>
  )
}

async function drawStatus($: EngineInterface, e: RenderInput<'AbovePrompt'>) {
  if (!(await read($, isStatusOpen))) return null
  const { Box, Text, Button } = $.ui.resolve(e)
  const st = await read($, serviceStatus)
  const usage = await read($, usageCheck)
  const m = await read($, meter)
  const now = await $.clock.now()
  const colorOf = (status: string) =>
    status === 'operational' || status === 'none' ? C.ok : status === 'degraded_performance' || status === 'minor' || status === 'under_maintenance' ? C.warn : C.hot
  return (
    <Box flexDirection="column" borderStyle="round" borderColor={C.rule} paddingX={1}>
      <Box flexDirection="row" gap={2}>
        <Text bold>Claude status & usage</Text>
        {st ? (
          <Text color={st.error ? C.hot : colorOf(st.indicator)}>{st.error ? `check failed: ${st.error}` : st.description || st.indicator}</Text>
        ) : (
          <Text dimColor>not checked yet</Text>
        )}
        {st && <Text dimColor>· {dur(now - st.at)} ago</Text>}
        <Button
          key="status-refresh"
          label="↻ Refresh"
          plain
          onPress={async () => {
            usageAskedAt = 0
            await Promise.all([refreshStatus($), checkUsage($)])
          }}
        />
        <Button key="status-close" label="✕" plain dimColor onPress={() => update($, isStatusOpen, () => false)} />
      </Box>
      {st && st.components.length > 0 && (
        <Box flexDirection="row" flexWrap="wrap" gap={2}>
          {st.components.map(c => (
            <Box flexDirection="row">
              <Text color={colorOf(c.status)}>● </Text>
              <Text dimColor>
                {c.name} {COMPONENT_LABEL[c.status] ?? c.status.replace(/_/g, ' ')}
              </Text>
            </Box>
          ))}
        </Box>
      )}
      {usage && (
        <Text color={usage.error ? C.warn : undefined} dimColor={!usage.error} wrap="truncate">
          {usage.error
            ? `Usage: ${usage.error}`
            : `Usage, ${dur(now - usage.at)} ago: ${(m?.limits ?? []).map(x => `${limitLabel(x.kind)} ${x.percent}%`).join(' · ')}`}
        </Text>
      )}
      {st?.incidents.map(i => (
        <Text color={i.impact === 'none' || i.impact === 'minor' ? C.warn : C.hot} wrap="truncate">
          ⚠ {i.name} ({i.status})
        </Text>
      ))}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, ($, e) => drawGauge($, e, e.props.bodyColumns))

async function drawGauge($: EngineInterface, e: RenderInput<'Pane' | 'CommandOutput'>, columns: number) {
  const { Box, Text, Button } = $.ui.resolve(e)
  const m = await read($, meter)
  const l = await read($, live)
  const hist = await read($, history)
  const w = await read($, wrap)
  const s = await read($, settings)
  const collapsed = await read($, isCollapsed)
  const look = await lookOf($)
  const Svg = svgOf($, e, look.style)
  await read($, tick)
  const now = await $.clock.now()
  const width = Math.max(12, columns - 2)
  const barW = Math.max(6, Math.min(24, width - 18))
  const ctx = m ? ctxRatio(m) : 0
  const drawn = m && readings(m, ctx, now, look.style)

  const head = (title: string) => (
    <Box marginTop={1}>
      <Text color={C.accent} bold>
        {title.toUpperCase()}
      </Text>
    </Box>
  )

  const header = (
    <Box flexDirection="row" justifyContent="space-between" width={width}>
      <Button
        key="fold"
        label={collapsed ? '◂ expand' : '▸ fold'}
        plain
        dimColor
        hotkey="f"
        onPress={() => toggleCollapsed($)}
      />
      <Button key="pane-settings" label="⚙ settings" plain dimColor onPress={() => openSettings($)} />
    </Box>
  )

  if (collapsed) {
    return (
      <Box flexDirection="column">
        {header}
        <Text color={tone(ctx, 0.75, 0.9)}>ctx {m?.percent ?? 0}%</Text>
        {(m?.limits ?? []).map(x => (
          <Text color={tone(x.percent / 100, 0.7, 0.9)}>
            {limitLabel(x.kind)} {x.percent}%
          </Text>
        ))}
        {l && <Text color={C.accent}>{PHASE[l.phase]}</Text>}
      </Box>
    )
  }

  // The meters: small SVG bars where the surface draws them, text elsewhere.
  const meters =
    m && drawn && Svg ? (
      <Box marginTop={1}>
        <Svg source={stack(drawn, width * 7, look)} alt={alt(drawn, m.usd)} />
      </Box>
    ) : (
      m && (
        <Box flexDirection="column">
          {head('Usage')}
          {[
            { label: 'ctx', ratio: ctx, value: `${m.percent ?? 0}%`, note: `${k(m.tokens ?? 0)}/${k(m.window)}`, warn: 0.75 },
            ...m.limits.map(x => ({
              label: limitLabel(x.kind),
              ratio: x.percent / 100,
              value: `${x.percent}%`,
              note: resetIn(x, now),
              warn: 0.7,
            })),
          ].map(r => {
            const [a, b] = bar(r.ratio, barW)
            return (
              <Box flexDirection="row">
                <Text dimColor>{r.label.padEnd(4)}</Text>
                <Text color={tone(r.ratio, r.warn, 0.9)}>{a}</Text>
                <Text color={C.rule}>{b}</Text>
                <Text color={r.ratio >= 0.9 ? C.hot : undefined}> {r.value.padStart(4)}</Text>
                <Text dimColor> {r.note}</Text>
              </Box>
            )
          })}
        </Box>
      )
    )

  const summary = m && (
    <Box flexDirection="column" marginTop={1}>
      <Text dimColor>
        {m.usd !== undefined ? `$${m.usd.toFixed(2)} this session` : ''}
        {m.isAutoCompact && m.threshold ? ` · auto-compact at ${k(m.threshold)}` : ''}
      </Text>
      <Text dimColor>
        wrap-up 5h {ruleText(s.wrap5h)} · 7d {ruleText(s.wrap7d)} · /compact {compactText(s)}
      </Text>
    </Box>
  )

  const turnSection = l && (
    <Box flexDirection="column">
      {head('This turn')}
      <Box flexDirection="row">
        <Text color={C.accent}>{PHASE[l.phase]} </Text>
        <Text>{dur(now - l.phaseSince)}</Text>
        <Text>  </Text>
        <Button key="pane-stop" label="■ Stop" hotkey="s" onPress={() => stopTurn($)} />
      </Box>
      <Text dimColor>
        total {dur(now - l.startedAt)} · think {dur(l.thinkMs + (l.phase === 'thinking' ? now - l.phaseSince : 0))} · write{' '}
        {dur(l.respondMs + (l.phase === 'responding' ? now - l.phaseSince : 0))} · tools{' '}
        {dur(l.toolMs + (l.phase === 'tool' ? now - l.phaseSince : 0))}
      </Text>
      <Text dimColor>
        {k(l.outTokens)} out{l.genMs > 500 ? ` · ${Math.round(l.outTokens / (l.genMs / 1000))} tok/s` : ''}
      </Text>
      {l.tools.slice(-8).map(t => {
        const ms = t.ms ?? now - t.startedAt
        return (
          <Box flexDirection="row">
            <Text color={t.ms === null ? C.accent : t.isError ? C.hot : C.ok}>
              {t.ms === null ? '◌ ' : t.isError ? '✕ ' : '✓ '}
            </Text>
            <Text dimColor wrap="truncate">
              {t.name.replace(/^mcp__/, '').slice(0, 18).padEnd(18)}
            </Text>
            <Text dimColor> {dur(ms)}</Text>
          </Box>
        )
      })}
    </Box>
  )

  // Plain numbers: block-glyph sparklines smear together in proportional UI fonts.
  const recent = hist.slice(-5).reverse()
  const historySection = recent.length > 0 && (
    <Box flexDirection="column">
      {head('Recent turns')}
      {recent.map((r, i) => (
        <Box flexDirection="row">
          <Text color={i === 0 ? undefined : C.rule}>{i === 0 ? '● ' : '○ '}</Text>
          <Text>{dur(r.ms)}</Text>
          <Text dimColor>
            {r.thinkMs ? ` · think ${dur(r.thinkMs)}` : ''}
            {r.tps ? ` · ${r.tps} tok/s` : ''}
            {r.tools ? ` · ${r.tools} tools` : ''}
            {r.isAborted ? ' · stopped' : ''}
          </Text>
        </Box>
      ))}
    </Box>
  )

  // Name, then its tokens and share of the window, on one line: a right-aligned
  // column does not survive surfaces that lay text out in proportional fonts.
  const breakdown = m && m.categories.length > 0 && (
    <Box flexDirection="column">
      {head('Context breakdown')}