penny-patrol

  on('ui.render', { component: 'AbovePrompt' }, ($, e, next) => {
    if (isHidden || reading === null || e.props.hasSurvey) {
      return next(e)
    }

    const { Box, Text, Link } = $.ui.resolve(e)

    return band(Box, Text, Link, reading, e.props.bodyColumns, e.props.maxRows, e.surface === 'terminal')
  })

function band(Box: Box, Text: Text, Link: Link, now: Reading, columns: number, maxRows: number, isTerminal: boolean): RenderElement {
  // paddingX takes two cells.
  const inner = Math.max(1, columns - 2)
  const money = ledger !== null && ledger.seen > 0 ? ledger : null
  const bill = money ? billOf(money) : null
  // The steps are this session's own; the month's spend is every session's, as the budget is.
  const mine = calendar(nowMs, [days])
  const gauges = gaugesOf(calendar(nowMs, everyDays()).month.usd, money !== null)
  const free = now.segments.reduce((sum, segment) => sum + (segment.kind === 'free' ? segment.tokens : 0), 0)
  // The bar is the room there is before compaction: what is in use, then what is free. The buffer is no
  // room, and no part of the bar.
  const isTight = free < (now.used + free) * TIGHT_SHARE
  const context = now.segments.filter(segment => segment.kind !== 'buffer').map(segment => ({ ...partOf(segment), isTight }))
  const contextFacts = [`${now.percent}%`, `${short(now.used)} / ${short(now.window)}`, free > 0 ? `${short(free)} free` : '']
  // With the plan's windows known, the cost is what was spent in each of them and in the plan's month,
  // each beginning again when its own does; the bar is the month's. The whole session is the ledger's
  // to say.
  const periods = money ? periodsOf(money) : []
  const period = periods.find(each => each.isPlan) ?? periods[0]
  const split = bill ? spendParts(period ? { main: period.main, agents: period.agents, folded: 0 } : bill) : []
  // A part that spent nothing has no cell of the bar, but its entry under it.
  const spend = split.filter(part => part.weight > 0)
  const costFacts = money && bill
    ? [...(period ? periods.map(each => `${each.name} ${money$(each.total)}`) : [money$(bill.total)]), promptOf(money, bill)]
    : []

  if (inner >= FULL_COLUMNS) {
    const room = Math.min(TEXT_MAX, inner - GAP - Math.floor(inner * TRACK_SHARE))
    const track = inner - GAP - room
    // What a line may say after its label.
    const width = room - LABEL
    const model = lineOf('Model', [now.model, effort === null ? '' : `${capital(effort)} effort`], width, true)
    const steps = lineOf('Steps', (['today', 'week', 'month', 'year'] as const).map(period => `${capital(period)} ${count(mine[period].steps)}`), width, true)
    const contextBar: Section = {
      cells: cellsOf(context, track),
      beside: lineOf('Context', contextFacts, width, false),
      above: [],
      below: rows => {
        // The free run needs no entry: the line beside the bar says what is free.
        const chips = now.segments.filter(segment => segment.kind === 'used').map(segment => chipOf(partOf(segment), short(segment.tokens)))
        const sent = lineOf('', sentOf(now.last), width, true)
        // A legend that fits on one line leaves the other to the last request.
        const tight = sent.runs.length > 0 && rows > 1 ? wrapped(chips, width, rows - 1) : null

        return tight
          ? [...tight.map(runs => ({ label: '', runs })), sent]
          : legendOf(chips, [], width, rows).map(runs => ({ label: '', runs }))
      },
    }
    // What was spent before tracking is no window's.
    const before: Chip[] = bill && bill.before > 0 && !period
      ? [{ glyph: '', color: undefined, isDim: true, text: `Before tracking ${money$(bill.before)}`, weight: bill.before }]
      : []
    const costBar: Section[] = money && bill
      ? [{
          cells: cellsOf(spend, track),
          beside: lineOf('Cost', costFacts, width, false),
          above: [],
          below: rows => legendOf(split.map(part => chipOf(part, money$(part.weight))), before, width, rows).map(runs => ({ label: '', runs })),
          smiles: COST_SMILES,
        }]
      : []
    // A limit bar says what it has to say itself, so the line beside it is another's. The first limit
    // window stands first, the model beside it; the other limits stand last, the steps beside the first
    // of them (with one window alone, under it). With no window the model and the steps stand over the
    // first bar.
    const first = gauges.find(gauge => gauge.isWindow)
    const rest = gauges.filter(gauge => gauge !== first)
    const limit = (gauge: Gauge, beside: Line, under: Line[]): Section =>
      ({ cells: wordedCells(gauge, track), beside, above: [], below: () => under, isLimit: true })
    const sections: Section[] = [
      ...(first ? [limit(first, model, rest.length > 0 ? [] : [steps])] : []),
      contextBar,
      ...costBar,
      ...rest.map((gauge, i) => limit(gauge, first && i === 0 ? steps : { label: '', runs: [] }, [])),
    ]
    const header = first ? [] : [model, steps]
    const line = lineRow(Box, Text, Link, inner, isTerminal)

    // With fewer rows than all of it needs, the line gives way first; then the limit bars give up the free
    // rows over them, and the mascot keeps to the other bars; only then does the scene.
    for (const isLow of gauges.length > 0 ? [false, true] : [false]) {
      const rows = scene(Box, Text, isLow ? sections.map(section => (section.isLimit === true ? { ...section, isLow: true } : section)) : sections, header, track)

      for (const children of line ? [[...rows, line], rows] : [rows]) {
        if (children.length <= maxRows) {
          return Box({ flexDirection: 'column', paddingX: 1, children })
        }
      }
    }
  }

  const bars = [{ parts: context, facts: contextFacts }, ...(money ? [{ parts: spend, facts: costFacts }] : [])]

  return Box({ flexDirection: 'column', paddingX: 1, children: compact(Box, Text, inner, bars, gauges) })
}

