From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Thu, 30 Apr 2026 08:46:15 +0000 (+0200)
Subject: refactor(ui-web): fix audit findings — dead code, layer violations, composable extraction
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=b7dd9e71ff4e0f5bc090cd9b31d04c2e9dd09aba;p=e-mobility-charging-stations-simulator.git

refactor(ui-web): fix audit findings — dead code, layer violations, composable extraction
---

diff --git a/ui/web/src/assets/themes/catppuccin-latte.css b/ui/web/src/assets/themes/catppuccin-latte.css
index ae5cba6b..cc00f058 100644
--- a/ui/web/src/assets/themes/catppuccin-latte.css
+++ b/ui/web/src/assets/themes/catppuccin-latte.css
@@ -12,6 +12,9 @@
   --ctp-overlay1: #8c8fa1;
   --ctp-blue: #1e66f5;
   --ctp-lavender: #7287fd;
+  --ctp-green: #2e7d32;
+  --ctp-orange: #ef6c00;
+  --ctp-red: #c62828;
 
   /* Semantic */
   --color-bg: var(--ctp-base);
@@ -38,9 +41,9 @@
   --color-bg-sunken: var(--ctp-crust);
 
   /* State colors (Material 700 for light mode readability) */
-  --color-state-ok: #2e7d32;
-  --color-state-warn: #ef6c00;
-  --color-state-err: #c62828;
+  --color-state-ok: var(--ctp-green);
+  --color-state-warn: var(--ctp-orange);
+  --color-state-err: var(--ctp-red);
   --color-state-idle: var(--ctp-overlay1);
 
   color-scheme: light;
diff --git a/ui/web/src/assets/themes/sap-horizon.css b/ui/web/src/assets/themes/sap-horizon.css
index c74975d3..07950e6d 100644
--- a/ui/web/src/assets/themes/sap-horizon.css
+++ b/ui/web/src/assets/themes/sap-horizon.css
@@ -17,6 +17,9 @@
   --sap-button-border: #bcc3ca;
   --sap-button-text: #0064d9;
   --sap-button-emphasized-bg: #0070f2;
+  --sap-positive: #256f3a;
+  --sap-critical: #e76500;
+  --sap-negative: #aa0808;
   --sap-white: #fff;
 
   /* Semantic */
@@ -44,9 +47,9 @@
   --color-bg-sunken: var(--sap-hover);
 
   /* State colors (SAP Horizon palette) */
-  --color-state-ok: #256f3a;
-  --color-state-warn: #e76500;
-  --color-state-err: #aa0808;
+  --color-state-ok: var(--sap-positive);
+  --color-state-warn: var(--sap-critical);
+  --color-state-err: var(--sap-negative);
   --color-state-idle: var(--sap-label);
 
   color-scheme: light;
diff --git a/ui/web/src/assets/themes/teal-dark.css b/ui/web/src/assets/themes/teal-dark.css
index 898ad7d2..a0c75602 100644
--- a/ui/web/src/assets/themes/teal-dark.css
+++ b/ui/web/src/assets/themes/teal-dark.css
@@ -12,6 +12,9 @@
   --td-fg-muted: #78909c;
   --td-teal: #26a69a;
   --td-teal-dim: #00897b;
+  --td-green: #66bb6a;
+  --td-amber: #ffb300;
+  --td-red: #ef5350;
   --td-white: #ffffff;
 
   /* Semantic */
@@ -39,9 +42,9 @@
   --color-bg-sunken: var(--td-bg-dark);
 
   /* State colors */
-  --color-state-ok: #66bb6a;
-  --color-state-warn: #ffb300;
-  --color-state-err: #ef5350;
+  --color-state-ok: var(--td-green);
+  --color-state-warn: var(--td-amber);
+  --color-state-err: var(--td-red);
   --color-state-idle: var(--td-fg-muted);
 
   color-scheme: dark;
diff --git a/ui/web/src/assets/themes/teal-light.css b/ui/web/src/assets/themes/teal-light.css
index f26c8c11..26101016 100644
--- a/ui/web/src/assets/themes/teal-light.css
+++ b/ui/web/src/assets/themes/teal-light.css
@@ -12,6 +12,9 @@
   --tl-fg-muted: #697386;
   --tl-teal: #009688;
   --tl-teal-dim: #00796b;
