From 7d702fd878600689ebf64d03493df140cc93c0da Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 13 Oct 2026 15:01:00 +0200
Subject: [PATCH 1/4] feat: added new webssh support

---
 eslint-suppressions.json                      |   5 -
 package-lock.json                             |  10 +-
 package.json                                  |   2 +-
 .../controller/units/UnitsTable.vue           |  11 +-
 src/i18n/en.json                              |   7 +-
 src/lib/config.ts                             |  27 +--
 src/views/controller/UnitManagerView.vue      |  16 --
 src/views/controller/UnitTerminalView.vue     | 182 +++++++++++-------
 vite.config.ts                                |  64 ++++--
 vitest.config.ts                              |  20 +-
 10 files changed, 194 insertions(+), 150 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index bb95dbe29..846c4495e 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -779,11 +779,6 @@
       "count": 2
     }
   },
-  "src/views/controller/UnitTerminalView.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
   "src/views/standalone/firewall/PortForward.vue": {
     "@typescript-eslint/no-explicit-any": {
       "count": 4
diff --git a/package-lock.json b/package-lock.json
index 802089fc5..1008e0885 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
         "@vueuse/core": "^14.0.0",
         "@vueuse/integrations": "^14.0.0",
         "@vueuse/router": "^14.2.1",
-        "@xterm/addon-attach": "^0.11.0",
+        "@xterm/addon-fit": "^0.10.0",
         "@xterm/xterm": "^5.4.0",
         "axios": "^1.11.0",
         "chart.js": "^4.4.0",
@@ -4663,10 +4663,10 @@
         "vue": "^3.5.0"
       }
     },
