fix isLoadedRundown the now rundown id is provided

* fix: issue where a count-to-end would lead to incorrect expected times

* fix: include add time in overtime when countToEnd

* fix: ui and server use same calculation for expected end

apps/client/src/common/components/modal/Modal.module.scss

@@ -20,7 +20,7 @@
 .wide {
   top: 4vh;
   min-width: min(1280px, 96vw);
-  max-width: min(1600px, 96vw);
+  max-width: min(1800px, 98vw);
   height: 88vh;
   max-height: 88vh;
   display: flex;

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

@@ -1,15 +1,15 @@
 import { PropsWithChildren, createContext, useContext } from 'react';
 
-import { useEntryActions } from '../hooks/useEntryAction';
+import { useEntryActions, useScopedEntryActions } from '../hooks/useEntryAction';
+import { useRundownSelectionContext } from './RundownSelectionContext';
 
 type EntryActionsContextValue = ReturnType<typeof useEntryActions>;
 const EntryActionsContext = createContext<EntryActionsContextValue | null>(null);
 
-interface EntryActionsProviderProps extends PropsWithChildren {
-  actions: EntryActionsContextValue;
-}
+export function EntryActionsProvider({ children }: PropsWithChildren) {
+  const { effectiveRundownId } = useRundownSelectionContext();
+  const actions = useScopedEntryActions(effectiveRundownId);
 
-export function EntryActionsProvider({ children, actions }: EntryActionsProviderProps) {
   return <EntryActionsContext.Provider value={actions}>{children}</EntryActionsContext.Provider>;
 }
 

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

@@ -0,0 +1,120 @@
+import { Maybe, ProjectRundown } from 'ontime-types';
+import { PropsWithChildren, createContext, startTransition, useCallback, useContext, useEffect, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
+import { useNavigate } from 'react-router';
+
+import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
+
+export type RundownScopeValue = {
+  loadedRundownId: string;
+  selectedRundownId: Maybe<string>;
+  isLoadedRundown: boolean;
+  effectiveRundownId: string;
+  selectRundownId: (val: Maybe<string>) => void;
+  rundowns: ProjectRundown[];
+};
+
+const RundownScopeContext = createContext<RundownScopeValue | null>(null);
+
+export function RundownSelectionContextProvider({ children }: PropsWithChildren) {
+  'use memo';
+  const { data } = useProjectRundowns();
+  const { loaded, rundowns } = data;
+
+  const [selectedRundownId, setSelectedRundownId] = useSelectRundownFromParams();
+
+  const selectRundownId = useCallback(
+    (rundownId: Maybe<string>) => {
+      startTransition(() => {
+        if (rundowns.find((entry) => entry.id === rundownId)) setSelectedRundownId(rundownId);
+        else setSelectedRundownId(null);
+      });
+    },
+    [rundowns, setSelectedRundownId],
+  );
+
+  const effectiveRundownId = selectedRundownId ? selectedRundownId : loaded;
+  const isLoadedRundown = effectiveRundownId === loaded;
+
+  useEffect(() => {
+    if (!rundowns.find((entry) => entry.id === effectiveRundownId)) setSelectedRundownId(null);
+  }, [rundowns, effectiveRundownId, setSelectedRundownId]);
+
+  const value = useMemo(
+    (): RundownScopeValue => ({
+      loadedRundownId: loaded,
+      isLoadedRundown,
+      selectedRundownId,
+      effectiveRundownId,
+      selectRundownId,
+      rundowns,
+    }),
+    [loaded, isLoadedRundown, selectedRundownId, effectiveRundownId, selectRundownId, rundowns],
+  );
+
+  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
+}
+
+export function useRundownSelectionContext() {
+  const context = useContext(RundownScopeContext);
+
+  if (!context) {
+    throw new Error('useRundownScopeSelection requires a RundownSelectionContextProvider');
+  }
+
+  return context;
+}
+
+const rundownParam = 'rundownId';
+
+export function useSelectRundownFromParams(): [Maybe<string>, (id: Maybe<string>) => void] {
+  'use memo';
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const selectedRundownId = searchParams.get(rundownParam);
+  const setSelectedRundownId = useCallback(
+    (id: Maybe<string>) => {
+      if (id === null) {
+        setSearchParams((searchParams) => {
+          searchParams.delete(rundownParam);
+          return searchParams;
+        });
+      } else {
+        setSearchParams((searchParams) => {
+          searchParams.set(rundownParam, id);
+          return searchParams;
+        });
+      }
+    },
+    [setSearchParams],
+  );
+
+  return [selectedRundownId, setSelectedRundownId];
+}
+
+/**
+ *
+ * mutates the provided `searchParams`
+ */
+export function setSelectRundownInParams(id: Maybe<string>, searchParams: URLSearchParams): void {
+  if (id === null) {
+    searchParams.delete(rundownParam);
+  } else {
+    searchParams.set(rundownParam, id);
+  }
+}
+
+export function useDirectLinkToBackgroundEdit() {
+  const navigate = useNavigate();
+  const [search] = useSearchParams();
+  return useCallback(
+    async (rundownId: string) => {
+      setSelectRundownInParams(rundownId, search);
+      navigate({
+        pathname: '/cuesheet',
+        search: search.toString(),
+      });
+    },
+    [navigate, search],
+  );
+}

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

@@ -0,0 +1,101 @@
+import { isOntimeEvent, OntimeEvent } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { useRundownSelectionContext } from '../context/RundownSelectionContext';
+import { useSelectedEventId } from '../hooks/useSocket';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { useFlatRundown, useRundown } from './useRundown';
+
+export function useContextRundownEditModal() {
+  'use memo';
+  const { effectiveRundownId } = useRundownSelectionContext();
+  const { data: rundown } = useRundown(effectiveRundownId);
+  return { rundown };
+}
+
+export function useContextRundownCueRenumberModal() {
+  'use memo';
+  const { effectiveRundownId } = useRundownSelectionContext();
+  const { data } = useRundown(effectiveRundownId);
+  const { flatOrder } = data;
+  return { flatOrder };
+}
+
+export function useContextRundownList() {
+  'use memo';
+  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
+  const loadedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
+  const { data: rundown, status } = useRundown(effectiveRundownId);
+  const rundownMetadata = useMemo(
+    () => getRundownMetadata(rundown, effectiveSelectedEventId),
+    [effectiveSelectedEventId, rundown],
+  );
+
+  return useMemo(
+    () => ({
+      rundown,
+      rundownMetadata,
+      status,
+      isLoadedRundown,
+    }),
+    [rundown, rundownMetadata, status, isLoadedRundown],
+  );
+}
+
+export function useContextRundownTitleList() {
+  'use memo';
+  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
+  const loadedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
+  const { data: rundown, status } = useRundown(effectiveRundownId);
+  const flatRundown = useMemo(() => {
+    const flatData = getFlatRundownMetadata(rundown, effectiveSelectedEventId);
+    return flatData.filter(isOntimeEvent) as ExtendedEntry<OntimeEvent>[];
+  }, [effectiveSelectedEventId, rundown]);
+
+  return useMemo(
+    () => ({
+      flatRundown,
+      status,
+      isLoadedRundown,
+    }),
+    [status, isLoadedRundown, flatRundown],
+  );
+}
+
+export function useContextRundownTable() {
+  'use memo';
+  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
+  const loadedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
+  const { data: rundown, status } = useRundown(effectiveRundownId);
+  const flatRundown = useMemo(
+    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
+    [effectiveSelectedEventId, rundown],
+  );
+
+  return useMemo(
+    () => ({
+      flatRundown,
+      status,
+      loadedEventId,
+    }),
+    [flatRundown, status, loadedEventId],
+  );
+}
+
+export function useContextRundownFinder() {
+  'use memo';
+  const { effectiveRundownId } = useRundownSelectionContext();
+  const { data: rundown, status } = useFlatRundown(effectiveRundownId);
+
+  return useMemo(
+    () => ({
+      rundown,
+      rundownId: effectiveRundownId,
+      status,
+    }),
+    [rundown, status, effectiveRundownId],
+  );
+}

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

@@ -1,24 +1,18 @@
-import { useQuery } from '@tanstack/react-query';
-import { ProjectFile, ProjectFileList, ProjectFileListResponse } from 'ontime-types';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { ProjectFile, ProjectFileList } from 'ontime-types';
+import { MILLIS_PER_HOUR } from 'ontime-utils';
 import { useMemo } from 'react';
 
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_LIST } from '../api/constants';
 import { getProjects } from '../api/db';
 
-const placeholderProjectList: ProjectFileListResponse = {
-  files: [],
-  lastLoadedProject: '',
-};
-
-function useProjectList() {
-  const { data, status, refetch } = useQuery({
+export function useProjectList() {
+  const { data, status, refetch } = useSuspenseQuery({
     queryKey: PROJECT_LIST,
     queryFn: ({ signal }) => getProjects({ signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
+    staleTime: MILLIS_PER_HOUR,
   });
-  return { data: data ?? placeholderProjectList, status, refetch };
+  return { data, status, refetch };
 }
 
 export type ProjectSortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'modified-asc' | 'modified-desc';

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

@@ -1,7 +1,7 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import { ProjectRundownsList } from 'ontime-types';
+import { MILLIS_PER_HOUR } from 'ontime-utils';
 
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_RUNDOWNS } from '../api/constants';
 import {
   createRundown,
@@ -11,24 +11,21 @@ import {
   loadRundown,
   renameRundown,
 } from '../api/rundown';
+import { ontimeQueryClient } from '../queryClient';
 
-//TODO: make suspends so we don't have to deal with no value all over
 /**
  * Project rundowns
  */
 export function useProjectRundowns() {
-  const { data, status, isError, refetch, isFetching } = useQuery<ProjectRundownsList>({
+  const { data, status, isError, refetch, isFetching } = useSuspenseQuery<ProjectRundownsList>({
     queryKey: PROJECT_RUNDOWNS,
     queryFn: ({ signal }) => fetchProjectRundownList({ signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
+    staleTime: MILLIS_PER_HOUR,
   });
-  return { data: data ?? { loaded: '', rundowns: [] }, status, isError, refetch, isFetching };
+  return { data, status, isError, refetch, isFetching };
 }
 
 export function useMutateProjectRundowns() {
-  const ontimeQueryClient = useQueryClient();
-
   const { mutateAsync: create } = useMutation({
     mutationFn: createRundown,
     onMutate: () => {

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

@@ -1,10 +1,10 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
-import { useEffect, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { EntryId, Maybe, OntimeEntry, Rundown } from 'ontime-types';
+import { useMemo } from 'react';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
-import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
+import { getRundownQueryKey } from '../api/constants';
+import { fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
 import { useProjectRundowns } from './useProjectRundowns';
@@ -20,43 +20,36 @@ const cachedRundownPlaceholder: Rundown = {
 };
 
 /**
- * Normalised rundown data for the currently loaded rundown.
- *
- * 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`.
+ * Provides access to a specific rundown by ID.
+ * When rundownId is not provided the loaded rundown is provided
  */
-export default function useRundown() {
-  const queryClient = useQueryClient();
+export function useRundown(rundownId: Maybe<string>) {
+  'use memo';
+
   const {
     data: { loaded: loadedRundownId },
   } = useProjectRundowns();
 
+  const effectiveRundownId = rundownId !== null ? rundownId : loadedRundownId;
+  const isLoadedRundown = effectiveRundownId === loadedRundownId;
+
   const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
-    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
+    queryKey: getRundownQueryKey(effectiveRundownId),
+    queryFn: ({ signal }) => fetchRundown(effectiveRundownId, { signal }),
+    placeholderData: (previousData, _previousQuery) => previousData,
     refetchInterval: queryRefetchIntervalSlow,
   });
 
-  // Seed the id-keyed cache when fetching via the bootstrap alias
-  useEffect(() => {
-    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 };
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching, isLoadedRundown };
 }
 
-export function useRundownWithMetadata() {
-  const { data, status } = useRundown();
+export function useRundownWithMetadata(rundownId: Maybe<string>) {
+  'use memo';
+
+  const { data, status, isLoadedRundown } = useRundown(rundownId);
   const selectedEventId = useSelectedEventId();
-  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  const effectiveSelectedEventId = isLoadedRundown ? selectedEventId : null;
+  const rundownMetadata = getRundownMetadata(data, effectiveSelectedEventId);
   return { data, status, rundownMetadata };
 }
 
@@ -64,8 +57,8 @@ export function useRundownWithMetadata() {
  * Provides access to a flat rundown
  * built from the order and rundown fields
  */
-export function useFlatRundown() {
-  const { data, status } = useRundown();
+export function useFlatRundown(rundownId: Maybe<string>) {
+  const { data, status } = useRundown(rundownId);
 
   const flatRundown = useMemo(() => {
     if (data.revision === -1) {
@@ -77,11 +70,13 @@ export function useFlatRundown() {
   return { data: flatRundown, rundownId: data.id, status };
 }
 
-export function useFlatRundownWithMetadata() {
-  const { data, status } = useRundown();
-  const selectedEventId = useSelectedEventId();
+export function useFlatRundownWithMetadata(rundownId: Maybe<string>) {
+  'use memo';
 
-  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  const { data, status, isLoadedRundown } = useRundown(rundownId);
+  const selectedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedRundown ? selectedEventId : null;
+  const rundownWithMetadata = getFlatRundownMetadata(data, effectiveSelectedEventId);
   return { data: rundownWithMetadata, status };
 }
 
@@ -92,8 +87,8 @@ export function useFlatRundownWithMetadata() {
  * re-filtering on every render.
  *
  */
-export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useFlatRundownWithMetadata();
+export function usePartialRundown(rundownId: Maybe<string>, cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useFlatRundownWithMetadata(rundownId);
   const filteredData = useMemo(() => {
     return data.filter(cb);
   }, [data, cb]);
@@ -103,37 +98,20 @@ export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boo
 
 /**
  * Hook to get a specific entry by ID from the rundown
+ * @deprecated
  */
-export function useEntry(entryId: EntryId | null): OntimeEntry | null {
-  const { data: rundown } = useRundown();
+export function useEntry(rundownId: Maybe<string>, entryId: EntryId | null): OntimeEntry | null {
+  const { data: rundown } = useRundown(rundownId);
 
   if (entryId === null) return null;
   return rundown.entries[entryId] ?? null;
 }
 
-export function useRundownAuxData() {
-  const { data, status } = useRundown();
+export function useRundownAuxData(rundownId: Maybe<string>) {
+  const { data, status } = useRundown(rundownId);
   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/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/useEntryAction.ts

@@ -1,7 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   EntryId,
-  InsertOptions,
   MaybeString,
   OntimeDelay,
   OntimeEntry,
@@ -60,9 +59,15 @@ export type EventOptions = Partial<{
   before: MaybeString;
   // options of entries of type OntimeEvent
   linkPrevious: boolean;
+  /** the timing reference for the new entry, usually the same as after */
   lastEventId: MaybeString;
 }>;
 
+type ClientInsertOptions = {
+  after?: EntryId;
+  before?: EntryId;
+};
+
 /**
  * Gather utilities for actions on entries in the loaded rundown.
  */
@@ -120,7 +125,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
    * @private
    */
   const { mutateAsync: addEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entry]: [string, PatchWithId & InsertOptions]) => postAddEntry(rundownId, entry),
+    mutationFn: ([rundownId, entry]: [string, PatchWithId & ClientInsertOptions]) => postAddEntry(rundownId, entry),
     onMutate: async ([_rundownId, entry]) => {
       const queryKey = resolveCurrentRundownQueryKey();
       await queryClient.cancelQueries({ queryKey });
@@ -149,8 +154,9 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
         addToRundown(
           newRundown,
           optimisticEntry,
-          afterId,
           parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
+          afterId,
+          entry.before ?? null,
         );
 
         queryClient.setQueryData<Rundown>(queryKey, newRundown);
@@ -193,7 +199,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
         throw new Error('Rundown not initialised');
       }
 
-      const newEntry: PatchWithId & InsertOptions = { ...entry, id: generateId() };
+      const newEntry: PatchWithId & ClientInsertOptions = { ...entry, id: generateId() };
 
       // handle adding options that concern all event types
       if (options?.after) {
@@ -205,8 +211,8 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
 
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEntry)) {
+        // last event id is the timing reference of the previous OntimeEvent in rundown
         if (options?.lastEventId) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
           const previousEvent = rundownData.entries[options?.lastEventId];
           if (isOntimeEvent(previousEvent)) {
             newEntry.timeStart = previousEvent.timeEnd;
@@ -284,7 +290,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
    * Clone an entry
    */
   const clone = useCallback(
-    async (entryId: EntryId, options?: InsertOptions) => {
+    async (entryId: EntryId, options?: ClientInsertOptions) => {
       try {
         const rundownId = getCurrentRundownData()?.id;
         if (!rundownId) {
@@ -1057,7 +1063,7 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
 /**
  * Utility to create an optimistic entry for immediate cache insertion
  */
-function createOptimisticEntry(payload: PatchWithId & InsertOptions): OntimeEntry {
+function createOptimisticEntry(payload: PatchWithId & ClientInsertOptions): OntimeEntry {
   const { after: _after, before: _before, ...entryData } = payload;
   const id = entryData.id;
   let parent: EntryId | null = null;

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

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

apps/client/src/common/models/OntimeSettings.ts

@@ -6,5 +6,4 @@ export const ontimePlaceholderSettings: Settings = {
   operatorKey: null,
   timeFormat: '24',
   language: 'en',
-  auxTimerNames: ['', '', ''],
 };

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

@@ -13,7 +13,6 @@ type EditorSettingsStore = {
   defaultTimerType: TimerType;
   defaultEndAction: EndAction;
   inheritGroupColour: boolean;
-  auxTimersCollapsed: boolean;
   setDefaultDuration: (defaultDuration: string) => void;
   setLinkPrevious: (linkPrevious: boolean) => void;
   setInheritGroupColour: (inheritGroupColour: boolean) => void;
@@ -22,7 +21,6 @@ type EditorSettingsStore = {
   setDangerTime: (dangerTime: string) => void;
   setDefaultTimerType: (defaultTimerType: TimerType) => void;
   setDefaultEndAction: (defaultEndAction: EndAction) => void;
-  setAuxTimersCollapsed: (auxTimersCollapsed: boolean) => void;
 };
 
 export const editorSettingsDefaults = {
@@ -34,7 +32,6 @@ export const editorSettingsDefaults = {
   timerType: TimerType.CountDown,
   endAction: EndAction.None,
   inheritGroupColour: false,
-  auxTimersCollapsed: false,
 };
 
 enum EditorSettingsKeys {
@@ -46,7 +43,6 @@ enum EditorSettingsKeys {
   DefaultTimerType = 'ontime-default-timer-type',
   DefaultEndAction = 'ontime-default-end-action',
   InheritGroupColour = 'ontime-inherit-group-colour',
-  AuxTimersCollapsed = 'ontime-aux-timers-collapsed',
 }
 
 export const useEditorSettings = create<EditorSettingsStore>((set) => {
@@ -71,10 +67,6 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
       EditorSettingsKeys.InheritGroupColour,
       editorSettingsDefaults.inheritGroupColour,
     ),
-    auxTimersCollapsed: booleanFromLocalStorage(
-      EditorSettingsKeys.AuxTimersCollapsed,
-      editorSettingsDefaults.auxTimersCollapsed,
-    ),
 
     setDefaultDuration: (defaultDuration) =>
       set(() => {
@@ -118,10 +110,5 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
         localStorage.setItem(EditorSettingsKeys.InheritGroupColour, String(inheritGroupColour));
         return { inheritGroupColour };
       }),
-    setAuxTimersCollapsed: (auxTimersCollapsed) =>
-      set(() => {
-        localStorage.setItem(EditorSettingsKeys.AuxTimersCollapsed, String(auxTimersCollapsed));
-        return { auxTimersCollapsed };
-      }),
   };
 });

apps/client/src/common/utils/__tests__/rundownMetadata.test.ts

@@ -90,6 +90,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 0,
       isPast: true,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -107,6 +108,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 1, // UI indexes are 1 based
       isPast: true,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -124,6 +126,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 1,
       isPast: true,
       isNextDay: false,
+      isParentToLoaded: true,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -140,6 +143,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: true,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -156,6 +160,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: true,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -172,6 +177,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 3,
       isPast: false,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: true,
       isLoaded: true,
@@ -188,6 +194,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 4,
       isPast: false,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: true,
       isLoaded: false,
@@ -204,6 +211,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 5,
       isPast: false,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 7,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -256,6 +264,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 0,
       isPast: false,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -273,6 +282,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 1,
       isPast: false,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -290,6 +300,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: false,
       isNextDay: false,
+      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,

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

@@ -1,10 +0,0 @@
-export function getAuxTimerLabel(name: string | undefined, fallback: string): string {
-  const custom = name?.trim();
-  return custom ? custom : fallback;
-}
-
-/** Combines the aux timer's index with its custom name, eg. "Aux 1: Speaker" */
-export function getAuxTimerIndexedLabel(name: string | undefined, index: number): string {
-  const custom = name?.trim();
-  return custom ? `Aux ${index}: ${custom}` : `Aux ${index}`;
-}

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

@@ -27,6 +27,7 @@ export type RundownMetadata = {
   groupColour: string | undefined;
   groupEntries: number | undefined;
   isFirstAfterGroup: boolean;
+  isParentToLoaded: boolean; // if the group contains the loaded event
 };
 
 export type ExtendedEntry<T extends OntimeEntry = OntimeEntry> = T & RundownMetadata;
@@ -94,6 +95,7 @@ export function initRundownMetadata(selectedEventId: MaybeString) {
     groupColour: undefined,
     groupEntries: undefined,
     isFirstAfterGroup: false,
+    isParentToLoaded: false,
   };
 
   function process(entry: OntimeEntry): Readonly<RundownMetadata> {
@@ -117,6 +119,7 @@ function processEntry(
   // initialise data to be overridden below
   processedData.isNextDay = false;
   processedData.isLoaded = false;
+  processedData.isParentToLoaded = false;
 
   processedData.previousEntryId = processedData.thisId; // thisId comes from the previous iteration
   processedData.thisId = entry.id; // we reassign thisId
@@ -132,6 +135,7 @@ function processEntry(
     processedData.groupId = entry.id;
     processedData.groupColour = entry.colour;
     processedData.groupEntries = entry.entries.length;
+    processedData.isParentToLoaded = selectedEventId ? entry.entries.includes(selectedEventId) : false;
   } else {
     // for delays and groups, we insert the group metadata
     if ((entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent !== processedData.groupId) {

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

@@ -14,7 +14,6 @@ import {
   APP_SETTINGS,
   CLIENT_LIST,
   CSS_OVERRIDE,
-  CURRENT_RUNDOWN_QUERY_KEY,
   CUSTOM_FIELDS,
   PROJECT_DATA,
   REPORT,
@@ -25,6 +24,7 @@ import {
   VIEW_SETTINGS,
   getRundownQueryKey,
   PROJECT_RUNDOWNS,
+  PROJECT_LIST,
 } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
@@ -216,6 +216,9 @@ export const connectSocket = () => {
             case RefetchKey.ProjectRundowns:
               ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS });
               break;
+            case RefetchKey.ProjectFiles:
+              ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_LIST });
+              break;
             default: {
               target satisfies never;
               break;
@@ -238,7 +241,6 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
   if (!rundownId) {
     // we omit rundownId to signify invalidate all rundowns
     ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
-    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
     return;
   }
 
@@ -252,12 +254,6 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
   }
 
   ontimeQueryClient.invalidateQueries({ queryKey, exact: true });
-
-  // keep current alias in sync with the ID-based cache
-  const loadedRundownId = ontimeQueryClient.getQueryData<{ loaded: string }>(PROJECT_RUNDOWNS)?.loaded;
-  if (!loadedRundownId || loadedRundownId === rundownId) {
-    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
-  }
 }
 
 export function sendSocket<T extends MessageTag | ApiActionTag>(

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

@@ -5,6 +5,7 @@ import {
   MILLIS_PER_SECOND,
   dayInMs,
   formatFromMillis,
+  getExpectedEnd,
   getExpectedStart,
 } from 'ontime-utils';
 
@@ -186,15 +187,13 @@ export function getExpectedTimesFromExtendedEvent(
       ...state,
     },
   );
-
+  const expectedEnd = getExpectedEnd(event, expectedStart, state.currentDay);
   const plannedEnd = event.timeStart + event.duration + event.delay;
 
   return {
     expectedStart,
     timeToStart: expectedStart - state.clock,
-    expectedEnd: event.countToEnd
-      ? Math.max(expectedStart + event.duration, plannedEnd)
-      : expectedStart + event.duration,
+    expectedEnd,
     plannedEnd,
   };
 }

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

@@ -5,7 +5,7 @@ import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import useReport from '../../../../common/hooks-query/useReport';
-import useRundown from '../../../../common/hooks-query/useRundown';
+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 } = useRundown(null);
 
   const clearReport = async () => await deleteAllReport();
   const downloadCSV = (combinedReport: CombinedReport[]) => {

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

@@ -1,5 +1,5 @@
 import { useDisclosure } from '@mantine/hooks';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import {
   IoAdd,
   IoDocumentOutline,
@@ -18,9 +18,9 @@ import IconButton from '../../../../common/components/buttons/IconButton';
 import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
+import { useDirectLinkToBackgroundEdit } from '../../../../common/context/RundownSelectionContext';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 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';
@@ -28,6 +28,20 @@ import { ManageRundownForm } from './ManageRundownForm';
 import style from './ManagePanel.module.scss';
 
 export default function ManageRundowns() {
+  return (
+    <Suspense
+      fallback={
+        <div className={style.empty}>
+          <Panel.Loader isLoading />
+        </div>
+      }
+    >
+      <ManageRundownsSuspense />
+    </Suspense>
+  );
+}
+
+function ManageRundownsSuspense() {
   const { data } = useProjectRundowns();
   const { duplicate, remove, load, rename } = useMutateProjectRundowns();
   const [isOpenDelete, deleteHandlers] = useDisclosure();

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

@@ -25,6 +25,13 @@
   margin-top: 1rem;
 }
 
+.finishActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
 .sourceGrid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));

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

@@ -8,6 +8,7 @@ import type {
 import { getErrorMessage, ImportMap } from 'ontime-utils';
 import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { IoCloudOutline, IoDownloadOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router';
 
 import {
   getWorksheetMetadata as getExcelWorksheetMetadata,
@@ -23,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 { useRundown } from '../../../../../common/hooks-query/useRundown';
 import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
@@ -56,9 +57,11 @@ export default function SourcesPanel() {
   const [error, setError] = useState('');
   const [hasFile, setHasFile] = useState<'none' | 'loading' | 'done'>('none');
   const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
+  const [completedRundownTitle, setCompletedRundownTitle] = useState('');
 
-  const { data: currentRundown } = useRundown();
+  const { data: currentRundown } = useRundown(null);
   const { applyImport } = useSpreadsheetImport();
+  const navigate = useNavigate();
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -101,6 +104,7 @@ export default function SourcesPanel() {
     setHasFile('none');
     setActiveSource(null);
     setError('');
+    setCompletedRundownTitle('');
   };
 
   const openGSheetFlow = () => {
@@ -123,11 +127,12 @@ export default function SourcesPanel() {
     }
   };
 
-  const handleFinished = () => {
+  const handleFinished = (rundownTitle: string) => {
     setImportFlow('finished');
     setHasFile('none');
     setActiveSource(null);
     setError('');
+    setCompletedRundownTitle(rundownTitle);
   };
 
   const handleApplyImport = async (
@@ -139,7 +144,7 @@ export default function SourcesPanel() {
     if (mode === 'new') {
       const title = newRundownTitle.trim() || preview.rundown.title;
       await applyImport({ mode: 'new', rundown: { ...preview.rundown, title }, customFields: preview.customFields });
-      handleFinished();
+      handleFinished(title);
       return;
     }
 
@@ -156,7 +161,7 @@ export default function SourcesPanel() {
       customFields: preview.customFields,
       providedFields,
     });
-    handleFinished();
+    handleFinished(currentRundown.title);
   };
 
   const loadWorksheetMetadata = useCallback(
@@ -289,11 +294,20 @@ export default function SourcesPanel() {
         {showCompleted && (
           <div className={style.finishSection}>
             <span className={style.finishBadge}>Import complete</span>
-            <div className={style.finishTitle}>Spreadsheet data applied.</div>
-            <div className={style.finishDescription}>You can close this flow or start another import.</div>
-            <Button variant='subtle-white' onClick={resetFlow}>
-              Reset flow
-            </Button>
+            <div className={style.finishTitle}>
+              Spreadsheet data applied to {completedRundownTitle || 'your rundown'}.
+            </div>
+            <div className={style.finishDescription}>
+              Review the imported rundown in the editor or start another import.
+            </div>
+            <div className={style.finishActions}>
+              <Button variant='primary' onClick={() => navigate('/editor')}>
+                Open editor
+              </Button>
+              <Button variant='subtle-white' onClick={resetFlow}>
+                Import another
+              </Button>
+            </div>
           </div>
         )}
         {isGSheetFlow && (

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/SheetImportEditor.module.scss

@@ -92,6 +92,10 @@
   font-weight: 600;
 }
 
+.toolbarWarning {
+  color: $orange-400;
+}
+
 .mappingPaneTitle {
   align-self: center;
 }

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/SheetImportEditor.tsx

@@ -132,7 +132,16 @@ export default function SheetImportEditor({
             }
           />
         </label>
-        {toolbarStatus && <Panel.Description>{toolbarStatus}</Panel.Description>}
+        {toolbarStatus && (
+          <Panel.Description>
+            {toolbarStatus.entries === '–'
+              ? 'No import preview yet'
+              : `${toolbarStatus.entries} entries · ${toolbarStatus.groups} groups · ${toolbarStatus.milestones} milestones · ${toolbarStatus.start}–${toolbarStatus.end} · ${toolbarStatus.duration}`}
+            {toolbarStatus.warnings > 0 && (
+              <span className={style.toolbarWarning}> · {toolbarStatus.warnings} warnings</span>
+            )}
+          </Panel.Description>
+        )}
       </Panel.InlineElements>
 
       <div className={style.editorBody}>
@@ -150,13 +159,19 @@ export default function SheetImportEditor({
 
         <section className={style.previewPane}>
           <div className={style.previewPaneHeader}>
-            <span className={style.previewPaneTitle}>Import preview</span>
+            <div className={style.previewPaneHeading}>
+              <span className={style.previewPaneTitle}>Import preview</span>
+            </div>
           </div>
           <div className={style.tableShell}>
             <PreviewTable
               preview={state.preview}
               columnLabels={columnLabels}
+              canRefresh={canPreview}
               isLoadingMetadata={isLoadingMetadata}
+              isRefreshing={state.loading === 'preview'}
+              needsPreviewRefresh={state.needsPreviewRefresh}
+              onRefresh={handlePreviewSubmit}
               worksheetHeaders={worksheetHeaders}
             />
           </div>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/preview/PreviewTable.module.scss

@@ -1,27 +1,35 @@
 .emptyState {
-  height: 100%;
-  min-height: 16rem;
-  display: grid;
-  place-content: center;
-  gap: 0.35rem;
-  padding: 1.5rem;
+  padding: 3rem 1.5rem;
   text-align: center;
 }
 
+.emptyMessage {
+  width: min(30rem, 100%);
+  margin-inline: auto;
+}
+
 .emptyTitle {
-  color: $ui-white;
-  font-size: 1rem;
-  font-weight: 600;
+  margin-bottom: 0.25rem;
+  color: rgba($gray-200, 0.72);
+  font-size: calc(1rem + 2px);
+  font-weight: 400;
 }
 
 .emptyBody {
-  color: $gray-400;
-  font-size: 0.95rem;
+  color: rgba($gray-200, 0.55);
+  font-size: calc(1rem - 3px);
+  line-height: 1.5;
+}
+
+.emptyAction {
+  margin: 1rem auto 0;
 }
 
 .table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: $ui-white;
   font-size: calc(1rem - 2px);
   text-align: left;
   table-layout: auto;
@@ -34,31 +42,101 @@
   }
 
   th {
-    font-weight: 400;
-    color: $gray-400;
-    text-transform: capitalize;
-    vertical-align: top;
+    color: $gray-300;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    vertical-align: bottom;
     white-space: normal;
   }
 
   th,
   td {
-    padding: 0.5rem;
+    box-sizing: border-box;
     min-width: 8rem;
-    vertical-align: top;
+    max-width: 20rem;
+    padding: 0.55rem 0.65rem;
+    border-bottom: 1px solid $white-10;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
   }
 
-  tr:nth-child(even) {
-    background-color: $white-1;
+  tbody tr {
+    --entry-colour: transparent;
+    background-color: color-mix(in srgb, $gray-1300 96%, var(--entry-colour) 4%);
+    box-shadow: inset 3px 0 var(--entry-colour);
   }
+
+  td[data-empty='true'] {
+    color: $gray-600;
+  }
+}
+
+.rowNumber,
+.rowType {
+  position: sticky;
+  z-index: 1;
+  background-color: inherit;
 }
 
 .rowNumber {
-  width: 4.5rem;
-  min-width: 4.5rem;
+  left: 0;
+  width: 3.25rem;
+  min-width: 3.25rem !important;
+  color: $gray-400;
+  text-align: right;
 }
 
 .rowType {
-  width: 7rem;
-  min-width: 7rem;
+  left: 3.25rem;
+  width: 6.25rem;
+  min-width: 6.25rem !important;
+  color: $gray-400;
+  font-size: 0.8rem;
+  box-shadow: 1px 0 $white-10;
+}
+
+thead .rowNumber,
+thead .rowType {
+  z-index: 2;
+  background-color: $gray-1350;
+}
+
+.numericCell {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.multilineCell {
+  max-width: 30rem !important;
+  overflow-wrap: anywhere;
+  text-overflow: clip !important;
+  white-space: pre-wrap !important;
+}
+
+.eventRow {
+  .rowNumber {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.groupRow {
+  background-color: color-mix(in srgb, $gray-1300 88%, var(--entry-colour) 12%) !important;
+  box-shadow: inset 4px 0 var(--entry-colour) !important;
+  font-weight: 600;
+
+  td {
+    min-height: 3.25rem;
+    border-top: 0.75rem solid $gray-1350;
+  }
+}
+
+.milestoneRow {
+  background-color: color-mix(in srgb, $gray-1300 93%, var(--entry-colour) 7%) !important;
+  box-shadow: inset 3px 0 var(--entry-colour) !important;
+  color: $gray-300;
+  font-style: italic;
 }

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/preview/PreviewTable.tsx

@@ -1,7 +1,11 @@
 import type { CustomField, CustomFieldKey, SpreadsheetPreviewResponse } from 'ontime-types';
-import { isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { isOntimeDelay, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import type { CSSProperties } from 'react';
 import { useMemo } from 'react';
 
+import Button from '../../../../../../../common/components/buttons/Button';
+import Tag from '../../../../../../../common/components/tag/Tag';
+import { getRundownMetadata } from '../../../../../../../common/utils/rundownMetadata';
 import { getCellValue } from './previewTableUtils';
 
 import style from './PreviewTable.module.scss';
@@ -9,14 +13,85 @@ import style from './PreviewTable.module.scss';
 interface PreviewTableProps {
   preview: SpreadsheetPreviewResponse | null;
   columnLabels: string[];
+  canRefresh: boolean;
   isLoadingMetadata: boolean;
+  isRefreshing: boolean;
+  needsPreviewRefresh: boolean;
+  onRefresh: () => void;
   worksheetHeaders: string[];
 }
 
+const priorityColumns = ['Title', 'Cue', 'Start', 'End', 'Duration'];
+const numericColumns = new Set(['Start', 'End', 'Duration', 'Time warning', 'Time danger']);
+const transparentColour = 'transparent';
+
+type PreviewEntry = SpreadsheetPreviewResponse['rundown']['entries'][string];
+
+function getEntryDisplay(entry: PreviewEntry, groupColour?: string) {
+  if (isOntimeGroup(entry)) {
+    return {
+      rowClassName: style.groupRow,
+      entryColour: entry.colour,
+      entryType: 'Group',
+    };
+  }
+
+  const entryColour = groupColour ?? transparentColour;
+
+  if (isOntimeMilestone(entry)) {
+    return {
+      rowClassName: style.milestoneRow,
+      entryColour,
+      entryType: 'Milestone',
+    };
+  }
+
+  if (isOntimeDelay(entry)) {
+    return {
+      rowClassName: style.eventRow,
+      entryColour,
+      entryType: 'Delay',
+    };
+  }
+
+  return {
+    rowClassName: style.eventRow,
+    entryColour,
+    entryType: 'Event',
+  };
+}
+
+function getCellClassName(label: string, value: string) {
+  if (value.includes('\n')) {
+    return style.multilineCell;
+  }
+
+  if (numericColumns.has(label)) {
+    return style.numericCell;
+  }
+
+  return undefined;
+}
+
+function getDisplayColumns(columnLabels: string[]) {
+  return [...columnLabels].sort((left, right) => {
+    const leftPriority = priorityColumns.indexOf(left);
+    const rightPriority = priorityColumns.indexOf(right);
+    return (
+      (leftPriority === -1 ? priorityColumns.length : leftPriority) -
+      (rightPriority === -1 ? priorityColumns.length : rightPriority)
+    );
+  });
+}
+
 export default function PreviewTable({
   preview,
   columnLabels,
+  canRefresh,
   isLoadingMetadata,
+  isRefreshing,
+  needsPreviewRefresh,
+  onRefresh,
   worksheetHeaders,
 }: PreviewTableProps) {
   const customFieldKeyByLabel = useMemo(() => {
@@ -24,33 +99,57 @@ export default function PreviewTable({
     return new Map(Object.entries(preview.customFields).map(([fieldId, field]) => [field.label, fieldId]));
   }, [preview]);
 
+  const displayColumns = useMemo(() => getDisplayColumns(columnLabels), [columnLabels]);
+
+  const previewMetadata = useMemo(() => {
+    if (!preview) return null;
+    return getRundownMetadata(preview.rundown, null);
+  }, [preview]);
+
   if (!preview) {
+    let emptyTitle = 'Preview not generated';
     let emptyContent = 'Select the fields you want to import, then click Preview import.';
 
     if (isLoadingMetadata) {
+      emptyTitle = 'Loading worksheet';
       emptyContent = 'Loading worksheet metadata...';
     } else if (worksheetHeaders.length === 0) {
+      emptyTitle = 'No headers found';
       emptyContent =
         'No column headers detected in this worksheet. Try a different worksheet or ensure the first row contains column headers.';
+    } else if (needsPreviewRefresh) {
+      emptyTitle = 'Preview needs updating';
+      emptyContent = 'Your column mapping changed. Preview the import again to update this table.';
     }
 
     return (
       <div className={style.emptyState}>
-        <div className={style.emptyTitle}>Preview not generated</div>
-        <div className={style.emptyBody}>{emptyContent}</div>
+        <div className={style.emptyMessage}>
+          <div className={style.emptyTitle}>{emptyTitle}</div>
+          <div className={style.emptyBody}>{emptyContent}</div>
+          {needsPreviewRefresh && (
+            <Button
+              className={style.emptyAction}
+              variant='primary'
+              onClick={onRefresh}
+              disabled={!canRefresh}
+              loading={isRefreshing}
+            >
+              Refresh preview
+            </Button>
+          )}
+        </div>
       </div>
     );
   }
 
-  let eventIndex = 0;
-
   return (
     <table className={style.table}>
       <thead>
         <tr>
           <th className={style.rowNumber}>#</th>
           <th className={style.rowType}>Type</th>
-          {columnLabels.map((label, index) => (
+          {displayColumns.map((label, index) => (
             <th key={`${label}-${index}`}>{label}</th>
           ))}
         </tr>
@@ -59,16 +158,29 @@ export default function PreviewTable({
         {preview.rundown.flatOrder.map((entryId) => {
           const entry = preview.rundown.entries[entryId];
           const isEvent = isOntimeEvent(entry);
-          if (isEvent) eventIndex++;
-          const hasType = isEvent || isOntimeGroup(entry) || isOntimeMilestone(entry);
+          const entryMetadata = previewMetadata?.[entryId];
+          const { rowClassName, entryColour, entryType } = getEntryDisplay(entry, entryMetadata?.groupColour);
 
           return (
-            <tr key={entryId}>
-              <td className={style.rowNumber}>{isEvent ? eventIndex : ''}</td>
-              <td className={style.rowType}>{hasType ? entry.type : ''}</td>
-              {columnLabels.map((label, colIndex) => (
-                <td key={`${entryId}-${colIndex}`}>{getCellValue(label, entry, customFieldKeyByLabel)}</td>
-              ))}
+            <tr key={entryId} className={rowClassName} style={{ '--entry-colour': entryColour } as CSSProperties}>
+              <td className={style.rowNumber}>{isEvent ? entryMetadata?.eventIndex : ''}</td>
+              <td className={style.rowType}>
+                <Tag>{entryType}</Tag>
+              </td>
+              {displayColumns.map((label, colIndex) => {
+                const value = getCellValue(label, entry, customFieldKeyByLabel);
+                const cellClassName = getCellClassName(label, value);
+                return (
+                  <td
+                    key={`${entryId}-${colIndex}`}
+                    className={cellClassName}
+                    data-empty={value === ''}
+                    title={value || undefined}
+                  >
+                    {value}
+                  </td>
+                );
+              })}
             </tr>
           );
         })}

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/useSheetImportForm.ts

@@ -5,7 +5,8 @@ import type {
   SpreadsheetPreviewResponse,
   SpreadsheetWorksheetMetadata,
 } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { millisToString, removeTrailingZero } from 'ontime-utils';
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
@@ -32,7 +33,7 @@ type ImportAction =
   | { type: 'previewSuccess'; preview: SpreadsheetPreviewResponse }
   | { type: 'applySuccess' }
   | { type: 'exportSuccess' }
-  | { type: 'clearPreview'; error?: string }
+  | { type: 'clearPreview'; error?: string; needsRefresh?: boolean }
   | { type: 'failure'; error: string }
   | { type: 'reset' };
 
@@ -40,12 +41,14 @@ type ImportState = {
   loading: '' | 'preview' | 'apply' | 'export';
   error: string;
   preview: SpreadsheetPreviewResponse | null;
+  needsPreviewRefresh: boolean;
 };
 
 const initialImportState: ImportState = {
   loading: '',
   error: '',
   preview: null,
+  needsPreviewRefresh: false,
 };
 
 function importReducer(state: ImportState, action: ImportAction): ImportState {
@@ -57,15 +60,15 @@ function importReducer(state: ImportState, action: ImportAction): ImportState {
     case 'startExport':
       return { ...state, loading: 'export', error: '' };
     case 'previewSuccess':
-      return { loading: '', error: '', preview: action.preview };
+      return { loading: '', error: '', preview: action.preview, needsPreviewRefresh: false };
     case 'applySuccess':
     case 'exportSuccess':
       return { ...state, loading: '' };
     case 'clearPreview':
-      return { ...state, error: action.error ?? '', preview: null };
+      return { ...state, error: action.error ?? '', preview: null, needsPreviewRefresh: action.needsRefresh ?? false };
     case 'failure': {
       if (state.loading === 'preview') {
-        return { loading: '', error: action.error, preview: null };
+        return { loading: '', error: action.error, preview: null, needsPreviewRefresh: false };
       }
       return { ...state, loading: '', error: action.error };
     }
@@ -221,7 +224,7 @@ export function useSheetImportForm({
     const sub = watch(() => {
       if (!previewRef.current) return;
       previewRef.current = null;
-      dispatch({ type: 'clearPreview' });
+      dispatch({ type: 'clearPreview', needsRefresh: true });
     });
     return () => sub.unsubscribe();
   }, [watch]);
@@ -297,15 +300,37 @@ export function useSheetImportForm({
   }, [append]);
 
   const toolbarStatus = (() => {
-    const warningText = warningCount > 0 ? ` | warnings: ${warningCount}` : '';
-
     if (!state.preview) {
-      return `entries: – | start: – | end: – | duration: –${warningText}`;
+      return {
+        entries: '–',
+        groups: '–',
+        milestones: '–',
+        start: '–',
+        end: '–',
+        duration: '–',
+        warnings: warningCount,
+      };
     }
 
-    const { flatOrder } = state.preview.rundown;
+    const { entries, flatOrder } = state.preview.rundown;
     const { start, end, duration } = state.preview.summary;
-    return `entries: ${flatOrder.length} | start: ${millisToString(start)} | end: ${millisToString(end)} | duration: ${formatDuration(duration)}${warningText}`;
+    let groups = 0;
+    let milestones = 0;
+    for (const entryId of flatOrder) {
+      const entry = entries[entryId];
+      if (isOntimeGroup(entry)) groups++;
+      else if (isOntimeMilestone(entry)) milestones++;
+    }
+
+    return {
+      entries: flatOrder.length,
+      groups,
+      milestones,
+      start: removeTrailingZero(millisToString(start)),
+      end: removeTrailingZero(millisToString(end)),
+      duration: formatDuration(duration),
+      warnings: warningCount,
+    };
   })();
 
   return {

apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { IoArrowDown, IoArrowUp } from 'react-icons/io5';
 
 import Info from '../../../../common/components/info/Info';
@@ -11,11 +11,25 @@ import style from './ProjectPanel.module.scss';
 type SortParameter = 'alphabetical' | 'modified';
 
 export default function ProjectList() {
+  return (
+    <Suspense
+      fallback={
+        <div className={style.empty}>
+          <Panel.Loader isLoading />
+        </div>
+      }
+    >
+      <ProjectListSuspend />
+    </Suspense>
+  );
+}
+
+function ProjectListSuspend() {
   const [editingMode, setEditingMode] = useState<EditMode | null>(null);
   const [editingFilename, setEditingFilename] = useState<string | null>(null);
   const [sortMode, setSortMode] = useState<ProjectSortMode>('modified-desc');
 
-  const { data, refetch, status } = useOrderedProjectList(sortMode);
+  const { data, refetch } = useOrderedProjectList(sortMode);
 
   const handleToggleEditMode = (editMode: EditMode, filename: string | null) => {
     setEditingMode((prev) => (prev === editMode && filename === editingFilename ? null : editMode));
@@ -38,14 +52,6 @@ export default function ProjectList() {
     });
   };
 
-  if (status === 'pending') {
-    return (
-      <div className={style.empty}>
-        <Panel.Loader isLoading />
-      </div>
-    );
-  }
-
   const numProjects = data.reorderedProjectFiles.length;
 
   return (

apps/client/src/features/app-settings/panel/settings-panel/AuxTimerSettings.tsx

@@ -1,95 +0,0 @@
-import { Settings } from 'ontime-types';
-import { auxTimerNameMaxLength } from 'ontime-utils';
-import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-
-import { postSettings } from '../../../../common/api/settings';
-import { maybeAxiosError } from '../../../../common/api/utils';
-import Button from '../../../../common/components/buttons/Button';
-import Info from '../../../../common/components/info/Info';
-import Input from '../../../../common/components/input/input/Input';
-import useSettings from '../../../../common/hooks-query/useSettings';
-import { preventEscape } from '../../../../common/utils/keyEvent';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-export default function AuxTimerSettings() {
-  const { data, status, refetch } = useSettings();
-  const {
-    handleSubmit,
-    register,
-    reset,
-    setError,
-    formState: { isSubmitting, isDirty, errors },
-  } = useForm<Settings>({
-    defaultValues: data,
-    resetOptions: {
-      keepDirtyValues: true,
-    },
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset(data);
-    }
-  }, [data, reset]);
-
-  const onSubmit = async (formData: Settings) => {
-    try {
-      await postSettings(formData);
-    } catch (error) {
-      const message = maybeAxiosError(error);
-      setError('root', { message });
-    } finally {
-      await refetch();
-    }
-  };
-
-  const onReset = () => {
-    reset(data);
-  };
-
-  const isLoading = status === 'pending';
-
-  return (
-    <Panel.Section
-      as='form'
-      onSubmit={handleSubmit(onSubmit)}
-      onKeyDown={(event) => preventEscape(event, onReset)}
-      id='aux-timer-settings'
-    >
-      <Panel.Card>
-        <Panel.SubHeader>
-          Aux timers
-          <Panel.InlineElements>
-            <Button disabled={!isDirty || isSubmitting} variant='ghosted' onClick={onReset}>
-              Revert to saved
-            </Button>
-            <Button type='submit' loading={isSubmitting} disabled={!isDirty} variant='primary'>
-              Save
-            </Button>
-          </Panel.InlineElements>
-        </Panel.SubHeader>
-        <Panel.Divider />
-        <Panel.Section>
-          <Info>Give the aux timers custom names. Names are shown across the editor controls and views.</Info>
-          <Panel.Loader isLoading={isLoading} />
-          <Panel.Error>{errors.root?.message}</Panel.Error>
-          <Panel.ListGroup>
-            <Panel.ListItem>
-              <Panel.Field title='Aux timer 1' description='Custom name for aux timer 1' />
-              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 1' {...register('auxTimerNames.0')} />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field title='Aux timer 2' description='Custom name for aux timer 2' />
-              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 2' {...register('auxTimerNames.1')} />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field title='Aux timer 3' description='Custom name for aux timer 3' />
-              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 3' {...register('auxTimerNames.2')} />
-            </Panel.ListItem>
-          </Panel.ListGroup>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
-  );
-}

apps/client/src/features/app-settings/panel/settings-panel/SettingsPanel.tsx

@@ -3,7 +3,6 @@ import { isDocker } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 import CustomViews from '../manage-panel/CustomViews';
-import AuxTimerSettings from './AuxTimerSettings';
 import GeneralSettings from './GeneralSettings';
 import McpSection from './McpSection';
 import ProjectData from './ProjectData';
@@ -13,7 +12,6 @@ import ViewSettings from './ViewSettings';
 export default function SettingsPanel({ location }: PanelBaseProps) {
   const dataRef = useScrollIntoView<HTMLDivElement>('data', location);
   const generalRef = useScrollIntoView<HTMLDivElement>('general', location);
-  const auxTimersRef = useScrollIntoView<HTMLDivElement>('aux-timers', location);
   const viewRef = useScrollIntoView<HTMLDivElement>('view', location);
   const customViewsRef = useScrollIntoView<HTMLDivElement>('custom-views', location);
   const mcpRef = useScrollIntoView<HTMLDivElement>('mcp', location);
@@ -28,9 +26,6 @@ export default function SettingsPanel({ location }: PanelBaseProps) {
       <div ref={generalRef}>
         <GeneralSettings />
       </div>
-      <div ref={auxTimersRef}>
-        <AuxTimerSettings />
-      </div>
       <div ref={viewRef}>
         <ViewSettings />
       </div>

apps/client/src/features/app-settings/useAppSettingsMenu.tsx

@@ -17,7 +17,6 @@ const staticOptions = [
     secondary: [
       { id: 'settings__data', label: 'Project data' },
       { id: 'settings__general', label: 'General settings' },
-      { id: 'settings__aux-timers', label: 'Aux timers' },
       { id: 'settings__view', label: 'View settings' },
       { id: 'settings__custom-views', label: 'Custom views' },
       { id: 'settings__mcp', label: 'MCP Server' },

apps/client/src/features/control/playback/PlaybackControl.module.scss

@@ -3,34 +3,6 @@
   margin: 0 auto;
 }
 
-.auxHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 1rem;
-}
-
-.label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-}
-
-.auxHeaderButtons {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.activeIndicator {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background-color: $active-indicator;
-}
-
 .auxTimers {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -1,10 +1,4 @@
-import { IoChevronDown, IoChevronUp, IoSettingsOutline } from 'react-icons/io5';
-
-import IconButton from '../../../common/components/buttons/IconButton';
-import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useAuxTimersActive, usePlaybackControl } from '../../../common/hooks/useSocket';
-import { useEditorSettings } from '../../../common/stores/editorSettings';
-import useAppSettingsNavigation from '../../app-settings/useAppSettingsNavigation';
+import { usePlaybackControl } from '../../../common/hooks/useSocket';
 import AddTime from './add-time/AddTime';
 import { AuxTimer } from './aux-timer/AuxTimer';
 import PlaybackButtons from './playback-buttons/PlaybackButtons';
@@ -14,9 +8,6 @@ import style from './PlaybackControl.module.scss';
 
 export default function PlaybackControl() {
   const data = usePlaybackControl();
-  const { setLocation } = useAppSettingsNavigation();
-  const { auxTimersCollapsed, setAuxTimersCollapsed } = useEditorSettings();
-  const isAuxTimerActive = useAuxTimersActive();
 
   return (
     <div className={style.mainContainer}>
@@ -29,42 +20,11 @@ export default function PlaybackControl() {
         selectedEventIndex={data.selectedEventIndex}
         timerPhase={data.timerPhase}
       />
-      <div className={style.auxHeader}>
-        <span className={style.label}>
-          Aux timers
-          {auxTimersCollapsed && isAuxTimerActive && <span className={style.activeIndicator} />}
-        </span>
-        <div className={style.auxHeaderButtons}>
-          <Tooltip
-            text='Name aux timers'
-            render={
-              <IconButton
-                size='small'
-                variant='subtle-white'
-                aria-label='Name aux timers'
-                onClick={() => setLocation('settings__aux-timers')}
-              />
-            }
-          >
-            <IoSettingsOutline />
-          </Tooltip>
-          <IconButton
-            size='small'
-            variant='subtle-white'
-            aria-label={auxTimersCollapsed ? 'Expand aux timers' : 'Collapse aux timers'}
-            onClick={() => setAuxTimersCollapsed(!auxTimersCollapsed)}
-          >
-            {auxTimersCollapsed ? <IoChevronUp /> : <IoChevronDown />}
-          </IconButton>
-        </div>
+      <div className={style.auxTimers}>
+        <AuxTimer index={1} />
+        <AuxTimer index={2} />
+        <AuxTimer index={3} />
       </div>
-      {!auxTimersCollapsed && (
-        <div className={style.auxTimers}>
-          <AuxTimer index={1} />
-          <AuxTimer index={2} />
-          <AuxTimer index={3} />
-        </div>
-      )}
     </div>
   );
 }

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

@@ -1,18 +1,8 @@
 .label {
   display: block;
   margin-top: 1rem;
-  // aux timers sit in a 3 column grid, without this a long name would grow its column
-  // instead of shrinking to it, breaking the equal column layout
-  min-width: 0;
-}
-
-.labelText {
-  display: block;
   font-size: $inner-section-text-size;
   color: $label-gray;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .controls {

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

@@ -3,9 +3,7 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import { IoArrowDown, IoArrowUp, IoPause, IoPlay, IoStop } from 'react-icons/io5';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
-import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
-import { getAuxTimerIndexedLabel } from '../../../../common/utils/auxTimerUtils';
 import TapButton from '../tap-button/TapButton';
 
 import style from './AuxTimer.module.scss';
@@ -15,12 +13,10 @@ interface AuxTimerProps {
 }
 
 export function AuxTimer({ index }: AuxTimerProps) {
-  const { playback, direction, name } = useAuxTimerControl(index);
+  const { playback, direction } = useAuxTimerControl(index);
 
   const { stop, setDirection } = setAuxTimer;
 
-  const label = getAuxTimerIndexedLabel(name, index);
-
   const toggleDirection = () => {
     const newDirection = direction === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
     setDirection(index, newDirection);
@@ -31,12 +27,10 @@ export function AuxTimer({ index }: AuxTimerProps) {
 
   return (
     <label className={style.label}>
-      <Tooltip text={label} render={<span />} className={style.labelText}>
-        {label}
-      </Tooltip>
+      Aux Timer {index}
       <div className={style.controls}>
         <div className={style.input}>
-          <AuxTimerInput index={index} isActive={isActive} placeholder={`Aux ${index}`} />
+          <AuxTimerInput index={index} isActive={isActive} />
           <TapButton onClick={toggleDirection} aspect='tight' disabled={isActive}>
             {direction === SimpleDirection.CountDown && <IoArrowDown data-testid={`aux-timer-direction-${index}`} />}
             {direction === SimpleDirection.CountUp && <IoArrowUp data-testid={`aux-timer-direction-${index}`} />}
@@ -56,10 +50,9 @@ export function AuxTimer({ index }: AuxTimerProps) {
 interface AuxTimerInputProps {
   index: number;
   isActive: boolean;
-  placeholder: string;
 }
 
-function AuxTimerInput({ index, isActive, placeholder }: AuxTimerInputProps) {
+function AuxTimerInput({ index, isActive }: AuxTimerInputProps) {
   const newTimeInMs = useAuxTimerTime(index);
   const { setDuration } = setAuxTimer;
 
@@ -77,7 +70,7 @@ function AuxTimerInput({ index, isActive, placeholder }: AuxTimerInputProps) {
   }
 
   return (
-    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={placeholder} />
+    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={`Aux ${index}`} />
   );
 }
 

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

@@ -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 } = useRundownWithMetadata(null);
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const { data: settings, status: settingsStatus } = useSettings();
 

apps/client/src/features/overview/OverviewWrapper.tsx

@@ -1,9 +1,10 @@
 import { ErrorBoundary } from '@sentry/react';
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, Suspense } from 'react';
 
 import ScrollArea from '../../common/components/scroll-area/ScrollArea';
 import { useIsOnline } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
+import Loader from '../../views/common/loader/Loader';
 
 import style from './Overview.module.scss';
 
@@ -15,18 +16,37 @@ export function OverviewWrapper({ navElements, children }: PropsWithChildren<Ove
   const isOnline = useIsOnline();
 
   return (
-    <div className={cx([style.overview, !isOnline && style.isOffline])}>
-      <ErrorBoundary>
-        <div className={style.nav}>{navElements}</div>
-        <ScrollArea
-          className={style.infoScroll}
-          contentClassName={style.info}
-          contentStyle={{ minWidth: '100%' }}
-          orientation='horizontal'
-        >
-          {children}
-        </ScrollArea>
-      </ErrorBoundary>
+    <Suspense fallback={<OverviewFallback navElements={navElements} />}>
+      <div className={cx([style.overview, !isOnline && style.isOffline])}>
+        <ErrorBoundary>
+          <div className={style.nav}>{navElements}</div>
+          <ScrollArea
+            className={style.infoScroll}
+            contentClassName={style.info}
+            contentStyle={{ minWidth: '100%' }}
+            orientation='horizontal'
+          >
+            {children}
+          </ScrollArea>
+        </ErrorBoundary>
+      </div>
+    </Suspense>
+  );
+}
+
+function OverviewFallback({ navElements }: OverviewWrapperProps) {
+  return (
+    <div className={style.overview}>
+      <div className={style.nav}>{navElements}</div>
+      <ScrollArea
+        className={style.infoScroll}
+        contentClassName={style.info}
+        contentStyle={{ minWidth: '100%' }}
+        orientation='horizontal'
+      >
+        {/* TODO: this could be alined in a nicer way */}
+        <Loader />
+      </ScrollArea>
     </div>
   );
 }

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

@@ -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 = useEntry(null, 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 = useEntry(null, id) as OntimeEvent | null;
 
   const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
 

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

@@ -6,7 +6,7 @@ import style from './TitleOverview.module.scss';
 export default function TitleOverview() {
   'use memo';
   const { data: projectData } = useProjectData();
-  const { data: rundownData } = useRundownAuxData();
+  const { data: rundownData } = useRundownAuxData(null);
 
   if (!projectData.title && !rundownData.title) {
     return null;

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

@@ -339,7 +339,9 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
             increaseViewportBy={{ top: 200, bottom: 400 }}
             style={{ height: '100%' }}
             components={{
-              Header: isEditMode ? () => <QuickAddButtons previousEventId={null} parentGroup={null} /> : undefined,
+              Header: isEditMode
+                ? () => <QuickAddButtons previousEventId={null} nextEventId={order[0]} parentGroup={null} />
+                : undefined,
               Footer: () => (
                 <>
                   {isEditMode && (

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

@@ -6,8 +6,7 @@ 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 { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -39,28 +38,29 @@ 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])}
-            data-target='small-device'
-            data-testid='panel-rundown'
-          >
-            <FinderPlacement />
-            <ViewNavigationMenu suppressSettings />
-            <div className={style.rundown}>
-              <ErrorBoundary>
-                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
-                <RundownContextMenu />
-              </ErrorBoundary>
+      <RundownSelectionContextProvider>
+        <EntryActionsProvider>
+          <ProtectRoute permission='editor'>
+            <div
+              className={cx([style.rundownExport, style.extracted])}
+              data-target='small-device'
+              data-testid='panel-rundown'
+            >
+              <FinderPlacement />
+              <ViewNavigationMenu suppressSettings />
+              <div className={style.rundown}>
+                <ErrorBoundary>
+                  <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
+                  <RundownContextMenu />
+                </ErrorBoundary>
+              </div>
             </div>
-          </div>
-        </ProtectRoute>
-      </EntryActionsProvider>
+          </ProtectRoute>
+        </EntryActionsProvider>
+      </RundownSelectionContextProvider>
     );
   }
 
@@ -70,30 +70,32 @@ 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 />
-          {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
-          <div className={style.rundown}>
-            <Editor.Panel className={style.list}>
-              <ErrorBoundary>
-                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
-                <RundownContextMenu />
-              </ErrorBoundary>
-            </Editor.Panel>
-            {!hideSideBar && (
-              <div className={style.side}>
+    <RundownSelectionContextProvider>
+      <EntryActionsProvider>
+        <ProtectRoute permission='editor'>
+          <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+            <FinderPlacement />
+            {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
+            <div className={style.rundown}>
+              <Editor.Panel className={style.list}>
                 <ErrorBoundary>
-                  <RundownEntryEditor />
+                  {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
+                  <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+                  <RundownContextMenu />
                 </ErrorBoundary>
-              </div>
-            )}
+              </Editor.Panel>
+              {!hideSideBar && (
+                <div className={style.side}>
+                  <ErrorBoundary>
+                    <RundownEntryEditor />
+                  </ErrorBoundary>
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      </ProtectRoute>
-    </EntryActionsProvider>
+        </ProtectRoute>
+      </EntryActionsProvider>
+    </RundownSelectionContextProvider>
   );
 }
 
@@ -105,17 +107,16 @@ interface RundownRootProps {
 }
 
 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
-  const source = useLoadedRundownSource();
-
   return (
     <div className={style.rundownRoot}>
       {isSmallDevice ? (
         <RundownHeaderMobile viewMode={viewMode} setViewMode={setViewMode} />
       ) : (
+        // TODO: add data-background-rundown={!isLoadedRundown} styling
         <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,16 +1,23 @@
+import { Playback } from 'ontime-types';
 import { memo } from 'react';
 
 import Empty from '../../common/components/state/Empty';
-import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import { useContextRundownList } from '../../common/hooks-query/useContextRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import Rundown from './Rundown';
 
+const backgroundFeatureData = {
+  playback: Playback.Stop,
+  selectedEventId: null,
+  nextEventId: null,
+};
+
 export default memo(RundownList);
 function RundownList() {
-  const { data, status, rundownMetadata } = useRundownWithMetadata();
+  const { rundown, status, rundownMetadata, isLoadedRundown } = useContextRundownList();
   const featureData = useRundownEditor();
 
-  const isLoading = status !== 'success' || !data || !rundownMetadata;
+  const isLoading = status !== 'success' || !rundown || !rundownMetadata;
 
   if (isLoading) {
     return <Empty text='Connecting to server' />;
@@ -18,12 +25,12 @@ function RundownList() {
 
   return (
     <Rundown
-      order={data.order}
-      flatOrder={data.flatOrder}
-      entries={data.entries}
-      id={data.id}
+      order={rundown.order}
+      flatOrder={rundown.flatOrder}
+      entries={rundown.entries}
+      id={rundown.id}
       rundownMetadata={rundownMetadata}
-      featureData={featureData}
+      featureData={isLoadedRundown ? featureData : backgroundFeatureData}
     />
   );
 }

apps/client/src/features/rundown/common/RundownSelect.module.scss

@@ -0,0 +1,3 @@
+.rundownSelect {
+  min-width: min(20rem, calc(100vw - 6rem));
+}

apps/client/src/features/rundown/common/RundownSelect.tsx

@@ -0,0 +1,42 @@
+import Select from '../../../common/components/select/Select';
+import { useRundownSelectionContext } from '../../../common/context/RundownSelectionContext';
+import { AppMode } from '../../../ontimeConfig';
+
+import styles from './RundownSelect.module.scss';
+
+const FOLLOW = '___null___';
+
+interface RundownSelectProps {
+  appMode: AppMode;
+}
+
+export function RundownSelect({ appMode }: RundownSelectProps) {
+  'use memo';
+  const { selectRundownId, rundowns, loadedRundownId, selectedRundownId } = useRundownSelectionContext();
+
+  const options = rundowns.map(({ id, title }) => ({
+    value: id,
+    label: loadedRundownId === id ? `${title} (loaded)` : title,
+  }));
+
+  // add a follow option
+  options.unshift({
+    value: FOLLOW,
+    label: 'Follow loaded',
+  });
+
+  return (
+    <div className={styles.rundownSelect}>
+      <Select
+        value={selectedRundownId ?? FOLLOW}
+        options={options}
+        onValueChange={(value) => {
+          if (value === FOLLOW) selectRundownId(null);
+          else selectRundownId(value);
+        }}
+        disabled={appMode === AppMode.Run}
+        fluid
+      />
+    </div>
+  );
+}

apps/client/src/features/rundown/entry-editor/RundownEntryEditor.tsx

@@ -1,7 +1,7 @@
 import { OntimeEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { useMemo } from 'react';
 
-import useRundown from '../../../common/hooks-query/useRundown';
+import { useRundown } from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../useEventSelection';
 import EventEditorFooter from './composite/EventEditorFooter';
 import EventEditor from './EventEditor';
@@ -13,7 +13,7 @@ import style from './EntryEditor.module.scss';
 
 export default function RundownEntryEditor() {
   const selectedEvents = useEventSelection((state) => state.selectedEvents);
-  const { data } = useRundown();
+  const { data } = useRundown(null);
 
   const entry = useMemo<OntimeEntry | null>(() => {
     if (data.order.length === 0) {

apps/client/src/features/rundown/entry-editor/quick-add-buttons/QuickAddButtons.tsx

@@ -11,13 +11,17 @@ import style from './QuickAddButtons.module.scss';
 
 interface QuickAddButtonsProps {
   previousEventId: MaybeString;
+  nextEventId?: MaybeString;
   parentGroup: MaybeString;
   backgroundColor?: string;
 }
 
 export default memo(QuickAddButtons);
-function QuickAddButtons({ previousEventId, parentGroup, backgroundColor }: QuickAddButtonsProps) {
+function QuickAddButtons({ previousEventId, nextEventId, parentGroup, backgroundColor }: QuickAddButtonsProps) {
   const { addEntry } = useEntryActionsContext();
+  const appendOptions = previousEventId ? { after: previousEventId, lastEventId: previousEventId } : undefined;
+  const prependOptions = nextEventId ? { before: nextEventId } : undefined;
+  const insertionOptions = appendOptions ?? prependOptions;
 
   const addEvent = () => {
     addEntry(
@@ -25,44 +29,23 @@ function QuickAddButtons({ previousEventId, parentGroup, backgroundColor }: Quic
         type: SupportedEntry.Event,
         parent: parentGroup,
       },
-      {
-        after: previousEventId,
-        lastEventId: previousEventId,
-      },
+      insertionOptions,
     );
   };
 
   const addDelay = () => {
-    addEntry(
-      { type: SupportedEntry.Delay, parent: parentGroup },
-      {
-        lastEventId: previousEventId,
-        after: previousEventId,
-      },
-    );
+    addEntry({ type: SupportedEntry.Delay, parent: parentGroup }, insertionOptions);
   };
 
   const addMilestone = () => {
-    addEntry(
-      { type: SupportedEntry.Milestone, parent: parentGroup },
-      {
-        lastEventId: previousEventId,
-        after: previousEventId,
-      },
-    );
+    addEntry({ type: SupportedEntry.Milestone, parent: parentGroup }, insertionOptions);
   };
 
   const addGroup = () => {
     if (parentGroup !== null) {
       return;
     }
-    addEntry(
-      { type: SupportedEntry.Group },
-      {
-        lastEventId: previousEventId,
-        after: previousEventId,
-      },
-    );
+    addEntry({ type: SupportedEntry.Group }, insertionOptions);
   };
 
   /**

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

@@ -96,7 +96,7 @@ export function useRundownCommands({
       addEntry(patch, {
         after: id && !above ? id : undefined,
         before: id && above ? id : undefined,
-        lastEventId: !above && id ? id : undefined,
+        lastEventId: id && !above ? id : undefined,
       });
     },
     [addEntry],

apps/client/src/features/rundown/renumber-cues-dialog/RenumberCuesDialog.tsx

@@ -7,7 +7,7 @@ import Button from '../../../common/components/buttons/Button';
 import Dialog from '../../../common/components/dialog/Dialog';
 import Input from '../../../common/components/input/input/Input';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import useRundown from '../../../common/hooks-query/useRundown';
+import { useContextRundownCueRenumberModal } from '../../../common/hooks-query/useContextRundown';
 import { orderEntries } from '../rundown.utils';
 import { useEventSelection } from '../useEventSelection';
 
@@ -17,8 +17,7 @@ type RenumberCueData = Pick<RenumberCues, 'increment' | 'prefix' | 'start'>;
 
 export default function RenumberCuesDialog() {
   'use memo';
-  const { data } = useRundown();
-  const { flatOrder } = data;
+  const { flatOrder } = useContextRundownCueRenumberModal();
   const { onClose, isOpen } = useRenumberCuesDialogStore();
   const { renumberCues } = useEntryActionsContext();
   const selectedEvents = useEventSelection((state) => state.selectedEvents);

apps/client/src/features/rundown/rundown-header/RundownHeader.tsx

@@ -8,6 +8,7 @@ import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { setOffsetMode, useOffsetMode } from '../../../common/hooks/useSocket';
 import { AppMode } from '../../../ontimeConfig';
 import { EditorLayoutMode, useEditorLayout } from '../../../views/editor/useEditorLayout';
+import { RundownSelect } from '../common/RundownSelect';
 import { RundownViewMode } from '../rundown.options';
 import { useEditorFollowMode } from '../useEditorFollowMode';
 import RundownMenu from './RundownMenu';
@@ -24,6 +25,7 @@ interface HeaderControlsConfig {
   showRunEditToggle: boolean;
   showOffsetToggle: boolean;
   showOverflowMenu: boolean;
+  showRundownSelect: boolean;
 }
 
 export const HEADER_CONTROLS_CONFIG: Record<EditorLayoutMode, HeaderControlsConfig> = {
@@ -31,16 +33,19 @@ export const HEADER_CONTROLS_CONFIG: Record<EditorLayoutMode, HeaderControlsConf
     showRunEditToggle: true,
     showOffsetToggle: true,
     showOverflowMenu: true,
+    showRundownSelect: false,
   },
   [EditorLayoutMode.PLANNING]: {
     showRunEditToggle: false,
     showOffsetToggle: false,
     showOverflowMenu: true,
+    showRundownSelect: true,
   },
   [EditorLayoutMode.TRACKING]: {
     showRunEditToggle: false,
     showOffsetToggle: true,
     showOverflowMenu: false,
+    showRundownSelect: false,
   },
 } as const;
 
@@ -50,7 +55,8 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
   const offsetMode = useOffsetMode();
   const { layoutMode } = useEditorLayout();
 
-  const { showRunEditToggle, showOffsetToggle, showOverflowMenu } = HEADER_CONTROLS_CONFIG[layoutMode];
+  const { showRunEditToggle, showOffsetToggle, showOverflowMenu, showRundownSelect } =
+    HEADER_CONTROLS_CONFIG[layoutMode];
 
   const toggleAppMode = (mode: AppMode[]) => {
     // we need to stop user from deselecting a mode
@@ -122,6 +128,8 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
         </ToggleGroup>
       )}
 
+      {showRundownSelect && <RundownSelect appMode={editorMode} />}
+
       {showOverflowMenu && <RundownMenu allowNavigation={!isExtracted} />}
     </Toolbar.Root>
   );

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

@@ -1,10 +1,7 @@
 import { memo, useEffect, useMemo } from 'react';
 
 import EmptyPage from '../../../common/components/state/EmptyPage';
-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';
@@ -16,8 +13,6 @@ function RundownTable() {
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
   const { editorMode } = useEditorFollowMode();
-  const source = useLoadedRundownSource();
-  const actions = useEntryActions();
 
   // Editor always has full permissions
   useEffect(() => {
@@ -35,14 +30,12 @@ function RundownTable() {
   const isLoading = !customFields || customFieldStatus === 'pending';
 
   return (
-    <EntryActionsProvider actions={actions}>
-      <CuesheetDnd columns={columns} tableRoot='editor'>
-        {isLoading ? (
-          <EmptyPage text='Loading...' />
-        ) : (
-          <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
-        )}
-      </CuesheetDnd>
-    </EntryActionsProvider>
+    <CuesheetDnd columns={columns} tableRoot='editor'>
+      {isLoading ? (
+        <EmptyPage text='Loading...' />
+      ) : (
+        <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
+      )}
+    </CuesheetDnd>
   );
 }

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

@@ -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 } = useFlatRundown(null);
   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

@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
     [filter],
   );
 
-  const { data: events } = usePartialRundown(filterCallback);
+  const { data: events } = usePartialRundown(null, filterCallback);
 
   const [firstIndex, setFirstIndex] = useState(-1);
   const [numPages, setNumPages] = useState(0);

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

@@ -153,7 +153,7 @@ type ScheduleTimeProps = {
 //TODO: consider relative mode
 export function ScheduleTime(props: ScheduleTimeProps) {
   const { event, showExpected } = props;
-  const { timeStart, duration, delay, expectedStart, countToEnd } = event;
+  const { timeStart, duration, delay, expectedStart, expectedEnd } = event;
 
   const plannedStart = timeStart + delay + event.dayOffset * dayInMs;
 
@@ -164,7 +164,6 @@ export function ScheduleTime(props: ScheduleTimeProps) {
 
   const expectedStateClass = `sub__schedule--${getOffsetState(expectedStart - plannedStart)}`;
   const plannedEnd = plannedStart + duration + delay;
-  const expectedEnd = countToEnd ? Math.max(expectedStart + duration, plannedEnd) : expectedStart + duration;
   const expectedEndClass = `sub__schedule--${getOffsetState(expectedEnd - plannedEnd)}`;
 
   return (

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

@@ -1,17 +1,15 @@
-import { MaybeNumber, OntimeEvent } from 'ontime-types';
-import { getExpectedStart } from 'ontime-utils';
+import { getExpectedEnd, getExpectedStart } from 'ontime-utils';
 import { IoPencil } from 'react-icons/io5';
 
 import Button from '../../common/components/buttons/Button';
 import useReport from '../../common/hooks-query/useReport';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useExpectedStartData } from '../../common/hooks/useSocket';
-import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../common/viewUtils';
 import { useCountdownOptions } from './countdown.options';
-import { CountdownTarget, useSubscriptionDisplayData } from './countdown.utils';
+import { CountdownEvent, CountdownTarget, useSubscriptionDisplayData } from './countdown.utils';
 import { ScheduleTime } from './CountdownSubscriptions';
 
 import './SingleEventCountdown.scss';
@@ -38,8 +36,10 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
     mode,
   });
 
+  const expectedEnd = getExpectedEnd(subscribedEvent, expectedStart, currentDay);
+
   const { endedAt } = reportData[subscribedEvent.reportId ?? subscribedEvent.id] ?? { endedAt: null };
-  const countdownEvent = { ...subscribedEvent, expectedStart, endedAt };
+  const countdownEvent = { ...subscribedEvent, expectedStart, endedAt, expectedEnd };
   const titleTmp = getPropertyValue(subscribedEvent, mainSource ?? 'title');
   const title = titleTmp?.length ? titleTmp : ' '; // insert utf-8 empty space to avoid the line collapsing;
   // while a group is live, surface the running event's title as the secondary line
@@ -64,7 +64,7 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
 }
 
 interface SubscriptionStatusProps {
-  event: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number };
+  event: CountdownEvent;
 }
 
 function SubscriptionStatus({ event }: SubscriptionStatusProps) {

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

@@ -12,7 +12,7 @@ import {
   isOntimeGroup,
   isPlayableEvent,
 } from 'ontime-types';
-import { MILLIS_PER_MINUTE, getExpectedStart, millisToString, removeLeadingZero } from 'ontime-utils';
+import { MILLIS_PER_MINUTE, getExpectedEnd, getExpectedStart, millisToString, removeLeadingZero } from 'ontime-utils';
 
 import { useCountdownSocket } from '../../common/hooks/useSocket';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -197,7 +197,7 @@ export type CountdownTarget = ExtendedEntry<OntimeEvent> & {
   liveEntry?: ExtendedEntry<OntimeEvent> | null; // the running child while a group is live
 };
 
-export type CountdownEvent = CountdownTarget & { expectedStart: number; endedAt: MaybeNumber };
+export type CountdownEvent = CountdownTarget & { expectedStart: number; endedAt: MaybeNumber; expectedEnd: number };
 
 /**
  * Resolves a subscription (event or group) into an event-shaped countdown target.
@@ -271,6 +271,7 @@ export function extendEventData(
     offset,
     mode,
   });
+  const expectedEnd = getExpectedEnd(event, expectedStart, currentDay);
   const { endedAt } = reportData[event.reportId ?? event.id] ?? { endedAt: null };
-  return { ...event, expectedStart, endedAt };
+  return { ...event, expectedStart, endedAt, expectedEnd };
 }

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

@@ -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 } = useFlatRundownWithMetadata(null);
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/cuesheet/CuesheetPage.module.scss

@@ -14,7 +14,3 @@
     'table';
   color: $ui-white;
 }
-
-.rundownSelect {
-  min-width: min(20rem, calc(100vw - 6rem));
-}

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

@@ -4,51 +4,46 @@ 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 { useScopedRundown } from '../../common/hooks-query/useScopedRundown';
-import { useScopedEntryActions } from '../../common/hooks/useEntryAction';
+import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
 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 source = useScopedRundown(selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? loadedRundownId : selectedRundownId);
-
-  const actions = useScopedEntryActions(source.rundownId);
 
   useWindowTitle('Cuesheet');
 
   const isLocked = getIsNavigationLocked();
 
   return (
-    <EntryActionsProvider actions={actions}>
-      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-      <EntryEditModal rundown={source.rundown} />
-      <div className={styles.tableWrapper} data-testid='cuesheet'>
-        <CuesheetOverview>
-          {!isLocked && (
-            <IconButton aria-label='Toggle navigation' variant='subtle-white' size='xlarge' onClick={menuHandler.open}>
-              <IoApps />
-            </IconButton>
-          )}
-        </CuesheetOverview>
-        <CuesheetProgress />
-        <CuesheetTableWrapper
-          source={source}
-          selectedRundownId={selectedRundownId}
-          loadedRundownId={loadedRundownId}
-          setSelectedRundownId={setSelectedRundownId}
-          projectRundowns={projectRundowns}
-        />
-      </div>
-    </EntryActionsProvider>
+    <RundownSelectionContextProvider>
+      <EntryActionsProvider>
+        <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
+        <EntryEditModal />
+        <div className={styles.tableWrapper} data-testid='cuesheet'>
+          <CuesheetOverview>
+            {!isLocked && (
+              <IconButton
+                aria-label='Toggle navigation'
+                variant='subtle-white'
+                size='xlarge'
+                onClick={menuHandler.open}
+              >
+                <IoApps />
+              </IconButton>
+            )}
+          </CuesheetOverview>
+          <CuesheetProgress />
+          <CuesheetTableWrapper />
+        </div>
+      </EntryActionsProvider>
+    </RundownSelectionContextProvider>
   );
 }

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

@@ -1,39 +1,20 @@
-import { MaybeString, ProjectRundown } from 'ontime-types';
 import { memo, use, useMemo } from 'react';
 
-import Select from '../../common/components/select/Select';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import { PresetContext } from '../../common/context/PresetContext';
+import { useRundownSelectionContext } from '../../common/context/RundownSelectionContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
-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;
-  projectRundowns: ProjectRundown[];
-}
 
 export default memo(CuesheetTableWrapper);
-function CuesheetTableWrapper({
-  source,
-  selectedRundownId,
-  setSelectedRundownId,
-  loadedRundownId,
-  projectRundowns,
-}: CuesheetTableWrapperProps) {
+function CuesheetTableWrapper() {
   const preset = use(PresetContext);
-  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
+  const { isLoadedRundown } = useRundownSelectionContext();
+
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoadedRundown });
   const { data: customFields, status: customFieldStatus } = useCustomFields();
 
   const columns = useMemo(
@@ -50,66 +31,11 @@ function CuesheetTableWrapper({
       ) : (
         <CuesheetTable
           columns={columns}
-          source={source}
           cuesheetMode={cuesheetMode}
           tableRoot='cuesheet'
           setCuesheetMode={setCuesheetMode}
-          isCurrentRundown={isCurrentRundown}
-          insertElement={
-            <>
-              <RundownSelect
-                cuesheetMode={cuesheetMode}
-                selectedRundownId={selectedRundownId}
-                loadedRundownId={loadedRundownId}
-                setSelectedRundownId={setSelectedRundownId}
-                projectRundowns={projectRundowns}
-              />
-            </>
-          }
         />
       )}
     </CuesheetDnd>
   );
 }
-
-interface RundownSelectProps {
-  cuesheetMode: AppMode;
-  selectedRundownId: MaybeString;
-  loadedRundownId: string;
-  setSelectedRundownId: (rundownId: string) => void;
-  projectRundowns: ProjectRundown[];
-}
-
-function RundownSelect({
-  cuesheetMode,
-  projectRundowns,
-  loadedRundownId,
-  selectedRundownId,
-  setSelectedRundownId,
-}: RundownSelectProps) {
-  'use memo';
-  const options = projectRundowns.map(({ id, title }) => ({
-    value: id,
-    label: loadedRundownId === id ? `${title} (loaded)` : title,
-  }));
-  options.unshift({
-    value: FOLLOW_LOADED_RUNDOWN_ID,
-    label: 'Follow loaded', // TODO: Better wording and maybe icon? and translation
-  });
-
-  return (
-    <div className={styles.rundownSelect}>
-      <Select
-        value={selectedRundownId ?? undefined}
-        options={options}
-        onValueChange={(value) => {
-          if (value) {
-            setSelectedRundownId(value);
-          }
-        }}
-        disabled={cuesheetMode === AppMode.Run}
-        fluid
-      />
-    </div>
-  );
-}

apps/client/src/views/cuesheet/__tests__/useCuesheetRundownSelection.test.ts

@@ -1,21 +0,0 @@
-import {
-  FOLLOW_LOADED_RUNDOWN_ID,
-  getCuesheetRundownStorageKey,
-  resolveSelectedRundownId,
-} from '../useCuesheetRundownSelection';
-
-describe('useCuesheetRundownSelection helpers', () => {
-  it('builds a project-scoped storage key', () => {
-    expect(getCuesheetRundownStorageKey('http://localhost:4001', 'My Project')).toBe(
-      'cuesheet-selected-rundown:http://localhost:4001:My Project',
-    );
-  });
-
-  it('falls back to the follow loaded rundown when the stored selection is missing', () => {
-    expect(resolveSelectedRundownId('missing', new Set(['loaded', 'other']))).toBe(FOLLOW_LOADED_RUNDOWN_ID);
-  });
-
-  it('keeps the stored selection when it still exists in the current project', () => {
-    expect(resolveSelectedRundownId('other', new Set(['loaded', 'other']))).toBe('other');
-  });
-});

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 { useContextRundownEditModal } from '../../../common/hooks-query/useContextRundown';
 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 { rundown } = useContextRundownEditModal();
   const entryId = useEditModal((state) => state.selectedEntryId);
   const closeModal = useEditModal((state) => state.clearSelection);
 

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

@@ -1,7 +1,7 @@
 import { useTableNav } from '@table-nav/react';
 import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ComponentProps, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   ContextProp,
   ItemProps,
@@ -14,7 +14,7 @@ import {
 import EmptyPage from '../../../common/components/state/EmptyPage';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
+import { useContextRundownTable } from '../../../common/hooks-query/useContextRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -35,34 +35,22 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
   columns: ColumnDef<ExtendedEntry>[];
   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;
 
-export default function CuesheetTable({
-  columns,
-  cuesheetMode,
-  source,
-  tableRoot,
-  setCuesheetMode,
-  isCurrentRundown,
-  insertElement,
-}: CuesheetTableProps) {
-  const { flatRundown, status, selectedEventId } = source;
+export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCuesheetMode }: CuesheetTableProps) {
+  const { flatRundown, status, loadedEventId } = useContextRundownTable();
   const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
   const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;
 
@@ -143,17 +131,17 @@ export default function CuesheetTable({
 
   // in Run mode, follow the current event
   useEffect(() => {
-    if (virtuosoRef.current === null || cuesheetMode !== AppMode.Run || !selectedEventId) {
+    if (virtuosoRef.current === null || cuesheetMode !== AppMode.Run || !loadedEventId) {
       return;
     }
 
-    const eventIndex = flatRundown.findIndex((event) => event.id === selectedEventId);
+    const eventIndex = flatRundown.findIndex((event) => event.id === loadedEventId);
     if (eventIndex === -1) {
       return;
     }
 
     virtuosoRef.current.scrollToIndex({ index: eventIndex, behavior: 'auto', align: 'start', offset: -50 });
-  }, [cuesheetMode, flatRundown, selectedEventId]);
+  }, [cuesheetMode, flatRundown, loadedEventId]);
 
   // Provide an imperative scroll handler for explicit jumps (finder/keyboard)
   useEffect(() => {
@@ -242,17 +230,9 @@ export default function CuesheetTable({
         handleResetResizing={resetColumnResizing}
         handleResetReordering={resetColumnOrder}
         handleClearToggles={setAllVisible}
-        insertElement={insertElement}
-        modeControls={
-          tableRoot === 'cuesheet'
-            ? {
-                cuesheetMode,
-                setCuesheetMode,
-                isCurrentRundown,
-              }
-            : undefined
-        }
-        showShare={tableRoot === 'cuesheet'}
+        appMode={cuesheetMode}
+        tableRoot={tableRoot}
+        setCuesheetMode={setCuesheetMode}
       />
       <TableVirtuoso
         ref={virtuosoRef}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableHeaderToolbar.tsx

@@ -10,7 +10,9 @@ import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
+import { useRundownSelectionContext } from '../../../../common/context/RundownSelectionContext';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
+import { RundownSelect } from '../../../../features/rundown/common/RundownSelect';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetPermissions } from '../../useTablePermissions';
 import CuesheetShareModal from './CuesheetShareModal';
@@ -30,21 +32,15 @@ type TableHeaderOptionValues = Pick<
   'hideTableSeconds' | 'hideIndexColumn' | 'showDelayedTimes' | 'hideDelays'
 >;
 
-type TableModeControls = {
-  cuesheetMode: AppMode;
-  setCuesheetMode: (mode: AppMode) => void;
-  isCurrentRundown?: boolean;
-};
-
 interface CuesheetTableHeaderToolbarProps {
   columns: Column<ExtendedEntry, unknown>[];
   optionsStore: TableHeaderOptionsStore;
   handleResetResizing: () => void;
   handleResetReordering: () => void;
   handleClearToggles: () => void;
-  insertElement?: ReactNode;
-  modeControls?: TableModeControls;
-  showShare?: boolean;
+  setCuesheetMode?: (mode: AppMode) => void;
+  appMode: AppMode;
+  tableRoot: 'editor' | 'cuesheet';
 }
 
 export default function CuesheetTableHeaderToolbar({
@@ -53,23 +49,23 @@ export default function CuesheetTableHeaderToolbar({
   handleResetResizing,
   handleResetReordering,
   handleClearToggles,
-  insertElement,
-  modeControls,
-  showShare = false,
+  setCuesheetMode,
+  tableRoot,
+  appMode,
 }: CuesheetTableHeaderToolbarProps) {
-  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode);
-  const canShare = useCuesheetPermissions((state) => state.canShare);
+  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode) && tableRoot === 'cuesheet';
+  const canShare = useCuesheetPermissions((state) => state.canShare) && tableRoot === 'cuesheet';
+  const showRundownSelect = tableRoot === 'cuesheet';
+  const { isLoadedRundown } = useRundownSelectionContext();
 
   const toggleCuesheetMode = (mode: AppMode[]) => {
     const newValue = mode.at(0);
-    if (!newValue || !modeControls) return;
-    modeControls.setCuesheetMode(newValue);
+    if (!newValue || !setCuesheetMode) return;
+    setCuesheetMode(newValue);
   };
 
-  const isBackground = !(modeControls?.isCurrentRundown ?? true);
-
   return (
-    <Toolbar.Root className={style.tableSettings} data-background-rundown={isBackground}>
+    <Toolbar.Root className={style.tableSettings} data-background-rundown={!isLoadedRundown}>
       <ViewSettings optionsStore={optionsStore} />
       <ColumnSettings
         columns={columns}
@@ -77,14 +73,14 @@ export default function CuesheetTableHeaderToolbar({
         handleResetReordering={handleResetReordering}
         handleClearToggles={handleClearToggles}
       />
-      {modeControls && canChangeMode && (
-        <div className={style.apart}>
-          {insertElement}
+      <div className={style.apart}>
+        {showRundownSelect && <RundownSelect appMode={appMode} />}
+        {canChangeMode && (
           <ToggleGroup
-            value={[modeControls.cuesheetMode]}
+            value={[appMode]}
             onValueChange={toggleCuesheetMode}
             className={style.group}
-            disabled={!modeControls.isCurrentRundown}
+            disabled={!isLoadedRundown}
           >
             <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
               Run
@@ -93,10 +89,10 @@ export default function CuesheetTableHeaderToolbar({
               Edit
             </Toolbar.Button>
           </ToggleGroup>
-        </div>
-      )}
+        )}
+      </div>
 
-      {showShare && canShare && (
+      {canShare && (
         <>
           <Editor.Separator orientation='vertical' />
           <CuesheetShareModal />

apps/client/src/views/cuesheet/useCuesheetRundownSelection.ts

@@ -1,65 +0,0 @@
-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';
-
-export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;
-
-export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
-  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
-}
-
-export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
-  if (storedSelectedRundownId && availableRundownIds.has(storedSelectedRundownId)) return storedSelectedRundownId;
-  return FOLLOW_LOADED_RUNDOWN_ID;
-}
-
-export function useCuesheetRundownSelection() {
-  'use memo';
-
-  const { data: projectRundowns } = useProjectRundowns();
-  const {
-    data: { lastLoadedProject },
-  } = useOrderedProjectList();
-  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
-  const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
-    key: storageKey,
-    defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
-  });
-
-  const availableRundownIds = new Set(projectRundowns.rundowns.map(({ id }) => id)).add(FOLLOW_LOADED_RUNDOWN_ID);
-  const { loaded: loadedRundownId } = projectRundowns;
-
-  const selectedRundownId = resolveSelectedRundownId(storedSelectedRundownId, availableRundownIds);
-
-  return {
-    loadedRundownId,
-    selectedRundownId,
-    projectRundowns: projectRundowns.rundowns,
-    setSelectedRundownId: (rundownId: string) => {
-      startTransition(() => {
-        setStoredSelectedRundownId(rundownId);
-      });
-    },
-  };
-}
-
-export function useDirectLinkToBackgroundEdit() {
-  const {
-    data: { lastLoadedProject },
-  } = useOrderedProjectList();
-  const navigate = useNavigate();
-  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
-  const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });
-
-  return useCallback(
-    async (rundownId: string) => {
-      await navigate('/cuesheet');
-      startTransition(() => setStoredSelectedRundownId(rundownId));
-    },
-    [setStoredSelectedRundownId, navigate],
-  );
-}

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

@@ -1,5 +1,6 @@
 import { lazy } from 'react';
 
+import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -14,44 +15,51 @@ const MessageControl = lazy(() => import('../../features/control/message/Message
 export default function Editor() {
   const { layoutMode } = useEditorLayout();
 
-  if (layoutMode === EditorLayoutMode.CONTROL) {
-    return (
-      <div id='panels' className={styles.panelContainer}>
-        <div className={styles.left}>
-          <TimerControl />
-          <MessageControl />
-        </div>
-        <Rundown />
-      </div>
-    );
-  }
-
-  if (layoutMode === EditorLayoutMode.TRACKING) {
-    return (
-      <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
-        <div className={styles.rundownLayout}>
-          <div className={styles.titlesPanel}>
-            <TitleList mode={AppMode.Run} />
+  switch (layoutMode) {
+    case EditorLayoutMode.TRACKING: {
+      return (
+        <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
+          <div className={styles.rundownLayout}>
+            <div className={styles.titlesPanel}>
+              <RundownSelectionContextProvider>
+                <TitleList mode={AppMode.Run} />
+              </RundownSelectionContextProvider>
+            </div>
+            <div className={styles.rundownPanel}>
+              <Rundown />
+            </div>
           </div>
-          <div className={styles.rundownPanel}>
-            <Rundown />
+          <TrackingPlaybackBar />
+        </div>
+      );
+    }
+    case EditorLayoutMode.PLANNING: {
+      return (
+        <div id='panels' className={styles.panelContainer}>
+          <div className={styles.rundownLayout}>
+            <div className={styles.titlesPanel}>
+              <RundownSelectionContextProvider>
+                <TitleList mode={AppMode.Edit} />
+              </RundownSelectionContextProvider>
+            </div>
+            <div className={styles.rundownPanel}>
+              <Rundown />
+            </div>
           </div>
         </div>
-        <TrackingPlaybackBar />
-      </div>
-    );
-  }
-
-  return (
-    <div id='panels' className={styles.panelContainer}>
-      <div className={styles.rundownLayout}>
-        <div className={styles.titlesPanel}>
-          <TitleList mode={AppMode.Edit} />
-        </div>
-        <div className={styles.rundownPanel}>
+      );
+    }
+    case EditorLayoutMode.CONTROL:
+    default: {
+      return (
+        <div id='panels' className={styles.panelContainer}>
+          <div className={styles.left}>
+            <TimerControl />
+            <MessageControl />
+          </div>
           <Rundown />
         </div>
-      </div>
-    </div>
-  );
+      );
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-import { useFlatRundown } from '../../../common/hooks-query/useRundown';
+import { useContextRundownFinder } from '../../../common/hooks-query/useContextRundown';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';
 
 const maxResults = 12;
@@ -38,7 +38,7 @@ type FilterableMilestone = {
 type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
 
 export default function useFinder() {
-  const { data, rundownId } = useFlatRundown();
+  const { rundown: data, rundownId } = useContextRundownFinder();
   const [results, setResults] = useState<FilterableEntry[]>([]);
   const [error, setError] = useState<MaybeString>(null);
   const lastSearchString = useRef('');

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import ScrollArea from '../../../common/components/scroll-area/ScrollArea';
-import useRundown from '../../../common/hooks-query/useRundown';
+import { useContextRundownList } from '../../../common/hooks-query/useContextRundown';
 import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata } from '../../../common/utils/rundownMetadata';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -20,7 +20,7 @@ interface TitleListProps {
 }
 
 export default function TitleList({ mode }: TitleListProps) {
-  const { data: rundown } = useRundown();
+  const { rundown } = useContextRundownList();
   const selectedEventId = useSelectedEventId();
   const cursor = useEventSelection((state) => state.cursor);
 

apps/client/src/views/editor/useEditorLayout.ts

@@ -1,6 +1,9 @@
 import { isValueOfEnum } from 'ontime-utils';
+import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'react-router';
 
+import { setSelectRundownInParams } from '../../common/context/RundownSelectionContext';
+
 const layoutParam = 'layout';
 
 export enum EditorLayoutMode {
@@ -20,14 +23,29 @@ function getEditorLayout(value: string | null): EditorLayoutMode {
 }
 
 export function useEditorLayout() {
+  'use memo';
+
   const [searchParams, setSearchParams] = useSearchParams();
   const layoutMode = getEditorLayout(searchParams.get(layoutParam));
 
-  const setLayoutMode = (mode: EditorLayoutMode) => {
-    const nextParams = new URLSearchParams(searchParams);
-    nextParams.set(layoutParam, mode);
-    setSearchParams(nextParams, { replace: true });
-  };
+  useEffect(() => {
+    setSearchParams((searchParams) => {
+      if (layoutMode !== EditorLayoutMode.PLANNING) setSelectRundownInParams(null, searchParams);
+      return searchParams;
+    });
+  }, [setSearchParams, layoutMode]);
+
+  const setLayoutMode = useCallback(
+    (mode: EditorLayoutMode) => {
+      setSearchParams((searchParams) => {
+        searchParams.set(layoutParam, mode);
+        // Only the Planning layout is allowed to look at something other than the current rundown
+        if (mode !== EditorLayoutMode.PLANNING) setSelectRundownInParams(null, searchParams);
+        return searchParams;
+      });
+    },
+    [setSearchParams],
+  );
 
   return { layoutMode, setLayoutMode };
 }

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

@@ -1,8 +1,7 @@
 import { Playback, TimerPhase, ViewSettings } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
-import { useAuxTimersName, useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
-import { getAuxTimerLabel } from '../../common/utils/auxTimerUtils';
+import { useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
 import { getOffsetState } from '../../common/utils/offset';
 import { cx } from '../../common/utils/styleUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
@@ -122,23 +121,22 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
 
 function StudioTimersAux() {
   const auxTimer = useAuxTimersTime();
-  const auxName = useAuxTimersName();
 
   return (
     <div className='card' id='card-aux'>
       <div className='card__row'>
         <div>
-          <div className='label'>{getAuxTimerLabel(auxName.aux1, 'Aux 1')}</div>
+          <div className='label'>Aux 1</div>
           <div className='extra'>{millisToString(auxTimer.aux1)}</div>
         </div>
 
         <div>
-          <div className='label center'>{getAuxTimerLabel(auxName.aux2, 'Aux 2')}</div>
+          <div className='label center'>Aux 2</div>
           <div className='extra center'>{millisToString(auxTimer.aux2)}</div>
         </div>
 
         <div>
-          <div className='label right'>{getAuxTimerLabel(auxName.aux3, 'Aux 3')}</div>
+          <div className='label right'>Aux 3</div>
           <div className='extra right'>{millisToString(auxTimer.aux3)}</div>
         </div>
       </div>

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

@@ -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 } = useFlatRundownWithMetadata(null);
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

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

@@ -2,7 +2,7 @@ import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } fro
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import useRundown from '../../common/hooks-query/useRundown';
+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 } = useRundown(null);
   const { entries } = rundown;
 
   return {

apps/server/src/api-data/db/__tests__/db.parser.test.ts

@@ -90,14 +90,4 @@ describe('test parseDatabaseModel() edge cases', () => {
     // @ts-expect-error -- we know this is wrong, testing imports outside domain
     expect(() => parseDatabaseModel('some random dataset')).toThrow();
   });
-
-  it('creates the aux timer names when importing a project file which predates the feature', () => {
-    const oldProject = structuredClone(demoDb);
-    // @ts-expect-error -- simulating a project file saved before aux timer naming existed
-    delete oldProject.settings.auxTimerNames;
-
-    const { data } = parseDatabaseModel(oldProject);
-
-    expect(data.settings.auxTimerNames).toStrictEqual(['', '', '']);
-  });
 });

apps/server/src/api-data/db/migration/db.migration.v3.ts

@@ -74,15 +74,7 @@ export function migrateSettings(jsonData: object): (Settings & { serverPort: num
     const { serverPort, editorKey, operatorKey, timeFormat, language } = structuredClone(
       jsonData.settings,
     ) as old_Settings;
-    return {
-      version: '4.0.0',
-      serverPort,
-      editorKey,
-      operatorKey,
-      timeFormat,
-      language,
-      auxTimerNames: ['', '', ''],
-    };
+    return { version: '4.0.0', serverPort, editorKey, operatorKey, timeFormat, language };
   }
 }
 

apps/server/src/api-data/db/migration/db.migration.v4.ts

@@ -1,5 +1,4 @@
 import { DatabaseModel, Settings } from 'ontime-types';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { is } from '../../../utils/is.js';
 
@@ -24,7 +23,6 @@ export function migrateServerPort(jsonData: Partial<DatabaseModel>): {
   const operatorKey = settings?.operatorKey;
   const timeFormat = settings?.timeFormat;
   const language = settings?.language;
-  const auxTimerNames = sanitiseAuxTimerNames(settings?.auxTimerNames);
   const version = '4.5.0';
   db.settings = {
     version,
@@ -32,7 +30,6 @@ export function migrateServerPort(jsonData: Partial<DatabaseModel>): {
     operatorKey,
     timeFormat,
     language,
-    auxTimerNames,
     app: 'ontime',
   } as Settings;
   return { db, serverPort: settings?.serverPort };

apps/server/src/api-data/db/migration/migration.test.ts

@@ -184,7 +184,6 @@ describe('v3 to v4', () => {
       operatorKey: null,
       timeFormat: '24',
       language: 'en',
-      auxTimerNames: ['', '', ''],
     };
     const newSettings = v3.migrateSettings(oldDb);
     expect(newSettings).toEqual(expectSettings);

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

@@ -714,17 +714,17 @@ describe('processRundown()', () => {
 });
 
 describe('rundownMutation.add()', () => {
-  test('adds an event an empty rundown', () => {
+  test('adds an event to an empty rundown', () => {
     const mockEvent = makeOntimeEvent({ id: 'mock', cue: 'mock' });
     const rundown = makeRundown({});
 
-    rundownMutation.add(rundown, mockEvent, null, null);
+    rundownMutation.add(rundown, mockEvent, null, null, null);
 
     expect(rundown.order.length).toBe(1);
     expect(rundown.entries['mock']).toMatchObject(mockEvent);
   });
 
-  test('adds an event at the top if no afterId is given', () => {
+  test('adds an event at the end if no afterId is given', () => {
     const mockEvent = makeOntimeEvent({ id: 'mock', cue: 'mock' });
     const rundown = makeRundown({
       flatOrder: ['1'],
@@ -734,28 +734,28 @@ describe('rundownMutation.add()', () => {
       },
     });
 
-    rundownMutation.add(rundown, mockEvent, null, null);
+    rundownMutation.add(rundown, mockEvent, null, null, null);
 
-    expect(rundown.order).toStrictEqual(['mock', '1']);
-    expect(rundown.flatOrder).toStrictEqual(['mock', '1']);
+    expect(rundown.order).toStrictEqual(['1', 'mock']);
+    expect(rundown.flatOrder).toStrictEqual(['1', 'mock']);
     expect(rundown.entries['mock']).toMatchObject(mockEvent);
   });
 
-  test('adds an event at the top of the group if no after is given', () => {
+  test('adds an event at the end of the group if parent is provided but no after', () => {
     const mockEvent = makeOntimeEvent({ id: 'mock', cue: 'mock' });
     const rundown = makeRundown({
       flatOrder: ['1', '1a'],
       order: ['1'],
       entries: {
-        '1': makeOntimeGroup({ id: '1' }),
+        '1': makeOntimeGroup({ id: '1', entries: ['1a'] }),
         '1a': makeOntimeEvent({ id: '1a', parent: '1' }),
       },
     });
 
-    rundownMutation.add(rundown, mockEvent, null, rundown.entries['1'] as OntimeGroup);
+    rundownMutation.add(rundown, mockEvent, rundown.entries['1'] as OntimeGroup, null, null);
 
     expect(rundown.order).toStrictEqual(['1']);
-    expect(rundown.flatOrder).toStrictEqual(['1', 'mock', '1a']);
+    expect(rundown.flatOrder).toStrictEqual(['1', '1a', 'mock']);
     expect(rundown.entries['mock']).toMatchObject(mockEvent);
   });
 
@@ -765,12 +765,12 @@ describe('rundownMutation.add()', () => {
       flatOrder: ['1', '1a'],
       order: ['1'],
       entries: {
-        '1': makeOntimeGroup({ id: '1' }),
+        '1': makeOntimeGroup({ id: '1', entries: ['1a'] }),
         '1a': makeOntimeEvent({ id: '1a', parent: '1' }),
       },
     });
 
-    rundownMutation.add(rundown, mockEvent, '1a', rundown.entries['1'] as OntimeGroup);
+    rundownMutation.add(rundown, mockEvent, rundown.entries['1'] as OntimeGroup, '1a', null);
 
     expect(rundown.order).toStrictEqual(['1']);
     expect(rundown.flatOrder).toStrictEqual(['1', '1a', 'mock']);
@@ -1839,6 +1839,49 @@ describe('rundownMutation.clone()', () => {
       parent: null,
     });
   });
+
+  it('clones an event and appends it with after true', () => {
+    const testRundown = makeRundown({
+      order: ['1', '2'],
+      entries: {
+        '1': makeOntimeEvent({ id: '1', cue: 'event1', parent: null }),
+        '2': makeOntimeEvent({ id: '2', cue: 'event2', parent: null }),
+      },
+    });
+
+    const newEntry = rundownMutation.clone(testRundown, testRundown.entries['1'], { after: true });
+
+    expect(testRundown.order).toStrictEqual(['1', '2', newEntry.id]);
+  });
+
+  it('clones an event and prepends it with before true', () => {
+    const testRundown = makeRundown({
+      order: ['1', '2'],
+      entries: {
+        '1': makeOntimeEvent({ id: '1', cue: 'event1', parent: null }),
+        '2': makeOntimeEvent({ id: '2', cue: 'event2', parent: null }),
+      },
+    });
+
+    const newEntry = rundownMutation.clone(testRundown, testRundown.entries['2'], { before: true });
+
+    expect(testRundown.order).toStrictEqual([newEntry.id, '1', '2']);
+  });
+
+  it('clones a group and appends it with after true', () => {
+    const testRundown = makeRundown({
+      order: ['1', '2'],
+      entries: {
+        '1': makeOntimeGroup({ id: '1', title: 'top', entries: ['1a'] }),
+        '1a': makeOntimeEvent({ id: '1a', cue: 'nested', parent: '1' }),
+        '2': makeOntimeEvent({ id: '2', cue: 'event2', parent: null }),
+      },
+    });
+
+    const newEntry = rundownMutation.clone(testRundown, testRundown.entries['1'], { after: true });
+
+    expect(testRundown.order).toStrictEqual(['1', '2', newEntry.id]);
+  });
 });
 
 describe('rundownMutation.group()', () => {

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

@@ -0,0 +1,40 @@
+import type { OntimeGroup } from 'ontime-types';
+import { describe, expect, test } from 'vitest';
+
+import { makeOntimeEvent, makeOntimeGroup, makeRundown } from '../__mocks__/rundown.mocks.js';
+import { assertInsertAnchorExists, assertInsertAnchorInOrder } from '../rundown.validation.js';
+
+const rundown = makeRundown({
+  order: ['top', 'group'],
+  entries: {
+    top: makeOntimeEvent({ id: 'top', parent: null }),
+    group: makeOntimeGroup({ id: 'group', entries: ['nested'] }),
+    nested: makeOntimeEvent({ id: 'nested', parent: 'group' }),
+  },
+});
+
+describe('insertion anchor validation', () => {
+  test('rejects a missing anchor', () => {
+    expect(() => assertInsertAnchorInOrder(rundown, null, { before: 'missing' })).toThrow(
+      'Insertion anchor with ID missing does not exist',
+    );
+  });
+
+  test('rejects an anchor from a different order', () => {
+    expect(() => assertInsertAnchorInOrder(rundown, null, { after: 'nested' })).toThrow(
+      'Insertion anchor with ID nested is not in the target order',
+    );
+  });
+
+  test('accepts a group-local anchor', () => {
+    const group = rundown.entries.group as OntimeGroup;
+
+    expect(() => assertInsertAnchorInOrder(rundown, group, { before: 'nested' })).not.toThrow();
+  });
+
+  test('checks clone anchors exist', () => {
+    expect(() => assertInsertAnchorExists(rundown, { after: 'missing' })).toThrow(
+      'Insertion anchor with ID missing does not exist',
+    );
+  });
+});

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

@@ -439,21 +439,27 @@ function clone(rundown: Rundown, entry: OntimeEntry, options?: InsertOptions): O
       rundown.entries[nestedEntry.id] = nestedEntry;
     }
 
-    // by default we insert after the cloned element
-    let atIndex = rundown.order.indexOf(entry.id) + 1;
-
-    const referenceId = options?.after ?? options?.before;
-    if (referenceId) {
-      // trying to insert relatively to another entry
-      const referenceEntry = rundown.entries[referenceId];
-      if (referenceEntry) {
-        if (options?.after) {
-          atIndex = rundown.order.indexOf(referenceId) + 1;
-        } else if (options?.before) {
-          atIndex = rundown.order.indexOf(referenceId);
-        }
+    const position: { after: EntryId | null; before: EntryId | null } = (() => {
+      if (options?.after === undefined && options?.before === undefined) {
+        return { after: entry.id, before: null };
       }
-    }
+
+      const after = getInsertAfterId(rundown, null, options.after, options.before);
+      const before = options.before === true ? (after ?? null) : (options.before ?? null);
+      return { after, before };
+    })();
+
+    const atIndex = (() => {
+      if (position.before !== null) {
+        return rundown.order.indexOf(position.before);
+      }
+
+      if (position.after !== null) {
+        return rundown.order.indexOf(position.after) + 1;
+      }
+
+      return rundown.order.length;
+    })();
 
     // we only need to insert the group, the nested entries will be resolved by the rundown engine
     rundown.order = insertAtIndex(atIndex, newGroup.id, rundown.order);
@@ -461,41 +467,33 @@ function clone(rundown: Rundown, entry: OntimeEntry, options?: InsertOptions): O
     return newGroup;
   } else {
     const clonedEntry = cloneSimpleRundownEntry(entry, getUniqueId(rundown));
+    const parent = (() => {
+      const referenceId = (() => {
+        if (typeof options?.after === 'string') return options.after;
+        if (typeof options?.before === 'string') return options.before;
+        return undefined;
+      })();
 
-    let parent: OntimeGroup | null = null;
+      const referenceEntry = referenceId ? rundown.entries[referenceId] : entry;
+      const parentId = referenceEntry && !isOntimeGroup(referenceEntry) ? referenceEntry.parent : null;
+      if (parentId === null) return null;
 
-    // trying to insert relatively to another entry, check that entries parent
-    const referenceId = options?.after ?? options?.before;
+      const maybeParent = rundown.entries[parentId];
+      return isOntimeGroup(maybeParent) ? maybeParent : null;
+    })();
 
-    /**
-     * if we have a positioning reference, and that reference has a parent
-     * we need to maintain the same parent for the cloned entry
-     */
-    if (referenceId) {
-      const referenceEntry = rundown.entries[referenceId];
-
-      if (referenceEntry && !isOntimeGroup(referenceEntry)) {
-        if (referenceEntry.parent) {
-          const maybeParent = rundown.entries[referenceEntry.parent];
-          if (maybeParent && isOntimeGroup(maybeParent)) {
-            parent = maybeParent;
-          }
-        }
+    const position = (() => {
+      // if no position is given, we add immediately after the element
+      if (options?.after === undefined && options?.before === undefined) {
+        return { after: entry.id, before: null };
       }
-    } else if (entry.parent) {
-      const maybeParent = rundown.entries[entry.parent];
-      if (maybeParent && isOntimeGroup(maybeParent)) {
-        parent = maybeParent;
-      }
-    }
 
-    // if we have resolved a parent, we add it to the cloned entry
-    let after = getInsertAfterId(rundown, parent, options?.after, options?.before);
-    if (!after) {
-      after = entry.id;
-    }
+      const after = getInsertAfterId(rundown, parent, options.after, options.before);
+      const before = options?.before === true ? after : (options.before ?? null);
+      return { after, before };
+    })();
 
-    return addToRundown(rundown, clonedEntry, after, parent);
+    return addToRundown(rundown, clonedEntry, parent, position.after, position.before);
   }
 }
 

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

@@ -40,11 +40,15 @@ import { parseRundown } from './rundown.parser.js';
 import type { RundownMetadata } from './rundown.types.js';
 import {
   generateEvent,
+  getFirstInsertId,
   getIntegerAndFraction,
+  getLastInsertId,
+  getPreviousInsertId,
   hasChanges,
   mergeRundownPreservingFields,
   isLoadedPlayable,
 } from './rundown.utils.js';
+import { assertInsertAnchorExists, assertInsertAnchorInOrder, assertSingleInsertAnchor } from './rundown.validation.js';
 
 /**
  * creates a new entry with given data
@@ -52,6 +56,8 @@ import {
 export async function addEntry(rundownId: string, eventData: EventPostPayload): Promise<OntimeEntry> {
   const { rundown, commit } = createTransaction({ rundownId, mutableRundown: true });
 
+  assertSingleInsertAnchor(eventData);
+
   // we allow the user to provide an ID, but make sure it is unique
   if (eventData?.id && Object.hasOwn(rundown.entries, eventData.id)) {
     throw new Error(`Event with ID ${eventData.id} already exists`);
@@ -68,14 +74,29 @@ export async function addEntry(rundownId: string, eventData: EventPostPayload):
     parent = maybeParent;
   }
 
+  assertInsertAnchorInOrder(rundown, parent, eventData);
+
   // normalise the position of the event in the rundown order
-  const afterId = getInsertAfterId(rundown, parent, eventData?.after, eventData?.before);
+  const insertPosition = (() => {
+    if (eventData.before !== undefined) {
+      const beforeId = getFirstInsertId(rundown, parent, eventData.before);
+      return { afterId: null, beforeId, cueAfterId: getPreviousInsertId(rundown, parent, beforeId) };
+    }
+
+    // if after is an ID, we will try and find the entry
+    if (eventData.after !== undefined && eventData.after !== true) {
+      const afterId = getInsertAfterId(rundown, parent, eventData.after);
+      return { afterId, beforeId: null, cueAfterId: afterId };
+    }
+
+    return { afterId: null, beforeId: null, cueAfterId: getLastInsertId(rundown, parent) };
+  })();
 
   // generate a fully formed entry from the patch
-  const newEntry = generateEvent(rundown, eventData, afterId, parent?.id);
+  const newEntry = generateEvent(rundown, eventData, insertPosition.cueAfterId, parent?.id);
 
   // make mutations to rundown
-  rundownMutation.add(rundown, newEntry, afterId, parent);
+  rundownMutation.add(rundown, newEntry, parent, insertPosition.afterId, insertPosition.beforeId);
 
   const { rundown: responseRundown, rundownMetadata, revision } = await commit();
 
@@ -395,7 +416,10 @@ export async function swapEvents(rundownId: string, fromId: EntryId, toId: Entry
  * @throws if the entry to clone does not exist
  */
 export async function cloneEntry(rundownId: string, entryId: EntryId, options: InsertOptions): Promise<Rundown> {
+  assertSingleInsertAnchor(options);
+
   const { rundown, commit } = createTransaction({ rundownId, mutableRundown: true });
+  assertInsertAnchorExists(rundown, options);
   const originalEntry = rundown.entries[entryId];
 
   if (!originalEntry) {

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

@@ -70,6 +70,50 @@ export function generateEvent(
   throw new Error('Invalid event type');
 }
 
+/**
+ * Gets the last valid insertion reference for a top-level rundown or group order.
+ * Used when appending entries and when generating cues from the preceding entry.
+ */
+export function getLastInsertId(rundown: Rundown, parent: OntimeGroup | null): EntryId | null {
+  const insertionList = parent ? parent.entries : rundown.order;
+  return insertionList[insertionList.length - 1] ?? null;
+}
+
+/**
+ * Resolves a `before` insertion option to the first entry in the relevant order when `true` is provided.
+ * String values are already explicit anchors and are returned unchanged.
+ */
+export function getFirstInsertId(rundown: Rundown, parent: OntimeGroup | null, before: EntryId | true): EntryId | null {
+  if (before !== true) {
+    return before;
+  }
+
+  const insertionList = parent ? parent.entries : rundown.order;
+  return insertionList[0] ?? null;
+}
+
+/**
+ * Gets the sibling before a `before` insertion anchor in the top-level or group order.
+ * Returns `null` when the new entry will be inserted at the start.
+ */
+export function getPreviousInsertId(
+  rundown: Rundown,
+  parent: OntimeGroup | null,
+  beforeId: EntryId | null,
+): EntryId | null {
+  if (beforeId === null) {
+    return null;
+  }
+
+  const insertionList = parent ? parent.entries : rundown.order;
+  const beforeIndex = insertionList.indexOf(beforeId);
+  if (beforeIndex < 1) {
+    return null;
+  }
+
+  return insertionList[beforeIndex - 1] ?? null;
+}
+
 export function createEventPatch(originalEvent: OntimeEvent, patchEvent: Partial<OntimeEvent>): OntimeEvent {
   if (Object.keys(patchEvent).length === 0) {
     return originalEvent;

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

@@ -1,4 +1,5 @@
 import { body, param } from 'express-validator';
+import type { EntryId, InsertOptions, OntimeGroup, Rundown } from 'ontime-types';
 
 import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
@@ -37,15 +38,27 @@ export const rundownImportValidator = [
 
 export const entryPostValidator = [
   body('type').isString().isIn(['event', 'delay', 'group', 'milestone']),
-  body('after').optional().isString(),
-  body('before').optional().isString(),
+  body('after')
+    .optional()
+    .custom((value) => value === true || typeof value === 'string')
+    .withMessage('Allowed values for after are an ID or true.'),
+  body('before')
+    .optional()
+    .custom((value) => value === true || typeof value === 'string')
+    .withMessage('Allowed values for before are an ID or true.'),
 
   requestValidationFunction,
 ];
 
 export const clonePostValidator = [
-  body('after').optional().isString(),
-  body('before').optional().isString(),
+  body('after')
+    .optional()
+    .custom((value) => value === true || typeof value === 'string')
+    .withMessage('Allowed values for after are an ID or true.'),
+  body('before')
+    .optional()
+    .custom((value) => value === true || typeof value === 'string')
+    .withMessage('Allowed values for before are an ID or true.'),
 
   requestValidationFunction,
 ];
@@ -93,4 +106,44 @@ export const entryRenumberValidator = [
   requestValidationFunction,
 ];
 
+/**
+ * Ensures callers use a single insertion anchor so placement is unambiguous.
+ */
+export function assertSingleInsertAnchor(options: InsertOptions) {
+  if (options.after !== undefined && options.before !== undefined) {
+    throw new Error('Use only one insertion anchor: after or before');
+  }
+}
+
+/**
+ * Ensures an ID anchor exists and belongs to the order it is intended to position within.
+ */
+export function assertInsertAnchorInOrder(rundown: Rundown, parent: OntimeGroup | null, options: InsertOptions) {
+  const anchor = getStringInsertAnchor(options);
+  if (anchor === undefined) return;
+
+  if (!Object.hasOwn(rundown.entries, anchor)) {
+    throw new Error(`Insertion anchor with ID ${anchor} does not exist`);
+  }
+
+  const insertionList = parent ? parent.entries : rundown.order;
+  if (!insertionList.includes(anchor)) {
+    throw new Error(`Insertion anchor with ID ${anchor} is not in the target order`);
+  }
+}
+
+/** Ensures an ID anchor refers to an entry in the rundown. */
+export function assertInsertAnchorExists(rundown: Rundown, options: InsertOptions) {
+  const anchor = getStringInsertAnchor(options);
+  if (anchor !== undefined && !Object.hasOwn(rundown.entries, anchor)) {
+    throw new Error(`Insertion anchor with ID ${anchor} does not exist`);
+  }
+}
+
+function getStringInsertAnchor(options: InsertOptions): EntryId | undefined {
+  if (typeof options.after === 'string') return options.after;
+  if (typeof options.before === 'string') return options.before;
+  return undefined;
+}
+
 // #endregion operations on rundown entries =======================

apps/server/src/api-data/settings/__tests__/settings.parser.test.ts

@@ -16,36 +16,6 @@ describe('parseSettings()', () => {
       operatorKey: null,
       timeFormat: '24',
       language: 'en',
-      auxTimerNames: ['', '', ''],
     });
   });
-
-  it('carries custom aux timer names through and pads to a length-3 array', () => {
-    const result = parseSettings({
-      settings: { version: '1', auxTimerNames: ['Speaker'] } as unknown as Settings,
-    });
-    expect(result.auxTimerNames).toStrictEqual(['Speaker', '', '']);
-  });
-
-  it('falls back to defaults when aux timer names are missing or malformed', () => {
-    const result = parseSettings({
-      settings: { version: '1', auxTimerNames: 'not-an-array' } as unknown as Settings,
-    });
-    expect(result.auxTimerNames).toStrictEqual(['', '', '']);
-  });
-
-  it('creates the aux timer names for project files made before the feature existed', () => {
-    const oldSettings = {
-      version: '4.5.0',
-      editorKey: null,
-      operatorKey: null,
-      timeFormat: '24',
-      language: 'en',
-    };
-
-    const result = parseSettings({ settings: oldSettings as Settings });
-
-    expect(result.auxTimerNames).toStrictEqual(['', '', '']);
-    expect(result).toMatchObject({ timeFormat: '24', language: 'en' });
-  });
 });

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

@@ -1,5 +1,4 @@
 import { DatabaseModel, Settings } from 'ontime-types';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { getPartialProject } from '../../models/dataModel.js';
 
@@ -23,7 +22,5 @@ export function parseSettings(data: Partial<DatabaseModel>): Settings {
     operatorKey: data.settings.operatorKey ?? defaultSettings.operatorKey,
     timeFormat: data.settings.timeFormat ?? defaultSettings.timeFormat,
     language: data.settings.language ?? defaultSettings.language,
-    // older project files predate this property
-    auxTimerNames: sanitiseAuxTimerNames(data.settings.auxTimerNames),
   };
 }

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

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

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

@@ -1,5 +1,4 @@
 import { body } from 'express-validator';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
@@ -28,7 +27,6 @@ export const validateSettings = [
   pinValidator('operatorKey'),
   body('timeFormat').isString().isIn(['12', '24']).withMessage('Time format can only be "12" or "24"'),
   body('language').isString().trim().notEmpty(),
-  body('auxTimerNames').isArray().withMessage('auxTimerNames must be an array').customSanitizer(sanitiseAuxTimerNames),
 
   requestValidationFunction,
 ];

apps/server/src/api-mcp/__tests__/mcp.service.test.ts

@@ -153,6 +153,41 @@ describe('mcp.service', () => {
     expect(result.created.map((entry) => entry.id)).toEqual(['entry-1', 'entry-2', 'entry-3', 'entry-4']);
   });
 
+  it('omits insert anchors when creating an entry without a position', async () => {
+    await createEntryForMcp({
+      type: SupportedEntry.Milestone,
+      title: 'End marker',
+    });
+
+    expect(addEntryMock).toHaveBeenCalledWith(
+      'loaded-rundown',
+      expect.objectContaining({ type: SupportedEntry.Milestone, title: 'End marker' }),
+    );
+    expect(addEntryMock.mock.calls[0][1]).not.toHaveProperty('after');
+    expect(addEntryMock.mock.calls[0][1]).not.toHaveProperty('before');
+  });
+
+  it('uses before true for the first batch entry and chains the rest', async () => {
+    await batchCreateEntriesForMcp({
+      before: true,
+      entries: [
+        { type: SupportedEntry.Event, title: 'First' },
+        { type: SupportedEntry.Event, title: 'Second' },
+      ],
+    });
+
+    expect(addEntryMock).toHaveBeenNthCalledWith(
+      1,
+      'loaded-rundown',
+      expect.objectContaining({ type: SupportedEntry.Event, title: 'First', before: true }),
+    );
+    expect(addEntryMock).toHaveBeenNthCalledWith(
+      2,
+      'loaded-rundown',
+      expect.objectContaining({ type: SupportedEntry.Event, title: 'Second', after: 'entry-1' }),
+    );
+  });
+
   it('rejects nested groups before creating entries', async () => {
     await expect(
       batchCreateEntriesForMcp({

apps/server/src/api-mcp/mcp.prompts.ts

@@ -71,10 +71,10 @@ Read the ontime://schema resource if you need a data model reference.
 
 Steps:
 1. Call ontime_list_rundowns and identify the target rundown. If the user wants a background rundown, pass its \`rundownId\` in all entry read/write calls instead of loading it.
-2. Call ontime_get_rundown with the chosen \`rundownId\` to see current state and identify an \`after\` anchor if appending.
+2. Call ontime_get_rundown with the chosen \`rundownId\` to see current state and avoid duplicating existing entries.
 3. Call ontime_get_timer_state. If playback is not \`stop\` and the target is the loaded rundown, explain that MCP edits affect the live rundown and ask the user to confirm before changing it. If the target is a background rundown, it can be edited without interrupting playback.
 4. Build an array of entries in order and call ontime_batch_create_entries ONCE with all of them. This is much faster than calling ontime_create_entry per item.
-5. If the rundown already has events, pass \`after: <last event id>\` on the batch call so new events chain from the end.
+5. Omit \`after\` and \`before\` on the batch call to append the new entries to the end of the rundown. Use \`after: true\` for an explicit append request, or \`before: true\` for an explicit prepend request.
 
 Entry type guidance:
 - Use \`event\` for anything with a scheduled time and duration (talks, panels, breaks, meals).

apps/server/src/api-mcp/mcp.service.ts

@@ -63,6 +63,11 @@ export type BatchCreateEntryArgs = CreateEntryArgs & { children?: BatchCreateEnt
 export type UpdateEntryArgs = EntryFieldArgs & TargetRundownArgs & { id: EntryId };
 export type GroupEntriesArgs = GroupFieldArgs & TargetRundownArgs & { ids: EntryId[] };
 export type UngroupEntryArgs = TargetRundownArgs & { id: EntryId };
+type BatchCreateEntriesArgs = TargetRundownArgs & {
+  entries: BatchCreateEntryArgs[];
+  after?: EntryId | true;
+  before?: EntryId | true;
+};
 
 export function resolveTargetRundownId(args: TargetRundownArgs): string {
   return args.rundownId ?? getCurrentRundownId();
@@ -133,20 +138,24 @@ export function assertKnownCustomFields(...customValues: Array<EntryFieldArgs['c
 /** Translates tool arguments into the payload consumed by rundown.service addEntry */
 export function toEntryPayload(args: CreateEntryArgs): EventPostPayload {
   const { type = SupportedEntry.Event, after, before } = args;
+  const insertOptions = {
+    ...(after !== undefined ? { after } : {}),
+    ...(before !== undefined ? { before } : {}),
+  };
 
   switch (type) {
     case SupportedEntry.Delay:
-      return { type: SupportedEntry.Delay, duration: args.duration, after, before };
+      return { type: SupportedEntry.Delay, duration: args.duration, ...insertOptions };
     case SupportedEntry.Milestone: {
       const { cue, title, note, colour, custom } = args;
-      return { type: SupportedEntry.Milestone, cue, title, note, colour, custom, after, before };
+      return { type: SupportedEntry.Milestone, cue, title, note, colour, custom, ...insertOptions };
     }
     case SupportedEntry.Group:
       // group creation currently only accepts a title, see generateEvent in rundown.utils.ts
-      return { type: SupportedEntry.Group, title: args.title, after, before };
+      return { type: SupportedEntry.Group, title: args.title, ...insertOptions };
     case SupportedEntry.Event: {
-      const { type: _type, rundownId: _rundownId, ...eventFields } = args;
-      return { type: SupportedEntry.Event, ...eventFields };
+      const { type: _type, rundownId: _rundownId, after: _after, before: _before, ...eventFields } = args;
+      return { type: SupportedEntry.Event, ...eventFields, ...insertOptions };
     }
     default:
       throw new Error(`Invalid entry type: ${String(type)}`);
@@ -259,20 +268,25 @@ export async function ungroupEntryForMcp(args: UngroupEntryArgs) {
   return { target: getTargetMeta(rundownId), ungrouped: args.id, order: updatedRundown.order };
 }
 
-export async function batchCreateEntriesForMcp(
-  args: TargetRundownArgs & { entries: BatchCreateEntryArgs[]; after?: EntryId },
-) {
-  const { entries = [], after } = args;
+export async function batchCreateEntriesForMcp(args: BatchCreateEntriesArgs) {
+  const { entries = [], after, before } = args;
   validateBatchCreateEntries(entries);
   const allEntries = flattenBatchCreateEntries(entries);
   assertKnownCustomFields(...allEntries.map((entry) => entry.custom));
   const rundownId = resolveTargetRundownId(args);
-  let previousId = after;
+  let previousId: EntryId | undefined;
   const created: OntimeEntry[] = [];
 
   for (const entryArgs of entries) {
+    const firstInsertOptions =
+      created.length === 0
+        ? {
+            ...(after !== undefined ? { after } : {}),
+            ...(before !== undefined ? { before } : {}),
+          }
+        : undefined;
     // eslint-disable-next-line no-await-in-loop -- top-level entries chain after the previously created one
-    const entry = await createBatchEntry(rundownId, entryArgs, previousId);
+    const entry = await createBatchEntry(rundownId, entryArgs, previousId, undefined, firstInsertOptions);
     created.push(...entry.created);
     previousId = entry.entry.id;
   }
@@ -303,6 +317,7 @@ async function createBatchEntry(
   entryArgs: BatchCreateEntryArgs,
   previousId?: EntryId,
   parentId?: EntryId,
+  firstInsertOptions?: InsertOptions,
 ): Promise<{ entry: OntimeEntry; created: OntimeEntry[] }> {
   if (parentId && entryArgs.type === SupportedEntry.Group) {
     throw new Error('Cannot create a group inside another group.');
@@ -311,8 +326,9 @@ async function createBatchEntry(
   const { children: _children, ...createArgs } = entryArgs;
   const payload = toEntryPayload(createArgs);
   const insertOptions = {
-    ...(previousId ? { after: previousId } : {}),
-    ...(parentId ? { parent: parentId } : {}),
+    ...(previousId !== undefined ? { after: previousId } : {}),
+    ...(parentId !== undefined ? { parent: parentId } : {}),
+    ...(previousId === undefined ? firstInsertOptions : {}),
   };
 
   const createdEntry = await addEntry(rundownId, { ...payload, ...insertOptions } as EventPostPayload);

apps/server/src/api-mcp/mcp.tools.ts

@@ -96,7 +96,7 @@ export const TOOL_DEFINITIONS = [
   {
     name: 'ontime_create_entry',
     description:
-      'Create a new entry. Omit rundownId for the currently loaded live rundown, or provide a rundownId from ontime_list_rundowns to edit a background rundown without loading it. If playback is running and rundownId is omitted or matches the loaded rundown, confirm the user intends to change the live rundown before calling. Omit after/before to append at the end. For type "event" provide title plus enough timing data for Ontime to infer a strategy: timeStart+duration calculates timeEnd, timeStart+timeEnd calculates duration and locks end, timeEnd+duration calculates timeStart, and all three prioritise duration. For "milestone" provide cue/title/note/colour and optional custom values using existing project custom field keys. For "delay" provide duration. For "group" provide title plus optional note/colour/custom/targetDuration.',
+      'Create a new entry. Omit after/before to append at the end, use after: true to explicitly append, use before: true to prepend, or use before/after with an entry ID to position the entry. Omit rundownId for the currently loaded live rundown, or provide a rundownId from ontime_list_rundowns to edit a background rundown without loading it. If playback is running and rundownId is omitted or matches the loaded rundown, confirm the user intends to change the live rundown before calling. For type "event" provide title plus enough timing data for Ontime to infer a strategy: timeStart+duration calculates timeEnd, timeStart+timeEnd calculates duration and locks end, timeEnd+duration calculates timeStart, and all three prioritise duration. For "milestone" provide cue/title/note/colour and optional custom values using existing project custom field keys. For "delay" provide duration. For "group" provide title plus optional note/colour/custom/targetDuration.',
     inputSchema: {
       type: 'object',
       properties: {
@@ -114,8 +114,14 @@ export const TOOL_DEFINITIONS = [
           description: 'Duration in ms (events: should equal timeEnd - timeStart; delays: the schedule shift)',
         },
         targetDuration: { type: 'number', description: 'Groups only: planned length of the group in ms' },
-        after: { type: 'string', description: 'Insert after this entry ID' },
-        before: { type: 'string', description: 'Insert before this entry ID' },
+        after: {
+          type: ['string', 'boolean'],
+          description: 'Insert after this entry ID, or true to append',
+        },
+        before: {
+          type: ['string', 'boolean'],
+          description: 'Insert before this entry ID, or true to prepend',
+        },
         ...EVENT_WRITABLE_FIELDS,
       },
     },
@@ -218,13 +224,20 @@ export const TOOL_DEFINITIONS = [
   {
     name: 'ontime_batch_create_entries',
     description:
-      'Create multiple entries, including groups with nested children. Omit rundownId for the currently loaded live rundown, or provide a rundownId from ontime_list_rundowns to edit a background rundown without loading it. If playback is running and rundownId is omitted or matches the loaded rundown, confirm the user intends to change the live rundown before calling. Use this for "build from agenda" flows to avoid many round trips. Entries are inserted in array order; if `after` is provided it positions the first top-level entry, subsequent top-level entries chain from the previous. A group entry may include `children`; those entries are created inside the group in array order. Groups cannot be nested. For events, provide title plus enough timing data for Ontime to infer a strategy: timeStart+duration calculates timeEnd, timeStart+timeEnd calculates duration and locks end, timeEnd+duration calculates timeStart, and all three prioritise duration.',
+      'Create multiple entries, including groups with nested children. Omit rundownId for the currently loaded live rundown, or provide a rundownId from ontime_list_rundowns to edit a background rundown without loading it. If playback is running and rundownId is omitted or matches the loaded rundown, confirm the user intends to change the live rundown before calling. Use this for "build from agenda" flows to avoid many round trips. Entries are inserted in array order; omit after/before to append the first entry at the end, use after: true to explicitly append, use before: true to prepend, or use after/before with an entry ID to position the first top-level entry. Subsequent top-level entries chain from the previous. A group entry may include `children`; those entries are created inside the group in array order. Groups cannot be nested. For events, provide title plus enough timing data for Ontime to infer a strategy: timeStart+duration calculates timeEnd, timeStart+timeEnd calculates duration and locks end, timeEnd+duration calculates timeStart, and all three prioritise duration.',
     inputSchema: {
       type: 'object',
       required: ['entries'],
       properties: {
         ...RUNDOWN_TARGET_FIELD,
-        after: { type: 'string', description: 'Insert the first entry after this entry ID' },
+        after: {
+          type: ['string', 'boolean'],
+          description: 'Insert the first entry after this entry ID, or true to append',
+        },
+        before: {
+          type: ['string', 'boolean'],
+          description: 'Insert the first entry before this entry ID, or true to prepend',
+        },
         entries: {
           type: 'array',
           description: 'Array of entries to create, in desired order',
@@ -588,7 +601,13 @@ const TOOL_HANDLERS: Record<ToolName, (args: Record<string, unknown>) => Promise
 
   ontime_batch_create_entries: async (args) => {
     return ok(
-      await batchCreateEntriesForMcp(args as TargetRundownArgs & { entries: BatchCreateEntryArgs[]; after?: EntryId }),
+      await batchCreateEntriesForMcp(
+        args as TargetRundownArgs & {
+          entries: BatchCreateEntryArgs[];
+          after?: EntryId | true;
+          before?: EntryId | true;
+        },
+      ),
     );
   },
 

apps/server/src/app.ts

@@ -5,7 +5,6 @@ import cookieParser from 'cookie-parser';
 import cors from 'cors';
 import express from 'express';
 import { LogOrigin, SimpleDirection, SimplePlayback, runtimeStorePlaceholder } from 'ontime-types';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 import serverTiming from 'server-timing';
 
 import { oscServer } from './adapters/OscAdapter.js';
@@ -27,7 +26,6 @@ import { bodyParser } from './middleware/bodyParser.js';
 import { compressedStatic } from './middleware/staticGZip.js';
 import { ONTIME_VERSION } from './ONTIME_VERSION.js';
 import { getShowWelcomeDialog } from './services/app-state-service/AppStateService.js';
-import { auxTimerService } from './services/aux-timer-service/AuxTimerService.js';
 import * as messageService from './services/message-service/message.service.js';
 import { initialiseProject } from './services/project-service/ProjectService.js';
 import { restoreService } from './services/restore-service/restore.service.js';
@@ -206,7 +204,6 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
    * Module initialises the services and provides initial payload for the store
    */
   const state = getState();
-  const [auxName1, auxName2, auxName3] = sanitiseAuxTimerNames(getDataProvider().getSettings().auxTimerNames);
   eventStore.init({
     clock: state.clock,
     timer: state.timer,
@@ -222,28 +219,22 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
-      name: auxName1,
     },
     auxtimer2: {
       duration: timerConfig.auxTimerDefault,
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
-      name: auxName2,
     },
     auxtimer3: {
       duration: timerConfig.auxTimerDefault,
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
-      name: auxName3,
     },
     ping: 1,
   });
 
-  // AuxTimerService owns its own SimpleTimer instances, so the store above doesn't update them
-  auxTimerService.loadNames(getDataProvider().getSettings().auxTimerNames);
-
   // initialise message service
   messageService.init(eventStore.set, eventStore.get);
 

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

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

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

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

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

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

apps/server/src/models/dataModel.ts

@@ -30,7 +30,6 @@ const dbModel: DatabaseModel = {
     operatorKey: null,
     timeFormat: '24',
     language: 'en',
-    auxTimerNames: ['', '', ''],
   },
   viewSettings: {
     overrideStyles: false,

apps/server/src/models/demoProject.ts

@@ -29,7 +29,6 @@ export const demoDb: DatabaseModel = {
     operatorKey: null,
     timeFormat: '24',
     language: 'en',
-    auxTimerNames: ['', '', ''],
   },
   viewSettings: {
     dangerColor: '#ff7300',

apps/server/src/services/__tests__/timerUtils.test.ts

@@ -1126,7 +1126,7 @@ describe('getRuntimeOffset()', () => {
     } as RuntimeState;
 
     const { absolute } = getRuntimeOffset(state);
-    expect(absolute).toBe(400000); // <--- offset is always the overtime
+    expect(absolute).toBe(400000 - 200000); // <--- offset is always the overtime + added time
   });
 
   it('handles time-to-end started after the end time', () => {

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

@@ -1,5 +1,4 @@
 import { RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { SimpleTimer } from '../../classes/simple-timer/SimpleTimer.js';
 import { timerConfig } from '../../setup/config.js';
@@ -25,20 +24,6 @@ export class AuxTimerService {
     this.getTime = getTime;
   }
 
-  /**
-   * Called at bootstrap and whenever the loaded project's settings change,
-   * so the running timers reflect the current project's aux timer names.
-   */
-  loadNames(names?: string[]) {
-    const [name1, name2, name3] = sanitiseAuxTimerNames(names);
-    const patch: AuxTimerStateUpdate = {
-      auxtimer1: this.aux1.setName(name1),
-      auxtimer2: this.aux2.setName(name2),
-      auxtimer3: this.aux3.setName(name3),
-    };
-    this.emit(patch);
-  }
-
   /**
    * Whether any of the aux timers are currently running
    */

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

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

apps/server/src/services/project-service/ProjectService.ts

@@ -29,7 +29,6 @@ import {
   removeFileExtension,
 } from '../../utils/fileManagement.js';
 import { getLastLoaded, isLastLoadedProject, setLastLoaded } from '../app-state-service/AppStateService.js';
-import { auxTimerService } from '../aux-timer-service/AuxTimerService.js';
 import { runtimeService } from '../runtime-service/runtime.service.js';
 import {
   doesProjectExist,
@@ -90,16 +89,12 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown
   // stop the runtime service
   runtimeService.stop();
 
-  // AuxTimerService holds its own state, independent of the loaded project, so it needs to be updated explicitly
-  auxTimerService.loadNames(projectData.settings.auxTimerNames);
-
   // load the rundown given by key otherwise load the first in the project
   const rundown =
     rundownId && rundownId in projectData.rundowns
       ? projectData.rundowns[rundownId]
       : getFirstRundown(projectData.rundowns);
 
-  // initialising the rundown with reload sends a refetch to the clients
   await initRundown(rundown, projectData.customFields, true);
 
   // persist the project selection
@@ -111,6 +106,9 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown
     currentProjectName: fileName,
   };
 
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return fileName;
 }
 
@@ -269,6 +267,10 @@ export async function duplicateProjectFile(originalFile: string, newFilename: st
 
   const pathToDuplicate = getPathToProject(newFilename);
   await copyFile(projectFilePath, pathToDuplicate);
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return;
 }
 
@@ -299,6 +301,10 @@ export async function renameProjectFile(originalFile: string, newFilename: strin
     const newFileName = await loadProject(projectData.data, newFilename);
     return newFileName;
   }
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return newFilename;
 }
 
@@ -338,6 +344,9 @@ export async function deleteProjectFile(filename: string) {
   }
 
   await deleteFile(projectFilePath);
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
 }
 
 /**
@@ -352,12 +361,6 @@ export async function patchCurrentProject(data: Partial<DatabaseModel>) {
   // we can pass some stuff straight to the data provider
   await getDataProvider().mergeIntoData(rest);
 
-  // AuxTimerService holds its own state, so a settings patch needs to be applied to it explicitly
-  if (rest.settings) {
-    auxTimerService.loadNames(getDataProvider().getSettings().auxTimerNames);
-    sendRefetch(RefetchKey.Settings);
-  }
-
   // the rundown depends on custom fields
   // so custom fields needs to be checked first
   if (customFields) {
@@ -386,6 +389,7 @@ export async function patchCurrentProject(data: Partial<DatabaseModel>) {
     }
   }
 
-  const updatedData = await getDataProvider().getData();
+  const updatedData = getDataProvider().getData();
+
   return updatedData;
 }

apps/server/src/services/timerUtils.ts

@@ -180,13 +180,13 @@ export function getRuntimeOffset(state: RuntimeState): { absolute: number; relat
   const pausedTime = state._timer.pausedAt === null ? 0 : clock - state._timer.pausedAt;
 
   // absolute offset is difference between schedule and playback time
-  const absolute = eventStartOffset + overtime + pausedTime + addedTime;
+  // in case of count to end, the absolute offset is overtime and added time
+  const absolute = countToEnd ? overtime + addedTime : eventStartOffset + overtime + pausedTime + addedTime;
 
   // the relative offset is the same as the absolute but adjusted relative to the actual start time
   const relative = absolute + plannedStart - actualStart - _startDayOffset * dayInMs;
 
-  // in case of count to end, the absolute offset is just the overtime
-  return countToEnd ? { absolute: overtime, relative } : { absolute, relative };
+  return { absolute, relative };
 }
 
 /**

apps/server/src/stores/__tests__/runtimeState.test.ts

@@ -1036,4 +1036,167 @@ describe('loadGroupFlagAndEnd()', () => {
       eventNow: rundown.entries[0],
     });
   });
+
+  test('countToEnd entries decouple the link chain for subsequent events', () => {
+    // Event 0 (loaded): no countToEnd, linkStart=true
+    // Event 1: countToEnd=true           → breaks the link chain
+    // Event 2: linkStart=true           → unlinked (chain broken by event 1)
+    // Event 3: flag event               → also unlinked
+    const rundown = makeRundown({
+      entries: {
+        group: makeOntimeGroup({ id: 'group', entries: ['0', '1', '2'] }),
+        0: makeOntimeEvent({
+          id: '0',
+          parent: 'group',
+          timeStart: 0,
+          duration: 3600000,
+          countToEnd: false,
+          linkStart: true,
+          gap: 0,
+        } as any),
+        1: makeOntimeEvent({
+          id: '1',
+          parent: 'group',
+          timeStart: 3600000,
+          duration: 3600000,
+          countToEnd: true,
+          linkStart: true,
+          gap: 0,
+        } as any),
+        2: makeOntimeEvent({
+          id: '2',
+          parent: 'group',
+          timeStart: 7200000,
+          duration: 3600000,
+          linkStart: true,
+          gap: 0,
+        } as any),
+        3: makeOntimeEvent({
+          id: '3',
+          parent: null,
+          timeStart: 10800000,
+          duration: 3600000,
+          linkStart: true,
+          gap: 0,
+        } as any),
+      },
+      order: ['group', '0', '1', '2', '3'],
+    });
+
+    const state = {
+      groupNow: null,
+      eventNow: rundown.entries[0],
+      rundown: { actualGroupStart: null },
+    } as RuntimeState;
+
+    const metadata = { playableEventOrder: ['0', '1', '2', '3'], flags: ['3'] } as RundownMetadata;
+
+    loadGroupFlagAndEnd(rundown, metadata, 0, state);
+
+    // _group is the last event in the group (event 2)
+    // isLinkedToLoaded is false because event 1 (between loaded and group end) has countToEnd=true
+    // accumulatedGap includes event 1's duration carried forward to event 2
+    // (the countToEnd duration is applied to the next event, not the countToEnd event itself)
+    expect(state._group).toMatchObject({
+      event: rundown.entries[2],
+      isLinkedToLoaded: false,
+      accumulatedGap: 3600000,
+    });
+
+    // _flag (event 3): isLinkedToLoaded is false because chain was broken by event 1
+    // accumulatedGap is still 3600000 because event 2 is not countToEnd,
+    // so previousWasCountToEnd is null and no further duration is carried forward
+    expect(state._flag).toMatchObject({
+      event: rundown.entries[3],
+      isLinkedToLoaded: false,
+      accumulatedGap: 3600000,
+    });
+
+    // _end (event 3): also unlinked because the chain was broken at event 1
+    expect(state._end).toMatchObject({
+      event: rundown.entries[3],
+      isLinkedToLoaded: false,
+    });
+  });
+
+  test('countToEnd in the middle of the chain breaks links for downstream events', () => {
+    // Event 0 (loaded): no countToEnd, linkStart=true
+    // Event 1: linkStart=true           → linked to loaded
+    // Event 2: countToEnd=true          → breaks the chain (also last in group)
+    // Event 3: linkStart=true           → unlinked (chain broken by event 2)
+    const rundown = makeRundown({
+      entries: {
+        group: makeOntimeGroup({ id: 'group', entries: ['0', '1', '2'] }),
+        0: makeOntimeEvent({
+          id: '0',
+          parent: 'group',
+          timeStart: 0,
+          duration: 3600000,
+          countToEnd: false,
+          linkStart: true,
+          gap: 0,
+        } as any),
+        1: makeOntimeEvent({
+          id: '1',
+          parent: 'group',
+          timeStart: 3600000,
+          duration: 3600000,
+          linkStart: true,
+          gap: 0,
+        } as any),
+        2: makeOntimeEvent({
+          id: '2',
+          parent: 'group',
+          timeStart: 7200000,
+          duration: 3600000,
+          countToEnd: true,
+          linkStart: true,
+          gap: 0,
+        } as any),
+        3: makeOntimeEvent({
+          id: '3',
+          parent: null,
+          timeStart: 10800000,
+          duration: 3600000,
+          linkStart: true,
+          gap: 0,
+        } as any),
+      },
+      order: ['group', '0', '1', '2', '3'],
+    });
+
+    const state = {
+      groupNow: null,
+      eventNow: rundown.entries[0],
+      rundown: { actualGroupStart: null },
+    } as RuntimeState;
+
+    const metadata = { playableEventOrder: ['0', '1', '2', '3'], flags: ['3'] } as RundownMetadata;
+
+    loadGroupFlagAndEnd(rundown, metadata, 0, state);
+
+    // _group is the last event in the group (event 2)
+    // isLinkedToLoaded is true because no preceding event had countToEnd
+    // accumulatedGap is 0 because no preceding event was countToEnd
+    // (the countToEnd duration is carried forward to the next event, not added to the countToEnd event itself)
+    expect(state._group).toMatchObject({
+      event: rundown.entries[2],
+      isLinkedToLoaded: true,
+      accumulatedGap: 0,
+    });
+
+    // _flag (event 3): isLinkedToLoaded is false because chain was broken by count-to-end event 2
+    // accumulatedGap includes event 2's duration carried forward
+    expect(state._flag).toMatchObject({
+      event: rundown.entries[3],
+      isLinkedToLoaded: false,
+      accumulatedGap: 3600000,
+    });
+
+    // _end (event 3): unlinked because event 2 has countToEnd=true
+    expect(state._end).toMatchObject({
+      event: rundown.entries[3],
+      isLinkedToLoaded: false,
+    });
+  });
 });