From 4943fa138dd8b1f7b972dcb1d6d83e2e0c79db51 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 08:48:49 +0200
Subject: [PATCH 01/17] consumers and counters not in HV

---
 .../energyFlowChart/EnergyFlowChart.vue       | 43 +++++++++---
 .../koala/source/src/stores/mqtt-store.ts     | 70 +++++++++++++++++++
 2 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index fd54d0b0ed..6c28db5be0 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -11,6 +11,7 @@ import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
 import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
+import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
 
 const mqttStore = useMqttStore();
 const $q = useQuasar();
@@ -103,9 +104,26 @@ const homeConsumption = computed(() => Number(homePower.value.value) > 0);
 const homeProduction = computed(() => Number(homePower.value.value) < 0);
 
 const consumerPower = computed(
-  () => mqttStore.consumerSumPower('object') as ValueObject,
+  () => mqttStore.notInHomeConsumptionPower('object') as ValueObject,
+);
+const consumerConsumption = computed(
+  () => Number(consumerPower.value.value) > 0,
+);
+const consumerProduction = computed(
+  () => Number(consumerPower.value.value) < 0,
+);
+
+const countersNotInHome = computed(
+  () => mqttStore.notInHomeConsumption.counterIds.length > 0,
+);
+const showConsumerPower = computed(
+  () =>
+    mqttStore.notInHomeConsumption.consumerIds.length > 0 ||
+    countersNotInHome.value ||
+    // e.g. SmartHome devices excluded from the home consumption
+    consumerConsumption.value ||
+    consumerProduction.value,
 );
