style: auto-fix lint and format

Introduce useWidgetSize() hook and WidgetSizeProvider context that
exposes grid dimensions (gridWidth, gridHeight) to every widget,
enabling responsive rendering based on how many grid cells a widget
occupies.

Weather widget updated as proof of concept: when placed in a 1x1 or
1xN cell with forecast enabled, it switches to a compact layout that
hides the forecast row, wind speed, and city name to prevent clipping.

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -23,8 +23,6 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   const { data: integrationData } = clientApi.integration.all.useQuery();
   const settings = useSettings();
 
-  const availableKinds = useMemo(() => new Set((integrationData ?? []).map((i) => i.kind)), [integrationData]);
-
   const items = useMemo(
     () =>
       objectEntries(widgetImports)
@@ -42,15 +40,10 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
     [t],
   );
 
-  const filteredItems = useMemo(() => {
-    const query = search.toLowerCase().trim();
-    if (!query) return items;
-    return items.filter(
-      (item) =>
-        item.name.toLowerCase().includes(query) ||
-        item.supportedIntegrations.some((kind) => getIntegrationName(kind).toLowerCase().includes(query)),
-    );
-  }, [items, search]);
+  const filteredItems = useMemo(
+    () => items.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
+    [items, search],
+  );
 
   const handleAdd = (kind: WidgetKind) => {
     const definition = widgetImports[kind].definition;
@@ -105,12 +98,7 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
       }}
     >
       {filteredItems.map((item) => (
-        <WidgetItem
-          key={item.kind}
-          item={item}
-          onSelect={() => handleAdd(item.kind)}
-          hasMatchingIntegration={item.supportedIntegrations.some((kind) => availableKinds.has(kind))}
-        />
+        <WidgetItem key={item.kind} item={item} onSelect={() => handleAdd(item.kind)} />
       ))}
 
       {filteredItems.length === 0 && (
@@ -128,7 +116,6 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
 const WidgetItem = ({
   item,
   onSelect,
-  hasMatchingIntegration,
 }: {
   item: {
     kind: WidgetKind;
@@ -138,7 +125,6 @@ const WidgetItem = ({
     icon: TablerIcon;
   };
   onSelect: () => void;
-  hasMatchingIntegration: boolean;
 }) => {
   const t = useI18n();
 
@@ -147,12 +133,7 @@ const WidgetItem = ({
       h={selectGridCardHeight}
       withBorder
       pos="relative"
-      style={{
-        overflow: "hidden",
-        "--_hover-opacity": "0",
-        borderColor: hasMatchingIntegration ? "var(--mantine-color-blue-6)" : undefined,
-        borderWidth: hasMatchingIntegration ? 2 : undefined,
-      }}
+      style={{ overflow: "hidden", "--_hover-opacity": "0" }}
       onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")}
       onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")}
     >

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

@@ -1,6 +1,7 @@
 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";
@@ -18,7 +19,7 @@ export const SectionContent = () => {
    * @see https://github.com/homarr-labs/homarr/pull/1770
    */
   const sortedItems = useMemo(() => {
-    return [...items, ...innerSections].sort((itemA, itemB) => {
+    return [...items, ...innerSections].toSorted((itemA, itemB) => {
       if (itemA.yOffset === itemB.yOffset) {
         return itemA.xOffset - itemB.xOffset;
       }
@@ -59,7 +60,13 @@ const Item = ({ item, innerRef }: ItemProps) => {
       minWidth={minWidth}
       minHeight={minHeight}
     >
-      {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
+      {item.type === "item" ? (
+        <WidgetSizeProvider gridWidth={item.width} gridHeight={item.height}>
+          <BoardItemContent item={item} />
+        </WidgetSizeProvider>
+      ) : (
+        <BoardDynamicSection section={item} />
+      )}
     </GridStackItem>
   );
 };

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.17.0",
+      "axios@>=1.0.0 <1.8.2": ">=1.16.1",
       "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",
@@ -89,7 +89,7 @@
       "prismjs@<1.30.0": ">=1.30.0",
       "proxmox-api>undici": "7.24.6",
       "react-is": "^19.2.7",
-      "rollup@>=4.0.0 <4.22.4": ">=4.61.1",
+      "rollup@>=4.0.0 <4.22.4": ">=4.61.0",
       "sha.js@<=2.4.11": ">=2.4.12",
       "tar-fs@>=3.0.0 <3.0.9": ">=3.1.2",
       "tar-fs@>=2.0.0 <2.1.3": ">=3.1.2",

packages/definitions/src/integration.ts

@@ -364,7 +364,7 @@ export const integrationDefs = {
   },
   truenas: {
     name: "TrueNAS",
-    secretKinds: [["username", "password"], ["apiKey"]],
+    secretKinds: [["username", "password"]],
     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,14 +47,12 @@
     "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,16 +85,6 @@ 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

@@ -1,79 +0,0 @@
-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

@@ -1,264 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,315 +0,0 @@
-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,6 +1,8 @@
 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";
@@ -8,21 +10,252 @@ 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 client?: TrueNasClient;
+  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);
 
-  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();
@@ -39,7 +272,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, index) => index > 0)),
+      cpuTemp: Math.max(...cpuTempData.filter((_item, i) => i > 0)),
       memAvailableInBytes: systemInformation.physmem,
       memUsedInBytes: memoryData[1] ?? 0, // Index 0 is UNIX timestamp, Index 1 is free space in bytes
       fileSystem: datasets.map((dataset) => ({
@@ -68,164 +301,87 @@ export class TrueNasIntegration extends Integration implements ISystemHealthMoni
     };
   }
 
-  private getClient(): TrueNasClient {
-    return (this.client ??= this.createClient());
-  }
-
-  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
+   * 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 getReportingAsync(): Promise<ReportingItem[]> {
-    logger.debug("Retrieving reporting data", { url: this.integration.url });
+  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);
 
-    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);
+      TrueNasIntegration.webSocketMap.set(this.integration.id, webSocket);
+      await this.authenticateWebSocketAsync();
+    }
 
-    logger.debug("Retrieved reporting data", {
-      url: this.integration.url,
-      count: result.length,
+    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,
+        }),
+      );
     });
-    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) => {
+  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[], 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;
+  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]!;
   }
 }
 

packages/widgets/src/index.tsx

@@ -53,6 +53,7 @@ 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,6 +11,7 @@ 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">) {
@@ -29,19 +30,23 @@ 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="sm"
+      gap={isCompact ? "xs" : "sm"}
       justify="center"
       w="100%"
       h="100%"
       style={{ pointerEvents: isEditMode ? "none" : undefined }}
     >
-      {options.hasForecast ? (
+      {showForecast ? (
         <WeeklyForecast weather={weather} options={options} />
       ) : (
-        <DailyWeather weather={weather} options={options} />
+        <DailyWeather weather={weather} options={options} compact={isCompact} />
       )}
     </Stack>
   );
@@ -51,24 +56,28 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
-const DailyWeather = ({ options, weather }: WeatherProps) => {
+const DailyWeather = ({ options, weather, compact }: WeatherProps & { compact?: boolean }) => {
   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={30} code={weather.current.weathercode} />
+              <WeatherIcon size={iconSize} code={weather.current.weathercode} />
             </Box>
           </HoverCard.Target>
           <HoverCard.Dropdown>
             <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
           </HoverCard.Dropdown>
         </HoverCard>
-        <Text fz={30}>
+        <Text fz={tempSize}>
           {getPreferredUnit(
             weather.current.temperature,
             options.isFormatFahrenheit,
@@ -77,10 +86,10 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
         </Text>
       </Group>
       <Stack gap="xs" align="center">
-        {options.showCurrentWindSpeed && (
+        {options.showCurrentWindSpeed && !compact && (
           <Group className="weather-current-wind-speed-group" wrap="nowrap" gap="xs">
-            <IconWind size={16} />
-            <Text fz={16}>
+            <IconWind size={detailSize} />
+            <Text fz={detailSize}>
               {t("currentWindSpeed", {
                 currentWindSpeed: (options.useImperialSpeed
                   ? metricToImperial(weather.current.windspeed)
@@ -95,8 +104,8 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
         )}
         <Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
           <Group gap="xs" wrap="nowrap">
-            <IconArrowUpRight size={16} />
-            <Text fz={16}>
+            <IconArrowUpRight size={detailSize} />
+            <Text fz={detailSize}>
               {getPreferredUnit(
                 weather.daily[0]?.maxTemp,
                 options.isFormatFahrenheit,
@@ -105,8 +114,8 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
             </Text>
           </Group>
           <Group gap="xs" wrap="nowrap">
-            <IconArrowDownRight size={16} />
-            <Text fz={16}>
+            <IconArrowDownRight size={detailSize} />
+            <Text fz={detailSize}>
               {getPreferredUnit(
                 weather.daily[0]?.minTemp,
                 options.isFormatFahrenheit,
@@ -116,11 +125,11 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
           </Group>
         </Group>
       </Stack>
-      {options.showCity && (
+      {options.showCity && !compact && (
         <>
           <Group className="weather-city-group" wrap="nowrap" gap="xs">
-            <IconMapPin size={16} />
-            <Text fz={16} style={{ whiteSpace: "nowrap" }}>
+            <IconMapPin size={detailSize} />
+            <Text fz={detailSize} style={{ whiteSpace: "nowrap" }}>
               {options.location.name}
             </Text>
           </Group>

packages/widgets/src/widget-size.tsx

@@ -0,0 +1,25 @@
+"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-workspace.yaml

@@ -14,24 +14,24 @@ 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.4
+  '@gfazioli/mantine-onboarding-tour': ^4.0.3
   "@gitbeaker/rest": ^43.8.0
   "@homarr/gridstack": ^1.12.0
   "@homarr/node-unifi": ^2.6.0
   "@immich/sdk": ^2.7.5
   "@jellyfin/sdk": ^0.13.0
   "@kubernetes/client-node": ^1.4.0
-  "@mantine/charts": ^9.3.0
-  "@mantine/colors-generator": ^9.3.0
-  "@mantine/core": ^9.3.0
-  "@mantine/dates": ^9.3.0
-  "@mantine/dropzone": ^9.3.0
-  "@mantine/form": ^9.3.0
-  "@mantine/hooks": ^9.3.0
-  "@mantine/modals": ^9.3.0
-  "@mantine/notifications": ^9.3.0
-  "@mantine/spotlight": ^9.3.0
-  "@mantine/tiptap": ^9.3.0
+  "@mantine/charts": ^9.2.2
+  "@mantine/colors-generator": ^9.2.2
+  "@mantine/core": ^9.2.2
+  "@mantine/dates": ^9.2.2
+  "@mantine/dropzone": ^9.2.2
+  "@mantine/form": ^9.2.2
+  "@mantine/hooks": ^9.2.2
+  "@mantine/modals": ^9.2.2
+  "@mantine/notifications": ^9.2.2
+  "@mantine/spotlight": ^9.2.2
+  "@mantine/tiptap": ^9.2.2
   "@next/eslint-plugin-next": 16.2.7
   "@octokit/auth-app": ^8.2.0
   "@paralleldrive/cuid2": ^3.3.0
@@ -44,28 +44,28 @@ catalog:
   "@semantic-release/release-notes-generator": ^14.1.1
   "@t3-oss/env-nextjs": ^0.13.11
   "@tabler/icons-react": ^3.44.0
-  "@tanstack/react-query": ^5.101.0
-  "@tanstack/react-query-devtools": ^5.101.0
-  "@tanstack/react-query-next-experimental": ^5.101.0
+  "@tanstack/react-query": ^5.100.14
+  "@tanstack/react-query-devtools": ^5.100.14
+  "@tanstack/react-query-next-experimental": ^5.100.14
   "@testcontainers/mysql": ^12.0.1
   "@testcontainers/postgresql": ^12.0.1
   "@testcontainers/redis": ^12.0.1
-  "@tiptap/extension-color": 3.25.0
-  "@tiptap/extension-highlight": 3.25.0
-  "@tiptap/extension-image": 3.25.0
-  "@tiptap/extension-link": ^3.25.0
-  "@tiptap/extension-placeholder": ^3.25.0
-  "@tiptap/extension-table": 3.25.0
-  "@tiptap/extension-table-cell": 3.25.0
-  "@tiptap/extension-table-header": 3.25.0
-  "@tiptap/extension-table-row": 3.25.0
-  "@tiptap/extension-task-item": 3.25.0
-  "@tiptap/extension-task-list": 3.25.0
-  "@tiptap/extension-text-align": 3.25.0
-  "@tiptap/extension-text-style": 3.25.0
-  "@tiptap/extension-underline": 3.25.0
-  "@tiptap/react": ^3.25.0
-  "@tiptap/starter-kit": ^3.25.0
+  "@tiptap/extension-color": 3.24.0
+  "@tiptap/extension-highlight": 3.24.0
+  "@tiptap/extension-image": 3.24.0
+  "@tiptap/extension-link": ^3.24.0
+  "@tiptap/extension-placeholder": ^3.24.0
+  "@tiptap/extension-table": 3.24.0
+  "@tiptap/extension-table-cell": 3.24.0
+  "@tiptap/extension-table-header": 3.24.0
+  "@tiptap/extension-table-row": 3.24.0
+  "@tiptap/extension-task-item": 3.24.0
+  "@tiptap/extension-task-list": 3.24.0
+  "@tiptap/extension-text-align": 3.24.0
+  "@tiptap/extension-text-style": 3.24.0
+  "@tiptap/extension-underline": 3.24.0
+  "@tiptap/react": ^3.24.0
+  "@tiptap/starter-kit": ^3.24.0
   "@trpc/client": ^11.17.0
   "@trpc/next": ^11.17.0
   "@trpc/react-query": ^11.17.0
@@ -155,7 +155,7 @@ catalog:
   recharts: ^3.8.1
   sass: ^1.100.0
   semantic-release: ^25.0.3
-  semver-parser: ^4.2.1
+  semver-parser: ^4.2.0
   superjson: 2.2.6
   svgson: ^5.3.1
   swagger-ui-react: ^5.32.6