docs(mcp): restore custom widget authoring guidance

fix(mcp): harden tool schemas and dispatch (#6815 )
ci: remove automatic test gates and trim test suites (#6816 )
2026-09-10 19:24:32 +02:00 · 2026-09-10 19:19:47 +02:00 · 2026-09-10 19:14:31 +02:00 · 2026-09-10 17:53:38 +02:00 · 2026-09-09 15:04:27 +02:00 · 2026-09-09 12:09:14 +02:00
101 changed files with 1535 additions and 11273 deletions
@@ -97,17 +97,16 @@ jobs:

      - name: Validate Custom Widget bundle budget
        run: |
-          pnpm --filter nextjs build
+          pnpm turbo run build --filter=@homarr/nextjs
          pnpm check:custom-widget-bundle

-      - name: Run unit tests
-        run: pnpm test
-
  container:
-    name: Container and E2E
+    name: Container build
+    # Same-repository previews already build amd64; only build a fallback when no digest is available.
    needs: [fast-gate, preview-amd64]
    if: |
      !cancelled() && needs.fast-gate.result == 'success' &&
+      needs.preview-amd64.result != 'failure' && needs.preview-amd64.outputs.digest == '' &&
      (
        github.event_name == 'merge_group' ||
        (github.event_name == 'push' && github.ref == 'refs/heads/release/v2') ||
@@ -115,10 +114,9 @@ jobs:
        (github.event_name == 'workflow_dispatch' && (inputs.operation == 'validate' || inputs.operation == 'publish'))
      )
    runs-on: ubuntu-latest
-    timeout-minutes: 30
+    timeout-minutes: 20
    permissions:
      contents: read
-      packages: read
    steps:
      - uses: actions/checkout@v7
        if: "!env.ACT"
@@ -126,23 +124,10 @@ jobs:
          persist-credentials: false
          ref: ${{ github.event_name == 'workflow_dispatch' && inputs.ref || '' }}

-      - name: Setup
-        uses: ./tooling/github/setup
-
      - name: Set up Docker Buildx
-        if: "!env.ACT"
+        if: needs.preview-amd64.outputs.digest == '' && !env.ACT
        uses: docker/setup-buildx-action@v4

-      - name: Reuse amd64 preview image
-        if: needs.preview-amd64.outputs.digest != '' && !env.ACT
-        env:
-          DIGEST: ${{ needs.preview-amd64.outputs.digest }}
-        run: |
-          echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u "${{ github.actor }}" --password-stdin
-          docker pull "${PREVIEW_IMAGE}@${DIGEST}"
-          docker tag "${PREVIEW_IMAGE}@${DIGEST}" homarr-ci
-          docker tag "${PREVIEW_IMAGE}@${DIGEST}" homarr-e2e
-
      - name: Build container once
        if: needs.preview-amd64.outputs.digest == '' && !env.ACT
        uses: docker/build-push-action@v7
@@ -152,9 +137,7 @@ jobs:
          platforms: linux/amd64
          load: true
          push: false
-          tags: |
-            homarr-ci
-            homarr-e2e
+          tags: homarr-ci
          labels: |
            org.opencontainers.image.source=${{ github.server_url }}/${{ github.repository }}
            org.opencontainers.image.revision=${{ github.sha }}
@@ -182,37 +165,7 @@ jobs:
            fi
          done
          DOCKER_BUILDKIT=1 docker build --platform linux/amd64 \
-            --tag homarr-ci --tag homarr-e2e "${secret_args[@]}" .
-
-      - name: Cache Playwright browsers
-        if: "!env.ACT"
-        id: playwright-cache
-        uses: actions/cache@v6
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
-
-      - name: Install Playwright Chromium
-        if: steps.playwright-cache.outputs.cache-hit != 'true' || env.ACT
-        run: pnpm exec playwright install --with-deps chromium
-
-      - name: Install Playwright system deps
-        if: steps.playwright-cache.outputs.cache-hit == 'true'
-        run: pnpm exec playwright install-deps chromium
-
-      - name: Run E2E tests
-        env:
-          NODE_ENV: development
-          CI: "true"
-        run: pnpm exec vitest e2e --retry 1 --maxWorkers 4
-
-      - name: Upload E2E artifacts
-        if: failure() && !env.ACT
-        uses: actions/upload-artifact@v7
-        with:
-          name: playwright-report
-          path: e2e/test-results/
-          retention-days: 7
+            --tag homarr-ci "${secret_args[@]}" .

  preview-amd64:
    name: Build amd64 preview image
@@ -320,10 +273,10 @@ jobs:

  publish-preview:
    name: Publish multi-platform preview image
-    needs: [container, preview-amd64, preview-arm64]
+    needs: [fast-gate, preview-amd64, preview-arm64]
    if: |
      !cancelled() &&
-      needs.container.result == 'success' &&
+      needs.fast-gate.result == 'success' &&
      needs.preview-amd64.result == 'success' &&
      needs.preview-arm64.result == 'success' &&
      (
@@ -2,8 +2,36 @@ name: Workshop

 on:
  pull_request:
+    paths:
+      - ".github/workflows/workshop.yml"
+      - "apps/workshop/**"
+      - "apps/docs/**"
+      - "packages/custom-widgets/**"
+      - "packages/definitions/**"
+      - "packages/workshop/**"
+      - "tooling/typescript/**"
+      - "patches/**"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - "pnpm-workspace.yaml"
+      - "turbo.json"
+      - ".npmrc"
  push:
    branches: [dev, v2, release/v2, main]
+    paths:
+      - ".github/workflows/workshop.yml"
+      - "apps/workshop/**"
+      - "apps/docs/**"
+      - "packages/custom-widgets/**"
+      - "packages/definitions/**"
+      - "packages/workshop/**"
+      - "tooling/typescript/**"
+      - "patches/**"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - "pnpm-workspace.yaml"
+      - "turbo.json"
+      - ".npmrc"

 permissions:
  contents: read
@@ -15,21 +43,10 @@ concurrency:
 jobs:
  validate:
    runs-on: ubuntu-24.04
-    timeout-minutes: 30
+    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v7
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24.18.0
-      - uses: pnpm/action-setup@v6
-        with:
-          run_install: false
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm --filter @homarr/workshop typecheck
-      - run: pnpm --filter @homarr/docs typecheck
      - run: docker compose --env-file apps/workshop/.env.staging.example -f apps/workshop/docker-compose.staging.yml config --quiet
-      - run: pnpm test:workshop
-      - run: pnpm test:workshop-image

  publish-amd64:
    if: github.event_name == 'push' && (github.ref_name == 'v2' || github.ref_name == 'release/v2' || github.ref_name == 'main')
@@ -23,7 +23,7 @@ Homarr 2.0 is an upgrade, not a brand-new app wearing the same logo. Here is wha

 :::warning Back up before upgrading

-Follow the [v1 to v2 upgrade guide](/docs/getting-started/upgrade-v2) and create a
+Database migrations run automatically when Homarr starts. Create a
 [Homarr backup](/docs/management/backup) first. Do not test a prerelease image on your only production volume.
 Backups are boring. Restores are worse.

@@ -161,7 +161,7 @@ Board startup work runs in parallel, heavy screens load when opened, and identic
 ## Links

 - Try the [Homarr 2.0 preview](https://app-v2.preview.homarr.dev).
- Follow the [v1 to v2 upgrade guide](/docs/getting-started/upgrade-v2).
+- Follow the [v2 beta setup guide](/docs/getting-started/upgrade-v2).
 - Follow the [v2 release pull request](https://github.com/homarr-labs/homarr/pull/6545) and [public beta thread](https://github.com/homarr-labs/homarr/issues/6600).
 - Compare [v1.76.2 with the release/v2 branch](https://github.com/homarr-labs/homarr/compare/v1.76.2...release/v2).
 - Read the guides for [Boards](/docs/management/boards), [Custom Widgets](/docs/management/custom-widgets), [Assistant](/docs/management/assistant), [MCP](/docs/management/mcp) and [Docker labels](/docs/integrations/docker-labels).
@@ -82,3 +82,25 @@ Workshop contributors can set up PocketBase and Docusaurus with the dedicated
 - `pnpm build` — production monorepo build.
 - `docker build -t homarr .` — build a production Docker image.
 - `docker run -p 7575:7575 -e SECRET_ENCRYPTION_KEY='your_64_character_hex_string' homarr:<name>` — run it.
+
+## CI and focused validation
+
+The main CI workflow runs lint, typechecking, affected workspace builds, workspace configuration checks, OpenAPI validation, and Custom Widget architecture and bundle checks. Unit and E2E suites do not run in CI. Preview images publish after the Fast gate and both architecture builds succeed; browser tests do not block publication. The container job builds an amd64 image when no preview image was built.
+
+Workshop CI runs only when its workflow or Docker build inputs change. It validates Compose configuration and publishes production images on its configured release branches. Its Docker integration and image tests are manual; workspace typechecks run in the main Fast gate.
+
+Choose the smallest relevant suite when changing behavior:
+
+| Command                                           | Scope                                                          | Requirements                                                          |
+| ------------------------------------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `pnpm test <file>`                                | Focused unit or contract tests                                 | Workspace dependencies                                                |
+| `pnpm test`                                       | All unit and contract tests, without Docker integration suites | Workspace dependencies                                                |
+| `pnpm test:coverage`                              | Unit and contract tests with coverage                          | Workspace dependencies                                                |
+| `pnpm test:integration <file>`                    | Docker-backed service and database compatibility tests         | Docker                                                                |
+| `pnpm test:e2e <file>`                            | Browser and container scenarios                                | Docker; Playwright Chromium and system dependencies for browser tests |
+| `pnpm test:docs-screenshots`                      | Regenerate Assistant documentation screenshots                 | Same browser prerequisites                                            |
+| `pnpm test:workshop` / `pnpm test:workshop-image` | Workshop integration / production-image validation             | Docker                                                                |
+
+Omit `<file>` to run all tests in that command's scope. E2E and screenshot commands use a local image tagged `homarr-e2e`, or an image selected with `HOMARR_E2E_IMAGE`. The default commands run once without automatic retries; coverage is opt-in. The screenshot generator is excluded from both unit and E2E commands.
+
+Keep behavioral coverage for authorization, migrations, persistence, and widget execution. Avoid tests that only search source code for particular component names, JSX, CSS, or documentation wording.
@@ -1,5 +1,5 @@
 ---
-title: Upgrade from v1 to v2
+title: Try the v2 beta
 sidebar_position: 2
 tags:
  - Getting started
@@ -8,8 +8,20 @@ tags:
  - Backup
 ---

-Homarr v2 upgrades the existing v1 database in place. Keep the same data storage, database configuration, and
-`SECRET_ENCRYPTION_KEY`; only change the Homarr image or package version for the first start.
+This page covers the temporary Homarr v2 public beta. Try the [live demo](https://app-v2.preview.homarr.dev/)
+without installing anything, or run the beta image published in the
+[public beta announcement](https://github.com/homarr-labs/homarr/issues/6600):
+
+```sh
+docker pull ghcr.io/homarr-labs/homarr-test:v2
+```
+
+For a fresh beta installation, follow the [Docker installation guide](/docs/getting-started/installation/docker),
+use `ghcr.io/homarr-labs/homarr-test:v2` as the image, and use a separate `/appdata` volume.
+Set `WORKSHOP_API_URL=https://v2.preview.homarr.dev` to use the preview Workshop.
+
+Homarr runs database migrations automatically at startup; no manual database migration command is needed.
+Once v2 is released, existing installations can use their normal update process. The beta image below is temporary.

 :::danger Back up before starting v2

@@ -18,21 +30,23 @@ before starting v2. See [Backup and restore](/docs/management/backup) for detail

 :::

-## Upgrade
+## Try the beta with existing v1 data

-1. Pin the Homarr image to `ghcr.io/homarr-labs/homarr:v2.0.0` for the first v2 start.
+1. Change the Homarr image to `ghcr.io/homarr-labs/homarr-test:v2`.
 2. Keep the existing `/appdata` mount, database variables, Redis configuration, and `SECRET_ENCRYPTION_KEY` unchanged.
 3. Start one Homarr replica and follow its logs. Startup must reach `Migration complete`; Homarr aborts startup when a
   database migration fails.
 4. Open Homarr and sign in. Confirm **Management → About** reports v2 before starting additional replicas.
-5. After validation, keep the version pinned or return to your normal stable release policy.
+5. Keep using the beta image for beta updates. To return to v1, restore the pre-beta backup as described below.

-For Docker Compose, the change is limited to the image tag before the usual update:
+Keep your other existing Compose settings, including environment variables. For Docker Compose, update the image and preview Workshop URL before the usual update:

 ```yaml
 services:
  homarr:
-    image: ghcr.io/homarr-labs/homarr:v2.0.0
+    image: ghcr.io/homarr-labs/homarr-test:v2
+    environment:
+      WORKSHOP_API_URL: https://v2.preview.homarr.dev
 ```

 ```sh
@@ -27,6 +27,12 @@ session cookie.
 API keys do not expire automatically and act as the user that created them. Every request uses that user's group and
 resource permissions.

+## Invitation dates
+
+`POST /api/invites` and the tRPC `invite.createInvite` procedure accept `expirationDate` as an ISO 8601 timestamp with a
+timezone, for example `2026-12-01T18:00:00Z`. Homarr validates the timestamp and stores it as a date. tRPC callers should
+send the ISO string rather than a JavaScript `Date` object.
+
 ## Health probes

 The liveness endpoint does not require authentication:
@@ -62,11 +68,6 @@ Each board has exactly one Mobile and one Base layout. Mobile uses breakpoint `0
 layouts can use any other breakpoint, and Homarr selects the highest breakpoint that fits the viewport. Preserve layout
 roles and use the canonical layouts returned by save operations, including generated IDs.

-Board settings expose `fixedScaling` and `fixedItemSize`. The default fitted mode uses `fixedScaling: false`; setting it
-to `true` keeps each `1 × 1` tile at `fixedItemSize` pixels, which must be an integer from `40` through `200`. The
-configured size is retained while fixed scaling is disabled. Layout `columnCount` remains the maximum total column count,
-including fixed sidebars.
-
 Creating or changing an integration-backed widget requires use access to each newly selected integration.

 ## Docker targets
@@ -27,27 +27,27 @@ Mobile and Base are protected layouts. New boards use three Mobile columns; Base
 creation. Additional layouts use unique breakpoints. Homarr selects the layout with the highest breakpoint that fits
 the current viewport.

-By default, Homarr fits the complete fixed-proportion tile grid to the available width. Enable **Fixed scaling** in the
-board's Layout settings to render each top-level `1 × 1` tile at the configured CSS-pixel size instead. A fixed dashboard is
-centred when it fits and scrolls both horizontally and vertically when it does not, without adding extra space above
-the board.
-
-The column count is the maximum total for that layout, including any fixed sidebars. For example, a Base layout with
-five columns and no sidebars remains a centred five-column dashboard on an ultrawide screen. **Reset from Base**
-regenerates a Mobile or custom layout from the current Base layout.
+Tiles use fixed `200 × 200` logical-pixel cells with a `24px` gap. Homarr scales the complete layout to the available
+width instead of changing each widget's proportions. **Reset from Base** regenerates a Mobile or custom layout from the
+current Base layout.

 ### Containers and rails

 A **Container** groups apps, widgets, and nested Containers. It can have a label, collapse control, app-opening action,
 border color, and CSS classes.

+Items can occupy the outermost rows and columns of a Container. The drop preview shows the position where the item
+will remain when released.
+Dragging an item onto another item of the same size swaps their positions. Displaced items snap directly to their
+previewed positions without a movement animation and stay there when you release the pointer.
+
 A **rail** reserves one to three columns at the left or right of a non-Mobile layout. Rails stay fixed while the page
 scrolls and store their contents separately for each layout.

 ## Edit a board

-Enter edit mode from the board header or account menu to add, move, resize, configure, or remove content. The account
-menu also works when the header is hidden, using the floating user button. Choose **Save board** to persist changes.
+Enter edit mode from the board header to add, move, resize, configure, or remove content. Save the board to persist the
+layout.

 - Drag from an item's inactive content area; Containers use their grip.
 - Hold `Ctrl` on Windows/Linux or `Cmd` on macOS to select several items.
@@ -56,40 +56,19 @@ menu also works when the header is hidden, using the floating user button. Choos
 - Press Escape during a pointer or touch interaction to restore the item to its previous position.

 The add-content menu can create an app, integration, widget, or Container without leaving the board.
-Right-click empty board space to open this menu at the cursor. Selecting an action enters edit mode automatically.
-These actions require board editing permission; creating integrations also requires integration creation permission.
-Right-clicking existing content keeps its own menu. Hold Shift while right-clicking to use the browser menu.
 When adding apps, click one app to add it immediately, or choose **Select multiple** to add several at once. `Ctrl`/`Cmd`
 click remains available as a shortcut.

 ## Board settings

-Settings are organized into tabs, with one **Save changes** action for the whole board. Switching tabs retains your
-draft; **Discard** restores the saved settings.
+Board settings cover:

- **Layout:** tile sizing, responsive layouts, breakpoints, maximum columns, and rails.
- **Appearance:** colors, opacity, icon color, item radius, and background image settings beside a live layout preview.
- **General:** page title, browser title, logo, favicon, and app status.
- **Advanced:** custom CSS applied only to this board.
- **Access control:** permissions, visibility, renaming, and deletion (requires full access).
-
-### Try a layout before saving
-
-Choose **Fixed scaling** or **Fit to screen** under **Tile sizing**. Fixed sizing accepts **40–200 px**; its square
-sample is shown at half size with the configured dimensions underneath. The size is retained when you switch modes.
-
-Select a layout to edit its columns, breakpoint, and side rails beside the compact **Board preview**. It uses the
-familiar Boards thumbnail, with the board's actual grid proportions and rails aligned beside the main canvas.
-The indicated screen width represents the selected layout. The miniature stays contained, centres fixed grids that
-fit, and scrolls when needed. Changes to sizing and appearance appear immediately, before saving.
-
-Choose **Item radius** using the same visual corner-style picker as server branding. Selecting a card updates the
-board preview immediately; save the board settings to apply it.
-
-In fixed mode, browser `Cmd`/`Ctrl` + `+` or `-` zoom works naturally: a 200 × 200 CSS-pixel tile keeps those dimensions
-while its physical screen size changes with zoom. Homarr does not shrink the tile to cancel the browser's zoom.
-Your live board can still select a different saved layout when its viewport crosses a breakpoint. Nested Containers
-fit their inner grids into their own frames; the configured tile size describes the top-level board grid.
+- **General:** page title, browser title, logo, and favicon.
+- **Layout:** responsive layouts, breakpoints, columns, and rails.
+- **Background:** image, attachment, size, and repeat behavior.
+- **Appearance:** colors, opacity, icon color, and item radius.
+- **Custom CSS:** styles applied only to the current board.
+- **Behaviour:** app status and widget context-menu behavior.

 See [Styling](/docs/advanced/styling) for board and global CSS.

@@ -8,18 +8,17 @@ tags:

 # Model Context Protocol (MCP)

-Homarr exposes a stateless [Model Context Protocol](https://modelcontextprotocol.io) server at `/api/mcp`. It maps the
-current Homarr API to tools for compatible AI clients.
+Connect an AI client to Homarr to manage boards, apps, integrations, and other services through MCP tools.
+
+Homarr uses MCP v2 (protocol `2026-07-28`) at `/api/mcp`, with compatibility for 2025 Streamable HTTP clients.
+Requests are stateless: each request authenticates independently, without an MCP session ID.

 ![The AI / MCP management tab](./img/mcp.png)

-The endpoint implements MCP `2026-07-28` and accepts 2025 Streamable HTTP clients through a compatibility path. The old
-`/api/mcp/mcp` route remains as an alias; use `/api/mcp` for new clients.
+## Connect a client

-## Configure a client
-
-Create an API key under **Management → Tools → API → Authentication**, then add the endpoint and header to the client's
-MCP configuration:
+Create an API key under **Management → Tools → API → Authentication**. Add this configuration to your client,
+replacing the URL and API key:

 ```json
 {
@@ -34,7 +33,10 @@ MCP configuration:
 }
 ```

-Clients without Streamable HTTP support can use `mcp-remote` over STDIO:
+Use the complete key, including the ID, dot, and token. Keep it private and use HTTPS for remote connections.
+The **AI / MCP** tab on Homarr's API page provides your endpoint, configuration, and available tools.
+
+For clients that only support STDIO, use `mcp-remote`:

 ```json
 {
@@ -47,26 +49,30 @@ Clients without Streamable HTTP support can use `mcp-remote` over STDIO:
 }
 ```

-The **AI / MCP** tab on Homarr's API page shows the current endpoint, configuration, and generated tool catalog. Filter
-the catalog by namespace, tool name, or description; matching categories expand automatically.
+### OAuth

-## Authentication and permissions
+Clients with OAuth support can authorize through OAuth 2.1 with PKCE instead of an API key.
+Homarr publishes discovery metadata under `/.well-known/`.

-MCP supports API keys and OAuth 2.1 with PKCE. API keys are simpler for direct client configuration; OAuth is available
-for clients that support dynamic authorization.
+If your reverse proxy does not preserve the public host and protocol, set `BASE_URL` to your public origin,
+such as `https://homarr.example.com`, without a path.

-When Homarr is behind a reverse proxy that does not preserve the public host and protocol, set `BASE_URL` to the exact
-public origin, for example `https://homarr.example.com`. Do not include a path. OAuth clients discover the authorization
-server and protected resource through Homarr's `/.well-known/` routes.
+## Permissions and tools

-Tools use the permissions of the API key owner or authorized user. Creating a key does not grant additional access.
-Custom Widget and Workshop authoring tools, prompts, and resources are visible only to administrators.
+Tools use the permissions of the API key owner or OAuth user. Queries read data; mutations change it.
+Inspect the **AI / MCP** tab or your client's tool list for available actions.

-Use HTTPS when the endpoint crosses an untrusted network.
+Custom Widget and Workshop authoring tools, prompts, and resources require administrator access.
+For Custom Widgets, install the official skill and follow the preview-and-evidence workflow described in
+[Connect an agent](./custom-widgets/agent-authoring). Secret values are configured in Homarr and are never returned
+through MCP.

-## Verify the endpoint
+The built-in [Assistant](./assistant) uses the same tool catalog with the current Homarr session and asks for approval
+before mutations by default.

-The 2025 compatibility path accepts a compact `tools/list` request:
+## Verify the connection
+
+This request lists tools through the older-client compatibility path. It checks authentication and tool discovery:

 ```sh
 curl -X POST \
@@ -77,17 +83,14 @@ curl -X POST \
  https://homarr.example.com/api/mcp
 ```

-The removed HTTP+SSE `/sse` and `/message` transports return `410 Gone`.
+A successful discovery or initialization response alone does not verify that tools can be listed.

-## Tools and resources
+## Troubleshooting

-The generated catalog includes available board, app, integration, Docker, Kubernetes, media, DNS, download, and other
-Homarr procedures. Queries are read-only; mutations change state. The exact catalog depends on the release and current
-user permissions, so inspect `tools/list` or the table in Homarr instead of relying on a static list.
-
-For Custom Widgets, install the official skill and follow the preview-and-evidence workflow described in
-[Connect an agent](./custom-widgets/agent-authoring). Secret values are configured in Homarr and are never returned
-through MCP.
-
-The built-in [Assistant](./assistant) uses the same tool catalog with the current Homarr session and asks for approval
-before mutations by default.
+- **`invalid_token`**: copy the complete API key in `<id>.<token>` format.
+- **Missing tools**: check the user's permissions. Invalid tool schemas and duplicate names are omitted; check server
+  logs for `MCP tool omitted from catalog` and report the diagnostic with your Homarr version. Exclude API keys.
+- **`Date cannot be represented in JSON Schema`**: update Homarr. Older versions could fail to list all tools because
+  of an unsupported date schema.
+- **`410 Gone` on `/sse` or `/message`**: use `/api/mcp` with a Streamable HTTP client. The old `/api/mcp/mcp` URL remains
+  an alias.
@@ -2151,14 +2151,6 @@
                      }
                    ]
                  },
-                  "fixedScaling": {
-                    "type": "boolean"
-                  },
-                  "fixedItemSize": {
-                    "type": "integer",
-                    "minimum": 40,
-                    "maximum": 200
-                  },
                  "disableStatus": {
                    "type": "boolean"
                  }
@@ -2580,7 +2572,9 @@
                "type": "object",
                "properties": {
                  "expirationDate": {
-                    "type": "string"
+                    "type": "string",
+                    "format": "date-time",
+                    "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z|([+-](?:[01]\\d|2[0-3]):[0-5]\\d)))$"
                  }
                },
                "required": [
@@ -1,6 +1,7 @@
 .columns {
  display: grid;
  align-items: start;
+  gap: 24px;
 }

 .lane {
@@ -26,10 +27,3 @@
  outline-offset: -0.0625rem;
  border-radius: var(--mantine-radius-md);
 }
-
-:global([data-canvas-scaling="fixed"]) .gutter {
-  --board-gutter-sticky-top: 0px;
-  --board-gutter-viewport-height: calc(
-    var(--board-canvas-fixed-viewport-height) * var(--board-canvas-inverse-scale, 1)
-  );
-}
@@ -13,16 +13,15 @@ import { FloatingTip } from "@homarr/ui";
 import { BoardAdvancedFocusProvider } from "~/components/board/advanced-focus/context";
 import { BoardAppsSpotlightRegistrar } from "~/components/board/board-apps-spotlight-registrar";
 import { BoardEmptyState } from "~/components/board/board-empty-state";
-import { BoardContextMenu } from "~/components/board/board-context-menu";
 import { BoardSetupChecklist } from "~/components/board/board-setup-checklist";
 import {
  getBoardLaneColumnCount,
  getInitialBoardLogicalHeight,
+  getLogicalGridSize,
+  LOGICAL_GRID_GAP,
  getRootSectionForLane,
 } from "~/components/board/layout";
 import { ScaledBoardCanvas } from "~/components/board/layout/scaled-board-canvas";
-import { BOARD_LANE_GAP, getBoardCanvasGeometry } from "~/components/board/layout/canvas-geometry";
-import { getBoardScaling } from "~/components/board/layout/scaling";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
 import { BoardGridEditorBoundary } from "~/components/board/sections/grid/board-grid-editor-boundary";
 import { GridEditorRegistryProvider } from "~/components/board/sections/grid/grid-editor-registry";
@@ -61,91 +60,99 @@ export const ClientBoard = () => {
  const leftColumnCount = getBoardLaneColumnCount(currentLayout, "left");
  const mainColumnCount = getBoardLaneColumnCount(currentLayout, "main");
  const rightColumnCount = getBoardLaneColumnCount(currentLayout, "right");
-  const { width: logicalWidth, gridTemplateColumns } = getBoardCanvasGeometry(currentLayout);
+  const laneWidths = [leftColumnCount, mainColumnCount, rightColumnCount]
+    .filter((columnCount) => columnCount > 0)
+    .map(getLogicalGridSize);
+  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,
+  ]
+    .filter((value) => value !== null)
+    .join(" ");

  const content = (
    <BoardSelectionGridProvider>
      <BoardAdvancedFocusProvider>
-        <BoardContextMenu>
-          <Box h="100%" pos="relative" data-homarr-dev-benchmark-board>
-            <BoardAppsSpotlightRegistrar />
-            <BoardBackgroundVideo />
-            <BoardEmptyState />
-            <BoardSetupChecklist />
-            <BoardSectionCollapseProvider>
-              <BoardGridPortalHost>
-                <ScaledBoardCanvas
-                  logicalWidth={logicalWidth}
-                  initialLogicalHeight={initialLogicalHeight}
-                  initialAvailableWidth={initialAvailableWidth}
-                  scaling={getBoardScaling(board)}
-                  label={board.name}
-                >
-                  <BoardGridEditorBoundary key={currentLayoutId}>
-                    <div className={classes.columns} style={{ gap: BOARD_LANE_GAP, gridTemplateColumns }}>
-                      {leftColumnCount > 0 && leftSection && (
-                        <aside
-                          className={`${classes.lane} ${classes.gutter}`}
-                          aria-label={t("leftRail")}
-                          data-board-gutter="left"
-                          data-board-editing={isEditMode ? "true" : undefined}
-                        >
-                          <BoardEmptySection
-                            key={`${currentLayoutId}-${leftSection.id}`}
-                            section={leftSection}
-                            columnCount={leftColumnCount}
-                            requestedRowCount={0}
-                            railPlacement="left"
-                          />
-                        </aside>
-                      )}
-
-                      <section className={classes.lane} aria-label={t("canvas")}>
+        <Box h="100%" pos="relative" data-homarr-dev-benchmark-board>
+          <BoardAppsSpotlightRegistrar />
+          <BoardBackgroundVideo />
+          <BoardEmptyState />
+          <BoardSetupChecklist />
+          <BoardSectionCollapseProvider>
+            <BoardGridPortalHost>
+              <ScaledBoardCanvas
+                logicalWidth={logicalWidth}
+                initialLogicalHeight={initialLogicalHeight}
+                initialAvailableWidth={initialAvailableWidth}
+                label={board.name}
+              >
+                <BoardGridEditorBoundary key={currentLayoutId}>
+                  <div className={classes.columns} style={{ gridTemplateColumns }}>
+                    {leftColumnCount > 0 && leftSection && (
+                      <aside
+                        className={`${classes.lane} ${classes.gutter}`}
+                        aria-label={t("leftRail")}
+                        data-board-gutter="left"
+                        data-board-editing={isEditMode ? "true" : undefined}
+                      >
                        <BoardEmptySection
-                          key={`${currentLayoutId}-${mainSection.id}`}
-                          section={mainSection}
-                          columnCount={mainColumnCount}
+                          key={`${currentLayoutId}-${leftSection.id}`}
+                          section={leftSection}
+                          columnCount={leftColumnCount}
                          requestedRowCount={0}
+                          railPlacement="left"
                        />
-                      </section>
+                      </aside>
+                    )}

-                      {rightColumnCount > 0 && rightSection && (
-                        <aside
-                          className={`${classes.lane} ${classes.gutter}`}
-                          aria-label={t("rightRail")}
-                          data-board-gutter="right"
-                          data-board-editing={isEditMode ? "true" : undefined}
-                        >
-                          <BoardEmptySection
-                            key={`${currentLayoutId}-${rightSection.id}`}
-                            section={rightSection}
-                            columnCount={rightColumnCount}
-                            requestedRowCount={0}
-                            railPlacement="right"
-                          />
-                        </aside>
-                      )}
-                    </div>
-                  </BoardGridEditorBoundary>
-                </ScaledBoardCanvas>
-              </BoardGridPortalHost>
-            </BoardSectionCollapseProvider>
-            <BoardSelectionToolbar />
-            <FloatingTip
-              opened={isEditMode}
-              showDelay={2_000}
-              dismissAfter={3_000}
-              transitionDuration={200}
-              closable={false}
-              alertProps={{ color: "primaryColor", icon: <IconBulb size={18} />, variant: "light" }}
-            >
-              {tTips("multiSelectApps")}
-            </FloatingTip>
-          </Box>
-        </BoardContextMenu>
+                    <section className={classes.lane} aria-label={t("canvas")}>
+                      <BoardEmptySection
+                        key={`${currentLayoutId}-${mainSection.id}`}
+                        section={mainSection}
+                        columnCount={mainColumnCount}
+                        requestedRowCount={0}
+                      />
+                    </section>
+
+                    {rightColumnCount > 0 && rightSection && (
+                      <aside
+                        className={`${classes.lane} ${classes.gutter}`}
+                        aria-label={t("rightRail")}
+                        data-board-gutter="right"
+                        data-board-editing={isEditMode ? "true" : undefined}
+                      >
+                        <BoardEmptySection
+                          key={`${currentLayoutId}-${rightSection.id}`}
+                          section={rightSection}
+                          columnCount={rightColumnCount}
+                          requestedRowCount={0}
+                          railPlacement="right"
+                        />
+                      </aside>
+                    )}
+                  </div>
+                </BoardGridEditorBoundary>
+              </ScaledBoardCanvas>
+            </BoardGridPortalHost>
+          </BoardSectionCollapseProvider>
+          <BoardSelectionToolbar />
+          <FloatingTip
+            opened={isEditMode}
+            showDelay={2_000}
+            dismissAfter={3_000}
+            transitionDuration={200}
+            closable={false}
+            alertProps={{ color: "primaryColor", icon: <IconBulb size={18} />, variant: "light" }}
+          >
+            {tTips("multiSelectApps")}
+          </FloatingTip>
+        </Box>
      </BoardAdvancedFocusProvider>
    </BoardSelectionGridProvider>
  );
@@ -36,7 +36,7 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
 }: Props<TParams>) => {
  return {
    layout: createBoardLayout({
-      headerBoardEditAction: <BoardContentEditAction />,
+      headerBoardEditAction: <BoardContentEditAction demoReadOnly={env.DEMO_MODE && env.DEMO_READ_ONLY} />,
      headerBoardSettingsAction: <BoardContentSettingsAction demoReadOnly={env.DEMO_MODE && env.DEMO_READ_ONLY} />,
      getInitialBoardAsync: getInitialBoard,
      withTour: true,
@@ -3,14 +3,18 @@
 import { useEffect, useRef } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Group, Menu } from "@mantine/core";
-import { IconChevronDown, IconPlus } from "@tabler/icons-react";
+import { IconBox, IconChevronDown, IconLayoutGridAdd, IconPlug, IconPlus, IconResize } from "@tabler/icons-react";

+import { useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useModalAction } from "@homarr/modals";
+import { AppSelectModal } from "@homarr/modals-collection";
 import { useI18n } from "@homarr/translation/client";

+import { useItemActions } from "~/components/board/items/item-actions";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
-import { BoardAddMenuItems } from "~/components/board/board-add-menu-items";
+import { useContainerActions } from "~/components/board/sections/container/container-actions";
+import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
 import { HeaderButton } from "~/components/layout/header/button";

 export default function BoardEditActions() {
@@ -18,9 +22,16 @@ export default function BoardEditActions() {
 }

 const AddMenu = () => {
+  const { data: session } = useSession();
  const board = useRequiredBoard();
  const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
+  const { openModal: openAppSelectModal } = useModalAction(AppSelectModal);
+  const { openModal: openIntegrationSelectModal } = useModalAction(IntegrationSelectModal);
+  const { addContainer } = useContainerActions();
+  const { createItem } = useItemActions();
  const tBoard = useI18n("board");
+  const tIntegration = useI18n("integration");
+  const tContainer = useI18n("section.container");
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();
@@ -37,6 +48,34 @@ const AddMenu = () => {
    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
  }, [board.id, openItemSelectModal, pathname, router, searchParams]);

+  const handleSelectItem = () => {
+    openItemSelectModal({ boardId: board.id });
+  };
+
+  const handleSelectApp = () => {
+    openAppSelectModal({
+      onSelect: (app) => {
+        createItem({
+          kind: "app",
+          options: { appId: app.id },
+        });
+      },
+      onSelectMany: (apps) => {
+        for (const app of apps) {
+          createItem({
+            kind: "app",
+            options: { appId: app.id },
+          });
+        }
+      },
+      withCreate: session?.user.permissions.includes("app-create") ?? false,
+    });
+  };
+
+  const handleAddIntegration = () => {
+    openIntegrationSelectModal({ completionBoardId: board.id });
+  };
+
  return (
    <Menu position="bottom-end">
      <Menu.Target>
@@ -48,7 +87,21 @@ const AddMenu = () => {
        </HeaderButton>
      </Menu.Target>
      <Menu.Dropdown style={{ transform: "translate(-3px, 0)" }}>
-        <BoardAddMenuItems />
+        <Menu.Item leftSection={<IconResize size={20} />} onClick={handleSelectItem}>
+          {tBoard("emptyState.addWidget")}
+        </Menu.Item>
+        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectApp}>
+          {tBoard("emptyState.addApp")}
+        </Menu.Item>
+        {session?.user.permissions.includes("integration-create") && (
+          <Menu.Item leftSection={<IconPlug size={20} />} onClick={handleAddIntegration}>
+            {tIntegration("action.create")}
+          </Menu.Item>
+        )}
+        <Menu.Divider />
+        <Menu.Item leftSection={<IconLayoutGridAdd size={20} />} onClick={addContainer}>
+          {tContainer("action.create")}
+        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
@@ -1,247 +0,0 @@
-"use client";
-
-import type { PropsWithChildren } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useHotkeys } from "@mantine/hooks";
-import { notifications } from "@mantine/notifications";
-
-import { clientApi } from "@homarr/api/client";
-import { useRequiredBoard } from "@homarr/boards/context";
-import { useEditMode } from "@homarr/boards/edit-mode";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { env } from "@homarr/common/env";
-import { hotkeys } from "@homarr/definitions";
-import { useConfirmModal } from "@homarr/modals";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { useBoardPermissions } from "~/components/board/permissions/client";
-import { loadGridEditorAsync, scheduleGridEditorWarmup } from "~/components/board/sections/grid/grid-editor-loader";
-import type * as EditActionsModule from "./_edit-actions";
-import { BoardEditingContext } from "~/components/board/board-editing-context";
-
-let editActionsModulePromise: Promise<typeof EditActionsModule> | undefined;
-const loadEditActionsAsync = () => {
-  editActionsModulePromise ??= import("./_edit-actions").catch((error: unknown) => {
-    editActionsModulePromise = undefined;
-    throw error;
-  });
-  return editActionsModulePromise;
-};
-const loadBoardEditorAsync = async () =>
-  await Promise.all([
-    loadGridEditorAsync(),
-    loadEditActionsAsync(),
-    import("~/components/board/items/item-menu"),
-    import("~/components/board/sections/container/container-menu"),
-  ]);
-
-export type BoardEditingControls = ReturnType<typeof useBoardEditingController>;
-
-export const BoardEditingProvider = ({
-  children,
-  enabled,
-  demoReadOnly,
-}: PropsWithChildren<{ enabled: boolean; demoReadOnly: boolean }>) => {
-  if (!enabled) return children;
-  return <ActiveBoardEditingProvider demoReadOnly={demoReadOnly}>{children}</ActiveBoardEditingProvider>;
-};
-const ActiveBoardEditingProvider = ({ children, demoReadOnly }: PropsWithChildren<{ demoReadOnly: boolean }>) => {
-  const controller = useBoardEditingController(demoReadOnly);
-  return <BoardEditingContext.Provider value={controller}>{children}</BoardEditingContext.Provider>;
-};
-const useBoardEditingController = (demoReadOnly: boolean) => {
-  const [isEditMode, { open, close }] = useEditMode();
-  const [editorLoadState, setEditorLoadState] = useState<"scheduled" | "loading" | "ready" | "error">("scheduled");
-  const [isEnteringEditMode, setIsEnteringEditMode] = useState(false);
-  const board = useRequiredBoard();
-  const { hasChangeAccess } = useBoardPermissions(board);
-  const utils = clientApi.useUtils();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { openConfirmModal } = useConfirmModal();
-  const tCommon = useI18n("common");
-  const tBoardSetting = useI18n("board.setting");
-  const t = useI18n("board.action.edit");
-  const returnToLayoutSettings =
-    isEditMode &&
-    searchParams.get("edit") === "true" &&
-    searchParams.get("layout") !== null &&
-    searchParams.get("returnTo") === "settings";
-  const latestBoardRef = useRef(board);
-
-  latestBoardRef.current = board;
-  const { mutate: saveBoard, isPending } = clientApi.board.saveBoard.useMutation({
-    onMutate(boardToSave) {
-      boardToSave.items.forEach(({ id }) => notifications.hide(`board-item-created:${id}`));
-    },
-    onSuccess() {
-      showSuccessNotification({
-        title: tCommon("notification.update.success"),
-        message: t("notification.success.message"),
-      });
-      void utils.board.getBoardByName.invalidate({ name: board.name });
-      void utils.widget.customApi.getData.invalidate();
-      void revalidatePathActionAsync(`/boards/${board.name}`);
-      close();
-      if (returnToLayoutSettings) router.push(`/boards/${board.name}/settings?tab=layout`);
-    },
-    onError() {
-      showErrorNotification({
-        title: tCommon("notification.update.error"),
-        message: t("notification.error.message"),
-      });
-    },
-  });
-
-  const discardDemoChanges = useCallback(() => {
-    void utils.board.getBoardByName.invalidate({ name: board.name });
-    close();
-  }, [utils, board.name, close]);
-
-  const prepareEditorAsync = useCallback(async () => {
-    if (editorLoadState === "ready") return;
-
-    setEditorLoadState("loading");
-    try {
-      await loadBoardEditorAsync();
-      setEditorLoadState("ready");
-    } catch {
-      setEditorLoadState("error");
-      throw new Error("Unable to load the board editor");
-    }
-  }, [editorLoadState]);
-
-  useEffect(() => {
-    return scheduleGridEditorWarmup(async () => {
-      setEditorLoadState("loading");
-      try {
-        await loadBoardEditorAsync();
-        setEditorLoadState("ready");
-      } catch {
-        setEditorLoadState("error");
-      }
-    });
-  }, []);
-
-  const prewarmEditor = useCallback(() => {
-    void prepareEditorAsync().catch(() => {
-      // A click or hotkey retries and reports the error.
-    });
-  }, [prepareEditorAsync]);
-
-  const enter = useCallback(async () => {
-    if (!hasChangeAccess || isPending || isEnteringEditMode) return false;
-    if (isEditMode) return true;
-    setIsEnteringEditMode(true);
-    try {
-      await prepareEditorAsync();
-      open();
-      return true;
-    } catch {
-      showErrorNotification({
-        title: t("notification.loadError.title"),
-        message: t("notification.loadError.message"),
-      });
-      return false;
-    } finally {
-      setIsEnteringEditMode(false);
-    }
-  }, [hasChangeAccess, isPending, isEnteringEditMode, isEditMode, open, prepareEditorAsync, t]);
-
-  const toggle = useCallback(async () => {
-    if (!hasChangeAccess || isPending || isEnteringEditMode) return;
-    if (!isEditMode) return enter();
-    if (demoReadOnly) return discardDemoChanges();
-    saveBoard(latestBoardRef.current);
-  }, [hasChangeAccess, isPending, isEnteringEditMode, isEditMode, enter, demoReadOnly, discardDemoChanges, saveBoard]);
-
-  const cancelLayoutEdit = useCallback(() => {
-    openConfirmModal({
-      title: tBoardSetting("section.layout.edit.cancel.title"),
-      children: tBoardSetting("section.layout.edit.cancel.message"),
-      confirmProps: { children: tCommon("action.discard"), color: "red" },
-      onConfirm() {
-        void (async () => {
-          await utils.board.getBoardByName.invalidate({ name: board.name });
-          close();
-          router.push(`/boards/${board.name}/settings?tab=layout`);
-        })();
-      },
-    });
-  }, [board.name, close, openConfirmModal, router, tBoardSetting, tCommon, utils.board.getBoardByName]);
-
-  useHotkeys([[hotkeys.toggleBoardEdit, () => void toggle()]]);
-  usePreventLeaveWithDirty(isEditMode && hasChangeAccess);
-
-  let label = t("enter");
-  if (isEditMode) label = t("save");
-  if (isEditMode && demoReadOnly) label = t("exit");
-  return {
-    isEditMode,
-    hasChangeAccess,
-    label,
-    toggle,
-    enter,
-    prewarmEditor,
-    editorLoadState,
-    isPending,
-    isEnteringEditMode,
-    returnToLayoutSettings,
-    cancelLayoutEdit,
-  };
-};
-
-const anchorSelector = "a[href]:not([target='_blank'])";
-const usePreventLeaveWithDirty = (isDirty: boolean) => {
-  const tBoard = useI18n("board");
-  const tCommon = useI18n("common");
-  const { openConfirmModal } = useConfirmModal();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!isDirty) return;
-
-    const handleClick = (event: MouseEvent) => {
-      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-      const target = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>(anchorSelector) : null;
-      if (!target) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      openConfirmModal({
-        title: tBoard("action.edit.confirmLeave.title"),
-        children: tBoard("action.edit.confirmLeave.message"),
-        onConfirm() {
-          router.push(target.href);
-        },
-        confirmProps: {
-          children: tCommon("action.discard"),
-        },
-      });
-    };
-
-    const handlePopState = (event: Event) => {
-      window.history.pushState(null, document.title, window.location.href);
-      event.preventDefault();
-    };
-
-    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-      if (env.NODE_ENV === "development") return;
-
-      event.preventDefault();
-      event.returnValue = true;
-    };
-
-    document.addEventListener("click", handleClick, true);
-    window.addEventListener("popstate", handlePopState);
-    window.addEventListener("beforeunload", handleBeforeUnload);
-
-    return () => {
-      document.removeEventListener("click", handleClick, true);
-      window.removeEventListener("popstate", handlePopState);
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-    };
-  }, [isDirty, openConfirmModal, router, tBoard, tCommon]);
-};
@@ -1,15 +1,45 @@
 "use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useHotkeys } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
 import { IconDeviceFloppy, IconPencil, IconPencilOff, IconSettings, IconX } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { env } from "@homarr/common/env";
+import { hotkeys } from "@homarr/definitions";
+import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import { useBoardPermissions } from "~/components/board/permissions/client";
-import { useOptionalBoardEditing } from "~/components/board/board-editing-context";
+import { loadGridEditorAsync, scheduleGridEditorWarmup } from "~/components/board/sections/grid/grid-editor-loader";
 import { HeaderButton } from "~/components/layout/header/button";
 import { TourTarget } from "~/components/layout/header/tour-target";
-const BoardEditActions = dynamic(() => import("./_edit-actions"), { ssr: false });
-export const BoardContentEditAction = () => {
+import type * as EditActionsModule from "./_edit-actions";
+
+let editActionsModulePromise: Promise<typeof EditActionsModule> | undefined;
+const loadEditActionsAsync = () => {
+  editActionsModulePromise ??= import("./_edit-actions").catch((error: unknown) => {
+    editActionsModulePromise = undefined;
+    throw error;
+  });
+  return editActionsModulePromise;
+};
+const loadBoardEditorAsync = async () =>
+  await Promise.all([
+    loadGridEditorAsync(),
+    loadEditActionsAsync(),
+    import("~/components/board/items/item-menu"),
+    import("~/components/board/sections/container/container-menu"),
+  ]);
+const BoardEditActions = dynamic(loadEditActionsAsync, { ssr: false });
+
+export const BoardContentEditAction = ({ demoReadOnly }: { demoReadOnly: boolean }) => {
  const [isEditMode] = useEditMode();
  const board = useRequiredBoard();
  const { hasChangeAccess } = useBoardPermissions(board);
@@ -19,7 +49,7 @@ export const BoardContentEditAction = () => {
  return (
    <>
      {isEditMode && <BoardEditActions />}
-      <EditModeMenu />
+      <EditModeMenu demoReadOnly={demoReadOnly} />
    </>
  );
 };
@@ -40,26 +70,127 @@ export const BoardContentSettingsAction = ({ demoReadOnly }: { demoReadOnly: boo
  );
 };

-const EditModeMenu = () => {
-  const editing = useOptionalBoardEditing();
+const EditModeMenu = ({ demoReadOnly }: { demoReadOnly: boolean }) => {
+  const [isEditMode, { open, close }] = useEditMode();
+  const [editorLoadState, setEditorLoadState] = useState<"scheduled" | "loading" | "ready" | "error">("scheduled");
+  const [isEnteringEditMode, setIsEnteringEditMode] = useState(false);
+  const board = useRequiredBoard();
+  const utils = clientApi.useUtils();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { openConfirmModal } = useConfirmModal();
+  const tCommon = useI18n("common");
  const tBoardSetting = useI18n("board.setting");
-  if (!editing) return null;
-  const {
-    isEditMode,
-    toggle,
-    prewarmEditor,
-    editorLoadState,
-    isPending,
-    isEnteringEditMode,
-    returnToLayoutSettings,
-    cancelLayoutEdit,
-  } = editing;
+  const t = useI18n("board.action.edit");
+  const returnToLayoutSettings =
+    isEditMode &&
+    searchParams.get("edit") === "true" &&
+    searchParams.get("layout") !== null &&
+    searchParams.get("returnTo") === "settings";
+  const latestBoardRef = useRef(board);
+
+  latestBoardRef.current = board;
+  const { mutate: saveBoard, isPending } = clientApi.board.saveBoard.useMutation({
+    onMutate(boardToSave) {
+      boardToSave.items.forEach(({ id }) => notifications.hide(`board-item-created:${id}`));
+    },
+    onSuccess() {
+      showSuccessNotification({
+        title: tCommon("notification.update.success"),
+        message: t("notification.success.message"),
+      });
+      void utils.board.getBoardByName.invalidate({ name: board.name });
+      void utils.widget.customApi.getData.invalidate();
+      void revalidatePathActionAsync(`/boards/${board.name}`);
+      close();
+      if (returnToLayoutSettings) router.push(`/boards/${board.name}/settings?tab=layout`);
+    },
+    onError() {
+      showErrorNotification({
+        title: tCommon("notification.update.error"),
+        message: t("notification.error.message"),
+      });
+    },
+  });
+
+  const discardDemoChanges = useCallback(() => {
+    void utils.board.getBoardByName.invalidate({ name: board.name });
+    close();
+  }, [utils, board.name, close]);
+
+  const prepareEditorAsync = useCallback(async () => {
+    if (editorLoadState === "ready") return;
+
+    setEditorLoadState("loading");
+    try {
+      await loadBoardEditorAsync();
+      setEditorLoadState("ready");
+    } catch {
+      setEditorLoadState("error");
+      throw new Error("Unable to load the board editor");
+    }
+  }, [editorLoadState]);
+
+  useEffect(() => {
+    return scheduleGridEditorWarmup(async () => {
+      setEditorLoadState("loading");
+      try {
+        await loadBoardEditorAsync();
+        setEditorLoadState("ready");
+      } catch {
+        setEditorLoadState("error");
+      }
+    });
+  }, []);
+
+  const prewarmEditor = useCallback(() => {
+    void prepareEditorAsync().catch(() => {
+      // A click or hotkey retries and reports the error.
+    });
+  }, [prepareEditorAsync]);
+
+  const toggle = useCallback(async () => {
+    if (isEditMode) {
+      if (demoReadOnly) return discardDemoChanges();
+      return saveBoard(latestBoardRef.current);
+    }
+    setIsEnteringEditMode(true);
+    try {
+      await prepareEditorAsync();
+      open();
+    } catch {
+      showErrorNotification({
+        title: t("notification.loadError.title"),
+        message: t("notification.loadError.message"),
+      });
+    } finally {
+      setIsEnteringEditMode(false);
+    }
+  }, [demoReadOnly, discardDemoChanges, isEditMode, open, prepareEditorAsync, saveBoard, t]);
+
+  const cancelLayoutEdit = useCallback(() => {
+    openConfirmModal({
+      title: tBoardSetting("section.layout.edit.cancel.title"),
+      children: tBoardSetting("section.layout.edit.cancel.message"),
+      confirmProps: { children: tCommon("action.discard"), color: "red" },
+      onConfirm() {
+        void (async () => {
+          await utils.board.getBoardByName.invalidate({ name: board.name });
+          close();
+          router.push(`/boards/${board.name}/settings?tab=layout`);
+        })();
+      },
+    });
+  }, [board.name, close, openConfirmModal, router, tBoardSetting, tCommon, utils.board.getBoardByName]);
+
+  useHotkeys([[hotkeys.toggleBoardEdit, () => void toggle()]]);
+  usePreventLeaveWithDirty(isEditMode);

  if (returnToLayoutSettings) {
    return (
      <>
        <HeaderButton
-          onClick={() => void toggle()}
+          onClick={() => saveBoard(board)}
          loading={isPending}
          aria-label={tBoardSetting("section.layout.edit.save")}
        >
@@ -86,7 +217,7 @@ const EditModeMenu = () => {
        data-testid="board-edit-mode-toggle"
        data-board-editor-preload-state={editorLoadState}
        aria-busy={isPending || isEnteringEditMode}
-        aria-label={editing.label}
+        aria-label={isEditMode ? (demoReadOnly ? t("exit") : t("save")) : t("enter")}
        aria-pressed={isEditMode}
      >
        {isEditMode ? <IconPencilOff stroke={1.5} /> : <IconPencil stroke={1.5} />}
@@ -94,3 +225,57 @@ const EditModeMenu = () => {
    </TourTarget>
  );
 };
+
+const anchorSelector = "a[href]:not([target='_blank'])";
+const usePreventLeaveWithDirty = (isDirty: boolean) => {
+  const tBoard = useI18n("board");
+  const tCommon = useI18n("common");
+  const { openConfirmModal } = useConfirmModal();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isDirty) return;
+
+    const handleClick = (event: MouseEvent) => {
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const target = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>(anchorSelector) : null;
+      if (!target) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      openConfirmModal({
+        title: tBoard("action.edit.confirmLeave.title"),
+        children: tBoard("action.edit.confirmLeave.message"),
+        onConfirm() {
+          router.push(target.href);
+        },
+        confirmProps: {
+          children: tCommon("action.discard"),
+        },
+      });
+    };
+
+    const handlePopState = (event: Event) => {
+      window.history.pushState(null, document.title, window.location.href);
+      event.preventDefault();
+    };
+
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (env.NODE_ENV === "development") return;
+
+      event.preventDefault();
+      event.returnValue = true;
+    };
+
+    document.addEventListener("click", handleClick, true);
+    window.addEventListener("popstate", handlePopState);
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+      window.removeEventListener("popstate", handlePopState);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty, openConfirmModal, router, tBoard, tCommon]);
+};
@@ -1,51 +0,0 @@
-import { Stack } from "@mantine/core";
-
-import type { RouterOutputs } from "@homarr/api";
-import type { UseFormReturnType } from "@homarr/form";
-
-import type { Board } from "../../_types";
-import { ColorSettingsContent } from "./_appereance";
-import { BackgroundSettingsContent } from "./_background";
-import { LayoutPreview } from "./_layout-preview";
-import type { FormValues } from "./_settings-form";
-import classes from "./_settings-form.module.css";
-
-export const AppearancePlayground = ({
-  board,
-  form,
-  apps,
-  selectedLayoutId,
-}: {
-  board: Board;
-  form: UseFormReturnType<FormValues>;
-  apps: RouterOutputs["app"]["byIds"];
-  selectedLayoutId: string | null;
-}) => {
-  const layout =
-    form.values.layouts.find((candidate) => candidate.id === selectedLayoutId) ??
-    form.values.layouts.find((candidate) => candidate.role === "base");
-  const sourceLayout =
-    board.layouts.find((candidate) => candidate.id === layout?.id) ??
-    board.layouts.find((candidate) => candidate.role === "base");
-
-  return (
-    <div className={classes.appearance}>
-      <Stack gap="lg">
-        <ColorSettingsContent form={form} />
-        <BackgroundSettingsContent form={form} />
-      </Stack>
-      {layout && sourceLayout && (
-        <div className={classes.appearancePreview}>
-          <LayoutPreview
-            board={board}
-            layout={layout}
-            layouts={form.values.layouts}
-            sourceLayout={sourceLayout}
-            apps={apps}
-            settings={form.values}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
@@ -1,6 +1,7 @@
 "use client";

 import {
+  Anchor,
  Button,
  Collapse,
  ColorInput,
@@ -9,6 +10,7 @@ import {
  Group,
  InputWrapper,
  isLightColor,
+  Select,
  Slider,
  Stack,
  Text,
@@ -19,7 +21,7 @@ import { IconX } from "@tabler/icons-react";

 import type { UseFormReturnType } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { BoardColorInput, CornerStylePicker, cornerStyleValues } from "@homarr/ui";
+import { BoardColorInput } from "@homarr/ui";
 import { useSettings } from "@homarr/settings";

 import { SectionCard } from "~/components/manage/section-card";
@@ -37,6 +39,7 @@ const progressPercentageLabel = (value: number) => `${value}%`;
 export const ColorSettingsContent = ({ form }: Props) => {
  const [showPreview, { toggle }] = useDisclosure(false);
  const tBoard = useI18n("board");
+  const tCommon = useI18n("common");
  const theme = useMantineTheme();
  const { branding } = useSettings();

@@ -47,11 +50,6 @@ export const ColorSettingsContent = ({ form }: Props) => {
          <Stack gap="xs">
            <BoardColorInput
              label={tBoard("field.primaryColor.label")}
-              eyeDropperButtonProps={{
-                "aria-label": tBoard("setting.section.appearance.pickColor", {
-                  label: tBoard("field.primaryColor.label"),
-                }),
-              }}
              description={branding.lockPrimaryColor ? tBoard("field.primaryColor.locked") : undefined}
              disabled={branding.lockPrimaryColor}
              {...form.getInputProps("primaryColor")}
@@ -59,22 +57,10 @@ export const ColorSettingsContent = ({ form }: Props) => {
          </Stack>
        </Grid.Col>
        <Grid.Col span={{ sm: 12, md: 6 }}>
-          <BoardColorInput
-            label={tBoard("field.secondaryColor.label")}
-            eyeDropperButtonProps={{
-              "aria-label": tBoard("setting.section.appearance.pickColor", {
-                label: tBoard("field.secondaryColor.label"),
-              }),
-            }}
-            {...form.getInputProps("secondaryColor")}
-          />
+          <BoardColorInput label={tBoard("field.secondaryColor.label")} {...form.getInputProps("secondaryColor")} />
        </Grid.Col>
        <Grid.Col span={12}>
-          <Button type="button" variant="subtle" size="compact-sm" onClick={toggle} aria-expanded={showPreview}>
-            {showPreview
-              ? tBoard("setting.section.appearance.hideShades")
-              : tBoard("setting.section.appearance.showShades")}
-          </Button>
+          <Anchor onClick={toggle}>{showPreview ? tCommon("preview.hide") : tCommon("preview.show")}</Anchor>
        </Grid.Col>
        <Grid.Col span={12}>
          <Collapse expanded={showPreview}>
@@ -87,7 +73,6 @@ export const ColorSettingsContent = ({ form }: Props) => {
        <Grid.Col span={{ sm: 12, md: 6 }}>
          <InputWrapper label={tBoard("field.opacity.label")}>
            <Slider
-              thumbLabel={tBoard("field.opacity.label")}
              my={6}
              min={0}
              max={100}
@@ -101,11 +86,6 @@ export const ColorSettingsContent = ({ form }: Props) => {
          <Group align="end">
            <ColorInput
              label={tBoard("field.iconColor.label")}
-              eyeDropperButtonProps={{
-                "aria-label": tBoard("setting.section.appearance.pickColor", {
-                  label: tBoard("field.iconColor.label"),
-                }),
-              }}
              format="hex"
              swatches={Object.values(theme.colors).map((color) => color[6])}
              flex={1}
@@ -122,18 +102,18 @@ export const ColorSettingsContent = ({ form }: Props) => {
            </Button>
          </Group>
        </Grid.Col>
-        <Grid.Col span={12}>
-          <CornerStylePicker
-            compact
+        <Grid.Col span={{ sm: 12, md: 6 }}>
+          <Select
            label={tBoard("field.itemRadius.label")}
            description={tBoard("field.itemRadius.description")}
-            value={form.values.itemRadius}
-            labels={
-              Object.fromEntries(
-                cornerStyleValues.map((cornerStyle) => [cornerStyle, tBoard(`field.itemRadius.option.${cornerStyle}`)]),
-              ) as Record<(typeof cornerStyleValues)[number], string>
-            }
-            onChange={(cornerStyle) => form.setFieldValue("itemRadius", cornerStyle)}
+            data={[
+              { label: tBoard("field.itemRadius.option.xs"), value: "xs" },
+              { label: tBoard("field.itemRadius.option.sm"), value: "sm" },
+              { label: tBoard("field.itemRadius.option.md"), value: "md" },
+              { label: tBoard("field.itemRadius.option.lg"), value: "lg" },
+              { label: tBoard("field.itemRadius.option.xl"), value: "xl" },
+            ]}
+            {...form.getInputProps("itemRadius")}
          />
        </Grid.Col>
      </Grid>
@@ -1,7 +1,7 @@
 "use client";

 import { startTransition } from "react";
-import { ActionIcon, Autocomplete, Grid, Group, Popover, Stack, Text } from "@mantine/core";
+import { ActionIcon, Autocomplete, Center, Grid, Group, Popover, Stack, Text } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { IconPhotoOff, IconUpload } from "@tabler/icons-react";

@@ -24,7 +24,6 @@ interface Props {

 export const BackgroundSettingsContent = ({ form }: Props) => {
  const tBoard = useI18n("board");
-  const tMedia = useI18n("media");
  const { data: session } = useSession();

  const [debouncedSearch] = useDebouncedValue(form.values.backgroundImageUrl ?? "", 200);
@@ -51,15 +50,14 @@ export const BackgroundSettingsContent = ({ form }: Props) => {
          <Group wrap="nowrap" gap="xs" w="100%" align="start">
            <Autocomplete
              flex={1}
-              leftSectionPointerEvents="all"
              leftSection={
                form.values.backgroundImageUrl &&
                form.values.backgroundImageUrl.trim().length >= 2 && (
                  <Popover width={300} withArrow>
                    <Popover.Target>
-                      <ActionIcon type="button" variant="subtle" aria-label={tMedia("field.preview")}>
+                      <Center h="100%">
                        <ImagePreview src={form.values.backgroundImageUrl} w={20} h={20} />
-                      </ActionIcon>
+                      </Center>
                    </Popover.Target>
                    <Popover.Dropdown>
                      <ImagePreview src={form.values.backgroundImageUrl} w="100%" />
@@ -115,15 +113,7 @@ export const BackgroundSettingsContent = ({ form }: Props) => {
                }}
              >
                {({ onClick, loading }) => (
-                  <ActionIcon
-                    type="button"
-                    aria-label={tMedia("action.upload.label")}
-                    onClick={onClick}
-                    loading={loading}
-                    mt={24}
-                    size={36}
-                    variant="default"
-                  >
+                  <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">
                    <IconUpload size={16} stroke={1.5} />
                  </ActionIcon>
                )}
@@ -1,6 +1,70 @@
-.preview {
-  width: 100%;
-  max-width: 32rem;
-  min-width: 0;
-  margin-inline: auto;
+.canvas {
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background: color-mix(in srgb, var(--mantine-color-body) 82%, var(--mantine-primary-color-light));
+  padding: var(--mantine-spacing-xs);
+  min-height: 7rem;
+  max-height: min(18rem, 38dvh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.section {
+  border-radius: var(--mantine-radius-sm);
+  background: color-mix(in srgb, var(--mantine-color-default) 78%, transparent);
+  padding: 0.35rem;
+}
+
+.grid {
+  display: grid;
+  gap: 3px;
+  grid-auto-rows: clamp(1.35rem, 2.2vw, 1.75rem);
+  min-height: 2.5rem;
+}
+
+.tile {
+  container-type: inline-size;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--mantine-primary-color-filled) 24%, var(--mantine-color-default-border));
+  border-radius: calc(var(--mantine-radius-sm) * 0.75);
+  background: color-mix(in srgb, var(--mantine-primary-color-light) 70%, var(--mantine-color-body));
+  padding-inline: 0.25rem;
+}
+
+.tileContent {
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tileLabel {
+  display: none;
+  min-width: 0;
+  max-height: 2.1em;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  line-height: 1.05;
+}
+
+@container (min-width: 9rem) {
+  .tileContent {
+    justify-content: flex-start;
+  }
+
+  .tileLabel {
+    display: block;
+  }
+}
+
+.containerTile {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--mantine-color-default) 88%, var(--mantine-primary-color-light));
+}
+
+.appIcon {
+  width: 0.85rem;
+  height: 0.85rem;
 }
@@ -1,17 +1,17 @@
 "use client";

-import { useMemo } from "react";
-import { Badge, ColorSwatch, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { Badge, Box, Group, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
+import { IconLayoutGrid } from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
 import type { BoardPreviewLayout } from "@homarr/boards/layout-preview";
-import { getRepresentativeLayoutWidth } from "@homarr/boards/layout-preview";
+import { getRepresentativeLayoutWidth, projectBoardLayout } from "@homarr/boards/layout-preview";
+import { getBoardLaneColumnCount, getRootSectionLane, getWidgetName } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
+import { MaskedOrNormalImage } from "@homarr/ui";
+import { widgetCatalogIcons } from "@homarr/ui/widget-icons";

-import { BoardLayoutThumbnail } from "~/components/board/board-layout-thumbnail";
-import { normalizeFixedItemSize } from "~/components/board/layout/scaling";
 import type { Board } from "../../_types";
-import type { FormValues } from "./_settings-form";
 import classes from "./_layout-preview.module.css";

 interface Props {
@@ -20,55 +20,107 @@ interface Props {
  layouts: BoardPreviewLayout[];
  sourceLayout: BoardPreviewLayout;
  apps: RouterOutputs["app"]["byIds"];
-  settings: FormValues;
 }

-export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps, settings }: Props) => {
-  const t = useI18n("board.setting.section.layout.preview");
+export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps }: Props) => {
  const tBoard = useI18n("board");
-  const preview = useMemo(() => {
-    const appsById = new Map(apps.map((app) => [app.id, app]));
-    return {
-      layouts,
-      sections: board.sections,
-      items: board.items.map((item) => {
-        let iconUrl: string | undefined;
-        if (item.kind === "app" && typeof item.options.appId === "string")
-          iconUrl = appsById.get(item.options.appId)?.iconUrl;
-        return { ...item, iconUrl };
-      }),
-    };
-  }, [board, layouts, apps]);
+  const tSection = useI18n("section");
+  const t = useI18n();
+  const elements = projectBoardLayout(board, sourceLayout, layout);
+  const representativeWidth = getRepresentativeLayoutWidth(layout, layouts);
+  const largestRepresentativeWidth = Math.max(
+    ...layouts.map((candidate) => getRepresentativeLayoutWidth(candidate, layouts)),
+  );
+  const previewWidth = `${(representativeWidth / largestRepresentativeWidth) * 100}%`;
+  const appsById = new Map(apps.map((app) => [app.id, app]));
+  const rootSections = board.sections
+    .filter((section) => section.kind === "empty")
+    .toSorted((sectionA, sectionB) => sectionA.xOffset - sectionB.xOffset);

  return (
-    <Stack gap="xs" className={classes.preview} data-testid="board-layout-preview">
-      <Group justify="space-between" gap="xs">
-        <Text size="sm" fw={600}>
-          {t("title")}
-        </Text>
-        <Badge variant="light" size="sm">
-          {Math.max(320, getRepresentativeLayoutWidth(layout, layouts))} px
+    <Stack gap={6} align="center" w="100%">
+      <Group gap="xs" justify="center">
+        <Badge variant="light" color={layout.role === "mobile" ? "teal" : layout.role === "base" ? "blue" : "gray"}>
+          {representativeWidth}px
        </Badge>
-      </Group>
-      <BoardLayoutThumbnail preview={preview} label={t("canvasLabel")} canvas={{ layout, sourceLayout, settings }} />
-      <Group justify="space-between" gap="xs">
-        <Text size="xs" c="dimmed">
-          {settings.fixedScaling
-            ? t("dimensions", { size: normalizeFixedItemSize(settings.fixedItemSize), columns: layout.columnCount })
-            : t("responsiveDimensions", { columns: layout.columnCount })}
+        <Text size="xs">
+          {layout.columnCount} {tBoard("setting.section.layout.preview.columns")}
        </Text>
-        <Group gap={6}>
-          <Tooltip label={tBoard("field.primaryColor.label")}>
-            <ColorSwatch color={settings.primaryColor} size={16} aria-hidden />
-          </Tooltip>
-          <Tooltip label={tBoard("field.secondaryColor.label")}>
-            <ColorSwatch color={settings.secondaryColor} size={16} aria-hidden />
-          </Tooltip>
-        </Group>
      </Group>
-      <Text size="xs" c="dimmed">
-        {t("description")}
-      </Text>
+      <Box w={{ base: "100%", md: `max(${previewWidth}, 14rem)` }} maw="100%" className={classes.canvas}>
+        {elements.length === 0 ? (
+          <Text size="xs" c="dimmed" ta="center" py="xl">
+            {tBoard("setting.section.layout.preview.empty")}
+          </Text>
+        ) : (
+          <Stack gap="xs">
+            {rootSections.map((section) => {
+              const sectionElements = elements.filter((element) => element.sectionId === section.id);
+              const columnCount = getBoardLaneColumnCount(layout, getRootSectionLane(section.xOffset));
+              if (sectionElements.length === 0 || columnCount === 0) return null;
+
+              return (
+                <Stack key={section.id} gap={4} className={classes.section}>
+                  <Box
+                    className={classes.grid}
+                    style={{ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }}
+                  >
+                    {sectionElements.map((element) => {
+                      const item =
+                        element.type === "item" ? board.items.find((candidate) => candidate.id === element.id) : null;
+                      const appId =
+                        item?.kind === "app" && typeof item.options.appId === "string" ? item.options.appId : null;
+                      const app = appId ? appsById.get(appId) : undefined;
+                      const container =
+                        element.type === "section"
+                          ? board.sections.find((candidate) => candidate.id === element.id)
+                          : undefined;
+                      const containerLabel =
+                        container?.kind === "container" && container.options.title
+                          ? container.options.title
+                          : tSection("container.untitled");
+                      const label = app?.name ?? (item ? getWidgetName(item.kind, t) : containerLabel);
+                      const WidgetIcon = item ? widgetCatalogIcons[item.kind] : IconLayoutGrid;
+
+                      return (
+                        <Tooltip key={`${element.type}-${element.id}`} label={label} openDelay={350}>
+                          <Box
+                            role="img"
+                            aria-label={label}
+                            className={`${classes.tile} ${element.type === "section" ? classes.containerTile : ""}`}
+                            style={{
+                              gridColumn: `${element.xOffset + 1} / span ${element.width}`,
+                              gridRow: `${element.yOffset + 1} / span ${element.height}`,
+                            }}
+                          >
+                            <Group gap={4} wrap="nowrap" className={classes.tileContent}>
+                              <ThemeIcon size="sm" variant="light" radius="sm" style={{ flexShrink: 0 }}>
+                                {app ? (
+                                  <MaskedOrNormalImage
+                                    imageUrl={app.iconUrl}
+                                    hasColor={false}
+                                    alt=""
+                                    className={classes.appIcon}
+                                  />
+                                ) : (
+                                  <WidgetIcon size={13} stroke={1.7} />
+                                )}
+                              </ThemeIcon>
+                              <Text component="span" size="xs" fw={500} className={classes.tileLabel}>
+                                {label}
+                              </Text>
+                            </Group>
+                          </Box>
+                        </Tooltip>
+                      );
+                    })}
+                  </Box>
+                </Stack>
+              );
+            })}
+          </Stack>
+        )}
+      </Box>
    </Stack>
  );
 };
@@ -2,54 +2,6 @@
  background: color-mix(in srgb, var(--mantine-color-default) 55%, transparent);
 }

-.scalingSettings {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr);
-  gap: var(--mantine-spacing-xl);
-  padding: var(--mantine-spacing-lg);
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-md);
-  background: var(--mantine-color-body);
-}
-
-.scalingControls {
-  align-self: center;
-  min-width: 0;
-}
-
-.fixedItemSizePreview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--mantine-spacing-md);
-  margin: 0;
-  min-width: 0;
-  min-height: 200px;
-}
-
-.fixedItemSizePreviewTile {
-  display: grid;
-  flex: 0 0 auto;
-  place-items: center;
-  color: var(--mantine-primary-color-contrast);
-  background: var(--mantine-primary-color-filled);
-  border: 1px solid var(--mantine-primary-color-filled-hover);
-  border-radius: var(--mantine-radius-md);
-}
-
-@media (max-width: 48em) {
-  .scalingSettings {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-@media (max-width: 62em) {
-  .layoutPreview {
-    order: -1;
-  }
-}
-
 .gutterPreview {
  display: grid;
  gap: 6px;
@@ -89,7 +41,6 @@
 }

@media (prefers-reduced-motion: reduce) {
-  .fixedItemSizePreviewTile,
  .gutterPreview {
    transition: none;
  }
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
  Badge,
@@ -12,8 +12,6 @@ import {
  Input,
  NumberInput,
  Paper,
-  Select,
-  Alert,
  Slider,
  Stack,
  Switch,
@@ -23,7 +21,6 @@ import {
 import { IconEdit, IconRefresh } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
-import type { RouterOutputs } from "@homarr/api";
 import { createId } from "@homarr/common";
 import type { UseFormReturnType } from "@homarr/form";
 import { showErrorNotification } from "@homarr/notifications";
@@ -33,7 +30,6 @@ import { InlineConfirmButton } from "@homarr/ui";
 import { SectionCard } from "~/components/manage/section-card";
 import type { Board } from "../../_types";
 import { LayoutPreview } from "./_layout-preview";
-import { ScalingSettings } from "./_scaling";
 import type { FormValues } from "./_settings-form";
 import classes from "./_layout.module.css";

@@ -42,22 +38,11 @@ interface Props {
  form: UseFormReturnType<FormValues>;
  isSaving: boolean;
  saveSettingsAsync: () => Promise<FormValues | null>;
-  selectedLayoutId: string | null;
-  setSelectedLayoutId: (value: string | null) => void;
-  apps: RouterOutputs["app"]["byIds"];
 }

 const layoutRoleOrder = { base: 0, custom: 1, mobile: 2 } as const;

-export const LayoutSettingsContent = ({
-  board,
-  form,
-  isSaving,
-  saveSettingsAsync,
-  selectedLayoutId,
-  setSelectedLayoutId,
-  apps,
-}: Props) => {
+export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync }: Props) => {
  const tBoard = useI18n("board");
  const tLayout = useI18n("layout");
  const tCommon = useI18n("common");
@@ -73,6 +58,18 @@ export const LayoutSettingsContent = ({
      });
    },
  });
+  const appIds = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          board.items.flatMap((item) =>
+            item.kind === "app" && typeof item.options.appId === "string" ? [item.options.appId] : [],
+          ),
+        ),
+      ),
+    [board.items],
+  );
+  const { data: apps = [] } = clientApi.app.byIds.useQuery(appIds, { enabled: appIds.length > 0 });

  const openLayoutEditorAsync = async (layout: FormValues["layouts"][number]) => {
    setEditingLayoutId(layout.id);
@@ -109,14 +106,10 @@ export const LayoutSettingsContent = ({
  const displayedLayouts = form.values.layouts
    .map((layout, index) => ({ layout, index }))
    .toSorted((first, second) => layoutRoleOrder[first.layout.role] - layoutRoleOrder[second.layout.role]);
-  const activeLayoutId =
-    displayedLayouts.find(({ layout }) => layout.id === selectedLayoutId)?.layout.id ?? baseLayout?.id;

  return (
    <SectionCard title={tBoard("setting.section.layout.title")}>
      <Stack gap="lg">
-        <ScalingSettings form={form} />
-
        <Group justify="space-between" align="flex-start" wrap="wrap">
          <Stack gap={2} maw="52rem">
            <Text fw={500}>{tBoard("setting.section.layout.responsive.title")}</Text>
@@ -140,169 +133,141 @@ export const LayoutSettingsContent = ({
              let insertionIndex = form.values.layouts.findIndex((layout) => layout.breakpoint > nextBreakpoint);
              if (insertionIndex === -1) insertionIndex = form.values.layouts.length;
              form.insertListItem("layouts", newLayout, insertionIndex);
-              setSelectedLayoutId(newLayout.id);
            }}
          >
            {tBoard("setting.section.layout.responsive.action.add")}
          </Button>
        </Group>

-        <Select
-          label={tBoard("setting.section.layout.preview.layout")}
-          value={activeLayoutId}
-          onChange={setSelectedLayoutId}
-          allowDeselect={false}
-          error={form.errors.layouts}
-          data={displayedLayouts.map(({ layout, index }) => ({
-            value: layout.id,
-            label: `${layout.name || tBoard(`setting.section.layout.role.${layout.role}` as never)} · ${layout.columnCount} ${tBoard("setting.section.layout.preview.columns")}${Object.keys(form.errors).some((key) => key.startsWith(`layouts.${index}.`)) ? " ⚠" : ""}`,
-          }))}
-        />
+        {displayedLayouts.map(({ layout, index }) => {
+          const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
+          const sourceLayout = persistedLayout ?? board.layouts.find((candidate) => candidate.role === "base");

-        {Object.entries(form.errors)
-          .filter(([key]) => key.startsWith("layouts."))
-          .map(([key, error]) => (
-            <Alert key={key} color="red">
-              {error}
-            </Alert>
-          ))}
-        {displayedLayouts
-          .filter(({ layout }) => layout.id === activeLayoutId)
-          .map(({ layout, index }) => {
-            const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
-            const sourceLayout = persistedLayout ?? board.layouts.find((candidate) => candidate.role === "base");
-
-            return (
-              <Fieldset
-                key={layout.id}
-                legend={
-                  <Group gap="xs">
-                    <Text>{layout.name || tBoard(`setting.section.layout.role.${layout.role}` as never)}</Text>
-                    <Badge size="sm" variant="default">
-                      {tBoard(`setting.section.layout.role.${layout.role}` as never)}
-                    </Badge>
-                  </Group>
-                }
-                bg="transparent"
-              >
-                <Grid gap="xl" align="flex-start">
-                  <Grid.Col span={{ base: 12, md: 4 }}>
-                    <Stack gap="md">
-                      <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={tCommon("field.name")} />
-                      <Input.Wrapper
-                        label={tLayout("field.columnCount.label")}
-                        description={tLayout("field.columnCount.description")}
-                      >
-                        <Slider
-                          thumbLabel={`${tLayout("field.columnCount.label")} — ${layout.name}`}
-                          mt="xs"
-                          mb="lg"
-                          min={1}
-                          max={24}
-                          step={1}
-                          marks={[1, 6, 12, 18, 24].map((value) => ({ value, label: String(value) }))}
-                          styles={{
-                            markLabel: { color: "light-dark(var(--mantine-color-black), var(--mantine-color-white))" },
-                          }}
-                          value={layout.columnCount}
-                          onChange={(columnCount) => {
-                            const left = Math.min(layout.leftGutterColumnCount, Math.max(0, columnCount - 1));
-                            const right = Math.min(layout.rightGutterColumnCount, Math.max(0, columnCount - left - 1));
-                            form.setFieldValue(`layouts.${index}.columnCount`, columnCount);
-                            form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, left);
-                            form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, right);
-                          }}
-                        />
-                      </Input.Wrapper>
-                      <NumberInput
-                        {...form.getInputProps(`layouts.${index}.breakpoint`)}
-                        label={tLayout("field.breakpoint.label")}
-                        description={
-                          layout.role === "mobile"
-                            ? tBoard("setting.section.layout.mobile.breakpointDescription")
-                            : tLayout("field.breakpoint.description")
-                        }
-                        disabled={layout.role === "mobile"}
-                        styles={{ description: { color: "var(--mantine-color-text)" } }}
-                        min={layout.role === "mobile" ? 0 : 1}
-                        max={32767}
-                        allowDecimal={false}
-                      />
-                      {layout.role !== "mobile" && (
-                        <GutterSettings
-                          left={layout.leftGutterColumnCount}
-                          right={layout.rightGutterColumnCount}
-                          columnCount={layout.columnCount}
-                          onLeftChange={(value) => form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)}
-                          onRightChange={(value) =>
-                            form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)
-                          }
-                        />
-                      )}
-                    </Stack>
-                  </Grid.Col>
-                  <Grid.Col span={{ base: 12, md: 8 }} className={classes.layoutPreview}>
-                    {sourceLayout && (
-                      <LayoutPreview
-                        board={board}
-                        layout={layout}
-                        layouts={form.values.layouts}
-                        sourceLayout={sourceLayout}
-                        apps={apps}
-                        settings={form.values}
-                      />
-                    )}
-                  </Grid.Col>
-                </Grid>
-
-                <Group justify="space-between" mt="lg" gap="sm" wrap="wrap">
-                  <Group gap="xs">
-                    {layout.role !== "base" && persistedLayout && (
-                      <InlineConfirmButton
-                        type="button"
-                        variant="default"
-                        leftSection={<IconRefresh size={16} color="var(--mantine-color-red-5)" />}
-                        loading={resettingLayoutId === layout.id}
-                        disabled={isSaving}
-                        onConfirm={() => handleReset(layout)}
-                        confirmLabel={tCommon("action.confirm")}
-                      >
-                        {tBoard("setting.section.layout.reset.action")}
-                      </InlineConfirmButton>
-                    )}
-                    {layout.role === "custom" && (
-                      <Button
-                        type="button"
-                        variant="subtle"
-                        color="red"
-                        disabled={isSaving}
-                        onClick={() => {
-                          form.setFieldValue(
-                            "layouts",
-                            form.values.layouts.filter((candidate) => candidate.id !== layout.id),
-                          );
-                        }}
-                      >
-                        {tCommon("action.remove")}
-                      </Button>
-                    )}
-                  </Group>
-                  <Button
-                    type="button"
-                    variant="default"
-                    leftSection={<IconEdit size={16} color="var(--mantine-color-red-5)" />}
-                    loading={editingLayoutId === layout.id}
-                    disabled={isSaving || !form.isValid()}
-                    onClick={() => void openLayoutEditorAsync(layout)}
-                  >
-                    {form.isDirty() || !persistedLayout
-                      ? tBoard("setting.section.layout.edit.saveAndEdit")
-                      : tBoard("setting.section.layout.edit.action")}
-                  </Button>
+          return (
+            <Fieldset
+              key={layout.id}
+              legend={
+                <Group gap="xs">
+                  <Text>{layout.name || tBoard(`setting.section.layout.role.${layout.role}` as never)}</Text>
+                  <Badge size="sm" variant="default">
+                    {tBoard(`setting.section.layout.role.${layout.role}` as never)}
+                  </Badge>
                </Group>
-              </Fieldset>
-            );
-          })}
+              }
+              bg="transparent"
+            >
+              <Grid gap={{ base: "lg", xl: "xl" }} align="flex-start">
+                <Grid.Col span={{ base: 12, md: 6, lg: 4 }}>
+                  <Stack gap="md">
+                    <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={tCommon("field.name")} />
+                    <Input.Wrapper label={tLayout("field.columnCount.label")}>
+                      <Slider
+                        thumbLabel={`${tLayout("field.columnCount.label")} — ${layout.name}`}
+                        mt="xs"
+                        min={1}
+                        max={24}
+                        step={1}
+                        marks={[1, 6, 12, 18, 24].map((value) => ({ value, label: String(value) }))}
+                        styles={{
+                          markLabel: { color: "light-dark(var(--mantine-color-black), var(--mantine-color-white))" },
+                        }}
+                        value={layout.columnCount}
+                        onChange={(columnCount) => {
+                          const left = Math.min(layout.leftGutterColumnCount, Math.max(0, columnCount - 1));
+                          const right = Math.min(layout.rightGutterColumnCount, Math.max(0, columnCount - left - 1));
+                          form.setFieldValue(`layouts.${index}.columnCount`, columnCount);
+                          form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, left);
+                          form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, right);
+                        }}
+                      />
+                    </Input.Wrapper>
+                    <NumberInput
+                      {...form.getInputProps(`layouts.${index}.breakpoint`)}
+                      label={tLayout("field.breakpoint.label")}
+                      description={
+                        layout.role === "mobile"
+                          ? tBoard("setting.section.layout.mobile.breakpointDescription")
+                          : tLayout("field.breakpoint.description")
+                      }
+                      disabled={layout.role === "mobile"}
+                      styles={{ description: { color: "var(--mantine-color-text)" } }}
+                      min={layout.role === "mobile" ? 0 : 1}
+                      max={32767}
+                    />
+                  </Stack>
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 4 }}>
+                  {sourceLayout && (
+                    <LayoutPreview
+                      board={board}
+                      layout={layout}
+                      layouts={form.values.layouts}
+                      sourceLayout={sourceLayout}
+                      apps={apps}
+                    />
+                  )}
+                </Grid.Col>
+                {layout.role !== "mobile" && (
+                  <Grid.Col span={{ base: 12, lg: 4 }}>
+                    <GutterSettings
+                      left={layout.leftGutterColumnCount}
+                      right={layout.rightGutterColumnCount}
+                      columnCount={layout.columnCount}
+                      onLeftChange={(value) => form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)}
+                      onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)}
+                    />
+                  </Grid.Col>
+                )}
+              </Grid>
+
+              <Group justify="space-between" mt="lg" gap="sm" wrap="wrap">
+                <Group gap="xs">
+                  {layout.role !== "base" && persistedLayout && (
+                    <InlineConfirmButton
+                      type="button"
+                      variant="default"
+                      leftSection={<IconRefresh size={16} color="var(--mantine-color-red-5)" />}
+                      loading={resettingLayoutId === layout.id}
+                      disabled={isSaving}
+                      onConfirm={() => handleReset(layout)}
+                      confirmLabel={tCommon("action.confirm")}
+                    >
+                      {tBoard("setting.section.layout.reset.action")}
+                    </InlineConfirmButton>
+                  )}
+                  {layout.role === "custom" && (
+                    <Button
+                      type="button"
+                      variant="subtle"
+                      color="red"
+                      disabled={isSaving}
+                      onClick={() => {
+                        form.setFieldValue(
+                          "layouts",
+                          form.values.layouts.filter((candidate) => candidate.id !== layout.id),
+                        );
+                      }}
+                    >
+                      {tCommon("action.remove")}
+                    </Button>
+                  )}
+                </Group>
+                <Button
+                  type="button"
+                  variant="default"
+                  leftSection={<IconEdit size={16} color="var(--mantine-color-red-5)" />}
+                  loading={editingLayoutId === layout.id}
+                  disabled={isSaving || !form.isValid()}
+                  onClick={() => void openLayoutEditorAsync(layout)}
+                >
+                  {form.isDirty() || !persistedLayout
+                    ? tBoard("setting.section.layout.edit.saveAndEdit")
+                    : tBoard("setting.section.layout.edit.action")}
+                </Button>
+              </Group>
+            </Fieldset>
+          );
+        })}
      </Stack>
    </SectionCard>
  );
@@ -1,103 +0,0 @@
-import { Box, Group, Input, NumberInput, SegmentedControl, Slider, Stack, Text } from "@mantine/core";
-
-import { BOARD_FIXED_ITEM_SIZE_MAX, BOARD_FIXED_ITEM_SIZE_MIN } from "@homarr/definitions";
-import type { UseFormReturnType } from "@homarr/form";
-import { useI18n } from "@homarr/translation/client";
-
-import {
-  calculateBoardUiScale,
-  calculateFixedBoardCanvasScale,
-  normalizeFixedItemSize,
-} from "~/components/board/layout/scaling";
-import appearanceClasses from "~/components/board/layout/canvas-appearance.module.css";
-import type { FormValues } from "./_settings-form";
-import classes from "./_layout.module.css";
-
-export const ScalingSettings = ({ form }: { form: UseFormReturnType<FormValues> }) => {
-  const t = useI18n("board");
-  const size = normalizeFixedItemSize(form.values.fixedItemSize);
-  const canvasScale = calculateFixedBoardCanvasScale(size);
-  const sampleUiScale = (canvasScale * calculateBoardUiScale(canvasScale)) / 2;
-
-  return (
-    <Box className={classes.scalingSettings}>
-      <Stack gap="md" className={classes.scalingControls}>
-        <Input.Wrapper label={t("setting.section.layout.scaling.title")}>
-          <SegmentedControl
-            fullWidth
-            mt={6}
-            aria-label={t("setting.section.layout.scaling.title")}
-            value={form.values.fixedScaling ? "fixed" : "responsive"}
-            onChange={(mode) => form.setFieldValue("fixedScaling", mode === "fixed")}
-            data={[
-              { value: "fixed", label: t("field.fixedScaling.label") },
-              { value: "responsive", label: t("setting.section.layout.scaling.fit") },
-            ]}
-          />
-        </Input.Wrapper>
-        <Text size="sm" c="dimmed">
-          {form.values.fixedScaling
-            ? t("field.fixedScaling.description")
-            : t("setting.section.layout.scaling.fitDescription")}
-        </Text>
-        <Group align="end" wrap="nowrap" gap="lg">
-          <NumberInput
-            label={t("field.fixedItemSize.label")}
-            min={BOARD_FIXED_ITEM_SIZE_MIN}
-            max={BOARD_FIXED_ITEM_SIZE_MAX}
-            step={10}
-            allowDecimal={false}
-            disabled={!form.values.fixedScaling}
-            suffix=" px"
-            w={150}
-            {...form.getInputProps("fixedItemSize")}
-            onBlur={() => form.setFieldValue("fixedItemSize", normalizeFixedItemSize(form.getValues().fixedItemSize))}
-          />
-          <Box flex={1} pb={8}>
-            <Slider
-              thumbLabel={t("field.fixedItemSize.label")}
-              min={BOARD_FIXED_ITEM_SIZE_MIN}
-              max={BOARD_FIXED_ITEM_SIZE_MAX}
-              step={10}
-              disabled={!form.values.fixedScaling}
-              value={size}
-              onChange={(value) => form.setFieldValue("fixedItemSize", value)}
-              label={(value) => `${value} px`}
-            />
-          </Box>
-        </Group>
-        <Text size="xs" c="dimmed">
-          {t("setting.section.layout.scaling.sizeDescription")}
-        </Text>
-      </Stack>
-      <Box
-        component="figure"
-        className={classes.fixedItemSizePreview}
-        aria-label={t("field.fixedItemSize.previewLabel", { size })}
-      >
-        <Box
-          className={`${classes.fixedItemSizePreviewTile} ${appearanceClasses.appearance}`}
-          style={{
-            width: size / 2,
-            height: size / 2,
-            borderRadius: `var(--mantine-radius-${form.values.itemRadius})`,
-            "--board-canvas-ui-scale": sampleUiScale,
-          }}
-          aria-hidden="true"
-        >
-          <Text size="sm" fw={600}>
-            1 × 1
-          </Text>
-        </Box>
-        <Box component="figcaption" ta="center">
-          <Text size="sm" fw={600} ff="monospace">
-            {t("field.fixedItemSize.previewValue", { size })}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {t("setting.section.layout.scaling.halfSize")}
-          </Text>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
@@ -1,43 +0,0 @@
-.settings {
-  --mantine-color-dimmed: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-}
-
-.tabs {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
-
-.tabs > button {
-  flex-shrink: 0;
-}
-
-.panel {
-  padding-top: var(--mantine-spacing-lg);
-  padding-bottom: 5rem;
-  min-width: 0;
-}
-
-.appearance {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  align-items: start;
-  gap: var(--mantine-spacing-lg);
-}
-
-.appearancePreview {
-  position: sticky;
-  top: calc(var(--app-shell-header-offset, 0px) + var(--mantine-spacing-md));
-  min-width: 0;
-}
-
-@media (max-width: 62em) {
-  .appearance {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .appearancePreview {
-    position: static;
-    grid-row: 1;
-  }
-}
@@ -1,16 +1,13 @@
 "use client";

-import { useEffect, useMemo, useRef, useState } from "react";
-import { Alert, Button, Stack, Tabs, VisuallyHidden } from "@mantine/core";
-import { IconAdjustments, IconCode, IconLayoutGrid, IconPalette, IconUsers } from "@tabler/icons-react";
+import { useEffect, useRef } from "react";
+import { Button, Stack } from "@mantine/core";
 import type { z } from "zod/v4";

 import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
 import { useUpdateBoard } from "@homarr/boards/updater";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
-import { normalizeFixedItemSize } from "~/components/board/layout/scaling";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
@@ -23,7 +20,8 @@ import { UnsavedChangesBar } from "~/components/manage/unsaved-changes-bar";
 import { useUnsavedChangesGuard } from "~/components/manage/use-unsaved-changes-guard";

 import type { Board } from "../../_types";
-import { AppearancePlayground } from "./_appearance-playground";
+import { ColorSettingsContent } from "./_appereance";
+import { BackgroundSettingsContent } from "./_background";
 import { BehaviorSettingsContent } from "./_behavior";
 import { BoardAccessSettings } from "./_board-access";
 import { CustomCssSettingsContent } from "./_customCss";
@@ -31,7 +29,6 @@ import { DangerZoneSettingsContent } from "./_danger";
 import { GeneralSettingsContent } from "./_general";
 import { LayoutSettingsContent } from "./_layout";
 import { useSaveLayoutsMutation, useSavePartialSettingsMutation } from "./_shared";
-import classes from "./_settings-form.module.css";

 const boardSettingsFormSchema = boardSavePartialSettingsSchema
  .extend({
@@ -62,8 +59,6 @@ const PARTIAL_FORM_KEYS = [
  "itemRadius",
  "customCss",
  "disableStatus",
-  "fixedScaling",
-  "fixedItemSize",
 ] as const;

 const buildInitialValues = (board: Board): FormValues => ({
@@ -82,8 +77,6 @@ const buildInitialValues = (board: Board): FormValues => ({
  itemRadius: board.itemRadius,
  customCss: board.customCss ?? "",
  disableStatus: board.disableStatus,
-  fixedScaling: board.fixedScaling ?? false,
-  fixedItemSize: normalizeFixedItemSize(board.fixedItemSize ?? ""),
  layouts: normalizeMobileLayoutGutters(board.layouts),
 });

@@ -101,21 +94,6 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
  const { updateBoard } = useUpdateBoard();
  const savePartialSettings = useSavePartialSettingsMutation(board);
  const saveLayouts = useSaveLayoutsMutation(board);
-  const [activeTab, setActiveTab] = useState<string | null>("layout");
-  const [selectedLayoutId, setSelectedLayoutId] = useState<string | null>(null);
-  const appIds = useMemo(
-    () =>
-      Array.from(
-        new Set(
-          board.items.flatMap((item) => {
-            if (item.kind === "app" && typeof item.options.appId === "string") return [item.options.appId];
-            return [];
-          }),
-        ),
-      ),
-    [board.items],
-  );
-  const { data: apps = [] } = clientApi.app.byIds.useQuery(appIds, { enabled: appIds.length > 0 });

  const form = useZodForm(boardSettingsFormSchema, {
    initialValues: buildInitialValues(board),
@@ -142,22 +120,7 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
    };
  }, [updateBoard]);

-  const revealValidationErrors = (errors: typeof form.errors) => {
-    const firstField = Object.keys(errors)[0];
-    if (firstField) setActiveTab(getSettingsTabForField(firstField));
-    const layoutField = Object.keys(errors).find((field) => /^layouts\.\d+\./.test(field));
-    if (layoutField) {
-      const layout = form.values.layouts[Number(layoutField.split(".")[1])];
-      if (layout) setSelectedLayoutId(layout.id);
-    }
-  };
-
  const saveSettingsAsync = async (values: FormValues): Promise<FormValues | null> => {
-    const validation = form.validate();
-    if (validation.hasErrors) {
-      revealValidationErrors(validation.errors);
-      return null;
-    }
    const defaults = initialValuesRef.current;
    const changed = <TKey extends keyof FormValues>(...fields: TKey[]) =>
      fields.some((field) => values[field] !== defaults[field]);
@@ -202,7 +165,6 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
  };

  const handleDiscard = () => {
-    form.clearErrors();
    form.setValues(initialValuesRef.current);
    form.resetDirty();
    updateBoard((previous) => ({
@@ -215,99 +177,43 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
  const isPending = savePartialSettings.isPending || saveLayouts.isPending;

  return (
-    <Tabs
-      value={activeTab}
-      onChange={setActiveTab}
-      keepMounted={false}
-      classNames={{ root: classes.settings, list: classes.tabs, panel: classes.panel }}
-    >
-      <VisuallyHidden>
-        <h2>{tSection("navigation")}</h2>
-      </VisuallyHidden>
-      <Tabs.List aria-label={tSection("navigation")}>
-        <Tabs.Tab value="layout" leftSection={<IconLayoutGrid size={16} />}>
-          {tSection("layout.title")}
-        </Tabs.Tab>
-        <Tabs.Tab value="appearance" leftSection={<IconPalette size={16} />}>
-          {tSection("appearance.title")}
-        </Tabs.Tab>
-        <Tabs.Tab value="general" leftSection={<IconAdjustments size={16} />}>
-          {tSection("general.title")}
-        </Tabs.Tab>
-        <Tabs.Tab value="advanced" leftSection={<IconCode size={16} />}>
-          {tSection("advanced")}
-        </Tabs.Tab>
-        {hasFullAccess && (
-          <Tabs.Tab value="access" leftSection={<IconUsers size={16} />}>
-            {tSection("access.title")}
-          </Tabs.Tab>
-        )}
-      </Tabs.List>
-      <form onSubmit={form.onSubmit((values) => void saveSettingsAsync(values), revealValidationErrors)}>
-        {Object.keys(form.errors).length > 0 && (
-          <Alert color="red" mt="md">
-            {tSection("validationError")}
-          </Alert>
-        )}
-        <Tabs.Panel value="layout">
+    <Stack gap="xl">
+      <form onSubmit={form.onSubmit((values) => void saveSettingsAsync(values))}>
+        <Stack gap="xl">
+          <GeneralSettingsContent board={board} form={form} />
          <LayoutSettingsContent
            board={board}
            form={form}
            isSaving={isPending}
            saveSettingsAsync={() => saveSettingsAsync(form.values)}
-            selectedLayoutId={selectedLayoutId}
-            setSelectedLayoutId={setSelectedLayoutId}
-            apps={apps}
          />
-        </Tabs.Panel>
-        <Tabs.Panel value="appearance">
-          <AppearancePlayground board={board} form={form} apps={apps} selectedLayoutId={selectedLayoutId} />
-        </Tabs.Panel>
-        <Tabs.Panel value="general">
-          <Stack gap="lg">
-            <GeneralSettingsContent board={board} form={form} />
-            <BehaviorSettingsContent form={form} />
-          </Stack>
-        </Tabs.Panel>
-        <Tabs.Panel value="advanced">
+          <BackgroundSettingsContent form={form} />
+          <ColorSettingsContent form={form} />
          <CustomCssSettingsContent form={form} />
-        </Tabs.Panel>
+          <BehaviorSettingsContent form={form} />

-        {form.isDirty() && (
-          <UnsavedChangesBar>
-            <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
-              {t("action.discard")}
-            </Button>
-            <Button loading={isPending} type="submit">
-              {t("action.saveChanges")}
-            </Button>
-          </UnsavedChangesBar>
-        )}
+          {form.isDirty() && (
+            <UnsavedChangesBar>
+              <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
+                {t("action.discard")}
+              </Button>
+              <Button loading={isPending} type="submit" disabled={!form.isValid()}>
+                {t("action.saveChanges")}
+              </Button>
+            </UnsavedChangesBar>
+          )}
+        </Stack>
      </form>

      {hasFullAccess && (
-        <Tabs.Panel value="access">
-          <Stack gap="lg">
-            <SectionCard title={tSection("access.title")}>
-              <BoardAccessSettings board={board} initialPermissions={permissions} />
-            </SectionCard>
-            <DangerZoneSettingsContent hideVisibility={hideVisibility} />
-          </Stack>
-        </Tabs.Panel>
+        <SectionCard title={tSection("access.title")}>
+          <BoardAccessSettings board={board} initialPermissions={permissions} />
+        </SectionCard>
      )}
-    </Tabs>
-  );
-};

-const getSettingsTabForField = (field: string) => {
-  if (field.startsWith("layouts") || field === "fixedScaling" || field === "fixedItemSize") return "layout";
-  if (field === "customCss") return "advanced";
-  if (
-    field.startsWith("background") ||
-    ["primaryColor", "secondaryColor", "opacity", "iconColor", "itemRadius"].includes(field)
-  )
-    return "appearance";
-  return "general";
+      {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
+    </Stack>
+  );
 };

 // Previously part of the general settings section; applied on the unified save
@@ -20,7 +20,6 @@ import { env } from "~/env";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import type { Board } from "./_types";
 import { BoardProviders } from "./_providers";
-import { BoardEditingProvider } from "./(content)/_editing-provider";
 import type { Params } from "./(content)/_creator";
 import { CustomCss } from "./(content)/_custom-css";
 import { BoardReadyProvider } from "./(content)/_ready-context";
@@ -107,25 +106,20 @@ export const createBoardLayout = <TParams extends Params>({
        <BoardReadyProvider>
          <BoardMantineProvider defaultColorScheme={colorScheme}>
            <ModalProvider>
-              <BoardEditingProvider
-                enabled={Boolean(headerBoardEditAction) && hasChangeAccess}
-                demoReadOnly={env.DEMO_MODE && env.DEMO_READ_ONLY}
-              >
-                <CustomCss />
-                <BoardTourGate enabled={shouldRunBoardTour}>
-                  <ClientShell hasNavigation={false}>
-                    <MainHeader
-                      logo={<BoardLogo size={appShellLogoHeight} />}
-                      logoWithTitle={<BoardLogoWithTitle size="md" />}
-                      actions={headerActions}
-                      boardEditAction={headerBoardEditAction}
-                      boardSettingsAction={headerBoardSettingsAction}
-                      hasNavigation={false}
-                    />
-                    <AppShellMain data-advanced-focus-background>{children}</AppShellMain>
-                  </ClientShell>
-                </BoardTourGate>
-              </BoardEditingProvider>
+              <CustomCss />
+              <BoardTourGate enabled={shouldRunBoardTour}>
+                <ClientShell hasNavigation={false}>
+                  <MainHeader
+                    logo={<BoardLogo size={appShellLogoHeight} />}
+                    logoWithTitle={<BoardLogoWithTitle size="md" />}
+                    actions={headerActions}
+                    boardEditAction={headerBoardEditAction}
+                    boardSettingsAction={headerBoardSettingsAction}
+                    hasNavigation={false}
+                  />
+                  <AppShellMain data-advanced-focus-background>{children}</AppShellMain>
+                </ClientShell>
+              </BoardTourGate>
            </ModalProvider>
          </BoardMantineProvider>
        </BoardReadyProvider>
@@ -1,43 +1,12 @@
-import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";

 import { buildCustomWidgetAiPrompt } from "@homarr/custom-widgets/authoring-prompt";

 describe("Copy AI prompt", () => {
-  it("uses one self-contained prompt without an embedded-skill branch", () => {
-    const source = readFileSync(
-      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx`,
-      "utf8",
-    );
-    expect(source).toContain("buildCustomWidgetAiPrompt");
-    expect(source).not.toContain("embedded-authoring-prompt");
-    expect(source).not.toContain("Menu");
-  });
-
  it("copies a complete prompt within the public size limit", () => {
    const prompt = buildCustomWidgetAiPrompt(undefined, null, null, "Create a Pokédex");
    expect(prompt.length).toBeLessThanOrEqual(12_000);
    expect(prompt).toContain("exactly one complete `json` fenced block");
    expect(prompt).toContain("Put the complete JSX source directly in the `template` string");
  });
-
-  it("keeps AI actions and section navigation readable on narrow screens", () => {
-    const card = readFileSync(
-      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx`,
-      "utf8",
-    );
-    const styles = readFileSync(
-      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css`,
-      "utf8",
-    );
-    const actions = readFileSync(
-      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx`,
-      "utf8",
-    );
-    expect(card).toContain('<Accordion variant="contained">');
-    expect(card).not.toContain("defaultValue");
-    expect(actions).toContain("<ActionIcon");
-    expect(styles).toContain(".sectionNav > a");
-    expect(styles).toContain("flex: 0 0 auto");
-  });
 });
@@ -1,36 +0,0 @@
-import { readFileSync } from "node:fs";
-import { describe, expect, it } from "vitest";
-
-const readSource = (path: string) => readFileSync(`${process.cwd()}/${path}`, "utf8");
-
-describe("legacy custom widget migration UI", () => {
-  it("keeps legacy definitions visible and exposes the redacted LLM workflow", () => {
-    const list = readSource("apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx");
-    const actions = readSource("apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx");
-
-    expect(list).toContain("widget.migrationRequired");
-    expect(list).toContain('t("page.list.migrationInstructions")');
-    expect(actions).toContain("legacyMigrationPrompt.fetch");
-    expect(actions).toContain("navigator.clipboard.writeText(result.prompt)");
-    expect(actions).toContain("navigator.clipboard.readText()");
-    expect(actions).toContain('t("action.pasteMigration")');
-    expect(actions).toContain("parseCustomWidgetClipboardDetailed");
-    expect(actions).toContain("legacyId={widget.id}");
-  });
-
-  it("replaces the legacy record through migration and refreshes every consumer", () => {
-    // The import pipeline is shared by the dialog and the Workshop install page.
-    const importer = readSource("apps/nextjs/src/components/custom-widgets/use-custom-widget-import.ts");
-    const dialog = readSource("apps/nextjs/src/components/custom-widgets/custom-widget-import-dialog.tsx");
-
-    expect(importer).toContain("customWidget.migrateLegacy.useMutation");
-    expect(importer).toMatch(
-      /migrateMutation\.mutate\(\{\s*id: legacyId,\s*widget: configuredWidget,\s*secrets,?\s*\}\)/u,
-    );
-    expect(importer).toContain("utils.customWidget.list.invalidate()");
-    expect(importer).toContain("utils.customWidget.available.invalidate()");
-    expect(importer).toContain("utils.widget.customApi.getData.invalidate()");
-    expect(dialog).toContain("useCustomWidgetImport({");
-    expect(dialog).toContain("legacyId,");
-  });
-});
@@ -1,6 +1,5 @@
 // @vitest-environment jsdom

-import { readFileSync } from "node:fs";
 import { act } from "react";
 import { createRoot } from "react-dom/client";
 import type { Root } from "react-dom/client";
@@ -76,16 +75,6 @@ afterEach(async () => {
 });

 describe("Custom Widget preview panel", () => {
-  test("inherits the application theme instead of forcing a reload-sensitive preview theme", () => {
-    const source = readFileSync(
-      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.tsx`,
-      "utf8",
-    );
-
-    expect(source).not.toContain("forceColorScheme");
-    expect(source).not.toContain("onThemeChange");
-  });
-
  test("contains invalid definitions inside the widget canvas while keeping every inspection tab", async () => {
    await act(async () => {
      root.render(
@@ -45,7 +45,7 @@ export const InviteCreateForm = ({ onClose }: InviteCreateFormProps) => {
      onSubmit={form.onSubmit((values) => {
        mutate(
          {
-            expirationDate: new Date(values.expirationDate),
+            expirationDate: new Date(values.expirationDate).toISOString(),
          },
          {
            onSuccess: (result) => {
@@ -7,7 +7,7 @@ import { createUIMessageStream, createUIMessageStreamResponse, jsonSchema, stepC
 import { cookies } from "next/headers";
 import { z } from "zod/v4";

-import { createTRPCContext, mcpRouter } from "@homarr/api/mcp";
+import { callMcpTool, createTRPCContext, mcpRouter } from "@homarr/api/mcp";
 import {
  createAssistantGenerationAccessToken,
  getAssistantRequestContextEntitiesAsync,
@@ -547,19 +547,7 @@ export async function POST(request: Request) {
            }
            if (contextRequestKey !== null) loadedCustomWidgetContextRequests.add(contextRequestKey);
            try {
-              const procedure = mcpTool.pathInRouter.reduce<unknown>(
-                (current, segment) =>
-                  (typeof current === "object" || typeof current === "function") && current !== null
-                    ? (current as Record<string, unknown>)[segment]
-                    : undefined,
-                caller,
-              );
-              if (typeof procedure !== "function") {
-                throw new Error("Procedure not callable");
-              }
-              const result = await (procedure as (value: unknown) => Promise<unknown>)(
-                executionInput && Object.keys(executionInput as object).length > 0 ? executionInput : undefined,
-              );
+              const result = await callMcpTool(caller, mcpTool, executionInput);
              customWidgetDiscoveryPhase.observe(mcpTool.name, result);
              return toAssistantToolOutput(result, {
                maxCharacters: getAssistantToolOutputMaxCharacters(mcpTool.name),
@@ -2,8 +2,11 @@

 import { beforeEach, describe, expect, test, vi } from "vitest";

+import type * as CatalogModule from "../_extract-tools";
+
 const mocks = vi.hoisted(() => ({
  authenticate: vi.fn(),
+  extractCatalog: vi.fn(),
  ipAddress: vi.fn(() => "127.0.0.1"),
  toolProcedure: vi.fn(),
  loggerWarn: vi.fn(),
@@ -14,7 +17,9 @@ const mocks = vi.hoisted(() => ({
 }));

 vi.mock("next/server", () => ({ userAgent: () => ({ ua: "MCP route test" }) }));
-vi.mock("@homarr/api/mcp", () => ({
+vi.mock("@homarr/api/mcp", async () => ({
+  callMcpTool: (await import("../../../../../../../packages/api/src/mcp-tools")).callMcpTool,
+  extractMcpToolsFromProcedures: mocks.extractCatalog,
  createTRPCContext: vi.fn(() => ({})),
  mcpRouter: { createCaller: vi.fn(() => ({ board: { getAllBoards: mocks.toolProcedure } })) },
 }));
@@ -54,6 +59,7 @@ vi.mock("../_extract-tools", () => ({
      description: "List boards",
      type: "query",
      pathInRouter: ["board", "getAllBoards"],
+      inputMode: "none",
      inputSchema: { type: "object", properties: {} },
    },
    {
@@ -61,6 +67,7 @@ vi.mock("../_extract-tools", () => ({
      description: "List Custom Widgets",
      type: "query",
      pathInRouter: ["customWidget", "list"],
+      inputMode: "none",
      inputSchema: { type: "object", properties: {} },
    },
    {
@@ -68,6 +75,7 @@ vi.mock("../_extract-tools", () => ({
      description: "Search Workshop",
      type: "query",
      pathInRouter: ["customWidget", "workshopSearch"],
+      inputMode: "none",
      inputSchema: { type: "object", properties: {} },
    },
  ],
@@ -305,3 +313,21 @@ describe("MCP protocol errors", () => {
    expect(metadata).not.toHaveProperty("message");
  });
 });
+
+test("logs catalog omissions only when the shared catalog is first built", async () => {
+  const diagnostic = { name: "broken", path: "broken", reason: "invalid_schema" };
+  const tools = [{ name: "valid" }];
+  mocks.extractCatalog.mockReturnValue({ tools, diagnostics: [diagnostic] });
+  const { extractMcpTools } = await vi.importActual<typeof CatalogModule>("../_extract-tools");
+  expect(extractMcpTools()).toBe(tools);
+  expect(extractMcpTools()).toBe(tools);
+  expect(mocks.extractCatalog).toHaveBeenCalledTimes(1);
+  expect(mocks.loggerWarn).toHaveBeenCalledExactlyOnceWith("MCP tool omitted from catalog", diagnostic);
+});
+
+test("rejects unauthenticated tool calls before execution", async () => {
+  mocks.authenticate.mockResolvedValue(null);
+  const { response } = await callMcp("tools/call", { name: "board_getAllBoards", arguments: {} });
+  expect(response.status).toBe(401);
+  expect(mocks.toolProcedure).not.toHaveBeenCalled();
+});
@@ -1,11 +1,12 @@
 import { extractMcpToolsFromProcedures, mcpRouter } from "@homarr/api/mcp";
+import { createLogger } from "@homarr/core/infrastructure/logs";

+const logger = createLogger({ module: "mcp-catalog" });
 let cache: ReturnType<typeof extractMcpToolsFromProcedures> | null = null;

 export function extractMcpTools() {
-  if (cache) return cache;
-
+  if (cache) return cache.tools;
  cache = extractMcpToolsFromProcedures(mcpRouter);
-
-  return cache;
+  for (const diagnostic of cache.diagnostics) logger.warn("MCP tool omitted from catalog", diagnostic);
+  return cache.tools;
 }
@@ -1,12 +1,18 @@
 // @vitest-environment node

+import { initTRPC, TRPCError } from "@trpc/server";
 import { describe, expect, test, vi } from "vitest";
 import { z } from "zod/v4";

 import type { McpTool } from "@homarr/api/mcp";
+import { appManageSchema } from "@homarr/validation/app";
+import { extractMcpToolsFromProcedures } from "@homarr/api/mcp";
+import type { McpMeta } from "../../../../../../packages/api/src/mcp-tools";

 import { createMcpProtocolHandler } from "./_protocol";

+vi.mock("@homarr/api/mcp", async () => import("../../../../../../packages/api/src/mcp-tools"));
+
 const modernMetadata = {
  "io.modelcontextprotocol/protocolVersion": "2026-07-28",
  "io.modelcontextprotocol/clientInfo": { name: "homarr-test", version: "1.0.0" },
@@ -52,7 +58,7 @@ const echoTool: McpTool = {
  description: "Echo a message",
  type: "query",
  pathInRouter: ["echo"],
-  inputValidator: echoValidator,
+  inputMode: "object",
  inputSchema: z.toJSONSchema(echoValidator),
 };

@@ -163,3 +169,197 @@ describe("MCP v2 protocol", () => {
    expect((await parseResponse(listResponse)).result.tools).toEqual([expect.objectContaining({ name: "echo" })]);
  });
 });
+
+describe.each([false, true])("MCP argument dispatch (modern=%s)", (modern) => {
+  const trpc = initTRPC.context<{ user: string }>().meta<McpMeta>().create();
+  const exposed = trpc.procedure.meta({ mcp: { enabled: true } });
+
+  const call = async (
+    handler: ReturnType<typeof createMcpProtocolHandler>,
+    name: string,
+    argumentsValue: Record<string, unknown>,
+  ) => {
+    let request = createRequest("tools/call", { name, arguments: argumentsValue }, name);
+    if (!modern) {
+      request = new Request("http://homarr.test/api/mcp", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "application/json, text/event-stream" },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          id: 1,
+          method: "tools/call",
+          params: { name, arguments: argumentsValue },
+        }),
+      });
+    }
+    const response = await handler.fetch(request);
+    expect(response.headers.has("Mcp-Session-Id")).toBe(false);
+    return (await parseResponse(response)).result;
+  };
+
+  test("transforms once and does not coerce, insert defaults, or remove properties before tRPC", async () => {
+    const transform = vi.fn((value: string) => `${value}!`);
+    const execution = vi.fn((input: unknown) => input);
+    const router = trpc.router({
+      update: exposed
+        .input(
+          z.looseObject({
+            name: z.string().transform(transform),
+            limit: z.number().default(7),
+          }),
+        )
+        .mutation(({ input }) => execution(input)),
+    });
+    const catalog = extractMcpToolsFromProcedures(router);
+    expect(catalog.diagnostics).toEqual([]);
+    const realCaller = router.createCaller({ user: "one" });
+    const dispatch = vi.fn(realCaller.update);
+    const handler = createMcpProtocolHandler({
+      caller: { update: dispatch },
+      tools: catalog.tools,
+      version: "test",
+      instructions: "test",
+      formatToolError: () => "Invalid input",
+    });
+    const argumentsValue = { name: "hello", extra: "preserved" };
+    const result = await call(handler, "update", argumentsValue);
+    expect(result.isError).not.toBe(true);
+    expect(dispatch).toHaveBeenCalledWith(argumentsValue);
+    expect(transform).toHaveBeenCalledTimes(1);
+    expect(execution).toHaveBeenCalledWith({ name: "hello!", limit: 7, extra: "preserved" });
+    await call(handler, "update", { name: "hello", limit: "7" });
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(execution).toHaveBeenCalledTimes(1);
+  });
+
+  test("retains overlapping chained constraints, refinements, and empty object defaults", async () => {
+    const execution = vi.fn((input: unknown) => input);
+    const router = trpc.router({
+      bounded: exposed
+        .input(z.object({ count: z.number().min(2) }))
+        .input(z.object({ count: z.number().max(5) }))
+        .mutation(({ input }) => execution(input)),
+      refined: exposed
+        .input(z.object({ value: z.string().refine((value) => value !== "blocked") }))
+        .mutation(({ input }) => execution(input)),
+      defaults: exposed.input(z.object({ count: z.number().default(3) })).query(({ input }) => input),
+      none: exposed.query(({ input }) => ({ absent: input === undefined })),
+    });
+    const catalog = extractMcpToolsFromProcedures(router);
+    expect(catalog.diagnostics).toEqual([]);
+    const handler = createMcpProtocolHandler({
+      caller: router.createCaller({ user: "one" }),
+      tools: catalog.tools,
+      version: "test",
+      instructions: "test",
+      formatToolError: () => "Invalid input",
+    });
+    for (const count of [1, 6]) expect((await call(handler, "bounded", { count })).isError).toBe(true);
+    expect((await call(handler, "refined", { value: "blocked" })).isError).toBe(true);
+    expect(execution).not.toHaveBeenCalled();
+    expect((await call(handler, "bounded", { count: 3 })).isError).not.toBe(true);
+    expect(execution).toHaveBeenCalledWith({ count: 3 });
+    expect((await call(handler, "defaults", {})).content).toEqual([{ type: "text", text: '{"count":3}' }]);
+    expect((await call(handler, "none", {})).content).toEqual([{ type: "text", text: '{"absent":true}' }]);
+  });
+
+  test("accepts app inputs that tRPC normalizes before checking constraints", async () => {
+    const mutation = vi.fn((input: unknown) => input);
+    const router = trpc.router({ create: exposed.input(appManageSchema).mutation(({ input }) => mutation(input)) });
+    const { tools, diagnostics } = extractMcpToolsFromProcedures(router);
+    expect(diagnostics).toEqual([]);
+    const handler = createMcpProtocolHandler({
+      caller: router.createCaller({ user: "admin" }),
+      tools,
+      version: "test",
+      instructions: "test",
+      formatToolError: () => "Invalid input",
+    });
+    const argumentsValue = {
+      name: `${" ".repeat(64)}App `,
+      description: " description ",
+      iconUrl: " icon ",
+      href: null,
+      pingUrl: " https://example.com ",
+    };
+    expect((await call(handler, "create", argumentsValue)).isError).not.toBe(true);
+    expect(mutation).toHaveBeenCalledExactlyOnceWith({
+      name: "App",
+      description: "description",
+      iconUrl: "icon",
+      href: null,
+      pingUrl: "https://example.com",
+    });
+    expect((await call(handler, "create", { ...argumentsValue, pingUrl: " javascript:alert(1) " })).isError).toBe(true);
+    expect(mutation).toHaveBeenCalledTimes(1);
+  });
+
+  test("accepts Zod ISO timestamps without seconds while rejecting invalid dates", async () => {
+    const mutation = vi.fn((input: unknown) => input);
+    const router = trpc.router({
+      invite: exposed
+        .input(z.object({ expirationDate: z.iso.datetime({ offset: true }) }))
+        .mutation(({ input }) => mutation(input)),
+    });
+    const { tools, diagnostics } = extractMcpToolsFromProcedures(router);
+    expect(diagnostics).toEqual([]);
+    const handler = createMcpProtocolHandler({
+      caller: router.createCaller({ user: "admin" }),
+      tools,
+      version: "test",
+      instructions: "test",
+      formatToolError: () => "Invalid input",
+    });
+    for (const expirationDate of ["2026-12-01T18:00Z", "2026-12-01T19:00+01:00"]) {
+      expect((await call(handler, "invite", { expirationDate })).isError).not.toBe(true);
+      expect(mutation).toHaveBeenLastCalledWith({ expirationDate });
+    }
+    for (const expirationDate of ["2026-02-30T18:00Z", "not-a-date"]) {
+      expect((await call(handler, "invite", { expirationDate })).isError).toBe(true);
+    }
+    expect(mutation).toHaveBeenCalledTimes(2);
+  });
+
+  test("enforces tRPC permissions before executing mutations", async () => {
+    const mutation = vi.fn(() => "changed");
+    const router = trpc.router({
+      restricted: exposed
+        .use(({ ctx, next }) => {
+          if (ctx.user !== "admin") throw new TRPCError({ code: "FORBIDDEN" });
+          return next();
+        })
+        .input(z.object({}))
+        .mutation(mutation),
+    });
+    const { tools, diagnostics } = extractMcpToolsFromProcedures(router);
+    expect(diagnostics).toEqual([]);
+    const handler = createMcpProtocolHandler({
+      caller: router.createCaller({ user: "guest" }),
+      tools,
+      version: "test",
+      instructions: "test",
+      formatToolError: () => "Forbidden",
+    });
+    expect((await call(handler, "restricted", {})).isError).toBe(true);
+    expect(mutation).not.toHaveBeenCalled();
+  });
+
+  test("isolates authenticated callers when reusing catalog schemas", async () => {
+    const router = trpc.router({ who: exposed.query(({ ctx }) => ctx.user) });
+    const { tools } = extractMcpToolsFromProcedures(router);
+    const handlers = ["alice", "bob"].map((user) =>
+      createMcpProtocolHandler({
+        caller: router.createCaller({ user }),
+        tools,
+        version: "test",
+        instructions: "test",
+        formatToolError: () => "Failed",
+      }),
+    );
+    const results = await Promise.all(handlers.map((handler) => call(handler, "who", {})));
+    expect(results.map((result) => result.content)).toEqual([
+      [{ type: "text", text: '"alice"' }],
+      [{ type: "text", text: '"bob"' }],
+    ]);
+  });
+});
@@ -1,5 +1,6 @@
-import { createMcpHandler, McpServer } from "@modelcontextprotocol/server";
+import { createMcpHandler, fromJsonSchema, McpServer } from "@modelcontextprotocol/server";

+import { callMcpTool } from "@homarr/api/mcp";
 import type { McpTool } from "@homarr/api/mcp";

 import { toAssistantToolOutput } from "../assistant/chat/assistant-tool-output";
@@ -15,15 +16,6 @@ interface CreateMcpProtocolHandlerOptions {
  onProtocolError?: (error: Error) => void;
 }

-const resolveProcedure = (caller: unknown, path: string[]) =>
-  path.reduce<unknown>(
-    (current, segment) =>
-      (typeof current === "object" || typeof current === "function") && current !== null
-        ? (current as Record<string, unknown>)[segment]
-        : undefined,
-    caller,
-  );
-
 export const createMcpProtocolHandler = ({
  caller,
  tools,
@@ -52,20 +44,11 @@ export const createMcpProtocolHandler = ({
          tool.name,
          {
            description: tool.description,
-            inputSchema: tool.inputValidator,
+            inputSchema: fromJsonSchema(tool.inputSchema as Parameters<typeof fromJsonSchema>[0]),
          },
          async (args) => {
            try {
-              const procedure = resolveProcedure(caller, tool.pathInRouter);
-              if (typeof procedure !== "function") {
-                return {
-                  content: [{ type: "text" as const, text: `Tool "${tool.name}" is not callable` }],
-                  isError: true,
-                };
-              }
-
-              const input = Object.keys(args).length > 0 ? args : undefined;
-              const result = await (procedure as (value: unknown) => Promise<unknown>)(input);
+              const result = await callMcpTool(caller, tool, args);
              return {
                content: [
                  {
@@ -11,7 +11,6 @@ import {
  CopyButton,
  Group,
  InputWrapper,
-  NumberInput,
  Select,
  SimpleGrid,
  Skeleton,
@@ -30,7 +29,6 @@ import {
  IconCheck,
  IconCopy,
  IconFileTypeCss,
-  IconLayoutGrid,
  IconPalette,
  IconPhoto,
  IconRefresh,
@@ -40,17 +38,10 @@ import type { z } from "zod/v4";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import {
-  BOARD_FIXED_ITEM_SIZE_MAX,
-  BOARD_FIXED_ITEM_SIZE_MIN,
-  backgroundImageAttachments,
-  backgroundImageRepeats,
-  backgroundImageSizes,
-} from "@homarr/definitions";
+import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
-import { normalizeFixedItemSize } from "~/components/board/layout/scaling";

 import {
  getAssistantBoardSettingsResult,
@@ -94,8 +85,6 @@ const normalizeFormValues = (
    iconColor: values.iconColor ?? "",
    itemRadius: values.itemRadius,
    disableStatus: values.disableStatus,
-    fixedScaling: values.fixedScaling ?? false,
-    fixedItemSize: normalizeFixedItemSize(values.fixedItemSize ?? ""),
  };
 };

@@ -274,9 +263,6 @@ const BoardSettingsForm = ({
            <Tabs.Tab value="css" leftSection={<IconFileTypeCss size={15} />}>
              {t("tabs.css")}
            </Tabs.Tab>
-            <Tabs.Tab value="layout" leftSection={<IconLayoutGrid size={15} />}>
-              {t("tabs.layout")}
-            </Tabs.Tab>
            <Tabs.Tab value="appearance" leftSection={<IconPalette size={15} />}>
              {t("tabs.appearance")}
            </Tabs.Tab>
@@ -343,29 +329,6 @@ const BoardSettingsForm = ({
            </Stack>
          </Tabs.Panel>

-          <Tabs.Panel value="layout" pt="md">
-            <Stack gap="md">
-              <Switch
-                label={boardT("board.field.fixedScaling.label")}
-                description={boardT("board.field.fixedScaling.description")}
-                {...form.getInputProps("fixedScaling", { type: "checkbox" })}
-              />
-              <NumberInput
-                label={boardT("board.field.fixedItemSize.label")}
-                description={boardT("board.field.fixedItemSize.description")}
-                min={BOARD_FIXED_ITEM_SIZE_MIN}
-                max={BOARD_FIXED_ITEM_SIZE_MAX}
-                step={10}
-                allowDecimal={false}
-                suffix=" px"
-                {...form.getInputProps("fixedItemSize")}
-                onBlur={() =>
-                  form.setFieldValue("fixedItemSize", normalizeFixedItemSize(form.getValues().fixedItemSize))
-                }
-              />
-            </Stack>
-          </Tabs.Panel>
-
          <Tabs.Panel value="appearance" pt="md">
            <Stack gap="md">
              <SimpleGrid cols={{ base: 1, sm: 2 }}>
@@ -16,8 +16,6 @@ export const assistantBoardSettingKeys = [
  "iconColor",
  "itemRadius",
  "disableStatus",
-  "fixedScaling",
-  "fixedItemSize",
 ] as const satisfies readonly (keyof AssistantBoardSettingsChanges)[];

 const comparableValue = (value: unknown) => (value === null ? "" : value);
@@ -56,14 +54,12 @@ const backgroundKeys = new Set<keyof AssistantBoardSettingsChanges>([
  "backgroundImageRepeat",
  "backgroundImageSize",
 ]);
-const layoutKeys = new Set<keyof AssistantBoardSettingsChanges>(["fixedScaling", "fixedItemSize"]);

 export const getAssistantBoardSettingsDefaultTab = (
  changes: AssistantBoardSettingsChanges,
-): "general" | "layout" | "appearance" | "background" | "css" => {
+): "general" | "appearance" | "background" | "css" => {
  if (changes.customCss !== undefined) return "css";
  const keys = Object.keys(changes) as (keyof AssistantBoardSettingsChanges)[];
-  if (keys.some((key) => layoutKeys.has(key))) return "layout";
  if (keys.some((key) => appearanceKeys.has(key))) return "appearance";
  if (keys.some((key) => backgroundKeys.has(key))) return "background";
  return "general";
@@ -1,8 +1,6 @@
 import { z } from "zod/v4";

 import {
-  BOARD_FIXED_ITEM_SIZE_MAX,
-  BOARD_FIXED_ITEM_SIZE_MIN,
  backgroundImageAttachments,
  backgroundImageRepeats,
  backgroundImageSizes,
@@ -50,17 +48,6 @@ export const assistantBoardSettingsChangesSchema = z
    iconColor: boardColorSchema.nullable().optional(),
    itemRadius: z.enum(["xs", "sm", "md", "lg", "xl"]).optional(),
    disableStatus: z.boolean().optional(),
-    fixedScaling: z
-      .boolean()
-      .optional()
-      .describe("Keep board tiles at a configured size instead of fitting the complete layout to the viewport."),
-    fixedItemSize: z
-      .number()
-      .int()
-      .min(BOARD_FIXED_ITEM_SIZE_MIN)
-      .max(BOARD_FIXED_ITEM_SIZE_MAX)
-      .optional()
-      .describe("Visible pixel width and height of a 1 by 1 tile when fixedScaling is enabled."),
  })
  .describe("Only the board fields the user asked to change.");

@@ -1,37 +0,0 @@
-"use client";
-
-import { Menu } from "@mantine/core";
-import { IconBox, IconLayoutGridAdd, IconPlug, IconResize } from "@tabler/icons-react";
-import { useI18n } from "@homarr/translation/client";
-import { useBoardAddActions } from "./use-board-add-actions";
-import { useOptionalBoardEditing } from "./board-editing-context";
-
-export const BoardAddMenuItems = () => {
-  const editing = useOptionalBoardEditing();
-  const { addWidget, addApp, connectService, addContainer, canConnectService } = useBoardAddActions();
-  const tBoard = useI18n("board");
-  const tIntegration = useI18n("integration");
-  const tContainer = useI18n("section.container");
-  const run = async (action: () => void) => {
-    if (await editing?.enter()) action();
-  };
-  return (
-    <>
-      <Menu.Item leftSection={<IconResize size={20} />} onClick={() => void run(addWidget)}>
-        {tBoard("emptyState.addWidget")}
-      </Menu.Item>
-      <Menu.Item leftSection={<IconBox size={20} />} onClick={() => void run(addApp)}>
-        {tBoard("emptyState.addApp")}
-      </Menu.Item>
-      {canConnectService && (
-        <Menu.Item leftSection={<IconPlug size={20} />} onClick={() => void run(connectService)}>
-          {tIntegration("action.create")}
-        </Menu.Item>
-      )}
-      <Menu.Divider />
-      <Menu.Item leftSection={<IconLayoutGridAdd size={20} />} onClick={() => void run(addContainer)}>
-        {tContainer("action.create")}
-      </Menu.Item>
-    </>
-  );
-};
@@ -1,68 +0,0 @@
-"use client";
-
-import type { PropsWithChildren, MouseEvent } from "react";
-import { useEffect, useState } from "react";
-import { Box, Menu } from "@mantine/core";
-import dynamic from "next/dynamic";
-import { useOptionalBoardEditing } from "./board-editing-context";
-
-const BoardAddMenuItems = dynamic(() => import("./board-add-menu-items").then((module) => module.BoardAddMenuItems));
-const occupiedSpaceSelector =
-  '[data-grid-item-id], [data-editor-grid-entry], [data-item-id], button, a, input, textarea, select, [contenteditable], [role="button"], [role="menu"], [role="dialog"]';
-
-export const BoardContextMenu = ({ children }: PropsWithChildren) => {
-  const editing = useOptionalBoardEditing();
-  const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
-
-  useEffect(() => {
-    if (!position) return;
-    const close = () => setPosition(null);
-    window.addEventListener("scroll", close, true);
-    window.addEventListener("resize", close);
-    return () => {
-      window.removeEventListener("scroll", close, true);
-      window.removeEventListener("resize", close);
-    };
-  }, [position]);
-
-  const openMenu = (event: MouseEvent<HTMLDivElement>) => {
-    if (!editing?.hasChangeAccess || editing.isPending || event.defaultPrevented || event.shiftKey) return;
-    if (!(event.target instanceof Element) || event.target.closest(occupiedSpaceSelector)) return;
-    if (window.getSelection()?.toString()) return;
-    event.preventDefault();
-    event.stopPropagation();
-    setPosition({ x: event.clientX, y: event.clientY });
-  };
-
-  return (
-    <Box h="100%" onContextMenu={openMenu}>
-      {children}
-      <Menu
-        opened={position !== null && Boolean(editing?.hasChangeAccess)}
-        onChange={(opened) => {
-          if (!opened) setPosition(null);
-        }}
-        position="bottom-start"
-        offset={2}
-        withinPortal
-        withArrow={false}
-        shadow="md"
-      >
-        <Menu.Target>
-          <span
-            aria-hidden
-            style={{
-              position: "fixed",
-              left: position?.x ?? 0,
-              top: position?.y ?? 0,
-              width: 0,
-              height: 0,
-              pointerEvents: "none",
-            }}
-          />
-        </Menu.Target>
-        <Menu.Dropdown>{position && <BoardAddMenuItems />}</Menu.Dropdown>
-      </Menu>
-    </Box>
-  );
-};
@@ -1,8 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-
-import type { BoardEditingControls } from "~/app/[locale]/boards/(content)/_editing-provider";
-
-export const BoardEditingContext = createContext<BoardEditingControls | null>(null);
-export const useOptionalBoardEditing = () => useContext(BoardEditingContext);
@@ -1,209 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { Box } from "@mantine/core";
-import { IconLayoutGrid } from "@tabler/icons-react";
-
-import type { BoardPreviewData, BoardPreviewLayout } from "@homarr/boards/layout-preview";
-import { getRepresentativeLayoutWidth, projectBoardLayout } from "@homarr/boards/layout-preview";
-import type { GridAlgorithmItem } from "@homarr/common";
-import { getRootSectionLane } from "@homarr/definitions";
-import { MaskedOrNormalImage } from "@homarr/ui";
-import { widgetCatalogIcons } from "@homarr/ui/widget-icons";
-
-import { getBoardCanvasGeometry } from "./layout/canvas-geometry";
-import { BOARD_GRID_ITEM_INSET, LOGICAL_GRID_PITCH } from "./layout/constants";
-import { calculateBoardUiScale, getBoardCanvasMetrics, getBoardScaling } from "./layout/scaling";
-import { useCanvasViewportSize } from "./layout/use-canvas-viewport-size";
-import appearanceClasses from "./layout/canvas-appearance.module.css";
-import scrollbarClasses from "./layout/canvas-scrollbar.module.css";
-import classes from "./board-layout-thumbnail.module.css";
-
-export interface BoardLayoutThumbnailCanvasProps {
-  preview: BoardPreviewData;
-  label: string;
-  className?: string;
-  canvas: {
-    layout: BoardPreviewLayout;
-    sourceLayout: BoardPreviewLayout;
-    settings: {
-      fixedScaling: boolean;
-      fixedItemSize: number;
-      opacity: number;
-      itemRadius: string;
-      iconColor: string | null;
-      backgroundImageUrl: string | null;
-      backgroundImageSize: string;
-      backgroundImageRepeat: string;
-      backgroundImageAttachment: string;
-    };
-  };
-}
-
-/** The Boards thumbnail with exact canvas geometry for the settings draft. */
-export const BoardLayoutThumbnailCanvas = ({ preview, label, canvas, className }: BoardLayoutThumbnailCanvasProps) => {
-  const { layout, sourceLayout, settings } = canvas;
-  const { ref: viewportRef, width, height } = useCanvasViewportSize();
-  const screenWidth = Math.max(320, getRepresentativeLayoutWidth(layout, preview.layouts));
-  const miniatureScale = width / screenWidth;
-  const geometry = getBoardCanvasGeometry(layout);
-  const metrics = getBoardCanvasMetrics(getBoardScaling(settings), screenWidth - 32, geometry.width);
-  const visualUiScale = metrics.scale * calculateBoardUiScale(metrics.scale);
-  const elements = useMemo(() => projectBoardLayout(preview, sourceLayout, layout), [preview, sourceLayout, layout]);
-  const roots = preview.sections.filter((section) => section.kind === "empty");
-  const rootIds = new Set(roots.map((section) => section.id));
-  const rootElements = elements.filter((element) => rootIds.has(element.sectionId));
-  const rowCount = Math.max(2, ...rootElements.map((element) => element.yOffset + element.height));
-  const pitch = LOGICAL_GRID_PITCH * metrics.scale;
-  const canvasOffset = Math.max(0, (screenWidth - 32 - metrics.width) / 2);
-  const contentWidth = Math.max(screenWidth, metrics.width + 32);
-  const canvasTop = 16;
-  const contentHeight = rowCount * pitch + canvasTop + 16;
-  const itemsById = new Map(preview.items.map((item) => [item.id, item]));
-  const stationaryBackground = settings.fixedScaling || settings.backgroundImageAttachment === "fixed";
-  const backgroundStyle = {
-    backgroundImage: settings.backgroundImageUrl ? `url(${JSON.stringify(settings.backgroundImageUrl)})` : undefined,
-    backgroundSize: settings.backgroundImageSize,
-    backgroundRepeat: settings.backgroundImageRepeat,
-    backgroundPosition: "center center",
-  };
-
-  const renderIcon = (id: string) => {
-    const item = itemsById.get(id);
-    const WidgetIcon = item?.kind ? widgetCatalogIcons[item.kind] : IconLayoutGrid;
-    if (item?.iconUrl) {
-      return (
-        <MaskedOrNormalImage
-          imageUrl={item.iconUrl}
-          hasColor={Boolean(settings.iconColor)}
-          color={settings.iconColor || undefined}
-          alt=""
-          className={classes.scaledItemIcon}
-        />
-      );
-    }
-    return <WidgetIcon className={classes.scaledItemIcon} stroke={1.7} />;
-  };
-
-  // Keep the familiar nested-container representation without mounting live widgets.
-  const renderContents = (element: GridAlgorithmItem) => {
-    if (element.type === "item") return renderIcon(element.id);
-    const nestedItems = elements.filter((candidate) => candidate.sectionId === element.id);
-    const columns = Math.max(element.width, ...nestedItems.map((item) => item.xOffset + item.width));
-    const rows = Math.max(element.height, ...nestedItems.map((item) => item.yOffset + item.height));
-    return (
-      <span
-        className={classes.containerContents}
-        style={{
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-          gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
-        }}
-      >
-        {nestedItems.map((item) => (
-          <span
-            key={item.id}
-            className={classes.tile}
-            style={{
-              gridColumn: `${item.xOffset + 1} / span ${item.width}`,
-              gridRow: `${item.yOffset + 1} / span ${item.height}`,
-            }}
-          >
-            {renderIcon(item.id)}
-          </span>
-        ))}
-      </span>
-    );
-  };
-
-  return (
-    <Box className={[classes.canvas, classes.exactCanvas, className].filter(Boolean).join(" ")}>
-      {stationaryBackground && (
-        <Box
-          aria-hidden
-          className={classes.scaledSurface}
-          style={{
-            ...backgroundStyle,
-            width: screenWidth,
-            height: height / (miniatureScale || 1),
-            transform: `scale(${miniatureScale})`,
-            pointerEvents: "none",
-          }}
-        />
-      )}
-      <Box
-        component="section"
-        ref={viewportRef}
-        aria-label={label}
-        tabIndex={0}
-        className={`${classes.thumbnailViewport} ${scrollbarClasses.scrollbar}`}
-        data-testid="layout-preview-viewport"
-        data-preview-scale={miniatureScale}
-        data-item-size={metrics.itemSize}
-      >
-        <Box
-          style={{
-            width: contentWidth * miniatureScale,
-            height: contentHeight * miniatureScale,
-            minHeight: "100%",
-            overflow: "clip",
-            position: "relative",
-          }}
-        >
-          <Box
-            aria-hidden
-            className={`${classes.scaledSurface} ${appearanceClasses.appearance}`}
-            style={{
-              width: contentWidth,
-              height: Math.max(contentHeight, (screenWidth * 7) / 16),
-              transform: `scale(${miniatureScale})`,
-              "--board-canvas-ui-scale": visualUiScale,
-              "--preview-opacity": settings.opacity / 100,
-              "--preview-radius": `var(--mantine-radius-${settings.itemRadius})`,
-              color: settings.iconColor || undefined,
-              ...(!stationaryBackground && backgroundStyle),
-            }}
-          >
-            {geometry.lanes.map((lane) => {
-              const root = roots.find((section) => getRootSectionLane(section.xOffset) === lane.lane);
-              const laneElements = rootElements.filter((element) => element.sectionId === root?.id);
-              return (
-                <Box
-                  key={lane.lane}
-                  data-preview-lane={lane.lane}
-                  className={classes.scaledLane}
-                  style={{
-                    left: 16 + canvasOffset + lane.offset * metrics.scale,
-                    top: canvasTop,
-                    width: lane.width * metrics.scale,
-                    height: rowCount * pitch,
-                  }}
-                >
-                  {laneElements.map((element) => {
-                    let inset = BOARD_GRID_ITEM_INSET;
-                    if (element.type === "section" && !settings.fixedScaling) inset = 5 * visualUiScale;
-                    return (
-                      <Box
-                        key={`${element.type}-${element.id}`}
-                        className={`${classes.tile} ${classes.scaledTile}`}
-                        data-preview-tile
-                        data-type={element.type}
-                        style={{
-                          left: element.xOffset * pitch + inset,
-                          top: element.yOffset * pitch + inset,
-                          width: Math.max(0, element.width * pitch - 2 * inset),
-                          height: Math.max(0, element.height * pitch - 2 * inset),
-                        }}
-                      >
-                        {renderContents(element)}
-                      </Box>
-                    );
-                  })}
-                </Box>
-              );
-            })}
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
@@ -5,7 +5,11 @@
  overflow: hidden;
  color: var(--mantine-color-dimmed);
  background:
-    linear-gradient(to top, color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent), transparent 55%),
+    linear-gradient(
+      to top,
+      color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent),
+      transparent 55%
+    ),
    var(--mantine-color-body);
 }

@@ -80,60 +84,3 @@
  gap: rem(1px);
  overflow: hidden;
 }
-
-.exactCanvas {
-  position: relative;
-  max-height: min(18rem, 38dvh);
-  overflow: hidden;
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-md);
-}
-
-.thumbnailViewport {
-  position: absolute;
-  inset: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-.thumbnailViewport:focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: -2px;
-}
-
-.scaledSurface {
-  position: absolute;
-  inset: 0 auto auto 0;
-  transform-origin: top left;
-}
-
-.scaledLane,
-.scaledTile {
-  position: absolute;
-}
-
-.scaledSurface .tile {
-  border-radius: var(--preview-radius);
-  background: rgb(
-    from light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)) r g b / var(--preview-opacity, 1)
-  );
-  border-color: rgb(
-    from light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) r g b / var(--preview-opacity, 1)
-  );
-}
-
-.scaledTile[data-type="section"] {
-  border-style: dashed;
-}
-
-.scaledItemIcon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: calc(32px * var(--board-canvas-ui-scale, 1));
-  height: calc(32px * var(--board-canvas-ui-scale, 1));
-  max-width: 55%;
-  max-height: 55%;
-  object-fit: contain;
-  transform: translate(-50%, -50%);
-}
@@ -6,8 +6,6 @@ import { projectBoardLayout } from "@homarr/boards/layout-preview";
 import { boardLanes, getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
 import { widgetCatalogIcons } from "@homarr/ui/widget-icons";

-import { BoardLayoutThumbnailCanvas } from "./board-layout-thumbnail-canvas";
-import type { BoardLayoutThumbnailCanvasProps } from "./board-layout-thumbnail-canvas";
 import classes from "./board-layout-thumbnail.module.css";

 interface BoardLayoutThumbnailProps {
@@ -15,7 +13,6 @@ interface BoardLayoutThumbnailProps {
  label: string;
  previewRowLimit?: number;
  className?: string;
-  canvas?: BoardLayoutThumbnailCanvasProps["canvas"];
 }

 const compactBoardLayoutThumbnailRows = 12;
@@ -26,11 +23,7 @@ export const BoardLayoutThumbnail = ({
  label,
  previewRowLimit = compactBoardLayoutThumbnailRows,
  className,
-  canvas,
 }: BoardLayoutThumbnailProps) => {
-  if (preview && canvas) {
-    return <BoardLayoutThumbnailCanvas preview={preview} label={label} canvas={canvas} className={className} />;
-  }
  const canvasClassName = [classes.canvas, className].filter(Boolean).join(" ");
  const layout = preview?.layouts.find((candidate) => candidate.role === "base") ?? preview?.layouts.at(0);
  if (!preview || !layout) {
@@ -1,5 +1,4 @@
 import { createId } from "@homarr/common";
-import { BOARD_FIXED_ITEM_SIZE_DEFAULT } from "@homarr/definitions";

 import type { Board, ContainerSection, EmptySection, Item, Section } from "~/app/[locale]/boards/_types";
 import { ContainerSectionMockBuilder } from "./container-section-mock";
@@ -28,8 +27,6 @@ export class BoardMockBuilder {
      name: "board",
      opacity: 100,
      isPublic: true,
-      fixedScaling: false,
-      fixedItemSize: BOARD_FIXED_ITEM_SIZE_DEFAULT,
      disableStatus: false,
      customCss: "",
      creatorId: createId(),
@@ -18,11 +18,6 @@
  transform: translateY(calc(-100% - 8px));
 }

-/* Keep first-row labels inside the scrollport without adding space above the board. */
-:global([data-canvas-scaling="fixed"] [data-grid-y="0"] > .board-grid-content-mount) > .wrapper {
-  transform: translateY(8px);
-}
-
 .panel {
  @mixin dark {
    --background-color: rgb(from var(--mantine-color-dark-7) r g b / 0.96);
@@ -5,33 +5,13 @@ 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);
- the canvas is zoomed once with one uniform scale.
+- 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. Responsive scaling derives the zoom from the
-available width. Fixed scaling derives it from the configured painted `1 x 1`
-card size and keeps the canvas centered while it fits; otherwise the board's
-named canvas region scrolls on both axes. Every root lane keeps at least one
-viewport of height, and edit-mode previews extend it downward as needed.
-
-## Sizing policy and previews
-
-`scaling.ts` owns the explicit `BoardScaling` union and pure canvas metrics.
-`getBoardScaling` is the adapter from the persisted boolean/size settings. Both
-the live renderer and settings thumbnail consume the same metrics; neither
-should add viewport fitting outside this module. Fixed sizing uses CSS pixels
-and never compensates for browser zoom or device-pixel ratio.
-
-`canvas-geometry.ts` owns lane offsets, widths, and gaps for both renderers.
-The settings thumbnail applies a separate miniature transform after calculating
-board geometry at a representative layout width. That display transform must never feed
-back into the board sizing policy.
-
-To retire responsive sizing, migrate the persisted default/settings, remove
-the responsive policy branch and its UI option, then remove the responsive
-viewport styles. Placement geometry and the fixed renderer do not need a
-second conversion. Nested Container fitting is a separate layout concern.
+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.

 The read-only renderer should:

@@ -1,39 +0,0 @@
-.appearance {
-  /*
-   * Keep dashboard UI at its normal readable density while the fixed canvas
-   * is fitted below 100%. Above 100%, the canvas still behaves like browser
-   * zoom and enlarges everything together.
-   */
-  --mantine-scale: var(--board-canvas-ui-scale, 1);
-  /* Keep a subtle boundary inset without widening the visual gap too much. */
-  --board-grid-item-inset: calc(var(--mantine-spacing-xs) / 2);
-  --mantine-spacing-xs: calc(0.625rem * var(--board-canvas-ui-scale, 1));
-  --mantine-spacing-sm: calc(0.75rem * var(--board-canvas-ui-scale, 1));
-  --mantine-spacing-md: calc(1rem * var(--board-canvas-ui-scale, 1));
-  --mantine-spacing-lg: calc(1.25rem * var(--board-canvas-ui-scale, 1));
-  --mantine-spacing-xl: calc(2rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-xxs: calc(0.6875rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-xs: calc(0.75rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-sm: calc(0.875rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-md: calc(1rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-lg: calc(1.125rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-xl: calc(1.25rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-2xl: calc(1.5rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-3xl: calc(1.75rem * var(--board-canvas-ui-scale, 1));
-  --mantine-font-size-4xl: calc(2.25rem * var(--board-canvas-ui-scale, 1));
-  --mantine-h1-font-size: calc(2.125rem * var(--board-canvas-ui-scale, 1));
-  --mantine-h2-font-size: calc(1.625rem * var(--board-canvas-ui-scale, 1));
-  --mantine-h3-font-size: calc(1.375rem * var(--board-canvas-ui-scale, 1));
-  --mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1));
-  --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
-  --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
-  /* Without these, border-radius tokens (e.g. the board's "Item radius" setting) stay at their
-   * flat rem value while the canvas zoom shrinks the rendered card, so the chosen radius becomes
-   * imperceptibly small on busy/zoomed-out boards - same class of bug as the spacing/font tokens
-   * above, just never ported over to radius. */
-  --mantine-radius-xs: calc(0.25rem * var(--board-canvas-ui-scale, 1));
-  --mantine-radius-sm: calc(0.25rem * var(--board-canvas-ui-scale, 1));
-  --mantine-radius-md: calc(0.5rem * var(--board-canvas-ui-scale, 1));
-  --mantine-radius-lg: calc(0.75rem * var(--board-canvas-ui-scale, 1));
-  --mantine-radius-xl: calc(1rem * var(--board-canvas-ui-scale, 1));
-}
@@ -1,22 +0,0 @@
-import { boardLanes, getBoardLaneColumnCount } from "@homarr/definitions";
-
-import { getLogicalGridSize } from "./geometry";
-
-export const BOARD_LANE_GAP = 24;
-
-/** Shared horizontal geometry for the live board and its settings playground. */
-export const getBoardCanvasGeometry = (layout: Parameters<typeof getBoardLaneColumnCount>[0]) => {
-  let width = 0;
-  const lanes = boardLanes.flatMap((lane) => {
-    const columnCount = getBoardLaneColumnCount(layout, lane);
-    if (columnCount === 0) return [];
-
-    if (width > 0) width += BOARD_LANE_GAP;
-    const offset = width;
-    const laneWidth = getLogicalGridSize(columnCount);
-    width += laneWidth;
-    return [{ lane, columnCount, width: laneWidth, offset }];
-  });
-
-  return { lanes, width, gridTemplateColumns: lanes.map((lane) => `${lane.width}px`).join(" ") };
-};
@@ -1,35 +0,0 @@
-.scrollbar::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
-}
-
-.scrollbar::-webkit-scrollbar-track,
-.scrollbar::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: transparent;
-}
-
-.scrollbar:hover::-webkit-scrollbar-thumb,
-.scrollbar:focus-visible::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--mantine-color-dimmed) 45%, transparent);
-}
-
-.scrollbar::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--mantine-color-dimmed) 70%, transparent);
-}
-
-@supports (-moz-appearance: none) {
-  .scrollbar {
-    scrollbar-color: transparent transparent;
-    scrollbar-width: thin;
-  }
-
-  .scrollbar:hover,
-  .scrollbar:focus-visible {
-    scrollbar-color: color-mix(in srgb, var(--mantine-color-dimmed) 45%, transparent) transparent;
-  }
-}
@@ -5,7 +5,5 @@
 export const LOGICAL_GRID_CELL_SIZE = 200;
 export const LOGICAL_GRID_GAP = 12;
 export const LOGICAL_GRID_PITCH = LOGICAL_GRID_CELL_SIZE + LOGICAL_GRID_GAP;
-/** Physical inset between a grid footprint and each edge of its painted tile. */
-export const BOARD_GRID_ITEM_INSET = 10;

 export const COLLAPSED_SECTION_ROW_COUNT = 0.5;
@@ -10,36 +10,6 @@
  overflow: clip;
 }

-.viewport[data-canvas-scaling="fixed"] {
-  --board-canvas-shell-offset: calc(var(--app-shell-header-offset, 0px) + var(--app-shell-footer-offset, 0px));
-  --board-canvas-shell-padding: calc(2 * var(--app-shell-padding, 1rem));
-  --board-canvas-fixed-viewport-height: calc(
-    100dvh - var(--board-canvas-shell-offset) - var(--board-canvas-shell-padding)
-  );
-
-  height: var(--board-canvas-fixed-viewport-height);
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-.viewport[data-canvas-scaling="fixed"]:focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: -2px;
-}
-
-.viewport[data-canvas-scaling="fixed"][data-canvas-centered="true"] .sizer {
-  margin-inline: auto;
-}
-
-.viewport[data-canvas-scaling="fixed"] .canvas {
-  /* Fixed size describes every painted tile, including container sections. */
-  --board-grid-item-inset: calc(var(--board-grid-card-inset, 10px) * var(--board-canvas-inverse-scale, 1));
-}
-
-.viewport[data-canvas-scaling="fixed"][data-board-hydrated="false"] {
-  overflow: clip;
-}
-
 .sizer {
  position: relative;
 }
@@ -47,4 +17,42 @@
 .canvas {
  position: absolute;
  inset: 0 auto auto 0;
+
+  /*
+   * Keep dashboard UI at its normal readable density while the fixed canvas
+   * is fitted below 100%. Above 100%, the canvas still behaves like browser
+   * zoom and enlarges everything together.
+   */
+  --mantine-scale: var(--board-canvas-ui-scale, 1);
+  /* Keep a subtle boundary inset without widening the visual gap too much. */
+  --board-grid-item-inset: calc(var(--mantine-spacing-xs) / 2);
+  --mantine-spacing-xs: calc(0.625rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-sm: calc(0.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-md: calc(1rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-lg: calc(1.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-xl: calc(2rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-xxs: calc(0.6875rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-xs: calc(0.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-sm: calc(0.875rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-md: calc(1rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-lg: calc(1.125rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-xl: calc(1.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-2xl: calc(1.5rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-3xl: calc(1.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-4xl: calc(2.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h1-font-size: calc(2.125rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h2-font-size: calc(1.625rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h3-font-size: calc(1.375rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
+  /* Without these, border-radius tokens (e.g. the board's "Item radius" setting) stay at their
+   * flat rem value while the canvas zoom shrinks the rendered card, so the chosen radius becomes
+   * imperceptibly small on busy/zoomed-out boards - same class of bug as the spacing/font tokens
+   * above, just never ported over to radius. */
+  --mantine-radius-xs: calc(0.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-sm: calc(0.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-md: calc(0.5rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-lg: calc(0.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-xl: calc(1rem * var(--board-canvas-ui-scale, 1));
 }
@@ -1,46 +1,49 @@
 "use client";

-import type { CSSProperties, PropsWithChildren } from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import type { PropsWithChildren } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { Box } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";

-import { BOARD_GRID_ITEM_INSET } from "./constants";
-import type { BoardScaling } from "./scaling";
-import { calculateBoardUiScale, getBoardCanvasMetrics } from "./scaling";
-import { useCanvasViewportSize } from "./use-canvas-viewport-size";
 import classes from "./scaled-board-canvas.module.css";
-import appearanceClasses from "./canvas-appearance.module.css";
-import scrollbarClasses from "./canvas-scrollbar.module.css";

 const BoardCanvasScaleContext = createContext(1);
-const BoardCanvasViewportHeightContext = createContext<number | null>(null);

 export const useBoardCanvasScale = () => useContext(BoardCanvasScaleContext);
-export const useBoardCanvasViewportHeight = () => useContext(BoardCanvasViewportHeightContext);
+
+export const calculateBoardCanvasScale = (availableWidth: number, logicalWidth: number) => {
+  if (!Number.isFinite(availableWidth) || !Number.isFinite(logicalWidth)) return 1;
+  if (availableWidth <= 0 || logicalWidth <= 0) return 1;
+
+  return availableWidth / logicalWidth;
+};
+
+export const calculateBoardUiScale = (canvasScale: number) => {
+  if (!Number.isFinite(canvasScale) || canvasScale <= 0) return 1;
+
+  return canvasScale < 1 ? 1 / canvasScale : 1;
+};

 interface ScaledBoardCanvasProps {
  logicalWidth: number;
  initialLogicalHeight: number;
  initialAvailableWidth: number;
-  scaling: BoardScaling;
  label: string;
 }

 /**
 * Scales the complete board as one surface while keeping widget layout in
- * fixed logical pixels. Responsive scaling fits the canvas to its viewport;
- * fixed scaling contains overflow in a keyboard-scrollable canvas region.
+ * fixed logical pixels. The complete canvas always fits its viewport so board
+ * content can never widen the document or require horizontal scrolling.
 */
 export const ScaledBoardCanvas = ({
  logicalWidth,
  initialLogicalHeight,
  initialAvailableWidth,
-  scaling,
  label,
  children,
 }: PropsWithChildren<ScaledBoardCanvasProps>) => {
-  const { ref: viewportRef, width: availableWidth, height: viewportHeight } = useCanvasViewportSize();
+  const { ref: viewportRef, width: availableWidth } = useElementSize<HTMLDivElement>();
  const { ref: canvasRef, height: logicalHeight } = useElementSize<HTMLDivElement>();
  const [isHydrated, setIsHydrated] = useState(false);

@@ -50,58 +53,40 @@ export const ScaledBoardCanvas = ({

  const resolvedAvailableWidth = availableWidth > 0 ? availableWidth : initialAvailableWidth;
  const resolvedLogicalHeight = logicalHeight > 0 ? logicalHeight : initialLogicalHeight;
-  const isFixedScaling = scaling.mode === "fixed";
-  const {
-    scale,
-    width: visualWidth,
-    centered,
-    overflows,
-  } = getBoardCanvasMetrics(scaling, resolvedAvailableWidth, logicalWidth);
+  const scale = useMemo(
+    () => calculateBoardCanvasScale(resolvedAvailableWidth, logicalWidth),
+    [logicalWidth, resolvedAvailableWidth],
+  );
  const uiScale = calculateBoardUiScale(scale);
  const inverseScale = scale > 0 ? 1 / scale : 1;
+  const visualWidth = logicalWidth * scale;
+  const hasHorizontalOverflow = resolvedAvailableWidth > 0 && visualWidth - resolvedAvailableWidth > 0.5;

  return (
    <Box
      component="section"
      ref={viewportRef}
-      className={`${classes.viewport} ${isFixedScaling ? scrollbarClasses.scrollbar : ""}`}
+      className={classes.viewport}
      data-testid="board-canvas"
      data-board-hydrated={isHydrated ? "true" : "false"}
-      data-canvas-scaling={scaling.mode}
      data-canvas-scale={scale}
-      data-canvas-overflow={overflows ? "true" : "false"}
-      data-canvas-centered={centered ? "true" : undefined}
+      data-canvas-overflow={hasHorizontalOverflow ? "true" : "false"}
      data-canvas-initial-height={initialLogicalHeight}
      data-canvas-initial-width={initialAvailableWidth}
      aria-label={label}
-      tabIndex={isFixedScaling ? 0 : undefined}
    >
-      <Box
-        className={classes.sizer}
-        style={
-          {
-            "--board-canvas-scale": scale,
-            width: visualWidth,
-            height: resolvedLogicalHeight * scale,
-          } as CSSProperties
-        }
-      >
+      <Box className={classes.sizer} style={{ width: visualWidth, height: resolvedLogicalHeight * scale }}>
        <Box
          ref={canvasRef}
-          className={`${classes.canvas} ${appearanceClasses.appearance}`}
+          className={classes.canvas}
          style={{
-            "--board-grid-card-inset": `${BOARD_GRID_ITEM_INSET}px`,
            "--board-canvas-inverse-scale": inverseScale,
            "--board-canvas-ui-scale": uiScale,
            width: logicalWidth,
            zoom: scale,
          }}
        >
-          <BoardCanvasScaleContext.Provider value={scale}>
-            <BoardCanvasViewportHeightContext.Provider value={isFixedScaling ? viewportHeight : null}>
-              {children}
-            </BoardCanvasViewportHeightContext.Provider>
-          </BoardCanvasScaleContext.Provider>
+          <BoardCanvasScaleContext.Provider value={scale}>{children}</BoardCanvasScaleContext.Provider>
        </Box>
      </Box>
    </Box>
@@ -1,55 +0,0 @@
-import {
-  BOARD_FIXED_ITEM_SIZE_DEFAULT,
-  BOARD_FIXED_ITEM_SIZE_MAX,
-  BOARD_FIXED_ITEM_SIZE_MIN,
-} from "@homarr/definitions";
-
-import { BOARD_GRID_ITEM_INSET, LOGICAL_GRID_PITCH } from "./constants";
-
-export type BoardScaling = { mode: "fixed"; itemSize: number } | { mode: "responsive" };
-
-export const normalizeFixedItemSize = (value: number | string) => {
-  if (value === "" || !Number.isFinite(Number(value))) return BOARD_FIXED_ITEM_SIZE_DEFAULT;
-
-  return Math.min(BOARD_FIXED_ITEM_SIZE_MAX, Math.max(BOARD_FIXED_ITEM_SIZE_MIN, Math.round(Number(value))));
-};
-
-/** The only adapter from persisted settings to the canvas sizing policy. */
-export const getBoardScaling = (settings: { fixedScaling: boolean; fixedItemSize: number }): BoardScaling => {
-  if (settings.fixedScaling) return { mode: "fixed", itemSize: normalizeFixedItemSize(settings.fixedItemSize) };
-
-  return { mode: "responsive" };
-};
-
-export const calculateBoardCanvasScale = (availableWidth: number, logicalWidth: number) => {
-  if (!Number.isFinite(availableWidth) || !Number.isFinite(logicalWidth)) return 1;
-  if (availableWidth <= 0 || logicalWidth <= 0) return 1;
-
-  return availableWidth / logicalWidth;
-};
-
-export const calculateFixedBoardCanvasScale = (itemSize: number) =>
-  (normalizeFixedItemSize(itemSize) + 2 * BOARD_GRID_ITEM_INSET) / LOGICAL_GRID_PITCH;
-
-/** Fixed sizing never reads viewport width or devicePixelRatio: browser zoom stays native. */
-export const getBoardCanvasMetrics = (scaling: BoardScaling, availableWidth: number, logicalWidth: number) => {
-  let scale: number;
-  if (scaling.mode === "fixed") scale = calculateFixedBoardCanvasScale(scaling.itemSize);
-  else scale = calculateBoardCanvasScale(availableWidth, logicalWidth);
-
-  const width = logicalWidth * scale;
-  return {
-    scale,
-    width,
-    itemSize: Math.max(0, LOGICAL_GRID_PITCH * scale - 2 * BOARD_GRID_ITEM_INSET),
-    centered: scaling.mode === "fixed" && width <= availableWidth,
-    overflows: availableWidth > 0 && width - availableWidth > 0.5,
-  };
-};
-
-export const calculateBoardUiScale = (canvasScale: number) => {
-  if (!Number.isFinite(canvasScale) || canvasScale <= 0) return 1;
-  if (canvasScale < 1) return 1 / canvasScale;
-
-  return 1;
-};
@@ -1,65 +1,8 @@
 import { describe, expect, test } from "vitest";

-import { BOARD_FIXED_ITEM_SIZE_DEFAULT } from "@homarr/definitions";
-
-import { getBoardCanvasGeometry } from "../canvas-geometry";
-import { BOARD_GRID_ITEM_INSET, LOGICAL_GRID_PITCH } from "../constants";
-import {
-  calculateBoardCanvasScale,
-  calculateBoardUiScale,
-  calculateFixedBoardCanvasScale,
-  getBoardCanvasMetrics,
-  getBoardScaling,
-  normalizeFixedItemSize,
-} from "../scaling";
+import { calculateBoardCanvasScale, calculateBoardUiScale } from "../scaled-board-canvas";

 describe("board canvas scale policy", () => {
-  test.each([40, 80, 100, 200])("renders an exact %s CSS-pixel fixed tile", (itemSize) => {
-    const scale = calculateFixedBoardCanvasScale(itemSize);
-    expect(LOGICAL_GRID_PITCH * scale - 2 * BOARD_GRID_ITEM_INSET).toBeCloseTo(itemSize);
-  });
-
-  test.each([Number.NaN, Number.POSITIVE_INFINITY, ""])(
-    "uses the default fixed size for unavailable input %s",
-    (input) => {
-      expect(normalizeFixedItemSize(input)).toBe(BOARD_FIXED_ITEM_SIZE_DEFAULT);
-    },
-  );
-
-  test("clamps and rounds the configured fixed size", () => {
-    expect(normalizeFixedItemSize(20)).toBe(40);
-    expect(normalizeFixedItemSize(400)).toBe(200);
-    expect(normalizeFixedItemSize(100.7)).toBe(101);
-  });
-
-  test.each([0.75, 1, 1.25, 1.5, 2])("preserves fixed CSS dimensions at browser zoom %s", (zoom) => {
-    const scaling = getBoardScaling({ fixedScaling: true, fixedItemSize: 200 });
-    const metrics = getBoardCanvasMetrics(scaling, 1440 / zoom, 5 * LOGICAL_GRID_PITCH);
-    expect(metrics.itemSize).toBeCloseTo(200);
-    expect(metrics.width).toBeCloseTo(1100);
-  });
-
-  test("centers fixed boards that fit and scrolls without changing tile size when narrow", () => {
-    const scaling = getBoardScaling({ fixedScaling: true, fixedItemSize: 200 });
-    expect(getBoardCanvasMetrics(scaling, 2560, 1060)).toMatchObject({ centered: true, overflows: false });
-    expect(getBoardCanvasMetrics(scaling, 600, 1060)).toMatchObject({ centered: false, overflows: true });
-  });
-
-  test("keeps the sizing mode adapter reversible", () => {
-    expect(getBoardScaling({ fixedScaling: false, fixedItemSize: 200 })).toEqual({ mode: "responsive" });
-    expect(getBoardCanvasMetrics({ mode: "responsive" }, 600, 1060).width).toBeCloseTo(600);
-  });
-
-  test("aligns left, main, and right lanes using the same canvas geometry", () => {
-    const geometry = getBoardCanvasGeometry({ columnCount: 5, leftGutterColumnCount: 1, rightGutterColumnCount: 1 });
-    expect(geometry.lanes.map(({ lane, offset, width }) => ({ lane, offset, width }))).toEqual([
-      { lane: "left", offset: 0, width: 212 },
-      { lane: "main", offset: 236, width: 636 },
-      { lane: "right", offset: 896, width: 212 },
-    ]);
-    expect(geometry.width).toBe(1108);
-  });
-
  test("fits the logical canvas exactly", () => {
    const scale = calculateBoardCanvasScale(840, 1000);

@@ -1,16 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-
-/** Canvas fitting uses the scrollport, not the border box including native scrollbars. */
-export const useCanvasViewportSize = () => {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  const ref = useCallback((node: HTMLElement | null) => {
-    if (!node) return;
-    const observer = new ResizeObserver(() => setSize({ width: node.clientWidth, height: node.clientHeight }));
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
-
-  return { ref, ...size };
-};
@@ -1,9 +1,11 @@
 .board-grid-editor {
  position: absolute;
-  inset: 0 auto auto 0;
+  inset: 0 0 auto;
+  margin: 0 auto;
  overflow: visible;
  border-radius: var(--mantine-radius-md);
  pointer-events: none;
+  zoom: var(--board-grid-content-scale, 1);
 }

 .board-grid-entry {
@@ -20,14 +22,7 @@
  width: var(--board-grid-preview-width) !important;
  height: var(--board-grid-preview-height) !important;
  translate: var(--board-grid-preview-x) var(--board-grid-preview-y);
-  will-change: translate;
-}
-
-.board-grid-entry[data-grid-preview="true"]:not([data-dnd-active="true"]) {
-  transition:
-    translate 100ms ease,
-    width 100ms ease,
-    height 100ms ease;
+  transition: none;
 }

 .board-grid-entry[data-dnd-active="true"],
@@ -109,8 +104,8 @@
  zoom: var(--board-grid-overlay-content-zoom, 1);
 }

-body[data-board-grid-interacting] .board-grid-entry[data-dnd-active="true"],
-body[data-board-grid-interacting] .board-grid-entry[data-dnd-drag-source="true"],
+/* Displaced entries must snap with the preview too; animating their offsets can trail a new swap target. */
+body[data-board-grid-interacting] .board-grid-entry,
 body[data-board-grid-interacting] .board-grid-placeholder {
  transition: none;
 }
@@ -415,7 +415,11 @@ export const BoardGridEditorProvider = ({ children }: PropsWithChildren) => {
        sectionId: grid.id,
        placements: grid.placements,
      }));
-      commitSectionGrids(snapshots);
+      const hasChanges = commitSectionGrids(snapshots);
+      if (!hasChanges) {
+        clearInteraction();
+        return;
+      }

      const placement = state.grids
        .flatMap((grid) => grid.placements)
@@ -429,7 +433,9 @@ export const BoardGridEditorProvider = ({ children }: PropsWithChildren) => {
          )} ${placement.h}`,
        );
      }
-      clearInteraction();
+      // Cache subscribers receive the committed board asynchronously. Keep the preview until
+      // the board-change layout effect clears it, so displaced items never flash at their old positions.
+      activeRef.current = null;
    },
    [announce, clearInteraction, commitSectionGrids, currentLayoutId, t],
  );
@@ -46,7 +46,6 @@

 .editorGrid {
  position: absolute;
-  inset: 0 auto auto 0;
 }

 .editorPortalHost {
@@ -63,8 +62,13 @@
  overflow: visible;
 }

+/* Containers provide their own inner item gap, so their card must keep the full grid aspect ratio. */
+.staticItem[data-type="section"] > .contentMount {
+  inset: 0;
+}
+
 .staticItem[data-type="item"] > .contentMount {
-  inset: calc(var(--board-grid-card-inset, 10px) * var(--board-canvas-inverse-scale, 1));
+  inset: calc(10px * var(--board-canvas-inverse-scale, 1));
 }

 .staticItem:has([data-board-container-label]) {
@@ -10,7 +10,6 @@ import { useEditMode } from "@homarr/boards/edit-mode";

 import type { ContainerSectionItem, Section } from "~/app/[locale]/boards/_types";
 import {
-  BOARD_GRID_ITEM_INSET,
  getCollapsedDisplayLayout,
  getEditableCanvasAttributes,
  getGridRowCountForVisualHeight,
@@ -19,8 +18,7 @@ import {
  getReadonlyCanvasAttributes,
  normalizeGridPlacement,
 } from "~/components/board/layout";
-import { useBoardCanvasScale, useBoardCanvasViewportHeight } from "~/components/board/layout/scaled-board-canvas";
-import { calculateBoardUiScale } from "~/components/board/layout/scaling";
+import { calculateBoardUiScale, useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
 import { useGridEditorRuntimeStatus } from "./grid-editor-runtime";
 import { createGridEntryElementStore, useGridEditorRegistry } from "./grid-editor-registry";
 import type { SectionGridPlacement } from "./use-grid-layout-actions";
@@ -52,7 +50,6 @@ export const SectionGrid = ({
 }: SectionGridProps) => {
  const [isEditMode] = useEditMode();
  const canvasScale = useBoardCanvasScale();
-  const canvasViewportHeight = useBoardCanvasViewportHeight();
  const editorRuntimeStatus = useGridEditorRuntimeStatus();
  const editorRegistry = useGridEditorRegistry();
  const editorHostRef = useRef<HTMLDivElement>(null);
@@ -133,11 +130,7 @@ export const SectionGrid = ({
    () => innerSections.map((item) => withPlacement(item, placementById.get(item.id))),
    [innerSections, placementById],
  );
-  const minimumViewportRowCount = useMinimumViewportRowCount(
-    section.kind === "empty",
-    canvasScale,
-    canvasViewportHeight,
-  );
+  const minimumViewportRowCount = useMinimumViewportRowCount(section.kind === "empty", canvasScale);
  const contentRowCount = Math.max(1, getLayoutRowCount(displayPlacements));
  const rowCount = Math.max(contentRowCount, requestedRowCount, minimumViewportRowCount);
  const maxRowCount = section.kind === "container" || railPlacement !== "main" ? rowCount : null;
@@ -150,40 +143,15 @@ export const SectionGrid = ({
  const isScrollableContainer = section.kind === "container" && section.options.scrollable;
  const viewportRowCount =
    viewportRowCountOverride ?? (isScrollableContainer ? Math.max(requestedRowCount, 1) : rowCount);
-  // A container's own visible card is inset from its allocated board cell by the board's
-  // standard per-item gap (see the base, non-container `.staticItem[data-type="item"] >
-  // .contentMount` rule in section-grid.module.css - a container is placed as an "item" like
-  // any widget, so it gets that same gap). A widget's content just fills whatever size its
-  // card ends up being, but this SectionGrid instead computes its own fixed pixel size from
-  // the same column/row counts used to allocate the *outer*, uninset cell - so without
-  // subtracting that gap back out here, a container's inner grid renders larger than its own
-  // card and visually spills past its right/bottom edges.
  const effectiveCanvasScale = Number.isFinite(canvasScale) && canvasScale > 0 ? canvasScale : 1;
-  const outerCardInset = section.kind === "container" ? (2 * BOARD_GRID_ITEM_INSET) / effectiveCanvasScale : 0;
-  // A collapsible container's toggle bar (see the `containerToggle` Button in
-  // container-section.tsx) is an absolutely positioned overlay sitting on top of this grid.
-  // Its height comes from a Mantine size prop, which - like spacing/font-size - is compensated
-  // by --mantine-scale to render at a constant physical size regardless of board zoom (see
-  // scaled-board-canvas.module.css). That makes it behave like the outerCardInset gap above,
-  // not like the grid's own un-compensated logical-pixel math, so it needs the same
-  // effectiveCanvasScale conversion - a plain, unconverted subtraction would under-reserve on
-  // a zoomed-out board and leave the header overlapping the content. Without reserving it at
-  // all, the header bar covers the first row of the container's content instead of sitting
-  // above it. Only the vertical axis is affected - the toggle spans the full width already.
+  // The collapsible label keeps a fixed physical height while the grid uses logical canvas pixels.
+  // Convert that height so the label reserves the same space at every board scale.
  const collapsibleHeaderInset =
    section.kind === "container" && section.options.collapsible ? CONTAINER_HEADER_HEIGHT / effectiveCanvasScale : 0;
-  const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
-  const viewportHeight = Math.max(1, getLogicalGridSize(viewportRowCount) - outerCardInset - collapsibleHeaderInset);
-  // Items are positioned in a coordinate space sized to the *un-inset* column/row count
-  // (fullGridWidth/Height below - see getLogicalItemStyle), but logicalWidth/Height above are
-  // deliberately smaller by outerCardInset to match the container's actual visible card size.
-  // Left alone, that mismatch means the items - not just the grid's own box - spill past the
-  // card's right/bottom edge by exactly that inset. Scale the grid's content down by the same
-  // ratio the board's own canvas uses for its whole-board zoom (see ScaledBoardCanvas), just one
-  // level deeper, so it fits the actual card instead of clipping. --board-canvas-ui-scale is
-  // corrected to compensate so icon/text sizing inside the container isn't affected.
  const fullGridWidth = getLogicalGridSize(columnCount);
  const fullGridHeight = getLogicalGridSize(rowCount);
+  const logicalWidth = fullGridWidth;
+  const viewportHeight = Math.max(1, getLogicalGridSize(viewportRowCount) - collapsibleHeaderInset);
  // For a scrollable container, rowCount covers *all* content rows, not just the visible card -
  // fullGridHeight grows right along with it, so a ratio built from it drifts toward 1 as content
  // grows regardless of the (fixed) inset, under-scaling relative to what the actually-visible
@@ -191,16 +159,9 @@ export const SectionGrid = ({
  // describe the real visible card size in both cases (they equal the non-scrollable values when
  // rowCount and viewportRowCount are the same), so use those instead.
  const fullViewportHeight = getLogicalGridSize(viewportRowCount);
-  // A uniform zoom is required (not a non-uniform transform scale(x, y)) - --board-canvas-ui-scale
-  // is a single scalar that every icon/text/custom-CSS size compensation in the app multiplies
-  // by, so a non-uniform stretch can never be captured by it correctly. That means one axis can
-  // be left with a small amount of unfilled slack when width/height need different ratios to
-  // exactly fit - centered below so it's even on both sides rather than left-aligned.
-  // logicalWidth/viewportHeight can go non-positive for a narrow (e.g. single-column) container
-  // on a heavily zoomed-out board, where outerCardInset (which grows as canvasScale shrinks) can
-  // exceed the container's own un-inset size. Floor the scale well above 0 so it can never reach
-  // zero or negative - combinedUiScale divides by this value, and this value is also used as
-  // zoom directly, both of which break (Infinity/NaN, or invalid/collapsed content) otherwise.
+  // A collapsible container reserves a fixed-height label above the square-cell grid. Keep the
+  // nested content uniformly scaled within the remaining height so labels and icons retain their
+  // proportions; ordinary containers use the original unscaled, edge-aligned grid geometry.
  const containerContentScale =
    section.kind === "container" && fullGridWidth > 0 && fullViewportHeight > 0
      ? Math.max(0.01, Math.min(logicalWidth / fullGridWidth, viewportHeight / fullViewportHeight, 1))
@@ -309,6 +270,7 @@ export const SectionGrid = ({
            height: `var(--board-grid-drag-height, ${viewportHeight}px)`,
            marginTop: collapsibleHeaderInset || undefined,
            "--board-item-radius": `var(--mantine-radius-${board.itemRadius})`,
+            "--board-grid-content-scale": containerContentScale,
          } as CSSProperties
        }
        data-section-id={section.id}
@@ -349,11 +311,11 @@ const INTERACTIVE_GRID_SELECTOR =
  'a,button,input,textarea,select,option,[contenteditable="true"],[role="button"],[data-grid-no-drag]';
 const EDIT_ACTIVATION_KEYS = new Set(["Enter", " ", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);

-const useMinimumViewportRowCount = (enabled: boolean, canvasScale: number, canvasViewportHeight: number | null) => {
+const useMinimumViewportRowCount = (enabled: boolean, canvasScale: number) => {
  const [visualHeight, setVisualHeight] = useState(0);

  useEffect(() => {
-    if (!enabled || canvasViewportHeight !== null) return;
+    if (!enabled) return;
    const update = () => setVisualHeight(window.visualViewport?.height ?? window.innerHeight);
    update();
    window.addEventListener("resize", update, { passive: true });
@@ -362,10 +324,9 @@ const useMinimumViewportRowCount = (enabled: boolean, canvasScale: number, canva
      window.removeEventListener("resize", update);
      window.visualViewport?.removeEventListener("resize", update);
    };
-  }, [canvasViewportHeight, enabled]);
+  }, [enabled]);

-  const resolvedVisualHeight = canvasViewportHeight ?? visualHeight;
-  return enabled ? getGridRowCountForVisualHeight(resolvedVisualHeight, canvasScale) : 0;
+  return enabled ? getGridRowCountForVisualHeight(visualHeight, canvasScale) : 0;
 };

 const containerMinimumSizeCache = new WeakMap<
@@ -33,8 +33,8 @@ export const useGridLayoutActions = () => {
          placements.map((placement) => [`${layoutId}:${placement.id}`, { layoutId, sectionId, placement }] as const),
        ),
      );
+      let hasChanges = false;
      updateBoard((previous) => {
-        let hasChanges = false;
        const items = previous.items.map((item) => {
          const layouts = item.layouts.map((layout) => {
            const resolved = byId.get(`${layout.layoutId}:${item.id}`);
@@ -97,6 +97,7 @@ export const useGridLayoutActions = () => {

        return hasChanges ? { ...previous, items, sections } : previous;
      });
+      return hasChanges;
    },
    [updateBoard],
  );
@@ -21,6 +21,9 @@
  --border-color: rgb(
    from var(--container-border-color, var(--container-default-border-color)) r g b / var(--opacity, 1)
  );
+  /* Keep the border visual without letting it shrink the square-cell grid's content box. */
+  border-width: 0;
+  box-shadow: inset 0 0 0 calc(1px * var(--board-canvas-inverse-scale, 1)) var(--border-color);
 }

 .itemCard:global(.iframe-wrapper) {
@@ -1,18 +0,0 @@
-import { readFileSync } from "node:fs";
-import { describe, expect, it } from "vitest";
-
-describe("DynamicBreadcrumb", () => {
-  it("falls back to the raw segment when a path segment has no translation", () => {
-    const source = readFileSync(
-      `${process.cwd()}/apps/nextjs/src/components/navigation/dynamic-breadcrumb.tsx`,
-      "utf8",
-    );
-
-    // Dynamic ids (e.g. /manage/custom-widgets/workshop/<id>) have no message and are
-    // not mapped while their page loads; resolving them must not raise MISSING_MESSAGE.
-    expect(source).toContain("let label = pathnamePart");
-    expect(source).toContain("if (mappedValue !== undefined)");
-    expect(source).toContain("t.has(labelKey)");
-    expect(source).not.toMatch(/\{t\(`\$\{translationKey\}\.label`/u);
-  });
-});
@@ -13,8 +13,6 @@ import {
  IconSettings,
  IconRobot,
  IconTool,
-  IconPencil,
-  IconDeviceFloppy,
 } from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
@@ -27,7 +25,6 @@ import { useI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";

 import { useAuthContext } from "~/app/[locale]/_client-providers/session";
-import { useOptionalBoardEditing } from "./board/board-editing-context";
 import { useOptionalHomarrAssistant } from "./assistant/assistant-context";
 import type { BoardSwitcherControls } from "./board/board-switcher";
 import { CurrentColorSchemeCombobox } from "./color-scheme/current-color-scheme-combobox";
@@ -53,7 +50,6 @@ export const UserAvatarMenu = ({ children, availableUpdates, isDockerEnabled, bo
  const tBoard = useI18n("board");
  const session = useSession();
  const board = useOptionalBoard();
-  const editing = useOptionalBoardEditing();
  const boardPermissions = board && constructBoardPermissions(board, session.data ?? null);

  const { logoutUrl } = useAuthContext();
@@ -85,18 +81,6 @@ export const UserAvatarMenu = ({ children, availableUpdates, isDockerEnabled, bo
            {tBoard("action.settings")}
          </Menu.Item>
        )}
-        {editing?.hasChangeAccess && (
-          <Menu.Item
-            leftSection={editing.isEditMode ? <IconDeviceFloppy size="1rem" /> : <IconPencil size="1rem" />}
-            rightSection={<Kbd size="xs">{formatHotkeyLabel(hotkeys.toggleBoardEdit, t("modifier"))}</Kbd>}
-            disabled={editing.isPending || editing.isEnteringEditMode}
-            onClick={() => void editing.toggle()}
-            onFocus={editing.prewarmEditor}
-            onPointerEnter={editing.prewarmEditor}
-          >
-            {editing.label}
-          </Menu.Item>
-        )}
        <Menu.Item
          leftSection={<IconReplace size="1rem" />}
          rightSection={<Kbd size="xs">{formatHotkeyLabel(boardSwitcher.hotkey, t("modifier"))}</Kbd>}
@@ -1,18 +1,9 @@
 // @vitest-environment jsdom

-import { readFileSync } from "node:fs";
 import { afterEach, describe, expect, it } from "vitest";

 import { getWorkshopAssistantProviderUrl, getWorkshopWebUrl } from "./workshop-client";

-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";
-
 describe("Workshop widget install flow", () => {
  afterEach(() => {
    document.head.innerHTML = "";
@@ -39,136 +30,4 @@ describe("Workshop widget install flow", () => {

    expect(getWorkshopAssistantProviderUrl()).toBe("https://api.preview.example/api/ai/v1");
  });
-
-  it("installs from a page with a sticky footer instead of stacked modals", () => {
-    const detail = read(detailPage);
-
-    expect(detail).toContain("ManageStickyFooter");
-    expect(detail).toContain("useCustomWidgetImport");
-    // Review and install happen on one surface, so neither Modal.Stack nor the review dialog is involved.
-    expect(detail).not.toContain("Modal.Stack");
-    expect(detail).not.toContain("useModalsStack");
-    expect(detail).not.toContain("CustomWidgetImportDialog");
-  });
-
-  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("WorkshopVoteControl");
-    expect(browse).not.toContain("Modal");
-  });
-
-  it("renders the grid with real cards and screenshot previews", () => {
-    const grid = read("apps/nextjs/src/components/workshop/workshop-submission-grid.tsx");
-    const card = read("apps/nextjs/src/components/workshop/workshop-submission-card.tsx");
-
-    expect(grid).toContain("SimpleGrid");
-    expect(card).toContain("Card.Section");
-    expect(card).toContain("PREVIEW_HEIGHT");
-  });
-
-  it("shows the viewer's own vote as a filled control", () => {
-    const vote = read("apps/nextjs/src/components/workshop/workshop-vote-control.tsx");
-
-    expect(vote).toContain("useWorkshopUserVotesQuery");
-    expect(vote).toContain("IconArrowBigUpFilled");
-    expect(vote).toContain("IconArrowBigDownFilled");
-    expect(vote).toContain('color={upvoted ? "red" : "gray"}');
-    expect(vote).toContain("aria-pressed={upvoted}");
-  });
-
-  it("previews screenshots large with a zoom lightbox", () => {
-    const screenshots = read("apps/nextjs/src/components/workshop/workshop-screenshots.tsx");
-    const detail = read(detailPage);
-
-    expect(screenshots).toContain("1200x800");
-    expect(screenshots).toContain("zoomScreenshot");
-    expect(screenshots).toContain('import { Lightbox } from "@mantine/lightbox"');
-    expect(screenshots).toContain("withThumbnails");
-    expect(screenshots).toContain("withZoom");
-    expect(screenshots).toContain("withKeyboardEvents");
-    expect(screenshots).not.toMatch(/<Modal\b/u);
-    expect(detail).toContain("WorkshopScreenshots");
-  });
-
-  it("publishes from a page with the same sticky footer", () => {
-    const publish = read(publishPage);
-
-    expect(publish).toContain("ManageStickyFooter");
-    expect(publish).not.toContain("useModalsStack");
-    expect(publish).not.toMatch(/<Modal\b/u);
-  });
-
-  it("imports Custom CSS from a single modal", () => {
-    const css = read(cssButton);
-
-    expect(css).toContain("WorkshopSubmissionGrid");
-    expect(css).toContain("useConfirmModal");
-    expect(css).not.toContain("useModalsStack");
-    expect(css).not.toContain("Modal.Stack");
-  });
-
-  it("cannot import the same widget twice and returns to the installed list", () => {
-    const importer = read("apps/nextjs/src/components/custom-widgets/use-custom-widget-import.ts");
-    const detail = read(detailPage);
-
-    // The mutation creates a new record per call, so a second click must be impossible.
-    expect(importer).toContain("if (!configuredWidget || pending || succeeded) return;");
-    expect(importer).toContain("setSucceeded(true)");
-    expect(detail).toContain("router.push(installedHref)");
-    expect(detail).toContain("disabled={!compatible || !importer.ready || importer.succeeded}");
-    // The heavy edit form is no longer the post-install destination.
-    expect(detail).not.toContain("/manage/custom-widgets/edit/");
-  });
-
-  it("keeps typed credentials across a background refetch of the submission", () => {
-    const importer = read("apps/nextjs/src/components/custom-widgets/use-custom-widget-import.ts");
-    const detail = read(detailPage);
-
-    // Voting invalidates the detail query. If the setup reset keyed off the widget
-    // object identity, the refetch would silently clear part-typed API keys.
-    expect(importer).toContain("const sourcesKey = JSON.stringify(widget?.sources ?? {})");
-    expect(importer).toContain("[sourcesKey]");
-    expect(importer).not.toContain("getCustomWidgetSourceSetups(widget?.sources ?? {}), [widget])");
-    expect(detail).toContain("const content = detail.data?.content;");
-    expect(detail).toContain("[content]");
-  });
-
-  it("keeps the sign-in hint reachable when voting is unavailable", () => {
-    const vote = read("apps/nextjs/src/components/workshop/workshop-vote-control.tsx");
-
-    // Mantine tooltips do not fire on disabled controls, so the hint hangs off the wrapper.
-    expect(vote).toContain('canVote ? controls : <Tooltip label={t("signInHint")}>{controls}</Tooltip>');
-  });
-
-  it("cannot publish the same widget twice", () => {
-    const publish = read(publishPage);
-
-    expect(publish).toContain("if (createSubmission.isPending) return;");
-    expect(publish).toContain("createSubmission.isPending ||");
-  });
-
-  it("no longer ships the stacked-modal install components", () => {
-    for (const removed of [
-      "apps/nextjs/src/components/workshop/workshop-browser.tsx",
-      "apps/nextjs/src/components/workshop/workshop-install-button.tsx",
-      "apps/nextjs/src/components/workshop/workshop-installer.tsx",
-      "apps/nextjs/src/components/workshop/workshop-publish-modal.tsx",
-      "apps/nextjs/src/components/workshop/workshop-submission-list.tsx",
-      "apps/nextjs/src/components/workshop/workshop-submission-item.tsx",
-    ]) {
-      expect(() => read(removed)).toThrow();
-    }
-  });
 });
@@ -77,7 +77,7 @@ pnpm --filter @homarr/docs typecheck
 ```

 The integration suite uses a disposable Compose project. `pnpm test:workshop-image` additionally builds and smoke-tests
-the combined production image.
+the combined production image. Both commands are manual and do not run in CI. Workshop CI validates Compose configuration only when its workflow or Docker build inputs change, then publishes images on release branches. The main Fast gate owns workspace typechecking.

 ## Data safety

@@ -1,48 +1,7 @@
-import { access, readFile } from "node:fs/promises";
-import { resolve } from "node:path";
+import { readFile } from "node:fs/promises";
 import vm from "node:vm";

-const read = (path) => readFile(resolve(path), "utf8");
-
-const packageJson = JSON.parse(await read("packages/workshop/package.json"));
-const clientExport = packageJson.exports?.["./client"];
-if (typeof clientExport !== "string") throw new Error("Workshop client export is missing");
-await access(resolve("packages/workshop", clientExport));
-
-const hook = await read("apps/workshop/pb_hooks/workshop.pb.js");
-if (!hook.includes("require(`${__hooks}/workshop-utils.js`)")) {
-  throw new Error("Workshop handlers must load shared helpers inside their isolated PocketBase contexts");
-}
-if (!hook.includes("onBootstrap") || !hook.includes("users.oauth2.providers = configured")) {
-  throw new Error("Workshop OAuth settings must be synchronized at every bootstrap");
-}
-if (!hook.includes('username: "name"') || hook.includes("onRecordAuthWithOAuth2Request")) {
-  throw new Error("Workshop identity must use PocketBase's direct GitHub username mapping");
-}
-if (hook.includes("validateAndNormalizeSubmission")) {
-  throw new Error("PocketBase must store Workshop submissions without interpreting their content");
-}
-for (const artifact of [
-  "apps/workshop/pb_hooks/widget-validator.js",
-  "apps/workshop/pb_hooks/widget-validator.bundle.cjs",
-  "packages/workshop/src/pocketbase-validator.ts",
-  "scripts/build-workshop-validator.mjs",
-]) {
-  await access(resolve(artifact))
-    .then(() => {
-      throw new Error(`Workshop validator artifact must stay removed: ${artifact}`);
-    })
-    .catch((error) => {
-      if (error instanceof Error && "code" in error && error.code === "ENOENT") return;
-      throw error;
-    });
-}
-if (hook.includes('findAllRecords("users")') || !hook.includes('findRecordsByFilter("users"')) {
-  throw new Error("Workshop report notifications must use a filtered, bounded administrator query");
-}
-if (!hook.includes('routerAdd("GET", "/workshop/{id}"') || !hook.includes('getStringSlice("screenshots")')) {
-  throw new Error("Workshop detail routes must render server-side social metadata with submission screenshots");
-}
+const read = (path) => readFile(path, "utf8");

 const hookUtilsModule = { exports: {} };
 vm.runInNewContext(await read("apps/workshop/pb_hooks/workshop-utils.js"), { module: hookUtilsModule });
@@ -69,73 +28,4 @@ for (const expected of [
 }
 if (socialHtml.includes("Homarr documentation")) throw new Error("Workshop social metadata must replace generic tags");

-const migration = await read("apps/workshop/pb_migrations/1784240000_workshop_widgets.js");
-for (const removedField of ["displayName", "avatarUrl", "githubProfileUrl", "githubUsername"]) {
-  if (migration.includes(removedField)) throw new Error(`Redundant Workshop user field remains: ${removedField}`);
-}
-
-const providerMigration = await read("apps/workshop/pb_migrations/1786500000_homarr_provider.js");
-for (const required of ['name: "assistant_quotas"', 'name: "assistant_global_quota"', "idx_assistant_quotas_user"]) {
-  if (!providerMigration.includes(required)) throw new Error(`Homarr provider migration is missing: ${required}`);
-}
-for (const forbidden of ['name: "assistant_requests"', 'name: "assistant_activity"', 'name: "dailyLimit"']) {
-  if (providerMigration.includes(forbidden)) throw new Error(`Homarr provider must not persist ${forbidden}`);
-}
-
-const dailyQuotaMigration = await read("apps/workshop/pb_migrations/1787670446_daily_assistant_quotas.js");
-for (const required of [
-  'removeIndex("idx_assistant_quotas_user")',
-  'addIndex("idx_assistant_quotas_user_day", true, "user, day", "")',
-]) {
-  if (!dailyQuotaMigration.includes(required)) throw new Error(`Daily quota migration is missing: ${required}`);
-}
-
-const providerBackend = await read("apps/workshop/homarr_provider.go");
-for (const required of [
-  '"homarr/model"',
-  'apis.RequireAuth("users")',
-  "DefaultActivityLoggerMiddlewareId",
-  'os.Getenv("OPENROUTER_API_KEY")',
-  'os.Getenv("HOMARR_AI_DAILY_REQUEST_LIMIT")',
-  'os.Getenv("HOMARR_AI_GLOBAL_DAILY_REQUEST_LIMIT")',
-  'os.Getenv("HOMARR_AI_OPENROUTER_MODEL")',
-  '"data_collection": "deny"',
-  '"zdr": true',
-]) {
-  if (!providerBackend.includes(required)) throw new Error(`Homarr provider backend is missing: ${required}`);
-}
-if (/logger\(\)|\.Logger\(|log\.Print/u.test(providerBackend)) {
-  throw new Error("The Homarr provider must not log request content or user tokens");
-}
-for (const required of [
-  "workshop_migration_state",
-  "addedUserFields",
-  "cloneRule(users.listRule)",
-  "CREATE TRIGGER submissions_revision_cas",
-  "NEW.expectedRevision != OLD.revision",
-  "users.passwordAuth = state.users.passwordAuth",
-  "users.oauth2 = state.users.oauth2",
-  "app.delete(users)",
-]) {
-  if (!migration.includes(required)) throw new Error(`Workshop rollback is missing state restoration: ${required}`);
-}
-
-const workflow = await read(".github/workflows/workshop.yml");
-if (/\n\s+paths:/u.test(workflow)) throw new Error("Workshop workflow must not filter out Docker build inputs");
-
-const entrypoint = await read("apps/workshop/entrypoint.sh");
-if (!entrypoint.includes("/pb_public/workshop-runtime-config.js") || !entrypoint.includes("WORKSHOP_API_URL")) {
-  throw new Error("Workshop must publish its API URL when the container starts");
-}
-
-const docsConfig = await read("apps/docs/docusaurus.config.ts");
-if (!docsConfig.includes('scripts: [{ src: "/workshop-runtime-config.js" }]')) {
-  throw new Error("Workshop must load the container runtime configuration before the documentation bundle");
-}
-if (!docsConfig.includes('path: "/workshop/:id"') || !docsConfig.includes("priority: -1")) {
-  throw new Error("Workshop submission routes must not capture the moderation page");
-}
-await access(resolve("apps/docs/static/workshop-runtime-config.js"));
-await access(resolve("apps/docs/src/pages/workshop/admin/index.tsx"));
-
-console.log("Workshop static contracts passed");
+console.log("Workshop social metadata rendering passed");
@@ -16,8 +16,7 @@ const adminCredentials = {
  password: "Comp(exP4sswOrd",
 };

-// This is an opt-in documentation asset generator, not part of the normal E2E gate.
-// Run it explicitly with UPDATE_DOCS_SCREENSHOTS=true when the documented UI changes.
+// Run this opt-in asset generator with pnpm test:docs-screenshots when the documented UI changes.
 describe.skipIf(process.env.UPDATE_DOCS_SCREENSHOTS !== "true")("Assistant documentation screenshots", () => {
  test("captures the management page and conversation panel", async () => {
    const { db, localMountPath } = await createSqliteDbFileAsync();
@@ -1,114 +0,0 @@
-import { chromium, expect } from "@playwright/test";
-import type { Browser } from "@playwright/test";
-import type { StartedTestContainer } from "testcontainers";
-import { describe, test } from "vitest";
-
-import { createHomarrContainer } from "./shared/create-homarr-container";
-import { createSqliteDbFileAsync } from "./shared/e2e-db";
-import type { MockApiServer } from "./shared/mock-api-server";
-import { startMockApiServerAsync } from "./shared/mock-api-server";
-import { seedAdminUserAsync } from "./shared/seed-admin-user";
-
-const adminCredentials = { username: "admin", password: "Comp(exP4sswOrd" };
-const initialTemplate =
-  "<Stack><Title order={4}>{data.status?.title}</Title><Badge>{data.status?.status}</Badge></Stack>";
-const updatedTemplate = "<Stack><Text fw={700}>{data.status?.title}</Text><Text>{data.status?.value}</Text></Stack>";
-
-describe("Custom JSX v2 workbench", () => {
-  test.skip("creates, previews, edits, and immediately adds a widget to a board", async () => {
-    let mockApi: MockApiServer | undefined;
-    let homarrContainer: StartedTestContainer | undefined;
-    let browser: Browser | undefined;
-
-    try {
-      mockApi = await startMockApiServerAsync({ title: "E2E Widget", status: "online", value: 42 });
-      const { db, localMountPath } = await createSqliteDbFileAsync();
-      await seedAdminUserAsync(db, adminCredentials);
-      homarrContainer = await createHomarrContainer({
-        environment: { AUTH_PROVIDERS: "credentials" },
-        mounts: { "/appdata": localMountPath },
-      }).start();
-      const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
-      browser = await chromium.launch();
-      const page = await browser.newPage();
-
-      await page.goto(`${baseUrl}/auth/login`);
-      await page.waitForLoadState("networkidle");
-      await page.getByLabel("Username").fill(adminCredentials.username);
-      await page.locator("#password").fill(adminCredentials.password);
-      const signedIn = page.waitForURL((url) => url.origin === baseUrl && url.pathname !== "/auth/login", {
-        waitUntil: "commit",
-        timeout: 60_000,
-      });
-      await page.locator("button[type='submit']").click();
-      await signedIn;
-
-      await page.goto(`${baseUrl}/manage/custom-widgets/new`);
-      await page.locator('input[data-path="name"]:visible').fill("E2E Custom JSX v2");
-      await page.getByRole("textbox", { name: "Base URL" }).fill(mockApi.url);
-      await page.getByRole("combobox", { name: "Network access" }).click();
-      await page.getByRole("option", { name: "private" }).click();
-      await page.getByRole("group", { name: "status" }).getByRole("textbox", { name: "Path" }).fill("/status");
-      await page.getByRole("button", { name: "Add option" }).click();
-      const option = page.getByRole("group", { name: "Option 1" });
-      await option.getByRole("textbox", { name: "Option name" }).fill("label");
-      await option.getByRole("textbox", { name: "Default" }).fill("E2E");
-      const request = page.getByRole("group", { name: "status" });
-      await request.getByRole("button", { name: "Query, body and behavior" }).click();
-      await request.getByRole("button", { name: "Add query value" }).click();
-      await request.getByRole("textbox", { name: "Query key" }).fill("label");
-      await request.getByRole("combobox", { name: "Value source" }).click();
-      await page.getByRole("option", { name: "Widget option" }).click();
-      await request.getByRole("combobox", { name: "Option" }).first().click();
-      await page.getByRole("option", { name: "label" }).click();
-      await page.getByRole("button", { name: "Advanced manifest JSON" }).first().click();
-      await expect(page.locator("#requests-editor")).toContainText('"$option": "label"');
-      await page.locator("#jsx-editor").fill(initialTemplate);
-
-      await page.getByRole("button", { name: "Test and preview" }).last().click();
-      await expect(page.getByRole("complementary", { name: "Widget preview" }).getByText("E2E Widget")).toBeVisible({
-        timeout: 15_000,
-      });
-
-      const editPage = page.waitForURL("**/manage/custom-widgets/edit/**", { timeout: 15_000, waitUntil: "commit" });
-      await page.getByRole("button", { name: "Create", exact: true }).last().click();
-      await editPage;
-
-      await page.locator("#jsx-editor").fill(updatedTemplate);
-      await page.getByRole("button", { name: "Save", exact: true }).last().click();
-      await expect(page.getByText('Widget "E2E Custom JSX v2" updated successfully.')).toBeVisible({ timeout: 15_000 });
-
-      await page.goto(baseUrl);
-      const tourOverlay = page.locator('[data-onboarding-tour-overlay="true"]');
-      const skipTour = page.getByRole("button", { name: "Skip tour", exact: true });
-      try {
-        await skipTour.waitFor({ state: "visible", timeout: 5_000 });
-        await skipTour.click();
-        await expect(tourOverlay).toHaveCount(0);
-      } catch (error) {
-        if ((await tourOverlay.count()) > 0) throw error;
-      }
-      const editToggle = page.getByTestId("board-edit-mode-toggle");
-      await editToggle.click();
-      await expect(editToggle).toHaveAttribute("aria-pressed", "true", { timeout: 15_000 });
-      await page.getByRole("button", { name: "Add board content", exact: true }).click();
-      await page
-        .getByRole("dialog", { name: "Create" })
-        .getByRole("button", { name: /^Add widget / })
-        .click();
-      const picker = page.getByRole("dialog").last();
-      await picker.getByRole("button", { name: /^E2E Custom JSX v2,/ }).click();
-      const addDialog = page.getByRole("dialog").last();
-      await expect(addDialog.getByText("E2E Custom JSX v2")).toBeVisible();
-      await addDialog.getByRole("button", { name: "Save changes", exact: true }).click();
-
-      await expect(page.getByText("Widget definition not found")).not.toBeVisible();
-      await editToggle.click();
-      await expect(editToggle).toHaveAttribute("aria-pressed", "false", { timeout: 15_000 });
-      await expect(page.getByText("E2E Widget")).toBeVisible({ timeout: 15_000 });
-      await expect(page.getByText("42")).toBeVisible({ timeout: 15_000 });
-    } finally {
-      await Promise.allSettled([browser?.close(), homarrContainer?.stop(), mockApi?.close()]);
-    }
-  }, 180_000);
-});
@@ -1,20 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import { createHomarrContainer } from "./shared/create-homarr-container";
-
-describe("Home", () => {
-  test("should open with status code 200", async () => {
-    // Arrange
-    const homarrContainer = await createHomarrContainer().start();
-
-    try {
-      // Act
-      const homeResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/`);
-
-      // Assert
-      expect(homeResponse.status).toBe(200);
-    } finally {
-      await homarrContainer.stop();
-    }
-  }, 60_000);
-});
@@ -1,11 +1,9 @@
-import { mkdir, readFile, rm } from "node:fs/promises";
+import { mkdir, rm } from "node:fs/promises";
 import path from "node:path";

 import { chromium } from "@playwright/test";
 import type { Page } from "@playwright/test";
 import { createId } from "@paralleldrive/cuid2";
-import AdmZip from "adm-zip";
-import type { StartedTestContainer } from "testcontainers";
 import { describe, expect, test } from "vitest";

 import * as sqliteSchema from "../packages/db/schema/sqlite";
@@ -30,48 +28,6 @@ const cleanupSqliteDbAsync = async ({ db, localMountPath }: SqliteTestDatabase)
  await rm(localMountPath, { recursive: true, force: true });
 };

-const createRestoreArchiveAsync = async () => {
-  const sqlite = await createSqliteDbFileAsync();
-  const { db, localMountPath } = sqlite;
-  try {
-    await db.insert(sqliteSchema.onboarding).values({ id: "onboarding", step: "finish", previousStep: "setup" });
-    await db.insert(sqliteSchema.boards).values({ id: "restored-board", name: "restored", isPublic: true });
-    await db.insert(sqliteSchema.layouts).values({
-      id: "restored-base",
-      boardId: "restored-board",
-      name: "Base",
-      role: "base",
-      columnCount: 10,
-      breakpoint: 768,
-    });
-    await db.insert(sqliteSchema.sections).values({
-      id: "restored-root",
-      boardId: "restored-board",
-      kind: "empty",
-      xOffset: 0,
-      yOffset: 0,
-    });
-    db.$client.close();
-
-    const zip = new AdmZip();
-    zip.addFile("db.sqlite", await readFile(path.join(localMountPath, "db", "db.sqlite")));
-    zip.addFile(
-      "metadata.json",
-      Buffer.from(
-        JSON.stringify({
-          homarrVersion: "e2e",
-          exportedAt: new Date().toISOString(),
-          dbDialect: "sqlite",
-          encryptionKey: "0".repeat(64),
-        }),
-      ),
-    );
-    return zip.toBuffer();
-  } finally {
-    await cleanupSqliteDbAsync(sqlite);
-  }
-};
-
 describe("Onboarding", () => {
  test.each([
    { name: "mobile", width: 320, height: 740 },
@@ -180,61 +136,6 @@ describe("Onboarding", () => {
    90_000,
  );

-  test.skip("SQLite onboarding restores a validated backup and survives the restart", async () => {
-    const restoreArchive = await createRestoreArchiveAsync();
-    const invalidArchive = new AdmZip();
-    invalidArchive.addFile("db.sqlite", Buffer.from("not-a-database"));
-    const sqlite = await createSqliteDbFileAsync();
-    const { localMountPath } = sqlite;
-    const initialContainer = await createHomarrContainer({ mounts: { "/appdata": localMountPath } }).start();
-    let initialContainerStopped = false;
-    let restoredContainer: StartedTestContainer | undefined;
-    const browser = await chromium.launch();
-    const context = await browser.newContext();
-    const page = await context.newPage();
-
-    try {
-      const initialBaseUrl = `http://${initialContainer.getHost()}:${initialContainer.getMappedPort(7575)}`;
-      await page.goto(`${initialBaseUrl}/init`);
-      await page.getByRole("button", { name: "Restore backup" }).click();
-      const fileInput = page.locator('input[type="file"]');
-      await fileInput.setInputFiles({
-        name: "missing-metadata.zip",
-        mimeType: "application/zip",
-        buffer: invalidArchive.toBuffer(),
-      });
-      await page.getByText("Invalid backup: missing metadata.json").waitFor();
-      await page.getByRole("button", { name: "Change file" }).click();
-
-      await fileInput.setInputFiles({ name: "homarr-backup.zip", mimeType: "application/zip", buffer: restoreArchive });
-      await page.getByRole("heading", { name: "Backup Contents" }).waitFor({ timeout: 30_000 });
-      expect(await page.getByText("restored", { exact: true }).isVisible()).toBe(true);
-      await page.getByRole("button", { name: "Continue to restore" }).click();
-      await page.getByPlaceholder("I understand").fill("I understand");
-      const restoreResponse = page.waitForResponse(
-        (response) => response.url().endsWith("/api/backup/import") && response.request().method() === "POST",
-      );
-      await page.getByRole("button", { name: "Restore Database" }).click();
-      expect((await restoreResponse).status()).toBe(200);
-
-      await initialContainer.stop();
-      initialContainerStopped = true;
-      restoredContainer = await createHomarrContainer({ mounts: { "/appdata": localMountPath } }).start();
-      const restoredBaseUrl = `http://${restoredContainer.getHost()}:${restoredContainer.getMappedPort(7575)}`;
-      await page.goto(`${restoredBaseUrl}/boards/restored`);
-      await page.locator('[data-testid="board-canvas"][data-board-hydrated="true"]').waitFor({ timeout: 30_000 });
-      expect(page.url()).toMatch(/\/boards\/restored(?:[/?#]|$)/);
-    } finally {
-      try {
-        await browser.close();
-        if (!initialContainerStopped) await initialContainer.stop();
-        if (restoredContainer) await restoredContainer.stop();
-      } finally {
-        await cleanupSqliteDbAsync(sqlite);
-      }
-    }
-  }, 120_000);
-
  test("Credentials onboarding recovers when automatic sign-in fails after account creation", async () => {
    const sqlite = await createSqliteDbFileAsync();
    const { db, localMountPath } = sqlite;
@@ -1,50 +0,0 @@
-import { createServer } from "node:http";
-import { getContainerRuntimeClient, TestContainers } from "testcontainers";
-
-import type { Server } from "node:http";
-
-const TESTCONTAINERS_SSHD_LABEL = "org.testcontainers.sshd";
-
-export interface MockApiServer {
-  url: string;
-  close: () => Promise<void>;
-}
-
-export async function startMockApiServerAsync(responseBody: unknown): Promise<MockApiServer> {
-  const body = JSON.stringify(responseBody);
-  const server: Server = await new Promise((resolve) => {
-    const candidate = createServer((_request, response) => {
-      response.writeHead(200, { "content-type": "application/json" });
-      response.end(body);
-    });
-    candidate.listen(0, "0.0.0.0", () => resolve(candidate));
-  });
-  const address = server.address();
-  if (!address || typeof address === "string") {
-    server.close();
-    throw new Error("Failed to start mock API server");
-  }
-
-  try {
-    await TestContainers.exposeHostPorts(address.port);
-    const client = await getContainerRuntimeClient();
-    const forwarder = (await client.container.list()).find(
-      (container) => container.State === "running" && container.Labels[TESTCONTAINERS_SSHD_LABEL] === "true",
-    );
-    const forwarderAddress = forwarder
-      ? Object.values(forwarder.NetworkSettings.Networks).find((network) => network.IPAddress)?.IPAddress
-      : undefined;
-    if (!forwarderAddress) throw new Error("Failed to locate the Testcontainers host-port forwarder");
-
-    return {
-      url: `http://${forwarderAddress}:${address.port}`,
-      close: () =>
-        new Promise((resolve, reject) => {
-          server.close((error) => (error ? reject(error) : resolve()));
-        }),
-    };
-  } catch (error) {
-    server.close();
-    throw error;
-  }
-}
@@ -49,12 +49,15 @@
    "scripts:update-openapi": "tsx ./scripts/check-openapi-schema.mts --write",
    "scripts:update-readme-integrations": "tsx ./scripts/update-integration-list.mts",
    "start": "pnpm -F nextjs start",
-    "test": "cross-env NODE_ENV=development CI=true vitest run --project \"!e2e\" --retry 2 --coverage.enabled ",
-    "test:e2e": "cross-env NODE_ENV=development CI=true vitest e2e --retry 2 --maxWorkers 2",
+    "test": "cross-env NODE_ENV=development CI=true vitest run --project \"!e2e\" --project \"!integration\" --project \"!docs-screenshots\"",
+    "test:coverage": "pnpm test --coverage.enabled",
+    "test:integration": "cross-env NODE_ENV=development CI=true vitest run --project integration --maxWorkers 2",
+    "test:docs-screenshots": "cross-env UPDATE_DOCS_SCREENSHOTS=true NODE_ENV=development CI=true vitest run --project docs-screenshots",
+    "test:e2e": "cross-env NODE_ENV=development CI=true vitest run --project e2e --maxWorkers 2",
    "test:workshop": "sh apps/workshop/test.sh",
    "test:workshop-live-provider": "node apps/workshop/tests/openrouter-live-smoke.mjs",
    "test:workshop-image": "sh apps/workshop/test-image.sh",
-    "test:ui": "cross-env NODE_ENV=development CI=true vitest --project \"!e2e\" --ui --coverage.enabled",
+    "test:ui": "cross-env NODE_ENV=development CI=true vitest --project \"!e2e\" --project \"!integration\" --project \"!docs-screenshots\" --ui",
    "typecheck": "turbo typecheck",
    "with-env": "dotenv -e .env --"
  },
@@ -51,11 +51,13 @@
    "@homarr/validation": "workspace:^0.1.0",
    "@homarr/workshop": "workspace:^0.1.0",
    "@kubernetes/client-node": "catalog:",
+    "@modelcontextprotocol/server": "catalog:",
    "@tanstack/react-query": "catalog:",
    "@trpc/client": "catalog:",
    "@trpc/react-query": "catalog:",
    "@trpc/server": "catalog:",
    "@trpc/tanstack-react-query": "catalog:",
+    "ajv": "catalog:",
    "lodash.clonedeep": "catalog:",
    "next": "catalog:",
    "react": "catalog:",
@@ -1,3 +1,5 @@
+import { Ajv2020 } from "ajv/dist/2020.js";
+import { addFormats, AjvJsonSchemaValidator } from "@modelcontextprotocol/server/validators/ajv";
 import type { AnyProcedure, AnyRootTypes, Router, RouterRecord } from "@trpc/server/unstable-core-do-not-import";
 import { z } from "zod/v4";

@@ -15,23 +17,35 @@ export interface McpTool {
  type: "query" | "mutation";
  pathInRouter: string[];
  inputSchema: z.core.JSONSchema.JSONSchema;
-  inputValidator: z.ZodObject;
+  inputMode: "none" | "object";
 }

-const emptyInput = z.object({});
+export interface McpToolDiagnostic {
+  name: string;
+  path: string;
+  reason: "unsupported_input" | "invalid_schema" | "duplicate_name" | "invalid_name";
+}

+export interface McpToolCatalog {
+  tools: McpTool[];
+  diagnostics: McpToolDiagnostic[];
+}
+
+const emptyInput = z.strictObject({});
+const schemaEngine = new Ajv2020({
+  strict: false,
+  validateSchema: true,
+  coerceTypes: false,
+  useDefaults: false,
+  removeAdditional: false,
+});
+addFormats(schemaEngine);
+const schemaValidator = new AjvJsonSchemaValidator(schemaEngine);
 const isProcedure = (value: AnyProcedure | RouterRecord): value is AnyProcedure => typeof value === "function";

-const mergeInputs = (inputs: z.ZodObject[]) => inputs.reduce((merged, input) => merged.extend(input.shape), emptyInput);
-
-const getObjectInput = (input: z.ZodType) => {
+const getObjectInput = (input: unknown): z.ZodObject | null => {
  if (input instanceof z.ZodObject) return input;
-
-  if (input instanceof z.ZodOptional) {
-    const unwrappedInput = input.unwrap();
-    if (unwrappedInput instanceof z.ZodObject) return unwrappedInput;
-  }
-
+  if (input instanceof z.ZodOptional) return getObjectInput(input.unwrap());
  return null;
 };

@@ -50,70 +64,110 @@ const getMcpMetadata = (meta: unknown): McpMeta["mcp"] => {
  return result;
 };

-const getProcedureInput = (inputs: z.ZodType[]) => {
-  if (inputs.length === 0) return emptyInput;
-  if (inputs.length === 1) {
-    const input = inputs[0] ?? emptyInput;
-    return getObjectInput(input) ?? input;
-  }
-
-  const objectInputs = inputs.map(getObjectInput);
-  if (objectInputs.every((input): input is z.ZodObject => input !== null)) return mergeInputs(objectInputs);
-  return null;
-};
-
-const normalizeJsonSchema = (schema: z.core.JSONSchema.JSONSchema): z.core.JSONSchema.JSONSchema => {
-  const properties = schema.properties ?? {};
-  const required = (schema.required ?? []).filter((key) => {
-    const property = properties[key];
-    return !property || typeof property !== "object" || !("default" in property);
-  });
-
-  return {
-    ...schema,
-    type: "object",
-    properties,
-    required,
-  };
-};
-
 export function extractMcpToolsFromProcedures<TRoot extends AnyRootTypes, TRecord extends RouterRecord>(
  router: Router<TRoot, TRecord>,
-): McpTool[] {
+): McpToolCatalog {
  const tools: McpTool[] = [];
+  const diagnostics: McpToolDiagnostic[] = [];
+  const names = new Map<string, string[]>();

  for (const [path, procedure] of Object.entries(router["_def"].procedures)) {
    if (!isProcedure(procedure)) continue;
    const definition = procedure["_def"];
    if (definition.type === "subscription") continue;
-
    const metadata = getMcpMetadata(definition.meta);
    if (!metadata?.enabled) continue;

-    const inputs = definition.inputs.filter((input): input is z.ZodType => input instanceof z.ZodType);
-    const procedureInput = getProcedureInput(inputs);
-
-    if (
-      procedureInput === null ||
-      (!(procedureInput instanceof z.ZodObject) && !procedureInput.safeParse(undefined).success)
-    ) {
-      console.warn(`[MCP] Procedure ${path} does not use an object input schema; using an empty schema`);
+    const name = metadata.name ?? path.replaceAll(".", "_");
+    const paths = names.get(name) ?? [];
+    paths.push(path);
+    names.set(name, paths);
+    if (!/^[a-zA-Z0-9_.-]{1,128}$/.test(name)) {
+      diagnostics.push({ name, path, reason: "invalid_name" });
+      continue;
    }
-    const inputValidator = procedureInput instanceof z.ZodObject ? procedureInput : emptyInput;

-    tools.push({
-      name: metadata.name ?? path.replaceAll(".", "_"),
-      description: metadata.description ?? "",
-      type: definition.type,
-      pathInRouter: path.split("."),
-      inputValidator,
-      inputSchema: normalizeJsonSchema(
-        z.toJSONSchema(inputValidator, {
-          unrepresentable: "any",
-        }),
-      ),
-    });
+    const inputs = definition.inputs;
+    let inputMode: McpTool["inputMode"] = "object";
+    if (inputs.every((input) => input instanceof z.ZodUndefined || input instanceof z.ZodVoid)) inputMode = "none";
+    const objectInputs = inputs.map(getObjectInput);
+    if (inputMode === "object" && !objectInputs.every((input) => input !== null)) {
+      diagnostics.push({ name, path, reason: "unsupported_input" });
+      continue;
+    }
+
+    try {
+      let input: z.ZodType = emptyInput;
+      if (inputMode === "object") {
+        const objects = objectInputs.filter((schema): schema is z.ZodObject => schema !== null);
+        input = objects[0] ?? emptyInput;
+        for (const object of objects.slice(1)) input = z.intersection(input, object);
+      }
+      const inputSchema = z.toJSONSchema(input, {
+        io: "input",
+        override: ({ zodSchema, jsonSchema }) => {
+          if (zodSchema["_zod"].def.type !== "string") return;
+          if (zodSchema["_zod"].def.checks?.some((check) => check["_zod"].def.check === "overwrite")) {
+            // trim/case normalization runs before these checks in tRPC. They cannot constrain raw JSON.
+            delete jsonSchema.minLength;
+            delete jsonSchema.maxLength;
+            delete jsonSchema.pattern;
+            delete jsonSchema.allOf;
+            delete jsonSchema.format;
+          }
+          // Zod's ISO regex permits minute precision; JSON Schema date-time requires seconds.
+          if (jsonSchema.format === "date-time" && typeof jsonSchema.pattern === "string") {
+            delete jsonSchema.format;
+          }
+        },
+      });
+      // Chained tRPC object inputs produce allOf; MCP requires an explicit object root.
+      if (inputSchema.type !== undefined && inputSchema.type !== "object") throw new Error("Invalid root");
+      inputSchema.type = "object";
+      // Zod and the SDK disagree on JSON Schema vocabulary types; compilation checks the actual schema.
+      schemaValidator.getValidator(inputSchema as Parameters<typeof schemaValidator.getValidator>[0]);
+      tools.push({
+        name,
+        description: metadata.description ?? "",
+        type: definition.type,
+        pathInRouter: path.split("."),
+        inputMode,
+        inputSchema,
+      });
+    } catch {
+      // Conversion errors can contain schema metadata. Only expose a stable, safe reason.
+      diagnostics.push({ name, path, reason: "invalid_schema" });
+    }
  }

-  return tools.toSorted((left, right) => left.name.localeCompare(right.name));
+  const duplicates = new Set<string>();
+  for (const [name, paths] of names) {
+    if (paths.length < 2) continue;
+    duplicates.add(name);
+    for (const path of paths) diagnostics.push({ name, path, reason: "duplicate_name" });
+  }
+  return {
+    tools: tools
+      .filter((tool) => !duplicates.has(tool.name))
+      .toSorted((left, right) => left.name.localeCompare(right.name)),
+    diagnostics: diagnostics.toSorted(
+      (left, right) => left.path.localeCompare(right.path) || left.reason.localeCompare(right.reason),
+    ),
+  };
+}
+
+/** Dispatch raw JSON through the caller so tRPC owns parsing, transforms, and authorization. */
+export async function callMcpTool(caller: unknown, tool: McpTool, input: unknown) {
+  let procedure = caller;
+  for (const segment of tool.pathInRouter) {
+    if ((typeof procedure !== "object" && typeof procedure !== "function") || procedure === null) {
+      throw new Error("Tool is not callable");
+    }
+    procedure = (procedure as Record<string, unknown>)[segment];
+  }
+  if (typeof procedure !== "function") throw new Error("Tool is not callable");
+  let procedureInput = input;
+  if (tool.inputMode === "none") procedureInput = undefined;
+  else if (input === undefined) procedureInput = {};
+  return await (procedure as (value: unknown) => Promise<unknown>)(procedureInput);
 }
@@ -1,5 +1,5 @@
 export { createTRPCContext } from "./trpc";
-export { extractMcpToolsFromProcedures } from "./mcp-tools";
+export { callMcpTool, extractMcpToolsFromProcedures } from "./mcp-tools";
 export type { McpTool } from "./mcp-tools";

 import { createTRPCRouter } from "./trpc";
@@ -42,8 +42,6 @@ import {
  getWidgetIntegrationIssueMessage,
  getPermissionsWithChildren,
  getPermissionsWithParents,
-  BOARD_FIXED_ITEM_SIZE_MAX,
-  BOARD_FIXED_ITEM_SIZE_MIN,
  normalizeBoardLayoutRoles,
  rootSectionOffsets,
  widgetDefaultSizes,
@@ -1144,7 +1142,8 @@ export const boardRouter = createTRPCRouter({
    .meta({
      mcp: {
        enabled: true,
-        description: `Read the editable visual and behavior settings for one board, including its current custom CSS and board scaling settings. fixedScaling keeps each 1x1 grid item at fixedItemSize pixels instead of fitting the board to the viewport; fixedItemSize is ${BOARD_FIXED_ITEM_SIZE_MIN}-${BOARD_FIXED_ITEM_SIZE_MAX}. Requires modify permission. REQUIRED: id (board ID). Call this before proposing board settings or custom CSS changes`,
+        description:
+          "Read the editable visual and behavior settings for one board, including its current custom CSS. Requires modify permission. REQUIRED: id (board ID). Call this before proposing board settings or custom CSS changes",
      },
    })
    .input(z.object({ id: z.string() }))
@@ -1171,8 +1170,6 @@ export const boardRouter = createTRPCRouter({
          customCss: true,
          iconColor: true,
          itemRadius: true,
-          fixedScaling: true,
-          fixedItemSize: true,
          disableStatus: true,
        },
        where: boardWhere,
@@ -1529,7 +1526,8 @@ export const boardRouter = createTRPCRouter({
      openapi: { method: "PATCH", path: "/api/boards/{id}/settings", tags: ["boards"], protect: true },
      mcp: {
        enabled: true,
-        description: `Update visual and behavior settings for a board. Set fixedScaling to true to keep each 1x1 grid item at fixedItemSize pixels instead of fitting the board to the viewport; fixedItemSize must be ${BOARD_FIXED_ITEM_SIZE_MIN}-${BOARD_FIXED_ITEM_SIZE_MAX}. Requires modify permission. REQUIRED: id (board ID). Optional fields include pageTitle, metaTitle, logoImageUrl, faviconImageUrl, backgroundImageUrl, colors, opacity, customCss, itemRadius, fixedScaling, fixedItemSize, and disableStatus`,
+        description:
+          "Update visual and behavior settings for a board. Requires modify permission. REQUIRED: id (board ID). Optional fields include pageTitle, metaTitle, logoImageUrl, faviconImageUrl, backgroundImageUrl, colors, opacity, customCss, itemRadius, and disableStatus",
      },
    })
    .input(boardSavePartialSettingsSchema.extend({ id: z.string() }))
@@ -1559,10 +1557,6 @@ export const boardRouter = createTRPCRouter({
          iconColor: input.iconColor,
          itemRadius: input.itemRadius,

-          // scaling settings
-          fixedScaling: input.fixedScaling,
-          fixedItemSize: input.fixedItemSize,
-
          // custom css
          customCss: input.customCss,

@@ -56,7 +56,7 @@ export const inviteRouter = createTRPCRouter({
    .requiresPermission("admin")
    .input(
      z.object({
-        expirationDate: z.date(),
+        expirationDate: z.iso.datetime({ offset: true }),
      }),
    )
    .output(z.object({ id: z.string(), token: z.string() }))
@@ -80,7 +80,7 @@ export const inviteRouter = createTRPCRouter({

      await ctx.db.insert(invites).values({
        id,
-        expirationDate: input.expirationDate,
+        expirationDate: new Date(input.expirationDate),
        creatorId: ctx.session.user.id,
        token,
      });
@@ -29,7 +29,6 @@ import {
  serverSettings,
 } from "@homarr/db/schema";
 import {
-  BOARD_FIXED_ITEM_SIZE_DEFAULT,
  emptySuperJSON,
  everyoneGroup,
  extractContainerImageName,
@@ -389,8 +388,6 @@ export const onboardRouter = createTRPCRouter({
              customCss: null,
              iconColor: null,
              itemRadius: input.board.itemRadius,
-              fixedScaling: false,
-              fixedItemSize: BOARD_FIXED_ITEM_SIZE_DEFAULT,
              disableStatus: false,
              sections: [],
              layouts: pendingLayouts,
@@ -123,7 +123,7 @@ describe("create should create a new invite expiring on the specified date with

    // Act
    const result = await caller.createInvite({
-      expirationDate,
+      expirationDate: expirationDate.toISOString(),
    });

    // Assert
@@ -1,9 +1,12 @@
+import { initTRPC } from "@trpc/server";
 import type { TRPCError } from "@trpc/server";
 import { describe, expect, test, vi } from "vitest";
 import { z } from "zod/v4";

 import { mcpRouter } from "../mcp";
-import { extractMcpToolsFromProcedures } from "../mcp-tools";
+import type { McpMeta } from "../mcp-tools";
+import { createMcpProtocolHandler } from "../../../../apps/nextjs/src/app/api/mcp/_protocol";
+import { callMcpTool, extractMcpToolsFromProcedures } from "../mcp-tools";

 vi.mock("@homarr/auth", () => ({}));

@@ -157,7 +160,7 @@ function actualToolInventory() {
    { _def?: { type?: "query" | "mutation" } }
  >;
  return extractMcpToolsFromProcedures(mcpRouter)
-    .map((tool) => {
+    .tools.map((tool) => {
      const procedure = procedures[tool.pathInRouter.join(".")];
      const type = procedure?.["_def"]?.type;
      if (type !== "query" && type !== "mutation") throw new Error(`Unable to classify MCP tool '${tool.name}'`);
@@ -175,7 +178,7 @@ describe("production MCP router", () => {
  });

  test("keeps every secret-bearing tool behind a mutation procedure", () => {
-    const tools = extractMcpToolsFromProcedures(mcpRouter);
+    const tools = extractMcpToolsFromProcedures(mcpRouter).tools;
    const procedures = mcpRouter["_def"].procedures as unknown as Record<
      string,
      { _def?: { type?: "query" | "mutation" } }
@@ -189,7 +192,7 @@ describe("production MCP router", () => {
  });

  test("gives every production tool a description", () => {
-    const tools = extractMcpToolsFromProcedures(mcpRouter);
+    const tools = extractMcpToolsFromProcedures(mcpRouter).tools;
    for (const tool of tools) expect(tool.description, `Tool ${tool.name} should have a description`).toBeTruthy();
    expect(tools.find((tool) => tool.name === "customWidget_getAuthoringPrompt")?.description).toBe(
      "Get the current Custom Widget authoring instructions.",
@@ -197,16 +200,17 @@ describe("production MCP router", () => {
  });
 });

-test("MCP tools are deterministically ordered and retain executable schemas", () => {
-  const tools = extractMcpToolsFromProcedures(mcpRouter);
+test("MCP tools are deterministically ordered and have valid production schemas", () => {
+  expect(extractMcpToolsFromProcedures(mcpRouter).diagnostics).toEqual([]);
+  const tools = extractMcpToolsFromProcedures(mcpRouter).tools;
  const toolNames = tools.map((tool) => tool.name);

  expect(toolNames).toEqual(toolNames.toSorted((left, right) => left.localeCompare(right)));
-  expect(tools.every((tool) => tool.inputValidator instanceof z.ZodObject)).toBe(true);
+  expect(tools.every((tool) => tool.inputSchema.type === "object")).toBe(true);
 });

 test("publishes both Custom Widget template input formats", () => {
-  const tool = extractMcpToolsFromProcedures(mcpRouter).find(
+  const tool = extractMcpToolsFromProcedures(mcpRouter).tools.find(
    (candidate) => candidate.name === "customWidget_validateTemplate",
  );

@@ -355,3 +359,119 @@ describe("custom widget authoring procedure access", () => {
    );
  });
 });
+
+describe("MCP catalog diagnostics", () => {
+  const trpc = initTRPC.meta<McpMeta>().create();
+  const exposed = trpc.procedure.meta({ mcp: { enabled: true } });
+
+  test("omits unsupported parsers and malformed schemas without losing valid tools", () => {
+    const router = trpc.router({
+      good: exposed.input(z.object({ name: z.string() })).query(() => "ok"),
+      date: exposed.input(z.object({ date: z.date() })).query(() => "unused"),
+      scalar: exposed.input(z.string()).query(() => "unused"),
+      parser: exposed.input({ parse: (value: unknown) => value }).query(() => "unused"),
+      malformed: exposed
+        .input(z.object({ value: z.string().meta({ type: "invalid-json-type" }) }))
+        .query(() => "unused"),
+    });
+    const catalog = extractMcpToolsFromProcedures(router);
+    expect(catalog.tools.map((tool) => tool.name)).toEqual(["good"]);
+    expect(catalog.diagnostics).toEqual([
+      { name: "date", path: "date", reason: "invalid_schema" },
+      { name: "malformed", path: "malformed", reason: "invalid_schema" },
+      { name: "parser", path: "parser", reason: "unsupported_input" },
+      { name: "scalar", path: "scalar", reason: "unsupported_input" },
+    ]);
+  });
+
+  test("omits all duplicate names even when one procedure has an invalid schema", () => {
+    const shared = trpc.procedure.meta({ mcp: { enabled: true, name: "shared" } });
+    const catalog = extractMcpToolsFromProcedures(
+      trpc.router({
+        first: shared.query(() => "first"),
+        second: shared.input(z.object({ date: z.date() })).query(() => "second"),
+        good: exposed.query(() => "good"),
+        invalidName: trpc.procedure.meta({ mcp: { enabled: true, name: "bad name" } }).query(() => "unused"),
+      }),
+    );
+    expect(catalog.tools.map((tool) => tool.name)).toEqual(["good"]);
+    expect(catalog.diagnostics.filter((diagnostic) => diagnostic.reason === "duplicate_name")).toEqual([
+      { name: "shared", path: "first", reason: "duplicate_name" },
+      { name: "shared", path: "second", reason: "duplicate_name" },
+    ]);
+    expect(catalog.diagnostics).toContainEqual({ name: "bad name", path: "invalidName", reason: "invalid_name" });
+  });
+
+  test("distinguishes empty object input from no input for shared Assistant dispatch", async () => {
+    const router = trpc.router({
+      none: exposed.query(({ input }) => input),
+      explicitNone: exposed.input(z.undefined()).query(({ input }) => input),
+      object: exposed.input(z.object({ value: z.string().default("default") })).query(({ input }) => input),
+      optional: exposed
+        .input(z.object({ value: z.string().default("default") }).optional())
+        .query(({ input }) => input),
+    });
+    const catalog = extractMcpToolsFromProcedures(router);
+    expect(catalog.diagnostics).toEqual([]);
+    for (const tool of catalog.tools) {
+      const result = await callMcpTool(router.createCaller({}), tool, {});
+      if (tool.inputMode === "none") expect(result).toBeUndefined();
+      else expect(result).toEqual({ value: "default" });
+    }
+  });
+});
+
+test.each([false, true])(
+  "production catalog registers through the real protocol handler (modern=%s)",
+  async (modern) => {
+    const { tools, diagnostics } = extractMcpToolsFromProcedures(mcpRouter);
+    expect(diagnostics).toEqual([]);
+    const handler = createMcpProtocolHandler({
+      caller: {},
+      tools,
+      version: "test",
+      instructions: "test",
+      formatToolError: () => "Tool failed",
+    });
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      Accept: "application/json, text/event-stream",
+    };
+    const params: Record<string, unknown> = {};
+    if (modern) {
+      headers["Mcp-Method"] = "tools/list";
+      headers["Mcp-Name"] = "homarr";
+      params["_meta"] = {
+        "io.modelcontextprotocol/protocolVersion": "2026-07-28",
+        "io.modelcontextprotocol/clientInfo": { name: "catalog-test", version: "1" },
+        "io.modelcontextprotocol/clientCapabilities": {},
+      };
+    }
+    const response = await handler.fetch(
+      new Request("http://homarr.test/api/mcp", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ jsonrpc: "2.0", id: 1, method: "tools/list", params }),
+      }),
+    );
+    expect(response.status).toBe(200);
+    expect(response.headers.has("Mcp-Session-Id")).toBe(false);
+    const body = await response.text();
+    let payload = body;
+    if (response.headers.get("Content-Type")?.includes("text/event-stream")) {
+      payload =
+        body
+          .split("\n")
+          .find((line) => line.startsWith("data: "))
+          ?.slice(6) ?? "";
+    }
+    const result = JSON.parse(payload) as {
+      error?: unknown;
+      result: { tools: { name: string; inputSchema: unknown }[] };
+    };
+    expect(result.error).toBeUndefined();
+    expect(result.result.tools.map((tool) => ({ name: tool.name, inputSchema: tool.inputSchema }))).toEqual(
+      tools.map((tool) => ({ name: tool.name, inputSchema: tool.inputSchema })),
+    );
+  },
+);
@@ -37,12 +37,6 @@ describe("authoring resources", () => {
      expect(bundledContent).toContain(content.trim());
    }
    expect(bundledContent).toContain(skill.skillMd.trim());
-    expect(bundledContent).toContain("coordinated set of widgets");
-    expect(bundledContent).toContain("customWidget_validateTemplate");
-    expect(bundledContent).toContain("customWidget_findComponents");
-    expect(bundledContent).toContain("Batch selected non-obvious binding or interaction documentation");
-    expect(bundledContent).not.toContain("at most eight named component documents");
-    expect(bundledContent).toContain("Do not use an unlabeled decorative icon as an empty state");
    expect(Buffer.byteLength(JSON.stringify(skill), "utf8")).toBeLessThan(12_000);

    const entrypoint = getCustomWidgetSkillEntrypoint();
@@ -50,36 +44,7 @@ describe("authoring resources", () => {
      expect.arrayContaining([expect.objectContaining({ name: "runtime", tool: "customWidget_getReference" })]),
    );
    expect(JSON.stringify(entrypoint)).not.toContain("# Runtime");
-    expect(entrypoint.skillMd).toContain("Context routing");
-    expect(entrypoint.skillMd).toContain("customWidget_validateTemplate");
-    expect(entrypoint.skillMd).toContain("customWidget_previewReviseTemplate");
-    expect(entrypoint.skillMd).toContain("map every requested capability");
-    expect(entrypoint.skillMd).toContain("purpose-specific visual signature");
-    expect(entrypoint.skillMd).toContain("asymmetric priority metric/action");
-    expect(entrypoint.skillMd).toContain("new manifest");
-    expect(entrypoint.skillMd).not.toContain("To install an existing widget");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("SubFetch");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain(
-      'require `trigger: "manual"` on request and `SubFetch`',
-    );
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("RefreshButton");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("owns loading/error/retry");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("need literal `requestId`");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain('requestId="search" label="Run again"');
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("Render load queries directly");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("entire JSON response");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("never map the envelope itself");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("immediately hides its prior result");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("Every stateful control must use `bind`");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("resetKey={inputs.search}");
-    expect(getCustomWidgetSkillReference("runtime").content).toContain('Date.toLocaleString(value, "en-US", "UTC")');
-    expect(getCustomWidgetSkillReference("runtime").content).toContain("Never invent a formatter component");
    const schemaReference = getCustomWidgetSkillReference("schema").content;
-    expect(schemaReference).toContain('"default": {');
-    expect(schemaReference).toContain('"trigger": "manual"');
-    expect(schemaReference).toContain('"kind": "action"');
-    expect(schemaReference).toContain('"apiKeyHeader"');
-    expect(schemaReference).toContain("is the required source ID");
    expect(Buffer.byteLength(schemaReference, "utf8")).toBeLessThan(4_000);
    expect(Buffer.byteLength(JSON.stringify(entrypoint), "utf8")).toBeLessThan(3_000);
    expect(Buffer.byteLength(JSON.stringify(entrypoint), "utf8")).toBeLessThan(
@@ -107,8 +72,6 @@ describe("authoring resources", () => {
    const serviceDashboard = getCustomWidgetExample("service-dashboard");
    if (!serviceDashboard) throw new Error("Service dashboard example is missing");
    expect(validateCustomJsxTemplate(serviceDashboard.widget.template)).toEqual([]);
-    expect(serviceDashboard.widget.template.match(/<Paper/gu)).toHaveLength(1);
-    expect(serviceDashboard.widget.template).toContain('RefreshButton label="Refresh service health"');
    expect(Buffer.byteLength(JSON.stringify(pokedex), "utf8")).toBeLessThan(16_000);
    expect(catalog.sharedProps).toMatchObject({
      count: expect.any(Number),
@@ -1,74 +0,0 @@
-import { readFile } from "node:fs/promises";
-import { resolve } from "node:path";
-
-import { describe, expect, test } from "vitest";
-
-const languageDirectory = resolve(import.meta.dirname, "../../../translation/src/lang");
-
-describe("Workshop navigation translations", () => {
-  test("defines the breadcrumb labels for the Custom Widgets sub-routes", async () => {
-    const messages = JSON.parse(await readFile(resolve(languageDirectory, "en.json"), "utf8")) as {
-      management?: { navbar?: { items?: { workshop?: unknown } } };
-      navigationStructure?: {
-        manage?: {
-          workshop?: unknown;
-          "custom-widgets"?: {
-            workshop?: { label?: unknown };
-            publish?: { label?: unknown };
-          };
-        };
-      };
-      customWidget?: { page?: { tabs?: Record<string, unknown> } };
-      workshop?: Record<string, unknown>;
-    };
-
-    // The Workshop is reached through the Custom Widgets tabs, not its own navbar entry.
-    expect(messages.management?.navbar?.items?.workshop).toBeUndefined();
-    expect(messages.navigationStructure?.manage?.workshop).toBeUndefined();
-    expect(messages.navigationStructure?.manage?.["custom-widgets"]?.workshop?.label).toBe("Workshop");
-    expect(messages.navigationStructure?.manage?.["custom-widgets"]?.publish?.label).toBe("Publish to Workshop");
-    expect(messages.customWidget?.page?.tabs).toMatchObject({
-      installed: "Installed",
-      workshop: "Workshop",
-      ariaLabel: expect.any(String),
-    });
-
-    expect(messages.workshop).toMatchObject({
-      communityMember: "Community member",
-      outdated: "Outdated",
-      install: "Install",
-      back: expect.any(String),
-      listAriaLabel: expect.any(String),
-      installReviewTitle: expect.any(String),
-      emptyFilteredDescription: expect.any(String),
-      importCssConfirm: expect.any(String),
-      reportCount: expect.any(String),
-      reportWarning: expect.any(String),
-      reportVisibility: expect.any(String),
-      screenshotAlt: expect.any(String),
-      upvote: expect.any(String),
-      downvote: expect.any(String),
-      reportCategory: expect.objectContaining({
-        outdated: expect.any(String),
-        malicious: expect.any(String),
-        spam: expect.any(String),
-        copyright: expect.any(String),
-        inappropriate: expect.any(String),
-        other: expect.any(String),
-      }),
-      publish: expect.objectContaining({
-        invalidScreenshot: expect.any(String),
-      }),
-    });
-  });
-
-  test("drops the message keys that only existed for the stacked install modals", async () => {
-    const messages = JSON.parse(await readFile(resolve(languageDirectory, "en.json"), "utf8")) as {
-      workshop?: Record<string, unknown>;
-    };
-
-    for (const key of ["installDialog", "continueInstall", "confirmInstallTitle", "backToWidget", "inspectCss"]) {
-      expect(messages.workshop).not.toHaveProperty(key);
-    }
-  });
-});
@@ -1,2 +0,0 @@
-ALTER TABLE `board` ADD `fixed_scaling` boolean DEFAULT false NOT NULL;--> statement-breakpoint
-ALTER TABLE `board` ADD `fixed_item_size` smallint DEFAULT 200 NOT NULL;
@@ -351,13 +351,6 @@
      "when": 1788763848931,
      "tag": "0049_add_byte_unit_system",
      "breakpoints": true
-    },
-    {
-      "idx": 50,
-      "version": "5",
-      "when": 1788845117219,
-      "tag": "0050_add_fixed_board_scaling",
-      "breakpoints": true
    }
  ]
 }
@@ -1,2 +0,0 @@
-ALTER TABLE "board" ADD COLUMN "fixed_scaling" boolean DEFAULT false NOT NULL;--> statement-breakpoint
-ALTER TABLE "board" ADD COLUMN "fixed_item_size" smallint DEFAULT 200 NOT NULL;
@@ -113,13 +113,6 @@
      "when": 1788763848932,
      "tag": "0015_add_byte_unit_system",
      "breakpoints": true
-    },
-    {
-      "idx": 16,
-      "version": "7",
-      "when": 1788845119083,
-      "tag": "0016_add_fixed_board_scaling",
-      "breakpoints": true
    }
  ]
 }
@@ -1,2 +0,0 @@
-ALTER TABLE `board` ADD `fixed_scaling` integer DEFAULT false NOT NULL;--> statement-breakpoint
-ALTER TABLE `board` ADD `fixed_item_size` integer DEFAULT 200 NOT NULL;
@@ -337,13 +337,6 @@
      "when": 1788763848930,
      "tag": "0047_add_byte_unit_system",
      "breakpoints": true
-    },
-    {
-      "idx": 48,
-      "version": "6",
-      "when": 1788845055278,
-      "tag": "0048_add_fixed_board_scaling",
-      "breakpoints": true
    }
  ]
 }
@@ -23,7 +23,6 @@ import {
  backgroundImageAttachments,
  backgroundImageRepeats,
  backgroundImageSizes,
-  BOARD_FIXED_ITEM_SIZE_DEFAULT,
  emptySuperJSON,
 } from "@homarr/definitions";
 import type {
@@ -302,8 +301,6 @@ export const boards = mysqlTable("board", {
  customCss: text(),
  iconColor: text(),
  itemRadius: text().$type<MantineSize>().default("lg").notNull(),
-  fixedScaling: boolean().default(false).notNull(),
-  fixedItemSize: smallint().default(BOARD_FIXED_ITEM_SIZE_DEFAULT).notNull(),
  disableStatus: boolean().default(false).notNull(),
 });

@@ -21,7 +21,6 @@ import {
  backgroundImageAttachments,
  backgroundImageRepeats,
  backgroundImageSizes,
-  BOARD_FIXED_ITEM_SIZE_DEFAULT,
  emptySuperJSON,
 } from "@homarr/definitions";
 import type {
@@ -300,8 +299,6 @@ export const boards = pgTable("board", {
  customCss: text(),
  iconColor: text(),
  itemRadius: text().$type<MantineSize>().default("lg").notNull(),
-  fixedScaling: boolean().default(false).notNull(),
-  fixedItemSize: smallint().default(BOARD_FIXED_ITEM_SIZE_DEFAULT).notNull(),
  disableStatus: boolean().default(false).notNull(),
 });

@@ -9,7 +9,6 @@ import {
  backgroundImageAttachments,
  backgroundImageRepeats,
  backgroundImageSizes,
-  BOARD_FIXED_ITEM_SIZE_DEFAULT,
  emptySuperJSON,
 } from "@homarr/definitions";
 import type {
@@ -285,8 +284,6 @@ export const boards = sqliteTable("board", {
  customCss: text(),
  iconColor: text(),
  itemRadius: text().$type<MantineSize>().default("lg").notNull(),
-  fixedScaling: int({ mode: "boolean" }).default(false).notNull(),
-  fixedItemSize: int().default(BOARD_FIXED_ITEM_SIZE_DEFAULT).notNull(),
  disableStatus: int({ mode: "boolean" }).default(false).notNull(),
 });

@@ -10,10 +10,6 @@ export const backgroundImageSizes = createDefinition(["cover", "contain"], {
 });
 export const layoutRoles = createDefinition(["mobile", "base", "custom"], { defaultValue: "custom" });

-export const BOARD_FIXED_ITEM_SIZE_DEFAULT = 200;
-export const BOARD_FIXED_ITEM_SIZE_MIN = 40;
-export const BOARD_FIXED_ITEM_SIZE_MAX = 200;
-
 export type BackgroundImageAttachment = inferDefinitionType<typeof backgroundImageAttachments>;
 export type BackgroundImageRepeat = inferDefinitionType<typeof backgroundImageRepeats>;
 export type BackgroundImageSize = inferDefinitionType<typeof backgroundImageSizes>;
@@ -5430,16 +5430,6 @@
        "label": "Disable app status",
        "description": "Disables the status check for all apps on this board"
      },
-      "fixedScaling": {
-        "label": "Fixed scaling",
-        "description": "Keep board tiles at the selected size. The dashboard is centred when it fits and scrolls when it does not."
-      },
-      "fixedItemSize": {
-        "label": "1 × 1 tile size",
-        "description": "Set the exact visible width and height used for a 1 × 1 tile when fixed scaling is enabled.",
-        "previewLabel": "1 by 1 tile preview at {size} by {size} pixels",
-        "previewValue": "{size} × {size} px"
-      },
      "columnCount": {
        "label": "Column count"
      },
@@ -5465,22 +5455,12 @@
    "setting": {
      "title": "Settings for {boardName} board",
      "section": {
-        "navigation": "Board settings",
-        "advanced": "Advanced",
-        "validationError": "Check the highlighted settings before saving. Layouts with errors are marked in the layout selector.",
        "general": {
          "title": "General",
          "unrecognizedLink": "The provided link is not recognized and won't preview, it might still work."
        },
        "layout": {
          "title": "Layout",
-          "scaling": {
-            "title": "Tile sizing",
-            "fit": "Fit to screen",
-            "fitDescription": "Resize the whole board to fill the available width. Tile size changes with the window.",
-            "sizeDescription": "The size applies in fixed scaling and is kept when you switch modes.",
-            "halfSize": "Tile sample · 50% size"
-          },
          "responsive": {
            "title": "Responsive layouts",
            "description": "Each layout keeps its own widget positions and sizes. Mobile and Base are always available; add custom layouts at any additional breakpoint.",
@@ -5500,12 +5480,6 @@
            "breakpointDescription": "Mobile is always used from 0px until the next layout breakpoint."
          },
          "preview": {
-            "title": "Board preview",
-            "description": "A miniature of this layout at the indicated screen width. Changes appear here before you save.",
-            "layout": "Layout to configure",
-            "canvasLabel": "Scrollable board layout preview",
-            "dimensions": "1 × 1: {size} × {size} px · {columns} columns",
-            "responsiveDimensions": "Fit to screen · {columns} columns",
            "columns": "columns",
            "empty": "This layout is empty",
            "dynamicSection": "Dynamic section",
@@ -5533,10 +5507,7 @@
          "title": "Background"
        },
        "appearance": {
-          "title": "Appearance",
-          "showShades": "Show color shades",
-          "hideShades": "Hide color shades",
-          "pickColor": "Pick {label} from the screen"
+          "title": "Appearance"
        },
        "customCss": {
          "title": "Custom css"
@@ -5636,8 +5607,7 @@
  "layout": {
    "field": {
      "columnCount": {
-        "label": "Column count",
-        "description": "Maximum total columns in this layout, including fixed sidebars."
+        "label": "Column count"
      },
      "breakpoint": {
        "label": "Breakpoint",
@@ -8062,7 +8032,6 @@
      "resetAll": "Reset all changes",
      "tabs": {
        "css": "Custom CSS",
-        "layout": "Layout",
        "appearance": "Appearance",
        "background": "Background",
        "general": "General"
@@ -6,8 +6,6 @@ import {
  backgroundImageSizes,
  boardPermissions,
  layoutRoles,
-  BOARD_FIXED_ITEM_SIZE_MAX,
-  BOARD_FIXED_ITEM_SIZE_MIN,
  widgetKinds,
 } from "@homarr/definitions";

@@ -70,8 +68,6 @@ export const boardSavePartialSettingsSchema = z
    customCss: z.string().max(16384),
    iconColor: hexColorNullableSchema,
    itemRadius: z.union([z.literal("xs"), z.literal("sm"), z.literal("md"), z.literal("lg"), z.literal("xl")]),
-    fixedScaling: z.boolean(),
-    fixedItemSize: z.number().int().min(BOARD_FIXED_ITEM_SIZE_MIN).max(BOARD_FIXED_ITEM_SIZE_MAX),
    disableStatus: z.boolean(),
  })
  .partial();
@@ -366,6 +366,9 @@ catalogs:
    ai:
      specifier: ^7.0.56
      version: 7.0.56
+    ajv:
+      specifier: 8.18.0
+      version: 8.18.0
    assistant-stream:
      specifier: 0.3.34
      version: 0.3.34
@@ -1520,6 +1523,9 @@ importers:
      '@kubernetes/client-node':
        specifier: 'catalog:'
        version: 1.4.0(supports-color@10.2.2)
+      '@modelcontextprotocol/server':
+        specifier: 'catalog:'
+        version: 2.0.0
      '@tanstack/react-query':
        specifier: 'catalog:'
        version: 5.101.2(react@19.2.7)
@@ -1535,6 +1541,9 @@ importers:
      '@trpc/tanstack-react-query':
        specifier: 'catalog:'
        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)
+      ajv:
+        specifier: 'catalog:'
+        version: 8.18.0
      lodash.clonedeep:
        specifier: 'catalog:'
        version: 4.5.0
@@ -123,6 +123,7 @@ catalog:
  adm-zip: 0.6.0
  acorn: ^8.16.0
  acorn-jsx: ^5.3.2
+  ajv: 8.18.0
  jszip: ^3.10.1
  sql.js: ^1.14.1
  babel-plugin-react-compiler: ^1.0.0
Author	SHA1	Message	Date
ajnart	0f1734d22e	docs(mcp): restore custom widget authoring guidance	2026-09-10 19:24:32 +02:00
Thomas	ea3dac752f	fix(mcp): harden tool schemas and dispatch (#6815 )	2026-09-10 19:19:47 +02:00
Thomas	f994d665d2	ci: remove automatic test gates and trim test suites (#6816 ) * ci: remove automatic test gates and trim test suites * docs: remove CI audit report	2026-09-10 19:14:31 +02:00
Thomas	3358b6337f	fix(mcp): use JSON-compatible invitation dates (#6814 )	2026-09-10 17:53:38 +02:00
Thomas	61d3fd5f08	fix(board): restore container grid geometry (#6808 )	2026-09-09 15:04:27 +02:00
Thomas	3aac106156	docs: correct v2 beta installation guidance (#6809 )	2026-09-09 12:09:14 +02:00