tokenmunim

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const kit = $.ui.resolve(e)
    // A reload forgets where the ledger lives; find it again on the first draw.
    if (ledgerFile === undefined) await locate($)
    const b = normalize(await read($, book))
    const v: View = migrateView(await read($, view))
    const now = await $.clock.now()
    const rows = e.props.scroll?.bodyRows ?? (e.viewport?.rows ?? 50) - 6
    return drawPane(
      kit,
      { book: b, view: v, now, limits, width: e.props.bodyColumns, rows, hasFile: ledgerFile !== undefined, startedAt },
      {
        setTab: tab => void update($, view, cur => ({ ...migrateView(cur), tab, entry: null })),
        toggle: (id, isFolded) => void update($, view, cur => toggleSection({ ...migrateView(cur) }, id, isFolded)),
        drill: task => void update($, view, cur => ({ ...migrateView(cur), task, tab: task === null ? cur.tab : 'activity', entry: null })),
        expand: entry => void update($, view, cur => ({ ...migrateView(cur), entry })),
        openLedger: () => void openLedger($),
        raise: (taskId, by) => void decide($, 'raise', taskId, by),
        allow: () => void decide($, 'allow'),
        skip: taskId => void decide($, 'skip', taskId),
      },
    )
  })

export function drawPane(kit: Kit, d: PaneData, act: PaneActions) {
  const { Box, Text, Button } = kit
  const { book: b, view, now, limits } = d
  const W = Math.max(30, d.width)
  const inner = W - 2
  // Inside a panel: one cell of padding a side.
  const C = inner - 2
  const wide = C >= 58
  const narrow = C < 46
  const R = Math.max(24, d.rows)

  const trip = b.trips[b.trips.length - 1]
  const active = b.tasks.find(k => k.id === b.active)
  const lastEntry = b.entries[b.entries.length - 1]
  const isLive = lastEntry !== undefined && now - lastEntry.at < 90_000

  // ---- building blocks -----------------------------------------------------

  const pill = (text: string, color: string, bg?: string) => (
    <Text bold color={color} backgroundColor={bg}>{` ${text} `}</Text>
  )

  const link = (key: string, label: string, onPress: () => void, dim = false) => (
    <Box key={`${key}-box`}>
      <Button key={key} plain dimColor={dim} label={label} hover={{ color: GOLD, underline: true }} onPress={onPress} />
    </Box>
  )

  const action = (key: string, label: string, onPress: () => void, primary: boolean) => (
    <Box key={`${key}-box`} backgroundColor={primary ? GOLD_DEEP : CHIP} marginRight={1}>
      <Button key={key} plain label={` ${label} `} hover={{ backgroundColor: primary ? GOLD : MUTED, color: INK }} onPress={onPress} />
    </Box>
  )

  const panel = (key: string, children: unknown, marginTop: number, bg: string = PANEL) => (
    <Box key={key} flexDirection="column" marginTop={marginTop} backgroundColor={bg} paddingX={1}>
      {children}
    </Box>
  )

  const section = (id: string, title: string, right: unknown, isFolded: boolean, body: unknown, marginTop: number) =>
    panel(
      `sec-${id}`,
      [
        <Box key={`sec-${id}-head`} justifyContent="space-between">
          <Box key={`fold-${id}-box`}>
            <Button key={`fold-${id}`} plain label={`${isFolded ? '▸' : '▾'} ${title}`} hover={{ color: GOLD, underline: true }} onPress={() => act.toggle(id, isFolded)} />
          </Box>
          {right}
        </Box>,
        isFolded ? null : body,
      ],
      marginTop,
    )

  const muted = (text: string, room: number, color: string = MUTED) => <Text color={color}>{cut(text, Math.max(0, room))}</Text>

  // ---- header and tabs -----------------------------------------------------

  // The header is one row, like an app's title bar: the wordmark in two
  // tones, the tagline when there is room, and status on the right. Nothing
  // clickable sits up here, beside the close mark of the pane's frame: the
  // ledger link lives in the footer.
  const elapsed = d.startedAt && d.startedAt > 0 ? `session ${span((now - d.startedAt) / 60_000)}` : ''
  const TAGLINE = '  cost control for AI agents'
  const statusWidth = 8
  const showTagline = 10 + TAGLINE.length + 1 + statusWidth <= inner
  const header = (
    <Box key="header" justifyContent="space-between">
      <Box>
        <Text bold>Token</Text>
        <Text bold color={GOLD}>Munim</Text>
        {showTagline ? <Text color={FAINT}>{TAGLINE}</Text> : null}
      </Box>
      <Box>
        {isLive ? pill('● LIVE', GREEN, GREEN_BG) : pill('○ IDLE', FAINT)}
      </Box>
    </Box>
  )

  const agentCount = Math.max(1, b.agents.length)
  const tabDefs: { id: Tab; long: string; short: string; n?: number }[] = [
    { id: 'overview', long: 'Overview', short: 'Home' },
    { id: 'tasks', long: 'Tasks', short: 'Tasks', n: b.tasks.length },
    { id: 'activity', long: 'Activity', short: 'Activity', n: b.entries.length },
    { id: 'alerts', long: 'Alerts', short: 'Alerts', n: b.trips.length },
    { id: 'agents', long: 'Agents', short: 'Agents', n: agentCount },
  ]
  // The richest tab labels that fit on one line; each label carries a space a side.
  const variants = [
    { counts: true, short: false, gap: 1 },
    { counts: false, short: false, gap: 1 },
    { counts: false, short: true, gap: 0 },
  ]
  const labelOf = (t: (typeof tabDefs)[number], v: (typeof variants)[number]) =>
    `${v.short ? t.short : t.long}${v.counts && t.n !== undefined ? ` ${t.n}` : ''}`
  const chosen =
    variants.find(v => tabDefs.reduce((w, t) => w + labelOf(t, v).length + 2, 0) + v.gap * (tabDefs.length - 1) <= inner) ??
    variants[variants.length - 1]!
  const tabBar = (
    <Box key="tabs" flexDirection="column" marginTop={1}>
      <Box>
        {tabDefs.map((t, i) => (
          <Box key={`tab-${t.id}`} marginRight={i < tabDefs.length - 1 ? chosen.gap : 0}>
            {t.id === view.tab ? (
              <Text bold color={INK} backgroundColor={GOLD}>{` ${labelOf(t, chosen)} `}</Text>
            ) : (
              <Button key={`tab-btn-${t.id}`} plain dimColor label={` ${labelOf(t, chosen)} `} hover={{ color: GOLD }} onPress={() => act.setTab(t.id)} />
            )}
          </Box>
        ))}
      </Box>
      <Text color={LINE}>{'─'.repeat(inner)}</Text>
    </Box>
  )

  // The footer: how long the session has run, the ledger file, the hint, and
  // the open task. The hint gives way first when the row runs short.
  const LEDGER = 'ledger ↗'
  const activeText = active !== undefined ? `▸ ${active.name}` : ''
  const footerBase = elapsed !== '' ? `${elapsed} · ` : ''
  const HINT = ' · /munim for commands'
  const footerUsed = footerBase.length + (d.hasFile ? LEDGER.length : 0) + Math.min(activeText.length, 16) + 2
  const footerHint = footerUsed + HINT.length <= inner ? HINT : ''
  const footer = (gap: number) => (
    <Box key="footer" marginTop={gap} justifyContent="space-between">
      <Box>
        {footerBase !== '' ? <Text color={FAINT}>{footerBase}</Text> : null}
        {d.hasFile ? link('open-ledger', LEDGER, act.openLedger) : null}
        {footerHint !== '' || !d.hasFile ? <Text color={FAINT}>{d.hasFile ? footerHint : '/munim for commands'}</Text> : null}
      </Box>
      {active !== undefined ? (
        <Text color={MUTED}>{cut(activeText, Math.max(0, inner - footerBase.length - (d.hasFile ? LEDGER.length : 19) - footerHint.length - 2))}</Text>
      ) : null}
    </Box>
  )

  // ---- plan limits ---------------------------------------------------------

  const plan = b.rateLimits.filter(w => w.kind === 'five_hour' || w.kind === 'seven_day')
  const windows = plan.length > 0 ? plan : b.rateLimits.filter(w => w.kind === 'spend_limit').slice(0, 1)
  const showPace = inner >= 50
  const limitBarW = Math.max(6, inner - 6 - 10 - 10 - (showPace ? 13 : 0))
  const limitsBlock = (marginTop: number) => (
    <Box key="limits" flexDirection="column" marginTop={marginTop}>
      {windows.length === 0 ? (
        <Box>
          <Text color={MUTED}>{'limits  '}</Text>
          <Text color={FAINT}>{cut('plan limits show after the next reply', inner - 8)}</Text>
        </Box>
      ) : null}
      {windows.map(w => {
        const left = Math.max(0, Math.min(100, 100 - w.percentUsed))
        const color = left >= 50 ? GREEN : left >= 20 ? AMBER : RED
        const resetMs = w.resetsAt ? Date.parse(w.resetsAt) - now : NaN
        const r = runway(b, w.kind, now)
        const filled = fill(left / 100, limitBarW)
        const pace =
          r.state === 'runs-out' ? { text: `⚠ out in ${span(r.minutes)}`, color: r.minutes < 30 ? RED : AMBER }
          : r.state === 'lasts' ? { text: '✓ lasts', color: GREEN }