windvane

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || e.props.view.agentId !== undefined) return next(e)
    const reading = await read($, lastRead)
    if (reading === null || (await read($, bandHidden))) return next(e)
    const figures = await read($, pressure)
    return drawBand($.ui.resolve(e), reading, figures, Date.now(), () => hideBand($))
  })

export function drawBand(ui: Draw, reading: WindvaneRead, figures: Pressure | null, nowMs: number, onHide: () => void): RenderElement {
  const { Box, Button, Text } = ui
  return (
    <Box key="windvane-band" flexDirection="row">
      <Text dimColor wrap="truncate-end">
        {bandLine(reading, figures, nowMs)}{' '}
      </Text>
      <Button key="windvane-hide" label="Hide" onPress={onHide} />
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: 'windvane' }, async ($, e) => {
    const view = await read($, paneView)
    const figures = await read($, pressure)
    const hidden = await read($, bandHidden)
    const data = { view, figures, hidden, bodyColumns: e.props.bodyColumns, nowMs: Date.now() }
    return drawPane($.ui.resolve(e), data, { refresh: () => refreshPane($), showBand: () => showBand($) })
  })

export function drawPane(ui: Draw, data: PaneData, act: PaneActions): RenderElement {
  const { Box, Button, Text } = ui
  const { view, figures, hidden, nowMs: now } = data

  // The body's width, so prose that may take two rows is cut after them;
  // every other row is cut at the edge by the surface, with an ellipsis.
  const width = Math.max(24, data.bodyColumns || 80)
  const rows: RenderElement[] = []
  let n = 0
  type Style = { bold?: boolean; dimColor?: boolean }
  const row = (text: string, style: Style = {}) =>
    rows.push(
      <Text key={`l${n++}`} wrap="truncate-end" {...style}>
        {text}
      </Text>,
    )
  const gap = () => row(' ')
  const pad = (label: string) => label.padEnd(LABEL)
  // A labelled row of prose: up to two rows, then an ellipsis.
  const prose = (label: string, text: string) =>
    rows.push(
      <Text key={`l${n++}`} wrap="wrap">
        {`  ${pad(label)}${clip(oneLine(text), 2 * width - LABEL - 4)}`}
      </Text>,
    )
  // A labelled list: the count in the label, one item per row, the first
  // LIST_ROWS of them.
  const items = (label: string, list: string[]) => {
    row(`  ${pad(`${label} ${list.length}`)}${oneLine(list[0] ?? '')}`)
    for (const s of list.slice(1, LIST_ROWS)) row(`  ${pad('')}${oneLine(s)}`)
    if (list.length > LIST_ROWS) row(`  ${pad('')}and ${list.length - LIST_ROWS} more`, { dimColor: true })
  }

  // One row of figures: the fill, the checkpoint age, the band, and what
  // the pane holds below.
  const summary = [
    figures ? `ctx ${figures.percent ?? '?'}%` : undefined,
    figures ? ageText(figures.checkpointCreated, now) : undefined,
    figures?.inBand ? 'checkpoint now' : undefined,
    view ? count(view.rules.length, 'rule') : undefined,
    view?.file ? `${count(view.mistakes.length, 'mistake')} for ${basename(view.file)}` : undefined,
  ].filter((s): s is string => s !== undefined)
  if (summary.length) row(summary.join(' · '), { dimColor: true })

  if (!view) {
    row('Nothing read yet: press Refresh.', { dimColor: true })
  } else {
    const c = view.checkpoint
    gap()
    if (!c) {
      row('Checkpoint · none in the ring', { bold: true })
    } else {
      const meta = [c.kind ?? 'auto', `${ageText(c.created, now).replace('ckpt ', '')} ago`, c.task_id, c.project_path ? basename(c.project_path) : undefined]
      row(`Checkpoint · ${meta.filter(Boolean).join(' · ')}`, { bold: true })
      if (c.task_description) prose('Task', c.task_description)
      if (c.current_step) prose('Step', c.current_step)
      if (c.completed.length) items('Done', c.completed)
      if (c.pending.length) items('Pending', c.pending)
      if (c.files.length) row(`  ${pad(`Files ${c.files.length}`)}${c.files.map(basename).join(', ')}`)
      if (c.warnings.length) items('Warnings', c.warnings)
      if (c.context_needed.length) items('Needed', c.context_needed)
      if (c.handoff) prose('Handoff', c.handoff)
      if (c.goal) prose('Goal', c.goal)
    }

    gap()
    row(`Rules · ${view.rules.length}${view.project ? ` · ${basename(view.project)}` : ''}`, { bold: true })
    if (!view.rules.length) row('  none', { dimColor: true })
    for (const r of view.rules) row(`  [${r.id}] ${oneLine(r.content)}`)

    gap()
    row(view.file ? `Mistakes · ${view.mistakes.length} · ${basename(view.file)}` : 'Mistakes', { bold: true })
    if (!view.file) row('  no file touched yet this session', { dimColor: true })
    else if (!view.mistakes.length) row('  none', { dimColor: true })
    for (const m of view.mistakes) row(`  [${m.id}] ${oneLine(m.content)}`)
  }

  return (
    <Box key="windvane-pane" flexDirection="column">
      <Box key="windvane-actions" flexDirection="row">
        <Button key="windvane-refresh" label="Refresh" onPress={act.refresh} />
        {hidden && <Button key="windvane-show-band" label="Show band" onPress={act.showBand} />}
      </Box>
      {rows}
    </Box>
  )
}