brigade

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Client, Svg, Text } = elements
    // An empty board, drawn as plain lines when the board itself can't be read.
    let snapshot: Snapshot = {
      project: projectOf({ mode: 'tickets', repo: '', count: 0 }) as Project,
      lanes: toWorkLanes([]) as WorkLane[],
      agents: [],
      weather: null,
      messages: [],
      learnings: { total: 0, lines: [] },
      detail: null,
      now: 0,
    }
    try {
      snapshot = await snapshotOf($)
      const shown = await read($, stage)
      if (e.surface === 'terminal' && !shown.plain) {
        drawnAs = 'region'
        return <Client key="stage" module="./screen.tsx" width="100%" props={snapshot} />
      }
      // The terminal whose region never reported in gets the painted board as rows; desktop can't
      // load a region at all and gets it as a picture. Either way the detail box, when it is up, is
      // already drawn in, and the buttons that open it sit underneath.
      if (e.surface === 'terminal') {
        const rows = (
          <Box flexDirection="column">
            {boardRows(snapshot, shown.positions).map(runs => (
              <Text>
                {runs.map(run => (
                  <Text color={run.color} backgroundColor={run.backgroundColor} bold={run.bold}>
                    {run.text}
                  </Text>
                ))}
              </Text>
            ))}
            {detailRow($, elements, snapshot)}
          </Box>
        )
        drawnAs = 'rows'
        return rows
      }
      if (e.surface === 'desktop') {
        // A plain image with no size of its own. The app scales it to the pane, and swaps a changed
        // one in place; a sized, interactive picture sits in a frame that reloads, and flashes, on
        // every change.
        const columns = pictureColumns(e.viewport?.columns)
        const picture = pictureFor(snapshot, shown, columns)
        const drawn = (
          <Box flexDirection="column">
            <Svg source={picture.source} alt="Brigade board" />
            {detailRow($, elements, snapshot)}
          </Box>
        )
        drawnAs = 'picture'
        pictureDrawnAt = columns
        return drawn
      }
    } catch {
      // Not drawn this time; the plain lines below still show the board, or an empty one when
      // the board itself couldn't be read.
    }
    drawnAs = 'lines'
    // Surfaces without a region get the same board as plain lines. Text from files only ever
    // goes through Text, so nothing in it can turn into a link or markup, and every line goes
    // through plain first. A crowd of agents is listed up to a dozen, then counted.
    const listed = snapshot.agents.slice(0, PLAIN_AGENTS)
    const unlisted = snapshot.agents.length - listed.length
    return (
      <Box flexDirection="column">
        <Text bold>{plain(snapshot.project.title)}</Text>
        <Text>{plain(snapshot.project.detail)}</Text>
        <Text>{plain(contextLine(snapshot.weather))}</Text>
        {snapshot.lanes.map(lane => (
          <Text>{plain(laneLine(lane))}</Text>
        ))}
        {listed.map(agent => (
          <Text>{plain(agentLine(agent))}</Text>
        ))}
        {(unlisted > 0 ? [`+${unlisted} more`] : []).map(line => (
          <Text>{line}</Text>
        ))}
        {snapshot.messages.slice(0, SHOW_MESSAGES).map(message => (
          <Text>{plain(`${message.from} → ${message.to}: ${message.text}`)}</Text>
        ))}
      </Box>
    )
  })

function detailRow($: EngineInterface, { Box, Button, Text }: Elements, snapshot: Snapshot) {
  const closing = snapshot.detail !== null ? [{ key: 'close-details', label: 'Close details' }] : []
  const opening = detailButtons(snapshot)
  if (closing.length + opening.length === 0) return []
  return [
    <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
      <Text>Details:</Text>
      {closing.map(button => (
        <Button key={button.key} label={button.label} role="dismiss" onPress={() => pressed($, { close: true })} />
      ))}
      {opening.map(button => (
        <Button key={button.key} label={button.label} onPress={() => pressed($, { open: button.open })} />
      ))}
    </Box>,
  ]
}