feat: count to group completion

docs(llm): request for useeffect documentation
feat(timer): playing sound on time end
2026-09-05 14:29:20 +00:00 · 2026-09-05 08:36:57 +02:00 · 2026-08-28 12:29:12 +02:00 · 2026-08-28 12:29:12 +02:00 · 2026-08-28 12:04:02 +02:00 · 2026-08-28 11:41:44 +02:00
80 changed files with 2088 additions and 725 deletions
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.12.0",
+  "version": "4.13.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "4.12.0",
+  "version": "4.13.0",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+
+import Button from './Button';
+
+type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
+  /** whether the option this button controls is currently on */
+  pressed: boolean;
+};
+
+/**
+ * A button which carries an on / off state.
+ *
+ * Keeps the pressed styling and the accessible state together, so that a toggle
+ * cannot end up looking active without also announcing that it is.
+ */
+export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
+  return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
+}
@@ -0,0 +1,81 @@
+import { Playback, RuntimeStore, TimerPhase, TimerType, runtimeStorePlaceholder } from 'ontime-types';
+
+import { resolveTimerDisplay } from '../useSocket.utils';
+
+const eventTimer = { ...runtimeStorePlaceholder.timer, current: 5_000 };
+const groupTimer = {
+  ...runtimeStorePlaceholder.timer,
+  current: 25_000,
+  phase: TimerPhase.Default,
+  playback: Playback.Play,
+};
+
+function makeState(patch: Partial<RuntimeStore> = {}): RuntimeStore {
+  return {
+    ...runtimeStorePlaceholder,
+    timer: eventTimer,
+    eventNow: {
+      id: 'event-1',
+      timerType: TimerType.CountUp,
+      countToEnd: true,
+    } as RuntimeStore['eventNow'],
+    ...patch,
+  };
+}
+
+describe('resolveTimerDisplay()', () => {
+  it('uses the event timer by default', () => {
+    expect(resolveTimerDisplay(makeState())).toMatchObject({
+      time: eventTimer,
+      timerType: TimerType.CountUp,
+      countToEnd: true,
+      usesGroupTimer: false,
+    });
+  });
+
+  it('uses the group timer and display type when enabled', () => {
+    const display = resolveTimerDisplay(
+      makeState({
+        groupNow: { useGroupTimer: true, timerType: TimerType.CountDown } as RuntimeStore['groupNow'],
+        groupTimer,
+      }),
+    );
+
+    expect(display).toMatchObject({
+      time: groupTimer,
+      timerType: TimerType.CountDown,
+      countToEnd: false,
+      usesGroupTimer: true,
+      eventTimer,
+      eventTimerType: TimerType.CountUp,
+    });
+  });
+
+  it('ignores a group timer when the group setting is disabled', () => {
+    const display = resolveTimerDisplay(
+      makeState({
+        groupNow: { useGroupTimer: false, timerType: TimerType.CountDown } as RuntimeStore['groupNow'],
+        groupTimer,
+      }),
+    );
+
+    expect(display.time).toBe(eventTimer);
+    expect(display.usesGroupTimer).toBe(false);
+  });
+
+  it('falls back entirely to the event display while group timer data is unavailable', () => {
+    const display = resolveTimerDisplay(
+      makeState({
+        groupNow: { useGroupTimer: true, timerType: TimerType.CountDown } as RuntimeStore['groupNow'],
+        groupTimer: null,
+      }),
+    );
+
+    expect(display).toMatchObject({
+      time: eventTimer,
+      timerType: TimerType.CountUp,
+      countToEnd: true,
+      usesGroupTimer: false,
+    });
+  });
+});
@@ -1,7 +1,8 @@
-import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage, TimerType } from 'ontime-types';
+import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';

 import { useRuntimeStore } from '../stores/runtime';
 import { sendSocket } from '../utils/socket';
+import { resolveTimerDisplay } from './useSocket.utils';

 const createSelector =
  <T>(selector: (state: RuntimeStore) => T) =>
@@ -22,14 +23,10 @@ export const useRundownEditor = createSelector((state: RuntimeStore) => ({
  nextEventId: state.eventNext?.id ?? null,
 }));

-export const useScreenControl = createSelector((state: RuntimeStore) => ({
+export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
  blackout: state.message.timer.blackout,
  blink: state.message.timer.blink,
-  isScreenModified:
-    state.message.timer.visible ||
-    state.message.timer.blink ||
-    state.message.timer.blackout ||
-    state.message.timer.secondarySource !== null,
+  secondarySource: state.message.timer.secondarySource,
 }));

 export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
@@ -37,30 +34,33 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
  visible: state.message.timer.visible,
 }));

-export const useSecondaryMessageInput = createSelector((state: RuntimeStore) => ({
+export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
  text: state.message.secondary,
-  source: state.message.timer.secondarySource,
+  visible: state.message.timer.secondarySource === 'secondary',
 }));

-export const useTimerStatus = createSelector((state: RuntimeStore) => ({
-  timerType: state.eventNow?.timerType ?? null,
-  countToEnd: state.eventNow?.countToEnd ?? false,
-}));
+export const useMessagePreview = createSelector((state: RuntimeStore) => {
+  const timerDisplay = resolveTimerDisplay(state);
+  return {
+    blink: state.message.timer.blink,
+    blackout: state.message.timer.blackout,
+    phase: timerDisplay.time.phase,
+    secondarySource: state.message.timer.secondarySource,
+    showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
+    timerType: timerDisplay.timerType,
+    countToEnd: timerDisplay.countToEnd,
+    usesGroupTimer: timerDisplay.usesGroupTimer,
+  };
+});

 export const setMessage = {
  timerText: (payload: string) => sendSocket('message', { timer: { text: payload } }),
  timerVisible: (payload: boolean) => sendSocket('message', { timer: { visible: payload } }),
  secondaryMessage: (payload: string) => sendSocket('message', { secondary: payload }),
-  // blink and blackout are mutually exclusive stage states, so turning one on turns the other off
-  timerBlink: (payload: boolean) =>
-    sendSocket('message', payload ? { timer: { blink: true, blackout: false } } : { timer: { blink: false } }),
-  timerBlackout: (payload: boolean) =>
-    sendSocket('message', payload ? { timer: { blackout: true, blink: false } } : { timer: { blackout: false } }),
+  timerBlink: (payload: boolean) => sendSocket('message', { timer: { blink: payload } }),
+  timerBlackout: (payload: boolean) => sendSocket('message', { timer: { blackout: payload } }),
  timerSecondarySource: (payload: TimerMessage['secondarySource']) =>
    sendSocket('message', { timer: { secondarySource: payload } }),
-  /** returns the stage to a plain timer, keeping whatever the operator has typed */
-  clearScreen: () =>
-    sendSocket('message', { timer: { visible: false, blink: false, blackout: false, secondarySource: null } }),
 };

 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
