refactor: expose aux timer names via runtime store, index in automations

Addresses review feedback on the aux timer naming feature:

- Automation action labels now reference the timers by index
  ("Aux timer 1: start") rather than the custom names, keeping the
  automation config stable regardless of naming.
- Expose the custom names through the consumer-facing runtime interface:
  the aux timer objects broadcast over the websocket now carry a `name`
  field. Names are seeded from the persisted settings at bootstrap and
  kept in sync whenever the settings change, so every consumer (views and
  integrations) reads them from the same runtime data.
- The client control and view consumers now read the name from the
  runtime store instead of querying settings directly; the settings form
  remains the persisted editing source.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WCZejVTzuAY3tHTE6nB3JH

apps/client/src/common/hooks/useSocket.ts

@@ -95,6 +95,14 @@ export const useAuxTimersTime = createSelector((state: RuntimeStore) => {
   };
 });
 
+export const useAuxTimersName = createSelector((state: RuntimeStore) => {
+  return {
+    aux1: state.auxtimer1.name,
+    aux2: state.auxtimer2.name,
+    aux3: state.auxtimer3.name,
+  };
+});
+
 export const useAuxTimerTime = (index: number) =>
   createSelector((state: RuntimeStore) => {
     if (index === 1) return state.auxtimer1.current;
@@ -108,15 +116,18 @@ export const useAuxTimerControl = (index: number) =>
       return {
         playback: state.auxtimer1.playback,
         direction: state.auxtimer1.direction,
+        name: state.auxtimer1.name,
       };
     if (index === 2)
       return {
         playback: state.auxtimer2.playback,
         direction: state.auxtimer2.direction,
+        name: state.auxtimer2.name,
       };
     return {
       playback: state.auxtimer3.playback,
       direction: state.auxtimer3.direction,
+      name: state.auxtimer3.name,
     };
   })();
 

apps/client/src/common/utils/auxTimerUtils.ts

@@ -1,11 +1,10 @@
 /**
  * Resolves the display label for an aux timer.
  * Falls back to the provided default when no custom name is set.
- * @param names - the auxTimerNames array from settings (indexed 0-based)
+ * @param name - the aux timer's custom name (from the runtime store)
- * @param index - 1-based aux timer index (1, 2, 3)
  * @param fallback - label to use when no custom name is set
  */
