fix: keep group visible as header for the running event

bump version to 4.13.0
refactor(finder): improve feature UX
2026-08-28 10:29:11 +00:00 · 2026-08-28 12:22:11 +02:00 · 2026-08-28 12:04:02 +02:00 · 2026-08-28 11:41:44 +02:00 · 2026-08-28 11:41:44 +02:00 · 2026-08-28 11:41:44 +02:00
35 changed files with 1392 additions and 419 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} />;
+}
@@ -2,8 +2,8 @@ import { MaybeString } from 'ontime-types';
 import { RefObject, useCallback, useEffect } from 'react';

 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef>,
+  componentRef: RefObject<ComponentRef | null>,
+  scrollRef: RefObject<ScrollRef | null>,
  topOffset: number,
 ) {
  if (!componentRef.current || !scrollRef.current) {
@@ -17,11 +17,17 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
  scrollRef.current.scrollTo({ top, behavior: 'smooth' });
 }

+type TopOffset = number | (() => number);
+
+function resolveTopOffset(topOffset: TopOffset) {
+  return typeof topOffset === 'function' ? topOffset() : topOffset;
+}
+
 interface UseFollowComponentProps {
  followRef: RefObject<HTMLElement | null>;
  scrollRef: RefObject<HTMLElement | null>;
  doFollow: boolean;
-  topOffset?: number;
+  topOffset?: TopOffset;
  setScrollFlag?: (newValue: boolean) => void;
  followTrigger?: MaybeString; // this would be an entry id or null
 }
@@ -44,18 +50,17 @@ export default function useFollowComponent({
      setScrollFlag?.(true);
      // Use requestAnimationFrame to ensure the component is fully loaded
      window.requestAnimationFrame(() => {
-        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
+        // resolve the offset after layout, so that measured values are up to date
+        scrollToComponent(followRef, scrollRef, resolveTopOffset(topOffset));
        setScrollFlag?.(false);
      });
    }
  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);

  const scrollToRefComponent = useCallback(
-    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
+    (componentRef = followRef, containerRef = scrollRef, offset?: number) => {
      if (componentRef && containerRef) {
-        // @ts-expect-error -- we know this are not null
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        scrollToComponent(componentRef!, containerRef!, offset);
+        scrollToComponent(componentRef, containerRef, offset ?? resolveTopOffset(topOffset));
      }
    },
    [followRef, scrollRef, topOffset],
@@ -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>
@@ -18,6 +18,13 @@
  padding-bottom: 95vh;
 }

+/* Bounds the sticky header to its group and restores the surrounding list gap. */
+.groupSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .editPrompt {
  position: fixed;
  z-index: $zindex-dialog;
@@ -1,5 +1,5 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

 import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -54,11 +54,20 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
+
+  const getStickyOffset = useCallback(() => {
+    const header = stickyHeaderRef.current;
+    // Preserve the list gap below the sticky header.
+    return header ? header.offsetHeight + 2 : 0;
+  }, []);
+  const getTopOffset = useCallback(() => selectedOffset + getStickyOffset(), [getStickyOffset]);
+
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    topOffset: selectedOffset,
+    topOffset: getTopOffset,
    followTrigger: selectedEventId,
  });

@@ -82,15 +91,16 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (selectedRef?.current && scrollRef?.current) {
-      const selectedRect = selectedRef.current.getBoundingClientRect();
-      const scrollerRect = scrollRef.current.getBoundingClientRect();
-      if (selectedRect && scrollerRect) {
-        const distanceFromTop = selectedRect.top - scrollerRect.top;
-        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
-        setLockAutoScroll(hasScrolledOutOfThreshold);
-      }
+    if (!selectedRef.current || !scrollRef.current) {
+      return;
    }
+
+    const selectedRect = selectedRef.current.getBoundingClientRect();
+    const scrollerRect = scrollRef.current.getBoundingClientRect();
+    // Keep the threshold relative to the visible rows below the sticky header.
+    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
+    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
+    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -186,13 +196,14 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
              }

              return (
-                <Fragment key={entry.id}>
+                <div className={style.groupSection} key={entry.id}>
                  <OperatorGroup
-                    key={entry.id}
+                    ref={isCurrentParent ? stickyHeaderRef : undefined}
                    title={entry.title}
                    colour={entry.colour}
                    count={entry.entries.length}
                    duration={entry.duration}
+                    isLive={isCurrentParent}
                  />
                  {entry.entries.map((nestedEntryId) => {
                    const nestedEntry = rundown.entries[nestedEntryId];
@@ -239,7 +250,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                      />
                    );
                  })}
