feat: preview widget settings live

.agents/skills/homarr-local-harness/SKILL.md

@@ -0,0 +1,60 @@
+---
+name: homarr-local-harness
+description: Build and inspect a writable Docker demo harness from the current Homarr checkout when validating a local branch in a browser.
+---
+
+# Homarr Local Harness
+
+Use this skill when a Homarr change needs a real production image and browser validation. Work from the repository root and keep the harness name Docker-safe, such as `feature-board`.
+
+## Set up the harness
+
+Run the TypeScript operations CLI; this workflow does not use the interactive developer TUI:
+
+```sh
+pnpm cli harness setup feature-board
+```
+
+`setup` builds the current checkout as `homarr:feature-board`, replaces the named harness container, and starts it with a persistent data volume. It enables demo mode, mock integrations, and writable demo mutations by default:
+
+- `DEMO_MODE=true`
+- `DEMO_READ_ONLY=false`
+- `UNSAFE_ENABLE_MOCK_INTEGRATION=true`
+
+Pass repeatable environment overrides when the feature needs them:
+
+```sh
+pnpm cli harness setup feature-board \
+  --env WORKSHOP_WEB_URL=https://example.test \
+  --env FEATURE_FLAG=true
+```
+
+Use `pnpm cli harness build <name>` when only the image is needed, and `pnpm cli harness run <name>` to start an already-built image. `--port <number>` pins a host port; otherwise Docker assigns one.
+
+Always use the URL printed by the command. If the output is no longer available, query it directly:
+
+```sh
+pnpm cli harness port feature-board
+```
+
+Do not assume port `7575`; the container listens on `7575`, but the host port is dynamic by default.
+
+## Browser validation
+
+Open the printed URL with the environment's `browser-harness` tool. In this workspace, the `agent-browser` CLI is the supported browser automation fallback. Load its current workflow before invoking it:
+
+```sh
+agent-browser skills get core
+```
+
+Navigate to the exact harness URL, wait for the app to become usable, exercise the changed flow, and capture screenshots or other browser evidence. Keep browser state in a named session when the workflow needs login persistence. Report the exact URL, viewport/session used, and screenshot paths; a Docker process or HTTP health response alone is not browser acceptance.
+
+## Cleanup
+
+Stop the named container when finished:
+
+```sh
+pnpm cli harness stop feature-board
+```
+
+Stopping keeps the data volume so the same harness can be restarted. A later `setup` rebuilds the image and replaces only the container. Preserve unrelated containers, images, volumes, and working-tree changes.

.agents/skills/homarr-local-harness/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Homarr Local Harness"
+  short_description: "Build and browse a writable local Homarr branch harness"
+  default_prompt: "Use $homarr-local-harness to set up a writable Homarr harness for the current branch and validate it in the browser."

.oxlintrc.json

@@ -30,26 +30,6 @@
   "options": {
     "reportUnusedDisableDirectives": "off"
   },
