diff --git a/webclient-vue/src/components/area/AreaAssignSection.vue b/webclient-vue/src/components/area/AreaAssignSection.vue
index b8012c8..84d123d 100644
--- a/webclient-vue/src/components/area/AreaAssignSection.vue
+++ b/webclient-vue/src/components/area/AreaAssignSection.vue
@@ -6,10 +6,10 @@
         :to="{ name: 'area-detail', params: { id: area.id } }"
         class="area-card"
       >
-        <div class="area-card-icon"><i class="ph ph-map-trifold"></i></div>
+        <div class="area-card-icon text-primary"><i class="ph ph-map-trifold"></i></div>
         <div class="area-card-info">
           <strong>{{ area.display_name }}</strong>
-          <small>{{ area.type }} — {{ area.alias }}</small>
+          <small class="text-muted">{{ area.type }} — {{ area.alias }}</small>
         </div>
       </router-link>
     </div>
@@ -92,7 +92,6 @@
 
 .area-card-icon {
   font-size: 20px;
-  color: var(--color-primary);
 }
 
 .area-card-info {
@@ -102,7 +101,6 @@
 }
 
 .area-card-info small {
-  color: var(--color-muted);
   font-size: 12px;
 }
 
diff --git a/webclient-vue/src/components/area/AreaBadgeLink.vue b/webclient-vue/src/components/area/AreaBadgeLink.vue
index 03665b1..d35bbac 100644
--- a/webclient-vue/src/components/area/AreaBadgeLink.vue
+++ b/webclient-vue/src/components/area/AreaBadgeLink.vue
@@ -6,7 +6,7 @@
   >
     <GnBadge variant="info">{{ area.display_name }}</GnBadge>
   </router-link>
-  <span v-else-if="areaId" class="muted">Area ID: {{ areaId }}</span>
+  <span v-else-if="areaId" class="text-muted" style="font-size: 13px">Area ID: {{ areaId }}</span>
 </template>
 
 <script setup>
@@ -22,9 +22,4 @@
 .area-link {
   text-decoration: none;
 }
-
-.muted {
-  color: var(--color-muted);
-  font-size: 13px;
-}
 </style>
diff --git a/webclient-vue/src/components/device/DeviceTable.vue b/webclient-vue/src/components/device/DeviceTable.vue
index 8213308..8fd13c6 100644
--- a/webclient-vue/src/components/device/DeviceTable.vue
+++ b/webclient-vue/src/components/device/DeviceTable.vue
@@ -10,7 +10,7 @@
         class="device-link"
       >
         <div class="device-cell">
-          <div class="device-icon" v-html="typeIcon(row.device_type)" />
+          <div class="device-icon text-primary" v-html="typeIcon(row.device_type)" />
           <div class="device-info">
             <div class="device-name-row">
               <strong>{{ row.name || row.alias || `Device #${row.id}` }}</strong>
@@ -23,7 +23,7 @@
                 aria-hidden="true"
               />
             </div>
-            <small>{{ row.alias }} — {{ row.device_ip || '—' }}</small>
+            <small class="text-muted">{{ row.alias }} — {{ row.device_ip || '—' }}</small>
           </div>
         </div>
       </router-link>
@@ -119,7 +119,6 @@
 
 .device-icon {
   font-size: 20px;
-  color: var(--color-primary);
 }
 
 .device-info {
@@ -145,7 +144,6 @@
 }
 
 .device-info small {
-  color: var(--color-muted);
   font-size: 12px;
 }
 
