From f233ede757a98fed9189fbe168cc7dfa86fc02dd Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 9 Oct 2026 11:32:29 +0200
Subject: [PATCH 1/7] add vehicle fault to vehicle and CP card

---
 .../source/src/components/ChargePointCard.vue |  2 ++
 .../source/src/components/VehicleCard.vue     |  4 +++
 .../source/src/components/VehicleMessage.vue  | 33 +++++++++++++++++++
 .../koala/source/src/stores/mqtt-store.ts     | 29 ++++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index e6070bf3fe..cec5d86cf8 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -40,6 +40,7 @@
       />
     </q-card-section>
     <q-card-section>
+      <VehicleMessage v-if="vehicleId !== undefined" :vehicle-id="vehicleId" />
       <ChargePointMessage
         fault-message
         :charge-point-id="props.chargePointId"
@@ -131,6 +132,7 @@ import ChargePointStateIcon from './ChargePointStateIcon.vue';
 import ChargePointPriority from './ChargePointPriority.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
 import ChargePointMessage from './ChargePointMessage.vue';
+import VehicleMessage from './VehicleMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
 import ChargePointChargeLimits from './ChargePointChargeLimits.vue';
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index e9550efc24..853ccc0888 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -30,6 +30,9 @@
         <div class="text-subtitle2">Modell:</div>
         {{ vehicleInfo?.model || 'keine Angabe' }}
       </div>
+    </q-card-section>
+     <q-card-section>
+      <VehicleMessage :vehicle-id="props.vehicleId" />
     </q-card-section>
     <q-separator inset class="q-mt-sm" />
     <q-card-section>
