feat: monitor connection status

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

arduino-ide-extension/src/browser/monitor-manager-proxy-client-impl.ts

@@ -6,6 +6,7 @@ import {
   MessageService,
   nls,
 } from '@theia/core';
+import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { Board, Port } from '../common/protocol';
 import {
@@ -88,6 +89,9 @@ export class MonitorManagerProxyClientImpl
       return;
     }
 
+    const opened = new Deferred<void>();
+    this.webSocket.onopen = () => opened.resolve();
+    this.webSocket.onerror = () => opened.reject();
     this.webSocket.onmessage = (message) => {
       const parsedMessage = JSON.parse(message.data);
       if (Array.isArray(parsedMessage))
@@ -100,6 +104,7 @@ export class MonitorManagerProxyClientImpl
       }
     };
     this.wsPort = addressPort;
+    return opened.promise;
   }
 
   /**

arduino-ide-extension/src/browser/monitor-model.ts

@@ -4,7 +4,13 @@ import {
   LocalStorageService,
 } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { MonitorManagerProxyClient } from '../common/protocol';
+import {
+  MonitorConnectionStatus,
+  monitorConnectionStatusEquals,
+  MonitorEOL,
+  MonitorManagerProxyClient,
+  MonitorState,
+} from '../common/protocol';
 import { isNullOrUndefined } from '../common/utils';
 import { MonitorSettings } from '../node/monitor-settings/monitor-settings-provider';
 
@@ -19,48 +25,48 @@ export class MonitorModel implements FrontendApplicationContribution {
   protected readonly monitorManagerProxy: MonitorManagerProxyClient;
 
   protected readonly onChangeEmitter: Emitter<
-    MonitorModel.State.Change<keyof MonitorModel.State>
+    MonitorState.Change<keyof MonitorState>
   >;
 
   protected _autoscroll: boolean;
   protected _timestamp: boolean;
-  protected _lineEnding: MonitorModel.EOL;
+  protected _lineEnding: MonitorEOL;
   protected _interpolate: boolean;
   protected _darkTheme: boolean;
   protected _wsPort: number;
   protected _serialPort: string;
-  protected _connected: boolean;
+  protected _connectionStatus: MonitorConnectionStatus;
 
   constructor() {
     this._autoscroll = true;
     this._timestamp = false;
     this._interpolate = false;
-    this._lineEnding = MonitorModel.EOL.DEFAULT;
+    this._lineEnding = MonitorEOL.DEFAULT;
     this._darkTheme = false;
     this._wsPort = 0;
     this._serialPort = '';
-    this._connected = false;
+    this._connectionStatus = 'not-connected';
 
     this.onChangeEmitter = new Emitter<
-      MonitorModel.State.Change<keyof MonitorModel.State>
+      MonitorState.Change<keyof MonitorState>
     >();
   }
 
   onStart(): void {
     this.localStorageService
-      .getData<MonitorModel.State>(MonitorModel.STORAGE_ID)
+      .getData<MonitorState>(MonitorModel.STORAGE_ID)
       .then(this.restoreState.bind(this));
 
     this.monitorManagerProxy.onMonitorSettingsDidChange(
       this.onMonitorSettingsDidChange.bind(this)
     );
   }
 
-  get onChange(): Event<MonitorModel.State.Change<keyof MonitorModel.State>> {
+  get onChange(): Event<MonitorState.Change<keyof MonitorState>> {
     return this.onChangeEmitter.event;
   }
 
-  protected restoreState(state: MonitorModel.State): void {
+  protected restoreState(state: MonitorState): void {
     if (!state) {
       return;
     }
@@ -125,11 +131,11 @@ export class MonitorModel implements FrontendApplicationContribution {
     this.timestamp = !this._timestamp;
   }
 
-  get lineEnding(): MonitorModel.EOL {
+  get lineEnding(): MonitorEOL {
     return this._lineEnding;
   }
 
-  set lineEnding(lineEnding: MonitorModel.EOL) {
+  set lineEnding(lineEnding: MonitorEOL) {
     if (lineEnding === this._lineEnding) return;
     this._lineEnding = lineEnding;
     this.monitorManagerProxy.changeSettings({
@@ -211,19 +217,26 @@ export class MonitorModel implements FrontendApplicationContribution {
     );
   }
 
-  get connected(): boolean {
-    return this._connected;
+  get connectionStatus(): MonitorConnectionStatus {
+    return this._connectionStatus;
   }
 
-  set connected(connected: boolean) {
-    if (connected === this._connected) return;
-    this._connected = connected;
+  set connectionStatus(connectionStatus: MonitorConnectionStatus) {
+    if (
+      monitorConnectionStatusEquals(connectionStatus, this.connectionStatus)
+    ) {
+      return;
+    }
+    this._connectionStatus = connectionStatus;
     this.monitorManagerProxy.changeSettings({
-      monitorUISettings: { connected },
+      monitorUISettings: {
+        connectionStatus,
+        connected: connectionStatus === 'connected', // TODO check if needed
+      },
     });
     this.onChangeEmitter.fire({
-      property: 'connected',
-      value: this._connected,
+      property: 'connectionStatus',
+      value: this._connectionStatus,
     });
   }
 
@@ -238,7 +251,7 @@ export class MonitorModel implements FrontendApplicationContribution {
       darkTheme,
       wsPort,
       serialPort,
-      connected,
+      connectionStatus,
     } = monitorUISettings;
 
     if (!isNullOrUndefined(autoscroll)) this.autoscroll = autoscroll;
@@ -248,31 +261,7 @@ export class MonitorModel implements FrontendApplicationContribution {
     if (!isNullOrUndefined(darkTheme)) this.darkTheme = darkTheme;
     if (!isNullOrUndefined(wsPort)) this.wsPort = wsPort;
     if (!isNullOrUndefined(serialPort)) this.serialPort = serialPort;
-    if (!isNullOrUndefined(connected)) this.connected = connected;
+    if (!isNullOrUndefined(connectionStatus))
+      this.connectionStatus = connectionStatus;
   };
 }
-
-// TODO: Move this to /common
-export namespace MonitorModel {
-  export interface State {
-    autoscroll: boolean;
-    timestamp: boolean;
-    lineEnding: EOL;
-    interpolate: boolean;
-    darkTheme: boolean;
-    wsPort: number;
-    serialPort: string;
-    connected: boolean;
-  }
-  export namespace State {
-    export interface Change<K extends keyof State> {
-      readonly property: K;
-      readonly value: State[K];
-    }
-  }
-
-  export type EOL = '' | '\n' | '\r' | '\r\n';
-  export namespace EOL {
-    export const DEFAULT: EOL = '\n';
-  }
-}

arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx

@@ -13,7 +13,10 @@ import { SerialMonitorSendInput } from './serial-monitor-send-input';
 import { SerialMonitorOutput } from './serial-monitor-send-output';
 import { BoardsServiceProvider } from '../../boards/boards-service-provider';
 import { nls } from '@theia/core/lib/common';
-import { MonitorManagerProxyClient } from '../../../common/protocol';
+import {
+  MonitorEOL,
+  MonitorManagerProxyClient,
+} from '../../../common/protocol';
 import { MonitorModel } from '../../monitor-model';
 import { MonitorSettings } from '../../../node/monitor-settings/monitor-settings-provider';
 
@@ -132,7 +135,7 @@ export class MonitorWidget extends ReactWidget {
     );
   };
 
-  protected get lineEndings(): SerialMonitorOutput.SelectOption<MonitorModel.EOL>[] {
+  protected get lineEndings(): SerialMonitorOutput.SelectOption<MonitorEOL>[] {
     return [
       {
         label: nls.localize('arduino/serial/noLineEndings', 'No Line Ending'),
@@ -166,6 +169,7 @@ export class MonitorWidget extends ReactWidget {
   }
 
   protected render(): React.ReactNode {
+    debugger;
     const baudrate = this.settings?.pluggableMonitorSettings
       ? this.settings.pluggableMonitorSettings.baudrate
       : undefined;
@@ -234,7 +238,7 @@ export class MonitorWidget extends ReactWidget {
   }
 
   protected readonly onChangeLineEnding = (
-    option: SerialMonitorOutput.SelectOption<MonitorModel.EOL>
+    option: SerialMonitorOutput.SelectOption<MonitorEOL>
   ): void => {
     this.monitorModel.lineEnding = option.value;
   };

arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx

@@ -5,6 +5,10 @@ import { DisposableCollection, nls } from '@theia/core/lib/common';
 import { BoardsServiceProvider } from '../../boards/boards-service-provider';
 import { MonitorModel } from '../../monitor-model';
 import { Unknown } from '../../../common/nls';
+import {
+  isMonitorConnectionError,
+  MonitorConnectionStatus,
+} from '../../../common/protocol';
 
 class HistoryList {
   private readonly items: string[] = [];
@@ -62,7 +66,7 @@ export namespace SerialMonitorSendInput {
   }
   export interface State {
     text: string;
-    connected: boolean;
+    connectionStatus: MonitorConnectionStatus;
     history: HistoryList;
   }
 }
@@ -75,18 +79,27 @@ export class SerialMonitorSendInput extends React.Component<
 
   constructor(props: Readonly<SerialMonitorSendInput.Props>) {
     super(props);
-    this.state = { text: '', connected: true, history: new HistoryList() };
+    this.state = {
+      text: '',
+      connectionStatus: 'not-connected',
+      history: new HistoryList(),
+    };
     this.onChange = this.onChange.bind(this);
     this.onSend = this.onSend.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
   override componentDidMount(): void {
-    this.setState({ connected: this.props.monitorModel.connected });
+    this.setState({
+      connectionStatus: this.props.monitorModel.connectionStatus,
+    });
     this.toDisposeBeforeUnmount.push(
       this.props.monitorModel.onChange(({ property }) => {
-        if (property === 'connected')
-          this.setState({ connected: this.props.monitorModel.connected });
+        if (property === 'connected' || property === 'connectionStatus') {
+          this.setState({
+            connectionStatus: this.props.monitorModel.connectionStatus,
+          });
+        }
       })
     );
   }
@@ -97,44 +110,72 @@ export class SerialMonitorSendInput extends React.Component<
   }
 
   override render(): React.ReactNode {
+    const inputClassName = this.inputClassName;
+    const placeholder = this.placeholder;
     return (
       <input
         ref={this.setRef}
         type="text"
-        className={`theia-input ${this.shouldShowWarning() ? 'warning' : ''}`}
-        placeholder={this.placeholder}
+        className={`theia-input ${inputClassName}`}
+        readOnly={Boolean(inputClassName)}
+        placeholder={placeholder}
+        title={placeholder}
         value={this.state.text}
         onChange={this.onChange}
         onKeyDown={this.onKeyDown}
       />
     );
   }
 
+  private get inputClassName(): 'error' | 'warning' | '' {
+    const status = this.state.connectionStatus;
+    if (isMonitorConnectionError(status)) {
+      return 'error';
+    }
+    if (status === 'connected') {
+      return '';
+    }
+    return 'warning';
+  }
+
   protected shouldShowWarning(): boolean {
     const board = this.props.boardsServiceProvider.boardsConfig.selectedBoard;
     const port = this.props.boardsServiceProvider.boardsConfig.selectedPort;
-    return !this.state.connected || !board || !port;
+    return !this.state.connectionStatus || !board || !port;
   }
 
   protected get placeholder(): string {
-    if (this.shouldShowWarning()) {
+    const status = this.state.connectionStatus;
+    if (isMonitorConnectionError(status)) {
+      return status.errorMessage;
+    }
+    if (status === 'not-connected') {
       return nls.localize(
         'arduino/serial/notConnected',
         'Not connected. Select a board and a port to connect automatically.'
       );
     }
-
     const board = this.props.boardsServiceProvider.boardsConfig.selectedBoard;
     const port = this.props.boardsServiceProvider.boardsConfig.selectedPort;
+    const boardLabel = board
+      ? Board.toString(board, {
+          useFqbn: false,
+        })
+      : Unknown;
+    const portLabel = port ? port.address : Unknown;
+    if (status === 'connecting') {
+      return nls.localize(
+        'arduino/serial/connecting',
+        "Connecting to '{0}' on '{1}'...",
+        boardLabel,
+        portLabel
+      );
+    }
     return nls.localize(
       'arduino/serial/message',
       "Message (Enter to send message to '{0}' on '{1}')",
-      board
-        ? Board.toString(board, {
-            useFqbn: false,
-          })
-        : Unknown,
-      port ? port.address : Unknown
+      boardLabel,
+      portLabel
     );
   }
 

arduino-ide-extension/src/browser/style/index.css

@@ -48,22 +48,26 @@ body.theia-dark {
 }
 
 .theia-input.warning::placeholder {
-  /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: var(--theia-warningForeground);
   background-color: var(--theia-warningBackground);
-  opacity: 1; /* Firefox */
 }
 
