refactor(views): keep query status truthful, push render logic to the view boundary

Reworks the previous fix, which had base hooks (useRundown, useSettings, useCustomFields, useProjectData, useViewSettings) rewrite their own status/isError to hide background-refetch failures. That was misleading: those hooks are consumed well beyond the 9 view loaders, and other callers may legitimately want to know a fetch genuinely failed. Instead the base hooks now return react-query's status/isError untouched, plus the isLoadingError flag react-query already computes (true only when a query has never received data). aggregateQueryStatus (viewLoader.utils.ts) takes {status, isLoadingError} pairs and only reports 'error' once every query has settled and at least one never got data; a background/refetch error with data present now aggregates to 'success'. The two single-query consumers outside that aggregator (RundownList/CuesheetTable via useScopedRundown, and ProjectInfo) branch on isLoadingError directly instead of status === 'error'. Removes the standalone deriveQueryStatus helper introduced in the prior iteration, since the logic now lives in the one place that already existed for this purpose (aggregateQueryStatus) rather than a new abstraction.
refactor(views): use react-query's isLoadingError instead of reimplementing it
2026-08-12 10:53:51 +00:00 · 2026-08-02 05:28:49 +00:00 · 2026-08-01 18:59:39 +00:00 · 2026-08-01 18:53:44 +00:00 · 2026-08-01 18:47:01 +00:00 · 2026-08-01 16:25:14 +02:00
127 changed files with 3754 additions and 870 deletions
@@ -0,0 +1,5 @@
+# CodeGraph data files — local to each machine, not for committing.
+# Ignore everything in .codegraph/ except this file itself, so transient
+# files (the database, daemon.pid, sockets, logs) never show up in git.
+*
+!.gitignore
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.10.0",
+  "version": "4.11.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "4.10.0",
+  "version": "4.11.0",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -6,6 +6,7 @@ import {
  ProjectRundownsList,
  RenumberCues,
  Rundown,
+  RundownImportPayload,
  TransientEventPayload,
 } from 'ontime-types';

@@ -82,6 +83,15 @@ export async function deleteRundown(rundownId: RundownId): Promise<AxiosResponse
  return axios.delete(`${rundownPath}/${rundownId}`);
 }

+/**
+ * HTTP request to apply an imported rundown using a merge strategy or into a new rundown
+ */
+export async function importRundownWithOptions(
+  payload: RundownImportPayload,
+): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.post(`${rundownPath}/import`, payload);
+}
+
 // #endregion operations on project rundowns ======================
 // #region operations on rundown entries ==========================

@@ -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;
@@ -11,6 +11,7 @@ import {
 } from '../../../stores/savedViewParams';
 import { handleLinks } from '../../../utils/linkUtils';
 import IconButton from '../../buttons/IconButton';
+import Tooltip from '../../tooltip/Tooltip';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';

 import style from './ClientLink.module.scss';
