fix(spotlight): show the app search group to app administrators

app.search accepts app-modify-all or board-modify-all, but the spotlight group was
only offered to board modifiers, so a user who administers apps could not search
them. The two conditions now match.

apps/docs/docs/advanced/environment-variables/index.mdx

@@ -58,12 +58,12 @@ A random secret can be generated by using the following command: `openssl rand -
 
 ## Docker
 
-| Environment Variable  | Description                                                                                                                                                                                                          | Possible values                                         | Default |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
-| `DOCKER_SOCKET_PATHS` | Comma-separated mounted Docker-compatible socket paths. Homarr discovers each path as a selectable Docker environment                                                                                                | For example `/var/run/docker.sock,/var/run/podman.sock` | -       |
-| `DOCKER_HOSTNAMES`    | Comma-separated plaintext TCP hostnames. Pair each hostname with the port in the same position in `DOCKER_PORTS`                                                                                                     | For example `localhost,docker.example.com`              | -       |
-| `DOCKER_PORTS`        | Comma-separated plaintext TCP ports paired with `DOCKER_HOSTNAMES`                                                                                                                                                   | For example `2375,2376`                                 | -       |
-| `DOCKER_ENDPOINTS`    | Optional advanced JSON configuration for custom names, TLS, or restricted capabilities. It takes precedence over the simple variables above. See the [Docker and Podman connection guide](/docs/integrations/docker) | A JSON array of endpoint descriptors                    | -       |
+| Environment Variable  | Description                                                                                                                                                                                               | Possible values                                         | Default |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
+| `DOCKER_ENDPOINTS`    | JSON array of named, capability-scoped Docker or Podman endpoints. Supports socket, explicitly insecure TCP, and TLS transports. See the [Docker and Podman integration guide](/docs/integrations/docker) | A JSON array of endpoint descriptors                    | -       |
+| `DOCKER_HOSTNAMES`    | Legacy comma-separated list of plaintext TCP hostnames. Ignored when `DOCKER_ENDPOINTS` is set                                                                                                            | For example `localhost,docker.example.com`              | -       |
+| `DOCKER_PORTS`        | Legacy comma-separated list of plaintext TCP ports. Ignored when `DOCKER_ENDPOINTS` is set                                                                                                                | For example `2375,2376`                                 | -       |
+| `DOCKER_SOCKET_PATHS` | Legacy comma-separated list of mounted Docker-compatible socket paths. Ignored when `DOCKER_ENDPOINTS` is set                                                                                             | For example `/var/run/docker.sock,/var/run/podman.sock` | -       |
 
 ## Database
 

apps/docs/docs/integrations/docker/index.mdx

@@ -24,11 +24,12 @@ import { dockerContainersWidget } from "@site/docs/widgets/docker-containers";
   ]}
 />
 
-## Connecting Docker to Homarr
+## Enabling the Docker integration
 
-Docker connections come directly from Homarr's environment variables. They are automatically available in the Docker management table and Docker widget; you do not create a Docker integration under **Management → Integrations**.
-
-If Homarr runs directly on a host with Docker installed, it uses `/var/run/docker.sock` by default. When Homarr runs in a container, mount the [Docker socket](https://docs.docker.com/engine/security/protect-access/) into it so Homarr can interact with Docker.
+This integration must first be enabled.
+If you directly run on the host system and you have docker installed, it will be enabled by default.
+Otherwise, you'll need to mount the [docker socket](https://docs.docker.com/engine/security/protect-access/) to the Homarr container,
+so Homarr can interact with the Docker service.
 
 In Docker Compose, you can simply add this line:
 
@@ -121,23 +122,7 @@ services:
       DOCKER_SOCKET_PATHS: /var/run/docker.sock,/var/run/podman.sock
 ```
 
-For remote socket proxies, list the hostnames and matching ports in the same order:
-
-```yaml
-environment:
-  DOCKER_HOSTNAMES: docker-proxy-home,docker-proxy-lab
-  DOCKER_PORTS: 2375,2375
-```
-
-Homarr automatically discovers each comma-separated entry as a separate Docker environment. All environments are selected by default; the Docker widget lets you select one or more without any additional setup.
-
-:::warning[Plaintext TCP]
-Plaintext Docker TCP can grant unauthenticated control of the Docker host. Prefer a local socket, a least-privilege socket proxy on a private Docker network, or TLS.
-:::
-
-### Advanced endpoint configuration
-
-Most users should use the comma-separated variables above. Use `DOCKER_ENDPOINTS` only when you need custom names, TLS, or restricted capabilities. It is a JSON array where every endpoint declares its identity, transport, and capabilities:
+For named endpoints, transport security, or least-privilege actions, prefer `DOCKER_ENDPOINTS`. It is a JSON array where every endpoint declares its identity, transport, and capabilities:
 
 ```yaml
 services:
@@ -178,12 +163,16 @@ Supported transports are:
 - `tls`: `host`, `port`, and an absolute `caPath`; add both `certPath` and `keyPath` for mutual TLS
 - `tcp`: `host`, `port`, and the explicit acknowledgement `allowInsecure: true`
 
-The structured configuration refuses TCP unless `allowInsecure` is explicitly set to `true`. When `DOCKER_ENDPOINTS` is set, it takes precedence over `DOCKER_SOCKET_PATHS`, `DOCKER_HOSTNAMES`, and `DOCKER_PORTS`.
+:::warning[Plaintext TCP]
+Plaintext Docker TCP can grant unauthenticated control of the Docker host. Prefer a local socket, a least-privilege socket proxy, or TLS. The structured configuration refuses TCP unless `allowInsecure` is explicitly set to `true`.
+:::
+
+When `DOCKER_ENDPOINTS` is set, it takes precedence over the legacy `DOCKER_SOCKET_PATHS`, `DOCKER_HOSTNAMES`, and `DOCKER_PORTS` variables.
 
 ### Managing your Docker containers within Homarr
 
 Homarr allows you to interact with Docker containers running on your system.
-The collapsed **Assisted Docker setup** helper optionally compares visible containers with your existing Homarr apps and integrations. Open it only when you want setup suggestions; it never blocks normal container management. Every service stays distinct by Docker endpoint and container ID, including multiple containers that use the same integration type.
+The **Service setup** section compares the visible containers with your existing Homarr apps and integrations. It keeps every service distinct by Docker endpoint and container ID, including multiple containers that use the same integration type.
 
 Homarr can show a service as:
 
@@ -192,15 +181,15 @@ Homarr can show a service as:
 - **Already represented** or **Linked** when an app or integration already matches
 - **Address changed** when a service appears to match an integration but its reachable address has changed
 
-Set the usual server address once, then choose whether services normally use different ports, subdomains, or paths. Homarr uses that pattern to prefill every detected service. Each suggestion has one editable URL field with the generated and Docker-reported addresses available as autocomplete options, so you can select a suggestion or type any address directly.
+Suggested addresses are ranked and explain where they came from. A published address or Docker endpoint host is normally usable from a browser; a container-name address is server-only and requires Homarr to share the container network. Wildcard addresses such as `0.0.0.0` are never offered as browser destinations. You can edit every suggestion before continuing.
 
 :::info[Review before changing]
-Service discovery is read-only. Homarr never creates or changes an app or integration automatically. **Set up integration** opens the standard prefilled integration form, while **Create app** opens the existing Docker app form, so you can review and confirm the final setup.
+Service discovery is read-only. Homarr never creates or changes an app or integration automatically; use the action on an individual suggestion to review and confirm its setup.
 :::
 
-Suggestions appear as a compact task list. Expand an item only when you want to edit its URL or inspect relevant setup statuses. Use the filters to focus on services that need attention or those already represented in Homarr. Refresh runs discovery again. Dismissed suggestions are stored in the current browser using their endpoint-qualified service identity and can be restored from the same helper. If multiple existing items could match, Homarr marks the result as ambiguous and does not choose one automatically.
+Use the inbox filters to focus on services that need attention or those already represented in Homarr. Refresh runs discovery again. Dismissed suggestions are stored in the current browser using their endpoint-qualified service identity and can be restored from the same panel. If multiple existing items could match, Homarr marks the result as ambiguous and does not choose one automatically.
 
-Compact status icons summarize the setup information Homarr can act on. Unknown and non-applicable runtime layers are omitted to keep the helper focused; use the integration form's connection test or the relevant board action for live diagnostics.
+The health badges are an evidence-based projection across Docker, integration configuration, app representation, and persisted widget links. Authentication, API request success, and widget query execution are labeled **Not observed** because Homarr does not currently retain trustworthy last-run results for these layers. Use the suggested integration test or board action to diagnose them live; **Not observed** is never presented as healthy.
 
 If one Docker endpoint is unavailable, Homarr reports that endpoint while continuing to show services from healthy endpoints. An unavailable endpoint is not treated as an empty Docker installation.
 
@@ -227,10 +216,6 @@ This opens a dedicated page with an xterm.js terminal that streams the container
 The Docker management table supports optional **CPU usage** and **Memory usage** columns.
 These columns are hidden by default and can be toggled on from the table column visibility settings.
 
-#### Choosing Docker environments in the widget
-
-The Docker widget can show one or more configured Docker environments. Leave **Docker environments** empty to include every endpoint, which is also the default for existing widgets. Selecting one or more entries limits container and statistics requests to those endpoints.
-
 #### Add apps from containers
 
 Homarr also lets you add apps from containers. You can simply select all containers you want to add an app for and then click the `Add to Homarr` button.

apps/docs/docs/management/api/index.mdx

@@ -138,10 +138,6 @@ Pass those pairs unchanged to `docker.startAll`, `docker.stopAll`, `docker.resta
 names use underscores, such as `docker_restartAll`. Endpoint qualification prevents identical container IDs on different
 Docker or Podman endpoints from targeting the wrong service.
 
-`docker.getContainers` also accepts an optional `endpointIds` array. Omit it or pass an empty array to query every configured
-Docker environment, or pass one or more IDs returned by `docker.getEndpoints` to query only those Dockerode clients. The
-Docker widget uses the same behavior for its environment selector.
-
 ## Partial integration failures
 
 Multi-integration widget queries keep data from integrations that remain available. Calendar and media-server results include

apps/docs/docs/management/assistant.mdx

@@ -44,15 +44,12 @@ host gateway address.
 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.
 
-Use **Conversations** to search, switch, rename, export, or delete threads.
-
 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.
 
 ## Permissions and privacy
 
-- Read-only actions can run automatically. Changes require approval by default. Automatic approvals apply only to the
-  current conversation, turn off when you switch conversations, and never answer questions for you.
+- 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.

apps/docs/docs/management/boards/index.mdx

@@ -205,7 +205,7 @@ changes, Homarr asks whether to discard them. If the editor cannot load, the boa
 />
 
 While edit mode is active, **Add board content** opens the same Universal Create surface as the global header action and
-Spotlight. It lists the available actions directly and can add a widget, app, integration, Container, board, Workshop item, or Custom Widget when the
+Spotlight. It can add a widget, app, integration, Container, board, Workshop item, or Custom Widget when the
 current user and context allow it. Widget setup offers the main canvas, enabled rails, and existing Containers as
 destinations before the widget is created, so the common flow does not require a second move step.
 

apps/docs/docs/management/integrations/index.mdx

@@ -81,9 +81,9 @@ When you connect a service from a board, Homarr keeps you in the same setup flow
 confirms whether an application shortcut was linked and offers the widgets that support the new integration. Selecting a
 widget returns to its settings with the new integration already selected.
 
-Users with full access can also test and update a selected integration directly in the **Edit widget → Edit integration**
-tab on a board. Failed tests keep the editor open and show the same connection diagnostics as the management page.
-Successful changes apply to every app and widget that uses the integration.
+Users with full access can also test and update a selected integration from **Edit widget → Edit integration** on a
+board. Failed tests keep the editor open and show the same connection diagnostics as the management page. Successful
+changes apply to every app and widget that uses the integration.
 
 When app creation is not permitted, the setup form offers linking an existing accessible app instead of attempting to
 create one.

apps/docs/docs/management/logs/index.mdx

@@ -1,34 +0,0 @@
----
-tags:
-  - Administration
-  - Logs
-  - Troubleshooting
----
-
-# Logs
-
-The logs page shows recent Homarr application logs and continues updating as new events occur. Use it to investigate
-widget, integration, and server errors without opening the container logs separately.
-
-## Opening the logs page
-
-Navigate to **Management** > **Tools** > **Logs**. The page and widget log links are only available to users with the
-**View logs** permission.
-
-When a widget reports an error, **Check logs for more details** opens the logs page in a new tab and marks the time when
-the widget displayed the error. The related server error normally appears immediately above that marker. If those logs
-have already been removed from the retained history, the marker explains that they are no longer available.
-
-## Retained and live logs
-
-Homarr retains the latest 5,000 log events in Redis. Opening the page first loads this history and then continues with
-live events without a gap. The history is bounded, so older events are removed automatically.
-
-The history survives normal application restarts when the configured Redis instance persists its data. For complete
-platform-level history, startup failures, or events older than the retained limit, use the logs provided by Docker or
-your deployment platform.
-
-## Display controls
-
-The severity selector applies to both retained and live events. Selecting a different level redraws the existing view
-using that threshold. The font-size control changes the terminal text size and is remembered in the browser.

apps/docs/docs/management/settings/index.mdx

@@ -13,7 +13,7 @@ tags:
 The settings page applies options to the whole Homarr application.
 Some changes need a full page reload before they take effect.
 
-All settings sections remain visible in a single form. Click the **Save changes** button in the save bar at the bottom of the page to apply them. The save bar only appears when you have unsaved changes, and the **Discard** button reverts your changes.
+All changes are collected in a single form. Click the **Save changes** button in the save bar at the bottom of the page to apply them. The save bar only appears when you have unsaved changes, and the **Discard** button reverts your changes.
 
 ## Analytics
 

apps/docs/docs/widgets/docker-containers/index.mdx

@@ -7,15 +7,20 @@ hide_title: true
 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 { IconAd } from "@tabler/icons-react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 import { dockerContainersWidget } from ".";
+import { dockerIntegration } from "@site/docs/integrations/docker";
 
 <WidgetHeader widget={dockerContainersWidget} categories={["Containers"]} />
 
 This widget displays the resource usage of your Docker containers and allows you to manage them.
 
 :::info
-This widget reads the Docker environments configured through environment variables. You do not need to create a Docker integration under **Management → Integrations**. The widget can only be used with administrator privileges.
+This widget can only be used with administrator privileges.
 :::
 
 ### Screenshots
@@ -24,6 +29,16 @@ import dockerTable from "./img/table.png";
 
 <img src={dockerTable} alt="docker-stats table docker-containers" width={128 * 3} height={128 * 2} />
 
+### Supported Integrations
+
+<WidgetIntegrations
+  items={[
+    {
+      integration: dockerIntegration,
+    },
+  ]}
+/>
+
 ### Interactions
 
 Hover a column header to reveal its grab handle, then drag it to reorder the table or drag the header's edge to resize it. The layout is saved automatically for each widget instance and restored after a reload. These controls are disabled while the board is in edit mode.

apps/docs/docs/widgets/docker-containers/index.ts