@@ -235,20 +235,26 @@ export const useFlagTimerOverView = createSelector((state: RuntimeStore) => ({

 /* ======================= View specific subscriptions ======================= */

-export const useTimerSocket = createSelector((state: RuntimeStore) => ({
-  eventNext: state.eventNext,
-  eventNow: state.eventNow,
-  message: state.message,
-  time: state.timer,
-  clock: state.clock,
-  timerTypeNow: state.eventNow?.timerType ?? TimerType.CountDown,
-  countToEndNow: state.eventNow?.countToEnd ?? false,
-  auxTimer: {
-    aux1: state.auxtimer1.current,
-    aux2: state.auxtimer2.current,
-    aux3: state.auxtimer3.current,
-  },
-}));
+export const useTimerSocket = createSelector((state: RuntimeStore) => {
+  const timerDisplay = resolveTimerDisplay(state);
+  return {
+    eventNext: state.eventNext,
+    eventNow: state.eventNow,
+    message: state.message,
+    time: timerDisplay.time,
+    eventTimer: timerDisplay.eventTimer,
+    clock: state.clock,
+    timerTypeNow: timerDisplay.timerType,
+    eventTimerType: timerDisplay.eventTimerType,
+    countToEndNow: timerDisplay.countToEnd,
+    usesGroupTimer: timerDisplay.usesGroupTimer,
+    auxTimer: {
+      aux1: state.auxtimer1.current,
+      aux2: state.auxtimer2.current,
+      aux3: state.auxtimer3.current,
+    },
+  };
+});

 export const useCountdownSocket = createSelector((state: RuntimeStore) => ({
  playback: state.timer.playback,
@@ -0,0 +1,27 @@
+import { RuntimeStore, TimerType } from 'ontime-types';
+
+type TimerDisplaySource = Pick<RuntimeStore, 'eventNow' | 'groupNow' | 'groupTimer' | 'timer'>;
+
+export function resolveTimerDisplay(state: TimerDisplaySource) {
+  const eventTimerType = state.eventNow?.timerType ?? TimerType.CountDown;
+
+  if (state.groupNow?.useGroupTimer === true && state.groupTimer !== null) {
+    return {
+      time: state.groupTimer,
+      timerType: state.groupNow.timerType,
+      countToEnd: false,
+      usesGroupTimer: true,
+      eventTimer: state.timer,
+      eventTimerType,
+    };
+  }
+
+  return {
+    time: state.timer,
+    timerType: eventTimerType,
+    countToEnd: state.eventNow?.countToEnd ?? false,
+    usesGroupTimer: false,
+    eventTimer: state.timer,
+    eventTimerType,
+  };
+}
@@ -1,6 +1,6 @@
-import { OntimeDelay, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
+import { OntimeDelay, OntimeEvent, OntimeGroup, SupportedEntry, TimerType } from 'ontime-types';

-import { initRundownMetadata } from '../rundownMetadata';
+import { getFlatRundownMetadata, initRundownMetadata } from '../rundownMetadata';

 describe('initRundownMetadata()', () => {
  it('processes nested rundown data', () => {
@@ -300,3 +300,36 @@ describe('initRundownMetadata()', () => {
    });
  });
 });
+
+describe('getFlatRundownMetadata()', () => {
+  it('exposes group timer settings on a group and its events', () => {
+    const group = {
+      id: 'group',
+      type: SupportedEntry.Group,
+      entries: ['event'],
+      colour: 'red',
+      useGroupTimer: true,
+      timerType: TimerType.CountUp,
+    } as OntimeGroup;
+    const event = {
+      id: 'event',
+      type: SupportedEntry.Event,
+      parent: group.id,
+      timeStart: 0,
+      timeEnd: 1,
+      duration: 1,
+      dayOffset: 0,
+      gap: 0,
+      skip: false,
+      linkStart: false,
+    } as OntimeEvent;
+
+    const flat = getFlatRundownMetadata(
+      { entries: { [group.id]: group, [event.id]: event }, flatOrder: [group.id, event.id] },
+      null,
+    );
+
+    expect(flat[0]).toMatchObject({ groupUsesTimer: true, groupTimerType: TimerType.CountUp });
+    expect(flat[1]).toMatchObject({ groupUsesTimer: true, groupTimerType: TimerType.CountUp });
+  });
+});
@@ -3,9 +3,11 @@ import {
  OntimeDelay,
  OntimeEntry,
  OntimeEvent,
+  OntimeGroup,
  OntimeMilestone,
  PlayableEvent,
  Rundown,
+  TimerType,
  isOntimeEvent,
  isOntimeGroup,
  isPlayableEvent,
@@ -29,7 +31,11 @@ export type RundownMetadata = {
  isFirstAfterGroup: boolean;
 };

-export type ExtendedEntry<T extends OntimeEntry = OntimeEntry> = T & RundownMetadata;
+export type ExtendedEntry<T extends OntimeEntry = OntimeEntry> = T &
+  RundownMetadata & {
+    groupUsesTimer?: boolean;
+    groupTimerType?: TimerType;
+  };

 export const lastMetadataKey = 'LAST';

@@ -65,10 +71,23 @@ export function getFlatRundownMetadata(
 ): ExtendedEntry[] {
  const { process } = initRundownMetadata(selectedEventId);
  const flatRundown: ExtendedEntry[] = [];
+  let activeGroup: OntimeGroup | null = null;

  for (const id of data.flatOrder) {
    const entry = data.entries[id];
-    const extendedEntry = { ...entry, ...process(entry) };
+    if (isOntimeGroup(entry)) {
+      activeGroup = entry;
+    } else if (entry.parent !== activeGroup?.id) {
+      activeGroup = null;
+    }
+
+    const timerGroup = isOntimeGroup(entry) ? entry : activeGroup;
+    const extendedEntry = {
+      ...entry,
+      ...process(entry),
+      groupUsesTimer: timerGroup?.useGroupTimer ?? false,
+      groupTimerType: timerGroup?.timerType,
+    };
    flatRundown.push(extendedEntry);
  }

@@ -2,12 +2,14 @@
  display: grid;
  grid-template-columns: 1fr auto;
  gap: $element-spacing;
+  margin-top: $element-inner-spacing;
+}

-  &.withSource {
-    grid-template-columns: auto 1fr auto;
+.label {
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+
+  &.active {
+    color: $action-text-color;
  }
 }
-
-.label.active {
-  color: $action-text-color;
-}
@@ -1,6 +1,5 @@
-import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, useEffect, useRef, useState } from 'react';

-import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import Input from '../../../common/components/input/input/Input';
 import { cx } from '../../../common/utils/styleUtils';

@@ -10,15 +9,12 @@ interface InputRowProps {
  label: string;
  placeholder: string;
  text: string;
-  /** whether this text is currently on the audience screen */
  visible: boolean;
  changeHandler: (newValue: string) => void;
-  /** control which picks where the text is shown, rendered before the input */
-  sourcePicker?: ReactNode;
 }

 export default function InputRow(props: PropsWithChildren<InputRowProps>) {
-  const { label, placeholder, text, visible, changeHandler, sourcePicker, children } = props;
+  const { label, placeholder, text, visible, changeHandler, children } = props;

  const [value, setValue] = useState(text);
  const inputRef = useRef<HTMLInputElement>(null);
@@ -47,11 +43,10 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {

  return (
    <div>
-      <Editor.Label className={cx([style.label, visible && style.active])} htmlFor={label}>
+      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
        {label}
-      </Editor.Label>
-      <div className={cx([style.inputItems, sourcePicker && style.withSource])}>
-        {sourcePicker}
+      </label>
+      <div className={style.inputItems}>
        <Input id={label} ref={inputRef} value={value} onChange={handleInputChange} placeholder={placeholder} />
        {children}
      </div>
@@ -1,17 +0,0 @@
-/* the screen state buttons belong with the preview they act on, not with the message inputs.
-   buttons sit in a column to the right of the stage by default; once the container narrows
-   too far for that (e.g. an extracted window resized narrow), they drop into a row below it.
-   the group is sized by its content, not stretched - the preview keeps a fixed shape rather
-   than growing to whatever height the panel happens to have free */
-.screenGroup {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: start;
-  gap: $element-spacing;
-}
-
-@container (max-width: 22rem) {
-  .screenGroup {
-    grid-template-columns: 1fr;
-  }
-}
@@ -1,22 +1,18 @@
-import { SecondarySource } from 'ontime-types';
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';

 import IconButton from '../../../common/components/buttons/IconButton';
-import Select from '../../../common/components/select/Select';
-import { setMessage, useSecondaryMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
+import {
+  setMessage,
+  useExternalMessageInput as useSecondaryMessageInput,
+  useTimerMessageInput,
+} from '../../../common/hooks/useSocket';
 import InputRow from './InputRow';
-import ScreenControl from './ScreenControl';
-import TimerPreview from './TimerPreview';
-
-import style from './MessageControl.module.scss';
+import TimerControlsPreview from './TimerViewControl';

 export default function MessageControl() {
  return (
    <>
-      <div className={style.screenGroup}>
-        <TimerPreview />
-        <ScreenControl />
-      </div>
+      <TimerControlsPreview />
      <TimerMessageInput />
      <SecondaryInput />
    </>
@@ -28,7 +24,7 @@ function TimerMessageInput() {

  return (
    <InputRow
-      label='Timer message'
+      label='Timer Message'
      placeholder='Message shown fullscreen in stage timer'
      text={text}
      visible={visible}
@@ -36,7 +32,6 @@ function TimerMessageInput() {
    >
      <IconButton
        aria-label='Toggle timer message visibility'
-        aria-pressed={visible}
        onClick={() => setMessage.timerVisible(!visible)}
        variant={visible ? 'primary' : 'subtle'}
      >
@@ -46,46 +41,31 @@ function TimerMessageInput() {
  );
 }

-/**
- * The secondary line of the stage timer shows one of the aux timers or the secondary message.
- * The select owns which one, the eye owns whether the line is shown at all.
- */
 function SecondaryInput() {
-  const { text, source } = useSecondaryMessageInput();
-  const isShowingSecondaryLine = source !== null;
-  const selectedSource = source ?? 'aux1';
+  const { text, visible } = useSecondaryMessageInput();
+
+  const toggleSecondary = () => {
+    if (visible) {
+      setMessage.timerSecondarySource(null);
+    } else {
+      setMessage.timerSecondarySource('secondary');
+    }
+  };

  return (
    <InputRow
-      label='Secondary'
+      label='Secondary Message'
      placeholder='Message shown as secondary text in stage timer'
      text={text}
-      visible={source === 'secondary'}
+      visible={visible}
      changeHandler={(newValue) => setMessage.secondaryMessage(newValue)}
-      sourcePicker={
-        <Select
-          value={selectedSource}
-          options={[
-            { value: 'aux1', label: 'Aux 1' },
-            { value: 'aux2', label: 'Aux 2' },
-            { value: 'aux3', label: 'Aux 3' },
-            { value: 'secondary', label: 'Message' },
-          ]}
-          onValueChange={(value: SecondarySource | null) => {
-            if (value === null) return;
-            setMessage.timerSecondarySource(value);
-          }}
-        />
-      }
    >
      <IconButton
-        aria-label='Toggle secondary visibility'
-        aria-pressed={isShowingSecondaryLine}
-        onClick={() => setMessage.timerSecondarySource(isShowingSecondaryLine ? null : selectedSource)}
-        variant={isShowingSecondaryLine ? 'primary' : 'subtle'}
-        data-testid='toggle secondary'
+        aria-label='Toggle secondary message visibility'
+        onClick={toggleSecondary}
+        variant={visible ? 'primary' : 'subtle'}
      >
-        {isShowingSecondaryLine ? <IoEye /> : <IoEyeOffOutline />}
+        {visible ? <IoEye /> : <IoEyeOffOutline />}
      </IconButton>
    </InputRow>
  );
@@ -1,21 +1,8 @@
 .growPanel {
  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* the extracted route has no flex parent to grow into */
-.extractedPanel {
-  height: 100%;
 }

 .contentLayout {
-  flex: 1;
-  min-height: 0;
-  container-type: inline-size;
-
  display: flex;
  flex-direction: column;
  gap: $section-spacing;
@@ -5,7 +5,6 @@ import ErrorBoundary from '../../../common/components/error-boundary/ErrorBounda
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
-import { cx } from '../../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../../externals';
 import MessageControl from './MessageControl';

@@ -17,10 +16,7 @@ function MessageControlExport() {

  return (
    <ProtectRoute permission='editor'>
-      <Editor.Panel
-        className={cx([style.growPanel, isExtracted && style.extractedPanel])}
-        data-testid='panel-messages-control'
-      >
+      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
        {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}

@@ -1,14 +0,0 @@
-.screenControl {
-  display: grid;
-  grid-auto-flow: row;
-  gap: $element-spacing;
-  width: 8rem;
-}
-
-@container (max-width: 22rem) {
-  .screenControl {
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-    width: 100%;
-  }
-}
@@ -1,40 +0,0 @@
-import Button from '../../../common/components/buttons/Button';
-import { setMessage, useScreenControl } from '../../../common/hooks/useSocket';
-
-import style from './ScreenControl.module.scss';
-
-export default function ScreenControl() {
-  const { blackout, blink, isScreenModified } = useScreenControl();
-
-  return (
-    <div className={style.screenControl}>
-      <Button
-        variant={blink ? 'primary' : 'subtle'}
-        aria-pressed={blink}
-        fluid
-        onClick={() => setMessage.timerBlink(!blink)}
-        data-testid='toggle timer blink'
-      >
-        Blink
-      </Button>
-      <Button
-        variant={blackout ? 'destructive' : 'subtle'}
-        aria-pressed={blackout}
-        fluid
-        onClick={() => setMessage.timerBlackout(!blackout)}
-        data-testid='toggle timer blackout'
-      >
-        Blackout
-      </Button>
-      <Button
-        variant='subtle'
-        fluid
-        disabled={!isScreenModified}
-        onClick={() => setMessage.clearScreen()}
-        data-testid='clear screen'
-      >
-        Clear screen
-      </Button>
-    </div>
-  );
-}
@@ -1,26 +1,56 @@
-/* fixed shape, not stretched to whatever height the panel has free - it fills the
-   available width and keeps a 16:9 proportion, which is also what the font size
-   estimate in the embedded timer assumes */
-.stage {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  min-width: 0;
+.preview {
+  background-color: $ui-black;
+  display: grid;
+  place-content: center;
+  text-align: center;
  position: relative;
-  /* a query container so that the embedded timer scales to the preview, not to the viewport */
-  container-type: size;
-  contain: paint;
-  overflow: hidden;
-  border-radius: $component-border-radius-md;
 }

-/* editor chrome sits above the blackout and message overlays, so it stays reachable and readable */
-.stageChrome {
-  position: absolute;
-  inset: 0;
-  z-index: calc($zindex-floating + 2);
-  pointer-events: none;
+.mainContent {
+  font-size: 1rem;
+  font-weight: 600;
+  width: 100%;
+  color: var(--override-colour, $ui-white);

-  > * {
-    pointer-events: auto;
+  &[data-phase='pending'] {
+    color: $ontime-roll;
+  }
+  &[data-phase='overtime'] {
+    color: $playback-negative;
+  }
+  &[data-phase='none'] {
+    opacity: $opacity-disabled;
+  }
+}
+
+.secondaryContent {
+  border-top: 1px solid $white-7;
+}
+
+.timerSource {
+  color: $active-indicator;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.blackout {
+  display: none;
+}
+
+.eventStatus {
+  position: absolute;
+  left: 0;
+  margin: 0.5rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.statusIcon {
+  color: $gray-1000;
+
+  &[data-active='true'] {
+    color: $active-indicator;
  }
 }
@@ -1,21 +1,122 @@
+import { TimerPhase, TimerType } from 'ontime-types';
+import { IoArrowDown, IoArrowUp, IoBan, IoTime, IoTimerOutline } from 'react-icons/io5';
+import { LuArrowDownToLine } from 'react-icons/lu';
+
 import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
+import Tooltip from '../../../common/components/tooltip/Tooltip';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
+import { useMessagePreview } from '../../../common/hooks/useSocket';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import PipRoot from '../../../views/editor/pip-timer/PipRoot';
-import { PipTimer } from '../../../views/editor/pip-timer/PipTimer';
-import TimerStatus from './TimerStatus';

 import style from './TimerPreview.module.scss';

+const secondarySourceLabels: Record<string, string> = {
+  aux1: 'Aux 1',
+  aux2: 'Aux 2',
+  aux3: 'Aux 3',
+  secondary: 'Secondary message',
+};
+
 export default function TimerPreview() {
+  const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType, usesGroupTimer } =
+    useMessagePreview();
  const { data } = useViewSettings();

+  const main = (() => {
+    if (showTimerMessage) return 'Message';
+    if (timerType === TimerType.None) return timerPlaceholder;
+    if (phase === TimerPhase.Pending) return 'Standby to start';
+    if (phase === TimerPhase.Overtime) return 'Timer Overtime';
+    if (timerType === TimerType.Clock) return 'Clock';
+    if (countToEnd) return 'Count to End';
+    return 'Timer';
+  })();
+
+  const secondary = (() => {
+    // message is a fullscreen overlay or secondary is not active
+    if (showTimerMessage) return null;
+    if (usesGroupTimer) return 'Event timer';
+    if (!secondarySource) return null;
+
+    // we need to check aux first since it takes priority
+    return secondarySourceLabels[secondarySource];
+  })();
+
+  const overrideColour = (() => {
+    // override fallback colours from starter project
+    if (phase === TimerPhase.Warning) return data.warningColor ?? '#ffa528';
+    if (phase === TimerPhase.Danger) return data.dangerColor ?? '#ff7300';
+    return data.normalColor ?? '#FFFC';
+  })();
+
+  const showColourOverride = main == 'Timer';
+  const contentClasses = cx([blink && style.blink, blackout && style.blackout]);
+
  return (
-    <div className={style.stage}>
-      <PipTimer viewSettings={data} />
-      <div className={style.stageChrome}>
-        <TimerStatus />
-        <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
+    <div className={style.preview}>
+      <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
+      <div className={contentClasses}>
+        {usesGroupTimer && <div className={style.timerSource}>Group timer</div>}
+        <div
+          className={style.mainContent}
+          data-phase={showColourOverride && phase}
+          style={showColourOverride ? { '--override-colour': overrideColour } : {}}
+        >
+          {main}
+        </div>
+        {secondary !== null && <div className={style.secondaryContent}>{secondary}</div>}
+      </div>
+      <div className={style.eventStatus}>
+        <Tooltip
+          text='Timer display controlled by group'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={usesGroupTimer}
+        >
+          <IoTimerOutline />
+        </Tooltip>
+        <Tooltip
+          text='Time type: Count down'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.CountDown}
+        >
+          <IoArrowDown />
+        </Tooltip>
+        <Tooltip
+          text='Time type: Count up'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.CountUp}
+        >
+          <IoArrowUp />
+        </Tooltip>
+        <Tooltip
+          text='Time type: Clock'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.Clock}
+        >
+          <IoTime />
+        </Tooltip>
+        <Tooltip
+          text='Time type: None'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.None}
+        >
+          <IoBan />
+        </Tooltip>
+        <Tooltip
+          text={countToEnd ? 'Count to end' : 'Count duration'}
+          render={<span />}
+          className={style.statusIcon}
+          data-active={countToEnd}
+        >
+          <LuArrowDownToLine />
+        </Tooltip>
      </div>
    </div>
  );
@@ -1,17 +0,0 @@
-.timerStatus {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 0.5rem 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.statusIcon {
-  color: $gray-1000;
-
-  &[data-active='true'] {
-    color: $active-indicator;
-  }
-}
@@ -1,58 +0,0 @@
-import { TimerType } from 'ontime-types';
-import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
-import { LuArrowDownToLine } from 'react-icons/lu';
-
-import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useTimerStatus } from '../../../common/hooks/useSocket';
-
-import style from './TimerStatus.module.scss';
-
-/** Read only summary of how the loaded event drives the stage timer */
-export default function TimerStatus() {
-  const { countToEnd, timerType } = useTimerStatus();
-
-  return (
-    <div className={style.timerStatus}>
-      <Tooltip
-        text='Time type: Count down'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.CountDown}
-      >
-        <IoArrowDown />
-      </Tooltip>
-      <Tooltip
-        text='Time type: Count up'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.CountUp}
-      >
-        <IoArrowUp />
-      </Tooltip>
-      <Tooltip
-        text='Time type: Clock'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.Clock}
-      >
-        <IoTime />
-      </Tooltip>
-      <Tooltip
-        text='Time type: None'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.None}
-      >
-        <IoBan />
-      </Tooltip>
-      <Tooltip
-        text={countToEnd ? 'Count to end' : 'Count duration'}
-        render={<span />}
-        className={style.statusIcon}
-        data-active={countToEnd}
-      >
-        <LuArrowDownToLine />
-      </Tooltip>
-    </div>
-  );
-}
@@ -0,0 +1,11 @@
+.previewContainer {
+  display: grid;
+  gap: $element-spacing;
+  grid-template-columns: 3fr 2fr;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: $element-spacing;
+}
@@ -0,0 +1,92 @@
+import { SecondarySource } from 'ontime-types';
+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 { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
+import TimerPreview from './TimerPreview';
+
+import style from './TimerViewControl.module.scss';
+
+export default function TimerControlsPreview() {
+  const { blackout, blink } = useTimerViewControl();
+
+  return (
+    <div className={style.previewContainer}>
+      <TimerPreview />
+      <div className={style.options}>
+        <SecondarySourceControl />
+
+        <Editor.Separator orientation='horizontal' />
+
+        <Button
+          variant={blink ? 'primary' : 'subtle'}
+          fluid
+          onClick={() => setMessage.timerBlink(!blink)}
+          data-testid='toggle timer blink'
+        >
+          Blink
+        </Button>
+        <Button
+          variant={blackout ? 'primary' : 'subtle'}
+          fluid
+          onClick={() => setMessage.timerBlackout(!blackout)}
+          data-testid='toggle timer blackout'
+        >
+          Blackout screen
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function SecondarySourceControl() {
+  const { secondarySource } = useTimerViewControl();
+  const [value, setValue] = useState<SecondarySource>('aux1');
+
+  // sync secondary source with external changes
+  useEffect(() => {
+    if (secondarySource !== null) {
+      setValue(secondarySource);
+    }
+  }, [secondarySource]);
+
+  const toggleSecondary = () => {
+    if (secondarySource === value) {
+      setMessage.timerSecondarySource(null);
+    } else {
+      setMessage.timerSecondarySource(value);
+    }
+  };
+
+  return (
+    <>
+      <Select
+        value={value}
+        options={[
+          { value: 'aux1', label: 'Aux 1' },
+          { value: 'aux2', label: 'Aux 2' },
+          { value: 'aux3', label: 'Aux 3' },
+          { value: 'secondary', label: 'Secondary message' },
+        ]}
+        onValueChange={(value: SecondarySource | null) => {
+          if (value === null) return;
+          // we can only update the remote if it is enabled
+          if (secondarySource !== null) {
+            setMessage.timerSecondarySource(value);
+          }
+          setValue(value);
+        }}
+      />
+      <Button
+        variant={secondarySource !== null ? 'primary' : 'subtle'}
+        fluid
+        onClick={toggleSecondary}
+        data-testid='toggle secondary'
+      >
+        Show secondary
+      </Button>
+    </>
+  );
+}
@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
 import { IoClose } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
+import ToggleButton from '../../common/components/buttons/ToggleButton';
 import { clearLogs, useLogData } from '../../common/stores/logger';
 import { cx } from '../../common/utils/styleUtils';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
@@ -55,72 +56,60 @@ export default function Log() {
    <div className={cx([style.container, isExtracted && style.extracted])}>
      <Panel.InlineElements className={style.buttonBar}>
        <span className={style.filterLabel}>Filter by</span>
-        <Button
-          variant={showUser ? 'primary' : 'subtle'}
+        <ToggleButton
+          pressed={showUser}
          size='small'
-          aria-pressed={showUser}
-          aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
          onClick={() => setShowUser((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.User)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.User}
-        </Button>
-        <Button
-          variant={showClient ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showClient}
          size='small'
-          aria-pressed={showClient}
-          aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
          onClick={() => setShowClient((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Client)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Client}
-        </Button>
-        <Button
-          variant={showServer ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showServer}
          size='small'
-          aria-pressed={showServer}
-          aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
          onClick={() => setShowServer((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Server)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Server}
-        </Button>
-        <Button
-          variant={showPlayback ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showPlayback}
          size='small'
-          aria-pressed={showPlayback}
-          aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
          onClick={() => setShowPlayback((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Playback)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Playback}
-        </Button>
-        <Button
-          variant={showRx ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showRx}
          size='small'
-          aria-pressed={showRx}
-          aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
          onClick={() => setShowRx((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Rx)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Rx}
-        </Button>
-        <Button
-          variant={showTx ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showTx}
          size='small'
-          aria-pressed={showTx}
-          aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
          onClick={() => setShowTx((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Tx)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Tx}
-        </Button>
+        </ToggleButton>
        <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
          <IoClose /> Clear
        </Button>
@@ -32,6 +32,12 @@
  gap: 1rem;
 }

+.timerDisplaySettings {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .column {
  display: flex;
  flex-direction: column;
@@ -1,10 +1,12 @@
-import { MaybeNumber, OntimeGroup } from 'ontime-types';
+import { MaybeNumber, OntimeGroup, TimerType } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 import { useCallback } from 'react';

 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import SwatchSelect from '../../../common/components/input/colour-input/SwatchSelect';
 import AppLink from '../../../common/components/link/app-link/AppLink';
+import Select from '../../../common/components/select/Select';
+import Switch from '../../../common/components/switch/Switch';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { getOffsetState } from '../../../common/utils/offset';
@@ -107,6 +109,38 @@ export default function GroupEditor({ group }: GroupEditorProps) {
        <EventTextArea field='note' label='Note' initialValue={group.note} submitHandler={handleSubmit} />
      </div>

+      <div className={style.column}>
+        <Editor.Title>Timer display</Editor.Title>
+        <div className={style.timerDisplaySettings}>
+          <div>
+            <Editor.Label htmlFor='useGroupTimer'>Use group timer</Editor.Label>
+            <Editor.Label className={style.switchLabel}>
+              <Switch
+                id='useGroupTimer'
+                checked={group.useGroupTimer}
+                onCheckedChange={(useGroupTimer) => updateEntry({ id: group.id, useGroupTimer })}
+              />
+              {group.useGroupTimer ? 'On' : 'Off'}
+            </Editor.Label>
+          </div>
+          <div>
+            <Editor.Label htmlFor='groupTimerType'>Timer type</Editor.Label>
+            <Select
+              id='groupTimerType'
+              disabled={!group.useGroupTimer}
+              value={group.timerType}
+              onValueChange={(timerType: TimerType | null) => {
+                if (timerType !== null) updateEntry({ id: group.id, timerType });
+              }}
+              options={[
+                { value: TimerType.CountDown, label: 'Count down' },
+                { value: TimerType.CountUp, label: 'Count up' },
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+
      <div className={style.column}>
        <Editor.Title>
          Custom Fields
@@ -8,10 +8,16 @@ export default memo(FinderPlacement);
 function FinderPlacement() {
  const [isOpen, handler] = useDisclosure();

-  useHotkeys([
-    ['mod + f', handler.toggle, { preventDefault: true }],
-    ['Escape', handler.close, { preventDefault: true }],
-  ]);
+  /**
+   * The empty tagsToIgnore is significant: by default the hook skips input elements,
+   * which would make the shortcut dead while editing an entry.
+   *
+   * This opens rather than toggles. Toggling on a key that also mounts and unmounts the
+   * dialog races against it, and browsers treat a repeated find shortcut as "focus the
+   * search again" rather than "close it". The finder selects its input instead, and
+   * Escape closes.
+   */
+  useHotkeys([['mod + f', handler.open, { preventDefault: true }]], []);

  if (isOpen) {
    return <Finder isOpen={isOpen} onClose={handler.close} />;
@@ -312,6 +312,7 @@ export default function RundownEvent({
      onClick={handleFocusClick}
      onContextMenu={onContextMenu}
      data-testid='rundown-event'
+      data-selected={isSelected}
      {...(isPlaying ? { 'data-running': true } : {})}
    >
      <RundownIndicators timeStart={timeStart} delay={delay} gap={gap} isNextDay={isNextDay} />
@@ -334,6 +335,7 @@ export default function RundownEvent({
        eventIndex={eventIndex}
        endAction={endAction}
        timerType={timerType}
+        groupTimerType={parentGroup?.useGroupTimer ? parentGroup.timerType : undefined}
        title={title}
        note={note}
        delay={delay}
@@ -9,6 +9,7 @@ import {
  IoPlayForward,
  IoPlaySkipForward,
  IoTime,
+  IoTimerOutline,
 } from 'react-icons/io5';
 import { LuArrowDownToLine } from 'react-icons/lu';

@@ -35,6 +36,7 @@ interface RundownEventInnerProps {
  eventIndex: number;
  endAction: EndAction;
  timerType: TimerType;
+  groupTimerType?: TimerType;
  title: string;
  note: string;
  delay: number;
@@ -62,6 +64,7 @@ function RundownEventInner({
  countToEnd,
  endAction,
  timerType,
+  groupTimerType,
  title,
  note,
  delay,
@@ -150,6 +153,14 @@ function RundownEventInner({
          {loaded && <EventBlockProgressBar />}
        </div>
        <div className={style.eventStatus} tabIndex={-1}>
+          {groupTimerType && (
+            <Tooltip
+              text={`Timer display controlled by group (${groupTimerType === TimerType.CountUp ? 'count up' : 'count down'})`}
+              render={<span />}
+            >
+              <IoTimerOutline className={cx([style.statusIcon, style.active])} />
+            </Tooltip>
+          )}
          <Tooltip text={`Time type: ${timerType}`} render={<span />}>
            <TimerIcon type={timerType} className={style.statusIcon} />
          </Tooltip>
@@ -55,6 +55,14 @@
    gap: 0.5rem;
  }

+  .timerIndicator {
+    display: grid;
+    flex: 0 0 1.5rem;
+    place-items: center;
+    color: $active-indicator;
+    font-size: 1rem;
+  }
+
  .metaRow {
    display: flex;
    gap: $block-clearance; // same as RundownEvent.eventTimers
@@ -1,6 +1,6 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { EntryId, OntimeGroup } from 'ontime-types';
+import { EntryId, OntimeGroup, TimerType } from 'ontime-types';
 import { MILLIS_PER_MINUTE } from 'ontime-utils';
 import { MouseEvent, useCallback, useRef } from 'react';
 import {
@@ -9,6 +9,7 @@ import {
  IoDuplicateOutline,
  IoFolderOpenOutline,
  IoReorderTwo,
+  IoTimerOutline,
  IoTrash,
  IoLockClosed,
 } from 'react-icons/io5';
@@ -174,6 +175,14 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
      <div className={style.header}>
        <div className={style.titleRow}>
          <TitleEditor title={data.title} entryId={data.id} placeholder='Group title' />
+          {data.useGroupTimer && (
+            <Tooltip
+              text={`Group timer (${data.timerType === TimerType.CountUp ? 'count up' : 'count down'})`}
+              render={<span className={style.timerIndicator} />}
+            >
+              <IoTimerOutline />
+            </Tooltip>
+          )}
          <IconButton aria-label='Collapse' variant='subtle-white' onClick={() => onCollapse(!collapsed, data.id)}>
            {collapsed ? <IoChevronUp /> : <IoChevronDown />}
          </IconButton>
@@ -0,0 +1,13 @@
+.timerOverrideCell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 1.5rem;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.timerOverrideIndicator {
+  display: grid;
+  place-items: center;
+  color: $active-indicator;
+  font-size: 1rem;
+}
@@ -1,8 +1,18 @@
-import { CustomFields, TimeStrategy, URLPreset, isOntimeDelay, isOntimeEvent } from 'ontime-types';
+import {
+  CustomFields,
+  TimeStrategy,
+  TimerType,
+  URLPreset,
+  isOntimeDelay,
+  isOntimeEvent,
+  isOntimeGroup,
+} from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 import { useCallback } from 'react';
+import { IoTimerOutline } from 'react-icons/io5';

 import DelayIndicator from '../../../../common/components/delay-indicator/DelayIndicator';
+import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { formatDuration, formatTime } from '../../../../common/utils/time';
 import { AppMode } from '../../../../ontimeConfig';
@@ -17,6 +27,8 @@ import MutedText from './MutedText';
 import SingleLineCell from './SingleLineCell';
 import TimeInput from './TimeInput';

+import style from './cuesheetColsFactory.module.scss';
+
 function getColumnLabel(column: CuesheetCellContext['column']): string {
  return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 }
@@ -193,17 +205,38 @@ function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
  }

  const canWrite = column.columnDef.meta?.canWrite;
-  if (!canWrite) {
-    return <GhostedText>{initialValue}</GhostedText>;
-  }
-
-  return (
+  const content = canWrite ? (
    <SingleLineCell
      initialValue={initialValue as string}
      fieldId={column.id}
      fieldLabel={getColumnLabel(column)}
      handleUpdate={update}
    />
+  ) : (
+    <GhostedText>{initialValue}</GhostedText>
+  );
+
+  if (column.id !== 'title') {
+    return content;
+  }
+
+  const isGroupOverride = isOntimeGroup(row.original) && row.original.useGroupTimer;
+  const isEventOverride = isOntimeEvent(row.original) && row.original.groupUsesTimer;
+  if (!isGroupOverride && !isEventOverride) {
+    return content;
+  }
+
+  const timerType = isOntimeGroup(row.original) ? row.original.timerType : row.original.groupTimerType;
+  const direction = timerType === TimerType.CountUp ? 'count up' : 'count down';
+  const tooltip = isGroupOverride ? `Group timer (${direction})` : `Timer display controlled by group (${direction})`;
+
+  return (
+    <div className={style.timerOverrideCell}>
+      {content}
+      <Tooltip text={tooltip} render={<span className={style.timerOverrideIndicator} />}>
+        <IoTimerOutline />
+      </Tooltip>
+    </div>
  );
 }

@@ -3,11 +3,14 @@
 .error {
  padding-inline: 0.5rem;
  font-size: 1rem;
-  height: 3rem;
+  // rows grow when a match is shown from a note or custom field
+  min-height: 3rem;
+  padding-block: 0.35rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
+  gap: 0.5rem;
 }

 .entry[data-selected='true'] {
@@ -18,21 +21,47 @@
  color: $label-gray;
 }

+.more {
+  padding-inline: 0.5rem;
+  padding-block: 0.75rem;
+  font-size: calc(1rem - 2px);
+  color: $label-gray;
+  border-top: 1px solid $gray-1000;
+  text-align: center;
+}
+
 .error {
  color: $error-red;
 }

+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  padding-top: 0.75rem;
+}
+
+.filterLabel {
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  margin-right: 0.15rem;
+}
+
 .data {
  display: grid;
  grid-template-areas:
    'index cue'
-    'index title';
+    'index title'
+    'index match';
  column-gap: 1rem;
  grid-template-rows: min-content 1fr;
+  min-width: 0;

  .index {
    grid-area: index;
-    background-color: var(--color, $gray-1000);
+    // background and text colour come from getAccessibleColour, which keeps the
+    // number legible whatever colour the user gave the entry
    border-radius: 2px;
    padding-block: 0.25rem;
    width: 3.5rem;
@@ -42,14 +71,33 @@

  .title {
    grid-area: title;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
  }

  .cue {
    grid-area: cue;
    font-size: calc(1rem - 2px);
    color: $label-gray;
-    max-height: 1em;
    min-height: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .match {
+    grid-area: match;
+    font-size: calc(1rem - 3px);
+    color: $label-gray;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .matchLabel {
+    color: $ui-white;
+    margin-right: 0.4rem;
  }
 }

@@ -63,13 +111,14 @@
  color: $label-gray;
 }

-.filterHint {
+.count {
  text-align: right;
+  white-space: nowrap;
 }

-.em {
-  color: $ui-white;
-  margin-inline: 0.25rem;
+.go {
+  white-space: nowrap;
+  padding-left: 1rem;
 }

 .hints {
@@ -98,7 +147,7 @@
    flex-direction: column;
  }

-  .filterHint {
+  .count {
    text-align: left;
  }
 }
@@ -1,11 +1,12 @@
-import { useDebouncedCallback } from '@mantine/hooks';
-import { SupportedEntry } from 'ontime-types';
-import { KeyboardEvent, useState } from 'react';
+import { MaybeString } from 'ontime-types';
+import { KeyboardEvent, useDeferredValue, useEffect, useRef, useState } from 'react';

+import ToggleButton from '../../../common/components/buttons/ToggleButton';
 import Input from '../../../common/components/input/input/Input';
 import Kbd from '../../../common/components/kbd/Kbd';
 import Modal from '../../../common/components/modal/Modal';
-import useFinder from './useFinder';
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
+import useFinder, { FinderResult } from './useFinder';

 import style from './Finder.module.scss';

@@ -15,46 +16,76 @@ interface FinderProps {
 }

 export default function Finder({ isOpen, onClose }: FinderProps) {
-  const { find, select, results, error } = useFinder();
-  const [selected, setSelected] = useState(0);
+  const [search, setSearch] = useState('');
+  const [filter, setFilter] = useState<MaybeString>(null);
+  const [selectedId, setSelectedId] = useState<MaybeString>(null);

-  const debouncedFind = useDebouncedCallback(find, 100);
+  /**
+   * Keeps typing responsive while the list re-renders.
+   * The search itself is cheap, rendering the results is what costs.
+   */
+  const deferredSearch = useDeferredValue(search);
+  const { select, results, error, total, filters, appliedFilter } = useFinder(deferredSearch, filter);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const activeRef = useRef<HTMLLIElement>(null);
+
+  /**
+   * We track the selection by ID so that it survives the result list changing under us:
+   * an entry that no longer exists falls back to the first result instead of dangling past the end
+   */
+  const activeIndex = Math.max(
+    0,
+    results.findIndex((entry) => entry.id === selectedId),
+  );
+  const activeEntry = results.at(activeIndex);
+
+  /** keep the highlighted entry in view while navigating with the keyboard */
+  useEffect(() => {
+    activeRef.current?.scrollIntoView({ block: 'nearest' });
+  }, [activeEntry?.id]);

  const navigate = (event: KeyboardEvent<HTMLDivElement>) => {
+    // pressing the search shortcut again selects the query, ready to be replaced
+    if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
+      event.preventDefault();
+      inputRef.current?.select();
+      return;
+    }
+
    // all operations need results
    if (results.length === 0) {
      return;
    }
    if (event.key === 'ArrowDown') {
-      setSelected((prev) => (prev + 1) % results.length);
+      setSelectedId(results[(activeIndex + 1) % results.length].id);
    }
    if (event.key === 'ArrowUp') {
-      setSelected((prev) => (prev - 1 + results.length) % results.length);
+      setSelectedId(results[(activeIndex - 1 + results.length) % results.length].id);
    }
    if (event.key === 'Enter') {
      event.preventDefault();
      event.stopPropagation();
-      submit();
+      submit(activeEntry);
    }
  };

-  const submit = () => {
-    const selectedEvent = results[selected];
-    select(selectedEvent);
+  const submit = (entry: FinderResult | undefined) => {
+    if (!entry) {
+      return;
+    }
+    select(entry);
    onClose();
  };

-  const handleMouseMoveEvent = (event: React.MouseEvent<HTMLUListElement>) => {
-    const target = event.target as HTMLElement;
-    const li = target.closest('li');
-    if (li) {
-      const index = Number(li.dataset.index);
-      if (!isNaN(index)) {
-        setSelected(index);
-      }
-    }
+  /** Scopes the search to a single field, or back to all fields when tapped again */
+  const handleFilter = (filterKey: string) => {
+    setFilter((previous) => (previous === filterKey ? null : filterKey));
+    inputRef.current?.focus();
  };

+  const hiddenResults = total - results.length;
+
  return (
    <Modal
      title=''
@@ -63,35 +94,68 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
      showBackdrop
      bodyElements={
        <div onKeyDown={navigate}>
-          <Input height='large' fluid onChange={debouncedFind} placeholder='Search...' />
-          <ul className={style.scrollContainer} onMouseMove={handleMouseMoveEvent}>
+          <Input
+            ref={inputRef}
+            height='large'
+            fluid
+            autoFocus
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder='Search...'
+          />
+          <div className={style.filters} data-testid='finder-filters'>
+            <span className={style.filterLabel}>Filter by</span>
+            {filters.map((option) => (
+              <ToggleButton
+                key={option.key}
+                pressed={appliedFilter === option.key}
+                size='small'
+                onClick={() => handleFilter(option.key)}
+              >
+                {option.label}
+              </ToggleButton>
+            ))}
+          </div>
+          <ul className={style.scrollContainer}>
            {error && <li className={style.error}>{error}</li>}
-            {results.length === 0 && <li className={style.empty}>No results</li>}
-            {results.length > 0 &&
-              results.map((entry, index) => {
-                const isSelected = selected === index;
-                const displayIndex = entry.type === SupportedEntry.Event ? entry.eventIndex : '-';
-                const displayCue = 'cue' in entry ? entry.cue : '';
+            {!error && results.length === 0 && <li className={style.empty}>No results</li>}
+            {results.map((entry) => {
+              const isSelected = activeEntry?.id === entry.id;
+              // the title and cue are already on the row, a match anywhere else needs showing
+              const showMatch = entry.match !== null && entry.match.key !== 'title' && entry.match.key !== 'cue';

-                return (
-                  <li
-                    key={entry.id}
-                    className={style.entry}
-                    data-selected={isSelected}
-                    data-index={index}
-                    onClick={submit}
-                  >
-                    <div className={style.data}>
-                      <div className={style.index} style={{ '--color': entry.colour }}>
-                        {displayIndex}
-                      </div>
-                      <div className={style.cue}>{displayCue}</div>
-                      <div className={style.title}>{entry.title}</div>
+              return (
+                <li
+                  key={entry.id}
+                  ref={isSelected ? activeRef : undefined}
+                  className={style.entry}
+                  data-testid='finder-result'
+                  data-selected={isSelected}
+                  onClick={() => submit(entry)}
+                  onPointerEnter={() => setSelectedId(entry.id)}
+                >
+                  <div className={style.data}>
+                    <div className={style.index} style={getAccessibleColour(entry.colour)}>
+                      {entry.eventIndex ?? '-'}
                    </div>
-                    {isSelected && <span>Go ⏎</span>}
-                  </li>
-                );
-              })}
+                    <div className={style.cue}>{entry.cue}</div>
+                    <div className={style.title}>{entry.title}</div>
+                    {showMatch && (
+                      <div className={style.match} data-testid='finder-result-match'>
+                        <span className={style.matchLabel}>{entry.match?.label}</span>
+                        {entry.match?.excerpt}
+                      </div>
+                    )}
+                  </div>
+                  {isSelected && <span className={style.go}>Go ⏎</span>}
+                </li>
+              );
+            })}
+            {hiddenResults > 0 && (
+              <li className={style.more} data-testid='finder-more'>
+                {hiddenResults} more {hiddenResults === 1 ? 'result' : 'results'} — keep typing to narrow the search
+              </li>
+            )}
          </ul>
        </div>
      }
@@ -112,10 +176,11 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
              Close
            </span>
          </div>
-          <div className={style.filterHint}>
-            Filter by <span className={style.em}>cue</span>, <span className={style.em}>index</span>, or
-            <span className={style.em}>title</span>
-          </div>
+          {total > 0 && (
+            <div className={style.count} data-testid='finder-count'>
+              {hiddenResults > 0 ? `Showing ${results.length} of ${total}` : `${total} result${total === 1 ? '' : 's'}`}
+            </div>
+          )}
        </div>
      }
    />
@@ -0,0 +1,162 @@
+import { CustomFields, OntimeDelay, OntimeEvent, OntimeGroup, OntimeMilestone, SupportedEntry } from 'ontime-types';
+
+import { parseQuery, searchByIndex, searchByText } from './useFinder';
+
+function makeEvent(id: string, overrides: Partial<OntimeEvent> = {}): OntimeEvent {
+  return {
+    type: SupportedEntry.Event,
+    id,
+    cue: '',
+    title: '',
+    note: '',
+    colour: '#000000',
+    custom: {},
+    parent: null,
+    ...overrides,
+  } as OntimeEvent;
+}
+
+function makeGroup(id: string, overrides: Partial<OntimeGroup> = {}): OntimeGroup {
+  return {
+    type: SupportedEntry.Group,
+    id,
+    title: '',
+    note: '',
+    colour: '#000000',
+    custom: {},
+    ...overrides,
+  } as OntimeGroup;
+}
+
+function makeMilestone(id: string, overrides: Partial<OntimeMilestone> = {}): OntimeMilestone {
+  return {
+    type: SupportedEntry.Milestone,
+    id,
+    cue: '',
+    title: '',
+    note: '',
+    colour: '#000000',
+    custom: {},
+    parent: null,
+    ...overrides,
+  } as OntimeMilestone;
+}
+
+function makeDelay(id: string): OntimeDelay {
+  return { type: SupportedEntry.Delay, id, duration: 1000, parent: null };
+}
+
+describe('parseQuery()', () => {
+  const filters = [
+    { key: 'cue', label: 'Cue' },
+    { key: 'Camera_Notes', label: 'Camera Notes' },
+  ];
+
+  it.each([
+    ['cue 12', { filterKey: 'cue', searchString: '12' }],
+    ['cue:12', { filterKey: 'cue', searchString: '12' }],
+    ['camera_notes:wide', { filterKey: 'Camera_Notes', searchString: 'wide' }],
+  ])('parses the field prefix in %s', (searchValue, expected) => {
+    expect(parseQuery(searchValue, filters)).toStrictEqual(expected);
+  });
+
+  it('keeps an unprefixed query as a search across all fields', () => {
+    expect(parseQuery('zebrafish', filters)).toStrictEqual({ filterKey: null, searchString: 'zebrafish' });
+  });
+
+  it('recognises a filter before any search text has been entered', () => {
+    expect(parseQuery('cue', filters)).toStrictEqual({ filterKey: 'cue', searchString: '' });
+  });
+});
+
+describe('searchByText()', () => {
+  const customFields: CustomFields = {
+    Camera_Notes: { type: 'text', label: 'Camera Notes', colour: '#000000' },
+    Slide: { type: 'image', label: 'Slide', colour: '#000000' },
+  };
+
+  it('searches cue, title, note, and text custom fields in rundown order', () => {
+    const data = [
+      makeMilestone('milestone', { cue: 'needle' }),
+      makeGroup('group', { title: 'needle' }),
+      makeEvent('note', { note: 'find the needle here' }),
+      makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
+    ];
+
+    const outcome = searchByText(data, customFields, null, 'needle');
+
+    expect(outcome.results.map(({ id, match }) => ({ id, field: match?.key }))).toStrictEqual([
+      { id: 'milestone', field: 'cue' },
+      { id: 'group', field: 'title' },
+      { id: 'note', field: 'note' },
+      { id: 'custom', field: 'Camera_Notes' },
+    ]);
+    expect(outcome.total).toBe(4);
+  });
+
+  it('searches only the selected field', () => {
+    const data = [
+      makeEvent('title', { title: 'needle' }),
+      makeEvent('note', { note: 'needle' }),
+      makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
+    ];
+
+    const outcome = searchByText(data, customFields, 'note', 'needle');
+
+    expect(outcome.results.map((result) => result.id)).toStrictEqual(['note']);
+    expect(outcome.total).toBe(1);
+  });
+
+  it('reports the first matching field so the result can explain why it matched', () => {
+    const data = [makeEvent('event', { cue: 'NEEDLE', title: 'another needle' })];
+
+    const outcome = searchByText(data, customFields, null, 'needle');
+
+    expect(outcome.results[0].match).toStrictEqual({ key: 'cue', label: 'Cue', excerpt: 'NEEDLE' });
+  });
+
+  it('does not search image custom fields', () => {
+    const data = [makeEvent('image-only', { custom: { Slide: 'needle' } })];
+
+    expect(searchByText(data, customFields, null, 'needle')).toStrictEqual({ results: [], error: null, total: 0 });
+  });
+
+  it('reports the full match count while limiting rendered results', () => {
+    const data = Array.from({ length: 51 }, (_, index) => makeEvent(String(index), { title: 'needle' }));
+
+    const outcome = searchByText(data, customFields, null, 'needle');
+
+    expect(outcome.results).toHaveLength(50);
+    expect(outcome.total).toBe(51);
+  });
+});
+
+describe('searchByIndex()', () => {
+  it('counts only events while preserving the flat rundown position', () => {
+    const data = [
+      makeGroup('group'),
+      makeDelay('delay'),
+      makeEvent('first'),
+      makeMilestone('milestone'),
+      makeEvent('second'),
+    ];
+
+    const outcome = searchByIndex(data, '2');
+
+    expect(outcome.results).toHaveLength(1);
+    expect(outcome.results[0]).toMatchObject({ id: 'second', index: 4, eventIndex: 2 });
+    expect(outcome.total).toBe(1);
+  });
+
+  it.each(['0', 'not-a-number'])('rejects invalid index %s', (index) => {
+    expect(searchByIndex([makeEvent('event')], index)).toStrictEqual({
+      results: [],
+      error: 'Invalid index',
+      total: 0,
+    });
+  });
+
+  it('returns no result when the event index is beyond the rundown', () => {
+    expect(searchByIndex([makeEvent('event')], '2')).toStrictEqual({ results: [], error: null, total: 0 });
+  });
+});
@@ -1,239 +1,259 @@
-import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  CustomFields,
+  EntryId,
+  MaybeNumber,
+  MaybeString,
+  OntimeEntry,
+  OntimeEvent,
+  OntimeGroup,
+  OntimeMilestone,
+  isOntimeDelay,
+  isOntimeEvent,
+} from 'ontime-types';
+import { useCallback, useMemo } from 'react';

+import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';

-const maxResults = 12;
+/** How many results we render, the total number of matches is reported separately */
+const maxResults = 50;
+/** Notes can hold a whole script, we only show enough to explain the match */
+const excerptPadding = 40;

-type FilterableGroup = {
-  type: SupportedEntry.Group;
-  id: EntryId;
-  index: number;
-  title: string;
-  colour: string;
-};
+const indexFilter = 'index';

-type FilterableEvent = {
-  type: SupportedEntry.Event;
+/** Everything except delays, which carry no text to search */
+type SearchableEntry = OntimeEvent | OntimeGroup | OntimeMilestone;
+
+type FinderFilter = { key: string; label: string };
+
+/**
+ * Offered to the user as filter badges. Index is a positional lookup rather than a
+ * text field, so it is handled separately from the fields a search runs over.
+ */
+const staticFilters: FinderFilter[] = [
+  { key: indexFilter, label: 'Index' },
+  { key: 'cue', label: 'Cue' },
+  { key: 'title', label: 'Title' },
+  { key: 'note', label: 'Note' },
+];
+
+/** Why an entry matched, so the UI can show the user */
+type FinderMatch = { key: string; label: string; excerpt: string };
+
+export type FinderResult = {
  id: EntryId;
+  /** position in the flat rundown, which is how the rundown reveals an entry */
  index: number;
-  eventIndex: number;
+  /** 1-based position among events, null for groups and milestones */
+  eventIndex: MaybeNumber;
  title: string;
+  /** groups have no cue */
  cue: string;
  colour: string;
  parent: MaybeString;
+  /** absent when the entry was found by index rather than by matching text */
+  match: FinderMatch | null;
 };

-type FilterableMilestone = {
-  type: SupportedEntry.Milestone;
-  id: EntryId;
-  index: number;
-  title: string;
-  cue: string;
-  colour: string;
-  parent: MaybeString;
-};
+type SearchOutcome = { results: FinderResult[]; error: MaybeString; total: number };

-type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
+const noResults: SearchOutcome = { results: [], error: null, total: 0 };

-export default function useFinder() {
+/** Groups are the only searchable entry with neither a cue nor a parent */
+function toResult(entry: SearchableEntry, index: number, eventIndex: MaybeNumber, match: FinderMatch | null) {
+  return {
+    id: entry.id,
+    index,
+    eventIndex,
+    title: entry.title,
+    cue: 'cue' in entry ? entry.cue : '',
+    colour: entry.colour,
+    parent: 'parent' in entry ? entry.parent : null,
+    match,
+  } satisfies FinderResult;
+}
+
+/** Shows enough of a long value for the user to see why it matched */
+function makeExcerpt(value: string, matchIndex: number, searchLength: number): string {
+  const start = Math.max(0, matchIndex - excerptPadding);
+  const end = Math.min(value.length, matchIndex + searchLength + excerptPadding);
+  return `${start > 0 ? '…' : ''}${value.slice(start, end)}${end < value.length ? '…' : ''}`;
+}
+
+/**
+ * The first field of an entry to contain the search string, if any.
+ * Fields are tried in the order we prefer to report a match.
+ */
+function findMatch(
+  entry: SearchableEntry,
+  customFields: CustomFields,
+  filterKey: MaybeString,
+  searchString: string,
+): FinderMatch | null {
+  function check(key: string, label: string, value: string): FinderMatch | null {
+    if (!value || (filterKey !== null && key !== filterKey)) {
+      return null;
+    }
+    const matchIndex = value.toLowerCase().indexOf(searchString);
+    if (matchIndex === -1) {
+      return null;
+    }
+    return { key, label, excerpt: makeExcerpt(value, matchIndex, searchString.length) };
+  }
+
+  // groups have no cue, the rest is common to every searchable entry
+  const fromCue = 'cue' in entry ? check('cue', 'Cue', entry.cue) : null;
+  const match = fromCue ?? check('title', 'Title', entry.title) ?? check('note', 'Note', entry.note);
+  if (match !== null) {
+    return match;
+  }
+
+  // custom fields are named by the project, so these can only be reached generically
+  for (const [key, value] of Object.entries(entry.custom)) {
+    const definition = customFields[key];
+    if (definition?.type !== 'text') {
+      continue;
+    }
+    const custom = check(key, definition.label || key, value);
+    if (custom) return custom;
+  }
+
+  return null;
+}
+
+/**
+ * Splits the raw search value into an optional field filter and the text to look for.
+ * Both `cue 12` and `cue:12` are accepted so that typing agrees with the filter badges.
+ */
+export function parseQuery(searchValue: string, filters: FinderFilter[]) {
+  for (const filter of filters) {
+    // the search value is already lowercased, custom field keys are not
+    const prefix = filter.key.toLowerCase();
+    if (searchValue === prefix) {
+      return { filterKey: filter.key, searchString: '' };
+    }
+    if (searchValue.startsWith(`${prefix} `) || searchValue.startsWith(`${prefix}:`)) {
+      return { filterKey: filter.key, searchString: searchValue.slice(prefix.length + 1).trim() };
+    }
+  }
+  return { filterKey: null, searchString: searchValue };
+}
+
+/** Finds the single event at a 1-based position in the rundown */
+export function searchByIndex(data: OntimeEntry[], indexString: string): SearchOutcome {
+  const target = Number(indexString);
+  if (isNaN(target) || target < 1) {
+    return { ...noResults, error: 'Invalid index' };
+  }
+
+  let eventIndex = 0;
+  for (let i = 0; i < data.length; i++) {
+    const entry = data[i];
+    if (!isOntimeEvent(entry)) {
+      continue;
+    }
+    eventIndex++;
+    if (eventIndex === target) {
+      return { results: [toResult(entry, i, eventIndex, null)], error: null, total: 1 };
+    }
+  }
+
+  return noResults;
+}
+
+/**
+ * Matches entries on a single field when one is selected, otherwise on every text field.
+ * Results keep rundown order, which keeps them predictable during a show.
+ */
+export function searchByText(
+  data: OntimeEntry[],
+  customFields: CustomFields,
+  filterKey: MaybeString,
+  searchString: string,
+): SearchOutcome {
+  const results: FinderResult[] = [];
+  let total = 0;
+  // indexes exposed to the UI are 1-based
+  let eventIndex = 0;
+
+  for (let i = 0; i < data.length; i++) {
+    const entry = data[i];
+    if (isOntimeDelay(entry)) {
+      continue;
+    }
+    const isEvent = isOntimeEvent(entry);
+    if (isEvent) {
+      eventIndex++;
+    }
+
+    const match = findMatch(entry, customFields, filterKey, searchString);
+    if (match === null) {
+      continue;
+    }
+
+    total++;
+    if (results.length < maxResults) {
+      results.push(toResult(entry, i, isEvent ? eventIndex : null, match));
+    }
+  }
+
+  return { results, error: null, total };
+}
+
+/**
+ * @param searchValue - the text the user is looking for
+ * @param activeFilter - a field selected from the filter badges, if any
+ */
+export default function useFinder(searchValue: string, activeFilter: MaybeString) {
  const { data, rundownId } = useFlatRundown();
-  const [results, setResults] = useState<FilterableEntry[]>([]);
-  const [error, setError] = useState<MaybeString>(null);
-  const lastSearchString = useRef('');
+  const { data: customFields } = useCustomFields();

  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);

-  /** Filters the rundown to a given evaluation */
-  const find = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      if (!data || data.length === 0) {
-        setError('No data');
-        return;
-      }
-      setError(null);
+  /** The filters offered to the user: the fixed fields plus whatever the project defines */
+  const filters = useMemo<FinderFilter[]>(() => {
+    const customFilters = Object.entries(customFields)
+      .filter(([_key, field]) => field.type === 'text')
+      .map(([key, field]) => ({ key, label: field.label || key }));
+    return [...staticFilters, ...customFilters];
+  }, [customFields]);

-      if (event.target.value === '') {
-        setResults([]);
-        return;
-      }
+  const { results, error, total, appliedFilter } = useMemo(() => {
+    if (data.length === 0) {
+      return { ...noResults, error: 'No data', appliedFilter: activeFilter };
+    }

-      const searchValue = event.target.value.toLowerCase();
-      lastSearchString.current = searchValue;
+    const normalised = searchValue.trim().toLowerCase();
+    if (normalised === '') {
+      return { ...noResults, appliedFilter: activeFilter };
+    }

-      if (searchValue.startsWith('index ')) {
-        const searchString = searchValue.slice('index '.length).trim();
-        const { results, error } = searchByIndex(searchString);
-        setResults(results);
-        setError(error);
-        return;
-      }
+    /**
+     * If a badge is selected it scopes the search; otherwise, keyword prefixes in the input
+     * (e.g. "cue:" / "title:") are parsed and the matching badge is highlighted.
+     */
+    const { filterKey, searchString } = activeFilter
+      ? { filterKey: activeFilter, searchString: normalised }
+      : parseQuery(normalised, filters);

-      if (searchValue.startsWith('cue ')) {
-        const searchString = searchValue.slice('cue '.length).trim();
-        const { results, error } = searchByCue(searchString);
-        setResults(results);
-        setError(error);
-        return;
-      }
-
-      const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
-      const { results, error } = searchByTitle(searchString);
-      setResults(results);
-      setError(error);
-
-      /** Returns a single item with a matching index */
-      function searchByIndex(searchString: string) {
-        const searchIndex = Number(searchString);
-        if (isNaN(searchIndex) || searchIndex < 1) {
-          return { results: [], error: 'Invalid index' };
-        }
-
-        if (searchIndex > data.length) {
-          return { results: [], error: null };
-        }
-
-        // indexes exposed to the UI are 1-based
-        let eventIndex = 1;
-        const results: FilterableEvent[] = [];
-        for (let i = 0; i < data.length; i++) {
-          const event = data[i];
-          if (isOntimeEvent(event)) {
-            if (eventIndex === searchIndex) {
-              results.push({
-                type: SupportedEntry.Event,
-                id: event.id,
-                index: i,
-                eventIndex,
-                title: event.title,
-                cue: event.cue,
-                colour: event.colour,
-                parent: event.parent,
-              } satisfies FilterableEvent);
-              break;
-            }
-            eventIndex++;
-          }
-        }
-
-        return { results, error: null };
-      }
-
-      /** Returns maxResults of OntimeEvents that match the cue field */
-      function searchByCue(searchString: string) {
-        // indexes exposed to the UI are 1-based
-        let eventIndex = 1;
-        // limit amount of results we show
-        let remaining = maxResults;
-        const results: FilterableEvent[] = [];
-
-        for (let i = 0; i < data.length; i++) {
-          if (remaining <= 0) {
-            break;
-          }
-          const event = data[i];
-          if (isOntimeEvent(event)) {
-            if (event.cue.toLowerCase().includes(searchString)) {
-              remaining--;
-              results.push({
-                type: SupportedEntry.Event,
-                id: event.id,
-                index: i,
-                eventIndex,
-                title: event.title,
-                cue: event.cue,
-                colour: event.colour,
-                parent: event.parent,
-              } satisfies FilterableEvent);
-            }
-            eventIndex++;
-          }
-        }
-        return { results, error: null };
-      }
-
-      /** Returns maxResults of OntimeEvents that match the title field*/
-      function searchByTitle(searchString: string) {
-        // indexes exposed to the UI are 1-based
-        let eventIndex = 1;
-        // limit amount of results we show
-        let remaining = maxResults;
-        const results: FilterableEntry[] = [];
-
-        for (let i = 0; i < data.length; i++) {
-          if (remaining <= 0) {
-            break;
-          }
-
-          const entry = data[i];
-          if (isOntimeEvent(entry)) {
-            if (entry.title.toLowerCase().includes(searchString)) {
-              remaining--;
-              results.push({
-                type: SupportedEntry.Event,
-                id: entry.id,
-                index: i,
-                eventIndex,
-                title: entry.title,
-                cue: entry.cue,
-                colour: entry.colour,
-                parent: entry.parent,
-              } satisfies FilterableEvent);
-            }
-            eventIndex++;
-          } else if (isOntimeGroup(entry)) {
-            if (entry.title.toLowerCase().includes(searchString)) {
-              remaining--;
-              results.push({
-                type: SupportedEntry.Group,
-                id: entry.id,
-                index: i,
-                title: entry.title,
-                colour: entry.colour,
-              } satisfies FilterableGroup);
-            }
-          } else if (isOntimeMilestone(entry)) {
-            if (entry.title.toLowerCase().includes(searchString)) {
-              remaining--;
-              results.push({
-                type: SupportedEntry.Milestone,
-                id: entry.id,
-                index: i,
-                title: entry.title,
-                cue: entry.cue,
-                colour: entry.colour,
-                parent: entry.parent,
-              } satisfies FilterableMilestone);
-            }
-          }
-        }
-        return { results, error: null };
-      }
-    },
-    [data],
-  );
+    if (filterKey === indexFilter) {
+      return { ...searchByIndex(data, searchString), appliedFilter: filterKey };
+    }
+    if (searchString === '') {
+      // a filter is selected, but there is nothing to match on yet
+      return { ...noResults, appliedFilter: filterKey };
+    }
+    return { ...searchByText(data, customFields, filterKey, searchString), appliedFilter: filterKey };
+  }, [data, customFields, filters, searchValue, activeFilter]);

  const select = useCallback(
-    (selectedEvent: FilterableEntry) => {
-      selectAndRevealEntry({
-        id: selectedEvent.id,
-        index: selectedEvent.index,
-        parent: 'parent' in selectedEvent ? selectedEvent.parent : null,
-      });
+    (result: FinderResult) => {
+      selectAndRevealEntry({ id: result.id, index: result.index, parent: result.parent });
    },
    [selectAndRevealEntry],
  );

-  /** clear results when source data changes */
-  useEffect(() => {
-    setResults([]);
-    setError(null);
-    // fake a submit event to re-run the search
-    if (lastSearchString.current) {
-      find({ target: { value: lastSearchString.current } } as ChangeEvent<HTMLInputElement>);
-    }
-  }, [data, find]);
-
-  return { find, select, results, error };
+  return { select, results, error, total, filters, appliedFilter };
 }
@@ -6,9 +6,8 @@
  padding: 0;
  box-sizing: border-box; /* reset */
  overflow: hidden;
-  width: 100%;
-  height: 100%; /* fill the pip window or the editor preview frame */
-  position: relative; /* anchor for the blackout and message overlays */
+  width: 100%; /* restrict the page width to viewport */
+  height: 100vh;
  transition: opacity 0.5s ease-in-out;

  font-family: $viewer-font-family;
@@ -20,8 +19,8 @@
  flex-direction: column;

  &--finished {
-    outline: clamp(4px, 1cqw, 16px) solid $timer-finished-color;
-    outline-offset: calc(clamp(4px, 1cqw, 16px) * -1);
+    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
+    outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
    transition: $viewer-transition-time;
  }

@@ -36,6 +35,14 @@
    width: 100%;
    overflow: hidden;

+    .timer-source {
+      color: $viewer-label-color;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
    .timer {
      opacity: 1;
      font-family: $viewer-font-family;
@@ -108,24 +115,10 @@

  /* =================== OVERLAY ===================*/

-  .blackout {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    background-color: #000;
-    opacity: 0;
-    transition: opacity $viewer-transition-time;
-
-    &--active {
-      z-index: calc($zindex-floating + 1);
-      opacity: 1;
-    }
-  }
-
  .message-overlay {
-    position: absolute;
+    position: fixed;
    inset: 0;
-    padding: 2cqw;
+    padding: 2vw;
    background: $viewer-background-color;
    opacity: 0;
    transition: opacity $viewer-transition-time;
@@ -7,6 +7,7 @@ import { cx } from '../../../common/utils/styleUtils';
 import { getFormattedTimer, getTimerByType } from '../../common/viewUtils';
 import {
  getEstimatedFontSize,
+  getEventTimerSecondary,
  getIsPlaying,
  getSecondaryDisplay,
  getShowMessage,
@@ -23,7 +24,18 @@ interface PipTimerProps {
 }

 export function PipTimer({ viewSettings }: PipTimerProps) {
-  const { eventNow, message, time, clock, timerTypeNow, countToEndNow, auxTimer } = useTimerSocket();
+  const {
+    eventNow,
+    message,
+    time,
+    eventTimer,
+    clock,
+    timerTypeNow,
+    eventTimerType,
+    countToEndNow,
+    usesGroupTimer,
+    auxTimer,
+  } = useTimerSocket();

  // gather modifiers
  const showOverlay = getShowMessage(message.timer);
@@ -41,10 +53,9 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
  // gather timer data
  const totalTime = getTotalTime(time.duration, time.addedTime);
  const stageTimer = getTimerByType(false, timerTypeNow, clock, time, timerTypeNow);
-  // match the defaults of the timer view, which is what the preview is standing in for
  const display = getFormattedTimer(stageTimer, timerTypeNow, 'min', {
    removeSeconds: false,
-    removeLeadingZero: true,
+    removeLeadingZero: false,
  });

  const currentAux = (() => {
@@ -60,31 +71,30 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
    return null;
  })();

-  const secondaryContent = getSecondaryDisplay(message, currentAux, 'min', false, true, false);
+  const secondaryContent = usesGroupTimer
+    ? getEventTimerSecondary(eventTimer, eventTimerType, clock, 'min', false, true)
+    : getSecondaryDisplay(message, currentAux, 'min', false, true, false);

  // gather presentation styles
  const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
-  // the estimate is tuned for a 16:9 screen, so cap it by height for containers wider than that
  const timerFontSize = getEstimatedFontSize(display, secondaryContent);
-  const timerFontRule = `min(${timerFontSize}cqw, ${((timerFontSize * 16) / 9).toFixed(2)}cqh)`;
  const userStyles = {
    ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
  };

  return (
    <div className={cx(['pip-timer', showFinished && 'pip-timer--finished'])} style={userStyles}>
-      <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
-
      <div className={cx(['message-overlay', showOverlay && 'message-overlay--active'])}>
        <FitText mode='multi' min={12} max={256} className={cx(['message', message.timer.blink && 'blink'])}>
          {message.timer.text}
        </FitText>
      </div>

-      <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
+      <div className='timer-container'>
+        {usesGroupTimer && <div className='timer-source'>Group timer</div>}
        <div
          className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-          style={{ fontSize: timerFontRule }}
+          style={{ fontSize: `${timerFontSize}vw` }}
          data-phase={time.phase}
        >
          {display}
@@ -101,11 +111,11 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
          className={cx(['progress-container', !isPlaying && 'progress-container--paused'])}
          now={time.current}
          complete={totalTime}
-          eventId={eventNow?.id}
+          eventId={usesGroupTimer ? undefined : eventNow?.id}
          normalColor={viewSettings.normalColor}
-          warning={eventNow?.timeWarning}
+          warning={usesGroupTimer ? undefined : eventNow?.timeWarning}
          warningColor={viewSettings.warningColor}
-          danger={eventNow?.timeDanger}
+          danger={usesGroupTimer ? undefined : eventNow?.timeDanger}
          dangerColor={viewSettings.dangerColor}
          hideOvertime={!showFinished}
        />
@@ -89,6 +89,14 @@
    width: 100%;
    overflow: hidden;

+    .timer-source {
+      color: var(--label-color-override, $viewer-label-color);
+      font-size: $timer-label-size;
+      font-weight: 600;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
    .end-message {
      text-align: center;
      font-size: 11.5vw;
@@ -195,6 +203,24 @@
    font-weight: 600;
  }

+  .sound-prompt {
+    position: absolute;
+    bottom: $view-block-padding;
+    left: $view-inline-padding;
+    padding: 0.5em 0.75em;
+    border-radius: $element-border-radius;
+    background-color: $viewer-card-bg-color;
+    color: $viewer-secondary-color;
+    font-size: $timer-label-size;
+    text-transform: uppercase;
+    pointer-events: none;
+    transition: opacity $viewer-transition-time;
+
+    &--hidden {
+      opacity: 0;
+    }
+  }
+
  /* =================== LOGO ===================*/
  .logo {
    position: absolute;
@@ -8,6 +8,7 @@ import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
+import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useTimerSocket } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
@@ -21,6 +22,7 @@ import { getTimerOptions, useTimerOptions } from './timer.options';
 import {
  getCardData,
  getEstimatedFontSize,
+  getEventTimerSecondary,
  getIsPlaying,
  getSecondaryDisplay,
  getShowClock,
@@ -30,6 +32,7 @@ import {
  getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
+import { useTimerSound } from './useTimerSound';

 import './Timer.scss';

@@ -50,7 +53,19 @@ export default function TimerLoader() {
 }

 function Timer({ customFields, projectData, isMirrored, settings, viewSettings, entries }: TimerData) {
-  const { eventNext, eventNow, message, time, clock, timerTypeNow, countToEndNow, auxTimer } = useTimerSocket();
+  const {
+    eventNext,
+    eventNow,
+    message,
+    time,
+    eventTimer,
+    clock,
+    timerTypeNow,
+    eventTimerType,
+    countToEndNow,
+    usesGroupTimer,
+    auxTimer,
+  } = useTimerSocket();
  const {
    hideClock,
    hideCards,
@@ -66,6 +81,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
    freezeOvertime,
    freezeMessage,
    hidePhase,
+    endSound,
    font,
    keyColour,
    timerColour,
@@ -75,6 +91,8 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
  const { getLocalizedString } = useTranslation();
  const localisedMinutes = getLocalizedString('common.minutes');

+  const showSoundPrompt = useTimerSound(eventTimer.phase, endSound);
+
  // gather modifiers
  const viewTimerType = timerType ?? timerTypeNow;
  const showOverlay = getShowMessage(message.timer);
@@ -123,14 +141,18 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
    return null;
  })();

-  const secondaryContent = getSecondaryDisplay(
-    message,
-    currentAux,
-    localisedMinutes,
-    hideTimerSeconds,
-    removeLeadingZeros,
-    hideSecondary,
-  );
+  const secondaryContent =
+    usesGroupTimer && !hideSecondary
+      ? getEventTimerSecondary(
+          eventTimer,
+          eventTimerType,
+          clock,
+          localisedMinutes,
+          hideTimerSeconds,
+          removeLeadingZeros,
+          timeformat,
+        )
+      : getSecondaryDisplay(message, currentAux, localisedMinutes, hideTimerSeconds, removeLeadingZeros, hideSecondary);

  // gather presentation styles
  const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger);
@@ -156,6 +178,8 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,

      <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />

+      {showSoundPrompt && <SoundPermissionPrompt />}
+
      <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />

      {!hideMessage && (
@@ -169,6 +193,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
      {showClock && <TimerAutoTickingClock clockFormat={timeformat} />}

      <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
+        {usesGroupTimer && <div className='timer-source'>Group timer</div>}
        {showEndMessage ? (
          <FitText mode='multi' min={64} max={256} className='end-message'>
            {freezeMessage}
@@ -195,11 +220,11 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
          className={cx(['progress-container', !isPlaying && 'progress-container--paused'])}
          now={time.current}
          complete={totalTime}
-          eventId={eventNow?.id}
+          eventId={usesGroupTimer ? undefined : eventNow?.id}
          normalColor={viewSettings.normalColor}
-          warning={eventNow?.timeWarning}
+          warning={usesGroupTimer ? undefined : eventNow?.timeWarning}
          warningColor={viewSettings.warningColor}
-          danger={eventNow?.timeDanger}
+          danger={usesGroupTimer ? undefined : eventNow?.timeDanger}
          dangerColor={viewSettings.dangerColor}
          hideOvertime={!showFinished}
        />
@@ -227,3 +252,13 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
    </div>
  );
 }
+
+function SoundPermissionPrompt() {
+  const isUserActive = useFadeOutOnInactivity(true);
+
+  return (
+    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
+      Interact with the page (click/tap or press any key) to enable sound
+    </div>
+  );
+}
@@ -0,0 +1,60 @@
+import { TimerPhase, TimerType } from 'ontime-types';
+
+import { getEventTimerSecondary, shouldPlayEndSound } from '../timer.utils';
+
+describe('getEventTimerSecondary()', () => {
+  it('formats the event countdown as a labelled secondary value', () => {
+    expect(
+      getEventTimerSecondary({ current: 65_000, elapsed: 5_000 }, TimerType.CountDown, 0, 'min', false, false),
+    ).toBe('Event timer 00:01:05');
+  });
+
+  it('preserves the event count-up display', () => {
+    expect(getEventTimerSecondary({ current: 55_000, elapsed: 5_000 }, TimerType.CountUp, 0, 'min', false, false)).toBe(
+      'Event timer 00:00:05',
+    );
+  });
+
+  it('falls back to remaining time when the event timer is hidden', () => {
+    expect(getEventTimerSecondary({ current: 5_000, elapsed: 55_000 }, TimerType.None, 0, 'min', false, false)).toBe(
+      'Event timer 00:00:05',
+    );
+  });
+
+  it('shows event progress instead of wall-clock time for clock events', () => {
+    expect(
+      getEventTimerSecondary({ current: 5_000, elapsed: 55_000 }, TimerType.Clock, 12_000, 'min', false, false),
+    ).toBe('Event timer 00:00:05');
+  });
+});
+
+describe('shouldPlayEndSound()', () => {
+  test.each([TimerPhase.Default, TimerPhase.Warning, TimerPhase.Danger])(
+    'sounds when a running timer goes into overtime from %s',
+    (previousPhase) => {
+      expect(shouldPlayEndSound(previousPhase, TimerPhase.Overtime)).toBe(true);
+    },
+  );
+
+  it('stays silent on the first phase we see, a client could be joining mid-overtime', () => {
+    expect(shouldPlayEndSound(null, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent when the phase was reset, a reload during overtime starts from none', () => {
+    expect(shouldPlayEndSound(TimerPhase.None, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent for a roll timer waiting to start', () => {
+    expect(shouldPlayEndSound(TimerPhase.Pending, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('sounds once, not on every update while in overtime', () => {
+    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent on phases which are not the end of the timer', () => {
+    expect(shouldPlayEndSound(TimerPhase.Default, TimerPhase.Warning)).toBe(false);
+    expect(shouldPlayEndSound(TimerPhase.Warning, TimerPhase.Danger)).toBe(false);
+    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.None)).toBe(false);
+  });
+});
@@ -16,6 +16,7 @@ import { ViewOption } from '../../common/components/view-params-editor/viewParam
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean, makeColourString } from '../common/viewUtils';
+import { endSoundOptions, isEndSound, type EndSound } from './timer.sound';

 // manually match the properties of TimerType excluding the None
 const timerDisplayOptions: SelectOption[] = [
@@ -76,6 +77,15 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
          type: 'boolean',
          defaultValue: false,
        },
+        {
+          id: 'endSound',
+          title: 'Play sound on timer end',
+          description:
+            'Plays a sound in this screen when the timer reaches zero. The screen must be interacted with once before it can play',
+          type: 'option',
+          values: endSoundOptions,
+          defaultValue: 'none',
+        },
      ],
    },
    {
@@ -193,6 +203,7 @@ type TimerOptions = {
  freezeOvertime: boolean;
  freezeMessage: string;
  hidePhase: boolean;
+  endSound: EndSound;
  font?: string;
  keyColour?: string;
  timerColour?: string;
@@ -208,6 +219,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL

  // Get timerType from either source
  const timerType = validateTimerType(getValue('timerType'), TimerType.None);
+  const endSoundValue = getValue('endSound');

  return {
    hideClock: isStringBoolean(getValue('hideClock')),
@@ -227,6 +239,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
    freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
    freezeMessage: getValue('freezeMessage') ?? '',
    hidePhase: isStringBoolean(getValue('hidePhase')),
+    endSound: isEndSound(endSoundValue) ? endSoundValue : 'none',

    font: getValue('font') ?? undefined,
    keyColour: makeColourString(getValue('keyColour')),
@@ -0,0 +1,20 @@
+import arpeggio from '../../assets/sounds/arpeggio.wav';
+import bell from '../../assets/sounds/bell.wav';
+import chime from '../../assets/sounds/chime.wav';
+import type { SelectOption } from '../../common/components/select/Select';
+
+// synthesised tones bundled with the app, no external source or licence to track
+export const endSoundSources = { chime, bell, arpeggio } as const;
+
+export type EndSound = 'none' | keyof typeof endSoundSources;
+
+export const endSoundOptions: SelectOption[] = [
+  { value: 'none', label: 'None' },
+  { value: 'chime', label: 'Chime' },
+  { value: 'bell', label: 'Bell' },
+  { value: 'arpeggio', label: 'Arpeggio' },
+];
+
+export function isEndSound(value: string | null): value is EndSound {
+  return value === 'none' || value === 'chime' || value === 'bell' || value === 'arpeggio';
+}
@@ -6,11 +6,12 @@ import {
  RundownEntries,
  TimerMessage,
  TimerPhase,
+  TimerState,
  TimerType,
 } from 'ontime-types';
 import { isPlaybackActive } from 'ontime-utils';

-import { getFormattedTimer, getPropertyValue } from '../common/viewUtils';
+import { getFormattedTimer, getPropertyValue, getTimerByType } from '../common/viewUtils';

 /**
 * Whether a message should be shown
@@ -144,6 +145,25 @@ export function getSecondaryDisplay(
  return;
 }

+export function getEventTimerSecondary(
+  timer: Pick<TimerState, 'current' | 'elapsed'>,
+  timerType: TimerType,
+  clock: number,
+  localisedMinutes: string,
+  removeSeconds: boolean,
+  removeLeadingZero: boolean,
+  clockFormat?: string | null,
+): string {
+  const effectiveType = timerType === TimerType.CountUp ? TimerType.CountUp : TimerType.CountDown;
+  const value = getTimerByType(false, effectiveType, clock, timer);
+  const display = getFormattedTimer(value, effectiveType, localisedMinutes, {
+    removeSeconds,
+    removeLeadingZero,
+    clockFormat,
+  });
+  return `Event timer ${display}`;
+}
+
 /**
 * What should we be showing in the cards?
 */
@@ -189,3 +209,18 @@ export function getCardData(
    nextSecondary,
  };
 }
+
+/**
+ * Whether the end of timer sound should play for a given phase transition
+ * We only sound the transition into overtime from a phase that was already counting,
+ * which keeps a client that connects or reloads mid-overtime silent
+ */
+export function shouldPlayEndSound(previousPhase: TimerPhase | null, phase: TimerPhase): boolean {
+  if (phase !== TimerPhase.Overtime) {
+    return false;
+  }
+
+  return (
+    previousPhase === TimerPhase.Default || previousPhase === TimerPhase.Warning || previousPhase === TimerPhase.Danger
+  );
+}
@@ -0,0 +1,99 @@
+import { TimerPhase } from 'ontime-types';
+import { useEffect, useRef, useState } from 'react';
+
+import { endSoundSources, type EndSound } from './timer.sound';
+import { shouldPlayEndSound } from './timer.utils';
+
+/**
+ * Plays a sound when the timer reaches its end
+ *
+ * Browsers reject playback until the document has been interacted with, and that permission
+ * is lost on every page load. Since a timer screen is typically left unattended, we prime the
+ * audio element on the first interaction and let the view prompt for one if it never comes.
+ * Safari grants the permission per element, so priming has to call play() on this element from
+ * inside the event handler, it is not enough to know that an interaction happened.
+ */
+export function useTimerSound(phase: TimerPhase, sound: EndSound): boolean {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const previousPhaseRef = useRef<TimerPhase | null>(null);
+  const [isArmed, setIsArmed] = useState(false);
+
+  const enabled = sound !== 'none';
+
+  // Create and clean up the audio element; changing sounds requires re-arming it in Safari.
+  useEffect(() => {
+    setIsArmed(false);
+
+    if (sound === 'none') {
+      return;
+    }
+
+    const audio = new Audio(endSoundSources[sound]);
+    audioRef.current = audio;
+
+    return () => {
+      audio.pause();
+      audioRef.current = null;
+    };
+  }, [sound]);
+
+  // Listen for user interaction until muted playback succeeds and arms the selected audio element.
+  useEffect(() => {
+    if (!enabled || isArmed) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const prime = () => {
+      const audio = audioRef.current;
+      if (!audio) {
+        return;
+      }
+
+      const wasMuted = audio.muted;
+      audio.muted = true;
+      audio
+        .play()
+        .then(() => {
+          if (audioRef.current !== audio) {
+            return;
+          }
+          audio.pause();
+          audio.currentTime = 0;
+          setIsArmed(true);
+        })
+        .catch(() => {
+          // playback is still blocked, a later interaction will try again
+        })
+        .finally(() => {
+          audio.muted = wasMuted;
+        });
+    };
+
+    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
+    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
+
+    return () => {
+      controller.abort();
+    };
+  }, [enabled, isArmed]);
+
+  // Track phase transitions and play only when a running timer enters overtime.
+  useEffect(() => {
+    const previousPhase = previousPhaseRef.current;
+    previousPhaseRef.current = phase;
+
+    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
+      return;
+    }
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    audio.currentTime = 0;
+    audio.play().catch(() => {
+      // the screen has not been interacted with, the view shows a prompt for it
+    });
+  }, [enabled, phase]);
+
+  return enabled && !isArmed;
+}
@@ -1,6 +1,6 @@
 {
  "name": "ontime-electron",
-  "version": "4.12.0",
+  "version": "4.13.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/resolver",
-  "version": "4.12.0",
+  "version": "4.13.0",
  "type": "module",
  "repository": "https://github.com/cpvalente/ontime",
  "types": "./dist/main.d.ts",
@@ -17,7 +17,7 @@
    "parser"
  ],
  "author": "",
-  "license": "AGPL-3.0-only",
+  "license": "ISC",
  "devDependencies": {
    "ontime-types": "workspace:^4.2.1",
    "tsdown": "^0.22.4",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "4.12.0",
+  "version": "4.13.0",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -417,7 +417,7 @@ export function migrateRundown(
          timeEnd: null,
          duration: 0,
          isFirstLinked: false,
-        });
+        } as unknown as OntimeEntry);
      } else if (entry.type === 'delay') {
        append({ id: entry.id, type: SupportedEntry.Delay, duration: entry.duration, parent });
      }
@@ -1,4 +1,4 @@
-import { CustomFields, OntimeEvent, OntimeGroup, Rundown, SupportedEntry } from 'ontime-types';
+import { CustomFields, OntimeEvent, OntimeGroup, Rundown, SupportedEntry, TimerType } from 'ontime-types';

 import { makeNewRundown } from '../../../models/dataModel.js';
 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone } from '../__mocks__/rundown.mocks.js';
@@ -276,7 +276,13 @@ describe('parseRundown()', () => {
    expect(parsedRundown.order).toStrictEqual(['group']);
    expect(parsedRundown.flatOrder).toStrictEqual(['group', '1', '2']);
    expect(parsedRundown.entries).toMatchObject({
-      group: { id: 'group', type: SupportedEntry.Group, entries: ['1', '2'] },
+      group: {
+        id: 'group',
+        type: SupportedEntry.Group,
+        entries: ['1', '2'],
+        useGroupTimer: false,
+        timerType: TimerType.CountDown,
+      },
      '1': { id: '1', type: SupportedEntry.Event },
      '2': { id: '2', type: SupportedEntry.Milestone },
    });
@@ -1,5 +1,7 @@
+import { deepEqual } from 'fast-equals';
 import {
  EndAction,
+  OntimeEntry,
  OntimeEvent,
  OntimeGroup,
  OntimeMilestone,
@@ -8,13 +10,22 @@ import {
  TimerType,
  Trigger,
 } from 'ontime-types';
-import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
+import {
+  MILLIS_PER_HOUR,
+  MILLIS_PER_MINUTE,
+  createDelay,
+  createEvent,
+  createGroup,
+  createMilestone,
+} from 'ontime-utils';
 import { assertType } from 'vitest';

 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
 import { parseRundown } from '../rundown.parser.js';
 import {
  calculateDayOffset,
+  cloneEntryData,
+  createGroupPatch,
  deleteById,
  doesInvalidateMetadata,
  getIntegerAndFraction,
@@ -26,6 +37,25 @@ import {
 } from '../rundown.utils.js';

 describe('test event validator', () => {
+  it('creates groups with the shared timer disabled by default', () => {
+    expect(createGroup({ id: 'group' })).toMatchObject({
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
+    });
+  });
+
+  it('limits group timers to count down and count up', () => {
+    expect(createGroup({ timerType: TimerType.CountUp }).timerType).toBe(TimerType.CountUp);
+    expect(createGroup({ timerType: TimerType.Clock }).timerType).toBe(TimerType.CountDown);
+  });
+
+  it('rejects non-boolean group timer updates', () => {
+    const group = createGroup({ useGroupTimer: false });
+    const updated = createGroupPatch(group, { useGroupTimer: 'true' as never });
+
+    expect(updated.useGroupTimer).toBe(false);
+  });
+
  it('validates a good object', () => {
    const event = {
      title: 'test',
@@ -715,3 +745,68 @@ describe('eventDurationMatchGroupTarget()', () => {
    expect(result).toStrictEqual(null);
  });
 });
+
+describe('cloneEntryData()', () => {
+  const trigger: Trigger = {
+    id: 'trigger-1',
+    title: 'Go on air',
+    trigger: TimerLifeCycle.onStart,
+    automationId: 'automation-1',
+  };
+
+  // the real factories, so these are complete entries exactly as the rundown holds them
+  const entries: [string, OntimeEntry][] = [
+    ['event', createEvent({ custom: { sponsor: 'a value' }, triggers: [trigger] }, 'cue-1') as OntimeEvent],
+    ['group', createGroup({ id: 'group-1', entries: ['a', 'b'], custom: { sponsor: 'a value' } })],
+    ['milestone', createMilestone({ id: 'milestone-1', custom: { sponsor: 'a value' } })],
+    ['delay', createDelay({ id: 'delay-1', duration: 10 })],
+  ];
+
+  /**
+   * Fails if any nested object or array in the clone is the same reference as the source,
+   * so a field added later that needs a copy of its own is caught here without the clone
+   * having to enumerate fields.
+   */
+  function expectNoSharedReferences(clone: unknown, source: unknown, path: string) {
+    if (typeof source !== 'object' || source === null) return;
+    expect(clone, `${path} is shared with the source`).not.toBe(source);
+    const cloneRecord = clone as Record<string, unknown>;
+    const sourceRecord = source as Record<string, unknown>;
+    for (const key of Object.keys(sourceRecord)) {
+      expectNoSharedReferences(cloneRecord[key], sourceRecord[key], `${path}.${key}`);
+    }
+  }
+
+  /** the two halves of the structuredClone contract: same value, no shared references */
+  it.each(entries)('clones a %s to the same value structuredClone would produce', (_type, entry) => {
+    expect(cloneEntryData(entry)).toStrictEqual(structuredClone(entry));
+  });
+
+  it.each(entries)('shares no nested object or array with the source %s', (_type, entry) => {
+    expectNoSharedReferences(cloneEntryData(entry), entry, 'entry');
+  });
+
+  /**
+   * Regression: normalising an absent container to an empty one makes deepEqual report a
+   * change on every comparison, which would have the runtime re-broadcast and re-save the
+   * restore point on every tick. See PR #2178.
+   */
+  it.each([
+    ['event', makeOntimeEvent({ id: 'partial' })],
+    ['group', makeOntimeGroup({ id: 'partial', entries: undefined })],
+  ])('gives a partial %s exactly the keys structuredClone would, so it stays deep-equal', (_type, entry) => {
+    const clone = cloneEntryData(entry);
+    // asserting on keys, not values: `toBeUndefined()` cannot tell an absent key from an own
+    // key holding undefined, and it is key presence that decides the deepEqual below
+    expect(Object.keys(clone).sort()).toEqual(Object.keys(structuredClone(entry)).sort());
+    // this is the comparison runtime.service.ts uses to decide whether to re-broadcast an
+    // entry; if the clone gains a key, every tick looks like a change
+    expect(deepEqual(clone, entry)).toBe(true);
+  });
+
+  it('throws on an entry type it does not know how to clone', () => {
+    expect(() => cloneEntryData({ id: 'x', type: 'unknown' } as unknown as OntimeEvent)).toThrow(
+      'Unsupported entry type for cloning',
+    );
+  });
+});
@@ -27,6 +27,7 @@ import {
  isPlayableEvent,
 } from 'ontime-types';
 import { addToRundown, createGroup, customFieldLabelToKey, getInsertAfterId, insertAtIndex } from 'ontime-utils';
+import type { DeepReadonly } from 'ts-essentials';

 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { consoleError } from '../../utils/console.js';
@@ -34,6 +35,7 @@ import { ProcessedRundownMetadata, makeRundownMetadata } from './rundown.parser.
 import type { RundownMetadata } from './rundown.types.js';
 import {
  applyPatchToEntry,
+  cloneRundown,
  cloneSimpleRundownEntry,
  deleteById,
  doesInvalidateMetadata,
@@ -43,9 +45,14 @@ import {
 } from './rundown.utils.js';

 /**
- * The currently loaded rundown in cache
+ * The currently loaded rundown in cache.
+ *
+ * Reassigned - never mutated in place - when a different rundown is loaded: the persistence
+ * layer stores this object by reference, so repurposing it for another rundown would rewrite
+ * the previously loaded rundown's stored record. Mutating it in place while it represents the
+ * same rundown (ie. from commit) is intended, and is what keeps the stored record current.
 */
-const cachedRundown: Rundown = {
+let cachedRundown: Rundown = {
  id: '',
  title: '',
  order: [],
@@ -79,9 +86,16 @@ export const getRundownMetadata = (): Readonly<RundownMetadata> => rundownMetada
 export const getProjectCustomFields = (): Readonly<CustomFields> => projectCustomFields;
 export const getEntryWithId = (entryId: EntryId): OntimeEntry | undefined => cachedRundown.entries[entryId];

-type Transaction = {
+/**
+ * @param R the type callers see for `rundown` - a plain, mutable `Rundown` when the
+ * transaction was opened with `mutableRundown: true`, otherwise a `DeepReadonly<Rundown>`
+ * so that accidentally mutating an entry (or an order array) on a non-mutable transaction
+ * - which would silently corrupt the live cache without going through commit() - is a
+ * compile-time error instead of a runtime bug.
+ */
+type Transaction<R> = {
  customFields: CustomFields;
-  rundown: Rundown;
+  rundown: R;

  commit: (shouldProcess?: boolean) => Promise<{
    rundown: Readonly<Rundown>;
@@ -102,11 +116,17 @@ type TransactionOptions = {
  rundownId?: string;
 };

-export function createTransaction(options: TransactionOptions): Transaction {
+export function createTransaction(options: TransactionOptions & { mutableRundown: true }): Transaction<Rundown>;
+export function createTransaction(
+  options: TransactionOptions & { mutableRundown?: false },
+): Transaction<DeepReadonly<Rundown>>;
+export function createTransaction(
+  options: TransactionOptions,
+): Transaction<Rundown> | Transaction<DeepReadonly<Rundown>> {
  const targetId = options.rundownId ?? cachedRundown.id;
  const isLoaded = targetId === cachedRundown.id;
  const sourceRundown: Rundown = isLoaded ? cachedRundown : (getDataProvider().getRundown(targetId) as Rundown);
-  const rundown = options.mutableRundown ? structuredClone(sourceRundown) : sourceRundown;
+  const rundown = options.mutableRundown ? cloneRundown(sourceRundown) : sourceRundown;
  const customFields = options.mutableCustomFields ? structuredClone(projectCustomFields) : projectCustomFields;

  /**
@@ -707,21 +727,25 @@ export const customFieldMutation = {
 * Expose function to add an initial rundown to the system
 */
 export function init(initialRundown: Readonly<Rundown>, initialCustomFields: Readonly<CustomFields>) {
-  const rundown = structuredClone(initialRundown);
+  const rundown = cloneRundown(initialRundown);
  const customFields = structuredClone(initialCustomFields);
  const processedData = processRundown(rundown, customFields, { mutate: true });

-  // update the cache values
-  cachedRundown.id = rundown.id;
-  cachedRundown.title = rundown.title;
  projectCustomFields = customFields;

  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
  const { previousEvent, latestEvent, previousEntry, entries, order, ...metadata } = processedData;
-  cachedRundown.entries = entries;
-  cachedRundown.order = order;
-  cachedRundown.flatOrder = metadata.flatEntryOrder;
-  cachedRundown.revision = rundown.revision;
+
+  // a fresh object, so that the record already stored for a previously loaded rundown keeps
+  // pointing at that rundown's data - see the note on cachedRundown
+  cachedRundown = {
+    id: rundown.id,
+    title: rundown.title,
+    entries,
+    order,
+    flatOrder: metadata.flatEntryOrder,
+    revision: rundown.revision,
+  };
  rundownMetadata = metadata;

  // defer writing to the database
@@ -33,7 +33,7 @@ import {
 import { makeNewRundown } from '../../models/dataModel.js';
 import type { ErrorEmitter } from '../../utils/parserUtils.js';
 import { RundownMetadata } from './rundown.types.js';
-import { calculateDayOffset, cleanupCustomFields } from './rundown.utils.js';
+import { calculateDayOffset, cleanupCustomFields, cloneEntryData } from './rundown.utils.js';

 /**
 * Parse a rundowns object along with the project custom fields
@@ -234,7 +234,7 @@ export function makeRundownMetadata(customFields: CustomFields, options?: { muta
  };

  function process<T extends OntimeEntry>(entry: T, childOfGroup: EntryId | null): T {
-    return processEntry(rundownMeta, customFields, mutate ? entry : structuredClone(entry), childOfGroup);
+    return processEntry(rundownMeta, customFields, mutate ? entry : cloneEntryData(entry), childOfGroup);
  }

  function getMetadata(): ProcessedRundownMetadata {
@@ -39,6 +39,7 @@ import {
 import { parseRundown } from './rundown.parser.js';
 import type { RundownMetadata } from './rundown.types.js';
 import {
+  cloneRundown,
  generateEvent,
  getFirstInsertId,
  getIntegerAndFraction,
@@ -626,7 +627,7 @@ export async function editCustomField(
    // ... reassign references in the background rundowns
    for (const rundownId of Object.keys(projectRundowns)) {
      if (rundownId !== rundown.id) {
-        const backgroundRundown = structuredClone(projectRundowns[rundownId]);
+        const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
        customFieldMutation.renameUsages(backgroundRundown, oldKey, newKey);
        await updateBackgroundRundown(rundownId, backgroundRundown);
      }
@@ -666,7 +667,7 @@ export async function deleteCustomField(key: CustomFieldKey, projectRundowns: Pr
  // remove references in the background rundowns
  for (const rundownId of Object.keys(projectRundowns)) {
    if (rundownId !== rundown.id) {
-      const backgroundRundown = structuredClone(projectRundowns[rundownId]);
+      const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
      customFieldMutation.removeUsages(backgroundRundown, key);
      await updateBackgroundRundown(rundownId, backgroundRundown);
    }
@@ -846,7 +847,7 @@ export async function duplicateExistingRundown(id: string) {
  const dataProvider = getDataProvider();
  const rundown = dataProvider.getRundown(id);

-  const duplicatedRundown: Rundown = structuredClone(rundown);
+  const duplicatedRundown: Rundown = cloneRundown(rundown);
  duplicatedRundown.id = generateId();
  duplicatedRundown.title = `Copy of ${rundown.title}`;
  duplicatedRundown.revision = 0;
@@ -33,6 +33,7 @@ import {
  makeString,
  maxDuration,
  validateEndAction,
+  validateGroupTimerType,
  validateTimerType,
  validateTimes,
 } from 'ontime-utils';
@@ -180,6 +181,9 @@ export function createGroupPatch(originalGroup: OntimeGroup, patchGroup: Partial
    note: makeString(patchGroup.note, originalGroup.note),
    entries: patchGroup.entries ?? originalGroup.entries,
    targetDuration: maybeTargetDuration(),
+    useGroupTimer:
+      typeof patchGroup.useGroupTimer === 'boolean' ? patchGroup.useGroupTimer : originalGroup.useGroupTimer,
+    timerType: validateGroupTimerType(patchGroup.timerType, originalGroup.timerType),
    colour: makeString(patchGroup.colour, originalGroup.colour),
    revision: originalGroup.revision,
    timeStart: originalGroup.timeStart,
@@ -329,7 +333,7 @@ export function mergeRundownPreservingFields(
    const structure = isOntimeGroup(incomingEntry)
      ? { entries: incomingEntry.entries }
      : { parent: incomingEntry.parent };
-    entries[id] = structuredClone({ ...merged, ...structure });
+    entries[id] = cloneEntryData({ ...merged, ...structure });
  }

  return {
@@ -499,6 +503,61 @@ export function cloneSimpleRundownEntry(entry: OntimeEntry, newId: EntryId): Ont
  throw new Error(`Unsupported entry type for cloning: ${entry}`);
 }

+/**
+ * Fast, shape-aware clone of a single entry, preserving its identity (id, revision, etc).
+ * Drop-in replacement for `structuredClone(entry)`
+ */
+export function cloneEntryData<T extends OntimeEntry>(entry: T): T {
+  switch (entry.type) {
+    case SupportedEntry.Event: {
+      const clone: OntimeEvent = { ...entry };
+      if (clone.custom) clone.custom = { ...clone.custom };
+      if (clone.triggers) clone.triggers = clone.triggers.map((trigger) => ({ ...trigger }));
+      return clone as T;
+    }
+    case SupportedEntry.Group: {
+      const clone: OntimeGroup = { ...entry };
+      if (clone.custom) clone.custom = { ...clone.custom };
+      if (clone.entries) clone.entries = clone.entries.slice();
+      return clone as T;
+    }
+    case SupportedEntry.Milestone: {
+      const clone: OntimeMilestone = { ...entry };
+      if (clone.custom) clone.custom = { ...clone.custom };
+      return clone as T;
+    }
+    case SupportedEntry.Delay:
+      return { ...entry } as T;
+    default: {
+      // exhaustiveness guard: a new member of `SupportedEntry` is named in the error here
+      const unhandled: never = entry;
+      throw new Error(`Unsupported entry type for cloning: ${(unhandled as OntimeEntry).type}`);
+    }
+  }
+}
+
+/**
+ * Fast, shape-aware clone of a whole rundown.
+ * Drop-in replacement for `structuredClone(rundown)`: every entry (and its nested
+ * `custom` / `triggers` / `entries` containers) gets its own copy, so callers can mutate
+ * the result freely without touching the source - same contract as structuredClone,
+ * at a fraction of the cost since we skip the generic serialization algorithm.
+ */
+export function cloneRundown(rundown: Readonly<Rundown>): Rundown {
+  const entries: RundownEntries = {};
+  for (const id in rundown.entries) {
+    entries[id] = cloneEntryData(rundown.entries[id]);
+  }
+  return {
+    id: rundown.id,
+    title: rundown.title,
+    revision: rundown.revision,
+    order: rundown.order.slice(),
+    flatOrder: rundown.flatOrder.slice(),
+    entries,
+  };
+}
+
 /**
 * Utility for calculating if the current events should have a day offset
 * @param current the current event under test
@@ -464,9 +464,8 @@ export async function upload(sheetId: string, options: ImportMap) {
    sheetOrder.forEach((entryId, index) => {
      const isGroupEnd = entryId.startsWith('group-end-');
      const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
-      const entry = isGroupEnd
-        ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
-        : structuredClone(rundown.entries[id]);
+      // cellRequestFromEvent only reads the entry to build a cell request, no clone is needed
+      const entry = isGroupEnd ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup) : rundown.entries[id];
      updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
    });
  } catch (e) {
@@ -206,6 +206,7 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
  eventStore.init({
    clock: state.clock,
    timer: state.timer,
+    groupTimer: state.groupTimer,
    message: { ...runtimeStorePlaceholder.message },
    offset: state.offset,
    rundown: state.rundown,
@@ -101,8 +101,16 @@ function getCustomFields(): Readonly<CustomFields> {
  return db.data.customFields;
 }

+/**
+ * Stores a rundown, replacing any existing entry for the same key.
+ * Takes ownership of `newData` and stores it by reference - the caller must not mutate it
+ * afterward. Every call site either hands over a freshly-built object it never touches again,
+ * or (for the loaded rundown) the cache's own long-lived object, which is already the single
+ * source of truth for that data - aliasing it here costs nothing and avoids a second full
+ * deep copy of the rundown on every commit.
+ */
 async function setRundown(rundownKey: string, newData: Rundown): ReadonlyPromise<ProjectRundowns> {
-  db.data.rundowns[rundownKey] = structuredClone(newData);
+  db.data.rundowns[rundownKey] = newData;
  await persist();
  return db.data.rundowns;
 }
@@ -4,12 +4,17 @@ import { DatabaseModel } from 'ontime-types';
 * Merges a partial ontime project into a given ontime project
 */
 export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseModel>): DatabaseModel {
-  const deepExisting = structuredClone(existing);
-  const deepNewData = structuredClone(newData);
+  // rundowns are merged separately below by reference (only the top-level map is copied,
+  // same as the other properties here) - deep-cloning them here would be wasted work,
+  // since a project's rundowns are by far the largest part of this object
+  const { rundowns: existingRundowns, ...existingRest } = existing;
+  const { rundowns: newRundowns = {}, ...newDataRest } = newData;
+
+  const deepExisting = structuredClone(existingRest);
+  const deepNewData = structuredClone(newDataRest);

  // destructure each property to simplify merging not provided ie: ...{} has no effect
  const {
-    rundowns = {},
    project = {},
    settings = {},
    viewSettings = {},
@@ -19,7 +24,7 @@ export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseMode
  } = deepNewData;

  return {
-    rundowns: { ...existing.rundowns, ...rundowns },
+    rundowns: { ...existingRundowns, ...newRundowns },
    project: { ...deepExisting.project, ...project },
    settings: { ...deepExisting.settings, ...settings },
    viewSettings: { ...deepExisting.viewSettings, ...viewSettings },
@@ -39,6 +39,8 @@ export const stageRundown: Rundown = {
      note: '',
      entries: ['9bf60f', 'bf71a2', 'c2697f', 'fa593e', 'a8b0b3'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#339E4E',
      custom: {},
      revision: 0,
@@ -172,6 +174,8 @@ export const stageRundown: Rundown = {
      note: '',
      entries: ['0aaa7d'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#3E75E8',
      custom: {},
      revision: 0,
@@ -219,6 +223,8 @@ export const stageRundown: Rundown = {
      note: '',
      entries: ['02afca', '75ce86', 'e10ed9', '07df89'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#339E4E',
      custom: {},
      revision: 0,
@@ -360,6 +366,8 @@ export const backstageRundown: Rundown = {
      note: '',
      entries: ['bs0101', 'bs0102', 'bs0103', 'bs0104'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#A790F5',
      custom: {},
      revision: 0,
@@ -476,6 +484,8 @@ export const backstageRundown: Rundown = {
      note: '',
      entries: ['bs0201', 'bs0202', 'bs0203', 'bs0204'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#339E4E',
      custom: {},
      revision: 0,
@@ -588,6 +598,8 @@ export const backstageRundown: Rundown = {
      note: '',
      entries: ['bs0301'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#3E75E8',
      custom: {},
      revision: 0,
@@ -634,6 +646,8 @@ export const backstageRundown: Rundown = {
      note: '',
      entries: ['bs0401', 'bs0402', 'bs0403', 'bs0404'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#339E4E',
      custom: {},
      revision: 0,
@@ -768,6 +782,8 @@ export const broadcastRundown: Rundown = {
      note: '',
      entries: ['br0101', 'br0102', 'br0103'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#ED3333',
      custom: {},
      revision: 0,
@@ -851,6 +867,8 @@ export const broadcastRundown: Rundown = {
      note: '',
      entries: ['br0201', 'br0202', 'br0203', 'br0204'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#339E4E',
      custom: {},
      revision: 0,
@@ -959,6 +977,8 @@ export const broadcastRundown: Rundown = {
      note: '',
      entries: ['br0301', 'br0302'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#3E75E8',
      custom: {},
      revision: 0,
@@ -1029,6 +1049,8 @@ export const broadcastRundown: Rundown = {
      note: '',
      entries: ['br0401', 'br0402', 'br0403'],
      targetDuration: null,
+      useGroupTimer: false,
+      timerType: TimerType.CountDown,
      colour: '#339E4E',
      custom: {},
      revision: 0,
@@ -4,6 +4,7 @@ import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND, dayInMs, millisT
 import type { RuntimeState } from '../../stores/runtimeState.js';
 import {
  findDayOffset,
+  getGroupTimer,
  getCurrent,
  getElapsed,
  getExpectedFinish,
@@ -16,6 +17,91 @@ import {

 const asTimeOfDay = (value: number): RuntimeState['clock'] => value as RuntimeState['clock'];

+describe('getGroupTimer()', () => {
+  const makeState = (patch: Partial<RuntimeState> = {}) =>
+    ({
+      clock: asTimeOfDay(10_000),
+      groupNow: {
+        duration: 20_000,
+      },
+      rundown: {
+        actualGroupStart: 5_000,
+      },
+      timer: {
+        addedTime: 4_000,
+        current: 1_000,
+        elapsed: 99_000,
+        phase: TimerPhase.Danger,
+        playback: Playback.Play,
+      },
+      ...patch,
+    }) as RuntimeState;
+
+  it('returns null outside a group', () => {
+    expect(getGroupTimer(makeState({ groupNow: null }))).toBeNull();
+  });
+
+  it('derives elapsed and remaining time from the group start and duration', () => {
+    expect(getGroupTimer(makeState())).toMatchObject({
+      addedTime: 0,
+      current: 15_000,
+      duration: 20_000,
+      elapsed: 5_000,
+      expectedFinish: null,
+      phase: TimerPhase.Default,
+      playback: Playback.Play,
+      secondaryTimer: null,
+      startedAt: 5_000,
+    });
+  });
+
+  it('does not inherit event timer progress or added time', () => {
+    const first = getGroupTimer(makeState());
+    const second = getGroupTimer(
+      makeState({
+        timer: {
+          ...makeState().timer,
+          addedTime: -8_000,
+          current: -50_000,
+          elapsed: 500_000,
+        },
+      }),
+    );
+
+    expect(second).toEqual(first);
+  });
+
+  it('keeps running while the loaded event is paused', () => {
+    const timer = getGroupTimer(makeState({ timer: { ...makeState().timer, playback: Playback.Pause } }));
+
+    expect(timer?.playback).toBe(Playback.Play);
+  });
+
+  it('handles a group running across midnight', () => {
+    const timer = getGroupTimer(
+      makeState({
+        clock: asTimeOfDay(1_000),
+        rundown: { ...makeState().rundown, actualGroupStart: 86_399_000 },
+      }),
+    );
+
+    expect(timer).toMatchObject({ current: 18_000, elapsed: 2_000 });
+  });
+
+  it('uses the event phase before the group starts and overtime afterwards', () => {
+    const pending = getGroupTimer(
+      makeState({
+        rundown: { ...makeState().rundown, actualGroupStart: null },
+        timer: { ...makeState().timer, phase: TimerPhase.Pending },
+      }),
+    );
+    const overtime = getGroupTimer(makeState({ clock: asTimeOfDay(30_001) }));
+
+    expect(pending).toMatchObject({ current: 20_000, elapsed: null, phase: TimerPhase.Pending });
+    expect(overtime).toMatchObject({ current: -5_001, elapsed: 25_001, phase: TimerPhase.Overtime });
+  });
+});
+
 describe('getElapsed()', () => {
  it('returns active elapsed time from startedAt without add-time adjustments', () => {
    const state = {
@@ -7,6 +7,7 @@ import {
  findPreviousPlayableId,
  getEventAtIndex,
  getShouldClockUpdate,
+  getShouldGroupTimerUpdate,
  getShouldOffsetUpdate,
  getShouldTimerUpdate,
  isNewSecond,
@@ -95,6 +96,34 @@ describe('getShouldTimerUpdate()', () => {
  });
 });

+describe('getShouldGroupTimerUpdate()', () => {
+  const timer: TimerState = {
+    addedTime: 0,
+    current: 10_000,
+    duration: 10_000,
+    elapsed: 0,
+    expectedFinish: null,
+    phase: TimerPhase.Default,
+    playback: Playback.Play,
+    secondaryTimer: null,
+    startedAt: 0,
+  };
+
+  it('updates when a group timer appears or disappears', () => {
+    expect(getShouldGroupTimerUpdate(null, timer)).toBe(true);
+    expect(getShouldGroupTimerUpdate(timer, null)).toBe(true);
+  });
+
+  it('does not repeatedly publish an absent group timer', () => {
+    expect(getShouldGroupTimerUpdate(null, null)).toBe(false);
+  });
+
+  it('uses normal timer tick semantics while a group timer exists', () => {
+    expect(getShouldGroupTimerUpdate(timer, { ...timer, current: 9_500 })).toBe(false);
+    expect(getShouldGroupTimerUpdate(timer, { ...timer, current: 8_999 })).toBe(true);
+  });
+});
+
 describe('getShouldOffsetUpdate()', () => {
  const baseOffset: Offset = {
    absolute: 0,
@@ -20,11 +20,12 @@ import { triggerAutomations } from '../../api-data/automation/automation.service
 import { triggerReportEntry } from '../../api-data/report/report.service.js';
 import { getCurrentRundown, getEntryWithId, getRundownMetadata } from '../../api-data/rundown/rundown.dao.js';
 import { RundownMetadata } from '../../api-data/rundown/rundown.types.js';
+import { cloneEntryData } from '../../api-data/rundown/rundown.utils.js';
 import { logger } from '../../classes/Logger.js';
 import { timerConfig } from '../../setup/config.js';
 import { eventStore } from '../../stores/EventStore.js';
 import * as runtimeState from '../../stores/runtimeState.js';
-import type { RuntimeState } from '../../stores/runtimeState.js';
+import type { RuntimeState, RuntimeStateSnapshot } from '../../stores/runtimeState.js';
 import { EventTimer } from '../EventTimer.js';
 import { restoreService } from '../restore-service/restore.service.js';
 import type { RestorePoint } from '../restore-service/restore.type.js';
@@ -35,6 +36,7 @@ import {
  findPreviousPlayableId,
  getEventAtIndex,
  getShouldClockUpdate,
+  getShouldGroupTimerUpdate,
  getShouldOffsetUpdate,
  getShouldTimerUpdate,
  isNewSecond,
@@ -50,11 +52,11 @@ class RuntimeService {
  private lastIntegrationTimerValue = -1;

  /** last known state */
-  static previousState: RuntimeState;
+  static previousState: RuntimeStateSnapshot;

  constructor(eventTimer: EventTimer) {
    this.eventTimer = eventTimer;
-    RuntimeService.previousState = {} as RuntimeState;
+    RuntimeService.previousState = {} as RuntimeStateSnapshot;
  }

  @broadcastResult
@@ -709,6 +711,12 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
      RuntimeService.previousState.timer = { ...state.timer };
    }

+    const updateGroupTimer = getShouldGroupTimerUpdate(RuntimeService.previousState.groupTimer, state.groupTimer);
+    if (updateGroupTimer) {
+      batch.add('groupTimer', state.groupTimer);
+      RuntimeService.previousState.groupTimer = state.groupTimer ? { ...state.groupTimer } : null;
+    }
+
    /**
     * clock has changed by a second or more.
     * or the timer updated so we ensure that the timer and clock ticks are in sync
@@ -754,7 +762,7 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
      }
      // at this point we know that either the id or the contents has changed
      batch.add(key, currentEntry as RuntimeStore[K]); // we know that there is the necessary overlap in the types to cast this
-      RuntimeService.previousState[key] = structuredClone(currentEntry);
+      RuntimeService.previousState[key] = currentEntry ? cloneEntryData(currentEntry) : null;
      return true;
    }

@@ -54,6 +54,15 @@ export function getShouldTimerUpdate(previousValue: TimerState | undefined, curr
  );
 }

+export function getShouldGroupTimerUpdate(
+  previousValue: TimerState | null | undefined,
+  currentValue: TimerState | null,
+): boolean {
+  if (previousValue === undefined) return true;
+  if (previousValue === null || currentValue === null) return previousValue !== currentValue;
+  return getShouldTimerUpdate(previousValue, currentValue);
+}
+
 /**
 * Checks whether we should update the offset values
 * - `mode` triggers update
@@ -1,4 +1,4 @@
-import { Day, MaybeNumber, TimeOfDay, TimerPhase } from 'ontime-types';
+import { Day, MaybeNumber, Playback, TimeOfDay, TimerPhase, TimerState } from 'ontime-types';
 import { MILLIS_PER_HOUR, checkIsNow, dayInMs, isPlaybackActive } from 'ontime-utils';

 import type { RuntimeState } from '../stores/runtimeState.js';
@@ -111,6 +111,37 @@ export function getElapsed(state: RuntimeState): MaybeNumber {
  return Math.max(0, activeElapsed);
 }

+/**
+ * Derives a timer for the active group from wall-clock time.
+ * Event timer controls such as pause and add time intentionally do not affect it.
+ */
+export function getGroupTimer(state: RuntimeState): TimerState | null {
+  if (state.groupNow === null) {
+    return null;
+  }
+
+  const { actualGroupStart } = state.rundown;
+  const elapsed = actualGroupStart === null ? null : getTimeSinceStart(state.clock, actualGroupStart);
+  const current = elapsed === null ? state.groupNow.duration : state.groupNow.duration - elapsed;
+
+  let phase = state.timer.phase;
+  if (actualGroupStart !== null) {
+    phase = current < 0 ? TimerPhase.Overtime : TimerPhase.Default;
+  }
+
+  return {
+    addedTime: 0,
+    current,
+    duration: state.groupNow.duration,
+    elapsed,
+    expectedFinish: null,
+    phase,
+    playback: actualGroupStart === null ? state.timer.playback : Playback.Play,
+    secondaryTimer: null,
+    startedAt: actualGroupStart,
+  };
+}
+
 function getTimeSinceStart(clock: TimeOfDay, startedAt: number): number {
  if (clock < startedAt) {
    return clock + dayInMs - startedAt;
@@ -13,6 +13,7 @@ import {
  Playback,
  Rundown,
  RundownState,
+  RuntimeStore,
  TimeOfDay,
  TimerPhase,
  TimerState,
@@ -39,6 +40,7 @@ import {
  getCurrent,
  getElapsed,
  getExpectedFinish,
+  getGroupTimer,
  getRuntimeOffset,
  getTimerPhase,
  hasCrossedMidnight,
@@ -104,7 +106,9 @@ const runtimeState: RuntimeState = {
  _startDayOffset: null,
 };

-export function getState(): Readonly<RuntimeState> {
+export type RuntimeStateSnapshot = RuntimeState & Pick<RuntimeStore, 'groupTimer'>;
+
+export function getState(): Readonly<RuntimeStateSnapshot> {
  // create a shallow copy of the state
  return {
    ...runtimeState,
@@ -115,6 +119,7 @@ export function getState(): Readonly<RuntimeState> {
    offset: { ...runtimeState.offset },
    rundown: { ...runtimeState.rundown },
    timer: { ...runtimeState.timer },
+    groupTimer: getGroupTimer(runtimeState),
    _timer: { ...runtimeState._timer },
    _rundown: { ...runtimeState._rundown },
  };
@@ -36,6 +36,10 @@ Remove comments that:

 Update adjacent comments with code. Stale comments are defects.

+Add a short comment immediately above every React `useEffect` describing the external synchronization or lifecycle
+responsibility it owns. Explain non-obvious reasons or constraints when they matter; for files with multiple effects, a
+brief responsibility label is useful even when the mechanics are straightforward.
+
 ## Naming and types

 - Prefer Ontime terms over vague `data`, `result`, `item`.
@@ -19,29 +19,3 @@ test('message control sends messages to screens', async ({ context }) => {

  await expect(featurePage.getByText('TIME NOW')).toBeVisible();
 });
-
-test('message control drives the stage screen state', async ({ context }) => {
-  const editorPage = await context.newPage();
-  const featurePage = await context.newPage();
-
-  await editorPage.goto('/messagecontrol');
-  await featurePage.goto('/timer');
-  await featurePage.waitForLoadState('load', { timeout: 5000 });
-
-  // the secondary line defaults to an aux timer, the select is what puts our text on screen
-  await editorPage.getByPlaceholder('Message shown as secondary text in stage timer').fill('testing secondary');
-  await editorPage.getByRole('combobox').click();
-  await editorPage.getByRole('option', { name: 'Message' }).click();
-  await expect(featurePage.getByText('testing secondary')).toBeVisible();
-
-  await editorPage.getByTestId('toggle timer blackout').click();
-  await expect(featurePage.locator('.blackout')).toHaveClass(/blackout--active/);
-
-  // clearing returns the screen to normal, but keeps what the operator typed
-  await editorPage.getByTestId('clear screen').click();
-  await expect(featurePage.locator('.blackout')).not.toHaveClass(/blackout--active/);
-  await expect(featurePage.getByText('testing secondary')).toHaveCount(0);
-  await expect(editorPage.getByPlaceholder('Message shown as secondary text in stage timer')).toHaveValue(
-    'testing secondary',
-  );
-});
@@ -222,15 +222,57 @@ test('Delete event', async ({ page }) => {
  await expect(page.getByRole('button', { name: 'Create Group' })).toBeVisible();
 });

-test('Find in rundown', async ({ page }) => {
+test('Finder searches the rundown and reveals a result', async ({ page }) => {
  await page.goto('/rundown');
-  await expect(page.getByTestId('panel-rundown')).toBeVisible();
+  await page.getByRole('button', { name: 'Edit' }).click();

+  // clear rundown
+  await page.getByRole('button', { name: 'Rundown menu' }).click();
+  await page.getByRole('menuitem', { name: 'Clear all' }).click();
+  await page.getByRole('button', { name: 'Delete all' }).click();
+  await expect(page.getByTestId('rundown-event')).toHaveCount(0);
+
+  // two events, where the one we are looking for is identified only by its note
+  await page.getByRole('button', { name: 'Create Event' }).click();
+  await expect(page.getByTestId('rundown-event')).toHaveCount(1);
+  await page.getByTestId('entry-1').click();
+  await page.getByTestId('entry__title').press('Escape');
+  await page.getByTestId('rundown-event').locator('div').filter({ hasText: '1' }).press('Alt+E');
+  await expect(page.getByTestId('rundown-event')).toHaveCount(2);
+
+  await page.getByTestId('entry-1').getByTestId('entry__title').fill('opening');
+  await page.getByTestId('entry-1').getByTestId('entry__title').press('Enter');
+  await page.getByTestId('entry-2').getByTestId('entry__title').fill('closing');
+  await page.getByTestId('entry-2').getByTestId('entry__title').press('Enter');
+
+  await page.getByTestId('entry-2').click();
+  await page.getByLabel('Note', { exact: true }).fill('remember the zebrafish');
+  await page.getByLabel('Note', { exact: true }).press('Tab');
+
+  // the shortcut has to work from a focused field, which is where it is usually reached for
+  await page.getByTestId('entry-2').getByTestId('entry__title').click();
  await page.keyboard.press('ControlOrMeta+f');
-  await expect(page.getByPlaceholder('Search...')).toBeVisible();
+  await expect(page.getByPlaceholder('Search...')).toBeFocused();

-  await page.keyboard.press('Escape');
+  // a bare query reaches the note, and the result names the field it matched
+  await page.getByPlaceholder('Search...').fill('zebrafish');
+  await expect(page.getByTestId('finder-result')).toHaveCount(1);
+  await expect(page.getByTestId('finder-result-match')).toContainText('Note');
+
+  // a badge scopes the search to one field, without putting syntax in the input
+  const titleFilter = page.getByTestId('finder-filters').getByRole('button', { name: 'Title', exact: true });
+  await titleFilter.click();
+  await expect(page.getByPlaceholder('Search...')).toHaveValue('zebrafish');
+  await expect(page.getByTestId('finder-result')).toHaveCount(0);
+
+  // pressing it again searches every field once more
+  await titleFilter.click();
+  await expect(page.getByTestId('finder-result')).toHaveCount(1);
+
+  // choosing a result closes the finder and selects the entry in the rundown
+  await page.getByPlaceholder('Search...').press('Enter');
  await expect(page.getByPlaceholder('Search...')).toBeHidden();
+  await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toHaveAttribute('data-selected', 'true');
 });

 test('Open settings', async ({ page }) => {
@@ -1,6 +1,6 @@
 {
  "name": "ontime",
-  "version": "4.12.0",
+  "version": "4.13.0",
  "description": "Time keeping for live events",
  "keywords": [
    "ontime",
@@ -1,5 +1,5 @@
 {
-  "version": "4.12.0",
+  "version": "4.13.0",
  "name": "ontime-types",
  "type": "module",
  "main": "./src/index.ts",
@@ -44,6 +44,8 @@ export type OntimeGroup = OntimeBaseEvent & {
  note: string;
  entries: EntryId[];
  targetDuration: MaybeNumber;
+  useGroupTimer: boolean;
+  timerType: TimerType;
  colour: string;
  custom: EntryCustomFields;
  // !==== RUNTIME METADATA ====! //
@@ -17,6 +17,7 @@ export const runtimeStorePlaceholder: Readonly<RuntimeStore> = {
    secondaryTimer: null, // change on every update
    startedAt: null, // change can only be initiated by user
  },
+  groupTimer: null,
  message: {
    timer: {
      text: '',
@@ -9,6 +9,7 @@ export type RuntimeStore = {
  // timer data
  clock: number;
  timer: TimerState;
+  groupTimer: TimerState | null;

  // messages service
  message: MessageState;
@@ -34,7 +34,14 @@ export {
  group as groupDef,
  milestone as milestoneDef,
 } from './src/rundown-utils/entryDefinitions.js';
-export { createDelay, createEvent, createGroup, createMilestone, makeString } from './src/rundown-utils/entryUtils.js';
+export {
+  createDelay,
+  createEvent,
+  createGroup,
+  createMilestone,
+  makeString,
+  validateGroupTimerType,
+} from './src/rundown-utils/entryUtils.js';

 // time format utils
 export {
@@ -52,6 +52,8 @@ export const group: Omit<OntimeGroup, 'id'> = {
  note: '',
  entries: [],
  targetDuration: null,
+  useGroupTimer: false,
+  timerType: TimerType.CountDown,
  colour: '',
  custom: {},
  // !==== RUNTIME METADATA ====! //
@@ -1,5 +1,5 @@
 import type { OntimeDelay, OntimeEvent, OntimeGroup, OntimeMilestone } from 'ontime-types';
-import { SupportedEntry, TimeStrategy } from 'ontime-types';
+import { SupportedEntry, TimeStrategy, TimerType } from 'ontime-types';

 import { generateId } from '../generate-id/generateId.js';
 import { validateEndAction, validateTimerType } from '../validate-events/validateEvent.js';
@@ -67,6 +67,8 @@ export function createGroup(patch?: Partial<OntimeGroup>): OntimeGroup {
    note: patch.note ?? '',
    entries: patch.entries ?? [],
    targetDuration: patch.targetDuration ?? null,
+    useGroupTimer: patch.useGroupTimer === true,
+    timerType: validateGroupTimerType(patch.timerType),
    colour: makeString(patch.colour, ''),
    custom: patch.custom ?? {},
    revision: 0,
@@ -77,6 +79,16 @@ export function createGroup(patch?: Partial<OntimeGroup>): OntimeGroup {
  };
 }

+export function validateGroupTimerType(
+  value: unknown,
+  fallback: unknown = TimerType.CountDown,
+): TimerType.CountDown | TimerType.CountUp {
+  if (value === TimerType.CountDown || value === TimerType.CountUp) {
+    return value;
+  }
+  return fallback === TimerType.CountUp ? TimerType.CountUp : TimerType.CountDown;
+}
+
 /**
 * Creates a new milestone from an optional patch
 */
Author	SHA1	Message	Date
Carlos Valente	9d2c86d6be	feat: count to group completion	2026-09-05 08:36:57 +02:00
Carlos Valente	9ec12f4927	docs(llm): request for useeffect documentation	2026-08-28 12:29:12 +02:00
Carlos Valente	4c08ca2908	feat(timer): playing sound on time end	2026-08-28 12:29:12 +02:00
Carlos Valente	265b167600	bump version to 4.13.0	2026-08-28 12:04:02 +02:00
Carlos Valente	eb7b2a5c4b	refactor(finder): improve feature UX Search every text field with optional filters, keep result selection stable, and expose clearer match context and counts. Cover query parsing, matching, mixed-entry indexing, and the reveal flow.	2026-08-28 11:41:44 +02:00
Carlos Valente	e0ae9f7f09	refactor(log): use ToggleButton for filters Reuse the shared toggle abstraction while preserving the existing filter behaviour and accessible labels.	2026-08-28 11:41:44 +02:00
Carlos Valente	b0c778fa62	feat(buttons): add ToggleButton component Keep toggle styling and the accessible pressed state coupled in one reusable button.	2026-08-28 11:41:44 +02:00
Carlos Valente	98d3b1f6f3	chore(license): resolver has permissive license	2026-08-28 08:40:17 +02:00
Carlos Valente	d9dd147d4b	refactor(server): replace defensive copies with cow patterns	2026-08-26 20:17:34 +02:00