mod-lab

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const columns = e.props.bodyColumns
    const shown = await read($, view)
    const said = await read($, result)
    const list = await read($, entries)
    const chosenId = await read($, selected)
    const chosen = chosenId === null ? undefined : list.find(entry => entry.id === chosenId)

    const header = (
      <Box gap={1} flexWrap="wrap">
        <Button
          key="view:events"
          label={`Events (${list.length})`}
          hotkey="e"
          {...(shown === 'events' ? { variant: 'primary' as const } : {})}
          onPress={() => void show($, 'events')}
        />
        <Button
          key="view:demos"
          label="Demos"
          hotkey="d"
          {...(shown === 'demos' ? { variant: 'primary' as const } : {})}
          onPress={() => void show($, 'demos')}
        />
        <Button key="dump" label="Dump" hotkey="u" onPress={() => void runDump($)} />
        <Button key="clear" label="Clear" hotkey="c" onPress={() => void clear($)} />
      </Box>
    )

    const report = said !== '' && (
      <Box marginTop={1}>
        <Text wrap="wrap">{said}</Text>
      </Box>
    )

    if (shown === 'demos') {
      return (
        <Box flexDirection="column">
          {header}
          {report}
          <Box flexDirection="column" marginTop={1}>
            {DEMOS.map((demo, index) => (
              <Box flexDirection="column">
                <Button
                  key={`demo:${demo.key}`}
                  label={demo.label}
                  plain
                  {...(index < 9 ? { hotkey: String(index + 1) } : {})}
                  onPress={press => void runDemo($, demo, press)}
                />
                <Text dimColor wrap="wrap">
                  {`   ${demo.about}`}
                </Text>
              </Box>
            ))}
          </Box>
        </Box>
      )
    }

    if (chosen !== undefined) {
      return (
        <Box flexDirection="column">
          {header}
          {report}
          <Box flexDirection="column" marginTop={1}>
            <Button key="back" label="Back to the list" hotkey="b" onPress={() => void update($, selected, () => null)} />
            <Text bold>{`${timeOf(chosen.at)} ${chosen.event}`}</Text>
            <Text wrap="wrap">
              {detailOf(chosen.id) ??
                'The full data of this event is no longer kept. It is lost when the mod reloads.'}
            </Text>
          </Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        {header}
        {report}
        <Box flexDirection="column" marginTop={1}>
          {list.length === 0 && (
            <Text dimColor wrap="wrap">
              No events yet. Send a prompt and watch this list. The newest event is at the top.
            </Text>
          )}
          {[...list]
            .reverse()
            .slice(0, MAX_ROWS)
            .map(entry => (
              <Button
                key={`entry:${entry.id}`}
                label={rowOf(entry, columns)}
                plain
                dimColor
                onPress={() => void update($, selected, () => entry.id)}
              />
            ))}
        </Box>
      </Box>
    )
  })