test: remove obsolete advanced interactions flow

test: remove advanced focus support assertion
chore: update Next.js to 16.3.1
2026-08-14 15:14:11 +02:00 · 2026-08-14 14:44:02 +02:00 · 2026-08-14 12:11:21 +02:00 · 2026-08-14 11:32:13 +02:00 · 2026-08-14 11:32:13 +02:00 · 2026-08-14 11:32:13 +02:00
531 changed files with 19538 additions and 10651 deletions
@@ -66,8 +66,6 @@ homarr/
 │   ├── analytics/       # Server-side analytics (Umami)
 │   ├── server-settings/ # Server setting keys/types
 │   ├── settings/        # User-facing settings UI context
-│   ├── old-import/      # Legacy Homarr import
-│   ├── old-schema/      # Legacy Homarr zod schemas
 │   └── cli/             # Node CLI for ops (brocli)
 ├── tooling/
 │   ├── typescript/      # Base tsconfig
@@ -263,15 +263,6 @@ Even hidden options need translation keys or the translation test fails:
 "widget.mywidget.option.columnWidths.label": "Column widths"
 ```

-### Old-import mappings
-
-Add to `packages/old-import/src/widgets/options.ts`:
-
-```typescript
-columnOrder: () => undefined,
-columnWidths: () => undefined,
-```
-
 ### Dynamic storeKey

 Use a key that includes `itemId` and sorted column names. This prevents cross-widget localStorage bleeding:
@@ -610,13 +601,12 @@ if (isEditMode) rowContextMenuHandler = undefined;
 4. Add CSS file for transparent backgrounds (if widget context)
 5. Add responsive column visibility (if widget context)
 6. Add hidden options + hydration logic (if column persistence needed)
-7. Add old-import mappings for new options
-8. Add translation keys (including hidden option labels)
-9. Add context menu if row actions exist
-10. Add row expansion if detail view exists
-11. Add error handling on all mutations
-12. Add accessibility attributes
-13. Test at multiple widget widths
-14. Update docs in `apps/docs/docs/widgets/` if applicable
-15. Run `pnpm turbo typecheck` — catches old-import mismatches
-16. Run translation spec — catches missing keys
+7. Add translation keys (including hidden option labels)
+8. Add context menu if row actions exist
+9. Add row expansion if detail view exists
+10. Add error handling on all mutations
+11. Add accessibility attributes
+12. Test at multiple widget widths
+13. Update docs in `apps/docs/docs/widgets/` if applicable
+14. Run `pnpm turbo typecheck`
+15. Run translation spec — catches missing keys
@@ -84,3 +84,11 @@ apps/docs/.docusaurus
 apps/docs/build
 .pnpm-store
 benchmark-results
+
+# local performance investigation (never ship benchmark data or restored backups)
+.widget-performance/
+.bench/
+homarr-backup*.zip
+*.sqlite-wal
+*.sqlite-shm
+/scripts/benchmarks/
@@ -40,8 +40,6 @@ homarr/
 │   ├── analytics/       # Server-side analytics (Umami)
 │   ├── server-settings/ # Server setting keys/types
 │   ├── settings/        # User-facing settings UI context
-│   ├── old-import/      # Legacy Homarr import
-│   ├── old-schema/      # Legacy Homarr zod schemas
 │   └── cli/             # Node CLI for ops (brocli)
 ├── tooling/
 │   ├── typescript/      # Base tsconfig
@@ -54,7 +54,7 @@ For a single consolidated file with all content, use:
 - [How to integrate custom input with use-form hook?](https://mantine.dev/llms/q-custom-input-use-form.md): Learn how to add use-form support for custom inputs
 - [How to prevent Modal from closing?](https://mantine.dev/llms/q-how-to-prevent-modal-from-closing.md): Learn how to prevent Modal from closing when the user clicks outside of it or presses the Escape key
 - [How to scroll to the top of the form if the form is submitted with errors?](https://mantine.dev/llms/q-scroll-to-the-top-of-the-form.md): Learn how to call a function when the form is submitted with errors
- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/_, @mantinex/_ and postcss-preset-mantine dependencies manually or with ncu script
+- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update `@mantine/*`, `@mantinex/*` and `postcss-preset-mantine` dependencies manually or with ncu script
 - [How to use Dropzone with @mantine/form?](https://mantine.dev/llms/q-how-to-use-dropzone-with-form.md): Learn how to use Dropzone with @mantine/form to handle file selection state
 - [How to use Mantine template on GitHub?](https://mantine.dev/llms/q-templates-usage.md): Learn how to create a new repository based on Mantine template
 - [I get hydration warning about data-mantine-color-scheme attribute, what does it mean?](https://mantine.dev/llms/q-color-scheme-hydration-warning.md): Learn how hydration works and how to fix warnings
@@ -13,8 +13,6 @@ This will be a one time occurrence and version > ``1.0`` will have less breaking
 This time more important than every; **read the breaking changes** list and **create a backup** before updating.
 Some third party installation methods may take multiple days or weeks to update to the new version.

-See [this guide on how to import your previous Homarr dashboard](/docs/getting-started/after-the-installation#importing-a-zip-from-version-before-100)
-
 ## Changes at a glance
 - **Asynchronous integrations system**: In versions prior to ``1.0``, we fetched data upon each request synchronously.
 This means that the user had to wait for the requests to finish so any data would appear.
@@ -10,12 +10,11 @@ If you are still on a version before 0.15.10, please update to 0.15.10 where we

 <!-- truncate -->

-## Export your data
+## Preserve your old installation

-As 1.0 is a complete rewrite of Homarr and therefor not compatible with the old docker mounts, we need to export your data first.
-For this you can navigate to the `Migrate to 1.0` page which you can find under `Management` > `Tools` > `Migrate to 1.0`.
-Here you can select which things you want to export and download the zip file.
-It will also show you a secret key which you will need to import the secret data like user password hashes, salts and integration secrets.
+Homarr 1.0 is a complete rewrite and cannot reuse the old Docker mounts. Keep the 0.15 installation and its data intact while you build the replacement. The historical `Management` > `Tools` > `Migrate to 1.0` export can still be kept as a record, but current Homarr releases cannot import that ZIP or its secret key.
+
+Plan to recreate your apps, integrations, and boards manually in the new installation. A SQLite database backup can be restored from the onboarding welcome screen only when it was created by a compatible current Homarr release; it is not a conversion path for a 0.15 database.

 ![Export page](./img/old-homarr-export-data.png)

@@ -28,28 +27,15 @@ Please note that if you are using docker you need to specify a diffrent external
 So in your compose file the ports would be `7576:7575` instead of `7575:7575`.

 ## Import your data
-Once the installation is completed you can access the new installation. During the onboarding you'll need to select `Import from Homarr before 1.0`.

-![Onboarding initial step](./img/onboarding-step-1.png)
+:::warning Legacy guide

-After that you can upload the zip file you downloaded in the first step.
+The pre-1.0 ZIP importer is no longer included in current Homarr releases. Keep the old installation available until you have manually verified the replacement. Compatible SQLite backups from current releases can still be restored from the onboarding welcome screen.

-![Onboarding import dropzone](./img/old-homarr-import-dropzone.png)
-
-After that you'll get a list with all your boards that can be imported. You can configure how it should be imported and can select which screensizes it should import.
-
-![Onboarding import list](./img/old-homarr-import-choose-imported-data.png)
-
-Once you have selected everything you can click on `Confirm import and continue` which will open the encryption key input dialog where you can input the secret key you got during the export.
-
-![Onboarding import key input](./img/old-homarr-import-decryption-token.png)
-
-After that you can continue the onboarding and you should see all your boards and data in the new installation.
-
-See [After the installation](https://homarr.dev/docs/getting-started/after-the-installation) for more information.
+:::

 ## Remove the old installation

 After you are happy with the new installation and everything is working as expected you can remove the old installation.
 Please make sure to backup the data before you remove the old installation.
-Also once the port 7575 is free again you can change the port mapping of the new installation to `7575:7575` if you want to.
+Also once the port 7575 is free again you can change the port mapping of the new installation to `7575:7575` if you want to.
@@ -15,6 +15,20 @@ Homarr has the following keyboard shortcuts:
 | `Shift` + `Enter` on a supported widget         | Opens its advanced view until it is closed |
 | `Esc`                                           | Closes an open advanced view or board menu |

+## Board editing
+
+When a tile is focused in edit mode:
+
+| Shortcut             | Description                                                                 |
+| -------------------- | --------------------------------------------------------------------------- |
+| `Enter` or `Space`   | Starts or stops keyboard editing                                            |
+| Arrow keys           | Moves the focused tile within its current canvas, rail, or Container        |
+| `Shift` + Arrow keys | Resizes from the tile's lower-right corner: Left/Up shrink; Right/Down grow |
+| `Esc`                | Stops keyboard editing without undoing its changes                          |
+
+Keyboard moves and resizes apply immediately. To move an item between a canvas, rail, or Container, drag it there or use **Move / resize item** for precise numeric placement.
+Commands at a grid boundary or at the tile's minimum size are ignored and announced instead of moving or shrinking the tile.
+
 :::tip

 Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.
@@ -6,18 +6,10 @@ tags:
  - Configuration
 ---

-import imageStartFromScratchStepServerSettings from "./img/onboarding-from-scratch-step-server-settings.png";
-import imageStartFromScratchStepAdminUser from "./img/onboarding-from-scratch-step-admin-user.png";
-import imageStartFromScratchStepExternalAdminGroup from "./img/onboarding-from-scratch-step-external-admin-group.png";
-import imageStartFromScratchStepFinish from "./img/onboarding-from-scratch-step-finish.png";
 import manageBoardHeaderEditMode from "./img/manage-board-header-edit-mode.png";
 import manageBoardHeaderAddItem from "./img/manage-board-header-add-item-menu.png";
 import manageBoardHeaderChooseItem from "./img/manage-board-header-choose-item.png";
 import manageBoardNoApp from "./img/manage-board-no-app.png";
-import manageExportOldHomarr from "./img/old-homarr-export-data.png";
-import manageImportOldHomarrDropzone from "./img/old-homarr-import-dropzone.png";
-import manageImportOldHomarrChooseData from "./img/old-homarr-import-choose-imported-data.png";
-import manageImportDecryptionToken from "./img/old-homarr-import-decryption-token.png";

 :::tip

@@ -29,117 +21,50 @@ Congratulations on installing Homarr. Now it's time to get yourself familiar wit

 ## Onboarding

-The onboard will show the first time you start Homarr.
-This process will help you with your first steps and adding some initial data, such as the administrator account.
+Onboarding appears the first time Homarr starts. Its goal is to create a useful responsive board, not merely an
+administrator account. The setup uses one guided studio, so you can keep the safe defaults and finish quickly or review
+every detected service before anything is added to the board.

 :::note

-If you see this screen repeatitly after you restarted the Homarr container, your Docker mounting paths may be missing,
+If you see this screen repeatedly after restarting the Homarr container, your Docker mounting paths may be missing,
 incorrect or read-only. Read [our installation instructions](/docs/getting-started/installation/docker) again to fix this issue.

 :::

-You can either import a previous dashboard using the ZIP archive or start from scratch:
+### Restore or start fresh

-![Screenshot of Step 1 onboarding](./img/onboarding-step-1.png)
+SQLite installations can restore a complete Homarr database backup from the welcome screen. This restores current
+boards, people, apps, integrations, and settings. The pre-1.0 ZIP importer is no longer included.

-You may refresh anytime and continue from a different device - the onboarding is saved immediately on the server for your convenience.
+For a new installation, Homarr first creates either a credentials administrator or an administrator group matching your
+LDAP/OIDC provider. The browser that starts setup claims the first-run session; refreshes are safe, while another browser
+cannot change credentials or integrations during that setup.

-### Starting from scratch
+### Setup studio

-Depending on your auth provider configuration you will either first see the admin user creation form or the external group creation form.
-If the credentials provider was selected, you'll be prompted to create an admin user for Homarr.
-This user cannot be deleted and has full control over Homarr and all of its boards.
-You must choose a username and password (both can later be changed).
-We enforce strict password requirements when you enter your password to protect your instance if you accidentally
-expose it to the internet.
+The studio keeps related choices together:

-<img src={imageStartFromScratchStepAdminUser} alt={"Screenshot form to create admin user"} width={300} />
+1. **Essentials** sets the default language, color scheme, analytics preference, and the usual host, IP address, domain, or reverse-proxy path used by your services. URL suggestions can use separate ports, subdomains, or one path per service.
+2. **Discover** checks the actual database, Docker-compatible sockets, Kubernetes configuration, Workshop, and Assistant capabilities. Unavailable sources never block manual setup.
+3. **Connect** shows detected integrations and apps first, identifying whether each app came from an explicit [`homarr.*` or Homepage Docker label](/docs/integrations/docker-labels) or image matching. Select several integrations and apps at once, review every URL, and use the service-specific link to open its API-key settings when one is available. If a container has no published port or URL label, add its HTTP or HTTPS address before importing it.
+4. **Board** previews the Base layout, colors, widget radius, sidebars, selected apps, and widgets inferred from integrations or Docker labels. Choose 8 columns for a focused board, 10 for a balanced board, 12 for a wide board, or use the slider for a custom width up to 24 columns. Homarr still creates and reflows the protected Mobile layout automatically. A fast setup adds the integration-free Clock, Weather, and Bookmarks starter widgets.
+5. **Extend** explains and optionally configures Homarr Assistant, the community Workshop, and the separate Homarr MCP endpoint.
+6. **Review** tests the selected connections, then saves integrations, apps, widgets, settings, and the exact first board together. If any part fails, the database changes are rolled back and your form stays available to correct.

-If you selected external providers (such as LDAP or OIDC), you'll be prompted to create an admin group.
-This group will be used to synchronize users from your provider to Homarr.
-When a user logs in through the provider, any of their groups that match groups in Homarr will be assigned to the user.
-The name of the group must match exactly the name of the group in the provider.
+Docker discovery reports each configured host separately. Results from reachable hosts remain selectable if another socket
+is unavailable, which is useful for remote Docker, rootless Docker, Synology, and mixed deployments. On Kubernetes or
+bare-metal installations without a Docker socket, enter services manually and use the same integration catalog.

-<img
-  src={imageStartFromScratchStepExternalAdminGroup}
-  alt={"Screenshot form to create external admin group"}
-  width={300}
-/>
+After setup, **Open my board** takes you directly to the configured board. The in-product tour then introduces edit mode,
+responsive layouts, widgets, and search without delaying completion.

-Next, you can configure some basic settings for Homarr. We recommend to leave all settings at default for most users.
-Here you can also disable analytics. Please note that our analytics are completly anonymous and is fully compliant with GDPR and PECR.
-
-<img
-  src={imageStartFromScratchStepServerSettings}
-  alt={"Screenshot of analytics and indexing settings in the onboarding"}
-  width={300}
-/>
-
-### Setting up integrations
-
-After configuring server settings, the onboarding guides you through setting up your integrations.
-
-#### Docker service discovery
-
-If Docker is available (socket mounted), Homarr automatically detects running containers and matches them to known integration types.
-Matching integrations are pre-selected in the integration list, saving you from manually picking each one.
-
-#### URL templating
-
-You can define a base URL template to auto-fill integration URLs in bulk.
-Two modes are supported:
-
- **Subdomain mode** - e.g. `{app}.example.com` where `{app}` is replaced with the integration name
- **Port mode** - e.g. `192.168.1.1:{port}` where `{port}` is replaced with the integration's default port
-
-#### API key helper links
-
-For integrations that require API keys (such as Sonarr, Radarr, SABnzbd, or Seerr), a helper link opens the relevant settings page in the target application so you can quickly copy your key.
-
-#### Creating apps from Docker containers
-
-You can optionally auto-create bookmark apps for all discovered Docker containers, making them immediately available on your board.
-
-:::note
-
-Release providers and Search.ch are configured directly in their widgets instead of the integrations page.
-
-:::
-
-After this step, you finished the onboarding.
-The onboarding can no longer be started again.
-From here you can click on one of the provided links to continue your journey.
-We recommend you to continue with the section [creating your first board on this page](#creating-your-first-board).
-
-<img src={imageStartFromScratchStepFinish} alt={"Screenshot of the finish onboarding process with links"} width={300} />
-
-### Importing a ZIP from version before 1.0.0
-
-This is recommended when you used Homarr before and want to re-import your data.
-It is important that you first migrate correctly using [the list of breaking changes for 1.0](/blog/2024/09/23/version-1.0).
-
-<img src={manageExportOldHomarr} alt="Export from old Homarr" style={{ maxWidth: 500 }} />
-
-**How to export and import data**
-
-1. Navigate to your old Homarr, open your management pages, open the tools submenu and open `Migrate to 1.0`.
-2. Check the contents that you want to export. We recommend you to export all data.
-3. Click on the export data button
-4. Save the ZIP file, that is being downloaded, on your device. If you selected "integrations" or "users", you also get an encryption / decryption key.
-   Copy it and do not loose it!
-5. Go to your new >1.0.0 Homarr instance and start the onboarding. Choose `Import from Homarr before 1.0`
-6. Drag and drop your previously downloaded ZIP archive into the file upload: <br/><img src={manageImportOldHomarrDropzone} style={{ maxWidth: 500 }} />
-7. Next, choose the data that you want to import and how to import it. Since screen sizes were removed in 1.0, we create a new board for every screen size by default. We recommend you to only keep the best layout and adjust it later in 1.0.0 - but you can also import all of them and pick later.<br/><img src={manageImportOldHomarrChooseData} style={{ maxWidth: 500 }} />
-8. If you previously exported integrations or users, you will be asked to decrypt the data safely using your obtained encryption token. Paste into the modal and confirm your action.<br/><img src={manageImportDecryptionToken} style={{ maxWidth: 500 }} />
-9. Next, you can [follow the same setup as when starting from scratch](#starting-from-scratch). After you completed the onboarding, all of your data will be migrated and available.
-
-## Creating your first board
+## Creating another board

 In Homarr, you organize your apps and widgets on boards.
 Boards use fixed-size tiles so the same widget keeps the same proportions on every screen.
 Drag, resize, and section controls are available in edit mode.
-Let's create your first board by navigating here: `Manage` > `Boards` > `New board`:
+Onboarding already created the first board. To create another one, navigate to `Manage` > `Boards` > `New board`:
 ![](./img/manage-create-board-button.png)

 A board must always have a name and can either be public or private.
@@ -233,7 +158,8 @@ The tile snaps to the grid. Equally-sized tiles swap when one is dropped into th
 Every `1 × 1` tile has a logical content size of `200 × 200` pixels.
 Larger tiles use multiples of that fixed unit, with a consistent gap between cells.
 Homarr scales the complete board uniformly, like zooming a page.
-It stops shrinking at 75% and lets you scroll horizontally instead of making text and controls too small.
+The complete canvas always fits the available width without horizontal board scrolling.
+Below 100%, Homarr preserves the widget's readable typography and control density instead of shrinking each widget independently.
 It does not squeeze or reflow the content of individual widgets, so a widget keeps the same design and proportions across screen sizes.

 :::note
@@ -0,0 +1,95 @@
+---
+title: "Docker labels"
+description: "Discover apps, integrations, and widgets from container labels during Homarr onboarding."
+---
+
+# Docker label discovery
+
+During onboarding, Homarr scans running containers on every reachable
+[Docker-compatible host](/docs/integrations/docker). Labels let you provide exact app metadata instead of relying on
+image-name matching. You can review and deselect every result before Homarr creates anything.
+
+A container with valid Homarr labels takes priority over image-based discovery. Containers without valid labels can
+still be suggested from their image and published ports.
+
+## Homarr labels
+
+`homarr.name` and `homarr.href` are required for label discovery. All other labels are optional.
+
+| Label                | Purpose                                                                    |
+| -------------------- | -------------------------------------------------------------------------- |
+| `homarr.name`        | App or integration display name                                            |
+| `homarr.href`        | Address opened by the app and used as the suggested integration address    |
+| `homarr.group`       | Container section that receives the selected app and compatible widget     |
+| `homarr.icon`        | App icon URL                                                               |
+| `homarr.description` | App description                                                            |
+| `homarr.ping`        | Address used for app status checks                                         |
+| `homarr.id`          | Stable source identifier; defaults to the Docker container ID              |
+| `homarr.board`       | Intended board name; see [Board targeting](#board-targeting)               |
+| `homarr.integration` | Homarr integration kind, for example `sonarr`                              |
+| `homarr.widget`      | Homarr widget kind to add when it supports the selected integration        |
+| `homarr.hide`        | Excludes the container when this label is present, regardless of its value |
+
+Unknown integration and widget kinds are ignored. Do not put API keys, passwords, or other secrets in labels. Enter
+credentials in onboarding, where Homarr stores them using its normal encrypted integration-secret flow.
+
+## Compose example
+
+```yaml
+services:
+  sonarr:
+    image: lscr.io/linuxserver/sonarr:latest
+    labels:
+      homarr.name: "Sonarr"
+      homarr.href: "http://server.local:8989"
+      homarr.group: "Media"
+      homarr.icon: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sonarr.svg"
+      homarr.description: "TV library"
+      homarr.ping: "http://server.local:8989"
+      homarr.integration: "sonarr"
+      homarr.widget: "calendar"
+```
+
+Use an address that is reachable where it is needed. A Docker service name can work for server-side integration
+requests, while an app link opened in a browser usually needs a LAN hostname, IP address, or reverse-proxy address.
+Onboarding accepts these self-hosted address formats directly and only requires the field to be non-empty.
+
+## Homepage label fallback
+
+When `homarr.name` is absent, onboarding also understands these Homepage labels:
+
+- `homepage.name`
+- `homepage.href`
+- `homepage.group`
+- `homepage.icon`
+- `homepage.description`
+
+`homepage.name` and `homepage.href` are required for the fallback. Homarr does not combine partial Homarr metadata with
+Homepage metadata: once `homarr.name` is present, use `homarr.*` labels for the remaining fields too.
+
+## What onboarding creates
+
+In **Connect**, label-discovered apps and integrations appear before image-based suggestions. You can import multiple
+services in one pass and edit every suggested address. For image-matched apps, Homarr uses the detected service type
+when building host, subdomain, or reverse-proxy path suggestions.
+
+When setup completes, Homarr rechecks the selected container sources and then:
+
+- creates an app with its name, address, icon, description, and ping address;
+- creates the requested integration and links its app after you provide required credentials;
+- places grouped apps in a board container named by `homarr.group`;
+- places ungrouped apps in the main board area;
+- adds `homarr.widget` only when the widget kind is valid and compatible with the selected integration;
+- keeps image-based discovery available for unlabeled containers.
+
+If a selected container disappears, targets another board, or requests an incompatible widget, setup finishes with a
+warning instead of creating an invalid board item.
+
+## Board targeting
+
+On a fresh installation with one seeded `dashboard` board, one unique selected `homarr.board` value can name that first
+board. Otherwise, the label must match the board selected in onboarding. Services labeled for another board are skipped
+and reported in the completion warning.
+
+Onboarding configures one board at a time. Run normal board management after setup if you want to distribute services
+across several boards.
@@ -160,11 +160,13 @@ They are then available in the app list and can be used as normally added apps.

 ![Apps added from containers](img/add-to-homarr-apps.png)

-### Configuration
+### Container labels

-Currently Homarr supports one label for configuration of the containers:
+`homarr.hide` excludes a container from the Docker Containers widget, tools page, and onboarding discovery whenever the
+label is present.

- **homarr.hide:** If set to any value, the container will be hidden from the Docker Containers widget and tools page.
+During first-run onboarding, Homarr can also discover apps, integrations, groups, and compatible widgets from
+`homarr.*` labels, with Homepage labels as a fallback. See the complete [Docker label reference](/docs/integrations/docker-labels).

 ### Security

@@ -51,6 +51,6 @@ Note that the ping URL only accepts `http://` and `https://` URLs — custom URI

 ## List of apps

-On the apps management page you find all apps that exist in your Homarr instance. You can edit and delete them.
+On the apps management page you find all apps that exist in your Homarr instance. Search by name or URL, open an app directly, or use its row actions to edit and delete it. A filtered search can be cleared without leaving the page.

-![Apps list](./img/app-list.png)
+Any signed-in user can view this list. Creating, editing, and deleting apps requires the corresponding app permission; board permissions are not required.
@@ -8,78 +8,61 @@ tags:

 # Assistant

-Homarr Assistant can answer questions about your Homarr instance and use Homarr tools on your behalf. It follows the
-permissions of the signed-in user and asks for approval before it changes anything.
+Homarr Assistant can answer questions and manage Homarr for you. It uses the signed-in user's permissions and asks for
+approval before making changes.

 ![Homarr Assistant conversation with suggested prompts](/img/assistant/conversation.png)

-## Open the assistant
-
- Select **Assistant** in the user menu.
- Press `Shift + A` from anywhere in Homarr.
- Type a question in `Cmd/Ctrl + K`, then select **Ask Homarr Assistant**.
- Add the **Assistant** widget to a board for a permanent conversation view.
-
-You can minimize a conversation while it works. The activity bar shows its progress and the user menu shows unread
-responses.
-
-## What it can do
-
- Find and update boards, apps, integrations, widgets, and dashboard settings.
- Check downloads, media, Docker containers, service health, and other connected integrations.
- Create formatted notes and Custom Widgets.
- Search the web when OpenRouter web search is enabled.
- Show tool activity, reasoning summaries, usage, time, and cost when the provider reports them.
-
-Use `@` to add an app, board, integration, widget, or tool as context. Use `/` for common prompts. You can also paste or
-attach images and text files when the selected model supports them.
-
-## Configure the assistant
+## Set it up

 Open **Management → Assistant**.

 ![Assistant provider, credentials, and model configuration](/img/assistant/configuration.png)

-1. Select a provider.
-2. Check the API base URL and add an API key if required.
-3. Select **Save provider connection**.
-4. Refresh the model list and choose a model.
-5. Enable the assistant, then select **Save assistant**.
+1. Select a provider and check its API URL.
+2. Enter an API key when required, then save the connection.
+3. Refresh the model list and select a model.
+4. Enable the assistant and save.

-Homarr includes presets for OpenRouter, OpenAI, Claude, Gemini, xAI, Groq, Mistral, DeepSeek, Together AI, Ollama, and
-LM Studio. Use **Custom endpoint** for another OpenAI-compatible Chat Completions service.
-
-The [Homarr provider](../workshop/homarr-provider) does not require an administrator API key. Each user signs in to the
-Community Workshop and receives a separate daily allowance. A shared Workshop daily quota also applies, so requests
-can be rejected after that shared quota is exhausted.
+Choose a provider preset or use **Custom endpoint** with an OpenAI-compatible Chat Completions API. The
+[Homarr provider](../workshop/homarr-provider) is the default and needs no administrator API key. The Homarr team pays
+for a limited number of Assistant uses for each user every day; users sign in to the Community Workshop to use them.

 :::info Local model servers

 Inside a container, `localhost` means the Homarr container. Use the model server's container name, local DNS name, or
-host gateway address instead.
+host gateway address.

 :::

-## Approvals and data
+## Use it

-Read-only tools can run automatically. Changes show an approval card with the exact action before Homarr runs it.
-Normal Homarr permissions still apply.
+- Select **Assistant** in the user menu or press `Shift + A`.
+- Ask from `Cmd/Ctrl + K`.
+- Add the [Assistant widget](../widgets/assistant) to a board.

-API keys and custom headers are encrypted in the Homarr database and are never returned to the browser. Prompts,
-attachments, tool definitions, and tool results are sent to the configured model provider. Check that provider's data
-policy before enabling the assistant.
+The assistant can work with boards, apps, integrations, widgets, Custom Widgets, and connected services. Use `@` to
+add Homarr items as context, `/` for shortcuts, and the paperclip for supported files.

-Conversations are stored per user. Users can edit or retry messages, copy responses, export a conversation as Markdown,
-and delete conversations.
+Each request includes the user's name, current page and board, home board, server time, browser time zone, and a small
+summary of accessible Homarr resources. Live status is fetched only when needed.

-## If setup does not work
+## Permissions and privacy
+
+- Read-only actions can run automatically. Changes require approval.
+- Homarr permissions apply to every tool call and mentioned item.
+- API keys and custom headers are encrypted and never returned to the browser.
+- Conversations are stored per user and can be exported or deleted.
+
+Prompts, attachments, tool definitions, and tool results are sent to the selected model provider. Review that
+provider's privacy policy before enabling the assistant.
+
+## Troubleshooting

 - **No models found:** check the base URL, model discovery path, and API key. You can enter a model ID manually.
- **The assistant is unavailable:** enable it and save the configuration.
- **A model stops during a tool call:** use a model that supports streaming and structured tool calls.
- **A local endpoint cannot be reached:** check container networking and the endpoint's listen address.
+- **Assistant is unavailable:** enable it and save the configuration.
+- **Tool calls stop:** select a model that supports streaming and tool calls.
+- **Local endpoint is unreachable:** check container networking and the server's listen address.

-Homarr exposes its MCP-enabled procedures to external clients through the [MCP server](./mcp). MCP omits
-`customWidget_*` tools for non-admin API keys, while the built-in assistant adds browser actions and optional
-OpenRouter web search. Custom Widget authors can find the full workflow in
-[Agent authoring](./custom-widgets/agent-authoring).
+See [MCP](./mcp) for external AI clients and [Custom Widget agent authoring](./custom-widgets/agent-authoring) for the
+widget authoring workflow.
@@ -53,6 +53,9 @@ Before restoring, Homarr uses **sql.js WASM** to analyze the backup directly in

 Type `I understand` to acknowledge that restoring will replace your current database. This cannot be undone.

+During first-run onboarding, the database is still empty, so the restore preview goes directly to **Restore Database**
+without the extra typed confirmation. After Homarr restarts, onboarding opens the restored default home board.
+
 ### 4. Restore

 The backup ZIP is sent to the server, validated, and applied. After a successful restore:
@@ -20,6 +20,8 @@ You can create as many boards as you want.
 Boards can be restricted to user groups.
 A user may also have a "home board" which they will see at the root path (e.g. my-homarr.com or my-homarr.com/board).
 Other boards can be viewed by direct links (e.g. my-homarr.com/board/smart-home) or via the management pages.
+The management page includes a compact structural preview of each board's Base layout so you can recognize it before
+opening it. Containers include their visible widgets and app icons instead of appearing empty.

 Names of boards must be unique because this will be used in the URL to load the desired board.

@@ -107,7 +109,7 @@ The complete canvas always fits the available width and never adds horizontal bo
 - **Mobile** starts at `0px` and uses three columns on new boards.
 - **Base** is the widest layout and starts at `768px` on new boards.

-Mobile and Base can be renamed and their column counts and rails can be changed, but they cannot be removed. You can add removable custom layouts between their breakpoints.
+Mobile and Base can be renamed and their column counts can be changed, but they cannot be removed. Mobile has no fixed rails; rail configuration is available only on Base and custom layouts. You can add removable custom layouts between their breakpoints.

 Each layout stores independent positions and sizes. Moving or resizing a widget while editing Mobile does not move it in Base or any custom layout. New custom layouts are generated from Base and scaled to their selected column count.

@@ -128,7 +130,7 @@ The total number of columns in the layout. Changing it projects the saved positi

 #### Fixed rails

-Each responsive layout can enable a fixed left rail, a fixed right rail, or both.
+Base and custom responsive layouts can enable a fixed left rail, a fixed right rail, or both. Mobile has no fixed rails.
 Set a rail width to zero to disable it for that layout.
 Choose a width from one to three columns with the three-step slider.
 The preview shows how much space remains for the main canvas.
@@ -13,9 +13,9 @@ Check [the available integrations](/docs/category/integrations) for further info

 ## Create an integration

-To create an integration, you can choose the supported application from the dropdown at the top right:
+To create an integration, choose **New integration** and select the supported application from the searchable grid. The grid groups related services visually and shows which widgets each integration supports.

-![](./img/create-integration-dropdown.png)
+The integrations management page uses a searchable list. Each row shows the integration type and URL, with the actions you have permission to use.

 Next, you'll need to fill out the required fields to configure the integration:

@@ -8,8 +8,7 @@ tags:
 # Search Engines

 Using the search engines, terms can be quickly searched simply by opening the search bar at the top or using the keyboard shortcut `CTRL + K`.
-
-![](./img/search-engines.png)
+The management page provides a searchable list with the shortcut, URL template, source, and available row actions for each engine.

 You can add any search engine that has a search URL that accepts a search term as a parameter.

@@ -17,6 +17,8 @@ import { anchorIntegration } from "@site/docs/integrations/anchor";

 The Anchor Note widget shows a selected note from your Anchor integration. If your note permissions allow it, you can also edit the note title and content directly in Homarr.

+Advanced view always shows the note title and update time alongside the complete formatted document, permission, creation date, and pinned or archived state. Compact title and update-time switches do not hide that information in advanced view.
+
 ### Screenshots

 import anchorNoteWidgetScreenshot from "./img/widget.png";
@@ -14,7 +14,7 @@ import { archiveTeamWarriorWidget } from ".";

 <WidgetHeader widget={archiveTeamWarriorWidget} categories={["Archiving", "Monitoring"]} />

-Use this widget to see what your ArchiveTeam Warrior is preserving without leaving Homarr. The compact view keeps the current project, runner state, job counts, bandwidth, and broadcast message visible. Advanced view adds the complete active-job list and exact update time.
+Use this widget to see what your ArchiveTeam Warrior is preserving without leaving Homarr. The compact view keeps the current project, runner state, job counts, bandwidth, and optional broadcast message visible. Advanced view adds the complete active-job list, job start times, project and bandwidth-session identifiers, session transfer totals, exact update time, and the full broadcast message whenever one is available. A failed refresh keeps the last snapshot visible with a stale-data warning.

 ### Supported integration

@@ -5,7 +5,6 @@ hide_title: true
 ---

 import { AddingWidget } from "@site/src/components/widgets/adding";
-import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { assistantWidget } from ".";

@@ -28,15 +27,8 @@ touch devices. When a board layout does not provide enough height for conversati
 a compact **Open assistant** action instead of squeezing an unusable composer into the card. Increase its height
 in that layout to keep the complete conversation inline.

-### Configuration
-
-<WidgetConfig configuration={assistantWidget.configuration} />
-
-**Current conversation** follows whichever conversation is active in the user-menu panel, `Shift + A`, or
-the command menu. This is the default and keeps every assistant entry point synchronized.
-
-**Pinned conversation** reveals a searchable conversation selector. A pinned widget never changes the
-active conversation silently: select **Open conversation** inside the widget before continuing that thread.
+The widget follows whichever conversation is active in the user-menu panel, `Shift + A`, or the command menu. This
+keeps every assistant entry point synchronized without storing a user's private conversation details in board settings.

 ### Conversation features

@@ -36,7 +36,9 @@ import widgetOverview from "./img/widget-overview.png";
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view shows every missing-subtitle and health summary regardless of compact visibility options, together with the already-fetched Sonarr and Radarr SignalR states and announcement count.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -34,7 +34,7 @@ This widget displays your Beszel alert configurations separated by status (trigg
  ]}
 />

-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -4,6 +4,8 @@ description: "Card grid view of all Beszel-monitored systems with real-time metr
 hide_title: true
 ---

+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -34,6 +36,8 @@ Select a system card to open the complete statistics view, including system, fil
  ]}
 />

+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget

 <AddingWidget />
@@ -4,6 +4,8 @@ description: "Table view of all Beszel-monitored systems with sortable columns a
 hide_title: true
 ---

+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -35,6 +37,8 @@ Select a system row to open the complete statistics view.
  ]}
 />

+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget

 <AddingWidget />
@@ -16,6 +16,7 @@ import { bookmarksWidget } from ".";
 The bookmarks widget allows you to display multiple app links in a single widget.
 You can add links to your favorite applications, websites, or any other resources you want quick access to.
 Its normal view adapts each configured layout to the available width and height: lower-priority hostnames are hidden before names or icons, and larger collections scroll instead of crushing cards.
+Advanced view shows every bookmark as a roomy card with its full title, hostname, icon, and complete description regardless of the compact layout and visibility choices.

 ### Screenshots

@@ -74,7 +74,7 @@ import withoutIntegrations from "./img/without-integrations.png";
 ### Interactions

 - Hover over a marked date to preview its events in a popover.
- The advanced view replaces the month grid with a grouped event list. Use its previous and next controls to change months.
+- The advanced view replaces the month grid with a grouped event list, keeps every event attributed to its source integration, and expands titles, locations, and descriptions. Use its previous and next controls to change months.
 - If one selected integration is unavailable, its warning indicator remains visible while events from healthy integrations continue to load.

 <WidgetInteractionGuide />
@@ -27,7 +27,7 @@ import tokyoClock from "./img/tokyo-12-hour.png";
  <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
 </div>

-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -27,7 +27,11 @@ The Coolify widget displays a compact overview of your Coolify instance. It can
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view opens the Servers, Applications, and Services sections regardless of their compact visibility switches. It identifies each Coolify integration, shows server `is_reachable` and `is_usable` values, and lists applications nested in services when the API provides them. Healthy integrations remain visible if another source fails, with the failed source identified by a warning.
+
+IP addresses remain masked in advanced view until you explicitly use the eye control. Public resource, Coolify dashboard, and log links retain the widget's safe new-tab handling.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -20,6 +20,8 @@ import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns

 <WidgetHeader widget={dnsHoleControlsWidget} categories={["DNS Hole"]} />

+When several DNS integrations are selected, Homarr keeps healthy controls available if one source fails and shows a warning identifying the unavailable integration.
+
 This widget lets permitted users enable, disable, or temporarily pause one or more DNS services. It shares the summary query and cache with DNS Hole Summary. Every selected source stays available in the normal scrollable view, while cards and controls adapt to the widget&apos;s width and height.

 ### Screenshots
@@ -17,6 +17,8 @@ import { dnsHoleSummaryWidget } from ".";

 <WidgetHeader widget={dnsHoleSummaryWidget} categories={["DNS Hole"]} />

+When several DNS integrations are selected, Homarr keeps healthy sources visible if one source fails and shows a warning identifying the unavailable integration.
+
 This widget combines statistics from every selected DNS service, including total queries, blocked queries, and blocklist size. Its data is cached under the same DNS query family as DNS Hole Controls, so placing both widgets on a board does not create a second integration request. When the widget has enough room, it adds a scrollable status row naming each selected source.

 ### Screenshots
@@ -43,12 +43,12 @@ import contextMenuImg from "./img/context-menu.png";
 - **Responsive table** — columns automatically adapt to widget width, hiding less important columns at smaller sizes
 - **Sortable columns** — click any column header to sort ascending/descending
 - **Column customization** — choose which columns to display, then hover a header to reveal its grab handle for reordering or drag its edge to resize it; layouts save automatically per widget
- **Right-click context menu** — pause, resume, delete downloads, or copy download names directly from the context menu
+- **Right-click context menu** — copy download names, or pause, resume, and delete when your account has Interact access and the client supports those actions
 - **Row expansion** — click any row to see full details inline without opening a separate modal
 - **Hover tooltips** — hover a download name to see size, speeds, ETA, ratio, and category; open tooltips close when switching between compact and advanced mode
 - **Global stats bar** — toggle a summary bar showing queue progress, total size, speeds, ratio, and per-state counts
 - **Client filtering** — filter downloads by integration or status using the footer filter panel
- **Global controls** — pause/resume all downloads across all clients from the footer bar
+- **Global controls** — pause/resume downloads from supported clients when your account has Interact access; read-only clients such as slskd do not expose these controls
 - **Status indicators** — color-coded badges show download state at a glance
 - **Speed overview** — total download and upload speeds displayed in the footer

@@ -89,13 +89,13 @@ import contextMenuImg from "./img/context-menu.png";

 ### Interactions

- **Right-click** any download to open a context menu with pause/resume, delete, and copy actions
+- **Right-click** any download to copy its name; pause/resume and delete require Interact access and client support
 - **Click** any row to expand it and see full download details inline
 - **Hover** a download name for a quick stats tooltip
 - **Stats toggle** — show or hide the global stats bar from the footer
- **Pause / Resume** all downloads using the footer controls
+- **Pause / Resume** downloads from supported clients using the footer controls when you have Interact access; slskd remains read-only
 - **Filter** by integration or status using the filter button in the footer
- **Sort** by clicking column headers (with persistent sort direction)
+- **Sort** the current view by clicking column headers to switch direction

 <WidgetInteractionGuide />

@@ -67,7 +67,7 @@ export const downloadsWidget: WidgetDefinition = {
      {
        name: "Hide completed torrent under this threshold (in kiB/s)",
        description:
-          "This will hide completed torrent entries that have a download speed below the specified threshold.",
+          "This will hide completed torrent entries that have an upload speed below the specified threshold.",
        values: "Any number above 0, 0 to disable",
        defaultValue: "0",
      },
@@ -23,6 +23,8 @@ import { glancesIntegration } from "@site/docs/integrations/glances";

 This widget displays information about the health and status of your system(s), including CPU, memory, disk usage, and more.

+Advanced view is a complete health workspace: it shows every available CPU, temperature, memory, GPU, filesystem, update, reboot, and system-information section even when compact visibility switches hide some of them on the board. Proxmox clusters likewise show uptime, CPU, memory, and every node, VM, container, and storage section. Storage-volume filters, units, and permissions remain in effect.
+
 ### Screenshots

 import systemView from "./img/system-view.png";
@@ -33,7 +33,7 @@ import screen from "./img/screen.png";

 <WidgetInteractionGuide />

-Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view displays the complete photo without cropping, groups previous, pause or resume, and next together, and includes every loaded photo in its thumbnail strip.
+Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view displays the complete photo without cropping, groups previous, pause or resume, and next together, and includes every loaded photo in its thumbnail strip. If an Immich refresh fails, the last loaded album stays visible with a stale-data warning.

 ### Adding the widget

@@ -18,6 +18,8 @@ import { sonarrIntegration } from "@site/docs/integrations/sonarr";

 Monitor which movies and episodes are missing from your library, and track what is currently being downloaded. The widget pulls data from Radarr and Sonarr and groups results by type in two tabs.

+Advanced view always shows both Missing and Queued panels side by side when space allows, requests at least 50 items per source, exposes queue status and time remaining, and keeps partial-integration warnings visible. Compact tab visibility and page-size choices continue to shape the board tile.
+
 ### Screenshots

 import widgetMissing from "./img/missing.png";
@@ -19,6 +19,10 @@ import { plexIntegration } from "@site/docs/integrations/plex";

 Provides a list of newly added media or upcoming releases from your media server.

+Releases retain the name and icon of the integration that supplied them. If one integration is unavailable, releases from healthy integrations remain visible and a warning identifies the failed source without exposing connection details. The widget reports an error only when every selected integration fails.
+
+Advanced view displays every release in a roomy poster layout with its complete available metadata, description, tags, and visible source name, regardless of the compact layout and visibility options.
+
 ### Screenshots

 import backdrop from "./img/backdrop.png";
@@ -24,7 +24,7 @@ import { plexIntegration } from "@site/docs/integrations/plex";
 The media server widget shows active sessions across your media servers.
 It shows playback progress, pause state, time remaining, and whether each session is direct play, direct stream, or transcoding audio or video. Location and bitrate can be toggled independently.

-Select a session to inspect its media metadata in an anchored popover. Advanced mode adds search, sorting, and a summary of playing and transcoding sessions while keeping separate integration instances identifiable.
+Select a session to inspect its media metadata in an anchored popover. Advanced mode adds search, sorting, location, bitrate, and a summary of playing and transcoding sessions while keeping separate integration instances identifiable. Compact visibility switches do not hide location or bitrate from the complete advanced session view.
 If one selected server is unavailable, a warning indicator identifies the degraded result while sessions from healthy servers remain usable.
 Sessions without user metadata remain visible and are labeled as an unknown user.

@@ -20,6 +20,7 @@ import { tdarrIntegration } from "@site/docs/integrations/tdarr";

 The media transcoding widget provides you with an overview of your media transcoding status.
 It shows you the current queue, worker status, and statistics about your transcoding jobs.
+Advanced view presents all three panels together. If refreshes fail after data has loaded, Homarr keeps the last useful result visible and marks it as stale.

 ### Screenshots

@@ -20,6 +20,8 @@ import { networkControllerStatusWidget } from ".";

 Shows connected users and connected guest devices on wired or wireless networks.

+Compact view aggregates the configured controllers into the selected Wi-Fi or wired total. Advanced view shows both totals separately for every controller, preserving each integration's name, type, and exact update time while keeping partial-source and stale-data warnings visible.
+
 ### Screenshots

 import wifiCard from "./img/wifi.png";
@@ -36,7 +36,9 @@ import summaryCard from "./img/summary.png";
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+In advanced view, each controller gets its own information matrix showing source, last update, WAN and web status, latency, ping, web uptime, separate Wi-Fi and LAN user and guest counts, and connected VPN users. The compact board view keeps its progressive aggregate layout.
+
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -34,7 +34,9 @@ import notificationsScreenshot from "./img/notifications.png";
  items={[{ integration: ntfyIntegration }, { integration: nextcloudIntegration }, { integration: gotifyIntegration }]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view always shows available notification logos and sources and removes the compact body line limit. External notification links retain the same safe new-tab behavior.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -72,6 +72,10 @@ The widget adapts its layout based on the available space:

 When the widget has enough space, a "last updated" timestamp appears at the bottom showing how recently PatchMon refreshed its data. Narrow layouts use a shortened timestamp such as `5m ago`; wider short layouts can show the full translated text.

+### Advanced view
+
+Advanced view is a complete PatchMon posture view. It always shows the compliance hero, all eight host and package statistics, the full OS distribution with versions, and the last-updated time. Compact visibility switches and OS limits still shape the board tile, but do not hide already-fetched security information in advanced view. Threshold and chart-style choices remain in effect.
+
 ### Supported Integrations

 <WidgetIntegrations
@@ -83,7 +87,7 @@ When the widget has enough space, a "last updated" timestamp appears at the bott
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -35,7 +35,9 @@ GitHub, Docker Hub, GitLab, NPM, Codeberg, GitHub Container Registry, Quay, and
 For GitHub Container Registry, use `owner/package` identifiers such as `homarr-labs/homarr`.
 Full image references such as `ghcr.io/homarr-labs/homarr:latest` are also accepted.

-<WidgetInteractionGuide advancedView={false} />
+Advanced view shows every configured repository even when compact view is limited to highlighted or top releases. Repository names and details remain visible, and selecting a repository still expands its description and links.
+
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -21,7 +21,9 @@ import screenshot from "./img/screenshot.png";

 <img src={screenshot} alt="rss-feed noted-lol" width={128 * 4} />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view keeps the configured feeds and post limit unchanged while showing each fetched post's full description, image, source, relative time, and exact publication timestamp. Right-to-left text and safe external links continue to follow the widget configuration.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -22,6 +22,8 @@ The entity state enables you to display the current state of an entity.
 This works with most entities and enables you display almost any data.
 It is recommended that you transform data on the integration as much as possible since Homarr's capabilities in transformation are very limited.

+Advanced view shows the safe Home Assistant metadata owned by Homarr: the friendly name, entity ID, unit, device class, icon, last-changed time, and last-updated time. Arbitrary attributes remain intentionally excluded.
+
 ### Screenshots

 import sun from "./img/sun.png";
@@ -20,6 +20,8 @@ import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant

 The execute automation widget allows you to trigger an automation with one click.

+Advanced view shows the automation ID, interaction permission, last successful run in the current browser session, and the latest action error together. Session-only history is not presented as Home Assistant history.
+
 ### Screenshots

 import empty from "./img/empty.png";
@@ -18,6 +18,10 @@ import { speedtestTrackerIntegration } from "@site/docs/integrations/speedtest-t
 This widget displays internet speed test results from your [Speedtest Tracker](https://docs.speedtest-tracker.dev/) instance,
 including the latest result, historical averages, and a live chart of the last 12 hours.

+Advanced view renders a source-labeled panel for every healthy integration. Each panel exposes that source's latest test, statistics, speed and ping charts, plus 12-hour, 24-hour, and truthful **Last 30** result ranges regardless of compact visibility switches. Compact mode keeps the responsive aggregate overview and names its healthy sources when multiple integrations are selected.
+
+When multiple Speedtest Tracker integrations are selected, results from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Screenshots

 import screenshot from "./img/screenshot.png";
@@ -16,6 +16,8 @@ import { stockPriceWidget } from ".";
 Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
 The widget prioritizes the symbol, current price, and trend. Company name, change, time range, and a taller chart appear progressively when both widget dimensions can support them.

+In advanced view, the widget always shows the returned symbol and company name, configured range and interval, current and previous close, absolute and percentage change, range minimum and maximum, and the full price-history chart. These values use the same configured Yahoo Finance query as the compact widget; advanced view does not change the symbol, range, or interval.
+
 ### Screenshots

 import apple from "./img/apple.png";
@@ -34,7 +36,7 @@ import nvidia from "./img/nvidia.png";
  <img src={nvidia} alt="stock-price nvidia" width={128 * 2 + 2} height={128 * 2 + 4} />
 </div>

-<WidgetInteractionGuide advancedView={false} />
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -44,7 +44,9 @@ This widget displays filesystem and SMART disk usage for supported server and NA
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view keeps your configured volume filters while showing each integration name, usage percentage, used and total space, free-space percentage, SMART status, available temperature, and the usage background bar regardless of compact display options.
+
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -17,6 +17,8 @@ import { tracearrIntegration } from "@site/docs/integrations/tracearr";

 The Tracearr widget provides a real-time monitoring dashboard for your media server activity. It displays active streams, user statistics, recent watching history, and policy violations.

+When multiple Tracearr integrations are selected, every stream, violation, and activity row keeps its source identity and an integration-scoped key. Data from healthy sources remains visible if another source fails, and a warning identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Sections

 | Section             | Description                                                                                                                            |
@@ -17,6 +17,10 @@ import { traefikIntegration } from "@site/docs/integrations/traefik";

 This widget displays a compact overview of your Traefik instance, including total routers, entry points, protocol-specific router/service/middleware counts, and warning or error totals when Traefik reports them.

+Advanced view shows every protocol and entry point, identifies every healthy Traefik source and version, and labels each resource or failed endpoint with its owning integration. Compact mode keeps the responsive aggregate overview and names each healthy source when multiple integrations are selected.
+
+When multiple Traefik integrations are selected, data from healthy sources remains visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Supported Integrations

 <WidgetIntegrations
@@ -19,6 +19,10 @@ This widget displays the status of the UPS devices reported by a Network UPS Too
 status (online, on battery, charging or low battery), battery charge and estimated runtime, output load, and input and
 output voltage.

+Every device keeps an integration-scoped identity. Advanced view always labels each device with its owning integration, while compact layouts add the source label only when multiple healthy integrations are present.
+
+When multiple UPS integrations are selected, devices from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Layouts

 import screenshotFull from "./img/screenshot.png";
@@ -17,6 +17,10 @@ import { uptimeKumaIntegration } from "@site/docs/integrations/uptime-kuma";

 This widget displays uptime statistics from your Uptime Kuma status page, including a visual uptime ring, average uptime percentage, and per-status monitor counts.

+Advanced view always shows the uptime ring, all status totals, and the complete monitor list with source identity, regardless of compact visibility switches.
+
+When multiple Uptime Kuma integrations are selected, monitors from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Supported Integrations

 <WidgetIntegrations
@@ -8,6 +8,7 @@ import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 import { wudWidget } from ".";
 import { wudIntegration } from "@site/docs/integrations/whats-up-docker";

@@ -26,6 +27,10 @@ This widget shows two stats from your WUD instance: the total number of monitore
  ]}
 />

+<WidgetInteractionGuide />
+
+In advanced view, the widget always shows its title, update ring, monitored-container summary, and the full list of available container updates. The configured horizontal or vertical layout still applies. Visibility options only affect the compact board view. A failed refresh keeps the last WUD snapshot visible with a stale-data warning.
+
 ### Adding the widget

 <AddingWidget />
@@ -12,9 +12,8 @@ import { OpenCollectiveLink } from "@site/src/components/assistant-provider/open

 # Homarr provider

-The Homarr provider gives Workshop users access to the **Homarr model** without an administrator API key. The Homarr
-team selects a capable model based on quality, reliability, and cost, and can change the upstream model without
-changing the user-facing provider. Each user signs in with GitHub and receives a separate daily allowance.
+The Homarr provider gives Community Workshop users access to the **Homarr model** without an administrator API key.
+The Homarr team chooses the upstream model based on quality, reliability, and cost.

 ## Set it up

@@ -26,27 +25,25 @@ changing the user-facing provider. Each user signs in with GitHub and receives a

 ## Daily allowance

- Each user starts with **50 request units per UTC day**.
- Each model request uses one unit. Agent tool loops can make multiple model requests.
- Once Workshop forwards a request, it uses one unit even if the upstream later fails. This prevents failed requests
-  from bypassing the shared cost and abuse limits.
- The allowance resets at 00:00 UTC.
+- Each user gets **50 request units per UTC day**.
+- Each model request uses one unit. A tool loop can use several units.
+- Forwarded requests count even if the model later fails.
+- Allowances reset at 00:00 UTC. A shared daily limit also applies.

-The battery beside the model selector shows the remaining allowance and reset time. The Workshop server enforces the
-limit before it sends a request to OpenRouter.
+The battery beside the model selector shows the remaining allowance and reset time. Workshop enforces all limits on
+its server; changing the browser clock cannot bypass them.

-## Data and cost
+## Privacy

-The Workshop keeps the OpenRouter API key on its server. It does not send that key to Homarr or the browser.
+Workshop keeps the OpenRouter API key on its server. Homarr and the browser never receive it.

-Prompts, attachments, tool definitions, and tool results are sent through OpenRouter to generate a response. The
-Workshop proxy does not retain that content, responses, or per-request telemetry. It stores only the Workshop user,
-UTC day, and counters required to enforce per-user and global daily allowances. Requests require OpenRouter routing
-with zero data retention and data collection disabled. Homarr does not use this content to train language models.
+Prompts, attachments, tools, and tool results pass through Workshop and OpenRouter. Workshop does not retain this
+content or the responses. It stores only the user, UTC day, and counters needed to enforce allowances. OpenRouter is
+configured for zero data retention with data collection disabled. Homarr does not use this content to train models.

 We would rather become millionaires in a more ethical manner.

-The Homarr community pays for these requests. Donations help cover the cost.
+The community pays for these requests. Donations help cover the cost.

 <OpenCollectiveLink />

@@ -1,84 +1,147 @@
-import styles from "../../../../pages/index.module.css";
-import { supportedIntegrations } from "../../../../constants/supported-integrations";
+import React, { useRef } from "react";

-const nodePositions = [
-  styles.dataflowNodeTopLeft,
-  styles.dataflowNodeMiddleLeft,
-  styles.dataflowNodeBottomLeft,
-  styles.dataflowNodeTopRight,
-  styles.dataflowNodeMiddleRight,
-  styles.dataflowNodeBottomRight,
-];
-const cyclingIntegrations = supportedIntegrations.filter((integration) => integration.name !== "Homarr");
+import LeaderLine, { SocketType } from "leader-line-new";

-const paths = [
-  "M145 82 C330 82 330 235 480 260",
-  "M145 260 C300 260 360 260 480 260",
-  "M145 438 C330 438 330 285 480 260",
-  "M480 260 C630 235 630 82 815 82",
-  "M480 260 C600 260 660 260 815 260",
-  "M480 260 C630 285 630 438 815 438",
-];
+export const DataflowVisualizationComponent = () => {
+  const homarrRef = useRef<HTMLImageElement>(null);
+  const sonarrRef = useRef<HTMLImageElement>(null);
+  const lidarrRef = useRef<HTMLImageElement>(null);
+  const radarrRef = useRef<HTMLImageElement>(null);
+  const jellyfinRef = useRef<HTMLImageElement>(null);
+  const plexRef = useRef<HTMLImageElement>(null);
+  const sabnzbdRef = useRef<HTMLImageElement>(null);

-export const DataflowVisualizationComponent = () => (
-  <section className={styles.dataflowSection}>
-    <div className={styles.dataflowHeading}>
-      <h2>
+  return (
+    <div className={"bg-black/[.10] py-20"}>
+      <h2 className={"text-center lg:text-5xl text-3xl font-extrabold mb-24"}>
        No YAML configurations.
        <br />
        Easy and quick to manage integrations.
      </h2>
-      <p>Homarr brings status, controls, and updates together in one dashboard.</p>
-    </div>

-    <div
-      className={styles.dataflowDiagram}
-      role="img"
-      aria-label={`Information flowing both ways between Homarr and rotating examples from ${cyclingIntegrations.length} supported integrations`}
-    >
-      <svg className={styles.dataflowLines} viewBox="0 0 960 520" preserveAspectRatio="none" aria-hidden="true">
-        {paths.map((path) => (
-          <g key={path}>
-            <path className={styles.dataflowLine} d={path} pathLength="1" />
-            <path className={styles.dataflowSignal} d={path} pathLength="1" />
-            <path className={styles.dataflowSignalReverse} d={path} pathLength="1" />
-          </g>
-        ))}
-      </svg>
+      <div className="relative max-w-128 h-80 mx-auto animated-dataflow mx-5">
+        <img
+          ref={homarrRef}
+          className={"absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 aspect-square object-contain"}
+          src={"/img/logo.png"}
+          alt={"Homarr Logo"}
+          width={100}
+          height={50}
+        />

-      {nodePositions.map((position, nodeIndex) => {
-        const cycleStepInSeconds = 1.2 + nodeIndex * 0.13;
-        const phaseOffsetInSeconds = nodeIndex * 2.7;
+        <img
+          ref={radarrRef}
+          className={"absolute left-0 top-0"}
+          src={"https://github.com/walkxcode/dashboard-icons/blob/main/png/radarr.png?raw=true"}
+          alt={"Radarr"}
+          width={50}
+          height={50}
+        />
+        <img
+          ref={sonarrRef}
+          className={"absolute left-0 top-1/2 -translate-y-1/2"}
+          src={"https://github.com/walkxcode/dashboard-icons/blob/main/png/sonarr.png?raw=true"}
+          alt={"Sonarr"}
+          width={50}
+          height={50}
+        />
+        <img
+          ref={lidarrRef}
+          className={"absolute left-0 bottom-0"}
+          src={"https://github.com/walkxcode/dashboard-icons/blob/main/png/lidarr.png?raw=true"}
+          alt={"Lidarr"}
+          width={50}
+          height={50}
+        />

-        return (
-          <div className={`${styles.dataflowNode} ${position}`} key={position}>
-            <div className={styles.dataflowCyclingIcons} aria-hidden="true">
-              {cyclingIntegrations.map((_, integrationIndex) => {
-                const integration =
-                  cyclingIntegrations[(integrationIndex + nodeIndex * 4) % cyclingIntegrations.length];
+        <img
+          ref={jellyfinRef}
+          className={"absolute right-0 top-1/2 -translate-y-1/2"}
+          src={"https://github.com/walkxcode/dashboard-icons/blob/main/png/jellyfin.png?raw=true"}
+          alt={"Jellyfin"}
+          width={50}
+          height={50}
+        />

-                return (
-                  <img
-                    src={integration.iconUrl}
-                    alt=""
-                    width={54}
-                    height={54}
-                    key={integration.name}
-                    style={{
-                      animationDelay: `${-(integrationIndex * cycleStepInSeconds + phaseOffsetInSeconds)}s`,
-                      animationDuration: `${cyclingIntegrations.length * cycleStepInSeconds}s`,
-                    }}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        );
-      })}
+        <img
+          ref={plexRef}
+          className={"absolute right-0 bottom-0"}
+          src={"https://github.com/walkxcode/dashboard-icons/blob/main/png/plex.png?raw=true"}
+          alt={"Plex"}
+          width={50}
+          height={50}
+        />

-      <div className={`${styles.dataflowNode} ${styles.dataflowHub}`}>
-        <img src="/img/logo.png" alt="" width={86} height={86} />
+        <img
+          ref={sabnzbdRef}
+          className={"absolute right-0 top-0"}
+          src={"https://github.com/walkxcode/dashboard-icons/blob/main/png/sabnzbd.png?raw=true"}
+          alt={"Sabnzbd"}
+          width={50}
+          height={50}
+        />
+
+        <LineTree start={sonarrRef} end={homarrRef} startSocket={"right"} endSocket={"left"} />
+        <LineTree start={radarrRef} end={homarrRef} startSocket={"right"} endSocket={"left"} />
+        <LineTree start={lidarrRef} end={homarrRef} startSocket={"right"} endSocket={"left"} />
+        <LineTree start={plexRef} end={homarrRef} startSocket={"left"} endSocket={"right"} x={100} />
+        <LineTree start={jellyfinRef} end={homarrRef} startSocket={"left"} endSocket={"right"} x={100} />
+        <LineTree start={sabnzbdRef} end={homarrRef} startSocket={"left"} endSocket={"right"} x={100} />
      </div>
    </div>
-  </section>
-);
+  );
+};
+
+export const LineTree = ({
+  start,
+  end,
+  startSocket,
+  endSocket,
+  x = 0,
+}: {
+  start: any;
+  end: any;
+  startSocket: SocketType;
+  endSocket: SocketType;
+  x?: number;
+}) => {
+  const line = useRef<LeaderLine | null>(null);
+  let leaderLine: LeaderLine;
+
+  React.useEffect(() => {
+    const drawLine = () => {
+      leaderLine = new LeaderLine(start.current, LeaderLine.pointAnchor(end.current, { x: `${x}%` }), {
+        startSocket: startSocket,
+        endSocket: endSocket,
+        color: "var(--ifm-color-primary)",
+        size: 3,
+        dash: {
+          animation: true,
+        },
+      });
+    };
+    const timer = setInterval(() => {
+      if (start.current) {
+        clearInterval(timer);
+        drawLine();
+      }
+    }, 5);
+    return () => {
+      timer && clearInterval(timer);
+      leaderLine.remove();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    // scroll and resize listeners could be assigned here
+    setTimeout(() => {
+      // skip current even loop and wait
+      // the end of parent's render call
+      if (line.current && end?.current) {
+        (line.current as any).position();
+      }
+    }, 0);
+  });
+
+  return null;
+};
@@ -230,172 +230,6 @@ section {
  font-weight: 700;
 }

-.dataflowSection {
-  margin-bottom: 0;
-  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem);
-  overflow: hidden;
-  background: rgb(0 0 0 / 10%);
-}
-
-.dataflowHeading {
-  max-width: 58rem;
-  margin: 0 auto clamp(2rem, 5vw, 4rem);
-  text-align: center;
-}
-
-.dataflowHeading h2 {
-  margin-bottom: 1rem;
-  font-size: clamp(2rem, 5vw, 4rem);
-  line-height: 1.08;
-  letter-spacing: -0.03em;
-  text-wrap: balance;
-}
-
-.dataflowHeading p {
-  margin: 0 auto;
-  max-width: 42rem;
-  color: color-mix(in srgb, var(--ifm-font-color-base) 76%, transparent);
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  text-wrap: pretty;
-}
-
-.dataflowDiagram {
-  position: relative;
-  width: min(100%, 70rem);
-  aspect-ratio: 960 / 520;
-  margin-inline: auto;
-}
-
-.dataflowLines {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-
-.dataflowLine,
-.dataflowSignal,
-.dataflowSignalReverse {
-  fill: none;
-  stroke-linecap: round;
-}
-
-.dataflowLine {
-  stroke: color-mix(in srgb, var(--ifm-color-primary) 30%, transparent);
-  stroke-width: 3;
-}
-
-.dataflowSignal,
-.dataflowSignalReverse {
-  stroke: var(--ifm-color-primary);
-  stroke-width: 7;
-  stroke-dasharray: 0.035 0.965;
-  animation: dataflow-signal 2.8s linear infinite;
-}
-
-.dataflowSignalReverse {
-  animation-direction: reverse;
-  animation-delay: -1.4s;
-}
-
-.dataflowNode {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  width: clamp(4.5rem, 10vw, 7.5rem);
-  aspect-ratio: 1;
-  padding: clamp(0.6rem, 1.5vw, 1rem);
-  border-radius: 0.875rem;
-  color: var(--ifm-font-color-base);
-  background: var(--ifm-background-surface-color);
-  box-shadow: 0 6px 12px rgb(31 41 55 / 14%);
-  transform: translate(-50%, -50%);
-}
-
-.dataflowNode img {
-  width: clamp(2rem, 4.5vw, 3.4rem);
-  height: clamp(2rem, 4.5vw, 3.4rem);
-  object-fit: contain;
-}
-
-.dataflowCyclingIcons {
-  position: relative;
-  width: clamp(2rem, 4.5vw, 3.4rem);
-  aspect-ratio: 1;
-}
-
-.dataflowCyclingIcons img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  animation: dataflow-icon-cycle linear infinite;
-}
-
-.dataflowNodeTopLeft,
-.dataflowNodeMiddleLeft,
-.dataflowNodeBottomLeft {
-  left: 15%;
-}
-
-.dataflowNodeTopRight,
-.dataflowNodeMiddleRight,
-.dataflowNodeBottomRight {
-  left: 85%;
-}
-
-.dataflowNodeTopLeft,
-.dataflowNodeTopRight {
-  top: 16%;
-}
-
-.dataflowNodeMiddleLeft,
-.dataflowNodeMiddleRight,
-.dataflowHub {
-  top: 50%;
-}
-
-.dataflowNodeBottomLeft,
-.dataflowNodeBottomRight {
-  top: 84%;
-}
-
-.dataflowHub {
-  left: 50%;
-  width: clamp(6rem, 13vw, 9rem);
-}
-
-.dataflowHub img {
-  width: clamp(3rem, 7vw, 5.4rem);
-  height: clamp(3rem, 7vw, 5.4rem);
-}
-
-@keyframes dataflow-signal {
-  to {
-    stroke-dashoffset: -1;
-  }
-}
-
-@keyframes dataflow-icon-cycle {
-  0%,
-  3.7% {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  4.2%,
-  99% {
-    opacity: 0;
-    transform: scale(0.82);
-  }
-}
-
 :global([data-theme="dark"]) .resourceMeterCritical .resourceLabel,
 :global([data-theme="dark"]) .containerRowFailed {
  color: #ffe3e3;
@@ -446,39 +280,8 @@ section {
  }
 }

-@media screen and (max-width: 640px) {
-  .dataflowSection {
-    padding-block: 4rem;
-  }
-
-  .dataflowHeading {
-    margin-bottom: 2rem;
-  }
-
-  .dataflowDiagram {
-    aspect-ratio: 4 / 5;
-  }
-
-  .dataflowNode {
-    width: 4.5rem;
-    padding: 0.6rem;
-  }
-}
-
@media (prefers-reduced-motion: reduce) {
-  .statusDotFailed,
-  .dataflowSignal,
-  .dataflowSignalReverse,
-  .dataflowCyclingIcons img {
+  .statusDotFailed {
    animation: none;
  }
-
-  .dataflowSignal,
-  .dataflowSignalReverse {
-    display: none;
-  }
-
-  .dataflowCyclingIcons img:first-child {
-    opacity: 1;
-  }
 }
@@ -5,9 +5,9 @@ import Layout from "@theme/Layout";
 import HomepageFeatures from "../components/pages/home/features/features";
 import HomepageUserReviews from "../components/pages/home/review-list/review-list";
 import HomeHero from "../components/pages/home/hero/hero";
-import { DataflowVisualizationComponent } from "../components/pages/home/dataflow/dataflow";

 import styles from "./index.module.css";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import { SectionContainer } from "@site/src/components/pages/home/container/section-container";
 import { DragAndDropShowcase } from "@site/src/components/pages/home/drag-and-drop/drag-and-drop-showcase";
 import { AvailableIntegrations } from "@site/src/components/pages/home/integrations/available-integrations";
@@ -32,7 +32,13 @@ export default function Home() {
      <SectionContainer>
        <HomepageFeatures />
      </SectionContainer>
-      <DataflowVisualizationComponent />
+      <BrowserOnly fallback={<span>loading...</span>}>
+        {() => {
+          const DataflowVisualizationComponent =
+            require("../components/pages/home/dataflow/dataflow").DataflowVisualizationComponent;
+          return <DataflowVisualizationComponent />;
+        }}
+      </BrowserOnly>
      <DragAndDropShowcase />
      <AvailableIntegrations />
      <SectionContainer>
@@ -46,6 +46,7 @@ const nextConfig: NextConfig = {
  serverExternalPackages: ["dockerode", "isomorphic-dompurify", "jsdom", "better-sqlite3"],
  experimental: {
    optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
+    preloadEntriesOnStart: false,
    turbopackFileSystemCacheForBuild: true,
    useTypeScriptCli: true,
  },
@@ -48,8 +48,7 @@
    "@homarr/modals": "workspace:^0.1.0",
    "@homarr/modals-collection": "workspace:^0.1.0",
    "@homarr/notifications": "workspace:^0.1.0",
-    "@homarr/old-import": "workspace:^0.1.0",
-    "@homarr/old-schema": "workspace:^0.1.0",
+    "@homarr/onboarding": "workspace:^0.1.0",
    "@homarr/redis": "workspace:^0.1.0",
    "@homarr/server-settings": "workspace:^0.1.0",
    "@homarr/settings": "workspace:^0.1.0",
@@ -69,6 +68,7 @@
    "@mantine/modals": "catalog:",
    "@mantine/tiptap": "catalog:",
    "@modelcontextprotocol/server": "catalog:",
+    "@rexa-developer/tiks": "catalog:",
    "@scalar/api-reference-react": "catalog:",
    "@tabler/icons-react": "catalog:",
    "@tanstack/react-devtools": "catalog:",
@@ -4,9 +4,9 @@ import { Box, Paper, Stack, Text } from "@mantine/core";

 import { useCurrentLayout, useInitialViewportWidth, useLayoutOverride, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { getRepresentativeLayoutWidth } from "@homarr/boards/layout-preview";
 import { useScopedI18n } from "@homarr/translation/client";

-import { getRepresentativeLayoutWidth } from "../_layout-utils";
 import { BoardAdvancedFocusProvider } from "~/components/board/advanced-focus/context";
 import {
  getBoardLaneColumnCount,
@@ -44,13 +44,19 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
    page: async ({ params }: { params: Promise<TParams> }) => {
      const resolvedParams = await params;
      const queryClient = getQueryClient();
-      const session = await auth();
+      const sessionPromise = auth();
+      const boardPromise = getInitialBoard(resolvedParams);
+      const session = await sessionPromise;

-      const board = await getInitialBoard(resolvedParams).catch((error) => {
+      const board = await boardPromise.catch((error) => {
        if (error instanceof TRPCError && error.code === "NOT_FOUND") {
          if (!session) {
            logger.debug("No home board found for anonymous user, redirecting to login");
-            redirect("/auth/login");
+            const requestedBoardName =
+              typeof resolvedParams.name === "string" ? `/boards/${encodeURIComponent(resolvedParams.name)}` : null;
+            redirect(
+              requestedBoardName ? `/auth/login?callbackUrl=${encodeURIComponent(requestedBoardName)}` : "/auth/login",
+            );
          }

          notFound();
@@ -21,6 +21,7 @@ import { IconX } from "@tabler/icons-react";

 import type { UseFormReturnType } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
+import { BoardColorInput } from "@homarr/ui";

 import { SectionCard } from "~/components/manage/section-card";
 import { generateColors } from "../../(content)/_theme";
@@ -44,21 +45,11 @@ export const ColorSettingsContent = ({ form }: Props) => {
      <Grid>
        <Grid.Col span={{ sm: 12, md: 6 }}>
          <Stack gap="xs">
-            <ColorInput
-              label={t("board.field.primaryColor.label")}
-              format="hex"
-              swatches={Object.values(theme.colors).map((color) => color[6])}
-              {...form.getInputProps("primaryColor")}
-            />
+            <BoardColorInput label={t("board.field.primaryColor.label")} {...form.getInputProps("primaryColor")} />
          </Stack>
        </Grid.Col>
        <Grid.Col span={{ sm: 12, md: 6 }}>
-          <ColorInput
-            label={t("board.field.secondaryColor.label")}
-            format="hex"
-            swatches={Object.values(theme.colors).map((color) => color[6])}
-            {...form.getInputProps("secondaryColor")}
-          />
+          <BoardColorInput label={t("board.field.secondaryColor.label")} {...form.getInputProps("secondaryColor")} />
        </Grid.Col>
        <Grid.Col span={12}>
          <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
@@ -4,21 +4,21 @@ import { Badge, Box, Group, Stack, Text, ThemeIcon, Tooltip } from "@mantine/cor
 import { IconLayoutGrid } from "@tabler/icons-react";

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

 import type { Board } from "../../_types";
-import type { BoardLayout } from "../../_layout-utils";
-import { getRepresentativeLayoutWidth, projectBoardLayout } from "../../_layout-utils";
 import classes from "./_layout-preview.module.css";

 interface Props {
  board: Board;
-  layout: BoardLayout;
-  layouts: BoardLayout[];
-  sourceLayout: BoardLayout;
+  layout: BoardPreviewLayout;
+  layouts: BoardPreviewLayout[];
+  sourceLayout: BoardPreviewLayout;
  apps: RouterOutputs["app"]["byIds"];
 }

@@ -222,15 +222,17 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
                    />
                  )}
                </Grid.Col>
-                <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>
+                {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">
@@ -36,6 +36,11 @@ const boardSettingsFormSchema = boardSavePartialSettingsSchema

 export type FormValues = z.infer<typeof boardSettingsFormSchema>;

+const normalizeMobileLayoutGutters = (layouts: readonly FormValues["layouts"][number][]) =>
+  layouts.map((layout) =>
+    layout.role === "mobile" ? { ...layout, leftGutterColumnCount: 0, rightGutterColumnCount: 0 } : layout,
+  );
+
 const PARTIAL_FORM_KEYS = [
  "pageTitle",
  "metaTitle",
@@ -70,7 +75,7 @@ const buildInitialValues = (board: Board): FormValues => ({
  itemRadius: board.itemRadius,
  customCss: board.customCss ?? "",
  disableStatus: board.disableStatus,
-  layouts: board.layouts,
+  layouts: normalizeMobileLayoutGutters(board.layouts),
 });

 interface BoardSettingsFormProps {
@@ -127,7 +132,8 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
    const changed = <TKey extends keyof FormValues>(...fields: TKey[]) =>
      fields.some((field) => values[field] !== defaults[field]);

-    const { layouts, ...partialSettings } = values;
+    const { layouts: submittedLayouts, ...partialSettings } = values;
+    const layouts = normalizeMobileLayoutGutters(submittedLayouts);
    const partialSettingsChanged = changed(...PARTIAL_FORM_KEYS);
    const layoutsChanged = changed("layouts");
    if (!partialSettingsChanged && !layoutsChanged) return values;
@@ -1,111 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
-import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
-import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
-import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
-import { getRepresentativeLayoutWidth, projectBoardLayout } from "./_layout-utils";
-
-const mobile = {
-  id: "mobile",
-  name: "Mobile",
-  columnCount: 3,
-  leftGutterColumnCount: 0,
-  rightGutterColumnCount: 0,
-  breakpoint: 0,
-  role: "mobile" as const,
-};
-const custom = {
-  id: "tablet",
-  name: "Tablet",
-  columnCount: 6,
-  leftGutterColumnCount: 0,
-  rightGutterColumnCount: 0,
-  breakpoint: 480,
-  role: "custom" as const,
-};
-const base = {
-  id: "base",
-  name: "Base",
-  columnCount: 12,
-  leftGutterColumnCount: 0,
-  rightGutterColumnCount: 0,
-  breakpoint: 768,
-  role: "base" as const,
-};
-
-describe("layout representative widths", () => {
-  test("uses a phone width, activation midpoint, and desktop minimum", () => {
-    const layouts = [mobile, custom, base];
-    expect(getRepresentativeLayoutWidth(mobile, layouts)).toBe(390);
-    expect(getRepresentativeLayoutWidth(custom, layouts)).toBe(624);
-    expect(getRepresentativeLayoutWidth(base, layouts)).toBe(1280);
-  });
-});
-
-describe("projectBoardLayout", () => {
-  test("returns exact saved positions without recursively re-projecting the active layout", () => {
-    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
-    const container = new ContainerSectionMockBuilder({ id: "container" })
-      .addLayout({ layoutId: mobile.id, parentSectionId: rootSection.id, width: 3, height: 2 })
-      .build();
-    const board = new BoardMockBuilder().addLayout(mobile).addSections([rootSection, container]).build();
-
-    expect(projectBoardLayout(board, mobile, mobile)).toEqual([
-      expect.objectContaining({ id: container.id, sectionId: rootSection.id, width: 3, height: 2 }),
-    ]);
-  });
-
-  test("uses production ordering and sizing for items and containers", () => {
-    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
-    const container = new ContainerSectionMockBuilder({ id: "container" })
-      .addLayout({ layoutId: base.id, parentSectionId: rootSection.id, width: 6, height: 3, xOffset: 6, yOffset: 0 })
-      .build();
-    const rootItem = new ItemMockBuilder({ id: "root-item", kind: "clock" })
-      .addLayout({ layoutId: base.id, sectionId: rootSection.id, width: 5, height: 2, xOffset: 0, yOffset: 0 })
-      .build();
-    const nestedItem = new ItemMockBuilder({ id: "nested-item", kind: "clock" })
-      .addLayout({ layoutId: base.id, sectionId: container.id, width: 4, height: 1, xOffset: 0, yOffset: 0 })
-      .build();
-    const board = new BoardMockBuilder()
-      .addLayout(mobile)
-      .addSections([rootSection, container])
-      .addItems([rootItem, nestedItem])
-      .build();
-
-    const projected = projectBoardLayout(board, base, mobile);
-
-    expect(projected.find((element) => element.id === rootItem.id)).toMatchObject({
-      type: "item",
-      width: 3,
-      height: 2,
-      xOffset: 0,
-      yOffset: 0,
-      sectionId: rootSection.id,
-    });
-    expect(projected.find((element) => element.id === container.id)).toMatchObject({
-      type: "section",
-      width: 3,
-      xOffset: 0,
-      yOffset: 2,
-      sectionId: rootSection.id,
-    });
-    expect(projected.find((element) => element.id === nestedItem.id)).toMatchObject({
-      type: "item",
-      width: 3,
-      sectionId: container.id,
-    });
-  });
-
-  test("ignores missing saved positions and supports empty boards", () => {
-    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
-    const itemWithoutBasePosition = new ItemMockBuilder({ id: "missing", kind: "clock" }).build();
-    const board = new BoardMockBuilder()
-      .addLayout(mobile)
-      .addSection(rootSection)
-      .addItem(itemWithoutBasePosition)
-      .build();
-
-    expect(projectBoardLayout(board, base, mobile)).toEqual([]);
-  });
-});
@@ -0,0 +1,107 @@
+import { createElement, act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { BoardProviders } from "./_providers";
+
+const mocks = vi.hoisted(() => ({
+  searchParams: new URLSearchParams(),
+  layoutOverrideId: undefined as string | null | undefined,
+  initialOpen: undefined as boolean | undefined,
+}));
+
+vi.mock("next/navigation", () => ({
+  useSearchParams: () => mocks.searchParams,
+}));
+
+vi.mock("@homarr/boards/context", async () => {
+  const React = await import("react");
+
+  return {
+    BoardProvider: ({ children, layoutOverrideId }: { children: React.ReactNode; layoutOverrideId: string | null }) => {
+      mocks.layoutOverrideId = layoutOverrideId;
+      return React.createElement(React.Fragment, null, children);
+    },
+  };
+});
+
+vi.mock("@homarr/boards/edit-mode", async () => {
+  const React = await import("react");
+
+  return {
+    EditModeProvider: ({ children, initialOpen }: { children: React.ReactNode; initialOpen: boolean }) => {
+      mocks.initialOpen = initialOpen;
+      return React.createElement(React.Fragment, null, children);
+    },
+  };
+});
+
+describe("board providers", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+    mocks.layoutOverrideId = undefined;
+    mocks.initialOpen = undefined;
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  test.each([
+    ["base", "base"],
+    ["custom", "custom"],
+  ])("uses the requested %s layout for an explicit edit request", (_name, requestedLayoutId) => {
+    mocks.searchParams = new URLSearchParams(`layout=${requestedLayoutId}&edit=true&returnTo=settings`);
+
+    act(() => {
+      root.render(
+        createElement(
+          BoardProviders,
+          {
+            initialBoard: { layouts: [{ id: "mobile" }, { id: "custom" }, { id: "base" }] } as never,
+            initialLayoutId: "mobile",
+            initialViewportWidth: 390,
+            canModify: true,
+          },
+          createElement("span", null, "board"),
+        ),
+      );
+    });
+
+    expect(mocks.layoutOverrideId).toBe(requestedLayoutId);
+    expect(mocks.initialOpen).toBe(true);
+  });
+
+  test.each([
+    ["without edit mode", "layout=base", true],
+    ["for an unknown layout", "layout=unknown&edit=true", true],
+    ["without modify access", "layout=base&edit=true", false],
+  ])("keeps viewport layout selection %s", (_name, query, canModify) => {
+    mocks.searchParams = new URLSearchParams(query);
+
+    act(() => {
+      root.render(
+        createElement(
+          BoardProviders,
+          {
+            initialBoard: { layouts: [{ id: "mobile" }, { id: "base" }] } as never,
+            initialLayoutId: "mobile",
+            initialViewportWidth: 390,
+            canModify,
+          },
+          createElement("span", null, "board"),
+        ),
+      );
+    });
+
+    expect(mocks.layoutOverrideId).toBeNull();
+    expect(mocks.initialOpen).toBe(false);
+  });
+});
@@ -2,7 +2,6 @@

 import type { PropsWithChildren } from "react";
 import { useSearchParams } from "next/navigation";
-import { useMediaQuery } from "@mantine/hooks";

 import { BoardProvider } from "@homarr/boards/context";
 import { EditModeProvider } from "@homarr/boards/edit-mode";
@@ -24,11 +23,10 @@ export const BoardProviders = ({
  canModify,
 }: PropsWithChildren<Props>) => {
  const searchParams = useSearchParams();
-  const isDesktop = useMediaQuery("(min-width: 64em)");
  const requestedLayoutId = searchParams.get("layout");
  const isRequestedLayoutValid = initialBoard.layouts.some((layout) => layout.id === requestedLayoutId);
  const isLayoutEditRequest = canModify && searchParams.get("edit") === "true" && isRequestedLayoutValid;
-  const layoutOverrideId = isLayoutEditRequest && isDesktop ? requestedLayoutId : null;
+  const layoutOverrideId = isLayoutEditRequest ? requestedLayoutId : null;

  return (
    <BoardProvider
@@ -1,12 +0,0 @@
-import type { PropsWithChildren } from "react";
-import { Card } from "@mantine/core";
-
-interface InitStepCardProps {
-  withBorder?: boolean;
-}
-
-export const InitStepCard = ({ children, withBorder = true }: PropsWithChildren<InitStepCardProps>) => (
-  <Card w="100%" withBorder={withBorder}>
-    {children}
-  </Card>
-);
@@ -1,2 +0,0 @@
-export const onboardingContentWidth = 64 * 16;
-export const onboardingMaxWidth = "90vw";
@@ -1,23 +0,0 @@
-"use client";
-
-import { Button } from "@mantine/core";
-
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useI18n } from "@homarr/translation/client";
-
-export const BackToStart = () => {
-  const t = useI18n();
-  const { mutateAsync, isPending } = clientApi.onboard.previousStep.useMutation();
-
-  const handleBackToStartAsync = async () => {
-    await mutateAsync();
-    await revalidatePathActionAsync("/init");
-  };
-
-  return (
-    <Button loading={isPending} variant="subtle" color="gray" fullWidth onClick={handleBackToStartAsync}>
-      {t("init.backToStart")}
-    </Button>
-  );
-};
@@ -1,75 +0,0 @@
-import type { MantineColor } from "@mantine/core";
-import { Button, Stack, Text } from "@mantine/core";
-import { IconBook2, IconLayoutDashboard, IconMailForward } from "@tabler/icons-react";
-
-import { isProviderEnabled } from "@homarr/auth/server";
-import { getMantineColor } from "@homarr/common";
-import { createDocumentationLink } from "@homarr/definitions";
-import { getScopedI18n } from "@homarr/translation/server";
-import { Link } from "@homarr/ui";
-import type { TablerIcon } from "@homarr/ui";
-
-import { InitStepCard } from "../../_components/init-step-card";
-
-export const InitFinish = async () => {
-  const tFinish = await getScopedI18n("init.step.finish");
-
-  return (
-    <InitStepCard>
-      <Stack>
-        <Text>{tFinish("description")}</Text>
-
-        <InternalLinkButton href="/auth/login?callbackUrl=/" iconProps={{ icon: IconLayoutDashboard, color: "blue" }}>
-          {tFinish("action.goToBoard", { name: "dashboard" })}
-        </InternalLinkButton>
-
-        {isProviderEnabled("credentials") && (
-          <InternalLinkButton
-            href="/auth/login?callbackUrl=/manage/users/invites"
-            iconProps={{ icon: IconMailForward, color: "pink" }}
-          >
-            {tFinish("action.inviteUser")}
-          </InternalLinkButton>
-        )}
-
-        <ExternalLinkButton
-          href={createDocumentationLink("/docs/getting-started/after-the-installation")}
-          iconProps={{ icon: IconBook2, color: "yellow" }}
-        >
-          {tFinish("action.docs")}
-        </ExternalLinkButton>
-      </Stack>
-    </InitStepCard>
-  );
-};
-
-interface LinkButtonProps {
-  href: string;
-  children: string;
-  iconProps: IconProps;
-}
-
-interface IconProps {
-  icon: TablerIcon;
-  color: MantineColor;
-}
-
-const Icon = ({ icon: IcomComponent, color }: IconProps) => {
-  return <IcomComponent color={getMantineColor(color, 6)} size={16} stroke={1.5} />;
-};
-
-const InternalLinkButton = ({ href, children, iconProps }: LinkButtonProps) => {
-  return (
-    <Button variant="default" component={Link} href={href} leftSection={<Icon {...iconProps} />}>
-      {children}
-    </Button>
-  );
-};
-
-const ExternalLinkButton = ({ href, children, iconProps }: LinkButtonProps) => {
-  return (
-    <Button variant="default" component="a" href={href} leftSection={<Icon {...iconProps} />}>
-      {children}
-    </Button>
-  );
-};
@@ -1,55 +0,0 @@
-"use client";
-
-import { Button, Stack, TextInput } from "@mantine/core";
-import { IconArrowRight } from "@tabler/icons-react";
-import type { z } from "zod/v4";
-
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { useI18n } from "@homarr/translation/client";
-import { groupCreateSchema } from "@homarr/validation/group";
-
-import { InitStepCard } from "../../_components/init-step-card";
-
-export const InitGroup = () => {
-  const t = useI18n();
-  const { mutateAsync } = clientApi.group.createInitialExternalGroup.useMutation({
-    async onSuccess() {
-      await revalidatePathActionAsync("/init");
-    },
-  });
-  const form = useZodForm(groupCreateSchema, {
-    initialValues: {
-      name: "",
-    },
-  });
-
-  const handleSubmitAsync = async (values: z.infer<typeof groupCreateSchema>) => {
-    await mutateAsync(values, {
-      onError(error) {
-        if (error.data?.code === "CONFLICT") {
-          form.setErrors({ name: t("common.zod.errors.custom.groupNameTaken") });
-        }
-      },
-    });
-  };
-
-  return (
-    <InitStepCard>
-      <form onSubmit={form.onSubmit(handleSubmitAsync)}>
-        <Stack>
-          <TextInput
-            label={t("init.step.group.form.name.label")}
-            description={t("init.step.group.form.name.description")}
-            withAsterisk
-            {...form.getInputProps("name")}
-          />
-          <Button type="submit" loading={form.submitting} rightSection={<IconArrowRight size={16} stroke={1.5} />}>
-            {t("common.action.continue")}
-          </Button>
-        </Stack>
-      </form>
-    </InitStepCard>
-  );
-};
@@ -1,43 +0,0 @@
-import { ActionIcon, Button, Group, Text } from "@mantine/core";
-import type { FileWithPath } from "@mantine/dropzone";
-import { IconPencil } from "@tabler/icons-react";
-
-import { formatBytes } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import { InitStepCard } from "../../_components/init-step-card";
-
-interface FileInfoCardProps {
-  file: FileWithPath;
-  onRemove: () => void;
-}
-
-export const FileInfoCard = ({ file, onRemove }: FileInfoCardProps) => {
-  const tFileInfo = useScopedI18n("init.step.import.fileInfo");
-  return (
-    <InitStepCard withBorder={false}>
-      <Group justify="space-between" align="center" wrap="nowrap">
-        <Group>
-          <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>
-            {file.name}
-          </Text>
-          <Text visibleFrom="md" c="gray.6" size="sm">
-            {formatBytes(file.size)}
-          </Text>
-        </Group>
-        <Button
-          variant="subtle"
-          color="gray"
-          rightSection={<IconPencil size={16} stroke={1.5} />}
-          onClick={onRemove}
-          visibleFrom="md"
-        >
-          {tFileInfo("action.change")}
-        </Button>
-        <ActionIcon size="sm" variant="subtle" color="gray" hiddenFrom="md" onClick={onRemove}>
-          <IconPencil size={16} stroke={1.5} />
-        </ActionIcon>
-      </Group>
-    </InitStepCard>
-  );
-};
@@ -1,63 +0,0 @@
-import { Group, rem, Text } from "@mantine/core";
-import type { FileWithPath } from "@mantine/dropzone";
-import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
-import { IconFileZip, IconUpload, IconX } from "@tabler/icons-react";
-
-import "@mantine/dropzone/styles.css";
-
-import { useScopedI18n } from "@homarr/translation/client";
-
-interface ImportDropZoneProps {
-  loading: boolean;
-  updateFile: (file: FileWithPath) => void;
-}
-
-export const ImportDropZone = ({ loading, updateFile }: ImportDropZoneProps) => {
-  const tDropzone = useScopedI18n("init.step.import.dropzone");
-  return (
-    <Dropzone
-      onDrop={(files) => {
-        const firstFile = files[0];
-        if (!firstFile) return;
-
-        updateFile(firstFile);
-      }}
-      acceptColor="blue.6"
-      rejectColor="red.6"
-      accept={[MIME_TYPES.zip, "application/x-zip-compressed"]}
-      loading={loading}
-      multiple={false}
-      maxSize={1024 * 1024 * 1024 * 64} // 64 MB
-      onReject={(rejections) => {
-        console.error(
-          "Rejected files",
-          rejections.map(
-            (rejection) =>
-              `File: ${rejection.file.name} size=${rejection.file.size} fileType=${rejection.file.type}\n - ${rejection.errors.map((error) => error.message).join("\n - ")}`,
-          ),
-        );
-      }}
-    >
-      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: "none" }}>
-        <Dropzone.Accept>
-          <IconUpload style={{ width: rem(52), height: rem(52), color: "var(--mantine-color-blue-6)" }} stroke={1.5} />
-        </Dropzone.Accept>
-        <Dropzone.Reject>
-          <IconX style={{ width: rem(52), height: rem(52), color: "var(--mantine-color-red-6)" }} stroke={1.5} />
-        </Dropzone.Reject>
-        <Dropzone.Idle>
-          <IconFileZip style={{ width: rem(52), height: rem(52), color: "var(--mantine-color-dimmed)" }} stroke={1.5} />
-        </Dropzone.Idle>
-
-        <div>
-          <Text size="xl" inline>
-            {tDropzone("title")}
-          </Text>
-          <Text size="sm" c="dimmed" inline mt={7}>
-            {tDropzone("description")}
-          </Text>
-        </div>
-      </Group>
-    </Dropzone>
-  );
-};
@@ -1,54 +0,0 @@
-"use client";
-
-import { startTransition, useState } from "react";
-import { Stack } from "@mantine/core";
-import type { FileWithPath } from "@mantine/dropzone";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { InitialOldmarrImport } from "@homarr/old-import/components";
-
-import { InitStepCard } from "../../_components/init-step-card";
-import { FileInfoCard } from "./file-info-card";
-import { ImportDropZone } from "./import-dropzone";
-
-export const InitImport = () => {
-  const [file, setFile] = useState<FileWithPath | null>(null);
-  const { isPending, mutate } = clientApi.import.analyseInitialOldmarrImport.useMutation();
-  const [analyseResult, setAnalyseResult] = useState<RouterOutputs["import"]["analyseInitialOldmarrImport"] | null>(
-    null,
-  );
-
-  if (!file) {
-    return (
-      <InitStepCard>
-        <ImportDropZone
-          loading={isPending}
-          updateFile={(file) => {
-            const formData = new FormData();
-            formData.append("file", file);
-
-            mutate(formData, {
-              onSuccess: (result) => {
-                startTransition(() => {
-                  setAnalyseResult(result);
-                  setFile(file);
-                });
-              },
-              onError: (error) => {
-                console.error(error);
-              },
-            });
-          }}
-        />
-      </InitStepCard>
-    );
-  }
-
-  return (
-    <Stack w="100%" mb="sm">
-      <FileInfoCard file={file} onRemove={() => setFile(null)} />
-      {analyseResult !== null && <InitialOldmarrImport file={file} analyseResult={analyseResult} />}
-    </Stack>
-  );
-};
@@ -1,209 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import {
-  Avatar,
-  Badge,
-  Card,
-  Collapse,
-  Group,
-  Loader,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  ThemeIcon,
-  UnstyledButton,
-} from "@mantine/core";
-import { IconBrandDocker, IconCheck, IconChevronDown } from "@tabler/icons-react";
-
-import type { IntegrationKind } from "@homarr/definitions";
-import { getIntegrationName } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
-import { IntegrationAvatar } from "@homarr/ui";
-
-export interface DiscoveredIntegration {
-  containerId: string;
-  containerName: string;
-  kind: IntegrationKind;
-  suggestedUrl: string;
-  publishedPort: number | null;
-  iconUrl: string | null;
-}
-
-export interface DiscoveredApp {
-  containerId: string;
-  containerName: string;
-  suggestedUrl: string;
-  publishedPort: number | null;
-  iconUrl: string | null;
-}
-
-interface DockerDiscoveryIndicatorProps {
-  integrations: DiscoveredIntegration[];
-  apps: DiscoveredApp[];
-  selectedAppIds: Set<string>;
-  onToggleApp: (containerId: string) => void;
-  isLoading: boolean;
-}
-
-const APP_CARD_HEIGHT = 80;
-
-export const DockerDiscoveryIndicator = ({
-  integrations,
-  apps,
-  selectedAppIds,
-  onToggleApp,
-  isLoading,
-}: DockerDiscoveryIndicatorProps) => {
-  const hasApps = apps.length > 0;
-  const [expanded, setExpanded] = useState(false);
-
-  const expandedOnce = useRef(false);
-  useEffect(() => {
-    if ((hasApps || integrations.length > 0) && !expandedOnce.current) {
-      expandedOnce.current = true;
-      setExpanded(true);
-    }
-  }, [hasApps, integrations.length]);
-
-  const t = useScopedI18n("init.step.integrations.docker");
-  const totalCount = integrations.length + apps.length;
-
-  if (!isLoading && totalCount === 0) return null;
-
-  const selectedAppCount = apps.filter((app) => selectedAppIds.has(app.containerId)).length;
-
-  if (isLoading) {
-    return (
-      <Paper
-        withBorder
-        p="sm"
-        radius="md"
-        style={{
-          borderColor: "var(--mantine-color-blue-4)",
-          background: "var(--mantine-color-blue-light)",
-        }}
-      >
-        <Group gap="sm" wrap="nowrap">
-          <ThemeIcon variant="light" color="blue" size="lg" radius="md">
-            <IconBrandDocker size={20} />
-          </ThemeIcon>
-          <Stack gap={0} style={{ flex: 1 }}>
-            <Text size="sm" fw={600}>
-              {t("scanning")}
-            </Text>
-            <Text size="xs" c="dimmed">
-              {t("scanningDescription")}
-            </Text>
-          </Stack>
-          <Loader size="sm" color="blue" type="dots" />
-        </Group>
-      </Paper>
-    );
-  }
-
-  return (
-    <Paper
-      withBorder
-      p="sm"
-      radius="md"
-      style={{
-        borderColor: "var(--mantine-color-blue-4)",
-        background: "var(--mantine-color-blue-light)",
-      }}
-    >
-      <UnstyledButton onClick={() => setExpanded((prev) => !prev)} w="100%">
-        <Group justify="space-between" wrap="nowrap">
-          <Group gap="sm" wrap="nowrap">
-            <ThemeIcon variant="light" color="blue" size="lg" radius="md">
-              <IconBrandDocker size={20} />
-            </ThemeIcon>
-            <Stack gap={0}>
-              <Text size="sm" fw={600}>
-                {t("detected", { count: String(totalCount) })}
-              </Text>
-              <Text size="xs" c="dimmed">
-                {t("detectedBreakdown", {
-                  integrations: String(integrations.length),
-                  apps: String(apps.length),
-                })}
-              </Text>
-            </Stack>
-          </Group>
-          <IconChevronDown
-            size={16}
-            color="var(--mantine-color-dimmed)"
-            style={{
-              transform: expanded ? "rotate(180deg)" : undefined,
-              transition: "transform 200ms ease",
-            }}
-          />
-        </Group>
-      </UnstyledButton>
-
-      <Collapse expanded={expanded}>
-        <Stack gap="xs" mt="sm">
-          {integrations.length > 0 && (
-            <Stack gap={4}>
-              {integrations.map((integration) => (
-                <Group key={integration.containerId} gap="xs" wrap="nowrap" py={2}>
-                  <IntegrationAvatar kind={integration.kind} size="xs" />
-                  <Text size="xs" fw={500} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>
-                    {integration.containerName}
-                  </Text>
-                  <Badge size="xs" variant="light" color="blue">
-                    {getIntegrationName(integration.kind)}
-                  </Badge>
-                </Group>
-              ))}
-            </Stack>
-          )}
-
-          {hasApps && (
-            <Stack gap="xs">
-              <Text size="xs" fw={500}>
-                {t("appSectionLabel", { count: String(selectedAppCount) })}
-              </Text>
-              <ScrollArea.Autosize mah="30vh">
-                <SimpleGrid cols={{ base: 3, xs: 4, sm: 5 }} spacing="xs">
-                  {apps.map((app) => {
-                    const isSelected = selectedAppIds.has(app.containerId);
-                    return (
-                      <Card
-                        key={app.containerId}
-                        h={APP_CARD_HEIGHT}
-                        p="xs"
-                        withBorder
-                        style={{
-                          cursor: "pointer",
-                          borderColor: isSelected ? "var(--mantine-color-blue-6)" : undefined,
-                          borderWidth: isSelected ? 2 : undefined,
-                          opacity: isSelected ? 1 : 0.6,
-                        }}
-                        onClick={() => onToggleApp(app.containerId)}
-                      >
-                        <Stack justify="space-between" h="100%" gap={4} align="center">
-                          <Group justify="space-between" w="100%" wrap="nowrap">
-                            <Text size="xs" fw={500} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>
-                              {app.containerName}
-                            </Text>
-                            {isSelected && <IconCheck size={14} color="var(--mantine-color-blue-6)" />}
-                          </Group>
-                          <Avatar size="sm" radius="sm" src={app.iconUrl} styles={{ image: { objectFit: "contain" } }}>
-                            {app.containerName.at(0)?.toUpperCase()}
-                          </Avatar>
-                        </Stack>
-                      </Card>
-                    );
-                  })}
-                </SimpleGrid>
-              </ScrollArea.Autosize>
-            </Stack>
-          )}
-        </Stack>
-      </Collapse>
-    </Paper>
-  );
-};
@@ -1,483 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import {
-  ActionIcon,
-  Alert,
-  Avatar,
-  Button,
-  Card,
-  Center,
-  Collapse,
-  Group,
-  Loader,
-  Paper,
-  Progress,
-  SegmentedControl,
-  SimpleGrid,
-  Stack,
-  Text,
-  TextInput,
-  ThemeIcon,
-  Tooltip,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import {
-  IconAlertTriangle,
-  IconArrowRight,
-  IconBrandDocker,
-  IconCheck,
-  IconChevronDown,
-  IconSettings,
-} from "@tabler/icons-react";
-
-import { clientApi } from "@homarr/api/client";
-import type { IntegrationKind, UrlTemplateMode } from "@homarr/definitions";
-import { buildAppUrl, buildIntegrationUrl, getIntegrationName } from "@homarr/definitions";
-import { showErrorNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
-import { IntegrationAvatar } from "@homarr/ui";
-
-import { NewIntegrationForm } from "~/app/[locale]/manage/integrations/new/_integration-new-form";
-import { IntegrationMultiSelectGrid } from "~/components/integration/integration-multi-select-grid";
-import { InitStepCard } from "../../_components/init-step-card";
-
-type Phase = "select" | "configure" | "done";
-
-interface IntegrationDraft {
-  kind: IntegrationKind;
-  initialUrl: string;
-  initialName?: string;
-  dockerPort?: number | null;
-  source: "manual" | "docker";
-}
-
-export const InitIntegrations = () => {
-  const [phase, setPhase] = useState<Phase>("select");
-  const [drafts, setDrafts] = useState<Map<IntegrationKind, IntegrationDraft>>(new Map());
-  const [selectedKinds, setSelectedKinds] = useState<IntegrationKind[]>([]);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [baseHost, setBaseHost] = useState("");
-  const [urlMode, setUrlMode] = useState<UrlTemplateMode>("subdomain");
-  const t = useScopedI18n("init.step.integrations");
-  const router = useRouter();
-
-  const { mutateAsync: setupIntegrations } = clientApi.onboard.setupIntegrations.useMutation();
-  const { mutateAsync: createApps } = clientApi.onboard.createAppsFromDiscovery.useMutation();
-
-  const { data: dockerData, isPending: isDockerLoading } = clientApi.onboard.discoverDockerServices.useQuery(
-    undefined,
-    {
-      retry: false,
-      refetchOnWindowFocus: false,
-    },
-  );
-
-  const dockerIntegrations = dockerData?.status === "success" ? dockerData.integrations : [];
-  const dockerApps = dockerData?.status === "success" ? dockerData.apps : [];
-  const totalDetected = dockerIntegrations.length + dockerApps.length;
-
-  const detectedKinds = useMemo(() => new Set(dockerIntegrations.map((i) => i.kind)), [dockerIntegrations]);
-
-  const [selectedAppIds, setSelectedAppIds] = useState<Set<string>>(new Set());
-  const [appsExpanded, setAppsExpanded] = useState(false);
-
-  const dockerApplied = useRef(false);
-  useEffect(() => {
-    if (dockerData?.status !== "success" || dockerApplied.current) return;
-    dockerApplied.current = true;
-
-    const newDrafts = new Map(drafts);
-    const newKinds = new Set(selectedKinds);
-
-    for (const item of dockerData.integrations) {
-      if (!newDrafts.has(item.kind)) {
-        newDrafts.set(item.kind, {
-          kind: item.kind,
-          initialUrl: item.suggestedUrl,
-          initialName: item.containerName,
-          dockerPort: item.publishedPort,
-          source: "docker",
-        });
-      }
-      newKinds.add(item.kind);
-    }
-
-    setDrafts(newDrafts);
-    setSelectedKinds(Array.from(newKinds));
-    setSelectedAppIds(new Set(dockerData.apps.map((app) => app.containerId)));
-    if (dockerData.apps.length > 0) {
-      setAppsExpanded(true);
-    }
-  }, [dockerData]);
-
-  const handleSelectionChange = useCallback((kinds: IntegrationKind[]) => {
-    setSelectedKinds(kinds);
-  }, []);
-
-  const handleToggleApp = useCallback((containerId: string) => {
-    setSelectedAppIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(containerId)) {
-        next.delete(containerId);
-      } else {
-        next.add(containerId);
-      }
-      return next;
-    });
-  }, []);
-
-  const handleContinueToConfig = () => {
-    const newDrafts = new Map(drafts);
-    for (const kind of selectedKinds) {
-      const existing = newDrafts.get(kind);
-      if (baseHost) {
-        newDrafts.set(kind, {
-          kind,
-          initialUrl: buildIntegrationUrl(kind, baseHost, urlMode, existing?.dockerPort ?? undefined),
-          initialName: existing?.initialName,
-          dockerPort: existing?.dockerPort,
-          source: existing?.source ?? "manual",
-        });
-      } else if (!existing) {
-        newDrafts.set(kind, { kind, initialUrl: "", source: "manual" });
-      }
-    }
-    setDrafts(newDrafts);
-    setCurrentIndex(0);
-    setPhase("configure");
-  };
-
-  const finishSetupAsync = async () => {
-    setPhase("done");
-    try {
-      const appsToCreate = dockerApps.filter((app) => selectedAppIds.has(app.containerId));
-      if (appsToCreate.length > 0) {
-        await createApps(
-          appsToCreate.map((app) => {
-            const href = baseHost
-              ? buildAppUrl(app.containerName, baseHost, urlMode, app.publishedPort ?? undefined)
-              : app.suggestedUrl;
-            return {
-              name: app.containerName,
-              href: href || null,
-              iconUrl: app.iconUrl,
-            };
-          }),
-        );
-      }
-      await setupIntegrations();
-      router.refresh();
-    } catch {
-      showErrorNotification({
-        title: t("configure.error.title"),
-        message: t("configure.error.message"),
-      });
-      setPhase("select");
-    }
-  };
-
-  const advanceOrFinish = () => {
-    if (currentIndex + 1 >= selectedKinds.length) {
-      void finishSetupAsync();
-    } else {
-      setCurrentIndex((i) => i + 1);
-    }
-  };
-
-  const backToSelect = () => {
-    setPhase("select");
-    setCurrentIndex(0);
-  };
-
-  if (phase === "done") {
-    return (
-      <InitStepCard>
-        <Center py="xl">
-          <Stack align="center" gap="md">
-            <Loader size="lg" />
-            <Text>{t("configure.finishing")}</Text>
-          </Stack>
-        </Center>
-      </InitStepCard>
-    );
-  }
-
-  if (phase === "configure") {
-    return (
-      <ConfigurePhase
-        selectedKinds={selectedKinds}
-        currentIndex={currentIndex}
-        drafts={drafts}
-        baseHost={baseHost}
-        setBaseHost={setBaseHost}
-        urlMode={urlMode}
-        setUrlMode={setUrlMode}
-        onSuccess={advanceOrFinish}
-        onCancel={backToSelect}
-        onSkip={advanceOrFinish}
-      />
-    );
-  }
-
-  const selectedAppCount = dockerApps.filter((app) => selectedAppIds.has(app.containerId)).length;
-
-  return (
-    <InitStepCard>
-      <Stack>
-        <Text>{t("description")}</Text>
-
-        <Alert variant="outline" color="orange" icon={<IconAlertTriangle />} title={t("urlTemplate.label")}>
-          <Stack gap="xs">
-            <Text size="sm" fw={500}>
-              {t("urlTemplate.warning")}
-            </Text>
-            <Group gap="sm" grow>
-              <TextInput
-                placeholder={t("urlTemplate.placeholder")}
-                value={baseHost}
-                onChange={(e) => setBaseHost(e.currentTarget.value)}
-                data-autofocus
-              />
-              <SegmentedControl
-                value={urlMode}
-                onChange={(value) => setUrlMode(value as UrlTemplateMode)}
-                data={[
-                  { label: t("urlTemplate.mode.subdomain"), value: "subdomain" },
-                  { label: t("urlTemplate.mode.hostPort"), value: "hostPort" },
-                ]}
-                style={{ flex: "0 0 auto" }}
-              />
-            </Group>
-            {baseHost && (
-              <Text size="xs" c="dimmed">
-                {t("urlTemplate.preview", { example: buildIntegrationUrl("sonarr", baseHost, urlMode) })}
-              </Text>
-            )}
-          </Stack>
-        </Alert>
-
-        {isDockerLoading && (
-          <Paper withBorder p="sm" radius="md">
-            <Group gap="sm" wrap="nowrap">
-              <ThemeIcon variant="light" color="blue" size="lg" radius="md">
-                <IconBrandDocker size={20} />
-              </ThemeIcon>
-              <Text size="sm" fw={500}>
-                {t("docker.scanning")}
-              </Text>
-              <Loader size="sm" color="blue" type="dots" />
-            </Group>
-          </Paper>
-        )}
-
-        {!isDockerLoading && totalDetected > 0 && (
-          <Paper withBorder p="sm" radius="md" style={{ borderColor: "var(--mantine-color-teal-4)" }}>
-            <Group gap="sm" wrap="nowrap">
-              <ThemeIcon variant="light" color="teal" size="lg" radius="md">
-                <IconBrandDocker size={20} />
-              </ThemeIcon>
-              <Text size="sm">
-                {t("docker.summary", {
-                  apps: String(totalDetected),
-                  integrations: String(dockerIntegrations.length),
-                })}
-              </Text>
-            </Group>
-          </Paper>
-        )}
-
-        <IntegrationMultiSelectGrid
-          selectedKinds={selectedKinds}
-          onSelectionChange={handleSelectionChange}
-          detectedKinds={detectedKinds}
-          onboarding
-        />
-
-        {dockerApps.length > 0 && (
-          <Paper withBorder p="sm" radius="md">
-            <Stack gap="xs">
-              <Group
-                justify="space-between"
-                wrap="nowrap"
-                style={{ cursor: "pointer" }}
-                onClick={() => setAppsExpanded((prev) => !prev)}
-              >
-                <Text size="sm" fw={500}>
-                  {t("docker.appSectionLabel", { count: String(selectedAppCount) })}
-                </Text>
-                <IconChevronDown
-                  size={16}
-                  color="var(--mantine-color-dimmed)"
-                  style={{
-                    transform: appsExpanded ? "rotate(180deg)" : undefined,
-                    transition: "transform 200ms ease",
-                  }}
-                />
-              </Group>
-              <Collapse expanded={appsExpanded}>
-                <SimpleGrid cols={{ base: 3, xs: 4, sm: 5 }} spacing="xs">
-                  {dockerApps.map((app) => {
-                    const isSelected = selectedAppIds.has(app.containerId);
-                    return (
-                      <Card
-                        key={app.containerId}
-                        h={80}
-                        p="xs"
-                        withBorder
-                        style={{
-                          cursor: "pointer",
-                          borderColor: isSelected ? "var(--mantine-color-blue-6)" : undefined,
-                          borderWidth: isSelected ? 2 : undefined,
-                          opacity: isSelected ? 1 : 0.6,
-                        }}
-                        onClick={() => handleToggleApp(app.containerId)}
-                      >
-                        <Stack justify="space-between" h="100%" gap={4} align="center">
-                          <Group justify="space-between" w="100%" wrap="nowrap">
-                            <Text size="xs" fw={500} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>
-                              {app.containerName}
-                            </Text>
-                            {isSelected && <IconCheck size={14} color="var(--mantine-color-blue-6)" />}
-                          </Group>
-                          <Avatar size="sm" radius="sm" src={app.iconUrl} styles={{ image: { objectFit: "contain" } }}>
-                            {app.containerName.at(0)?.toUpperCase()}
-                          </Avatar>
-                        </Stack>
-                      </Card>
-                    );
-                  })}
-                </SimpleGrid>
-              </Collapse>
-            </Stack>
-          </Paper>
-        )}
-
-        <Group justify="space-between">
-          <Button variant="subtle" onClick={() => void finishSetupAsync()}>
-            {t("action.skip")}
-          </Button>
-          <Button
-            onClick={handleContinueToConfig}
-            disabled={selectedKinds.length === 0 || undefined}
-            rightSection={<IconArrowRight size={16} stroke={1.5} />}
-            suppressHydrationWarning
-          >
-            {t("action.continue")} {selectedKinds.length > 0 && `(${selectedKinds.length})`}
-          </Button>
-        </Group>
-      </Stack>
-    </InitStepCard>
-  );
-};
-
-interface ConfigurePhaseProps {
-  selectedKinds: IntegrationKind[];
-  currentIndex: number;
-  drafts: Map<IntegrationKind, IntegrationDraft>;
-  baseHost: string;
-  setBaseHost: (value: string) => void;
-  urlMode: UrlTemplateMode;
-  setUrlMode: (value: UrlTemplateMode) => void;
-  onSuccess: () => void;
-  onCancel: () => void;
-  onSkip: () => void;
-}
-
-const ConfigurePhase = ({
-  selectedKinds,
-  currentIndex,
-  drafts,
-  baseHost,
-  setBaseHost,
-  urlMode,
-  setUrlMode,
-  onSuccess,
-  onCancel,
-  onSkip,
-}: ConfigurePhaseProps) => {
-  const t = useScopedI18n("init.step.integrations");
-  const [helpersOpen, { toggle: toggleHelpers }] = useDisclosure(false);
-
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- currentIndex is always within bounds of selectedKinds
-  const currentKind = selectedKinds[currentIndex]!;
-  const draft = drafts.get(currentKind);
-  const progress = ((currentIndex + 1) / selectedKinds.length) * 100;
-  const computedUrl = baseHost
-    ? buildIntegrationUrl(currentKind, baseHost, urlMode, draft?.dockerPort ?? undefined)
-    : draft?.initialUrl;
-
-  return (
-    <InitStepCard>
-      <Stack>
-        <Group justify="space-between" align="center">
-          <Group gap="xs">
-            <IntegrationAvatar kind={currentKind} size="sm" />
-            <Text fw={500}>{getIntegrationName(currentKind)}</Text>
-          </Group>
-          <Tooltip label={t("configure.helpers.tooltip")}>
-            <ActionIcon variant={helpersOpen ? "light" : "subtle"} color="gray" onClick={toggleHelpers}>
-              <IconSettings size={18} stroke={1.5} />
-            </ActionIcon>
-          </Tooltip>
-        </Group>
-
-        <Stack gap={4}>
-          <Progress value={progress} size="sm" />
-          <Text size="xs" c="dimmed" ta="center">
-            {t("configure.progress", { current: String(currentIndex + 1), total: String(selectedKinds.length) })}
-          </Text>
-        </Stack>
-
-        <Collapse expanded={helpersOpen}>
-          <Stack
-            gap="xs"
-            p="xs"
-            style={{ background: "var(--mantine-color-default-hover)", borderRadius: "var(--mantine-radius-sm)" }}
-          >
-            <Text size="xs" c="dimmed">
-              {t("configure.helpers.description")}
-            </Text>
-            <Group gap="sm" grow>
-              <TextInput
-                size="xs"
-                placeholder={t("urlTemplate.placeholder")}
-                value={baseHost}
-                onChange={(e) => setBaseHost(e.currentTarget.value)}
-              />
-              <SegmentedControl
-                size="xs"
-                value={urlMode}
-                onChange={(value) => setUrlMode(value as UrlTemplateMode)}
-                data={[
-                  { label: t("urlTemplate.mode.subdomain"), value: "subdomain" },
-                  { label: t("urlTemplate.mode.hostPort"), value: "hostPort" },
-                ]}
-                style={{ flex: "0 0 auto" }}
-              />
-            </Group>
-            {baseHost && (
-              <Text size="xs" c="dimmed">
-                {t("urlTemplate.preview", {
-                  example: buildIntegrationUrl(currentKind, baseHost, urlMode, draft?.dockerPort ?? undefined),
-                })}
-              </Text>
-            )}
-          </Stack>
-        </Collapse>
-
-        <NewIntegrationForm
-          key={currentKind}
-          kind={currentKind}
-          initialUrl={computedUrl}
-          initialName={draft?.initialName}
-          onSuccess={onSuccess}
-          onCancel={onCancel}
-          onSkip={onSkip}
-          isOnboarding
-        />
-      </Stack>
-    </InitStepCard>
-  );
-};
@@ -1,129 +0,0 @@
-"use client";
-
-import { Button, Group, Stack, Switch, Text } from "@mantine/core";
-import { IconArrowRight } from "@tabler/icons-react";
-import type { z } from "zod/v4";
-
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import type { CheckboxProps } from "@homarr/form/types";
-import { defaultServerSettings } from "@homarr/server-settings";
-import type { TranslationObject } from "@homarr/translation";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { settingsInitSchema } from "@homarr/validation/settings";
-
-import { InitStepCard } from "../../_components/init-step-card";
-
-export const InitSettings = () => {
-  const tSection = useScopedI18n("management.page.settings.section");
-  const t = useI18n();
-  const { mutateAsync } = clientApi.serverSettings.initSettings.useMutation({
-    async onSuccess() {
-      await revalidatePathActionAsync("/init");
-    },
-  });
-  const form = useZodForm(settingsInitSchema, { initialValues: defaultServerSettings });
-
-  const handleSubmitAsync = async (values: z.infer<typeof settingsInitSchema>) => {
-    await mutateAsync(values);
-  };
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmitAsync)}>
-      <Stack w="100%">
-        <InitStepCard>
-          <Stack gap="sm">
-            <Text fw={500}>{tSection("analytics.title")}</Text>
-
-            <Stack gap="xs">
-              <AnalyticsRow kind="general" {...form.getInputProps("analytics.enableGeneral", { type: "checkbox" })} />
-            </Stack>
-          </Stack>
-        </InitStepCard>
-        <InitStepCard>
-          <Stack gap="sm">
-            <Text fw={500}>{tSection("crawlingAndIndexing.title")}</Text>
-
-            <Stack gap="xs">
-              <CrawlingRow
-                kind="noIndex"
-                {...form.getInputProps("crawlingAndIndexing.noIndex", { type: "checkbox" })}
-              />
-              <CrawlingRow
-                kind="noFollow"
-                {...form.getInputProps("crawlingAndIndexing.noFollow", { type: "checkbox" })}
-              />
-              <CrawlingRow
-                kind="noTranslate"
-                {...form.getInputProps("crawlingAndIndexing.noTranslate", { type: "checkbox" })}
-              />
-              <CrawlingRow
-                kind="noSiteLinksSearchBox"
-                {...form.getInputProps("crawlingAndIndexing.noSiteLinksSearchBox", { type: "checkbox" })}
-              />
-            </Stack>
-          </Stack>
-        </InitStepCard>
-
-        <Button type="submit" loading={form.submitting} rightSection={<IconArrowRight size={16} stroke={1.5} />}>
-          {t("common.action.continue")}
-        </Button>
-      </Stack>
-    </form>
-  );
-};
-
-interface AnalyticsRowProps {
-  kind: Exclude<keyof TranslationObject["management"]["page"]["settings"]["section"]["analytics"], "title">;
-  disabled?: boolean;
-}
-
-const AnalyticsRow = ({ kind, ...props }: AnalyticsRowProps & CheckboxProps) => {
-  const tSection = useI18n("management.page.settings.section");
-
-  return (
-    <SettingRow title={tSection(`analytics.${kind}.title`)} text={tSection(`analytics.${kind}.text`)} {...props} />
-  );
-};
-
-interface CrawlingRowProps {
-  kind: Exclude<
-    keyof TranslationObject["management"]["page"]["settings"]["section"]["crawlingAndIndexing"],
-    "title" | "warning"
-  >;
-}
-
-const CrawlingRow = ({ kind, ...inputProps }: CrawlingRowProps & CheckboxProps) => {
-  const tSection = useI18n("management.page.settings.section");
-
-  return (
-    <SettingRow
-      title={tSection(`crawlingAndIndexing.${kind}.title`)}
-      text={tSection(`crawlingAndIndexing.${kind}.text`)}
-      {...inputProps}
-    />
-  );
-};
-
-const SettingRow = ({
-  title,
-  text,
-  disabled,
-  ...inputProps
-}: { title: string; text: string; disabled?: boolean } & CheckboxProps) => {
-  return (
-    <Group wrap="nowrap" align="center">
-      <Stack gap={0} style={{ flex: 1 }}>
-        <Text size="sm" fw={500}>
-          {title}
-        </Text>
-        <Text size="xs" c="gray.5">
-          {text}
-        </Text>
-      </Stack>
-
-      <Switch disabled={disabled} {...inputProps} />
-    </Group>
-  );
-};
@@ -1,37 +0,0 @@
-import { Stack, Text } from "@mantine/core";
-import { IconFileImport, IconPlayerPlay } from "@tabler/icons-react";
-
-import { getMantineColor } from "@homarr/common";
-import { dbEnv } from "@homarr/core/infrastructure/db/env";
-import { getScopedI18n } from "@homarr/translation/server";
-
-import { InitStepCard } from "../../_components/init-step-card";
-import { InitSqliteRestore } from "./sqlite-restore";
-import { InitStartButton } from "./next-button";
-
-export const InitStart = async () => {
-  const tStart = await getScopedI18n("init.step.start");
-  const isSqlite = dbEnv.DRIVER === "better-sqlite3";
-
-  return (
-    <InitStepCard>
-      <Stack>
-        <Text>{tStart("description")}</Text>
-
-        <InitStartButton
-          preferredStep={undefined}
-          icon={<IconPlayerPlay color={getMantineColor("green", 6)} size={16} stroke={1.5} />}
-        >
-          {tStart("action.scratch")}
-        </InitStartButton>
-        <InitStartButton
-          preferredStep="import"
-          icon={<IconFileImport color={getMantineColor("cyan", 6)} size={16} stroke={1.5} />}
-        >
-          {tStart("action.importOldmarr")}
-        </InitStartButton>
-        {isSqlite && <InitSqliteRestore />}
-      </Stack>
-    </InitStepCard>
-  );
-};
@@ -1,28 +0,0 @@
-"use client";
-
-import type { PropsWithChildren, ReactNode } from "react";
-import { Button } from "@mantine/core";
-
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { OnboardingStep } from "@homarr/definitions";
-
-interface InitStartButtonProps {
-  icon: ReactNode;
-  preferredStep: OnboardingStep | undefined;
-}
-
-export const InitStartButton = ({ preferredStep, icon, children }: PropsWithChildren<InitStartButtonProps>) => {
-  const { mutateAsync } = clientApi.onboard.nextStep.useMutation();
-
-  const handleClickAsync = async () => {
-    await mutateAsync({ preferredStep });
-    await revalidatePathActionAsync("/init");
-  };
-
-  return (
-    <Button onClick={handleClickAsync} variant="default" leftSection={icon}>
-      {children}
-    </Button>
-  );
-};
@@ -1,39 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, Stack, Text } from "@mantine/core";
-import { IconDatabaseImport } from "@tabler/icons-react";
-
-import { getMantineColor } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import { DatabaseRestoreFlow } from "~/components/backup";
-
-export const InitSqliteRestore = () => {
-  const t = useScopedI18n("init.step.start.action");
-  const [expanded, setExpanded] = useState(false);
-
-  if (expanded) {
-    return (
-      <Stack gap="sm">
-        <Button variant="subtle" size="xs" onClick={() => setExpanded(false)}>
-          {t("backToOptions")}
-        </Button>
-        <Text size="sm" c="dimmed">
-          {t("restoreSqliteDescription")}
-        </Text>
-        <DatabaseRestoreFlow variant="standalone" />
-      </Stack>
-    );
-  }
-
-  return (
-    <Button
-      onClick={() => setExpanded(true)}
-      variant="default"
-      leftSection={<IconDatabaseImport color={getMantineColor("orange", 6)} size={16} stroke={1.5} />}
-    >
-      {t("restoreSqlite")}
-    </Button>
-  );
-};
@@ -1,75 +0,0 @@
-"use client";
-
-import { Button, Stack, TextInput } from "@mantine/core";
-import type { z } from "zod/v4";
-
-import { clientApi } from "@homarr/api/client";
-import { signIn } from "@homarr/auth/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { UserCreatePasswordFields } from "@homarr/forms-collection";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
-import { userInitSchema } from "@homarr/validation/user";
-
-export const InitUserForm = () => {
-  const t = useScopedI18n("user");
-  const tUser = useScopedI18n("init.step.user");
-  const { mutateAsync, isPending } = clientApi.user.initUser.useMutation();
-  const form = useZodForm(userInitSchema, {
-    initialValues: {
-      username: "",
-      password: "",
-      confirmPassword: "",
-    },
-  });
-
-  const handleSubmitAsync = async (values: FormType) => {
-    await mutateAsync(values, {
-      onSuccess() {
-        showSuccessNotification({
-          title: tUser("notification.success.title"),
-          message: tUser("notification.success.message"),
-        });
-
-        void signIn("credentials", {
-          name: values.username,
-          password: values.password,
-          redirect: false,
-        }).then(async () => {
-          await revalidatePathActionAsync("/init");
-        });
-      },
-      onError: (error) => {
-        showErrorNotification({
-          title: tUser("notification.error.title"),
-          message: error.message,
-        });
-      },
-    });
-  };
-
-  return (
-    <Stack gap="xl">
-      <form
-        onSubmit={form.onSubmit(
-          (values) => void handleSubmitAsync(values),
-          (err) => console.log(err),
-        )}
-      >
-        <Stack gap="lg">
-          <TextInput label={t("field.username.label")} {...form.getInputProps("username")} />
-          <UserCreatePasswordFields
-            passwordInputProps={form.getInputProps("password")}
-            confirmPasswordInputProps={form.getInputProps("confirmPassword")}
-          />
-          <Button type="submit" fullWidth loading={isPending}>
-            {t("action.create")}
-          </Button>
-        </Stack>
-      </form>
-    </Stack>
-  );
-};
-
-type FormType = z.infer<typeof userInitSchema>;
@@ -1,10 +0,0 @@
-import { InitStepCard } from "../../_components/init-step-card";
-import { InitUserForm } from "./init-user-form";
-
-export const InitUser = () => {
-  return (
-    <InitStepCard>
-      <InitUserForm />
-    </InitStepCard>
-  );
-};
@@ -1,66 +1,78 @@
-import type { JSX } from "react";
-import { Box, Center, Stack, Text, Title } from "@mantine/core";
+import { headers } from "next/headers";

-import type { MaybePromise } from "@homarr/common/types";
-import { db } from "@homarr/db";
-import type { OnboardingStep } from "@homarr/definitions";
-import { getScopedI18n } from "@homarr/translation/server";
+import { getOnboardingClaimTokenFromCookieHeader, isOnboardingClaimValidAsync } from "@homarr/api/onboarding-claim";
+import { normalizeOnboardingStep } from "@homarr/api/onboarding-step";
+import { auth } from "@homarr/auth/next";
+import { isProviderEnabled } from "@homarr/auth/server";
+import { extractBaseUrlFromHeaders } from "@homarr/common";
+import { dbEnv } from "@homarr/core/infrastructure/db/env";
+import { db, eq } from "@homarr/db";
+import { groups } from "@homarr/db/schema";
+import { everyoneGroup } from "@homarr/definitions";
+import { env as dockerEnv } from "@homarr/docker/env";
+import { OnboardingStudio } from "@homarr/onboarding";
+import { resolveHomarrUrlConfig } from "@homarr/workshop/schema";

-import { CurrentColorSchemeCombobox } from "~/components/color-scheme/current-color-scheme-combobox";
-import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
-import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
-import { onboardingContentWidth, onboardingMaxWidth } from "./_constants";
-import { BackToStart } from "./_steps/back";
-import { InitFinish } from "./_steps/finish/init-finish";
-import { InitGroup } from "./_steps/group/init-group";
-import { InitImport } from "./_steps/import/init-import";
-import { InitIntegrations } from "./_steps/integrations/init-integrations";
-import { InitSettings } from "./_steps/settings/init-settings";
-import { InitStart } from "./_steps/start/init-start";
-import { InitUser } from "./_steps/user/init-user";
-
-const stepComponents: Record<OnboardingStep, null | (() => MaybePromise<JSX.Element>)> = {
-  start: InitStart,
-  import: InitImport,
-  user: InitUser,
-  group: InitGroup,
-  settings: InitSettings,
-  integrations: InitIntegrations,
-  finish: InitFinish,
-};
-
-const getCurrentOnboardingStepAsync = async () => {
-  const value = await db.query.onboarding.findFirst();
-  if (!value) return { current: "start" as const, previous: null };
-
-  return { current: value.step, previous: value.previousStep };
-};
+import { DatabaseRestoreFlow } from "~/components/backup";
+import { env } from "~/env";
+import { getPackageVersion } from "~/versions/package-reader";
+import { AssistantConfiguration } from "../manage/assistant/_components/assistant-configuration";

 export default async function InitPage() {
-  const t = await getScopedI18n("init.step");
-  const currentStep = await getCurrentOnboardingStepAsync();
-
-  const CurrentComponent = stepComponents[currentStep.current];
+  const [state, session, requestHeaders, firstUser] = await Promise.all([
+    db.query.onboarding.findFirst(),
+    auth(),
+    headers(),
+    db.query.users.findFirst({ columns: { id: true } }),
+  ]);
+  const canConfigurePrivileged = session?.user.permissions.includes("admin") ?? false;
+  const onboardingClaim = getOnboardingClaimTokenFromCookieHeader(requestHeaders.get("cookie"));
+  const canReadSetupContext =
+    canConfigurePrivileged || (!firstUser && (await isOnboardingClaimValidAsync(db, onboardingClaim)));
+  const [defaultGroup, availableBoards] = canReadSetupContext
+    ? await Promise.all([
+        db.query.groups.findFirst({
+          where: eq(groups.name, everyoneGroup),
+          columns: { homeBoardId: true },
+        }),
+        db.query.boards.findMany({ columns: { id: true, name: true, primaryColor: true, secondaryColor: true } }),
+      ])
+    : [undefined, []];
+  const homeBoardId = defaultGroup?.homeBoardId;
+  const homeBoard = availableBoards.find((board) => board.id === homeBoardId);
+  const initialBoard = homeBoard ?? (availableBoards.length === 1 ? availableBoards[0] : null);
+  const currentStep = normalizeOnboardingStep(state?.step);
+  const databaseDriver =
+    dbEnv.DRIVER === "better-sqlite3" ? "sqlite" : dbEnv.DRIVER === "mysql2" ? "mysql" : "postgresql";
+  const { workshopApiUrl, workshopWebUrl } = canReadSetupContext
+    ? resolveHomarrUrlConfig({
+        homarrWebsiteUrl: env.HOMARR_WEBSITE_URL,
+        workshopApiUrl: env.WORKSHOP_API_URL,
+        workshopWebUrl: env.WORKSHOP_WEB_URL,
+      })
+    : { workshopApiUrl: "", workshopWebUrl: "" };
+  const baseUrl = extractBaseUrlFromHeaders(requestHeaders);

  return (
-    <Box mih="100dvh">
-      <Center>
-        <Stack align="center" mt="xl" w={onboardingContentWidth} maw={onboardingMaxWidth}>
-          <HomarrLogoWithTitle size="lg" />
-          <Stack gap={6} align="center">
-            <Title order={3} fw={400} ta="center">
-              {t(`${currentStep.current}.title`)}
-            </Title>
-            <Text size="sm" c="gray.5" ta="center">
-              {t(`${currentStep.current}.subtitle`)}
-            </Text>
-          </Stack>
-          <CurrentLanguageCombobox width="100%" />
-          <CurrentColorSchemeCombobox w="100%" />
-          {CurrentComponent && <CurrentComponent />}
-          {currentStep.previous === "start" && <BackToStart />}
-        </Stack>
-      </Center>
-    </Box>
+    <OnboardingStudio
+      environment={{
+        version: getPackageVersion(),
+        currentStep,
+        databaseDriver,
+        externalAuthEnabled: isProviderEnabled("ldap") || isProviderEnabled("oidc"),
+        dockerConfigured: canReadSetupContext && dockerEnv.ENABLE_DOCKER,
+        kubernetesConfigured: canReadSetupContext && dockerEnv.ENABLE_KUBERNETES,
+        workshopApiUrl,
+        workshopUrl: workshopWebUrl,
+        serverOrigin: baseUrl,
+        mcpEndpoint: `${baseUrl}/api/mcp`,
+        canConfigurePrivileged,
+        hasUsers: Boolean(firstUser),
+        initialBoard: initialBoard ?? null,
+        availableBoards: availableBoards.map(({ id, name }) => ({ id, name })),
+      }}
+      sqliteRestore={databaseDriver === "sqlite" ? <DatabaseRestoreFlow variant="standalone" /> : undefined}
+      assistantConfiguration={canConfigurePrivileged ? <AssistantConfiguration /> : undefined}
+    />
  );
 }
@@ -5,6 +5,7 @@ import "@gfazioli/mantine-onboarding-tour/styles.css";
 import "@homarr/notifications/styles.css";
 import "@homarr/spotlight/styles.css";
 import "@homarr/ui/styles.css";
+import "flag-icons/css/flag-icons.min.css";
 import "mantine-datatable/styles.css";
 import "~/styles/color-scheme.scss";
 import "~/styles/scroll-area.scss";
@@ -173,8 +174,12 @@ export default async function Layout(props: {
    >
      <head>
        <meta name="homarr-website-url" content={publicUrls.homarrWebsiteUrl} />
-        <meta name="homarr-workshop-api-url" content={publicUrls.workshopApiUrl} />
-        <meta name="homarr-workshop-web-url" content={publicUrls.workshopWebUrl} />
+        {session ? (
+          <>
+            <meta name="homarr-workshop-api-url" content={publicUrls.workshopApiUrl} />
+            <meta name="homarr-workshop-web-url" content={publicUrls.workshopWebUrl} />
+          </>
+        ) : null}
        <SearchEngineOptimization />
        <CrowdinLiveTranslation locale={locale} />
      </head>
@@ -21,26 +21,4 @@

 .scrollContainer {
  height: 100%;
-  transform: rotateZ(10deg);
-}
-
-@keyframes scrolling {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-50.8%);
-  }
-}
-
-.scrollAnimationContainer {
-  animation: scrolling;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .scrollAnimationContainer {
-    animation: none !important;
-  }
 }
@@ -1,20 +1,10 @@
-import { Box, Grid, GridCol, Group, Image, Stack, Title } from "@mantine/core";
+import { Box, Group, Image, Stack, Title } from "@mantine/core";

-import { splitToNChunks } from "@homarr/common";
-import { integrationDefs } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
+import { IntegrationMarquee } from "@homarr/ui";

 import classes from "./hero-banner.module.css";

-const icons = Object.values(integrationDefs)
-  .filter((int) => int.name !== "Mock")
-  .map((int) => int.iconUrl);
-
-const countIconGroups = 3;
-const animationDurationInSeconds = icons.length;
-const arrayInChunks = splitToNChunks(icons, countIconGroups);
-const gridSpan = 12 / countIconGroups;
-
 export const HeroBanner = async () => {
  const t = await getScopedI18n("management.page.home");

@@ -30,41 +20,7 @@ export const HeroBanner = async () => {
        </Group>
      </Stack>
      <Box visibleFrom="md" className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
-        <Grid>
-          {Array(countIconGroups)
-            .fill(0)
-            .map((_, columnIndex) => (
-              <GridCol key={`grid-column-${columnIndex}`} span={gridSpan}>
-                <Stack
-                  className={classes.scrollAnimationContainer}
-                  style={{
-                    animationDuration: `${animationDurationInSeconds - columnIndex}s`,
-                  }}
-                >
-                  {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-1-${index}`}
-                      src={icon}
-                      fit={"contain"}
-                      w={50}
-                      h={50}
-                    />
-                  ))}
-
-                  {/* This is used for making the animation seem seamless */}
-                  {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-2-${index}`}
-                      src={icon}
-                      fit={"contain"}
-                      w={50}
-                      h={50}
-                    />
-                  ))}
-                </Stack>
-              </GridCol>
-            ))}
-        </Grid>
+        <IntegrationMarquee />
      </Box>
    </Box>
  );
@@ -17,6 +17,7 @@ interface AppDeleteButtonProps {

 export const AppDeleteButton = ({ app }: AppDeleteButtonProps) => {
  const t = useScopedI18n("app.page.delete");
+  const tList = useScopedI18n("app.page.list.action");
  const { openConfirmModal } = useConfirmModal();
  const { mutate, isPending } = clientApi.app.delete.useMutation();

@@ -50,7 +51,14 @@ export const AppDeleteButton = ({ app }: AppDeleteButtonProps) => {
  }, [app, mutate, t, openConfirmModal]);

  return (
-    <ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label={t("title")}>
+    <ActionIcon
+      loading={isPending}
+      variant="subtle"
+      color="red"
+      size={44}
+      onClick={onClick}
+      aria-label={tList("delete", { name: app.name })}
+    >
      <IconTrash color="red" size={16} stroke={1.5} />
    </ActionIcon>
  );
@@ -16,10 +16,7 @@ export default async function AppEditPage(props: AppEditPageProps) {
  const params = await props.params;
  const session = await auth();

-  if (
-    !session?.user.permissions.includes("board-modify-all") ||
-    !session?.user.permissions.includes("app-modify-all")
-  ) {
+  if (!session?.user.permissions.includes("app-modify-all")) {
    notFound();
  }
  const app = await api.app.byId({ id: params.id });
@@ -10,7 +10,7 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 export default async function AppNewPage() {
  const session = await auth();

-  if (!session?.user.permissions.includes("board-modify-all") || !session?.user.permissions.includes("app-create")) {
+  if (!session?.user.permissions.includes("app-create")) {
    notFound();
  }

@@ -1,26 +1,37 @@
 import { Fragment } from "react";
-import { notFound, redirect } from "next/navigation";
-import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core";
+import { redirect } from "next/navigation";
+import { ActionIcon, ActionIconGroup, Anchor, Avatar, Text } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";

 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
+import { getSafeAppHref } from "@homarr/common";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
-import { getI18n, getScopedI18n } from "@homarr/translation/server";
+import { getScopedI18n } from "@homarr/translation/server";
 import { Link, SearchInput, TablePagination } from "@homarr/ui";

 import { TourTarget } from "~/components/layout/header/tour-target";
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { ManageCollectionItem, ManageCollectionPage } from "~/components/manage/manage-collection";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
 import { NoResults } from "~/components/no-results";
 import { AppDeleteButton } from "./_app-delete-button";

 const searchParamsSchema = z.object({
  search: z.string().optional(),
-  pageSize: z.string().regex(/\d+/).transform(Number).catch(10),
-  page: z.string().regex(/\d+/).transform(Number).catch(1),
+  pageSize: z
+    .string()
+    .regex(/^[1-9]\d*$/u)
+    .transform(Number)
+    .pipe(z.number().int().positive())
+    .catch(10),
+  page: z
+    .string()
+    .regex(/^[1-9]\d*$/u)
+    .transform(Number)
+    .pipe(z.number().int().positive())
+    .catch(1),
 });

 interface AppsPageProps {
@@ -29,24 +40,38 @@ interface AppsPageProps {

 export default async function AppsPage(props: AppsPageProps) {
  const session = await auth();
-
-  if (!session) {
-    redirect("/auth/login");
-  }
-  if (!session.user.permissions.includes("board-modify-all")) {
-    notFound();
-  }
+  if (!session) redirect("/auth/login");

  const searchParams = searchParamsSchema.parse(await props.searchParams);
-
  const { items: apps, totalCount } = await api.app.getPaginated(searchParams);
  const t = await getScopedI18n("app");
-
  const canCreate = session.user.permissions.includes("app-create");
+  const canModify = session.user.permissions.includes("app-modify-all");
+  const canDelete = session.user.permissions.includes("app-full-all");
+  const hasSearch = Boolean(searchParams.search?.trim());

-  return (
-    <ManagePageLayout
+  const emptyState = hasSearch ? (
+    <NoResults
+      icon={IconBox}
+      title={t("page.list.noResults.filteredTitle")}
+      description={t("page.list.noResults.filteredDescription", { search: searchParams.search ?? "" })}
+      action={{ label: t("page.list.noResults.clearSearch"), href: "/manage/apps" }}
+    />
+  ) : (
+    <NoResults
+      icon={IconBox}
+      title={t("page.list.noResults.title")}
+      description={t("page.list.noResults.description")}
+      action={{ label: t("page.list.noResults.action"), href: "/manage/apps/new", hidden: !canCreate }}
+    />
+  );
+
+  const page = (
+    <ManageCollectionPage
      title={t("page.list.title")}
+      ariaLabel={t("page.list.ariaLabel")}
+      itemCount={apps.length}
+      emptyState={emptyState}
      primaryAction={
        canCreate ? (
          <TourTarget id="manage-apps-create">
@@ -56,101 +81,100 @@ export default async function AppsPage(props: AppsPageProps) {
          </TourTarget>
        ) : undefined
      }
-      toolbar={<SearchInput placeholder={`${t("search")}...`} defaultValue={searchParams.search} flexExpand />}
-      footer={<TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />}
+      toolbar={
+        <SearchInput
+          placeholder={`${t("search")}...`}
+          ariaLabel={t("search")}
+          defaultValue={searchParams.search}
+          flexExpand
+        />
+      }
+      footer={
+        totalCount > searchParams.pageSize ? (
+          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
+        ) : undefined
+      }
      floatingPrimaryAction={canCreate}
    >
-      {apps.length === 0 && <AppNoResults />}
-      {apps.length > 0 && (
-        <TourTarget id="manage-apps-list">
-          <Stack gap="sm">
-            {apps.map((app) => (
-              <AppCard key={app.id} app={app} />
-            ))}
-          </Stack>
-        </TourTarget>
-      )}
-    </ManagePageLayout>
+      {apps.map((app) => (
+        <AppItem
+          key={app.id}
+          app={app}
+          canModify={canModify}
+          canDelete={canDelete}
+          editLabel={t("page.list.action.edit", { name: app.name })}
+        />
+      ))}
+    </ManageCollectionPage>
  );
+
+  return apps.length > 0 ? <TourTarget id="manage-apps-list">{page}</TourTarget> : page;
 }

-interface AppCardProps {
-  app: RouterOutputs["app"]["all"][number];
+interface AppItemProps {
+  app: RouterOutputs["app"]["getPaginated"]["items"][number];
+  canModify: boolean;
+  canDelete: boolean;
+  editLabel: string;
 }

-const AppCard = async ({ app }: AppCardProps) => {
-  const t = await getScopedI18n("app");
-  const session = await auth();
+const AppItem = ({ app, canModify, canDelete, editLabel }: AppItemProps) => {
+  const descriptionLines = app.description?.split("\n");
+  const safeHref = getSafeAppHref(app.href);

  return (
-    <Card>
-      <Group justify="space-between" wrap="nowrap">
-        <Group align="top" justify="start" wrap="nowrap" style={{ flex: "1" }}>
-          <Avatar
+    <ManageCollectionItem
+      leading={<Avatar size={36} src={app.iconUrl} radius="sm" styles={{ image: { objectFit: "contain" } }} alt="" />}
+      title={
+        <Text component="span" fw={600} lineClamp={1}>
+          {app.name}
+        </Text>
+      }
+      description={
+        descriptionLines ? (
+          <Text size="sm" c="dimmed" lineClamp={2}>
+            {descriptionLines.map((line, index) => (
+              <Fragment key={index}>
+                {line}
+                {index < descriptionLines.length - 1 && <br />}
+              </Fragment>
+            ))}
+          </Text>
+        ) : undefined
+      }
+      metadata={
+        safeHref ? (
+          <Anchor
+            href={safeHref}
+            target="_blank"
+            rel="noreferrer"
+            lineClamp={1}
            size="sm"
-            src={app.iconUrl}
-            radius={0}
-            styles={{
-              image: {
-                objectFit: "contain",
-              },
-            }}
-          />
-          <Stack gap={0} style={{ flex: "1" }}>
-            <Text fw={500} lineClamp={1}>
-              {app.name}
-            </Text>
-            {app.description && (
-              <Text size="sm" c="gray.6" lineClamp={4}>
-                {app.description.split("\n").map((line, index) => (
-                  <Fragment key={index}>
-                    {line}
-                    <br />
-                  </Fragment>
-                ))}
-              </Text>
-            )}
-            {app.href && (
-              <Anchor href={app.href} lineClamp={1} size="sm" style={{ wordBreak: "break-all" }}>
-                {app.href}
-              </Anchor>
-            )}
-          </Stack>
-        </Group>
-        <Group>
+            style={{ wordBreak: "break-all" }}
+          >
+            {app.href}
+          </Anchor>
+        ) : undefined
+      }
+      actions={
+        canModify || canDelete ? (
          <ActionIconGroup>
-            {session?.user.permissions.includes("app-modify-all") && (
+            {canModify && (
              <ActionIcon
                component={Link}
                href={`/manage/apps/edit/${app.id}`}
                variant="subtle"
                color="gray"
-                aria-label={t("page.edit.title")}
+                size={44}
+                aria-label={editLabel}
              >
-                <IconPencil size={16} stroke={1.5} />
+                <IconPencil size={18} stroke={1.5} />
              </ActionIcon>
            )}
-            {session?.user.permissions.includes("app-full-all") && <AppDeleteButton app={app} />}
+            {canDelete && <AppDeleteButton app={app} />}
          </ActionIconGroup>
-        </Group>
-      </Group>
-    </Card>
-  );
-};
-
-const AppNoResults = async () => {
-  const t = await getI18n();
-  const session = await auth();
-
-  return (
-    <NoResults
-      icon={IconBox}
-      title={t("app.page.list.noResults.title")}
-      action={{
-        label: t("app.page.list.noResults.action"),
-        href: "/manage/apps/new",
-        hidden: !session?.user.permissions.includes("app-create"),
-      }}
+        ) : undefined
+      }
    />
  );
 };
@@ -2,6 +2,7 @@

 import type { ReactNode } from "react";
 import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
 import {
  Accordion,
  ActionIcon,
@@ -140,10 +141,11 @@ const ConfigurationSkeleton = ({ label }: { label: string }) => (

 export const AssistantConfiguration = () => {
  const t = useScopedI18n("management.page.settings.section.assistant");
+  const router = useRouter();
  const utils = clientApi.useUtils();
  const { data: configuration, isLoading } = clientApi.assistant.getAdminConfiguration.useQuery();
-  const [provider, setProvider] = useState<AssistantProvider>("openrouter");
-  const [baseUrl, setBaseUrl] = useState<string>(assistantProviderPresets.openrouter.baseUrl);
+  const [provider, setProvider] = useState<AssistantProvider>("homarr");
+  const [baseUrl, setBaseUrl] = useState<string>(assistantProviderPresets.homarr.baseUrl);
  const [modelDiscoveryPath, setModelDiscoveryPath] = useState<string>("/models");
  const [apiKey, setApiKey] = useState("");
  const [credentialFlow, setCredentialFlow] = useState<CredentialFlow>("idle");
@@ -155,7 +157,7 @@ export const AssistantConfiguration = () => {
  const [webSearchEnabled, setWebSearchEnabled] = useState(false);

  useEffect(() => {
-    const configuredProvider = configuration?.provider ?? "openrouter";
+    const configuredProvider = configuration?.provider ?? "homarr";
    setProvider(configuredProvider);
    setBaseUrl(
      configuredProvider === "homarr"
@@ -201,7 +203,7 @@ export const AssistantConfiguration = () => {
  );
  const providerOptions = useMemo(
    () =>
-      (["hosted", "local", "custom"] satisfies AssistantProviderCategory[]).map((category) => {
+      (["free", "hosted", "local", "custom"] satisfies AssistantProviderCategory[]).map((category) => {
        const items = assistantProviderIds
          .filter((providerId) => assistantProviderPresets[providerId].category === category)
          .map((providerId) => ({
@@ -268,6 +270,7 @@ export const AssistantConfiguration = () => {
        utils.assistant.getAvailability.invalidate(),
        utils.assistant.getRuntimeOptions.invalidate(),
      ]);
+      router.refresh();
      showSuccessNotification({
        title: t("notification.saved.title"),
        message: t("notification.saved.message"),
@@ -438,6 +441,11 @@ export const AssistantConfiguration = () => {
                        {option.label}
                      </Text>
                    </Group>
+                    {option.value === "homarr" && (
+                      <Text size="xs" c="dimmed" lineClamp={2}>
+                        {t("provider.options.homarr.description")}
+                      </Text>
+                    )}
                  </Box>
                </Group>
              )}
@@ -22,7 +22,7 @@ const iconProps = {

 interface BoardCardMenuDropdownProps {
  board: Pick<
-    RouterOutputs["board"]["getAllBoards"][number],
+    RouterOutputs["board"]["getManageOverview"][number],
    "id" | "name" | "creator" | "userPermissions" | "groupPermissions" | "isPublic"
  >;
 }
@@ -1,38 +1,23 @@
 "use client";

-import { Button, Menu } from "@mantine/core";
-import { IconCategoryPlus, IconChevronDown, IconFileImport } from "@tabler/icons-react";
+import { Button } from "@mantine/core";
+import { IconCategoryPlus } from "@tabler/icons-react";

 import { useModalAction } from "@homarr/modals";
-import { AddBoardModal, ImportBoardModal } from "@homarr/modals-collection";
+import { AddBoardModal } from "@homarr/modals-collection";
 import { useI18n } from "@homarr/translation/client";

 import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";

 export const CreateBoardButton = () => {
  const t = useI18n();
-  const { openModal: openAddModal } = useModalAction(AddBoardModal);
-  const { openModal: openImportModal } = useModalAction(ImportBoardModal);
+  const { openModal } = useModalAction(AddBoardModal);

  return (
    <ManageMobilePrimaryAction>
-      <Button.Group>
-        <Button leftSection={<IconCategoryPlus size="1rem" />} onClick={openAddModal}>
-          {t("management.page.board.action.new.label")}
-        </Button>
-        <Menu position="bottom-end">
-          <Menu.Target>
-            <Button px="xs" ms={1}>
-              <IconChevronDown size="1rem" />
-            </Button>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <Menu.Item onClick={openImportModal} leftSection={<IconFileImport size="1rem" />}>
-              {t("board.action.oldImport.label")}
-            </Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-      </Button.Group>
+      <Button leftSection={<IconCategoryPlus size="1rem" />} onClick={openModal}>
+        {t("management.page.board.action.new.label")}
+      </Button>
    </ManageMobilePrimaryAction>
  );
 };
@@ -24,10 +24,11 @@ import {
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
+import { constructBoardPermissions } from "@homarr/auth/shared";
 import { getScopedI18n } from "@homarr/translation/server";
 import { Link, UserAvatar } from "@homarr/ui";

-import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
+import { BoardLayoutThumbnail } from "~/components/board/board-layout-thumbnail";
 import { TourTarget } from "~/components/layout/header/tour-target";
 import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { NoResults } from "~/components/no-results";
@@ -37,7 +38,7 @@ import { CreateBoardButton } from "./_components/create-board-button";
 export default async function ManageBoardsPage() {
  const t = await getScopedI18n("management.page.board");
  const session = await auth();
-  const boards = await api.board.getAllBoards();
+  const boards = await api.board.getManageOverview();
  const canCreateBoards = session?.user.permissions.includes("board-create");

  return (
@@ -52,13 +53,32 @@ export default async function ManageBoardsPage() {
      }
      floatingPrimaryAction={canCreateBoards}
    >
-      {boards.length === 0 && <NoResults icon={IconLayoutDashboard} title={t("noResults.title")} />}
+      {boards.length === 0 && (
+        <NoResults icon={IconLayoutDashboard} title={t("noResults.title")} description={t("noResults.description")} />
+      )}
      {boards.length > 0 && (
        <TourTarget id="manage-boards-list">
          <Grid>
            {boards.map((board) => (
              <GridCol span={{ base: 12, md: 6 }} key={board.id}>
-                <BoardCard board={board} />
+                <BoardCard
+                  board={board}
+                  isMenuVisible={constructBoardPermissions(board, session).hasChangeAccess}
+                  labels={{
+                    visibility: t(`visibility.${board.isPublic ? "public" : "private"}`),
+                    preview: t("preview.label", {
+                      name: board.name,
+                      count: String(board.preview?.items.length ?? 0),
+                    }),
+                    unknownCreator: t("preview.unknownCreator"),
+                    home: t("action.setHomeBoard.badge.label"),
+                    homeTooltip: t("action.setHomeBoard.badge.tooltip"),
+                    mobileHome: t("action.setMobileHomeBoard.badge.label"),
+                    mobileHomeTooltip: t("action.setMobileHomeBoard.badge.tooltip"),
+                    open: t("action.open.label"),
+                    settings: t("action.settings.label"),
+                  }}
+                />
              </GridCol>
            ))}
          </Grid>
@@ -69,48 +89,61 @@ export default async function ManageBoardsPage() {
 }

 interface BoardCardProps {
-  board: RouterOutputs["board"]["getAllBoards"][number];
+  board: RouterOutputs["board"]["getManageOverview"][number];
+  isMenuVisible: boolean;
+  labels: {
+    visibility: string;
+    preview: string;
+    unknownCreator: string;
+    home: string;
+    homeTooltip: string;
+    mobileHome: string;
+    mobileHomeTooltip: string;
+    open: string;
+    settings: string;
+  };
 }

-const BoardCard = async ({ board }: BoardCardProps) => {
-  const t = await getScopedI18n("management.page.board");
-  const { hasChangeAccess: isMenuVisible } = await getBoardPermissionsAsync(board);
-  const visibility = board.isPublic ? "public" : "private";
+const BoardCard = ({ board, isMenuVisible, labels }: BoardCardProps) => {
  const VisibilityIcon = board.isPublic ? IconWorld : IconLock;

  return (
-    <Card>
+    <Card padding={0} withBorder>
+      <CardSection withBorder>
+        <BoardLayoutThumbnail preview={board.preview} label={labels.preview} />
+      </CardSection>
      <CardSection p="sm" withBorder>
-        <Group justify="space-between" align="center">
-          <Group gap="sm">
-            <Tooltip label={t(`visibility.${visibility}`)}>
+        <Group justify="space-between" align="flex-start" wrap="wrap" gap="xs">
+          <Group gap="sm" wrap="nowrap" style={{ minWidth: 0, flex: "1 1 12rem" }}>
+            <Tooltip label={labels.visibility}>
              <VisibilityIcon size={20} stroke={1.5} />
            </Tooltip>
-            <Text fw={700}>{board.name}</Text>
+            <Text fw={700} truncate>
+              {board.name}
+            </Text>
          </Group>

-          <Group>
+          <Group gap="xs" justify="flex-end" wrap="wrap" style={{ marginInlineStart: "auto" }}>
            {board.isHome && (
-              <Tooltip label={t("action.setHomeBoard.badge.tooltip")}>
+              <Tooltip label={labels.homeTooltip}>
                <Badge tt="none" color="yellow" variant="light" leftSection={<IconHomeFilled size=".7rem" />}>
-                  {t("action.setHomeBoard.badge.label")}
+                  {labels.home}
                </Badge>
              </Tooltip>
            )}

            {board.isMobileHome && (
-              <Tooltip label={t("action.setMobileHomeBoard.badge.tooltip")}>
+              <Tooltip label={labels.mobileHomeTooltip}>
                <Badge tt="none" color="yellow" variant="light" leftSection={<IconDeviceMobile size=".7rem" />}>
-                  {t("action.setMobileHomeBoard.badge.label")}
+                  {labels.mobileHome}
                </Badge>
              </Tooltip>
            )}

            {board.creator && (
-              <Group gap="xs">
+              <Tooltip label={board.creator.name ?? labels.unknownCreator}>
                <UserAvatar user={board.creator} size="sm" />
-                <Text>{board.creator.name}</Text>
-              </Group>
+              </Tooltip>
            )}
          </Group>
        </Group>
@@ -123,9 +156,10 @@ const BoardCard = async ({ board }: BoardCardProps) => {
            component={Link}
            href={`/boards/${board.name}`}
            variant="default"
+            h={44}
            fullWidth
          >
-            {t("action.open.label")}
+            {labels.open}
          </Button>
          {isMenuVisible && (
            <Menu position="bottom-end">
@@ -133,8 +167,8 @@ const BoardCard = async ({ board }: BoardCardProps) => {
                <ActionIcon
                  style={{ borderTop: "none", borderBottom: "none", borderRight: "none", borderRadius: 0 }}
                  variant="default"
-                  size="lg"
-                  aria-label={t("action.settings.label")}
+                  size={44}
+                  aria-label={labels.settings}
                >
                  <IconDotsVertical size={16} stroke={1.5} />
                </ActionIcon>
@@ -144,6 +144,7 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
            key={id}
            component="a"
            href={`#${id}`}
+            onClick={() => setMobilePane(id === "preview" ? "preview" : "configure")}
            size="compact-sm"
            variant="subtle"
            color={invalidSections.has(id) ? "red" : undefined}
@@ -22,6 +22,7 @@ vi.mock("@homarr/api/client", () => ({
 vi.mock("@homarr/translation/client", () => ({ useScopedI18n: () => (key: string) => key }));
 vi.mock("@homarr/notifications", () => ({ showErrorNotification: vi.fn() }));
 const rendererAttempt = vi.hoisted(() => vi.fn());
+const codeEditorProps = vi.hoisted(() => vi.fn());

 vi.mock("@homarr/widgets/custom-api/custom-jsx-display", () => ({
  default: ({ data }: { data: Record<string, unknown> }) => {
@@ -32,7 +33,12 @@ vi.mock("@homarr/widgets/custom-api/custom-jsx-display", () => ({
    return <div>widget-renderer</div>;
  },
 }));
-vi.mock("./_code-editor", () => ({ CodeEditor: ({ label }: { label: string }) => <div>{label}</div> }));
+vi.mock("./_code-editor", () => ({
+  CodeEditor: (props: { label: string; readOnly?: boolean }) => {
+    codeEditorProps(props);
+    return <div>{props.label}</div>;
+  },
+}));
 vi.mock("./_custom-widget-preview-action", () => ({ PreviewActionControl: () => <div>action-control</div> }));

 let root: Root;
@@ -109,6 +115,7 @@ describe("Custom Widget preview panel", () => {
    );
    await act(async () => dataTab?.click());
    expect(host.textContent).toContain("requestData");
+    expect(codeEditorProps).toHaveBeenCalledWith(expect.objectContaining({ label: "requestData", readOnly: true }));
    expect(host.textContent).not.toContain("invalid");

    const optionsTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>