From a7f1c01443d5448784c0f63ee796b7a994c9bb4b Mon Sep 17 00:00:00 2001
From: Evgeny Boger <boger@wirenboard.com>
Date: Wed, 2 Sep 2026 21:21:07 +0000
Subject: [PATCH 1/4] feat(dali): sendCellValueUpdate helper for control writes

The `/on` command topic was spelled inside DevicesStore. The DALI page's
embedded controls drive cells without that store, so the one spelling moves
into a helper both use.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BNC4oayJWjJaHMmvM8YMGC
---
 frontend/src/stores/devices/devices-store.ts   |  4 ++--
 frontend/src/stores/devices/send-cell-value.ts | 10 ++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/stores/devices/send-cell-value.ts

diff --git a/frontend/src/stores/devices/devices-store.ts b/frontend/src/stores/devices/devices-store.ts
index ad499aa48..4ee2366c2 100644
--- a/frontend/src/stores/devices/devices-store.ts
+++ b/frontend/src/stores/devices/devices-store.ts
@@ -4,6 +4,7 @@ import { mqttClient } from '@/services';
 import Cell from './cell';
 import Device from './device';
 import { isTopicsAreEqual, splitTopic } from './helpers';
+import { sendCellValueUpdate } from './send-cell-value';
 import type { ValueType } from './types';
 
 export default class DevicesStore {
@@ -168,8 +169,7 @@ export default class DevicesStore {
   }
 
   async sendCellValueUpdate(deviceId: string, controlId: string, value: string) {
-    const topic = `/devices/${deviceId}/controls/${controlId}/on`;
-    await mqttClient.send(topic, value, false);
+    await sendCellValueUpdate(deviceId, controlId, value);
   }
 
   #getOrCreateTopics(deviceId: string) {
diff --git a/frontend/src/stores/devices/send-cell-value.ts b/frontend/src/stores/devices/send-cell-value.ts
new file mode 100644
index 000000000..ab2f244ce
--- /dev/null
+++ b/frontend/src/stores/devices/send-cell-value.ts
@@ -0,0 +1,10 @@
+import { mqttClient } from '@/services';
+
+/**
+ * Publish a control write the way every WB daemon expects it — non-retained,
+ * on the `/on` command topic. The one spelling of that topic, shared by
+ * DevicesStore and the DALI page's embedded controls.
+ */
+export async function sendCellValueUpdate(deviceId: string, controlId: string, value: string) {
+  await mqttClient.send(`/devices/${deviceId}/controls/${controlId}/on`, value, false);
+}

From af772ffb05c8c404a383841bc8c15588c698f735 Mon Sep 17 00:00:00 2001
From: Evgeny Boger <boger@wirenboard.com>
Date: Mon, 31 Aug 2026 14:52:01 +0000
Subject: [PATCH 2/4] feat(dali): live device controls on device, group and bus
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Commissioning a lamp is one half of the job; the other is seeing it react.
Each device page now carries the daemon's live controls for that device —
a featured strip of what one reaches for first (level, colour, colour
temperature, on/off) and the rest behind "All controls"; a group page shows
the group's virtual device, a bus page the bus's broadcast device. The
strip reuses the dashboard Cell components, so a control behaves exactly as
it does on the Devices page.

The tab toolbar gains the page's title: on mobile the tree is hidden while
a page is open, so nothing else said what was on screen. Its buttons wrap
on phone widths instead of stacking on top of each other.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BNC4oayJWjJaHMmvM8YMGC
---
 debian/changelog                              |   9 +
 .../collapsible-panel-toggle.test.tsx         |  20 ++
 .../collapsible-panel/collapsible-panel.tsx   |  10 +-
 frontend/src/i18n/locales/en.json             |   3 +
 frontend/src/i18n/locales/ru.json             |   3 +
 .../dali/components/bus-commands/styles.css   |  10 +-
 .../bus-tab-content/bus-tab-content.tsx       |  24 +-
 .../device-controls/device-controls.tsx       | 307 ++++++++++++++++++
 .../device-controls/featured.test.ts          |  93 ++++++
 .../dali/components/device-controls/index.ts  |   2 +
 .../components/device-controls/styles.css     | 174 ++++++++++
 .../dali/components/device-controls/types.ts  |  11 +
 .../device-tab-content/device-tab-content.tsx |  11 +-
 .../group-tab-content/group-tab-content.tsx   |   8 +-
 .../dali/components/tab-toolbar/index.ts      |   1 +
 .../components/tab-toolbar/tab-toolbar.tsx    |  36 ++
 .../dali/components/tab-toolbar/types.ts      |   3 +
 .../src/pages/settings/configs/dali/dali.tsx  |  32 +-
 .../pages/settings/configs/dali/styles.css    |  36 ++
 .../stores/dali/device-store-controls.test.ts |  27 ++
 frontend/src/stores/dali/device-store.ts      |   4 +
 .../stores/dali/group-store-mqtt-id.test.ts   |  19 ++
 frontend/src/stores/dali/group-store.ts       |  13 +
 23 files changed, 833 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/collapsible-panel/collapsible-panel-toggle.test.tsx
 create mode 100644 frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx
 create mode 100644 frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts
 create mode 100644 frontend/src/pages/settings/configs/dali/components/device-controls/index.ts
 create mode 100644 frontend/src/pages/settings/configs/dali/components/device-controls/styles.css
 create mode 100644 frontend/src/pages/settings/configs/dali/components/device-controls/types.ts
 create mode 100644 frontend/src/pages/settings/configs/dali/components/tab-toolbar/index.ts
 create mode 100644 frontend/src/pages/settings/configs/dali/components/tab-toolbar/tab-toolbar.tsx
 create mode 100644 frontend/src/pages/settings/configs/dali/components/tab-toolbar/types.ts
 create mode 100644 frontend/src/stores/dali/device-store-controls.test.ts
 create mode 100644 frontend/src/stores/dali/group-store-mqtt-id.test.ts

diff --git a/debian/changelog b/debian/changelog
index 6c850526f..c62de7108 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,12 @@
+wb-mqtt-homeui (2.250.4) stable; urgency=medium
+
+  * DALI: live device controls on device, group and bus pages — a featured strip
+    of the controls one reaches for (level, colour, temperature, on/off) with
+    the rest behind "All controls"; the page toolbar names what is open, which
+    the hidden tree no longer does on mobile, and its buttons wrap on phones
+
+ -- Wiren Board Robot <info@wirenboard.com>  Mon, 31 Aug 2026 20:40:00 +0300
+
 wb-mqtt-homeui (2.249.3) stable; urgency=medium
 
   * Fix autologin being switched off when the autologin user is edited
diff --git a/frontend/src/components/collapsible-panel/collapsible-panel-toggle.test.tsx b/frontend/src/components/collapsible-panel/collapsible-panel-toggle.test.tsx
new file mode 100644
index 000000000..c16bef26e
--- /dev/null
+++ b/frontend/src/components/collapsible-panel/collapsible-panel-toggle.test.tsx
@@ -0,0 +1,20 @@
+// @vitest-environment happy-dom
+import { fireEvent, render, screen } from '@testing-library/react';
+import { CollapsiblePanel } from './collapsible-panel';
+
+describe('CollapsiblePanel: the whole title row toggles, exactly once per click', () => {
+  it('clicking the title text collapses and expands the body', () => {
+    render(<CollapsiblePanel title="Broadcast settings"><div>body</div></CollapsiblePanel>);
+    expect(screen.getByText('body')).toBeTruthy();
+    fireEvent.click(screen.getByText('Broadcast settings'));
+    expect(screen.queryByText('body')).toBeNull();
+    fireEvent.click(screen.getByText('Broadcast settings'));
+    expect(screen.getByText('body')).toBeTruthy();
+  });
+
+  it('the toggle row is not a <label> — Chrome forwards label clicks into the button and toggles twice', () => {
+    const { container } = render(<CollapsiblePanel title="T">x</CollapsiblePanel>);
+    expect(container.querySelector('label.collapsiblePanel-label')).toBeNull();
+    expect(container.querySelector('div.collapsiblePanel-label')).toBeTruthy();
+  });
+});
diff --git a/frontend/src/components/collapsible-panel/collapsible-panel.tsx b/frontend/src/components/collapsible-panel/collapsible-panel.tsx
index 591501186..56607d9ed 100644
--- a/frontend/src/components/collapsible-panel/collapsible-panel.tsx
+++ b/frontend/src/components/collapsible-panel/collapsible-panel.tsx
@@ -12,7 +12,12 @@ export const CollapsiblePanel = ({ title, isCollapsed = false, children }) => {
 
   return (
     <section className="collapsiblePanel-container">
-      <label className="collapsiblePanel-label">
+      {/* Not a <label>: a label forwards clicks on its text to the button, but
+          Chrome also forwards a click that lands on the button's own icon, so a
+          click on the chevron toggled twice — i.e. did nothing. One handler on
+          the row covers text, empty space, and the button (keyboard included:
+          Enter/Space on the button fire a click that bubbles here). */}
+      <div className="collapsiblePanel-label" onClick={() => setCollapsed(!collapsed)}>
         <Button
           className="collapsiblePanel-button"
           variant="secondary"
@@ -21,10 +26,9 @@ export const CollapsiblePanel = ({ title, isCollapsed = false, children }) => {
           aria-labelledby={titleId}
           aria-label={collapsed ? t('common.buttons.expand') : t('common.buttons.collapse')}
           icon={collapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}
-          onClick={() => setCollapsed(!collapsed)}
         />
         <span id={titleId}>{title}</span>
-      </label>
+      </div>
       {!collapsed && <div>{children}</div>}
     </section>
   );
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 9fb850218..e742e8ff2 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -1095,6 +1095,9 @@
          "monitor-col-command": "Command",
          "monitor-col-response": "Response",
          "monitor-foreign": "foreign",
+         "all-controls": "All controls",
+         "state-on": "on",
+         "state-off": "off",
          "monitor-broadcast": "Broadcast"
       },
       "buttons": {
diff --git a/frontend/src/i18n/locales/ru.json b/frontend/src/i18n/locales/ru.json
index 1bba1e560..8ef8563f3 100644
--- a/frontend/src/i18n/locales/ru.json
+++ b/frontend/src/i18n/locales/ru.json
@@ -1124,6 +1124,9 @@
          "monitor-col-command": "Команда",
          "monitor-col-response": "Ответ",
          "monitor-foreign": "сторонний",
+         "all-controls": "Все элементы управления",
+         "state-on": "вкл",
+         "state-off": "выкл",
          "monitor-broadcast": "Широковещательные"
       },
       "buttons": {
diff --git a/frontend/src/pages/settings/configs/dali/components/bus-commands/styles.css b/frontend/src/pages/settings/configs/dali/components/bus-commands/styles.css
index 06b313f49..0be7864a5 100644
--- a/frontend/src/pages/settings/configs/dali/components/bus-commands/styles.css
+++ b/frontend/src/pages/settings/configs/dali/components/bus-commands/styles.css
@@ -99,11 +99,13 @@
         height: 180px;
     }
 
-    .dali-busCommands-catalogButton .button-text {
-        display: none;
-    }
-
     .dali-busCommands-results .wb-tableWrapper {
         overflow-x: visible;
     }
 }
+
+/* At phone widths the flex row squeezed the catalog button into a label-less
+   pill; buttons here keep their intrinsic width and wrap instead. */
+.dali-busCommands-toolbar .button {
+    flex-shrink: 0;
+}
diff --git a/frontend/src/pages/settings/configs/dali/components/bus-tab-content/bus-tab-content.tsx b/frontend/src/pages/settings/configs/dali/components/bus-tab-content/bus-tab-content.tsx
index 0bdb52a65..9018e652b 100644
--- a/frontend/src/pages/settings/configs/dali/components/bus-tab-content/bus-tab-content.tsx
+++ b/frontend/src/pages/settings/configs/dali/components/bus-tab-content/bus-tab-content.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/button';
 import { Card } from '@/components/card';
@@ -12,6 +12,8 @@ import type { ObjectParamStore } from '@/stores/json-schema-editor/object-store'
 import { useAsyncAction } from '@/utils/async-action';
 import { BusCommands } from '../bus-commands';
 import { BusToggle } from '../bus-toggle';
+import { DeviceControls } from '../device-controls';
+import { TabToolbar } from '../tab-toolbar';
 import { CommissioningErrorBanner } from './commissioning-error-banner';
 import { CommissioningProgress } from './commissioning-progress';
 import { PollingIntervalField } from './polling-interval-field';
@@ -118,7 +120,7 @@ const BusParamsTabContent = observer(({ store }: { store: BusStore }) => {
   );
 });
 
