feat(rundown): clear a mixed field explicitly, cover both fixes with tests

Emptying a field which holds different values across the selection does not submit, otherwise focusing it and tabbing away would wipe every entry. That left no way to clear such a field, so text fields now offer an explicit Clear action, shown only while the entries disagree. Once they agree the field can be emptied by hand and the action is withdrawn. Both of the fixes which multi edit depends on were unguarded, so the logic moves into pure helpers alongside the existing hook helper convention: - shouldSubmitValue covers an unknown initial value being submitted as an empty string - applyPatchToEvents covers the optimistic batch update, whose signature now makes the original mistake of spreading the request body unrepresentable, and pins the custom field merge Both tests were confirmed to fail against the original behaviour. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PDETGBrhwgAqgTHjmrmJGJ
feat(rundown): batch edit event duration, model conflicts with a symbol
2026-07-26 10:38:55 +00:00 · 2026-07-25 12:49:47 +00:00 · 2026-07-25 12:39:17 +00:00 · 2026-07-25 12:29:30 +00:00 · 2026-07-25 11:22:24 +02:00 · 2026-07-22 07:17:39 +02:00
214 changed files with 9608 additions and 2006 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
@@ -54,3 +54,6 @@ ontime-data/

 # temporary write files
 **.tmp
+
+# Claude Code metadata
+.claude/
@@ -1 +1 @@
-v22.22.2
+v22.22.3
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.9.0",
+  "version": "4.11.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,10 +1,10 @@
 {
  "name": "ontime-ui",
-  "version": "4.9.0",
+  "version": "4.11.0",
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui/react": "1.3.0",
+    "@base-ui/react": "1.6.0",
    "@codemirror/commands": "^6.0.0",
    "@codemirror/lang-css": "^6.0.0",
    "@codemirror/state": "^6.0.0",
@@ -12,27 +12,27 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/open-sans": "^5.2.6",
+    "@fontsource/open-sans": "^5.2.7",
    "@mantine/hooks": "^8.3.7",
-    "@sentry/react": "^10.2.0",
+    "@sentry/react": "^10.59.0",
    "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.85.9",
-    "@tanstack/react-query-devtools": "^5.85.9",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query-devtools": "^5.101.0",
    "@tanstack/react-table": "^8.21.3",
-    "@uiw/codemirror-theme-vscode": "^4.25.9",
+    "@uiw/codemirror-theme-vscode": "^4.25.10",
    "autosize": "^6.0.1",
-    "axios": "^1.12.2",
+    "axios": "^1.18.0",
    "csv-stringify": "^6.6.0",
    "qrcode": "^1.5.4",
-    "react": "^19.2.3",
-    "react-colorful": "^5.6.1",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-colorful": "^5.7.0",
+    "react-dom": "^19.2.7",
    "react-fast-compare": "^3.2.2",
-    "react-hook-form": "^7.72.0",
-    "react-icons": "5.5.0",
-    "react-router": "^7.11.0",
-    "react-virtuoso": "^4.17.0",
-    "zustand": "^5.0.9"
+    "react-hook-form": "^7.80.0",
+    "react-icons": "5.6.0",
+    "react-router": "^8.0.1",
+    "react-virtuoso": "^4.18.7",
+    "zustand": "^5.0.14"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -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 ==========================

@@ -6,7 +6,8 @@ import SwatchPicker from './SwatchPicker';
 import style from './SwatchSelect.module.scss';

 interface ColourInputProps {
-  value: string;
+  /** undefined represents values which do not agree, no swatch is highlighted */
+  value: string | undefined;
  name: 'colour';
  handleChange: (newValue: 'colour', name: string) => void;
 }
@@ -44,7 +45,11 @@ export default function SwatchSelect(props: ColourInputProps) {
      {colours.map((colour) => (
        <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
      ))}
-      <SwatchPicker color={value} onChange={setColour} isSelected={!colours.includes(value)} />
+      <SwatchPicker
+        color={value ?? ''}
+        onChange={setColour}
+        isSelected={value !== undefined && !colours.includes(value)}
+      />
    </div>
  );
 }
@@ -0,0 +1,31 @@
+import { shouldSubmitValue } from '../useReactiveTextInput';
+
+describe('shouldSubmitValue()', () => {
+  it('submits a value which differs from the initial value', () => {
+    expect(shouldSubmitValue('new', 'old')).toBe(true);
+  });
+
+  it('does not submit a value which has not changed', () => {
+    expect(shouldSubmitValue('same', 'same')).toBe(false);
+  });
+
+  it('submits an empty value when the initial value is known', () => {
+    // clearing a field which has a value is a valid edit
+    expect(shouldSubmitValue('', 'old')).toBe(true);
+  });
+
+  it('does not submit an empty value when the initial value is unknown', () => {
+    // an unknown value renders as an empty field, submitting it on blur
+    // would overwrite every entry being edited with an empty value
+    expect(shouldSubmitValue('', undefined)).toBe(false);
+  });
+
+  it('submits a typed value when the initial value is unknown', () => {
+    expect(shouldSubmitValue('typed', undefined)).toBe(true);
+  });
+
+  it('submits an unchanged value when the caller opts in', () => {
+    expect(shouldSubmitValue('same', 'same', true)).toBe(true);
+    expect(shouldSubmitValue('', undefined, true)).toBe(true);
+  });
+});
@@ -1,6 +1,23 @@
 import { HotkeyItem, getHotkeyHandler } from '@mantine/hooks';
 import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';

