chatroom

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e) => {
    const server = await serverUrl($)

    return drawRoom($.ui.resolve(e), {
      messages: await read($, messagesAtom),
      online: await read($, onlineAtom),
      notice: await read($, noticeAtom),
      rows: e.props.scroll.bodyRows,
      columns: Math.max(10, e.props.bodyColumns - PANE_CHROME_COLUMNS),
      hasFrame: false,
      onSubmit: text => send($, server, text),
      onResize: () => $.ui.invalidate('ui.render'),
    })
  })

function drawRoom(kit: Elements[RenderSurface], room: Room): RenderElement {
  const { Box, Text } = kit
  // The engine's field is one line and cuts what does not fit. So the draft is
  // wrapped here: its earlier lines are drawn as text, the field holds the last
  // one, and the messages give up a row for each line.
  const fieldColumns = room.columns - INPUT_LABEL_COLUMNS - CURSOR_COLUMNS
  const lines = wrapLines(draft, fieldColumns)
  const inputRows = Math.min(lines.length, Math.max(1, room.rows - HEADER_ROWS - 1))
  const messageRows = Math.max(1, room.rows - HEADER_ROWS - inputRows)
  const fieldText = lines.at(-1) ?? ''
  // What the field does not hold: this drawing's handlers put it back in front of what is typed.
  const typedBefore = draft.slice(0, draft.length - fieldText.length)
  const earlierLines = inputRows > 1 ? lines.slice(0, -1).slice(1 - inputRows) : []

  // The break moved (more typing, or the room changed width): the field's text is another, so the field is too.
  if (typedBefore.length !== fieldSplit) {
    fieldSplit = typedBefore.length
    fieldEpoch++
  }

  const epochDrawn = fieldEpoch
  const shown = fitMessages(room.messages, messageRows, room.columns)
  const frame = room.hasFrame ? ({ borderStyle: 'round', borderDimColor: true } as const) : {}

  return (
    <Box flexDirection="column" height={room.rows + (room.hasFrame ? BAND_CHROME_ROWS : 0)} paddingX={ROOM_PADDING_X} {...frame}>
      <Box>
        <Text dimColor>{String(room.online)} here · </Text>
        {room.notice ? <Text color="red">{room.notice}</Text> : <Text dimColor>{TYPE_HINT}</Text>}
      </Box>
      <Box flexDirection="column" height={messageRows} justifyContent="flex-end" overflow="hidden">
        {shown.length === 0 && <Text dimColor>No messages yet. Say hi.</Text>}
        {shown.map(message => (
          <Text wrap="wrap">
            <Text color={colorFor(message.name)} bold>
              {message.name}
            </Text>{' '}
            {message.text}
          </Text>
        ))}
      </Box>
      {earlierLines.map(line => (
        <Text wrap="truncate-end">{line}</Text>
      ))}
      {'Input' in kit && (
        <kit.Input
          key={`${INPUT_KEY}-${FIELD_SEED}-${epochDrawn}`}
          autoFocus
          placeholder="say something"
          value={fieldText}
          submitLabel={SUBMIT_LABEL}
          onInput={value => {
            draft = typedBefore + value
            const isStaleField = epochDrawn !== fieldEpoch

            // A key typed into a field that has since been replaced needs a fresh field to show it.
            if (isStaleField) {
              fieldEpoch++
            }

            if (isStaleField || wrapLines(draft, fieldColumns).length !== lines.length) {
              room.onResize()
            }
          }}
          onSubmit={value => {
            const text = typedBefore + value
            draft = ''
            fieldEpoch++
            room.onResize()
            detached(
              room.onSubmit(text).then(problem => {
                // A refused message goes back in the field, unless the person has typed since.
                if (problem !== null && draft === '') {
                  draft = text
                  fieldEpoch++
                  room.onResize()
                }
              }),
            )
          }}
        />
      )}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!isShowing || !e.props.isWorking || e.props.hasSurvey) {
      return next(e)
    }

    if ((await $.ui.panes()).some(pane => pane.id === PANE_ID && pane.isPlaced)) {
      return next(e)
    }

    const server = await serverUrl($)

    return drawRoom($.ui.resolve(e), {
      messages: await read($, messagesAtom),
      online: await read($, onlineAtom),
      notice: await read($, noticeAtom),
      rows: Math.min(e.props.maxRows, BAND_MAX_ROWS) - BAND_CHROME_ROWS,
      columns: Math.max(10, e.props.bodyColumns - BAND_CHROME_COLUMNS),
      hasFrame: true,
      onSubmit: text => send($, server, text),
      onResize: () => $.ui.invalidate('ui.render'),
    })
  })