feat(beszel): add searchable system select input for widget options

Replace plain text systemId option with a dedicated beszelSystem factory
type backed by a searchable Select that fetches available systems from
the integration. Shows proper states for no integration, loading, and
no systems found.

packages/translation/src/lang/en.json

@@ -3664,7 +3664,12 @@
       "description": "Time-series charts for CPU, memory, disk, network, and Docker container metrics",
       "option": {
         "systemId": {
-          "label": "System ID"
+          "label": "System",
+          "description": "Select a Beszel system to display stats for",
+          "configureIntegrationFirst": "Configure a Beszel integration first",
+          "loading": "Loading systems...",
+          "placeholder": "Select a system",
+          "noSystems": "No systems found"
         },
         "timePeriod": {
           "label": "Time period"

packages/widgets/src/_inputs/index.ts

@@ -16,6 +16,7 @@ import { WidgetTextInput } from "./widget-text-input";
 import { WidgetUmamiEventInput } from "./widget-umami-event-input";
 import { WidgetUmamiEventNamesInput } from "./widget-umami-event-names-input";
 import { WidgetUmamiWebsiteInput } from "./widget-umami-website-input";
+import { WidgetBeszelSystemInput } from "./widget-beszel-system-input";
 
 const mapping = {
   anchorNote: WidgetAnchorNoteInput,
@@ -35,6 +36,7 @@ const mapping = {
   umamiEventNames: WidgetUmamiEventNamesInput,
   umamiWebsite: WidgetUmamiWebsiteInput,
   customWidgetSelect: WidgetCustomWidgetSelectInput,
+  beszelSystem: WidgetBeszelSystemInput,
 } satisfies Record<WidgetOptionType, unknown>;
 
 export const getInputForType = <TType extends WidgetOptionType>(type: TType) => {

packages/widgets/src/_inputs/widget-beszel-system-input.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Select, Text } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { CommonWidgetInputProps } from "./common";
+import { useWidgetInputTranslation } from "./common";
+import { useFormContext } from "./form";
+
+export const WidgetBeszelSystemInput = ({ property, kind }: CommonWidgetInputProps<"beszelSystem">) => {
+  const t = useScopedI18n("widget.beszelSystemStats.option.systemId");
+  const tInput = useWidgetInputTranslation(kind, property);
+  const form = useFormContext();
+
+  const integrationIds = form.values.integrationIds;
+
+  const { data: systemsResult = [], isPending } = clientApi.widget.beszel.getSystems.useQuery(
+    { integrationIds },
+    { enabled: integrationIds.length > 0, staleTime: 30_000 },
+  );
+
+  if (integrationIds.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("configureIntegrationFirst")}
+      </Text>
+    );
+  }
+
+  const systems = systemsResult.flatMap((r) => r.systems.map((s) => ({ value: s.id, label: s.name })));
+
+  return (
+    <Select
+      label={tInput("label")}
+      description={tInput("description")}
+      placeholder={isPending ? t("loading") : t("placeholder")}
+      clearable
+      searchable
+      nothingFoundMessage={t("noSystems")}
+      data={systems}
+      {...form.getInputProps(`options.${property}`)}
+    />
+  );
+};

packages/widgets/src/beszel-system-stats/index.ts

@@ -18,7 +18,7 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
   integrationsRequired: true,
   createOptions() {
     return optionsBuilder.from((factory) => ({
-      systemId: factory.text({ defaultValue: "" }),
+      systemId: factory.beszelSystem(),
       timePeriod: factory.select({
         defaultValue: "1h",
         options: timePeriodOptions,

packages/widgets/src/options.ts

@@ -175,6 +175,11 @@ const optionsFactory = {
     defaultValue: "",
     withDescription: true,
   }),
+  beszelSystem: () => ({
+    type: "beszelSystem" as const,
+    defaultValue: "",
+    withDescription: true,
+  }),
   customWidgetSelect: (input?: CommonInput<string>) => ({
     type: "customWidgetSelect" as const,
     defaultValue: input?.defaultValue ?? "",