-export function getAuxTimerLabel(names: string[] | undefined, index: number, fallback: string): string {
+export function getAuxTimerLabel(name: string | undefined, fallback: string): string {
-  const custom = names?.[index - 1]?.trim();
+  const custom = name?.trim();
   return custom ? custom : fallback;
 }

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -4,8 +4,6 @@ import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'
 
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
-import useSettings from '../../../../common/hooks-query/useSettings';
-import { getAuxTimerLabel } from '../../../../common/utils/auxTimerUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 import TemplateInput from './template-input/TemplateInput';
 
@@ -36,15 +34,12 @@ export default function OntimeActionForm({
   watch,
 }: PropsWithChildren<OntimeActionFormProps>) {
   const [selectedAction, setSelectedAction] = useState<string>(value);
-  const { data: settings } = useSettings();
 
   const handleSetAction = (value: OntimeActionKey) => {
     setValue(`outputs.${index}.action`, value, { shouldDirty: true });
     setSelectedAction(value);
   };
 
-  const auxLabel = (auxIndex: number) => getAuxTimerLabel(settings.auxTimerNames, auxIndex, `Aux ${auxIndex}`);
-
   return (
     <div className={style.actionSection}>
       <label>
@@ -56,21 +51,21 @@ export default function OntimeActionForm({
           }}
           value={watch(`outputs.${index}.action`)}
           options={[
-            { value: 'aux1-pause', label: `${auxLabel(1)}: pause` },
+            { value: 'aux1-pause', label: 'Aux timer 1: pause' },
-            { value: 'aux2-pause', label: `${auxLabel(2)}: pause` },
+            { value: 'aux2-pause', label: 'Aux timer 2: pause' },
-            { value: 'aux3-pause', label: `${auxLabel(3)}: pause` },
+            { value: 'aux3-pause', label: 'Aux timer 3: pause' },
 
-            { value: 'aux1-start', label: `${auxLabel(1)}: start` },
+            { value: 'aux1-start', label: 'Aux timer 1: start' },
-            { value: 'aux2-start', label: `${auxLabel(2)}: start` },
+            { value: 'aux2-start', label: 'Aux timer 2: start' },
-            { value: 'aux3-start', label: `${auxLabel(3)}: start` },
+            { value: 'aux3-start', label: 'Aux timer 3: start' },
 
-            { value: 'aux1-stop', label: `${auxLabel(1)}: stop` },
+            { value: 'aux1-stop', label: 'Aux timer 1: stop' },
-            { value: 'aux2-stop', label: `${auxLabel(2)}: stop` },
+            { value: 'aux2-stop', label: 'Aux timer 2: stop' },
-            { value: 'aux3-stop', label: `${auxLabel(3)}: stop` },
+            { value: 'aux3-stop', label: 'Aux timer 3: stop' },
 
-            { value: 'aux1-set', label: `${auxLabel(1)}: set` },
+            { value: 'aux1-set', label: 'Aux timer 1: set' },
-            { value: 'aux2-set', label: `${auxLabel(2)}: set` },
+            { value: 'aux2-set', label: 'Aux timer 2: set' },
-            { value: 'aux3-set', label: `${auxLabel(3)}: set` },
+            { value: 'aux3-set', label: 'Aux timer 3: set' },
 
             { value: 'playback-start', label: 'Playback: start' },
             { value: 'playback-stop', label: 'Playback: stop' },

apps/client/src/features/control/message/TimerPreview.tsx

@@ -4,9 +4,8 @@ import { LuArrowDownToLine } from 'react-icons/lu';
 
 import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
 import Tooltip from '../../../common/components/tooltip/Tooltip';
-import useSettings from '../../../common/hooks-query/useSettings';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
-import { useMessagePreview } from '../../../common/hooks/useSocket';
+import { useAuxTimersName, useMessagePreview } from '../../../common/hooks/useSocket';
 import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
@@ -17,12 +16,12 @@ import style from './TimerPreview.module.scss';
 export default function TimerPreview() {
   const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
   const { data } = useViewSettings();
-  const { data: settings } = useSettings();
+  const auxName = useAuxTimersName();
 
   const secondarySourceLabels: Record<string, string> = {
-    aux1: getAuxTimerLabel(settings.auxTimerNames, 1, 'Aux 1'),
+    aux1: getAuxTimerLabel(auxName.aux1, 'Aux 1'),
-    aux2: getAuxTimerLabel(settings.auxTimerNames, 2, 'Aux 2'),
+    aux2: getAuxTimerLabel(auxName.aux2, 'Aux 2'),
-    aux3: getAuxTimerLabel(settings.auxTimerNames, 3, 'Aux 3'),
+    aux3: getAuxTimerLabel(auxName.aux3, 'Aux 3'),
     secondary: 'Secondary message',
   };
 

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -4,8 +4,7 @@ import { useEffect, useState } from 'react';
 import Button from '../../../common/components/buttons/Button';
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import Select from '../../../common/components/select/Select';
-import useSettings from '../../../common/hooks-query/useSettings';
+import { setMessage, useAuxTimersName, useTimerViewControl } from '../../../common/hooks/useSocket';
-import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
 import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils';
 import TimerPreview from './TimerPreview';
 
@@ -45,7 +44,7 @@ export default function TimerControlsPreview() {
 
 function SecondarySourceControl() {
   const { secondarySource } = useTimerViewControl();
-  const { data: settings } = useSettings();
+  const auxName = useAuxTimersName();
   const [value, setValue] = useState<SecondarySource>('aux1');
 
   // sync secondary source with external changes
@@ -68,9 +67,9 @@ function SecondarySourceControl() {
       <Select
         value={value}
         options={[
-          { value: 'aux1', label: getAuxTimerLabel(settings.auxTimerNames, 1, 'Aux 1') },
+          { value: 'aux1', label: getAuxTimerLabel(auxName.aux1, 'Aux 1') },
-          { value: 'aux2', label: getAuxTimerLabel(settings.auxTimerNames, 2, 'Aux 2') },
+          { value: 'aux2', label: getAuxTimerLabel(auxName.aux2, 'Aux 2') },
-          { value: 'aux3', label: getAuxTimerLabel(settings.auxTimerNames, 3, 'Aux 3') },
+          { value: 'aux3', label: getAuxTimerLabel(auxName.aux3, 'Aux 3') },
           { value: 'secondary', label: 'Secondary message' },
         ]}
         onValueChange={(value: SecondarySource | null) => {

apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx

@@ -3,7 +3,6 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import { IoArrowDown, IoArrowUp, IoPause, IoPlay, IoStop } from 'react-icons/io5';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
-import useSettings from '../../../../common/hooks-query/useSettings';
 import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
 import { getAuxTimerLabel } from '../../../../common/utils/auxTimerUtils';
 import TapButton from '../tap-button/TapButton';
@@ -15,12 +14,11 @@ interface AuxTimerProps {
 }
 
 export function AuxTimer({ index }: AuxTimerProps) {
-  const { playback, direction } = useAuxTimerControl(index);
+  const { playback, direction, name } = useAuxTimerControl(index);
-  const { data: settings } = useSettings();
 
   const { stop, setDirection } = setAuxTimer;
 
-  const label = getAuxTimerLabel(settings.auxTimerNames, index, `Aux Timer ${index}`);
+  const label = getAuxTimerLabel(name, `Aux Timer ${index}`);
 
   const toggleDirection = () => {
     const newDirection = direction === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;

apps/client/src/views/studio/Studio.tsx

@@ -49,7 +49,7 @@ function Studio({ customFields, projectData, isMirrored, settings, viewSettings
 
       <div className={cx(['studio-contents', hideCards && 'studio-contents--onecol'])}>
         <StudioClock hideCards={hideCards} />
-        {!hideCards && <StudioTimers viewSettings={viewSettings} auxTimerNames={settings?.auxTimerNames} />}
+        {!hideCards && <StudioTimers viewSettings={viewSettings} />}
       </div>
     </div>
   );

apps/client/src/views/studio/StudioTimers.tsx

@@ -1,7 +1,7 @@
 import { Playback, TimerPhase, ViewSettings } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
-import { useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
+import { useAuxTimersName, useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
 import { getAuxTimerLabel } from '../../common/utils/auxTimerUtils';
 import { getOffsetState } from '../../common/utils/offset';
 import { cx } from '../../common/utils/styleUtils';
@@ -15,10 +15,9 @@ import './StudioTimers.scss';
 
 interface StudioTimersProps {
   viewSettings: ViewSettings;
-  auxTimerNames?: string[];
 }
 
-export default function StudioTimers({ viewSettings, auxTimerNames }: StudioTimersProps) {
+export default function StudioTimers({ viewSettings }: StudioTimersProps) {
   const { getLocalizedString } = useTranslation();
   const { mainSource } = useStudioOptions();
   const { eventNow, eventNext, message, time, offset, rundown, expectedRundownEnd } = useStudioTimersSocket();
@@ -102,7 +101,7 @@ export default function StudioTimers({ viewSettings, auxTimerNames }: StudioTime
         </div>
       </div>
 
-      <StudioTimersAux auxTimerNames={auxTimerNames} />
+      <StudioTimersAux />
 
       <div className='card' id='card-timer-message'>
         <div>
@@ -121,24 +120,25 @@ export default function StudioTimers({ viewSettings, auxTimerNames }: StudioTime
   );
 }
 
-function StudioTimersAux({ auxTimerNames }: { auxTimerNames?: string[] }) {
+function StudioTimersAux() {
   const auxTimer = useAuxTimersTime();
+  const auxName = useAuxTimersName();
 
   return (
     <div className='card' id='card-aux'>
       <div className='card__row'>
         <div>
-          <div className='label'>{getAuxTimerLabel(auxTimerNames, 1, 'Aux 1')}</div>
+          <div className='label'>{getAuxTimerLabel(auxName.aux1, 'Aux 1')}</div>
           <div className='extra'>{millisToString(auxTimer.aux1)}</div>
         </div>
 
         <div>
-          <div className='label center'>{getAuxTimerLabel(auxTimerNames, 2, 'Aux 2')}</div>
+          <div className='label center'>{getAuxTimerLabel(auxName.aux2, 'Aux 2')}</div>
           <div className='extra center'>{millisToString(auxTimer.aux2)}</div>
         </div>
 
         <div>
-          <div className='label right'>{getAuxTimerLabel(auxTimerNames, 3, 'Aux 3')}</div>
+          <div className='label right'>{getAuxTimerLabel(auxName.aux3, 'Aux 3')}</div>
           <div className='extra right'>{millisToString(auxTimer.aux3)}</div>
         </div>
       </div>

apps/server/src/api-data/settings/settings.router.ts

@@ -9,6 +9,7 @@ import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { portManager } from '../../classes/port-manager/PortManager.js';
 import * as appState from '../../services/app-state-service/AppStateService.js';
+import { auxTimerService } from '../../services/aux-timer-service/AuxTimerService.js';
 import { validateSettings, validateWelcomeDialog, validateServerPort } from './settings.validation.js';
 
 export const router: Router = express.Router();
@@ -41,6 +42,10 @@ router.post('/', validateSettings, async (req: Request, res: Response<Settings |
 
     if (!deepEqual(data, settings)) {
       await getDataProvider().setSettings(data);
+      // keep the runtime aux timers in sync so consumers get the new names live
+      if (!deepEqual(data.auxTimerNames, settings.auxTimerNames)) {
+        auxTimerService.loadNames(data.auxTimerNames);
+      }
       sendRefetch(RefetchKey.Settings);
     }
 

apps/server/src/app.ts

@@ -26,6 +26,7 @@ import { bodyParser } from './middleware/bodyParser.js';
 import { compressedStatic } from './middleware/staticGZip.js';
 import { ONTIME_VERSION } from './ONTIME_VERSION.js';
 import { getShowWelcomeDialog } from './services/app-state-service/AppStateService.js';
+import { auxTimerService } from './services/aux-timer-service/AuxTimerService.js';
 import * as messageService from './services/message-service/message.service.js';
 import { initialiseProject } from './services/project-service/ProjectService.js';
 import { restoreService } from './services/restore-service/restore.service.js';
@@ -204,6 +205,7 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
    * Module initialises the services and provides initial payload for the store
    */
   const state = getState();
+  const { auxTimerNames } = getDataProvider().getSettings();
   eventStore.init({
     clock: state.clock,
     timer: state.timer,
@@ -219,22 +221,28 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      name: auxTimerNames[0] ?? '',
     },
     auxtimer2: {
       duration: timerConfig.auxTimerDefault,
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      name: auxTimerNames[1] ?? '',
     },
     auxtimer3: {
       duration: timerConfig.auxTimerDefault,
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      name: auxTimerNames[2] ?? '',
     },
     ping: 1,
   });
 
+  // seed the aux timer names onto the running service so they persist across commands
+  auxTimerService.loadNames(auxTimerNames);
+
   // initialise message service
   messageService.init(eventStore.set, eventStore.get);
 

apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts

@@ -81,6 +81,7 @@ describe('safeMerge', () => {
       editorKey: null,
       timeFormat: baseDb.settings.timeFormat,
       language: 'pt',
+      auxTimerNames: baseDb.settings.auxTimerNames,
     });
   });
 

apps/server/src/classes/simple-timer/SimpleTimer.ts

@@ -6,6 +6,7 @@ export class SimpleTimer {
     current: 0,
     playback: SimplePlayback.Stop,
     direction: SimpleDirection.CountDown,
+    name: '',
   };
   private startedAt: number | null = null;
   private pausedAt: number | null = null;
@@ -23,9 +24,19 @@ export class SimpleTimer {
       current: 0,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      // the name is a persisted configuration, independent of the timer runtime
+      name: this.state.name,
     };
   }
 
+  /**
+   * Sets the custom name of the timer
+   */
+  public setName(name: string): SimpleTimerState {
+    this.state.name = name;
+    return this.state;
+  }
+
   /**
    * Sets the duration of the timer
    * @param time - time in milliseconds

apps/server/src/classes/simple-timer/__tests__/SimpleTimer.test.ts

@@ -16,6 +16,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Stop,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
     });
@@ -27,6 +28,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
     });
@@ -38,6 +40,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime - 100,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
 
@@ -58,6 +61,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime - 1500,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Pause,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
 
@@ -83,6 +87,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Stop,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
     });
@@ -97,6 +102,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       };
 
       newState = timer.update(100);
@@ -127,6 +133,7 @@ describe('SimpleTimer count-down', () => {
         current: 1000,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(100);
@@ -135,6 +142,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime + 100,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(500);
@@ -143,6 +151,7 @@ describe('SimpleTimer count-down', () => {
         current: 1500,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.setDirection(SimpleDirection.CountDown, 600);
@@ -151,6 +160,7 @@ describe('SimpleTimer count-down', () => {
         current: 1500,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(700);
@@ -159,6 +169,7 @@ describe('SimpleTimer count-down', () => {
         current: 1400,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.setDirection(SimpleDirection.CountUp, 700);
@@ -167,6 +178,7 @@ describe('SimpleTimer count-down', () => {
         current: 1400,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(800);
@@ -175,6 +187,7 @@ describe('SimpleTimer count-down', () => {
         current: 1500,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
     });
 

apps/server/src/services/aux-timer-service/AuxTimerService.ts

@@ -24,6 +24,20 @@ export class AuxTimerService {
     this.getTime = getTime;
   }
 
+  /**
+   * Applies custom names to the aux timers and broadcasts the change.
+   * Names are indexed by aux timer position (0 -> aux1, 1 -> aux2, 2 -> aux3).
+   * Used to seed the names at bootstrap and to keep them in sync with the settings.
+   */
+  loadNames(names: string[]) {
+    const patch: AuxTimerStateUpdate = {
+      auxtimer1: this.aux1.setName(names[0] ?? ''),
+      auxtimer2: this.aux2.setName(names[1] ?? ''),
+      auxtimer3: this.aux3.setName(names[2] ?? ''),
+    };
+    this.emit(patch);
+  }
+
   /**
    * Whether any of the aux timers are currently running
    */

apps/server/src/services/aux-timer-service/__tests__/AuxTimerService.test.ts

@@ -0,0 +1,41 @@
+import { RuntimeStore } from 'ontime-types';
+
+import { AuxTimerService } from '../AuxTimerService.js';
+
+describe('AuxTimerService', () => {
+  describe('loadNames()', () => {
+    it('applies the names to each aux timer and broadcasts them', () => {
+      const emit = vi.fn();
+      const service = new AuxTimerService(emit, () => 0);
+
+      service.loadNames(['Speaker', 'Break', 'Q&A']);
+
+      const patch = emit.mock.calls.at(-1)?.[0] as Partial<RuntimeStore>;
+      expect(patch.auxtimer1?.name).toBe('Speaker');
+      expect(patch.auxtimer2?.name).toBe('Break');
+      expect(patch.auxtimer3?.name).toBe('Q&A');
+    });
+
+    it('defaults missing names to an empty string', () => {
+      const emit = vi.fn();
+      const service = new AuxTimerService(emit, () => 0);
+
+      service.loadNames(['only-one']);
+
+      const patch = emit.mock.calls.at(-1)?.[0] as Partial<RuntimeStore>;
+      expect(patch.auxtimer1?.name).toBe('only-one');
+      expect(patch.auxtimer2?.name).toBe('');
+      expect(patch.auxtimer3?.name).toBe('');
+    });
+
+    it('keeps the name on the timer through subsequent commands', () => {
+      const emit = vi.fn();
+      const service = new AuxTimerService(emit, () => 0);
+
+      service.loadNames(['Speaker', '', '']);
+      const started = service.start(1);
+
+      expect(started.name).toBe('Speaker');
+    });
+  });
+});

packages/types/src/definitions/runtime/AuxTimer.type.ts

@@ -14,4 +14,6 @@ export type SimpleTimerState = {
   current: number;
   playback: SimplePlayback;
   direction: SimpleDirection;
+  /** Custom name for the aux timer. Empty string when unnamed */
+  name: string;
 };

packages/types/src/definitions/runtime/RuntimeStore.ts

@@ -53,18 +53,21 @@ export const runtimeStorePlaceholder: Readonly<RuntimeStore> = {
     direction: SimpleDirection.CountUp,
     duration: 0,
     playback: SimplePlayback.Stop,
+    name: '',
   },
   auxtimer2: {
     current: 0,
     direction: SimpleDirection.CountUp,
     duration: 0,
     playback: SimplePlayback.Stop,
+    name: '',
   },
   auxtimer3: {
     current: 0,
     direction: SimpleDirection.CountUp,
     duration: 0,
     playback: SimplePlayback.Stop,
+    name: '',
   },
   ping: 1,
 };