cockpit

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const p = await read($, prefs)
    const where = await read($, pane)
    if (e.props.hasSurvey || (where.isPlaced && !p.isBandOn)) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const s = await read($, stats)
    const now = await $.clock.now()
    const width = Math.max(6, Math.min(16, e.props.bodyColumns - 60))
    const pct = s.ctxPercent
    const fiveHour = s.limits.find(l => l.kind === 'five_hour')
    const sevenDay = s.limits.find(l => l.kind === 'seven_day')
    const lastTurn = s.turns.at(-1)
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Text bold color="cyan">◆ Cockpit</Text>
          <Text dimColor>ctx</Text>
          {pct === undefined ? <Text dimColor>—</Text> : <Text color={levelColor(pct)}>{bar(pct, width)} {pct}%</Text>}
          {fiveHour ? <Text color={levelColor(fiveHour.percentUsed)}>5h {Math.round(fiveHour.percentUsed)}%</Text> : null}
          {sevenDay ? <Text color={levelColor(sevenDay.percentUsed)}>7d {Math.round(sevenDay.percentUsed)}%</Text> : null}
          {!isMoneyInLine(p, s) ? null : <Text bold>{isBudgetVisible(p, s) ? `${fmtUsd(s.costUsd)}/${fmtUsd(p.budgetUsd)}` : fmtUsd(s.costUsd)}</Text>}
          {s.loopAlerts ? <Text color="yellow">{`⟳ ${s.loopAlerts}`}</Text> : null}
          {visibleAgents(s).some(a => a.status === 'running') ? <Text color="magenta">{`${visibleAgents(s).filter(a => a.status === 'running').length} agent${visibleAgents(s).filter(a => a.status === 'running').length > 1 ? 's' : ''}`}</Text> : null}
          <Text dimColor>{`${s.toolTotal} tools${s.toolErrors ? `, ${s.toolErrors} err` : ''}`}</Text>
          {s.turnActive ? (
            <Text color="cyan">{`● ${fmtDur(now - s.turnStartedAt)} · ${s.turnSteps} steps · ${s.turnTools} tools`}</Text>
          ) : lastTurn ? (
            <Text dimColor>{`○ last ${fmtDur(lastTurn.durationMs)}`}</Text>
          ) : null}
        </Box>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Text dimColor>{`files ${s.diff.length || Object.keys(s.edits).length}${s.diff.length ? ` (+${s.diffAdd} −${s.diffDel})` : ''}`}</Text>
          {s.lastTest ? <Text color={s.lastTest.isOk ? 'green' : 'red'}>{s.lastTest.isOk ? '✓ tests' : '✗ tests'}</Text> : null}
          <Text color={p.isGuardOn ? 'green' : 'yellow'}>{`guard ${p.isGuardOn ? 'on' : 'off'}${s.guardBlocked ? ` · ${s.guardBlocked} blocked` : ''}`}</Text>
          {(() => {
            const left = cacheLeftMs(s, p, now)
            if (left === undefined || s.turnActive) return null
            return left > 0 ? <Text color={left > 60_000 ? 'green' : 'yellow'}>{`cache ${fmtDur(left)}`}</Text> : <Text color="yellow">cache cold</Text>
          })()}
          {(s.ctxPercent ?? 0) >= 70 && !s.turnActive ? <Button key="band-compact" variant="primary" label="Compact now" onPress={() => $.command.run({ command: 'compact' })} /> : null}
          <Button key="band-open" label="Panel" dimColor onPress={() => openPane($)} />
          <Button key="band-report" label="Report" dimColor onPress={async () => { const cur = await read($, stats); $.ui.log(buildReport(cur, await $.clock.now())) }} />
        </Box>
      </Box>
    )
  })

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