diff --git a/webclient-vue/src/composables/useAreaAssign.js b/webclient-vue/src/composables/useAreaAssign.js
index 2059797..6a61b04 100644
--- a/webclient-vue/src/composables/useAreaAssign.js
+++ b/webclient-vue/src/composables/useAreaAssign.js
@@ -3,12 +3,15 @@
 
 export function useAreaAssign() {
   const areasStore = useAreasStore();
+  const excludeId = ref("");
 
   const areaOptions = computed(() =>
-    areasStore.areas.map((a) => ({
-      value: String(a.id),
-      label: `${a.display_name} (${a.type})`,
-    }))
+    areasStore.areas
+      .filter((a) => String(a.id) !== String(excludeId.value))
+      .map((a) => ({
+        value: String(a.id),
+        label: `${a.display_name} (${a.type})`,
+      }))
   );
 
   const showAssignModal = ref(false);
@@ -18,6 +21,7 @@
 
   function openAssign(currentAreaId) {
     selectedAreaId.value = currentAreaId ? String(currentAreaId) : "";
+    excludeId.value = currentAreaId ? String(currentAreaId) : "";
     assignError.value = "";
     showAssignModal.value = true;
   }
diff --git a/webclient-vue/src/features/areas/components/AreaFavoriteButton.vue b/webclient-vue/src/features/areas/components/AreaFavoriteButton.vue
index 150ea3d..50327de 100644
--- a/webclient-vue/src/features/areas/components/AreaFavoriteButton.vue
+++ b/webclient-vue/src/features/areas/components/AreaFavoriteButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn-icon area-favorite-btn"
-    :class="{ 'is-active': isFavorite }"
+    :class="{ 'is-active': isFavorite, 'text-muted': !isFavorite, 'text-warning': isFavorite }"
     type="button"
     :aria-label="isFavorite ? 'Remove bookmark' : 'Bookmark'"
     @click.stop="favoritesStore.toggle(areaId)"
diff --git a/webclient-vue/src/features/areas/components/AreaTreeNode.vue b/webclient-vue/src/features/areas/components/AreaTreeNode.vue
index f1a2d58..b489a4f 100644
--- a/webclient-vue/src/features/areas/components/AreaTreeNode.vue
+++ b/webclient-vue/src/features/areas/components/AreaTreeNode.vue
@@ -3,6 +3,7 @@
     <article class="area-tree-card" @click="goToDetail">
       <button
         class="tree-toggle"
+        :class="{ 'text-primary': !isLeaf, 'text-muted': isLeaf }"
         type="button"
         :disabled="isLeaf"
         :aria-expanded="isOpen"
@@ -13,7 +14,7 @@
 
       <div class="area-tree-info">
         <h2>{{ area.display_name }}</h2>
-        <p>
+        <p class="text-muted">
           <GnBadge variant="secondary">{{ area.type }}</GnBadge>
           <code>{{ area.alias }}</code>
         </p>
@@ -34,7 +35,7 @@
     </ul>
   </li>
   <li v-else class="area-tree-node">
-    <article class="area-tree-card area-tree-cycle">
+    <article class="area-tree-card area-tree-cycle text-danger">
       Cycle skipped for area ID {{ area.id }}
     </article>
   </li>
diff --git a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
index f79a4ba..306f65e 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -340,7 +340,6 @@
 }
 
 function openAssign() {
-  console.log("[AreaDetailPage] openAssign called");
   openAssignModal(area.value?.parent_id > 0 ? area.value.parent_id : "");
 }
 
@@ -428,8 +427,4 @@
 .form-group {
   margin-bottom: 16px;
 }
-
-.area-link {
-  color: var(--color-primary);
-}
 </style>
diff --git a/webclient-vue/src/features/areas/pages/__tests__/AreaFavoritesPage.spec.js b/webclient-vue/src/features/areas/pages/__tests__/AreaFavoritesPage.spec.js
new file mode 100644
index 0000000..47952bb
--- /dev/null
+++ b/webclient-vue/src/features/areas/pages/__tests__/AreaFavoritesPage.spec.js
@@ -0,0 +1,36 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { setActivePinia, createPinia } from "pinia";
+import { useAreasStore } from "../../../../stores/areas.js";
+import { useFavoritesStore } from "../../../../stores/favorites.js";
+import AreaFavoritesPage from "../AreaFavoritesPage.vue";
+
+describe("AreaFavoritesPage", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("renders loading state", () => {
+    const store = useAreasStore();
+    store.isLoading = true;
+    const wrapper = mount(AreaFavoritesPage);
+    expect(wrapper.text()).toContain("Loading areas");
+  });
+
+  it("renders empty state when no favorites", async () => {
+    const wrapper = mount(AreaFavoritesPage);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(wrapper.text()).toContain("No favorite areas");
+  });
+
+  it("renders favorite areas after loading", async () => {
+    const favoritesStore = useFavoritesStore();
+    favoritesStore.add(1); // Kitchen from MSW mock
+
+    const wrapper = mount(AreaFavoritesPage);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(wrapper.text()).toContain("Kitchen");
+    expect(wrapper.text()).toContain("room");
+  });
+});
diff --git a/webclient-vue/src/features/devices/components/DeviceChannelsState.vue b/webclient-vue/src/features/devices/components/DeviceChannelsState.vue
index 033b836..a83337c 100644
--- a/webclient-vue/src/features/devices/components/DeviceChannelsState.vue
+++ b/webclient-vue/src/features/devices/components/DeviceChannelsState.vue
@@ -157,8 +157,8 @@
       </template>
 
       <template v-else>
