refactor: improve groups and time end

fixup! refactor: add to correct section
refactor: simplify object creation
2026-08-24 16:39:13 +00:00 · 2026-06-28 09:08:24 +02:00 · 2026-06-28 08:48:14 +02:00 · 2026-06-28 08:46:11 +02:00 · 2026-06-28 08:45:54 +02:00 · 2026-06-27 16:30:04 +02:00
172 changed files with 1465 additions and 5689 deletions
@@ -1,5 +0,0 @@
 # CodeGraph data files — local to each machine, not for committing.
 # Ignore everything in .codegraph/ except this file itself, so transient
 # files (the database, daemon.pid, sockets, logs) never show up in git.
 *
 !.gitignore
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.11.0",
+  "version": "4.9.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "4.11.0",
+  "version": "4.9.0",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -6,7 +6,6 @@ import {
  ProjectRundownsList,
  RenumberCues,
  Rundown,
  RundownImportPayload,
  TransientEventPayload,
 } from 'ontime-types';
@@ -83,15 +82,6 @@ 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 ==========================
@@ -1,14 +0,0 @@
 .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;
 }
@@ -1,7 +0,0 @@
 import { PropsWithChildren } from 'react';
 import style from './Kbd.module.scss';
 export default function Kbd({ children }: PropsWithChildren) {
  return <kbd className={style.kbd}>{children}</kbd>;
 }
@@ -38,6 +38,8 @@ $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,6 +1,5 @@
 import { MaybeNumber } from 'ontime-types';
 import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
 import { getProgress } from '../../utils/getProgress';
 import { cx } from '../../utils/styleUtils';
@@ -35,7 +34,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
    className = '',
  } = props;