-.theia-input.warning:-ms-input-placeholder {
-  /* Internet Explorer 10-11 */
-  color: var(--theia-warningForeground);
-  background-color: var(--theia-warningBackground);
+.theia-input.error:focus {
+  outline-width: 1px;
+  outline-style: solid;
+  outline-offset: -1px;
+  opacity: 1 !important;
+  color: var(--theia-errorForeground);
+  background-color: var(--theia-errorBackground);
 }
 
-.theia-input.warning::-ms-input-placeholder {
-  /* Microsoft Edge */
-  color: var(--theia-warningForeground);
-  background-color: var(--theia-warningBackground);
+.theia-input.error {
+  background-color: var(--theia-errorBackground);
+}
+
+.theia-input.error::placeholder {
+  color: var(--theia-errorForeground);
+  background-color: var(--theia-errorBackground);
 }
 
 /* Makes the sidepanel a bit wider when opening the widget */

arduino-ide-extension/src/common/protocol/monitor-service.ts

@@ -31,7 +31,7 @@ export interface MonitorManagerProxyClient {
   onMessagesReceived: Event<{ messages: string[] }>;
   onMonitorSettingsDidChange: Event<MonitorSettings>;
   onMonitorShouldReset: Event<void>;
-  connect(addressPort: number): void;
+  connect(addressPort: number): Promise<void>;
   disconnect(): void;
   getWebSocketPort(): number | undefined;
   isWSConnected(): Promise<boolean>;
@@ -96,57 +96,65 @@ export function createConnectionFailedError(
   port: Port,
   details?: string
 ): ApplicationError<number, PortDescriptor> {
-  const { protocol, protocolLabel, address, addressLabel } = port;
-  const formattedDetails = details ? `: ${details}.` : '.';
-  return ConnectionFailedError(
-    nls.localize(
+  const { protocol, address } = port;
+  let message;
+  if (details) {
+    const detailsWithPeriod = details.endsWith('.') ? details : `${details}.`;
+    message = nls.localize(
+      'arduino/monitor/connectionFailedErrorWithDetails',
+      '{0} Could not connect to {1} {2} port.',
+      detailsWithPeriod,
+      address,
+      protocol
+    );
+  } else {
+    message = nls.localize(
       'arduino/monitor/connectionFailedError',
-      'Could not connect to {0} {1} port{2}',
-      addressLabel,
-      protocolLabel,
-      formattedDetails
-    ),
-    { protocol, address }
-  );
+      'Could not connect to {0} {1} port.',
+      address,
+      protocol
+    );
+  }
+  return ConnectionFailedError(message, { protocol, address });
 }
 export function createNotConnectedError(
   port: Port
 ): ApplicationError<number, PortDescriptor> {
-  const { protocol, protocolLabel, address, addressLabel } = port;
+  const { protocol, address } = port;
   return NotConnectedError(
     nls.localize(
       'arduino/monitor/notConnectedError',
       'Not connected to {0} {1} port.',
-      addressLabel,
-      protocolLabel
+      address,
+      protocol
     ),
     { protocol, address }
   );
 }
 export function createAlreadyConnectedError(
   port: Port
 ): ApplicationError<number, PortDescriptor> {
-  const { protocol, protocolLabel, address, addressLabel } = port;
+  const { protocol, address } = port;
   return AlreadyConnectedError(
     nls.localize(
       'arduino/monitor/alreadyConnectedError',
       'Could not connect to {0} {1} port. Already connected.',
-      addressLabel,
-      protocolLabel
+      address,
+      protocol
     ),
     { protocol, address }
   );
 }
 export function createMissingConfigurationError(
   port: Port
 ): ApplicationError<number, PortDescriptor> {
-  const { protocol, protocolLabel, address, addressLabel } = port;
+  const { protocol, address } = port;
   return MissingConfigurationError(
     nls.localize(
       'arduino/monitor/missingConfigurationError',
       'Could not connect to {0} {1} port. The monitor configuration is missing.',
-      addressLabel,
-      protocolLabel
+      address,
+      protocol
     ),
     { protocol, address }
   );
@@ -167,3 +175,68 @@ function createMonitorError(
     (message: string, data: PortDescriptor) => ({ data, message })
   );
 }
+
+export interface MonitorConnectionError {
+  readonly errorMessage: string;
+}
+
+export type MonitorConnectionStatus =
+  | 'connecting'
+  | 'connected'
+  | 'not-connected'
+  | MonitorConnectionError;
+
+export function monitorConnectionStatusEquals(
+  left: MonitorConnectionStatus,
+  right: MonitorConnectionStatus
+): boolean {
+  if (typeof left === 'string') {
+    return typeof right === 'string' ? left === right : false;
+  }
+  return typeof right === 'object'
+    ? right.errorMessage === left.errorMessage
+    : false;
+}
+
+/**
+ * @deprecated see `MonitorState#connected`
+ * TODO: check if needed for the plotter app
+ */
+export function isMonitorConnected(
+  status: MonitorConnectionStatus
+): status is 'connected' {
+  return status === 'connected';
+}
+
+export function isMonitorConnectionError(
+  status: MonitorConnectionStatus
+): status is MonitorConnectionError {
+  return typeof status === 'object';
+}
+
+export interface MonitorState {
+  autoscroll: boolean;
+  timestamp: boolean;
+  lineEnding: MonitorEOL;
+  interpolate: boolean;
+  darkTheme: boolean;
+  wsPort: number;
+  serialPort: string;
+  connectionStatus: MonitorConnectionStatus;
+  /**
+   * @deprecated This property is never get by IDE2 only set. This value is present to be backward compatible with the plotter app.
+   * IDE2 uses `MonitorState#connectionStatus`.
+   */
+  connected: boolean;
+}
+export namespace MonitorState {
+  export interface Change<K extends keyof MonitorState> {
+    readonly property: K;
+    readonly value: MonitorState[K];
+  }
+}
+
+export type MonitorEOL = '' | '\n' | '\r' | '\r\n';
+export namespace MonitorEOL {
+  export const DEFAULT: MonitorEOL = '\n';
+}

arduino-ide-extension/src/node/monitor-manager-proxy-impl.ts

@@ -1,4 +1,5 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
+import { Disposable } from '@theia/core/lib/common/disposable';
 import {
   MonitorManagerProxy,
   MonitorManagerProxyClient,
@@ -10,6 +11,10 @@ import {
   PluggableMonitorSettings,
 } from './monitor-settings/monitor-settings-provider';
 
+export interface ConnectToClient {
+  (): Promise<Disposable>;
+}
+
 @injectable()
 export class MonitorManagerProxyImpl implements MonitorManagerProxy {
   protected client: MonitorManagerProxyClient;
@@ -40,8 +45,17 @@ export class MonitorManagerProxyImpl implements MonitorManagerProxy {
       await this.changeMonitorSettings(board, port, settings);
     }
 
-    const connectToClient = () => {
-      this.client.connect(this.manager.getWebsocketAddressPort(board, port));
+    const connectToClient = async () => {
+      const address = this.manager.getWebsocketAddressPort(board, port);
+      if (!this.client) {
+        throw new Error(
+          `No client was connected to this monitor manager. Board: ${
+            board.fqbn ?? board.name
+          }, port: ${port.address}, address: ${address}`
+        );
+      }
+      await this.client.connect(address);
+      return Disposable.create(() => this.client?.disconnect());
     };
     return this.manager.startMonitor(board, port, connectToClient);
   }

arduino-ide-extension/src/node/monitor-manager.ts

@@ -7,6 +7,7 @@ import {
   Port,
 } from '../common/protocol';
 import { CoreClientAware } from './core-client-provider';
+import { ConnectToClient } from './monitor-manager-proxy-impl';
 import { MonitorService } from './monitor-service';
 import { MonitorServiceFactory } from './monitor-service-factory';
 import {
@@ -109,7 +110,7 @@ export class MonitorManager extends CoreClientAware {
   async startMonitor(
     board: Board,
     port: Port,
-    connectToClient: () => void
+    connectToClient: ConnectToClient
   ): Promise<void> {
     const monitorID = this.monitorID(board.fqbn, port);
 
@@ -132,14 +133,15 @@ export class MonitorManager extends CoreClientAware {
       return;
     }
 
+    const disposable = await connectToClient();
     try {
       await monitor.start();
     } catch (err) {
       if (!AlreadyConnectedError.is(err)) {
+        disposable.dispose();
         throw err;
       }
     }
-    await connectToClient();
   }
 
   /**
@@ -255,7 +257,7 @@ export class MonitorManager extends CoreClientAware {
 
     for (const {
       monitorID,
-      serviceStartParams: [_, port],
+      serviceStartParams: [, port],
       connectToClient,
     } of queued) {
       const boardsState = await this.boardsService.getState();
@@ -271,7 +273,7 @@ export class MonitorManager extends CoreClientAware {
 
         if (monitorService) {
           await monitorService.start();
-          await connectToClient();
+          connectToClient();
         }
       }
     }

arduino-ide-extension/src/node/monitor-service.ts

@@ -16,6 +16,7 @@ import {
   createMissingConfigurationError,
   createNotConnectedError,
   createConnectionFailedError,
+  isMonitorConnected,
 } from '../common/protocol';
 import {
   EnumerateMonitorPortSettingsRequest,
@@ -181,20 +182,32 @@ export class MonitorService extends CoreClientAware implements Disposable {
     this.creating = new Deferred();
     if (this.duplex) {
       this.updateClientsSettings({
-        monitorUISettings: { connected: true, serialPort: this.port.address },
+        monitorUISettings: {
+          connectionStatus: 'connected',
+          connected: true,
+          serialPort: this.port.address,
+        },
       });
       this.creating.reject(createAlreadyConnectedError(this.port));
       return this.creating.promise;
     }
 
     if (!this.board?.fqbn || !this.port?.address || !this.port?.protocol) {
-      this.updateClientsSettings({ monitorUISettings: { connected: false } });
+      this.updateClientsSettings({
+        monitorUISettings: {
+          connectionStatus: 'not-connected',
+          connected: false,
+        },
+      });
 
       this.creating.reject(createMissingConfigurationError(this.port));
       return this.creating.promise;
     }
 
     this.logger.info('starting monitor');
+    this.updateClientsSettings({
+      monitorUISettings: { connectionStatus: 'connecting' },
+    });
 
     // get default monitor settings from the CLI
     const defaultSettings = await this.portMonitorSettings(
@@ -253,22 +266,30 @@ export class MonitorService extends CoreClientAware implements Disposable {
         `started monitor to ${this.port?.address} using ${this.port?.protocol}`
       );
       this.updateClientsSettings({
-        monitorUISettings: { connected: true, serialPort: this.port.address },
+        monitorUISettings: {
+          connectionStatus: 'connected',
+          connected: true,
+          serialPort: this.port.address,
+        },
       });
       this.creating.resolve();
       return this.creating.promise;
     } catch (err) {
       this.logger.warn(
         `failed starting monitor to ${this.port?.address} using ${this.port?.protocol}`
       );
-      this.creating.reject(
-        ApplicationError.is(err)
-          ? err
-          : createConnectionFailedError(
-              this.port,
-              err instanceof Error ? err.message : String(err)
-            )
-      );
+      const appError = ApplicationError.is(err)
+        ? err
+        : createConnectionFailedError(
+            this.port,
+            err instanceof Error ? err.message : String(err)
+          );
+      this.creating.reject(appError);
+      this.updateClientsSettings({
+        monitorUISettings: {
+          connectionStatus: { errorMessage: appError.message },
+        },
+      });
       return this.creating.promise;
     }
   }
@@ -287,19 +308,23 @@ export class MonitorService extends CoreClientAware implements Disposable {
     // default handlers
     duplex
       .on('close', () => {
-        this.duplex = null;
-        this.updateClientsSettings({
-          monitorUISettings: { connected: false },
-        });
+        if (duplex === this.duplex) {
+          this.duplex = null;
+          this.updateClientsSettings({
+            monitorUISettings: { connected: false },
+          });
+        }
         this.logger.info(
           `monitor to ${this.port?.address} using ${this.port?.protocol} closed by client`
         );
       })
       .on('end', () => {
-        this.duplex = null;
-        this.updateClientsSettings({
-          monitorUISettings: { connected: false },
-        });
+        if (duplex === this.duplex) {
+          this.duplex = null;
+          this.updateClientsSettings({
+            monitorUISettings: { connected: false },
+          });
+        }
         this.logger.info(
           `monitor to ${this.port?.address} using ${this.port?.protocol} closed by server`
         );
@@ -369,7 +394,7 @@ export class MonitorService extends CoreClientAware implements Disposable {
         WRITE_TO_STREAM_TIMEOUT_MS,
         nls.localize(
           'arduino/monitor/connectionTimeout',
-          "Timeout. The IDE has not received the 'success' message from the monitor after successfully connecting to it."
+          "Timeout. The IDE has not received the 'success' message from the monitor after successfully connecting to it"
         )
       ),
     ]) as Promise<unknown> as Promise<void>;
@@ -512,11 +537,15 @@ export class MonitorService extends CoreClientAware implements Disposable {
       }
     }
 
+    const connectionStatus = Boolean(this.duplex)
+      ? 'connected'
+      : 'not-connected';
     this.updateClientsSettings({
       monitorUISettings: {
         ...settings.monitorUISettings,
-        connected: !!this.duplex,
+        connectionStatus,
         serialPort: this.port.address,
+        connected: isMonitorConnected(connectionStatus),
       },
       pluggableMonitorSettings: reconciledSettings,
     });
@@ -674,6 +703,15 @@ export class MonitorService extends CoreClientAware implements Disposable {
 
   updateClientsSettings(settings: MonitorSettings): void {
     this.settings = { ...this.settings, ...settings };
+    if (
+      settings.monitorUISettings?.connectionStatus &&
+      !('connected' in settings.monitorUISettings)
+    ) {
+      // Make sure the deprecated `connected` prop is set.
+      settings.monitorUISettings.connected = isMonitorConnected(
+        settings.monitorUISettings.connectionStatus
+      );
+    }
     const command: Monitor.Message = {
       command: Monitor.MiddlewareCommand.ON_SETTINGS_DID_CHANGE,
       data: settings,

arduino-ide-extension/src/node/monitor-settings/monitor-settings-provider.ts

@@ -1,10 +1,9 @@
-import { MonitorModel } from '../../browser/monitor-model';
-import { PluggableMonitorSetting } from '../../common/protocol';
+import { MonitorState, PluggableMonitorSetting } from '../../common/protocol';
 
 export type PluggableMonitorSettings = Record<string, PluggableMonitorSetting>;
 export interface MonitorSettings {
   pluggableMonitorSettings?: PluggableMonitorSettings;
-  monitorUISettings?: Partial<MonitorModel.State>;
+  monitorUISettings?: Partial<MonitorState>;
 }
 
 export const MonitorSettingsProvider = Symbol('MonitorSettingsProvider');

i18n/en.json

@@ -329,8 +329,9 @@
     },
     "monitor": {
       "alreadyConnectedError": "Could not connect to {0} {1} port. Already connected.",
-      "connectionFailedError": "Could not connect to {0} {1} port{2}",
-      "connectionTimeout": "Timeout. The IDE has not received the 'success' message from the monitor after successfully connecting to it.",
+      "connectionFailedError": "Could not connect to {0} {1} port.",
+      "connectionFailedErrorWithDetails": "{0} Could not connect to {1} {2} port.",
+      "connectionTimeout": "Timeout. The IDE has not received the 'success' message from the monitor after successfully connecting to it",
       "missingConfigurationError": "Could not connect to {0} {1} port. The monitor configuration is missing.",
       "notConnectedError": "Not connected to {0} {1} port.",
       "unableToCloseWebSocket": "Unable to close websocket",
@@ -413,6 +414,7 @@
     "serial": {
       "autoscroll": "Autoscroll",
       "carriageReturn": "Carriage Return",
+      "connecting": "Connecting to '{0}' on '{1}'...",
       "message": "Message (Enter to send message to '{0}' on '{1}')",
       "newLine": "New Line",
       "newLineCarriageReturn": "Both NL & CR",