<LogStream
  sourceId={sourceId}
  startTimestamp={startTimestamp}
  endTimestamp={endTimestamp}
  query={contextQuery}
  center={contextEntry.cursor}
  highlight={contextEntry.id}
  height="100%"
  columns={[
    {
      type: 'timestamp',
      width: 100,
      header: 'When?',
      render: (timestamp) => new Intl.DateTimeFormat('en-GB').format(timestamp),
    },
    {
      type: 'field',
      field: 'host.name',
      width: '150px',
      header: 'Where?',
      render: (value) =>
        typeof value === 'string' ? value.replace(/.local$/, '.🏠') : value,
    },
    {
      type: 'field',
      field: 'log.level',
      width: 32,
      header: false,
      render: (logLevel) => {
        switch (logLevel) {
          case 'warn':
            return '⚠️';
          case 'error':
            return '⛔️';
          case 'debug':
            return '🐞';
          default:
            return 'ℹ️';
        }
      },
    },
    {
      type: 'message',
      header: 'What?',
      render: (message) => {
        let newMessage = message.startsWith('Entered') ? `➡️ ${message}` : message;
        newMessage = newMessage.replace('SIGKILL', '☠️');
        newMessage = newMessage.replace('disconnect', '️🔌');
        newMessage = newMessage.replace('map', '🗺');
        return newMessage;
      },
    },
  ]}
/>