chore: Updated to the next version after release.

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
         '.browser_modules/*',
         'docs/*',
         'scripts/*',
-        'electron/*',
         'electron-app/*',
         'plugins/*',
         'arduino-ide-extension/src/node/cli-protocol',

.github/label-configuration-files/labels.yml

@@ -7,6 +7,9 @@
 - name: "topic: CLI"
   color: "00ffff"
   description: Related to Arduino CLI
+- name: "topic: cloud"
+  color: "00ffff"
+  description: Related to Arduino Cloud and cloud sketches
 - name: "topic: debugger"
   color: "00ffff"
   description: Related to the integrated debugger

.github/workflows/build.yml

@@ -29,7 +29,7 @@ on:
 
 env:
   # See vars.GO_VERSION field of https://github.com/arduino/arduino-cli/blob/master/DistTasks.yml
-  GO_VERSION: "1.17"
+  GO_VERSION: "1.19"
   JOB_TRANSFER_ARTIFACT: build-artifacts
   CHANGELOG_ARTIFACTS: changelog
 
@@ -43,7 +43,7 @@ jobs:
             certificate-secret: WINDOWS_SIGNING_CERTIFICATE_PFX # Name of the secret that contains the certificate.
             certificate-password-secret: WINDOWS_SIGNING_CERTIFICATE_PASSWORD # Name of the secret that contains the certificate password.
             certificate-extension: pfx  # File extension for the certificate.
-          - os: ubuntu-18.04 # https://github.com/arduino/arduino-ide/issues/259
+          - os: ubuntu-20.04
           - os: macos-latest
             # APPLE_SIGNING_CERTIFICATE_P12 secret was produced by following the procedure from:
             # https://www.kencochrane.com/2020/08/01/build-and-sign-golang-binaries-for-macos-with-github-actions/#exporting-the-developer-certificate
@@ -69,7 +69,7 @@ jobs:
           python-version: '3.x'
 
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -99,6 +99,7 @@ jobs:
             export CSC_LINK="${{ runner.temp }}/signing_certificate.${{ matrix.config.certificate-extension }}"
             echo "${{ secrets[matrix.config.certificate-secret] }}" | base64 --decode > "$CSC_LINK"
             export CSC_KEY_PASSWORD="${{ secrets[matrix.config.certificate-password-secret] }}"
+            export CSC_FOR_PULL_REQUEST=true
           fi
 
           if [ "${{ runner.OS }}" = "Windows" ]; then
@@ -180,10 +181,14 @@ jobs:
             fi
           fi
           echo -e "$BODY"
-          OUTPUT_SAFE_BODY="${BODY//'%'/'%25'}"
-          OUTPUT_SAFE_BODY="${OUTPUT_SAFE_BODY//$'\n'/'%0A'}"
-          OUTPUT_SAFE_BODY="${OUTPUT_SAFE_BODY//$'\r'/'%0D'}"
-          echo "BODY=$OUTPUT_SAFE_BODY" >> $GITHUB_OUTPUT
+
+          # Set workflow step output
+          # See: https://docs.github.com/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
+          DELIMITER="$RANDOM"
+          echo "BODY<<$DELIMITER" >> $GITHUB_OUTPUT
+          echo "$BODY" >> $GITHUB_OUTPUT
+          echo "$DELIMITER" >> $GITHUB_OUTPUT
+
           echo "$BODY" > CHANGELOG.txt
 
       - name: Upload Changelog [GitHub Actions]
@@ -231,7 +236,7 @@ jobs:
           echo "TAG_NAME=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
 
       - name: Publish Release [GitHub]
-        uses: svenstaro/upload-release-action@2.3.0
+        uses: svenstaro/upload-release-action@2.5.0
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           release_name: ${{ steps.tag_name.outputs.TAG_NAME }}
@@ -240,6 +245,15 @@ jobs:
           file_glob: true
           body: ${{ needs.changelog.outputs.BODY }}
 
+      # Temporary measure to prevent release update offers before the manually produced builds are uploaded.
+      # The step must be removed once fully automated builds are regained.
+      - name: Remove "channel update info files" related to manual builds
+        run: |
+          # See: https://github.com/arduino/arduino-ide/issues/2018
+          rm "${{ env.JOB_TRANSFER_ARTIFACT }}/stable-linux.yml"
+          # See: https://github.com/arduino/arduino-ide/issues/408
+          rm "${{ env.JOB_TRANSFER_ARTIFACT }}/stable-mac.yml"
+
       - name: Publish Release [S3]
         if: github.repository == 'arduino/arduino-ide'
         uses: docker://plugins/s3

.github/workflows/check-certificates.yml

@@ -59,7 +59,9 @@ jobs:
           (
             openssl pkcs12 \
               -in "${{ env.CERTIFICATE_PATH }}" \
-              -noout -passin env:CERTIFICATE_PASSWORD
+              -legacy \
+              -noout \
+              -passin env:CERTIFICATE_PASSWORD
           ) || (
             echo "::error::Verification of ${{ matrix.certificate.identifier }} failed!!!"
             exit 1
@@ -87,6 +89,7 @@ jobs:
               openssl pkcs12 \
                 -in "${{ env.CERTIFICATE_PATH }}" \
                 -clcerts \
+                -legacy \
                 -nodes \
                 -passin env:CERTIFICATE_PASSWORD
             ) | (

.github/workflows/check-i18n-task.yml

@@ -2,7 +2,7 @@ name: Check Internationalization
 
 env:
   # See vars.GO_VERSION field of https://github.com/arduino/arduino-cli/blob/master/DistTasks.yml
-  GO_VERSION: "1.17"
+  GO_VERSION: "1.19"
 
 # See: https://docs.github.com/en/actions/reference/events-that-trigger-workflows
 on:
@@ -36,7 +36,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -48,6 +48,8 @@ jobs:
 
       - name: Install dependencies
         run: yarn
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Check for errors
         run: yarn i18n:check

.github/workflows/i18n-nightly-push.yml

@@ -2,7 +2,7 @@ name: i18n-nightly-push
 
 env:
   # See vars.GO_VERSION field of https://github.com/arduino/arduino-cli/blob/master/DistTasks.yml
-  GO_VERSION: "1.17"
+  GO_VERSION: "1.19"
 
 on:
   schedule:
@@ -23,7 +23,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: ${{ env.GO_VERSION }}
 

.github/workflows/i18n-weekly-pull.yml

@@ -2,7 +2,7 @@ name: i18n-weekly-pull
 
 env:
   # See vars.GO_VERSION field of https://github.com/arduino/arduino-cli/blob/master/DistTasks.yml
-  GO_VERSION: "1.17"
+  GO_VERSION: "1.19"
 
 on:
   schedule:
@@ -23,7 +23,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -45,7 +45,7 @@ jobs:
           TRANSIFEX_API_KEY: ${{ secrets.TRANSIFEX_API_KEY }}
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           commit-message: Updated translation files
           title: Update translation files

.github/workflows/themes-weekly-pull.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   # See vars.GO_VERSION field of https://github.com/arduino/arduino-cli/blob/master/DistTasks.yml
-  GO_VERSION: "1.17"
+  GO_VERSION: "1.19"
   NODE_VERSION: 16.x
 
 jobs:
@@ -25,7 +25,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -54,7 +54,7 @@ jobs:
         run: yarn run themes:generate
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           commit-message: Updated themes
           title: Update themes

.gitignore

@@ -4,7 +4,7 @@ node_modules/
 lib/
 downloads/
 build/
-Examples/
+arduino-ide-extension/Examples/
 !electron/build/
 src-gen/
 webpack.config.js
@@ -21,3 +21,5 @@ scripts/themes/tokens
 .env
 # content trace files for electron
 electron-app/traces
+# any Arduino LS generated log files
+inols*.log

.vscode/launch.json

@@ -14,7 +14,6 @@
         ".",
         "--log-level=debug",
         "--hostname=localhost",
-        "--no-cluster",
         "--app-project-path=${workspaceRoot}/electron-app",
         "--remote-debugging-port=9222",
         "--no-app-auto-install",
@@ -52,7 +51,6 @@
         ".",
         "--log-level=debug",
         "--hostname=localhost",
-        "--no-cluster",
         "--app-project-path=${workspaceRoot}/electron-app",
         "--remote-debugging-port=9222",
         "--no-app-auto-install",

.vscode/settings.json

@@ -2,6 +2,9 @@
   "files.exclude": {
     "**/lib": false
   },
+  "search.exclude": {
+    "arduino-ide-extension/src/test/node/__test_sketchbook__": true
+  },
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true

arduino-ide-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arduino-ide-extension",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "An extension for Theia building the Arduino IDE",
   "license": "AGPL-3.0-or-later",
   "scripts": {
@@ -17,6 +17,7 @@
     "build": "tsc && ncp ./src/node/cli-protocol/ ./lib/node/cli-protocol/ && yarn lint",
     "watch": "tsc -w",
     "test": "mocha \"./lib/test/**/*.test.js\"",
+    "test:slow": "mocha \"./lib/test/**/*.slow-test.js\" --slow 5000",
     "test:watch": "mocha --watch --watch-files lib \"./lib/test/**/*.test.js\""
   },
   "dependencies": {
@@ -52,12 +53,10 @@
     "@types/js-yaml": "^3.12.2",
     "@types/keytar": "^4.4.0",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/ncp": "^2.0.4",
     "@types/node-fetch": "^2.5.7",
     "@types/p-queue": "^2.3.1",
     "@types/ps-tree": "^1.1.0",
     "@types/react-tabs": "^2.3.2",
-    "@types/react-virtualized": "^9.21.21",
     "@types/temp": "^0.8.34",
     "@types/which": "^1.3.1",
     "@vscode/debugprotocol": "^1.51.0",
@@ -66,20 +65,25 @@
     "auth0-js": "^9.14.0",
     "btoa": "^1.2.1",
     "classnames": "^2.3.1",
+    "cpy": "^8.1.2",
+    "cross-fetch": "^3.1.5",
     "dateformat": "^3.0.3",
     "deepmerge": "2.0.1",
     "electron-updater": "^4.6.5",
+    "fast-json-stable-stringify": "^2.1.0",
     "fast-safe-stringify": "^2.1.1",
+    "filename-reserved-regex": "^2.0.0",
     "glob": "^7.1.6",
     "google-protobuf": "^3.20.1",
     "hash.js": "^1.1.7",
+    "is-online": "^9.0.1",
     "js-yaml": "^3.13.1",
+    "jsonc-parser": "^2.2.0",
     "just-diff": "^5.1.1",
     "jwt-decode": "^3.1.2",
     "keytar": "7.2.0",
     "lodash.debounce": "^4.0.8",
     "minimatch": "^3.1.2",
-    "ncp": "^2.0.0",
     "node-fetch": "^2.6.1",
     "open": "^8.0.6",
     "p-debounce": "^2.1.0",
@@ -91,7 +95,6 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-select": "^5.6.0",
     "react-tabs": "^3.1.2",
-    "react-virtualized": "^9.22.3",
     "react-window": "^1.8.6",
     "semver": "^7.3.2",
     "string-natural-compare": "^2.0.3",
@@ -117,6 +120,7 @@
     "mocha": "^7.0.0",
     "mockdate": "^3.0.5",
     "moment": "^2.24.0",
+    "ncp": "^2.0.0",
     "protoc": "^1.0.4",
     "shelljs": "^0.8.3",
     "uuid": "^3.2.1",
@@ -159,7 +163,7 @@
   ],
   "arduino": {
     "cli": {
-      "version": "0.29.0"
+      "version": "0.32.3"
     },
     "fwuploader": {
       "version": "2.2.2"
@@ -168,7 +172,7 @@
       "version": "14.0.0"
     },
     "languageServer": {
-      "version": "0.7.2"
+      "version": "0.7.4"
     }
   }
 }

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -10,10 +10,7 @@ import {
   MenuContribution,
   MenuModelRegistry,
 } from '@theia/core';
-import {
-  FrontendApplication,
-  FrontendApplicationContribution,
-} from '@theia/core/lib/browser';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
 import { CommonMenus } from '@theia/core/lib/browser/common-frontend-contribution';
@@ -77,7 +74,7 @@ export class ArduinoFrontendContribution
     }
   }
 
-  onStart(app: FrontendApplication): void {
+  onStart(): void {
     this.electronWindowPreferences.onPreferenceChanged((event) => {
       if (event.newValue !== event.oldValue) {
         switch (event.preferenceName) {
@@ -98,8 +95,6 @@ export class ArduinoFrontendContribution
         webContents.setZoomLevel(zoomLevel);
       })
     );
-    // Removes the _Settings_ (cog) icon from the left sidebar
-    app.shell.leftPanelHandler.removeBottomMenu('settings-menu');
   }
 
   registerToolbarItems(registry: TabBarToolbarRegistry): void {

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -23,7 +23,7 @@ import {
   SketchesService,
   SketchesServicePath,
 } from '../common/protocol/sketches-service';
-import { SketchesServiceClientImpl } from '../common/protocol/sketches-service-client-impl';
+import { SketchesServiceClientImpl } from './sketches-service-client-impl';
 import { CoreService, CoreServicePath } from '../common/protocol/core-service';
 import { BoardsListWidget } from './boards/boards-list-widget';
 import { BoardsListWidgetFrontendContribution } from './boards/boards-widget-frontend-contribution';
@@ -79,7 +79,10 @@ import { ProblemManager as TheiaProblemManager } from '@theia/markers/lib/browse
 import { ProblemManager } from './theia/markers/problem-manager';
 import { BoardsAutoInstaller } from './boards/boards-auto-installer';
 import { ShellLayoutRestorer } from './theia/core/shell-layout-restorer';
-import { ListItemRenderer } from './widgets/component-list/list-item-renderer';
+import {
+  ArduinoComponentContextMenuRenderer,
+  ListItemRenderer,
+} from './widgets/component-list/list-item-renderer';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 
 import {
@@ -90,6 +93,8 @@ import { EditorCommandContribution as TheiaEditorCommandContribution } from '@th
 import {
   FrontendConnectionStatusService,
   ApplicationConnectionStatusContribution,
+  DaemonPort,
+  IsOnline,
 } from './theia/core/connection-status-service';
 import {
   FrontendConnectionStatusService as TheiaFrontendConnectionStatusService,
@@ -127,7 +132,7 @@ import { PreferencesContribution as TheiaPreferencesContribution } from '@theia/
 import { PreferencesContribution } from './theia/preferences/preferences-contribution';
 import { QuitApp } from './contributions/quit-app';
 import { SketchControl } from './contributions/sketch-control';
-import { Settings } from './contributions/settings';
+import { OpenSettings } from './contributions/open-settings';
 import { WorkspaceCommandContribution } from './theia/workspace/workspace-commands';
 import { WorkspaceDeleteHandler as TheiaWorkspaceDeleteHandler } from '@theia/workspace/lib/browser/workspace-delete-handler';
 import { WorkspaceDeleteHandler } from './theia/workspace/workspace-delete-handler';
@@ -233,7 +238,6 @@ import {
   UploadFirmwareDialog,
   UploadFirmwareDialogProps,
 } from './dialogs/firmware-uploader/firmware-uploader-dialog';
-
 import { UploadCertificate } from './contributions/upload-certificate';
 import {
   ArduinoFirmwareUploader,
@@ -323,9 +327,13 @@ import { NewCloudSketch } from './contributions/new-cloud-sketch';
 import { SketchbookCompositeWidget } from './widgets/sketchbook/sketchbook-composite-widget';
 import { WindowTitleUpdater } from './theia/core/window-title-updater';
 import { WindowTitleUpdater as TheiaWindowTitleUpdater } from '@theia/core/lib/browser/window/window-title-updater';
-import { ThemeService } from './theia/core/theming';
-import { ThemeService as TheiaThemeService } from '@theia/core/lib/browser/theming';
-import { MonacoThemingService } from './theia/monaco/monaco-theming-service';
+import {
+  MonacoThemingService,
+  CleanupObsoleteThemes,
+  ThemesRegistrationSummary,
+  MonacoThemeRegistry,
+} from './theia/monaco/monaco-theming-service';
+import { MonacoThemeRegistry as TheiaMonacoThemeRegistry } from '@theia/monaco/lib/browser/textmate/monaco-theme-registry';
 import { MonacoThemingService as TheiaMonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
 import { TypeHierarchyServiceProvider } from './theia/typehierarchy/type-hierarchy-service';
 import { TypeHierarchyServiceProvider as TheiaTypeHierarchyServiceProvider } from '@theia/typehierarchy/lib/browser/typehierarchy-service';
@@ -343,6 +351,16 @@ import { DebugWidget } from '@theia/debug/lib/browser/view/debug-widget';
 import { DebugViewModel } from '@theia/debug/lib/browser/view/debug-view-model';
 import { DebugSessionWidget } from '@theia/debug/lib/browser/view/debug-session-widget';
 import { DebugConfigurationWidget } from '@theia/debug/lib/browser/view/debug-configuration-widget';
+import { ConfigServiceClient } from './config/config-service-client';
+import { ValidateSketch } from './contributions/validate-sketch';
+import { RenameCloudSketch } from './contributions/rename-cloud-sketch';
+import { CreateFeatures } from './create/create-features';
+import { Account } from './contributions/account';
+import { SidebarBottomMenuWidget } from './theia/core/sidebar-bottom-menu-widget';
+import { SidebarBottomMenuWidget as TheiaSidebarBottomMenuWidget } from '@theia/core/lib/browser/shell/sidebar-bottom-menu-widget';
+import { CreateCloudCopy } from './contributions/create-cloud-copy';
+import { FileResourceResolver } from './theia/filesystem/file-resource';
+import { FileResourceResolver as TheiaFileResourceResolver } from '@theia/filesystem/lib/browser/file-resource';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
   // Commands and toolbar items
@@ -404,6 +422,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
       )
     )
     .inSingletonScope();
+  bind(ConfigServiceClient).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(ConfigServiceClient);
 
   // Boards service
   bind(BoardsService)
@@ -479,15 +499,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(TabBarToolbarContribution).toService(MonitorViewContribution);
   bind(WidgetFactory).toDynamicValue((context) => ({
     id: MonitorWidget.ID,
-    createWidget: () => {
-      return new MonitorWidget(
-        context.container.get<MonitorModel>(MonitorModel),
-        context.container.get<MonitorManagerProxyClient>(
-          MonitorManagerProxyClient
-        ),
-        context.container.get<BoardsServiceProvider>(BoardsServiceProvider)
-      );
-    },
+    createWidget: () => context.container.get(MonitorWidget),
   }));
 
   bind(MonitorManagerProxyFactory).toFactory(
@@ -691,7 +703,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, EditContributions);
   Contribution.configure(bind, QuitApp);
   Contribution.configure(bind, SketchControl);
-  Contribution.configure(bind, Settings);
+  Contribution.configure(bind, OpenSettings);
   Contribution.configure(bind, BurnBootloader);
   Contribution.configure(bind, BuiltInExamples);
   Contribution.configure(bind, LibraryExamples);
@@ -726,6 +738,11 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, UpdateIndexes);
   Contribution.configure(bind, InterfaceScale);
   Contribution.configure(bind, NewCloudSketch);
+  Contribution.configure(bind, ValidateSketch);
+  Contribution.configure(bind, RenameCloudSketch);
+  Contribution.configure(bind, Account);
+  Contribution.configure(bind, CloudSketchbookContribution);
+  Contribution.configure(bind, CreateCloudCopy);
 
   bindContributionProvider(bind, StartupTaskProvider);
   bind(StartupTaskProvider).toService(BoardsServiceProvider); // to reuse the boards config in another window
@@ -886,6 +903,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   );
   bind(CreateApi).toSelf().inSingletonScope();
   bind(SketchCache).toSelf().inSingletonScope();
+  bind(CreateFeatures).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(CreateFeatures);
 
   bind(ShareSketchDialog).toSelf().inSingletonScope();
   bind(AuthenticationClientService).toSelf().inSingletonScope();
@@ -902,8 +921,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(CreateFsProvider).toSelf().inSingletonScope();
   bind(FrontendApplicationContribution).toService(CreateFsProvider);
   bind(FileServiceContribution).toService(CreateFsProvider);
-  bind(CloudSketchbookContribution).toSelf().inSingletonScope();
-  bind(CommandContribution).toService(CloudSketchbookContribution);
   bind(LocalCacheFsProvider).toSelf().inSingletonScope();
   bind(FileServiceContribution).toService(LocalCacheFsProvider);
   bind(CloudSketchbookCompositeWidget).toSelf();
@@ -959,11 +976,19 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   rebind(TheiaWindowTitleUpdater).toService(WindowTitleUpdater);
 
   // register Arduino themes
-  bind(ThemeService).toSelf().inSingletonScope();
-  rebind(TheiaThemeService).toService(ThemeService);
   bind(MonacoThemingService).toSelf().inSingletonScope();
   rebind(TheiaMonacoThemingService).toService(MonacoThemingService);
 
+  // workaround for themes cannot be removed after registration
+  // https://github.com/eclipse-theia/theia/issues/11151
+  bind(CleanupObsoleteThemes).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(
+    CleanupObsoleteThemes
+  );
+  bind(ThemesRegistrationSummary).toSelf().inSingletonScope();
+  bind(MonacoThemeRegistry).toSelf().inSingletonScope();
+  rebind(TheiaMonacoThemeRegistry).toService(MonacoThemeRegistry);
+
   // disable type-hierarchy support
   // https://github.com/eclipse-theia/theia/commit/16c88a584bac37f5cf3cc5eb92ffdaa541bda5be
   bind(TypeHierarchyServiceProvider).toSelf().inSingletonScope();
@@ -1004,4 +1029,18 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
       },
     }))
     .inSingletonScope();
+
+  bind(SidebarBottomMenuWidget).toSelf();
+  rebind(TheiaSidebarBottomMenuWidget).toService(SidebarBottomMenuWidget);
+
+  bind(ArduinoComponentContextMenuRenderer).toSelf().inSingletonScope();
+
+  bind(DaemonPort).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(DaemonPort);
+  bind(IsOnline).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(IsOnline);
+
+  // https://github.com/arduino/arduino-ide/issues/437
+  bind(FileResourceResolver).toSelf().inSingletonScope();
+  rebind(TheiaFileResourceResolver).toService(FileResourceResolver);
 });

arduino-ide-extension/src/browser/arduino-workspace-resolver.ts

@@ -1,68 +0,0 @@
-import { URI } from '@theia/core/shared/vscode-uri';
-import { isWindows } from '@theia/core/lib/common/os';
-import { notEmpty } from '@theia/core/lib/common/objects';
-import { MaybePromise } from '@theia/core/lib/common/types';
-
-/**
- * Class for determining the default workspace location from the
- * `location.hash`, the historical workspace locations, and recent sketch files.
- *
- * The following logic is used for determining the default workspace location:
- * - `hash` points to an existing location?
- *  - Yes
- *   - `validate location`. Is valid sketch location?
- *    - Yes
- *     - Done.
- *    - No
- *     - `try open recent workspace roots`, then `try open last modified sketches`, finally `create new sketch`.
- *  - No
- *   - `try open recent workspace roots`, then `try open last modified sketches`, finally `create new sketch`.
- */
-namespace ArduinoWorkspaceRootResolver {
-  export interface InitOptions {
-    readonly isValid: (uri: string) => MaybePromise<boolean>;
-  }
-  export interface ResolveOptions {
-    readonly hash?: string;
-    readonly recentWorkspaces: string[];
-    // Gathered from the default sketch folder. The default sketch folder is defined by the CLI.
-    readonly recentSketches: string[];
-  }
-}
-export class ArduinoWorkspaceRootResolver {
-  constructor(protected options: ArduinoWorkspaceRootResolver.InitOptions) {}
-
-  async resolve(
-    options: ArduinoWorkspaceRootResolver.ResolveOptions
-  ): Promise<{ uri: string } | undefined> {
-    const { hash, recentWorkspaces, recentSketches } = options;
-    for (const uri of [
-      this.hashToUri(hash),
-      ...recentWorkspaces,
-      ...recentSketches,
-    ].filter(notEmpty)) {
-      const valid = await this.isValid(uri);
-      if (valid) {
-        return { uri };
-      }
-    }
-    return undefined;
-  }
-
-  protected isValid(uri: string): MaybePromise<boolean> {
-    return this.options.isValid(uri);
-  }
-
-  // Note: here, the `hash` was defined as new `URI(yourValidFsPath).path` so we have to map it to a valid FS path first.
-  // This is important for Windows only and a NOOP on POSIX.
-  // Note: we set the `new URI(myValidUri).path.toString()` as the `hash`. See:
-  // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L143 and
-  // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L423
-  protected hashToUri(hash: string | undefined): string | undefined {
-    if (hash && hash.length > 1 && hash.startsWith('#')) {
-      const path = decodeURI(hash.slice(1)).replace(/\\/g, '/'); // Trim the leading `#`, decode the URI and replace Windows separators
-      return URI.file(path.slice(isWindows && hash.startsWith('/') ? 1 : 0)).toString();
-    }
-    return undefined;
-  }
-}

arduino-ide-extension/src/browser/auth/authentication-client-service.ts

@@ -83,9 +83,13 @@ export class AuthenticationClientService
   registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(CloudUserCommands.LOGIN, {
       execute: () => this.service.login(),
+      isEnabled: () => !this._session,
+      isVisible: () => !this._session,
     });
     registry.registerCommand(CloudUserCommands.LOGOUT, {
       execute: () => this.service.logout(),
+      isEnabled: () => !!this._session,
+      isVisible: () => !!this._session,
     });
   }
 

arduino-ide-extension/src/browser/auth/cloud-user-commands.ts

@@ -1,5 +1,8 @@
 import { Command } from '@theia/core/lib/common/command';
 
+export const LEARN_MORE_URL =
+  'https://docs.arduino.cc/software/ide-v2/tutorials/ide-v2-cloud-sketch-sync';
+
 export namespace CloudUserCommands {
   export const LOGIN = Command.toLocalizedCommand(
     {
@@ -16,9 +19,4 @@ export namespace CloudUserCommands {
     },
     'arduino/cloud/signOut'
   );
-
-  export const OPEN_PROFILE_CONTEXT_MENU: Command = {
-    id: 'arduino-cloud-sketchbook--open-profile-menu',
-    label: 'Contextual menu',
-  };
 }

arduino-ide-extension/src/browser/boards/boards-auto-installer.ts

@@ -174,7 +174,7 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
     // CLI returns the packages already sorted with the deprecated ones at the end of the list
     // in order to ensure the new ones are preferred
     const candidates = packagesForBoard.filter(
-      ({ installable, installedVersion }) => installable && !installedVersion
+      ({ installedVersion }) => !installedVersion
     );
 
     return candidates[0];

arduino-ide-extension/src/browser/boards/boards-config.tsx

@@ -6,6 +6,7 @@ import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import {
   Board,
   Port,
+  BoardConfig as ProtocolBoardConfig,
   BoardWithPackage,
 } from '../../common/protocol/boards-service';
 import { NotificationCenter } from '../notification-center';
@@ -18,10 +19,7 @@ import { nls } from '@theia/core/lib/common';
 import { FrontendApplicationState } from '@theia/core/lib/common/frontend-application-state';
 
 export namespace BoardsConfig {
-  export interface Config {
-    selectedBoard?: Board;
-    selectedPort?: Port;
-  }
+  export type Config = ProtocolBoardConfig;
 
   export interface Props {
     readonly boardsServiceProvider: BoardsServiceProvider;

arduino-ide-extension/src/browser/boards/boards-data-menu-updater.ts

@@ -80,16 +80,16 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
                 string,
                 Disposable & { label: string }
               >();
+              let selectedValue = '';
               for (const value of values) {
                 const id = `${fqbn}-${option}--${value.value}`;
                 const command = { id };
-                const selectedValue = value.value;
                 const handler = {
                   execute: () =>
                     this.boardsDataStore.selectConfigOption({
                       fqbn,
                       option,
-                      selectedValue,
+                      selectedValue: value.value,
                     }),
                   isToggled: () => value.selected,
                 };
@@ -100,8 +100,14 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
                     { label: value.label }
                   )
                 );
+                if (value.selected) {
+                  selectedValue = value.label;
+                }
               }
-              this.menuRegistry.registerSubmenu(menuPath, label);
+              this.menuRegistry.registerSubmenu(
+                menuPath,
+                `${label}${selectedValue ? `: "${selectedValue}"` : ''}`
+              );
               this.toDisposeOnBoardChange.pushAll([
                 ...commands.values(),
                 Disposable.create(() =>

arduino-ide-extension/src/browser/boards/boards-data-store.ts

@@ -30,11 +30,11 @@ export class BoardsDataStore implements FrontendApplicationContribution {
   @inject(LocalStorageService)
   protected readonly storageService: LocalStorageService;
 
-  protected readonly onChangedEmitter = new Emitter<void>();
+  protected readonly onChangedEmitter = new Emitter<string[]>();
 
   onStart(): void {
     this.notificationCenter.onPlatformDidInstall(async ({ item }) => {
-      let shouldFireChanged = false;
+      const dataDidChangePerFqbn: string[] = [];
       for (const fqbn of item.boards
         .map(({ fqbn }) => fqbn)
         .filter(notEmpty)
@@ -49,18 +49,18 @@ export class BoardsDataStore implements FrontendApplicationContribution {
             data = details.configOptions;
             if (data.length) {
               await this.storageService.setData(key, data);
-              shouldFireChanged = true;
+              dataDidChangePerFqbn.push(fqbn);
             }
           }
         }
       }
-      if (shouldFireChanged) {
-        this.fireChanged();
+      if (dataDidChangePerFqbn.length) {
+        this.fireChanged(...dataDidChangePerFqbn);
       }
     });
   }
 
-  get onChanged(): Event<void> {
+  get onChanged(): Event<string[]> {
     return this.onChangedEmitter.event;
   }
 
@@ -116,7 +116,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
       fqbn,
       data: { ...data, selectedProgrammer },
     });
-    this.fireChanged();
+    this.fireChanged(fqbn);
     return true;
   }
 
@@ -146,7 +146,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
       return false;
     }
     await this.setData({ fqbn, data });
-    this.fireChanged();
+    this.fireChanged(fqbn);
     return true;
   }
 
@@ -190,8 +190,8 @@ export class BoardsDataStore implements FrontendApplicationContribution {
     }
   }
 
-  protected fireChanged(): void {
-    this.onChangedEmitter.fire();
+  protected fireChanged(...fqbn: string[]): void {
+    this.onChangedEmitter.fire(fqbn);
   }
 }
 

arduino-ide-extension/src/browser/boards/boards-list-widget.ts

@@ -30,7 +30,6 @@ export class BoardsListWidget extends ListWidget<BoardsPackage, BoardSearch> {
       searchable: service,
       installable: service,
       itemLabel: (item: BoardsPackage) => item.name,
-      itemDeprecated: (item: BoardsPackage) => item.deprecated,
       itemRenderer,
       filterRenderer,
       defaultSearchOptions: { query: '', type: 'All' },

arduino-ide-extension/src/browser/boards/boards-service-provider.ts

@@ -158,15 +158,9 @@ export class BoardsServiceProvider
     this.lastAvailablePortsOnUpload = undefined;
   }
 
