diff --git a/debian/changelog b/debian/changelog
index 915513526..1bd616fe6 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.250.0) stable; urgency=medium
 
   * DALI: host capabilities for embedding hosts — the syslog toggle and the MQTT id
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 f8bce6a3e..5dffdb746 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';
@@ -13,6 +13,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';
@@ -119,7 +121,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) {
@@ -137,12 +139,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 f98ebc60b..ca9050013 100644
--- a/frontend/src/stores/dali/device-store.ts
+++ b/frontend/src/stores/dali/device-store.ts
@@ -27,6 +27,7 @@ export class DeviceStore extends BaseItemStore {
       isLoading: observable,
       error: observable,
       label: observable,
+      mqttId: observable,
       groups: observable.shallow,
     });
   }
@@ -35,6 +36,8 @@ export class DeviceStore extends BaseItemStore {
     return this.#parent;
   }
 
+  public mqttId: string | null = null;
+
   async load(forceReload = false) {
     if (this.objectStore && !forceReload) {
       return;
@@ -61,6 +64,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;