style: auto-fix lint and format

Add SurveyIndicator (purple dot) around the avatar and render
SurveyMenuItem + SurveyModal in the user avatar dropdown menu.

apps/nextjs/src/components/board/sections/content.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from "react";
 
 import type { GridItemHTMLElement } from "@homarr/gridstack";
-import { WidgetSizeProvider } from "@homarr/widgets";
 
 import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 import { BoardItemContent } from "../items/item-content";
@@ -19,7 +18,7 @@ export const SectionContent = () => {
    * @see https://github.com/homarr-labs/homarr/pull/1770
    */
   const sortedItems = useMemo(() => {
-    return [...items, ...innerSections].toSorted((itemA, itemB) => {
+    return [...items, ...innerSections].sort((itemA, itemB) => {
       if (itemA.yOffset === itemB.yOffset) {
         return itemA.xOffset - itemB.xOffset;
       }
@@ -60,13 +59,7 @@ const Item = ({ item, innerRef }: ItemProps) => {
       minWidth={minWidth}
       minHeight={minHeight}
     >
-      {item.type === "item" ? (
-        <WidgetSizeProvider gridWidth={item.width} gridHeight={item.height}>
-          <BoardItemContent item={item} />
-        </WidgetSizeProvider>
-      ) : (
-        <BoardDynamicSection section={item} />
-      )}
+      {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
     </GridStackItem>
   );
 };

apps/nextjs/src/components/layout/header/survey.tsx

@@ -0,0 +1,379 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import {
+  Button,
+  Checkbox,
+  Group,
+  Indicator,
+  Menu,
+  Modal,
+  Radio,
+  Stack,
+  Stepper,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconMessageCircle } from "@tabler/icons-react";
+import { z } from "zod/v4";
+
+import { parseCookies, setClientCookie } from "@homarr/common";
+import { surveyAnsweredCookieKey } from "@homarr/definitions";
+import { useZodForm } from "@homarr/form";
+
+const surveySchema = z
+  .object({
+    features: z.array(z.string()).min(1),
+    integration: z.string().min(1),
+    integrationOther: z.string().optional(),
+    aiImportance: z.string().min(1),
+    wishlist: z.string().optional(),
+    frustrations: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.integration === "Other" && !data.integrationOther?.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        message: "Required",
+        path: ["integrationOther"],
+      });
+    }
+  });
+
+type SurveyFormValues = z.infer<typeof surveySchema>;
+
+const featureChoices = [
+  "Export / import config",
+  "MCP (Model Context Protocol) support",
+  "New widgets (weather, calendar, RSS, etc.)",
+  "New integrations",
+  "Custom widgets (create your own)",
+  "Automatic mobile layouts / better drag and drop",
+] as const;
+
+const integrationChoices = [
+  "Home automation (Home Assistant, openHAB, Zigbee2MQTT…)",
+  "Media servers (Plex, Jellyfin, Emby, Navidrome…)",
+  "Monitoring & observability (Prometheus, Grafana, Uptime Kuma…)",
+  "Infrastructure (Proxmox, TrueNAS, Portainer…)",
+  "Cloud & productivity (Nextcloud, Paperless, Vaultwarden…)",
+  "Other",
+] as const;
+
+const aiImportanceChoices = [
+  "Very important – I'd use it immediately",
+  "Somewhat important – nice to have",
+  "Not important – I don't care",
+  "I'm not sure what this means yet",
+] as const;
+
+const requiredSteps = [0, 1, 2] as const;
+
+const integrationStepValidators: Record<string, (values: SurveyFormValues) => boolean> = {
+  Other: (values) => Boolean(values.integrationOther?.trim()),
+  ...(Object.fromEntries(
+    integrationChoices.filter((choice) => choice !== "Other").map((choice) => [choice, () => true]),
+  ) as Record<string, () => true>),
+};
+
+const stepValidators: Record<number, (values: SurveyFormValues) => boolean> = {
+  0: (values) => values.features.length >= 1,
+  1: (values) => integrationStepValidators[values.integration]?.(values) ?? false,
+  2: (values) => values.aiImportance.length >= 1,
+};
+
+const surveyResponse1Getters: Record<string, (values: SurveyFormValues) => string | undefined> = {
+  Other: (values) => values.integrationOther,
+};
+
+function createStore<T>(initialValue: T) {
+  let value = initialValue;
+  const listeners = new Set<() => void>();
+
+  return {
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot() {
+      return value;
+    },
+    set(nextValue: T) {
+      value = nextValue;
+      listeners.forEach((listener) => listener());
+    },
+  };
+}
+
+const showSurveyStore = createStore(false);
+const surveyModalStore = createStore(false);
+
+function useShowSurvey() {
+  const showSurvey = useSyncExternalStore(
+    (listener) => showSurveyStore.subscribe(listener),
+    () => showSurveyStore.getSnapshot(),
+    () => false,
+  );
+
+  useEffect(() => {
+    const beforeDeadline = new Date() < new Date("2026-07-01");
+    const cookies = parseCookies(document.cookie);
+    const hasAnswered = cookies[surveyAnsweredCookieKey] !== undefined;
+
+    if (beforeDeadline && !hasAnswered) {
+      showSurveyStore.set(true);
+    }
+  }, []);
+
+  return showSurvey;
+}
+
+function useSurveyModalOpen() {
+  return useSyncExternalStore(
+    (listener) => surveyModalStore.subscribe(listener),
+    () => surveyModalStore.getSnapshot(),
+    () => false,
+  );
+}
+
+function isStepValid(step: number, values: SurveyFormValues) {
+  const validator = stepValidators[step];
+  if (!validator) {
+    return true;
+  }
+  return validator(values);
+}
+
+function canNavigateToStep(targetStep: number, activeStep: number, values: SurveyFormValues) {
+  if (targetStep <= activeStep) {
+    return true;
+  }
+
+  return requiredSteps.filter((step) => step < targetStep).every((step) => isStepValid(step, values));
+}
+
+function getSurveyResponse1(values: SurveyFormValues) {
+  const getter = surveyResponse1Getters[values.integration];
+  if (getter) {
+    return getter(values);
+  }
+  return values.integration;
+}
+
+function optionalResponse(value: string | undefined) {
+  if (value) {
+    return value;
+  }
+  return undefined;
+}
+
+const SurveyIndicator = ({ children }: PropsWithChildren) => {
+  const showSurvey = useShowSurvey();
+
+  return (
+    <Indicator color="grape" size={15} processing withBorder disabled={!showSurvey}>
+      {children}
+    </Indicator>
+  );
+};
+
+const SurveyMenuItem = () => {
+  const showSurvey = useShowSurvey();
+
+  if (!showSurvey) {
+    return null;
+  }
+
+  return (
+    <Menu.Item onClick={() => surveyModalStore.set(true)} leftSection={<IconMessageCircle size="1rem" />} color="grape">
+      Share your feedback
+    </Menu.Item>
+  );
+};
+
+const SurveyModal = () => {
+  const showSurvey = useShowSurvey();
+  const opened = useSurveyModalOpen();
+  const [active, setActive] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const close = () => surveyModalStore.set(false);
+
+  const form = useZodForm(surveySchema, {
+    mode: "controlled",
+    initialValues: {
+      features: [],
+      integration: "",
+      integrationOther: "",
+      aiImportance: "",
+      wishlist: "",
+      frustrations: "",
+    },
+  });
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    setIsSubmitting(true);
+    try {
+      const response = await fetch("https://hog.homarr.dev/i/v0/e/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          api_key: "phc_pWxeD1hbl4ip02JYReX1Crjkt5DhB3dduigirHMCtFE",
+          event: "survey sent",
+          distinct_id: crypto.randomUUID(),
+          properties: {
+            $survey_id: "019ea900-2649-0000-5914-8bdfacc01219",
+            $survey_response: values.features,
+            $survey_response_1: getSurveyResponse1(values),
+            $survey_response_2: values.aiImportance,
+            $survey_response_3: optionalResponse(values.wishlist),
+            $survey_response_4: optionalResponse(values.frustrations),
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        return;
+      }
+
+      setClientCookie(surveyAnsweredCookieKey, "true", {
+        expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
+        path: "/",
+      });
+      showSurveyStore.set(false);
+      close();
+    } finally {
+      setIsSubmitting(false);
+    }
+  });
+
+  const handleStepClick = (step: number) => {
+    if (step === active) {
+      return;
+    }
+
+    if (!canNavigateToStep(step, active, form.values)) {
+      return;
+    }
+
+    setActive(step);
+  };
+
+  if (!showSurvey) {
+    return null;
+  }
+
+  return (
+    <Modal opened={opened} onClose={close} size="xl" title="Homarr – Feature feedback & wishlist" centered>
+      <Stepper active={active} onStepClick={handleStepClick} orientation="horizontal">
+        <Stepper.Step label="Features">
+          <Stack gap="md" mt="md">
+            <Title order={4}>Which new features would you most like to see in Homarr? (pick all that apply)</Title>
+            <Checkbox.Group {...form.getInputProps("features")}>
+              <Stack gap="xs">
+                {featureChoices.map((choice) => (
+                  <Checkbox key={choice} value={choice} label={choice} />
+                ))}
+              </Stack>
+            </Checkbox.Group>
+            <Group justify="flex-end">
+              <Button color="grape" disabled={!isStepValid(0, form.values)} onClick={() => setActive(1)}>
+                Next
+              </Button>
+            </Group>
+          </Stack>
+        </Stepper.Step>
+
+        <Stepper.Step label="Integrations">
+          <Stack gap="md" mt="md">
+            <Title order={4}>What type of new integration would benefit you the most?</Title>
+            <Radio.Group {...form.getInputProps("integration")}>
+              <Stack gap="xs">
+                {integrationChoices.map((choice) => (
+                  <Radio key={choice} value={choice} label={choice} />
+                ))}
+              </Stack>
+            </Radio.Group>
+            {form.values.integration === "Other" && (
+              <TextInput label="Please specify" {...form.getInputProps("integrationOther")} />
+            )}
+            <Group justify="flex-end">
+              <Button color="grape" disabled={!isStepValid(1, form.values)} onClick={() => setActive(2)}>
+                Next
+              </Button>
+            </Group>
+          </Stack>
+        </Stepper.Step>
+
+        <Stepper.Step label="AI">
+          <Stack gap="md" mt="md">
+            <Title order={4}>
+              How important is AI compatibility to you? (e.g. AI widgets, MCP tools, LLM integrations)
+            </Title>
+            <Radio.Group {...form.getInputProps("aiImportance")}>
+              <Stack gap="xs">
+                {aiImportanceChoices.map((choice) => (
+                  <Radio key={choice} value={choice} label={choice} />
+                ))}
+              </Stack>
+            </Radio.Group>
+            <Group justify="flex-end">
+              <Button color="grape" disabled={!isStepValid(2, form.values)} onClick={() => setActive(3)}>
+                Next
+              </Button>
+            </Group>
+          </Stack>
+        </Stepper.Step>
+
+        <Stepper.Step label="Wishlist">
+          <Stack gap="md" mt="md">
+            <Title order={4}>
+              Anything else you&apos;d like to see in Homarr? Feel free to describe a feature, integration, or
+              improvement you&apos;re missing.
+            </Title>
+            <Text size="sm" c="dimmed">
+              Optional
+            </Text>
+            <Textarea autosize minRows={3} {...form.getInputProps("wishlist")} />
+            <Group justify="flex-end">
+              <Button variant="subtle" color="gray" onClick={() => setActive(4)}>
+                Skip
+              </Button>
+              <Button color="grape" onClick={() => setActive(4)}>
+                Next
+              </Button>
+            </Group>
+          </Stack>
+        </Stepper.Step>
+
+        <Stepper.Step label="Feedback">
+          <Stack gap="md" mt="md">
+            <Title order={4}>
+              What frustrates you most about Homarr today? Any small fix or quality-of-life improvement you wish it
+              already did?
+            </Title>
+            <Text size="sm" c="dimmed">
+              Optional
+            </Text>
+            <Textarea autosize minRows={3} {...form.getInputProps("frustrations")} />
+            <Group justify="flex-end">
+              <Button variant="subtle" color="gray" loading={isSubmitting} onClick={handleSubmit}>
+                Skip & Submit
+              </Button>
+              <Button color="grape" loading={isSubmitting} onClick={handleSubmit}>
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Stepper.Step>
+      </Stepper>
+    </Modal>
+  );
+};
+
+export { SurveyIndicator, SurveyMenuItem, SurveyModal };

apps/nextjs/src/components/layout/header/user.tsx

@@ -6,6 +6,7 @@ import { auth } from "@homarr/auth/next";
 
 import { CurrentUserAvatar } from "~/components/user-avatar";
 import { UserAvatarMenu } from "~/components/user-avatar-menu";
+import { SurveyIndicator } from "./survey";
 import { UpdateIndicator } from "./update";
 
 export const UserButton = async () => {
@@ -16,9 +17,11 @@ export const UserButton = async () => {
     <UserAvatarMenu availableUpdatesPromise={availableUpdatesPromise}>
       <UnstyledButton>
         <Suspense fallback={<CurrentUserAvatar size="md" />}>
-          <UpdateIndicator availableUpdatesPromise={availableUpdatesPromise} disabled={!isAdmin}>
-            <CurrentUserAvatar size="md" />
-          </UpdateIndicator>
+          <SurveyIndicator>
+            <UpdateIndicator availableUpdatesPromise={availableUpdatesPromise} disabled={!isAdmin}>
+              <CurrentUserAvatar size="md" />
+            </UpdateIndicator>
+          </SurveyIndicator>
         </Suspense>
       </UnstyledButton>
     </UserAvatarMenu>

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -18,6 +18,7 @@ import { useAuthContext } from "~/app/[locale]/_client-providers/session";
 import { CurrentColorSchemeCombobox } from "./color-scheme/current-color-scheme-combobox";
 import { CurrentLanguageCombobox } from "./language/current-language-combobox";
 import { AvailableUpdatesMenuItem } from "./layout/header/update";
+import { SurveyMenuItem, SurveyModal } from "./layout/header/survey";
 
 interface UserAvatarMenuProps {
   children: ReactNode;
@@ -51,50 +52,54 @@ export const UserAvatarMenu = ({ children, availableUpdatesPromise }: UserAvatar
   }, [logoutUrl, openModal, router]);
 
   return (
-    // We use keepMounted so we can add event listeners to prevent navigating away without saving the board
-    <Menu width={300} withinPortal keepMounted>
-      <Menu.Dropdown>
-        <AvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
-        <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
-          {t("homeBoard")}
-        </Menu.Item>
-        <Menu.Divider />
-
-        <Menu.Item p={0} closeMenuOnClick={false} component="div">
-          <CurrentColorSchemeCombobox />
-        </Menu.Item>
-        <Menu.Item p={0} closeMenuOnClick={false} component="div">
-          <CurrentLanguageCombobox />
-        </Menu.Item>
-        <Menu.Divider />
-        {Boolean(session.data) && (
-          <>
-            <Menu.Item
-              component={Link}
-              href={`/manage/users/${session.data?.user.id}/general`}
-              leftSection={<IconSettings size="1rem" />}
-            >
-              {t("preferences")}
-            </Menu.Item>
-
-            <Menu.Item component={Link} href="/manage" leftSection={<IconTool size="1rem" />}>
-              {t("management")}
-            </Menu.Item>
-          </>
-        )}
-        <Menu.Divider />
-        {session.status === "authenticated" ? (
-          <Menu.Item onClick={handleSignout} leftSection={<IconLogout size="1rem" />} color="red">
-            {t("logout")}
+    <>
+      <SurveyModal />
+      {/* We use keepMounted so we can add event listeners to prevent navigating away without saving the board */}
+      <Menu width={300} withinPortal keepMounted>
+        <Menu.Dropdown>
+          <AvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
+          <SurveyMenuItem />
+          <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
+            {t("homeBoard")}
           </Menu.Item>
-        ) : (
-          <Menu.Item component={Link} href="/auth/login" leftSection={<IconLogin size="1rem" />}>
-            {t("login")}
+          <Menu.Divider />
+
+          <Menu.Item p={0} closeMenuOnClick={false} component="div">
+            <CurrentColorSchemeCombobox />
           </Menu.Item>
-        )}
-      </Menu.Dropdown>
-      <Menu.Target>{children}</Menu.Target>
-    </Menu>
+          <Menu.Item p={0} closeMenuOnClick={false} component="div">
+            <CurrentLanguageCombobox />
+          </Menu.Item>
+          <Menu.Divider />
+          {Boolean(session.data) && (
+            <>
+              <Menu.Item
+                component={Link}
+                href={`/manage/users/${session.data?.user.id}/general`}
+                leftSection={<IconSettings size="1rem" />}
+              >
+                {t("preferences")}
+              </Menu.Item>
+
+              <Menu.Item component={Link} href="/manage" leftSection={<IconTool size="1rem" />}>
+                {t("management")}
+              </Menu.Item>
+            </>
+          )}
+          <Menu.Divider />
+          {session.status === "authenticated" ? (
+            <Menu.Item onClick={handleSignout} leftSection={<IconLogout size="1rem" />} color="red">
+              {t("logout")}
+            </Menu.Item>
+          ) : (
+            <Menu.Item component={Link} href="/auth/login" leftSection={<IconLogin size="1rem" />}>
+              {t("login")}
+            </Menu.Item>
+          )}
+        </Menu.Dropdown>
+        <Menu.Target>{children}</Menu.Target>
+      </Menu>
+    </>
   );
 };
 

package.json

@@ -78,7 +78,7 @@
     "overrides": {
       "@babel/helpers@<7.26.10": ">=7.29.7",
       "@babel/runtime@<7.26.10": ">=7.29.7",
-      "axios@>=1.0.0 <1.8.2": ">=1.16.1",
+      "axios@>=1.0.0 <1.8.2": ">=1.17.0",
       "brace-expansion@>=2.0.0 <=2.0.1": ">=5.0.6",
       "brace-expansion@>=1.0.0 <=1.1.11": ">=5.0.6",
       "esbuild@<=0.24.2": ">=0.28.0",

packages/definitions/src/cookie.ts

@@ -1,2 +1,3 @@
 export const colorSchemeCookieKey = "homarr.color-scheme";
 export const localeCookieKey = "homarr.locale";
+export const surveyAnsweredCookieKey = "homarr-answered-survey";

packages/definitions/src/integration.ts

@@ -364,7 +364,7 @@ export const integrationDefs = {
   },
   truenas: {
     name: "TrueNAS",
-    secretKinds: [["username", "password"]],
+    secretKinds: [["username", "password"], ["apiKey"]],
     iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/truenas.svg",
     category: ["healthMonitoring"],
     documentationUrl: createDocumentationLink("/docs/integrations/truenas"),

packages/integrations/package.json

@@ -47,12 +47,14 @@
     "timezones-ical-library": "catalog:",
     "tsdav": "catalog:",
     "undici": "catalog:",
+    "ws": "catalog:",
     "xml2js": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/node-unifi": "catalog:",
+    "@types/ws": "catalog:",
     "@types/xml2js": "catalog:",
     "typescript": "catalog:"
   }

packages/integrations/src/base/integration.ts

@@ -85,6 +85,16 @@ export abstract class Integration {
     return this.createUrl(this.integration.externalUrl ?? this.integration.url, path, queryParams);
   }
 
+  protected webSocketUrl(
+    path: `/${string}`,
+    queryParams?: Record<string, string | Date | number | boolean | null | undefined>,
+  ) {
+    const url = this.url(path, queryParams);
+    // http -> ws, https -> wss
+    url.protocol = url.protocol.replace("http", "ws");
+    return url;
+  }
+
   public async testConnectionAsync(): Promise<TestingResult> {
     try {
       const url = new URL(this.integration.url);

packages/integrations/src/truenas/test/truenas-api.spec.ts

@@ -0,0 +1,79 @@
+import { describe, expect, test } from "vitest";
+
+import { trueNasApis } from "../truenas-api";
+
+describe("trueNasApis descriptors", () => {
+  test("expose the expected endpoints and handshake requirements", () => {
+    expect(trueNasApis.jsonRpc).toMatchObject({
+      kind: "jsonRpc",
+      path: "/api/current",
+      requiresSessionHandshake: false,
+    });
+    expect(trueNasApis.legacy).toMatchObject({
+      kind: "legacy",
+      path: "/websocket",
+      requiresSessionHandshake: true,
+    });
+  });
+});
+
+describe("jsonRpc api", () => {
+  const { buildRequest, matchResponse } = trueNasApis.jsonRpc;
+
+  test("builds a JSON-RPC 2.0 envelope", () => {
+    expect(buildRequest("id-1", "system.info", [])).toStrictEqual({
+      jsonrpc: "2.0",
+      id: "id-1",
+      method: "system.info",
+      params: [],
+    });
+  });
+
+  test("matches a result for the requested id", () => {
+    const result = matchResponse({ jsonrpc: "2.0", id: "id-1", result: true }, "id-1");
+    expect(result).toStrictEqual({ result: true });
+  });
+
+  test("returns the error when the response carries one", () => {
+    const error = { code: -32001, message: "Not authenticated" };
+    expect(matchResponse({ jsonrpc: "2.0", id: "id-1", error }, "id-1")).toStrictEqual({ error });
+  });
+
+  test("ignores responses for a different id", () => {
+    expect(matchResponse({ jsonrpc: "2.0", id: "other", result: true }, "id-1")).toBeUndefined();
+  });
+
+  test("ignores non JSON-RPC messages", () => {
+    expect(matchResponse({ msg: "result", id: "id-1", result: true }, "id-1")).toBeUndefined();
+  });
+});
+
+describe("legacy api", () => {
+  const { buildRequest, matchResponse } = trueNasApis.legacy;
+
+  test("builds a DDP method envelope", () => {
+    expect(buildRequest("id-1", "auth.login", ["user", "pass"])).toStrictEqual({
+      id: "id-1",
+      msg: "method",
+      method: "auth.login",
+      params: ["user", "pass"],
+    });
+  });
+
+  test("matches a result message for the requested id", () => {
+    expect(matchResponse({ msg: "result", id: "id-1", result: false }, "id-1")).toStrictEqual({ result: false });
+  });
+
+  test("returns the error when the result message carries one", () => {
+    const error = { error: 13, reason: "boom" };
+    expect(matchResponse({ msg: "result", id: "id-1", error }, "id-1")).toStrictEqual({ error });
+  });
+
+  test("ignores responses for a different id", () => {
+    expect(matchResponse({ msg: "result", id: "other", result: true }, "id-1")).toBeUndefined();
+  });
+
+  test("ignores non-result messages such as the session handshake", () => {
+    expect(matchResponse({ msg: "connected", session: "abc" }, "id-1")).toBeUndefined();
+  });
+});

packages/integrations/src/truenas/test/truenas-integration.spec.ts

@@ -0,0 +1,264 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import { IntegrationRequestError } from "../../base/errors/http/integration-request-error";
+import type { IntegrationSecret } from "../../base/types";
+
+const ws = vi.hoisted(() => {
+  const sentPayloads: Record<string, unknown>[] = [];
+  const constructedUrls: string[] = [];
+  // A failure with a `code` emits a coded TLS-style error; without one it mimics a missing endpoint (HTTP 404).
+  const failures: { path: string; code?: string }[] = [];
+  let responder: (method: string, params: unknown[]) => unknown = () => undefined;
+
+  type Listener = (...args: unknown[]) => void;
+
+  class FakeWebSocket {
+    static readonly OPEN = 1;
+    public readyState = FakeWebSocket.OPEN;
+    private readonly listeners: Record<string, Listener[]> = {};
+
+    constructor(url: URL | string) {
+      constructedUrls.push(url.toString());
+      setTimeout(() => {
+        const failure = failures.find((candidate) => url.toString().includes(candidate.path));
+        if (failure) {
+          const error: Error & { code?: string } = new Error(failure.code ?? "Unexpected server response: 404");
+          if (failure.code) error.code = failure.code;
+          this.dispatch("error", error);
+        } else {
+          this.dispatch("open");
+        }
+      }, 0);
+    }
+
+    on(event: string, listener: Listener) {
+      (this.listeners[event] ??= []).push(listener);
+      return this;
+    }
+
+    once(event: string, listener: Listener) {
+      const wrapper: Listener = (...args) => {
+        this.off(event, wrapper);
+        listener(...args);
+      };
+      return this.on(event, wrapper);
+    }
+
+    off(event: string, listener: Listener) {
+      this.listeners[event] = (this.listeners[event] ?? []).filter((candidate) => candidate !== listener);
+      return this;
+    }
+
+    send(raw: string) {
+      const payload = JSON.parse(raw) as Record<string, unknown>;
+      sentPayloads.push(payload);
+
+      if (payload.msg === "connect") {
+        this.respond(JSON.stringify({ msg: "connected", session: "test-session" }));
+        return;
+      }
+
+      const result = responder(payload.method as string, (payload.params as unknown[] | undefined) ?? []);
+      const envelope =
+        payload.jsonrpc === "2.0"
+          ? { jsonrpc: "2.0", id: payload.id, result }
+          : { msg: "result", id: payload.id, result };
+      this.respond(JSON.stringify(envelope));
+    }
+
+    close() {
+      this.readyState = 3;
+    }
+
+    private respond(message: string) {
+      setTimeout(() => this.dispatch("message", message), 0);
+    }
+
+    private dispatch(event: string, ...args: unknown[]) {
+      // `off` replaces the array rather than mutating it, so iterating it directly is safe.
+      for (const listener of this.listeners[event] ?? []) listener(...args);
+    }
+  }
+
+  return {
+    FakeWebSocket,
+    sentPayloads,
+    constructedUrls,
+    failures,
+    setResponder: (fn: (method: string, params: unknown[]) => unknown) => {
+      responder = fn;
+    },
+  };
+});
+
+vi.mock("ws", () => ({ WebSocket: ws.FakeWebSocket }));
+vi.mock("@homarr/core/infrastructure/certificates", () => ({
+  getAllTrustedCertificatesAsync: vi.fn().mockResolvedValue([]),
+  getTrustedCertificateHostnamesAsync: vi.fn().mockResolvedValue([]),
+}));
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  createCustomCheckServerIdentity: () => () => undefined,
+}));
+
+import { TrueNasIntegration } from "../truenas-integration";
+
+const happyResponder = (method: string) => {
+  switch (method) {
+    case "auth.login":
+    case "auth.login_with_api_key":
+      return true;
+    case "system.info":
+      return {
+        version: "TrueNAS-SCALE-24.10",
+        hostname: "nas",
+        physmem: 16_000_000_000,
+        model: "Intel Xeon",
+        uptime_seconds: 3600,
+      };
+    case "reporting.get_data":
+      return [
+        {
+          name: "cpu",
+          identifier: "cpu",
+          aggregations: emptyAggregations(),
+          start: 0,
+          end: 1,
+          legend: [],
+          data: [[1000, 12]],
+        },
+        {
+          name: "memory",
+          identifier: "memory",
+          aggregations: emptyAggregations(),
+          start: 0,
+          end: 1,
+          legend: [],
+          data: [[1000, 8_000_000_000]],
+        },
+        {
+          name: "cputemp",
+          identifier: "cputemp",
+          aggregations: emptyAggregations(),
+          start: 0,
+          end: 1,
+          legend: [],
+          data: [[1000, 45]],
+        },
+      ];
+    case "pool.query":
+      return [{ name: "tank", status: "ONLINE", healthy: true, free: 500, size: 1000, allocated: 500 }];
+    case "interface.query":
+      return [{ id: "eth0", name: "eth0" }];
+    case "reporting.netdata_get_data":
+      return [{ name: "interface", identifier: "eth0", data: [[1000, 100, 200]] }];
+    default:
+      return null;
+  }
+};
+
+const emptyAggregations = () => ({ min: {}, mean: {}, max: {} });
+
+let integrationCounter = 0;
+const createIntegration = (decryptedSecrets: IntegrationSecret[]) =>
+  new TrueNasIntegration({
+    id: `truenas-${(integrationCounter += 1)}`,
+    name: "TrueNAS Test",
+    url: "https://truenas.local",
+    externalUrl: null,
+    decryptedSecrets,
+  });
+
+const credentials: IntegrationSecret[] = [
+  { kind: "username", value: "root" },
+  { kind: "password", value: "secret" },
+];
+
+describe("TrueNasIntegration", () => {
+  beforeEach(() => {
+    ws.sentPayloads.length = 0;
+    ws.constructedUrls.length = 0;
+    ws.failures.length = 0;
+    ws.setResponder(happyResponder);
+  });
+
+  test("fetches and maps system info over the JSON-RPC API", async () => {
+    const integration = createIntegration(credentials);
+
+    const result = await integration.getSystemInfoAsync();
+
+    expect(ws.constructedUrls).toContain("wss://truenas.local/api/current");
+    // JSON-RPC does not use the legacy "connect" session handshake.
+    expect(ws.sentPayloads.some((payload) => payload.msg === "connect")).toBe(false);
+
+    expect(result).toMatchObject({
+      version: "TrueNAS-SCALE-24.10",
+      cpuModelName: "Intel Xeon",
+      cpuTemp: 45,
+      memAvailableInBytes: 16_000_000_000,
+      memUsedInBytes: 8_000_000_000,
+      uptime: 3600,
+      rebootRequired: false,
+      availablePkgUpdates: 0,
+      loadAverage: null,
+      gpu: [],
+      network: { up: 20_000, down: 10_000 },
+      fileSystem: [{ deviceName: "tank", available: "1000", used: "500", percentage: 50 }],
+      smart: [{ deviceName: "tank", healthy: true, overallStatus: "ONLINE", temperature: null }],
+    });
+  });
+
+  test("authenticates with an API key when one is configured", async () => {
+    const integration = createIntegration([{ kind: "apiKey", value: "api-key-123" }]);
+
+    await integration.getSystemInfoAsync();
+
+    const authPayload = ws.sentPayloads.find((payload) => String(payload.method).startsWith("auth."));
+    expect(authPayload).toMatchObject({ method: "auth.login_with_api_key", params: ["api-key-123"] });
+  });
+
+  test("authenticates with username and password when no API key is configured", async () => {
+    const integration = createIntegration(credentials);
+
+    await integration.getSystemInfoAsync();
+
+    const authPayload = ws.sentPayloads.find((payload) => String(payload.method).startsWith("auth."));
+    expect(authPayload).toMatchObject({ method: "auth.login", params: ["root", "secret"] });
+  });
+
+  test("falls back to the legacy websocket API when the JSON-RPC endpoint is unavailable", async () => {
+    ws.failures.push({ path: "/api/current" });
+    const integration = createIntegration(credentials);
+
+    const result = await integration.getSystemInfoAsync();
+
+    expect(ws.constructedUrls).toContain("wss://truenas.local/api/current");
+    expect(ws.constructedUrls).toContain("wss://truenas.local/websocket");
+    // The legacy API requires the "connect" session handshake before authenticating.
+    expect(ws.sentPayloads[0]).toMatchObject({ msg: "connect" });
+    expect(ws.sentPayloads.find((payload) => String(payload.method).startsWith("auth."))).toMatchObject({
+      msg: "method",
+      method: "auth.login",
+    });
+    expect(result.version).toBe("TrueNAS-SCALE-24.10");
+  });
+
+  test("rejects when authentication is not successful", async () => {
+    ws.setResponder((method) => (method.startsWith("auth.") ? false : happyResponder(method)));
+    const integration = createIntegration(credentials);
+
+    await expect(integration.getSystemInfoAsync()).rejects.toThrow();
+  });
+
+  test("surfaces a self-signed certificate as a certificate request error without falling back", async () => {
+    ws.failures.push({ path: "/api/current", code: "DEPTH_ZERO_SELF_SIGNED_CERT" });
+    ws.failures.push({ path: "/websocket", code: "DEPTH_ZERO_SELF_SIGNED_CERT" });
+    const integration = createIntegration(credentials);
+
+    const error = await integration.getSystemInfoAsync().catch((caught: unknown) => caught);
+
+    expect(error).toBeInstanceOf(IntegrationRequestError);
+    expect((error as IntegrationRequestError).cause).toMatchObject({ type: "certificate", reason: "untrusted" });
+    // A certificate failure is endpoint-independent, so the legacy API must not be tried.
+    expect(ws.constructedUrls).not.toContain("wss://truenas.local/websocket");
+  });
+});

packages/integrations/src/truenas/truenas-api.ts

@@ -0,0 +1,50 @@
+export type TrueNasApiKind = "jsonRpc" | "legacy";
+
+export type TrueNasResponse = { result: unknown } | { error: unknown };
+
+export interface TrueNasApi {
+  kind: TrueNasApiKind;
+  /** Websocket path appended to the integration URL. */
+  path: `/${string}`;
+  /** The legacy DDP API requires a "connect" handshake before authentication, the JSON-RPC API does not. */
+  requiresSessionHandshake: boolean;
+  /** Builds the request envelope for a method call. */
+  buildRequest: (id: string, method: string, params: unknown[]) => Record<string, unknown>;
+  /**
+   * Returns the response payload when `message` is the reply to `id`,
+   * otherwise `undefined` so the caller keeps waiting for a later message.
+   */
+  matchResponse: (message: Record<string, unknown>, id: string) => TrueNasResponse | undefined;
+}
+
+/**
+ * JSON-RPC 2.0 API introduced in TrueNAS SCALE 24.10 (Electric Eel) and the
+ * legacy DDP-style websocket API used before it. Both expose the same
+ * middleware methods, so only the transport envelope differs.
+ * @see https://www.truenas.com/docs/api/scale_rest_api.html
+ * @see https://www.truenas.com/docs/api/scale_websocket_api.html#websocket_protocol
+ */
+export const trueNasApis = {
+  jsonRpc: {
+    kind: "jsonRpc",
+    path: "/api/current",
+    requiresSessionHandshake: false,
+    buildRequest: (id: string, method: string, params: unknown[]) => ({ jsonrpc: "2.0", id, method, params }),
+    matchResponse: (message: Record<string, unknown>, id: string) => {
+      if (message.id !== id || message.jsonrpc !== "2.0") return undefined;
+      if (message.error != null) return { error: message.error };
+      return { result: message.result };
+    },
+  },
+  legacy: {
+    kind: "legacy",
+    path: "/websocket",
+    requiresSessionHandshake: true,
+    buildRequest: (id: string, method: string, params: unknown[]) => ({ id, msg: "method", method, params }),
+    matchResponse: (message: Record<string, unknown>, id: string) => {
+      if (message.id !== id || message.msg !== "result") return undefined;
+      if (message.error != null) return { error: message.error };
+      return { result: message.result };
+    },
+  },
+} satisfies Record<TrueNasApiKind, TrueNasApi>;

packages/integrations/src/truenas/truenas-client.ts

@@ -0,0 +1,315 @@
+import type { RawData } from "ws";
+import { WebSocket } from "ws";
+import z from "zod";
+
+import { createId } from "@homarr/common";
+import { matchErrorCode, RequestError, ResponseError } from "@homarr/common/server";
+import {
+  getAllTrustedCertificatesAsync,
+  getTrustedCertificateHostnamesAsync,
+} from "@homarr/core/infrastructure/certificates";
+import { createCustomCheckServerIdentity } from "@homarr/core/infrastructure/http";
+import { createLogger } from "@homarr/core/infrastructure/logs";
+
+import type { IntegrationTestingInput } from "../base/integration";
+import type { TrueNasApi } from "./truenas-api";
+import { trueNasApis } from "./truenas-api";
+
+const logger = createLogger({ module: "trueNasClient" });
+
+const REQUEST_TIMEOUT_MS = 5000;
+
+type CertificateOptions = IntegrationTestingInput["options"];
+
+export type TrueNasCredentials = { apiKey: string } | { username: string; password: string };
+
+/**
+ * Handles talking to a TrueNAS server: opening a websocket with Homarr's
+ * trusted certificates, negotiating the API variant, authenticating, and
+ * sending method requests. Connections are reused across the per-request
+ * integration instances and reconnected transparently when the server drops
+ * an idle socket.
+ */
+export class TrueNasClient {
+  // Keyed by integration id. The value is the in-flight connection promise so concurrent
+  // callers reuse a single socket instead of racing to open duplicates.
+  private static readonly connectionMap = new Map<string, Promise<TrueNasSocket>>();
+  private static readonly apiMap = new Map<string, TrueNasApi>();
+
+  constructor(
+    private readonly id: string,
+    private readonly webSocketUrl: (path: `/${string}`) => URL,
+    private readonly credentials: TrueNasCredentials,
+  ) {}
+
+  /** Sends an authenticated request, reusing the cached connection while it is open. */
+  public async requestAsync(method: string, params: unknown[] = []): Promise<unknown> {
+    const socket = await this.getSocketAsync();
+    return socket.requestAsync(method, params);
+  }
+
+  /**
+   * Opens a connection with the provided certificate options, authenticates,
+   * and closes it. Used by the connection test, which may run with updated
+   * credentials, so any cached connection is dropped and the API re-detected.
+   */
+  public async testAsync(certificate: CertificateOptions): Promise<void> {
+    this.evictConnection();
+    TrueNasClient.apiMap.delete(this.id);
+
+    const socket = await this.openSocketAsync(certificate);
+    try {
+      await this.authenticateAsync(socket);
+    } finally {
+      socket.close();
+    }
+  }
+
+  private getSocketAsync(): Promise<TrueNasSocket> {
+    let connection = TrueNasClient.connectionMap.get(this.id);
+    if (!connection) {
+      connection = this.connectAndAuthenticateAsync();
+      TrueNasClient.connectionMap.set(this.id, connection);
+
+      const evict = () => {
+        if (TrueNasClient.connectionMap.get(this.id) === connection) {
+          TrueNasClient.connectionMap.delete(this.id);
+        }
+      };
+      // Reconnect on the next request once this attempt fails or the server drops the socket.
+      connection.then((socket) => socket.onClose(evict), evict);
+    }
+
+    return connection;
+  }
+
+  private async connectAndAuthenticateAsync(): Promise<TrueNasSocket> {
+    const socket = await this.openSocketAsync(await resolveCertificateOptionsAsync());
+    try {
+      await this.authenticateAsync(socket);
+    } catch (error) {
+      // Never keep an unauthenticated socket, it would be reused without re-authenticating.
+      socket.close();
+      throw error;
+    }
+    return socket;
+  }
+
+  private evictConnection() {
+    const connection = TrueNasClient.connectionMap.get(this.id);
+    if (!connection) return;
+
+    TrueNasClient.connectionMap.delete(this.id);
+    connection.then((socket) => socket.close()).catch(() => undefined);
+  }
+
+  /**
+   * Connects using the JSON-RPC API (TrueNAS 24.10+) when available and falls
+   * back to the legacy websocket API otherwise. A missing JSON-RPC endpoint
+   * surfaces as a plain protocol error; certificate, connection, DNS and
+   * timeout errors are endpoint-independent and are never retried.
+   */
+  private async openSocketAsync(certificate: CertificateOptions): Promise<TrueNasSocket> {
+    const cachedApi = TrueNasClient.apiMap.get(this.id);
+    if (cachedApi) {
+      return openTrueNasSocketAsync(this.webSocketUrl(cachedApi.path), cachedApi, certificate);
+    }
+
+    try {
+      const socket = await openTrueNasSocketAsync(
+        this.webSocketUrl(trueNasApis.jsonRpc.path),
+        trueNasApis.jsonRpc,
+        certificate,
+      );
+      TrueNasClient.apiMap.set(this.id, trueNasApis.jsonRpc);
+      return socket;
+    } catch (error) {
+      if (error instanceof RequestError) throw error;
+
+      logger.debug("JSON-RPC API unavailable, falling back to the legacy websocket API", {
+        error: error instanceof Error ? error.message : undefined,
+      });
+      const socket = await openTrueNasSocketAsync(
+        this.webSocketUrl(trueNasApis.legacy.path),
+        trueNasApis.legacy,
+        certificate,
+      );
+      TrueNasClient.apiMap.set(this.id, trueNasApis.legacy);
+      return socket;
+    }
+  }
+
+  /**
+   * Authenticates with an API key when one is configured, otherwise with the
+   * username and password. Both methods work on either API.
+   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#websocket_protocol
+   */
+  private async authenticateAsync(socket: TrueNasSocket): Promise<void> {
+    const response =
+      "apiKey" in this.credentials
+        ? await socket.requestAsync("auth.login_with_api_key", [this.credentials.apiKey])
+        : await socket.requestAsync("auth.login", [this.credentials.username, this.credentials.password]);
+
+    const success = await z.boolean().parseAsync(response);
+    if (!success) throw new ResponseError({ status: 401 });
+  }
+}
+
+/**
+ * Wraps a single websocket connection and speaks whichever TrueNAS API
+ * ({@link trueNasApis}) was negotiated when it was opened.
+ */
+class TrueNasSocket {
+  constructor(
+    private readonly webSocket: WebSocket,
+    private readonly api: TrueNasApi,
+  ) {}
+
+  public close() {
+    this.webSocket.close();
+  }
+
+  public onClose(listener: () => void) {
+    this.webSocket.once("close", listener);
+  }
+
+  /**
+   * The legacy DDP API requires a "connect" handshake to obtain a session
+   * before any method can be called.
+   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#websocket_protocol
+   */
+  public registerSessionAsync(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const handler = (raw: RawData) => {
+        const message = parseMessage(raw);
+        if (message?.msg === "connected") {
+          this.webSocket.off("message", handler);
+          resolve();
+        } else if (message?.msg === "failed") {
+          this.webSocket.off("message", handler);
+          reject(new Error("Unable to establish TrueNAS session"));
+        }
+      };
+
+      this.webSocket.on("message", handler);
+      this.webSocket.send(JSON.stringify({ msg: "connect", version: "1", support: ["1"] }));
+    });
+  }
+
+  /**
+   * Sends a method request and resolves with its result. Rejects after
+   * {@link REQUEST_TIMEOUT_MS} when no matching response was received.
+   */
+  public requestAsync(method: string, params: unknown[] = []): Promise<unknown> {
+    return new Promise((resolve, reject) => {
+      const id = createId();
+
+      const cleanup = () => {
+        clearTimeout(timeoutId);
+        this.webSocket.off("message", handler);
+        this.webSocket.off("close", onClose);
+        this.webSocket.off("error", onError);
+      };
+
+      const handler = (raw: RawData) => {
+        const message = parseMessage(raw);
+        if (!message) return;
+
+        const response = this.api.matchResponse(message, id);
+        if (!response) return;
+
+        cleanup();
+        if ("error" in response) {
+          reject(new Error(`TrueNAS method "${method}" failed: ${JSON.stringify(response.error)}`));
+          return;
+        }
+        logger.debug("Received method response", { id, method, api: this.api.kind });
+        resolve(response.result);
+      };
+
+      // A dropped connection would otherwise leave the request hanging until the timeout below.
+      const onClose = () => {
+        cleanup();
+        reject(
+          new RequestError(
+            { type: "connection", reason: "reset", code: "ECONNRESET" },
+            { cause: new Error("Connection closed before a response was received") },
+          ),
+        );
+      };
+      const onError = (error: Error) => {
+        cleanup();
+        reject(error);
+      };
+
+      const timeoutId = setTimeout(() => {
+        cleanup();
+        reject(
+          new RequestError(
+            {
+              type: "timeout",
+              reason: "aborted",
+              code: "ECONNABORTED",
+            },
+            { cause: new Error("Canceled request after 5 seconds") },
+          ),
+        );
+      }, REQUEST_TIMEOUT_MS);
+
+      this.webSocket.on("message", handler);
+      this.webSocket.once("close", onClose);
+      this.webSocket.once("error", onError);
+      logger.debug("Sending method request", { id, method, api: this.api.kind });
+      this.webSocket.send(JSON.stringify(this.api.buildRequest(id, method, params)));
+    });
+  }
+}
+
+/**
+ * Opens a websocket using Homarr's trusted certificates and performs the
+ * session handshake when the API requires it. TLS, connection, DNS and timeout
+ * failures are translated into {@link RequestError}s so the connection test can
+ * offer to trust a self-signed certificate, exactly like the HTTP integrations.
+ */
+const openTrueNasSocketAsync = async (
+  url: URL,
+  api: TrueNasApi,
+  certificate: CertificateOptions,
+): Promise<TrueNasSocket> => {
+  logger.debug("Connecting to TrueNAS websocket", { url: url.toString(), api: api.kind });
+
+  const webSocket = await new Promise<WebSocket>((resolve, reject) => {
+    const socket = new WebSocket(url, {
+      ca: certificate.ca,
+      // The @types/ws contract types this as returning a boolean, but ws forwards it to
+      // tls.connect which uses Node's `Error | undefined` contract that our helper follows.
+      checkServerIdentity: certificate.checkServerIdentity as never,
+    });
+
+    socket.once("open", () => resolve(socket));
+    socket.once("error", (error: Error & { code?: string }) => {
+      const matched = error.code ? matchErrorCode(error.code) : undefined;
+      reject(matched ? new RequestError(matched, { cause: error }) : error);
+    });
+  });
+
+  const socket = new TrueNasSocket(webSocket, api);
+  if (api.requiresSessionHandshake) await socket.registerSessionAsync();
+  return socket;
+};
+
+const resolveCertificateOptionsAsync = async (): Promise<CertificateOptions> => ({
+  ca: await getAllTrustedCertificatesAsync(),
+  checkServerIdentity: createCustomCheckServerIdentity(await getTrustedCertificateHostnamesAsync()),
+});
+
+const parseMessage = (raw: RawData): Record<string, unknown> | undefined => {
+  try {
+    const parsed: unknown = JSON.parse(raw.toString());
+    return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : undefined;
+  } catch {
+    return undefined;
+  }
+};

packages/integrations/src/truenas/truenas-integration.ts

@@ -1,8 +1,6 @@
 import dayjs from "dayjs";
 import z from "zod";
 
-import { createId } from "@homarr/common";
-import { RequestError, ResponseError } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 
 import type { IntegrationTestingInput } from "../base/integration";
@@ -10,252 +8,21 @@ import { Integration } from "../base/integration";
 import type { TestingResult } from "../base/test-connection/test-connection-service";
 import type { ISystemHealthMonitoringIntegration } from "../interfaces/health-monitoring/health-monitoring-integration";
 import type { SystemHealthMonitoring } from "../interfaces/health-monitoring/health-monitoring-types";
+import type { TrueNasCredentials } from "./truenas-client";
+import { TrueNasClient } from "./truenas-client";
 
 const logger = createLogger({ module: "trueNasIntegration" });
 
 const NETWORK_MULTIPLIER = 100;
 
 export class TrueNasIntegration extends Integration implements ISystemHealthMonitoringIntegration {
-  private static webSocketMap = new Map<string, WebSocket>();
-
-  private wsUrl() {
-    const url = super.url("/websocket");
-    url.protocol = url.protocol.replace("http", "ws");
-    return url;
-  }
-
-  private get webSocket() {
-    return TrueNasIntegration.webSocketMap.get(this.integration.id) ?? null;
-  }
-
-  protected async testingAsync(_input: IntegrationTestingInput): Promise<TestingResult> {
-    const webSocket = await this.connectWebSocketAsync();
-    await this.registerSessionAsync(webSocket);
-    await this.authenticateWebSocketAsync(webSocket);
-
-    // Remove current socket connection so we can authenticate with updated credentials
-    TrueNasIntegration.webSocketMap.delete(this.integration.id);
+  private client?: TrueNasClient;
 
+  protected async testingAsync(input: IntegrationTestingInput): Promise<TestingResult> {
+    await this.getClient().testAsync(input.options);
     return { success: true };
   }
 
-  /**
-   * TrueNAS API uses WebSocket. This function connects to the socket
-   * and resolves the promise if the connection was successful.
-   * @see https://www.truenas.com/docs/api/scale_websocket_api.html
-   */
-  private async connectWebSocketAsync(): Promise<WebSocket> {
-    logger.debug("Connecting to websocket server", {
-      url: this.wsUrl(),
-    });
-    const webSocket = new WebSocket(this.wsUrl());
-
-    return new Promise((resolve, reject) => {
-      webSocket.onopen = () => {
-        logger.debug("Connected to websocket server", {
-          url: this.wsUrl(),
-        });
-        resolve(webSocket);
-      };
-
-      webSocket.onerror = () => {
-        reject(new Error("Failed to connect"));
-      };
-    });
-  }
-
-  /**
-   * Before authentication, a session must be obtained from the server using the "connect" event.
-   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#websocket_protocol
-   */
-  private async registerSessionAsync(webSocket: WebSocket): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const subscribe = (event: MessageEvent<string>) => {
-        const data = JSON.parse(event.data) as { msg: string };
-        if (data.msg === "connected") {
-          webSocket.removeEventListener("message", subscribe);
-          resolve();
-        } else if (data.msg === "failed") {
-          webSocket.removeEventListener("message", subscribe);
-          reject(new Error("Unable to establish connection"));
-        }
-      };
-
-      webSocket.addEventListener("message", subscribe);
-      webSocket.send(
-        JSON.stringify({
-          msg: "connect",
-          version: "1", // this must be number, not string
-          support: ["1"], // this must be number, not string
-        }),
-      );
-    });
-  }
-
-  /**
-   * After a session was obtained, the session can be authenticated.
-   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#websocket_protocol
-   */
-  private async authenticateWebSocketAsync(webSocket?: WebSocket): Promise<void> {
-    logger.debug("Authenticating with username and password", {
-      url: this.wsUrl(),
-    });
-    const response = await this.requestAsync(
-      "auth.login",
-      [this.getSecretValue("username"), this.getSecretValue("password")],
-      webSocket,
-    );
-    const result = await z.boolean().parseAsync(response);
-    if (!result) throw new ResponseError({ status: 401 });
-    logger.debug("Authenticated successfully with username and password", {
-      url: this.wsUrl(),
-    });
-  }
-
-  private async getPoolsAsync() {
-    logger.debug("Retrieving pools", {
-      url: this.wsUrl(),
-    });
-
-    const response = await this.requestAsync("pool.query", [
-      [],
-      {
-        extra: {
-          is_upgraded: true,
-        },
-      },
-    ]);
-    const result = await poolSchema.parseAsync(response);
-    // Offline / exported pools have null values for allocated, size and free, so we filter them out
-    // See https://github.com/homarr-labs/homarr/issues/5194
-    const activePools = result
-      .map((pool) => {
-        if (pool.allocated !== null && pool.size !== null && pool.free !== null) {
-          return {
-            ...pool,
-            allocated: pool.allocated,
-            size: pool.size,
-            free: pool.free,
-          };
-        }
-
-        return null;
-      })
-      .filter((pool) => pool !== null);
-    logger.debug("Retrieved pools", {
-      url: this.wsUrl(),
-      totalCount: result.length,
-      activeCount: activePools.length,
-    });
-    return activePools;
-  }
-
-  /**
-   * Retrieves data using the reporting method
-   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#reporting
-   */
-  private async getReportingAsync(): Promise<ReportingItem[]> {
-    logger.debug("Retrieving reporting data", {
-      url: this.wsUrl(),
-    });
-
-    const response = await this.requestAsync("reporting.get_data", [
-      [
-        {
-          name: "cpu",
-        },
-        {
-          name: "memory",
-        },
-        {
-          name: "cputemp",
-        },
-      ],
-      {
-        aggregate: true,
-        start: dayjs().add(-5, "minutes").unix(),
-        end: dayjs().unix(),
-      },
-    ]);
-    const result = await z.array(reportingItemSchema).parseAsync(response);
-
-    logger.debug("Retrieved reporting data", {
-      url: this.wsUrl(),
-      count: result.length,
-    });
-    return result;
-  }
-
-  /**
-   * Retrieves a list of all available network interfaces
-   * @see https://www.truenas.com/docs/core/13.0/api/core_websocket_api.html#interface
-   */
-  private async getNetworkInterfacesAsync(): Promise<z.infer<typeof networkInterfaceSchema>> {
-    logger.debug("Retrieving available network-interfaces", {
-      url: this.wsUrl(),
-    });
-
-    const response = await this.requestAsync("interface.query", [
-      [], // no filters
-      {},
-    ]);
-    const result = await networkInterfaceSchema.parseAsync(response);
-
-    logger.debug("Retrieved available network-interfaces", {
-      url: this.wsUrl(),
-      count: result.length,
-    });
-    return result;
-  }
-
-  /**
-   * Retrieves reporting network data of the last 5 minutes
-   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#reporting
-   */
-  private async getReportingNetdataAsync(): Promise<z.infer<typeof reportingNetDataSchema>> {
-    const networkInterfaces = await this.getNetworkInterfacesAsync();
-
-    logger.debug("Retrieving reporting network data", {
-      url: this.wsUrl(),
-    });
-
-    const response = await this.requestAsync("reporting.netdata_get_data", [
-      networkInterfaces.map((networkInterface) => ({
-        name: "interface",
-        identifier: networkInterface.id,
-      })),
-      {
-        start: dayjs().add(-5, "minutes").unix(),
-        end: dayjs().unix(),
-      },
-    ]);
-    const result = await reportingNetDataSchema.parseAsync(response);
-
-    logger.debug("Retrieved reporting-network-data", {
-      url: this.wsUrl(),
-      count: result.length,
-    });
-    return result;
-  }
-
-  /**
-   * Retrieves information about the system
-   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#system
-   */
-  private async getSystemInformationAsync(): Promise<z.infer<typeof systemInfoSchema>> {
-    logger.debug("Retrieving system-information", {
-      url: this.wsUrl(),
-    });
-
-    const response = await this.requestAsync("system.info");
-    const result = await systemInfoSchema.parseAsync(response);
-
-    logger.debug("Retrieved system-information", {
-      url: this.wsUrl(),
-    });
-    return result;
-  }
-
   public async getSystemInfoAsync(): Promise<SystemHealthMonitoring> {
     const systemInformation = await this.getSystemInformationAsync();
     const reporting = await this.getReportingAsync();
@@ -272,7 +39,7 @@ export class TrueNasIntegration extends Integration implements ISystemHealthMoni
 
     return {
       cpuUtilization: cpuData.reduce((acc, item) => acc + (item > 100 ? 0 : item), 0) / cpuData.length,
-      cpuTemp: Math.max(...cpuTempData.filter((_item, i) => i > 0)),
+      cpuTemp: Math.max(...cpuTempData.filter((_item, index) => index > 0)),
       memAvailableInBytes: systemInformation.physmem,
       memUsedInBytes: memoryData[1] ?? 0, // Index 0 is UNIX timestamp, Index 1 is free space in bytes
       fileSystem: datasets.map((dataset) => ({
@@ -301,87 +68,164 @@ export class TrueNasIntegration extends Integration implements ISystemHealthMoni
     };
   }
 
-  /**
-   * Send a request through websocket and return response
-   * Times out after 5 seconds when no response was received.
-   * @param method json-rpc method to call
-   * @param params array of parameters
-   * @param webSocketOverride override of webSocket, helpful for not storing the connection
-   * @returns result of json-rpc call
-   */
-  private async requestAsync(method: string, params: unknown[] = [], webSocketOverride?: WebSocket) {
-    let webSocket = webSocketOverride ?? this.webSocket;
-    if (webSocket?.readyState !== WebSocket.OPEN) {
-      logger.debug("Connecting to websocket", {
-        url: this.wsUrl(),
-      });
-      // We can only land here with static webSocket
-      webSocket = await this.connectWebSocketAsync();
-      await this.registerSessionAsync(webSocket);
-
-      TrueNasIntegration.webSocketMap.set(this.integration.id, webSocket);
-      await this.authenticateWebSocketAsync();
-    }
-
-    return await new Promise((resolve, reject) => {
-      const id = createId();
-      const handler = (event: MessageEvent<string>) => {
-        const data = JSON.parse(event.data) as Record<string, unknown>;
-        if (data.msg !== "result") return;
-        if (data.id !== id) return;
-
-        clearTimeout(timeoutId);
-        webSocket.removeEventListener("message", handler);
-        logger.debug("Received method response", {
-          id,
-          method,
-          url: this.wsUrl(),
-        });
-        resolve(data.result);
-      };
-      const timeoutId = setTimeout(() => {
-        webSocket.removeEventListener("message", handler);
-        reject(
-          new RequestError(
-            {
-              type: "timeout",
-              reason: "aborted",
-              code: "ECONNABORTED",
-            },
-            { cause: new Error("Canceled request after 5 seconds") },
-          ),
-        );
-      }, 5000);
-
-      webSocket.addEventListener("message", handler);
-
-      logger.debug("Sending method request", {
-        id,
-        method,
-        url: this.wsUrl(),
-      });
-
-      webSocket.send(
-        JSON.stringify({
-          id,
-          msg: "method",
-          method,
-          params,
-        }),
-      );
-    });
+  private getClient(): TrueNasClient {
+    return (this.client ??= this.createClient());
   }
 
-  private extractNetworkTrafficData = (data: z.infer<typeof reportingNetDataSchema>, index = 1 | 2) => {
+  private createClient(): TrueNasClient {
+    const credentials: TrueNasCredentials = this.hasSecretValue("apiKey")
+      ? { apiKey: this.getSecretValue("apiKey") }
+      : { username: this.getSecretValue("username"), password: this.getSecretValue("password") };
+
+    return new TrueNasClient(this.integration.id, (path) => this.webSocketUrl(path), credentials);
+  }
+
+  private async requestAsync(method: string, params: unknown[] = []): Promise<unknown> {
+    return this.getClient().requestAsync(method, params);
+  }
+
+  private async getPoolsAsync() {
+    logger.debug("Retrieving pools", { url: this.integration.url });
+
+    const response = await this.requestAsync("pool.query", [
+      [],
+      {
+        extra: {
+          is_upgraded: true,
+        },
+      },
+    ]);
+    const result = await poolSchema.parseAsync(response);
+    // Offline / exported pools have null values for allocated, size and free, so we filter them out
+    // See https://github.com/homarr-labs/homarr/issues/5194
+    const activePools = result
+      .map((pool) => {
+        if (pool.allocated !== null && pool.size !== null && pool.free !== null) {
+          return {
+            ...pool,
+            allocated: pool.allocated,
+            size: pool.size,
+            free: pool.free,
+          };
+        }
+
+        return null;
+      })
+      .filter((pool) => pool !== null);
+    logger.debug("Retrieved pools", {
+      url: this.integration.url,
+      totalCount: result.length,
+      activeCount: activePools.length,
+    });
+    return activePools;
+  }
+
+  /**
+   * Retrieves data using the reporting method
+   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#reporting
+   */
+  private async getReportingAsync(): Promise<ReportingItem[]> {
+    logger.debug("Retrieving reporting data", { url: this.integration.url });
+
+    const response = await this.requestAsync("reporting.get_data", [
+      [
+        {
+          name: "cpu",
+        },
+        {
+          name: "memory",
+        },
+        {
+          name: "cputemp",
+        },
+      ],
+      {
+        aggregate: true,
+        start: dayjs().add(-5, "minutes").unix(),
+        end: dayjs().unix(),
+      },
+    ]);
+    const result = await z.array(reportingItemSchema).parseAsync(response);
+
+    logger.debug("Retrieved reporting data", {
+      url: this.integration.url,
+      count: result.length,
+    });
+    return result;
+  }
+
+  /**
+   * Retrieves a list of all available network interfaces
+   * @see https://www.truenas.com/docs/core/13.0/api/core_websocket_api.html#interface
+   */
+  private async getNetworkInterfacesAsync(): Promise<z.infer<typeof networkInterfaceSchema>> {
+    logger.debug("Retrieving available network-interfaces", { url: this.integration.url });
+
+    const response = await this.requestAsync("interface.query", [
+      [], // no filters
+      {},
+    ]);
+    const result = await networkInterfaceSchema.parseAsync(response);
+
+    logger.debug("Retrieved available network-interfaces", {
+      url: this.integration.url,
+      count: result.length,
+    });
+    return result;
+  }
+
+  /**
+   * Retrieves reporting network data of the last 5 minutes
+   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#reporting
+   */
+  private async getReportingNetdataAsync(): Promise<z.infer<typeof reportingNetDataSchema>> {
+    const networkInterfaces = await this.getNetworkInterfacesAsync();
+
+    logger.debug("Retrieving reporting network data", { url: this.integration.url });
+
+    const response = await this.requestAsync("reporting.netdata_get_data", [
+      networkInterfaces.map((networkInterface) => ({
+        name: "interface",
+        identifier: networkInterface.id,
+      })),
+      {
+        start: dayjs().add(-5, "minutes").unix(),
+        end: dayjs().unix(),
+      },
+    ]);
+    const result = await reportingNetDataSchema.parseAsync(response);
+
+    logger.debug("Retrieved reporting-network-data", {
+      url: this.integration.url,
+      count: result.length,
+    });
+    return result;
+  }
+
+  /**
+   * Retrieves information about the system
+   * @see https://www.truenas.com/docs/api/scale_websocket_api.html#system
+   */
+  private async getSystemInformationAsync(): Promise<z.infer<typeof systemInfoSchema>> {
+    logger.debug("Retrieving system-information", { url: this.integration.url });
+
+    const response = await this.requestAsync("system.info");
+    const result = await systemInfoSchema.parseAsync(response);
+
+    logger.debug("Retrieved system-information", { url: this.integration.url });
+    return result;
+  }
+
+  private extractNetworkTrafficData = (data: z.infer<typeof reportingNetDataSchema>, index: 1 | 2) => {
     return data.reduce((acc, current) => acc + (current.data.at(-1)?.at(index) ?? 0), 0);
   };
 
-  private extractLatestReportingData(data: ReportingItem[], key: ReportingItem["identifier"]) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const dataObject = data.find((item) => item.identifier === key)!;
-    // TODO: check why the below sorting is done, because right now it compares number[] with number[]?
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return dataObject.data.sort((item1, item2) => (item1 > item2 ? -1 : 1))[0]!;
+  private extractLatestReportingData(data: ReportingItem[], identifier: ReportingItem["identifier"]) {
+    const item = data.find((reportingItem) => reportingItem.identifier === identifier);
+    // Reporting rows are [timestamp, ...values] in ascending time order, so the last row is the most recent reading.
+    const latest = item?.data.at(-1);
+    if (!latest) throw new Error(`TrueNAS returned no "${identifier}" reporting data`);
+    return latest;
   }
 }
 

packages/widgets/src/index.tsx

@@ -53,7 +53,6 @@ import * as weather from "./weather";
 
 export type { WidgetDefinition, WidgetOptionsSettings } from "./definition";
 export type { WidgetComponentProps };
-export { useWidgetSize, WidgetSizeProvider } from "./widget-size";
 
 export const widgetImports = {
   clock,

packages/widgets/src/weather/component.tsx

@@ -11,7 +11,6 @@ import { metricToImperial } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
-import { useWidgetSize } from "../widget-size";
 import { WeatherDescription, WeatherIcon } from "./icon";
 
 export default function WeatherWidget({ isEditMode, options }: WidgetComponentProps<"weather">) {
@@ -30,23 +29,19 @@ export default function WeatherWidget({ isEditMode, options }: WidgetComponentPr
     onData: (data) => utils.widget.weather.atLocation.setData(input, data),
   });
 
-  const { gridWidth, gridHeight } = useWidgetSize();
-  const isCompact = gridWidth <= 1 || gridHeight <= 1;
-  const showForecast = options.hasForecast && !isCompact;
-
   return (
     <Stack
       align="center"
-      gap={isCompact ? "xs" : "sm"}
+      gap="sm"
       justify="center"
       w="100%"
       h="100%"
       style={{ pointerEvents: isEditMode ? "none" : undefined }}
     >
-      {showForecast ? (
+      {options.hasForecast ? (
         <WeeklyForecast weather={weather} options={options} />
       ) : (
-        <DailyWeather weather={weather} options={options} compact={isCompact} />
+        <DailyWeather weather={weather} options={options} />
       )}
     </Stack>
   );
@@ -56,28 +51,24 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
-const DailyWeather = ({ options, weather, compact }: WeatherProps & { compact?: boolean }) => {
+const DailyWeather = ({ options, weather }: WeatherProps) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
 
-  const iconSize = compact ? 20 : 30;
-  const tempSize = compact ? 20 : 30;
-  const detailSize = compact ? 13 : 16;
-
   return (
     <>
       <Group className="weather-day-group" gap="sm">
         <HoverCard>
           <HoverCard.Target>
             <Box>
-              <WeatherIcon size={iconSize} code={weather.current.weathercode} />
+              <WeatherIcon size={30} code={weather.current.weathercode} />
             </Box>
           </HoverCard.Target>
           <HoverCard.Dropdown>
             <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
           </HoverCard.Dropdown>
         </HoverCard>
-        <Text fz={tempSize}>
+        <Text fz={30}>
           {getPreferredUnit(
             weather.current.temperature,
             options.isFormatFahrenheit,
@@ -86,10 +77,10 @@ const DailyWeather = ({ options, weather, compact }: WeatherProps & { compact?:
         </Text>
       </Group>
       <Stack gap="xs" align="center">
-        {options.showCurrentWindSpeed && !compact && (
+        {options.showCurrentWindSpeed && (
           <Group className="weather-current-wind-speed-group" wrap="nowrap" gap="xs">
-            <IconWind size={detailSize} />
-            <Text fz={detailSize}>
+            <IconWind size={16} />
+            <Text fz={16}>
               {t("currentWindSpeed", {
                 currentWindSpeed: (options.useImperialSpeed
                   ? metricToImperial(weather.current.windspeed)
@@ -104,8 +95,8 @@ const DailyWeather = ({ options, weather, compact }: WeatherProps & { compact?:
         )}
         <Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
           <Group gap="xs" wrap="nowrap">
-            <IconArrowUpRight size={detailSize} />
-            <Text fz={detailSize}>
+            <IconArrowUpRight size={16} />
+            <Text fz={16}>
               {getPreferredUnit(
                 weather.daily[0]?.maxTemp,
                 options.isFormatFahrenheit,
@@ -114,8 +105,8 @@ const DailyWeather = ({ options, weather, compact }: WeatherProps & { compact?:
             </Text>
           </Group>
           <Group gap="xs" wrap="nowrap">
-            <IconArrowDownRight size={detailSize} />
-            <Text fz={detailSize}>
+            <IconArrowDownRight size={16} />
+            <Text fz={16}>
               {getPreferredUnit(
                 weather.daily[0]?.minTemp,
                 options.isFormatFahrenheit,
@@ -125,11 +116,11 @@ const DailyWeather = ({ options, weather, compact }: WeatherProps & { compact?:
           </Group>
         </Group>
       </Stack>
-      {options.showCity && !compact && (
+      {options.showCity && (
         <>
           <Group className="weather-city-group" wrap="nowrap" gap="xs">
-            <IconMapPin size={detailSize} />
-            <Text fz={detailSize} style={{ whiteSpace: "nowrap" }}>
+            <IconMapPin size={16} />
+            <Text fz={16} style={{ whiteSpace: "nowrap" }}>
               {options.location.name}
             </Text>
           </Group>

packages/widgets/src/widget-size.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { createContext, useContext } from "react";
-
-export interface WidgetSize {
-  gridWidth: number;
-  gridHeight: number;
-}
-
-const WidgetSizeContext = createContext<WidgetSize | null>(null);
-
-export const useWidgetSize = () => {
-  const ctx = useContext(WidgetSizeContext);
-  if (!ctx) throw new Error("useWidgetSize must be used within WidgetSizeProvider");
-  return ctx;
-};
-
-interface WidgetSizeProviderProps extends WidgetSize {
-  children: ReactNode;
-}
-
-export const WidgetSizeProvider = ({ gridWidth, gridHeight, children }: WidgetSizeProviderProps) => (
-  <WidgetSizeContext.Provider value={{ gridWidth, gridHeight }}>{children}</WidgetSizeContext.Provider>
-);

pnpm-lock.yaml

@@ -40,8 +40,8 @@ catalogs:
       specifier: 7.2.1
       version: 7.2.1
     '@gfazioli/mantine-onboarding-tour':
-      specifier: ^4.0.3
-      version: 4.0.3
+      specifier: ^4.0.4
+      version: 4.0.4
     '@gitbeaker/rest':
       specifier: ^43.8.0
       version: 43.8.0
@@ -532,7 +532,7 @@ catalogs:
 overrides:
   '@babel/helpers@<7.26.10': '>=7.29.7'
   '@babel/runtime@<7.26.10': '>=7.29.7'
-  axios@>=1.0.0 <1.8.2: '>=1.16.1'
+  axios@>=1.0.0 <1.8.2: '>=1.17.0'
   brace-expansion@>=2.0.0 <=2.0.1: '>=5.0.6'
   brace-expansion@>=1.0.0 <=1.1.11: '>=5.0.6'
   esbuild@<=0.24.2: '>=0.28.0'
@@ -651,7 +651,7 @@ importers:
         version: 3.2.2(react@19.2.7)
       '@gfazioli/mantine-onboarding-tour':
         specifier: 'catalog:'
-        version: 4.0.3(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 4.0.4(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@homarr/analytics':
         specifier: workspace:^0.1.0
         version: link:../../packages/analytics
@@ -1773,6 +1773,9 @@ importers:
       undici:
         specifier: 'catalog:'
         version: 7.24.6
+      ws:
+        specifier: 'catalog:'
+        version: 8.21.0
       xml2js:
         specifier: 'catalog:'
         version: 0.6.2
@@ -1786,6 +1789,9 @@ importers:
       '@types/node-unifi':
         specifier: 'catalog:'
         version: 2.5.1(patch_hash=5e6ae51e2a17a7f9729bfa30b0eb3d0842a5810ac6db47603ab4a6efa1ed84c5)
+      '@types/ws':
+        specifier: 'catalog:'
+        version: 8.18.1
       '@types/xml2js':
         specifier: 'catalog:'
         version: 0.4.14
@@ -3316,8 +3322,8 @@ packages:
   '@formatjs/intl-localematcher@0.8.1':
     resolution: {integrity: sha512-xwEuwQFdtSq1UKtQnyTZWC+eHdv7Uygoa+H2k/9uzBVQjDyp9r20LNDNKedWXll7FssT3GRHvqsdJGYSUWqYFA==}
 
-  '@gfazioli/mantine-onboarding-tour@4.0.3':
-    resolution: {integrity: sha512-krYmZoGSV9qpvtztK+QChhfwv1l6LsP/n0u+ih2/A0mV0Osn5avmlj+UBAKoIvwzA4xS50NSoPHj3B53QLzs/Q==}
+  '@gfazioli/mantine-onboarding-tour@4.0.4':
+    resolution: {integrity: sha512-8O70elJVFSJJCB/Ie4TDxAKuDgE1BRU8o7O7ArFWzPYGx4Sa4jWW8OC0QyjxZul5aFaFJFl55lG263oh7IMkHg==}
     peerDependencies:
       '@mantine/core': '>=9.0.0'
       '@mantine/hooks': '>=9.0.0'
@@ -10525,7 +10531,7 @@ snapshots:
       '@formatjs/fast-memoize': 3.1.0
       tslib: 2.8.1
 
-  '@gfazioli/mantine-onboarding-tour@4.0.3(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@gfazioli/mantine-onboarding-tour@4.0.4(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@mantine/core': 9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@mantine/hooks': 9.2.2(react@19.2.7)
@@ -10573,7 +10579,7 @@ snapshots:
       eventemitter2: 6.4.9
       http-cookie-agent: 6.0.8(tough-cookie@5.1.2)(undici@7.24.6)
       tough-cookie: 5.1.2
-      ws: 8.20.1
+      ws: 8.21.0
     transitivePeerDependencies:
       - bufferutil
       - debug

pnpm-workspace.yaml

@@ -14,7 +14,7 @@ catalog:
   "@dnd-kit/utilities": ^3.2.2
   "@drizzle-team/brocli": ^0.12.0
   "@extractus/feed-extractor": 7.2.1
-  '@gfazioli/mantine-onboarding-tour': ^4.0.3
+  '@gfazioli/mantine-onboarding-tour': ^4.0.4
   "@gitbeaker/rest": ^43.8.0
   "@homarr/gridstack": ^1.12.0
   "@homarr/node-unifi": ^2.6.0