@@ -8,12 +8,6 @@ export const dockerContainersWidget: WidgetDefinition = {
   path: "../../widgets/docker-containers",
   configuration: {
     items: [
-      {
-        name: "Docker environments",
-        description: "Select one or more automatically discovered Docker environments, or leave empty to show all",
-        values: "Any Docker socket or host configured for Homarr",
-        defaultValue: "All Docker environments",
-      },
       {
         name: "Columns to show",
         description: "Select which columns are visible in the table",

apps/docs/docs/widgets/media-server/index.mdx

@@ -22,7 +22,7 @@ import { plexIntegration } from "@site/docs/integrations/plex";
 <WidgetHeader widget={mediaServerWidget} categories={["Media server"]} />
 
 The media server widget shows active sessions across your media servers.
-It shows playback progress, pause state, time remaining, the streaming resolution (e.g. `1080p`), and whether each session is direct play, direct stream, or transcoding audio or video. Location and bitrate can be toggled independently.
+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, 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.

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useImperativeHandle, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Alert, Anchor, Button, ButtonGroup, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
 import { IconInfoCircle, IconPencil, IconPlus, IconUnlink } from "@tabler/icons-react";
@@ -27,14 +27,8 @@ import type { AnyMappedTestConnectionError } from "../../_components/test-connec
 
 interface EditIntegrationFormProps {
   integration: RouterOutputs["integration"]["byId"];
-  hideButtons?: boolean;
+  embedded?: boolean;
   onSuccess?: () => void;
-  formRef?: React.Ref<EditIntegrationFormHandle>;
-}
-
-export interface EditIntegrationFormHandle {
-  submit: () => Promise<boolean>;
-  isDirty: () => boolean;
 }
 
 const formSchema = integrationUpdateSchema.omit({ id: true, appId: true }).and(
@@ -50,12 +44,7 @@ const formSchema = integrationUpdateSchema.omit({ id: true, appId: true }).and(
   }),
 );
 
-export const EditIntegrationForm = ({
-  integration,
-  hideButtons = false,
-  onSuccess,
-  formRef,
-}: EditIntegrationFormProps) => {
+export const EditIntegrationForm = ({ integration, embedded = false, onSuccess }: EditIntegrationFormProps) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
   const allSecretKinds = getAllSecretKindOptions(integration.kind);
@@ -93,172 +82,147 @@ export const EditIntegrationForm = ({
 
   const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
 
-  const handleSubmitAsync = useCallback(
-    async ({ app, ...values }: FormType) => {
-      setError(null);
-      let url: string;
-      try {
-        url = hasUrlSecret
-          ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
-          : values.url;
-      } catch {
-        showErrorNotification({
-          title: t("integration.page.edit.notification.error.title"),
-          message: t("integration.page.edit.notification.error.message"),
-        });
-        return false;
-      }
-
-      const data = await mutateAsync({
-        id: integration.id,
-        ...values,
-        url,
-        secrets: values.secrets.map((secret) => ({
-          kind: secret.kind,
-          value: secret.value === "" ? null : secret.value,
-        })),
-        appId: app?.id ?? null,
+  const handleSubmitAsync = async ({ app, ...values }: FormType) => {
+    setError(null);
+    let url: string;
+    try {
+      url = hasUrlSecret
+        ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
+        : values.url;
+    } catch {
+      showErrorNotification({
+        title: t("integration.page.edit.notification.error.title"),
+        message: t("integration.page.edit.notification.error.message"),
       });
+      return;
+    }
 
-      // We do it this way as we are unable to send a typesafe error through onError
-      if (data?.error) {
-        setError(data.error);
-        showErrorNotification({
-          title: t("integration.page.edit.notification.error.title"),
-          message: t("integration.page.edit.notification.error.message"),
-        });
-        requestAnimationFrame(() => errorRef.current?.focus());
-        return false;
-      }
+    const data = await mutateAsync({
+      id: integration.id,
+      ...values,
+      url,
+      secrets: values.secrets.map((secret) => ({
+        kind: secret.kind,
+        value: secret.value === "" ? null : secret.value,
+      })),
+      appId: app?.id ?? null,
+    });
 
-      showSuccessNotification({
-        title: t("integration.page.edit.notification.success.title"),
-        message: t("integration.page.edit.notification.success.message"),
+    // We do it this way as we are unable to send a typesafe error through onError
+    if (data?.error) {
+      setError(data.error);
+      showErrorNotification({
+        title: t("integration.page.edit.notification.error.title"),
+        message: t("integration.page.edit.notification.error.message"),
       });
-      void Promise.allSettled([utils.integration.invalidate(), utils.widget.invalidate()]);
-      onSuccess?.();
-      if (!hideButtons) {
-        void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
-      }
-      return true;
-    },
-    [hasUrlSecret, hideButtons, integration.id, mutateAsync, onSuccess, router, t, utils.integration, utils.widget],
-  );
+      requestAnimationFrame(() => errorRef.current?.focus());
+      return;
+    }
 
-  useImperativeHandle(
-    formRef,
-    () => ({
-      submit: () =>
-        new Promise<boolean>((resolve) => {
-          form.onSubmit(
-            async (values) => {
-              try {
-                resolve(await handleSubmitAsync(values));
-              } catch {
-                resolve(false);
-              }
-            },
-            () => resolve(false),
-          )();
-        }),
-      isDirty: () => form.isDirty(),
-    }),
-    [form, handleSubmitAsync],
-  );
+    showSuccessNotification({
+      title: t("integration.page.edit.notification.success.title"),
+      message: t("integration.page.edit.notification.success.message"),
+    });
+    void Promise.allSettled([utils.integration.invalidate(), utils.widget.invalidate()]);
+    onSuccess?.();
+    if (!embedded) {
+      void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
+    }
+  };
 
   const isInitialSecretKinds =
     initialSecretsKinds.every((kind) => form.values.secrets.some((secret) => secret.kind === kind)) &&
     form.values.secrets.length === initialSecretsKinds.length;
 
-  const formFields = (
-    <Stack>
-      <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
+  return (
+    <form onSubmit={form.onSubmit(async (values) => await handleSubmitAsync(values))}>
+      <Stack>
+        <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-      {hasUrlSecret ? null : (
-        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-      )}
+        {hasUrlSecret ? null : (
+          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        )}
 
-      <Fieldset legend={t("integration.secrets.title")}>
-        <Stack gap="sm">
-          {allSecretKinds.length > 1 && (
-            <SecretKindsSegmentedControl defaultKinds={initialSecretsKinds} secretKinds={allSecretKinds} form={form} />
-          )}
-          {!isInitialSecretKinds
-            ? null
-            : form.values.secrets.map((secret, index) => (
-                <SecretCard
-                  key={secret.kind}
-                  secret={secretsMap.get(secret.kind) ?? { kind: secret.kind, value: null, updatedAt: null }}
-                  onCancel={() =>
-                    new Promise((resolve) => {
-                      // When nothing changed, just close the secret card
-                      if ((secret.value ?? "") === (secretsMap.get(secret.kind)?.value ?? "")) {
-                        return resolve(true);
-                      }
-                      openConfirmModal({
-                        title: t("integration.secrets.reset.title"),
-                        children: t("integration.secrets.reset.message"),
-                        onCancel: () => resolve(false),
-                        onConfirm: () => {
-                          form.setFieldValue(`secrets.${index}.value`, secretsMap.get(secret.kind)?.value ?? "");
-                          resolve(true);
-                        },
-                      });
-                    })
-                  }
-                >
-                  <IntegrationSecretInput
-                    label={t(`integration.secrets.kind.${secret.kind}.newLabel`)}
+        <Fieldset legend={t("integration.secrets.title")}>
+          <Stack gap="sm">
+            {allSecretKinds.length > 1 && (
+              <SecretKindsSegmentedControl
+                defaultKinds={initialSecretsKinds}
+                secretKinds={allSecretKinds}
+                form={form}
+              />
+            )}
+            {!isInitialSecretKinds
+              ? null
+              : form.values.secrets.map((secret, index) => (
+                  <SecretCard
                     key={secret.kind}
-                    kind={secret.kind}
+                    secret={secretsMap.get(secret.kind) ?? { kind: secret.kind, value: null, updatedAt: null }}
+                    onCancel={() =>
+                      new Promise((resolve) => {
+                        // When nothing changed, just close the secret card
+                        if ((secret.value ?? "") === (secretsMap.get(secret.kind)?.value ?? "")) {
+                          return resolve(true);
+                        }
+                        openConfirmModal({
+                          title: t("integration.secrets.reset.title"),
+                          children: t("integration.secrets.reset.message"),
+                          onCancel: () => resolve(false),
+                          onConfirm: () => {
+                            form.setFieldValue(`secrets.${index}.value`, secretsMap.get(secret.kind)?.value ?? "");
+                            resolve(true);
+                          },
+                        });
+                      })
+                    }
+                  >
+                    <IntegrationSecretInput
+                      label={t(`integration.secrets.kind.${secret.kind}.newLabel`)}
+                      key={secret.kind}
+                      kind={secret.kind}
+                      {...form.getInputProps(`secrets.${index}.value`)}
+                    />
+                  </SecretCard>
+                ))}
+            {isInitialSecretKinds
+              ? null
+              : form.values.secrets.map(({ kind }, index) => (
+                  <IntegrationSecretInput
+                    withAsterisk
+                    key={kind}
+                    kind={kind}
                     {...form.getInputProps(`secrets.${index}.value`)}
                   />
-                </SecretCard>
-              ))}
-          {isInitialSecretKinds
-            ? null
-            : form.values.secrets.map(({ kind }, index) => (
-                <IntegrationSecretInput
-                  withAsterisk
-                  key={kind}
-                  kind={kind}
-                  {...form.getInputProps(`secrets.${index}.value`)}
-                />
-              ))}
-          {form.values.secrets.length === 0 && (
-            <Alert icon={<IconInfoCircle size={"1rem"} />} color={"blue"}>
-              <Text c={"blue"}>{t("integration.secrets.noSecretsRequired.text")}</Text>
-            </Alert>
-          )}
-        </Stack>
-      </Fieldset>
+                ))}
+            {form.values.secrets.length === 0 && (
+              <Alert icon={<IconInfoCircle size={"1rem"} />} color={"blue"}>
+                <Text c={"blue"}>{t("integration.secrets.noSecretsRequired.text")}</Text>
+              </Alert>
+            )}
+          </Stack>
+        </Fieldset>
 
-      <IntegrationLinkApp value={form.values.app} onChange={(app) => form.setFieldValue("app", app)} />
+        <IntegrationLinkApp value={form.values.app} onChange={(app) => form.setFieldValue("app", app)} />
 
-      {error !== null && (
-        <div ref={errorRef} role="alert" tabIndex={-1}>
-          <IntegrationTestConnectionError error={error} url={form.values.url} />
-        </div>
-      )}
+        {error !== null && (
+          <div ref={errorRef} role="alert" tabIndex={-1}>
+            <IntegrationTestConnectionError error={error} url={form.values.url} />
+          </div>
+        )}
 
-      {!hideButtons && (
         <Group justify="end" align="center">
-          <Button variant="default" component={Link} href="/manage/integrations">
-            {t("common.action.backToOverview")}
-          </Button>
+          {!embedded && (
+            <Button variant="default" component={Link} href="/manage/integrations">
+              {t("common.action.backToOverview")}
+            </Button>
+          )}
           <Button type="submit" loading={isPending}>
             {t("integration.testConnection.action.edit")}
           </Button>
         </Group>
-      )}
-    </Stack>
+      </Stack>
+    </form>
   );
-
-  if (hideButtons) {
-    return formFields;
-  }
-
-  return <form onSubmit={form.onSubmit(async (values) => await handleSubmitAsync(values))}>{formFields}</form>;
 };
 
 type FormType = z.infer<typeof formSchema>;

apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx

@@ -29,7 +29,6 @@ export const AppearanceSettingsForm = ({ form }: AppearanceSettingsFormProps) =>
         }))}
         {...form.getInputProps("defaultColorScheme")}
         SelectOption={AppearanceCustomOption}
-        withinPortal
       />
     </SectionCard>
   );

apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx

@@ -2,7 +2,7 @@
 
 import { Switch, Text } from "@mantine/core";
 
-import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
 import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
@@ -12,11 +12,11 @@ import type { FormValues } from "./settings-form";
 
 interface BoardSettingsFormProps {
   form: UseFormReturnType<FormValues>;
-  selectableBoards: RouterOutputs["board"]["getPublicBoards"];
 }
 
-export const BoardSettingsForm = ({ form, selectableBoards }: BoardSettingsFormProps) => {
+export const BoardSettingsForm = ({ form }: BoardSettingsFormProps) => {
   const tBoard = useScopedI18n("management.page.settings.section.board");
+  const [selectableBoards] = clientApi.board.getPublicBoards.useSuspenseQuery();
 
   return (
     <SectionCard title={tBoard("title")}>
@@ -26,7 +26,6 @@ export const BoardSettingsForm = ({ form, selectableBoards }: BoardSettingsFormP
         clearable
         boards={selectableBoards}
         {...form.getInputProps("homeBoardId")}
-        withinPortal
       />
 
       <BoardSelect
@@ -35,7 +34,6 @@ export const BoardSettingsForm = ({ form, selectableBoards }: BoardSettingsFormP
         clearable
         boards={selectableBoards}
         {...form.getInputProps("mobileHomeBoardId")}
-        withinPortal
       />
 
       <Text fw={500}>{tBoard("status.title")}</Text>

apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx

@@ -22,7 +22,6 @@ export const CultureSettingsForm = ({ form }: CultureSettingsFormProps) => {
         label={tCulture("defaultLocale.label")}
         {...localeInputProps}
         value={localeInputProps.value as SupportedLanguage}
-        withinPortal
       />
     </SectionCard>
   );

apps/nextjs/src/app/[locale]/manage/settings/_components/search-settings-form.tsx

@@ -2,7 +2,7 @@
 
 import { Select } from "@mantine/core";
 
-import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
 import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
@@ -11,11 +11,11 @@ import type { FormValues } from "./settings-form";
 
 interface SearchSettingsFormProps {
   form: UseFormReturnType<FormValues>;
-  selectableSearchEngines: RouterOutputs["searchEngine"]["getSelectable"];
 }
 
-export const SearchSettingsForm = ({ form, selectableSearchEngines }: SearchSettingsFormProps) => {
+export const SearchSettingsForm = ({ form }: SearchSettingsFormProps) => {
   const tSearch = useScopedI18n("management.page.settings.section.search");
+  const [selectableSearchEngines] = clientApi.searchEngine.getSelectable.useSuspenseQuery({ withIntegrations: false });
 
   return (
     <SectionCard title={tSearch("title")}>

apps/nextjs/src/app/[locale]/manage/settings/_components/settings-form.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from "react";
 import { Button, Stack } from "@mantine/core";
 import { z } from "zod/v4";
 
-import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
@@ -59,11 +58,9 @@ const buildInitialValues = (initialData: ServerSettings): FormValues => ({
 
 interface SettingsFormProps {
   initialData: ServerSettings;
-  selectableBoards: RouterOutputs["board"]["getPublicBoards"];
-  selectableSearchEngines: RouterOutputs["searchEngine"]["getSelectable"];
 }
 
-export const SettingsForm = ({ initialData, selectableBoards, selectableSearchEngines }: SettingsFormProps) => {
+export const SettingsForm = ({ initialData }: SettingsFormProps) => {
   const t = useI18n();
   const tSettings = useScopedI18n("management.page.settings");
 
@@ -172,13 +169,13 @@ export const SettingsForm = ({ initialData, selectableBoards, selectableSearchEn
   return (
     <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
       <Stack gap="xl">
-        <BoardSettingsForm form={form} selectableBoards={selectableBoards} />
-        <UserSettingsForm form={form} />
-        <SearchSettingsForm form={form} selectableSearchEngines={selectableSearchEngines} />
-        <AppearanceSettingsForm form={form} />
-        <CultureSettingsForm form={form} />
         <AnalyticsSettings form={form} />
         <CrawlingAndIndexingSettings form={form} />
+        <BoardSettingsForm form={form} />
+        <UserSettingsForm form={form} />
+        <SearchSettingsForm form={form} />
+        <AppearanceSettingsForm form={form} />
+        <CultureSettingsForm form={form} />
 
         {form.isDirty() && (
           <UnsavedChangesBar>

apps/nextjs/src/app/[locale]/manage/settings/page.tsx

@@ -23,20 +23,12 @@ export default async function SettingsPage() {
     notFound();
   }
 
-  const [serverSettings, selectableBoards, selectableSearchEngines, tSettings] = await Promise.all([
-    api.serverSettings.getAll(),
-    api.board.getPublicBoards(),
-    api.searchEngine.getSelectable({ withIntegrations: false }),
-    getScopedI18n("management.page.settings"),
-  ]);
+  const serverSettings = await api.serverSettings.getAll();
+  const tSettings = await getScopedI18n("management.page.settings");
 
   return (
     <ManagePageLayout title={tSettings("title")}>
-      <SettingsForm
-        initialData={serverSettings}
-        selectableBoards={selectableBoards}
-        selectableSearchEngines={selectableSearchEngines}
-      />
+      <SettingsForm initialData={serverSettings} />
     </ManagePageLayout>
   );
 }

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.spec.ts

@@ -3,7 +3,7 @@ import { describe, expect, test } from "vitest";
 import {
   dismissDockerReconciliationCandidate,
   filterDockerReconciliationInbox,
-  getTemplateUrl,
+  getValidDockerServiceUrl,
 } from "./docker-reconciliation-inbox";
 
 const candidates = [
@@ -37,44 +37,9 @@ describe("Docker reconciliation inbox", () => {
     expect(dismissDockerReconciliationCandidate(dismissed, "home:new")).toBe(dismissed);
   });
 
-  test("builds service URLs from the server origin and published ports", () => {
-    expect(
-      getTemplateUrl(
-        {
-          container: { name: "Custom service", ports: [{ PrivatePort: 3000, Type: "tcp" }] },
-          match: null,
-        },
-        "home.lan",
-        "hostPort",
-      ),
-    ).toBe("http://home.lan");
-
-    expect(
-      getTemplateUrl(
-        {
-          container: {
-            name: "Sonarr",
-            ports: [
-              { PrivatePort: 3000, PublicPort: 3000, Type: "tcp" },
-              { PrivatePort: 8989, PublicPort: 9999, Type: "tcp" },
-            ],
-          },
-          match: { kind: "sonarr" },
-        },
-        "home.lan",
-        "hostPort",
-      ),
-    ).toBe("http://home.lan:9999");
-
-    expect(
-      getTemplateUrl(
-        {
-          container: { name: "Sonarr", ports: [{ PrivatePort: 8989, PublicPort: 9999, Type: "tcp" }] },
-          match: { kind: "sonarr" },
-        },
-        "",
-        "hostPort",
-      ),
-    ).toBe("");
+  test("accepts only HTTP service URLs", () => {
+    expect(getValidDockerServiceUrl("https://service.example.com")).toBe("https://service.example.com/");
+    expect(getValidDockerServiceUrl("ftp://service.example.com")).toBeNull();
+    expect(getValidDockerServiceUrl("service.example.com")).toBeNull();
   });
 });

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.ts

@@ -1,6 +1,3 @@
-import type { DockerServiceMatch, DockerServicePort, UrlTemplateMode } from "@homarr/definitions";
-import { buildAppUrl, buildIntegrationUrl, getIntegrationDefaultPort } from "@homarr/definitions";
-
 export type DockerReconciliationInboxFilter = "attention" | "represented" | "all";
 
 interface DockerReconciliationInboxCandidate {
@@ -27,28 +24,11 @@ export const filterDockerReconciliationInbox = <Candidate extends DockerReconcil
 export const dismissDockerReconciliationCandidate = (dismissedCandidateKeys: string[], candidateKey: string) =>
   dismissedCandidateKeys.includes(candidateKey) ? dismissedCandidateKeys : [...dismissedCandidateKeys, candidateKey];
 
-interface DockerTemplateCandidate {
-  container: {
-    name: string;
-    ports?: DockerServicePort[];
-  };
-  match: Pick<DockerServiceMatch, "kind"> | null;
-}
-
-export const getTemplateUrl = (candidate: DockerTemplateCandidate, serverOrigin: string, urlMode: UrlTemplateMode) => {
-  if (!serverOrigin.trim()) return "";
-
-  const tcpPorts = candidate.container.ports?.filter(({ Type }) => Type.toLowerCase() === "tcp") ?? [];
-  let publishedPort = tcpPorts.find(({ PublicPort }) => PublicPort)?.PublicPort;
-
-  if (candidate.match) {
-    const defaultPort = getIntegrationDefaultPort(candidate.match.kind);
-    const preferredPort = tcpPorts.find(
-      ({ PrivatePort, PublicPort }) => PrivatePort === defaultPort && PublicPort !== undefined,
-    );
-    publishedPort = preferredPort?.PublicPort ?? publishedPort;
-    return buildIntegrationUrl(candidate.match.kind, serverOrigin, urlMode, publishedPort);
+export const getValidDockerServiceUrl = (value: string) => {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : null;
+  } catch {
+    return null;
   }
-
-  return buildAppUrl(candidate.container.name, serverOrigin, urlMode, publishedPort);
 };

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation.tsx

@@ -1,72 +1,46 @@
 "use client";
 
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import {
-  Accordion,
-  ActionIcon,
   Alert,
-  Autocomplete,
   Avatar,
   Badge,
   Button,
-  Collapse,
-  Divider,
+  Card,
   Group,
-  Paper,
   SegmentedControl,
+  Select,
   SimpleGrid,
   Stack,
   Text,
-  ThemeIcon,
-  Tooltip,
+  TextInput,
 } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
-import {
-  IconAlertTriangle,
-  IconApps,
-  IconCheck,
-  IconChevronDown,
-  IconEye,
-  IconEyeOff,
-  IconBrandDocker,
-  IconMinus,
-  IconPlugConnected,
-  IconRefresh,
-  IconSettings,
-} from "@tabler/icons-react";
+import { IconAlertTriangle, IconArrowRight, IconEyeOff, IconPlugConnected, IconRefresh } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import type { UrlTemplateMode } from "@homarr/definitions";
 import { getIntegrationName } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { AddDockerAppToHomarr } from "@homarr/modals-collection";
 import { showErrorNotification } from "@homarr/notifications";
-import { normalizeServiceUrl, ServiceUrlTemplate } from "@homarr/onboarding";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useScopedI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
-import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
 import type { DockerReconciliationInboxFilter } from "./docker-reconciliation-inbox";
 import {
   dismissDockerReconciliationCandidate,
   filterDockerReconciliationInbox,
-  getTemplateUrl,
+  getValidDockerServiceUrl,
 } from "./docker-reconciliation-inbox";
 
 type ReconciliationCandidate = RouterOutputs["docker"]["reconcileServices"]["candidates"][number];
 type ServiceHealth = RouterOutputs["docker"]["getServiceHealth"]["services"][number];
 
-export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOrigin: string }) => {
+export const DockerReconciliation = () => {
   const t = useScopedI18n("docker.reconciliation");
-  const tGlobal = useI18n();
   const utils = clientApi.useUtils();
-  const panelId = useId();
-  const [isOpen, setIsOpen] = useLocalStorage({
-    key: "homarr-docker-reconciliation-open",
-    defaultValue: false,
-  });
   const reconciliation = clientApi.docker.reconcileServices.useQuery();
-  const health = clientApi.docker.getServiceHealth.useQuery(undefined, { enabled: isOpen });
+  const health = clientApi.docker.getServiceHealth.useQuery();
   const refreshInventory = clientApi.docker.refreshInventory.useMutation({
     async onSuccess() {
       await Promise.all([
@@ -87,14 +61,6 @@ export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOri
     key: "homarr-docker-reconciliation-dismissed",
     defaultValue: [],
   });
-  const [serverOrigin, setServerOrigin] = useLocalStorage({
-    key: "homarr-docker-service-origin",
-    defaultValue: defaultServerOrigin,
-  });
-  const [urlMode, setUrlMode] = useLocalStorage<UrlTemplateMode>({
-    key: "homarr-docker-service-url-mode",
-    defaultValue: "hostPort",
-  });
 
   if (reconciliation.isError) {
     return (
@@ -102,7 +68,7 @@ export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOri
         <Stack gap="sm">
           <Text size="sm">{t("loadError.message")}</Text>
           <Button variant="light" color="red" size="xs" w="fit-content" onClick={() => void reconciliation.refetch()}>
-            {tGlobal("common.action.tryAgain")}
+            {t("action.retry")}
           </Button>
         </Stack>
       </Alert>
@@ -113,274 +79,231 @@ export const DockerReconciliation = ({ defaultServerOrigin }: { defaultServerOri
 
   const unavailableEndpoints = reconciliation.data.endpoints.filter(({ status }) => status === "unavailable");
   const candidates = filterDockerReconciliationInbox(reconciliation.data.candidates, filter, dismissedCandidateKeys);
-  const attentionCount = reconciliation.data.candidates.filter(
-    ({ candidateKey, state }) =>
-      ["newRecognized", "newApp", "moved"].includes(state) && !dismissedCandidateKeys.includes(candidateKey),
-  ).length;
+  const attentionCount = health.data
+    ? health.data.services.filter(
+        ({ key, status }) =>
+          ["newRecognized", "newApp", "moved"].includes(status) && !dismissedCandidateKeys.includes(key),
+      ).length
+    : 0;
   const isRefreshing = refreshInventory.isPending || reconciliation.isFetching || health.isFetching;
-  const toggleLabel = isOpen ? tGlobal("common.action.hide") : t("action.review");
 
   return (
-    <Paper withBorder p="sm">
-      <Stack gap={isOpen ? "sm" : 0}>
+    <Card withBorder>
+      <Stack>
         <Group justify="space-between" align="start">
-          <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-            <ThemeIcon variant="light" size="lg" radius="md">
-              <IconBrandDocker size={18} />
-            </ThemeIcon>
-            <div>
-              <Group gap="xs">
-                <Text fw={600}>{t("title")}</Text>
-                <Badge variant="light" color={attentionCount > 0 ? "blue" : "gray"} aria-live="polite">
-                  {t("suggestions", { count: String(attentionCount) })}
-                </Badge>
-              </Group>
-            </div>
-          </Group>
-          <Button
-            variant="subtle"
-            size="compact-sm"
-            rightSection={
-              <IconChevronDown
-                size={15}
-                style={{ transform: isOpen ? "rotate(180deg)" : undefined, transition: "transform 150ms ease" }}
-              />
-            }
-            aria-expanded={isOpen}
-            aria-controls={panelId}
-            onClick={() => setIsOpen((current) => !current)}
-          >
-            {toggleLabel}
-          </Button>
+          <div>
+            <Group gap="xs">
+              <IconPlugConnected size={20} />
+              <Text fw={600}>{t("title")}</Text>
+            </Group>
+            <Text c="dimmed" size="sm">
+              {t("description")}
+            </Text>
+          </div>
+          {health.data && <Badge variant="light">{t("attention", { count: String(attentionCount) })}</Badge>}
         </Group>
 
-        <Collapse id={panelId} expanded={isOpen}>
-          <Divider mb="sm" />
-          <Stack gap="sm">
-            <ServiceUrlTemplate
-              serverOrigin={serverOrigin}
-              onServerOriginChange={setServerOrigin}
-              mode={urlMode}
-              onModeChange={setUrlMode}
-            />
+        <Group justify="space-between">
+          <SegmentedControl
+            value={filter}
+            onChange={(value) => setFilter(value as DockerReconciliationInboxFilter)}
+            data={[
+              { value: "attention", label: t("filter.attention") },
+              { value: "represented", label: t("filter.represented") },
+              { value: "all", label: t("filter.all") },
+            ]}
+          />
+          <Group gap="xs">
+            {dismissedCandidateKeys.length > 0 && (
+              <Button variant="subtle" size="xs" onClick={() => setDismissedCandidateKeys([])}>
+                {t("action.restoreDismissed", { count: String(dismissedCandidateKeys.length) })}
+              </Button>
+            )}
+            <Button
+              variant="light"
+              size="xs"
+              loading={isRefreshing}
+              leftSection={<IconRefresh size={14} />}
+              onClick={() => refreshInventory.mutate()}
+            >
+              {t("action.refresh")}
+            </Button>
+          </Group>
+        </Group>
 
-            <Group justify="space-between">
-              <SegmentedControl
-                size="xs"
-                value={filter}
-                onChange={(value) => setFilter(value as DockerReconciliationInboxFilter)}
-                data={[
-                  { value: "attention", label: t("filter.attention") },
-                  { value: "represented", label: t("filter.represented") },
-                  { value: "all", label: t("filter.all") },
-                ]}
+        {unavailableEndpoints.length > 0 && (
+          <Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
+            {t("endpointUnavailable", { names: unavailableEndpoints.map(({ name }) => name).join(", ") })}
+          </Alert>
+        )}
+
+        {candidates.length === 0 ? (
+          <Text c="dimmed" size="sm">
+            {reconciliation.data.candidates.length === 0 ? t("empty") : t("emptyFilter")}
+          </Text>
+        ) : (
+          <SimpleGrid cols={{ base: 1, lg: 2 }}>
+            {candidates.map((candidate) => (
+              <DockerReconciliationCandidate
+                key={candidate.candidateKey}
+                candidate={candidate}
+                health={health.data?.services.find(({ key }) => key === candidate.candidateKey)}
+                onDismiss={() =>
+                  setDismissedCandidateKeys((current) =>
+                    dismissDockerReconciliationCandidate(current, candidate.candidateKey),
+                  )
+                }
               />
-              <Group gap="xs">
-                {dismissedCandidateKeys.length > 0 && (
-                  <Button variant="subtle" size="compact-xs" onClick={() => setDismissedCandidateKeys([])}>
-                    {t("action.restoreDismissed", { count: String(dismissedCandidateKeys.length) })}
-                  </Button>
-                )}
-                <Button
-                  variant="light"
-                  size="compact-xs"
-                  loading={isRefreshing}
-                  leftSection={<IconRefresh size={14} />}
-                  onClick={() => refreshInventory.mutate()}
-                >
-                  {tGlobal("docker.action.refresh.label")}
-                </Button>
-              </Group>
-            </Group>
-
-            {unavailableEndpoints.length > 0 && (
-              <Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
-                {t("endpointUnavailable", { names: unavailableEndpoints.map(({ name }) => name).join(", ") })}
-              </Alert>
-            )}
-
-            {candidates.length === 0 ? (
-              <Text c="dimmed" size="sm">
-                {reconciliation.data.candidates.length === 0 ? t("empty") : t("emptyFilter")}
-              </Text>
-            ) : (
-              <Accordion multiple variant="separated" radius="sm" chevron={null}>
-                {candidates.map((candidate) => (
-                  <DockerReconciliationCandidate
-                    key={candidate.candidateKey}
-                    candidate={candidate}
-                    health={health.data?.services.find(({ key }) => key === candidate.candidateKey)}
-                    serverOrigin={serverOrigin}
-                    urlMode={urlMode}
-                    onDismiss={() =>
-                      setDismissedCandidateKeys((current) =>
-                        dismissDockerReconciliationCandidate(current, candidate.candidateKey),
-                      )
-                    }
-                  />
-                ))}
-              </Accordion>
-            )}
-          </Stack>
-        </Collapse>
+            ))}
+          </SimpleGrid>
+        )}
       </Stack>
-    </Paper>
+    </Card>
   );
 };
 
 const DockerReconciliationCandidate = ({
   candidate,
   health,
-  serverOrigin,
-  urlMode,
   onDismiss,
 }: {
   candidate: ReconciliationCandidate;
   health: ServiceHealth | undefined;
-  serverOrigin: string;
-  urlMode: UrlTemplateMode;
   onDismiss: () => void;
 }) => {
   const t = useScopedI18n("docker.reconciliation");
-  const tGlobal = useI18n();
-  const { openModal: openAppModal } = useModalAction(AddDockerAppToHomarr);
-  const { openModal: openIntegrationModal } = useModalAction(IntegrationSelectModal);
-  const templateUrl = getTemplateUrl(candidate, serverOrigin, urlMode);
-  const urlSuggestions = Array.from(
-    new Set([templateUrl, ...candidate.urlCandidates.map(({ url }) => url)].filter((url) => url.length > 0)),
-  );
-  const initialUrl = urlSuggestions[0] ?? "";
-  const [url, setUrl] = useState(initialUrl);
-  const isUrlEdited = useRef(false);
-  const target = getCandidateTarget(candidate);
+  const { openModal } = useModalAction(AddDockerAppToHomarr);
+  const initialUrlCandidate =
+    candidate.urlCandidates.find(
+      ({ url, scopes }) => url.length > 0 && (candidate.match ? true : scopes.includes("browser")),
+    ) ?? candidate.urlCandidates.find(({ source }) => source === "manual");
+  const [selectedCandidateId, setSelectedCandidateId] = useState(initialUrlCandidate?.id ?? null);
+  const [url, setUrl] = useState(initialUrlCandidate?.url ?? "");
+  const selectedCandidate = candidate.urlCandidates.find(({ id }) => id === selectedCandidateId);
+  const validatedUrl = getValidDockerServiceUrl(url);
+  const isInvalidUrl = url.length > 0 && validatedUrl === null;
+  const target = getCandidateTarget(candidate, validatedUrl ?? "");
   const actionNeedsUrl = target.kind === "createApp" || target.kind === "setupIntegration";
-  const visibleHealthLayers =
-    health?.layers.filter(({ status }) => status !== "notApplicable" && status !== "notObserved") ?? [];
+  const isActionDisabled = actionNeedsUrl && validatedUrl === null;
 
   useEffect(() => {
-    if (isUrlEdited.current) return;
-    setUrl(initialUrl);
-  }, [initialUrl]);
+    setSelectedCandidateId(initialUrlCandidate?.id ?? null);
+    setUrl(initialUrlCandidate?.url ?? "");
+  }, [initialUrlCandidate?.id, initialUrlCandidate?.url]);
 
   return (
-    <Accordion.Item value={candidate.candidateKey}>
-      <Group wrap="nowrap" gap={4} pr="sm">
-        <Accordion.Control
-          style={{ flex: 1 }}
-          icon={
-            <Avatar src={candidate.container.iconUrl} radius="sm" size="sm">
+    <Card withBorder padding="md">
+      <Stack gap="sm">
+        <Group justify="space-between" align="start" wrap="nowrap">
+          <Group wrap="nowrap">
+            <Avatar src={candidate.container.iconUrl} radius="sm">
               {candidate.container.name.at(0)?.toUpperCase()}
             </Avatar>
-          }
-        >
-          <div style={{ minWidth: 0 }}>
-            <Group gap="xs" wrap="nowrap">
-              <Text fw={600} size="sm" truncate>
+            <div>
+              <Text fw={600} lineClamp={1}>
                 {candidate.container.name}
               </Text>
-              <Badge color={stateColor(candidate.state)} variant="light" size="xs">
-                {t(`state.${candidate.state}`)}
-              </Badge>
-            </Group>
+              <Text c="dimmed" size="xs">
+                {candidate.endpointName}
+              </Text>
+            </div>
+          </Group>
+          <Badge color={stateColor(candidate.state)} variant="light">
+            {t(`state.${candidate.state}`)}
+          </Badge>
+        </Group>
+
+        {candidate.match && (
+          <Group gap="xs">
+            <Badge variant="outline">{candidate.match.kind}</Badge>
             <Text c="dimmed" size="xs">
-              {candidate.endpointName}
+              {t("match", { confidence: t(`confidence.${candidate.match.confidence}`) })}
             </Text>
+          </Group>
+        )}
+
+        {candidate.representation.signals.ambiguous && (
+          <Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
+            {t("ambiguous")}
+          </Alert>
+        )}
+
+        {health && (
+          <div>
+            <Text c="dimmed" size="xs" mb={4}>
+              {t("health.title")}
+            </Text>
+            <Group gap={4}>
+              {health.layers.map((layer) => (
+                <Badge key={layer.layer} color={healthStatusColor(layer.status)} variant="dot" size="sm">
+                  {t(`health.layer.${layer.layer}`)}: {t(`health.status.${layer.status}`)}
+                </Badge>
+              ))}
+            </Group>
           </div>
-        </Accordion.Control>
-        <Group gap={4} wrap="nowrap">
-          {target.kind === "createApp" && (
+        )}
+
+        <Select
+          label={t("url.label")}
+          description={selectedCandidate ? t(`reason.${selectedCandidate.reason}`) : t("reason.manualHostRequired")}
+          value={selectedCandidateId}
+          data={candidate.urlCandidates.map((item) => ({
+            value: item.id,
+            label: item.url || t("url.manual"),
+          }))}
+          onChange={(value) => {
+            setSelectedCandidateId(value);
+            setUrl(candidate.urlCandidates.find(({ id }) => id === value)?.url ?? "");
+          }}
+        />
+        <TextInput
+          label={t("url.inputLabel")}
+          aria-label={t("url.inputLabel")}
+          value={url}
+          placeholder="https://service.example.com"
+          error={isInvalidUrl ? t("url.invalid") : undefined}
+          onChange={(event) => setUrl(event.currentTarget.value)}
+        />
+
+        <Group justify="space-between">
+          <Button variant="subtle" color="gray" leftSection={<IconEyeOff size={16} />} onClick={onDismiss}>
+            {t("action.dismiss")}
+          </Button>
+          {target.kind === "createApp" ? (
             <Button
               variant="light"
-              size="compact-xs"
-              leftSection={<IconApps size={14} />}
+              rightSection={<IconArrowRight size={16} />}
+              disabled={isActionDisabled}
               onClick={() =>
-                openAppModal({
+                openModal({
                   selectedContainers: [candidate.container],
-                  initialUrls: [(normalizeServiceUrl(url) ?? url) || null],
+                  initialUrls: validatedUrl ? [validatedUrl] : undefined,
                 })
               }
             >
-              {tGlobal("integration.field.createApp.label")}
+              {t("action.createApp")}
             </Button>
-          )}
-          {target.kind === "setupIntegration" && (
-            <Button
-              variant="light"
-              size="compact-xs"
-              leftSection={<IconPlugConnected size={14} />}
-              onClick={() =>
-                openIntegrationModal({
-                  initialKind: target.integrationKind,
-                  initialName: candidate.container.name,
-                  initialUrl: normalizeServiceUrl(url) ?? url,
-                })
-              }
-            >
-              {t("action.setupIntegration")}
-            </Button>
-          )}
-          {(target.kind === "reviewIntegration" || target.kind === "viewRepresentation") && (
+          ) : (
             <Button
               component={Link}
               href={target.href}
               variant="light"
-              size="compact-xs"
-              leftSection={target.kind === "reviewIntegration" ? <IconSettings size={14} /> : <IconEye size={14} />}
+              rightSection={<IconArrowRight size={16} />}
+              disabled={isActionDisabled}
+              onClick={(event) => {
+                if (isActionDisabled) event.preventDefault();
+              }}
             >
               {t(`action.${target.kind}`)}
             </Button>
           )}
-          <Tooltip label={t("action.dismiss")} events={{ hover: true, focus: true, touch: false }}>
-            <ActionIcon variant="subtle" color="gray" size="sm" aria-label={t("action.dismiss")} onClick={onDismiss}>
-              <IconEyeOff size={15} />
-            </ActionIcon>
-          </Tooltip>
         </Group>
-      </Group>
-
-      <Accordion.Panel>
-        <Stack gap="sm">
-          {candidate.representation.signals.ambiguous && (
-            <Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
-              {t("ambiguous")}
-            </Alert>
-          )}
-
-          {visibleHealthLayers.length > 0 && (
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xs">
-              {visibleHealthLayers.map((layer) => (
-                <Group key={layer.layer} gap="xs" wrap="nowrap">
-                  <HealthStatusIcon status={layer.status} />
-                  <Text size="xs">
-                    {t(`health.layer.${layer.layer}`)} ·{" "}
-                    <Text component="span" c="dimmed" inherit>
-                      {t(`health.status.${layer.status}`)}
-                    </Text>
-                  </Text>
-                </Group>
-              ))}
-            </SimpleGrid>
-          )}
-
-          {actionNeedsUrl && (
-            <Autocomplete
-              label={tGlobal("integration.field.url.label")}
-              value={url}
-              data={urlSuggestions}
-              placeholder={t("url.manual")}
-              onChange={(value) => {
-                isUrlEdited.current = true;
-                setUrl(value);
-              }}
-            />
-          )}
-        </Stack>
-      </Accordion.Panel>
-    </Accordion.Item>
+      </Stack>
+    </Card>
   );
 };
 
-const getCandidateTarget = (candidate: ReconciliationCandidate) => {
+const getCandidateTarget = (candidate: ReconciliationCandidate, url: string) => {
   if (candidate.representation.signals.ambiguous) {
     if (candidate.nextAction === "reviewIntegration" && candidate.match) {
       const params = new URLSearchParams({ search: getIntegrationName(candidate.match.kind) });
@@ -389,7 +312,9 @@ const getCandidateTarget = (candidate: ReconciliationCandidate) => {
     return { kind: "viewRepresentation" as const, href: "/manage/apps" };
   }
   if (candidate.state === "newRecognized" && candidate.match) {
-    return { kind: "setupIntegration" as const, integrationKind: candidate.match.kind };
+    const params = new URLSearchParams({ kind: candidate.match.kind, name: candidate.container.name });
+    if (url) params.set("url", url);
+    return { kind: "setupIntegration" as const, href: `/manage/integrations/new?${params.toString()}` };
   }
 
   if (candidate.state === "newApp") return { kind: "createApp" as const };
@@ -412,21 +337,8 @@ const stateColor = (state: ReconciliationCandidate["state"]) => {
   return "blue";
 };
 
-const HealthStatusIcon = ({ status }: { status: ServiceHealth["layers"][number]["status"] }) => {
-  let color = "gray";
-  let icon = <IconMinus size={12} />;
-
-  if (["available", "configured", "linked"].includes(status)) {
-    color = "green";
-    icon = <IconCheck size={12} />;
-  } else if (["missing", "changed", "unused"].includes(status)) {
-    color = "yellow";
-    icon = <IconAlertTriangle size={12} />;
-  }
-
-  return (
-    <ThemeIcon color={color} variant="light" radius="xl" size="sm">
-      {icon}
-    </ThemeIcon>
-  );
+const healthStatusColor = (status: ServiceHealth["layers"][number]["status"]) => {
+  if (["available", "configured", "linked"].includes(status)) return "green";
+  if (["missing", "changed", "unused"].includes(status)) return "yellow";
+  return "gray";
 };

apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx

@@ -1,10 +1,8 @@
-import { headers } from "next/headers";
 import { notFound } from "next/navigation";
 import { Stack, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
-import { extractBaseUrlFromHeaders } from "@homarr/common";
 import { env } from "@homarr/docker/env";
 import { getScopedI18n } from "@homarr/translation/server";
 
@@ -18,10 +16,7 @@ export default async function DockerPage() {
     notFound();
   }
 
-  const [{ containers, endpoints, timestamp }, requestHeaders] = await Promise.all([
-    api.docker.getContainers(),
-    headers(),
-  ]);
+  const { containers, endpoints, timestamp } = await api.docker.getContainers();
   const tDocker = await getScopedI18n("docker");
 
   return (
@@ -29,7 +24,7 @@ export default async function DockerPage() {
       <DynamicBreadcrumb />
       <Stack>
         <Title order={1}>{tDocker("title")}</Title>
-        <DockerReconciliation defaultServerOrigin={extractBaseUrlFromHeaders(requestHeaders)} />
+        <DockerReconciliation />
         <DockerTable initialData={{ containers, endpoints, timestamp }} />
       </Stack>
     </>

apps/nextjs/src/app/[locale]/manage/tools/logs/client.tsx

@@ -2,11 +2,7 @@
 
 import dynamic from "next/dynamic";
 
-interface ClientSideTerminalComponentProps {
-  focusTimestamp?: number;
-}
-
-export const ClientSideTerminalComponent = dynamic<ClientSideTerminalComponentProps>(
+export const ClientSideTerminalComponent = dynamic(
   () => import("./terminal").then(({ TerminalComponent }) => TerminalComponent),
   {
     ssr: false,

apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx

@@ -29,25 +29,12 @@ export async function generateMetadata() {
   };
 }
 
-interface LogsManagementPageProps {
-  searchParams: Promise<{ focus?: string | string[] }>;
-}
-
-export default async function LogsManagementPage({ searchParams }: LogsManagementPageProps) {
+export default async function LogsManagementPage() {
   const session = await auth();
   if (!session?.user.permissions.includes("other-view-logs")) {
     notFound();
   }
 
-  const focus = (await searchParams).focus;
-  let focusTimestamp: number | undefined;
-  if (typeof focus === "string") {
-    const parsedFocusTimestamp = Number(focus);
-    if (Number.isSafeInteger(parsedFocusTimestamp) && parsedFocusTimestamp > 0) {
-      focusTimestamp = parsedFocusTimestamp;
-    }
-  }
-
   return (
     <LogContextProvider defaultLevel={logsEnv.LEVEL}>
       <Group justify="space-between" align="center" wrap="nowrap">
@@ -58,7 +45,7 @@ export default async function LogsManagementPage({ searchParams }: LogsManagemen
         </Group>
       </Group>
       <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
-        <ClientSideTerminalComponent focusTimestamp={focusTimestamp} />
+        <ClientSideTerminalComponent />
       </Box>
     </LogContextProvider>
   );

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -7,163 +7,25 @@ import { FitAddon } from "@xterm/addon-fit";
 import { Terminal } from "@xterm/xterm";
 
 import { clientApi } from "@homarr/api/client";
-import type { LoggerMessage, LogLevel } from "@homarr/core/infrastructure/logs/constants";
-import { LOG_HISTORY_MAX_ENTRIES, logLevels } from "@homarr/core/infrastructure/logs/constants";
-import { useI18n } from "@homarr/translation/client";
 
 import { useLogContext } from "./log-context";
 import classes from "./terminal.module.css";
 
-const ALL_LOG_LEVELS = [...logLevels];
-const TERMINAL_SCROLLBACK_LINES = LOG_HISTORY_MAX_ENTRIES * 20;
-
-const getFocusMarker = (
-  messages: LoggerMessage[],
-  visibleMessages: LoggerMessage[],
-  focusTimestamp: number | undefined,
-  markerText: string,
-  expiredMarkerText: string,
-) => {
-  if (focusTimestamp === undefined) return null;
-
-  const oldestTimestamp = messages[0]?.timestamp.getTime();
-  if (oldestTimestamp === undefined || focusTimestamp < oldestTimestamp) {
-    return { index: 0, text: expiredMarkerText };
-  }
-
-  return {
-    index: visibleMessages.findLastIndex((message) => message.timestamp.getTime() <= focusTimestamp) + 1,
-    text: markerText,
-  };
-};
-
-const findMarkerLine = (terminal: Terminal, linesFromEnd: number) => {
-  const buffer = terminal.buffer.active;
-  const logicalLineStarts: number[] = [];
-  const cursorLine = buffer.baseY + buffer.cursorY;
-
-  for (let index = 0; index <= cursorLine; index++) {
-    const line = buffer.getLine(index);
-    if (!line) continue;
-
-    if (!line.isWrapped) {
-      logicalLineStarts.push(index);
-    }
-  }
-
-  return logicalLineStarts.at(-linesFromEnd) ?? null;
-};
-
-const renderMessages = ({
-  terminal,
-  messages,
-  activeLevels,
-  focusTimestamp,
-  markerText,
-  expiredMarkerText,
-}: {
-  terminal: Terminal;
-  messages: LoggerMessage[];
-  activeLevels: LogLevel[];
-  focusTimestamp: number | undefined;
-  markerText: string;
-  expiredMarkerText: string;
-}) => {
-  const activeLevelSet = new Set(activeLevels);
-  const visibleMessages = messages.filter((message) => activeLevelSet.has(message.level));
-  const focusMarker = getFocusMarker(messages, visibleMessages, focusTimestamp, markerText, expiredMarkerText);
-  const output: string[] = [];
-  let markerOutputIndex: number | null = null;
-
-  visibleMessages.forEach((message, index) => {
-    if (focusMarker?.index === index) {
-      markerOutputIndex = output.length;
-      output.push(`\x1b[33m--- ${focusMarker.text} ---\x1b[0m`);
-    }
-    output.push(message.message);
-  });
-
-  if (focusMarker?.index === visibleMessages.length) {
-    markerOutputIndex = output.length;
-    output.push(`\x1b[33m--- ${focusMarker.text} ---\x1b[0m`);
-  }
-
-  let markerLinesFromEnd: number | null = null;
-  if (markerOutputIndex !== null) {
-    markerLinesFromEnd =
-      1 + output.slice(markerOutputIndex).reduce((lineCount, line) => lineCount + line.split(/\r?\n/).length, 0);
-  }
-
-  terminal.write(`\x1bc${output.join("\r\n")}${output.length > 0 ? "\r\n" : ""}`, () => {
-    if (markerLinesFromEnd === null) {
-      terminal.scrollToBottom();
-      return;
-    }
-
-    const markerLine = findMarkerLine(terminal, markerLinesFromEnd);
-    if (markerLine !== null) {
-      terminal.scrollToLine(markerLine);
-    }
-  });
-};
-
-interface TerminalComponentProps {
-  focusTimestamp?: number;
-}
-
-export const TerminalComponent = ({ focusTimestamp }: TerminalComponentProps) => {
+export const TerminalComponent = () => {
   const ref = useRef<HTMLDivElement>(null);
   const { activeLevels, fontSize } = useLogContext();
-  const t = useI18n();
 
   const terminalRef = useRef<Terminal>(null);
   const fitAddonRef = useRef<FitAddon>(null);
-  const messagesRef = useRef<LoggerMessage[]>([]);
-  const initialFontSizeRef = useRef(fontSize);
-  const activeLevelsRef = useRef(activeLevels);
-  const markerTextRef = useRef("");
-  const expiredMarkerTextRef = useRef("");
-  const focusTimestampRef = useRef(focusTimestamp);
-
-  activeLevelsRef.current = activeLevels;
-  markerTextRef.current = t("log.context.widgetError");
-  expiredMarkerTextRef.current = t("log.context.expiredWidgetError");
-  focusTimestampRef.current = focusTimestamp;
-
-  const redrawTerminal = () => {
-    const terminal = terminalRef.current;
-    if (!terminal) return;
-
-    renderMessages({
-      terminal,
-      messages: messagesRef.current,
-      activeLevels: activeLevelsRef.current,
-      focusTimestamp: focusTimestampRef.current,
-      markerText: markerTextRef.current,
-      expiredMarkerText: expiredMarkerTextRef.current,
-    });
-  };
 
   clientApi.log.subscribe.useSubscription(
     {
-      levels: ALL_LOG_LEVELS,
+      levels: activeLevels,
     },
     {
-      onData(event) {
-        if (event.type === "history") {
-          messagesRef.current = event.messages.slice(-LOG_HISTORY_MAX_ENTRIES);
-          redrawTerminal();
-          return;
-        }
-
-        messagesRef.current.push(event.message);
-        if (messagesRef.current.length > LOG_HISTORY_MAX_ENTRIES) {
-          messagesRef.current.shift();
-        }
-
-        if (activeLevelsRef.current.includes(event.message.level)) {
-          terminalRef.current?.writeln(event.message.message);
-        }
+      onData(data) {
+        terminalRef.current?.writeln(data.message);
+        terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
       },
       onError(err) {
         alert(err);
@@ -182,26 +44,22 @@ export const TerminalComponent = ({ focusTimestamp }: TerminalComponentProps) =>
       cursorBlink: false,
       disableStdin: true,
       convertEol: true,
-      fontSize: initialFontSizeRef.current,
-      scrollback: TERMINAL_SCROLLBACK_LINES,
+      fontSize,
     });
     terminalRef.current.open(ref.current);
     terminalRef.current.loadAddon(canvasAddon);
 
-    const fitTimeout = window.setTimeout(() => {
+    setTimeout(() => {
       const fitAddon = new FitAddon();
       fitAddonRef.current = fitAddon;
       terminalRef.current?.loadAddon(fitAddon);
       fitAddon.fit();
-      redrawTerminal();
     });
 
     return () => {
-      window.clearTimeout(fitTimeout);
       canvasAddon.dispose();
       terminalRef.current?.dispose();
       terminalRef.current = null;
-      fitAddonRef.current = null;
     };
   }, []);
 
@@ -211,9 +69,5 @@ export const TerminalComponent = ({ focusTimestamp }: TerminalComponentProps) =>
     fitAddonRef.current?.fit();
   }, [fontSize]);
 
-  useEffect(() => {
-    redrawTerminal();
-  }, [activeLevels, focusTimestamp]);
-
   return <Box ref={ref} id="terminal" className={classes.outerTerminal} h="100%"></Box>;
 };

apps/nextjs/src/components/assistant/assistant-auto-approval.spec.ts

@@ -104,46 +104,6 @@ describe("assistant automatic approval tracker", () => {
     await act(async () => root.unmount());
   });
 
-  test("does not approve a ready action while switching conversations", async () => {
-    const container = document.createElement("div");
-    containers.push(container);
-    document.body.append(container);
-    const root = createRoot(container);
-    let confirmationCount = 0;
-    const renderConversation = async (conversationId: string, ready: boolean) => {
-      await act(async () => {
-        root.render(
-          createElement(
-            AssistantAutoApprovalProvider,
-            { conversationId },
-            createElement(
-              Fragment,
-              null,
-              createElement(AutoApprovalProbe),
-              createElement(AutomaticActionProbe, {
-                ready,
-                completed: false,
-                confirm: () => {
-                  confirmationCount += 1;
-                },
-              }),
-            ),
-          ),
-        );
-      });
-    };
-
-    await renderConversation("local-thread-1", false);
-    act(() => currentAutoApproval?.setEnabled(true));
-    await renderConversation("local-thread-2", true);
-
-    expect(confirmationCount).toBe(0);
-    expect(currentAutoApproval?.enabled).toBe(false);
-    expect(automaticActionInProgress).toBe(false);
-
-    await act(async () => root.unmount());
-  });
-
   test("clears claimed calls when automatic approvals are turned off", async () => {
     const container = document.createElement("div");
     containers.push(container);

apps/nextjs/src/components/assistant/assistant-auto-approval.tsx

@@ -52,8 +52,6 @@ export const AssistantAutoApprovalProvider = ({
   const trackerRef = useRef(createAssistantAutoApprovalTracker(AUTO_APPROVAL_MAX_ATTEMPTS));
   const retryTimersRef = useRef(new Map<string, number>());
   const previousConversationIdRef = useRef(conversationId);
-  const conversationMatches = previousConversationIdRef.current === conversationId;
-  const effectiveEnabled = conversationMatches && enabled;
 
   const clearRetryTimer = useCallback((toolCallId: string) => {
     const timer = retryTimersRef.current.get(toolCallId);
@@ -88,7 +86,7 @@ export const AssistantAutoApprovalProvider = ({
 
   const requestAction = useCallback(
     (toolCallId: string, confirm: () => void) => {
-      if (!effectiveEnabled || !trackerRef.current.claim(toolCallId)) return false;
+      if (!enabled || !trackerRef.current.claim(toolCallId)) return false;
 
       try {
         confirm();
@@ -107,7 +105,7 @@ export const AssistantAutoApprovalProvider = ({
         return false;
       }
     },
-    [clearRetryTimer, effectiveEnabled],
+    [clearRetryTimer, enabled],
   );
 
   const completeAction = useCallback(
@@ -118,15 +116,10 @@ export const AssistantAutoApprovalProvider = ({
     [clearRetryTimer],
   );
 
-  const value = useMemo(() => {
-    return {
-      enabled: effectiveEnabled,
-      setEnabled,
-      requestAction,
-      completeAction,
-      retryRevision,
-    };
-  }, [completeAction, effectiveEnabled, requestAction, retryRevision, setEnabled]);
+  const value = useMemo(
+    () => ({ enabled, setEnabled, requestAction, completeAction, retryRevision }),
+    [completeAction, enabled, requestAction, retryRevision, setEnabled],
+  );
 
   return <AssistantAutoApprovalContext.Provider value={value}>{children}</AssistantAutoApprovalContext.Provider>;
 };

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

@@ -20,15 +20,11 @@ export interface AssistantContextValue {
   isRunning: boolean;
   isRefreshing: boolean;
   unreadCount: number;
-  hasVisibleWidget: boolean;
-  activeWidgetId: string | null;
   open: () => void;
   close: () => void;
   toggle: () => void;
   sendPrompt: (prompt: string) => boolean;
   refreshCurrentView: () => Promise<void>;
-  setWidgetVisible: (widgetId: string, visible: boolean) => void;
-  activateWidget: (widgetId: string) => void;
 }
 
 export const AssistantContext = createContext<AssistantContextValue | null>(null);

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

@@ -34,15 +34,11 @@ const DisabledAssistant = ({ children, description }: PropsWithChildren<{ descri
       isRunning: false,
       isRefreshing: false,
       unreadCount: 0,
-      hasVisibleWidget: false,
-      activeWidgetId: null,
       open: () => undefined,
       close: () => undefined,
       toggle: () => undefined,
       sendPrompt: () => false,
       refreshCurrentView: () => Promise.resolve(),
-      setWidgetVisible: () => undefined,
-      activateWidget: () => undefined,
     }),
     [description],
   );

apps/nextjs/src/components/assistant/assistant-human-tools.tsx

@@ -29,7 +29,7 @@ import { AppForm } from "@homarr/forms-collection";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { appManageSchema } from "@homarr/validation/app";
 
-import { getAssistantAskUserOptionKind } from "./assistant-ask-user";
+import { getAssistantAffirmativeResult, getAssistantAskUserOptionKind } from "./assistant-ask-user";
 import { useAssistantAutomaticAction } from "./assistant-auto-approval";
 import { AssistantAutomaticActionProgress } from "./assistant-automatic-action-progress";
 import classes from "./assistant-panel.module.css";
@@ -67,6 +67,7 @@ export const AssistantAskUserTool = ({
   result,
   addResult,
   status,
+  toolCallId,
 }: ToolCallMessagePartProps<AskUserArgs, AskUserResult>) => {
   const t = useScopedI18n("common.assistant.askUser");
   const [showOther, setShowOther] = useState(false);
@@ -74,6 +75,17 @@ export const AssistantAskUserTool = ({
   const [submitting, setSubmitting] = useState(false);
   const otherInputRef = useRef<HTMLInputElement>(null);
   const options = Array.isArray(args?.options) ? args.options : [];
+  const affirmativeResult = getAssistantAffirmativeResult(options);
+  const hasValidQuestion = hasCompleteAssistantToolArguments(status) && Boolean(args?.question) && options.length >= 2;
+  const autoConfirming = useAssistantAutomaticAction({
+    toolCallId,
+    ready: result === undefined && hasValidQuestion && affirmativeResult !== undefined,
+    completed: result !== undefined,
+    confirm: () => {
+      if (!affirmativeResult) return;
+      addResult(affirmativeResult);
+    },
+  });
 
   useEffect(() => {
     if (showOther) otherInputRef.current?.focus();
@@ -153,62 +165,67 @@ export const AssistantAskUserTool = ({
         </Group>
 
         <Stack gap="xs" mt="md">
-          {options.map((option, index) => {
-            const kind = getAssistantAskUserOptionKind(option);
-            const icon =
-              kind === "affirmative" ? (
-                <IconCheck size={17} />
-              ) : kind === "negative" ? (
-                <IconX size={17} />
-              ) : (
-                <IconArrowRight size={17} />
-              );
-            const color = kind === "affirmative" ? "green" : kind === "negative" ? "red" : "gray";
+          {autoConfirming ? (
+            <AssistantAutomaticActionProgress label={t("automaticAffirmative")} />
+          ) : (
+            options.map((option, index) => {
+              const kind = getAssistantAskUserOptionKind(option);
+              const icon =
+                kind === "affirmative" ? (
+                  <IconCheck size={17} />
+                ) : kind === "negative" ? (
+                  <IconX size={17} />
+                ) : (
+                  <IconArrowRight size={17} />
+                );
+              const color = kind === "affirmative" ? "green" : kind === "negative" ? "red" : "gray";
 
-            return (
-              <UnstyledButton
-                key={`${option.id}:${index}`}
-                className={classes.humanToolOption}
-                data-kind={kind}
-                disabled={submitting}
-                onClick={() =>
-                  submitResult({ answer: option.label, optionId: option.id, optionKind: kind, source: "option" })
-                }
-              >
-                <ThemeIcon className={classes.humanToolOptionIcon} variant="light" color={color} size="sm">
-                  {icon}
-                </ThemeIcon>
-                <Box className={classes.humanToolOptionText} ta="start">
-                  <Text component="span" size="sm" fw={650} className={classes.humanToolOptionLabel}>
-                    {option.label}
-                  </Text>
-                  {option.description && (
-                    <Text
-                      component="span"
-                      display="block"
-                      size="xs"
-                      c="dimmed"
-                      fw={400}
-                      className={classes.humanToolOptionDescription}
-                    >
-                      {option.description}
-                    </Text>
-                  )}
-                </Box>
-                <Badge
-                  className={classes.humanToolOptionBadge}
-                  classNames={{ label: classes.humanToolOptionBadgeLabel }}
-                  variant="light"
-                  color={color}
-                  size="xs"
+              return (
+                <UnstyledButton
+                  key={`${option.id}:${index}`}
+                  className={classes.humanToolOption}
+                  data-kind={kind}
+                  disabled={submitting}
+                  onClick={() =>
+                    submitResult({ answer: option.label, optionId: option.id, optionKind: kind, source: "option" })
+                  }
                 >
-                  {t(`optionKind.${kind}`)}
-                </Badge>
-              </UnstyledButton>
-            );
-          })}
+                  <ThemeIcon className={classes.humanToolOptionIcon} variant="light" color={color} size="sm">
+                    {icon}
+                  </ThemeIcon>
+                  <Box className={classes.humanToolOptionText} ta="start">
+                    <Text component="span" size="sm" fw={650} className={classes.humanToolOptionLabel}>
+                      {option.label}
+                    </Text>
+                    {option.description && (
+                      <Text
+                        component="span"
+                        display="block"
+                        size="xs"
+                        c="dimmed"
+                        fw={400}
+                        className={classes.humanToolOptionDescription}
+                      >
+                        {option.description}
+                      </Text>
+                    )}
+                  </Box>
+                  <Badge
+                    className={classes.humanToolOptionBadge}
+                    classNames={{ label: classes.humanToolOptionBadgeLabel }}
+                    variant="light"
+                    color={color}
+                    size="xs"
+                  >
+                    {t(`optionKind.${kind}`)}
+                  </Badge>
+                </UnstyledButton>
+              );
+            })
+          )}
 
-          {args.allowOther !== false &&
+          {!autoConfirming &&
+            args.allowOther !== false &&
             (showOther ? (
               <Group align="flex-end" gap="xs" wrap="nowrap">
                 <TextInput

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

@@ -98,18 +98,18 @@
   container-type: size;
   position: fixed;
   z-index: 290;
-  inset-block: 1rem;
-  inset-inline-end: 1rem;
-  inset-inline-start: auto;
+  inset-inline-start: 50%;
+  bottom: 1rem;
   display: flex;
-  width: min(34rem, calc(100vw - 2rem));
-  height: auto;
-  min-height: min(30rem, calc(100dvh - 2rem));
+  width: min(46rem, calc(100vw - 2rem));
+  height: min(36rem, calc(100dvh - 5rem));
+  min-height: min(22rem, calc(100dvh - 5rem));
   margin: 0;
+  transform: translateX(-50%);
   flex-direction: column;
   overflow: hidden;
   padding: 0;
-  border: 1px solid var(--mantine-color-default-border);
+  border: 0;
   border-radius: var(--mantine-radius-lg);
   color: var(--mantine-color-text);
   background: var(--mantine-color-body);
@@ -157,28 +157,27 @@
   border-bottom: 1px solid var(--mantine-color-default-border);
 }
 
-.panelIdentity {
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.panelIdentityIcon {
-  flex: 0 0 auto;
-}
-
-.panelIdentityTitle,
-.panelThreadTitle {
-  max-width: 14rem;
-}
-
 .panelActions {
   min-width: 0;
   flex: 0 0 auto;
   margin-inline-start: auto;
 }
 
-.newConversationButton {
+.windowControls {
   flex: 0 0 auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.windowControl {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+.windowControl:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
 }
 
 .panelAction {
@@ -192,6 +191,10 @@
     padding: 0.45rem 0.5rem 0.45rem 0.65rem;
   }
 
+  .composerHints {
+    display: none;
+  }
+
   .historyButton {
     width: 2.625rem;
     max-width: 2.625rem;
@@ -207,21 +210,6 @@
     display: none;
   }
 
-  .newConversationButton {
-    width: 2.625rem;
-    max-width: 2.625rem;
-    height: 2.625rem;
-    padding-inline: 0.75rem;
-  }
-
-  .newConversationButton :global(.mantine-Button-section) {
-    margin-inline: 0;
-  }
-
-  .newConversationButton :global(.mantine-Button-label) {
-    display: none;
-  }
-
   .messages {
     padding: 0.5rem 0.65rem 1rem;
   }
@@ -258,27 +246,9 @@
   }
 }
 
-@container assistant-widget (max-width: 36rem) {
-  .historyButton {
-    width: 2.625rem;
-    max-width: 2.625rem;
-    height: 2.625rem;
-    padding-inline: 0.75rem;
-  }
-
-  .historyButtonSection {
-    margin-inline-end: 0;
-  }
-
-  .historyButtonLabel {
-    display: none;
-  }
-}
-
 @container assistant-widget (max-width: 22rem) {
   .panelAction,
-  .historyButton,
-  .newConversationButton {
+  .historyButton {
     width: 2.25rem;
     max-width: 2.25rem;
     height: 2.25rem;
@@ -298,11 +268,7 @@
     padding-inline: 0.15rem;
   }
 
-  .composerContextLabel {
-    display: none;
-  }
-
-  .panelThreadTitle {
+  .composerContext > :last-child {
     display: none;
   }
 }
@@ -332,70 +298,17 @@
 }
 
 .historyMenu {
-  min-width: 0;
-  overflow: hidden;
   background: var(--mantine-color-body);
 }
 
-.historyMenu :global(.mantine-ScrollArea-content) {
-  display: block;
-  width: 100%;
-  min-width: 0;
-}
-
 .historyItem {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-  align-items: center;
-  gap: 0.2rem;
-  overflow: hidden;
-  padding: 0.15rem 0.2rem 0.15rem 0.35rem;
   border-radius: var(--mantine-radius-md);
 }
 
-.historyItem:hover,
-.historyItem[data-active] {
+.historyItem:hover {
   background: var(--mantine-color-default-hover);
 }
 
-.historyItemTrigger {
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  padding: 0.35rem 0.25rem;
-  text-align: start;
-}
-
-.historyItemTrigger > span {
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.historyRenameInput {
-  min-width: 0;
-  flex: 1;
-}
-
-.historyItemTrigger:focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: -1px;
-}
-
-.historyItemMenu {
-  flex: 0 0 auto;
-  opacity: 1;
-}
-
-.historyItemActions {
-  flex: 0 0 auto;
-}
-
 .thread {
   position: relative;
   display: flex;
@@ -428,11 +341,6 @@
   margin-block: 0.9rem;
 }
 
-.message[data-static] {
-  contain-intrinsic-size: auto 12rem;
-  content-visibility: auto;
-}
-
 .userMessageWrap {
   width: fit-content;
   max-width: 86%;
@@ -798,21 +706,24 @@
 
 .pendingQuestionDock {
   min-height: 0;
-  max-height: min(22rem, 48dvh);
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 0.75rem;
-  border-top: 1px solid var(--mantine-color-default-border);
   background: var(--mantine-color-body);
 }
 
+.thread[data-pending-question] .viewport {
+  display: none;
+}
+
 .pendingQuestionTarget {
   display: flex;
   width: 100%;
+  min-height: 100%;
   max-width: 44rem;
   margin-inline: auto;
-  align-items: flex-start;
+  align-items: safe center;
 }
 
 .pendingQuestionTarget .humanTool {
@@ -1180,43 +1091,6 @@
   flex: 0 1 auto;
 }
 
-.messageMoreMenu {
-  z-index: 410;
-  min-width: 11rem;
-  padding: 0.25rem;
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-md);
-  color: var(--mantine-color-text);
-  background: var(--mantine-color-body);
-  box-shadow: var(--mantine-shadow-md);
-}
-
-.messageMoreItem {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.45rem 0.55rem;
-  border-radius: var(--mantine-radius-sm);
-  font-size: var(--mantine-font-size-sm);
-  cursor: pointer;
-  outline: 0;
-}
-
-.messageMoreItem[data-highlighted] {
-  background: var(--mantine-color-default-hover);
-}
-
-.messageMoreItem:focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: -2px;
-}
-
-.messageMoreSeparator {
-  height: 1px;
-  margin-block: 0.2rem;
-  background: var(--mantine-color-default-border);
-}
-
 .userActions {
   min-height: 1.75rem;
 }
@@ -1299,13 +1173,13 @@
 
 .composerContext {
   display: flex;
-  width: auto;
+  width: 1.75rem;
   height: 1.75rem;
   align-items: center;
   justify-content: center;
-  padding-inline: 0.3rem 0.42rem;
+  padding: 0;
   border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-sm);
+  border-radius: 50%;
   color: var(--mantine-color-text);
   background: var(--mantine-color-body);
 }
@@ -1541,6 +1415,10 @@
   pointer-events: none;
 }
 
+.composerHints {
+  padding-inline: 0.45rem;
+}
+
 .composerFooter {
   min-width: 0;
   max-width: 100%;
@@ -1763,12 +1641,12 @@
 @keyframes assistant-panel-in {
   from {
     opacity: 0;
-    transform: translateY(0.75rem) scale(0.985);
+    transform: translate(-50%, 0.75rem) scale(0.985);
   }
 
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translate(-50%, 0) scale(1);
   }
 }
 
@@ -1778,11 +1656,10 @@
   }
 
   .floatingPanel {
-    inset: 0;
-    width: 100vw;
-    height: 100dvh;
-    min-height: 100dvh;
-    border-radius: 0;
+    bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
+    width: calc(100vw - 1rem);
+    height: min(44rem, calc(100dvh - 1rem - env(safe-area-inset-bottom, 0px)));
+    min-height: min(20rem, calc(100dvh - 1rem - env(safe-area-inset-bottom, 0px)));
   }
 
   .panelHeader {
@@ -1809,6 +1686,10 @@
     padding-inline: 0.1rem;
   }
 
+  .composerHints {
+    display: none;
+  }
+
   .runtimeSelectorTrigger {
     max-width: 100%;
   }
@@ -1824,10 +1705,6 @@
 }
 
 @media (max-width: 30em) {
-  .historyItemMenu {
-    opacity: 1;
-  }
-
   .historyButton {
     width: 2.625rem;
     max-width: 2.625rem;

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

@@ -25,8 +25,6 @@ import type {
 import type { MessageStatus } from "@assistant-ui/react";
 import {
   ActionBarPrimitive,
-  ActionBarMorePrimitive,
-  AuiIf,
   AttachmentPrimitive,
   BranchPickerPrimitive,
   ChainOfThoughtByIndicesProvider,
@@ -68,7 +66,6 @@ import {
   SegmentedControl,
   Stack,
   Text,
-  TextInput,
   ThemeIcon,
   Tooltip,
   UnstyledButton,
@@ -94,7 +91,6 @@ import {
   IconChevronUp,
   IconCopy,
   IconDownload,
-  IconDotsVertical,
   IconFile,
   IconFileExport,
   IconLink,
@@ -116,8 +112,6 @@ import {
   IconThumbUp,
   IconTool,
   IconTrash,
-  IconVolume,
-  IconVolumeOff,
   IconX,
 } from "@tabler/icons-react";
 import remarkBreaks from "remark-breaks";
@@ -130,7 +124,6 @@ import { useTimeAgo } from "@homarr/common";
 import { assistantProviderIds, assistantProviderPresets, assistantReasoningModes } from "@homarr/definitions";
 import type { AssistantProvider } from "@homarr/definitions";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useConfirmModal } from "@homarr/modals";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./assistant-panel.module.css";
@@ -191,7 +184,6 @@ interface AssistantPanelProps extends AssistantConversationControls {
   onClose: () => void;
   onDismissActivity: () => void;
   activityDismissed: boolean;
-  hasVisibleWidget: boolean;
   isRunning: boolean;
   unreadCount: number;
   latestAssistantText: string;
@@ -1115,43 +1107,63 @@ const downloadAssistantMarkdown = (markdown: string, filename: string) => {
   setTimeout(() => URL.revokeObjectURL(blobUrl), 0);
 };
 
-const AssistantMessageActions = () => {
+const AssistantMessageExportAction = () => {
   const t = useScopedI18n("common.assistant");
-  const aui = useAui();
-  const exportMessage = () => {
-    const message = aui.message().getState();
-    const markdown = buildAssistantMessageMarkdown({
-      id: message.id,
-      parentId: message.parentId,
-      format: "assistant-ui/runtime",
-      content: message,
-      createdAt: message.createdAt,
-    });
-    downloadAssistantMarkdown(markdown, `assistant-message-${message.id.slice(0, 8)}.md`);
-  };
+  const message = useAuiState((state) => state.message);
 
   return (
-    <Box className={classes.messageActions}>
-      <ActionBarPrimitive.Root
-        hideWhenRunning
-        autohide="not-last"
-        autohideFloat="single-branch"
-        className={classes.messageActionBar}
+    <Tooltip label={t("exportMarkdown")}>
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="sm"
+        aria-label={t("exportMarkdown")}
+        onClick={() => {
+          const markdown = buildAssistantMessageMarkdown({
+            id: message.id,
+            parentId: message.parentId,
+            format: "assistant-ui/runtime",
+            content: message,
+            createdAt: message.createdAt,
+          });
+          downloadAssistantMarkdown(markdown, `assistant-message-${message.id.slice(0, 8)}.md`);
+        }}
       >
-        <Group gap={2} wrap="nowrap">
+        <IconFileExport size={14} />
+      </ActionIcon>
+    </Tooltip>
+  );
+};
+
+const AssistantMessageActions = () => {
+  const t = useScopedI18n("common.assistant");
+  return (
+    <Box className={classes.messageActions}>
+      <ActionBarPrimitive.Root hideWhenRunning className={classes.messageActionBar}>
+        <Group gap={2} wrap="wrap">
           <ProviderMessageInfo />
           <Tooltip label={t("copy")}>
             <ActionBarPrimitive.Copy asChild>
               <ActionIcon variant="subtle" color="gray" size="sm" aria-label={t("copy")}>
-                <AuiIf condition={(state) => !state.message.isCopied}>
-                  <IconCopy size={14} />
-                </AuiIf>
-                <AuiIf condition={(state) => state.message.isCopied}>
-                  <IconCheck size={14} />
-                </AuiIf>
+                <IconCopy size={14} />
               </ActionIcon>
             </ActionBarPrimitive.Copy>
           </Tooltip>
+          <Tooltip label={t("helpful")}>
+            <ActionBarPrimitive.FeedbackPositive asChild>
+              <ActionIcon variant="subtle" color="gray" size="sm" aria-label={t("helpful")}>
+                <IconThumbUp size={14} />
+              </ActionIcon>
+            </ActionBarPrimitive.FeedbackPositive>
+          </Tooltip>
+          <Tooltip label={t("notHelpful")}>
+            <ActionBarPrimitive.FeedbackNegative asChild>
+              <ActionIcon variant="subtle" color="gray" size="sm" aria-label={t("notHelpful")}>
+                <IconThumbDown size={14} />
+              </ActionIcon>
+            </ActionBarPrimitive.FeedbackNegative>
+          </Tooltip>
+          <AssistantMessageExportAction />
           <Tooltip label={t("regenerate")}>
             <ActionBarPrimitive.Reload asChild>
               <ActionIcon variant="subtle" color="gray" size="sm" aria-label={t("regenerate")}>
@@ -1159,50 +1171,6 @@ const AssistantMessageActions = () => {
               </ActionIcon>
             </ActionBarPrimitive.Reload>
           </Tooltip>
-          <ActionBarMorePrimitive.Root>
-            <ActionBarMorePrimitive.Trigger asChild>
-              <ActionIcon variant="subtle" color="gray" size="sm" aria-label={t("moreActions")}>
-                <IconDotsVertical size={14} />
-              </ActionIcon>
-            </ActionBarMorePrimitive.Trigger>
-            <ActionBarMorePrimitive.Content className={classes.messageMoreMenu} sideOffset={4} align="end">
-              <ActionBarPrimitive.FeedbackPositive asChild>
-                <ActionBarMorePrimitive.Item className={classes.messageMoreItem}>
-                  <IconThumbUp size={15} />
-                  {t("helpful")}
-                </ActionBarMorePrimitive.Item>
-              </ActionBarPrimitive.FeedbackPositive>
-              <ActionBarPrimitive.FeedbackNegative asChild>
-                <ActionBarMorePrimitive.Item className={classes.messageMoreItem}>
-                  <IconThumbDown size={15} />
-                  {t("notHelpful")}
-                </ActionBarMorePrimitive.Item>
-              </ActionBarPrimitive.FeedbackNegative>
-              <AuiIf condition={(state) => state.thread.capabilities.speech && state.message.speech === undefined}>
-                <ActionBarPrimitive.Speak asChild>
-                  <ActionBarMorePrimitive.Item className={classes.messageMoreItem}>
-                    <IconVolume size={15} />
-                    {t("readAloud")}
-                  </ActionBarMorePrimitive.Item>
-                </ActionBarPrimitive.Speak>
-              </AuiIf>
-              <AuiIf condition={(state) => state.message.speech !== undefined}>
-                <ActionBarPrimitive.StopSpeaking asChild>
-                  <ActionBarMorePrimitive.Item className={classes.messageMoreItem}>
-                    <IconVolumeOff size={15} />
-                    {t("stopReading")}
-                  </ActionBarMorePrimitive.Item>
-                </ActionBarPrimitive.StopSpeaking>
-              </AuiIf>
-              <ActionBarMorePrimitive.Separator className={classes.messageMoreSeparator} />
-              <ActionBarPrimitive.ExportMarkdown onExport={() => exportMessage()} asChild>
-                <ActionBarMorePrimitive.Item className={classes.messageMoreItem}>
-                  <IconFileExport size={15} />
-                  {t("exportMarkdown")}
-                </ActionBarMorePrimitive.Item>
-              </ActionBarPrimitive.ExportMarkdown>
-            </ActionBarMorePrimitive.Content>
-          </ActionBarMorePrimitive.Root>
         </Group>
       </ActionBarPrimitive.Root>
       <BranchPicker />
@@ -1213,7 +1181,7 @@ const AssistantMessageActions = () => {
 const UserMessageActions = () => {
   const t = useScopedI18n("common.assistant");
   return (
-    <ActionBarPrimitive.Root hideWhenRunning autohide="not-last" className={classes.userActions}>
+    <ActionBarPrimitive.Root hideWhenRunning className={classes.userActions}>
       <Group gap={2}>
         <Tooltip label={t("copyMessage")}>
           <ActionBarPrimitive.Copy asChild>
@@ -1257,7 +1225,7 @@ const UserMessage = () => {
   const isEditing = useAuiState((state) => state.composer.isEditing);
   if (isEditing) return <EditComposer />;
   return (
-    <MessagePrimitive.Root className={`${classes.message} ${classes.userMessageWrap}`} data-static>
+    <MessagePrimitive.Root className={`${classes.message} ${classes.userMessageWrap}`}>
       <Box className={classes.userMessage}>
         <MessagePrimitive.Quote>
           {(quote) => (
@@ -1764,17 +1732,12 @@ const ConversationContext = () => {
           aria-haspopup="dialog"
           onClick={() => setOpened((value) => !value)}
         >
-          <Group gap={5} wrap="nowrap">
-            <RingProgress
-              size={22}
-              thickness={3}
-              roundCaps
-              sections={hasContext ? [{ value: contextPercentage, color: getContextColor(contextPercentage) }] : []}
-            />
-            <Text className={classes.composerContextLabel} component="span" size="xs" fw={650}>
-              {hasContext ? `${contextPercentage}%` : t("mentions.context")}
-            </Text>
-          </Group>
+          <RingProgress
+            size={24}
+            thickness={3}
+            roundCaps
+            sections={hasContext ? [{ value: contextPercentage, color: getContextColor(contextPercentage) }] : []}
+          />
         </UnstyledButton>
       </Popover.Target>
       <Popover.Dropdown className={classes.conversationContextPopover}>
@@ -1939,80 +1902,60 @@ const WebSearchActivity = () => {
   );
 };
 
-const AssistantMessage = () => {
-  const isComplete = useAuiState((state) => state.message.status?.type === "complete");
-
-  return (
-    <MessagePrimitive.Root
-      className={`${classes.message} ${classes.assistantMessage}`}
-      data-static={isComplete || undefined}
-    >
-      <MessagePrimitive.GroupedParts groupBy={assistantMessageGroupBy} indicator="empty">
-        {({ part, children }) => {
-          switch (part.type) {
-            case "group-agent-trace": {
-              const startIndex = part.indices[0];
-              const endIndex = part.indices.at(-1);
-              if (startIndex === undefined || endIndex === undefined) return null;
-              return (
-                <ChainOfThoughtByIndicesProvider startIndex={startIndex} endIndex={endIndex}>
-                  <AssistantChainOfThought>{children}</AssistantChainOfThought>
-                </ChainOfThoughtByIndicesProvider>
-              );
-            }
-            case "group-reasoning":
-              return <>{children}</>;
-            case "group-tool":
-              return <AgentTraceToolGroup>{children}</AgentTraceToolGroup>;
-            case "indicator":
-              return <AssistantMessagePending status={{ type: "running" }} />;
-            case "text":
-              return <AssistantTextPart />;
-            case "reasoning":
-              return <ReasoningPart {...part} />;
-            case "tool-call":
-              return part.toolUI ?? <ToolPart {...part} />;
-            case "source":
-              return <SourcePart {...part} />;
-            case "file":
-              return <FilePart {...part} />;
-            case "image":
-              return <ImagePart {...part} />;
-            case "data":
-              return part.dataRendererUI;
-            default:
-              return null;
+const AssistantMessage = () => (
+  <MessagePrimitive.Root className={`${classes.message} ${classes.assistantMessage}`}>
+    <MessagePrimitive.GroupedParts groupBy={assistantMessageGroupBy} indicator="empty">
+      {({ part, children }) => {
+        switch (part.type) {
+          case "group-agent-trace": {
+            const startIndex = part.indices[0];
+            const endIndex = part.indices.at(-1);
+            if (startIndex === undefined || endIndex === undefined) return null;
+            return (
+              <ChainOfThoughtByIndicesProvider startIndex={startIndex} endIndex={endIndex}>
+                <AssistantChainOfThought>{children}</AssistantChainOfThought>
+              </ChainOfThoughtByIndicesProvider>
+            );
           }
-        }}
-      </MessagePrimitive.GroupedParts>
-      <RuntimeError />
-      <WebSearchActivity />
-      <AssistantMessageActions />
-    </MessagePrimitive.Root>
-  );
-};
-
-const assistantThreadMessageComponents = { UserMessage, AssistantMessage };
+          case "group-reasoning":
+            return <>{children}</>;
+          case "group-tool":
+            return <AgentTraceToolGroup>{children}</AgentTraceToolGroup>;
+          case "indicator":
+            return <AssistantMessagePending status={{ type: "running" }} />;
+          case "text":
+            return <AssistantTextPart />;
+          case "reasoning":
+            return <ReasoningPart {...part} />;
+          case "tool-call":
+            return part.toolUI ?? <ToolPart {...part} />;
+          case "source":
+            return <SourcePart {...part} />;
+          case "file":
+            return <FilePart {...part} />;
+          case "image":
+            return <ImagePart {...part} />;
+          case "data":
+            return part.dataRendererUI;
+          default:
+            return null;
+        }
+      }}
+    </MessagePrimitive.GroupedParts>
+    <RuntimeError />
+    <WebSearchActivity />
+    <AssistantMessageActions />
+  </MessagePrimitive.Root>
+);
 
 const HistorySelectContext = createContext<() => void>(() => undefined);
 
 const ThreadListItem = () => {
   const t = useScopedI18n("common.assistant");
-  const aui = useAui();
-  const { openConfirmModal } = useConfirmModal();
   const onSelect = useContext(HistorySelectContext);
   const remoteId = useAuiState((state) => state.threadListItem.remoteId);
   const title = useAuiState((state) => state.threadListItem.title);
   const [exporting, setExporting] = useState(false);
-  const [actionsOpened, setActionsOpened] = useState(false);
-  const [renameOpened, setRenameOpened] = useState(false);
-  const [renaming, setRenaming] = useState(false);
-  const [nextTitle, setNextTitle] = useState(title ?? "");
-  const renameInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (renameOpened) renameInputRef.current?.focus();
-  }, [renameOpened]);
 
   const exportConversation = async () => {
     if (!remoteId || exporting) return;
@@ -2034,109 +1977,23 @@ const ThreadListItem = () => {
     }
   };
 
-  const renameConversation = async () => {
-    const trimmedTitle = nextTitle.trim();
-    if (!trimmedTitle || renaming) return;
-    setRenaming(true);
-    try {
-      await aui.threadListItem().rename(trimmedTitle);
-      setRenameOpened(false);
-      setActionsOpened(false);
-    } catch {
-      showErrorNotification({
-        title: t("renameConversation.failedTitle"),
-        message: t("renameConversation.failedDescription"),
-      });
-    } finally {
-      setRenaming(false);
-    }
-  };
-
-  const deleteConversation = () => {
-    openConfirmModal({
-      title: t("deleteConversation.title"),
-      children: t("deleteConversation.description", { title: title ?? t("newConversation") }),
-      confirmProps: { color: "red" },
-      labels: { confirm: t("delete"), cancel: t("cancel") },
-      onConfirm: async () => {
-        try {
-          await aui.threadListItem().delete();
-        } catch {
-          showErrorNotification({
-            title: t("deleteConversation.failedTitle"),
-            message: t("deleteConversation.failedDescription"),
-          });
-        }
-      },
-    });
-  };
-
-  if (renameOpened) {
-    return (
-      <ThreadListItemPrimitive.Root className={classes.historyItem}>
-        <TextInput
-          ref={renameInputRef}
-          className={classes.historyRenameInput}
-          value={nextTitle}
-          onChange={(event) => setNextTitle(event.currentTarget.value)}
-          aria-label={t("renameConversation.label")}
-          maxLength={72}
-          size="xs"
-          onKeyDown={(event) => {
-            if (event.key === "Enter") void renameConversation();
-            if (event.key === "Escape" && !renaming) setRenameOpened(false);
-          }}
-        />
-        <ActionIcon
-          variant="subtle"
-          color="green"
-          size="sm"
-          aria-label={t("renameConversation.save")}
-          disabled={!nextTitle.trim()}
-          loading={renaming}
-          loaderProps={{ type: "bars" }}
-          onClick={() => void renameConversation()}
-        >
-          <IconCheck size={15} />
-        </ActionIcon>
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          size="sm"
-          aria-label={t("cancel")}
-          disabled={renaming}
-          onClick={() => setRenameOpened(false)}
-        >
-          <IconX size={15} />
-        </ActionIcon>
-      </ThreadListItemPrimitive.Root>
-    );
-  }
-
   return (
     <ThreadListItemPrimitive.Root className={classes.historyItem}>
-      <ThreadListItemPrimitive.Trigger asChild>
-        <UnstyledButton className={classes.historyItemTrigger} title={title} onClick={onSelect}>
-          <Text component="span" size="sm" fw={500} truncate>
-            <ThreadListItemPrimitive.Title fallback={t("newConversation")} />
-          </Text>
-        </UnstyledButton>
-      </ThreadListItemPrimitive.Trigger>
-      {actionsOpened && (
-        <Group className={classes.historyItemActions} gap={1} wrap="nowrap">
-          <ActionIcon
+      <Group gap={4} wrap="nowrap">
+        <ThreadListItemPrimitive.Trigger asChild>
+          <Button
             variant="subtle"
             color="gray"
-            size="sm"
-            title={t("renameConversation.action")}
-            aria-label={t("renameConversation.action")}
-            onClick={() => {
-              setNextTitle(title ?? "");
-              setRenameOpened(true);
-            }}
+            size="compact-sm"
+            justify="flex-start"
+            flex={1}
+            style={{ minWidth: 0 }}
+            onClick={onSelect}
           >
-            <IconPencil size={14} />
-          </ActionIcon>
+            <ThreadListItemPrimitive.Title fallback={t("newConversation")} />
+          </Button>
+        </ThreadListItemPrimitive.Trigger>
+        <Tooltip label={t("exportConversation.action")}>
           <ActionIcon
             variant="subtle"
             color="gray"
@@ -2144,49 +2001,24 @@ const ThreadListItem = () => {
             loading={exporting}
             loaderProps={{ type: "bars" }}
             disabled={!remoteId}
-            title={t("exportConversation.action")}
             aria-label={t("exportConversation.action")}
             onClick={() => void exportConversation()}
           >
             <IconFileExport size={14} />
           </ActionIcon>
-          <ActionIcon
-            variant="subtle"
-            color="red"
-            size="sm"
-            title={t("delete")}
-            aria-label={t("delete")}
-            onClick={deleteConversation}
-          >
+        </Tooltip>
+        <ThreadListItemPrimitive.Delete asChild>
+          <ActionIcon variant="subtle" color="red" size="sm" aria-label={t("delete")}>
             <IconTrash size={14} />
           </ActionIcon>
-        </Group>
-      )}
-      <ActionIcon
-        className={classes.historyItemMenu}
-        variant="subtle"
-        color="gray"
-        size="sm"
-        title={t("conversationActions")}
-        aria-label={t("conversationActions")}
-        aria-expanded={actionsOpened}
-        onClick={() => setActionsOpened((current) => !current)}
-      >
-        {actionsOpened ? <IconX size={15} /> : <IconDotsVertical size={15} />}
-      </ActionIcon>
+        </ThreadListItemPrimitive.Delete>
+      </Group>
     </ThreadListItemPrimitive.Root>
   );
 };
 
 const ThreadHistory = ({ onSelect }: { onSelect: () => void }) => {
   const t = useScopedI18n("common.assistant");
-  const [query, setQuery] = useState("");
-  const normalizedQuery = query.trim().toLocaleLowerCase();
-  const threadItems = useAuiState((state) => state.threads.threadItems);
-  const hasMatchingConversation = threadItems.some((item) => {
-    const itemTitle = item.title ?? t("newConversation");
-    return itemTitle.toLocaleLowerCase().includes(normalizedQuery);
-  });
   return (
     <HistorySelectContext.Provider value={onSelect}>
       <Stack className={classes.historyMenu} gap="xs" p="xs">
@@ -2203,28 +2035,9 @@ const ThreadHistory = ({ onSelect }: { onSelect: () => void }) => {
             {t("conversations")}
           </Text>
         </Group>
-        <TextInput
-          value={query}
-          onChange={(event) => setQuery(event.currentTarget.value)}
-          leftSection={<IconSearch size={15} />}
-          placeholder={t("searchConversations")}
-          aria-label={t("searchConversations")}
-          size="xs"
-        />
-        <ScrollArea.Autosize mah="min(24rem, 55dvh)" type="auto" scrollbars="y" offsetScrollbars>
+        <ScrollArea.Autosize mah="min(24rem, 55dvh)" type="auto" offsetScrollbars>
           <Stack gap={3}>
-            <ThreadListPrimitive.Items>
-              {({ threadListItem }) => {
-                const itemTitle = threadListItem.title ?? t("newConversation");
-                if (normalizedQuery && !itemTitle.toLocaleLowerCase().includes(normalizedQuery)) return null;
-                return <ThreadListItem />;
-              }}
-            </ThreadListPrimitive.Items>
-            {normalizedQuery && !hasMatchingConversation && (
-              <Text size="xs" c="dimmed" ta="center" py="md">
-                {t("noMatchingConversations")}
-              </Text>
-            )}
+            <ThreadListPrimitive.Items components={{ ThreadListItem }} />
           </Stack>
         </ScrollArea.Autosize>
       </Stack>
@@ -2239,6 +2052,7 @@ const ConversationHistory = () => {
     <Popover
       opened={opened}
       onChange={setOpened}
+      onDismiss={() => setOpened(false)}
       position="bottom-end"
       width="min(22rem, calc(100vw - 1rem))"
       shadow="md"
@@ -2377,7 +2191,7 @@ const EmptyThread = () => {
             </Text>
           </Stack>
           <Box className={classes.suggestions}>
-            <ThreadPrimitive.Suggestion prompt={t("suggestions.health.prompt")} send={false} clearComposer asChild>
+            <ThreadPrimitive.Suggestion prompt={t("suggestions.health.prompt")} send asChild>
               <Button
                 variant="default"
                 className={classes.suggestion}
@@ -2386,17 +2200,17 @@ const EmptyThread = () => {
                 {t("suggestions.health.label")}
               </Button>
             </ThreadPrimitive.Suggestion>
-            <ThreadPrimitive.Suggestion prompt={t("suggestions.explore.prompt")} send={false} clearComposer asChild>
+            <ThreadPrimitive.Suggestion prompt={t("suggestions.explore.prompt")} send asChild>
               <Button variant="default" className={classes.suggestion} leftSection={<IconApps size={18} />}>
                 {t("suggestions.explore.label")}
               </Button>
             </ThreadPrimitive.Suggestion>
-            <ThreadPrimitive.Suggestion prompt={t("suggestions.media.prompt")} send={false} clearComposer asChild>
+            <ThreadPrimitive.Suggestion prompt={t("suggestions.media.prompt")} send asChild>
               <Button variant="default" className={classes.suggestion} leftSection={<IconSearch size={18} />}>
                 {t("suggestions.media.label")}
               </Button>
             </ThreadPrimitive.Suggestion>
-            <ThreadPrimitive.Suggestion prompt={t("suggestions.style.prompt")} send={false} clearComposer asChild>
+            <ThreadPrimitive.Suggestion prompt={t("suggestions.style.prompt")} send asChild>
               <Button variant="default" className={classes.suggestion} leftSection={<IconPalette size={18} />}>
                 {t("suggestions.style.label")}
               </Button>
@@ -2978,6 +2792,14 @@ const Composer = (props: ComposerProps) => {
                 <HomarrProviderQuota />
                 <ConversationContext />
               </Group>
+              <Group className={classes.composerHints} gap="xs" wrap="nowrap">
+                <Text size="xs" c="dimmed">
+                  {t("mentions.hint")}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  {t("commands.hint")}
+                </Text>
+              </Group>
             </Group>
           </ComposerPrimitive.Root>
         </ComposerPrimitive.AttachmentDropzone>
@@ -3157,30 +2979,9 @@ interface AssistantConversationSurfaceProps extends AssistantConversationControl
   pendingAction: AssistantPendingAction | undefined;
   onExpand?: () => void;
   onMinimize?: () => void;
-  onDismiss?: () => void;
+  onWindowClose?: () => void;
 }
 
-const AssistantPanelIdentity = () => {
-  const t = useScopedI18n("common.assistant");
-  const threadTitle = useAuiState((state) => state.threadListItem.title);
-
-  return (
-    <Group className={classes.panelIdentity} gap="xs" wrap="nowrap">
-      <ThemeIcon className={classes.panelIdentityIcon} variant="light" color="red" radius="xl" size="md">
-        <IconRobot size={16} />
-      </ThemeIcon>
-      <Box miw={0}>
-        <Text className={classes.panelIdentityTitle} size="sm" fw={700} truncate>
-          {t("title")}
-        </Text>
-        <Text className={classes.panelThreadTitle} size="xs" c="dimmed" truncate>
-          {threadTitle ?? t("newConversation")}
-        </Text>
-      </Box>
-    </Group>
-  );
-};
-
 export const AssistantConversationSurface = ({
   isRunning,
   pendingAction,
@@ -3195,7 +2996,7 @@ export const AssistantConversationSurface = ({
   onReasoningChange,
   onExpand,
   onMinimize,
-  onDismiss,
+  onWindowClose,
 }: AssistantConversationSurfaceProps) => {
   const t = useScopedI18n("common.assistant");
   const reducedMotion = useReducedMotion();
@@ -3210,23 +3011,52 @@ export const AssistantConversationSurface = ({
   return (
     <AssistantDirectiveEntitiesProvider>
       <Group className={classes.panelHeader} justify="space-between" wrap="nowrap" gap="xs">
-        <AssistantPanelIdentity />
+        {onWindowClose && onMinimize && (
+          <Group
+            component="fieldset"
+            className={classes.windowControls}
+            gap={4}
+            wrap="nowrap"
+            aria-label={t("windowControls")}
+          >
+            <Tooltip label={t("close")}>
+              <ActionIcon
+                className={classes.windowControl}
+                variant="subtle"
+                color="gray"
+                onClick={onWindowClose}
+                aria-label={t("close")}
+              >
+                <IconX size={16} />
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label={t("minimize")}>
+              <ActionIcon
+                className={classes.windowControl}
+                variant="subtle"
+                color="gray"
+                onClick={onMinimize}
+                aria-label={t("minimize")}
+              >
+                <IconMinus size={17} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+        )}
         <Group className={classes.panelActions} gap={2} wrap="nowrap">
           <ConversationHistory />
           <ViewRefreshAction isRefreshing={isRefreshing} onRefresh={onRefresh} />
           <AutoApprovalControl />
           <Tooltip label={t("newConversation")}>
             <ThreadListPrimitive.New asChild>
-              <Button
-                className={classes.newConversationButton}
+              <ActionIcon
+                className={classes.panelAction}
                 variant="subtle"
                 color="gray"
-                size="compact-sm"
-                leftSection={<IconPlus size={17} />}
                 aria-label={t("newConversation")}
               >
-                {t("newConversation")}
-              </Button>
+                <IconPlus size={17} />
+              </ActionIcon>
             </ThreadListPrimitive.New>
           </Tooltip>
           {onExpand && (
@@ -3242,32 +3072,6 @@ export const AssistantConversationSurface = ({
               </ActionIcon>
             </Tooltip>
           )}
-          {onMinimize && (
-            <Tooltip label={t("minimize")}>
-              <ActionIcon
-                className={classes.panelAction}
-                variant="subtle"
-                color="gray"
-                onClick={onMinimize}
-                aria-label={t("minimize")}
-              >
-                <IconMinus size={17} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          {onDismiss && (
-            <Tooltip label={t("close")}>
-              <ActionIcon
-                className={classes.panelAction}
-                variant="subtle"
-                color="gray"
-                onClick={onDismiss}
-                aria-label={t("close")}
-              >
-                <IconX size={16} />
-              </ActionIcon>
-            </Tooltip>
-          )}
         </Group>
       </Group>
       <AssistantQuestionPortalProvider target={questionPortalTarget}>
@@ -3279,7 +3083,7 @@ export const AssistantConversationSurface = ({
             <ThreadPrimitive.Viewport className={classes.viewport} autoScroll>
               <Box className={classes.messages}>
                 <EmptyThread />
-                <ThreadPrimitive.Messages components={assistantThreadMessageComponents} />
+                <ThreadPrimitive.Messages components={{ UserMessage, AssistantMessage }} />
               </Box>
               <SelectionToolbarPrimitive.Root className={classes.selectionToolbar}>
                 <SelectionToolbarPrimitive.Quote asChild>
@@ -3326,7 +3130,6 @@ export const AssistantPanel = ({
   onClose,
   onDismissActivity,
   activityDismissed,
-  hasVisibleWidget,
   isRunning,
   unreadCount,
   latestAssistantText,
@@ -3344,18 +3147,8 @@ export const AssistantPanel = ({
   onReasoningChange,
 }: AssistantPanelProps) => {
   const t = useScopedI18n("common.assistant");
-  const aui = useAui();
   const previousFocusRef = useRef<HTMLElement | null>(null);
   const panelRef = useRef<HTMLDialogElement>(null);
-  const stopSpeechWithoutSurface = () => {
-    if (hasVisibleWidget) return;
-    const thread = aui.thread();
-    if (thread.getState().speech !== undefined) thread.stopSpeaking();
-  };
-  const minimize = () => {
-    stopSpeechWithoutSurface();
-    onClose();
-  };
 
   useWindowEvent("keydown", (event) => {
     if (
@@ -3367,7 +3160,7 @@ export const AssistantPanel = ({
     )
       return;
     event.preventDefault();
-    minimize();
+    onClose();
   });
   useEffect(() => {
     if (!opened) {
@@ -3389,7 +3182,7 @@ export const AssistantPanel = ({
 
   return (
     <>
-      {!opened && !hasVisibleWidget && (
+      {!opened && (
         <AssistantActivityBar
           onOpen={onOpen}
           onDismissActivity={onDismissActivity}
@@ -3417,9 +3210,8 @@ export const AssistantPanel = ({
             onModelChange={onModelChange}
             onReasoningChange={onReasoningChange}
             autoFocusComposer
-            onMinimize={minimize}
-            onDismiss={() => {
-              stopSpeechWithoutSurface();
+            onMinimize={onClose}
+            onWindowClose={() => {
               onDismissActivity();
               onClose();
             }}

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

@@ -7,19 +7,11 @@ import type {
   AttachmentAdapter,
   MessageFormatAdapter,
   RemoteThreadListAdapter,
-  SpeechSynthesisAdapter,
   ThreadHistoryAdapter,
   ThreadMessage,
   Toolkit,
 } from "@assistant-ui/react";
-import {
-  defineToolkit,
-  useAui,
-  useAuiEvent,
-  useAuiState,
-  useRemoteThreadListRuntime,
-  WebSpeechSynthesisAdapter,
-} from "@assistant-ui/react";
+import { defineToolkit, useAui, useAuiEvent, useAuiState, useRemoteThreadListRuntime } from "@assistant-ui/react";
 import { useChat } from "@ai-sdk/react";
 import { AssistantChatTransport, useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
 import { useHotkeys } from "@mantine/hooks";
@@ -49,8 +41,7 @@ import type { AssistantReasoningMode, AssistantRuntimeModelOption } from "./assi
 import { resolveAssistantPreferenceModelId, resolveAssistantThreadPreferenceModelId } from "./assistant-preferences";
 import { assistantAiSdkRuntimeOptions } from "./assistant-runtime-options";
 import {
-  AssistantComposerRuntimeProvider,
-  AssistantComposerSurfaceBoundary,
+  AssistantComposerSurfaceProvider,
   AssistantRunFocusPreserver,
   AssistantRuntimeProviderWithTools,
 } from "./assistant-runtime-provider";
@@ -484,12 +475,6 @@ const AssistantThreadRuntime = () => {
       ),
     [selectedModel],
   );
-  const [speech, setSpeech] = useState<SpeechSynthesisAdapter>();
-  useEffect(() => {
-    if ("speechSynthesis" in window && typeof SpeechSynthesisUtterance !== "undefined") {
-      setSpeech(new WebSpeechSynthesisAdapter());
-    }
-  }, []);
   const feedback = useMemo(
     () => ({
       submit: ({ message, type }: { message: ThreadMessage; type: "positive" | "negative" }) => {
@@ -527,7 +512,6 @@ const AssistantThreadRuntime = () => {
       history,
       attachments,
       feedback,
-      speech,
     },
   });
   transport.setRuntime(runtime);
@@ -683,7 +667,6 @@ const EnabledAssistantProvider = ({ children }: PropsWithChildren) => {
   const [opened, setOpened] = useState(false);
   const [activityDismissed, setActivityDismissed] = useState(true);
   const [unreadCount, setUnreadCount] = useState(0);
-  const [visibleWidgetIds, setVisibleWidgetIds] = useState<Set<string>>(() => new Set());
   const [queuedPrompt, setQueuedPrompt] = useState<string | null>(null);
   const aui = useAui();
   const preferences = useAssistantPreferences();
@@ -731,21 +714,6 @@ const EnabledAssistantProvider = ({ children }: PropsWithChildren) => {
     setOpened(true);
   }, [markRead]);
   const close = useCallback(() => setOpened(false), []);
-  const setWidgetVisible = useCallback((widgetId: string, visible: boolean) => {
-    setVisibleWidgetIds((current) => {
-      if (current.has(widgetId) === visible) return current;
-      const next = new Set(current);
-      if (visible) next.add(widgetId);
-      else next.delete(widgetId);
-      return next;
-    });
-  }, []);
-  const activateWidget = useCallback((widgetId: string) => {
-    setVisibleWidgetIds((current) => {
-      if (!current.has(widgetId) || current.values().next().value === widgetId) return current;
-      return new Set([widgetId, ...Array.from(current).filter((id) => id !== widgetId)]);
-    });
-  }, []);
   const toggle = useCallback(() => {
     if (opened) close();
     else open();
@@ -867,7 +835,6 @@ const EnabledAssistantProvider = ({ children }: PropsWithChildren) => {
   }, [assistantIsRunning, latestStatus?.type, providerUnavailable, sendPrompt, t]);
   useRegisterSpotlightContextResults("homarr-assistant", [spotlightItem], [spotlightItem]);
 
-  const activeWidgetId = visibleWidgetIds.values().next().value ?? null;
   const value = useMemo(
     () => ({
       enabled: true,
@@ -876,67 +843,46 @@ const EnabledAssistantProvider = ({ children }: PropsWithChildren) => {
       isRunning: assistantIsRunning,
       isRefreshing,
       unreadCount,
-      hasVisibleWidget: visibleWidgetIds.size > 0,
-      activeWidgetId,
       open,
       close,
       toggle,
       sendPrompt,
       refreshCurrentView,
-      setWidgetVisible,
-      activateWidget,
     }),
-    [
-      assistantIsRunning,
-      activateWidget,
-      activeWidgetId,
-      close,
-      isRefreshing,
-      open,
-      opened,
-      refreshCurrentView,
-      sendPrompt,
-      setWidgetVisible,
-      toggle,
-      unreadCount,
-      visibleWidgetIds.size,
-    ],
+    [assistantIsRunning, close, isRefreshing, open, opened, refreshCurrentView, sendPrompt, toggle, unreadCount],
   );
 
   return (
     <AssistantAutoApprovalProvider conversationId={conversationId}>
       <AssistantContext.Provider value={value}>
-        <AssistantComposerRuntimeProvider>
-          <AssistantWidgetRendererProvider renderer={AssistantBoardWidget}>{children}</AssistantWidgetRendererProvider>
-          <AssistantComposerSurfaceBoundary surfaceId="assistant-panel">
-            <AssistantPanel
-              opened={opened}
-              onOpen={open}
-              onClose={close}
-              onDismissActivity={() => {
-                markRead();
-                setActivityDismissed(true);
-              }}
-              activityDismissed={activityDismissed}
-              hasVisibleWidget={visibleWidgetIds.size > 0}
-              isRunning={assistantIsRunning}
-              unreadCount={unreadCount}
-              latestAssistantText={latestAssistantText}
-              latestAssistantPartType={latestAssistantPartType}
-              latestUserText={queuedPrompt ?? latestUserText}
-              latestStatus={latestStatus}
-              pendingAction={pendingAction}
-              modelId={preferences.modelId}
-              models={preferences.models}
-              modelOptionsLoading={preferences.isLoading}
-              reasoning={preferences.reasoning}
-              isRefreshing={isRefreshing}
-              onRefresh={refreshCurrentView}
-              onModelChange={selectModel}
-              onReasoningChange={preferences.setReasoning}
-            />
-          </AssistantComposerSurfaceBoundary>
-        </AssistantComposerRuntimeProvider>
+        <AssistantWidgetRendererProvider renderer={AssistantBoardWidget}>{children}</AssistantWidgetRendererProvider>
+        <AssistantComposerSurfaceProvider surfaceId="floating-panel">
+          <AssistantPanel
+            opened={opened}
+            onOpen={open}
+            onClose={close}
+            onDismissActivity={() => {
+              markRead();
+              setActivityDismissed(true);
+            }}
+            activityDismissed={activityDismissed}
+            isRunning={assistantIsRunning}
+            unreadCount={unreadCount}
+            latestAssistantText={latestAssistantText}
+            latestAssistantPartType={latestAssistantPartType}
+            latestUserText={queuedPrompt ?? latestUserText}
+            latestStatus={latestStatus}
+            pendingAction={pendingAction}
+            modelId={preferences.modelId}
+            models={preferences.models}
+            modelOptionsLoading={preferences.isLoading}
+            reasoning={preferences.reasoning}
+            isRefreshing={isRefreshing}
+            onRefresh={refreshCurrentView}
+            onModelChange={selectModel}
+            onReasoningChange={preferences.setReasoning}
+          />
+        </AssistantComposerSurfaceProvider>
       </AssistantContext.Provider>
     </AssistantAutoApprovalProvider>
   );

apps/nextjs/src/components/assistant/assistant-runtime-provider.spec.ts

@@ -26,8 +26,7 @@ import { z } from "zod/v4";
 import { showErrorNotification } from "@homarr/notifications";
 
 import {
-  AssistantComposerRuntimeProvider,
-  AssistantComposerSurfaceBoundary,
+  AssistantComposerSurfaceProvider,
   AssistantRunFocusPreserver,
   AssistantRuntimeProviderWithTools,
   assistantSurfaceComposerCacheLimit,
@@ -149,22 +148,14 @@ const SurfaceTestAssistant = ({
     { runtime, toolkit },
     createElement(AssistantRunFocusPreserver),
     createElement(
-      AssistantComposerRuntimeProvider,
-      null,
-      createElement(
-        AssistantComposerSurfaceBoundary,
-        { surfaceId: "surface-a" },
-        createElement(SurfaceProbe, { id: "a", onReady }),
-      ),
+      AssistantComposerSurfaceProvider,
+      { surfaceId: "surface-a" },
+      createElement(SurfaceProbe, { id: "a", onReady }),
     ),
     createElement(
-      AssistantComposerRuntimeProvider,
-      null,
-      createElement(
-        AssistantComposerSurfaceBoundary,
-        { surfaceId: "surface-b" },
-        createElement(SurfaceProbe, { id: "b", onReady }),
-      ),
+      AssistantComposerSurfaceProvider,
+      { surfaceId: "surface-b" },
+      createElement(SurfaceProbe, { id: "b", onReady }),
     ),
     simulateRunFocus ? createElement(LexicalRunFocusProbe) : null,
   );

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

@@ -157,6 +157,9 @@ const createSurfaceComposerHost = (
     get attachments() {
       return getThreadAdapters(threadCore)?.attachments ? attachments : undefined;
     },
+    get dictation() {
+      return getThreadAdapters(threadCore)?.dictation;
+    },
   };
 
   return new Proxy(threadCore as ThreadCoreWithAdapters, {
@@ -291,21 +294,18 @@ export const createAssistantSurfaceRuntime = (runtime: AssistantRuntime): Assist
     subscribe(callback) {
       let activeCore = sharedBinding.getState();
       let activeConversationId = getConversationId();
-      let activeComposer = getComposer(activeConversationId, activeCore);
       retainConversation(activeConversationId);
-      let unsubscribeComposer = activeComposer.subscribe(callback);
+      let unsubscribeComposer = getComposer(activeConversationId, activeCore).subscribe(callback);
       const handleSharedUpdate = () => {
         const nextCore = sharedBinding.getState();
         const nextConversationId = getConversationId();
         if (nextCore !== activeCore || nextConversationId !== activeConversationId) {
-          if (activeCore.speech !== undefined) activeCore.stopSpeaking();
           unsubscribeComposer();
           releaseConversation(activeConversationId);
           activeCore = nextCore;
           activeConversationId = nextConversationId;
           retainConversation(activeConversationId);
-          activeComposer = getComposer(activeConversationId, activeCore);
-          unsubscribeComposer = activeComposer.subscribe(callback);
+          unsubscribeComposer = getComposer(activeConversationId, activeCore).subscribe(callback);
         }
         callback();
       };
@@ -360,13 +360,6 @@ export const createAssistantSurfaceRuntime = (runtime: AssistantRuntime): Assist
     registerModelContextProvider: () => () => {},
     dispose() {
       activeConversationCounts.clear();
-      const threadCores = new Set([
-        ...Array.from(surfaceCoreByConversation.values(), (entry) => entry.source),
-        ...Array.from(composerByConversation.values(), (entry) => entry.source),
-      ]);
-      for (const threadCore of threadCores) {
-        if (threadCore.speech !== undefined) threadCore.stopSpeaking();
-      }
       for (const [conversationId, entry] of composerByConversation) disposeComposer(conversationId, entry);
     },
   };
@@ -380,7 +373,7 @@ const AssistantComposerSurfaceContext = createContext<AssistantComposerSurfaceVa
 
 export const useAssistantComposerSurface = () => {
   const value = useContext(AssistantComposerSurfaceContext);
-  if (!value) throw new Error("useAssistantComposerSurface must be used within AssistantComposerSurfaceBoundary");
+  if (!value) throw new Error("useAssistantComposerSurface must be used within AssistantComposerSurfaceProvider");
   return value;
 };
 
@@ -444,23 +437,21 @@ const AssistantComposerSurfaceEvents = () => {
   return null;
 };
 
-export const AssistantComposerSurfaceBoundary = ({ children, surfaceId }: PropsWithChildren<{ surfaceId: string }>) => {
+const AssistantComposerSurfaceBoundary = ({ children, surfaceId }: PropsWithChildren<{ surfaceId: string }>) => {
   const t = useScopedI18n("common.assistant");
   const aui = useAui();
-  const instanceId = useId();
-  const resolvedSurfaceId = `${surfaceId}:${instanceId}`;
   const elementRef = useRef<HTMLDivElement>(null);
-  const contextValue = useMemo(() => ({ id: resolvedSurfaceId }), [resolvedSurfaceId]);
+  const contextValue = useMemo(() => ({ id: surfaceId }), [surfaceId]);
 
   useLayoutEffect(() => {
     const element = elementRef.current;
     if (!element) return undefined;
-    surfaceElements.set(resolvedSurfaceId, element);
+    surfaceElements.set(surfaceId, element);
 
     return () => {
-      if (surfaceElements.get(resolvedSurfaceId) === element) surfaceElements.delete(resolvedSurfaceId);
+      if (surfaceElements.get(surfaceId) === element) surfaceElements.delete(surfaceId);
     };
-  }, [resolvedSurfaceId]);
+  }, [surfaceId]);
 
   const handlePasteCapture = (event: ClipboardEvent<HTMLDivElement>) => {
     const target = event.target;
@@ -516,6 +507,7 @@ export const AssistantComposerSurfaceBoundary = ({ children, surfaceId }: PropsW
         }}
         onPasteCapture={handlePasteCapture}
       >
+        <AssistantComposerSurfaceEvents />
         {children}
       </div>
     </AssistantComposerSurfaceContext.Provider>
@@ -574,12 +566,18 @@ export const AssistantRunFocusPreserver = () => {
   return null;
 };
 
+interface AssistantComposerSurfaceProviderProps extends PropsWithChildren {
+  surfaceId: string;
+}
+
 /**
- * Gives every rendered assistant surface one shared local composer while preserving the shared
- * conversation. Individual surfaces should add AssistantComposerSurfaceBoundary around their UI.
+ * Gives one rendered assistant surface a local composer while preserving the shared conversation.
+ * Every component below this boundary can keep using the normal assistant-ui primitives and hooks.
  */
-export const AssistantComposerRuntimeProvider = ({ children }: PropsWithChildren) => {
+export const AssistantComposerSurfaceProvider = ({ children, surfaceId }: AssistantComposerSurfaceProviderProps) => {
   const parentAui = useAui();
+  const instanceId = useId();
+  const resolvedSurfaceId = `${surfaceId}:${instanceId}`;
   // oxlint-disable-next-line no-underscore-dangle -- required to derive a scoped runtime without cloning the shared thread.
   const sharedRuntime = parentAui.threads().__internal_getAssistantRuntime?.();
   const surfaceRuntime = useMemo(() => {
@@ -590,8 +588,7 @@ export const AssistantComposerRuntimeProvider = ({ children }: PropsWithChildren
 
   return (
     <AssistantRuntimeProvider aui={parentAui} runtime={surfaceRuntime}>
-      <AssistantComposerSurfaceEvents />
-      {children}
+      <AssistantComposerSurfaceBoundary surfaceId={resolvedSurfaceId}>{children}</AssistantComposerSurfaceBoundary>
     </AssistantRuntimeProvider>
   );
 };

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

@@ -1,9 +1,8 @@
 "use client";
 
 import type { CSSProperties, ReactNode } from "react";
-import { useEffect, useId, useRef } from "react";
 import { ActionIcon, Box, Center, Group, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
-import { IconArrowsMaximize, IconArrowsMinimize, IconRobot } from "@tabler/icons-react";
+import { IconArrowsMaximize, IconRobot } from "@tabler/icons-react";
 import { useAui, useAuiState } from "@assistant-ui/react";
 
 import { useI18n } from "@homarr/translation/client";
@@ -14,47 +13,23 @@ import classes from "./assistant-panel.module.css";
 import { AssistantConversationSurface } from "./assistant-panel";
 import { getPendingAssistantAction } from "./assistant-pending-action";
 import { useAssistantPreferences, useHomarrAssistant } from "./assistant-context";
-import { AssistantComposerSurfaceBoundary } from "./assistant-runtime-provider";
+import { AssistantComposerSurfaceProvider } from "./assistant-runtime-provider";
 
 export const AssistantBoardWidget = (props: WidgetComponentProps<"assistant">) => {
   const assistant = useHomarrAssistant();
-  const { enabled, setWidgetVisible } = assistant;
-  const generatedWidgetId = useId();
-  const widgetId = props.itemId ?? generatedWidgetId;
-  const widgetRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const widget = widgetRef.current;
-    if (!enabled || !widget) return;
-    const observer = new IntersectionObserver(([entry]) => setWidgetVisible(widgetId, entry?.isIntersecting === true), {
-      threshold: 0.15,
-    });
-    observer.observe(widget);
-    return () => {
-      observer.disconnect();
-      setWidgetVisible(widgetId, false);
-    };
-  }, [enabled, setWidgetVisible, widgetId]);
 
   if (!assistant.enabled) {
     return <UnavailableAssistantWidget description={assistant.unavailableDescription} />;
   }
 
   return (
-    <AssistantComposerSurfaceBoundary surfaceId={`assistant-widget-${widgetId}`}>
-      <Box ref={widgetRef} w="100%" h="100%">
-        <EnabledAssistantBoardWidget {...props} assistantWidgetId={widgetId} />
-      </Box>
-    </AssistantComposerSurfaceBoundary>
+    <AssistantComposerSurfaceProvider surfaceId={`board-widget-${props.itemId ?? "preview"}`}>
+      <EnabledAssistantBoardWidget {...props} />
+    </AssistantComposerSurfaceProvider>
   );
 };
 
-const EnabledAssistantBoardWidget = ({
-  width,
-  height,
-  isEditMode,
-  assistantWidgetId,
-}: WidgetComponentProps<"assistant"> & { assistantWidgetId: string }) => {
+const EnabledAssistantBoardWidget = ({ width, height, isEditMode }: WidgetComponentProps<"assistant">) => {
   const board = useRequiredBoard();
   const assistant = useHomarrAssistant();
   const preferences = useAssistantPreferences();
@@ -70,14 +45,6 @@ const EnabledAssistantBoardWidget = ({
     threadListItem.updateCustom({ ...threadListItem.getState().custom, modelId });
   };
 
-  if (assistant.opened) {
-    return <CompactAssistantWidget onOpen={assistant.close} location="panel" />;
-  }
-
-  if (assistant.activeWidgetId !== null && assistant.activeWidgetId !== assistantWidgetId) {
-    return <CompactAssistantWidget onOpen={() => assistant.activateWidget(assistantWidgetId)} location="widget" />;
-  }
-
   if (width < 300 || height < 280) {
     return <CompactAssistantWidget onOpen={assistant.open} />;
   }
@@ -108,30 +75,8 @@ const EnabledAssistantBoardWidget = ({
   );
 };
 
-const CompactAssistantWidget = ({
-  onOpen,
-  location = "compact",
-}: {
-  onOpen: () => void;
-  location?: "compact" | "panel" | "widget";
-}) => {
+const CompactAssistantWidget = ({ onOpen }: { onOpen: () => void }) => {
   const t = useI18n();
-  let title = t("widget.assistant.compact.title");
-  let description = t("widget.assistant.compact.description");
-  let actionLabel = t("widget.assistant.compact.open");
-  let actionIcon = <IconArrowsMaximize size={18} />;
-
-  if (location === "panel") {
-    title = t("widget.assistant.compact.openTitle");
-    description = t("widget.assistant.compact.openDescription");
-    actionLabel = t("widget.assistant.compact.returnToWidget");
-    actionIcon = <IconArrowsMinimize size={18} />;
-  }
-  if (location === "widget") {
-    title = t("widget.assistant.compact.otherWidgetTitle");
-    description = t("widget.assistant.compact.otherWidgetDescription");
-    actionLabel = t("widget.assistant.compact.useHere");
-  }
 
   return (
     <Box className={classes.widgetPanel}>
@@ -142,16 +87,23 @@ const CompactAssistantWidget = ({
           </ThemeIcon>
           <Stack className={classes.compactCopy} gap={1}>
             <Text className={classes.compactTitle} size="sm" fw={700} lineClamp={1}>
-              {title}
+              {t("widget.assistant.compact.title")}
             </Text>
             <Text className={classes.compactDescription} size="xs" c="dimmed" lineClamp={2}>
-              {description}
+              {t("widget.assistant.compact.description")}
             </Text>
           </Stack>
         </Group>
-        <Tooltip label={actionLabel}>
-          <ActionIcon variant="light" color="red" size={44} radius="md" onClick={onOpen} aria-label={actionLabel}>
-            {actionIcon}
+        <Tooltip label={t("widget.assistant.compact.open")}>
+          <ActionIcon
+            variant="light"
+            color="red"
+            size={44}
+            radius="md"
+            onClick={onOpen}
+            aria-label={t("widget.assistant.compact.open")}
+          >
+            <IconArrowsMaximize size={18} />
           </ActionIcon>
         </Tooltip>
       </Group>

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

@@ -3,16 +3,16 @@
 import { Suspense, use } from "react";
 import { Center, Loader } from "@mantine/core";
 import { ErrorBoundary } from "react-error-boundary";
-import type { FallbackProps } from "react-error-boundary";
 
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal, modalSizeForm } from "@homarr/modals";
+import { useModalAction } from "@homarr/modals";
 import { WidgetError } from "@homarr/widgets/errors";
 import type * as WidgetModalsModule from "@homarr/widgets/modals";
 import type { WidgetEditModalProps } from "@homarr/widgets/modals";
 
-import type * as IntegrationEditFormModule from "~/components/integration/embedded-integration-edit-form";
-import type { EmbeddedIntegrationEditFormProps } from "~/components/integration/embedded-integration-edit-form";
+import type * as IntegrationEditModalModule from "~/components/integration/embedded-integration-edit-modal";
+import type { EmbeddedIntegrationEditModalProps } from "~/components/integration/embedded-integration-edit-modal";
 
 let widgetEditModalPromise: Promise<typeof WidgetModalsModule> | undefined;
 
@@ -29,38 +29,42 @@ export const loadWidgetEditModal = () => {
 
 export const preloadWidgetEditModal = () => void loadWidgetEditModal().catch(() => undefined);
 
-let integrationEditFormPromise: Promise<typeof IntegrationEditFormModule> | undefined;
+let integrationEditModalPromise: Promise<typeof IntegrationEditModalModule> | undefined;
 
-const loadIntegrationEditForm = () => {
-  if (integrationEditFormPromise) return integrationEditFormPromise;
+const loadIntegrationEditModal = () => {
+  if (integrationEditModalPromise) return integrationEditModalPromise;
 
-  const currentPromise = import("~/components/integration/embedded-integration-edit-form");
-  integrationEditFormPromise = currentPromise;
+  const currentPromise = import("~/components/integration/embedded-integration-edit-modal");
+  integrationEditModalPromise = currentPromise;
   void currentPromise.catch(() => {
-    if (integrationEditFormPromise === currentPromise) integrationEditFormPromise = undefined;
+    if (integrationEditModalPromise === currentPromise) integrationEditModalPromise = undefined;
   });
   return currentPromise;
 };
 
-const LazyIntegrationEditFormContent = (props: EmbeddedIntegrationEditFormProps) => {
-  const { EmbeddedIntegrationEditForm } = use(loadIntegrationEditForm());
-  return <EmbeddedIntegrationEditForm {...props} />;
+const LazyIntegrationEditModalContent = (props: {
+  actions: { closeModal: () => void };
+  innerProps: EmbeddedIntegrationEditModalProps;
+}) => {
+  const { EmbeddedIntegrationEditModal } = use(loadIntegrationEditModal());
+  const Component = EmbeddedIntegrationEditModal.component;
+  return <Component {...props} />;
 };
 
-const IntegrationEditErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
-  <Center py="xl">
-    <WidgetError
-      error={error}
-      resetErrorBoundary={() => {
-        integrationEditFormPromise = undefined;
-        resetErrorBoundary();
-      }}
-    />
-  </Center>
-);
-
-const LazyIntegrationEditForm = (props: EmbeddedIntegrationEditFormProps) => (
-  <ErrorBoundary FallbackComponent={IntegrationEditErrorFallback}>
+const LazyIntegrationEditModal = createModal<EmbeddedIntegrationEditModalProps>((props) => (
+  <ErrorBoundary
+    fallbackRender={({ error, resetErrorBoundary }) => (
+      <Center py="xl">
+        <WidgetError
+          error={error}
+          resetErrorBoundary={() => {
+            integrationEditModalPromise = undefined;
+            resetErrorBoundary();
+          }}
+        />
+      </Center>
+    )}
+  >
     <Suspense
       fallback={
         <Center py="xl">
@@ -68,10 +72,15 @@ const LazyIntegrationEditForm = (props: EmbeddedIntegrationEditFormProps) => (
         </Center>
       }
     >
-      <LazyIntegrationEditFormContent {...props} />
+      <LazyIntegrationEditModalContent {...props} />
     </Suspense>
   </ErrorBoundary>
-);
+)).withOptions({
+  defaultTitle: (t) => t("item.edit.tab.integration"),
+  size: modalSizeForm,
+  presentation: "inspector",
+  closeOnClickOutside: true,
+});
 
 interface LazyWidgetEditModalContentProps {
   actions: { closeModal: () => void };
@@ -81,12 +90,17 @@ interface LazyWidgetEditModalContentProps {
 const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
   const { WidgetEditModal } = use(loadWidgetEditModal());
   const Component = WidgetEditModal.component;
+  const { openModal: openIntegrationEditModal } = useModalAction(LazyIntegrationEditModal);
   return (
     <Component
       {...props}
       innerProps={{
         ...props.innerProps,
-        integrationEditForm: LazyIntegrationEditForm,
+        onEditIntegration: (integrationId) =>
+          openIntegrationEditModal({
+            integrationId,
+            onSuccess: props.innerProps.onIntegrationSaved,
+          }),
       }}
     />
   );

apps/nextjs/src/components/create/universal-create-modal.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { Group, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
+import { Group, Stack, Text, TextInput, ThemeIcon, UnstyledButton } from "@mantine/core";
 import {
   IconApps,
   IconBox,
@@ -26,7 +26,7 @@ import type {
   UniversalCreateActionGroup,
   UniversalCreateActionKey,
 } from "./universal-create-actions";
-import { getUniversalCreateActionDefinitions } from "./universal-create-actions";
+import { filterAndRankUniversalCreateActions, getUniversalCreateActionDefinitions } from "./universal-create-actions";
 import type { SetupMetricEntryPoint } from "./setup-analytics";
 import { useSetupAnalytics } from "./setup-analytics";
 
@@ -52,6 +52,7 @@ export const UniversalCreateModal = createModal<UniversalCreateModalProps>(({ ac
   const router = useRouter();
   const t = useScopedI18n("universalCreate");
   const { openModal: openAddBoardModal } = useModalAction(AddBoardModal);
+  const [query, setQuery] = useState("");
   const trackedOpen = useRef(false);
   const boardActions = innerProps.boardActions;
   const entryPoint = innerProps.entryPoint ?? (boardActions ? "board" : "header");
@@ -117,43 +118,58 @@ export const UniversalCreateModal = createModal<UniversalCreateModalProps>(({ ac
         keywords: t(`action.${definition.key}.keywords`).split(" "),
       }) satisfies RankedUniversalCreateAction,
   );
-  const orderedActions = resolvedActions.toSorted((left, right) => right.priority - left.priority);
+  const visibleActions = filterAndRankUniversalCreateActions(resolvedActions, query);
   const groups = ["currentBoard", "library", "boards"] satisfies UniversalCreateActionGroup[];
 
   return (
     <Stack gap="md">
-      {groups.map((group) => {
-        const groupActions = orderedActions.filter((action) => action.group === group);
-        if (groupActions.length === 0) return null;
+      <TextInput
+        data-autofocus
+        value={query}
+        onChange={(event) => setQuery(event.currentTarget.value)}
+        leftSection={<IconSearch size={16} />}
+        placeholder={t("search.placeholder")}
+        aria-label={t("search.label")}
+      />
 
-        return (
-          <Stack key={group} gap={4}>
-            <Text c="dimmed" fw={600} size="xs" tt="uppercase" px="sm">
-              {t(`group.${group}`)}
-            </Text>
-            {groupActions.map((action) => {
-              const Icon = actionIcons[action.key];
-              return (
-                <UnstyledButton key={action.key} className={classes.action} onClick={() => invokeAction(action.key)}>
-                  <Group wrap="nowrap" align="flex-start">
-                    <ThemeIcon className={classes.actionIcon} variant="light" radius="md">
-                      <Icon size={18} stroke={1.5} />
-                    </ThemeIcon>
-                    <Stack gap={1}>
-                      <Text fw={600} size="sm">
-                        {action.name}
-                      </Text>
-                      <Text c="dimmed" size="xs">
-                        {action.description}
-                      </Text>
-                    </Stack>
-                  </Group>
-                </UnstyledButton>
-              );
-            })}
-          </Stack>
-        );
-      })}
+      {visibleActions.length === 0 ? (
+        <Text c="dimmed" ta="center" py="lg">
+          {t("search.noResults")}
+        </Text>
+      ) : (
+        groups.map((group) => {
+          const groupActions = visibleActions.filter((action) => action.group === group);
+          if (groupActions.length === 0) return null;
+
+          return (
+            <Stack key={group} gap={4}>
+              <Text c="dimmed" fw={600} size="xs" tt="uppercase" px="sm">
+                {t(`group.${group}`)}
+              </Text>
+              {groupActions.map((action) => {
+                const Icon = actionIcons[action.key];
+                return (
+                  <UnstyledButton key={action.key} className={classes.action} onClick={() => invokeAction(action.key)}>
+                    <Group wrap="nowrap" align="flex-start">
+                      <ThemeIcon className={classes.actionIcon} variant="light" radius="md">
+                        <Icon size={18} stroke={1.5} />
+                      </ThemeIcon>
+                      <Stack gap={1}>
+                        <Text fw={600} size="sm">
+                          {action.name}
+                        </Text>
+                        <Text c="dimmed" size="xs">
+                          {action.description}
+                        </Text>
+                      </Stack>
+                    </Group>
+                  </UnstyledButton>
+                );
+              })}
+            </Stack>
+          );
+        })
+      )}
     </Stack>
   );
 }).withOptions({

apps/nextjs/src/components/integration/embedded-integration-edit-form.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-import { useImperativeHandle, useRef } from "react";
-import { Alert, Button, Group, Skeleton, Stack, Text } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-
-import { clientApi } from "@homarr/api/client";
-import { getIntegrationName } from "@homarr/definitions";
-import { useI18n } from "@homarr/translation/client";
-import { IntegrationAvatar } from "@homarr/ui";
-import type { EmbeddedIntegrationEditFormProps } from "@homarr/widgets/modals";
-
-import type { EditIntegrationFormHandle } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";
-import { EditIntegrationForm } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";
-
-export type { EmbeddedIntegrationEditFormProps } from "@homarr/widgets/modals";
-
-export const EmbeddedIntegrationEditForm = ({
-  integrationId,
-  handleRef,
-  onSuccess,
-}: EmbeddedIntegrationEditFormProps) => {
-  const t = useI18n();
-  const integrationFormRef = useRef<EditIntegrationFormHandle>(null);
-  const {
-    data: integration,
-    isPending,
-    isError,
-    refetch,
-  } = clientApi.integration.byId.useQuery({
-    id: integrationId,
-  });
-
-  useImperativeHandle(
-    handleRef,
-    () => ({
-      submitIfDirty: async () => {
-        if (!integrationFormRef.current?.isDirty()) {
-          return true;
-        }
-
-        return integrationFormRef.current.submit();
-      },
-    }),
-    [],
-  );
-
-  if (isPending) {
-    return (
-      <Stack gap="sm" aria-busy="true" aria-label={t("item.edit.integration.loading")}>
-        <Skeleton height={36} width="60%" />
-        <Skeleton height={60} />
-        <Skeleton height={120} />
-      </Stack>
-    );
-  }
-
-  if (isError || !integration) {
-    return (
-      <Alert color="red" title={t("common.error")}>
-        <Stack gap="sm">
-          <Text size="sm">{t("item.edit.integration.loadError")}</Text>
-          <Button variant="light" color="red" onClick={() => void refetch()}>
-            {t("common.action.tryAgain")}
-          </Button>
-        </Stack>
-      </Alert>
-    );
-  }
-
-  return (
-    <Stack>
-      <Group gap="sm" wrap="nowrap">
-        <IntegrationAvatar kind={integration.kind} size="sm" />
-        <Stack gap={0} style={{ minWidth: 0 }}>
-          <Text fw={600} truncate>
-            {integration.name}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {getIntegrationName(integration.kind)}
-          </Text>
-        </Stack>
-      </Group>
-      <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
-        {t("item.edit.integration.propagationNotice")}
-      </Alert>
-      <EditIntegrationForm integration={integration} hideButtons formRef={integrationFormRef} onSuccess={onSuccess} />
-    </Stack>
-  );
-};

apps/nextjs/src/components/integration/embedded-integration-edit-modal.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Alert, Button, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { getIntegrationName } from "@homarr/definitions";
+import { createModal, modalSizeForm } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { IntegrationAvatar } from "@homarr/ui";
+
+import { EditIntegrationForm } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";
+
+export interface EmbeddedIntegrationEditModalProps {
+  integrationId: string;
+  onSuccess?: () => void;
+}
+
+export const EmbeddedIntegrationEditModal = createModal<EmbeddedIntegrationEditModalProps>(
+  ({ actions, innerProps }) => {
+    const t = useI18n();
+    const {
+      data: integration,
+      isPending,
+      isError,
+      refetch,
+    } = clientApi.integration.byId.useQuery({
+      id: innerProps.integrationId,
+    });
+
+    if (isPending) {
+      return (
+        <Stack gap="sm" aria-busy="true" aria-label={t("item.edit.integration.loading")}>
+          <Skeleton height={36} width="60%" />
+          <Skeleton height={60} />
+          <Skeleton height={120} />
+        </Stack>
+      );
+    }
+
+    if (isError || !integration) {
+      return (
+        <Alert color="red" title={t("common.error")}>
+          <Stack gap="sm">
+            <Text size="sm">{t("item.edit.integration.loadError")}</Text>
+            <Button variant="light" color="red" onClick={() => void refetch()}>
+              {t("common.action.tryAgain")}
+            </Button>
+          </Stack>
+        </Alert>
+      );
+    }
+
+    return (
+      <Stack>
+        <Group gap="sm" wrap="nowrap">
+          <IntegrationAvatar kind={integration.kind} size="sm" />
+          <Stack gap={0} style={{ minWidth: 0 }}>
+            <Text fw={600} truncate>
+              {integration.name}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {getIntegrationName(integration.kind)}
+            </Text>
+          </Stack>
+        </Group>
+        <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
+          {t("item.edit.integration.propagationNotice")}
+        </Alert>
+        <EditIntegrationForm
+          integration={integration}
+          embedded
+          onSuccess={() => {
+            innerProps.onSuccess?.();
+            actions.closeModal();
+          }}
+        />
+      </Stack>
+    );
+  },
+).withOptions({
+  defaultTitle: (t) => t("item.edit.tab.integration"),
+  size: modalSizeForm,
+  presentation: "inspector",
+  closeOnClickOutside: true,
+});

apps/nextjs/src/components/integration/integration-select-modal.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { useState } from "react";
-import { Group, ScrollArea, Title, UnstyledButton } from "@mantine/core";
-import { IconArrowLeft, IconX } from "@tabler/icons-react";
+import { Group, ScrollArea, Title } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
 
 import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName } from "@homarr/definitions";
 import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
 import { IntegrationAvatar } from "@homarr/ui";
 
 import { NewIntegrationForm } from "~/app/[locale]/manage/integrations/new/_integration-new-form";
@@ -20,15 +19,11 @@ interface IntegrationSelectModalProps {
   enableMockIntegration?: boolean;
   allowedKinds?: readonly IntegrationKind[];
   completionBoardId?: string;
-  initialKind?: IntegrationKind;
-  initialUrl?: string;
-  initialName?: string;
 }
 
 export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>(({ actions, innerProps }) => {
-  const t = useI18n();
-  const [step, setStep] = useState<"select" | "form">(innerProps.initialKind ? "form" : "select");
-  const [selectedKind, setSelectedKind] = useState<IntegrationKind | null>(innerProps.initialKind ?? null);
+  const [step, setStep] = useState<"select" | "form">("select");
+  const [selectedKind, setSelectedKind] = useState<IntegrationKind | null>(null);
   const { openModal: openCompletionModal } = useModalAction(IntegrationCompletionModal);
 
   const handleSelect = (kind: IntegrationKind) => {
@@ -40,7 +35,6 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
     setStep("select");
     setSelectedKind(null);
   };
-  const handleFormBack = innerProps.initialKind ? actions.closeModal : handleBack;
 
   const handleSuccess = (result?: CreatedIntegrationResult) => {
     actions.closeModal();
@@ -52,29 +46,14 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
   };
 
   if (step === "form" && selectedKind) {
-    let HeaderIcon = IconArrowLeft;
-    let headerLabel = t("common.action.previous");
-    if (innerProps.initialKind) {
-      HeaderIcon = IconX;
-      headerLabel = t("common.action.close");
-    }
-
     return (
       <ScrollArea.Autosize mah="80vh">
-        <UnstyledButton mb="md" onClick={handleFormBack} aria-label={headerLabel}>
-          <Group gap="xs">
-            <HeaderIcon size={18} />
-            <IntegrationAvatar kind={selectedKind} size="sm" />
-            <Title order={4}>{getIntegrationName(selectedKind)}</Title>
-          </Group>
-        </UnstyledButton>
-        <NewIntegrationForm
-          kind={selectedKind}
-          initialUrl={innerProps.initialUrl}
-          initialName={innerProps.initialName}
-          onSuccess={handleSuccess}
-          onCancel={handleFormBack}
-        />
+        <Group gap="xs" mb="md" style={{ cursor: "pointer" }} onClick={handleBack}>
+          <IconArrowLeft size={18} />
+          <IntegrationAvatar kind={selectedKind} size="sm" />
+          <Title order={4}>{getIntegrationName(selectedKind)}</Title>
+        </Group>
+        <NewIntegrationForm kind={selectedKind} onSuccess={handleSuccess} onCancel={handleBack} />
       </ScrollArea.Autosize>
     );
   }

packages/api/src/router/docker/docker-router.ts

@@ -23,11 +23,6 @@ const dockerContainerTargetSchema = z.object({
 });
 const dockerContainerTargetsSchema = z.array(dockerContainerTargetSchema).min(1).max(100);
 
-const normalizeGetContainersInput = (input: { endpointIds?: string[] } | undefined) => {
-  if (!input?.endpointIds || input.endpointIds.length === 0) return {};
-  return input;
-};
-
 export const dockerRouter = createTRPCRouter({
   reconcileServices: permissionRequiredProcedure
     .requiresPermission("admin")
@@ -70,14 +65,12 @@ export const dockerRouter = createTRPCRouter({
     .meta({
       mcp: {
         enabled: true,
-        description:
-          "List Docker containers with their state, image, CPU/memory usage, and ports. Optionally filter by endpoint IDs; omitted or empty means all endpoints.",
+        description: "List all Docker containers with their state, image, CPU/memory usage, and ports",
       },
     })
     .concat(dockerMiddleware())
-    .input(z.object({ endpointIds: z.array(z.string().min(1)).max(100).optional() }).optional())
-    .query(async ({ input }) => {
-      const innerHandler = dockerContainersRequestHandler.handler(normalizeGetContainersInput(input));
+    .query(async () => {
+      const innerHandler = dockerContainersRequestHandler.handler({});
       const result = await innerHandler.getDataAsync();
 
       const { data, timestamp } = result;

packages/api/src/router/log.ts

@@ -11,10 +11,6 @@ import { createTRPCRouter, permissionRequiredProcedure } from "../trpc";
 
 const logger = createLogger({ module: "logRouter" });
 
-type LogSubscriptionEvent =
-  | { type: "history"; messages: LoggerMessage[] }
-  | { type: "message"; message: LoggerMessage };
-
 export const logRouter = createTRPCRouter({
   subscribe: permissionRequiredProcedure
     .requiresPermission("other-view-logs")
@@ -24,61 +20,15 @@ export const logRouter = createTRPCRouter({
       }),
     )
     .subscription(({ input }) => {
-      return observable<LogSubscriptionEvent>((emit) => {
-        let isClosed = false;
-        let unsubscribe: (() => void) | null = null;
-        let isHistoryLoaded = false;
-        const bufferedMessages: LoggerMessage[] = [];
-
-        const onMessage = (message: LoggerMessage) => {
-          if (!input.levels.includes(message.level)) return;
-
-          if (!isHistoryLoaded) {
-            bufferedMessages.push(message);
-            return;
-          }
-
-          emit.next({ type: "message", message });
-        };
-
-        void loggingChannel
-          .subscribeAsync(onMessage)
-          .then(async (unsubscribeFromLogging) => {
-            if (isClosed) {
-              unsubscribeFromLogging();
-              return;
-            }
-
-            unsubscribe = unsubscribeFromLogging;
-            logger.info("A tRPC client has connected to the logging procedure");
-
-            const history = (await loggingChannel.getRecentAsync()).filter((message) =>
-              input.levels.includes(message.level),
-            );
-            if (isClosed) return;
-
-            emit.next({ type: "history", messages: history });
-
-            const historyIds = new Set(history.map((message) => message.id));
-            isHistoryLoaded = true;
-            for (const message of bufferedMessages) {
-              if (!historyIds.has(message.id)) {
-                emit.next({ type: "message", message });
-              }
-            }
-            bufferedMessages.length = 0;
-          })
-          .catch((error: unknown) => {
-            unsubscribe?.();
-            unsubscribe = null;
-            if (!isClosed) {
-              emit.error(error);
-            }
-          });
+      return observable<LoggerMessage>((emit) => {
+        const unsubscribe = loggingChannel.subscribe((data) => {
+          if (!input.levels.includes(data.level)) return;
+          emit.next(data);
+        });
+        logger.info("A tRPC client has connected to the logging procedure");
 
         return () => {
-          isClosed = true;
-          unsubscribe?.();
+          unsubscribe();
         };
       });
     }),

packages/api/src/router/test/log.spec.ts

@@ -1,79 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-
-import type { Session } from "@homarr/auth";
-import type { LoggerMessage } from "@homarr/redis";
-
-import { logRouter } from "../log";
-
-const mocks = vi.hoisted(() => ({
-  getRecentAsync: vi.fn(),
-  subscribeAsync: vi.fn(),
-}));
-
-vi.mock("@homarr/redis", () => ({
-  loggingChannel: {
-    getRecentAsync: mocks.getRecentAsync,
-    subscribeAsync: mocks.subscribeAsync,
-  },
-}));
-
-const session = {
-  user: {
-    id: "log-viewer",
-    permissions: ["other-view-logs"],
-    colorScheme: "light",
-  },
-  expires: new Date(0).toISOString(),
-} satisfies Session;
-
-const createMessage = (id: string, timestamp: number): LoggerMessage => ({
-  id,
-  timestamp: new Date(timestamp),
-  level: "info",
-  message: id,
-});
-
-describe("log.subscribe", () => {
-  test("emits history before buffered live messages without duplicates", async () => {
-    const historyDeferred = Promise.withResolvers<LoggerMessage[]>();
-    let onMessage: ((message: LoggerMessage) => void) | undefined;
-    const unsubscribe = vi.fn();
-
-    mocks.subscribeAsync.mockImplementation(async (callback: (message: LoggerMessage) => void) => {
-      onMessage = callback;
-      return unsubscribe;
-    });
-    mocks.getRecentAsync.mockReturnValue(historyDeferred.promise);
-
-    const caller = logRouter.createCaller({
-      db: null as never,
-      deviceType: undefined,
-      session,
-    });
-    const subscription = await caller.subscribe({ levels: ["info"] });
-    const events: object[] = [];
-    const observer = subscription.subscribe({
-      next(event) {
-        events.push(event);
-      },
-    });
-
-    await vi.waitFor(() => expect(mocks.getRecentAsync).toHaveBeenCalledOnce());
-
-    const retainedMessage = createMessage("retained", 1);
-    const liveMessage = createMessage("live", 2);
-    onMessage?.(retainedMessage);
-    onMessage?.(liveMessage);
-    historyDeferred.resolve([retainedMessage]);
-
-    await vi.waitFor(() =>
-      expect(events).toEqual([
-        { type: "history", messages: [retainedMessage] },
-        { type: "message", message: liveMessage },
-      ]),
-    );
-
-    observer.unsubscribe();
-    expect(unsubscribe).toHaveBeenCalledOnce();
-  });
-});

packages/core/src/infrastructure/logs/constants.ts

@@ -1,20 +1,6 @@
-import z from "zod/v4";
-
 export const logLevels = ["error", "warn", "info", "debug"] as const;
 export type LogLevel = (typeof logLevels)[number];
 
-export const loggerMessageSchema = z.object({
-  id: z.string(),
-  timestamp: z.date(),
-  message: z.string(),
-  level: z.enum(logLevels),
-});
-export type LoggerMessage = z.infer<typeof loggerMessageSchema>;
-
-export const LOG_HISTORY_MAX_ENTRIES = 5_000;
-export const LOG_HISTORY_KEY = "list:logging:history";
-export const LOG_PUBLISH_CHANNEL = "pubSub:logging";
-
 export const logLevelConfiguration = {
   error: {
     prefix: "🔴",

packages/core/src/infrastructure/logs/transports/redis-transport.ts

@@ -1,11 +1,8 @@
-import { randomUUID } from "node:crypto";
-import { stringify } from "superjson";
+import superjson from "superjson";
 import Transport from "winston-transport";
 
 import type { RedisClient } from "../../redis/client";
 import { createRedisClient } from "../../redis/client";
-import type { LoggerMessage } from "../constants";
-import { LOG_HISTORY_KEY, LOG_HISTORY_MAX_ENTRIES, LOG_PUBLISH_CHANNEL } from "../constants";
 
 const messageSymbol = Symbol.for("message");
 const levelSymbol = Symbol.for("level");
@@ -16,41 +13,32 @@ const levelSymbol = Symbol.for("level");
 //
 export class RedisTransport extends Transport {
   private redis: RedisClient | null = null;
+  public static readonly publishChannel = "pubSub:logging";
 
   /**
-   * Retain the log in a bounded Redis list and publish it to live subscribers.
+   * Log the info to the Redis channel
    */
-  log(info: { [messageSymbol]: string; [levelSymbol]: LoggerMessage["level"] }, callback: () => void) {
+  log(info: { [messageSymbol]: string; [levelSymbol]: string }, callback: () => void) {
     setImmediate(() => {
       this.emit("logged", info);
     });
 
-    const message: LoggerMessage = {
-      id: randomUUID(),
-      timestamp: new Date(),
-      message: info[messageSymbol],
-      level: info[levelSymbol],
-    };
-    const serializedMessage = stringify(message);
+    // Is only initialized here because it did not work when initialized in the constructor or outside the class
+    this.redis ??= createRedisClient();
 
-    callback();
-
-    void Promise.resolve()
+    this.redis
+      .publish(
+        RedisTransport.publishChannel,
+        superjson.stringify({
+          message: info[messageSymbol],
+          level: info[levelSymbol],
+        }),
+      )
       .then(() => {
-        // Is only initialized here because it did not work when initialized in the constructor or outside the class
-        if (!this.redis) {
-          this.redis = createRedisClient();
-          this.redis.options.maxRetriesPerRequest = 1;
-          this.redis.on("error", () => undefined);
-        }
-
-        return this.redis
-          .multi()
-          .lpush(LOG_HISTORY_KEY, serializedMessage)
-          .ltrim(LOG_HISTORY_KEY, 0, LOG_HISTORY_MAX_ENTRIES - 1)
-          .publish(LOG_PUBLISH_CHANNEL, serializedMessage)
-          .exec();
+        callback();
       })
-      .catch(() => undefined);
+      .catch(() => {
+        // Ignore errors
+      });
   }
 }

packages/integrations/src/emby/emby-integration.ts

@@ -112,15 +112,13 @@ export class EmbyIntegration extends Integration implements IMediaServerIntegrat
         let currentlyPlaying: StreamSession["currentlyPlaying"] | null = null;
 
         if (sessionInfo.NowPlayingItem) {
-          const isEpisode = sessionInfo.NowPlayingItem.Type === BaseItemKind.Episode;
-
           currentlyPlaying = {
             type: convertJellyfinType(sessionInfo.NowPlayingItem.Type),
             name: sessionInfo.NowPlayingItem.SeriesName ?? sessionInfo.NowPlayingItem.Name ?? "",
             seasonName: sessionInfo.NowPlayingItem.SeasonName ?? "",
-            seasonNumber: isEpisode ? (sessionInfo.NowPlayingItem.ParentIndexNumber ?? null) : null,
-            episodeName: isEpisode ? sessionInfo.NowPlayingItem.EpisodeTitle : null,
-            episodeNumber: isEpisode ? (sessionInfo.NowPlayingItem.IndexNumber ?? null) : null,
+            seasonNumber: sessionInfo.NowPlayingItem.ParentIndexNumber ?? null,
+            episodeName: sessionInfo.NowPlayingItem.EpisodeTitle,
+            episodeNumber: sessionInfo.NowPlayingItem.IndexNumber ?? null,
             albumName: sessionInfo.NowPlayingItem.Album ?? "",
             episodeCount: sessionInfo.NowPlayingItem.EpisodeCount,
             playback: {

packages/integrations/src/jellyfin/jellyfin-integration.spec.ts

@@ -1,65 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import { extractHost, parseLocation } from "./jellyfin-integration";
-
-describe("extractHost", () => {
-  test("strips the port from an IPv4 endpoint", () => {
-    expect(extractHost("192.168.1.100:54321")).toBe("192.168.1.100");
-  });
-
-  test("returns an IPv4 address unchanged when there's no port", () => {
-    expect(extractHost("8.8.8.8")).toBe("8.8.8.8");
-  });
-
-  test("strips brackets and the port from a bracketed IPv6 endpoint", () => {
-    expect(extractHost("[::1]:8096")).toBe("::1");
-  });
-
-  test("returns a bare IPv6 address unchanged when there's no port", () => {
-    expect(extractHost("::1")).toBe("::1");
-  });
-});
-
-describe("parseLocation", () => {
-  test("returns null when there's no endpoint to classify", () => {
-    expect(parseLocation(null)).toBeNull();
-    expect(parseLocation(undefined)).toBeNull();
-    expect(parseLocation("")).toBeNull();
-  });
-
-  test("returns null for a value that isn't an IP", () => {
-    expect(parseLocation("not-an-ip:1234")).toBeNull();
-  });
-
-  test("classifies private IPv4 ranges as lan", () => {
-    expect(parseLocation("192.168.1.100:54321")).toBe("lan");
-    expect(parseLocation("10.0.0.5:1234")).toBe("lan");
-    expect(parseLocation("172.16.5.5:1234")).toBe("lan");
-    expect(parseLocation("127.0.0.1:8096")).toBe("lan");
-  });
-
-  test("classifies a public IPv4 address as wan", () => {
-    expect(parseLocation("8.8.8.8:1234")).toBe("wan");
-  });
-
-  test("classifies IPv6 loopback and unique-local addresses as lan", () => {
-    expect(parseLocation("[::1]:8096")).toBe("lan");
-    expect(parseLocation("[fd12:3456:789a::1]:8096")).toBe("lan");
-  });
-
-  test("classifies a public IPv6 address as wan", () => {
-    expect(parseLocation("[2606:4700:4700::1111]:8096")).toBe("wan");
-  });
-
-  test("unwraps an IPv4-mapped IPv6 address before classifying it", () => {
-    expect(parseLocation("[::ffff:192.168.1.5]:8096")).toBe("lan");
-    expect(parseLocation("[::ffff:8.8.8.8]:8096")).toBe("wan");
-  });
-
-  test("classifies link-local addresses as lan", () => {
-    // Link-local traffic can't traverse a router, so it's always LAN even though
-    // it isn't a private range in the traditional (RFC 1918 / ULA) sense.
-    expect(parseLocation("169.254.1.5:8096")).toBe("lan");
-    expect(parseLocation("[fe80::1]:8096")).toBe("lan");
-  });
-});

packages/integrations/src/jellyfin/jellyfin-integration.ts

@@ -1,4 +1,3 @@
-import { BlockList, isIP } from "node:net";
 import { Jellyfin } from "@jellyfin/sdk";
 import { BaseItemKind } from "@jellyfin/sdk/lib/generated-client/models";
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
@@ -22,42 +21,6 @@ function ticksToMs(ticks: number | null | undefined): number | null {
   return ticks ? Math.round(ticks / 10_000) : null;
 }
 
-// Unlike Plex, Jellyfin doesn't report a session's network location directly - only the
-// client's RemoteEndPoint (an IP, optionally with a port). Classify it ourselves.
-const privateAddresses = new BlockList();
-privateAddresses.addSubnet("10.0.0.0", 8, "ipv4");
-privateAddresses.addSubnet("172.16.0.0", 12, "ipv4");
-privateAddresses.addSubnet("192.168.0.0", 16, "ipv4");
-privateAddresses.addSubnet("127.0.0.0", 8, "ipv4");
-privateAddresses.addSubnet("169.254.0.0", 16, "ipv4");
-privateAddresses.addSubnet("fc00::", 7, "ipv6");
-privateAddresses.addSubnet("fe80::", 10, "ipv6");
-privateAddresses.addAddress("::1", "ipv6");
-
-export function extractHost(remoteEndPoint: string): string {
-  if (remoteEndPoint.startsWith("[")) {
-    const end = remoteEndPoint.indexOf("]");
-    return end === -1 ? remoteEndPoint : remoteEndPoint.slice(1, end);
-  }
-  // A bare IPv6 address (no brackets, no port) has more than one colon.
-  const isIPv4WithPort = remoteEndPoint.split(":").length === 2;
-  return isIPv4WithPort ? remoteEndPoint.slice(0, remoteEndPoint.lastIndexOf(":")) : remoteEndPoint;
-}
-
-export function parseLocation(remoteEndPoint: string | null | undefined): "lan" | "wan" | null {
-  if (!remoteEndPoint) return null;
-  let host = extractHost(remoteEndPoint);
-  let family = isIP(host);
-  // A dual-stack server can report an IPv4 client as an IPv4-mapped IPv6 address
-  // (e.g. "::ffff:192.168.1.5") - unwrap it so the IPv4 private ranges still apply.
-  if (family === 6 && host.toLowerCase().startsWith("::ffff:") && isIP(host.slice(7)) === 4) {
-    host = host.slice(7);
-    family = 4;
-  }
-  if (!family) return null;
-  return privateAddresses.check(host, family === 4 ? "ipv4" : "ipv6") ? "lan" : "wan";
-}
-
 @HandleIntegrationErrors([integrationAxiosHttpErrorHandler])
 export class JellyfinIntegration extends Integration implements IMediaServerIntegration, IMediaReleasesIntegration {
   private readonly jellyfin: Jellyfin = new Jellyfin({
@@ -93,27 +56,17 @@ export class JellyfinIntegration extends Integration implements IMediaServerInte
         if (sessionInfo.NowPlayingItem) {
           const positionMs = ticksToMs(sessionInfo.PlayState?.PositionTicks);
           const durationMs = ticksToMs(sessionInfo.NowPlayingItem.RunTimeTicks);
-          // Jellyfin only reliably fills in MediaSources[].Bitrate for a transcoding session -
-          // /Sessions has no `fields` selector to force it, so fall back to summing the individual
-          // media streams' own bitrates (populated from the source file's metadata) for direct play.
-          const mediaStreamsBitrateBps = sessionInfo.NowPlayingItem.MediaStreams?.reduce(
-            (sum, stream) => sum + (stream.BitRate ?? 0),
-            0,
-          );
           const bitrateBps =
-            sessionInfo.TranscodingInfo?.Bitrate ??
-            sessionInfo.NowPlayingItem.MediaSources?.[0]?.Bitrate ??
-            (mediaStreamsBitrateBps || null);
+            sessionInfo.TranscodingInfo?.Bitrate ?? sessionInfo.NowPlayingItem.MediaSources?.[0]?.Bitrate ?? null;
           const bitrateKbps = bitrateBps !== null ? Math.round(bitrateBps / 1000) : null;
-          const isEpisode = sessionInfo.NowPlayingItem.Type === BaseItemKind.Episode;
 
           currentlyPlaying = {
             type: convertJellyfinType(sessionInfo.NowPlayingItem.Type),
             name: sessionInfo.NowPlayingItem.SeriesName ?? sessionInfo.NowPlayingItem.Name ?? "",
             seasonName: sessionInfo.NowPlayingItem.SeasonName ?? "",
-            seasonNumber: isEpisode ? (sessionInfo.NowPlayingItem.ParentIndexNumber ?? null) : null,
-            episodeName: isEpisode ? sessionInfo.NowPlayingItem.EpisodeTitle : null,
-            episodeNumber: isEpisode ? (sessionInfo.NowPlayingItem.IndexNumber ?? null) : null,
+            seasonNumber: sessionInfo.NowPlayingItem.ParentIndexNumber ?? null,
+            episodeName: sessionInfo.NowPlayingItem.EpisodeTitle,
+            episodeNumber: sessionInfo.NowPlayingItem.IndexNumber ?? null,
             albumName: sessionInfo.NowPlayingItem.Album ?? "",
             episodeCount: sessionInfo.NowPlayingItem.EpisodeCount,
             playback: {
@@ -121,7 +74,7 @@ export class JellyfinIntegration extends Integration implements IMediaServerInte
               positionMs,
               durationMs,
             },
-            location: parseLocation(sessionInfo.RemoteEndPoint),
+            location: null,
             metadata: {
               video: {
                 resolution:

packages/integrations/src/plex/plex-integration.ts

@@ -115,9 +115,9 @@ export class PlexIntegration extends Integration implements IMediaServerIntegrat
             type: mediaElement.$.live === "1" ? "tv" : PlexIntegration.getCurrentlyPlayingType(mediaElement.$.type),
             name: mediaElement.$.grandparentTitle ?? mediaElement.$.title ?? "Unknown",
             seasonName: mediaElement.$.parentTitle,
-            seasonNumber: mediaElement.$.type === "episode" ? parseOptionalNumber(mediaElement.$.parentIndex) : null,
-            episodeName: mediaElement.$.type === "episode" ? (mediaElement.$.title ?? null) : null,
-            episodeNumber: mediaElement.$.type === "episode" ? parseOptionalNumber(mediaElement.$.index) : null,
+            seasonNumber: parseOptionalNumber(mediaElement.$.parentIndex),
+            episodeName: mediaElement.$.title ?? null,
+            episodeNumber: parseOptionalNumber(mediaElement.$.index),
             albumName: mediaElement.$.type === "track" ? (mediaElement.$.parentTitle ?? null) : null,
             episodeCount: parseOptionalNumber(mediaElement.$.index),
             playback: {

packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx

@@ -8,35 +8,35 @@ import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { appHrefSchema } from "@homarr/validation/app";
 
 interface AddDockerAppToHomarrProps {
   selectedContainers: RouterOutputs["docker"]["getContainers"]["containers"];
-  initialUrls?: (string | null)[];
+  initialUrls?: string[];
 }
 
-const formSchema = z.object({
-  containerUrls: z.array(appHrefSchema),
-});
-
 export const AddDockerAppToHomarrModal = createModal<AddDockerAppToHomarrProps>(({ actions, innerProps }) => {
   const t = useI18n();
-  const form = useZodForm(formSchema, {
-    initialValues: {
-      containerUrls: innerProps.selectedContainers.map((container, index) => {
-        const initialUrl = innerProps.initialUrls?.[index];
-        if (initialUrl !== undefined) return initialUrl;
+  const form = useZodForm(
+    z.object({
+      containerUrls: z.array(z.string().url().nullable()),
+    }),
+    {
+      initialValues: {
+        containerUrls: innerProps.selectedContainers.map((container, index) => {
+          const initialUrl = innerProps.initialUrls?.[index];
+          if (initialUrl) return initialUrl;
 
-        const candidates = buildDockerServiceUrlCandidates({
-          containerName: container.name,
-          endpointHost: container.host,
-          ports: container.ports,
-        }).filter(({ url }) => url.length > 0);
+          const candidates = buildDockerServiceUrlCandidates({
+            containerName: container.name,
+            endpointHost: container.host,
+            ports: container.ports,
+          }).filter(({ url }) => url.length > 0);
 
-        return candidates.find(({ scopes }) => scopes.includes("browser"))?.url ?? candidates[0]?.url ?? null;
-      }),
+          return candidates.find(({ scopes }) => scopes.includes("browser"))?.url ?? candidates[0]?.url ?? null;
+        }),
+      },
     },
-  });
+  );
   const { mutate, isPending } = clientApi.app.createMany.useMutation({
     onSuccess() {
       actions.closeModal();
@@ -52,13 +52,13 @@ export const AddDockerAppToHomarrModal = createModal<AddDockerAppToHomarrProps>(
       });
     },
   });
-  const handleSubmit = ({ containerUrls }: z.infer<typeof formSchema>) => {
+  const handleSubmit = () => {
     mutate(
       innerProps.selectedContainers.map((container, index) => ({
         name: container.name,
         iconUrl: container.iconUrl,
         description: null,
-        href: containerUrls[index] || null,
+        href: form.values.containerUrls[index] ?? null,
         pingUrl: null,
       })),
     );
@@ -68,31 +68,28 @@ export const AddDockerAppToHomarrModal = createModal<AddDockerAppToHomarrProps>(
       <LoadingOverlay visible={isPending} />
       <Stack>
         <List spacing={"xs"}>
-          {innerProps.selectedContainers.map((container, index) => {
-            const inputProps = form.getInputProps(`containerUrls.${index}`);
-            return (
-              <List.Item
-                styles={{ itemWrapper: { width: "100%" }, itemLabel: { flex: 1 } }}
-                icon={
-                  <Avatar
-                    variant="outline"
-                    radius={container.iconUrl ? "sm" : "md"}
-                    size={30}
-                    styles={{ image: { objectFit: "contain" } }}
-                    src={container.iconUrl}
-                  >
-                    {container.name.at(0)?.toUpperCase()}
-                  </Avatar>
-                }
-                key={container.id}
-              >
-                <Group justify="space-between" wrap={"nowrap"}>
-                  <Text lineClamp={1}>{container.name}</Text>
-                  <TextInput {...inputProps} value={inputProps.value ?? ""} />
-                </Group>
-              </List.Item>
-            );
-          })}
+          {innerProps.selectedContainers.map((container, index) => (
+            <List.Item
+              styles={{ itemWrapper: { width: "100%" }, itemLabel: { flex: 1 } }}
+              icon={
+                <Avatar
+                  variant="outline"
+                  radius={container.iconUrl ? "sm" : "md"}
+                  size={30}
+                  styles={{ image: { objectFit: "contain" } }}
+                  src={container.iconUrl}
+                >
+                  {container.name.at(0)?.toUpperCase()}
+                </Avatar>
+              }
+              key={container.id}
+            >
+              <Group justify="space-between" wrap={"nowrap"}>
+                <Text lineClamp={1}>{container.name}</Text>
+                <TextInput {...form.getInputProps(`containerUrls.${index}`)} />
+              </Group>
+            </List.Item>
+          ))}
         </List>
         <Group justify="end">
           <Button onClick={actions.closeModal} variant="light" px={"xl"}>

packages/onboarding/src/index.ts

@@ -1,5 +1,3 @@
 export { OnboardingAuthShell } from "./onboarding-auth-shell";
 export { OnboardingStudio } from "./onboarding-studio";
-export { normalizeServiceUrl } from "./discovery-selection";
-export { ServiceUrlTemplate } from "./service-url-template";
 export type { OnboardingEnvironment, OnboardingStudioProps } from "./types";

packages/onboarding/src/onboarding-studio.module.css

@@ -358,7 +358,6 @@
   display: flex;
   width: max-content;
   min-width: 100%;
-  margin: 0;
   padding: 0.2rem;
   border-radius: var(--mantine-radius-md);
   background: var(--mantine-color-default);

packages/onboarding/src/service-url-template.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { useRef, useState } from "react";
-import { FloatingIndicator, Stack, TextInput, UnstyledButton } from "@mantine/core";
-
-import type { UrlTemplateMode } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import { useOnboardingSounds } from "./use-onboarding-sounds";
-import classes from "./onboarding-studio.module.css";
-
-interface FloatingControlProps<T extends string> {
-  value: T;
-  onChange: (value: T) => void;
-  options: readonly { value: T; label: ReactNode }[];
-  ariaLabel: string;
-}
-
-export const OnboardingFloatingControl = <T extends string>({
-  value,
-  onChange,
-  options,
-  ariaLabel,
-}: FloatingControlProps<T>) => {
-  const [rootRef, setRootRef] = useState<HTMLFieldSetElement | null>(null);
-  const controlRefs = useRef<Record<string, HTMLButtonElement | null>>({});
-  const sounds = useOnboardingSounds();
-
-  return (
-    <div className={classes.floatingControlScroller}>
-      <fieldset ref={setRootRef} className={classes.floatingControlRoot} aria-label={ariaLabel}>
-        <FloatingIndicator
-          target={controlRefs.current[value] ?? null}
-          parent={rootRef}
-          className={classes.floatingControlIndicator}
-        />
-        {options.map((option) => {
-          const selected = value === option.value;
-          return (
-            <UnstyledButton
-              key={option.value}
-              ref={(node) => {
-                controlRefs.current[option.value] = node;
-              }}
-              type="button"
-              className={classes.floatingControl}
-              data-active={selected}
-              aria-pressed={selected}
-              onClick={() => {
-                sounds.click();
-                onChange(option.value);
-              }}
-            >
-              {option.label}
-            </UnstyledButton>
-          );
-        })}
-      </fieldset>
-    </div>
-  );
-};
-
-interface ServiceUrlTemplateProps {
-  serverOrigin: string;
-  onServerOriginChange: (value: string) => void;
-  mode: UrlTemplateMode;
-  onModeChange: (value: UrlTemplateMode) => void;
-  readOnly?: boolean;
-  required?: boolean;
-}
-
-export const ServiceUrlTemplate = ({
-  serverOrigin,
-  onServerOriginChange,
-  mode,
-  onModeChange,
-  readOnly,
-  required,
-}: ServiceUrlTemplateProps) => {
-  const t = useScopedI18n("common.serviceUrlTemplate");
-
-  return (
-    <Stack gap="sm">
-      <TextInput
-        label={t("serverTitle")}
-        placeholder="home.lan · 192.168.1.10 · https://homarr.example.com"
-        value={serverOrigin}
-        onChange={(event) => onServerOriginChange(event.currentTarget.value)}
-        readOnly={readOnly}
-        required={required}
-        withAsterisk={required}
-      />
-      <OnboardingFloatingControl
-        ariaLabel={t("urlModeLabel")}
-        value={mode}
-        onChange={onModeChange}
-        options={[
-          { value: "hostPort", label: t("hostPort") },
-          { value: "subdomain", label: t("subdomain") },
-          { value: "path", label: t("path") },
-        ]}
-      />
-    </Stack>
-  );
-};

packages/onboarding/src/setup-studio.tsx

@@ -15,6 +15,7 @@ import {
   ColorSwatch,
   CopyButton,
   Fieldset,
+  FloatingIndicator,
   Group,
   Paper,
   PasswordInput,
@@ -98,7 +99,6 @@ import type { OnboardingStudioProps } from "./types";
 import { getBoardValidationErrors } from "./board-validation";
 import { OnboardingBackdrop } from "./onboarding-backdrop";
 import { OnboardingWordmark } from "./onboarding-wordmark";
-import { OnboardingFloatingControl, ServiceUrlTemplate } from "./service-url-template";
 import { useOnboardingSounds } from "./use-onboarding-sounds";
 import {
   normalizeServiceUrl,
@@ -152,6 +152,57 @@ const initialSecondaryColor = "#fd7e14";
 const emptyDiscoveredIntegrations: DockerDiscoveryData["integrations"] = [];
 const emptyDiscoveredApps: DockerDiscoveryData["apps"] = [];
 
+interface OnboardingFloatingControlProps<T extends string> {
+  value: T;
+  onChange: (value: T) => void;
+  options: readonly { value: T; label: ReactNode }[];
+  ariaLabel: string;
+}
+
+const OnboardingFloatingControl = <T extends string>({
+  value,
+  onChange,
+  options,
+  ariaLabel,
+}: OnboardingFloatingControlProps<T>) => {
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+  const controlRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const sounds = useOnboardingSounds();
+
+  return (
+    <div className={classes.floatingControlScroller}>
+      <div ref={setRootRef} className={classes.floatingControlRoot} role="group" aria-label={ariaLabel}>
+        <FloatingIndicator
+          target={controlRefs.current[value] ?? null}
+          parent={rootRef}
+          className={classes.floatingControlIndicator}
+        />
+        {options.map((option) => {
+          const selected = value === option.value;
+          return (
+            <UnstyledButton
+              key={option.value}
+              ref={(node) => {
+                controlRefs.current[option.value] = node;
+              }}
+              type="button"
+              className={classes.floatingControl}
+              data-active={selected}
+              aria-pressed={selected}
+              onClick={() => {
+                sounds.click();
+                onChange(option.value);
+              }}
+            >
+              {option.label}
+            </UnstyledButton>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 export const SetupStudio = ({ environment, assistantConfiguration }: OnboardingStudioProps) => {
   const t = useScopedI18n("init.studio");
   const tCommon = useScopedI18n("common.action");
@@ -873,13 +924,24 @@ const Essentials = (props: StudioSectionProps) => {
         <Alert variant="light" icon={<IconInfoCircle size={18} />} my="xs">
           {t("serverOriginHelp")}
         </Alert>
-        <ServiceUrlTemplate
-          serverOrigin={props.serverOrigin}
-          onServerOriginChange={props.setServerOrigin}
-          mode={props.urlMode}
-          onModeChange={props.setUrlMode}
+        <TextInput
+          label={t("serverTitle")}
+          placeholder="home.lan · 192.168.1.10 · https://homarr.example.com"
+          value={props.serverOrigin}
+          onChange={(event) => props.setServerOrigin(event.currentTarget.value)}
           readOnly={!isHydrated}
           required
+          withAsterisk
+        />
+        <OnboardingFloatingControl
+          ariaLabel={t("urlModeLabel")}
+          value={props.urlMode}
+          onChange={props.setUrlMode}
+          options={[
+            { value: "hostPort", label: t("hostPort") },
+            { value: "subdomain", label: t("subdomain") },
+            { value: "path", label: t("path") },
+          ]}
         />
         {props.serverOrigin ? (
           <Code block>{buildIntegrationUrl("sonarr", props.serverOrigin, props.urlMode)}</Code>

packages/redis/src/index.ts

@@ -1,16 +1,6 @@
-import { parse } from "superjson";
-
-import type { LoggerMessage } from "@homarr/core/infrastructure/logs/constants";
-import {
-  loggerMessageSchema,
-  LOG_HISTORY_KEY,
-  LOG_HISTORY_MAX_ENTRIES,
-  LOG_PUBLISH_CHANNEL,
-} from "@homarr/core/infrastructure/logs/constants";
+import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
 
 import { createListChannel, createSubPubChannel } from "./lib/channel";
-import { ChannelSubscriptionTracker } from "./lib/channel-subscription-tracker";
-import { createRedisConnection } from "./lib/connection";
 
 export {
   handshakeAsync,
@@ -25,31 +15,9 @@ export const pingChannel = createSubPubChannel<
 >("ping");
 export const pingUrlChannel = createListChannel<string>("ping-url");
 
-export type { LoggerMessage } from "@homarr/core/infrastructure/logs/constants";
+export interface LoggerMessage {
+  message: string;
+  level: LogLevel;
+}
 
-const loggingHistoryClient = createRedisConnection();
-
-const parseLoggerMessage = (message: string): LoggerMessage | null => {
-  try {
-    const result = loggerMessageSchema.safeParse(parse<unknown>(message));
-    return result.success ? result.data : null;
-  } catch {
-    return null;
-  }
-};
-
-export const loggingChannel = {
-  subscribeAsync: (callback: (message: LoggerMessage) => void) =>
-    ChannelSubscriptionTracker.subscribeAsync(LOG_PUBLISH_CHANNEL, (message) => {
-      const parsedMessage = parseLoggerMessage(message);
-      if (parsedMessage) callback(parsedMessage);
-    }),
-  getRecentAsync: async () => {
-    const messages =
-      (await loggingHistoryClient?.lrange(LOG_HISTORY_KEY, 0, LOG_HISTORY_MAX_ENTRIES - 1).catch(() => [])) ?? [];
-    return messages
-      .map(parseLoggerMessage)
-      .filter((message): message is LoggerMessage => message !== null)
-      .toReversed();
-  },
-};
+export const loggingChannel = createSubPubChannel<LoggerMessage>("logging");

packages/redis/src/lib/channel-subscription-tracker.ts

@@ -18,7 +18,6 @@ type SubscriptionCallback = (message: string) => MaybePromise<void>;
  */
 export class ChannelSubscriptionTracker {
   private static subscriptions = new Map<string, Map<string, SubscriptionCallback>>();
-  private static subscriptionReadiness = new Map<string, Promise<void>>();
   private static redis = createRedisConnection();
   private static listenerActive = false;
 
@@ -29,25 +28,6 @@ export class ChannelSubscriptionTracker {
    * @returns a function to unsubscribe from the channel
    */
   public static subscribe(channelName: string, callback: SubscriptionCallback) {
-    return this.registerSubscription(channelName, callback).unsubscribe;
-  }
-
-  /**
-   * Subscribes to a channel and resolves once Redis confirms the subscription.
-   */
-  public static async subscribeAsync(channelName: string, callback: SubscriptionCallback) {
-    const subscription = this.registerSubscription(channelName, callback);
-
-    try {
-      await subscription.ready;
-      return subscription.unsubscribe;
-    } catch (error) {
-      subscription.unsubscribe();
-      throw error;
-    }
-  }
-
-  private static registerSubscription(channelName: string, callback: SubscriptionCallback) {
     logger.debug("Adding redis channel callback", { channel: channelName });
 
     // We only want to activate the listener once
@@ -58,18 +38,11 @@ export class ChannelSubscriptionTracker {
 
     const channelSubscriptions = this.subscriptions.get(channelName) ?? new Map<string, SubscriptionCallback>();
     const id = randomUUID();
-    let ready = this.subscriptionReadiness.get(channelName);
 
-    // Subscribe when this channel has no active or pending Redis subscription.
-    if (!ready) {
+    // If there are no subscriptions to the channel, subscribe to it
+    if (channelSubscriptions.size === 0) {
       logger.debug("Subscribing to redis channel", { channel: channelName });
-      ready = this.redis.subscribe(channelName).then(() => undefined);
-      this.subscriptionReadiness.set(channelName, ready);
-      void ready.catch(() => {
-        if (this.subscriptionReadiness.get(channelName) === ready) {
-          this.subscriptionReadiness.delete(channelName);
-        }
-      });
+      void this.redis.subscribe(channelName);
     }
 
     logger.debug("Adding redis channel callback", { channel: channelName, id });
@@ -77,26 +50,24 @@ export class ChannelSubscriptionTracker {
 
     this.subscriptions.set(channelName, channelSubscriptions);
 
-    const unsubscribe = () => {
+    // Return a function to unsubscribe
+    return () => {
       logger.debug("Removing redis channel callback", { channel: channelName, id });
 
-      const currentSubscriptions = this.subscriptions.get(channelName);
-      if (!currentSubscriptions) return;
+      const channelSubscriptions = this.subscriptions.get(channelName);
+      if (!channelSubscriptions) return;
 
-      currentSubscriptions.delete(id);
+      channelSubscriptions.delete(id);
 
       // If there are no subscriptions to the channel, unsubscribe from it
-      if (currentSubscriptions.size >= 1) {
+      if (channelSubscriptions.size >= 1) {
         return;
       }
 
       logger.debug("Unsubscribing from redis channel", { channel: channelName });
       void this.redis.unsubscribe(channelName);
       this.subscriptions.delete(channelName);
-      this.subscriptionReadiness.delete(channelName);
     };
-
-    return { ready, unsubscribe };
   }
 
   /**

packages/request-handler/src/docker.ts

@@ -195,24 +195,9 @@ const mockContainers: {
   },
 ];
 
-const demoDockerEndpoint = {
-  id: "demo",
-  name: "Demo Docker",
-  status: "available",
-  kind: "docker",
-  transport: "socket",
-  capabilities: ["inventory"],
-  source: "default",
-  scope: "admin",
-} satisfies DockerEndpointStatus;
-
 export const dockerContainersRequestHandler = createWidgetRequestHandler({
-  async requestAsync({ endpointIds }: { endpointIds?: string[] }) {
+  async requestAsync() {
     if (isDemoMode()) {
-      const includesDemoEndpoint =
-        endpointIds === undefined || endpointIds.length === 0 || endpointIds.includes("demo");
-      if (!includesDemoEndpoint) return { containers: [], endpoints: [] };
-
       return {
         containers: mockContainers.map((container) => ({
           ...container,
@@ -220,10 +205,21 @@ export const dockerContainersRequestHandler = createWidgetRequestHandler({
           endpointName: "Demo Docker",
           resourceId: `demo:${container.id}`,
         })),
-        endpoints: [demoDockerEndpoint],
+        endpoints: [
+          {
+            id: "demo",
+            name: "Demo Docker",
+            status: "available",
+            kind: "docker",
+            transport: "socket",
+            capabilities: ["inventory"],
+            source: "default",
+            scope: "admin",
+          },
+        ] satisfies DockerEndpointStatus[],
       };
     }
-    return await getContainersWithStatsAsync(dockerWidgetEndpointTimeoutMs, endpointIds);
+    return await getContainersWithStatsAsync();
   },
 });
 
@@ -308,8 +304,6 @@ export const streamContainerLogsAsync = async (
 };
 
 export const getDockerEndpointsAsync = (): DockerEndpointStatus[] => {
-  if (isDemoMode()) return [demoDockerEndpoint];
-
   const dockerInstances = DockerSingleton.getInstances();
   const initializationFailures = DockerSingleton.getInitializationFailures();
 
@@ -337,18 +331,9 @@ export const getDockerEndpointsAsync = (): DockerEndpointStatus[] => {
   ];
 };
 
-export async function getContainersWithStatsAsync(
-  timeoutMs = dockerWidgetEndpointTimeoutMs,
-  endpointIds: string[] = [],
-) {
-  const selectedEndpointIds = new Set(endpointIds);
-  const includesAllEndpoints = selectedEndpointIds.size === 0;
-  const dockerInstances = DockerSingleton.getInstances().filter(
-    ({ endpointId }) => includesAllEndpoints || selectedEndpointIds.has(endpointId),
-  );
-  const initializationFailures = DockerSingleton.getInitializationFailures().filter(
-    ({ descriptor }) => includesAllEndpoints || selectedEndpointIds.has(descriptor.id),
-  );
+export async function getContainersWithStatsAsync(timeoutMs = dockerWidgetEndpointTimeoutMs) {
+  const dockerInstances = DockerSingleton.getInstances();
+  const initializationFailures = DockerSingleton.getInitializationFailures();
   const results = await Promise.allSettled(
     dockerInstances.map(async ({ instance, host, endpointId, endpointName }) => {
       const instanceContainers = await withDockerTimeoutAsync(

packages/request-handler/src/test/docker.spec.ts

@@ -7,8 +7,6 @@ import { DockerSingleton } from "@homarr/docker";
 import {
   calculateCpuUsage,
   calculateMemoryUsage,
-  dockerContainersRequestHandler,
-  getDockerEndpointsAsync,
   getContainersWithStatsAsync,
   hasDockerEndpointCapability,
 } from "../docker";
@@ -129,31 +127,6 @@ describe("calculateMemoryUsage", () => {
 });
 
 describe("getContainersWithStatsAsync", () => {
-  test("queries only selected Docker endpoints and leaves an empty selection as all", async () => {
-    const firstListContainers = vi.fn(async () => []);
-    const secondListContainers = vi.fn(async () => []);
-    vi.spyOn(DockerSingleton, "getInstances").mockReturnValue([
-      createDockerInstance("first", firstListContainers),
-      createDockerInstance("second", secondListContainers),
-    ] as never);
-    vi.spyOn(DockerSingleton, "getInitializationFailures").mockReturnValue([]);
-
-    try {
-      const selectedResult = await getContainersWithStatsAsync(50, ["second"]);
-
-      expect(firstListContainers).not.toHaveBeenCalled();
-      expect(secondListContainers).toHaveBeenCalledOnce();
-      expect(selectedResult.endpoints.map(({ id }) => id)).toEqual(["second"]);
-
-      await getContainersWithStatsAsync(50, []);
-
-      expect(firstListContainers).toHaveBeenCalledOnce();
-      expect(secondListContainers).toHaveBeenCalledTimes(2);
-    } finally {
-      vi.restoreAllMocks();
-    }
-  });
-
   test("marks a timed-out endpoint unavailable without blocking healthy endpoints", async () => {
     vi.useFakeTimers();
     try {
@@ -238,26 +211,14 @@ describe("getContainersWithStatsAsync", () => {
   });
 });
 
-test("demo mode advertises and filters the same inventory-only endpoint", async () => {
+test("demo capabilities match the advertised inventory-only endpoint", () => {
   const previousDemoMode = process.env.DEMO_MODE;
   process.env.DEMO_MODE = "true";
   try {
-    expect(getDockerEndpointsAsync()).toEqual([
-      expect.objectContaining({ id: "demo", name: "Demo Docker", capabilities: ["inventory"] }),
-    ]);
-
-    const selected = await dockerContainersRequestHandler.handler({ endpointIds: ["demo"] }).getDataAsync();
-    expect(selected.data.endpoints).toEqual([expect.objectContaining({ id: "demo" })]);
-    expect(selected.data.containers.length).toBeGreaterThan(0);
-
-    const excluded = await dockerContainersRequestHandler.handler({ endpointIds: ["other"] }).getDataAsync();
-    expect(excluded.data).toEqual({ containers: [], endpoints: [] });
-
     expect(hasDockerEndpointCapability("demo", "inventory")).toBe(true);
     expect(hasDockerEndpointCapability("demo", "logs")).toBe(false);
     expect(hasDockerEndpointCapability("other", "inventory")).toBe(false);
   } finally {
-    dockerContainersRequestHandler.invalidateCache();
     if (previousDemoMode === undefined) delete process.env.DEMO_MODE;
     else process.env.DEMO_MODE = previousDemoMode;
   }

packages/translation/src/lang/en.json

@@ -66,10 +66,15 @@
         "themeAuto": "System",
         "themeLight": "Light",
         "themeDark": "Dark",
+        "serverTitle": "Usual server address",
         "serverOriginHelp": "Homarr uses this address to prefill detected service URLs. You can still edit every service individually.",
         "serverDescription": "This is a shortcut, not a restriction. Every detected service remains editable.",
         "serverOrigin": "Domain, IP, or reverse-proxy path",
         "serverOriginDescription": "Examples: home.lan, 192.168.1.10, or https://home.example.com/services. Choose how each service is appended below.",
+        "urlModeLabel": "Service address pattern",
+        "hostPort": "Same host, different ports",
+        "subdomain": "One subdomain per service",
+        "path": "One path per service",
         "analytics": "Share anonymous product analytics",
         "analyticsDescription": "Helps Homarr improve feature reliability. No service credentials or dashboard content are sent."
       },
@@ -2166,13 +2171,6 @@
       "undo": "Undo"
     },
     "here": "here",
-    "serviceUrlTemplate": {
-      "serverTitle": "Usual server address",
-      "urlModeLabel": "Service address pattern",
-      "hostPort": "Same host, different ports",
-      "subdomain": "One subdomain per service",
-      "path": "One path per service"
-    },
     "iconPicker": {
       "label": "Icon URL",
       "description": "Search the library, paste an image URL, or upload a file.",
@@ -2309,6 +2307,7 @@
       "open": "Open Homarr Assistant",
       "close": "Close assistant",
       "minimize": "Minimize assistant",
+      "windowControls": "Conversation window controls",
       "spotlight": "Ask Homarr Assistant",
       "spotlightDescription": "Type and send a prompt without leaving the command menu.",
       "spotlightPrompt": {
@@ -2326,24 +2325,6 @@
       "newConversation": "New conversation",
       "conversations": "Conversations",
       "delete": "Delete",
-      "cancel": "Cancel",
-      "conversationActions": "Conversation actions",
-      "searchConversations": "Search conversations",
-      "noMatchingConversations": "No matching conversations",
-      "moreActions": "More response actions",
-      "renameConversation": {
-        "action": "Rename",
-        "label": "Conversation name",
-        "save": "Save name",
-        "failedTitle": "Conversation could not be renamed",
-        "failedDescription": "Homarr could not rename this conversation. Try again."
-      },
-      "deleteConversation": {
-        "title": "Delete conversation?",
-        "description": "“{title}” and its messages will be permanently deleted.",
-        "failedTitle": "Conversation could not be deleted",
-        "failedDescription": "Homarr could not delete this conversation. Try again."
-      },
       "closeHistory": "Close conversation history",
       "openHistory": "Open conversation history",
       "emptyTitle": "What can I help with?",
@@ -2416,8 +2397,6 @@
       "regenerate": "Regenerate response",
       "helpful": "Helpful",
       "notHelpful": "Not helpful",
-      "readAloud": "Read response aloud",
-      "stopReading": "Stop reading response",
       "feedbackError": "Your feedback could not be saved. Try again.",
       "exportMarkdown": "Export as Markdown",
       "exportConversation": {
@@ -2446,6 +2425,7 @@
       },
       "mentions": {
         "menu": "Add Homarr context",
+        "hint": "Type @ to add context",
         "context": "Context",
         "app": "Apps",
         "integration": "Integrations",
@@ -2460,6 +2440,7 @@
       },
       "commands": {
         "menu": "Assistant commands",
+        "hint": "Type / for shortcuts",
         "health": "Prepare a service-health check",
         "explore": "Prepare an overview of this Homarr instance",
         "media": "Prepare a media search",
@@ -2572,6 +2553,7 @@
         "otherPlaceholder": "Type another answer…",
         "submit": "Send answer",
         "cancelOther": "Cancel other answer",
+        "automaticAffirmative": "Choosing the affirmative answer automatically",
         "optionKind": {
           "affirmative": "Confirm",
           "negative": "Decline",
@@ -2646,7 +2628,7 @@
       "autoApproval": {
         "label": "Automatic approvals",
         "title": "Automatic approvals",
-        "description": "Automatically prepare forms and approve protected changes for this conversation. Questions still wait for your answer, and your Homarr permissions still apply. This turns off when you switch conversations.",
+        "description": "Automatically approve protected changes, use presented form details, and choose answers categorized as affirmative. Neutral selections still wait for you. Your Homarr permissions still apply. This turns off when you switch conversations.",
         "enable": "Enable for this conversation",
         "disable": "Turn off automatic approvals",
         "enabled": "Automatic approvals are on",
@@ -3549,10 +3531,6 @@
               "label": "1 Month"
             }
           }
-        },
-        "showDetails": {
-          "label": "Show details",
-          "description": "Show the name, change, and time range in the compact view. Turn off for just the symbol and price."
         }
       }
     },
@@ -3793,11 +3771,6 @@
       "name": "Docker stats",
       "description": "Stats of your containers (This widget can only be added with administrator privileges)",
       "option": {
-        "endpointIds": {
-          "label": "Docker environments",
-          "description": "Leave empty to show containers from every Docker environment",
-          "placeholder": "All Docker environments"
-        },
         "columns": {
           "label": "Columns to show"
         },
@@ -5746,7 +5719,6 @@
     },
     "dynamicSelect": {
       "noResults": "No results found",
-      "loading": "Loading...",
       "loadError": "Failed to load options"
     },
     "assistant": {
@@ -5760,13 +5732,7 @@
       "compact": {
         "title": "Assistant",
         "description": "Resize this widget to chat here, or open the full conversation.",
-        "open": "Open assistant",
-        "openTitle": "Assistant open in side panel",
-        "openDescription": "The conversation stays in one active surface.",
-        "returnToWidget": "Return the conversation to this widget",
-        "otherWidgetTitle": "Assistant active in another widget",
-        "otherWidgetDescription": "Only one conversation surface stays active at a time.",
-        "useHere": "Use the assistant in this widget"
+        "open": "Open assistant"
       }
     }
   },
@@ -7141,18 +7107,23 @@
   "docker": {
     "title": "Containers",
     "reconciliation": {
-      "title": "Assisted Docker setup",
-      "suggestions": "{count, plural, =0 {No suggestions} one {# suggestion} other {# suggestions}}",
+      "title": "Service setup",
+      "description": "Docker services are compared with your apps and integrations. Review every suggestion before Homarr changes anything.",
       "attention": "{count} need attention",
       "endpointUnavailable": "Some services could not be checked because these endpoints are unavailable: {names}",
       "empty": "No visible Docker services were found.",
       "emptyFilter": "No services match this view.",
       "ambiguous": "More than one existing item could match this service. Homarr will not choose one automatically.",
+      "match": "{confidence} confidence match",
       "filter": {
         "attention": "Needs attention",
         "represented": "Already set up",
         "all": "All"
       },
+      "confidence": {
+        "high": "High",
+        "medium": "Medium"
+      },
       "state": {
         "newRecognized": "Ready to connect",
         "newApp": "New service",
@@ -7161,9 +7132,19 @@
         "moved": "Address changed"
       },
       "url": {
-        "manual": "Enter an address manually"
+        "label": "Service address",
+        "inputLabel": "Service URL",
+        "manual": "Enter an address manually",
+        "invalid": "Enter a valid HTTP or HTTPS URL"
+      },
+      "reason": {
+        "publishedAddress": "Published address reported by Docker",
+        "dockerEndpointHost": "Docker endpoint host combined with the published port",
+        "sharedContainerNetwork": "Server-only address for services sharing the container network",
+        "manualHostRequired": "Enter the address that your browser or Homarr server can reach"
       },
       "health": {
+        "title": "Observed service layers",
         "layer": {
           "docker": "Docker",
           "integrationConfiguration": "Integration",
@@ -7185,15 +7166,17 @@
         }
       },
       "action": {
-        "review": "Review",
+        "refresh": "Refresh",
+        "retry": "Try again",
         "dismiss": "Dismiss",
         "restoreDismissed": "Restore dismissed ({count})",
         "setupIntegration": "Set up integration",
+        "createApp": "Create app",
         "reviewIntegration": "Review integration",
         "viewRepresentation": "View setup"
       },
       "loadError": {
-        "title": "Docker setup assistant could not be loaded",
+        "title": "Service setup could not be loaded",
         "message": "Docker service information is unavailable. Try again without leaving this page."
       },
       "refreshError": {
@@ -8407,10 +8390,6 @@
     }
   },
   "log": {
-    "context": {
-      "widgetError": "Widget reported an error around this time",
-      "expiredWidgetError": "Logs around this widget error are no longer retained"
-    },
     "level": {
       "option": {
         "debug": "Debug",

packages/widgets/src/_inputs/index.ts

@@ -4,7 +4,6 @@ import { WidgetAppInput } from "./widget-app-input";
 import { WidgetCustomWidgetSelectInput } from "./widget-custom-widget-select-input";
 import { WidgetCustomWidgetConfigurationInput } from "./widget-custom-widget-configuration-input";
 import { WidgetDynamicSelectInput } from "./widget-dynamic-select-input";
-import { WidgetDynamicMultiSelectInput } from "./widget-dynamic-multiselect-input";
 import { WidgetLocationInput } from "./widget-location-input";
 import { WidgetMultiTextInput } from "./widget-multi-text-input";
 import { WidgetMultiReleasesRepositoriesInput } from "./widget-multiReleasesRepositories-input";
@@ -37,7 +36,6 @@ const mapping = {
   sortableItemList: WidgetSortedItemListInput,
   multiReleasesRepositories: WidgetMultiReleasesRepositoriesInput,
   dynamicSelect: WidgetDynamicSelectInput,
-  dynamicMultiSelect: WidgetDynamicMultiSelectInput,
   umamiEventName: WidgetUmamiEventInput,
   umamiEventNames: WidgetUmamiEventNamesInput,
   umamiWebsite: WidgetUmamiWebsiteInput,

packages/widgets/src/_inputs/widget-dynamic-multiselect-input.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { Loader, MultiSelect } from "@mantine/core";
-
-import { useScopedI18n } from "@homarr/translation/client";
-
-import type { CommonWidgetInputProps } from "./common";
-import { useWidgetInputTranslation } from "./common";
-import { useFormContext } from "./form";
-
-export const WidgetDynamicMultiSelectInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"dynamicMultiSelect">) => {
-  const t = useScopedI18n("widget.dynamicSelect");
-  const tInput = useWidgetInputTranslation(kind, property);
-  const form = useFormContext();
-  const inputProps = form.getInputProps(`options.${property}`);
-  const selectedValues = (inputProps.value as string[] | undefined) ?? [];
-  const { data: selectData, isPending, isError } = options.useOptions();
-  const data = [
-    ...selectData,
-    ...selectedValues
-      .filter((selectedValue) => !selectData.some((option) => option.value === selectedValue))
-      .map((selectedValue) => ({ value: selectedValue, label: selectedValue })),
-  ];
-
-  return (
-    <MultiSelect
-      {...inputProps}
-      label={tInput("label")}
-      description={options.withDescription ? tInput("description") : undefined}
-      placeholder={isPending ? t("loading") : tInput("placeholder")}
-      leftSection={isPending ? <Loader size="xs" /> : undefined}
-      searchable
-      clearable
-      maxValues={options.maxValues}
-      nothingFoundMessage={t("noResults")}
-      data={data}
-      disabled={isError}
-      error={isError ? t("loadError") : inputProps.error}
-    />
-  );
-};

packages/widgets/src/docker/component.tsx

@@ -74,11 +74,6 @@ const createContainerLogsPath = (container: Pick<DockerContainer, "endpointId" |
 
 const getContainerTarget = ({ endpointId, id }: DockerContainer) => ({ endpointId, id });
 
-const getContainersQueryInput = (endpointIds: string[]) => {
-  if (endpointIds.length === 0) return undefined;
-  return { endpointIds };
-};
-
 const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   const t = useScopedI18n("docker.field.state.option");
 
@@ -253,7 +248,7 @@ export default function DockerWidget({
   const isAdvanced = displayMode === "advanced";
 
   const utils = clientApi.useUtils();
-  const containersQuery = clientApi.docker.getContainers.useQuery(getContainersQueryInput(options.endpointIds));
+  const containersQuery = clientApi.docker.getContainers.useQuery();
   const data = getUsableWidgetQueryData(containersQuery);
   const { isFetching } = containersQuery;
   const refreshInventory = clientApi.docker.refreshInventory.useMutation({

packages/widgets/src/docker/index.ts

@@ -1,7 +1,6 @@
 import { IconBrandDocker, IconServerOff } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
@@ -31,19 +30,6 @@ export const { definition, componentLoader } = createWidgetDefinition("dockerCon
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
-        endpointIds: factory.dynamicMultiSelect({
-          defaultValue: [],
-          maxValues: 100,
-          withDescription: true,
-          useOptions: () => {
-            const { data = [], isPending, isError } = clientApi.docker.getEndpoints.useQuery();
-            return {
-              data: data.map((endpoint) => ({ value: endpoint.id, label: endpoint.name })),
-              isPending,
-              isError,
-            };
-          },
-        }),
         columns: factory.multiSelect({
           defaultValue: [...allColumnsList],
           options: allColumnsList.map((value) => ({

packages/widgets/src/errors/base-component.tsx

@@ -1,7 +1,5 @@
-import { useState } from "react";
 import { Anchor, Button, Stack, Text } from "@mantine/core";
 
-import { useSession } from "@homarr/auth/client";
 import type { stringOrTranslation } from "@homarr/translation";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
@@ -17,22 +15,14 @@ export interface BaseWidgetErrorProps {
 
 export const BaseWidgetError = (props: BaseWidgetErrorProps) => {
   const t = useI18n();
-  const { data: session } = useSession();
-  const [errorTimestamp] = useState(Date.now);
 
   return (
     <Stack h="100%" align="center" justify="center" gap="md" data-homarr-widget-error>
       <props.icon size={40} />
       <Stack gap={0}>
         <Text ta="center">{translateIfNecessary(t, props.message)}</Text>
-        {props.showLogsLink && session?.user.permissions.includes("other-view-logs") && (
-          <Anchor
-            component={Link}
-            href={`/manage/tools/logs?focus=${errorTimestamp}`}
-            target="_blank"
-            ta="center"
-            size="sm"
-          >
+        {props.showLogsLink && (
+          <Anchor component={Link} href="/manage/tools/logs" target="_blank" ta="center" size="sm">
             {t("common.action.checkLogs")}
           </Anchor>
         )}

packages/widgets/src/errors/component.spec.ts

@@ -11,10 +11,6 @@ vi.mock("@homarr/translation/client", () => ({
   useI18n: () => (key: string) => key,
 }));
 
-vi.mock("@homarr/auth/client", () => ({
-  useSession: () => ({ data: null }),
-}));
-
 const matchMedia = (query: string) => ({
   matches: false,
   media: query,

packages/widgets/src/media-server/component.module.css

@@ -31,7 +31,6 @@
 
 .tableViewport :global(th) {
   background-color: var(--background-color);
-  border-bottom: 1px solid var(--border-color);
 }
 
 .sortButton {

packages/widgets/src/media-server/component.spec.tsx

@@ -9,12 +9,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
 import type { StreamSession } from "@homarr/integrations";
 
-import {
-  getMediaServerColumnVisibility,
-  getResolutionLabel,
-  getSeasonEpisodeParams,
-  SessionDetailsPopover,
-} from "./component";
+import { getMediaServerColumnVisibility, getSeasonEpisodeParams, SessionDetailsPopover } from "./component";
 
 vi.mock("@homarr/translation/client", () => ({
   useScopedI18n: () => (key: string) => key,
@@ -109,8 +104,7 @@ describe("getMediaServerColumnVisibility", () => {
   test("keeps a stable responsive column model from the zero-sized first render", () => {
     expect(getMediaServerColumnVisibility(0, false)).toEqual({ user: false, status: false });
     expect(getMediaServerColumnVisibility(300, false)).toEqual({ user: true, status: false });
-    expect(getMediaServerColumnVisibility(420, false)).toEqual({ user: true, status: false });
-    expect(getMediaServerColumnVisibility(540, false)).toEqual({ user: true, status: true });
+    expect(getMediaServerColumnVisibility(420, false)).toEqual({ user: true, status: true });
     expect(getMediaServerColumnVisibility(0, true)).toEqual({ user: true, status: true });
   });
 });
@@ -130,30 +124,3 @@ describe("getSeasonEpisodeParams", () => {
     expect(getSeasonEpisodeParams(null, undefined)).toBeNull();
   });
 });
-
-describe("getResolutionLabel", () => {
-  test("labels a standard 16:9 resolution by its exact height", () => {
-    expect(getResolutionLabel(1920, 1080)).toBe("1080p");
-    expect(getResolutionLabel(1280, 720)).toBe("720p");
-  });
-
-  test("classifies a cinemascope source by its width, not its cropped height", () => {
-    // A 1920x804 encode (2.35:1, cropped top and bottom) is still a 1080p source.
-    expect(getResolutionLabel(1920, 804)).toBe("1080p");
-    expect(getResolutionLabel(1280, 640)).toBe("720p");
-  });
-
-  test("rounds a near-standard resolution up to its nearest tier", () => {
-    expect(getResolutionLabel(1912, 796)).toBe("1080p");
-  });
-
-  test("falls back to the raw height when it doesn't clear any known tier", () => {
-    expect(getResolutionLabel(100, 100)).toBe("100p");
-  });
-
-  test("classifies a portrait video by its width, not its long-axis height", () => {
-    // A 1080x1920 portrait phone recording is still a 1080p source, not a 1440p one.
-    expect(getResolutionLabel(1080, 1920)).toBe("1080p");
-    expect(getResolutionLabel(720, 1280)).toBe("720p");
-  });
-});

packages/widgets/src/media-server/component.tsx

@@ -51,9 +51,7 @@ type SortState = { column: SortColumn; descending: boolean } | null;
 
 export const getMediaServerColumnVisibility = (width: number, isAdvanced: boolean) => ({
   user: isAdvanced || width >= 300,
-  // The user (200px) and status (190px) columns together need a floor here, otherwise the
-  // currentlyPlaying column - the primary content - gets squeezed to almost nothing.
-  status: isAdvanced || width >= 540,
+  status: isAdvanced || width >= 420,
 });
 
 function getPlaybackStatus(transcoding: TranscodingDecision | undefined): PlaybackStatus {
@@ -79,21 +77,6 @@ function formatBitrate(bitrateKbps: number | null | undefined): string | null {
   return bitrateKbps >= 1000 ? `${(bitrateKbps / 1000).toFixed(1)} Mbps` : `${Math.round(bitrateKbps)} kbps`;
 }
 
-const RESOLUTION_TIER_HEIGHTS = [4320, 2160, 1440, 1080, 720, 480, 360, 240] as const;
-
-export function getResolutionLabel(width: number, height: number): string {
-  // Classify off the short axis (height for landscape, width for portrait) so orientation
-  // doesn't flip which dimension drives the label. Letterboxed/cinemascope sources are cropped
-  // shorter than their nominal resolution class (a 1920x804 encode is still "1080p"), so derive
-  // a floor for the short axis from the long axis assuming 16:9 - matches how Plex/Jellyfin label these themselves.
-  const isPortrait = height > width;
-  const shortAxis = isPortrait ? width : height;
-  const longAxis = isPortrait ? height : width;
-  const effectiveShortAxis = Math.max(shortAxis, Math.round((longAxis * 9) / 16));
-  const tier = RESOLUTION_TIER_HEIGHTS.find((candidate) => effectiveShortAxis >= candidate * 0.9);
-  return `${tier ?? effectiveShortAxis}p`;
-}
-
 export function getSeasonEpisodeParams(
   seasonNumber: number | null | undefined,
   episodeNumber: number | null | undefined,
@@ -134,33 +117,27 @@ function StreamTableHeader({
   sortable,
   sort,
   onSort,
-  width,
 }: {
   column: SortColumn;
   label: string;
   sortable: boolean;
   sort: SortState;
   onSort: (column: SortColumn) => void;
-  width?: number;
 }) {
   const active = sort?.column === column;
   const SortIcon = !active ? IconArrowsSort : sort.descending ? IconChevronDown : IconChevronUp;
 
   return (
-    <Table.Th w={width} aria-sort={active ? (sort.descending ? "descending" : "ascending") : "none"}>
+    <Table.Th aria-sort={active ? (sort.descending ? "descending" : "ascending") : "none"}>
       {sortable ? (
         <UnstyledButton className={classes.sortButton} onClick={() => onSort(column)}>
-          <Text component="span" size="xs" fw={600} c="dimmed" style={{ letterSpacing: "0.02em" }} truncate>
+          <Text component="span" size="xs" fw={600} truncate>
             {label}
           </Text>
-          <SortIcon
-            size="var(--mantine-font-size-xs)"
-            aria-hidden
-            color={active ? undefined : "var(--mantine-color-dimmed)"}
-          />
+          <SortIcon size="var(--mantine-font-size-xs)" aria-hidden />
         </UnstyledButton>
       ) : (
-        <Text size="xs" fw={600} c="dimmed" style={{ letterSpacing: "0.02em" }} truncate>
+        <Text size="xs" fw={600} truncate>
           {label}
         </Text>
       )}
@@ -218,14 +195,12 @@ export default function MediaServerWidget({
       current?.column === column ? { column, descending: !current.descending } : { column, descending: false },
     );
 
-  const uniqueIntegrations = currentStreams
-    .filter((stream) => stream.sessions.length > 0)
-    .map((stream) => ({
-      integrationId: stream.integrationId,
-      integrationKind: stream.integrationKind,
-      integrationIcon: getIconUrl(stream.integrationKind),
-      integrationName: stream.integrationName,
-    }));
+  const uniqueIntegrations = currentStreams.map((stream) => ({
+    integrationId: stream.integrationId,
+    integrationKind: stream.integrationKind,
+    integrationIcon: getIconUrl(stream.integrationKind),
+    integrationName: stream.integrationName,
+  }));
 
   const playingCount = flatSessions.filter(
     (session) => session.currentlyPlaying && session.currentlyPlaying.playback?.state !== "paused",
@@ -288,7 +263,6 @@ export default function MediaServerWidget({
                   sortable={isAdvanced}
                   sort={sort}
                   onSort={toggleSort}
-                  width={200}
                 />
               )}
               <StreamTableHeader
@@ -305,7 +279,6 @@ export default function MediaServerWidget({
                   sortable={isAdvanced}
                   sort={sort}
                   onSort={toggleSort}
-                  width={190}
                 />
               )}
             </Table.Tr>
@@ -317,12 +290,6 @@ export default function MediaServerWidget({
               const status = getPlaybackStatus(currentlyPlaying?.metadata?.transcoding);
               const location = showLocation ? currentlyPlaying?.location : null;
               const bitrateLabel = showBitrate ? formatBitrate(currentlyPlaying?.metadata?.bitrateKbps) : null;
-              // The transcoding resolution reflects what's actually being streamed - fall back to the
-              // source's own resolution when it isn't set (direct play, or a transcode that only
-              // touches audio/container and leaves the video resolution untouched).
-              const resolution =
-                currentlyPlaying?.metadata?.transcoding.resolution ?? currentlyPlaying?.metadata?.video.resolution;
-              const resolutionLabel = resolution ? getResolutionLabel(resolution.width, resolution.height) : null;
               const toggleDetails = () => setSelectedRowId((current) => (current === rowId ? null : rowId));
 
               return (
@@ -348,7 +315,7 @@ export default function MediaServerWidget({
                   {columnVisibility.user && (
                     <Table.Td>
                       <Group gap="xs" wrap="nowrap" w="100%">
-                        <Avatar size={28} src={session.user?.profilePictureUrl} style={{ flexShrink: 0 }} />
+                        <Avatar size={28} src={session.user?.profilePictureUrl} />
                         <Stack gap={2} className={classes.cellContent}>
                           <Text size="xs" truncate>
                             {session.user?.username ?? t("items.unknownUser")}
@@ -373,30 +340,24 @@ export default function MediaServerWidget({
                     <Table.Td>
                       {currentlyPlaying && (
                         <Stack gap={4} align="flex-start" w="100%" className={classes.cellContent}>
-                          <Group gap={4} align="center" justify="space-between" wrap="nowrap" w="100%">
-                            <Badge size="xs" variant="light" color={playbackStatusColorMap[status]}>
-                              {t(`items.${status}` as never)}
-                            </Badge>
-                            {location && (
-                              <Group gap={4} align="center" wrap="nowrap">
-                                {location === "lan" ? (
-                                  <IconWifi size="var(--mantine-font-size-xs)" />
-                                ) : (
-                                  <IconWorld size="var(--mantine-font-size-xs)" />
-                                )}
-                                <Text size="xs" c="dimmed" tt="uppercase">
-                                  {location}
-                                </Text>
-                              </Group>
-                            )}
-                          </Group>
-                          {(resolutionLabel ?? bitrateLabel) && (
+                          <Badge size="xs" variant="light" color={playbackStatusColorMap[status]}>
+                            {t(`items.${status}` as never)}
+                          </Badge>
+                          {(location ?? bitrateLabel) && (
                             <Group gap={4} align="center" justify="space-between" wrap="nowrap" w="100%">
-                              {resolutionLabel && (
-                                <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
-                                  {resolutionLabel}
-                                </Text>
-                              )}
+                              <Group gap={4} align="center" wrap="nowrap">
+                                {location &&
+                                  (location === "lan" ? (
+                                    <IconWifi size="var(--mantine-font-size-xs)" />
+                                  ) : (
+                                    <IconWorld size="var(--mantine-font-size-xs)" />
+                                  ))}
+                                {location && (
+                                  <Text size="xs" c="dimmed" tt="uppercase">
+                                    {location}
+                                  </Text>
+                                )}
+                              </Group>
                               {bitrateLabel && (
                                 <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
                                   {bitrateLabel}
@@ -425,42 +386,25 @@ export default function MediaServerWidget({
             borderTop: "1px solid var(--border-color)",
           }}
         >
-          <Group gap={6} wrap="nowrap">
+          <Group gap={4} wrap="nowrap">
             <IconVideo size="var(--mantine-font-size-xs)" style={{ flexShrink: 0 }} />
-            <Text size="sm" fw={500} style={{ whiteSpace: "nowrap" }}>
+            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
               {(t as unknown as (key: string, params?: { count: number }) => string)("footer.streams", {
                 count: flatSessions.length,
               })}
             </Text>
             {totalBitrateLabel && (isAdvanced || width >= 300) && (
-              <>
-                <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
-                  •
-                </Text>
-                <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
-                  {t("footer.totalBitrate", { bitrate: totalBitrateLabel })}
-                </Text>
-              </>
+              <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
+                {t("footer.totalBitrate", { bitrate: totalBitrateLabel })}
+              </Text>
             )}
           </Group>
-          <Group gap={6}>
+          <Group gap="xs">
             {uniqueIntegrations.map((integration) => (
-              <Group
-                key={integration.integrationId}
-                gap={6}
-                align="center"
-                wrap="nowrap"
-                pl={2}
-                pr={8}
-                py={2}
-                style={{
-                  backgroundColor: "var(--mantine-color-default-hover)",
-                  borderRadius: 999,
-                }}
-              >
-                <Avatar className="media-server-icon" src={integration.integrationIcon} radius="xl" size={18} />
+              <Group key={integration.integrationId} gap="xs" align="center">
+                <Avatar className="media-server-icon" src={integration.integrationIcon} radius={"xs"} size="xs" />
                 {(isAdvanced || width >= 480) && (
-                  <Text className="media-server-name" size="xs" fw={500} truncate="end">
+                  <Text className="media-server-name" size="sm" truncate="end">
                     {integration.integrationName}
                   </Text>
                 )}

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import type { ComponentType, FormEvent } from "react";
+import type { FormEvent } from "react";
 import { Box, Button, Group, Stack, Tabs, Text } from "@mantine/core";
 import { schemaResolver } from "@mantine/form";
-import { IconArrowLeft, IconPencil } from "@tabler/icons-react";
+import { IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { objectEntries } from "@homarr/common";
@@ -35,16 +35,6 @@ export interface WidgetEditModalState {
   advancedOptions: BoardItemAdvancedOptions;
 }
 
-export interface EmbeddedIntegrationEditFormHandle {
-  submitIfDirty: () => Promise<boolean>;
-}
-
-export interface EmbeddedIntegrationEditFormProps {
-  integrationId: string;
-  handleRef: React.Ref<EmbeddedIntegrationEditFormHandle>;
-  onSuccess?: () => void;
-}
-
 export interface WidgetEditModalProps<TSort extends WidgetKind> {
   kind: TSort;
   definition: WidgetDefinition;
@@ -56,7 +46,7 @@ export interface WidgetEditModalProps<TSort extends WidgetKind> {
   itemId?: string;
   boardId?: string;
   appId?: string;
-  integrationEditForm?: ComponentType<EmbeddedIntegrationEditFormProps>;
+  onEditIntegration?: (integrationId: string) => void;
   onIntegrationSaved?: () => void;
 }
 
@@ -71,12 +61,6 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
   const { data: session } = useSession();
   const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
   const appEditRef = useRef<EmbeddedAppEditFormHandle>(null);
-  const integrationEditHandles = useRef(new Map<string, EmbeddedIntegrationEditFormHandle>());
-  const integrationEditRefCallbacks = useRef(
-    new Map<string, (handle: EmbeddedIntegrationEditFormHandle | null) => void>(),
-  );
-  const [mountedIntegrationIds, setMountedIntegrationIds] = useState<string[]>([]);
-  const [activeIntegrationId, setActiveIntegrationId] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   z.config({
@@ -134,24 +118,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
   const showAppTab = innerProps.kind === "app" && canModifyApps && Boolean(appId);
   const canModifyAllIntegrations = session?.user.permissions.includes("integration-full-all") ?? false;
   const selectedIntegrations = getSelectedWidgetIntegrations(innerProps.integrationData, form.values.integrationIds);
-  const editableIntegrationIds = selectedIntegrations
-    .filter((integration) => canModifyAllIntegrations || integration.permissions?.hasFullAccess === true)
-    .map((integration) => integration.id);
-  let soleEditableIntegrationId: string | null = null;
-  if (selectedIntegrations.length === 1) {
-    soleEditableIntegrationId = editableIntegrationIds[0] ?? null;
-  }
-
-  let displayedIntegrationId = soleEditableIntegrationId;
-  if (activeIntegrationId && editableIntegrationIds.includes(activeIntegrationId)) {
-    displayedIntegrationId = activeIntegrationId;
-  }
-  const integrationIdsToRender = mountedIntegrationIds.filter((id) => editableIntegrationIds.includes(id));
-  if (displayedIntegrationId && !integrationIdsToRender.includes(displayedIntegrationId)) {
-    integrationIdsToRender.push(displayedIntegrationId);
-  }
-  const IntegrationEditForm = innerProps.integrationEditForm;
-  const showIntegrationTab = Boolean(IntegrationEditForm) && selectedIntegrations.length > 0;
+  const showIntegrationTab = Boolean(innerProps.onEditIntegration) && selectedIntegrations.length > 0;
   const showResourceTabs = showAppTab || showIntegrationTab;
   const [activeTab, setActiveTab] = useState<string | null>("widget");
 
@@ -160,31 +127,15 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
     if (activeTab === "app" && !showAppTab) setActiveTab("widget");
   }, [activeTab, showAppTab, showIntegrationTab]);
 
-  const getIntegrationEditRef = (integrationId: string) => {
-    const existingCallback = integrationEditRefCallbacks.current.get(integrationId);
-    if (existingCallback) {
-      return existingCallback;
+  const handleTabChange = (value: string | null) => {
+    if (value === "integration" && selectedIntegrations.length === 1) {
+      const integration = selectedIntegrations[0];
+      if (integration) {
+        innerProps.onEditIntegration?.(integration.id);
+        return;
+      }
     }
-
-    const callback = (handle: EmbeddedIntegrationEditFormHandle | null) => {
-      if (handle) {
-        integrationEditHandles.current.set(integrationId, handle);
-      } else {
-        integrationEditHandles.current.delete(integrationId);
-      }
-    };
-    integrationEditRefCallbacks.current.set(integrationId, callback);
-    return callback;
-  };
-
-  const beginEditingIntegration = (integrationId: string) => {
-    setMountedIntegrationIds((current) => {
-      if (current.includes(integrationId)) {
-        return current;
-      }
-      return [...current, integrationId];
-    });
-    setActiveIntegrationId(integrationId);
+    setActiveTab(value);
   };
 
   const handleSubmit = form.onSubmit(async (values) => {
@@ -196,13 +147,6 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
         return;
       }
 
-      for (const integrationEditHandle of integrationEditHandles.current.values()) {
-        const integrationSaved = await integrationEditHandle.submitIfDirty();
-        if (!integrationSaved) {
-          return;
-        }
-      }
-
       innerProps.onSuccessfulEdit({
         ...values,
         advancedOptions,
@@ -296,7 +240,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
       <FormProvider form={form}>
         {showResourceTabs ? (
           <Stack>
-            <Tabs value={activeTab} onChange={setActiveTab}>
+            <Tabs value={activeTab} onChange={handleTabChange}>
               <Tabs.List grow>
                 <Tabs.Tab value="widget">{t("item.edit.tab.widget")}</Tabs.Tab>
                 {showAppTab && <Tabs.Tab value="app">{t("item.edit.tab.app")}</Tabs.Tab>}
@@ -313,68 +257,42 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
               {showIntegrationTab && (
                 <Tabs.Panel value="integration" pt="md">
                   <Stack>
-                    {displayedIntegrationId === null && (
-                      <>
-                        <Text size="sm" c="dimmed">
-                          {t("item.edit.integration.description")}
-                        </Text>
-                        {selectedIntegrations.map((integration) => {
-                          const canEdit = editableIntegrationIds.includes(integration.id);
-                          return (
-                            <Group key={integration.id} justify="space-between" wrap="nowrap" gap="sm">
-                              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-                                <IntegrationAvatar kind={integration.kind} size="sm" />
-                                <Stack gap={0} style={{ minWidth: 0 }}>
-                                  <Text fw={600} size="sm" truncate>
-                                    {integration.name}
-                                  </Text>
-                                  <Text size="xs" c="dimmed" truncate>
-                                    {integration.url}
-                                  </Text>
-                                </Stack>
-                              </Group>
-                              {canEdit ? (
-                                <Button
-                                  type="button"
-                                  variant="light"
-                                  leftSection={<IconPencil size={16} />}
-                                  onClick={() => beginEditingIntegration(integration.id)}
-                                  aria-label={t("item.edit.integration.editLabel", { name: integration.name })}
-                                >
-                                  {t("item.edit.integration.action")}
-                                </Button>
-                              ) : (
-                                <Text size="xs" c="dimmed" ta="end">
-                                  {t("item.edit.integration.fullAccessRequired")}
-                                </Text>
-                              )}
-                            </Group>
-                          );
-                        })}
-                      </>
-                    )}
-                    {displayedIntegrationId !== null && selectedIntegrations.length > 1 && (
-                      <Button
-                        type="button"
-                        variant="subtle"
-                        leftSection={<IconArrowLeft size={16} />}
-                        onClick={() => setActiveIntegrationId(null)}
-                        style={{ alignSelf: "start" }}
-                      >
-                        {t("common.action.previous")}
-                      </Button>
-                    )}
-                    {integrationIdsToRender.map((integrationId) => (
-                      <Box key={integrationId} hidden={displayedIntegrationId !== integrationId}>
-                        {IntegrationEditForm && (
-                          <IntegrationEditForm
-                            integrationId={integrationId}
-                            handleRef={getIntegrationEditRef(integrationId)}
-                            onSuccess={innerProps.onIntegrationSaved}
-                          />
-                        )}
-                      </Box>
-                    ))}
+                    <Text size="sm" c="dimmed">
+                      {t("item.edit.integration.description")}
+                    </Text>
+                    {selectedIntegrations.map((integration) => {
+                      const canEdit = canModifyAllIntegrations || integration.permissions?.hasFullAccess === true;
+                      return (
+                        <Group key={integration.id} justify="space-between" wrap="nowrap" gap="sm">
+                          <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                            <IntegrationAvatar kind={integration.kind} size="sm" />
+                            <Stack gap={0} style={{ minWidth: 0 }}>
+                              <Text fw={600} size="sm" truncate>
+                                {integration.name}
+                              </Text>
+                              <Text size="xs" c="dimmed" truncate>
+                                {integration.url}
+                              </Text>
+                            </Stack>
+                          </Group>
+                          {canEdit ? (
+                            <Button
+                              type="button"
+                              variant="light"
+                              leftSection={<IconPencil size={16} />}
+                              onClick={() => innerProps.onEditIntegration?.(integration.id)}
+                              aria-label={t("item.edit.integration.editLabel", { name: integration.name })}
+                            >
+                              {t("item.edit.integration.action")}
+                            </Button>
+                          ) : (
+                            <Text size="xs" c="dimmed" ta="end">
+                              {t("item.edit.integration.fullAccessRequired")}
+                            </Text>
+                          )}
+                        </Group>
+                      );
+                    })}
                   </Stack>
                 </Tabs.Panel>
               )}

packages/widgets/src/options.ts

@@ -69,15 +69,6 @@ interface DynamicSelectInput extends CommonInput<DynamicSelectOption | null> {
   };
 }
 
-interface DynamicMultiSelectInput extends CommonInput<string[]> {
-  maxValues?: number;
-  useOptions: () => {
-    data: DynamicSelectOption[];
-    isPending: boolean;
-    isError: boolean;
-  };
-}
-
 interface IntegrationSelectInput extends CommonInput<string> {
   clearable?: boolean;
   searchable?: boolean;
@@ -150,13 +141,6 @@ const optionsFactory = {
     useOptions: input.useOptions,
     withDescription: input.withDescription ?? false,
   }),
-  dynamicMultiSelect: (input: DynamicMultiSelectInput) => ({
-    type: "dynamicMultiSelect" as const,
-    defaultValue: input.defaultValue ?? [],
-    maxValues: input.maxValues,
-    useOptions: input.useOptions,
-    withDescription: input.withDescription ?? false,
-  }),
   select: <const TOptions extends SelectOption[]>(input: SelectInput<TOptions>) => ({
     type: "select" as const,
     defaultValue: (input.defaultValue ?? input.options[0]) as inferSelectOptionValue<TOptions[number]>,

packages/widgets/src/stocks/component.spec.ts

@@ -33,7 +33,7 @@ describe("stock summary", () => {
 
 describe("stock layout", () => {
   it("keeps compact widgets focused on symbol and price", () => {
-    expect(getStockLayout(320, 100, true)).toMatchObject({
+    expect(getStockLayout(320, 100)).toMatchObject({
       showName: false,
       showChange: false,
       showRange: false,
@@ -42,12 +42,12 @@ describe("stock layout", () => {
   });
 
   it("reveals secondary data only when both axes have room", () => {
-    expect(getStockLayout(320, 160, true)).toMatchObject({
+    expect(getStockLayout(320, 160)).toMatchObject({
       showName: false,
       showChange: true,
       showRange: true,
     });
-    expect(getStockLayout(320, 220, true)).toMatchObject({
+    expect(getStockLayout(320, 220)).toMatchObject({
       showName: true,
       showChange: true,
       showRange: true,
@@ -56,7 +56,7 @@ describe("stock layout", () => {
   });
 
   it("exposes the complete summary when the widget is roomy", () => {
-    expect(getStockLayout(640, 360, true)).toEqual({
+    expect(getStockLayout(640, 360)).toEqual({
       showName: true,
       showChange: true,
       showRange: true,
@@ -64,12 +64,4 @@ describe("stock layout", () => {
       priceOrder: 1,
     });
   });
-
-  it("hides name, change, and range regardless of size when showDetails is off", () => {
-    expect(getStockLayout(640, 360, false)).toMatchObject({
-      showName: false,
-      showChange: false,
-      showRange: false,
-    });
-  });
 });

packages/widgets/src/stocks/component.tsx

@@ -43,11 +43,11 @@ export interface StockLayout {
   priceOrder: 1 | 2;
 }
 
-export function getStockLayout(width: number, height: number, showDetails: boolean): StockLayout {
+export function getStockLayout(width: number, height: number): StockLayout {
   return {
-    showName: showDetails && width >= 300 && height >= 190,
-    showChange: showDetails && width >= 260 && height >= 130,
-    showRange: showDetails && width >= 220 && height >= 130,
+    showName: width >= 300 && height >= 190,
+    showChange: width >= 260 && height >= 130,
+    showRange: width >= 220 && height >= 130,
     graphHeight: height >= 320 ? "75%" : height >= 220 ? "68%" : "48%",
     priceOrder: width >= 280 && height >= 120 ? 1 : 2,
   };
@@ -92,7 +92,7 @@ export default function StockPriceWidget({
   const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
   const stockGraphValues = summary.graphValues;
   const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
-  const layout = getStockLayout(width, height, options.showDetails);
+  const layout = getStockLayout(width, height);
   const formatValue = (value: number) => numberFormatter.format(round(value));
   const formatSignedValue = (value: number) => `${value > 0 ? "+" : ""}${formatValue(value)}`;
 

packages/widgets/src/stocks/index.ts

@@ -41,10 +41,6 @@ export const { definition, componentLoader } = createWidgetDefinition("stockPric
           label: (t) => t(`widget.stockPrice.option.timeInterval.option.${value}.label`),
         })),
       }),
-      showDetails: factory.switch({
-        defaultValue: true,
-        withDescription: true,
-      }),
     }));
   },
 }).withDynamicImport(() => import("./component"));