witness

  on('ui.render', { component: 'Pane', requestId: 'witness' }, async ($, e) => {
    placement = e.props.placement
    const facts = await railFacts($)
    // Docked, nothing folds: the column scrolls. Inline, the rows are what the engine gave.
    return drawRail($, e, fitRows(facts, e.props.placement === 'inline' ? e.props.scroll.bodyRows : Number.POSITIVE_INFINITY))
  })

function drawRail($: EngineInterface, e: RenderInput<'Pane'>, rows: readonly RailRow[]) {
  const elements = $.ui.resolve(e)
  const { Box, Text, Link } = elements
  const Svg = (e.surface === 'desktop' || e.surface === 'vscode') && 'Svg' in elements ? elements.Svg : undefined
  // Docked, the mod draws the frame's gutter: one cell on the left, one under the close
  // mark, so a header never touches the divider and the \`…\` sits under the \`✕\`.
  const docked = e.props.placement === 'dock'
  const body = (e.props.bodyColumns || RAIL_COLUMNS) - (docked ? 2 : 0)
  const width = Math.max(8, body - 2)
  const line = (row: RailRow) => {
    switch (row.kind) {
      case 'header':
        return <Text dimColor>{row.text}</Text>
      case 'gap':
        return <Text> </Text>
      case 'note':
        // A cause cut short says nothing: a note wraps rather than lose its end.
        return <Text dimColor>{row.text}</Text>
      case 'more':
        return (
          <Box paddingLeft={2}>
            <Text dimColor>{row.count + ' more'}</Text>
          </Box>
        )
      case 'about':
        return (
          <Box paddingLeft={2}>
            <Text dimColor>{cut(row.text, width)}</Text>
          </Box>
        )
      case 'link':
        return (
          <Box paddingLeft={2}>
            <Text dimColor={row.dim === true}>
              <Link href={row.href}>{cut(row.text, width)}</Link>
            </Text>
          </Box>
        )
      case 'card': {
        const { card } = row
        const title = cut(card.title, width - cells(card.id) - 3)
        const words = row.href ? (
          <Text>
            <Link href={row.href}>
              <Text dimColor>{card.id}</Text>
              {title ? ' ' + title : ''}
            </Link>
          </Text>
        ) : (
          <Text>
            <Text dimColor>{card.id}</Text>
            {title ? ' ' + title : ''}
          </Text>
        )
        const colour = glyphColour(card.status)
        const glyph = Svg ? (
          <Svg source={glyphSvg(card.status)} alt={statusLabel(card.status)} width={14} height={14} />
        ) : colour ? (
          <Text color={colour}>{glyphCell(card.status)}</Text>
        ) : (
          <Text>{glyphCell(card.status)}</Text>
        )
        return (
          <Box paddingLeft={2} flexDirection="row">
            {glyph}
            <Text> </Text>
            {words}
          </Box>
        )
      }
    }
  }
  return (
    <Box flexDirection="column" paddingLeft={docked ? 1 : 0}>
      {rows.map(line)}
    </Box>
  )
}