Function SerialConnectModal

components/SerialConnectModal.tsx:49–455

({
  open,
  onClose,
  onConnect,
  onSaveHost,
})

const FLOW_CONTROL_OPTIONS: SerialFlowControl[] = ['none', 'xon/xoff', 'rts/cts'];

export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
  open,
  onClose,
  onConnect,
  onSaveHost,
}) => {
  const { t } = useI18n();
  const [ports, setPorts] = useState<SerialPort[]>([]);
  const [isLoadingPorts, setIsLoadingPorts] = useState(false);
  const [showAdvanced, setShowAdvanced] = useState(false);

  // Form state
  const [selectedPort, setSelectedPort] = useState('');
  const [baudRate, setBaudRate] = useState(115200);
  const [dataBits, setDataBits] = useState<5 | 6 | 7 | 8>(8);
  const [stopBits, setStopBits] = useState<1 | 1.5 | 2>(1);
  const [parity, setParity] = useState<SerialParity>('none');
  const [flowControl, setFlowControl] = useState<SerialFlowControl>('none');
  const [localEcho, setLocalEcho] = useState(false);
  const [lineMode, setLineMode] = useState(false);
  const [charset, setCharset] = useState('UTF-8');

  // Save configuration state
  const [saveConfig, setSaveConfig] = useState(false);
  const [configLabel, setConfigLabel] = useState('');

  const terminalBackend = useTerminalBackend();

  const loadPorts = useCallback(async () => {
    setIsLoadingPorts(true);
    try {
      const result = await terminalBackend.listSerialPorts();
      setPorts(result);
      // Auto-select first port if available and no port is selected
      if (result.length > 0) {
        setSelectedPort((prev) => prev || result[0].path);
      }
    } catch (err) {
      console.error('[Serial] Failed to list ports:', err);
    } finally {
      setIsLoadingPorts(false);
    }
  }, [terminalBackend]);

  useEffect(() => {
    if (open) {
      loadPorts();
    }
  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps

  // Generate a default label when port is selected
  useEffect(() => {
    if (selectedPort && !configLabel) {
      const portName = selectedPort.split('/').pop() || selectedPort;
      setConfigLabel(`Serial: ${portName}`);
    }
  }, [selectedPort, configLabel]);