-        <span class="unknown-type">Unknown type</span>
-        <pre v-if="jsonPreview" class="raw-json">{{ jsonPreview }}</pre>
+        <span class="unknown-type text-muted">Unknown type</span>
+        <pre v-if="jsonPreview" class="raw-json text-muted">{{ jsonPreview }}</pre>
       </template>
     </div>
 
@@ -179,11 +179,9 @@
 }
 .unknown-type {
   font-size: 12px;
-  color: var(--color-muted);
 }
 .raw-json {
   font-size: 10px;
-  color: var(--color-muted);
   margin: 4px 0 0;
   max-width: 400px;
   overflow: hidden;
diff --git a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
index b72822f..e4af3ad 100644
--- a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
+++ b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
@@ -25,11 +25,11 @@
 
       <div class="script-info-panel">
         <div class="info-row">
-          <span class="info-label">Type:</span>
+          <span class="info-label text-muted">Type:</span>
           <span class="info-value">{{ device.device_type }}</span>
         </div>
         <div class="info-row">
-          <span class="info-label">State:</span>
+          <span class="info-label text-muted">State:</span>
           <span class="info-value">
             <DeviceChannelsState
               :device-type="device.device_type"
@@ -41,27 +41,27 @@
           </span>
         </div>
         <div class="info-row">
-          <span class="info-label">IP:</span>
+          <span class="info-label text-muted">IP:</span>
           <span class="info-value">{{ device.device_ip }}</span>
         </div>
         <div class="info-row">
-          <span class="info-label">MAC:</span>
+          <span class="info-label text-muted">MAC:</span>
           <span class="info-value">{{ device.device_mac }}</span>
         </div>
         <div class="info-row">
-          <span class="info-label">Hard ID:</span>
+          <span class="info-label text-muted">Hard ID:</span>
           <span class="info-value">{{ device.device_hard_id }}</span>
         </div>
         <div class="info-row">
-          <span class="info-label">Firmware:</span>
+          <span class="info-label text-muted">Firmware:</span>
           <span class="info-value">{{ device.firmware_version }}</span>
         </div>
         <div v-if="device.last_contact" class="info-row">
-          <span class="info-label">Last contact:</span>
+          <span class="info-label text-muted">Last contact:</span>
           <span class="info-value">{{ device.last_contact }}</span>
         </div>
         <div v-if="device.create_at" class="info-row">
-          <span class="info-label">Created:</span>
+          <span class="info-label text-muted">Created:</span>
           <span class="info-value">{{ device.create_at }}</span>
         </div>
       </div>
@@ -441,7 +441,6 @@
 }
 
 .info-label {
-  color: var(--color-muted);
   font-size: 12px;
   text-transform: uppercase;
   min-width: 48px;
diff --git a/webclient-vue/src/features/devices/pages/DevicesScanningPage.vue b/webclient-vue/src/features/devices/pages/DevicesScanningPage.vue
index 03f16eb..315ad33 100644
--- a/webclient-vue/src/features/devices/pages/DevicesScanningPage.vue
+++ b/webclient-vue/src/features/devices/pages/DevicesScanningPage.vue
@@ -13,7 +13,7 @@
     </GnPageHeader>
 
     <div class="scan-filters">
-      <span class="filter-label">Mode:</span>
+      <span class="filter-label text-muted">Mode:</span>
       <GnChip
         :selected="scanningStore.mode === 'setup'"
         clickable
@@ -209,7 +209,6 @@
 }
 
 .filter-label {
-  color: var(--color-muted);
   font-size: 13px;
   text-transform: uppercase;
 }