-  private portToAutoSelectCanBeDerived(): boolean {
-    return Boolean(
-      this.lastBoardsConfigOnUpload && this.lastAvailablePortsOnUpload
-    );
-  }
-
   attemptPostUploadAutoSelect(): void {
     setTimeout(() => {
-      if (this.portToAutoSelectCanBeDerived()) {
+      if (this.lastBoardsConfigOnUpload && this.lastAvailablePortsOnUpload) {
         this.attemptAutoSelect({
           ports: this._availablePorts,
           boards: this._availableBoards,
@@ -185,12 +179,12 @@ export class BoardsServiceProvider
   private deriveBoardConfigToAutoSelect(
     newState: AttachedBoardsChangeEvent['newState']
   ): void {
-    if (!this.portToAutoSelectCanBeDerived()) {
+    if (!this.lastBoardsConfigOnUpload || !this.lastAvailablePortsOnUpload) {
       this.boardConfigToAutoSelect = undefined;
       return;
     }
 
-    const oldPorts = this.lastAvailablePortsOnUpload!;
+    const oldPorts = this.lastAvailablePortsOnUpload;
     const { ports: newPorts, boards: newBoards } = newState;
 
     const appearedPorts =
@@ -205,20 +199,39 @@ export class BoardsServiceProvider
         Port.sameAs(board.port, port)
       );
 
-      const lastBoardsConfigOnUpload = this.lastBoardsConfigOnUpload!;
+      const lastBoardsConfigOnUpload = this.lastBoardsConfigOnUpload;
 
-      if (
-        boardOnAppearedPort &&
-        lastBoardsConfigOnUpload.selectedBoard &&
-        Board.sameAs(
+      if (boardOnAppearedPort && lastBoardsConfigOnUpload.selectedBoard) {
+        const boardIsSameHardware = Board.hardwareIdEquals(
           boardOnAppearedPort,
           lastBoardsConfigOnUpload.selectedBoard
-        )
-      ) {
+        );
+
+        const boardIsSameFqbn = Board.sameAs(
+          boardOnAppearedPort,
+          lastBoardsConfigOnUpload.selectedBoard
+        );
+
+        if (!boardIsSameHardware && !boardIsSameFqbn) continue;
+
+        let boardToAutoSelect = boardOnAppearedPort;
+        if (boardIsSameHardware && !boardIsSameFqbn) {
+          const { name, fqbn } = lastBoardsConfigOnUpload.selectedBoard;
+
+          boardToAutoSelect = {
+            ...boardToAutoSelect,
+            name:
+              boardToAutoSelect.name === Unknown || !boardToAutoSelect.name
+                ? name
+                : boardToAutoSelect.name,
+            fqbn: boardToAutoSelect.fqbn || fqbn,
+          };
+        }
+
         this.clearBoardDiscoverySnapshot();
 
         this.boardConfigToAutoSelect = {
-          selectedBoard: boardOnAppearedPort,
+          selectedBoard: boardToAutoSelect,
           selectedPort: port,
         };
         return;
@@ -326,8 +339,10 @@ export class BoardsServiceProvider
         // it is just a FQBN, so we need to find the `selected` board among the `AvailableBoards`
         const selectedAvailableBoard = AvailableBoard.is(selectedBoard)
           ? selectedBoard
-          : this._availableBoards.find((availableBoard) =>
-              Board.sameAs(availableBoard, selectedBoard)
+          : this._availableBoards.find(
+              (availableBoard) =>
+                Board.hardwareIdEquals(availableBoard, selectedBoard) ||
+                Board.sameAs(availableBoard, selectedBoard)
             );
         if (
           selectedAvailableBoard &&
@@ -353,9 +368,28 @@ export class BoardsServiceProvider
 
   protected tryReconnect(): boolean {
     if (this.latestValidBoardsConfig && !this.canUploadTo(this.boardsConfig)) {
+      // ** Reconnect to a board unplugged from, and plugged back into the same port
       for (const board of this.availableBoards.filter(
         ({ state }) => state !== AvailableBoard.State.incomplete
       )) {
+        if (
+          Board.hardwareIdEquals(
+            this.latestValidBoardsConfig.selectedBoard,
+            board
+          )
+        ) {
+          const { name, fqbn } = this.latestValidBoardsConfig.selectedBoard;
+          this.boardsConfig = {
+            selectedBoard: {
+              name: board.name === Unknown || !board.name ? name : board.name,
+              fqbn: board.fqbn || fqbn,
+              port: board.port,
+            },
+            selectedPort: board.port,
+          };
+          return true;
+        }
+
         if (
           this.latestValidBoardsConfig.selectedBoard.fqbn === board.fqbn &&
           this.latestValidBoardsConfig.selectedBoard.name === board.name &&
@@ -365,12 +399,15 @@ export class BoardsServiceProvider
           return true;
         }
       }
+      // **
 
+      // ** Reconnect to a board whose port changed due to an upload
       if (!this.boardConfigToAutoSelect) return false;
 
       this.boardsConfig = this.boardConfigToAutoSelect;
       this.boardConfigToAutoSelect = undefined;
       return true;
+      // **
     }
     return false;
   }

arduino-ide-extension/src/browser/config/config-service-client.ts

@@ -0,0 +1,102 @@
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { Emitter, Event } from '@theia/core/lib/common/event';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { deepClone } from '@theia/core/lib/common/objects';
+import URI from '@theia/core/lib/common/uri';
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from '@theia/core/shared/inversify';
+import { ConfigService, ConfigState } from '../../common/protocol';
+import { NotificationCenter } from '../notification-center';
+
+@injectable()
+export class ConfigServiceClient implements FrontendApplicationContribution {
+  @inject(ConfigService)
+  private readonly delegate: ConfigService;
+  @inject(NotificationCenter)
+  private readonly notificationCenter: NotificationCenter;
+  @inject(FrontendApplicationStateService)
+  private readonly appStateService: FrontendApplicationStateService;
+  @inject(MessageService)
+  private readonly messageService: MessageService;
+
+  private readonly didChangeSketchDirUriEmitter = new Emitter<
+    URI | undefined
+  >();
+  private readonly didChangeDataDirUriEmitter = new Emitter<URI | undefined>();
+  private readonly toDispose = new DisposableCollection(
+    this.didChangeSketchDirUriEmitter,
+    this.didChangeDataDirUriEmitter
+  );
+
+  private config: ConfigState | undefined;
+
+  @postConstruct()
+  protected init(): void {
+    this.appStateService.reachedState('ready').then(async () => {
+      const config = await this.delegate.getConfiguration();
+      this.use(config);
+    });
+  }
+
+  onStart(): void {
+    this.notificationCenter.onConfigDidChange((config) => this.use(config));
+  }
+
+  onStop(): void {
+    this.toDispose.dispose();
+  }
+
+  get onDidChangeSketchDirUri(): Event<URI | undefined> {
+    return this.didChangeSketchDirUriEmitter.event;
+  }
+
+  get onDidChangeDataDirUri(): Event<URI | undefined> {
+    return this.didChangeDataDirUriEmitter.event;
+  }
+
+  /**
+   * CLI config related error messages if any.
+   */
+  tryGetMessages(): string[] | undefined {
+    return this.config?.messages;
+  }
+
+  /**
+   * `directories.user`
+   */
+  tryGetSketchDirUri(): URI | undefined {
+    return this.config?.config?.sketchDirUri
+      ? new URI(this.config?.config?.sketchDirUri)
+      : undefined;
+  }
+
+  /**
+   * `directories.data`
+   */
+  tryGetDataDirUri(): URI | undefined {
+    return this.config?.config?.dataDirUri
+      ? new URI(this.config?.config?.dataDirUri)
+      : undefined;
+  }
+
+  private use(config: ConfigState): void {
+    const oldConfig = deepClone(this.config);
+    this.config = config;
+    if (oldConfig?.config?.sketchDirUri !== this.config?.config?.sketchDirUri) {
+      this.didChangeSketchDirUriEmitter.fire(this.tryGetSketchDirUri());
+    }
+    if (oldConfig?.config?.dataDirUri !== this.config?.config?.dataDirUri) {
+      this.didChangeDataDirUriEmitter.fire(this.tryGetDataDirUri());
+    }
+    if (this.config.messages?.length) {
+      const message = this.config.messages.join(' ');
+      // toast the error later otherwise it might not show up in IDE2
+      setTimeout(() => this.messageService.error(message), 1_000);
+    }
+  }
+}

arduino-ide-extension/src/browser/contributions/about.ts

@@ -41,22 +41,16 @@ export class About extends Contribution {
   }
 
   async showAbout(): Promise<void> {
-    const {
-      version,
-      commit,
-      status: cliStatus,
-    } = await this.configService.getVersion();
+    const version = await this.configService.getVersion();
     const buildDate = this.buildDate;
     const detail = (showAll: boolean) =>
       nls.localize(
         'arduino/about/detail',
-        'Version: {0}\nDate: {1}{2}\nCLI Version: {3}{4} [{5}]\n\n{6}',
+        'Version: {0}\nDate: {1}{2}\nCLI Version: {3}\n\n{4}',
         remote.app.getVersion(),
         buildDate ? buildDate : nls.localize('', 'dev build'),
         buildDate && showAll ? ` (${this.ago(buildDate)})` : '',
         version,
-        cliStatus ? ` ${cliStatus}` : '',
-        commit,
         nls.localize(
           'arduino/about/copyright',
           'Copyright © {0} Arduino SA',

arduino-ide-extension/src/browser/contributions/account.ts

@@ -0,0 +1,155 @@
+import { FrontendApplication } from '@theia/core/lib/browser/frontend-application';
+import { SidebarMenu } from '@theia/core/lib/browser/shell/sidebar-menu-widget';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { MenuPath } from '@theia/core/lib/common/menu';
+import { nls } from '@theia/core/lib/common/nls';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { CloudUserCommands, LEARN_MORE_URL } from '../auth/cloud-user-commands';
+import { CreateFeatures } from '../create/create-features';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { ApplicationConnectionStatusContribution } from '../theia/core/connection-status-service';
+import {
+  Command,
+  CommandRegistry,
+  Contribution,
+  MenuModelRegistry,
+} from './contribution';
+
+export const accountMenu: SidebarMenu = {
+  id: 'arduino-accounts-menu',
+  iconClass: 'codicon codicon-account',
+  title: nls.localize('arduino/account/menuTitle', 'Arduino Cloud'),
+  menuPath: ArduinoMenus.ARDUINO_ACCOUNT__CONTEXT,
+  order: 0,
+};
+
+@injectable()
+export class Account extends Contribution {
+  @inject(WindowService)
+  private readonly windowService: WindowService;
+  @inject(CreateFeatures)
+  private readonly createFeatures: CreateFeatures;
+  @inject(ApplicationConnectionStatusContribution)
+  private readonly connectionStatus: ApplicationConnectionStatusContribution;
+
+  private readonly toDispose = new DisposableCollection();
+  private app: FrontendApplication;
+
+  override onStart(app: FrontendApplication): void {
+    this.app = app;
+    this.updateSidebarCommand();
+    this.toDispose.push(
+      this.createFeatures.onDidChangeEnabled((enabled) =>
+        this.updateSidebarCommand(enabled)
+      )
+    );
+  }
+
+  onStop(): void {
+    this.toDispose.dispose();
+  }
+
+  override registerCommands(registry: CommandRegistry): void {
+    const openExternal = (url: string) =>
+      this.windowService.openNewWindow(url, { external: true });
+    const loggedIn = () => Boolean(this.createFeatures.session);
+    const loggedInWithInternetConnection = () =>
+      loggedIn() && this.connectionStatus.offlineStatus !== 'internet';
+    registry.registerCommand(Account.Commands.LEARN_MORE, {
+      execute: () => openExternal(LEARN_MORE_URL),
+      isEnabled: () => !loggedIn(),
+      isVisible: () => !loggedIn(),
+    });
+    registry.registerCommand(Account.Commands.GO_TO_PROFILE, {
+      execute: () => openExternal('https://id.arduino.cc/'),
+      isEnabled: () => loggedInWithInternetConnection(),
+      isVisible: () => loggedIn(),
+    });
+    registry.registerCommand(Account.Commands.GO_TO_CLOUD_EDITOR, {
+      execute: () => openExternal('https://create.arduino.cc/editor'),
+      isEnabled: () => loggedInWithInternetConnection(),
+      isVisible: () => loggedIn(),
+    });
+    registry.registerCommand(Account.Commands.GO_TO_IOT_CLOUD, {
+      execute: () => openExternal('https://create.arduino.cc/iot/'),
+      isEnabled: () => loggedInWithInternetConnection(),
+      isVisible: () => loggedIn(),
+    });
+  }
+
+  override registerMenus(registry: MenuModelRegistry): void {
+    const register = (
+      menuPath: MenuPath,
+      ...commands: (Command | [command: Command, menuLabel: string])[]
+    ) =>
+      commands.forEach((command, index) => {
+        const commandId = Array.isArray(command) ? command[0].id : command.id;
+        const label = Array.isArray(command) ? command[1] : command.label;
+        registry.registerMenuAction(menuPath, {
+          label,
+          commandId,
+          order: String(index),
+        });
+      });
+
+    register(ArduinoMenus.ARDUINO_ACCOUNT__CONTEXT__SIGN_IN_GROUP, [
+      CloudUserCommands.LOGIN,
+      nls.localize('arduino/cloud/signInToCloud', 'Sign in to Arduino Cloud'),
+    ]);
+    register(ArduinoMenus.ARDUINO_ACCOUNT__CONTEXT__LEARN_MORE_GROUP, [
+      Account.Commands.LEARN_MORE,
+      nls.localize('arduino/cloud/learnMore', 'Learn more'),
+    ]);
+    register(
+      ArduinoMenus.ARDUINO_ACCOUNT__CONTEXT__GO_TO_GROUP,
+      [
+        Account.Commands.GO_TO_PROFILE,
+        nls.localize('arduino/account/goToProfile', 'Go to Profile'),
+      ],
+      [
+        Account.Commands.GO_TO_CLOUD_EDITOR,
+        nls.localize('arduino/account/goToCloudEditor', 'Go to Cloud Editor'),
+      ],
+      [
+        Account.Commands.GO_TO_IOT_CLOUD,
+        nls.localize('arduino/account/goToIoTCloud', 'Go to IoT Cloud'),
+      ]
+    );
+    register(
+      ArduinoMenus.ARDUINO_ACCOUNT__CONTEXT__SIGN_OUT_GROUP,
+      CloudUserCommands.LOGOUT
+    );
+  }
+
+  private updateSidebarCommand(
+    visible: boolean = this.preferences['arduino.cloud.enabled']
+  ): void {
+    if (!this.app) {
+      return;
+    }
+    const handler = this.app.shell.leftPanelHandler;
+    if (visible) {
+      handler.addBottomMenu(accountMenu);
+    } else {
+      handler.removeBottomMenu(accountMenu.id);
+    }
+  }
+}
+
+export namespace Account {
+  export namespace Commands {
+    export const GO_TO_PROFILE: Command = {
+      id: 'arduino-go-to-profile',
+    };
+    export const GO_TO_CLOUD_EDITOR: Command = {
+      id: 'arduino-go-to-cloud-editor',
+    };
+    export const GO_TO_IOT_CLOUD: Command = {
+      id: 'arduino-go-to-iot-cloud',
+    };
+    export const LEARN_MORE: Command = {
+      id: 'arduino-learn-more',
+    };
+  }
+}

arduino-ide-extension/src/browser/contributions/add-file.ts

@@ -7,10 +7,11 @@ import {
   CommandRegistry,
   MenuModelRegistry,
   URI,
+  Sketch,
 } from './contribution';
 import { FileDialogService } from '@theia/filesystem/lib/browser';
 import { nls } from '@theia/core/lib/common';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 
 @injectable()
 export class AddFile extends SketchContribution {
@@ -46,9 +47,7 @@ export class AddFile extends SketchContribution {
     if (!toAddUri) {
       return;
     }
-    const sketchUri = new URI(sketch.uri);
-    const filename = toAddUri.path.base;
-    const targetUri = sketchUri.resolve('data').resolve(filename);
+    const { uri: targetUri, filename } = this.resolveTarget(sketch, toAddUri);
     const exists = await this.fileService.exists(targetUri);
     if (exists) {
       const { response } = await remote.dialog.showMessageBox({
@@ -80,6 +79,22 @@ export class AddFile extends SketchContribution {
       }
     );
   }
+
+  // https://github.com/arduino/arduino-ide/issues/284#issuecomment-1364533662
+  // File the file to add has one of the following extension, it goes to the sketch folder root: .ino, .h, .cpp, .c, .S
+  // Otherwise, the files goes to the `data` folder inside the sketch folder root.
+  private resolveTarget(
+    sketch: Sketch,
+    toAddUri: URI
+  ): { uri: URI; filename: string } {
+    const path = toAddUri.path;
+    const filename = path.base;
+    let root = new URI(sketch.uri);
+    if (!Sketch.Extensions.CODE_FILES.includes(path.ext)) {
+      root = root.resolve('data');
+    }
+    return { uri: root.resolve(filename), filename: filename };
+  }
 }
 
 export namespace AddFile {

arduino-ide-extension/src/browser/contributions/add-zip-library.ts

@@ -2,7 +2,6 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import * as remote from '@theia/core/electron-shared/@electron/remote';
 import URI from '@theia/core/lib/common/uri';
 import { ConfirmDialog } from '@theia/core/lib/browser/dialogs';
-import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { LibraryService, ResponseServiceClient } from '../../common/protocol';
 import { ExecuteWithProgress } from '../../common/protocol/progressible';
@@ -16,9 +15,6 @@ import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class AddZipLibrary extends SketchContribution {
-  @inject(EnvVariablesServer)
-  private readonly envVariableServer: EnvVariablesServer;
-
   @inject(ResponseServiceClient)
   private readonly responseService: ResponseServiceClient;
 

arduino-ide-extension/src/browser/contributions/archive-sketch.ts

@@ -1,7 +1,6 @@
 import { injectable } from '@theia/core/shared/inversify';
 import * as remote from '@theia/core/electron-shared/@electron/remote';
 import * as dateFormat from 'dateformat';
-import URI from '@theia/core/lib/common/uri';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import {
   SketchContribution,
@@ -10,7 +9,7 @@ import {
   MenuModelRegistry,
 } from './contribution';
 import { nls } from '@theia/core/lib/common';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 
 @injectable()
 export class ArchiveSketch extends SketchContribution {
@@ -29,10 +28,7 @@ export class ArchiveSketch extends SketchContribution {
   }
 
   private async archiveSketch(): Promise<void> {
-    const [sketch, config] = await Promise.all([
-      this.sketchServiceClient.currentSketch(),
-      this.configService.getConfiguration(),
-    ]);
+    const sketch = await this.sketchServiceClient.currentSketch();
     if (!CurrentSketch.isValid(sketch)) {
       return;
     }
@@ -40,9 +36,9 @@ export class ArchiveSketch extends SketchContribution {
       new Date(),
       'yymmdd'
     )}a.zip`;
-    const defaultPath = await this.fileService.fsPath(
-      new URI(config.sketchDirUri).resolve(archiveBasename)
-    );
+    const defaultContainerUri = await this.defaultUri();
+    const defaultUri = defaultContainerUri.resolve(archiveBasename);
+    const defaultPath = await this.fileService.fsPath(defaultUri);
     const { filePath, canceled } = await remote.dialog.showSaveDialog(
       remote.getCurrentWindow(),
       {
@@ -60,7 +56,7 @@ export class ArchiveSketch extends SketchContribution {
     if (!destinationUri) {
       return;
     }
-    await this.sketchService.archive(sketch, destinationUri.toString());
+    await this.sketchesService.archive(sketch, destinationUri.toString());
     this.messageService.info(
       nls.localize(
         'arduino/sketch/createdArchive',

arduino-ide-extension/src/browser/contributions/board-selection.ts

@@ -20,6 +20,7 @@ import {
   InstalledBoardWithPackage,
   AvailablePorts,
   Port,
+  getBoardInfo,
 } from '../../common/protocol';
 import { SketchContribution, Command, CommandRegistry } from './contribution';
 import { nls } from '@theia/core/lib/common';
@@ -49,52 +50,28 @@ export class BoardSelection extends SketchContribution {
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(BoardSelection.Commands.GET_BOARD_INFO, {
       execute: async () => {
-        const { selectedBoard, selectedPort } =
-          this.boardsServiceProvider.boardsConfig;
-        if (!selectedBoard) {
-          this.messageService.info(
-            nls.localize(
-              'arduino/board/selectBoardForInfo',
-              'Please select a board to obtain board info.'
-            )
-          );
+        const boardInfo = await getBoardInfo(
+          this.boardsServiceProvider.boardsConfig.selectedPort,
+          this.boardsService.getState()
+        );
+        if (typeof boardInfo === 'string') {
+          this.messageService.info(boardInfo);
           return;
         }
-        if (!selectedBoard.fqbn) {
-          this.messageService.info(
-            nls.localize(
-              'arduino/board/platformMissing',
-              "The platform for the selected '{0}' board is not installed.",
-              selectedBoard.name
-            )
-          );
-          return;
-        }
-        if (!selectedPort) {
-          this.messageService.info(
-            nls.localize(
-              'arduino/board/selectPortForInfo',
-              'Please select a port to obtain board info.'
-            )
-          );
-          return;
-        }
-        const boardDetails = await this.boardsService.getBoardDetails({
-          fqbn: selectedBoard.fqbn,
-        });
-        if (boardDetails) {
-          const { VID, PID } = boardDetails;
-          const detail = `BN: ${selectedBoard.name}
+        const { BN, VID, PID, SN } = boardInfo;
+        const detail = `
+BN: ${BN}
 VID: ${VID}
-PID: ${PID}`;
-          await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
-            message: nls.localize('arduino/board/boardInfo', 'Board Info'),
-            title: nls.localize('arduino/board/boardInfo', 'Board Info'),
-            type: 'info',
-            detail,
-            buttons: [nls.localize('vscode/issueMainService/ok', 'OK')],
-          });
-        }
+PID: ${PID}
+SN: ${SN}
+`.trim();
+        await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
+          message: nls.localize('arduino/board/boardInfo', 'Board Info'),
+          title: nls.localize('arduino/board/boardInfo', 'Board Info'),
+          type: 'info',
+          detail,
+          buttons: [nls.localize('vscode/issueMainService/ok', 'OK')],
+        });
       },
     });
   }
@@ -155,10 +132,7 @@ PID: ${PID}`;
     );
 
     // Ports submenu
-    const portsSubmenuPath = [
-      ...ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP,
-      '2_ports',
-    ];
+    const portsSubmenuPath = ArduinoMenus.TOOLS__PORTS_SUBMENU;
     const portsSubmenuLabel = config.selectedPort?.address;
     this.menuModelRegistry.registerSubmenu(
       portsSubmenuPath,

arduino-ide-extension/src/browser/contributions/close.ts

@@ -20,7 +20,7 @@ import {
   URI,
 } from './contribution';
 import { Dialog } from '@theia/core/lib/browser/dialogs';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import { SaveAsSketch } from './save-as-sketch';
 
 /**
@@ -185,7 +185,7 @@ export class Close extends SketchContribution {
   private async isCurrentSketchTemp(): Promise<false | Sketch> {
     const currentSketch = await this.sketchServiceClient.currentSketch();
     if (CurrentSketch.isValid(currentSketch)) {
-      const isTemp = await this.sketchService.isTemp(currentSketch);
+      const isTemp = await this.sketchesService.isTemp(currentSketch);
       if (isTemp) {
         return currentSketch;
       }

arduino-ide-extension/src/browser/contributions/cloud-contribution.ts

@@ -0,0 +1,121 @@
+import { CompositeTreeNode } from '@theia/core/lib/browser/tree';
+import { nls } from '@theia/core/lib/common/nls';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { CreateApi } from '../create/create-api';
+import { CreateFeatures } from '../create/create-features';
+import { CreateUri } from '../create/create-uri';
+import { Create, isNotFound } from '../create/typings';
+import { CloudSketchbookTree } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree';
+import { CloudSketchbookTreeModel } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree-model';
+import { CloudSketchbookTreeWidget } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree-widget';
+import { SketchbookWidget } from '../widgets/sketchbook/sketchbook-widget';
+import { SketchbookWidgetContribution } from '../widgets/sketchbook/sketchbook-widget-contribution';
+import { SketchContribution } from './contribution';
+
+export function sketchAlreadyExists(input: string): string {
+  return nls.localize(
+    'arduino/cloudSketch/alreadyExists',
+    "Cloud sketch '{0}' already exists.",
+    input
+  );
+}
+export function sketchNotFound(input: string): string {
+  return nls.localize(
+    'arduino/cloudSketch/notFound',
+    "Could not pull the cloud sketch '{0}'. It does not exist.",
+    input
+  );
+}
+export const synchronizingSketchbook = nls.localize(
+  'arduino/cloudSketch/synchronizingSketchbook',
+  'Synchronizing sketchbook...'
+);
+export function pullingSketch(input: string): string {
+  return nls.localize(
+    'arduino/cloudSketch/pulling',
+    "Synchronizing sketchbook, pulling '{0}'...",
+    input
+  );
+}
+export function pushingSketch(input: string): string {
+  return nls.localize(
+    'arduino/cloudSketch/pushing',
+    "Synchronizing sketchbook, pushing '{0}'...",
+    input
+  );
+}
+
+@injectable()
+export abstract class CloudSketchContribution extends SketchContribution {
+  @inject(SketchbookWidgetContribution)
+  private readonly widgetContribution: SketchbookWidgetContribution;
+  @inject(CreateApi)
+  protected readonly createApi: CreateApi;
+  @inject(CreateFeatures)
+  protected readonly createFeatures: CreateFeatures;
+
+  protected async treeModel(): Promise<
+    (CloudSketchbookTreeModel & { root: CompositeTreeNode }) | undefined
+  > {
+    const { enabled, session } = this.createFeatures;
+    if (enabled && session) {
+      const widget = await this.widgetContribution.widget;
+      const treeModel = this.treeModelFrom(widget);
+      if (treeModel) {
+        const root = treeModel.root;
+        if (CompositeTreeNode.is(root)) {
+          return treeModel as CloudSketchbookTreeModel & {
+            root: CompositeTreeNode;
+          };
+        }
+      }
+    }
+    return undefined;
+  }
+
+  protected async pull(
+    sketch: Create.Sketch
+  ): Promise<CloudSketchbookTree.CloudSketchDirNode | undefined> {
+    const treeModel = await this.treeModel();
+    if (!treeModel) {
+      return undefined;
+    }
+    const id = CreateUri.toUri(sketch).path.toString();
+    const node = treeModel.getNode(id);
+    if (!node) {
+      throw new Error(
+        `Could not find cloud sketchbook tree node with ID: ${id}.`
+      );
+    }
+    if (!CloudSketchbookTree.CloudSketchDirNode.is(node)) {
+      throw new Error(
+        `Cloud sketchbook tree node expected to represent a directory but it did not. Tree node ID: ${id}.`
+      );
+    }
+    try {
+      await treeModel.sketchbookTree().pull({ node }, true);
+      return node;
+    } catch (err) {
+      if (isNotFound(err)) {
+        await treeModel.refresh();
+        this.messageService.error(sketchNotFound(sketch.name));
+        return undefined;
+      }
+      throw err;
+    }
+  }
+
+  private treeModelFrom(
+    widget: SketchbookWidget
+  ): CloudSketchbookTreeModel | undefined {
+    for (const treeWidget of widget.getTreeWidgets()) {
+      if (treeWidget instanceof CloudSketchbookTreeWidget) {
+        const model = treeWidget.model;
+        if (model instanceof CloudSketchbookTreeModel) {
+          return model;
+        }
+      }
+    }
+    return undefined;
+  }
+}

arduino-ide-extension/src/browser/contributions/contribution.ts

@@ -6,14 +6,18 @@ import {
 } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { ILogger } from '@theia/core/lib/common/logger';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
 import { Saveable } from '@theia/core/lib/browser/saveable';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { MaybePromise } from '@theia/core/lib/common/types';
 import { LabelProvider } from '@theia/core/lib/browser/label-provider';
 import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { MessageService } from '@theia/core/lib/common/message-service';
+import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
 import { open, OpenerService } from '@theia/core/lib/browser/opener-service';
-
 import {
   MenuModelRegistry,
   MenuContribution,
@@ -40,10 +44,9 @@ import { SettingsService } from '../dialogs/settings/settings';
 import {
   CurrentSketch,
   SketchesServiceClientImpl,
-} from '../../common/protocol/sketches-service-client-impl';
+} from '../sketches-service-client-impl';
 import {
   SketchesService,
-  ConfigService,
   FileSystemExt,
   Sketch,
   CoreService,
@@ -58,9 +61,12 @@ import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { ExecuteWithProgress } from '../../common/protocol/progressible';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import { BoardsDataStore } from '../boards/boards-data-store';
-import { NotificationManager } from '../theia/messages/notifications-manager';
+import { NotificationManager } from '@theia/messages/lib/browser/notifications-manager';
 import { MessageType } from '@theia/core/lib/common/message-service-protocol';
 import { WorkspaceService } from '../theia/workspace/workspace-service';
+import { MainMenuManager } from '../../common/main-menu-manager';
+import { ConfigServiceClient } from '../config/config-service-client';
+import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
 
 export {
   Command,
@@ -106,6 +112,9 @@ export abstract class Contribution
   @inject(FrontendApplicationStateService)
   protected readonly appStateService: FrontendApplicationStateService;
 
+  @inject(MainMenuManager)
+  protected readonly menuManager: MainMenuManager;
+
   @postConstruct()
   protected init(): void {
     this.appStateService.reachedState('ready').then(() => this.onReady());
@@ -138,11 +147,11 @@ export abstract class SketchContribution extends Contribution {
   @inject(FileSystemExt)
   protected readonly fileSystemExt: FileSystemExt;
 
-  @inject(ConfigService)
-  protected readonly configService: ConfigService;
+  @inject(ConfigServiceClient)
+  protected readonly configService: ConfigServiceClient;
 
   @inject(SketchesService)
-  protected readonly sketchService: SketchesService;
+  protected readonly sketchesService: SketchesService;
 
   @inject(OpenerService)
   protected readonly openerService: OpenerService;
@@ -156,6 +165,9 @@ export abstract class SketchContribution extends Contribution {
   @inject(OutputChannelManager)
   protected readonly outputChannelManager: OutputChannelManager;
 
+  @inject(EnvVariablesServer)
+  protected readonly envVariableServer: EnvVariablesServer;
+
   protected async sourceOverride(): Promise<Record<string, string>> {
     const override: Record<string, string> = {};
     const sketch = await this.sketchServiceClient.currentSketch();
@@ -169,6 +181,25 @@ export abstract class SketchContribution extends Contribution {
     }
     return override;
   }
+
+  /**
+   * Defaults to `directories.user` if defined and not CLI config errors were detected.
+   * Otherwise, the URI of the user home directory.
+   */
+  protected async defaultUri(): Promise<URI> {
+    const errors = this.configService.tryGetMessages();
+    let defaultUri = this.configService.tryGetSketchDirUri();
+    if (!defaultUri || errors?.length) {
+      // Fall back to user home when the `directories.user` is not available or there are known CLI config errors
+      defaultUri = new URI(await this.envVariableServer.getHomeDirUri());
+    }
+    return defaultUri;
+  }
+
+  protected async defaultPath(): Promise<string> {
+    const defaultUri = await this.defaultUri();
+    return this.fileService.fsPath(defaultUri);
+  }
 }
 
 @injectable()
@@ -191,6 +222,9 @@ export abstract class CoreServiceContribution extends SketchContribution {
   @inject(NotificationManager)
   private readonly notificationManager: NotificationManager;
 
+  @inject(ApplicationShell)
+  private readonly shell: ApplicationShell;
+
   /**
    * This is the internal (Theia) ID of the notification that is currently visible.
    * It's stored here as a field to be able to close it before executing any new core command (such as verify, upload, etc.)
@@ -253,6 +287,9 @@ export abstract class CoreServiceContribution extends SketchContribution {
     keepOutput?: boolean;
     task: (progressId: string, coreService: CoreService) => Promise<T>;
   }): Promise<T> {
+    const toDisposeOnComplete = new DisposableCollection(
+      this.maybeActivateMonitorWidget()
+    );
     const { progressText, keepOutput, task } = options;
     this.outputChannelManager
       .getChannel('Arduino')
@@ -264,11 +301,26 @@ export abstract class CoreServiceContribution extends SketchContribution {
       run: ({ progressId }) => task(progressId, this.coreService),
       keepOutput,
     });
+    toDisposeOnComplete.dispose();
     return result;
   }
 
+  // TODO: cleanup!
+  // this dependency does not belong here
+  // support core command contribution handlers, the monitor-widget should implement it and register itself as a handler
+  // the monitor widget should reveal itself after a successful core command execution
+  private maybeActivateMonitorWidget(): Disposable {
+    const currentWidget = this.shell.bottomPanel.currentTitle?.owner;
+    if (currentWidget?.id === 'serial-monitor') {
+      return Disposable.create(() =>
+        this.shell.bottomPanel.activateWidget(currentWidget)
+      );
+    }
+    return Disposable.NULL;
+  }
+
   private notificationId(message: string, ...actions: string[]): string {
-    return this.notificationManager.getMessageId({
+    return this.notificationManager['getMessageId']({
       text: message,
       actions,
       type: MessageType.Error,

arduino-ide-extension/src/browser/contributions/create-cloud-copy.ts

@@ -0,0 +1,118 @@
+import { FrontendApplication } from '@theia/core/lib/browser/frontend-application';
+import { ApplicationShell } from '@theia/core/lib/browser/shell';
+import type { Command, CommandRegistry } from '@theia/core/lib/common/command';
+import { Progress } from '@theia/core/lib/common/message-service-protocol';
+import { nls } from '@theia/core/lib/common/nls';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { Create } from '../create/typings';
+import { ApplicationConnectionStatusContribution } from '../theia/core/connection-status-service';
+import { CloudSketchbookTree } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree';
+import { SketchbookTree } from '../widgets/sketchbook/sketchbook-tree';
+import { SketchbookTreeModel } from '../widgets/sketchbook/sketchbook-tree-model';
+import { CloudSketchContribution, pushingSketch } from './cloud-contribution';
+import {
+  CreateNewCloudSketchCallback,
+  NewCloudSketch,
+  NewCloudSketchParams,
+} from './new-cloud-sketch';
+import { saveOntoCopiedSketch } from './save-as-sketch';
+
+interface CreateCloudCopyParams {
+  readonly model: SketchbookTreeModel;
+  readonly node: SketchbookTree.SketchDirNode;
+}
+function isCreateCloudCopyParams(arg: unknown): arg is CreateCloudCopyParams {
+  return (
+    typeof arg === 'object' &&
+    (<CreateCloudCopyParams>arg).model !== undefined &&
+    (<CreateCloudCopyParams>arg).model instanceof SketchbookTreeModel &&
+    (<CreateCloudCopyParams>arg).node !== undefined &&
+    SketchbookTree.SketchDirNode.is((<CreateCloudCopyParams>arg).node)
+  );
+}
+
+@injectable()
+export class CreateCloudCopy extends CloudSketchContribution {
+  @inject(ApplicationConnectionStatusContribution)
+  private readonly connectionStatus: ApplicationConnectionStatusContribution;
+
+  private shell: ApplicationShell;
+
+  override onStart(app: FrontendApplication): void {
+    this.shell = app.shell;
+  }
+
+  override registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(CreateCloudCopy.Commands.CREATE_CLOUD_COPY, {
+      execute: (args: CreateCloudCopyParams) => this.createCloudCopy(args),
+      isEnabled: (args: unknown) =>
+        Boolean(this.createFeatures.session) && isCreateCloudCopyParams(args),
+      isVisible: (args: unknown) =>
+        Boolean(this.createFeatures.enabled) &&
+        Boolean(this.createFeatures.session) &&
+        this.connectionStatus.offlineStatus !== 'internet' &&
+        isCreateCloudCopyParams(args),
+    });
+  }
+
+  /**
+   *  - creates new cloud sketch with the name of the params sketch,
+   *  - pulls the cloud sketch,
+   *  - copies files from params sketch to pulled cloud sketch in the cache folder,
+   *  - pushes the cloud sketch, and
+   *  - opens in new window.
+   */
+  private async createCloudCopy(params: CreateCloudCopyParams): Promise<void> {
+    const sketch = await this.sketchesService.loadSketch(
+      params.node.fileStat.resource.toString()
+    );
+    const callback: CreateNewCloudSketchCallback = async (
+      newSketch: Create.Sketch,
+      newNode: CloudSketchbookTree.CloudSketchDirNode,
+      progress: Progress
+    ) => {
+      const treeModel = await this.treeModel();
+      if (!treeModel) {
+        throw new Error('Could not retrieve the cloud sketchbook tree model.');
+      }
+
+      progress.report({
+        message: nls.localize(
+          'arduino/createCloudCopy/copyingSketchFilesMessage',
+          'Copying local sketch files...'
+        ),
+      });
+      const localCacheFolderUri = newNode.uri.toString();
+      await this.sketchesService.copy(sketch, {
+        destinationUri: localCacheFolderUri,
+        onlySketchFiles: true,
+      });
+      await saveOntoCopiedSketch(
+        sketch,
+        localCacheFolderUri,
+        this.shell,
+        this.editorManager
+      );
+
+      progress.report({ message: pushingSketch(newSketch.name) });
+      await treeModel.sketchbookTree().push(newNode, true, true);
+    };
+    return this.commandService.executeCommand(
+      NewCloudSketch.Commands.NEW_CLOUD_SKETCH.id,
+      <NewCloudSketchParams>{
+        initialValue: params.node.fileStat.name,
+        callback,
+        skipShowErrorMessageOnOpen: false,
+      }
+    );
+  }
+}
+
+export namespace CreateCloudCopy {
+  export namespace Commands {
+    export const CREATE_CLOUD_COPY: Command = {
+      id: 'arduino-create-cloud-copy',
+      iconClass: 'fa fa-arduino-cloud-upload',
+    };
+  }
+}

arduino-ide-extension/src/browser/contributions/debug.ts

@@ -3,7 +3,12 @@ import { Event, Emitter } from '@theia/core/lib/common/event';
 import { HostedPluginSupport } from '@theia/plugin-ext/lib/hosted/browser/hosted-plugin';
 import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 import { NotificationCenter } from '../notification-center';
-import { Board, BoardsService, ExecutableService } from '../../common/protocol';
+import {
+  Board,
+  BoardsService,
+  ExecutableService,
+  Sketch,
+} from '../../common/protocol';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import {
   URI,
@@ -13,12 +18,11 @@ import {
   TabBarToolbarRegistry,
 } from './contribution';
 import { MaybePromise, MenuModelRegistry, nls } from '@theia/core/lib/common';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import { ArduinoMenus } from '../menu/arduino-menus';
 
-import { MainMenuManager } from '../../common/main-menu-manager';
-
 const COMPILE_FOR_DEBUG_KEY = 'arduino-compile-for-debug';
+
 @injectable()
 export class Debug extends SketchContribution {
   @inject(HostedPluginSupport)
@@ -36,9 +40,6 @@ export class Debug extends SketchContribution {
   @inject(BoardsServiceProvider)
   private readonly boardsServiceProvider: BoardsServiceProvider;
 
-  @inject(MainMenuManager)
-  private readonly mainMenuManager: MainMenuManager;
-
   /**
    * If `undefined`, debugging is enabled. Otherwise, the reason why it's disabled.
    */
@@ -186,7 +187,7 @@ export class Debug extends SketchContribution {
     if (!CurrentSketch.isValid(sketch)) {
       return;
     }
-    const ideTempFolderUri = await this.sketchService.getIdeTempFolderUri(
+    const ideTempFolderUri = await this.sketchesService.getIdeTempFolderUri(
       sketch
     );
     const [cliPath, sketchPath, configPath] = await Promise.all([
@@ -203,7 +204,28 @@ export class Debug extends SketchContribution {
       sketchPath,
       configPath,
     };
-    return this.commandService.executeCommand('arduino.debug.start', config);
+    try {
+      await this.commandService.executeCommand('arduino.debug.start', config);
+    } catch (err) {
+      if (await this.isSketchNotVerifiedError(err, sketch)) {
+        const yes = nls.localize('vscode/extensionsUtils/yes', 'Yes');
+        const answer = await this.messageService.error(
+          nls.localize(
+            'arduino/debug/sketchIsNotCompiled',
+            "Sketch '{0}' must be verified before starting a debug session. Please verify the sketch and start debugging again. Do you want to verify the sketch now?",
+            sketch.name
+          ),
+          yes
+        );
+        if (answer === yes) {
+          this.commandService.executeCommand('arduino-verify-sketch');
+        }
+      } else {
+        this.messageService.error(
+          err instanceof Error ? err.message : String(err)
+        );
+      }
+    }
   }
 
   get compileForDebug(): boolean {
@@ -215,7 +237,24 @@ export class Debug extends SketchContribution {
     const oldState = this.compileForDebug;
     const newState = !oldState;
     window.localStorage.setItem(COMPILE_FOR_DEBUG_KEY, String(newState));
-    this.mainMenuManager.update();
+    this.menuManager.update();
+  }
+
+  private async isSketchNotVerifiedError(
+    err: unknown,
+    sketch: Sketch
+  ): Promise<boolean> {
+    if (err instanceof Error) {
+      try {
+        const tempBuildPaths = await this.sketchesService.tempBuildPath(sketch);
+        return tempBuildPaths.some((tempBuildPath) =>
+          err.message.includes(tempBuildPath)
+        );
+      } catch {
+        return false;
+      }
+    }
+    return false;
   }
 }
 export namespace Debug {

arduino-ide-extension/src/browser/contributions/delete-sketch.ts

@@ -1,32 +1,131 @@
-import { injectable } from '@theia/core/shared/inversify';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import { ipcRenderer } from '@theia/core/electron-shared/electron';
+import { Dialog } from '@theia/core/lib/browser/dialogs';
+import { NavigatableWidget } from '@theia/core/lib/browser/navigatable-types';
+import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { nls } from '@theia/core/lib/common/nls';
+import type { MaybeArray } from '@theia/core/lib/common/types';
+import URI from '@theia/core/lib/common/uri';
+import type { Widget } from '@theia/core/shared/@phosphor/widgets';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import { SketchesError } from '../../common/protocol';
-import {
-  Command,
-  CommandRegistry,
-  SketchContribution,
-  Sketch,
-} from './contribution';
+import { SCHEDULE_DELETION_SIGNAL } from '../../electron-common/electron-messages';
+import { Sketch } from '../contributions/contribution';
+import { isNotFound } from '../create/typings';
+import { Command, CommandRegistry } from './contribution';
+import { CloudSketchContribution } from './cloud-contribution';
+
+export interface DeleteSketchParams {
+  /**
+   * Either the URI of the sketch folder or the sketch to delete.
+   */
+  readonly toDelete: string | Sketch;
+  /**
+   * If `true`, the currently opened sketch is expected to be deleted.
+   * Hence, the editors must be closed, the sketch will be scheduled
+   * for deletion, and the browser window will close or navigate away.
+   * If `false`, the sketch will be scheduled for deletion,
+   * but the current window remains open. If `force`, the window will
+   * navigate away, but IDE2 won't open any confirmation dialogs.
+   */
+  readonly willNavigateAway?: boolean | 'force';
+}
 
 @injectable()
-export class DeleteSketch extends SketchContribution {
+export class DeleteSketch extends CloudSketchContribution {
+  @inject(ApplicationShell)
+  private readonly shell: ApplicationShell;
+  @inject(WindowService)
+  private readonly windowService: WindowService;
+
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(DeleteSketch.Commands.DELETE_SKETCH, {
-      execute: (uri: string) => this.deleteSketch(uri),
+      execute: (params: DeleteSketchParams) => this.deleteSketch(params),
     });
   }
 
-  private async deleteSketch(uri: string): Promise<void> {
-    const sketch = await this.loadSketch(uri);
-    if (!sketch) {
-      console.info(`Sketch not found at ${uri}. Skipping deletion.`);
+  private async deleteSketch(params: DeleteSketchParams): Promise<void> {
+    const { toDelete, willNavigateAway } = params;
+    let sketch: Sketch;
+    if (typeof toDelete === 'string') {
+      const resolvedSketch = await this.loadSketch(toDelete);
+      if (!resolvedSketch) {
+        console.info(
+          `Failed to load the sketch. It was not found at '${toDelete}'. Skipping deletion.`
+        );
+        return;
+      }
+      sketch = resolvedSketch;
+    } else {
+      sketch = toDelete;
+    }
+    if (!willNavigateAway) {
+      this.scheduleDeletion(sketch);
       return;
     }
-    return this.sketchService.deleteSketch(sketch);
+    const cloudUri = this.createFeatures.cloudUri(sketch);
+    if (willNavigateAway !== 'force') {
+      const { response } = await remote.dialog.showMessageBox({
+        title: nls.localizeByDefault('Delete'),
+        type: 'question',
+        buttons: [Dialog.CANCEL, Dialog.OK],
+        message: cloudUri
+          ? nls.localize(
+              'theia/workspace/deleteCloudSketch',
+              "The cloud sketch '{0}' will be permanently deleted from the Arduino servers and the local caches. This action is irreversible. Do you want to delete the current sketch?",
+              sketch.name
+            )
+          : nls.localize(
+              'theia/workspace/deleteCurrentSketch',
+              "The sketch '{0}' will be permanently deleted. This action is irreversible. Do you want to delete the current sketch?",
+              sketch.name
+            ),
+      });
+      // cancel
+      if (response === 0) {
+        return;
+      }
+    }
+    if (cloudUri) {
+      const posixPath = cloudUri.path.toString();
+      const cloudSketch = this.createApi.sketchCache.getSketch(posixPath);
+      if (!cloudSketch) {
+        throw new Error(
+          `Cloud sketch with path '${posixPath}' was not cached. Cache: ${this.createApi.sketchCache.toString()}`
+        );
+      }
+      try {
+        // IDE2 cannot use DELETE directory as the server responses with HTTP 500 if it's missing.
+        // https://github.com/arduino/arduino-ide/issues/1825#issuecomment-1406301406
+        await this.createApi.deleteSketch(cloudSketch.path);
+      } catch (err) {
+        if (!isNotFound(err)) {
+          throw err;
+        } else {
+          console.info(
+            `Could not delete the cloud sketch with path '${posixPath}'. It does not exist.`
+          );
+        }
+      }
+    }
+    await Promise.all([
+      ...Sketch.uris(sketch).map((uri) =>
+        this.closeWithoutSaving(new URI(uri))
+      ),
+    ]);
+    this.windowService.setSafeToShutDown();
+    this.scheduleDeletion(sketch);
+    return window.close();
+  }
+
+  private scheduleDeletion(sketch: Sketch): void {
+    ipcRenderer.send(SCHEDULE_DELETION_SIGNAL, sketch);
   }
 
   private async loadSketch(uri: string): Promise<Sketch | undefined> {
     try {
-      const sketch = await this.sketchService.loadSketch(uri);
+      const sketch = await this.sketchesService.loadSketch(uri);
       return sketch;
     } catch (err) {
       if (SketchesError.NotFound.is(err)) {
@@ -35,6 +134,13 @@ export class DeleteSketch extends SketchContribution {
       throw err;
     }
   }
+
+  // fix: https://github.com/eclipse-theia/theia/issues/12107
+  private async closeWithoutSaving(uri: URI): Promise<void> {
+    const affected = getAffected(this.shell.widgets, uri);
+    const toClose = [...affected].map(([, widget]) => widget);
+    await this.shell.closeMany(toClose, { save: false });
+  }
 }
 export namespace DeleteSketch {
   export namespace Commands {
@@ -43,3 +149,20 @@ export namespace DeleteSketch {
     };
   }
 }
+
+function getAffected<T extends Widget>(
+  widgets: Iterable<T>,
+  context: MaybeArray<URI>
+): [URI, T & NavigatableWidget][] {
+  const uris = Array.isArray(context) ? context : [context];
+  const result: [URI, T & NavigatableWidget][] = [];
+  for (const widget of widgets) {
+    if (NavigatableWidget.is(widget)) {
+      const resourceUri = widget.getResourceUri();
+      if (resourceUri && uris.some((uri) => uri.isEqualOrParent(resourceUri))) {
+        result.push([resourceUri, widget]);
+      }
+    }
+  }
+  return result;
+}

arduino-ide-extension/src/browser/contributions/edit-contributions.ts

@@ -57,9 +57,11 @@ export class EditContributions extends Contribution {
       execute: async () => {
         const value = await this.currentValue();
         if (value !== undefined) {
-          this.clipboardService.writeText(`\`\`\`cpp
+          this.clipboardService.writeText(`
+\`\`\`cpp
 ${value}
-\`\`\``);
+\`\`\`
+`);
         }
       },
     });

arduino-ide-extension/src/browser/contributions/examples.ts

@@ -1,6 +1,6 @@
 import * as PQueue from 'p-queue';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { CommandHandler } from '@theia/core/lib/common/command';
+import { CommandHandler, CommandService } from '@theia/core/lib/common/command';
 import {
   MenuPath,
   CompositeMenuNode,
@@ -11,8 +11,11 @@ import {
   DisposableCollection,
 } from '@theia/core/lib/common/disposable';
 import { OpenSketch } from './open-sketch';
-import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
-import { MainMenuManager } from '../../common/main-menu-manager';
+import {
+  ArduinoMenus,
+  examplesLabel,
+  PlaceholderMenuNode,
+} from '../menu/arduino-menus';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import { ExamplesService } from '../../common/protocol/examples-service';
 import {
@@ -26,10 +29,73 @@ import {
   SketchRef,
   SketchContainer,
   SketchesError,
-  Sketch,
   CoreService,
+  SketchesService,
+  Sketch,
 } from '../../common/protocol';
-import { nls } from '@theia/core/lib/common';
+import { nls } from '@theia/core/lib/common/nls';
+import { unregisterSubmenu } from '../menu/arduino-menus';
+import { MaybePromise } from '@theia/core/lib/common/types';
+import { ApplicationError } from '@theia/core/lib/common/application-error';
+
+/**
+ * Creates a cloned copy of the example sketch and opens it in a new window.
+ */
+export async function openClonedExample(
+  uri: string,
+  services: {
+    sketchesService: SketchesService;
+    commandService: CommandService;
+  },
+  onError: {
+    onDidFailClone?: (
+      err: ApplicationError<
+        number,
+        {
+          uri: string;
+        }
+      >,
+      uri: string
+    ) => MaybePromise<unknown>;
+    onDidFailOpen?: (
+      err: ApplicationError<
+        number,
+        {
+          uri: string;
+        }
+      >,
+      sketch: Sketch
+    ) => MaybePromise<unknown>;
+  } = {}
+): Promise<void> {
+  const { sketchesService, commandService } = services;
+  const { onDidFailClone, onDidFailOpen } = onError;
+  try {
+    const sketch = await sketchesService.cloneExample(uri);
+    try {
+      await commandService.executeCommand(
+        OpenSketch.Commands.OPEN_SKETCH.id,
+        sketch
+      );
+    } catch (openError) {
+      if (SketchesError.NotFound.is(openError)) {
+        if (onDidFailOpen) {
+          await onDidFailOpen(openError, sketch);
+          return;
+        }
+      }
+      throw openError;
+    }
+  } catch (cloneError) {
+    if (SketchesError.NotFound.is(cloneError)) {
+      if (onDidFailClone) {
+        await onDidFailClone(cloneError, uri);
+        return;
+      }
+    }
+    throw cloneError;
+  }
+}
 
 @injectable()
 export abstract class Examples extends SketchContribution {
@@ -37,10 +103,7 @@ export abstract class Examples extends SketchContribution {
   private readonly commandRegistry: CommandRegistry;
 
   @inject(MenuModelRegistry)
-  private readonly menuRegistry: MenuModelRegistry;
-
-  @inject(MainMenuManager)
-  protected readonly menuManager: MainMenuManager;
+  protected readonly menuRegistry: MenuModelRegistry;
 
   @inject(ExamplesService)
   protected readonly examplesService: ExamplesService;
@@ -51,6 +114,9 @@ export abstract class Examples extends SketchContribution {
   @inject(BoardsServiceProvider)
   protected readonly boardsServiceClient: BoardsServiceProvider;
 
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
+
   protected readonly toDispose = new DisposableCollection();
 
   protected override init(): void {
@@ -58,6 +124,12 @@ export abstract class Examples extends SketchContribution {
     this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) =>
       this.handleBoardChanged(selectedBoard)
     );
+    this.notificationCenter.onDidReinitialize(() =>
+      this.update({
+        board: this.boardsServiceClient.boardsConfig.selectedBoard,
+        // No force refresh. The core client was already refreshed.
+      })
+    );
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
@@ -88,7 +160,7 @@ export abstract class Examples extends SketchContribution {
     // TODO: unregister submenu? https://github.com/eclipse-theia/theia/issues/7300
     registry.registerSubmenu(
       ArduinoMenus.FILE__EXAMPLES_SUBMENU,
-      nls.localize('arduino/examples/menu', 'Examples'),
+      examplesLabel,
       {
         order: '4',
       }
@@ -124,6 +196,11 @@ export abstract class Examples extends SketchContribution {
         const { label } = sketchContainerOrPlaceholder;
         submenuPath = [...menuPath, label];
         this.menuRegistry.registerSubmenu(submenuPath, label, subMenuOptions);
+        this.toDispose.push(
+          Disposable.create(() =>
+            unregisterSubmenu(submenuPath, this.menuRegistry)
+          )
+        );
         sketches.push(...sketchContainerOrPlaceholder.sketches);
         children.push(...sketchContainerOrPlaceholder.children);
       } else {
@@ -163,47 +240,33 @@ export abstract class Examples extends SketchContribution {
   }
 
   protected createHandler(uri: string): CommandHandler {
+    const forceUpdate = () =>
+      this.update({
+        board: this.boardsServiceClient.boardsConfig.selectedBoard,
+        forceRefresh: true,
+      });
     return {
       execute: async () => {
-        const sketch = await this.clone(uri);
-        if (sketch) {
-          try {
-            return this.commandService.executeCommand(
-              OpenSketch.Commands.OPEN_SKETCH.id,
-              sketch
-            );
-          } catch (err) {
-            if (SketchesError.NotFound.is(err)) {
+        await openClonedExample(
+          uri,
+          {
+            sketchesService: this.sketchesService,
+            commandService: this.commandRegistry,
+          },
+          {
+            onDidFailClone: () => {
               // Do not toast the error message. It's handled by the `Open Sketch` command.
-              this.update({
-                board: this.boardsServiceClient.boardsConfig.selectedBoard,
-                forceRefresh: true,
-              });
-            } else {
-              throw err;
-            }
+              forceUpdate();
+            },
+            onDidFailOpen: (err) => {
+              this.messageService.error(err.message);
+              forceUpdate();
+            },
           }
-        }
+        );
       },
     };
   }
-
-  private async clone(uri: string): Promise<Sketch | undefined> {
-    try {
-      const sketch = await this.sketchService.cloneExample(uri);
-      return sketch;
-    } catch (err) {
-      if (SketchesError.NotFound.is(err)) {
-        this.messageService.error(err.message);
-        this.update({
-          board: this.boardsServiceClient.boardsConfig.selectedBoard,
-          forceRefresh: true,
-        });
-      } else {
-        throw err;
-      }
-    }
-  }
 }
 
 @injectable()
@@ -243,9 +306,6 @@ export class BuiltInExamples extends Examples {
 
 @injectable()
 export class LibraryExamples extends Examples {
-  @inject(NotificationCenter)
-  private readonly notificationCenter: NotificationCenter;
-
   private readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
 
   override onStart(): void {

arduino-ide-extension/src/browser/contributions/include-library.ts

@@ -17,7 +17,7 @@ import { SketchContribution, Command, CommandRegistry } from './contribution';
 import { NotificationCenter } from '../notification-center';
 import { nls } from '@theia/core/lib/common';
 import * as monaco from '@theia/monaco-editor-core';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 
 @injectable()
 export class IncludeLibrary extends SketchContribution {
@@ -53,6 +53,7 @@ export class IncludeLibrary extends SketchContribution {
     this.notificationCenter.onLibraryDidUninstall(() =>
       this.updateMenuActions()
     );
+    this.notificationCenter.onDidReinitialize(() => this.updateMenuActions());
   }
 
   override async onReady(): Promise<void> {

arduino-ide-extension/src/browser/contributions/ino-language.ts

@@ -1,15 +1,20 @@
-import { Mutex } from 'async-mutex';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { inject, injectable } from '@theia/core/shared/inversify';
+import { Mutex } from 'async-mutex';
 import {
   ArduinoDaemon,
+  assertSanitizedFqbn,
   BoardsService,
   ExecutableService,
+  sanitizeFqbn,
 } from '../../common/protocol';
-import { HostedPluginEvents } from '../hosted-plugin-events';
-import { SketchContribution, URI } from './contribution';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import { BoardsConfig } from '../boards/boards-config';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
+import { HostedPluginEvents } from '../hosted-plugin-events';
+import { NotificationCenter } from '../notification-center';
+import { SketchContribution, URI } from './contribution';
+import { BoardsDataStore } from '../boards/boards-data-store';
 
 @injectable()
 export class InoLanguage extends SketchContribution {
@@ -28,8 +33,15 @@ export class InoLanguage extends SketchContribution {
   @inject(BoardsServiceProvider)
   private readonly boardsServiceProvider: BoardsServiceProvider;
 
+  @inject(NotificationCenter)
+  private readonly notificationCenter: NotificationCenter;
+
+  @inject(BoardsDataStore)
+  private readonly boardDataStore: BoardsDataStore;
+
+  private readonly toDispose = new DisposableCollection();
+  private readonly languageServerStartMutex = new Mutex();
   private languageServerFqbn?: string;
-  private languageServerStartMutex = new Mutex();
 
   override onReady(): void {
     const start = (
@@ -43,27 +55,61 @@ export class InoLanguage extends SketchContribution {
         }
       }
     };
-    this.boardsServiceProvider.onBoardsConfigChanged(start);
-    this.hostedPluginEvents.onPluginsDidStart(() =>
-      start(this.boardsServiceProvider.boardsConfig)
-    );
-    this.hostedPluginEvents.onPluginsWillUnload(
-      () => (this.languageServerFqbn = undefined)
-    );
-    this.preferences.onPreferenceChanged(
-      ({ preferenceName, oldValue, newValue }) => {
-        if (oldValue !== newValue) {
-          switch (preferenceName) {
-            case 'arduino.language.log':
-            case 'arduino.language.realTimeDiagnostics':
-              start(this.boardsServiceProvider.boardsConfig, true);
+    const forceRestart = () => {
+      start(this.boardsServiceProvider.boardsConfig, true);
+    };
+    this.toDispose.pushAll([
+      this.boardsServiceProvider.onBoardsConfigChanged(start),
+      this.hostedPluginEvents.onPluginsDidStart(() =>
+        start(this.boardsServiceProvider.boardsConfig)
+      ),
+      this.hostedPluginEvents.onPluginsWillUnload(
+        () => (this.languageServerFqbn = undefined)
+      ),
+      this.preferences.onPreferenceChanged(
+        ({ preferenceName, oldValue, newValue }) => {
+          if (oldValue !== newValue) {
+            switch (preferenceName) {
+              case 'arduino.language.log':
+              case 'arduino.language.realTimeDiagnostics':
+                forceRestart();
+            }
           }
         }
-      }
-    );
+      ),
+      this.notificationCenter.onLibraryDidInstall(() => forceRestart()),
+      this.notificationCenter.onLibraryDidUninstall(() => forceRestart()),
+      this.notificationCenter.onPlatformDidInstall(() => forceRestart()),
+      this.notificationCenter.onPlatformDidUninstall(() => forceRestart()),
+      this.notificationCenter.onDidReinitialize(() => forceRestart()),
+      this.boardDataStore.onChanged((dataChangePerFqbn) => {
+        if (this.languageServerFqbn) {
+          const sanitizedFqbn = sanitizeFqbn(this.languageServerFqbn);
+          if (!sanitizeFqbn) {
+            throw new Error(
+              `Failed to sanitize the FQBN of the running language server. FQBN with the board settings was: ${this.languageServerFqbn}`
+            );
+          }
+          const matchingFqbn = dataChangePerFqbn.find(
+            (fqbn) => sanitizedFqbn === fqbn
+          );
+          const { boardsConfig } = this.boardsServiceProvider;
+          if (
+            matchingFqbn &&
+            boardsConfig.selectedBoard?.fqbn === matchingFqbn
+          ) {
+            start(boardsConfig);
+          }
+        }
+      }),
+    ]);
     start(this.boardsServiceProvider.boardsConfig);
   }
 
+  onStop(): void {
+    this.toDispose.dispose();
+  }
+
   private async startLanguageServer(
     fqbn: string,
     name: string | undefined,
@@ -101,11 +147,18 @@ export class InoLanguage extends SketchContribution {
         }
         return;
       }
-      if (!forceStart && fqbn === this.languageServerFqbn) {
+      assertSanitizedFqbn(fqbn);
+      const fqbnWithConfig = await this.boardDataStore.appendConfigToFqbn(fqbn);
+      if (!fqbnWithConfig) {
+        throw new Error(
+          `Failed to append boards config to the FQBN. Original FQBN was: ${fqbn}`
+        );
+      }
+      if (!forceStart && fqbnWithConfig === this.languageServerFqbn) {
         // NOOP
         return;
       }
-      this.logger.info(`Starting language server: ${fqbn}`);
+      this.logger.info(`Starting language server: ${fqbnWithConfig}`);
       const log = this.preferences.get('arduino.language.log');
       const realTimeDiagnostics = this.preferences.get(
         'arduino.language.realTimeDiagnostics'
@@ -141,7 +194,7 @@ export class InoLanguage extends SketchContribution {
             log: currentSketchPath ? currentSketchPath : log,
             cliDaemonInstance: '1',
             board: {
-              fqbn,
+              fqbn: fqbnWithConfig,
               name: name ? `"${name}"` : undefined,
             },
             realTimeDiagnostics,
@@ -150,7 +203,7 @@ export class InoLanguage extends SketchContribution {
         ),
       ]);
     } catch (e) {
-      console.log(`Failed to start language server for ${fqbn}`, e);
+      console.log(`Failed to start language server. Original FQBN: ${fqbn}`, e);
       this.languageServerFqbn = undefined;
     } finally {
       release();

arduino-ide-extension/src/browser/contributions/interface-scale.ts

@@ -1,31 +1,17 @@
-import { inject, injectable } from '@theia/core/shared/inversify';
+import { injectable } from '@theia/core/shared/inversify';
 import {
   Contribution,
   Command,
   MenuModelRegistry,
   KeybindingRegistry,
 } from './contribution';
-import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
-import {
-  CommandRegistry,
-  DisposableCollection,
-  MaybePromise,
-  nls,
-} from '@theia/core/lib/common';
-
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { CommandRegistry, MaybePromise, nls } from '@theia/core/lib/common';
 import { Settings } from '../dialogs/settings/settings';
-import { MainMenuManager } from '../../common/main-menu-manager';
 import debounce = require('lodash.debounce');
 
 @injectable()
 export class InterfaceScale extends Contribution {
-  @inject(MenuModelRegistry)
-  private readonly menuRegistry: MenuModelRegistry;
-
-  @inject(MainMenuManager)
-  private readonly mainMenuManager: MainMenuManager;
-
-  private readonly menuActionsDisposables = new DisposableCollection();
   private fontScalingEnabled: InterfaceScale.FontScalingEnabled = {
     increase: true,
     decrease: true,
@@ -62,63 +48,22 @@ export class InterfaceScale extends Contribution {
   }
 
   override registerMenus(registry: MenuModelRegistry): void {
-    this.menuActionsDisposables.dispose();
-    const increaseFontSizeMenuAction = {
+    registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
       commandId: InterfaceScale.Commands.INCREASE_FONT_SIZE.id,
       label: nls.localize(
         'arduino/editor/increaseFontSize',
         'Increase Font Size'
       ),
       order: '0',
-    };
-    const decreaseFontSizeMenuAction = {
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
       commandId: InterfaceScale.Commands.DECREASE_FONT_SIZE.id,
       label: nls.localize(
         'arduino/editor/decreaseFontSize',
         'Decrease Font Size'
       ),
       order: '1',
-    };
-
-    if (this.fontScalingEnabled.increase) {
-      this.menuActionsDisposables.push(
-        registry.registerMenuAction(
-          ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
-          increaseFontSizeMenuAction
-        )
-      );
-    } else {
-      this.menuActionsDisposables.push(
-        registry.registerMenuNode(
-          ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
-          new PlaceholderMenuNode(
-            ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
-            increaseFontSizeMenuAction.label,
-            { order: increaseFontSizeMenuAction.order }
-          )
-        )
-      );
-    }
-    if (this.fontScalingEnabled.decrease) {
-      this.menuActionsDisposables.push(
-        this.menuRegistry.registerMenuAction(
-          ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
-          decreaseFontSizeMenuAction
-        )
-      );
-    } else {
-      this.menuActionsDisposables.push(
-        this.menuRegistry.registerMenuNode(
-          ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
-          new PlaceholderMenuNode(
-            ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
-            decreaseFontSizeMenuAction.label,
-            { order: decreaseFontSizeMenuAction.order }
-          )
-        )
-      );
-    }
-    this.mainMenuManager.update();
+    });
   }
 
   private updateFontScalingEnabled(): void {
@@ -153,7 +98,7 @@ export class InterfaceScale extends Contribution {
     );
     if (isChanged) {
       this.fontScalingEnabled = fontScalingEnabled;
-      this.registerMenus(this.menuRegistry);
+      this.menuManager.update();
     }
   }
 

arduino-ide-extension/src/browser/contributions/new-cloud-sketch.ts

@@ -1,76 +1,62 @@
-import { DialogError } from '@theia/core/lib/browser/dialogs';
 import { KeybindingRegistry } from '@theia/core/lib/browser/keybinding';
-import { LabelProvider } from '@theia/core/lib/browser/label-provider';
 import { CompositeTreeNode } from '@theia/core/lib/browser/tree';
-import { Widget } from '@theia/core/lib/browser/widgets/widget';
-import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
-import {
-  Disposable,
-  DisposableCollection,
-} from '@theia/core/lib/common/disposable';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { MenuModelRegistry } from '@theia/core/lib/common/menu';
-import {
-  Progress,
-  ProgressUpdate,
-} from '@theia/core/lib/common/message-service-protocol';
+import { Progress } from '@theia/core/lib/common/message-service-protocol';
 import { nls } from '@theia/core/lib/common/nls';
-import { inject, injectable } from '@theia/core/shared/inversify';
-import { WorkspaceInputDialogProps } from '@theia/workspace/lib/browser/workspace-input-dialog';
-import { v4 } from 'uuid';
-import { MainMenuManager } from '../../common/main-menu-manager';
-import type { AuthenticationSession } from '../../node/auth/types';
-import { AuthenticationClientService } from '../auth/authentication-client-service';
-import { CreateApi } from '../create/create-api';
+import { injectable } from '@theia/core/shared/inversify';
 import { CreateUri } from '../create/create-uri';
-import { Create } from '../create/typings';
+import { Create, isConflict } from '../create/typings';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { WorkspaceInputDialog } from '../theia/workspace/workspace-input-dialog';
+import {
+  TaskFactoryImpl,
+  WorkspaceInputDialogWithProgress,
+} from '../theia/workspace/workspace-input-dialog';
 import { CloudSketchbookTree } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree';
 import { CloudSketchbookTreeModel } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree-model';
-import { CloudSketchbookTreeWidget } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree-widget';
 import { SketchbookCommands } from '../widgets/sketchbook/sketchbook-commands';
-import { SketchbookWidget } from '../widgets/sketchbook/sketchbook-widget';
-import { SketchbookWidgetContribution } from '../widgets/sketchbook/sketchbook-widget-contribution';
-import { Command, CommandRegistry, Contribution, URI } from './contribution';
+import {
+  CloudSketchContribution,
+  pullingSketch,
+  sketchAlreadyExists,
+  synchronizingSketchbook,
+} from './cloud-contribution';
+import { Command, CommandRegistry, Sketch } from './contribution';
+
+export interface CreateNewCloudSketchCallback {
+  (
+    newSketch: Create.Sketch,
+    newNode: CloudSketchbookTree.CloudSketchDirNode,
+    progress: Progress
+  ): Promise<void>;
+}
+
+export interface NewCloudSketchParams {
+  /**
+   * Value to populate the dialog `<input>` when it opens.
+   */
+  readonly initialValue?: string | undefined;
+  /**
+   * Additional callback to call when the new cloud sketch has been created.
+   */
+  readonly callback?: CreateNewCloudSketchCallback;
+  /**
+   * If `true`, the validation error message will not be visible in the input dialog, but the `OK` button will be disabled. Defaults to `true`.
+   */
+  readonly skipShowErrorMessageOnOpen?: boolean;
+}
 
 @injectable()
-export class NewCloudSketch extends Contribution {
-  @inject(CreateApi)
-  private readonly createApi: CreateApi;
-  @inject(SketchbookWidgetContribution)
-  private readonly widgetContribution: SketchbookWidgetContribution;
-  @inject(AuthenticationClientService)
-  private readonly authenticationService: AuthenticationClientService;
-  @inject(MainMenuManager)
-  private readonly mainMenuManager: MainMenuManager;
-
+export class NewCloudSketch extends CloudSketchContribution {
   private readonly toDispose = new DisposableCollection();
-  private _session: AuthenticationSession | undefined;
-  private _enabled: boolean;
 
   override onReady(): void {
     this.toDispose.pushAll([
-      this.authenticationService.onSessionDidChange((session) => {
-        const oldSession = this._session;
-        this._session = session;
-        if (!!oldSession !== !!this._session) {
-          this.mainMenuManager.update();
-        }
-      }),
-      this.preferences.onPreferenceChanged(({ preferenceName, newValue }) => {
-        if (preferenceName === 'arduino.cloud.enabled') {
-          const oldEnabled = this._enabled;
-          this._enabled = Boolean(newValue);
-          if (this._enabled !== oldEnabled) {
-            this.mainMenuManager.update();
-          }
-        }
-      }),
+      this.createFeatures.onDidChangeEnabled(() => this.menuManager.update()),
+      this.createFeatures.onDidChangeSession(() => this.menuManager.update()),
     ]);
-    this._enabled = this.preferences['arduino.cloud.enabled'];
-    this._session = this.authenticationService.session;
-    if (this._session) {
-      this.mainMenuManager.update();
+    if (this.createFeatures.session) {
+      this.menuManager.update();
     }
   }
 
@@ -80,16 +66,21 @@ export class NewCloudSketch extends Contribution {
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(NewCloudSketch.Commands.NEW_CLOUD_SKETCH, {
-      execute: () => this.createNewSketch(),
-      isEnabled: () => !!this._session,
-      isVisible: () => this._enabled,
+      execute: (params: NewCloudSketchParams) =>
+        this.createNewSketch(
+          params?.skipShowErrorMessageOnOpen === false ? false : true,
+          params?.initialValue,
+          params?.callback
+        ),
+      isEnabled: () => Boolean(this.createFeatures.session),
+      isVisible: () => this.createFeatures.enabled,
     });
   }
 
   override registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: NewCloudSketch.Commands.NEW_CLOUD_SKETCH.id,
-      label: nls.localize('arduino/cloudSketch/new', 'New Remote Sketch'),
+      label: nls.localize('arduino/cloudSketch/new', 'New Cloud Sketch'),
       order: '1',
     });
   }
@@ -102,154 +93,106 @@ export class NewCloudSketch extends Contribution {
   }
 
   private async createNewSketch(
-    initialValue?: string | undefined
-  ): Promise<unknown> {
-    const widget = await this.widgetContribution.widget;
-    const treeModel = this.treeModelFrom(widget);
-    if (!treeModel) {
-      return undefined;
-    }
-    const rootNode = CompositeTreeNode.is(treeModel.root)
-      ? treeModel.root
-      : undefined;
-    if (!rootNode) {
-      return undefined;
-    }
-    return this.openWizard(rootNode, treeModel, initialValue);
-  }
-
-  private withProgress(
-    value: string,
-    treeModel: CloudSketchbookTreeModel
-  ): (progress: Progress) => Promise<unknown> {
-    return async (progress: Progress) => {
-      let result: Create.Sketch | undefined | 'conflict';
-      try {
-        progress.report({
-          message: nls.localize(
-            'arduino/cloudSketch/creating',
-            "Creating remote sketch '{0}'...",
-            value
-          ),
-        });
-        result = await this.createApi.createSketch(value);
-      } catch (err) {
-        if (isConflict(err)) {
-          result = 'conflict';
-        } else {
-          throw err;
-        }
-      } finally {
-        if (result) {
-          progress.report({
-            message: nls.localize(
-              'arduino/cloudSketch/synchronizing',
-              "Synchronizing sketchbook, pulling '{0}'...",
-              value
-            ),
-          });
-          await treeModel.refresh();
-        }
-      }
-      if (result === 'conflict') {
-        return this.createNewSketch(value);
-      }
-      if (result) {
-        return this.open(treeModel, result);
-      }
-      return undefined;
-    };
-  }
-
-  private async open(
-    treeModel: CloudSketchbookTreeModel,
-    newSketch: Create.Sketch
-  ): Promise<URI | undefined> {
-    const id = CreateUri.toUri(newSketch).path.toString();
-    const node = treeModel.getNode(id);
-    if (!node) {
-      throw new Error(
-        `Could not find remote sketchbook tree node with Tree node ID: ${id}.`
+    skipShowErrorMessageOnOpen: boolean,
+    initialValue?: string | undefined,
+    callback?: CreateNewCloudSketchCallback
+  ): Promise<void> {
+    const treeModel = await this.treeModel();
+    if (treeModel) {
+      const rootNode = treeModel.root;
+      return this.openWizard(
+        rootNode,
+        treeModel,
+        skipShowErrorMessageOnOpen,
+        initialValue,
+        callback
       );
     }
-    if (!CloudSketchbookTree.CloudSketchDirNode.is(node)) {
-      throw new Error(
-        `Remote sketchbook tree node expected to represent a directory but it did not. Tree node ID: ${id}.`
-      );
-    }
-    try {
-      await treeModel.sketchbookTree().pull({ node });
-    } catch (err) {
-      if (isNotFound(err)) {
-        await treeModel.refresh();
-        this.messageService.error(
-          nls.localize(
-            'arduino/newCloudSketch/notFound',
-            "Could not pull the remote sketch '{0}'. It does not exist.",
-            newSketch.name
-          )
-        );
-        return undefined;
-      }
-      throw err;
-    }
-    return this.commandService.executeCommand(
-      SketchbookCommands.OPEN_NEW_WINDOW.id,
-      { node }
-    );
-  }
-
-  private treeModelFrom(
-    widget: SketchbookWidget
-  ): CloudSketchbookTreeModel | undefined {
-    for (const treeWidget of widget.getTreeWidgets()) {
-      if (treeWidget instanceof CloudSketchbookTreeWidget) {
-        const model = treeWidget.model;
-        if (model instanceof CloudSketchbookTreeModel) {
-          return model;
-        }
-      }
-    }
-    return undefined;
   }
 
   private async openWizard(
     rootNode: CompositeTreeNode,
     treeModel: CloudSketchbookTreeModel,
-    initialValue?: string | undefined
-  ): Promise<unknown> {
+    skipShowErrorMessageOnOpen: boolean,
+    initialValue?: string | undefined,
+    callback?: CreateNewCloudSketchCallback
+  ): Promise<void> {
     const existingNames = rootNode.children
       .filter(CloudSketchbookTree.CloudSketchDirNode.is)
       .map(({ fileStat }) => fileStat.name);
-    return new NewCloudSketchDialog(
-      {
-        title: nls.localize(
-          'arduino/newCloudSketch/newSketchTitle',
-          'Name of a new Remote Sketch'
-        ),
-        parentUri: CreateUri.root,
-        initialValue,
-        validate: (input) => {
-          if (existingNames.includes(input)) {
-            return nls.localize(
-              'arduino/newCloudSketch/sketchAlreadyExists',
-              "Remote sketch '{0}' already exists.",
-              input
-            );
-          }
-          // This is how https://create.arduino.cc/editor/ works when renaming a sketch.
-          if (/^[0-9a-zA-Z_]{1,36}$/.test(input)) {
-            return '';
-          }
-          return nls.localize(
-            'arduino/newCloudSketch/invalidSketchName',
-            'The name must consist of basic letters, numbers, or underscores. The maximum length is 36 characters.'
-          );
+    const taskFactory = new TaskFactoryImpl((value) =>
+      this.createNewSketchWithProgress(treeModel, value, callback)
+    );
+    try {
+      const dialog = new WorkspaceInputDialogWithProgress(
+        {
+          title: nls.localize(
+            'arduino/newCloudSketch/newSketchTitle',
+            'Name of the new Cloud Sketch'
+          ),
+          parentUri: CreateUri.root,
+          initialValue,
+          validate: (input) => {
+            if (existingNames.includes(input)) {
+              return sketchAlreadyExists(input);
+            }
+            return Sketch.validateCloudSketchFolderName(input) ?? '';
+          },
         },
-      },
-      this.labelProvider,
-      (value) => this.withProgress(value, treeModel)
-    ).open();
+        this.labelProvider,
+        taskFactory
+      );
+      await dialog.open(skipShowErrorMessageOnOpen);
+      if (dialog.taskResult) {
+        this.openInNewWindow(dialog.taskResult);
+      }
+    } catch (err) {
+      if (isConflict(err)) {
+        await treeModel.refresh();
+        return this.createNewSketch(
+          false,
+          taskFactory.value ?? initialValue,
+          callback
+        );
+      }
+      throw err;
+    }
+  }
+
+  private createNewSketchWithProgress(
+    treeModel: CloudSketchbookTreeModel,
+    value: string,
+    callback?: CreateNewCloudSketchCallback
+  ): (
+    progress: Progress
+  ) => Promise<CloudSketchbookTree.CloudSketchDirNode | undefined> {
+    return async (progress: Progress) => {
+      progress.report({
+        message: nls.localize(
+          'arduino/cloudSketch/creating',
+          "Creating cloud sketch '{0}'...",
+          value
+        ),
+      });
+      const sketch = await this.createApi.createSketch(value);
+      progress.report({ message: synchronizingSketchbook });
+      await treeModel.refresh();
+      progress.report({ message: pullingSketch(sketch.name) });
+      const node = await this.pull(sketch);
+      if (callback && node) {
+        await callback(sketch, node, progress);
+      }
+      return node;
+    };
+  }
+
+  private openInNewWindow(
+    node: CloudSketchbookTree.CloudSketchDirNode
+  ): Promise<void> {
+    return this.commandService.executeCommand(
+      SketchbookCommands.OPEN_NEW_WINDOW.id,
+      { node, treeWidgetId: 'cloud-sketchbook-composite-widget' }
+    );
   }
 }
 export namespace NewCloudSketch {
@@ -259,115 +202,3 @@ export namespace NewCloudSketch {
     };
   }
 }
-
-function isConflict(err: unknown): boolean {
-  return isErrorWithStatusOf(err, 409);
-}
-function isNotFound(err: unknown): boolean {
-  return isErrorWithStatusOf(err, 404);
-}
-function isErrorWithStatusOf(
-  err: unknown,
-  status: number
-): err is Error & { status: number } {
-  if (err instanceof Error) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const object = err as any;
-    return 'status' in object && object.status === status;
-  }
-  return false;
-}
-
-@injectable()
-class NewCloudSketchDialog extends WorkspaceInputDialog {
-  constructor(
-    @inject(WorkspaceInputDialogProps)
-    protected override readonly props: WorkspaceInputDialogProps,
-    @inject(LabelProvider)
-    protected override readonly labelProvider: LabelProvider,
-    private readonly withProgress: (
-      value: string
-    ) => (progress: Progress) => Promise<unknown>
-  ) {
-    super(props, labelProvider);
-  }
-  protected override async accept(): Promise<void> {
-    if (!this.resolve) {
-      return;
-    }
-    this.acceptCancellationSource.cancel();
-    this.acceptCancellationSource = new CancellationTokenSource();
-    const token = this.acceptCancellationSource.token;
-    const value = this.value;
-    const error = await this.isValid(value, 'open');
-    if (token.isCancellationRequested) {
-      return;
-    }
-    if (!DialogError.getResult(error)) {
-      this.setErrorMessage(error);
-    } else {
-      const spinner = document.createElement('div');
-      spinner.classList.add('spinner');
-      const disposables = new DisposableCollection();
-      try {
-        this.toggleButtons(true);
-        disposables.push(Disposable.create(() => this.toggleButtons(false)));
-
-        const closeParent = this.closeCrossNode.parentNode;
-        closeParent?.removeChild(this.closeCrossNode);
-        disposables.push(
-          Disposable.create(() => {
-            closeParent?.appendChild(this.closeCrossNode);
-          })
-        );
-
-        this.errorMessageNode.classList.add('progress');
-        disposables.push(
-          Disposable.create(() =>
-            this.errorMessageNode.classList.remove('progress')
-          )
-        );
-
-        const errorParent = this.errorMessageNode.parentNode;
-        errorParent?.insertBefore(spinner, this.errorMessageNode);
-        disposables.push(
-          Disposable.create(() => errorParent?.removeChild(spinner))
-        );
-
-        const cancellationSource = new CancellationTokenSource();
-        const progress: Progress = {
-          id: v4(),
-          cancel: () => cancellationSource.cancel(),
-          report: (update: ProgressUpdate) => {
-            this.setProgressMessage(update);
-          },
-          result: Promise.resolve(value),
-        };
-        await this.withProgress(value)(progress);
-      } finally {
-        disposables.dispose();
-      }
-      this.resolve(value);
-      Widget.detach(this);
-    }
-  }
-
-  private toggleButtons(disabled: boolean): void {
-    if (this.acceptButton) {
-      this.acceptButton.disabled = disabled;
-    }
-    if (this.closeButton) {
-      this.closeButton.disabled = disabled;
-    }
-  }
-
-  private setProgressMessage(update: ProgressUpdate): void {
-    if (update.work && update.work.done === update.work.total) {
-      this.errorMessageNode.innerText = '';
-    } else {
-      if (update.message) {
-        this.errorMessageNode.innerText = update.message;
-      }
-    }
-  }
-}

arduino-ide-extension/src/browser/contributions/new-sketch.ts

@@ -35,7 +35,7 @@ export class NewSketch extends SketchContribution {
 
   async newSketch(): Promise<void> {
     try {
-      const sketch = await this.sketchService.createNewSketch();
+      const sketch = await this.sketchesService.createNewSketch();
       this.workspaceService.open(new URI(sketch.uri));
     } catch (e) {
       await this.messageService.error(e.toString());

arduino-ide-extension/src/browser/contributions/open-recent-sketch.ts

@@ -47,7 +47,7 @@ export class OpenRecentSketch extends SketchContribution {
   }
 
   private update(forceUpdate?: boolean): void {
-    this.sketchService
+    this.sketchesService
       .recentlyOpenedSketches(forceUpdate)
       .then((sketches) => this.refreshMenu(sketches));
   }

arduino-ide-extension/src/browser/contributions/open-settings.ts

@@ -1,32 +1,34 @@
+import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable } from '@theia/core/shared/inversify';
+import type { Settings } from '../dialogs/settings/settings';
+import { SettingsDialog } from '../dialogs/settings/settings-dialog';
+import { ArduinoMenus } from '../menu/arduino-menus';
 import {
   Command,
-  MenuModelRegistry,
   CommandRegistry,
-  SketchContribution,
   KeybindingRegistry,
+  MenuModelRegistry,
+  SketchContribution,
 } from './contribution';
-import { ArduinoMenus } from '../menu/arduino-menus';
-import { Settings as Preferences } from '../dialogs/settings/settings';
-import { SettingsDialog } from '../dialogs/settings/settings-dialog';
-import { nls } from '@theia/core/lib/common';
 
 @injectable()
-export class Settings extends SketchContribution {
+export class OpenSettings extends SketchContribution {
   @inject(SettingsDialog)
-  protected readonly settingsDialog: SettingsDialog;
+  private readonly settingsDialog: SettingsDialog;
 
-  protected settingsOpened = false;
+  private settingsOpened = false;
 
   override registerCommands(registry: CommandRegistry): void {
-    registry.registerCommand(Settings.Commands.OPEN, {
+    registry.registerCommand(OpenSettings.Commands.OPEN, {
       execute: async () => {
-        let settings: Preferences | undefined = undefined;
+        let settings: Settings | undefined = undefined;
         try {
           this.settingsOpened = true;
+          this.menuManager.update();
           settings = await this.settingsDialog.open();
         } finally {
           this.settingsOpened = false;
+          this.menuManager.update();
         }
         if (settings) {
           await this.settingsService.update(settings);
@@ -41,7 +43,7 @@ export class Settings extends SketchContribution {
 
   override registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__PREFERENCES_GROUP, {
-      commandId: Settings.Commands.OPEN.id,
+      commandId: OpenSettings.Commands.OPEN.id,
       label:
         nls.localize(
           'vscode/preferences.contribution/preferences',
@@ -57,13 +59,13 @@ export class Settings extends SketchContribution {
 
   override registerKeybindings(registry: KeybindingRegistry): void {
     registry.registerKeybinding({
-      command: Settings.Commands.OPEN.id,
+      command: OpenSettings.Commands.OPEN.id,
       keybinding: 'CtrlCmd+,',
     });
   }
 }
 
-export namespace Settings {
+export namespace OpenSettings {
   export namespace Commands {
     export const OPEN: Command = {
       id: 'arduino-settings-open',

arduino-ide-extension/src/browser/contributions/open-sketch-files.ts

@@ -39,13 +39,17 @@ export class OpenSketchFiles extends SketchContribution {
     focusMainSketchFile = false
   ): Promise<void> {
     try {
-      const sketch = await this.sketchService.loadSketch(uri.toString());
+      const sketch = await this.sketchesService.loadSketch(uri.toString());
       const { mainFileUri, rootFolderFileUris } = sketch;
       for (const uri of [mainFileUri, ...rootFolderFileUris]) {
         await this.ensureOpened(uri);
       }
       if (focusMainSketchFile) {
-        await this.ensureOpened(mainFileUri, true, { mode: 'activate' });
+        await this.ensureOpened(mainFileUri, true, {
+          mode: 'activate',
+          preview: false,
+          counter: 0,
+        });
       }
       if (mainFileUri.endsWith('.pde')) {
         const message = nls.localize(
@@ -112,7 +116,7 @@ export class OpenSketchFiles extends SketchContribution {
     await wait(250); // let IDE2 open the editor and toast the error message, then open the modal dialog
     const movedSketch = await promptMoveSketch(invalidMainSketchUri, {
       fileService: this.fileService,
-      sketchService: this.sketchService,
+      sketchesService: this.sketchesService,
       labelProvider: this.labelProvider,
     });
     if (movedSketch) {
@@ -125,7 +129,7 @@ export class OpenSketchFiles extends SketchContribution {
   }
 
   private async openFallbackSketch(): Promise<void> {
-    const sketch = await this.sketchService.createNewSketch();
+    const sketch = await this.sketchesService.createNewSketch();
     this.workspaceService.open(new URI(sketch.uri), { preserveWindow: true });
   }
 

arduino-ide-extension/src/browser/contributions/open-sketch.ts

@@ -71,7 +71,7 @@ export class OpenSketch extends SketchContribution {
     }
     const uri = SketchLocation.toUri(toOpen);
     try {
-      await this.sketchService.loadSketch(uri.toString());
+      await this.sketchesService.loadSketch(uri.toString());
     } catch (err) {
       if (SketchesError.NotFound.is(err)) {
         this.messageService.error(err.message);
@@ -82,10 +82,7 @@ export class OpenSketch extends SketchContribution {
   }
 
   private async selectSketch(): Promise<Sketch | undefined> {
-    const config = await this.configService.getConfiguration();
-    const defaultPath = await this.fileService.fsPath(
-      new URI(config.sketchDirUri)
-    );
+    const defaultPath = await this.defaultPath();
     const { filePaths } = await remote.dialog.showOpenDialog(
       remote.getCurrentWindow(),
       {
@@ -109,14 +106,14 @@ export class OpenSketch extends SketchContribution {
     }
     const sketchFilePath = filePaths[0];
     const sketchFileUri = await this.fileSystemExt.getUri(sketchFilePath);
-    const sketch = await this.sketchService.getSketchFolder(sketchFileUri);
+    const sketch = await this.sketchesService.getSketchFolder(sketchFileUri);
     if (sketch) {
       return sketch;
     }
     if (Sketch.isSketchFile(sketchFileUri)) {
       return promptMoveSketch(sketchFileUri, {
         fileService: this.fileService,
-        sketchService: this.sketchService,
+        sketchesService: this.sketchesService,
         labelProvider: this.labelProvider,
       });
     }
@@ -135,11 +132,11 @@ export async function promptMoveSketch(
   sketchFileUri: string | URI,
   options: {
     fileService: FileService;
-    sketchService: SketchesService;
+    sketchesService: SketchesService;
     labelProvider: LabelProvider;
   }
 ): Promise<Sketch | undefined> {
-  const { fileService, sketchService, labelProvider } = options;
+  const { fileService, sketchesService, labelProvider } = options;
   const uri =
     sketchFileUri instanceof URI ? sketchFileUri : new URI(sketchFileUri);
   const name = uri.path.name;
@@ -179,6 +176,6 @@ export async function promptMoveSketch(
       uri,
       new URI(newSketchUri.resolve(nameWithExt).toString())
     );
-    return sketchService.getSketchFolder(newSketchUri.toString());
+    return sketchesService.getSketchFolder(newSketchUri.toString());
   }
 }

arduino-ide-extension/src/browser/contributions/rename-cloud-sketch.ts

@@ -0,0 +1,166 @@
+import { CompositeTreeNode } from '@theia/core/lib/browser/tree';
+import { Progress } from '@theia/core/lib/common/message-service-protocol';
+import { nls } from '@theia/core/lib/common/nls';
+import { injectable } from '@theia/core/shared/inversify';
+import { CreateUri } from '../create/create-uri';
+import { isConflict } from '../create/typings';
+import {
+  TaskFactoryImpl,
+  WorkspaceInputDialogWithProgress,
+} from '../theia/workspace/workspace-input-dialog';
+import { CloudSketchbookTree } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree';
+import { CloudSketchbookTreeModel } from '../widgets/cloud-sketchbook/cloud-sketchbook-tree-model';
+import {
+  CloudSketchContribution,
+  pullingSketch,
+  pushingSketch,
+  sketchAlreadyExists,
+  synchronizingSketchbook,
+} from './cloud-contribution';
+import { Command, CommandRegistry, Sketch, URI } from './contribution';
+
+export interface RenameCloudSketchParams {
+  readonly cloudUri: URI;
+  readonly sketch: Sketch;
+}
+
+@injectable()
+export class RenameCloudSketch extends CloudSketchContribution {
+  override registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(RenameCloudSketch.Commands.RENAME_CLOUD_SKETCH, {
+      execute: (params: RenameCloudSketchParams) =>
+        this.renameSketch(params, true),
+    });
+  }
+
+  private async renameSketch(
+    params: RenameCloudSketchParams,
+    skipShowErrorMessageOnOpen: boolean,
+    initValue: string = params.sketch.name
+  ): Promise<string | undefined> {
+    const treeModel = await this.treeModel();
+    if (treeModel) {
+      const posixPath = params.cloudUri.path.toString();
+      const node = treeModel.getNode(posixPath);
+      const parentNode = node?.parent;
+      if (
+        CloudSketchbookTree.CloudSketchDirNode.is(node) &&
+        CompositeTreeNode.is(parentNode)
+      ) {
+        return this.openWizard(
+          params,
+          node,
+          parentNode,
+          treeModel,
+          skipShowErrorMessageOnOpen,
+          initValue
+        );
+      }
+    }
+    return undefined;
+  }
+
+  private async openWizard(
+    params: RenameCloudSketchParams,
+    node: CloudSketchbookTree.CloudSketchDirNode,
+    parentNode: CompositeTreeNode,
+    treeModel: CloudSketchbookTreeModel,
+    skipShowErrorMessageOnOpen: boolean,
+    initialValue?: string | undefined
+  ): Promise<string | undefined> {
+    const parentUri = CloudSketchbookTree.CloudSketchDirNode.is(parentNode)
+      ? parentNode.uri
+      : CreateUri.root;
+    const existingNames = parentNode.children
+      .filter(CloudSketchbookTree.CloudSketchDirNode.is)
+      .map(({ fileStat }) => fileStat.name);
+    const taskFactory = new TaskFactoryImpl((value) =>
+      this.renameSketchWithProgress(params, node, treeModel, value)
+    );
+    try {
+      const dialog = new WorkspaceInputDialogWithProgress(
+        {
+          title: nls.localize(
+            'arduino/renameCloudSketch/renameSketchTitle',
+            'New name of the Cloud Sketch'
+          ),
+          parentUri,
+          initialValue,
+          validate: (input) => {
+            if (existingNames.includes(input)) {
+              return sketchAlreadyExists(input);
+            }
+            return Sketch.validateCloudSketchFolderName(input) ?? '';
+          },
+        },
+        this.labelProvider,
+        taskFactory
+      );
+      await dialog.open(skipShowErrorMessageOnOpen);
+      return dialog.taskResult;
+    } catch (err) {
+      if (isConflict(err)) {
+        await treeModel.refresh();
+        return this.renameSketch(
+          params,
+          false,
+          taskFactory.value ?? initialValue
+        );
+      }
+      throw err;
+    }
+  }
+
+  private renameSketchWithProgress(
+    params: RenameCloudSketchParams,
+    node: CloudSketchbookTree.CloudSketchDirNode,
+    treeModel: CloudSketchbookTreeModel,
+    value: string
+  ): (progress: Progress) => Promise<string | undefined> {
+    return async (progress: Progress) => {
+      const fromName = params.cloudUri.path.name;
+      const fromPosixPath = params.cloudUri.path.toString();
+      const toPosixPath = params.cloudUri.parent.resolve(value).path.toString();
+      // push
+      progress.report({ message: pushingSketch(params.sketch.name) });
+      await treeModel.sketchbookTree().push(node, true);
+
+      // rename
+      progress.report({
+        message: nls.localize(
+          'arduino/cloudSketch/renaming',
+          "Renaming cloud sketch from '{0}' to '{1}'...",
+          fromName,
+          value
+        ),
+      });
+      await this.createApi.rename(fromPosixPath, toPosixPath);
+
+      // sync
+      progress.report({
+        message: synchronizingSketchbook,
+      });
+      this.createApi.sketchCache.init(); // invalidate the cache
+      await this.createApi.sketches(); // IDE2 must pull all sketches to find the new one
+      const sketch = this.createApi.sketchCache.getSketch(toPosixPath);
+      if (!sketch) {
+        return undefined;
+      }
+      await treeModel.refresh();
+
+      // pull
+      progress.report({ message: pullingSketch(sketch.name) });
+      const pulledNode = await this.pull(sketch);
+      return pulledNode
+        ? node.uri.parent.resolve(sketch.name).toString()
+        : undefined;
+    };
+  }
+}
+export namespace RenameCloudSketch {
+  export namespace Commands {
+    export const RENAME_CLOUD_SKETCH: Command = {
+      id: 'arduino-rename-cloud-sketch',
+    };
+  }
+}

arduino-ide-extension/src/browser/contributions/save-as-sketch.ts

@@ -1,28 +1,35 @@
-import { inject, injectable } from '@theia/core/shared/inversify';
 import * as remote from '@theia/core/electron-shared/@electron/remote';
-import * as dateFormat from 'dateformat';
+import { Dialog } from '@theia/core/lib/browser/dialogs';
+import { NavigatableWidget } from '@theia/core/lib/browser/navigatable';
+import { Saveable } from '@theia/core/lib/browser/saveable';
+import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { nls } from '@theia/core/lib/common/nls';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
+import { WorkspaceInput } from '@theia/workspace/lib/browser/workspace-service';
+import { StartupTask } from '../../electron-common/startup-task';
 import { ArduinoMenus } from '../menu/arduino-menus';
+import { CurrentSketch } from '../sketches-service-client-impl';
+import { CloudSketchContribution } from './cloud-contribution';
 import {
-  SketchContribution,
-  URI,
   Command,
   CommandRegistry,
-  MenuModelRegistry,
   KeybindingRegistry,
+  MenuModelRegistry,
+  Sketch,
+  URI,
 } from './contribution';
-import { nls } from '@theia/core/lib/common';
-import { ApplicationShell, NavigatableWidget, Saveable } from '@theia/core/lib/browser';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
-import { WorkspaceInput } from '@theia/workspace/lib/browser';
-import { StartupTask } from '../../electron-common/startup-task';
 import { DeleteSketch } from './delete-sketch';
+import {
+  RenameCloudSketch,
+  RenameCloudSketchParams,
+} from './rename-cloud-sketch';
 
 @injectable()
-export class SaveAsSketch extends SketchContribution {
+export class SaveAsSketch extends CloudSketchContribution {
   @inject(ApplicationShell)
-  private readonly applicationShell: ApplicationShell;
-
+  private readonly shell: ApplicationShell;
   @inject(WindowService)
   private readonly windowService: WindowService;
 
@@ -35,7 +42,7 @@ export class SaveAsSketch extends SketchContribution {
   override registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
-      label: nls.localize('vscode/fileCommands/saveAs', 'Save As...'),
+      label: nls.localizeByDefault('Save As...'),
       order: '7',
     });
   }
@@ -58,21 +65,73 @@ export class SaveAsSketch extends SketchContribution {
       markAsRecentlyOpened,
     }: SaveAsSketch.Options = SaveAsSketch.Options.DEFAULT
   ): Promise<boolean> {
-    const [sketch, configuration] = await Promise.all([
-      this.sketchServiceClient.currentSketch(),
-      this.configService.getConfiguration(),
-    ]);
+    const sketch = await this.sketchServiceClient.currentSketch();
     if (!CurrentSketch.isValid(sketch)) {
       return false;
     }
 
-    const isTemp = await this.sketchService.isTemp(sketch);
-    if (!isTemp && !!execOnlyIfTemp) {
+    let destinationUri: string | undefined;
+    const cloudUri = this.createFeatures.cloudUri(sketch);
+    if (cloudUri) {
+      destinationUri = await this.createCloudCopy({ cloudUri, sketch });
+    } else {
+      destinationUri = await this.createLocalCopy(sketch, execOnlyIfTemp);
+    }
+    if (!destinationUri) {
       return false;
     }
 
+    const copiedSketch = await this.sketchesService.copy(sketch, {
+      destinationUri,
+    });
+    const newWorkspaceUri = copiedSketch.uri;
+
+    await saveOntoCopiedSketch(
+      sketch,
+      newWorkspaceUri,
+      this.shell,
+      this.editorManager
+    );
+    if (markAsRecentlyOpened) {
+      this.sketchesService.markAsRecentlyOpened(newWorkspaceUri);
+    }
+    const options: WorkspaceInput & StartupTask.Owner = {
+      preserveWindow: true,
+      tasks: [],
+    };
+    if (openAfterMove) {
+      this.windowService.setSafeToShutDown();
+      if (wipeOriginal || (openAfterMove && execOnlyIfTemp)) {
+        options.tasks.push({
+          command: DeleteSketch.Commands.DELETE_SKETCH.id,
+          args: [{ toDelete: sketch.uri }],
+        });
+      }
+      this.workspaceService.open(new URI(newWorkspaceUri), options);
+    }
+    return !!newWorkspaceUri;
+  }
+
+  private async createCloudCopy(
+    params: RenameCloudSketchParams
+  ): Promise<string | undefined> {
+    return this.commandService.executeCommand<string>(
+      RenameCloudSketch.Commands.RENAME_CLOUD_SKETCH.id,
+      params
+    );
+  }
+
+  private async createLocalCopy(
+    sketch: Sketch,
+    execOnlyIfTemp?: boolean
+  ): Promise<string | undefined> {
+    const isTemp = await this.sketchesService.isTemp(sketch);
+    if (!isTemp && !!execOnlyIfTemp) {
+      return undefined;
+    }
+
     const sketchUri = new URI(sketch.uri);
-    const sketchbookDirUri = new URI(configuration.sketchDirUri);
+    const sketchbookDirUri = await this.defaultUri();
     // If the sketch is temp, IDE2 proposes the default sketchbook folder URI.
     // If the sketch is not temp, but not contained in the default sketchbook folder, IDE2 proposes the default location.
     // Otherwise, it proposes the parent folder of the current sketch.
@@ -87,91 +146,110 @@ export class SaveAsSketch extends SketchContribution {
 
     // If target does not exist, propose a `directories.user`/${sketch.name} path
     // If target exists, propose `directories.user`/${sketch.name}_copy_${yyyymmddHHMMss}
+    // IDE2 must never prompt an invalid sketch folder name (https://github.com/arduino/arduino-ide/pull/1833#issuecomment-1412569252)
     const defaultUri = containerDirUri.resolve(
-      exists
-        ? `${sketch.name}_copy_${dateFormat(new Date(), 'yyyymmddHHMMss')}`
-        : sketch.name
+      Sketch.toValidSketchFolderName(sketch.name, exists)
     );
     const defaultPath = await this.fileService.fsPath(defaultUri);
-    const { filePath, canceled } = await remote.dialog.showSaveDialog(
-      remote.getCurrentWindow(),
-      {
-        title: nls.localize(
-          'arduino/sketch/saveFolderAs',
-          'Save sketch folder as...'
-        ),
-        defaultPath,
-      }
-    );
-    if (!filePath || canceled) {
-      return false;
-    }
-    const destinationUri = await this.fileSystemExt.getUri(filePath);
-    if (!destinationUri) {
-      return false;
-    }
-    const workspaceUri = await this.sketchService.copy(sketch, {
-      destinationUri,
-    });
-    if (workspaceUri) {
-      await this.saveOntoCopiedSketch(sketch.mainFileUri, sketch.uri, workspaceUri);
-      if (markAsRecentlyOpened) {
-        this.sketchService.markAsRecentlyOpened(workspaceUri);
-      }
-    }
-    const options: WorkspaceInput & StartupTask.Owner = {
-      preserveWindow: true,
-      tasks: [],
-    };
-    if (workspaceUri && openAfterMove) {
-      this.windowService.setSafeToShutDown();
-      if (wipeOriginal || (openAfterMove && execOnlyIfTemp)) {
-        options.tasks.push({
-          command: DeleteSketch.Commands.DELETE_SKETCH.id,
-          args: [sketch.uri],
-        });
-      }
-      this.workspaceService.open(new URI(workspaceUri), options);
-    }
-    return !!workspaceUri;
+    return await this.promptLocalSketchFolderDestination(sketch, defaultPath);
   }
 
-  private async saveOntoCopiedSketch(mainFileUri: string, sketchUri: string, newSketchUri: string): Promise<void> {
-    const widgets = this.applicationShell.widgets;
-    const snapshots = new Map<string, object>();
-    for (const widget of widgets) {
-      const saveable = Saveable.getDirty(widget);
-      const uri = NavigatableWidget.getUri(widget);
-      const uriString = uri?.toString();
-      let relativePath: string;
-      if (uri && uriString!.includes(sketchUri) && saveable && saveable.createSnapshot) {
-        // The main file will change its name during the copy process
-        // We need to store the new name in the map
-        if (mainFileUri === uriString) {
-          const lastPart = new URI(newSketchUri).path.base + uri.path.ext;
-          relativePath = '/' + lastPart;
-        } else {
-          relativePath = uri.toString().substring(sketchUri.length);
+  /**
+   * Prompts for the new sketch folder name until a valid one is give,
+   * then resolves with the destination sketch folder URI string,
+   * or `undefined` if the operation was canceled.
+   */
+  private async promptLocalSketchFolderDestination(
+    sketch: Sketch,
+    defaultPath: string
+  ): Promise<string | undefined> {
+    let sketchFolderDestinationUri: string | undefined;
+    while (!sketchFolderDestinationUri) {
+      const { filePath } = await remote.dialog.showSaveDialog(
+        remote.getCurrentWindow(),
+        {
+          title: nls.localize(
+            'arduino/sketch/saveFolderAs',
+            'Save sketch folder as...'
+          ),
+          defaultPath,
         }
-        snapshots.set(relativePath, saveable.createSnapshot());
+      );
+      if (!filePath) {
+        return undefined;
+      }
+      const destinationUri = await this.fileSystemExt.getUri(filePath);
+      // The new location of the sketch cannot be inside the location of current sketch.
+      // https://github.com/arduino/arduino-ide/issues/1882
+      let dialogContent: InvalidSketchFolderDialogContent | undefined;
+      if (new URI(sketch.uri).isEqualOrParent(new URI(destinationUri))) {
+        dialogContent = {
+          message: nls.localize(
+            'arduino/sketch/invalidSketchFolderLocationMessage',
+            "Invalid sketch folder location: '{0}'",
+            filePath
+          ),
+          details: nls.localize(
+            'arduino/sketch/invalidSketchFolderLocationDetails',
+            'You cannot save a sketch into a folder inside itself.'
+          ),
+          question: nls.localize(
+            'arduino/sketch/editInvalidSketchFolderLocationQuestion',
+            'Do you want to try saving the sketch to a different location?'
+          ),
+        };
+      }
+      if (!dialogContent) {
+        const sketchFolderName = new URI(destinationUri).path.base;
+        const errorMessage = Sketch.validateSketchFolderName(sketchFolderName);
+        if (errorMessage) {
+          dialogContent = {
+            message: nls.localize(
+              'arduino/sketch/invalidSketchFolderNameMessage',
+              "Invalid sketch folder name: '{0}'",
+              sketchFolderName
+            ),
+            details: errorMessage,
+            question: nls.localize(
+              'arduino/sketch/editInvalidSketchFolderQuestion',
+              'Do you want to try saving the sketch with a different name?'
+            ),
+          };
+        }
+      }
+      if (dialogContent) {
+        const message = `
+${dialogContent.message}
+
+${dialogContent.details}
+
+${dialogContent.question}`.trim();
+        defaultPath = filePath;
+        const { response } = await remote.dialog.showMessageBox(
+          remote.getCurrentWindow(),
+          {
+            message,
+            buttons: [Dialog.CANCEL, Dialog.YES],
+          }
+        );
+        // cancel
+        if (response === 0) {
+          return undefined;
+        }
+      } else {
+        sketchFolderDestinationUri = destinationUri;
       }
     }
-    await Promise.all(Array.from(snapshots.entries()).map(async ([path, snapshot]) => {
-      const widgetUri = new URI(newSketchUri + path);
-      try {
-        const widget = await this.editorManager.getOrCreateByUri(widgetUri);
-        const saveable = Saveable.get(widget);
-        if (saveable && saveable.applySnapshot) {
-          saveable.applySnapshot(snapshot);
-          await saveable.save();
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    }));
+    return sketchFolderDestinationUri;
   }
 }
 
+interface InvalidSketchFolderDialogContent {
+  readonly message: string;
+  readonly details: string;
+  readonly question: string;
+}
+
 export namespace SaveAsSketch {
   export namespace Commands {
     export const SAVE_AS_SKETCH: Command = {
@@ -196,3 +274,48 @@ export namespace SaveAsSketch {
     };
   }
 }
+
+export async function saveOntoCopiedSketch(
+  sketch: Sketch,
+  newSketchFolderUri: string,
+  shell: ApplicationShell,
+  editorManager: EditorManager
+): Promise<void> {
+  const widgets = shell.widgets;
+  const snapshots = new Map<string, Saveable.Snapshot>();
+  for (const widget of widgets) {
+    const saveable = Saveable.getDirty(widget);
+    const uri = NavigatableWidget.getUri(widget);
+    if (!uri) {
+      continue;
+    }
+    const uriString = uri.toString();
+    let relativePath: string;
+    if (uriString.includes(sketch.uri) && saveable && saveable.createSnapshot) {
+      // The main file will change its name during the copy process
+      // We need to store the new name in the map
+      if (sketch.mainFileUri === uriString) {
+        const lastPart = new URI(newSketchFolderUri).path.base + uri.path.ext;
+        relativePath = '/' + lastPart;
+      } else {
+        relativePath = uri.toString().substring(sketch.uri.length);
+      }
+      snapshots.set(relativePath, saveable.createSnapshot());
+    }
+  }
+  await Promise.all(
+    Array.from(snapshots.entries()).map(async ([path, snapshot]) => {
+      const widgetUri = new URI(newSketchFolderUri + path);
+      try {
+        const widget = await editorManager.getOrCreateByUri(widgetUri);
+        const saveable = Saveable.get(widget);
+        if (saveable && saveable.applySnapshot) {
+          saveable.applySnapshot(snapshot);
+          await saveable.save();
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    })
+  );
+}

arduino-ide-extension/src/browser/contributions/save-sketch.ts

@@ -10,7 +10,7 @@ import {
   KeybindingRegistry,
 } from './contribution';
 import { nls } from '@theia/core/lib/common';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 
 @injectable()
 export class SaveSketch extends SketchContribution {
@@ -40,7 +40,7 @@ export class SaveSketch extends SketchContribution {
     if (!CurrentSketch.isValid(sketch)) {
       return;
     }
-    const isTemp = await this.sketchService.isTemp(sketch);
+    const isTemp = await this.sketchesService.isTemp(sketch);
     if (isTemp) {
       return this.commandService.executeCommand(
         SaveAsSketch.Commands.SAVE_AS_SKETCH.id,

arduino-ide-extension/src/browser/contributions/sketch-control.ts

@@ -1,50 +1,34 @@
-import { inject, injectable } from '@theia/core/shared/inversify';
 import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
-import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
-import { WorkspaceCommands } from '@theia/workspace/lib/browser';
 import { ContextMenuRenderer } from '@theia/core/lib/browser/context-menu-renderer';
+import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
 import {
   Disposable,
   DisposableCollection,
 } from '@theia/core/lib/common/disposable';
+import { nls } from '@theia/core/lib/common/nls';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { WorkspaceCommands } from '@theia/workspace/lib/browser/workspace-commands';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import {
-  URI,
-  SketchContribution,
   Command,
   CommandRegistry,
-  MenuModelRegistry,
   KeybindingRegistry,
-  TabBarToolbarRegistry,
+  MenuModelRegistry,
   open,
+  SketchContribution,
+  TabBarToolbarRegistry,
+  URI,
 } from './contribution';
-import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
-import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
-import {
-  CurrentSketch,
-  SketchesServiceClientImpl,
-} from '../../common/protocol/sketches-service-client-impl';
-import { LocalCacheFsProvider } from '../local-cache/local-cache-fs-provider';
-import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class SketchControl extends SketchContribution {
   @inject(ApplicationShell)
-  protected readonly shell: ApplicationShell;
-
+  private readonly shell: ApplicationShell;
   @inject(MenuModelRegistry)
-  protected readonly menuRegistry: MenuModelRegistry;
-
+  private readonly menuRegistry: MenuModelRegistry;
   @inject(ContextMenuRenderer)
-  protected readonly contextMenuRenderer: ContextMenuRenderer;
-
-  @inject(EditorManager)
-  protected override readonly editorManager: EditorManager;
-
-  @inject(SketchesServiceClientImpl)
-  protected readonly sketchesServiceClient: SketchesServiceClientImpl;
-
-  @inject(LocalCacheFsProvider)
-  protected readonly localCacheFsProvider: LocalCacheFsProvider;
+  private readonly contextMenuRenderer: ContextMenuRenderer;
 
   protected readonly toDisposeBeforeCreateNewContextMenu =
     new DisposableCollection();
@@ -57,107 +41,57 @@ export class SketchControl extends SketchContribution {
           this.shell.getWidgets('main').indexOf(widget) !== -1,
         execute: async () => {
           this.toDisposeBeforeCreateNewContextMenu.dispose();
+
+          let parentElement: HTMLElement | undefined = undefined;
+          const target = document.getElementById(
+            SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id
+          );
+          if (target instanceof HTMLElement) {
+            parentElement = target.parentElement ?? undefined;
+          }
+          if (!parentElement) {
+            return;
+          }
+
           const sketch = await this.sketchServiceClient.currentSketch();
           if (!CurrentSketch.isValid(sketch)) {
             return;
           }
 
-          const target = document.getElementById(
-            SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id
+          this.menuRegistry.registerMenuAction(
+            ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+            {
+              commandId: WorkspaceCommands.FILE_RENAME.id,
+              label: nls.localize('vscode/fileActions/rename', 'Rename'),
+              order: '1',
+            }
+          );
+          this.toDisposeBeforeCreateNewContextMenu.push(
+            Disposable.create(() =>
+              this.menuRegistry.unregisterMenuAction(
+                WorkspaceCommands.FILE_RENAME
+              )
+            )
+          );
+
+          this.menuRegistry.registerMenuAction(
+            ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+            {
+              commandId: WorkspaceCommands.FILE_DELETE.id,
+              label: nls.localize('vscode/fileActions/delete', 'Delete'),
+              order: '2',
+            }
+          );
+          this.toDisposeBeforeCreateNewContextMenu.push(
+            Disposable.create(() =>
+              this.menuRegistry.unregisterMenuAction(
+                WorkspaceCommands.FILE_DELETE
+              )
+            )
           );
-          if (!(target instanceof HTMLElement)) {
-            return;
-          }
-          const { parentElement } = target;
-          if (!parentElement) {
-            return;
-          }
 
           const { mainFileUri, rootFolderFileUris } = sketch;
           const uris = [mainFileUri, ...rootFolderFileUris];
-
-          const parentSketchUri = this.editorManager.currentEditor
-            ?.getResourceUri()
-            ?.toString();
-          const parentSketch = await this.sketchService.getSketchFolder(
-            parentSketchUri || ''
-          );
-
-          // if the current file is in the current opened sketch, show extra menus
-          if (
-            sketch &&
-            parentSketch &&
-            parentSketch.uri === sketch.uri &&
-            this.allowRename(parentSketch.uri)
-          ) {
-            this.menuRegistry.registerMenuAction(
-              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              {
-                commandId: WorkspaceCommands.FILE_RENAME.id,
-                label: nls.localize('vscode/fileActions/rename', 'Rename'),
-                order: '1',
-              }
-            );
-            this.toDisposeBeforeCreateNewContextMenu.push(
-              Disposable.create(() =>
-                this.menuRegistry.unregisterMenuAction(
-                  WorkspaceCommands.FILE_RENAME
-                )
-              )
-            );
-          } else {
-            const renamePlaceholder = new PlaceholderMenuNode(
-              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              nls.localize('vscode/fileActions/rename', 'Rename')
-            );
-            this.menuRegistry.registerMenuNode(
-              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              renamePlaceholder
-            );
-            this.toDisposeBeforeCreateNewContextMenu.push(
-              Disposable.create(() =>
-                this.menuRegistry.unregisterMenuNode(renamePlaceholder.id)
-              )
-            );
-          }
-
-          if (
-            sketch &&
-            parentSketch &&
-            parentSketch.uri === sketch.uri &&
-            this.allowDelete(parentSketch.uri)
-          ) {
-            this.menuRegistry.registerMenuAction(
-              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              {
-                commandId: WorkspaceCommands.FILE_DELETE.id, // TODO: customize delete. Wipe sketch if deleting main file. Close window.
-                label: nls.localize('vscode/fileActions/delete', 'Delete'),
-                order: '2',
-              }
-            );
-            this.toDisposeBeforeCreateNewContextMenu.push(
-              Disposable.create(() =>
-                this.menuRegistry.unregisterMenuAction(
-                  WorkspaceCommands.FILE_DELETE
-                )
-              )
-            );
-          } else {
-            const deletePlaceholder = new PlaceholderMenuNode(
-              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              nls.localize('vscode/fileActions/delete', 'Delete')
-            );
-            this.menuRegistry.registerMenuNode(
-              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              deletePlaceholder
-            );
-            this.toDisposeBeforeCreateNewContextMenu.push(
-              Disposable.create(() =>
-                this.menuRegistry.unregisterMenuNode(deletePlaceholder.id)
-              )
-            );
-          }
-
           for (let i = 0; i < uris.length; i++) {
             const uri = new URI(uris[i]);
 
@@ -193,6 +127,7 @@ export class SketchControl extends SketchContribution {
                 parentElement.getBoundingClientRect().top +
                 parentElement.offsetHeight,
             },
+            showDisabled: true,
           };
           this.contextMenuRenderer.render(options);
         },
@@ -249,27 +184,6 @@ export class SketchControl extends SketchContribution {
       command: SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id,
     });
   }
-
-  protected isCloudSketch(uri: string): boolean {
-    try {
-      const cloudCacheLocation = this.localCacheFsProvider.from(new URI(uri));
-
-      if (cloudCacheLocation) {
-        return true;
-      }
-      return false;
-    } catch {
-      return false;
-    }
-  }
-
-  protected allowRename(uri: string): boolean {
-    return !this.isCloudSketch(uri);
-  }
-
-  protected allowDelete(uri: string): boolean {
-    return !this.isCloudSketch(uri);
-  }
 }
 
 export namespace SketchControl {

arduino-ide-extension/src/browser/contributions/sketch-files-tracker.ts

@@ -3,7 +3,7 @@ import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { FileSystemFrontendContribution } from '@theia/filesystem/lib/browser/filesystem-frontend-contribution';
 import { FileChangeType } from '@theia/filesystem/lib/common/files';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import { Sketch, SketchContribution } from './contribution';
 import { OpenSketchFiles } from './open-sketch-files';
 
@@ -38,7 +38,7 @@ export class SketchFilesTracker extends SketchContribution {
                 type === FileChangeType.ADDED &&
                 resource.parent.toString() === sketch.uri
               ) {
-                const reloadedSketch = await this.sketchService.loadSketch(
+                const reloadedSketch = await this.sketchesService.loadSketch(
                   sketch.uri
                 );
                 if (Sketch.isInSketch(resource, reloadedSketch)) {

arduino-ide-extension/src/browser/contributions/sketchbook.ts

@@ -11,6 +11,7 @@ import { nls } from '@theia/core/lib/common/nls';
 export class Sketchbook extends Examples {
   override onStart(): void {
     this.sketchServiceClient.onSketchbookDidChange(() => this.update());
+    this.configService.onDidChangeSketchDirUri(() => this.update());
   }
 
   override async onReady(): Promise<void> {
@@ -18,7 +19,7 @@ export class Sketchbook extends Examples {
   }
 
   protected override update(): void {
-    this.sketchService.getSketches({}).then((container) => {
+    this.sketchesService.getSketches({}).then((container) => {
       this.register(container);
       this.menuManager.update();
     });

arduino-ide-extension/src/browser/contributions/upload-certificate.ts

@@ -12,7 +12,6 @@ import {
   PreferenceScope,
   PreferenceService,
 } from '@theia/core/lib/browser/preferences/preference-service';
-import { ArduinoPreferences } from '../arduino-preferences';
 import {
   arduinoCert,
   certificateList,
@@ -31,22 +30,29 @@ export class UploadCertificate extends Contribution {
   @inject(PreferenceService)
   protected readonly preferenceService: PreferenceService;
 
-  @inject(ArduinoPreferences)
-  protected readonly arduinoPreferences: ArduinoPreferences;
-
   @inject(ArduinoFirmwareUploader)
   protected readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
 
   protected dialogOpened = false;
 
+  override onStart(): void {
+    this.preferences.onPreferenceChanged(({ preferenceName }) => {
+      if (preferenceName === 'arduino.board.certificates') {
+        this.menuManager.update();
+      }
+    });
+  }
+
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(UploadCertificate.Commands.OPEN, {
       execute: async () => {
         try {
           this.dialogOpened = true;
+          this.menuManager.update();
           await this.dialog.open();
         } finally {
           this.dialogOpened = false;
+          this.menuManager.update();
         }
       },
       isEnabled: () => !this.dialogOpened,
@@ -54,7 +60,7 @@ export class UploadCertificate extends Contribution {
 
     registry.registerCommand(UploadCertificate.Commands.REMOVE_CERT, {
       execute: async (certToRemove) => {
-        const certs = this.arduinoPreferences.get('arduino.board.certificates');
+        const certs = this.preferences.get('arduino.board.certificates');
 
         this.preferenceService.set(
           'arduino.board.certificates',
@@ -75,7 +81,6 @@ export class UploadCertificate extends Contribution {
             .join(' ')}`
         );
       },
-      isEnabled: () => true,
     });
 
     registry.registerCommand(UploadCertificate.Commands.OPEN_CERT_CONTEXT, {
@@ -89,7 +94,6 @@ export class UploadCertificate extends Contribution {
           args: [args.cert],
         });
       },
-      isEnabled: () => true,
     });
   }
 

arduino-ide-extension/src/browser/contributions/upload-firmware.ts

@@ -21,9 +21,11 @@ export class UploadFirmware extends Contribution {
       execute: async () => {
         try {
           this.dialogOpened = true;
+          this.menuManager.update();
           await this.dialog.open();
         } finally {
           this.dialogOpened = false;
+          this.menuManager.update();
         }
       },
       isEnabled: () => !this.dialogOpened,

arduino-ide-extension/src/browser/contributions/upload-sketch.ts

@@ -1,6 +1,6 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { Emitter } from '@theia/core/lib/common/event';
-import { CoreService, Port } from '../../common/protocol';
+import { CoreService, Port, sanitizeFqbn } from '../../common/protocol';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 import {
@@ -12,7 +12,7 @@ import {
   CoreServiceContribution,
 } from './contribution';
 import { deepClone, nls } from '@theia/core/lib/common';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import type { VerifySketchParams } from './verify-sketch';
 import { UserFields } from './user-fields';
 
@@ -106,6 +106,7 @@ export class UploadSketch extends CoreServiceContribution {
       // toggle the toolbar button and menu item state.
       // uploadInProgress will be set to false whether the upload fails or not
       this.uploadInProgress = true;
+      this.menuManager.update();
       this.boardsServiceProvider.snapshotBoardDiscoveryOnUpload();
       this.onDidChangeEmitter.fire();
       this.clearVisibleNotification();
@@ -150,6 +151,7 @@ export class UploadSketch extends CoreServiceContribution {
       this.handleError(e);
     } finally {
       this.uploadInProgress = false;
+      this.menuManager.update();
       this.boardsServiceProvider.attemptPostUploadAutoSelect();
       this.onDidChangeEmitter.fire();
     }
@@ -168,7 +170,7 @@ export class UploadSketch extends CoreServiceContribution {
     const [fqbn, { selectedProgrammer: programmer }, verify, verbose] =
       await Promise.all([
         verifyOptions.fqbn, // already decorated FQBN
-        this.boardsDataStore.getData(this.sanitizeFqbn(verifyOptions.fqbn)),
+        this.boardsDataStore.getData(sanitizeFqbn(verifyOptions.fqbn)),
         this.preferences.get('arduino.upload.verify'),
         this.preferences.get('arduino.upload.verbose'),
       ]);
@@ -205,19 +207,6 @@ export class UploadSketch extends CoreServiceContribution {
     }
     return port;
   }
-
-  /**
-   * Converts the `VENDOR:ARCHITECTURE:BOARD_ID[:MENU_ID=OPTION_ID[,MENU2_ID=OPTION_ID ...]]` FQBN to
-   * `VENDOR:ARCHITECTURE:BOARD_ID` format.
-   * See the details of the `{build.fqbn}` entry in the [specs](https://arduino.github.io/arduino-cli/latest/platform-specification/#global-predefined-properties).
-   */
-  private sanitizeFqbn(fqbn: string | undefined): string | undefined {
-    if (!fqbn) {
-      return undefined;
-    }
-    const [vendor, arch, id] = fqbn.split(':');
-    return `${vendor}:${arch}:${id}`;
-  }
 }
 
 export namespace UploadSketch {

arduino-ide-extension/src/browser/contributions/user-fields.ts

@@ -1,9 +1,9 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { DisposableCollection, nls } from '@theia/core/lib/common';
+import { nls } from '@theia/core/lib/common';
 import { BoardUserField, CoreError } from '../../common/protocol';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import { UserFieldsDialog } from '../dialogs/user-fields/user-fields-dialog';
-import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
+import { ArduinoMenus } from '../menu/arduino-menus';
 import { MenuModelRegistry, Contribution } from './contribution';
 import { UploadSketch } from './upload-sketch';
 
@@ -12,7 +12,6 @@ export class UserFields extends Contribution {
   private boardRequiresUserFields = false;
   private userFieldsSet = false;
   private readonly cachedUserFields: Map<string, BoardUserField[]> = new Map();
-  private readonly menuActionsDisposables = new DisposableCollection();
 
   @inject(UserFieldsDialog)
   private readonly userFieldsDialog: UserFieldsDialog;
@@ -20,42 +19,22 @@ export class UserFields extends Contribution {
   @inject(BoardsServiceProvider)
   private readonly boardsServiceProvider: BoardsServiceProvider;
 
-  @inject(MenuModelRegistry)
-  private readonly menuRegistry: MenuModelRegistry;
-
   protected override init(): void {
     super.init();
     this.boardsServiceProvider.onBoardsConfigChanged(async () => {
       const userFields =
         await this.boardsServiceProvider.selectedBoardUserFields();
       this.boardRequiresUserFields = userFields.length > 0;
-      this.registerMenus(this.menuRegistry);
+      this.menuManager.update();
     });
   }
 
   override registerMenus(registry: MenuModelRegistry): void {
-    this.menuActionsDisposables.dispose();
-    if (this.boardRequiresUserFields) {
-      this.menuActionsDisposables.push(
-        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-          commandId: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.id,
-          label: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label,
-          order: '2',
-        })
-      );
-    } else {
-      this.menuActionsDisposables.push(
-        registry.registerMenuNode(
-          ArduinoMenus.SKETCH__MAIN_GROUP,
-          new PlaceholderMenuNode(
-            ArduinoMenus.SKETCH__MAIN_GROUP,
-            // commandId: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.id,
-            UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label,
-            { order: '2' }
-          )
-        )
-      );
-    }
+    registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+      commandId: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.id,
+      label: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label,
+      order: '2',
+    });
   }
 
   private selectedFqbnAddress(): string | undefined {

arduino-ide-extension/src/browser/contributions/validate-sketch.ts

@@ -0,0 +1,202 @@
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import { Dialog } from '@theia/core/lib/browser/dialogs';
+import { nls } from '@theia/core/lib/common/nls';
+import { Deferred, waitForEvent } from '@theia/core/lib/common/promise-util';
+import { injectable } from '@theia/core/shared/inversify';
+import { WorkspaceCommands } from '@theia/workspace/lib/browser/workspace-commands';
+import { CurrentSketch } from '../sketches-service-client-impl';
+import { CloudSketchContribution } from './cloud-contribution';
+import { Sketch, URI } from './contribution';
+import { SaveAsSketch } from './save-as-sketch';
+
+@injectable()
+export class ValidateSketch extends CloudSketchContribution {
+  override onReady(): void {
+    this.validate();
+  }
+
+  private async validate(): Promise<void> {
+    const result = await this.promptFixActions();
+    if (!result) {
+      const yes = await this.prompt(
+        nls.localize('arduino/validateSketch/abortFixTitle', 'Invalid sketch'),
+        nls.localize(
+          'arduino/validateSketch/abortFixMessage',
+          "The sketch is still invalid. Do you want to fix the remaining problems? By clicking '{0}', a new sketch will open.",
+          Dialog.NO
+        ),
+        [Dialog.NO, Dialog.YES]
+      );
+      if (yes) {
+        return this.validate();
+      }
+      const sketch = await this.sketchesService.createNewSketch();
+      this.workspaceService.open(new URI(sketch.uri), {
+        preserveWindow: true,
+      });
+    }
+  }
+
+  /**
+   * Returns with an array of actions the user has to perform to fix the invalid sketch.
+   */
+  private validateSketch(
+    sketch: Sketch,
+    dataDirUri: URI | undefined
+  ): FixAction[] {
+    // sketch code file validation errors first as they do not require window reload
+    const actions = Sketch.uris(sketch)
+      .filter((uri) => uri !== sketch.mainFileUri)
+      .map((uri) => new URI(uri))
+      .filter((uri) => Sketch.Extensions.CODE_FILES.includes(uri.path.ext))
+      .map((uri) => ({
+        uri,
+        error: this.doValidate(sketch, dataDirUri, uri.path.name),
+      }))
+      .filter(({ error }) => Boolean(error))
+      .map((object) => <{ uri: URI; error: string }>object)
+      .map(({ uri, error }) => ({
+        execute: async () => {
+          const unknown =
+            (await this.promptRenameSketchFile(uri, error)) &&
+            (await this.commandService.executeCommand(
+              WorkspaceCommands.FILE_RENAME.id,
+              uri
+            ));
+          return !!unknown;
+        },
+      }));
+
+    // sketch folder + main sketch file last as it requires a `Save as...` and the window reload
+    const sketchFolderName = new URI(sketch.uri).path.base;
+    const sketchFolderNameError = this.doValidate(
+      sketch,
+      dataDirUri,
+      sketchFolderName
+    );
+    if (sketchFolderNameError) {
+      actions.push({
+        execute: async () => {
+          const unknown =
+            (await this.promptRenameSketch(sketch, sketchFolderNameError)) &&
+            (await this.commandService.executeCommand(
+              SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+              <SaveAsSketch.Options>{
+                markAsRecentlyOpened: true,
+                openAfterMove: true,
+                wipeOriginal: true,
+              }
+            ));
+          return !!unknown;
+        },
+      });
+    }
+    return actions;
+  }
+
+  private doValidate(
+    sketch: Sketch,
+    dataDirUri: URI | undefined,
+    toValidate: string
+  ): string | undefined {
+    const cloudUri = this.createFeatures.isCloud(sketch, dataDirUri);
+    return cloudUri
+      ? Sketch.validateCloudSketchFolderName(toValidate)
+      : Sketch.validateSketchFolderName(toValidate);
+  }
+
+  private async currentSketch(): Promise<Sketch> {
+    const sketch = this.sketchServiceClient.tryGetCurrentSketch();
+    if (CurrentSketch.isValid(sketch)) {
+      return sketch;
+    }
+    const deferred = new Deferred<Sketch>();
+    const disposable = this.sketchServiceClient.onCurrentSketchDidChange(
+      (sketch) => {
+        if (CurrentSketch.isValid(sketch)) {
+          disposable.dispose();
+          deferred.resolve(sketch);
+        }
+      }
+    );
+    return deferred.promise;
+  }
+
+  private async promptFixActions(): Promise<boolean> {
+    const maybeDataDirUri = this.configService.tryGetDataDirUri();
+    const [sketch, dataDirUri] = await Promise.all([
+      this.currentSketch(),
+      maybeDataDirUri ??
+        waitForEvent(this.configService.onDidChangeDataDirUri, 5_000),
+    ]);
+    const fixActions = this.validateSketch(sketch, dataDirUri);
+    for (const fixAction of fixActions) {
+      const result = await fixAction.execute();
+      if (!result) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private async promptRenameSketch(
+    sketch: Sketch,
+    error: string
+  ): Promise<boolean> {
+    return this.prompt(
+      nls.localize(
+        'arduino/validateSketch/renameSketchFolderTitle',
+        'Invalid sketch name'
+      ),
+      nls.localize(
+        'arduino/validateSketch/renameSketchFolderMessage',
+        "The sketch '{0}' cannot be used. {1} To get rid of this message, rename the sketch. Do you want to rename the sketch now?",
+        sketch.name,
+        error
+      )
+    );
+  }
+
+  private async promptRenameSketchFile(
+    uri: URI,
+    error: string
+  ): Promise<boolean> {
+    return this.prompt(
+      nls.localize(
+        'arduino/validateSketch/renameSketchFileTitle',
+        'Invalid sketch filename'
+      ),
+      nls.localize(
+        'arduino/validateSketch/renameSketchFileMessage',
+        "The sketch file '{0}' cannot be used. {1} Do you want to rename the sketch file now?",
+        uri.path.base,
+        error
+      )
+    );
+  }
+
+  private async prompt(
+    title: string,
+    message: string,
+    buttons: string[] = [Dialog.CANCEL, Dialog.OK]
+  ): Promise<boolean> {
+    const { response } = await remote.dialog.showMessageBox(
+      remote.getCurrentWindow(),
+      {
+        title,
+        message,
+        type: 'warning',
+        buttons,
+      }
+    );
+    // cancel
+    if (response === 0) {
+      return false;
+    }
+    return true;
+  }
+}
+
+interface FixAction {
+  execute(): Promise<boolean>;
+}

arduino-ide-extension/src/browser/contributions/verify-sketch.ts

@@ -11,7 +11,7 @@ import {
   TabBarToolbarRegistry,
 } from './contribution';
 import { nls } from '@theia/core/lib/common';
-import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import { CoreService } from '../../common/protocol';
 import { CoreErrorHandler } from './core-error-handler';
 
@@ -21,11 +21,18 @@ export interface VerifySketchParams {
    */
   readonly exportBinaries?: boolean;
   /**
-   * If `true`, there won't be any UI indication of the verify command. It's `false` by default.
+   * If `true`, there won't be any UI indication of the verify command in the toolbar. It's `false` by default.
    */
   readonly silent?: boolean;
 }
 
+/**
+ *  - `"idle"` when neither verify, nor upload is running,
+ *  - `"explicit-verify"` when only verify is running triggered by the user, and
+ *  - `"automatic-verify"` is when the automatic verify phase is running as part of an upload triggered by the user.
+ */
+type VerifyProgress = 'idle' | 'explicit-verify' | 'automatic-verify';
+
 @injectable()
 export class VerifySketch extends CoreServiceContribution {
   @inject(CoreErrorHandler)
@@ -33,22 +40,24 @@ export class VerifySketch extends CoreServiceContribution {
 
   private readonly onDidChangeEmitter = new Emitter<void>();
   private readonly onDidChange = this.onDidChangeEmitter.event;
-  private verifyInProgress = false;
+  private verifyProgress: VerifyProgress = 'idle';
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH, {
       execute: (params?: VerifySketchParams) => this.verifySketch(params),
-      isEnabled: () => !this.verifyInProgress,
+      isEnabled: () => this.verifyProgress === 'idle',
     });
     registry.registerCommand(VerifySketch.Commands.EXPORT_BINARIES, {
       execute: () => this.verifySketch({ exportBinaries: true }),
-      isEnabled: () => !this.verifyInProgress,
+      isEnabled: () => this.verifyProgress === 'idle',
     });
     registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR, {
       isVisible: (widget) =>
         ArduinoToolbar.is(widget) && widget.side === 'left',
-      isEnabled: () => !this.verifyInProgress,
-      isToggled: () => this.verifyInProgress,
+      isEnabled: () => this.verifyProgress !== 'explicit-verify',
+      // toggled only when verify is running, but not toggled when automatic verify is running before the upload
+      // https://github.com/arduino/arduino-ide/pull/1750#pullrequestreview-1214762975
+      isToggled: () => this.verifyProgress === 'explicit-verify',
       execute: () =>
         registry.executeCommand(VerifySketch.Commands.VERIFY_SKETCH.id),
     });
@@ -99,15 +108,16 @@ export class VerifySketch extends CoreServiceContribution {
   private async verifySketch(
     params?: VerifySketchParams
   ): Promise<CoreService.Options.Compile | undefined> {
-    if (this.verifyInProgress) {
+    if (this.verifyProgress !== 'idle') {
       return undefined;
     }
 
     try {
-      if (!params?.silent) {
-        this.verifyInProgress = true;
-        this.onDidChangeEmitter.fire();
-      }
+      this.verifyProgress = params?.silent
+        ? 'automatic-verify'
+        : 'explicit-verify';
+      this.onDidChangeEmitter.fire();
+      this.menuManager.update();
       this.clearVisibleNotification();
       this.coreErrorHandler.reset();
 
@@ -139,10 +149,9 @@ export class VerifySketch extends CoreServiceContribution {
       this.handleError(e);
       return undefined;
     } finally {
-      this.verifyInProgress = false;
-      if (!params?.silent) {
-        this.onDidChangeEmitter.fire();
-      }
+      this.verifyProgress = 'idle';
+      this.onDidChangeEmitter.fire();
+      this.menuManager.update();
     }
   }
 

arduino-ide-extension/src/browser/create/create-api.ts

@@ -1,80 +1,37 @@
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { MaybePromise } from '@theia/core/lib/common/types';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { fetch } from 'cross-fetch';
+import { SketchesService } from '../../common/protocol';
+import { uint8ArrayToString } from '../../common/utils';
+import { ArduinoPreferences } from '../arduino-preferences';
+import { AuthenticationClientService } from '../auth/authentication-client-service';
+import { SketchCache } from '../widgets/cloud-sketchbook/cloud-sketch-cache';
 import * as createPaths from './create-paths';
 import { posix } from './create-paths';
-import { AuthenticationClientService } from '../auth/authentication-client-service';
-import { ArduinoPreferences } from '../arduino-preferences';
-import { SketchCache } from '../widgets/cloud-sketchbook/cloud-sketch-cache';
 import { Create, CreateError } from './typings';
 
-export interface ResponseResultProvider {
+interface ResponseResultProvider {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (response: Response): Promise<any>;
 }
-export namespace ResponseResultProvider {
+namespace ResponseResultProvider {
   export const NOOP: ResponseResultProvider = async () => undefined;
   export const TEXT: ResponseResultProvider = (response) => response.text();
   export const JSON: ResponseResultProvider = (response) => response.json();
 }
 
-export function Utf8ArrayToStr(array: Uint8Array): string {
-  let out, i, c;
-  let char2, char3;
-
-  out = '';
-  const len = array.length;
-  i = 0;
-  while (i < len) {
-    c = array[i++];
-    switch (c >> 4) {
-      case 0:
-      case 1:
-      case 2:
-      case 3:
-      case 4:
-      case 5:
-      case 6:
-      case 7:
-        // 0xxxxxxx
-        out += String.fromCharCode(c);
-        break;
-      case 12:
-      case 13:
-        // 110x xxxx   10xx xxxx
-        char2 = array[i++];
-        out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
-        break;
-      case 14:
-        // 1110 xxxx  10xx xxxx  10xx xxxx
-        char2 = array[i++];
-        char3 = array[i++];
-        out += String.fromCharCode(
-          ((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0)
-        );
-        break;
-    }
-  }
-
-  return out;
-}
-
 type ResourceType = 'f' | 'd';
 
 @injectable()
 export class CreateApi {
   @inject(SketchCache)
-  protected sketchCache: SketchCache;
-
-  protected authenticationService: AuthenticationClientService;
-  protected arduinoPreferences: ArduinoPreferences;
-
-  public init(
-    authenticationService: AuthenticationClientService,
-    arduinoPreferences: ArduinoPreferences
-  ): CreateApi {
-    this.authenticationService = authenticationService;
-    this.arduinoPreferences = arduinoPreferences;
-
-    return this;
-  }
+  readonly sketchCache: SketchCache;
+  @inject(AuthenticationClientService)
+  private readonly authenticationService: AuthenticationClientService;
+  @inject(ArduinoPreferences)
+  private readonly arduinoPreferences: ArduinoPreferences;
+  @inject(SketchesService)
+  private readonly sketchesService: SketchesService;
 
   getSketchSecretStat(sketch: Create.Sketch): Create.Resource {
     return {
@@ -100,6 +57,30 @@ export class CreateApi {
     return result;
   }
 
+  /**
+   * `sketchPath` is not the POSIX path but the path with the user UUID, username, etc.
+   * See [Create.Resource#path](./typings.ts). If `cache` is `true` and a sketch exists with the path,
+   * the cache will be updated with the new state of the sketch.
+   */
+  // TODO: no nulls in API
+  async sketchByPath(
+    sketchPath: string,
+    cache = false
+  ): Promise<Create.Sketch | null> {
+    const url = new URL(`${this.domain()}/sketches/byPath/${sketchPath}`);
+    const headers = await this.headers();
+    const sketch = await this.run<Create.Sketch>(url, {
+      method: 'GET',
+      headers,
+    });
+    if (sketch && cache) {
+      this.sketchCache.addSketch(sketch);
+      const posixPath = createPaths.toPosixPath(sketch.path);
+      this.sketchCache.purgeByPath(posixPath);
+    }
+    return sketch;
+  }
+
   async sketches(limit = 50): Promise<Create.Sketch[]> {
     const url = new URL(`${this.domain()}/sketches`);
     url.searchParams.set('user_id', 'me');
@@ -129,14 +110,22 @@ export class CreateApi {
 
   async createSketch(
     posixPath: string,
-    content: string = CreateApi.defaultInoContent
+    contentProvider: MaybePromise<string> = this.sketchesService.defaultInoContent(),
+    payloadOverride: Record<
+      string,
+      string | boolean | number | Record<string, unknown>
+    > = {}
   ): Promise<Create.Sketch> {
     const url = new URL(`${this.domain()}/sketches`);
-    const headers = await this.headers();
+    const [headers, content] = await Promise.all([
+      this.headers(),
+      contentProvider,
+    ]);
     const payload = {
       ino: btoa(content),
       path: posixPath,
       user_id: 'me',
+      ...payloadOverride,
     };
     const init = {
       method: 'PUT',
@@ -252,7 +241,17 @@ export class CreateApi {
         return data;
       }
 
-      const sketch = this.sketchCache.getSketch(createPaths.parentPosix(path));
+      const posixPath = createPaths.parentPosix(path);
+      let sketch = this.sketchCache.getSketch(posixPath);
+      // Workaround for https://github.com/arduino/arduino-ide/issues/1999.
+      if (!sketch) {
+        // Convert the ordinary sketch POSIX path to the Create path.
+        // For example, `/sketch_apr6a` will be transformed to `8a694e4b83878cc53472bd75ee928053:kittaakos/sketches_v2/sketch_apr6a`.
+        const createPathPrefix = this.sketchCache.createPathPrefix;
+        if (createPathPrefix) {
+          sketch = await this.sketchByPath(createPathPrefix + posixPath, true);
+        }
+      }
 
       if (
         sketch &&
@@ -291,7 +290,7 @@ export class CreateApi {
       this.sketchCache.addSketch(sketch);
 
       let file = '';
-      if (sketch && sketch.secrets) {
+      if (sketch.secrets) {
         for (const item of sketch.secrets) {
           file += `#define ${item.name} "${item.value}"\r\n`;
         }
@@ -328,10 +327,9 @@ export class CreateApi {
       if (sketch) {
         const url = new URL(`${this.domain()}/sketches/${sketch.id}`);
         const headers = await this.headers();
-
         // parse the secret file
         const secrets = (
-          typeof content === 'string' ? content : Utf8ArrayToStr(content)
+          typeof content === 'string' ? content : uint8ArrayToString(content)
         )
           .split(/\r?\n/)
           .reduce((prev, curr) => {
@@ -381,7 +379,7 @@ export class CreateApi {
       return;
     }
 
-    // do not upload "do_not_sync" files/directoris and their descendants
+    // do not upload "do_not_sync" files/directories and their descendants
     const segments = posixPath.split(posix.sep) || [];
     if (
       segments.some((segment) => Create.do_not_sync_files.includes(segment))
@@ -395,7 +393,7 @@ export class CreateApi {
     const headers = await this.headers();
 
     let data: string =
-      typeof content === 'string' ? content : Utf8ArrayToStr(content);
+      typeof content === 'string' ? content : uint8ArrayToString(content);
     data = await this.toggleSecretsInclude(posixPath, data, 'remove');
 
     const payload = { data: btoa(data) };
@@ -415,6 +413,21 @@ export class CreateApi {
     await this.delete(posixPath, 'd');
   }
 
+  /**
+   * `sketchPath` is not the POSIX path but the path with the user UUID, username, etc.
+   * See [Create.Resource#path](./typings.ts). Unlike other endpoints, it does not support the `$HOME`
+   * variable substitution. The DELETE directory endpoint is bogus and responses with HTTP 500
+   * instead of 404 when deleting a non-existing resource.
+   */
+  async deleteSketch(sketchPath: string): Promise<void> {
+    const url = new URL(`${this.domain()}/sketches/byPath/${sketchPath}`);
+    const headers = await this.headers();
+    await this.run(url, {
+      method: 'DELETE',
+      headers,
+    });
+  }
+
   private async delete(posixPath: string, type: ResourceType): Promise<void> {
     const url = new URL(
       `${this.domain()}/files/${type}/$HOME/sketches_v2${posixPath}`
@@ -474,15 +487,18 @@ export class CreateApi {
     await this.run(url, init, ResponseResultProvider.NOOP);
   }
 
+  private fetchCounter = 0;
   private async run<T>(
-    requestInfo: RequestInfo | URL,
+    requestInfo: URL,
     init: RequestInit | undefined,
     resultProvider: ResponseResultProvider = ResponseResultProvider.JSON
   ): Promise<T> {
-    const response = await fetch(
-      requestInfo instanceof URL ? requestInfo.toString() : requestInfo,
-      init
-    );
+    const fetchCount = `[${++this.fetchCounter}]`;
+    const fetchStart = performance.now();
+    const method = init?.method ? `${init.method}: ` : '';
+    const url = requestInfo.toString();
+    const response = await fetch(requestInfo.toString(), init);
+    const fetchEnd = performance.now();
     if (!response.ok) {
       let details: string | undefined = undefined;
       try {
@@ -493,7 +509,18 @@ export class CreateApi {
       const { statusText, status } = response;
       throw new CreateError(statusText, status, details);
     }
+    const parseStart = performance.now();
     const result = await resultProvider(response);
+    const parseEnd = performance.now();
+    console.debug(
+      `HTTP ${fetchCount} ${method} ${url} [fetch: ${(
+        fetchEnd - fetchStart
+      ).toFixed(2)} ms, parse: ${(parseEnd - parseStart).toFixed(
+        2
+      )} ms] body: ${
+        typeof result === 'string' ? result : JSON.stringify(result)
+      }`
+    );
     return result;
   }
 
@@ -516,19 +543,3 @@ export class CreateApi {
     return this.authenticationService.session?.accessToken || '';
   }
 }
-
-export namespace CreateApi {
-  export const defaultInoContent = `/*
-
-*/
-
-void setup() {
-  
-}
-
-void loop() {
-  
-}
-
-`;
-}

arduino-ide-extension/src/browser/create/create-features.ts

@@ -0,0 +1,142 @@
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { Emitter, Event } from '@theia/core/lib/common/event';
+import URI from '@theia/core/lib/common/uri';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { Sketch } from '../../common/protocol';
+import { AuthenticationSession } from '../../node/auth/types';
+import { ArduinoPreferences } from '../arduino-preferences';
+import { AuthenticationClientService } from '../auth/authentication-client-service';
+import { LocalCacheFsProvider } from '../local-cache/local-cache-fs-provider';
+import { CreateUri } from './create-uri';
+
+export type CloudSketchState = 'push' | 'pull';
+
+@injectable()
+export class CreateFeatures implements FrontendApplicationContribution {
+  @inject(ArduinoPreferences)
+  private readonly preferences: ArduinoPreferences;
+  @inject(AuthenticationClientService)
+  private readonly authenticationService: AuthenticationClientService;
+  @inject(LocalCacheFsProvider)
+  private readonly localCacheFsProvider: LocalCacheFsProvider;
+
+  /**
+   * The keys are the Create URI of the sketches.
+   */
+  private readonly _cloudSketchStates = new Map<string, CloudSketchState>();
+  private readonly onDidChangeSessionEmitter = new Emitter<
+    AuthenticationSession | undefined
+  >();
+  private readonly onDidChangeEnabledEmitter = new Emitter<boolean>();
+  private readonly onDidChangeCloudSketchStateEmitter = new Emitter<{
+    uri: URI;
+    state: CloudSketchState | undefined;
+  }>();
+  private readonly toDispose = new DisposableCollection(
+    this.onDidChangeSessionEmitter,
+    this.onDidChangeEnabledEmitter,
+    this.onDidChangeCloudSketchStateEmitter
+  );
+  private _enabled: boolean;
+  private _session: AuthenticationSession | undefined;
+
+  onStart(): void {
+    this.toDispose.pushAll([
+      this.authenticationService.onSessionDidChange((session) => {
+        const oldSession = this._session;
+        this._session = session;
+        if (!!oldSession !== !!this._session) {
+          this.onDidChangeSessionEmitter.fire(this._session);
+        }
+      }),
+      this.preferences.onPreferenceChanged(({ preferenceName, newValue }) => {
+        if (preferenceName === 'arduino.cloud.enabled') {
+          const oldEnabled = this._enabled;
+          this._enabled = Boolean(newValue);
+          if (this._enabled !== oldEnabled) {
+            this.onDidChangeEnabledEmitter.fire(this._enabled);
+          }
+        }
+      }),
+    ]);
+    this._enabled = this.preferences['arduino.cloud.enabled'];
+    this._session = this.authenticationService.session;
+  }
+
+  onStop(): void {
+    this.toDispose.dispose();
+  }
+
+  get onDidChangeSession(): Event<AuthenticationSession | undefined> {
+    return this.onDidChangeSessionEmitter.event;
+  }
+
+  get onDidChangeEnabled(): Event<boolean> {
+    return this.onDidChangeEnabledEmitter.event;
+  }
+
+  get onDidChangeCloudSketchState(): Event<{
+    uri: URI;
+    state: CloudSketchState | undefined;
+  }> {
+    return this.onDidChangeCloudSketchStateEmitter.event;
+  }
+
+  get session(): AuthenticationSession | undefined {
+    return this._session;
+  }
+
+  get enabled(): boolean {
+    return this._enabled;
+  }
+
+  cloudSketchState(uri: URI): CloudSketchState | undefined {
+    return this._cloudSketchStates.get(uri.toString());
+  }
+
+  setCloudSketchState(uri: URI, state: CloudSketchState | undefined): void {
+    if (uri.scheme !== CreateUri.scheme) {
+      throw new Error(
+        `Expected a URI with '${uri.scheme}' scheme. Got: ${uri.toString()}`
+      );
+    }
+    const key = uri.toString();
+    if (!state) {
+      if (!this._cloudSketchStates.delete(key)) {
+        console.warn(
+          `Could not reset the cloud sketch state of ${key}. No state existed for the the cloud sketch.`
+        );
+      } else {
+        this.onDidChangeCloudSketchStateEmitter.fire({ uri, state: undefined });
+      }
+    } else {
+      this._cloudSketchStates.set(key, state);
+      this.onDidChangeCloudSketchStateEmitter.fire({ uri, state });
+    }
+  }
+
+  /**
+   * `true` if the sketch is under `directories.data/RemoteSketchbook`. Otherwise, `false`.
+   * Returns with `undefined` if `dataDirUri` is `undefined`.
+   */
+  isCloud(sketch: Sketch, dataDirUri: URI | undefined): boolean | undefined {
+    if (!dataDirUri) {
+      console.warn(
+        `Could not decide whether the sketch ${sketch.uri} is cloud or local. The 'directories.data' location was not available from the CLI config.`
+      );
+      return undefined;
+    }
+    return dataDirUri
+      .resolve('RemoteSketchbook')
+      .resolve('ArduinoCloud')
+      .isEqualOrParent(new URI(sketch.uri));
+  }
+
+  cloudUri(sketch: Sketch): URI | undefined {
+    if (!this.session) {
+      return undefined;
+    }
+    return this.localCacheFsProvider.from(new URI(sketch.uri));
+  }
+}

arduino-ide-extension/src/browser/create/create-fs-provider.ts

@@ -29,6 +29,7 @@ import { CreateUri } from './create-uri';
 import { SketchesService } from '../../common/protocol';
 import { ArduinoPreferences } from '../arduino-preferences';
 import { Create } from './typings';
+import { stringToUint8Array } from '../../common/utils';
 
 @injectable()
 export class CreateFsProvider
@@ -154,7 +155,7 @@ export class CreateFsProvider
 
   async readFile(uri: URI): Promise<Uint8Array> {
     const content = await this.getCreateApi.readFile(uri.path.toString());
-    return new TextEncoder().encode(content);
+    return stringToUint8Array(content);
   }
 
   async writeFile(
@@ -189,10 +190,6 @@ export class CreateFsProvider
         FileSystemProviderErrorCode.NoPermissions
       );
     }
-
-    return this.createApi.init(
-      this.authenticationService,
-      this.arduinoPreferences
-    );
+    return this.createApi;
   }
 }

arduino-ide-extension/src/browser/create/typings.ts

@@ -71,3 +71,23 @@ export class CreateError extends Error {
     Object.setPrototypeOf(this, CreateError.prototype);
   }
 }
+
+export type ConflictError = CreateError & { status: 409 };
+export function isConflict(err: unknown): err is ConflictError {
+  return isErrorWithStatusOf(err, 409);
+}
+
+export type NotFoundError = CreateError & { status: 404 };
+export function isNotFound(err: unknown): err is NotFoundError {
+  return isErrorWithStatusOf(err, 404);
+}
+
+function isErrorWithStatusOf(
+  err: unknown,
+  status: number
+): err is CreateError & { status: number } {
+  if (err instanceof CreateError) {
+    return err.status === status;
+  }
+  return false;
+}

arduino-ide-extension/src/browser/data/dark.color-theme.json

@@ -14,7 +14,7 @@
     "editor.foreground": "#dae3e3",
     "editor.lineHighlightBackground": "#434f5410",
     "editor.selectionBackground": "#00818480",
-    "editorCursor.foreground": "#434f54",
+    "editorCursor.foreground": "#dae3e3",
     "editorWhitespace.foreground": "#bfbfbf",
     "editorWidget.background": "#171e21",
     "editorWidget.foreground": "#dae3e3",
@@ -67,7 +67,8 @@
     "tree.indentGuidesStroke": "#374146",
     "tab.unfocusedActiveForeground": "#dae3e3",
     "tab.inactiveBackground": "#171e21",
-    "textLink.foreground": "#0ca1a6"
+    "textLink.foreground": "#0ca1a6",
+    "errorForeground": "#df7365"
   },
   "tokenColors": [
     {

arduino-ide-extension/src/browser/data/default.color-theme.json

@@ -14,7 +14,7 @@
     "editor.foreground": "#4e5b61",
     "editor.lineHighlightBackground": "#434f5410",
     "editor.selectionBackground": "#7fcbcdb3",
-    "editorCursor.foreground": "#434f54",
+    "editorCursor.foreground": "#4e5b61",
     "editorWhitespace.foreground": "#bfbfbf",
     "editorWidget.background": "#f7f9f9",
     "editorWidget.foreground": "#4e5b61",
@@ -67,7 +67,8 @@
     "tree.indentGuidesStroke": "#dae3e3",
     "tab.unfocusedActiveForeground": "#4e5b61",
     "tab.inactiveBackground": "#ecf1f1",
-    "textLink.foreground": "#008184"
+    "textLink.foreground": "#008184",
+    "errorForeground": "#df7365"
   },
   "tokenColors": [
     {

arduino-ide-extension/src/browser/dialogs/cloud-share-sketch-dialog.tsx

@@ -2,7 +2,7 @@ import * as React from '@theia/core/shared/react';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
-import { clipboard } from 'electron';
+import { clipboard } from '@theia/core/electron-shared/@electron/remote';
 import { ReactWidget, DialogProps } from '@theia/core/lib/browser';
 import { AbstractDialog } from '../theia/dialogs/dialogs';
 import { CreateApi } from '../create/create-api';

arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx

@@ -24,6 +24,12 @@ import {
 } from '@theia/core/lib/common/i18n/localization';
 import SettingsStepInput from './settings-step-input';
 import { InterfaceScale } from '../../contributions/interface-scale';
+import {
+  userConfigurableThemes,
+  themeLabelForSettings,
+  arduinoThemeTypeOf,
+} from '../../theia/core/theming';
+import { Theme } from '@theia/core/lib/common/theme';
 
 const maxScale = InterfaceScale.ZoomLevel.toPercentage(
   InterfaceScale.ZoomLevel.MAX
@@ -218,14 +224,10 @@ export class SettingsComponent extends React.Component<
             <div className="flex-line">
               <select
                 className="theia-select"
-                value={this.props.themeService.getCurrentTheme().label}
+                value={this.currentThemeLabel}
                 onChange={this.themeDidChange}
               >
-                {this.props.themeService.getThemes().map(({ id, label }) => (
-                  <option key={id} value={label}>
-                    {label}
-                  </option>
-                ))}
+                {this.themeSelectOptions}
               </select>
             </div>
             <div className="flex-line">
@@ -333,6 +335,46 @@ export class SettingsComponent extends React.Component<
     );
   }
 
+  private get currentThemeLabel(): string {
+    const currentTheme = this.props.themeService.getCurrentTheme();
+    return themeLabelForSettings(currentTheme);
+  }
+
+  private get separatedThemes(): (Theme | string)[] {
+    const separatedThemes: (Theme | string)[] = [];
+    const groupedThemes = userConfigurableThemes(this.props.themeService);
+    for (const group of groupedThemes) {
+      for (let i = 0; i < group.length; i++) {
+        const theme = group[i];
+        if (i === 0 && separatedThemes.length) {
+          const arduinoThemeType = arduinoThemeTypeOf(theme);
+          separatedThemes.push(`separator-${arduinoThemeType}`);
+        }
+        separatedThemes.push(theme);
+      }
+    }
+    return separatedThemes;
+  }
+
+  private get themeSelectOptions(): React.ReactNode[] {
+    return this.separatedThemes.map((item) => {
+      if (typeof item === 'string') {
+        return (
+          // &#9472; -> BOX DRAWINGS LIGHT HORIZONTAL
+          <option key={item} disabled>
+            &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
+          </option>
+        );
+      }
+      const label = themeLabelForSettings(item);
+      return (
+        <option key={item.id} value={label}>
+          {label}
+        </option>
+      );
+    });
+  }
+
   private toSelectOptions(language: string | LanguageInfo): JSX.Element {
     const plain = typeof language === 'string';
     const key = plain ? language : language.languageId;
@@ -406,7 +448,7 @@ export class SettingsComponent extends React.Component<
                 }
                 onChange={this.socksProtocolDidChange}
               />
-              SOCKS
+              SOCKS5
             </label>
           </form>
           <div className="flex-line proxy-settings">
@@ -610,8 +652,8 @@ export class SettingsComponent extends React.Component<
     event: React.ChangeEvent<HTMLSelectElement>
   ): void => {
     const { selectedIndex } = event.target.options;
-    const theme = this.props.themeService.getThemes()[selectedIndex];
-    if (theme) {
+    const theme = this.separatedThemes[selectedIndex];
+    if (theme && typeof theme !== 'string') {
       this.setState({ themeId: theme.id });
       if (this.props.themeService.getCurrentTheme().id !== theme.id) {
         this.props.themeService.setCurrentTheme(theme.id);
@@ -682,7 +724,7 @@ export class SettingsComponent extends React.Component<
   ): void => {
     if (this.state.network !== 'none') {
       const network = this.cloneProxySettings;
-      network.protocol = event.target.checked ? 'http' : 'socks';
+      network.protocol = event.target.checked ? 'http' : 'socks5';
       this.setState({ network });
     }
   };
@@ -692,7 +734,7 @@ export class SettingsComponent extends React.Component<
   ): void => {
     if (this.state.network !== 'none') {
       const network = this.cloneProxySettings;
-      network.protocol = event.target.checked ? 'socks' : 'http';
+      network.protocol = event.target.checked ? 'socks5' : 'http';
       this.setState({ network });
     }
   };

arduino-ide-extension/src/browser/dialogs/settings/settings.ts

@@ -27,6 +27,7 @@ import {
 import { ElectronCommands } from '@theia/core/lib/electron-browser/menu/electron-menu-contribution';
 import { DefaultTheme } from '@theia/application-package/lib/application-props';
 import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
+import type { FileStat } from '@theia/filesystem/lib/common/files';
 
 export const WINDOW_SETTING = 'window';
 export const EDITOR_SETTING = 'editor';
@@ -122,6 +123,17 @@ export class SettingsService {
       this._settings = deepClone(settings);
       this.ready.resolve();
     });
+    this.preferenceService.onPreferenceChanged(async (event) => {
+      await this.ready.promise;
+      const { preferenceName, newValue } = event;
+      if (
+        preferenceName === 'workbench.colorTheme' &&
+        typeof newValue === 'string' &&
+        this._settings.themeId !== newValue
+      ) {
+        this.reset();
+      }
+    });
   }
 
   protected async loadSettings(): Promise<Settings> {
@@ -171,7 +183,15 @@ export class SettingsService {
       this.preferenceService.get<boolean>(SHOW_ALL_FILES_SETTING, false),
       this.configService.getConfiguration(),
     ]);
-    const { additionalUrls, sketchDirUri, network } = cliConfig;
+    const {
+      config = {
+        additionalUrls: [],
+        sketchDirUri: '',
+        network: Network.Default(),
+      },
+    } = cliConfig;
+    const { additionalUrls, sketchDirUri, network } = config;
+
     const sketchbookPath = await this.fileService.fsPath(new URI(sketchDirUri));
     return {
       editorFontSize,
@@ -223,7 +243,11 @@ export class SettingsService {
     try {
       const { sketchbookPath, editorFontSize, themeId } = await settings;
       const sketchbookDir = await this.fileSystemExt.getUri(sketchbookPath);
-      if (!(await this.fileService.exists(new URI(sketchbookDir)))) {
+      let sketchbookStat: FileStat | undefined = undefined;
+      try {
+        sketchbookStat = await this.fileService.resolve(new URI(sketchbookDir));
+      } catch {}
+      if (!sketchbookStat || !sketchbookStat.isDirectory) {
         return nls.localize(
           'arduino/preferences/invalid.sketchbook.location',
           'Invalid sketchbook location: {0}',
@@ -274,10 +298,19 @@ export class SettingsService {
       network,
       sketchbookShowAllFiles,
     } = this._settings;
-    const [config, sketchDirUri] = await Promise.all([
+    const [cliConfig, sketchDirUri] = await Promise.all([
       this.configService.getConfiguration(),
       this.fileSystemExt.getUri(sketchbookPath),
     ]);
+    const { config } = cliConfig;
+    if (!config) {
+      // Do not check for any error messages. The config might has errors (such as invalid directories.user) right before saving the new values.
+      return nls.localize(
+        'arduino/preferences/noCliConfig',
+        'Could not load the CLI configuration'
+      );
+    }
+
     (config as any).additionalUrls = additionalUrls;
     (config as any).sketchDirUri = sketchDirUri;
     (config as any).network = network;

arduino-ide-extension/src/browser/icons/arduino-cloud-filled-offline.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.355 3.85509L2.85504 14.3551C2.76026 14.448 2.63281 14.5001 2.50006 14.5001C2.36731 14.5001 2.23986 14.448 2.14508 14.3551C2.0514 14.2607 1.99882 14.1331 1.99882 14.0001C1.99882 13.8671 2.0514 13.7395 2.14508 13.6451L3.82508 11.9651C3.24351 11.8742 2.70645 11.5991 2.29291 11.1802C1.87936 10.7613 1.61116 10.2208 1.52775 9.63811C1.44434 9.05543 1.55012 8.46136 1.82955 7.94328C2.10897 7.4252 2.54728 7.01047 3.08 6.76009C3.20492 6.18251 3.47405 5.64596 3.86232 5.20047C4.25058 4.75498 4.74532 4.41505 5.30042 4.21239C5.85552 4.00972 6.45289 3.9509 7.03686 4.04143C7.62082 4.13196 8.17236 4.36887 8.64004 4.73009C9.01346 4.56809 9.41786 4.48995 9.82475 4.50117C10.2316 4.51239 10.6311 4.6127 10.995 4.79503L12.645 3.14509C12.7392 3.05094 12.8669 2.99805 13 2.99805C13.1332 2.99805 13.2609 3.05094 13.355 3.14509C13.4492 3.23924 13.5021 3.36694 13.5021 3.50009C13.5021 3.63324 13.4492 3.76094 13.355 3.85509V3.85509Z" fill="#7F8C8D"/>
+<path d="M14.5 9.25047C14.4987 9.97942 14.2086 10.6782 13.6931 11.1936C13.1777 11.709 12.479 11.9992 11.75 12.0005H6.70996L12.355 6.35547C12.38 6.43042 12.4 6.50547 12.4201 6.58044C13.0153 6.72902 13.5436 7.07272 13.9206 7.55669C14.2976 8.04066 14.5016 8.63699 14.5 9.25047V9.25047Z" fill="#7F8C8D"/>
+</svg>

arduino-ide-extension/src/browser/icons/arduino-cloud-filled.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 9.24997C14.4987 9.97893 14.2086 10.6777 13.6932 11.1931C13.1777 11.7086 12.479 11.9987 11.75 12H4.25003C3.62476 11.9998 3.01822 11.7866 2.53034 11.3955C2.04247 11.0045 1.70238 10.4589 1.56612 9.84864C1.42986 9.2384 1.50556 8.59995 1.78074 8.0385C2.05593 7.47705 2.51418 7.0261 3.07998 6.75997C3.2049 6.18239 3.47404 5.64584 3.8623 5.20035C4.25056 4.75486 4.74531 4.41494 5.3004 4.21227C5.8555 4.0096 6.45288 3.95078 7.03684 4.04131C7.62081 4.13184 8.17234 4.36875 8.64003 4.72997C8.99025 4.57772 9.36814 4.49942 9.75003 4.49997C10.3635 4.49838 10.9598 4.70238 11.4438 5.07939C11.9278 5.45641 12.2715 5.9847 12.4201 6.57993C13.0153 6.7285 13.5436 7.07221 13.9206 7.55618C14.2976 8.04015 14.5016 8.63649 14.5 9.24997Z" fill="#7F8C8D"/>
+</svg>

arduino-ide-extension/src/browser/icons/arduino-cloud-offline.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.42 6.58044C12.4 6.50549 12.38 6.43042 12.355 6.35547L11.525 7.18555C11.5575 7.27223 11.6136 7.34811 11.6869 7.40464C11.7603 7.46117 11.8479 7.4961 11.94 7.50549C12.3852 7.55476 12.7947 7.77259 13.0843 8.11428C13.374 8.45597 13.5218 8.89557 13.4975 9.34284C13.4732 9.7901 13.2785 10.2111 12.9536 10.5194C12.6286 10.8276 12.1979 10.9998 11.75 11.0005H7.70996L6.70996 12.0005H11.75C12.421 12.0001 13.0688 11.7545 13.5714 11.3099C14.074 10.8653 14.3969 10.2524 14.4792 9.58644C14.5615 8.92048 14.3977 8.24739 14.0184 7.69379C13.6392 7.14019 13.0708 6.74425 12.42 6.58044V6.58044Z" fill="#7F8C8D"/>
+<path d="M13.355 3.14532C13.2606 3.05161 13.133 2.99902 13 2.99902C12.867 2.99902 12.7394 3.05161 12.6451 3.14532L10.995 4.79524C10.6311 4.61291 10.2316 4.5126 9.82472 4.50139C9.41783 4.49017 9.01343 4.56832 8.64002 4.73032C8.17233 4.3691 7.6208 4.13219 7.03684 4.04166C6.45287 3.95114 5.85549 4.00995 5.3004 4.21262C4.7453 4.41529 4.25056 4.75521 3.86229 5.2007C3.47403 5.64619 3.2049 6.18274 3.07997 6.76033C2.54726 7.01071 2.10896 7.42543 1.82954 7.9435C1.55013 8.46157 1.44434 9.05564 1.52775 9.63832C1.61115 10.221 1.87935 10.7615 2.29288 11.1804C2.70641 11.5993 3.24346 11.8744 3.82502 11.9653L2.14502 13.6453C2.05133 13.7397 1.99876 13.8673 1.99876 14.0003C1.99876 14.1333 2.05133 14.2609 2.14502 14.3553C2.23979 14.4482 2.36725 14.5003 2.5 14.5003C2.63275 14.5003 2.7602 14.4482 2.85498 14.3553L13.355 3.85528C13.4487 3.7609 13.5012 3.6333 13.5013 3.50031C13.5013 3.36732 13.4487 3.23972 13.355 3.14532V3.14532ZM4.79006 11.0003H4.25002C3.8356 11.0005 3.43458 10.8535 3.11841 10.5856C2.80224 10.3177 2.59145 9.94623 2.52362 9.5374C2.45578 9.12857 2.53529 8.70893 2.74799 8.35326C2.96069 7.99758 3.29275 7.72898 3.68502 7.59529C3.77434 7.56478 3.85319 7.50962 3.91248 7.43617C3.97176 7.36272 4.00904 7.274 4.02002 7.18025C4.09848 6.57783 4.39334 6.0245 4.84963 5.62341C5.30592 5.22233 5.89251 5.00087 6.50002 5.00032C7.1425 4.99652 7.76054 5.24628 8.21999 5.69539C8.30086 5.77275 8.40511 5.8211 8.5164 5.83285C8.6277 5.8446 8.73974 5.8191 8.83499 5.76033C9.10926 5.58886 9.42655 5.4987 9.75002 5.50032C9.9105 5.50127 10.0702 5.5231 10.225 5.56526L4.79006 11.0003Z" fill="#7F8C8D"/>
+</svg>

arduino-ide-extension/src/browser/icons/arduino-cloud.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.75 12H4.25C3.62484 11.9999 3.01838 11.7868 2.53053 11.3959C2.04269 11.0049 1.70257 10.4595 1.56622 9.84934C1.42987 9.23923 1.50542 8.60087 1.78043 8.03945C2.05543 7.47802 2.51348 7.02702 3.0791 6.76076C3.24864 5.97929 3.68041 5.27932 4.3027 4.77712C4.92499 4.27492 5.70035 4.00071 6.5 4.00002C7.27505 3.99715 8.02853 4.25513 8.63916 4.73244C9.00591 4.57154 9.40329 4.49243 9.8037 4.5006C10.2041 4.50877 10.5979 4.60403 10.9578 4.77976C11.3177 4.9555 11.635 5.20748 11.8876 5.51822C12.1403 5.82895 12.3223 6.19097 12.4209 6.57912C13.0715 6.74324 13.6398 7.13939 14.0188 7.69309C14.3979 8.24679 14.5616 8.91989 14.4792 9.58582C14.3967 10.2518 14.0739 10.8646 13.5713 11.3092C13.0687 11.7538 12.421 11.9995 11.75 12ZM6.5 5.00002C5.89213 5.00017 5.30514 5.22179 4.84885 5.62344C4.39257 6.02508 4.09826 6.57921 4.021 7.18215C4.0093 7.27546 3.97153 7.36357 3.91202 7.43638C3.85252 7.50918 3.77369 7.56374 3.68458 7.59377C3.29236 7.72769 2.9604 7.99647 2.7478 8.35224C2.5352 8.70801 2.45576 9.12768 2.52363 9.53654C2.5915 9.9454 2.80227 10.3169 3.11841 10.5849C3.43455 10.8529 3.83555 11 4.25 11H11.75C12.198 10.9996 12.6289 10.8275 12.9539 10.5191C13.279 10.2108 13.4735 9.7896 13.4975 9.34221C13.5215 8.89481 13.3732 8.45522 13.083 8.11384C12.7929 7.77246 12.3829 7.55524 11.9375 7.50686C11.8238 7.4948 11.7176 7.44411 11.6368 7.36325C11.5559 7.28238 11.5052 7.17624 11.4932 7.06252C11.4474 6.63255 11.2439 6.2348 10.9219 5.94619C10.6 5.65758 10.1824 5.49861 9.75 5.50002C9.42739 5.49791 9.11079 5.58731 8.83692 5.75783C8.74185 5.81746 8.62955 5.84352 8.51794 5.83184C8.40633 5.82015 8.30185 5.77141 8.22119 5.69338C7.76046 5.24569 7.14241 4.99672 6.5 5.00002V5.00002Z" fill="#7F8C8D"/>
+</svg>

arduino-ide-extension/src/browser/library/library-list-widget.ts

@@ -12,11 +12,15 @@ import {
   LibrarySearch,
   LibraryService,
 } from '../../common/protocol/library-service';
-import { ListWidget } from '../widgets/component-list/list-widget';
+import {
+  ListWidget,
+  UserAbortError,
+} from '../widgets/component-list/list-widget';
 import { Installable } from '../../common/protocol';
 import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
 import { nls } from '@theia/core/lib/common';
 import { LibraryFilterRenderer } from '../widgets/component-list/filter-renderer';
+import { findChildTheiaButton } from '../utils/dom';
 
 @injectable()
 export class LibraryListWidget extends ListWidget<
@@ -41,7 +45,6 @@ export class LibraryListWidget extends ListWidget<
       searchable: service,
       installable: service,
       itemLabel: (item: LibraryPackage) => item.name,
-      itemDeprecated: (item: LibraryPackage) => item.deprecated,
       itemRenderer,
       filterRenderer,
       defaultSearchOptions: { query: '', type: 'All', topic: 'All' },
@@ -142,6 +145,8 @@ export class LibraryListWidget extends ListWidget<
           // All
           installDependencies = true;
         }
+      } else {
+        throw new UserAbortError();
       }
     } else {
       // The lib does not have any dependencies.
@@ -236,6 +241,11 @@ class MessageBoxDialog extends AbstractDialog<MessageBoxDialog.Result> {
     this.response = 0;
     super.handleEnter(event);
   }
+
+  protected override onAfterAttach(message: Message): void {
+    super.onAfterAttach(message);
+    findChildTheiaButton(this.controlPanel)?.focus();
+  }
 }
 export namespace MessageBoxDialog {
   export interface Options extends DialogProps {

arduino-ide-extension/src/browser/local-cache/local-cache-fs-provider.ts

@@ -88,8 +88,25 @@ export class LocalCacheFsProvider
   }
 
   protected async init(fileService: FileService): Promise<void> {
-    const config = await this.configService.getConfiguration();
-    this._localCacheRoot = new URI(config.dataDirUri);
+    const { config } = await this.configService.getConfiguration();
+    // Any possible CLI config errors are ignored here. IDE2 does not verify the `directories.data` folder.
+    // If the data dir is accessible, IDE2 creates the cache folder for the cloud sketches. Otherwise, it does not.
+    // The data folder can be configured outside of the IDE2, and the new data folder will be picked up with a
+    // subsequent IDE2 start.
+    if (!config?.dataDirUri) {
+      return; // the deferred promise will never resolve
+    }
+    const localCacheUri = new URI(config.dataDirUri);
+    try {
+      await fileService.access(localCacheUri);
+    } catch (err) {
+      console.error(
+        `'directories.data' location is inaccessible at ${config.dataDirUri}`,
+        err
+      );
+      return;
+    }
+    this._localCacheRoot = localCacheUri;
     for (const segment of ['RemoteSketchbook', 'ArduinoCloud']) {
       this._localCacheRoot = this._localCacheRoot.resolve(segment);
       await fileService.createFolder(this._localCacheRoot);

arduino-ide-extension/src/browser/menu/arduino-menus.ts

@@ -1,4 +1,3 @@
-import { isOSX } from '@theia/core/lib/common/os';
 import { CommonMenus } from '@theia/core/lib/browser/common-frontend-contribution';
 import {
   MAIN_MENU_BAR,
@@ -7,6 +6,8 @@ import {
   MenuPath,
   SubMenuOptions,
 } from '@theia/core/lib/common/menu';
+import { nls } from '@theia/core/lib/common/nls';
+import { isOSX } from '@theia/core/lib/common/os';
 
 export namespace ArduinoMenus {
   // Main menu
@@ -97,6 +98,11 @@ export namespace ArduinoMenus {
   export const TOOLS__BOARD_SELECTION_GROUP = [...TOOLS, '2_board_selection'];
   // Core settings, such as `Processor` and `Programmers` for the board and `Burn Bootloader`
   export const TOOLS__BOARD_SETTINGS_GROUP = [...TOOLS, '3_board_settings'];
+  // `Tool` > `Ports` (always visible https://github.com/arduino/arduino-ide/issues/655)
+  export const TOOLS__PORTS_SUBMENU = [
+    ...ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP,
+    '2_ports',
+  ];
 
   // -- Help
   // `Getting Started`, `Environment`, `Troubleshooting`, etc.
@@ -149,6 +155,36 @@ export namespace ArduinoMenus {
     '2_resources',
   ];
 
+  // -- Account
+  export const ARDUINO_ACCOUNT__CONTEXT = ['arduino-account--context'];
+  export const ARDUINO_ACCOUNT__CONTEXT__SIGN_IN_GROUP = [
+    ...ARDUINO_ACCOUNT__CONTEXT,
+    '0_sign_in',
+  ];
+  export const ARDUINO_ACCOUNT__CONTEXT__LEARN_MORE_GROUP = [
+    ...ARDUINO_ACCOUNT__CONTEXT,
+    '1_learn_more',
+  ];
+  export const ARDUINO_ACCOUNT__CONTEXT__GO_TO_GROUP = [
+    ...ARDUINO_ACCOUNT__CONTEXT,
+    '2_go_to',
+  ];
+  export const ARDUINO_ACCOUNT__CONTEXT__SIGN_OUT_GROUP = [
+    ...ARDUINO_ACCOUNT__CONTEXT,
+    '3_sign_out',
+  ];
+
+  // Context menu from the library and boards manager widget
+  export const ARDUINO_COMPONENT__CONTEXT = ['arduino-component--context'];
+  export const ARDUINO_COMPONENT__CONTEXT__INFO_GROUP = [
+    ...ARDUINO_COMPONENT__CONTEXT,
+    '0_info',
+  ];
+  export const ARDUINO_COMPONENT__CONTEXT__ACTION_GROUP = [
+    ...ARDUINO_COMPONENT__CONTEXT,
+    '1_action',
+  ];
+
   // -- ROOT SSL CERTIFICATES
   export const ROOT_CERTIFICATES__CONTEXT = [
     'arduino-root-certificates--context',
@@ -206,3 +242,5 @@ export class PlaceholderMenuNode implements MenuNode {
     return [...this.menuPath, 'placeholder'].join('-');
   }
 }
+
+export const examplesLabel = nls.localize('arduino/examples/menu', 'Examples');

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

@@ -1,11 +1,14 @@
 import {
-  CommandRegistry,
+  ApplicationError,
   Disposable,
   Emitter,
   MessageService,
   nls,
 } from '@theia/core';
+import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable } from '@theia/core/shared/inversify';
+import { NotificationManager } from '@theia/messages/lib/browser/notifications-manager';
+import { MessageType } from '@theia/core/lib/common/message-service-protocol';
 import { Board, Port } from '../common/protocol';
 import {
   Monitor,
@@ -23,21 +26,31 @@ import { BoardsServiceProvider } from './boards/boards-service-provider';
 export class MonitorManagerProxyClientImpl
   implements MonitorManagerProxyClient
 {
+  @inject(MessageService)
+  private readonly messageService: MessageService;
+  // This is necessary to call the backend methods from the frontend
+  @inject(MonitorManagerProxyFactory)
+  private readonly server: MonitorManagerProxyFactory;
+  @inject(BoardsServiceProvider)
+  private readonly boardsServiceProvider: BoardsServiceProvider;
+  @inject(NotificationManager)
+  private readonly notificationManager: NotificationManager;
+
   // When pluggable monitor messages are received from the backend
   // this event is triggered.
   // Ideally a frontend component is connected to this event
   // to update the UI.
-  protected readonly onMessagesReceivedEmitter = new Emitter<{
+  private readonly onMessagesReceivedEmitter = new Emitter<{
     messages: string[];
   }>();
   readonly onMessagesReceived = this.onMessagesReceivedEmitter.event;
 
-  protected readonly onMonitorSettingsDidChangeEmitter =
+  private readonly onMonitorSettingsDidChangeEmitter =
     new Emitter<MonitorSettings>();
   readonly onMonitorSettingsDidChange =
     this.onMonitorSettingsDidChangeEmitter.event;
 
-  protected readonly onMonitorShouldResetEmitter = new Emitter();
+  private readonly onMonitorShouldResetEmitter = new Emitter<void>();
   readonly onMonitorShouldReset = this.onMonitorShouldResetEmitter.event;
 
   // WebSocket used to handle pluggable monitor communication between
@@ -51,29 +64,16 @@ export class MonitorManagerProxyClientImpl
     return this.wsPort;
   }
 
-  constructor(
-    @inject(MessageService)
-    protected messageService: MessageService,
-
-    // This is necessary to call the backend methods from the frontend
-    @inject(MonitorManagerProxyFactory)
-    protected server: MonitorManagerProxyFactory,
-
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry,
-
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceProvider: BoardsServiceProvider
-  ) {}
-
   /**
    * Connects a localhost WebSocket using the specified port.
    * @param addressPort port of the WebSocket
    */
   async connect(addressPort: number): Promise<void> {
-    if (!!this.webSocket) {
-      if (this.wsPort === addressPort) return;
-      else this.disconnect();
+    if (this.webSocket) {
+      if (this.wsPort === addressPort) {
+        return;
+      }
+      this.disconnect();
     }
     try {
       this.webSocket = new WebSocket(`ws://localhost:${addressPort}`);
@@ -87,6 +87,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))
@@ -99,19 +102,26 @@ export class MonitorManagerProxyClientImpl
       }
     };
     this.wsPort = addressPort;
+    return opened.promise;
   }
 
   /**
    * Disconnects the WebSocket if connected.
    */
   disconnect(): void {
-    if (!this.webSocket) return;
+    if (!this.webSocket) {
+      return;
+    }
     this.onBoardsConfigChanged?.dispose();
     this.onBoardsConfigChanged = undefined;
     try {
-      this.webSocket?.close();
+      this.webSocket.close();
       this.webSocket = undefined;
-    } catch {
+    } catch (err) {
+      console.error(
+        'Could not close the websocket connection for the monitor.',
+        err
+      );
       this.messageService.error(
         nls.localize(
           'arduino/monitor/unableToCloseWebSocket',
@@ -126,6 +136,7 @@ export class MonitorManagerProxyClientImpl
   }
 
   async startMonitor(settings?: PluggableMonitorSettings): Promise<void> {
+    await this.boardsServiceProvider.reconciled;
     this.lastConnectedBoard = {
       selectedBoard: this.boardsServiceProvider.boardsConfig.selectedBoard,
       selectedPort: this.boardsServiceProvider.boardsConfig.selectedPort,
@@ -150,11 +161,11 @@ export class MonitorManagerProxyClientImpl
                   ? Port.keyOf(this.lastConnectedBoard.selectedPort)
                   : undefined)
             ) {
-              this.onMonitorShouldResetEmitter.fire(null);
               this.lastConnectedBoard = {
                 selectedBoard: selectedBoard,
                 selectedPort: selectedPort,
               };
+              this.onMonitorShouldResetEmitter.fire();
             } else {
               // a board is plugged and it's the same as prev, rerun "this.startMonitor" to
               // recreate the listener callback
@@ -167,7 +178,14 @@ export class MonitorManagerProxyClientImpl
     const { selectedBoard, selectedPort } =
       this.boardsServiceProvider.boardsConfig;
     if (!selectedBoard || !selectedBoard.fqbn || !selectedPort) return;
-    await this.server().startMonitor(selectedBoard, selectedPort, settings);
+    try {
+      this.clearVisibleNotification();
+      await this.server().startMonitor(selectedBoard, selectedPort, settings);
+    } catch (err) {
+      const message = ApplicationError.is(err) ? err.message : String(err);
+      this.previousNotificationId = this.notificationId(message);
+      this.messageService.error(message);
+    }
   }
 
   getCurrentSettings(board: Board, port: Port): Promise<MonitorSettings> {
@@ -199,4 +217,24 @@ export class MonitorManagerProxyClientImpl
       })
     );
   }
+
+  /**
+   * This is the internal (Theia) ID of the notification that is currently visible.
+   * It's stored here as a field to be able to close it before starting a new monitor connection. It's a hack.
+   */
+  private previousNotificationId: string | undefined;
+  private clearVisibleNotification(): void {
+    if (this.previousNotificationId) {
+      this.notificationManager.clear(this.previousNotificationId);
+      this.previousNotificationId = undefined;
+    }
+  }
+
+  private notificationId(message: string, ...actions: string[]): string {
+    return this.notificationManager['getMessageId']({
+      text: message,
+      actions,
+      type: MessageType.Error,
+    });
+  }
 }

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

@@ -4,7 +4,14 @@ import {
   LocalStorageService,
 } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { MonitorManagerProxyClient } from '../common/protocol';
+import {
+  isMonitorConnected,
+  MonitorConnectionStatus,
+  monitorConnectionStatusEquals,
+  MonitorEOL,
+  MonitorManagerProxyClient,
+  MonitorState,
+} from '../common/protocol';
 import { isNullOrUndefined } from '../common/utils';
 import { MonitorSettings } from '../node/monitor-settings/monitor-settings-provider';
 
@@ -19,36 +26,36 @@ 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 = true;
+    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(
@@ -56,11 +63,11 @@ export class MonitorModel implements FrontendApplicationContribution {
     );
   }
 
-  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 +132,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 +218,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: isMonitorConnected(connectionStatus),
+      },
     });
     this.onChangeEmitter.fire({
-      property: 'connected',
-      value: this._connected,
+      property: 'connectionStatus',
+      value: this._connectionStatus,
     });
   }
 
@@ -238,7 +252,7 @@ export class MonitorModel implements FrontendApplicationContribution {
       darkTheme,
       wsPort,
       serialPort,
-      connected,
+      connectionStatus,
     } = monitorUISettings;
 
     if (!isNullOrUndefined(autoscroll)) this.autoscroll = autoscroll;
@@ -248,31 +262,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/notification-center.ts

@@ -18,7 +18,7 @@ import {
   AttachedBoardsChangeEvent,
   BoardsPackage,
   LibraryPackage,
-  Config,
+  ConfigState,
   Sketch,
   ProgressMessage,
 } from '../common/protocol';
@@ -37,6 +37,7 @@ export class NotificationCenter
   @inject(FrontendApplicationStateService)
   private readonly appStateService: FrontendApplicationStateService;
 
+  private readonly didReinitializeEmitter = new Emitter<void>();
   private readonly indexUpdateDidCompleteEmitter =
     new Emitter<IndexUpdateDidCompleteParams>();
   private readonly indexUpdateWillStartEmitter =
@@ -47,9 +48,7 @@ export class NotificationCenter
     new Emitter<IndexUpdateDidFailParams>();
   private readonly daemonDidStartEmitter = new Emitter<string>();
   private readonly daemonDidStopEmitter = new Emitter<void>();
-  private readonly configDidChangeEmitter = new Emitter<{
-    config: Config | undefined;
-  }>();
+  private readonly configDidChangeEmitter = new Emitter<ConfigState>();
   private readonly platformDidInstallEmitter = new Emitter<{
     item: BoardsPackage;
   }>();
@@ -57,7 +56,7 @@ export class NotificationCenter
     item: BoardsPackage;
   }>();
   private readonly libraryDidInstallEmitter = new Emitter<{
-    item: LibraryPackage;
+    item: LibraryPackage | 'zip-install';
   }>();
   private readonly libraryDidUninstallEmitter = new Emitter<{
     item: LibraryPackage;
@@ -71,6 +70,7 @@ export class NotificationCenter
     new Emitter<FrontendApplicationState>();
 
   private readonly toDispose = new DisposableCollection(
+    this.didReinitializeEmitter,
     this.indexUpdateWillStartEmitter,
     this.indexUpdateDidProgressEmitter,
     this.indexUpdateDidCompleteEmitter,
@@ -85,6 +85,7 @@ export class NotificationCenter
     this.attachedBoardsDidChangeEmitter
   );
 
+  readonly onDidReinitialize = this.didReinitializeEmitter.event;
   readonly onIndexUpdateDidComplete = this.indexUpdateDidCompleteEmitter.event;
   readonly onIndexUpdateWillStart = this.indexUpdateWillStartEmitter.event;
   readonly onIndexUpdateDidProgress = this.indexUpdateDidProgressEmitter.event;
@@ -115,6 +116,10 @@ export class NotificationCenter
     this.toDispose.dispose();
   }
 
+  notifyDidReinitialize(): void {
+    this.didReinitializeEmitter.fire();
+  }
+
   notifyIndexUpdateWillStart(params: IndexUpdateWillStartParams): void {
     this.indexUpdateWillStartEmitter.fire(params);
   }
@@ -139,7 +144,7 @@ export class NotificationCenter
     this.daemonDidStopEmitter.fire();
   }
 
-  notifyConfigDidChange(event: { config: Config | undefined }): void {
+  notifyConfigDidChange(event: ConfigState): void {
     this.configDidChangeEmitter.fire(event);
   }
 
@@ -151,7 +156,9 @@ export class NotificationCenter
     this.platformDidUninstallEmitter.fire(event);
   }
 
-  notifyLibraryDidInstall(event: { item: LibraryPackage }): void {
+  notifyLibraryDidInstall(event: {
+    item: LibraryPackage | 'zip-install';
+  }): void {
     this.libraryDidInstallEmitter.fire(event);
   }
 

arduino-ide-extension/src/browser/serial/monitor/monitor-view-contribution.tsx

@@ -10,6 +10,7 @@ import {
 import { ArduinoToolbar } from '../../toolbar/arduino-toolbar';
 import { ArduinoMenus } from '../../menu/arduino-menus';
 import { nls } from '@theia/core/lib/common';
+import { Event } from '@theia/core/lib/common/event';
 import { MonitorModel } from '../../monitor-model';
 import { MonitorManagerProxyClient } from '../../../common/protocol';
 
@@ -84,13 +85,13 @@ export class MonitorViewContribution
       id: 'monitor-autoscroll',
       render: () => this.renderAutoScrollButton(),
       isVisible: (widget) => widget instanceof MonitorWidget,
-      onDidChange: this.model.onChange as any, // XXX: it's a hack. See: https://github.com/eclipse-theia/theia/pull/6696/
+      onDidChange: this.model.onChange as Event<unknown> as Event<void>,
     });
     registry.registerItem({
       id: 'monitor-timestamp',
       render: () => this.renderTimestampButton(),
       isVisible: (widget) => widget instanceof MonitorWidget,
-      onDidChange: this.model.onChange as any, // XXX: it's a hack. See: https://github.com/eclipse-theia/theia/pull/6696/
+      onDidChange: this.model.onChange as Event<unknown> as Event<void>,
     });
     registry.registerItem({
       id: SerialMonitor.Commands.CLEAR_OUTPUT.id,
@@ -143,8 +144,7 @@ export class MonitorViewContribution
   protected async reset(): Promise<void> {
     const widget = this.tryGetWidget();
     if (widget) {
-      widget.dispose();
-      await this.openView({ activate: true, reveal: true });
+      widget.reset();
     }
   }
 

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

@@ -1,7 +1,14 @@
 import * as React from '@theia/core/shared/react';
-import { injectable, inject } from '@theia/core/shared/inversify';
+import {
+  injectable,
+  inject,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { Emitter } from '@theia/core/lib/common/event';
-import { Disposable } from '@theia/core/lib/common/disposable';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
 import {
   ReactWidget,
   Message,
@@ -13,9 +20,13 @@ 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';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 
 @injectable()
 export class MonitorWidget extends ReactWidget {
@@ -40,40 +51,46 @@ export class MonitorWidget extends ReactWidget {
   protected closing = false;
   protected readonly clearOutputEmitter = new Emitter<void>();
 
-  constructor(
-    @inject(MonitorModel)
-    protected readonly monitorModel: MonitorModel,
+  @inject(MonitorModel)
+  private readonly monitorModel: MonitorModel;
+  @inject(MonitorManagerProxyClient)
+  private readonly monitorManagerProxy: MonitorManagerProxyClient;
+  @inject(BoardsServiceProvider)
+  private readonly boardsServiceProvider: BoardsServiceProvider;
+  @inject(FrontendApplicationStateService)
+  private readonly appStateService: FrontendApplicationStateService;
 
-    @inject(MonitorManagerProxyClient)
-    protected readonly monitorManagerProxy: MonitorManagerProxyClient,
+  private readonly toDisposeOnReset: DisposableCollection;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceProvider: BoardsServiceProvider
-  ) {
+  constructor() {
     super();
     this.id = MonitorWidget.ID;
     this.title.label = MonitorWidget.LABEL;
     this.title.iconClass = 'monitor-tab-icon';
     this.title.closable = true;
     this.scrollOptions = undefined;
+    this.toDisposeOnReset = new DisposableCollection();
     this.toDispose.push(this.clearOutputEmitter);
-    this.toDispose.push(
-      Disposable.create(() => this.monitorManagerProxy.disconnect())
-    );
   }
 
-  protected override onBeforeAttach(msg: Message): void {
-    this.update();
-    this.toDispose.push(this.monitorModel.onChange(() => this.update()));
-    this.getCurrentSettings().then(this.onMonitorSettingsDidChange.bind(this));
-    this.monitorManagerProxy.onMonitorSettingsDidChange(
-      this.onMonitorSettingsDidChange.bind(this)
-    );
-
-    this.monitorManagerProxy.startMonitor();
+  @postConstruct()
+  protected init(): void {
+    this.toDisposeOnReset.dispose();
+    this.toDisposeOnReset.pushAll([
+      Disposable.create(() => this.monitorManagerProxy.disconnect()),
+      this.monitorModel.onChange(() => this.update()),
+      this.monitorManagerProxy.onMonitorSettingsDidChange((event) =>
+        this.updateSettings(event)
+      ),
+    ]);
+    this.startMonitor();
   }
 
-  onMonitorSettingsDidChange(settings: MonitorSettings): void {
+  reset(): void {
+    this.init();
+  }
+
+  private updateSettings(settings: MonitorSettings): void {
     this.settings = {
       ...this.settings,
       pluggableMonitorSettings: {
@@ -90,6 +107,7 @@ export class MonitorWidget extends ReactWidget {
   }
 
   override dispose(): void {
+    this.toDisposeOnReset.dispose();
     super.dispose();
   }
 
@@ -117,7 +135,12 @@ export class MonitorWidget extends ReactWidget {
     (this.focusNode || this.node).focus();
   }
 
-  protected onFocusResolved = (element: HTMLElement | undefined) => {
+  protected override onAfterShow(msg: Message): void {
+    super.onAfterShow(msg);
+    this.update();
+  }
+
+  protected onFocusResolved = (element: HTMLElement | undefined): void => {
     if (this.closing || !this.isAttached) {
       return;
     }
@@ -127,7 +150,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'),
@@ -151,11 +174,23 @@ export class MonitorWidget extends ReactWidget {
     ];
   }
 
-  private getCurrentSettings(): Promise<MonitorSettings> {
+  private async startMonitor(): Promise<void> {
+    await this.appStateService.reachedState('ready');
+    await this.boardsServiceProvider.reconciled;
+    await this.syncSettings();
+    await this.monitorManagerProxy.startMonitor();
+  }
+
+  private async syncSettings(): Promise<void> {
+    const settings = await this.getCurrentSettings();
+    this.updateSettings(settings);
+  }
+
+  private async getCurrentSettings(): Promise<MonitorSettings> {
     const board = this.boardsServiceProvider.boardsConfig.selectedBoard;
     const port = this.boardsServiceProvider.boardsConfig.selectedPort;
     if (!board || !port) {
-      return Promise.resolve(this.settings || {});
+      return this.settings || {};
     }
     return this.monitorManagerProxy.getCurrentSettings(board, port);
   }
@@ -166,7 +201,7 @@ export class MonitorWidget extends ReactWidget {
       : undefined;
 
     const baudrateOptions = baudrate?.values.map((b) => ({
-      label: b + ' baud',
+      label: nls.localize('arduino/monitor/baudRate', '{0} baud', b),
       value: b,
     }));
     const baudrateSelectedOption = baudrateOptions?.find(
@@ -176,7 +211,7 @@ export class MonitorWidget extends ReactWidget {
     const lineEnding =
       this.lineEndings.find(
         (item) => item.value === this.monitorModel.lineEnding
-      ) || this.lineEndings[1]; // Defaults to `\n`.
+      ) || MonitorEOL.DEFAULT;
 
     return (
       <div className="serial-monitor">
@@ -223,13 +258,13 @@ export class MonitorWidget extends ReactWidget {
     );
   }
 
-  protected readonly onSend = (value: string) => this.doSend(value);
-  protected async doSend(value: string): Promise<void> {
+  protected readonly onSend = (value: string): void => this.doSend(value);
+  protected doSend(value: string): void {
     this.monitorManagerProxy.send(value);
   }
 
   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,83 @@ export class SerialMonitorSendInput extends React.Component<
   }
 
   override render(): React.ReactNode {
+    const status = this.state.connectionStatus;
+    const input = this.renderInput(status);
+    if (status !== 'connecting') {
+      return input;
+    }
+    return <label>{input}</label>;
+  }
+
+  private renderInput(status: MonitorConnectionStatus): React.ReactNode {
+    const inputClassName = this.inputClassName(status);
+    const placeholder = this.placeholder;
+    const readOnly = Boolean(inputClassName);
     return (
       <input
         ref={this.setRef}
         type="text"
-        className={`theia-input ${this.shouldShowWarning() ? 'warning' : ''}`}
-        placeholder={this.placeholder}
-        value={this.state.text}
+        className={`theia-input ${inputClassName}`}
+        readOnly={readOnly}
+        placeholder={placeholder}
+        title={placeholder}
+        value={readOnly ? '' : this.state.text} // always show the placeholder if cannot edit the <input>
         onChange={this.onChange}
         onKeyDown={this.onKeyDown}
       />
     );
   }
 
+  private inputClassName(
+    status: MonitorConnectionStatus
+  ): 'error' | 'warning' | '' {
+    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/serial/monitor/serial-monitor-send-output.tsx

@@ -17,7 +17,7 @@ export class SerialMonitorOutput extends React.Component<
    * Do not touch it. It is used to be able to "follow" the serial monitor log.
    */
   protected toDisposeBeforeUnmount = new DisposableCollection();
-  private listRef: React.RefObject<any>;
+  private listRef: React.RefObject<List>;
 
   constructor(props: Readonly<SerialMonitorOutput.Props>) {
     super(props);
@@ -34,12 +34,10 @@ export class SerialMonitorOutput extends React.Component<
       <List
         className="serial-monitor-messages"
         height={this.props.height}
-        itemData={
-          {
-            lines: this.state.lines,
-            timestamp: this.state.timestamp,
-          } as any
-        }
+        itemData={{
+          lines: this.state.lines,
+          timestamp: this.state.timestamp,
+        }}
         itemCount={this.state.lines.length}
         itemSize={18}
         width={'100%'}
@@ -65,11 +63,13 @@ export class SerialMonitorOutput extends React.Component<
           this.state.charCount
         );
         const [lines, charCount] = truncateLines(newLines, totalCharCount);
-        this.setState({
-          lines,
-          charCount,
-        });
-        this.scrollToBottom();
+        this.setState(
+          {
+            lines,
+            charCount,
+          },
+          () => this.scrollToBottom()
+        );
       }),
       this.props.clearConsoleEvent(() =>
         this.setState({ lines: [], charCount: 0 })
@@ -91,11 +91,11 @@ export class SerialMonitorOutput extends React.Component<
     this.toDisposeBeforeUnmount.dispose();
   }
 
-  scrollToBottom = ((): void => {
+  private readonly scrollToBottom = () => {
     if (this.listRef.current && this.props.monitorModel.autoscroll) {
       this.listRef.current.scrollToItem(this.state.lines.length, 'end');
     }
-  }).bind(this);
+  };
 }
 
 const _Row = ({

arduino-ide-extension/src/browser/sketches-service-client-impl.ts

@@ -0,0 +1,293 @@
+import { inject, injectable } from '@theia/core/shared/inversify';
+import URI from '@theia/core/lib/common/uri';
+import { Emitter } from '@theia/core/lib/common/event';
+import { notEmpty } from '@theia/core/lib/common/objects';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { FileChangeType } from '@theia/filesystem/lib/common/files';
+import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import { Sketch, SketchesService } from '../common/protocol';
+import { ConfigServiceClient } from './config/config-service-client';
+import {
+  SketchContainer,
+  SketchesError,
+  SketchRef,
+} from '../common/protocol/sketches-service';
+import {
+  ARDUINO_CLOUD_FOLDER,
+  REMOTE_SKETCHBOOK_FOLDER,
+} from './utils/constants';
+import * as monaco from '@theia/monaco-editor-core';
+import { Deferred } from '@theia/core/lib/common/promise-util';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+
+const READ_ONLY_FILES = ['sketch.json'];
+const READ_ONLY_FILES_REMOTE = ['thingProperties.h', 'thingsProperties.h'];
+
+export type CurrentSketch = Sketch | 'invalid';
+export namespace CurrentSketch {
+  export function isValid(arg: CurrentSketch | undefined): arg is Sketch {
+    return !!arg && arg !== 'invalid';
+  }
+}
+
+@injectable()
+export class SketchesServiceClientImpl
+  implements FrontendApplicationContribution
+{
+  @inject(FileService)
+  private readonly fileService: FileService;
+  @inject(SketchesService)
+  private readonly sketchesService: SketchesService;
+  @inject(WorkspaceService)
+  private readonly workspaceService: WorkspaceService;
+  @inject(ConfigServiceClient)
+  private readonly configService: ConfigServiceClient;
+  @inject(FrontendApplicationStateService)
+  private readonly appStateService: FrontendApplicationStateService;
+
+  private sketches = new Map<string, SketchRef>();
+  private onSketchbookDidChangeEmitter = new Emitter<{
+    created: SketchRef[];
+    removed: SketchRef[];
+  }>();
+  readonly onSketchbookDidChange = this.onSketchbookDidChangeEmitter.event;
+  private currentSketchDidChangeEmitter = new Emitter<CurrentSketch>();
+  readonly onCurrentSketchDidChange = this.currentSketchDidChangeEmitter.event;
+
+  private toDisposeBeforeWatchSketchbookDir = new DisposableCollection();
+  private toDispose = new DisposableCollection(
+    this.onSketchbookDidChangeEmitter,
+    this.currentSketchDidChangeEmitter,
+    this.toDisposeBeforeWatchSketchbookDir
+  );
+
+  private _currentSketch: CurrentSketch | undefined;
+  private currentSketchLoaded = new Deferred<CurrentSketch>();
+
+  onStart(): void {
+    const sketchDirUri = this.configService.tryGetSketchDirUri();
+    this.watchSketchbookDir(sketchDirUri);
+    const refreshCurrentSketch = async () => {
+      const currentSketch = await this.loadCurrentSketch();
+      this.useCurrentSketch(currentSketch);
+    };
+    this.toDispose.push(
+      this.configService.onDidChangeSketchDirUri((sketchDirUri) => {
+        this.watchSketchbookDir(sketchDirUri);
+        refreshCurrentSketch();
+      })
+    );
+    this.appStateService
+      .reachedState('started_contributions')
+      .then(refreshCurrentSketch);
+  }
+
+  private async watchSketchbookDir(
+    sketchDirUri: URI | undefined
+  ): Promise<void> {
+    this.toDisposeBeforeWatchSketchbookDir.dispose();
+    if (!sketchDirUri) {
+      return;
+    }
+    const container = await this.sketchesService.getSketches({
+      uri: sketchDirUri.toString(),
+    });
+    for (const sketch of SketchContainer.toArray(container)) {
+      this.sketches.set(sketch.uri, sketch);
+    }
+    this.toDisposeBeforeWatchSketchbookDir.pushAll([
+      Disposable.create(() => this.sketches.clear()),
+      // Watch changes in the sketchbook to update `File` > `Sketchbook` menu items.
+      this.fileService.watch(sketchDirUri, {
+        recursive: true,
+        excludes: [],
+      }),
+      this.fileService.onDidFilesChange(async (event) => {
+        for (const { type, resource } of event.changes) {
+          // The file change events have higher precedence in the current sketch over the sketchbook.
+          if (
+            CurrentSketch.isValid(this._currentSketch) &&
+            new URI(this._currentSketch.uri).isEqualOrParent(resource)
+          ) {
+            // https://github.com/arduino/arduino-ide/pull/1351#pullrequestreview-1086666656
+            // On a sketch file rename, the FS watcher will contain two changes:
+            //  - Deletion of the original file,
+            //  - Update of the new file,
+            // Hence, `UPDATE` events must be processed but only and if only there is a `DELETED` change in the same event.
+            // Otherwise, IDE2 would ask CLI to reload the sketch content on every save event in IDE2.
+            if (type === FileChangeType.UPDATED && event.changes.length === 1) {
+              // If the event contains only one `UPDATE` change, it cannot be a rename.
+              return;
+            }
+
+            let reloadedSketch: Sketch | undefined = undefined;
+            try {
+              reloadedSketch = await this.sketchesService.loadSketch(
+                this._currentSketch.uri
+              );
+            } catch (err) {
+              if (!SketchesError.NotFound.is(err)) {
+                throw err;
+              }
+            }
+
+            if (!reloadedSketch) {
+              return;
+            }
+
+            if (!Sketch.sameAs(this._currentSketch, reloadedSketch)) {
+              this.useCurrentSketch(reloadedSketch, true);
+            }
+            return;
+          }
+          // We track main sketch files changes only. // TODO: check sketch folder changes. One can rename the folder without renaming the `.ino` file.
+          if (sketchDirUri.isEqualOrParent(resource)) {
+            if (Sketch.isSketchFile(resource)) {
+              if (type === FileChangeType.ADDED) {
+                try {
+                  const toAdd = await this.sketchesService.loadSketch(
+                    resource.parent.toString()
+                  );
+                  if (!this.sketches.has(toAdd.uri)) {
+                    console.log(
+                      `New sketch '${toAdd.name}' was created in sketchbook '${sketchDirUri}'.`
+                    );
+                    this.sketches.set(toAdd.uri, toAdd);
+                    this.fireSoon(toAdd, 'created');
+                  }
+                } catch {}
+              } else if (type === FileChangeType.DELETED) {
+                const uri = resource.parent.toString();
+                const toDelete = this.sketches.get(uri);
+                if (toDelete) {
+                  console.log(
+                    `Sketch '${toDelete.name}' was removed from sketchbook '${sketchDirUri}'.`
+                  );
+                  this.sketches.delete(uri);
+                  this.fireSoon(toDelete, 'removed');
+                }
+              }
+            }
+          }
+        }
+      }),
+    ]);
+  }
+
+  private useCurrentSketch(
+    currentSketch: CurrentSketch,
+    reassignPromise = false
+  ) {
+    this._currentSketch = currentSketch;
+    if (reassignPromise) {
+      this.currentSketchLoaded = new Deferred();
+    }
+    this.currentSketchLoaded.resolve(this._currentSketch);
+    this.currentSketchDidChangeEmitter.fire(this._currentSketch);
+  }
+
+  onStop(): void {
+    this.toDispose.dispose();
+  }
+
+  private async loadCurrentSketch(): Promise<CurrentSketch> {
+    const sketches = (
+      await Promise.all(
+        this.workspaceService
+          .tryGetRoots()
+          .map(({ resource }) =>
+            this.sketchesService.getSketchFolder(resource.toString())
+          )
+      )
+    ).filter(notEmpty);
+    if (!sketches.length) {
+      return 'invalid';
+    }
+    if (sketches.length > 1) {
+      console.log(
+        `Multiple sketch folders were found in the workspace. Falling back to the first one. Sketch folders: ${JSON.stringify(
+          sketches
+        )}`
+      );
+    }
+    return sketches[0];
+  }
+
+  async currentSketch(): Promise<CurrentSketch> {
+    return this.currentSketchLoaded.promise;
+  }
+
+  tryGetCurrentSketch(): CurrentSketch | undefined {
+    return this._currentSketch;
+  }
+
+  async currentSketchFile(): Promise<string | undefined> {
+    const currentSketch = await this.currentSketch();
+    if (CurrentSketch.isValid(currentSketch)) {
+      return currentSketch.mainFileUri;
+    }
+    return undefined;
+  }
+
+  private fireSoonHandle?: number;
+  private bufferedSketchbookEvents: {
+    type: 'created' | 'removed';
+    sketch: SketchRef;
+  }[] = [];
+
+  private fireSoon(sketch: SketchRef, type: 'created' | 'removed'): void {
+    this.bufferedSketchbookEvents.push({ type, sketch });
+
+    if (typeof this.fireSoonHandle === 'number') {
+      window.clearTimeout(this.fireSoonHandle);
+    }
+
+    this.fireSoonHandle = window.setTimeout(() => {
+      const event: { created: SketchRef[]; removed: SketchRef[] } = {
+        created: [],
+        removed: [],
+      };
+      for (const { type, sketch } of this.bufferedSketchbookEvents) {
+        if (type === 'created') {
+          event.created.push(sketch);
+        } else {
+          event.removed.push(sketch);
+        }
+      }
+      this.onSketchbookDidChangeEmitter.fire(event);
+      this.bufferedSketchbookEvents.length = 0;
+    }, 100);
+  }
+
+  /**
+   * `true` if the `uri` is not contained in any of the opened workspaces. Otherwise, `false`.
+   */
+  isReadOnly(uri: URI | monaco.Uri | string): boolean {
+    const toCheck = uri instanceof URI ? uri : new URI(uri);
+    if (toCheck.scheme === 'user-storage') {
+      return false;
+    }
+
+    const isCloudSketch = toCheck
+      .toString()
+      .includes(`${REMOTE_SKETCHBOOK_FOLDER}/${ARDUINO_CLOUD_FOLDER}`);
+
+    const filesToCheck = [
+      ...READ_ONLY_FILES,
+      ...(isCloudSketch ? READ_ONLY_FILES_REMOTE : []),
+    ];
+
+    if (filesToCheck.includes(toCheck?.path?.base)) {
+      return true;
+    }
+    const readOnly = !this.workspaceService
+      .tryGetRoots()
+      .some(({ resource }) => resource.isEqualOrParent(toCheck));
+    return readOnly;
+  }
+}

arduino-ide-extension/src/browser/style/account-icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="#626262"><path d="M16 7.992C16 3.58 12.416 0 8 0S0 3.58 0 7.992c0 2.43 1.104 4.62 2.832 6.09c.016.016.032.016.032.032c.144.112.288.224.448.336c.08.048.144.111.224.175A7.98 7.98 0 0 0 8.016 16a7.98 7.98 0 0 0 4.48-1.375c.08-.048.144-.111.224-.16c.144-.111.304-.223.448-.335c.016-.016.032-.016.032-.032c1.696-1.487 2.8-3.676 2.8-6.106zm-8 7.001c-1.504 0-2.88-.48-4.016-1.279c.016-.128.048-.255.08-.383a4.17 4.17 0 0 1 .416-.991c.176-.304.384-.576.64-.816c.24-.24.528-.463.816-.639c.304-.176.624-.304.976-.4A4.15 4.15 0 0 1 8 10.342a4.185 4.185 0 0 1 2.928 1.166c.368.368.656.8.864 1.295c.112.288.192.592.24.911A7.03 7.03 0 0 1 8 14.993zm-2.448-7.4a2.49 2.49 0 0 1-.208-1.024c0-.351.064-.703.208-1.023c.144-.32.336-.607.576-.847c.24-.24.528-.431.848-.575c.32-.144.672-.208 1.024-.208c.368 0 .704.064 1.024.208c.32.144.608.336.848.575c.24.24.432.528.576.847c.144.32.208.672.208 1.023c0 .368-.064.704-.208 1.023a2.84 2.84 0 0 1-.576.848a2.84 2.84 0 0 1-.848.575a2.715 2.715 0 0 1-2.064 0a2.84 2.84 0 0 1-.848-.575a2.526 2.526 0 0 1-.56-.848zm7.424 5.306c0-.032-.016-.048-.016-.08a5.22 5.22 0 0 0-.688-1.406a4.883 4.883 0 0 0-1.088-1.135a5.207 5.207 0 0 0-1.04-.608a2.82 2.82 0 0 0 .464-.383a4.2 4.2 0 0 0 .624-.784a3.624 3.624 0 0 0 .528-1.934a3.71 3.71 0 0 0-.288-1.47a3.799 3.799 0 0 0-.816-1.199a3.845 3.845 0 0 0-1.2-.8a3.72 3.72 0 0 0-1.472-.287a3.72 3.72 0 0 0-1.472.288a3.631 3.631 0 0 0-1.2.815a3.84 3.84 0 0 0-.8 1.199a3.71 3.71 0 0 0-.288 1.47c0 .352.048.688.144 1.007c.096.336.224.64.4.927c.16.288.384.544.624.784c.144.144.304.271.48.383a5.12 5.12 0 0 0-1.04.624c-.416.32-.784.703-1.088 1.119a4.999 4.999 0 0 0-.688 1.406c-.016.032-.016.064-.016.08C1.776 11.636.992 9.91.992 7.992C.992 4.14 4.144.991 8 .991s7.008 3.149 7.008 7.001a6.96 6.96 0 0 1-2.032 4.907z"/></g></svg>

arduino-ide-extension/src/browser/style/boards-config-dialog.css

@@ -165,7 +165,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   border: 1px solid var(--theia-arduino-toolbar-dropdown-border);
   display: flex;
   gap: 10px;
-  height: 28px;
+  height: var(--arduino-button-height);
   margin: 0 4px;
   overflow: hidden;
   padding: 0 10px;

arduino-ide-extension/src/browser/style/cloud-sketchbook.css

@@ -15,10 +15,10 @@
 
 .p-TabBar-tabIcon.cloud-sketchbook-tree-icon {
     background-color: var(--theia-foreground);
-    -webkit-mask: url(./cloud-sketchbook-tree-icon.svg);
+    -webkit-mask: url(../icons/arduino-cloud.svg);
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
+    width: 19px !important;
     height: var(--theia-icon-size);
     -webkit-mask-size: 100%;
 }
@@ -26,7 +26,7 @@
 .p-mod-current
 .cloud-sketchbook-tree-icon {
     background-color: var(--theia-foreground);
-    -webkit-mask: url(./cloud-sketchbook-tree-icon-filled.svg);
+    -webkit-mask: url(../icons/arduino-cloud-filled.svg);
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
@@ -99,28 +99,9 @@
     color: var(--theia-textLink-foreground);
 }
 
-.pull-sketch-icon {
-    background-color: var(--theia-foreground);
-    -webkit-mask: url(./pull-sketch-icon.svg);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-}
-
-.push-sketch-icon {
-    background-color: var(--theia-foreground);
-    -webkit-mask: url(./push-sketch-icon.svg);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-}
-
 .account-icon {
-    background: url("./account-icon.svg") center center no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
+    width: var(--theia-private-sidebar-icon-size);
+    height: var(--theia-private-sidebar-icon-size);
     border-radius: 50%;
     overflow: hidden;
 }
@@ -199,3 +180,12 @@
 .arduino-share-sketch-dialog .sketch-link-embed textarea {
     width: 100%;
 }
+
+.actions.item.flex-line .fa,
+.theia-file-icons-js.file-icon .fa {
+    font-size: var(--theia-icon-size);
+}
+
+.theia-file-icons-js.file-icon.not-in-sync-offline .fa {
+    color: var(--theia-activityBar-inactiveForeground);
+}

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

@@ -12,7 +12,7 @@
     
     min-width: 424px;
     max-height: 560px;
-    padding: 0 28px;
+    padding: 0 var(--arduino-button-height);
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogTitle {
@@ -35,7 +35,7 @@
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent > input {
-    margin-bottom: 28px;
+    margin-bottom: var(--arduino-button-height);
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent > div {
@@ -43,7 +43,7 @@
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection {
-    margin-top: 28px;
+    margin-top: var(--arduino-button-height);
 }
 .p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection:first-child {
     margin-top: 0;

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

@@ -1,14 +1,19 @@
 @font-face {
   font-family: 'Open Sans';
+  src: url('fonts/OpenSans-Regular-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Open Sans Bold';
   src: url('fonts/OpenSans-Bold-webfont.woff') format('woff');
 }
 
 @font-face {
   font-family: 'FontAwesome';
   src:
-    url('fonts/FontAwesome.ttf?2jhpmq') format('truetype'),
-    url('fonts/FontAwesome.woff?2jhpmq') format('woff'),
-    url('fonts/FontAwesome.svg?2jhpmq#FontAwesome') format('svg');
+    url('fonts/FontAwesome.ttf?h959em') format('truetype'),
+    url('fonts/FontAwesome.woff?h959em') format('woff'),
+    url('fonts/FontAwesome.svg?h959em#FontAwesome') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -674,3 +679,21 @@
 .fa-microchip:before {
   content: "\f2db";
 }
+.fa-arduino-cloud-download:before {
+  content: "\e910";
+}
+.fa-arduino-cloud-upload:before {
+  content: "\e914";
+}
+.fa-arduino-cloud:before {
+  content: "\e915";
+}
+.fa-arduino-cloud-filled:before {
+  content: "\e912";
+}
+.fa-arduino-cloud-offline:before {
+  content: "\e913";
+}
+.fa-arduino-cloud-filled-offline:before {
+  content: "\e911";
+}

arduino-ide-extension/src/browser/style/fonts/FontAwesome.svg

@@ -23,6 +23,12 @@
 <glyph unicode="&#xe90d;" glyph-name="arduino-monitor" horiz-adv-x="1536" d="M651.891 59.977c-92.835 0-179.095 28.493-250.5 77.197l-129.659-129.658c-22.494-22.496-58.964-22.496-81.458 0s-22.494 58.963 0 81.459l124.954 124.954c-67.75 78.157-108.777 180.090-108.777 291.489 0 245.759 199.68 445.439 445.44 445.439s445.44-199.679 445.44-445.439c0-245.761-199.68-445.441-445.44-445.441zM651.891 797.257c-161.28 0-291.84-130.559-291.84-291.839s130.56-291.841 291.84-291.841c160.512 0 291.84 130.561 291.84 291.841 0 160.511-130.56 291.839-291.84 291.839zM1149.562 472.766c0-35.423 28.717-64.138 64.141-64.138s64.134 28.716 64.134 64.138c0 35.423-28.71 64.139-64.134 64.139s-64.141-28.716-64.141-64.139zM64.064 408.62c-35.382 0-64.064 28.682-64.064 64.063s28.682 64.064 64.064 64.064c35.381 0 64.064-28.682 64.064-64.064s-28.683-64.063-64.064-64.063zM1458.707 408.628c-35.418 0-64.134 28.716-64.134 64.138s28.717 64.139 64.134 64.139c35.424 0 64.141-28.716 64.141-64.139s-28.717-64.138-64.141-64.138zM652.659 424.010c-44.961 0-81.408 36.447-81.408 81.407s36.447 81.408 81.408 81.408c44.96 0 81.408-36.447 81.408-81.408s-36.448-81.407-81.408-81.407z" />
 <glyph unicode="&#xe90e;" glyph-name="arduino-sketch-tabs-menu" d="M511.998 347.425c50.495 0 91.432 40.936 91.432 91.432s-40.936 91.432-91.432 91.432c-50.495 0-91.432-40.936-91.432-91.432s40.936-91.432 91.432-91.432zM923.433 347.425c50.494 0 91.432 40.936 91.432 91.432s-40.937 91.432-91.432 91.432c-50.494 0-91.432-40.936-91.432-91.432s40.937-91.432 91.432-91.432zM100.565 347.425c50.495 0 91.432 40.936 91.432 91.432s-40.936 91.432-91.432 91.432c-50.495 0-91.432-40.936-91.432-91.432s40.936-91.432 91.432-91.432z" />
 <glyph unicode="&#xe90f;" glyph-name="arduino-plotter" horiz-adv-x="862" d="M323.368-19.351c-20.263 0-39 11.42-48.21 29.788l-146.789 293.581h-74.474c-29.789 0-53.895 24.107-53.895 53.895s24.105 53.895 53.895 53.895h107.789c20.421 0 39.053-11.528 48.21-29.788l96.527-193.056 180.263 720.949c5.842 23.579 26.737 40.263 51 40.842 23.947 1.579 45.893-15.158 52.894-38.421l150.162-500.526h67.681c29.788 0 53.895-24.107 53.895-53.895s-24.107-53.895-53.895-53.895h-107.789c-23.789 0-44.787 15.629-51.631 38.422l-105.316 351.104-168.052-672.053c-5.474-21.897-23.948-38.055-46.368-40.529-2-0.21-3.947-0.313-5.895-0.313h-0.001z" />
+<glyph unicode="&#xe910;" glyph-name="arduino-cloud-download" d="M684.256 156.891l-146.286-146.286c-6.932-6.802-16.255-10.606-25.964-10.606s-19.032 3.803-25.964 10.606l-146.286 146.286c-3.41 3.41-6.115 7.458-7.96 11.913s-2.796 9.23-2.796 14.052c-0.001 9.738 3.868 19.079 10.754 25.965s16.226 10.756 25.964 10.756c4.822 0 9.597-0.949 14.052-2.795s8.504-4.549 11.914-7.959l83.749-84.107v423.856c0 9.699 3.853 19.002 10.712 25.86s16.16 10.712 25.86 10.712c9.699 0 19.001-3.853 25.86-10.712s10.712-16.16 10.712-25.86v-423.856l83.749 84.107c6.886 6.886 16.227 10.756 25.966 10.756s19.079-3.869 25.966-10.756c6.886-6.886 10.755-16.227 10.755-25.966s-3.869-19.079-10.755-25.966zM786.286 292.572h-128c-9.699 0-19.001 3.852-25.86 10.711s-10.712 16.161-10.712 25.86c0 9.699 3.853 19.001 10.712 25.86s16.16 10.712 25.86 10.712h128c32.768 0.031 64.285 12.618 88.057 35.172 23.779 22.554 38.005 53.361 39.76 86.085s-9.092 64.877-30.318 89.846c-21.219 24.97-51.207 40.858-83.785 44.396-8.316 0.882-16.084 4.59-21.994 10.505-5.917 5.914-9.626 13.678-10.503 21.996-3.35 31.449-18.235 60.542-41.784 81.652-23.551 21.11-54.092 32.737-85.719 32.634-23.597 0.154-46.754-6.384-66.785-18.857-6.953-4.363-15.168-6.269-23.332-5.414s-15.805 4.42-21.704 10.128c-33.699 32.745-78.905 50.956-125.893 50.714-44.461-0.011-87.395-16.221-120.77-45.598s-54.9-69.908-60.551-114.009c-0.856-6.825-3.618-13.27-7.971-18.595s-10.119-9.315-16.636-11.512c-28.688-9.795-52.969-29.455-68.519-55.477s-21.361-56.718-16.396-86.623c4.964-29.905 20.381-57.078 43.504-76.68s52.454-30.362 82.768-30.363h128c9.699 0 19.002-3.853 25.86-10.712s10.711-16.16 10.711-25.86c0-9.699-3.853-19.002-10.711-25.86s-16.161-10.711-25.86-10.711h-128c-45.726 0.010-90.084 15.596-125.767 44.191s-60.559 68.491-70.532 113.116c-9.973 44.625-4.447 91.317 15.667 132.381s53.618 74.052 94.989 93.527c12.401 57.159 43.982 108.357 89.498 145.089s102.228 56.789 160.717 56.839c56.689 0.21 111.801-18.659 156.464-53.571 26.825 11.769 55.891 17.556 85.178 16.958s58.092-7.565 84.415-20.419c26.323-12.854 49.532-31.284 68.007-54.012 18.483-22.728 31.795-49.208 39.007-77.598 47.587-12.004 89.154-40.98 116.875-81.479 27.728-40.499 39.702-89.732 33.675-138.44-6.034-48.708-29.645-93.536-66.406-126.054s-84.136-50.488-133.215-50.527z" />
+<glyph unicode="&#xe911;" glyph-name="arduino-cloud-filled-offline" d="M854.72 704.131l-671.997-672.001c-6.066-5.946-14.223-9.28-22.719-9.28s-16.653 3.334-22.719 9.28c-5.996 6.042-9.361 14.208-9.361 22.72s3.365 16.678 9.361 22.72l107.52 107.52c-37.22 5.818-71.592 23.424-98.059 50.234s-43.632 61.402-48.97 98.694c-5.338 37.292 1.432 75.312 19.315 108.469s45.935 59.7 80.029 75.724c7.995 36.965 25.219 71.304 50.068 99.816s56.512 50.267 92.038 63.237c35.526 12.971 73.758 16.735 111.132 10.941s72.672-20.956 102.604-44.074c23.899 10.368 49.78 15.369 75.821 14.651 26.038-0.718 51.606-7.138 74.896-18.807l105.6 105.596c6.029 6.026 14.202 9.411 22.72 9.411 8.525 0 16.698-3.385 22.72-9.411 6.029-6.026 9.414-14.198 9.414-22.72s-3.386-16.694-9.414-22.72v0zM928 358.827c-0.083-46.653-18.65-91.375-51.642-124.36-32.986-32.986-77.702-51.558-124.358-51.642h-322.563l361.283 361.282c1.6-4.797 2.88-9.6 4.166-14.398 38.093-9.509 71.904-31.506 96.032-62.48s37.184-69.139 37.082-108.402v0z" />
+<glyph unicode="&#xe912;" glyph-name="arduino-cloud-filled" d="M928 358.859c-0.083-46.653-18.65-91.375-51.635-124.36-32.992-32.992-77.709-51.558-124.365-51.642h-479.998c-40.017 0.013-78.836 13.658-110.060 38.688-31.224 25.024-52.989 59.942-61.71 98.999-8.721 39.055-3.876 79.916 13.736 115.849s46.94 64.794 83.151 81.826c7.995 36.965 25.22 71.304 50.068 99.816s56.513 50.266 92.038 63.237c35.526 12.971 73.759 16.735 111.132 10.941s72.672-20.956 102.604-44.074c22.414 9.744 46.599 14.755 71.040 14.72 39.262 0.102 77.425-12.954 108.401-37.083s52.973-57.94 62.483-96.035c38.093-9.508 71.904-31.506 96.032-62.48s37.184-69.14 37.082-108.403z" />
+<glyph unicode="&#xe913;" glyph-name="arduino-cloud-offline" d="M794.88 529.709c-1.28 4.797-2.56 9.601-4.16 14.398l-53.12-53.125c2.080-5.548 5.67-10.404 10.362-14.022 4.698-3.618 10.304-5.853 16.198-6.454 28.493-3.153 54.701-17.094 73.235-38.963 18.541-21.868 28-50.003 26.445-78.628s-14.016-55.569-34.81-75.3c-20.8-19.725-48.365-30.746-77.030-30.79h-258.563l-64-64h322.563c42.944 0.026 84.403 15.744 116.57 44.198s52.832 67.68 58.099 110.301c5.267 42.621-5.216 85.699-29.491 121.13-24.269 35.43-60.646 60.771-102.298 71.254v0zM854.72 749.557c-6.042 5.997-14.208 9.363-22.72 9.363s-16.678-3.366-22.714-9.363l-105.606-105.595c-23.29 11.669-48.858 18.089-74.898 18.806s-51.923-4.284-75.821-14.652c-29.932 23.118-65.23 38.28-102.604 44.074s-75.606 2.029-111.132-10.941c-35.526-12.971-67.19-34.726-92.039-63.237s-42.073-62.851-50.068-99.816c-34.093-16.024-62.145-42.566-80.028-75.723s-24.653-71.177-19.315-108.468c5.338-37.292 22.502-71.884 48.968-98.693s60.837-44.416 98.057-50.234l-107.52-107.52c-5.996-6.042-9.361-14.208-9.361-22.72s3.364-16.678 9.361-22.72c6.065-5.946 14.223-9.28 22.719-9.28s16.653 3.334 22.719 9.28l672.001 672.001c5.997 6.040 9.357 14.207 9.363 22.718 0 8.511-3.366 16.678-9.363 22.719v0zM306.564 246.838h-34.563c-26.523-0.013-52.188 9.395-72.423 26.541s-33.725 40.92-38.067 67.085c-4.342 26.165 0.747 53.022 14.36 75.785s34.865 39.954 59.97 48.51c5.716 1.953 10.763 5.483 14.557 10.184s6.18 10.379 6.883 16.379c5.021 38.555 23.892 73.968 53.095 99.638s66.744 39.843 105.625 39.878c41.119 0.243 80.673-15.741 110.078-44.484 5.176-4.951 11.848-8.045 18.97-8.797s14.294 0.88 20.39 4.641c17.553 10.974 37.86 16.744 58.562 16.641 10.271-0.061 20.492-1.458 30.399-4.156l-347.836-347.843z" />
+<glyph unicode="&#xe914;" glyph-name="arduino-cloud-upload" d="M684.258 412.892c-6.932-6.799-16.255-10.607-25.964-10.607s-19.032 3.809-25.964 10.607l-83.751 84.118v-423.867c0-9.699-3.853-19.003-10.711-25.856-6.859-6.861-16.161-10.715-25.86-10.715s-19.001 3.855-25.86 10.715c-6.859 6.853-10.712 16.157-10.712 25.856v423.867l-83.749-84.118c-6.886-6.886-16.227-10.756-25.966-10.756s-19.079 3.869-25.966 10.756c-6.886 6.886-10.755 16.227-10.755 25.966s3.869 19.079 10.755 25.966l146.286 146.286c6.903 6.854 16.236 10.701 25.964 10.701s19.062-3.847 25.964-10.701l146.286-146.286c6.853-6.904 10.7-16.237 10.701-25.965s-3.845-19.062-10.698-25.966zM786.286 256.001h-128c-9.699 0-19.001 3.852-25.86 10.711s-10.712 16.161-10.712 25.86c0 9.699 3.853 19.001 10.712 25.86s16.16 10.712 25.86 10.712h128c32.768 0.031 64.285 12.618 88.057 35.172 23.779 22.554 38.005 53.361 39.76 86.085s-9.092 64.877-30.318 89.846c-21.219 24.97-51.207 40.858-83.785 44.396-8.316 0.882-16.084 4.59-21.994 10.505-5.917 5.914-9.626 13.678-10.503 21.996-3.35 31.449-18.235 60.542-41.784 81.652-23.551 21.11-54.092 32.737-85.719 32.634-23.597 0.154-46.754-6.384-66.785-18.857-6.954-4.362-15.168-6.268-23.331-5.413s-15.805 4.419-21.705 10.127c-33.699 32.745-78.905 50.956-125.893 50.714-44.461-0.011-87.395-16.221-120.77-45.598s-54.9-69.908-60.551-114.009c-0.856-6.825-3.618-13.27-7.971-18.595s-10.119-9.315-16.636-11.512c-28.688-9.795-52.969-29.455-68.519-55.477s-21.361-56.718-16.396-86.623c4.964-29.905 20.381-57.078 43.504-76.68s52.454-30.362 82.768-30.363h128c9.699 0 19.002-3.853 25.86-10.712s10.711-16.16 10.711-25.86c0-9.699-3.853-19.002-10.711-25.86s-16.161-10.711-25.86-10.711h-128c-45.726 0.010-90.084 15.596-125.767 44.191s-60.559 68.491-70.532 113.116c-9.973 44.625-4.447 91.317 15.667 132.381s53.618 74.052 94.989 93.527c12.401 57.159 43.982 108.357 89.498 145.089s102.228 56.789 160.717 56.839c56.689 0.21 111.801-18.659 156.464-53.571 26.825 11.769 55.891 17.556 85.178 16.958s58.092-7.565 84.415-20.419c26.323-12.854 49.532-31.284 68.007-54.012 18.483-22.728 31.795-49.208 39.007-77.598 47.587-12.004 89.154-40.98 116.875-81.479 27.728-40.499 39.702-89.732 33.675-138.44-6.034-48.708-29.645-93.536-66.406-126.054s-84.136-50.488-133.215-50.527z" />
+<glyph unicode="&#xe915;" glyph-name="arduino-cloud" d="M752 182.857h-480c-40.010 0.006-78.824 13.645-110.046 38.662-31.222 25.024-52.989 59.93-61.716 98.98-8.726 39.047-3.891 79.902 13.709 115.833s46.915 64.796 83.115 81.836c10.851 50.014 38.484 94.812 78.31 126.953s89.45 49.69 140.627 49.734c49.603 0.184 97.826-16.327 136.906-46.875 23.472 10.298 48.904 15.361 74.531 14.838s50.829-6.62 73.862-17.866c23.034-11.247 43.341-27.374 59.507-47.261 16.173-19.887 27.821-43.056 34.131-67.898 41.638-10.504 78.010-35.857 102.266-71.294 24.262-35.437 34.739-78.515 29.466-121.135-5.28-42.623-25.939-81.842-58.106-110.296s-73.619-44.179-116.563-44.211zM416 630.856c-38.904-0.010-76.471-14.193-105.674-39.899s-48.038-61.169-52.982-99.757c-0.749-5.972-3.166-11.611-6.975-16.271s-8.853-8.151-14.556-10.073c-25.102-8.571-46.348-25.773-59.954-48.542s-18.691-49.628-14.347-75.795c4.344-26.167 17.833-49.943 38.066-67.095s45.897-26.566 72.422-26.566h480c28.672 0.026 56.25 11.040 77.050 30.778 20.806 19.731 33.254 46.688 34.79 75.321s-7.955 56.767-26.528 78.616c-18.566 21.848-44.806 35.75-73.312 38.847-7.277 0.772-14.074 4.016-19.245 9.191-5.178 5.176-8.422 11.969-9.19 19.247-2.931 27.518-15.955 52.974-36.563 71.445-20.602 18.471-47.328 28.645-75.002 28.555-20.647 0.135-40.909-5.587-58.437-16.5-6.084-3.816-13.272-5.484-20.415-4.737s-13.83 3.868-18.992 8.861c-29.487 28.652-69.042 44.586-110.156 44.375v0z" />
 <glyph unicode="&#xf001;" glyph-name="music" horiz-adv-x="878" d="M877.714 822.857v-640c0-80.571-120.571-109.714-182.857-109.714s-182.857 29.143-182.857 109.714 120.571 109.714 182.857 109.714c37.714 0 75.429-6.857 109.714-22.286v306.857l-438.857-135.429v-405.143c0-80.571-120.571-109.714-182.857-109.714s-182.857 29.143-182.857 109.714 120.571 109.714 182.857 109.714c37.714 0 75.429-6.857 109.714-22.286v552.571c0 24 16 45.143 38.857 52.571l475.429 146.286c5.143 1.714 10.286 2.286 16 2.286 30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf002;" glyph-name="search" horiz-adv-x="951" d="M658.286 475.428c0 141.143-114.857 256-256 256s-256-114.857-256-256 114.857-256 256-256 256 114.857 256 256zM950.857 0c0-40-33.143-73.143-73.143-73.143-19.429 0-38.286 8-51.429 21.714l-196 195.429c-66.857-46.286-146.857-70.857-228-70.857-222.286 0-402.286 180-402.286 402.286s180 402.286 402.286 402.286 402.286-180 402.286-402.286c0-81.143-24.571-161.143-70.857-228l196-196c13.143-13.143 21.143-32 21.143-51.429z" />
 <glyph unicode="&#xf003;" glyph-name="envelope-o" d="M950.857 91.428v438.857c-12-13.714-25.143-26.286-39.429-37.714-81.714-62.857-164-126.857-243.429-193.143-42.857-36-96-80-155.429-80h-1.143c-59.429 0-112.571 44-155.429 80-79.429 66.286-161.714 130.286-243.429 193.143-14.286 11.429-27.429 24-39.429 37.714v-438.857c0-9.714 8.571-18.286 18.286-18.286h841.143c9.714 0 18.286 8.571 18.286 18.286zM950.857 692c0 14.286 3.429 39.429-18.286 39.429h-841.143c-9.714 0-18.286-8.571-18.286-18.286 0-65.143 32.571-121.714 84-162.286 76.571-60 153.143-120.571 229.143-181.143 30.286-24.571 85.143-77.143 125.143-77.143h1.143c40 0 94.857 52.571 125.143 77.143 76 60.571 152.571 121.143 229.143 181.143 37.143 29.143 84 92.571 84 141.143zM1024 713.143v-621.714c0-50.286-41.143-91.429-91.429-91.429h-841.143c-50.286 0-91.429 41.143-91.429 91.429v621.714c0 50.286 41.143 91.429 91.429 91.429h841.143c50.286 0 91.429-41.143 91.429-91.429z" />

arduino-ide-extension/src/browser/style/ide-updater-dialog.css

@@ -15,7 +15,7 @@
 }
 
 .ide-updater-dialog--logo-container {
-  margin-right: 28px;
+  margin-right: var(--arduino-button-height);
 }
 
 .ide-updater-dialog--logo {
@@ -76,7 +76,7 @@
 .ide-updater-dialog .buttons-container {
   display: flex;
   justify-content: flex-end;
-  margin-top: 28px;
+  margin-top: var(--arduino-button-height);
 }
 
 .ide-updater-dialog .buttons-container a.theia-button {

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

@@ -20,14 +20,20 @@
 @import './progress-bar.css';
 @import './settings-step-input.css';
 
+:root {
+  --arduino-button-height: 28px;
+}
+
 /* Revive of the `--theia-icon-loading`. The variable has been removed from Theia while IDE2 still uses is. */
 /* The SVG icons are still part of Theia (1.31.1) */
 /* https://github.com/arduino/arduino-ide/pull/1662#issuecomment-1324997134 */
 body {
   --theia-icon-loading: url(../icons/loading-light.svg);
+  --theia-icon-loading-warning: url(../icons/loading-dark.svg);
 }
 body.theia-dark {
   --theia-icon-loading: url(../icons/loading-dark.svg);
+  --theia-icon-loading-warning: url(../icons/loading-light.svg);
 }
 
 .theia-input.warning:focus {
@@ -44,29 +50,39 @@ 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.warning::-ms-input-placeholder {
-  /* Microsoft Edge */
-  color: var(--theia-warningForeground);
-  background-color: var(--theia-warningBackground);
+.hc-black.hc-theia.theia-hc .theia-input.warning,
+.hc-black.hc-theia.theia-hc .theia-input.warning::placeholder {
+  color: var(--theia-warningBackground);
+  background-color: var(--theia-warningForeground);
+}
+
+.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.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 */
 .p-DockPanel-widget {
-  min-width: 200px;
+  min-width: 220px;
   min-height: 20px;
-  height: 200px;
+  height: 220px;
 }
 
 /* Overrule the default Theia CSS button styles. */
@@ -74,9 +90,9 @@ button.theia-button,
 .theia-button {
   align-items: center;
   display: flex;
-  font-family: 'Open Sans',sans-serif;
+  font-family: 'Open Sans Bold',sans-serif;
   font-style: normal;
-  font-weight: 700;  
+  font-weight: 700;
   font-size: 14px;
   justify-content: center;
   cursor: pointer;
@@ -95,7 +111,7 @@ button.theia-button,
 }
 
 button.theia-button {
-  height: 28px;
+  height: var(--arduino-button-height);
   max-width: none;
 }
 
@@ -154,10 +170,6 @@ button.theia-button.message-box-dialog-button {
   font-size: 14px;
 }
 
-.uppercase {
-  text-transform: uppercase;
-}
-
 /* High Contrast Theme rules */
 /* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
 .hc-black.hc-theia.theia-hc button.theia-button:hover, 

arduino-ide-extension/src/browser/style/list-widget.css

@@ -44,102 +44,152 @@
     height: 100%; /* This has top be 100% down to the `scrollContainer`. */
 }
 
-.filterable-list-container .items-container > div > div:nth-child(odd) {
-    background-color: var(--theia-sideBar-background);
-    filter: contrast(105%);
-}
-
-.filterable-list-container .items-container > div > div:nth-child(even) {
-    background-color: var(--theia-sideBar-background);
-    filter: contrast(95%);
-}
-
-.filterable-list-container .items-container > div > div:hover {
-    background-color: var(--theia-sideBar-background);
-    filter: contrast(90%);
-}
-
 .component-list-item {
-    padding: 10px 10px 10px 15px;
-    font-size: var(--theia-ui-font-size1);
-}
-
-.component-list-item:hover {
-    cursor: pointer;
+    padding: 20px 15px 25px;
 }
 
 .component-list-item .header {
     padding-bottom: 2px;
-    display: flex;
-    flex-direction: column;
+    min-height: var(--theia-statusBar-height);
 }
 
-.component-list-item .header .version-info {
+.component-list-item .header > div {
+    display: flex;
+}
+
+.component-list-item .header > div .p-TabBar-toolbar {
+    align-self: start;
+    padding: unset;
+    margin-right: unset;
+}
+
+.component-list-item:hover .header > div .p-TabBar-toolbar > div {
+    visibility: visible;
+}
+
+.component-list-item .header > div .p-TabBar-toolbar > div {
+    visibility: hidden;
+}
+
+.component-list-item .header .title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 1 auto;
+}
+
+.component-list-item .header .title .name {
+    font-family: 'Open Sans Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+}
+
+.component-list-item .header .version {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.component-list-item .header .name {
-    font-weight: bold;
-}
-
 .component-list-item .header .author {
-    font-weight: bold;
     color: var(--theia-panelTitle-inactiveForeground);
 }
 
-.component-list-item:hover .header .author {
-    color: var(--theia-foreground);
-}
-
 .component-list-item .header .version {
     color: var(--theia-panelTitle-inactiveForeground);
+    padding-top: 4px;
 }
 
 .component-list-item .footer .theia-button.install {
     height: auto; /* resets the default Theia button height in the filterable list widget */
 }
 
-.component-list-item .header .installed:before {
-    margin-left: 4px;
+.component-list-item .header .installed-version:before {
+    min-width: 79px;
     display: inline-block;
     justify-self: end;
-    background-color: var(--theia-button-background);
+    text-align: center;
+    background-color: var(--theia-arduino-toolbar-dropdown-option-backgroundHover);
     padding: 2px 4px 2px 4px;
-    font-size: 10px;
-    font-weight: bold;
+    font-size: 12px;
     max-height: calc(1em + 4px);
-    color: var(--theia-button-foreground);
-    content: attr(install);
-}
-
-.component-list-item .header .installed:hover:before {
-    background-color: var(--theia-button-foreground);
     color: var(--theia-button-background);
-    content: attr(uninstall);
+    content: attr(version);
+    cursor: pointer;
+    border-radius: 4px;
 }
 
-.component-list-item[min-width~="170px"] .footer {
-    padding: 5px 5px 0px 0px;
-    min-height: 35px;
+.component-list-item .header .installed-version:hover:before {
+    content: attr(remove);
+    text-transform: uppercase;
+}
+
+.component-list-item .content {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: column;
+    padding-top: 4px;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+}
+
+.component-list-item .content > p {
+    margin-block-start: unset;
+    margin-block-end: unset;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.component-list-item .content > .info {
+    white-space: nowrap;
 }
 
 .component-list-item .footer {
     flex-direction: column-reverse;
+    padding-top: 8px;
 }
 
 .component-list-item .footer > * {
     display: inline-block;
-    margin: 5px 0px 0px 10px;
+}
+
+.filterable-list-container .separator {
+    display: flex;
+    flex-direction: row;
+}
+
+.filterable-list-container .separator :last-child,
+.filterable-list-container .separator :first-child {
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+}
+
+div.filterable-list-container > div > div > div > div:nth-child(1) > div.separator :first-child,
+div.filterable-list-container > div > div > div > div:nth-child(1) > div.separator :last-child {
+    display: none;
+}
+
+.filterable-list-container .separator .line {
+    max-height: 1px;
+    height: 1px;
+    background-color: var(--theia-activityBar-inactiveForeground);
+    flex: 1 1 auto;
 }
 
 .component-list-item:hover .footer > label {
     display: inline-block;
     align-self: center;
-    margin: 5px 0px 0px 10px;
 }
 
 .component-list-item .info a {
@@ -151,13 +201,33 @@
     text-decoration: underline;
 }
 
-/* High Contrast Theme rules */
-/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
-.hc-black.hc-theia.theia-hc .component-list-item .header .installed:hover:before {
-    background-color: transparent;
-    outline: 1px dashed var(--theia-focusBorder);    
+.component-list-item .theia-button.secondary.no-border {
+    border: 2px solid var(--theia-button-foreground)
 }
 
-.hc-black.hc-theia.theia-hc .component-list-item .header .installed:before {
+.component-list-item .theia-button.secondary.no-border:hover {
+    border: 2px solid var(--theia-secondaryButton-foreground)
+}
+
+.component-list-item .theia-button {
+    margin-left: 12px;
+}
+
+.component-list-item .theia-select {
+    height: var(--arduino-button-height);
+    min-height: var(--arduino-button-height);
+    width: 65px;
+    min-width: 65px;
+}
+
+/* High Contrast Theme rules */
+/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
+.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:hover:before {
+    background-color: transparent;
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:before {
+    color: var(--theia-button-background);
     border: 1px solid var(--theia-button-border);
 }

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

@@ -28,8 +28,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 28px;
-    width: 28px;
+    height: var(--arduino-button-height);
+    width: var(--arduino-button-height);
 }
 
 .p-TabBar-toolbar .item.arduino-tool-item .arduino-upload-sketch--toolbar,
@@ -66,8 +66,8 @@
 }
 
 .arduino-tool-icon {
-    height: 28px;
-    width: 28px;
+    height: var(--arduino-button-height);
+    width: var(--arduino-button-height);
 }
 
 .arduino-verify-sketch--toolbar-icon {
@@ -77,7 +77,7 @@
 
 .arduino-upload-sketch--toolbar-icon {
     -webkit-mask: url(../icons/upload.svg) center no-repeat;
-    background-color: var(--theia-titleBar-activeBackground);   
+    background-color: var(--theia-titleBar-activeBackground);
 }
 
 .toggle-serial-monitor-icon {
@@ -114,6 +114,10 @@
     z-index: 0;
 }
 
+.p-TabBar-toolbar .item > div {
+    text-align: center;
+}
+
 :root {
     --theia-private-menubar-height: 40px; /* set the topbar height */
 }

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

@@ -20,22 +20,47 @@
 
 .serial-monitor .head {
     display: flex;
-    padding: 5px;
+    padding: 0px 5px 5px 0px;
     height: 27px;
+    background-color: var(--theia-activityBar-background);
 }
 
 .serial-monitor .head .send {
     display: flex;
     flex: 1;
-    margin-right: 2px;
 }
 
-.serial-monitor .head .send > input {
+.serial-monitor .head .send > label:before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    background: var(--theia-icon-loading-warning) center center no-repeat;
+    animation: theia-spin 1.25s linear infinite;
+    width: 30px;
+    height: 30px;
+}
+
+.serial-monitor .head .send > label {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-self: baseline;
+}
+
+.serial-monitor .head .send > input,
+.serial-monitor .head .send > label > input {
     line-height: var(--theia-content-line-height);
+    height: 27px;
     width: 100%;
 }
 
-.serial-monitor .head .send > input:focus {
+.serial-monitor .head .send > label > input {
+    padding-left: 30px;
+    box-sizing: border-box;
+}
+
+.serial-monitor .head .send > input:focus,
+.serial-monitor .head .send > label > input:focus {
     border-color: var(--theia-focusBorder);
 }
 

arduino-ide-extension/src/browser/style/sketch-folder-icon.svg

@@ -1,4 +0,0 @@
-<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.5 6.18999C2.415 6.18999 2.33 6.16999 2.25 6.12499C1.17 5.49999 0.5 4.33999 0.5 3.09499C0.5 1.84999 1.17 0.689992 2.25 0.0649925C2.49 -0.0700075 2.795 0.00999246 2.935 0.249992C3.07 0.489992 2.99 0.794992 2.75 0.934992C1.98 1.37499 1.5 2.20499 1.5 3.09499C1.5 3.98499 1.98 4.81499 2.75 5.25499C2.99 5.39499 3.07 5.69999 2.935 5.93999C2.84 6.09999 2.675 6.18999 2.5 6.18999Z" fill="#008184"/>
-<path d="M5.49993 6.18999C5.32493 6.18999 5.15993 6.09999 5.06493 5.93999C4.92493 5.69999 5.00993 5.39499 5.24993 5.25499C6.01993 4.81499 6.49993 3.98499 6.49993 3.09499C6.49993 2.20499 6.01993 1.37499 5.24993 0.934992C5.00993 0.794992 4.92993 0.489992 5.06493 0.249992C5.20493 0.00999246 5.50993 -0.0700075 5.74993 0.0649925C6.82993 0.689992 7.49993 1.84999 7.49993 3.09499C7.49993 4.33999 6.82993 5.49999 5.74993 6.12499C5.66993 6.16999 5.58493 6.18999 5.49993 6.18999Z" fill="#008184"/>
-</svg>