refactor: improve groups and time end

- Tool handlers are now a typed map of thin translation wrappers: wire
  arguments are cast once at the boundary to types derived (Pick) from
  ontime-types, and all service calls are fully typed — a change to a
  service signature or domain type now fails compilation in api-mcp
  instead of drifting silently. No more 'as never' casts.
- Entry mutations target the loaded rundown explicitly, matching the
  rundownId-first service signatures introduced with secondary rundowns.
- Rundown create/rename/delete/duplicate call the rundown service;
  mcp.service.ts and its duplicated router logic are deleted.
- ontime_create_entry supports all entry types (event, delay, milestone,
  group) and entry tools accept flag and custom field values, matching
  what the workflow prompts already instruct agents to do. Tool names
  use entry terminology consistently with the service layer.
- ontime_create_project description fixed: creating a project switches
  to it.

https://claude.ai/code/session_01V27pYyjw2PGSWy7wNtiWKj

.github/workflows/build_cli.yml

@@ -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') }}

.github/workflows/build_docker.yml

@@ -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') }}

.github/workflows/build_electron.yml

@@ -7,19 +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') }}
@@ -29,11 +33,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
-
       - name: Electron - Build app
         env:
           APPLE_ID: ${{ secrets.APPLEID }}
@@ -44,8 +43,19 @@ jobs:
         run: pnpm dist-mac --env-mode=loose
         timeout-minutes: 60
 
+      - name: Upload macOS build artifacts
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: ontime-macos-build
+          path: |
+            ./apps/electron/dist/ontime-macOS-x64.dmg
+            ./apps/electron/dist/ontime-macOS-arm64.dmg
+          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-macOS-x64.dmg
@@ -57,24 +67,34 @@ 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
 
-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
-
       - name: Electron - Build app
         run: pnpm dist-win
 
+      - name: Upload Windows build artifacts
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: ontime-windows-build
+          path: |
+            ./apps/electron/dist/ontime-win64.exe
+            ./apps/electron/dist/win-unpacked/
+          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'
         env:
@@ -84,24 +104,35 @@ 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
 
-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
-
       - name: Electron - Build app
         run: pnpm dist-linux
 
+      - name: Upload Linux build artifacts
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: ontime-linux-build
+          path: |
+            ./apps/electron/dist/ontime-linux-x86_64.AppImage
+            ./apps/electron/dist/ontime-linux-arm64.AppImage
+            ./apps/electron/dist/ontime-linux-armv7l.AppImage
+          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-linux-x86_64.AppImage

.github/workflows/build_resolver.yml

@@ -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') }}

.github/workflows/test.yml

@@ -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') }}
@@ -33,6 +37,9 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       # Run code quality
+      - name: Run formatter
+        run: pnpm format:check
+
       - name: Run linter
         run: pnpm lint
 
@@ -49,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') }}
@@ -71,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/

.gitignore

@@ -38,6 +38,7 @@ dist/
 # bundled assets
 translations.json
 override.css
+**/external/demo/index.html
 
 # working stuff
 **/TODO.md
@@ -53,3 +54,6 @@ ontime-data/
 
 # temporary write files
 **.tmp
+
+# Claude Code metadata
+.claude/

.nvmrc

@@ -1 +1 @@
-v22.15.1
+v22.22.3

DEVELOPMENT.md

@@ -99,6 +99,13 @@ Other useful commands
 - **List running processes** by running `docker ps`
 - **Kill running process** by running `docker kill <process-id>`
 
+## FORMATTING AND LINTING
+
+Ontime uses [oxfmt](https://oxc.rs/docs/guide/usage/formatter.html) for formatting and [oxlint](https://oxc.rs/docs/guide/usage/linter.html) for linting. Look for an [oxc extension](https://oxc.rs/docs/guide/usage/linter/editors) for your editor of choice.
+
+- **Run formatter** by running `pnpm format`
+- **Run linter** by running `pnpm lint`
+
 ## CONTRIBUTION GUIDELINES
 
 If you want to propose changes to the codebase, please reach out before opening a Pull Request.

Dockerfile

@@ -1,4 +1,4 @@
-ARG NODE_VERSION=22.15.1
+ARG NODE_VERSION=22.22.2
 FROM node:${NODE_VERSION}-alpine
 
 # Set environment variables

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getontime/cli",
-  "version": "4.5.0",
+  "version": "4.9.0",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

apps/client/index.html

@@ -3,20 +3,28 @@
   <head>
     <meta charset="utf-8" />
     <base href="/" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="favicon.ico" />
+    <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" />
-    <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" />
-    <link rel="manifest" href="/manifest.json" />
+    <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" />
+    <link rel="manifest" href="manifest.json" />
     <meta name="robots" content="noindex" />
     <title>ontime</title>
   </head>
   <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>

apps/client/package.json

@@ -1,36 +1,38 @@
 {
   "name": "ontime-ui",
-  "version": "4.5.0",
+  "version": "4.9.0",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui/react": "1.0.0",
+    "@base-ui/react": "1.6.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-css": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
     "@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.10",
     "autosize": "^6.0.1",
-    "axios": "^1.12.2",
+    "axios": "^1.18.0",
     "csv-stringify": "^6.6.0",
-    "prismjs": "^1.30.0",
-    "react": "^19.2.3",
-    "react-colorful": "^5.6.1",
-    "react-dom": "^19.2.3",
+    "qrcode": "^1.5.4",
+    "react": "^19.2.7",
+    "react-colorful": "^5.7.0",
+    "react-dom": "^19.2.7",
     "react-fast-compare": "^3.2.2",
-    "react-hook-form": "^7.62.0",
-    "react-icons": "5.5.0",
-    "react-qr-code": "^2.0.18",
-    "react-router": "^7.11.0",
-    "react-simple-code-editor": "^0.14.1",
-    "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",
@@ -48,7 +50,8 @@
     "production": [
       ">0.2%",
       "not dead",
-      "not op_mini all"
+      "not op_mini all",
+      "safari >= 14.1"
     ],
     "development": [
       "last 1 chrome version",
@@ -57,20 +60,21 @@
     ]
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "^2.16.1",
-    "@types/prismjs": "^1.26.5",
+    "@sentry/vite-plugin": "5.1.1",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "4.5.1",
+    "@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",
     "typescript": "catalog:",
-    "vite": "6.3.1",
-    "vite-plugin-compression2": "2.2.0",
-    "vite-plugin-svgr": "4.3.0",
-    "vite-tsconfig-paths": "5.1.4",
+    "vite": "8.0.1",
+    "vite-plugin-compression2": "2.5.1",
+    "vite-plugin-svgr": "4.5.0",
     "vitest": "catalog:"
   }
 }

apps/client/public/manifest.json

@@ -11,9 +11,9 @@
       "type": "image/png"
     }
   ],
-  "scope": "/",
-  "start_url": "/",
+  "scope": "./",
+  "start_url": "./",
   "display": "",
   "theme_color": "#121212",
-  "background_color": "#ffffff"
+  "background_color": "#101010"
 }

apps/client/public/site.webmanifest