-    "node_modules/@xterm/addon-attach": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-attach/-/addon-attach-0.11.0.tgz",
-      "integrity": "sha512-JboCN0QAY6ZLY/SSB/Zl2cQ5zW1Eh4X3fH7BnuR1NB7xGRhzbqU2Npmpiw/3zFlxDaU88vtKzok44JKi2L2V2Q==",
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
       "license": "MIT",
       "peerDependencies": {
         "@xterm/xterm": "^5.0.0"
diff --git a/package.json b/package.json
index 82fd80ed1..7f2161b09 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@vueuse/core": "^14.0.0",
     "@vueuse/integrations": "^14.0.0",
     "@vueuse/router": "^14.2.1",
-    "@xterm/addon-attach": "^0.11.0",
+    "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.4.0",
     "axios": "^1.11.0",
     "chart.js": "^4.4.0",
diff --git a/src/components/controller/units/UnitsTable.vue b/src/components/controller/units/UnitsTable.vue
index b808b05be..4954a392d 100644
--- a/src/components/controller/units/UnitsTable.vue
+++ b/src/components/controller/units/UnitsTable.vue
@@ -67,7 +67,6 @@ library.add(faCalendarXmark)
 
 const emit = defineEmits<{
   reloadData: []
-  openSshModal: [unit: Unit]
   scheduleUpdate: [unit: Unit]
   abortUpdate: [unit: Unit]
   upgradeUnitPackages: [unit: Unit]
@@ -151,6 +150,14 @@ async function openUnit(unit: Unit, versionCheck = true) {
   }
 }
 
+function openTerminal(unit: Unit) {
+  const routeData = router.resolve({
+    name: 'ControllerUnitTerminal',
+    query: { unitId: unit.id, unitName: unit.info?.unit_name || unit.id }
+  })
+  window.open(routeData.href, '_blank')
+}
+
 function getKebabMenuItems(unit: Unit) {
   const menuItems: Array<NeDropdownItem> = []
   if (unit.registered) {
@@ -172,7 +179,7 @@ function getKebabMenuItems(unit: Unit) {
         id: 'openSsh',
         label: t('controller.units.open_ssh_terminal'),
         icon: faTerminal,
-        action: () => emit('openSshModal', unit),
+        action: () => openTerminal(unit),
         disabled: !unit.connected
       }
     )
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4dd00c8ab..a26331c42 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -3242,7 +3242,12 @@
       "connection_status_closed": "Closed",
       "connection_closed": "Connection closed",
       "connection_closed_description": "Connection to the unit terminal was closed. Please close this window and connect again, if needed.",
-      "exit_terminal_description": "To exit the unit terminal, simply close this window."
+      "exit_terminal_description": "To exit the unit terminal, simply close this window.",
+      "connect": "Connect",
+      "wrong_passphrase": "Wrong passphrase",
+      "cannot_open_terminal": "Cannot open terminal",
+      "connection_failed": "Connection to the unit terminal failed.",
+      "ssh_key_hint": "Generate an SSH key pair in Account settings and send the public key to the unit."
     },
     "account_settings": {
       "title": "Account settings",
diff --git a/src/lib/config.ts b/src/lib/config.ts
index f93277303..b6fe27a63 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -31,21 +31,19 @@ export const getStandaloneApiEndpoint = () => {
 }
 
 /**
- * API endpoint of the controller itself
+ * API endpoint of the controller itself, proxied by the dev server in development
  */
 export const getControllerApiEndpoint = () => {
-  if (import.meta.env.DEV) {
-    // controller development environment
-
-    const apiScheme = import.meta.env.VITE_API_SCHEME
-    const controllerApiHost = import.meta.env.VITE_CONTROLLER_API_HOST
-    return `${apiScheme}://${controllerApiHost}/api`
-  }
-
-  // controller production environment
   return `${window.location.origin}/api`
 }
 
+/**
+ * Websocket URL of the SSH terminal of a unit
+ */
+export const getControllerUnitTerminalUrl = (unitId: string) => {
+  return `${getControllerApiEndpoint().replace(/^http/, 'ws')}/units/${unitId}/terminal`
+}
+
 /**
  * API endpoint of a specific unit, through the controller's proxy
  */
@@ -53,15 +51,6 @@ export const getUnitManagementApiEndpoint = (unitId?: string) => {
   const unitsStore = useUnitsStore()
   // in case of "Open unit" unitsStore.unitId is used
   const currentUnitId = unitId || unitsStore.unitId
-
-  if (import.meta.env.DEV) {
-    // controller development environment
-
-    const apiScheme = import.meta.env.VITE_API_SCHEME
-    const controllerApiHost = import.meta.env.VITE_CONTROLLER_API_HOST
-    return `${apiScheme}://${controllerApiHost}/${currentUnitId}/api`
-  }
-
   return `${window.location.origin}/${currentUnitId}/api`
 }
 
diff --git a/src/views/controller/UnitManagerView.vue b/src/views/controller/UnitManagerView.vue
index 5b059494c..a252b7aed 100644
--- a/src/views/controller/UnitManagerView.vue
+++ b/src/views/controller/UnitManagerView.vue
@@ -21,7 +21,6 @@ import {
 import { useI18n } from 'vue-i18n'
 import UnitsTable from '@/components/controller/units/UnitsTable.vue'
 import AddUnitModal from '@/components/controller/units/AddUnitModal.vue'
-import OpenSshModal from '@/components/controller/units/OpenSshModal.vue'
 import SendOrRevokeSshKeyDrawer from '@/components/controller/units/SendOrRevokeSshKeyDrawer.vue'
 import { useDefaultsStore } from '@/stores/controller/defaults'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -44,9 +43,7 @@ const textFilter = ref('')
 const isShownAddUnitModal = ref(false)
 const getUnitsIntervalId = ref(0)
 const isUnitsSkeletonEnabled = ref(true)
-const isShownOpenSshModal = ref(false)
 const isShownSendOrRevokeSshKeyDrawer = ref(false)
-const currentUnit = ref<Unit>()
 const sendOrRevokeAction = ref<SendOrRevokeAction>('send')
 const unitToUpdate = ref<Unit>()
 const unitToAbortUpdate = ref<Unit>()
@@ -125,11 +122,6 @@ async function loadData() {
   isUnitsSkeletonEnabled.value = false
 }
 
-function showOpenSshModal(unit: Unit) {
-  currentUnit.value = unit
-  isShownOpenSshModal.value = true
-}
-
 function showSendSshKeyDrawer() {
   sendOrRevokeAction.value = 'send'
   isShownSendOrRevokeSshKeyDrawer.value = true
@@ -317,7 +309,6 @@ function getBulkActionsKebabMenuItems() {
           v-else
           :filtered-units="filteredUnits"
           @reload-data="loadData"
-          @open-ssh-modal="showOpenSshModal"
           @schedule-update="unitToUpdate = $event"
           @abort-update="unitToAbortUpdate = $event"
           @upgrade-unit-packages="unitToUpgradePackages = $event"
@@ -332,13 +323,6 @@ function getBulkActionsKebabMenuItems() {
       @reload-data="loadData"
     />
 
-    <!-- open ssh modal -->
-    <OpenSshModal
-      :visible="isShownOpenSshModal"
-      :unit="currentUnit"
-      @close="isShownOpenSshModal = false"
-    />
-
     <!-- send/revoke ssh key drawer -->
     <SendOrRevokeSshKeyDrawer
       :is-shown="isShownSendOrRevokeSshKeyDrawer"
diff --git a/src/views/controller/UnitTerminalView.vue b/src/views/controller/UnitTerminalView.vue
index c0945e336..589b13290 100644
--- a/src/views/controller/UnitTerminalView.vue
+++ b/src/views/controller/UnitTerminalView.vue
@@ -4,99 +4,111 @@
 -->
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
+import { useResizeObserver } from '@vueuse/core'
 import { Terminal } from '@xterm/xterm'
-import { AttachAddon } from '@xterm/addon-attach'
+import { FitAddon } from '@xterm/addon-fit'
 import { useI18n } from 'vue-i18n'
 import {
   NeBadge,
+  NeButton,
   NeInlineNotification,
-  NeSkeleton,
   NeHeading,
-  getAxiosErrorMessage
+  NeTextInput,
+  NeTooltip
 } from '@nethesis/vue-components'
 import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { useDefaultsStore } from '@/stores/controller/defaults'
+import { getControllerUnitTerminalUrl } from '@/lib/config'
 
 type ConnectionStatus = 'pending' | 'active' | 'error' | 'closed'
 
 const { t } = useI18n()
 const route = useRoute()
-const defaultsStore = useDefaultsStore()
-const term = ref<Terminal>()
-const webSocket = ref<WebSocket>()
-
-const unitName = ref('')
-const websocketId = ref('')
+const terminalContainer = useTemplateRef<HTMLElement>('terminalContainer')
+const term = new Terminal()
+const fitAddon = new FitAddon()
+const encoder = new TextEncoder()
+let webSocket: WebSocket | undefined
+
+const unitId = route.query.unitId as string
+const unitName = route.query.unitName as string
 const connectionStatus = ref<ConnectionStatus>('pending')
+const askPassphrase = ref(false)
+const passphrase = ref('')
+const passphraseError = ref('')
+const closeReason = ref('')
+
+term.loadAddon(fitAddon)
 
-const loading = ref({
-  getDefaults: false
+term.onData((data) => {
+  if (webSocket?.readyState === WebSocket.OPEN) {
+    webSocket.send(encoder.encode(data))
+  }
 })
 
-const error = ref({
-  getDefaults: ''
+term.onResize(({ cols, rows }) => {
+  if (webSocket?.readyState === WebSocket.OPEN) {
+    webSocket.send(JSON.stringify({ type: 'resize', cols, rows }))
+  }
 })
 
+useResizeObserver(terminalContainer, () => fitAddon.fit())
+
 onMounted(() => {
-  unitName.value = route.query.unitName as string
-  websocketId.value = route.query.websocketId as string
-  getDefaults()
+  term.open(terminalContainer.value!)
+  fitAddon.fit()
+  connect()
 })
 
-async function getDefaults() {
-  loading.value.getDefaults = true
+onUnmounted(() => {
+  webSocket?.close()
+  term.dispose()
+})
 
-  try {
-    await defaultsStore.getDefaults()
-    connectWebSocket()
-  } catch (err: any) {
-    error.value.getDefaults = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getDefaults = false
-  }
-}
+function connect() {
+  connectionStatus.value = 'pending'
+  askPassphrase.value = false
+  closeReason.value = ''
 
-function connectWebSocket() {
-  webSocket.value = new WebSocket(
-    `wss://${defaultsStore.fqdn}${defaultsStore.websshPath}ws?id=${websocketId.value}`
-  )
+  const ws = new WebSocket(getControllerUnitTerminalUrl(unitId))
+  ws.binaryType = 'arraybuffer'
+  webSocket = ws
 
-  webSocket.value.onopen = () => {
-    initTerminal()
+  ws.onopen = () => {
+    // first frame carries the key passphrase and the initial terminal size
+    ws.send(JSON.stringify({ passphrase: passphrase.value, cols: term.cols, rows: term.rows }))
     connectionStatus.value = 'active'
+    term.focus()
   }
 
-  webSocket.value.onerror = (error) => {
-    console.log('WebSocket error:', error)
-    connectionStatus.value = 'error'
+  ws.onmessage = (event) => {
+    term.write(new Uint8Array(event.data))
   }
 
-  webSocket.value.onclose = (event) => {
-    console.log('WebSocket connection closed:', event.code, event)
-    connectionStatus.value = 'closed'
-  }
-}
-
-function initTerminal() {
-  term.value = new Terminal()
-
-  const terminalContainer = document.getElementById('terminal-container') as HTMLElement
+  ws.onclose = (event) => {
+    if (event.code === 1000) {
+      connectionStatus.value = 'closed'
+      return
+    }
+    connectionStatus.value = 'error'
 
-  if (!webSocket.value) {
-    return
+    if (event.reason.endsWith('key passphrase required')) {
+      askPassphrase.value = true
+      passphraseError.value = ''
+    } else if (event.reason.endsWith('wrong key passphrase')) {
+      askPassphrase.value = true
+      passphraseError.value = t('controller.unit_terminal.wrong_passphrase')
+    } else {
+      closeReason.value = event.reason || t('controller.unit_terminal.connection_failed')
+    }
   }
+}
 
-  const attachAddon = new AttachAddon(webSocket.value)
-  term.value.loadAddon(attachAddon)
-  term.value.open(terminalContainer)
-
-  term.value.onData((key) => {
-    if (webSocket.value) {
-      webSocket.value.send(JSON.stringify({ data: key }))
-    }
-  })
+function isSshKeyError() {
+  return (
+    closeReason.value.includes('no ssh key for user') || closeReason.value.includes('ssh handshake')
+  )
 }
 
 function getBadgeKind() {
@@ -127,8 +139,7 @@ function getBadgeIcon() {
     <NeHeading tag="h3" class="mb-7">{{
       t('controller.unit_terminal.name_unit_terminal', { name: unitName })
     }}</NeHeading>
-    <!-- 50 rem is an appropriate width for the default number or colums of xterm.js terminal -->
-    <div class="flex max-w-200 flex-col gap-6">
+    <div class="flex flex-col gap-6">
       <div class="flex items-center gap-4">
         <span>{{ t('controller.unit_terminal.connection') }}</span>
         <NeBadge
@@ -137,25 +148,54 @@ function getBadgeIcon() {
           :icon="getBadgeIcon()"
         />
       </div>
-      <NeSkeleton v-if="loading.getDefaults" :lines="2" size="lg" />
-      <div v-else>
+      <div>
         {{ t('controller.unit_terminal.exit_terminal_description') }}
       </div>
-      <!-- getDefaults error notification -->
+      <!-- passphrase prompt -->
+      <form v-if="askPassphrase" class="flex max-w-md items-end gap-4" @submit.prevent="connect">
+        <NeTextInput
+          v-model="passphrase"
+          :label="t('controller.units.passphrase')"
+          :invalid-message="passphraseError"
+          is-password
+          :show-password-label="t('ne_text_input.show_password')"
+          :hide-password-label="t('ne_text_input.hide_password')"
+          class="grow"
+        >
+          <template #tooltip>
+            <NeTooltip>
+              <template #content>
+                {{ t('controller.units.passphrase_tooltip') }}
+              </template>
+            </NeTooltip>
+          </template>
+        </NeTextInput>
+        <NeButton type="submit" kind="primary">
+          {{ t('controller.unit_terminal.connect') }}
+        </NeButton>
+      </form>
+      <!-- connection error notification -->
       <NeInlineNotification
-        v-if="error.getDefaults"
+        v-if="closeReason"
         kind="error"
-        :title="t('error.cannot_retrieve_defaults')"
-        :description="error.getDefaults"
-      />
-      <!-- connection error/closed notification -->
+        :title="t('controller.unit_terminal.cannot_open_terminal')"
+        :description="isSshKeyError() ? t('controller.unit_terminal.ssh_key_hint') : closeReason"
+      >
+        <template v-if="isSshKeyError()" #details>
+          {{ closeReason }}
+        </template>
+      </NeInlineNotification>
+      <!-- shell exited notification -->
       <NeInlineNotification
-        v-if="['error', 'closed'].includes(connectionStatus)"
+        v-if="connectionStatus === 'closed'"
         kind="warning"
         :title="t('controller.unit_terminal.connection_closed')"
         :description="t('controller.unit_terminal.connection_closed_description')"
       />
-      <div id="terminal-container" class="min-h-56 rounded-md bg-black p-4"></div>
+      <!-- padding on a wrapper, fit addon sizes the terminal from its parent's full box -->
+      <div class="rounded-md bg-black p-4">
+        <div ref="terminalContainer" class="h-[70vh]"></div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/vite.config.ts b/vite.config.ts
index 2824d4c3e..0406a1aa0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,33 +1,55 @@
 import { fileURLToPath, URL } from 'node:url'
 import path from 'node:path'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv, type ProxyOptions } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import tailwindcss from '@tailwindcss/vite'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  base: './',
-  plugins: [
-    vue(),
-    vueDevTools(),
-    tailwindcss(),
-    VueI18nPlugin({
-      include: [path.resolve(import.meta.dirname, './src/i18n/**')]
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  const controllerProxy: ProxyOptions = {
+    target: `${env.VITE_API_SCHEME}://${env.VITE_CONTROLLER_API_HOST}`,
+    changeOrigin: true,
+    // controllers often run with a self-signed certificate
+    secure: false,
+    ws: true,
+    rewriteWsOrigin: true
+  }
+
+  return {
+    base: './',
+    server:
+      env.VITE_UI_MODE === 'controller'
+        ? {
+            proxy: {
+              '/api': controllerProxy,
+              // units served through the controller, /<unit-uuid>/
+              '^/[0-9a-f-]{36}/': controllerProxy
+            }
+          }
+        : undefined,
+    plugins: [
+      vue(),
+      vueDevTools(),
+      tailwindcss(),
+      VueI18nPlugin({
+        include: [path.resolve(import.meta.dirname, './src/i18n/**')]
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    define: {
+      UI_VERSION: JSON.stringify(process.env.npm_package_version),
+      REQUIRED_API_VERSION: JSON.stringify(process.env.npm_package_config_requiredApiVersion),
+      MIN_UI_VERSION_FOR_DIRECT_SERVE: JSON.stringify(
+        process.env.npm_package_config_minUiVersionForDirectServe
+      )
     }
-  },
-  define: {
-    UI_VERSION: JSON.stringify(process.env.npm_package_version),
-    REQUIRED_API_VERSION: JSON.stringify(process.env.npm_package_config_requiredApiVersion),
-    MIN_UI_VERSION_FOR_DIRECT_SERVE: JSON.stringify(
-      process.env.npm_package_config_minUiVersionForDirectServe
-    )
   }
 })
diff --git a/vitest.config.ts b/vitest.config.ts
index 4b1c89799..af0986a63 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -2,13 +2,15 @@ import { fileURLToPath } from 'node:url'
 import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
 import viteConfig from './vite.config'
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: 'jsdom',
-      exclude: [...configDefaults.exclude, 'e2e/**'],
-      root: fileURLToPath(new URL('./', import.meta.url))
-    }
-  })
+export default defineConfig((configEnv) =>
+  mergeConfig(
+    viteConfig(configEnv),
+    defineConfig({
+      test: {
+        environment: 'jsdom',
+        exclude: [...configDefaults.exclude, 'e2e/**'],
+        root: fileURLToPath(new URL('./', import.meta.url))
+      }
+    })
+  )
 )

From 010a63b526926a5ab6bfb90a0c7d9db9dfbffa5a Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 13 Oct 2026 15:07:36 +0200
Subject: [PATCH 2/4] refactor(controller): remove webssh

---
 eslint-suppressions.json                      |   5 -
 .../controller/units/OpenSshModal.vue         | 397 ------------------
 src/i18n/en.json                              |  11 -
 src/lib/controller/webssh.ts                  |  65 ---
 src/stores/controller/defaults.ts             |   6 -
 5 files changed, 484 deletions(-)
 delete mode 100644 src/components/controller/units/OpenSshModal.vue
 delete mode 100644 src/lib/controller/webssh.ts

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 846c4495e..5df40a07c 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -89,11 +89,6 @@
       "count": 1
     }
   },
-  "src/components/controller/units/OpenSshModal.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 3
-    }
-  },
   "src/components/controller/units/RemoveUnitModal.vue": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
diff --git a/src/components/controller/units/OpenSshModal.vue b/src/components/controller/units/OpenSshModal.vue
deleted file mode 100644
index af5b712fa..000000000
--- a/src/components/controller/units/OpenSshModal.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<!--
-  Copyright (C) 2024 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import type { Unit } from '@/stores/controller/units'
-import { NeModal } from '@nethesis/vue-components'
-import { ref, watch, type PropType, computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { getXsrfToken, getWebsocketId, type SshConnectionPayload } from '@/lib/controller/webssh'
-import {
-  NeInlineNotification,
-  NeSkeleton,
-  NeTooltip,
-  NeTextInput,
-  focusElement,
-  getAxiosErrorMessage,
-  getPreference,
-  savePreference
-} from '@nethesis/vue-components'
-import router from '@/router'
-import { useLoginStore } from '@/stores/controller/controllerLogin'
-import { ubusCallFromController } from '@/lib/standalone/ubus'
-import { useAccountsStore } from '@/stores/controller/accounts'
-import type { SshKey } from '@/lib/standalone/sshKey'
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    required: true
-  },
-  unit: {
-    type: Object as PropType<Unit>,
-    default: null
-  }
-})
-
-const emit = defineEmits(['close'])
-
-const { t } = useI18n()
-const loginStore = useLoginStore()
-const accountsStore = useAccountsStore()
-const xsrfToken = ref('')
-const unitUsername = ref('root')
-const unitPassword = ref('')
-const websocketId = ref('')
-const hideOpenSshPopupsTooltip = ref(false)
-const unitUsernameRef = ref()
-const unitPasswordRef = ref()
-const usePassphrase = ref(false)
-const passphrase = ref('')
-const passphraseRef = ref()
-
-const loading = ref({
-  getXsrfToken: false,
-  getWebsocketId: false,
-  sshKeys: false
-})
-
-const error = ref({
-  unitUsername: '',
-  unitPassword: '',
-  passphrase: '',
-  getXsrfToken: '',
-  getXsrfTokenDetails: '',
-  getWebsocketId: '',
-  getWebsocketIdDetails: '',
-  authError: '',
-  getUnitSshKeys: '',
-  getUnitSshKeysDetails: ''
-})
-
-const isLoading = computed(() => {
-  return loading.value.getXsrfToken || loading.value.sshKeys
-})
-
-watch(
-  () => props.visible,
-  () => {
-    if (props.visible) {
-      clearErrors()
-      unitUsername.value = 'root'
-      unitPassword.value = ''
-      passphrase.value = ''
-      retrieveXsrfToken()
-      loadAccountAndUnitSshKeys()
-    }
-  }
-)
-
-watch(
-  () => isLoading.value,
-  () => {
-    if (!isLoading.value) {
-      if (usePassphrase.value) {
-        focusElement(passphraseRef)
-      } else {
-        focusElement(unitPasswordRef)
-      }
-    }
-  }
-)
-
-onMounted(() => {
-  hideOpenSshPopupsTooltip.value = getPreference('hideOpenSshPopupsTooltip', loginStore.username)
-})
-
-async function loadAccountAndUnitSshKeys() {
-  loading.value.sshKeys = true
-
-  try {
-    await accountsStore.loadSshKeys()
-    const pubKey = accountsStore.sshKeys.key_pub
-
-    if (!pubKey) {
-      usePassphrase.value = false
-      loading.value.sshKeys = false
-      return
-    }
-
-    try {
-      const res = await ubusCallFromController('ns.ssh', 'list-keys', {}, props.unit.id)
-      const keys: SshKey[] = res.data.keys
-      const tokens = pubKey.split(' ')
-      const pubKeyType = tokens[0]
-      const pubKeyKey = tokens[1]!
-      const pubKeyComment = tokens.slice(2).join(' ')
-
-      const pubKeyFound = keys.find(
-        (key) =>
-          key.key.trim() === pubKeyKey.trim() &&
-          key.type === pubKeyType &&
-          key.comment === pubKeyComment
-      )
-
-      if (pubKeyFound) {
-        usePassphrase.value = true
-      } else {
-        usePassphrase.value = false
-      }
-    } catch (err: any) {
-      error.value.getUnitSshKeys = t(getAxiosErrorMessage(err))
-      error.value.getUnitSshKeysDetails = err.toString()
-    }
-  } finally {
-    loading.value.sshKeys = false
-  }
-}
-
-function dontShowAgainHideOpenSshPopupsTooltip() {
-  hideOpenSshPopupsTooltip.value = true
-  savePreference('hideOpenSshPopupsTooltip', true, loginStore.username)
-}
-
-function clearErrors() {
-  for (const key of Object.keys(error.value)) {
-    error.value[key as keyof typeof error.value] = ''
-  }
-}
-
-async function retrieveXsrfToken() {
-  loading.value.getXsrfToken = true
-
-  try {
-    xsrfToken.value = await getXsrfToken()
-  } catch (err: any) {
-    error.value.getXsrfToken = t(getAxiosErrorMessage(err))
-    error.value.getXsrfTokenDetails = err.toString()
-  } finally {
-    loading.value.getXsrfToken = false
-  }
-}
-
-function validateCredentials() {
-  clearErrors()
-  let isValidationOk = true
-
-  // username
-  {
-    if (!unitUsername.value) {
-      error.value.unitUsername = t('error.required')
-      if (isValidationOk) {
-        isValidationOk = false
-        focusElement(unitUsernameRef)
-      }
-    }
-  }
-
-  if (usePassphrase.value) {
-    // passphrase
-    {
-      if (!passphrase.value) {
-        error.value.passphrase = t('error.required')
-        if (isValidationOk) {
-          isValidationOk = false
-          focusElement(passphraseRef)
-        }
-      }
-    }
-  } else {
-    // password
-    {
-      if (!unitPassword.value) {
-        error.value.unitPassword = t('error.required')
-        if (isValidationOk) {
-          isValidationOk = false
-          focusElement(unitPasswordRef)
-        }
-      }
-    }
-  }
-  return isValidationOk
-}
-
-async function retrieveWebsocketId() {
-  const isValidationOk = validateCredentials()
-
-  if (!isValidationOk) {
-    return
-  }
-
-  const sshPayload: SshConnectionPayload = {
-    hostname: props.unit.ipaddress,
-    port: props.unit.info.ssh_port,
-    username: unitUsername.value,
-    password: usePassphrase.value ? '' : unitPassword.value,
-    passphrase: usePassphrase.value ? passphrase.value : '',
-    privatekey: usePassphrase.value ? accountsStore.sshKeys.key : '',
-    totp: '',
-    term: 'xterm-256color',
-    _xsrf: xsrfToken.value
-  }
-  loading.value.getWebsocketId = true
-  websocketId.value = ''
-
-  try {
-    websocketId.value = await getWebsocketId(sshPayload)
-  } catch (err: any) {
-    if (err.response?.status === 401) {
-      error.value.authError = usePassphrase.value
-        ? t('controller.units.auth_error_passphrase')
-        : t('controller.units.auth_error_credentials')
-
-      if (usePassphrase.value) {
-        focusElement(passphraseRef)
-      } else {
-        focusElement(unitPasswordRef)
-      }
-    } else {
-      error.value.getWebsocketId = t(getAxiosErrorMessage(err))
-      error.value.getWebsocketIdDetails = err.toString()
-    }
-  } finally {
-    loading.value.getWebsocketId = false
-  }
-
-  if (websocketId.value) {
-    const unitName = props.unit?.info?.unit_name || props.unit?.id
-    const routeData = router.resolve({
-      path: '/controller/unit-terminal',
-      query: { websocketId: websocketId.value, unitName: unitName }
-    })
-    window.open(routeData.href, '_blank')
-    emit('close')
-  }
-}
-</script>
-
-<template>
-  <NeModal
-    :visible="visible"
-    :title="t('controller.units.open_ssh_terminal')"
-    kind="info"
-    :primary-label="t('controller.units.open_terminal')"
-    :cancel-label="t('common.cancel')"
-    primary-button-kind="primary"
-    :primary-button-loading="loading.getWebsocketId"
-    :primary-button-disabled="isLoading"
-    :close-aria-label="t('common.close')"
-    @close="emit('close')"
-    @primary-click="retrieveWebsocketId"
-  >
-    <div class="space-y-6">
-      <NeInlineNotification
-        v-if="!hideOpenSshPopupsTooltip"
-        kind="info"
-        :title="t('controller.units.popup_permission_title')"
-        :description="t('controller.units.popup_permission_description')"
-        :primary-button-label="t('common.dont_show_again')"
-        :close-aria-label="t('common.close')"
-        @primary-click="dontShowAgainHideOpenSshPopupsTooltip"
-      />
-      <!-- getXsrfToken error notification -->
-      <NeInlineNotification
-        v-if="error.getXsrfToken"
-        kind="error"
-        :title="t('error.cannot_retrieve_xsrf_token')"
-        :description="error.getXsrfToken"
-        :close-aria-label="t('common.close')"
-      >
-        <template v-if="error.getXsrfTokenDetails" #details>
-          {{ error.getXsrfTokenDetails }}
-        </template>
-      </NeInlineNotification>
-      <!-- getWebsocketId error notification -->
-      <NeInlineNotification
-        v-if="error.getWebsocketId"
-        kind="error"
-        :title="t('error.cannot_retrieve_websocket_id')"
-        :description="error.getWebsocketId"
-        :close-aria-label="t('common.close')"
-      >
-        <template v-if="error.getWebsocketIdDetails" #details>
-          {{ error.getWebsocketIdDetails }}
-        </template>
-      </NeInlineNotification>
-      <!-- listSshKeys error notification -->
-      <NeInlineNotification
-        v-if="accountsStore.listSshKeysError.notificationDescription"
-        kind="error"
-        :title="t('error.cannot_retrieve_ssh_keys')"
-        :description="accountsStore.listSshKeysError.notificationDescription"
-        :close-aria-label="t('common.close')"
-      >
-        <template v-if="accountsStore.listSshKeysError.notificationDetails" #details>
-          {{ accountsStore.listSshKeysError.notificationDetails }}
-        </template>
-      </NeInlineNotification>
-      <!-- getUnitSshKeys error notification -->
-      <NeInlineNotification
-        v-if="error.getUnitSshKeys"
-        kind="error"
-        :title="t('error.cannot_retrieve_unit_ssh_keys')"
-        :description="error.getUnitSshKeys"
-        :close-aria-label="t('common.close')"
-      >
-        <template v-if="error.getUnitSshKeysDetails" #details>
-          {{ error.getUnitSshKeysDetails }}
-        </template>
-      </NeInlineNotification>
-      <!-- authentication error (from getWebsocketId) notification -->
-      <NeInlineNotification
-        v-if="error.authError"
-        kind="error"
-        :title="t('controller.units.auth_error')"
-        :description="error.authError"
-        :close-aria-label="t('common.close')"
-      />
-      <!-- skeleton -->
-      <NeSkeleton v-if="isLoading" size="lg" :lines="4" />
-      <template v-else>
-        <!-- unit username -->
-        <NeTextInput
-          ref="unitUsernameRef"
-          v-model.trim="unitUsername"
-          :label="t('controller.units.unit_username')"
-          :invalid-message="t(error.unitUsername)"
-          autocomplete="username"
-        />
-        <template v-if="usePassphrase">
-          <!-- passphrase -->
-          <NeTextInput
-            ref="passphraseRef"
-            v-model.trim="passphrase"
-            :label="t('controller.units.passphrase')"
-            :invalid-message="t(error.passphrase)"
-            is-password
-            :show-password-label="t('ne_text_input.show_password')"
-            :hide-password-label="t('ne_text_input.hide_password')"
-          >
-            <template #tooltip>
-              <NeTooltip>
-                <template #content>
-                  {{ t('controller.units.passphrase_tooltip') }}
-                </template>
-              </NeTooltip>
-            </template>
-          </NeTextInput>
-        </template>
-        <template v-else>
-          <!-- unit password -->
-          <NeTextInput
-            ref="unitPasswordRef"
-            v-model="unitPassword"
-            :label="t('controller.units.unit_password')"
-            is-password
-            :show-password-label="t('ne_text_input.show_password')"
-            :hide-password-label="t('ne_text_input.hide_password')"
-            :invalid-message="t(error.unitPassword)"
-            autocomplete="current-password"
-          />
-        </template>
-      </template>
-    </div>
-  </NeModal>
-</template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a26331c42..972c0e97f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -362,16 +362,13 @@
     "cannot_add_unit": "Cannot add unit",
     "max_units_reached": "Maximum number of units reached",
     "cannot_upload_backup": "Cannot upload backup",
-    "cannot_retrieve_xsrf_token": "Cannot retrieve XSRF token",
     "cannot_retrieve_ssh_keys": "Cannot retrieve account SSH keys",
-    "cannot_retrieve_websocket_id": "Cannot retrieve websocket ID",
     "cannot_retrieve_defaults": "Cannot retrieve defaults",
     "cannot_change_password": "Cannot change password",
     "cannot_delete_ssh_key": "Cannot delete SSH key",
     "cannot_generate_ssh_key_pair": "Cannot generate SSH key pair",
     "cannot_retrieve_unit_ssh_port": "Cannot retrieve unit SSH port",
     "cannot_open_unit": "Cannot open unit",
-    "cannot_retrieve_unit_ssh_keys": "Cannot retrieve unit SSH keys",
     "cannot_remove_unit": "Cannot remove unit",
     "cannot_scan_network": "Cannot scan network",
     "cannot_retrieve_vpn_networks": "Cannot retrieve VPN networks",
@@ -3125,20 +3122,12 @@
       "open_metrics": "Open metrics",
       "open_logs": "Open logs",
       "open_ssh_terminal": "Open SSH terminal",
-      "open_terminal": "Open terminal",
       "remove_unit": "Remove unit",
       "copy_join_code": "Copy join code",
       "add_unit_step_1": "Copy the join code of the unit",
       "add_unit_step_2": "Access {product} UI on the unit you want to add and go to 'System > Controller' page",
       "add_unit_step_3": "Paste Controller join code in the form and click 'Connect the unit'",
       "add_unit_step_4": "The unit will appear in 'Unit manager' page",
-      "unit_username": "Unit username",
-      "unit_password": "Unit password",
-      "popup_permission_title": "Your browser might need the permission to open popups",
-      "popup_permission_description": "To open the SSH terminal, you might need to allow popups for this site.",
-      "auth_error": "Authentication error",
-      "auth_error_credentials": "Incorrect username or password",
-      "auth_error_passphrase": "Incorrect username or passphrase",
       "open_unit_tooltip": "To open a unit, you might need to allow popups for this site.",
       "open_actions_menu": "Open actions menu",
       "actions": "Actions",
diff --git a/src/lib/controller/webssh.ts b/src/lib/controller/webssh.ts
deleted file mode 100644
index f44bd8f3e..000000000
--- a/src/lib/controller/webssh.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-//  Copyright (C) 2024 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import axios from 'axios'
-import { useDefaultsStore } from '@/stores/controller/defaults'
-
-export interface SshConnectionPayload {
-  hostname: string
-  port: number
-  username: string
-  password: string
-  passphrase: string
-  privatekey: string
-  totp: string
-  term: string
-  _xsrf: string
-}
-
-export async function getXsrfToken() {
-  const defaultsStore = useDefaultsStore()
-
-  const res = await axios.get(`https://${defaultsStore.fqdn}${defaultsStore.websshPath}`, {
-    withCredentials: true
-  })
-
-  // retrieve the XSRF token from the response body, it is a hidden input field, e.g.:
-  // <input type="hidden" name="_xsrf" value="2|cb6de44d|..."/>
-  const parser = new DOMParser()
-  const htmlDoc = parser.parseFromString(res.data, 'text/html')
-  const xsrfToken = (htmlDoc.getElementsByName('_xsrf')[0] as HTMLInputElement)?.value
-  return xsrfToken
-}
-
-export async function getWebsocketId(payload: SshConnectionPayload) {
-  const defaultsStore = useDefaultsStore()
-
-  const formData = new FormData()
-  formData.append('hostname', payload.hostname)
-  formData.append('port', payload.port.toString())
-  formData.append('username', payload.username)
-  formData.append('password', payload.password)
-  formData.append('passphrase', payload.passphrase)
-  formData.append('privatekey', payload.privatekey)
-  formData.append('totp', payload.totp)
-  formData.append('term', payload.term)
-  formData.append('_xsrf', payload._xsrf)
-
-  const res = await axios.post(
-    `https://${defaultsStore.fqdn}${defaultsStore.websshPath}`,
-    formData,
-    {
-      headers: {
-        'Content-Type': 'multipart/form-data'
-      },
-      withCredentials: true
-    }
-  )
-
-  // If API call fails returns the reason inside status field
-  if (res.data.status) {
-    // let's manually raise a 401 error
-    throw { response: { status: 401 } }
-  }
-  return res.data.id
-}
diff --git a/src/stores/controller/defaults.ts b/src/stores/controller/defaults.ts
index d3462afa5..6cc4de332 100644
--- a/src/stores/controller/defaults.ts
+++ b/src/stores/controller/defaults.ts
@@ -11,8 +11,6 @@ export const useDefaultsStore = defineStore('defaults', () => {
   const controllerLoginStore = useControllerLoginStore()
   const fqdn = ref('')
   const grafanaPath = ref('')
-  const prometheusPath = ref('')
-  const websshPath = ref('')
   const validSubscription = ref(false)
   const defaultsLoaded = ref(false)
 
@@ -26,8 +24,6 @@ export const useDefaultsStore = defineStore('defaults', () => {
     if (res.data.data) {
       fqdn.value = res.data.data.fqdn
       grafanaPath.value = res.data.data.grafana_path
-      prometheusPath.value = res.data.data.prometheus_path
-      websshPath.value = res.data.data.webssh_path
       validSubscription.value = res.data.data.valid_subscription
       defaultsLoaded.value = true
     }
@@ -36,8 +32,6 @@ export const useDefaultsStore = defineStore('defaults', () => {
   return {
     fqdn,
     grafanaPath,
-    prometheusPath,
-    websshPath,
     validSubscription,
     defaultsLoaded,
     getDefaults

From 70445624079e557d826f31e8678f98dc84843a94 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 13 Oct 2026 15:15:33 +0200
Subject: [PATCH 3/4] fix(deps): update xterm to v6

---
 package-lock.json | 26 +++++++++++++-------------
 package.json      |  4 ++--
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1008e0885..11c2c0c95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,8 +29,8 @@
         "@vueuse/core": "^14.0.0",
         "@vueuse/integrations": "^14.0.0",
         "@vueuse/router": "^14.2.1",
-        "@xterm/addon-fit": "^0.10.0",
-        "@xterm/xterm": "^5.4.0",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/xterm": "^6.0.0",
         "axios": "^1.11.0",
         "chart.js": "^4.4.0",
         "chartjs-adapter-date-fns": "^3.0.0",
@@ -4664,19 +4664,19 @@
       }
     },
     "node_modules/@xterm/addon-fit": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
-      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
+      "license": "MIT"
     },
     "node_modules/@xterm/xterm": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
-      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
+      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
+      "license": "MIT",
+      "workspaces": [
+        "addons/*"
+      ]
     },
     "node_modules/acorn": {
       "version": "8.18.0",
diff --git a/package.json b/package.json
index 7f2161b09..1b6215670 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "@vueuse/core": "^14.0.0",
     "@vueuse/integrations": "^14.0.0",
     "@vueuse/router": "^14.2.1",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/xterm": "^5.4.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
     "axios": "^1.11.0",
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",

From 696d648acb674584bc5e496e7ff59642ea0f782e Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 13 Oct 2026 15:28:40 +0200
Subject: [PATCH 4/4] adjusted interface flickering

---
 .../controller/units/UnitsTable.vue           |   2 +-
 src/i18n/en.json                              |   3 +
 src/views/controller/UnitTerminalView.vue     | 239 ++++++++++++------
 3 files changed, 171 insertions(+), 73 deletions(-)

diff --git a/src/components/controller/units/UnitsTable.vue b/src/components/controller/units/UnitsTable.vue
index 4954a392d..5e56754b1 100644
--- a/src/components/controller/units/UnitsTable.vue
+++ b/src/components/controller/units/UnitsTable.vue
@@ -153,7 +153,7 @@ async function openUnit(unit: Unit, versionCheck = true) {
 function openTerminal(unit: Unit) {
   const routeData = router.resolve({
     name: 'ControllerUnitTerminal',
-    query: { unitId: unit.id, unitName: unit.info?.unit_name || unit.id }
+    query: { unitId: unit.id }
   })
   window.open(routeData.href, '_blank')
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 972c0e97f..df526c7c3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -362,6 +362,7 @@
     "cannot_add_unit": "Cannot add unit",
     "max_units_reached": "Maximum number of units reached",
     "cannot_upload_backup": "Cannot upload backup",
+    "cannot_retrieve_unit": "Cannot retrieve unit",
     "cannot_retrieve_ssh_keys": "Cannot retrieve account SSH keys",
     "cannot_retrieve_defaults": "Cannot retrieve defaults",
     "cannot_change_password": "Cannot change password",
@@ -3236,6 +3237,8 @@
       "wrong_passphrase": "Wrong passphrase",
       "cannot_open_terminal": "Cannot open terminal",
       "connection_failed": "Connection to the unit terminal failed.",
+      "unit_not_connected": "The unit is not connected to the controller.",
+      "ssh_disabled": "SSH is disabled on the unit.",
       "ssh_key_hint": "Generate an SSH key pair in Account settings and send the public key to the unit."
     },
     "account_settings": {
diff --git a/src/views/controller/UnitTerminalView.vue b/src/views/controller/UnitTerminalView.vue
index 589b13290..fb7b4ab9e 100644
--- a/src/views/controller/UnitTerminalView.vue
+++ b/src/views/controller/UnitTerminalView.vue
@@ -4,9 +4,11 @@
 -->
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
+import { computed, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useResizeObserver } from '@vueuse/core'
+import { useQuery } from '@tanstack/vue-query'
+import axios from 'axios'
 import { Terminal } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import { useI18n } from 'vue-i18n'
@@ -15,16 +17,21 @@ import {
   NeButton,
   NeInlineNotification,
   NeHeading,
+  NeSkeleton,
   NeTextInput,
-  NeTooltip
+  NeTooltip,
+  getAxiosErrorMessage
 } from '@nethesis/vue-components'
 import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { getControllerUnitTerminalUrl } from '@/lib/config'
+import { getControllerApiEndpoint, getControllerUnitTerminalUrl } from '@/lib/config'
+import { useLoginStore } from '@/stores/controller/controllerLogin'
+import type { Unit } from '@/stores/controller/units'
 
 type ConnectionStatus = 'pending' | 'active' | 'error' | 'closed'
 
 const { t } = useI18n()
 const route = useRoute()
+const loginStore = useLoginStore()
 const terminalContainer = useTemplateRef<HTMLElement>('terminalContainer')
 const term = new Terminal()
 const fitAddon = new FitAddon()
@@ -32,13 +39,51 @@ const encoder = new TextEncoder()
 let webSocket: WebSocket | undefined
 
 const unitId = route.query.unitId as string
-const unitName = route.query.unitName as string
 const connectionStatus = ref<ConnectionStatus>('pending')
-const askPassphrase = ref(false)
+const hasOutput = ref(false)
+const connecting = ref(false)
 const passphrase = ref('')
 const passphraseError = ref('')
 const closeReason = ref('')
 
+const {
+  data: unit,
+  isPending: unitPending,
+  error: unitError
+} = useQuery({
+  queryKey: ['controller', 'units', unitId],
+  queryFn: ({ signal }) =>
+    axios.get<{ data: Unit }>(`${getControllerApiEndpoint()}/units/${unitId}`, {
+      headers: { Authorization: `Bearer ${loginStore.token}` },
+      signal
+    }),
+  select: (res) => res.data.data,
+  // checked once before connecting, a refetch must not unmount an open terminal
+  staleTime: Infinity
+})
+
+const {
+  data: hasSshKey,
+  isPending: sshKeyPending,
+  error: sshKeyError
+} = useQuery({
+  queryKey: ['controller', 'accounts', 'ssh-keys'],
+  queryFn: ({ signal }) =>
+    axios.get<{ data: { key_pub: string } }>(`${getControllerApiEndpoint()}/accounts/ssh-keys`, {
+      headers: { Authorization: `Bearer ${loginStore.token}` },
+      signal
+    }),
+  select: (res) => res.data.data.key_pub !== '',
+  staleTime: Infinity
+})
+
+const loading = computed(() => unitPending.value || sshKeyPending.value)
+const unitConnected = computed(() => unit.value?.vpn.connected_since !== 0)
+const sshEnabled = computed(() => !!unit.value?.info.ssh_port)
+const canConnect = computed(
+  () => !!unit.value && unitConnected.value && sshEnabled.value && hasSshKey.value === true
+)
+
 term.loadAddon(fitAddon)
 
 term.onData((data) => {
@@ -55,11 +100,18 @@ term.onResize(({ cols, rows }) => {
 
 useResizeObserver(terminalContainer, () => fitAddon.fit())
 
-onMounted(() => {
-  term.open(terminalContainer.value!)
-  fitAddon.fit()
-  connect()
-})
+// post flush: the terminal container is rendered only once the unit can be reached
+watch(
+  canConnect,
+  (ok) => {
+    if (ok && !term.element) {
+      term.open(terminalContainer.value!)
+      fitAddon.fit()
+      connect()
+    }
+  },
+  { flush: 'post' }
+)
 
 onUnmounted(() => {
   webSocket?.close()
@@ -68,7 +120,8 @@ onUnmounted(() => {
 
 function connect() {
   connectionStatus.value = 'pending'
-  askPassphrase.value = false
+  connecting.value = true
+  passphraseError.value = ''
   closeReason.value = ''
 
   const ws = new WebSocket(getControllerUnitTerminalUrl(unitId))
@@ -78,28 +131,31 @@ function connect() {
   ws.onopen = () => {
     // first frame carries the key passphrase and the initial terminal size
     ws.send(JSON.stringify({ passphrase: passphrase.value, cols: term.cols, rows: term.rows }))
-    connectionStatus.value = 'active'
-    term.focus()
   }
 
   ws.onmessage = (event) => {
+    // active only once the shell answers, the server may still refuse the key before that
+    if (!hasOutput.value) {
+      hasOutput.value = true
+      connecting.value = false
+      connectionStatus.value = 'active'
+      term.focus()
+    }
     term.write(new Uint8Array(event.data))
   }
 
   ws.onclose = (event) => {
+    connecting.value = false
     if (event.code === 1000) {
       connectionStatus.value = 'closed'
       return
     }
-    connectionStatus.value = 'error'
 
-    if (event.reason.endsWith('key passphrase required')) {
-      askPassphrase.value = true
-      passphraseError.value = ''
-    } else if (event.reason.endsWith('wrong key passphrase')) {
-      askPassphrase.value = true
+    // a missing passphrase just leaves the form enabled for the user to fill in
+    if (event.reason.endsWith('wrong key passphrase')) {
       passphraseError.value = t('controller.unit_terminal.wrong_passphrase')
-    } else {
+    } else if (!event.reason.endsWith('key passphrase required')) {
+      connectionStatus.value = 'error'
       closeReason.value = event.reason || t('controller.unit_terminal.connection_failed')
     }
   }
@@ -136,66 +192,105 @@ function getBadgeIcon() {
 
 <template>
   <div class="p-6">
-    <NeHeading tag="h3" class="mb-7">{{
-      t('controller.unit_terminal.name_unit_terminal', { name: unitName })
+    <NeSkeleton v-if="unitPending" size="lg" class="mb-7 max-w-md" />
+    <NeHeading v-else tag="h3" class="mb-7">{{
+      t('controller.unit_terminal.name_unit_terminal', {
+        name: unit?.info.unit_name || unitId
+      })
     }}</NeHeading>
     <div class="flex flex-col gap-6">
-      <div class="flex items-center gap-4">
-        <span>{{ t('controller.unit_terminal.connection') }}</span>
-        <NeBadge
-          :kind="getBadgeKind()"
-          :text="t(`controller.unit_terminal.connection_status_${connectionStatus}`)"
-          :icon="getBadgeIcon()"
-        />
-      </div>
-      <div>
-        {{ t('controller.unit_terminal.exit_terminal_description') }}
-      </div>
-      <!-- passphrase prompt -->
-      <form v-if="askPassphrase" class="flex max-w-md items-end gap-4" @submit.prevent="connect">
-        <NeTextInput
-          v-model="passphrase"
-          :label="t('controller.units.passphrase')"
-          :invalid-message="passphraseError"
-          is-password
-          :show-password-label="t('ne_text_input.show_password')"
-          :hide-password-label="t('ne_text_input.hide_password')"
-          class="grow"
-        >
-          <template #tooltip>
-            <NeTooltip>
-              <template #content>
-                {{ t('controller.units.passphrase_tooltip') }}
-              </template>
-            </NeTooltip>
-          </template>
-        </NeTextInput>
-        <NeButton type="submit" kind="primary">
-          {{ t('controller.unit_terminal.connect') }}
-        </NeButton>
-      </form>
-      <!-- connection error notification -->
+      <NeSkeleton v-if="loading" :lines="2" size="lg" />
+      <!-- unit or account key couldn't be loaded -->
+      <NeInlineNotification
+        v-else-if="unitError"
+        kind="error"
+        :title="t('error.cannot_retrieve_unit')"
+        :description="t(getAxiosErrorMessage(unitError))"
+      />
       <NeInlineNotification
-        v-if="closeReason"
+        v-else-if="sshKeyError"
         kind="error"
+        :title="t('error.cannot_retrieve_ssh_keys')"
+        :description="t(getAxiosErrorMessage(sshKeyError))"
+      />
+      <!-- unit can't be reached -->
+      <NeInlineNotification
+        v-else-if="!unitConnected"
+        kind="warning"
         :title="t('controller.unit_terminal.cannot_open_terminal')"
-        :description="isSshKeyError() ? t('controller.unit_terminal.ssh_key_hint') : closeReason"
-      >
-        <template v-if="isSshKeyError()" #details>
-          {{ closeReason }}
-        </template>
-      </NeInlineNotification>
-      <!-- shell exited notification -->
+        :description="t('controller.unit_terminal.unit_not_connected')"
+      />
       <NeInlineNotification
-        v-if="connectionStatus === 'closed'"
+        v-else-if="!sshEnabled"
         kind="warning"
-        :title="t('controller.unit_terminal.connection_closed')"
-        :description="t('controller.unit_terminal.connection_closed_description')"
+        :title="t('controller.unit_terminal.cannot_open_terminal')"
+        :description="t('controller.unit_terminal.ssh_disabled')"
       />
-      <!-- padding on a wrapper, fit addon sizes the terminal from its parent's full box -->
-      <div class="rounded-md bg-black p-4">
-        <div ref="terminalContainer" class="h-[70vh]"></div>
-      </div>
+      <NeInlineNotification
+        v-else-if="!hasSshKey"
+        kind="warning"
+        :title="t('controller.unit_terminal.cannot_open_terminal')"
+        :description="t('controller.unit_terminal.ssh_key_hint')"
+      />
+      <template v-else>
+        <div class="flex items-center gap-4">
+          <span>{{ t('controller.unit_terminal.connection') }}</span>
+          <NeBadge
+            :kind="getBadgeKind()"
+            :text="t(`controller.unit_terminal.connection_status_${connectionStatus}`)"
+            :icon="getBadgeIcon()"
+          />
+        </div>
+        <div>
+          {{ t('controller.unit_terminal.exit_terminal_description') }}
+        </div>
+        <!-- passphrase prompt -->
+        <form v-if="!hasOutput" class="flex max-w-md items-end gap-4" @submit.prevent="connect">
+          <NeTextInput
+            v-model="passphrase"
+            :label="t('controller.units.passphrase')"
+            :invalid-message="passphraseError"
+            :disabled="connecting"
+            is-password
+            :show-password-label="t('ne_text_input.show_password')"
+            :hide-password-label="t('ne_text_input.hide_password')"
+            class="grow"
+          >
+            <template #tooltip>
+              <NeTooltip>
+                <template #content>
+                  {{ t('controller.units.passphrase_tooltip') }}
+                </template>
+              </NeTooltip>
+            </template>
+          </NeTextInput>
+          <NeButton type="submit" kind="primary" :loading="connecting" :disabled="connecting">
+            {{ t('controller.unit_terminal.connect') }}
+          </NeButton>
+        </form>
+        <!-- connection error notification -->
+        <NeInlineNotification
+          v-if="closeReason"
+          kind="error"
+          :title="t('controller.unit_terminal.cannot_open_terminal')"
+          :description="isSshKeyError() ? t('controller.unit_terminal.ssh_key_hint') : closeReason"
+        >
+          <template v-if="isSshKeyError()" #details>
+            {{ closeReason }}
+          </template>
+        </NeInlineNotification>
+        <!-- shell exited notification -->
+        <NeInlineNotification
+          v-if="connectionStatus === 'closed'"
+          kind="warning"
+          :title="t('controller.unit_terminal.connection_closed')"
+          :description="t('controller.unit_terminal.connection_closed_description')"
+        />
+        <!-- invisible until the shell answers, but still laid out so the fit addon can measure it -->
+        <div class="rounded-md bg-black p-4" :class="{ invisible: !hasOutput }">
+          <div ref="terminalContainer" class="h-[70vh]"></div>
+        </div>
+      </template>
     </div>
   </div>
 </template>