const drawCockpit = async ($: Dollar, els: CockpitElements, bodyColumns: number) => {
  const { Box, Text, Button } = els
  const s = await read($, stats)
  const p = await read($, prefs)
  const now = await $.clock.now()
  const cols = Math.max(30, bodyColumns || 60)
  const barWidth = Math.max(8, Math.min(24, cols - 26))
  const labelWidth = 12
  const mini = (share: number, width = 10) => bar(Math.max(0, Math.min(100, share)), width)
  const pad = (text: string, width: number) => (text.length >= width ? text.slice(0, width - 1) + ' ' : text.padEnd(width))
  const nameWidth = Math.max(10, Math.min(22, cols - labelWidth - 30))

  const isOpen = (label: string) => p.openSections.includes(label)
  const toggleSection = (label: string) =>
    update($, prefs, cur => ({
      ...cur,
      openSections: cur.openSections.includes(label) ? cur.openSections.filter(x => x !== label) : [...cur.openSections, label],
    }))

  // A section: its label opens the details, which show under the summary.
  const row = (label: string, body: RenderChildren, details?: () => RenderChildren, onToggle?: () => unknown, isToggled?: boolean) => (
    <Box flexDirection="row">
      <Box width={labelWidth} flexShrink={0}>
        {details || onToggle ? (
          <Button
            key={`sec-${label}`}
            plain
            dimColor={!(onToggle ? isToggled : isOpen(label))}
            label={`${(onToggle ? isToggled : isOpen(label)) ? '▾' : '▸'} ${label}`}
            onPress={() => (onToggle ? onToggle() : toggleSection(label))}
          />
        ) : (
          <Text dimColor bold>{`  ${label}`}</Text>
        )}
      </Box>
      <Box flexDirection="column" flexGrow={1}>
        {body}
        {details && isOpen(label) ? (
          <Box flexDirection="column" paddingLeft={1} marginBottom={1} borderStyle="single" borderColor="gray" borderDimColor>
            {details()}
          </Box>
        ) : null}
      </Box>
    </Box>
  )

  const line = (...parts: { text: string; color?: string; dim?: boolean; bold?: boolean }[]) => (
    <Box flexDirection="row">
      {parts.map(part => (
        <Text color={part.color} dimColor={part.dim} bold={part.bold} wrap="truncate-end">
          {part.text}
        </Text>
      ))}
    </Box>
  )

  // context
  const pct = s.ctxPercent
  const contextBody =
    pct === undefined
      ? line({ text: 'waiting for the first response', dim: true })
      : [
          line(
            { text: bar(pct, barWidth), color: levelColor(pct) },
            { text: ` ${pct}%`, bold: true, color: levelColor(pct) },
            { text: `  ${fmtTokens(s.ctxTokens)} / ${fmtTokens(s.ctxWindow)}`, dim: true },
          ),
          s.ctxParts.length > 0
            ? line({ text: s.ctxParts.slice(0, 4).map(c => `${c.name.toLowerCase()} ${fmtTokens(c.tokens)}`).join(' · '), dim: true })
            : null,
          pct >= 70 && !s.turnActive ? (
            <Box flexDirection="row" gap={1}>
              <Button key="compact-now" variant="primary" label="Compact now" onPress={() => $.command.run({ command: 'compact' })} />
              <Text dimColor>summarize the history before it happens mid-task</Text>
            </Box>
          ) : null,
        ]

  // limits
  const limitsBody =
    s.limits.length === 0
      ? line({ text: 'no rate-limit data (API key or no response yet)', dim: true })
      : s.limits.map(l =>
          line(
            { text: `${limitLabel(l.kind).padEnd(5)} ` },
            { text: bar(l.percentUsed, Math.max(6, barWidth - 6)), color: levelColor(l.percentUsed) },
            { text: ` ${Math.round(l.percentUsed)}%`, bold: true },
            { text: `  ${resetIn(l.resetsAt, now)}`, dim: true },
            (() => {
              const eta = paceEta(s, l.kind, now)
              const resetsAt = l.resetsAt ? Date.parse(l.resetsAt) : NaN
              if (eta === undefined) return { text: '' }
              const isBeforeReset = Number.isNaN(resetsAt) || now + eta < resetsAt
              return isBeforeReset ? { text: ` · full in ${fmtDur(eta)} at this pace`, color: 'yellow' } : { text: ' · on pace', dim: true }
            })(),
          ),
        )

  // cost
  const lastTurn = s.turns.at(-1)
  const burn = burnPerHour(s, now)
  const cache = cacheShare(s)
  const budgetShare = isBudgetVisible(p, s) ? (s.costUsd / p.budgetUsd) * 100 : undefined
  const costBody = [
    line(
      { text: fmtUsd(s.costUsd), bold: true },
      { text: isSubscription(s) ? ' API value (covered by your plan)' : ' this session', dim: true },
      { text: lastTurn ? ` · ${fmtUsd(lastTurn.costUsd)} last turn` : '', dim: true },
    ),
    (() => {
      const left = cacheLeftMs(s, p, now)
      if (left === undefined) return null
      if (s.turnActive) return line({ text: '◉ cache in use', color: 'green' })
      return left > 0
        ? line({ text: `◉ cache warm ${fmtDur(left)}`, color: left > 60_000 ? 'green' : 'yellow' }, { text: ' · reply before it expires to keep requests cheap', dim: true })
        : line({ text: '○ cache expired', color: 'yellow' }, { text: ' · the next request re-reads the whole context at full price', dim: true })
    })(),
    line(
      { text: burn === undefined ? 'pace —' : `pace ${fmtUsd(burn)}/h`, dim: true },
      { text: cache === undefined ? '' : ` · cache hits ${cache}%`, color: cache === undefined ? undefined : cache >= 70 ? 'green' : cache >= 40 ? 'yellow' : 'red' },
    ),
    budgetShare === undefined
      ? null
      : line(
          { text: `budget ${bar(Math.min(100, budgetShare), Math.max(6, barWidth - 7))}`, color: levelColor(budgetShare) },
          { text: ` ${Math.round(budgetShare)}% of ${fmtUsd(p.budgetUsd)}`, bold: budgetShare >= 80 },
        ),
  ]

  // the running turn
  const turnBody = s.turnActive
    ? line(
        { text: '● working ', color: 'cyan', bold: true },
        { text: fmtDur(now - s.turnStartedAt) },
        { text: ` · ${s.turnSteps} steps · ${s.turnTools} tools`, dim: true },
        { text: s.agentsActive.length ? ` · ${s.agentsActive.length} subagent${s.agentsActive.length > 1 ? 's' : ''}` : '', color: 'magenta' },
      )
    : line(
        { text: '○ idle', dim: true },
        { text: lastTurn ? ` · last ${fmtDur(lastTurn.durationMs)}, ${lastTurn.tools} tools, ${fmtTokens(lastTurn.tokensIn)} in / ${fmtTokens(lastTurn.tokensOut)} out` : '', dim: true },
      )

  const header = line(
    { text: '◆ COCKPIT', bold: true, color: 'cyan' },
    { text: `  ${s.model || ''}`, dim: true },
    { text: s.startedAt ? `  · ${fmtDur(now - s.startedAt)}` : '', dim: true },
  )

  const controls = (
    <Box flexDirection="row" gap={1} marginTop={1} flexWrap="wrap">
      <Button
        key="sections"
        hotkey="x"
        label={p.openSections.length ? 'Collapse all' : 'Expand all'}
        onPress={() =>
          update($, prefs, cur => ({
            ...cur,
            openSections: cur.openSections.length ? [] : ['CONTEXT', 'LIMITS', 'COST', 'TURN', 'TOOLS', 'FILES', 'TESTS', 'GUARD', 'ALERTS', 'HISTORY', 'ALL-TIME'],
          }))
        }