diff --git a/env.d.ts b/env.d.ts
index 37f16cdb7..74757abee 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 declare const UI_VERSION: string
 declare const REQUIRED_API_VERSION: string
+declare const MIN_UI_VERSION_FOR_DIRECT_SERVE: string
diff --git a/index.html b/index.html
index 37634417e..9cb825b37 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="%BASE_URL%favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NethSecurity</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-    <script src="/branding.js"></script>
+    <script src="%BASE_URL%branding.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index efcbdebd4..87d4ffea2 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,8 @@
   "name": "nethsecurity-ui",
   "version": "2.23.3",
   "config": {
-    "requiredApiVersion": "~3.7.0"
+    "requiredApiVersion": "~3.7.0",
+    "minUiVersionForDirectServe": "2.24.0"
   },
   "private": true,
   "type": "module",
diff --git a/src/App.vue b/src/App.vue
index 9281fba6d..37d6a098f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@ import ControllerApp from './ControllerApp.vue'
 import StandaloneApp from './StandaloneApp.vue'
 import { useThemeStore } from '@/stores/theme'
 import { onMounted } from 'vue'
-import { isStandaloneMode } from './lib/config'
+import { isStandaloneBuild } from './lib/config'
 
 const welcomeMsg = [
   '  _   _      _   _      _____                      _ _         ',
@@ -30,7 +30,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <template v-if="isStandaloneMode()">
+  <template v-if="isStandaloneBuild()">
     <StandaloneApp />
   </template>
   <template v-else>
diff --git a/src/ControllerApp.vue b/src/ControllerApp.vue
index 9515ecc7f..6e053b4a6 100644
--- a/src/ControllerApp.vue
+++ b/src/ControllerApp.vue
@@ -14,6 +14,7 @@ import { useI18n } from 'vue-i18n'
 import { useNotificationsStore } from './stores/notifications'
 import { useFavicon, useTitle } from '@vueuse/core'
 import { getControllerApiEndpoint, getProductName } from './lib/config'
+import { getUnitIdFromApiUrl } from '@/lib/deployment'
 
 const loginStore = useLoginStore()
 const { locale } = useI18n({ useScope: 'global' })
@@ -38,7 +39,7 @@ onMounted(async () => {
 
   // set favicon
   const favIcon = useFavicon()
-  favIcon.value = '/favicon-controller.ico'
+  favIcon.value = `${import.meta.env.BASE_URL}favicon-controller.ico`
 })
 
 function configureAxios() {
@@ -92,10 +93,9 @@ function configureAxios() {
             'Detected error 401, removing unit token from local storage'
           )
 
-          const matched = error.config.url.match(/^(.+:\/\/)(.+)\/(.+)\/api\/ubus\/call$/)
+          const unitId = getUnitIdFromApiUrl(error.config.url)
 
-          if (matched.length == 4) {
-            const unitId = matched[3]
+          if (unitId) {
             deleteFromStorage(`unit-${unitId}`)
 
             // show error notification
diff --git a/src/StandaloneApp.vue b/src/StandaloneApp.vue
index 0d9c49827..0dfa9741f 100644
--- a/src/StandaloneApp.vue
+++ b/src/StandaloneApp.vue
@@ -6,14 +6,16 @@
 <script setup lang="ts">
 import StandaloneAppShell from '@/components/standalone/StandaloneAppShell.vue'
 import StandaloneAppLogin from '@/components/standalone/StandaloneAppLogin.vue'
+import UnitSessionExpired from '@/components/standalone/UnitSessionExpired.vue'
+import { isProxiedByController } from '@/lib/deployment'
 import { TOKEN_REFRESH_INTERVAL, useLoginStore } from '@/stores/standalone/standaloneLogin'
 import { onMounted, ref } from 'vue'
 import axios, { type AxiosRequestConfig } from 'axios'
-import { getStandaloneApiEndpoint, isStandaloneMode } from './lib/config'
+import { getStandaloneApiEndpoint, isStandaloneBuild } from './lib/config'
 import { useUnitsStore } from './stores/controller/units'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { getPreference } from '@nethesis/vue-components'
+import { getUiPreference } from '@/lib/storage'
 import { getUbusReproductionCommand } from '@/lib/axiosErrorCommand'
 import { UnauthorizedAction, useSudoStore } from '@/stores/standalone/sudo.ts'
 import AskSudoPasswordModal from '@/components/standalone/AskSudoPasswordModal.vue'
@@ -30,14 +32,14 @@ const sudoStore = useSudoStore()
 const isLoaded = ref(false)
 
 onMounted(async () => {
-  if (isStandaloneMode()) {
+  if (isStandaloneBuild()) {
     await loginStore.loadUserFromStorage()
     // Setup localization
     let username = 'root'
     if (loginStore.isLoggedIn) {
       username = loginStore.username
     }
-    locale.value = getPreference('locale', username) || navigator.language
+    locale.value = getUiPreference('locale', username) || navigator.language
   } else {
     // a controller is managing this unit
     await unitsStore.load()
@@ -104,7 +106,7 @@ function configureAxios() {
       }
 
       if (error.response?.status == 401) {
-        if (isStandaloneMode()) {
+        if (isStandaloneBuild()) {
           if (error.response?.data?.message !== 'incorrect Username or Password') {
             console.warn('[interceptor]', 'Detected error 401, logout')
             loginStore.isSessionExpired = true
@@ -167,7 +169,9 @@ function configureAxios() {
       <AskSudoPasswordModal />
     </template>
     <template v-else>
-      <StandaloneAppLogin />
+      <!-- The unit's credentials belong to the controller, so a login form is a dead end here. -->
+      <UnitSessionExpired v-if="isProxiedByController()" />
+      <StandaloneAppLogin v-else />
     </template>
   </template>
   <VueQueryDevtools />
diff --git a/public/login_logo.svg b/src/assets/login_logo.svg
similarity index 100%
rename from public/login_logo.svg
rename to src/assets/login_logo.svg
diff --git a/public/logo_dark.svg b/src/assets/logo_dark.svg
similarity index 100%
rename from public/logo_dark.svg
rename to src/assets/logo_dark.svg
diff --git a/public/logo_light.svg b/src/assets/logo_light.svg
similarity index 100%
rename from public/logo_light.svg
rename to src/assets/logo_light.svg
diff --git a/src/components/ChangeLangCombobox.vue b/src/components/ChangeLangCombobox.vue
index 7b5d10248..9f91577a8 100644
--- a/src/components/ChangeLangCombobox.vue
+++ b/src/components/ChangeLangCombobox.vue
@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { NeCombobox, type NeComboboxOption, savePreference } from '@nethesis/vue-components'
+import { NeCombobox, type NeComboboxOption } from '@nethesis/vue-components'
+import { saveUiPreference } from '@/lib/storage'
 import { useI18n } from 'vue-i18n'
 import { computed, watch } from 'vue'
-import { isStandaloneMode } from '@/lib/config'
+import { isStandaloneBuild } from '@/lib/config'
 import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
 import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
 import { capitalize } from 'lodash-es'
 
 const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
-const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+const loginStore = isStandaloneBuild() ? useStandaloneLoginStore() : useControllerLoginStore()
 
 const supportedLanguages = computed((): NeComboboxOption[] => {
   return availableLocales.map((locale) => {
@@ -23,7 +24,7 @@ const supportedLanguages = computed((): NeComboboxOption[] => {
 })
 
 watch(locale, () => {
-  savePreference('locale', locale.value, loginStore.username)
+  saveUiPreference('locale', locale.value, loginStore.username)
 })
 </script>
 
diff --git a/src/components/controller/ControllerAppLogin.vue b/src/components/controller/ControllerAppLogin.vue
index 0a447a479..078a76fc5 100644
--- a/src/components/controller/ControllerAppLogin.vue
+++ b/src/components/controller/ControllerAppLogin.vue
@@ -22,6 +22,7 @@ import { MessageBag, validateRequired, validateSixDigitCode } from '@/lib/valida
 import { getControllerRoutePrefix } from '@/lib/router'
 import router from '@/router'
 import { ValidationError } from '@/lib/standalone/ubus'
+import loginLogoUrl from '@/assets/login_logo.svg'
 
 const username = ref('')
 const password = ref('')
@@ -246,7 +247,7 @@ function isFormInvalid() {
       class="relative hidden w-0 flex-1 items-center justify-center bg-linear-to-t from-gray-950 to-primary-800 lg:flex"
     >
       <div class="flex w-2/3 flex-col items-center xl:w-2/5 3xl:w-1/3 5xl:w-1/4">
-        <img src="/login_logo.svg" :alt="`${getCompanyName()} logo`" class="" />
+        <img :src="loginLogoUrl" :alt="`${getCompanyName()} logo`" class="" />
         <span class="text-xl text-white">Controller</span>
       </div>
     </div>
diff --git a/src/components/controller/ControllerShellLogo.vue b/src/components/controller/ControllerShellLogo.vue
index 48146bfbe..a1bc44045 100644
--- a/src/components/controller/ControllerShellLogo.vue
+++ b/src/components/controller/ControllerShellLogo.vue
@@ -4,24 +4,15 @@
 -->
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { getCompanyName } from '@/lib/config'
-import { useThemeStore } from '@/stores/theme'
+import { useAppLogo } from '@/composables/useAppLogo'
 
-const themeStore = useThemeStore()
-
-const logoFilename = computed(() => {
-  if (themeStore.isLight) {
-    return 'logo_light.svg'
-  } else {
-    return 'logo_dark.svg'
-  }
-})
+const { logoUrl } = useAppLogo()
 </script>
 
 <template>
   <div class="flex h-16 shrink-0 flex-col items-start justify-center pt-3 pl-3">
-    <img class="h-7 w-auto" :src="`/${logoFilename}`" :alt="`${getCompanyName()} logo`" />
+    <img class="h-7 w-auto" :src="logoUrl" :alt="`${getCompanyName()} logo`" />
     <span class="text-base text-primary-700 dark:text-primary-500">Controller</span>
   </div>
 </template>
diff --git a/src/components/controller/account_settings/two_fa/ConfigureTwoFaDrawer.vue b/src/components/controller/account_settings/two_fa/ConfigureTwoFaDrawer.vue
index 1a209520b..b8314c2b4 100644
--- a/src/components/controller/account_settings/two_fa/ConfigureTwoFaDrawer.vue
+++ b/src/components/controller/account_settings/two_fa/ConfigureTwoFaDrawer.vue
@@ -21,7 +21,7 @@ import { ValidationError } from '@/lib/standalone/ubus'
 import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
 import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
 import { useNotificationsStore } from '@/stores/notifications'
-import { isStandaloneMode } from '@/lib/config'
+import { isStandaloneBuild } from '@/lib/config'
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 
 const props = defineProps({
@@ -117,7 +117,7 @@ async function verifyOtp() {
     return
   }
   loading.value.verifyOtp = true
-  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+  const loginStore = isStandaloneBuild() ? useStandaloneLoginStore() : useControllerLoginStore()
 
   try {
     await verifyTwoFaOtp(loginStore.username, loginStore.token, otp.value)
diff --git a/src/components/controller/account_settings/two_fa/RevokeTwoFaModal.vue b/src/components/controller/account_settings/two_fa/RevokeTwoFaModal.vue
index 05a08b6ae..eb846f7ae 100644
--- a/src/components/controller/account_settings/two_fa/RevokeTwoFaModal.vue
+++ b/src/components/controller/account_settings/two_fa/RevokeTwoFaModal.vue
@@ -17,7 +17,7 @@ import {
   NeModal,
   NeTextInput
 } from '@nethesis/vue-components'
-import { isStandaloneMode } from '@/lib/config'
+import { isStandaloneBuild } from '@/lib/config'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -30,7 +30,7 @@ const props = defineProps({
 const emit = defineEmits(['close', 'reloadData'])
 
 const { t } = useI18n()
-const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+const loginStore = isStandaloneBuild() ? useStandaloneLoginStore() : useControllerLoginStore()
 const notificationsStore = useNotificationsStore()
 const otp = ref('')
 const otpRef = ref()
diff --git a/src/components/controller/units/UnitsTable.vue b/src/components/controller/units/UnitsTable.vue
index 05372fa19..5a5c249ce 100644
--- a/src/components/controller/units/UnitsTable.vue
+++ b/src/components/controller/units/UnitsTable.vue
@@ -35,7 +35,7 @@ import router from '@/router'
 import { onMounted, type PropType, ref } from 'vue'
 import { useLoginStore } from '@/stores/controller/controllerLogin'
 import RemoveUnitModal from '@/components/controller/units/RemoveUnitModal.vue'
-import { coerce, outside, satisfies } from 'semver'
+import { coerce, gte, outside, satisfies } from 'semver'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   faArrowsRotate,
@@ -97,6 +97,20 @@ onMounted(() => {
   hideOpenUnitPopupsTooltip.value = getPreference('hideOpenUnitPopupsTooltip', loginStore.username)
 })
 
+/**
+ * True when the unit ships a UI new enough to be served under the controller's per-unit path
+ * prefix, so we can hand the browser over to the unit's own UI instead of rendering our embedded
+ * copy of it.
+ *
+ * Gated on ui_version rather than api_version on purpose: this is a property of the ns-ui package,
+ * and the two are versioned independently. Units that do not report ui_version at all fail closed
+ * to the embedded copy, which is the correct answer for them.
+ */
+function servesItsOwnUi(unit: Unit) {
+  const uiVersion = coerce(unit.info?.ui_version)
+  return uiVersion != null && gte(uiVersion, MIN_UI_VERSION_FOR_DIRECT_SERVE)
+}
+
 async function openUnit(unit: Unit, versionCheck = true) {
   error.value.openUnit = ''
   currentUnit.value = unit
@@ -107,6 +121,22 @@ async function openUnit(unit: Unit, versionCheck = true) {
     await unitsStore.getUnits()
     // Find the now updated unit, as the currentUnit might have changed
     currentUnit.value = unitsStore.units.find((u) => u.id == unit.id)!
+
+    if (servesItsOwnUi(currentUnit.value)) {
+      // The unit serves its own UI at its own version, so there is no API version to keep in
+      // lockstep with ours. checkUnitToken writes unit-<id>, which the unit's UI reads back on
+      // load - same origin, so this is the session handover.
+      await unitsStore.checkUnitToken(unit.id)
+      // Trailing slash is mandatory: the unit's bundle uses a relative base, so without it every
+      // asset would resolve against the controller root. 'noopener' keeps the unit's JS from
+      // reaching back into this tab through window.opener.
+      window.open(`${window.location.origin}/${unit.id}/`, '_blank', 'noopener')
+      showGreaterApiModal.value = false
+      return
+    }
+
+    // Legacy path: render our embedded copy of the standalone UI, which does have to match the
+    // unit's API version.
     // Logic on which message is shown is inside the ObsoleteApiModal component
     let version = coerce(currentUnit.value?.info.api_version)
     if (version == null) {
diff --git a/src/components/standalone/SideMenu.vue b/src/components/standalone/SideMenu.vue
index 0f05a14fb..f565fb5ff 100644
--- a/src/components/standalone/SideMenu.vue
+++ b/src/components/standalone/SideMenu.vue
@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useLoginStore } from '@/stores/standalone/standaloneLogin'
-import { getPreference, savePreference } from '@nethesis/vue-components'
+import { getUiPreference, saveUiPreference } from '@/lib/storage'
 import { isEmpty } from 'lodash-es'
 import { onMounted, ref, type Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -245,14 +245,14 @@ function toggleExpand(menuItem: MenuItem) {
   const newValue = !menuExpanded.value[menuItem.to]
   menuExpanded.value[menuItem.to] = newValue
   const username = loginStore.username || 'root'
-  savePreference(`${menuItem.to}MenuExpanded`, newValue, username)
+  saveUiPreference(`${menuItem.to}MenuExpanded`, newValue, username)
 }
 
 function loadMenuItemsExpanded() {
   const username = loginStore.username || 'root'
 
   for (const menuName of Object.keys(menuExpanded.value)) {
-    const isMenuExpanded = getPreference(`${menuName}MenuExpanded`, username)
+    const isMenuExpanded = getUiPreference(`${menuName}MenuExpanded`, username)
 
     if (isMenuExpanded || isCurrentRoute(menuName)) {
       menuExpanded.value[menuName] = true
diff --git a/src/components/standalone/StandaloneAppLogin.vue b/src/components/standalone/StandaloneAppLogin.vue
index 9cb58302e..c4ad41ced 100644
--- a/src/components/standalone/StandaloneAppLogin.vue
+++ b/src/components/standalone/StandaloneAppLogin.vue
@@ -25,6 +25,12 @@ import { getProductName, getCompanyName, getPrivacyPolicyUrl } from '@/lib/confi
 import { jwtDecode } from 'jwt-decode'
 import { verifyTwoFaOtp } from '@/lib/twoFa'
 import { ValidationError } from '@/lib/standalone/ubus'
+import { getScopedStorageKey } from '@/lib/storage'
+import loginLogoUrl from '@/assets/login_logo.svg'
+
+// scoped because every proxied unit UI shares the controller's origin, and therefore its
+// localStorage namespace
+const rememberedUsernameKey = getScopedStorageKey('standaloneUsername')
 
 const username = ref('')
 const usernameRef = ref()
@@ -62,7 +68,7 @@ watch(step, () => {
 
 onMounted(() => {
   // read username from storage, if present
-  const usernameFromStorage = getStringFromStorage('standaloneUsername')
+  const usernameFromStorage = getStringFromStorage(rememberedUsernameKey)
 
   if (usernameFromStorage) {
     rememberMe.value = true
@@ -85,9 +91,9 @@ async function login() {
 
     // set or remove username to/from local storage
     if (rememberMe.value) {
-      saveToStorage('standaloneUsername', username.value)
+      saveToStorage(rememberedUsernameKey, username.value)
     } else {
-      deleteFromStorage('standaloneUsername')
+      deleteFromStorage(rememberedUsernameKey)
     }
 
     // check if 2fa is enabled
@@ -329,7 +335,7 @@ async function verifyOtp() {
       class="relative hidden w-0 flex-1 items-center justify-center bg-linear-to-t from-gray-950 to-primary-800 lg:flex"
     >
       <img
-        src="/login_logo.svg"
+        :src="loginLogoUrl"
         :alt="`${getCompanyName()} logo`"
         class="w-2/3 xl:w-2/5 3xl:w-1/3 5xl:w-1/4"
       />
diff --git a/src/components/standalone/StandaloneAppShell.vue b/src/components/standalone/StandaloneAppShell.vue
index 408e3e78f..c4bc1ac17 100644
--- a/src/components/standalone/StandaloneAppShell.vue
+++ b/src/components/standalone/StandaloneAppShell.vue
@@ -5,9 +5,8 @@
 
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { useThemeStore } from '@/stores/theme'
 import SideMenu from './SideMenu.vue'
 import { getCompanyName } from '@/lib/config'
 import { useI18n } from 'vue-i18n'
@@ -15,9 +14,10 @@ import ToastNotificationsArea from '../ToastNotificationsArea.vue'
 import NotificationDrawer from '../NotificationDrawer.vue'
 import StandaloneTopBar from './StandaloneTopBar.vue'
 import { useAlerts } from '@/composables/useAlerts'
+import { useAppLogo } from '@/composables/useAppLogo'
 
-const themeStore = useThemeStore()
 const { t } = useI18n()
+const { logoUrl } = useAppLogo()
 
 // Alerts are only relevant for a real device (standalone or a managed unit),
 // which is exactly what this shell renders. Fetching lives here so the
@@ -25,14 +25,6 @@ const { t } = useI18n()
 const { notifications: alertNotifications } = useAlerts()
 
 const sidebarOpen = ref(false)
-
-const logoFilename = computed(() => {
-  if (themeStore.isLight) {
-    return 'logo_light.svg'
-  } else {
-    return 'logo_dark.svg'
-  }
-})
 </script>
 
 <template>
@@ -90,7 +82,7 @@ const logoFilename = computed(() => {
                 <div class="flex h-16 shrink-0 items-center">
                   <img
                     class="h-7 w-auto px-3"
-                    :src="`/${logoFilename}`"
+                    :src="logoUrl"
                     :alt="`${getCompanyName()} logo`"
                     aria-hidden="true"
                   />
@@ -118,11 +110,7 @@ const logoFilename = computed(() => {
         class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-2 pb-4 dark:border-gray-700 dark:bg-gray-950"
       >
         <div class="flex h-16 shrink-0 items-center">
-          <img
-            class="h-8 w-auto px-3"
-            :src="`/${logoFilename}`"
-            :alt="`${getCompanyName()} logo`"
-          />
+          <img class="h-8 w-auto px-3" :src="logoUrl" :alt="`${getCompanyName()} logo`" />
         </div>
         <nav class="flex flex-1 flex-col">
           <ul role="list" class="flex flex-1 flex-col gap-y-7">
diff --git a/src/components/standalone/StandaloneTopBar.vue b/src/components/standalone/StandaloneTopBar.vue
index 2c092ec9e..c72658d84 100644
--- a/src/components/standalone/StandaloneTopBar.vue
+++ b/src/components/standalone/StandaloneTopBar.vue
@@ -14,9 +14,11 @@ import { useLoginStore } from '@/stores/standalone/standaloneLogin'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
 import { isEmpty, isEqual } from 'lodash-es'
 import { ubusCall } from '@/lib/standalone/ubus'
-import { isStandaloneMode } from '@/lib/config'
+import { isManagedByController, isProxiedByController } from '@/lib/deployment'
+import { getStandaloneRoutePrefix } from '@/lib/router'
 import UciChangesModal from './UciChangesModal.vue'
 import {
+  faArrowLeft,
   faAward,
   faBell,
   faCircleUser,
@@ -55,8 +57,10 @@ const accountMenuOptions = computed(() => {
       id: 'account',
       label: t('common.shell.account_settings'),
       icon: faCircleUser,
-      action: () => router.push('/standalone/account'),
-      disabled: !isStandaloneMode()
+      action: () => router.push(`${getStandaloneRoutePrefix()}/account`),
+      // The account is provisioned and held by the controller; changing its password here would
+      // break every future token the controller mints for this unit.
+      disabled: isManagedByController()
     },
     {
       id: 'theme',
@@ -64,13 +68,22 @@ const accountMenuOptions = computed(() => {
       icon: themeStore.isLight ? faMoon : faSun,
       action: themeStore.toggleTheme
     },
-    {
-      id: 'logout',
-      label: t('common.shell.sign_out'),
-      icon: faRightFromBracket,
-      action: loginStore.logout,
-      disabled: !isStandaloneMode()
-    }
+    // Signing out of a proxied unit would invalidate the token the controller cached for it, so
+    // offer a way back to the controller instead of a dead "sign out".
+    isProxiedByController()
+      ? {
+          id: 'backToController',
+          label: t('common.shell.back_to_controller'),
+          icon: faArrowLeft,
+          action: () => window.location.assign(`${window.location.origin}/#/controller/units`)
+        }
+      : {
+          id: 'logout',
+          label: t('common.shell.sign_out'),
+          icon: faRightFromBracket,
+          action: loginStore.logout,
+          disabled: isManagedByController()
+        }
   ]
 })
 
@@ -184,7 +197,7 @@ function openNotificationsDrawer() {
         </div>
 
         <!-- badge for controlled unit -->
-        <NeTooltip v-if="!isStandaloneMode()">
+        <NeTooltip v-if="isManagedByController()">
           <template #trigger>
             <NeBadge kind="primary" text="Controller" />
           </template>
diff --git a/src/components/standalone/UnitSessionExpired.vue b/src/components/standalone/UnitSessionExpired.vue
new file mode 100644
index 000000000..82a5b6003
--- /dev/null
+++ b/src/components/standalone/UnitSessionExpired.vue
@@ -0,0 +1,58 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { NeButton, NeHeading, NeInlineNotification } from '@nethesis/vue-components'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { useI18n } from 'vue-i18n'
+import { getProductName } from '@/lib/config'
+import loginLogoUrl from '@/assets/login_logo.svg'
+
+// Replaces the login form when proxied: the unit's credentials live in the controller, so the
+// operator cannot fill it in. Not an automatic redirect, or a controller that fails to mint a
+// token would ping-pong between the two SPAs.
+const { t } = useI18n()
+
+function backToController() {
+  window.location.assign(`${window.location.origin}/#/controller/units`)
+}
+</script>
+
+<template>
+  <div class="flex h-screen min-h-full flex-1 bg-gray-200 dark:bg-gray-950">
+    <div
+      class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
+    >
+      <div class="mx-auto w-full max-w-md">
+        <div class="bg-gray-50 px-6 py-12 shadow sm:rounded-lg sm:px-12 dark:bg-gray-900">
+          <NeHeading tag="h4" class="mb-4">
+            {{ t('login.unit_session_expired_title') }}
+          </NeHeading>
+          <div class="mb-6 text-sm text-gray-700 dark:text-gray-100">
+            {{ t('login.unit_session_expired_description', { product: getProductName() }) }}
+          </div>
+          <NeInlineNotification
+            kind="info"
+            :title="t('login.unit_session_expired_hint_title')"
+            :description="t('login.unit_session_expired_hint_description')"
+            class="mb-6"
+          />
+          <NeButton kind="primary" size="lg" class="w-full" @click="backToController">
+            <template #prefix>
+              <FontAwesomeIcon :icon="faArrowLeft" aria-hidden="true" />
+            </template>
+            {{ t('common.shell.back_to_controller') }}
+          </NeButton>
+        </div>
+      </div>
+    </div>
+    <div
+      class="relative hidden w-0 flex-1 items-center justify-center bg-linear-to-t from-gray-950 to-primary-800 lg:flex"
+    >
+      <img :src="loginLogoUrl" alt="" class="w-2/3 xl:w-2/5 3xl:w-1/3 5xl:w-1/4" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/FlowSection.vue b/src/components/standalone/monitoring/FlowSection.vue
index 930c34aef..e697fa9df 100644
--- a/src/components/standalone/monitoring/FlowSection.vue
+++ b/src/components/standalone/monitoring/FlowSection.vue
@@ -3,8 +3,7 @@ import {
   getAxiosErrorMessage,
   NeButton,
   NeInlineNotification,
-  NeSkeleton,
-  savePreference
+  NeSkeleton
 } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -14,13 +13,13 @@ import { ubusCall } from '@/lib/standalone/ubus.ts'
 import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
 import { useSubscriptionStore } from '@/stores/standalone/subscription.ts'
 import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin.ts'
-import { isStandaloneMode } from '@/lib/config.ts'
+import { isStandaloneBuild } from '@/lib/config.ts'
 import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin.ts'
-import { getPreference } from '@nethesis/vue-components'
+import { getUiPreference, saveUiPreference } from '@/lib/storage'
 
 const { t } = useI18n()
 const subscription = useSubscriptionStore()
-const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+const loginStore = isStandaloneBuild() ? useStandaloneLoginStore() : useControllerLoginStore()
 
 type FlowDaemonResponse = {
   data: {
@@ -67,12 +66,12 @@ const fewAppsWarning = computed<boolean>(() => {
 })
 
 function dismissWarning() {
-  savePreference('dismiss_flows_warning', true, loginStore.username)
+  saveUiPreference('dismiss_flows_warning', true, loginStore.username)
   dismissedWarning.value = true
 }
 
 onMounted(() => {
-  dismissedWarning.value = getPreference('dismiss_flows_warning', loginStore.username)
+  dismissedWarning.value = getUiPreference('dismiss_flows_warning', loginStore.username)
 })
 </script>
 
diff --git a/src/components/standalone/reverse_proxy/CreateOrEditProxyDrawer.vue b/src/components/standalone/reverse_proxy/CreateOrEditProxyDrawer.vue
index 4591ab558..181939ea6 100644
--- a/src/components/standalone/reverse_proxy/CreateOrEditProxyDrawer.vue
+++ b/src/components/standalone/reverse_proxy/CreateOrEditProxyDrawer.vue
@@ -30,6 +30,7 @@ import {
 } from '@nethesis/vue-components'
 import NeMultiTextInput from '../NeMultiTextInput.vue'
 import { ValidationError, ubusCall } from '@/lib/standalone/ubus'
+import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useRouter } from 'vue-router'
 
 type CreateOrEditProxyPayload = {
@@ -333,7 +334,7 @@ watch(
           :description="t('standalone.reverse_proxy.no_certificate_configured_description')"
           kind="warning"
           :primary-button-label="t('standalone.reverse_proxy.go_to_certificates')"
-          @primary-click="() => router.push('/standalone/system/certificates')"
+          @primary-click="() => router.push(`${getStandaloneRoutePrefix()}/system/certificates`)"
         />
       </template>
       <NeTextInput
diff --git a/src/components/standalone/update/InstalledPackagesModal.vue b/src/components/standalone/update/InstalledPackagesModal.vue
new file mode 100644
index 000000000..f5de5cd8e
--- /dev/null
+++ b/src/components/standalone/update/InstalledPackagesModal.vue
@@ -0,0 +1,242 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeEmptyState,
+  NeInlineNotification,
+  NeModal,
+  NePaginator,
+  NeSortDropdown,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  NeTextInput,
+  useItemPagination,
+  useSort,
+  type SortEvent
+} from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { faBoxOpen } from '@fortawesome/free-solid-svg-icons'
+
+export type InstalledPackage = {
+  name: string
+  version: string
+  description: string
+}
+
+type InstalledPackagesResponse = {
+  data: {
+    packages: InstalledPackage[]
+  }
+}
+
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { t } = useI18n()
+
+const searchTerm = ref('')
+const sortKey = ref<keyof InstalledPackage>('name')
+const sortDescending = ref(false)
+const pageSize = ref(25)
+
+const {
+  data: packages,
+  isPending,
+  isError,
+  error
+} = useQuery({
+  queryKey: ['update', 'installed-packages'],
+  queryFn: ({ signal }) =>
+    ubusCall<InstalledPackagesResponse>('ns.update', 'list-installed-packages', {}, { signal }),
+  select: (response) => response.data.packages,
+  enabled: () => props.visible,
+  staleTime: 60_000,
+  refetchOnWindowFocus: false
+})
+
+const filteredPackages = computed(() => {
+  if (!packages.value) {
+    return []
+  }
+  if (!searchTerm.value) {
+    return packages.value
+  }
+  const search = searchTerm.value.toLowerCase()
+  return packages.value.filter(
+    (item) =>
+      item.name.toLowerCase().includes(search) ||
+      item.version.toLowerCase().includes(search) ||
+      item.description.toLowerCase().includes(search)
+  )
+})
+
+const { sortedItems } = useSort(() => filteredPackages.value, sortKey, sortDescending)
+
+const { currentPage, paginatedItems } = useItemPagination(() => sortedItems.value, {
+  itemsPerPage: pageSize
+})
+
+function onSort(payload: SortEvent) {
+  sortKey.value = payload.key as keyof InstalledPackage
+  sortDescending.value = payload.descending
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      searchTerm.value = ''
+      currentPage.value = 1
+    }
+  }
+)
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    kind="neutral"
+    size="xxl"
+    :title="t('standalone.update.installed_packages')"
+    :primary-label="t('common.close')"
+    :close-aria-label="t('common.close')"
+    @close="emit('close')"
+    @primary-click="emit('close')"
+  >
+    <div class="space-y-6">
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        {{ t('standalone.update.installed_packages_description') }}
+      </p>
+      <NeInlineNotification
+        v-if="isError"
+        :title="t('error.cannot_retrieve_installed_packages')"
+        :description="t(getAxiosErrorMessage(error))"
+        kind="error"
+      />
+      <template v-else>
+        <div class="flex flex-wrap items-end gap-4">
+          <NeTextInput
+            v-model="searchTerm"
+            :disabled="isPending"
+            :placeholder="t('common.filter')"
+            is-search
+          />
+          <NeSortDropdown
+            v-model:sort-key="sortKey"
+            v-model:sort-descending="sortDescending"
+            :label="t('sort.sort')"
+            :options="[
+              { id: 'name', label: t('standalone.update.package_name') },
+              { id: 'version', label: t('standalone.update.package_version') }
+            ]"
+            :open-menu-aria-label="t('ne_dropdown.open_menu')"
+            :sort-by-label="t('sort.sort_by')"
+            :sort-direction-label="t('sort.direction')"
+            :ascending-label="t('sort.ascending')"
+            :descending-label="t('sort.descending')"
+            class="md:hidden"
+          />
+        </div>
+        <div class="max-h-[60vh] overflow-y-auto">
+          <NeTable
+            :aria-label="t('standalone.update.installed_packages')"
+            :loading="isPending"
+            :skeleton-columns="3"
+            :skeleton-rows="10"
+            :sort-key="sortKey"
+            :sort-descending="sortDescending"
+            card-breakpoint="md"
+          >
+            <NeTableHead>
+              <NeTableHeadCell column-key="name" sortable @sort="onSort">
+                {{ t('standalone.update.package_name') }}
+              </NeTableHeadCell>
+              <NeTableHeadCell column-key="version" sortable @sort="onSort">
+                {{ t('standalone.update.package_version') }}
+              </NeTableHeadCell>
+              <NeTableHeadCell>
+                {{ t('standalone.update.package_description') }}
+              </NeTableHeadCell>
+            </NeTableHead>
+            <NeTableBody v-if="sortedItems.length > 0">
+              <NeTableRow v-for="item in paginatedItems" :key="item.name">
+                <NeTableCell :data-label="t('standalone.update.package_name')">
+                  {{ item.name }}
+                </NeTableCell>
+                <NeTableCell :data-label="t('standalone.update.package_version')">
+                  {{ item.version || '-' }}
+                </NeTableCell>
+                <NeTableCell :data-label="t('standalone.update.package_description')">
+                  {{ item.description || '-' }}
+                </NeTableCell>
+              </NeTableRow>
+            </NeTableBody>
+            <NeTableBody v-else-if="!isPending">
+              <NeTableRow>
+                <NeTableCell colspan="3">
+                  <NeEmptyState
+                    :icon="faBoxOpen"
+                    :title="
+                      searchTerm
+                        ? t('standalone.update.no_installed_packages_found')
+                        : t('standalone.update.no_installed_packages')
+                    "
+                    :description="
+                      searchTerm
+                        ? t('standalone.update.no_installed_packages_found_description')
+                        : ''
+                    "
+                    class="bg-white dark:bg-gray-950"
+                  >
+                    <NeButton v-if="searchTerm" kind="tertiary" @click="searchTerm = ''">
+                      {{ t('common.clear_filter') }}
+                    </NeButton>
+                  </NeEmptyState>
+                </NeTableCell>
+              </NeTableRow>
+            </NeTableBody>
+            <template v-if="sortedItems.length > 0" #paginator>
+              <NePaginator
+                :current-page="currentPage"
+                :total-rows="sortedItems.length"
+                :page-size="pageSize"
+                :nav-pagination-label="t('ne_table.pagination')"
+                :next-label="t('ne_table.go_to_next_page')"
+                :previous-label="t('ne_table.go_to_previous_page')"
+                :range-of-total-label="t('ne_table.of')"
+                :page-size-label="t('ne_table.show')"
+                @select-page="
+                  (page: number) => {
+                    currentPage = page
+                  }
+                "
+                @select-page-size="
+                  (size: number) => {
+                    pageSize = size
+                  }
+                "
+              />
+            </template>
+          </NeTable>
+        </div>
+      </template>
+    </div>
+  </NeModal>
+</template>
diff --git a/src/composables/useAppLogo.ts b/src/composables/useAppLogo.ts
new file mode 100644
index 000000000..a78224e2a
--- /dev/null
+++ b/src/composables/useAppLogo.ts
@@ -0,0 +1,13 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import logoLight from '@/assets/logo_light.svg'
+import logoDark from '@/assets/logo_dark.svg'
+
+export function useAppLogo() {
+  const themeStore = useThemeStore()
+  const logoUrl = computed(() => (themeStore.isLight ? logoLight : logoDark))
+  return { logoUrl }
+}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5c74de9c4..448f8f046 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -12,7 +12,8 @@
       "account": "Account",
       "controlled_unit_tooltip": "This unit has been opened by a Controller",
       "about": "About",
-      "platform_info": "Controller information"
+      "platform_info": "Controller information",
+      "back_to_controller": "Back to Controller"
     },
     "platform": {
       "controller_version": "Controller version",
@@ -438,7 +439,8 @@
     "cannot_renew_server_cert": "Cannot renew server certificate",
     "cannot_regenerate_all_certs": "Cannot regenerate all certificates",
     "cannot_retrieve_flows": "Cannot retrieve flows, please try again later",
-    "cannot_retrieve_ovpn_rw_connection_history": "Cannot retrieve connection history, please try again later"
+    "cannot_retrieve_ovpn_rw_connection_history": "Cannot retrieve connection history, please try again later",
+    "cannot_retrieve_installed_packages": "Cannot retrieve installed packages, please try again later"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -496,7 +498,11 @@
     "incorrect_username_or_password": "Incorrect username or password",
     "privacy_policy": "Privacy policy",
     "session_has_expired": "Session has expired",
-    "please_sign_in_again": "Please sign in again"
+    "please_sign_in_again": "Please sign in again",
+    "unit_session_expired_title": "Session expired",
+    "unit_session_expired_description": "The session for this {product} unit is no longer valid.",
+    "unit_session_expired_hint_title": "Reopen this unit from the Controller",
+    "unit_session_expired_hint_description": "This unit is managed by a Controller, which holds its credentials. Go back to the Controller and open the unit again to start a new session."
   },
   "standalone": {
     "wizard": {
@@ -854,6 +860,14 @@
       "bug_security_fixes_description": "Security and minor bugfixes are distributed using packages.",
       "updated_at": "Updated at {lastCheck}",
       "check_for_fixes": "Check for fixes",
+      "installed_packages": "Installed packages",
+      "installed_packages_description": "List of the packages currently installed on the unit.",
+      "package_name": "Package",
+      "package_version": "Version",
+      "package_description": "Description",
+      "no_installed_packages": "No installed packages",
+      "no_installed_packages_found": "No packages found",
+      "no_installed_packages_found_description": "Try changing your search filter.",
       "system_update": "System update",
       "system_update_description": "New features are released with images. If a new image is available you can update the system to a new version. Alternatively upload a compatible firmware image.",
       "system_update_first_tip": "Backup your configuration before updating your {productName} system",
diff --git a/src/lib/__tests__/config.spec.ts b/src/lib/__tests__/config.spec.ts
new file mode 100644
index 000000000..42e96c66b
--- /dev/null
+++ b/src/lib/__tests__/config.spec.ts
@@ -0,0 +1,89 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { getControllerApiEndpoint, getStandaloneApiEndpoint } from '@/lib/config'
+
+const UNIT_ID = '9f3b1c2e-4a5d-4e6f-8a9b-0c1d2e3f4a5b'
+
+/**
+ * The origin comes from window.location and cannot be stubbed independently of jsdom, so tests
+ * assert against it directly. That is the point: only the *path* is derived from the document,
+ * so a changing baseURI must move the path and leave the origin alone.
+ */
+const ORIGIN = window.location.origin
+
+/** Pretend the document was served from the given path on the jsdom origin. */
+function servedFrom(path: string) {
+  vi.spyOn(document, 'baseURI', 'get').mockReturnValue(`${ORIGIN}${path}`)
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllEnvs()
+})
+
+describe('getStandaloneApiEndpoint', () => {
+  describe('production', () => {
+    // The same bundle is served from the unit's own nginx and from the controller's per-unit
+    // proxy route. These two cases are the whole reason the base is derived from the document.
+    it('targets the origin root when the unit serves its own UI', () => {
+      vi.stubEnv('VITE_UI_MODE', 'standalone')
+      vi.stubEnv('DEV', false)
+      servedFrom('/')
+
+      expect(getStandaloneApiEndpoint()).toBe(`${ORIGIN}/api`)
+    })
+
+    it('targets the unit prefix when proxied by a controller', () => {
+      vi.stubEnv('VITE_UI_MODE', 'standalone')
+      vi.stubEnv('DEV', false)
+      servedFrom(`/${UNIT_ID}/`)
+
+      expect(getStandaloneApiEndpoint()).toBe(`${ORIGIN}/${UNIT_ID}/api`)
+    })
+
+    it('ignores the hash route when deriving the endpoint', () => {
+      vi.stubEnv('VITE_UI_MODE', 'standalone')
+      vi.stubEnv('DEV', false)
+      servedFrom(`/${UNIT_ID}/#/standalone/firewall/rules`)
+
+      expect(getStandaloneApiEndpoint()).toBe(`${ORIGIN}/${UNIT_ID}/api`)
+    })
+  })
+
+  describe('development', () => {
+    it('uses the configured standalone host at the root', () => {
+      vi.stubEnv('VITE_UI_MODE', 'standalone')
+      vi.stubEnv('DEV', true)
+      vi.stubEnv('VITE_API_SCHEME', 'https')
+      vi.stubEnv('VITE_STANDALONE_API_HOST', '10.0.1.1:9090')
+      servedFrom('/')
+
+      expect(getStandaloneApiEndpoint()).toBe('https://10.0.1.1:9090/api')
+    })
+
+    // `npm run dev -- --base=/<uuid>/` against a real controller.
+    it('uses the configured controller host when served under a unit prefix', () => {
+      vi.stubEnv('VITE_UI_MODE', 'standalone')
+      vi.stubEnv('DEV', true)
+      vi.stubEnv('VITE_API_SCHEME', 'https')
+      vi.stubEnv('VITE_CONTROLLER_API_HOST', 'ctrl.example')
+      servedFrom(`/${UNIT_ID}/`)
+
+      expect(getStandaloneApiEndpoint()).toBe(`https://ctrl.example/${UNIT_ID}/api`)
+    })
+  })
+})
+
+describe('getControllerApiEndpoint', () => {
+  // Intentionally NOT derived from the deployment path: the controller API is mounted at the
+  // absolute /api by the controller's proxy even when the controller UI itself is served at /ui/.
+  it('stays at the origin root even when the UI is served under /ui/', () => {
+    vi.stubEnv('VITE_UI_MODE', 'controller')
+    vi.stubEnv('DEV', false)
+    servedFrom('/ui/')
+
+    expect(getControllerApiEndpoint()).toBe(`${ORIGIN}/api`)
+  })
+})
diff --git a/src/lib/__tests__/deployment.spec.ts b/src/lib/__tests__/deployment.spec.ts
new file mode 100644
index 000000000..8d02578a8
--- /dev/null
+++ b/src/lib/__tests__/deployment.spec.ts
@@ -0,0 +1,162 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  getProxiedUnitId,
+  getUiBasePath,
+  getUnitIdFromApiUrl,
+  isManagedByController,
+  isProxiedByController,
+  isStandaloneBuild,
+  isUnitApiResponse
+} from '@/lib/deployment'
+
+const UNIT_ID = '9f3b1c2e-4a5d-4e6f-8a9b-0c1d2e3f4a5b'
+
+/** Pretend the document was served from the given URL. */
+function servedFrom(url: string) {
+  vi.spyOn(document, 'baseURI', 'get').mockReturnValue(url)
+}
+
+function builtAs(mode: 'standalone' | 'controller') {
+  vi.stubEnv('VITE_UI_MODE', mode)
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllEnvs()
+})
+
+describe('getUiBasePath', () => {
+  it('is / at the site root', () => {
+    servedFrom('https://unit.example/')
+    expect(getUiBasePath()).toBe('/')
+  })
+
+  it('is the unit prefix when proxied by a controller', () => {
+    servedFrom(`https://ctrl.example/${UNIT_ID}/`)
+    expect(getUiBasePath()).toBe(`/${UNIT_ID}/`)
+  })
+
+  it('ignores the hash, so route changes cannot move the base path', () => {
+    servedFrom(`https://ctrl.example/${UNIT_ID}/#/standalone/system/ssh`)
+    expect(getUiBasePath()).toBe(`/${UNIT_ID}/`)
+  })
+
+  it('normalises an explicit index.html to its directory', () => {
+    servedFrom(`https://ctrl.example/${UNIT_ID}/index.html`)
+    expect(getUiBasePath()).toBe(`/${UNIT_ID}/`)
+  })
+
+  // Documents the limitation the controller's addslash redirect exists to prevent: without the
+  // slash the browser resolves relative URLs against the origin root, so the API base would
+  // silently become the controller's instead of the unit's. Not fixable here — by the time this
+  // runs the browser has already resolved the asset URLs.
+  it('degrades to / when the document path has no trailing slash', () => {
+    servedFrom(`https://ctrl.example/${UNIT_ID}`)
+    expect(getUiBasePath()).toBe('/')
+  })
+})
+
+describe('isProxiedByController', () => {
+  it('is false for the standalone bundle at the root', () => {
+    builtAs('standalone')
+    servedFrom('https://unit.example/')
+    expect(isProxiedByController()).toBe(false)
+    expect(getProxiedUnitId()).toBe('')
+  })
+
+  it('is true for the standalone bundle under a unit prefix', () => {
+    builtAs('standalone')
+    servedFrom(`https://ctrl.example/${UNIT_ID}/`)
+    expect(isProxiedByController()).toBe(true)
+    expect(getProxiedUnitId()).toBe(UNIT_ID)
+  })
+
+  // The controller UI is served at both / and /ui/. Without the build-mode gate, /ui/ would be
+  // read as a unit id and the controller would start calling /ui/api.
+  it('is false for the controller bundle served at /ui/', () => {
+    builtAs('controller')
+    servedFrom('https://ctrl.example/ui/')
+    expect(isProxiedByController()).toBe(false)
+    expect(getProxiedUnitId()).toBe('')
+  })
+})
+
+describe('isManagedByController', () => {
+  it('is false only for the standalone bundle at the root', () => {
+    builtAs('standalone')
+    servedFrom('https://unit.example/')
+    expect(isManagedByController()).toBe(false)
+  })
+
+  it('is true for the proxied standalone bundle', () => {
+    builtAs('standalone')
+    servedFrom(`https://ctrl.example/${UNIT_ID}/`)
+    expect(isManagedByController()).toBe(true)
+  })
+
+  it('is true for the controller bundle, which only ever renders units embedded', () => {
+    builtAs('controller')
+    servedFrom('https://ctrl.example/')
+    expect(isManagedByController()).toBe(true)
+  })
+})
+
+describe('isStandaloneBuild', () => {
+  it('reflects VITE_UI_MODE and nothing else', () => {
+    builtAs('standalone')
+    servedFrom(`https://ctrl.example/${UNIT_ID}/`)
+    expect(isStandaloneBuild()).toBe(true)
+
+    builtAs('controller')
+    expect(isStandaloneBuild()).toBe(false)
+  })
+})
+
+describe('isUnitApiResponse', () => {
+  it('accepts any JSON reply, including an unauthenticated one', () => {
+    expect(isUnitApiResponse('application/json')).toBe(true)
+    expect(isUnitApiResponse('application/json; charset=utf-8')).toBe(true)
+  })
+
+  // While a unit is down, the controller's catch-all answers with HTTP 200 and HTML. Treating
+  // that as "the unit is back" would reload the controller's SPA into the unit's tab.
+  it('rejects the controller catch-all answering for a down unit', () => {
+    expect(isUnitApiResponse('text/html')).toBe(false)
+    expect(isUnitApiResponse('text/html; charset=UTF-8')).toBe(false)
+  })
+
+  it('rejects a missing content type', () => {
+    expect(isUnitApiResponse(null)).toBe(false)
+    expect(isUnitApiResponse('')).toBe(false)
+  })
+})
+
+describe('getUnitIdFromApiUrl', () => {
+  it('extracts the unit id from an absolute per-unit ubus URL', () => {
+    expect(getUnitIdFromApiUrl(`https://ctrl.example/${UNIT_ID}/api/ubus/call`)).toBe(UNIT_ID)
+  })
+
+  it('extracts the unit id from a relative per-unit URL', () => {
+    expect(getUnitIdFromApiUrl(`/${UNIT_ID}/api/ubus/call`)).toBe(UNIT_ID)
+  })
+
+  it('handles per-unit endpoints other than ubus', () => {
+    expect(getUnitIdFromApiUrl(`https://ctrl.example/${UNIT_ID}/api/refresh`)).toBe(UNIT_ID)
+  })
+
+  it('returns undefined when there is no unit segment', () => {
+    expect(getUnitIdFromApiUrl('https://unit.example/api/ubus/call')).toBeUndefined()
+    expect(getUnitIdFromApiUrl('/api/ubus/call')).toBeUndefined()
+  })
+
+  // The regex this replaced returned null for these and then threw on `.length`, inside a
+  // response interceptor, which swallowed the error that triggered it.
+  it('returns undefined instead of throwing on unexpected input', () => {
+    expect(getUnitIdFromApiUrl('')).toBeUndefined()
+    expect(getUnitIdFromApiUrl('not a url')).toBeUndefined()
+    expect(getUnitIdFromApiUrl('https://ctrl.example/')).toBeUndefined()
+  })
+})
diff --git a/src/lib/__tests__/storage.spec.ts b/src/lib/__tests__/storage.spec.ts
new file mode 100644
index 000000000..87b281939
--- /dev/null
+++ b/src/lib/__tests__/storage.spec.ts
@@ -0,0 +1,110 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { getPreferencesScope, getScopedStorageKey, getSessionStorageKey } from '@/lib/storage'
+
+const UNIT_A = '9f3b1c2e-4a5d-4e6f-8a9b-0c1d2e3f4a5b'
+const UNIT_B = '1a2b3c4d-5e6f-4a7b-8c9d-0e1f2a3b4c5d'
+
+function servedFrom(path: string) {
+  vi.spyOn(document, 'baseURI', 'get').mockReturnValue(`${window.location.origin}${path}`)
+}
+
+function builtAs(mode: 'standalone' | 'controller') {
+  vi.stubEnv('VITE_UI_MODE', mode)
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllEnvs()
+})
+
+describe('getSessionStorageKey', () => {
+  it('is the plain key when the unit serves its own UI', () => {
+    builtAs('standalone')
+    servedFrom('/')
+
+    expect(getSessionStorageKey()).toBe('standaloneLoginInfo')
+  })
+
+  // This is the handoff contract: the controller writes unit-<uuid> before opening the tab, and
+  // the proxied UI must read back that exact key rather than prompting for a login.
+  it('is the controller handoff key when proxied', () => {
+    builtAs('standalone')
+    servedFrom(`/${UNIT_A}/`)
+
+    expect(getSessionStorageKey()).toBe(`unit-${UNIT_A}`)
+  })
+
+  // The controller bundle's legacy embedded route has the unit as a route param, not a path
+  // prefix, so it has to pass the id in explicitly — otherwise it would write the wrong key.
+  it('uses an explicitly passed unit id, for the legacy embedded route', () => {
+    builtAs('controller')
+    servedFrom('/')
+
+    expect(getSessionStorageKey(UNIT_A)).toBe(`unit-${UNIT_A}`)
+  })
+
+  it('falls back to the plain key when the controller bundle has no unit in scope', () => {
+    builtAs('controller')
+    servedFrom('/')
+
+    expect(getSessionStorageKey(undefined)).toBe('standaloneLoginInfo')
+    expect(getSessionStorageKey('')).toBe('standaloneLoginInfo')
+  })
+
+  it('keeps two proxied units apart', () => {
+    builtAs('standalone')
+
+    servedFrom(`/${UNIT_A}/`)
+    const keyA = getSessionStorageKey()
+    servedFrom(`/${UNIT_B}/`)
+    const keyB = getSessionStorageKey()
+
+    expect(keyA).not.toBe(keyB)
+  })
+})
+
+describe('getScopedStorageKey', () => {
+  it('leaves the key alone at the root', () => {
+    builtAs('standalone')
+    servedFrom('/')
+
+    expect(getScopedStorageKey('standaloneUsername')).toBe('standaloneUsername')
+  })
+
+  it('scopes the key to the unit when proxied', () => {
+    builtAs('standalone')
+    servedFrom(`/${UNIT_A}/`)
+
+    expect(getScopedStorageKey('standaloneUsername')).toBe(`unit-${UNIT_A}.standaloneUsername`)
+  })
+})
+
+describe('getPreferencesScope', () => {
+  it('leaves the username alone at the root', () => {
+    builtAs('standalone')
+    servedFrom('/')
+
+    expect(getPreferencesScope('root')).toBe('root')
+  })
+
+  // Both units authenticate as root, so without scoping they would share preferences-root and
+  // leak theme, locale and menu state into each other.
+  it('scopes the username per unit when proxied', () => {
+    builtAs('standalone')
+
+    servedFrom(`/${UNIT_A}/`)
+    expect(getPreferencesScope('root')).toBe(`${UNIT_A}:root`)
+    servedFrom(`/${UNIT_B}/`)
+    expect(getPreferencesScope('root')).toBe(`${UNIT_B}:root`)
+  })
+
+  it('leaves the controller admin unscoped', () => {
+    builtAs('controller')
+    servedFrom('/')
+
+    expect(getPreferencesScope('admin')).toBe('admin')
+  })
+})
diff --git a/src/lib/config.ts b/src/lib/config.ts
index fbdc104b2..fe91efbce 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -2,36 +2,47 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import { useUnitsStore } from '@/stores/controller/units'
-
-export const isStandaloneMode = () => {
-  return import.meta.env.VITE_UI_MODE === 'standalone'
-}
-
+import { getUiBasePath, isProxiedByController, isStandaloneBuild } from '@/lib/deployment'
+
+export { isStandaloneBuild } from '@/lib/deployment'
+
+/**
+ * API endpoint of the unit this UI is managing.
+ *
+ * The standalone bundle is served from two places and must reach the same unit from both:
+ * from the unit's own nginx at `/`, and through the controller's per-unit proxy route at
+ * `/<uuid>/`. Deriving the base from the document path covers both without the UI having to
+ * know which one it is in — `/api` at the root, `/<uuid>/api` behind the proxy.
+ */
 export const getStandaloneApiEndpoint = () => {
-  if (!isStandaloneMode()) {
-    // a controller is managing this unit
+  if (!isStandaloneBuild()) {
+    // the controller bundle rendering the legacy embedded /controller/manage/:unitId route
     return getUnitManagementApiEndpoint()
   }
 
   if (import.meta.env.DEV) {
     // standalone development environment
-
     const apiScheme = import.meta.env.VITE_API_SCHEME
-    const standaloneApiHost = import.meta.env.VITE_STANDALONE_API_HOST
-    return `${apiScheme}://${standaloneApiHost}/api`
-  } else {
-    // standalone production environment
-
-    return (
-      window.location.protocol +
-      '//' +
-      window.location.hostname +
-      (window.location.port ? ':' + window.location.port : '') +
-      '/api'
-    )
+
+    if (isProxiedByController()) {
+      // `npm run dev -- --base=/<uuid>/` against a real controller
+      return `${apiScheme}://${import.meta.env.VITE_CONTROLLER_API_HOST}${getUiBasePath()}api`
+    }
+    return `${apiScheme}://${import.meta.env.VITE_STANDALONE_API_HOST}/api`
   }
+
+  // standalone production environment
+  return `${window.location.origin}${getUiBasePath()}api`
 }
 
+/**
+ * API endpoint of the controller itself.
+ *
+ * Deliberately origin-based rather than derived from the deployment path: the controller API is
+ * mounted at the absolute `/api` by the controller's proxy, regardless of whether the controller
+ * UI is served at `/` or at `/ui/`. Serving the controller itself under a path prefix is not
+ * supported.
+ */
 export const getControllerApiEndpoint = () => {
   if (import.meta.env.DEV) {
     // controller development environment
@@ -39,19 +50,19 @@ export const getControllerApiEndpoint = () => {
     const apiScheme = import.meta.env.VITE_API_SCHEME
     const controllerApiHost = import.meta.env.VITE_CONTROLLER_API_HOST
     return `${apiScheme}://${controllerApiHost}/api`
-  } else {
-    // controller production environment
-
-    return (
-      window.location.protocol +
-      '//' +
-      window.location.hostname +
-      (window.location.port ? ':' + window.location.port : '') +
-      '/api'
-    )
   }
+
+  // controller production environment
+  return `${window.location.origin}/api`
 }
 
+/**
+ * API endpoint of a specific unit, addressed through the controller's proxy.
+ *
+ * Only used by the controller bundle: either for its controller-native per-unit calls, or by the
+ * legacy embedded route that renders StandaloneApp inside the controller shell. The proxied
+ * standalone bundle goes through `getStandaloneApiEndpoint()` instead.
+ */
 export const getUnitManagementApiEndpoint = (unitId?: string) => {
   const unitsStore = useUnitsStore()
   // in case of "Open unit" unitsStore.unitId is used
@@ -63,15 +74,9 @@ export const getUnitManagementApiEndpoint = (unitId?: string) => {
     const apiScheme = import.meta.env.VITE_API_SCHEME
     const controllerApiHost = import.meta.env.VITE_CONTROLLER_API_HOST
     return `${apiScheme}://${controllerApiHost}/${currentUnitId}/api`
-  } else {
-    return (
-      window.location.protocol +
-      '//' +
-      window.location.hostname +
-      (window.location.port ? ':' + window.location.port : '') +
-      `/${currentUnitId}/api`
-    )
   }
+
+  return `${window.location.origin}/${currentUnitId}/api`
 }
 
 export const getProductName = () => {
diff --git a/src/lib/deployment.ts b/src/lib/deployment.ts
new file mode 100644
index 000000000..0345d1700
--- /dev/null
+++ b/src/lib/deployment.ts
@@ -0,0 +1,67 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+/**
+ * Where this bundle is deployed. Two separate questions: which app was built (VITE_UI_MODE), and
+ * whether it is being served under a controller's path prefix (the document path).
+ *
+ * Imports nothing on purpose — used by lib/config.ts and lib/standalone/ubus.ts, which must not
+ * pull in a pinia store.
+ */
+
+/** Which bundle was built. Says nothing about where it is served from. */
+export const isStandaloneBuild = (): boolean => import.meta.env.VITE_UI_MODE === 'standalone'
+
+/**
+ * Deployment path, always slash-terminated: `/` on the unit's own nginx, `/<uuid>/` when proxied
+ * by a controller. From `document.baseURI` so `/<uuid>/index.html` normalises and the hash route
+ * cannot change it. Do not add a `<base>` tag to index.html.
+ *
+ * Only correct when the document path ends in a slash — otherwise this returns `/` and the unit's
+ * UI would call the controller's API with the unit's token. Unfixable here (the browser has
+ * already resolved the asset URLs), so it is guaranteed server-side by `m<uuid>-addslash` in
+ * nethsecurity-controller's `vpn/handle-connection`. Traefik has no such redirect by default.
+ */
+export const getUiBasePath = (): string => {
+  const path = new URL('.', document.baseURI).pathname
+  return path.endsWith('/') ? path : `${path}/`
+}
+
+/** Gated on the build so the controller UI at /ui/ does not read `ui` as a unit id. */
+export const isProxiedByController = (): boolean => isStandaloneBuild() && getUiBasePath() !== '/'
+
+/** Unit id from the deployment path, or '' when not proxied. */
+export const getProxiedUnitId = (): string =>
+  isProxiedByController() ? (getUiBasePath().split('/')[1] ?? '') : ''
+
+/**
+ * Driving a unit for a controller: proxied under /<uuid>/, or the controller bundle rendering the
+ * legacy embedded route. Use for UX affordances; use isStandaloneBuild() for code paths.
+ */
+export const isManagedByController = (): boolean => !isStandaloneBuild() || isProxiedByController()
+
+/**
+ * Whether a probe response came from the unit's api-server. Status alone lies: while the unit is
+ * down the controller's catch-all answers with 200 and HTML. Any JSON counts, including a 401 —
+ * it proves the api-server is up.
+ */
+export const isUnitApiResponse = (contentType: string | null): boolean =>
+  contentType?.includes('application/json') ?? false
+
+/**
+ * Unit id from a per-unit API URL: `https://ctrl/<uuid>/api/ubus/call` -> `<uuid>`. undefined when
+ * there is no unit segment. A parse, not a regex — the regex this replaced returned null on other
+ * shapes and then threw inside the interceptor, swallowing the original error.
+ */
+export const getUnitIdFromApiUrl = (url: string): string | undefined => {
+  let pathname: string
+  try {
+    pathname = new URL(url, window.location.origin).pathname
+  } catch {
+    return undefined
+  }
+
+  const segments = pathname.split('/').filter(Boolean)
+  const apiIndex = segments.lastIndexOf('api')
+  return apiIndex > 0 ? segments[apiIndex - 1] : undefined
+}
diff --git a/src/lib/router.ts b/src/lib/router.ts
index d0096203a..3c8d3c91d 100644
--- a/src/lib/router.ts
+++ b/src/lib/router.ts
@@ -2,7 +2,7 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import { useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
-import { isStandaloneMode } from './config'
+import { isStandaloneBuild } from './config'
 
 /**
  * Used in <router-link> elements of standalone UI to build the full path of destination page. 'route' input param is sometimes needed (e.g. from goTo() function in StandaloneDashboardView.vue)
@@ -13,10 +13,15 @@ export const getStandaloneRoutePrefix = (route?: RouteLocationNormalizedLoaded)
     route = useRoute()
   }
 
-  if (isStandaloneMode()) {
-    // standalone
+  if (isStandaloneBuild()) {
+    // Standalone, whether served by the unit itself or proxied by a controller at /<uuid>/.
+    // Deliberately NOT unit-aware: the unit id lives in the URL *path*, and the router uses hash
+    // history with no explicit base, so it derives that base from location.pathname. Generated
+    // links therefore come out as /<uuid>/#/standalone/... on their own. Making this
+    // unit-aware would double the prefix.
     return `/standalone`
   } else {
+    // the controller bundle rendering the legacy embedded route, where the unit is a route param
     // a controller is managing this unit
     return `/controller/manage/${route.params.unitId}`
   }
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
new file mode 100644
index 000000000..f13fb7335
--- /dev/null
+++ b/src/lib/storage.ts
@@ -0,0 +1,50 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getPreference, savePreference } from '@nethesis/vue-components'
+import { getProxiedUnitId, isProxiedByController } from '@/lib/deployment'
+
+/**
+ * Local storage keys, scoped to the deployment.
+ *
+ * localStorage is partitioned by origin, not path, so when a controller proxies unit UIs at
+ * `/<uuid>/` every unit and the controller share one namespace — unit A reads back unit B's keys.
+ * Two unit tabs at once is the normal workflow.
+ *
+ * All no-ops unless the standalone bundle is proxied, so call sites are safe to swap wholesale.
+ */
+
+/**
+ * Session key: `standaloneLoginInfo` at the root, `unit-<uuid>` when a controller is involved.
+ * The `unit-<uuid>` form is the handoff contract — the same key the controller writes in
+ * `retrieveAndSaveUnitToken()`.
+ *
+ * @param managedUnitId for the controller bundle's embedded route, where the unit is a route param
+ *   rather than a path prefix. Wins over the path.
+ */
+export const getSessionStorageKey = (managedUnitId?: string): string => {
+  const unitId = managedUnitId || (isProxiedByController() ? getProxiedUnitId() : '')
+  return unitId ? `unit-${unitId}` : 'standaloneLoginInfo'
+}
+
+/** Scopes any other key to the unit, so N proxied unit UIs on one origin cannot collide. */
+export const getScopedStorageKey = (key: string): string =>
+  isProxiedByController() ? `unit-${getProxiedUnitId()}.${key}` : key
+
+/**
+ * Scopes the username preferences are keyed on: two units both logged in as `root` would otherwise
+ * share `preferences-root`, leaking theme, locale and menu state between them.
+ */
+export const getPreferencesScope = (username: string): string =>
+  isProxiedByController() ? `${getProxiedUnitId()}:${username}` : username
+
+/** `savePreference`, scoped to the deployment. Use instead of the library function directly. */
+export const saveUiPreference = (
+  preferenceName: string,
+  preferenceValue: unknown,
+  username: string
+): void => savePreference(preferenceName, preferenceValue, getPreferencesScope(username))
+
+/** `getPreference`, scoped to the deployment. Use instead of the library function directly. */
+export const getUiPreference = (preferenceName: string, username: string) =>
+  getPreference(preferenceName, getPreferencesScope(username))
diff --git a/src/lib/twoFa.ts b/src/lib/twoFa.ts
index 7cde7b82f..28af0c516 100644
--- a/src/lib/twoFa.ts
+++ b/src/lib/twoFa.ts
@@ -2,15 +2,15 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import axios from 'axios'
-import { getControllerApiEndpoint, getStandaloneApiEndpoint, isStandaloneMode } from '@/lib/config'
+import { getControllerApiEndpoint, getStandaloneApiEndpoint, isStandaloneBuild } from '@/lib/config'
 import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
 import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
 import { getValidationErrorsFromAxiosError } from '@/lib/validation'
 import { ValidationError } from '@/lib/standalone/ubus'
 
 export async function getTwoFaStatus() {
-  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
-  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  const loginStore = isStandaloneBuild() ? useStandaloneLoginStore() : useControllerLoginStore()
+  const endpoint = isStandaloneBuild() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
   const res = await axios.get(`${endpoint}/2fa`, {
     headers: {
       Authorization: `Bearer ${loginStore.token}`
@@ -20,8 +20,8 @@ export async function getTwoFaStatus() {
 }
 
 export async function getTwoFaQrCode() {
-  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
-  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  const loginStore = isStandaloneBuild() ? useStandaloneLoginStore() : useControllerLoginStore()
+  const endpoint = isStandaloneBuild() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
   const res = await axios.get(`${endpoint}/2fa/qr-code`, {
     headers: {
       Authorization: `Bearer ${loginStore.token}`
@@ -31,7 +31,7 @@ export async function getTwoFaQrCode() {
 }
 
 export async function verifyTwoFaOtp(username: string, token: string, otp: string) {
-  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  const endpoint = isStandaloneBuild() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
   try {
     const res = await axios.post(`${endpoint}/2fa/otp-verify`, {
       otp,
@@ -52,8 +52,8 @@ export async function verifyTwoFaOtp(username: string, token: string, otp: strin
 }
 
 export async function revokeTwoFa() {
-  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
-  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  const loginStore = isStandaloneBuild() ? useStandaloneLoginStore() : useControllerLoginStore()
+  const endpoint = isStandaloneBuild() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
   try {
     const res = await axios.delete(`${endpoint}/2fa`, {
       headers: {
diff --git a/src/router/index.ts b/src/router/index.ts
index 6587d01dc..5d1192d09 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,8 @@
 //  Copyright (C) 2024 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import { isStandaloneMode } from '@/lib/config'
+import { isStandaloneBuild } from '@/lib/config'
+import { isManagedByController } from '@/lib/deployment'
 import { useSetupWizardStore } from '@/stores/standalone/setupWizard'
 import { createRouter, createWebHashHistory } from 'vue-router'
 
@@ -238,7 +239,7 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      redirect: isStandaloneMode() ? '/standalone' : '/controller'
+      redirect: isStandaloneBuild() ? '/standalone' : '/controller'
     },
     // standalone
     {
@@ -293,8 +294,9 @@ const router = createRouter({
 
 // redirect to wizard page if not completed
 router.beforeEach(async (to) => {
-  if (!isStandaloneMode()) {
-    // do not check wizard in controller mode
+  if (isManagedByController()) {
+    // a unit reached through a controller is already set up, and trapping it in the wizard would
+    // leave the operator with no way out
     return true
   }
   const setupWizardStore = useSetupWizardStore()
diff --git a/src/stores/controller/units.ts b/src/stores/controller/units.ts
index 362a37460..e4702890c 100644
--- a/src/stores/controller/units.ts
+++ b/src/stores/controller/units.ts
@@ -34,6 +34,11 @@ interface UnitInfo {
   unit_name: string
   version: string
   api_version: string
+  /**
+   * ns-ui package version. Absent on units whose ns-api predates it — which is exactly what the
+   * direct-serve gate needs, since those units cannot serve their UI under a path prefix either.
+   */
+  ui_version?: string
   version_update: string
   scheduled_update: number
   description?: string
diff --git a/src/stores/notifications.ts b/src/stores/notifications.ts
index 19a53862c..bfe6dd1b8 100644
--- a/src/stores/notifications.ts
+++ b/src/stores/notifications.ts
@@ -8,7 +8,7 @@ import { type NeNotification } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
 import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
-import { isStandaloneMode } from '@/lib/config'
+import { isStandaloneBuild } from '@/lib/config'
 import { getUbusReproductionCommand } from '@/lib/axiosErrorCommand'
 
 const NOTIFICATIONS_LIMIT = 30
@@ -128,7 +128,7 @@ export const useNotificationsStore = defineStore('notifications', () => {
 
   const copyCurlToClipboard = (notification: NeNotification) => {
     let token
-    if (isStandaloneMode()) {
+    if (isStandaloneBuild()) {
       token = useStandaloneLoginStore().token
     } else {
       token = useControllerLoginStore().token
diff --git a/src/stores/standalone/standaloneLogin.ts b/src/stores/standalone/standaloneLogin.ts
index c5b4ea15e..8c83c0e4f 100644
--- a/src/stores/standalone/standaloneLogin.ts
+++ b/src/stores/standalone/standaloneLogin.ts
@@ -8,12 +8,14 @@ import axios from 'axios'
 import { deleteFromStorage, saveToStorage, getJsonFromStorage } from '@nethesis/vue-components'
 import { useRoute, useRouter } from 'vue-router'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
-import { getProductName, getStandaloneApiEndpoint, isStandaloneMode } from '@/lib/config'
+import { getProductName, getStandaloneApiEndpoint, isStandaloneBuild } from '@/lib/config'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useThemeStore } from '../theme'
 import { ubusCall } from '@/lib/standalone/ubus'
 import { useTitle } from '@vueuse/core'
 import { useSetupWizardStore } from './setupWizard'
+import { getSessionStorageKey } from '@/lib/storage'
+import { jwtDecode } from 'jwt-decode'
 
 export const TOKEN_REFRESH_INTERVAL = 1000 * 60 * 30 // half an hour
 
@@ -32,14 +34,51 @@ export const useLoginStore = defineStore('standaloneLogin', () => {
     return !isEmpty(username.value)
   })
 
+  /**
+   * localStorage key holding this session. Covers all three deployments: the unit serving its own
+   * UI, the unit proxied by a controller under /<uuid>/, and the controller bundle rendering the
+   * legacy embedded route (where the unit id is a route param, not a path prefix).
+   */
+  const sessionStorageKey = () =>
+    getSessionStorageKey(isStandaloneBuild() ? undefined : (route.params.unitId as string))
+
+  const saveSession = (user: string, jwtToken: string, refreshedTime: number) => {
+    saveToStorage(sessionStorageKey(), {
+      username: user,
+      token: jwtToken,
+      tokenRefreshedTime: refreshedTime
+    })
+  }
+
   const loadUserFromStorage = () => {
-    const loginInfo = getJsonFromStorage('standaloneLoginInfo')
+    const key = sessionStorageKey()
+    const loginInfo = getJsonFromStorage(key)
 
-    if (loginInfo) {
-      username.value = loginInfo.username
-      token.value = loginInfo.token
-      tokenRefreshedTime.value = loginInfo.tokenRefreshedTime
+    if (!loginInfo?.token) {
+      return
+    }
+
+    // A session handed over by a controller was minted by retrieveAndSaveUnitToken(), which does
+    // not know the unit's username, so recover it from the token itself.
+    let claims: { id?: string; exp?: number }
+    try {
+      claims = jwtDecode(loginInfo.token)
+    } catch (err) {
+      console.warn('[login]', 'discarding an unreadable stored session', err)
+      deleteFromStorage(key)
+      return
+    }
+
+    if (claims.exp && claims.exp * 1000 <= Date.now()) {
+      // Discard rather than load: an expired token would 401 on the first call, and in proxied
+      // mode there is no way to re-mint it from here.
+      deleteFromStorage(key)
+      return
     }
+
+    username.value = loginInfo.username ?? claims.id ?? ''
+    token.value = loginInfo.token
+    tokenRefreshedTime.value = loginInfo.tokenRefreshedTime ?? 0
   }
 
   const login = async (user: string, password: string) => {
@@ -53,12 +92,7 @@ export const useLoginStore = defineStore('standaloneLogin', () => {
   }
 
   const loginSuccessful = async (user: string, jwtToken: string) => {
-    const loginInfo = {
-      username: user,
-      token: jwtToken,
-      tokenRefreshedTime: tokenRefreshedTime.value
-    }
-    saveToStorage('standaloneLoginInfo', loginInfo)
+    saveSession(user, jwtToken, tokenRefreshedTime.value)
 
     username.value = user
     token.value = jwtToken
@@ -70,16 +104,22 @@ export const useLoginStore = defineStore('standaloneLogin', () => {
   }
 
   const logout = async () => {
-    await axios.post(
-      `${getStandaloneApiEndpoint()}/logout`,
-      {},
-      {
-        headers: {
-          Authorization: `Bearer ${token.value}`
+    try {
+      await axios.post(
+        `${getStandaloneApiEndpoint()}/logout`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${token.value}`
+          }
         }
-      }
-    )
-    deleteFromStorage('standaloneLoginInfo')
+      )
+    } catch (err) {
+      // The token is often already dead by the time we get here (expired session, unit rebooted).
+      // Clearing local state is what actually matters, so never let this reject.
+      console.warn('[login]', 'logout request failed, clearing the local session anyway', err)
+    }
+    deleteFromStorage(sessionStorageKey())
     username.value = ''
     token.value = ''
     tokenRefreshedTime.value = 0
@@ -101,25 +141,9 @@ export const useLoginStore = defineStore('standaloneLogin', () => {
       const jwtToken = res.data.token
       const refreshedTime = new Date().getTime()
 
-      if (isStandaloneMode()) {
-        const loginInfo = {
-          username: username.value,
-          token: jwtToken,
-          tokenRefreshedTime: refreshedTime
-        }
-        saveToStorage('standaloneLoginInfo', loginInfo)
-      } else {
-        // a controller is managing this unit
-        const unit = route.params.unitId as string
-
-        const unitLoginInfo = {
-          unit,
-          token: jwtToken,
-          tokenRefreshedTime: refreshedTime
-        }
-
-        saveToStorage(`unit-${unit}`, unitLoginInfo)
-      }
+      // One write for all three deployments: sessionStorageKey() resolves to standaloneLoginInfo
+      // at the root and to unit-<uuid> when a controller is involved.
+      saveSession(username.value, jwtToken, refreshedTime)
       token.value = jwtToken
       tokenRefreshedTime.value = refreshedTime
       return jwtToken
@@ -190,6 +214,7 @@ export const useLoginStore = defineStore('standaloneLogin', () => {
     isLoggedIn,
     isSessionExpired,
     loadUserFromStorage,
+    saveSession,
     login,
     logout,
     setUsername,
diff --git a/src/stores/standalone/sudo.ts b/src/stores/standalone/sudo.ts
index d99332c80..2edb47a0b 100644
--- a/src/stores/standalone/sudo.ts
+++ b/src/stores/standalone/sudo.ts
@@ -3,7 +3,6 @@ import { ref, watchEffect } from 'vue'
 import { useLoginStore } from '@/stores/standalone/standaloneLogin.ts'
 import axios from 'axios'
 import { getStandaloneApiEndpoint } from '@/lib/config.ts'
-import { saveToStorage } from '@nethesis/vue-components'
 import { getValidationErrorsFromAxiosError } from '@/lib/validation.ts'
 
 export class UnauthorizedAction extends Error {
@@ -51,11 +50,7 @@ export const useSudoStore = defineStore('sudo', () => {
         // TODO: tidy up this code with loginStore
         loginStore.token = res.data.data.token
         loginStore.tokenRefreshedTime = new Date().getTime()
-        saveToStorage('standaloneLoginInfo', {
-          username: loginStore.username,
-          token: loginStore.token,
-          tokenRefreshedTime: loginStore.tokenRefreshedTime
-        })
+        loginStore.saveSession(loginStore.username, loginStore.token, loginStore.tokenRefreshedTime)
         askingSudo.value = false
         sudoEnabled.value = true
       })
diff --git a/src/stores/theme.ts b/src/stores/theme.ts
index f27edd99a..22ca6692f 100644
--- a/src/stores/theme.ts
+++ b/src/stores/theme.ts
@@ -3,10 +3,11 @@
 
 import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
-import { getPreference, getStringFromStorage, savePreference } from '@nethesis/vue-components'
+import { getStringFromStorage } from '@nethesis/vue-components'
 import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
 import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
-import { isStandaloneMode } from '@/lib/config'
+import { isStandaloneBuild } from '@/lib/config'
+import { getScopedStorageKey, getUiPreference, saveUiPreference } from '@/lib/storage'
 
 type ThemeType = 'light' | 'dark' | 'system'
 
@@ -33,7 +34,7 @@ export const useThemeStore = defineStore('theme', () => {
   function getUsername() {
     let username
 
-    if (isStandaloneMode()) {
+    if (isStandaloneBuild()) {
       username = useStandaloneLoginStore().username
     } else {
       username = useControllerLoginStore().username
@@ -41,8 +42,8 @@ export const useThemeStore = defineStore('theme', () => {
 
     if (!username) {
       // user is not logged, try reading remembered username from local storage
-      if (isStandaloneMode()) {
-        username = getStringFromStorage('standaloneUsername') || 'root'
+      if (isStandaloneBuild()) {
+        username = getStringFromStorage(getScopedStorageKey('standaloneUsername')) || 'root'
       } else {
         username = getStringFromStorage('controllerUsername') || 'admin'
       }
@@ -57,7 +58,7 @@ export const useThemeStore = defineStore('theme', () => {
     const username = getUsername()
 
     if (username) {
-      savePreference('theme', newTheme, username)
+      saveUiPreference('theme', newTheme, username)
     }
 
     // add or remove dark class to document
@@ -102,7 +103,7 @@ export const useThemeStore = defineStore('theme', () => {
     let theme = 'system' as ThemeType
 
     if (username) {
-      theme = getPreference('theme', username)
+      theme = getUiPreference('theme', username)
     }
     setTheme(theme)
   }
diff --git a/src/views/standalone/system/RebootAndShutdownView.vue b/src/views/standalone/system/RebootAndShutdownView.vue
index e75b8f058..6b4d2ddc7 100644
--- a/src/views/standalone/system/RebootAndShutdownView.vue
+++ b/src/views/standalone/system/RebootAndShutdownView.vue
@@ -5,6 +5,8 @@
 
 <script setup lang="ts">
 import { ubusCall } from '@/lib/standalone/ubus'
+import { getStandaloneApiEndpoint } from '@/lib/config'
+import { isUnitApiResponse } from '@/lib/deployment'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   NeHeading,
@@ -46,8 +48,16 @@ let pollTimeoutId: ReturnType<typeof setTimeout> | null = null
 
 async function checkServerAvailability() {
   try {
-    const response = await fetch('/', { method: 'HEAD' })
-    if (response.ok) {
+    // Raw fetch on purpose: this must not go through the axios interceptors, which would treat
+    // the expected 401 as a session expiry and log the user out mid-reboot.
+    const response = await fetch(`${getStandaloneApiEndpoint()}/ubus/call`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: '{}',
+      cache: 'no-store'
+    })
+
+    if (isUnitApiResponse(response.headers.get('content-type'))) {
       // Server is back online, wait a bit before reloading the page
       stopPolling()
       isServerBackOnline.value = true
diff --git a/src/views/standalone/system/SSHView.vue b/src/views/standalone/system/SSHView.vue
index f9095ca96..495f43085 100644
--- a/src/views/standalone/system/SSHView.vue
+++ b/src/views/standalone/system/SSHView.vue
@@ -8,7 +8,7 @@ import { useI18n } from 'vue-i18n'
 import SshConfig from '@/components/standalone/ssh/SshConfig.vue'
 import SshKeys from '@/components/standalone/ssh/SshKeys.vue'
 import { NeHeading } from '@nethesis/vue-components'
-import { isStandaloneMode } from '@/lib/config.ts'
+import { isManagedByController } from '@/lib/deployment'
 
 const { t } = useI18n()
 </script>
@@ -17,7 +17,8 @@ const { t } = useI18n()
   <NeHeading tag="h3" class="mb-7">{{ t('standalone.ssh.title') }}</NeHeading>
   <div class="flex max-w-3xl flex-col gap-y-8">
     <SshConfig />
-    <template v-if="isStandaloneMode()">
+    <!-- SSH keys are managed from the controller when a controller owns this unit -->
+    <template v-if="!isManagedByController()">
       <hr />
       <SshKeys />
     </template>
diff --git a/src/views/standalone/system/UpdateView.vue b/src/views/standalone/system/UpdateView.vue
index f3e39db98..4f13db8c6 100644
--- a/src/views/standalone/system/UpdateView.vue
+++ b/src/views/standalone/system/UpdateView.vue
@@ -12,6 +12,7 @@ import { useI18n } from 'vue-i18n'
 import FormLayout from '@/components/standalone/FormLayout.vue'
 import ScheduleUpdateDrawer from '@/components/standalone/update/ScheduleUpdateDrawer.vue'
 import UploadImageDrawer from '@/components/standalone/update/UploadImageDrawer.vue'
+import InstalledPackagesModal from '@/components/standalone/update/InstalledPackagesModal.vue'
 import { computed, onMounted, ref } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import UpdatePackagesModal from '@/components/standalone/update/UpdatePackagesModal.vue'
@@ -20,6 +21,7 @@ import { getProductName } from '@/lib/config'
 import { useNotificationsStore } from '@/stores/notifications'
 import { useSystemActionStore } from '@/stores/standalone/systemAction'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faBoxOpen } from '@fortawesome/free-solid-svg-icons'
 export type PackageUpdate = {
   package: string
   currentVersion: string
@@ -62,6 +64,7 @@ const isChangingAutomaticUpdatesSetting = ref(false)
 
 const showScheduleUpdateDrawer = ref(false)
 const showUploadImageDrawer = ref(false)
+const showInstalledPackagesModal = ref(false)
 const showConfirmCancelScheduleDrawer = ref(false)
 
 const scheduleDate = computed(() =>
@@ -241,18 +244,26 @@ onMounted(() => {
           })
         }}
       </p>
-      <NeButton
-        :disabled="isCheckingPackageUpdates || disableRemoteUpdates"
-        :loading="isCheckingPackageUpdates"
-        @click="checkPackageUpdates"
-      >
-        <template #prefix>
-          <font-awesome-icon
-            :icon="['fas', 'arrows-rotate']"
-            class="h-4 w-4"
-            aria-hidden="true" /></template
-        >{{ t('standalone.update.check_for_fixes') }}</NeButton
-      >
+      <div class="flex flex-wrap items-center gap-3">
+        <NeButton
+          :disabled="isCheckingPackageUpdates || disableRemoteUpdates"
+          :loading="isCheckingPackageUpdates"
+          @click="checkPackageUpdates"
+        >
+          <template #prefix>
+            <font-awesome-icon
+              :icon="['fas', 'arrows-rotate']"
+              class="h-4 w-4"
+              aria-hidden="true" /></template
+          >{{ t('standalone.update.check_for_fixes') }}</NeButton
+        >
+        <NeButton kind="tertiary" @click="showInstalledPackagesModal = true">
+          <template #prefix>
+            <FontAwesomeIcon :icon="faBoxOpen" class="h-4 w-4" aria-hidden="true" />
+          </template>
+          {{ t('standalone.update.installed_packages') }}
+        </NeButton>
+      </div>
       <NeInlineNotification
         v-if="noPackageUpdatesAvailable"
         kind="success"
@@ -411,5 +422,9 @@ onMounted(() => {
     @close="showUploadImageDrawer = false"
     @update-requested="onSystemUpdateStarted"
   />
+  <InstalledPackagesModal
+    :visible="showInstalledPackagesModal"
+    @close="showInstalledPackagesModal = false"
+  />
   <SystemUpdateInProgressModal :visible="isApplyingSystemUpdate" />
 </template>
diff --git a/src/views/standalone/wizard/WizardShell.vue b/src/views/standalone/wizard/WizardShell.vue
index dcbd68e53..b99293140 100644
--- a/src/views/standalone/wizard/WizardShell.vue
+++ b/src/views/standalone/wizard/WizardShell.vue
@@ -13,8 +13,8 @@ import {
 } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { computed, onMounted, ref } from 'vue'
-import { useThemeStore } from '@/stores/theme'
 import { getCompanyName } from '@/lib/config'
+import { useAppLogo } from '@/composables/useAppLogo'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { useSetupWizardStore } from '@/stores/standalone/setupWizard'
@@ -31,7 +31,7 @@ import wizardLoaderUrl from '@/assets/wizard-loader.svg'
 type Step = 'welcome' | 'password' | 'ssh' | 'port9090' | 'port443' | 'summary'
 
 const { t } = useI18n()
-const themeStore = useThemeStore()
+const { logoUrl } = useAppLogo()
 const wizardStore = useSetupWizardStore()
 const currentStep = ref<Step>('welcome')
 const steps: Step[] = ['password', 'ssh', 'port9090', 'port443', 'summary']
@@ -40,14 +40,6 @@ const loadingListInputRules = ref(false)
 const errorListInputRules = ref('')
 const errorListInputRulesDetails = ref('')
 
-const logoFilename = computed(() => {
-  if (themeStore.isLight) {
-    return 'logo_light.svg'
-  } else {
-    return 'logo_dark.svg'
-  }
-})
-
 const currentStepNum = computed(() => {
   return steps.indexOf(currentStep.value) + 1
 })
@@ -156,12 +148,7 @@ function goToPreviousStep() {
         aria-hidden="true"
       />
       <!-- logo -->
-      <img
-        :src="`/${logoFilename}`"
-        :alt="`${getCompanyName()} logo`"
-        aria-hidden="true"
-        class="mb-14 h-14"
-      />
+      <img :src="logoUrl" :alt="`${getCompanyName()} logo`" aria-hidden="true" class="mb-14 h-14" />
       <p>{{ t('standalone.wizard.finish_message') }}</p>
     </div>
   </div>
@@ -176,12 +163,7 @@ function goToPreviousStep() {
       >
         <div class="space-y-6">
           <!-- logo -->
-          <img
-            class="h-10"
-            :src="`/${logoFilename}`"
-            :alt="`${getCompanyName()} logo`"
-            aria-hidden="true"
-          />
+          <img class="h-10" :src="logoUrl" :alt="`${getCompanyName()} logo`" aria-hidden="true" />
           <NeHeading tag="h4">
             {{ t('standalone.wizard.setup_wizard') }}
           </NeHeading>
diff --git a/vite.config.ts b/vite.config.ts
index 1b0608138..624b2301e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,6 +9,7 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: './',
   plugins: [
     vue(),
     vueDevTools(),
@@ -24,6 +25,11 @@ export default defineConfig({
   },
   define: {
     UI_VERSION: JSON.stringify(process.env.npm_package_version),
-    REQUIRED_API_VERSION: JSON.stringify(process.env.npm_package_config_requiredApiVersion)
+    REQUIRED_API_VERSION: JSON.stringify(process.env.npm_package_config_requiredApiVersion),
+    // First ns-ui release whose bundle can be served under a path prefix, and therefore the first
+    // one the controller can link to directly at /<uuid>/ instead of embedding its own copy.
+    MIN_UI_VERSION_FOR_DIRECT_SERVE: JSON.stringify(
+      process.env.npm_package_config_minUiVersionForDirectServe
+    )
   }
 })