diff --git a/webclient-vue/src/features/devices/pages/__tests__/DevicesListPage.spec.js b/webclient-vue/src/features/devices/pages/__tests__/DevicesListPage.spec.js
new file mode 100644
index 0000000..6b00401
--- /dev/null
+++ b/webclient-vue/src/features/devices/pages/__tests__/DevicesListPage.spec.js
@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { setActivePinia, createPinia } from "pinia";
+import { useDevicesStore } from "../../../../stores/devices.js";
+import DevicesListPage from "../DevicesListPage.vue";
+
+const routerLinkStub = { template: "<a><slot /></a>" };
+
+describe("DevicesListPage", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("renders loading state", () => {
+    const store = useDevicesStore();
+    store.isLoading = true;
+    const wrapper = mount(DevicesListPage);
+    expect(wrapper.text()).toContain("Loading devices");
+  });
+
+  it("renders device table after loading", async () => {
+    const wrapper = mount(DevicesListPage, {
+      global: { stubs: { "router-link": routerLinkStub } },
+    });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(wrapper.text()).toContain("Relay 1");
+    expect(wrapper.text()).toContain("Total: 1");
+  });
+
+  it("shows stale badge for old data", async () => {
+    const store = useDevicesStore();
+    store.lastLoadedAt = new Date(Date.now() - 10 * 60 * 1000).toISOString();
+    store.isLoading = false;
+    store.devices = [
+      { id: 1, name: "Relay 1", alias: "relay_1", device_type: "relay", device_ip: "192.168.1.10", connection_status: "active" },
+    ];
+    vi.spyOn(store, "loadDevices").mockResolvedValue({ ok: true });
+    vi.spyOn(store, "loadDeviceStates").mockResolvedValue();
+
+    const wrapper = mount(DevicesListPage, {
+      global: { stubs: { "router-link": routerLinkStub } },
+    });
+    await flushPromises();
+    expect(wrapper.text()).toContain("Stale data");
+  });
+});
diff --git a/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue b/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
index 1203869..45f1b3d 100644
--- a/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
+++ b/webclient-vue/src/features/scripts/pages/ScriptDetailPage.vue
@@ -43,15 +43,15 @@
 
         <div class="script-info-panel">
           <div v-if="script.filename" class="info-row">
-            <span class="info-label">File:</span>
+            <span class="info-label text-muted">File:</span>
             <span class="info-value">{{ script.filename }}</span>
           </div>
           <div v-if="script.path" class="info-row">
-            <span class="info-label">Path:</span>
+            <span class="info-label text-muted">Path:</span>
             <span class="info-value">{{ script.path }}</span>
           </div>
           <div v-if="script.created_by" class="info-row">
-            <span class="info-label">Author:</span>
+            <span class="info-label text-muted">Author:</span>
             <span class="info-value">{{ script.created_by }}</span>
           </div>
         </div>
@@ -170,7 +170,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import Prism from "prismjs";
 import "prismjs/components/prism-markup-templating";
@@ -324,7 +324,7 @@
   if (!script.value?.alias) return;
   const result = await scriptsStore.runScript(script.value.alias);
   if (result?.ok) {
-    toast.success({ title: `Ran ${script.value.alias}`, text: result.execTime ? `Exec time: ${result.execTime}` : undefined });
+    toast.success({ title: `Ran ${script.value.alias}`, text: scriptsStore.lastRunResult?.execTime ? `Exec time: ${scriptsStore.lastRunResult.execTime}` : undefined });
   } else {
     toast.error({ title: `Failed ${script.value.alias}`, text: result?.error?.message || "Unknown error" });
   }
@@ -435,6 +435,10 @@
   init();
 });
 
