basepaint

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text } = ui
    const Image = 'Image' in ui ? ui.Image : undefined

    // A hot reload drops the timers while the pane stays up: re-arm them.
    try {
      if (!polling) startPolling($)
    } catch {
      // polling resumes on the next open
    }

    const [view, st, dayN, endsAt, themeName, by, colors, img, rows, nameMap, usd, count, err, top, topFail] =
      await Promise.all([
        read($, viewDay),
        read($, stats),
        read($, day),
        read($, dayEnd),
        read($, theme),
        read($, proposer),
        read($, palette),
        read($, image),
        read($, feed),
        read($, names),
        read($, ethUsd),
        read($, online),
        read($, lastError),
        read($, topPainters),
        read($, topFailed),
      ])
    const now = Math.floor((await $.clock.now()) / 1000)
    const width = Math.max(20, e.props.bodyColumns)
    const roomRows = e.viewport?.rows ?? 40
    // Terminal cells are about twice as tall as wide, so a square picture of
    // N columns needs N / 2 rows. Leave ~16 rows for the text around it.
    const imgRows = Math.max(6, Math.min(Math.floor(width / 2), roomRows - 16, 127))
    const imgCols = Math.min(width, imgRows * 2)

    const label = (row: { address: string }) =>
      nameMap[row.address.toLowerCase()] ?? shortAddress(row.address)

    return (
      <Box flexDirection="column">
        <Box flexDirection="column" paddingX={1} paddingY={1}>
          <Text dimColor wrap="truncate">
            {view > 0
              ? formatStatsLine(view, st)
              : dayN > 0
                ? `day ${dayN} · ${formatTimeLeft(endsAt - now)}`
                : 'loading…'}
          </Text>
          <Text wrap="truncate">
            {'Theme: '}
            <Text bold>{themeName ?? (view > 0 ? 'untitled' : 'TBD')}</Text>
            {view > 0 ? (by ? `, proposed by ${by}` : '') : `, proposed by ${by ?? 'unknown'}`}
          </Text>
          <Box flexWrap="wrap" gap={1} marginTop={1}>
            {colors.map(hex => (
              <Text key={hex} backgroundColor={hex}>{'  '}</Text>
            ))}
          </Box>
        </Box>
        <Box marginBottom={1}>
          {Image && img.path ? (
            <Image
              key="canvas"
              source={{ file: img.path, format: 'png', generation: img.generation }}
              columns={imgCols}
              rows={imgRows}
              alt="BasePaint canvas"
            />
          ) : (
            <Box paddingX={1}>
              <Text dimColor>{img.isOffline ? 'canvas offline' : 'loading canvas…'}</Text>
            </Box>
          )}
        </Box>
        <Box flexDirection="column" paddingX={1}>
          {img.path && img.isOffline && <Text dimColor>canvas offline</Text>}
          {view > 0 ? (
            <Box flexDirection="column">
              <Text color="green" bold>
                {`● TOP PAINTERS${st ? ` · ${st.artists.toLocaleString('en-US')} ARTISTS` : ''}`}
              </Text>
              {top.map((p, i) => (
                <Box key={p.address}>
                  <Box width={3}>
                    <Text bold color="cyan">{String(i + 1)}</Text>
                  </Box>
                  <Box width={18}>
                    <Text bold color="cyan" wrap="truncate">
                      {label(p)}
                    </Text>
                  </Box>
                  <Box flexGrow={1}>
                    <Text wrap="truncate">{formatPainted(p.pixels)}</Text>
                  </Box>
                  <Text dimColor>{formatShare(p.pixels, st?.pixels)}</Text>
                </Box>
              ))}
              {top.length === 0 && topFail && <Text dimColor>leaderboard unavailable</Text>}
            </Box>
          ) : (
            <Box flexDirection="column">
              <Text color="green" bold>
                {`● ${count ?? '?'} USERS ONLINE`}
              </Text>
              {rows.map(row => (
                <Box key={row.id}>
                  <Box width={18}>
                    <Text bold color="cyan" wrap="truncate">
                      {label(row)}
                    </Text>
                  </Box>
                  <Box flexGrow={1}>
                    <Text wrap="truncate">{rowText(row, usd)}</Text>
                  </Box>
                  <Text dimColor>{relativeTime(now, row.timestamp)}</Text>
                </Box>
              ))}
            </Box>
          )}
          {err && <Text dimColor wrap="truncate">{`last error: ${err}`}</Text>}
        </Box>
      </Box>
    )
  })