@@ -66,6 +69,7 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderDouble from './SliderDouble.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
+import VehicleMessage from './VehicleMessage.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue b/packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue
new file mode 100644
index 0000000000..3014c51e37
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue
@@ -0,0 +1,33 @@
+<template>
+  <BaseMessage
+    :show-message="showMessage"
+    :message="message"
+    :type="messageType"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import BaseMessage from './BaseMessage.vue';
+
+const props = defineProps<{
+  vehicleId: number;
+}>();
+
+const mqttStore = useMqttStore();
+
+const faultState = computed(() => mqttStore.vehicleFaultState(props.vehicleId));
+
+const message = computed(
+  () => mqttStore.vehicleFaultMessage(props.vehicleId) ?? '',
+);
+
+const showMessage = computed(
+  () => faultState.value > 0 && message.value !== '',
+);
+
+const messageType = computed<'info' | 'warning' | 'error'>(() =>
+  faultState.value >= 2 ? 'error' : 'warning',
+);
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index bead3414f1..013423d93c 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -2994,6 +2994,33 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the vehicle fault message identified by the vehicle id
+   * @param vehicleId vehicle id
+   * @returns string | undefined
+   */
+  const vehicleFaultMessage = computed(() => {
+    return (vehicleId: number) => {
+      return getValue.value(`openWB/vehicle/${vehicleId}/get/fault_str`) as
+        string | undefined;
+    };
+  });
+
+  /**
+   * Get the vehicle fault state identified by the vehicle id
+   * @param vehicleId vehicle id
+   * @returns number
+   */
+  const vehicleFaultState = computed(() => {
+    return (vehicleId: number) => {
+      return (
+        (getValue.value(
+          `openWB/vehicle/${vehicleId}/get/fault_state`,
+        ) as number) || 0
+      );
+    };
+  });
+
   /**
    * Get or set the manual SoC by vehicle id
    * @param vehicleId vehicle id
@@ -4652,6 +4679,8 @@ export const useMqttStore = defineStore('mqtt', () => {
     vehicleSocType,
     vehicleColor,
     vehicleSocValue,
+    vehicleFaultMessage,
+    vehicleFaultState,
     vehicleSocManualValue,
     vehicleForceSocUpdate,
     chargePointConnectedVehicleSoc,

From c2f95d41e938f7bd3ed1cd0731e7a52d734da1da Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 9 Oct 2026 13:58:23 +0200
Subject: [PATCH 2/7] add vehicle fault to table view

---
 .../src/components/VehicleFaultIcon.vue       | 42 +++++++++++++++++++
 .../src/components/VehicleInformation.vue     | 38 ++++++++++++++++-
 .../src/components/models/table-model.ts      |  2 +
 3 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/VehicleFaultIcon.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleFaultIcon.vue b/packages/modules/web_themes/koala/source/src/components/VehicleFaultIcon.vue
new file mode 100644
index 0000000000..a8959a2fb9
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleFaultIcon.vue
@@ -0,0 +1,42 @@
+<template>
+  <span class="fault-icon">
+    <q-icon
+      v-if="faultState > 0"
+      :name="iconName"
+      :size="iconSize"
+      :color="iconColor"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Screen } from 'quasar';
+import { useMqttStore } from 'src/stores/mqtt-store';
+
+const props = defineProps<{
+  vehicleId: number;
+}>();
+
+const mqttStore = useMqttStore();
+
+const iconSize = computed(() => (Screen.lt.md ? '18px' : '22px'));
+
+const faultState = computed(() => mqttStore.vehicleFaultState(props.vehicleId));
+
+const iconName = computed(() => (faultState.value === 2 ? 'error' : 'warning'));
+
+const iconColor = computed(() =>
+  faultState.value === 2 ? 'negative' : 'warning',
+);
+</script>
+
+<style scoped lang="scss">
+.fault-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: v-bind(iconSize);
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index b31d2b0178..5a228d310a 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -29,9 +29,21 @@
     </template>
     <template #body-cell-name="slotProps">
       <div class="row items-center no-wrap">
-        <div class="ellipsis q-ml-sm" :title="slotProps.row.name">
+        <VehicleFaultIcon
+          v-if="faultPresent"
+          :vehicle-id="slotProps.row.id"
+          class="q-ml-sm"
+        />
+        <div
+          class="col ellipsis"
+          :class="faultPresent ? 'q-ml-xs' : 'q-ml-sm'"
+          @mouseenter="titleIfTruncated"
+        >
           {{ slotProps.row.name }}
         </div>
+        <q-tooltip v-if="slotProps.row.faultState > 0 && tooltipsEnabled">
+          {{ slotProps.row.faultMessage }}
+        </q-tooltip>
       </div>
     </template>
     <template #body-cell-manufacturer="slotProps">
@@ -68,15 +80,20 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { Screen } from 'quasar';
+import { Screen, useQuasar } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import { VehicleRow } from 'src/components/models/table-model';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
+import VehicleFaultIcon from './VehicleFaultIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
 
+const $q = useQuasar();
+
+const tooltipsEnabled = !$q.platform.is.mobile;
+
 const mqttStore = useMqttStore();
 const compactTable = computed(() => Screen.lt.md);
 const modalChargeVehicleCardVisible = ref(false);
@@ -90,6 +107,9 @@ const cardViewBreakpoint = computed(
 );
 const vehicles = computed(() => mqttStore.vehicleList);
 const vehicleIds = computed(() => vehicles.value.map((vehicle) => vehicle.id));
+const faultPresent = computed(() =>
+  vehicleIds.value.some((id) => mqttStore.vehicleFaultState(id) > 0),
+);
 
 const tableRowData = computed<(id: number) => VehicleRow>(() => {
   return (id: number) => {
@@ -103,6 +123,8 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
     const model = info?.model || 'keine Angabe';
     const soc = mqttStore.vehicleSocValue(id);
     const vehicleSocValue = soc !== undefined ? `${Math.round(soc)}%` : '–';
+    const faultState = mqttStore.vehicleFaultState(id);
+    const faultMessage = mqttStore.vehicleFaultMessage(id) ?? '';
     const color = mqttStore.vehicleColor(id) || 'var(--q-vehicle-stroke)';
     return {
       id,
@@ -112,6 +134,8 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
       plugState,
       chargeState,
       vehicleSocValue,
+      faultState,
+      faultMessage,
       color,
     };
   };
@@ -141,6 +165,16 @@ const columnConfigCompact: ColumnConfiguration[] = [
   },
 ];
 
+const titleIfTruncated = (event: MouseEvent) => {
+  const element = event.currentTarget as HTMLElement;
+  const text = element.textContent?.trim() ?? '';
+  if (text && element.scrollWidth - element.clientWidth > 1) {
+    element.title = text;
+  } else {
+    element.removeAttribute('title');
+  }
+};
+
 const onRowClick = (row: VehicleRow) => {
   selectedVehicleId.value = row.id;
   modalChargeVehicleCardVisible.value = true;
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
index 4c9dbf5d9b..e9e4564953 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -42,6 +42,8 @@ export interface VehicleRow extends Record<string, unknown> {
   plugState: boolean;
   chargeState: boolean;
   vehicleSocValue: string;
+  faultState: number;
+  faultMessage: string;
   color?: string;
 }
 

From 87172a2d8da2d2a7de821867f72c542b965436d2 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 9 Oct 2026 14:02:35 +0200
Subject: [PATCH 3/7] vehicle table resizable

---
 .../koala/source/src/components/VehicleInformation.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 5a228d310a..0a5fed505e 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -155,7 +155,7 @@ const columnConfig: ColumnConfiguration[] = [
 ];
 
 const columnConfigCompact: ColumnConfiguration[] = [
-  { field: 'name', label: 'Fahrzeug' },
+  { field: 'name', label: 'Fahrzeug', shrink: true },
   { field: 'plugged', label: 'Status', align: 'center', autoWidth: true },
   {
     field: 'vehicleSocValue',

From d429159ea6a7c78e5b43161e4e10b91b5744300f Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 9 Oct 2026 14:29:57 +0200
Subject: [PATCH 4/7] centralize table functions

---
 .../src/components/ChargePointInformation.vue | 22 ++------------
 .../src/components/VehicleInformation.vue     | 18 ++---------
 .../koala/source/src/composables/useTable.ts  | 30 +++++++++++++++++++
 3 files changed, 35 insertions(+), 35 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/composables/useTable.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 9f41e9fecd..0ccecebaad 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -151,7 +151,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Screen, useQuasar } from 'quasar';
+import { Screen } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useChargeModes } from 'src/composables/useChargeModes';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
@@ -166,10 +166,9 @@ import {
   ColumnConfiguration,
   ChargePointRow,
 } from 'src/components/models/table-model';
+import { useTable } from 'src/composables/useTable';
 
-const $q = useQuasar();
-
-const tooltipsEnabled = !$q.platform.is.mobile;
+const { tooltipsEnabled, compactTable, titleIfTruncated } = useTable();
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
@@ -185,7 +184,6 @@ const faultPresent = computed(() =>
   chargePointIds.value.some((id) => mqttStore.chargePointFaultState(id) > 0),
 );
 const isSmallScreen = computed(() => Screen.lt.sm);
-const compactTable = computed(() => Screen.lt.md);
 const selectedChargePointId = ref<number | null>(null);
 const modalChargePointCardVisible = ref(false);
 const filter = ref('');
@@ -281,20 +279,6 @@ const expansionColumnsCompact = columnConfigCompact.filter(
   (column) => column.expandField,
 );
 
-// the browser tooltip is only set if the text is really cut off by the
-// ellipsis, otherwise it would pop up next to the fault message tooltip
-// without adding any information
-const titleIfTruncated = (event: MouseEvent) => {
-  const element = event.currentTarget as HTMLElement;
-  const text = element.textContent?.trim() ?? '';
-  // one pixel tolerance, scrollWidth and clientWidth are rounded values
-  if (text && element.scrollWidth - element.clientWidth > 1) {
-    element.title = text;
-  } else {
-    element.removeAttribute('title');
-  }
-};
-
 const onRowClick = (row: ChargePointRow) => {
   selectedChargePointId.value = row.id;
   modalChargePointCardVisible.value = true;
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 0a5fed505e..c26a2e97fb 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -80,7 +80,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { Screen, useQuasar } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import { VehicleRow } from 'src/components/models/table-model';
@@ -89,13 +88,10 @@ import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 import VehicleFaultIcon from './VehicleFaultIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
+import { useTable } from 'src/composables/useTable';
 
-const $q = useQuasar();
-
-const tooltipsEnabled = !$q.platform.is.mobile;
-
+const { tooltipsEnabled, compactTable, titleIfTruncated } = useTable();
 const mqttStore = useMqttStore();
-const compactTable = computed(() => Screen.lt.md);
 const modalChargeVehicleCardVisible = ref(false);
 const selectedVehicleId = ref<number | null>(null);
 const filter = ref('');
@@ -165,16 +161,6 @@ const columnConfigCompact: ColumnConfiguration[] = [
   },
 ];
 
-const titleIfTruncated = (event: MouseEvent) => {
-  const element = event.currentTarget as HTMLElement;
-  const text = element.textContent?.trim() ?? '';
-  if (text && element.scrollWidth - element.clientWidth > 1) {
-    element.title = text;
-  } else {
-    element.removeAttribute('title');
-  }
-};
-
 const onRowClick = (row: VehicleRow) => {
   selectedVehicleId.value = row.id;
   modalChargeVehicleCardVisible.value = true;
diff --git a/packages/modules/web_themes/koala/source/src/composables/useTable.ts b/packages/modules/web_themes/koala/source/src/composables/useTable.ts
new file mode 100644
index 0000000000..d267eaf0c8
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/composables/useTable.ts
@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import { Screen, useQuasar } from 'quasar';
+
+export const useTable = () => {
+  const $q = useQuasar();
+
+  const tooltipsEnabled = !$q.platform.is.mobile;
+
+  const compactTable = computed(() => Screen.lt.md);
+
+  // the browser tooltip is only set if the text is really cut off by the
+  // ellipsis, otherwise it would pop up next to the fault message tooltip
+  // without adding any information
+  const titleIfTruncated = (event: MouseEvent) => {
+    const element = event.currentTarget as HTMLElement;
+    const text = element.textContent?.trim() ?? '';
+    // one pixel tolerance, scrollWidth and clientWidth are rounded values
+    if (text && element.scrollWidth - element.clientWidth > 1) {
+      element.title = text;
+    } else {
+      element.removeAttribute('title');
+    }
+  };
+
+  return {
+    tooltipsEnabled,
+    compactTable,
+    titleIfTruncated,
+  };
+};

From 8677716d52e7a1436556d96899a2302cc2a2b7fc Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 9 Oct 2026 14:42:42 +0200
Subject: [PATCH 5/7] refactor fault icon

---
 ...VehicleFaultIcon.vue => BaseFaultIcon.vue} | 13 ++----
 .../src/components/ChargePointFaultIcon.vue   | 44 -------------------
 .../src/components/ChargePointInformation.vue | 10 ++---
 .../src/components/VehicleInformation.vue     |  6 +--
 4 files changed, 12 insertions(+), 61 deletions(-)
 rename packages/modules/web_themes/koala/source/src/components/{VehicleFaultIcon.vue => BaseFaultIcon.vue} (63%)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleFaultIcon.vue b/packages/modules/web_themes/koala/source/src/components/BaseFaultIcon.vue
similarity index 63%
rename from packages/modules/web_themes/koala/source/src/components/VehicleFaultIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/BaseFaultIcon.vue
index a8959a2fb9..1b8ec9a3ff 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleFaultIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseFaultIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="fault-icon">
     <q-icon
-      v-if="faultState > 0"
+      v-if="props.faultState > 0"
       :name="iconName"
       :size="iconSize"
       :color="iconColor"
@@ -12,22 +12,17 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Screen } from 'quasar';
-import { useMqttStore } from 'src/stores/mqtt-store';
 
 const props = defineProps<{
-  vehicleId: number;
+  faultState: number;
 }>();
 
-const mqttStore = useMqttStore();
-
 const iconSize = computed(() => (Screen.lt.md ? '18px' : '22px'));
 
-const faultState = computed(() => mqttStore.vehicleFaultState(props.vehicleId));
-
-const iconName = computed(() => (faultState.value === 2 ? 'error' : 'warning'));
+const iconName = computed(() => (props.faultState === 2 ? 'error' : 'warning'));
 
 const iconColor = computed(() =>
-  faultState.value === 2 ? 'negative' : 'warning',
+  props.faultState === 2 ? 'negative' : 'warning',
 );
 </script>
 
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue
deleted file mode 100644
index 2e09481d7b..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <span class="fault-icon">
-    <q-icon
-      v-if="faultState > 0"
-      :name="iconName"
-      :size="iconSize"
-      :color="iconColor"
-    />
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Screen } from 'quasar';
-import { useMqttStore } from 'src/stores/mqtt-store';
-
-const props = defineProps<{
-  chargePointId: number;
-}>();
-
-const mqttStore = useMqttStore();
-
-const iconSize = computed(() => (Screen.lt.md ? '18px' : '22px'));
-
-const faultState = computed(() =>
-  mqttStore.chargePointFaultState(props.chargePointId),
-);
-
-const iconName = computed(() => (faultState.value === 2 ? 'error' : 'warning'));
-
-const iconColor = computed(() =>
-  faultState.value === 2 ? 'negative' : 'warning',
-);
-</script>
-
-<style scoped lang="scss">
-.fault-icon {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: v-bind(iconSize);
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 0ccecebaad..bae3e74e89 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -26,9 +26,9 @@
     <!-- full view table body slots -->
     <template #body-cell-name="slotProps">
       <div class="row items-center no-wrap">
-        <ChargePointFaultIcon
+        <BaseFaultIcon
           v-if="faultPresent"
-          :charge-point-id="slotProps.row.id"
+          :fault-state="slotProps.row.faultState"
           class="q-mr-xs"
         />
         <div class="col ellipsis" @mouseenter="titleIfTruncated">
@@ -79,9 +79,9 @@
     <!-- compact view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
       <div class="row items-center no-wrap">
-        <ChargePointFaultIcon
+        <BaseFaultIcon
           v-if="faultPresent"
-          :charge-point-id="slotProps.row.id"
+          :fault-state="slotProps.row.faultState"
           class="q-mr-xs"
         />
         <div class="col">
@@ -161,7 +161,7 @@ import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointMode from './ChargePointMode.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
-import ChargePointFaultIcon from './ChargePointFaultIcon.vue';
+import BaseFaultIcon from './BaseFaultIcon.vue';
 import {
   ColumnConfiguration,
   ChargePointRow,
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index c26a2e97fb..1d114f88cd 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -29,9 +29,9 @@
     </template>
     <template #body-cell-name="slotProps">
       <div class="row items-center no-wrap">
-        <VehicleFaultIcon
+        <BaseFaultIcon
           v-if="faultPresent"
-          :vehicle-id="slotProps.row.id"
+          :fault-state="slotProps.row.faultState"
           class="q-ml-sm"
         />
         <div
@@ -85,7 +85,7 @@ import BaseTable from 'src/components/BaseTable.vue';
 import { VehicleRow } from 'src/components/models/table-model';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
-import VehicleFaultIcon from './VehicleFaultIcon.vue';
+import BaseFaultIcon from './BaseFaultIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
 import { useTable } from 'src/composables/useTable';

From 5d92c229c0d2335844c7f44abf386c4067485fcb Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 9 Oct 2026 14:59:38 +0200
Subject: [PATCH 6/7] refactor fault message - remove vehicle fault from CP
 card

---
 .../src/components/BaseFaultMessage.vue       | 21 +++++++++
 .../source/src/components/ChargePointCard.vue | 24 ++++++----
 .../src/components/ChargePointMessage.vue     | 47 -------------------
 .../source/src/components/VehicleCard.vue     | 12 +++--
 .../source/src/components/VehicleMessage.vue  | 33 -------------
 5 files changed, 46 insertions(+), 91 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/BaseFaultMessage.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseFaultMessage.vue b/packages/modules/web_themes/koala/source/src/components/BaseFaultMessage.vue
new file mode 100644
index 0000000000..3b40c9da76
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/BaseFaultMessage.vue
@@ -0,0 +1,21 @@
+<template>
+  <BaseMessage
+    :show-message="props.faultState > 0"
+    :message="props.message"
+    :type="messageType"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseMessage from './BaseMessage.vue';
+
+const props = defineProps<{
+  faultState: number;
+  message: string;
+}>();
+
+const messageType = computed<'warning' | 'error'>(() =>
+  props.faultState >= 2 ? 'error' : 'warning',
+);
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index cec5d86cf8..d6315c65c5 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -40,12 +40,8 @@
       />
     </q-card-section>
     <q-card-section>
-      <VehicleMessage v-if="vehicleId !== undefined" :vehicle-id="vehicleId" />
-      <ChargePointMessage
-        fault-message
-        :charge-point-id="props.chargePointId"
-      />
-      <ChargePointMessage :charge-point-id="props.chargePointId" />
+      <BaseFaultMessage :fault-state="faultState" :message="faultMessage" />
+      <BaseMessage :message="stateMessage" type="info" />
     </q-card-section>
     <q-card-section
       class="full-width row no-wrap justify-between content-start items-center q-mt-sm"
@@ -131,8 +127,8 @@ import ChargePointLock from './ChargePointLock.vue';
 import ChargePointStateIcon from './ChargePointStateIcon.vue';
 import ChargePointPriority from './ChargePointPriority.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
-import ChargePointMessage from './ChargePointMessage.vue';
-import VehicleMessage from './VehicleMessage.vue';
+import BaseMessage from './BaseMessage.vue';
+import BaseFaultMessage from './BaseFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
 import ChargePointChargeLimits from './ChargePointChargeLimits.vue';
@@ -158,6 +154,18 @@ const vehicleId = computed(() => {
     ?.id;
 });
 
+const faultState = computed(() =>
+  mqttStore.chargePointFaultState(props.chargePointId),
+);
+
+const faultMessage = computed(
+  () => mqttStore.chargePointFaultMessage(props.chargePointId) ?? '',
+);
+
+const stateMessage = computed(
+  () => mqttStore.chargePointStateMessage(props.chargePointId) ?? '',
+);
+
 const limitMode = computed(() => {
   switch (chargeMode.value) {
     case 'instant_charging':
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
deleted file mode 100644
index b36338efad..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <BaseMessage
-    :show-message="showMessage"
-    :message="message"
-    :type="messageType"
-  />
-</template>
-
-<script setup lang="ts">
-import { useMqttStore } from 'src/stores/mqtt-store';
-import BaseMessage from './BaseMessage.vue';
-import { computed } from 'vue';
-
-const props = defineProps<{
-  chargePointId: number;
-  faultMessage?: boolean;
-}>();
-const mqttStore = useMqttStore();
-
-const showMessage = computed(() => {
-  return state.value !== undefined && state.value !== 0;
-});
-
-const state = computed(() =>
-  props.faultMessage
-    ? mqttStore.chargePointFaultState(props.chargePointId)
-    : -1,
-);
-
-const message = computed(() => {
-  const message = props.faultMessage
-    ? mqttStore.chargePointFaultMessage(props.chargePointId)
-    : mqttStore.chargePointStateMessage(props.chargePointId);
-  return message ?? '';
-});
-
-const messageType = computed(() => {
-  switch (state.value) {
-    case 1:
-      return 'warning';
-    case 2:
-      return 'error';
-    default:
-      return 'info';
-  }
-});
-</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index 853ccc0888..eb75399f5f 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -31,8 +31,8 @@
         {{ vehicleInfo?.model || 'keine Angabe' }}
       </div>
     </q-card-section>
-     <q-card-section>
-      <VehicleMessage :vehicle-id="props.vehicleId" />
+    <q-card-section>
+      <BaseFaultMessage :fault-state="faultState" :message="faultMessage" />
     </q-card-section>
     <q-separator inset class="q-mt-sm" />
     <q-card-section>
@@ -69,7 +69,7 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderDouble from './SliderDouble.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
-import VehicleMessage from './VehicleMessage.vue';
+import BaseFaultMessage from './BaseFaultMessage.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
@@ -95,6 +95,12 @@ const vehicleInfo = computed(() => {
   return mqttStore.vehicleInfo(props.vehicleId);
 });
 
+const faultState = computed(() => mqttStore.vehicleFaultState(props.vehicleId));
+
+const faultMessage = computed(
+  () => mqttStore.vehicleFaultMessage(props.vehicleId) ?? '',
+);
+
 const vehicleSocType = computed(() => {
   return mqttStore.vehicleSocType(props.vehicleId);
 });
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue b/packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue
deleted file mode 100644
index 3014c51e37..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/VehicleMessage.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <BaseMessage
-    :show-message="showMessage"
-    :message="message"
-    :type="messageType"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useMqttStore } from 'src/stores/mqtt-store';
-import BaseMessage from './BaseMessage.vue';
-
-const props = defineProps<{
-  vehicleId: number;
-}>();
-
-const mqttStore = useMqttStore();
-
-const faultState = computed(() => mqttStore.vehicleFaultState(props.vehicleId));
-
-const message = computed(
-  () => mqttStore.vehicleFaultMessage(props.vehicleId) ?? '',
-);
-
-const showMessage = computed(
-  () => faultState.value > 0 && message.value !== '',
-);
-
-const messageType = computed<'info' | 'warning' | 'error'>(() =>
-  faultState.value >= 2 ? 'error' : 'warning',
-);
-</script>

From 785fc5988f0609949ee9e595eab42f016279b2f5 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 12 Oct 2026 08:42:05 +0200
Subject: [PATCH 7/7] add vehicle fault to CP card

---
 .../source/src/components/ChargePointCard.vue    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index d6315c65c5..ccf8f5aef8 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -41,6 +41,10 @@
     </q-card-section>
     <q-card-section>
       <BaseFaultMessage :fault-state="faultState" :message="faultMessage" />
+      <BaseFaultMessage
+        :fault-state="vehicleFaultState"
+        :message="vehicleFaultMessage"
+      />
       <BaseMessage :message="stateMessage" type="info" />
     </q-card-section>
     <q-card-section
@@ -154,6 +158,18 @@ const vehicleId = computed(() => {
     ?.id;
 });
 
+const vehicleFaultState = computed(() =>
+  vehicleId.value !== undefined
+    ? mqttStore.vehicleFaultState(vehicleId.value)
+    : 0,
+);
+
+const vehicleFaultMessage = computed(() =>
+  vehicleId.value !== undefined
+    ? (mqttStore.vehicleFaultMessage(vehicleId.value) ?? '')
+    : '',
+);
+
 const faultState = computed(() =>
   mqttStore.chargePointFaultState(props.chargePointId),
 );