perf(rundown): keep entry revisions in step with the server

An entry revision advances on every change to that entry, which makes it a
cheap marker for what has moved on in a rundown. The client did not maintain
it: an optimistic entry carried the old revision, so the entry the server
returned always differed from ours by that one field.

That difference is enough to defeat structural sharing. A new entries object
recomputes the rundown metadata, which fires the effect behind the list, which
re-renders every visible row. Editing one title on a fourteen entry rundown
cost eight structural and sixty-one attribute mutations, twice over.

- optimistic patches apply the same revision bump the server does, so an
  unchanged entry keeps its identity and a refetch costs nothing to render
- the rundown metadata memo keys on the fields the derivation reads, so a
  change of rundown revision alone no longer churns the list
- editing an entry now reads the server response, which is the authority on
  what was applied, and only writes when it differs from what we predicted

Measured on the same edit: eight to four structural, sixty-one to forty-one
attribute mutations. Both changes are needed, neither helps on its own.

Two bugs found on the way. A swap stored the pre increment revision, so
swapped entries were indistinguishable from untouched ones. The optimistic
batch edit spread the request envelope onto the entry rather than the patch,
so it never applied the edit it was predicting.

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

apps/client/src/AppRouter.tsx

@@ -3,6 +3,7 @@ import { ComponentType, Suspense, lazy, useEffect, useMemo } from 'react';
 import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
 
 import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
+import { EditableRundownScopeProvider } from './common/context/EditableRundownScopeProvider';
 import { PresetContext } from './common/context/PresetContext';
 import useUrlPresets from './common/hooks-query/useUrlPresets';
 import { useClientPath } from './common/hooks/useClientPath';
@@ -112,7 +113,9 @@ export default function AppRouter() {
           path='rundown'
           element={
             <EditorFeatureWrapper>
+              <EditableRundownScopeProvider rundownId={null}>
                 <RundownPanel />
+              </EditableRundownScopeProvider>
             </EditorFeatureWrapper>
           }
         />

apps/client/src/common/api/constants.ts

@@ -22,6 +22,14 @@ export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
 export const TRANSLATION = ['translation'];
 
+/**
+ * Cache key holding the data for a rundown.
+ * Before the loaded rundown is known there is no id to key by,
+ * and the data lives under the bootstrap alias.
+ */
+export const getRundownCacheKey = (rundownId: string) =>
+  rundownId ? getRundownQueryKey(rundownId) : CURRENT_RUNDOWN_QUERY_KEY;
+
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;
 

apps/client/src/common/context/EditableRundownScopeProvider.tsx

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+
+import { useScopedEntryActions } from '../hooks/useEntryAction';
+import { EntryActionsProvider } from './EntryActionsContext';
+import { RundownScopeProvider, useRundownScope, type RundownScopeProviderProps } from './RundownScopeContext';
+
+/**
+ * Rundown scope for subtrees which mutate entries.
+ * Actions are bound to the same rundown as the data, so the two cannot disagree.
+ */
+export function EditableRundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
+  return (
+    <RundownScopeProvider rundownId={rundownId}>
+      <ScopedEntryActions>{children}</ScopedEntryActions>
+    </RundownScopeProvider>
+  );
+}
+
+function ScopedEntryActions({ children }: PropsWithChildren) {
+  const { rundownId } = useRundownScope();
+  const actions = useScopedEntryActions(rundownId);
+
+  return <EntryActionsProvider actions={actions}>{children}</EntryActionsProvider>;
+}

apps/client/src/common/context/RundownScopeContext.tsx

@@ -0,0 +1,77 @@
+import { MaybeString, Rundown } from 'ontime-types';
+import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useRef } from 'react';
+
+import { getRundownCacheKey } from '../api/constants';
+import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
+import { ontimeQueryClient } from '../queryClient';
+import { createEventSelectionStore, type EventSelectionStoreApi } from '../stores/eventSelectionStore';
+
+export type RundownScopeValue = {
+  /** the rundown this subtree operates on */
+  rundownId: string;
+  /** whether this scope targets the rundown the runtime is playing */
+  isLoaded: boolean;
+  /** selection and cursor, scoped to this rundown */
+  selectionStore: EventSelectionStoreApi;
+};
+
+const RundownScopeContext = createContext<RundownScopeValue | null>(null);
+
+export interface RundownScopeProviderProps extends PropsWithChildren {
+  /** rundown to operate on, null follows the loaded rundown */
+  rundownId: MaybeString;
+}
+
+/**
+ * Declares which rundown a subtree reads from.
+ *
+ * Data hooks resolve their rundown from here, so components never need to know
+ * which rundown they operate on. Nest a provider to point part of the tree at a
+ * different rundown; the app mounts one at the root that follows the loaded rundown.
+ */
+export function RundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
+  const {
+    data: { loaded },
+  } = useProjectRundowns();
+
+  const targetId = rundownId ?? loaded;
+
+  // the store reads the rundown lazily, the ref keeps it pointing at the current target
+  const targetIdRef = useRef(targetId);
+
+  const selectionStoreRef = useRef<EventSelectionStoreApi | null>(null);
+  if (selectionStoreRef.current === null) {
+    selectionStoreRef.current = createEventSelectionStore(() =>
+      ontimeQueryClient.getQueryData<Rundown>(getRundownCacheKey(targetIdRef.current)),
+    );
+  }
+  const selectionStore = selectionStoreRef.current;
+
+  // a selection refers to entries of a single rundown, it cannot survive a change of target
+  useEffect(() => {
+    targetIdRef.current = targetId;
+    selectionStore.getState().clearSelectedEvents();
+  }, [selectionStore, targetId]);
+
+  const value = useMemo(
+    (): RundownScopeValue => ({
+      rundownId: targetId,
+      // an unresolved target is not the loaded rundown, it is not yet any rundown
+      isLoaded: Boolean(loaded) && targetId === loaded,
+      selectionStore,
+    }),
+    [targetId, loaded, selectionStore],
+  );
+
+  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
+}
+
+export function useRundownScope(): RundownScopeValue {
+  const context = useContext(RundownScopeContext);
+
+  if (!context) {
+    throw new Error('useRundownScope must be used within a RundownScopeProvider');
+  }
+
+  return context;
+}

apps/client/src/common/hooks-query/useLoadedRundown.ts