-  const percentRemaining = 100 - useAnimatedProgress(now, complete);
+  const percentRemaining = 100 - getProgress(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,7 +8,6 @@ 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';
@@ -106,8 +105,6 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
                {route.label}
              </ClientLink>
            ))}
            <PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
          </div>
          {isLocalhost && (
@@ -120,27 +117,3 @@ 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,8 +1,6 @@
 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';
@@ -19,9 +17,6 @@ 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([
    [
@@ -51,7 +46,6 @@ 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,29 +1,4 @@
 .trailing {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
 }
 .linkIcon {
  margin-left: auto;
  @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,17 +1,9 @@
-import { MouseEvent, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
-import { IoArrowUp, IoCloseOutline } from 'react-icons/io5';
+import { IoArrowUp } from 'react-icons/io5';
-import { useLocation, useNavigate, useSearchParams } from 'react-router';
+import { useNavigate } 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';
@@ -24,104 +16,32 @@ interface ClientLinkProps {
 export default function ClientLink({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
  const { isElectron } = useElectronEvent();
  const navigate = useNavigate();
  if (isElectron) {
    return (
-      <ElectronNavigationItem current={current} to={to} postAction={postAction}>
+      <NavigationMenuItem
        active={current}
        onClick={() => {
          handleLinks(to);
          postAction?.();
        }}
      >
        {children}
-      </ElectronNavigationItem>
+        <IoArrowUp className={style.linkIcon} />
      </NavigationMenuItem>
    );
  }
  return (
-    <BrowserNavigationItem current={current} to={to} postAction={postAction}>
+    <NavigationMenuItem
      active={current}
      onClick={() => {
        navigate(`/${to}`);
        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,19 +22,3 @@
  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,10 +9,9 @@ import style from './FloatingNavigation.module.scss';
 interface FloatingNavigationProps {
  toggleMenu?: () => void;
  toggleSettings?: () => void;
  hasSavedChanges?: boolean;
 }
-export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSavedChanges }: FloatingNavigationProps) {
+export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
  const isButtonShown = useFadeOutOnInactivity(true);
  return (
@@ -21,18 +20,15 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSave
      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
    >
      {toggleMenu && (
-        <div className={style.buttonWithIndicator}>
+        <IconButton
-          <IconButton
+          variant='subtle-white'
-            variant='subtle-white'
+          size='xlarge'
-            size='xlarge'
+          onClick={toggleMenu}
-            onClick={toggleMenu}
+          aria-label='toggle menu'
-            aria-label='toggle menu'
+          data-testid='navigation__toggle-menu'
-            data-testid='navigation__toggle-menu'
+        >
-          >
+          <IoApps />
-            <IoApps />
+        </IconButton>
          </IconButton>
          {hasSavedChanges && <span className={style.indicator} data-testid='navigation__saved-indicator' />}
        </div>
      )}
      {toggleSettings && (
        <IconButton
@@ -14,4 +14,6 @@ $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 { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
+import { getProgress } from '../../utils/getProgress';
 import './ProgressBar.scss';
@@ -12,7 +12,7 @@ interface ProgressBarProps {
 export default function ProgressBar(props: ProgressBarProps) {
  const { current, duration, className } = props;
-  const progress = useAnimatedProgress(current, duration);
+  const progress = getProgress(current, duration);
  return (
    <div className={`progress-bar__bg ${className}`}>
@@ -4,9 +4,7 @@
  color: $white-10;
  .empty {
-    display: block;
+    width: 100%;
    width: min(100%, 24rem);
    margin-inline: auto;
    opacity: 0.8;
  }
@@ -15,6 +13,6 @@
    margin-inline: auto;
    font-weight: 600;
    font-size: 2em;
-    max-width: min(100%, 600px);
+    max-width: 600px;
  }
 }
@@ -6,7 +6,6 @@ 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';
@@ -28,7 +27,6 @@ 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);
@@ -38,7 +36,6 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  };
  const resetParams = () => {
    clearSavedParams(target);
    setSearchParams(getPreservedParams());
  };
@@ -1,41 +0,0 @@
 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,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  EntryId,
  InsertOptions,
  MaybeString,
  OntimeDelay,
  OntimeEntry,
@@ -59,15 +60,9 @@ 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.
 */
@@ -125,7 +120,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
   * @private
   */
  const { mutateAsync: addEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entry]: [string, PatchWithId & ClientInsertOptions]) => postAddEntry(rundownId, entry),
+    mutationFn: ([rundownId, entry]: [string, PatchWithId & InsertOptions]) => postAddEntry(rundownId, entry),
    onMutate: async ([_rundownId, entry]) => {
      const queryKey = resolveCurrentRundownQueryKey();
      await queryClient.cancelQueries({ queryKey });
@@ -154,9 +149,8 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
        addToRundown(
          newRundown,
          optimisticEntry,
          parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
          afterId,
-          entry.before ?? null,
+          parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
        );
        queryClient.setQueryData<Rundown>(queryKey, newRundown);
@@ -199,7 +193,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
        throw new Error('Rundown not initialised');
      }
-      const newEntry: PatchWithId & ClientInsertOptions = { ...entry, id: generateId() };
+      const newEntry: PatchWithId & InsertOptions = { ...entry, id: generateId() };
      // handle adding options that concern all event types
      if (options?.after) {
@@ -211,8 +205,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;
@@ -290,7 +284,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
   * Clone an entry
   */
  const clone = useCallback(
-    async (entryId: EntryId, options?: ClientInsertOptions) => {
+    async (entryId: EntryId, options?: InsertOptions) => {
      try {
        const rundownId = getCurrentRundownData()?.id;
        if (!rundownId) {
@@ -1063,7 +1057,7 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
 /**
 * Utility to create an optimistic entry for immediate cache insertion
 */
-function createOptimisticEntry(payload: PatchWithId & ClientInsertOptions): OntimeEntry {
+function createOptimisticEntry(payload: PatchWithId & InsertOptions): OntimeEntry {
  const { after: _after, before: _before, ...entryData } = payload;
  const id = entryData.id;
  let parent: EntryId | null = null;
@@ -139,17 +139,6 @@ 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,
 }));
@@ -1,87 +0,0 @@
 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);
  });
 });
@@ -1,62 +0,0 @@
 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 { hostToBaseUrl, linkToOtherHost } from '../linkUtils';
+import { linkToOtherHost } from '../linkUtils';
 describe('linkToOTherHost', () => {
  it('should handle electron links', () => {
@@ -22,18 +22,3 @@ 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');
  });
 });
@@ -1,25 +0,0 @@
 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,7 +37,6 @@ describe('getRouteFromPreset()', () => {
      alias: 'demopage',
      target: OntimeView.Timer,
      search: 'user=guest',
      displayInNav: false,
      options: {},
    },
  ];
@@ -120,7 +119,6 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-4685d6',
        target: OntimeView.Cuesheet,
        search: '',
        displayInNav: false,
        options: {
          read: 'full',
          write: '-',
@@ -133,7 +131,6 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-basic',
        target: OntimeView.Cuesheet,
        search: '',
        displayInNav: false,
      },
    ];
    const cuesheetPresetWithNavLock: URLPreset[] = [
@@ -142,7 +139,6 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-locked',
        target: OntimeView.Cuesheet,
        search: 'n=1',
        displayInNav: false,
      },
    ];
@@ -224,7 +220,6 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
        displayInNav: false,
      },
    ],
    [
@@ -236,7 +231,6 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
        displayInNav: false,
      },
    ],
    [
@@ -248,7 +242,6 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
        displayInNav: false,
      },
    ],
    [
@@ -260,7 +253,6 @@ 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,12 +37,7 @@ export function handleLinks(
  event?.preventDefault();
  const destination = new URL(externalServerUrl);
-  // split off any query string so it is not encoded into the pathname
+  destination.pathname = externalBaseURI ? `${externalBaseURI}/${location}` : location;
  const [pathname, search] = location.split('?');
  destination.pathname = externalBaseURI ? `${externalBaseURI}/${pathname}` : pathname;
  if (search) {
    destination.search = search;
  }
  openLink(destination.toString());
 }
@@ -59,17 +54,3 @@ 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,6 @@ import {
  MILLIS_PER_HOUR,
  MILLIS_PER_MINUTE,
  MILLIS_PER_SECOND,
  dayInMs,
  formatFromMillis,
  getExpectedStart,
 } from 'ontime-utils';
@@ -30,11 +29,6 @@ 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
@@ -38,18 +38,6 @@ 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,7 +194,6 @@ 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: 1024px;
+  max-width: 850px;
 }
 .indent {
@@ -293,9 +293,8 @@ 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. <br /> <br />
+          or to change properties of Ontime itself.
-          Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
+          <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
          <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
        </Info>
        {fieldOutputs.map((output, index) => {
@@ -342,17 +341,12 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                  </label>
                  <label>
                    Address
-                    <TemplateInput
+                    <Input {...register(`outputs.${index}.address`)} fluid placeholder='/cue/start' />
                      {...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} fluid placeholder='1' />
+                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} placeholder='1' />
                    <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
                  </label>
                  <div>
@@ -382,7 +376,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                <div className={style.httpSection}>
                  <label>
                    Target URL
-                    <TemplateInput
+                    <Input
                      {...register(`outputs.${index}.url`, {
                        required: { value: true, message: 'Required field' },
                        pattern: {
@@ -390,7 +384,6 @@ 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,7 +5,6 @@ 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';
@@ -72,8 +71,8 @@ export default function OntimeActionForm({
            { value: 'playback-pause', label: 'Playback: pause' },
            { value: 'playback-roll', label: 'Playback: roll' },
-            { value: 'message-set', label: 'Primary Message' },
+            { value: 'message-set', label: 'Primary Message: set' },
-            { value: 'message-secondary', label: 'Secondary Message' },
+            { value: 'message-secondary', label: 'Secondary Message: source' },
          ]}
        />
        <Panel.Error>{rowErrors?.action?.message}</Panel.Error>
@@ -97,12 +96,7 @@ export default function OntimeActionForm({
        <>
          <label>
            Text (leave empty for no change)
-            <TemplateInput
+            <Input {...register(`outputs.${index}.text`)} fluid placeholder='eg: Timer is finished' />
              {...register(`outputs.${index}.text`)}
              value={watch(`outputs.${index}.text`) ?? ''}
              fluid
              placeholder='eg: Timer is finished'
            />
            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
          </label>
          <label>
@@ -126,48 +120,31 @@ export default function OntimeActionForm({
      )}
      {selectedAction === 'message-secondary' && (
-        <>
+        <label>
-          <label>
+          Timer secondary source
-            Text (leave empty for no change)
+          <Select<SecondarySource | 'null' | null>
-            <TemplateInput
+            onValueChange={(value) => {
-              {...register(`outputs.${index}.text`)}
+              // null -> no selection
-              value={watch(`outputs.${index}.text`) ?? ''}
+              if (value === null) return;
-              fluid
+              // 'null' -> clear the secondary source
-              placeholder='eg: Next up: keynote'
+              if (value === 'null') {
-            />
+                setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
-            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
+                return;
-          </label>
+              }
-          <label>
+              setValue(`outputs.${index}.secondarySource`, value, { shouldDirty: true });
-            Timer secondary source
+            }}
-            <Select<SecondarySource | 'no-change' | 'null' | null>
+            value={watch(`outputs.${index}.secondarySource`)}
-              onValueChange={(value) => {
+            options={[
-                // null -> no selection
+              { value: null, label: 'Select secondary source' },
-                if (value === null) return;
+              { value: 'aux1', label: 'Auxiliary timer 1' },
-                // no-change -> leave the current secondary source untouched
+              { value: 'aux2', label: 'Auxiliary timer 2' },
-                if (value === 'no-change') {
+              { value: 'aux3', label: 'Auxiliary timer 3' },
-                  setValue(`outputs.${index}.secondarySource`, undefined, { shouldDirty: true });
+              { value: 'secondary', label: 'Secondary' },
-                  return;
+              { value: 'null', label: 'None' }, // allow the user to clear the secondary source
-                }
+            ]}
-                // 'null' -> clear the secondary source
+          />
-                if (value === 'null') {
+          <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
-                  setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
+        </label>
                  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 a trigger to run an automation'
+                label='Create an automation to attach triggers to'
                handleClick={canAdd ? () => setShowForm(true) : undefined}
              />
            )}
@@ -1,67 +1,29 @@
-.inputShell {
+.wrapper {
  position: relative;
 }
-.fluid {
+.suggestions {
  width: 100%;
 }
 .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;
+  color: $ui-white;
 }
-.list {
+  position: absolute;
-  box-sizing: border-box;
+  top: 100%;
-  max-height: min(20rem, var(--available-height));
+  left: 0;
-  overflow-y: auto;
+  width: 100%;
-  overscroll-behavior: contain;
+  margin: 0;
  z-index: $zindex-floating;
  padding-block: 0.25rem;
  outline: 0;
 }
-.item {
+  max-height: 200px;
-  box-sizing: border-box;
+  overflow-y: auto;
-  padding: 0.25rem 0.5rem;
+  color: $label-gray;
  outline: 0;
  cursor: default;
  user-select: none;
  overflow-wrap: anywhere;
-  &[data-highlighted] {
+  li {
    padding: 0.25rem;
  }
  li:hover {
    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,258 +1,69 @@
-import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { mergeRefs, useClickOutside } from '@mantine/hooks';
-import type { ChangeEvent, ReactNode, Ref } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IoExpandOutline } from 'react-icons/io5';
-import Button from '../../../../../common/components/buttons/Button';
+import Input, { type InputProps } from '../../../../../common/components/input/input/Input';
 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 { cx } from '../../../../../common/utils/styleUtils';
+import { makeAutoCompleteList, matchRemaining, selectFromLastTemplate } from './templateInput.utils';
 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 Omit<InputProps, 'value'> {
+interface TemplateInputProps extends InputProps {}
  ref?: Ref<HTMLInputElement>;
  value?: string;
 }
-interface TemplateEditorModalProps {
+const TemplateInput = forwardRef(function TemplateInput(props: TemplateInputProps, ref) {
-  autocompleteList: string[];
+  const { value, onChange, ...rest } = props;
  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 inputRef = useRef<HTMLInputElement | null>(null);
+  const localRef = useClickOutside(() => setShowSuggestions(false));
  const [inputValue, setInputValue] = useState(value || '');
  const [isExpanded, setIsExpanded] = useState(false);
  const autocompleteList = useMemo(() => {
    return makeAutoCompleteList(data);
  }, [data]);
-  const updateInputValue = useCallback(
+  const [inputValue, setInputValue] = useState(value || '');
-    (nextValue: string) => {
+  const [suggestions, setSuggestions] = useState<string[]>([]);
-      setInputValue(nextValue);
+  const [showSuggestions, setShowSuggestions] = useState(false);
      emitInputChange(rest.name, nextValue, onChange);
    },
    [onChange, rest.name],
  );
-  const autocomplete = useTemplateAutocomplete(inputValue, autocompleteList, inputRef, updateInputValue);
+  const updateSuggestions = (value: string) => {
-  const { setCursorForValue } = autocomplete;
+    const template = selectFromLastTemplate(value);
-
+    return autocompleteList.filter((suggestion) => suggestion.startsWith(template));
  // 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 closeExpandedEditor = () => {
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setIsExpanded(false);
+    setInputValue(event.target.value);
  };
-  const saveExpandedEditor = (nextValue: string) => {
+    if (event.target.value.endsWith('{')) {
-    updateInputValue(nextValue);
+      setShowSuggestions(true);
-    autocomplete.setCursorForValue(nextValue, nextValue.length);
+      setSuggestions(updateSuggestions(event.target.value));
-    setIsExpanded(false);
+    } else if (event.target.value === '' || event.target.value.endsWith('}}')) {
-  };
+      setShowSuggestions(false);
-
+    } else if (showSuggestions) {
-  return (
+      setSuggestions(updateSuggestions(event.target.value));
    <>
      <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}
      />
    </>
  );
 }
 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);
+    onChange?.(event);
    setShowSuggestions(false);
  }, [isOpen, setShowSuggestions, value]);
  const handleClose = () => {
    setShowSuggestions(false);
    onClose();
  };
-  const handleSave = () => {
+  const handleSuggestion = (value: string) => {
    setInputValue((prev) => {
      const remaining = matchRemaining(prev as string, value);
      return prev + remaining;
    });
    setShowSuggestions(false);
    onSave(draftValue);
  };
  return (
-    <Modal
+    <div className={style.wrapper} ref={mergeRefs(localRef, ref)}>
-      isOpen={isOpen}
+      <Input value={inputValue} {...rest} onChange={handleInputChange} fluid />
-      onClose={handleClose}
+      {showSuggestions && suggestions.length > 0 && (
-      showBackdrop
+        <ul className={style.suggestions}>
-      showCloseButton
+          {suggestions.map((suggestion) => (
-      title='Edit template'
+            <li key={suggestion} onClick={() => handleSuggestion(suggestion)}>
-      bodyElements={
+              {suggestion}
-        <TemplateAutocompleteRoot autocomplete={autocomplete} value={draftValue}>
+            </li>
-          <BaseAutocomplete.Input
+          ))}
-            autoFocus
+        </ul>
-            className={style.expandedEditor}
+      )}
-            onClick={autocomplete.updateCursor}
+    </div>
            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() {
+export default TemplateInput;
  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 { completeTemplateAtCursor, matchRemaining, selectActiveTemplate } from '../templateInput.utils';
+import { matchRemaining } from '../templateInput.utils';
 describe('matchRemaining()', () => {
  it('should return a partial string needed for autocomplete', () => {
@@ -15,54 +15,3 @@ 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,16 +54,6 @@ 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}}`,
@@ -85,19 +75,12 @@ 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'
@@ -128,54 +111,13 @@ export function matchRemaining(a: string, b: string) {
  return '';
 }
 function getActiveTemplateRange(text: string, cursorIndex = text.length) {
  const textBeforeCursor = text.slice(0, cursorIndex);
  const start = textBeforeCursor.lastIndexOf('{{');
  if (start === -1) {
    return null;
  }
  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.
+ * Selects the last starting template in a string
 */
-export function selectActiveTemplate(text: string, cursorIndex = text.length) {
+export function selectFromLastTemplate(text: string) {
-  return getActiveTemplateRange(text, cursorIndex)?.template ?? '';
+  const lastBraceIndex = text.lastIndexOf('{{');
-}
+  if (lastBraceIndex !== -1) {
-
+    return text.slice(lastBraceIndex);
 /**
 * 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 };
  }
-
+  return '';
  const value = `${text.slice(0, activeTemplateRange.start)}${suggestion}${text.slice(activeTemplateRange.end)}`;
  return {
    value,
    cursorIndex: activeTemplateRange.start + suggestion.length,
  };
 }
@@ -1,72 +0,0 @@
 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,8 +1,7 @@
-import { OntimeView, URLPreset } from 'ontime-types';
+import { 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';
@@ -23,23 +22,13 @@ 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 { updatePreset, deletePreset, isMutating } = useUpdateUrlPreset();
+  const { 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>
@@ -64,12 +53,10 @@ 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 />
@@ -78,23 +65,10 @@ 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
+                      <Switch defaultChecked={preset.enabled} onCheckedChange={() => {}} />
                        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, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { maybeAxiosError, unwrapError } from '../../../../../common/api/utils';
@@ -12,7 +12,6 @@ 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';
@@ -33,7 +32,6 @@ const defaultValues: URLPreset = {
  target: OntimeView.Timer,
  search: '',
  enabled: true,
  displayInNav: false,
 };
 interface URLPresetFormProps {
@@ -63,42 +61,12 @@ 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, payload);
+        await updatePreset(urlPreset.alias, data);
      } else {
-        await addPreset(payload);
+        await addPreset(data);
      }
      onClose();
    } catch (error) {
@@ -106,7 +74,6 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
    }
  };
  // focus on alias when the form opens
  useEffect(() => {
    setFocus('alias');
  }, [setFocus]);
@@ -159,66 +126,44 @@ 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} disabled={isEditingCuesheet} />
+            <Input placeholder='Paste URL' fluid ref={urlRef} />
-            <Button onClick={generateOptions} disabled={isEditingCuesheet}>
+            <Button onClick={generateOptions}>Generate</Button>
              Generate
            </Button>
          </Panel.InlineElements>
        </div>
      </Panel.InlineElements>
      {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
-      {!isEditingCuesheet && (
+      <div>
-        <>
+        {enDash} or {enDash}
-          <div>
+      </div>
-            {enDash} or {enDash}
+      <div>2. Choose a view and its parameters</div>
-          </div>
+      <div>
-          <div>2. Choose a view and its parameters</div>
+        <Panel.Description>Target</Panel.Description>
-          <div>
+        <Select
-            <Panel.Description>Target</Panel.Description>
+          options={targetOptions}
-            <Select
+          {...register('target', { required: 'Target is required' })}
-              options={targetOptions}
+          value={watch('target')}
-              {...register('target', { required: 'Target is required' })}
+          onValueChange={(value: OntimeViewPresettable | null) => {
-              value={watch('target')}
+            if (value === null) return;
-              onValueChange={(value: OntimeViewPresettable | null) => {
+            setValue('target', value, { shouldDirty: true });
-                if (value === null) return;
+          }}
-                setValue('target', value, { shouldDirty: true });
+        />
-              }}
+      </div>
-            />
+      <div>
-          </div>
+        <Panel.Description>Parameters</Panel.Description>
-          <div>
+        <Textarea
-            <Panel.Description>Parameters</Panel.Description>
+          fluid
-            <Textarea
+          rows={3}
-              fluid
+          {...register('search', {
-              rows={3}
+            validate: validateParams,
-              {...register('search', {
+          })}
-                validate: validateParams,
+        />
-              })}
+        <Panel.Error>{errors.search?.message}</Panel.Error>
-            />
+      </div>
            <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
+          <Button variant='primary' type='submit' disabled={!isValid || !isDirty} loading={isSubmitting || isMutating}>
            variant='primary'
            type='submit'
            disabled={!isValid || (!isDirty && !permissionsDirty) || noReadAccess}
            loading={isSubmitting || isMutating}
          >
            Save
          </Button>
        </Panel.InlineElements>
@@ -1,6 +1,4 @@
 import type {
  ImportedFields,
  RundownImportMode,
  SpreadsheetPreviewResponse,
  SpreadsheetWorksheetMetadata,
  SpreadsheetWorksheetOptions,
@@ -24,7 +22,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 { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
+import { validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
 import SheetImportEditor from './sheet-import/SheetImportEditor';
@@ -37,7 +35,6 @@ const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadshee
 type ActiveSource =
  | {
      kind: 'excel';
      fileName: string;
      worksheetNames: string[];
      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
      closedByUser: boolean;
@@ -58,7 +55,7 @@ export default function SourcesPanel() {
  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
  const { data: currentRundown } = useRundown();
-  const { applyImport } = useSpreadsheetImport();
+  const { importRundown } = useSpreadsheetImport();
  const fileInputRef = useRef<HTMLInputElement>(null);
@@ -77,7 +74,6 @@ export default function SourcesPanel() {
      const worksheetOptions = await uploadExcel(fileToUpload);
      setActiveSource({
        kind: 'excel',
        fileName: fileToUpload.name,
        worksheetNames: worksheetOptions.worksheets,
        initialWorksheetMetadata: worksheetOptions.metadata,
        closedByUser: false,
@@ -130,32 +126,21 @@ export default function SourcesPanel() {
    setError('');
  };
-  const handleApplyImport = async (
+  const handleApplyImport = async (preview: SpreadsheetPreviewResponse) => {
    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');
    }
-    // override or merge into the current rundown; merge uses providedFields to know which columns
+    await importRundown(
-    // the sheet supplied so matched events keep the rest (e.g. automations)
+      {
-    await applyImport({
+        [currentRundown.id]: {
-      mode,
+          ...preview.rundown,
-      targetRundownId: currentRundown.id,
+          id: currentRundown.id,
-      rundown: preview.rundown,
+          title: currentRundown.title,
-      customFields: preview.customFields,
+        },
-      providedFields,
+      },
-    });
+      preview.customFields,
    );
    handleFinished();
  };
@@ -223,13 +208,6 @@ 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>
@@ -309,7 +287,6 @@ export default function SourcesPanel() {
          bodyElements={
            <SheetImportEditor
              sourceKey={sourceKey ?? 'spreadsheet'}
              defaultRundownName={spreadsheetName}
              worksheetNames={activeSource?.worksheetNames ?? []}
              initialMetadata={activeSource?.initialWorksheetMetadata ?? null}
              loadMetadata={loadWorksheetMetadata}
@@ -1,55 +0,0 @@
 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,11 +33,6 @@
  white-space: nowrap;
 }
 .importModeTrigger {
  min-width: 12rem;
  justify-content: space-between;
 }
 .addColumnTrigger {
  justify-content: center;
  white-space: nowrap;
@@ -1,20 +1,10 @@
-import type {
+import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
  ImportedFields,
  RundownImportMode,
  SpreadsheetPreviewResponse,
  SpreadsheetWorksheetMetadata,
 } from 'ontime-types';
 import type { ImportMap } from 'ontime-utils';
-import { useMemo } from 'react';
+import { IoArrowUpOutline, IoEye } from 'react-icons/io5';
 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';
@@ -23,46 +13,17 @@ 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: (
+  onApply: (preview: SpreadsheetPreviewResponse) => Promise<void>;
    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,
@@ -88,16 +49,11 @@ export default function SheetImportEditor({
    isBusy,
    canPreview,
    displayError,
    importMode,
    setImportMode,
    newRundownTitle,
    setNewRundownTitle,
    handlePreviewSubmit,
    handleExportSubmit,
    handleApply,
  } = useSheetImportForm({
    sourceKey,
    defaultRundownName,
    worksheetNames,
    initialMetadata,
    loadMetadata,
@@ -106,19 +62,6 @@ 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}>
@@ -164,63 +107,33 @@ export default function SheetImportEditor({
      </div>
      {displayError && <Panel.Error>{displayError}</Panel.Error>}
-      {importMode === 'merge' && !isIdColumnMapped(values) && (
+      <Panel.InlineElements align='end' wrap='wrap' className={style.editorFooter}>
-        <Panel.Description tone='warning'>
+        <Button onClick={onCancel} disabled={isBusy}>
-          <IoWarningOutline /> No ID column mapped — merge matches entries by ID, so it will behave like Replace. Export
+          Cancel
-          your rundown to a spreadsheet first to keep its IDs.
+        </Button>
-        </Panel.Description>
+        {onExport && (
-      )}
+          <Button onClick={handleExportSubmit} disabled={!canPreview} loading={state.loading === 'export'}>
-      <Panel.InlineElements align='apart' wrap='wrap' className={style.editorFooter}>
+            <IoArrowUpOutline />
-        <Panel.InlineElements wrap='wrap'>
+            Export
          <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>
-          {onExport && (
+        )}
-            <Button onClick={handleExportSubmit} disabled={!canPreview} loading={state.loading === 'export'}>
+        <Button
-              <IoArrowUpOutline />
+          variant={state.preview ? undefined : 'primary'}
-              Export
+          onClick={handlePreviewSubmit}
-            </Button>
+          disabled={!canPreview}
-          )}
+          loading={state.loading === 'preview'}
-          <Button
+        >
-            variant={state.preview ? undefined : 'primary'}
+          <IoEye />
-            onClick={handlePreviewSubmit}
+          Preview import
-            disabled={!canPreview}
+        </Button>
-            loading={state.loading === 'preview'}
+        <Button
-          >
+          variant='primary'
-            <IoEye />
+          onClick={handleApply}
-            Preview import
+          disabled={!state.preview || isBusy}
-          </Button>
+          loading={state.loading === 'apply'}
-          <ApplyImportButton
+        >
-            preview={state.preview}
+          Apply import
-            mode={importMode}
+        </Button>
            disabled={!state.preview || isBusy}
            loading={state.loading === 'apply'}
            onApply={handleApply}
          />
        </Panel.InlineElements>
      </Panel.InlineElements>
    </Panel.Section>
  );
@@ -1,21 +1,15 @@
-import { beforeEach, describe, expect, it } from 'vitest';
+import { 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', () => {
@@ -134,64 +128,3 @@ 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,4 +1,3 @@
 import type { ImportedFields, RundownImportMode } from 'ontime-types';
 import type { ImportMap } from 'ontime-utils';
 import { makeStageKey } from '../../../../../../common/utils/localStorage';
@@ -50,16 +49,6 @@ 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
@@ -92,24 +81,6 @@ 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 }) => {
@@ -159,12 +130,12 @@ function isPersistedFormValues(obj: unknown): obj is ImportFormValues {
 export function getPersistedImportState(sourceKey: string): { values: ImportFormValues; isPersisted: boolean } {
  const storageKey = getImportMapKey(sourceKey);
  try {
-    const persistedData = localStorage.getItem(storageKey);
+    const raw = localStorage.getItem(storageKey);
-    if (!persistedData) {
+    if (!raw) {
      return { values: createDefaultFormValues(), isPersisted: false };
    }
-    const parsed: unknown = JSON.parse(persistedData);
+    const parsed: unknown = JSON.parse(raw);
    if (isPersistedFormValues(parsed)) {
      return { values: parsed, isPersisted: true };
    }
@@ -179,32 +150,6 @@ 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,12 +1,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type {
+import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
  ImportedFields,
  RundownImportMode,
  SpreadsheetPreviewResponse,
  SpreadsheetWorksheetMetadata,
 } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { maybeAxiosError } from '../../../../../../common/api/utils';
@@ -16,11 +11,8 @@ import {
  builtInFieldDefs,
  convertToImportMap,
  getImportWarnings,
  getPersistedImportMode,
  getPersistedImportState,
  getProvidedImportFields,
  getResolvedCustomFields,
  persistImportMode,
  persistImportState,
 } from './importMapUtils';
 import { deriveHeaderOptionsState } from './spreadsheetImportUtils';
@@ -108,23 +100,16 @@ 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: (
+  onApply: (preview: SpreadsheetPreviewResponse) => Promise<void>;
    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,
@@ -185,8 +170,6 @@ 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);
@@ -199,12 +182,6 @@ 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;
@@ -264,15 +241,13 @@ export function useSheetImportForm({
    try {
      dispatch({ type: 'startApply' });
-      const providedFields = getProvidedImportFields(convertToImportMap(getValues()));
+      await onApply(state.preview);
      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, importMode, newRundownTitle, onApply, sourceKey, state.preview]);
+  }, [getValues, onApply, sourceKey, state.preview]);
  const handleExport = useCallback(
    async (formValues: ImportFormValues) => {
@@ -325,10 +300,6 @@ export function useSheetImportForm({
    isBusy,
    canPreview,
    displayError,
    importMode,
    setImportMode,
    newRundownTitle,
    setNewRundownTitle,
    handlePreviewSubmit: handleSubmit(handlePreview),
    handleExportSubmit: handleSubmit(handleExport),
    handleApply,
@@ -1,17 +1,30 @@
-import { RundownImportPayload } from 'ontime-types';
+import { useQueryClient } from '@tanstack/react-query';
 import { CustomFields, ProjectRundowns } from 'ontime-types';
 import { useCallback } from 'react';
-import { importRundownWithOptions } from '../../../../../common/api/rundown';
+import { CUSTOM_FIELDS, RUNDOWN } from '../../../../../common/api/constants';
 import { patchData } from '../../../../../common/api/db';
 export default function useSpreadsheetImport() {
-  /** applies a spreadsheet import: override or merge into the current rundown, or create a new one */
+  const queryClient = useQueryClient();
-  const applyImport = useCallback(async (payload: RundownImportPayload) => {
+
-    // the backend broadcasts a refetch once the rundown is parsed and applied, so the caches update
+  /** applies rundown and customFields to current project */
-    // through that single path rather than racing it with an optimistic write from here
+  const importRundown = useCallback(
-    await importRundownWithOptions(payload);
+    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],
  );
  return {
-    applyImport,
+    importRundown,
  };
 }
@@ -2,23 +2,27 @@ import { useEffect, useState } from 'react';
 import { generateUrl } from '../../../../common/api/session';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
-import { serverURL } from '../../../../externals';
+import useInfo from '../../../../common/hooks-query/useInfo';
 import { isOntimeCloud, serverURL } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 export default function McpSection() {
  const { data: infoData } = useInfo();
  const [mcpEndpointUrl, setMcpEndpointUrl] = useState('');
  // generate url
  useEffect(() => {
-    // the page origin is reachable wherever the user is browsing from,
+    const baseUrl = isOntimeCloud
-    // and follows the deployment (cloud, reverse proxy, port mappings)
+      ? serverURL
-    // we are reusing the endpoint, so locking config and nav have no effect
+      : infoData.networkInterfaces.length > 0
-    generateUrl({ baseUrl: serverURL, path: 'mcp', authenticate: true, lockConfig: false, lockNav: false })
+        ? `http://${infoData.networkInterfaces[0].address}:${infoData.serverPort}`
        : serverURL;
    generateUrl({ baseUrl, path: 'mcp', authenticate: true, lockConfig: false, lockNav: false })
      .then(setMcpEndpointUrl)
      .catch(() => {
        setMcpEndpointUrl('');
      });
-  }, []);
+  }, [infoData]);
  const mcpClientConfig = mcpEndpointUrl
    ? JSON.stringify({ mcpServers: { ontime: { url: mcpEndpointUrl } } }, null, 2)
@@ -30,19 +34,14 @@ export default function McpSection() {
        <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.Field title='Endpoint URL' description='Add this URL to your MCP client settings' />
-          <Panel.ListItem>
+        {mcpEndpointUrl && <CopyTag copyValue={mcpEndpointUrl}>{mcpEndpointUrl}</CopyTag>}
-            <Panel.Field title='Endpoint URL' description='Add this URL to your MCP client settings' />
+        <Panel.Divider />
-            {mcpEndpointUrl && <CopyTag copyValue={mcpEndpointUrl}>{mcpEndpointUrl}</CopyTag>}
+        <Panel.Field
-          </Panel.ListItem>
+          title='Client configuration snippet'
-          <Panel.ListItem>
+          description='Paste this into your AI agent settings under "mcpServers"'
-            <Panel.Field
+        />
-              title='Client configuration snippet'
+        {mcpEndpointUrl && <CopyTag copyValue={mcpClientConfig}>{mcpClientConfig}</CopyTag>}
              description='Paste this into your AI agent settings under "mcpServers"'
            />
            {mcpEndpointUrl && <CopyTag copyValue={mcpClientConfig}>{mcpClientConfig}</CopyTag>}
          </Panel.ListItem>
        </Panel.ListGroup>
      </Panel.Card>
    </Panel.Section>
  );
@@ -1,3 +0,0 @@
 .footer {
  width: 100%;
 }
@@ -1,5 +1,5 @@
 import { TranslationObject, langEn } from 'ontime-types';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { maybeAxiosError } from '../../../../../common/api/utils';
@@ -10,8 +10,6 @@ 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;
@@ -19,7 +17,14 @@ interface CustomTranslationModalProps {
 export default function CustomTranslationModal({ isOpen, onClose }: CustomTranslationModalProps) {
  const { userTranslation, postUserTranslation } = useTranslation();
-  const customTranslationFormValues = useMemo(() => toFormValues(userTranslation), [userTranslation]);
+
  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 {
    handleSubmit,
@@ -28,17 +33,13 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
    formState: { isSubmitting, isDirty, errors, isValid },
    setError,
  } = useForm({
-    defaultValues: customTranslationFormValues,
+    defaultValues,
    resetOptions: {
      keepDirtyValues: true,
    },
    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> = {};
@@ -53,10 +54,6 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
    }
  };
  const resetToEnglish = () => {
    reset(toFormValues(langEn), { keepDefaultValues: true });
  };
  return (
    <Modal
      title='Edit custom translations'
@@ -87,12 +84,9 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
        </Panel.Section>
      }
      footerElements={
-        <div className={style.footer}>
+        <div>
          {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
@@ -115,14 +109,6 @@ 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('.', '_');
 }
@@ -73,10 +73,6 @@
  margin-right: 0.25rem;
 }
 .tagOvertime {
  color: $playback-over;
 }
 .time {
  color: $section-white;
  font-size: $text-body-size;
@@ -1,13 +1,12 @@
 import { MaybeNumber, Playback, TimerPhase } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { dayInMs, 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 { useTimerProgress } from '../../../../common/hooks/useSocket';
+import { useTimer } from '../../../../common/hooks/useSocket';
-import { cx } from '../../../../common/utils/styleUtils';
+import { formatDuration } from '../../../../common/utils/time';
 import { formatDuration, normaliseWallClock } from '../../../../common/utils/time';
 import TimerDisplay from '../timer-display/TimerDisplay';
 import style from './PlaybackTimer.module.scss';
@@ -25,14 +24,15 @@ function resolveAddedTimeLabel(addedTime: number) {
 }
 export default function PlaybackTimer({ children }: PropsWithChildren) {
-  'use memo';
+  const timer = useTimer();
  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,13 +51,7 @@ export default function PlaybackTimer({ children }: PropsWithChildren) {
        {isWaiting ? (
          <span className={style.rolltag}>Roll: Countdown to start</span>
        ) : (
-          <RunningStatus
+          <RunningStatus startedAt={timer.startedAt} expectedFinish={timer.expectedFinish} playback={timer.playback} />
            startedAt={timer.startedAt}
            expectedFinish={timer.expectedFinish}
            isStopped={timer.playback === Playback.Stop}
            isCountToEnd={timer.isCountToEnd}
            isOvertime={isOvertime}
          />
        )}
      </div>
      {children}
@@ -68,18 +62,16 @@ export default function PlaybackTimer({ children }: PropsWithChildren) {
 interface RunningStatusProps {
  startedAt: MaybeNumber;
  expectedFinish: MaybeNumber;
-  isStopped: boolean;
+  playback: Playback;
  isCountToEnd: boolean;
  isOvertime: boolean;
 }
-
+function RunningStatus({ startedAt, expectedFinish, playback }: RunningStatusProps) {
-function RunningStatus({ startedAt, expectedFinish, isStopped, isCountToEnd, isOvertime }: RunningStatusProps) {
+  if (playback === Playback.Stop) {
  if (isStopped) {
    return <StoppedStatus />;
  }
  const started = millisToString(startedAt);
-  const finish = millisToString(expectedFinish === null ? null : normaliseWallClock(expectedFinish));
+  const finishedMs = expectedFinish !== null ? expectedFinish % dayInMs : null;
  const finish = millisToString(finishedMs);
  return (
    <>
@@ -88,9 +80,7 @@ function RunningStatus({ startedAt, expectedFinish, isStopped, isCountToEnd, isO
        <span className={style.time}>{started}</span>
      </span>
      <span className={style.finish}>
-        <span className={cx([style.tag, isOvertime && style.tagOvertime])}>
+        <span className={style.tag}>Expect end</span>
          {isCountToEnd ? 'Scheduled end' : 'Expected end'}
        </span>
        <span className={style.time}>{finish}</span>
      </span>
    </>
@@ -180,13 +180,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
            return (
              <Fragment key={entry.id}>
-                <OperatorGroup
+                <OperatorGroup key={entry.id} title={entry.title} />
                  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)) {
@@ -223,7 +217,6 @@ 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,39 +22,17 @@
    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;
@@ -96,9 +74,6 @@
 .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;
@@ -120,21 +95,6 @@
  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,7 +25,6 @@ interface OperatorEventProps {
  isLinkedToLoaded: boolean;
  isSelected: boolean;
  isPast: boolean;
  groupColour?: string;
  selectedRef?: RefObject<HTMLDivElement | null>;
  showStart: boolean;
  subscribed: Subscribed;
@@ -47,7 +46,6 @@ function OperatorEvent({
  isLinkedToLoaded,
  isSelected,
  isPast,
  groupColour,
  selectedRef,
  showStart,
  subscribed,
@@ -70,12 +68,7 @@ function OperatorEvent({
  const mouseHandlers = useLongPress(handleLongPress);
  const cueColours = colour && getAccessibleColour(colour);
-  const operatorClasses = cx([
+  const operatorClasses = cx([style.event, isSelected && style.running, isPast && style.past]);
    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;
@@ -92,10 +85,8 @@ 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>
@@ -162,11 +153,11 @@ function OperatorEventSchedule({
  isLinkedToLoaded,
 }: OperatorEventScheduleProps) {
  if (isPast) {
-    return <span className={cx([style.timeUntil, style.done])}>DONE</span>;
+    return <span className={style.timeUntil}>DONE</span>;
  }
  if (isSelected) {
-    return <span className={cx([style.timeUntil, style.live])}>LIVE</span>;
+    return <span className={style.timeUntil}>LIVE</span>;
  }
  return (
@@ -195,7 +186,7 @@ function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
  const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;
  return (
-    <span className={cx([style.timeUntil, isDue && style.due])} data-testid='time-until'>
+    <span className={style.timeUntil} data-testid='time-until'>
      {timeUntilString}
    </span>
  );
@@ -1,33 +1,13 @@
 .group {
  width: 100%;
-  min-height: 2.5rem;
+  padding: 0.25rem 0.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;
 }
-.title {
+// tablet
-  flex: 1 1 auto;
+@media (min-width: $min-tablet) {
-  min-width: 0;
+  .group {
-  overflow: hidden;
+    padding: 0.25rem 1rem;
-  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,29 +1,12 @@
-import { CSSProperties, memo } from 'react';
+import { 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, colour, count, duration }: OperatorGroup) {
+function OperatorGroup({ title }: OperatorGroup) {
-  const groupColour = colour || '#929292';
+  return <div className={style.group}>{title}</div>;
  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,29 +105,12 @@ 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
@@ -339,9 +322,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
            increaseViewportBy={{ top: 200, bottom: 400 }}
            style={{ height: '100%' }}
            components={{
-              Header: isEditMode
+              Header: isEditMode ? () => <QuickAddButtons previousEventId={null} parentGroup={null} /> : undefined,
                ? () => <QuickAddButtons previousEventId={null} nextEventId={order[0]} parentGroup={null} />
                : undefined,
              Footer: () => (
                <>
                  {isEditMode && (
@@ -3,94 +3,58 @@
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
-  padding: 1rem 1.5rem;
+  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
 }
 .shortcutSection {
  flex: 1;
-  width: min(100%, 48rem);
+  margin-top: 15vh;
  margin-top: clamp(1.5rem, 8vh, 5rem);
  margin-inline: auto;
  gap: 1rem;
 }
 .shortcuts {
-  display: grid;
+  font-size: calc(1rem - 3px);
-  gap: 0.875rem;
+  border-collapse: separate;
-  margin-top: 0.875rem;
+  border-spacing: 4rem 0;
 }
-.shortcutGroup {
+  tr {
-  h3 {
+    white-space: nowrap;
-    margin: 0 0 0.375rem;
+    td:nth-child(odd) {
-    color: $ui-white;
+      text-align: left;
-    font-size: calc(1rem - 3px);
+    }
-    font-weight: 600;
+    td:nth-child(even) {
-    text-transform: uppercase;
+      text-align: right;
    }
  }
 }
-.shortcutList {
+.spacer {
-  display: grid;
+  height: 1rem;
  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;
-@media (max-width: 680px) {
+  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
  .entryEditor {
    padding: 0.75rem 1rem;
  }
  .shortcutSection {
    margin-top: 1rem;
  }
  .shortcutRow {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .shortcutKeys {
    justify-content: flex-start;
  }
 }
@@ -1,7 +1,6 @@
 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';
@@ -13,127 +12,216 @@ function EventEditorEmpty() {
    <div className={style.entryEditor} data-testid='editor-container'>
      <div className={style.shortcutSection}>
        <Editor.Title className={style.prompt}>Rundown shortcuts</Editor.Title>
-        <div className={style.shortcuts}>
+        <table className={style.shortcuts}>
-          <ShortcutGroup title='Search'>
+          <tbody>
-            <Shortcut label='Find in rundown'>
+            <tr>
-              <Combo keys={[deviceMod, 'F']} />
+              <td>Find in rundown</td>
-            </Shortcut>
+              <td>
-            <Shortcut label='Open settings'>
+                <Kbd>{deviceMod}</Kbd>
-              <Combo keys={[deviceMod, ',']} />
+                <AuxKey>+</AuxKey>
-            </Shortcut>
+                <Kbd>F</Kbd>
-          </ShortcutGroup>
+              </td>
-
+            </tr>
-          <ShortcutGroup title='Navigation'>
+            <tr>
-            <Shortcut label='Select entry'>
+              <td>Open Settings</td>
-              <Combo keys={[deviceAlt, '↑']} />
+              <td>
-              <Separator />
+                <Kbd>{deviceMod}</Kbd>
-              <Combo keys={[deviceAlt, '↓']} />
+                <AuxKey>+</AuxKey>
-            </Shortcut>
+                <Kbd>,</Kbd>
-            <Shortcut label='Select group'>
+              </td>
-              <Combo keys={[deviceAlt, 'Shift', '↑']} />
+            </tr>
-              <Separator />
+            <tr className={style.spacer} />
-              <Combo keys={[deviceAlt, 'Shift', '↓']} />
+            <tr>
-            </Shortcut>
+              <td>Select entry</td>
-            <Shortcut label='Jump to top / bottom'>
+              <td>
-              <Combo keys={['Home']} />
+                <Kbd>{deviceAlt}</Kbd>
-              <Separator />
+                <AuxKey>+</AuxKey>
-              <Combo keys={['End']} />
+                <Kbd>↑</Kbd>
-            </Shortcut>
+                <AuxKey>/</AuxKey>
-            <Shortcut label='Page up / down'>
+                <Kbd>↓</Kbd>
-              <Combo keys={['PgUp']} />
+              </td>
-              <Separator />
+            </tr>
-              <Combo keys={['PgDn']} />
+            <tr>
-            </Shortcut>
+              <td>Select group</td>
-            <Shortcut label='Jump to current entry'>
+              <td>
-              <Combo keys={[deviceAlt, 'L']} />
+                <Kbd>{deviceAlt}</Kbd>
-            </Shortcut>
+                <AuxKey>+</AuxKey>
-            <Shortcut label='Deselect entry'>
+                <Kbd>Shift</Kbd>
-              <Combo keys={['Esc']} />
+                <AuxKey>+</AuxKey>
-            </Shortcut>
+                <Kbd>↑</Kbd>
-          </ShortcutGroup>
+                <AuxKey>/</AuxKey>
-
+                <Kbd>↓</Kbd>
-          <ShortcutGroup title='Editing'>
+              </td>
-            <Shortcut label='Reorder selected entry'>
+            </tr>
-              <Combo keys={[deviceAlt, deviceMod, '↑']} />
+            <tr>
-              <Separator />
+              <td>Jump to top / bottom</td>
-              <Combo keys={[deviceAlt, deviceMod, '↓']} />
+              <td>
-            </Shortcut>
+                <Kbd>Home</Kbd>
-            <Shortcut label='Copy selected entry'>
+                <AuxKey>/</AuxKey>
-              <Combo keys={[deviceMod, 'C']} />
+                <Kbd>End</Kbd>
-            </Shortcut>
+              </td>
-            <Shortcut label='Cut selected entry'>
+            </tr>
-              <Combo keys={[deviceMod, 'X']} />
+            <tr>
-            </Shortcut>
+              <td>Page up / down</td>
-            <Shortcut label='Paste below'>
+              <td>
-              <Combo keys={[deviceMod, 'V']} />
+                <Kbd>PgUp</Kbd>
-            </Shortcut>
+                <AuxKey>/</AuxKey>
-            <Shortcut label='Paste above'>
+                <Kbd>PgDn</Kbd>
-              <Combo keys={[deviceMod, 'Shift', 'V']} />
+              </td>
-            </Shortcut>
+            </tr>
-            <Shortcut label='Clone selected entry'>
+            <tr>
-              <Combo keys={[deviceMod, 'D']} />
+              <td>Deselect entry</td>
-            </Shortcut>
+              <td>
-            <Shortcut label='Delete selected entry'>
+                <Kbd>Esc</Kbd>
-              <Combo keys={[deviceAlt, 'Backspace']} />
+              </td>
-            </Shortcut>
+            </tr>
-          </ShortcutGroup>
+            <tr className={style.spacer} />
-
+            <tr>
-          <ShortcutGroup title='Insert'>
+              <td>Reorder selected entry</td>
-            <Shortcut label='Add event below / above'>
+              <td>
-              <Combo keys={[deviceAlt, 'E']} />
+                <Kbd>{deviceAlt}</Kbd>
-              <Separator />
+                <AuxKey>+</AuxKey>
-              <Combo keys={[deviceAlt, 'Shift', 'E']} />
+                <Kbd>{deviceMod}</Kbd>
-            </Shortcut>
+                <AuxKey>+</AuxKey>
-            <Shortcut label='Add group below / above'>
+                <Kbd>↑</Kbd>
-              <Combo keys={[deviceAlt, 'G']} />
+                <AuxKey>/</AuxKey>
-              <Separator />
+                <Kbd>↓</Kbd>
-              <Combo keys={[deviceAlt, 'Shift', 'G']} />
+              </td>
-            </Shortcut>
+            </tr>
-            <Shortcut label='Add milestone below / above'>
+            <tr>
-              <Combo keys={[deviceAlt, 'M']} />
+              <td>Copy selected entry</td>
-              <Separator />
+              <td>
-              <Combo keys={[deviceAlt, 'Shift', 'M']} />
+                <Kbd>{deviceMod}</Kbd>
-            </Shortcut>
+                <AuxKey>+</AuxKey>
-            <Shortcut label='Add delay below / above'>
+                <Kbd>C</Kbd>
-              <Combo keys={[deviceAlt, 'D']} />
+              </td>
-              <Separator />
+            </tr>
-              <Combo keys={[deviceAlt, 'Shift', 'D']} />
+            <tr>
-            </Shortcut>
+              <td>Cut selected entry</td>
-          </ShortcutGroup>
+              <td>
-        </div>
+                <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>
    </div>
  );
 }
-function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) {
+function AuxKey({ children }: PropsWithChildren) {
-  return (
+  return <span className={style.divider}>{children}</span>;
    <section className={style.shortcutGroup}>
      <h3>{title}</h3>
      <div className={style.shortcutList}>{children}</div>
    </section>
  );
 }
-function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) {
+function Kbd({ children }: PropsWithChildren) {
-  return (
+  return <span className={style.kbd}>{children}</span>;
    <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>;
 }
@@ -10,7 +10,7 @@ import Switch from '../../../../common/components/switch/Switch';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
-import { formatTime, normaliseWallClock } from '../../../../common/utils/time';
+import { formatTime } from '../../../../common/utils/time';
 import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
 import style from '../EntryEditor.module.scss';
@@ -68,10 +68,8 @@ function EventEditorTimes({
  };
  const hasDelay = delay !== 0;
  const delayedStart = normaliseWallClock(timeStart + delay);
  const delayedEnd = normaliseWallClock(timeEnd + delay);
  const delayLabel = hasDelay
-    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(delayedStart)} → ${formatTime(delayedEnd)}`
+    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(timeStart + delay)} → ${formatTime(timeEnd + delay)}`
    : '';
  return (
@@ -88,6 +86,7 @@ function EventEditorTimes({
              timeStrategy={timeStrategy}
              linkStart={linkStart}
              delay={delay}
              countToEnd={countToEnd}
              showLabels
            />
          </div>
@@ -11,17 +11,13 @@ import style from './QuickAddButtons.module.scss';
 interface QuickAddButtonsProps {
  previousEventId: MaybeString;
  nextEventId?: MaybeString;
  parentGroup: MaybeString;
  backgroundColor?: string;
 }
 export default memo(QuickAddButtons);
-function QuickAddButtons({ previousEventId, nextEventId, parentGroup, backgroundColor }: QuickAddButtonsProps) {
+function QuickAddButtons({ previousEventId, 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(
@@ -29,23 +25,44 @@ function QuickAddButtons({ previousEventId, nextEventId, parentGroup, background
        type: SupportedEntry.Event,
        parent: parentGroup,
      },
-      insertionOptions,
+      {
        after: previousEventId,
        lastEventId: previousEventId,
      },
    );
  };
  const addDelay = () => {
-    addEntry({ type: SupportedEntry.Delay, parent: parentGroup }, insertionOptions);
+    addEntry(
      { type: SupportedEntry.Delay, parent: parentGroup },
      {
        lastEventId: previousEventId,
        after: previousEventId,
      },
    );
  };
  const addMilestone = () => {
-    addEntry({ type: SupportedEntry.Milestone, parent: parentGroup }, insertionOptions);
+    addEntry(
      { type: SupportedEntry.Milestone, parent: parentGroup },
      {
        lastEventId: previousEventId,
        after: previousEventId,
      },
    );
  };
  const addGroup = () => {
    if (parentGroup !== null) {
      return;
    }
-    addEntry({ type: SupportedEntry.Group }, insertionOptions);
+    addEntry(
      { type: SupportedEntry.Group },
      {
        lastEventId: previousEventId,
        after: previousEventId,
      },
    );
  };
  /**
@@ -96,7 +96,7 @@ export function useRundownCommands({
      addEntry(patch, {
        after: id && !above ? id : undefined,
        before: id && above ? id : undefined,
-        lastEventId: id && !above ? id : undefined,
+        lastEventId: !above && id ? id : undefined,
      });
    },
    [addEntry],
@@ -19,7 +19,6 @@ interface UseRundownKeyboardOptions {
  };
  clearSelectedEvents: () => void;
  setEntryCopyId: (id: EntryId | null, mode?: 'copy' | 'cut') => void;
  jumpToCurrent: () => void;
 }
 /**
@@ -41,7 +40,6 @@ export function useRundownKeyboard({
  commands,
  clearSelectedEvents,
  setEntryCopyId,
  jumpToCurrent,
 }: UseRundownKeyboardOptions) {
  const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
@@ -129,8 +127,6 @@ export function useRundownKeyboard({
      { preventDefault: true, usePhysicalKeys: true },
    ],
    ['alt + L', () => jumpToCurrent(), { preventDefault: true, usePhysicalKeys: true }],
    [
      'alt + mod + ArrowDown',
      () => commands.moveEntry(cursor, 'down'),
@@ -7,7 +7,6 @@ $skip-opacity: 0.2;
  background-color: $block-bg;
  margin-block: 0.25rem;
  overflow: initial;
  position: relative;
  display: grid;
  grid-template-areas:
@@ -17,7 +16,7 @@ $skip-opacity: 0.2;
    'binder pb-actions estatus estatus'
    'binder ...        ...     ...';
-  grid-template-columns: $block-binder-width 3rem minmax(0, 1fr) 3rem;
+  grid-template-columns: $block-binder-width 3rem 1fr 3rem;
  grid-template-rows: 0.125rem 2rem 2rem auto 0.125rem;
  align-items: center;
  padding-right: $block-clearance;
@@ -137,7 +136,6 @@ $skip-opacity: 0.2;
  align-items: center;
  gap: $block-clearance;
  height: 100%;
  min-width: 0;
 }
 .eventTimers.editMode:hover {
@@ -157,7 +155,7 @@ $skip-opacity: 0.2;
  align-items: center;
  justify-content: space-between;
-  .warningMeta {
+  .nextTag {
    font-size: 1rem;
    color: $orange-500;
    letter-spacing: 0.03px;
@@ -233,10 +231,6 @@ $skip-opacity: 0.2;
    color: var(--status-color-active-override, $active-indicator);
  }
  .statusIcon.countToEndStatus {
    color: $orange-400;
  }
  .statusIcon.warning {
    color: $orange-500;
  }
@@ -18,7 +18,7 @@ import { TbFlagFilled, TbListNumbers } from 'react-icons/tb';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
-import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
+import { deviceMod } from '../../../common/utils/deviceUtils';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { useRenumberCuesDialogStore } from '../renumber-cues-dialog/RenumberCuesDialog';
 import { useEventIdSwapping } from '../useEventIdSwapping';
@@ -156,7 +156,7 @@ export default function RundownEvent({
            type: 'item',
            label: 'Delete',
            icon: IoTrash,
-            shortcut: `${deviceAlt}+Backspace`,
+            shortcut: `${deviceMod}+Del`,
            onClick: () => {
              clearSelectedEvents();
              deleteEntry(Array.from(selectedEvents));
@@ -202,7 +202,7 @@ export default function RundownEvent({
            type: 'item',
            label: 'Delete',
            icon: IoTrash,
-            shortcut: `${deviceAlt}+Backspace`,
+            shortcut: `${deviceMod}+Del`,
            onClick: () => {
              deleteEntry([eventId]);
              unselect(eventId);
@@ -115,12 +115,12 @@ function RundownEventInner({
          delay={delay}
          timeStrategy={timeStrategy}
          linkStart={linkStart}
          countToEnd={countToEnd}
        />
      </div>
      <div className={style.titleSection}>
        <TitleEditor title={title} entryId={eventId} placeholder='Event title' className={style.eventTitle} />
-        {isNext && <span className={style.warningMeta}>UP NEXT</span>}
+        {isNext && <span className={style.nextTag}>UP NEXT</span>}
        {!isNext && countToEnd && <span className={style.warningMeta}>COUNT TO END</span>}
      </div>
      <EventBlockPlayback
        eventId={eventId}
@@ -157,13 +157,7 @@ function RundownEventInner({
            <EndActionIcon action={endAction} className={style.statusIcon} />
          </Tooltip>
          <Tooltip text={`${countToEnd ? 'Count to End' : 'Count duration'}`} render={<span />}>
-            <LuArrowDownToLine
+            <LuArrowDownToLine className={`${style.statusIcon} ${countToEnd ? style.active : style.disabled}`} />
              className={cx([
                style.statusIcon,
                countToEnd ? style.active : style.disabled,
                countToEnd && style.countToEndStatus,
              ])}
            />
          </Tooltip>
          <Tooltip text={automationTooltip} render={<span />}>
            <IoFlash className={automationIconClasses} />
@@ -1,33 +1,10 @@
 import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-utils';
 import { formatDelay } from '../rundownEvent.utils';
 describe('formatDelay()', () => {
  it('adds a given delay to the start time', () => {
-    const timeStart = 1 * MILLIS_PER_MINUTE; // 00:01
+    const timeStart = 60000; // 1 min
-    const delay = 1 * MILLIS_PER_MINUTE; // 00:01
+    const delay = 60000; // 1 min
    const result = formatDelay(timeStart, delay);
    expect(result).toEqual('New start 00:02');
  });
  it('wraps negative delayed starts under midnight', () => {
    const timeStart = 1 * MILLIS_PER_MINUTE; // 00:01
    const delay = -2 * MILLIS_PER_MINUTE; // -00:02
    const result = formatDelay(timeStart, delay);
    expect(result).toEqual('New start 23:59');
  });
  it('wraps later-day negative delays using delay as the source of truth', () => {
    const timeStart = 1 * MILLIS_PER_HOUR; // 01:00
    const delay = -(1 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE); // -01:30
    const result = formatDelay(timeStart, delay);
    expect(result).toEqual('New start 23:30');
  });
  it('displays positive delays as wall-clock time', () => {
    const timeStart = 1 * MILLIS_PER_HOUR; // 01:00
    const delay = 1 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE; // 01:30
    const result = formatDelay(timeStart, delay);
    expect(result).toEqual('New start 02:30');
  });
 });
@@ -3,5 +3,7 @@
  width: 0;
  border-radius: 1px 0 0 1px;
  transition: 1s linear;
  transition-property: width;
  background-color: $gray-200;
 }
@@ -1,12 +1,12 @@
 import { useAnimatedProgress } from '../../../../common/hooks/useAnimatedProgress';
 import { useTimer } from '../../../../common/hooks/useSocket';
 import { getProgress } from '../../../../common/utils/getProgress';
 import style from './RundownEventProgressBar.module.scss';
 export default function RundownEventProgressBar() {
  const timer = useTimer();
-  const progress = useAnimatedProgress(timer.current, timer.duration);
+  const progress = getProgress(timer.current, timer.duration);
  return <div className={style.progressBar} style={{ width: `${progress}%` }} />;
 }
@@ -1,16 +1,15 @@
 import { millisToString, removeTrailingZero } from 'ontime-utils';
-import { formatDuration, normaliseWallClock } from '../../../common/utils/time';
+import { formatDuration } from '../../../common/utils/time';
 export function formatDelay(timeStart: number, delay: number): string | undefined {
  if (!delay) return;
-  const delayedStart = normaliseWallClock(timeStart + delay);
+  const delayedStart = Math.max(0, timeStart + delay);
  const timeTag = removeTrailingZero(millisToString(delayedStart));
  return `New start ${timeTag}`;
 }
 export function formatGap(gap: number, isNextDay: boolean) {
  if (gap === 0) {
    if (isNextDay) {
@@ -82,17 +82,6 @@
  margin-right: 0.25rem;
  color: $ui-white;
 }
 .duration {
  display: flex;
  align-items: center;
  gap: 0.25rem;
 }
 .lockIcon {
  opacity: 0.6;
 }
 .over {
  color: $playback-over;
  .strike {
@@ -8,7 +8,6 @@ import {
  IoChevronUp,
  IoDuplicateOutline,
  IoFolderOpenOutline,
  IoLockClosed,
  IoReorderTwo,
  IoTrash,
 } from 'react-icons/io5';
@@ -18,7 +17,7 @@ import Tag from '../../../common/components/tag/Tag';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
-import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
+import { deviceMod } from '../../../common/utils/deviceUtils';
 import { getOffsetState } from '../../../common/utils/offset';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration, formatTime } from '../../../common/utils/time';
@@ -66,7 +65,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
      type: 'item',
      label: 'Delete Group',
      icon: IoTrash,
-      shortcut: `${deviceAlt}+Backspace`,
+      shortcut: `${deviceMod}+Del`,
      onClick: () => deleteEntry([data.id]),
    },
  ]);
@@ -177,17 +176,14 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
          </div>
          <div className={style.metaEntry}>
            <div className={style.metaLabel}>Duration</div>
-            <div className={style.duration}>
+            {planOffset === null ? (
-              {planOffset === null ? (
+              <div>{formatDuration(data.duration)}</div>
-                formatDuration(data.duration)
+            ) : (
-              ) : (
+              <div className={cx([planOffsetLabel && style[planOffsetLabel]])}>
-                <span className={cx([planOffsetLabel && style[planOffsetLabel]])}>
+                <span className={style.strike}>{formatDuration(data.duration)}</span>
-                  <span className={style.strike}>{formatDuration(data.duration)}</span>
+                <Tag className={style.offsetLabel}>{planOffset}</Tag>
-                  <Tag className={style.offsetLabel}>{planOffset}</Tag>
+              </div>
-                </span>
+            )}
              )}
              {data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
            </div>
          </div>
        </div>
      </div>
@@ -9,7 +9,7 @@ import useReactiveTextInput from '../../../common/components/input/text-input/us
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
-import { deviceAlt } from '../../../common/utils/deviceUtils';
+import { deviceMod } from '../../../common/utils/deviceUtils';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { useEventSelection } from '../useEventSelection';
@@ -38,7 +38,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
      type: 'item',
      label: 'Delete',
      icon: IoTrash,
-      shortcut: `${deviceAlt}+Backspace`,
+      shortcut: `${deviceMod}+Del`,
      onClick: () => deleteEntry([entryId]),
    },
  ]);
@@ -4,15 +4,10 @@
 .timerNote {
  width: 1.25em;
  flex: 0 0 1.25em;
  color: $blue-500;
  font-size: 1.5em;
 }
 .timerNotePlaceholder {
  visibility: hidden;
 }
 .inactive {
  color: $muted-gray;
 }
@@ -14,6 +14,7 @@ import style from './TimeInputFlow.module.scss';
 interface TimeInputFlowProps {
  eventId: string;
  countToEnd: boolean;
  timeStart: number;
  timeEnd: number;
  duration: number;
@@ -21,12 +22,12 @@ interface TimeInputFlowProps {
  linkStart: boolean;
  delay: number;
  showLabels?: boolean;
  showWarnings?: boolean;
 }
 export default memo(TimeInputFlow);
 function TimeInputFlow({
  eventId,
  countToEnd,
  timeStart,
  timeEnd,
  duration,
@@ -34,7 +35,6 @@ function TimeInputFlow({
  linkStart,
  delay,
  showLabels,
  showWarnings = true,
 }: TimeInputFlowProps) {
  const { updateEntry, updateTimer } = useEntryActionsContext();
@@ -56,6 +56,10 @@ function TimeInputFlow({
    warnings.push('Over midnight');
  }
  if (countToEnd) {
    warnings.push('Count to End');
  }
  const hasDelay = delay !== 0;
  const isLockedEnd = timeStrategy === TimeStrategy.LockEnd;
  const isLockedDuration = timeStrategy === TimeStrategy.LockDuration;
@@ -132,19 +136,11 @@ function TimeInputFlow({
        </TimeInputGroup>
      </div>
-      {showWarnings &&
+      {warnings.length > 0 && (
-        (warnings.length > 0 ? (
+        <Tooltip text={warnings.join(' - ')} className={style.timerNote} data-testid='event-warning' render={<span />}>
-          <Tooltip
+          <IoAlertCircleOutline />
-            text={warnings.join(' - ')}
+        </Tooltip>
-            className={style.timerNote}
+      )}
            data-testid='event-warning'
            render={<span />}
          >
            <IoAlertCircleOutline />
          </Tooltip>
        ) : (
          <span className={`${style.timerNote} ${style.timerNotePlaceholder}`} aria-hidden='true' />
        ))}
    </>
  );
 }
@@ -1,6 +1,6 @@
 import { OntimeView, URLPreset } from 'ontime-types';
 import { generateId } from 'ontime-utils';
-import { useCallback, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { FieldErrors, useForm } from 'react-hook-form';
 import { generateUrl } from '../../common/api/session';
@@ -18,7 +18,7 @@ import { preventEscape } from '../../common/utils/keyEvent';
 import { isUrlSafe } from '../../common/utils/regex';
 import { isOntimeCloud, serverURL } from '../../externals';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
-import CuesheetLinkOptions, { CuesheetPermissionValues } from './composite/CuesheetLinkOptions';
+import CuesheetLinkOptions from './composite/CuesheetLinkOptions';
 import style from './GenerateLinkForm.module.scss';
@@ -53,26 +53,12 @@ type GenerateLinkState = 'pending' | 'loading' | 'success' | 'error';
 export default function GenerateLinkForm({ hostOptions, pathOptions, presets, isLockedToView }: GenerateLinkFormProps) {
  const [formState, setFormState] = useState<GenerateLinkState>('pending');
-  const [url, setUrl] = useState('');
+  const [url, setUrl] = useState(serverURL);
-  const [cuesheetPermissions, setCuesheetPermissions] = useState<CuesheetPermissionValues>({
+  const cuesheetReadRef = useRef<HTMLInputElement>(null);
-    read: 'full',
+  const cuesheetWriteRef = useRef<HTMLInputElement>(null);
    write: 'full',
  });
  const generatedAlias = useRef<string>(`cuesheet-${generateId()}`);
-  const { addPreset, updatePreset } = useUpdateUrlPreset();
+  const { addPreset } = useUpdateUrlPreset();
  // Tracks the alias we already created this session so re-generating updates rather than duplicates it
  const createdAlias = useRef<string | null>(null);
  /**
   * Permissions live outside react-hook-form, so we reset a successful state manually
   * whenever they change - this re-arms the "Create share link" button as the previous
   * link no longer reflects the selected permissions.
   */
  const handlePermissionsChange = useCallback((permissions: CuesheetPermissionValues) => {
    setCuesheetPermissions(permissions);
    setFormState((current) => (current === 'success' ? 'pending' : current));
  }, []);
  const {
    handleSubmit,
@@ -104,20 +90,16 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
    if (options.read === '-') {
      throw new Error('Cannot create a share with no read permissions');
    }
-    const payload = {
+    const presets = await addPreset({
      target: OntimeView.Cuesheet,
      enabled: true,
      alias,
      search: '',
      displayInNav: false,
      options: {
        read: options.read,
        write: options.write,
      },
-    } as const;
+    });
    // Re-generating with the same name updates the existing preset instead of failing on a duplicate alias
    const presets = createdAlias.current === alias ? await updatePreset(alias, payload) : await addPreset(payload);
    createdAlias.current = alias;
    return presets.find((preset) => preset.alias === alias);
  };
@@ -126,8 +108,8 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
      setFormState('loading');
      if (options.path === OntimeView.Cuesheet) {
        const urlPreset = await createPresetFromOptions((options as CuesheetLinkOptions).alias, {
-          read: cuesheetPermissions.read,
+          read: cuesheetReadRef.current?.value ?? 'full',
-          write: cuesheetPermissions.write,
+          write: cuesheetWriteRef.current?.value ?? 'full',
        });
        if (!urlPreset) {
@@ -175,7 +157,6 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
    }
  };
  const noReadAccess = watch('path') === OntimeView.Cuesheet && cuesheetPermissions.read === '-';
  const canSubmit = isDirty || formState !== 'success';
  return (
@@ -239,7 +220,7 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
                    })}
                  />
                </Panel.ListItem>
-                <CuesheetLinkOptions onChange={handlePermissionsChange} />
+                <CuesheetLinkOptions readRef={cuesheetReadRef} writeRef={cuesheetWriteRef} />
              </>
            )}
@@ -287,29 +268,18 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
          </Panel.ListGroup>
          <Panel.Error>{errors.root?.message}</Panel.Error>
          <Panel.InlineElements align='end' className={style.end}>
-            <Button
+            <Button type='submit' variant={canSubmit ? 'primary' : 'subtle'} loading={formState === 'loading'}>
              type='submit'
              variant={canSubmit ? 'primary' : 'subtle'}
              loading={formState === 'loading'}
              disabled={noReadAccess}
            >
              {canSubmit ? 'Create share link' : 'Link copied to clipboard!'}
            </Button>
          </Panel.InlineElements>
        </div>
        <Panel.Section className={style.column}>
          <Panel.Description>Share this link</Panel.Description>
-          {url ? (
+          <QRCode size={172} value={url} />
-            <>
+          <div className={style.copiableLink} data-testid='copy-link'>
-              <QRCode size={172} value={url} />
+            {url}
-              <div className={style.copiableLink} data-testid='copy-link'>
+          </div>
-                {url}
+          <CopyTag copyValue={url}>Copy link</CopyTag>
              </div>
              <CopyTag copyValue={url}>Copy link</CopyTag>
            </>
          ) : (
            <Panel.Description>Your link will appear here once you create it.</Panel.Description>
          )}
        </Panel.Section>
      </div>
    </form>
@@ -3,7 +3,6 @@ import { useMemo } from 'react';
 import useInfo from '../../common/hooks-query/useInfo';
 import useUrlPresets from '../../common/hooks-query/useUrlPresets';
 import { hostToBaseUrl } from '../../common/utils/linkUtils';
 import GenerateLinkForm from './GenerateLinkForm';
 interface GenerateLinkFormExportProps {
@@ -22,7 +21,7 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
   */
  const hostOptions = useMemo(() => {
    return infoData.networkInterfaces.map((nif) => ({
-      value: hostToBaseUrl(nif.address, infoData.serverPort),
+      value: `http://${nif.address}:${infoData.serverPort}`,
      label: `${nif.name} - ${nif.address}`,
    }));
  }, [infoData.networkInterfaces, infoData.serverPort]);
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, RefObject, useMemo, useState } from 'react';
 import RadioGroup from '../../../common/components/radio-group/RadioGroup';
 import Switch from '../../../common/components/switch/Switch';
@@ -10,141 +10,118 @@ import style from './CuesheetLinkOptions.module.scss';
 type AccessMode = 'full' | 'custom';
 export interface CuesheetPermissionValues {
  read: string;
  write: string;
 }
 interface CuesheetLinkOptionsProps {
-  /** Existing read permission to seed the form with ('full' | '-' | comma separated keys) */
+  readRef?: RefObject<HTMLInputElement | null>;
-  initialRead?: string;
+  writeRef?: RefObject<HTMLInputElement | null>;
  /** Existing write permission to seed the form with ('full' | '-' | comma separated keys) */
  initialWrite?: string;
  /** Notifies the parent whenever the resolved read/write permissions change */
  onChange: (permissions: CuesheetPermissionValues) => void;
 }
-/** A null result means "full or unset" - there is no explicit per-column selection to seed */
+export default function CuesheetLinkOptions({ readRef, writeRef }: CuesheetLinkOptionsProps) {
 function parseKeys(permission: string | undefined): Set<string> | null {
  if (permission == null || permission === 'full') {
    return null;
  }
  if (permission === '-') {
    return new Set();
  }
  return new Set(permission.split(','));
 }
 function modeFromPermission(permission: string | undefined): AccessMode {
  return permission == null || permission === 'full' ? 'full' : 'custom';
 }
 export default function CuesheetLinkOptions({ initialRead, initialWrite, onChange }: CuesheetLinkOptionsProps) {
  const { data } = useCustomFields();
  const customFieldColumns = useMemo(() => makeCuesheetCustomColumns(data), [data]);
  const allColumns = useMemo(() => [...cuesheetDefaultColumns, ...customFieldColumns], [customFieldColumns]);
-  // Parsed seed values - stable for the lifetime of a given preset
+  const [readPermissions, setReadPermissions] = useState<AccessMode>('full');
-  const initialReadKeys = useMemo(() => parseKeys(initialRead), [initialRead]);
+  const [writePermissions, setWritePermissions] = useState<AccessMode>('full');
  const initialWriteKeys = useMemo(() => parseKeys(initialWrite), [initialWrite]);
-  const [readPermissions, setReadPermissions] = useState<AccessMode>(() => modeFromPermission(initialRead));
+  const [readSwitches, setReadSwitches] = useState<Record<string, boolean>>(() => {
-  const [writePermissions, setWritePermissions] = useState<AccessMode>(() => modeFromPermission(initialWrite));
+    const initialState: Record<string, boolean> = {};
-
+    [...cuesheetDefaultColumns, ...customFieldColumns].forEach((column) => {
-  // Default for a column we have not seen yet: honour the seed in custom mode, otherwise grant access
+      initialState[column.value] = true;
  const defaultRead = useCallback(
    (key: string) => (initialReadKeys ? initialReadKeys.has(key) : true),
    [initialReadKeys],
  );
  const defaultWrite = useCallback(
    (key: string) => (initialWriteKeys ? initialWriteKeys.has(key) : true),
    [initialWriteKeys],
  );
  const [readSwitches, setReadSwitches] = useState<Record<string, boolean>>({});
  const [writeSwitches, setWriteSwitches] = useState<Record<string, boolean>>({});
  // Custom fields load asynchronously, so reconcile the switch maps whenever the column list grows.
  // Newly seen columns are seeded from the initial values (or default to on for a fresh link).
  useEffect(() => {
    setReadSwitches((prev) => {
      const next = { ...prev };
      for (const column of allColumns) {
        if (!(column.value in next)) next[column.value] = defaultRead(column.value);
      }
      return next;
    });
-    setWriteSwitches((prev) => {
+    return initialState;
-      const next = { ...prev };
+  });
      for (const column of allColumns) {
        if (!(column.value in next)) next[column.value] = defaultWrite(column.value);
      }
      return next;
    });
  }, [allColumns, defaultRead, defaultWrite]);
-  const isReadOn = (key: string) => readSwitches[key] ?? defaultRead(key);
+  const [writeSwitches, setWriteSwitches] = useState<Record<string, boolean>>(() => {
-  const isWriteOn = (key: string) => writeSwitches[key] ?? defaultWrite(key);
+    const initialState: Record<string, boolean> = {};
    [...cuesheetDefaultColumns, ...customFieldColumns].forEach((column) => {
      initialState[column.value] = true;
    });
    return initialState;
  });
  const handleReadModeChange = (value: AccessMode) => {
    setReadPermissions(value);
    setReadSwitches((prevReadSwitches) => {
      const updatedReadSwitches = { ...prevReadSwitches };
      Object.keys(updatedReadSwitches).forEach((key) => {
        updatedReadSwitches[key] = true;
      });
      return updatedReadSwitches;
    });
  };
  const handleWriteModeChange = (value: AccessMode) => {
    setWritePermissions(value);
    // Full write implies full read
    if (value === 'full') {
      setReadPermissions('full');
    }
    setWritePermissions(value);
    setReadSwitches((prevReadSwitches) => {
      const updatedReadSwitches = { ...prevReadSwitches };
      setWriteSwitches((prevWriteSwitches) => {
        const updatedWriteSwitches = { ...prevWriteSwitches };
        [...cuesheetDefaultColumns, ...customFieldColumns].forEach((column) => {
          updatedReadSwitches[column.value] = true;
          updatedWriteSwitches[column.value] = true;
        });
        return updatedWriteSwitches;
      });
      return updatedReadSwitches;
    });
  };
-  const handleReadSwitch = (key: string, value: boolean) => {
+  const handleSwitchChange = (key: string, type: 'read' | 'write', value: boolean) => {
-    setReadSwitches((prev) => ({ ...prev, [key]: value }));
+    if (type === 'read') {
-    // A column the recipient cannot read cannot be written either
+      setReadSwitches((prevReadSwitches) => {
-    if (!value) {
+        const updatedReadSwitches = { ...prevReadSwitches, [key]: value };
-      setWriteSwitches((prev) => ({ ...prev, [key]: false }));
+        return updatedReadSwitches;
      });
    } else {
      setWriteSwitches((prevWriteSwitches) => {
        const updatedWriteSwitches = { ...prevWriteSwitches, [key]: value };
        return updatedWriteSwitches;
      });
    }
  };
-  const handleWriteSwitch = (key: string, value: boolean) => {
+  const getReadPermissions = () => {
    setWriteSwitches((prev) => ({ ...prev, [key]: value }));
    // Granting write access requires read access
    if (value) {
      setReadSwitches((prev) => ({ ...prev, [key]: true }));
    }
  };
  const resolvedRead = useMemo(() => {
    if (readPermissions === 'full' || writePermissions === 'full') {
      return 'full';
    }
    const keys = allColumns.filter((column) => isReadOn(column.value)).map((column) => column.value);
    return keys.length ? keys.join(',') : '-';
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [readPermissions, writePermissions, readSwitches, allColumns]);
-  const resolvedWrite = useMemo(() => {
+    return Object.entries(readSwitches)
      .filter(([_, value]) => value)
      .map(([key]) => key)
      .join(',');
  };
  const getWritePermissions = () => {
    if (writePermissions === 'full') {
      return 'full';
    }
    const keys = allColumns.filter((column) => isWriteOn(column.value)).map((column) => column.value);
    return keys.length ? keys.join(',') : '-';
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [writePermissions, writeSwitches, allColumns]);
-  // Notify the parent of the resolved permissions. onChange is expected to be stable.
+    return Object.entries(writeSwitches)
-  useEffect(() => {
+      .filter(([_, value]) => value)
-    onChange({ read: resolvedRead, write: resolvedWrite });
+      .map(([key]) => key)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      .join(',');
-  }, [resolvedRead, resolvedWrite]);
+  };
  const noReadAccess = resolvedRead === '-';
  return (
    <Panel.Indent>
      <input name='read' hidden readOnly ref={readRef} value={getReadPermissions() || '-'} />
      <input name='write' hidden readOnly ref={writeRef} value={getWritePermissions() || '-'} />
      <div>
-        <Panel.Field title='Access mode' description='Which parts of the data the link gives access to' />
+        <Panel.Field title='Access mode' description='Which parts of the data will the link give access to' />
        <div>
          <RadioGroup
            value={writePermissions}
            onValueChange={handleWriteModeChange}
            orientation='horizontal'
            items={[
              { value: 'full', label: 'Full write (edit all existing and future columns)' },
              { value: 'custom', label: 'Custom write' },
            ]}
          />
          <RadioGroup
            value={readPermissions}
            onValueChange={handleReadModeChange}
@@ -155,18 +132,8 @@ export default function CuesheetLinkOptions({ initialRead, initialWrite, onChang
              { value: 'custom', label: 'Custom read' },
            ]}
          />
          <RadioGroup
            value={writePermissions}
            onValueChange={handleWriteModeChange}
            orientation='horizontal'
            items={[
              { value: 'full', label: 'Full write (edit all existing and future columns)' },
              { value: 'custom', label: 'Custom write' },
            ]}
          />
        </div>
      </div>
      {noReadAccess && <Panel.Error>Links must contain at least one readable column.</Panel.Error>}
      <div className={style.twoCols}>
        <div className={style.grid}>
          <Panel.Description>Ontime columns</Panel.Description>
@@ -176,14 +143,14 @@ export default function CuesheetLinkOptions({ initialRead, initialWrite, onChang
            <Fragment key={column.value}>
              <div>{column.label}</div>
              <Switch
-                checked={isReadOn(column.value)}
+                checked={Boolean(readSwitches[column.value])}
-                onCheckedChange={(value: boolean) => handleReadSwitch(column.value, value)}
+                onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'read', value)}
                disabled={readPermissions === 'full' || writePermissions === 'full'}
                data-testid={`read-${column.value}`}
              />
              <Switch
-                checked={isWriteOn(column.value)}
+                checked={Boolean(writeSwitches[column.value])}
-                onCheckedChange={(value: boolean) => handleWriteSwitch(column.value, value)}
+                onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'write', value)}
                disabled={writePermissions === 'full'}
                data-testid={`write-${column.value}`}
              />
@@ -197,16 +164,16 @@ export default function CuesheetLinkOptions({ initialRead, initialWrite, onChang
            <Panel.Description>Write</Panel.Description>
            {customFieldColumns.map((column) => (
              <Fragment key={column.value}>
-                <div>{column.label}</div>
+                {column.label}
                <Switch
-                  checked={isReadOn(column.value)}
+                  checked={Boolean(readSwitches[column.value])}
-                  onCheckedChange={(value: boolean) => handleReadSwitch(column.value, value)}
+                  onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'read', value)}
                  disabled={readPermissions === 'full' || writePermissions === 'full'}
                  data-testid={`read-${column.value}`}
                />
                <Switch
-                  checked={isWriteOn(column.value)}
+                  checked={Boolean(writeSwitches[column.value])}
-                  onCheckedChange={(value: boolean) => handleWriteSwitch(column.value, value)}
+                  onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'write', value)}
                  disabled={writePermissions === 'full'}
                  data-testid={`write-${column.value}`}
                />
@@ -18,7 +18,6 @@ export const langDe: TranslationObject = {
  'common.no_data': 'Keine Daten',
  'countdown.ended': 'Veranstaltung endete um',
  'countdown.running': 'Veranstaltung läuft',
  'countdown.group_running': 'Veranstaltung in Gruppe läuft',
  'countdown.loaded': 'Veranstaltung geladen',
  'countdown.select_event': 'Wählen Sie eine Veranstaltung aus, um sie zu verfolgen',
  'countdown.to_start': 'Zeit bis zum Start',
@@ -29,7 +28,6 @@ export const langDe: TranslationObject = {
  'timeline.done': 'Beendet',
  'timeline.due': 'fällig',
  'timeline.followedby': 'Gefolgt von',
  'timeline.standby': 'Bereitschaft',
  'project.title': 'Titel',
  'project.description': 'Beschreibung',
  'project.info': 'Projektinfo',
@@ -18,7 +18,6 @@ export const langEs: TranslationObject = {
  'common.no_data': 'Sin datos',
  'countdown.ended': 'Evento finalizado a las',
  'countdown.running': 'Evento en curso',
  'countdown.group_running': 'Evento en grupo en curso',
  'countdown.loaded': 'Evento está cargado', //TODO: check translation
  'countdown.select_event': 'Seleccionar un evento para seguir',
  'countdown.to_start': 'Tiempo para comenzar',
@@ -29,7 +28,6 @@ export const langEs: TranslationObject = {
  'timeline.done': 'Terminado',
  'timeline.due': 'pendiente',
  'timeline.followedby': 'Seguido por',
  'timeline.standby': 'En espera',
  'project.title': 'Título',
  'project.description': 'Descripción',
  'project.info': 'Información del proyecto',
@@ -18,7 +18,6 @@ export const langFr: TranslationObject = {
  'common.no_data': 'Aucune donnée',
  'countdown.ended': 'Évènement terminé à',
  'countdown.running': 'Évènement en cours',
  'countdown.group_running': 'Évènement du groupe en cours',
  'countdown.loaded': 'Évènement chargé',
  'countdown.select_event': 'Sélectionnez un évènement à suivre',
  'countdown.to_start': 'Évènement commence dans',
@@ -29,7 +28,6 @@ export const langFr: TranslationObject = {
  'timeline.done': 'Terminé',
  'timeline.due': 'dû',
  'timeline.followedby': 'Suivi de',
  'timeline.standby': 'En attente',
  'project.title': 'Titre',
  'project.description': 'Description',
  'project.info': 'Informations du projet',
@@ -18,7 +18,6 @@ export const langIt: TranslationObject = {
  'common.no_data': 'Nessun dato disponibile',
  'countdown.ended': 'Evento finito alle',
  'countdown.running': 'Evento in corso',
  'countdown.group_running': 'Evento nel gruppo in corso',
  'countdown.loaded': 'Evento caricato', //TODO: check translation
  'countdown.select_event': 'Seleziona un evento da seguire',
  'countdown.to_start': 'Tempo alla partenza',
@@ -29,7 +28,6 @@ export const langIt: TranslationObject = {
  'timeline.done': 'Terminato',
  'timeline.due': 'previsto',
  'timeline.followedby': 'Seguito da',
  'timeline.standby': 'In attesa',
  'project.title': 'Titolo',
  'project.description': 'Descrizione',
  'project.info': 'Informazioni sul progetto',
@@ -18,7 +18,6 @@ export const langPt: TranslationObject = {
  'common.no_data': 'Sem dados',
  'countdown.ended': 'Evento encerrado às',
  'countdown.running': 'Evento em andamento',
  'countdown.group_running': 'Evento em grupo em andamento',
  'countdown.loaded': 'Evento carregado', //TODO: check translation
  'countdown.select_event': 'Selecione um evento para acompanhar',
  'countdown.to_start': 'Tempo para iniciar',
@@ -29,7 +28,6 @@ export const langPt: TranslationObject = {
  'timeline.done': 'Concluído',
  'timeline.due': 'Pendente',
  'timeline.followedby': 'Seguido por',
  'timeline.standby': 'Em espera',
  'project.title': 'Título',
  'project.description': 'Descrição',
  'project.info': 'Informações do projeto',
@@ -7,7 +7,6 @@ import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
 } from 'react';
@@ -141,23 +140,25 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
    return () => clearInterval(paginator.current);
  }, [cycleInterval, numPages, stopCycle, visiblePage]);
  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
  // we want to show the event after the current
-  const viewEvents = useMemo(() => {
+  const viewEvents = events.slice(selectedEventIndex + 1);
-    const selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+  selectedEventIndex = 0;
    return (events as ExtendedEntry<OntimeEvent>[]).slice(selectedEventIndex + 1);
  }, [events, selectedEventId]);
-  const value = useMemo(() => {
+  return (
-    return {
+    <ScheduleContext
-      events: viewEvents,
+      value={{
-      selectedEventId,
+        events: viewEvents as ExtendedEntry<OntimeEvent>[],
-      numPages,
+        selectedEventId,
-      visiblePage,
+        numPages,
-      containerRef,
+        visiblePage,
-    };
+        containerRef,
-  }, [viewEvents, selectedEventId, numPages, visiblePage, containerRef]);
+      }}
-
+    >
-  return <ScheduleContext value={value}>{children}</ScheduleContext>;
+      {children}
    </ScheduleContext>
  );
 };
 export const useSchedule = () => {
@@ -59,7 +59,6 @@ $item-height: 3.5rem;
    right: $view-inline-padding;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 2rem;
@@ -73,27 +72,14 @@ $item-height: 3.5rem;
  }
  /* ========================= LIST ========================*/
-  .empty-state {
+  .empty-container {
    min-height: min(56vh, 36rem);
    padding-top: clamp(4rem, 14vh, 9rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    button {
-      margin-top: 1.75rem;
+      margin-top: 2rem;
    }
  }
  .empty-state__content {
    max-width: none;
    span {
      max-width: none;
      white-space: nowrap;
      font-size: clamp(1.5rem, 4vw, 2.25rem);
      line-height: 1.1;
    }
  }
@@ -102,7 +88,7 @@ $item-height: 3.5rem;
    flex-direction: column;
    overflow-y: auto;
-    padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
+    padding-bottom: 60vh;
  }
  /* ====================== LIST-ITEM ======================*/
@@ -118,7 +104,6 @@ $item-height: 3.5rem;
    column-gap: 1rem;
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
    padding-right: 1rem;
    border: 1px solid transparent;
    border-radius: $element-border-radius;
    &:hover {
@@ -130,41 +115,18 @@ $item-height: 3.5rem;
  .sub--selected {
    background: $blue-700;
    box-shadow: inset 0 0 0 1px $blue-500;
  }
  .sub--live {
    background-color: $active-green;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, $active-green 75%, $ui-white);
  }
  .sub--armed {
    background-color: $gray-1325;
  }
  .sub--in-group {
    position: relative;
    margin-left: 1rem;
    &::before {
      content: '';
      position: absolute;
      left: -0.5rem;
      top: -0.25rem;
      bottom: -0.25rem;
      width: 2px;
      border-radius: 1px;
      background: var(--group-color, transparent);
    }
    .sub__binder {
      box-shadow: inset 3px 0 0 var(--group-color, transparent);
    }
  }
  .sub__binder {
    background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
    border-radius: $element-border-radius 0 0 $element-border-radius;
    grid-area: binder;
  }
@@ -176,8 +138,6 @@ $item-height: 3.5rem;
    gap: 0.25em;
    font-size: $timer-label-size;
    color: var(--label-color-override, $viewer-label-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .sub__schedule--delayed {
@@ -196,73 +156,22 @@ $item-height: 3.5rem;
    color: $playback-under;
  }
  .sub--group {
    box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
      var(--card-background-color-override, $viewer-card-bg-color);
    .sub__binder {
      background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
      box-shadow: none;
    }
    .sub__title {
      font-weight: 700;
    }
    .sub__schedule,
    .sub__status,
    .sub__label {
      color: var(--secondary-color-override, $viewer-secondary-color);
    }
  }
  .sub--group.sub--selected {
    box-shadow: inset 0 0 0 1px $blue-500;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 22%, transparent), transparent 42%),
      $blue-700;
    .sub__schedule,
    .sub__status,
    .sub__label,
    .sub__eyebrow {
      color: $ui-white;
    }
  }
  .sub__title {
    grid-area: title;
    padding-bottom: 0.5rem;
    min-width: 0;
    font-size: $title-font-size;
    line-height: 1.1em;
    overflow-wrap: anywhere;
  }
  .sub__eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--secondary-color-override, $viewer-secondary-color);
    font-size: $timer-label-size;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }
  .sub__secondary {
    grid-area: secondary;
    padding-bottom: 0.5rem;
    min-width: 0;
    font-size: $base-font-size;
    line-height: 1.1em;
    color: var(--label-color-override, $viewer-label-color);
    // allow multi-line text but trim before
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .sub__status {
@@ -272,7 +181,6 @@ $item-height: 3.5rem;
    font-size: $timer-label-size;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .sub__label {
@@ -282,7 +190,6 @@ $item-height: 3.5rem;
    font-size: $timer-label-size;
    color: var(--label-color-override, $viewer-label-color);
    text-align: right;
    white-space: nowrap;
  }
  .sub__timer {
@@ -292,16 +199,6 @@ $item-height: 3.5rem;
    line-height: 1.1em;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .selection-count {
    color: var(--label-color-override, $viewer-label-color);
    font-size: $timer-label-size;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* ====================== MODIFIERS ======================*/
@@ -1,14 +1,4 @@
-import {
+import { EntryId, OntimeEvent, OntimeView, PlayableEvent, isOntimeEvent, isPlayableEvent } from 'ontime-types';
  EntryId,
  OntimeEntry,
  OntimeEvent,
  OntimeGroup,
  OntimeView,
  PlayableEvent,
  isOntimeEvent,
  isOntimeGroup,
  isPlayableEvent,
 } from 'ontime-types';
 import { useMemo, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
@@ -25,7 +15,7 @@ import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getCountdownOptions, useCountdownOptions } from './countdown.options';
-import { getOrderedSubscriptions, resolveSubscriptionTarget } from './countdown.utils';
+import { getOrderedSubscriptions } from './countdown.utils';
 import CountdownSelect from './CountdownSelect';
 import CountdownSubscriptions from './CountdownSubscriptions';
 import SingleEventCountdown from './SingleEventCountdown';
@@ -55,19 +45,13 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
  const [editMode, setEditMode] = useState(false);
-  // gather subscribable items: playable events and groups that contain at least one playable child
+  // gather rundown data
-  const candidates = rundownData.filter((entry): entry is ExtendedEntry<PlayableEvent | OntimeGroup> => {
+  const playableEvents = rundownData.filter((entry): entry is ExtendedEntry<PlayableEvent> => {
-    if (isOntimeEvent(entry)) {
+    return isOntimeEvent(entry) && isPlayableEvent(entry);
      return isPlayableEvent(entry);
    }
    if (isOntimeGroup(entry)) {
      return rundownData.some((item) => isOntimeEvent(item) && isPlayableEvent(item) && item.parent === entry.id);
    }
    return false;
  });
  // gather presentation data
-  const hasEvents = candidates.length > 0;
+  const hasEvents = playableEvents.length > 0;
  // gather option data
  const defaultFormat = getDefaultFormat(settings?.timeFormat);
@@ -85,20 +69,15 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
        <CountdownClock />
      </div>
-      {!hasEvents && (
+      {!hasEvents && <Empty text={getLocalizedString('common.no_data')} className='empty-container' />}
        <div className='empty-state'>
          <Empty text={getLocalizedString('common.no_data')} className='empty-state__content' />
        </div>
      )}
      {hasEvents && editMode && (
-        <CountdownSelect events={candidates} subscriptions={subscriptions} disableEdit={() => setEditMode(false)} />
+        <CountdownSelect events={playableEvents} subscriptions={subscriptions} disableEdit={() => setEditMode(false)} />
      )}
      {hasEvents && !editMode && (
        <CountdownContents
-          candidates={candidates}
+          playableEvents={playableEvents}
          rundownData={rundownData}
          subscriptions={subscriptions}
          goToEditMode={() => setEditMode(true)}
        />
@@ -108,20 +87,19 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
 }
 interface CountdownContentsProps {
-  candidates: ExtendedEntry<OntimeEvent | OntimeGroup>[];
+  playableEvents: ExtendedEntry<OntimeEvent>[];
  rundownData: ExtendedEntry<OntimeEntry>[];
  subscriptions: EntryId[];
  goToEditMode: () => void;
 }
-function CountdownContents({ candidates, rundownData, subscriptions, goToEditMode }: CountdownContentsProps) {
+function CountdownContents({ playableEvents, subscriptions, goToEditMode }: CountdownContentsProps) {
  const { getLocalizedString } = useTranslation();
  const { hidePast } = useCountdownOptions();
  if (subscriptions.length === 0) {
    return (
-      <div className='empty-state'>
+      <div className='empty-container'>
-        <Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
+        <Empty text={getLocalizedString('countdown.select_event')} className='empty-container' />
        <Button variant='primary' size='xlarge' onClick={goToEditMode}>
          <IoAdd /> Add
        </Button>
@@ -129,15 +107,13 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
    );
  }
-  const subscribedEvents = getOrderedSubscriptions(subscriptions, candidates)
+  const subscribedEvents = getOrderedSubscriptions(subscriptions, playableEvents);
    .map((entry) => resolveSubscriptionTarget(entry, rundownData))
    .filter((target): target is NonNullable<typeof target> => target !== null);
  const eventsToShow = !hidePast ? subscribedEvents : subscribedEvents.filter((event) => !event.isPast);
  if (subscribedEvents.length === 0) {
    return (
-      <div className='empty-state'>
+      <div className='empty-container'>
-        <Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
+        <Empty text={getLocalizedString('countdown.select_event')} className='empty-container' />
        <Button variant='primary' size='xlarge' onClick={goToEditMode}>
          <IoAdd /> Add
        </Button>
@@ -153,8 +129,8 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
  if (eventsToShow.length === 0) {
    return (
-      <div className='empty-state'>
+      <div className='empty-container'>
-        <Empty text={getLocalizedString('countdown.all_have_finished')} className='empty-state__content' />
+        <Empty text={getLocalizedString('countdown.all_have_finished')} className='empty-container' />
      </div>
    );
  }
@@ -1,4 +1,4 @@
-import { EntryId, OntimeEvent, OntimeGroup, isOntimeGroup } from 'ontime-types';
+import { EntryId, PlayableEvent } from 'ontime-types';
 import { useState } from 'react';
 import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router';
@@ -12,7 +12,7 @@ import { makeSubscriptionsUrl } from './countdown.utils';
 import './Countdown.scss';
 interface CountdownSelectProps {
-  events: ExtendedEntry<OntimeEvent | OntimeGroup>[];
+  events: ExtendedEntry<PlayableEvent>[];
  subscriptions: EntryId[];
  disableEdit: () => void;
 }
@@ -52,15 +52,13 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
  return (
    <div className='list-container'>
-      {events.map((event) => {
+      {events.map((event, index) => {
        const title = event.title || '{no title}';
        const isSelected = selectedIds.has(event.id);
        const isGroup = isOntimeGroup(event);
        const isGroupedEvent = !isGroup && Boolean(event.parent);
        return (
          <div
-            key={event.id}
+            key={index}
            role='button'
            tabIndex={0}
            onClick={() => toggleSelect(event.id)}
@@ -70,33 +68,21 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
                e.stopPropagation();
              }
            }}
-            className={cx([
+            className={cx(['sub', isSelected && 'sub--selected'])}
              'sub',
              isSelected && 'sub--selected',
              isGroup && 'sub--group',
              isGroupedEvent && 'sub--in-group',
            ])}
          >
-            <div
+            <div className='sub__binder' style={{ '--user-color': event?.colour ?? '' }} />
              className='sub__binder'
              style={{ '--user-color': event?.colour ?? '', '--group-color': event.groupColour ?? 'transparent' }}
            />
            <div className='sub__schedule'>
              <ClockTime value={event.timeStart} preferredFormat12='h:mm a' preferredFormat24='HH:mm' />
              →
              <ClockTime value={event.timeEnd} preferredFormat12='h:mm a' preferredFormat24='HH:mm' />
            </div>
            <div className='sub__label'>{isSelected ? 'Click to remove' : 'Click to add'}</div>
-            <div className='sub__title'>
+            <div className='sub__title'>{title}</div>
              {isGroup && <span className='sub__eyebrow'>Group</span>}
              {title}
            </div>
          </div>
        );
      })}
      <div className='fab-container'>
        <div className='selection-count'>{selected.length} selected</div>
        <Button variant='subtle' size='xlarge' onClick={disableEdit}>
          <IoArrowBack /> Go back
        </Button>
@@ -19,7 +19,6 @@ import { getPropertyValue } from '../common/viewUtils';
 import { useCountdownOptions } from './countdown.options';
 import {
  CountdownEvent,
  CountdownTarget,
  extendEventData,
  getIsLive,
  isOutsideRange,
@@ -31,7 +30,7 @@ import {
 import './Countdown.scss';
 interface CountdownSubscriptionsProps {
-  subscribedEvents: CountdownTarget[];
+  subscribedEvents: ExtendedEntry<OntimeEvent>[];
  goToEditMode: () => void;
 }
@@ -99,39 +98,22 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
  return (
    <div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
      {subscribedEvents.map((event) => {
-        // while a group is live, surface the running event's title as the secondary line
+        const secondaryData = getPropertyValue(event, secondarySource);
-        const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
+        const isLive = getIsLive(event.id, selectedEventId, playback);
-        const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
+        const isArmed = !isLive && event.id === selectedEventId;
        const isGroupedEvent = !event.isGroup && Boolean(event.parent);
        const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
        // a subscribed group is live when any of its children is the selected/running event
        const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
        const isArmed = !isLive && activeEntryId === selectedEventId;
        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
        const displayTitle = getPropertyValue(event, mainSource ?? 'title');
        return (
          <div
            key={event.id}
            ref={isLive ? selectedRef : undefined}
-            className={cx([
+            className={cx(['sub', isLive && 'sub--live', isArmed && 'sub--armed'])}
              'sub',
              isLive && 'sub--live',
              isArmed && 'sub--armed',
              event.isGroup && 'sub--group',
              isGroupedEvent && 'sub--in-group',
            ])}
            data-testid={event.cue}
          >
-            <div
+            <div className='sub__binder' style={{ '--user-color': event.colour }} />
              className='sub__binder'
              style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
            />
            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
            <SubscriptionStatus event={countdownEvent} />
-            <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
+            <div className={cx(['sub__title', !displayTitle && 'subdued'])}>{displayTitle}</div>
              {event.isGroup && <span className='sub__eyebrow'>Group</span>}
              {displayTitle}
            </div>
            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
          </div>
        );
@@ -11,13 +11,13 @@ import { cx } from '../../common/utils/styleUtils';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../common/viewUtils';
 import { useCountdownOptions } from './countdown.options';
-import { CountdownTarget, useSubscriptionDisplayData } from './countdown.utils';
+import { useSubscriptionDisplayData } from './countdown.utils';
 import { ScheduleTime } from './CountdownSubscriptions';
 import './SingleEventCountdown.scss';
 interface SingleEventCountdownProps {
-  subscribedEvent: CountdownTarget;
+  subscribedEvent: ExtendedEntry<OntimeEvent>;
  goToEditMode: () => void;
 }
@@ -38,13 +38,11 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
    mode,
  });
-  const { endedAt } = reportData[subscribedEvent.reportId ?? subscribedEvent.id] ?? { endedAt: null };
+  const { endedAt } = reportData[subscribedEvent.id] ?? { endedAt: null };
  const countdownEvent = { ...subscribedEvent, expectedStart, endedAt };
  const titleTmp = getPropertyValue(subscribedEvent, mainSource ?? 'title');
  const title = titleTmp?.length ? titleTmp : ' '; // insert utf-8 empty space to avoid the line collapsing;
-  // while a group is live, surface the running event's title as the secondary line
+  const secondaryData = getPropertyValue(subscribedEvent, secondarySource);
  const liveTitle = subscribedEvent.isGroup && subscribedEvent.liveEntry ? subscribedEvent.liveEntry.title : undefined;
  const secondaryData = liveTitle ?? getPropertyValue(subscribedEvent, secondarySource);
  return (
    <div className='single-container' data-testid='countdown-event'>
@@ -80,7 +80,7 @@ export const getCountdownOptions = (
        {
          id: 'sub',
          title: 'Event subscription',
-          description: 'The events and groups to follow',
+          description: 'The events to follow',
          values: persistedSubscriptions,
          type: 'persist',
        },
@@ -1,128 +0,0 @@
 import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { resolveSubscriptionTarget } from './countdown.utils';
 /**
 * Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
 * Only the fields exercised by resolveSubscriptionTarget are provided; the rest are cast away.
 */
 function makeEvent(patch: Partial<ExtendedEntry<OntimeEvent>>): ExtendedEntry<OntimeEvent> {
  return {
    id: 'event',
    type: SupportedEntry.Event,
    title: 'event title',
    cue: '1',
    colour: '',
    skip: false,
    parent: null,
    timeStart: 0,
    timeEnd: 0,
    duration: 0,
    delay: 0,
    dayOffset: 0,
    gap: 0,
    countToEnd: false,
    custom: {},
    note: '',
    // metadata
    totalGap: 0,
    isLinkedToLoaded: false,
    isLoaded: false,
    isPast: false,
    ...patch,
  } as ExtendedEntry<OntimeEvent>;
 }
 function makeGroup(patch: Partial<ExtendedEntry<OntimeGroup>>): ExtendedEntry<OntimeGroup> {
  return {
    id: 'group',
    type: SupportedEntry.Group,
    title: 'group title',
    colour: '#abcdef',
    note: 'group note',
    entries: [],
    duration: 0,
    custom: {},
    timeStart: 0,
    timeEnd: 0,
    isPast: false,
    isLoaded: false,
    ...patch,
  } as ExtendedEntry<OntimeGroup>;
 }
 describe('resolveSubscriptionTarget()', () => {
  it('returns events unchanged', () => {
    const event = makeEvent({ id: 'e1' });
    const result = resolveSubscriptionTarget(event, [event]);
    expect(result).toBe(event);
  });
  it('derives group timing from the first playable child while keeping the group identity', () => {
    const group = makeGroup({ id: 'g1', title: 'Session A', colour: '#123456', duration: 5000 });
    const child1 = makeEvent({ id: 'c1', parent: 'g1', timeStart: 1000, delay: 100, dayOffset: 0, title: 'Pres 1' });
    const child2 = makeEvent({ id: 'c2', parent: 'g1', timeStart: 3000, title: 'Pres 2' });
    const flat: ExtendedEntry<OntimeEntry>[] = [group, child1, child2];
    const result = resolveSubscriptionTarget(group, flat);
    expect(result).not.toBeNull();
    // group identity and display
    expect(result?.id).toBe('g1');
    expect(result?.title).toBe('Session A');
    expect(result?.colour).toBe('#123456');
    expect(result?.isGroup).toBe(true);
    // timing comes from the first child, duration from the group
    expect(result?.timeStart).toBe(1000);
    expect(result?.delay).toBe(100);
    expect(result?.duration).toBe(5000);
    expect(result?.countToEnd).toBe(false);
    // state checks target the first child before any child is loaded
    expect(result?.targetId).toBe('c1');
    // report lookup targets the last child (session end)
    expect(result?.reportId).toBe('c2');
  });
  it('returns null for a group with no playable children', () => {
    const group = makeGroup({ id: 'g1' });
    const result = resolveSubscriptionTarget(group, [group]);
    expect(result).toBeNull();
  });
  it('skips skipped children when picking the first child', () => {
    const group = makeGroup({ id: 'g1' });
    const skipped = {
      ...makeEvent({ id: 'c0', parent: 'g1', timeStart: 500 }),
      skip: true,
    } as ExtendedEntry<OntimeEntry>;
    const playable = makeEvent({ id: 'c1', parent: 'g1', timeStart: 1500 });
    const result = resolveSubscriptionTarget(group, [group, skipped, playable]);
    expect(result?.timeStart).toBe(1500);
    expect(result?.reportId).toBe('c1');
  });
  it('is live while any child is loaded and not past', () => {
    const group = makeGroup({ id: 'g1' });
    const child1 = makeEvent({ id: 'c1', parent: 'g1', isPast: true });
    const child2 = makeEvent({ id: 'c2', parent: 'g1', isLoaded: true });
    const child3 = makeEvent({ id: 'c3', parent: 'g1' });
    const result = resolveSubscriptionTarget(group, [group, child1, child2, child3]);
    expect(result?.isLoaded).toBe(true);
    expect(result?.isPast).toBe(false);
    expect(result?.liveEntry?.id).toBe('c2');
  });
  it('is past only once the last child is past and nothing is loaded', () => {
    const group = makeGroup({ id: 'g1' });
    const child1 = makeEvent({ id: 'c1', parent: 'g1', isPast: true });
    const child2 = makeEvent({ id: 'c2', parent: 'g1', isPast: true });
    const result = resolveSubscriptionTarget(group, [group, child1, child2]);
    expect(result?.isLoaded).toBe(false);
    expect(result?.isPast).toBe(true);
    expect(result?.targetId).toBe('c1');
    expect(result?.liveEntry).toBeNull();
  });
 });
@@ -1,17 +1,4 @@
-import {
+import { EntryId, MaybeNumber, OffsetMode, OntimeEntry, OntimeEvent, OntimeReport, Playback } from 'ontime-types';
  EntryId,
  MaybeNumber,
  OffsetMode,
  OntimeEntry,
  OntimeEvent,
  OntimeGroup,
  OntimeReport,
  Playback,
  PlayableEvent,
  isOntimeEvent,
  isOntimeGroup,
  isPlayableEvent,
 } from 'ontime-types';
 import { MILLIS_PER_MINUTE, getExpectedStart, millisToString, removeLeadingZero } from 'ontime-utils';
 import { useCountdownSocket } from '../../common/hooks/useSocket';
@@ -53,7 +40,7 @@ export const timerProgress: TimerMessage = {
 * Handles events in different days but disregards whether an event has actually played
 */
 export function useSubscriptionDisplayData(
-  subscribedEvent: CountdownTarget & { endedAt: MaybeNumber; expectedStart: number },
+  subscribedEvent: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number },
 ): { status: ProgressStatus; statusDisplay: string; timeDisplay: string } {
  const { playback, current, clock } = useCountdownSocket();
  const { getLocalizedString } = useTranslation();
@@ -80,11 +67,7 @@ export function useSubscriptionDisplayData(
    return {
      status: 'live',
-      statusDisplay: getLocalizedString(
+      statusDisplay: getLocalizedString(timerProgress['live']),
        subscribedEvent.parent || (subscribedEvent.isGroup && subscribedEvent.liveEntry)
          ? 'countdown.group_running'
          : timerProgress['live'],
      ),
      timeDisplay: bigDuration(current ?? 0),
    };
  }
@@ -185,75 +168,10 @@ export function isOutsideRange(a: number, b: number): boolean {
  return Math.abs(a - b) > MILLIS_PER_MINUTE;
 }
-/**
+export type CountdownEvent = ExtendedEntry<OntimeEvent> & { expectedStart: number; endedAt: MaybeNumber };
 * A subscription target normalised to the event-shaped object the countdown display consumes.
 * For events this is a pass-through; for groups it carries the group identity and display data
 * while deriving timing from the group's first playable child (see resolveSubscriptionTarget).
 */
 export type CountdownTarget = ExtendedEntry<OntimeEvent> & {
  isGroup?: boolean;
  targetId?: EntryId; // child entry used for countdown/live/armed state checks
  reportId?: EntryId; // entry used for the report lookup (e.g. last child of a group)
  liveEntry?: ExtendedEntry<OntimeEvent> | null; // the running child while a group is live
 };
 export type CountdownEvent = CountdownTarget & { expectedStart: number; endedAt: MaybeNumber };
 /**
 * Resolves a subscription (event or group) into an event-shaped countdown target.
 * - Events are returned unchanged.
 * - Groups count down to their first playable child while displaying the group identity.
 *   Status is group-aware: live while any child is loaded, past only once the whole group has finished.
 * Returns null when a group has no playable children (nothing to count down to).
 */
 export function resolveSubscriptionTarget(
  entry: ExtendedEntry<OntimeEvent | OntimeGroup>,
  flatRundown: ExtendedEntry<OntimeEntry>[],
 ): CountdownTarget | null {
  if (!isOntimeGroup(entry)) {
    return entry;
  }
  const children = flatRundown.filter(
    (item): item is ExtendedEntry<PlayableEvent> =>
      isOntimeEvent(item) && isPlayableEvent(item) && item.parent === entry.id,
  );
  if (children.length === 0) {
    return null;
  }
  const firstChild = children[0];
  const lastChild = children[children.length - 1];
  const liveEntry = children.find((child) => child.isLoaded) ?? null;
  const isLoaded = liveEntry !== null;
  const isPast = !isLoaded && lastChild.isPast;
  return {
    // timing derives from the first playable child
    ...firstChild,
    // group identity and display data
    id: entry.id,
    parent: null,
    title: entry.title,
    colour: entry.colour,
    note: entry.note,
    custom: entry.custom,
    duration: entry.duration,
    countToEnd: false,
    // group-aware status
    isLoaded,
    isPast,
    // group markers
    isGroup: true,
    targetId: firstChild.id,
    reportId: lastChild.id,
    liveEntry,
  };
 }
 export function extendEventData(
-  event: CountdownTarget,
+  event: ExtendedEntry<OntimeEvent>,
  currentDay: number,
  actualStart: MaybeNumber,
  plannedStart: MaybeNumber,
@@ -271,6 +189,6 @@ export function extendEventData(
    offset,
    mode,
  });
-  const { endedAt } = reportData[event.reportId ?? event.id] ?? { endedAt: null };
+  const { endedAt } = reportData[event.id] ?? { endedAt: null };
  return { ...event, expectedStart, endedAt };
 }
@@ -20,7 +20,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
      alias: 'cuesheet-read-only',
      target: OntimeView.Cuesheet,
      search: '',
      displayInNav: false,
      options: {
        read: 'full',
        write: '-',
@@ -42,7 +41,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
      alias: 'cuesheet-flag',
      target: OntimeView.Cuesheet,
      search: '',
      displayInNav: false,
      options: {
        read: 'full',
        write: 'flag',
@@ -64,7 +62,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
      alias: 'cuesheet-default',
      target: OntimeView.Cuesheet,
      search: '',
      displayInNav: false,
    };
    const policy = getCuesheetColumnAccessPolicy(preset, AppMode.Edit);
@@ -79,7 +76,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
      alias: 'cuesheet-granular',
      target: OntimeView.Cuesheet,
      search: '',
      displayInNav: false,
      options: {
        read: 'cue,title',
        write: 'title',
@@ -0,0 +1,32 @@
 import { parseField } from '../cuesheet.utils';
 describe('parseField()', () => {
  it('returns a string from given millis on timeStart, TimeEnd and duration', () => {
    const testData1 = 1000;
    const testData2 = 60000;
    const testData3 = 600000;
    expect(parseField('timeStart', testData1)).toBe('00:00:01');
    expect(parseField('timeEnd', testData2)).toBe('00:01:00');
    expect(parseField('duration', testData3)).toBe('00:10:00');
  });
  it('returns an empty string on undefined fields', () => {
    // @ts-expect-error -- testing user data with missing fields
    expect(parseField('title')).toBe('');
  });
  describe('simply returns any other value in any other field', () => {
    const testFields = [
      { field: 'nothing', value: '123' },
      { field: 'title', value: 'test' },
      { field: 'note', value: 'test' },
      { field: 'colour', value: 'test' },
    ];
    testFields.forEach((testCase) => {
      test(`${testCase.field}:${testCase.value}`, () => {
        expect(parseField(testCase.field, testCase.value)).toBe(testCase.value);
      });
    });
  });
 });
@@ -0,0 +1,23 @@
 import { CustomFields, MaybeNumber, OntimeEntryCommonKeys } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 type CsvHeaderKey = OntimeEntryCommonKeys | keyof CustomFields;
 /**
 * @description parses a field for export
 * @param {string} field
 * @param {*} data
 * @return {string}
 */
 export const parseField = (field: CsvHeaderKey, data: unknown): string => {
  if (field === 'timeStart' || field === 'timeEnd' || field === 'duration') {
    return millisToString(data as MaybeNumber, { fallback: '' });
  }
  if (field === 'skip') {
    return data ? 'x' : '';
  }
  return String(data ?? '');
 };
@@ -15,7 +15,7 @@ function EditorLayoutOptions() {
      {
        type: 'item',
        label: 'Planning',
-        description: 'Edit focused list with planning stats',
+        description: 'Edit-focused list with planning stats',
        icon: layoutMode === EditorLayoutMode.PLANNING ? IoCheckmark : undefined,
        onClick: () => setLayoutMode(EditorLayoutMode.PLANNING),
      },
@@ -54,51 +54,17 @@
 }
 .footer {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  font-size: calc(1rem - 2px);
  color: $label-gray;
 }
 .filterHint {
  text-align: right;
 }
 .em {
  color: $ui-white;
  margin-inline: 0.25rem;
 }
 .hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: $label-gray;
  font-size: calc(1rem - 3px);
 }
 .hintItem {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
 }
 .scrollContainer {
  max-height: 70vh;
  overflow: auto;
  padding-top: 1rem;
 }
@media (max-width: 680px) {
  .footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .filterHint {
    text-align: left;
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	9a6feed49b	refactor: improve groups and time end	2026-06-28 09:08:24 +02:00
Carlos Valente	c6cf9f2bf7	fixup! refactor: add to correct section	2026-06-28 08:48:14 +02:00
Carlos Valente	2f73303554	refactor: simplify object creation	2026-06-28 08:46:11 +02:00
Carlos Valente	96943ca528	refactor: add to correct section	2026-06-28 08:45:54 +02:00
Carlos Valente	8cfffd32c7	fix: duplicate rundowns from service layer	2026-06-27 16:30:04 +02:00
Carlos Valente	24a606a246	fixup! improve linting and documentation	2026-06-27 16:27:59 +02:00
Carlos Valente	c322028821	docs	2026-06-27 16:27:59 +02:00
Carlos Valente	9f40d962ea	improve linting and documentation	2026-06-27 16:27:59 +02:00
Claude	1e851ae40d	refactor(mcp): port tools to current services with typed translation handlers - Tool handlers are now a typed map of thin translation wrappers: wire arguments are cast once at the boundary to types derived (Pick) from ontime-types, and all service calls are fully typed — a change to a service signature or domain type now fails compilation in api-mcp instead of drifting silently. No more 'as never' casts. - Entry mutations target the loaded rundown explicitly, matching the rundownId-first service signatures introduced with secondary rundowns. - Rundown create/rename/delete/duplicate call the rundown service; mcp.service.ts and its duplicated router logic are deleted. - ontime_create_entry supports all entry types (event, delay, milestone, group) and entry tools accept flag and custom field values, matching what the workflow prompts already instruct agents to do. Tool names use entry terminology consistently with the service layer. - ontime_create_project description fixed: creating a project switches to it. https://claude.ai/code/session_01V27pYyjw2PGSWy7wNtiWKj	2026-06-27 16:27:59 +02:00
Claude	2bcda2dfa4	refactor(mcp): scope bearer authentication to the MCP route Reverts the change to the shared authenticate middleware, which made every authenticated route accept Authorization: Bearer tokens. Bearer support now lives in a wrapper middleware inside api-mcp, mounted only on /mcp; all other requests fall through to the app middleware unchanged. Removing the api-mcp module restores stock auth behaviour. https://claude.ai/code/session_01V27pYyjw2PGSWy7wNtiWKj	2026-06-27 16:27:59 +02:00
Claude	e2a2ea1d24	refactor(rundown): extract rundown rename/delete/duplicate into service layer Moves the logic previously inlined in the router handlers into rundown.service.ts so other consumers (such as the MCP server) can reuse it without duplication. Status codes and error messages are unchanged. https://claude.ai/code/session_01V27pYyjw2PGSWy7wNtiWKj	2026-06-27 16:27:59 +02:00
Claude	5be596b83e	refactor(mcp): dispatch map for resources, userPrompt helper, enrich prompt guidance mcp.resources.ts: replace 6-branch if-chain with a RESOURCE_READERS dispatch map. Each resource is now a one-liner { mimeType, read } entry; handleReadResource collapses to a 3-line lookup with a single throw. mcp.prompts.ts: extract repeated message-wrapping boilerplate into userPrompt() helper, reducing each prompt from ~10 lines of structure to a single call. Enrich all four prompts with operational domain knowledge: - create_rundown_from_agenda: entry type selection (event/milestone/delay/group), timerType and endAction guidance, linkStart chain semantics, flag usage, colour conventions - bulk_edit_rundown: timeStrategy (lock-end vs lock-duration), endAction automation risk, clarified time-shift mechanics - validate_rundown: totalDelay/totalDays checks, linkStart chain validation, play-next chain disclosure, flag audit - restructure_rundown: group awareness (entries vs order arrays), insert order type, move-out vs move-in patterns https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	ab15a65585	simplify: unify 405 handlers, fix double-read in renameRundown, guard mcpClientConfig - mcp.router.ts: extract identical GET/DELETE 405 responses into methodNotAllowed - mcp.service.ts: pass the already-patched rundown object to initRundown instead of re-fetching it from the data provider - McpSection.tsx: compute mcpClientConfig only when mcpEndpointUrl is truthy https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	65ef442a9d	refactor(mcp): consolidate documentation into mcp.schema.ts Single file to update when the data model changes: - EVENT_TIMER_FIELDS and EVENT_WRITABLE_FIELDS (tool JSON schemas) moved from mcp.tools.ts - ONTIME_SCHEMA_MARKDOWN and ONTIME_DOCS_MARKDOWN moved from mcp.resources.ts - mcp.tools.ts and mcp.resources.ts now import from mcp.schema.ts - Removed inline data model notes from the agenda prompt; replaced with a reference to the ontime://schema resource - Fixed inaccurate enum values in schema (Milestone type added, TimerType/EndAction corrected to match ontime-types) https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	71a7f26493	refactor(mcp): address review — split files, fix naming, stateless router Split the monolithic mcp.router.ts into focused modules: - mcp.service.ts: coordination helpers (rundownListResponse, renameRundown, deleteRundown) - mcp.tools.ts: tool definitions (ontime_ prefix, annotation presets, shared field schemas, CHARACTER_LIMIT truncation) + handleToolCall dispatcher - mcp.prompts.ts: prompt definitions + handleGetPrompt - mcp.resources.ts: resource definitions (schema, live data, docs) + handleReadResource - mcp.server.ts: createMcpServer factory that wires the above modules - mcp.router.ts: thin stateless Express router (POST/GET405/DELETE405) Other changes per review comments: - Rename ontime_delete_event → ontime_delete_entry (entry vs event naming convention) - Remove hardcoded cue/colour prefix conventions from tool descriptions and prompts; replace with "ask the user what convention they prefer" - Remove automations tools (left for a later PR) - Add Bearer auth comment in authenticate.ts explaining the MCP use case - Extract McpSection component from FeaturePanel to isolate URL state re-renders - Update bulk_edit prompt to mention linkStart cascade behaviour - Add 405 comments explaining why GET/DELETE are not supported in stateless mode https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	b850a51204	mcp: add ontime://docs resource for documentation discoverability Exposes a curated index of docs.getontime.no topic URLs as the ontime://docs MCP resource, and adds a "Further reading" footer to ontime://schema so agents reading the data model know where to find deeper documentation. https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	0094c15da2	feat(mcp): expose rundown and schema as readable MCP resources Adds five resources so the agent can load context once per session instead of re-fetching via tools, and so it can ground its answers in Ontime's data model without guessing: - ontime://schema — markdown reference for the event/rundown/group model, time format (ms from midnight), cue conventions, colours, playback states - ontime://rundown/current — full currently-loaded rundown (JSON) - ontime://rundowns — every rundown in the project plus the loaded ID - ontime://project/info — project metadata - ontime://project/custom-fields — custom field definitions Declares the resources capability on the MCP server and registers resources/list and resources/read handlers that dispatch by URI. https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	e7d62f44e7	feat(mcp): batch rundown edits, project file management, workflow prompts Adds 8 tools and 3 prompts to cover four priority pre-production flows: build-from-agenda (batch create), bulk edit, validate, restructure. Tools: - create_events_batch, batch_update_events — avoid per-event round trips - list_projects, load_project, create_project, rename_project, duplicate_project, delete_project — project file management Prompts: - bulk_edit_rundown — teaches the agent to use batch_update_events vs per-event updates based on whether fields are shared - validate_rundown — pre-show checks for cue gaps, overlaps, missing fields, duration anomalies - restructure_rundown — teaches reorder_event sequencing - create_rundown_from_agenda — updated to use create_events_batch Safety: - Mutating tools now attach a playback warning to their response when timer state is not stopped, so the agent can relay it to the user - create_automation description mentions the in-app test button https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	3c8d7e51f5	chore: ignore .claude/ metadata directory https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	3da3950fce	fix(mcp): session ID mismatch, rename_rundown data loss, DELETE status - Session ID: deterministic UUID passed to sessionIdGenerator so the map key matches the mcp-session-id header sent to clients; previously two independent randomUUID() calls produced different IDs, breaking all post-initialize requests - rename_rundown: use spread { ...rundown, title } instead of narrow structuredClone cast that silently stripped order/entries/revision - DELETE /mcp: return 204 No Content instead of 200 with body https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	ac3694ce4d	feat: add MCP server for AI agent integration Adds a Streamable HTTP MCP server at /mcp that exposes 19 tools covering rundown entries, rundown management, runtime state, project info, automations, and custom fields. Includes Bearer token auth support and a UI card in Settings > Sharing showing the endpoint URL and Claude Desktop config. https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00