-const showConsumerPower = computed(() => mqttStore.consumerIds.length > 0);
 
 const pvPower = computed(() => mqttStore.pvPowerTotal('object') as ValueObject);
 const pvProduction = computed(() => {
@@ -387,18 +405,20 @@ const svgComponents = computed((): FlowComponent[] => {
     components.push({
       id: 'consumer',
       class: {
-        base: 'consumer',
-        valueLabelColor: 'var(--q-consumer)',
-        animatedReverse: Number(consumerPower.value.value) > 0,
+        base: countersNotInHome.value ? 'not-in-home' : 'consumer',
+        animated: consumerProduction.value,
+        animatedReverse: consumerConsumption.value,
       },
       position: { row: 0, column: 1 },
       label: [
-        'Verbraucher',
+        countersNotInHome.value ? 'Sonstige' : 'Verbraucher',
         absoluteValueObject(consumerPower.value).textValue,
       ],
       powerValue: Number(consumerPower.value.value),
-      iconComponent: ConsumerIcon,
-      iconColor: 'var(--q-consumer)',
+      iconComponent: countersNotInHome.value ? CounterIcon : ConsumerIcon,
+      iconColor: countersNotInHome.value
+        ? 'var(--q-secondary-counter-stroke)'
+        : 'var(--q-consumer)',
     });
   }
 
@@ -980,11 +1000,18 @@ path.animatedReverse.home {
   animation-duration: v-bind('animationDurations.home');
 }
 
+path.animated.consumer,
 path.animatedReverse.consumer {
   color: var(--q-consumer);
   animation-duration: v-bind('animationDurations.consumer');
 }
 
+path.animated.not-in-home,
+path.animatedReverse.not-in-home {
+  color: var(--q-secondary-counter-stroke);
+  animation-duration: v-bind('animationDurations.consumer');
+}
+
 path.animated.pv,
 path.animatedReverse.pv {
   color: var(--q-pv-stroke);
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 443400c0d1..2c04819251 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
@@ -4385,6 +4385,74 @@ export const useMqttStore = defineStore('mqtt', () => {
     return result;
   });
 
+  /**
+   * Get the consumers and counters that are not counted in the home
+   * consumption.
+   * @returns object with the ids of the consumers and counters
+   */
+  const notInHomeConsumption = computed(() => {
+    const AUTO = 'auto_home_consumption';
+    const NOT_HOME = 'no_home_consumption';
+    const result = { consumerIds: [] as number[], counterIds: [] as number[] };
+    function walk(nodes: Hierarchy[] | undefined, parentMode: string) {
+      if (nodes === undefined) {
+        return;
+      }
+      nodes.forEach((node) => {
+        if (node.type === 'counter') {
+          const own = getValue.value(
+            `openWB/counter/${node.id}/config/is_home_consumption_counter`,
+            undefined,
+            AUTO,
+          ) as string | undefined;
+          const mode = own && own !== AUTO ? own : parentMode;
+          if (mode === NOT_HOME) {
+            result.counterIds.push(node.id);
+          }
+          walk(node.children, mode);
+        } else if (node.type === 'consumer') {
+          const own = getValue.value(
+            `openWB/consumer/${node.id}/config`,
+            'is_home_consumption_consumer',
+            AUTO,
+          ) as string | undefined;
+          if ((own && own !== AUTO ? own : parentMode) === NOT_HOME) {
+            result.consumerIds.push(node.id);
+          }
+        } else {
+          walk(node.children, parentMode);
+        }
+      });
+    }
+    walk(
+      getValue.value('openWB/counter/get/hierarchy') as Hierarchy[],
+      'home_consumption',
+    );
+    return result;
+  });
+
+  /**
+   * Get the summed power of all consumers and counters that are not counted
+   * in the home consumption.
+   * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @returns string | number | ValueObject
+   */
+  const notInHomeConsumptionPower = computed(() => {
+    return (returnType: string = 'textValue') => {
+      const power = getValue.value(
+        'openWB/counter/set/not_in_home_consumption',
+      ) as number | undefined;
+      const valueObject = getValueObject.value(power);
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      if (returnType == 'object') {
+        return valueObject;
+      }
+      console.error('returnType not found!', returnType, power);
+    };
+  });
+
   /**
    * Get pv power
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -4756,6 +4824,8 @@ export const useMqttStore = defineStore('mqtt', () => {
     // PV data
     pvConfigured,
     hybridInverters,
+    notInHomeConsumption,
+    notInHomeConsumptionPower,
     pvPowerTotal,
     pvDailyExported,
     pvIds,

From 7180cd4871db5ca9ca94a3eef6671d3b9b712b0b Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 09:59:45 +0200
Subject: [PATCH 02/17] add info badge

---
 .../energyFlowChart/EnergyFlowChart.vue       | 40 ++++++++++++++-
 .../energy-flow-chart-models.ts               |  1 +
 .../koala/source/src/stores/mqtt-store.ts     | 51 +++++++++++++++----
 3 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 6c28db5be0..31d069e3f3 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -52,6 +52,12 @@ const svgViewBox = computed(
 // the inset leaves a visible gap between circle and pill edge.
 const iconCircleRadius = computed(() => svgSize.value.circleRadius - 2);
 
+const infoBadgeRadius = 4.0;
+const infoIconRadius = 2.7;
+const infoBadgeOffset = computed(
+  () => (iconCircleRadius.value + 1) * Math.SQRT1_2,
+);
+
 const svgIconWidth = computed(() => svgSize.value.circleRadius);
 
 const svgIconHeight = computed(() => svgSize.value.circleRadius);
@@ -112,10 +118,14 @@ const consumerConsumption = computed(
 const consumerProduction = computed(
   () => Number(consumerPower.value.value) < 0,
 );
-
 const countersNotInHome = computed(
   () => mqttStore.notInHomeConsumption.counterIds.length > 0,
 );
+const homeHasDetails = computed(
+  () =>
+    mqttStore.inHomeConsumption.consumerIds.length > 0 ||
+    mqttStore.inHomeConsumption.counterIds.length > 0,
+);
 const showConsumerPower = computed(
   () =>
     mqttStore.notInHomeConsumption.consumerIds.length > 0 ||
@@ -398,6 +408,7 @@ const svgComponents = computed((): FlowComponent[] => {
       powerValue: Number(homePower.value.value),
       iconComponent: HouseIcon,
       iconColor: 'var(--q-home-stroke)',
+      showInfo: homeHasDetails.value,
     });
   }
 
@@ -922,6 +933,21 @@ const labelClipPath = computed(() => {
                 :style="{ color: component.iconColor }"
               />
             </g>
+            <!-- info badge: sits on the top left edge of the icon circle -->
+            <g
+              v-if="component.showInfo"
+              class="info-badge cursor-pointer"
+              :transform="`translate(${-infoBadgeOffset}, ${-infoBadgeOffset})`"
+            >
+              <circle
+                cx="0"
+                cy="0"
+                :r="infoBadgeRadius"
+                filter="url(#flow-box-shadow)"
+              />
+              <circle class="info-icon" cx="0" cy="0" :r="infoIconRadius" />
+              <path d="M 0 -0.95 v 0.01 M 0 -0.1 V 1" />
+            </g>
           </g>
         </g>
       </g>
@@ -1086,6 +1112,18 @@ circle:not(.soc) {
   fill: var(--q-card-background);
 }
 
+.info-badge circle.info-icon {
+  stroke: var(--q-text);
+  stroke-width: 0.4;
+}
+
+.info-badge path {
+  fill: none;
+  stroke: var(--q-text);
+  stroke-width: 0.55;
+  stroke-linecap: round;
+}
+
 rect {
   fill: var(--q-card-background);
 }
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index 9db5e13293..ddbce62a49 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -35,4 +35,5 @@ export interface FlowComponent {
   soc?: number;
   iconComponent?: Component;
   iconColor?: string;
+  showInfo?: boolean;
 }
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 2c04819251..ebcbe0d95d 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
@@ -4386,15 +4386,22 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get the consumers and counters that are not counted in the home
-   * consumption.
-   * @returns object with the ids of the consumers and counters
+   * Sort the consumers and sub-counters by whether they are counted in the
+   * home consumption.
    */
-  const notInHomeConsumption = computed(() => {
+  const homeConsumptionAssignment = computed(() => {
     const AUTO = 'auto_home_consumption';
     const NOT_HOME = 'no_home_consumption';
-    const result = { consumerIds: [] as number[], counterIds: [] as number[] };
-    function walk(nodes: Hierarchy[] | undefined, parentMode: string) {
+    const ids = () => ({
+      consumerIds: [] as number[],
+      counterIds: [] as number[],
+    });
+    const result = { inHome: ids(), notInHome: ids() };
+    function walk(
+      nodes: Hierarchy[] | undefined,
+      parentMode: string,
+      isRoot: boolean,
+    ) {
       if (nodes === undefined) {
         return;
       }
@@ -4407,9 +4414,11 @@ export const useMqttStore = defineStore('mqtt', () => {
           ) as string | undefined;
           const mode = own && own !== AUTO ? own : parentMode;
           if (mode === NOT_HOME) {
-            result.counterIds.push(node.id);
+            result.notInHome.counterIds.push(node.id);
+          } else if (!isRoot) {
+            result.inHome.counterIds.push(node.id);
           }
-          walk(node.children, mode);
+          walk(node.children, mode, false);
         } else if (node.type === 'consumer') {
           const own = getValue.value(
             `openWB/consumer/${node.id}/config`,
@@ -4417,20 +4426,41 @@ export const useMqttStore = defineStore('mqtt', () => {
             AUTO,
           ) as string | undefined;
           if ((own && own !== AUTO ? own : parentMode) === NOT_HOME) {
-            result.consumerIds.push(node.id);
+            result.notInHome.consumerIds.push(node.id);
+          } else {
+            result.inHome.consumerIds.push(node.id);
           }
         } else {
-          walk(node.children, parentMode);
+          walk(node.children, parentMode, false);
         }
       });
     }
     walk(
       getValue.value('openWB/counter/get/hierarchy') as Hierarchy[],
       'home_consumption',
+      true,
     );
     return result;
   });
 
+  /**
+   * Get the consumers and sub-counters that are counted in the home
+   * consumption.
+   * @returns object with the ids of the consumers and counters
+   */
+  const inHomeConsumption = computed(
+    () => homeConsumptionAssignment.value.inHome,
+  );
+
+  /**
+   * Get the consumers and counters that are not counted in the home
+   * consumption.
+   * @returns object with the ids of the consumers and counters
+   */
+  const notInHomeConsumption = computed(
+    () => homeConsumptionAssignment.value.notInHome,
+  );
+
   /**
    * Get the summed power of all consumers and counters that are not counted
    * in the home consumption.
@@ -4824,6 +4854,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     // PV data
     pvConfigured,
     hybridInverters,
+    inHomeConsumption,
     notInHomeConsumption,
     notInHomeConsumptionPower,
     pvPowerTotal,

From 4405921d1d167b80b9d7d987cf5fe428fdf61c44 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 14:23:23 +0200
Subject: [PATCH 03/17] add info dialog

---
 .../energyFlowChart/EnergyFlowChart.vue       |   4 +
 .../HomeConsumptionDetailsDialog.vue          | 106 ++++++++++++++++++
 2 files changed, 110 insertions(+)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 31d069e3f3..21b95f8563 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -12,6 +12,7 @@ import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
+import HomeConsumptionDetailsDialog from './HomeConsumptionDetailsDialog.vue';
 
 const mqttStore = useMqttStore();
 const $q = useQuasar();
@@ -121,6 +122,7 @@ const consumerProduction = computed(
 const countersNotInHome = computed(
   () => mqttStore.notInHomeConsumption.counterIds.length > 0,
 );
+const homeDetailsVisible = ref(false);
 const homeHasDetails = computed(
   () =>
     mqttStore.inHomeConsumption.consumerIds.length > 0 ||
@@ -938,6 +940,7 @@ const labelClipPath = computed(() => {
               v-if="component.showInfo"
               class="info-badge cursor-pointer"
               :transform="`translate(${-infoBadgeOffset}, ${-infoBadgeOffset})`"
+              @click.stop="homeDetailsVisible = true"
             >
               <circle
                 cx="0"
@@ -952,6 +955,7 @@ const labelClipPath = computed(() => {
         </g>
       </g>
     </svg>
+    <HomeConsumptionDetailsDialog v-model="homeDetailsVisible" />
   </div>
 </template>
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
new file mode 100644
index 0000000000..0a4894dcfb
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -0,0 +1,106 @@
+<template>
+  <q-dialog v-model="visible" :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'">
+    <q-card class="card-width">
+      <q-card-section>
+        <div class="row no-wrap">
+          <div class="text-h6 q-pr-sm">Im Hausverbrauch enthalten:</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            flat
+            round
+            dense
+            v-close-popup
+            class="close-btn"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-pa-none">
+        <q-list>
+          <q-item v-for="item in items" :key="item.key">
+            <q-item-section avatar>
+              <component
+                :is="item.icon"
+                class="item-icon"
+                :style="{ color: item.color }"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ item.name }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { Screen } from 'quasar';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
+import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
+
+defineOptions({ name: 'HomeConsumptionDetailsDialog' });
+
+interface DetailsItem {
+  key: string;
+  name: string;
+  icon: Component;
+  color: string;
+}
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+}>();
+
+const mqttStore = useMqttStore();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+const isSmallScreen = computed(() => Screen.lt.sm);
+
+const items = computed((): DetailsItem[] => {
+  const { consumerIds, counterIds } = mqttStore.inHomeConsumption;
+  return [
+    ...consumerIds.map((id) => ({
+      key: `consumer-${id}`,
+      name: mqttStore.consumerName(id) || `Verbraucher ${id}`,
+      icon: ConsumerIcon,
+      color: mqttStore.consumerColor(id) || 'var(--q-consumer)',
+    })),
+    ...counterIds.map((id) => ({
+      key: `counter-${id}`,
+      name: mqttStore.componentName(id) || `Zähler ${id}`,
+      icon: CounterIcon,
+      color:
+        mqttStore.secondaryCounterColor(id) ||
+        'var(--q-secondary-counter-stroke)',
+    })),
+  ];
+});
+</script>
+
+<style lang="scss" scoped>
+.card-width {
+  width: 400px;
+  max-width: 90vw;
+}
+.close-btn {
+  height: 2.5em;
+  width: 2.5em;
+}
+.item-icon {
+  width: 28px;
+  height: 28px;
+}
+</style>

From 26b40d6850350fbf6a6283660c1ea1ae168cb7a4 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 14:27:52 +0200
Subject: [PATCH 04/17] update list background

---
 .../charts/energyFlowChart/HomeConsumptionDetailsDialog.vue   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index 0a4894dcfb..db51eab0ef 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -103,4 +103,8 @@ const items = computed((): DetailsItem[] => {
   width: 28px;
   height: 28px;
 }
+
+.q-list {
+  background-color: transparent;
+}
 </style>

From 855e0733a4fa4540b9ef5bdeaf467ce74a100939 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 14:50:39 +0200
Subject: [PATCH 05/17] info click area larger

---
 .../charts/energyFlowChart/EnergyFlowChart.vue      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 21b95f8563..d0f4cebb06 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -123,6 +123,14 @@ const countersNotInHome = computed(
   () => mqttStore.notInHomeConsumption.counterIds.length > 0,
 );
 const homeDetailsVisible = ref(false);
+
+const openDetails = (event: MouseEvent, component: FlowComponent) => {
+  if (!component.showInfo) {
+    return;
+  }
+  event.stopPropagation();
+  homeDetailsVisible.value = true;
+};
 const homeHasDetails = computed(
   () =>
     mqttStore.inHomeConsumption.consumerIds.length > 0 ||
@@ -906,6 +914,8 @@ const labelClipPath = computed(() => {
           </text>
           <g
             :transform="`translate(${svgSize.circleRadius - svgRectWidth / 2}, 0)`"
+            :class="{ 'cursor-pointer': component.showInfo }"
+            @click="openDetails($event, component)"
           >
             <circle
               cx="0"
@@ -938,9 +948,8 @@ const labelClipPath = computed(() => {
             <!-- info badge: sits on the top left edge of the icon circle -->
             <g
               v-if="component.showInfo"
-              class="info-badge cursor-pointer"
+              class="info-badge"
               :transform="`translate(${-infoBadgeOffset}, ${-infoBadgeOffset})`"
-              @click.stop="homeDetailsVisible = true"
             >
               <circle
                 cx="0"

From 125ddb40c07c3808e40058b7ccaacb9c5fcc73e5 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 15:19:33 +0200
Subject: [PATCH 06/17] add info dialog for consumers and secondary counters

---
 .../charts/energyFlowChart/EnergyFlowChart.vue  | 17 ++++++++++++++---
 .../HomeConsumptionDetailsDialog.vue            | 14 ++++++++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index d0f4cebb06..6606a555c7 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -122,20 +122,27 @@ const consumerProduction = computed(
 const countersNotInHome = computed(
   () => mqttStore.notInHomeConsumption.counterIds.length > 0,
 );
-const homeDetailsVisible = ref(false);
+const detailsVisible = ref(false);
+const detailsScope = ref<'inHome' | 'notInHome'>('inHome');
 
 const openDetails = (event: MouseEvent, component: FlowComponent) => {
   if (!component.showInfo) {
     return;
   }
   event.stopPropagation();
-  homeDetailsVisible.value = true;
+  detailsScope.value = component.id === 'home' ? 'inHome' : 'notInHome';
+  detailsVisible.value = true;
 };
 const homeHasDetails = computed(
   () =>
     mqttStore.inHomeConsumption.consumerIds.length > 0 ||
     mqttStore.inHomeConsumption.counterIds.length > 0,
 );
+const notInHomeHasDetails = computed(
+  () =>
+    mqttStore.notInHomeConsumption.consumerIds.length > 0 ||
+    mqttStore.notInHomeConsumption.counterIds.length > 0,
+);
 const showConsumerPower = computed(
   () =>
     mqttStore.notInHomeConsumption.consumerIds.length > 0 ||
@@ -440,6 +447,7 @@ const svgComponents = computed((): FlowComponent[] => {
       iconColor: countersNotInHome.value
         ? 'var(--q-secondary-counter-stroke)'
         : 'var(--q-consumer)',
+      showInfo: notInHomeHasDetails.value,
     });
   }
 
@@ -964,7 +972,10 @@ const labelClipPath = computed(() => {
         </g>
       </g>
     </svg>
-    <HomeConsumptionDetailsDialog v-model="homeDetailsVisible" />
+    <HomeConsumptionDetailsDialog
+      v-model="detailsVisible"
+      :scope="detailsScope"
+    />
   </div>
 </template>
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index db51eab0ef..30ea94b1c6 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -3,7 +3,7 @@
     <q-card class="card-width">
       <q-card-section>
         <div class="row no-wrap">
-          <div class="text-h6 q-pr-sm">Im Hausverbrauch enthalten:</div>
+          <div class="text-h6 q-pr-sm">{{ title }}</div>
           <q-space />
           <q-btn
             icon="close"
@@ -55,6 +55,7 @@ interface DetailsItem {
 
 const props = defineProps<{
   modelValue: boolean;
+  scope: 'inHome' | 'notInHome';
 }>();
 
 const emit = defineEmits<{
@@ -69,8 +70,17 @@ const visible = computed({
 });
 const isSmallScreen = computed(() => Screen.lt.sm);
 
+const title = computed(() =>
+  props.scope === 'inHome'
+    ? 'Im Hausverbrauch enthalten:'
+    : 'Nicht im Hausverbrauch enthalten:',
+);
+
 const items = computed((): DetailsItem[] => {
-  const { consumerIds, counterIds } = mqttStore.inHomeConsumption;
+  const { consumerIds, counterIds } =
+    props.scope === 'inHome'
+      ? mqttStore.inHomeConsumption
+      : mqttStore.notInHomeConsumption;
   return [
     ...consumerIds.map((id) => ({
       key: `consumer-${id}`,

From 668d8f5ba87e99d2350818184ed81d97fbf7970c Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 16:08:47 +0200
Subject: [PATCH 07/17] info icon color & size

---
 .../charts/energyFlowChart/EnergyFlowChart.vue           | 9 +++++----
 .../koala/source/src/css/quasar.variables.scss           | 4 ++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 6606a555c7..383e050244 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -53,8 +53,8 @@ const svgViewBox = computed(
 // the inset leaves a visible gap between circle and pill edge.
 const iconCircleRadius = computed(() => svgSize.value.circleRadius - 2);
 
-const infoBadgeRadius = 4.0;
-const infoIconRadius = 2.7;
+const infoBadgeRadius = 3.6;
+const infoIconRadius = 3;
 const infoBadgeOffset = computed(
   () => (iconCircleRadius.value + 1) * Math.SQRT1_2,
 );
@@ -1137,13 +1137,14 @@ circle:not(.soc) {
 }
 
 .info-badge circle.info-icon {
-  stroke: var(--q-text);
+  fill: var(--q-flow-chart-info);
+  stroke: var(--q-flow-chart-info);
   stroke-width: 0.4;
 }
 
 .info-badge path {
   fill: none;
-  stroke: var(--q-text);
+  stroke: var(--q-white);
   stroke-width: 0.55;
   stroke-linecap: round;
 }
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 98a8961276..4879c786e3 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -61,6 +61,7 @@ $chart-shadow: $secondary;
 // energy flow chart: shadow behind the pills and the icon circles
 $flow-chart-shadow: #000000;
 $flow-chart-shadow-opacity: 0.12;
+$flow-chart-info: #2aa8ff;
 $consumer: #7d42f5;
 // Light theme (default)
 :root {
@@ -80,6 +81,7 @@ $consumer: #7d42f5;
   --q-chart-shadow: #{$chart-shadow};
   --q-flow-chart-shadow: #{$flow-chart-shadow};
   --q-flow-chart-shadow-opacity: #{$flow-chart-shadow-opacity};
+  --q-flow-chart-info: #{$flow-chart-info};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -245,6 +247,7 @@ $dark-chart-shadow: #000000;
 // energy flow chart: shadow behind the pills and the icon circles
 $dark-flow-chart-shadow: #000000;
 $dark-flow-chart-shadow-opacity: 0.45;
+$dark-flow-chart-info: #2aa8ff;
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -282,6 +285,7 @@ $dark-table-hover: #ffffff12;
   --q-chart-shadow: #{$dark-chart-shadow};
   --q-flow-chart-shadow: #{$dark-flow-chart-shadow};
   --q-flow-chart-shadow-opacity: #{$dark-flow-chart-shadow-opacity};
+  --q-flow-chart-info: #{$dark-flow-chart-info};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};

From 0a5956d812c3a7079736de1d6c457c6541c2bfda Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 5 Oct 2026 17:02:51 +0200
Subject: [PATCH 08/17] use svg info icon

---
 .../src/assets/icons/owbInformation.svg       |  1 +
 .../energyFlowChart/EnergyFlowChart.vue       | 29 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbInformation.svg

diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbInformation.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbInformation.svg
new file mode 100644
index 0000000000..c7f64746bf
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbInformation.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="512" cy="512" r="448" /><circle cx="512" cy="320" r="64" fill="#ffffff" /><rect x="448" y="448" width="128" height="320" rx="64" fill="#ffffff" /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 383e050244..0d69ed32b5 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -12,6 +12,7 @@ import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
+import InfoIcon from 'src/assets/icons/owbInformation.svg?component';
 import HomeConsumptionDetailsDialog from './HomeConsumptionDetailsDialog.vue';
 
 const mqttStore = useMqttStore();
@@ -53,8 +54,8 @@ const svgViewBox = computed(
 // the inset leaves a visible gap between circle and pill edge.
 const iconCircleRadius = computed(() => svgSize.value.circleRadius - 2);
 
-const infoBadgeRadius = 3.6;
-const infoIconRadius = 3;
+const infoBadgeRadius = 3.2;
+const infoIconSize = 6;
 const infoBadgeOffset = computed(
   () => (iconCircleRadius.value + 1) * Math.SQRT1_2,
 );
@@ -965,8 +966,15 @@ const labelClipPath = computed(() => {
                 :r="infoBadgeRadius"
                 filter="url(#flow-box-shadow)"
               />
-              <circle class="info-icon" cx="0" cy="0" :r="infoIconRadius" />
-              <path d="M 0 -0.95 v 0.01 M 0 -0.1 V 1" />
+              <g
+                :transform="`translate(${-infoIconSize / 2}, ${-infoIconSize / 2})`"
+              >
+                <InfoIcon
+                  class="info-icon"
+                  :width="infoIconSize"
+                  :height="infoIconSize"
+                />
+              </g>
             </g>
           </g>
         </g>
@@ -1136,17 +1144,8 @@ circle:not(.soc) {
   fill: var(--q-card-background);
 }
 
-.info-badge circle.info-icon {
-  fill: var(--q-flow-chart-info);
-  stroke: var(--q-flow-chart-info);
-  stroke-width: 0.4;
-}
-
-.info-badge path {
-  fill: none;
-  stroke: var(--q-white);
-  stroke-width: 0.55;
-  stroke-linecap: round;
+.info-badge .info-icon {
+  color: var(--q-flow-chart-info);
 }
 
 rect {

From bf259352b758fc97bbac8d15063bbb3cc84706bd Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 6 Oct 2026 08:56:13 +0200
Subject: [PATCH 09/17] Documentation

---
 .../modules/web_themes/koala/source/src/stores/mqtt-store.ts  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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 ebcbe0d95d..33d6e8a54a 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
@@ -4387,7 +4387,9 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * Sort the consumers and sub-counters by whether they are counted in the
-   * home consumption.
+   * home consumption. The root counter is only listed if it is excluded.
+   * @returns object with the keys inHome and notInHome, each holding the ids
+   * of the consumers and counters
    */
   const homeConsumptionAssignment = computed(() => {
     const AUTO = 'auto_home_consumption';

From 491bc7c2978f3df5c4b11f0091fee4780b04d1f7 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 6 Oct 2026 08:57:15 +0200
Subject: [PATCH 10/17] Add info icon to dialog - formatting

---
 .../HomeConsumptionDetailsDialog.vue           | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index 30ea94b1c6..34f7fd2223 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -2,7 +2,8 @@
   <q-dialog v-model="visible" :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'">
     <q-card class="card-width">
       <q-card-section>
-        <div class="row no-wrap">
+        <div class="row no-wrap items-center">
+          <InfoIcon class="title-icon q-mr-md" />
           <div class="text-h6 q-pr-sm">{{ title }}</div>
           <q-space />
           <q-btn
@@ -17,7 +18,7 @@
       </q-card-section>
       <q-separator />
       <q-card-section class="q-pa-none">
-        <q-list>
+        <q-list dense class="q-pt-sm">
           <q-item v-for="item in items" :key="item.key">
             <q-item-section avatar>
               <component
@@ -43,6 +44,7 @@ import { Screen } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
+import InfoIcon from 'src/assets/icons/owbInformation.svg?component';
 
 defineOptions({ name: 'HomeConsumptionDetailsDialog' });
 
@@ -72,8 +74,8 @@ const isSmallScreen = computed(() => Screen.lt.sm);
 
 const title = computed(() =>
   props.scope === 'inHome'
-    ? 'Im Hausverbrauch enthalten:'
-    : 'Nicht im Hausverbrauch enthalten:',
+    ? 'Im Hausverbrauch:'
+    : 'Nicht im Hausverbrauch:',
 );
 
 const items = computed((): DetailsItem[] => {
@@ -109,10 +111,18 @@ const items = computed((): DetailsItem[] => {
   height: 2.5em;
   width: 2.5em;
 }
+.title-icon,
 .item-icon {
   width: 28px;
   height: 28px;
 }
+.title-icon {
+  flex-shrink: 0;
+  color: var(--q-flow-chart-info);
+}
+.q-item__section--avatar {
+  min-width: 0;
+}
 
 .q-list {
   background-color: transparent;

From 3f6dc9acb585d1dd8f0d316a566244a2efa83216 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 6 Oct 2026 13:49:22 +0200
Subject: [PATCH 11/17] component names and icons

---
 .../src/assets/icons/owbMiscDevices.svg       | 28 +++++++++++++
 .../energyFlowChart/EnergyFlowChart.vue       | 39 ++++++++++++++++---
 2 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbMiscDevices.svg

diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbMiscDevices.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbMiscDevices.svg
new file mode 100644
index 0000000000..863b457dcf
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbMiscDevices.svg
@@ -0,0 +1,28 @@
+<svg class="svg-icon" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath
+       id="upperLeft">
+      <polygon points="0,0 1024,0 0,1024" />
+    </clipPath>
+    <clipPath
+       id="lowerRight">
+      <polygon points="1024,0 1024,1024 0,1024" />
+    </clipPath>
+  </defs>
+   <g clip-path="url(#upperLeft)">
+    <path
+       transform="translate(70 30) scale(0.58)"
+      d="M682.666667 298.666667V128h-85.333334v170.666667h-170.666666V128H341.333333v170.666667C298.666667 298.666667 256 341.333333 256 384v234.666667L405.333333 768v128h213.333334v-128l149.333333-149.333333V384c0-42.666667-42.666667-85.333333-85.333333-85.333333z" />
+  </g>
+   <g clip-path="url(#lowerRight)" transform="translate(-106,-68)">
+    <path
+       transform="matrix(0.48,0,0,0.48,540,515)"
+       d="M 686.60622,510.52439 517.7474,638.96876 c -2.40375,-0.19852 -4.80135,-0.40113 -7.20612,-0.40113 -35.41151,0 -64.02009,28.61369 -64.02009,64.02827 0,35.41048 28.60858,64.0211 64.02009,64.0211 35.41458,0 64.02827,-28.60959 64.02827,-64.0211 0,-2.40375 -0.20057,-4.80136 -0.40114,-7.20613 L 702.61278,526.52993 Z m 0,0 M 510.54128,190.41068 c -247.48456,0 -448.155929,200.67239 -448.155929,448.15797 0,68.8286 15.60542,133.85254 43.214219,192.07048 h 72.227 C 147.01584,777.42209 129.41191,717.40109 126.80862,654.57521 h 63.61997 v -32.00698 h -63.61997 c 2.4017,-57.62339 17.40746,-113.04463 43.61331,-162.86225 l 55.0201,31.81357 16.00758,-27.81244 -55.02011,-31.6089 c 14.8052,-23.21064 32.41425,-45.21684 52.42091,-65.22349 20.40677,-20.20723 42.61354,-38.01583 66.22019,-53.02159 l 31.61198,54.61897 27.81346,-16.00144 -31.61402,-54.61897 c 49.61807,-26.0104 104.4376,-40.61502 161.66089,-43.01877 v 63.62099 h 32.00697 v -63.62099 c 57.22226,2.40272 112.04179,17.20792 161.65987,43.01877 l -31.41243,54.61897 27.81243,16.00144 31.60891,-54.61897 c 23.61177,15.00576 45.81649,32.81436 66.22428,53.02159 20.00769,20.00665 37.41515,41.81229 52.42193,65.22349 l -54.81953,31.6089 16.00246,27.81244 55.0201,-31.81357 c 26.20995,49.81762 41.21571,105.23988 43.61843,162.86225 h -64.02622 v 32.00698 h 63.62713 c -2.60431,62.82588 -20.20723,122.84688 -51.01897,176.06392 h 72.2229 c 27.61187,-58.21896 43.21831,-123.2429 43.21831,-192.07048 -0.004,-247.48558 -200.67546,-448.15797 -448.1682,-448.15797 z m 0,0"
+      />
+  </g>
+  <path
+     d="M 107.77214,916.22786 916.22786,107.77214"
+     fill="none"
+     stroke="currentColor"
+   stroke-width="15.7902" />
+</svg>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 0d69ed32b5..d17f00b221 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -13,6 +13,7 @@ import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
 import InfoIcon from 'src/assets/icons/owbInformation.svg?component';
+import MiscDevicesIcon from 'src/assets/icons/owbMiscDevices.svg?component';
 import HomeConsumptionDetailsDialog from './HomeConsumptionDetailsDialog.vue';
 
 const mqttStore = useMqttStore();
@@ -123,6 +124,34 @@ const consumerProduction = computed(
 const countersNotInHome = computed(
   () => mqttStore.notInHomeConsumption.counterIds.length > 0,
 );
+const notInHomeVariants = {
+  consumer: {
+    label: 'Verbraucher',
+    class: 'consumer',
+    iconComponent: ConsumerIcon,
+    iconColor: 'var(--q-consumer)',
+  },
+  counter: {
+    label: 'Zähler',
+    class: 'not-in-home',
+    iconComponent: CounterIcon,
+    iconColor: 'var(--q-secondary-counter-stroke)',
+  },
+  mixed: {
+    label: 'Sonstiges',
+    class: 'not-in-home',
+    iconComponent: MiscDevicesIcon,
+    iconColor: 'var(--q-secondary-counter-stroke)',
+  },
+};
+const notInHomeVariant = computed(() => {
+  if (!countersNotInHome.value) {
+    return notInHomeVariants.consumer;
+  }
+  return mqttStore.notInHomeConsumption.consumerIds.length > 0
+    ? notInHomeVariants.mixed
+    : notInHomeVariants.counter;
+});
 const detailsVisible = ref(false);
 const detailsScope = ref<'inHome' | 'notInHome'>('inHome');
 
@@ -434,20 +463,18 @@ const svgComponents = computed((): FlowComponent[] => {
     components.push({
       id: 'consumer',
       class: {
-        base: countersNotInHome.value ? 'not-in-home' : 'consumer',
+        base: notInHomeVariant.value.class,
         animated: consumerProduction.value,
         animatedReverse: consumerConsumption.value,
       },
       position: { row: 0, column: 1 },
       label: [
-        countersNotInHome.value ? 'Sonstige' : 'Verbraucher',
+        notInHomeVariant.value.label,
         absoluteValueObject(consumerPower.value).textValue,
       ],
       powerValue: Number(consumerPower.value.value),
-      iconComponent: countersNotInHome.value ? CounterIcon : ConsumerIcon,
-      iconColor: countersNotInHome.value
-        ? 'var(--q-secondary-counter-stroke)'
-        : 'var(--q-consumer)',
+      iconComponent: notInHomeVariant.value.iconComponent,
+      iconColor: notInHomeVariant.value.iconColor,
       showInfo: notInHomeHasDetails.value,
     });
   }

From 1d838c538fcbff9e4d8e2d7ae897d9550343c058 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 6 Oct 2026 13:51:02 +0200
Subject: [PATCH 12/17] display component power value in dialog

---
 .../energyFlowChart/HomeConsumptionDetailsDialog.vue      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index 34f7fd2223..102f5bb1fa 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -28,7 +28,10 @@
               />
             </q-item-section>
             <q-item-section>
-              <q-item-label>{{ item.name }}</q-item-label>
+              <div class="row no-wrap items-center">
+                <div class="col">{{ item.name }}</div>
+                <div class="q-pl-md text-no-wrap">{{ item.power }}</div>
+              </div>
             </q-item-section>
           </q-item>
         </q-list>
@@ -53,6 +56,7 @@ interface DetailsItem {
   name: string;
   icon: Component;
   color: string;
+  power: string;
 }
 
 const props = defineProps<{
@@ -89,6 +93,7 @@ const items = computed((): DetailsItem[] => {
       name: mqttStore.consumerName(id) || `Verbraucher ${id}`,
       icon: ConsumerIcon,
       color: mqttStore.consumerColor(id) || 'var(--q-consumer)',
+      power: mqttStore.consumerPower(id, 'textValue') as string,
     })),
     ...counterIds.map((id) => ({
       key: `counter-${id}`,
@@ -97,6 +102,7 @@ const items = computed((): DetailsItem[] => {
       color:
         mqttStore.secondaryCounterColor(id) ||
         'var(--q-secondary-counter-stroke)',
+      power: mqttStore.counterPower('textValue', id) as string,
     })),
   ];
 });

From 7285b304e98dd55a2a0b1dc2cc8230a489665871 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 6 Oct 2026 14:47:45 +0200
Subject: [PATCH 13/17] rename dialog titles - don't blur background

---
 .../charts/energyFlowChart/EnergyFlowChart.vue        |  6 ++++++
 .../energyFlowChart/HomeConsumptionDetailsDialog.vue  | 11 ++---------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index d17f00b221..87d43d1f44 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -154,6 +154,11 @@ const notInHomeVariant = computed(() => {
 });
 const detailsVisible = ref(false);
 const detailsScope = ref<'inHome' | 'notInHome'>('inHome');
+const detailsTitle = computed(() =>
+  detailsScope.value === 'inHome'
+    ? 'Im Hausverbrauch enthalten:'
+    : notInHomeVariant.value.label,
+);
 
 const openDetails = (event: MouseEvent, component: FlowComponent) => {
   if (!component.showInfo) {
@@ -1010,6 +1015,7 @@ const labelClipPath = computed(() => {
     <HomeConsumptionDetailsDialog
       v-model="detailsVisible"
       :scope="detailsScope"
+      :title="detailsTitle"
     />
   </div>
 </template>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index 102f5bb1fa..cdd520158a 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog v-model="visible" :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'">
+  <q-dialog v-model="visible">
     <q-card class="card-width">
       <q-card-section>
         <div class="row no-wrap items-center">
@@ -43,7 +43,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { Screen } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
@@ -62,6 +61,7 @@ interface DetailsItem {
 const props = defineProps<{
   modelValue: boolean;
   scope: 'inHome' | 'notInHome';
+  title: string;
 }>();
 
 const emit = defineEmits<{
@@ -74,13 +74,6 @@ const visible = computed({
   get: () => props.modelValue,
   set: (value) => emit('update:modelValue', value),
 });
-const isSmallScreen = computed(() => Screen.lt.sm);
-
-const title = computed(() =>
-  props.scope === 'inHome'
-    ? 'Im Hausverbrauch:'
-    : 'Nicht im Hausverbrauch:',
-);
 
 const items = computed((): DetailsItem[] => {
   const { consumerIds, counterIds } =

From 5d2a81f1153b3e07bbc23f2e195e9893320135bc Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 6 Oct 2026 15:53:04 +0200
Subject: [PATCH 14/17] formatting

---
 .../web_themes/koala/source/src/stores/mqtt-store.ts        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 33d6e8a54a..2767add572 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
@@ -4853,12 +4853,12 @@ export const useMqttStore = defineStore('mqtt', () => {
     // Home data
     homePower,
     homeDailyYield,
-    // PV data
-    pvConfigured,
-    hybridInverters,
     inHomeConsumption,
     notInHomeConsumption,
     notInHomeConsumptionPower,
+    // PV data
+    pvConfigured,
+    hybridInverters,
     pvPowerTotal,
     pvDailyExported,
     pvIds,

From 44a5b9026f6eab10c997810978bfbe2e10535e60 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 7 Oct 2026 09:37:59 +0200
Subject: [PATCH 15/17] update info icon color

---
 .../src/components/charts/energyFlowChart/EnergyFlowChart.vue | 2 +-
 .../charts/energyFlowChart/HomeConsumptionDetailsDialog.vue   | 2 +-
 .../web_themes/koala/source/src/css/quasar.variables.scss     | 4 ----
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 87d43d1f44..2017b1dfc8 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -1178,7 +1178,7 @@ circle:not(.soc) {
 }
 
 .info-badge .info-icon {
-  color: var(--q-flow-chart-info);
+  color: var(--q-primary);
 }
 
 rect {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index cdd520158a..f6be0b45bb 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -117,7 +117,7 @@ const items = computed((): DetailsItem[] => {
 }
 .title-icon {
   flex-shrink: 0;
-  color: var(--q-flow-chart-info);
+  color: var(--q-primary);
 }
 .q-item__section--avatar {
   min-width: 0;
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 4879c786e3..98a8961276 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -61,7 +61,6 @@ $chart-shadow: $secondary;
 // energy flow chart: shadow behind the pills and the icon circles
 $flow-chart-shadow: #000000;
 $flow-chart-shadow-opacity: 0.12;
-$flow-chart-info: #2aa8ff;
 $consumer: #7d42f5;
 // Light theme (default)
 :root {
@@ -81,7 +80,6 @@ $consumer: #7d42f5;
   --q-chart-shadow: #{$chart-shadow};
   --q-flow-chart-shadow: #{$flow-chart-shadow};
   --q-flow-chart-shadow-opacity: #{$flow-chart-shadow-opacity};
-  --q-flow-chart-info: #{$flow-chart-info};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -247,7 +245,6 @@ $dark-chart-shadow: #000000;
 // energy flow chart: shadow behind the pills and the icon circles
 $dark-flow-chart-shadow: #000000;
 $dark-flow-chart-shadow-opacity: 0.45;
-$dark-flow-chart-info: #2aa8ff;
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -285,7 +282,6 @@ $dark-table-hover: #ffffff12;
   --q-chart-shadow: #{$dark-chart-shadow};
   --q-flow-chart-shadow: #{$dark-flow-chart-shadow};
   --q-flow-chart-shadow-opacity: #{$dark-flow-chart-shadow-opacity};
-  --q-flow-chart-info: #{$dark-flow-chart-info};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};

From f7bd6e7380e1b1863891a6df8df707ef4e563eeb Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 12 Oct 2026 10:25:36 +0200
Subject: [PATCH 16/17] add unmeasured home power to in home dialog

---
 .../HomeConsumptionDetailsDialog.vue          | 15 ++++++++++++
 .../koala/source/src/stores/mqtt-store.ts     | 23 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index f6be0b45bb..1d442992a5 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -46,6 +46,7 @@ import type { Component } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
+import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
 import InfoIcon from 'src/assets/icons/owbInformation.svg?component';
 
 defineOptions({ name: 'HomeConsumptionDetailsDialog' });
@@ -80,6 +81,19 @@ const items = computed((): DetailsItem[] => {
     props.scope === 'inHome'
       ? mqttStore.inHomeConsumption
       : mqttStore.notInHomeConsumption;
+  const unmeasured =
+    props.scope === 'inHome' &&
+    mqttStore.unmeasuredHomeConsumptionPower('value') !== undefined
+      ? [
+          {
+            key: 'unmeasured',
+            name: 'nicht erfasst',
+            icon: HouseIcon,
+            color: 'var(--q-home-stroke)',
+            power: mqttStore.unmeasuredHomeConsumptionPower() as string,
+          },
+        ]
+      : [];
   return [
     ...consumerIds.map((id) => ({
       key: `consumer-${id}`,
@@ -97,6 +111,7 @@ const items = computed((): DetailsItem[] => {
         'var(--q-secondary-counter-stroke)',
       power: mqttStore.counterPower('textValue', id) as string,
     })),
+    ...unmeasured,
   ];
 });
 </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 2767add572..999dc0c400 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
@@ -4485,6 +4485,28 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the part of the home consumption that is not measured by a
+   * component.
+   * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @returns string | number | ValueObject
+   */
+  const unmeasuredHomeConsumptionPower = computed(() => {
+    return (returnType: string = 'textValue') => {
+      const power = getValue.value(
+        'openWB/counter/set/unmeasured_home_consumption',
+      ) as number | undefined;
+      const valueObject = getValueObject.value(power);
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      if (returnType == 'object') {
+        return valueObject;
+      }
+      console.error('returnType not found!', returnType, power);
+    };
+  });
+
   /**
    * Get pv power
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -4856,6 +4878,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     inHomeConsumption,
     notInHomeConsumption,
     notInHomeConsumptionPower,
+    unmeasuredHomeConsumptionPower,
     // PV data
     pvConfigured,
     hybridInverters,

From 1a08af78aed196a8509a536425ccdef934d04cec Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 12 Oct 2026 10:31:19 +0200
Subject: [PATCH 17/17] Formatting

---
 .../charts/energyFlowChart/HomeConsumptionDetailsDialog.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
index 1d442992a5..cabef6a752 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/HomeConsumptionDetailsDialog.vue
@@ -87,7 +87,7 @@ const items = computed((): DetailsItem[] => {
       ? [
           {
             key: 'unmeasured',
-            name: 'nicht erfasst',
+            name: 'Nicht erfasst',
             icon: HouseIcon,
             color: 'var(--q-home-stroke)',
             power: mqttStore.unmeasuredHomeConsumptionPower() as string,