examples/device/webusb_serial/website/application.js

'use strict';

(async () => {
  // bind to the html
  const uiBody = document.body;
  const uiToggleThemeBtn = document.getElementById('theme-toggle');

  const uiConnectWebUsbSerialBtn = document.getElementById('connect_webusb_serial_btn');
  const uiConnectSerialBtn = document.getElementById('connect_serial_btn');
  const uiDisconnectBtn = document.getElementById('disconnect_btn');

  const uiNewlineModeSelect = document.getElementById('newline_mode_select');
  const uiAutoReconnectCheckbox = document.getElementById('auto_reconnect_checkbox');
  const uiForgetDeviceBtn = document.getElementById('forget_device_btn');
  const uiForgetAllDevicesBtn = document.getElementById('forget_all_devices_btn');
  const uiResetAllBtn = document.getElementById('reset_all_btn');
  const uiCopyOutputBtn = document.getElementById('copy_output_btn');
  const uiDownloadOutputCsvBtn = document.getElementById('download_csv_output_btn');

  const uiStatusSpan = document.getElementById('status_span');

  const uiCommandHistoryClearBtn = document.getElementById('clear_command_history_btn');
  const uiCommandHistoryScrollbox = document.getElementById('command_history_scrollbox');
  const uiCommandLineInput = document.getElementById('command_line_input');
  const uiSendModeBtn = document.getElementById('send_mode_btn');

  const uiReceivedDataClearBtn = document.getElementById('clear_received_data_btn');
  const uiReceivedDataScrollbox = document.getElementById('received_data_scrollbox');

  const uiNearTheBottomThreshold = 100; // pixels from the bottom to trigger scroll

  const maxCommandHistoryLength = 123; // max number of command history entries
  const maxReceivedDataLength = 8192 / 8; // max number of received data entries

  const THEME_STATES = ['auto', 'light', 'dark'];

  /// https://stackoverflow.com/a/6234804/4479969
  const escapeHtml = unsafe => {
    if (typeof unsafe !== 'string') unsafe = String(unsafe);
    return unsafe
      .replaceAll("&", "&")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  };

  class CommandHistoryEntry {
    constructor(text) {
      this.text = text;
      this.time = Date.now();
      this.count = 1;
    }
  }

  class ReceivedDataEntry {
    constructor(text) {
      this.text = text;
      this.time = Date.now();
      this.terminated = false;
    }
  }

  class Application {
    constructor() {
      this.currentPort = null;
      this.textEncoder = new TextEncoder();
      this.textDecoder = new TextDecoder();

      this.reconnectTimeoutId = null;

      this.commandHistory = [];
      this.uiCommandHistoryIndex = -1;

      this.receivedData = [];

      // bind the UI elements
      uiToggleThemeBtn.addEventListener('click', () => this.toggleTheme());
      // Listener for OS Theme Changes
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
        const currentPreference = localStorage.getItem('theme') || 'auto';
        // Only act if the user is in automatic mode
        if (currentPreference === 'auto') {
          this.setTheme('auto');
        }
      });

      uiConnectWebUsbSerialBtn.addEventListener('click', () => this.connectWebUsbSerialPort());
      uiConnectSerialBtn.addEventListener('click', () => this.connectSerialPort());
      uiDisconnectBtn.addEventListener('click', () => this.disconnectPort());
      uiNewlineModeSelect.addEventListener('change', () => this.setNewlineMode());
      uiAutoReconnectCheckbox.addEventListener('change', () => this.autoReconnectChanged());
      uiForgetDeviceBtn.addEventListener('click', () => this.forgetPort());
      uiForgetAllDevicesBtn.addEventListener('click', () => this.forgetAllPorts());
      uiResetAllBtn.addEventListener('click', () => this.resetAll());
      uiCopyOutputBtn.addEventListener('click', () => this.copyOutput());
      uiDownloadOutputCsvBtn.addEventListener('click', () => this.downloadOutputCsv());
      uiCommandHistoryClearBtn.addEventListener('click', () => this.clearCommandHistory());
      uiCommandLineInput.addEventListener('keydown', (e) => this.handleCommandLineInput(e));
      uiSendModeBtn.addEventListener('click', () => this.toggleSendMode());
      uiReceivedDataClearBtn.addEventListener('click', () => this.clearReceivedData());

      window.addEventListener('beforeunload', () => this.beforeUnloadHandler());

      // restore state from localStorage
      try {
        this.restoreState();
      } catch (error) {
        console.error('Failed to restore state from localStorage', error);
        this.resetAll();
        this.restoreState();
      }

      this.updateUIConnectionState();
      this.connectWebUsbSerialPort(true);
    }

    beforeUnloadHandler() {
      // Save the scroll position of the command history and received data
      localStorage.setItem('commandHistoryScrollTop', uiCommandHistoryScrollbox.scrollTop);
      localStorage.setItem('receivedDataScrollTop', uiReceivedDataScrollbox.scrollTop);
    }

    restoreState() {
      // Restore theme choice
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme) {
        this.setTheme(savedTheme);
      }

      // Restore command history
      let savedCommandHistory = JSON.parse(localStorage.getItem('commandHistory') || '[]');
      for (const cmd of savedCommandHistory) {
        this.addCommandToHistoryUI(cmd);
      }
      // Restore scroll position for command history
      const commandHistoryScrollTop = localStorage.getItem('commandHistoryScrollTop');
      if (commandHistoryScrollTop) {
        uiCommandHistoryScrollbox.scrollTop = parseInt(commandHistoryScrollTop, 10);
      }

      // Restore received data
      let savedReceivedData = JSON.parse(localStorage.getItem('receivedData') || '[]');
      for (let line of savedReceivedData) {
        line.terminated = true;
        this.addReceivedDataEntryUI(line);
      }
      // Restore scroll position for received data
      const receivedDataScrollTop = localStorage.getItem('receivedDataScrollTop');
      if (receivedDataScrollTop) {
        uiReceivedDataScrollbox.scrollTop = parseInt(receivedDataScrollTop, 10);
      }

      this.sendMode = localStorage.getItem('sendMode') || 'command';
      this.setSendMode(this.sendMode);

      uiAutoReconnectCheckbox.checked = !(localStorage.getItem('autoReconnect') === 'false');

      let savedNewlineMode = localStorage.getItem('newlineMode');
      if (savedNewlineMode) {
        uiNewlineModeSelect.value = savedNewlineMode;
      }
    }

    setTheme(theme) {
      const modeName = theme.charAt(0).toUpperCase() + theme.slice(1);
      uiToggleThemeBtn.textContent = `Theme: ${modeName}`;

      if (theme === 'auto') {
        // In auto mode, we rely on the OS preference.
        // We check the media query and add/remove the class accordingly.
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (prefersDark) {
          uiBody.classList.add('dark-mode');
        } else {
          uiBody.classList.remove('dark-mode');
        }
      } else if (theme === 'light') {
        // Force light mode by removing the class.
        uiBody.classList.remove('dark-mode');
      } else if (theme === 'dark') {
        // Force dark mode by adding the class.
        uiBody.classList.add('dark-mode');
      }

      // Save the theme to localStorage
      localStorage.setItem('theme', theme);
    }

    toggleTheme() {
      const currentTheme = localStorage.getItem('theme') || 'auto';
      const nextThemeIndex = (THEME_STATES.indexOf(currentTheme) + 1) % THEME_STATES.length;
      const nextTheme = THEME_STATES[nextThemeIndex];
      this.setTheme(nextTheme);
    }

    addCommandToHistoryUI(commandHistoryEntry) {
      let commandHistoryEntryBtn = null;

      let lastCommandMatched = false;
      if (this.commandHistory.length > 0) {
        let lastCommandEntry = this.commandHistory[this.commandHistory.length - 1];
        if (lastCommandEntry.text === commandHistoryEntry.text) {
          lastCommandEntry.count++;
          lastCommandEntry.time = Date.now();
          lastCommandMatched = true;

          // Update the last command entry
          commandHistoryEntryBtn = uiCommandHistoryScrollbox.lastElementChild;
          let time_str = new Date(lastCommandEntry.time).toLocaleString();
          commandHistoryEntryBtn.querySelector('.command-history-entry-time').textContent = time_str;
          commandHistoryEntryBtn.querySelector('.command-history-entry-text').textContent = lastCommandEntry.text;
          commandHistoryEntryBtn.querySelector('.command-history-entry-count').textContent = '×' + lastCommandEntry.count;
        }
      }
      if (!lastCommandMatched) {
        this.commandHistory.push(commandHistoryEntry);

        // Create a new command history entry
        commandHistoryEntryBtn = document.createElement('button');
        commandHistoryEntryBtn.className = 'command-history-entry';
        commandHistoryEntryBtn.type = 'button';
        let time_str = new Date(commandHistoryEntry.time).toLocaleString();
        commandHistoryEntryBtn.innerHTML = `
          <span class="command-history-entry-time">${escapeHtml(time_str)}</span>
          <span class="command-history-entry-text">${escapeHtml(commandHistoryEntry.text)}</span>
          <span class="command-history-entry-count">×${escapeHtml(commandHistoryEntry.count)}</span>
        `;
        commandHistoryEntryBtn.addEventListener('click', () => {
          if (uiCommandLineInput.disabled) return;
          uiCommandLineInput.value = commandHistoryEntry.text;
          uiCommandLineInput.focus();
        });

        uiCommandHistoryScrollbox.appendChild(commandHistoryEntryBtn);
      }

      // Limit the command history length
      while (this.commandHistory.length > maxCommandHistoryLength) {
        this.commandHistory.shift();
        uiCommandHistoryScrollbox.removeChild(uiCommandHistoryScrollbox.firstElementChild);
      }
    }

    appendNewCommandToHistory(commandHistoryEntry) {
      const wasNearBottom = this.isNearBottom(uiCommandHistoryScrollbox);

      this.addCommandToHistoryUI(commandHistoryEntry);

      // Save the command history to localStorage
      localStorage.setItem('commandHistory', JSON.stringify(this.commandHistory));

      // Scroll to the new entry if near the bottom
      if (wasNearBottom) {
        this.scrollToBottom(uiCommandHistoryScrollbox);
      }
    }

    clearCommandHistory() {
      this.commandHistory = [];
      uiCommandHistoryScrollbox.textContent = '';
      localStorage.removeItem('commandHistory');
      this.setStatus('Command history cleared', 'info');
    }

    isNearBottom(container) {
      return container.scrollHeight - container.scrollTop <= container.clientHeight + uiNearTheBottomThreshold;
    }

    scrollToBottom(container) {
      requestAnimationFrame(() => {
        container.scrollTop = container.scrollHeight;
      });
    }

    addReceivedDataEntryUI(receivedDataEntry) {
      let newReceivedDataEntries = [];
      let updateLastReceivedDataEntry = false;
      if (this.receivedData.length <= 0) {
        newReceivedDataEntries.push(receivedDataEntry);
      } else {
        let lastReceivedDataEntry = this.receivedData[this.receivedData.length - 1];
        // Check if the last entry is terminated
        if (lastReceivedDataEntry.terminated) {
          newReceivedDataEntries.push(receivedDataEntry);
        } else {
          if (!lastReceivedDataEntry.terminated) {
            updateLastReceivedDataEntry = true;
            this.receivedData.pop();
            receivedDataEntry.text = lastReceivedDataEntry.text + receivedDataEntry.text;
          }
          // split the text into lines
          let lines = receivedDataEntry.text.split(/\r?\n/);
          // check if the last line is terminated by checking if it ends with an empty string
          let lastLineTerminated = lines[lines.length - 1] === '';
          if (lastLineTerminated) {
            lines.pop(); // remove the last empty line
          }

          // create new entries for each line
          for (let i = 0; i < lines.length; i++) {
            let line = lines[i];
            let entry = new ReceivedDataEntry(line);
            if (i === lines.length - 1) {
              entry.terminated = lastLineTerminated;
            } else {
              entry.terminated = true;
            }
            newReceivedDataEntries.push(entry);
          }
          // if the last line is terminated, modify the last entry
          if (lastLineTerminated) {
            newReceivedDataEntries[newReceivedDataEntries.length - 1].terminated = true;
          } else {
            newReceivedDataEntries[newReceivedDataEntries.length - 1].terminated = false;
          }
        }
      }

      this.receivedData.push(...newReceivedDataEntries);

      if (updateLastReceivedDataEntry) {
        // update the rendering of the last entry
        let lastReceivedDataEntryBtn = uiReceivedDataScrollbox.lastElementChild;
        lastReceivedDataEntryBtn.querySelector('.received-data-entry-text').textContent = newReceivedDataEntries[0].text;
        lastReceivedDataEntryBtn.querySelector('.received-data-entry-time').textContent = new Date(newReceivedDataEntries[0].time).toLocaleString();
        newReceivedDataEntries.shift();
      }

      // render the new entries
      let documentFragment = document.createDocumentFragment();
      for (const entry of newReceivedDataEntries) {
        let receivedDataEntryBtn = document.createElement('div');
        receivedDataEntryBtn.className = 'received-data-entry';
        receivedDataEntryBtn.innerHTML = `
          <span class="received-data-entry-time">${escapeHtml(new Date(entry.time).toLocaleString())}</span>
          <span class="received-data-entry-text">${escapeHtml(entry.text)}</span>
        `;
        documentFragment.appendChild(receivedDataEntryBtn);
      }
      uiReceivedDataScrollbox.appendChild(documentFragment);

      // Limit the received data length
      while (this.receivedData.length > maxReceivedDataLength) {
        this.receivedData.shift();
        uiReceivedDataScrollbox.removeChild(uiReceivedDataScrollbox.firstElementChild);
      }
    }

    appendNewReceivedData(receivedDataEntry) {
      const wasNearBottom = this.isNearBottom(uiReceivedDataScrollbox);

      this.addReceivedDataEntryUI(receivedDataEntry);

      // Save the received data to localStorage
      localStorage.setItem('receivedData', JSON.stringify(this.receivedData));

      // Scroll to the new entry if near the bottom
      if (wasNearBottom) {
        this.scrollToBottom(uiReceivedDataScrollbox);
      }
    }

    clearReceivedData() {
      this.receivedData = [];
      uiReceivedDataScrollbox.textContent = '';
      localStorage.removeItem('receivedData');
      this.setStatus('Received data cleared', 'info');
    }

    setStatus(msg, level = 'info') {
      console.error(msg);
      uiStatusSpan.textContent = msg;
      uiStatusSpan.className = 'status status-' + level;
    }

    /// force_connected is used to instantly change the UI to the connected state while the device is still connecting
    /// Otherwise we would have to wait for the connection to be established.
    /// This can take until the device sends the first data packet.
    updateUIConnectionState(force_connected = false) {
      if (force_connected || (this.currentPort && this.currentPort.isConnected)) {
        uiConnectWebUsbSerialBtn.style.display = 'none';
        uiConnectSerialBtn.style.display = 'none';
        uiDisconnectBtn.style.display = 'block';
        uiCommandLineInput.disabled = false;

        if (this.currentPort instanceof SerialPort) {
          uiDisconnectBtn.textContent = 'Disconnect from WebSerial';
        } else if (this.currentPort instanceof WebUsbSerialPort) {
          uiDisconnectBtn.textContent = 'Disconnect from WebUSB';
        } else {
          uiDisconnectBtn.textContent = 'Disconnect';
        }
      } else {
        if (serial.isWebUsbSupported()) {
          uiConnectWebUsbSerialBtn.style.display = 'block';
        }
        if (serial.isWebSerialSupported()) {
          uiConnectSerialBtn.style.display = 'block';
        }
        if (!serial.isWebUsbSupported() && !serial.isWebSerialSupported()) {
          this.setStatus('Your browser does not support WebUSB or WebSerial', 'error');
        }
        uiDisconnectBtn.style.display = 'none';
        uiCommandLineInput.disabled = true;
        uiCommandLineInput.value = '';
        uiCommandLineInput.blur();
      }
    }

    async disconnectPort() {
      this.stopAutoReconnect();

      if (!this.currentPort) {
        this.updateUIConnectionState();
        return;
      };

      try {
        await this.currentPort.disconnect();
        this.setStatus('Disconnected', 'info');
      }
      catch (error) {
        this.setStatus(`Disconnect error: ${error.message}`, 'error');
      }

      this.updateUIConnectionState();
    }

    async onReceive(dataView) {
      this.updateUIConnectionState();

      let text = this.textDecoder.decode(dataView);
      let receivedDataEntry = new ReceivedDataEntry(text);
      this.appendNewReceivedData(receivedDataEntry);
    }

    async onReceiveError(error) {
      this.setStatus(`Read error: ${error.message}`, 'error');
      await this.disconnectPort();
      // Start auto reconnect on error if enabled
      this.tryAutoReconnect();
    }

    async connectSerialPort() {
      if (!serial.isWebSerialSupported()) {
        this.setStatus('Serial not supported on this browser', 'error');
        return;
      }
      try {
        this.setStatus('Requesting device...', 'info');
        this.currentPort = await serial.requestSerialPort();
        this.updateUIConnectionState(true);
        this.currentPort.onReceiveError = error => this.onReceiveError(error);
        this.currentPort.onReceive = dataView => this.onReceive(dataView);
        await this.currentPort.connect();
        this.setStatus('Connected', 'info');
      } catch (error) {
        this.setStatus(`Connection failed: ${error.message}`, 'error');
        if (this.currentPort) {
          await this.currentPort.forgetDevice();
          this.currentPort = null;
        }
      } finally {
        this.updateUIConnectionState();
      }
    }

    async connectWebUsbSerialPort(initial = false) {
      if (!serial.isWebUsbSupported()) {
        this.setStatus('WebUSB not supported on this browser', 'error');
        return;
      }
      try {
        let first_time_connection = false;
        let grantedDevices = await serial.getWebUsbSerialPorts();
        if (initial) {
          if (!uiAutoReconnectCheckbox.checked || grantedDevices.length === 0) {
            return false;
          }

          // Connect to the device that was saved to localStorage otherwise use the first one
          const savedPortInfo = JSON.parse(localStorage.getItem('webUSBSerialPort'));
          if (savedPortInfo) {
            for (const device of grantedDevices) {
              if (device._device.vendorId === savedPortInfo.vendorId && device._device.productId === savedPortInfo.productId) {
                this.currentPort = device;
                break;
              }
            }
          }
          if (!this.currentPort) {
            this.currentPort = grantedDevices[0];
          }

          this.setStatus('Connecting to first device...', 'info');
        } else {
          // Prompt the user to select a device
          this.setStatus('Requesting device...', 'info');
          this.currentPort = await serial.requestWebUsbSerialPort();
          first_time_connection = true;
        }

        this.currentPort.onReceiveError = error => this.onReceiveError(error);
        this.currentPort.onReceive = dataView => this.onReceive(dataView);

        try {
          this.updateUIConnectionState(true);
          await this.currentPort.connect();

          // save the port to localStorage
          const portInfo = {
            vendorId: this.currentPort._device.vendorId,
            productId: this.currentPort._device.productId,
          }
          localStorage.setItem('webUSBSerialPort', JSON.stringify(portInfo));

          this.setStatus('Connected', 'info');
          uiCommandLineInput.focus();
        } catch (error) {
          if (first_time_connection) {
            // Forget the device if a first time connection fails
            await this.currentPort.forgetDevice();
            this.currentPort = null;
          }
          throw error;
        } finally {
          this.updateUIConnectionState();
        }

        this.updateUIConnectionState();
      } catch (error) {
        this.setStatus(`Connection failed: ${error.message}`, 'error');
      }
    }

    async reconnectPort() {
      if (this.currentPort) {
        this.setStatus('Reconnecting...', 'info');
        try {
          await this.currentPort.connect();
          this.setStatus('Reconnected', 'info');
        } catch (error) {
          this.setStatus(`Reconnect failed: ${error.message}`, 'error');
        } finally {
          this.updateUIConnectionState();
        }
      }
      this.updateUIConnectionState();
    }

    async forgetPort() {
      this.stopAutoReconnect();
      if (this.currentPort) {
        await this.currentPort.forgetDevice();
        this.currentPort = null;
        this.setStatus('Device forgotten', 'info');
      } else {
        this.setStatus('No device to forget', 'error');
      }
      this.updateUIConnectionState();
    }

    async forgetAllPorts() {
      this.stopAutoReconnect();
      await this.forgetPort();
      if (serial.isWebUsbSupported()) {
        let ports = await serial.getWebUsbSerialPorts();
        for (const p of ports) {
          await p.forgetDevice();
        }
      }
      this.updateUIConnectionState();
    }

    setNewlineMode() {
      localStorage.setItem('newlineMode', uiNewlineModeSelect.value);
    }

    autoReconnectChanged() {
      if (uiAutoReconnectCheckbox.checked) {
        this.setStatus('Auto-reconnect enabled', 'info');
        this.tryAutoReconnect();
      } else {
        this.setStatus('Auto-reconnect disabled', 'info');
        this.stopAutoReconnect();
      }
      localStorage.setItem('autoReconnect', uiAutoReconnectCheckbox.checked);
    }

    stopAutoReconnect() {
      if (this.reconnectTimeoutId !== null) {
        clearTimeout(this.reconnectTimeoutId);
        this.reconnectTimeoutId = null;
        this.setStatus('Auto-reconnect stopped.', 'info');
      }
    }

    async autoReconnectTimeout() {
        this.reconnectTimeoutId = null;
        if (!uiAutoReconnectCheckbox.checked) {
          this.setStatus('Auto-reconnect stopped.', 'info');
          return;
        }
        if (this.currentPort && !this.currentPort.isConnected) {
          try {
            await this.currentPort.connect();
            this.setStatus('Reconnected successfully', 'info');
          } catch (error) {
            this.setStatus(`Reconnect failed: ${error.message}`, 'error');
            // Try again after a delay
            this.tryAutoReconnect();
          } finally {
            this.updateUIConnectionState();
          }
        }
    }

    tryAutoReconnect() {
      this.updateUIConnectionState();
      if (!uiAutoReconnectCheckbox.checked) return;
      if (this.reconnectTimeoutId !== null) return; // already trying
      this.setStatus('Attempting to auto-reconnect...', 'info');
      this.reconnectTimeoutId = setTimeout(async () => {
        await this.autoReconnectTimeout();
      }, 1000);
    }

    async handleCommandLineInput(e) {
      // Instant mode: send key immediately including special keys like Backspace, arrows, enter, etc.
      if (this.sendMode === 'instant') {
        e.preventDefault();

        // Ignore only pure modifier keys without text representation
        if (e.key.length === 1 ||
          e.key === 'Enter' ||
          e.key === 'Backspace' ||
          e.key === 'Tab' ||
          e.key === 'Escape' ||
          e.key === 'Delete' ) {

          let sendText = '';
          switch (e.key) {
            case 'Enter':
              switch (uiNewlineModeSelect.value) {
                case 'CR': sendText = '\r'; break;
                case 'CRLF': sendText = '\r\n'; break;
                default: sendText = '\n'; break;
              }
              break;
            case 'Backspace':
              // Usually no straightforward char to send for Backspace,
              // but often ASCII DEL '\x7F' or '\b' (0x08) is sent.
              sendText = '\x08'; // backspace
              break;
            case 'Tab':
              sendText = '\t';
              break;
            case 'Escape':
              // Ignore or send ESC control char if needed
              sendText = '\x1B';
              break;
            case 'Delete':
              sendText = '\x7F'; // DEL char
              break;
            default:
              sendText = e.key;
          }
          try {
            await this.currentPort.send(this.textEncoder.encode(sendText));
          } catch (error) {
            this.setStatus(`Send error: ${error.message}`, 'error');
            this.tryAutoReconnect();
          }
        }

        return;
      }

      // Command mode: handle up/down arrow keys for history
      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.preventDefault();
        if (this.commandHistory.length === 0) return;
        if (e.key === 'ArrowUp') {
          if (this.uiCommandHistoryIndex === -1) this.uiCommandHistoryIndex = this.commandHistory.length - 1;
          else if (this.uiCommandHistoryIndex > 0) this.uiCommandHistoryIndex--;
        } else if (e.key === 'ArrowDown') {
          if (this.uiCommandHistoryIndex !== -1) this.uiCommandHistoryIndex++;
          if (this.uiCommandHistoryIndex >= this.commandHistory.length) this.uiCommandHistoryIndex = -1;
        }
        uiCommandLineInput.value = this.uiCommandHistoryIndex === -1 ? '' : this.commandHistory[this.uiCommandHistoryIndex].text;
        return;
      }

      if (e.key !== 'Enter' || !this.currentPort.isConnected) return;
      e.preventDefault();
      const text = uiCommandLineInput.value;
      if (!text) return;

      // Convert to Uint8Array with newline based on config
      let sendText = text;
      switch (uiNewlineModeSelect.value) {
        case 'CR':
          sendText += '\r';
          break;
        case 'CRLF':
          sendText += '\r\n';
          break;
        case 'ANY':
          sendText += '\n';
          break;
      }
      const data = this.textEncoder.encode(sendText);

      try {
        await this.currentPort.send(data);
        this.uiCommandHistoryIndex = -1;
        let history_cmd_text = sendText.replace(/[\r\n]+$/, '');
        let history_entry = new CommandHistoryEntry(history_cmd_text);
        this.appendNewCommandToHistory(history_entry);
        uiCommandLineInput.value = '';
      } catch (error) {
        this.setStatus(`Send error: ${error.message}`, 'error');
        this.tryAutoReconnect();
      }
    }

    toggleSendMode() {
      if (this.sendMode === 'instant') {
        this.setSendMode('command');
      } else {
        this.setSendMode('instant');
      }
    }

    setSendMode(mode) {
      this.sendMode = mode;
      if (mode === 'instant') {
        uiSendModeBtn.classList.remove('send-mode-command');
        uiSendModeBtn.classList.add('send-mode-instant');
        uiSendModeBtn.textContent = 'Instant mode';
      } else {
        uiSendModeBtn.classList.remove('send-mode-instant');
        uiSendModeBtn.classList.add('send-mode-command');
        uiSendModeBtn.textContent = 'Command mode';
      }
      localStorage.setItem('sendMode', this.sendMode);
    }

    copyOutput() {
      let text = '';
      for (const entry of this.receivedData) {
        text += entry.text;
        if (entry.terminated) {
          text += '\n';
        }
      }

      if (text) {
        navigator.clipboard.writeText(text).then(() => {
          this.setStatus('Output copied to clipboard', 'info');
        }, () => {
          this.setStatus('Failed to copy output', 'error');
        });
      } else {
        this.setStatus('No output to copy', 'error');
      }
    }

    downloadOutputCsv() {
      // save <iso_date_time>,<received_line>
      let csvContent = 'data:text/csv;charset=utf-8,';
      for (const entry of this.receivedData) {
        let sanitizedText = entry.text.replace(/"/g, '""').replace(/[\r\n]+$/, '');
        let line = new Date(entry.time).toISOString() + ',"' + sanitizedText + '"';
        csvContent += line + '\n';
      }

      const encodedUri = encodeURI(csvContent);
      const link = document.createElement('a');
      link.setAttribute('href', encodedUri);
      const filename = new Date().toISOString().replace(/:/g, '-') + '_tinyusb_received_serial_data.csv';
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    async resetAll() {
      await this.forgetAllPorts();

      // Clear localStorage
      localStorage.clear();

      // reload the page
      window.location.reload();
    }
  }

  const app = new Application();
})()