@@ -1,8 +1,8 @@
 {
   "name": "",
   "short_name": "",
-  "icons": [{ "src": "/ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
-  "theme_color": "#2B5ABC",
+  "icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
+  "theme_color": "#121212",
   "background_color": "#101010",
   "display": "standalone"
 }

apps/client/src/common/api/constants.ts

@@ -3,16 +3,21 @@ import { serverURL } from '../../externals';
 // keys in tanstack store
 export const APP_INFO = ['appinfo'];
 export const APP_SETTINGS = ['appSettings'];
+export const APP_SERVER_PORT = ['appServerPort'];
 export const APP_VERSION = ['appVersion'];
 export const AUTOMATION = ['automation'];
 export const CUSTOM_FIELDS = ['customFields'];
+export const CUSTOM_VIEWS = ['customViews'];
 export const PROJECT_DATA = ['project'];
 export const PROJECT_LIST = ['projectList'];
 export const PROJECT_RUNDOWNS = ['projectRundowns'];
 export const RUNDOWN = ['rundown'];
+export const CURRENT_RUNDOWN_QUERY_KEY = ['rundown', 'current'];
+export const getRundownQueryKey = (rundownId: string) => ['rundown', rundownId];
 export const RUNTIME = ['runtimeStore'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
+export const CSS_OVERRIDE = ['cssOverride'];
 export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
 export const TRANSLATION = ['translation'];
@@ -21,9 +26,7 @@ export const TRANSLATION = ['translation'];
 export const apiEntryUrl = `${serverURL}/data`;
 
 const userAssetsPath = 'user';
-const cssOverridePath = 'styles/override.css';
 const customTranslationsPath = 'translations/translations.json';
 
-export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
 export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
 export const customTranslationsURL = `${serverURL}/${userAssetsPath}/${customTranslationsPath}`;

apps/client/src/common/api/customViews.ts

@@ -0,0 +1,58 @@
+import axios from 'axios';
+import { type CustomViewsListResponse, type MessageResponse } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
+import { downloadBlob } from './utils';
+
+const customViewsPath = `${apiEntryUrl}/custom-views`;
+
+export async function getCustomViews(options?: RequestOptions): Promise<CustomViewsListResponse> {
+  const response = await axios.get<CustomViewsListResponse>(customViewsPath, {
+    signal: options?.signal,
+    timeout: options?.timeout ?? axiosConfig.shortTimeout,
+  });
+  return response.data;
+}
+
+export async function uploadCustomView(slug: string, file: File, options?: RequestOptions): Promise<MessageResponse> {
+  const formData = new FormData();
+  formData.append('indexHtml', file);
+
+  return (
+    await axios.post<MessageResponse>(`${customViewsPath}/${encodeURIComponent(slug)}/upload`, formData, {
+      signal: options?.signal,
+      timeout: options?.timeout ?? axiosConfig.longTimeout,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+  ).data;
+}
+
+export async function downloadCustomView(slug: string, options?: RequestOptions): Promise<void> {
+  const response = await axios.get(`${customViewsPath}/${encodeURIComponent(slug)}/download`, {
+    signal: options?.signal,
+    timeout: options?.timeout ?? axiosConfig.longTimeout,
+    responseType: 'blob',
+  });
+
+  downloadBlob(response.data, `${slug}-index.html`);
+}
+
+export async function restoreDemoView(options?: RequestOptions): Promise<MessageResponse> {
+  return (
+    await axios.post<MessageResponse>(`${customViewsPath}/restore-demo`, null, {
+      signal: options?.signal,
+      timeout: options?.timeout ?? axiosConfig.longTimeout,
+    })
+  ).data;
+}
+
+export async function deleteCustomView(slug: string, options?: RequestOptions): Promise<void> {
+  await axios.delete(`${customViewsPath}/${encodeURIComponent(slug)}`, {
+    signal: options?.signal,
+    timeout: options?.timeout ?? axiosConfig.longTimeout,
+  });
+}

apps/client/src/common/api/excel.ts

@@ -1,5 +1,9 @@
 import axios, { AxiosResponse } from 'axios';
-import { CustomFields, Rundown, RundownSummary } from 'ontime-types';
+import type {
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+  SpreadsheetWorksheetOptions,
+} from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
@@ -11,12 +15,12 @@ const excelPath = `${apiEntryUrl}/excel`;
 
 /**
  * upload Excel file to server
- * @return string - file ID op the uploaded file
+ * Uploads an Excel file and returns worksheet names plus metadata for the initial worksheet.
  */
-export async function upload(file: File, requestOptions?: RequestOptions): Promise<string[]> {
+export async function upload(file: File, requestOptions?: RequestOptions): Promise<SpreadsheetWorksheetOptions> {
   const formData = new FormData();
   formData.append('excel', file);
-  const response = await axios.post(`${excelPath}/upload`, formData, {
+  const response: AxiosResponse<SpreadsheetWorksheetOptions> = await axios.post(`${excelPath}/upload`, formData, {
     signal: requestOptions?.signal,
     timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
     headers: {
@@ -26,16 +30,11 @@ export async function upload(file: File, requestOptions?: RequestOptions): Promi
   return response.data;
 }
 
-type PreviewSpreadsheetResponse = {
-  rundown: Rundown;
-  customFields: CustomFields;
-  summary: RundownSummary;
-};
 export async function importRundownPreview(
   options: ImportMap,
   requestOptions?: RequestOptions,
-): Promise<PreviewSpreadsheetResponse> {
-  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(
+): Promise<SpreadsheetPreviewResponse> {
+  const response: AxiosResponse<SpreadsheetPreviewResponse> = await axios.post(
     `${excelPath}/preview`,
     {
       options,
@@ -48,6 +47,22 @@ export async function importRundownPreview(
   return response.data;
 }
 
+export async function getWorksheetMetadata(
+  worksheet: string,
+  requestOptions?: RequestOptions,
+): Promise<SpreadsheetWorksheetMetadata> {
+  const response: AxiosResponse<SpreadsheetWorksheetMetadata> = await axios.post(
+    `${excelPath}/metadata`,
+    { worksheet },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
+
+  return response.data;
+}
+
 /**
  * Downloads a xlsx representation of the rundown from the server
  */

apps/client/src/common/api/project.ts

@@ -21,8 +21,9 @@ export async function getProjectData(options?: RequestOptions): Promise<ProjectD
 /**
  * HTTP request to mutate project data
  */
-export async function postProjectData(data: ProjectData): Promise<AxiosResponse<ProjectData>> {
-  return axios.post(projectPath, data);
+export async function postProjectData(data: ProjectData): Promise<ProjectData> {
+  const response = await axios.post(projectPath, data);
+  return response.data;
 }
 
 /**

apps/client/src/common/api/rundown.ts

@@ -1,5 +1,13 @@
 import axios, { AxiosResponse } from 'axios';
-import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, TransientEventPayload } from 'ontime-types';
+import {
+  EntryId,
+  OntimeEntry,
+  OntimeEvent,
+  ProjectRundownsList,
+  RenumberCues,
+  Rundown,
+  TransientEventPayload,
+} from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 import type { RequestOptions } from './requestOptions';
@@ -26,19 +34,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;
 }
 
 /**
@@ -111,6 +117,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 +195,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'
+  );
+}

apps/client/src/common/api/settings.ts

@@ -31,8 +31,8 @@ export async function postShowWelcomeDialog(show: boolean) {
 /**
  * HTTP request to retrieve server port
  */
-export async function getServerPort(): Promise<PortInfo> {
-  const res = await axios.get(`${settingsPath}/serverport`);
+export async function getServerPort(options?: RequestOptions): Promise<PortInfo> {
+  const res = await axios.get(`${settingsPath}/serverport`, { signal: options?.signal });
   return res.data;
 }
 

apps/client/src/common/api/sheets.ts

@@ -1,5 +1,10 @@
 import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, Rundown, RundownSummary } from 'ontime-types';
+import type {
+  AuthenticationStatus,
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+  SpreadsheetWorksheetOptions,
+} from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
@@ -59,11 +64,7 @@ export const previewRundown = async (
   sheetId: string,
   options: ImportMap,
   requestOptions?: RequestOptions,
-): Promise<{
-  rundown: Rundown;
-  customFields: CustomFields;
-  summary: RundownSummary;
-}> => {
+): Promise<SpreadsheetPreviewResponse> => {
   const response = await axios.post(
     `${sheetsPath}/${sheetId}/read`,
     { options },
@@ -75,11 +76,40 @@ export const previewRundown = async (
   return response.data;
 };
 
-export const getWorksheetNames = async (sheetId: string, requestOptions?: RequestOptions): Promise<string[]> => {
-  const response: AxiosResponse<string[]> = await axios.post(`${sheetsPath}/${sheetId}/worksheets`, undefined, {
-    signal: requestOptions?.signal,
-    timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
-  });
+/**
+ * Fetches derived metadata for a single worksheet by reading its rows and detecting headers.
+ */
+export const getWorksheetMetadata = async (
+  sheetId: string,
+  worksheet: string,
+  requestOptions?: RequestOptions,
+): Promise<SpreadsheetWorksheetMetadata> => {
+  const response: AxiosResponse<SpreadsheetWorksheetMetadata> = await axios.post(
+    `${sheetsPath}/${sheetId}/metadata`,
+    { worksheet },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
+  return response.data;
+};
+
+/**
+ * Fetches the available worksheets for a Google Sheet. Metadata is loaded lazily per worksheet.
+ */
+export const getWorksheetOptions = async (
+  sheetId: string,
+  requestOptions?: RequestOptions,
+): Promise<SpreadsheetWorksheetOptions> => {
+  const response: AxiosResponse<SpreadsheetWorksheetOptions> = await axios.post(
+    `${sheetsPath}/${sheetId}/worksheet-options`,
+    undefined,
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 };
 

apps/client/src/common/components/autocomplete-input/AutocompleteInput.module.scss

@@ -0,0 +1,61 @@
+.positioner {
+  outline: 0;
+}
+
+.popup {
+  font-size: 1rem;
+  box-sizing: border-box;
+  padding: 2px;
+  min-width: var(--anchor-width);
+  max-width: var(--available-width);
+  border: 1px solid $gray-1000;
+  border-radius: $component-border-radius-md;
+  background-color: $gray-1200;
+  color: $ui-white;
+
+  &[data-empty][data-hide-empty] {
+    display: none;
+  }
+}
+
+.list {
+  box-sizing: border-box;
+  max-height: 20rem;
+  max-height: var(--available-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-block: 0.25rem;
+  scroll-padding-block: 1.5rem;
+  outline: 0;
+}
+
+.item,
+.empty:not(:empty) {
+  box-sizing: border-box;
+  padding: 0.25rem 0.5rem;
+  line-height: 1rem;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  outline: 0;
+  cursor: default;
+  user-select: none;
+  overflow-wrap: break-word;
+
+  &[data-highlighted] {
+    background-color: $blue-700;
+  }
+}
+
+.itemLabel {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.empty {
+  color: $gray-400;
+}

apps/client/src/common/components/autocomplete-input/AutocompleteInput.tsx

@@ -0,0 +1,121 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import type { ReactNode, Ref } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+import type { InputProps } from '../input/input/Input';
+import { getScrollParent } from './autocompleteInput.utils';
+
+import inputStyles from '../input/input/Input.module.scss';
+import styles from './AutocompleteInput.module.scss';
+
+export interface AutocompleteInputProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {
+  options: string[];
+  value: string;
+  onValueChange: (value: string) => void;
+  emptyLabel?: string;
+  trailingElement?: (option: string) => ReactNode;
+  inputRef?: Ref<HTMLInputElement>;
+  openOnFocus?: boolean;
+}
+
+export default function AutocompleteInput({
+  className,
+  disabled,
+  emptyLabel,
+  fluid,
+  height = 'medium',
+  inputRef,
+  onValueChange,
+  options,
+  openOnFocus = false,
+  trailingElement,
+  value,
+  variant = 'subtle',
+  ...inputProps
+}: AutocompleteInputProps) {
+  const internalInputRef = useRef<HTMLInputElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const { onFocus, ...restInputProps } = inputProps;
+
+  const handleInputRef = (node: HTMLInputElement | null) => {
+    internalInputRef.current = node;
+
+    if (!inputRef) {
+      return;
+    }
+
+    if (typeof inputRef === 'function') {
+      inputRef(node);
+      return;
+    }
+
+    inputRef.current = node;
+  };
+
+  // close the popover when the parent scrollable container scrolls or the window resizes
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const scrollTarget = getScrollParent(internalInputRef.current);
+    const handleScroll = () => setOpen(false);
+
+    scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleScroll, { passive: true });
+
+    return () => {
+      scrollTarget.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [open]);
+
+  return (
+    <BaseAutocomplete.Root
+      items={options}
+      autoHighlight
+      highlightItemOnHover
+      disabled={disabled}
+      open={open}
+      value={value}
+      onOpenChange={setOpen}
+      onValueChange={onValueChange}
+    >
+      <BaseAutocomplete.Input
+        ref={handleInputRef}
+        onFocus={(event) => {
+          onFocus?.(event);
+          if (openOnFocus) {
+            setOpen(true);
+          }
+        }}
+        className={cx([
+          inputStyles.input,
+          inputStyles[variant],
+          inputStyles[height],
+          fluid && inputStyles.fluid,
+          className,
+        ])}
+        {...restInputProps}
+      />
+      <BaseAutocomplete.Portal>
+        <BaseAutocomplete.Positioner side='bottom' align='start' className={styles.positioner}>
+          <BaseAutocomplete.Popup className={styles.popup} data-hide-empty={emptyLabel ? undefined : ''}>
+            <BaseAutocomplete.List className={styles.list}>
+              <BaseAutocomplete.Collection>
+                {(option: string) => (
+                  <BaseAutocomplete.Item key={option} value={option} className={styles.item}>
+                    <span className={styles.itemLabel}>{option}</span>
+                    {trailingElement?.(option)}
+                  </BaseAutocomplete.Item>
+                )}
+              </BaseAutocomplete.Collection>
+              {emptyLabel && <BaseAutocomplete.Empty className={styles.empty}>{emptyLabel}</BaseAutocomplete.Empty>}
+            </BaseAutocomplete.List>
+          </BaseAutocomplete.Popup>
+        </BaseAutocomplete.Positioner>
+      </BaseAutocomplete.Portal>
+    </BaseAutocomplete.Root>
+  );
+}

apps/client/src/common/components/autocomplete-input/autocompleteInput.utils.ts

@@ -0,0 +1,14 @@
+export function getScrollParent(node: HTMLElement | null): HTMLElement | Window {
+  let parent = node?.parentElement ?? null;
+
+  while (parent) {
+    const { overflowY } = window.getComputedStyle(parent);
+    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+      return parent;
+    }
+
+    parent = parent.parentElement;
+  }
+
+  return window;
+}

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -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 });

apps/client/src/common/components/info/Info.module.scss

@@ -16,6 +16,33 @@
   }
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.title,
+.body {
+  margin: 0;
+}
+
+.title {
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.body {
+  color: $gray-400;
+  line-height: 1.5;
+}
+
+.footer {
+  width: fit-content;
+}
+
 .info {
   svg {
     color: $info-blue;

apps/client/src/common/components/info/Info.tsx

@@ -10,13 +10,37 @@ interface InfoProps {
   type?: 'info' | 'warning' | 'error';
 }
 
-export default function Info({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
+interface InfoSectionProps {
+  className?: string;
+}
+
+function InfoTitle({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <p className={cx([style.title, className])}>{children}</p>;
+}
+
+function InfoBody({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <p className={cx([style.body, className])}>{children}</p>;
+}
+
+function InfoFooter({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <div className={cx([style.footer, className])}>{children}</div>;
+}
+
+function InfoRoot({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
   return (
     <div className={cx([style.infoLabel, style[type], className])}>
       {type === 'info' && <IoAlertCircle />}
       {type === 'warning' && <IoWarning />}
       {type === 'error' && <IoWarning />}
-      <div>{children}</div>
+      <div className={style.content}>{children}</div>
     </div>
   );
 }
+
+const Info = Object.assign(InfoRoot, {
+  Title: InfoTitle,
+  Body: InfoBody,
+  Footer: InfoFooter,
+});
+
+export default Info;

apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx

@@ -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,

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -1,7 +1,8 @@
 import { millisToString, parseUserTime } from 'ontime-utils';
-import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { cx } from '../../../utils/styleUtils';
+import { formatTime, getFormatFromSettings } from '../../../utils/time';
 import Input from '../input/Input';
 
 import style from './TimeInput.module.scss';
@@ -16,6 +17,7 @@ interface TimeInputProps<T extends string> {
   align?: 'left' | 'center';
   delayed?: boolean;
   className?: string;
+  shouldFormat?: boolean;
 }
 
 export default function TimeInput<T extends string>({
@@ -28,10 +30,12 @@ export default function TimeInput<T extends string>({
   align = 'center',
   delayed,
   className,
+  shouldFormat,
 }: TimeInputProps<T>) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
   const ignoreChange = useRef(false);
+  const formatAs12Hr = useMemo(() => shouldFormat && getFormatFromSettings() === '12', [shouldFormat]);
 
   /**
    * @description Resets input value to given
@@ -39,10 +43,12 @@ export default function TimeInput<T extends string>({
   const resetValue = useCallback(() => {
     if (typeof time !== 'number' || isNaN(time)) {
       setValue('00:00:00');
+    } else if (shouldFormat) {
+      setValue(formatTime(time));
     } else {
       setValue(millisToString(time));
     }
-  }, [time]);
+  }, [time, shouldFormat]);
 
   /**
    * @description Selects input text on focus
@@ -139,9 +145,10 @@ export default function TimeInput<T extends string>({
       onBlur={onBlurHandler}
       onKeyDown={onKeyDownHandler}
       value={value}
-      maxLength={8}
+      maxLength={formatAs12Hr ? 11 : 8}
       style={{
         textAlign: align,
+        width: formatAs12Hr ? '7.5em' : '6.5em',
       }}
     />
   );

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

@@ -11,12 +11,22 @@
 
   background-color: $gray-1250;
   color: $ui-white;
-  border-radius: 3px;
+  border-radius: $component-border-radius-md;
   box-shadow: $box-shadow-l1;
   border: 1px solid $gray-1100;
   outline: none;
 }
 
+.wide {
+  top: 4vh;
+  min-width: min(1280px, 96vw);
+  max-width: min(1600px, 96vw);
+  height: 88vh;
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+}
+
 .backdrop {
   position: fixed;
   inset: 0;
@@ -30,8 +40,6 @@
 }
 
 .title {
-  font-size: 1rem;
-  font-weight: 600;
   padding-block: 1rem;
 
   display: flex;
@@ -39,6 +47,11 @@
   justify-content: space-between;
 }
 
+.titleText {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
 .body {
   display: flex;
   flex-direction: column;
@@ -48,6 +61,13 @@
   overflow-y: auto;
 }
 
+.wide .body {
+  flex: 1;
+  min-height: 0;
+  max-height: none;
+  overflow: hidden;
+}
+
 .footer {
   padding-block: 1rem;
   display: flex;

apps/client/src/common/components/modal/Modal.tsx

@@ -2,6 +2,7 @@ import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import type { ReactNode } from 'react';
 import { IoClose } from 'react-icons/io5';
 
+import { cx } from '../../utils/styleUtils';
 import IconButton from '../buttons/IconButton';
 
 import style from './Modal.module.scss';
@@ -11,6 +12,7 @@ interface ModalProps {
   title?: string;
   showCloseButton?: boolean;
   showBackdrop?: boolean;
+  size?: 'default' | 'wide';
   bodyElements: ReactNode;
   footerElements?: ReactNode;
   onClose: () => void;
@@ -21,6 +23,7 @@ export default function Modal({
   title,
   showCloseButton,
   showBackdrop,
+  size = 'default',
   bodyElements,
   footerElements,
   onClose,
@@ -35,9 +38,9 @@ export default function Modal({
     >
       <BaseDialog.Portal>
         {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
-        <BaseDialog.Popup className={style.modal}>
+        <BaseDialog.Popup aria-label={title} className={cx([style.modal, size === 'wide' && style.wide])}>
           <div className={style.title}>
-            {title}
+            {title ? <BaseDialog.Title className={style.titleText}>{title}</BaseDialog.Title> : <div />}
             {showCloseButton && (
               <IconButton variant='subtle-white' onClick={onClose}>
                 <IoClose />
@@ -45,7 +48,7 @@ export default function Modal({
             )}
           </div>
           <div className={style.body}>{bodyElements}</div>
-          <div className={style.footer}>{footerElements}</div>
+          {footerElements ? <div className={style.footer}>{footerElements}</div> : null}
         </BaseDialog.Popup>
       </BaseDialog.Portal>
     </BaseDialog.Root>

apps/client/src/common/components/qr-code/QrCode.module.scss

@@ -0,0 +1,22 @@
+@use '@/theme/viewerDefs' as *;
+
+.square {
+  border-radius: $component-border-radius-sm;
+  background-color: $viewer-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blink {
+  animation: blink 1s ease-in-out infinite alternate;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 10%;
+  }
+  100% {
+    opacity: 100%;
+  }
+}

apps/client/src/common/components/qr-code/QrCode.tsx

@@ -0,0 +1,43 @@
+import { toString } from 'qrcode';
+import { Suspense, use } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './QrCode.module.scss';
+
+interface QRCodeProps {
+  value: string;
+  size: number;
+}
+
+export default function QRCode({ value, size }: QRCodeProps) {
+  'use memo';
+  const svgPromise = toString(value, {
+    width: size,
+    margin: 2,
+    color: { dark: '#101010', light: '#cfcfcf' },
+  });
+
+  return (
+    <Suspense fallback={<QrFallback size={size} />}>
+      <QrSvg svgPromise={svgPromise} size={size} />
+    </Suspense>
+  );
+}
+
+function QrFallback({ size }: { size: number }) {
+  'use memo';
+  return <span style={{ width: size + 2, height: size + 2 }} className={cx([style.blink, style.square])} />;
+}
+
+function QrSvg({ svgPromise, size }: { svgPromise: Promise<string>; size: number }) {
+  'use memo';
+  const svg = use(svgPromise);
+  return (
+    <span
+      className={style.square}
+      style={{ width: size + 2, height: size + 2 }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

apps/client/src/common/components/select/Select.module.scss

@@ -125,6 +125,11 @@
   font-size: 0.5rem;
   display: grid;
   place-content: center;
+  visibility: hidden;
+
+  &[data-visible] {
+    visibility: visible;
+  }
 
   &::before {
     content: '';

apps/client/src/common/components/select/Select.tsx

@@ -29,7 +29,7 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
       </BaseSelect.Trigger>
       <BaseSelect.Portal>
         <BaseSelect.Positioner side='bottom' align='start'>
-          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
+          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} keepMounted />
           <BaseSelect.Popup className={styles.popup}>
             <BaseSelect.Arrow />
             <BaseSelect.List className={styles.list}>
@@ -43,7 +43,7 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
               ))}
             </BaseSelect.List>
           </BaseSelect.Popup>
-          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
+          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} keepMounted />
         </BaseSelect.Positioner>
       </BaseSelect.Portal>
     </BaseSelect.Root>

apps/client/src/common/components/state/EmptyTableBody.module.scss

@@ -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 {

apps/client/src/common/components/state/EmptyTableBody.tsx

@@ -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>

apps/client/src/common/components/tag/Tag.module.scss

@@ -1,9 +1,17 @@
 .tag {
   font-size: calc(1rem - 3px);
   letter-spacing: 0.5px;
-  background-color: $gray-900;
-  color: $ui-white;
   border-radius: 2px;
   padding: 0 0.25rem;
   white-space: nowrap;
 }
+
+.default {
+  background-color: $gray-900;
+  color: $ui-white;
+}
+
+.warning {
+  background-color: $orange-1300;
+  color: $orange-300;
+}

apps/client/src/common/components/tag/Tag.tsx

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
 
+import { cx } from '../../utils/styleUtils';
+
 import style from './Tag.module.scss';
 
 interface TagProps {
   className?: string;
+  variant?: 'default' | 'warning';
 }
 
-export default function Tag({ className, children }: PropsWithChildren<TagProps>) {
-  return <span className={`${style.tag} ${className || ''}`}>{children}</span>;
+export default function Tag({ className, variant = 'default', children }: PropsWithChildren<TagProps>) {
+  return <span className={cx([style.tag, style[variant], className])}>{children}</span>;
 }

apps/client/src/common/components/view-params-editor/ViewParamsSection.tsx

@@ -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} />;
       })}
     </>
   );

apps/client/src/common/components/view-params-editor/common.options.ts

@@ -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');
+}

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

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { MILLIS_PER_HOUR } from 'ontime-utils';
+
+import { getCSSContents } from '../api/assets';
+import { CSS_OVERRIDE } from '../api/constants';
+
+export default function useCssOverride(enabled: boolean) {
+  const { data, status } = useQuery({
+    queryKey: CSS_OVERRIDE,
+    queryFn: ({ signal }) => getCSSContents({ signal }),
+    staleTime: MILLIS_PER_HOUR,
+    enabled,
+  });
+
+  return {
+    data: data ?? '',
+    status,
+  };
+}

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

@@ -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 };
 }

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

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { type CustomViewsListResponse } from 'ontime-types';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { CUSTOM_VIEWS } from '../api/constants';
+import { getCustomViews } from '../api/customViews';
+
+const placeholderCustomViews: CustomViewsListResponse = {
+  views: [],
+};
+
+export default function useCustomViews() {
+  const { data, status, refetch } = useQuery({
+    queryKey: CUSTOM_VIEWS,
+    queryFn: ({ signal }) => getCustomViews({ signal }),
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data: data ?? placeholderCustomViews, status, refetch };
+}

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

@@ -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
  */

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

@@ -1,12 +1,13 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { RUNDOWN } from '../api/constants';
-import { fetchCurrentRundown } from '../api/rundown';
+import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
 
 // revision is -1 so that the remote revision is higher
 const cachedRundownPlaceholder: Rundown = {
@@ -19,15 +20,36 @@ 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();
+  const {
+    data: { loaded: loadedRundownId },
+  } = useProjectRundowns();
+
   const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: RUNDOWN,
+    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
     queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
     refetchInterval: queryRefetchIntervalSlow,
   });
 
+  // Seed the id-keyed cache when fetching via the bootstrap alias
+  useEffect(() => {
+    if (!data || loadedRundownId) return;
+    queryClient.setQueryData(getRundownQueryKey(data.id), data);
+  }, [data, loadedRundownId, queryClient]);
+
+  // Once we have the ID, drop the temporary current cache
+  useEffect(() => {
+    if (!loadedRundownId) return;
+    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }, [loadedRundownId, queryClient]);
+
   return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 
@@ -88,3 +110,30 @@ export function useEntry(entryId: EntryId | null): OntimeEntry | null {
   if (entryId === null) return null;
   return rundown.entries[entryId] ?? null;
 }
+
+export function useRundownAuxData() {
+  const { data, status } = useRundown();
+  const filteredData = useMemo(() => {
+    const { title, id } = data;
+    return { title, id };
+  }, [data]);
+  return { data: filteredData, status };
+}
+
+/**
+ * Provides access to a specific rundown by ID.
+ * When rundownId is null/undefined the query is disabled and returns the placeholder.
+ */
+export function useRundownById(rundownId: string | null | undefined) {
+  const enabled = Boolean(rundownId);
+
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: getRundownQueryKey(rundownId ?? ''),
+    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
+    enabled,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+}

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

@@ -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],
+  );
+}

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

@@ -0,0 +1,36 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { PortInfo } from 'ontime-types';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { APP_SERVER_PORT } from '../api/constants';
+import { getServerPort, postServerPort } from '../api/settings';
+import { ontimeQueryClient } from '../queryClient';
+
+const serverPortPlaceholder: PortInfo = {
+  port: 4001,
+  pendingRestart: false,
+};
+
+export default function useServerPort() {
+  const { data, status, isError, refetch } = useQuery<PortInfo>({
+    queryKey: APP_SERVER_PORT,
+    queryFn: ({ signal }) => getServerPort({ signal }),
+    placeholderData: (previousData) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  const { mutateAsync } = useMutation({
+    mutationFn: async (serverPort: number) => {
+      const response = await postServerPort(serverPort);
+      return response.data;
+    },
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: APP_SERVER_PORT });
+    },
+    onSuccess: (newData) => {
+      ontimeQueryClient.setQueryData(APP_SERVER_PORT, newData);
+    },
+  });
+
+  return { data: data ?? serverPortPlaceholder, status, isError, refetch, mutateAsync };
+}

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

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useRuntimeStore } from '../stores/runtime';
+
+const takeOverTimeMs = 1500;
+
+/**
+ * Keeps the clock value ticking if the server drops updates
+ */
+export function useAutoTickingClock(): number {
+  const clock = useRuntimeStore((state) => state.clock);
+
+  const baselineRef = useRef({ clock, time: performance.now() });
+  const [, setTick] = useState(0);
+
+  // Update baseline when server clock changes
+  useEffect(() => {
+    baselineRef.current = { clock, time: performance.now() };
+  }, [clock]);
+
+  // Force periodic re-renders
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Always derive from baseline + elapsed at render time
+  const elapsed = performance.now() - baselineRef.current.time;
+  if (elapsed < takeOverTimeMs) {
+    return clock;
+  }
+  return baselineRef.current.clock + Math.round(elapsed);
+}

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

@@ -9,12 +9,14 @@ import {
   OntimeGroup,
   OntimeMilestone,
   PatchWithId,
+  ProjectRundownsList,
   Rundown,
   SupportedEntry,
   TimeField,
   TimeStrategy,
   isOntimeEvent,
   isOntimeGroup,
+  isOntimeMilestone,
 } from 'ontime-types';
 import {
   MILLIS_PER_SECOND,
@@ -33,13 +35,14 @@ import {
 import { useCallback, useMemo } from 'react';
 
 import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
-import { RUNDOWN } from '../api/constants';
+import { CURRENT_RUNDOWN_QUERY_KEY, PROJECT_RUNDOWNS, getRundownQueryKey } from '../api/constants';
 import {
   ReorderEntry,
   deleteEntries,
   patchReorderEntry,
   postAddEntry,
   postCloneEntry,
+  patchRenumberCues,
   putBatchEditEvents,
   putEditEntry,
   requestApplyDelay,
@@ -61,9 +64,16 @@ export type EventOptions = Partial<{
 }>;
 
 /**
- * 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,
@@ -73,14 +83,23 @@ export const useEntryActions = () => {
     defaultDangerTime,
     defaultTimerType,
     defaultEndAction,
+    inheritGroupColour,
   } = useEditorSettings();
 
+  const resolveCurrentRundownQueryKey = useCallback(() => {
+    if (scopedRundownId !== undefined) {
+      return getRundownQueryKey(scopedRundownId);
+    }
+    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
+    return loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
+  }, [queryClient, scopedRundownId]);
+
   /**
    * Returns the currently loaded rundown
    */
   const getCurrentRundownData = useCallback(() => {
-    return queryClient.getQueryData<Rundown>(RUNDOWN);
-  }, [queryClient]);
+    return queryClient.getQueryData<Rundown>(resolveCurrentRundownQueryKey());
+  }, [queryClient, resolveCurrentRundownQueryKey]);
 
   /**
    * Looks for an entry with a given ID in the currently loaded rundown
@@ -103,9 +122,10 @@ export const useEntryActions = () => {
   const { mutateAsync: addEntryMutation } = useMutation({
     mutationFn: ([rundownId, entry]: [string, PatchWithId & InsertOptions]) => postAddEntry(rundownId, entry),
     onMutate: async ([_rundownId, entry]) => {
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      const queryKey = resolveCurrentRundownQueryKey();
+      await queryClient.cancelQueries({ queryKey });
 
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<Rundown>(queryKey);
 
       if (previousData) {
         const optimisticEntry = createOptimisticEntry(entry);
@@ -133,31 +153,31 @@ export const useEntryActions = () => {
           parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
         );
 
-        queryClient.setQueryData<Rundown>(RUNDOWN, newRundown);
+        queryClient.setQueryData<Rundown>(queryKey, newRundown);
       }
 
-      return { previousData };
+      return { previousData, queryKey };
     },
-    onSuccess: (response) => {
-      if (!response.data) return;
+    onSuccess: (response, _variables, context) => {
+      if (!response.data || !context?.queryKey) return;
 
       const serverEntry = response.data;
-      const currentData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const currentData = queryClient.getQueryData<Rundown>(context.queryKey);
 
       if (currentData) {
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
+        queryClient.setQueryData<Rundown>(context.queryKey, {
           ...currentData,
           entries: { ...currentData.entries, [serverEntry.id]: serverEntry },
         });
       }
     },
     onError: (_error, _variables, context) => {
-      if (context?.previousData) {
-        queryClient.setQueryData<Rundown>(RUNDOWN, context.previousData);
+      if (context?.previousData && context?.queryKey) {
+        queryClient.setQueryData<Rundown>(context.queryKey, context.previousData);
       }
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    onSettled: (_data, _error, _variables, context) => {
+      queryClient.invalidateQueries({ queryKey: context?.queryKey ?? resolveCurrentRundownQueryKey() });
     },
   });
 
@@ -221,6 +241,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) {
@@ -236,6 +264,7 @@ export const useEntryActions = () => {
       defaultTimerType,
       defaultEndAction,
       defaultTimeStrategy,
+      inheritGroupColour,
       addEntryMutation,
     ],
   );
@@ -247,8 +276,8 @@ export const useEntryActions = () => {
   const { mutateAsync: cloneEntryMutation } = useMutation({
     mutationFn: ([rundownId, entryId, options]: Parameters<typeof postCloneEntry>) =>
       postCloneEntry(rundownId, entryId, options),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
+    onMutate: () => queryClient.cancelQueries({ queryKey: resolveCurrentRundownQueryKey() }),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: resolveCurrentRundownQueryKey() }),
   });
 
   /**
@@ -278,11 +307,12 @@ export const useEntryActions = () => {
     mutationFn: ([rundownId, newEvent]: Parameters<typeof putEditEntry>) => putEditEntry(rundownId, newEvent),
     // we optimistically update here
     onMutate: async ([_rundownId, newEvent]) => {
+      const queryKey = resolveCurrentRundownQueryKey();
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries({ queryKey });
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<Rundown>(queryKey);
       const eventId = newEvent.id;
 
       if (previousData && eventId) {
@@ -290,7 +320,7 @@ export const useEntryActions = () => {
         const newRundown = { ...previousData.entries };
         // @ts-expect-error -- we expect the events to be of same type
         newRundown[eventId] = { ...newRundown[eventId], ...newEvent };
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
+        queryClient.setQueryData<Rundown>(queryKey, {
           id: previousData.id,
           title: previousData.title,
           order: previousData.order,
@@ -301,18 +331,18 @@ export const useEntryActions = () => {
       }
 
       // Return a context with the previous and new events
-      return { previousData, newEvent };
+      return { previousData, newEvent, queryKey };
     },
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _newEvent, context) => {
-      if (context?.previousData) {
-        queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      if (context?.previousData && context?.queryKey) {
+        queryClient.setQueryData<Rundown>(context.queryKey, context.previousData);
       }
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
-    onSettled: async () => {
-      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    onSettled: async (_data, _error, _variables, context) => {
+      await queryClient.invalidateQueries({ queryKey: context?.queryKey ?? resolveCurrentRundownQueryKey() });
     },
   });
 
@@ -409,7 +439,7 @@ export const useEntryActions = () => {
        * Utility function to get the previous event end time
        */
       function getPreviousEnd(): number {
-        const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+        const cachedRundown = queryClient.getQueryData<Rundown>(resolveCurrentRundownQueryKey());
 
         if (!cachedRundown?.order || !cachedRundown?.entries) {
           return 0;
@@ -440,11 +470,12 @@ export const useEntryActions = () => {
   const { mutateAsync: batchUpdateEventsMutation } = useMutation({
     mutationFn: ([rundownId, data]: Parameters<typeof putBatchEditEvents>) => putBatchEditEvents(rundownId, data),
     onMutate: async ([_rundownId, data]) => {
+      const queryKey = resolveCurrentRundownQueryKey();
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries({ queryKey });
 
       // Snapshot the previous value
-      const previousRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousRundown = queryClient.getQueryData<Rundown>(queryKey);
 
       if (previousRundown) {
         const eventIds = new Set(data.ids);
@@ -462,7 +493,7 @@ export const useEntryActions = () => {
           }
         });
 
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
+        queryClient.setQueryData<Rundown>(queryKey, {
           id: previousRundown.id,
           title: previousRundown.title,
           order: previousRundown.order,
@@ -473,13 +504,13 @@ export const useEntryActions = () => {
       }
 
       // Return a context with the previous rundown
-      return { previousRundown };
+      return { previousRundown, queryKey };
     },
-    onSuccess: (response) => {
-      if (!response.data) return;
+    onSuccess: (response, _variables, context) => {
+      if (!response.data || !context?.queryKey) return;
 
       const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
+      queryClient.setQueryData<Rundown>(context.queryKey, {
         id,
         title,
         order,
@@ -489,7 +520,9 @@ export const useEntryActions = () => {
       });
     },
     onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousRundown);
+      if (context?.queryKey) {
+        queryClient.setQueryData<Rundown>(context.queryKey, context?.previousRundown);
+      }
     },
   });
 
@@ -509,6 +542,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
@@ -517,17 +583,18 @@ export const useEntryActions = () => {
     mutationFn: ([rundownId, entryIds]: Parameters<typeof deleteEntries>) => deleteEntries(rundownId, entryIds),
     // we optimistically update here
     onMutate: async ([_rundownId, entryIds]) => {
+      const queryKey = resolveCurrentRundownQueryKey();
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries({ queryKey });
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<Rundown>(queryKey);
 
       if (previousData) {
         // optimistically update object
         const { entries, order, flatOrder } = optimisticDeleteEntries(entryIds, previousData);
 
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
+        queryClient.setQueryData<Rundown>(queryKey, {
           id: previousData.id,
           title: previousData.title,
           order,
@@ -538,17 +605,19 @@ export const useEntryActions = () => {
       }
 
       // Return a context with the previous and new events
-      return { previousData };
+      return { previousData, queryKey };
     },
 
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _entryIds, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      if (context?.queryKey) {
+        queryClient.setQueryData<Rundown>(context.queryKey, context?.previousData);
+      }
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    onSettled: (_data, _error, _variables, context) => {
+      queryClient.invalidateQueries({ queryKey: context?.queryKey ?? resolveCurrentRundownQueryKey() });
     },
   });
 
@@ -579,14 +648,15 @@ export const useEntryActions = () => {
     mutationFn: ([rundownId]: Parameters<typeof requestDeleteAll>) => requestDeleteAll(rundownId),
     // we optimistically update here
     onMutate: async () => {
+      const queryKey = resolveCurrentRundownQueryKey();
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries({ queryKey });
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<Rundown>(queryKey);
 
       // optimistically update object
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
+      queryClient.setQueryData<Rundown>(queryKey, {
         id: previousData?.id ?? 'default',
         title: previousData?.title ?? '',
         order: [],
@@ -596,17 +666,19 @@ export const useEntryActions = () => {
       });
 
       // Return a context with the previous and new events
-      return { previousData };
+      return { previousData, queryKey };
     },
 
     // Mutation fails, rollback optimist update
     onError: (_error, _, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      if (context?.queryKey) {
+        queryClient.setQueryData<Rundown>(context.queryKey, context?.previousData);
+      }
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    onSettled: (_data, _error, _variables, context) => {
+      queryClient.invalidateQueries({ queryKey: context?.queryKey ?? resolveCurrentRundownQueryKey() });
     },
   });
 
@@ -632,12 +704,12 @@ export const useEntryActions = () => {
    */
   const { mutateAsync: applyDelayMutation } = useMutation({
     mutationFn: ([rundownId, delayId]: Parameters<typeof requestApplyDelay>) => requestApplyDelay(rundownId, delayId),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    onMutate: () => queryClient.cancelQueries({ queryKey: resolveCurrentRundownQueryKey() }),
     onSuccess: (response) => {
       if (!response.data) return;
 
       const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
+      queryClient.setQueryData<Rundown>(resolveCurrentRundownQueryKey(), {
         id,
         title,
         order,
@@ -648,7 +720,7 @@ export const useEntryActions = () => {
     },
     // Mutation finished, failed or successful
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries({ queryKey: resolveCurrentRundownQueryKey() });
     },
   });
 
@@ -677,12 +749,12 @@ export const useEntryActions = () => {
    */
   const { mutateAsync: ungroupMutation } = useMutation({
     mutationFn: ([rundownId, groupId]: Parameters<typeof requestUngroup>) => requestUngroup(rundownId, groupId),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    onMutate: () => queryClient.cancelQueries({ queryKey: resolveCurrentRundownQueryKey() }),
     onSuccess: (response) => {
       if (!response.data) return;
 
       const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
+      queryClient.setQueryData<Rundown>(resolveCurrentRundownQueryKey(), {
         id,
         title,
         order,
@@ -691,7 +763,7 @@ export const useEntryActions = () => {
         revision,
       });
     },
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: resolveCurrentRundownQueryKey() }),
   });
 
   /**
@@ -720,12 +792,12 @@ export const useEntryActions = () => {
   const { mutateAsync: groupEntriesMutation } = useMutation({
     mutationFn: ([rundownId, entryIds]: Parameters<typeof requestGroupEntries>) =>
       requestGroupEntries(rundownId, entryIds),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    onMutate: () => queryClient.cancelQueries({ queryKey: resolveCurrentRundownQueryKey() }),
     onSuccess: (response) => {
       if (!response.data) return;
 
       const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
+      queryClient.setQueryData<Rundown>(resolveCurrentRundownQueryKey(), {
         id,
         title,
         order,
@@ -734,7 +806,7 @@ export const useEntryActions = () => {
         revision,
       });
     },
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: resolveCurrentRundownQueryKey() }),
   });
 
   /**
@@ -771,9 +843,9 @@ export const useEntryActions = () => {
    */
   const { mutateAsync: reorderEntryMutation } = useMutation({
     mutationFn: ([rundownId, data]: Parameters<typeof patchReorderEntry>) => patchReorderEntry(rundownId, data),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    onMutate: () => queryClient.cancelQueries({ queryKey: resolveCurrentRundownQueryKey() }),
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries({ queryKey: resolveCurrentRundownQueryKey() });
     },
   });
 
@@ -848,11 +920,12 @@ export const useEntryActions = () => {
     mutationFn: ([rundownId, from, to]: Parameters<typeof requestEventSwap>) => requestEventSwap(rundownId, from, to),
     // we optimistically update here
     onMutate: async ([_rundownId, from, to]) => {
+      const queryKey = resolveCurrentRundownQueryKey();
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries({ queryKey });
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<Rundown>(queryKey);
       if (previousData) {
         // optimistically update object
         const newRundown = { ...previousData.entries };
@@ -867,7 +940,7 @@ export const useEntryActions = () => {
         newRundown[from] = newA;
         newRundown[to] = newB;
 
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
+        queryClient.setQueryData<Rundown>(queryKey, {
           id: previousData.id,
           title: previousData.title,
           order: previousData.order,
@@ -878,17 +951,19 @@ export const useEntryActions = () => {
       }
 
       // Return a context with the previous events
-      return { previousData };
+      return { previousData, queryKey };
     },
 
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _eventId, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      if (context?.queryKey) {
+        queryClient.setQueryData<Rundown>(context.queryKey, context?.previousData);
+      }
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    onSettled: (_data, _error, _variables, context) => {
+      queryClient.invalidateQueries({ queryKey: context?.queryKey ?? resolveCurrentRundownQueryKey() });
     },
   });
 
@@ -924,6 +999,7 @@ export const useEntryActions = () => {
       groupEntries,
       move,
       reorderEntry,
+      renumberCues,
       swapEvents,
       updateEntry,
       updateTimer,
@@ -940,12 +1016,13 @@ export const useEntryActions = () => {
       groupEntries,
       move,
       reorderEntry,
+      renumberCues,
       swapEvents,
       updateEntry,
       updateTimer,
     ],
   );
-};
+}
 
 /**
  * Utility to optimistically delete entries from client cache

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

@@ -139,9 +139,9 @@ export const setEventPlayback = {
   pause: () => sendSocket('pause', undefined),
 };
 
-export const useTimer = createSelector((state: RuntimeStore) => state.timer);
-
-export const useClock = createSelector((state: RuntimeStore) => state.clock);
+export const useTimer = createSelector((state: RuntimeStore) => ({
+  ...state.timer,
+}));
 
 export const useNextFlag = createSelector((state: RuntimeStore) => ({
   id: state.eventFlag?.id ?? null,
@@ -200,20 +200,20 @@ export const useGroupTimerOverView = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
   mode: state.offset.mode,
   groupExpectedEnd: state.offset.expectedGroupEnd,
-  // we can force these numbers to 0 for this use case to avoid null checks
-  actualGroupStart: state.rundown.actualGroupStart ?? 0,
+  actualGroupStart: state.rundown.actualGroupStart,
   currentDay: state.rundown.currentDay ?? 0,
   playback: state.timer.playback,
+  phase: state.timer.phase,
 }));
 
 export const useFlagTimerOverView = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
   mode: state.offset.mode,
-  // we can force these numbers to 0 for this use case to avoid null checks
-  actualStart: state.rundown.actualStart ?? 0,
-  plannedStart: state.rundown.plannedStart ?? 0,
+  actualStart: state.rundown.actualStart,
+  plannedStart: state.rundown.plannedStart,
   currentDay: state.rundown.currentDay ?? 0,
   playback: state.timer.playback,
+  phase: state.timer.phase,
 }));
 
 /* ======================= View specific subscriptions ======================= */

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

@@ -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 };
+      }),
   };
 });

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

@@ -40,6 +40,15 @@ describe('getRouteFromPreset()', () => {
       options: {},
     },
   ];
+  const disabledPresets: URLPreset[] = [
+    {
+      enabled: false,
+      alias: 'demopage',
+      target: OntimeView.Timer,
+      search: 'user=guest',
+      options: {},
+    },
+  ];
 
   it('checks if the current location matches an enabled preset', () => {
     // we make the current location be the alias
@@ -47,6 +56,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 +105,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', () => {

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

@@ -1,9 +1,9 @@
 import {
   ApiActionTag,
   Log,
+  MaybeNumber,
   MessageTag,
   RefetchKey,
-  Rundown,
   RuntimeStore,
   WsPacketToClient,
   WsPacketToServer,
@@ -13,6 +13,8 @@ import { isProduction, websocketUrl } from '../../externals';
 import {
   APP_SETTINGS,
   CLIENT_LIST,
+  CSS_OVERRIDE,
+  CURRENT_RUNDOWN_QUERY_KEY,
   CUSTOM_FIELDS,
   PROJECT_DATA,
   REPORT,
@@ -21,6 +23,8 @@ import {
   TRANSLATION,
   URL_PRESETS,
   VIEW_SETTINGS,
+  getRundownQueryKey,
+  PROJECT_RUNDOWNS,
 } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
@@ -46,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);
@@ -174,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();
@@ -188,23 +194,28 @@ export const connectSocket = () => {
             case RefetchKey.Report:
               ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
               break;
-            case RefetchKey.Rundown:
-              if (revision === (ontimeQueryClient.getQueryData(RUNDOWN) as Rundown).revision) break;
-              ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
-              ontimeQueryClient.invalidateQueries({ queryKey: CUSTOM_FIELDS });
+            case RefetchKey.Rundown: {
+              maybeInvalidateRundownCache(revision, rundownId);
               break;
+            }
             case RefetchKey.UrlPresets:
               ontimeQueryClient.invalidateQueries({ queryKey: URL_PRESETS });
               break;
             case RefetchKey.ViewSettings:
               ontimeQueryClient.invalidateQueries({ queryKey: VIEW_SETTINGS });
               break;
+            case RefetchKey.CssOverride:
+              ontimeQueryClient.invalidateQueries({ queryKey: CSS_OVERRIDE });
+              break;
             case RefetchKey.Translation:
               ontimeQueryClient.invalidateQueries({ queryKey: TRANSLATION });
               break;
             case RefetchKey.Settings:
               ontimeQueryClient.invalidateQueries({ queryKey: APP_SETTINGS });
               break;
+            case RefetchKey.ProjectRundowns:
+              ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS });
+              break;
             default: {
               target satisfies never;
               break;
@@ -223,6 +234,32 @@ export const connectSocket = () => {
   };
 };
 
+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;
+  }
+
+  // skip if we dont recognise the ID the revision is lower
+  const queryKey = getRundownQueryKey(rundownId);
+  const cachedRundown = ontimeQueryClient.getQueryData<{ revision: number }>(queryKey);
+
+  if (revision === cachedRundown?.revision) {
+    // we already have the latest change
+    return;
+  }
+
+  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>(
   tag: T,
   payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,

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

@@ -1,4 +1,4 @@
-import { MaybeNumber, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
+import { MaybeNumber, MaybeString, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
 import {
   MILLIS_PER_HOUR,
   MILLIS_PER_MINUTE,
@@ -42,7 +42,7 @@ function getFormatFromParams() {
  * Gets the format options from the applicaton settings
  * @returns a string equivalent to the format, ie: hh:mm:ss a or HH:mm:ss
  */
-function getFormatFromSettings(): TimeFormat {
+export function getFormatFromSettings(): TimeFormat {
   const settings: Settings | undefined = ontimeQueryClient.getQueryData(APP_SETTINGS);
   return settings?.timeFormat ?? '24';
 }
@@ -75,8 +75,9 @@ function resolveTimeFormat(fallback12: string, fallback24: string): string {
 }
 
 type FormatOptions = {
-  format12: string;
-  format24: string;
+  format12?: string;
+  format24?: string;
+  override?: MaybeString;
 };
 
 /**
@@ -97,7 +98,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;

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

@@ -204,7 +204,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';
 }

apps/client/src/externals.ts

@@ -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/';

apps/client/src/features/app-settings/panel-list/PanelList.module.scss

@@ -53,10 +53,6 @@ ul {
       background-color: $red-400;
     }
   }
-
-  &.split {
-    margin-top: 1rem;
-  }
 }
 
 .secondary {

apps/client/src/features/app-settings/panel-list/PanelList.tsx

@@ -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}>

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -140,11 +140,21 @@ $inner-padding: 1rem;
   font-size: 1rem;
 }
 
+.fieldHeading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .fieldDescription {
   font-size: calc(1rem - 2px);
   color: $gray-400;
 }
 
+.warningText {
+  color: $orange-500;
+}
+
 .fieldError {
   font-size: calc(1rem - 2px);
   color: $red-500;

apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx

@@ -85,18 +85,28 @@ export function ListItem({ children }: { children: ReactNode }) {
   return <li className={style.listItem}>{children}</li>;
 }
 
-export function Field({ title, description, error }: { title: string; description: string; error?: string }) {
+export function Field({
+  title,
+  description,
+  error,
+  descriptionTone = 'default',
+}: {
+  title: ReactNode;
+  description: ReactNode;
+  error?: string;
+  descriptionTone?: 'default' | 'warning';
+}) {
   return (
     <div className={style.fieldTitle}>
-      {title}
+      <div className={style.fieldHeading}>{title}</div>
       {error && <Error>{error}</Error>}
-      {!error && description && <Description>{description}</Description>}
+      {!error && description && <Description tone={descriptionTone}>{description}</Description>}
     </div>
   );
 }
 
-export function Description({ children }: { children: ReactNode }) {
-  return <div className={style.fieldDescription}>{children}</div>;
+export function Description({ children, tone = 'default' }: { children: ReactNode; tone?: 'default' | 'warning' }) {
+  return <div className={cx([style.fieldDescription, tone === 'warning' && style.warningText])}>{children}</div>;
 }
 
 export function Highlight({ children }: { children: ReactNode }) {

apps/client/src/features/app-settings/panel/about-panel/AboutPanel.tsx

@@ -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>
     </>

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -282,7 +282,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
             );
           })}
           <div>
-            <Button type='submit' onClick={handleAddNewFilter}>
+            <Button onClick={handleAddNewFilter}>
               Add filter <IoAdd />
             </Button>
           </div>

apps/client/src/features/app-settings/panel/automations-panel/AutomationPanel.tsx

@@ -13,6 +13,8 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
   const automationsRef = useScrollIntoView<HTMLDivElement>('automations', location);
 
   const isLoading = status === 'pending';
+  const automationState = isLoading ? undefined : data.enabledAutomations;
+  const oscInputState = isLoading ? undefined : data.enabledOscIn;
 
   return (
     <>
@@ -24,13 +26,15 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
             enabledAutomations={data.enabledAutomations}
             enabledOscIn={data.enabledOscIn}
             oscPortIn={data.oscPortIn}
+            automationState={automationState}
+            oscInputState={oscInputState}
           />
         </div>
         <div ref={automationsRef}>
-          <AutomationsList automations={data.automations} />
+          <AutomationsList automations={data.automations} enabledAutomations={automationState} />
         </div>
         <div ref={triggersRef}>
-          <TriggersList triggers={data.triggers} automations={data.automations} />
+          <TriggersList triggers={data.triggers} automations={data.automations} enabledAutomations={automationState} />
         </div>
       </Panel.Section>
     </>

apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx

@@ -7,6 +7,7 @@ import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
 import Switch from '../../../../common/components/switch/Switch';
+import Tag from '../../../../common/components/tag/Tag';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
 import { isOntimeCloud } from '../../../../externals';
@@ -18,12 +19,16 @@ interface AutomationSettingsProps {
   enabledAutomations: boolean;
   enabledOscIn: boolean;
   oscPortIn: number;
+  automationState?: boolean;
+  oscInputState?: boolean;
 }
 
 export default function AutomationSettingsForm({
   enabledAutomations,
   enabledOscIn,
   oscPortIn,
+  automationState,
+  oscInputState,
 }: AutomationSettingsProps) {
   const {
     handleSubmit,
@@ -56,6 +61,8 @@ export default function AutomationSettingsForm({
   };
 
   const canSubmit = !isSubmitting && isDirty && isValid;
+  const automationsEnabled = watch('enabledAutomations');
+  const oscInputEnabled = watch('enabledOscIn');
 
   return (
     <Panel.Card>
@@ -82,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>
@@ -102,33 +108,52 @@ export default function AutomationSettingsForm({
         <Panel.ListGroup>
           <Panel.ListItem>
             <Panel.Field
-              title='Enable automations'
-              description='Allow Ontime to send messages on lifecycle triggers'
+              title={
+                <>
+                  <span>Enable automations</span>
+                  {automationState === false && <Tag variant='warning'>OFF</Tag>}
+                </>
+              }
+              description={
+                automationState === false
+                  ? 'Automations are OFF. Triggers stay configured, but Ontime will not send messages.'
+                  : 'Allow Ontime to send messages on lifecycle triggers'
+              }
+              descriptionTone={automationState === false ? 'warning' : 'default'}
               error={errors.enabledAutomations?.message}
             />
             <Switch
               size='large'
-              checked={watch('enabledAutomations')}
+              checked={automationsEnabled}
               onCheckedChange={(value: boolean) =>
                 setValue('enabledAutomations', value, { shouldDirty: true, shouldValidate: true })
               }
             />
           </Panel.ListItem>
         </Panel.ListGroup>
-
         <Panel.Title>OSC Input</Panel.Title>
 
         <Panel.ListGroup>
           {isOntimeCloud && <Info>For security reasons OSC integrations are not available in the cloud service.</Info>}
           <Panel.ListItem>
             <Panel.Field
-              title='OSC input'
-              description='Allow control of Ontime through OSC'
+              title={
+                <>
+                  <span>OSC input</span>
+                  {oscInputState === false && <Tag variant='warning'>OFF</Tag>}
+                </>
+              }
+              description={
+                oscInputState === false
+                  ? 'OSC input is OFF. Ontime will not listen for incoming OSC control messages.'
+                  : 'Allow control of Ontime through OSC'
+              }
+              descriptionTone={oscInputState === false ? 'warning' : 'default'}
               error={errors.enabledOscIn?.message}
             />
             <Switch
               size='large'
-              checked={watch('enabledOscIn')}
+              checked={oscInputEnabled}
               onCheckedChange={(value: boolean) =>
                 setValue('enabledOscIn', value, { shouldDirty: true, shouldValidate: true })
               }

apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx

@@ -6,6 +6,7 @@ import { deleteAutomation } from '../../../../common/api/automation';
 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';
 import Tag from '../../../../common/components/tag/Tag';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -20,10 +21,11 @@ const automationPlaceholder: AutomationDTO = {
 
 interface AutomationsListProps {
   automations: NormalisedAutomation;
+  enabledAutomations?: boolean;
 }
 
 export default function AutomationsList(props: AutomationsListProps) {
-  const { automations } = props;
+  const { automations, enabledAutomations } = props;
   const { refetch } = useAutomationSettings();
   const [automationFormData, setAutomationFormData] = useState<AutomationDTO | null>(null);
   const [deleteError, setDeleteError] = useState<string | null>(null);
@@ -56,6 +58,13 @@ export default function AutomationsList(props: AutomationsListProps) {
 
       <Panel.Divider />
 
+      {enabledAutomations === false && (
+        <Info>
+          Automations are disabled. You can still manage automation definitions here, but they will not run until
+          enabled.
+        </Info>
+      )}
+
       {automationFormData !== null && (
         <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
       )}

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -66,6 +66,11 @@ export default function OntimeActionForm({
             { value: 'aux2-set', label: 'Aux 2: set' },
             { value: 'aux3-set', label: 'Aux 3: set' },
 
+            { value: 'playback-start', label: 'Playback: start' },
+            { value: 'playback-stop', label: 'Playback: stop' },
+            { 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' },
           ]}

apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx

@@ -5,6 +5,7 @@ import { IoAdd } from 'react-icons/io5';
 import { deleteTrigger } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
 import { checkDuplicates } from './automationUtils';
@@ -14,10 +15,11 @@ import TriggersListItem from './TriggersListItem';
 interface TriggersListProps {
   triggers: Trigger[];
   automations: NormalisedAutomation;
+  enabledAutomations?: boolean;
 }
 
 export default function TriggersList(props: TriggersListProps) {
-  const { triggers, automations } = props;
+  const { triggers, automations, enabledAutomations } = props;
   const [showForm, setShowForm] = useState(false);
   const { refetch } = useAutomationSettings();
   const [deleteError, setDeleteError] = useState<string | null>(null);
@@ -52,6 +54,11 @@ export default function TriggersList(props: TriggersListProps) {
       </Panel.SubHeader>
       <Panel.Divider />
       <Panel.Section>
+        {enabledAutomations === false && (
+          <Info>
+            Automations are disabled. You can still manage triggers here, but they will not run until enabled.
+          </Info>
+        )}
         {duplicates && (
           <Panel.Error>
             You have created multiple links between the same trigger and automation which can performance issues.

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

@@ -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>

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

@@ -0,0 +1,114 @@
+import { ChangeEvent, FormEvent, useMemo, useRef, useState } from 'react';
+import { IoCloudUploadOutline } from 'react-icons/io5';
+
+import { uploadCustomView } from '../../../../common/api/customViews';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import * as Panel from '../../panel-utils/PanelUtils';
+import { getFileError, getSlugError, getViewUrl, maxUploadLabel } from './customViews.utils';
+
+import style from './CustomViews.module.scss';
+
+interface CustomViewFormProps {
+  onComplete: () => void;
+  onClose: () => void;
+}
+
+export default function CustomViewForm({ onComplete, onClose }: CustomViewFormProps) {
+  const [slug, setSlug] = useState('');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [slugDirty, setSlugDirty] = useState(false);
+  const [fileDirty, setFileDirty] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const normalisedSlug = useMemo(() => slug.trim().toLowerCase(), [slug]);
+  const previewUrl = getViewUrl(normalisedSlug);
+  const slugError = useMemo(() => getSlugError(normalisedSlug), [normalisedSlug]);
+  const fileError = useMemo(() => getFileError(selectedFile), [selectedFile]);
+  const canUpload = Boolean(normalisedSlug && selectedFile) && !slugError && !fileError && !isUploading;
+
+  const handleSelectFile = (event: ChangeEvent<HTMLInputElement>) => {
+    setSelectedFile(event.target.files?.[0] ?? null);
+    setFileDirty(true);
+    setError(null);
+  };
+
+  const handleUpload = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!selectedFile || slugError || fileError) return;
+
+    try {
+      setIsUploading(true);
+      setError(null);
+      await uploadCustomView(normalisedSlug, selectedFile);
+      onComplete();
+    } catch (err) {
+      setError(maybeAxiosError(err));
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <Panel.Indent as='form' onSubmit={handleUpload} className={style.uploadForm}>
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type='file'
+        onChange={handleSelectFile}
+        accept='.html,text/html'
+      />
+
+      <div className={style.step}>
+        <div className={style.stepTitle}>1. Choose a name</div>
+        <Panel.Description>Name</Panel.Description>
+        <Input
+          value={slug}
+          onChange={(event) => {
+            setSlug(event.target.value);
+            setSlugDirty(true);
+          }}
+          placeholder='my-view'
+          aria-label='Custom view name'
+          autoCapitalize='off'
+          autoComplete='off'
+          fluid
+        />
+        <Panel.Description>
+          Use lowercase letters, numbers, and dashes. Example: <Panel.Highlight>my-view</Panel.Highlight>
+        </Panel.Description>
+        <Panel.Description>
+          Preview URL: <Panel.Highlight>{previewUrl}</Panel.Highlight>
+        </Panel.Description>
+        {slugDirty && slugError && <Panel.Error>{slugError}</Panel.Error>}
+      </div>
+
+      <div className={style.step}>
+        <div className={style.stepTitle}>2. Select index.html</div>
+        <Panel.Description>Upload file</Panel.Description>
+        <Panel.InlineElements wrap='wrap' className={style.filePicker}>
+          <Button onClick={() => fileInputRef.current?.click()}>
+            {selectedFile ? 'Replace index.html' : 'Choose index.html'}
+          </Button>
+          <span className={style.fileName}>
+            {selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : 'No file selected'}
+          </span>
+        </Panel.InlineElements>
+        <Panel.Description>Accepted: index.html only, maximum {maxUploadLabel}.</Panel.Description>
+        {fileDirty && fileError && <Panel.Error>{fileError}</Panel.Error>}
+      </div>
+
+      {error && <Panel.Error>{error}</Panel.Error>}
+
+      <Panel.InlineElements align='end'>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant='primary' type='submit' loading={isUploading} disabled={!canUpload}>
+          Upload view <IoCloudUploadOutline />
+        </Button>
+      </Panel.InlineElements>
+    </Panel.Indent>
+  );
+}

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

@@ -0,0 +1,51 @@
+.uploadForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.stepTitle {
+  font-weight: 600;
+  color: $gray-200;
+}
+
+.filePicker {
+  min-height: 2rem;
+}
+
+.fileName {
+  color: $gray-300;
+  font-size: calc(1rem - 2px);
+}
+
+.missing {
+  color: $warning-orange;
+}
+
+.urlCell {
+  font-size: calc(1rem - 2px);
+  color: $gray-300;
+  user-select: all;
+  white-space: nowrap;
+}
+
+.actionsHeader {
+  text-align: right;
+}
+
+.actionsCell {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.actionsGroup {
+  width: 100%;
+  justify-content: flex-end;
+}

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

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { IoAdd } from 'react-icons/io5';
+
+import { restoreDemoView } from '../../../../common/api/customViews';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
+import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import useCustomViews from '../../../../common/hooks-query/useCustomViews';
+import * as Panel from '../../panel-utils/PanelUtils';
+import CustomViewForm from './CustomViewForm';
+import { customViewsDocs } from './customViews.utils';
+import CustomViewsList from './CustomViewsList';
+
+export default function CustomViews() {
+  const { data, refetch, status } = useCustomViews();
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const hasDemoView = data.views.some((view) => view.slug === 'demo');
+
+  const handleUploadComplete = async () => {
+    setIsUploadOpen(false);
+    await refetch();
+  };
+
+  const handleRestoreDemo = async () => {
+    try {
+      setActionError(null);
+      await restoreDemoView();
+      await refetch();
+    } catch (error) {
+      setActionError(maybeAxiosError(error));
+    }
+  };
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>
+          Custom views
+          <Panel.InlineElements>
+            <Button variant='ghosted' onClick={handleRestoreDemo} disabled={hasDemoView}>
+              Restore demo
+            </Button>
+            <Button onClick={() => setIsUploadOpen(true)} disabled={isUploadOpen}>
+              New <IoAdd />
+            </Button>
+          </Panel.InlineElements>
+        </Panel.SubHeader>
+        <Panel.Divider />
+
+        <Panel.Section>
+          <Info>
+            <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>
+        </Panel.Section>
+
+        <Panel.Section>
+          <Panel.Loader isLoading={status === 'pending'} />
+
+          {isUploadOpen && <CustomViewForm onComplete={handleUploadComplete} onClose={() => setIsUploadOpen(false)} />}
+
+          {actionError && <Panel.Error>{actionError}</Panel.Error>}
+
+          <CustomViewsList
+            views={data.views}
+            onOpenUpload={() => setIsUploadOpen(true)}
+            onMutate={() => refetch()}
+            onError={setActionError}
+          />
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { CustomViewSummary } from 'ontime-types';
+import { useState } from 'react';
+
+import { deleteCustomView } from '../../../../common/api/customViews';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Dialog from '../../../../common/components/dialog/Dialog';
+import * as Panel from '../../panel-utils/PanelUtils';
+import CustomViewsListItem from './CustomViewsListItem';
+
+import style from './CustomViews.module.scss';
+
+interface CustomViewsListProps {
+  views: CustomViewSummary[];
+  onOpenUpload: () => void;
+  onMutate: () => void;
+  onError: (message: string) => void;
+}
+
+export default function CustomViewsList({ views, onOpenUpload, onMutate, onError }: CustomViewsListProps) {
+  const [targetSlug, setTargetSlug] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const openDelete = (slug: string) => {
+    setTargetSlug(slug);
+  };
+
+  const submitDelete = async () => {
+    if (!targetSlug) {
+      return;
+    }
+
+    try {
+      setIsDeleting(true);
+      await deleteCustomView(targetSlug);
+      onMutate();
+    } catch (error) {
+      onError(maybeAxiosError(error));
+    } finally {
+      setIsDeleting(false);
+      setTargetSlug(null);
+    }
+  };
+
+  return (
+    <>
+      <Panel.Table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>URL</th>
+            <th className={style.actionsHeader} />
+          </tr>
+        </thead>
+        <tbody>
+          {views.length === 0 && <Panel.TableEmpty handleClick={onOpenUpload} label='No custom views yet' />}
+          {views.map((view, index) => (
+            <CustomViewsListItem
+              key={view.slug}
+              slug={view.slug}
+              index={index}
+              onDelete={openDelete}
+              onError={onError}
+            />
+          ))}
+        </tbody>
+      </Panel.Table>
+      <Dialog
+        isOpen={targetSlug !== null}
+        onClose={() => setTargetSlug(null)}
+        title='Delete custom view'
+        showBackdrop
+        showCloseButton
+        bodyElements='You will permanently delete this file. Are you sure?'
+        footerElements={
+          <>
+            <Button size='large' onClick={() => setTargetSlug(null)}>
+              Cancel
+            </Button>
+            <Button variant='destructive' size='large' onClick={submitDelete} loading={isDeleting}>
+              Delete custom view
+            </Button>
+          </>
+        }
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { IoDownloadOutline, IoOpenOutline, IoTrash } from 'react-icons/io5';
+
+import { downloadCustomView } from '../../../../common/api/customViews';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import IconButton from '../../../../common/components/buttons/IconButton';
+import { handleLinks } from '../../../../common/utils/linkUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
+import { getViewUrl } from './customViews.utils';
+
+import style from './CustomViews.module.scss';
+
+interface CustomViewsListItemProps {
+  slug: string;
+  index: number;
+  onDelete: (slug: string) => void;
+  onError: (message: string) => void;
+}
+
+export default function CustomViewsListItem({ slug, index, onDelete, onError }: CustomViewsListItemProps) {
+  const handlePreview = () => {
+    handleLinks(`external/${encodeURIComponent(slug)}/`);
+  };
+
+  const handleDownload = async () => {
+    try {
+      await downloadCustomView(slug);
+    } catch (error) {
+      onError(maybeAxiosError(error));
+    }
+  };
+
+  return (
+    <tr>
+      <td>{slug}</td>
+      <td className={style.urlCell}>{getViewUrl(slug)}</td>
+      <td className={style.actionsCell}>
+        <Panel.InlineElements relation='inner' align='end' className={style.actionsGroup}>
+          <IconButton
+            variant='ghosted-white'
+            onClick={handlePreview}
+            aria-label='Preview custom view'
+            data-testid={`custom-view__preview_${index}`}
+          >
+            <IoOpenOutline />
+          </IconButton>
+          <IconButton
+            variant='ghosted-white'
+            onClick={handleDownload}
+            aria-label='Download custom view'
+            data-testid={`custom-view__download_${index}`}
+          >
+            <IoDownloadOutline />
+          </IconButton>
+          <IconButton
+            variant='ghosted-destructive'
+            onClick={() => onDelete(slug)}
+            aria-label='Delete custom view'
+            data-testid={`custom-view__delete_${index}`}
+          >
+            <IoTrash />
+          </IconButton>
+        </Panel.InlineElements>
+      </td>
+    </tr>
+  );
+}

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

@@ -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',

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

@@ -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'

apps/client/src/features/app-settings/panel/manage-panel/customViews.utils.ts

@@ -0,0 +1,39 @@
+import { baseURI, serverURL } from '../../../../externals';
+
+export const customViewsDocs = 'https://docs.getontime.no/features/custom-views/';
+const customViewSlugPattern = /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/;
+const maxUploadBytes = 4_000_000;
+export const maxUploadLabel = `${maxUploadBytes / 1_000_000}MB`;
+
+export function getSlugError(slug: string): string | null {
+  if (!slug) {
+    return 'Name is required.';
+  }
+  if (!customViewSlugPattern.test(slug)) {
+    return 'Use lowercase letters, numbers, and dashes only.';
+  }
+  return null;
+}
+
+export function getFileError(file: File | null): string | null {
+  if (!file) {
+    return 'index.html is required.';
+  }
+  if (file.name.toLowerCase() !== 'index.html') {
+    return 'Only index.html uploads are supported.';
+  }
+  if (file.size === 0) {
+    return 'Uploaded file is empty.';
+  }
+  if (file.size > maxUploadBytes) {
+    return `File size limit (${maxUploadLabel}) exceeded.`;
+  }
+  return null;
+}
+
+export function getViewUrl(slug: string): string {
+  const url = new URL(serverURL);
+  const path = slug ? `external/${encodeURIComponent(slug)}/` : 'external/';
+  url.pathname = baseURI ? `${baseURI}/${path}` : `/${path}`;
+  return url.toString();
+}

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

@@ -1,17 +0,0 @@
-import Info from '../../../../../common/components/info/Info';
-import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
-
-const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadsheet-gsheet/';
-
-export default function GSheetInfo() {
-  return (
-    <Info>
-      Ontime can import data from spreadsheets by: <br />- importing the spreadsheet file in Ontime <br />-
-      synchronising your project with a Google Sheet
-      <br />
-      <br />
-      To synchronise with a Google Sheet, you will need to allow Ontime to authenticate with your Google account.
-      <ExternalLink href={googleSheetDocsUrl}>See the docs</ExternalLink>
-    </Info>
-  );
-}

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

@@ -1,57 +1,147 @@
-import { ChangeEvent, useEffect, useState } from 'react';
-import { IoCheckmark, IoShieldCheckmarkOutline } from 'react-icons/io5';
+import type { AuthenticationStatus, SpreadsheetWorksheetOptions } from 'ontime-types';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { IoCheckmark, IoCloudDownloadOutline, IoShieldCheckmarkOutline } from 'react-icons/io5';
 
-import { getWorksheetNames } from '../../../../../common/api/sheets';
+import {
+  getWorksheetOptions,
+  requestConnection,
+  revokeAuthentication,
+  verifyAuthenticationStatus,
+} from '../../../../../common/api/sheets';
 import { maybeAxiosError } from '../../../../../common/api/utils';
 import Button from '../../../../../common/components/buttons/Button';
 import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
 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 useGoogleSheet from './useGoogleSheet';
-import { useSheetStore } from './useSheetStore';
+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 } = props;
+  const { onCancel, onSheetLoaded, closedByUser } = props;
 
-  const { revoke, connect, verifyAuth } = useGoogleSheet();
   const [file, setFile] = useState<File | null>(null);
+  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'>('');
   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);
+  const authFallbackTimeoutRef = useRef<number | null>(null);
+  const focusListenerRef = useRef<(() => void) | null>(null);
 
-  const sheetId = useSheetStore((state) => state.sheetId);
-  const setSheetId = useSheetStore((state) => state.setSheetId);
-  const setWorksheets = useSheetStore((state) => state.setWorksheets);
-  const patchStepData = useSheetStore((state) => state.patchStepData);
-  const authenticationStatus = useSheetStore((state) => state.authenticationStatus);
-  const setAuthenticationStatus = useSheetStore((state) => state.setAuthenticationStatus);
-  const authenticationError = useSheetStore((state) => state.stepData.authenticate.error);
-
-  /** Check if we are authenticated */
-  const getAuthStatus = async () => {
-    const result = await verifyAuth();
-    if (result) {
-      setAuthenticationStatus(result.authenticated);
+  const clearPollTimeout = useCallback(() => {
+    if (pollTimeoutRef.current !== null) {
+      window.clearTimeout(pollTimeoutRef.current);
+      pollTimeoutRef.current = null;
     }
-  };
+  }, []);
+
+  const clearAuthFallbackTimeout = useCallback(() => {
+    if (authFallbackTimeoutRef.current !== null) {
+      window.clearTimeout(authFallbackTimeoutRef.current);
+      authFallbackTimeoutRef.current = null;
+    }
+  }, []);
+
+  const clearFocusListener = useCallback(() => {
+    if (focusListenerRef.current !== null) {
+      window.removeEventListener('focus', focusListenerRef.current);
+      focusListenerRef.current = null;
+    }
+  }, []);
+
+  const loadWorksheetOptions = useCallback(
+    async (nextSheetId: string) => {
+      const worksheetOptions = await getWorksheetOptions(nextSheetId);
+      persistSheetId(nextSheetId);
+      onSheetLoaded(nextSheetId, worksheetOptions);
+      setWorksheetError('');
+    },
+    [onSheetLoaded],
+  );
+
+  const pollUntilAuthenticated = useCallback(
+    async (attempts: number = 0) => {
+      clearPollTimeout();
+      if (closedByUser) return;
+
+      try {
+        const result = await verifyAuthenticationStatus();
+        setAuthenticationStatus(result.authenticated);
+        setSheetId(result.sheetId);
+
+        if (result.authenticated === 'pending') {
+          if (attempts < 10) {
+            pollTimeoutRef.current = window.setTimeout(() => {
+              pollUntilAuthenticated(attempts + 1);
+            }, 2000);
+            return; // Keep authKey for next poll
+          }
+          // Polling timed out
+          setAuthKey(null);
+          setLoading('');
+          return;
+        }
+
+        if (result.authenticated === 'authenticated' && result.sheetId) {
+          setLoading('load-sheet');
+          try {
+            await loadWorksheetOptions(result.sheetId);
+          } catch (error) {
+            setWorksheetError(maybeAxiosError(error));
+          }
+        }
+
+        setAuthKey(null);
+        setLoading('');
+      } catch (error) {
+        setAuthError(maybeAxiosError(error));
+        setAuthKey(null);
+        setLoading('');
+      }
+    },
+    [clearPollTimeout, loadWorksheetOptions, closedByUser],
+  );
 
   /** check if the current session has been authenticated */
   useEffect(() => {
-    patchStepData({ authenticate: { available: false, error: '' } });
-    untilAuthenticated();
-  }, []);
+    setAuthError('');
+    pollUntilAuthenticated();
+
+    return () => {
+      clearFocusListener();
+      clearPollTimeout();
+      clearAuthFallbackTimeout();
+    };
+  }, [clearAuthFallbackTimeout, clearFocusListener, clearPollTimeout, pollUntilAuthenticated]);
 
   // user cancels the flow
   const handleRevoke = async () => {
     setLoading('cancel');
-    await revoke();
-    await getAuthStatus();
-    setLoading('');
+    try {
+      const result = await revokeAuthentication();
+      setAuthenticationStatus(result.authenticated);
+      setSheetId('');
+      setAuthKey(null);
+      setAuthLink('');
+      setAuthError('');
+      setWorksheetError('');
+    } catch (error) {
+      setAuthError(maybeAxiosError(error));
+    } finally {
+      setLoading('');
+    }
   };
 
   const handleCancelFlow = () => {
@@ -69,72 +159,85 @@ 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;
     if (!sheetId) return;
-    patchStepData({ worksheet: { available: false, error: '' } });
-
     setLoading('connect');
-    const result = await connect(file, sheetId);
-    if (result) {
+    setAuthError('');
+    setWorksheetError('');
+
+    try {
+      const result = await requestConnection(file, sheetId);
       setAuthLink(result.verification_url);
       setAuthKey(result.user_code);
+    } catch (error) {
+      setAuthError(maybeAxiosError(error));
+    } finally {
+      setLoading('');
     }
-    setLoading('');
-  };
-
-  const untilAuthenticated = async (attempts: number = 0) => {
-    const result = await verifyAuth();
-    if (result?.authenticated) {
-      setAuthenticationStatus(result.authenticated);
-      if (result.authenticated !== 'pending') {
-        if (result.authenticated == 'authenticated') {
-          try {
-            const names = await getWorksheetNames(result.sheetId);
-            setWorksheets(names);
-          } catch (error) {
-            const message = maybeAxiosError(error);
-            patchStepData({ worksheet: { available: false, error: message } });
-          }
-        }
-        setLoading('');
-        return;
-      }
-    }
-    if (attempts <= 10) {
-      setTimeout(() => untilAuthenticated(attempts + 1), 2000);
-      return;
-    }
-    setLoading('');
   };
 
   /**
-   * Open google auth
+   * Opens the Google verification page and starts polling for completion.
    */
-  const handleAuthenticate = async () => {
+  const handleAuthenticate = () => {
     setLoading('authenticate');
+    setAuthError('');
+    clearFocusListener();
+    clearPollTimeout();
+    clearAuthFallbackTimeout();
 
-    // open link and schedule a check for when the user focuses again
     openLink(authLink);
-    window.addEventListener(
-      'focus',
-      async () => {
-        untilAuthenticated();
-      },
-      { once: true },
-    );
+    authFallbackTimeoutRef.current = window.setTimeout(() => {
+      if (document.hasFocus()) {
+        setLoading('');
+      }
+    }, 1500);
+
+    function authFocusHandler() {
+      clearAuthFallbackTimeout();
+      clearFocusListener();
+      pollUntilAuthenticated();
+    }
+
+    focusListenerRef.current = authFocusHandler;
+    window.addEventListener('focus', authFocusHandler, { once: true });
   };
 
-  const canConnect = file && sheetId;
+  const handleLoadSheet = async () => {
+    if (!sheetId) return;
+
+    setLoading('load-sheet');
+    setWorksheetError('');
+
+    try {
+      await loadWorksheetOptions(sheetId);
+    } catch (error) {
+      setWorksheetError(maybeAxiosError(error));
+    } finally {
+      setLoading('');
+    }
+  };
+
+  const canConnect = Boolean(file) && Boolean(sheetId);
+  const canLoadSheet = Boolean(sheetId);
   const canAuthenticate = Boolean(authKey) && Boolean(authLink);
   const isLoading = Boolean(loading);
   const isAuthenticated = authenticationStatus === 'authenticated';
   const isAuthenticating = authenticationStatus === 'pending';
+  const statusLabel = isAuthenticated ? 'Connected' : isAuthenticating ? 'Waiting for confirmation' : 'Not connected';
+  const statusClass = isAuthenticated ? style.statusReady : isAuthenticating ? style.statusPending : style.statusIdle;
+  const statusVariant = isAuthenticated ? 'default' : 'warning';
+  const setupMessage = isAuthenticated
+    ? 'Load a spreadsheet by its Google Sheet ID.'
+    : canAuthenticate
+      ? 'Finish the device verification in your browser, then return here.'
+      : 'Upload your client secret and enter the sheet ID you want to access.';
 
   return (
-    <Panel.Section>
+    <Panel.Section className={style.setupShell}>
       <Panel.Title>
         Sync with Google Sheet (experimental)
         {isAuthenticated ? (
@@ -145,24 +248,63 @@ export default function GSheetSetup(props: GSheetSetupProps) {
           <Button onClick={handleCancelFlow}>Go Back</Button>
         )}
       </Panel.Title>
-      <Panel.ListGroup>
-        <Panel.Description>Upload Client Secret provided by Google</Panel.Description>
-        <Panel.Error>{authenticationError}</Panel.Error>
-        <Input fluid type='file' onChange={handleClientSecret} accept='.json' disabled={isLoading || canAuthenticate} />
-      </Panel.ListGroup>
-      <Panel.ListGroup>
-        <Panel.Description>Enter ID of sheet to synchronise</Panel.Description>
-        <Panel.Error>{undefined}</Panel.Error>
+      <div className={style.setupIntro}>
+        <div className={style.setupIntroText}>
+          <p className={style.setupLead}>{statusLabel}</p>
+          <p className={style.setupBody}>{setupMessage}</p>
+        </div>
+        <Tag className={statusClass} variant={statusVariant}>
+          {statusLabel}
+        </Tag>
+      </div>
+      {!isAuthenticated && (
+        <Panel.ListGroup className={style.setupBlock}>
+          <Panel.Description>Upload Client Secret provided by Google</Panel.Description>
+          <Panel.Error>{authError}</Panel.Error>
+          <Input
+            fluid
+            type='file'
+            onChange={handleClientSecret}
+            accept='.json'
+            disabled={isLoading || canAuthenticate}
+          />
+          <div className={style.setupHint}>Use the OAuth client JSON downloaded from your Google Cloud project.</div>
+        </Panel.ListGroup>
+      )}
+      {isAuthenticated && authError && (
+        <Panel.ListGroup className={style.setupBlock}>
+          <Panel.Error>{authError}</Panel.Error>
+        </Panel.ListGroup>
+      )}
+      <Panel.ListGroup className={style.setupBlock}>
+        <Panel.Description>Enter ID of sheet to synchronize</Panel.Description>
+        <Panel.Error>{worksheetError}</Panel.Error>
         <Input
           fluid
-          placeholder='Sheet ID'
-          onChange={(event) => setSheetId(event.target.value)}
+          value={sheetId}
+          placeholder='Sheet ID or Google Sheets URL'
+          onChange={(event) => {
+            setWorksheetError('');
+            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>
-      {!canAuthenticate ? (
-        <Panel.ListGroup>
-          <Panel.InlineElements>
+      {isAuthenticated ? (
+        <Panel.ListGroup className={style.setupBlock}>
+          <Panel.Description>Load the current spreadsheet configuration</Panel.Description>
+          <Panel.InlineElements wrap='wrap' className={style.setupActions}>
+            <Button onClick={handleLoadSheet} disabled={!canLoadSheet || isLoading} loading={loading === 'load-sheet'}>
+              <IoCloudDownloadOutline />
+              Load sheet
+            </Button>
+          </Panel.InlineElements>
+        </Panel.ListGroup>
+      ) : !canAuthenticate ? (
+        <Panel.ListGroup className={style.setupBlock}>
+          <Panel.Description>Generate a Google device code</Panel.Description>
+          <Panel.InlineElements wrap='wrap' className={style.setupActions}>
             <Button onClick={handleConnect} disabled={!canConnect || isLoading} loading={loading === 'connect'}>
               <IoCheckmark />
               Connect
@@ -170,17 +312,17 @@ export default function GSheetSetup(props: GSheetSetupProps) {
           </Panel.InlineElements>
         </Panel.ListGroup>
       ) : (
-        <Panel.ListGroup>
-          <Panel.InlineElements>
+        <Panel.ListGroup className={style.setupBlock}>
+          <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}>Copy the code, then open the browser prompt to complete the flow.</div>
         </Panel.ListGroup>
       )}
     </Panel.Section>

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

@@ -1,91 +0,0 @@
-import { CustomFields, Rundown, RundownSummary } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
-import { useState } from 'react';
-
-import Button from '../../../../../common/components/buttons/Button';
-import useRundown from '../../../../../common/hooks-query/useRundown';
-import { formatDuration } from '../../../../../common/utils/time';
-import * as Panel from '../../../panel-utils/PanelUtils';
-import PreviewSpreadsheet from './preview/PreviewRundown';
-import useGoogleSheet from './useGoogleSheet';
-import { useSheetStore } from './useSheetStore';
-
-interface ImportReviewProps {
-  rundown: Rundown;
-  customFields: CustomFields;
-  summary: RundownSummary;
-  onFinished: () => void;
-  onCancel: () => void;
-  onBack: () => void;
-}
-
-export default function ImportReview({
-  rundown,
-  customFields,
-  summary,
-  onFinished,
-  onCancel,
-  onBack,
-}: ImportReviewProps) {
-  const { data: currentRundown } = useRundown();
-  const [loading, setLoading] = useState(false);
-  const { importRundown } = useGoogleSheet();
-  const resetPreview = useSheetStore((state) => state.resetPreview);
-
-  const handleCancel = () => {
-    resetPreview();
-    onCancel();
-  };
-
-  const applyImport = async () => {
-    setLoading(true);
-
-    // we need to import on-top of the currently loaded rundown
-    // so the id needs to match
-    await importRundown(
-      {
-        [currentRundown.id]: { ...rundown, id: currentRundown.id, title: currentRundown.title },
-      },
-      customFields,
-    );
-    setLoading(false);
-    onFinished();
-  };
-
-  return (
-    <Panel.Section>
-      <Panel.Title>
-        Review Rundown
-        <Panel.InlineElements>
-          <Button onClick={handleCancel} variant='ghosted' disabled={loading}>
-            Cancel
-          </Button>
-          <Button onClick={onBack} variant='subtle' disabled={loading}>
-            Back
-          </Button>
-          <Button onClick={applyImport} variant='primary' loading={loading}>
-            Apply
-          </Button>
-        </Panel.InlineElements>
-      </Panel.Title>
-      <Panel.ListGroup>
-        <Panel.ListItem>
-          <b>Title</b> {rundown.title}
-        </Panel.ListItem>
-        <Panel.ListItem>
-          <b>Number of entries</b> {rundown.flatOrder.length}
-        </Panel.ListItem>
-        <Panel.ListItem>
-          <b>Start time</b> {millisToString(summary.start)}
-        </Panel.ListItem>
-        <Panel.ListItem>
-          <b>End time</b> {millisToString(summary.end)}
-        </Panel.ListItem>
-        <Panel.ListItem>
-          <b>Total duration</b> {formatDuration(summary.duration)}
-        </Panel.ListItem>
-      </Panel.ListGroup>
-      <PreviewSpreadsheet rundown={rundown} customFields={customFields} />
-    </Panel.Section>
-  );
-}

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

@@ -1,35 +1,143 @@
-.uploadSection,
-.finishSection {
-  margin-top: 1rem;
+.introStack {
   display: flex;
-  padding: 3rem 1rem;
-  align-items: center;
-  justify-content: center;
-  background-color: $gray-1350;
-  border: 1px solid $white-10;
-  border-radius: 3px;
-}
-
-.uploadSection {
-  flex-direction: row;
-  gap: 2rem;
-}
-
-.finishSection {
-  font-size: 1.5rem;
-  text-align: center;
   flex-direction: column;
   gap: 1rem;
-
-  .error {
-    color: $red-500;
-  }
-  .success {
-    color: $green-500;
-  }
 }
 
-.singleActionCell {
-  width: 50px;
+.setupLead,
+.finishTitle {
+  margin: 0;
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.setupBody,
+.finishDescription,
+.sourceDescription {
+  margin: 0;
+  color: $gray-400;
+  line-height: 1.5;
+}
+
+.sourceGrid,
+.finishSection {
+  margin-top: 1rem;
+}
+
+.sourceGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.sourceCard,
+.finishSection,
+.setupBlock {
+  border: 1px solid $white-10;
+  border-radius: $component-border-radius-md;
+  background: $gray-1350;
+}
+
+.sourceCard {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 14rem;
+  padding: 1rem;
+}
+
+.sourceHeader,
+.setupIntroText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.sourceTitle {
+  margin: 0;
+  font-size: 1rem;
+  color: $ui-white;
+  font-weight: 600;
+}
+
+.sourceMeta,
+.setupHint {
+  color: $gray-500;
+  font-size: calc(1rem - 2px);
+}
+
+.finishSection {
+  display: flex;
+  padding: 2rem 1rem;
+  align-items: center;
+  justify-content: center;
   text-align: center;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.finishBadge {
+  padding: 0.35rem 0.7rem;
+  font-size: calc(1rem - 3px);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  border-radius: 2px;
+  color: $blue-300;
+  background-color: rgb(87 153 255 / 12%);
+  border: 1px solid rgb(87 153 255 / 22%);
+}
+
+.setupShell {
+  margin-top: 1rem;
+  border-top: 1px solid $white-10;
+  padding-top: 1rem;
+}
+
+.setupIntro {
+  padding: 0 2rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.setupBlock {
+  list-style: none;
+  margin: 0 2rem;
+  padding: 1rem;
+}
+
+.setupActions {
+  margin-top: 0.75rem;
+}
+
+.statusIdle {
+  color: $gray-400;
+  background-color: $white-3;
+}
+
+.statusPending {
+  color: $orange-400;
+  background-color: rgb(255 162 0 / 10%);
+}
+
+.statusReady {
+  color: $green-400;
+  background-color: rgb(57 198 120 / 10%);
+}
+
+@media (max-width: $medium-screen) {
+  .sourceGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .setupIntro {
+    flex-direction: column;
+  }
+
+  .setupBlock {
+    margin: 0;
+  }
 }

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

@@ -1,45 +1,61 @@
-import { ImportMap, getErrorMessage } from 'ontime-utils';
-import { ChangeEvent, useRef, useState } from 'react';
+import type {
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+  SpreadsheetWorksheetOptions,
+} from 'ontime-types';
+import { getErrorMessage, ImportMap } from 'ontime-utils';
+import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { IoCloudOutline, IoDownloadOutline } from 'react-icons/io5';
 
 import {
-  importRundownPreview as importRundownPreviewExcel,
+  getWorksheetMetadata as getExcelWorksheetMetadata,
+  importRundownPreview as importExcelPreview,
   upload as uploadExcel,
 } from '../../../../../common/api/excel';
-import { getWorksheetNames } from '../../../../../common/api/sheets';
-import { maybeAxiosError } from '../../../../../common/api/utils';
+import {
+  getWorksheetMetadata as getGoogleWorksheetMetadata,
+  previewRundown as previewGoogleSheet,
+  uploadRundown,
+} from '../../../../../common/api/sheets';
 import Button from '../../../../../common/components/buttons/Button';
-import * as Editor from '../../../../../common/components/editor-utils/EditorUtils';
+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 * as Panel from '../../../panel-utils/PanelUtils';
-import GSheetInfo from './GSheetInfo';
 import GSheetSetup from './GSheetSetup';
-import ImportMapForm from './import-map/ImportMapForm';
-import ImportReview from './ImportReview';
-import useGoogleSheet from './useGoogleSheet';
-import { useSheetStore } from './useSheetStore';
+import SheetImportEditor from './sheet-import/SheetImportEditor';
+import useSpreadsheetImport from './useSpreadsheetImport';
 
 import style from './SourcesPanel.module.scss';
 
+const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadsheet-gsheet/';
+
+type ActiveSource =
+  | {
+      kind: 'excel';
+      worksheetNames: string[];
+      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
+      closedByUser: boolean;
+    }
+  | {
+      kind: 'gsheet';
+      sheetId: string;
+      worksheetNames: string[];
+      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
+      title: string;
+      closedByUser: boolean;
+    };
+
 export default function SourcesPanel() {
   const [importFlow, setImportFlow] = useState<'none' | 'excel' | 'gsheet' | 'finished'>('none');
   const [error, setError] = useState('');
   const [hasFile, setHasFile] = useState<'none' | 'loading' | 'done'>('none');
+  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
 
-  const { exportRundown, importRundownPreview, verifyAuth } = useGoogleSheet();
-
-  const setWorksheets = useSheetStore((state) => state.setWorksheets);
-  const authenticationStatus = useSheetStore((state) => state.authenticationStatus);
-  const setAuthenticationStatus = useSheetStore((state) => state.setAuthenticationStatus);
-  const rundown = useSheetStore((state) => state.rundown);
-  const setRundown = useSheetStore((state) => state.setRundown);
-  const customFields = useSheetStore((state) => state.customFields);
-  const setCustomFields = useSheetStore((state) => state.setCustomFields);
-  const summary = useSheetStore((state) => state.summary);
-  const setSummary = useSheetStore((state) => state.setSummary);
-  const setSheetId = useSheetStore((state) => state.setSheetId);
-  const sheetId = useSheetStore((state) => state.sheetId);
-  const resetPreview = useSheetStore((state) => state.resetPreview);
+  const { data: currentRundown } = useRundown();
+  const { importRundown } = useSpreadsheetImport();
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -47,21 +63,27 @@ export default function SourcesPanel() {
     const fileToUpload = event.target.files?.[0];
 
     if (!fileToUpload) {
-      setWorksheets(null);
+      setActiveSource(null);
       setHasFile('none');
       return;
     }
     try {
       setHasFile('loading');
+      setError('');
       validateExcelImport(fileToUpload);
-      const names = await uploadExcel(fileToUpload);
-      setWorksheets(names);
+      const worksheetOptions = await uploadExcel(fileToUpload);
+      setActiveSource({
+        kind: 'excel',
+        worksheetNames: worksheetOptions.worksheets,
+        initialWorksheetMetadata: worksheetOptions.metadata,
+        closedByUser: false,
+      });
       setImportFlow('excel');
       setHasFile('done');
     } catch (error) {
       const errorMessage = getErrorMessage(error);
       setError(`Error uploading file: ${errorMessage}`);
-      setWorksheets(null);
+      setActiveSource(null);
       setHasFile('none');
     }
   };
@@ -71,32 +93,15 @@ export default function SourcesPanel() {
   };
 
   const resetFlow = () => {
-    // we purposely omit clearing the authentication status
     setImportFlow('none');
-    setRundown(null);
     setHasFile('none');
-    setWorksheets(null);
-    setCustomFields(null);
-    setSummary(null);
+    setActiveSource(null);
     setError('');
-    setSheetId(null);
   };
 
-  const openGSheetFlow = async () => {
-    const result = await verifyAuth();
-    if (result) {
-      setAuthenticationStatus(result.authenticated);
-      setSheetId(result.sheetId);
-      if (result.authenticated === 'authenticated' && result.sheetId) {
-        try {
-          const names = await getWorksheetNames(result.sheetId);
-          setWorksheets(names);
-        } catch (error) {
-          const message = maybeAxiosError(error);
-          setError(`Error getting worksheets: ${message}`);
-        }
-      }
-    }
+  const openGSheetFlow = () => {
+    setError('');
+    setActiveSource(null);
     setImportFlow('gsheet');
   };
 
@@ -104,66 +109,123 @@ export default function SourcesPanel() {
     resetFlow();
   };
 
-  const handleSubmitImportPreview = async (importMap: ImportMap) => {
-    setError(''); // to clear previous error
-    if (importFlow === 'excel') {
-      try {
-        const previewData = await importRundownPreviewExcel(importMap);
-        setRundown(previewData.rundown);
-        setCustomFields(previewData.customFields);
-        setSummary(previewData.summary);
-      } catch (error) {
-        setError(maybeAxiosError(error));
-      }
-    }
-
-    if (importFlow === 'gsheet') {
-      if (!sheetId) return;
-      await importRundownPreview(sheetId, importMap);
-    }
-  };
-
-  const cancelImportMap = async () => {
-    resetFlow();
-    if (authenticationStatus === 'authenticated') {
-      const result = await verifyAuth();
-      if (result) {
-        setAuthenticationStatus(result.authenticated);
-      }
+  const cancelImportFlow = () => {
+    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 = () => {
     setImportFlow('finished');
-    setRundown(null);
     setHasFile('none');
-    setWorksheets(null);
-    setCustomFields(null);
+    setActiveSource(null);
     setError('');
   };
 
-  const handleSubmitExport = async (importMap: ImportMap) => {
-    if (!sheetId) return;
-    await exportRundown(sheetId, importMap);
+  const handleApplyImport = async (preview: SpreadsheetPreviewResponse) => {
+    if (!currentRundown) {
+      throw new Error('No current rundown loaded');
+    }
+
+    await importRundown(
+      {
+        [currentRundown.id]: {
+          ...preview.rundown,
+          id: currentRundown.id,
+          title: currentRundown.title,
+        },
+      },
+      preview.customFields,
+    );
+    handleFinished();
   };
 
-  const isExcelFlow = importFlow === 'excel';
+  const loadWorksheetMetadata = useCallback(
+    (worksheet: string) => {
+      if (!activeSource) {
+        throw new Error('No spreadsheet source loaded');
+      }
+
+      return activeSource.kind === 'excel'
+        ? getExcelWorksheetMetadata(worksheet)
+        : getGoogleWorksheetMetadata(activeSource.sheetId, worksheet);
+    },
+    [activeSource],
+  );
+
+  const previewImport = useCallback(
+    (importMap: ImportMap): Promise<SpreadsheetPreviewResponse> => {
+      if (!activeSource) {
+        throw new Error('No spreadsheet source loaded');
+      }
+
+      return activeSource.kind === 'excel'
+        ? importExcelPreview(importMap)
+        : previewGoogleSheet(activeSource.sheetId, importMap);
+    },
+    [activeSource],
+  );
+
+  const exportToGoogleSheet = useCallback(
+    (importMap: ImportMap): Promise<void> => {
+      if (!activeSource || activeSource.kind !== 'gsheet') {
+        throw new Error('Google Sheet source not available');
+      }
+
+      return uploadRundown(activeSource.sheetId, importMap);
+    },
+    [activeSource],
+  );
+
+  const handleSheetLoaded = useCallback((sheetId: string, worksheetOptions: SpreadsheetWorksheetOptions) => {
+    setActiveSource({
+      kind: 'gsheet',
+      sheetId,
+      worksheetNames: worksheetOptions.worksheets,
+      initialWorksheetMetadata: worksheetOptions.metadata,
+      title: worksheetOptions.title ?? '',
+      closedByUser: false,
+    });
+  }, []);
+
+  const closedByUser = activeSource?.closedByUser ?? false;
   const isGSheetFlow = importFlow === 'gsheet';
-  const isAuthenticated = authenticationStatus === 'authenticated';
   const showInput = importFlow === 'none';
   const showCompleted = importFlow === 'finished';
-  const showAuth = isGSheetFlow && !isAuthenticated;
-  const showImportMap = (isGSheetFlow && isAuthenticated) || (isExcelFlow && hasFile === 'done');
-  const showReview = rundown !== null && customFields !== null && summary !== null;
+
+  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}`;
+  })();
 
   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 && (
-          <>
-            <GSheetInfo />
+          <div className={style.introStack}>
+            <Info>
+              <Info.Title>Choose between a quick file import or a live Google Sheet connection.</Info.Title>
+              <Info.Body>
+                Google Sheets sync needs a client secret and a one-time device authentication before you can load a
+                sheet by ID.
+              </Info.Body>
+              <Info.Footer>
+                <ExternalLink href={googleSheetDocsUrl}>Read setup guide</ExternalLink>
+              </Info.Footer>
+            </Info>
             <input
               ref={fileInputRef}
               style={{ display: 'none' }}
@@ -172,61 +234,69 @@ export default function SourcesPanel() {
               accept='.xlsx'
               data-testid='file-input'
             />
-            <div className={style.uploadSection}>
-              <div>
-                <Button variant='primary' onClick={handleUpload} loading={hasFile === 'loading'}>
+            <div className={style.sourceGrid}>
+              <section className={style.sourceCard}>
+                <div className={style.sourceHeader}>
+                  <h4 className={style.sourceTitle}>Import spreadsheet</h4>
+                </div>
+                <p className={style.sourceDescription}>
+                  Bring in a one-off spreadsheet, review the mapping, and apply the data to the current rundown.
+                </p>
+                <div className={style.sourceMeta}>Accepts `.xlsx` files</div>
+                <Button variant='primary' size='large' fluid onClick={handleUpload} loading={hasFile === 'loading'}>
                   <IoDownloadOutline />
                   Import from spreadsheet
                 </Button>
-                <Panel.Description>Accepts .xlsx files</Panel.Description>
-              </div>
-              <Editor.Separator orientation='vertical' />
-              <div>
-                <Button variant='primary' onClick={openGSheetFlow} disabled={hasFile !== 'none'}>
+              </section>
+              <section className={style.sourceCard}>
+                <div className={style.sourceHeader}>
+                  <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.
+                </p>
+                <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>
-                <Panel.Description>Start authentication process</Panel.Description>
-              </div>
+              </section>
             </div>
-          </>
+          </div>
         )}
         {showCompleted && (
           <div className={style.finishSection}>
-            {error ? (
-              <span key='finish__error' className={style.error}>
-                Import failed
-              </span>
-            ) : (
-              <span key='finish__success' className={style.success}>
-                Import successful
-              </span>
-            )}
-            <Button variant='primary' onClick={resetFlow}>
-              Return
+            <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>
         )}
-        {showAuth && <GSheetSetup onCancel={cancelGSheetFlow} />}
-        {showImportMap && !showReview && (
-          <ImportMapForm
-            hasErrors={Boolean(error)}
-            isSpreadsheet={isExcelFlow}
-            onCancel={cancelImportMap}
-            onSubmitExport={handleSubmitExport}
-            onSubmitImport={handleSubmitImportPreview}
-          />
-        )}
-        {showReview && (
-          <ImportReview
-            rundown={rundown}
-            customFields={customFields}
-            summary={summary}
-            onFinished={handleFinished}
-            onCancel={cancelImportMap}
-            onBack={resetPreview}
-          />
+        {isGSheetFlow && (
+          <GSheetSetup onCancel={cancelGSheetFlow} onSheetLoaded={handleSheetLoaded} closedByUser={closedByUser} />
         )}
+        <Modal
+          isOpen={showImportWorkspace}
+          title={importModalTitle}
+          showBackdrop
+          showCloseButton
+          size='wide'
+          onClose={cancelImportFlow}
+          bodyElements={
+            <SheetImportEditor
+              sourceKey={sourceKey ?? 'spreadsheet'}
+              worksheetNames={activeSource?.worksheetNames ?? []}
+              initialMetadata={activeSource?.initialWorksheetMetadata ?? null}
+              loadMetadata={loadWorksheetMetadata}
+              previewImport={previewImport}
+              onApply={handleApplyImport}
+              onCancel={cancelImportFlow}
+              onExport={activeSource?.kind === 'gsheet' ? exportToGoogleSheet : undefined}
+            />
+          }
+        />
       </Panel.Card>
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/__tests__/gsheetUtils.test.ts

@@ -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('');
+  });
+});

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/gsheetUtils.ts

@@ -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);
+}

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -1,250 +0,0 @@
-import { ImportMap, checkRegex } from 'ontime-utils';
-import { useEffect, useState } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoTrash } from 'react-icons/io5';
-
-import Button from '../../../../../../common/components/buttons/Button';
-import IconButton from '../../../../../../common/components/buttons/IconButton';
-import Info from '../../../../../../common/components/info/Info';
-import Input from '../../../../../../common/components/input/input/Input';
-import Select from '../../../../../../common/components/select/Select';
-import Tooltip from '../../../../../../common/components/tooltip/Tooltip';
-import * as Panel from '../../../../panel-utils/PanelUtils';
-import useGoogleSheet from '../useGoogleSheet';
-import { useSheetStore } from '../useSheetStore';
-import { NamedImportMap, convertToImportMap, getPersistedOptions, persistImportMap } from './importMapUtils';
-
-import style from '../SourcesPanel.module.scss';
-
-interface ImportMapFormProps {
-  hasErrors: boolean;
-  isSpreadsheet: boolean;
-  onCancel: () => void;
-  onSubmitExport: (importMap: ImportMap) => Promise<void>;
-  onSubmitImport: (importMap: ImportMap) => Promise<void>;
-}
-
-export default function ImportMapForm({
-  hasErrors,
-  isSpreadsheet,
-  onCancel,
-  onSubmitExport,
-  onSubmitImport,
-}: ImportMapFormProps) {
-  const namedImportMap = getPersistedOptions();
-  const { revoke } = useGoogleSheet();
-  const {
-    control,
-    handleSubmit,
-    register,
-    setValue,
-    watch,
-    formState: { errors, isValid },
-  } = useForm<NamedImportMap>({
-    mode: 'onChange',
-    defaultValues: namedImportMap,
-    values: namedImportMap,
-  });
-
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: 'custom',
-  });
-
-  const stepData = useSheetStore((state) => state.stepData);
-  const worksheetNames = useSheetStore((state) => state.worksheetNames);
-
-  const [loading, setLoading] = useState<'' | 'export' | 'import'>('');
-
-  // Set first sheet as default worksheet when 'event schedule' sheet is not there
-  useEffect(() => {
-    if (!worksheetNames || worksheetNames.length === 0) return;
-    if (!worksheetNames.includes(namedImportMap.Worksheet)) {
-      setValue('Worksheet', worksheetNames[0], { shouldValidate: true, shouldDirty: true });
-    }
-  }, [worksheetNames, setValue, namedImportMap.Worksheet]);
-
-  const handleExport = async (values: NamedImportMap) => {
-    setLoading('export');
-    const importMap = convertToImportMap(values);
-
-    await onSubmitExport(importMap);
-    setLoading('');
-  };
-
-  const handleRevoke = async () => {
-    await revoke();
-    onCancel();
-  };
-
-  const handleImportPreview = async (values: NamedImportMap) => {
-    setLoading('import');
-    const importMap = convertToImportMap(values);
-    persistImportMap(values);
-    await onSubmitImport(importMap);
-    setLoading('');
-  };
-
-  const deleteCustomImport = (index: number) => {
-    remove(index);
-  };
-
-  const addCustomImport = () => {
-    append({});
-  };
-
-  const isLoading = Boolean(loading);
-  const canSubmitSpreadsheet = isSpreadsheet && !isLoading;
-  const canSubmitGSheet = !isLoading && !stepData.worksheet.error;
-  const canSubmit = !hasErrors && isValid && (canSubmitSpreadsheet || canSubmitGSheet);
-
-  return (
-    <Panel.Section as='form' id='import-map'>
-      <Panel.Title>
-        Import options
-        <Panel.InlineElements>
-          {!isSpreadsheet && (
-            <Tooltip
-              text='Revoke the google authentication'
-              render={<Button />}
-              onClick={handleRevoke}
-              disabled={isLoading}
-            >
-              Revoke
-            </Tooltip>
-          )}
-          <Button onClick={onCancel} disabled={isLoading}>
-            Cancel
-          </Button>
-          {!isSpreadsheet && (
-            <Button
-              variant='primary'
-              onClick={handleSubmit(handleExport)}
-              disabled={!canSubmitGSheet}
-              loading={loading === 'export'}
-            >
-              Export
-            </Button>
-          )}
-          <Button
-            variant='primary'
-            onClick={handleSubmit(handleImportPreview)}
-            disabled={!canSubmit}
-            loading={loading === 'import'}
-          >
-            Import preview
-          </Button>
-        </Panel.InlineElements>
-      </Panel.Title>
-      <Info>
-        Match your spreadsheet columns to Ontime fields. <br />
-        You can also add Custom Fields by providing a name for Ontime and the spreadsheet column name.
-      </Info>
-      <Panel.Table>
-        <thead>
-          <tr>
-            <th>Ontime field</th>
-            <th>Column name in spreadsheet</th>
-            <th className={style.singleActionCell} />
-          </tr>
-        </thead>
-        <tbody>
-          {Object.entries(namedImportMap).map(([label, importName]) => {
-            if (label === 'custom') {
-              return null;
-            }
-            if (label === 'Worksheet') {
-              return (
-                <tr key={importName as string}>
-                  <td>{label}</td>
-                  <td>
-                    <Select
-                      id={importName as string}
-                      value={watch(label as keyof NamedImportMap) as string}
-                      onValueChange={(value: string | null) => {
-                        if (value === null) return;
-                        setValue(label as keyof NamedImportMap, value, { shouldDirty: true });
-                      }}
-                      options={worksheetNames?.map((name) => ({ value: name, label: name })) || []}
-                    />
-                  </td>
-                  <td className={style.singleActionCell} />
-                </tr>
-              );
-            }
-            return (
-              <tr key={importName as string}>
-                <td>{label}</td>
-                <td>
-                  <Input
-                    id={importName as string}
-                    fluid
-                    maxLength={25}
-                    defaultValue={importName as string}
-                    placeholder='Use default column name'
-                    {...register(label as keyof NamedImportMap)}
-                  />
-                </td>
-                <td className={style.singleActionCell} />
-              </tr>
-            );
-          })}
-          {fields.map((field, index) => {
-            const ontimeName = field.ontimeName;
-            const importName = field.importName;
-            const maybeOntimeError = errors.custom?.[index]?.ontimeName?.message;
-            const key = `custom.${index}.ontimeName`;
-            return (
-              <tr key={key}>
-                <td>
-                  <Input
-                    maxLength={25}
-                    fluid
-                    defaultValue={ontimeName}
-                    placeholder='Name of the field as shown in Ontime'
-                    {...register(`custom.${index}.ontimeName`, {
-                      validate: (value) => {
-                        if (!checkRegex.isAlphanumericWithSpace(value))
-                          return 'Only alphanumeric characters and space are allowed';
-                        return true;
-                      },
-                    })}
-                  />
-                  {maybeOntimeError && <Panel.Error>{maybeOntimeError}</Panel.Error>}
-                </td>
-                <td>
-                  <Input
-                    maxLength={25}
-                    fluid
-                    defaultValue={importName}
-                    placeholder='Name of the column in the spreadsheet'
-                    {...register(`custom.${index}.importName`)}
-                  />
-                </td>
-                <td className={style.singleActionCell}>
-                  <IconButton
-                    variant='ghosted-destructive'
-                    aria-label='Delete entry'
-                    onClick={() => deleteCustomImport(index)}
-                  >
-                    <IoTrash />
-                  </IconButton>
-                </td>
-              </tr>
-            );
-          })}
-          <tr>
-            <td />
-            <Panel.InlineElements as='td' align='end'>
-              <Button onClick={addCustomImport}>
-                Add custom field <IoAdd />
-              </Button>
-            </Panel.InlineElements>
-            <td />
-          </tr>
-        </tbody>
-      </Panel.Table>
-      <Panel.Error>{stepData.worksheet.error}</Panel.Error>
-    </Panel.Section>
-  );
-}

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/__test__/importMapUtils.test.ts

@@ -1,38 +0,0 @@
-import { ImportCustom } from 'ontime-utils';
-
-import { NamedImportMap, convertToImportMap } from '../importMapUtils';
-
-describe('convertToImportMap', () => {
-  it('converts a namedImportMap to a importMap', () => {
-    const defaultNamedImporMap = {
-      Worksheet: 'event schedule',
-      Start: 'time start',
-      'Link start': 'link start',
-      End: 'time end',
-      Duration: 'duration',
-      Cue: 'cue',
-      Title: 'title',
-      Skip: 'skip',
-      Note: 'notes',
-      Colour: 'colour',
-      'End action': 'end action',
-      'Timer type': 'timer type',
-      'Time warning': 'warning time',
-      'Time danger': 'danger time',
-      custom: [
-        { ontimeName: 'Custom1        ', importName: 'custom1' },
-        { ontimeName: 'Custom2', importName: 'custom2' },
-        { ontimeName: 'Custom3', importName: 'custom3' },
-        { ontimeName: 'EmptyImportName', importName: '' },
-        { ontimeName: '', importName: 'EmptyOntimeName' },
-      ] as ImportCustom[],
-    } as NamedImportMap;
-
-    const importMap = convertToImportMap(defaultNamedImporMap);
-    expect(importMap.custom).toStrictEqual({
-      Custom1: 'custom1',
-      Custom2: 'custom2',
-      Custom3: 'custom3',
-    });
-  });
-});

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/importMapUtils.ts

@@ -1,92 +0,0 @@
-import { ImportCustom, ImportMap } from 'ontime-utils';
-
-import { makeStageKey } from '../../../../../../common/utils/localStorage';
-
-export type NamedImportMap = typeof namedImportMap;
-
-// Record of label and import name
-const namedImportMap = {
-  Worksheet: 'event schedule',
-  Flag: 'flag',
-  Start: 'time start',
-  'Link start': 'link start',
-  End: 'time end',
-  Duration: 'duration',
-  Cue: 'cue',
-  Title: 'title',
-  'Count to end': 'count to end',
-  Skip: 'skip',
-  Note: 'notes',
-  Colour: 'colour',
-  'End action': 'end action',
-  'Timer type': 'timer type',
-  'Time warning': 'warning time',
-  'Time danger': 'danger time',
-  ID: 'id',
-  custom: [] as ImportCustom[],
-};
-
-function isNamedImportMap(obj: unknown): obj is NamedImportMap {
-  if (typeof obj !== 'object' || obj === null) {
-    return false;
-  }
-
-  const keys = Object.keys(namedImportMap);
-  return keys.every((key) => Object.hasOwn(obj, key));
-}
-
-export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
-  const custom = namedImportMap.custom.reduce((accumulator, { ontimeName, importName }) => {
-    if (ontimeName && importName) {
-      accumulator[ontimeName.trim()] = importName.trim();
-    }
-    return accumulator;
-  }, {});
-
-  return {
-    worksheet: namedImportMap.Worksheet,
-    flag: namedImportMap.Flag,
-    timeStart: namedImportMap.Start,
-    linkStart: namedImportMap['Link start'],
-    timeEnd: namedImportMap.End,
-    duration: namedImportMap.Duration,
-    cue: namedImportMap.Cue,
-    title: namedImportMap.Title,
-    countToEnd: namedImportMap['Count to end'],
-    skip: namedImportMap.Skip,
-    note: namedImportMap.Note,
-    colour: namedImportMap.Colour,
-    endAction: namedImportMap['End action'],
-    timerType: namedImportMap['Timer type'],
-    timeWarning: namedImportMap['Time warning'],
-    timeDanger: namedImportMap['Time danger'],
-    custom,
-    id: namedImportMap.ID,
-  };
-}
-
-const importMapKey = makeStageKey('import-map');
-
-export function persistImportMap(options: NamedImportMap) {
-  localStorage.setItem(importMapKey, JSON.stringify(options));
-}
-
-function getPersistImportMap(): unknown {
-  const options = localStorage.getItem(importMapKey);
-  if (!options) {
-    throw new Error('no import options found');
-  }
-  return JSON.parse(options);
-}
-
-export function getPersistedOptions(): NamedImportMap {
-  try {
-    const options = getPersistImportMap();
-    if (!isNamedImportMap(options)) {
-      return namedImportMap;
-    }
-    return options;
-  } catch {
-    return namedImportMap;
-  }
-}

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

@@ -1,28 +0,0 @@
-.center {
-  text-align: center;
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-tr .secondaryRow {
-  background-color: $white-7;
-  padding-left: 2em;
-}
-
-.linkStartActive {
-  flex-shrink: 0;
-  color: $active-indicator;
-  transform: rotate(-45deg);
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.subdued {
-  opacity: $opacity-disabled;
-}

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

@@ -1,195 +0,0 @@
-import { CustomFields, Rundown, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
-import { Fragment } from 'react';
-import { IoLink } from 'react-icons/io5';
-
-import Tag from '../../../../../../common/components/tag/Tag';
-import { getAccessibleColour } from '../../../../../../common/utils/styleUtils';
-import * as Panel from '../../../../panel-utils/PanelUtils';
-
-import style from './PreviewRundown.module.scss';
-
-interface PreviewRundownProps {
-  rundown: Rundown;
-  customFields: CustomFields;
-}
-
-function booleanToText(value?: boolean) {
-  return value ? 'Yes' : undefined;
-}
-
-export default function PreviewRundown({ rundown, customFields }: PreviewRundownProps) {
-  // we only count Ontime Events which are 1 based in client
-  let eventIndex = 0;
-
-  const fieldKeys = Object.keys(customFields);
-  const fieldLabels = fieldKeys.map((key) => customFields[key].label);
-
-  return (
-    <Panel.Table className={style.nowrap}>
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Type</th>
-          <th>Cue</th>
-          <th>Title</th>
-          <th>Flag</th>
-          <th>Time Start</th>
-          <th>Time End</th>
-          <th>Duration</th>
-          <th>Warning Time</th>
-          <th>Danger Time</th>
-          <th>Count to end</th>
-          <th>Skip</th>
-          <th>Colour</th>
-          <th>Timer Type</th>
-          <th>End Action</th>
-          {fieldLabels.map((label) => (
-            <th key={label}>{label}</th>
-          ))}
-          <th>ID</th>
-        </tr>
-      </thead>
-      <tbody>
-        {rundown.flatOrder.map((entryId) => {
-          const entry = rundown.entries[entryId];
-          if (isOntimeGroup(entry)) {
-            const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
-            return (
-              <tr key={entry.id}>
-                <td /> {/** Index */}
-                <td className={style.center}>
-                  <Tag>{entry.type}</Tag>
-                </td>
-                <td /> {/** CUE */}
-                <td>{entry.title}</td>
-                <td /> {/** Flag */}
-                <td /> {/** Time Start */}
-                <td /> {/** Time End */}
-                <td /> {/** Duration */}
-                <td /> {/** Warning Time */}
-                <td /> {/** Danger Time */}
-                <td /> {/** Count to end */}
-                <td /> {/** Skip */}
-                <td style={{ ...colour }}>{entry.colour}</td>
-                <td /> {/** Timer Type */}
-                <td /> {/** End Action */}
-                {fieldKeys.map((field) => {
-                  let value = '';
-                  if (field in entry.custom) {
-                    value = entry.custom[field];
-                  }
-                  return <td key={field}>{value}</td>;
-                })}
-                <td className={style.center}>
-                  <Tag>{entry.id}</Tag>
-                </td>
-              </tr>
-            );
-          }
-          if (isOntimeMilestone(entry)) {
-            const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
-            return (
-              <Fragment key={entry.id}>
-                <tr>
-                  <td /> {/** Index */}
-                  <td className={style.center}>
-                    <Tag>{entry.type}</Tag>
-                  </td>
-                  <td className={style.nowrap}>{entry.cue}</td>
-                  <td>{entry.title}</td>
-                  <td /> {/** Flag */}
-                  <td /> {/** Time Start */}
-                  <td /> {/** Time End */}
-                  <td /> {/** Duration */}
-                  <td /> {/** Warning Time */}
-                  <td /> {/** Danger Time */}
-                  <td /> {/** Count to end */}
-                  <td /> {/** Skip */}
-                  <td style={{ ...colour }}>{entry.colour}</td>
-                  <td /> {/** Timer Type */}
-                  <td /> {/** End Action */}
-                  {fieldKeys.map((field) => {
-                    let value = '';
-                    if (field in entry.custom) {
-                      value = entry.custom[field];
-                    }
-                    return <td key={field}>{value}</td>;
-                  })}
-                  <td className={style.center}>
-                    <Tag>{entry.id}</Tag>
-                  </td>
-                </tr>
-                {entry.note && (
-                  <tr>
-                    <td colSpan={99} className={style.secondaryRow}>
-                      Note: {entry.note}
-                    </td>
-                  </tr>
-                )}
-              </Fragment>
-            );
-          }
-          if (!isOntimeEvent(entry)) {
-            return null;
-          }
-          eventIndex += 1;
-          const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
-          const countToEnd = booleanToText(entry.countToEnd);
-          const skip = booleanToText(entry.skip);
-          const flag = booleanToText(entry.flag);
-
-          return (
-            <Fragment key={entry.id}>
-              <tr>
-                <td className={style.center}>
-                  <Tag>{eventIndex}</Tag>
-                </td>
-                <td className={style.center}>
-                  <Tag>{entry.type}</Tag>
-                </td>
-                <td className={style.nowrap}>{entry.cue}</td>
-                <td>{entry.title}</td>
-                <td className={style.center}>{flag && <Tag>{flag}</Tag>}</td>
-                <td className={style.flex}>
-                  <span className={entry.linkStart ? style.subdued : undefined}>{millisToString(entry.timeStart)}</span>
-                  {entry.linkStart && <IoLink className={style.linkStartActive} />}
-                </td>
-                <td>{millisToString(entry.timeEnd)}</td>
-                <td>{millisToString(entry.duration)}</td>
-                <td>{millisToString(entry.timeWarning)}</td>
-                <td>{millisToString(entry.timeDanger)}</td>
-                <td className={style.center}>{countToEnd && <Tag>{countToEnd}</Tag>}</td>
-                <td>{skip && <Tag>{skip}</Tag>}</td>
-                <td style={{ ...colour }}>{entry.colour}</td>
-                <td className={style.center}>
-                  <Tag>{entry.timerType}</Tag>
-                </td>
-                <td className={style.center}>
-                  <Tag>{entry.endAction}</Tag>
-                </td>
-                {fieldKeys.map((field) => {
-                  let value = '';
-                  if (field in entry.custom) {
-                    value = entry.custom[field];
-                  }
-                  return <td key={field}>{value}</td>;
-                })}
-                <td className={style.center}>
-                  <Tag>{entry.id}</Tag>
-                </td>
-              </tr>
-              {entry.note && (
-                <tr>
-                  <td colSpan={99} className={style.secondaryRow}>
-                    Note: {entry.note}
-                  </td>
-                </tr>
-              )}
-            </Fragment>
-          );
-        })}
-      </tbody>
-    </Panel.Table>
-  );
-}

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { IoCheckmark } from 'react-icons/io5';
+
+import AutocompleteInput from '../../../../../../common/components/autocomplete-input/AutocompleteInput';
+import { cx } from '../../../../../../common/utils/styleUtils';
+import type { MappingWarning } from './importMapUtils';
+
+import style from './SheetImportEditor.module.scss';
+
+export function getWarningText(warning: MappingWarning): string {
+  switch (warning.kind) {
+    case 'duplicate':
+      return 'Column mapped more than once';
+    case 'missing':
+      return 'Column not in current headers, check preview';
+    case 'invalid-name':
+      return 'Column cannot be converted into an Ontime field name';
+    case 'name-collision':
+      return 'Column name resolves to a duplicate Ontime field';
+    default:
+      return '';
+  }
+}
+
+interface MappingFieldRowProps {
+  header: ReactNode;
+  value: string;
+  onValueChange: (value: string) => void;
+  warning?: MappingWarning;
+  options: string[];
+  assigned: Set<string>;
+  disabled?: boolean;
+}
+
+export default function MappingFieldRow({
+  header,
+  value,
+  onValueChange,
+  warning,
+  options,
+  assigned,
+  disabled = false,
+}: MappingFieldRowProps) {
+  const warningText = warning ? getWarningText(warning) : undefined;
+
+  return (
+    <div className={style.mappingField}>
+      {header}
+      {warningText && <span className={style.mappingFieldWarning}>{warningText}</span>}
+      <AutocompleteInput
+        className={cx([style.columnInput, warning && style.columnInputWarn])}
+        maxLength={50}
+        options={options}
+        openOnFocus
+        trailingElement={(option) => (assigned.has(option) ? <IoCheckmark /> : null)}
+        placeholder='Spreadsheet column'
+        disabled={disabled}
+        title={warningText}
+        value={value}
+        onValueChange={onValueChange}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,162 @@
+.editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  min-height: 0;
+}
+
+.editorToolbar {
+  display: flex;
+  gap: 0.75rem 1rem;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 0.5rem 0;
+}
+
+.editorFooter {
+  padding: 0.75rem 0 0.5rem;
+}
+
+.worksheetControl {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.worksheetLabel {
+  color: $gray-300;
+  font-size: 0.9rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.addColumnTrigger {
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.editorBody {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
+  gap: 1rem;
+}
+
+.mappingPane,
+.previewPane {
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid $white-10;
+  background-color: $gray-1350;
+  border-radius: $component-border-radius-md;
+}
+
+.mappingPaneHeader,
+.previewPaneHeader {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-height: 3.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid $white-10;
+}
+
+.mappingPaneHeader {
+  align-items: flex-start;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.mappingPaneActions {
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  row-gap: 0.5rem;
+  max-width: 100%;
+}
+
+.mappingPaneTitle,
+.previewPaneTitle {
+  color: $ui-white;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.mappingPaneTitle {
+  align-self: center;
+}
+
+.mappingList {
+  min-height: 0;
+  overflow: auto;
+  padding: 0.75rem 0.75rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.mappingField {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.mappingFieldHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.mappingFieldTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.mappingFieldLabel {
+  color: $ui-white;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.mappingFieldWarning {
+  color: $orange-400;
+  font-size: 0.8rem;
+  line-height: 1.3;
+}
+
+.tableShell {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.columnInput {
+  width: 100%;
+}
+
+.columnInputWarn {
+  border-color: $orange-400;
+  box-shadow: 0 0 0 1px rgba($orange-400, 0.2);
+}
+
+@media (max-width: $medium-screen) {
+  .editorBody {
+    grid-template-columns: 1fr;
+  }
+
+  .editorToolbar {
+    align-items: center;
+  }
+
+  .worksheetControl {
+    justify-content: space-between;
+  }
+}

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

@@ -0,0 +1,140 @@
+import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
+import type { ImportMap } from 'ontime-utils';
+import { IoArrowUpOutline, IoEye } from 'react-icons/io5';
+
+import Button from '../../../../../../common/components/buttons/Button';
+import Select from '../../../../../../common/components/select/Select';
+import * as Panel from '../../../../panel-utils/PanelUtils';
+import PreviewTable from './preview/PreviewTable';
+import SheetImportMappingPane from './SheetImportMappingPane';
+import { useSheetImportForm } from './useSheetImportForm';
+
+import style from './SheetImportEditor.module.scss';
+
+interface SheetImportEditorProps {
+  sourceKey: string;
+  worksheetNames: string[];
+  initialMetadata: SpreadsheetWorksheetMetadata | null;
+  loadMetadata: (worksheet: string) => Promise<SpreadsheetWorksheetMetadata>;
+  previewImport: (importMap: ImportMap) => Promise<SpreadsheetPreviewResponse>;
+  onApply: (preview: SpreadsheetPreviewResponse) => Promise<void>;
+  onCancel: () => void;
+  onExport?: (importMap: ImportMap) => Promise<void>;
+}
+
+export default function SheetImportEditor({
+  sourceKey,
+  worksheetNames,
+  initialMetadata,
+  loadMetadata,
+  previewImport,
+  onApply,
+  onCancel,
+  onExport,
+}: SheetImportEditorProps) {
+  const {
+    values,
+    setValue,
+    fields,
+    addCustomField,
+    removeCustomField,
+    sampleHeaders,
+    assignedHeaders,
+    warnings,
+    columnLabels,
+    worksheetHeaders,
+    state,
+    toolbarStatus,
+    isLoadingMetadata,
+    isBusy,
+    canPreview,
+    displayError,
+    handlePreviewSubmit,
+    handleExportSubmit,
+    handleApply,
+  } = useSheetImportForm({
+    sourceKey,
+    worksheetNames,
+    initialMetadata,
+    loadMetadata,
+    previewImport,
+    onApply,
+    onExport,
+  });
+
+  return (
+    <Panel.Section as='form' id='spreadsheet-import-workspace' className={style.editor} onSubmit={handlePreviewSubmit}>
+      <Panel.InlineElements align='apart' wrap='wrap' className={style.editorToolbar}>
+        <label className={style.worksheetControl}>
+          <span className={style.worksheetLabel}>Worksheet</span>
+          <Select
+            options={worksheetNames.map((name) => ({ value: name, label: name }))}
+            value={values.worksheet}
+            onValueChange={(nextValue) =>
+              setValue('worksheet', nextValue ?? '', { shouldDirty: true, shouldValidate: true })
+            }
+          />
+        </label>
+        {toolbarStatus && <Panel.Description>{toolbarStatus}</Panel.Description>}
+      </Panel.InlineElements>
+
+      <div className={style.editorBody}>
+        <SheetImportMappingPane
+          values={values}
+          setValue={setValue}
+          warnings={warnings}
+          sampleHeaders={sampleHeaders}
+          assignedHeaders={assignedHeaders}
+          fields={fields}
+          addCustomField={addCustomField}
+          removeCustomField={removeCustomField}
+          isBusy={isBusy}
+        />
+
+        <section className={style.previewPane}>
+          <div className={style.previewPaneHeader}>
+            <span className={style.previewPaneTitle}>Import preview</span>
+          </div>
+          <div className={style.tableShell}>
+            <PreviewTable
+              preview={state.preview}
+              columnLabels={columnLabels}
+              isLoadingMetadata={isLoadingMetadata}
+              worksheetHeaders={worksheetHeaders}
+            />
+          </div>
+        </section>
+      </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
+          </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>
+      </Panel.InlineElements>
+    </Panel.Section>
+  );
+}

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

@@ -0,0 +1,118 @@
+import { useRef } from 'react';
+import { type FieldArrayWithId, type UseFormSetValue } from 'react-hook-form';
+import { IoAdd, IoTrash } from 'react-icons/io5';
+
+import Button from '../../../../../../common/components/buttons/Button';
+import IconButton from '../../../../../../common/components/buttons/IconButton';
+import Checkbox from '../../../../../../common/components/checkbox/Checkbox';
+import * as Panel from '../../../../panel-utils/PanelUtils';
+import {
+  type ImportFormValues,
+  type MappingWarning,
+  builtInFieldDefs,
+  getResolvedCustomFields,
+} from './importMapUtils';
+import MappingFieldRow from './MappingFieldRow';
+
+import style from './SheetImportEditor.module.scss';
+
+interface SheetImportMappingPaneProps {
+  values: ImportFormValues;
+  setValue: UseFormSetValue<ImportFormValues>;
+  warnings: Record<string, MappingWarning | undefined>;
+  sampleHeaders: string[];
+  assignedHeaders: Set<string>;
+  fields: FieldArrayWithId<ImportFormValues, 'custom', 'id'>[];
+  addCustomField: () => void;
+  removeCustomField: (index: number) => void;
+  isBusy: boolean;
+}
+
+export default function SheetImportMappingPane({
+  values,
+  setValue,
+  warnings,
+  sampleHeaders,
+  assignedHeaders,
+  fields,
+  addCustomField,
+  removeCustomField,
+  isBusy,
+}: SheetImportMappingPaneProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const resolvedCustomFields = getResolvedCustomFields(values.custom);
+
+  const handleAddCustomField = () => {
+    addCustomField();
+    requestAnimationFrame(() => listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' }));
+  };
+
+  return (
+    <section className={style.mappingPane}>
+      <Panel.InlineElements align='apart' className={style.mappingPaneHeader}>
+        <span className={style.mappingPaneTitle}>Column mapping</span>
+        <Panel.InlineElements relation='inner' className={style.mappingPaneActions}>
+          <Button className={style.addColumnTrigger} onClick={handleAddCustomField} disabled={isBusy}>
+            <IoAdd />
+            Add
+          </Button>
+        </Panel.InlineElements>
+      </Panel.InlineElements>
+
+      <div ref={listRef} className={style.mappingList}>
+        {builtInFieldDefs.map((def, index) => (
+          <MappingFieldRow
+            key={def.importKey}
+            header={
+              <label className={style.mappingFieldTitle}>
+                <Checkbox
+                  checked={values.builtIn[index]?.enabled !== false}
+                  onCheckedChange={(next) =>
+                    setValue(`builtIn.${index}.enabled`, next === true, { shouldDirty: true, shouldValidate: true })
+                  }
+                />
+                <span className={style.mappingFieldLabel}>{def.label}</span>
+              </label>
+            }
+            value={values.builtIn[index]?.header ?? ''}
+            onValueChange={(nextValue) =>
+              setValue(`builtIn.${index}.header`, nextValue, { shouldDirty: true, shouldValidate: true })
+            }
+            warning={values.builtIn[index]?.enabled !== false ? warnings[`builtIn.${index}.header`] : undefined}
+            options={sampleHeaders}
+            assigned={assignedHeaders}
+            disabled={values.builtIn[index]?.enabled === false}
+          />
+        ))}
+
+        {fields.map((field, index) => (
+          <MappingFieldRow
+            key={field.id}
+            header={
+              <div className={style.mappingFieldHeader}>
+                <span className={style.mappingFieldLabel}>
+                  {resolvedCustomFields[index]?.ontimeName || values.custom[index]?.importName || `Custom ${index + 1}`}
+                </span>
+                <IconButton
+                  variant='ghosted-destructive'
+                  aria-label={`Delete custom column ${resolvedCustomFields[index]?.ontimeName || values.custom[index]?.importName || `Custom ${index + 1}`}`}
+                  onClick={() => removeCustomField(index)}
+                >
+                  <IoTrash />
+                </IconButton>
+              </div>
+            }
+            value={values.custom[index]?.importName ?? ''}
+            onValueChange={(nextValue) => {
+              setValue(`custom.${index}.importName`, nextValue, { shouldDirty: true, shouldValidate: true });
+              setValue(`custom.${index}.ontimeName`, '', { shouldDirty: true, shouldValidate: true });
+            }}
+            warning={warnings[`custom.${index}.importName`]}
+            options={sampleHeaders}
+            assigned={assignedHeaders}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/__tests__/importMapUtils.test.ts

@@ -0,0 +1,130 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  builtInFieldDefs,
+  convertToImportMap,
+  createDefaultFormValues,
+  getImportWarnings,
+  getResolvedCustomFields,
+} from '../importMapUtils';
+
+const cueIndex = builtInFieldDefs.findIndex((field) => field.label === 'Cue');
+const titleIndex = builtInFieldDefs.findIndex((field) => field.label === 'Title');
+
+describe('getImportWarnings()', () => {
+  it('warns when two mappings target the same spreadsheet column', () => {
+    const values = createDefaultFormValues();
+    values.builtIn[titleIndex] = { header: 'title', enabled: true };
+    values.custom = [{ ontimeName: '', importName: 'title' }];
+
+    const warnings = getImportWarnings(values, ['title']);
+
+    expect(warnings[`builtIn.${titleIndex}.header`]).toBeUndefined();
+    expect(warnings['custom.0.importName']).toStrictEqual({ kind: 'duplicate' });
+  });
+
+  it('warns when a mapped column is not present in the worksheet', () => {
+    const values = createDefaultFormValues();
+    values.builtIn[titleIndex] = { header: 'headline', enabled: true };
+
+    const warnings = getImportWarnings(values, ['title', 'cue']);
+
+    expect(warnings[`builtIn.${titleIndex}.header`]).toStrictEqual({ kind: 'missing' });
+  });
+
+  it('matches worksheet headers case-insensitively and ignores disabled or blank mappings', () => {
+    const values = createDefaultFormValues();
+    values.builtIn[cueIndex] = { header: 'title', enabled: false };
+    values.builtIn[titleIndex] = { header: 'TITLE', enabled: true };
+    values.custom = [
+      { ontimeName: '', importName: '' },
+      { ontimeName: '', importName: '   ' },
+    ];
+
+    const warnings = getImportWarnings(values, ['title']);
+
+    expect(warnings[`builtIn.${cueIndex}.header`]).toBeUndefined();
+    expect(warnings[`builtIn.${titleIndex}.header`]).toBeUndefined();
+    expect(warnings['custom.0.importName']).toBeUndefined();
+    expect(warnings['custom.1.importName']).toBeUndefined();
+  });
+
+  it('warns when a custom header cannot be converted into an Ontime field name', () => {
+    const values = createDefaultFormValues();
+    values.custom = [{ ontimeName: '', importName: '***' }];
+
+    const warnings = getImportWarnings(values, ['***']);
+
+    expect(warnings['custom.0.importName']).toStrictEqual({ kind: 'invalid-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' },
+      { ontimeName: '', importName: 'Artist/1' },
+      { ontimeName: '', importName: 'Title!' },
+      { ontimeName: '', importName: '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']).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();
+  });
+});
+
+describe('getResolvedCustomFields()', () => {
+  it('trims spreadsheet headers and derives the Ontime field name from them', () => {
+    const resolved = getResolvedCustomFields([
+      { ontimeName: '', importName: '  FOH/Monitor  ' },
+      { ontimeName: '', importName: 'Artist-1' },
+    ]);
+
+    expect(resolved).toStrictEqual([
+      { ontimeName: 'FOH Monitor', importName: 'FOH/Monitor' },
+      { ontimeName: 'Artist 1', importName: 'Artist-1' },
+    ]);
+  });
+
+  it('keeps invalid or empty custom headers unresolved', () => {
+    const resolved = getResolvedCustomFields([
+      { ontimeName: '', importName: '' },
+      { ontimeName: '', importName: '***' },
+    ]);
+
+    expect(resolved).toStrictEqual([
+      { ontimeName: '', importName: '' },
+      { ontimeName: '', importName: '***' },
+    ]);
+  });
+});
+
+describe('convertToImportMap()', () => {
+  it('uses resolved custom field names, skips invalid custom rows, and clears disabled built-in fields', () => {
+    const values = createDefaultFormValues();
+    values.builtIn[titleIndex] = { header: 'title', enabled: false };
+    values.custom = [
+      { ontimeName: 'ignored', importName: 'FOH/Monitor' },
+      { ontimeName: 'ignored', importName: '***' },
+    ];
+
+    const importMap = convertToImportMap(values);
+
+    expect(importMap.title).toBe('');
+    expect(importMap.cue).toBe('cue');
+    expect(importMap.custom).toStrictEqual({
+      'FOH Monitor': 'FOH/Monitor',
+    });
+  });
+});

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/__tests__/spreadsheetImportUtils.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+
+import { type ImportFormValues, builtInFieldDefs, createDefaultFormValues } from '../importMapUtils';
+import { deriveHeaderOptionsState } from '../spreadsheetImportUtils';
+
+function makeValues(patch: Partial<ImportFormValues>): ImportFormValues {
+  return {
+    ...createDefaultFormValues(),
+    ...patch,
+  };
+}
+
+function patchBuiltIn(
+  base: ImportFormValues,
+  patches: Record<string, Partial<{ header: string; enabled: boolean }>>,
+): ImportFormValues {
+  return {
+    ...base,
+    builtIn: base.builtIn.map((field, i) => {
+      const patch = patches[builtInFieldDefs[i].label];
+      return patch ? { ...field, ...patch } : field;
+    }),
+  };
+}
+
+describe('deriveHeaderOptionsState()', () => {
+  it('excludes disabled built-in fields from assigned headers', () => {
+    const values = patchBuiltIn(createDefaultFormValues(), {
+      Title: { header: 'title', enabled: true },
+      Cue: { header: 'cue', enabled: false },
+    });
+    const { assignedHeaders } = deriveHeaderOptionsState(values, ['title', 'cue']);
+
+    expect(assignedHeaders.has('title')).toBe(true);
+    expect(assignedHeaders.has('cue')).toBe(false);
+  });
+
+  it('includes custom fields in assigned headers', () => {
+    const values = makeValues({
+      custom: [{ ontimeName: 'MyField', importName: 'custom col' }],
+    });
+    const { assignedHeaders } = deriveHeaderOptionsState(values, ['custom col', 'other']);
+
+    expect(assignedHeaders.has('custom col')).toBe(true);
+    expect(assignedHeaders.has('other')).toBe(false);
+  });
+
+  it('deduplicates and filters empty sample headers', () => {
+    const values = makeValues({});
+    const { sampleHeaders } = deriveHeaderOptionsState(values, ['Title', 'Title', '', '  ', 'Cue']);
+
+    expect(sampleHeaders).toEqual(['Title', 'Cue']);
+  });
+
+  it('deduplicates headers case-insensitively', () => {
+    const values = makeValues({});
+    const { sampleHeaders } = deriveHeaderOptionsState(values, ['Title', 'TITLE', 'title', 'Artist']);
+
+    expect(sampleHeaders).toEqual(['Title', 'Artist']);
+  });
+
+  it('matches headers case-insensitively', () => {
+    const values = patchBuiltIn(createDefaultFormValues(), {
+      Title: { header: 'TITLE', enabled: true },
+    });
+    const { assignedHeaders } = deriveHeaderOptionsState(values, ['title', 'Cue']);
+
+    expect(assignedHeaders.has('title')).toBe(true);
+  });
+});

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

@@ -0,0 +1,213 @@
+import type { ImportMap } from 'ontime-utils';
+
+import { makeStageKey } from '../../../../../../common/utils/localStorage';
+import { normaliseColumnName } from './spreadsheetImportUtils';
+
+export type MappingWarning = {
+  kind: 'duplicate' | 'missing' | 'invalid-name' | 'name-collision';
+};
+
+export type BuiltInFieldDef = {
+  label: string;
+  importKey: keyof Omit<ImportMap, 'worksheet' | 'custom'>;
+  defaultHeader: string;
+};
+
+export const builtInFieldDefs = [
+  { label: 'Flag', importKey: 'flag', defaultHeader: 'flag' },
+  { label: 'Start', importKey: 'timeStart', defaultHeader: 'time start' },
+  { label: 'Link start', importKey: 'linkStart', defaultHeader: 'link start' },
+  { label: 'End', importKey: 'timeEnd', defaultHeader: 'time end' },
+  { label: 'Duration', importKey: 'duration', defaultHeader: 'duration' },
+  { label: 'Cue', importKey: 'cue', defaultHeader: 'cue' },
+  { label: 'Title', importKey: 'title', defaultHeader: 'title' },
+  { label: 'Count to end', importKey: 'countToEnd', defaultHeader: 'count to end' },
+  { label: 'Skip', importKey: 'skip', defaultHeader: 'skip' },
+  { label: 'Note', importKey: 'note', defaultHeader: 'notes' },
+  { label: 'Colour', importKey: 'colour', defaultHeader: 'colour' },
+  { label: 'End action', importKey: 'endAction', defaultHeader: 'end action' },
+  { label: 'Timer type', importKey: 'timerType', defaultHeader: 'timer type' },
+  { label: 'Time warning', importKey: 'timeWarning', defaultHeader: 'warning time' },
+  { label: 'Time danger', importKey: 'timeDanger', defaultHeader: 'danger time' },
+  { label: 'ID', importKey: 'id', defaultHeader: 'id' },
+] as const satisfies readonly BuiltInFieldDef[];
+
+export type ImportFormValues = {
+  worksheet: string;
+  builtIn: Array<{ header: string; enabled: boolean }>;
+  custom: Array<{ ontimeName: string; importName: string }>;
+};
+
+export function createDefaultFormValues(): ImportFormValues {
+  return {
+    worksheet: 'event schedule',
+    builtIn: builtInFieldDefs.map((def) => ({
+      header: def.defaultHeader,
+      enabled: def.defaultHeader.trim().length > 0,
+    })),
+    custom: [],
+  };
+}
+
+function sanitiseOntimeCustomFieldLabel(importName: string): string {
+  // Replace punctuation with spaces, then collapse repeated whitespace into single spaces.
+  const sanitised = importName
+    .replace(/[^a-z0-9 ]+/gi, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return sanitised;
+}
+
+export function getResolvedCustomFields(customFields: ImportFormValues['custom']): ImportFormValues['custom'] {
+  return customFields.map(({ importName }) => {
+    const trimmedImportName = importName.trim();
+
+    if (!trimmedImportName) {
+      return { importName: '', ontimeName: '' };
+    }
+
+    const baseLabel = sanitiseOntimeCustomFieldLabel(trimmedImportName);
+    if (!baseLabel) {
+      return {
+        importName: trimmedImportName,
+        ontimeName: '',
+      };
+    }
+
+    return {
+      importName: trimmedImportName,
+      ontimeName: baseLabel,
+    };
+  });
+}
+
+export function convertToImportMap(values: ImportFormValues): ImportMap {
+  const custom = getResolvedCustomFields(values.custom).reduce<Record<string, string>>(
+    (accumulator, { ontimeName, importName }) => {
+      if (ontimeName && importName) {
+        accumulator[ontimeName] = importName;
+      }
+      return accumulator;
+    },
+    {},
+  );
+
+  const result: Record<string, unknown> = {
+    worksheet: values.worksheet,
+    custom,
+  };
+
+  for (let i = 0; i < builtInFieldDefs.length; i++) {
+    const def = builtInFieldDefs[i];
+    result[def.importKey] = values.builtIn[i].enabled ? values.builtIn[i].header : '';
+  }
+
+  return result as ImportMap;
+}
+
+function getImportMapKey(sourceKey: string) {
+  return makeStageKey(`import-map:${sourceKey}`);
+}
+
+export function persistImportState(sourceKey: string, values: ImportFormValues) {
+  localStorage.setItem(getImportMapKey(sourceKey), JSON.stringify(values));
+}
+
+function isPersistedFormValues(obj: unknown): obj is ImportFormValues {
+  if (typeof obj !== 'object' || obj === null) {
+    return false;
+  }
+
+  const candidate = obj as Record<string, unknown>;
+  return (
+    typeof candidate.worksheet === 'string' &&
+    Array.isArray(candidate.builtIn) &&
+    candidate.builtIn.length === builtInFieldDefs.length &&
+    Array.isArray(candidate.custom)
+  );
+}
+
+export function getPersistedImportState(sourceKey: string): { values: ImportFormValues; isPersisted: boolean } {
+  const storageKey = getImportMapKey(sourceKey);
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) {
+      return { values: createDefaultFormValues(), isPersisted: false };
+    }
+
+    const parsed: unknown = JSON.parse(raw);
+    if (isPersistedFormValues(parsed)) {
+      return { values: parsed, isPersisted: true };
+    }
+
+    // Invalid schema - delete malformed data
+    localStorage.removeItem(storageKey);
+    return { values: createDefaultFormValues(), isPersisted: false };
+  } catch {
+    // Parse error - delete corrupted data
+    localStorage.removeItem(storageKey);
+    return { values: createDefaultFormValues(), isPersisted: false };
+  }
+}
+
+/**
+ * Validates import mappings and generates warnings for duplicate or missing spreadsheet columns.
+ */
+export function getImportWarnings(
+  values: ImportFormValues,
+  detectedSpreadsheetColumns: 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 seenColumns = new Set<string>();
+  const seenDerivedLabels = new Set<string>();
+  const warnings: Record<string, MappingWarning | undefined> = {};
+
+  // 1. check built-in fields
+  for (let i = 0; i < values.builtIn.length; i++) {
+    const field = values.builtIn[i];
+    if (!field.enabled) continue;
+
+    const normalised = normaliseColumnName(field.header);
+    if (!normalised) continue;
+
+    const key = `builtIn.${i}.header`;
+
+    if (seenColumns.has(normalised)) {
+      warnings[key] = { kind: 'duplicate' };
+    } else if (normalisedHeaders.size > 0 && !normalisedHeaders.has(normalised)) {
+      warnings[key] = { kind: 'missing' };
+    }
+
+    seenColumns.add(normalised);
+  }
+
+  // 2. check custom fields
+  values.custom.forEach(({ importName }, index) => {
+    const normalised = normaliseColumnName(importName);
+    if (!normalised) return;
+
+    const key = `custom.${index}.importName`;
+    const sanitisedLabel = sanitiseOntimeCustomFieldLabel(importName);
+
+    if (seenColumns.has(normalised)) {
+      warnings[key] = { kind: 'duplicate' };
+    } else if (!sanitisedLabel) {
+      warnings[key] = { kind: 'invalid-name' };
+    } else if (normalisedHeaders.size > 0 && !normalisedHeaders.has(normalised)) {
+      warnings[key] = { kind: 'missing' };
+    } else {
+      const normalisedDerivedLabel = sanitisedLabel.toLowerCase();
+      if (builtInLabels.has(normalisedDerivedLabel) || seenDerivedLabels.has(normalisedDerivedLabel)) {
+        warnings[key] = { kind: 'name-collision' };
+      }
+    }
+
+    seenColumns.add(normalised);
+    if (sanitisedLabel) {
+      seenDerivedLabels.add(sanitisedLabel.toLowerCase());
+    }
+  });
+
+  return warnings;
+}

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

@@ -0,0 +1,64 @@
+.emptyState {
+  height: 100%;
+  min-height: 16rem;
+  display: grid;
+  place-content: center;
+  gap: 0.35rem;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.emptyTitle {
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.emptyBody {
+  color: $gray-400;
+  font-size: 0.95rem;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: calc(1rem - 2px);
+  text-align: left;
+  table-layout: auto;
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: $zindex-floating;
+    background-color: $gray-1350;
+  }
+
+  th {
+    font-weight: 400;
+    color: $gray-400;
+    text-transform: capitalize;
+    vertical-align: top;
+    white-space: normal;
+  }
+
+  th,
+  td {
+    padding: 0.5rem;
+    min-width: 8rem;
+    vertical-align: top;
+  }
+
+  tr:nth-child(even) {
+    background-color: $white-1;
+  }
+}
+
+.rowNumber {
+  width: 4.5rem;
+  min-width: 4.5rem;
+}
+
+.rowType {
+  width: 7rem;
+  min-width: 7rem;
+}

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

@@ -0,0 +1,78 @@
+import type { CustomField, CustomFieldKey, SpreadsheetPreviewResponse } from 'ontime-types';
+import { isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { getCellValue } from './previewTableUtils';
+
+import style from './PreviewTable.module.scss';
+
+interface PreviewTableProps {
+  preview: SpreadsheetPreviewResponse | null;
+  columnLabels: string[];
+  isLoadingMetadata: boolean;
+  worksheetHeaders: string[];
+}
+
+export default function PreviewTable({
+  preview,
+  columnLabels,
+  isLoadingMetadata,
+  worksheetHeaders,
+}: PreviewTableProps) {
+  const customFieldKeyByLabel = useMemo(() => {
+    if (!preview) return new Map<CustomField['label'], CustomFieldKey>();
+    return new Map(Object.entries(preview.customFields).map(([fieldId, field]) => [field.label, fieldId]));
+  }, [preview]);
+
+  if (!preview) {
+    let emptyContent = 'Select the fields you want to import, then click Preview import.';
+
+    if (isLoadingMetadata) {
+      emptyContent = 'Loading worksheet metadata...';
+    } else if (worksheetHeaders.length === 0) {
+      emptyContent =
+        'No column headers detected in this worksheet. Try a different worksheet or ensure the first row contains column headers.';
+    }
+
+    return (
+      <div className={style.emptyState}>
+        <div className={style.emptyTitle}>Preview not generated</div>
+        <div className={style.emptyBody}>{emptyContent}</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) => (
+            <th key={`${label}-${index}`}>{label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {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);
+
+          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>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}

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

@@ -0,0 +1,68 @@
+import type { CustomField, CustomFieldKey, OntimeEntry } from 'ontime-types';
+import { isOntimeEvent, isOntimeMilestone } from 'ontime-types';
+import type { ImportMap } from 'ontime-utils';
+import { millisToString } from 'ontime-utils';
+
+import { builtInFieldDefs } from '../importMapUtils';
+
+type BuiltInImportKey = keyof Omit<ImportMap, 'worksheet' | 'custom'>;
+
+const importKeyByLabel = new Map<string, BuiltInImportKey>(builtInFieldDefs.map((def) => [def.label, def.importKey]));
+
+function booleanToText(value?: boolean): string {
+  return value ? 'Yes' : '';
+}
+
+function getBuiltInValue(label: string, entry: OntimeEntry): string {
+  const importKey = importKeyByLabel.get(label);
+  if (!importKey) return '';
+
+  switch (importKey) {
+    case 'flag':
+      return isOntimeEvent(entry) ? booleanToText(entry.flag) : '';
+    case 'timeStart':
+      return 'timeStart' in entry ? millisToString(entry.timeStart) : '';
+    case 'linkStart':
+      return isOntimeEvent(entry) ? booleanToText(entry.linkStart) : '';
+    case 'timeEnd':
+      return isOntimeEvent(entry) ? millisToString(entry.timeEnd) : '';
+    case 'duration':
+      return isOntimeEvent(entry) ? millisToString(entry.duration) : '';
+    case 'cue':
+      return isOntimeEvent(entry) || isOntimeMilestone(entry) ? entry.cue : '';
+    case 'title':
+      return 'title' in entry ? entry.title : '';
+    case 'countToEnd':
+      return isOntimeEvent(entry) ? booleanToText(entry.countToEnd) : '';
+    case 'skip':
+      return isOntimeEvent(entry) ? booleanToText(entry.skip) : '';
+    case 'note':
+      return 'note' in entry ? (entry.note ?? '') : '';
+    case 'colour':
+      return 'colour' in entry ? (entry.colour ?? '') : '';
+    case 'endAction':
+      return isOntimeEvent(entry) ? entry.endAction : '';
+    case 'timerType':
+      return isOntimeEvent(entry) ? entry.timerType : '';
+    case 'timeWarning':
+      return isOntimeEvent(entry) ? millisToString(entry.timeWarning) : '';
+    case 'timeDanger':
+      return isOntimeEvent(entry) ? millisToString(entry.timeDanger) : '';
+    case 'id':
+      return entry.id;
+    default:
+      return '';
+  }
+}
+
+export function getCellValue(
+  label: string,
+  entry: OntimeEntry,
+  customFieldKeyByLabel: Map<CustomField['label'], CustomFieldKey>,
+): string {
+  const customFieldId = customFieldKeyByLabel.get(label);
+  if (customFieldId && 'custom' in entry) {
+    return entry.custom?.[customFieldId] ?? '';
+  }
+  return getBuiltInValue(label, entry);
+}

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

@@ -0,0 +1,47 @@
+import type { ImportFormValues } from './importMapUtils';
+
+export function normaliseColumnName(value: string | undefined): string {
+  return value?.trim().toLowerCase() ?? '';
+}
+
+/**
+ * Derives the autocomplete option state for spreadsheet header mapping inputs.
+ * Walks the enabled built-in mappings and all custom mappings, normalizes
+ * their assigned header names, and returns both the unique worksheet headers to
+ * offer in the UI and the subset already assigned to any field.
+ */
+export function deriveHeaderOptionsState(values: ImportFormValues, headers: string[]) {
+  const seenHeaders = new Set<string>();
+  const sampleHeaders: string[] = [];
+
+  for (const header of headers) {
+    const normalized = normaliseColumnName(header);
+    if (!normalized || seenHeaders.has(normalized)) {
+      continue;
+    }
+
+    seenHeaders.add(normalized);
+    sampleHeaders.push(header.trim());
+  }
+
+  const assignedColumns = new Set<string>();
+
+  for (const field of values.builtIn) {
+    if (!field.enabled) continue;
+    const normalized = normaliseColumnName(field.header);
+    if (normalized) {
+      assignedColumns.add(normalized);
+    }
+  }
+
+  for (const { importName } of values.custom) {
+    const normalized = normaliseColumnName(importName);
+    if (normalized) {
+      assignedColumns.add(normalized);
+    }
+  }
+
+  const assignedHeaders = new Set(sampleHeaders.filter((header) => assignedColumns.has(normaliseColumnName(header))));
+
+  return { sampleHeaders, assignedHeaders };
+}