@@ -0,0 +1,81 @@
+import { EntryId, OntimeEntry } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { useSelectedEventId } from '../hooks/useSocket';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+import { flattenRundown, useRundownById } from './useRundownById';
+
+/**
+ * Rundown data for surfaces which only ever work against the rundown being played:
+ * the viewers, the operator, app settings and the runtime overview.
+ *
+ * These take no part in a rundown scope, they resolve the loaded rundown directly.
+ * Anything which can be pointed at a background rundown reads from its scope instead.
+ */
+export function useLoadedRundown() {
+  const {
+    data: { loaded },
+  } = useProjectRundowns();
+  return useRundownById(loaded);
+}
+
+export function useLoadedRundownWithMetadata() {
+  const { data, status } = useLoadedRundown();
+  const selectedEventId = useSelectedEventId();
+  const { entries, flatOrder } = data;
+  const rundownMetadata = useMemo(
+    () => getRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
+  return { data, status, rundownMetadata };
+}
+
+export function useLoadedFlatRundown() {
+  const { data, status } = useLoadedRundown();
+  const flatRundown = useMemo(() => flattenRundown(data), [data]);
+  return { data: flatRundown, rundownId: data.id, status };
+}
+
+export function useLoadedFlatRundownWithMetadata() {
+  const { data, status } = useLoadedRundown();
+  const selectedEventId = useSelectedEventId();
+  const { entries, flatOrder } = data;
+  const rundownWithMetadata = useMemo(
+    () => getFlatRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
+  return { data: rundownWithMetadata, status };
+}
+
+/**
+ * Provides access to a partial rundown based on a filter callback
+ *
+ * Callers MUST memoize the callback with useCallback to prevent
+ * re-filtering on every render.
+ */
+export function useLoadedPartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useLoadedFlatRundownWithMetadata();
+  const filteredData = useMemo(() => data.filter(cb), [data, cb]);
+  return { data: filteredData, status };
+}
+
+/**
+ * Hook to get a specific entry by ID from the loaded rundown.
+ * Runtime ids (the playing event, its group, the next flag) only exist here.
+ */
+export function useLoadedEntry(entryId: EntryId | null): OntimeEntry | null {
+  const { data: rundown } = useLoadedRundown();
+
+  if (entryId === null) return null;
+  return rundown.entries[entryId] ?? null;
+}
+
+export function useLoadedRundownAuxData() {
+  const { data, status } = useLoadedRundown();
+  const filteredData = useMemo(() => {
+    const { title, id } = data;
+    return { title, id };
+  }, [data]);
+  return { data: filteredData, status };
+}

apps/client/src/common/hooks-query/useRundown.ts

@@ -1,62 +1,38 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { EntryId, OntimeEntry } from 'ontime-types';
-import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
+import { useMemo } from 'react';
-import { useEffect, useMemo } from 'react';
 
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { useRundownScope } from '../context/RundownScopeContext';
-import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
-import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
-import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { useProjectRundowns } from './useProjectRundowns';
+import { flattenRundown, useRundownById } from './useRundownById';
-
-// revision is -1 so that the remote revision is higher
-const cachedRundownPlaceholder: Rundown = {
-  id: 'default',
-  title: '',
-  order: [],
-  flatOrder: [],
-  entries: {},
-  revision: -1,
-};
 
 /**
- * Normalised rundown data for the currently loaded rundown.
+ * Normalised rundown data for the rundown of the enclosing scope
- *
- * Bootstraps via the `/current` alias so the first paint is a single round-trip,
- * independent of the project rundown list. Once the loaded id is known, the
- * query key swaps to the id-keyed cache that is shared with `useRundownById`.
  */
 export default function useRundown() {
-  const queryClient = useQueryClient();
+  const { rundownId } = useRundownScope();
-  const {
+  return useRundownById(rundownId);
-    data: { loaded: loadedRundownId },
+}
-  } = useProjectRundowns();
 
-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+/**
-    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
+ * Runtime state only describes the loaded rundown,
-    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
+ * a scope pointed elsewhere must not show a playing event
-    refetchInterval: queryRefetchIntervalSlow,
+ */
-  });
+export function useScopedSelectedEventId(): EntryId | null {
-
+  const { isLoaded } = useRundownScope();
-  // Seed the id-keyed cache when fetching via the bootstrap alias
+  const selectedEventId = useSelectedEventId();
-  useEffect(() => {
+  return isLoaded ? selectedEventId : null;
-    if (!data || loadedRundownId) return;
-    queryClient.setQueryData(getRundownQueryKey(data.id), data);
-  }, [data, loadedRundownId, queryClient]);
-
-  // Once we have the ID, drop the temporary current cache
-  useEffect(() => {
-    if (!loadedRundownId) return;
-    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
-  }, [loadedRundownId, queryClient]);
-
-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 
 export function useRundownWithMetadata() {
   const { data, status } = useRundown();
-  const selectedEventId = useSelectedEventId();
+  const selectedEventId = useScopedSelectedEventId();
-  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  // key on the fields the derivation reads, a revision only change must not churn the list
+  const { entries, flatOrder } = data;
+  const rundownMetadata = useMemo(
+    () => getRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
   return { data, status, rundownMetadata };
 }
 
@@ -66,41 +42,23 @@ export function useRundownWithMetadata() {
  */
 export function useFlatRundown() {
   const { data, status } = useRundown();
-
+  const flatRundown = useMemo(() => flattenRundown(data), [data]);
-  const flatRundown = useMemo(() => {
-    if (data.revision === -1) {
-      return [];
-    }
-    return data.flatOrder.map((id) => data.entries[id]).filter((entry): entry is OntimeEntry => entry !== undefined);
-  }, [data]);
 
   return { data: flatRundown, rundownId: data.id, status };
 }
 
 export function useFlatRundownWithMetadata() {
   const { data, status } = useRundown();
-  const selectedEventId = useSelectedEventId();
+  const selectedEventId = useScopedSelectedEventId();
 
-  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  const { entries, flatOrder } = data;
+  const rundownWithMetadata = useMemo(
+    () => getFlatRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
   return { data: rundownWithMetadata, status };
 }
 
-/**
- * Provides access to a partial rundown based on a filter callback
- *
- * Callers MUST memoize the callback with useCallback to prevent
- * re-filtering on every render.
- *
- */
-export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useFlatRundownWithMetadata();
-  const filteredData = useMemo(() => {
-    return data.filter(cb);
-  }, [data, cb]);
-
-  return { data: filteredData, status };
-}
-
 /**
  * Hook to get a specific entry by ID from the rundown
  */
@@ -110,30 +68,3 @@ export function useEntry(entryId: EntryId | null): OntimeEntry | null {
   if (entryId === null) return null;
   return rundown.entries[entryId] ?? null;
 }
-
-export function useRundownAuxData() {
-  const { data, status } = useRundown();
-  const filteredData = useMemo(() => {
-    const { title, id } = data;
-    return { title, id };
-  }, [data]);
-  return { data: filteredData, status };
-}
-
-/**
- * Provides access to a specific rundown by ID.
- * When rundownId is null/undefined the query is disabled and returns the placeholder.
- */
-export function useRundownById(rundownId: string | null | undefined) {
-  const enabled = Boolean(rundownId);
-
-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: getRundownQueryKey(rundownId ?? ''),
-    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
-    enabled,
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
-  });
-
-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
-}

apps/client/src/common/hooks-query/useRundownById.ts

@@ -0,0 +1,66 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { OntimeEntry, Rundown } from 'ontime-types';
+import { useEffect, useRef } from 'react';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { CURRENT_RUNDOWN_QUERY_KEY, getRundownCacheKey, getRundownQueryKey } from '../api/constants';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
+
+// revision is -1 so that the remote revision is higher
+const cachedRundownPlaceholder: Rundown = {
+  id: 'default',
+  title: '',
+  order: [],
+  flatOrder: [],
+  entries: {},
+  revision: -1,
+};
+
+/**
+ * Provides access to a specific rundown by ID.
+ *
+ * Without an ID we do not yet know which rundown is loaded, so we bootstrap via
+ * the `/current` alias to keep the first paint to a single round-trip, then seed
+ * the id-keyed cache that every other reader shares.
+ */
+export function useRundownById(rundownId: string | null | undefined) {
+  const queryClient = useQueryClient();
+  const id = rundownId ?? '';
+  const isBootstrap = id === '';
+
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: getRundownCacheKey(id),
+    queryFn: ({ signal }) => (isBootstrap ? fetchCurrentRundown({ signal }) : fetchRundown(id, { signal })),
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  // Seed the id-keyed cache when fetching via the bootstrap alias
+  useEffect(() => {
+    if (!data || !isBootstrap) return;
+    queryClient.setQueryData(getRundownQueryKey(data.id), data);
+  }, [data, isBootstrap, queryClient]);
+
+  // Once we have the ID, drop the temporary current cache.
+  // Only the reader which bootstrapped may do so, others are still relying on it.
+  const didBootstrap = useRef(isBootstrap);
+  useEffect(() => {
+    if (isBootstrap || !didBootstrap.current) return;
+    didBootstrap.current = false;
+    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }, [isBootstrap, queryClient]);
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+}
+
+/**
+ * Builds a flat rundown from the order and entries fields
+ */
+export function flattenRundown(rundown: Rundown): OntimeEntry[] {
+  if (rundown.revision === -1) {
+    return [];
+  }
+  return rundown.flatOrder
+    .map((id) => rundown.entries[id])
+    .filter((entry): entry is OntimeEntry => entry !== undefined);
+}

apps/client/src/common/hooks-query/useScopedRundown.ts

@@ -1,54 +0,0 @@
-import { EntryId, Rundown } from 'ontime-types';
-import { useMemo } from 'react';
-
-import { useSelectedEventId } from '../hooks/useSocket';
-import { getFlatRundownMetadata, type ExtendedEntry } from '../utils/rundownMetadata';
-import { useProjectRundowns } from './useProjectRundowns';
-import { useRundownById } from './useRundown';
-
-export type RundownSource = {
-  rundownId: string | null;
-  rundown: Rundown;
-  flatRundown: ExtendedEntry[];
-  status: string;
-  selectedEventId: EntryId | null;
-};
-
-/**
- * Explicitly scoped rundown data for views that may operate on a non-loaded rundown.
- */
-export function useScopedRundown(rundownId: string | null): RundownSource {
-  const { data: projectRundowns } = useProjectRundowns();
-  return useRundownSource(rundownId, projectRundowns.loaded || null);
-}
-
-/**
- * Loaded-rundown source for views that must follow the active runtime rundown.
- */
-export function useLoadedRundownSource(): RundownSource {
-  const { data: projectRundowns } = useProjectRundowns();
-  const loadedRundownId = projectRundowns.loaded || null;
-  return useRundownSource(loadedRundownId, loadedRundownId);
-}
-
-function useRundownSource(rundownId: string | null, loadedRundownId: string | null): RundownSource {
-  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
-  const runtimeSelectedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
-  const { data: rundown, status } = useRundownById(rundownId);
-  const flatRundown = useMemo(
-    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
-    [effectiveSelectedEventId, rundown],
-  );
-
-  return useMemo(
-    () => ({
-      rundownId,
-      rundown,
-      flatRundown,
-      status,
-      selectedEventId: effectiveSelectedEventId,
-    }),
-    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
-  );
-}

apps/client/src/common/hooks/__tests__/useRundownSelection.test.ts

@@ -1,13 +1,13 @@
 import {
   FOLLOW_LOADED_RUNDOWN_ID,
-  getCuesheetRundownStorageKey,
+  getRundownSelectionStorageKey,
   resolveSelectedRundownId,
-} from '../useCuesheetRundownSelection';
+} from '../useRundownSelection';
 