@@ -105,16 +106,20 @@ function BrowserNavigationItem({ current, to, postAction, children }: PropsWithC
      {isCustomised && (
        <span className={style.trailing}>
          <span className={style.indicator} aria-hidden data-testid='client-link__saved-indicator' />
-          <IconButton
-            variant='ghosted-white'
-            size='small'
-            className={style.clear}
-            aria-label='Clear saved view settings'
-            title='Clear saved view settings'
-            onClick={clearViewSettings}
+          <Tooltip
+            text='Reset to default'
+            render={
+              <IconButton
+                variant='ghosted-white'
+                size='small'
+                className={style.clear}
+                aria-label='Reset to default'
+                onClick={clearViewSettings}
+              />
+            }
          >
            <IoCloseOutline />
-          </IconButton>
+          </Tooltip>
        </span>
      )}
    </NavigationMenuItem>
@@ -1,20 +1,43 @@
+@use '@/theme/viewerDefs' as *;
+
 .emptyContainer {
  width: 100%;
  text-align: center;
-  color: $white-10;
+  color: var(--secondary-color-override, $viewer-secondary-color);

  .empty {
    display: block;
-    width: min(100%, 24rem);
-    margin-inline: auto;
-    opacity: 0.8;
+    width: min(100%, 14rem);
+    margin: 0 auto -1.5rem;
+    opacity: 0.6;
  }

  .text {
    display: block;
    margin-inline: auto;
-    font-weight: 600;
-    font-size: 2em;
-    max-width: min(100%, 600px);
+    font-weight: 400;
+    font-size: clamp(1rem, 1.55vw, 1.5rem);
+    line-height: 1.35;
+    max-width: min(100%, 40rem);
+  }
+
+  &.error {
+    color: $error-red;
+
+    .empty {
+      opacity: 0.35;
+      filter: grayscale(1);
+    }
+
+    .text {
+      margin-top: 0.5rem;
+    }
+  }
+
+  .errorIcon {
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: -0.125rem auto 0;
  }
 }
@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { IoWarningOutline } from 'react-icons/io5';

 import EmptyImage from '../../../assets/images/empty.svg?react';
 import { cx } from '../../utils/styleUtils';
@@ -9,12 +10,18 @@ interface EmptyProps {
  text?: string;
  injectedStyles?: CSSProperties;
  className?: string;
+  variant?: 'error';
 }

-export default function Empty({ text, className, injectedStyles }: EmptyProps) {
+export default function Empty({ text, className, injectedStyles, variant }: EmptyProps) {
  return (
-    <div className={cx([style.emptyContainer, className])} style={injectedStyles}>
+    <div
+      className={cx([style.emptyContainer, variant === 'error' && style.error, className])}
+      style={injectedStyles}
+      role={variant === 'error' ? 'alert' : undefined}
+    >
      <EmptyImage className={style.empty} />
+      {variant === 'error' && <IoWarningOutline className={style.errorIcon} aria-hidden />}
      {text && <span className={style.text}>{text}</span>}
    </div>
  );
@@ -0,0 +1,11 @@
+.fill {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+
+  display: grid;
+  place-items: start center;
+  padding: clamp(4rem, 20dvh, 12rem) 1.5rem 1rem;
+}
@@ -0,0 +1,19 @@
+import { cx } from '../../utils/styleUtils';
+import Empty from './Empty';
+
+import style from './EmptyFill.module.scss';
+
+interface EmptyFillProps {
+  text?: string;
+  /** placed on the fill wrapper — e.g. to assign a grid-area in a grid parent */
+  className?: string;
+}
+
+/** Container-filling empty/loading state for panels and grid/flex cells. */
+export default function EmptyFill({ text, className }: EmptyFillProps) {
+  return (
+    <div className={cx([style.fill, className])}>
+      <Empty text={text} />
+    </div>
+  );
+}
@@ -6,7 +6,7 @@
  box-sizing: border-box; /* reset */
  overflow: hidden;
  width: 100%; /* restrict the page width to viewport */
-  height: 100vh;
+  height: 100dvh;

  font-family: var(--font-family-override, $viewer-font-family);
  background: var(--background-color-override, $viewer-background-color);
@@ -16,5 +16,6 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  padding-top: 5rem;
+  justify-content: center;
+  padding-block: 5rem;
 }
@@ -7,12 +7,13 @@ import style from './EmptyPage.module.scss';
 interface EmptyPageProps {
  text?: string;
  injectedStyles?: CSSProperties;
+  variant?: 'error';
 }

-export default function EmptyPage({ text, injectedStyles }: EmptyPageProps) {
+export default function EmptyPage({ text, injectedStyles, variant }: EmptyPageProps) {
  return (
    <div className={style.page}>
-      <Empty text={text} injectedStyles={injectedStyles} />
+      <Empty text={text} injectedStyles={injectedStyles} variant={variant} />
    </div>
  );
 }
@@ -15,9 +15,4 @@
    gap: 1rem;
    margin-top: 1em;
  }
-
-  .text {
-    font-weight: 600;
-    font-size: 2em;
-  }
 }
@@ -18,8 +18,7 @@ export default function EmptyTableBody({ handleAddNew }: EmptyTableBodyProps) {
    <tbody className={style.emptyContainer}>
      <tr>
        <td colSpan={99} className={style.emptyCell}>
-          <Empty injectedStyles={{ marginTop: '5vh' }} />
-          <span className={style.text}>{text}</span>
+          <Empty text={text} injectedStyles={{ marginTop: '5vh' }} />
          {handleAddNew && (
            <div className={style.inline}>
              <Button onClick={() => handleAddNew(SupportedEntry.Event)} variant='primary' size='large'>
@@ -6,6 +6,7 @@ import { useSearchParams } from 'react-router';

 import useViewSettings from '../../hooks-query/useViewSettings';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
+import { useSavedViewParams } from '../../stores/savedViewParams';
 import Button from '../buttons/Button';
 import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
@@ -27,6 +28,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { data: viewSettings } = useViewSettings();
  const { isOpen, close } = useViewParamsEditorStore();
+  const clearSavedParams = useSavedViewParams((store) => store.clear);
  const isSmallScreen = useIsSmallScreen();

  const getPreservedParams = () => getPreservedSearchParams(searchParams, viewOptions);
@@ -36,6 +38,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  };

  const resetParams = () => {
+    clearSavedParams(target);
    setSearchParams(getPreservedParams());
  };

@@ -8,12 +8,12 @@ import { getCustomFields } from '../api/customFields';
 const placeholder: CustomFields = {};

 export default function useCustomFields() {
-  const { data, status, isFetching, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, isLoadingError, refetch } = useQuery({
    queryKey: CUSTOM_FIELDS,
    queryFn: ({ signal }) => getCustomFields({ signal }),
    placeholderData: (previousData, _previousQuery) => previousData,
    refetchInterval: queryRefetchIntervalSlow,
  });

-  return { data: data ?? placeholder, status, isFetching, isError, refetch };
+  return { data: data ?? placeholder, status, isFetching, isError, isLoadingError, refetch };
 }
@@ -6,14 +6,14 @@ import { getProjectData, postProjectData } from '../api/project';
 import { projectDataPlaceholder } from '../models/ProjectData';

 export default function useProjectData() {
-  const { data, status, isFetching, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, isLoadingError, refetch } = useQuery({
    queryKey: PROJECT_DATA,
    queryFn: ({ signal }) => getProjectData({ signal }),
    placeholderData: (previousData, _previousQuery) => previousData,
    refetchInterval: queryRefetchIntervalSlow,
  });

-  return { data: data ?? projectDataPlaceholder, status, isFetching, isError, refetch };
+  return { data: data ?? projectDataPlaceholder, status, isFetching, isError, isLoadingError, refetch };
 }

 export function useUpdateProjectData() {
@@ -32,7 +32,7 @@ export default function useRundown() {
    data: { loaded: loadedRundownId },
  } = useProjectRundowns();

-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+  const { data, status, isError, isLoadingError, refetch, isFetching } = useQuery<Rundown>({
    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
    refetchInterval: queryRefetchIntervalSlow,
@@ -50,14 +50,14 @@ export default function useRundown() {
    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, isLoadingError, refetch, isFetching };
 }

 export function useRundownWithMetadata() {
-  const { data, status } = useRundown();
+  const { data, status, isLoadingError } = useRundown();
  const selectedEventId = useSelectedEventId();
  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data, status, rundownMetadata };
+  return { data, status, isLoadingError, rundownMetadata };
 }

 /**
@@ -65,7 +65,7 @@ export function useRundownWithMetadata() {
 * built from the order and rundown fields
 */
 export function useFlatRundown() {
-  const { data, status } = useRundown();
+  const { data, status, isLoadingError } = useRundown();

  const flatRundown = useMemo(() => {
    if (data.revision === -1) {
@@ -74,15 +74,15 @@ export function useFlatRundown() {
    return data.flatOrder.map((id) => data.entries[id]).filter((entry): entry is OntimeEntry => entry !== undefined);
  }, [data]);

-  return { data: flatRundown, rundownId: data.id, status };
+  return { data: flatRundown, rundownId: data.id, status, isLoadingError };
 }

 export function useFlatRundownWithMetadata() {
-  const { data, status } = useRundown();
+  const { data, status, isLoadingError } = useRundown();
  const selectedEventId = useSelectedEventId();

  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data: rundownWithMetadata, status };
+  return { data: rundownWithMetadata, status, isLoadingError };
 }

 /**
@@ -127,7 +127,7 @@ export function useRundownAuxData() {
 export function useRundownById(rundownId: string | null | undefined) {
  const enabled = Boolean(rundownId);

-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+  const { data, status, isError, isLoadingError, refetch, isFetching } = useQuery<Rundown>({
    queryKey: getRundownQueryKey(rundownId ?? ''),
    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
    enabled,
@@ -135,5 +135,5 @@ export function useRundownById(rundownId: string | null | undefined) {
    refetchInterval: queryRefetchIntervalSlow,
  });

-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+  return { data: data ?? cachedRundownPlaceholder, status, isError, isLoadingError, refetch, isFetching };
 }
@@ -11,6 +11,7 @@ export type RundownSource = {
  rundown: Rundown;
  flatRundown: ExtendedEntry[];
  status: string;
+  isLoadingError: boolean;
  selectedEventId: EntryId | null;
 };

@@ -35,7 +36,7 @@ function useRundownSource(rundownId: string | null, loadedRundownId: string | nu
  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
  const runtimeSelectedEventId = useSelectedEventId();
  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
-  const { data: rundown, status } = useRundownById(rundownId);
+  const { data: rundown, status, isLoadingError } = useRundownById(rundownId);
  const flatRundown = useMemo(
    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
    [effectiveSelectedEventId, rundown],
@@ -47,8 +48,9 @@ function useRundownSource(rundownId: string | null, loadedRundownId: string | nu
      rundown,
      flatRundown,
      status,
+      isLoadingError,
      selectedEventId: effectiveSelectedEventId,
    }),
-    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
+    [effectiveSelectedEventId, flatRundown, isLoadingError, rundown, rundownId, status],
  );
 }
@@ -6,7 +6,7 @@ import { getSettings } from '../api/settings';
 import { ontimePlaceholderSettings } from '../models/OntimeSettings';

 export default function useSettings() {
-  const { data, status, isFetching, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, isLoadingError, refetch } = useQuery({
    queryKey: APP_SETTINGS,
    queryFn: ({ signal }) => getSettings({ signal }),
    placeholderData: (previousData, _previousQuery) => previousData,
@@ -22,5 +22,5 @@ export default function useSettings() {
    },
  });

-  return { data: data ?? ontimePlaceholderSettings, status, isFetching, isError, refetch };
+  return { data: data ?? ontimePlaceholderSettings, status, isFetching, isError, isLoadingError, refetch };
 }
@@ -7,7 +7,7 @@ import { VIEW_SETTINGS } from '../api/constants';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';

 export default function useViewSettings() {
-  const { data, status } = useQuery({
+  const { data, status, isLoadingError } = useQuery({
    queryKey: VIEW_SETTINGS,
    queryFn: ({ signal }) => getViewSettings({ signal }),
    placeholderData: (previousData, _previousQuery) => previousData,
@@ -24,5 +24,5 @@ export default function useViewSettings() {
    },
  });

-  return { data: data ?? viewsSettingsPlaceholder, status, mutateAsync };
+  return { data: data ?? viewsSettingsPlaceholder, status, isLoadingError, mutateAsync };
 }
@@ -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;
@@ -139,6 +139,17 @@ export const setEventPlayback = {
  pause: () => sendSocket('pause', undefined),
 };

+export const useTimerProgress = createSelector((state: RuntimeStore) => ({
+  playback: state.timer.playback,
+  phase: state.timer.phase,
+  addedTime: state.timer.addedTime,
+  secondaryTimer: state.timer.secondaryTimer,
+  current: state.timer.current,
+  expectedFinish: state.timer.expectedFinish,
+  startedAt: state.timer.startedAt,
+  isCountToEnd: state.eventNow?.countToEnd ?? false,
+}));
+
 export const useTimer = createSelector((state: RuntimeStore) => ({
  ...state.timer,
 }));
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+
+import { removeFileExtension } from '../uploadUtils';
+
+describe('removeFileExtension()', () => {
+  it('removes a trailing extension', () => {
+    expect(removeFileExtension('show.xlsx')).toBe('show');
+  });
+
+  it('only removes the last extension', () => {
+    expect(removeFileExtension('my.show.xlsx')).toBe('my.show');
+  });
+
+  it('returns the name unchanged when there is no extension', () => {
+    expect(removeFileExtension('rundown')).toBe('rundown');
+  });
+
+  it('does not treat a leading dot as an extension', () => {
+    expect(removeFileExtension('.gitignore')).toBe('.gitignore');
+  });
+
+  it('handles an empty string', () => {
+    expect(removeFileExtension('')).toBe('');
+  });
+});
@@ -3,7 +3,9 @@ import {
  MILLIS_PER_HOUR,
  MILLIS_PER_MINUTE,
  MILLIS_PER_SECOND,
+  dayInMs,
  formatFromMillis,
+  getExpectedEnd,
  getExpectedStart,
 } from 'ontime-utils';

@@ -29,6 +31,11 @@ export function nowInMillis(): number {
  return elapsed;
 }

+export function normaliseWallClock(time: number): number {
+  const timeOfDay = time % dayInMs;
+  return timeOfDay < 0 ? timeOfDay + dayInMs : timeOfDay;
+}
+
 /**
 * @description Resolves format from url and store
 * @return {string|null} A format string like "hh:mm:ss a" or null
@@ -180,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,
  };
 }
@@ -38,6 +38,18 @@ export function validateProjectFile(file: File) {
  }
 }

+/**
+ * Removes a trailing file extension from a file name (e.g. "show.xlsx" -> "show")
+ * A leading dot (dotfiles like ".gitignore") is not treated as an extension
+ */
+export function removeFileExtension(fileName: string): string {
+  const lastDot = fileName.lastIndexOf('.');
+  if (lastDot <= 0) {
+    return fileName;
+  }
+  return fileName.slice(0, lastDot);
+}
+
 export function isExcelFile(file: File | null) {
  return file?.name.endsWith('.xlsx');
 }
@@ -293,8 +293,9 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
        <h3>Outputs</h3>
        <Info>
          Automation outputs can be used to send data from Ontime to external software <br />
-          or to change properties of Ontime itself.
-          <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
+          or to change properties of Ontime itself. <br /> <br />
+          Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
+          <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
        </Info>

        {fieldOutputs.map((output, index) => {
@@ -341,12 +342,17 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                  </label>
                  <label>
                    Address
-                    <Input {...register(`outputs.${index}.address`)} fluid placeholder='/cue/start' />
+                    <TemplateInput
+                      {...register(`outputs.${index}.address`)}
+                      value={output.address}
+                      fluid
+                      placeholder='/cue/start'
+                    />
                    <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
                  </label>
                  <label>
                    Arguments
-                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} placeholder='1' />
+                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} fluid placeholder='1' />
                    <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
                  </label>
                  <div>
@@ -376,7 +382,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                <div className={style.httpSection}>
                  <label>
                    Target URL
-                    <Input
+                    <TemplateInput
                      {...register(`outputs.${index}.url`, {
                        required: { value: true, message: 'Required field' },
                        pattern: {
@@ -384,6 +390,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                          message: 'HTTP messages should target http:// or https://',
                        },
                      })}
+                      value={output.url}
                      fluid
                      placeholder='http://127.0.0.1/start/1'
                    />
@@ -5,6 +5,7 @@ import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
 import * as Panel from '../../panel-utils/PanelUtils';
+import TemplateInput from './template-input/TemplateInput';

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

@@ -71,8 +72,8 @@ export default function OntimeActionForm({
            { value: 'playback-pause', label: 'Playback: pause' },
            { value: 'playback-roll', label: 'Playback: roll' },

-            { value: 'message-set', label: 'Primary Message: set' },
-            { value: 'message-secondary', label: 'Secondary Message: source' },
+            { value: 'message-set', label: 'Primary Message' },
+            { value: 'message-secondary', label: 'Secondary Message' },
          ]}
        />
        <Panel.Error>{rowErrors?.action?.message}</Panel.Error>
@@ -96,7 +97,12 @@ export default function OntimeActionForm({
        <>
          <label>
            Text (leave empty for no change)
-            <Input {...register(`outputs.${index}.text`)} fluid placeholder='eg: Timer is finished' />
+            <TemplateInput
+              {...register(`outputs.${index}.text`)}
+              value={watch(`outputs.${index}.text`) ?? ''}
+              fluid
+              placeholder='eg: Timer is finished'
+            />
            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
          </label>
          <label>
@@ -120,31 +126,48 @@ export default function OntimeActionForm({
      )}

      {selectedAction === 'message-secondary' && (
-        <label>
-          Timer secondary source
-          <Select<SecondarySource | 'null' | null>
-            onValueChange={(value) => {
-              // null -> no selection
-              if (value === null) return;
-              // 'null' -> clear the secondary source
-              if (value === 'null') {
-                setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
-                return;
-              }
-              setValue(`outputs.${index}.secondarySource`, value, { shouldDirty: true });
-            }}
-            value={watch(`outputs.${index}.secondarySource`)}
-            options={[
-              { value: null, label: 'Select secondary source' },
-              { value: 'aux1', label: 'Auxiliary timer 1' },
-              { value: 'aux2', label: 'Auxiliary timer 2' },
-              { value: 'aux3', label: 'Auxiliary timer 3' },
-              { value: 'secondary', label: 'Secondary' },
-              { value: 'null', label: 'None' }, // allow the user to clear the secondary source
-            ]}
-          />
-          <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
-        </label>
+        <>
+          <label>
+            Text (leave empty for no change)
+            <TemplateInput
+              {...register(`outputs.${index}.text`)}
+              value={watch(`outputs.${index}.text`) ?? ''}
+              fluid
+              placeholder='eg: Next up: keynote'
+            />
+            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
+          </label>
+          <label>
+            Timer secondary source
+            <Select<SecondarySource | 'no-change' | 'null' | null>
+              onValueChange={(value) => {
+                // null -> no selection
+                if (value === null) return;
+                // no-change -> leave the current secondary source untouched
+                if (value === 'no-change') {
+                  setValue(`outputs.${index}.secondarySource`, undefined, { shouldDirty: true });
+                  return;
+                }
+                // 'null' -> clear the secondary source
+                if (value === 'null') {
+                  setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
+                  return;
+                }
+                setValue(`outputs.${index}.secondarySource`, value, { shouldDirty: true });
+              }}
+              value={watch(`outputs.${index}.secondarySource`) ?? 'no-change'}
+              options={[
+                { value: 'no-change', label: 'No change' },
+                { value: 'aux1', label: 'Auxiliary timer 1' },
+                { value: 'aux2', label: 'Auxiliary timer 2' },
+                { value: 'aux3', label: 'Auxiliary timer 3' },
+                { value: 'secondary', label: 'Secondary' },
+                { value: 'null', label: 'None' }, // allow the user to clear the secondary source
+              ]}
+            />
+            <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
+          </label>
+        </>
      )}

      <div className={style.test}>{children}</div>
@@ -79,7 +79,7 @@ export default function TriggersList(props: TriggersListProps) {
          <tbody>
            {!showForm && triggers.length === 0 && (
              <Panel.TableEmpty
-                label='Create an automation to attach triggers to'
+                label='Create a trigger to run an automation'
                handleClick={canAdd ? () => setShowForm(true) : undefined}
              />
            )}
@@ -1,29 +1,67 @@
-.wrapper {
+.inputShell {
  position: relative;
 }

-.suggestions {
-  background: $gray-1250;
-  color: $ui-white;
-
-  position: absolute;
-  top: 100%;
-  left: 0;
+.fluid {
  width: 100%;
-  margin: 0;
-  z-index: $zindex-floating;
-  padding-block: 0.25rem;
+}

-  max-height: 200px;
-  overflow-y: auto;
+.input {
+  padding-right: 2rem;
+}
+
+.expandButton {
+  position: absolute;
+  top: 50%;
+  right: 0.25rem;
+  transform: translateY(-50%);
+}
+
+.positioner {
+  outline: 0;
+}
+
+.popup {
+  box-sizing: border-box;
+  min-width: var(--anchor-width);
+  max-width: var(--available-width);
+  border: 1px solid $gray-1000;
+  border-radius: $component-border-radius-md;
+  background: $gray-1250;
  color: $label-gray;
+}

-  li {
-    padding: 0.25rem;
-  }
+.list {
+  box-sizing: border-box;
+  max-height: min(20rem, var(--available-height));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-block: 0.25rem;
+  outline: 0;
+}

-  li:hover {
+.item {
+  box-sizing: border-box;
+  padding: 0.25rem 0.5rem;
+  outline: 0;
+  cursor: default;
+  user-select: none;
+  overflow-wrap: anywhere;
+
+  &[data-highlighted] {
    color: $ui-white;
    background: $blue-700;
  }
 }
+
+.expandedEditor {
+  min-height: min(18rem, 45vh);
+  font-family: monospace;
+  line-height: 1.4;
+}
+
+.footerHint {
+  margin-right: auto;
+  color: $label-gray;
+  font-size: calc(1rem - 2px);
+}
@@ -1,69 +1,258 @@
-import { mergeRefs, useClickOutside } from '@mantine/hooks';
-import { forwardRef, useMemo, useState } from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import type { ChangeEvent, ReactNode, Ref } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { IoExpandOutline } from 'react-icons/io5';

-import Input, { type InputProps } from '../../../../../common/components/input/input/Input';
+import Button from '../../../../../common/components/buttons/Button';
+import IconButton from '../../../../../common/components/buttons/IconButton';
+import { type InputProps } from '../../../../../common/components/input/input/Input';
+import Textarea from '../../../../../common/components/input/textarea/Textarea';
+import Modal from '../../../../../common/components/modal/Modal';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
-import { makeAutoCompleteList, matchRemaining, selectFromLastTemplate } from './templateInput.utils';
+import { cx } from '../../../../../common/utils/styleUtils';
+import { makeAutoCompleteList } from './templateInput.utils';
+import { useTemplateAutocomplete } from './useTemplateAutocomplete';

+import inputStyle from '../../../../../common/components/input/input/Input.module.scss';
 import style from './TemplateInput.module.scss';

-interface TemplateInputProps extends InputProps {}
+interface TemplateInputProps extends Omit<InputProps, 'value'> {
+  ref?: Ref<HTMLInputElement>;
+  value?: string;
+}

-const TemplateInput = forwardRef(function TemplateInput(props: TemplateInputProps, ref) {
-  const { value, onChange, ...rest } = props;
+interface TemplateEditorModalProps {
+  autocompleteList: string[];
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (value: string) => void;
+  value: string;
+}
+
+type TemplateAutocompleteState = ReturnType<typeof useTemplateAutocomplete<HTMLInputElement>>;
+
+interface TemplateAutocompleteRootProps {
+  autocomplete: TemplateAutocompleteState;
+  children: ReactNode;
+  value: string;
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+function emitInputChange(name: string | undefined, value: string, onChange: InputProps['onChange']) {
+  onChange?.({
+    target: { name, value },
+    currentTarget: { name, value },
+  } as ChangeEvent<HTMLInputElement>);
+}
+
+export default function TemplateInput({
+  className,
+  disabled,
+  fluid,
+  height = 'medium',
+  onChange,
+  readOnly,
+  ref,
+  value,
+  variant = 'subtle',
+  ...rest
+}: TemplateInputProps) {
  const { data } = useCustomFields();
-  const localRef = useClickOutside(() => setShowSuggestions(false));
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [inputValue, setInputValue] = useState(value || '');
+  const [isExpanded, setIsExpanded] = useState(false);

  const autocompleteList = useMemo(() => {
    return makeAutoCompleteList(data);
  }, [data]);

-  const [inputValue, setInputValue] = useState(value || '');
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
+  const updateInputValue = useCallback(
+    (nextValue: string) => {
+      setInputValue(nextValue);
+      emitInputChange(rest.name, nextValue, onChange);
+    },
+    [onChange, rest.name],
+  );

-  const updateSuggestions = (value: string) => {
-    const template = selectFromLastTemplate(value);
-    return autocompleteList.filter((suggestion) => suggestion.startsWith(template));
+  const autocomplete = useTemplateAutocomplete(inputValue, autocompleteList, inputRef, updateInputValue);
+  const { setCursorForValue } = autocomplete;
+
+  // Keep the local autocomplete input in sync when react-hook-form resets or swaps field-array values.
+  useEffect(() => {
+    const nextValue = value || '';
+    setInputValue(nextValue);
+    setCursorForValue(nextValue, nextValue.length);
+  }, [setCursorForValue, value]);
+
+  const setInputRef = useCallback(
+    (element: HTMLInputElement | null) => {
+      inputRef.current = element;
+      assignRef(ref, element);
+    },
+    [ref],
+  );
+
+  const openExpandedEditor = () => {
+    autocomplete.setShowSuggestions(false);
+    setIsExpanded(true);
  };

-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
-
-    if (event.target.value.endsWith('{')) {
-      setShowSuggestions(true);
-      setSuggestions(updateSuggestions(event.target.value));
-    } else if (event.target.value === '' || event.target.value.endsWith('}}')) {
-      setShowSuggestions(false);
-    } else if (showSuggestions) {
-      setSuggestions(updateSuggestions(event.target.value));
-    }
-
-    onChange?.(event);
+  const closeExpandedEditor = () => {
+    setIsExpanded(false);
  };

-  const handleSuggestion = (value: string) => {
-    setInputValue((prev) => {
-      const remaining = matchRemaining(prev as string, value);
-      return prev + remaining;
-    });
-    setShowSuggestions(false);
+  const saveExpandedEditor = (nextValue: string) => {
+    updateInputValue(nextValue);
+    autocomplete.setCursorForValue(nextValue, nextValue.length);
+    setIsExpanded(false);
  };

  return (
-    <div className={style.wrapper} ref={mergeRefs(localRef, ref)}>
-      <Input value={inputValue} {...rest} onChange={handleInputChange} fluid />
-      {showSuggestions && suggestions.length > 0 && (
-        <ul className={style.suggestions}>
-          {suggestions.map((suggestion) => (
-            <li key={suggestion} onClick={() => handleSuggestion(suggestion)}>
-              {suggestion}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
+    <>
+      <TemplateAutocompleteRoot autocomplete={autocomplete} value={inputValue}>
+        <div className={cx([style.inputShell, fluid && style.fluid])}>
+          <BaseAutocomplete.Input
+            ref={setInputRef}
+            className={cx([
+              inputStyle.input,
+              inputStyle[variant],
+              inputStyle[height],
+              fluid && inputStyle.fluid,
+              style.input,
+              className,
+            ])}
+            {...rest}
+            disabled={disabled}
+            onClick={autocomplete.updateCursor}
+            onFocus={autocomplete.updateCursor}
+            onKeyUp={autocomplete.updateCursor}
+            onSelect={autocomplete.updateCursor}
+            readOnly={readOnly}
+          />
+          <IconButton
+            aria-label='Expand template editor'
+            className={style.expandButton}
+            disabled={disabled || readOnly}
+            onClick={openExpandedEditor}
+            size='small'
+            title='Expand template editor'
+            variant='ghosted-white'
+          >
+            <IoExpandOutline />
+          </IconButton>
+        </div>
+      </TemplateAutocompleteRoot>
+      <TemplateEditorModal
+        autocompleteList={autocompleteList}
+        isOpen={isExpanded}
+        onClose={closeExpandedEditor}
+        onSave={saveExpandedEditor}
+        value={inputValue}
+      />
+    </>
  );
-});
+}

-export default TemplateInput;
+function TemplateAutocompleteRoot({ autocomplete, children, value }: TemplateAutocompleteRootProps) {
+  return (
+    <BaseAutocomplete.Root
+      items={autocomplete.suggestions}
+      autoHighlight
+      highlightItemOnHover
+      mode='none'
+      open={autocomplete.open}
+      value={value}
+      onOpenChange={autocomplete.setShowSuggestions}
+      onValueChange={autocomplete.handleValueChange}
+    >
+      {children}
+      <TemplateSuggestionPopup />
+    </BaseAutocomplete.Root>
+  );
+}
+
+function TemplateEditorModal({ autocompleteList, isOpen, onClose, onSave, value }: TemplateEditorModalProps) {
+  const expandedInputRef = useRef<HTMLTextAreaElement | null>(null);
+  const [draftValue, setDraftValue] = useState(value);
+  const autocomplete = useTemplateAutocomplete(draftValue, autocompleteList, expandedInputRef, setDraftValue);
+  const { setShowSuggestions } = autocomplete;
+
+  // Reset the draft whenever the modal opens so cancel never leaks unsaved changes.
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    setDraftValue(value);
+    setShowSuggestions(false);
+  }, [isOpen, setShowSuggestions, value]);
+
+  const handleClose = () => {
+    setShowSuggestions(false);
+    onClose();
+  };
+
+  const handleSave = () => {
+    setShowSuggestions(false);
+    onSave(draftValue);
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      showBackdrop
+      showCloseButton
+      title='Edit template'
+      bodyElements={
+        <TemplateAutocompleteRoot autocomplete={autocomplete} value={draftValue}>
+          <BaseAutocomplete.Input
+            autoFocus
+            className={style.expandedEditor}
+            onClick={autocomplete.updateCursor}
+            onFocus={autocomplete.updateCursor}
+            onKeyUp={autocomplete.updateCursor}
+            onSelect={autocomplete.updateCursor}
+            render={<Textarea ref={expandedInputRef} fluid resize='none' rows={8} />}
+          />
+        </TemplateAutocompleteRoot>
+      }
+      footerElements={
+        <>
+          <span className={style.footerHint}>Start a template with {'{{'} to see autocomplete.</span>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleSave} variant='primary'>
+            Save
+          </Button>
+        </>
+      }
+    />
+  );
+}
+
+function TemplateSuggestionPopup() {
+  return (
+    <BaseAutocomplete.Portal>
+      <BaseAutocomplete.Positioner side='bottom' align='start' className={style.positioner}>
+        <BaseAutocomplete.Popup className={style.popup}>
+          <BaseAutocomplete.List className={style.list}>
+            <BaseAutocomplete.Collection>
+              {(suggestion: string) => (
+                <BaseAutocomplete.Item key={suggestion} value={suggestion} className={style.item}>
+                  {suggestion}
+                </BaseAutocomplete.Item>
+              )}
+            </BaseAutocomplete.Collection>
+          </BaseAutocomplete.List>
+        </BaseAutocomplete.Popup>
+      </BaseAutocomplete.Positioner>
+    </BaseAutocomplete.Portal>
+  );
+}
@@ -1,4 +1,4 @@
-import { matchRemaining } from '../templateInput.utils';
+import { completeTemplateAtCursor, matchRemaining, selectActiveTemplate } from '../templateInput.utils';

 describe('matchRemaining()', () => {
  it('should return a partial string needed for autocomplete', () => {
@@ -15,3 +15,54 @@ describe('matchRemaining()', () => {
    expect(matchRemaining('test', 'test')).toBe('');
  });
 });
+
+describe('selectActiveTemplate()', () => {
+  it('returns the last unclosed template fragment', () => {
+    expect(selectActiveTemplate('send {{event')).toBe('{{event');
+    expect(selectActiveTemplate('send {{eventNow.title}} and {{event')).toBe('{{event');
+  });
+
+  it('ignores single braces and closed templates', () => {
+    expect(selectActiveTemplate('send {')).toBe('');
+    expect(selectActiveTemplate('send {{eventNow.title}}')).toBe('');
+  });
+
+  it('only considers templates before the cursor', () => {
+    expect(selectActiveTemplate('send {{event}} then {{timer', 14)).toBe('');
+    expect(selectActiveTemplate('send {{event}} then {{timer', 27)).toBe('{{timer');
+  });
+
+  it('selects a partial template when the cursor is inside a completed template', () => {
+    expect(selectActiveTemplate('send {{timer.current}} after', 12)).toBe('{{timer');
+  });
+});
+
+describe('completeTemplateAtCursor()', () => {
+  it('completes the active template before the cursor', () => {
+    expect(completeTemplateAtCursor('send {{timer after', '{{timer.current}}', 12)).toEqual({
+      value: 'send {{timer.current}} after',
+      cursorIndex: 22,
+    });
+  });
+
+  it('preserves text before and after the cursor', () => {
+    expect(completeTemplateAtCursor('before {{event after', '{{eventNow.title}}', 14)).toEqual({
+      value: 'before {{eventNow.title}} after',
+      cursorIndex: 25,
+    });
+  });
+
+  it('preserves a following template when completing between templates', () => {
+    expect(completeTemplateAtCursor('{{clock}} and {{timer then {{eventNow.title}}', '{{timer.current}}', 21)).toEqual({
+      value: '{{clock}} and {{timer.current}} then {{eventNow.title}}',
+      cursorIndex: 31,
+    });
+  });
+
+  it('replaces the whole template when the cursor is inside a completed template', () => {
+    expect(completeTemplateAtCursor('before {{timer.current}} after', '{{timer.duration}}', 15)).toEqual({
+      value: 'before {{timer.duration}} after',
+      cursorIndex: 25,
+    });
+  });
+});
@@ -54,6 +54,16 @@ const eventStaticPropertiesNext = [
  '{{eventNext.delay}}',
 ];

+const groupStaticPropertiesNow = [
+  '{{groupNow.id}}',
+  '{{groupNow.title}}',
+  '{{groupNow.note}}',
+  '{{groupNow.colour}}',
+  '{{groupNow.timeStart}}',
+  '{{groupNow.timeEnd}}',
+  '{{groupNow.duration}}',
+];
+
 const staticAuxProperties = (index: 1 | 2 | 3) => [
  `{{auxtimer${index}.current}}`,
  `{{auxtimer${index}.duration}}`,
@@ -75,12 +85,19 @@ export function makeAutoCompleteList(customFields: CustomFields): string[] {
    ...Object.entries(customFields).map(([key]) => `{{eventNow.custom.${key}}}`),
    ...eventStaticPropertiesNext,
    ...Object.entries(customFields).map(([key]) => `{{eventNext.custom.${key}}}`),
+    ...groupStaticPropertiesNow,
+    ...Object.entries(customFields).map(([key]) => `{{groupNow.custom.${key}}}`),
    ...staticAuxProperties(1),
    ...staticAuxProperties(2),
    ...staticAuxProperties(3),
  ];
 }

+interface TemplateCompletion {
+  cursorIndex: number;
+  value: string;
+}
+
 /**
 * Returns the partial string b needed to autocomplete string a
 * @example matchRemaining('te', 'test') -> 'st'
@@ -111,13 +128,54 @@ export function matchRemaining(a: string, b: string) {
  return '';
 }

-/**
- * Selects the last starting template in a string
- */
-export function selectFromLastTemplate(text: string) {
-  const lastBraceIndex = text.lastIndexOf('{{');
-  if (lastBraceIndex !== -1) {
-    return text.slice(lastBraceIndex);
+function getActiveTemplateRange(text: string, cursorIndex = text.length) {
+  const textBeforeCursor = text.slice(0, cursorIndex);
+  const start = textBeforeCursor.lastIndexOf('{{');
+  if (start === -1) {
+    return null;
  }
-  return '';
+
+  const closeBeforeCursor = textBeforeCursor.lastIndexOf('}}');
+  if (closeBeforeCursor > start) {
+    return null;
+  }
+
+  const closeAfterStart = text.indexOf('}}', start);
+  const nextStartAfterCursor = text.indexOf('{{', cursorIndex);
+  const closesBeforeNextTemplate = nextStartAfterCursor === -1 || closeAfterStart < nextStartAfterCursor;
+  const end = closeAfterStart !== -1 && closesBeforeNextTemplate ? closeAfterStart + 2 : cursorIndex;
+
+  return {
+    end,
+    start,
+    template: text.slice(start, cursorIndex),
+  };
+}
+
+/**
+ * Selects the last unclosed starting template before the cursor.
+ */
+export function selectActiveTemplate(text: string, cursorIndex = text.length) {
+  return getActiveTemplateRange(text, cursorIndex)?.template ?? '';
+}
+
+/**
+ * Replaces the active template fragment before the cursor with the selected suggestion.
+ */
+export function completeTemplateAtCursor(
+  text: string,
+  suggestion: string,
+  cursorIndex = text.length,
+): TemplateCompletion {
+  const activeTemplateRange = getActiveTemplateRange(text, cursorIndex);
+  if (!activeTemplateRange) {
+    const value = text + matchRemaining(text, suggestion);
+    return { value, cursorIndex: value.length };
+  }
+
+  const value = `${text.slice(0, activeTemplateRange.start)}${suggestion}${text.slice(activeTemplateRange.end)}`;
+  return {
+    value,
+    cursorIndex: activeTemplateRange.start + suggestion.length,
+  };
 }
@@ -0,0 +1,72 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { useCallback, useMemo, useState, type RefObject } from 'react';
+
+import { completeTemplateAtCursor, selectActiveTemplate } from './templateInput.utils';
+
+type TemplateElement = HTMLInputElement | HTMLTextAreaElement;
+
+function getCursorIndex(element: TemplateElement | null, fallback: string) {
+  return element?.selectionStart ?? fallback.length;
+}
+
+function focusCursor(element: TemplateElement | null, cursorIndex: number) {
+  requestAnimationFrame(() => {
+    element?.focus();
+    element?.setSelectionRange(cursorIndex, cursorIndex);
+  });
+}
+
+export function useTemplateAutocomplete<T extends TemplateElement>(
+  value: string,
+  autocompleteList: string[],
+  elementRef: RefObject<T | null>,
+  onValueChange: (value: string) => void,
+) {
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [cursor, setCursor] = useState(value.length);
+
+  const activeTemplate = selectActiveTemplate(value, cursor);
+  const suggestions = useMemo(() => {
+    if (!activeTemplate) {
+      return [];
+    }
+    return autocompleteList.filter((suggestion) => suggestion.startsWith(activeTemplate));
+  }, [activeTemplate, autocompleteList]);
+
+  const setCursorForValue = useCallback((nextValue: string, cursorIndex: number) => {
+    setCursor(cursorIndex);
+    setShowSuggestions(Boolean(selectActiveTemplate(nextValue, cursorIndex)));
+  }, []);
+
+  const updateCursor = useCallback(() => {
+    const cursorIndex = getCursorIndex(elementRef.current, value);
+    setCursorForValue(value, cursorIndex);
+  }, [elementRef, setCursorForValue, value]);
+
+  const handleValueChange = useCallback(
+    (nextValue: string, eventDetails: BaseAutocomplete.Root.ChangeEventDetails) => {
+      if (eventDetails.reason === 'item-press') {
+        eventDetails.cancel();
+        const completed = completeTemplateAtCursor(value, nextValue, cursor);
+        setCursorForValue(completed.value, completed.cursorIndex);
+        onValueChange(completed.value);
+        focusCursor(elementRef.current, completed.cursorIndex);
+        return;
+      }
+
+      const cursorIndex = getCursorIndex(elementRef.current, nextValue);
+      setCursorForValue(nextValue, cursorIndex);
+      onValueChange(nextValue);
+    },
+    [cursor, elementRef, onValueChange, setCursorForValue, value],
+  );
+
+  return {
+    handleValueChange,
+    open: showSuggestions && suggestions.length > 0,
+    setCursorForValue,
+    setShowSuggestions,
+    suggestions,
+    updateCursor,
+  };
+}
@@ -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));
@@ -1,4 +1,6 @@
 import type {
+  ImportedFields,
+  RundownImportMode,
  SpreadsheetPreviewResponse,
  SpreadsheetWorksheetMetadata,
  SpreadsheetWorksheetOptions,
@@ -6,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,
@@ -22,7 +25,7 @@ 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 { validateExcelImport } from '../../../../../common/utils/uploadUtils';
+import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
 import SheetImportEditor from './sheet-import/SheetImportEditor';
@@ -35,6 +38,7 @@ const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadshee
 type ActiveSource =
  | {
      kind: 'excel';
+      fileName: string;
      worksheetNames: string[];
      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
      closedByUser: boolean;
@@ -53,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 { importRundown } = useSpreadsheetImport();
+  const { applyImport } = useSpreadsheetImport();
+  const navigate = useNavigate();

  const fileInputRef = useRef<HTMLInputElement>(null);

@@ -74,6 +80,7 @@ export default function SourcesPanel() {
      const worksheetOptions = await uploadExcel(fileToUpload);
      setActiveSource({
        kind: 'excel',
+        fileName: fileToUpload.name,
        worksheetNames: worksheetOptions.worksheets,
        initialWorksheetMetadata: worksheetOptions.metadata,
        closedByUser: false,
@@ -97,6 +104,7 @@ export default function SourcesPanel() {
    setHasFile('none');
    setActiveSource(null);
    setError('');
+    setCompletedRundownTitle('');
  };

  const openGSheetFlow = () => {
@@ -119,29 +127,41 @@ export default function SourcesPanel() {
    }
  };

-  const handleFinished = () => {
+  const handleFinished = (rundownTitle: string) => {
    setImportFlow('finished');
    setHasFile('none');
    setActiveSource(null);
    setError('');
+    setCompletedRundownTitle(rundownTitle);
  };

-  const handleApplyImport = async (preview: SpreadsheetPreviewResponse) => {
+  const handleApplyImport = async (
+    preview: SpreadsheetPreviewResponse,
+    mode: RundownImportMode,
+    newRundownTitle: string,
+    providedFields: ImportedFields,
+  ) => {
+    if (mode === 'new') {
+      const title = newRundownTitle.trim() || preview.rundown.title;
+      await applyImport({ mode: 'new', rundown: { ...preview.rundown, title }, customFields: preview.customFields });
+      handleFinished(title);
+      return;
+    }
+
    if (!currentRundown) {
      throw new Error('No current rundown loaded');
    }

-    await importRundown(
-      {
-        [currentRundown.id]: {
-          ...preview.rundown,
-          id: currentRundown.id,
-          title: currentRundown.title,
-        },
-      },
-      preview.customFields,
-    );
-    handleFinished();
+    // override or merge into the current rundown; merge uses providedFields to know which columns
+    // the sheet supplied so matched events keep the rest (e.g. automations)
+    await applyImport({
+      mode,
+      targetRundownId: currentRundown.id,
+      rundown: preview.rundown,
+      customFields: preview.customFields,
+      providedFields,
+    });
+    handleFinished(currentRundown.title);
  };

  const loadWorksheetMetadata = useCallback(
@@ -208,6 +228,13 @@ export default function SourcesPanel() {
    if (activeSource.kind === 'excel') return 'excel';
    return `gsheet:${activeSource.sheetId}`;
  })();
+  // suggested name when importing into a new rundown: the spreadsheet file name (without extension)
+  // for Excel, or the document title for Google Sheets
+  const spreadsheetName = (() => {
+    if (!activeSource) return '';
+    if (activeSource.kind === 'excel') return removeFileExtension(activeSource.fileName);
+    return activeSource.title;
+  })();

  return (
    <Panel.Section>
@@ -267,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 && (
@@ -287,6 +323,7 @@ export default function SourcesPanel() {
          bodyElements={
            <SheetImportEditor
              sourceKey={sourceKey ?? 'spreadsheet'}
+              defaultRundownName={spreadsheetName}
              worksheetNames={activeSource?.worksheetNames ?? []}
              initialMetadata={activeSource?.initialWorksheetMetadata ?? null}
              loadMetadata={loadWorksheetMetadata}
@@ -0,0 +1,55 @@
+import type { RundownImportMode, SpreadsheetPreviewResponse } from 'ontime-types';
+import { isOntimeEvent, isPlayableEvent, Playback } from 'ontime-types';
+import { useEffect, useState } from 'react';
+
+import Button from '../../../../../../common/components/buttons/Button';
+import { usePlayback, useSelectedEventId } from '../../../../../../common/hooks/useSocket';
+
+interface ApplyImportButtonProps {
+  preview: SpreadsheetPreviewResponse | null;
+  mode: RundownImportMode;
+  disabled: boolean;
+  loading: boolean;
+  onApply: () => void;
+}
+
+/**
+ * Apply action for the spreadsheet import.
+ * Subscribes to playback state on its own so playback updates do not re-render the whole editor.
+ * Requires a second click to confirm when applying would stop a running playback.
+ */
+export default function ApplyImportButton({ preview, mode, disabled, loading, onApply }: ApplyImportButtonProps) {
+  const playback = usePlayback();
+  const loadedEventId = useSelectedEventId();
+
+  // the loaded (playing) event loses its playback unless it still exists as a playable event after the import
+  const loadedEntry = loadedEventId ? preview?.rundown.entries[loadedEventId] : undefined;
+  const willLoadedEventBeOverriden = !(
+    loadedEntry !== undefined &&
+    isOntimeEvent(loadedEntry) &&
+    isPlayableEvent(loadedEntry)
+  );
+
+  // applying stops playback when creating a new rundown, or when the playing event does not survive
+  const willStopPlayback = playback !== Playback.Stop && (mode === 'new' || willLoadedEventBeOverriden);
+
+  // two-step confirmation before applying an import that stops playback
+  const [confirmStop, setConfirmStop] = useState(false);
+  useEffect(() => {
+    setConfirmStop(false);
+  }, [mode, preview]);
+
+  const handleClick = () => {
+    if (willStopPlayback && !confirmStop) {
+      setConfirmStop(true);
+      return;
+    }
+    onApply();
+  };
+
+  return (
+    <Button variant='primary' onClick={handleClick} disabled={disabled} loading={loading}>
+      {willStopPlayback && confirmStop ? 'Confirm — stop playback & apply import' : 'Apply import'}
+    </Button>
+  );
+}
@@ -33,6 +33,11 @@
  white-space: nowrap;
 }

+.importModeTrigger {
+  min-width: 12rem;
+  justify-content: space-between;
+}
+
 .addColumnTrigger {
  justify-content: center;
  white-space: nowrap;
@@ -87,6 +92,10 @@
  font-weight: 600;
 }

+.toolbarWarning {
+  color: $orange-400;
+}
+
 .mappingPaneTitle {
  align-self: center;
 }
@@ -1,10 +1,20 @@
-import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
+import type {
+  ImportedFields,
+  RundownImportMode,
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+} from 'ontime-types';
 import type { ImportMap } from 'ontime-utils';
-import { IoArrowUpOutline, IoEye } from 'react-icons/io5';
+import { useMemo } from 'react';
+import { IoArrowUpOutline, IoCheckmark, IoChevronDown, IoEye, IoWarningOutline } from 'react-icons/io5';

 import Button from '../../../../../../common/components/buttons/Button';
+import { DropdownMenu, DropdownMenuOption } from '../../../../../../common/components/dropdown-menu/DropdownMenu';
+import Input from '../../../../../../common/components/input/input/Input';
 import Select from '../../../../../../common/components/select/Select';
 import * as Panel from '../../../../panel-utils/PanelUtils';
+import ApplyImportButton from './ApplyImportButton';
+import { isIdColumnMapped } from './importMapUtils';
 import PreviewTable from './preview/PreviewTable';
 import SheetImportMappingPane from './SheetImportMappingPane';
 import { useSheetImportForm } from './useSheetImportForm';
@@ -13,17 +23,46 @@ import style from './SheetImportEditor.module.scss';

 interface SheetImportEditorProps {
  sourceKey: string;
+  defaultRundownName: string;
  worksheetNames: string[];
  initialMetadata: SpreadsheetWorksheetMetadata | null;
  loadMetadata: (worksheet: string) => Promise<SpreadsheetWorksheetMetadata>;
  previewImport: (importMap: ImportMap) => Promise<SpreadsheetPreviewResponse>;
-  onApply: (preview: SpreadsheetPreviewResponse) => Promise<void>;
+  onApply: (
+    preview: SpreadsheetPreviewResponse,
+    mode: RundownImportMode,
+    newRundownTitle: string,
+    providedFields: ImportedFields,
+  ) => Promise<void>;
  onCancel: () => void;
  onExport?: (importMap: ImportMap) => Promise<void>;
 }

+const importModeOptions: Array<{
+  value: RundownImportMode;
+  label: string;
+  description: string;
+}> = [
+  {
+    value: 'override',
+    label: 'Replace current rundown',
+    description: 'Spreadsheet data completely replaces current rundown',
+  },
+  {
+    value: 'merge',
+    label: 'Merge with current rundown',
+    description: 'Merge entries referencing their IDs, entries not present in spreadsheet rundown are deleted',
+  },
+  {
+    value: 'new',
+    label: 'New rundown',
+    description: 'Create a new rundown to import the data into. Loads the new rundown',
+  },
+];
+
 export default function SheetImportEditor({
  sourceKey,
+  defaultRundownName,
  worksheetNames,
  initialMetadata,
  loadMetadata,
@@ -49,11 +88,16 @@ export default function SheetImportEditor({
    isBusy,
    canPreview,
    displayError,
+    importMode,
+    setImportMode,
+    newRundownTitle,
+    setNewRundownTitle,
    handlePreviewSubmit,
    handleExportSubmit,
    handleApply,
  } = useSheetImportForm({
    sourceKey,
+    defaultRundownName,
    worksheetNames,
    initialMetadata,
    loadMetadata,
@@ -62,6 +106,19 @@ export default function SheetImportEditor({
    onExport,
  });

+  const selectedImportMode = importModeOptions.find((option) => option.value === importMode) ?? importModeOptions[0];
+  const importModeItems = useMemo<DropdownMenuOption[]>(
+    () =>
+      importModeOptions.map((option) => ({
+        type: 'item',
+        label: option.label,
+        description: option.description,
+        icon: importMode === option.value ? IoCheckmark : undefined,
+        onClick: () => setImportMode(option.value),
+      })),
+    [importMode, setImportMode],
+  );
+
  return (
    <Panel.Section as='form' id='spreadsheet-import-workspace' className={style.editor} onSubmit={handlePreviewSubmit}>
      <Panel.InlineElements align='apart' wrap='wrap' className={style.editorToolbar}>
@@ -75,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}>
@@ -93,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>
@@ -107,33 +179,63 @@ export default function SheetImportEditor({
      </div>

      {displayError && <Panel.Error>{displayError}</Panel.Error>}
-      <Panel.InlineElements align='end' wrap='wrap' className={style.editorFooter}>
-        <Button onClick={onCancel} disabled={isBusy}>
-          Cancel
-        </Button>
-        {onExport && (
-          <Button onClick={handleExportSubmit} disabled={!canPreview} loading={state.loading === 'export'}>
-            <IoArrowUpOutline />
-            Export
+      {importMode === 'merge' && !isIdColumnMapped(values) && (
+        <Panel.Description tone='warning'>
+          <IoWarningOutline /> No ID column mapped — merge matches entries by ID, so it will behave like Replace. Export
+          your rundown to a spreadsheet first to keep its IDs.
+        </Panel.Description>
+      )}
+      <Panel.InlineElements align='apart' wrap='wrap' className={style.editorFooter}>
+        <Panel.InlineElements wrap='wrap'>
+          <label className={style.worksheetControl}>
+            <span className={style.worksheetLabel}>Import mode</span>
+            <DropdownMenu
+              render={<Button className={style.importModeTrigger} variant='subtle-white' />}
+              items={importModeItems}
+            >
+              {selectedImportMode.label}
+              <IoChevronDown />
+            </DropdownMenu>
+          </label>
+          {importMode === 'new' && (
+            <label className={style.worksheetControl}>
+              <span className={style.worksheetLabel}>New rundown name</span>
+              <Input
+                value={newRundownTitle}
+                onChange={(event) => setNewRundownTitle(event.target.value)}
+                placeholder={state.preview?.rundown.title || 'Imported rundown'}
+                aria-label='New rundown name'
+              />
+            </label>
+          )}
+        </Panel.InlineElements>
+        <Panel.InlineElements wrap='wrap'>
+          <Button onClick={onCancel} disabled={isBusy}>
+            Cancel
          </Button>
-        )}
-        <Button
-          variant={state.preview ? undefined : 'primary'}
-          onClick={handlePreviewSubmit}
-          disabled={!canPreview}
-          loading={state.loading === 'preview'}
-        >
-          <IoEye />
-          Preview import
-        </Button>
-        <Button
-          variant='primary'
-          onClick={handleApply}
-          disabled={!state.preview || isBusy}
-          loading={state.loading === 'apply'}
-        >
-          Apply import
-        </Button>
+          {onExport && (
+            <Button onClick={handleExportSubmit} disabled={!canPreview} loading={state.loading === 'export'}>
+              <IoArrowUpOutline />
+              Export
+            </Button>
+          )}
+          <Button
+            variant={state.preview ? undefined : 'primary'}
+            onClick={handlePreviewSubmit}
+            disabled={!canPreview}
+            loading={state.loading === 'preview'}
+          >
+            <IoEye />
+            Preview import
+          </Button>
+          <ApplyImportButton
+            preview={state.preview}
+            mode={importMode}
+            disabled={!state.preview || isBusy}
+            loading={state.loading === 'apply'}
+            onApply={handleApply}
+          />
+        </Panel.InlineElements>
      </Panel.InlineElements>
    </Panel.Section>
  );
@@ -1,15 +1,21 @@
-import { describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';

 import {
  builtInFieldDefs,
  convertToImportMap,
  createDefaultFormValues,
+  defaultImportMode,
  getImportWarnings,
+  getPersistedImportMode,
+  getProvidedImportFields,
  getResolvedCustomFields,
+  isIdColumnMapped,
+  persistImportMode,
 } from '../importMapUtils';

 const cueIndex = builtInFieldDefs.findIndex((field) => field.label === 'Cue');
 const titleIndex = builtInFieldDefs.findIndex((field) => field.label === 'Title');
+const idIndex = builtInFieldDefs.findIndex((field) => field.importKey === 'id');

 describe('getImportWarnings()', () => {
  it('warns when two mappings target the same spreadsheet column', () => {
@@ -128,3 +134,64 @@ describe('convertToImportMap()', () => {
    });
  });
 });
+
+describe('getProvidedImportFields()', () => {
+  it('reports the mapped built-in and custom fields the sheet supplies', () => {
+    const values = createDefaultFormValues();
+    values.builtIn[titleIndex] = { header: 'title', enabled: true };
+    values.builtIn[cueIndex] = { header: '', enabled: false };
+    values.custom = [{ ontimeName: 'ignored', importName: 'FOH/Monitor' }];
+
+    const provided = getProvidedImportFields(convertToImportMap(values));
+
+    // enabled built-in mappings are reported as event fields, disabled ones are not
+    expect(provided.event).toContain('title');
+    expect(provided.event).not.toContain('cue');
+    // the id column is only used for matching, never overwritten
+    expect(provided.event).not.toContain('id');
+    // custom fields are reported symmetrically by their resolved Ontime name
+    expect(provided.custom).toStrictEqual(['FOH Monitor']);
+  });
+});
+
+describe('isIdColumnMapped()', () => {
+  it('is true when the ID field is enabled with a header', () => {
+    // the default form maps the ID column
+    expect(isIdColumnMapped(createDefaultFormValues())).toBe(true);
+  });
+
+  it('is false when the ID field is disabled', () => {
+    const values = createDefaultFormValues();
+    values.builtIn[idIndex] = { header: 'id', enabled: false };
+    expect(isIdColumnMapped(values)).toBe(false);
+  });
+
+  it('is false when the ID field header is blank', () => {
+    const values = createDefaultFormValues();
+    values.builtIn[idIndex] = { header: '   ', enabled: true };
+    expect(isIdColumnMapped(values)).toBe(false);
+  });
+});
+
+describe('import mode persistence', () => {
+  const sourceKey = 'excel-test';
+
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('defaults to override when nothing is persisted', () => {
+    expect(getPersistedImportMode(sourceKey)).toBe('override');
+    expect(defaultImportMode).toBe('override');
+  });
+
+  it('round-trips a persisted value', () => {
+    persistImportMode(sourceKey, 'merge');
+    expect(getPersistedImportMode(sourceKey)).toBe('merge');
+  });
+
+  it('falls back to the default when the persisted value is invalid', () => {
+    persistImportMode(sourceKey, 'nonsense' as never);
+    expect(getPersistedImportMode(sourceKey)).toBe('override');
+  });
+});
@@ -1,3 +1,4 @@
+import type { ImportedFields, RundownImportMode } from 'ontime-types';
 import type { ImportMap } from 'ontime-utils';

 import { makeStageKey } from '../../../../../../common/utils/localStorage';
@@ -49,6 +50,16 @@ export function createDefaultFormValues(): ImportFormValues {
  };
 }

+/**
+ * Whether the mapping supplies an ID column. Merge matches entries by ID, so without one every
+ * imported entry gets a fresh id and nothing can reconcile with the current rundown.
+ */
+export function isIdColumnMapped(values: ImportFormValues): boolean {
+  const idIndex = builtInFieldDefs.findIndex((def) => def.importKey === 'id');
+  const field = values.builtIn[idIndex];
+  return Boolean(field?.enabled && field.header.trim());
+}
+
 function sanitiseOntimeCustomFieldLabel(importName: string): string {
  // Replace punctuation with spaces, then collapse repeated whitespace into single spaces.
  const sanitised = importName
@@ -81,6 +92,24 @@ export function getResolvedCustomFields(customFields: ImportFormValues['custom']
  });
 }

+/**
+ * Returns the fields the import map supplies — the complete description of what the incoming data
+ * provides, for both built-in and custom fields. A merge uses this to patch exactly these fields
+ * onto a matched event and keep everything else (e.g. automations) untouched.
+ * Import-map keys are OntimeEvent field names; `worksheet`/`custom` are meta and `id` is only used
+ * for matching, not overwritten.
+ */
+export function getProvidedImportFields(importMap: ImportMap): ImportedFields {
+  const event: string[] = [];
+  for (const [key, value] of Object.entries(importMap)) {
+    if (key === 'worksheet' || key === 'custom' || key === 'id') continue;
+    if (typeof value === 'string' && value.trim() !== '') {
+      event.push(key);
+    }
+  }
+  return { event, custom: Object.keys(importMap.custom) };
+}
+
 export function convertToImportMap(values: ImportFormValues): ImportMap {
  const custom = getResolvedCustomFields(values.custom).reduce<Record<string, string>>(
    (accumulator, { ontimeName, importName }) => {
@@ -130,12 +159,12 @@ function isPersistedFormValues(obj: unknown): obj is ImportFormValues {
 export function getPersistedImportState(sourceKey: string): { values: ImportFormValues; isPersisted: boolean } {
  const storageKey = getImportMapKey(sourceKey);
  try {
-    const raw = localStorage.getItem(storageKey);
-    if (!raw) {
+    const persistedData = localStorage.getItem(storageKey);
+    if (!persistedData) {
      return { values: createDefaultFormValues(), isPersisted: false };
    }

-    const parsed: unknown = JSON.parse(raw);
+    const parsed: unknown = JSON.parse(persistedData);
    if (isPersistedFormValues(parsed)) {
      return { values: parsed, isPersisted: true };
    }
@@ -150,6 +179,32 @@ export function getPersistedImportState(sourceKey: string): { values: ImportForm
  }
 }

+/**
+ * The import mode (new / merge / override) is persisted separately from the field mapping
+ * so the mapping schema guard stays untouched.
+ */
+
+/** Default import mode: replace matched elements in the current rundown */
+export const defaultImportMode: RundownImportMode = 'override';
+
+function getImportModeKey(sourceKey: string) {
+  return makeStageKey(`import-mode:${sourceKey}`);
+}
+
+/** Persists the import mode for a given source */
+export function persistImportMode(sourceKey: string, mode: RundownImportMode) {
+  localStorage.setItem(getImportModeKey(sourceKey), mode);
+}
+
+/** Reads the persisted import mode for a source, falling back to the default when absent or invalid */
+export function getPersistedImportMode(sourceKey: string): RundownImportMode {
+  const persisted = localStorage.getItem(getImportModeKey(sourceKey));
+  if (persisted === 'new' || persisted === 'merge' || persisted === 'override') {
+    return persisted;
+  }
+  return defaultImportMode;
+}
+
 /**
 * Validates import mappings and generates warnings for duplicate or missing spreadsheet columns.
 */
@@ -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;
 }
@@ -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>
          );
        })}
@@ -1,7 +1,13 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import type {
+  ImportedFields,
+  RundownImportMode,
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+} from 'ontime-types';
+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';

 import { maybeAxiosError } from '../../../../../../common/api/utils';
@@ -11,8 +17,11 @@ import {
  builtInFieldDefs,
  convertToImportMap,
  getImportWarnings,
+  getPersistedImportMode,
  getPersistedImportState,
+  getProvidedImportFields,
  getResolvedCustomFields,
+  persistImportMode,
  persistImportState,
 } from './importMapUtils';
 import { deriveHeaderOptionsState } from './spreadsheetImportUtils';
@@ -24,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' };

@@ -32,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 {
@@ -49,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 };
    }
@@ -100,16 +111,23 @@ function buildColumnLabels(values: ImportFormValues): string[] {

 interface UseSheetImportFormProps {
  sourceKey: string;
+  defaultRundownName: string;
  worksheetNames: string[];
  initialMetadata: SpreadsheetWorksheetMetadata | null;
  loadMetadata: (worksheet: string) => Promise<SpreadsheetWorksheetMetadata>;
  previewImport: (importMap: ReturnType<typeof convertToImportMap>) => Promise<SpreadsheetPreviewResponse>;
-  onApply: (preview: SpreadsheetPreviewResponse) => Promise<void>;
+  onApply: (
+    preview: SpreadsheetPreviewResponse,
+    mode: RundownImportMode,
+    newRundownTitle: string,
+    providedFields: ImportedFields,
+  ) => Promise<void>;
  onExport?: (importMap: ReturnType<typeof convertToImportMap>) => Promise<void>;
 }

 export function useSheetImportForm({
  sourceKey,
+  defaultRundownName,
  worksheetNames,
  initialMetadata,
  loadMetadata,
@@ -170,6 +188,8 @@ export function useSheetImportForm({
  const columnLabels = buildColumnLabels(values);

  const [state, dispatch] = useReducer(importReducer, initialImportState);
+  const [importMode, setImportMode] = useState<RundownImportMode>(() => getPersistedImportMode(sourceKey));
+  const [newRundownTitle, setNewRundownTitle] = useState(defaultRundownName);
  const warnings = getImportWarnings(values, headers);
  const warningCount = Object.values(warnings).filter(Boolean).length;
  const previewRef = useRef<SpreadsheetPreviewResponse | null>(null);
@@ -182,6 +202,12 @@ export function useSheetImportForm({
    dispatch({ type: 'reset' });
  }, [initialFormValues, reset]);

+  // Update import mode and rundown name if the source changes
+  useEffect(() => {
+    setImportMode(getPersistedImportMode(sourceKey));
+    setNewRundownTitle(defaultRundownName);
+  }, [sourceKey, defaultRundownName]);
+
  // Keep the worksheet selection valid if the available worksheets change underneath the form.
  useEffect(() => {
    if (worksheetNames.length === 0) return;
@@ -198,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]);
@@ -241,13 +267,15 @@ export function useSheetImportForm({

    try {
      dispatch({ type: 'startApply' });
-      await onApply(state.preview);
+      const providedFields = getProvidedImportFields(convertToImportMap(getValues()));
+      await onApply(state.preview, importMode, newRundownTitle, providedFields);
      persistImportState(sourceKey, getValues());
+      persistImportMode(sourceKey, importMode);
      dispatch({ type: 'applySuccess' });
    } catch (error) {
      dispatch({ type: 'failure', error: maybeAxiosError(error) });
    }
-  }, [getValues, onApply, sourceKey, state.preview]);
+  }, [getValues, importMode, newRundownTitle, onApply, sourceKey, state.preview]);

  const handleExport = useCallback(
    async (formValues: ImportFormValues) => {
@@ -272,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 {
@@ -300,6 +350,10 @@ export function useSheetImportForm({
    isBusy,
    canPreview,
    displayError,
+    importMode,
+    setImportMode,
+    newRundownTitle,
+    setNewRundownTitle,
    handlePreviewSubmit: handleSubmit(handlePreview),
    handleExportSubmit: handleSubmit(handleExport),
    handleApply,
@@ -1,30 +1,17 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { CustomFields, ProjectRundowns } from 'ontime-types';
+import { RundownImportPayload } from 'ontime-types';
 import { useCallback } from 'react';

-import { CUSTOM_FIELDS, RUNDOWN } from '../../../../../common/api/constants';
-import { patchData } from '../../../../../common/api/db';
+import { importRundownWithOptions } from '../../../../../common/api/rundown';

 export default function useSpreadsheetImport() {
-  const queryClient = useQueryClient();
-
-  /** applies rundown and customFields to current project */
-  const importRundown = useCallback(
-    async (rundowns: ProjectRundowns, customFields: CustomFields) => {
-      await patchData({ rundowns, customFields });
-      // we are unable to optimistically set the rundown since we need
-      // it to be normalised
-      await queryClient.invalidateQueries({
-        queryKey: RUNDOWN,
-      });
-      await queryClient.invalidateQueries({
-        queryKey: CUSTOM_FIELDS,
-      });
-    },
-    [queryClient],
-  );
+  /** applies a spreadsheet import: override or merge into the current rundown, or create a new one */
+  const applyImport = useCallback(async (payload: RundownImportPayload) => {
+    // the backend broadcasts a refetch once the rundown is parsed and applied, so the caches update
+    // through that single path rather than racing it with an optimistic write from here
+    await importRundownWithOptions(payload);
+  }, []);

  return {
-    importRundown,
+    applyImport,
  };
 }
@@ -73,6 +73,10 @@
  margin-right: 0.25rem;
 }

+.tagOvertime {
+  color: $playback-over;
+}
+
 .time {
  color: $section-white;
  font-size: $text-body-size;
@@ -1,12 +1,13 @@
 import { MaybeNumber, Playback, TimerPhase } from 'ontime-types';
-import { dayInMs, millisToString } from 'ontime-utils';
+import { millisToString } from 'ontime-utils';
 import { PropsWithChildren } from 'react';

 import AppLink from '../../../../common/components/link/app-link/AppLink';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import useReport from '../../../../common/hooks-query/useReport';
-import { useTimer } from '../../../../common/hooks/useSocket';
-import { formatDuration } from '../../../../common/utils/time';
+import { useTimerProgress } from '../../../../common/hooks/useSocket';
+import { cx } from '../../../../common/utils/styleUtils';
+import { formatDuration, normaliseWallClock } from '../../../../common/utils/time';
 import TimerDisplay from '../timer-display/TimerDisplay';

 import style from './PlaybackTimer.module.scss';
@@ -24,15 +25,14 @@ function resolveAddedTimeLabel(addedTime: number) {
 }

 export default function PlaybackTimer({ children }: PropsWithChildren) {
-  const timer = useTimer();
+  'use memo';
+  const timer = useTimerProgress();

  const isRolling = timer.playback === Playback.Roll;
  const isWaiting = timer.phase === TimerPhase.Pending;
  const isOvertime = timer.phase === TimerPhase.Overtime;
  const hasAddedTime = Boolean(timer.addedTime);
-
  const rollLabel = isRolling ? 'Roll mode active' : '';
-
  const addedTimeLabel = resolveAddedTimeLabel(timer.addedTime);

  return (
@@ -51,7 +51,13 @@ export default function PlaybackTimer({ children }: PropsWithChildren) {
        {isWaiting ? (
          <span className={style.rolltag}>Roll: Countdown to start</span>
        ) : (
-          <RunningStatus startedAt={timer.startedAt} expectedFinish={timer.expectedFinish} playback={timer.playback} />
+          <RunningStatus
+            startedAt={timer.startedAt}
+            expectedFinish={timer.expectedFinish}
+            isStopped={timer.playback === Playback.Stop}
+            isCountToEnd={timer.isCountToEnd}
+            isOvertime={isOvertime}
+          />
        )}
      </div>
      {children}
@@ -62,16 +68,18 @@ export default function PlaybackTimer({ children }: PropsWithChildren) {
 interface RunningStatusProps {
  startedAt: MaybeNumber;
  expectedFinish: MaybeNumber;
-  playback: Playback;
+  isStopped: boolean;
+  isCountToEnd: boolean;
+  isOvertime: boolean;
 }
-function RunningStatus({ startedAt, expectedFinish, playback }: RunningStatusProps) {
-  if (playback === Playback.Stop) {
+
+function RunningStatus({ startedAt, expectedFinish, isStopped, isCountToEnd, isOvertime }: RunningStatusProps) {
+  if (isStopped) {
    return <StoppedStatus />;
  }

  const started = millisToString(startedAt);
-  const finishedMs = expectedFinish !== null ? expectedFinish % dayInMs : null;
-  const finish = millisToString(finishedMs);
+  const finish = millisToString(expectedFinish === null ? null : normaliseWallClock(expectedFinish));

  return (
    <>
@@ -80,7 +88,9 @@ function RunningStatus({ startedAt, expectedFinish, playback }: RunningStatusPro
        <span className={style.time}>{started}</span>
      </span>
      <span className={style.finish}>
-        <span className={style.tag}>Expect end</span>
+        <span className={cx([style.tag, isOvertime && style.tagOvertime])}>
+          {isCountToEnd ? 'Scheduled end' : 'Expected end'}
+        </span>
        <span className={style.time}>{finish}</span>
      </span>
    </>
@@ -1,6 +1,7 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';

+import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
@@ -10,6 +11,7 @@ import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import { getDefaultFormat } from '../../common/utils/time';
 import { isTouchDevice } from '../../externals';
+import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../../views/common/loader/Loader';
 import CustomFieldEditModal from './custom-field-edit-modal/CustomFieldEditModal';
 import FollowButton from './follow-button/FollowButton';
@@ -35,7 +37,7 @@ export default function OperatorLoader() {
  }

  if (status === 'error') {
-    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
  }

  return <Operator {...data} />;
@@ -43,6 +45,7 @@ export default function OperatorLoader() {

 function Operator({ rundown, rundownMetadata, customFields, settings }: OperatorData) {
  const selectedEventId = useSelectedEventId();
+  const { getLocalizedString } = useTranslation();
  const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions();

  const [showEditPrompt, setShowEditPrompt] = useState(false);
@@ -113,6 +116,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
  const operatorOptions = useMemo(() => getOperatorOptions(customFields, defaultFormat), [customFields, defaultFormat]);

  const canEdit = shouldEdit && subscribe.length;
+  const hasEvents = rundown.order.length > 0;

  return (
    <div className={style.operatorContainer} data-testid='operator-view'>
@@ -127,117 +131,121 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
        </div>
      )}

-      <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-        {rundown.order.map((entryId) => {
-          const entry = rundown.entries[entryId];
-          if (isOntimeEvent(entry)) {
-            const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
-            // hide past events (if setting) and skipped events
-            if ((hidePast && isPast) || entry.skip) {
-              return null;
-            }
+      {!hasEvents ? (
+        <EmptyFill text={getLocalizedString('common.no_data')} />
+      ) : (
+        <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
+          {rundown.order.map((entryId) => {
+            const entry = rundown.entries[entryId];
+            if (isOntimeEvent(entry)) {
+              const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
+              // hide past events (if setting) and skipped events
+              if ((hidePast && isPast) || entry.skip) {
+                return null;
+              }

-            const { mainField, secondaryField, subscribedData } = getEventData(
-              entry,
-              mainSource,
-              secondarySource,
-              subscribe,
-              customFields,
-            );
+              const { mainField, secondaryField, subscribedData } = getEventData(
+                entry,
+                mainSource,
+                secondarySource,
+                subscribe,
+                customFields,
+              );

-            return (
-              <OperatorEvent
-                key={entry.id}
-                id={entry.id}
-                colour={entry.colour}
-                cue={entry.cue}
-                main={mainField}
-                secondary={secondaryField}
-                timeStart={entry.timeStart}
-                duration={entry.duration}
-                delay={entry.delay}
-                dayOffset={entry.dayOffset}
-                isLinkedToLoaded={isLinkedToLoaded}
-                isSelected={isLoaded}
-                isPast={isPast}
-                selectedRef={isLoaded ? selectedRef : undefined}
-                showStart={showStart}
-                subscribed={subscribedData}
-                totalGap={totalGap}
-                onLongPress={canEdit ? handleEdit : () => undefined}
-              />
-            );
-          }
-
-          if (isOntimeGroup(entry)) {
-            const { isPast } = rundownMetadata[entry.id];
-
-            const isCurrentParent = selectedEventId ? rundownMetadata[selectedEventId]?.groupId === entry.id : false;
-
-            if (hidePast && isPast && !isCurrentParent) {
-              return null;
-            }
-
-            return (
-              <Fragment key={entry.id}>
-                <OperatorGroup
+              return (
+                <OperatorEvent
                  key={entry.id}
-                  title={entry.title}
+                  id={entry.id}
                  colour={entry.colour}
-                  count={entry.entries.length}
+                  cue={entry.cue}
+                  main={mainField}
+                  secondary={secondaryField}
+                  timeStart={entry.timeStart}
                  duration={entry.duration}
+                  delay={entry.delay}
+                  dayOffset={entry.dayOffset}
+                  isLinkedToLoaded={isLinkedToLoaded}
+                  isSelected={isLoaded}
+                  isPast={isPast}
+                  selectedRef={isLoaded ? selectedRef : undefined}
+                  showStart={showStart}
+                  subscribed={subscribedData}
+                  totalGap={totalGap}
+                  onLongPress={canEdit ? handleEdit : () => undefined}
                />
-                {entry.entries.map((nestedEntryId) => {
-                  const nestedEntry = rundown.entries[nestedEntryId];
-                  if (!isOntimeEvent(nestedEntry)) {
-                    return null;
-                  }
+              );
+            }

-                  const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
+            if (isOntimeGroup(entry)) {
+              const { isPast } = rundownMetadata[entry.id];

-                  // hide past events (if setting) and skipped events
-                  if ((hidePast && isPast) || nestedEntry.skip) {
-                    return null;
-                  }
+              const isCurrentParent = selectedEventId ? rundownMetadata[selectedEventId]?.groupId === entry.id : false;

-                  const { mainField, secondaryField, subscribedData } = getEventData(
-                    nestedEntry,
-                    mainSource,
-                    secondarySource,
-                    subscribe,
-                    customFields,
-                  );
+              if (hidePast && isPast && !isCurrentParent) {
+                return null;
+              }

-                  return (
-                    <OperatorEvent
-                      key={nestedEntry.id}
-                      id={nestedEntry.id}
-                      colour={nestedEntry.colour}
-                      cue={nestedEntry.cue}
-                      main={mainField}
-                      secondary={secondaryField}
-                      timeStart={nestedEntry.timeStart}
-                      duration={nestedEntry.duration}
-                      delay={nestedEntry.delay}
-                      dayOffset={nestedEntry.dayOffset}
-                      isLinkedToLoaded={isLinkedToLoaded}
-                      isSelected={isLoaded}
-                      isPast={isPast}
-                      groupColour={entry.colour}
-                      selectedRef={isLoaded ? selectedRef : undefined}
-                      showStart={showStart}
-                      subscribed={subscribedData}
-                      totalGap={totalGap}
-                      onLongPress={canEdit ? handleEdit : () => undefined}
-                    />
-                  );
-                })}
-              </Fragment>
-            );
-          }
-          return null;
-        })}
-      </div>
+              return (
+                <Fragment key={entry.id}>
+                  <OperatorGroup
+                    key={entry.id}
+                    title={entry.title}
+                    colour={entry.colour}
+                    count={entry.entries.length}
+                    duration={entry.duration}
+                  />
+                  {entry.entries.map((nestedEntryId) => {
+                    const nestedEntry = rundown.entries[nestedEntryId];
+                    if (!isOntimeEvent(nestedEntry)) {
+                      return null;
+                    }
+
+                    const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
+
+                    // hide past events (if setting) and skipped events
+                    if ((hidePast && isPast) || nestedEntry.skip) {
+                      return null;
+                    }
+
+                    const { mainField, secondaryField, subscribedData } = getEventData(
+                      nestedEntry,
+                      mainSource,
+                      secondarySource,
+                      subscribe,
+                      customFields,
+                    );
+
+                    return (
+                      <OperatorEvent
+                        key={nestedEntry.id}
+                        id={nestedEntry.id}
+                        colour={nestedEntry.colour}
+                        cue={nestedEntry.cue}
+                        main={mainField}
+                        secondary={secondaryField}
+                        timeStart={nestedEntry.timeStart}
+                        duration={nestedEntry.duration}
+                        delay={nestedEntry.delay}
+                        dayOffset={nestedEntry.dayOffset}
+                        isLinkedToLoaded={isLinkedToLoaded}
+                        isSelected={isLoaded}
+                        isPast={isPast}
+                        groupColour={entry.colour}
+                        selectedRef={isLoaded ? selectedRef : undefined}
+                        showStart={showStart}
+                        subscribed={subscribedData}
+                        totalGap={totalGap}
+                        onLongPress={canEdit ? handleEdit : () => undefined}
+                      />
+                    );
+                  })}
+                </Fragment>
+              );
+            }
+            return null;
+          })}
+        </div>
+      )}
      <FollowButton isVisible={lockAutoScroll} onClickHandler={handleOffset} />
    </div>
  );
@@ -14,9 +14,18 @@ export interface OperatorData {
 }

 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
-  const { data: customFields, status: customFieldStatus } = useCustomFields();
-  const { data: settings, status: settingsStatus } = useSettings();
+  const {
+    data: rundown,
+    rundownMetadata,
+    status: rundownStatus,
+    isLoadingError: rundownIsLoadingError,
+  } = useRundownWithMetadata();
+  const {
+    data: customFields,
+    status: customFieldStatus,
+    isLoadingError: customFieldIsLoadingError,
+  } = useCustomFields();
+  const { data: settings, status: settingsStatus, isLoadingError: settingsIsLoadingError } = useSettings();

  return {
    data: {
@@ -25,6 +34,10 @@ export function useOperatorData(): ViewData<OperatorData> {
      customFields,
      settings,
    },
-    status: aggregateQueryStatus([rundownStatus, customFieldStatus, settingsStatus]),
+    status: aggregateQueryStatus([
+      { status: rundownStatus, isLoadingError: rundownIsLoadingError },
+      { status: customFieldStatus, isLoadingError: customFieldIsLoadingError },
+      { status: settingsStatus, isLoadingError: settingsIsLoadingError },
+    ]),
  };
 }
@@ -105,12 +105,29 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
    handleCollapseGroup,
  });

+  // Jump to the current element on demand: the running event in Run mode, the edit cursor otherwise.
+  // Scrolls only (no selection change) so jumping to the running event does not hijack the edit cursor.
+  const jumpToCurrent = useCallback(() => {
+    const targetId = editorMode === AppMode.Run ? featureData?.selectedEventId : cursor;
+    if (!targetId) {
+      return;
+    }
+
+    // Open parent group if the target is inside a collapsed group
+    const entry = entries[targetId];
+    if (entry && 'parent' in entry) {
+      expandGroup(entry.parent);
+    }
+    scrollToEntry(targetId);
+  }, [editorMode, featureData?.selectedEventId, cursor, entries, expandGroup, scrollToEntry]);
+
  // Keyboard shortcuts
  useRundownKeyboard({
    cursor,
    commands,
    clearSelectedEvents,
    setEntryCopyId,
+    jumpToCurrent,
  });

  // DND handlers
@@ -322,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 && (
@@ -1,19 +1,24 @@
 import { memo } from 'react';

-import Empty from '../../common/components/state/Empty';
+import EmptyFill from '../../common/components/state/EmptyFill';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
+import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';

 export default memo(RundownList);
 function RundownList() {
-  const { data, status, rundownMetadata } = useRundownWithMetadata();
+  const { data, status, isLoadingError, rundownMetadata } = useRundownWithMetadata();
  const featureData = useRundownEditor();
+  const { getLocalizedString } = useTranslation();

-  const isLoading = status !== 'success' || !data || !rundownMetadata;
+  // avoid showing the editable empty state before we know whether the rundown is actually empty
+  if (status === 'pending') {
+    return <EmptyFill text='Loading…' />;
+  }

-  if (isLoading) {
-    return <Empty text='Connecting to server' />;
+  if (isLoadingError) {
+    return <EmptyFill text={getLocalizedString('common.no_data')} />;
  }

  return (
@@ -44,6 +44,9 @@ function EventEditorEmpty() {
              <Separator />
              <Combo keys={['PgDn']} />
            </Shortcut>
+            <Shortcut label='Jump to current entry'>
+              <Combo keys={[deviceAlt, 'L']} />
+            </Shortcut>
            <Shortcut label='Deselect entry'>
              <Combo keys={['Esc']} />
            </Shortcut>
@@ -10,7 +10,7 @@ import Switch from '../../../../common/components/switch/Switch';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
-import { formatTime } from '../../../../common/utils/time';
+import { formatTime, normaliseWallClock } from '../../../../common/utils/time';
 import TimeInputFlow from '../../time-input-flow/TimeInputFlow';

 import style from '../EntryEditor.module.scss';
@@ -68,8 +68,10 @@ function EventEditorTimes({
  };

  const hasDelay = delay !== 0;
+  const delayedStart = normaliseWallClock(timeStart + delay);
+  const delayedEnd = normaliseWallClock(timeEnd + delay);
  const delayLabel = hasDelay
-    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(timeStart + delay)} → ${formatTime(timeEnd + delay)}`
+    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(delayedStart)} → ${formatTime(delayedEnd)}`
    : '';

  return (
@@ -86,7 +88,6 @@ function EventEditorTimes({
              timeStrategy={timeStrategy}
              linkStart={linkStart}
              delay={delay}
-              countToEnd={countToEnd}
              showLabels
            />
          </div>
@@ -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);
  };

  /**
@@ -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],
@@ -19,6 +19,7 @@ interface UseRundownKeyboardOptions {
  };
  clearSelectedEvents: () => void;
  setEntryCopyId: (id: EntryId | null, mode?: 'copy' | 'cut') => void;
+  jumpToCurrent: () => void;
 }

 /**
@@ -40,6 +41,7 @@ export function useRundownKeyboard({
  commands,
  clearSelectedEvents,
  setEntryCopyId,
+  jumpToCurrent,
 }: UseRundownKeyboardOptions) {
  const scrollToEntry = useEventSelection((state) => state.scrollToEntry);

@@ -127,6 +129,8 @@ export function useRundownKeyboard({
      { preventDefault: true, usePhysicalKeys: true },
    ],

+    ['alt + L', () => jumpToCurrent(), { preventDefault: true, usePhysicalKeys: true }],
+
    [
      'alt + mod + ArrowDown',
      () => commands.moveEntry(cursor, 'down'),
@@ -7,6 +7,7 @@ $skip-opacity: 0.2;
  background-color: $block-bg;
  margin-block: 0.25rem;
  overflow: initial;
+  position: relative;

  display: grid;
  grid-template-areas:
@@ -16,7 +17,7 @@ $skip-opacity: 0.2;
    'binder pb-actions estatus estatus'
    'binder ...        ...     ...';

-  grid-template-columns: $block-binder-width 3rem 1fr 3rem;
+  grid-template-columns: $block-binder-width 3rem minmax(0, 1fr) 3rem;
  grid-template-rows: 0.125rem 2rem 2rem auto 0.125rem;
  align-items: center;
  padding-right: $block-clearance;
@@ -136,6 +137,7 @@ $skip-opacity: 0.2;
  align-items: center;
  gap: $block-clearance;
  height: 100%;
+  min-width: 0;
 }

 .eventTimers.editMode:hover {
@@ -155,7 +157,7 @@ $skip-opacity: 0.2;
  align-items: center;
  justify-content: space-between;

-  .nextTag {
+  .warningMeta {
    font-size: 1rem;
    color: $orange-500;
    letter-spacing: 0.03px;
@@ -231,6 +233,10 @@ $skip-opacity: 0.2;
    color: var(--status-color-active-override, $active-indicator);
  }

+  .statusIcon.countToEndStatus {
+    color: $orange-400;
+  }
+
  .statusIcon.warning {
    color: $orange-500;
  }
@@ -115,12 +115,12 @@ function RundownEventInner({
          delay={delay}
          timeStrategy={timeStrategy}
          linkStart={linkStart}
-          countToEnd={countToEnd}
        />
      </div>
      <div className={style.titleSection}>
        <TitleEditor title={title} entryId={eventId} placeholder='Event title' className={style.eventTitle} />
-        {isNext && <span className={style.nextTag}>UP NEXT</span>}
+        {isNext && <span className={style.warningMeta}>UP NEXT</span>}
+        {!isNext && countToEnd && <span className={style.warningMeta}>COUNT TO END</span>}
      </div>
      <EventBlockPlayback
        eventId={eventId}
@@ -157,7 +157,13 @@ function RundownEventInner({
            <EndActionIcon action={endAction} className={style.statusIcon} />
          </Tooltip>
          <Tooltip text={`${countToEnd ? 'Count to End' : 'Count duration'}`} render={<span />}>
-            <LuArrowDownToLine className={`${style.statusIcon} ${countToEnd ? style.active : style.disabled}`} />
+            <LuArrowDownToLine
+              className={cx([
+                style.statusIcon,
+                countToEnd ? style.active : style.disabled,
+                countToEnd && style.countToEndStatus,
+              ])}
+            />
          </Tooltip>
          <Tooltip text={automationTooltip} render={<span />}>
            <IoFlash className={automationIconClasses} />
@@ -1,10 +1,33 @@
+import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-utils';
+
 import { formatDelay } from '../rundownEvent.utils';

 describe('formatDelay()', () => {
  it('adds a given delay to the start time', () => {
-    const timeStart = 60000; // 1 min
-    const delay = 60000; // 1 min
+    const timeStart = 1 * MILLIS_PER_MINUTE; // 00:01
+    const delay = 1 * MILLIS_PER_MINUTE; // 00:01
    const result = formatDelay(timeStart, delay);
    expect(result).toEqual('New start 00:02');
  });
+
+  it('wraps negative delayed starts under midnight', () => {
+    const timeStart = 1 * MILLIS_PER_MINUTE; // 00:01
+    const delay = -2 * MILLIS_PER_MINUTE; // -00:02
+    const result = formatDelay(timeStart, delay);
+    expect(result).toEqual('New start 23:59');
+  });
+
+  it('wraps later-day negative delays using delay as the source of truth', () => {
+    const timeStart = 1 * MILLIS_PER_HOUR; // 01:00
+    const delay = -(1 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE); // -01:30
+    const result = formatDelay(timeStart, delay);
+    expect(result).toEqual('New start 23:30');
+  });
+
+  it('displays positive delays as wall-clock time', () => {
+    const timeStart = 1 * MILLIS_PER_HOUR; // 01:00
+    const delay = 1 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE; // 01:30
+    const result = formatDelay(timeStart, delay);
+    expect(result).toEqual('New start 02:30');
+  });
 });
@@ -1,15 +1,16 @@
 import { millisToString, removeTrailingZero } from 'ontime-utils';

-import { formatDuration } from '../../../common/utils/time';
+import { formatDuration, normaliseWallClock } from '../../../common/utils/time';

 export function formatDelay(timeStart: number, delay: number): string | undefined {
  if (!delay) return;

-  const delayedStart = Math.max(0, timeStart + delay);
+  const delayedStart = normaliseWallClock(timeStart + delay);

  const timeTag = removeTrailingZero(millisToString(delayedStart));
  return `New start ${timeTag}`;
 }
+
 export function formatGap(gap: number, isNextDay: boolean) {
  if (gap === 0) {
    if (isNextDay) {
@@ -1,6 +1,5 @@
 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';
@@ -13,7 +12,7 @@ import { makeRundownColumns } from './makeRundownColumns';

 export default memo(RundownTable);
 function RundownTable() {
-  const { data: customFields, status: customFieldStatus } = useCustomFields();
+  const { data: customFields } = useCustomFields();
  const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
  const { editorMode } = useEditorFollowMode();
  const source = useLoadedRundownSource();
@@ -32,16 +31,10 @@ function RundownTable() {

  const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);

-  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' />
-        )}
+        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
      </CuesheetDnd>
    </EntryActionsProvider>
  );
@@ -4,10 +4,15 @@

 .timerNote {
  width: 1.25em;
+  flex: 0 0 1.25em;
  color: $blue-500;
  font-size: 1.5em;
 }

+.timerNotePlaceholder {
+  visibility: hidden;
+}
+
 .inactive {
  color: $muted-gray;
 }
@@ -14,7 +14,6 @@ import style from './TimeInputFlow.module.scss';

 interface TimeInputFlowProps {
  eventId: string;
-  countToEnd: boolean;
  timeStart: number;
  timeEnd: number;
  duration: number;
@@ -22,12 +21,12 @@ interface TimeInputFlowProps {
  linkStart: boolean;
  delay: number;
  showLabels?: boolean;
+  showWarnings?: boolean;
 }

 export default memo(TimeInputFlow);
 function TimeInputFlow({
  eventId,
-  countToEnd,
  timeStart,
  timeEnd,
  duration,
@@ -35,6 +34,7 @@ function TimeInputFlow({
  linkStart,
  delay,
  showLabels,
+  showWarnings = true,
 }: TimeInputFlowProps) {
  const { updateEntry, updateTimer } = useEntryActionsContext();

@@ -56,10 +56,6 @@ function TimeInputFlow({
    warnings.push('Over midnight');
  }

-  if (countToEnd) {
-    warnings.push('Count to End');
-  }
-
  const hasDelay = delay !== 0;
  const isLockedEnd = timeStrategy === TimeStrategy.LockEnd;
  const isLockedDuration = timeStrategy === TimeStrategy.LockDuration;
@@ -136,11 +132,19 @@ function TimeInputFlow({
        </TimeInputGroup>
      </div>

-      {warnings.length > 0 && (
-        <Tooltip text={warnings.join(' - ')} className={style.timerNote} data-testid='event-warning' render={<span />}>
-          <IoAlertCircleOutline />
-        </Tooltip>
-      )}
+      {showWarnings &&
+        (warnings.length > 0 ? (
+          <Tooltip
+            text={warnings.join(' - ')}
+            className={style.timerNote}
+            data-testid='event-warning'
+            render={<span />}
+          >
+            <IoAlertCircleOutline />
+          </Tooltip>
+        ) : (
+          <span className={`${style.timerNote} ${style.timerNotePlaceholder}`} aria-hidden='true' />
+        ))}
    </>
  );
 }
@@ -35,7 +35,7 @@ export default function BackstageLoader() {
  }

  if (status === 'error') {
-    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
  }

  return <Backstage {...data} />;
@@ -20,10 +20,14 @@ export function useBackstageData(): ViewData<BackstageData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown();
-  const { data: projectData, status: projectDataStatus } = useProjectData();
-  const { data: settings, status: settingsStatus } = useSettings();
-  const { data: customFields, status: customFieldsStatus } = useCustomFields();
+  const { data: rundownData, status: rundownStatus, isLoadingError: rundownIsLoadingError } = useFlatRundown();
+  const { data: projectData, status: projectDataStatus, isLoadingError: projectDataIsLoadingError } = useProjectData();
+  const { data: settings, status: settingsStatus, isLoadingError: settingsIsLoadingError } = useSettings();
+  const {
+    data: customFields,
+    status: customFieldsStatus,
+    isLoadingError: customFieldsIsLoadingError,
+  } = useCustomFields();

  return {
    data: {
@@ -33,6 +37,11 @@ export function useBackstageData(): ViewData<BackstageData> {
      isMirrored,
      settings,
    },
-    status: aggregateQueryStatus([rundownStatus, projectDataStatus, settingsStatus, customFieldsStatus]),
+    status: aggregateQueryStatus([
+      { status: rundownStatus, isLoadingError: rundownIsLoadingError },
+      { status: projectDataStatus, isLoadingError: projectDataIsLoadingError },
+      { status: settingsStatus, isLoadingError: settingsIsLoadingError },
+      { status: customFieldsStatus, isLoadingError: customFieldsIsLoadingError },
+    ]),
  };
 }
@@ -7,7 +7,7 @@ $dot-spacing: 1.5rem;
  display: grid;
  place-items: center;
  background-color: var(--background-color-override, $viewer-background-color);
-  height: 100vh;
+  height: 100dvh;
 }

 .ellipsis {
@@ -21,26 +21,26 @@ $dot-spacing: 1.5rem;
    height: $dot-size;
    border-radius: 50%;
    background-color: var(--accent-color-override, $ontime-color);
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    &:nth-child(1) {
      left: $dot-size;
-      animation: lds-ellipsis1 0.6s infinite;
+      animation: lds-ellipsis1 1s infinite;
    }

    &:nth-child(2) {
      left: $dot-size;
-      animation: lds-ellipsis2 0.6s infinite;
+      animation: lds-ellipsis2 1s infinite;
    }

    &:nth-child(3) {
      left: calc($dot-size + $dot-spacing);
-      animation: lds-ellipsis2 0.6s infinite;
+      animation: lds-ellipsis2 1s infinite;
    }

    &:nth-child(4) {
      left: calc($dot-size + 2 * $dot-spacing);
-      animation: lds-ellipsis3 0.6s infinite;
+      animation: lds-ellipsis3 1s infinite;
    }
  }
 }
@@ -80,21 +80,7 @@ $item-height: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
-
-    button {
-      margin-top: 1.75rem;
-    }
-  }
-
-  .empty-state__content {
-    max-width: none;
-
-    span {
-      max-width: none;
-      white-space: nowrap;
-      font-size: clamp(1.5rem, 4vw, 2.25rem);
-      line-height: 1.1;
-    }
+    gap: 1.5rem;
  }

  .list-container {
@@ -43,7 +43,7 @@ export default function CountdownLoader() {
  }

  if (status === 'error') {
-    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
  }

  return <Countdown {...data} />;
@@ -87,7 +87,7 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting

      {!hasEvents && (
        <div className='empty-state'>
-          <Empty text={getLocalizedString('common.no_data')} className='empty-state__content' />
+          <Empty text={getLocalizedString('common.no_data')} />
        </div>
      )}

@@ -121,7 +121,7 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
  if (subscriptions.length === 0) {
    return (
      <div className='empty-state'>
-        <Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
+        <Empty text={getLocalizedString('countdown.select_event')} />
        <Button variant='primary' size='xlarge' onClick={goToEditMode}>
          <IoAdd /> Add
        </Button>
@@ -137,7 +137,7 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
  if (subscribedEvents.length === 0) {
    return (
      <div className='empty-state'>
-        <Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
+        <Empty text={getLocalizedString('countdown.select_event')} />
        <Button variant='primary' size='xlarge' onClick={goToEditMode}>
          <IoAdd /> Add
        </Button>
@@ -154,7 +154,7 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
  if (eventsToShow.length === 0) {
    return (
      <div className='empty-state'>
-        <Empty text={getLocalizedString('countdown.all_have_finished')} className='empty-state__content' />
+        <Empty text={getLocalizedString('countdown.all_have_finished')} />
      </div>
    );
  }
@@ -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 (
@@ -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) {
@@ -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 };
 }
@@ -21,10 +21,18 @@ export function useCountdownData(): ViewData<CountdownData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
-  const { data: projectData, status: projectDataStatus } = useProjectData();
-  const { data: settings, status: settingsStatus } = useSettings();
-  const { data: customFields, status: customFieldsStatus } = useCustomFields();
+  const {
+    data: rundownData,
+    status: rundownStatus,
+    isLoadingError: rundownIsLoadingError,
+  } = useFlatRundownWithMetadata();
+  const { data: projectData, status: projectDataStatus, isLoadingError: projectDataIsLoadingError } = useProjectData();
+  const { data: settings, status: settingsStatus, isLoadingError: settingsIsLoadingError } = useSettings();
+  const {
+    data: customFields,
+    status: customFieldsStatus,
+    isLoadingError: customFieldsIsLoadingError,
+  } = useCustomFields();

  return {
    data: {
@@ -34,6 +42,11 @@ export function useCountdownData(): ViewData<CountdownData> {
      isMirrored,
      settings,
    },
-    status: aggregateQueryStatus([rundownStatus, projectDataStatus, settingsStatus, customFieldsStatus]),
+    status: aggregateQueryStatus([
+      { status: rundownStatus, isLoadingError: rundownIsLoadingError },
+      { status: projectDataStatus, isLoadingError: projectDataIsLoadingError },
+      { status: settingsStatus, isLoadingError: settingsIsLoadingError },
+      { status: customFieldsStatus, isLoadingError: customFieldsIsLoadingError },
+    ]),
  };
 }
@@ -2,7 +2,6 @@ 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 useCustomFields from '../../common/hooks-query/useCustomFields';
 import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
@@ -34,40 +33,34 @@ function CuesheetTableWrapper({
  const preset = use(PresetContext);
  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
-  const { data: customFields, status: customFieldStatus } = useCustomFields();
+  const { data: customFields } = useCustomFields();

  const columns = useMemo(
    () => makeCuesheetColumns(customFields, cuesheetMode, preset),
    [customFields, cuesheetMode, preset],
  );

-  const isLoading = !customFields || customFieldStatus === 'pending';
-
  return (
    <CuesheetDnd columns={columns}>
-      {isLoading ? (
-        <EmptyPage text='Loading...' />
-      ) : (
-        <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}
-              />
-            </>
-          }
-        />
-      )}
+      <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>
  );
 }
@@ -5,6 +5,10 @@ $table-header-font-size: calc(1rem - 2px);

@include rows.cuesheet-row-columns($table-header-font-size);

+.tableLoading {
+  grid-area: table;
+}
+
 .cuesheet {
  font-size: $table-font-size;
  font-weight: 400;
@@ -11,7 +11,7 @@ import {
  TableVirtuosoHandle,
 } from 'react-virtuoso';

-import EmptyPage from '../../../common/components/state/EmptyPage';
+import EmptyFill from '../../../common/components/state/EmptyFill';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
@@ -19,6 +19,7 @@ import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
 import { AppMode } from '../../../ontimeConfig';
+import { useTranslation } from '../../../translation/TranslationProvider';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
 import { useCuesheetPermissions } from '../useTablePermissions';
 import { CuesheetHeader, SortableCuesheetHeader } from './cuesheet-table-elements/CuesheetHeader';
@@ -62,8 +63,9 @@ export default function CuesheetTable({
  isCurrentRundown,
  insertElement,
 }: CuesheetTableProps) {
-  const { flatRundown, status, selectedEventId } = source;
+  const { flatRundown, status, isLoadingError, selectedEventId } = source;
  const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
+  const { getLocalizedString } = useTranslation();
  const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;

  const useOptions = tableRoot === 'editor' ? usePersistedRundownOptions : usePersistedCuesheetOptions;
@@ -228,10 +230,13 @@ export default function CuesheetTable({
    });
  }, [cuesheetMode, hideIndexColumn, table]);

-  const isLoading = !flatRundown || status === 'pending';
+  // avoid showing the editable empty state before we know whether the rundown is actually empty
+  if (status === 'pending') {
+    return <EmptyFill text='Loading…' className={style.tableLoading} />;
+  }

-  if (isLoading) {
-    return <EmptyPage text='Loading...' />;
+  if (isLoadingError) {
+    return <EmptyFill text={getLocalizedString('common.no_data')} className={style.tableLoading} />;
  }

  return (
@@ -15,7 +15,7 @@ function EditorLayoutOptions() {
      {
        type: 'item',
        label: 'Planning',
-        description: 'Edit-focused list with planning stats',
+        description: 'Edit focused list with planning stats',
        icon: layoutMode === EditorLayoutMode.PLANNING ? IoCheckmark : undefined,
        onClick: () => setLayoutMode(EditorLayoutMode.PLANNING),
      },
@@ -28,9 +28,9 @@

  .timer-container {
    flex: 1;
-    align-content: center;
-    justify-self: center;
-    align-self: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;

    width: 100%;
    overflow: hidden;
@@ -1,5 +1,7 @@
@use '@/theme/viewerDefs' as *;

+$content-width: min(100%, 1100px);
+
 .project {
  margin: 0;
  box-sizing: border-box; /* reset */
@@ -16,56 +18,104 @@
  display: flex;
  flex-direction: column;

+  /* =================== HEADER ===================*/
+
+  .project-header {
+    width: $content-width;
+    margin-inline: auto;
+
+    display: flex;
+    align-items: center;
+    gap: clamp(12px, 2vw, 24px);
+
+    padding-bottom: $view-element-gap;
+    border-bottom: 1px solid $white-10;
+  }
+
  .logo {
    max-width: min(200px, 30vw);
  }

+  .title {
+    font-size: $header-font-size;
+    font-weight: 600;
+    line-height: 1.1em;
+  }
+
+  .description {
+    font-size: $base-font-size;
+    color: var(--secondary-color-override, $viewer-secondary-color);
+  }
+
+  /* =================== CONTENT ===================*/
+
  .info {
    flex: 1;
-    max-height: 100%;
+    width: $content-width;
    margin-inline: auto;
    overflow-y: auto;
-    width: min(calc(100vw - 4rem), 960px);
+
    display: flex;
    flex-direction: column;
-    align-items: start;
    gap: $view-element-gap;

+    padding-block: $view-element-gap;
    padding-bottom: 10vh;
  }

+  .info__card {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+    border-radius: $element-border-radius;
+    padding: $view-block-padding $view-inline-padding;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.35em;
+  }
+
+  .info__media {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: $view-element-gap;
+  }
+
+  .info__media .info__value {
+    flex: 1;
+    min-width: 0;
+  }
+
  .info__label {
+    font-size: $timer-label-size;
    font-weight: 600;
+    letter-spacing: 0.05em;
    color: var(--label-color-override, $viewer-label-color);
    text-transform: uppercase;
  }

  .info__value {
    white-space: break-spaces;
-  }
-
-  .info__custom {
-    display: flex;
-    gap: 1rem;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
  }

  .info__image-container {
    display: flex;
    justify-content: center;
    align-items: center;
-    width: 192px;
-    height: 192px;
+    flex: 0 0 min(192px, 25%);
  }

  .info__image {
+    display: block;
    max-width: 100%;
-    max-height: 100%;
+    height: auto;
    object-fit: contain;
  }

  .link.info__value {
-    display: flex;
-    gap: $view-element-gap;
+    display: inline-flex;
+    gap: 0.35em;
    align-items: center;
    color: $action-text-color;

@@ -78,12 +128,13 @@
 /* =================== MOBILE ===================*/
@media screen and (max-width: 768px) {
  .project {
+    .project-header {
+      flex-direction: column;
+      align-items: start;
+      gap: 0.5rem;
+    }
    .logo img {
      height: min(50px, 10vh);
    }
-    .info__image-container {
-      width: 96px;
-      height: 96px;
-    }
  }
 }
@@ -1,4 +1,5 @@
 import { OntimeView } from 'ontime-types';
+import { type ReactNode, useState } from 'react';
 import { IoOpenOutline } from 'react-icons/io5';

 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -21,7 +22,7 @@ export default function ProjectInfoLoader() {
  }

  if (status === 'error') {
-    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
  }

  return <ProjectInfo {...data} />;
@@ -41,56 +42,49 @@ function ProjectInfo({ projectData, isMirrored }: ProjectInfoData) {
    return (
      <>
        <ViewParamsEditor target={OntimeView.ProjectInfo} viewOptions={[]} />
-        <EmptyPage text={getLocalizedString('common.no_data')} />;
+        <EmptyPage text={getLocalizedString('common.no_data')} />
      </>
    );
  }

+  const hasHeader = Boolean(projectData.logo || projectData.title || projectData.description);
+
  return (
    <div className={`project ${isMirrored ? 'mirror' : ''}`} data-testid='project-view'>
      <ViewParamsEditor target={OntimeView.ProjectInfo} viewOptions={[]} />
-      {projectData.logo && <ViewLogo name={projectData.logo} className='logo' />}
+      {hasHeader && (
+        <div className='project-header'>
+          {projectData.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='project-header__text'>
+            {projectData.title && <div className='title'>{projectData.title}</div>}
+            {projectData.description && <div className='description'>{projectData.description}</div>}
+          </div>
+        </div>
+      )}
      <div className='info'>
-        {projectData.title && (
-          <div>
-            <div className='info__label'>{getLocalizedString('project.title')}</div>
-            <div className='info__value'>{projectData.title}</div>
-          </div>
-        )}
-        {projectData.description && (
-          <div>
-            <div className='info__label'>{getLocalizedString('project.description')}</div>
-            <div className='info__value'>{projectData.description}</div>
-          </div>
-        )}
-        {projectData.info && (
-          <div>
-            <div className='info__label'>{getLocalizedString('project.info')}</div>
-            <div className='info__value'>{projectData.info}</div>
-          </div>
-        )}
+        {projectData.info && <InfoCard label={getLocalizedString('project.info')}>{projectData.info}</InfoCard>}
        {projectData.url && (
-          <div>
+          <div className='info__card'>
            <div className='info__label'>{getLocalizedString('project.url')}</div>
            <a href={projectData.url} target='_blank' rel='noreferrer' className='info__value link'>
-              {projectData.url} <IoOpenOutline style={{ fontSize: '1em' }} />
+              {projectData.url}
+              <IoOpenOutline style={{ fontSize: '1em' }} />
            </a>
          </div>
        )}
        {projectData.custom.map((info, idx) => {
-          const hasUrl = Boolean(info.url);
          return (
            // oxlint-disable-next-line react/no-array-index-key - we only have the index to go of  here
-            <div key={`${info.title}-${idx}`} className='info__custom'>
-              {hasUrl && (
-                <div className='info__image-container'>
-                  <img className='info__image' src={info.url} loading='lazy' />
+            <div key={`${info.title}-${idx}`} className='info__card'>
+              {info.title && <div className='info__label'>{info.title}</div>}
+              {info.url ? (
+                <div className='info__media'>
+                  <InfoImage src={info.url} />
+                  {info.value && <div className='info__value'>{info.value}</div>}
                </div>
+              ) : (
+                info.value && <div className='info__value'>{info.value}</div>
              )}
-              <div>
-                <div className='info__label'>{info.title}</div>
-                <div className='info__value'>{info.value}</div>
-              </div>
            </div>
          );
        })}
@@ -98,3 +92,31 @@ function ProjectInfo({ projectData, isMirrored }: ProjectInfoData) {
    </div>
  );
 }
+
+interface InfoCardProps {
+  label: string;
+  children: ReactNode;
+}
+
+function InfoCard({ label, children }: InfoCardProps) {
+  return (
+    <div className='info__card'>
+      <div className='info__label'>{label}</div>
+      <div className='info__value'>{children}</div>
+    </div>
+  );
+}
+
+function InfoImage({ src }: { src: string }) {
+  const [hasError, setHasError] = useState(false);
+
+  if (hasError) {
+    return null;
+  }
+
+  return (
+    <div className='info__image-container'>
+      <img className='info__image' src={src} loading='lazy' alt='' onError={() => setHasError(true)} />
+    </div>
+  );
+}
@@ -2,7 +2,7 @@ import { ProjectData } from 'ontime-types';

 import useProjectData from '../../common/hooks-query/useProjectData';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
-import { ViewData } from '../utils/viewLoader.utils';
+import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';

 export interface ProjectInfoData {
  projectData: ProjectData;
@@ -14,13 +14,13 @@ export function useProjectInfoData(): ViewData<ProjectInfoData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: projectData, status: projectDataStatus } = useProjectData();
+  const { data: projectData, status: projectDataStatus, isLoadingError: projectDataIsLoadingError } = useProjectData();

  return {
    data: {
      projectData,
      isMirrored,
    },
-    status: projectDataStatus,
+    status: aggregateQueryStatus([{ status: projectDataStatus, isLoadingError: projectDataIsLoadingError }]),
  };
 }
@@ -25,7 +25,7 @@ export default function StudioLoader() {
  }

  if (status === 'error') {
-    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
  }

  return <Studio {...data} />;
@@ -20,10 +20,18 @@ export function useStudioData(): ViewData<StudioData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: projectData, status: projectDataStatus } = useProjectData();
-  const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
-  const { data: settings, status: settingsStatus } = useSettings();
-  const { data: customFields, status: customFieldsStatus } = useCustomFields();
+  const { data: projectData, status: projectDataStatus, isLoadingError: projectDataIsLoadingError } = useProjectData();
+  const {
+    data: viewSettings,
+    status: viewSettingsStatus,
+    isLoadingError: viewSettingsIsLoadingError,
+  } = useViewSettings();
+  const { data: settings, status: settingsStatus, isLoadingError: settingsIsLoadingError } = useSettings();
+  const {
+    data: customFields,
+    status: customFieldsStatus,
+    isLoadingError: customFieldsIsLoadingError,
+  } = useCustomFields();

  return {
    data: {
@@ -33,6 +41,11 @@ export function useStudioData(): ViewData<StudioData> {
      settings,
      viewSettings,
    },
-    status: aggregateQueryStatus([projectDataStatus, viewSettingsStatus, settingsStatus, customFieldsStatus]),
+    status: aggregateQueryStatus([
+      { status: projectDataStatus, isLoadingError: projectDataIsLoadingError },
+      { status: viewSettingsStatus, isLoadingError: viewSettingsIsLoadingError },
+      { status: settingsStatus, isLoadingError: settingsIsLoadingError },
+      { status: customFieldsStatus, isLoadingError: customFieldsIsLoadingError },
+    ]),
  };
 }
@@ -1,6 +1,7 @@
 import { OntimeView } from 'ontime-types';
 import { useMemo } from 'react';

+import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
@@ -29,7 +30,7 @@ export default function TimelinePageLoader() {
  }

  if (status === 'error') {
-    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
  }

  return <TimelinePage {...data} />;
@@ -73,7 +74,7 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
          totalDuration={totalDuration}
        />
      ) : (
-        <EmptyPage text={getLocalizedString('common.no_data')} />
+        <EmptyFill text={getLocalizedString('common.no_data')} />
      )}
    </div>
  );
@@ -16,10 +16,18 @@ export interface TimelineData {

 export function useTimelineData(): ViewData<TimelineData> {
  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
-  const { data: projectData, status: projectDataStatus } = useProjectData();
-  const { data: settings, status: settingsStatus } = useSettings();
-  const { data: customFields, status: customFieldsStatus } = useCustomFields();
+  const {
+    data: rundownData,
+    status: rundownStatus,
+    isLoadingError: rundownIsLoadingError,
+  } = useFlatRundownWithMetadata();
+  const { data: projectData, status: projectDataStatus, isLoadingError: projectDataIsLoadingError } = useProjectData();
+  const { data: settings, status: settingsStatus, isLoadingError: settingsIsLoadingError } = useSettings();
+  const {
+    data: customFields,
+    status: customFieldsStatus,
+    isLoadingError: customFieldsIsLoadingError,
+  } = useCustomFields();

  return {
    data: {
@@ -28,6 +36,11 @@ export function useTimelineData(): ViewData<TimelineData> {
      projectData,
      settings,
    },
-    status: aggregateQueryStatus([rundownStatus, projectDataStatus, settingsStatus, customFieldsStatus]),
+    status: aggregateQueryStatus([
+      { status: rundownStatus, isLoadingError: rundownIsLoadingError },
+      { status: projectDataStatus, isLoadingError: projectDataIsLoadingError },
+      { status: settingsStatus, isLoadingError: settingsIsLoadingError },
+      { status: customFieldsStatus, isLoadingError: customFieldsIsLoadingError },
+    ]),
  };
 }
@@ -82,9 +82,9 @@

  .timer-container {
    flex: 1;
-    align-content: center;
-    justify-self: center;
-    align-self: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;

    width: 100%;
    overflow: hidden;
@@ -43,7 +43,7 @@ export default function TimerLoader() {
  }

  if (status === 'error') {
-    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
  }

  return <Timer {...data} />;
@@ -22,11 +22,19 @@ export function useTimerData(): ViewData<TimerData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: projectData, status: projectDataStatus } = useProjectData();
-  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: projectData, status: projectDataStatus, isLoadingError: projectDataIsLoadingError } = useProjectData();
+  const {
+    data: viewSettings,
+    status: viewSettingsStatus,
+    isLoadingError: viewSettingsIsLoadingError,
+  } = useViewSettings();
+  const { data: settings, status: settingsStatus, isLoadingError: settingsIsLoadingError } = useSettings();
+  const {
+    data: customFields,
+    status: customFieldsStatus,
+    isLoadingError: customFieldsIsLoadingError,
+  } = useCustomFields();
+  const { data: rundown, status: rundownStatus, isLoadingError: rundownIsLoadingError } = useRundown();
  const { entries } = rundown;

  return {
@@ -39,11 +47,11 @@ export function useTimerData(): ViewData<TimerData> {
      entries,
    },
    status: aggregateQueryStatus([
-      projectDataStatus,
-      viewSettingsStatus,
-      settingsStatus,
-      customFieldsStatus,
-      rundownStatus,
+      { status: projectDataStatus, isLoadingError: projectDataIsLoadingError },
+      { status: viewSettingsStatus, isLoadingError: viewSettingsIsLoadingError },
+      { status: settingsStatus, isLoadingError: settingsIsLoadingError },
+      { status: customFieldsStatus, isLoadingError: customFieldsIsLoadingError },
+      { status: rundownStatus, isLoadingError: rundownIsLoadingError },
    ]),
  };
 }
@@ -5,21 +5,27 @@ export type ViewData<T> = {
  status: QueryStatus;
 };

+type AggregatableQuery = {
+  status: QueryStatus;
+  /** true only when the query has never received data, ie useQuery's isLoadingError */
+  isLoadingError: boolean;
+};
+
 /**
- * Aggregates a loading status from multiple query statuses.
- * If all statuses are 'pending', returns 'pending'.
- * If all statuses are 'success', returns 'success'.
- * If any status is 'error', returns 'error'.
+ * Aggregates a loading status from multiple queries, for the purpose of deciding
+ * whether a view can render.
+ * - 'pending' while any query hasn't settled yet (no result, first fetch in flight)
+ * - 'error' once all queries have settled, if any of them never received data
+ * - 'success' once all queries have settled and every one has data to show,
+ *   even if a query's last (background) fetch failed
 */
-export function aggregateQueryStatus(statuses: QueryStatus[]): QueryStatus {
-  if (statuses.every((status) => status === 'pending')) {
+export function aggregateQueryStatus(queries: AggregatableQuery[]): QueryStatus {
+  const allSettled = queries.every((query) => query.status !== 'pending');
+  if (!allSettled) {
    return 'pending';
  }
-  if (statuses.every((status) => status === 'success')) {
-    return 'success';
-  }
-  if (statuses.some((status) => status === 'error')) {
+  if (queries.some((query) => query.isLoadingError)) {
    return 'error';
  }
-  return 'pending';
+  return 'success';
 }
@@ -1,6 +1,6 @@
 {
  "name": "ontime-electron",
-  "version": "4.10.0",
+  "version": "4.11.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -125,6 +125,13 @@
          "**/*",
          "*{.ts}"
        ]
+      },
+      {
+        "from": "../server/src/html/",
+        "to": "extraResources/html/",
+        "filter": [
+          "**/*"
+        ]
      }
    ]
  }
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/resolver",
-  "version": "4.10.0",
+  "version": "4.11.0",
  "type": "module",
  "repository": "https://github.com/cpvalente/ontime",
  "types": "./dist/main.d.ts",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "4.10.0",
+  "version": "4.11.0",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -163,5 +163,70 @@ describe('parseOutput', () => {
        secondarySource: 'secondary',
      });
    });
+
+    it('parses message-secondary with a text value', () => {
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        text: 'hello',
+      });
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: undefined,
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        text: 'hello',
+      });
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: 'secondary',
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        secondarySource: 'secondary',
+        text: 'hello',
+      });
+      // an empty text is treated as no change
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: 'secondary',
+          text: '',
+        }),
+      ).toMatchObject({
+        secondarySource: 'secondary',
+        text: undefined,
+      });
+      // text can be set while clearing the secondary source
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: null,
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        secondarySource: null,
+        text: 'hello',
+      });
+      expect(() =>
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: 'secondary',
+          text: 123,
+        }),
+      ).toThrow('Unexpected payload type:');
+    });
  });
 });
@@ -0,0 +1,113 @@
+import { runtimeStorePlaceholder } from 'ontime-types';
+
+import * as messageService from '../../../services/message-service/message.service.js';
+import { toOntimeAction } from '../clients/ontime.client.js';
+
+vi.mock('../../../services/message-service/message.service.js', () => ({
+  patch: vi.fn(),
+}));
+
+describe('toOntimeAction()', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('parses templates in primary message text', () => {
+    toOntimeAction(
+      {
+        type: 'ontime',
+        action: 'message-set',
+        text: 'Current: {{timer.current}}',
+        visible: true,
+      },
+      {
+        ...runtimeStorePlaceholder,
+        timer: {
+          ...runtimeStorePlaceholder.timer,
+          current: 42,
+        },
+      },
+    );
+
+    expect(messageService.patch).toHaveBeenCalledWith({
+      timer: {
+        text: 'Current: 42',
+        visible: true,
+      },
+    });
+  });
+
+  it('parses templates in secondary message text', () => {
+    toOntimeAction(
+      {
+        type: 'ontime',
+        action: 'message-secondary',
+        secondarySource: 'secondary',
+        text: 'Next: {{eventNext.title}}',
+      },
+      {
+        ...runtimeStorePlaceholder,
+        eventNext: {
+          id: 'next-event',
+          type: 'event',
+          cue: '2',
+          title: 'Keynote',
+          note: '',
+          timeStart: 0,
+          timeEnd: 0,
+          duration: 0,
+          timerType: 'count-down',
+          colour: '',
+          delay: 0,
+          isPublic: true,
+          skip: false,
+          endAction: 'none',
+          revision: 0,
+          custom: {},
+        },
+      },
+    );
+
+    expect(messageService.patch).toHaveBeenCalledWith({
+      timer: {
+        secondarySource: 'secondary',
+      },
+      secondary: 'Next: Keynote',
+    });
+  });
+
+  it('can set secondary message text without changing the secondary source', () => {
+    toOntimeAction(
+      {
+        type: 'ontime',
+        action: 'message-secondary',
+        text: 'Next: {{eventNext.title}}',
+      },
+      {
+        ...runtimeStorePlaceholder,
+        eventNext: {
+          id: 'next-event',
+          type: 'event',
+          cue: '2',
+          title: 'Keynote',
+          note: '',
+          timeStart: 0,
+          timeEnd: 0,
+          duration: 0,
+          timerType: 'count-down',
+          colour: '',
+          delay: 0,
+          isPublic: true,
+          skip: false,
+          endAction: 'none',
+          revision: 0,
+          custom: {},
+        },
+      },
+    );
+
+    expect(messageService.patch).toHaveBeenCalledWith({
+      secondary: 'Next: Keynote',
+    });
+  });
+});
@@ -132,7 +132,7 @@ function send(output: AutomationOutput[], store: RuntimeStore) {
    } else if (isHTTPOutput(payload)) {
      emitHTTP(payload, store);
    } else if (isOntimeAction(payload)) {
-      toOntimeAction(payload);
+      toOntimeAction(payload, store);
    } else {
      logger.warning(LogOrigin.Tx, `Unknown output type: ${payload}`);
    }
@@ -225,13 +225,28 @@ function parseOntimeAction(maybeOntimeAction: object): OntimeAction {
  }

  if (maybeOntimeAction.action === 'message-secondary') {
-    assert.hasKeys(maybeOntimeAction, ['secondarySource']);
+    // the secondary text is optional, an empty string is treated as no change
+    let text: string | undefined = undefined;
+    if ('text' in maybeOntimeAction) {
+      assert.isString(maybeOntimeAction.text);
+      text = indeterminateText(maybeOntimeAction.text);
+    }
+
+    if (!('secondarySource' in maybeOntimeAction) || maybeOntimeAction.secondarySource === undefined) {
+      return {
+        type: 'ontime',
+        action: 'message-secondary',
+        text,
+      };
+    }
+
    // null is used to clear the secondary source
    if (maybeOntimeAction.secondarySource === null) {
      return {
        type: 'ontime',
        action: 'message-secondary',
        secondarySource: null,
+        text,
      };
    }

@@ -240,6 +255,7 @@ function parseOntimeAction(maybeOntimeAction: object): OntimeAction {
      type: 'ontime',
      action: 'message-secondary',
      secondarySource: chooseSecondarySource(maybeOntimeAction.secondarySource),
+      text,
    };
  }

@@ -1,12 +1,14 @@
-import { LogOrigin, OntimeAction } from 'ontime-types';
+import { LogOrigin, OntimeAction, RuntimeStore } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';
+import { DeepReadonly } from 'ts-essentials';

 import { logger } from '../../../classes/Logger.js';
 import { auxTimerService } from '../../../services/aux-timer-service/AuxTimerService.js';
 import * as messageService from '../../../services/message-service/message.service.js';
 import { runtimeService } from '../../../services/runtime-service/runtime.service.js';
+import { parseTemplateNested } from '../automation.utils.js';

-export function toOntimeAction(action: OntimeAction) {
+export function toOntimeAction(action: OntimeAction, store: DeepReadonly<RuntimeStore>) {
  const actionType = action.action;
  switch (actionType) {
    // Aux timer actions
@@ -55,18 +57,25 @@ export function toOntimeAction(action: OntimeAction) {
    case 'message-set': {
      messageService.patch({
        timer: {
-          text: action.text,
+          text: action.text ? parseTemplateNested(action.text, store) : action.text,
          visible: action.visible,
        },
      });
      break;
    }
    case 'message-secondary': {
-      messageService.patch({
-        timer: {
-          secondarySource: action.secondarySource,
-        },
-      });
+      const secondary = action.text ? parseTemplateNested(action.text, store) : action.text;
+      const patch =
+        action.secondarySource === undefined
+          ? { secondary }
+          : {
+              timer: {
+                secondarySource: action.secondarySource,
+              },
+              secondary,
+            };
+
+      messageService.patch(patch);
      break;
    }

@@ -432,6 +432,40 @@ describe('processRundown()', () => {
    expect(initResult.totalDuration).toBe(500 - 100);
  });

+  it('skipped events do not advance day offsets or affect gaps', () => {
+    const rundown = makeRundown({
+      order: ['1', 'skipped', '2'],
+      entries: {
+        '1': makeOntimeEvent({
+          id: '1',
+          timeStart: 22 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE, // 22:30:00
+          timeEnd: 30 * MILLIS_PER_MINUTE, // 00:30:00
+          duration: 2 * MILLIS_PER_HOUR, // 02:00:00
+        }),
+        skipped: makeOntimeEvent({
+          id: 'skipped',
+          skip: true,
+          timeStart: 22 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE, // 22:30:00
+          timeEnd: 30 * MILLIS_PER_MINUTE, // 00:30:00
+          duration: 2 * MILLIS_PER_HOUR, // 02:00:00
+        }),
+        '2': makeOntimeEvent({
+          id: '2',
+          timeStart: 30 * MILLIS_PER_MINUTE, // 00:30:00
+          timeEnd: 8 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE, // 08:30:00
+          duration: 8 * MILLIS_PER_HOUR, // 08:00:00
+        }),
+      },
+    });
+
+    const initResult = processRundown(rundown, {});
+
+    expect((initResult.entries.skipped as OntimeEvent).dayOffset).toBe(0);
+    expect((initResult.entries.skipped as OntimeEvent).gap).toBe(0);
+    expect((initResult.entries['2'] as OntimeEvent).dayOffset).toBe(1);
+    expect((initResult.entries['2'] as OntimeEvent).gap).toBe(0);
+  });
+
  it('calculates total duration across days with gap', () => {
    const rundown = makeRundown({
      order: ['1', '2', '3'],
@@ -680,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'],
@@ -700,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);
  });

@@ -731,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']);
@@ -1805,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()', () => {
@@ -1,8 +1,18 @@
-import { EndAction, OntimeEvent, TimeStrategy, TimerType } from 'ontime-types';
+import {
+  EndAction,
+  OntimeEvent,
+  OntimeGroup,
+  OntimeMilestone,
+  TimeStrategy,
+  TimerLifeCycle,
+  TimerType,
+  Trigger,
+} from 'ontime-types';
 import { MILLIS_PER_HOUR, createEvent } from 'ontime-utils';
 import { assertType } from 'vitest';

-import { makeOntimeEvent, makeOntimeGroup, makeRundown } from '../__mocks__/rundown.mocks.js';
+import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
+import { parseRundown } from '../rundown.parser.js';
 import {
  calculateDayOffset,
  deleteById,
@@ -10,6 +20,8 @@ import {
  getIntegerAndFraction,
  hasChanges,
  makeDeepClone,
+  mergeRundownPreservingFields,
+  isLoadedPlayable,
 } from '../rundown.utils.js';

 describe('test event validator', () => {
@@ -287,3 +299,314 @@ describe('getIntegerAndFraction()', () => {
    expect(getIntegerAndFraction('123.')).toStrictEqual({ integer: 123, faction: 0, precision: 0 });
  });
 });
+
+/**
+ * The merge strategy takes the incoming (spreadsheet) rundown as the source of truth for structure
+ * and order. For a matched event it only applies the fields the spreadsheet mapped (providedFields);
+ * any field it does not provide (e.g. automations) is kept from the existing event.
+ */
+describe('mergeRundownPreservingFields()', () => {
+  const automation: Trigger = {
+    id: 'trigger-onair',
+    title: 'Go on air',
+    trigger: TimerLifeCycle.onStart,
+    automationId: 'automation-onair',
+  };
+
+  it('keeps the current rundown identity but takes structure and order from the incoming rundown', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      title: 'Main show',
+      revision: 3,
+      order: ['welcome', 'keynote'],
+      entries: {
+        welcome: makeOntimeEvent({ id: 'welcome', title: 'Welcome' }),
+        keynote: makeOntimeEvent({ id: 'keynote', title: 'Keynote' }),
+      },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      title: 'From spreadsheet',
+      revision: 0,
+      order: ['welcome', 'lunch'],
+      entries: {
+        welcome: makeOntimeEvent({ id: 'welcome', title: 'Welcome' }),
+        lunch: makeOntimeEvent({ id: 'lunch', title: 'Lunch' }),
+      },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+
+    // identity and revision come from the current rundown
+    expect(merged.id).toBe('show-rundown');
+    expect(merged.title).toBe('Main show');
+    expect(merged.revision).toBe(4);
+    // structure and order come from the incoming rundown
+    expect(merged.order).toEqual(['welcome', 'lunch']);
+    expect(merged.flatOrder).toEqual(incoming.flatOrder);
+  });
+
+  it('deletes current entries that are absent from the incoming rundown', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['welcome', 'keynote'],
+      entries: {
+        welcome: makeOntimeEvent({ id: 'welcome' }),
+        keynote: makeOntimeEvent({ id: 'keynote' }),
+      },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['welcome'],
+      entries: { welcome: makeOntimeEvent({ id: 'welcome' }) },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+
+    expect(merged.entries.welcome).toBeDefined();
+    expect(merged.entries.keynote).toBeUndefined();
+  });
+
+  it('replaces an entry entirely with the incoming data when the id is kept but the type changes', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', title: 'Keynote', triggers: [automation] }) },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeGroup({ id: 'keynote', title: 'Keynote group' }) },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+
+    // the incoming group fully replaces the previous event, no old data is carried over
+    expect(merged.entries.keynote).toEqual(incoming.entries.keynote);
+  });
+
+  it('applies the provided fields to a matched event, including when the incoming value is empty', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', title: 'Keynote', note: 'in the green room' }) },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', title: 'Opening keynote', note: '' }) },
+    });
+
+    // the sheet mapped title and note
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title', 'note'], custom: [] });
+    const keynote = merged.entries.keynote as OntimeEvent;
+
+    expect(keynote.title).toBe('Opening keynote');
+    // an empty provided value replaces the current one
+    expect(keynote.note).toBe('');
+  });
+
+  it('keeps fields the sheet did not map on a matched event, regardless of the incoming values', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: {
+        keynote: makeOntimeEvent({ id: 'keynote', title: 'Keynote', note: 'green room', triggers: [automation] }),
+      },
+    });
+    // the preview always fully populates an entry, so the incoming carries a note and triggers; what
+    // the sheet actually supplied is providedFields, not the values that happen to be on the entry
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: {
+        keynote: makeOntimeEvent({
+          id: 'keynote',
+          title: 'Opening keynote',
+          note: 'from a stale column',
+          triggers: [],
+        }),
+      },
+    });
+
+    // only title is mapped, so note and automations keep the existing values, not the incoming ones
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+    const keynote = merged.entries.keynote as OntimeEvent;
+
+    expect(keynote.title).toBe('Opening keynote');
+    expect(keynote.note).toBe('green room');
+    expect(keynote.triggers).toEqual([automation]);
+  });
+
+  it('patches the provided custom fields on a matched event and keeps the unmapped ones', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: {
+        keynote: makeOntimeEvent({
+          id: 'keynote',
+          title: 'Keynote',
+          custom: { lighting: 'warm', song: 'intro theme' },
+        }),
+      },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: {
+        keynote: makeOntimeEvent({ id: 'keynote', title: 'Opening keynote', custom: { lighting: 'cold' } }),
+      },
+    });
+
+    // the sheet mapped the title and the lighting custom field, but not song
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: ['lighting'] });
+    const keynote = merged.entries.keynote as OntimeEvent;
+
+    expect(keynote.title).toBe('Opening keynote');
+    expect(keynote.custom.lighting).toBe('cold');
+    // an unmapped custom field is kept from the existing event
+    expect(keynote.custom.song).toBe('intro theme');
+  });
+
+  it('infers the time strategy from the provided times when the sheet is unambiguous', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', timeStrategy: TimeStrategy.LockEnd }) },
+    });
+    // the sheet provides only a duration, so the strategy is unambiguously LockDuration
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', duration: 60000 }) },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['duration'], custom: [] });
+
+    expect((merged.entries.keynote as OntimeEvent).timeStrategy).toBe(TimeStrategy.LockDuration);
+  });
+
+  it('keeps the existing time strategy when the provided times are ambiguous', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', timeStrategy: TimeStrategy.LockEnd }) },
+    });
+    // the sheet provides both an end and a duration, so the strategy cannot be inferred from them
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', timeEnd: 60000, duration: 60000 }) },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['timeEnd', 'duration'], custom: [] });
+
+    expect((merged.entries.keynote as OntimeEvent).timeStrategy).toBe(TimeStrategy.LockEnd);
+  });
+
+  it('merges a matched group, keeping the fields the sheet cannot express', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['session'],
+      entries: { session: makeOntimeGroup({ id: 'session', title: 'Old session', targetDuration: 3_600_000 }) },
+    });
+    // the sheet cannot express a group's target duration, so the incoming group does not carry one
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['session'],
+      entries: { session: makeOntimeGroup({ id: 'session', title: 'New session', targetDuration: null }) },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+    const session = merged.entries.session as OntimeGroup;
+
+    expect(session.title).toBe('New session');
+    expect(session.targetDuration).toBe(3_600_000);
+  });
+
+  it('merges a matched milestone, keeping the fields the sheet did not map', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['reminder'],
+      entries: { reminder: makeOntimeMilestone({ id: 'reminder', title: 'Reminder', note: 'call talent' }) },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['reminder'],
+      entries: { reminder: makeOntimeMilestone({ id: 'reminder', title: 'Green room reminder', note: 'ignored' }) },
+    });
+
+    // only title is mapped, so the milestone's note keeps the existing value
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+    const reminder = merged.entries.reminder as OntimeMilestone;
+
+    expect(reminder.title).toBe('Green room reminder');
+    expect(reminder.note).toBe('call talent');
+  });
+
+  it('does not mutate the current rundown and deep-clones the kept automations', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', triggers: [automation] }) },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', triggers: [] }) },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+
+    // kept automations are a copy, not a shared reference to the current rundown
+    (merged.entries.keynote as OntimeEvent).triggers.push({ ...automation, id: 'trigger-extra' });
+    expect((current.entries.keynote as OntimeEvent).triggers).toEqual([automation]);
+  });
+
+  it('keeps the not-provided fields through a parseRundown round-trip', () => {
+    const current = makeRundown({
+      id: 'show-rundown',
+      order: ['keynote'],
+      entries: {
+        keynote: makeOntimeEvent({ id: 'keynote', triggers: [automation], timeStrategy: TimeStrategy.LockEnd }),
+      },
+    });
+    const incoming = makeRundown({
+      id: 'spreadsheet-rundown',
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', title: 'Keynote', triggers: [] }) },
+    });
+
+    const merged = mergeRundownPreservingFields(incoming, current, { event: ['title'], custom: [] });
+    const parsed = parseRundown(merged, {});
+    const keynote = parsed.entries.keynote as OntimeEvent;
+
+    expect(keynote.triggers).toEqual([automation]);
+    expect(keynote.timeStrategy).toBe(TimeStrategy.LockEnd);
+  });
+});
+
+describe('isLoadedPlayable()', () => {
+  it('returns true when the loaded event still exists and is playable', () => {
+    const rundown = makeRundown({ order: ['keynote'], entries: { keynote: makeOntimeEvent({ id: 'keynote' }) } });
+    expect(isLoadedPlayable('keynote', rundown)).toBe(true);
+  });
+
+  it('returns false when the loaded event was removed', () => {
+    const rundown = makeRundown({ order: ['welcome'], entries: { welcome: makeOntimeEvent({ id: 'welcome' }) } });
+    expect(isLoadedPlayable('keynote', rundown)).toBe(false);
+  });
+
+  it('returns false when the loaded event is now skipped', () => {
+    const rundown = makeRundown({
+      order: ['keynote'],
+      entries: { keynote: makeOntimeEvent({ id: 'keynote', skip: true }) },
+    });
+    expect(isLoadedPlayable('keynote', rundown)).toBe(false);
+  });
+
+  it('returns false when the matched entry is no longer an event', () => {
+    const rundown = makeRundown({ order: ['keynote'], entries: { keynote: makeOntimeGroup({ id: 'keynote' }) } });
+    expect(isLoadedPlayable('keynote', rundown)).toBe(false);
+  });
+});
@@ -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',
+    );
+  });
+});
@@ -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);
  }
 }

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Claude	f2455fec17	refactor(views): keep query status truthful, push render logic to the view boundary Reworks the previous fix, which had base hooks (useRundown, useSettings, useCustomFields, useProjectData, useViewSettings) rewrite their own status/isError to hide background-refetch failures. That was misleading: those hooks are consumed well beyond the 9 view loaders, and other callers may legitimately want to know a fetch genuinely failed. Instead the base hooks now return react-query's status/isError untouched, plus the isLoadingError flag react-query already computes (true only when a query has never received data). aggregateQueryStatus (viewLoader.utils.ts) takes {status, isLoadingError} pairs and only reports 'error' once every query has settled and at least one never got data; a background/refetch error with data present now aggregates to 'success'. The two single-query consumers outside that aggregator (RundownList/CuesheetTable via useScopedRundown, and ProjectInfo) branch on isLoadingError directly instead of status === 'error'. Removes the standalone deriveQueryStatus helper introduced in the prior iteration, since the logic now lives in the one place that already existed for this purpose (aggregateQueryStatus) rather than a new abstraction.	2026-08-02 05:28:49 +00:00
Claude	f7b58f5ebd	refactor(views): use react-query's isLoadingError instead of reimplementing it deriveQueryStatus previously inferred "never received data" by checking data !== undefined itself. TanStack Query already computes and exposes this exact distinction as isLoadingError (isError && no data) vs isRefetchError (isError && data present) on every useQuery result, so consume that directly instead of duplicating the logic.	2026-08-01 18:59:39 +00:00
Claude	9e2dfaab16	fix(views): move stale-data-on-error fix to the shared query hooks The previous Operator-only fix (checking rundown.revision) papered over a bug shared by every view loader: react-query sets status to 'error' on any failed fetch, including a background refetch, even when a prior successful fetch's data is still cached. All view loaders treated that as "no data" and blanked the whole view. Add deriveQueryStatus(), a small helper that only reports 'error' when a query has never received data, and apply it in the five base data hooks (useRundown, useRundownById, useCustomFields, useSettings, useProjectData, useViewSettings). This fixes the class of bug for every consumer (Operator, Timer, Backstage, Studio, Countdown, TimelinePage, ProjectInfo, RundownList, CuesheetTable) at the source, so the Operator-specific revision check can be reverted back to the plain status check.	2026-08-01 18:53:44 +00:00
Claude	65e1d3cfe9	fix(operator): only show error empty state when no rundown data is available The operator view previously replaced its content with the full-page error state on any query error, even when a previously fetched rundown was still cached. Now it falls back to rendering the cached data and only shows the error placeholder if a rundown has never been received.	2026-08-01 18:47:01 +00:00
Carlos Valente	94d54529ee	refactor(views): consistent loading and empty states	2026-08-01 16:25:14 +02:00
Carlos Valente	f7535651f6	refactor(info): improve UI consistency and polish	2026-08-01 14:41:39 +02:00
Carlos Valente	5cf36f049a	refactor(modal): allow wider modals	2026-07-25 14:28:45 +02:00
Carlos Valente	c6248b0c72	refactor(import): improve preview UI	2026-07-25 14:28:45 +02:00
Alex Christoffer Rasmussen	2a890cf2b3	fix: issue where a countToEnd would lead to incorrect expected times (#2149 ) * 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	2026-07-25 11:22:24 +02:00
Carlos Valente	a8c611911d	refactor(rundown): new entries are appended to rundown	2026-07-22 07:17:39 +02:00
Carlos Valente	8363f06a5c	chore(rundown): improve documentation of insert logic	2026-07-22 07:17:39 +02:00
will@t1d.dev	5f040092cb	fix: timer-legacy view not served in desktop distributions The server serves html/timer-legacy.html and html/login.html from disk at runtime, relative to the bundled server. The Docker image copies these files but the electron packaging did not, so the view 404ed in all desktop distributions. Additionally, AppImages mount at /tmp/.mount_*, a hidden directory. Express sendFile refuses paths containing dot-segments by default (returns 404 without touching disk), so the view failed on Linux even with the file packaged. Allow dotfiles for this route; the request path is fixed so no user input is affected.	2026-07-19 10:02:45 +02:00
Carlos Valente	347c748dd9	feat(rundown): add shortcut to jump to current element	2026-07-18 17:03:02 +02:00
Carlos Valente	f234a1f892	fix(rundown): prevent skipped events from influencing day calculations	2026-07-18 16:52:36 +02:00
Carlos Valente	0c5e87b7e7	fix(ui): prevent warning indicator from overflowing container	2026-07-18 16:52:36 +02:00
Carlos Valente	64082ceac0	refactor(rundown): improve visibility of count to end	2026-07-18 16:45:55 +02:00
Carlos Valente	f598e8dab1	refactor(time control): improve handling of overtime and count to end	2026-07-18 16:45:55 +02:00
Carlos Valente	0c84a3ff9e	fix: delays account for midnight	2026-07-18 16:45:55 +02:00
Carlos Valente	c8760b5e9c	bump version to 4.11.0	2026-07-18 15:24:25 +02:00
Claude	34360a5b8f	feat(import): add merge strategy and new-rundown destination to spreadsheet import Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2026-07-17 22:26:19 +02:00
Claude	5e6debcce0	fix(views): center timer digits with flexbox for embedded browser compatibility The Stage Timer and PiP Timer views relied on `align-content: center` to vertically center the timer digits inside `.timer-container`, which is a plain block element. Aligning children of a block container via `align-content` only works in Chromium 123+ (Firefox 125+, Safari 17.4+). Embedded browsers such as vMix Browser Input (CEF V115) and other older CEF/Chromium-based production tools ignore the property, so the digits fall back to the top of the container while every other element renders correctly. Make `.timer-container` a real flex column and center with `justify-content: center`, which is universally supported and matches the centering approach used elsewhere in the codebase. The removed `justify-self`/`align-self` were no-ops on a full-width flex item. Fixes #2126 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014T6ENZ3r6JXZb1fpYw2oNY	2026-07-17 20:59:49 +02:00
Carlos Valente	c191786e50	refactor(navigation): clear params from editor drawer	2026-07-17 15:50:42 +02:00
Carlos Valente	6911e37c18	refactor(automation): improve automation UX	2026-07-17 10:53:45 +02:00
Claude	86b2132cdc	feat(automation): expose group title and allow setting secondary text Surface {{groupNow.*}} template variables (title, note, colour, times, custom fields) in the automation template autocomplete so events inside a group can reference their group. The runtime store already carries groupNow, so substitution and filters worked already; this makes it discoverable. Extend the message-secondary action with an optional text field so an automation can set the secondary message content, not just its source. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LZYPZVdZLWowU7DyzGkWyy	2026-07-17 10:53:45 +02:00
Carlos Valente	25f0dba83a	chore: add codegraph to gitignore	2026-07-16 10:46:10 +02:00