obw

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE_ID) return next(e)
    try {
      return await drawPane($, e)
    } catch {
      try {
        const { Text } = await $.ui.resolve(e)
        return Text({ dimColor: true, children: ['obw: the card could not be drawn.'] })
      } catch {
        return next(e)
      }
    }
  })

async function drawPane($: any, e: any) {
  const ui = await $.ui.resolve(e)
  const { Box, Text, Select } = ui
  const state = await read($, pane)
  const settings = await read($, list)
  const safe = (text: string) => bounded(text).text
  const dim = (text: string) => Text({ dimColor: true, children: [safe(text)] })
  const error = (text: string) => Text({ color: ERROR, children: [safe(text)] })
  const line = ({ kind, text }: Line) => (kind === 'error' ? error(text) : dim(text))
  const span = (text: string, color?: string) => Text({ ...(color ? { color } : {}), children: [safe(text)] })
  const bodyColumns = Number.isInteger(e.props?.bodyColumns) && e.props.bodyColumns > 0 ? e.props.bodyColumns : null
  const columns = bodyColumns ?? 80
  const ruleWidth = Math.min(bodyColumns ?? 40, MAX_CHARS)
  const draw: DrawContext = { ui, state, bound: await read($, binding), e, dim, error, line, span }

  if (state.trail.length) return cardView($, draw, { columns, ruleWidth })

  const children: any[] = []
  if (state.listing) children.push(line(state.listing))
  if (!state.loading && state.views.length && state.scope && state.chosen) {
    children.push(
      Select({
        key: 'views',
        options: state.views.map((name) => ({ value: safe(name), label: safe(name) })),
        value: safe(state.chosen),
        onSelect: (name: string) => void pickView($, name).catch(() => {}),
      }),
    )
  }
  const drawnList = state.allTasks && state.allTasks.groups.length ? state.allTasks : null
  if (drawnList) {
    children.push(...listChildren(ui, { surface: e.surface, columns, ruleWidth, allTasks: drawnList, list: settings, handlers: listHandlers($) }))
  } else if (state.cards.length) {
    children.push(
      Select({
        key: 'cards',
        options: state.cards.map((card) => ({ value: safe(card.path), label: safe(card.label) })),
        ...(state.selected ? { value: safe(state.selected) } : {}),
        onSelect: (path: string) => void show($, (before) => ({ trail: before, path })).catch(() => {}),
      }),
    )
  }
  if (state.message) children.push(line(state.message))
  if (state.hint) children.push(dim(state.hint))
  if (drawnList) children.push(listHints(ui, e.surface))
  const card = state.card
  if (!card) return Box({ flexDirection: 'column', children })
  // A blank row and a thin rule set the card off from the list above it.
  children.push(Box({ flexDirection: 'column', marginTop: 1, children: [dim('─'.repeat(ruleWidth)), ...cardRegion($, draw, card)] }))
  return Box({ flexDirection: 'column', children })
}

function cardView($: any, draw: DrawContext, { columns, ruleWidth }: { columns: number; ruleWidth: number }) {
  const { ui, state, dim } = draw
  const { Box, Text, Button } = ui
  const { card } = state
  const crumbs = ['list', ...state.trail.slice(0, -1).map((path) => bounded(cardName(path)).text)]
  const hasRelations = card?.kind === 'shown' && Object.values(card.relations).some((names) => names.length > 0)
  const hints = ['↑↓ scroll', ...(hasRelations ? ['tab links'] : []), 'esc or b back']
  return Box({
    flexDirection: 'column',
    children: [
      Box({
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: Math.max(0, columns - 2),
        children: [
          Text({ color: INACTIVE, wrap: 'truncate-end', children: [bounded(fitWidth(`${crumbs.join(' › ')} ›`, Math.max(10, columns - 12)).trimEnd()).text] }),
          Button({ plain: true, key: BACK_KEY, hotkey: 'b', label: 'back', autoFocus: true, onPress: () => void back($).catch(() => {}) }),
        ],
      }),
      Box({ flexDirection: 'column', marginTop: 1, children: [dim('─'.repeat(ruleWidth)), ...(card ? cardRegion($, draw, card) : [])] }),
      Box({ marginTop: 1, children: [Text({ color: SUBTLE, wrap: 'truncate-end', children: [hints.join(' · ')] })] }),
    ],
  })
}

function cardRegion($: any, draw: DrawContext, card: ObwCard) {
  const { ui, state, bound, e, dim, error, line, span } = draw
  const { Text, Markdown, Button, Code, Box } = ui
  const region: any[] = []
  if (card.kind === 'loading') region.push(dim(`Reading ${cardName(card.path)}…`))
  if (card.kind === 'error') region.push(error(card.message))
  if (card.kind === 'shown') {
    const { title, status, priority } = card.header
    const body = bounded(card.body)
    const ac = acLabel(card.body)
    region.push(Text({ bold: true, children: [bounded(title ?? cardName(card.path)).text] }))
    region.push(
      Text({
        children: [
          dim('status: '),
          span(status ?? '—', statusColor(status)),
          dim(' · priority: '),
          span(priority ?? '—', priorityColor(priority)),
          ...(ac ? [dim(' · '), span(ac)] : []),
        ],
      }),
    )
    // Only the All Tasks card view knows the rows a link can name; another view's cards are not all of them.
    const relations = state.trail.length ? relationLines($, draw, card) : []
    if (relations.length) region.push(Box({ flexDirection: 'column', children: relations }))
    if (e.surface === 'terminal') {
      region.push(Button({ key: 'bind', label: 'Bind this session', onPress: () => { void bindShown($).catch(() => {}) } }))
      if (bound && state.scope && sameBinding(bound, { cardPath: card.path, vault: state.scope.vault })) {
        region.push(Button({ key: 'unbind', label: 'Unbind this session', onPress: () => { void unbindShown($).catch(() => {}) } }))
      }
      if (card.bindLine) region.push(line(card.bindLine))
    }
    // Only the terminal can run render.sh: `process` is CLI only.
    if (card.vizRoot && e.surface === 'terminal') {
      region.push(
        Button({
          key: 'open-in-browser',
          label: 'Open in browser',
          onPress: () => {
            void openInBrowser($).catch(() => {})
          },
        }),
        ...browserLines(card.browser).map(line),
      )
    }
    const bodyClip = clipNotice(body)
    if (bodyClip) region.push(dim(bodyClip))
    for (const part of bodyParts(card.segments, card.diagrams)) {
      if ('markdown' in part) region.push(Markdown({ text: bounded(part.markdown).text }))
      else {
        const diagram = bounded(part.diagram)
        const diagramClip = clipNotice(diagram)
        if (diagramClip) region.push(dim(diagramClip))
        region.push(Code({ source: diagram.text, wrap: 'truncate-end' }))
      }
    }
  }
  return region
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const bound = await read($, binding)
    if (!bound || e.props?.hasSurvey) return next(e)
    const beneath = await next(e)
    try {
      const { Box, Text } = await $.ui.resolve(e)
      const { cardPath, card } = bound
      const title = card?.title
      const line = Text({
        wrap: 'truncate-end',
        children: [
          Text({ color: 'success', children: ['●'] }),
          ` ${bounded(cardName(cardPath)).text}`,
          ...(title ? [`  ${title}`] : []),
          ...(card?.ac ? [`  ${card.ac}`] : []),
        ],
      })
      return Box({ flexDirection: 'column', children: [line, beneath] })
    } catch {
      return beneath
    }
  })