+onUnmounted(() => {
+  scriptsStore.clearScopeCode();
+});
+
 watch(() => [route.params.type, route.params.id], ([newType, newId], [oldType, oldId]) => {
   if (newType !== oldType || newId !== oldId) {
     scriptsStore.clearScopeCode();
@@ -521,7 +525,6 @@
 }
 
 .info-label {
-  color: var(--color-muted);
   font-size: 12px;
   text-transform: uppercase;
   min-width: 48px;
diff --git a/webclient-vue/src/features/scripts/pages/ScriptsActionsPage.vue b/webclient-vue/src/features/scripts/pages/ScriptsActionsPage.vue
index 6df139e..dd748f5 100644
--- a/webclient-vue/src/features/scripts/pages/ScriptsActionsPage.vue
+++ b/webclient-vue/src/features/scripts/pages/ScriptsActionsPage.vue
@@ -83,7 +83,7 @@
 async function run(alias) {
   const result = await scriptsStore.runScript(alias);
   if (result?.ok) {
-    toast.success({ title: `Ran ${alias}`, text: result.execTime ? `Exec time: ${result.execTime}` : undefined });
+    toast.success({ title: `Ran ${alias}`, text: scriptsStore.lastRunResult?.execTime ? `Exec time: ${scriptsStore.lastRunResult.execTime}` : undefined });
   } else {
     toast.error({ title: `Failed ${alias}`, text: result?.error?.message || "Unknown error" });
   }
diff --git a/webclient-vue/src/features/scripts/pages/__tests__/ScriptsActionsPage.spec.js b/webclient-vue/src/features/scripts/pages/__tests__/ScriptsActionsPage.spec.js
new file mode 100644
index 0000000..8aa7686
--- /dev/null
+++ b/webclient-vue/src/features/scripts/pages/__tests__/ScriptsActionsPage.spec.js
@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { setActivePinia, createPinia } from "pinia";
+import { useScriptsStore } from "../../../../stores/scripts.js";
+import ScriptsActionsPage from "../ScriptsActionsPage.vue";
+
+describe("ScriptsActionsPage", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("renders loading state", () => {
+    const store = useScriptsStore();
+    store.isLoadingActions = true;
+    const wrapper = mount(ScriptsActionsPage);
+    expect(wrapper.text()).toContain("Loading actions");
+  });
+
+  it("renders action cards after loading", async () => {
+    const wrapper = mount(ScriptsActionsPage);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(wrapper.text()).toContain("Kitchen Light");
+    expect(wrapper.text()).toContain("Hall Light");
+    expect(wrapper.text()).toContain("enabled");
+  });
+
+  it("renders area badge for assigned script", async () => {
+    const wrapper = mount(ScriptsActionsPage);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(wrapper.text()).toContain("Kitchen"); // area badge for kitchen_light
+  });
+});
diff --git a/webclient-vue/src/stores/devices.js b/webclient-vue/src/stores/devices.js
index f33be24..4aba72b 100644
--- a/webclient-vue/src/stores/devices.js
+++ b/webclient-vue/src/stores/devices.js
@@ -102,14 +102,17 @@
     };
   }
 
-  async function loadStatesFor(targets, options = {}) {
+  async function _loadDeviceStatesCore(source, options, clearMap) {
     const runId = stateRunId.value + 1;
     stateRunId.value = runId;
     isLoadingStates.value = true;
     stateError.value = null;
+    if (clearMap) {
+      stateByDeviceId.value = {};
+    }
 
     const items = [];
-    for (const device of targets) {
+    for (const device of source) {
       if (device.connection_status === "lost") {
         setDeviceState(device, {
           status: "skipped",
@@ -154,58 +157,12 @@
     }
   }
 
+  async function loadStatesFor(targets, options = {}) {
+    return _loadDeviceStatesCore(targets, options, false);
+  }
+
   async function loadDeviceStates(options = {}) {
-    const runId = stateRunId.value + 1;
-    stateRunId.value = runId;
-    isLoadingStates.value = true;
-    stateError.value = null;
-    stateByDeviceId.value = {};
-
-    const targets = [];
-
-    for (const device of devices.value) {
-      if (device.connection_status === "lost") {
-        setDeviceState(device, {
-          status: "skipped",
-          message: "Connection lost",
-          connectionStatus: "lost",
-        });
-      } else {
-        setDeviceState(device, {
-          status: "loading",
-          message: "Loading",
-        });
-        targets.push(device);
-      }
-    }
-
-    try {
-      await runLimited(targets, options.concurrency || DEFAULT_STATE_CONCURRENCY, async (device) => {
-        const result = await devicesApi.status(device.id);
-
-        if (stateRunId.value !== runId) {
-          return;
-        }
-
-        stateByDeviceId.value = {
-          ...stateByDeviceId.value,
-          [getDeviceId(device)]: result.ok
-            ? normalizeStatusSuccess(device, result)
-            : normalizeStatusError(device, result),
-        };
-      });
-    } catch (error) {
-      if (stateRunId.value === runId) {
-        stateError.value = {
-          type: "state_loader_error",
-          message: error?.message || "Device states loader failed",
-        };
-      }
-    } finally {
-      if (stateRunId.value === runId) {
-        isLoadingStates.value = false;
-      }
-    }
+    return _loadDeviceStatesCore(devices.value, options, true);
   }
 
   async function rebootDevice(id) {
diff --git a/webclient-vue/src/stores/favorites.js b/webclient-vue/src/stores/favorites.js
index 68f0892..c124950 100644
--- a/webclient-vue/src/stores/favorites.js
+++ b/webclient-vue/src/stores/favorites.js
@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import { defineStore } from "pinia";
 
 const STORAGE_KEY = "sh_fav_areas";
@@ -14,37 +15,40 @@
   localStorage.setItem(STORAGE_KEY, JSON.stringify(ids.map(String)));
 }
 
-export const useFavoritesStore = defineStore("favorites", {
-  state: () => ({
-    ids: readFavorites(),
-  }),
+export const useFavoritesStore = defineStore("favorites", () => {
+  const ids = ref(readFavorites());
 
-  actions: {
-    has(id) {
-      return this.ids.includes(String(id));
-    },
+  function has(id) {
+    return ids.value.includes(String(id));
+  }
 
-    add(id) {
-      const nextId = String(id);
-      if (!this.ids.includes(nextId)) {
-        this.ids.push(nextId);
-        writeFavorites(this.ids);
-      }
-    },
+  function add(id) {
+    const nextId = String(id);
+    if (!ids.value.includes(nextId)) {
+      ids.value.push(nextId);
+      writeFavorites(ids.value);
+    }
+  }
 
-    remove(id) {
-      this.ids = this.ids.filter((item) => item !== String(id));
-      writeFavorites(this.ids);
-    },
+  function remove(id) {
+    ids.value = ids.value.filter((item) => item !== String(id));
+    writeFavorites(ids.value);
+  }
 
-    toggle(id) {
-      if (this.has(id)) {
-        this.remove(id);
-        return false;
-      }
+  function toggle(id) {
+    if (has(id)) {
+      remove(id);
+      return false;
+    }
+    add(id);
+    return true;
+  }
 
-      this.add(id);
-      return true;
-    },
-  },
+  return {
+    ids,
+    has,
+    add,
+    remove,
+    toggle,
+  };
 });
diff --git a/webclient-vue/src/styles/main.css b/webclient-vue/src/styles/main.css
index 75a8996..cdd47ac 100644
--- a/webclient-vue/src/styles/main.css
+++ b/webclient-vue/src/styles/main.css
@@ -116,22 +116,16 @@
   background: var(--color-panel-strong);
 }
 
-.area-tree-cycle {
-  color: var(--color-danger);
-}
-
 .tree-toggle {
   width: 36px;
   height: 36px;
   border: 2px solid currentColor;
   background: transparent;
-  color: var(--color-primary);
   cursor: pointer;
   font-weight: 800;
 }
 
 .tree-toggle:disabled {
-  color: var(--color-muted);
   cursor: default;
 }
 
@@ -148,25 +142,6 @@
   margin: 0;
 }
 
-.area-tree-info p {
-  color: var(--color-muted);
-}
-
-.area-favorite-btn {
-  color: var(--color-muted);
-}
-
-.area-favorite-btn:hover {
-  color: var(--color-text);
-}
-
-.area-favorite-btn.is-active {
-  color: var(--color-warning);
-}
-
-.area-favorite-btn.is-active:hover {
-  color: var(--color-warning-hover, #d69e2e);
-}
 
 .devices-panel {
   display: grid;