-export const BusTabContent = observer(({ store }: { store: BusStore }) => {
+export const BusTabContent = observer(({ store, title }: { store: BusStore; title?: ReactNode }) => {
   const { t } = useTranslation();
 
   if (store.isLoading) {
@@ -136,12 +138,18 @@ export const BusTabContent = observer(({ store }: { store: BusStore }) => {
       ) : (
         <>
           <CommissioningErrorBanner store={store} />
-          <FormButtonGroup>
-            <Button
-              label={t('dali.buttons.rescan')}
-              onClick={() => store.scan()}
-            />
-          </FormButtonGroup>
+          <TabToolbar title={title}>
+            <FormButtonGroup>
+              <Button
+                label={t('dali.buttons.rescan')}
+                onClick={() => store.scan()}
+              />
+            </FormButtonGroup>
+          </TabToolbar>
+          {/* The daemon publishes the bus's broadcast commands as a virtual
+              device of their own — every lamp at once, which is what one
+              wants to try first after a scan. */}
+          <DeviceControls mqttId={`${store.id}_broadcast`} />
           <PollingIntervalField store={store} />
           <BusParamsTabContent store={store} />
           <BusCommands store={store.commands} />
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx b/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx
new file mode 100644
index 000000000..0d7d49485
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx
@@ -0,0 +1,307 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMediaQuery } from 'react-responsive';
+import { Cell as CellContent } from '@/components/cell';
+import { mqttClient } from '@/services/mqtt-client';
+import Cell from '@/stores/devices/cell';
+import { sendCellValueUpdate } from '@/stores/devices/send-cell-value';
+import type { DeviceControlsProps, StripEntry } from './types';
+import './styles.css';
+
+/**
+ * The device's live controls — the same brightness, state and colour controls
+ * wb-mqtt-dali publishes over MQTT for the Devices view, embedded into the
+ * configurator's device page, so commissioning a device and trying the result
+ * happen in one place.
+ *
+ * Everything flows through the daemon's ordinary retained topics
+ * (`/devices/<id>/controls/…`), so this works identically against a
+ * controller's broker and the standalone editor's in-browser loopback broker.
+ *
+ * Layout: a small *featured* set — the cells someone actually watches or
+ * grabs while tuning parameters — stays pinned while the (possibly enormous)
+ * configuration form scrolls: as a sticky strip under the toolbar on wide
+ * screens, as a bottom sheet with a live peek line on phones. Everything else
+ * lives behind "All controls". The split matters most on DALI-2 sensors,
+ * where three live readings (occupancy, movement, illuminance) drown in
+ * dozens of per-button event indicators otherwise.
+ */
+
+export const FEATURED_LIMIT = 6;
+
+/**
+ * The cells worth pinning, from structure rather than device-specific names:
+ * readings (read-only cells that are NOT part of a per-instance family), the
+ * actuator ranges (a lamp's Wanted Level, a colour temperature), colour
+ * pickers, and the two universally-wanted buttons — Off and its "on"
+ * counterpart, Recall Max Level.
+ *
+ * "Per-instance family" is detected by stripping a trailing index and counting
+ * siblings: a DALI-2 sensor publishes "Button 2".."Button 18" (17 of a kind) —
+ * noise for a pinned strip — while "Occupied 0" is a singleton reading even
+ * though it, too, carries its instance number.
+ */
+const familyBase = (cell: Cell) => cell.name.replace(/\s\d+$/, '');
+
+export function pickFeatured(cells: Cell[]): Cell[] {
+  const byOrder = [...cells].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const familySize = new Map<string, number>();
+  byOrder.forEach((cell) => {
+    const base = familyBase(cell);
+    familySize.set(base, (familySize.get(base) ?? 0) + 1);
+  });
+  const readings = byOrder.filter(
+    (cell) =>
+      cell.readOnly && cell.type !== 'pushbutton' && (familySize.get(familyBase(cell)) ?? 0) < 3,
+  );
+  const writable = byOrder.filter((cell) => !cell.readOnly);
+  const ranges = writable.filter((cell) => cell.type === 'range');
+  const colours = writable.filter((cell) => cell.type === 'rgb');
+  // Match by the wire control id first (stable), by the English title second
+  // (what gear devices carry) — never by the localized display name alone.
+  const named = (id: string, title: string) =>
+    writable
+      .filter((cell) => cell.controlId === id || cell.controlId === title || cell.name === title)
+      .slice(0, 1);
+  const off = named('off', 'Off');
+  const recallMax = named('recall_max_level', 'Recall Max Level');
+  const seen = new Set<string>();
+  // Priority when the limit bites: live readings, the primary slider, colour,
+  // Off — then the nice-to-haves: Recall Max and the secondary sliders
+  // (colour temperature, white channel). Broadcast and group devices have no
+  // readings, which is exactly what frees the room for the extras.
+  return [...readings, ...ranges.slice(0, 1), ...colours, ...off, ...recallMax, ...ranges.slice(1)]
+    .filter((cell) => !seen.has(cell.id) && seen.add(cell.id))
+    .slice(0, FEATURED_LIMIT);
+}
+
+/**
+ * Setpoint ↔ readback pairs, by the daemon's wire control ids (see
+ * `control_ids.py`): a lamp publishes "Actual Level" next to "Wanted Level",
+ * "Current RGB" next to "Set RGB", and so on. Shown merged — the setpoint
+ * control with the live readback in brackets — the pair takes one slot
+ * instead of two.
+ */
+const SETPOINT_OF: Record<string, string> = {
+  actual_level: 'wanted_level',
+  current_rgb: 'set_rgb',
+  current_white: 'set_white',
+  current_colour_temperature: 'set_colour_temperature',
+  current_x_coordinate: 'set_x_coordinate',
+  current_y_coordinate: 'set_y_coordinate',
+};
+
+const setpointIdFor = (controlId: string): string | undefined => {
+  const primary = /^current_primary_n(\d+)$/.exec(controlId);
+  return primary ? `set_primary_n${primary[1]}` : SETPOINT_OF[controlId];
+};
+
+/**
+ * Fold readbacks into their setpoint controls: a featured reading whose
+ * setpoint exists is shown AS the setpoint (so the strip is operable, not just
+ * observable), and a featured setpoint gets its live reading as a suffix.
+ */
+export function mergeReadbacks(featured: Cell[], all: Cell[]): StripEntry[] {
+  const byControlId = new Map(all.map((cell) => [cell.controlId, cell]));
+  const readbackOf = new Map<string, Cell>();
+  all.forEach((cell) => {
+    if (!cell.readOnly) {
+      return;
+    }
+    const setpointId = setpointIdFor(cell.controlId);
+    const setpoint = setpointId ? byControlId.get(setpointId) : undefined;
+    if (setpoint && !setpoint.readOnly) {
+      readbackOf.set(setpoint.id, cell);
+    }
+  });
+  const entries: StripEntry[] = [];
+  const seen = new Set<string>();
+  featured.forEach((cell) => {
+    const setpointId = cell.readOnly ? setpointIdFor(cell.controlId) : undefined;
+    const setpoint = setpointId ? byControlId.get(setpointId) : undefined;
+    const shown = setpoint && !setpoint.readOnly ? setpoint : cell;
+    if (seen.has(shown.id)) {
+      return;
+    }
+    seen.add(shown.id);
+    const readback = readbackOf.get(shown.id);
+    entries.push(readback ? { cell: shown, readback } : { cell: shown });
+  });
+  return entries;
+}
+
+type Translate = (key: string) => string;
+
+const peekValue = (cell: Cell, t: Translate): string => {
+  if (cell.type === 'switch' || typeof cell.value === 'boolean') {
+    return cell.value ? t('dali.labels.state-on') : t('dali.labels.state-off');
+  }
+  const value = cell.value === null || cell.value === undefined || cell.value === '' ? '—' : String(cell.value);
+  return cell.units ? `${value} ${cell.units}` : value;
+};
+
+/** The wire carries colour both ways: "#rrggbb" from the daemon, "r;g;b" per the conventions. */
+const asCssColour = (value: string) =>
+  (value.startsWith('#') ? value : `rgb(${value.split(';').join(',')})`);
+
+/** The live reading, rendered small next to its setpoint control. */
+const ReadbackSuffix = observer(({ cell }: { cell: Cell }) => {
+  const { t } = useTranslation();
+  if (cell.type === 'rgb' && typeof cell.value === 'string' && cell.value) {
+    return (
+      <span
+        className="daliDeviceControls-readback daliDeviceControls-swatch"
+        title={`${cell.name}: ${cell.value}`}
+        style={{ background: asCssColour(String(cell.value)) }}
+      />
+    );
+  }
+  return (
+    <span className="daliDeviceControls-readback" title={cell.name}>
+      ({peekValue(cell, t)})
+    </span>
+  );
+});
+
+export const DeviceControls = observer(({ mqttId }: DeviceControlsProps) => {
+  const { t } = useTranslation();
+  const [cells, setCells] = useState<Cell[]>([]);
+  const [isSheetOpen, setSheetOpen] = useState(false);
+  const [showAll, setShowAll] = useState(false);
+  const isPhone = useMediaQuery({ maxWidth: 767 });
+
+  // A private per-device cell store rather than devicesStore on purpose:
+  // getDeviceCells rides the always-on `/devices/#` firehose and its own
+  // completeness rules, while this page shows exactly one device at a time
+  // over a loopback broker where three narrow subscriptions are cheap.
+  useEffect(() => {
+    if (!mqttId) {
+      setCells([]);
+      return undefined;
+    }
+
+    const byName = new Map<string, Cell>();
+
+    const ensure = (controlName: string): Cell => {
+      let cell = byName.get(controlName);
+      if (!cell) {
+        cell = new Cell(`${mqttId}/${controlName}`, sendCellValueUpdate);
+        byName.set(controlName, cell);
+        // A new control appeared; values and meta keep flowing into the
+        // existing observable cells without re-rendering the list.
+        setCells([...byName.values()]);
+      }
+      return cell;
+    };
+
+    const base = `/devices/${mqttId}/controls/`;
+    const topics: Array<[string, (name: string, payload: string) => void]> = [
+      [`${base}+`, (name, payload) => ensure(name).receiveValue(payload)],
+      [`${base}+/meta`, (name, payload) => ensure(name).setMeta(payload)],
+      [`${base}+/meta/error`, (name, payload) => ensure(name).setError(payload)],
+    ];
+
+    topics.forEach(([pattern, apply]) => {
+      mqttClient.addStickySubscription(pattern, (message) => {
+        const rest = message.topic.slice(base.length);
+        const name = rest.split('/')[0];
+        if (name) {
+          apply(name, message.payload);
+        }
+      });
+    });
+
+    return () => {
+      topics.forEach(([pattern]) => mqttClient.unsubscribe(pattern));
+      setCells([]);
+    };
+  }, [mqttId]);
+
+  // Plain calls, not useMemo: `visible` is rebuilt every render, so a memo
+  // keyed on it would never hit — and the lists are a few dozen cells.
+  const visible = cells
+    .filter((cell) => !cell.hidden)
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const featured = pickFeatured(visible);
+  const strip = mergeReadbacks(featured, visible);
+  const stripIds = new Set(
+    strip.flatMap((entry) => (entry.readback ? [entry.cell.id, entry.readback.id] : [entry.cell.id])),
+  );
+  const rest = visible.filter((cell) => !stripIds.has(cell.id));
+
+  if (!visible.length) {
+    return null;
+  }
+
+  if (isPhone) {
+    return (
+      <div className={classNames('daliDeviceControls-sheet', { 'daliDeviceControls-sheetOpen': isSheetOpen })}>
+        <button
+          type="button"
+          className="daliDeviceControls-peek"
+          aria-expanded={isSheetOpen}
+          onClick={() => setSheetOpen(!isSheetOpen)}
+        >
+          <span className="daliDeviceControls-peekValues">
+            {strip.filter(({ cell }) => cell.type !== 'pushbutton').map(({ cell, readback }) => (
+              <span className="daliDeviceControls-peekItem" key={cell.id}>
+                {(readback ?? cell).name}: <b>{peekValue(readback ?? cell, t)}</b>
+              </span>
+            ))}
+          </span>
+          <span className="daliDeviceControls-peekChevron">{isSheetOpen ? '▾' : '▴'}</span>
+        </button>
+        {isSheetOpen && (
+          <div className="daliDeviceControls-sheetBody">
+            <div className="daliDeviceControls-grid">
+              {visible.map((cell) => (
+                <div className="daliDeviceControls-cell" key={cell.id}>
+                  <CellContent cell={cell} hideHistory={true} />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="daliDeviceControls-strip">
+        {strip.map(({ cell, readback }) => (
+          <div className="daliDeviceControls-stripCell" key={cell.id}>
+            <CellContent cell={cell} hideHistory={true} />
+            {readback && <ReadbackSuffix cell={readback} />}
+          </div>
+        ))}
+        {rest.length > 0 && (
+          // The toggle rides in the strip itself: a header below the sticky
+          // strip scrolls underneath it and becomes unclickable at exactly
+          // the moment someone reaches for it.
+          <button
+            type="button"
+            className="daliDeviceControls-showAll"
+            aria-expanded={showAll}
+            onClick={() => setShowAll(!showAll)}
+          >
+            {t('dali.labels.all-controls')} {showAll ? '▴' : '▾'}
+          </button>
+        )}
+      </div>
+      {rest.length > 0 && showAll && (
+        <div className="daliDeviceControls">
+          <div className="daliDeviceControls-grid">
+            {rest.map((cell) => (
+              <div className="daliDeviceControls-cell" key={cell.id}>
+                <CellContent cell={cell} hideHistory={true} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts b/frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts
new file mode 100644
index 000000000..f1399323d
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts
@@ -0,0 +1,93 @@
+// @vitest-environment happy-dom
+import type Cell from '@/stores/devices/cell';
+import { FEATURED_LIMIT, mergeReadbacks, pickFeatured } from './device-controls';
+
+/** The slice of Cell the heuristics read. */
+const cell = (
+  controlId: string,
+  name: string,
+  type: string,
+  { readOnly = false, order = 0 } = {},
+): Cell => ({ id: `dev/${controlId}`, controlId, name, type, readOnly, order } as unknown as Cell);
+
+const names = (cells: Cell[]) => cells.map((c) => c.controlId);
+
+vi.mock('@/services', () => import('@/test/mocks/services'));
+
+describe('pickFeatured', () => {
+  it('gives a broadcast device its sliders, colour and both power buttons', () => {
+    const featured = pickFeatured([
+      cell('dapc', 'Direct Arc Power Control', 'value'),
+      cell('off', 'Off', 'pushbutton'),
+      cell('up', 'Up', 'pushbutton'),
+      cell('down', 'Down', 'pushbutton'),
+      cell('step_up', 'Step Up', 'pushbutton'),
+      cell('recall_max_level', 'Recall Max Level', 'pushbutton'),
+      cell('recall_min_level', 'Recall Min Level', 'pushbutton'),
+      cell('go_to_scene', 'Go To Scene', 'value'),
+      cell('wanted_level', 'Wanted Level', 'range'),
+      cell('set_colour_temperature', 'Wanted Colour Temperature', 'range'),
+      cell('wanted_rgb', 'Wanted RGB', 'rgb'),
+      cell('wanted_w', 'Wanted W', 'range'),
+    ]);
+    expect(names(featured)).toEqual([
+      'wanted_level', 'wanted_rgb', 'off', 'recall_max_level', 'set_colour_temperature', 'wanted_w',
+    ]);
+  });
+
+  it('keeps Off over the nice-to-haves when a lamp already fills the strip with readings', () => {
+    const featured = pickFeatured([
+      cell('actual_level', 'Actual Level', 'value', { readOnly: true }),
+      cell('current_rgb', 'Current RGB', 'rgb', { readOnly: true }),
+      cell('current_w', 'Current W', 'value', { readOnly: true }),
+      cell('wanted_level', 'Wanted Level', 'range'),
+      cell('wanted_rgb', 'Wanted RGB', 'rgb'),
+      cell('wanted_w', 'Wanted W', 'range'),
+      cell('recall_max_level', 'Recall Max Level', 'pushbutton'),
+      cell('off', 'Off', 'pushbutton'),
+    ]);
+    expect(featured).toHaveLength(FEATURED_LIMIT);
+    expect(names(featured)).toContain('off');
+    expect(names(featured)).not.toContain('recall_max_level');
+  });
+
+  it('still hides a sensor\'s per-button noise while pinning its readings', () => {
+    const buttons = Array.from({ length: 18 }, (_, i) =>
+      cell(`button${i + 2}`, `Button ${i + 2}`, 'switch', { readOnly: true, order: 10 + i }));
+    const featured = pickFeatured([
+      cell('occupied0', 'Occupied 0', 'switch', { readOnly: true, order: 1 }),
+      cell('movement0', 'Movement 0', 'switch', { readOnly: true, order: 2 }),
+      cell('illuminance1', 'Illuminance 1', 'value', { readOnly: true, order: 3 }),
+      ...buttons,
+    ]);
+    expect(names(featured)).toEqual(['occupied0', 'movement0', 'illuminance1']);
+  });
+});
+
+describe('mergeReadbacks', () => {
+  const all = [
+    cell('actual_level', 'Actual Level', 'value', { readOnly: true, order: 1 }),
+    cell('current_rgb', 'Current RGB', 'rgb', { readOnly: true, order: 2 }),
+    cell('wanted_level', 'Wanted Level', 'range', { order: 10 }),
+    cell('set_rgb', 'Set RGB', 'rgb', { order: 11 }),
+    cell('off', 'Off', 'pushbutton', { order: 12 }),
+    cell('illuminance1', 'Illuminance 1', 'value', { readOnly: true, order: 3 }),
+  ];
+
+  it('folds a featured reading into its setpoint control', () => {
+    const merged = mergeReadbacks(pickFeatured(all), all);
+    const shown = merged.map((entry) => entry.cell.controlId);
+    expect(shown).toContain('wanted_level');
+    expect(shown).toContain('set_rgb');
+    expect(shown).not.toContain('actual_level');
+    expect(merged.find((e) => e.cell.controlId === 'wanted_level')?.readback?.controlId).toBe('actual_level');
+    expect(merged.find((e) => e.cell.controlId === 'set_rgb')?.readback?.controlId).toBe('current_rgb');
+  });
+
+  it('leaves an unpaired reading alone', () => {
+    const merged = mergeReadbacks(pickFeatured(all), all);
+    const lux = merged.find((entry) => entry.cell.controlId === 'illuminance1');
+    expect(lux).toBeDefined();
+    expect(lux?.readback).toBeUndefined();
+  });
+});
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/index.ts b/frontend/src/pages/settings/configs/dali/components/device-controls/index.ts
new file mode 100644
index 000000000..364b513bc
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/index.ts
@@ -0,0 +1,2 @@
+export { DeviceControls } from './device-controls';
+export type { StripEntry } from './types';
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/styles.css b/frontend/src/pages/settings/configs/dali/components/device-controls/styles.css
new file mode 100644
index 000000000..880daf3c9
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/styles.css
@@ -0,0 +1,174 @@
+/* Wide screens: the featured cells ride in a slim strip that stays pinned
+   under the (already sticky) toolbar while the form scrolls beneath it. */
+.daliDeviceControls-strip {
+    position: sticky;
+    /* The toolbar above is sticky at top: -12px, so the height it keeps on
+       screen is its own height minus those 12px — and that height moves when
+       the title or the buttons wrap, which is why the toolbar publishes it
+       (see TabToolbar). Parking the strip exactly there keeps it flush: any
+       higher clips the strip's first line, any lower opens a gap that
+       scrolled form rows show through. */
+    top: calc(var(--dali-toolbar-height, 58px) - 12px);
+    z-index: 100;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 24px;
+    padding: 6px 12px;
+    margin-bottom: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--container-border-radius);
+    background: var(--container-background);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+}
+
+.daliDeviceControls-stripCell {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+}
+
+/* Sliders need real width to be grabbable; readings can shrink. */
+.daliDeviceControls-stripCell:has(input[type='range']) {
+    flex: 1 1 220px;
+    max-width: 340px;
+}
+
+.daliDeviceControls {
+    border: 1px solid var(--border-color);
+    border-radius: var(--container-border-radius);
+    background: var(--container-background);
+    padding: 6px 12px 10px;
+    margin-bottom: 12px;
+}
+
+.daliDeviceControls-grid {
+    margin-top: 6px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 6px 20px;
+}
+
+.daliDeviceControls-cell {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    min-width: 0;
+}
+
+/* The cell widget brings its own name label; just let it fill the column. */
+.daliDeviceControls-cell > *,
+.daliDeviceControls-stripCell > * {
+    flex: 1;
+    min-width: 0;
+}
+
+/* Phones: the same featured set as a bottom sheet. Closed, it is a one-line
+   peek bar with live values in thumb reach; open, the full control set
+   scrolls inside 60vh while the form keeps the whole screen. */
+.daliDeviceControls-sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 150;
+    background: var(--container-background);
+    border-top: 1px solid var(--border-color);
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
+}
+
+.daliDeviceControls-peek {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    min-height: 44px;
+    padding: 6px 14px;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    color: var(--text-color);
+}
+
+.daliDeviceControls-peekValues {
+    display: flex;
+    gap: 14px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    white-space: nowrap;
+}
+
+.daliDeviceControls-peekItem {
+    color: var(--text-secondary-color);
+    font-size: 13px;
+}
+
+.daliDeviceControls-peekItem b {
+    color: var(--text-color);
+}
+
+.daliDeviceControls-peekChevron {
+    flex-shrink: 0;
+    color: var(--text-secondary-color);
+}
+
+.daliDeviceControls-sheetBody {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 4px 14px 14px;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Let the last form rows scroll clear of the closed peek bar. */
+@media (max-width: 767px) {
+    .dali-content {
+        padding-bottom: 60px;
+    }
+}
+
+.daliDeviceControls-showAll {
+    margin-left: auto;
+    flex-shrink: 0;
+    padding: 4px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--input-border-radius, 6px);
+    background: var(--container-background);
+    color: var(--text-color);
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.daliDeviceControls-showAll:hover {
+    background: var(--background-accent-color-hover);
+}
+
+/* Setpoint cells carry their live readback in brackets; readings get their
+   value emphasized and a colon after the name, so "Illuminance 1" followed by
+   "537" stops reading as the single number 1537. */
+.daliDeviceControls-readback {
+    flex: 0 0 auto !important;
+    margin-left: 4px;
+    color: var(--text-secondary-color);
+    font-size: 13px;
+    white-space: nowrap;
+}
+
+.daliDeviceControls-swatch {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.daliDeviceControls-stripCell .deviceCell:not(.deviceCell-columns) .deviceCell-nameText::after,
+.daliDeviceControls-cell .deviceCell:not(.deviceCell-columns) .deviceCell-nameText::after {
+    content: ':';
+}
+
+.daliDeviceControls-stripCell .deviceCell-value,
+.daliDeviceControls-cell .deviceCell-value {
+    font-weight: 600;
+}
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/types.ts b/frontend/src/pages/settings/configs/dali/components/device-controls/types.ts
new file mode 100644
index 000000000..4b19ba3af
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/types.ts
@@ -0,0 +1,11 @@
+import type Cell from '@/stores/devices/cell';
+
+/** One slot of the featured strip: a control, optionally with its live readback. */
+export interface StripEntry {
+  cell: Cell;
+  readback?: Cell;
+}
+
+export interface DeviceControlsProps {
+  mqttId: string;
+}
diff --git a/frontend/src/pages/settings/configs/dali/components/device-tab-content/device-tab-content.tsx b/frontend/src/pages/settings/configs/dali/components/device-tab-content/device-tab-content.tsx
index 88de44a7b..2d37d0aab 100644
--- a/frontend/src/pages/settings/configs/dali/components/device-tab-content/device-tab-content.tsx
+++ b/frontend/src/pages/settings/configs/dali/components/device-tab-content/device-tab-content.tsx
@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/button';
 import { FormButtonGroup } from '@/components/form';
@@ -8,14 +8,18 @@ import { Loader } from '@/components/loader';
 import { Tooltip } from '@/components/tooltip';
 import type { DeviceStore } from '@/stores/dali';
 import { useAsyncAction } from '@/utils/async-action';
+import { DeviceControls } from '../device-controls';
+import { TabToolbar } from '../tab-toolbar';
 import { ResetConfirm } from './reset-confirm';
 import type { ResetMode } from './types';
 
 export const DeviceTabContent = observer(({
   store,
+  title,
   onDeviceRemoved,
 }: {
   store: DeviceStore;
+  title?: ReactNode;
   onDeviceRemoved: (device: DeviceStore) => void;
 }) => {
   const { t } = useTranslation();
@@ -45,7 +49,7 @@ export const DeviceTabContent = observer(({
   }
   return (
     <>
-      <div className="dali-deviceToolbar">
+      <TabToolbar title={title}>
         <FormButtonGroup>
           <Tooltip text={t('dali.labels.identify-tooltip')}>
             <Button
@@ -69,7 +73,8 @@ export const DeviceTabContent = observer(({
             onClick={() => store.save()}
           />
         </FormButtonGroup>
-      </div>
+      </TabToolbar>
+      {store.mqttId && <DeviceControls mqttId={store.mqttId} />}
       {store.isLoading ? (
         <div className="dali-contentLoader">
           <Loader />
diff --git a/frontend/src/pages/settings/configs/dali/components/group-tab-content/group-tab-content.tsx b/frontend/src/pages/settings/configs/dali/components/group-tab-content/group-tab-content.tsx
index fb076e14d..d024de0bd 100644
--- a/frontend/src/pages/settings/configs/dali/components/group-tab-content/group-tab-content.tsx
+++ b/frontend/src/pages/settings/configs/dali/components/group-tab-content/group-tab-content.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/button';
 import { JsonSchemaEditor } from '@/components/json-schema-editor';
@@ -8,6 +8,8 @@ import { Loader } from '@/components/loader';
 import type { GroupStore } from '@/stores/dali';
 import type { ObjectParamStore } from '@/stores/json-schema-editor';
 import { useAsyncAction } from '@/utils/async-action';
+import { DeviceControls } from '../device-controls';
+import { TabToolbar } from '../tab-toolbar';
 import './styles.css';
 
 const MAX_SLOTS = 12;
@@ -50,7 +52,7 @@ const GroupParam = observer(({ store, param }: { store: GroupStore; param: Objec
   );
 });
 
-export const GroupTabContent = observer(({ store }: { store: GroupStore }) => {
+export const GroupTabContent = observer(({ store, title }: { store: GroupStore; title?: ReactNode }) => {
   if (store.isLoading) {
     return (
       <div className="dali-contentLoader">
@@ -85,6 +87,8 @@ export const GroupTabContent = observer(({ store }: { store: GroupStore }) => {
 
   return (
     <>
+      <TabToolbar title={title} />
+      {store.controlsMqttId && <DeviceControls mqttId={store.controlsMqttId} />}
       {rows.map((rowParams) => {
         const rowKey = rowParams.map((p) => p.key).join('-');
         const items = rowParams.map((param) => (
diff --git a/frontend/src/pages/settings/configs/dali/components/tab-toolbar/index.ts b/frontend/src/pages/settings/configs/dali/components/tab-toolbar/index.ts
new file mode 100644
index 000000000..d17121732
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/tab-toolbar/index.ts
@@ -0,0 +1 @@
+export { TabToolbar } from './tab-toolbar';
diff --git a/frontend/src/pages/settings/configs/dali/components/tab-toolbar/tab-toolbar.tsx b/frontend/src/pages/settings/configs/dali/components/tab-toolbar/tab-toolbar.tsx
new file mode 100644
index 000000000..4de80a191
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/tab-toolbar/tab-toolbar.tsx
@@ -0,0 +1,36 @@
+import { useLayoutEffect, useRef } from 'react';
+import type { TabToolbarProps } from './types';
+
+/**
+ * The sticky row at the top of every DALI page: what the page is, and what
+ * can be done to it, on one line — the title used to float above the action
+ * buttons on a row of its own.
+ *
+ * Its height is published as `--dali-toolbar-height` on the scroll container:
+ * the featured-controls strip below is sticky too and must park exactly flush
+ * against this toolbar's bottom edge, which moves whenever the title or the
+ * button row wraps.
+ */
+export const TabToolbar = ({ title, children }: TabToolbarProps) => {
+  const toolbarRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const toolbar = toolbarRef.current;
+    const container = toolbar?.closest<HTMLElement>('.dali-content');
+    if (!toolbar || !container) {
+      return undefined;
+    }
+    const publish = () => container.style.setProperty('--dali-toolbar-height', `${toolbar.offsetHeight}px`);
+    publish();
+    const observer = new ResizeObserver(publish);
+    observer.observe(toolbar);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={toolbarRef} className="dali-deviceToolbar dali-tabToolbar">
+      {title && <h2 className="dali-contentTitle">{title}</h2>}
+      <div className="dali-tabToolbar-actions">{children}</div>
+    </div>
+  );
+};
diff --git a/frontend/src/pages/settings/configs/dali/components/tab-toolbar/types.ts b/frontend/src/pages/settings/configs/dali/components/tab-toolbar/types.ts
new file mode 100644
index 000000000..147981268
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/tab-toolbar/types.ts
@@ -0,0 +1,3 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+
+export type TabToolbarProps = PropsWithChildren<{ title?: ReactNode }>;
diff --git a/frontend/src/pages/settings/configs/dali/dali.tsx b/frontend/src/pages/settings/configs/dali/dali.tsx
index 5891d0c39..522d6b926 100644
--- a/frontend/src/pages/settings/configs/dali/dali.tsx
+++ b/frontend/src/pages/settings/configs/dali/dali.tsx
@@ -18,6 +18,7 @@ import {
   type BusStore,
   DaliPageStore,
 } from '@/stores/dali';
+import { ItemType } from '@/stores/dali/base-item-store';
 import { useStore } from '@/utils/use-store';
 import { BusTabContent } from './components/bus-tab-content';
 import { DeviceTabContent } from './components/device-tab-content';
@@ -27,21 +28,24 @@ import './styles.css';
 
 const TabContent = ({
   store,
+  title,
   onDeviceRemoved,
 }: {
   store: ItemStore;
+  title?: ReactNode;
   onDeviceRemoved: (device: DeviceStore) => void;
 }) => {
   if (store?.type === 'bus') {
-    return <BusTabContent store={store as BusStore} />;
+    return <BusTabContent store={store as BusStore} title={title} />;
   }
   if (store?.type === 'group') {
-    return <GroupTabContent store={store as GroupStore} />;
+    return <GroupTabContent store={store as GroupStore} title={title} />;
   }
   if (store?.type === 'device') {
     return (
       <DeviceTabContent
         store={store as DeviceStore}
+        title={title}
         onDeviceRemoved={onDeviceRemoved}
       />
     );
@@ -52,6 +56,27 @@ const TabContent = ({
   return null;
 };
 
+// What the page is, for the toolbar row: the tree selection is the only
+// other place that says so, and on mobile the tree is hidden while a page is
+// open.
+const itemTitle = (item: ItemStore, t: TFunction<'translation', undefined>): ReactNode => {
+  if (item.type === ItemType.Group) {
+    return t('dali.labels.group', { name: item.label });
+  }
+  if (item.type === ItemType.Bus) {
+    return t('dali.labels.bus', { num: (item as BusStore).index });
+  }
+  const parent = item.type === ItemType.Device ? (item as DeviceStore).parent : null;
+  return (
+    <>
+      {item.label}
+      {parent && (
+        <span className="dali-contentTitleContext">{t('dali.labels.bus', { num: parent.index })}</span>
+      )}
+    </>
+  );
+};
+
 const buildTreeItems = (
   items: ItemStore[],
   storeMap: Map<string, ItemStore>,
@@ -60,7 +85,7 @@ const buildTreeItems = (
   items.map((item) => {
     storeMap.set(item.id, item);
     let label: string | ReactNode = item.label;
-    if (item.type === 'group') {
+    if (item.type === ItemType.Group) {
       label = t('dali.labels.group', { name: item.label });
     } else if (item.type === 'device' && item.groups.length) {
       label = <>{item.label} <strong>{item.groups.map((g) => `G${g}`).join(' ')}</strong></>;
@@ -157,6 +182,7 @@ const DaliPage = observer(() => {
               )}
               <TabContent
                 store={selectedItem}
+                title={selectedItem ? itemTitle(selectedItem, t) : undefined}
                 onDeviceRemoved={onDeviceRemoved}
               />
             </section>
diff --git a/frontend/src/pages/settings/configs/dali/styles.css b/frontend/src/pages/settings/configs/dali/styles.css
index b5a09241c..dddac1ad8 100644
--- a/frontend/src/pages/settings/configs/dali/styles.css
+++ b/frontend/src/pages/settings/configs/dali/styles.css
@@ -56,3 +56,39 @@
 .dali .dropdown__control--is-disabled .dropdown__indicator {
     display: none;
 }
+
+.dali-tabToolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.dali-tabToolbar-actions {
+    margin-left: auto;
+}
+
+/* On phone widths the four device actions cannot share one line; the shared
+   button group does not wrap, which stacked the buttons on top of each other. */
+.dali-tabToolbar-actions .form-buttonGroup {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+.dali-contentTitle {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    margin: 0;
+    min-width: 0;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.dali-contentTitleContext {
+    font-size: 13px;
+    font-weight: 400;
+    color: var(--text-secondary-color);
+}
diff --git a/frontend/src/stores/dali/device-store-controls.test.ts b/frontend/src/stores/dali/device-store-controls.test.ts
new file mode 100644
index 000000000..9d7f7c725
--- /dev/null
+++ b/frontend/src/stores/dali/device-store-controls.test.ts
@@ -0,0 +1,27 @@
+import { daliProxyMock } from '@/test/mocks/services';
+import { DeviceStore } from './device-store';
+
+vi.mock('@/services', () => import('@/test/mocks/services'));
+vi.mock('@/stores/json-schema-editor', () => import('@/test/mocks/json-schema-editor'));
+vi.mock('@/utils/format-error', () => import('@/test/mocks/format-error'));
+
+describe('DeviceStore.load maps the mqtt id that decides whether live controls render', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('takes mqtt_id from the config', async () => {
+    daliProxyMock.GetDevice.mockResolvedValue({
+      schema: {}, name: 'Lamp',
+      config: { mqtt_id: 'wb-dali_17_bus_1_4', groups: [] },
+    });
+    const store = new DeviceStore('dev1', 'Lamp');
+    await store.load();
+    expect(store.mqttId).toBe('wb-dali_17_bus_1_4');
+  });
+
+  it('stays null when the config carries no mqtt_id', async () => {
+    daliProxyMock.GetDevice.mockResolvedValue({ schema: {}, name: 'Lamp', config: { groups: [] } });
+    const store = new DeviceStore('dev1', 'Lamp');
+    await store.load();
+    expect(store.mqttId).toBeNull();
+  });
+});
diff --git a/frontend/src/stores/dali/device-store.ts b/frontend/src/stores/dali/device-store.ts
index d5cda6017..8447ae4a7 100644
--- a/frontend/src/stores/dali/device-store.ts
+++ b/frontend/src/stores/dali/device-store.ts
@@ -26,6 +26,7 @@ export class DeviceStore extends BaseItemStore {
       isLoading: observable,
       error: observable,
       label: observable,
+      mqttId: observable,
       groups: observable.shallow,
     });
   }
@@ -34,6 +35,8 @@ export class DeviceStore extends BaseItemStore {
     return this.#parent;
   }
 
+  public mqttId: string | null = null;
+
   async load(forceReload = false) {
     if (this.objectStore && !forceReload) {
       return;
@@ -52,6 +55,7 @@ export class DeviceStore extends BaseItemStore {
       this.setError(null);
       runInAction(() => {
         this.label = data.name || this.label;
+        this.mqttId = (data.config as any).mqtt_id ?? null;
         this.updateGroups((data.config as any).groups);
         this.#parent?.syncGroupChildren();
       });
diff --git a/frontend/src/stores/dali/group-store-mqtt-id.test.ts b/frontend/src/stores/dali/group-store-mqtt-id.test.ts
new file mode 100644
index 000000000..56aba6ec4
--- /dev/null
+++ b/frontend/src/stores/dali/group-store-mqtt-id.test.ts
@@ -0,0 +1,19 @@
+import { GroupStore } from './group-store';
+
+vi.mock('@/services', () => import('@/test/mocks/services'));
+vi.mock('@/stores/json-schema-editor', () => import('@/test/mocks/json-schema-editor'));
+
+describe('GroupStore.controlsMqttId mirrors the daemon\'s group virtual-device id', () => {
+  it('zero-pads the index onto the parent bus id', () => {
+    // The daemon publishes f"{prefix}_group_{n:02d}" (virtual_devices.py) —
+    // this fixture is that convention verbatim.
+    const store = new GroupStore('g5', 5, { id: 'wb-dali_17_bus_1' } as any);
+    expect(store.controlsMqttId).toBe('wb-dali_17_bus_1_group_05');
+    const wide = new GroupStore('g12', 12, { id: 'wb-dali_17_bus_2' } as any);
+    expect(wide.controlsMqttId).toBe('wb-dali_17_bus_2_group_12');
+  });
+
+  it('is null without a parent bus', () => {
+    expect(new GroupStore('g1', 1, null).controlsMqttId).toBeNull();
+  });
+});
diff --git a/frontend/src/stores/dali/group-store.ts b/frontend/src/stores/dali/group-store.ts
index a411b7f7b..5c0dad7da 100644
--- a/frontend/src/stores/dali/group-store.ts
+++ b/frontend/src/stores/dali/group-store.ts
@@ -23,6 +23,19 @@ export class GroupStore extends BaseItemStore {
     });
   }
 
+  get parent(): BusStore | null {
+    return this.#parent;
+  }
+
+  /**
+   * The daemon publishes each group as a virtual device — "<bus>_group_NN" —
+   * whose controls act on every member at once. The formula mirrors
+   * wb-mqtt-dali's GroupVirtualDevice mqtt id and must stay in step with it.
+   */
+  get controlsMqttId(): string | null {
+    return this.#parent ? `${this.#parent.id}_group_${String(this.index).padStart(2, '0')}` : null;
+  }
+
   async load() {
     if (this.objectStore) {
       return;

From 88fb1c708c72d42b64411d2c985c62fefc5aa961 Mon Sep 17 00:00:00 2001
From: Evgeny Boger <boger@wirenboard.com>
Date: Fri, 4 Sep 2026 00:22:09 +0000
Subject: [PATCH 3/4] fix(dali): keep the controls strip opaque while the form
 scrolls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The featured strip is a rounded card pinned under the page toolbar while
the parameters form scrolls directly behind it. Between each rounded
corner and the strip's rectangular box the card's background does not
paint, so slivers of the moving form showed through the corners as
specks of dirt — the second point of review 5103128797 on #1233
("минорное - в версии для пк при скролле в углу грязь").

Fill those wedges with an opaque ring in the scroll container's own
ground colour, added as a second box-shadow. A shadow paints behind the
card's own background, where a z-index: -1 pseudo-element would not: the
strip is sticky with z-index 100 and so establishes a stacking context,
inside which a negative-z child still paints above the element's own
background — it hid the white card instead of backing it.

Checked against the simulated DALI bus at 1280x800 and 1920x1080 over
nine scroll offsets: the pixels that leaked at the strip's corners are
gone and no other pixel of the strip changes.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BNC4oayJWjJaHMmvM8YMGC
---
 .../dali/components/device-controls/styles.css        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/styles.css b/frontend/src/pages/settings/configs/dali/components/device-controls/styles.css
index 880daf3c9..fc855e70e 100644
--- a/frontend/src/pages/settings/configs/dali/components/device-controls/styles.css
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/styles.css
@@ -19,7 +19,16 @@
     border: 1px solid var(--border-color);
     border-radius: var(--container-border-radius);
     background: var(--container-background);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+    /* The strip is a rounded card, so the wedges between its rounded corners
+       and its rectangular box stay transparent, and the form scrolling
+       underneath showed through them as flecks of moving text. The second
+       shadow is an opaque ring in the scroll container's own ground colour:
+       it fills those wedges, and being a shadow it paints behind the card
+       instead of over it (a z-index: -1 child would not — the sticky strip
+       is its own stacking context). */
+    box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.06),
+        0 0 0 var(--container-border-radius, 8px) var(--background-accent-color-hover);
 }
 
 .daliDeviceControls-stripCell {

From 2cff11b179dd2b3d4867d17a538658050d360d2d Mon Sep 17 00:00:00 2001
From: Evgeny Boger <boger@wirenboard.com>
Date: Fri, 4 Sep 2026 00:22:20 +0000
Subject: [PATCH 4/4] feat(dali): name merged setpoint slots by the quantity,
 explain the readback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

wb-mqtt-dali names the writable half of a setpoint/readback pair for the
write — "Wanted Level", «Желаемая яркость» — which in the strip reads as
a different quantity from the live value printed right next to it in
brackets. Name the slot for the quantity instead: «Яркость», «Цветовая
температура», «Цвет», «Белый», the XY coordinates and the primary
colours, keyed by the wire control id from the daemon's control_ids.py.
Anything not on that list falls back to dropping a leading "Wanted " /
«Желаемый » from the daemon's own title, so a device type we have not
met still gets a sensible slot name rather than the raw key.

The bracketed number is then unexplained, so it carries the explanation
as a tooltip: «Значение, прочитанное из устройства» / "Value read back
from the device". The colour swatch keeps its value in its tooltip,
which the swatch itself cannot show. Both strings are in en/ru.

Addresses the naming half of review 5103128797 on #1233 and makes the
phone peek line agree with the desktop strip, which used the readback's
own title there.

No existing test needed adjusting: the strip's cell titles were never
asserted, so the new stripLabel cases (against the real locale files)
and the ReadbackSuffix render test are purely additive. `Translate` and
the readback props moved into types.ts, where frontend/project-rules.md
keeps a directory's types.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BNC4oayJWjJaHMmvM8YMGC
---
 debian/changelog                              |  8 ++-
 frontend/src/i18n/locales/en.json             | 10 ++++
 frontend/src/i18n/locales/ru.json             | 10 ++++
 .../device-controls/device-controls.test.tsx  | 23 +++++++
 .../device-controls/device-controls.tsx       | 43 ++++++++++---
 .../device-controls/featured.test.ts          | 60 ++++++++++++++++++-
 .../dali/components/device-controls/types.ts  |  8 +++
 7 files changed, 150 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.test.tsx

diff --git a/debian/changelog b/debian/changelog
index c62de7108..7dc6a8ad0 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,9 +1,11 @@
 wb-mqtt-homeui (2.250.4) stable; urgency=medium
 
   * DALI: live device controls on device, group and bus pages — a featured strip
-    of the controls one reaches for (level, colour, temperature, on/off) with
-    the rest behind "All controls"; the page toolbar names what is open, which
-    the hidden tree no longer does on mobile, and its buttons wrap on phones
+    of the controls one reaches for (level, colour, temperature, on/off), each
+    named by its quantity and showing the value read back from the device
+    beside it, with the rest behind "All controls"; the page toolbar names what
+    is open, which the hidden tree no longer does on mobile, and its buttons
+    wrap on phones
 
  -- Wiren Board Robot <info@wirenboard.com>  Mon, 31 Aug 2026 20:40:00 +0300
 
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index e742e8ff2..66fd41564 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -1095,6 +1095,16 @@
          "monitor-col-command": "Command",
          "monitor-col-response": "Response",
          "monitor-foreign": "foreign",
+         "setpoint": {
+                    "wanted_level": "Brightness",
+                    "set_rgb": "Colour",
+                    "set_white": "White",
+                    "set_colour_temperature": "Colour temperature",
+                    "set_x_coordinate": "X coordinate",
+                    "set_y_coordinate": "Y coordinate",
+                    "set_primary_n": "Primary N{{n}}"
+                  },
+                  "readback-tooltip": "Value read back from the device",
          "all-controls": "All controls",
          "state-on": "on",
          "state-off": "off",
diff --git a/frontend/src/i18n/locales/ru.json b/frontend/src/i18n/locales/ru.json
index 8ef8563f3..d85668fd0 100644
--- a/frontend/src/i18n/locales/ru.json
+++ b/frontend/src/i18n/locales/ru.json
@@ -1124,6 +1124,16 @@
          "monitor-col-command": "Команда",
          "monitor-col-response": "Ответ",
          "monitor-foreign": "сторонний",
+         "setpoint": {
+                    "wanted_level": "Яркость",
+                    "set_rgb": "Цвет",
+                    "set_white": "Белый",
+                    "set_colour_temperature": "Цветовая температура",
+                    "set_x_coordinate": "Координата X",
+                    "set_y_coordinate": "Координата Y",
+                    "set_primary_n": "Основной N{{n}}"
+                  },
+                  "readback-tooltip": "Значение, прочитанное из устройства",
          "all-controls": "Все элементы управления",
          "state-on": "вкл",
          "state-off": "выкл",
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.test.tsx b/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.test.tsx
new file mode 100644
index 000000000..4d114b65e
--- /dev/null
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.test.tsx
@@ -0,0 +1,23 @@
+// @vitest-environment happy-dom
+import type Cell from '@/stores/devices/cell';
+import { render, screen } from '@/test/render';
+import { ReadbackSuffix } from './device-controls';
+
+vi.mock('@/services', () => import('@/test/mocks/services'));
+
+/** The slice of Cell the readback suffix reads. */
+const cell = (controlId: string, name: string, type: string, value: unknown, units?: string): Cell =>
+  ({ id: `dev/${controlId}`, controlId, name, type, value, units, readOnly: true } as unknown as Cell);
+
+describe('ReadbackSuffix', () => {
+  it('explains the bracketed reading in a tooltip, since the slot is now named for the quantity', () => {
+    render(<ReadbackSuffix cell={cell('actual_level', 'Actual Level', 'value', 42, '%')} />);
+    const readback = screen.getByTitle('dali.labels.readback-tooltip');
+    expect(readback).toHaveTextContent('(42 %)');
+  });
+
+  it('keeps the colour value in the swatch tooltip, which the swatch itself cannot show', () => {
+    render(<ReadbackSuffix cell={cell('current_rgb', 'Current RGB', 'rgb', '#ff8800')} />);
+    expect(screen.getByTitle('dali.labels.readback-tooltip: #ff8800')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx b/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx
index 0d7d49485..924a31f96 100644
--- a/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/device-controls.tsx
@@ -7,7 +7,7 @@ import { Cell as CellContent } from '@/components/cell';
 import { mqttClient } from '@/services/mqtt-client';
 import Cell from '@/stores/devices/cell';
 import { sendCellValueUpdate } from '@/stores/devices/send-cell-value';
-import type { DeviceControlsProps, StripEntry } from './types';
+import type { DeviceControlsProps, ReadbackSuffixProps, StripEntry, Translate } from './types';
 import './styles.css';
 
 /**
@@ -132,7 +132,29 @@ export function mergeReadbacks(featured: Cell[], all: Cell[]): StripEntry[] {
   return entries;
 }
 
-type Translate = (key: string) => string;
+/** The setpoints with an explicit quantity label; the rest fall back to the prefix strip. */
+const LABELLED_SETPOINTS = new Set(Object.values(SETPOINT_OF));
+const PRIMARY_SETPOINT = /^set_primary_n(\d+)$/;
+const WANTED_PREFIX = /^(?:wanted|желаем(?:ый|ая|ое|ые))\s+/i;
+
+/**
+ * What a strip slot is called. The daemon names the writable half of a pair
+ * for the write — "Wanted Level", «Желаемая яркость» — which reads as a
+ * different quantity from the live value printed right next to it, so the
+ * strip uses the quantity itself: by the wire control id where we know it
+ * (see `control_ids.py`), by dropping the daemon's prefix where we do not.
+ */
+export function stripLabel(cell: Cell, t: Translate): string {
+  const primary = PRIMARY_SETPOINT.exec(cell.controlId);
+  if (primary) {
+    return t('dali.labels.setpoint.set_primary_n', { n: primary[1] });
+  }
+  if (LABELLED_SETPOINTS.has(cell.controlId)) {
+    return t(`dali.labels.setpoint.${cell.controlId}`);
+  }
+  const plain = cell.name.replace(WANTED_PREFIX, '');
+  return plain === cell.name ? cell.name : plain.charAt(0).toUpperCase() + plain.slice(1);
+}
 
 const peekValue = (cell: Cell, t: Translate): string => {
   if (cell.type === 'switch' || typeof cell.value === 'boolean') {
@@ -146,20 +168,25 @@ const peekValue = (cell: Cell, t: Translate): string => {
 const asCssColour = (value: string) =>
   (value.startsWith('#') ? value : `rgb(${value.split(';').join(',')})`);
 
-/** The live reading, rendered small next to its setpoint control. */
-const ReadbackSuffix = observer(({ cell }: { cell: Cell }) => {
+/**
+ * The live reading, rendered small next to its setpoint control. Now that the
+ * slot is named for the quantity, the bracketed number no longer says what it
+ * is, so it carries the explanation as a tooltip.
+ */
+export const ReadbackSuffix = observer(({ cell }: ReadbackSuffixProps) => {
   const { t } = useTranslation();
+  const hint = t('dali.labels.readback-tooltip');
   if (cell.type === 'rgb' && typeof cell.value === 'string' && cell.value) {
     return (
       <span
         className="daliDeviceControls-readback daliDeviceControls-swatch"
-        title={`${cell.name}: ${cell.value}`}
+        title={`${hint}: ${cell.value}`}
         style={{ background: asCssColour(String(cell.value)) }}
       />
     );
   }
   return (
-    <span className="daliDeviceControls-readback" title={cell.name}>
+    <span className="daliDeviceControls-readback" title={hint}>
       ({peekValue(cell, t)})
     </span>
   );
@@ -247,7 +274,7 @@ export const DeviceControls = observer(({ mqttId }: DeviceControlsProps) => {
           <span className="daliDeviceControls-peekValues">
             {strip.filter(({ cell }) => cell.type !== 'pushbutton').map(({ cell, readback }) => (
               <span className="daliDeviceControls-peekItem" key={cell.id}>
-                {(readback ?? cell).name}: <b>{peekValue(readback ?? cell, t)}</b>
+                {stripLabel(cell, t)}: <b>{peekValue(readback ?? cell, t)}</b>
               </span>
             ))}
           </span>
@@ -273,7 +300,7 @@ export const DeviceControls = observer(({ mqttId }: DeviceControlsProps) => {
       <div className="daliDeviceControls-strip">
         {strip.map(({ cell, readback }) => (
           <div className="daliDeviceControls-stripCell" key={cell.id}>
-            <CellContent cell={cell} hideHistory={true} />
+            <CellContent cell={cell} name={stripLabel(cell, t)} hideHistory={true} />
             {readback && <ReadbackSuffix cell={readback} />}
           </div>
         ))}
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts b/frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts
index f1399323d..8e73789ce 100644
--- a/frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/featured.test.ts
@@ -1,6 +1,9 @@
 // @vitest-environment happy-dom
+import en from '@/i18n/locales/en.json';
+import ru from '@/i18n/locales/ru.json';
 import type Cell from '@/stores/devices/cell';
-import { FEATURED_LIMIT, mergeReadbacks, pickFeatured } from './device-controls';
+import { FEATURED_LIMIT, mergeReadbacks, pickFeatured, stripLabel } from './device-controls';
+import type { Translate } from './types';
 
 /** The slice of Cell the heuristics read. */
 const cell = (
@@ -91,3 +94,58 @@ describe('mergeReadbacks', () => {
     expect(lux?.readback).toBeUndefined();
   });
 });
+
+/** i18next's lookup and interpolation, over the real locale files. */
+const translator = (locale: object): Translate => (key, options) => {
+  const value = key.split('.').reduce<any>((node, part) => node?.[part], locale);
+  if (typeof value !== 'string') {
+    return key;
+  }
+  return Object.entries(options ?? {}).reduce(
+    (text, [name, replacement]) => text.replace(`{{${name}}}`, String(replacement)),
+    value,
+  );
+};
+
+describe('stripLabel', () => {
+  const t = { en: translator(en), ru: translator(ru) };
+
+  it('names a setpoint slot by its quantity, not by the daemon\'s "wanted" title', () => {
+    expect(stripLabel(cell('wanted_level', 'Wanted Level', 'range'), t.en)).toBe('Brightness');
+    expect(stripLabel(cell('wanted_level', 'Желаемая яркость', 'range'), t.ru)).toBe('Яркость');
+    expect(stripLabel(cell('set_colour_temperature', 'Wanted Colour Temperature', 'range'), t.en))
+      .toBe('Colour temperature');
+    expect(stripLabel(cell('set_rgb', 'Желаемый RGB', 'rgb'), t.ru)).toBe('Цвет');
+  });
+
+  it('numbers a primary-colour slot from its control id', () => {
+    expect(stripLabel(cell('set_primary_n3', 'Wanted Primary N3', 'range'), t.en)).toBe('Primary N3');
+    expect(stripLabel(cell('set_primary_n3', 'Желаемый основной N3', 'range'), t.ru)).toBe('Основной N3');
+  });
+
+  it('drops the prefix from a setpoint it has no explicit label for', () => {
+    expect(stripLabel(cell('set_something', 'Wanted Power', 'range'), t.en)).toBe('Power');
+    expect(stripLabel(cell('set_something', 'Желаемая мощность', 'range'), t.ru)).toBe('Мощность');
+  });
+
+  it('leaves a control that is not a setpoint alone', () => {
+    expect(stripLabel(cell('off', 'Off', 'pushbutton'), t.en)).toBe('Off');
+    expect(stripLabel(cell('illuminance1', 'Освещённость 1', 'value'), t.ru)).toBe('Освещённость 1');
+  });
+
+  it('leaves no "желаемый" anywhere in the strip, whatever the daemon called the pair', () => {
+    const setpoints = [
+      cell('wanted_level', 'Желаемая яркость', 'range'),
+      cell('set_rgb', 'Желаемый RGB', 'rgb'),
+      cell('set_white', 'Желаемый W', 'range'),
+      cell('set_colour_temperature', 'Желаемая цветовая температура', 'range'),
+      cell('set_x_coordinate', 'Желаемая координата X', 'range'),
+      cell('set_y_coordinate', 'Желаемая координата Y', 'range'),
+      cell('set_primary_n0', 'Желаемый основной N0', 'range'),
+    ];
+    setpoints.forEach((setpoint) => {
+      expect(stripLabel(setpoint, t.ru).toLowerCase()).not.toContain('желаем');
+      expect(stripLabel(setpoint, t.ru)).not.toBe(setpoint.controlId);
+    });
+  });
+});
diff --git a/frontend/src/pages/settings/configs/dali/components/device-controls/types.ts b/frontend/src/pages/settings/configs/dali/components/device-controls/types.ts
index 4b19ba3af..aa61f211e 100644
--- a/frontend/src/pages/settings/configs/dali/components/device-controls/types.ts
+++ b/frontend/src/pages/settings/configs/dali/components/device-controls/types.ts
@@ -1,5 +1,8 @@
 import type Cell from '@/stores/devices/cell';
 
+/** `t` from react-i18next, narrowed to what the strip asks of it. */
+export type Translate = (key: string, options?: Record<string, unknown>) => string;
+
 /** One slot of the featured strip: a control, optionally with its live readback. */
 export interface StripEntry {
   cell: Cell;
@@ -9,3 +12,8 @@ export interface StripEntry {
 export interface DeviceControlsProps {
   mqttId: string;
 }
+
+/** The live reading rendered beside its setpoint control. */
+export interface ReadbackSuffixProps {
+  cell: Cell;
+}