-                </Fragment>
+                </div>
              );
            }
            return null;
@@ -3,17 +3,28 @@
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  border-left: 0.35rem solid var(--group-colour, $gray-500);
-  background-color: $gray-1350;
-  background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
+  /* The inline opaque group colour prevents rows showing through the sticky header. */
  font-size: 1.25rem;
  font-weight: 600;

+  position: sticky;
+  /* Cover the list padding so rows cannot scroll above the header. */
+  top: -0.25rem;
+  z-index: 1;
+
  display: flex;
  align-items: center;
  gap: 1rem;
  letter-spacing: 0;
 }

+/* Keep the live indicator legible over any group colour without competing with the live event fill. */
+.live {
+  box-shadow:
+    inset 0 0 0 2px $ui-black,
+    inset 0 0 0 4px $active-indicator;
+}
+
 .title {
  flex: 1 1 auto;
  min-width: 0;
@@ -1,6 +1,6 @@
-import { CSSProperties, memo } from 'react';
+import { type CSSProperties, type Ref, memo } from 'react';

-import { getAccessibleColour } from '../../../common/utils/styleUtils';
+import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration } from '../../../common/utils/time';

 import style from './OperatorGroup.module.scss';
@@ -10,15 +10,21 @@ interface OperatorGroup {
  colour: string;
  count: number;
  duration: number;
+  isLive: boolean;
+  ref?: Ref<HTMLDivElement>;
 }

 export default memo(OperatorGroup);
-function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
+function OperatorGroup({ title, colour, count, duration, isLive, ref }: OperatorGroup) {
  const groupColour = colour || '#929292';
  const groupColours = getAccessibleColour(groupColour);

  return (
-    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
+    <div
+      className={cx([style.group, isLive && style.live])}
+      style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}
+      ref={ref}
+    >
      <span className={style.title}>{title}</span>
      <span className={style.meta}>
        <span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
@@ -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} />
@@ -103,6 +103,19 @@ $item-height: 3.5rem;
    padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
  }