+/**
+ * Whether a value should be sent to the server
+ * An undefined initial value means that the value is unknown, for example when several
+ * entries are being edited and they do not agree on a value
+ * It is shown as an empty field, so submitting it would overwrite data the user has not edited
+ */
+export function shouldSubmitValue(
+  valueToSubmit: string,
+  initialText: string | undefined,
+  allowSubmitSameValue?: boolean,
+): boolean {
+  if (allowSubmitSameValue) {
+    return true;
+  }
+  return valueToSubmit !== (initialText ?? '');
+}
+
 interface UseReactiveTextInputReturn {
  value: string;
  onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
@@ -9,7 +26,8 @@ interface UseReactiveTextInputReturn {
 }

 export default function useReactiveTextInput(
-  initialText: string,
+  /** undefined represents an unknown value, the field is shown empty and blurring it submits nothing */
+  initialText: string | undefined,
  submitCallback: (newValue: string) => void,
  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
  options?: {
@@ -22,7 +40,7 @@ export default function useReactiveTextInput(
    allowKeyboardNavigation?: boolean;
  },
 ): UseReactiveTextInputReturn {
-  const [text, setText] = useState<string>(initialText);
+  const [text, setText] = useState<string>(initialText ?? '');
  // track whether we are submitting via a submit key (eg enter) and avoid submitting again on blur
  const isKeyboardSubmitting = useRef(false);
  // track escape to prevent the subsequent blur from submitting
@@ -57,8 +75,7 @@ export default function useReactiveTextInput(
   */
  const handleSubmit = useCallback(
    (valueToSubmit: string) => {
-      // No need to update if it hasn't changed
-      if (valueToSubmit === initialText && !options?.allowSubmitSameValue) {
+      if (!shouldSubmitValue(valueToSubmit, initialText, options?.allowSubmitSameValue)) {
        options?.onCancelUpdate?.();
      } else {
        const cleanVal = valueToSubmit.trim();
@@ -86,10 +103,10 @@ export default function useReactiveTextInput(
  const handleEscape = useCallback(() => {
    isEscaping.current = true;
    // No need to update if it hasn't changed
-    setText(initialText);
+    setText(initialText ?? '');
    // force the text to be the initial value
    if (ref.current) {
-      ref.current.value = initialText;
+      ref.current.value = initialText ?? '';
    }
    options?.onCancelUpdate?.();
    setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before blurring
@@ -41,7 +41,10 @@ export default function TimeInput<T extends string>({
   * @description Resets input value to given
   */
  const resetValue = useCallback(() => {
-    if (typeof time !== 'number' || isNaN(time)) {
+    if (time === undefined) {
+      // there is no value to show, we leave the field empty so that the placeholder is visible
+      setValue('');
+    } else if (typeof time !== 'number' || isNaN(time)) {
      setValue('00:00:00');
    } else if (shouldFormat) {
      setValue(formatTime(time));
@@ -0,0 +1,14 @@
+.kbd {
+  display: inline-block;
+  min-width: 1.5rem;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 2px;
+  background-color: $gray-1100;
+  color: $ui-white;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+  font-family: monospace;
+  font-size: calc(1rem - 4px);
+  line-height: 1.5;
+  text-align: center;
+  white-space: nowrap;
+}
@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+import style from './Kbd.module.scss';
+
+export default function Kbd({ children }: PropsWithChildren) {
+  return <kbd className={style.kbd}>{children}</kbd>;
+}
@@ -38,8 +38,6 @@ $progress-bar-br: 3px;
 .multiprogress-bar__indicator-bar {
  background-color: var(--background-color-override, $ui-black);
  opacity: 0.8;
-  transition: 1s linear;
-  transition-property: width;

  .multiprogress-bar--ignore-css-override & {
    background-color: $ui-black;
@@ -1,5 +1,6 @@
 import { MaybeNumber } from 'ontime-types';

+import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
 import { getProgress } from '../../utils/getProgress';
 import { cx } from '../../utils/styleUtils';

@@ -34,7 +35,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
    className = '',
  } = props;

-  const percentRemaining = 100 - getProgress(now, complete);
+  const percentRemaining = 100 - useAnimatedProgress(now, complete);
  const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
  const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
  const isOvertime = now !== null && now < 0;
@@ -8,6 +8,7 @@ import { useLocation } from 'react-router';
 import { isLocalhost, supportsFullscreen } from '../../../externals';
 import { canUseWakeLock, useKeepAwakeOptions } from '../../../features/keep-awake/useWakeLock';
 import { navigatorConstants } from '../../../viewerConfig';
+import useUrlPresets from '../../hooks-query/useUrlPresets';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
@@ -105,6 +106,8 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
                {route.label}
              </ClientLink>
            ))}
+
+            <PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
          </div>

          {isLocalhost && (
@@ -117,3 +120,27 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
    </Dialog.Root>
  );
 }
+
+function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean; onClose: () => void }) {
+  const location = useLocation();
+  const { data: urlPresets } = useUrlPresets();
+  const navPresets = urlPresets.filter((preset) => preset.enabled && preset.displayInNav);
+
+  if (navPresets.length === 0) return null;
+
+  return (
+    <>
+      <hr className={style.separator} />
+      {navPresets.map((preset) => (
+        <ClientLink
+          key={preset.alias}
+          to={`preset/${preset.alias}`}
+          current={location.pathname === `/preset/${preset.alias}`}
+          postAction={isSmallScreen ? onClose : undefined}
+        >
+          {preset.alias}
+        </ClientLink>
+      ))}
+    </>
+  );
+}
@@ -1,6 +1,8 @@
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import { memo } from 'react';
+import { useSearchParams } from 'react-router';

+import { hasCustomParams, useSavedViewParams } from '../../stores/savedViewParams';
 import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
 import FloatingNavigation from './floating-navigation/FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
@@ -17,6 +19,9 @@ export default memo(ViewNavigationMenu);
 function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
  const [isMenuOpen, menuHandler] = useDisclosure();
  const { open: showEditFormDrawer } = useViewParamsEditorStore();
+  const [searchParams] = useSearchParams();
+  const savedParams = useSavedViewParams((store) => store.params);
+  const hasSavedChanges = hasCustomParams(searchParams) || Object.keys(savedParams).length > 0;

  useHotkeys([
    [
@@ -46,6 +51,7 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
      <FloatingNavigation
        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
+        hasSavedChanges={hasSavedChanges}
      />
      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
    </>
@@ -1,4 +1,29 @@
-.linkIcon {
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
  margin-left: auto;
+}
+
+.linkIcon {
  @include rotate-fourty-five;
 }
+
+.indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: $active-indicator;
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.clear {
+  opacity: 0.6;
+  transition: opacity $transition-time-action;
+
+  &:hover,
+  &:focus-visible {
+    opacity: 1;
+  }
+}
@@ -1,9 +1,17 @@
-import { PropsWithChildren } from 'react';
-import { IoArrowUp } from 'react-icons/io5';
-import { useNavigate } from 'react-router';
+import { MouseEvent, PropsWithChildren } from 'react';
+import { IoArrowUp, IoCloseOutline } from 'react-icons/io5';
+import { useLocation, useNavigate, useSearchParams } from 'react-router';

 import { useElectronEvent } from '../../../hooks/useElectronEvent';
+import {
+  hasCustomParams,
+  reservedParams,
+  stripReservedParams,
+  useSavedViewParams,
+} 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';
@@ -16,32 +24,104 @@ interface ClientLinkProps {

 export default function ClientLink({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
  const { isElectron } = useElectronEvent();
-  const navigate = useNavigate();

  if (isElectron) {
    return (
-      <NavigationMenuItem
-        active={current}
-        onClick={() => {
-          handleLinks(to);
-          postAction?.();
-        }}
-      >
+      <ElectronNavigationItem current={current} to={to} postAction={postAction}>
        {children}
-        <IoArrowUp className={style.linkIcon} />
-      </NavigationMenuItem>
+      </ElectronNavigationItem>
    );
  }

  return (
-    <NavigationMenuItem
-      active={current}
-      onClick={() => {
-        navigate(`/${to}`);
-        postAction?.();
-      }}
-    >
+    <BrowserNavigationItem current={current} to={to} postAction={postAction}>
      {children}
+    </BrowserNavigationItem>
+  );
+}
+
+function ElectronNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
+  const navigateToLink = () => {
+    handleLinks(to);
+    postAction?.();
+  };
+
+  return (
+    <NavigationMenuItem active={current} onClick={navigateToLink}>
+      {children}
+      <span className={style.trailing}>
+        <IoArrowUp className={style.linkIcon} />
+      </span>
+    </NavigationMenuItem>
+  );
+}
+
+function BrowserNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { params: savedParams, save, clear } = useSavedViewParams();
+
+  /**
+   * Save the params of the view we are leaving and resolve the destination,
+   * restoring any params previously saved for the target view.
+   */
+  const resolveDestination = () => {
+    const currentView = location.pathname.replace(/^\//, '');
+    save(currentView, stripReservedParams(location.search));
+    const restored = savedParams[to];
+    return `${to}${restored ? `?${restored}` : ''}`;
+  };
+
+  const isCustomised = current ? hasCustomParams(searchParams) : Boolean(savedParams[to]);
+
+  const navigateToLink = () => {
+    const destination = resolveDestination();
+    navigate(`/${destination}`);
+    postAction?.();
+  };
+
+  /**
+   * Clear the saved settings for this route without navigating to it.
+   * When it is the current view, also reset the live URL to its defaults.
+   */
+  const clearViewSettings = (event: MouseEvent) => {
+    event.stopPropagation();
+    clear(to);
+
+    // if mounted, clear the URL params
+    if (current) {
+      const preserved = new URLSearchParams();
+      reservedParams.forEach((key) => {
+        const value = searchParams.get(key);
+        if (value !== null) preserved.set(key, value);
+      });
+      setSearchParams(preserved);
+    }
+  };
+
+  return (
+    <NavigationMenuItem active={current} onClick={navigateToLink}>
+      {children}
+      {isCustomised && (
+        <span className={style.trailing}>
+          <span className={style.indicator} aria-hidden data-testid='client-link__saved-indicator' />
+          <Tooltip
+            text='Reset to default'
+            render={
+              <IconButton
+                variant='ghosted-white'
+                size='small'
+                className={style.clear}
+                aria-label='Reset to default'
+                onClick={clearViewSettings}
+              />
+            }
+          >
+            <IoCloseOutline />
+          </Tooltip>
+        </span>
+      )}
    </NavigationMenuItem>
  );
 }
@@ -22,3 +22,19 @@
  top: 0;
  z-index: $zindex-nav;
 }
+
+.buttonWithIndicator {
+  position: relative;
+  display: inline-flex;
+}
+
+.indicator {
+  position: absolute;
+  top: -0.15rem;
+  right: -0.15rem;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  background-color: $active-indicator;
+  pointer-events: none;
+}
@@ -9,9 +9,10 @@ import style from './FloatingNavigation.module.scss';
 interface FloatingNavigationProps {
  toggleMenu?: () => void;
  toggleSettings?: () => void;
+  hasSavedChanges?: boolean;
 }

-export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
+export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSavedChanges }: FloatingNavigationProps) {
  const isButtonShown = useFadeOutOnInactivity(true);

  return (
@@ -20,15 +21,18 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings }: Float
      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
    >
      {toggleMenu && (
-        <IconButton
-          variant='subtle-white'
-          size='xlarge'
-          onClick={toggleMenu}
-          aria-label='toggle menu'
-          data-testid='navigation__toggle-menu'
-        >
-          <IoApps />
-        </IconButton>
+        <div className={style.buttonWithIndicator}>
+          <IconButton
+            variant='subtle-white'
+            size='xlarge'
+            onClick={toggleMenu}
+            aria-label='toggle menu'
+            data-testid='navigation__toggle-menu'
+          >
+            <IoApps />
+          </IconButton>
+          {hasSavedChanges && <span className={style.indicator} data-testid='navigation__saved-indicator' />}
+        </div>
      )}
      {toggleSettings && (
        <IconButton
@@ -14,6 +14,4 @@ $progress-bar-br: 3px;
 .progress-bar__indicator {
  height: $progress-bar-size;
  background-color: var(--timer-progress-override, $accent-color);
-  transition: 1s linear;
-  transition-property: width;
 }
@@ -1,6 +1,6 @@
 import { MaybeNumber } from 'ontime-types';

-import { getProgress } from '../../utils/getProgress';
+import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';

 import './ProgressBar.scss';

@@ -12,7 +12,7 @@ interface ProgressBarProps {

 export default function ProgressBar(props: ProgressBarProps) {
  const { current, duration, className } = props;
-  const progress = getProgress(current, duration);
+  const progress = useAnimatedProgress(current, duration);

  return (
    <div className={`progress-bar__bg ${className}`}>
@@ -16,13 +16,21 @@ interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
  options: SelectOption<T>[];
  fluid?: boolean;
  size?: 'medium' | 'large';
+  /** shown when the value is null, used to represent values which do not agree */
+  placeholder?: string;
 }

-export default function Select<T>({ options, fluid, size = 'medium', ...selectRootProps }: SelectProps<T>) {
+export default function Select<T>({
+  options,
+  fluid,
+  size = 'medium',
+  placeholder,
+  ...selectRootProps
+}: SelectProps<T>) {
  return (
    <BaseSelect.Root items={options} {...selectRootProps}>
      <BaseSelect.Trigger className={cx([styles.select, styles[size], fluid && styles.fluid])}>
-        <BaseSelect.Value />
+        <BaseSelect.Value placeholder={placeholder} />
        <BaseSelect.Icon className={styles.selectIcon}>
          <LuChevronsUpDown />
        </BaseSelect.Icon>
@@ -4,7 +4,9 @@
  color: $white-10;

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

@@ -13,6 +15,6 @@
    margin-inline: auto;
    font-weight: 600;
    font-size: 2em;
-    max-width: 600px;
+    max-width: min(100%, 600px);
  }
 }
@@ -8,9 +8,12 @@
    padding-top: 10vh;
  }

-  .empty {
-    width: 100%;
-    opacity: 0.8;
+  .inline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1em;
  }

  .text {
@@ -1,18 +1,33 @@
-import EmptyImage from '../../../assets/images/empty.svg?react';
+import { SupportedEntry } from 'ontime-types';
+import { IoAdd } from 'react-icons/io5';
+
+import { useTranslation } from '../../../translation/TranslationProvider';
+import Button from '../buttons/Button';
+import Empty from './Empty';

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

 interface EmptyTableBodyProps {
-  text: string;
+  handleAddNew?: (type: SupportedEntry) => void;
 }

-export default function EmptyTableBody({ text }: EmptyTableBodyProps) {
+export default function EmptyTableBody({ handleAddNew }: EmptyTableBodyProps) {
+  const { getLocalizedString } = useTranslation();
+  const text = getLocalizedString('common.no_data');
  return (
    <tbody className={style.emptyContainer}>
      <tr>
        <td colSpan={99} className={style.emptyCell}>
-          <EmptyImage className={style.empty} />
-          {text && <span className={style.text}>{text}</span>}
+          <Empty injectedStyles={{ marginTop: '5vh' }} />
+          <span className={style.text}>{text}</span>
+          {handleAddNew && (
+            <div className={style.inline}>
+              <Button onClick={() => handleAddNew(SupportedEntry.Event)} variant='primary' size='large'>
+                <IoAdd />
+                Create Event
+              </Button>
+            </div>
+          )}
        </td>
      </tr>
    </tbody>
@@ -29,6 +29,11 @@
  }
 }

+/* values do not agree, we show an empty track instead of a thumb position */
+.mixed .thumb {
+  visibility: hidden;
+}
+
 .medium {
  padding: 2px;
  --width: calc(2.5rem + 4px);
@@ -6,11 +6,13 @@ import style from './Switch.module.scss';

 interface SwitchProps extends BaseSwitch.Root.Props {
  size?: 'medium' | 'large';
+  /** the switch represents several values which do not agree, we hide the thumb */
+  mixed?: boolean;
 }

-export default function Switch({ size = 'medium', ...switchProps }: SwitchProps) {
+export default function Switch({ size = 'medium', mixed, ...switchProps }: SwitchProps) {
  return (
-    <BaseSwitch.Root className={cx([style.switch, style[size]])} {...switchProps}>
+    <BaseSwitch.Root className={cx([style.switch, style[size], mixed && style.mixed])} {...switchProps}>
      <BaseSwitch.Thumb className={style.thumb} />
    </BaseSwitch.Root>
  );
@@ -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());
  };

@@ -0,0 +1,76 @@
+import { OntimeEvent, OntimeGroup, RundownEntries, SupportedEntry } from 'ontime-types';
+
+import { applyPatchToEvents, canPredictBatchResult } from '../entryAction.utils';
+
+function makeEntries(): RundownEntries {
+  return {
+    '1': { type: SupportedEntry.Event, id: '1', title: 'one', custom: { lx: 'a', sound: 'x' } } as OntimeEvent,
+    '2': { type: SupportedEntry.Event, id: '2', title: 'two', custom: { lx: 'b' } } as OntimeEvent,
+    '3': { type: SupportedEntry.Event, id: '3', title: 'three', custom: {} } as OntimeEvent,
+    group: { type: SupportedEntry.Group, id: 'group', title: 'a group', custom: {} } as OntimeGroup,
+  };
+}
+
+describe('applyPatchToEvents()', () => {
+  it('applies the patch to the given events only', () => {
+    const patched = applyPatchToEvents(makeEntries(), ['1', '2'], { title: 'patched' });
+
+    expect((patched['1'] as OntimeEvent).title).toBe('patched');
+    expect((patched['2'] as OntimeEvent).title).toBe('patched');
+    expect((patched['3'] as OntimeEvent).title).toBe('three');
+  });
+
+  it('patches custom fields instead of replacing them', () => {
+    const patched = applyPatchToEvents(makeEntries(), ['1', '2'], { custom: { lx: 'new' } });
+
+    // the field which was not part of the patch must survive
+    expect((patched['1'] as OntimeEvent).custom).toStrictEqual({ lx: 'new', sound: 'x' });
+    expect((patched['2'] as OntimeEvent).custom).toStrictEqual({ lx: 'new' });
+  });
+
+  it('keeps the existing custom fields when the patch has none', () => {
+    const patched = applyPatchToEvents(makeEntries(), ['1'], { title: 'patched' });
+
+    expect((patched['1'] as OntimeEvent).custom).toStrictEqual({ lx: 'a', sound: 'x' });
+  });
+
+  it('ignores ids which are not in the rundown', () => {
+    const patched = applyPatchToEvents(makeEntries(), ['1', 'does-not-exist'], { title: 'patched' });
+
+    expect(Object.keys(patched)).toStrictEqual(['1', '2', '3', 'group']);
+    expect((patched['1'] as OntimeEvent).title).toBe('patched');
+  });
+
+  it('ignores entries which are not events', () => {
+    const patched = applyPatchToEvents(makeEntries(), ['group'], { title: 'patched' });
+
+    expect((patched.group as OntimeGroup).title).toBe('a group');
+  });
+
+  it('does not mutate the given entries', () => {
+    const entries = makeEntries();
+    applyPatchToEvents(entries, ['1'], { title: 'patched', custom: { lx: 'new' } });
+
+    expect((entries['1'] as OntimeEvent).title).toBe('one');
+    expect((entries['1'] as OntimeEvent).custom).toStrictEqual({ lx: 'a', sound: 'x' });
+  });
+
+  it('handles repeated ids', () => {
+    const patched = applyPatchToEvents(makeEntries(), ['1', '1'], { title: 'patched' });
+
+    expect((patched['1'] as OntimeEvent).title).toBe('patched');
+  });
+});
+
+describe('canPredictBatchResult()', () => {
+  it('allows resolving patches which do not affect the schedule', () => {
+    expect(canPredictBatchResult({ title: 'a title' })).toBe(true);
+    expect(canPredictBatchResult({ colour: 'red', flag: true })).toBe(true);
+  });
+
+  it('defers to the server when the duration changes', () => {
+    // a duration cascades into the start and end of every linked event
+    expect(canPredictBatchResult({ duration: 1000 })).toBe(false);
+    expect(canPredictBatchResult({ title: 'a title', duration: 1000 })).toBe(false);
+  });
+});
@@ -0,0 +1,39 @@
+import { EntryId, OntimeEvent, RundownEntries, isOntimeEvent } from 'ontime-types';
+
+/**
+ * Applies a patch to a set of events, used to optimistically resolve a batch edit
+ * Entries which are missing or are not events are left untouched, mirroring the server
+ * @returns a new entries object, the given entries are not mutated
+ */
+export function applyPatchToEvents(
+  entries: RundownEntries,
+  ids: EntryId[],
+  patch: Partial<OntimeEvent>,
+): RundownEntries {
+  const patchedEntries = { ...entries };
+
+  for (const id of new Set(ids)) {
+    const entry = patchedEntries[id];
+    if (!isOntimeEvent(entry)) {
+      continue;
+    }
+
+    patchedEntries[id] = {
+      ...entry,
+      ...patch,
+      // custom fields are patched, not replaced
+      custom: patch.custom ? { ...entry.custom, ...patch.custom } : entry.custom,
+    };
+  }
+
+  return patchedEntries;
+}
+
+/**
+ * Whether the result of a batch edit can be resolved without the server
+ * Changing the duration cascades through the rundown, so the resulting
+ * schedule is only known once the server has recalculated it
+ */
+export function canPredictBatchResult(patch: Partial<OntimeEvent>): boolean {
+  return !('duration' in patch);
+}
@@ -0,0 +1,41 @@
+import { MaybeNumber, Playback } from 'ontime-types';
+import { useEffect, useRef, useState } from 'react';
+
+import { getProgress } from '../utils/getProgress';
+import { usePlayback } from './useSocket';
+
+/**
+ * Returns the live completion percentage (0–100) of a countdown, interpolated locally.
+ */
+export function useAnimatedProgress(current: MaybeNumber, duration: MaybeNumber): number {
+  const playback = usePlayback();
+  const isRunning = playback === Playback.Play || playback === Playback.Roll;
+
+  const baseline = useRef({ current, at: performance.now() });
+  const [, setTick] = useState(0);
+
+  // there is only something to animate while a running timer is counting down towards 0
+  const shouldAnimate = isRunning && current !== null && current > 0 && duration !== null;
+
+  // re-anchor to the authoritative value whenever the server pushes a new timer update
+  useEffect(() => {
+    baseline.current = { current, at: performance.now() };
+  }, [current, duration, playback]);
+
+  // while counting down, re-render every animation frame so the derived progress stays smooth
+  useEffect(() => {
+    if (!shouldAnimate) {
+      return;
+    }
+    let frame = requestAnimationFrame(function tick() {
+      setTick((value) => value + 1);
+      frame = requestAnimationFrame(tick);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate]);
+
+  // derive from the anchor plus elapsed time at render; frozen to the anchor when not running
+  const anchored = baseline.current.current;
+  const value = isRunning && anchored !== null ? anchored - (performance.now() - baseline.current.at) : anchored;
+  return getProgress(value, duration);
+}
@@ -1,7 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  EntryId,
-  InsertOptions,
  MaybeString,
  OntimeDelay,
  OntimeEntry,
@@ -16,6 +15,7 @@ import {
  TimeStrategy,
  isOntimeEvent,
  isOntimeGroup,
+  isOntimeMilestone,
 } from 'ontime-types';
 import {
  MILLIS_PER_SECOND,
@@ -52,6 +52,7 @@ import {
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
+import { applyPatchToEvents, canPredictBatchResult } from './entryAction.utils';

 export type EventOptions = Partial<{
  // options of any new entries (event / delay / group)
@@ -59,9 +60,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.
 */
@@ -82,6 +89,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
    defaultDangerTime,
    defaultTimerType,
    defaultEndAction,
+    inheritGroupColour,
  } = useEditorSettings();

  const resolveCurrentRundownQueryKey = useCallback(() => {
@@ -118,7 +126,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 });
@@ -147,8 +155,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);
@@ -191,7 +200,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) {
@@ -203,8 +212,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;
@@ -239,6 +248,14 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
        }
      }

+      if (inheritGroupColour && (isOntimeEvent(newEntry) || isOntimeMilestone(newEntry)) && !newEntry.colour) {
+        const parentId = resolveInsertParent(rundownData, newEntry);
+        const maybeParent = parentId ? rundownData.entries[parentId] : null;
+        if (maybeParent && isOntimeGroup(maybeParent)) {
+          newEntry.colour = maybeParent.colour;
+        }
+      }
+
      try {
        await addEntryMutation([rundownId, newEntry]);
      } catch (error) {
@@ -254,6 +271,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      defaultTimerType,
      defaultEndAction,
      defaultTimeStrategy,
+      inheritGroupColour,
      addEntryMutation,
    ],
  );
@@ -273,7 +291,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) {
@@ -466,21 +484,9 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      // Snapshot the previous value
      const previousRundown = queryClient.getQueryData<Rundown>(queryKey);

-      if (previousRundown) {
-        const eventIds = new Set(data.ids);
-        const newRundown = { ...previousRundown.entries };
-
-        eventIds.forEach((eventId) => {
-          if (Object.hasOwn(newRundown, eventId)) {
-            const event = newRundown[eventId];
-            if (isOntimeEvent(event)) {
-              newRundown[eventId] = {
-                ...event,
-                ...data,
-              };
-            }
-          }
-        });
+      // when the result cannot be resolved here we wait for the recalculated rundown from the server
+      if (previousRundown && canPredictBatchResult(data.data)) {
+        const newRundown = applyPatchToEvents(previousRundown.entries, data.ids, data.data);

        queryClient.setQueryData<Rundown>(queryKey, {
          id: previousRundown.id,
@@ -1046,7 +1052,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,87 @@
+import { hasCustomParams, stripReservedParams, useSavedViewParams } from '../savedViewParams';
+
+describe('savedViewParams store', () => {
+  beforeEach(() => {
+    useSavedViewParams.getState().clearAll();
+  });
+
+  it('saves and restores params per view', () => {
+    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
+    useSavedViewParams.getState().save('backstage', 'showProgress=false');
+
+    expect(useSavedViewParams.getState().params.timer).toBe('hideSeconds=true');
+    expect(useSavedViewParams.getState().params.backstage).toBe('showProgress=false');
+  });
+
+  it('overwrites the saved params for a view on subsequent saves', () => {
+    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
+    useSavedViewParams.getState().save('timer', 'hideSeconds=false');
+
+    expect(useSavedViewParams.getState().params.timer).toBe('hideSeconds=false');
+  });
+
+  it('does not store an entry for an empty search string', () => {
+    useSavedViewParams.getState().save('timer', '');
+
+    expect(useSavedViewParams.getState().params).toEqual({});
+  });
+
+  it('removes a previously saved entry when saved with an empty search string', () => {
+    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
+    useSavedViewParams.getState().save('timer', '');
+
+    expect(useSavedViewParams.getState().params).toEqual({});
+  });
+
+  it('ignores empty view keys', () => {
+    useSavedViewParams.getState().save('', 'hideSeconds=true');
+
+    expect(useSavedViewParams.getState().params).toEqual({});
+  });
+
+  it('clears the saved params for a single view without touching others', () => {
+    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
+    useSavedViewParams.getState().save('backstage', 'showProgress=false');
+    useSavedViewParams.getState().clear('timer');
+
+    expect(useSavedViewParams.getState().params).toEqual({ backstage: 'showProgress=false' });
+  });
+
+  it('is a no-op when clearing a view without saved params', () => {
+    useSavedViewParams.getState().save('backstage', 'showProgress=false');
+    useSavedViewParams.getState().clear('timer');
+
+    expect(useSavedViewParams.getState().params).toEqual({ backstage: 'showProgress=false' });
+  });
+
+  it('clears all saved params', () => {
+    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
+    useSavedViewParams.getState().clearAll();
+
+    expect(useSavedViewParams.getState().params).toEqual({});
+  });
+});
+
+describe('stripReservedParams', () => {
+  it('removes reserved auth/preset params while keeping view customisation', () => {
+    expect(stripReservedParams('hideSeconds=true&token=abc&n=1&alias=my')).toBe('hideSeconds=true');
+  });
+
+  it('returns an empty string when only reserved params are present', () => {
+    expect(stripReservedParams('token=abc&n=1&alias=my')).toBe('');
+  });
+});
+
+describe('hasCustomParams', () => {
+  it('is true when a non-reserved param is present', () => {
+    expect(hasCustomParams(new URLSearchParams('hideSeconds=true&token=abc'))).toBe(true);
+  });
+
+  it('is false when only reserved params are present', () => {
+    expect(hasCustomParams(new URLSearchParams('token=abc&n=1&alias=my'))).toBe(false);
+  });
+
+  it('is false when there are no params', () => {
+    expect(hasCustomParams(new URLSearchParams(''))).toBe(false);
+  });
+});
@@ -12,8 +12,10 @@ type EditorSettingsStore = {
  defaultDangerTime: string;
  defaultTimerType: TimerType;
  defaultEndAction: EndAction;
+  inheritGroupColour: boolean;
  setDefaultDuration: (defaultDuration: string) => void;
  setLinkPrevious: (linkPrevious: boolean) => void;
+  setInheritGroupColour: (inheritGroupColour: boolean) => void;
  setTimeStrategy: (timeStrategy: TimeStrategy) => void;
  setWarnTime: (warnTime: string) => void;
  setDangerTime: (dangerTime: string) => void;
@@ -29,6 +31,7 @@ export const editorSettingsDefaults = {
  dangerTime: '00:01:00', // 60000 same as backend
  timerType: TimerType.CountDown,
  endAction: EndAction.None,
+  inheritGroupColour: false,
 };

 enum EditorSettingsKeys {
@@ -39,6 +42,7 @@ enum EditorSettingsKeys {
  DefaultDangerTime = 'ontime-default-danger-time',
  DefaultTimerType = 'ontime-default-timer-type',
  DefaultEndAction = 'ontime-default-end-action',
+  InheritGroupColour = 'ontime-inherit-group-colour',
 }

 export const useEditorSettings = create<EditorSettingsStore>((set) => {
@@ -59,6 +63,10 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
      localStorage.getItem(EditorSettingsKeys.DefaultEndAction),
      editorSettingsDefaults.endAction,
    ),
+    inheritGroupColour: booleanFromLocalStorage(
+      EditorSettingsKeys.InheritGroupColour,
+      editorSettingsDefaults.inheritGroupColour,
+    ),

    setDefaultDuration: (defaultDuration) =>
      set(() => {
@@ -97,5 +105,10 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
        localStorage.setItem(EditorSettingsKeys.DefaultEndAction, String(defaultEndAction));
        return { defaultEndAction };
      }),
+    setInheritGroupColour: (inheritGroupColour) =>
+      set(() => {
+        localStorage.setItem(EditorSettingsKeys.InheritGroupColour, String(inheritGroupColour));
+        return { inheritGroupColour };
+      }),
  };
 });
@@ -0,0 +1,62 @@
+import { create } from 'zustand';
+
+// params that are auth/preset markers, not user view customisation (see common/utils/urlPresets.ts)
+export const reservedParams = new Set(['token', 'n', 'alias']);
+
+interface SavedViewParamsStore {
+  params: Record<string, string>; // view key (e.g. "timer") -> search string without leading "?"
+  save: (view: string, search: string) => void;
+  clear: (view: string) => void;
+  clearAll: () => void;
+}
+
+/**
+ * Remembers the last view parameters used for each view so they can be
+ * restored when the user navigates back to that view through the menu.
+ * In-memory only: persists across SPA navigation, resets on a full page reload.
+ */
+export const useSavedViewParams = create<SavedViewParamsStore>((set) => ({
+  params: {},
+  save: (view, search) =>
+    set((state) => {
+      // ignore empty view keys and do not store empty entries, so the
+      // "saved changes" indicator only reflects genuine customisation
+      if (!view) return state;
+      const params = { ...state.params };
+      if (search) {
+        params[view] = search;
+      } else {
+        delete params[view];
+      }
+      return { params };
+    }),
+  clear: (view) =>
+    set((state) => {
+      if (!state.params[view]) return state;
+      const params = { ...state.params };
+      delete params[view];
+      return { params };
+    }),
+  clearAll: () => set({ params: {} }),
+}));
+
+/**
+ * Removes reserved (auth/preset) params from a search string, keeping only
+ * genuine view customisation.
+ */
+export function stripReservedParams(search: string): string {
+  const sp = new URLSearchParams(search);
+  reservedParams.forEach((key) => sp.delete(key));
+  return sp.toString();
+}
+
+/**
+ * Whether the search params contain any genuine view customisation,
+ * ignoring reserved params.
+ */
+export function hasCustomParams(searchParams: URLSearchParams): boolean {
+  for (const key of searchParams.keys()) {
+    if (!reservedParams.has(key)) return true;
+  }
+  return false;
+}
@@ -1,4 +1,4 @@
-import { linkToOtherHost } from '../linkUtils';
+import { hostToBaseUrl, linkToOtherHost } from '../linkUtils';

 describe('linkToOTherHost', () => {
  it('should handle electron links', () => {
@@ -22,3 +22,18 @@ describe('linkToOTherHost', () => {
    expect(destination).toBe('https://app.getontime.no/user-hash/path');
  });
 });
+
+describe('hostToBaseUrl', () => {
+  it('uses http when the page is plain http', () => {
+    expect(hostToBaseUrl('192.168.10.166', 4001, 'http://localhost:4001')).toBe('http://192.168.10.166:4001');
+  });
+
+  it('keeps https when the page reaches the server over TLS on the same port', () => {
+    expect(hostToBaseUrl('192.168.10.166', 4001, 'https://localhost:4001')).toBe('https://192.168.10.166:4001');
+  });
+
+  it('falls back to http when the page is https on a different port (TLS proxy)', () => {
+    // the raw server port does not speak TLS, an https link to it would fail
+    expect(hostToBaseUrl('192.168.10.166', 4001, 'https://ontime.example.com')).toBe('http://192.168.10.166:4001');
+  });
+});
@@ -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('');
+  });
+});
@@ -37,6 +37,16 @@ describe('getRouteFromPreset()', () => {
      alias: 'demopage',
      target: OntimeView.Timer,
      search: 'user=guest',
+      displayInNav: false,
+      options: {},
+    },
+  ];
+  const disabledPresets: URLPreset[] = [
+    {
+      enabled: false,
+      alias: 'demopage',
+      target: OntimeView.Timer,
+      search: 'user=guest',
      options: {},
    },
  ];
@@ -47,6 +57,16 @@ describe('getRouteFromPreset()', () => {
    expect(getRouteFromPreset(location, presets)).toStrictEqual('timer?user=guest&alias=demopage');
  });

+  it('checks if the current location matches an enabled preset target', () => {
+    const location = resolvePath('/timer');
+    expect(getRouteFromPreset(location, presets)).toStrictEqual('timer?user=guest&alias=demopage');
+  });
+
+  it('does not redirect disabled presets', () => {
+    const location = resolvePath('/demopage');
+    expect(getRouteFromPreset(location, disabledPresets)).toBeNull();
+  });
+
  it('returns null when already on a preset path', () => {
    const location = resolvePath('/preset/demopage');
    expect(getRouteFromPreset(location, presets)).toBeNull();
@@ -86,6 +106,11 @@ describe('getRouteFromPreset()', () => {
      const location = resolvePath('/demopage?n=1&token=123');
      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&n=1&token=123');
    });
+
+    it('redirects stale unwrapped params back to the saved preset params while preserving feature params', () => {
+      const location = resolvePath('/timer?user=admin&alias=demopage&n=1&token=123');
+      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&n=1&token=123');
+    });
  });

  describe('cuesheet presets', () => {
@@ -95,6 +120,7 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-4685d6',
        target: OntimeView.Cuesheet,
        search: '',
+        displayInNav: false,
        options: {
          read: 'full',
          write: '-',
@@ -107,6 +133,7 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-basic',
        target: OntimeView.Cuesheet,
        search: '',
+        displayInNav: false,
      },
    ];
    const cuesheetPresetWithNavLock: URLPreset[] = [
@@ -115,6 +142,7 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-locked',
        target: OntimeView.Cuesheet,
        search: 'n=1',
+        displayInNav: false,
      },
    ];

@@ -196,6 +224,7 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
+        displayInNav: false,
      },
    ],
    [
@@ -207,6 +236,7 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
+        displayInNav: false,
      },
    ],
    [
@@ -218,6 +248,7 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
+        displayInNav: false,
      },
    ],
    [
@@ -229,6 +260,7 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
+        displayInNav: false,
      },
    ],
  ])('should generate URL preset options for %s', (_description, alias, url, expected) => {
@@ -37,7 +37,12 @@ export function handleLinks(
  event?.preventDefault();

  const destination = new URL(externalServerUrl);
-  destination.pathname = externalBaseURI ? `${externalBaseURI}/${location}` : location;
+  // split off any query string so it is not encoded into the pathname
+  const [pathname, search] = location.split('?');
+  destination.pathname = externalBaseURI ? `${externalBaseURI}/${pathname}` : pathname;
+  if (search) {
+    destination.search = search;
+  }
  openLink(destination.toString());
 }

@@ -54,3 +59,17 @@ export function linkToOtherHost(
  }
  return destination.toString();
 }
+
+/**
+ * Builds a base URL for reaching the Ontime server on a given network interface.
+ * The Ontime server itself only speaks HTTP, so we only keep https when the page
+ * already reaches the server over TLS on that same port (eg. a proxy in front of it);
+ * any other explicit server port gets http.
+ * externalServerUrl is used for testing
+ */
+export function hostToBaseUrl(host: string, port: number, externalServerUrl: string = serverURL): string {
+  const page = new URL(externalServerUrl);
+  const pagePort = page.port === '' ? (page.protocol === 'https:' ? 443 : 80) : Number(page.port);
+  const scheme = page.protocol === 'https:' && pagePort === port ? 'https' : 'http';
+  return `${scheme}://${host}:${port}`;
+}
@@ -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');
 }
@@ -194,6 +194,7 @@ export function generateUrlPresetOptions(alias: string, userUrl: string): URLPre
    target: path,
    search: url.searchParams.toString(),
    enabled: true,
+    displayInNav: false,
  };
 }

@@ -38,7 +38,7 @@ $inner-padding: 1rem;
 .section {
  position: relative;
  margin-top: 2rem;
-  max-width: 850px;
+  max-width: 1024px;
 }

 .indent {
@@ -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,
+  };
+}
@@ -1,7 +1,8 @@
-import { URLPreset } from 'ontime-types';
+import { OntimeView, URLPreset } from 'ontime-types';
 import { useState } from 'react';
 import { IoAdd, IoOpenOutline, IoPencil, IoTrash } from 'react-icons/io5';

+import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
@@ -22,13 +23,23 @@ const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';

 export default function URLPresets() {
  const [formState, setFormState] = useState<FormState>({ isOpen: false, preset: undefined });
+  const [actionError, setActionError] = useState<string | null>(null);
  const { data, status } = useUrlPresets();
-  const { deletePreset, isMutating } = useUpdateUrlPreset();
+  const { updatePreset, deletePreset, isMutating } = useUpdateUrlPreset();

  const openNewForm = () => setFormState({ isOpen: true });
  const openEditForm = (preset: URLPreset) => setFormState({ isOpen: true, preset });
  const closeForm = () => setFormState({ isOpen: false, preset: undefined });

+  const persistPreset = async (preset: URLPreset) => {
+    setActionError(null);
+    try {
+      await updatePreset(preset.alias, preset);
+    } catch (error) {
+      setActionError(maybeAxiosError(error));
+    }
+  };
+
  return (
    <Panel.Section>
      <Panel.Card>
@@ -53,10 +64,12 @@ export default function URLPresets() {
        <Panel.Section>
          <Panel.Loader isLoading={status === 'pending'} />
          {formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
+          {actionError && <Panel.Error>{actionError}</Panel.Error>}
          <Panel.Table>
            <thead>
              <tr>
                <th>Enabled</th>
+                <th>Show in nav</th>
                <th>Target view</th>
                <th>Alias</th>
                <th />
@@ -65,10 +78,23 @@ export default function URLPresets() {
            <tbody>
              {data.length === 0 && <Panel.TableEmpty handleClick={openNewForm} />}
              {data.map((preset, index) => {
+                const isCuesheet = preset.target === OntimeView.Cuesheet;
                return (
                  <tr key={preset.alias}>
                    <td>
-                      <Switch defaultChecked={preset.enabled} onCheckedChange={() => {}} />
+                      <Switch
+                        checked={preset.enabled}
+                        onCheckedChange={(enabled) => persistPreset({ ...preset, enabled })}
+                        disabled={isMutating}
+                        aria-label='Toggle preset enabled'
+                      />
+                    </td>
+                    <td>
+                      <Switch
+                        checked={preset.displayInNav}
+                        onCheckedChange={(checked) => persistPreset({ ...preset, displayInNav: checked })}
+                        disabled={isMutating || isCuesheet}
+                      />
                    </td>
                    <td>
                      <Tag>{preset.target}</Tag>
@@ -1,5 +1,5 @@
 import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';

 import { maybeAxiosError, unwrapError } from '../../../../../common/api/utils';
@@ -12,6 +12,7 @@ import { preventEscape } from '../../../../../common/utils/keyEvent';
 import { isUrlSafe } from '../../../../../common/utils/regex';
 import { enDash } from '../../../../../common/utils/styleUtils';
 import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
+import CuesheetLinkOptions, { CuesheetPermissionValues } from '../../../../sharing/composite/CuesheetLinkOptions';
 import * as Panel from '../../../panel-utils/PanelUtils';

 import style from './URLPresetForm.module.scss';
@@ -32,6 +33,7 @@ const defaultValues: URLPreset = {
  target: OntimeView.Timer,
  search: '',
  enabled: true,
+  displayInNav: false,
 };

 interface URLPresetFormProps {
@@ -61,12 +63,42 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
  });
  const urlRef = useRef<HTMLInputElement>(null);

+  // Cuesheet read/write permissions live outside react-hook-form
+  const initialPermissions = useRef<CuesheetPermissionValues>({
+    read: urlPreset?.options?.read ?? 'full',
+    write: urlPreset?.options?.write ?? 'full',
+  });
+  const [cuesheetPermissions, setCuesheetPermissions] = useState<CuesheetPermissionValues>(initialPermissions.current);
+
+  // update initial permissions on mount
+  useEffect(() => {
+    initialPermissions.current = {
+      read: urlPreset?.options?.read ?? 'full',
+      write: urlPreset?.options?.write ?? 'full',
+    };
+    setCuesheetPermissions(initialPermissions.current);
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps -- run on mount
+  }, []);
+
+  const isEditingCuesheet = urlPreset && urlPreset.target === OntimeView.Cuesheet;
+  const isCuesheet = watch('target') === OntimeView.Cuesheet;
+  const permissionsDirty =
+    isCuesheet &&
+    (cuesheetPermissions.read !== initialPermissions.current.read ||
+      cuesheetPermissions.write !== initialPermissions.current.write);
+  const noReadAccess = isCuesheet && cuesheetPermissions.read === '-';
+
  const setupSubmit = async (data: URLPreset) => {
    try {
+      // Preserve / apply cuesheet permissions, which are not part of the form fields
+      const payload: URLPreset =
+        data.target === OntimeView.Cuesheet
+          ? { ...data, target: OntimeView.Cuesheet, options: cuesheetPermissions }
+          : data;
      if (urlPreset) {
-        await updatePreset(urlPreset.alias, data);
+        await updatePreset(urlPreset.alias, payload);
      } else {
-        await addPreset(data);
+        await addPreset(payload);
      }
      onClose();
    } catch (error) {
@@ -74,6 +106,7 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
    }
  };

+  // focus on alias when the form opens
  useEffect(() => {
    setFocus('alias');
  }, [setFocus]);
@@ -126,44 +159,66 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
        <div className={style.expand}>
          <Panel.Description>Generate options (paste URL to generate options)</Panel.Description>
          <Panel.InlineElements>
-            <Input placeholder='Paste URL' fluid ref={urlRef} />
-            <Button onClick={generateOptions}>Generate</Button>
+            <Input placeholder='Paste URL' fluid ref={urlRef} disabled={isEditingCuesheet} />
+            <Button onClick={generateOptions} disabled={isEditingCuesheet}>
+              Generate
+            </Button>
          </Panel.InlineElements>
        </div>
      </Panel.InlineElements>
      {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
-      <div>
-        {enDash} or {enDash}
-      </div>
-      <div>2. Choose a view and its parameters</div>
-      <div>
-        <Panel.Description>Target</Panel.Description>
-        <Select
-          options={targetOptions}
-          {...register('target', { required: 'Target is required' })}
-          value={watch('target')}
-          onValueChange={(value: OntimeViewPresettable | null) => {
-            if (value === null) return;
-            setValue('target', value, { shouldDirty: true });
-          }}
-        />
-      </div>
-      <div>
-        <Panel.Description>Parameters</Panel.Description>
-        <Textarea
-          fluid
-          rows={3}
-          {...register('search', {
-            validate: validateParams,
-          })}
-        />
-        <Panel.Error>{errors.search?.message}</Panel.Error>
-      </div>
+      {!isEditingCuesheet && (
+        <>
+          <div>
+            {enDash} or {enDash}
+          </div>
+          <div>2. Choose a view and its parameters</div>
+          <div>
+            <Panel.Description>Target</Panel.Description>
+            <Select
+              options={targetOptions}
+              {...register('target', { required: 'Target is required' })}
+              value={watch('target')}
+              onValueChange={(value: OntimeViewPresettable | null) => {
+                if (value === null) return;
+                setValue('target', value, { shouldDirty: true });
+              }}
+            />
+          </div>
+          <div>
+            <Panel.Description>Parameters</Panel.Description>
+            <Textarea
+              fluid
+              rows={3}
+              {...register('search', {
+                validate: validateParams,
+              })}
+            />
+            <Panel.Error>{errors.search?.message}</Panel.Error>
+          </div>
+        </>
+      )}
+
+      {isCuesheet && (
+        <div>
+          <Panel.Description>Permissions</Panel.Description>
+          <CuesheetLinkOptions
+            initialRead={initialPermissions.current.read}
+            initialWrite={initialPermissions.current.write}
+            onChange={setCuesheetPermissions}
+          />
+        </div>
+      )}
      <div>
        <Panel.Error>{errors.root?.message}</Panel.Error>
        <Panel.InlineElements align='end'>
          <Button onClick={onClose}>Cancel</Button>
-          <Button variant='primary' type='submit' disabled={!isValid || !isDirty} loading={isSubmitting || isMutating}>
+          <Button
+            variant='primary'
+            type='submit'
+            disabled={!isValid || (!isDirty && !permissionsDirty) || noReadAccess}
+            loading={isSubmitting || isMutating}
+          >
            Save
          </Button>
        </Panel.InlineElements>
@@ -157,7 +157,7 @@ export default function ManageRundowns() {
                      </td>
                      <td>
                        <DropdownMenu
-                          render={<IconButton variant='ghosted-white' />}
+                          render={<IconButton variant='ghosted-white' data-testId='rundown_menu' />}
                          items={[
                            {
                              type: 'item',
@@ -16,6 +16,7 @@ export default function RundownDefaultSettings() {
    defaultDangerTime,
    defaultTimerType,
    defaultEndAction,
+    inheritGroupColour,
    setDefaultDuration,
    setLinkPrevious,
    setTimeStrategy,
@@ -23,6 +24,7 @@ export default function RundownDefaultSettings() {
    setDangerTime,
    setDefaultTimerType,
    setDefaultEndAction,
+    setInheritGroupColour,
  } = useEditorSettings((state) => state);

  const durationInMs = parseUserTime(defaultDuration);
@@ -44,6 +46,13 @@ export default function RundownDefaultSettings() {
              />
              <Switch size='large' checked={linkPrevious} onCheckedChange={setLinkPrevious} />
            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Inherit group colour'
+                description='Whether new events and milestones inherit the colour of their parent group'
+              />
+              <Switch size='large' checked={inheritGroupColour} onCheckedChange={setInheritGroupColour} />
+            </Panel.ListItem>
            <Panel.ListItem>
              <Panel.Field
                title='Timer strategy'
@@ -1,4 +1,6 @@
 import type {
+  ImportedFields,
+  RundownImportMode,
  SpreadsheetPreviewResponse,
  SpreadsheetWorksheetMetadata,
  SpreadsheetWorksheetOptions,
@@ -22,7 +24,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 +37,7 @@ const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadshee
 type ActiveSource =
  | {
      kind: 'excel';
+      fileName: string;
      worksheetNames: string[];
      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
      closedByUser: boolean;
@@ -55,7 +58,7 @@ export default function SourcesPanel() {
  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);

  const { data: currentRundown } = useRundown();
-  const { importRundown } = useSpreadsheetImport();
+  const { applyImport } = useSpreadsheetImport();

  const fileInputRef = useRef<HTMLInputElement>(null);

@@ -74,6 +77,7 @@ export default function SourcesPanel() {
      const worksheetOptions = await uploadExcel(fileToUpload);
      setActiveSource({
        kind: 'excel',
+        fileName: fileToUpload.name,
        worksheetNames: worksheetOptions.worksheets,
        initialWorksheetMetadata: worksheetOptions.metadata,
        closedByUser: false,
@@ -126,21 +130,32 @@ export default function SourcesPanel() {
    setError('');
  };

-  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();
+      return;
+    }
+
    if (!currentRundown) {
      throw new Error('No current rundown loaded');
    }

-    await importRundown(
-      {
-        [currentRundown.id]: {
-          ...preview.rundown,
-          id: currentRundown.id,
-          title: currentRundown.title,
-        },
-      },
-      preview.customFields,
-    );
+    // 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();
  };

@@ -208,6 +223,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>
@@ -287,6 +309,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;
@@ -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}>
@@ -107,33 +164,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,7 +1,12 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
+import type {
+  ImportedFields,
+  RundownImportMode,
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+} from 'ontime-types';
 import { millisToString } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';

 import { maybeAxiosError } from '../../../../../../common/api/utils';
@@ -11,8 +16,11 @@ import {
  builtInFieldDefs,
  convertToImportMap,
  getImportWarnings,
+  getPersistedImportMode,
  getPersistedImportState,
+  getProvidedImportFields,
  getResolvedCustomFields,
+  persistImportMode,
  persistImportState,
 } from './importMapUtils';
 import { deriveHeaderOptionsState } from './spreadsheetImportUtils';
@@ -100,16 +108,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 +185,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 +199,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;
@@ -241,13 +264,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) => {
@@ -300,6 +325,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,
  };
 }
@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+import { generateUrl } from '../../../../common/api/session';
+import CopyTag from '../../../../common/components/copy-tag/CopyTag';
+import { serverURL } from '../../../../externals';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+export default function McpSection() {
+  const [mcpEndpointUrl, setMcpEndpointUrl] = useState('');
+
+  // generate url
+  useEffect(() => {
+    // the page origin is reachable wherever the user is browsing from,
+    // and follows the deployment (cloud, reverse proxy, port mappings)
+    // we are reusing the endpoint, so locking config and nav have no effect
+    generateUrl({ baseUrl: serverURL, path: 'mcp', authenticate: true, lockConfig: false, lockNav: false })
+      .then(setMcpEndpointUrl)
+      .catch(() => {
+        setMcpEndpointUrl('');
+      });
+  }, []);
+
+  const mcpClientConfig = mcpEndpointUrl
+    ? JSON.stringify({ mcpServers: { ontime: { url: mcpEndpointUrl } } }, null, 2)
+    : '';
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>MCP Server</Panel.SubHeader>
+        <Panel.Paragraph>Connect any MCP-compatible AI agent to Ontime using the endpoint below.</Panel.Paragraph>
+        <Panel.Divider />
+        <Panel.ListGroup>
+          <Panel.ListItem>
+            <Panel.Field title='Endpoint URL' description='Add this URL to your MCP client settings' />
+            {mcpEndpointUrl && <CopyTag copyValue={mcpEndpointUrl}>{mcpEndpointUrl}</CopyTag>}
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field
+              title='Client configuration snippet'
+              description='Paste this into your AI agent settings under "mcpServers"'
+            />
+            {mcpEndpointUrl && <CopyTag copyValue={mcpClientConfig}>{mcpClientConfig}</CopyTag>}
+          </Panel.ListItem>
+        </Panel.ListGroup>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}
@@ -4,6 +4,7 @@ import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 import CustomViews from '../manage-panel/CustomViews';
 import GeneralSettings from './GeneralSettings';
+import McpSection from './McpSection';
 import ProjectData from './ProjectData';
 import ServerPortSettings from './ServerPortSettings';
 import ViewSettings from './ViewSettings';
@@ -13,6 +14,7 @@ export default function SettingsPanel({ location }: PanelBaseProps) {
  const generalRef = useScrollIntoView<HTMLDivElement>('general', location);
  const viewRef = useScrollIntoView<HTMLDivElement>('view', location);
  const customViewsRef = useScrollIntoView<HTMLDivElement>('custom-views', location);
+  const mcpRef = useScrollIntoView<HTMLDivElement>('mcp', location);
  const portRef = useScrollIntoView<HTMLDivElement>('port', location);

  return (
@@ -30,6 +32,9 @@ export default function SettingsPanel({ location }: PanelBaseProps) {
      <div ref={customViewsRef}>
        <CustomViews />
      </div>
+      <div ref={mcpRef}>
+        <McpSection />
+      </div>
      {!isDocker && (
        <div ref={portRef}>
          <ServerPortSettings />
@@ -0,0 +1,3 @@
+.footer {
+  width: 100%;
+}
@@ -1,5 +1,5 @@
 import { TranslationObject, langEn } from 'ontime-types';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';

 import { maybeAxiosError } from '../../../../../common/api/utils';
@@ -10,6 +10,8 @@ import Modal from '../../../../../common/components/modal/Modal';
 import { useTranslation } from '../../../../../translation/TranslationProvider';
 import * as Panel from '../../../panel-utils/PanelUtils';

+import style from './CustomTranslationModal.module.scss';
+
 interface CustomTranslationModalProps {
  isOpen: boolean;
  onClose: () => void;
@@ -17,14 +19,7 @@ interface CustomTranslationModalProps {

 export default function CustomTranslationModal({ isOpen, onClose }: CustomTranslationModalProps) {
  const { userTranslation, postUserTranslation } = useTranslation();
-
-  const defaultValues = useMemo(() => {
-    const values: Record<string, string> = {};
-    Object.keys(langEn).forEach((key) => {
-      values[toFormKey(key)] = userTranslation[key as keyof TranslationObject] || '';
-    });
-    return values;
-  }, [userTranslation]);
+  const customTranslationFormValues = useMemo(() => toFormValues(userTranslation), [userTranslation]);

  const {
    handleSubmit,
@@ -33,13 +28,17 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
    formState: { isSubmitting, isDirty, errors, isValid },
    setError,
  } = useForm({
-    defaultValues,
-    resetOptions: {
-      keepDirtyValues: true,
-    },
+    defaultValues: customTranslationFormValues,
    mode: 'onChange',
  });

+  // keep data up to date
+  useEffect(() => {
+    if (isOpen) {
+      reset(customTranslationFormValues);
+    }
+  }, [customTranslationFormValues, isOpen, reset]);
+
  const onSubmit = async (formData: Record<string, string>) => {
    try {
      const translationData: Record<string, string> = {};
@@ -54,6 +53,10 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
    }
  };

+  const resetToEnglish = () => {
+    reset(toFormValues(langEn), { keepDefaultValues: true });
+  };
+
  return (
    <Modal
      title='Edit custom translations'
@@ -84,9 +87,12 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
        </Panel.Section>
      }
      footerElements={
-        <div>
+        <div className={style.footer}>
          {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
          <Panel.InlineElements align='apart'>
+            <Button variant='ghosted' size='large' onClick={resetToEnglish} disabled={isSubmitting}>
+              Reset to English
+            </Button>
            <Panel.InlineElements>
              <Button size='large' onClick={onClose}>
                Cancel
@@ -109,6 +115,14 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
  );
 }

+function toFormValues(translation: Partial<TranslationObject>) {
+  const values: Record<string, string> = {};
+  Object.keys(langEn).forEach((key) => {
+    values[toFormKey(key)] = translation[key as keyof TranslationObject] || '';
+  });
+  return values;
+}
+
 function toFormKey(key: string) {
  return key.replace('.', '_');
 }
@@ -19,7 +19,8 @@ const staticOptions = [
      { id: 'settings__general', label: 'General settings' },
      { id: 'settings__view', label: 'View settings' },
      { id: 'settings__custom-views', label: 'Custom views' },
-      { id: 'settings__port', label: 'Server port' },
+      { id: 'settings__mcp', label: 'MCP Server' },
+      ...(isDocker ? [] : [{ id: 'settings__port', label: 'Server port' }]),
    ],
  },
  {
@@ -96,18 +97,12 @@ export function useAppSettingsMenu() {

  const options: Readonly<SettingsOption[]> = useMemo(
    () =>
-      staticOptions.map((option) => ({
-        ...option,
-        // if we are in docker don't show the port option
-        secondary:
-          'secondary' in option
-            ? isDocker && option.id === 'settings'
-              ? [...option.secondary.filter(({ id }) => id !== 'settings__port')]
-              : [...option.secondary]
-            : undefined,
+      staticOptions.map((option) =>
        // if there is an update then highlight the about setting
-        highlight: option.id === 'about' && data.hasUpdates ? 'New version available' : undefined,
-      })),
+        option.id === 'about' && data.hasUpdates
+          ? Object.assign({}, option, { highlight: 'New version available' })
+          : option,
+      ),
    [data],
  );

@@ -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>
    </>
@@ -180,7 +180,13 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator

            return (
              <Fragment key={entry.id}>
-                <OperatorGroup key={entry.id} title={entry.title} />
+                <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)) {
@@ -217,6 +223,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                      isLinkedToLoaded={isLinkedToLoaded}
                      isSelected={isLoaded}
                      isPast={isPast}
+                      groupColour={entry.colour}
                      selectedRef={isLoaded ? selectedRef : undefined}
                      showStart={showStart}
                      subscribed={subscribedData}
@@ -22,17 +22,39 @@
    background-color: $gray-1250;
  }

+  &.grouped {
+    position: relative;
+    padding-left: 0.35rem;
+    background:
+      linear-gradient(90deg, color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%), transparent 8rem),
+      $viewer-card-bg-color;
+  }
+
  &.running {
    border-top: 1px solid $gray-1300;
    background-color: var(--operator-running-bg-override, $active-green);
  }

+  &.grouped.running {
+    background:
+      linear-gradient(90deg, color-mix(in srgb, transparent 82%, var(--group-colour, $gray-500) 18%), transparent 8rem),
+      var(--operator-running-bg-override, $active-green);
+  }
+
  &.past {
    border-top: 1px solid transparent;
    opacity: 0.2;
  }
 }

+.groupRail {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 0.35rem;
+  background-color: var(--group-colour, $gray-500);
+}
+
 .binder {
  grid-area: binder;
  color: $section-white;
@@ -74,6 +96,9 @@
 .plannedStart,
 .timeUntil,
 .runningTime {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
  border-radius: $component-border-radius-md;
  padding: 0.25rem 0.5rem;
  line-height: 1;
@@ -95,6 +120,21 @@
  letter-spacing: 1px;
 }

+.live {
+  color: $ui-black;
+  background-color: $ui-white;
+}
+
+.due {
+  color: $ui-black;
+  background-color: $orange-500;
+}
+
+.done {
+  color: $white-60;
+  background-color: $white-7;
+}
+
 .runningTime {
  grid-area: running;
  font-size: 1.25rem;
@@ -25,6 +25,7 @@ interface OperatorEventProps {
  isLinkedToLoaded: boolean;
  isSelected: boolean;
  isPast: boolean;
+  groupColour?: string;
  selectedRef?: RefObject<HTMLDivElement | null>;
  showStart: boolean;
  subscribed: Subscribed;
@@ -46,6 +47,7 @@ function OperatorEvent({
  isLinkedToLoaded,
  isSelected,
  isPast,
+  groupColour,
  selectedRef,
  showStart,
  subscribed,
@@ -68,7 +70,12 @@ function OperatorEvent({
  const mouseHandlers = useLongPress(handleLongPress);
  const cueColours = colour && getAccessibleColour(colour);

-  const operatorClasses = cx([style.event, isSelected && style.running, isPast && style.past]);
+  const operatorClasses = cx([
+    style.event,
+    groupColour && style.grouped,
+    isSelected && style.running,
+    isPast && style.past,
+  ]);

  const hasFields = subscribed.some((field) => field.value);
  const columnCount = subscribed.length ? Math.min(subscribed.length, 4) : 0;
@@ -85,8 +92,10 @@ function OperatorEvent({
      data-testid={cue}
      ref={selectedRef}
      onContextMenu={handleLongPress}
+      style={groupColour ? ({ '--group-colour': groupColour } as CSSProperties) : undefined}
      {...mouseHandlers}
    >
+      {groupColour && <div className={style.groupRail} />}
      <div className={style.binder} style={{ ...cueColours }}>
        <span className={style.cue}>{cue}</span>
      </div>
@@ -153,11 +162,11 @@ function OperatorEventSchedule({
  isLinkedToLoaded,
 }: OperatorEventScheduleProps) {
  if (isPast) {
-    return <span className={style.timeUntil}>DONE</span>;
+    return <span className={cx([style.timeUntil, style.done])}>DONE</span>;
  }

  if (isSelected) {
-    return <span className={style.timeUntil}>LIVE</span>;
+    return <span className={cx([style.timeUntil, style.live])}>LIVE</span>;
  }

  return (
@@ -186,7 +195,7 @@ function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
  const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;

  return (
-    <span className={style.timeUntil} data-testid='time-until'>
+    <span className={cx([style.timeUntil, isDue && style.due])} data-testid='time-until'>
      {timeUntilString}
    </span>
  );
@@ -1,13 +1,33 @@
 .group {
  width: 100%;
-  padding: 0.25rem 0.5rem;
+  min-height: 2.5rem;
+  padding: 0.4rem 0.75rem;
+  border-left: 0.35rem solid var(--group-colour, $gray-500);
  background-color: $gray-1350;
+  background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
  font-size: 1.25rem;
+  font-weight: 600;
+
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  letter-spacing: 0;
 }

-// tablet
-@media (min-width: $min-tablet) {
-  .group {
-    padding: 0.25rem 1rem;
-  }
+.title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.5rem;
+  color: color-mix(in srgb, currentColor 60%, transparent);
+  font-size: 0.875rem;
+  font-weight: 500;
 }
@@ -1,12 +1,29 @@
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
+
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
+import { formatDuration } from '../../../common/utils/time';

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

 interface OperatorGroup {
  title: string;
+  colour: string;
+  count: number;
+  duration: number;
 }

 export default memo(OperatorGroup);
-function OperatorGroup({ title }: OperatorGroup) {
-  return <div className={style.group}>{title}</div>;
+function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
+  const groupColour = colour || '#929292';
+  const groupColours = getAccessibleColour(groupColour);
+
+  return (
+    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
+      <span className={style.title}>{title}</span>
+      <span className={style.meta}>
+        <span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
+        <span>{formatDuration(duration)}</span>
+      </span>
+    </div>
+  );
 }
@@ -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 && (
@@ -22,10 +22,13 @@ export default function CuesheetEntryEditor({ entryId, rundown }: CuesheetEntryE
    return event ?? null;
  }, [entryId, rundown.entries, rundown.order.length]);

-  if (isOntimeEvent(entry)) {
+  // the cuesheet always edits a single entry
+  const events = useMemo(() => (isOntimeEvent(entry) ? [entry] : null), [entry]);
+
+  if (events) {
    return (
      <div className={style.entryEditor} data-testid='editor-container'>
-        <EventEditor event={entry} />
+        <EventEditor events={events} />
      </div>
    );
  }
@@ -75,6 +75,26 @@
  gap: 1rem;
 }

+// a label with an action aligned to the end of the row
+.labelRow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.clearAction {
+  font-size: $aux-text-size;
+  color: $blue-400;
+  margin-bottom: $element-inner-spacing; // match the label
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: $blue-500;
+  }
+}
+
 .splitTwo {
  display: grid;
  grid-template-columns: 1fr 1fr;
@@ -1,14 +1,19 @@
 import { OntimeEvent } from 'ontime-types';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';

 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
+import Info from '../../../common/components/info/Info';
 import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import EventEditorBatchSchedule from './composite/EventEditorBatchSchedule';
 import EntryEditorCustomFields from './composite/EventEditorCustomFields';
+import EventEditorSchedule from './composite/EventEditorSchedule';
 import EventEditorTimes from './composite/EventEditorTimes';
 import EventEditorTitles from './composite/EventEditorTitles';
 import EventEditorTriggers from './composite/EventEditorTriggers';
+import { mixedPlaceholder } from './entryEditor.utils';
+import { mergeEvents, resolveConflict } from './mergeEvents';

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

@@ -16,66 +21,115 @@ import style from './EntryEditor.module.scss';
 export type EventEditorUpdateFields = 'cue' | 'title' | 'note' | 'colour' | string;

 interface EventEditorProps {
-  event: OntimeEvent;
+  /** events being edited, editing several events at once shows a merged view of their values */
+  events: OntimeEvent[];
 }

-export default function EventEditor({ event }: EventEditorProps) {
+export default function EventEditor({ events }: EventEditorProps) {
  const { data: customFields } = useCustomFields();
-  const { updateEntry } = useEntryActionsContext();
+  const { updateEntry, batchUpdateEvents } = useEntryActionsContext();

  const isEditor = window.location.pathname.includes('editor');

+  const ids = useMemo(() => events.map((event) => event.id), [events]);
+  const merged = useMemo(() => mergeEvents(events), [events]);
+
+  // when editing a single event, we can show the values which are unique to it
+  const singleEvent = events.length === 1 ? events[0] : null;
+
+  /**
+   * Applies a patch to every event being edited
+   */
+  const submit = useCallback(
+    (patch: Partial<OntimeEvent>) => {
+      if (ids.length === 1) {
+        updateEntry({ id: ids[0], ...patch });
+        return;
+      }
+      batchUpdateEvents(patch, ids);
+    },
+    [batchUpdateEvents, ids, updateEntry],
+  );
+
  const handleSubmit = useCallback(
    (field: EventEditorUpdateFields, value: string) => {
      if (field.startsWith('custom-')) {
        const fieldLabel = field.split('custom-')[1];
-        updateEntry({ id: event.id, custom: { [fieldLabel]: value } });
+        submit({ custom: { [fieldLabel]: value } });
      } else {
-        updateEntry({ id: event.id, [field]: value });
+        submit({ [field]: value });
      }
    },
-    [event.id, updateEntry],
+    [submit],
  );

+  // inputs keep local state, we remount them when the edited entries change
+  const editorKey = ids.join();
+
  return (
    <div className={style.content}>
+      {singleEvent ? (
+        <EventEditorSchedule
+          key={`${editorKey}-schedule`}
+          eventId={singleEvent.id}
+          timeStart={singleEvent.timeStart}
+          timeEnd={singleEvent.timeEnd}
+          duration={singleEvent.duration}
+          timeStrategy={singleEvent.timeStrategy}
+          linkStart={singleEvent.linkStart}
+          delay={singleEvent.delay}
+        />
+      ) : (
+        <EventEditorBatchSchedule
+          key={`${editorKey}-schedule`}
+          duration={resolveConflict(merged.duration)}
+          submit={submit}
+        />
+      )}
      <EventEditorTimes
-        key={`${event.id}-times`}
-        eventId={event.id}
-        timeStart={event.timeStart}
-        timeEnd={event.timeEnd}
-        duration={event.duration}
-        timeStrategy={event.timeStrategy}
-        linkStart={event.linkStart}
-        countToEnd={event.countToEnd}
-        delay={event.delay}
-        endAction={event.endAction}
-        timerType={event.timerType}
-        timeWarning={event.timeWarning}
-        timeDanger={event.timeDanger}
+        key={`${editorKey}-times`}
+        countToEnd={resolveConflict(merged.countToEnd)}
+        endAction={resolveConflict(merged.endAction)}
+        timerType={resolveConflict(merged.timerType)}
+        timeWarning={resolveConflict(merged.timeWarning)}
+        timeDanger={resolveConflict(merged.timeDanger)}
+        submit={submit}
      />
      <EventEditorTitles
-        key={`${event.id}-titles`}
-        eventId={event.id}
-        cue={event.cue}
-        flag={event.flag}
-        title={event.title}
-        note={event.note}
-        colour={event.colour}
+        key={`${editorKey}-titles`}
+        eventId={singleEvent?.id ?? null}
+        eventCount={events.length}
+        cue={singleEvent?.cue ?? ''}
+        flag={resolveConflict(merged.flag)}
+        title={resolveConflict(merged.title)}
+        note={resolveConflict(merged.note)}
+        colour={resolveConflict(merged.colour)}
+        submit={submit}
      />
      <div className={style.column}>
        <Editor.Title>
          Custom Fields
          {isEditor && <AppLink search='settings=manage__custom'>Manage Custom Fields</AppLink>}
        </Editor.Title>
-        <EntryEditorCustomFields fields={customFields} handleSubmit={handleSubmit} entry={event} />
+        <EntryEditorCustomFields
+          key={`${editorKey}-custom`}
+          fields={customFields}
+          custom={merged.custom}
+          idKey={editorKey}
+          mixedPlaceholder={mixedPlaceholder}
+          handleSubmit={handleSubmit}
+        />
      </div>
      <div className={style.column}>
        <Editor.Title>
          Automations
-          {isEditor && <AppLink search='settings=automation'>Manage Automations</AppLink>}
+          {isEditor && singleEvent && <AppLink search='settings=automation'>Manage Automations</AppLink>}
        </Editor.Title>
-        <EventEditorTriggers triggers={event.triggers} eventId={event.id} />
+        {singleEvent ? (
+          <EventEditorTriggers triggers={singleEvent.triggers} eventId={singleEvent.id} />
+        ) : (
+          <Info>Automations are not available when editing multiple events</Info>
+        )}
      </div>
    </div>
  );
@@ -3,58 +3,94 @@
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
-  padding: 0.5rem;
+  padding: 1rem 1.5rem;

  display: flex;
  flex-direction: column;
-  overflow-x: auto;
 }

 .shortcutSection {
  flex: 1;
-  margin-top: 15vh;
+  width: min(100%, 48rem);
+  margin-top: clamp(1.5rem, 8vh, 5rem);
  margin-inline: auto;
-  gap: 1rem;
 }

 .shortcuts {
-  font-size: calc(1rem - 3px);
-  border-collapse: separate;
-  border-spacing: 4rem 0;
+  display: grid;
+  gap: 0.875rem;
+  margin-top: 0.875rem;
+}

-  tr {
-    white-space: nowrap;
-    td:nth-child(odd) {
-      text-align: left;
-    }
-    td:nth-child(even) {
-      text-align: right;
-    }
+.shortcutGroup {
+  h3 {
+    margin: 0 0 0.375rem;
+    color: $ui-white;
+    font-size: calc(1rem - 3px);
+    font-weight: 600;
+    text-transform: uppercase;
  }
 }

-.spacer {
-  height: 1rem;
+.shortcutList {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.shortcutRow {
+  min-height: 1.625rem;
+  display: grid;
+  grid-template-columns: minmax(10rem, 1fr) minmax(0, auto);
+  align-items: center;
+  gap: 0.75rem;
+  font-size: calc(1rem - 3px);
+}
+
+.shortcutLabel {
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.shortcutKeys {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.25rem 0.5rem;
+  min-width: 0;
+}
+
+.keyCombo {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.25rem 0;
+}
+
+.separator {
+  color: $gray-500;
+  font-size: calc(1rem - 5px);
 }

 .prompt {
-  margin-left: 4rem;
-}
-
-.divider {
-  display: inline-block;
-  text-align: center;
-  width: 1em;
-}
-
-.kbd {
-  font-family: monospace;
-  white-space: nowrap;
-  font-size: calc(1rem - 2px);
-  padding: 0.125rem 0.5rem;
-  background-color: $gray-1200;
  color: $ui-white;
-  border-radius: 2px;
-  font-weight: 400;
-  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
+}
+
+@media (max-width: 680px) {
+  .entryEditor {
+    padding: 0.75rem 1rem;
+  }
+
+  .shortcutSection {
+    margin-top: 1rem;
+  }
+
+  .shortcutRow {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
+
+  .shortcutKeys {
+    justify-content: flex-start;
+  }
 }
@@ -1,6 +1,7 @@
 import { PropsWithChildren, memo } from 'react';

 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
+import Kbd from '../../../common/components/kbd/Kbd';
 import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';

 import style from './EventEditorEmpty.module.scss';
@@ -12,216 +13,127 @@ function EventEditorEmpty() {
    <div className={style.entryEditor} data-testid='editor-container'>
      <div className={style.shortcutSection}>
        <Editor.Title className={style.prompt}>Rundown shortcuts</Editor.Title>
-        <table className={style.shortcuts}>
-          <tbody>
-            <tr>
-              <td>Find in rundown</td>
-              <td>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>F</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Open Settings</td>
-              <td>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>,</Kbd>
-              </td>
-            </tr>
-            <tr className={style.spacer} />
-            <tr>
-              <td>Select entry</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>↑</Kbd>
-                <AuxKey>/</AuxKey>
-                <Kbd>↓</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Select group</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>Shift</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>↑</Kbd>
-                <AuxKey>/</AuxKey>
-                <Kbd>↓</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Jump to top / bottom</td>
-              <td>
-                <Kbd>Home</Kbd>
-                <AuxKey>/</AuxKey>
-                <Kbd>End</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Page up / down</td>
-              <td>
-                <Kbd>PgUp</Kbd>
-                <AuxKey>/</AuxKey>
-                <Kbd>PgDn</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Deselect entry</td>
-              <td>
-                <Kbd>Esc</Kbd>
-              </td>
-            </tr>
-            <tr className={style.spacer} />
-            <tr>
-              <td>Reorder selected entry</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>↑</Kbd>
-                <AuxKey>/</AuxKey>
-                <Kbd>↓</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Copy selected entry</td>
-              <td>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>C</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Cut selected entry</td>
-              <td>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>X</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Paste above</td>
-              <td>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>Shift</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>V</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Paste below</td>
-              <td>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>V</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Clone selected entry</td>
-              <td>
-                <Kbd>{deviceMod}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>D</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Delete selected entry</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>Backspace</Kbd>
-              </td>
-            </tr>
-            <tr className={style.spacer} />
-            <tr>
-              <td>Add event below</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>E</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Add event above</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>Shift</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>E</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Add group below</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>G</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Add group above</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>Shift</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>G</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Add milestone below</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>M</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Add milestone above</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>Shift</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>M</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Add delay below</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>D</Kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Add delay above</td>
-              <td>
-                <Kbd>{deviceAlt}</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>Shift</Kbd>
-                <AuxKey>+</AuxKey>
-                <Kbd>D</Kbd>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div className={style.shortcuts}>
+          <ShortcutGroup title='Search'>
+            <Shortcut label='Find in rundown'>
+              <Combo keys={[deviceMod, 'F']} />
+            </Shortcut>
+            <Shortcut label='Open settings'>
+              <Combo keys={[deviceMod, ',']} />
+            </Shortcut>
+          </ShortcutGroup>
+
+          <ShortcutGroup title='Navigation'>
+            <Shortcut label='Select entry'>
+              <Combo keys={[deviceAlt, '↑']} />
+              <Separator />
+              <Combo keys={[deviceAlt, '↓']} />
+            </Shortcut>
+            <Shortcut label='Select group'>
+              <Combo keys={[deviceAlt, 'Shift', '↑']} />
+              <Separator />
+              <Combo keys={[deviceAlt, 'Shift', '↓']} />
+            </Shortcut>
+            <Shortcut label='Jump to top / bottom'>
+              <Combo keys={['Home']} />
+              <Separator />
+              <Combo keys={['End']} />
+            </Shortcut>
+            <Shortcut label='Page up / down'>
+              <Combo keys={['PgUp']} />
+              <Separator />
+              <Combo keys={['PgDn']} />
+            </Shortcut>
+            <Shortcut label='Jump to current entry'>
+              <Combo keys={[deviceAlt, 'L']} />
+            </Shortcut>
+            <Shortcut label='Deselect entry'>
+              <Combo keys={['Esc']} />
+            </Shortcut>
+          </ShortcutGroup>
+
+          <ShortcutGroup title='Editing'>
+            <Shortcut label='Reorder selected entry'>
+              <Combo keys={[deviceAlt, deviceMod, '↑']} />
+              <Separator />
+              <Combo keys={[deviceAlt, deviceMod, '↓']} />
+            </Shortcut>
+            <Shortcut label='Copy selected entry'>
+              <Combo keys={[deviceMod, 'C']} />
+            </Shortcut>
+            <Shortcut label='Cut selected entry'>
+              <Combo keys={[deviceMod, 'X']} />
+            </Shortcut>
+            <Shortcut label='Paste below'>
+              <Combo keys={[deviceMod, 'V']} />
+            </Shortcut>
+            <Shortcut label='Paste above'>
+              <Combo keys={[deviceMod, 'Shift', 'V']} />
+            </Shortcut>
+            <Shortcut label='Clone selected entry'>
+              <Combo keys={[deviceMod, 'D']} />
+            </Shortcut>
+            <Shortcut label='Delete selected entry'>
+              <Combo keys={[deviceAlt, 'Backspace']} />
+            </Shortcut>
+          </ShortcutGroup>
+
+          <ShortcutGroup title='Insert'>
+            <Shortcut label='Add event below / above'>
+              <Combo keys={[deviceAlt, 'E']} />
+              <Separator />
+              <Combo keys={[deviceAlt, 'Shift', 'E']} />
+            </Shortcut>
+            <Shortcut label='Add group below / above'>
+              <Combo keys={[deviceAlt, 'G']} />
+              <Separator />
+              <Combo keys={[deviceAlt, 'Shift', 'G']} />
+            </Shortcut>
+            <Shortcut label='Add milestone below / above'>
+              <Combo keys={[deviceAlt, 'M']} />
+              <Separator />
+              <Combo keys={[deviceAlt, 'Shift', 'M']} />
+            </Shortcut>
+            <Shortcut label='Add delay below / above'>
+              <Combo keys={[deviceAlt, 'D']} />
+              <Separator />
+              <Combo keys={[deviceAlt, 'Shift', 'D']} />
+            </Shortcut>
+          </ShortcutGroup>
+        </div>
      </div>
    </div>
  );
 }

-function AuxKey({ children }: PropsWithChildren) {
-  return <span className={style.divider}>{children}</span>;
+function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) {
+  return (
+    <section className={style.shortcutGroup}>
+      <h3>{title}</h3>
+      <div className={style.shortcutList}>{children}</div>
+    </section>
+  );
 }

-function Kbd({ children }: PropsWithChildren) {
-  return <span className={style.kbd}>{children}</span>;
+function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) {
+  return (
+    <div className={style.shortcutRow}>
+      <span className={style.shortcutLabel}>{label}</span>
+      <span className={style.shortcutKeys}>{children}</span>
+    </div>
+  );
+}
+
+function Combo({ keys }: { keys: string[] }) {
+  return (
+    <span className={style.keyCombo}>
+      {keys.map((key) => (
+        <Kbd key={key}>{key}</Kbd>
+      ))}
+    </span>
+  );
+}
+
+function Separator() {
+  return <span className={style.separator}>/</span>;
 }
@@ -112,7 +112,12 @@ export default function GroupEditor({ group }: GroupEditorProps) {
          Custom Fields
          {isEditor && <AppLink search='settings=manage__custom'>Manage Custom Fields</AppLink>}
        </Editor.Title>
-        <EntryEditorCustomFields fields={customFields} handleSubmit={handleSubmit} entry={group} />
+        <EntryEditorCustomFields
+          fields={customFields}
+          handleSubmit={handleSubmit}
+          custom={group.custom}
+          idKey={group.id}
+        />
      </div>
    </div>
  );
@@ -69,7 +69,12 @@ export default function MilestoneEditor({ milestone }: MilestoneEditorProps) {
          Custom Fields
          {isEditor && <AppLink search='settings=manage__custom'>Manage Custom Fields</AppLink>}
        </Editor.Title>
-        <EntryEditorCustomFields fields={customFields} handleSubmit={handleSubmit} entry={milestone} />
+        <EntryEditorCustomFields
+          fields={customFields}
+          handleSubmit={handleSubmit}
+          custom={milestone.custom}
+          idKey={milestone.id}
+        />
      </div>
    </div>
  );
@@ -1,4 +1,4 @@
-import { OntimeEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { OntimeEntry, OntimeEvent, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { useMemo } from 'react';

 import useRundown from '../../../common/hooks-query/useRundown';
@@ -15,6 +15,25 @@ export default function RundownEntryEditor() {
  const selectedEvents = useEventSelection((state) => state.selectedEvents);
  const { data } = useRundown();

+  /**
+   * Events in the current selection
+   * Only events can be multi selected, groups and milestones are always selected on their own
+   */
+  const events = useMemo<OntimeEvent[]>(() => {
+    if (data.order.length === 0) {
+      return [];
+    }
+
+    const selection: OntimeEvent[] = [];
+    selectedEvents.forEach((entryId) => {
+      const entry = data.entries[entryId];
+      if (isOntimeEvent(entry)) {
+        selection.push(entry);
+      }
+    });
+    return selection;
+  }, [data.order.length, data.entries, selectedEvents]);
+
  const entry = useMemo<OntimeEntry | null>(() => {
    if (data.order.length === 0) {
      return null;
@@ -29,19 +48,20 @@ export default function RundownEntryEditor() {
    return event ?? null;
  }, [data.order.length, data.entries, selectedEvents]);

-  if (!entry) {
-    return <EventEditorEmpty />;
-  }
-
-  if (isOntimeEvent(entry)) {
+  if (events.length > 0) {
+    const singleEvent = events.length === 1 ? events[0] : null;
    return (
      <div className={style.rundownEditor} data-testid='editor-container'>
-        <EventEditor event={entry} />
-        <EventEditorFooter id={entry.id} cue={entry.cue} />
+        <EventEditor events={events} />
+        {singleEvent && <EventEditorFooter id={singleEvent.id} cue={singleEvent.cue} />}
      </div>
    );
  }

+  if (!entry) {
+    return <EventEditorEmpty />;
+  }
+
  if (isOntimeMilestone(entry)) {
    return (
      <div className={style.rundownEditor} data-testid='editor-container'>
@@ -0,0 +1,122 @@
+import { EndAction, OntimeEvent, SupportedEntry, TimerType } from 'ontime-types';
+
+import { conflict, isConflict, mergeEvents, resolveConflict } from '../mergeEvents';
+
+function makeEvent(patch: Partial<OntimeEvent>): OntimeEvent {
+  return {
+    type: SupportedEntry.Event,
+    id: 'event',
+    title: 'title',
+    note: 'note',
+    colour: '#FFCC78',
+    flag: false,
+    duration: 600000,
+    endAction: EndAction.None,
+    countToEnd: false,
+    timerType: TimerType.CountDown,
+    timeWarning: 120000,
+    timeDanger: 60000,
+    linkStart: true,
+    custom: {},
+    ...patch,
+  } as OntimeEvent;
+}
+
+describe('mergeEvents()', () => {
+  it('returns the values of a single event', () => {
+    const event = makeEvent({ id: '1', title: 'only event' });
+
+    expect(mergeEvents([event])).toStrictEqual({
+      title: 'only event',
+      note: 'note',
+      colour: '#FFCC78',
+      flag: false,
+      duration: 600000,
+      endAction: EndAction.None,
+      countToEnd: false,
+      timerType: TimerType.CountDown,
+      timeWarning: 120000,
+      timeDanger: 60000,
+      linkStart: true,
+      custom: {},
+    });
+  });
+
+  it('keeps values which are shared by all events', () => {
+    const merged = mergeEvents([makeEvent({ id: '1' }), makeEvent({ id: '2' }), makeEvent({ id: '3' })]);
+
+    expect(merged.title).toBe('title');
+    expect(merged.colour).toBe('#FFCC78');
+    expect(merged.timerType).toBe(TimerType.CountDown);
+    expect(merged.duration).toBe(600000);
+  });
+
+  it('marks only the fields which differ as conflicting', () => {
+    const merged = mergeEvents([makeEvent({ id: '1', title: 'first' }), makeEvent({ id: '2', title: 'second' })]);
+
+    expect(merged.title).toBe(conflict);
+    expect(merged.note).toBe('note');
+    expect(merged.colour).toBe('#FFCC78');
+    expect(merged.flag).toBe(false);
+  });
+
+  it('handles boolean and numeric fields', () => {
+    const merged = mergeEvents([
+      makeEvent({ id: '1', flag: true, timeWarning: 1000, duration: 1000 }),
+      makeEvent({ id: '2', flag: false, timeWarning: 1000, duration: 2000 }),
+    ]);
+
+    expect(merged.flag).toBe(conflict);
+    expect(merged.timeWarning).toBe(1000);
+    expect(merged.duration).toBe(conflict);
+  });
+
+  describe('custom fields', () => {
+    it('merges values under the same key', () => {
+      const merged = mergeEvents([
+        makeEvent({ id: '1', custom: { lx: 'same', sound: 'a' } }),
+        makeEvent({ id: '2', custom: { lx: 'same', sound: 'b' } }),
+      ]);
+
+      expect(merged.custom).toStrictEqual({ lx: 'same', sound: conflict });
+    });
+
+    it('treats a missing key as empty', () => {
+      const merged = mergeEvents([makeEvent({ id: '1', custom: { lx: 'value' } }), makeEvent({ id: '2', custom: {} })]);
+
+      expect(merged.custom).toStrictEqual({ lx: conflict });
+    });
+
+    it('collects keys from all events', () => {
+      const merged = mergeEvents([
+        makeEvent({ id: '1', custom: { lx: '' } }),
+        makeEvent({ id: '2', custom: { sound: 'value' } }),
+      ]);
+
+      // lx is empty in both events, sound is only filled in one of them
+      expect(merged.custom).toStrictEqual({ lx: '', sound: conflict });
+    });
+
+    it('does not report a key which is absent from every event', () => {
+      const merged = mergeEvents([makeEvent({ id: '1', custom: {} }), makeEvent({ id: '2', custom: {} })]);
+
+      expect(merged.custom).toStrictEqual({});
+      // an absent key is distinguishable from a conflicting one
+      expect(merged.custom.lx).toBeUndefined();
+      expect(isConflict(merged.custom.lx)).toBe(false);
+    });
+  });
+});
+
+describe('resolveConflict()', () => {
+  it('passes known values through', () => {
+    expect(resolveConflict('value')).toBe('value');
+    expect(resolveConflict(0)).toBe(0);
+    expect(resolveConflict(false)).toBe(false);
+    expect(resolveConflict('')).toBe('');
+  });
+
+  it('resolves a conflict to undefined', () => {
+    expect(resolveConflict(conflict)).toBeUndefined();
+  });
+});
@@ -0,0 +1,48 @@
+import { OntimeEvent } from 'ontime-types';
+import { MILLIS_PER_SECOND, dayInMs, parseUserTime } from 'ontime-utils';
+import { memo } from 'react';
+
+import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
+import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import { mixedPlaceholder } from '../entryEditor.utils';
+
+import style from '../EntryEditor.module.scss';
+
+interface EventEditorBatchScheduleProps {
+  /** undefined when the events do not share a duration */
+  duration: number | undefined;
+  submit: (patch: Partial<OntimeEvent>) => void;
+}
+
+/**
+ * Schedule fields which can be applied to several events at once
+ * Start and end times are absolute points in time: giving several events the same
+ * value would collapse their durations, so only the duration is offered here
+ * The server infers the duration lock and recalculates the rundown once for the whole batch
+ */
+export default memo(EventEditorBatchSchedule);
+function EventEditorBatchSchedule({ duration, submit }: EventEditorBatchScheduleProps) {
+  const handleSubmit = (_field: 'duration', value: string) => {
+    // durations cannot exceed a day
+    submit({ duration: Math.min(parseUserTime(value), dayInMs - MILLIS_PER_SECOND) });
+  };
+
+  return (
+    <div className={style.column}>
+      <Editor.Title>Event schedule</Editor.Title>
+      <div className={style.splitTwo}>
+        <div>
+          <Editor.Label htmlFor='duration'>Duration</Editor.Label>
+          <TimeInput
+            id='duration'
+            name='duration'
+            submitHandler={handleSubmit}
+            time={duration}
+            placeholder={duration === undefined ? mixedPlaceholder : 'Duration'}
+            align='left'
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,8 +1,9 @@
-import { CustomFields, OntimeEvent, OntimeGroup, OntimeMilestone } from 'ontime-types';
+import { CustomFields, EntryCustomFields } from 'ontime-types';
 import { CSSProperties, Fragment } from 'react';

 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { EventEditorUpdateFields } from '../EventEditor';
+import { MergedCustomFields, resolveConflict } from '../mergeEvents';
 import EventEditorImage from './EventEditorImage';
 import EventTextArea from './EventTextArea';
 import EntryEditorTextInput from './EventTextInput';
@@ -11,21 +12,29 @@ import style from '../EntryEditor.module.scss';

 interface EntryEditorCustomFieldsProps {
  fields: CustomFields;
-  entry: OntimeEvent | OntimeGroup | OntimeMilestone;
+  /** values of the entries being edited, undefined when the entries do not agree */
+  custom: EntryCustomFields | MergedCustomFields;
+  /** used to generate stable keys for the fields */
+  idKey: string;
+  mixedPlaceholder?: string;
  handleSubmit: (field: EventEditorUpdateFields, value: string) => void;
 }

 export default function EntryEditorCustomFields({
  fields: customFields,
+  custom,
+  idKey,
+  mixedPlaceholder,
  handleSubmit,
-  entry,
 }: EntryEditorCustomFieldsProps) {
  return (
    <Fragment>
      {Object.keys(customFields).map((fieldKey) => {
-        const key = `${entry.id}-${fieldKey}`;
+        const key = `${idKey}-${fieldKey}`;
        const fieldName = `custom-${fieldKey}`;
-        const initialValue = entry.custom[fieldKey] ?? '';
+        // a key which is absent from the merged view is not present in any of the entries
+        const initialValue = resolveConflict(custom[fieldKey] ?? '');
+        const placeholder = initialValue === undefined ? mixedPlaceholder : undefined;
        const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
        const labelText = customFields[fieldKey].label;

@@ -36,6 +45,7 @@ export default function EntryEditorCustomFields({
              field={fieldName}
              label={labelText}
              initialValue={initialValue}
+              placeholder={placeholder}
              submitHandler={handleSubmit}
              className={style.decorated}
              style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
@@ -51,13 +61,13 @@ export default function EntryEditorCustomFields({
                field={fieldName}
                label={labelText}
                initialValue={initialValue}
-                placeholder='Paste image URL'
+                placeholder={placeholder ?? 'Paste image URL'}
                submitHandler={handleSubmit}
                className={style.decorated}
                maxLength={255}
                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
              />
-              <EventEditorImage src={initialValue} />
+              <EventEditorImage src={initialValue ?? ''} />
            </div>
          );
        }
@@ -0,0 +1,62 @@
+import { TimeStrategy } from 'ontime-types';
+import { memo } from 'react';
+
+import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
+import { millisToDelayString } from '../../../../common/utils/dateConfig';
+import { formatTime, normaliseWallClock } from '../../../../common/utils/time';
+import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
+
+import style from '../EntryEditor.module.scss';
+
+interface EventEditorScheduleProps {
+  eventId: string;
+  timeStart: number;
+  timeEnd: number;
+  duration: number;
+  timeStrategy: TimeStrategy;
+  linkStart: boolean;
+  delay: number;
+}
+
+/**
+ * Schedule of a single event
+ * Schedule values cascade through the rundown, so they are not editable across a selection
+ */
+export default memo(EventEditorSchedule);
+function EventEditorSchedule({
+  eventId,
+  timeStart,
+  timeEnd,
+  duration,
+  timeStrategy,
+  linkStart,
+  delay,
+}: EventEditorScheduleProps) {
+  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(delayedStart)} → ${formatTime(delayedEnd)}`
+    : '';
+
+  return (
+    <div className={style.column}>
+      <Editor.Title>Event schedule</Editor.Title>
+      <div>
+        <div className={style.inline}>
+          <TimeInputFlow
+            eventId={eventId}
+            timeStart={timeStart}
+            timeEnd={timeEnd}
+            duration={duration}
+            timeStrategy={timeStrategy}
+            linkStart={linkStart}
+            delay={delay}
+            showLabels
+          />
+        </div>
+        <div className={style.delayLabel}>{delayLabel}</div>
+      </div>
+    </div>
+  );
+}
@@ -1,4 +1,4 @@
-import { EndAction, TimeStrategy, TimerType } from 'ontime-types';
+import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';
 import { memo } from 'react';
 import { IoInformationCircle } from 'react-icons/io5';
@@ -8,102 +8,47 @@ import TimeInput from '../../../../common/components/input/time-input/TimeInput'
 import Select from '../../../../common/components/select/Select';
 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 TimeInputFlow from '../../time-input-flow/TimeInputFlow';
+import { mixedPlaceholder, switchLabel } from '../entryEditor.utils';

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

 interface EventEditorTimesProps {
-  eventId: string;
-  timeStart: number;
-  timeEnd: number;
-  duration: number;
-  timeStrategy: TimeStrategy;
-  linkStart: boolean;
-  countToEnd: boolean;
-  delay: number;
-  endAction: EndAction;
-  timerType: TimerType;
-  timeWarning: number;
-  timeDanger: number;
+  countToEnd: boolean | undefined;
+  endAction: EndAction | undefined;
+  timerType: TimerType | undefined;
+  timeWarning: number | undefined;
+  timeDanger: number | undefined;
+  submit: (patch: Partial<OntimeEvent>) => void;
 }

-type HandledActions = 'countToEnd' | 'timerType' | 'endAction' | 'timeWarning' | 'timeDanger';
+type TimeFields = 'timeWarning' | 'timeDanger';

 export default memo(EventEditorTimes);
 function EventEditorTimes({
-  eventId,
-  timeStart,
-  timeEnd,
-  duration,
-  timeStrategy,
-  linkStart,
  countToEnd,
-  delay,
  endAction,
  timerType,
  timeWarning,
  timeDanger,
+  submit,
 }: EventEditorTimesProps) {
-  const { updateEntry } = useEntryActionsContext();
-
-  const handleSubmit = (field: HandledActions, value: string | boolean) => {
-    if (field === 'countToEnd') {
-      updateEntry({ id: eventId, countToEnd: value as boolean });
-      return;
-    }
-
-    if (field === 'timeWarning' || field === 'timeDanger') {
-      const newTime = parseUserTime(value as string);
-      updateEntry({ id: eventId, [field]: newTime });
-      return;
-    }
-
-    if (field === 'timerType' || field === 'endAction') {
-      updateEntry({ id: eventId, [field]: value });
-      return;
-    }
+  const handleTimeSubmit = (field: TimeFields, value: string) => {
+    submit({ [field]: parseUserTime(value) });
  };

-  const hasDelay = delay !== 0;
-  const delayLabel = hasDelay
-    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(timeStart + delay)} → ${formatTime(timeEnd + delay)}`
-    : '';
-
  return (
    <>
-      <div className={style.column}>
-        <Editor.Title>Event schedule</Editor.Title>
-        <div>
-          <div className={style.inline}>
-            <TimeInputFlow
-              eventId={eventId}
-              timeStart={timeStart}
-              timeEnd={timeEnd}
-              duration={duration}
-              timeStrategy={timeStrategy}
-              linkStart={linkStart}
-              delay={delay}
-              countToEnd={countToEnd}
-              showLabels
-            />
-          </div>
-          <div className={style.delayLabel}>{delayLabel}</div>
-        </div>
-      </div>
-
      <div className={style.column}>
        <Editor.Title>Event Behaviour</Editor.Title>
        <div className={style.splitTwo}>
          <div>
            <Editor.Label htmlFor='endAction'>End Action</Editor.Label>
            <Select
-              value={endAction}
+              value={endAction ?? null}
+              placeholder={mixedPlaceholder}
              onValueChange={(value: EndAction | null) => {
                if (value === null) return;
-                handleSubmit('endAction', value);
+                submit({ endAction: value });
              }}
              options={[
                { value: EndAction.None, label: 'None' },
@@ -117,10 +62,11 @@ function EventEditorTimes({
            <Editor.Label className={style.switchLabel}>
              <Switch
                id='countToEnd'
-                checked={countToEnd}
-                onCheckedChange={(value) => handleSubmit('countToEnd', value)}
+                checked={countToEnd ?? false}
+                mixed={countToEnd === undefined}
+                onCheckedChange={(value) => submit({ countToEnd: value })}
              />
-              {countToEnd ? 'On' : 'Off'}
+              {switchLabel(countToEnd)}
            </Editor.Label>
          </div>
        </div>
@@ -140,10 +86,11 @@ function EventEditorTimes({
          <div>
            <Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
            <Select
-              value={timerType}
+              value={timerType ?? null}
+              placeholder={mixedPlaceholder}
              onValueChange={(value: TimerType | null) => {
                if (value === null) return;
-                handleSubmit('timerType', value);
+                submit({ timerType: value });
              }}
              options={[
                { value: TimerType.CountDown, label: 'Count down' },
@@ -160,9 +107,9 @@ function EventEditorTimes({
              <TimeInput
                id='timeWarning'
                name='timeWarning'
-                submitHandler={handleSubmit}
+                submitHandler={handleTimeSubmit}
                time={timeWarning}
-                placeholder='Duration'
+                placeholder={timeWarning === undefined ? mixedPlaceholder : 'Duration'}
              />
            </div>
            <div>
@@ -170,9 +117,9 @@ function EventEditorTimes({
              <TimeInput
                id='timeDanger'
                name='timeDanger'
-                submitHandler={handleSubmit}
+                submitHandler={handleTimeSubmit}
                time={timeDanger}
-                placeholder='Duration'
+                placeholder={timeDanger === undefined ? mixedPlaceholder : 'Duration'}
              />
            </div>
          </div>
@@ -1,34 +1,36 @@
+import { OntimeEvent } from 'ontime-types';
 import { memo } from 'react';

 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
 import Input from '../../../../common/components/input/input/Input';
 import Switch from '../../../../common/components/switch/Switch';
-import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
+import { enDash } from '../../../../common/utils/styleUtils';
+import { mixedPlaceholder, switchLabel } from '../entryEditor.utils';
 import EventTextArea from './EventTextArea';
 import EntryEditorTextInput from './EventTextInput';

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

 interface EventEditorTitlesProps {
-  eventId: string;
+  /** id of the event being edited, null when editing several events */
+  eventId: string | null;
+  /** amount of events being edited */
+  eventCount: number;
  cue: string;
-  flag: boolean;
-  title: string;
-  note: string;
-  colour: string;
+  flag: boolean | undefined;
+  title: string | undefined;
+  note: string | undefined;
+  colour: string | undefined;
+  submit: (patch: Partial<OntimeEvent>) => void;
 }

 export default memo(EventEditorTitles);
-function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEditorTitlesProps) {
-  const { updateEntry } = useEntryActionsContext();
-
-  const flagSubmitHandler = (newValue: boolean) => {
-    updateEntry({ id: eventId, flag: newValue });
-  };
+function EventEditorTitles({ eventId, eventCount, cue, flag, title, note, colour, submit }: EventEditorTitlesProps) {
+  const isMulti = eventId === null;

  const textSubmitHandler = (field: string, newValue: string) => {
-    updateEntry({ id: eventId, [field]: newValue });
+    submit({ [field]: newValue });
  };

  return (
@@ -36,21 +38,39 @@ function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEdi
      <Editor.Title>Event Data</Editor.Title>
      <div className={style.splitThree}>
        <div>
-          <Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
-          <Input id='eventId' data-testid='input-textfield' value={eventId} readOnly fluid />
+          <Editor.Label htmlFor='eventId'>{isMulti ? 'Selection (read only)' : 'Event ID (read only)'}</Editor.Label>
+          <Input
+            id='eventId'
+            data-testid='input-textfield'
+            value={isMulti ? `${eventCount} events selected` : eventId}
+            readOnly
+            fluid
+          />
        </div>
-        <EntryEditorTextInput
-          field='cue'
-          label='Cue'
-          initialValue={cue}
-          submitHandler={textSubmitHandler}
-          maxLength={10}
-        />
+        {isMulti ? (
+          <div>
+            <Editor.Label htmlFor='cue'>Cue (not available)</Editor.Label>
+            <Input id='cue' value={enDash} readOnly fluid />
+          </div>
+        ) : (
+          <EntryEditorTextInput
+            field='cue'
+            label='Cue'
+            initialValue={cue}
+            submitHandler={textSubmitHandler}
+            maxLength={10}
+          />
+        )}
        <div>
          <Editor.Label htmlFor='flag'>Flag</Editor.Label>
          <Editor.Label className={style.switchLabel}>
-            <Switch id='flag' checked={flag} onCheckedChange={flagSubmitHandler} />
-            {flag ? 'On' : 'Off'}
+            <Switch
+              id='flag'
+              checked={flag ?? false}
+              mixed={flag === undefined}
+              onCheckedChange={(newValue) => submit({ flag: newValue })}
+            />
+            {switchLabel(flag)}
          </Editor.Label>
        </div>
      </div>
@@ -58,8 +78,20 @@ function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEdi
        <Editor.Label>Colour</Editor.Label>
        <SwatchSelect name='colour' value={colour} handleChange={textSubmitHandler} />
      </div>
-      <EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={textSubmitHandler} />
-      <EventTextArea field='note' label='Note' initialValue={note} submitHandler={textSubmitHandler} />
+      <EntryEditorTextInput
+        field='title'
+        label='Title'
+        initialValue={title}
+        placeholder={title === undefined ? mixedPlaceholder : undefined}
+        submitHandler={textSubmitHandler}
+      />
+      <EventTextArea
+        field='note'
+        label='Note'
+        initialValue={note}
+        placeholder={note === undefined ? mixedPlaceholder : undefined}
+        submitHandler={textSubmitHandler}
+      />
    </div>
  );
 }
@@ -5,11 +5,15 @@ import { AutoTextarea } from '../../../../common/components/input/auto-textarea/
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
 import { EventEditorUpdateFields } from '../EventEditor';

+import style from '../EntryEditor.module.scss';
+
 interface CountedTextAreaProps {
  className?: string;
  field: EventEditorUpdateFields;
  label: string;
-  initialValue: string;
+  /** undefined represents values which do not agree across the edited entries */
+  initialValue: string | undefined;
+  placeholder?: string;
  style?: CSSProperties;
  submitHandler: (field: EventEditorUpdateFields, value: string) => void;
 }
@@ -19,6 +23,7 @@ export default function EventTextArea({
  field,
  label,
  initialValue,
+  placeholder,
  style: givenStyles,
  submitHandler,
 }: CountedTextAreaProps) {
@@ -29,16 +34,27 @@ export default function EventTextArea({
    submitOnCtrlEnter: true,
  });

+  // an unknown value cannot be cleared by emptying the field, we offer an explicit action
+  const canClear = initialValue === undefined;
+
  return (
    <div>
-      <Editor.Label className={className} htmlFor={field} style={givenStyles}>
-        {label}
-      </Editor.Label>
+      <div className={style.labelRow}>
+        <Editor.Label className={className} htmlFor={field} style={givenStyles}>
+          {label}
+        </Editor.Label>
+        {canClear && (
+          <button type='button' className={style.clearAction} onClick={() => submitCallback('')}>
+            Clear
+          </button>
+        )}
+      </div>
      <AutoTextarea
        id={field}
        inputref={ref}
        rows={1}
        data-testid='input-textarea'
+        placeholder={placeholder}
        fluid
        value={value}
        onChange={onChange}
@@ -6,10 +6,13 @@ import useReactiveTextInput from '../../../../common/components/input/text-input
 import { EventEditorUpdateFields } from '../EventEditor';
 import { GroupEditorUpdateTextFields } from '../GroupEditor';

+import style from '../EntryEditor.module.scss';
+
 interface EntryEditorTextInputProps extends InputProps {
  field: EventEditorUpdateFields | GroupEditorUpdateTextFields;
  label: string;
-  initialValue: string;
+  /** undefined represents values which do not agree across the edited entries */
+  initialValue: string | undefined;
  placeholder?: string;
  submitHandler: (field: EventEditorUpdateFields, value: string) => void;
 }
@@ -31,11 +34,21 @@ export default function EntryEditorTextInput({
    submitOnEnter: true,
  });

+  // an unknown value cannot be cleared by emptying the field, we offer an explicit action
+  const canClear = initialValue === undefined;
+
  return (
    <div>
-      <Editor.Label className={className} htmlFor={field} style={givenStyles}>
-        {label}
-      </Editor.Label>
+      <div className={style.labelRow}>
+        <Editor.Label className={className} htmlFor={field} style={givenStyles}>
+          {label}
+        </Editor.Label>
+        {canClear && (
+          <button type='button' className={style.clearAction} onClick={() => submitCallback('')}>
+            Clear
+          </button>
+        )}
+      </div>
      <Input
        id={field}
        ref={ref}
@@ -0,0 +1,10 @@
+/** Shown in place of a value when the entries being edited do not agree */
+export const mixedPlaceholder = 'Mixed';
+
+/** Returns the label of a switch which may represent values that do not agree */
+export function switchLabel(value: boolean | undefined): string {
+  if (value === undefined) {
+    return mixedPlaceholder;
+  }
+  return value ? 'On' : 'Off';
+}
@@ -0,0 +1,108 @@
+import { CustomFieldKey, OntimeEvent } from 'ontime-types';
+
+/**
+ * Marks a value which is not the same across the entries being edited
+ * This is a distinct value from undefined, which means that the field is absent
+ * Being a symbol, it also cannot be assigned to a patch by accident
+ */
+export const conflict: unique symbol = Symbol('conflict');
+export type Conflict = typeof conflict;
+
+/** A value which may not be the same across the entries being edited */
+export type MergedValue<T> = T | Conflict;
+
+export function isConflict<T>(value: MergedValue<T>): value is Conflict {
+  return value === conflict;
+}
+
+/** Resolves a merged value for the UI, where an unknown value is represented by undefined */
+export function resolveConflict<T>(value: MergedValue<T>): T | undefined {
+  return isConflict(value) ? undefined : value;
+}
+
+/**
+ * Fields which can be edited across a selection of events
+ * timeStart and timeEnd are absolute points in time and are excluded:
+ * giving several events the same start or end collapses their durations
+ */
+export const batchEditableFields = [
+  'title',
+  'note',
+  'colour',
+  'flag',
+  'duration',
+  'endAction',
+  'countToEnd',
+  'timerType',
+  'timeWarning',
+  'timeDanger',
+  'linkStart',
+] as const;
+
+type BatchEditableField = (typeof batchEditableFields)[number];
+
+/**
+ * Custom fields of the entries being edited
+ * A missing key means that none of the entries have a value for that field
+ */
+export type MergedCustomFields = Record<CustomFieldKey, MergedValue<string>>;
+
+/**
+ * A merged view over a set of events
+ * A field holds the conflict symbol when the events do not agree on its value
+ */
+export type MergedEvent = {
+  [K in BatchEditableField]: MergedValue<OntimeEvent[K]>;
+} & {
+  custom: MergedCustomFields;
+};
+
+/**
+ * Merges a list of events into a single view
+ * For a single event, no field is in conflict and every value matches the event
+ * @param events - events to merge, must contain at least one element
+ */
+export function mergeEvents(events: OntimeEvent[]): MergedEvent {
+  return {
+    title: mergeField(events, 'title'),
+    note: mergeField(events, 'note'),
+    colour: mergeField(events, 'colour'),
+    flag: mergeField(events, 'flag'),
+    duration: mergeField(events, 'duration'),
+    endAction: mergeField(events, 'endAction'),
+    countToEnd: mergeField(events, 'countToEnd'),
+    timerType: mergeField(events, 'timerType'),
+    timeWarning: mergeField(events, 'timeWarning'),
+    timeDanger: mergeField(events, 'timeDanger'),
+    linkStart: mergeField(events, 'linkStart'),
+    custom: mergeCustomFields(events),
+  };
+}
+
+/**
+ * Returns the shared value of a field, or the conflict symbol if the events disagree
+ */
+function mergeField<K extends BatchEditableField>(events: OntimeEvent[], field: K): MergedValue<OntimeEvent[K]> {
+  const value = events[0][field];
+  return events.some((event) => event[field] !== value) ? conflict : value;
+}
+
+/**
+ * Merges the custom fields of a list of events
+ * Fields missing from an entry are considered empty
+ */
+function mergeCustomFields(events: OntimeEvent[]): MergedCustomFields {
+  const merged: MergedCustomFields = {};
+
+  for (const event of events) {
+    for (const key of Object.keys(event.custom)) {
+      if (key in merged) {
+        continue;
+      }
+      const value = event.custom[key] ?? '';
+      merged[key] = events.some((other) => (other.custom[key] ?? '') !== value) ? conflict : value;
+    }
+  }
+
+  return merged;
+}
@@ -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;
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Claude	69aeb4aabb	feat(rundown): clear a mixed field explicitly, cover both fixes with tests Emptying a field which holds different values across the selection does not submit, otherwise focusing it and tabbing away would wipe every entry. That left no way to clear such a field, so text fields now offer an explicit Clear action, shown only while the entries disagree. Once they agree the field can be emptied by hand and the action is withdrawn. Both of the fixes which multi edit depends on were unguarded, so the logic moves into pure helpers alongside the existing hook helper convention: - shouldSubmitValue covers an unknown initial value being submitted as an empty string - applyPatchToEvents covers the optimistic batch update, whose signature now makes the original mistake of spreading the request body unrepresentable, and pins the custom field merge Both tests were confirmed to fail against the original behaviour. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PDETGBrhwgAqgTHjmrmJGJ	2026-07-25 12:49:47 +00:00
Claude	34ca715fb7	feat(rundown): batch edit event duration, model conflicts with a symbol Two follow ups on multi event editing. Duration is now editable across a selection. The batch endpoint already applies every mutation to a cloned rundown and calls processRundown once on commit, so a batched duration cascades correctly through linked events with a single recalculation, and the server infers the duration lock for entries which were locked to their end. Start and end times remain excluded: they are absolute points in time, so giving several events the same value collapses every linked event to a zero duration. Only the duration is offered in a multi selection. The optimistic update is skipped when the patch carries a duration, since the resulting schedule cannot be resolved on the client. Conflicting values are now marked with a dedicated symbol rather than undefined, which was doing double duty for "the entries disagree" and "the field is absent". The distinction was already leaking into the custom field merge, which needed a key lookup to tell the two apart. The symbol also makes it a type error to assign a merged value into an entry patch, where it would previously have been dropped silently on serialisation. Components keep taking plain optional values: the conflict is resolved once at the editor boundary, so no indeterminate handling spreads into the tree. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PDETGBrhwgAqgTHjmrmJGJ	2026-07-25 12:39:17 +00:00
Claude	b981bae63f	feat(rundown): edit multiple events at once in the entry editor Selecting several events in the editor now turns the entry editor into a multi editor: fields shared by every selected event show their value, fields which differ show as mixed, and editing a field applies it to the whole selection through the existing batch endpoint. Rather than branching between a single and a multi editor, the editor now always renders a merged view of N events (N >= 1) where a field is undefined when the events disagree. For a single event nothing is ever undefined, so single event editing is unchanged by construction and the composites carry no multi edit branching. - add mergeEvents() to build the merged view over a selection - EventEditor takes an events array and resolves the write path itself, replacing the eventId threaded into the composites with a submit callback - extract EventEditorSchedule, which is only rendered for a single event since schedule values cascade through the rundown - support indeterminate values in Switch, Select, SwatchSelect and TimeInput - cue, event id, schedule and automations are not available in multi edit Two related fixes which multi edit depends on: - useReactiveTextInput submitted an empty string when the initial value was undefined, so leaving a mixed field without editing it would have wiped the value on every selected event - the batch optimistic update spread the request body onto the entry instead of the patch, and replaced custom fields rather than merging them Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PDETGBrhwgAqgTHjmrmJGJ	2026-07-25 12:29:30 +00: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
Carlos Valente	daa032e92c	ux(finder): add navigation shortcuts	2026-07-14 12:04:44 +02:00
Carlos Valente	ae65ec97d6	fix(shortcut): correct shortcut to delete	2026-07-14 12:04:44 +02:00
Carlos Valente	e7e4302100	refactor(shortcuts): improve readability of info element	2026-07-14 12:04:44 +02:00
Carlos Valente	7e7d35980a	refactor(op): improve status recognition	2026-07-14 11:58:59 +02:00
Carlos Valente	5001dda284	feat(op): add group visual relation	2026-07-14 11:58:59 +02:00
Carlos Valente	a75d35bdc0	refactor(op): improve delay indicator styles	2026-07-14 11:58:59 +02:00
Claude	2e631194e1	fix(ui): improve progress bar with local interpolation Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2026-07-14 11:25:22 +02:00
Carlos Valente	f39892dc6e	feat(navigation): persist view params customisation	2026-07-13 18:44:38 +02:00
Carlos Valente	6bcfd87851	refactor(rundown): show locked duration group indicator	2026-07-13 17:34:11 +02:00
Claude	4addb50ca4	feat(countdown): allow counting down to a group	2026-07-13 17:29:56 +02:00
Carlos Valente	161ab3fe13	refactor(timer): elapsed is active time from start	2026-07-13 15:34:31 +02:00
Carlos Valente	4f4626a163	refactor: allow larger settings panels	2026-07-13 15:33:23 +02:00
Claude	82d5f02ea0	refactor(mcp): guide agents through creating clean rundowns	2026-07-13 15:33:23 +02:00
Claude	05aaeddf22	resolver: drop dead ignoreDeprecations from tsconfig.dts.json Confirmed empirically that it now suppresses nothing under TS 7.0.2: compiling tsconfig.dts.json directly with this flag set to "6.0", "7.0", or removed entirely all produce identical (clean) output. It was a leftover suppression the previous tsdown mode never actually needed once nothing in the config triggers a deprecation warning.	2026-07-13 14:27:31 +02:00
Claude	949ab2b7dc	Upgrade TypeScript to 7.0.2 (native Go compiler) TypeScript 7 ships as a native Go binary and drastically trims the package's public JS API surface (no more `main`, and `exports['.']` now only resolves to lib/version.cjs) since the programmatic compiler API isn't stable again until 7.1. This broke apps/resolver's tsdown build, which used rolldown-plugin-dts' tsc-program mode (import ts from 'typescript'; ts.createProgram(...)) for declaration generation. Fix by switching that build to isolatedDeclarations, which lets rolldown-plugin-dts generate .d.ts via its oxc-based path instead of the TS compiler API entirely. That surfaced two isolatedDeclarations violations in ontime-types (array/Object.keys initializers lacking explicit annotations), fixed with explicit `string[]` types matching their existing inferred type. Also bumped tsdown to pick up its latest rolldown-plugin-dts, and disabled allowJs in tsconfig.dts.json since it's incompatible with isolatedDeclarations. Full workspace typecheck, lint, build, and test suite (1186 tests) pass under TypeScript 7.0.2.	2026-07-13 14:27:31 +02:00
Alex Christoffer Rasmussen	f12d3ca59c	Small cleanup (#2114 ) * refactor: propper memo for `ScheduleContext` value * chore: removed unused file `cuesheet.utils.ts` * fix: memoize event in ScheduleProvider	2026-07-11 22:20:32 +02:00
Carlos Valente	42147d4d5b	allow editing cuesheet link permissions	2026-07-01 13:24:47 +02:00
Carlos Valente	7850358039	bump ontime to version 4.10.0	2026-07-01 13:20:04 +02:00
Claude	52cae1e22f	feat(timeline): add group reference Co-authored-by: Carlos Valente <carlosvalente@pm.me>	2026-07-01 12:48:58 +02:00
Carlos Valente	48f9fb2609	expose mcp server in ontime	2026-07-01 12:48:40 +02:00
Carlos Valente	ce8a4d230b	refactor(translations): allow resetting to default values	2026-07-01 09:02:13 +02:00
Carlos Valente	1553573b94	feat(url-presets): allow presets to appear as nav menu items (#2110 )	2026-06-28 18:07:02 +02:00
Alex Christoffer Rasmussen	41a09bf5c3	fix: send refetch on all rundown edits (#2098 ) * fix(server): send refetch on all rundown edits * fix(test): cuesheet tabing * chore: remove unneeded async * refactor: small cleanups * chore: spelling Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> * chore: remove unneded async/await --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2026-06-20 12:21:11 +02:00
Claude	5dbe7afae8	feat(client): add rundown default to inherit parent group colour	2026-06-20 10:46:34 +02:00
Carlos Valente	6633cfc869	chore: minor server package upgrades	2026-06-20 09:15:23 +02:00
Carlos Valente	d127367df9	chore: minor client package upgrades	2026-06-20 09:15:23 +02:00
Carlos Valente	b21ec41ffd	chore: upgrade base-ui	2026-06-20 09:15:23 +02:00
Carlos Valente	66292bc0cf	chore: upgrade react packages	2026-06-20 09:15:23 +02:00
Alex Christoffer Rasmussen	b946b245c2	feat: create the first event from the cuesheet (#2105 ) * feat: create the first event from the cuesheet * chore: cleanup css * test: cuesheet beckground edit from empty state * feat: only show +event button when user is in edit mode and have full write perms	2026-06-17 22:31:13 +02:00
Carlos Valente	c238147b75	chore: bump node version	2026-06-11 18:58:00 +02:00