function compact(Box: Box, Text: Text, inner: number, bars: Array<{ parts: Part[]; facts: string[] }>, gauges: Gauge[]): RenderElement[] {
  const aside = (text: string): string => (text === '' ? '' : `${' '.repeat(GAP)}${text}`)
  const labels = bars.map(bar => aside(fit(bar.facts, inner - MIN_BAR - GAP)))
  const labelWidth = Math.max(0, ...labels.map(label => label.length))
  const rows = bars.map((bar, i) =>
    Box({
      flexDirection: 'row',
      children: [
        ...runsOf(Text, cellsOf(bar.parts, inner - labelWidth)),
        ...(labelWidth > 0 ? [Text({ dimColor: true, children: (labels[i] ?? '').padStart(labelWidth) })] : []),
      ],
    }),
  )

  if (gauges.length > 0) {
    const each = Math.floor((inner - (gauges.length - 1) * GAP) / gauges.length)
    rows.push(Box({
      flexDirection: 'row',
      columnGap: GAP,
      children: gauges.map(gauge => {
        const name = `${gauge.name} `
        const label = [gauge.label, gauge.short].map(aside).find(text => each - name.length - text.length >= MIN_BAR) ?? ''

        return Box({
          flexDirection: 'row',
          children: [
            Text({ dimColor: true, children: name }),
            ...runsOf(Text, cellsOf(gauge.parts, Math.max(0, each - name.length - label.length))),
            ...(label === '' ? [] : [Text({ dimColor: true, children: label })]),
          ],
        })
      }),
    }))
  }

  return rows
}

function runsOf(Text: Text, cells: Cell[]): RenderElement[] {
  const runs: RenderElement[] = []
  let start = 0

  for (let i = 1; i <= cells.length; i += 1) {
    const from = cells[start]
    const to = cells[i]

    if (from) {
      const paint = paintOf(from)
      const next = to ? paintOf(to) : null

      if (next === null || next.backgroundColor !== paint.backgroundColor || next.color !== paint.color || next.dimColor !== paint.dimColor) {
        runs.push(Text({ ...paint, children: cells.slice(start, i).map(cell => cell.glyph).join('') }))
        start = i
      }
    }
  }

  return runs
}