-describe('useCuesheetRundownSelection helpers', () => {
+describe('useRundownSelection helpers', () => {
-  it('builds a project-scoped storage key', () => {
+  it('builds a namespace and project scoped storage key', () => {
-    expect(getCuesheetRundownStorageKey('http://localhost:4001', 'My Project')).toBe(
+    expect(getRundownSelectionStorageKey('cuesheet', 'http://localhost:4001', 'My Project')).toBe(
-      'cuesheet-selected-rundown:http://localhost:4001:My Project',
+      'rundown-selection:cuesheet:http://localhost:4001:My Project',
     );
   });
 

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

@@ -8,7 +8,6 @@ import {
   OntimeGroup,
   OntimeMilestone,
   PatchWithId,
-  ProjectRundownsList,
   Rundown,
   SupportedEntry,
   TimeField,
@@ -32,9 +31,10 @@ import {
   swapEventData,
 } from 'ontime-utils';
 import { useCallback, useMemo } from 'react';
+import isEqual from 'react-fast-compare';
 
 import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
-import { CURRENT_RUNDOWN_QUERY_KEY, PROJECT_RUNDOWNS, getRundownQueryKey } from '../api/constants';
+import { getRundownCacheKey } from '../api/constants';
 import {
   ReorderEntry,
   deleteEntries,
@@ -52,6 +52,7 @@ import {
   requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
+import { useRundownScope } from '../context/RundownScopeContext';
 import { useEditorSettings } from '../stores/editorSettings';
 
 export type EventOptions = Partial<{
@@ -64,22 +65,38 @@ export type EventOptions = Partial<{
   lastEventId: MaybeString;
 }>;
 
+/**
+ * Applies a patch the way the server does, revision included.
+ *
+ * An entry revision advances on every change to that entry, which makes it a
+ * cheap marker for whether an entry has moved on. The optimistic entry has to
+ * carry the revision the server will return, otherwise the two disagree and the
+ * refetch resolves to a different object for no reason.
+ * Mirrors applyPatchToEntry in the rundown service: delays carry no revision.
+ */
+function patchEntry(entry: OntimeEntry, patch: Partial<OntimeEntry>): OntimeEntry {
+  if (isOntimeEvent(entry) || isOntimeGroup(entry) || isOntimeMilestone(entry)) {
+    return { ...entry, ...patch, revision: entry.revision + 1 } as OntimeEntry;
+  }
+  return { ...entry, ...patch } as OntimeEntry;
+}
+
 type ClientInsertOptions = {
   after?: EntryId;
   before?: EntryId;
 };
 
 /**
- * Gather utilities for actions on entries in the loaded rundown.
+ * Gather utilities for actions on entries in the rundown of the enclosing scope.
  */
-export const useEntryActions = () => useEntryActionsForRundown(undefined);
+export const useEntryActions = () => useEntryActionsForRundown(useRundownScope().rundownId);
 
 /**
  * Gather utilities for actions on entries in an explicitly selected rundown.
  */
-export const useScopedEntryActions = (rundownId: string | null) => useEntryActionsForRundown(rundownId ?? '');
+export const useScopedEntryActions = (rundownId: MaybeString) => useEntryActionsForRundown(rundownId ?? '');
 
-function useEntryActionsForRundown(scopedRundownId: string | undefined) {
+function useEntryActionsForRundown(scopedRundownId: string) {
   const queryClient = useQueryClient();
   const {
     linkPrevious,
@@ -93,12 +110,8 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
   } = useEditorSettings();
 
   const resolveCurrentRundownQueryKey = useCallback(() => {
-    if (scopedRundownId !== undefined) {
+    return getRundownCacheKey(scopedRundownId);
-      return getRundownQueryKey(scopedRundownId);
+  }, [scopedRundownId]);
-    }
-    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
-    return loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
-  }, [queryClient, scopedRundownId]);
 
   /**
    * Returns the currently loaded rundown
@@ -325,8 +338,10 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
       if (previousData && eventId) {
         // optimistically update object
         const newRundown = { ...previousData.entries };
-        // @ts-expect-error -- we expect the events to be of same type
+        const previousEntry = newRundown[eventId];
-        newRundown[eventId] = { ...newRundown[eventId], ...newEvent };
+        if (previousEntry) {
+          newRundown[eventId] = patchEntry(previousEntry, newEvent);
+        }
         queryClient.setQueryData<Rundown>(queryKey, {
           id: previousData.id,
           title: previousData.title,
@@ -340,6 +355,23 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
       // Return a context with the previous and new events
       return { previousData, newEvent, queryKey };
     },
+    // the server is the authority on the applied patch, it may normalise what we sent
+    onSuccess: (response, _variables, context) => {
+      const serverEntry = response.data;
+      if (!serverEntry || !context?.queryKey) return;
+
+      const cachedRundown = queryClient.getQueryData<Rundown>(context.queryKey);
+      if (!cachedRundown) return;
+
+      // our optimistic entry usually describes the change exactly, writing an
+      // identical entry would discard the cached reference for nothing
+      if (isEqual(cachedRundown.entries[serverEntry.id], serverEntry)) return;
+
+      queryClient.setQueryData<Rundown>(context.queryKey, {
+        ...cachedRundown,
+        entries: { ...cachedRundown.entries, [serverEntry.id]: serverEntry },
+      });
+    },
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _newEvent, context) => {
       if (context?.previousData && context?.queryKey) {
@@ -512,10 +544,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
           if (Object.hasOwn(newRundown, eventId)) {
             const event = newRundown[eventId];
             if (isOntimeEvent(event)) {
-              newRundown[eventId] = {
+              newRundown[eventId] = patchEntry(event, data.data);
-                ...event,
-                ...data,
-              };
             }
           }
         });

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

@@ -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 | null>,
+  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef | null>,
+  scrollRef: RefObject<ScrollRef>,
   topOffset: number,
 ) {
   if (!componentRef.current || !scrollRef.current) {
@@ -21,16 +21,18 @@ interface UseFollowComponentProps {
   followRef: RefObject<HTMLElement | null>;
   scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
-  followTrigger: MaybeString; // this would be an entry id or null
+  topOffset?: number;
-  getTopOffset: () => number;
+  setScrollFlag?: (newValue: boolean) => void;
+  followTrigger?: MaybeString; // this would be an entry id or null
 }
 
 export default function useFollowComponent({
   followRef,
   scrollRef,
   doFollow,
+  topOffset = 100,
+  setScrollFlag,
   followTrigger,
-  getTopOffset,
 }: UseFollowComponentProps) {
   // when trigger moves, view should follow
   useEffect(() => {
@@ -39,17 +41,25 @@ export default function useFollowComponent({
     }
 
     if (followRef.current && scrollRef.current) {
+      setScrollFlag?.(true);
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
-        // resolve the offset after layout, so that measured values are up to date
+        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
-        scrollToComponent(followRef, scrollRef, getTopOffset());
+        setScrollFlag?.(false);
       });
     }
-  }, [followTrigger, doFollow, followRef, scrollRef, getTopOffset]);
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
 
-  const scrollToRefComponent = useCallback(() => {
+  const scrollToRefComponent = useCallback(
-    scrollToComponent(followRef, scrollRef, getTopOffset());
+    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
-  }, [followRef, scrollRef, getTopOffset]);
+      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);
+      }
+    },
+    [followRef, scrollRef, topOffset],
+  );
 
   return scrollToRefComponent;
 }

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

@@ -2,14 +2,21 @@ import { useSessionStorage } from '@mantine/hooks';
 import { startTransition, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 
-import { useOrderedProjectList } from '../../common/hooks-query/useProjectList';
-import { useProjectRundowns } from '../../common/hooks-query/useProjectRundowns';
 import { serverURL } from '../../externals';
+import { useOrderedProjectList } from '../hooks-query/useProjectList';
+import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
 
 export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;
 
-export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
+/** each surface keeps its own selection, so panels can point at different rundowns */
-  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
+export type RundownSelectionNamespace = 'cuesheet';
+
+export function getRundownSelectionStorageKey(
+  namespace: RundownSelectionNamespace,
+  server: string,
+  projectFilename: string,
+) {
+  return `rundown-selection:${namespace}:${server}:${projectFilename}`;
 }
 
 export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
@@ -17,14 +24,22 @@ export function resolveSelectedRundownId(storedSelectedRundownId: string | null,
   return FOLLOW_LOADED_RUNDOWN_ID;
 }
 
-export function useCuesheetRundownSelection() {
+/**
+ * Persisted choice of which rundown a surface operates on.
+ * The resolved id is meant to be handed to a rundown scope provider,
+ * where null means follow whichever rundown is loaded.
+ */
+export function useRundownSelection(namespace: RundownSelectionNamespace) {
   'use memo';
 
   const { data: projectRundowns } = useProjectRundowns();
   const {
     data: { lastLoadedProject },
   } = useOrderedProjectList();
-  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
+  const storageKey = useMemo(
+    () => getRundownSelectionStorageKey(namespace, serverURL, lastLoadedProject),
+    [namespace, lastLoadedProject],
+  );
   const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
     key: storageKey,
     defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
@@ -38,6 +53,8 @@ export function useCuesheetRundownSelection() {
   return {
     loadedRundownId,
     selectedRundownId,
+    /** id for the rundown scope, null follows the loaded rundown */
+    scopedRundownId: selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? null : selectedRundownId,
     projectRundowns: projectRundowns.rundowns,
     setSelectedRundownId: (rundownId: string) => {
       startTransition(() => {
@@ -52,7 +69,7 @@ export function useDirectLinkToBackgroundEdit() {
     data: { lastLoadedProject },
   } = useOrderedProjectList();
   const navigate = useNavigate();
-  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
+  const storageKey = getRundownSelectionStorageKey('cuesheet', serverURL, lastLoadedProject);
   const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });
 
   return useCallback(

apps/client/src/common/stores/__tests__/eventSelectionStore.test.ts

@@ -0,0 +1,64 @@
+import { Rundown, SupportedEntry } from 'ontime-types';
+
+import { createEventSelectionStore } from '../eventSelectionStore';
+
+function makeRundown(id: string, eventIds: string[]): Rundown {
+  return {
+    id,
+    title: id,
+    order: eventIds,
+    flatOrder: eventIds,
+    entries: Object.fromEntries(eventIds.map((entryId) => [entryId, { id: entryId, type: SupportedEntry.Event }])),
+    revision: 1,
+  } as unknown as Rundown;
+}
+
+describe('createEventSelectionStore', () => {
+  it('keeps selections of separate instances independent', () => {
+    const first = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
+    const second = createEventSelectionStore(() => makeRundown('rundown-b', ['b1', 'b2']));
+
+    first.getState().setSingleEntrySelection({ id: 'a1' });
+    second.getState().setSingleEntrySelection({ id: 'b2' });
+
+    expect(first.getState().cursor).toBe('a1');
+    expect(second.getState().cursor).toBe('b2');
+    expect(first.getState().selectedEvents).toEqual(new Set(['a1']));
+    expect(second.getState().selectedEvents).toEqual(new Set(['b2']));
+  });
+
+  it('resolves a shift range against the injected rundown', () => {
+    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2', 'a3']));
+
+    store.getState().setSelectedEvents({ id: 'a3', index: 2, selectMode: 'shift' });
+
+    // without an anchor the range runs from the top up to the clicked index
+    expect(store.getState().selectedEvents).toEqual(new Set(['a1', 'a2']));
+    expect(store.getState().anchoredIndex).toBe(2);
+  });
+
+  it('replaces the selection set so subscribers on the set re-render', () => {
+    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
+
+    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'click' });
+    const afterClick = store.getState().selectedEvents;
+
+    store.getState().setSelectedEvents({ id: 'a2', index: 1, selectMode: 'ctrl' });
+    const afterAdd = store.getState().selectedEvents;
+    expect(afterAdd).not.toBe(afterClick);
+    expect(afterAdd).toEqual(new Set(['a1', 'a2']));
+
+    store.getState().unselect('a1');
+    const afterUnselect = store.getState().selectedEvents;
+    expect(afterUnselect).not.toBe(afterAdd);
+    expect(afterUnselect).toEqual(new Set(['a2']));
+  });
+
+  it('does not select when the rundown is unavailable', () => {
+    const store = createEventSelectionStore(() => undefined);
+
+    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'shift' });
+
+    expect(store.getState().selectedEvents).toEqual(new Set());
+  });
+});

apps/client/src/common/stores/entryCopyStore.ts

@@ -1,14 +1,21 @@
+import { MaybeString } from 'ontime-types';
 import { create } from 'zustand';
 
 type EntryCopyStore = {
-  entryCopyId: string | null;
+  entryCopyId: MaybeString;
+  /** rundown the copied entry belongs to, so a paste knows whether it crosses rundowns */
+  entryCopyRundownId: MaybeString;
   entryCopyMode: 'copy' | 'cut';
-  setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
+  setEntryCopyId: (eventId: MaybeString, rundownId: MaybeString, mode?: 'copy' | 'cut') => void;
 };
 
+/**
+ * The clipboard is shared across rundowns so entries can be moved between them
+ */
 export const useEntryCopy = create<EntryCopyStore>()((set) => ({
   entryCopyId: null,
+  entryCopyRundownId: null,
   entryCopyMode: 'copy',
-  setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
+  setEntryCopyId: (entryCopyId: MaybeString, entryCopyRundownId: MaybeString, mode: 'copy' | 'cut' = 'copy') =>
-    set({ entryCopyId, entryCopyMode: mode }),
+    set({ entryCopyId, entryCopyRundownId, entryCopyMode: mode }),
 }));

apps/client/src/common/stores/eventSelectionStore.ts

@@ -0,0 +1,158 @@
+import { EntryId, MaybeNumber, Rundown, isOntimeEvent } from 'ontime-types';
+import { MouseEvent } from 'react';
+import { StoreApi } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+
+import { isMacOS } from '../utils/deviceUtils';
+
+export type SelectionMode = 'shift' | 'click' | 'ctrl';
+
+export interface EventSelectionStore {
+  selectedEvents: Set<EntryId>;
+  anchoredIndex: MaybeNumber;
+  cursor: EntryId | null;
+  entryMode: 'event' | 'single' | null;
+  scrollHandler: ((id: EntryId) => void) | null;
+  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
+  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
+  clearSelectedEvents: () => void;
+  clearMultiSelect: () => void;
+  unselect: (id: EntryId) => void;
+  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
+  scrollToEntry: (id: EntryId) => void;
+}
+
+export type EventSelectionStoreApi = StoreApi<EventSelectionStore>;
+
+/**
+ * Keeps track of the selected entries and selection mode
+ * Provides methods to update the selection based on user interactions
+ *
+ * One store instance exists per rundown scope, so panels showing different
+ * rundowns keep independent selections. The rundown the selection refers to is
+ * injected as `getRundown` rather than resolved from the loaded rundown.
+ */
+export function createEventSelectionStore(getRundown: () => Rundown | undefined): EventSelectionStoreApi {
+  return createStore<EventSelectionStore>()((set, get) => ({
+    selectedEvents: new Set(),
+    anchoredIndex: null,
+    cursor: null,
+    entryMode: null,
+    scrollHandler: null,
+    setSingleEntrySelection: ({ id }) => {
+      set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
+    },
+    setSelectedEvents: ({ id, index, selectMode }) => {
+      const { selectedEvents, anchoredIndex, entryMode } = get();
+
+      // if we are in single mode, we replace the selection and change the mode
+      if (entryMode === 'single') {
+        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+      }
+
+      // on click, we replace selection with event
+      if (selectMode === 'click') {
+        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+      }
+
+      // on ctrl + click, we toggle the selection of that event
+      if (selectMode === 'ctrl') {
+        const rundownData = getRundown();
+        if (!rundownData) return;
+
+        // if it doesnt exist, simply add to the list and set an anchor
+        if (!selectedEvents.has(id)) {
+          return set({
+            selectedEvents: new Set(selectedEvents).add(id),
+            anchoredIndex: index,
+            cursor: id,
+            entryMode: 'event',
+          });
+        }
+
+        // if event is already selected, we remove it from selection
+        // and set the anchor to the event after
+        const withoutId = new Set(selectedEvents);
+        withoutId.delete(id);
+
+        const nextIndex = rundownData.order.findIndex(
+          (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && withoutId.has(eventId),
+        );
+
+        // if we didnt find anything after, set the anchor to the last event
+        return set({
+          selectedEvents: withoutId,
+          anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
+          entryMode: 'event',
+        });
+      }
+
+      // on shift + click, we select a range of events up to the clicked event
+      if (selectMode === 'shift') {
+        const rundownData = getRundown();
+        if (!rundownData) return;
+
+        // get list of rundown with only ontime events
+        const eventIds: EntryId[] = [];
+        rundownData.flatOrder.forEach((eventId) => {
+          const event = rundownData.entries[eventId];
+          if (isOntimeEvent(event)) {
+            eventIds.push(event.id);
+          }
+        });
+
+        const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
+        const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
+
+        // create new set with range of ids from start to end
+        const selectedEventIds = eventIds.slice(start, end);
+
+        return set({
+          selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
+          anchoredIndex: index,
+          entryMode: 'event',
+        });
+      }
+    },
+    clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
+    clearMultiSelect: () => {
+      const { selectedEvents } = get();
+      const [firstSelected] = selectedEvents;
+      set({
+        selectedEvents: new Set(firstSelected ? [firstSelected] : []),
+        anchoredIndex: null,
+        entryMode: null,
+      });
+    },
+    unselect: (id: string) => {
+      const { entryMode, selectedEvents } = get();
+      const remaining = new Set(selectedEvents);
+      remaining.delete(id);
+      set({
+        selectedEvents: remaining,
+        entryMode: remaining.size === 0 ? null : entryMode,
+      });
+    },
+    // Sets the scroll handler for programmatic scrolling to entries
+    setScrollHandler: (handler) => set({ scrollHandler: handler }),
+    // Scrolls to the specified entry using the registered scroll handler
+    scrollToEntry: (id: EntryId) => {
+      const handler = get().scrollHandler;
+      if (handler) {
+        handler(id);
+      }
+    },
+  }));
+}
+
+export function getSelectionMode(event: MouseEvent): SelectionMode {
+  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
+    return 'ctrl';
+  }
+
+  if (event.shiftKey) {
+    return 'shift';
+  }
+
+  return 'click';
+}

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

@@ -242,12 +242,12 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
     return;
   }
 
-  // skip if we dont recognise the ID the revision is lower
   const queryKey = getRundownQueryKey(rundownId);
   const cachedRundown = ontimeQueryClient.getQueryData<{ revision: number }>(queryKey);
 
-  if (revision === cachedRundown?.revision) {
+  // we already have this change, or something newer
-    // we already have the latest change
+  // messages can arrive after a refetch has already brought in a later revision
+  if (revision !== null && cachedRundown !== undefined && revision <= cachedRundown.revision) {
     return;
   }
 

apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.tsx

@@ -4,8 +4,8 @@ import { IoTrashBin } from 'react-icons/io5';
 import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import { useLoadedRundown } from '../../../../common/hooks-query/useLoadedRundown';
 import useReport from '../../../../common/hooks-query/useReport';
-import useRundown from '../../../../common/hooks-query/useRundown';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -15,7 +15,7 @@ import style from './ReportSettings.module.scss';
 
 export default function ReportSettings() {
   const { data: reportData } = useReport();
-  const { data } = useRundown();
+  const { data } = useLoadedRundown();
 
   const clearReport = async () => await deleteAllReport();
   const downloadCSV = (combinedReport: CombinedReport[]) => {

apps/client/src/features/app-settings/panel/manage-panel/ManageRundowns.tsx

@@ -19,8 +19,8 @@ import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
+import { useDirectLinkToBackgroundEdit } from '../../../../common/hooks/useRundownSelection';
 import { cx } from '../../../../common/utils/styleUtils';
-import { useDirectLinkToBackgroundEdit } from '../../../../views/cuesheet/useCuesheetRundownSelection';
 import * as Panel from '../../panel-utils/PanelUtils';
 import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/SourcesPanel.tsx

@@ -24,7 +24,7 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../../common/components/modal/Modal';
-import useRundown from '../../../../../common/hooks-query/useRundown';
+import { useLoadedRundown } from '../../../../../common/hooks-query/useLoadedRundown';
 import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
@@ -59,7 +59,7 @@ export default function SourcesPanel() {
   const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
   const [completedRundownTitle, setCompletedRundownTitle] = useState('');
 
-  const { data: currentRundown } = useRundown();
+  const { data: currentRundown } = useLoadedRundown();
   const { applyImport } = useSpreadsheetImport();
   const navigate = useNavigate();
 

apps/client/src/features/operator/Operator.module.scss

@@ -18,12 +18,6 @@
   padding-bottom: 95vh;
 }
 
-.groupSection {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
 .editPrompt {
   position: fixed;
   z-index: $zindex-dialog;

apps/client/src/features/operator/Operator.tsx

@@ -1,5 +1,5 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -25,10 +25,7 @@ import { OperatorData, useOperatorData } from './useOperatorData';
 
 import style from './Operator.module.scss';
 
-/** Keeps the running event clear of the list edge when no group header is pinned above it */
+const selectedOffset = 50;
-const edgeOffset = 50;
-/** How far the running event may drift from where we placed it before we stop following */
-const followTolerance = 50;
 
 export default function OperatorLoader() {
   const { data, status } = useOperatorData();
@@ -57,20 +54,11 @@ 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);
-
-  // The header height varies with the viewport, so measure it at scroll time.
-  const getTopOffset = useCallback(() => {
-    const header = stickyHeaderRef.current;
-    // Sit right under the pinned header, so it covers the previous event instead of half of it.
-    return header ? header.offsetHeight + 2 : edgeOffset;
-  }, []);
-
   const scrollToComponent = useFollowComponent({
     followRef: selectedRef,
     scrollRef,
     doFollow: !lockAutoScroll,
-    getTopOffset,
+    topOffset: selectedOffset,
     followTrigger: selectedEventId,
   });
 
@@ -94,16 +82,15 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
 
   // prevent considering automated scrolls as user scrolls
   const handleUserScroll = () => {
-    if (!selectedRef.current || !scrollRef.current) {
+    if (selectedRef?.current && scrollRef?.current) {
-      return;
-    }
-
       const selectedRect = selectedRef.current.getBoundingClientRect();
       const scrollerRect = scrollRef.current.getBoundingClientRect();
-    // Measure the drift from where an automated scroll would place the event.
+      if (selectedRect && scrollerRect) {
-    const distanceFromTop = selectedRect.top - scrollerRect.top - getTopOffset();
+        const distanceFromTop = selectedRect.top - scrollerRect.top;
-    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > followTolerance;
+        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
         setLockAutoScroll(hasScrolledOutOfThreshold);
+      }
+    }
   };
   const throttledHandleScroll = throttle(handleUserScroll, 1000);
 
@@ -199,9 +186,9 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
               }
 
               return (
-                <div className={style.groupSection} key={entry.id}>
+                <Fragment key={entry.id}>
                   <OperatorGroup
-                    ref={isCurrentParent ? stickyHeaderRef : undefined}
+                    key={entry.id}
                     title={entry.title}
                     colour={entry.colour}
                     count={entry.entries.length}
@@ -252,7 +239,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                       />
                     );
                   })}
-                </div>
+                </Fragment>
               );
             }
             return null;

apps/client/src/features/operator/operator-group/OperatorGroup.module.scss

@@ -1,7 +1,6 @@
 .group {
   width: 100%;
-  /* Fixed: title and meta never wrap, and the group wrapper keeps the list from shrinking the header. */
+  min-height: 2.5rem;
-  height: 2.5rem;
   padding: 0.4rem 0.75rem;
   border-left: 0.35rem solid var(--group-colour, $gray-500);
   background-color: $gray-1350;
@@ -9,11 +8,6 @@
   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;

apps/client/src/features/operator/operator-group/OperatorGroup.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type Ref, memo } from 'react';
+import { CSSProperties, memo } from 'react';
 
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration } from '../../../common/utils/time';
@@ -10,16 +10,15 @@ interface OperatorGroup {
   colour: string;
   count: number;
   duration: number;
-  ref?: Ref<HTMLDivElement>;
 }
 
 export default memo(OperatorGroup);
-function OperatorGroup({ title, colour, count, duration, ref }: OperatorGroup) {
+function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
   const groupColour = colour || '#929292';
   const groupColours = getAccessibleColour(groupColour);
 
   return (
-    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties} ref={ref}>
+    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
       <span className={style.title}>{title}</span>
       <span className={style.meta}>
         <span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>

apps/client/src/features/operator/useOperatorData.ts

@@ -1,7 +1,7 @@
 import { CustomFields, Rundown, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import { useLoadedRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { RundownMetadataObject } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../../views/utils/viewLoader.utils';
@@ -14,7 +14,7 @@ export interface OperatorData {
 }
 
 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useLoadedRundownWithMetadata();
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const { data: settings, status: settingsStatus } = useSettings();
 

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-icons/tb';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useEntry } from '../../../common/hooks-query/useRundown';
+import { useLoadedEntry } from '../../../common/hooks-query/useLoadedRundown';
 import { useAutoTickingClock } from '../../../common/hooks/useAutoTickingClock';
 import {
   useCurrentGroupId,
@@ -210,7 +210,7 @@ export function MetadataTimes() {
 function GroupTimes() {
   const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
   const currentGroupId = useCurrentGroupId();
-  const group = useEntry(currentGroupId) as OntimeGroup | null;
+  const group = useLoadedEntry(currentGroupId) as OntimeGroup | null;
 
   const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
 
@@ -266,7 +266,7 @@ function GroupTimes() {
 function FlagTimes() {
   const { clock, mode, actualStart, plannedStart, playback, currentDay, phase } = useFlagTimerOverView();
   const { id, expectedStart } = useNextFlag();
-  const entry = useEntry(id) as OntimeEvent | null;
+  const entry = useLoadedEntry(id) as OntimeEvent | null;
 
   const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
 

apps/client/src/features/overview/composite/TitleOverview.tsx

@@ -1,12 +1,12 @@
+import { useLoadedRundownAuxData } from '../../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../../common/hooks-query/useProjectData';
-import { useRundownAuxData } from '../../../common/hooks-query/useRundown';
 
 import style from './TitleOverview.module.scss';
 
 export default function TitleOverview() {
   'use memo';
   const { data: projectData } = useProjectData();
-  const { data: rundownData } = useRundownAuxData();
+  const { data: rundownData } = useLoadedRundownAuxData();
 
   const projectTitle = projectData.title.trim();
   const rundownTitle = rundownData.title.trim();

apps/client/src/features/rundown/Rundown.tsx

@@ -67,7 +67,11 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
   const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);
 
   const entryActions = useEntryActionsContext();
-  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
+  const setEntryCopy = useEntryCopy((state) => state.setEntryCopyId);
+  const setEntryCopyId = useCallback(
+    (entryId: EntryId | null, mode?: 'copy' | 'cut') => setEntryCopy(entryId, id, mode),
+    [setEntryCopy, id],
+  );
 
   // cursor
   const { editorMode } = useEditorFollowMode();

apps/client/src/features/rundown/RundownExport.tsx

@@ -5,9 +5,6 @@ import * as Editor from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
-import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
-import { useLoadedRundownSource } from '../../common/hooks-query/useScopedRundown';
-import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -39,11 +36,9 @@ function RundownExport() {
     defaultValue: RundownViewMode.List,
   });
   const isSmallDevice = useIsSmallDevice();
-  const entryActions = useEntryActions();
 
   if (isSmallDevice && isExtracted) {
     return (
-      <EntryActionsProvider actions={entryActions}>
       <ProtectRoute permission='editor'>
         <div
           className={cx([style.rundownExport, style.extracted])}
@@ -60,7 +55,6 @@ function RundownExport() {
           </div>
         </div>
       </ProtectRoute>
-      </EntryActionsProvider>
     );
   }
 
@@ -70,7 +64,6 @@ function RundownExport() {
     viewMode === RundownViewMode.Table;
 
   return (
-    <EntryActionsProvider actions={entryActions}>
     <ProtectRoute permission='editor'>
       <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
         <FinderPlacement />
@@ -93,7 +86,6 @@ function RundownExport() {
         </div>
       </div>
     </ProtectRoute>
-    </EntryActionsProvider>
   );
 }
 
@@ -105,8 +97,6 @@ interface RundownRootProps {
 }
 
 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
-  const source = useLoadedRundownSource();
-
   return (
     <div className={style.rundownRoot}>
       {isSmallDevice ? (
@@ -115,7 +105,7 @@ function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: Rund
         <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
       )}
       {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
-      {viewMode === RundownViewMode.Table && <EntryEditModal rundown={source.rundown} />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal />}
       <RenumberCuesDialog />
     </div>
   );

apps/client/src/features/rundown/RundownList.tsx

@@ -1,15 +1,22 @@
+import { Playback } from 'ontime-types';
 import { memo } from 'react';
 
 import EmptyFill from '../../common/components/state/EmptyFill';
+import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';
 
+/** a rundown which is not loaded has no playback to follow */
+const idleFeatureData = { playback: Playback.Stop, selectedEventId: null, nextEventId: null };
+
 export default memo(RundownList);
 function RundownList() {
+  const { isLoaded } = useRundownScope();
   const { data, status, rundownMetadata } = useRundownWithMetadata();
-  const featureData = useRundownEditor();
+  const runtimeFeatureData = useRundownEditor();
+  const featureData = isLoaded ? runtimeFeatureData : idleFeatureData;
   const { getLocalizedString } = useTranslation();
 
   // avoid showing the editable empty state before we know whether the rundown is actually empty

apps/client/src/features/rundown/hooks/useRundownCommands.ts

@@ -2,6 +2,7 @@ import { type EntryId, type OntimeEntry, type Rundown, SupportedEntry } from 'on
 import { getNextGroupNormal, getNextNormal, getPreviousGroupNormal, getPreviousNormal } from 'ontime-utils';
 import { useCallback } from 'react';
 
+import { useRundownScope } from '../../../common/context/RundownScopeContext';
 import type { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { SelectionMode } from '../useEventSelection';
@@ -26,6 +27,7 @@ export function useRundownCommands({
   selectEntry: applySelection,
   handleCollapseGroup,
 }: UseRundownCommandsOptions) {
+  const { rundownId } = useRundownScope();
   const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
 
   const deleteAtCursor = useCallback(
@@ -43,12 +45,17 @@ export function useRundownCommands({
   const insertCopyAtId = useCallback(
     (atId: EntryId | null, above = false) => {
       // lazily get the value from the store
-      const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
+      const { entryCopyId, entryCopyRundownId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
       if (entryCopyId === null || !entries[entryCopyId]) {
         // we cant clone without selection
         return;
       }
 
+      // pasting into a different rundown needs the entry payload, the server clones within a rundown
+      if (entryCopyRundownId !== null && entryCopyRundownId !== rundownId) {
+        return;
+      }
+
       let normalisedAtId = atId;
 
       const elementToCopy = entries[entryCopyId];
@@ -65,7 +72,7 @@ export function useRundownCommands({
             return;
           }
           reorderEntry(entryCopyId, firstId, 'before')
-            .then(() => setEntryCopyId(null))
+            .then(() => setEntryCopyId(null, null))
             .catch(() => {});
           return;
         }
@@ -74,7 +81,7 @@ export function useRundownCommands({
         }
         const placement = above ? 'before' : 'after';
         reorderEntry(entryCopyId, normalisedAtId, placement)
-          .then(() => setEntryCopyId(null))
+          .then(() => setEntryCopyId(null, null))
           .catch(() => {});
         return;
       }
@@ -85,7 +92,7 @@ export function useRundownCommands({
         before: above ? (normalisedAtId ?? undefined) : undefined,
       });
     },
-    [entries, flatOrder, clone, reorderEntry],
+    [entries, flatOrder, clone, reorderEntry, rundownId],
   );
 
   /**

apps/client/src/features/rundown/rundown-table/RundownTable.tsx

@@ -1,9 +1,6 @@
 import { memo, useEffect, useMemo } from 'react';
 
-import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
-import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
-import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import CuesheetDnd from '../../../views/cuesheet/cuesheet-dnd/CuesheetDnd';
 import CuesheetTable from '../../../views/cuesheet/cuesheet-table/CuesheetTable';
 import { useCuesheetPermissions } from '../../../views/cuesheet/useTablePermissions';
@@ -15,8 +12,6 @@ function RundownTable() {
   const { data: customFields } = useCustomFields();
   const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
   const { editorMode } = useEditorFollowMode();
-  const source = useLoadedRundownSource();
-  const actions = useEntryActions();
 
   // Editor always has full permissions
   useEffect(() => {
@@ -32,10 +27,8 @@ function RundownTable() {
   const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);
 
   return (
-    <EntryActionsProvider actions={actions}>
     <CuesheetDnd columns={columns} tableRoot='editor'>
-        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
+      <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
     </CuesheetDnd>
-    </EntryActionsProvider>
   );
 }

apps/client/src/features/rundown/useEventSelection.ts

@@ -1,155 +1,15 @@
-import { EntryId, MaybeNumber, ProjectRundownsList, Rundown, isOntimeEvent } from 'ontime-types';
+import { useStore } from 'zustand';
-import { MouseEvent } from 'react';
-import { create } from 'zustand';
 
-import { PROJECT_RUNDOWNS, getRundownQueryKey } from '../../common/api/constants';
+import { useRundownScope } from '../../common/context/RundownScopeContext';
-import { ontimeQueryClient } from '../../common/queryClient';
+import type { EventSelectionStore } from '../../common/stores/eventSelectionStore';
-import { isMacOS } from '../../common/utils/deviceUtils';
 
-export type SelectionMode = 'shift' | 'click' | 'ctrl';
+export { getSelectionMode } from '../../common/stores/eventSelectionStore';
-
+export type { SelectionMode } from '../../common/stores/eventSelectionStore';
-interface EventSelectionStore {
-  selectedEvents: Set<EntryId>;
-  anchoredIndex: MaybeNumber;
-  cursor: EntryId | null;
-  entryMode: 'event' | 'single' | null;
-  scrollHandler: ((id: EntryId) => void) | null;
-  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
-  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
-  clearSelectedEvents: () => void;
-  clearMultiSelect: () => void;
-  unselect: (id: EntryId) => void;
-  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
-  scrollToEntry: (id: EntryId) => void;
-}
 
 /**
- * Keeps track of the selected entries and selection mode
+ * Selection and cursor for the rundown of the enclosing scope
- * Provides methods to update the selection based on user interactions
  */
-export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
+export function useEventSelection<T>(selector: (state: EventSelectionStore) => T): T {
-  selectedEvents: new Set(),
+  const { selectionStore } = useRundownScope();
-  anchoredIndex: null,
+  return useStore(selectionStore, selector);
-  cursor: null,
-  entryMode: null,
-  scrollHandler: null,
-  setSingleEntrySelection: ({ id }) => {
-    set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
-  },
-  setSelectedEvents: ({ id, index, selectMode }) => {
-    const { selectedEvents, anchoredIndex, entryMode } = get();
-
-    // if we are in single mode, we replace the selection and change the mode
-    if (entryMode === 'single') {
-      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-    }
-
-    // on click, we replace selection with event
-    if (selectMode === 'click') {
-      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-    }
-
-    // on ctrl + click, we toggle the selection of that event
-    if (selectMode === 'ctrl') {
-      const rundownData = getLoadedRundownData();
-      if (!rundownData) return;
-
-      // if it doesnt exist, simply add to the list and set an anchor
-      if (!selectedEvents.has(id)) {
-        return set({
-          selectedEvents: selectedEvents.add(id),
-          anchoredIndex: index,
-          cursor: id,
-          entryMode: 'event',
-        });
-      }
-
-      // if event is already selected, we remove it from selection
-      // and set the anchor to the event after
-      selectedEvents.delete(id);
-
-      const nextIndex = rundownData.order.findIndex(
-        (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && selectedEvents.has(eventId),
-      );
-
-      // if we didnt find anything after, set the anchor to the last event
-      return set({
-        selectedEvents,
-        anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
-        entryMode: 'event',
-      });
-    }
-
-    // on shift + click, we select a range of events up to the clicked event
-    if (selectMode === 'shift') {
-      const rundownData = getLoadedRundownData();
-      if (!rundownData) return;
-
-      // get list of rundown with only ontime events
-      const eventIds: EntryId[] = [];
-      rundownData.flatOrder.forEach((eventId) => {
-        const event = rundownData.entries[eventId];
-        if (isOntimeEvent(event)) {
-          eventIds.push(event.id);
-        }
-      });
-
-      const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
-      const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
-
-      // create new set with range of ids from start to end
-      const selectedEventIds = eventIds.slice(start, end);
-
-      return set({
-        selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
-        anchoredIndex: index,
-        entryMode: 'event',
-      });
-    }
-  },
-  clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
-  clearMultiSelect: () => {
-    const { selectedEvents } = get();
-    const [firstSelected] = selectedEvents;
-    set({
-      selectedEvents: new Set(firstSelected ? [firstSelected] : []),
-      anchoredIndex: null,
-      entryMode: null,
-    });
-  },
-  unselect: (id: string) => {
-    const { entryMode, selectedEvents } = get();
-    selectedEvents.delete(id);
-    set({
-      selectedEvents,
-      entryMode: selectedEvents.size === 0 ? null : entryMode,
-    });
-  },
-  // Sets the scroll handler for programmatic scrolling to entries
-  setScrollHandler: (handler) => set({ scrollHandler: handler }),
-  // Scrolls to the specified entry using the registered scroll handler
-  scrollToEntry: (id: EntryId) => {
-    const handler = get().scrollHandler;
-    if (handler) {
-      handler(id);
-    }
-  },
-}));
-
-function getLoadedRundownData() {
-  const rundownId = ontimeQueryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
-  if (!rundownId) return undefined;
-  return ontimeQueryClient.getQueryData<Rundown>(getRundownQueryKey(rundownId));
-}
-
-export function getSelectionMode(event: MouseEvent): SelectionMode {
-  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
-    return 'ctrl';
-  }
-
-  if (event.shiftKey) {
-    return 'shift';
-  }
-
-  return 'click';
 }

apps/client/src/features/rundown/useSelectAndRevealEntry.ts

@@ -1,6 +1,7 @@
 import { EntryId, MaybeString } from 'ontime-types';
 import { useCallback } from 'react';
 
+import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useCollapsedGroups } from './useCollapsedGroups';
 import { useEventSelection } from './useEventSelection';
 
@@ -10,7 +11,8 @@ type SelectAndRevealOptions = {
   parent?: MaybeString;
 };
 
-export function useSelectAndRevealEntry(rundownId: string) {
+export function useSelectAndRevealEntry() {
+  const { rundownId } = useRundownScope();
   const { expandGroup } = useCollapsedGroups(rundownId);
   const selectEntry = useEventSelection((state) => state.setSelectedEvents);
   const scrollToEntry = useEventSelection((state) => state.scrollToEntry);

apps/client/src/views/backstage/useBackstageData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedFlatRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -20,7 +20,7 @@ export function useBackstageData(): ViewData<BackstageData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundown();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/common/schedule/ScheduleContext.tsx

@@ -12,7 +12,7 @@ import {
   useState,
 } from 'react';
 
-import { usePartialRundown } from '../../../common/hooks-query/useRundown';
+import { useLoadedPartialRundown } from '../../../common/hooks-query/useLoadedRundown';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { useScheduleOptions } from './schedule.options';
 
@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
     [filter],
   );
 
-  const { data: events } = usePartialRundown(filterCallback);
+  const { data: events } = useLoadedPartialRundown(filterCallback);
 
   const [firstIndex, setFirstIndex] = useState(-1);
   const [numPages, setNumPages] = useState(0);

apps/client/src/views/countdown/Countdown.scss

@@ -100,20 +100,7 @@ $item-height: 3.5rem;
     flex-direction: column;
     overflow-y: auto;
 
-    padding-bottom: 95vh;
+    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 ======================*/
@@ -209,14 +196,9 @@ $item-height: 3.5rem;
 
   .sub--group {
     box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
-    /* The opaque base prevents rows showing through; background shorthand cannot layer this colour. */
+    background:
-    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%),
-      linear-gradient(
+      var(--card-background-color-override, $viewer-card-bg-color);
-        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));
@@ -248,16 +230,6 @@ $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;

apps/client/src/views/countdown/CountdownSubscriptions.tsx

@@ -1,6 +1,6 @@
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';
 
 import Button from '../../common/components/buttons/Button';
@@ -22,7 +22,6 @@ import {
   CountdownTarget,
   extendEventData,
   getIsLive,
-  groupSubscriptionTargets,
   isOutsideRange,
   preferredFormat12,
   preferredFormat24,
@@ -49,22 +48,11 @@ 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,
-    getTopOffset: getStickyOffset,
+    topOffset: 0,
     followTrigger: selectedEventId,
   });
 
@@ -87,16 +75,15 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
 
   // prevent considering automated scrolls as user scrolls
   const handleUserScroll = () => {
-    if (!selectedRef.current || !scrollRef.current) {
+    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.
+      if (selectedRect && scrollerRect) {
-    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
+        const distanceFromTop = selectedRect.top - scrollerRect.top;
         const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
         setLockAutoScroll(hasScrolledOutOfThreshold);
+      }
+    }
   };
   const throttledHandleScroll = throttle(handleUserScroll, 1000);
 
@@ -111,14 +98,7 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
 
   return (
     <div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-      {sections.map((section) => {
+      {subscribedEvents.map((event) => {
-        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={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);
@@ -127,24 +107,12 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
         // 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 countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
-              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}
+            ref={isLive ? selectedRef : undefined}
             className={cx([
               'sub',
               isLive && 'sub--live',
@@ -168,9 +136,6 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
           </div>
         );
       })}
-          </div>
-        );
-      })}
       <div className={cx(['fab-container', !showFab && 'fab-container--hidden'])}>
         <Button variant='primary' size='xlarge' onClick={goToEditMode}>
           <IoPencil /> Edit

apps/client/src/views/countdown/countdown.utils.test.ts

@@ -1,7 +1,7 @@
 import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
 
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { CountdownTarget, groupSubscriptionTargets, resolveSubscriptionTarget } from './countdown.utils';
+import { resolveSubscriptionTarget } from './countdown.utils';
 
 /**
  * Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
@@ -126,89 +126,3 @@ 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] },
-    ]);
-  });
-});

apps/client/src/views/countdown/countdown.utils.ts

@@ -252,42 +252,6 @@ 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[] = [];
-
-  for (const target of targets) {
-    // resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
-    if (target.isGroup) {
-      sections.push({ group: target, events: [] });
-      continue;
-    }
-
-    const previousSection = sections.at(-1);
-    if (previousSection?.group?.id === target.parent) {
-      previousSection.events.push(target);
-      continue;
-    }
-
-    sections.push({ group: null, events: [target] });
-  }
-
-  return sections;
-}
-
 export function extendEventData(
   event: CountdownTarget,
   currentDay: number,

apps/client/src/views/countdown/useCountdownData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -21,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/cuesheet/CuesheetPage.tsx

@@ -3,35 +3,31 @@ import { IoApps } from 'react-icons/io5';
 
 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
-import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
+import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
-import { useScopedRundown } from '../../common/hooks-query/useScopedRundown';
+import { useRundownSelection } from '../../common/hooks/useRundownSelection';
-import { useScopedEntryActions } from '../../common/hooks/useEntryAction';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
 import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableWrapper from './CuesheetTableWrapper';
-import { FOLLOW_LOADED_RUNDOWN_ID, useCuesheetRundownSelection } from './useCuesheetRundownSelection';
 
 import styles from './CuesheetPage.module.scss';
 
 export default function CuesheetPage() {
   'use memo';
   const [isMenuOpen, menuHandler] = useDisclosure();
-  const { selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } = useCuesheetRundownSelection();
+  const { scopedRundownId, selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } =
-  const source = useScopedRundown(selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? loadedRundownId : selectedRundownId);
+    useRundownSelection('cuesheet');
-
-  const actions = useScopedEntryActions(source.rundownId);
 
   useWindowTitle('Cuesheet');
 
   const isLocked = getIsNavigationLocked();
 
   return (
-    <EntryActionsProvider actions={actions}>
+    <EditableRundownScopeProvider rundownId={scopedRundownId}>
       <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-      <EntryEditModal rundown={source.rundown} />
+      <EntryEditModal />
       <div className={styles.tableWrapper} data-testid='cuesheet'>
         <CuesheetOverview>
           {!isLocked && (
@@ -42,13 +38,12 @@ export default function CuesheetPage() {
         </CuesheetOverview>
         <CuesheetProgress />
         <CuesheetTableWrapper
-          source={source}
           selectedRundownId={selectedRundownId}
           loadedRundownId={loadedRundownId}
           setSelectedRundownId={setSelectedRundownId}
           projectRundowns={projectRundowns}
         />
       </div>
-    </EntryActionsProvider>
+    </EditableRundownScopeProvider>
   );
 }

apps/client/src/views/cuesheet/CuesheetTableWrapper.tsx

@@ -3,19 +3,18 @@ import { memo, use, useMemo } from 'react';
 
 import Select from '../../common/components/select/Select';
 import { PresetContext } from '../../common/context/PresetContext';
+import { useRundownScope } from '../../common/context/RundownScopeContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
+import { FOLLOW_LOADED_RUNDOWN_ID } from '../../common/hooks/useRundownSelection';
 import { AppMode } from '../../ontimeConfig';
 import CuesheetDnd from './cuesheet-dnd/CuesheetDnd';
 import { makeCuesheetColumns } from './cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
 import CuesheetTable from './cuesheet-table/CuesheetTable';
 import { useApplyCuesheetPolicy } from './useApplyCuesheetPolicy';
-import { FOLLOW_LOADED_RUNDOWN_ID } from './useCuesheetRundownSelection';
 
 import styles from './CuesheetPage.module.scss';
 
 interface CuesheetTableWrapperProps {
-  source: RundownSource;
   selectedRundownId: MaybeString;
   loadedRundownId: string;
   setSelectedRundownId: (rundownId: string) => void;
@@ -24,15 +23,14 @@ interface CuesheetTableWrapperProps {
 
 export default memo(CuesheetTableWrapper);
 function CuesheetTableWrapper({
-  source,
   selectedRundownId,
   setSelectedRundownId,
   loadedRundownId,
   projectRundowns,
 }: CuesheetTableWrapperProps) {
   const preset = use(PresetContext);
-  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
+  const { isLoaded } = useRundownScope();
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoaded });
   const { data: customFields } = useCustomFields();
 
   const columns = useMemo(
@@ -44,11 +42,9 @@ function CuesheetTableWrapper({
     <CuesheetDnd columns={columns}>
       <CuesheetTable
         columns={columns}
-        source={source}
         cuesheetMode={cuesheetMode}
         tableRoot='cuesheet'
         setCuesheetMode={setCuesheetMode}
-        isCurrentRundown={isCurrentRundown}
         insertElement={
           <>
             <RundownSelect

apps/client/src/views/cuesheet/cuesheet-edit-modal/EntryEditModal.tsx

@@ -1,16 +1,13 @@
-import { Rundown } from 'ontime-types';
 import { memo } from 'react';
 
 import Modal from '../../../common/components/modal/Modal';
+import useRundown from '../../../common/hooks-query/useRundown';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
 import { useEditModal } from './useEditModal';
 
-interface EntryEditModalProps {
-  rundown: Rundown;
-}
-
 export default memo(EntryEditModal);
-function EntryEditModal({ rundown }: EntryEditModalProps) {
+function EntryEditModal() {
+  const { data: rundown } = useRundown();
   const entryId = useEditModal((state) => state.selectedEntryId);
   const closeModal = useEditModal((state) => state.clearSelection);
 

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -14,7 +14,8 @@ import {
 import EmptyFill from '../../../common/components/state/EmptyFill';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
+import { useRundownScope } from '../../../common/context/RundownScopeContext';
+import { useFlatRundownWithMetadata, useScopedSelectedEventId } from '../../../common/hooks-query/useRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -41,20 +42,17 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
   columns: CuesheetColumnDef[];
   cuesheetMode: AppMode;
-  source: RundownSource;
   insertElement?: ReactNode;
 };
 
 type EditorCuesheetTableProps = CuesheetTableBaseProps & {
   tableRoot: 'editor';
   setCuesheetMode?: undefined;
-  isCurrentRundown?: undefined;
 };
 
 type ViewCuesheetTableProps = CuesheetTableBaseProps & {
   tableRoot: 'cuesheet';
   setCuesheetMode: (mode: AppMode) => void;
-  isCurrentRundown?: boolean;
 };
 
 type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
@@ -62,13 +60,13 @@ type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
 export default function CuesheetTable({
   columns,
   cuesheetMode,
-  source,
   tableRoot,
   setCuesheetMode,
-  isCurrentRundown,
   insertElement,
 }: CuesheetTableProps) {
-  const { flatRundown, status, selectedEventId } = source;
+  const { isLoaded: isCurrentRundown } = useRundownScope();
+  const { data: flatRundown, status } = useFlatRundownWithMetadata();
+  const selectedEventId = useScopedSelectedEventId();
   const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
   const { getLocalizedString } = useTranslation();
   const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;

apps/client/src/views/editor/Editor.tsx

@@ -1,5 +1,6 @@
 import { lazy } from 'react';
 
+import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -21,7 +22,9 @@ export default function Editor() {
           <TimerControl />
           <MessageControl />
         </div>
+        <EditableRundownScopeProvider rundownId={null}>
           <Rundown />
+        </EditableRundownScopeProvider>
       </div>
     );
   }
@@ -29,6 +32,8 @@ export default function Editor() {
   if (layoutMode === EditorLayoutMode.TRACKING) {
     return (
       <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
+        {/* the titles and the rundown share a scope, so they follow one cursor */}
+        <EditableRundownScopeProvider rundownId={null}>
           <div className={styles.rundownLayout}>
             <div className={styles.titlesPanel}>
               <TitleList mode={AppMode.Run} />
@@ -37,6 +42,7 @@ export default function Editor() {
               <Rundown />
             </div>
           </div>
+        </EditableRundownScopeProvider>
         <TrackingPlaybackBar />
       </div>
     );
@@ -44,6 +50,7 @@ export default function Editor() {
 
   return (
     <div id='panels' className={styles.panelContainer}>
+      <EditableRundownScopeProvider rundownId={null}>
         <div className={styles.rundownLayout}>
           <div className={styles.titlesPanel}>
             <TitleList mode={AppMode.Edit} />
@@ -52,6 +59,7 @@ export default function Editor() {
             <Rundown />
           </div>
         </div>
+      </EditableRundownScopeProvider>
     </div>
   );
 }

apps/client/src/views/editor/finder/useFinder.tsx

@@ -207,10 +207,10 @@ export function searchByText(
  * @param activeFilter - a field selected from the filter badges, if any
  */
 export default function useFinder(searchValue: string, activeFilter: MaybeString) {
-  const { data, rundownId } = useFlatRundown();
+  const { data } = useFlatRundown();
   const { data: customFields } = useCustomFields();
 
-  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
+  const selectAndRevealEntry = useSelectAndRevealEntry();
 
   /** The filters offered to the user: the fixed fields plus whatever the project defines */
   const filters = useMemo<FinderFilter[]>(() => {

apps/client/src/views/editor/title-list/TitleList.tsx

@@ -46,7 +46,6 @@ export default function TitleList({ mode }: TitleListProps) {
       eventData={eventData}
       selectedEventId={selectedEventId}
       resolvedFollowEventId={resolvedFollowEventId}
-      rundownId={rundown.id}
     />
   );
 }
@@ -56,21 +55,14 @@ interface TitleListContentProps {
   eventData: ExtendedEntry<OntimeEvent>[];
   selectedEventId: string | null;
   resolvedFollowEventId: string | null;
-  rundownId: string;
 }
 
-function TitleListContent({
+function TitleListContent({ mode, eventData, selectedEventId, resolvedFollowEventId }: TitleListContentProps) {
-  mode,
-  eventData,
-  selectedEventId,
-  resolvedFollowEventId,
-  rundownId,
-}: TitleListContentProps) {
   'use memo';
 
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
   const scrollParentRef = useRef<HTMLDivElement | null>(null);
-  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
+  const selectAndRevealEntry = useSelectAndRevealEntry();
 
   // Calculate current event info
   const currentEventInfo = useMemo(() => {

apps/client/src/views/timeline/useTimelineData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -16,7 +16,7 @@ export interface TimelineData {
 
 export function useTimelineData(): ViewData<TimelineData> {
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/timer/Timer.scss

@@ -195,6 +195,24 @@
     font-weight: 600;
   }
 
+  .sound-prompt {
+    position: absolute;
+    bottom: $view-block-padding;
+    left: $view-inline-padding;
+    padding: 0.5em 0.75em;
+    border-radius: $element-border-radius;
+    background-color: $viewer-card-bg-color;
+    color: $viewer-secondary-color;
+    font-size: $timer-label-size;
+    text-transform: uppercase;
+    pointer-events: none;
+    transition: opacity $viewer-transition-time;
+
+    &--hidden {
+      opacity: 0;
+    }
+  }
+
   /* =================== LOGO ===================*/
   .logo {
     position: absolute;

apps/client/src/views/timer/Timer.tsx

@@ -8,6 +8,7 @@ import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
+import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useTimerSocket } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
@@ -30,6 +31,7 @@ import {
   getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
+import { useTimerSound } from './useTimerSound';
 
 import './Timer.scss';
 
@@ -66,6 +68,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     freezeOvertime,
     freezeMessage,
     hidePhase,
+    endSound,
     font,
     keyColour,
     timerColour,
@@ -75,6 +78,8 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   const { getLocalizedString } = useTranslation();
   const localisedMinutes = getLocalizedString('common.minutes');
 
+  const showSoundPrompt = useTimerSound(time.phase, endSound);
+
   // gather modifiers
   const viewTimerType = timerType ?? timerTypeNow;
   const showOverlay = getShowMessage(message.timer);
@@ -156,6 +161,8 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
 
       <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />
 
+      {showSoundPrompt && <SoundPermissionPrompt />}
+
       <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
 
       {!hideMessage && (
@@ -227,3 +234,13 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
     </div>
   );
 }
+
+function SoundPermissionPrompt() {
+  const isUserActive = useFadeOutOnInactivity(true);
+
+  return (
+    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
+      Interact with the page (click/tap or press any key) to enable sound
+    </div>
+  );
+}

apps/client/src/views/timer/__tests__/timer.utils.test.ts

@@ -0,0 +1,34 @@
+import { TimerPhase } from 'ontime-types';
+
+import { shouldPlayEndSound } from '../timer.utils';
+
+describe('shouldPlayEndSound()', () => {
+  test.each([TimerPhase.Default, TimerPhase.Warning, TimerPhase.Danger])(
+    'sounds when a running timer goes into overtime from %s',
+    (previousPhase) => {
+      expect(shouldPlayEndSound(previousPhase, TimerPhase.Overtime)).toBe(true);
+    },
+  );
+
+  it('stays silent on the first phase we see, a client could be joining mid-overtime', () => {
+    expect(shouldPlayEndSound(null, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent when the phase was reset, a reload during overtime starts from none', () => {
+    expect(shouldPlayEndSound(TimerPhase.None, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent for a roll timer waiting to start', () => {
+    expect(shouldPlayEndSound(TimerPhase.Pending, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('sounds once, not on every update while in overtime', () => {
+    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent on phases which are not the end of the timer', () => {
+    expect(shouldPlayEndSound(TimerPhase.Default, TimerPhase.Warning)).toBe(false);
+    expect(shouldPlayEndSound(TimerPhase.Warning, TimerPhase.Danger)).toBe(false);
+    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.None)).toBe(false);
+  });
+});

apps/client/src/views/timer/timer.options.ts

@@ -16,6 +16,7 @@ import { ViewOption } from '../../common/components/view-params-editor/viewParam
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean, makeColourString } from '../common/viewUtils';
+import { endSoundOptions, isEndSound, type EndSound } from './timer.sound';
 
 // manually match the properties of TimerType excluding the None
 const timerDisplayOptions: SelectOption[] = [
@@ -76,6 +77,15 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           type: 'boolean',
           defaultValue: false,
         },
+        {
+          id: 'endSound',
+          title: 'Play sound on timer end',
+          description:
+            'Plays a sound in this screen when the timer reaches zero. The screen must be interacted with once before it can play',
+          type: 'option',
+          values: endSoundOptions,
+          defaultValue: 'none',
+        },
       ],
     },
     {
@@ -193,6 +203,7 @@ type TimerOptions = {
   freezeOvertime: boolean;
   freezeMessage: string;
   hidePhase: boolean;
+  endSound: EndSound;
   font?: string;
   keyColour?: string;
   timerColour?: string;
@@ -208,6 +219,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
   // Get timerType from either source
   const timerType = validateTimerType(getValue('timerType'), TimerType.None);
+  const endSoundValue = getValue('endSound');
 
   return {
     hideClock: isStringBoolean(getValue('hideClock')),
@@ -227,6 +239,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
     freezeMessage: getValue('freezeMessage') ?? '',
     hidePhase: isStringBoolean(getValue('hidePhase')),
+    endSound: isEndSound(endSoundValue) ? endSoundValue : 'none',
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),

apps/client/src/views/timer/timer.sound.ts

@@ -0,0 +1,20 @@
+import arpeggio from '../../assets/sounds/arpeggio.wav';
+import bell from '../../assets/sounds/bell.wav';
+import chime from '../../assets/sounds/chime.wav';
+import type { SelectOption } from '../../common/components/select/Select';
+
+// synthesised tones bundled with the app, no external source or licence to track
+export const endSoundSources = { chime, bell, arpeggio } as const;
+
+export type EndSound = 'none' | keyof typeof endSoundSources;
+
+export const endSoundOptions: SelectOption[] = [
+  { value: 'none', label: 'None' },
+  { value: 'chime', label: 'Chime' },
+  { value: 'bell', label: 'Bell' },
+  { value: 'arpeggio', label: 'Arpeggio' },
+];
+
+export function isEndSound(value: string | null): value is EndSound {
+  return value === 'none' || value === 'chime' || value === 'bell' || value === 'arpeggio';
+}

apps/client/src/views/timer/timer.utils.ts

@@ -189,3 +189,18 @@ export function getCardData(
     nextSecondary,
   };
 }
+
+/**
+ * Whether the end of timer sound should play for a given phase transition
+ * We only sound the transition into overtime from a phase that was already counting,
+ * which keeps a client that connects or reloads mid-overtime silent
+ */
+export function shouldPlayEndSound(previousPhase: TimerPhase | null, phase: TimerPhase): boolean {
+  if (phase !== TimerPhase.Overtime) {
+    return false;
+  }
+
+  return (
+    previousPhase === TimerPhase.Default || previousPhase === TimerPhase.Warning || previousPhase === TimerPhase.Danger
+  );
+}

apps/client/src/views/timer/useTimerData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -26,7 +26,7 @@ export function useTimerData(): ViewData<TimerData> {
   const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();
-  const { data: rundown, status: rundownStatus } = useRundown();
+  const { data: rundown, status: rundownStatus } = useLoadedRundown();
   const { entries } = rundown;
 
   return {

apps/client/src/views/timer/useTimerSound.ts

@@ -0,0 +1,99 @@
+import { TimerPhase } from 'ontime-types';
+import { useEffect, useRef, useState } from 'react';
+
+import { endSoundSources, type EndSound } from './timer.sound';
+import { shouldPlayEndSound } from './timer.utils';
+
+/**
+ * Plays a sound when the timer reaches its end
+ *
+ * Browsers reject playback until the document has been interacted with, and that permission
+ * is lost on every page load. Since a timer screen is typically left unattended, we prime the
+ * audio element on the first interaction and let the view prompt for one if it never comes.
+ * Safari grants the permission per element, so priming has to call play() on this element from
+ * inside the event handler, it is not enough to know that an interaction happened.
+ */
+export function useTimerSound(phase: TimerPhase, sound: EndSound): boolean {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const previousPhaseRef = useRef<TimerPhase | null>(null);
+  const [isArmed, setIsArmed] = useState(false);
+
+  const enabled = sound !== 'none';
+
+  // Create and clean up the audio element; changing sounds requires re-arming it in Safari.
+  useEffect(() => {
+    setIsArmed(false);
+
+    if (sound === 'none') {
+      return;
+    }
+
+    const audio = new Audio(endSoundSources[sound]);
+    audioRef.current = audio;
+
+    return () => {
+      audio.pause();
+      audioRef.current = null;
+    };
+  }, [sound]);
+
+  // Listen for user interaction until muted playback succeeds and arms the selected audio element.
+  useEffect(() => {
+    if (!enabled || isArmed) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const prime = () => {
+      const audio = audioRef.current;
+      if (!audio) {
+        return;
+      }
+
+      const wasMuted = audio.muted;
+      audio.muted = true;
+      audio
+        .play()
+        .then(() => {
+          if (audioRef.current !== audio) {
+            return;
+          }
+          audio.pause();
+          audio.currentTime = 0;
+          setIsArmed(true);
+        })
+        .catch(() => {
+          // playback is still blocked, a later interaction will try again
+        })
+        .finally(() => {
+          audio.muted = wasMuted;
+        });
+    };
+
+    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
+    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
+
+    return () => {
+      controller.abort();
+    };
+  }, [enabled, isArmed]);
+
+  // Track phase transitions and play only when a running timer enters overtime.
+  useEffect(() => {
+    const previousPhase = previousPhaseRef.current;
+    previousPhaseRef.current = phase;
+
+    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
+      return;
+    }
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    audio.currentTime = 0;
+    audio.play().catch(() => {
+      // the screen has not been interacted with, the view shows a prompt for it
+    });
+  }, [enabled, phase]);
+
+  return enabled && !isArmed;
+}

apps/server/src/api-data/rundown/__tests__/rundown.dao.test.ts

@@ -1718,16 +1718,18 @@ describe('rundownMutation.swap()', () => {
     expect((testRundown.entries['1'] as OntimeEvent).id).toBe('1');
     expect((testRundown.entries['1'] as OntimeEvent).cue).toBe('data2');
     expect((testRundown.entries['1'] as OntimeEvent).timeStart).toBe(1);
-    expect((testRundown.entries['1'] as OntimeEvent).revision).toBe(1);
+    // the swapped entries changed, their revision has to say so
+    expect((testRundown.entries['1'] as OntimeEvent).revision).toBe(2);
 
     expect((testRundown.entries['2'] as OntimeEvent).id).toBe('2');
     expect((testRundown.entries['2'] as OntimeEvent).cue).toBe('data1');
     expect((testRundown.entries['2'] as OntimeEvent).timeStart).toBe(2);
-    expect((testRundown.entries['2'] as OntimeEvent).revision).toBe(1);
+    expect((testRundown.entries['2'] as OntimeEvent).revision).toBe(2);
 
     expect((testRundown.entries['3'] as OntimeEvent).id).toBe('3');
     expect((testRundown.entries['3'] as OntimeEvent).cue).toBe('data3');
     expect((testRundown.entries['3'] as OntimeEvent).timeStart).toBe(3);
+    // untouched, so it keeps its revision
     expect((testRundown.entries['3'] as OntimeEvent).revision).toBe(1);
   });
 });

apps/server/src/api-data/rundown/rundown.dao.ts

@@ -422,7 +422,7 @@ function swap(rundown: Rundown, eventFrom: OntimeEvent, eventTo: OntimeEvent) {
     gap: eventFrom.gap,
     dayOffset: eventFrom.dayOffset,
     // keep revision number but increment it
-    revision: eventFrom.revision++,
+    revision: eventFrom.revision + 1,
   };
 
   rundown.entries[eventTo.id] = {
@@ -440,7 +440,7 @@ function swap(rundown: Rundown, eventFrom: OntimeEvent, eventTo: OntimeEvent) {
     gap: eventTo.gap,
     dayOffset: eventTo.dayOffset,
     // keep revision number but increment it
-    revision: eventTo.revision++,
+    revision: eventTo.revision + 1,
   };
 }
 

apps/server/src/api-data/rundown/rundown.service.ts

@@ -816,27 +816,23 @@ export async function createNewRundown(title: string) {
  * @throws if the provided id does not exist
  */
 export async function renameRundown(id: string, title: string) {
-  const dataProvider = getDataProvider();
+  const { rundown, commit } = createTransaction({ rundownId: id, mutableRundown: true });
-  const rundown = dataProvider.getRundown(id);
 
-  await dataProvider.setRundown(id, { ...rundown, title, revision: rundown.revision + 1 });
+  if (rundown.title === title) {
-
+    return getDataProvider().getProjectRundowns();
-  /**
-   * If we are modifying the loaded rundown we re-init it
-   * This is likely over-kill but the simplest way to ensure state consistency
-   */
-  if (isCurrentRundown(id)) {
-    const rundown = dataProvider.getRundown(id);
-    const customField = dataProvider.getCustomFields();
-    // init rundown does its own refetch
-    await initRundown(rundown, customField);
-  } else {
-    setImmediate(() => {
-      sendRefetch(RefetchKey.ProjectRundowns);
-    });
   }
 
-  return dataProvider.getProjectRundowns();
+  rundown.title = title;
+
+  // a title has no bearing on the schedule, there is nothing to process and no runtime to notify
+  const { rundownMetadata, revision } = await commit(false);
+
+  setImmediate(() => {
+    notifyChanges(id, rundownMetadata, revision, { external: true });
+    sendRefetch(RefetchKey.ProjectRundowns);
+  });
+
+  return getDataProvider().getProjectRundowns();
 }
 
 /**

docs/agent-guides/code-quality.md

@@ -36,6 +36,10 @@ Remove comments that:
 
 Update adjacent comments with code. Stale comments are defects.
 
+Add a short comment immediately above every React `useEffect` describing the external synchronization or lifecycle
+responsibility it owns. Explain non-obvious reasons or constraints when they matter; for files with multiple effects, a
+brief responsibility label is useful even when the mechanics are straightforward.
+
 ## Naming and types
 
 - Prefer Ontime terms over vague `data`, `result`, `item`.

docs/agent-guides/domain-invariants.md

@@ -9,6 +9,10 @@ Load only for touched domains. Add only stable, recurring invariants; not one-of
 - Preserve entry identity and supported types across patch, clone, group, ungroup, reorder.
 - Distinguish loaded vs background rundown. Prefer explicit rundown ID over global current state.
 - No caller-owned rundown mutation unless explicitly contracted.
+- Revisions mark change: a rundown revision advances on every commit, an entry revision on every
+  change to that entry. Delays carry no revision. Optimistic client updates apply the same bump the
+  server does, so an unchanged entry keeps its identity and clients can compare revisions to tell
+  what moved on.
 
 ## Persistence, realtime, cache