+  --tl-green: #2e7d32;
+  --tl-orange: #ef6c00;
+  --tl-red: #c62828;
   --tl-white: #ffffff;
 
   /* Semantic */
@@ -39,9 +42,9 @@
   --color-bg-sunken: var(--tl-bg-active);
 
   /* State colors */
-  --color-state-ok: #2e7d32;
-  --color-state-warn: #ef6c00;
-  --color-state-err: #c62828;
+  --color-state-ok: var(--tl-green);
+  --color-state-warn: var(--tl-orange);
+  --color-state-err: var(--tl-red);
   --color-state-idle: var(--tl-fg-muted);
 
   color-scheme: light;
diff --git a/ui/web/src/assets/themes/tokyo-night-storm.css b/ui/web/src/assets/themes/tokyo-night-storm.css
index f05fe578..ce6999eb 100644
--- a/ui/web/src/assets/themes/tokyo-night-storm.css
+++ b/ui/web/src/assets/themes/tokyo-night-storm.css
@@ -12,6 +12,9 @@
   --tn-fg-muted: #8089b3;
   --tn-blue: #7aa2f7;
   --tn-accent: #3d59a1;
+  --tn-green: #66bb6a;
+  --tn-amber: #ffb300;
+  --tn-red: #ef5350;
   --tn-white: #ffffff;
 
   /* Semantic */
@@ -39,9 +42,9 @@
   --color-bg-sunken: var(--tn-bg-raised);
 
   /* State colors */
-  --color-state-ok: #66bb6a;
-  --color-state-warn: #ffb300;
-  --color-state-err: #ef5350;
+  --color-state-ok: var(--tn-green);
+  --color-state-warn: var(--tn-amber);
+  --color-state-err: var(--tn-red);
   --color-state-idle: var(--tn-fg-muted);
 
   color-scheme: dark;
diff --git a/ui/web/src/core/Constants.ts b/ui/web/src/core/Constants.ts
index e92023c9..854f43c2 100644
--- a/ui/web/src/core/Constants.ts
+++ b/ui/web/src/core/Constants.ts
@@ -1,6 +1,9 @@
+import { type SKIN_IDS } from 'ui-common'
+
 // Local UI project constants
 
 export const ASYNC_COMPONENT_DELAY_MS = 200
+export const DEFAULT_SKIN: (typeof SKIN_IDS)[number] = 'classic'
 export const ASYNC_COMPONENT_TIMEOUT_MS = 10_000
 export const EMPTY_VALUE_PLACEHOLDER = 'Ø'
 export const MAX_SKIN_ERROR_RELOADS = 2
diff --git a/ui/web/src/core/UIClient.ts b/ui/web/src/core/UIClient.ts
index c6a97d76..18ff2732 100644
--- a/ui/web/src/core/UIClient.ts
+++ b/ui/web/src/core/UIClient.ts
@@ -46,7 +46,7 @@ export class UIClient {
     return UIClient.instance
   }
 