-  "overrides": [
-    {
-      "files": ["apps/nextjs/src/**/*.ts", "apps/nextjs/src/**/*.tsx"],
-      "excludeFiles": ["**/*.spec.ts", "**/*.spec.tsx"],
-      "rules": {
-        "eslint/no-restricted-imports": [
-          "error",
-          {
-            "paths": [
-              {
-                "name": "@homarr/widgets",
-                "allowTypeImports": true,
-                "message": "Import a narrow @homarr/widgets export to preserve widget lazy loading."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ],
   "ignorePatterns": [
     "**/*.config.js",
     "**/*.config.mjs",

apps/docs/docs/advanced/command-line/index.mdx

@@ -36,8 +36,6 @@ pnpm cli harness setup feature-board
 
 The command builds `homarr:feature-board`, starts a container with a persistent data volume, enables demo mode, and keeps demo mutations writable (`DEMO_READ_ONLY=false`). Docker assigns a free host port by default; use the URL printed by the command or query it later:
 
-The demo board includes every widget kind. Integration-backed widgets use the bundled mock integration; media widgets use public stock assets.
-
 ```sh
 pnpm cli harness port feature-board
 ```

apps/docs/docs/getting-started/after-the-installation.mdx

@@ -194,17 +194,17 @@ To configure this, click on the small 3 dots at the top of the item in the edit
   <figcaption>The tile menu contains the item editor and the separate move-and-resize tools.</figcaption>
 </figure>
 
-In the modal you can edit the app that you want to display:
+The side editor keeps the selected tile visible while you choose the app and adjust its display settings:
 
 <figure>
-  <img src={editItemCurrent} alt="Current Edit item modal for an App tile" style={{ maxWidth: "620px" }} />
-  <figcaption>
-    The Edit item workspace previews option changes as you configure the tile. Save changes to apply them to the board.
-  </figcaption>
+  <img
+    src={editItemCurrent}
+    alt="App tile highlighted beside the Edit item side editor"
+    style={{ maxWidth: "620px" }}
+  />
+  <figcaption>The selected tile stays highlighted while the rest of the board is subdued.</figcaption>
 </figure>
 
-When adding a widget, set its initial grid width and height directly in the preview. These size controls are only shown before the widget is added.
-
 As soon as you save your changes, the tile on the board will refresh and display your app.
 Resize from any visible edge or corner handle. For a Container, activate its top-left grip before using its resize handles.
 Press and hold a handle, move the pointer, and release it when the tile has the size you want.

apps/docs/docs/management/custom-widgets/authoring.mdx

@@ -41,10 +41,6 @@ needs attention.
 4. Write responsive JSX using `data`, `status`, `options`, and temporary `inputs`.
 5. Test and preview, inspect Data and the redacted request journal, then save.
 
-While focus is inside a code editor, use `Ctrl+Z`/`Cmd+Z` to undo and `Ctrl+Shift+Z`/`Cmd+Shift+Z` to redo. The toolbar exposes the same actions. This history is local to that editor; builder-wide undo is not yet available.
-
-Changing the definition, instance options, or credentials invalidates the previous preview and its live-action session. Run **Test and preview** again before treating the data or result as current. Automatic load queries are queued with up to four running at once so larger previews stay within the request limit.
-
 <CanonicalCustomWidgetExample
   id="named-widget-requests"
   label="Named queries and actions"

apps/nextjs/package.json

@@ -76,7 +76,6 @@
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-query-devtools": "catalog:",
     "@tanstack/react-query-next-experimental": "catalog:",
-    "@tanstack/react-query-persist-client": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/next": "catalog:",
     "@trpc/react-query": "catalog:",

apps/nextjs/src/app/[locale]/_client-providers/query-persistence.spec.ts

@@ -1,350 +0,0 @@
-import { dehydrate, QueryClient } from "@tanstack/react-query";
-import type { PersistedClient } from "@tanstack/react-query-persist-client";
-import { persistQueryClientRestore } from "@tanstack/react-query-persist-client";
-import { parse, stringify } from "superjson";
-import { afterEach, describe, expect, test, vi } from "vitest";
-
-import {
-  createSessionQueryPersister,
-  getQueryPersistenceStorageKey,
-  queryPersistenceBuster,
-  queryPersistenceMaxDataBytes,
-  shouldPersistDashboardQuery,
-} from "./query-persistence";
-
-const createSuccessfulQuery = (queryKey: readonly unknown[], data: unknown, updatedAt = Date.now()) => {
-  const queryClient = new QueryClient();
-  queryClient.setQueryData(queryKey, data, { updatedAt });
-  const query = queryClient.getQueryCache().find({ queryKey });
-  if (!query) throw new Error("Expected query to be present");
-  return { query, queryClient };
-};
-
-const createMemoryStorage = (): Storage => {
-  const values = new Map<string, string>();
-  return {
-    get length() {
-      return values.size;
-    },
-    clear: () => values.clear(),
-    getItem: (key) => values.get(key) ?? null,
-    key: (index) => Array.from(values.keys())[index] ?? null,
-    removeItem: (key) => values.delete(key),
-    setItem: (key, value) => values.set(key, value),
-  };
-};
-
-afterEach(() => {
-  vi.useRealTimers();
-  vi.restoreAllMocks();
-  window.sessionStorage.clear();
-});
-
-describe("widget query persistence", () => {
-  test("persists successful dashboard data but not unrelated, ping, pending, or oversized queries", () => {
-    const widget = createSuccessfulQuery([["widget", "weather", "getWeather"], { type: "query" }], { temp: 21 });
-    const supporting = createSuccessfulQuery([["app", "byIds"], { type: "query" }], [{ id: "app-1" }]);
-    const unrelated = createSuccessfulQuery([["board", "getBoardByName"], { type: "query" }], { name: "Home" });
-    const ping = createSuccessfulQuery([["widget", "app", "ping"], { type: "query" }], { status: "online" });
-    const oversized = createSuccessfulQuery([["widget", "example"], { type: "query" }], {
-      value: "x".repeat(queryPersistenceMaxDataBytes + 1),
-    });
-    const pendingClient = new QueryClient();
-    const pending = pendingClient.getQueryCache().build(pendingClient, {
-      queryKey: [["widget", "calendar", "findAllEvents"], { type: "query" }],
-      queryFn: () => Promise.resolve([]),
-    });
-
-    expect(shouldPersistDashboardQuery(widget.query)).toBe(true);
-    expect(shouldPersistDashboardQuery(supporting.query)).toBe(true);
-    expect(shouldPersistDashboardQuery(unrelated.query)).toBe(false);
-    expect(shouldPersistDashboardQuery(ping.query)).toBe(false);
-    expect(shouldPersistDashboardQuery(oversized.query)).toBe(false);
-    expect(shouldPersistDashboardQuery(pending)).toBe(false);
-  });
-
-  test("uses stable, isolated storage keys for anonymous and authenticated scopes", () => {
-    expect(getQueryPersistenceStorageKey("user-a")).toBe(getQueryPersistenceStorageKey("user-a"));
-    expect(getQueryPersistenceStorageKey("user-a")).not.toBe(getQueryPersistenceStorageKey("user-b"));
-    expect(getQueryPersistenceStorageKey(null)).not.toBe(getQueryPersistenceStorageKey("user-a"));
-
-    const userAKey = getQueryPersistenceStorageKey("user-a");
-    window.sessionStorage.setItem(userAKey, "a");
-    createSessionQueryPersister("user-a").removeClient();
-    expect(window.sessionStorage.getItem(userAKey)).toBeNull();
-  });
-
-  test("evicts every other scope so signing out cannot leave data behind", () => {
-    const userAKey = getQueryPersistenceStorageKey("user-a");
-    const anonymousKey = getQueryPersistenceStorageKey(null);
-    window.sessionStorage.setItem(userAKey, "a");
-    window.sessionStorage.setItem(anonymousKey, "anonymous");
-    window.sessionStorage.setItem("unrelated", "kept");
-
-    createSessionQueryPersister("user-b");
-
-    expect(window.sessionStorage.getItem(userAKey)).toBeNull();
-    expect(window.sessionStorage.getItem(anonymousKey)).toBeNull();
-    expect(window.sessionStorage.getItem("unrelated")).toBe("kept");
-  });
-
-  test("never restores another session scope", async () => {
-    const queryKey = [["widget", "weather", "getWeather"], { type: "query" }] as const;
-    const { queryClient } = createSuccessfulQuery(queryKey, { temp: 21 });
-    const userAPersister = createSessionQueryPersister("user-a");
-    userAPersister.persistClient({
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: dehydrate(queryClient),
-    });
-    userAPersister.flush();
-    expect((await userAPersister.restoreClient())?.clientState.queries).toHaveLength(1);
-
-    expect(createSessionQueryPersister("user-b").restoreClient()).toBeUndefined();
-  });
-
-  test("stops persisting once the provider tears the cache down", async () => {
-    const storage = createMemoryStorage();
-    const persister = createSessionQueryPersister("user-a", storage);
-    const { queryClient } = createSuccessfulQuery([["widget", "weather", "getWeather"], { type: "query" }], {
-      temp: 21,
-    });
-
-    persister.persistClient({
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: dehydrate(queryClient),
-    });
-    persister.flush();
-    persister.stop();
-
-    persister.persistClient({
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: { mutations: [], queries: [] },
-    });
-    persister.flush();
-
-    expect((await persister.restoreClient())?.clientState.queries).toHaveLength(1);
-  });
-
-  test("removes the cache instead of storing an empty one", () => {
-    const scope = "user-a";
-    const key = getQueryPersistenceStorageKey(scope);
-    const persister = createSessionQueryPersister(scope);
-    window.sessionStorage.setItem(key, "stale");
-
-    persister.persistClient({
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: { mutations: [], queries: [] },
-    });
-    persister.flush();
-
-    expect(window.sessionStorage.getItem(key)).toBeNull();
-  });
-
-  test("round-trips SuperJSON data, strips refresh errors, and removes corrupted storage", async () => {
-    vi.useFakeTimers();
-    const scope = "user-a";
-    const key = getQueryPersistenceStorageKey(scope);
-    const persister = createSessionQueryPersister(scope);
-    const { query, queryClient } = createSuccessfulQuery([["widget", "calendar", "findAllEvents"], { type: "query" }], {
-      startsAt: new Date("2026-08-22T12:00:00.000Z"),
-    });
-    query.setState({ ...query.state, error: new Error("private refresh error"), status: "error" });
-    expect(shouldPersistDashboardQuery(query)).toBe(true);
-    const persistedClient: PersistedClient = {
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: dehydrate(queryClient, { shouldDehydrateQuery: shouldPersistDashboardQuery }),
-    };
-
-    persister.persistClient(persistedClient);
-    persister.flush();
-    const restored = await persister.restoreClient();
-    const restoredData = restored?.clientState.queries[0]?.state.data as { startsAt?: Date } | undefined;
-    expect(restoredData?.startsAt).toEqual(new Date("2026-08-22T12:00:00.000Z"));
-    expect(restored?.clientState.queries[0]?.state.status).toBe("success");
-    expect(restored?.clientState.queries[0]?.state.error).toBeNull();
-    expect(restored?.clientState.queries[0]?.state.isInvalidated).toBe(true);
-    expect(window.sessionStorage.getItem(key)).not.toContain("private refresh error");
-
-    window.sessionStorage.setItem(key, "not-valid-superjson");
-    expect(persister.restoreClient()).toBeUndefined();
-    expect(window.sessionStorage.getItem(key)).toBeNull();
-  });
-
-  test("sanitizes structurally valid but unsafe stored state before hydration", async () => {
-    const scope = "user-a";
-    const key = getQueryPersistenceStorageKey(scope);
-    const { queryClient } = createSuccessfulQuery(
-      [["widget", "calendar", "findAllEvents"], { type: "query" }],
-      [{ title: "safe" }],
-    );
-    const validQuery = dehydrate(queryClient).queries[0];
-    if (!validQuery) throw new Error("Expected a dehydrated query");
-
-    window.sessionStorage.setItem(
-      key,
-      stringify({
-        timestamp: Date.now(),
-        buster: queryPersistenceBuster,
-        clientState: {
-          mutations: [{ state: { status: "pending" } }],
-          queries: [
-            {
-              ...validQuery,
-              state: {
-                ...validQuery.state,
-                error: new Error("private refresh error"),
-                fetchStatus: "fetching",
-                status: "error",
-              },
-            },
-            {
-              ...validQuery,
-              queryHash: "unrelated",
-              queryKey: [["board", "getBoardByName"], { type: "query" }],
-            },
-            { queryHash: "malformed", queryKey: [["widget", "weather"]], state: null },
-            {
-              ...validQuery,
-              queryHash: "missing-timestamp",
-              state: { ...validQuery.state, dataUpdatedAt: undefined },
-            },
-          ],
-        },
-      }),
-    );
-
-    const restored = await createSessionQueryPersister(scope).restoreClient();
-    expect(restored?.clientState.mutations).toEqual([]);
-    expect(restored?.clientState.queries).toHaveLength(1);
-    expect(restored?.clientState.queries[0]?.state.status).toBe("success");
-    expect(restored?.clientState.queries[0]?.state.fetchStatus).toBe("idle");
-    expect(restored?.clientState.queries[0]?.state.error).toBeNull();
-  });
-
-  test.each([
-    ["expired", 1, queryPersistenceBuster],
-    ["different buster", new Date("2026-08-22T12:00:00.000Z").getTime(), "old-version"],
-    ["future timestamp", new Date("2026-08-22T12:00:00.000Z").getTime() + 1, queryPersistenceBuster],
-  ])("discards %s cache entries", async (_case, timestamp, storedBuster) => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-08-22T12:00:00.000Z"));
-    const scope = "user-a";
-    const persister = createSessionQueryPersister(scope);
-    const { queryClient } = createSuccessfulQuery([["widget", "weather", "getWeather"], { type: "query" }], {
-      temp: 21,
-    });
-    persister.persistClient({ timestamp, buster: storedBuster, clientState: dehydrate(queryClient) });
-    persister.flush();
-
-    const restoredClient = new QueryClient();
-    await persistQueryClientRestore({
-      queryClient: restoredClient,
-      persister,
-      maxAge: 5 * 60 * 1_000,
-      buster: queryPersistenceBuster,
-    });
-
-    expect(restoredClient.getQueryData([["widget", "weather", "getWeather"], { type: "query" }])).toBeUndefined();
-    expect(window.sessionStorage.getItem(getQueryPersistenceStorageKey(scope))).toBeNull();
-  });
-
-  test("quota retry writes the cache after evicting the oldest query", async () => {
-    const old = createSuccessfulQuery([["widget", "old"], { type: "query" }], "old", 1);
-    const recent = createSuccessfulQuery([["widget", "recent"], { type: "query" }], "recent", 2);
-    const storage = createMemoryStorage();
-    const setItem = storage.setItem.bind(storage);
-    const setItemSpy = vi.spyOn(storage, "setItem").mockImplementation((key, value) => {
-      const client = parse<PersistedClient>(value);
-      if (client.clientState.queries.length > 1) throw new DOMException("quota", "QuotaExceededError");
-      setItem(key, value);
-    });
-    const persistedClient: PersistedClient = {
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: {
-        mutations: [],
-        queries: [...dehydrate(old.queryClient).queries, ...dehydrate(recent.queryClient).queries],
-      },
-    };
-    const persister = createSessionQueryPersister("user-a", storage);
-
-    persister.persistClient(persistedClient);
-    persister.flush();
-
-    expect(setItemSpy).toHaveBeenCalledTimes(2);
-    const restored = await persister.restoreClient();
-    expect(restored?.clientState.queries).toHaveLength(1);
-    expect(restored?.clientState.queries[0]?.queryKey).toEqual([["widget", "recent"], { type: "query" }]);
-  });
-
-  test("coalesces pending writes and can synchronously flush the latest cache before reload", async () => {
-    vi.useFakeTimers();
-    const storage = createMemoryStorage();
-    const setItem = vi.spyOn(storage, "setItem");
-    const queryKey = [["widget", "weather", "getWeather"], { type: "query" }] as const;
-    const first = createSuccessfulQuery(queryKey, { temp: 20 }, 1);
-    const latest = createSuccessfulQuery(queryKey, { temp: 21 }, 2);
-    const persister = createSessionQueryPersister("user-a", storage);
-
-    persister.persistClient({
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: dehydrate(first.queryClient),
-    });
-    persister.persistClient({
-      timestamp: Date.now(),
-      buster: queryPersistenceBuster,
-      clientState: dehydrate(latest.queryClient),
-    });
-
-    expect(setItem).not.toHaveBeenCalled();
-    persister.flush();
-    expect(setItem).toHaveBeenCalledOnce();
-    await vi.advanceTimersByTimeAsync(0);
-    expect(setItem).toHaveBeenCalledOnce();
-
-    const restored = await persister.restoreClient();
-    expect(restored?.clientState.queries[0]?.state.data).toEqual({ temp: 21 });
-  });
-
-  test("treats blocked storage operations as an empty cache", async () => {
-    const blockedStorage = {
-      getItem: () => {
-        throw new DOMException("blocked", "SecurityError");
-      },
-      removeItem: () => {
-        throw new DOMException("blocked", "SecurityError");
-      },
-      setItem: () => {
-        throw new DOMException("blocked", "SecurityError");
-      },
-    } as unknown as Storage;
-    const persister = createSessionQueryPersister("blocked", blockedStorage);
-    const { queryClient } = createSuccessfulQuery([["widget", "weather"], { type: "query" }], { temp: 21 });
-
-    expect(persister.restoreClient()).toBeUndefined();
-    expect(() => {
-      persister.persistClient({
-        timestamp: Date.now(),
-        buster: queryPersistenceBuster,
-        clientState: dehydrate(queryClient),
-      });
-      persister.flush();
-    }).not.toThrow();
-    expect(() => persister.removeClient()).not.toThrow();
-  });
-
-  test("treats an unavailable session storage getter as an empty cache", async () => {
-    vi.spyOn(window, "sessionStorage", "get").mockImplementation(() => {
-      throw new DOMException("blocked", "SecurityError");
-    });
-
-    expect(() => createSessionQueryPersister("blocked-getter")).not.toThrow();
-    expect(createSessionQueryPersister("blocked-getter").restoreClient()).toBeUndefined();
-  });
-});

apps/nextjs/src/app/[locale]/_client-providers/query-persistence.ts

@@ -1,226 +0,0 @@
-import type { QueryKey } from "@tanstack/react-query";
-import type { PersistedClient, Persister } from "@tanstack/react-query-persist-client";
-import { removeOldestQuery } from "@tanstack/react-query-persist-client";
-import { parse, stringify } from "superjson";
-
-import { isWidgetDataQueryKey, queryCacheDefaultGcTimeMs } from "@homarr/api/query-cache";
-
-export const queryPersistenceMaxAgeMs = queryCacheDefaultGcTimeMs;
-export const queryPersistenceMaxDataBytes = 256 * 1024;
-export const queryPersistenceBuster = "v2-session-superjson";
-
-const queryPersistenceStoragePrefix = "homarr:widget-query-cache";
-
-export const getQueryPersistenceStorageKey = (scope: string | null) =>
-  `${queryPersistenceStoragePrefix}:${encodeURIComponent(scope ?? "anonymous")}`;
-
-interface PersistableQuery {
-  queryKey: QueryKey;
-  state: {
-    data: unknown;
-    dataUpdatedAt: number;
-  };
-}
-
-export type SessionQueryPersister = Persister & { flush: () => void; stop: () => void };
-
-const textEncoder = new TextEncoder();
-const budgetVerdictCache = new WeakMap<object, boolean>();
-
-const measureFitsBudget = (data: unknown) => {
-  try {
-    return textEncoder.encode(stringify(data)).byteLength <= queryPersistenceMaxDataBytes;
-  } catch {
-    return false;
-  }
-};
-
-const fitsStorageBudget = (data: unknown) => {
-  if (typeof data !== "object" || data === null) return measureFitsBudget(data);
-
-  const cached = budgetVerdictCache.get(data);
-  if (cached !== undefined) return cached;
-
-  const verdict = measureFitsBudget(data);
-  budgetVerdictCache.set(data, verdict);
-  return verdict;
-};
-
-const holdsDashboardData = (query: PersistableQuery) =>
-  query.state.data !== undefined &&
-  Number.isFinite(query.state.dataUpdatedAt) &&
-  query.state.dataUpdatedAt > 0 &&
-  isWidgetDataQueryKey(query.queryKey);
-
-export const shouldPersistDashboardQuery = (query: PersistableQuery) =>
-  holdsDashboardData(query) && fitsStorageBudget(query.state.data);
-
-type DehydratedQuery = PersistedClient["clientState"]["queries"][number];
-
-const sanitizePersistedQuery = (query: DehydratedQuery): DehydratedQuery => ({
-  ...query,
-  state: {
-    ...query.state,
-    error: null,
-    errorUpdateCount: 0,
-    errorUpdatedAt: 0,
-    fetchFailureCount: 0,
-    fetchFailureReason: null,
-    fetchStatus: "idle",
-    isInvalidated: true,
-    status: "success",
-  },
-});
-
-const sanitizePersistedClient = (client: PersistedClient): PersistedClient => ({
-  ...client,
-  clientState: {
-    mutations: [],
-    queries: client.clientState.queries.map(sanitizePersistedQuery),
-  },
-});
-
-const isRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === "object" && value !== null && !Array.isArray(value);
-
-const isRestorableQuery = (value: unknown): value is DehydratedQuery => {
-  if (!isRecord(value) || typeof value.queryHash !== "string" || !Array.isArray(value.queryKey)) return false;
-  if (!isRecord(value.state) || typeof value.state.status !== "string") return false;
-
-  return holdsDashboardData(value as unknown as PersistableQuery);
-};
-
-const sanitizeRestoredClient = (value: unknown): PersistedClient | undefined => {
-  if (!isRecord(value) || !Number.isFinite(value.timestamp) || typeof value.buster !== "string") return undefined;
-  if (!isRecord(value.clientState) || !Array.isArray(value.clientState.queries)) return undefined;
-
-  return {
-    timestamp: value.timestamp as number,
-    buster: value.buster,
-    clientState: {
-      mutations: [],
-      queries: value.clientState.queries.filter(isRestorableQuery).map(sanitizePersistedQuery),
-    },
-  };
-};
-
-const getSessionStorage = (): Storage | undefined => {
-  if (typeof window === "undefined") return undefined;
-
-  try {
-    return window.sessionStorage;
-  } catch {
-    return undefined;
-  }
-};
-
-const removeStorageItem = (storage: Storage | undefined, key: string) => {
-  try {
-    storage?.removeItem(key);
-  } catch {
-    return undefined;
-  }
-};
-
-const removeForeignScopes = (storage: Storage | undefined, activeKey: string) => {
-  if (!storage) return;
-
-  try {
-    const foreignKeys: string[] = [];
-    for (let index = 0; index < storage.length; index += 1) {
-      const storedKey = storage.key(index);
-      if (storedKey === null || storedKey === activeKey) continue;
-      if (storedKey.startsWith(`${queryPersistenceStoragePrefix}:`)) foreignKeys.push(storedKey);
-    }
-
-    for (const foreignKey of foreignKeys) storage.removeItem(foreignKey);
-  } catch {
-    return undefined;
-  }
-};
-
-export const createSessionQueryPersister = (
-  scope: string | null,
-  storage: Storage | undefined = getSessionStorage(),
-): SessionQueryPersister => {
-  const key = getQueryPersistenceStorageKey(scope);
-  removeForeignScopes(storage, key);
-  let pendingClient: PersistedClient | undefined;
-  let persistTimer: ReturnType<typeof setTimeout> | undefined;
-  let stopped = false;
-
-  const persistNow = (client: PersistedClient) => {
-    if (!storage) return;
-    let candidate: PersistedClient | undefined = sanitizePersistedClient(client);
-    let errorCount = 0;
-
-    if (candidate.clientState.queries.length === 0) {
-      removeStorageItem(storage, key);
-      return;
-    }
-
-    while (candidate) {
-      try {
-        storage.setItem(key, stringify(candidate));
-        return;
-      } catch (error) {
-        errorCount += 1;
-        candidate = removeOldestQuery({
-          persistedClient: candidate,
-          error: error instanceof Error ? error : new Error("Failed to persist the widget query cache"),
-          errorCount,
-        });
-      }
-    }
-  };
-
-  const clearPersistTimer = () => {
-    if (persistTimer === undefined) return;
-    clearTimeout(persistTimer);
-    persistTimer = undefined;
-  };
-
-  const flush = () => {
-    clearPersistTimer();
-    const client = pendingClient;
-    pendingClient = undefined;
-    if (client) persistNow(client);
-  };
-
-  return {
-    persistClient(client) {
-      if (!storage || stopped) return;
-      pendingClient = client;
-      if (persistTimer !== undefined) return;
-      persistTimer = setTimeout(flush, 0);
-    },
-    restoreClient() {
-      try {
-        const storedValue = storage?.getItem(key);
-        if (!storedValue) return undefined;
-
-        const client = sanitizeRestoredClient(parse<unknown>(storedValue));
-        if (!client || client.timestamp > Date.now() || client.clientState.queries.length === 0) {
-          removeStorageItem(storage, key);
-          return undefined;
-        }
-
-        return client;
-      } catch {
-        removeStorageItem(storage, key);
-        return undefined;
-      }
-    },
-    removeClient() {
-      clearPersistTimer();
-      pendingClient = undefined;
-      removeStorageItem(storage, key);
-    },
-    flush,
-    stop() {
-      stopped = true;
-      clearPersistTimer();
-      pendingClient = undefined;
-    },
-  };
-};

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
-import { QueryClient } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import {
   createWSClient,
   httpBatchStreamLink,
@@ -36,13 +35,6 @@ import { showWarningNotification } from "@homarr/notifications";
 import { widgetQueryRefetchIntervals } from "@homarr/widgets/refetch-intervals";
 
 import { getSessionQueryScope, SessionQueryScopeGuard } from "./session-query-scope";
-import {
-  createSessionQueryPersister,
-  queryPersistenceBuster,
-  queryPersistenceMaxAgeMs,
-  shouldPersistDashboardQuery,
-} from "./query-persistence";
-import type { SessionQueryPersister } from "./query-persistence";
 import { createQueryRetry } from "./query-retry";
 
 const DevelopmentTools =
@@ -75,29 +67,21 @@ export function TRPCReactProvider({ children }: PropsWithChildren) {
   const { data: session } = useSession();
   const sessionQueryScope = getSessionQueryScope(session);
   const [initialSessionQueryScope] = useState(() => sessionQueryScope);
-  const [queryPersister] = useState(() => createSessionQueryPersister(initialSessionQueryScope));
-  const handleScopeChange = useCallback(() => {
-    void queryPersister.removeClient();
-    reloadPage();
-  }, [queryPersister]);
 
   return (
     <SessionQueryScopeGuard
       initialScope={initialSessionQueryScope}
       currentScope={sessionQueryScope}
-      onScopeChange={handleScopeChange}
+      onScopeChange={reloadPage}
     >
-      <ScopedTRPCReactProvider queryPersister={queryPersister}>{children}</ScopedTRPCReactProvider>
+      <ScopedTRPCReactProvider>{children}</ScopedTRPCReactProvider>
     </SessionQueryScopeGuard>
   );
 }
 
 const reloadPage = () => window.location.reload();
 
-const ScopedTRPCReactProvider = ({
-  children,
-  queryPersister,
-}: PropsWithChildren<{ queryPersister: SessionQueryPersister }>) => {
+const ScopedTRPCReactProvider = ({ children }: PropsWithChildren) => {
   const wsClient = useMemo(
     () =>
       createWSClient({
@@ -152,15 +136,6 @@ const ScopedTRPCReactProvider = ({
     return client;
   });
 
-  useEffect(() => {
-    const flush = () => queryPersister.flush();
-    window.addEventListener("pagehide", flush);
-    return () => {
-      window.removeEventListener("pagehide", flush);
-      flush();
-      queryPersister.stop();
-    };
-  }, [queryPersister]);
   useEffect(() => () => queryClient.clear(), [queryClient]);
 
   const trpcClient = useMemo(() => {
@@ -211,18 +186,10 @@ const ScopedTRPCReactProvider = ({
 
   return (
     <clientApi.Provider client={trpcClient} queryClient={queryClient}>
-      <PersistQueryClientProvider
-        client={queryClient}
-        persistOptions={{
-          persister: queryPersister,
-          maxAge: queryPersistenceMaxAgeMs,
-          buster: queryPersistenceBuster,
-          dehydrateOptions: { shouldDehydrateQuery: shouldPersistDashboardQuery },
-        }}
-      >
+      <QueryClientProvider client={queryClient}>
         <ReactQueryStreamedHydration transformer={superjson}>{children}</ReactQueryStreamedHydration>
         {process.env.NODE_ENV === "development" && <DevelopmentTools />}
-      </PersistQueryClientProvider>
+      </QueryClientProvider>
     </clientApi.Provider>
   );
 };

apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx

@@ -16,7 +16,7 @@ import { BoardSetupChecklist } from "~/components/board/board-setup-checklist";
 import {
   getBoardLaneColumnCount,
   getInitialBoardLogicalHeight,
-  getLogicalGridSize,
+  getLogicalTrackSize,
   LOGICAL_GRID_GAP,
   getRootSectionForLane,
 } from "~/components/board/layout";
@@ -61,16 +61,16 @@ export const ClientBoard = () => {
   const rightColumnCount = getBoardLaneColumnCount(currentLayout, "right");
   const laneWidths = [leftColumnCount, mainColumnCount, rightColumnCount]
     .filter((columnCount) => columnCount > 0)
-    .map(getLogicalGridSize);
+    .map(getLogicalTrackSize);
   const logicalWidth =
     laneWidths.reduce((total, width) => total + width, 0) + (laneWidths.length - 1) * LOGICAL_GRID_GAP;
   const initialLogicalHeight = getInitialBoardLogicalHeight(board, currentLayoutId);
   const representativeWidth = layoutOverrideId ? getRepresentativeLayoutWidth(currentLayout, board.layouts) : null;
   const initialAvailableWidth = Math.max(1, (representativeWidth ?? initialViewportWidth) - APP_SHELL_INLINE_PADDING);
   const gridTemplateColumns = [
-    leftColumnCount > 0 ? `${getLogicalGridSize(leftColumnCount)}px` : null,
-    `${getLogicalGridSize(mainColumnCount)}px`,
-    rightColumnCount > 0 ? `${getLogicalGridSize(rightColumnCount)}px` : null,
+    leftColumnCount > 0 ? `${getLogicalTrackSize(leftColumnCount)}px` : null,
+    `${getLogicalTrackSize(mainColumnCount)}px`,
+    rightColumnCount > 0 ? `${getLogicalTrackSize(rightColumnCount)}px` : null,
   ]
     .filter((value) => value !== null)
     .join(" ");

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -111,6 +111,9 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
 
   const nextBreakpoint = getNextCustomBreakpoint(form.values.layouts);
   const baseLayout = form.values.layouts.find((layout) => layout.role === "base");
+  const sortedLayouts = form.values.layouts
+    .map((layout, index) => ({ layout, index }))
+    .toSorted((entryA, entryB) => entryA.layout.breakpoint - entryB.layout.breakpoint);
 
   return (
     <SectionCard title={tBoard("setting.section.layout.title")}>
@@ -126,25 +129,25 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
             disabled={nextBreakpoint === null || !baseLayout}
             onClick={() => {
               if (nextBreakpoint === null || !baseLayout) return;
-              const newLayout: FormValues["layouts"][number] = {
-                id: createId(),
-                name: tBoard("setting.section.layout.custom.defaultName"),
-                columnCount: baseLayout.columnCount,
-                leftGutterColumnCount: baseLayout.leftGutterColumnCount,
-                rightGutterColumnCount: baseLayout.rightGutterColumnCount,
-                breakpoint: nextBreakpoint,
-                role: "custom",
-              };
-              let insertionIndex = form.values.layouts.findIndex((layout) => layout.breakpoint > nextBreakpoint);
-              if (insertionIndex === -1) insertionIndex = form.values.layouts.length;
-              form.insertListItem("layouts", newLayout, insertionIndex);
+              form.setFieldValue("layouts", [
+                ...form.values.layouts,
+                {
+                  id: createId(),
+                  name: tBoard("setting.section.layout.custom.defaultName"),
+                  columnCount: baseLayout.columnCount,
+                  leftGutterColumnCount: baseLayout.leftGutterColumnCount,
+                  rightGutterColumnCount: baseLayout.rightGutterColumnCount,
+                  breakpoint: nextBreakpoint,
+                  role: "custom",
+                },
+              ]);
             }}
           >
             {tBoard("setting.section.layout.responsive.action.add")}
           </Button>
         </Group>
 
-        {form.values.layouts.map((layout, index) => {
+        {sortedLayouts.map(({ layout, index }) => {
           const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
           const sourceLayout = persistedLayout ?? board.layouts.find((candidate) => candidate.role === "base");
           const customBreakpoints = form.values.layouts

apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useMemo } from "react";
 import type { ComponentProps } from "react";
 
 import { CustomWidgetCodeEditor } from "@homarr/custom-widgets/workbench";
@@ -13,38 +12,39 @@ type CodeEditorProps = Omit<SharedEditorProps, "messages">;
 export function CodeEditor(props: CodeEditorProps) {
   const t = useI18n("customWidget.editor");
   const tCommon = useI18n("common");
-  const messages = useMemo<SharedEditorProps["messages"]>(
-    () => ({
-      languageJsx: invariantTechnicalLabels.jsx,
-      languageJson: invariantTechnicalLabels.json,
-      undo: tCommon("action.undo"),
-      redo: t("action.redo"),
-      components: t("action.components"),
-      componentSearch: t("componentReference.search"),
-      componentEmpty: t("componentReference.empty"),
-      componentCount: (count) => t("componentReference.count", { count }),
-      insertStarter: t("action.insertStarter"),
-      format: t("action.format"),
-      copy: tCommon("action.copy"),
-      copied: t("action.copied"),
-      schema: t("action.schema"),
-      schemaTab: invariantTechnicalLabels.jsonSchema,
-      minimalTab: t("reference.minimal"),
-      fullTab: t("reference.full"),
-      errors: (count) => t("status.errors", { count }),
-      warnings: (count) => t("status.warnings", { count }),
-      ready: t("status.ready"),
-      position: (cursor) => t("status.position", cursor),
-      characters: (count, limit) =>
-        limit ? t("status.charactersWithLimit", { count, limit }) : t("status.characters", { count }),
-      diagnosticsTitle: t("diagnostics.title"),
-      diagnostic: (diagnostic) =>
-        `${diagnostic.line ? `${t("diagnostics.line", { line: diagnostic.line })}: ` : ""}${t(
-          `diagnostics.${diagnostic.code}` as never,
-          { value: diagnostic.value ?? "" } as never,
-        )}`,
-    }),
-    [t, tCommon],
+  return (
+    <CustomWidgetCodeEditor
+      {...props}
+      messages={{
+        languageJsx: invariantTechnicalLabels.jsx,
+        languageJson: invariantTechnicalLabels.json,
+        undo: tCommon("action.undo"),
+        redo: t("action.redo"),
+        components: t("action.components"),
+        componentSearch: t("componentReference.search"),
+        componentEmpty: t("componentReference.empty"),
+        componentCount: (count) => t("componentReference.count", { count }),
+        insertStarter: t("action.insertStarter"),
+        format: t("action.format"),
+        copy: tCommon("action.copy"),
+        copied: t("action.copied"),
+        schema: t("action.schema"),
+        schemaTab: invariantTechnicalLabels.jsonSchema,
+        minimalTab: t("reference.minimal"),
+        fullTab: t("reference.full"),
+        errors: (count) => t("status.errors", { count }),
+        warnings: (count) => t("status.warnings", { count }),
+        ready: t("status.ready"),
+        position: (cursor) => t("status.position", cursor),
+        characters: (count, limit) =>
+          limit ? t("status.charactersWithLimit", { count, limit }) : t("status.characters", { count }),
+        diagnosticsTitle: t("diagnostics.title"),
+        diagnostic: (diagnostic) =>
+          `${diagnostic.line ? `${t("diagnostics.line", { line: diagnostic.line })}: ` : ""}${t(
+            `diagnostics.${diagnostic.code}` as never,
+            { value: diagnostic.value ?? "" } as never,
+          )}`,
+      }}
+    />
   );
-  return <CustomWidgetCodeEditor {...props} messages={messages} />;
 }

apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx

@@ -3,70 +3,37 @@
 import { ActionIcon, Group, Tooltip } from "@mantine/core";
 import { IconCopy, IconRobot } from "@tabler/icons-react";
 
-import { buildCustomWidgetAiPrompt, buildCustomWidgetAssistantPrompt } from "@homarr/custom-widgets/authoring-prompt";
-import type { CustomWidgetAiDiagnostic, CustomWidgetAiDraft } from "@homarr/custom-widgets/authoring-prompt";
+import { buildCustomWidgetAiPrompt } from "@homarr/custom-widgets/authoring-prompt";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 
 import { useOptionalHomarrAssistant } from "~/components/assistant/assistant-context";
 
-interface CopyAiPromptButtonBaseProps {
+interface CopyAiPromptButtonProps {
   rawResponse?: string | null;
+  currentConfig?: Record<string, unknown> | null;
   request?: string | null;
   documentationUrl?: string | null;
 }
 
-type CopyAiPromptButtonProps = CopyAiPromptButtonBaseProps &
-  ({ draft: CustomWidgetAiDraft; getDraft?: never } | { draft?: never; getDraft(): CustomWidgetAiDraft }) &
-  (
-    | { diagnostics: readonly CustomWidgetAiDiagnostic[]; getDiagnostics?: never }
-    | { diagnostics?: never; getDiagnostics(): readonly CustomWidgetAiDiagnostic[] }
-  );
-
 export const CopyAiPromptButton = ({
   rawResponse,
-  draft,
-  getDraft,
-  diagnostics,
-  getDiagnostics,
+  currentConfig,
   request,
   documentationUrl,
 }: CopyAiPromptButtonProps) => {
   const t = useI18n("customWidget");
   const assistant = useOptionalHomarrAssistant();
-
-  const readDraft = () => {
-    if (getDraft) return getDraft();
-    return draft;
-  };
-  const readDiagnostics = () => {
-    if (getDiagnostics) return getDiagnostics();
-    return diagnostics;
-  };
+  const prompt = () => buildCustomWidgetAiPrompt(undefined, rawResponse, currentConfig, request, documentationUrl);
 
   const handleAssistant = () => {
-    const prompt = buildCustomWidgetAssistantPrompt(
-      undefined,
-      rawResponse,
-      readDraft(),
-      request,
-      documentationUrl,
-      readDiagnostics(),
-    );
-    if (!assistant?.enabled || !assistant.sendPrompt(prompt)) return;
+    if (!assistant?.enabled || !assistant.sendPrompt(prompt())) return;
     showSuccessNotification({ title: t("action.aiPrompt"), message: t("notification.aiPromptSent") });
   };
 
   const handleCopy = async () => {
     try {
-      const value = buildCustomWidgetAiPrompt(
-        undefined,
-        rawResponse,
-        readDraft(),
-        request,
-        documentationUrl,
-        readDiagnostics(),
-      );
+      const value = prompt();
       await navigator.clipboard.writeText(value);
       showSuccessNotification({
         title: t("action.copyAiPrompt"),

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-advanced-manifest.tsx

@@ -1,38 +1,27 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Accordion } from "@mantine/core";
 
 import { customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
 import { useI18n } from "@homarr/translation/client";
 
 import { CodeEditor } from "./_code-editor";
-import { useDeferredCustomWidgetFormDocumentValues } from "./_custom-widget-form-state";
 import { applyDefinition, parseJson } from "./_custom-widget-form-utils";
 import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
-import { LazyOnceAccordion } from "./_lazy-once-accordion";
 
 export function CustomWidgetAdvancedManifest({ form }: { form: CustomWidgetWorkbenchForm }) {
   const t = useI18n("customWidget.workbench.builder");
-  return (
-    <LazyOnceAccordion label={t("advancedManifest")}>
-      <CustomWidgetManifestEditor form={form} />
-    </LazyOnceAccordion>
-  );
-}
-
-function CustomWidgetManifestEditor({ form }: { form: CustomWidgetWorkbenchForm }) {
-  const t = useI18n("customWidget.workbench.builder");
-  const values = useDeferredCustomWidgetFormDocumentValues();
   const serialized = JSON.stringify(
     {
       $schema: "homarr-custom-widget-v2",
-      name: values.name,
-      ...(values.description ? { description: values.description } : {}),
-      ...(values.iconUrl ? { iconUrl: values.iconUrl } : {}),
-      sources: parseJson(values.sources),
-      requests: parseJson(values.requests),
-      options: parseJson(values.options),
-      template: values.template,
+      name: form.values.name,
+      ...(form.values.description ? { description: form.values.description } : {}),
+      ...(form.values.iconUrl ? { iconUrl: form.values.iconUrl } : {}),
+      sources: parseJson(form.values.sources),
+      requests: parseJson(form.values.requests),
+      options: parseJson(form.values.options),
+      template: form.values.template,
     },
     null,
     2,
@@ -41,26 +30,33 @@ function CustomWidgetManifestEditor({ form }: { form: CustomWidgetWorkbenchForm
   const [error, setError] = useState<string>();
   useEffect(() => setDraft(serialized), [serialized]);
   return (
-    <CodeEditor
-      id="raw-widget-manifest"
-      label={t("manifestFilename")}
-      language="json"
-      value={draft}
-      error={error}
-      onChange={(next) => {
-        setDraft(next);
-        try {
-          const parsed = customWidgetDefinitionSchema.safeParse(JSON.parse(next) as unknown);
-          if (!parsed.success) {
-            setError(parsed.error.issues[0]?.message ?? t("invalidWidget"));
-            return;
-          }
-          setError(undefined);
-          applyDefinition(form, parsed.data);
-        } catch (cause) {
-          setError(cause instanceof Error ? cause.message : t("invalidJson"));
-        }
-      }}
-    />
+    <Accordion variant="contained">
+      <Accordion.Item value="manifest">
+        <Accordion.Control>{t("advancedManifest")}</Accordion.Control>
+        <Accordion.Panel>
+          <CodeEditor
+            id="raw-widget-manifest"
+            label={t("manifestFilename")}
+            language="json"
+            value={draft}
+            error={error}
+            onChange={(next) => {
+              setDraft(next);
+              try {
+                const parsed = customWidgetDefinitionSchema.safeParse(JSON.parse(next) as unknown);
+                if (!parsed.success) {
+                  setError(parsed.error.issues[0]?.message ?? t("invalidWidget"));
+                  return;
+                }
+                setError(undefined);
+                applyDefinition(form, parsed.data);
+              } catch (cause) {
+                setError(cause instanceof Error ? cause.message : t("invalidJson"));
+              }
+            }}
+          />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
   );
 }

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx

@@ -3,14 +3,13 @@
 import { Accordion, Button, Group, Stack, Text, TextInput, Textarea } from "@mantine/core";
 import { IconClipboard, IconSparkles } from "@tabler/icons-react";
 
-import type { CustomWidgetAiDiagnostic, CustomWidgetAiDraft } from "@homarr/custom-widgets/authoring-prompt";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
 import { useI18n } from "@homarr/translation/client";
 
 import { CopyAiPromptButton } from "./_copy-ai-prompt-button";
 
 interface AiCardProps {
-  getDraft(): CustomWidgetAiDraft;
-  getDiagnostics(): readonly CustomWidgetAiDiagnostic[];
+  candidate: HomarrCustomWidgetV2 | null;
   request: string;
   onRequestChange(value: string): void;
   documentationUrl: string;
@@ -28,15 +27,14 @@ export function CustomWidgetAiCard(props: AiCardProps) {
             {t("title")}
           </Accordion.Control>
           <CopyAiPromptButton
-            getDraft={props.getDraft}
-            getDiagnostics={props.getDiagnostics}
+            currentConfig={props.candidate}
             request={props.request}
             documentationUrl={props.documentationUrl}
           />
         </Group>
         <Accordion.Panel>
           <Stack gap="sm">
-            <Text size="sm" c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4))">
+            <Text size="sm" c="dimmed">
               {t("description")}
             </Text>
             <Textarea

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-analysis.ts

@@ -2,10 +2,7 @@ import type { CustomWidgetFormValues, EditorDiagnostic } from "@homarr/custom-wi
 
 import { isRecord, parseJson, parseSources } from "./_custom-widget-form-utils";
 
-export function createCustomWidgetCompletions(
-  values: Pick<CustomWidgetFormValues, "options" | "sources">,
-  requestIds: string[],
-) {
+export function createCustomWidgetCompletions(values: CustomWidgetFormValues, requestIds: string[]) {
   const options = parseJson(values.options);
   const optionKeys = Object.keys(isRecord(options) ? options : {});
   return [

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-layout.tsx

@@ -1,40 +1,14 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-import type { Dispatch, ReactNode, SetStateAction } from "react";
+import type { ReactNode } from "react";
 import type { Icon } from "@tabler/icons-react";
 import { Button, Card, Group, Stack, Text, ThemeIcon } from "@mantine/core";
-import {
-  IconAlertCircle,
-  IconAlertTriangle,
-  IconApi,
-  IconBraces,
-  IconCheck,
-  IconCode,
-  IconDatabase,
-  IconEye,
-  IconPlayerPlay,
-  IconSettings,
-} from "@tabler/icons-react";
+import { IconAlertTriangle, IconCheck, IconPlayerPlay } from "@tabler/icons-react";
 
-import { getCustomWidgetDefaultOptions } from "@homarr/custom-widgets/core";
 import { useI18n } from "@homarr/translation/client";
 
-import { useCustomWidgetFormDocumentDirty } from "./_custom-widget-form-state";
-import { areCustomWidgetValuesEqual } from "./_custom-widget-value-equality";
-import { useCustomWidgetFormAnalysisField } from "./_use-custom-widget-form-analysis";
-import { useUnsavedChangesGuard } from "./_use-unsaved-changes-guard";
 import classes from "./_custom-widget-form.module.css";
 
-const sectionLinks = [
-  ["general", "section.general", IconSettings],
-  ["sources", "section.sources", IconApi],
-  ["requests", "section.requests", IconDatabase],
-  ["options", "section.options", IconBraces],
-  ["jsx", "section.jsx", IconCode],
-  ["preview", "section.preview", IconEye],
-] as const;
-
 export function EditorSection({
   id,
   title,
@@ -110,83 +84,3 @@ export function SaveActions({
     </Group>
   );
 }
-
-export function CustomWidgetSectionNavigation({
-  onSelect,
-}: {
-  onSelect(section: (typeof sectionLinks)[number][0]): void;
-}) {
-  const t = useI18n("customWidget.workbench");
-  const invalidSections = useCustomWidgetFormAnalysisField("invalidSections");
-  return (
-    <nav className={classes.sectionNav} aria-label={t("sectionNavigation")}>
-      {sectionLinks.map(([id, key, SectionIcon]) => {
-        const invalid = invalidSections.has(id);
-        return (
-          <Button
-            key={id}
-            component="a"
-            href={`#${id}`}
-            onClick={() => onSelect(id)}
-            size="compact-sm"
-            variant="subtle"
-            color={invalid ? "red" : undefined}
-            leftSection={<SectionIcon size={14} />}
-            rightSection={invalid ? <IconAlertCircle size={13} aria-label={t("status.invalid")} /> : undefined}
-          >
-            {t(key)}
-          </Button>
-        );
-      })}
-    </nav>
-  );
-}
-
-export function CustomWidgetSaveActions({
-  mode,
-  savePending,
-  previewPending,
-  onPreview,
-}: {
-  mode: "create" | "edit";
-  savePending: boolean;
-  previewPending: boolean;
-  onPreview(): void;
-}) {
-  const dirty = useCustomWidgetFormDocumentDirty();
-  const candidateValid = useCustomWidgetFormAnalysisField("candidateValid");
-  const hasDiagnostics = useCustomWidgetFormAnalysisField("hasDiagnostics");
-  return (
-    <SaveActions
-      dirty={dirty}
-      savePending={savePending}
-      previewPending={previewPending}
-      invalid={hasDiagnostics || !candidateValid}
-      mode={mode}
-      onPreview={onPreview}
-    />
-  );
-}
-
-export function CustomWidgetUnsavedChangesGuard() {
-  const dirty = useCustomWidgetFormDocumentDirty();
-  useUnsavedChangesGuard(dirty);
-  return null;
-}
-
-export function CustomWidgetOptionsSnapshotSync({
-  setOptionsSnapshot,
-}: {
-  setOptionsSnapshot: Dispatch<SetStateAction<Record<string, unknown>>>;
-}) {
-  const parsedOptions = useCustomWidgetFormAnalysisField("parsedOptions");
-  const lastDefaults = useRef<Record<string, unknown> | null>(null);
-  useEffect(() => {
-    if (!parsedOptions.success) return;
-    const defaults = getCustomWidgetDefaultOptions(parsedOptions.data);
-    if (lastDefaults.current && areCustomWidgetValuesEqual(lastDefaults.current, defaults)) return;
-    lastDefaults.current = defaults;
-    setOptionsSnapshot(defaults);
-  }, [parsedOptions, setOptionsSnapshot]);
-  return null;
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-sections.tsx

@@ -1,222 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import type { Dispatch, SetStateAction } from "react";
-import { TextInput, Textarea } from "@mantine/core";
-import { IconApi, IconBraces, IconCode, IconDatabase, IconSettings } from "@tabler/icons-react";
-
-import type { CustomWidgetAiDiagnostic, CustomWidgetAiDraft } from "@homarr/custom-widgets/authoring-prompt";
-import { IconPicker } from "@homarr/forms-collection";
-import { useI18n } from "@homarr/translation/client";
-
-import { CodeEditor } from "./_code-editor";
-import { CustomWidgetAiCard } from "./_custom-widget-ai-card";
-import { EditorSection } from "./_custom-widget-form-layout";
-import { customWidgetOptionsSchemaReference, customWidgetRequestReference } from "./_custom-widget-form-references";
-import { useCustomWidgetFormDocumentField } from "./_custom-widget-form-state";
-import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
-import { CustomWidgetOptionsEditor } from "./_custom-widget-options-editor";
-import { CustomWidgetPreviewPanel } from "./_custom-widget-preview-panel";
-import type { PreviewState } from "./_custom-widget-preview-panel";
-import { CustomWidgetRequestsEditor } from "./_custom-widget-requests-editor";
-import { CustomWidgetSourcesEditor } from "./_custom-widget-sources-editor";
-import { LazyOnceAccordion } from "./_lazy-once-accordion";
-import { useCustomWidgetFormAnalysisField } from "./_use-custom-widget-form-analysis";
-
-export function CustomWidgetAiSection({
-  getDraft,
-  getDiagnostics,
-  onPaste,
-}: {
-  getDraft(): CustomWidgetAiDraft;
-  getDiagnostics(): readonly CustomWidgetAiDiagnostic[];
-  onPaste(): void;
-}) {
-  const [request, setRequest] = useState("");
-  const [documentationUrl, setDocumentationUrl] = useState("");
-  return (
-    <CustomWidgetAiCard
-      getDraft={getDraft}
-      getDiagnostics={getDiagnostics}
-      request={request}
-      onRequestChange={setRequest}
-      documentationUrl={documentationUrl}
-      onDocumentationUrlChange={setDocumentationUrl}
-      onPaste={onPaste}
-    />
-  );
-}
-
-export function CustomWidgetGeneralSection({
-  form,
-  formRevision,
-  mode,
-}: {
-  form: CustomWidgetWorkbenchForm;
-  formRevision: string;
-  mode: "create" | "edit";
-}) {
-  const t = useI18n("customWidget");
-  const tCommon = useI18n("common");
-  const w = useI18n("customWidget.workbench");
-  const [suggestedIconSearch, setSuggestedIconSearch] = useState(() => form.getValues().name);
-  const iconUrl = useCustomWidgetFormDocumentField("iconUrl");
-  const nameInputProps = form.getInputProps("name");
-  useEffect(() => setSuggestedIconSearch(form.getValues().name), [form, formRevision]);
-  return (
-    <EditorSection id="general" title={w("generalInformation")} icon={IconSettings}>
-      <TextInput
-        key={form.key("name")}
-        label={tCommon("field.name")}
-        required
-        {...nameInputProps}
-        onBlur={(event) => {
-          nameInputProps.onBlur?.(event);
-          setSuggestedIconSearch(form.getValues().name);
-        }}
-      />
-      <Textarea
-        key={form.key("description")}
-        label={t("field.description")}
-        autosize
-        minRows={2}
-        {...form.getInputProps("description")}
-      />
-      <IconPicker
-        key={form.key("iconUrl")}
-        withAsterisk={false}
-        suggestedSearch={mode === "create" ? suggestedIconSearch : undefined}
-        {...form.getInputProps("iconUrl")}
-        value={iconUrl}
-      />
-    </EditorSection>
-  );
-}
-
-export function CustomWidgetSourcesSection({
-  form,
-  definitionId,
-}: {
-  form: CustomWidgetWorkbenchForm;
-  definitionId?: string;
-}) {
-  const w = useI18n("customWidget.workbench");
-  useCustomWidgetFormDocumentField("sources");
-  useCustomWidgetFormDocumentField("requests");
-  useCustomWidgetFormDocumentField("secrets");
-  return (
-    <EditorSection id="sources" title={w("sources.title")} icon={IconApi}>
-      <CustomWidgetSourcesEditor form={form} definitionId={definitionId} />
-    </EditorSection>
-  );
-}
-
-export function CustomWidgetRequestsSection({
-  form,
-  onRename,
-}: {
-  form: CustomWidgetWorkbenchForm;
-  onRename(currentId: string, nextId: string): void;
-}) {
-  const w = useI18n("customWidget.workbench");
-  const requests = useCustomWidgetFormDocumentField("requests");
-  useCustomWidgetFormDocumentField("sources");
-  useCustomWidgetFormDocumentField("options");
-  const requestDiagnostics = useCustomWidgetFormAnalysisField("requestDiagnostics");
-  return (
-    <EditorSection id="requests" title={w("requests.title")} icon={IconDatabase}>
-      <CustomWidgetRequestsEditor form={form} onRename={onRename} />
-      <LazyOnceAccordion label={w("builder.advancedJson")}>
-        <CodeEditor
-          id="requests-editor"
-          label={w("requests.label")}
-          description={w("requests.description")}
-          language="json"
-          value={requests}
-          onChange={(value) => form.setFieldValue("requests", value, { forceUpdate: false })}
-          diagnostics={requestDiagnostics}
-          error={form.errors.requests}
-          reference={customWidgetRequestReference}
-          required
-        />
-      </LazyOnceAccordion>
-    </EditorSection>
-  );
-}
-
-export function CustomWidgetOptionsSection({
-  form,
-  onRename,
-}: {
-  form: CustomWidgetWorkbenchForm;
-  onRename(currentName: string, nextName: string): void;
-}) {
-  const w = useI18n("customWidget.workbench");
-  const options = useCustomWidgetFormDocumentField("options");
-  useCustomWidgetFormDocumentField("requests");
-  return (
-    <EditorSection id="options" title={w("options.title")} icon={IconBraces}>
-      <CustomWidgetOptionsEditor form={form} onRename={onRename} />
-      <LazyOnceAccordion label={w("builder.advancedJson")}>
-        <CodeEditor
-          id="options-editor"
-          label={w("options.title")}
-          language="json"
-          value={options}
-          onChange={(value) => form.setFieldValue("options", value, { forceUpdate: false })}
-          error={form.errors.options}
-          reference={customWidgetOptionsSchemaReference}
-        />
-      </LazyOnceAccordion>
-    </EditorSection>
-  );
-}
-
-export function CustomWidgetTemplateSection({ form }: { form: CustomWidgetWorkbenchForm }) {
-  const w = useI18n("customWidget.workbench");
-  const template = useCustomWidgetFormDocumentField("template");
-  const jsxCompletions = useCustomWidgetFormAnalysisField("jsxCompletions");
-  const templateDiagnostics = useCustomWidgetFormAnalysisField("templateDiagnostics");
-  return (
-    <EditorSection id="jsx" title={w("jsx.title")} icon={IconCode}>
-      <CodeEditor
-        id="jsx-editor"
-        label={w("jsx.label")}
-        language="jsx"
-        value={template}
-        onChange={(value) => form.setFieldValue("template", value, { forceUpdate: false })}
-        diagnostics={templateDiagnostics}
-        completions={jsxCompletions}
-        error={form.errors.template}
-        required
-        maxLength={50_000}
-      />
-    </EditorSection>
-  );
-}
-
-interface CustomWidgetPreviewSectionProps {
-  preview: PreviewState;
-  size: string;
-  onSizeChange(size: string): void;
-  optionsSnapshot: Record<string, unknown>;
-  onOptionsChange: Dispatch<SetStateAction<Record<string, unknown>>>;
-  onLiveActionsChange(enabled: boolean): void;
-}
-
-export function CustomWidgetPreviewSection(props: CustomWidgetPreviewSectionProps) {
-  const previewCandidate = useCustomWidgetFormAnalysisField("previewCandidate");
-  const previewValidationIssues = useCustomWidgetFormAnalysisField("previewValidationIssues");
-  return (
-    <CustomWidgetPreviewPanel
-      candidate={previewCandidate}
-      validationIssues={previewValidationIssues}
-      preview={props.preview}
-      size={props.size}
-      onSizeChange={props.onSizeChange}
-      optionsSnapshot={props.optionsSnapshot}
-      onOptionsChange={props.onOptionsChange}
-      onLiveActionsChange={props.onLiveActionsChange}
-    />
-  );
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-state.tsx

@@ -1,142 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  startTransition,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from "react";
-import type { ReactNode } from "react";
-import type { UseFormReturnType } from "@mantine/form";
-
-import { customWidgetFormSchema } from "@homarr/custom-widgets/workbench";
-import type { CustomWidgetFormValues } from "@homarr/custom-widgets/workbench";
-
-import { areCustomWidgetValuesEqual } from "./_custom-widget-value-equality";
-
-export interface CustomWidgetFormDocumentStore {
-  getValues(): CustomWidgetFormValues;
-  setValues(values: CustomWidgetFormValues): void;
-  getDirty(): boolean;
-  subscribe(listener: () => void): () => void;
-  markSaved(values: CustomWidgetFormValues): void;
-}
-
-const documentValueKeys = customWidgetFormSchema.keyof().options;
-
-function areDocumentValuesEqual(left: CustomWidgetFormValues, right: CustomWidgetFormValues) {
-  if (Object.keys(left).length !== documentValueKeys.length) return false;
-  if (Object.keys(right).length !== documentValueKeys.length) return false;
-  return documentValueKeys.every(
-    (key) => Object.hasOwn(left, key) && Object.hasOwn(right, key) && areCustomWidgetValuesEqual(left[key], right[key]),
-  );
-}
-
-export function createCustomWidgetFormDocumentStore(
-  initialValues: CustomWidgetFormValues,
-): CustomWidgetFormDocumentStore {
-  let values = initialValues;
-  let persistedValues = initialValues;
-  let dirty = false;
-  const listeners = new Set<() => void>();
-
-  const notify = () => listeners.forEach((listener) => listener());
-
-  return {
-    getValues: () => values,
-    setValues: (nextValues) => {
-      if (Object.is(values, nextValues)) return;
-      values = nextValues;
-      dirty = !areDocumentValuesEqual(nextValues, persistedValues);
-      notify();
-    },
-    getDirty: () => dirty,
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-    markSaved: (savedValues) => {
-      const wasDirty = dirty;
-      persistedValues = savedValues;
-      dirty = !areDocumentValuesEqual(values, persistedValues);
-      if (wasDirty !== dirty) notify();
-    },
-  };
-}
-
-const CustomWidgetFormDocumentContext = createContext<CustomWidgetFormDocumentStore | null>(null);
-
-export function CustomWidgetFormDocumentProvider({
-  store,
-  children,
-}: {
-  store: CustomWidgetFormDocumentStore;
-  children: ReactNode;
-}) {
-  return <CustomWidgetFormDocumentContext.Provider value={store}>{children}</CustomWidgetFormDocumentContext.Provider>;
-}
-
-export function useCustomWidgetFormDocumentStore() {
-  const store = useContext(CustomWidgetFormDocumentContext);
-  if (!store) throw new Error("Custom widget form document provider is missing");
-  return store;
-}
-
-export function useDeferredCustomWidgetFormDocumentValues() {
-  const store = useCustomWidgetFormDocumentStore();
-  const [values, setValues] = useState(() => store.getValues());
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | undefined;
-    const scheduleUpdate = () => {
-      const nextValues = store.getValues();
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        startTransition(() => {
-          setValues((currentValues) => {
-            if (!Object.is(store.getValues(), nextValues)) return currentValues;
-            return nextValues;
-          });
-        });
-      }, 150);
-    };
-    const unsubscribe = store.subscribe(scheduleUpdate);
-    return () => {
-      clearTimeout(timeout);
-      unsubscribe();
-    };
-  }, [store]);
-  return values;
-}
-
-export function useCustomWidgetFormDocumentField<Key extends keyof CustomWidgetFormValues>(field: Key) {
-  const store = useCustomWidgetFormDocumentStore();
-  const getSnapshot = () => store.getValues()[field];
-  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
-}
-
-export function useCustomWidgetFormDocumentDirty() {
-  const store = useCustomWidgetFormDocumentStore();
-  return useSyncExternalStore(store.subscribe, store.getDirty, store.getDirty);
-}
-
-export function useCustomWidgetFormDocumentBridge(
-  form: UseFormReturnType<CustomWidgetFormValues>,
-  store: CustomWidgetFormDocumentStore,
-) {
-  const formRef = useRef(form);
-  formRef.current = form;
-  return useMemo(
-    () =>
-      new Proxy({} as UseFormReturnType<CustomWidgetFormValues>, {
-        get: (_target, property) => {
-          if (property === "values") return store.getValues();
-          return Reflect.get(formRef.current, property);
-        },
-      }),
-    [store],
-  );
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.spec.ts

@@ -28,7 +28,7 @@ describe("Custom Widget workbench preview options", () => {
     const setValues = vi.fn();
     const result = applyCustomWidgetAiResponse(
       {
-        getValues: () => ({
+        values: {
           name: "",
           description: "",
           iconUrl: "",
@@ -37,7 +37,7 @@ describe("Custom Widget workbench preview options", () => {
           options: "{}",
           template: "",
           secrets: [],
-        }),
+        },
         setValues,
       } as never,
       `\`\`\`json\n${JSON.stringify(definition)}\n\`\`\``,
@@ -84,6 +84,13 @@ describe("Custom Widget workbench preview options", () => {
   it("normalizes only changed secrets", () => {
     expect(
       getChangedSecrets({
+        name: "Widget",
+        description: "",
+        iconUrl: "",
+        sources: "{}",
+        requests: "{}",
+        options: "{}",
+        template: "<Text />",
         secrets: [
           { sourceId: "default", kind: "apiKey", value: "", hasValue: true },
           { sourceId: "other", kind: "password", value: "replacement" },

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.ts

@@ -12,8 +12,6 @@ import type { UseFormReturnType } from "@mantine/form";
 
 export type CustomWidgetWorkbenchForm = UseFormReturnType<CustomWidgetFormValues>;
 
-const PREVIEW_QUERY_CONCURRENCY = 4;
-
 export function buildDefinition(values: CustomWidgetFormValues) {
   return customWidgetDefinitionSchema.safeParse({
     $schema: "homarr-custom-widget-v2",
@@ -27,7 +25,7 @@ export function buildDefinition(values: CustomWidgetFormValues) {
   });
 }
 
-export function getChangedSecrets(values: Pick<CustomWidgetFormValues, "secrets">) {
+export function getChangedSecrets(values: CustomWidgetFormValues) {
   return values.secrets
     .filter((secret) => secret.value.trim())
     .map(({ sourceId, kind, value }) => ({
@@ -48,7 +46,7 @@ export function filterSecretsForSourceAuthentication(
 
 export function applyDefinition(form: CustomWidgetWorkbenchForm, widget: HomarrCustomWidgetV2) {
   form.setValues({
-    ...form.getValues(),
+    ...form.values,
     name: widget.name,
     description: widget.description ?? "",
     iconUrl: widget.iconUrl ?? "",
@@ -104,43 +102,25 @@ export function isRuntimeParams(
 }
 
 export async function loadPreviewQueries(definition: HomarrCustomWidgetV2, sessionId: string) {
-  const requests = Object.entries(definition.requests).filter(
+  const data: Record<string, unknown> = {};
+  const status: Record<string, unknown> = {};
+  for (const [requestId] of Object.entries(definition.requests).filter(
     ([, entry]) => entry.kind === "query" && entry.trigger === "load",
-  );
-  const results: Array<{
-    requestId: string;
-    data: unknown;
-    status: Record<string, unknown>;
-  }> = [];
-  let nextIndex = 0;
-  const worker = async () => {
-    while (true) {
-      const index = nextIndex;
-      nextIndex += 1;
-      const request = requests[index];
-      if (!request) return;
-      const [requestId] = request;
-      try {
-        const result = await fetchApi.customWidget.previewQuery.query({ sessionId, requestId, params: {} });
-        results[index] = { requestId, data: result.data, status: { loading: false, ...result } };
-      } catch (error) {
-        results[index] = {
-          requestId,
-          data: null,
-          status: {
-            loading: false,
-            ok: false,
-            error: error instanceof Error ? error.message : "Request failed",
-          },
-        };
-      }
+  )) {
+    try {
+      const result = await fetchApi.customWidget.previewQuery.query({ sessionId, requestId, params: {} });
+      data[requestId] = result.data;
+      status[requestId] = { loading: false, ...result };
+    } catch (error) {
+      data[requestId] = null;
+      status[requestId] = {
+        loading: false,
+        ok: false,
+        error: error instanceof Error ? error.message : "Request failed",
+      };
     }
-  };
-  await Promise.all(Array.from({ length: Math.min(PREVIEW_QUERY_CONCURRENCY, requests.length) }, () => worker()));
-  return {
-    data: Object.fromEntries(results.map((result) => [result.requestId, result.data])),
-    status: Object.fromEntries(results.map((result) => [result.requestId, result.status])),
-  };
+  }
+  return { data, status };
 }
 
 export function getDefinitionDefaults(definition: HomarrCustomWidgetV2) {

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx

@@ -1,45 +1,45 @@
 "use client";
 
-import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import type { Dispatch, FormEventHandler, SetStateAction } from "react";
-import { Box, Paper, SegmentedControl, Stack } from "@mantine/core";
+import { useEffect, useMemo, useState } from "react";
+import { Accordion, Box, Button, Paper, SegmentedControl, Stack, TextInput, Textarea } from "@mantine/core";
+import {
+  IconAlertCircle,
+  IconApi,
+  IconBraces,
+  IconCode,
+  IconDatabase,
+  IconEye,
+  IconSettings,
+} from "@tabler/icons-react";
 
-import type { CustomWidgetAiDraft } from "@homarr/custom-widgets/authoring-prompt";
-import { customWidgetFormSchema, DEFAULT_CUSTOM_WIDGET_FORM_VALUES } from "@homarr/custom-widgets/workbench";
+import {
+  analyzeJsxTemplate,
+  analyzeRequestManifest,
+  customWidgetFormSchema,
+  DEFAULT_CUSTOM_WIDGET_FORM_VALUES,
+} from "@homarr/custom-widgets/workbench";
+import { customWidgetOptionsSchema, getCustomWidgetDefaultOptions } from "@homarr/custom-widgets/core";
 import type { CustomWidgetFormValues } from "@homarr/custom-widgets/workbench";
 import { useZodForm } from "@homarr/form";
+import { IconPicker } from "@homarr/forms-collection";
 import { useI18n } from "@homarr/translation/client";
 
+import { CodeEditor } from "./_code-editor";
+import { CustomWidgetAiCard } from "./_custom-widget-ai-card";
 import { CustomWidgetAdvancedManifest } from "./_custom-widget-advanced-manifest";
-import {
-  CustomWidgetOptionsSnapshotSync,
-  CustomWidgetSaveActions,
-  CustomWidgetSectionNavigation,
-  CustomWidgetUnsavedChangesGuard,
-} from "./_custom-widget-form-layout";
-import {
-  CustomWidgetAiSection,
-  CustomWidgetGeneralSection,
-  CustomWidgetOptionsSection,
-  CustomWidgetPreviewSection,
-  CustomWidgetRequestsSection,
-  CustomWidgetSourcesSection,
-  CustomWidgetTemplateSection,
-} from "./_custom-widget-form-sections";
-import {
-  createCustomWidgetFormDocumentStore,
-  CustomWidgetFormDocumentProvider,
-  useCustomWidgetFormDocumentBridge,
-} from "./_custom-widget-form-state";
-import type { CustomWidgetFormDocumentStore } from "./_custom-widget-form-state";
-import { buildDefinition, getDefinitionDefaults } from "./_custom-widget-form-utils";
-import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+import { createCustomWidgetCompletions, getInvalidCustomWidgetSections } from "./_custom-widget-form-analysis";
+import { EditorSection, SaveActions } from "./_custom-widget-form-layout";
+import { customWidgetOptionsSchemaReference, customWidgetRequestReference } from "./_custom-widget-form-references";
+import { buildDefinition, getDefinitionDefaults, isRecord, parseJson } from "./_custom-widget-form-utils";
+import { CustomWidgetOptionsEditor } from "./_custom-widget-options-editor";
+import { CustomWidgetPreviewPanel } from "./_custom-widget-preview-panel";
 import type { PreviewState } from "./_custom-widget-preview-panel";
+import { CustomWidgetRequestsEditor } from "./_custom-widget-requests-editor";
 import { createCustomWidgetRenameHandlers } from "./_custom-widget-rename-handlers";
-import type { CustomWidgetSaveIssue } from "./_custom-widget-save-errors";
 import { CustomWidgetSaveIssuesAlert } from "./_custom-widget-save-issues-alert";
+import { CustomWidgetSourcesEditor } from "./_custom-widget-sources-editor";
 import { useCustomWidgetFormActions } from "./_use-custom-widget-form-actions";
-import { analyzeCustomWidgetAiDiagnostics, CustomWidgetFormAnalysisProvider } from "./_use-custom-widget-form-analysis";
+import { useUnsavedChangesGuard } from "./_use-unsaved-changes-guard";
 import classes from "./_custom-widget-form.module.css";
 
 interface CustomWidgetFormProps {
@@ -47,204 +47,241 @@ interface CustomWidgetFormProps {
   initialValues?: Partial<CustomWidgetFormValues>;
   definitionId?: string;
 }
-
-type MobilePane = "configure" | "preview";
-
-interface CustomWidgetFormViewProps {
-  mode: "create" | "edit";
-  definitionId?: string;
-  form: CustomWidgetWorkbenchForm;
-  formErrors: CustomWidgetWorkbenchForm["errors"];
-  formRevision: string;
-  documentStore: CustomWidgetFormDocumentStore;
-  mobilePane: MobilePane;
-  setMobilePane: Dispatch<SetStateAction<MobilePane>>;
-  preview: PreviewState;
-  setPreview: Dispatch<SetStateAction<PreviewState>>;
-  previewSize: string;
-  setPreviewSize: Dispatch<SetStateAction<string>>;
-  optionsSnapshot: Record<string, unknown>;
-  setOptionsSnapshot: Dispatch<SetStateAction<Record<string, unknown>>>;
-  saveIssues: CustomWidgetSaveIssue[];
-  savePending: boolean;
-  previewPending: boolean;
-  onSubmit: FormEventHandler<HTMLFormElement>;
-  onPreview(): void;
-  onPasteAiResponse(): void;
-}
-
-function getAiDraft(values: CustomWidgetFormValues): CustomWidgetAiDraft {
-  return {
-    name: values.name,
-    description: values.description,
-    iconUrl: values.iconUrl,
-    sources: values.sources,
-    requests: values.requests,
-    options: values.options,
-    template: values.template,
-  };
-}
-
-const CustomWidgetFormView = memo(function CustomWidgetFormView(props: CustomWidgetFormViewProps) {
-  const w = useI18n("customWidget.workbench");
-  const documentStore = props.documentStore;
-  const form = props.form;
-  const setMobilePane = props.setMobilePane;
-  const setPreview = props.setPreview;
-  const { renameRequest, renameOption } = useMemo(
-    () =>
-      createCustomWidgetRenameHandlers({
-        form,
-        invalidWidgetMessage: w("invalidWidget"),
-      }),
-    [form, w],
-  );
-  const readAiDraft = useCallback(() => getAiDraft(documentStore.getValues()), [documentStore]);
-  const readAiDiagnostics = useCallback(
-    () => analyzeCustomWidgetAiDiagnostics(documentStore.getValues()),
-    [documentStore],
-  );
-  const handleSectionSelect = useCallback(
-    (section: string) => {
-      setMobilePane(section === "preview" ? "preview" : "configure");
-    },
-    [setMobilePane],
-  );
-  const handleLiveActionsChange = useCallback(
-    (enabled: boolean) =>
-      setPreview((current) => ({
-        ...current,
-        session: current.session ? { ...current.session, liveActions: enabled } : null,
-      })),
-    [setPreview],
-  );
-
-  return (
-    <CustomWidgetFormDocumentProvider store={documentStore}>
-      <CustomWidgetFormAnalysisProvider>
-        <form onSubmit={props.onSubmit} className={classes.form}>
-          <CustomWidgetUnsavedChangesGuard />
-          <CustomWidgetOptionsSnapshotSync setOptionsSnapshot={props.setOptionsSnapshot} />
-          <SegmentedControl
-            className={classes.paneSwitcher}
-            fullWidth
-            value={props.mobilePane}
-            onChange={(value) => props.setMobilePane(value as MobilePane)}
-            data={[
-              { value: "configure", label: w("configure") },
-              { value: "preview", label: w("section.preview") },
-            ]}
-          />
-          <CustomWidgetSaveIssuesAlert issues={props.saveIssues} />
-          <CustomWidgetSectionNavigation onSelect={handleSectionSelect} />
-          <div className={classes.workbench} data-mobile-pane={props.mobilePane}>
-            <Stack gap="lg" className={classes.configuration}>
-              <CustomWidgetAiSection
-                getDraft={readAiDraft}
-                getDiagnostics={readAiDiagnostics}
-                onPaste={props.onPasteAiResponse}
-              />
-              <CustomWidgetAdvancedManifest form={form} />
-              <CustomWidgetGeneralSection form={form} formRevision={props.formRevision} mode={props.mode} />
-              <CustomWidgetSourcesSection form={form} definitionId={props.definitionId} />
-              <CustomWidgetRequestsSection form={form} onRename={renameRequest} />
-              <CustomWidgetOptionsSection form={form} onRename={renameOption} />
-              <CustomWidgetTemplateSection form={form} />
-              <Paper p="md" className={classes.mobileSaveBar} shadow="sm">
-                <CustomWidgetSaveActions
-                  mode={props.mode}
-                  savePending={props.savePending}
-                  previewPending={props.previewPending}
-                  onPreview={props.onPreview}
-                />
-              </Paper>
-            </Stack>
-            <Box id="preview" component="aside" className={classes.previewPane} aria-label={w("widgetPreview")}>
-              <Paper p="md" className={classes.actionBar} shadow="sm">
-                <CustomWidgetSaveActions
-                  mode={props.mode}
-                  savePending={props.savePending}
-                  previewPending={props.previewPending}
-                  onPreview={props.onPreview}
-                />
-              </Paper>
-              <CustomWidgetPreviewSection
-                preview={props.preview}
-                size={props.previewSize}
-                onSizeChange={props.setPreviewSize}
-                optionsSnapshot={props.optionsSnapshot}
-                onOptionsChange={props.setOptionsSnapshot}
-                onLiveActionsChange={handleLiveActionsChange}
-              />
-            </Box>
-          </div>
-        </form>
-      </CustomWidgetFormAnalysisProvider>
-    </CustomWidgetFormDocumentProvider>
-  );
-});
+const sectionLinks = [
+  ["general", "section.general", IconSettings],
+  ["sources", "section.sources", IconApi],
+  ["requests", "section.requests", IconDatabase],
+  ["options", "section.options", IconBraces],
+  ["jsx", "section.jsx", IconCode],
+  ["preview", "section.preview", IconEye],
+] as const;
 
 export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWidgetFormProps) {
-  const [formInitialValues] = useState<CustomWidgetFormValues>(() => ({
-    ...DEFAULT_CUSTOM_WIDGET_FORM_VALUES,
-    ...initialValues,
-  }));
-  const [documentStore] = useState(() => createCustomWidgetFormDocumentStore(formInitialValues));
-  const mantineForm = useZodForm(customWidgetFormSchema, {
-    initialValues: formInitialValues,
-    mode: "uncontrolled",
-    validateDebounce: 300,
-    validateInputOnChange: false,
-    onValuesChange: documentStore.setValues,
-  });
-  const form = useCustomWidgetFormDocumentBridge(mantineForm, documentStore);
-  const [mobilePane, setMobilePane] = useState<MobilePane>("configure");
+  const t = useI18n("customWidget");
+  const tCommon = useI18n("common");
+  const w = useI18n("customWidget.workbench");
+  const formInitialValues: CustomWidgetFormValues = { ...DEFAULT_CUSTOM_WIDGET_FORM_VALUES, ...initialValues };
+  const form = useZodForm(customWidgetFormSchema, { initialValues: formInitialValues });
+  const [mobilePane, setMobilePane] = useState<"configure" | "preview">("configure");
+  const [request, setRequest] = useState("");
+  const [documentationUrl, setDocumentationUrl] = useState("");
   const [preview, setPreview] = useState<PreviewState>({ data: {}, status: {}, session: null, outcome: "idle" });
   const [previewSize, setPreviewSize] = useState("standard");
   const [optionsSnapshot, setOptionsSnapshot] = useState<Record<string, unknown>>(() => {
     const initialDefinition = buildDefinition(formInitialValues);
     return initialDefinition.success ? getDefinitionDefaults(initialDefinition.data) : {};
   });
-  const actions = useCustomWidgetFormActions({
+  useUnsavedChangesGuard(form.isDirty());
+
+  const candidate = useMemo(() => buildDefinition(form.values), [form.values]);
+  const parsedOptions = useMemo(
+    () => customWidgetOptionsSchema.safeParse(parseJson(form.values.options)),
+    [form.values.options],
+  );
+  const requestIds = useMemo(
+    () =>
+      Object.keys(
+        isRecord(parseJson(form.values.requests)) ? (parseJson(form.values.requests) as Record<string, unknown>) : {},
+      ),
+    [form.values.requests],
+  );
+  const jsxCompletions = useMemo(
+    () => createCustomWidgetCompletions(form.values, requestIds),
+    [form.values, requestIds],
+  );
+  const templateDiagnostics = useMemo(
+    () => analyzeJsxTemplate(form.values.template, { requestIds }),
+    [form.values.template, requestIds],
+  );
+  const requestDiagnostics = useMemo(() => analyzeRequestManifest(form.values.requests), [form.values.requests]);
+  const hasDiagnostics = [...templateDiagnostics, ...requestDiagnostics].some((entry) => entry.severity === "error");
+  const invalidSections = useMemo(
+    () =>
+      getInvalidCustomWidgetSections(
+        candidate.success ? [] : candidate.error.issues,
+        requestDiagnostics,
+        templateDiagnostics,
+      ),
+    [candidate, requestDiagnostics, templateDiagnostics],
+  );
+
+  const { save, runPreview, pasteAiResponse, saveIssues, savePending, previewPending } = useCustomWidgetFormActions({
     mode,
     definitionId,
     form,
-    documentStore,
+    candidate,
+    preview,
     setPreview,
     setMobilePane,
     optionsSnapshot,
     setOptionsSnapshot,
   });
-  const latestActions = useRef(actions);
-  useLayoutEffect(() => {
-    latestActions.current = actions;
-  }, [actions]);
-  const handleSubmit = useCallback<FormEventHandler<HTMLFormElement>>((event) => latestActions.current.save(event), []);
-  const handlePreview = useCallback(() => void latestActions.current.runPreview(), []);
-  const handlePasteAiResponse = useCallback(() => void latestActions.current.pasteAiResponse(), []);
+  useEffect(() => {
+    if (parsedOptions.success) setOptionsSnapshot(getCustomWidgetDefaultOptions(parsedOptions.data));
+  }, [parsedOptions]);
 
+  const invalid = hasDiagnostics || !candidate.success;
+  const { renameRequest, renameOption } = createCustomWidgetRenameHandlers({
+    form,
+    candidate,
+    invalidWidgetMessage: w("invalidWidget"),
+  });
   return (
-    <CustomWidgetFormView
-      mode={mode}
-      definitionId={definitionId}
-      form={form}
-      formErrors={mantineForm.errors}
-      formRevision={mantineForm.key("name")}
-      documentStore={documentStore}
-      mobilePane={mobilePane}
-      setMobilePane={setMobilePane}
-      preview={preview}
-      setPreview={setPreview}
-      previewSize={previewSize}
-      setPreviewSize={setPreviewSize}
-      optionsSnapshot={optionsSnapshot}
-      setOptionsSnapshot={setOptionsSnapshot}
-      saveIssues={actions.saveIssues}
-      savePending={actions.savePending}
-      previewPending={actions.previewPending}
-      onSubmit={handleSubmit}
-      onPreview={handlePreview}
-      onPasteAiResponse={handlePasteAiResponse}
-    />
+    <form onSubmit={save} className={classes.form}>
+      <SegmentedControl
+        className={classes.paneSwitcher}
+        fullWidth
+        value={mobilePane}
+        onChange={(value) => setMobilePane(value as typeof mobilePane)}
+        data={[
+          { value: "configure", label: w("configure") },
+          { value: "preview", label: w("section.preview") },
+        ]}
+      />
+      <CustomWidgetSaveIssuesAlert issues={saveIssues} />
+      <nav className={classes.sectionNav} aria-label={w("sectionNavigation")}>
+        {sectionLinks.map(([id, key, SectionIcon]) => (
+          <Button
+            key={id}
+            component="a"
+            href={`#${id}`}
+            onClick={() => setMobilePane(id === "preview" ? "preview" : "configure")}
+            size="compact-sm"
+            variant="subtle"
+            color={invalidSections.has(id) ? "red" : undefined}
+            leftSection={<SectionIcon size={14} />}
+            rightSection={
+              invalidSections.has(id) ? <IconAlertCircle size={13} aria-label={w("status.invalid")} /> : undefined
+            }
+          >
+            {w(key)}
+          </Button>
+        ))}
+      </nav>
+      <div className={classes.workbench} data-mobile-pane={mobilePane}>
+        <Stack gap="lg" className={classes.configuration}>
+          <CustomWidgetAiCard
+            candidate={candidate.success ? candidate.data : null}
+            request={request}
+            onRequestChange={setRequest}
+            documentationUrl={documentationUrl}
+            onDocumentationUrlChange={setDocumentationUrl}
+            onPaste={() => void pasteAiResponse()}
+          />
+          <CustomWidgetAdvancedManifest form={form} />
+          <EditorSection id="general" title={w("generalInformation")} icon={IconSettings}>
+            <TextInput label={tCommon("field.name")} required {...form.getInputProps("name")} />
+            <Textarea label={t("field.description")} autosize minRows={2} {...form.getInputProps("description")} />
+            <IconPicker
+              withAsterisk={false}
+              suggestedSearch={mode === "create" ? form.values.name : undefined}
+              {...form.getInputProps("iconUrl")}
+            />
+          </EditorSection>
+          <EditorSection id="sources" title={w("sources.title")} icon={IconApi}>
+            <CustomWidgetSourcesEditor form={form} definitionId={definitionId} />
+          </EditorSection>
+          <EditorSection id="requests" title={w("requests.title")} icon={IconDatabase}>
+            <CustomWidgetRequestsEditor form={form} onRename={renameRequest} />
+            <Accordion variant="contained">
+              <Accordion.Item value="raw">
+                <Accordion.Control>{w("builder.advancedJson")}</Accordion.Control>
+                <Accordion.Panel>
+                  <CodeEditor
+                    id="requests-editor"
+                    label={w("requests.label")}
+                    description={w("requests.description")}
+                    language="json"
+                    value={form.values.requests}
+                    onChange={(value) => form.setFieldValue("requests", value)}
+                    diagnostics={requestDiagnostics}
+                    error={form.errors.requests}
+                    reference={customWidgetRequestReference}
+                    required
+                  />
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion>
+          </EditorSection>
+          <EditorSection id="options" title={w("options.title")} icon={IconBraces}>
+            <CustomWidgetOptionsEditor form={form} onRename={renameOption} />
+            <Accordion variant="contained">
+              <Accordion.Item value="raw">
+                <Accordion.Control>{w("builder.advancedJson")}</Accordion.Control>
+                <Accordion.Panel>
+                  <CodeEditor
+                    id="options"
+                    label={w("options.title")}
+                    language="json"
+                    value={form.values.options}
+                    onChange={(value) => form.setFieldValue("options", value)}
+                    error={form.errors.options}
+                    reference={customWidgetOptionsSchemaReference}
+                  />
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion>
+          </EditorSection>
+          <EditorSection id="jsx" title={w("jsx.title")} icon={IconCode}>
+            <CodeEditor
+              id="jsx-editor"
+              label={w("jsx.label")}
+              language="jsx"
+              value={form.values.template}
+              onChange={(value) => form.setFieldValue("template", value)}
+              diagnostics={templateDiagnostics}
+              completions={jsxCompletions}
+              error={form.errors.template}
+              required
+              maxLength={50_000}
+            />
+          </EditorSection>
+          <Paper p="md" className={classes.mobileSaveBar} shadow="sm">
+            <SaveActions
+              dirty={form.isDirty()}
+              savePending={savePending}
+              previewPending={previewPending}
+              invalid={invalid}
+              mode={mode}
+              onPreview={() => void runPreview()}
+            />
+          </Paper>
+        </Stack>
+        <Box id="preview" component="aside" className={classes.previewPane} aria-label={w("widgetPreview")}>
+          <Paper p="md" className={classes.actionBar} shadow="sm">
+            <SaveActions
+              dirty={form.isDirty()}
+              savePending={savePending}
+              previewPending={previewPending}
+              invalid={invalid}
+              mode={mode}
+              onPreview={() => void runPreview()}
+            />
+          </Paper>
+          <CustomWidgetPreviewPanel
+            candidate={candidate.success ? candidate.data : null}
+            validationIssues={
+              candidate.success
+                ? []
+                : candidate.error.issues.map((issue) => ({
+                    path: issue.path.map(String).join(".") || undefined,
+                    message: issue.message,
+                  }))
+            }
+            preview={preview}
+            size={previewSize}
+            onSizeChange={setPreviewSize}
+            optionsSnapshot={optionsSnapshot}
+            onOptionsChange={setOptionsSnapshot}
+            onLiveActionsChange={(enabled) =>
+              setPreview((current) => ({
+                ...current,
+                session: current.session ? { ...current.session, liveActions: enabled } : null,
+              }))
+            }
+          />
+        </Box>
+      </div>
+    </form>
   );
 }

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-options-editor.tsx

@@ -69,7 +69,7 @@ export function CustomWidgetOptionsEditor({
             )
           : [];
         return (
-          <Fieldset key={id} legend={typeof option.label === "string" ? option.label : id}>
+          <Fieldset key={index} legend={typeof option.label === "string" ? option.label : id}>
             <Stack gap="sm">
               <Group grow align="start">
                 <CustomWidgetIdentifierInput
@@ -99,7 +99,7 @@ export function CustomWidgetOptionsEditor({
                 }
               />
               <DefaultValueEditor
-                id={`${id}-default`}
+                id={`${index}-default`}
                 control={control}
                 value={option.default}
                 choices={choices}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-data.ts

@@ -6,8 +6,6 @@ interface PreviewSnapshot {
   session: { id: string; liveActions: boolean } | null;
 }
 
-type PreviewCandidate = Pick<HomarrCustomWidgetV2, "requests" | "template">;
-
 export function createPreviewDisplayData({
   candidate,
   fixture,
@@ -15,7 +13,7 @@ export function createPreviewDisplayData({
   options,
   fixtureError,
 }: {
-  candidate: PreviewCandidate | null;
+  candidate: HomarrCustomWidgetV2 | null;
   fixture: "live" | "loading" | "empty" | "error";
   preview: PreviewSnapshot;
   options: Record<string, unknown>;

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useMemo, useState } from "react";
+import { useState } from "react";
 import { Alert, Box, Card, Group, Paper, SegmentedControl, Stack, Switch, Tabs, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
@@ -15,12 +15,9 @@ import { getPreviewSummary, PreviewResult, PreviewStatusDot } from "./_custom-wi
 import type { PreviewOutcome } from "./_custom-widget-preview-status";
 import { PreviewActionControl } from "./_custom-widget-preview-action";
 import { createPreviewDisplayData } from "./_custom-widget-preview-data";
-import { CustomWidgetPreviewSizeControl } from "./_custom-widget-preview-size-control";
 import { JsonPreviewEditor } from "./_json-preview-editor";
 import classes from "./_custom-widget-form.module.css";
 
-const previewWidths: Record<string, number> = { compact: 320, standard: 480, wide: 720 };
-
 export interface PreviewState {
   data: Record<string, unknown>;
   status: Record<string, unknown>;
@@ -39,7 +36,7 @@ interface PreviewPanelProps {
   onLiveActionsChange(enabled: boolean): void;
 }
 
-function CustomWidgetPreviewPanelContent(props: PreviewPanelProps) {
+export function CustomWidgetPreviewPanel(props: PreviewPanelProps) {
   const t = useI18n("customWidget.workbench.preview");
   const errorBoundaryMessages = useI18n("customWidget.editor.errorBoundary");
   const actionT = useI18n("common.action");
@@ -49,55 +46,26 @@ function CustomWidgetPreviewPanelContent(props: PreviewPanelProps) {
     { sessionId: props.preview.session?.id ?? "" },
     { enabled: Boolean(props.preview.session), refetchInterval: props.preview.session ? 2_000 : false },
   );
+  const widths: Record<string, number> = { compact: 320, standard: 480, wide: 720 };
   const candidate = props.candidate;
-  const candidateTemplate = candidate?.template;
-  const candidateRequests = candidate?.requests;
-  const previewCandidate = useMemo(() => {
-    if (candidateTemplate === undefined || candidateRequests === undefined) return null;
-    return { template: candidateTemplate, requests: candidateRequests };
-  }, [candidateRequests, candidateTemplate]);
-  const previewSnapshot = useMemo(
-    () => ({ data: props.preview.data, status: props.preview.status, session: props.preview.session }),
-    [props.preview.data, props.preview.session, props.preview.status],
-  );
-  const fixtureError = t("fixtureError");
-  const accessibilityIssues = useMemo(() => {
-    if (candidateTemplate === undefined) return [];
-    return analyzeCustomWidgetAccessibility(candidateTemplate);
-  }, [candidateTemplate]);
-  const displayData = useMemo(
-    () =>
-      createPreviewDisplayData({
-        candidate: previewCandidate,
-        fixture,
-        preview: previewSnapshot,
-        options: props.optionsSnapshot,
-        fixtureError,
-      }),
-    [fixture, fixtureError, previewCandidate, previewSnapshot, props.optionsSnapshot],
-  );
-  const previewSummary = useMemo(() => getPreviewSummary(props.preview.status), [props.preview.status]);
-  const rendererResetKey = useMemo(
-    () =>
-      JSON.stringify({
-        template: candidateTemplate,
-        requests: candidateRequests,
-        fixture,
-        data: props.preview.data,
-        status: props.preview.status,
-        sessionId: props.preview.session?.id,
-        options: props.optionsSnapshot,
-      }),
-    [
-      candidateRequests,
-      candidateTemplate,
-      fixture,
-      props.optionsSnapshot,
-      props.preview.data,
-      props.preview.session?.id,
-      props.preview.status,
-    ],
-  );
+  const accessibilityIssues = candidate ? analyzeCustomWidgetAccessibility(candidate.template) : [];
+  const displayData = createPreviewDisplayData({
+    candidate,
+    fixture,
+    preview: props.preview,
+    options: props.optionsSnapshot,
+    fixtureError: t("fixtureError"),
+  });
+  const previewSummary = getPreviewSummary(props.preview.status);
+  const rendererResetKey = JSON.stringify({
+    template: candidate?.template,
+    requests: candidate?.requests,
+    fixture,
+    data: props.preview.data,
+    status: props.preview.status,
+    sessionId: props.preview.session?.id,
+    options: props.optionsSnapshot,
+  });
   const previewResult =
     props.preview.outcome === "success"
       ? {
@@ -117,7 +85,37 @@ function CustomWidgetPreviewPanelContent(props: PreviewPanelProps) {
     <Card withBorder p="md">
       <Stack gap="md">
         <Group gap="xs" justify="space-between">
-          <CustomWidgetPreviewSizeControl value={props.size} onChange={props.onSizeChange} />
+          <SegmentedControl
+            size="xs"
+            value={props.size}
+            onChange={props.onSizeChange}
+            data={[
+              {
+                value: "compact",
+                label: (
+                  <span aria-label={t("size.compact")} title={t("size.compact")}>
+                    S
+                  </span>
+                ),
+              },
+              {
+                value: "standard",
+                label: (
+                  <span aria-label={t("size.standard")} title={t("size.standard")}>
+                    M
+                  </span>
+                ),
+              },
+              {
+                value: "wide",
+                label: (
+                  <span aria-label={t("size.wide")} title={t("size.wide")}>
+                    L
+                  </span>
+                ),
+              },
+            ]}
+          />
           <SegmentedControl
             size="xs"
             value={fixture}
@@ -153,14 +151,7 @@ function CustomWidgetPreviewPanelContent(props: PreviewPanelProps) {
           </Tabs.List>
           <Tabs.Panel value="widget" pt="sm">
             <Box className={classes.previewCanvas}>
-              <Paper
-                withBorder
-                p="sm"
-                h={360}
-                w={previewWidths[props.size] ?? 480}
-                maw="100%"
-                style={{ overflow: "auto" }}
-              >
+              <Paper withBorder p="sm" h={360} w={widths[props.size] ?? 480} maw="100%" style={{ overflow: "auto" }}>
                 {displayData ? (
                   <PreviewErrorBoundary
                     title={errorBoundaryMessages("title")}
@@ -273,5 +264,3 @@ function CustomWidgetPreviewPanelContent(props: PreviewPanelProps) {
     </Card>
   );
 }
-
-export const CustomWidgetPreviewPanel = memo(CustomWidgetPreviewPanelContent);

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-size-control.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { SegmentedControl, VisuallyHidden } from "@mantine/core";
-
-import { useI18n } from "@homarr/translation/client";
-
-interface CustomWidgetPreviewSizeControlProps {
-  value: string;
-  onChange(value: string): void;
-}
-
-const previewSizeShortLabels = { compact: "S", standard: "M", wide: "L" } as const;
-
-function CustomWidgetPreviewSizeControlContent({ value, onChange }: CustomWidgetPreviewSizeControlProps) {
-  const t = useI18n("customWidget.workbench.preview");
-
-  return (
-    <SegmentedControl
-      size="xs"
-      value={value}
-      onChange={onChange}
-      data={[
-        {
-          value: "compact",
-          label: (
-            <span title={t("size.compact")}>
-              <span aria-hidden>{previewSizeShortLabels.compact}</span>
-              <VisuallyHidden>{t("size.compact")}</VisuallyHidden>
-            </span>
-          ),
-        },
-        {
-          value: "standard",
-          label: (
-            <span title={t("size.standard")}>
-              <span aria-hidden>{previewSizeShortLabels.standard}</span>
-              <VisuallyHidden>{t("size.standard")}</VisuallyHidden>
-            </span>
-          ),
-        },
-        {
-          value: "wide",
-          label: (
-            <span title={t("size.wide")}>
-              <span aria-hidden>{previewSizeShortLabels.wide}</span>
-              <VisuallyHidden>{t("size.wide")}</VisuallyHidden>
-            </span>
-          ),
-        },
-      ]}
-    />
-  );
-}
-
-export const CustomWidgetPreviewSizeControl = memo(CustomWidgetPreviewSizeControlContent);

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-rename-handlers.ts

@@ -1,35 +1,34 @@
 import { renameCustomWidgetOption, renameCustomWidgetRequest } from "@homarr/custom-widgets/workbench";
 
-import { applyDefinition, buildDefinition } from "./_custom-widget-form-utils";
-import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+import { applyDefinition } from "./_custom-widget-form-utils";
+import type { buildDefinition, CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
 
 interface RenameHandlersInput {
   form: CustomWidgetWorkbenchForm;
+  candidate: ReturnType<typeof buildDefinition>;
   invalidWidgetMessage: string;
 }
 
 export function createCustomWidgetRenameHandlers(input: RenameHandlersInput) {
   const renameRequest = (currentId: string, nextId: string) => {
-    const candidate = buildDefinition(input.form.getValues());
-    if (!candidate.success) {
+    if (!input.candidate.success) {
       input.form.setFieldError("requests", input.invalidWidgetMessage);
       return;
     }
     try {
-      applyDefinition(input.form, renameCustomWidgetRequest(candidate.data, currentId, nextId));
+      applyDefinition(input.form, renameCustomWidgetRequest(input.candidate.data, currentId, nextId));
       input.form.clearFieldError("requests");
     } catch (error) {
       input.form.setFieldError("requests", error instanceof Error ? error.message : input.invalidWidgetMessage);
     }
   };
   const renameOption = (currentName: string, nextName: string) => {
-    const candidate = buildDefinition(input.form.getValues());
-    if (!candidate.success) {
+    if (!input.candidate.success) {
       input.form.setFieldError("options", input.invalidWidgetMessage);
       return;
     }
     try {
-      applyDefinition(input.form, renameCustomWidgetOption(candidate.data, currentName, nextName));
+      applyDefinition(input.form, renameCustomWidgetOption(input.candidate.data, currentName, nextName));
       input.form.clearFieldError("options");
     } catch (error) {
       input.form.setFieldError("options", error instanceof Error ? error.message : input.invalidWidgetMessage);

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-request-value-editors.tsx

@@ -23,7 +23,7 @@ export function QueryValuesEditor({
 }) {
   const t = useI18n("customWidget.workbench.builder");
   const entries = Object.entries(value);
-  const [nameErrors, setNameErrors] = useState<Record<string, string>>({});
+  const [nameErrors, setNameErrors] = useState<Record<number, string>>({});
   return (
     <Stack gap="xs">
       <Text size="sm" fw={500}>
@@ -65,23 +65,23 @@ export function QueryValuesEditor({
           ...(allowParams ? [{ value: "param", label: t("invocationParameter") }] : []),
         ];
         return (
-          <Group key={name} align="end" wrap="wrap">
+          <Group key={index} align="end" wrap="wrap">
             <CustomWidgetIdentifierInput
               style={{ flex: "1 1 10rem" }}
               label={t("queryKey")}
               value={name}
-              error={nameErrors[name]}
+              error={nameErrors[index]}
               onCommit={(nextName) => {
                 if (
                   !/^[A-Za-z][A-Za-z0-9_-]*$/u.test(nextName) ||
                   entries.some(([entryName], entryIndex) => entryIndex !== index && entryName === nextName)
                 ) {
-                  setNameErrors((currentErrors) => ({ ...currentErrors, [name]: t("queryKeyInvalid") }));
+                  setNameErrors((currentErrors) => ({ ...currentErrors, [index]: t("queryKeyInvalid") }));
                   return;
                 }
                 setNameErrors((currentErrors) => {
                   const nextErrors = { ...currentErrors };
-                  delete nextErrors[name];
+                  delete nextErrors[index];
                   return nextErrors;
                 });
                 commit(nextName, kind, current);

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-requests-editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ActionIcon, Button, Fieldset, Group, Select, Stack, Switch, Text, TextInput } from "@mantine/core";
+import { Accordion, ActionIcon, Button, Fieldset, Group, Select, Stack, Switch, Text, TextInput } from "@mantine/core";
 import { IconArrowDown, IconArrowUp, IconPlus, IconTrash } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
@@ -9,7 +9,6 @@ import { isRecord, parseJson } from "./_custom-widget-form-utils";
 import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
 import { QueryValuesEditor, RequestBodyEditor } from "./_custom-widget-request-value-editors";
 import { CustomWidgetIdentifierInput } from "./_custom-widget-identifier-input";
-import { LazyOnceAccordion } from "./_lazy-once-accordion";
 
 const methods = ["GET", "POST", "PUT", "PATCH", "DELETE"];
 
@@ -25,8 +24,6 @@ export function CustomWidgetRequestsEditor({
   const entries = isRecord(parsed) ? Object.entries(parsed) : [];
   const sources = parseJson(form.values.sources);
   const sourceIds = isRecord(sources) ? Object.keys(sources) : ["default"];
-  const options = parseJson(form.values.options);
-  const optionNames = isRecord(options) ? Object.keys(options) : [];
 
   const commit = (next: Array<[string, unknown]>) =>
     form.setFieldValue("requests", JSON.stringify(Object.fromEntries(next), null, 2));
@@ -53,7 +50,7 @@ export function CustomWidgetRequestsEditor({
         const kind = request.kind === "action" ? "action" : "query";
         const trigger = request.trigger === "manual" ? "manual" : "load";
         return (
-          <Fieldset key={id} legend={id || t("request", { count: index + 1 })}>
+          <Fieldset key={index} legend={id || t("request", { count: index + 1 })}>
             <Stack gap="sm">
               <Group grow align="start">
                 <CustomWidgetIdentifierInput
@@ -122,61 +119,71 @@ export function CustomWidgetRequestsEditor({
               <TextInput
                 label={t("path")}
                 description={t("pathDescription")}
-                descriptionProps={{
-                  style: { color: "light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4))" },
-                }}
                 value={typeof request.path === "string" ? request.path : ""}
                 onChange={(event) => update(index, id, { ...request, path: event.currentTarget.value })}
               />
-              <LazyOnceAccordion label={t("requestDetails")}>
-                <Stack gap="sm">
-                  <QueryValuesEditor
-                    value={isRecord(request.query) ? request.query : {}}
-                    optionNames={optionNames}
-                    allowParams={trigger === "manual" || kind === "action"}
-                    onChange={(query) => update(index, id, { ...request, query })}
-                  />
-                  <RequestBodyEditor
-                    id={id}
-                    value={request.body}
-                    optionNames={optionNames}
-                    allowParams={trigger === "manual" || kind === "action"}
-                    onChange={(body) => update(index, id, { ...request, body })}
-                  />
-                  {kind === "action" && (
-                    <TextInput
-                      label={t("confirmation")}
-                      value={typeof request.confirmation === "string" ? request.confirmation : ""}
-                      onChange={(event) =>
-                        update(index, id, { ...request, confirmation: event.currentTarget.value || undefined })
-                      }
-                    />
-                  )}
-                  {kind === "action" && (
-                    <TextInput
-                      label={t("invalidation")}
-                      description={t("invalidationDescription")}
-                      value={Array.isArray(request.invalidates) ? request.invalidates.join(", ") : ""}
-                      onChange={(event) =>
-                        update(index, id, {
-                          ...request,
-                          invalidates: event.currentTarget.value
-                            .split(",")
-                            .map((value) => value.trim())
-                            .filter(Boolean),
-                        })
-                      }
-                    />
-                  )}
-                  <Switch
-                    label={t("noAuth")}
-                    checked={request.auth === "none"}
-                    onChange={(event) =>
-                      update(index, id, { ...request, auth: event.currentTarget.checked ? "none" : "inherit" })
-                    }
-                  />
-                </Stack>
-              </LazyOnceAccordion>
+              <Accordion variant="contained">
+                <Accordion.Item value="values">
+                  <Accordion.Control>{t("requestDetails")}</Accordion.Control>
+                  <Accordion.Panel>
+                    <Stack gap="sm">
+                      <QueryValuesEditor
+                        value={isRecord(request.query) ? request.query : {}}
+                        optionNames={Object.keys(
+                          isRecord(parseJson(form.values.options))
+                            ? (parseJson(form.values.options) as Record<string, unknown>)
+                            : {},
+                        )}
+                        allowParams={trigger === "manual" || kind === "action"}
+                        onChange={(query) => update(index, id, { ...request, query })}
+                      />
+                      <RequestBodyEditor
+                        id={id}
+                        value={request.body}
+                        optionNames={Object.keys(
+                          isRecord(parseJson(form.values.options))
+                            ? (parseJson(form.values.options) as Record<string, unknown>)
+                            : {},
+                        )}
+                        allowParams={trigger === "manual" || kind === "action"}
+                        onChange={(body) => update(index, id, { ...request, body })}
+                      />
+                      {kind === "action" && (
+                        <TextInput
+                          label={t("confirmation")}
+                          value={typeof request.confirmation === "string" ? request.confirmation : ""}
+                          onChange={(event) =>
+                            update(index, id, { ...request, confirmation: event.currentTarget.value || undefined })
+                          }
+                        />
+                      )}
+                      {kind === "action" && (
+                        <TextInput
+                          label={t("invalidation")}
+                          description={t("invalidationDescription")}
+                          value={Array.isArray(request.invalidates) ? request.invalidates.join(", ") : ""}
+                          onChange={(event) =>
+                            update(index, id, {
+                              ...request,
+                              invalidates: event.currentTarget.value
+                                .split(",")
+                                .map((value) => value.trim())
+                                .filter(Boolean),
+                            })
+                          }
+                        />
+                      )}
+                      <Switch
+                        label={t("noAuth")}
+                        checked={request.auth === "none"}
+                        onChange={(event) =>
+                          update(index, id, { ...request, auth: event.currentTarget.checked ? "none" : "inherit" })
+                        }
+                      />
+                    </Stack>
+                  </Accordion.Panel>
+                </Accordion.Item>
+              </Accordion>
               <Group justify="space-between">
                 <Group gap="xs">
                   <ActionIcon

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-issue-utils.ts

@@ -1,37 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { UseFormReturnType } from "@mantine/form";
-
-import type { CustomWidgetFormValues } from "@homarr/custom-widgets/workbench";
-import { showErrorNotification } from "@homarr/notifications";
-
-import type { CustomWidgetSaveIssue } from "./_custom-widget-save-errors";
-
-export function reportSaveIssues(
-  form: UseFormReturnType<CustomWidgetFormValues>,
-  issues: CustomWidgetSaveIssue[],
-  setIssues: Dispatch<SetStateAction<CustomWidgetSaveIssue[]>>,
-  title: string,
-  getRemainingLabel: (count: number) => string,
-) {
-  setIssues(issues);
-  const messagesByPath = new Map<string, string[]>();
-  for (const issue of issues) {
-    if (!issue.path) continue;
-    const field = issue.path.split(".")[0] ?? issue.path;
-    messagesByPath.set(field, [...(messagesByPath.get(field) ?? []), issue.message]);
-  }
-  for (const [path, messages] of messagesByPath) {
-    form.setFieldError(path, messages.join(" "));
-  }
-  const remaining = issues.length - 1;
-  showErrorNotification({
-    title,
-    message: `${issues[0]?.message ?? ""}${remaining > 0 ? ` ${getRemainingLabel(remaining)}` : ""}`,
-  });
-}
-
-export function clearSaveIssues(form: UseFormReturnType<CustomWidgetFormValues>, issues: CustomWidgetSaveIssue[]) {
-  for (const path of new Set(issues.flatMap((issue) => (issue.path ? [issue.path.split(".")[0] ?? issue.path] : [])))) {
-    form.clearFieldError(path);
-  }
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-value-equality.ts

@@ -1,18 +0,0 @@
-export function areCustomWidgetValuesEqual(left: unknown, right: unknown): boolean {
-  if (Object.is(left, right)) return true;
-
-  if (Array.isArray(left)) {
-    if (!Array.isArray(right) || left.length !== right.length) return false;
-    return left.every((value, index) => areCustomWidgetValuesEqual(value, right[index]));
-  }
-
-  if (!isRecord(left) || !isRecord(right)) return false;
-  const leftKeys = Object.keys(left);
-  const rightKeys = Object.keys(right);
-  if (leftKeys.length !== rightKeys.length) return false;
-  return leftKeys.every((key) => Object.hasOwn(right, key) && areCustomWidgetValuesEqual(left[key], right[key]));
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return value !== null && typeof value === "object" && !Array.isArray(value);
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_lazy-once-accordion.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { useId, useState } from "react";
-import { Accordion } from "@mantine/core";
-
-interface LazyOnceAccordionProps {
-  label: ReactNode;
-  children: ReactNode;
-}
-
-export function LazyOnceAccordion({ label, children }: LazyOnceAccordionProps) {
-  const id = useId();
-  const [value, setValue] = useState<string | null>(null);
-  const [hasOpened, setHasOpened] = useState(false);
-  const controlId = `${id}-control`;
-  const panelId = `${id}-panel`;
-
-  const handleChange = (nextValue: string | null) => {
-    setValue(nextValue);
-    if (nextValue === "content") setHasOpened(true);
-  };
-
-  return (
-    <Accordion variant="contained" value={value} onChange={handleChange}>
-      <Accordion.Item value="content">
-        <Accordion.Control id={controlId} aria-controls={panelId}>
-          {label}
-        </Accordion.Control>
-        {/* Native hiding keeps editor effects and CodeMirror history alive while the panel is collapsed. */}
-        <div
-          id={panelId}
-          className={Accordion.classes.panel}
-          // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- The explicit role matches Mantine's panel contract.
-          role="region"
-          aria-labelledby={controlId}
-          hidden={value !== "content"}
-        >
-          <div className={Accordion.classes.content}>{hasOpened && children}</div>
-        </div>
-      </Accordion.Item>
-    </Accordion>
-  );
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-custom-widget-form-actions.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import type { UseFormReturnType } from "@mantine/form";
 
@@ -22,14 +22,13 @@ import {
 import type { PreviewState } from "./_custom-widget-preview-panel";
 import { extractCustomWidgetSaveIssues } from "./_custom-widget-save-errors";
 import type { CustomWidgetSaveIssue } from "./_custom-widget-save-errors";
-import { clearSaveIssues, reportSaveIssues } from "./_custom-widget-save-issue-utils";
-import type { CustomWidgetFormDocumentStore } from "./_custom-widget-form-state";
 
 interface FormActionsInput {
   mode: "create" | "edit";
   definitionId?: string;
   form: UseFormReturnType<CustomWidgetFormValues>;
-  documentStore: CustomWidgetFormDocumentStore;
+  candidate: ReturnType<typeof buildDefinition>;
+  preview: PreviewState;
   setPreview: Dispatch<SetStateAction<PreviewState>>;
   setMobilePane: Dispatch<SetStateAction<"configure" | "preview">>;
   optionsSnapshot: Record<string, unknown>;
@@ -46,34 +45,6 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
   const previewMutation = clientApi.customWidget.previewCreate.useMutation();
   const [saveIssues, setSaveIssues] = useState<CustomWidgetSaveIssue[]>([]);
   const [previewPending, setPreviewPending] = useState(false);
-  const setPreview = input.setPreview;
-  const previewGeneration = useRef(0);
-  const activePreviewGeneration = useRef<number | null>(null);
-  const invalidatePreview = useCallback(() => {
-    previewGeneration.current += 1;
-    if (activePreviewGeneration.current !== null) return;
-    setPreview((preview) => {
-      if (
-        preview.outcome === "idle" &&
-        preview.session === null &&
-        Object.keys(preview.data).length === 0 &&
-        Object.keys(preview.status).length === 0
-      )
-        return preview;
-      return { data: {}, status: {}, session: null, outcome: "idle" };
-    });
-  }, [setPreview]);
-  useLayoutEffect(() => {
-    invalidatePreview();
-  }, [input.optionsSnapshot, invalidatePreview]);
-  useEffect(() => input.documentStore.subscribe(invalidatePreview), [input.documentStore, invalidatePreview]);
-  useEffect(
-    () => () => {
-      previewGeneration.current += 1;
-      activePreviewGeneration.current = null;
-    },
-    [],
-  );
   let actionLabel = tCommon("action.save");
   if (input.mode === "create") actionLabel = tCommon("action.create");
 
@@ -102,7 +73,6 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
         });
         input.form.setInitialValues(values);
         input.form.resetDirty();
-        input.documentStore.markSaved(values);
         await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
         window.location.assign(result.managementPath);
       } else if (input.definitionId) {
@@ -118,7 +88,6 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
         ]);
         input.form.setInitialValues(values);
         input.form.resetDirty();
-        input.documentStore.markSaved(values);
         showSuccessNotification({
           title: tCommon("action.save"),
           message: t("notification.updated", { name: values.name }),
@@ -135,18 +104,15 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
   });
 
   const runPreview = async () => {
-    if (activePreviewGeneration.current !== null) return;
-    const valuesAtStart = input.documentStore.getValues();
-    const candidateAtStart = buildDefinition(valuesAtStart);
-    if (!candidateAtStart.success) {
+    if (previewPending) return;
+    if (!input.candidate.success) {
       showErrorNotification({
         title: w("section.preview"),
-        message: candidateAtStart.error.issues[0]?.message ?? w("invalidWidget"),
+        message: input.candidate.error.issues[0]?.message ?? w("invalidWidget"),
       });
       return;
     }
-    const optionsAtStart = input.optionsSnapshot;
-    const optionIssues = getCustomWidgetPreviewOptionIssues(candidateAtStart.data, optionsAtStart);
+    const optionIssues = getCustomWidgetPreviewOptionIssues(input.candidate.data, input.optionsSnapshot);
     if (optionIssues.length > 0) {
       const issue = optionIssues[0];
       showErrorNotification({
@@ -155,24 +121,17 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
       });
       return;
     }
-    const secretsAtStart = getChangedSecrets(valuesAtStart);
-    const generation = previewGeneration.current + 1;
-    previewGeneration.current = generation;
-    activePreviewGeneration.current = generation;
-    const isCurrent = () => previewGeneration.current === generation;
     input.setMobilePane("preview");
     input.setPreview({ data: {}, status: {}, session: null, outcome: "loading" });
     setPreviewPending(true);
     try {
       const created = await previewMutation.mutateAsync({
-        definition: candidateAtStart.data,
+        definition: input.candidate.data,
         definitionId: input.definitionId,
-        options: optionsAtStart,
-        secrets: secretsAtStart,
+        options: input.optionsSnapshot,
+        secrets: getChangedSecrets(input.form.values),
       });
-      if (!isCurrent()) return;
-      const snapshot = await loadPreviewQueries(candidateAtStart.data, created.previewSession.id);
-      if (!isCurrent()) return;
+      const snapshot = await loadPreviewQueries(input.candidate.data, created.previewSession.id);
       const failed = Object.values(snapshot.status).filter((status) => isRecord(status) && status.ok === false).length;
       input.setPreview({
         ...snapshot,
@@ -197,15 +156,10 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
         });
       }
     } catch {
-      if (!isCurrent()) return;
       input.setPreview((current) => ({ ...current, outcome: "error" }));
       showErrorNotification({ title: w("section.preview"), message: t("notification.previewError") });
     } finally {
-      if (activePreviewGeneration.current === generation) {
-        activePreviewGeneration.current = null;
-        setPreviewPending(false);
-        if (!isCurrent()) setPreview({ data: {}, status: {}, session: null, outcome: "idle" });
-      }
+      setPreviewPending(false);
     }
   };
 
@@ -216,6 +170,7 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
         throw new Error(formatCustomWidgetImportIssues(result.issues));
       }
       input.setOptionsSnapshot(getDefinitionDefaults(result.widget));
+      input.setPreview({ data: {}, status: {}, session: null, outcome: "idle" });
       showSuccessNotification({
         title: w("ai.response"),
         message:
@@ -241,3 +196,33 @@ export function useCustomWidgetFormActions(input: FormActionsInput) {
     previewPending,
   };
 }
+
+function reportSaveIssues(
+  form: UseFormReturnType<CustomWidgetFormValues>,
+  issues: CustomWidgetSaveIssue[],
+  setIssues: Dispatch<SetStateAction<CustomWidgetSaveIssue[]>>,
+  title: string,
+  getRemainingLabel: (count: number) => string,
+) {
+  setIssues(issues);
+  const messagesByPath = new Map<string, string[]>();
+  for (const issue of issues) {
+    if (!issue.path) continue;
+    const field = issue.path.split(".")[0] ?? issue.path;
+    messagesByPath.set(field, [...(messagesByPath.get(field) ?? []), issue.message]);
+  }
+  for (const [path, messages] of messagesByPath) {
+    form.setFieldError(path, messages.join(" "));
+  }
+  const remaining = issues.length - 1;
+  showErrorNotification({
+    title,
+    message: `${issues[0]?.message ?? ""}${remaining > 0 ? ` ${getRemainingLabel(remaining)}` : ""}`,
+  });
+}
+
+function clearSaveIssues(form: UseFormReturnType<CustomWidgetFormValues>, issues: CustomWidgetSaveIssue[]) {
+  for (const path of new Set(issues.flatMap((issue) => (issue.path ? [issue.path.split(".")[0] ?? issue.path] : [])))) {
+    form.clearFieldError(path);
+  }
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-custom-widget-form-analysis.ts

@@ -1,188 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  createElement,
-  useCallback,
-  useContext,
-  useDeferredValue,
-  useLayoutEffect,
-  useMemo,
-  useState,
-  useSyncExternalStore,
-} from "react";
-import type { ReactNode } from "react";
-
-import type { CustomWidgetAiDiagnostic } from "@homarr/custom-widgets/authoring-prompt";
-import { customWidgetOptionsSchema } from "@homarr/custom-widgets/core";
-import { analyzeJsxTemplate, analyzeRequestManifest } from "@homarr/custom-widgets/workbench";
-import type { CustomWidgetFormValues, EditorDiagnostic } from "@homarr/custom-widgets/workbench";
-
-import { createCustomWidgetCompletions, getInvalidCustomWidgetSections } from "./_custom-widget-form-analysis";
-import { buildDefinition, isRecord, parseJson } from "./_custom-widget-form-utils";
-import { useDeferredCustomWidgetFormDocumentValues } from "./_custom-widget-form-state";
-
-const emptyPreviewValidationIssues: Array<{ path?: string; message: string }> = [];
-const emptyCandidateIssues: Array<{ path: PropertyKey[] }> = [];
-
-function normalizeEditorDiagnostics(
-  section: "requests" | "template",
-  diagnostics: readonly EditorDiagnostic[],
-): CustomWidgetAiDiagnostic[] {
-  return diagnostics.map((diagnostic) => ({
-    section,
-    severity: diagnostic.severity,
-    code: diagnostic.code,
-    line: diagnostic.line,
-    column: diagnostic.column,
-    message: diagnostic.value,
-  }));
-}
-
-function createAiDiagnostics(
-  candidate: ReturnType<typeof buildDefinition>,
-  requestDiagnostics: readonly EditorDiagnostic[],
-  templateDiagnostics: readonly EditorDiagnostic[],
-) {
-  const editorDiagnostics = [
-    ...normalizeEditorDiagnostics("requests", requestDiagnostics),
-    ...normalizeEditorDiagnostics("template", templateDiagnostics),
-  ];
-  if (candidate.success) return editorDiagnostics;
-  return [
-    ...candidate.error.issues.map((issue) => ({
-      section: String(issue.path[0] ?? "definition"),
-      severity: "error" as const,
-      path: issue.path.map(String).join(".") || undefined,
-      message: issue.message,
-    })),
-    ...editorDiagnostics,
-  ];
-}
-
-export function analyzeCustomWidgetAiDiagnostics(values: CustomWidgetFormValues): CustomWidgetAiDiagnostic[] {
-  const parsedRequests = parseJson(values.requests);
-  const requestIds = isRecord(parsedRequests) ? Object.keys(parsedRequests) : [];
-  return createAiDiagnostics(
-    buildDefinition(values),
-    analyzeRequestManifest(values.requests),
-    analyzeJsxTemplate(values.template, { requestIds }),
-  );
-}
-
-export function useCustomWidgetFormAnalysis(values: CustomWidgetFormValues) {
-  const analysisValues = useDeferredValue(values);
-  const candidate = useMemo(() => buildDefinition(analysisValues), [analysisValues]);
-  const parsedOptions = useMemo(
-    () => customWidgetOptionsSchema.safeParse(parseJson(analysisValues.options)),
-    [analysisValues.options],
-  );
-  const requestIds = useMemo(() => {
-    const parsedRequests = parseJson(analysisValues.requests);
-    return isRecord(parsedRequests) ? Object.keys(parsedRequests) : [];
-  }, [analysisValues.requests]);
-  const requestIdsSignature = requestIds.join("\0");
-  const jsxCompletions = useMemo(
-    () =>
-      createCustomWidgetCompletions(
-        { options: analysisValues.options, sources: analysisValues.sources },
-        requestIdsSignature ? requestIdsSignature.split("\0") : [],
-      ),
-    [analysisValues.options, analysisValues.sources, requestIdsSignature],
-  );
-  const templateDiagnostics = useMemo(
-    () => analyzeJsxTemplate(analysisValues.template, { requestIds }),
-    [analysisValues.template, requestIds],
-  );
-  const requestDiagnostics = useMemo(() => analyzeRequestManifest(analysisValues.requests), [analysisValues.requests]);
-  const hasDiagnostics = [...templateDiagnostics, ...requestDiagnostics].some((entry) => entry.severity === "error");
-  const candidateIssues = candidate.success ? emptyCandidateIssues : candidate.error.issues;
-  const invalidSections = useMemo(
-    () => getInvalidCustomWidgetSections(candidateIssues, requestDiagnostics, templateDiagnostics),
-    [candidateIssues, requestDiagnostics, templateDiagnostics],
-  );
-  const previewCandidate = useMemo(
-    () => (candidate.success ? candidate.data : null),
-    // The preview renderer consumes only these definition fields; other fields affect the validity boolean below.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [analysisValues.requests, analysisValues.template, candidate.success],
-  );
-  const previewValidationIssues = useMemo(
-    () =>
-      candidate.success
-        ? emptyPreviewValidationIssues
-        : candidate.error.issues.map((issue) => ({
-            path: issue.path.map(String).join(".") || undefined,
-            message: issue.message,
-          })),
-    [candidate],
-  );
-
-  return useMemo(
-    () => ({
-      candidate,
-      candidateValid: candidate.success,
-      parsedOptions,
-      jsxCompletions,
-      templateDiagnostics,
-      requestDiagnostics,
-      hasDiagnostics,
-      invalidSections,
-      previewCandidate,
-      previewValidationIssues,
-    }),
-    [
-      candidate,
-      hasDiagnostics,
-      invalidSections,
-      jsxCompletions,
-      parsedOptions,
-      previewCandidate,
-      previewValidationIssues,
-      requestDiagnostics,
-      templateDiagnostics,
-    ],
-  );
-}
-
-type CustomWidgetFormAnalysis = ReturnType<typeof useCustomWidgetFormAnalysis>;
-
-interface CustomWidgetFormAnalysisStore {
-  getAnalysis(): CustomWidgetFormAnalysis;
-  setAnalysis(analysis: CustomWidgetFormAnalysis): void;
-  subscribe(listener: () => void): () => void;
-}
-
-function createCustomWidgetFormAnalysisStore(initialAnalysis: CustomWidgetFormAnalysis): CustomWidgetFormAnalysisStore {
-  let analysis = initialAnalysis;
-  const listeners = new Set<() => void>();
-  return {
-    getAnalysis: () => analysis,
-    setAnalysis: (nextAnalysis) => {
-      if (Object.is(analysis, nextAnalysis)) return;
-      analysis = nextAnalysis;
-      listeners.forEach((listener) => listener());
-    },
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-  };
-}
-
-const CustomWidgetFormAnalysisContext = createContext<CustomWidgetFormAnalysisStore | null>(null);
-
-export function CustomWidgetFormAnalysisProvider({ children }: { children: ReactNode }) {
-  const values = useDeferredCustomWidgetFormDocumentValues();
-  const analysis = useCustomWidgetFormAnalysis(values);
-  const [store] = useState(() => createCustomWidgetFormAnalysisStore(analysis));
-  useLayoutEffect(() => store.setAnalysis(analysis), [analysis, store]);
-  return createElement(CustomWidgetFormAnalysisContext.Provider, { value: store }, children);
-}
-
-export function useCustomWidgetFormAnalysisField<Key extends keyof CustomWidgetFormAnalysis>(field: Key) {
-  const store = useContext(CustomWidgetFormAnalysisContext);
-  if (!store) throw new Error("Custom widget form analysis provider is missing");
-  const getSnapshot = useCallback(() => store.getAnalysis()[field], [field, store]);
-  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/new/page.tsx

@@ -23,7 +23,7 @@ export default async function NewCustomWidgetPage() {
         <Stack>
           <div>
             <Title>{t("page.create.title")}</Title>
-            <Text c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4))" size="sm" mt={4}>
+            <Text c="dimmed" size="sm" mt={4}>
               {t("page.create.subtitle")}
             </Text>
           </div>

apps/nextjs/src/app/[locale]/manage/custom-widgets/workshop/_workshop-browse.tsx

@@ -11,6 +11,7 @@ import { useWorkshopQuery } from "@homarr/workshop/backend";
 
 import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { NoResults } from "~/components/no-results";
+import { getWorkshopWebUrl } from "~/components/workshop/workshop-client";
 import { WorkshopAccountButton, useWorkshopSession } from "~/components/workshop/workshop-session";
 import { WorkshopSubmissionGrid } from "~/components/workshop/workshop-submission-grid";
 import { WorkshopVoteControl } from "~/components/workshop/workshop-vote-control";
@@ -22,10 +23,9 @@ interface WorkshopBrowseProps {
   search: string | undefined;
   sort: "top" | "newest";
   page: number;
-  workshopWebUrl: string;
 }
 
-export function WorkshopBrowse({ search, sort, page, workshopWebUrl }: WorkshopBrowseProps) {
+export function WorkshopBrowse({ search, sort, page }: WorkshopBrowseProps) {
   const t = useI18n("workshop");
   const tCommon = useI18n("common.action");
   const session = useWorkshopSession();
@@ -46,7 +46,7 @@ export function WorkshopBrowse({ search, sort, page, workshopWebUrl }: WorkshopB
           <WorkshopAccountButton session={session} />
           <Button
             component="a"
-            href={workshopWebUrl}
+            href={getWorkshopWebUrl()}
             target="_blank"
             rel="noopener noreferrer"
             variant="default"
@@ -100,7 +100,7 @@ export function WorkshopBrowse({ search, sort, page, workshopWebUrl }: WorkshopB
               <Tooltip label={t("openCommunity")}>
                 <ActionIcon
                   component="a"
-                  href={`${workshopWebUrl.replace(/\/+$/u, "")}/${encodeURIComponent(item.id)}`}
+                  href={getWorkshopWebUrl(item.id)}
                   target="_blank"
                   rel="noopener noreferrer"
                   variant="subtle"

apps/nextjs/src/app/[locale]/manage/custom-widgets/workshop/page.tsx

@@ -3,9 +3,6 @@ import { z } from "zod/v4";
 
 import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
-import { resolveHomarrUrlConfig } from "@homarr/workshop/schema";
-
-import { env } from "~/env";
 
 import { WorkshopBrowse } from "./_workshop-browse";
 
@@ -29,13 +26,6 @@ export default async function WorkshopBrowsePage(props: WorkshopBrowsePageProps)
   if (!session?.user.permissions.includes("admin")) redirect(session ? "/" : "/auth/login");
 
   const { search, sort, page } = searchParamsSchema.parse(await props.searchParams);
-  const { workshopWebUrl } = resolveHomarrUrlConfig({
-    homarrWebsiteUrl: env.HOMARR_WEBSITE_URL,
-    workshopApiUrl: env.WORKSHOP_API_URL,
-    workshopWebUrl: env.WORKSHOP_WEB_URL,
-  });
 
-  return (
-    <WorkshopBrowse search={search?.trim() || undefined} sort={sort} page={page} workshopWebUrl={workshopWebUrl} />
-  );
+  return <WorkshopBrowse search={search?.trim() || undefined} sort={sort} page={page} />;
 }

apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-/* eslint-disable react/no-unstable-nested-components -- Widget modules and definition-bound fallbacks are loaded dynamically. */
-
-import { use, useCallback, useState } from "react";
+import { use, useCallback, useId, useState } from "react";
 import { ActionIcon, Affix, Card } from "@mantine/core";
 import { IconDimensions, IconPencil, IconToggleLeft, IconToggleRight } from "@tabler/icons-react";
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
@@ -34,6 +32,7 @@ export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps
   const { openModal: openWidgetEditModal } = useModalAction(LazyWidgetEditModal);
   const { openModal: openPreviewDimensionsModal } = useModalAction(PreviewDimensionsModal);
   const { definition: currentDefinition, Component } = use(loadWidgetResources(kind));
+  const previewId = useId();
   const [editMode, setEditMode] = useState(false);
   const [isEditorLoading, setIsEditorLoading] = useState(false);
   const [dimensions, setDimensions] = useState<Dimensions>({
@@ -60,6 +59,7 @@ export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps
     preloadWidgetEditModal();
     try {
       const integrationData = hasIntegrationSupport ? await utils.integration.all.ensureData() : [];
+      const originalState = state;
       openWidgetEditModal(
         {
           kind,
@@ -68,12 +68,14 @@ export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps
           onSuccessfulEdit: (value) => {
             setState(value);
           },
+          onPreviewChange: setState,
+          onPreviewRestore: () => setState(originalState),
           integrationData: integrationData.filter((integration) =>
             (currentDefinition.supportedIntegrations ?? []).includes(integration.kind),
           ),
           integrationSupport: hasIntegrationSupport,
           settings,
-          previewDimensions: dimensions,
+          focusTargetId: previewId,
         },
         {
           title(translate) {
@@ -89,10 +91,10 @@ export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps
     } finally {
       setIsEditorLoading(false);
     }
-  }, [currentDefinition, dimensions, kind, openWidgetEditModal, settings, state, t, utils]);
+  }, [currentDefinition, kind, openWidgetEditModal, previewId, settings, state, t, utils]);
 
   const toggleEditMode = useCallback(() => {
-    setEditMode((currentEditMode) => !currentEditMode);
+    setEditMode((editMode) => !editMode);
     showSuccessNotification({
       message: editMode ? t("widgetPreview.toggle.disabled") : t("widgetPreview.toggle.enabled"),
     });
@@ -113,7 +115,7 @@ export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps
 
   return (
     <>
-      <Card w={dimensions.width} h={dimensions.height} p={dimensions.height >= 96 ? undefined : 4}>
+      <Card id={previewId} w={dimensions.width} h={dimensions.height} p={dimensions.height >= 96 ? undefined : 4}>
         <QueryErrorResetBoundary>
           {({ reset }) => (
             <ErrorBoundary

apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx

@@ -1,14 +1,8 @@
 import { Suspense } from "react";
-import { notFound, redirect } from "next/navigation";
+import { notFound } from "next/navigation";
 import { Center, Loader } from "@mantine/core";
 
-import { getHomeBoardAsync } from "@homarr/api/board-server";
-import { IntegrationProvider } from "@homarr/auth/client";
-import { auth } from "@homarr/auth/next";
-import { getIntegrationsWithPermissionsAsync } from "@homarr/auth/server";
-import { BoardPreviewProvider } from "@homarr/boards/context";
 import type { WidgetKind } from "@homarr/definitions";
-import { ModalProvider } from "@homarr/modals";
 import { widgetKinds } from "@homarr/widgets/manifest";
 
 import { WidgetPreviewPageContent } from "./_content";
@@ -22,24 +16,12 @@ export default async function WidgetPreview(props: Props) {
   if (!widgetKinds.includes(kind as WidgetKind)) {
     notFound();
   }
-  const session = await auth();
-  if (!session) {
-    redirect(`/auth/login?callbackUrl=${encodeURIComponent(`/widgets/${kind}`)}`);
-  }
-
-  const [integrations, board] = await Promise.all([getIntegrationsWithPermissionsAsync(session), getHomeBoardAsync()]);
 
   return (
-    <IntegrationProvider integrations={integrations}>
-      <BoardPreviewProvider board={board}>
-        <ModalProvider>
-          <Center h="100vh">
-            <Suspense fallback={<Loader size="sm" />}>
-              <WidgetPreviewPageContent key={kind} kind={kind as WidgetKind} />
-            </Suspense>
-          </Center>
-        </ModalProvider>
-      </BoardPreviewProvider>
-    </IntegrationProvider>
+    <Center h="100vh">
+      <Suspense fallback={<Loader size="sm" />}>
+        <WidgetPreviewPageContent key={kind} kind={kind as WidgetKind} />
+      </Suspense>
+    </Center>
   );
 }

apps/nextjs/src/components/assistant/assistant-panel.module.css

@@ -184,6 +184,10 @@
   min-width: 0;
 }
 
+.widgetPanel[data-editing] .panelActions {
+  padding-inline-end: 2.75rem;
+}
+
 .panelHeader {
   min-width: 0;
   min-height: 3.75rem;

apps/nextjs/src/components/assistant/assistant-provider.tsx

@@ -32,7 +32,7 @@ import { showErrorNotification, showWarningNotification } from "@homarr/notifica
 import { closeSpotlight } from "@homarr/spotlight/store";
 import { useI18n } from "@homarr/translation/client";
 import { openMediaRequestSearch, openSpotlight, useRegisterSpotlightContextResults } from "@homarr/spotlight";
-import { AssistantWidgetRendererProvider } from "@homarr/widgets/assistant/context";
+import { AssistantWidgetRendererProvider } from "@homarr/widgets";
 import { createWorkshopClient } from "~/components/workshop/workshop-client";
 
 import { AssistantContext, AssistantPreferencesContext, useAssistantPreferences } from "./assistant-context";

apps/nextjs/src/components/assistant/assistant-widget-tool.spec.ts

@@ -20,7 +20,6 @@ describe("getAssistantWidgetConfiguration", () => {
 
   test("preserves generated notebook content and fills its hidden defaults", () => {
     const result = getAssistantWidgetConfiguration(
-      widgetImports.notebook.definition,
       {
         boardId: "board-1",
         boardName: "Home",
@@ -42,7 +41,6 @@ describe("getAssistantWidgetConfiguration", () => {
 
   test("keeps only accessible, compatible integrations and respects the widget maximum", () => {
     const result = getAssistantWidgetConfiguration(
-      widgetImports.audioStats.definition,
       {
         boardId: "board-1",
         boardName: "Home",
@@ -90,13 +88,11 @@ describe("getAssistantWidgetConfiguration", () => {
 
   test("treats integration-backed widgets as required unless explicitly optional", () => {
     const mediaServer = getAssistantWidgetConfiguration(
-      widgetImports.mediaServer.definition,
       { boardId: "board-1", boardName: "Home", kind: "mediaServer", summary: "Show Plex streams" },
       settings,
       [],
     );
     const calendar = getAssistantWidgetConfiguration(
-      widgetImports.calendar.definition,
       { boardId: "board-1", boardName: "Home", kind: "calendar", summary: "Show releases" },
       settings,
       [],

apps/nextjs/src/components/assistant/assistant-widget-tool.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { Suspense, use, useMemo } from "react";
+import { useMemo } from "react";
 import type { ToolCallMessagePartProps } from "@assistant-ui/react";
 import { Alert, Box, Button, Group, Skeleton, Stack, Text, ThemeIcon } from "@mantine/core";
 import { IconAlertTriangle, IconCheck, IconSettings } from "@tabler/icons-react";
-import { ErrorBoundary } from "react-error-boundary";
-import type { FallbackProps } from "react-error-boundary";
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
@@ -15,8 +13,7 @@ import { useModalAction } from "@homarr/modals";
 import type { SettingsContextProps } from "@homarr/settings/creator";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
-import type { WidgetDefinition } from "@homarr/widgets/definition";
-import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
+import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import type { IntegrationSelectOption } from "@homarr/widgets/widget-integration-select";
 import { WidgetEditModal } from "@homarr/widgets/modals";
 
@@ -32,11 +29,11 @@ interface AssistantIntegration extends IntegrationSelectOption {
 }
 
 export const getAssistantWidgetConfiguration = (
-  definition: WidgetDefinition,
   args: ConfigureWidgetArgs,
   settings: Pick<SettingsContextProps, "enableStatusByDefault" | "forceDisableStatus">,
   integrations: AssistantIntegration[],
 ) => {
+  const definition = widgetImports[args.kind].definition;
   const integrationSupport = "supportedIntegrations" in definition;
   const supportedIntegrations = integrationSupport
     ? (definition.supportedIntegrations as readonly IntegrationKind[])
@@ -57,91 +54,35 @@ export const getAssistantWidgetConfiguration = (
       integrationSupport && (!("integrationsRequired" in definition) || definition.integrationsRequired !== false),
     value: {
       advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
-      options: reduceWidgetOptionsWithDefinition(definition, settings, args.options),
+      options: reduceWidgetOptionsWithDefaultValues(args.kind, settings, args.options),
       integrationIds,
     },
   };
 };
 
-type AssistantConfigureWidgetToolProps = ToolCallMessagePartProps<ConfigureWidgetArgs, ConfigureWidgetResult>;
-
-export const AssistantConfigureWidgetTool = (props: AssistantConfigureWidgetToolProps) => {
-  const hasCompleteArguments = hasCompleteAssistantToolArguments(props.status);
-  const completeArgs =
-    props.result === undefined && !hasFailedAssistantToolArguments(props.status) && hasCompleteArguments
-      ? props.args
-      : undefined;
-
-  if (!completeArgs) return <AssistantConfigureWidgetToolContent {...props} definition={undefined} />;
-
-  return (
-    <ErrorBoundary FallbackComponent={AssistantWidgetDefinitionErrorFallback} resetKeys={[completeArgs.kind]}>
-      <Suspense fallback={<AssistantConfigureWidgetSkeleton />}>
-        <LoadedAssistantConfigureWidgetTool {...props} args={completeArgs} />
-      </Suspense>
-    </ErrorBoundary>
-  );
-};
-
-const AssistantWidgetDefinitionErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
-  const t = useI18n("assistant.configureWidget");
-  const actionT = useI18n("common.action");
-
-  return (
-    <Alert color="red" variant="light" title={t("definitionLoadErrorTitle")} icon={<IconAlertTriangle size={18} />}>
-      <Stack gap="sm">
-        <Text size="sm">{t("definitionLoadErrorDescription")}</Text>
-        <Button variant="light" color="red" size="compact-sm" w="fit-content" onClick={resetErrorBoundary}>
-          {actionT("tryAgain")}
-        </Button>
-      </Stack>
-    </Alert>
-  );
-};
-
-const LoadedAssistantConfigureWidgetTool = (
-  props: AssistantConfigureWidgetToolProps & { args: ConfigureWidgetArgs },
-) => {
-  const definition = use(loadWidgetDefinition(props.args.kind));
-  return <AssistantConfigureWidgetToolContent {...props} definition={definition} />;
-};
-
-const AssistantConfigureWidgetSkeleton = () => {
-  const t = useI18n("assistant.configureWidget");
-  return (
-    <Box className={classes.appTool} aria-label={t("preparing")}>
-      <Stack gap="sm">
-        <Skeleton height={18} width="45%" />
-        <Skeleton height={14} width="76%" />
-        <Skeleton height={38} />
-      </Stack>
-    </Box>
-  );
-};
-
-const AssistantConfigureWidgetToolContent = ({
+export const AssistantConfigureWidgetTool = ({
   args,
   result,
   addResult,
   status,
   toolCallId,
-  definition,
-}: AssistantConfigureWidgetToolProps & { definition: WidgetDefinition | undefined }) => {
+}: ToolCallMessagePartProps<ConfigureWidgetArgs, ConfigureWidgetResult>) => {
   const t = useI18n("assistant.configureWidget");
   const actionT = useI18n("common.action");
   const fullT = useI18n();
   const { data: session } = useSession();
   const settings = useSettings();
   const hasCompleteArguments = hasCompleteAssistantToolArguments(status);
+  const definition = args?.kind ? widgetImports[args.kind].definition : undefined;
   const needsIntegrations = definition !== undefined && "supportedIntegrations" in definition;
   const integrations = clientApi.integration.all.useQuery(undefined, {
     enabled: result === undefined && hasCompleteArguments && needsIntegrations,
     retry: false,
   });
   const configuration = useMemo(() => {
-    if (!args || !definition || !hasCompleteArguments || (needsIntegrations && !integrations.data)) return null;
-    return getAssistantWidgetConfiguration(definition, args, settings, integrations.data ?? []);
-  }, [args, definition, hasCompleteArguments, integrations.data, needsIntegrations, settings]);
+    if (!args || !hasCompleteArguments || (needsIntegrations && !integrations.data)) return null;
+    return getAssistantWidgetConfiguration(args, settings, integrations.data ?? []);
+  }, [args, hasCompleteArguments, integrations.data, needsIntegrations, settings]);
   const missingRequiredIntegration =
     configuration?.integrationsRequired === true && configuration.value.integrationIds.length === 0;
   const { openModal: openWidgetModal } = useModalAction(WidgetEditModal);
@@ -193,7 +134,15 @@ const AssistantConfigureWidgetToolContent = ({
   }
 
   if (!hasCompleteArguments || !args || (needsIntegrations && integrations.isPending)) {
-    return <AssistantConfigureWidgetSkeleton />;
+    return (
+      <Box className={classes.appTool} aria-label={t("preparing")}>
+        <Stack gap="sm">
+          <Skeleton height={18} width="45%" />
+          <Skeleton height={14} width="76%" />
+          <Skeleton height={38} />
+        </Stack>
+      </Box>
+    );
   }
 
   if (integrations.isError) {
@@ -209,7 +158,7 @@ const AssistantConfigureWidgetToolContent = ({
     );
   }
 
-  if (!configuration || !definition) return null;
+  if (!configuration) return null;
 
   const openConfigurationModal = (
     value = configuration.value,
@@ -218,7 +167,7 @@ const AssistantConfigureWidgetToolContent = ({
     openWidgetModal(
       {
         kind: args.kind,
-        definition,
+        definition: widgetImports[args.kind].definition,
         value,
         integrationData,
         integrationSupport: configuration.integrationSupport,
@@ -291,7 +240,7 @@ const AssistantConfigureWidgetToolContent = ({
     );
   }
 
-  const WidgetIcon = definition.icon;
+  const WidgetIcon = widgetImports[args.kind].definition.icon;
   return (
     <Box className={classes.appTool}>
       <Group gap="sm" align="flex-start" wrap="nowrap">

apps/nextjs/src/components/board/items/item-actions.tsx

@@ -30,6 +30,13 @@ interface UpdateItemIntegrations {
   newIntegrations: string[];
 }
 
+interface UpdateItemSettings {
+  itemId: string;
+  options: Record<string, unknown>;
+  advancedOptions: BoardItemAdvancedOptions;
+  integrationIds: string[];
+}
+
 export const useItemActions = () => {
   const { updateBoard } = useUpdateBoard();
   const currentLayoutId = useCurrentLayout();
@@ -77,6 +84,20 @@ export const useItemActions = () => {
     [updateBoard],
   );
 
+  const updateItemSettings = useCallback(
+    ({ itemId, options, advancedOptions, integrationIds }: UpdateItemSettings) => {
+      updateBoard((previous) => ({
+        ...previous,
+        items: previous.items.map((item) => {
+          if (item.id !== itemId || !("integrationIds" in item)) return item;
+
+          return { ...item, options, advancedOptions, integrationIds };
+        }),
+      }));
+    },
+    [updateBoard],
+  );
+
   const moveAndResizeItem = useCallback(
     (input: Omit<MoveAndResizeItemInput, "layoutId">) => {
       updateBoard(moveAndResizeItemCallback({ ...input, layoutId: currentLayoutId }));
@@ -105,6 +126,7 @@ export const useItemActions = () => {
     updateItemOptions,
     updateItemAdvancedOptions,
     updateItemIntegrations,
+    updateItemSettings,
     duplicateItem,
     createItem,
   };

apps/nextjs/src/components/board/items/item-content.module.css

@@ -1,22 +1,17 @@
-.refreshIndicator {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  z-index: 3;
-  display: grid;
-  place-items: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--mantine-color-body) 78%, transparent);
-  pointer-events: none;
+.badge {
+  @mixin dark {
+    --background-color: rgb(from var(--mantine-color-dark-6) r g b / var(--opacity));
+    --border-color: rgb(from var(--mantine-color-dark-4) r g b / var(--opacity));
+  }
+  @mixin light {
+    --background-color: rgb(from var(--mantine-color-white) r g b / var(--opacity));
+    --border-color: rgb(from var(--mantine-color-gray-3) r g b / var(--opacity));
+  }
+  background-color: var(--background-color) !important;
+  border-color: var(--border-color) !important;
 }
 
 .settingsButton {
-  position: absolute;
-  top: -34px;
-  right: 14px;
-  z-index: 201;
   opacity: 0;
   pointer-events: none;
   transition: opacity 120ms ease;
@@ -63,11 +58,3 @@
     transition: none;
   }
 }
-
-@media (max-width: 768px) {
-  .settingsButton {
-    right: 4px;
-    opacity: 1;
-    pointer-events: auto;
-  }
-}

apps/nextjs/src/components/board/items/item-content.tsx

@@ -1,10 +1,11 @@
-import type { ComponentType, CSSProperties, MutableRefObject, PropsWithChildren } from "react";
+import type { ComponentType, CSSProperties, MutableRefObject } from "react";
 import { memo, Suspense, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import dynamic from "next/dynamic";
-import { Box, Button, Center, Loader, Portal } from "@mantine/core";
+import type { CardProps } from "@mantine/core";
+import { Badge, Box, Button, Card, Center, Loader, Portal } from "@mantine/core";
 import { useElementSize, useIsomorphicEffect } from "@mantine/hooks";
-import { QueryErrorResetBoundary, useIsFetching, useQueryClient } from "@tanstack/react-query";
+import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
 import type { FallbackProps } from "react-error-boundary";
@@ -19,16 +20,13 @@ import { WidgetError } from "@homarr/widgets/errors";
 import {
   createWidgetRuntimeState,
   getWidgetQueryKeys,
-  getWidgetRuntimeQueries,
   supportsAdvancedFocus as definitionSupportsAdvancedFocus,
 } from "@homarr/widgets/definition";
 import type { WidgetComponentProps, WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
 import { loadWidgetResources, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
-import { WidgetCardShell, WidgetTitleBadge } from "@homarr/widgets/widget-card-shell";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { getLogicalTrackSize } from "~/components/board/layout";
-import { useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
 import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
 import { useAdvancedFocus } from "../advanced-focus/context";
 import { startAdvancedFocusEntrance } from "../advanced-focus/entrance";
@@ -36,11 +34,11 @@ import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "../advanced
 import { AdvancedFocusManualSurface } from "../advanced-focus/manual-surface";
 import { redirectShiftWheel } from "../advanced-focus/wheel";
 import { useBoardGridPortalHost } from "../sections/grid/grid-portal-host";
+import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
 import { WidgetContextMenu } from "./widget-context-menu";
 import { removeWidgetDataQueries } from "./widget-query-recovery";
-import { matchesWidgetItemQuery } from "./widget-query-scope";
 
 const BoardItemMenu = dynamic(() => import("./item-menu").then((module) => module.BoardItemMenu), {
   ssr: false,
@@ -50,28 +48,47 @@ interface BoardItemContentProps {
   item: SectionItem;
 }
 
-type BoardItemCardProps = PropsWithChildren<{
+const getOverflowFromKind = (kind: SectionItem["kind"], hasCustomCssClasses: boolean) => {
+  if (kind === "systemResources") return { overflowX: "visible", overflowY: "visible" } as const;
+  if (kind === "iframe" || kind === "assistant") return { overflowX: "hidden", overflowY: "hidden" } as const;
+  if (hasCustomCssClasses) return {};
+  return { overflowX: "hidden", overflowY: "auto" } as const;
+};
+
+type BoardItemCardProps = CardProps & {
   item: SectionItem;
   innerRef: (element: HTMLDivElement | null) => void;
-}>;
+};
 
-const BoardItemCard = ({ item, innerRef, children }: BoardItemCardProps) => {
+const BoardItemCard = ({ item, innerRef, children, ...cardProps }: BoardItemCardProps) => {
   const board = useRequiredBoard();
 
   return (
-    <WidgetCardShell
-      innerRef={innerRef}
-      kind={item.kind}
-      advancedOptions={item.advancedOptions}
-      opacity={board.opacity / 100}
+    <Card
+      {...cardProps}
+      ref={innerRef}
       w="100%"
       h="100%"
       data-grid-item-content
+      className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "board-grid-item-content",
+        item.advancedOptions.customCssClasses.join(" "),
+      )}
       radius={board.itemRadius}
+      styles={{
+        root: {
+          "--opacity": board.opacity / 100,
+          containerType: "size",
+          ...getOverflowFromKind(item.kind, item.advancedOptions.customCssClasses.length > 0),
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+        },
+      }}
       p={0}
     >
       {children}
-    </WidgetCardShell>
+    </Card>
   );
 };
 
@@ -150,7 +167,6 @@ const LoadedBoardItemContent = ({
   const cardRef = useRef<HTMLDivElement>(null);
   const previewEntranceFrameRef = useRef<number | null>(null);
   const board = useRequiredBoard();
-  const boardCanvasScale = useBoardCanvasScale();
   const t = useI18n();
   const [isEditMode] = useEditMode();
   const settings = useSettings();
@@ -158,34 +174,12 @@ const LoadedBoardItemContent = ({
     () => ({ ...item, options: reduceWidgetOptionsWithDefinition(definition, settings, item.options) }),
     [definition, item, settings],
   );
-  const widgetQueryKeys = useMemo(() => getWidgetQueryKeys(definition, item.kind), [definition, item.kind]);
-  const isWidgetRefreshing =
-    useIsFetching({
-      predicate: (query) =>
-        query.state.data !== undefined &&
-        matchesWidgetItemQuery(
-          query.queryKey,
-          widgetQueryKeys,
-          {
-            itemId: item.id,
-            boardId: board.id,
-            integrationIds: item.integrationIds,
-            options: menuItem.options,
-            runtimeQueries: getWidgetRuntimeQueries(widgetRuntimeRef),
-          },
-          definition.queryMatcher,
-        ),
-    }) > 0;
   const [manualSurface, setManualSurface] = useState<HTMLDivElement | null>(null);
   const [surfacePortalTarget, setSurfacePortalTarget] = useState<HTMLDivElement | null>(null);
   const { active, viewportSize, open, close, dismiss, hover, leave } = useAdvancedFocus();
   const { width: viewportWidth, height: viewportHeight } = viewportSize;
   const supportsAdvancedFocus = definitionSupportsAdvancedFocus(definition);
   const widgetName = getWidgetName(item.kind, t);
-  const previewDimensions = useMemo(
-    () => ({ width, height, scale: boardCanvasScale }),
-    [boardCanvasScale, height, width],
-  );
   const advancedViewLabel = t("item.advancedFocus.label", { widget: widgetName });
   const advancedViewId = `advanced-focus-${item.id}`;
   const activeFocus = supportsAdvancedFocus && active?.itemId === item.id ? active : null;
@@ -297,24 +291,34 @@ const LoadedBoardItemContent = ({
       : undefined;
 
   const widgetCard = (
-    <WidgetCardShell
-      innerRef={cardRef}
-      kind={item.kind}
-      advancedOptions={item.advancedOptions}
-      opacity={isAdvanced ? 0.98 : board.opacity / 100}
+    <Card
+      ref={cardRef}
       id={isPreview ? advancedViewId : undefined}
       role={isPreview ? "region" : undefined}
       aria-label={isPreview ? advancedViewLabel : undefined}
       data-advanced-focus-surface={isPreview || undefined}
+      data-advanced-focus-item-id={isAdvanced ? item.id : undefined}
       data-grid-item-content
       radius={board.itemRadius}
       p={isAdvanced ? undefined : 0}
       h={isManual ? "100%" : isAdvanced ? undefined : "100%"}
       w={isManual ? "100%" : isAdvanced ? undefined : "100%"}
       className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "board-grid-item-content",
         isPreview && advancedFocusClasses.surface,
         activeFocus?.phase === "closing" && isPreview && advancedFocusClasses.surfaceClosing,
+        item.advancedOptions.customCssClasses.join(" "),
       )}
+      styles={{
+        root: {
+          "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
+          containerType: "size",
+          ...getOverflowFromKind(item.kind, item.advancedOptions.customCssClasses.length > 0),
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+        },
+      }}
       style={previewStyle}
     >
       <Box ref={contentRef} w="100%" h="100%" mih={0}>
@@ -342,21 +346,15 @@ const LoadedBoardItemContent = ({
           />
         </ErrorBoundary>
       </Box>
-      {isWidgetRefreshing && (
-        <Box className={itemContentClasses.refreshIndicator} data-widget-refreshing aria-hidden>
-          <Loader size="xs" />
-        </Box>
-      )}
-    </WidgetCardShell>
+    </Card>
   );
 
   return (
     <>
-      {isEditMode && <BoardItemMenu item={menuItem} definition={definition} previewDimensions={previewDimensions} />}
+      {isEditMode && <BoardItemMenu item={menuItem} definition={definition} />}
       <WidgetContextMenu
         item={item}
         definition={definition}
-        previewDimensions={previewDimensions}
         widgetStateRef={widgetStateRef}
         widgetRuntimeRef={widgetRuntimeRef}
         sourceRef={sourceRef}
@@ -421,12 +419,25 @@ const LoadedBoardItemContent = ({
           )}
         </Box>
       </WidgetContextMenu>
-      {!isAdvanced && (
-        <WidgetTitleBadge
-          advancedOptions={item.advancedOptions}
-          opacity={board.opacity / 100}
+      {!isAdvanced && item.advancedOptions.title?.trim() && (
+        <Badge
+          pos="absolute"
+          style={{ zIndex: "var(--mantine-z-index-app)" }}
+          top={2}
+          left={16}
+          size="xs"
           radius={board.itemRadius}
-        />
+          styles={{
+            root: {
+              "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+              "--opacity": board.opacity / 100,
+            },
+          }}
+          className={itemContentClasses.badge}
+          c="var(--mantine-color-text)"
+        >
+          {item.advancedOptions.title}
+        </Badge>
       )}
     </>
   );

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -3,6 +3,7 @@ import { ActionIcon, Menu } from "@mantine/core";
 import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil } from "@tabler/icons-react";
 
 import { useSession } from "@homarr/auth/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { getWidgetName } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
@@ -21,7 +22,6 @@ import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-
 interface BoardItemMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
   resetErrorBoundary?: () => void;
 }
 
@@ -32,8 +32,9 @@ export const BoardItemMenu = (props: BoardItemMenuProps) => {
 
   return <BoardItemMenuInner {...props} />;
 };
-const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBoundary }: BoardItemMenuProps) => {
+const BoardItemMenuInner = ({ item, definition, resetErrorBoundary }: BoardItemMenuProps) => {
   const { data: session } = useSession();
+  const board = useRequiredBoard();
   const canDuplicate = item.kind !== "customApi" || (session?.user.permissions.includes("admin") ?? false);
   const refResetErrorBoundaryOnNextRender = useRef(false);
   const tItem = useI18n("item");
@@ -41,8 +42,7 @@ const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBou
   const { openModal } = useModalAction(LazyWidgetEditModal);
   const openMoveModal = useOpenItemMoveModal();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
-    useItemActions();
+  const { updateItemSettings, duplicateItem, removeItem } = useItemActions();
   const { integrations: integrationData, section } = useSectionContext();
   const settings = useSettings();
   const label = item.advancedOptions.title?.trim() || getWidgetName(item.kind, t);
@@ -56,6 +56,11 @@ const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBou
   }, [item, resetErrorBoundary]);
 
   const openEditModal = () => {
+    const originalSettings = {
+      options: item.options,
+      advancedOptions: item.advancedOptions,
+      integrationIds: item.integrationIds,
+    };
     openModal(
       {
         kind: item.kind,
@@ -65,19 +70,14 @@ const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBou
           options: item.options,
           integrationIds: item.integrationIds,
         },
-        onSuccessfulEdit: ({ options, integrationIds, advancedOptions }) => {
-          updateItemOptions({
-            itemId: item.id,
-            newOptions: options,
-          });
-          updateItemAdvancedOptions({
-            itemId: item.id,
-            newAdvancedOptions: advancedOptions,
-          });
-          updateItemIntegrations({
-            itemId: item.id,
-            newIntegrations: integrationIds,
-          });
+        onPreviewChange: (value) => {
+          updateItemSettings({ itemId: item.id, ...value });
+        },
+        onPreviewRestore: () => {
+          updateItemSettings({ itemId: item.id, ...originalSettings });
+        },
+        onSuccessfulEdit: (value) => {
+          updateItemSettings({ itemId: item.id, ...value });
           refResetErrorBoundaryOnNextRender.current = true;
         },
         onIntegrationSaved: resetErrorBoundary,
@@ -90,7 +90,7 @@ const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBou
         integrationSupport: "supportedIntegrations" in definition,
         settings,
         itemId: item.id,
-        previewDimensions,
+        boardId: board.id,
         appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined,
       },
       {
@@ -108,6 +108,10 @@ const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBou
           variant="default"
           size={24}
           radius="sm"
+          pos="absolute"
+          top={4}
+          right={4}
+          style={{ zIndex: 30 }}
           className={itemContentClasses.settingsButton}
           data-menu-open={isMenuOpen || undefined}
           data-board-widget-settings

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

@@ -30,7 +30,6 @@ import {
   getIntegrationName,
   getWidgetName,
   getRootSectionLane,
-  widgetDefaultSizes,
   widgetIntegrationSupport,
   widgetKinds,
   widgetKindsWithOptionalIntegrations,
@@ -48,7 +47,6 @@ import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr
 import type { EmptySection } from "~/app/[locale]/boards/_types";
 import { useSetupAnalytics } from "~/components/create/setup-analytics";
 import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
-import { getSectionGridColumnCount } from "../sections/grid/section-grid-placements";
 import { useItemActions } from "./item-actions";
 import type { WidgetConnectionStatus } from "./item-select-data";
 import {
@@ -78,8 +76,6 @@ export interface WidgetItemData {
 }
 
 const selectGridCols = { base: 1, xs: 2, sm: 2, md: 3, lg: 4 };
-const defaultWidgetSize = { width: 1, height: 1 };
-const maximumWidgetHeight = 64;
 
 const ItemSelectModalContent = ({
   actions,
@@ -128,13 +124,6 @@ const ItemSelectModalContent = ({
   const effectiveSectionId = placementOptions.some(({ value }) => value === targetSectionId)
     ? targetSectionId
     : (placementOptions[0]?.value ?? null);
-  const maximumWidgetSize = useMemo(() => {
-    if (!effectiveSectionId) return defaultWidgetSize;
-    return {
-      width: Math.max(1, getSectionGridColumnCount(board, currentLayoutId, effectiveSectionId) ?? 1),
-      height: maximumWidgetHeight,
-    };
-  }, [board, currentLayoutId, effectiveSectionId]);
 
   const [loadingSelection, setLoadingSelection] = useState<string | null>(null);
   const selectionLock = useRef(false);
@@ -257,7 +246,6 @@ const ItemSelectModalContent = ({
     try {
       const definition = await loadWidgetDefinition("customApi");
       const itemId = createId();
-      const initialSize = widgetDefaultSizes.customApi ?? defaultWidgetSize;
       const defaultOptions = reduceWidgetOptionsWithDefinition(definition, settings);
       const options = {
         ...defaultOptions,
@@ -275,7 +263,7 @@ const ItemSelectModalContent = ({
             options,
             integrationIds: [],
           },
-          onSuccessfulEdit: ({ options: configuredOptions, advancedOptions }, selectedSize) => {
+          onSuccessfulEdit: ({ options: configuredOptions, advancedOptions }) => {
             const updatedBoard = createItem({
               id: itemId,
               kind: "customApi",
@@ -283,14 +271,13 @@ const ItemSelectModalContent = ({
               options: configuredOptions,
               targetSectionId: effectiveSectionId ?? undefined,
               advancedOptions,
-              size: selectedSize ?? initialSize,
             });
             notifyCreated(updatedBoard, itemId, customWidgetDefinition.name);
           },
           integrationData: [],
           integrationSupport: false,
           settings,
-          previewResize: { initialSize, maximumSize: maximumWidgetSize },
+          boardId: board.id,
         },
         {
           title: (titleT) => `${titleT("item.edit.title")} - ${customWidgetDefinition.name}`,
@@ -325,7 +312,6 @@ const ItemSelectModalContent = ({
       const matchingIntegrationCount = Math.min(matchingIntegrations.length, maxIntegrations);
       const itemId = createId();
       const defaultOptions = reduceWidgetOptionsWithDefinition(definition, settings);
-      const initialSize = widgetDefaultSizes[kind] ?? defaultWidgetSize;
       const openEditor = (
         availableIntegrations: { id: string; name: string; url: string; kind: IntegrationKind }[],
       ) => {
@@ -341,7 +327,7 @@ const ItemSelectModalContent = ({
               options: defaultOptions,
               integrationIds: selectedIntegrationIds,
             },
-            onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }, selectedSize) => {
+            onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => {
               const updatedBoard = createItem({
                 id: itemId,
                 kind,
@@ -349,7 +335,6 @@ const ItemSelectModalContent = ({
                 integrationIds: newIntegrationIds,
                 targetSectionId: effectiveSectionId ?? undefined,
                 advancedOptions,
-                size: selectedSize ?? initialSize,
               });
               if (!notifyCreated(updatedBoard, itemId, getWidgetName(kind, t))) return;
               trackSetup("widget-completed", {
@@ -362,7 +347,7 @@ const ItemSelectModalContent = ({
             integrationData: availableIntegrations,
             integrationSupport: hasIntegrationSupport,
             settings,
-            previewResize: { initialSize, maximumSize: maximumWidgetSize },
+            boardId: board.id,
           },
           {
             title: (titleT) => `${titleT("item.edit.title")} - ${getWidgetName(kind, titleT)}`,

apps/nextjs/src/components/board/items/lazy-widget-edit-modal.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
 import { Suspense, use, useCallback, useMemo, useState } from "react";
 import { Center, Loader } from "@mantine/core";
 import { ErrorBoundary } from "react-error-boundary";
@@ -8,49 +7,16 @@ import type { FallbackProps } from "react-error-boundary";
 
 import { clientApi } from "@homarr/api/client";
 import type { WidgetKind } from "@homarr/definitions";
-import { widgetDefaultSizes } from "@homarr/definitions";
-import { createModal, useModalAction } from "@homarr/modals";
+import { createModal, modalSizeForm, useModalAction } from "@homarr/modals";
 import { WidgetError } from "@homarr/widgets/errors";
 import type * as WidgetModalsModule from "@homarr/widgets/modals";
-import type { WidgetEditModalProps, WidgetEditModalSize } from "@homarr/widgets/modals";
-import { loadWidgetComponent } from "@homarr/widgets/manifest";
+import type { WidgetEditModalProps } from "@homarr/widgets/modals";
 import type { IntegrationSelectOption } from "@homarr/widgets/widget-integration-select";
 
-import { AssistantContext, useOptionalHomarrAssistant } from "~/components/assistant/assistant-context";
-import { getLogicalTrackSize } from "~/components/board/layout";
 import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
 import type * as IntegrationEditFormModule from "~/components/integration/embedded-integration-edit-form";
 import type { EmbeddedIntegrationEditFormProps } from "~/components/integration/embedded-integration-edit-form";
 
-const defaultWidgetSize = { width: 1, height: 1 };
-const ignoreAssistantAction = () => undefined;
-const ignoreAssistantPrompt = () => false;
-const ignoreAssistantRefresh = () => Promise.resolve();
-const getPreviewDimensions = (size: WidgetEditModalSize) => ({
-  width: getLogicalTrackSize(size.width),
-  height: getLogicalTrackSize(size.height),
-});
-
-const PreviewRuntimeWrapper = ({ children }: PropsWithChildren) => {
-  const assistant = useOptionalHomarrAssistant();
-  const previewAssistant = useMemo(() => {
-    if (!assistant) return null;
-    return {
-      ...assistant,
-      open: ignoreAssistantAction,
-      close: ignoreAssistantAction,
-      toggle: ignoreAssistantAction,
-      sendPrompt: ignoreAssistantPrompt,
-      refreshCurrentView: ignoreAssistantRefresh,
-      setWidgetVisible: ignoreAssistantAction,
-      activateWidget: ignoreAssistantAction,
-    };
-  }, [assistant]);
-
-  if (!previewAssistant) return children;
-  return <AssistantContext.Provider value={previewAssistant}>{children}</AssistantContext.Provider>;
-};
-
 let widgetEditModalPromise: Promise<typeof WidgetModalsModule> | undefined;
 
 export const loadWidgetEditModal = () => {
@@ -117,7 +83,6 @@ interface LazyWidgetEditModalContentProps {
 
 const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
   const { WidgetEditModal } = use(loadWidgetEditModal());
-  const { default: PreviewComponent } = use(loadWidgetComponent(props.innerProps.kind));
   const { openModal: openIntegrationModal } = useModalAction(IntegrationSelectModal);
   const Component = WidgetEditModal.component;
   const utils = clientApi.useUtils();
@@ -149,18 +114,6 @@ const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
     const additional = createdIntegrations.filter((c) => !existing.some((e) => e.id === c.id));
     return [...existing, ...additional];
   }, [props.innerProps.integrationData, createdIntegrations]);
-  const previewDimensions = useMemo(() => {
-    if (props.innerProps.previewDimensions) return props.innerProps.previewDimensions;
-    const size = widgetDefaultSizes[props.innerProps.kind] ?? defaultWidgetSize;
-    return {
-      width: getLogicalTrackSize(size.width),
-      height: getLogicalTrackSize(size.height),
-    };
-  }, [props.innerProps.kind, props.innerProps.previewDimensions]);
-  let previewResize = props.innerProps.previewResize;
-  if (previewResize) {
-    previewResize = { ...previewResize, getDimensions: getPreviewDimensions };
-  }
 
   return (
     <Component
@@ -169,10 +122,6 @@ const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
         ...props.innerProps,
         integrationData: combinedIntegrationData,
         integrationEditForm: LazyIntegrationEditForm,
-        previewComponent: PreviewComponent,
-        previewDimensions,
-        previewResize,
-        previewWrapper: PreviewRuntimeWrapper,
         onOpenNewIntegration: supportedKinds.length > 0 ? handleOpenNewIntegration : undefined,
       }}
     />
@@ -208,10 +157,8 @@ export const LazyWidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>
   defaultTitle(t) {
     return t("item.edit.title");
   },
-  size: "100rem",
-  transitionProps: {
-    transition: "pop",
-    duration: 180,
-  },
+  presentation: "inspector",
+  withOverlay: false,
+  size: modalSizeForm,
   closeOnClickOutside: false,
 });

apps/nextjs/src/components/board/items/widget-context-menu.tsx

@@ -35,7 +35,6 @@ import { matchesWidgetItemQuery } from "./widget-query-scope";
 interface WidgetContextMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
   widgetRuntimeRef: WidgetRuntimeRef;
   sourceRef: RefObject<HTMLElement | null>;
@@ -45,7 +44,6 @@ interface WidgetContextMenuProps {
 export const WidgetContextMenu = ({
   item,
   definition,
-  previewDimensions,
   widgetRuntimeRef,
   sourceRef,
   children,
@@ -60,7 +58,7 @@ export const WidgetContextMenu = ({
   const tCommon = useI18n("common.action");
   const settings = useSettings();
   const { openModal } = useModalAction(LazyWidgetEditModal);
-  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions();
+  const { updateItemSettings } = useItemActions();
   const hasSupportedIntegrations = (definition.supportedIntegrations?.length ?? 0) > 0;
   const { data: integrationData = [], isPending } = clientApi.integration.all.useQuery(undefined, {
     enabled: hasSupportedIntegrations,
@@ -156,6 +154,11 @@ export const WidgetContextMenu = ({
     }) ?? [];
 
   const openEditModal = useCallback(() => {
+    const originalSettings = {
+      options: item.options,
+      advancedOptions: item.advancedOptions,
+      integrationIds: item.integrationIds,
+    };
     openModal(
       {
         kind: item.kind,
@@ -165,10 +168,13 @@ export const WidgetContextMenu = ({
           options,
           integrationIds: item.integrationIds,
         },
+        onPreviewChange: (value) => {
+          updateItemSettings({ itemId: item.id, ...value });
+        },
+        onPreviewRestore: () => {
+          updateItemSettings({ itemId: item.id, ...originalSettings });
+        },
         onSuccessfulEdit: (editResult) => {
-          updateItemOptions({ itemId: item.id, newOptions: editResult.options });
-          updateItemAdvancedOptions({ itemId: item.id, newAdvancedOptions: editResult.advancedOptions });
-          updateItemIntegrations({ itemId: item.id, newIntegrations: editResult.integrationIds });
           persistBoard((previous) => ({
             ...previous,
             items: previous.items.map((boardItem) =>
@@ -193,7 +199,6 @@ export const WidgetContextMenu = ({
         settings,
         itemId: item.id,
         boardId: board.id,
-        previewDimensions,
         appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined,
       },
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -210,11 +215,8 @@ export const WidgetContextMenu = ({
     openModal,
     options,
     persistBoard,
-    previewDimensions,
     settings,
-    updateItemAdvancedOptions,
-    updateItemIntegrations,
-    updateItemOptions,
+    updateItemSettings,
   ]);
 
   const handleToggle = useCallback(

apps/nextjs/src/components/board/items/widget-hover-overlay.module.css

@@ -31,7 +31,7 @@
   align-items: center;
   gap: 8px;
   min-height: 28px;
-  padding: 4px 40px 4px 8px;
+  padding: 4px 8px;
   border: 1px solid var(--border-color);
   border-radius: var(--mantine-radius-md);
   background-color: var(--background-color);

apps/nextjs/src/components/board/layout/README.md

@@ -2,16 +2,17 @@
 
 The board uses fixed logical units:
 
-- one grid track has a `212 × 212` logical-pixel footprint;
-- cards are inset by `10` visual pixels on every side, matching the legacy GridStack gutter;
-- multi-cell items occupy complete track footprints (`2 × 1` is `424 × 212` before the card inset);
+- one `1 × 1` item is exactly `200 × 200` logical pixels;
+- the gap matches Mantine's `sm` spacing at `12` logical pixels, giving a `212` pixel track pitch;
+- multi-cell items include the gaps between their cells (`2 × 1` is `412 × 200`);
 - the canvas is zoomed once with one uniform scale derived from its available width.
 
-Grid footprints keep the same logical dimensions at every viewport. Widget cards
-use a scale-compensated inset so their painted size and content measurements
-match the legacy responsive grid. The visual canvas always fits the available
-width, every root lane keeps at least one viewport of height, and edit-mode
-previews extend it downward as needed.
+Items keep the same logical dimensions at every viewport. The viewport reserves
+the painted size while the inner canvas remains at its logical dimensions, so a
+widget's `clientWidth`, `clientHeight`, and `ResizeObserver` measurements stay
+stable. The visual canvas always fits the available width, every root lane
+keeps at least one viewport of height, and edit-mode previews extend it downward
+as needed.
 
 The read-only renderer should:
 

apps/nextjs/src/components/board/layout/board-lanes.ts

@@ -2,7 +2,7 @@ import type { BoardLane } from "@homarr/definitions";
 import { getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
 
 import type { Board, EmptySection } from "~/app/[locale]/boards/_types";
-import { getLogicalGridSize, getLayoutRowCount, normalizeGridPlacement } from "./geometry";
+import { getLogicalTrackSize, getLayoutRowCount, normalizeGridPlacement } from "./geometry";
 import { getCollapsedDisplayLayout } from "./reflow";
 import type { GridPlacement } from "./types";
 
@@ -90,5 +90,5 @@ export const getInitialBoardLogicalHeight = (board: Board, layoutId: string) =>
     return [getLayoutRowCount(displayPlacements)];
   });
 
-  return getLogicalGridSize(Math.max(0, ...rowCounts));
+  return getLogicalTrackSize(Math.max(0, ...rowCounts));
 };

apps/nextjs/src/components/board/layout/geometry.ts

@@ -10,23 +10,12 @@ export const getLogicalTrackSize = (trackCount: number) => {
   return normalizedTrackCount * LOGICAL_GRID_CELL_SIZE + (normalizedTrackCount - 1) * LOGICAL_GRID_GAP;
 };
 
-/**
- * Returns the complete footprint occupied by grid tracks. Cards are inset
- * inside this footprint so their visual gutters stay fixed while the canvas
- * is scaled.
- */
-export const getLogicalGridSize = (trackCount: number) => {
-  const normalizedTrackCount = Math.max(0, toFiniteNumber(trackCount, "trackCount"));
-
-  return normalizedTrackCount * LOGICAL_GRID_PITCH;
-};
-
 export const getLogicalItemStyle = ({ x, y, w, h }: GridCoordinates): CSSProperties => ({
   position: "absolute",
   left: x * LOGICAL_GRID_PITCH,
   top: y * LOGICAL_GRID_PITCH,
-  width: getLogicalGridSize(w),
-  height: getLogicalGridSize(h),
+  width: getLogicalTrackSize(w),
+  height: getLogicalTrackSize(h),
 });
 
 export const getLayoutRowCount = (placements: readonly GridCoordinates[]) =>
@@ -36,7 +25,7 @@ export const getGridRowCountForVisualHeight = (visualHeight: number, visualScale
   if (!Number.isFinite(visualHeight) || visualHeight <= 0) return 1;
   if (!Number.isFinite(visualScale) || visualScale <= 0) return 1;
 
-  return Math.max(1, Math.ceil(visualHeight / visualScale / LOGICAL_GRID_PITCH));
+  return Math.max(1, Math.ceil((visualHeight / visualScale + LOGICAL_GRID_GAP) / LOGICAL_GRID_PITCH));
 };
 
 export const normalizeGridPlacement = <TPlacement extends GridPlacement>(

apps/nextjs/src/components/board/layout/test/board-lanes.spec.ts

@@ -8,7 +8,7 @@ import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/ite
 import {
   getBoardLaneColumnCount,
   getInitialBoardLogicalHeight,
-  getLogicalGridSize,
+  getLogicalTrackSize,
   getRootSectionForLane,
 } from "../index";
 
@@ -131,6 +131,6 @@ describe("board lanes", () => {
       },
     ];
 
-    expect(getInitialBoardLogicalHeight(board, layoutId)).toBe(getLogicalGridSize(4));
+    expect(getInitialBoardLogicalHeight(board, layoutId)).toBe(getLogicalTrackSize(4));
   });
 });

apps/nextjs/src/components/board/layout/test/geometry.spec.ts

@@ -3,28 +3,24 @@ import { describe, expect, test } from "vitest";
 import {
   getGridRowCountForVisualHeight,
   getLayoutRowCount,
-  getLogicalGridSize,
   getLogicalItemStyle,
   getLogicalTrackSize,
   normalizeGridPlacement,
 } from "../index";
 
 describe("fixed dashboard geometry", () => {
-  test("separates content track sizes from complete grid footprints", () => {
+  test("keeps a 1x1 item exactly 200px with a fixed 12px gap", () => {
     expect(getLogicalTrackSize(1)).toBe(200);
     expect(getLogicalTrackSize(0.5)).toBe(94);
     expect(getLogicalTrackSize(2)).toBe(412);
     expect(getLogicalTrackSize(3)).toBe(624);
-    expect(getLogicalGridSize(1)).toBe(212);
-    expect(getLogicalGridSize(2)).toBe(424);
-    expect(getLogicalGridSize(3)).toBe(636);
 
     expect(getLogicalItemStyle({ x: 1, y: 2, w: 2, h: 3 })).toEqual({
       position: "absolute",
       left: 212,
       top: 424,
-      width: 424,
-      height: 636,
+      width: 412,
+      height: 624,
     });
   });
 

apps/nextjs/src/components/board/sections/grid/dnd/coordinates.ts

@@ -1,4 +1,4 @@
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import type { GridPlacement } from "~/components/board/layout";
 import type { GridResizeDirection } from "./types";
 
@@ -38,7 +38,7 @@ export const getSnappedGridCoordinates = ({
   target: RectangleLike;
   columnCount: number;
 }) => {
-  const logicalWidth = getLogicalGridSize(columnCount);
+  const logicalWidth = getLogicalTrackSize(columnCount);
   const visualScale = logicalWidth > 0 ? target.width / logicalWidth : 0;
   if (!Number.isFinite(visualScale) || visualScale <= 0) return null;
 

apps/nextjs/src/components/board/sections/grid/grid-editor.tsx

@@ -39,7 +39,7 @@ import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { getWidgetName } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import {
   beginGridTransaction,
   cancelGridTransaction,
@@ -792,8 +792,8 @@ export default function GridEditor({
       data-grid-depth={depth}
       style={
         {
-          width: getLogicalGridSize(columnCount),
-          height: getLogicalGridSize(rowCount),
+          width: getLogicalTrackSize(columnCount),
+          height: getLogicalTrackSize(rowCount),
           "--board-grid-pitch": `${LOGICAL_GRID_PITCH}px`,
         } as CSSProperties
       }
@@ -1234,8 +1234,8 @@ const getEntryVisualScale = (element: HTMLElement | null, placement: SectionGrid
   if (!element) return null;
   const rectangle = element.getBoundingClientRect();
   const scale = {
-    x: rectangle.width / getLogicalGridSize(placement.w),
-    y: rectangle.height / getLogicalGridSize(placement.h),
+    x: rectangle.width / getLogicalTrackSize(placement.w),
+    y: rectangle.height / getLogicalTrackSize(placement.h),
   };
   return Number.isFinite(scale.x) && scale.x > 0 && Number.isFinite(scale.y) && scale.y > 0 ? scale : null;
 };

apps/nextjs/src/components/board/sections/grid/grid-preview-geometry.ts

@@ -1,4 +1,4 @@
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import type { GridPlacement } from "~/components/board/layout";
 
 export interface GridPreviewDomState {
@@ -75,8 +75,8 @@ export const clearGridPreviewGeometry = (
 const applyPreviewGeometry = (element: HTMLElement, controlled: GridPlacement, preview: GridPlacement) => {
   element.style.setProperty("--board-grid-preview-x", `${(preview.x - controlled.x) * LOGICAL_GRID_PITCH}px`);
   element.style.setProperty("--board-grid-preview-y", `${(preview.y - controlled.y) * LOGICAL_GRID_PITCH}px`);
-  element.style.setProperty("--board-grid-preview-width", `${getLogicalGridSize(preview.w)}px`);
-  element.style.setProperty("--board-grid-preview-height", `${getLogicalGridSize(preview.h)}px`);
+  element.style.setProperty("--board-grid-preview-width", `${getLogicalTrackSize(preview.w)}px`);
+  element.style.setProperty("--board-grid-preview-height", `${getLogicalTrackSize(preview.h)}px`);
   element.setAttribute("data-grid-preview", "true");
   setPlacementAttributes(element, preview);
 };

apps/nextjs/src/components/board/sections/grid/grid-preview-layer.tsx

@@ -3,7 +3,7 @@
 import type { RefObject } from "react";
 import { useCallback, useLayoutEffect, useRef, useSyncExternalStore } from "react";
 
-import { getLayoutRowCount, getLogicalItemStyle, getLogicalGridSize } from "~/components/board/layout";
+import { getLayoutRowCount, getLogicalItemStyle, getLogicalTrackSize } from "~/components/board/layout";
 import type { TransactionalGridState } from "./dnd";
 import type { GridInteractionStore } from "./grid-interaction-store";
 import { clearGridPreviewGeometry, createGridPreviewDomState, syncGridPreviewGeometry } from "./grid-preview-geometry";
@@ -87,7 +87,7 @@ export const GridPreviewLayer = ({
     } else {
       delete grid.dataset.dndPreviewRevision;
     }
-    grid.style.height = `${getLogicalGridSize(renderedRowCount)}px`;
+    grid.style.height = `${getLogicalTrackSize(renderedRowCount)}px`;
 
     const viewport = grid.parentElement;
     if (viewport?.hasAttribute("data-section-id")) {
@@ -98,7 +98,7 @@ export const GridPreviewLayer = ({
       // stray value would silently blow the cap open for the rest of the session, well after any
       // drag ended, since nothing else would ever clear it back out.
       if (maxRowCount === null) {
-        viewport.style.setProperty("--board-grid-drag-height", `${getLogicalGridSize(renderedRowCount)}px`);
+        viewport.style.setProperty("--board-grid-drag-height", `${getLogicalTrackSize(renderedRowCount)}px`);
       } else {
         viewport.style.removeProperty("--board-grid-drag-height");
       }

apps/nextjs/src/components/board/sections/grid/grid-resize-outline.ts

@@ -1,4 +1,4 @@
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import type { GridPlacement } from "~/components/board/layout";
 
 interface ResizeOutlinePreview {
@@ -31,8 +31,8 @@ export const createGridResizeOutlineController = (
     outline.style.position = "absolute";
     outline.style.left = `${(preview.placement.x - visualX) * LOGICAL_GRID_PITCH}px`;
     outline.style.top = `${(preview.placement.y - visualY) * LOGICAL_GRID_PITCH}px`;
-    outline.style.width = `${getLogicalGridSize(preview.placement.w)}px`;
-    outline.style.height = `${getLogicalGridSize(preview.placement.h)}px`;
+    outline.style.width = `${getLogicalTrackSize(preview.placement.w)}px`;
+    outline.style.height = `${getLogicalTrackSize(preview.placement.h)}px`;
     outline.dataset.gridResizeValid = String(preview.valid);
   };
 

apps/nextjs/src/components/board/sections/grid/section-grid.module.css

@@ -50,10 +50,6 @@
   overflow: visible;
 }
 
-.staticItem[data-type="item"] > .contentMount {
-  inset: calc(10px * var(--board-canvas-inverse-scale, 1));
-}
-
 .staticItem:has([data-board-container-label]) {
   z-index: 2;
 }

apps/nextjs/src/components/board/sections/grid/section-grid.tsx

@@ -14,7 +14,7 @@ import {
   getEditableCanvasAttributes,
   getGridRowCountForVisualHeight,
   getLayoutRowCount,
-  getLogicalGridSize,
+  getLogicalTrackSize,
   getReadonlyCanvasAttributes,
   normalizeGridPlacement,
 } from "~/components/board/layout";
@@ -138,9 +138,9 @@ export const SectionGrid = ({
   // of expanding to fit every widget, so its viewport height is capped independently of rowCount.
   const isScrollableContainer = section.kind === "container" && section.options.scrollable;
   const viewportRowCount = isScrollableContainer ? Math.max(requestedRowCount, 1) : rowCount;
-  const logicalWidth = getLogicalGridSize(columnCount);
-  const logicalHeight = getLogicalGridSize(rowCount);
-  const viewportHeight = getLogicalGridSize(viewportRowCount);
+  const logicalWidth = getLogicalTrackSize(columnCount);
+  const logicalHeight = getLogicalTrackSize(rowCount);
+  const viewportHeight = getLogicalTrackSize(viewportRowCount);
   // A collapsed container's compact coordinates are display-only. Its own
   // nested grid stays inactive until an explicit edit interaction expands it.
   const isInteractionDisabled = section.kind === "container" && collapsedSectionIds.has(section.id);

apps/nextjs/src/components/board/sections/grid/test/fixed-grid-item.spec.ts

@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import type { Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
-import { getCollapsedDisplayLayout, getLogicalGridSize } from "../../../layout";
+import { getCollapsedDisplayLayout, LOGICAL_GRID_CELL_SIZE } from "../../../layout";
 import { FixedGridItem } from "../fixed-grid-item";
 
 const mocks = vi.hoisted(() => ({
@@ -250,14 +250,14 @@ describe("fixed grid item behavior", () => {
     expect(container.querySelector('[data-testid="board-grid-drag-affordance"]')).toBeNull();
   });
 
-  test("renders a view-only 1x1 card at the complete grid footprint", () => {
+  test("renders a view-only 1x1 card at the fixed 200px logical size", () => {
     mocks.editMode = false;
     renderWeather(root);
 
     const item = container.querySelector<HTMLElement>('[data-grid-id="weather"]');
     expect(item).not.toBeNull();
-    expect(item?.style.width).toBe(`${getLogicalGridSize(1)}px`);
-    expect(item?.style.height).toBe(`${getLogicalGridSize(1)}px`);
+    expect(item?.style.width).toBe(`${LOGICAL_GRID_CELL_SIZE}px`);
+    expect(item?.style.height).toBe(`${LOGICAL_GRID_CELL_SIZE}px`);
     expect(item?.getAttribute("role")).toBeNull();
 
     act(() => item?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })));

apps/nextjs/src/components/board/sections/grid/test/grid-preview-geometry.spec.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test } from "vitest";
 
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 
 import { createGridPreviewDomState, syncGridPreviewGeometry } from "../grid-preview-geometry";
 
@@ -65,8 +65,8 @@ describe("grid preview geometry", () => {
     expect(active?.getAttribute("data-grid-preview")).toBe("true");
     expect(active?.style.getPropertyValue("--board-grid-preview-x")).toBe(`${LOGICAL_GRID_PITCH}px`);
     expect(active?.style.getPropertyValue("--board-grid-preview-y")).toBe(`${LOGICAL_GRID_PITCH}px`);
-    expect(active?.style.getPropertyValue("--board-grid-preview-width")).toBe(`${getLogicalGridSize(3)}px`);
-    expect(active?.style.getPropertyValue("--board-grid-preview-height")).toBe(`${getLogicalGridSize(4)}px`);
+    expect(active?.style.getPropertyValue("--board-grid-preview-width")).toBe(`${getLogicalTrackSize(3)}px`);
+    expect(active?.style.getPropertyValue("--board-grid-preview-height")).toBe(`${getLogicalTrackSize(4)}px`);
     expect(active?.dataset.gridW).toBe("3");
     expect(active?.dataset.gridH).toBe("4");
   });

apps/nextjs/src/components/board/sections/grid/test/grid-resize-outline.spec.ts

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test, vi } from "vitest";
 
-import { getLogicalGridSize } from "~/components/board/layout";
+import { getLogicalTrackSize } from "~/components/board/layout";
 
 import { createGridResizeOutlineController } from "../grid-resize-outline";
 
@@ -30,8 +30,8 @@ describe("grid resize outline", () => {
     const outline = shell.querySelector<HTMLElement>("[data-grid-resize-outline]");
     expect(outline?.style.left).toBe("0px");
     expect(outline?.style.top).toBe("0px");
-    expect(outline?.style.width).toBe(`${getLogicalGridSize(1)}px`);
-    expect(outline?.style.height).toBe(`${getLogicalGridSize(2)}px`);
+    expect(outline?.style.width).toBe(`${getLogicalTrackSize(1)}px`);
+    expect(outline?.style.height).toBe(`${getLogicalTrackSize(2)}px`);
     expect(outline?.dataset.gridResizeValid).toBe("false");
 
     controller.schedule(null);

apps/nextjs/src/components/workshop/workshop-install-flow.spec.ts

@@ -9,7 +9,6 @@ const read = (path: string) => readFileSync(`${process.cwd()}/${path}`, "utf8");
 
 const detailPage = "apps/nextjs/src/app/[locale]/manage/custom-widgets/workshop/[id]/_workshop-detail.tsx";
 const browsePage = "apps/nextjs/src/app/[locale]/manage/custom-widgets/workshop/_workshop-browse.tsx";
-const browseRoutePage = "apps/nextjs/src/app/[locale]/manage/custom-widgets/workshop/page.tsx";
 const publishPage = "apps/nextjs/src/app/[locale]/manage/custom-widgets/publish/[id]/_workshop-publish-form.tsx";
 const cssButton = "apps/nextjs/src/components/workshop/workshop-css-import-button.tsx";
 
@@ -53,18 +52,12 @@ describe("Workshop widget install flow", () => {
 
   it("browses the Workshop as a card grid with per-item Workshop links", () => {
     const browse = read(browsePage);
-    const route = read(browseRoutePage);
 
     expect(browse).toContain("WorkshopSubmissionGrid");
     expect(browse).toContain("SearchInput");
     expect(browse).toContain("TablePagination");
     expect(browse).toContain("CustomWidgetTabs");
-    expect(route).toContain("resolveHomarrUrlConfig");
-    expect(route).toContain("workshopWebUrl={workshopWebUrl}");
-    expect(browse).toContain("workshopWebUrl: string");
-    expect(browse).toContain("href={workshopWebUrl}");
-    expect(browse).toContain('workshopWebUrl.replace(/\\/+$/u, "")');
-    expect(browse).toContain("encodeURIComponent(item.id)");
+    expect(browse).toContain("getWorkshopWebUrl(item.id)");
     expect(browse).toContain("WorkshopVoteControl");
     expect(browse).not.toContain("Modal");
   });

e2e/lazy-widgets.spec.ts

@@ -1,6 +1,5 @@
 import { createId } from "@paralleldrive/cuid2";
 import { chromium, expect } from "@playwright/test";
-import type { Route } from "@playwright/test";
 import { eq } from "drizzle-orm";
 import { stringify } from "superjson";
 import { describe, test } from "vitest";
@@ -22,9 +21,7 @@ describe("lazy widget application graph", () => {
     const boardId = createId();
     const layoutId = createId();
     const sectionId = createId();
-    const clockItemId = createId();
-    const downloadsItemId = createId();
-    const mockIntegrationId = createId();
+    const itemId = createId();
 
     await db.insert(sqliteSchema.boards).values({
       id: boardId,
@@ -44,56 +41,26 @@ describe("lazy widget application graph", () => {
       xOffset: 0,
       yOffset: 0,
     });
-    await db.insert(sqliteSchema.integrations).values({
-      id: mockIntegrationId,
-      name: "Mock downloads",
-      url: "http://mock.local",
-      kind: "mock",
+    await db.insert(sqliteSchema.items).values({
+      id: itemId,
+      boardId,
+      kind: "clock",
+      options: stringify({ showSeconds: true }),
     });
-    await db.insert(sqliteSchema.items).values([
-      {
-        id: clockItemId,
-        boardId,
-        kind: "clock",
-        options: stringify({ showSeconds: true }),
-      },
-      {
-        id: downloadsItemId,
-        boardId,
-        kind: "downloads",
-        options: stringify({}),
-      },
-    ]);
-    await db.insert(sqliteSchema.itemLayouts).values([
-      {
-        itemId: clockItemId,
-        sectionId,
-        layoutId,
-        xOffset: 0,
-        yOffset: 0,
-        width: 4,
-        height: 2,
-      },
-      {
-        itemId: downloadsItemId,
-        sectionId,
-        layoutId,
-        xOffset: 0,
-        yOffset: 2,
-        width: 8,
-        height: 5,
-      },
-    ]);
-    await db.insert(sqliteSchema.integrationItems).values({
-      itemId: downloadsItemId,
-      integrationId: mockIntegrationId,
+    await db.insert(sqliteSchema.itemLayouts).values({
+      itemId,
+      sectionId,
+      layoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 4,
+      height: 2,
     });
     await db.update(sqliteSchema.users).set({ homeBoardId: boardId }).where(eq(sqliteSchema.users.id, userId));
 
     const homarrContainer = await createHomarrContainer({
       environment: {
         AUTH_PROVIDERS: "credentials",
-        UNSAFE_ENABLE_MOCK_INTEGRATION: "true",
       },
       mounts: {
         "/appdata": localMountPath,
@@ -102,18 +69,10 @@ describe("lazy widget application graph", () => {
 
     const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
     const browser = await chromium.launch();
-    const context = await browser.newContext({ serviceWorkers: "block" });
+    const context = await browser.newContext();
     const page = await context.newPage();
     const pageErrors: Error[] = [];
-    const hydrationErrors: string[] = [];
     page.on("pageerror", (error) => pageErrors.push(error));
-    const hydrationErrorPattern = /hydrat|did not match|react\.dev\/errors\/4(18|2[1235])|react error #4(18|2[1235])/i;
-    page.on("console", (message) => {
-      if (message.type() === "error" && hydrationErrorPattern.test(message.text())) {
-        hydrationErrors.push(message.text());
-      }
-    });
-    let releaseRefresh: (() => void) | undefined;
 
     try {
       await page.goto(`${baseUrl}/auth/login`);
@@ -129,18 +88,9 @@ describe("lazy widget application graph", () => {
       const visibleBoard = page.locator("[data-homarr-dev-benchmark-board]").filter({ visible: true }).first();
       await expect(visibleBoard).toBeVisible({ timeout: 30_000 });
       const clockWidget = page.locator(
-        `[data-id="${clockItemId}"] .clock-widget-container, [data-grid-item-id="${clockItemId}"] .clock-widget-container`,
+        `[data-id="${itemId}"] .clock-widget-container, [data-grid-item-id="${itemId}"] .clock-widget-container`,
       );
       await expect(clockWidget.filter({ visible: true }).first()).toBeVisible({ timeout: 30_000 });
-      await expect(clockWidget.locator("time").filter({ visible: true }).first()).not.toHaveText("--:--", {
-        timeout: 30_000,
-      });
-      const downloadsWidget = page
-        .locator(`[data-id="${downloadsItemId}"], [data-grid-item-id="${downloadsItemId}"]`)
-        .filter({ visible: true })
-        .first();
-      const cachedDownload = downloadsWidget.getByText("Big.Buck.Bunny.2008.1080p.BluRay.x264");
-      await expect(cachedDownload).toBeVisible({ timeout: 30_000 });
 
       await expect(page.locator("[data-homarr-dev-benchmark-spotlight-preloaded]")).toHaveCount(1, {
         timeout: 15_000,
@@ -151,59 +101,23 @@ describe("lazy widget application graph", () => {
       await page.keyboard.press("Escape");
       await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).not.toBeVisible();
 
-      let refreshRequestStarted = false;
-      const refreshGate = new Promise<void>((resolve) => {
-        releaseRefresh = resolve;
-      });
-      const downloadsRequestPattern = "**/*widget.downloads.getJobsAndStatuses*";
-      const delayDownloadsRefresh = async (route: Route) => {
-        refreshRequestStarted = true;
-        await refreshGate;
-        await route.continue();
-      };
-      await page.route(downloadsRequestPattern, delayDownloadsRefresh);
+      await expect
+        .poll(
+          async () =>
+            await page.evaluate(async () => {
+              const registrations = await navigator.serviceWorker.getRegistrations();
+              return registrations[0]?.scope ?? null;
+            }),
+          { timeout: 15_000 },
+        )
+        .toBe(`${baseUrl}/`);
 
-      await page.reload({ waitUntil: "domcontentloaded" });
+      await page.reload();
       await expect(clockWidget.filter({ visible: true }).first()).toBeVisible({ timeout: 30_000 });
-      await expect(clockWidget.locator("time").filter({ visible: true }).first()).not.toHaveText("--:--", {
-        timeout: 30_000,
-      });
-      await expect.poll(() => refreshRequestStarted, { timeout: 10_000 }).toBe(true);
-      await expect(cachedDownload).toBeVisible({ timeout: 5_000 });
-      await expect(downloadsWidget.locator("[data-widget-refreshing]")).toBeVisible();
-
-      const refreshedDownloadsResponse = page.waitForResponse(
-        (response) => response.url().includes("widget.downloads.getJobsAndStatuses") && response.ok(),
-      );
-      releaseRefresh();
-      releaseRefresh = undefined;
-      await refreshedDownloadsResponse;
-      await expect(downloadsWidget.locator("[data-widget-refreshing]")).toHaveCount(0);
-      await page.unroute(downloadsRequestPattern, delayDownloadsRefresh);
       expect(pageErrors).toEqual([]);
-      expect(hydrationErrors).toEqual([]);
-
-      const serviceWorkerContext = await browser.newContext();
-      const serviceWorkerPage = await serviceWorkerContext.newPage();
-      try {
-        await serviceWorkerPage.goto(`${baseUrl}/auth/login`);
-        await expect
-          .poll(
-            async () =>
-              await serviceWorkerPage.evaluate(async () => {
-                const registrations = await navigator.serviceWorker.getRegistrations();
-                return registrations[0]?.scope ?? null;
-              }),
-            { timeout: 15_000 },
-          )
-          .toBe(`${baseUrl}/`);
-      } finally {
-        await serviceWorkerContext.close();
-      }
     } finally {
-      releaseRefresh?.();
       await browser.close();
       await homarrContainer.stop();
     }
-  }, 180_000);
+  }, 120_000);
 });

packages/api/src/query-cache.ts

@@ -8,8 +8,6 @@ export const queryCacheDefaultGcTimeMs = 1000 * 60 * 5;
 export const queryCacheMetadataStaleTimeMs = 1000 * 60 * 5;
 
 const widgetDataQueryPaths = new Set(["app.byId", "app.byIds", "docker.getContainers", "integration.byIds"]);
-// Beszel system stats are large time-series payloads and were deliberately kept out of
-// the persisted cache in #6289; live stats come from an SSE subscription instead.
 const excludedWidgetPaths = new Set(["widget.app.ping", "widget.beszel.getSystemStats"]);
 
 export const isWidgetDataTrpcPath = (path: string) => {

packages/api/src/router/widgets/anchor-notes.ts

@@ -3,12 +3,7 @@ import { z } from "zod/v4";
 
 import { ResponseError } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
-import {
-  anchorNotesListInputSchema,
-  anchorNoteUpdateInputSchema,
-  createIntegrationAsync,
-  mockWidgetData,
-} from "@homarr/integrations";
+import { anchorNotesListInputSchema, anchorNoteUpdateInputSchema, createIntegrationAsync } from "@homarr/integrations";
 import { anchorNoteRequestHandler, anchorNotesListRequestHandler } from "@homarr/request-handler/anchor-notes";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -20,12 +15,6 @@ const noteIdInput = z.object({
 
 const logger = createLogger({ module: "anchorNotesRouter" });
 
-const assertMockNoteExists = (noteId: string) => {
-  if (noteId === mockWidgetData.anchorNote.id) return;
-
-  throw new TRPCError({ code: "NOT_FOUND", message: "Note not found" });
-};
-
 const isJsonDeltaString = (value: string) => {
   try {
     const parsed: unknown = JSON.parse(value);
@@ -51,64 +40,34 @@ const normalizeAnchorContent = (content: string | undefined) => {
 
 export const anchorNotesRouter = createTRPCRouter({
   listNotes: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "anchor", "mock"))
+    .concat(createOneIntegrationMiddleware("query", "anchor"))
     .input(anchorNotesListInputSchema)
     .query(async ({ ctx, input }) => {
-      if (ctx.integration.kind === "mock") {
-        const search = input.search?.toLowerCase();
-        const notes = mockWidgetData.anchorNotes.filter((note) => !search || note.title.toLowerCase().includes(search));
-        return notes.slice(0, input.limit ?? 50);
-      }
-
-      const handler = anchorNotesListRequestHandler.handler(
-        { ...ctx.integration, kind: "anchor" },
-        {
-          ...input,
-          limit: input.limit ?? 50,
-        },
-      );
+      const handler = anchorNotesListRequestHandler.handler(ctx.integration, { ...input, limit: input.limit ?? 50 });
 
       const { data } = await handler.getDataAsync();
 
       return data;
     }),
   getNote: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "anchor", "mock"))
+    .concat(createOneIntegrationMiddleware("query", "anchor"))
     .input(noteIdInput)
     .query(async ({ ctx, input }) => {
-      if (ctx.integration.kind === "mock") {
-        assertMockNoteExists(input.noteId);
-        return mockWidgetData.anchorNote;
-      }
-
-      const handler = anchorNoteRequestHandler.handler(
-        { ...ctx.integration, kind: "anchor" },
-        { noteId: input.noteId },
-      );
+      const handler = anchorNoteRequestHandler.handler(ctx.integration, { noteId: input.noteId });
 
       const { data } = await handler.getDataAsync();
 
       return data;
     }),
   updateNote: protectedProcedure
-    .concat(createOneIntegrationMiddleware("interact", "anchor", "mock"))
+    .concat(createOneIntegrationMiddleware("interact", "anchor"))
     .input(anchorNoteUpdateInputSchema)
     .mutation(async ({ ctx, input }) => {
+      const integrationInstance = await createIntegrationAsync(ctx.integration);
       const normalizedContent = normalizeAnchorContent(input.content);
       const isContentNormalized =
         input.content !== undefined && normalizedContent !== undefined && input.content !== normalizedContent;
 
-      if (ctx.integration.kind === "mock") {
-        assertMockNoteExists(input.noteId);
-        return {
-          ...mockWidgetData.anchorNote,
-          ...(input.title !== undefined ? { title: input.title } : {}),
-          ...(normalizedContent !== undefined ? { content: normalizedContent } : {}),
-        };
-      }
-
-      const integrationInstance = await createIntegrationAsync({ ...ctx.integration, kind: "anchor" });
-
       try {
         const updatedNote = await integrationInstance.updateNoteAsync({
           noteId: input.noteId,

packages/api/src/router/widgets/archive-team-warrior.ts

@@ -1,18 +1,13 @@
 import { archiveTeamWarriorRequestHandler } from "@homarr/request-handler/archive-team-warrior";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const archiveTeamWarriorRouter = createTRPCRouter({
   getStatus: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "archiveTeamWarrior", "mock"))
+    .concat(createOneIntegrationMiddleware("query", "archiveTeamWarrior"))
     .query(async ({ ctx }) => {
-      if (ctx.integration.kind === "mock") {
-        return { status: mockWidgetData.archiveTeamWarrior, updatedAt: new Date(mockWidgetData.timestamp) };
-      }
-
-      const handler = archiveTeamWarriorRequestHandler.handler({ ...ctx.integration, kind: "archiveTeamWarrior" }, {});
+      const handler = archiveTeamWarriorRequestHandler.handler(ctx.integration, {});
       const { data, timestamp } = await handler.getDataAsync();
 
       return {

packages/api/src/router/widgets/audio-stats.ts

@@ -1,16 +1,14 @@
 import { audiobookshelfRequestHandler } from "@homarr/request-handler/audiobookshelf";
 import { navidromeRequestHandler } from "@homarr/request-handler/navidrome";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const audioStatsRouter = createTRPCRouter({
   getStats: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "navidrome", "audiobookshelf", "mock"))
+    .concat(createOneIntegrationMiddleware("query", "navidrome", "audiobookshelf"))
     .query(async ({ ctx }) => {
       const { kind } = ctx.integration;
-      if (kind === "mock") return { kind: "navidrome" as const, data: mockWidgetData.audioStats };
 
       const fetchByKind = {
         navidrome: async () => {

packages/api/src/router/widgets/bazarr.ts

@@ -1,5 +1,4 @@
 import { bazarrBadgesRequestHandler } from "@homarr/request-handler/bazarr";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
@@ -13,11 +12,9 @@ export const bazarrRouter = createTRPCRouter({
           "Get missing subtitle counts, provider issues, and health warnings for a Bazarr integration. REQUIRED: integrationId from integration_all",
       },
     })
-    .concat(createOneIntegrationMiddleware("query", "bazarr", "mock"))
+    .concat(createOneIntegrationMiddleware("query", "bazarr"))
     .query(async ({ ctx }) => {
-      if (ctx.integration.kind === "mock") return mockWidgetData.bazarr;
-
-      const innerHandler = bazarrBadgesRequestHandler.handler({ ...ctx.integration, kind: "bazarr" }, {});
+      const innerHandler = bazarrBadgesRequestHandler.handler(ctx.integration, {});
       const data = await innerHandler.getDataAsync();
       return data.data;
     }),

packages/api/src/router/widgets/coolify.ts

@@ -1,5 +1,4 @@
 import type { CoolifyInstanceInfo } from "@homarr/integrations/types";
-import { mockWidgetData } from "@homarr/integrations";
 import { coolifyRequestHandler } from "@homarr/request-handler/coolify";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
@@ -17,22 +16,12 @@ interface CoolifyInstanceResult {
 
 export const coolifyRouter = createTRPCRouter({
   getInstancesInfo: publicProcedure
-    .concat(createManyIntegrationMiddleware("query", "coolify", "mock"))
+    .concat(createManyIntegrationMiddleware("query", "coolify"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
         async (integration): Promise<CoolifyInstanceResult> => {
-          if (integration.kind === "mock") {
-            return {
-              integrationId: integration.id,
-              integrationName: integration.name,
-              integrationUrl: integration.url,
-              instanceInfo: mockWidgetData.coolify,
-              updatedAt: new Date(mockWidgetData.timestamp),
-            };
-          }
-
-          const innerHandler = coolifyRequestHandler.handler({ ...integration, kind: "coolify" }, {});
+          const innerHandler = coolifyRequestHandler.handler(integration, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
 
           return {

packages/api/src/router/widgets/custom-api.ts

@@ -243,7 +243,6 @@ export const customApiRouter = createTRPCRouter({
     return {
       type: "customJsx" as const,
       template: resolved.definition.template,
-      queryCacheKey: `${getCustomWidgetCacheVersion(resolved.stored)}:${hashRuntimeParams(resolved.configuration)}`,
       data: Object.fromEntries(entries.map(([id, result]) => [id, result.data])),
       status: Object.fromEntries(entries.map(([id, result]) => [id, result.status])),
       options: resolved.configuration,

packages/api/src/router/widgets/firewall.ts

@@ -1,6 +1,4 @@
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import type { IntegrationKind } from "@homarr/definitions";
-import { mockWidgetData } from "@homarr/integrations";
 import {
   firewallCpuRequestHandler,
   firewallInterfacesRequestHandler,
@@ -12,53 +10,29 @@ import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
-const firewallMiddleware = createManyIntegrationMiddleware(
-  "query",
-  ...getIntegrationKindsByCategory("firewall"),
-  "mock",
-);
+const firewallMiddleware = createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("firewall"));
 
-interface FirewallResult<TSummary> {
-  integration: { id: string; name: string; kind: IntegrationKind; updatedAt: Date };
-  summary: TSummary;
-  error?: string;
-}
-
-const queryFirewall = <TSummary>(
-  handler: {
-    handler: (
-      integration: any,
-      input: Record<string, never>,
-    ) => { getDataAsync: () => Promise<{ data: TSummary; timestamp: Date }> };
+const queryFirewall = <
+  THandler extends {
+    handler: (integration: any, input: any) => { getDataAsync: () => Promise<{ data: any; timestamp: Date }> };
   },
-  createFallback: () => TSummary,
-  getMockData: () => TSummary,
+>(
+  handler: THandler,
+  createFallback: () => Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
 ) =>
   publicProcedure.concat(firewallMiddleware).query(async ({ ctx }) =>
     settleIntegrationQueries(
       ctx.integrations,
-      async (integration): Promise<FirewallResult<TSummary>> => {
-        if (integration.kind === "mock") {
-          return {
-            integration: {
-              id: integration.id,
-              name: integration.name,
-              kind: integration.kind,
-              updatedAt: new Date(mockWidgetData.timestamp),
-            },
-            summary: getMockData(),
-            error: undefined,
-          };
-        }
-        const { data, timestamp } = await handler.handler({ ...integration, kind: "opnsense" }, {}).getDataAsync();
+      async (integration) => {
+        const { data, timestamp } = await handler.handler(integration, {}).getDataAsync();
         return {
           integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
-          summary: data,
-          error: undefined,
+          summary: data as Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
+          error: undefined as string | undefined,
         };
       },
       {
-        fallback: (integration, error): FirewallResult<TSummary> => ({
+        fallback: (integration, error) => ({
           integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: new Date(0) },
           summary: createFallback(),
           error: toPublicIntegrationError(error),
@@ -69,24 +43,8 @@ const queryFirewall = <TSummary>(
   );
 
 export const firewallRouter = createTRPCRouter({
-  getFirewallCpuStatus: queryFirewall(
-    firewallCpuRequestHandler,
-    () => ({ total: 0 }),
-    () => mockWidgetData.firewallCpu,
-  ),
-  getFirewallInterfacesStatus: queryFirewall(
-    firewallInterfacesRequestHandler,
-    () => [],
-    () => mockWidgetData.firewallInterfaces,
-  ),
-  getFirewallVersionStatus: queryFirewall(
-    firewallVersionRequestHandler,
-    () => ({ version: "Unknown" }),
-    () => mockWidgetData.firewallVersion,
-  ),
-  getFirewallMemoryStatus: queryFirewall(
-    firewallMemoryRequestHandler,
-    () => ({ used: 0, total: 0, percent: 0 }),
-    () => mockWidgetData.firewallMemory,
-  ),
+  getFirewallCpuStatus: queryFirewall(firewallCpuRequestHandler, () => ({ total: 0 })),
+  getFirewallInterfacesStatus: queryFirewall(firewallInterfacesRequestHandler, () => []),
+  getFirewallVersionStatus: queryFirewall(firewallVersionRequestHandler, () => ({ version: "Unknown" })),
+  getFirewallMemoryStatus: queryFirewall(firewallMemoryRequestHandler, () => ({ used: 0, total: 0, percent: 0 })),
 });

packages/api/src/router/widgets/immich.ts

@@ -1,7 +1,6 @@
 import { z } from "zod/v4";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import { mockWidgetData } from "@homarr/integrations";
 import {
   immichAlbumRequestHandler,
   immichAlbumsRequestHandler,
@@ -13,12 +12,11 @@ import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const createImmichIntegrationMiddleware = (action: IntegrationAction) =>
-  createOneIntegrationMiddleware(action, ...getIntegrationKindsByCategory("photoService"), "mock");
+  createOneIntegrationMiddleware(action, ...getIntegrationKindsByCategory("photoService"));
 
 export const immichRouter = createTRPCRouter({
   getServerStats: publicProcedure.concat(createImmichIntegrationMiddleware("query")).query(async ({ ctx }) => {
-    if (ctx.integration.kind === "mock") return mockWidgetData.immichStats;
-    const innerHandler = immichStatsRequestHandler.handler({ ...ctx.integration, kind: "immich" }, {});
+    const innerHandler = immichStatsRequestHandler.handler(ctx.integration, {});
     const data = await innerHandler.getDataAsync();
     return data.data;
   }),
@@ -31,13 +29,7 @@ export const immichRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      if (ctx.integration.kind === "mock") return mockWidgetData.immichAlbum;
-      const innerHandler = immichAlbumRequestHandler.handler(
-        { ...ctx.integration, kind: "immich" },
-        {
-          albumId: input.albumId,
-        },
-      );
+      const innerHandler = immichAlbumRequestHandler.handler(ctx.integration, { albumId: input.albumId });
       const data = await innerHandler.getDataAsync();
       return data.data;
     }),
@@ -50,13 +42,7 @@ export const immichRouter = createTRPCRouter({
     )
     .concat(createImmichIntegrationMiddleware("query"))
     .query(async ({ ctx, input }) => {
-      if (ctx.integration.kind === "mock") return mockWidgetData.immichAlbums.slice(0, input.limit);
-      const innerHandler = immichAlbumsRequestHandler.handler(
-        { ...ctx.integration, kind: "immich" },
-        {
-          limit: input.limit,
-        },
-      );
+      const innerHandler = immichAlbumsRequestHandler.handler(ctx.integration, { limit: input.limit });
       const data = await innerHandler.getDataAsync();
       return data.data;
     }),

packages/api/src/router/widgets/paperless-ngx.ts

@@ -1,16 +1,12 @@
 import { paperlessNgxStatsRequestHandler } from "@homarr/request-handler/paperless-ngx";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const paperlessNgxRouter = createTRPCRouter({
-  getStats: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "paperlessNgx", "mock"))
-    .query(async ({ ctx }) => {
-      if (ctx.integration.kind === "mock") return mockWidgetData.paperlessNgx;
-      const innerHandler = paperlessNgxStatsRequestHandler.handler({ ...ctx.integration, kind: "paperlessNgx" }, {});
-      const data = await innerHandler.getDataAsync();
-      return data.data;
-    }),
+  getStats: publicProcedure.concat(createOneIntegrationMiddleware("query", "paperlessNgx")).query(async ({ ctx }) => {
+    const innerHandler = paperlessNgxStatsRequestHandler.handler(ctx.integration, {});
+    const data = await innerHandler.getDataAsync();
+    return data.data;
+  }),
 });

packages/api/src/router/widgets/patchmon.ts

@@ -1,5 +1,4 @@
 import { patchmonStatsRequestHandler } from "@homarr/request-handler/patchmon";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, protectedProcedure } from "../../trpc";
@@ -13,10 +12,9 @@ export const patchmonRouter = createTRPCRouter({
           "Get PatchMon host patch statistics including total hosts, hosts needing updates, security update counts, up-to-date hosts, outdated packages, repositories, and OS distribution. REQUIRED: integrationId (single PatchMon integration ID from integration_all). Requires authenticated session (API key or browser login) and integration query access.",
       },
     })
-    .concat(createOneIntegrationMiddleware("query", "patchmon", "mock"))
+    .concat(createOneIntegrationMiddleware("query", "patchmon"))
     .query(async ({ ctx }) => {
-      if (ctx.integration.kind === "mock") return mockWidgetData.patchmon;
-      const innerHandler = patchmonStatsRequestHandler.handler({ ...ctx.integration, kind: "patchmon" }, {});
+      const innerHandler = patchmonStatsRequestHandler.handler(ctx.integration, {});
       const { data } = await innerHandler.getDataAsync();
       return data;
     }),

packages/api/src/router/widgets/speedtest-tracker.ts

@@ -1,5 +1,4 @@
 import { speedtestTrackerRequestHandler } from "@homarr/request-handler/speedtest-tracker";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
@@ -7,22 +6,12 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const speedtestTrackerRouter = createTRPCRouter({
   getDashboard: publicProcedure
-    .concat(createManyIntegrationMiddleware("query", "speedtestTracker", "mock"))
+    .concat(createManyIntegrationMiddleware("query", "speedtestTracker"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
         async (integration) => {
-          if (integration.kind === "mock") {
-            return {
-              integrationId: integration.id,
-              integrationName: integration.name,
-              integrationUrl: integration.url,
-              dashboard: mockWidgetData.speedtestTracker,
-              updatedAt: new Date(mockWidgetData.timestamp),
-              error: undefined,
-            };
-          }
-          const innerHandler = speedtestTrackerRequestHandler.handler({ ...integration, kind: "speedtestTracker" }, {});
+          const innerHandler = speedtestTrackerRequestHandler.handler(integration, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
 
           return {

packages/api/src/router/widgets/tracearr.ts

@@ -1,50 +1,37 @@
 import { tracearrRequestHandler } from "@homarr/request-handler/tracearr";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const tracearrRouter = createTRPCRouter({
-  getDashboard: publicProcedure
-    .concat(createManyIntegrationMiddleware("query", "tracearr", "mock"))
-    .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(
-        ctx.integrations,
-        async (integration) => {
-          if (integration.kind === "mock") {
-            return {
-              integrationId: integration.id,
-              integrationName: integration.name,
-              integrationUrl: integration.url,
-              dashboard: mockWidgetData.tracearr,
-              updatedAt: new Date(mockWidgetData.timestamp),
-              error: undefined,
-            };
-          }
-          const innerHandler = tracearrRequestHandler.handler({ ...integration, kind: "tracearr" }, {});
-          const { data, timestamp } = await innerHandler.getDataAsync();
+  getDashboard: publicProcedure.concat(createManyIntegrationMiddleware("query", "tracearr")).query(async ({ ctx }) => {
+    return await settleIntegrationQueries(
+      ctx.integrations,
+      async (integration) => {
+        const innerHandler = tracearrRequestHandler.handler(integration, {});
+        const { data, timestamp } = await innerHandler.getDataAsync();
 
-          return {
-            integrationId: integration.id,
-            integrationName: integration.name,
-            integrationUrl: integration.url,
-            dashboard: data as typeof data | null,
-            updatedAt: timestamp,
-            error: undefined as string | undefined,
-          };
-        },
-        {
-          fallback: (integration, error) => ({
-            integrationId: integration.id,
-            integrationName: integration.name,
-            integrationUrl: integration.url,
-            dashboard: null,
-            updatedAt: new Date(0),
-            error: toPublicIntegrationError(error),
-          }),
-          throwOnAllFailures: true,
-        },
-      );
-    }),
+        return {
+          integrationId: integration.id,
+          integrationName: integration.name,
+          integrationUrl: integration.url,
+          dashboard: data as typeof data | null,
+          updatedAt: timestamp,
+          error: undefined as string | undefined,
+        };
+      },
+      {
+        fallback: (integration, error) => ({
+          integrationId: integration.id,
+          integrationName: integration.name,
+          integrationUrl: integration.url,
+          dashboard: null,
+          updatedAt: new Date(0),
+          error: toPublicIntegrationError(error),
+        }),
+        throwOnAllFailures: true,
+      },
+    );
+  }),
 });

packages/api/src/router/widgets/traefik.ts

@@ -1,5 +1,4 @@
 import { traefikRequestHandler } from "@homarr/request-handler/traefik";
-import { mockWidgetData } from "@homarr/integrations";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
@@ -14,22 +13,12 @@ export const traefikRouter = createTRPCRouter({
           "Retrieve Traefik dashboard data, including routers, services, middlewares, and entry points, for the given integration IDs.",
       },
     })
-    .concat(createManyIntegrationMiddleware("query", "traefik", "mock"))
+    .concat(createManyIntegrationMiddleware("query", "traefik"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
         async (integration) => {
-          if (integration.kind === "mock") {
-            return {
-              integrationId: integration.id,
-              integrationName: integration.name,
-              integrationUrl: integration.url,
-              dashboard: mockWidgetData.traefik,
-              updatedAt: new Date(mockWidgetData.timestamp),
-              error: undefined,
-            };
-          }
-          const innerHandler = traefikRequestHandler.handler({ ...integration, kind: "traefik" }, {});
+          const innerHandler = traefikRequestHandler.handler(integration, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
 
           return {