session-board

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    // The mobile app draws no text field
    if (e.surface === 'mobile') {
      return next(e)
    }

    const { Box, Button, Input, Text } = $.ui.resolve(e)
    const failed = await read($, error)

    if (failed !== null) {
      return <Text>{failed}</Text>
    }

    const all = await read($, sessions)

    if (all.length === 0) {
      return <Text>No active sessions</Text>
    }

    const pinned = await read($, order)
    const kept = await read($, summaries)
    const homeDir = await read($, home)
    const now = await read($, nowMs)
    const current = await read($, currentId)
    const dropped = await read($, skipped)
    const asked = await read($, query)
    const ring = await read($, focused)
    const found = new Set(filterLive(all, asked, homeDir).map(session => session.id))
    const byId = new Map(all.map(session => [session.id, session]))
    // A session that is gone keeps its place in the order and is not drawn; neither is one the
    // search does not let through, and its digit stays its own
    const rows = pinned.flatMap((id, place) => {
      const session = byId.get(id)

      return session === undefined || !found.has(id) ? [] : [{ session, place }]
    })
    const selected = selectedOf(
      rows.map(row => row.session),
      ring,
    )
    const layout = layoutOf(e.props.bodyColumns)
    const counter = `${rows.length}/${all.length}`
    const lines =
      selected === undefined
        ? [{ kind: 'note' as const, text: 'Nothing selected' }]
        : previewOf(
            selected,
            phaseOf(selected, now, staleMs),
            kept[selected.id],
            now,
            homeDir,
            previewWidth(layout.preview),
          )
    const selectedColor = selected === undefined ? undefined : PHASE_COLOR[phaseOf(selected, now, staleMs)]
    // A frame's title is drawn over its top border: an absolute Box after the frame, so it paints last
    const frameTitle = (title: string, width: number) => (
      <Box position="absolute" top={0} left={FRAME_TITLE_LEFT}>
        <Text color={ACCENT_COLOR} bold>{` ${clip(title, Math.max(1, width - FRAME_TITLE_CHROME))} `}</Text>
      </Box>
    )

    return (
      <Box
        flexDirection={layout.isStacked ? 'column' : 'row'}
        minHeight={layout.isStacked ? undefined : frameRows(e.props.scroll.bodyRows)}
      >
        <Box flexDirection="column" width={layout.list}>
          <Box borderStyle="round" borderColor={FRAME_COLOR} width={layout.list} flexDirection="column" flexGrow={1}>
            <Box>
              <Text color={ACCENT_COLOR}>{' > '}</Text>
              <Box flexGrow={1}>
                <Input
                  key={SEARCH}
                  value={asked}
                  placeholder="search"
                  submitLabel="go"
                  autoFocus
                  onInput={value => update($, query, () => value)}
                  onSubmit={() => (selected === undefined ? undefined : goTo($, selected))}
                />
              </Box>
              <Text color={QUIET_COLOR}>{dropped > 0 ? `${counter} · skipped ${dropped} ` : `${counter} `}</Text>
            </Box>
            <Text color={FRAME_COLOR}>{'─'.repeat(Math.max(1, layout.list - 2))}</Text>
            {rows.length === 0 && <Text color={QUIET_COLOR}>{' Nothing found'}</Text>}
            {rows.map(({ session, place }) => {
              const phase = phaseOf(session, now, staleMs)
              const isSelected = session.id === selected?.id
              const hotkey = hotkeyOf(place)

              return (
                <Box backgroundColor={isSelected ? SELECTION_COLOR : undefined}>
                  <Text color={ACCENT_COLOR}>{isSelected ? '▌' : ' '}</Text>
                  <Text color={PHASE_COLOR[phase]}>{`${markOf(phase)} `}</Text>
                  <Box flexGrow={1}>
                    <Button
                      key={rowKey(session.id)}
                      label={titleLabel(session.title, titleCell(layout.list), hotkey, session.id === current)}
                      hotkey={hotkey}
                      plain
                      dimColor={phase === 'stale'}
                      onPress={() => goTo($, session)}
                    />
                  </Box>
                  <Text color={AGE_COLOR}>{ageCell(now - session.statusSinceMs)}</Text>
                </Box>
              )
            })}
          </Box>
          {frameTitle(TITLE, layout.list)}
        </Box>
        <Box flexDirection="column" width={layout.preview}>
          <Box
            borderStyle="round"
            borderColor={FRAME_COLOR}
            width={layout.preview}
            flexDirection="column"
            flexGrow={1}
            paddingX={PREVIEW_PADDING}
          >
            {lines.map(line => (
              <Text color={line.kind === 'state' ? selectedColor : LINE_COLOR[line.kind]} bold={line.kind === 'state'}>
                {line.kind === 'gap' ? ' ' : line.text}
              </Text>
            ))}
          </Box>
          {frameTitle(selected?.title ?? NO_SESSION, layout.preview)}
        </Box>
      </Box>
    )
  })