refactor(modal): allow wider modals

refactor(import): improve preview UI
fix: issue where a countToEnd would lead to incorrect expected times (#2149 )
2026-07-26 10:38:55 +00:00 · 2026-07-25 14:28:45 +02:00 · 2026-07-25 14:28:45 +02:00 · 2026-07-25 11:22:24 +02:00 · 2026-07-22 07:17:39 +02:00 · 2026-07-22 07:17:39 +02:00
297 changed files with 12987 additions and 4088 deletions
@@ -0,0 +1,5 @@
+# CodeGraph data files — local to each machine, not for committing.
+# Ignore everything in .codegraph/ except this file itself, so transient
+# files (the database, daemon.pid, sockets, logs) never show up in git.
+*
+!.gitignore
@@ -12,7 +12,7 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6

      # This step is only needed to setup the permissions to update npm as pnpm will setup the correct node version
      - uses: actions/setup-node@v6
@@ -20,13 +20,13 @@ jobs:
          node-version-file: '.nvmrc'

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6

      - name: Get pnpm store directory
        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ${{ env.PNPM_STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -12,16 +12,16 @@ jobs:
      CI: ''

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6

      - name: Get pnpm store directory
        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ${{ env.PNPM_STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -7,23 +7,23 @@ on:

 jobs:
  build_macos:
-    runs-on: macOS-latest
+    runs-on: macOS-26

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6

      - uses: actions/setup-node@v6
        with:
          node-version-file: '.nvmrc'

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6

      - name: Get pnpm store directory
        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ${{ env.PNPM_STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -44,7 +44,7 @@ jobs:
        timeout-minutes: 60

      - name: Upload macOS build artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
        if: always()
        with:
          name: ontime-macos-build
@@ -54,7 +54,7 @@ jobs:
          retention-days: 1

      - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
        if: github.ref_type == 'tag'
        with:
          files: |
@@ -67,14 +67,14 @@ jobs:
    runs-on: windows-latest

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6

      - uses: actions/setup-node@v6
        with:
          node-version-file: '.nvmrc'

      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v6

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -83,7 +83,7 @@ jobs:
        run: pnpm dist-win

      - name: Upload Windows build artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
        if: always()
        with:
          name: ontime-windows-build
@@ -93,7 +93,7 @@ jobs:
          retention-days: 1

      - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
        if: github.ref_type == 'tag'
        with:
          files: './apps/electron/dist/ontime-win64.exe'
@@ -104,14 +104,14 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6

      - uses: actions/setup-node@v6
        with:
          node-version-file: '.nvmrc'

      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v6

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -120,7 +120,7 @@ jobs:
        run: pnpm dist-linux

      - name: Upload Linux build artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
        if: always()
        with:
          name: ontime-linux-build
@@ -131,7 +131,7 @@ jobs:
          retention-days: 1

      - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
        if: github.ref_type == 'tag'
        with:
          files: |
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6

      # This step is only needed to setup the permissions to update npm as pnpm will setup the correct node version
      - uses: actions/setup-node@v6
@@ -18,13 +18,13 @@ jobs:
          node-version-file: '.nvmrc'

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6

      - name: Get pnpm store directory
        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ${{ env.PNPM_STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -13,16 +13,20 @@ jobs:
      CI: ''

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6

      - name: Get pnpm store directory
        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ${{ env.PNPM_STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -52,16 +56,20 @@ jobs:
    timeout-minutes: 20

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6

      - name: Get pnpm store directory
        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: ${{ env.PNPM_STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -74,30 +82,30 @@ jobs:
      - name: Get installed Playwright version
        run: echo "PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --parseable | cut -s -d '@' -f3 | cut -d '/' -f1)" >> $GITHUB_ENV
      - name: Cache playwright binaries
-        uses: actions/cache@v4
+        uses: actions/cache@v5
        with:
          path: |
            ~/.cache/ms-playwright
          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
          restore-keys: |
            ${{ runner.os }}-playwright-
-      - run: npx playwright install --with-deps
+      - run: pnpm playwright install --with-deps
        if: steps.playwright-cache.outputs.cache-hit != 'true'

      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpm playwright install --with-deps

      - name: Run Playwright tests
        run: pnpm e2e

-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v6
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v6
        with:
          name: automated-screenshots
          path: automated-screenshots/
@@ -54,3 +54,6 @@ ontime-data/

 # temporary write files
 **.tmp
+
+# Claude Code metadata
+.claude/
@@ -1 +1 @@
-v22.15.1
+v22.22.3
@@ -1,4 +1,4 @@
-ARG NODE_VERSION=22.15.1
+ARG NODE_VERSION=22.22.2
 FROM node:${NODE_VERSION}-alpine

 # Set environment variables
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.7.0",
+  "version": "4.11.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -4,9 +4,10 @@
    <meta charset="utf-8" />
    <base href="/" />
    <link rel="icon" href="favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#101010" />
    <meta name="ontime" content="ontime - time keeping for live events" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="apple-touch-icon" href="ontime-logo.png" />
    <link rel="icon" type="image/png" href="ontime-logo.png" />
    <link rel="manifest" href="site.webmanifest" />
@@ -17,6 +18,13 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    <script>
+      if (/\/timer\/?$/.test(window.location.pathname) && typeof Promise.any !== 'function') {
+        var b = document.querySelector('base');
+        var base = b ? (b.getAttribute('href') || '').replace(/\/$/, '') : '';
+        window.location.replace(base + '/timer-legacy' + window.location.search);
+      }
+    </script>
    <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
@@ -1,10 +1,10 @@
 {
  "name": "ontime-ui",
-  "version": "4.7.0",
+  "version": "4.11.0",
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui/react": "1.3.0",
+    "@base-ui/react": "1.6.0",
    "@codemirror/commands": "^6.0.0",
    "@codemirror/lang-css": "^6.0.0",
    "@codemirror/state": "^6.0.0",
@@ -12,28 +12,27 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/open-sans": "^5.2.6",
+    "@fontsource/open-sans": "^5.2.7",
    "@mantine/hooks": "^8.3.7",
-    "@sentry/react": "^10.2.0",
+    "@sentry/react": "^10.59.0",
    "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.85.9",
-    "@tanstack/react-query-devtools": "^5.85.9",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query-devtools": "^5.101.0",
    "@tanstack/react-table": "^8.21.3",
-    "@uiw/codemirror-theme-vscode": "^4.25.9",
+    "@uiw/codemirror-theme-vscode": "^4.25.10",
    "autosize": "^6.0.1",
-    "axios": "^1.12.2",
+    "axios": "^1.18.0",
    "csv-stringify": "^6.6.0",
    "qrcode": "^1.5.4",
-    "react": "^19.2.3",
-    "react-colorful": "^5.6.1",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-colorful": "^5.7.0",
+    "react-dom": "^19.2.7",
    "react-fast-compare": "^3.2.2",
-    "react-hook-form": "^7.72.0",
-    "react-icons": "5.5.0",
-    "react-router": "^7.11.0",
-    "react-virtuoso": "^4.17.0",
-    "web-vitals": "^5.1.0",
-    "zustand": "^5.0.9"
+    "react-hook-form": "^7.80.0",
+    "react-icons": "5.6.0",
+    "react-router": "^8.0.1",
+    "react-virtuoso": "^4.18.7",
+    "zustand": "^5.0.14"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -51,7 +50,8 @@
    "production": [
      ">0.2%",
      "not dead",
-      "not op_mini all"
+      "not op_mini all",
+      "safari >= 14.1"
    ],
    "development": [
      "last 1 chrome version",
@@ -64,8 +64,10 @@
    "@types/qrcode": "^1.5.6",
    "@types/react": "^19.1.12",
    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-legacy": "^8.0.1",
    "@vitejs/plugin-react": "5.2.0",
    "babel-plugin-react-compiler": "1.0.0",
+    "happy-dom": "^20.9.0",
    "ontime-types": "workspace:*",
    "ontime-utils": "workspace:*",
    "sass": "^1.57.1",
@@ -73,7 +75,6 @@
    "vite": "8.0.1",
    "vite-plugin-compression2": "2.5.1",
    "vite-plugin-svgr": "4.5.0",
-    "vite-tsconfig-paths": "6.1.1",
    "vitest": "catalog:"
  }
 }
@@ -15,5 +15,5 @@
  "start_url": "./",
  "display": "",
  "theme_color": "#121212",
-  "background_color": "#ffffff"
+  "background_color": "#101010"
 }
@@ -2,7 +2,7 @@
  "name": "",
  "short_name": "",
  "icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
-  "theme_color": "#2B5ABC",
+  "theme_color": "#121212",
  "background_color": "#101010",
  "display": "standalone"
 }
@@ -1,5 +1,14 @@
 import axios, { AxiosResponse } from 'axios';
-import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, TransientEventPayload } from 'ontime-types';
+import {
+  EntryId,
+  OntimeEntry,
+  OntimeEvent,
+  ProjectRundownsList,
+  RenumberCues,
+  Rundown,
+  RundownImportPayload,
+  TransientEventPayload,
+} from 'ontime-types';

 import { apiEntryUrl } from './constants';
 import type { RequestOptions } from './requestOptions';
@@ -26,19 +35,17 @@ export async function fetchCurrentRundown(options?: RequestOptions): Promise<Run
    throw new Error('Invalid rundown payload');
  }
  return res.data;
+}

-  function isValidRundown(x: any): x is Rundown {
-    return (
-      x &&
-      typeof x === 'object' &&
-      typeof x.id === 'string' &&
-      Array.isArray(x.order) &&
-      Array.isArray(x.flatOrder) &&
-      x.entries &&
-      typeof x.entries === 'object' &&
-      typeof x.revision === 'number'
-    );
+/**
+ * HTTP request to fetch all entries in the given rundown
+ */
+export async function fetchRundown(rundownId: RundownId, options?: RequestOptions): Promise<Rundown> {
+  const res = await axios.get(`${rundownPath}/${rundownId}`, { signal: options?.signal });
+  if (!isValidRundown(res.data)) {
+    throw new Error('Invalid rundown payload');
  }
+  return res.data;
 }

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

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

@@ -111,6 +127,13 @@ export async function putBatchEditEvents(rundownId: RundownId, data: BatchEditEn
  return axios.put(`${rundownPath}/${rundownId}/batch`, data);
 }

+/**
+ * HTTP request to renumber cues for multiple events
+ */
+export function patchRenumberCues(rundownId: RundownId, data: RenumberCues): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/${rundownId}/renumber`, data);
+}
+
 export type ReorderEntry = {
  entryId: EntryId;
  destinationId: EntryId;
@@ -182,3 +205,16 @@ export async function requestDeleteAll(rundownId: RundownId): Promise<AxiosRespo
 }

 // #endregion operations on rundown entries =======================
+
+function isValidRundown(x: any): x is Rundown {
+  return (
+    x &&
+    typeof x === 'object' &&
+    typeof x.id === 'string' &&
+    Array.isArray(x.order) &&
+    Array.isArray(x.flatOrder) &&
+    x.entries &&
+    typeof x.entries === 'object' &&
+    typeof x.revision === 'number'
+  );
+}
@@ -1,10 +1,9 @@
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
-/* eslint-disable react/destructuring-assignment */
 import React from 'react';

-import { hasConnected, reconnectAttempts } from '../../../common/utils/socket';
 import { runtimeStore } from '../../stores/runtime';
+import { getConnectionState, getReconnectAttempts } from '../../utils/socket';

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

@@ -37,7 +36,7 @@ class ErrorBoundary extends React.Component {
      scope.setExtras({
        error,
        store: appState,
-        hasSocket: { hasConnected, reconnectAttempts },
+        hasSocket: { hasConnected: getConnectionState(), reconnectAttempts: getReconnectAttempts() },
      });
      const eventId = Sentry.captureException(error);
      this.setState({ eventId, info });
@@ -3,8 +3,8 @@ import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo,

 interface UseReactiveTextInputReturn {
  value: string;
-  onChange: (event: ChangeEvent) => void;
-  onBlur: (event: ChangeEvent) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onBlur: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }

@@ -15,7 +15,9 @@ export default function useReactiveTextInput(
  options?: {
    submitOnEnter?: boolean;
    submitOnCtrlEnter?: boolean;
+    submitOnTab?: boolean;
    onCancelUpdate?: () => void;
+    onTabCancel?: () => void;
    allowSubmitSameValue?: boolean;
    allowKeyboardNavigation?: boolean;
  },
@@ -23,6 +25,10 @@ export default function useReactiveTextInput(
  const [text, setText] = useState<string>(initialText);
  // track whether we are submitting via a submit key (eg enter) and avoid submitting again on blur
  const isKeyboardSubmitting = useRef(false);
+  // track escape to prevent the subsequent blur from submitting
+  const isEscaping = useRef(false);
+  // track tab-out to prevent blur from submitting (used by timer cells)
+  const isTabbing = useRef(false);

  useEffect(() => {
    if (typeof initialText === 'undefined') {
@@ -78,6 +84,7 @@ export default function useReactiveTextInput(
   * @param {string} valueToSubmit
   */
  const handleEscape = useCallback(() => {
+    isEscaping.current = true;
    // No need to update if it hasn't changed
    setText(initialText);
    // force the text to be the initial value
@@ -141,16 +148,30 @@ export default function useReactiveTextInput(
        event.stopPropagation();
      }

+      // for cells that opt out of tab-submit, track tab-out without preventing navigation
+      if (event.key === 'Tab' && options?.submitOnTab === false) {
+        isTabbing.current = true;
+      }
+
      hotKeyHandler(event);
    };
-  }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, text]);
+  }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, options?.submitOnTab, text]);

  return {
    value: text,
-    onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
-    onBlur: (event: ChangeEvent) => {
+    onChange: (event) => handleChange(event.target.value),
+    onBlur: (event) => {
+      if (isTabbing.current) {
+        isTabbing.current = false;
+        (options?.onTabCancel ?? options?.onCancelUpdate)?.();
+        return;
+      }
+      if (isEscaping.current) {
+        isEscaping.current = false;
+        return;
+      }
      if (!isKeyboardSubmitting.current) {
-        handleSubmit((event.target as HTMLInputElement).value);
+        handleSubmit(event.target.value);
      }
    },
    onKeyDown: keyHandler,
@@ -0,0 +1,14 @@
+.kbd {
+  display: inline-block;
+  min-width: 1.5rem;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 2px;
+  background-color: $gray-1100;
+  color: $ui-white;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+  font-family: monospace;
+  font-size: calc(1rem - 4px);
+  line-height: 1.5;
+  text-align: center;
+  white-space: nowrap;
+}
@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+import style from './Kbd.module.scss';
+
+export default function Kbd({ children }: PropsWithChildren) {
+  return <kbd className={style.kbd}>{children}</kbd>;
+}
@@ -20,7 +20,7 @@
 .wide {
  top: 4vh;
  min-width: min(1280px, 96vw);
-  max-width: min(1600px, 96vw);
+  max-width: min(1800px, 98vw);
  height: 88vh;
  max-height: 88vh;
  display: flex;
@@ -38,8 +38,6 @@ $progress-bar-br: 3px;
 .multiprogress-bar__indicator-bar {
  background-color: var(--background-color-override, $ui-black);
  opacity: 0.8;
-  transition: 1s linear;
-  transition-property: width;

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

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

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

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

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

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

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

 import { useElectronEvent } from '../../../hooks/useElectronEvent';
+import {
+  hasCustomParams,
+  reservedParams,
+  stripReservedParams,
+  useSavedViewParams,
+} from '../../../stores/savedViewParams';
 import { handleLinks } from '../../../utils/linkUtils';
+import IconButton from '../../buttons/IconButton';
+import Tooltip from '../../tooltip/Tooltip';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';

 import style from './ClientLink.module.scss';
@@ -16,32 +24,104 @@ interface ClientLinkProps {

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

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

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

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

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

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

 import './ProgressBar.scss';

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

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

  return (
    <div className={`progress-bar__bg ${className}`}>
@@ -4,7 +4,9 @@
  color: $white-10;

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

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

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

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

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

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

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

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

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

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

@@ -64,8 +64,8 @@ function SectionContents({ options, collapsed }: SectionContentsProps) {
 function HiddenContents({ options }: { options: ParamField[] }) {
  return (
    <>
-      {options.map((option, index) => {
-        return <ParamInput key={option.title + index} paramField={option} />;
+      {options.map((option) => {
+        return <ParamInput key={option.id} paramField={option} />;
      })}
    </>
  );
@@ -26,3 +26,14 @@ export const showLeadingZeros: ParamField = {
  type: 'boolean',
  defaultValue: false,
 };
+
+export type TimeOptions = {
+  timeformat: string | null;
+};
+
+/**
+ * Helper to get value of 'timeformat' from either source, prioritizing defaultValues
+ */
+export function getTimeOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams) {
+  return defaultValues?.get('timeformat') ?? searchParams.get('timeformat');
+}
@@ -1,16 +1,16 @@
 import { useQuery } from '@tanstack/react-query';
 import { langEn } from 'ontime-types';
+import { MILLIS_PER_HOUR } from 'ontime-utils';

 import { getUserTranslation } from '../../common/api/assets';
 import { TRANSLATION } from '../../common/api/constants';
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';

 export function useCustomTranslation() {
  const { data, status, refetch } = useQuery({
    queryKey: TRANSLATION,
    queryFn: ({ signal }) => getUserTranslation({ signal }),
    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
+    staleTime: MILLIS_PER_HOUR,
  });
  return { data: data ?? langEn, status, refetch };
 }
@@ -12,6 +12,7 @@ import {
  renameRundown,
 } from '../api/rundown';

+//TODO: make suspends so we don't have to deal with no value all over
 /**
 * Project rundowns
 */
@@ -4,7 +4,7 @@ import { useEffect, useMemo } from 'react';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
-import { fetchCurrentRundown } from '../api/rundown';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
 import { useProjectRundowns } from './useProjectRundowns';
@@ -20,7 +20,11 @@ const cachedRundownPlaceholder: Rundown = {
 };

 /**
- * Normalised rundown data
+ * Normalised rundown data for the currently loaded rundown.
+ *
+ * Bootstraps via the `/current` alias so the first paint is a single round-trip,
+ * independent of the project rundown list. Once the loaded id is known, the
+ * query key swaps to the id-keyed cache that is shared with `useRundownById`.
 */
 export default function useRundown() {
  const queryClient = useQueryClient();
@@ -34,12 +38,13 @@ export default function useRundown() {
    refetchInterval: queryRefetchIntervalSlow,
  });

-  // Seed the ID-based cache when fetching via the 'current' alias (bootstrap)
+  // Seed the id-keyed cache when fetching via the bootstrap alias
  useEffect(() => {
    if (!data || loadedRundownId) return;
    queryClient.setQueryData(getRundownQueryKey(data.id), data);
  }, [data, loadedRundownId, queryClient]);

+  // Once we have the ID, drop the temporary current cache
  useEffect(() => {
    if (!loadedRundownId) return;
    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
@@ -114,3 +119,21 @@ export function useRundownAuxData() {
  }, [data]);
  return { data: filteredData, status };
 }
+
+/**
+ * Provides access to a specific rundown by ID.
+ * When rundownId is null/undefined the query is disabled and returns the placeholder.
+ */
+export function useRundownById(rundownId: string | null | undefined) {
+  const enabled = Boolean(rundownId);
+
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: getRundownQueryKey(rundownId ?? ''),
+    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
+    enabled,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+}
@@ -0,0 +1,54 @@
+import { EntryId, Rundown } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { useSelectedEventId } from '../hooks/useSocket';
+import { getFlatRundownMetadata, type ExtendedEntry } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+import { useRundownById } from './useRundown';
+
+export type RundownSource = {
+  rundownId: string | null;
+  rundown: Rundown;
+  flatRundown: ExtendedEntry[];
+  status: string;
+  selectedEventId: EntryId | null;
+};
+
+/**
+ * Explicitly scoped rundown data for views that may operate on a non-loaded rundown.
+ */
+export function useScopedRundown(rundownId: string | null): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  return useRundownSource(rundownId, projectRundowns.loaded || null);
+}
+
+/**
+ * Loaded-rundown source for views that must follow the active runtime rundown.
+ */
+export function useLoadedRundownSource(): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  const loadedRundownId = projectRundowns.loaded || null;
+  return useRundownSource(loadedRundownId, loadedRundownId);
+}
+
+function useRundownSource(rundownId: string | null, loadedRundownId: string | null): RundownSource {
+  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
+  const runtimeSelectedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
+  const { data: rundown, status } = useRundownById(rundownId);
+  const flatRundown = useMemo(
+    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
+    [effectiveSelectedEventId, rundown],
+  );
+
+  return useMemo(
+    () => ({
+      rundownId,
+      rundown,
+      flatRundown,
+      status,
+      selectedEventId: effectiveSelectedEventId,
+    }),
+    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
+  );
+}
@@ -0,0 +1,41 @@
+import { MaybeNumber, Playback } from 'ontime-types';
+import { useEffect, useRef, useState } from 'react';
+
+import { getProgress } from '../utils/getProgress';
+import { usePlayback } from './useSocket';
+
+/**
+ * Returns the live completion percentage (0–100) of a countdown, interpolated locally.
+ */
+export function useAnimatedProgress(current: MaybeNumber, duration: MaybeNumber): number {
+  const playback = usePlayback();
+  const isRunning = playback === Playback.Play || playback === Playback.Roll;
+
+  const baseline = useRef({ current, at: performance.now() });
+  const [, setTick] = useState(0);
+
+  // there is only something to animate while a running timer is counting down towards 0
+  const shouldAnimate = isRunning && current !== null && current > 0 && duration !== null;
+
+  // re-anchor to the authoritative value whenever the server pushes a new timer update
+  useEffect(() => {
+    baseline.current = { current, at: performance.now() };
+  }, [current, duration, playback]);
+
+  // while counting down, re-render every animation frame so the derived progress stays smooth
+  useEffect(() => {
+    if (!shouldAnimate) {
+      return;
+    }
+    let frame = requestAnimationFrame(function tick() {
+      setTick((value) => value + 1);
+      frame = requestAnimationFrame(tick);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate]);
+
+  // derive from the anchor plus elapsed time at render; frozen to the anchor when not running
+  const anchored = baseline.current.current;
+  const value = isRunning && anchored !== null ? anchored - (performance.now() - baseline.current.at) : anchored;
+  return getProgress(value, duration);
+}
@@ -1,7 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  EntryId,
-  InsertOptions,
  MaybeString,
  OntimeDelay,
  OntimeEntry,
@@ -16,6 +15,7 @@ import {
  TimeStrategy,
  isOntimeEvent,
  isOntimeGroup,
+  isOntimeMilestone,
 } from 'ontime-types';
 import {
  MILLIS_PER_SECOND,
@@ -41,6 +41,7 @@ import {
  patchReorderEntry,
  postAddEntry,
  postCloneEntry,
+  patchRenumberCues,
  putBatchEditEvents,
  putEditEntry,
  requestApplyDelay,
@@ -58,13 +59,26 @@ 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
+ * Gather utilities for actions on entries in the loaded rundown.
 */
-export const useEntryActions = () => {
+export const useEntryActions = () => useEntryActionsForRundown(undefined);
+
+/**
+ * Gather utilities for actions on entries in an explicitly selected rundown.
+ */
+export const useScopedEntryActions = (rundownId: string | null) => useEntryActionsForRundown(rundownId ?? '');
+
+function useEntryActionsForRundown(scopedRundownId: string | undefined) {
  const queryClient = useQueryClient();
  const {
    linkPrevious,
@@ -74,15 +88,16 @@ export const useEntryActions = () => {
    defaultDangerTime,
    defaultTimerType,
    defaultEndAction,
+    inheritGroupColour,
  } = useEditorSettings();

  const resolveCurrentRundownQueryKey = useCallback(() => {
-    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
-    if (loadedRundownId) {
-      return getRundownQueryKey(loadedRundownId);
+    if (scopedRundownId !== undefined) {
+      return getRundownQueryKey(scopedRundownId);
    }
-    return CURRENT_RUNDOWN_QUERY_KEY;
-  }, [queryClient]);
+    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
+    return loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
+  }, [queryClient, scopedRundownId]);

  /**
   * Returns the currently loaded rundown
@@ -110,7 +125,7 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: addEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entry]: [string, PatchWithId & InsertOptions]) => postAddEntry(rundownId, entry),
+    mutationFn: ([rundownId, entry]: [string, PatchWithId & ClientInsertOptions]) => postAddEntry(rundownId, entry),
    onMutate: async ([_rundownId, entry]) => {
      const queryKey = resolveCurrentRundownQueryKey();
      await queryClient.cancelQueries({ queryKey });
@@ -139,8 +154,9 @@ export const useEntryActions = () => {
        addToRundown(
          newRundown,
          optimisticEntry,
-          afterId,
          parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
+          afterId,
+          entry.before ?? null,
        );

        queryClient.setQueryData<Rundown>(queryKey, newRundown);
@@ -183,7 +199,7 @@ export const useEntryActions = () => {
        throw new Error('Rundown not initialised');
      }

-      const newEntry: PatchWithId & InsertOptions = { ...entry, id: generateId() };
+      const newEntry: PatchWithId & ClientInsertOptions = { ...entry, id: generateId() };

      // handle adding options that concern all event types
      if (options?.after) {
@@ -195,8 +211,8 @@ export const useEntryActions = () => {

      // ************* 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;
@@ -231,6 +247,14 @@ export const useEntryActions = () => {
        }
      }

+      if (inheritGroupColour && (isOntimeEvent(newEntry) || isOntimeMilestone(newEntry)) && !newEntry.colour) {
+        const parentId = resolveInsertParent(rundownData, newEntry);
+        const maybeParent = parentId ? rundownData.entries[parentId] : null;
+        if (maybeParent && isOntimeGroup(maybeParent)) {
+          newEntry.colour = maybeParent.colour;
+        }
+      }
+
      try {
        await addEntryMutation([rundownId, newEntry]);
      } catch (error) {
@@ -246,6 +270,7 @@ export const useEntryActions = () => {
      defaultTimerType,
      defaultEndAction,
      defaultTimeStrategy,
+      inheritGroupColour,
      addEntryMutation,
    ],
  );
@@ -265,7 +290,7 @@ export const useEntryActions = () => {
   * Clone an entry
   */
  const clone = useCallback(
-    async (entryId: EntryId, options?: InsertOptions) => {
+    async (entryId: EntryId, options?: ClientInsertOptions) => {
      try {
        const rundownId = getCurrentRundownData()?.id;
        if (!rundownId) {
@@ -523,6 +548,39 @@ export const useEntryActions = () => {
    [batchUpdateEventsMutation, getCurrentRundownData],
  );

+  const { mutateAsync: renumberCuesMutation } = useMutation({
+    mutationFn: ([rundownId, body]: Parameters<typeof patchRenumberCues>) => patchRenumberCues(rundownId, body),
+    onMutate: async () => {
+      const queryKey = resolveCurrentRundownQueryKey();
+      await queryClient.cancelQueries({ queryKey });
+      const previousRundown = queryClient.getQueryData<Rundown>(queryKey);
+      return { previousRundown, queryKey };
+    },
+    onSuccess: (response, _variables, context) => {
+      if (!response.data || !context?.queryKey) return;
+      const updatedRundown = response.data;
+      queryClient.setQueryData<Rundown>(context.queryKey, updatedRundown);
+    },
+    onError: (_error, _vars, context) => {
+      if (context?.previousRundown) queryClient.setQueryData<Rundown>(context.queryKey, context.previousRundown);
+    },
+  });
+
+  const renumberCues = useCallback(
+    async (eventIds: EntryId[], prefix: string, start: string, increment: string) => {
+      const rundown = getCurrentRundownData();
+      const rundownId = rundown?.id;
+      if (!rundownId) throw new Error('Rundown not initialized');
+      try {
+        await renumberCuesMutation([rundownId, { ids: eventIds, prefix, start, increment }]);
+      } catch (error) {
+        logAxiosError('Error renumbering cues', error);
+        throw error;
+      }
+    },
+    [getCurrentRundownData, renumberCuesMutation],
+  );
+
  /**
   * Calls mutation to delete an entry
   * @private
@@ -947,6 +1005,7 @@ export const useEntryActions = () => {
      groupEntries,
      move,
      reorderEntry,
+      renumberCues,
      swapEvents,
      updateEntry,
      updateTimer,
@@ -963,12 +1022,13 @@ export const useEntryActions = () => {
      groupEntries,
      move,
      reorderEntry,
+      renumberCues,
      swapEvents,
      updateEntry,
      updateTimer,
    ],
  );
-};
+}

 /**
 * Utility to optimistically delete entries from client cache
@@ -1003,7 +1063,7 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
 /**
 * Utility to create an optimistic entry for immediate cache insertion
 */
-function createOptimisticEntry(payload: PatchWithId & InsertOptions): OntimeEntry {
+function createOptimisticEntry(payload: PatchWithId & ClientInsertOptions): OntimeEntry {
  const { after: _after, before: _before, ...entryData } = payload;
  const id = entryData.id;
  let parent: EntryId | null = null;
@@ -139,6 +139,17 @@ export const setEventPlayback = {
  pause: () => sendSocket('pause', undefined),
 };

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

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

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

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

 describe('linkToOTherHost', () => {
  it('should handle electron links', () => {
@@ -22,3 +22,18 @@ describe('linkToOTherHost', () => {
    expect(destination).toBe('https://app.getontime.no/user-hash/path');
  });
 });
+
+describe('hostToBaseUrl', () => {
+  it('uses http when the page is plain http', () => {
+    expect(hostToBaseUrl('192.168.10.166', 4001, 'http://localhost:4001')).toBe('http://192.168.10.166:4001');
+  });
+
+  it('keeps https when the page reaches the server over TLS on the same port', () => {
+    expect(hostToBaseUrl('192.168.10.166', 4001, 'https://localhost:4001')).toBe('https://192.168.10.166:4001');
+  });
+
+  it('falls back to http when the page is https on a different port (TLS proxy)', () => {
+    // the raw server port does not speak TLS, an https link to it would fail
+    expect(hostToBaseUrl('192.168.10.166', 4001, 'https://ontime.example.com')).toBe('http://192.168.10.166:4001');
+  });
+});
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+
+import { removeFileExtension } from '../uploadUtils';
+
+describe('removeFileExtension()', () => {
+  it('removes a trailing extension', () => {
+    expect(removeFileExtension('show.xlsx')).toBe('show');
+  });
+
+  it('only removes the last extension', () => {
+    expect(removeFileExtension('my.show.xlsx')).toBe('my.show');
+  });
+
+  it('returns the name unchanged when there is no extension', () => {
+    expect(removeFileExtension('rundown')).toBe('rundown');
+  });
+
+  it('does not treat a leading dot as an extension', () => {
+    expect(removeFileExtension('.gitignore')).toBe('.gitignore');
+  });
+
+  it('handles an empty string', () => {
+    expect(removeFileExtension('')).toBe('');
+  });
+});
@@ -37,6 +37,16 @@ describe('getRouteFromPreset()', () => {
      alias: 'demopage',
      target: OntimeView.Timer,
      search: 'user=guest',
+      displayInNav: false,
+      options: {},
+    },
+  ];
+  const disabledPresets: URLPreset[] = [
+    {
+      enabled: false,
+      alias: 'demopage',
+      target: OntimeView.Timer,
+      search: 'user=guest',
      options: {},
    },
  ];
@@ -47,6 +57,21 @@ describe('getRouteFromPreset()', () => {
    expect(getRouteFromPreset(location, presets)).toStrictEqual('timer?user=guest&alias=demopage');
  });

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

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

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

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

@@ -54,3 +59,17 @@ export function linkToOtherHost(
  }
  return destination.toString();
 }
+
+/**
+ * Builds a base URL for reaching the Ontime server on a given network interface.
+ * The Ontime server itself only speaks HTTP, so we only keep https when the page
+ * already reaches the server over TLS on that same port (eg. a proxy in front of it);
+ * any other explicit server port gets http.
+ * externalServerUrl is used for testing
+ */
+export function hostToBaseUrl(host: string, port: number, externalServerUrl: string = serverURL): string {
+  const page = new URL(externalServerUrl);
+  const pagePort = page.port === '' ? (page.protocol === 'https:' ? 443 : 80) : Number(page.port);
+  const scheme = page.protocol === 'https:' && pagePort === port ? 'https' : 'http';
+  return `${scheme}://${host}:${port}`;
+}
@@ -3,9 +3,7 @@ import {
  Log,
  MaybeNumber,
  MessageTag,
-  ProjectRundownsList,
  RefetchKey,
-  Rundown,
  RuntimeStore,
  WsPacketToClient,
  WsPacketToServer,
@@ -16,16 +14,17 @@ import {
  APP_SETTINGS,
  CLIENT_LIST,
  CSS_OVERRIDE,
+  CURRENT_RUNDOWN_QUERY_KEY,
  CUSTOM_FIELDS,
  PROJECT_DATA,
-  CURRENT_RUNDOWN_QUERY_KEY,
-  PROJECT_RUNDOWNS,
  REPORT,
+  RUNDOWN,
  RUNTIME,
  TRANSLATION,
  URL_PRESETS,
  VIEW_SETTINGS,
  getRundownQueryKey,
+  PROJECT_RUNDOWNS,
 } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
@@ -51,8 +50,10 @@ const socketConfig = {
  offlineAttemptsThreshold: 2, // when we consider the client disconnected
 } as const;

-export let hasConnected = false;
-export let reconnectAttempts = 0;
+export const getConnectionState = () => hasConnected;
+export const getReconnectAttempts = () => reconnectAttempts;
+let hasConnected = false;
+let reconnectAttempts = 0;

 export const connectSocket = () => {
  websocket = new WebSocket(websocketUrl);
@@ -179,7 +180,7 @@ export const connectSocket = () => {
        }
        case MessageTag.Refetch: {
          // the refetch message signals that the rundown has changed in the server side
-          const { target, revision } = payload;
+          const { target, revision, rundownId } = payload;
          switch (target) {
            case RefetchKey.All:
              invalidateAllCaches();
@@ -194,7 +195,7 @@ export const connectSocket = () => {
              ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
              break;
            case RefetchKey.Rundown: {
-              maybeInvalidateRundownCache(revision);
+              maybeInvalidateRundownCache(revision, rundownId);
              break;
            }
            case RefetchKey.UrlPresets:
@@ -212,6 +213,9 @@ export const connectSocket = () => {
            case RefetchKey.Settings:
              ontimeQueryClient.invalidateQueries({ queryKey: APP_SETTINGS });
              break;
+            case RefetchKey.ProjectRundowns:
+              ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS });
+              break;
            default: {
              target satisfies never;
              break;
@@ -230,34 +234,30 @@ export const connectSocket = () => {
  };
 };

-/**
- * When we receive a refetch message for the rundown
- * check which rundown needs to be invalidated
- */
-export function maybeInvalidateRundownCache(revision: MaybeNumber) {
-  const loadedRundownId: string | undefined = (ontimeQueryClient.getQueryData(PROJECT_RUNDOWNS) as ProjectRundownsList)
-    ?.loaded;
-
-  const activeRundownQueryKey = loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
-  const cachedRundown = ontimeQueryClient.getQueryData<Rundown>(activeRundownQueryKey);
-  if (revision === cachedRundown?.revision) {
+export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: string) {
+  if (!rundownId) {
+    // we omit rundownId to signify invalidate all rundowns
+    ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
+    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
    return;
  }

-  ontimeQueryClient.invalidateQueries({ queryKey: activeRundownQueryKey, exact: true });
+  // skip if we dont recognise the ID the revision is lower
+  const queryKey = getRundownQueryKey(rundownId);
+  const cachedRundown = ontimeQueryClient.getQueryData<{ revision: number }>(queryKey);

-  if (loadedRundownId) {
-    // Keep bootstrap alias in sync with the ID-based cache
-    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
-  } else {
-    // During bootstrap, loadedRundownId is not yet known.
-    // Invalidate any ID-based rundown caches that may have been seeded early.
-    ontimeQueryClient.invalidateQueries({
-      predicate: (query) => query.queryKey[0] === 'rundown' && query.queryKey[1] !== 'current',
-    });
+  if (revision === cachedRundown?.revision) {
+    // we already have the latest change
+    return;
  }

-  ontimeQueryClient.invalidateQueries({ queryKey: CUSTOM_FIELDS });
+  ontimeQueryClient.invalidateQueries({ queryKey, exact: true });
+
+  // keep current alias in sync with the ID-based cache
+  const loadedRundownId = ontimeQueryClient.getQueryData<{ loaded: string }>(PROJECT_RUNDOWNS)?.loaded;
+  if (!loadedRundownId || loadedRundownId === rundownId) {
+    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }
 }

 export function sendSocket<T extends MessageTag | ApiActionTag>(
@@ -1,9 +1,11 @@
-import { MaybeNumber, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
+import { MaybeNumber, MaybeString, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
 import {
  MILLIS_PER_HOUR,
  MILLIS_PER_MINUTE,
  MILLIS_PER_SECOND,
+  dayInMs,
  formatFromMillis,
+  getExpectedEnd,
  getExpectedStart,
 } from 'ontime-utils';

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

+export function normaliseWallClock(time: number): number {
+  const timeOfDay = time % dayInMs;
+  return timeOfDay < 0 ? timeOfDay + dayInMs : timeOfDay;
+}
+
 /**
 * @description Resolves format from url and store
 * @return {string|null} A format string like "hh:mm:ss a" or null
@@ -75,8 +82,9 @@ function resolveTimeFormat(fallback12: string, fallback24: string): string {
 }

 type FormatOptions = {
-  format12: string;
-  format24: string;
+  format12?: string;
+  format24?: string;
+  override?: MaybeString;
 };

 /**
@@ -97,7 +105,7 @@ export const formatTime = (
    return '...';
  }

-  const timeFormat = resolver(options?.format12 ?? FORMAT_12, options?.format24 ?? FORMAT_24);
+  const timeFormat = options?.override ?? resolver(options?.format12 ?? FORMAT_12, options?.format24 ?? FORMAT_24);
  const display = formatFromMillis(Math.abs(milliseconds), timeFormat);

  const isNegative = milliseconds < 0;
@@ -179,15 +187,13 @@ export function getExpectedTimesFromExtendedEvent(
      ...state,
    },
  );
-
+  const expectedEnd = getExpectedEnd(event, expectedStart, state.currentDay);
  const plannedEnd = event.timeStart + event.duration + event.delay;

  return {
    expectedStart,
    timeToStart: expectedStart - state.clock,
-    expectedEnd: event.countToEnd
-      ? Math.max(expectedStart + event.duration, plannedEnd)
-      : expectedStart + event.duration,
+    expectedEnd,
    plannedEnd,
  };
 }
@@ -38,6 +38,18 @@ export function validateProjectFile(file: File) {
  }
 }

+/**
+ * Removes a trailing file extension from a file name (e.g. "show.xlsx" -> "show")
+ * A leading dot (dotfiles like ".gitignore") is not treated as an extension
+ */
+export function removeFileExtension(fileName: string): string {
+  const lastDot = fileName.lastIndexOf('.');
+  if (lastDot <= 0) {
+    return fileName;
+  }
+  return fileName.slice(0, lastDot);
+}
+
 export function isExcelFile(file: File | null) {
  return file?.name.endsWith('.xlsx');
 }
@@ -194,6 +194,7 @@ export function generateUrlPresetOptions(alias: string, userUrl: string): URLPre
    target: path,
    search: url.searchParams.toString(),
    enabled: true,
+    displayInNav: false,
  };
 }

@@ -204,7 +205,7 @@ function isPresettableView(view: string): view is OntimeViewPresettable {
 /**
 * Check if current location is a preset path
 */
-export function isPresetPath(location: Path): boolean {
-  const segments = location.pathname.split('/').filter(Boolean);
-  return segments[0] === 'preset';
+function isPresetPath(location: Path): boolean {
+  const firstSegment = location.pathname.split('/').find(Boolean);
+  return firstSegment === 'preset';
 }
@@ -9,6 +9,7 @@ export const apiRepoLatest = 'https://api.github.com/repos/cpvalente/ontime/rele
 export const websiteUrl = 'https://www.getontime.no';
 export const discordUrl = 'https://discord.com/invite/eje3CSUEXm';
 export const subredditUrl = 'https://www.reddit.com/r/ontimeapp/';
+export const youtubeUrl = 'https://www.youtube.com/@ontimeapp';

 export const documentationUrl = 'https://docs.getontime.no';
 export const customFieldsDocsUrl = 'https://docs.getontime.no/features/custom-fields/';
@@ -53,10 +53,6 @@ ul {
      background-color: $red-400;
    }
  }
-
-  &.split {
-    margin-top: 1rem;
-  }
 }

 .secondary {
@@ -42,16 +42,9 @@ interface PanelListItemProps {
  location?: string;
 }

-function PanelListItem(props: PanelListItemProps) {
-  const { panel, isSelected, location } = props;
+function PanelListItem({ panel, isSelected, location }: PanelListItemProps) {
  const { setLocation } = useAppSettingsNavigation();
-
-  const classes = cx([
-    style.primary,
-    isSelected && style.active,
-    panel.split && style.split,
-    panel.highlight && style.highlight,
-  ]);
+  const classes = cx([style.primary, isSelected && style.active, panel.highlight && style.highlight]);

  return (
    <Fragment key={panel.id}>
@@ -38,7 +38,7 @@ $inner-padding: 1rem;
 .section {
  position: relative;
  margin-top: 2rem;
-  max-width: 850px;
+  max-width: 1024px;
 }

 .indent {
@@ -7,6 +7,7 @@ import {
  githubUrl,
  subredditUrl,
  websiteUrl,
+  youtubeUrl,
 } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 import AppVersion from './AppVersion';
@@ -38,6 +39,7 @@ export default function AboutPanel() {
        <ExternalLink href={documentationUrl}>Read the docs</ExternalLink>
        <ExternalLink href={githubUrl}>Follow the project on GitHub</ExternalLink>
        <ExternalLink href={discordUrl}>Discord server</ExternalLink>
+        <ExternalLink href={youtubeUrl}>YouTube channel</ExternalLink>
        <ExternalLink href={subredditUrl}>Subreddit</ExternalLink>
      </Panel.Section>
    </>
@@ -293,8 +293,9 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
        <h3>Outputs</h3>
        <Info>
          Automation outputs can be used to send data from Ontime to external software <br />
-          or to change properties of Ontime itself.
-          <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
+          or to change properties of Ontime itself. <br /> <br />
+          Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
+          <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
        </Info>

        {fieldOutputs.map((output, index) => {
@@ -341,12 +342,17 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                  </label>
                  <label>
                    Address
-                    <Input {...register(`outputs.${index}.address`)} fluid placeholder='/cue/start' />
+                    <TemplateInput
+                      {...register(`outputs.${index}.address`)}
+                      value={output.address}
+                      fluid
+                      placeholder='/cue/start'
+                    />
                    <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
                  </label>
                  <label>
                    Arguments
-                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} placeholder='1' />
+                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} fluid placeholder='1' />
                    <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
                  </label>
                  <div>
@@ -376,7 +382,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                <div className={style.httpSection}>
                  <label>
                    Target URL
-                    <Input
+                    <TemplateInput
                      {...register(`outputs.${index}.url`, {
                        required: { value: true, message: 'Required field' },
                        pattern: {
@@ -384,6 +390,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                          message: 'HTTP messages should target http:// or https://',
                        },
                      })}
+                      value={output.url}
                      fluid
                      placeholder='http://127.0.0.1/start/1'
                    />
@@ -89,10 +89,9 @@ export default function AutomationSettingsForm({

      <Panel.Section>
        <Info>
-          <p>Control Ontime and share its data with external systems in your workflow.</p>
-          <p>- Automations allow Ontime to send its data on lifecycle triggers.</p>
-          <p>- OSC Input tells Ontime to listen to messages on the specific port.</p>
-          <br />
+          <span>Control Ontime and share its data with external systems in your workflow.</span>
+          <span>- Automations allow Ontime to send its data on lifecycle triggers.</span>
+          <span>- OSC Input tells Ontime to listen to messages on the specific port.</span>
          <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
        </Info>
      </Panel.Section>
@@ -5,6 +5,7 @@ import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
 import * as Panel from '../../panel-utils/PanelUtils';
+import TemplateInput from './template-input/TemplateInput';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-/**
- * Selects the last starting template in a string
- */
-export function selectFromLastTemplate(text: string) {
-  const lastBraceIndex = text.lastIndexOf('{{');
-  if (lastBraceIndex !== -1) {
-    return text.slice(lastBraceIndex);
+function getActiveTemplateRange(text: string, cursorIndex = text.length) {
+  const textBeforeCursor = text.slice(0, cursorIndex);
+  const start = textBeforeCursor.lastIndexOf('{{');
+  if (start === -1) {
+    return null;
  }
-  return '';
+
+  const closeBeforeCursor = textBeforeCursor.lastIndexOf('}}');
+  if (closeBeforeCursor > start) {
+    return null;
+  }
+
+  const closeAfterStart = text.indexOf('}}', start);
+  const nextStartAfterCursor = text.indexOf('{{', cursorIndex);
+  const closesBeforeNextTemplate = nextStartAfterCursor === -1 || closeAfterStart < nextStartAfterCursor;
+  const end = closeAfterStart !== -1 && closesBeforeNextTemplate ? closeAfterStart + 2 : cursorIndex;
+
+  return {
+    end,
+    start,
+    template: text.slice(start, cursorIndex),
+  };
+}
+
+/**
+ * Selects the last unclosed starting template before the cursor.
+ */
+export function selectActiveTemplate(text: string, cursorIndex = text.length) {
+  return getActiveTemplateRange(text, cursorIndex)?.template ?? '';
+}
+
+/**
+ * Replaces the active template fragment before the cursor with the selected suggestion.
+ */
+export function completeTemplateAtCursor(
+  text: string,
+  suggestion: string,
+  cursorIndex = text.length,
+): TemplateCompletion {
+  const activeTemplateRange = getActiveTemplateRange(text, cursorIndex);
+  if (!activeTemplateRange) {
+    const value = text + matchRemaining(text, suggestion);
+    return { value, cursorIndex: value.length };
+  }
+
+  const value = `${text.slice(0, activeTemplateRange.start)}${suggestion}${text.slice(activeTemplateRange.end)}`;
+  return {
+    value,
+    cursorIndex: activeTemplateRange.start + suggestion.length,
+  };
 }
@@ -0,0 +1,72 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { useCallback, useMemo, useState, type RefObject } from 'react';
+
+import { completeTemplateAtCursor, selectActiveTemplate } from './templateInput.utils';
+
+type TemplateElement = HTMLInputElement | HTMLTextAreaElement;
+
+function getCursorIndex(element: TemplateElement | null, fallback: string) {
+  return element?.selectionStart ?? fallback.length;
+}
+
+function focusCursor(element: TemplateElement | null, cursorIndex: number) {
+  requestAnimationFrame(() => {
+    element?.focus();
+    element?.setSelectionRange(cursorIndex, cursorIndex);
+  });
+}
+
+export function useTemplateAutocomplete<T extends TemplateElement>(
+  value: string,
+  autocompleteList: string[],
+  elementRef: RefObject<T | null>,
+  onValueChange: (value: string) => void,
+) {
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [cursor, setCursor] = useState(value.length);
+
+  const activeTemplate = selectActiveTemplate(value, cursor);
+  const suggestions = useMemo(() => {
+    if (!activeTemplate) {
+      return [];
+    }
+    return autocompleteList.filter((suggestion) => suggestion.startsWith(activeTemplate));
+  }, [activeTemplate, autocompleteList]);
+
+  const setCursorForValue = useCallback((nextValue: string, cursorIndex: number) => {
+    setCursor(cursorIndex);
+    setShowSuggestions(Boolean(selectActiveTemplate(nextValue, cursorIndex)));
+  }, []);
+
+  const updateCursor = useCallback(() => {
+    const cursorIndex = getCursorIndex(elementRef.current, value);
+    setCursorForValue(value, cursorIndex);
+  }, [elementRef, setCursorForValue, value]);
+
+  const handleValueChange = useCallback(
+    (nextValue: string, eventDetails: BaseAutocomplete.Root.ChangeEventDetails) => {
+      if (eventDetails.reason === 'item-press') {
+        eventDetails.cancel();
+        const completed = completeTemplateAtCursor(value, nextValue, cursor);
+        setCursorForValue(completed.value, completed.cursorIndex);
+        onValueChange(completed.value);
+        focusCursor(elementRef.current, completed.cursorIndex);
+        return;
+      }
+
+      const cursorIndex = getCursorIndex(elementRef.current, nextValue);
+      setCursorForValue(nextValue, cursorIndex);
+      onValueChange(nextValue);
+    },
+    [cursor, elementRef, onValueChange, setCursorForValue, value],
+  );
+
+  return {
+    handleValueChange,
+    open: showSuggestions && suggestions.length > 0,
+    setCursorForValue,
+    setShowSuggestions,
+    suggestions,
+    updateCursor,
+  };
+}
@@ -1,7 +1,8 @@
-import { URLPreset } from 'ontime-types';
+import { OntimeView, URLPreset } from 'ontime-types';
 import { useState } from 'react';
 import { IoAdd, IoOpenOutline, IoPencil, IoTrash } from 'react-icons/io5';

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

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

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

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

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

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

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

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

+  // focus on alias when the form opens
  useEffect(() => {
    setFocus('alias');
  }, [setFocus]);
@@ -126,44 +159,66 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
        <div className={style.expand}>
          <Panel.Description>Generate options (paste URL to generate options)</Panel.Description>
          <Panel.InlineElements>
-            <Input placeholder='Paste URL' fluid ref={urlRef} />
-            <Button onClick={generateOptions}>Generate</Button>
+            <Input placeholder='Paste URL' fluid ref={urlRef} disabled={isEditingCuesheet} />
+            <Button onClick={generateOptions} disabled={isEditingCuesheet}>
+              Generate
+            </Button>
          </Panel.InlineElements>
        </div>
      </Panel.InlineElements>
      {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
-      <div>
-        {enDash} or {enDash}
-      </div>
-      <div>2. Choose a view and its parameters</div>
-      <div>
-        <Panel.Description>Target</Panel.Description>
-        <Select
-          options={targetOptions}
-          {...register('target', { required: 'Target is required' })}
-          value={watch('target')}
-          onValueChange={(value: OntimeViewPresettable | null) => {
-            if (value === null) return;
-            setValue('target', value, { shouldDirty: true });
-          }}
-        />
-      </div>
-      <div>
-        <Panel.Description>Parameters</Panel.Description>
-        <Textarea
-          fluid
-          rows={3}
-          {...register('search', {
-            validate: validateParams,
-          })}
-        />
-        <Panel.Error>{errors.search?.message}</Panel.Error>
-      </div>
+      {!isEditingCuesheet && (
+        <>
+          <div>
+            {enDash} or {enDash}
+          </div>
+          <div>2. Choose a view and its parameters</div>
+          <div>
+            <Panel.Description>Target</Panel.Description>
+            <Select
+              options={targetOptions}
+              {...register('target', { required: 'Target is required' })}
+              value={watch('target')}
+              onValueChange={(value: OntimeViewPresettable | null) => {
+                if (value === null) return;
+                setValue('target', value, { shouldDirty: true });
+              }}
+            />
+          </div>
+          <div>
+            <Panel.Description>Parameters</Panel.Description>
+            <Textarea
+              fluid
+              rows={3}
+              {...register('search', {
+                validate: validateParams,
+              })}
+            />
+            <Panel.Error>{errors.search?.message}</Panel.Error>
+          </div>
+        </>
+      )}
+
+      {isCuesheet && (
+        <div>
+          <Panel.Description>Permissions</Panel.Description>
+          <CuesheetLinkOptions
+            initialRead={initialPermissions.current.read}
+            initialWrite={initialPermissions.current.write}
+            onChange={setCuesheetPermissions}
+          />
+        </div>
+      )}
      <div>
        <Panel.Error>{errors.root?.message}</Panel.Error>
        <Panel.InlineElements align='end'>
          <Button onClick={onClose}>Cancel</Button>
-          <Button variant='primary' type='submit' disabled={!isValid || !isDirty} loading={isSubmitting || isMutating}>
+          <Button
+            variant='primary'
+            type='submit'
+            disabled={!isValid || (!isDirty && !permissionsDirty) || noReadAccess}
+            loading={isSubmitting || isMutating}
+          >
            Save
          </Button>
        </Panel.InlineElements>
@@ -57,11 +57,11 @@ export default function CustomFieldSettings() {
        <Panel.Divider />
        <Panel.Section>
          <Info>
-            Custom fields allow for additional information to be added to an event.
-            <br />
-            <br />
-            To use custom fields as a data source in an{' '}
-            <AppLink search='settings=automation__automations'>Automation</AppLink>, please note the generated key.
+            <span>Custom fields allow for additional information to be added to an event.</span>
+            <span>
+              To use custom fields as a data source in an{' '}
+              <AppLink search='settings=automation__automations'>Automation</AppLink>, please note the generated key.
+            </span>
            <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
          </Info>
        </Panel.Section>
@@ -52,8 +52,9 @@ export default function CustomViews() {

        <Panel.Section>
          <Info>
-            Upload one <strong>index.html</strong> per view to <strong>/external/&lt;name&gt;/</strong>.
-            <br />
+            <span>
+              Upload one <strong>index.html</strong> per view to <strong>/external/&lt;name&gt;/</strong>.
+            </span>
            External imports are not allowed, include all assets inside the html file.
            <ExternalLink href={customViewsDocs}>See the docs</ExternalLink>
          </Info>
@@ -9,6 +9,7 @@ import {
  IoPencilOutline,
  IoTrash,
 } from 'react-icons/io5';
+import { TbGhost3 } from 'react-icons/tb';

 import { downloadAsExcel } from '../../../../common/api/excel';
 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -19,6 +20,7 @@ import { DropdownMenu } from '../../../../common/components/dropdown-menu/Dropdo
 import Tag from '../../../../common/components/tag/Tag';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 import { cx } from '../../../../common/utils/styleUtils';
+import { useDirectLinkToBackgroundEdit } from '../../../../views/cuesheet/useCuesheetRundownSelection';
 import * as Panel from '../../panel-utils/PanelUtils';
 import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';
@@ -97,6 +99,8 @@ export default function ManageRundowns() {
    await downloadAsExcel(rundownId, title);
  };

+  const navigateToCuesheet = useDirectLinkToBackgroundEdit();
+
  return (
    <>
      <Panel.Section>
@@ -153,7 +157,7 @@ export default function ManageRundowns() {
                      </td>
                      <td>
                        <DropdownMenu
-                          render={<IconButton variant='ghosted-white' />}
+                          render={<IconButton variant='ghosted-white' data-testId='rundown_menu' />}
                          items={[
                            {
                              type: 'item',
@@ -180,6 +184,12 @@ export default function ManageRundowns() {
                              label: 'Duplicate',
                              onClick: () => submitRundownDuplicate(id),
                            },
+                            {
+                              type: 'item',
+                              icon: TbGhost3,
+                              label: 'Edit in cuesheet',
+                              onClick: () => navigateToCuesheet(id),
+                            },
                            { type: 'divider' },
                            {
                              type: 'destructive',
@@ -16,6 +16,7 @@ export default function RundownDefaultSettings() {
    defaultDangerTime,
    defaultTimerType,
    defaultEndAction,
+    inheritGroupColour,
    setDefaultDuration,
    setLinkPrevious,
    setTimeStrategy,
@@ -23,6 +24,7 @@ export default function RundownDefaultSettings() {
    setDangerTime,
    setDefaultTimerType,
    setDefaultEndAction,
+    setInheritGroupColour,
  } = useEditorSettings((state) => state);

  const durationInMs = parseUserTime(defaultDuration);
@@ -44,6 +46,13 @@ export default function RundownDefaultSettings() {
              />
              <Switch size='large' checked={linkPrevious} onCheckedChange={setLinkPrevious} />
            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Inherit group colour'
+                description='Whether new events and milestones inherit the colour of their parent group'
+              />
+              <Switch size='large' checked={inheritGroupColour} onCheckedChange={setInheritGroupColour} />
+            </Panel.ListItem>
            <Panel.ListItem>
              <Panel.Field
                title='Timer strategy'
@@ -15,23 +15,25 @@ import Input from '../../../../../common/components/input/input/Input';
 import Tag from '../../../../../common/components/tag/Tag';
 import { openLink } from '../../../../../common/utils/linkUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
+import { extractSheetId, getPersistedSheetId, persistSheetId } from './gsheetUtils';

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

 interface GSheetSetupProps {
  onCancel: () => void;
  onSheetLoaded: (sheetId: string, options: SpreadsheetWorksheetOptions) => void;
+  closedByUser: boolean;
 }

 export default function GSheetSetup(props: GSheetSetupProps) {
-  const { onCancel, onSheetLoaded } = props;
+  const { onCancel, onSheetLoaded, closedByUser } = props;

  const [file, setFile] = useState<File | null>(null);
-  const [sheetId, setSheetId] = useState('');
+  const [sheetId, setSheetId] = useState(getPersistedSheetId);
  const [authenticationStatus, setAuthenticationStatus] = useState<AuthenticationStatus>('not_authenticated');
  const [authKey, setAuthKey] = useState<string | null>(null);
-  const [loading, setLoading] = useState<'' | 'cancel' | 'connect' | 'authenticate' | 'load-sheet'>('');
  const [authLink, setAuthLink] = useState('');
+  const [loading, setLoading] = useState<'' | 'cancel' | 'connect' | 'authenticate' | 'load-sheet'>('');
  const [authError, setAuthError] = useState('');
  const [worksheetError, setWorksheetError] = useState('');
  const pollTimeoutRef = useRef<number | null>(null);
@@ -62,6 +64,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
  const loadWorksheetOptions = useCallback(
    async (nextSheetId: string) => {
      const worksheetOptions = await getWorksheetOptions(nextSheetId);
+      persistSheetId(nextSheetId);
      onSheetLoaded(nextSheetId, worksheetOptions);
      setWorksheetError('');
    },
@@ -71,6 +74,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
  const pollUntilAuthenticated = useCallback(
    async (attempts: number = 0) => {
      clearPollTimeout();
+      if (closedByUser) return;

      try {
        const result = await verifyAuthenticationStatus();
@@ -82,13 +86,16 @@ export default function GSheetSetup(props: GSheetSetupProps) {
            pollTimeoutRef.current = window.setTimeout(() => {
              pollUntilAuthenticated(attempts + 1);
            }, 2000);
-          } else {
-            setLoading('');
+            return; // Keep authKey for next poll
          }
+          // Polling timed out
+          setAuthKey(null);
+          setLoading('');
          return;
        }

-        if (result.authenticated === 'authenticated') {
+        if (result.authenticated === 'authenticated' && result.sheetId) {
+          setLoading('load-sheet');
          try {
            await loadWorksheetOptions(result.sheetId);
          } catch (error) {
@@ -96,13 +103,15 @@ export default function GSheetSetup(props: GSheetSetupProps) {
          }
        }

+        setAuthKey(null);
        setLoading('');
      } catch (error) {
        setAuthError(maybeAxiosError(error));
+        setAuthKey(null);
        setLoading('');
      }
    },
-    [clearPollTimeout, loadWorksheetOptions],
+    [clearPollTimeout, loadWorksheetOptions, closedByUser],
  );

  /** check if the current session has been authenticated */
@@ -150,7 +159,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
  };

  /**
-   * Requests connection to google auth
+   * Requests a device code from Google. The user can copy it before opening the browser.
   */
  const handleConnect = async () => {
    if (!file) return;
@@ -171,7 +180,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
  };

  /**
-   * Open google auth
+   * Opens the Google verification page and starts polling for completion.
   */
  const handleAuthenticate = () => {
    setLoading('authenticate');
@@ -180,7 +189,6 @@ export default function GSheetSetup(props: GSheetSetupProps) {
    clearPollTimeout();
    clearAuthFallbackTimeout();

-    // open link and schedule a check for when the user focuses again
    openLink(authLink);
    authFallbackTimeoutRef.current = window.setTimeout(() => {
      if (document.hasFocus()) {
@@ -269,18 +277,19 @@ export default function GSheetSetup(props: GSheetSetupProps) {
        </Panel.ListGroup>
      )}
      <Panel.ListGroup className={style.setupBlock}>
-        <Panel.Description>Enter ID of sheet to synchronise</Panel.Description>
+        <Panel.Description>Enter ID of sheet to synchronize</Panel.Description>
        <Panel.Error>{worksheetError}</Panel.Error>
        <Input
          fluid
          value={sheetId}
-          placeholder='Sheet ID'
+          placeholder='Sheet ID or Google Sheets URL'
          onChange={(event) => {
            setWorksheetError('');
-            setSheetId(event.target.value);
+            setSheetId(extractSheetId(event.target.value));
          }}
          disabled={isLoading || canAuthenticate}
        />
+        <div className={style.setupHint}>Paste a Google Sheets URL or the sheet ID from the URL bar.</div>
      </Panel.ListGroup>
      {isAuthenticated ? (
        <Panel.ListGroup className={style.setupBlock}>
@@ -304,18 +313,16 @@ export default function GSheetSetup(props: GSheetSetupProps) {
        </Panel.ListGroup>
      ) : (
        <Panel.ListGroup className={style.setupBlock}>
-          <Panel.Description>Authenticate this Ontime session with Google</Panel.Description>
+          <Panel.Description>Copy the device code, then authenticate with Google</Panel.Description>
          <Panel.InlineElements wrap='wrap' className={style.setupActions}>
            {isAuthenticating && <span>Authenticating...</span>}
-            <CopyTag copyValue={authKey ?? ''} disabled={!canAuthenticate}>
-              {authKey ? authKey : 'Upload files to generate Auth Key'}
-            </CopyTag>
-            <Button onClick={handleAuthenticate} disabled={!canAuthenticate}>
+            <CopyTag copyValue={authKey ?? ''}>{authKey}</CopyTag>
+            <Button onClick={handleAuthenticate} disabled={isLoading} loading={loading === 'authenticate'}>
              <IoShieldCheckmarkOutline />
              Authenticate
            </Button>
          </Panel.InlineElements>
-          <div className={style.setupHint}>Open the browser prompt, complete the code flow, then come back here.</div>
+          <div className={style.setupHint}>Copy the code, then open the browser prompt to complete the flow.</div>
        </Panel.ListGroup>
      )}
    </Panel.Section>
@@ -25,6 +25,13 @@
  margin-top: 1rem;
 }

+.finishActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
 .sourceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1,4 +1,6 @@
 import type {
+  ImportedFields,
+  RundownImportMode,
  SpreadsheetPreviewResponse,
  SpreadsheetWorksheetMetadata,
  SpreadsheetWorksheetOptions,
@@ -6,6 +8,7 @@ import type {
 import { getErrorMessage, ImportMap } from 'ontime-utils';
 import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { IoCloudOutline, IoDownloadOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router';

 import {
  getWorksheetMetadata as getExcelWorksheetMetadata,
@@ -22,7 +25,7 @@ import Info from '../../../../../common/components/info/Info';
 import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../../common/components/modal/Modal';
 import useRundown from '../../../../../common/hooks-query/useRundown';
-import { validateExcelImport } from '../../../../../common/utils/uploadUtils';
+import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
 import SheetImportEditor from './sheet-import/SheetImportEditor';
@@ -35,14 +38,18 @@ const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadshee
 type ActiveSource =
  | {
      kind: 'excel';
+      fileName: string;
      worksheetNames: string[];
      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
+      closedByUser: boolean;
    }
  | {
      kind: 'gsheet';
      sheetId: string;
      worksheetNames: string[];
      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
+      title: string;
+      closedByUser: boolean;
    };

 export default function SourcesPanel() {
@@ -50,9 +57,11 @@ export default function SourcesPanel() {
  const [error, setError] = useState('');
  const [hasFile, setHasFile] = useState<'none' | 'loading' | 'done'>('none');
  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
+  const [completedRundownTitle, setCompletedRundownTitle] = useState('');

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

  const fileInputRef = useRef<HTMLInputElement>(null);

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

  const openGSheetFlow = () => {
@@ -106,32 +118,50 @@ export default function SourcesPanel() {
  };

  const cancelImportFlow = () => {
-    resetFlow();
+    if (activeSource && activeSource.kind === 'gsheet') {
+      // Return to GSheetSetup so the user can change the sheet ID or revoke auth
+      setActiveSource({ ...activeSource, closedByUser: true });
+      setError('');
+    } else {
+      resetFlow();
+    }
  };

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

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

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

  const loadWorksheetMetadata = useCallback(
@@ -177,25 +207,39 @@ export default function SourcesPanel() {
      sheetId,
      worksheetNames: worksheetOptions.worksheets,
      initialWorksheetMetadata: worksheetOptions.metadata,
+      title: worksheetOptions.title ?? '',
+      closedByUser: false,
    });
  }, []);

+  const closedByUser = activeSource?.closedByUser ?? false;
  const isGSheetFlow = importFlow === 'gsheet';
  const showInput = importFlow === 'none';
  const showCompleted = importFlow === 'finished';
-  const showAuth = isGSheetFlow && activeSource === null;
-  const showImportWorkspace = activeSource !== null;
-  const importModalTitle = activeSource?.kind === 'excel' ? 'Import spreadsheet' : 'Synchronise with Google Sheet';
+
+  const showImportWorkspace = activeSource !== null && !closedByUser;
+  const importModalTitle = (() => {
+    if (!activeSource) return '';
+    if (activeSource.kind === 'excel') return 'Import spreadsheet';
+    return activeSource.title ? `Sync: ${activeSource.title}` : 'Synchronize with Google Sheet';
+  })();
  const sourceKey = (() => {
    if (!activeSource) return null;
    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>
      <Panel.Card>
-        <Panel.SubHeader>Synchronise your rundown with an external source</Panel.SubHeader>
+        <Panel.SubHeader>Synchronize your rundown with an external source</Panel.SubHeader>
        {error && <Panel.Error>{error}</Panel.Error>}
        {showInput && (
          <div className={style.introStack}>
@@ -233,7 +277,7 @@ export default function SourcesPanel() {
              </section>
              <section className={style.sourceCard}>
                <div className={style.sourceHeader}>
-                  <h4 className={style.sourceTitle}>Synchronise with Google</h4>
+                  <h4 className={style.sourceTitle}>Synchronize with Google</h4>
                </div>
                <p className={style.sourceDescription}>
                  Connect a Google account once, then load any sheet by ID and keep the import flow inside Ontime.
@@ -241,7 +285,7 @@ export default function SourcesPanel() {
                <div className={style.sourceMeta}>Requires Google OAuth client credentials</div>
                <Button variant='primary' size='large' fluid onClick={openGSheetFlow} disabled={hasFile !== 'none'}>
                  <IoCloudOutline />
-                  Synchronise with Google
+                  Synchronize with Google
                </Button>
              </section>
            </div>
@@ -250,14 +294,25 @@ export default function SourcesPanel() {
        {showCompleted && (
          <div className={style.finishSection}>
            <span className={style.finishBadge}>Import complete</span>
-            <div className={style.finishTitle}>Spreadsheet data applied.</div>
-            <div className={style.finishDescription}>You can close this flow or start another import.</div>
-            <Button variant='subtle-white' onClick={resetFlow}>
-              Reset flow
-            </Button>
+            <div className={style.finishTitle}>
+              Spreadsheet data applied to {completedRundownTitle || 'your rundown'}.
+            </div>
+            <div className={style.finishDescription}>
+              Review the imported rundown in the editor or start another import.
+            </div>
+            <div className={style.finishActions}>
+              <Button variant='primary' onClick={() => navigate('/editor')}>
+                Open editor
+              </Button>
+              <Button variant='subtle-white' onClick={resetFlow}>
+                Import another
+              </Button>
+            </div>
          </div>
        )}
-        {showAuth && <GSheetSetup onCancel={cancelGSheetFlow} onSheetLoaded={handleSheetLoaded} />}
+        {isGSheetFlow && (
+          <GSheetSetup onCancel={cancelGSheetFlow} onSheetLoaded={handleSheetLoaded} closedByUser={closedByUser} />
+        )}
        <Modal
          isOpen={showImportWorkspace}
          title={importModalTitle}
@@ -268,6 +323,7 @@ export default function SourcesPanel() {
          bodyElements={
            <SheetImportEditor
              sourceKey={sourceKey ?? 'spreadsheet'}
+              defaultRundownName={spreadsheetName}
              worksheetNames={activeSource?.worksheetNames ?? []}
              initialMetadata={activeSource?.initialWorksheetMetadata ?? null}
              loadMetadata={loadWorksheetMetadata}
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+
+import { extractSheetId } from '../gsheetUtils';
+
+describe('extractSheetId()', () => {
+  it('extracts the ID from a full Google Sheets URL', () => {
+    const url = 'https://docs.google.com/spreadsheets/d/1aBcDeFgHiJkLmNoPqRsTuVwXyZ/edit#gid=0';
+    expect(extractSheetId(url)).toBe('1aBcDeFgHiJkLmNoPqRsTuVwXyZ');
+  });
+
+  it('extracts the ID when the URL has no trailing path', () => {
+    expect(extractSheetId('https://docs.google.com/spreadsheets/d/abc123')).toBe('abc123');
+  });
+
+  it('handles IDs with hyphens and underscores', () => {
+    const url = 'https://docs.google.com/spreadsheets/d/1a-B_c2/edit';
+    expect(extractSheetId(url)).toBe('1a-B_c2');
+  });
+
+  it('returns a raw sheet ID unchanged', () => {
+    expect(extractSheetId('1aBcDeFgHiJkLmNoPqRsTuVwXyZ')).toBe('1aBcDeFgHiJkLmNoPqRsTuVwXyZ');
+  });
+
+  it('trims whitespace from the input', () => {
+    expect(extractSheetId('  1aBcDeFg  ')).toBe('1aBcDeFg');
+  });
+
+  it('trims whitespace from a pasted URL', () => {
+    const url = '  https://docs.google.com/spreadsheets/d/1aBcDeFg/edit  ';
+    expect(extractSheetId(url)).toBe('1aBcDeFg');
+  });
+
+  it('strips query params from a raw ID', () => {
+    expect(extractSheetId('1aBcDeFgHiJkLmNoPqRsTuVwXyZ?edit=1')).toBe('1aBcDeFgHiJkLmNoPqRsTuVwXyZ');
+  });
+
+  it('strips fragment from a raw ID', () => {
+    expect(extractSheetId('1aBcDeFg#gid=0')).toBe('1aBcDeFg');
+  });
+
+  it('returns empty string for empty input', () => {
+    expect(extractSheetId('')).toBe('');
+    expect(extractSheetId('   ')).toBe('');
+  });
+});
@@ -0,0 +1,29 @@
+import { makeStageKey } from '../../../../../common/utils/localStorage';
+
+// Matches the document ID segment from a Google Sheets URL:
+// https://docs.google.com/spreadsheets/d/{ID}/edit#gid=0
+//                                         ^^^^ captured group
+// IDs consist of alphanumeric chars, hyphens, and underscores.
+const sheetIdPattern = /\/spreadsheets\/d\/([a-zA-Z0-9_-]+)/;
+const lastSheetIdKey = makeStageKey('gsheet:lastSheetId');
+
+/**
+ * Extracts a Google Sheet ID from a full URL, or returns the raw input if it doesn't match.
+ */
+export function extractSheetId(input: string): string {
+  const trimmed = input.trim();
+  const match = trimmed.match(sheetIdPattern);
+  if (match) return match[1];
+
+  // Strip query params (?...) and fragments (#...) in case the user
+  // pasted a partial URL or an ID with trailing junk like "abc123?edit=1"
+  return trimmed.split(/[?#]/)[0];
+}
+
+export function getPersistedSheetId(): string {
+  return localStorage.getItem(lastSheetIdKey) ?? '';
+}
+
+export function persistSheetId(sheetId: string) {
+  localStorage.setItem(lastSheetIdKey, sheetId);
+}
@@ -0,0 +1,55 @@
+import type { RundownImportMode, SpreadsheetPreviewResponse } from 'ontime-types';
+import { isOntimeEvent, isPlayableEvent, Playback } from 'ontime-types';
+import { useEffect, useState } from 'react';
+
+import Button from '../../../../../../common/components/buttons/Button';
+import { usePlayback, useSelectedEventId } from '../../../../../../common/hooks/useSocket';
+
+interface ApplyImportButtonProps {
+  preview: SpreadsheetPreviewResponse | null;
+  mode: RundownImportMode;
+  disabled: boolean;
+  loading: boolean;
+  onApply: () => void;
+}
+
+/**
+ * Apply action for the spreadsheet import.
+ * Subscribes to playback state on its own so playback updates do not re-render the whole editor.
+ * Requires a second click to confirm when applying would stop a running playback.
+ */
+export default function ApplyImportButton({ preview, mode, disabled, loading, onApply }: ApplyImportButtonProps) {
+  const playback = usePlayback();
+  const loadedEventId = useSelectedEventId();
+
+  // the loaded (playing) event loses its playback unless it still exists as a playable event after the import
+  const loadedEntry = loadedEventId ? preview?.rundown.entries[loadedEventId] : undefined;
+  const willLoadedEventBeOverriden = !(
+    loadedEntry !== undefined &&
+    isOntimeEvent(loadedEntry) &&
+    isPlayableEvent(loadedEntry)
+  );
+
+  // applying stops playback when creating a new rundown, or when the playing event does not survive
+  const willStopPlayback = playback !== Playback.Stop && (mode === 'new' || willLoadedEventBeOverriden);
+
+  // two-step confirmation before applying an import that stops playback
+  const [confirmStop, setConfirmStop] = useState(false);
+  useEffect(() => {
+    setConfirmStop(false);
+  }, [mode, preview]);
+
+  const handleClick = () => {
+    if (willStopPlayback && !confirmStop) {
+      setConfirmStop(true);
+      return;
+    }
+    onApply();
+  };
+
+  return (
+    <Button variant='primary' onClick={handleClick} disabled={disabled} loading={loading}>
+      {willStopPlayback && confirmStop ? 'Confirm — stop playback & apply import' : 'Apply import'}
+    </Button>
+  );
+}
@@ -16,7 +16,7 @@ export function getWarningText(warning: MappingWarning): string {
    case 'invalid-name':
      return 'Column cannot be converted into an Ontime field name';
    case 'name-collision':
-      return 'Column name resolves to a duplicate column';
+      return 'Column name resolves to a duplicate Ontime field';
    default:
      return '';
  }
@@ -33,6 +33,11 @@
  white-space: nowrap;
 }

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

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

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

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

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

+  const selectedImportMode = importModeOptions.find((option) => option.value === importMode) ?? importModeOptions[0];
+  const importModeItems = useMemo<DropdownMenuOption[]>(
+    () =>
+      importModeOptions.map((option) => ({
+        type: 'item',
+        label: option.label,
+        description: option.description,
+        icon: importMode === option.value ? IoCheckmark : undefined,
+        onClick: () => setImportMode(option.value),
+      })),
+    [importMode, setImportMode],
+  );
+
  return (
    <Panel.Section as='form' id='spreadsheet-import-workspace' className={style.editor} onSubmit={handlePreviewSubmit}>
      <Panel.InlineElements align='apart' wrap='wrap' className={style.editorToolbar}>
@@ -75,7 +132,16 @@ export default function SheetImportEditor({
            }
          />
        </label>
-        {toolbarStatus && <Panel.Description>{toolbarStatus}</Panel.Description>}
+        {toolbarStatus && (
+          <Panel.Description>
+            {toolbarStatus.entries === '–'
+              ? 'No import preview yet'
+              : `${toolbarStatus.entries} entries · ${toolbarStatus.groups} groups · ${toolbarStatus.milestones} milestones · ${toolbarStatus.start}–${toolbarStatus.end} · ${toolbarStatus.duration}`}
+            {toolbarStatus.warnings > 0 && (
+              <span className={style.toolbarWarning}> · {toolbarStatus.warnings} warnings</span>
+            )}
+          </Panel.Description>
+        )}
      </Panel.InlineElements>

      <div className={style.editorBody}>
@@ -93,13 +159,19 @@ export default function SheetImportEditor({

        <section className={style.previewPane}>
          <div className={style.previewPaneHeader}>
-            <span className={style.previewPaneTitle}>Import preview</span>
+            <div className={style.previewPaneHeading}>
+              <span className={style.previewPaneTitle}>Import preview</span>
+            </div>
          </div>
          <div className={style.tableShell}>
            <PreviewTable
              preview={state.preview}
              columnLabels={columnLabels}
+              canRefresh={canPreview}
              isLoadingMetadata={isLoadingMetadata}
+              isRefreshing={state.loading === 'preview'}
+              needsPreviewRefresh={state.needsPreviewRefresh}
+              onRefresh={handlePreviewSubmit}
              worksheetHeaders={worksheetHeaders}
            />
          </div>
@@ -107,33 +179,63 @@ export default function SheetImportEditor({
      </div>

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

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

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

 describe('getImportWarnings()', () => {
  it('warns when two mappings target the same spreadsheet column', () => {
@@ -58,7 +64,7 @@ describe('getImportWarnings()', () => {
    expect(warnings['custom.0.importName']).toStrictEqual({ kind: 'invalid-name' });
  });

-  it('warns when a custom header resolves to an existing Ontime field name', () => {
+  it('warns when a custom header resolves to a built-in or duplicate imported field name', () => {
    const values = createDefaultFormValues();
    values.custom = [
      { ontimeName: '', importName: 'Artist-1' },
@@ -67,12 +73,20 @@ describe('getImportWarnings()', () => {
      { ontimeName: '', importName: 'Presenter-1' },
    ];

-    const warnings = getImportWarnings(values, ['Artist-1', 'Artist/1', 'Title!', 'Presenter-1'], ['Presenter 1']);
+    const warnings = getImportWarnings(values, ['Artist-1', 'Artist/1', 'Title!', 'Presenter-1']);

    expect(warnings['custom.0.importName']).toBeUndefined();
    expect(warnings['custom.1.importName']).toStrictEqual({ kind: 'name-collision' });
    expect(warnings['custom.2.importName']).toStrictEqual({ kind: 'name-collision' });
-    expect(warnings['custom.3.importName']).toStrictEqual({ kind: 'name-collision' });
+    expect(warnings['custom.3.importName']).toBeUndefined();
+  });
+
+  it('does not give false warnings for pre-existing custom fields', () => {
+    const values = createDefaultFormValues();
+    values.custom = [{ ontimeName: '', importName: 'Video Info' }];
+
+    const warnings = getImportWarnings(values, ['Video Info']);
+    expect(warnings['custom.0.importName']).toBeUndefined();
  });
 });

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

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

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

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

-export function getPersistedImportState(sourceKey: string): ImportFormValues {
+export function getPersistedImportState(sourceKey: string): { values: ImportFormValues; isPersisted: boolean } {
  const storageKey = getImportMapKey(sourceKey);
  try {
-    const raw = localStorage.getItem(storageKey);
-    if (!raw) {
-      return createDefaultFormValues();
+    const persistedData = localStorage.getItem(storageKey);
+    if (!persistedData) {
+      return { values: createDefaultFormValues(), isPersisted: false };
    }

-    const parsed: unknown = JSON.parse(raw);
+    const parsed: unknown = JSON.parse(persistedData);
    if (isPersistedFormValues(parsed)) {
-      return parsed;
+      return { values: parsed, isPersisted: true };
    }

    // Invalid schema - delete malformed data
    localStorage.removeItem(storageKey);
-    return createDefaultFormValues();
+    return { values: createDefaultFormValues(), isPersisted: false };
  } catch {
    // Parse error - delete corrupted data
    localStorage.removeItem(storageKey);
-    return createDefaultFormValues();
+    return { values: createDefaultFormValues(), isPersisted: false };
  }
 }

+/**
+ * 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.
 */
 export function getImportWarnings(
  values: ImportFormValues,
  detectedSpreadsheetColumns: string[],
-  existingCustomFieldLabels: string[] = [],
 ): Record<string, MappingWarning | undefined> {
  const normalisedHeaders = new Set(detectedSpreadsheetColumns.map(normaliseColumnName).filter(Boolean));
  const builtInLabels = new Set(builtInFieldDefs.map((def) => def.label.toLowerCase()));
-  const existingLabels = new Set(existingCustomFieldLabels.map((label) => label.trim().toLowerCase()).filter(Boolean));
  const seenColumns = new Set<string>();
  const seenDerivedLabels = new Set<string>();
  const warnings: Record<string, MappingWarning | undefined> = {};
@@ -200,11 +253,7 @@ export function getImportWarnings(
      warnings[key] = { kind: 'missing' };
    } else {
      const normalisedDerivedLabel = sanitisedLabel.toLowerCase();
-      if (
-        builtInLabels.has(normalisedDerivedLabel) ||
-        existingLabels.has(normalisedDerivedLabel) ||
-        seenDerivedLabels.has(normalisedDerivedLabel)
-      ) {
+      if (builtInLabels.has(normalisedDerivedLabel) || seenDerivedLabels.has(normalisedDerivedLabel)) {
        warnings[key] = { kind: 'name-collision' };
      }
    }
@@ -1,27 +1,35 @@
 .emptyState {
-  height: 100%;
-  min-height: 16rem;
-  display: grid;
-  place-content: center;
-  gap: 0.35rem;
-  padding: 1.5rem;
+  padding: 3rem 1.5rem;
  text-align: center;
 }

+.emptyMessage {
+  width: min(30rem, 100%);
+  margin-inline: auto;
+}
+
 .emptyTitle {
-  color: $ui-white;
-  font-size: 1rem;
-  font-weight: 600;
+  margin-bottom: 0.25rem;
+  color: rgba($gray-200, 0.72);
+  font-size: calc(1rem + 2px);
+  font-weight: 400;
 }

 .emptyBody {
-  color: $gray-400;
-  font-size: 0.95rem;
+  color: rgba($gray-200, 0.55);
+  font-size: calc(1rem - 3px);
+  line-height: 1.5;
+}
+
+.emptyAction {
+  margin: 1rem auto 0;
 }

 .table {
  width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: $ui-white;
  font-size: calc(1rem - 2px);
  text-align: left;
  table-layout: auto;
@@ -34,31 +42,101 @@
  }

  th {
-    font-weight: 400;
-    color: $gray-400;
-    text-transform: capitalize;
-    vertical-align: top;
+    color: $gray-300;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    vertical-align: bottom;
    white-space: normal;
  }

  th,
  td {
-    padding: 0.5rem;
+    box-sizing: border-box;
    min-width: 8rem;
-    vertical-align: top;
+    max-width: 20rem;
+    padding: 0.55rem 0.65rem;
+    border-bottom: 1px solid $white-10;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
  }

-  tr:nth-child(even) {
-    background-color: $white-1;
+  tbody tr {
+    --entry-colour: transparent;
+    background-color: color-mix(in srgb, $gray-1300 96%, var(--entry-colour) 4%);
+    box-shadow: inset 3px 0 var(--entry-colour);
  }
+
+  td[data-empty='true'] {
+    color: $gray-600;
+  }
+}
+
+.rowNumber,
+.rowType {
+  position: sticky;
+  z-index: 1;
+  background-color: inherit;
 }

 .rowNumber {
-  width: 4.5rem;
-  min-width: 4.5rem;
+  left: 0;
+  width: 3.25rem;
+  min-width: 3.25rem !important;
+  color: $gray-400;
+  text-align: right;
 }

 .rowType {
-  width: 7rem;
-  min-width: 7rem;
+  left: 3.25rem;
+  width: 6.25rem;
+  min-width: 6.25rem !important;
+  color: $gray-400;
+  font-size: 0.8rem;
+  box-shadow: 1px 0 $white-10;
+}
+
+thead .rowNumber,
+thead .rowType {
+  z-index: 2;
+  background-color: $gray-1350;
+}
+
+.numericCell {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.multilineCell {
+  max-width: 30rem !important;
+  overflow-wrap: anywhere;
+  text-overflow: clip !important;
+  white-space: pre-wrap !important;
+}
+
+.eventRow {
+  .rowNumber {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.groupRow {
+  background-color: color-mix(in srgb, $gray-1300 88%, var(--entry-colour) 12%) !important;
+  box-shadow: inset 4px 0 var(--entry-colour) !important;
+  font-weight: 600;
+
+  td {
+    min-height: 3.25rem;
+    border-top: 0.75rem solid $gray-1350;
+  }
+}
+
+.milestoneRow {
+  background-color: color-mix(in srgb, $gray-1300 93%, var(--entry-colour) 7%) !important;
+  box-shadow: inset 3px 0 var(--entry-colour) !important;
+  color: $gray-300;
+  font-style: italic;
 }
@@ -1,7 +1,11 @@
 import type { CustomField, CustomFieldKey, SpreadsheetPreviewResponse } from 'ontime-types';
-import { isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { isOntimeDelay, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import type { CSSProperties } from 'react';
 import { useMemo } from 'react';

+import Button from '../../../../../../../common/components/buttons/Button';
+import Tag from '../../../../../../../common/components/tag/Tag';
+import { getRundownMetadata } from '../../../../../../../common/utils/rundownMetadata';
 import { getCellValue } from './previewTableUtils';

 import style from './PreviewTable.module.scss';
@@ -9,14 +13,85 @@ import style from './PreviewTable.module.scss';
 interface PreviewTableProps {
  preview: SpreadsheetPreviewResponse | null;
  columnLabels: string[];
+  canRefresh: boolean;
  isLoadingMetadata: boolean;
+  isRefreshing: boolean;
+  needsPreviewRefresh: boolean;
+  onRefresh: () => void;
  worksheetHeaders: string[];
 }

+const priorityColumns = ['Title', 'Cue', 'Start', 'End', 'Duration'];
+const numericColumns = new Set(['Start', 'End', 'Duration', 'Time warning', 'Time danger']);
+const transparentColour = 'transparent';
+
+type PreviewEntry = SpreadsheetPreviewResponse['rundown']['entries'][string];
+
+function getEntryDisplay(entry: PreviewEntry, groupColour?: string) {
+  if (isOntimeGroup(entry)) {
+    return {
+      rowClassName: style.groupRow,
+      entryColour: entry.colour,
+      entryType: 'Group',
+    };
+  }
+
+  const entryColour = groupColour ?? transparentColour;
+
+  if (isOntimeMilestone(entry)) {
+    return {
+      rowClassName: style.milestoneRow,
+      entryColour,
+      entryType: 'Milestone',
+    };
+  }
+
+  if (isOntimeDelay(entry)) {
+    return {
+      rowClassName: style.eventRow,
+      entryColour,
+      entryType: 'Delay',
+    };
+  }
+
+  return {
+    rowClassName: style.eventRow,
+    entryColour,
+    entryType: 'Event',
+  };
+}
+
+function getCellClassName(label: string, value: string) {
+  if (value.includes('\n')) {
+    return style.multilineCell;
+  }
+
+  if (numericColumns.has(label)) {
+    return style.numericCell;
+  }
+
+  return undefined;
+}
+
+function getDisplayColumns(columnLabels: string[]) {
+  return [...columnLabels].sort((left, right) => {
+    const leftPriority = priorityColumns.indexOf(left);
+    const rightPriority = priorityColumns.indexOf(right);
+    return (
+      (leftPriority === -1 ? priorityColumns.length : leftPriority) -
+      (rightPriority === -1 ? priorityColumns.length : rightPriority)
+    );
+  });
+}
+
 export default function PreviewTable({
  preview,
  columnLabels,
+  canRefresh,
  isLoadingMetadata,
+  isRefreshing,
+  needsPreviewRefresh,
+  onRefresh,
  worksheetHeaders,
 }: PreviewTableProps) {
  const customFieldKeyByLabel = useMemo(() => {
@@ -24,33 +99,57 @@ export default function PreviewTable({
    return new Map(Object.entries(preview.customFields).map(([fieldId, field]) => [field.label, fieldId]));
  }, [preview]);

+  const displayColumns = useMemo(() => getDisplayColumns(columnLabels), [columnLabels]);
+
+  const previewMetadata = useMemo(() => {
+    if (!preview) return null;
+    return getRundownMetadata(preview.rundown, null);
+  }, [preview]);
+
  if (!preview) {
+    let emptyTitle = 'Preview not generated';
    let emptyContent = 'Select the fields you want to import, then click Preview import.';

    if (isLoadingMetadata) {
+      emptyTitle = 'Loading worksheet';
      emptyContent = 'Loading worksheet metadata...';
    } else if (worksheetHeaders.length === 0) {
+      emptyTitle = 'No headers found';
      emptyContent =
        'No column headers detected in this worksheet. Try a different worksheet or ensure the first row contains column headers.';
+    } else if (needsPreviewRefresh) {
+      emptyTitle = 'Preview needs updating';
+      emptyContent = 'Your column mapping changed. Preview the import again to update this table.';
    }

    return (
      <div className={style.emptyState}>
-        <div className={style.emptyTitle}>Preview not generated</div>
-        <div className={style.emptyBody}>{emptyContent}</div>
+        <div className={style.emptyMessage}>
+          <div className={style.emptyTitle}>{emptyTitle}</div>
+          <div className={style.emptyBody}>{emptyContent}</div>
+          {needsPreviewRefresh && (
+            <Button
+              className={style.emptyAction}
+              variant='primary'
+              onClick={onRefresh}
+              disabled={!canRefresh}
+              loading={isRefreshing}
+            >
+              Refresh preview
+            </Button>
+          )}
+        </div>
      </div>
    );
  }

-  let eventIndex = 0;
-
  return (
    <table className={style.table}>
      <thead>
        <tr>
          <th className={style.rowNumber}>#</th>
          <th className={style.rowType}>Type</th>
-          {columnLabels.map((label, index) => (
+          {displayColumns.map((label, index) => (
            <th key={`${label}-${index}`}>{label}</th>
          ))}
        </tr>
@@ -59,16 +158,29 @@ export default function PreviewTable({
        {preview.rundown.flatOrder.map((entryId) => {
          const entry = preview.rundown.entries[entryId];
          const isEvent = isOntimeEvent(entry);
-          if (isEvent) eventIndex++;
-          const hasType = isEvent || isOntimeGroup(entry) || isOntimeMilestone(entry);
+          const entryMetadata = previewMetadata?.[entryId];
+          const { rowClassName, entryColour, entryType } = getEntryDisplay(entry, entryMetadata?.groupColour);

          return (
-            <tr key={entryId}>
-              <td className={style.rowNumber}>{isEvent ? eventIndex : ''}</td>
-              <td className={style.rowType}>{hasType ? entry.type : ''}</td>
-              {columnLabels.map((label, colIndex) => (
-                <td key={`${entryId}-${colIndex}`}>{getCellValue(label, entry, customFieldKeyByLabel)}</td>
-              ))}
+            <tr key={entryId} className={rowClassName} style={{ '--entry-colour': entryColour } as CSSProperties}>
+              <td className={style.rowNumber}>{isEvent ? entryMetadata?.eventIndex : ''}</td>
+              <td className={style.rowType}>
+                <Tag>{entryType}</Tag>
+              </td>
+              {displayColumns.map((label, colIndex) => {
+                const value = getCellValue(label, entry, customFieldKeyByLabel);
+                const cellClassName = getCellClassName(label, value);
+                return (
+                  <td
+                    key={`${entryId}-${colIndex}`}
+                    className={cellClassName}
+                    data-empty={value === ''}
+                    title={value || undefined}
+                  >
+                    {value}
+                  </td>
+                );
+              })}
            </tr>
          );
        })}
@@ -1,19 +1,27 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import type {
+  ImportedFields,
+  RundownImportMode,
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+} from 'ontime-types';
+import { isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { millisToString, removeTrailingZero } from 'ontime-utils';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';

 import { maybeAxiosError } from '../../../../../../common/api/utils';
-import useCustomFields from '../../../../../../common/hooks-query/useCustomFields';
 import { formatDuration } from '../../../../../../common/utils/time';
 import {
  type ImportFormValues,
  builtInFieldDefs,
  convertToImportMap,
  getImportWarnings,
+  getPersistedImportMode,
  getPersistedImportState,
+  getProvidedImportFields,
  getResolvedCustomFields,
+  persistImportMode,
  persistImportState,
 } from './importMapUtils';
 import { deriveHeaderOptionsState } from './spreadsheetImportUtils';
@@ -25,7 +33,7 @@ type ImportAction =
  | { type: 'previewSuccess'; preview: SpreadsheetPreviewResponse }
  | { type: 'applySuccess' }
  | { type: 'exportSuccess' }
-  | { type: 'clearPreview'; error?: string }
+  | { type: 'clearPreview'; error?: string; needsRefresh?: boolean }
  | { type: 'failure'; error: string }
  | { type: 'reset' };

@@ -33,12 +41,14 @@ type ImportState = {
  loading: '' | 'preview' | 'apply' | 'export';
  error: string;
  preview: SpreadsheetPreviewResponse | null;
+  needsPreviewRefresh: boolean;
 };

 const initialImportState: ImportState = {
  loading: '',
  error: '',
  preview: null,
+  needsPreviewRefresh: false,
 };

 function importReducer(state: ImportState, action: ImportAction): ImportState {
@@ -50,15 +60,15 @@ function importReducer(state: ImportState, action: ImportAction): ImportState {
    case 'startExport':
      return { ...state, loading: 'export', error: '' };
    case 'previewSuccess':
-      return { loading: '', error: '', preview: action.preview };
+      return { loading: '', error: '', preview: action.preview, needsPreviewRefresh: false };
    case 'applySuccess':
    case 'exportSuccess':
      return { ...state, loading: '' };
    case 'clearPreview':
-      return { ...state, error: action.error ?? '', preview: null };
+      return { ...state, error: action.error ?? '', preview: null, needsPreviewRefresh: action.needsRefresh ?? false };
    case 'failure': {
      if (state.loading === 'preview') {
-        return { loading: '', error: action.error, preview: null };
+        return { loading: '', error: action.error, preview: null, needsPreviewRefresh: false };
      }
      return { ...state, loading: '', error: action.error };
    }
@@ -101,16 +111,23 @@ function buildColumnLabels(values: ImportFormValues): string[] {

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

 export function useSheetImportForm({
  sourceKey,
+  defaultRundownName,
  worksheetNames,
  initialMetadata,
  loadMetadata,
@@ -118,10 +135,15 @@ export function useSheetImportForm({
  onApply,
  onExport,
 }: UseSheetImportFormProps) {
-  const initialFormValues = useMemo(() => {
-    const persisted = getPersistedImportState(sourceKey);
-    const worksheet = getPreferredWorksheet(worksheetNames, persisted.worksheet, initialMetadata?.worksheet ?? '');
-    return { ...persisted, worksheet };
+  const { initialFormValues, skipAutoPreview } = useMemo(() => {
+    const { values, isPersisted } = getPersistedImportState(sourceKey);
+    const worksheet = getPreferredWorksheet(worksheetNames, values.worksheet, initialMetadata?.worksheet ?? '');
+    // Skip auto-preview when restoring a persisted mapping that was saved for a different worksheet.
+    const hasWorksheetChanged = values.worksheet !== worksheet;
+    return {
+      initialFormValues: { ...values, worksheet },
+      skipAutoPreview: isPersisted && hasWorksheetChanged,
+    };
  }, [initialMetadata?.worksheet, sourceKey, worksheetNames]);

  const {
@@ -139,7 +161,6 @@ export function useSheetImportForm({

  const { fields, append, remove } = useFieldArray({ control, name: 'custom' });
  const values = watch();
-  const { data: existingCustomFields } = useCustomFields();

  // --- Worksheet metadata via react-query ---
  const queryClient = useQueryClient();
@@ -167,20 +188,26 @@ export function useSheetImportForm({
  const columnLabels = buildColumnLabels(values);

  const [state, dispatch] = useReducer(importReducer, initialImportState);
-  const existingCustomFieldLabels = useMemo(
-    () => Object.values(existingCustomFields).map((field) => field.label),
-    [existingCustomFields],
-  );
-  const warnings = getImportWarnings(values, headers, existingCustomFieldLabels);
+  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);
+  const autoPreviewFiredRef = useRef(false);

  // Rehydrate the form from persisted/default state whenever the source context changes.
  useEffect(() => {
+    autoPreviewFiredRef.current = false;
    reset(initialFormValues);
    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;
@@ -197,7 +224,7 @@ export function useSheetImportForm({
    const sub = watch(() => {
      if (!previewRef.current) return;
      previewRef.current = null;
-      dispatch({ type: 'clearPreview' });
+      dispatch({ type: 'clearPreview', needsRefresh: true });
    });
    return () => sub.unsubscribe();
  }, [watch]);
@@ -225,18 +252,30 @@ export function useSheetImportForm({
    [previewImport],
  );

+  // Auto-preview on mount once metadata is ready.
+  useEffect(() => {
+    if (autoPreviewFiredRef.current) return;
+    if (skipAutoPreview) return;
+    if (!isValid || headers.length === 0) return;
+
+    autoPreviewFiredRef.current = true;
+    handleSubmit(handlePreview)();
+  }, [skipAutoPreview, isValid, headers, handleSubmit, handlePreview]);
+
  const handleApply = useCallback(async () => {
    if (!state.preview) return;

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

  const handleExport = useCallback(
    async (formValues: ImportFormValues) => {
@@ -261,15 +300,37 @@ export function useSheetImportForm({
  }, [append]);

  const toolbarStatus = (() => {
-    const warningText = warningCount > 0 ? ` | warnings: ${warningCount}` : '';
-
    if (!state.preview) {
-      return `entries: – | start: – | end: – | duration: –${warningText}`;
+      return {
+        entries: '–',
+        groups: '–',
+        milestones: '–',
+        start: '–',
+        end: '–',
+        duration: '–',
+        warnings: warningCount,
+      };
    }

-    const { flatOrder } = state.preview.rundown;
+    const { entries, flatOrder } = state.preview.rundown;
    const { start, end, duration } = state.preview.summary;
-    return `entries: ${flatOrder.length} | start: ${millisToString(start)} | end: ${millisToString(end)} | duration: ${formatDuration(duration)}${warningText}`;
+    let groups = 0;
+    let milestones = 0;
+    for (const entryId of flatOrder) {
+      const entry = entries[entryId];
+      if (isOntimeGroup(entry)) groups++;
+      else if (isOntimeMilestone(entry)) milestones++;
+    }
+
+    return {
+      entries: flatOrder.length,
+      groups,
+      milestones,
+      start: removeTrailingZero(millisToString(start)),
+      end: removeTrailingZero(millisToString(end)),
+      duration: formatDuration(duration),
+      warnings: warningCount,
+    };
  })();

  return {
@@ -289,6 +350,10 @@ export function useSheetImportForm({
    isBusy,
    canPreview,
    displayError,
+    importMode,
+    setImportMode,
+    newRundownTitle,
+    setNewRundownTitle,
    handlePreviewSubmit: handleSubmit(handlePreview),
    handleExportSubmit: handleSubmit(handleExport),
    handleApply,
@@ -1,30 +1,17 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { CustomFields, ProjectRundowns } from 'ontime-types';
+import { RundownImportPayload } from 'ontime-types';
 import { useCallback } from 'react';

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

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

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

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

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

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

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

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

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

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

+function toFormValues(translation: Partial<TranslationObject>) {
+  const values: Record<string, string> = {};
+  Object.keys(langEn).forEach((key) => {
+    values[toFormKey(key)] = translation[key as keyof TranslationObject] || '';
+  });
+  return values;
+}
+
 function toFormKey(key: string) {
  return key.replace('.', '_');
 }
@@ -20,4 +20,5 @@
  border: 1px solid $gray-1100;
  border-radius: 3px;
  overflow: hidden;
+  height: 100%;
 }
@@ -7,7 +7,6 @@ export type SettingsOption = {
  id: string;
  label: string;
  secondary?: Readonly<SettingsOption[]>;
-  split?: boolean;
  highlight?: string;
 };

@@ -20,13 +19,13 @@ const staticOptions = [
      { id: 'settings__general', label: 'General settings' },
      { id: 'settings__view', label: 'View settings' },
      { id: 'settings__custom-views', label: 'Custom views' },
-      { id: 'settings__port', label: 'Server port' },
+      { id: 'settings__mcp', label: 'MCP Server' },
+      ...(isDocker ? [] : [{ id: 'settings__port', label: 'Server port' }]),
    ],
  },
  {
    id: 'project',
    label: 'Project',
-    split: true,
    secondary: [
      { id: 'project__create', label: 'Create...' },
      { id: 'project__list', label: 'Manage projects' },
@@ -46,7 +45,6 @@ const staticOptions = [
  {
    id: 'automation',
    label: 'Automation',
-    split: true,
    secondary: [
      { id: 'automation__settings', label: 'Automation settings' },
      { id: 'automation__automations', label: 'Manage automations' },
@@ -56,7 +54,6 @@ const staticOptions = [
  {
    id: 'sharing',
    label: 'Sharing and reporting',
-    split: true,
    secondary: [
      { id: 'sharing__presets', label: 'URL Presets' },
      {
@@ -69,7 +66,6 @@ const staticOptions = [
  {
    id: 'network',
    label: 'Network',
-    split: true,
    secondary: [
      {
        id: 'network__log',
@@ -84,12 +80,10 @@ const staticOptions = [
  {
    id: 'about',
    label: 'About',
-    split: true,
  },
  {
    id: 'shutdown',
    label: 'Shutdown',
-    split: true,
  },
 ] as const;

@@ -103,18 +97,12 @@ export function useAppSettingsMenu() {

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

@@ -73,6 +73,10 @@
  margin-right: 0.25rem;
 }

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

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

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

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

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

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

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

  return (
    <>
@@ -80,7 +88,9 @@ function RunningStatus({ startedAt, expectedFinish, playback }: RunningStatusPro
        <span className={style.time}>{started}</span>
      </span>
      <span className={style.finish}>
-        <span className={style.tag}>Expect end</span>
+        <span className={cx([style.tag, isOvertime && style.tagOvertime])}>
+          {isCountToEnd ? 'Scheduled end' : 'Expected end'}
+        </span>
        <span className={style.time}>{finish}</span>
      </span>
    </>
@@ -180,7 +180,13 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator

            return (
              <Fragment key={entry.id}>
-                <OperatorGroup key={entry.id} title={entry.title} />
+                <OperatorGroup
+                  key={entry.id}
+                  title={entry.title}
+                  colour={entry.colour}
+                  count={entry.entries.length}
+                  duration={entry.duration}
+                />
                {entry.entries.map((nestedEntryId) => {
                  const nestedEntry = rundown.entries[nestedEntryId];
                  if (!isOntimeEvent(nestedEntry)) {
@@ -217,6 +223,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                      isLinkedToLoaded={isLinkedToLoaded}
                      isSelected={isLoaded}
                      isPast={isPast}
+                      groupColour={entry.colour}
                      selectedRef={isLoaded ? selectedRef : undefined}
                      showStart={showStart}
                      subscribed={subscribedData}
@@ -22,17 +22,39 @@
    background-color: $gray-1250;
  }

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

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

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

+.live {
+  color: $ui-black;
+  background-color: $ui-white;
+}
+
+.due {
+  color: $ui-black;
+  background-color: $orange-500;
+}
+
+.done {
+  color: $white-60;
+  background-color: $white-7;
+}
+
 .runningTime {
  grid-area: running;
  font-size: 1.25rem;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	5cf36f049a	refactor(modal): allow wider modals	2026-07-25 14:28:45 +02:00
Carlos Valente	c6248b0c72	refactor(import): improve preview UI	2026-07-25 14:28:45 +02:00
Alex Christoffer Rasmussen	2a890cf2b3	fix: issue where a countToEnd would lead to incorrect expected times (#2149 ) * fix: issue where a count-to-end would lead to incorrect expected times * fix: include add time in overtime when countToEnd * fix: ui and server use same calculation for expected end	2026-07-25 11:22:24 +02:00
Carlos Valente	a8c611911d	refactor(rundown): new entries are appended to rundown	2026-07-22 07:17:39 +02:00
Carlos Valente	8363f06a5c	chore(rundown): improve documentation of insert logic	2026-07-22 07:17:39 +02:00
will@t1d.dev	5f040092cb	fix: timer-legacy view not served in desktop distributions The server serves html/timer-legacy.html and html/login.html from disk at runtime, relative to the bundled server. The Docker image copies these files but the electron packaging did not, so the view 404ed in all desktop distributions. Additionally, AppImages mount at /tmp/.mount_*, a hidden directory. Express sendFile refuses paths containing dot-segments by default (returns 404 without touching disk), so the view failed on Linux even with the file packaged. Allow dotfiles for this route; the request path is fixed so no user input is affected.	2026-07-19 10:02:45 +02:00
Carlos Valente	347c748dd9	feat(rundown): add shortcut to jump to current element	2026-07-18 17:03:02 +02:00
Carlos Valente	f234a1f892	fix(rundown): prevent skipped events from influencing day calculations	2026-07-18 16:52:36 +02:00
Carlos Valente	0c5e87b7e7	fix(ui): prevent warning indicator from overflowing container	2026-07-18 16:52:36 +02:00
Carlos Valente	64082ceac0	refactor(rundown): improve visibility of count to end	2026-07-18 16:45:55 +02:00
Carlos Valente	f598e8dab1	refactor(time control): improve handling of overtime and count to end	2026-07-18 16:45:55 +02:00
Carlos Valente	0c84a3ff9e	fix: delays account for midnight	2026-07-18 16:45:55 +02:00
Carlos Valente	c8760b5e9c	bump version to 4.11.0	2026-07-18 15:24:25 +02:00
Claude	34360a5b8f	feat(import): add merge strategy and new-rundown destination to spreadsheet import Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2026-07-17 22:26:19 +02:00
Claude	5e6debcce0	fix(views): center timer digits with flexbox for embedded browser compatibility The Stage Timer and PiP Timer views relied on `align-content: center` to vertically center the timer digits inside `.timer-container`, which is a plain block element. Aligning children of a block container via `align-content` only works in Chromium 123+ (Firefox 125+, Safari 17.4+). Embedded browsers such as vMix Browser Input (CEF V115) and other older CEF/Chromium-based production tools ignore the property, so the digits fall back to the top of the container while every other element renders correctly. Make `.timer-container` a real flex column and center with `justify-content: center`, which is universally supported and matches the centering approach used elsewhere in the codebase. The removed `justify-self`/`align-self` were no-ops on a full-width flex item. Fixes #2126 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014T6ENZ3r6JXZb1fpYw2oNY	2026-07-17 20:59:49 +02:00
Carlos Valente	c191786e50	refactor(navigation): clear params from editor drawer	2026-07-17 15:50:42 +02:00
Carlos Valente	6911e37c18	refactor(automation): improve automation UX	2026-07-17 10:53:45 +02:00
Claude	86b2132cdc	feat(automation): expose group title and allow setting secondary text Surface {{groupNow.*}} template variables (title, note, colour, times, custom fields) in the automation template autocomplete so events inside a group can reference their group. The runtime store already carries groupNow, so substitution and filters worked already; this makes it discoverable. Extend the message-secondary action with an optional text field so an automation can set the secondary message content, not just its source. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LZYPZVdZLWowU7DyzGkWyy	2026-07-17 10:53:45 +02:00
Carlos Valente	25f0dba83a	chore: add codegraph to gitignore	2026-07-16 10:46:10 +02:00
Carlos Valente	daa032e92c	ux(finder): add navigation shortcuts	2026-07-14 12:04:44 +02:00
Carlos Valente	ae65ec97d6	fix(shortcut): correct shortcut to delete	2026-07-14 12:04:44 +02:00
Carlos Valente	e7e4302100	refactor(shortcuts): improve readability of info element	2026-07-14 12:04:44 +02:00
Carlos Valente	7e7d35980a	refactor(op): improve status recognition	2026-07-14 11:58:59 +02:00
Carlos Valente	5001dda284	feat(op): add group visual relation	2026-07-14 11:58:59 +02:00
Carlos Valente	a75d35bdc0	refactor(op): improve delay indicator styles	2026-07-14 11:58:59 +02:00
Claude	2e631194e1	fix(ui): improve progress bar with local interpolation Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2026-07-14 11:25:22 +02:00
Carlos Valente	f39892dc6e	feat(navigation): persist view params customisation	2026-07-13 18:44:38 +02:00
Carlos Valente	6bcfd87851	refactor(rundown): show locked duration group indicator	2026-07-13 17:34:11 +02:00
Claude	4addb50ca4	feat(countdown): allow counting down to a group	2026-07-13 17:29:56 +02:00
Carlos Valente	161ab3fe13	refactor(timer): elapsed is active time from start	2026-07-13 15:34:31 +02:00
Carlos Valente	4f4626a163	refactor: allow larger settings panels	2026-07-13 15:33:23 +02:00
Claude	82d5f02ea0	refactor(mcp): guide agents through creating clean rundowns	2026-07-13 15:33:23 +02:00
Claude	05aaeddf22	resolver: drop dead ignoreDeprecations from tsconfig.dts.json Confirmed empirically that it now suppresses nothing under TS 7.0.2: compiling tsconfig.dts.json directly with this flag set to "6.0", "7.0", or removed entirely all produce identical (clean) output. It was a leftover suppression the previous tsdown mode never actually needed once nothing in the config triggers a deprecation warning.	2026-07-13 14:27:31 +02:00
Claude	949ab2b7dc	Upgrade TypeScript to 7.0.2 (native Go compiler) TypeScript 7 ships as a native Go binary and drastically trims the package's public JS API surface (no more `main`, and `exports['.']` now only resolves to lib/version.cjs) since the programmatic compiler API isn't stable again until 7.1. This broke apps/resolver's tsdown build, which used rolldown-plugin-dts' tsc-program mode (import ts from 'typescript'; ts.createProgram(...)) for declaration generation. Fix by switching that build to isolatedDeclarations, which lets rolldown-plugin-dts generate .d.ts via its oxc-based path instead of the TS compiler API entirely. That surfaced two isolatedDeclarations violations in ontime-types (array/Object.keys initializers lacking explicit annotations), fixed with explicit `string[]` types matching their existing inferred type. Also bumped tsdown to pick up its latest rolldown-plugin-dts, and disabled allowJs in tsconfig.dts.json since it's incompatible with isolatedDeclarations. Full workspace typecheck, lint, build, and test suite (1186 tests) pass under TypeScript 7.0.2.	2026-07-13 14:27:31 +02:00
Alex Christoffer Rasmussen	f12d3ca59c	Small cleanup (#2114 ) * refactor: propper memo for `ScheduleContext` value * chore: removed unused file `cuesheet.utils.ts` * fix: memoize event in ScheduleProvider	2026-07-11 22:20:32 +02:00
Carlos Valente	42147d4d5b	allow editing cuesheet link permissions	2026-07-01 13:24:47 +02:00
Carlos Valente	7850358039	bump ontime to version 4.10.0	2026-07-01 13:20:04 +02:00
Claude	52cae1e22f	feat(timeline): add group reference Co-authored-by: Carlos Valente <carlosvalente@pm.me>	2026-07-01 12:48:58 +02:00
Carlos Valente	48f9fb2609	expose mcp server in ontime	2026-07-01 12:48:40 +02:00
Carlos Valente	ce8a4d230b	refactor(translations): allow resetting to default values	2026-07-01 09:02:13 +02:00
Carlos Valente	1553573b94	feat(url-presets): allow presets to appear as nav menu items (#2110 )	2026-06-28 18:07:02 +02:00
Alex Christoffer Rasmussen	41a09bf5c3	fix: send refetch on all rundown edits (#2098 ) * fix(server): send refetch on all rundown edits * fix(test): cuesheet tabing * chore: remove unneeded async * refactor: small cleanups * chore: spelling Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> * chore: remove unneded async/await --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2026-06-20 12:21:11 +02:00
Claude	5dbe7afae8	feat(client): add rundown default to inherit parent group colour	2026-06-20 10:46:34 +02:00
Carlos Valente	6633cfc869	chore: minor server package upgrades	2026-06-20 09:15:23 +02:00
Carlos Valente	d127367df9	chore: minor client package upgrades	2026-06-20 09:15:23 +02:00
Carlos Valente	b21ec41ffd	chore: upgrade base-ui	2026-06-20 09:15:23 +02:00
Carlos Valente	66292bc0cf	chore: upgrade react packages	2026-06-20 09:15:23 +02:00
Alex Christoffer Rasmussen	b946b245c2	feat: create the first event from the cuesheet (#2105 ) * feat: create the first event from the cuesheet * chore: cleanup css * test: cuesheet beckground edit from empty state * feat: only show +event button when user is in edit mode and have full write perms	2026-06-17 22:31:13 +02:00
Carlos Valente	c238147b75	chore: bump node version	2026-06-11 18:58:00 +02:00
Alex Christoffer Rasmussen	5f33c993f6	bump: v4.9.0 (#2095 )	2026-06-07 13:53:25 +02:00
Carlos Valente	0e6d6cd416	refactor: allow secondary rundowns (#2086 ) * refactor: allow secondary rundowns * ui: move dropdown * feat: follow loaded * ui: background edit warning ui: fix disable radio button * feat(ui): add loaded sufix in the rundown list * feat(ui): add direct link to background edit from rundown manager * fix: better fallback * fix: default to is isCurrentRundown for nav bar colour * chore: rename navigate to cuesheet --------- Co-authored-by: alex-arc <ac@omnivox.dk>	2026-06-07 13:33:38 +02:00
Carlos Valente	199dea5df6	fix(cuesheet): prevent timer cells from submitting on tab-out or escape (#2083 )	2026-06-07 12:59:18 +02:00
Alex Christoffer Rasmussen	5a3ea9f7d0	fix: playwright ci test (#2094 )	2026-05-28 09:50:20 +02:00
Alex Christoffer Rasmussen	9ae49a7175	chore: pnpm 11 + dependency cleanup (#2089 ) * core: upgrade to pnpm 11 and nodejs to 22.22.2 * chore: allow builds * chore: remove unused * chore: update actions * chore: add stub for vitest * reafactor: small optimization	2026-05-17 21:01:16 +02:00
Carlos Valente	d30d9cfd4e	refactor: account for tick size on translate	2026-05-13 20:26:15 +02:00
Carlos Valente	a0e7b9b665	refactor: simplify spacing between help menu items	2026-05-13 20:26:15 +02:00
Carlos Valente	1dcb7fb08d	refactor: fix Info text flow	2026-05-13 20:26:15 +02:00
Carlos Valente	a7e84b9903	refactor: fixed css editor size	2026-05-13 20:26:15 +02:00
Carlos Valente	3bebbf9ce9	refactor: invalidate changed rundown	2026-05-11 21:25:15 +02:00
Carlos Valente	ab8da07518	refactor: improve memoisation on table rows	2026-05-11 21:25:15 +02:00
Carlos Valente	c8bae76121	refactor: add empty state for autoamtion form	2026-05-11 20:59:50 +02:00
Carlos Valente	2873698959	bump version to 4.8.0	2026-05-11 19:55:33 +02:00
Cameron Slipp	741ebef90e	refactor: improve automation UX	2026-05-11 19:55:01 +02:00
Claude	0741f46aca	feat: add self-contained legacy timer viewer for old browsers Adds timer-legacy.html — a zero-dependency static page that connects to the Ontime WebSocket and displays the live countdown for browsers that cannot parse the Vite-built React bundle (Safari < 14, Chrome < 85). Also adds a synchronous pre-React guard in index.html that redirects /timer visitors to the legacy page when Promise.any is unavailable, matching the Vite build target floor of Safari 14 / Chrome 85. https://claude.ai/code/session_013MfdwdjdDUnr3akpGSGXa4	2026-05-09 22:33:34 +02:00
Carlos Valente	5a33ffad92	refactor: improve background colour inheritance in safari	2026-05-09 22:32:04 +02:00
Claude	562f00dc7e	fix: add legacy plugin to support iOS 14	2026-05-09 22:31:30 +02:00
Carlos Valente	e50ab0150e	docs: add link to youtube	2026-05-09 22:25:32 +02:00
Joel Wetzell	fe44b33da2	Merge pull request #2078 from cpvalente/macos-icon refactor: icon compatibility with macos tahoe	2026-05-09 08:15:08 -05:00
Joel Wetzell	22e392ba9d	change macOS runner version in build workflow	2026-05-08 09:22:31 -05:00
Joel Wetzell	4997602e9b	refactor: icon compatibility with macos tahoe	2026-05-07 20:23:26 -05:00
Joel Wetzell	bdb8d4d89a	Merge pull request #2077 from cpvalente/update-electron-builder update electron-builder to v26.9.1	2026-05-07 16:24:39 -05:00
Joel Wetzell	b1d5ee12e4	update electron-builder to v26.9.1	2026-05-07 07:50:49 -05:00
Alex Christoffer Rasmussen	a5e733246d	fix: format clock from preset (#2066 ) * fix: format clock from preset * fix: add to all views * chore: format * refactor: return flat value from common.options.ts	2026-05-03 18:43:58 +02:00
Alex Christoffer Rasmussen	1a08b39b8b	feat: auto cue re-numbering (#2016 ) * feat: update auto cue numbering * feat: renumber from ui * refactor: patchEntries is not used * chore: format * fix: correct cue at top of group * fix: handle precision * refactor dialog * bump limit for performance time test * extract type * add class name to lable * fix rebase * refator: extract renumering logic * chore: comments for getIntegerAndFraction function * chore: add the for renumber mutation * fix: fraction match precision * refactor: small cleanup * refactor: use more narrow validator --------- Co-authored-by: alex-Arc <omnivox@LAPTOP-RC5SNBVV.localdomain>	2026-05-03 18:39:00 +02:00
Carlos Valente	ba1c3235b3	refactor: improve gsheet import UX	2026-05-03 18:17:17 +02:00
Alex Christoffer Rasmussen	7c1d2f4554	refactor: small cleanups (#2059 ) * refactor: remove unneeded async * chore: add express Router type to all routes * refactor: don't use index in react key * refactor: correctly get error message in excel route * refactor: avoid exporting muteable values	2026-04-26 17:32:50 +02:00
Alex Christoffer Rasmussen	23a44b2f04	refactor: improve the amount of GET requests for translation assets (#2058 ) * refactor: replace traslation hook refetch time with stale time * refactor: make it the service responsebillety to send refetch keys for asset changes	2026-04-14 09:30:27 +02:00
Carlos Valente	2d3c8e7eb2	chore: update CI actions	2026-04-09 21:30:27 +02:00
Carlos Valente	2f138acad7	fix: extracted rundown entry editor shows correct colour	2026-04-09 06:51:18 +02:00