+  /* Flex prevents row margins collapsing and bounds the sticky header to its group. */
+  .sub-section {
+    display: flex;
+    flex-direction: column;
+
+    /* The select view renders the same cards in a flat list. */
+    .sub--group {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
  /* ====================== LIST-ITEM ======================*/
  .sub {
    margin: 2px;
@@ -196,9 +209,14 @@ $item-height: 3.5rem;

  .sub--group {
    box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
-    background:
+    /* The opaque base prevents rows showing through; background shorthand cannot layer this colour. */
+    background-color: var(--background-color-override, $viewer-background-color);
+    background-image:
      linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
-      var(--card-background-color-override, $viewer-card-bg-color);
+      linear-gradient(
+        var(--card-background-color-override, $viewer-card-bg-color),
+        var(--card-background-color-override, $viewer-card-bg-color)
+      );

    .sub__binder {
      background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
@@ -230,6 +248,16 @@ $item-height: 3.5rem;
    }
  }

+  /* Reserve the green fill for the running event. */
+  .sub--group.sub--live {
+    box-shadow: inset 0 0 0 2px $active-green;
+  }
+
+  /* Keep the armed state quieter than the live ring. */
+  .sub--group.sub--armed {
+    box-shadow: inset 0 0 0 2px $gray-1000;
+  }
+
  .sub__title {
    grid-area: title;
    padding-bottom: 0.5rem;
@@ -1,6 +1,6 @@
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
@@ -22,6 +22,7 @@ import {
  CountdownTarget,
  extendEventData,
  getIsLive,
+  groupSubscriptionTargets,
  isOutsideRange,
  preferredFormat12,
  preferredFormat24,
@@ -48,11 +49,22 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
+
+  const sections = useMemo(() => groupSubscriptionTargets(subscribedEvents), [subscribedEvents]);
+
+  // Responsive sizing and wrapped titles make the sticky header height variable, so measure it at scroll time.
+  const getStickyOffset = useCallback(() => {
+    const header = stickyHeaderRef.current;
+    // Preserve the combined margins between the header and running event.
+    return header ? header.offsetHeight + 4 : 0;
+  }, []);
+
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    topOffset: 0,
+    topOffset: getStickyOffset,
    followTrigger: selectedEventId,
  });

@@ -75,15 +87,16 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (selectedRef?.current && scrollRef?.current) {
-      const selectedRect = selectedRef.current.getBoundingClientRect();
-      const scrollerRect = scrollRef.current.getBoundingClientRect();
-      if (selectedRect && scrollerRect) {
-        const distanceFromTop = selectedRect.top - scrollerRect.top;
-        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
-        setLockAutoScroll(hasScrolledOutOfThreshold);
-      }
+    if (!selectedRef.current || !scrollRef.current) {
+      return;
    }
+
+    const selectedRect = selectedRef.current.getBoundingClientRect();
+    const scrollerRect = scrollRef.current.getBoundingClientRect();
+    // Keep the threshold relative to the visible rows below the sticky header.
+    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
+    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
+    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -98,41 +111,63 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  return (
    <div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-      {subscribedEvents.map((event) => {
-        // while a group is live, surface the running event's title as the secondary line
-        const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
-        const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
-        const isGroupedEvent = !event.isGroup && Boolean(event.parent);
-        const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
-        // a subscribed group is live when any of its children is the selected/running event
-        const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
-        const isArmed = !isLive && activeEntryId === selectedEventId;
-        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
-        const displayTitle = getPropertyValue(event, mainSource ?? 'title');
+      {sections.map((section) => {
+        const rows = section.group ? [section.group, ...section.events] : section.events;
+        // the running event anchors the scroll, the group header stays pinned above it
+        const anchorId = section.events.find((event) => getIsLive(event.id, selectedEventId, playback))?.id ?? null;
+
        return (
-          <div
-            key={event.id}
-            ref={isLive ? selectedRef : undefined}
-            className={cx([
-              'sub',
-              isLive && 'sub--live',
-              isArmed && 'sub--armed',
-              event.isGroup && 'sub--group',
-              isGroupedEvent && 'sub--in-group',
-            ])}
-            data-testid={event.cue}
-          >
-            <div
-              className='sub__binder'
-              style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
-            />
-            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
-            <SubscriptionStatus event={countdownEvent} />
-            <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
-              {event.isGroup && <span className='sub__eyebrow'>Group</span>}
-              {displayTitle}
-            </div>
-            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
+          <div key={section.group?.id ?? rows[0].id} className='sub-section'>
+            {rows.map((event) => {
+              // while a group is live, surface the running event's title as the secondary line
+              const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
+              const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
+              const isGroupedEvent = !event.isGroup && Boolean(event.parent);
+              const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
+              // a subscribed group is live when any of its children is the selected/running event
+              const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
+              const isArmed = !isLive && activeEntryId === selectedEventId;
+              // only ever hand the ref to a single row, sharing it would null it out on the next commit
+              const isAnchor = isLive && (anchorId === null || event.id === anchorId);
+              const rowRef = isAnchor ? selectedRef : event.isGroup && anchorId ? stickyHeaderRef : undefined;
+              const countdownEvent = extendEventData(
+                event,
+                currentDay,
+                actualStart,
+                plannedStart,
+                offset,
+                mode,
+                reportData,
+              );
+              const displayTitle = getPropertyValue(event, mainSource ?? 'title');
+
+              return (
+                <div
+                  key={event.id}
+                  ref={rowRef}
+                  className={cx([
+                    'sub',
+                    isLive && 'sub--live',
+                    isArmed && 'sub--armed',
+                    event.isGroup && 'sub--group',
+                    isGroupedEvent && 'sub--in-group',
+                  ])}
+                  data-testid={event.cue}
+                >
+                  <div
+                    className='sub__binder'
+                    style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
+                  />
+                  <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+                  <SubscriptionStatus event={countdownEvent} />
+                  <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
+                    {event.isGroup && <span className='sub__eyebrow'>Group</span>}
+                    {displayTitle}
+                  </div>
+                  {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
+                </div>
+              );
+            })}
          </div>
        );
      })}
@@ -1,7 +1,7 @@
 import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';

 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { resolveSubscriptionTarget } from './countdown.utils';
+import { CountdownTarget, groupSubscriptionTargets, resolveSubscriptionTarget } from './countdown.utils';

 /**
 * Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
@@ -126,3 +126,89 @@ describe('resolveSubscriptionTarget()', () => {
    expect(result?.liveEntry).toBeNull();
  });
 });
+
+describe('groupSubscriptionTargets()', () => {
+  /**
+   * Resolves a group the same way the view does, so that the tests exercise the real target shape
+   * (a resolved group carries type Event, so the helper cannot rely on the entry type)
+   */
+  function resolveGroup(group: ExtendedEntry<OntimeGroup>, flat: ExtendedEntry<OntimeEntry>[]): CountdownTarget {
+    const resolved = resolveSubscriptionTarget(group, flat);
+    if (resolved === null) {
+      throw new Error('test setup: group has no playable children');
+    }
+    return resolved;
+  }
+
+  it('returns no sections for an empty subscription list', () => {
+    expect(groupSubscriptionTargets([])).toEqual([]);
+  });
+
+  it('gives each ungrouped event its own section', () => {
+    const e1 = makeEvent({ id: 'e1' });
+    const e2 = makeEvent({ id: 'e2' });
+
+    expect(groupSubscriptionTargets([e1, e2])).toEqual([
+      { group: null, events: [e1] },
+      { group: null, events: [e2] },
+    ]);
+  });
+
+  it('absorbs the children of a subscribed group into its section', () => {
+    const group = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const c2 = makeEvent({ id: 'c2', parent: 'g1' });
+    const resolved = resolveGroup(group, [group, c1, c2]);
+
+    expect(groupSubscriptionTargets([resolved, c1, c2])).toEqual([{ group: resolved, events: [c1, c2] }]);
+  });
+
+  it('keeps a subscribed group with no subscribed children as an empty section', () => {
+    const group = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const resolved = resolveGroup(group, [group, c1]);
+
+    expect(groupSubscriptionTargets([resolved])).toEqual([{ group: resolved, events: [] }]);
+  });
+
+  it('does not absorb an event which belongs to a different group', () => {
+    const group1 = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const group2 = makeGroup({ id: 'g2' });
+    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
+    const flat = [group1, c1, group2, c2];
+    const resolved1 = resolveGroup(group1, flat);
+    const resolved2 = resolveGroup(group2, flat);
+
+    expect(groupSubscriptionTargets([resolved1, c1, resolved2, c2])).toEqual([
+      { group: resolved1, events: [c1] },
+      { group: resolved2, events: [c2] },
+    ]);
+  });
+
+  it('does not absorb an event whose parent group is not subscribed', () => {
+    const group1 = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const group2 = makeGroup({ id: 'g2' });
+    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
+    const resolved1 = resolveGroup(group1, [group1, c1, group2, c2]);
+
+    // only the first group is subscribed, so the second group's child stands alone
+    expect(groupSubscriptionTargets([resolved1, c1, c2])).toEqual([
+      { group: resolved1, events: [c1] },
+      { group: null, events: [c2] },
+    ]);
+  });
+
+  it('closes a section when an ungrouped event follows a group', () => {
+    const group = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const e1 = makeEvent({ id: 'e1' });
+    const resolved = resolveGroup(group, [group, c1]);
+
+    expect(groupSubscriptionTargets([resolved, c1, e1])).toEqual([
+      { group: resolved, events: [c1] },
+      { group: null, events: [e1] },
+    ]);
+  });
+});
@@ -252,6 +252,44 @@ export function resolveSubscriptionTarget(
  };
 }

+/**
+ * A subscribed group along with the subscribed events which belong to it.
+ * Events without a subscribed parent group form their own section with no group.
+ */
+export type CountdownSection = {
+  group: CountdownTarget | null;
+  events: CountdownTarget[];
+};
+
+/**
+ * Folds the flat, rundown ordered subscription targets into sections.
+ * A group opens a section which absorbs the following targets that declare it as parent,
+ * which allows the group to be rendered as a sticky header for its own events.
+ */
+export function groupSubscriptionTargets(targets: CountdownTarget[]): CountdownSection[] {
+  const sections: CountdownSection[] = [];
+  let openSection: CountdownSection | null = null;
+
+  for (const target of targets) {
+    // resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
+    if (target.isGroup) {
+      openSection = { group: target, events: [] };
+      sections.push(openSection);
+      continue;
+    }
+
+    if (openSection?.group && target.parent === openSection.group.id) {
+      openSection.events.push(target);
+      continue;
+    }
+
+    openSection = null;
+    sections.push({ group: null, events: [target] });
+  }
+
+  return sections;
+}
+
 export function extendEventData(
  event: CountdownTarget,
  currentDay: number,
@@ -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 };
 }
@@ -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",
@@ -1,5 +1,7 @@
+import { deepEqual } from 'fast-equals';
 import {
  EndAction,
+  OntimeEntry,
  OntimeEvent,
  OntimeGroup,
  OntimeMilestone,
@@ -8,13 +10,21 @@ 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,
  deleteById,
  doesInvalidateMetadata,
  getIntegerAndFraction,
@@ -715,3 +725,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;
@@ -329,7 +329,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 +499,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) {
@@ -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 },
@@ -0,0 +1,226 @@
+import { Offset, OffsetMode, Playback, TimerPhase, TimerState, TimerType } from 'ontime-types';
+
+import { makeOntimeEvent, makeRundown } from '../../../api-data/rundown/__mocks__/rundown.mocks.js';
+import {
+  findNextPlayableId,
+  findNextPlayableWithCue,
+  findPreviousPlayableId,
+  getEventAtIndex,
+  getShouldClockUpdate,
+  getShouldOffsetUpdate,
+  getShouldTimerUpdate,
+  isNewSecond,
+} from '../runtime.utils.js';
+
+describe('isNewSecond()', () => {
+  it('is false while the value moves within the same second', () => {
+    // count down rounds up, so both resolve to second 2
+    expect(isNewSecond(1500, 1200)).toBe(false);
+  });
+
+  it('is true once the value crosses a second boundary', () => {
+    expect(isNewSecond(1001, 1000)).toBe(true);
+  });
+
+  it('rounds according to the given direction', () => {
+    // 1200 -> ceil 2 / floor 1, 1800 -> ceil 2 / floor 1
+    expect(isNewSecond(1200, 1800, TimerType.CountDown)).toBe(false);
+    expect(isNewSecond(1200, 1800, TimerType.CountUp)).toBe(false);
+    // 1200 -> ceil 2 / floor 1, 2200 -> ceil 3 / floor 2
+    expect(isNewSecond(1200, 2200, TimerType.CountDown)).toBe(true);
+    expect(isNewSecond(1200, 2200, TimerType.CountUp)).toBe(true);
+  });
+
+  it('treats null and undefined as second zero', () => {
+    expect(isNewSecond(undefined, null)).toBe(false);
+    expect(isNewSecond(null, 0)).toBe(false);
+    expect(isNewSecond(undefined, 500)).toBe(true);
+  });
+});
+
+describe('getShouldClockUpdate()', () => {
+  it('is false within the same second and true across the boundary', () => {
+    expect(getShouldClockUpdate(1000, 1999)).toBe(false);
+    expect(getShouldClockUpdate(1000, 2000)).toBe(true);
+  });
+});
+
+describe('getShouldTimerUpdate()', () => {
+  const baseTimer: TimerState = {
+    addedTime: 0,
+    current: 10000,
+    duration: 10000,
+    elapsed: 0,
+    expectedFinish: 10000,
+    phase: TimerPhase.Default,
+    playback: Playback.Play,
+    secondaryTimer: null,
+    startedAt: 0,
+  };
+
+  it('always updates when there is no previous state', () => {
+    expect(getShouldTimerUpdate(undefined, baseTimer)).toBe(true);
+  });
+
+  it('does not update while the timer ticks within the same second', () => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 9500 })).toBe(false);
+  });
+
+  it('updates when the timer crosses a second', () => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 8999 })).toBe(true);
+  });
+
+  it('updates when the secondary timer crosses a second', () => {
+    const previous = { ...baseTimer, secondaryTimer: 2000 };
+    // counting down rounds up, so 1999 is still second 2
+    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1999 })).toBe(false);
+    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1000 })).toBe(true);
+  });
+
+  it.each([
+    ['addedTime', { addedTime: 1 }],
+    ['duration', { duration: 1 }],
+    ['phase', { phase: TimerPhase.Warning }],
+    ['playback', { playback: Playback.Pause }],
+    ['startedAt', { startedAt: 1 }],
+  ])('updates immediately when %s changes', (_label, patch) => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(true);
+  });
+
+  it.each([
+    ['elapsed', { elapsed: 1 }],
+    ['expectedFinish', { expectedFinish: 1 }],
+  ])('does not update on %s alone, since it is derived', (_label, patch) => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(false);
+  });
+});
+
+describe('getShouldOffsetUpdate()', () => {
+  const baseOffset: Offset = {
+    absolute: 0,
+    relative: 0,
+    mode: OffsetMode.Absolute,
+    expectedGroupEnd: null,
+    expectedRundownEnd: null,
+    expectedFlagStart: null,
+  };
+
+  it('always updates when there is no previous state', () => {
+    expect(getShouldOffsetUpdate(undefined, baseOffset, false)).toBe(true);
+  });
+
+  it('updates on a mode change even when no dependency ticked', () => {
+    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset, mode: OffsetMode.Relative }, false)).toBe(true);
+  });
+
+  it('holds back value changes until a dependency ticks', () => {
+    const next = { ...baseOffset, absolute: 1000 };
+    expect(getShouldOffsetUpdate(baseOffset, next, false)).toBe(false);
+    expect(getShouldOffsetUpdate(baseOffset, next, true)).toBe(true);
+  });
+
+  it('does not update when a dependency ticked but nothing changed', () => {
+    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset }, true)).toBe(false);
+  });
+});
+
+describe('findPreviousPlayableId()', () => {
+  const order = ['1', '2', '3'];
+
+  it('returns undefined when there is nothing to play', () => {
+    expect(findPreviousPlayableId([])).toBeUndefined();
+  });
+
+  it('returns the first event when nothing is loaded', () => {
+    expect(findPreviousPlayableId(order)).toBe('1');
+  });
+
+  it('returns the preceding event', () => {
+    expect(findPreviousPlayableId(order, '3')).toBe('2');
+  });
+
+  it('stays on the first event when already at the top', () => {
+    expect(findPreviousPlayableId(order, '1')).toBe('1');
+  });
+
+  it('falls back to the first event when the loaded id is unknown', () => {
+    expect(findPreviousPlayableId(order, 'not-in-rundown')).toBe('1');
+  });
+});
+
+describe('findNextPlayableId()', () => {
+  const order = ['1', '2', '3'];
+
+  it('returns undefined when there is nothing to play', () => {
+    expect(findNextPlayableId([])).toBeUndefined();
+  });
+
+  it('returns the first event when nothing is loaded', () => {
+    expect(findNextPlayableId(order)).toBe('1');
+  });
+
+  it('returns the following event', () => {
+    expect(findNextPlayableId(order, '1')).toBe('2');
+  });
+
+  it('wraps to the first event from the last', () => {
+    expect(findNextPlayableId(order, '3')).toBe('1');
+  });
+
+  it('falls back to the first event when the loaded id is unknown', () => {
+    expect(findNextPlayableId(order, 'not-in-rundown')).toBe('1');
+  });
+});
+
+describe('findNextPlayableWithCue()', () => {
+  const rundown = makeRundown({
+    order: ['1', '2', '3', '4'],
+    entries: {
+      '1': makeOntimeEvent({ id: '1', cue: 'a' }),
+      '2': makeOntimeEvent({ id: '2', cue: 'b' }),
+      '3': makeOntimeEvent({ id: '3', cue: 'b', skip: true }),
+      '4': makeOntimeEvent({ id: '4', cue: 'b' }),
+    },
+  });
+  const order = ['1', '2', '3', '4'];
+
+  it('finds the next event with the given cue', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'b')?.id).toBe('2');
+  });
+
+  it('skips events which are not playable', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'b', 2)?.id).toBe('4');
+  });
+
+  it('wraps around to the start of the rundown', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'a', 2)?.id).toBe('1');
+  });
+
+  it('excludes the current event unless allowCurrent is set', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'b', 1)?.id).toBe('4');
+    expect(findNextPlayableWithCue(rundown, order, 'b', 1, true)?.id).toBe('2');
+  });
+
+  it('returns undefined when no event carries the cue', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'missing')).toBeUndefined();
+  });
+});
+
+describe('getEventAtIndex()', () => {
+  const rundown = makeRundown({
+    order: ['1', '2'],
+    entries: {
+      '1': makeOntimeEvent({ id: '1' }),
+      '2': makeOntimeEvent({ id: '2' }),
+    },
+  });
+
+  it('returns the event at the given index', () => {
+    expect(getEventAtIndex(rundown, ['1', '2'], 1)?.id).toBe('2');
+  });
+
+  it('returns undefined when the index is out of range', () => {
+    expect(getEventAtIndex(rundown, ['1', '2'], 5)).toBeUndefined();
+    expect(getEventAtIndex(rundown, [], 0)).toBeUndefined();
+  });
+});
@@ -20,6 +20,7 @@ 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';
@@ -754,7 +755,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;
    }

@@ -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",
Author	SHA1	Message	Date
Carlos Valente	417773e7a9	fix: keep group visible as header for the running event	2026-08-28 12:22:11 +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
Carlos Valente	9806f97d27	test(rundown): improve rundown utils coverage	2026-08-25 22:41:37 +02:00