-  public static isOCPP20x (version: OCPPVersion | undefined): boolean {
+  private static isOCPP20x (version: OCPPVersion | undefined): boolean {
     return version === OCPPVersion.VERSION_20 || version === OCPPVersion.VERSION_201
   }
 
diff --git a/ui/web/src/core/index.ts b/ui/web/src/core/index.ts
index e730115f..231af0bf 100644
--- a/ui/web/src/core/index.ts
+++ b/ui/web/src/core/index.ts
@@ -1,6 +1,7 @@
 export {
   ASYNC_COMPONENT_DELAY_MS,
   ASYNC_COMPONENT_TIMEOUT_MS,
+  DEFAULT_SKIN,
   EMPTY_VALUE_PLACEHOLDER,
   LEGACY_UI_SERVER_CONFIG_KEY,
   MAX_SKIN_ERROR_RELOADS,
@@ -22,7 +23,6 @@ export {
   useUIClient,
 } from './providers.js'
 export {
-  deleteFromLocalStorage,
   deleteLocalStorageByKeyPattern,
   getFromLocalStorage,
   getLocalStorage,
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 164b0be1..21dbacb9 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -11,6 +11,7 @@ import App from '@/App.vue'
 import {
   chargingStationsKey,
   configurationKey,
+  DEFAULT_SKIN,
   getFromLocalStorage,
   LEGACY_UI_SERVER_CONFIG_KEY,
   setToLocalStorage,
@@ -22,7 +23,6 @@ import {
 import { router } from '@/router/index.js'
 import { SKIN_STORAGE_KEY, useSkin } from '@/shared/composables/useSkin.js'
 import { DEFAULT_THEME, THEME_STORAGE_KEY, useTheme } from '@/shared/composables/useTheme.js'
-import { DEFAULT_SKIN } from '@/skins/registry.js'
 
 import 'vue-toast-notification/dist/theme-bootstrap.css'
 
diff --git a/ui/web/src/router/index.ts b/ui/web/src/router/index.ts
index b1685a20..bd4ff989 100644
--- a/ui/web/src/router/index.ts
+++ b/ui/web/src/router/index.ts
@@ -3,9 +3,8 @@ import { h } from 'vue'
 import { createRouter, createWebHistory, type RouteLocationNormalized } from 'vue-router'
 import { useToast } from 'vue-toast-notification'
 
-import { ROUTE_NAMES } from '@/core/index.js'
+import { DEFAULT_SKIN, ROUTE_NAMES } from '@/core/index.js'
 import { useSkin } from '@/shared/composables/useSkin.js'
-import { DEFAULT_SKIN } from '@/skins/registry.js'
 
 declare module 'vue-router' {
   interface RouteMeta {
diff --git a/ui/web/src/shared/components/SkinLoadError.vue b/ui/web/src/shared/components/SkinLoadError.vue
index aad03282..a60ebf80 100644
--- a/ui/web/src/shared/components/SkinLoadError.vue
+++ b/ui/web/src/shared/components/SkinLoadError.vue
@@ -11,9 +11,10 @@
 </template>
 
 <script setup lang="ts">
-import { MAX_SKIN_ERROR_RELOADS, setToLocalStorage } from '@/core/index.js'
+import { DEFAULT_SKIN, MAX_SKIN_ERROR_RELOADS, setToLocalStorage } from '@/core/index.js'
 import { SKIN_STORAGE_KEY } from '@/shared/composables/useSkin.js'
-import { DEFAULT_SKIN, skins } from '@/skins/registry.js'
+// Intentional: registry.ts is pure metadata (ids, labels, loaders) — no behavioral coupling.
+import { skins } from '@/skins/registry.js'
 
 defineEmits<{ retry: [] }>()
 
@@ -55,7 +56,7 @@ function resetToDefault (): void {
   gap: 1rem;
   min-height: 50vh;
   padding: 2rem;
-  color: var(--color-text, #e0e0e0);
+  color: var(--color-text);
   font-family: system-ui, sans-serif;
 }
 
@@ -70,6 +71,6 @@ function resetToDefault (): void {
 }
 
 .skin-load-error button:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--color-bg-hover);
 }
 </style>
diff --git a/ui/web/src/shared/components/SkinLoading.vue b/ui/web/src/shared/components/SkinLoading.vue
index bbfb70ed..05865d7f 100644
--- a/ui/web/src/shared/components/SkinLoading.vue
+++ b/ui/web/src/shared/components/SkinLoading.vue
@@ -18,7 +18,7 @@ defineOptions({ name: 'SkinLoading' })
   gap: 1rem;
   min-height: 50vh;
   padding: 2rem;
-  color: var(--color-text, #e0e0e0);
+  color: var(--color-text);
   font-family: system-ui, sans-serif;
 }
 
diff --git a/ui/web/src/shared/composables/useServerSwitch.ts b/ui/web/src/shared/composables/useServerSwitch.ts
new file mode 100644
index 00000000..66666010
--- /dev/null
+++ b/ui/web/src/shared/composables/useServerSwitch.ts
@@ -0,0 +1,125 @@
+import type { UIServerConfigurationSection } from 'ui-common'
+import type { Ref } from 'vue'
+
+import { onScopeDispose, readonly, ref } from 'vue'
+
+import {
+  getFromLocalStorage,
+  setToLocalStorage,
+  UI_SERVER_CONFIGURATION_INDEX_KEY,
+  useConfiguration,
+  useUIClient,
+} from '@/core/index.js'
+
+export interface ServerSwitchActions {
+  /** Switches the active UI server, with error rollback on connection failure. */
+  handleUIServerChange: (newIndex: number) => void
+  /** Whether a server switch operation is in progress. */
+  serverSwitchPending: Readonly<Ref<boolean>>
+}
+
+export interface ServerSwitchOptions {
+  /** Called after a successful server switch (e.g. to clear UI state). */
+  onServerSwitched?: () => void
+  /** Registers WS event listeners after connection reconfiguration. */
+  registerWSEventListeners: () => void
+  /** Unregisters WS event listeners before connection reconfiguration. */
+  unregisterWSEventListeners: () => void
+}
+
+const SERVER_SWITCH_TIMEOUT_MS = 15_000
+
+/**
+ * Composable encapsulating the UI server switch state machine.
+ *
+ * Handles optimistic connection switching with timeout-based rollback on failure.
+ * @param options - Callbacks for event listener management and switch completion
+ * @returns Server switch actions and pending state
+ */
+export function useServerSwitch (options: ServerSwitchOptions): ServerSwitchActions {
+  const $uiClient = useUIClient()
+  const $configuration = useConfiguration()
+
+  const { registerWSEventListeners, unregisterWSEventListeners } = options
+
+  const serverSwitchPending = ref(false)
+  let activeTimeoutId: ReturnType<typeof setTimeout> | undefined
+  let pendingOpenHandler: (() => void) | undefined
+  let pendingErrorHandler: (() => void) | undefined
+
+  const handleUIServerChange = (newIndex: number): void => {
+    const currentIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
+    if (newIndex === currentIndex || serverSwitchPending.value) return
+
+    const servers = $configuration.value.uiServer as UIServerConfigurationSection[]
+    if (newIndex < 0 || newIndex >= servers.length) return
+
+    serverSwitchPending.value = true
+
+    $uiClient.setConfiguration(servers[newIndex])
+    unregisterWSEventListeners()
+    registerWSEventListeners()
+
+    let settled = false
+
+    const openHandler = (): void => {
+      if (settled) return
+      settled = true
+      clearTimeout(activeTimeoutId)
+      $uiClient.unregisterWSEventListener('error', errorHandler)
+      pendingOpenHandler = undefined
+      pendingErrorHandler = undefined
+      setToLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, newIndex)
+      serverSwitchPending.value = false
+      options.onServerSwitched?.()
+    }
+
+    const errorHandler = (): void => {
+      if (settled) return
+      settled = true
+      clearTimeout(activeTimeoutId)
+      $uiClient.unregisterWSEventListener('open', openHandler)
+      pendingOpenHandler = undefined
+      pendingErrorHandler = undefined
+      serverSwitchPending.value = false
+      const previousIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
+      const rollbackServers = $configuration.value.uiServer as UIServerConfigurationSection[]
+      if (previousIndex >= 0 && previousIndex < rollbackServers.length) {
+        $uiClient.setConfiguration(rollbackServers[previousIndex])
+      }
+      unregisterWSEventListeners()
+      registerWSEventListeners()
+    }
+
+    $uiClient.registerWSEventListener('open', openHandler, { once: true })
+    $uiClient.registerWSEventListener('error', errorHandler, { once: true })
+    pendingOpenHandler = openHandler
+    pendingErrorHandler = errorHandler
+
+    activeTimeoutId = setTimeout(() => {
+      if (!settled) {
+        errorHandler()
+      }
+    }, SERVER_SWITCH_TIMEOUT_MS)
+  }
+
+  onScopeDispose(() => {
+    if (activeTimeoutId != null) {
+      clearTimeout(activeTimeoutId)
+      activeTimeoutId = undefined
+    }
+    if (pendingOpenHandler != null) {
+      $uiClient.unregisterWSEventListener('open', pendingOpenHandler)
+      pendingOpenHandler = undefined
+    }
+    if (pendingErrorHandler != null) {
+      $uiClient.unregisterWSEventListener('error', pendingErrorHandler)
+      pendingErrorHandler = undefined
+    }
+  })
+
+  return {
+    handleUIServerChange,
+    serverSwitchPending: readonly(serverSwitchPending),
+  }
+}
diff --git a/ui/web/src/shared/composables/useSimulatorControl.ts b/ui/web/src/shared/composables/useSimulatorControl.ts
index ef30d32c..30e2188c 100644
--- a/ui/web/src/shared/composables/useSimulatorControl.ts
+++ b/ui/web/src/shared/composables/useSimulatorControl.ts
@@ -1,18 +1,11 @@
-import type { UIServerConfigurationSection } from 'ui-common'
 import type { ComputedRef, Ref } from 'vue'
 
-import { computed, onScopeDispose, readonly, ref } from 'vue'
+import { computed } from 'vue'
 
-import {
-  getFromLocalStorage,
-  setToLocalStorage,
-  UI_SERVER_CONFIGURATION_INDEX_KEY,
-  useChargingStations,
-  useConfiguration,
-  useUIClient,
-} from '@/core/index.js'
+import { useChargingStations, useUIClient } from '@/core/index.js'
 import { useAsyncAction } from '@/shared/composables/useAsyncAction.js'
 import { type LayoutData } from '@/shared/composables/useLayoutData.js'
+import { useServerSwitch } from '@/shared/composables/useServerSwitch.js'
 
 export interface SimulatorControlActions {
   /** Switches the active UI server, with error rollback on connection failure. */
@@ -48,7 +41,6 @@ export function useSimulatorControl (
   options?: SimulatorControlOptions
 ): SimulatorControlActions {
   const $uiClient = useUIClient()
-  const $configuration = useConfiguration()
   const $chargingStations = useChargingStations()
 
   const { getSimulatorState, registerWSEventListeners } = layoutData
@@ -62,10 +54,12 @@ export function useSimulatorControl (
     { simulator: false },
     getSimulatorState
   )
-  const serverSwitchPending = ref(false)
-  let activeTimeoutId: ReturnType<typeof setTimeout> | undefined
-  let pendingOpenHandler: (() => void) | undefined
-  let pendingErrorHandler: (() => void) | undefined
+
+  const { handleUIServerChange, serverSwitchPending } = useServerSwitch({
+    onServerSwitched: options?.onServerSwitched,
+    registerWSEventListeners,
+    unregisterWSEventListeners,
+  })
 
   const startSimulator = (): void => {
     runSimulatorAction('simulator', {
@@ -87,82 +81,9 @@ export function useSimulatorControl (
     })
   }
 
-  const SERVER_SWITCH_TIMEOUT_MS = 15_000
-
-  const handleUIServerChange = (newIndex: number): void => {
-    const currentIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
-    if (newIndex === currentIndex || serverSwitchPending.value) return
-
-    const servers = $configuration.value.uiServer as UIServerConfigurationSection[]
-    if (newIndex < 0 || newIndex >= servers.length) return
-
-    serverSwitchPending.value = true
-
-    $uiClient.setConfiguration(servers[newIndex])
-    unregisterWSEventListeners()
-    registerWSEventListeners()
-
-    let settled = false
-
-    const openHandler = (): void => {
-      if (settled) return
-      settled = true
-      clearTimeout(activeTimeoutId)
-      $uiClient.unregisterWSEventListener('error', errorHandler)
-      pendingOpenHandler = undefined
-      pendingErrorHandler = undefined
-      setToLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, newIndex)
-      serverSwitchPending.value = false
-      options?.onServerSwitched?.()
-    }
-
-    const errorHandler = (): void => {
-      if (settled) return
-      settled = true
-      clearTimeout(activeTimeoutId)
-      $uiClient.unregisterWSEventListener('open', openHandler)
-      pendingOpenHandler = undefined
-      pendingErrorHandler = undefined
-      serverSwitchPending.value = false
-      const previousIndex = getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0)
-      const rollbackServers = $configuration.value.uiServer as UIServerConfigurationSection[]
-      if (previousIndex >= 0 && previousIndex < rollbackServers.length) {
-        $uiClient.setConfiguration(rollbackServers[previousIndex])
-      }
-      unregisterWSEventListeners()
-      registerWSEventListeners()
-    }
-
-    $uiClient.registerWSEventListener('open', openHandler, { once: true })
-    $uiClient.registerWSEventListener('error', errorHandler, { once: true })
-    pendingOpenHandler = openHandler
-    pendingErrorHandler = errorHandler
-
-    activeTimeoutId = setTimeout(() => {
-      if (!settled) {
-        errorHandler()
-      }
-    }, SERVER_SWITCH_TIMEOUT_MS)
-  }
-
-  onScopeDispose(() => {
-    if (activeTimeoutId != null) {
-      clearTimeout(activeTimeoutId)
-      activeTimeoutId = undefined
-    }
-    if (pendingOpenHandler != null) {
-      $uiClient.unregisterWSEventListener('open', pendingOpenHandler)
-      pendingOpenHandler = undefined
-    }
-    if (pendingErrorHandler != null) {
-      $uiClient.unregisterWSEventListener('error', pendingErrorHandler)
-      pendingErrorHandler = undefined
-    }
-  })
-
   return {
     handleUIServerChange,
-    serverSwitchPending: readonly(serverSwitchPending),
+    serverSwitchPending,
     simulatorPending: computed(() => simulatorPendingState.simulator),
     startSimulator,
     stopSimulator,
diff --git a/ui/web/src/shared/composables/useSkin.ts b/ui/web/src/shared/composables/useSkin.ts
index 47f3363d..000ecad3 100644
--- a/ui/web/src/shared/composables/useSkin.ts
+++ b/ui/web/src/shared/composables/useSkin.ts
@@ -1,10 +1,10 @@
 import { type SKIN_IDS } from 'ui-common'
 import { readonly, ref, type Ref } from 'vue'
 
-import { getFromLocalStorage, setToLocalStorage } from '@/core/index.js'
+import { DEFAULT_SKIN, getFromLocalStorage, setToLocalStorage } from '@/core/index.js'
 import { validateTokenContract } from '@/shared/tokens/contract.js'
 // Intentional: registry.ts is pure metadata (ids, labels, loaders) — no behavioral coupling.
-import { DEFAULT_SKIN, type SkinDefinition, skins } from '@/skins/registry.js'
+import { type SkinDefinition, skins } from '@/skins/registry.js'
 
 export const SKIN_STORAGE_KEY = 'ecs-ui-skin'
 
diff --git a/ui/web/src/shared/types.ts b/ui/web/src/shared/types.ts
deleted file mode 100644
index 4eafd390..00000000
--- a/ui/web/src/shared/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/** Common station identification fields used across skin components. */
-export interface StationIdentifier {
-  chargingStationId: string
-  hashId: string
-}
diff --git a/ui/web/src/shared/utils/index.ts b/ui/web/src/shared/utils/index.ts
index 62db02f2..dbe3df0f 100644
--- a/ui/web/src/shared/utils/index.ts
+++ b/ui/web/src/shared/utils/index.ts
@@ -1,5 +1,5 @@
 export { getSelectValue } from './dom.js'
-export { formatSupervisionUrl, type FormatSupervisionUrlOptions } from './formatSupervisionUrl.js'
+export { formatSupervisionUrl } from './formatSupervisionUrl.js'
 export type { StatusVariant } from './stationStatus.js'
 export {
   getATGStatus,
diff --git a/ui/web/src/skins/modern/modern.css b/ui/web/src/skins/modern/modern.css
index 7047a58e..a869cda3 100644
--- a/ui/web/src/skins/modern/modern.css
+++ b/ui/web/src/skins/modern/modern.css
@@ -853,6 +853,32 @@ html[data-skin='modern'] #app {
   border-color: var(--skin-border-strong);
 }
 
+/* Light-theme pill overrides — state colours are already dark (Material 700)
+ * and readable on light backgrounds without white mixing. */
+:root[data-theme='catppuccin-latte'] .modern-pill--ok,
+:root[data-theme='sap-horizon'] .modern-pill--ok,
+:root[data-theme='teal-light'] .modern-pill--ok {
+  color: var(--color-state-ok);
+  background-color: color-mix(in srgb, var(--color-state-ok) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-state-ok) 35%, transparent);
+}
+
+:root[data-theme='catppuccin-latte'] .modern-pill--warn,
+:root[data-theme='sap-horizon'] .modern-pill--warn,
+:root[data-theme='teal-light'] .modern-pill--warn {
+  color: var(--color-state-warn);
+  background-color: color-mix(in srgb, var(--color-state-warn) 18%, transparent);
+  border-color: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
+}
+
+:root[data-theme='catppuccin-latte'] .modern-pill--err,
+:root[data-theme='sap-horizon'] .modern-pill--err,
+:root[data-theme='teal-light'] .modern-pill--err {
+  color: var(--color-state-err);
+  background-color: color-mix(in srgb, var(--color-state-err) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-state-err) 35%, transparent);
+}
+
 /* ── Buttons — flat Material-style ─────────────────────────────────── */
 .modern-btn {
   display: inline-flex;
diff --git a/ui/web/src/skins/registry.ts b/ui/web/src/skins/registry.ts
index 105e1f03..ee36d433 100644
--- a/ui/web/src/skins/registry.ts
+++ b/ui/web/src/skins/registry.ts
@@ -23,8 +23,6 @@ export interface SkinDefinition {
   readonly loadStyles: () => Promise<unknown>
 }
 
-export const DEFAULT_SKIN: (typeof SKIN_IDS)[number] = 'classic'
-
 export const skins: readonly SkinDefinition[] = [
   {
     id: 'classic',
diff --git a/ui/web/tests/unit/App.test.ts b/ui/web/tests/unit/App.test.ts
index 30707415..138e3750 100644
--- a/ui/web/tests/unit/App.test.ts
+++ b/ui/web/tests/unit/App.test.ts
@@ -8,7 +8,6 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import App from '@/App.vue'
 
 vi.mock('@/skins/registry.js', () => ({
-  DEFAULT_SKIN: 'classic',
   skins: [
     {
       id: 'classic',
diff --git a/ui/web/tests/unit/UIClient.test.ts b/ui/web/tests/unit/UIClient.test.ts
index 62d7e3c3..5a83173b 100644
--- a/ui/web/tests/unit/UIClient.test.ts
+++ b/ui/web/tests/unit/UIClient.test.ts
@@ -55,24 +55,6 @@ describe('UIClient', () => {
     })
   })
 
-  describe('isOCPP20x', () => {
-    it('should return true for VERSION_20', () => {
-      expect(UIClient.isOCPP20x(OCPPVersion.VERSION_20)).toBe(true)
-    })
-
-    it('should return true for VERSION_201', () => {
-      expect(UIClient.isOCPP20x(OCPPVersion.VERSION_201)).toBe(true)
-    })
-
-    it('should return false for VERSION_16', () => {
-      expect(UIClient.isOCPP20x(OCPPVersion.VERSION_16)).toBe(false)
-    })
-
-    it('should return false for undefined', () => {
-      expect(UIClient.isOCPP20x(undefined)).toBe(false)
-    })
-  })
-
   describe('WebSocket connection', () => {
     it('should connect with ws:// URL format', () => {
       UIClient.getInstance(createUIServerConfig())
diff --git a/ui/web/tests/unit/Utils.test.ts b/ui/web/tests/unit/Utils.test.ts
index d334cbca..d7149271 100644
--- a/ui/web/tests/unit/Utils.test.ts
+++ b/ui/web/tests/unit/Utils.test.ts
@@ -7,7 +7,6 @@ import { ResponseStatus } from 'ui-common'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import {
-  deleteFromLocalStorage,
   getFromLocalStorage,
   getLocalStorage,
   resetToggleButtonState,
@@ -16,6 +15,7 @@ import {
   useConfiguration,
   useTemplates,
 } from '@/core/index.js'
+import { deleteFromLocalStorage } from '@/core/storage.js'
 import { useFetchData } from '@/shared/composables/useFetchData.js'
 
 import { toastMock } from '../setup.js'
diff --git a/ui/web/tests/unit/shared/composables/useSkin.test.ts b/ui/web/tests/unit/shared/composables/useSkin.test.ts
index 0f5a371a..ad2c8da1 100644
--- a/ui/web/tests/unit/shared/composables/useSkin.test.ts
+++ b/ui/web/tests/unit/shared/composables/useSkin.test.ts
@@ -4,11 +4,11 @@
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { DEFAULT_SKIN } from '@/core/index.js'
 import { useSkin } from '@/shared/composables/useSkin.js'
-import { DEFAULT_SKIN, skins } from '@/skins/registry.js'
+import { skins } from '@/skins/registry.js'
 
 vi.mock('@/skins/registry.js', () => ({
-  DEFAULT_SKIN: 'classic',
   skins: [
     {
       description: 'Table-based layout with a sticky sidebar action panel.',
diff --git a/ui/web/tests/unit/skins/registry.test.ts b/ui/web/tests/unit/skins/registry.test.ts
index 1fd47c8c..154440ff 100644
--- a/ui/web/tests/unit/skins/registry.test.ts
+++ b/ui/web/tests/unit/skins/registry.test.ts
@@ -4,7 +4,8 @@
  */
 import { describe, expect, it } from 'vitest'
 
-import { DEFAULT_SKIN, skins } from '@/skins/registry.js'
+import { DEFAULT_SKIN } from '@/core/index.js'
+import { skins } from '@/skins/registry.js'
 
 describe('registry', () => {
   it('should export DEFAULT_SKIN as classic', () => {